/* Nguyệt Hà Marketing · styles.css — sinh từ build.py, sửa trực tiếp cũng được */
/* Nguyệt Hà · bản 3 "liquid glass": tấm bo tròn, kính mờ, chuyển động mềm. Một giao diện cố định theo nhận diện. */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{
  color-scheme:dark;
  --night:#060606;
  --black:#0c0b0a;
  --black-2:#141312;
  --ivory:#f0f0eb;
  --paper:#faf9f5;
  --ink:#0e0e0f;
  --red:#c4211b;
  --red-soft:#ff8f85;
  --gold:#cbab72;
  --gold-light:#e2c48e;
  --gold-deep:#7d5f2c;
  --serif:"Playfair Display","Bodoni 72","Didot",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --sheet-r:clamp(28px,4vw,44px);
  --sheet-gap:clamp(8px,1.2vw,14px);
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 92px)}
@media (max-width:899px){html{scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}}
body{margin:0;background:var(--night);color:var(--ivory);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas{max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0}
p,dd,li{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Bề mặt */
.dark{
  --bg:var(--black);--fg:var(--ivory);--muted:#a8a59f;--line:rgba(255,255,255,.1);--line-strong:rgba(255,255,255,.22);--focus:var(--gold);--accent-text:var(--gold);
  --slot-line:rgba(203,171,114,.6);--slot-bg:rgba(203,171,114,.08);--slot-fg:#e8d6b0;--slot-tag:var(--gold);
  background:var(--bg);color:var(--fg);color-scheme:dark;
}
.light{
  --bg:var(--ivory);--fg:var(--ink);--muted:#5b5954;--line:rgba(14,14,15,.1);--line-strong:rgba(14,14,15,.28);--focus:var(--red);--accent-text:var(--gold-deep);
  --slot-line:#b08d52;--slot-bg:rgba(203,171,114,.14);--slot-fg:#56401c;--slot-tag:var(--gold-deep);
  background:var(--bg);color:var(--fg);color-scheme:light;
}
:focus-visible{outline:2px solid var(--focus,var(--gold));outline-offset:3px}

.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 50px -24px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
}
.glass-light{
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 18px 44px -26px rgba(60,40,10,.35);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:#1a1917}
  .glass-light{background:#fbfaf6}
}
.shine{position:relative;isolation:isolate}
.shine::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(260px circle at var(--mx,50%) var(--my,-60%),rgba(255,255,255,.16),transparent 62%);opacity:0;transition:opacity .35s}
.shine:hover::after{opacity:1}
.light .shine::after{background:radial-gradient(260px circle at var(--mx,50%) var(--my,-60%),rgba(203,171,114,.22),transparent 62%)}

/* Tấm (sheet) bo tròn chồng lên nền đêm */
.sheet{position:relative;margin:var(--sheet-gap) var(--sheet-gap) 0;border-radius:50% 50% var(--sheet-r) var(--sheet-r) / clamp(28px,7vw,96px) clamp(28px,7vw,96px) var(--sheet-r) var(--sheet-r);overflow:hidden;overflow:clip;padding-block:clamp(64px,9vw,120px)}
.wrap{position:relative;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 .7rem/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.eyebrow .ico{width:12px;height:12px;color:var(--red)}
.h2{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.14;letter-spacing:-.01em}
.h2 em{font-style:italic;color:var(--accent-text)}
.sub{color:var(--muted);max-width:40ch}
.ico{display:block;flex:none;--acc:var(--red)}

/* Đốm màu lỏng sau lớp kính */
.blobs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;width:clamp(280px,42vw,620px);aspect-ratio:1;border-radius:43% 57% 62% 38%/45% 39% 61% 55%;animation:drift 26s ease-in-out infinite alternate}
.blob.b2{animation-duration:32s;animation-direction:alternate-reverse}
.dark .blob.b1{background:radial-gradient(circle at 40% 40%,rgba(196,33,27,.42),rgba(196,33,27,0) 66%)}
.dark .blob.b2{background:radial-gradient(circle at 50% 50%,rgba(203,171,114,.26),rgba(203,171,114,0) 66%)}
.light .blob.b1{background:radial-gradient(circle at 40% 40%,rgba(226,196,142,.55),rgba(226,196,142,0) 66%)}
.light .blob.b2{background:radial-gradient(circle at 50% 50%,rgba(196,33,27,.12),rgba(196,33,27,0) 66%)}
@keyframes drift{0%{transform:translate(0,0) rotate(0) scale(1)}50%{transform:translate(8%,-6%) rotate(60deg) scale(1.12)}100%{transform:translate(-6%,8%) rotate(120deg) scale(.94)}}

/* Hiện dần khi cuộn */
.js-reveal [data-reveal]{opacity:0;transform:translateY(28px) scale(.97);filter:blur(6px);transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.js-reveal [data-reveal].in{opacity:1;transform:none;filter:none}

/* Nút dạng viên thuốc */
.btn{white-space:nowrap;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 24px;border:1px solid transparent;border-radius:999px;font:500 .8rem/1.3 var(--sans);letter-spacing:.06em;text-align:center;text-decoration:none;cursor:pointer;overflow:hidden;transition:transform .4s var(--spring),background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.btn:active{transform:scale(.96)}
.btn .arrow{width:20px;height:9px;transition:transform .4s var(--spring)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ivory{background:var(--ivory);color:var(--ink)}
.btn-ivory .arrow{color:var(--red)}
.btn-dark{background:var(--ink);color:var(--ivory)}
.btn-dark .arrow{color:var(--gold-light)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:var(--line-strong);color:var(--fg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.light .btn-ghost{background:rgba(255,255,255,.5)}
.btn-gold{background:linear-gradient(110deg,#b8975f 0%,var(--gold-light) 45%,var(--gold) 100%);color:var(--ink);box-shadow:0 10px 30px -12px rgba(203,171,114,.7),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-gold::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);animation:glint 6s var(--ease) infinite}
.site-header .btn-gold::before{animation:none}
.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
.btn-gold .arrow{color:var(--ink)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.76rem}

/* Ô chờ nội dung */
.slot{border:1px dashed var(--slot-line);background:var(--slot-bg);color:var(--slot-fg);border-radius:16px;padding:10px 14px;font-size:.84rem;line-height:1.5}
.slot-tag{display:block;margin-bottom:2px;font:600 .6rem/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--slot-tag)}
.slot-inline{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.82rem}

/* Thanh điều hướng nổi */
.skip{position:fixed;left:16px;top:-120px;z-index:100;background:var(--ivory);color:var(--black);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:calc(env(safe-area-inset-top,0px) + 10px) clamp(10px,2vw,20px) 0;pointer-events:none}
.nav-pill{pointer-events:auto;max-width:var(--max);margin-inline:auto;display:flex;align-items:center;gap:12px;padding:7px 7px 7px 16px;border-radius:999px;background:linear-gradient(180deg,rgba(38,36,34,.8),rgba(12,11,10,.8));border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 40px -14px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;color:var(--ivory)}
.brand img{width:30px;height:auto;display:block}
.wordmark{font:400 .94rem/1.4 var(--serif);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.nav{position:relative;display:flex;gap:2px}
.nav a{position:relative;z-index:1;padding:10px 16px;border-radius:999px;font:500 .82rem/1 var(--sans);color:rgba(240,240,235,.84);text-decoration:none;white-space:nowrap;transition:color .3s}
.nav a:hover,.nav a[aria-current]{color:var(--ivory)}
.pill-ind{position:absolute;left:0;width:0;border-radius:999px;pointer-events:none;opacity:0;transition:opacity .35s}
.nav .pill-ind{top:0;bottom:0;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.pill-ind.on{opacity:1}
@media (max-width:899px){.nav{display:none}.wordmark{font-size:.86rem}}

/* Dock kính dưới đáy màn hình điện thoại */
.dock{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:50;display:none;width:min(440px,calc(100% - 20px));transform:translateX(-50%);padding:6px;border-radius:999px;background:linear-gradient(180deg,rgba(38,36,34,.82),rgba(12,11,10,.84));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px -12px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.dock-inner{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.dock a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 6px;border-radius:999px;font:500 .6rem/1.2 var(--sans);color:rgba(240,240,235,.8);text-decoration:none;text-align:center;white-space:nowrap;transition:color .3s,font-size .35s var(--ease),padding .35s var(--ease)}
.dock a .ico{width:22px;height:22px;transition:transform .45s var(--spring)}
.dock a[aria-current]{color:var(--ivory)}
.dock a[aria-current] .ico{transform:translateY(-1px) scale(1.08)}
.dock .pill-ind{top:0;bottom:0;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.dock a.dock-cta{color:var(--gold-light)}
@media (max-width:899px){.dock{display:block}}
.nav-pill{transition:background .45s var(--ease),border-color .45s,box-shadow .45s}
.dock{transition:transform .6s var(--spring),background .45s var(--ease),border-color .45s,box-shadow .45s}
.dock.is-min{transform:translateX(-50%) translateY(4px) scale(.92)}
.dock.is-min a{font-size:0;padding-block:10px}
.site-header.is-light .nav-pill,.dock.is-light{background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(250,249,245,.58));border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 14px 40px -18px rgba(60,40,10,.35)}
.site-header.is-light .brand,.site-header.is-light .nav a[aria-current],.site-header.is-light .nav a:hover,.dock.is-light a[aria-current]{color:var(--ink)}
.site-header.is-light .nav a,.dock.is-light a{color:rgba(14,14,15,.64)}
.site-header.is-light .pill-ind,.dock.is-light .pill-ind{background:rgba(14,14,15,.07)}
.site-header.is-light .brand img{content:url(../assets/nh-mark-ink.png)}
.dock.is-light a.dock-cta{color:var(--gold-deep)}
.site-header.is-light,.dock.is-light{--focus:var(--ink)}
@media (max-width:899px){.nav-pill > .btn-gold{display:none}.nav-pill{width:max-content;padding:9px 18px}}

/* Mở đầu */
.hero{position:relative;overflow:hidden;border-radius:0 0 var(--sheet-r) var(--sheet-r);background:var(--black)}
.hero-copy{position:relative;z-index:2;max-width:min(600px,54%);display:flex;flex-direction:column;gap:26px;padding-block:calc(env(safe-area-inset-top,0px) + clamp(130px,16vw,190px)) clamp(64px,9vw,120px)}
.hero h1{font-size:clamp(2.6rem,5.2vw,4.5rem);line-height:1.16;letter-spacing:-.015em}
.hero h1 em{font-style:italic;background:linear-gradient(100deg,#b8975f,var(--gold-light) 45%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero .sub{font-size:clamp(1.02rem,1.3vw,1.14rem);font-weight:300}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:18px;padding:8px 16px 8px 10px;border-radius:999px;font:500 .74rem/1 var(--sans);color:var(--muted);text-decoration:none}
.scroll-cue .mouse{position:relative;width:18px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.35)}
.scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:6px;margin-left:-2px;border-radius:999px;background:var(--gold-light);animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:0}}
.hero-art{position:absolute;top:0;right:0;bottom:0;z-index:1;width:min(60%,900px)}
.hero-art canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-art.silk-fallback{background:linear-gradient(128deg,transparent 30%,#2a0204 42%,#9a0c12 50%,#c4211b 54%,#3a0306 62%,transparent 76%)}
.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--black) 0%,rgba(12,11,10,0) 36%),linear-gradient(0deg,rgba(12,11,10,.55) 0%,rgba(12,11,10,0) 30%)}
.hero-sign{position:absolute;z-index:3;right:var(--gutter);bottom:clamp(28px,4vw,56px);font:italic 400 clamp(1.5rem,2.6vw,2.4rem)/1.12 var(--serif);color:var(--ivory);text-align:right;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:999px;font:500 .8rem/1 var(--sans);color:var(--ivory);animation:bob 7s ease-in-out infinite}
.float-chip .ico{width:22px;height:22px;color:var(--gold-light)}
.float-chip.c1{top:24%;left:30%}
.float-chip.c2{top:46%;right:10%;animation-delay:-2.3s;animation-duration:8s}
.float-chip.c3{top:64%;left:40%;animation-delay:-4.1s;animation-duration:9s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-star{position:absolute;z-index:2;top:15%;right:12%;width:22px;height:22px;color:var(--gold);animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.5;transform:scale(.75) rotate(14deg)}}
@media (max-width:899px){
  .hero-copy{max-width:none;padding-block:calc(env(safe-area-inset-top,0px) + 112px) 28px}
  .hero-art{position:relative;width:auto;height:clamp(320px,86vw,460px);margin:0 12px 12px;border-radius:calc(var(--sheet-r) - 6px);overflow:hidden}
  .hero-art::after{background:linear-gradient(180deg,rgba(12,11,10,.4) 0%,rgba(12,11,10,0) 30%),linear-gradient(0deg,rgba(12,11,10,.6) 0%,rgba(12,11,10,0) 36%)}
  .float-chip.c1{top:12%;left:8%}
  .float-chip.c2{top:36%;right:6%}
  .float-chip.c3{top:58%;left:10%}
  .scroll-cue{display:none}
}
@media (max-width:339px){.hero h1{font-size:2.3rem}}
.hero-copy > *{animation:rise-in 1s var(--ease) backwards;animation-delay:calc(var(--k,0) * 110ms + 120ms)}
.hero-copy > :nth-child(2){--k:1}.hero-copy > :nth-child(3){--k:2}.hero-copy > :nth-child(4){--k:3}.hero-copy > :nth-child(5){--k:4}
.hero h1 em{display:inline-block;animation:melt 1.3s var(--ease) .5s backwards}
@keyframes rise-in{from{opacity:0;transform:translateY(22px);filter:blur(8px)}}
@keyframes melt{from{opacity:0;transform:translateY(.25em) scaleY(1.3);filter:blur(10px)}}
@media (max-width:899px){
  .hero-art{margin:0;border-radius:0;overflow:visible}
  .hero-art canvas,.hero-art.silk-fallback::before{-webkit-mask-image:radial-gradient(farthest-side at 50% 50%,#000 58%,transparent);mask-image:radial-gradient(farthest-side at 50% 50%,#000 58%,transparent)}
  .hero-art.silk-fallback{background:none}
  .hero-art.silk-fallback::before{content:"";position:absolute;inset:0;background:linear-gradient(128deg,transparent 30%,#2a0204 42%,#9a0c12 50%,#c4211b 54%,#3a0306 62%,transparent 76%)}
}

/* Câu chuyện */
.story-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.story-aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 108px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.story-aside .h2{font-size:clamp(2.6rem,5.4vw,4.4rem)}
.cast{list-style:none;padding:6px;display:flex;flex-wrap:wrap;gap:6px;border-radius:28px}
.cast li{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;font-size:.78rem;color:var(--muted)}
.avatar{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%}
.avatar .ico{width:20px;height:20px}
.avatar.me{background:var(--ink);color:var(--ivory)}
.avatar.a{background:#dddbd4;color:#56544f;font:500 .95rem/1 var(--serif)}
.avatar.nh{background:var(--black);border:1px solid var(--gold-deep)}
.avatar.nh img{width:22px;height:auto}
.story-note{font-size:.8rem;color:var(--muted)}
.chat{list-style:none;padding:0;display:flex;flex-direction:column;gap:22px}
.msg{display:flex;align-items:flex-end;gap:10px;max-width:min(560px,90%)}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg-body{min-width:0;display:flex;flex-direction:column}
.who{margin-bottom:6px;font:500 .6rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.msg.me .who{text-align:right}
.chat .who{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bubble{position:relative;padding:13px 18px;border-radius:24px;font-size:1rem;line-height:1.55}
.msg.me .bubble{background:linear-gradient(160deg,#23211f,#0b0b0b);color:var(--ivory);border-bottom-right-radius:8px;box-shadow:0 14px 28px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1);transform-origin:100% 100%}
.msg.a .bubble{color:#2b2a27;border-bottom-left-radius:8px;transform-origin:0 100%}
.needs{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.needs li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.86rem}
.needs .ico{width:10px;height:10px;color:var(--gold)}
.dots{display:none;gap:3px;filter:url(#goo)}
.dots i{width:9px;height:9px;border-radius:50%;background:currentColor;animation:hop 1s var(--ease) infinite}
.dots i:nth-child(2){animation-delay:.14s}
.dots i:nth-child(3){animation-delay:.28s}
@keyframes hop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
.msg.is-typing .dots{display:inline-flex;position:absolute;left:20px;top:50%;margin-top:-5px}
.msg.is-typing .text{visibility:hidden}
.story.is-scripted .msg{transition:opacity .5s var(--ease)}
.story.is-scripted .msg:not(.is-in):not(.is-typing){opacity:0}
.story.is-scripted .msg.is-typing .bubble,.story.is-scripted .msg.is-in .bubble{animation:pop .7s var(--spring) both}
@keyframes pop{0%{transform:scale(.55);opacity:0}100%{transform:scale(1);opacity:1}}
.finale{margin-top:56px}
.finale .msg{max-width:none;display:block}
.finale-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.finale-head .who{margin:0}
.answer{position:relative;padding:clamp(22px,3.4vw,40px);border-radius:32px;background:linear-gradient(160deg,#1b1a18 0%,#0b0b0a 60%);border:1px solid rgba(226,196,142,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,.6);transform-origin:0 0;overflow:hidden}
.answer .blobs{opacity:.9}
.answer .dots{color:var(--gold-light)}
.story.is-scripted .msg .bubble{transition:clip-path .75s var(--ease)}
.story.is-scripted .msg.a.is-typing .bubble{clip-path:inset(calc(100% - 48px) calc(100% - 78px) 0 0 round 24px)}
.story.is-scripted .msg.a.is-in .bubble{clip-path:inset(-30px -30px -50px -30px round 24px)}
.msg.a.is-typing .dots{top:auto;bottom:19px;left:22px;margin-top:0}
.story.is-scripted .msg.nh.is-typing .answer{clip-path:inset(0 calc(100% - 96px) calc(100% - 56px) 0 round 28px)}
.story.is-scripted .msg.nh.is-in .answer{clip-path:inset(-60px -60px -100px -60px round 32px)}
.msg.nh.is-typing .dots{left:31px;top:28px;margin:-5px 0 0}
.answer-lead{position:relative;font:400 clamp(1.4rem,2.6vw,2rem)/1.3 var(--serif)}
.answer-lead em{font-style:italic;color:var(--gold-light)}
.bento{position:relative;list-style:none;padding:0;margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bento li{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:24px}
.badge{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(226,196,142,.28),rgba(226,196,142,.04) 70%);border:1px solid rgba(226,196,142,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.badge .ico{width:28px;height:28px;color:var(--gold-light)}
.bento h3{font-size:1.18rem;line-height:1.3}
.bento p{font-size:.88rem;color:var(--muted)}
.msg.is-in .bento li{animation:rise .8s var(--spring) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}
.answer-foot{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:24px}
.answer-sign{font:italic 400 1.02rem/1.4 var(--serif);color:var(--muted)}
@media (max-width:999px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){.story-grid{grid-template-columns:1fr}.story-aside{position:static}}
@media (max-width:599px){
  .bento{grid-template-columns:1fr;gap:8px}
  .bento li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;padding:12px 18px 12px 12px;border-radius:26px}
  .bento .badge{grid-row:span 2}
  .badge{width:44px;height:44px}.badge .ico{width:24px;height:24px}
  .bento h3{font-size:1.05rem}
  .msg{max-width:86%}
  .msg.me .avatar{display:none}
}

/* Quy trình */
.process-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:20px clamp(32px,6vw,96px);align-items:end}
.statement{margin-top:16px;font:400 clamp(2.2rem,4.8vw,3.9rem)/1.24 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.statement .arrow{display:inline-block;width:.9em;height:.4em;margin-left:.15em;color:var(--red);vertical-align:.12em}
.seg-wrap{margin-top:52px;display:flex;justify-content:center}
.seg{position:relative;display:flex;gap:2px;max-width:100%;padding:6px;border-radius:999px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.seg::-webkit-scrollbar{display:none}
.seg-btn{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 18px 9px 10px;border:0;border-radius:999px;background:none;color:rgba(240,240,235,.72);font:500 .86rem/1 var(--sans);cursor:pointer;white-space:nowrap;scroll-snap-align:center;transition:color .35s}
.seg-btn .ico{width:26px;height:26px;color:currentColor;transition:transform .45s var(--spring)}
.seg-btn:hover{color:var(--ivory)}
.seg-btn[aria-selected="true"]{color:var(--ink)}
.seg-btn[aria-selected="true"] .ico{transform:rotate(-8deg) scale(1.08)}
.seg .pill-ind{top:6px;bottom:6px;background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:0 8px 22px -8px rgba(203,171,114,.7),inset 0 1px 0 rgba(255,255,255,.6)}
.step-panel{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px clamp(28px,5vw,72px);margin-top:24px;padding:clamp(22px,4vw,48px);border-radius:32px}
.panel-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;align-self:start}
@media (min-width:900px){.panel-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + 108px)}}
.panel-no{font:italic 400 clamp(4.4rem,8vw,7rem)/.9 var(--serif);color:transparent;-webkit-text-stroke:1px var(--gold);letter-spacing:-.02em}
.panel-head h3{font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.2}
.panel-q{font:italic 400 1.1rem/1.5 var(--serif);color:var(--muted)}
.pill-note{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;font-size:.84rem;background:rgba(196,33,27,.1);border:1px solid rgba(196,33,27,.35)}
.pill-note .ico{width:12px;height:12px;color:var(--red)}
.pill-note.soft{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:var(--muted)}
.items{list-style:none;padding:0;display:grid;gap:8px}
.item{border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);transition:background-color .35s,border-color .35s}
.item:hover{background:rgba(255,255,255,.06)}
.item.open{background:rgba(226,196,142,.07);border-color:rgba(226,196,142,.3)}
.item-top{display:grid;grid-template-columns:40px minmax(0,1fr) 32px;gap:4px 12px;align-items:center;width:100%;padding:16px 16px 16px 18px;border:0;background:none;text-align:left;cursor:pointer;border-radius:20px}
.item-code{font:500 .76rem/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.item-name{display:block;font:400 1.14rem/1.3 var(--serif);color:var(--fg)}
.item-deliver{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:.8rem;color:var(--gold-light)}
.item-deliver .ico{width:14px;height:14px;color:var(--gold)}
.tag-opt{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;border:1px solid var(--line-strong);font:500 .56rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);vertical-align:3px}
.plus{position:relative;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);transition:transform .5s var(--spring),background-color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.4px;margin:-.7px 0 0 -6px;background:var(--fg);border-radius:2px}
.plus::after{transform:rotate(90deg);transition:transform .45s var(--spring)}
.item.open .plus{transform:rotate(180deg);background:var(--gold)}
.item.open .plus::before,.item.open .plus::after{background:var(--ink)}
.item.open .plus::after{transform:rotate(0)}
.item-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.item.open .item-body{grid-template-rows:1fr}
.item-body > div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .5s}
.item.open .item-body > div{visibility:visible;transition-delay:0s}
.item-body p{padding:0 18px 0 70px;color:var(--muted);font-size:.94rem}
.item-body .item-deliver{margin:0;padding:10px 18px 18px 70px;color:var(--gold-light)}
.step-panel.enter .item{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i) * 55ms)}
.step-panel.enter .panel-head{animation:rise .6s var(--ease) both}
.panel-next{grid-column:-2/-1;display:flex;justify-content:flex-end;margin-top:4px}
.process-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
@media (max-width:899px){
  .process-head,.step-panel{grid-template-columns:1fr}
  .seg-wrap{justify-content:flex-start;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .panel-next .btn{width:100%}
}
@media (max-width:599px){
  .item-body p{padding-left:18px}
  .item-body .item-deliver{padding-left:18px}
  .item-top{grid-template-columns:34px minmax(0,1fr) 32px;padding:14px 12px 14px 14px}
  .step-panel{border-radius:26px}
}
@media (min-width:600px) and (max-width:899px){.seg-btn{padding:8px 10px 8px 7px;gap:6px;font-size:.8rem}.seg-btn .ico{width:22px;height:22px}}
@media (max-width:899px){.seg.more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}}
@media (max-width:599px){
  .seg-btn{gap:0;padding:7px}
  .seg-btn .ico{width:22px;height:22px}
  .seg-btn .lbl{display:inline-block;max-width:0;overflow:hidden;opacity:0;transition:opacity .3s .12s}
  .seg-btn[aria-selected="true"]{gap:6px;padding:7px 14px 7px 8px}
  .seg-btn[aria-selected="true"] .lbl{max-width:9em;opacity:1}
  .step-panel.glass{padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .item,.item-top{border-radius:26px}
  .item{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
@media (max-width:379px){.seg{gap:0}.seg-btn{padding:7px 6px}}
@media (max-width:419px){
  .item-top{grid-template-columns:minmax(0,1fr) 32px;gap:2px 10px;padding:14px 12px 14px 16px}
  .item-code{grid-column:1;grid-row:1;font-size:.66rem;letter-spacing:.14em;color:var(--gold)}
  .item-top > span:nth-child(2){grid-column:1;grid-row:2}
  .plus{grid-column:2;grid-row:1 / span 2}
  .item-body p,.item-body .item-deliver{padding-left:16px}
}

/* Ưu đãi */
.offer-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.offer-head .h2{margin-top:14px;max-width:16ch}
.ticket{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px 36px;align-items:center;margin-top:32px;padding:22px 22px 22px clamp(20px,3vw,34px);border-radius:32px;background:radial-gradient(120% 160% at 0% 0%,#231d19 0%,#0c0b0a 55%);color:var(--ivory);box-shadow:0 30px 60px -30px rgba(40,20,5,.55)}
.ticket::before{--ang:0deg;content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),rgba(203,171,114,.25) 0deg,rgba(203,171,114,.25) 200deg,var(--gold-light) 260deg,var(--red) 300deg,rgba(203,171,114,.25) 340deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:orbit 7s linear infinite}
@keyframes orbit{to{--ang:360deg}}
.ticket-copy{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ticket-title{font:400 clamp(1.2rem,2vw,1.55rem)/1.3 var(--serif)}
.ticket-title b{font-weight:400;font-style:italic;color:var(--gold-light)}
.free{position:relative;overflow:hidden;padding:7px 14px;border-radius:999px;background:linear-gradient(100deg,#b8975f,var(--gold-light) 50%,var(--gold));color:var(--ink);font:600 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.free::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);animation:glint 4s var(--ease) infinite}
@keyframes glint{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.seats-box{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.seats{display:grid;grid-template-columns:repeat(10,11px);gap:7px}
.seat{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3d6,var(--gold) 60%,#9c7b44);box-shadow:0 0 10px rgba(226,196,142,.5);animation:breathe 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -160ms)}
.seat.taken{background:#3b3935;box-shadow:none;animation:none}
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}
.seats-foot{display:flex;align-items:center;gap:12px}
.partners{display:inline-flex;align-items:center}
.partners img{width:34px;height:34px;margin-left:-10px;border-radius:50%;object-fit:contain;background:#fff;border:2px solid #0c0b0a;box-shadow:0 4px 12px -4px rgba(0,0,0,.6)}
.partners img:first-child{margin-left:0}
.partners .more{display:grid;place-items:center;width:34px;height:34px;margin-left:-10px;border-radius:50%;background:#1b1a18;border:2px solid #0c0b0a;color:var(--gold-light);font-size:.7rem;font-weight:600}
.seats-caption{font-size:.8rem;color:#a8a59f}
.seats-caption b{font:italic 400 1.3rem/1 var(--serif);color:var(--ivory);margin-right:4px}
.ticket-terms{margin-top:12px}
.terms-text{font-size:.82rem;line-height:1.5;color:var(--muted);white-space:pre-line}
.offer-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:64px}
.steps3{position:relative;list-style:none;padding:0;display:grid;gap:12px}
.steps3::before{content:"";position:absolute;left:44px;top:40px;bottom:40px;width:1.5px;background:linear-gradient(var(--gold),rgba(203,171,114,.15));border-radius:2px}
.steps3 li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:14px 18px 14px 12px;border-radius:26px}
.steps3 .badge{width:64px;height:64px;background:radial-gradient(circle at 30% 25%,#fff,#f4ecdc 70%);border-color:rgba(176,141,82,.45)}
.steps3 .badge .ico{width:32px;height:32px;color:var(--ink)}
.steps3 li > div > b{display:block;font:400 1.18rem/1.3 var(--serif)}
.steps3 li > div > span{display:block;font-size:.88rem;color:var(--muted)}
.board-wrap{position:relative;padding:24px;perspective:1000px}
.board-float{animation:bob 8s ease-in-out infinite}
.board-card{position:relative;padding:30px 28px 70px;border-radius:26px;background:var(--paper);color:var(--ink);border:1px solid #e6e0cf;box-shadow:0 40px 70px -36px rgba(60,40,10,.5);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(-2deg);transition:transform .6s var(--ease)}
.board-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #e8e2d3}
.board-top img{width:32px;height:auto}
.board-top p{font:400 1.12rem/1.2 var(--serif)}
.board-top small{display:block;margin-top:4px;font:500 .56rem/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep)}
.board-rows{list-style:none;padding:0;display:grid;gap:12px;margin-top:18px}
.board-rows li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;font-size:.9rem}
.board-rows .tick{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f2ead8;color:var(--gold-deep)}
.board-rows .tick .ico{width:14px;height:14px}
.board-rows em{display:block;height:6px;margin-top:7px;border-radius:999px;background:linear-gradient(90deg,#ebe4d4 0 70%,transparent 70%)}
.board-seal{position:absolute;right:22px;bottom:-24px;display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:var(--black);border:1px solid var(--gold);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--gold-deep),0 16px 30px -12px rgba(0,0,0,.5)}
.board-seal::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(203,171,114,.65);animation:spinslow 24s linear infinite}
.board-seal img{width:36px;height:auto}
@keyframes spinslow{to{transform:rotate(360deg)}}
.board-star{position:absolute;color:var(--red);width:18px;height:18px;top:-6px;left:10px}
@media (max-width:999px){
  .ticket{grid-template-columns:1fr auto}
  .ticket .btn{grid-column:1/-1}
}
@media (max-width:899px){.offer-grid{grid-template-columns:1fr}.board-wrap{max-width:440px;margin-inline:auto}}
@media (max-width:599px){
  .ticket{grid-template-columns:1fr;border-radius:28px}
  .seats{grid-template-columns:repeat(10,10px);gap:6px}.seat{width:10px;height:10px}
}

/* Mạng lưới khách hàng */
.network-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.constellation{display:block;width:100%;height:auto;margin-top:28px;overflow:visible}
.constellation .edge{fill:none;stroke:var(--gold);stroke-opacity:.34;stroke-width:1;vector-effect:non-scaling-stroke}
.constellation.will-draw .edge{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.constellation.is-drawn .edge{stroke-dashoffset:0}
.constellation .node{fill:var(--gold);transform-box:fill-box;transform-origin:center;animation:twinkle 4.5s ease-in-out infinite}
.constellation .node.red{fill:var(--red)}
.constellation .halo{fill:none;stroke:var(--gold);stroke-opacity:.2;stroke-width:1;vector-effect:non-scaling-stroke}
.constellation .core{fill:#0e0d0c;stroke:var(--gold-deep);stroke-width:1;vector-effect:non-scaling-stroke}
.constellation .pulse{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:ripple 3.6s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.2);opacity:0}}
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.stat{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;border-radius:999px}
.stat > span:first-child{font:500 .62rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.marquee{margin-top:14px;display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee .row:nth-child(2) .track{animation-direction:reverse;animation-duration:44s}
.marquee:hover .track{animation-play-state:paused}
.track ul{list-style:none;padding:0 10px 0 0;margin:0;display:flex;gap:10px}
.ind{display:flex;align-items:center;gap:12px;padding:7px 22px 7px 7px;border-radius:999px;white-space:nowrap;font-size:.92rem;color:var(--fg);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.ind .badge{width:46px;height:46px}
.ind .badge .ico{width:26px;height:26px}
.marquee-label{margin-top:44px;text-align:center;font:500 .66rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.clients ul{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.client{display:grid;place-items:center;width:168px;height:76px;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 14px 30px -18px rgba(0,0,0,.7)}
.client img{max-width:124px;max-height:46px;object-fit:contain}
.stat b{font:400 1.2rem/1 var(--serif);color:var(--gold-light);padding-right:10px}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:599px){.constellation{height:280px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}}

/* Đặt lịch */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:start}
.contact-intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.channels{display:grid;gap:8px;width:100%}
.channels div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border-radius:999px}
.channels dt{font:500 .64rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.channels dd{min-width:0;margin:0;overflow-wrap:anywhere}
.reply-time{font-size:.92rem;color:var(--muted)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form{position:relative;display:grid;gap:20px;padding:clamp(22px,4vw,40px);border-radius:32px;background:linear-gradient(160deg,#1b1a18,#0c0b0a 60%);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 40px 80px -40px rgba(0,0,0,.55);overflow:hidden}
.form .blobs{opacity:.8}
.form > *{position:relative}
.form > .blobs{position:absolute}
.form-note{font-size:.8rem;color:var(--muted)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;padding:0;margin:0}
.field > label,.field > legend{padding:0 0 0 4px;font-size:.8rem;color:var(--muted)}
.field > legend{margin-bottom:8px}
.field input,.field textarea{width:100%;padding:13px 16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:16px;color:var(--fg);font:400 1rem/1.4 var(--sans);transition:border-color .3s,box-shadow .3s,background-color .3s}
.field textarea{resize:vertical;min-height:88px;border-radius:20px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(203,171,114,.18)}
.field input[aria-invalid="true"]{border-color:var(--red-soft)}
.field-err{padding-left:4px;font-size:.8rem;color:var(--red-soft)}
.field-err:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);font-size:.84rem;transition:background-color .3s,color .3s,border-color .3s,transform .4s var(--spring)}
.chip:hover span{border-color:var(--gold)}
.chip input:checked + span{background:var(--ivory);border-color:var(--ivory);color:var(--ink);transform:scale(1.04)}
.chip.gold input:checked + span{background:linear-gradient(110deg,#b8975f,var(--gold-light));border-color:var(--gold)}
.chip input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}
.consents{display:grid;gap:10px}
.consent{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:.84rem;color:var(--muted);cursor:pointer}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--gold)}
.consent-note{font-size:.8rem;color:var(--muted)}
.consent-note a{color:var(--gold-light);text-underline-offset:3px}
.req{color:var(--red-soft)}
.form .btn{justify-self:start}
.form-status{font-size:.9rem;color:var(--gold-light)}
.form-status:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media (max-width:959px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:559px){.row2{grid-template-columns:1fr}.form .btn{justify-self:stretch}.channels div{flex-wrap:wrap;border-radius:22px}}

/* Chân trang */
.site-footer{margin:var(--sheet-gap) var(--sheet-gap) 0;border-radius:var(--sheet-r) var(--sheet-r) 0 0;background:#0d0c0b;border:1px solid rgba(255,255,255,.06);border-bottom:0}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:44px 28px}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:46px;height:auto}
.footer-word{font:400 1.1rem/1.3 var(--serif);letter-spacing:.36em;text-transform:uppercase}
.footer-brand .sign{font:italic 400 .95rem/1.3 var(--serif);color:var(--muted)}
.footer-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.footer-links a{display:inline-block;padding:8px 14px;border-radius:999px;font-size:.86rem;text-decoration:none;color:var(--muted);transition:color .3s,background-color .3s}
.footer-links a:hover{color:var(--ivory);background:rgba(255,255,255,.06)}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-bottom:18px}
.footer-company{font-size:.82rem;color:var(--muted)}
.footer-social{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.footer-social a{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);font-size:.8rem;text-decoration:none;color:var(--muted)}
.footer-social a:hover{color:var(--ivory);border-color:var(--gold)}
.btn[disabled]{opacity:.6;cursor:progress}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-block:18px 26px;border-top:1px solid rgba(255,255,255,.08);font-size:.78rem;color:var(--muted)}
.site-footer .footer-bottom{padding-bottom:72px}
@media (max-width:899px){.site-footer .footer-bottom{padding-bottom:calc(160px + env(safe-area-inset-bottom,0px))}}


@media (max-width:374px){
  .wordmark{letter-spacing:.18em;font-size:.8rem}
  .dock a{font-size:.54rem}
}
@media (max-width:599px){.answer-foot .btn{width:100%}}
@media (max-width:359px){.btn:not(.btn-sm){padding:0 18px;gap:8px}}
@media (forced-colors:active){
  .seg-btn[aria-selected="true"],.dock a[aria-current],.nav a[aria-current]{outline:2px solid Highlight}
  .chip input:checked + span{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
}
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .site-header,.dock,.draft-note,.skip{display:none!important}
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .story.is-scripted .msg{opacity:1!important}
  .msg .dots{display:none!important}
  .msg .text{visibility:visible!important}
  .constellation .edge{stroke-dashoffset:0!important}
  .step-panel[hidden]{display:grid!important}
  .item-body{grid-template-rows:1fr!important}
  .item-body > div{visibility:visible!important}
  .panel-next{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .track{width:auto}
  .track ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));width:100%;padding:0}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .track ul + ul,.marquee .row + .row{display:none}
}