/* Jentran Tech v6 — theo tinh thần bảo tàng (getty.edu):
   tranh tràn màn hình, chữ không chân đậm vừa với khoảng chữ khít, đen trắng là chính,
   đường kẻ mảnh mở đầu mỗi phần, liên kết màu lam, điểm vàng duy nhất ở dải thông báo. */
:root{
  --black:#000; --ink:#111; --ink-2:#3D3D3D; --muted:#6B6B6B;
  --white:#fff; --paper:#F4F3F2; --rule:#D9D7D4; --rule-dark:#3A3A3A;
  --blue:#1A47B8; --blue-2:#12348A; --yellow:#F5CE3E;
  --ok:#2F6B47; --ok-soft:#E8F1EB; --bad:#A3322A; --bad-soft:#FBEDEA;
  --sans:"Be Vietnam Pro",Helvetica,Arial,sans-serif;
  --serif:"Noto Serif Display",Georgia,serif;
  --w:1240px; --gut:clamp(20px,3vw,36px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.55 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.15}
h1{font-size:clamp(1.9rem,3vw,2.6rem)}
h2{font-size:clamp(1.6rem,2.3vw,2rem)}
h3{font-size:1.5rem}
p{margin:0 0 1em}
a{color:inherit}
b,strong{font-weight:600}
img{max-width:100%}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.muted{color:var(--muted)} .small{font-size:.9rem}
.skip{position:absolute;left:-999px;top:0;background:#000;color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:0}

/* ---------- liên kết + nút ---------- */
.tlink{background:none;border:0;padding:0;font:500 .95rem var(--sans);letter-spacing:-.01em;color:var(--blue);text-decoration:none;cursor:pointer}
.tlink:hover{color:var(--blue-2);text-decoration:underline;text-underline-offset:3px}
.dark .tlink{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--black);color:#fff;border:1px solid var(--black);border-radius:0;
  padding:14px 24px;font:500 1rem/1.2 var(--sans);letter-spacing:-.01em;cursor:pointer;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:#2B2B2B}
.btn:disabled{opacity:.5;cursor:progress}
.btn-block{width:100%}
.btn-outline,.btn.ghost{background:transparent;color:var(--black)}
.btn-outline:hover,.btn.ghost:hover{background:var(--black);color:#fff}
.btn-light{background:#fff;color:#000;border-color:#fff}
.btn-light:hover{background:transparent;color:#fff}
.btn.sm,.btn-sm{padding:9px 16px;font-size:.9rem}
.link,.link-quiet{background:none;border:0;padding:0;font:500 .95rem var(--sans);cursor:pointer;color:inherit;text-decoration:none}
.link:hover,.link-quiet:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- dải thông báo ---------- */
.alert{background:#000;color:var(--yellow);padding:12px var(--gut)}
.alert p{max-width:var(--w);margin:0 auto;font-size:.94rem;line-height:1.4}
.alert b{font-weight:600}
.alert a{color:var(--yellow);text-underline-offset:3px}

/* ---------- ĐẦU TRANG: tranh tràn màn hình ---------- */
.hero{position:relative;height:clamp(520px,88vh,880px);overflow:hidden;background:#EFE4CF;color:#fff;isolation:isolate}
.art-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 42% 46% at 50% 52%,rgba(0,0,0,.26),rgba(0,0,0,0) 70%),linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,0) 22%)}
.nav{position:absolute;z-index:3;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:36px;padding:22px var(--gut)}
.nav-links{display:flex;gap:30px}
.nav-links a,.nav-user a,.nav-user button:not(.btn){color:#fff;text-decoration:none;font:500 1.06rem var(--sans);letter-spacing:-.02em;background:none;border:0;padding:0;cursor:pointer;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.nav-links a:hover,.nav-user a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.nav-user{display:flex;align-items:center;gap:22px}
.nav-user .btn{background:#fff;color:#000;border-color:#fff;padding:9px 16px;font-size:.95rem}
.nav-user .btn:hover{background:transparent;color:#fff}
.pill{display:inline-flex;align-items:baseline;gap:6px}
.pill b{font-weight:600}
.pill-dot{display:none}
.acct{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;font:600 .9rem var(--sans)}
.hero-brand{position:absolute;z-index:2;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}
.hero-brand .mark{width:clamp(120px,14vw,196px);fill:#fff;filter:drop-shadow(0 2px 18px rgba(0,0,0,.18))}
.wordmark{font:400 clamp(3.6rem,7.4vw,6.4rem)/1 var(--serif);letter-spacing:-.02em;margin:.12em 0 0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.2)}

.menu-btn{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .nav{justify-content:flex-end}
  .menu-btn{display:grid;place-items:center;position:fixed;z-index:40;right:18px;bottom:18px;width:64px;height:64px;border-radius:50%;border:0;background:var(--blue);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.25)}
  .menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:26px;height:2px;background:#fff;position:relative;transition:transform .25s var(--ease),background .25s}
  .menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
  .menu-btn span::before{top:-8px} .menu-btn span::after{top:8px}
  .menu-open .menu-btn span{background:transparent}
  .menu-open .menu-btn span::before{transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-btn span::after{transform:translateY(-8px) rotate(-45deg)}
  .menu-open .nav{position:fixed;inset:0;z-index:35;background:#000;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:90px 28px 28px;gap:40px}
  .menu-open .nav-links{display:flex;flex-direction:column;gap:22px}
  .menu-open .nav-links a{font-size:2rem;font-weight:600;letter-spacing:-.03em;text-shadow:none}
  .menu-open{overflow:hidden}
}

/* ---------- khung module ---------- */
.mod{padding:84px var(--gut) 0}
.mod:last-of-type{padding-bottom:110px}
.mod-in{max-width:var(--w);margin:0 auto}
.mod-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid currentColor;padding-top:20px;margin-bottom:34px}
.mod-head h1,.mod-head h2{max-width:24ch}
.lede{font-size:1.32rem;line-height:1.45;letter-spacing:-.02em;max-width:44ch;color:var(--ink);margin-bottom:44px}
.aside-note{margin:32px 0 0;font-size:.95rem;color:var(--muted)}
.big{font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.3;letter-spacing:-.025em;font-weight:400}

/* khối đen */
.dark{background:#000;color:#fff;padding-bottom:84px}
.dark .mod-head{border-color:#fff}
.feature{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule-dark);padding-top:28px}
.feature-text{border-left:1px solid var(--rule-dark);padding-left:clamp(20px,3vw,36px);display:flex;flex-direction:column}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-right:clamp(20px,3vw,36px)}
.small-note{color:#A9A9A9;font-size:.95rem;max-width:46ch;margin-top:8px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:auto;padding-top:32px}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature-text{border-left:0;padding-left:0;border-top:1px solid var(--rule-dark);padding-top:28px;margin-top:28px}
  .pair{padding-right:0}
}

/* hai banner ví dụ */
.specimen{margin:0}
.art{position:relative}
.art-svg{display:block;width:100%;height:auto}
.b-sale{font:800 66px var(--sans);fill:#BE4E37;letter-spacing:-2px}
.b-name{font:700 19px var(--sans);fill:#7A5531}
.b-small{font:500 12px var(--sans);fill:#8E6A45}
.b-cta{font:700 12px var(--sans);fill:#6E4B27;text-anchor:middle}
.a-name{font:400 27px var(--serif);fill:#19202E}
.a-small{font:600 9.5px var(--sans);fill:#7C808C;letter-spacing:2.4px}
.a-cta{font:600 9.5px var(--sans);fill:#19202E;letter-spacing:2.6px}
.specimen figcaption{margin-top:14px;font-size:.95rem;color:#BDBDBD;display:flex;align-items:baseline;gap:10px}
.specimen figcaption b{font-size:1.9rem;line-height:1;color:#fff;letter-spacing:-.03em}
.gaze{position:absolute;display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:13px;background:#000;color:#fff;
  font:600 .74rem var(--sans);box-shadow:0 0 0 3px var(--yellow);opacity:0;animation:fade .5s var(--ease) var(--d) forwards}
.example .gaze{animation-play-state:paused}
.example.seen .gaze{animation-play-state:running}
.g1{left:30%;top:13%} .g2{left:70%;top:41%}
.gaze.miss{background:var(--yellow);color:#000;left:6%;bottom:6%;box-shadow:0 0 0 3px #000}
@keyframes fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.gaze{animation:none;opacity:1}}

/* ---------- thẻ ba tiêu chuẩn ---------- */
.cards,.packs{--cg:clamp(32px,4vw,56px);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--cg);border-top:1px solid var(--rule)}
.card,.pack{position:relative}
.card+.card::before,.pack+.pack::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--cg) / -2);border-left:1px solid var(--rule)}
.card{padding:28px 0 8px}
.card-img{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:22px;background:var(--paper)}
.card h3{margin-bottom:10px}
.card p{font-size:.98rem;color:var(--ink-2);max-width:40ch}
.card .meta{color:var(--blue);font-weight:500;margin:22px 0 0}
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
  .card{padding:28px 0 20px}
  .card+.card::before,.pack+.pack::before{display:none}
  .card+.card{border-top:1px solid var(--rule)}
}

/* ---------- cách hoạt động ---------- */
.inline{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);padding-top:28px}
.inline-img{position:relative;aspect-ratio:4/3;overflow:hidden;margin-right:clamp(20px,3vw,36px)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0 0 0 clamp(20px,3vw,36px);border-left:1px solid var(--rule)}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;column-gap:8px;padding:22px 0;border-bottom:1px solid var(--rule)}
.steps li:first-child{padding-top:0}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);grid-row:span 2;font:600 1.5rem/1.15 var(--sans);letter-spacing:-.03em;color:var(--blue)}
.steps b{font-size:1.5rem;letter-spacing:-.025em;line-height:1.15;margin-bottom:8px}
.steps span{color:var(--ink-2)}
@media (max-width:860px){
  .inline{grid-template-columns:1fr}
  .inline-img{margin:0 0 28px}
  .steps{border-left:0;padding-left:0}
}

/* ---------- CÔNG CỤ ---------- */
.auth-wrap{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);padding-top:28px}
.auth-intro{padding-right:clamp(20px,3vw,36px)}
.auth-form-wrap{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,36px)}
@media (max-width:860px){.auth-wrap{grid-template-columns:1fr}.auth-form-wrap{border-left:0;padding-left:0;margin-top:32px}.auth-intro{padding-right:0}}
.checklist{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--rule)}
.checklist li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0;font:500 1.05rem var(--sans);letter-spacing:-.02em;color:var(--muted);cursor:pointer}
.tab.on{color:#000;border-color:#000}
.auth{display:grid;gap:20px}
label{display:grid;gap:8px;font:500 .92rem var(--sans);color:var(--ink)}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:400 1rem var(--sans);color:var(--ink);background:#fff;border:1px solid #BDBBB8;border-radius:0;padding:12px 14px;width:100%}
select{appearance:none;cursor:pointer;padding-right:36px;background:#fff linear-gradient(45deg,transparent 50%,#000 50%) right 18px center/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,#000 50%) right 13px center/6px 6px no-repeat}
select{background-color:#fff}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#000;outline:1px solid #000;outline-offset:0}
.err{color:var(--bad);min-height:1.2em;margin:0;font-size:.92rem}
[data-only][hidden]{display:none}

.balance{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;border-top:1px solid var(--rule);padding:18px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.stat b{font-size:1.5rem;letter-spacing:-.03em;color:#000;margin-right:6px}
.analyze{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);margin-top:36px;align-items:start}
@media (max-width:880px){.analyze{grid-template-columns:1fr}}
.drop{position:relative;display:grid;place-items:center;min-height:460px;background:var(--paper);border:1px dashed #A9A6A1;cursor:pointer;text-align:center;padding:20px;overflow:hidden;transition:border-color .25s,background .25s;font-weight:400}
.drop:hover,.drop.over{border-color:#000;background:#EFEDEA}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop img{max-width:100%;max-height:560px}
.drop-text{display:grid;justify-items:center;gap:4px}
.drop-text[hidden]{display:none}
.drop-text b{font-size:1.6rem;letter-spacing:-.03em}
.drop-text span{color:var(--ink-2)}
.drop-text small{margin-top:14px;font-size:.85rem;color:var(--muted)}
.opts{display:grid;gap:24px}
fieldset{border:0;padding:0;margin:0}
legend{font:500 .92rem var(--sans);margin-bottom:8px;padding:0}
.seg{display:flex;border:1px solid #BDBBB8}
.seg label{flex:1;display:block;font-weight:400}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:block;text-align:center;padding:11px 8px;cursor:pointer;color:var(--ink-2);font-size:.95rem;transition:background .2s,color .2s}
.seg label+label span{border-left:1px solid #BDBBB8}
.seg input:checked+span{background:#000;color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:-2px}
.tip{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- kết quả ---------- */
#result{margin-top:64px;border-top:1px solid #000;padding-top:36px}
.score-head{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:640px){.score-head{grid-template-columns:1fr;justify-items:center}}
.score-wrap{position:relative;display:grid;justify-items:center;gap:12px;width:100%}
.score-num{position:absolute;top:0;left:0;right:0;aspect-ratio:1;display:grid;place-content:center;text-align:center;font:600 3.4rem/1 var(--sans);letter-spacing:-.05em}
.score-num small{display:block;font:500 .85rem var(--sans);letter-spacing:0;color:var(--muted);margin-top:6px}
.delta{font:500 .9rem var(--sans);padding:4px 10px}
.delta.up{color:var(--ok);background:var(--ok-soft)} .delta.down{color:var(--bad);background:var(--bad-soft)}
.score-head p{font-size:1.05rem;color:var(--ink-2)}
.score-head p b{display:block;font-size:1.9rem;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px;color:#000}
.bars{display:grid;gap:14px;margin-top:24px}
.bar{display:grid;grid-template-columns:56px 1fr 56px;gap:16px;align-items:center;font-weight:500}
.bar i{display:block;height:8px;background:#ECEAE7;position:relative}
.bar i b{position:absolute;left:0;top:0;bottom:0;background:#000}
.bar em{font-style:normal;color:var(--ink-2);text-align:right;font-size:.95rem}

.dial{display:block;width:100%;height:auto}
.dial .trk{fill:none;stroke:#ECEAE7;stroke-width:12}
.dial .arc{fill:none;stroke:#000;stroke-width:12;stroke-dashoffset:var(--o0);animation:arc 1.6s var(--ease) var(--delay) forwards}
@keyframes arc{to{stroke-dashoffset:var(--o1)}}
@media (prefers-reduced-motion:reduce){.dial .arc{animation:none;stroke-dashoffset:var(--o1)}}

.r-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:56px;border-top:1px solid var(--rule)}
@media (max-width:880px){.r-grid{grid-template-columns:1fr}}
.r-block{padding:28px clamp(0px,3vw,36px) 32px 0;border-bottom:1px solid var(--rule)}
.r-block:nth-child(even){padding-left:clamp(0px,3vw,36px);border-left:1px solid var(--rule)}
@media (max-width:880px){.r-block:nth-child(even){border-left:0;padding-left:0}}
.r-block h4{font:600 1.05rem var(--sans);letter-spacing:-.02em;margin:0 0 16px}
.gate{padding:16px 18px;background:var(--bad-soft);color:#5E1F19}
.gate.pass{background:var(--ok-soft);color:#1F4630}
.gate ul{margin:6px 0 0;padding-left:18px}
.flash{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.flash li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.flash .gz{position:static;opacity:1;animation:none}
.problems{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.problems b{display:block;font-size:1.2rem;letter-spacing:-.02em;line-height:1.25;margin-bottom:4px}
.problems span{display:block;color:var(--ink-2);font-size:.96rem}
.problems .fix{color:#000;margin-top:6px}
.crit{width:100%;border-collapse:collapse;font-size:.95rem}
.crit td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.crit td:first-child{width:34%;font-weight:500}
.crit td:nth-child(2){color:var(--ink-2)}
.crit td:last-child{text-align:right;white-space:nowrap;padding-left:8px;font-weight:600}
#result>details{border-bottom:1px solid var(--rule);padding:18px 0}
summary{cursor:pointer;font:500 1rem var(--sans);letter-spacing:-.01em}
.prompt-box{width:100%;min-height:150px;font:400 .85rem/1.55 ui-monospace,Menlo,monospace;margin-top:14px}
.gen-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:32px}
.working{display:flex;gap:14px;align-items:center;color:var(--ink-2);margin:0}
.working::before{content:"";flex:none;width:18px;height:18px;border:2px solid #E2E0DC;border-top-color:#000;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* trước / sau */
.compare{position:relative;margin:48px auto 0;width:fit-content;max-width:100%;user-select:none;--x:50%}
.compare>img{display:block;max-width:100%;max-height:72vh;width:auto}
.compare .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.compare .after img{display:block;width:100%;height:100%;object-fit:cover}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;padding:0;border:0}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.compare .handle::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);background:var(--blue);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.compare .tag{position:absolute;top:14px;background:#000;color:#fff;font:500 .82rem var(--sans);padding:4px 10px}
.compare .tag.l{left:14px} .compare .tag.r{right:14px}
.compare + .gen-row{justify-content:center}

.history{margin-top:72px;border-top:1px solid #000;padding-top:20px}
.history h3{margin-bottom:28px}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:24px}
.hist{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.hist img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--paper);transition:opacity .25s}
.hist:hover img{opacity:.85}
.hist span{display:block;font-size:.88rem;color:var(--ink-2);margin-top:10px}

/* ---------- BẢNG GIÁ ---------- */
.packs{border-bottom:1px solid var(--rule)}
.pack{display:flex;flex-direction:column;align-items:flex-start;padding:28px 0 32px}
.pack:not(.hot) .ribbon{visibility:hidden}
.ribbon{display:inline-block;background:var(--yellow);color:#000;font:600 .82rem var(--sans);padding:4px 10px;margin:0 0 14px}
.pack h3{margin-bottom:6px}
.price{font:600 2.6rem/1.1 var(--sans);letter-spacing:-.04em;margin:6px 0 8px}
.per{color:var(--muted);font-size:.95rem;margin-bottom:28px;flex:1}
@media (max-width:860px){
  .packs{grid-template-columns:1fr}
  .pack+.pack{border-top:1px solid var(--rule)}
  .pack:not(.hot) .ribbon{display:none}
}

/* ---------- HỎI ĐÁP ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 2fr;border-top:1px solid var(--rule);padding-top:28px}
.faq-aside{padding-right:clamp(20px,3vw,36px);color:var(--ink-2);max-width:30ch}
.faq{border-left:1px solid var(--rule);padding-left:clamp(20px,3vw,36px)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-child summary{padding-top:0}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font:500 1.2rem/1.35 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:0 0 22px;max-width:62ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq{border-left:0;padding-left:0;margin-top:12px}}

/* ---------- CHÂN TRANG ---------- */
.foot{background:var(--paper);padding:84px var(--gut) 40px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;border-top:1px solid #000;padding-top:28px}
.foot-brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:#000}
.foot-brand .mark{width:52px;fill:#000}
.foot-brand .wordmark{font-size:2.4rem;color:#000;text-shadow:none;margin:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:12px 30px}
.foot-nav a{font:500 1.06rem var(--sans);letter-spacing:-.02em;text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:64px;padding-top:20px;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ink-2)}
.foot-bottom p{margin:0}
.foot-bottom a{color:var(--ink-2)}

/* ---------- hộp thoại nạp lượt ---------- */
dialog{border:0;border-radius:0;padding:48px 40px 40px;max-width:480px;width:calc(100% - 32px);background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{font-size:1.9rem;margin-bottom:6px}
.close-x{position:absolute;top:10px;right:16px}
.close-x button{background:none;border:0;font:300 2.2rem var(--sans);cursor:pointer;color:#000;line-height:1}
.pack-list{display:grid;border-top:1px solid #000;margin-top:22px}
.pack-pick{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-bottom:1px solid var(--rule);padding:18px 4px;font:inherit;color:inherit;cursor:pointer;text-align:left;transition:background .2s}
.pack-pick span{display:grid}
.pack-pick b{font-size:1.15rem;letter-spacing:-.02em}
.pack-pick small{color:var(--muted);font-size:.88rem}
.pack-pick strong{font-size:1.15rem;letter-spacing:-.02em}
.pack-pick:hover,.pack-pick.hot{background:var(--paper)}
.qr{display:block;width:100%;max-width:260px;margin:20px auto}
.pay-info{width:100%;border-collapse:collapse;font-size:.95rem}
.pay-info td{padding:11px 0;border-bottom:1px solid var(--rule)}
.pay-info td:last-child{text-align:right;font-weight:500}
.copy{margin-left:8px;color:var(--blue)}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:#000;color:#fff;padding:14px 24px;z-index:50;font:500 .95rem var(--sans)}

/* ---------- quản trị ---------- */
.admin{background:#fff}
.admin .wrap{max-width:1100px;margin:0 auto;padding:48px 20px}
.admin h1{font-size:2.4rem;margin-bottom:.4em}
.admin table{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:40px}
.admin th,.admin td{text-align:left;padding:10px 6px;border-bottom:1px solid var(--rule)}
.admin th{font-weight:600}
.admin .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid #000;margin:24px 0 48px}
.admin .stats>div{padding:20px 20px 20px 0}
.admin .stats b{display:block;font-size:2rem;letter-spacing:-.04em}
.admin .stats span{color:var(--muted);font-size:.9rem}
.admin form.inline{display:flex;gap:10px;align-items:center}
.admin input{padding:6px 8px;font-size:.88rem}
.notice{background:var(--ok-soft);padding:12px 16px}