@font-face{font-family:"Livvic";font-weight:900;font-display:swap;src:url(fonts/b689ae7a92793d98bd691cca5a83541a.woff) format("woff")}
@font-face{font-family:"Sarabun";font-weight:800;font-display:swap;src:url(fonts/02d45ef193ba2ba0321dc29818b1f6ec.woff) format("woff")}
@font-face{font-family:"Lato";font-weight:400;font-display:swap;src:url(fonts/e148ef0409429054fe31b0a4d2d4a866.woff) format("woff")}
@font-face{font-family:"Lato";font-weight:700;font-display:swap;src:url(fonts/ebf354340e4d5f637965d28dd89018ef.woff) format("woff")}
@font-face{font-family:"Lato";font-weight:900;font-display:swap;src:url(fonts/b5912c2d25b02f15b5675718149a5c94.woff) format("woff")}
@font-face{font-family:"Montserrat";font-weight:800;font-display:swap;src:url(fonts/8352a7d68147db42b2ebe6db71757c8a.woff) format("woff")}
/* iLAVA park — landing page (bản giao diện mới theo thiết kế 815px, mobile-first).
   Ảnh nghệ thuật cắt từ thiết kế (img/*.jpg); chữ, bảng giá, form, liên hệ là HTML thật. */
:root{
  --blue:#17399b; --blue2:#2d7ff0; --pink:#e5177f; --pink2:#ff4aa2; --yellow:#ffe033; --gold:#f5a312;
  --teal:#157f78; --teal2:#1d9a91; --ink:#14307a; --sky:#eaf5ff; --line:#cfe3f5;
  font-family:"Baloo 2","Nunito","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:linear-gradient(180deg,#bfe4ff,#e7f5ff 40%,#bfe4ff);line-height:1.35;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid #073e81;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute}
svg{width:1em;height:1em;fill:currentColor;flex:none}
em{font-style:normal;color:var(--pink)}

.page{max-width:815px;margin:0 auto;background:var(--sky);box-shadow:0 12px 50px rgba(8,50,120,.28);overflow:hidden}

/* HERO */
/* hero dựng bằng HTML/CSS, bề ngang chuẩn 815px, mọi cỡ theo cqw */
.hero{position:relative;container-type:inline-size;aspect-ratio:815/500;overflow:hidden;background:linear-gradient(180deg,#5cc4ff,#a8e2ff 55%,#ffd86a)}
.hero-bg{position:absolute;inset:auto 0 0 0;height:30%;background:radial-gradient(circle at 6% 70%,#ff5aa8 0 9%,transparent 9.5%),radial-gradient(circle at 20% 90%,#ffd23a 0 10%,transparent 10.5%),radial-gradient(circle at 36% 100%,#2bd1a3 0 9%,transparent 9.5%),radial-gradient(circle at 80% 100%,#3a8cff 0 10%,transparent 10.5%),radial-gradient(circle at 94% 80%,#ff8a3a 0 10%,transparent 10.5%)}
.hero-in{position:absolute;inset:0}
.hero-copy{position:absolute;left:3.5cqw;top:3cqw;width:50cqw;color:#fff;line-height:1}
.logo{display:flex;align-items:flex-end;gap:.6cqw;margin:0}
.logo-i{font-size:7.5cqw;font-weight:900;color:#ffd21f;-webkit-text-stroke:.5cqw #1a45b5;paint-order:stroke fill;letter-spacing:-.2cqw}
.logo-p{font-size:4.2cqw;font-weight:900;color:#2bd36f;-webkit-text-stroke:.4cqw #0f6b3a;paint-order:stroke fill;margin-bottom:1cqw}
.logo-sub{margin:.6cqw 0 0;font-size:1.7cqw;font-weight:800;color:#17399b}
.hero-title{display:grid;margin:3cqw 0 0;font-size:4.7cqw;font-weight:900;color:#fff;-webkit-text-stroke:.7cqw #1a45b5;paint-order:stroke fill;text-shadow:0 .5cqw 0 rgba(10,40,120,.4)}
.hero-title strong{font-size:5.8cqw;color:#ffe033}
.pill-y{display:flex;align-items:center;gap:1.4cqw;margin:1.8cqw 0 0;width:max-content;max-width:100%;padding:1.1cqw 2.4cqw;border-radius:99px;background:#ffe033;color:#1a3f9c;font-size:2.05cqw;white-space:nowrap;font-weight:800;box-shadow:0 .4cqw 0 #e0a800}
.pill-y svg{width:3.6cqw;height:3.6cqw;color:#e5177f;flex:none}
.pill-cal{margin-top:1.2cqw}
.hero-mascot{position:absolute;left:36cqw;top:0;width:17cqw;height:auto}
.hero-sign{position:absolute;right:3.5cqw;top:2cqw;margin:0;padding:1.4cqw 2.4cqw;border-radius:1.4cqw;background:linear-gradient(#a8652a,#7a4318);border:.5cqw solid #5a3010;color:#ffe033;font-weight:900;font-size:3.6cqw;line-height:1.1;text-align:center}
.hero-sign small{font-size:2.6cqw;color:#fff;font-weight:900}
.hero-kids{position:absolute;right:0;top:25cqw;width:44cqw;height:auto;border-radius:3cqw 0 0 3cqw;box-shadow:0 0 2cqw rgba(0,0,0,.25)}
.hero-cta{position:absolute;left:30.3cqw;bottom:3cqw;width:39.6cqw;padding:1.6cqw 0;border-radius:99px;background:linear-gradient(#ff5db0,#e5177f);border:.4cqw solid #ffd23a;color:#fff;text-align:center;font-size:3cqw;font-weight:900;box-shadow:0 .6cqw 0 #a30f5c;transition:transform .2s,box-shadow .2s}
.hero-cta:hover{transform:translateY(-1px);box-shadow:0 .6cqw 0 #a30f5c,0 0 0 .6cqw rgba(255,255,255,.7)}


/* khối chung + tiêu đề */
.block{padding:14px 12px 10px;background:linear-gradient(180deg,#f3faff,#eaf5ff)}
.title{text-align:center;font-weight:900;text-transform:uppercase;line-height:1.15;margin:4px 0 12px;font-size:clamp(17px,3.9vw,30px);letter-spacing:.2px}
.title .keep{text-transform:none}
.title-blue{color:var(--blue);text-shadow:0 2px 0 #fff,0 0 10px #fff}
.title-pink{color:var(--pink);text-shadow:0 2px 0 #fff,0 0 10px #fff}
.title-yellow{text-transform:none;color:var(--blue);font-size:clamp(18px,4.3vw,32px);background:linear-gradient(180deg,#fff7b8,#ffe96a);border-radius:999px;padding:6px 14px;box-shadow:0 2px 0 rgba(255,255,255,.9) inset,0 3px 8px rgba(245,163,18,.28)}

/* thẻ ảnh */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.card{background:#fff;border-radius:12px;overflow:hidden;border:2px solid #fff;box-shadow:0 3px 10px rgba(30,80,170,.18);display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:184/75;object-fit:cover}
.cards-icon .card{background:linear-gradient(180deg,#fffbe0,#fff3b0)}
.cards-icon figcaption{display:flex;align-items:center;gap:8px;padding:7px 8px 8px;margin-top:-6px;background:linear-gradient(180deg,#fffde8,#fff3b8);border-radius:14px 14px 0 0;position:relative;flex:1}
.ico{width:clamp(32px,6.6vw,48px);aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.ico svg{width:62%;height:62%}
.ico-blue{color:#1f5de0}.ico-pink{color:#e5177f}.ico-gold{color:#f59a0b}
.cards-icon b{color:var(--blue);font-weight:900;font-size:clamp(11px,2.5vw,17px);line-height:1.12}
.cards-plain .card img{aspect-ratio:187/98}
.cards-plain figcaption{padding:7px 4px 8px;text-align:center;font-weight:900;color:var(--blue);font-size:clamp(11px,2.5vw,17px)}

/* chips */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.chips li{position:relative;background:#fff;border-radius:16px;border:2px solid #d6ecfb;padding:8px 8px 8px 6px;display:grid;grid-template-columns:clamp(46px,10.5vw,86px) 1fr;grid-template-rows:auto auto;gap:2px 8px;align-items:start;min-height:84px;box-shadow:0 2px 6px rgba(30,80,170,.1)}
.chips img{grid-row:1/3;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.2);align-self:center}
.chips span{font-weight:800;color:var(--blue);font-size:clamp(11px,2.5vw,17px);line-height:1.12;align-self:end}
.chip-ico{width:clamp(18px,3.6vw,28px);height:clamp(18px,3.6vw,28px);color:var(--pink);justify-self:start;align-self:start}

/* khai trương */
.event{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 0;background:radial-gradient(circle at 12% 20%,#ffe86a 0 18%,transparent 19%),radial-gradient(circle at 92% 10%,#ff9ad0 0 12%,transparent 13%),radial-gradient(circle at 70% 100%,#9fd4ff 0 14%,transparent 15%),linear-gradient(135deg,#ffeb7a,#ffd23a 55%,#ffe27a)}
.event-art{flex:0 0 66%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;background:linear-gradient(135deg,#7a3bd8,#c93ae0);border-radius:0 18px 18px 0;color:#fff;text-align:center;font-weight:900;line-height:1.05}
.event-art p{display:grid;gap:4px}.event-art span{font-size:clamp(12px,3.2vw,24px);color:#ffe9f6}.event-art strong{font-size:clamp(15px,3.7vw,28px);white-space:nowrap;color:#ffe033;text-shadow:0 2px 0 #7a1d8f}
.ev-gift{width:clamp(34px,8vw,64px);height:clamp(34px,8vw,64px);color:#ff4aa2;flex:none}
.event-info{flex:1;display:grid;gap:clamp(6px,1.6vw,14px)}
.event-info li{display:flex;align-items:center;gap:8px;color:var(--blue)}
.event-info svg{width:clamp(22px,4.6vw,36px);height:clamp(22px,4.6vw,36px);color:var(--pink)}
.event-info b{font-weight:900;font-size:clamp(11px,2.7vw,21px);line-height:1.12}

/* form */
.register{padding:14px 14px 18px;background:linear-gradient(180deg,#ffe96a,#fff4b0 55%,#ffe27a)}
.reg-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;text-align:center;margin-bottom:8px}
.reg-head h2{font-weight:900;color:var(--blue);font-size:clamp(15px,3.9vw,32px);line-height:1.1}
.reg-head p{font-weight:800;color:var(--blue);font-size:clamp(12px,2.7vw,22px)}
.reg-gift{width:clamp(34px,8vw,68px);height:auto;border-radius:10px}
.reg-form{background:#fff;border-radius:16px;padding:14px;display:grid;gap:10px;box-shadow:0 2px 8px rgba(80,60,0,.15)}
.row{display:grid;grid-template-columns:minmax(120px,36%) 1fr;gap:8px;align-items:center}
.reg-form label{font-weight:900;color:var(--blue);font-size:clamp(11px,2.5vw,17px);line-height:1.15}
.reg-form input{width:100%;min-height:36px;border:2px solid #b9d3ec;border-radius:10px;padding:6px 10px;background:#fff;font-size:16px}
.reg-form input:focus{border-color:var(--blue2);outline:0;box-shadow:0 0 0 3px rgba(45,127,240,.25)}
.reg-form input.bad{border-color:#d81b60}
.btn-pink{justify-self:center;display:inline-block;min-width:min(78%,420px);padding:11px 22px;border-radius:999px;text-align:center;color:#fff;font-weight:900;font-size:clamp(14px,3.1vw,24px);letter-spacing:.3px;background:linear-gradient(180deg,#ff5fb2,#e5177f 55%,#c70f68);box-shadow:0 4px 0 #a80b55,0 8px 14px rgba(229,23,127,.35);text-shadow:0 1px 0 rgba(0,0,0,.2);transition:transform .15s,box-shadow .15s}
.btn-pink:hover{transform:translateY(1px);box-shadow:0 3px 0 #a80b55,0 6px 12px rgba(229,23,127,.35)}
.btn-pink.small{font-size:15px;min-width:0;padding:9px 18px}
.form-status{min-height:1.2em;text-align:center;font-weight:800;color:#0a6b3d;font-size:14px}
.form-status.err{color:#b00020}
.demo-note{text-align:center;font-size:12px;color:#5b6b8c}

/* quà tặng */
.gifts{display:grid;grid-template-columns:36.5% 1fr 29%;gap:8px;padding:10px 10px 8px;background:linear-gradient(180deg,#fff,#eaf5ff)}
.pill{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:12px;color:#fff;font-weight:900;line-height:1.1;padding:8px 6px;text-align:center;font-size:clamp(11px,2.5vw,19px)}
.pill-blue{background:linear-gradient(180deg,#2f7ff0,#1650c4);box-shadow:0 2px 0 #0f3b94;text-transform:uppercase}
.pill-pink{background:linear-gradient(180deg,#ff5fb2,#e5177f);box-shadow:0 2px 0 #a80b55;border-radius:999px;margin-left:22px}
.star{color:var(--yellow);width:1.5em;height:1.5em;filter:drop-shadow(0 1px 0 rgba(0,0,0,.2))}
.gift-left,.gift-mid{display:grid;gap:8px;align-content:start}
.gift-mid{position:relative}
.gift-mid .pill .star{position:absolute;left:0;top:-4px;width:26px;height:26px}
.gift-photo{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffe86a,#ffb23a);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.2);overflow:hidden;color:var(--blue);font-weight:800;line-height:1.2}.gift-photo img{width:36%;height:auto;flex:none}.gift-photo figcaption{padding:6px 8px 6px 0;font-size:clamp(11px,2.6vw,17px)}
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#e8f4ff;border-radius:12px;padding:6px}
.gift-grid li{background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 2px;min-height:78px;text-align:center}
.gift-grid svg{width:clamp(26px,5.6vw,44px);height:clamp(26px,5.6vw,44px);color:var(--pink)}
.gift-grid span{font-weight:800;color:var(--blue);font-size:clamp(10px,2.1vw,15px);line-height:1.1}
.gift-note{background:linear-gradient(180deg,#fff7b0,#fff3c6);border:2px solid #ffe65c;border-radius:14px;padding:8px 8px 10px;display:grid;gap:6px;align-content:start}
.gift-note h2{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--pink);font-weight:900;font-size:clamp(11px,2.5vw,18px);text-align:center}
.gift-note h2 svg{width:1.6em;height:1.6em}
.gift-note ul{display:grid;gap:5px}
.gift-note li{position:relative;padding-left:15px;font-size:clamp(9.5px,1.9vw,13px);line-height:1.2;color:#1c2f6b}
.gift-note li::before{content:"";position:absolute;left:0;top:.18em;width:9px;height:9px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 2px #cfe6ff}

/* bảng giá */
.pricing{display:grid;grid-template-columns:1fr 20.5%;gap:8px;padding:6px 10px 6px;background:linear-gradient(180deg,#eaf5ff,#f4fbff)}
.price-main{grid-column:1;grid-row:1;min-width:0}
.price-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--blue);font-weight:900;font-size:clamp(15px,3.7vw,29px);text-transform:uppercase;margin:4px 0 6px}
.price-title small{font-size:.5em;text-transform:none;font-style:italic;font-weight:600;color:#3b4a6b}
.price-title .star{width:1em;height:1em}
.table-wrap{overflow-x:auto;border-radius:12px;border:2px solid var(--teal)}
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:clamp(9.5px,2vw,15px);min-width:520px}
.tbl th{background:var(--teal);color:#fff;font-weight:700;padding:6px 4px;text-align:center}
.tbl td{padding:5px 4px;text-align:center;border-top:1px solid #cfe7e5;border-left:1px solid #cfe7e5;color:#23314f}
.tbl td:first-child,.tbl th:first-child{border-left:0}
.tbl tbody tr:nth-child(even) td{background:#eaf6f5}
.tbl b{font-weight:800;color:#0e1a3a}
.code{display:inline-block;min-width:78%;padding:3px 6px;border-radius:7px;background:#ffe3c9;border:1px solid #f6c597;color:#e0261f;font-weight:900;letter-spacing:.2px}
.benefit-title{display:flex;align-items:center;gap:6px;margin:10px 0 6px;color:#fff;background:linear-gradient(180deg,#2f7ff0,#1650c4);border-radius:999px;padding:5px 14px 5px 8px;width:max-content;max-width:100%;font-weight:900;font-size:clamp(12px,2.7vw,20px)}
.benefit-title .star{width:1.5em;height:1.5em}
.tbl-benefit td:first-child{text-align:left;padding-left:10px}
.footnote{margin-top:5px;font-style:italic;font-weight:600;color:#33415f;font-size:clamp(10px,2vw,14px)}
.guide{grid-column:2;grid-row:1;background:linear-gradient(180deg,#e9f7f5,#f2fbff);border:2px solid #bfe6e2;border-radius:14px;overflow:hidden;align-self:start}
.guide h2{background:var(--teal);color:#fff;text-align:center;font-weight:900;font-size:clamp(10px,2.2vw,16px);padding:8px 4px;line-height:1.15}
.guide ol{display:grid;gap:7px;padding:8px 6px}
.guide li{display:grid;grid-template-columns:clamp(20px,4.2vw,30px) 1fr;gap:6px;align-items:center;font-size:clamp(9.5px,1.95vw,14px);line-height:1.15;color:#1c2f4b}
.num{width:clamp(20px,4.2vw,30px);aspect-ratio:1;border-radius:50%;background:var(--teal);color:#fff;font-weight:900;display:grid;place-items:center;font-size:clamp(11px,2.3vw,16px)}
.qr{display:grid;justify-items:center;gap:2px;margin:2px 6px 8px;padding:8px 4px;background:#fff;border-radius:12px;text-align:center;color:var(--blue);font-size:clamp(10px,2.1vw,15px);line-height:1.1}
.qr img{width:min(100%,96px)}

/* lưu ý thẻ */
.card-notes{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin:0 10px 8px;padding:10px 14px;background:#eaf3f9;border-radius:12px}
.card-notes h2{color:var(--teal);font-weight:900;font-size:clamp(12px,3.1vw,22px);line-height:1.1}
.card-notes ul{display:grid;gap:3px}
.card-notes li{position:relative;padding-left:16px;font-size:clamp(10px,2vw,14px);color:#2a3857}
.card-notes li::before{content:"";position:absolute;left:2px;top:.45em;width:7px;height:7px;border-radius:50%;background:var(--teal2)}

/* chân trang */
.foot{display:grid;grid-template-columns:36% 1fr 1fr;grid-template-areas:"logo links links" "logo addr call";align-items:center;gap:8px 10px;background:linear-gradient(180deg,#2461d6,#173f9e);color:#fff;padding:0 12px 10px 0;overflow:hidden}
.foot-logo{grid-area:logo;align-self:end;padding:8px 0}
.foot-links{grid-area:links;display:flex;gap:18px;flex-wrap:wrap;padding-top:10px}
.social{display:flex;align-items:center;gap:8px;color:#fff;text-align:left;font-weight:800;font-size:clamp(11px,2.2vw,16px);line-height:1.1}
.social svg{width:clamp(30px,5.8vw,46px);height:clamp(30px,5.8vw,46px);background:#fff;border-radius:50%;color:#1877f2}
.foot-addr,.foot-call{display:flex;align-items:center;gap:8px;font-weight:800;line-height:1.1;font-size:clamp(11px,2.3vw,17px)}
.foot-addr svg{width:clamp(22px,4.4vw,34px);height:clamp(22px,4.4vw,34px)}
.foot-call{grid-area:call;background:#1d58c6;border-radius:999px;padding:6px 12px;justify-self:end;white-space:nowrap}
.foot-call svg{width:clamp(24px,4.8vw,38px);height:clamp(24px,4.8vw,38px);background:#fff;color:#1d58c6;border-radius:50%;padding:5px}
.foot-call span{display:grid;font-size:clamp(10px,2vw,14px);font-weight:600}
.foot-call b{font-size:clamp(14px,3.2vw,25px);font-weight:900;letter-spacing:.3px}
.foot-addr{grid-area:addr}

/* nút gọi nổi */
.float-call{position:fixed;right:max(12px,calc(50vw - 407px + 12px));bottom:14px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ff5fb2,#e5177f);box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:20}
.float-call svg{width:26px;height:26px}
@media (min-width:640px){.float-call{display:none}}

/* hộp thoại */
dialog{border:0;border-radius:16px;padding:22px 22px 18px;max-width:min(92vw,420px);box-shadow:0 14px 50px rgba(0,0,0,.4);color:var(--ink);text-align:center}
dialog::backdrop{background:rgba(5,25,70,.55)}
dialog h2{font-weight:900;font-size:20px;margin-bottom:6px}
dialog p{margin:6px 0 12px;font-size:15px}
.dialog-close{position:absolute;right:10px;top:6px;width:34px;height:34px;font-size:26px;line-height:1;color:#53668f}

/* màn nhỏ */
@media (max-width:640px){
  .cards,.chips{grid-template-columns:repeat(2,1fr)}
  .event{flex-direction:column;align-items:stretch;padding:0 0 12px}
  .event-art{flex:none;border-radius:0}
  .event-info{padding:0 16px}
  .event-info b{font-size:17px}
  .row{grid-template-columns:1fr;gap:4px}
  .gifts{grid-template-columns:1fr}
  .pill-pink{margin-left:0}
  .gift-mid .pill .star{display:none}
  .pricing{grid-template-columns:1fr}
  .price-main,.guide{grid-column:1;grid-row:auto}
  .tbl{font-size:12.5px}
  .card-notes{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr;grid-template-areas:"logo logo" "links links" "addr call";padding:0 12px 14px}
  .foot-logo{max-width:300px}
  .gift-note li{font-size:12.5px}
  .gift-grid span{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.foot-logo{padding:8px 12px}.foot-logo .logo-sub{color:#fff}

/* ===== Bám bố cục bản Canva: nền trắng phẳng, hero gọn, dải KHAI TRƯƠNG hồng nghiêng, form không khung ===== */
.hero{aspect-ratio:815/415;background:#fff}
.hero-bg,.hero-sign,.hero-kids,.ev-gift,.reg-gift{display:none}
.hero-copy{left:3cqw;top:1.4cqw;width:55cqw}
.hero-mascot{left:33cqw;top:1cqw;width:19.5cqw}
.hero-title{-webkit-text-stroke:.55cqw #1a45b5}
.pill-y{transform:rotate(-2.2deg);box-shadow:none}
.pill-cal{transform:rotate(-1.8deg)}
.hero-cta{bottom:1cqw;border-width:.3cqw}
.block,.gifts,.register,.price,.foot-note{background:#fff}
.title-yellow{background:none;box-shadow:none;border-radius:0;padding:0;color:var(--blue)}
.event{background:#fff;padding:8px 10px;gap:18px}
.event-art{flex:0 0 60%;justify-content:center;background:linear-gradient(#ff3d9a,#e5177f);border-radius:999px;transform:rotate(-2.5deg);box-shadow:0 3px 0 #a30f5c;padding:8px 18px}
.event-art p{display:block}.event-art span{display:inline;font-size:clamp(14px,4vw,31px);color:#fff}
.event-art strong{display:none}
.event-info b{font-size:clamp(11px,2.5vw,19px)}
.reg-head{grid-template-columns:1fr}
.reg-form{background:none;box-shadow:none;padding:6px 8px}
@media(max-width:640px){.event-art{flex:none;transform:rotate(-1.5deg)}}

/* ===== Phông & độ gọn theo bản Canva (Livvic cho tiêu đề, Lato cho nội dung) ===== */
:root{font-family:"Lato","Segoe UI",Roboto,Arial,sans-serif}
.title,.hero-title,.logo-i,.logo-p,.reg-head h2,.price-title,.pill,.event-art span,.gift-note h2,.guide h2,.card-notes h2,.hero-cta,.btn-pink,.pill-y,.foot-call b{font-family:"Livvic","Lato",sans-serif}
.pill-y{font-family:"Sarabun","Lato",sans-serif}
.title{font-size:min(3.2vw,25px);margin:2px 0 8px}
.block{padding:8px 14px 6px}
.cards-icon .card img{aspect-ratio:184/60}
.chips li{padding:5px 6px}
.chips{--c:1}
.chips img{max-width:62px}
.chips li{grid-template-columns:62px 1fr}
.cards-plain .card img{aspect-ratio:187/80}
.cards-plain .card{box-shadow:none;border-color:#d6ecfb}
.event{padding:4px 10px}.event-info{gap:3px}.event-art{padding:6px 18px}
.event-art span{font-size:min(3.6vw,28px)}
.reg-head h2{font-size:min(3.6vw,28px)}.reg-head p{font-size:min(2.4vw,19px)}
.register{padding:6px 14px 8px}
.reg-form{gap:6px;padding:2px 8px}
.reg-form input{min-height:30px;padding:3px 10px}
.btn-pink{padding:7px 22px;font-size:min(2.9vw,22px)}
.form-status{min-height:0}.demo-note{margin:0;font-size:11px}
.gifts{padding:6px 10px}
.gift-grid li{min-height:58px;padding:4px 2px}.gift-grid svg{width:30px;height:30px}
.gift-left,.gift-mid,.gift-note{align-self:start}
.price-title{font-size:min(3.2vw,25px)}
.guide ol{gap:4px;padding:6px}
.card-notes{padding:6px 12px}
@media all{.table-wrap td,.table-wrap th{padding-top:4px;padding-bottom:4px}}
.hero{aspect-ratio:815/440}
.hero-copy .logo{display:grid;gap:0;width:max-content}
.hero-copy .logo-i{font-size:6.2cqw;line-height:.95;background:#ffe033;color:#1a45b5;padding:0 1cqw;border-radius:.6cqw;-webkit-text-stroke:0}
.hero-copy .logo-p{font-size:6.2cqw;line-height:.95;background:#2bd36f;color:#1a45b5;padding:0 1cqw;border-radius:.6cqw;-webkit-text-stroke:0;margin:0;text-transform:uppercase}
.hero-copy .logo-sub{font-size:1.5cqw;margin-top:.6cqw}
.hero-title{font-size:5.4cqw;margin-top:1.6cqw}.hero-title strong{font-size:6.2cqw}
.title-yellow{font-size:min(4.2vw,33px)}

/* ===== Bản theo thiết kế PDF: khung cố định 815px, mọi cỡ tính theo bề ngang (cqw) — từ 641px trở lên ===== */
.stage{display:none}
@media all{
  .page{display:none}
  body{background:#fff}
  .stage{display:block;position:relative;container-type:inline-size;width:100%;max-width:815px;aspect-ratio:815/1928;margin:0 auto;overflow:hidden;background:#fff;color:#0632bf}
  .stage .L,.stage .ph{position:absolute;display:block;max-width:none}
  .stage .t{position:absolute;white-space:nowrap;line-height:1.12;font-family:"Sarabun","Lato",sans-serif;font-weight:800}
  .stage .t i{font-style:normal}
  .stage .logo-y{font-family:Livvic;font-weight:900;color:#ffec46;-webkit-text-stroke:.9cqw #0632bf;paint-order:stroke fill;line-height:1}
  .stage .logo-g{font-family:Livvic;font-weight:900;color:#00e85e;-webkit-text-stroke:.9cqw #0632bf;paint-order:stroke fill;line-height:1}
  .stage .sub{font-family:Livvic;font-weight:900;color:#0632bf;line-height:1.1}
  .stage .h1w,.stage .h1y{font-family:Livvic;font-weight:900;line-height:1;-webkit-text-stroke:1.5cqw #1568e2;paint-order:stroke fill;text-shadow:0 .7cqw 0 rgba(10,50,150,.35)}
  .stage .h1w{color:#fff}.stage .h1y{color:#ffec46}
  .stage .pill-t{color:#0632bf}
  .stage .cta{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font-family:Sarabun,Lato,sans-serif;font-weight:800;border-radius:99px}
  .stage .cta:hover{box-shadow:0 0 0 .6cqw rgba(255,255,255,.75)}
  .stage .h2b,.stage .h2p,.stage .h2b2{font-family:Livvic;font-weight:900;line-height:1.05}
  .stage .h2b,.stage .h2b2{color:#0632bf}.stage .h2p{color:#ff007a}
  .stage .q,.stage .v{color:#ff0063;font-style:normal}
  .stage .lab{color:#0632bf;line-height:1.1}
  .stage .lab2{color:#0f36c2;font-family:Lato;font-weight:700;line-height:1.1}
  .stage .arc{position:absolute;overflow:visible}
  .stage .arc text{font-family:Sarabun,Lato,sans-serif;font-weight:800;font-size:32.7px;fill:#fff}
  .stage .dt{color:#0632bf}
  .stage .h2f{font-family:Sarabun;color:#0632bf;line-height:1.05}.stage .pk{color:#ff0063}
  .stage .h3f{color:#0632bf}
  .stage .yl{font-family:Lato;font-weight:900;color:#f9e449}
  .stage .pk2{font-family:Lato;font-weight:900;color:#ff008a}
  .stage .notes{position:absolute;display:grid;gap:.6cqw;margin:0;padding:0;list-style:none;font-family:Lato;font-weight:700;color:#0f36c2;line-height:1.18}
  .stage .notes li{position:relative;padding-left:2.2cqw}
  .stage .notes li::before{content:"";position:absolute;left:0;top:.35em;width:1.1cqw;height:1.1cqw;border-radius:50%;background:#2d7ff0;box-shadow:0 0 0 .3cqw #cfe6ff}
  .stage .pt{font-family:Montserrat;font-weight:800;color:#0f36c2}
  .stage .pt small{font-family:Lato;font-size:.6em;font-style:italic;font-weight:700;color:#3b4a6b;margin-left:1cqw}
  .stage .tb{position:absolute;border-collapse:separate;border-spacing:0;border:.35cqw solid #157f78;border-radius:1.2cqw;overflow:hidden;background:#fff;font-family:Lato;color:#111;text-align:center}
  .stage .tb th{background:#157f78;color:#fff;font-weight:700;padding:.5cqw .6cqw}
  .stage .tb td{padding:.45cqw .6cqw;border-top:1px solid #cfe3df;font-weight:400}
  .stage .tb tbody tr:nth-child(even) td{background:#ecf6f4}
  .stage .tb-p td:nth-child(2){text-align:center}
  .stage .tb-b td:first-child{text-align:left;padding-left:1.4cqw}
  .stage .code{font-style:normal;font-weight:700;color:#e53935;background:#ffe9dd;border:1px solid #ffc7a6;border-radius:.8cqw;padding:.1cqw 1.2cqw}
  .stage .gd{position:absolute;display:flex;align-items:center;justify-content:center;background:#157f78;border-radius:1.4cqw 1.4cqw 0 0;color:#fff;font-family:Lato;font-weight:900;font-size:1.85cqw;line-height:1.1;text-align:center}
  .stage .gd-body{position:absolute;background:#fff}
  .stage .step{font-family:Lato;font-weight:400;color:#000;line-height:1.15;white-space:normal}
  .stage .zl{font-family:Montserrat;font-weight:800;color:#0f36c2;line-height:1.1}
  .stage .demo{font-family:Lato;font-weight:400;color:#5b6b8c}
  .stage .reg-form-d{position:absolute;inset:0;pointer-events:none}
  .stage .reg-form-d>*{pointer-events:auto}
  .stage .reg-form-d label{position:absolute;display:block;font-family:Sarabun,Lato,sans-serif;font-weight:800;color:#0632bf;font-size:1.85cqw;line-height:1.15;width:22cqw}
  .stage .reg-form-d label.two{line-height:1.1}
  .stage .reg-form-d input{position:absolute;height:3.6cqw;border:.25cqw solid #b9d3ec;border-radius:1.4cqw;background:#fff;padding:0 1.4cqw;font:inherit;font-size:max(11px,1.9cqw);color:#0632bf;box-sizing:border-box}
  .stage .reg-form-d input:focus{outline:0;border-color:#2d7ff0;box-shadow:0 0 0 .4cqw rgba(45,127,240,.25)}
  .stage .reg-form-d input.bad{border-color:#d81b60}
  .stage .reg-form-d button{position:absolute;background:transparent;border:0;border-radius:99px;color:#fff;font-family:Lato;font-weight:900;cursor:pointer}
  .stage .reg-form-d .form-status{position:absolute;margin:0;text-align:center;font-size:1.2cqw;min-height:0;line-height:1.2}
  /* Thông báo của form hiện đúng chỗ dòng "Đây là trang demo…": khi có thông báo thì ẩn dòng đó, cho thông báo nền trắng để không đè chữ khác. */
  .stage .reg-form-d .form-status:not(:empty){background:#fff;border-radius:99px;padding:.3cqw 1.4cqw;box-shadow:0 .2cqw .8cqw rgba(6,50,191,.18);z-index:5}
  .stage:has(.reg-form-d .form-status:not(:empty)) .t.demo{visibility:hidden}
  .stage .hot{position:absolute;background:transparent;border:0;cursor:pointer;border-radius:99px}
  .stage .hot:focus-visible{outline:2px solid #fff}
}
@media all{
  .stage .tb tr{height:0}
  .stage .tb th,.stage .tb td{padding-top:.15cqw;padding-bottom:.15cqw;line-height:1.1}
  .stage .tb-p{table-layout:fixed}
  .stage .tb-p th:first-child,.stage .tb-p td:first-child{width:12%}
  .stage .tb-p th:nth-child(2){width:28%}
}
@media all{
  .stage .tb-p th{padding-top:.9cqw;padding-bottom:.9cqw}
  .stage .tb-b th{padding-top:.5cqw;padding-bottom:.5cqw}
}
.stage .vec{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.stage .lv{font-family:Lato,Sarabun,sans-serif;font-weight:900;line-height:1.15}
.stage .lv b{font-weight:900;font-size:1.45em}
.stage .sign{text-shadow:0 .3cqw 0 rgba(60,25,0,.5)}
.stage .mt{font-family:Montserrat,Lato,sans-serif;font-weight:800}
.stage .it{font-family:Lato;font-style:italic;font-weight:700}
.stage .lt{font-family:Lato;font-weight:700}
.stage .logo2{font-family:Livvic;font-weight:900;-webkit-text-stroke:.5cqw #0632bf;paint-order:stroke fill;line-height:1}
.stage .reg-form-d input.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* loading toàn trang khi gửi form */
.loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,40,120,.55);backdrop-filter:blur(3px)}
.loader[hidden]{display:none}
.loader-box{display:grid;justify-items:center;gap:14px;padding:26px 34px;border-radius:20px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35);color:#0632bf;font:800 17px Sarabun,Lato,sans-serif}
.loader-box p{margin:0}
.spin{width:54px;height:54px;border-radius:50%;border:6px solid #cfe3f5;border-top-color:#e5177f;border-right-color:#ffd21f;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.stage .notes{gap:.7cqw}
.stage .notes li{padding-left:1.9cqw}
.stage .notes li::before{width:.8cqw;height:.8cqw;top:.38em;box-shadow:0 0 0 .25cqw #cfe6ff}
.stage .pt-c{transform:translate(-50%,-50%) rotate(-3.4deg);line-height:1;white-space:nowrap}
.stage .gift-ttl{transform:translate(-50%,-50%);white-space:nowrap;line-height:1;font-family:Lato,sans-serif;font-weight:900;color:#ffe033;text-shadow:0 .15cqw .3cqw rgba(0,30,110,.6)}
.stage .gift-fade{position:absolute;border-radius:0 0 1.7cqw 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 30%,rgba(255,255,255,.9))}
.stage .gift-cap{transform:translateY(-50%);line-height:1.25;white-space:normal;font-family:Lato,sans-serif;font-weight:900;color:#0f36c2}

/* ===== Nhận diện thương hiệu: i xanh ngọc · LAVA cam · park xanh ngọc, viền xanh đậm ===== */
:root{--brand-teal:#17a3a2;--brand-orange:#fbb017;--brand-ink:#05485a}
.stage .wm{position:absolute;white-space:nowrap;line-height:1;font-family:Livvic,Lato,sans-serif;font-weight:900;letter-spacing:-.02em}
.stage .wm span{-webkit-text-stroke:.8cqw var(--brand-ink);paint-order:stroke fill}
.stage .wm .wt{color:var(--brand-teal)}.stage .wm .wo{color:var(--brand-orange)}
.stage .wm .wp{font-size:.62em;margin-left:.12em}
.stage .wm-f span{-webkit-text-stroke:.55cqw var(--brand-ink)}
.stage .wm-f{filter:drop-shadow(0 0 .35cqw rgba(255,255,255,.9))}
.stage .brand .bt{color:var(--brand-teal)}.stage .brand .bo{color:var(--brand-orange)}
.stage .brand{-webkit-text-stroke:.35cqw var(--brand-ink);paint-order:stroke fill}
.stage .sub{color:#0b4a5a}
.stage .dt{background:rgba(255,255,255,.88);padding:.5cqw 1.4cqw;border-radius:1.2cqw;box-shadow:0 .2cqw .8cqw rgba(0,40,120,.25);margin:-.5cqw 0 0 -1.4cqw}
@media(min-width:816px){.stage{max-width:none;margin:0}}
.stage img[src$="mascot.png"]{object-fit:contain;object-position:center}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.stage .anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}