:root{--bg1:#0a1030;--bg2:#0e3b4d;--ink:#eef3ff;--dim:#a9b8d6;--coral:#ff6b5e;--teal:#5eead4;--r:22px}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font:17px/1.6 "Be Vietnam Pro",system-ui,sans-serif;background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed}
a{color:var(--teal)}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2{font-family:Fraunces,Georgia,serif;line-height:1.1;margin:0 0 14px}
h1{font-size:clamp(32px,5vw,54px)} h2{font-size:28px}
.dim{color:var(--dim)}

/* ===== LIQUID GLASS ===== */
.liquid{position:relative;overflow:hidden;border-radius:var(--r);
 background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05));
 -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7);
 border:1px solid rgba(255,255,255,.26);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -10px 24px rgba(255,255,255,.04),0 24px 60px rgba(0,5,30,.45)}
.liquid::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 55% at 18% -5%,rgba(255,255,255,.34),transparent 55%)}
.liquid>*{position:relative}
.goo{position:fixed;inset:0;z-index:0;filter:url(#goo);pointer-events:none;overflow:hidden}
.goo i{position:absolute;display:block;width:34vmax;height:34vmax;background:radial-gradient(circle at 30% 30%,var(--c),transparent 70%);opacity:.55}
.goo i:nth-child(1){--c:#3b6cff;left:-8%;top:-10%}.goo i:nth-child(2){--c:#18c9b0;right:-10%;top:20%;animation-delay:-4s}.goo i:nth-child(3){--c:#ff6b5e;left:25%;bottom:-18%;animation-delay:-8s;opacity:.4}

/* ===== 10 ANIMATIONS ===== */
.an-float{animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-2deg)}}
.an-blob{animation:blob 16s ease-in-out infinite;border-radius:42% 58% 60% 40%/50% 40% 60% 50%}
@keyframes blob{33%{border-radius:60% 40% 35% 65%/45% 60% 40% 55%;transform:translate(6vw,4vh) scale(1.08)}66%{border-radius:38% 62% 55% 45%/60% 38% 62% 40%;transform:translate(-4vw,6vh) scale(.94)}}
.an-shimmer{position:relative;overflow:hidden}
.an-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-100%);animation:shim 3.2s ease-in-out infinite}
@keyframes shim{60%,100%{transform:translateX(100%)}}
.an-ripple{position:relative;overflow:hidden}
.an-ripple::after{content:"";position:absolute;left:var(--x);top:var(--y);width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55);transform:translate(-50%,-50%) scale(0);animation:rip .6s ease-out}
@keyframes rip{to{transform:translate(-50%,-50%) scale(30);opacity:0}}
.an-stamp{animation:stamp .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp{0%{transform:rotate(-8deg) scale(2.2);opacity:0}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.an-fly{animation:fly 1.4s ease-in forwards}
@keyframes fly{0%{transform:translate(0)}30%{transform:translate(-8px,6px) rotate(-8deg)}100%{transform:translate(60vw,-40vh) rotate(20deg) scale(.3);opacity:0}}
.an-pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,107,94,0);transform:scale(1.06)}0%{box-shadow:0 0 0 0 rgba(255,107,94,.6)}}
.an-wave span{display:inline-block;width:8px;height:8px;margin:0 2px;border-radius:50%;background:currentColor;animation:wave 1s ease-in-out infinite}
.an-wave span:nth-child(2){animation-delay:.15s}.an-wave span:nth-child(3){animation-delay:.3s}
@keyframes wave{50%{transform:translateY(-7px)}}
.an-tilt{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.an-tilt:hover{transform:perspective(700px) rotateX(5deg) rotateY(-6deg) translateY(-6px)}
.an-flow{background:linear-gradient(110deg,var(--coral),#ff9a5e,#ff5e9a,var(--coral));background-size:300% 100%;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300% 0}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}

header{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.logo{font:700 20px Fraunces,serif}
.bar{display:flex;gap:10px;align-items:center}
.chip{padding:6px 14px;border-radius:999px;font-size:14px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding:24px 0 40px}
.postmark{display:flex;align-items:center;gap:16px;margin-top:26px}
.pm{width:112px;height:112px;border:3px solid var(--coral);border-radius:50%;display:grid;place-content:center;text-align:center;color:var(--coral);transform:rotate(-8deg);position:relative;flex:none}
.pm::after{content:"";position:absolute;inset:6px;border:1px solid var(--coral);border-radius:50%}
.pm b{font:700 30px/1 Fraunces,serif}.pm small{font-size:11px;letter-spacing:.04em}
form.liquid{padding:24px}
label{display:block;font-weight:500;font-size:15px;margin:0 0 6px}
.f{margin-bottom:16px}
input,textarea,select{width:100%;font:inherit;color:var(--ink);background:rgba(8,14,40,.45);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:10px 12px}
textarea{min-height:150px;resize:vertical}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hint{font-size:13px;color:var(--dim);display:flex;justify-content:space-between;margin-top:4px}
.btn{font:700 16px "Be Vietnam Pro",sans-serif;color:#fff;border:0;border-radius:14px;padding:13px 18px;cursor:pointer;width:100%}
.btn:disabled{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px}
#msg{margin-top:12px;min-height:1.5em;font-size:15px}.ok{color:var(--teal)}.err{color:#ff9d94}
.ad{margin:8px 0 28px;min-height:90px;text-align:center}.ad small{display:block;font-size:11px;color:var(--dim)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin:18px 0 36px}
.plan{padding:22px;display:flex;flex-direction:column;gap:8px}
.plan h3{margin:0;font-size:20px}.price{font:700 30px Fraunces,serif}
.plan ul{margin:0 0 8px;padding-left:18px;color:var(--dim);font-size:15px;flex:1}
.badge{align-self:flex-start;font-size:12px;background:var(--coral);color:#fff;border-radius:999px;padding:2px 10px}
.lic{padding:20px;margin-bottom:32px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}.lic input{flex:1;min-width:200px}.lic .btn{width:auto}
details{border-bottom:1px solid rgba(255,255,255,.18);padding:12px 0}summary{cursor:pointer;font-weight:500}details p{color:var(--dim);margin:8px 0 0}
dialog{border:0;padding:0;background:none;color:var(--ink);max-width:420px;width:92vw}
dialog::backdrop{background:rgba(3,6,22,.6);backdrop-filter:blur(4px)}
dialog .liquid{padding:24px;background:linear-gradient(135deg,rgba(40,60,120,.85),rgba(20,40,70,.85))}
.radio{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.22);border-radius:12px;margin-bottom:8px;cursor:pointer}.radio input{width:auto}
.keybox{padding:18px;margin-bottom:20px;font:700 22px monospace;letter-spacing:.06em;text-align:center}
.env{font-size:46px;display:inline-block}
footer{padding:28px 0 48px;color:var(--dim);font-size:14px}
@media(max-width:820px){.hero{grid-template-columns:1fr}}

/* =====================================================================
   LIQUID GLASS v2 + giao diện kiểu Apple
   Lớp dùng được ở bất kỳ phần tử nào:
     .liquid        thẻ kính (card)          .liquid-thin  kính mỏng, bo nhỏ (input/nhóm)
     .liquid-pill   viên thuốc (nav, chip)   .liquid-tint  kính ngả màu nhấn
     .liquid-lens   thêm khúc xạ SVG (Chrome/Edge; Safari/Firefox tự lùi về blur)
   ===================================================================== */
:root{
  --spring:cubic-bezier(.32,.72,0,1);
  --glass-a:rgba(255,255,255,.22);--glass-b:rgba(255,255,255,.05);--edge:rgba(255,255,255,.28);
  --field:rgba(8,14,40,.42);--thumb:rgba(255,255,255,.22);--sheet:rgba(24,38,78,.82);
  --blue:#0a84ff;--shadow:rgba(0,5,30,.45);
  color-scheme:dark light;
}
@media (prefers-color-scheme:light){
  :root{
    --bg1:#e8f0ff;--bg2:#f3ecff;--ink:#0b1530;--dim:#56627f;--coral:#e8453a;--teal:#0a7a6b;
    --glass-a:rgba(255,255,255,.7);--glass-b:rgba(255,255,255,.34);--edge:rgba(255,255,255,.9);
    --field:rgba(255,255,255,.62);--thumb:#fff;--sheet:rgba(250,251,255,.9);--shadow:rgba(40,60,120,.18);
  }
  .goo i{opacity:.35}
  a{color:var(--coral)}
}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Be Vietnam Pro","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo,.price,.pm b{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Be Vietnam Pro",system-ui,sans-serif;letter-spacing:-.03em}
h1{font-weight:800;letter-spacing:-.045em}

.liquid{
  --r:26px;
  background:linear-gradient(135deg,var(--glass-a),var(--glass-b));
  -webkit-backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);
  backdrop-filter:blur(22px) saturate(1.8) brightness(1.04);
  border:1px solid var(--edge);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(255,255,255,.12),inset 0 -14px 28px rgba(255,255,255,.04),0 1px 2px rgba(0,0,0,.08),0 24px 56px var(--shadow);
  transition:transform .5s var(--spring),box-shadow .5s var(--spring);
}
.liquid::after{ /* ánh sáng phản chiếu bám theo con trỏ */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.3),transparent 62%);
}
.liquid:hover::after{opacity:1}
.liquid-thin{--r:16px;border-radius:16px;-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
.liquid-pill{border-radius:999px}
.liquid-tint{background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 55%,transparent),color-mix(in srgb,var(--coral) 14%,transparent))}
.liquid-lens{ /* khúc xạ: khai báo blur trước làm phương án dự phòng */
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  backdrop-filter:url(#lens) blur(14px) saturate(1.8);
}

/* thanh điều hướng nổi, trong mờ */
header.liquid{position:sticky;top:12px;z-index:20;margin:12px 0 8px;padding:9px 12px 9px 18px}
header.liquid::after{display:none}
/* segmented control VI | EN */
.seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--field);border:1px solid var(--edge)}
.seg button{all:unset;cursor:pointer;padding:5px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--dim);transition:background .4s var(--spring),color .3s,box-shadow .4s var(--spring)}
.seg button.on{color:var(--ink);background:var(--thumb);box-shadow:0 1px 5px rgba(0,0,0,.22)}
.seg button:focus-visible{outline:3px solid var(--blue);outline-offset:1px}

/* chip kiểu viên thuốc kính */
.chip{border-radius:999px;background:var(--field);border:1px solid var(--edge);color:var(--ink);transition:transform .35s var(--spring),background .3s}
.chip:hover{background:var(--thumb)}.chip:active{transform:scale(.94)}

/* ô nhập kiểu iOS: nền đặc nhẹ, không viền, vòng focus xanh hệ thống */
input,textarea,select{background:var(--field);border:1px solid transparent;border-radius:14px;padding:12px 14px;transition:box-shadow .3s,border-color .3s}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 30%,transparent)}
label{font-size:13px;font-weight:600;color:var(--dim);text-transform:none;margin-left:4px}

/* nút chính: viên thuốc, nhấn là co lại như iOS */
.btn{border-radius:999px;padding:14px 22px;letter-spacing:-.01em;transition:transform .35s var(--spring),filter .2s;box-shadow:0 8px 24px color-mix(in srgb,var(--coral) 40%,transparent)}
.btn:hover{filter:brightness(1.07)}.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* thẻ gói + danh sách kiểu "inset grouped" của iOS */
.plan{transition:transform .5s var(--spring),box-shadow .5s var(--spring)}
.plan .price{font-weight:800;letter-spacing:-.04em}
.list{padding:4px 20px;margin-bottom:8px}
.list details{border-bottom:1px solid var(--edge)}.list details:last-child{border-bottom:0}
.list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.list summary::-webkit-details-marker{display:none}
.list summary::after{content:"›";font-size:22px;color:var(--dim);transition:transform .4s var(--spring)}
.list details[open] summary::after{transform:rotate(90deg)}
.lic{padding:14px 16px;border-radius:26px}

/* dialog = bottom sheet */
dialog[open]{animation:sheet .5s var(--spring)}
@keyframes sheet{from{transform:translateY(30px) scale(.96);opacity:0}}
dialog .liquid{background:var(--sheet);border-radius:28px}
.grab{display:block;width:40px;height:5px;border-radius:3px;background:var(--dim);opacity:.45;margin:-10px auto 14px}
@media(max-width:600px){
  dialog{margin:auto 0 0;width:100%;max-width:none}
  dialog .liquid{border-radius:28px 28px 0 0;padding-bottom:max(24px,env(safe-area-inset-bottom))}
  header.liquid{top:8px}
}