/* Reset + component dùng chung cho mọi trang. Mobile-first, chỉ dùng token từ tokens.css. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);line-height:1.6;overflow-x:hidden;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-0.02em;}
a{color:var(--violet-deep);}
[hidden]{display:none !important;}
/* Chữ Nhật cao và đặc hơn chữ Latin: giãn dòng, bỏ letter-spacing âm, ngắt dòng theo cụm từ (trình duyệt chưa hỗ trợ auto-phrase thì ngắt như thường). */
:lang(ja) body{line-height:1.8;line-break:strict;}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{line-height:1.35;letter-spacing:0;word-break:auto-phrase;}

/* Layout */
.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--sp-5);position:relative;}
.wrap-md{max-width:var(--w-md);}
/* Trang bài viết: FAQ/đọc thêm/CTA dùng cột đọc bằng .prose để thẳng hàng với chữ; đứng trước .section-head để tiêu đề hẹp hơn vẫn thắng. */
.wrap-read > *{max-width:var(--w-read);}
@media (min-width:900px){ .wrap{padding:0 var(--sp-8);} }

.section-head{max-width:var(--w-text);margin-bottom:var(--sp-12);}
.section-head h2{font-size:var(--fs-h2);}
.section-head p{color:var(--ink-soft);margin-top:var(--sp-4);font-size:var(--fs-base);}

/* Utility */
.text-center{text-align:center;}

/* Chữ */
.accent{color:var(--violet);}
.accent-coral{color:var(--coral);}
.kicker{font-size:var(--fs-xs);font-weight:700;color:var(--violet-deep);text-transform:uppercase;letter-spacing:.04em;}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--surface);border:var(--border);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-xs);font-weight:600;margin-bottom:var(--sp-6);}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--coral);}
.badge{display:inline-flex;align-items:center;background:var(--violet);color:var(--on-dark);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-sm);font-weight:800;line-height:1.5;margin-bottom:var(--sp-2);}

/* Nav — dùng chung mọi trang */
.nav{padding:var(--sp-6) 0;}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);}
.brand{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:inherit;text-decoration:none;}
.nav-tag{background:var(--coral);color:var(--on-dark);font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-4);border-radius:var(--r-pill);font-weight:600;text-decoration:none;white-space:nowrap;}
.nav-tag:hover{background:var(--coral-light);}

/* Footer — dùng chung mọi trang */
.footer{padding:var(--sp-8) 0;color:var(--ink-soft);font-size:var(--fs-sm);border-top:var(--border);}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);font-weight:500;}

/* Nút — không nowrap: chữ dài tự xuống dòng thay vì tràn khung trên điện thoại hẹp (320–360px) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:var(--bw) solid transparent;border-radius:var(--r-pill);padding:var(--sp-3) var(--sp-6);font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);line-height:1.5;cursor:pointer;max-width:100%;text-align:center;text-wrap:balance;overflow-wrap:anywhere;text-decoration:none;}
.btn:disabled{opacity:0.6;cursor:default;}
.btn-primary{background:var(--ink);color:var(--on-dark);border-color:var(--ink);}
.btn-primary:hover{background:var(--violet);border-color:var(--violet);}
.btn-secondary{background:var(--surface);color:var(--ink-soft);border-color:var(--line);font-family:var(--font-body);font-weight:600;}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink);}
.btn-coral{background:var(--coral);color:var(--on-dark);border-color:var(--coral);}
.btn-coral:hover{background:var(--coral-light);border-color:var(--coral-light);}
.btn-violet{background:var(--violet);color:var(--on-dark);border-color:var(--violet);}
.btn-violet:hover{background:var(--violet-deep);border-color:var(--violet-deep);}
.btn-sm{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm);}

/* Ô nhập */
.input{width:100%;border:var(--border);border-radius:var(--r-pill);padding:var(--sp-3) var(--sp-5);font-family:var(--font-body);font-size:var(--fs-md);line-height:1.5;background:var(--surface);color:var(--ink);}
.input:focus{outline:none;border-color:var(--violet);}
.input-block{border-color:var(--line);border-radius:var(--r-sm);margin-bottom:var(--sp-4);}

/* Form danh sách chờ — dùng chung mọi trang */
.waitlist-form{display:flex;gap:var(--sp-3);max-width:var(--w-form);flex-wrap:wrap;}
.waitlist-form .input{flex:1 1 220px;}
.success-msg{display:none;max-width:var(--w-form);}
.form-note{font-size:var(--fs-sm);color:var(--ink-soft);margin-top:var(--sp-4);}
.form-note-link{margin-top:var(--sp-2);}
.cta-box .form-note-link a{color:var(--violet-soft);}

/* Card — đổi màu chữ qua --card-text để biến thể tối không phải ghi đè từng selector */
.card{--card-text:var(--ink);--card-text-soft:var(--ink-soft);background:var(--surface);color:var(--card-text);border:var(--border);border-radius:var(--r-lg);padding:var(--sp-6);}
.card-shadow{box-shadow:var(--shadow-hard);}
.card-dark{--card-text:var(--on-dark);--card-text-soft:var(--on-dark-soft);background:var(--ink);}

/* CTA nền tối — dùng chung mọi trang (kết hợp với .card.card-dark). Trang
   chủ mở rộng thêm hiệu ứng glow riêng ở landing.css, đè lên đúng class này. */
.cta-box{border-radius:var(--r-xl);padding:var(--sp-12) var(--sp-6);text-align:center;}
.cta-box h2{font-size:var(--fs-h2);max-width:14em;margin:0 auto var(--sp-4);}
.cta-box p{color:var(--card-text-soft);max-width:29.74em;margin:0 auto var(--sp-6);}
.cta-box .accent{color:var(--violet-soft);}
.cta-box .waitlist-form{justify-content:center;margin:0 auto;}
.cta-box .input{border-color:var(--surface);}
.cta-box .form-note{color:var(--on-dark-muted);}
.cta-box .success-msg{margin:0 auto;}
@media (min-width:900px){ .cta-box{padding:var(--sp-16) var(--sp-10);} }
/* Biến thể CTA có glow + chữ hẹp — kiểu CTA của trang chủ, dùng lại ở các trang khác. */
.cta-box-glow{position:relative;overflow:hidden;}
.cta-box-glow::after{content:"";position:absolute;bottom:-60%;left:-10%;width:60%;height:300px;background:radial-gradient(circle, var(--violet), transparent 70%);opacity:0.5;}
.cta-box-glow > *{position:relative;}
.cta-box-glow h2{max-width:11.2em;}
.cta-box-glow p{margin-bottom:var(--sp-8);}

/* Chip chọn 1 hoặc nhiều */
.chip{display:inline-flex;align-items:center;border:var(--border-soft);background:var(--surface);border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-4);font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;line-height:1.5;color:var(--ink-soft);cursor:pointer;}
.chip.selected{border-color:var(--violet);background:var(--violet-bg);color:var(--violet-deep);}
.chip-coral.selected{border-color:var(--coral);background:var(--coral-bg);color:var(--ink);}

/* Thông báo */
.field-error{display:none;width:100%;color:var(--status-alert-deep);font-size:var(--fs-sm);font-weight:600;margin-top:var(--sp-2);}
/* Widget Turnstile do scripts/waitlist.js tự chèn (managed: thường vô hình, chỉ hiện khi Cloudflare cần hỏi thêm). */
.turnstile-box{width:100%;}
.notice{background:var(--surface);border:var(--border);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);}
.notice-success{border-color:var(--status-ok);color:var(--status-ok-deep);font-weight:600;}
.notice-info{background:var(--violet-bg);}
.notice-warn{background:var(--status-alert-bg);}

/* Bảng dữ liệu — dùng chung cho mọi trang hiển thị bảng giá/thông số */
.table-wrap{overflow-x:auto;border:var(--border);border-radius:var(--r-md);}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.table th,.table td{padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:var(--border-soft);white-space:nowrap;}
.table th{font-family:var(--font-display);font-weight:700;background:var(--violet-bg);color:var(--violet-deep);}
.table tr:last-child td{border-bottom:none;}
.table-flow td:first-child,.table-flow th:first-child{white-space:normal;}
/* table-grid: kẻ đủ ngang + dọc mọi ô (kể cả ô gộp rowspan) cho bảng so sánh nhiều cột; ô cuối hàng/cột để viền khung .table-wrap lo. */
.table-grid th,.table-grid td{border:var(--border-soft);}
.table-grid tr>:first-child{border-left:none;}
.table-grid tr>:last-child{border-right:none;}
.table-grid thead tr:first-child>*{border-top:none;}
.table-grid tr:last-child td{border-bottom:none;}
/* table-fit: mọi ô tự xuống dòng khi hẹp; từ 640px cột đầu giữ 1 dòng, các cột sau co giãn. */
.table-fit th,.table-fit td{white-space:normal;}
@media (min-width:640px){.table-fit td:first-child,.table-fit th:first-child{white-space:nowrap;}}
/* table-compact: bảng 4 cột trở lên, bớt padding ô để vừa khung 331px trên điện thoại, không cuộn ngang. */
.table-compact th,.table-compact td{padding:var(--sp-2) var(--sp-3);}

/* FAQ — dùng chung mọi trang có mục câu hỏi thường gặp */
.faq{padding:0 0 var(--sp-16);}
.faq-list{display:flex;flex-direction:column;gap:var(--sp-3);}
.faq-item{padding:var(--sp-5) var(--sp-6);}
.faq-item summary,.fold>summary{font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);}
.faq-item summary::-webkit-details-marker,.fold>summary::-webkit-details-marker{display:none;}
.faq-item summary::after,.fold>summary::after{content:"+";font-size:var(--fs-xl);color:var(--violet);flex-shrink:0;}
.faq-item[open] summary::after,.fold[open]>summary::after{content:"–";}
.faq-item p{margin:var(--sp-3) 0 0;color:var(--ink-soft);font-size:var(--fs-md);}

/* Khối code — dùng chung khi hiển thị ví dụ lệnh/JSON */
.code-block{background:var(--ink);color:var(--on-dark);border-radius:var(--r-md);padding:var(--sp-4) var(--sp-5);overflow-x:auto;font-size:var(--fs-sm);line-height:1.6;margin:0;}
.code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

/* Hero trang con (không phải trang chủ) — dùng chung mọi trang nội dung
   (kiến thức, tin tức...) kết hợp với .eyebrow đã có. */
.page-hero{padding:var(--sp-10) 0;}
.page-hero h1{font-size:var(--fs-h2);max-width:var(--w-read);}
.page-hero .lede{max-width:var(--w-text);color:var(--ink-soft);font-size:var(--fs-lg);margin:var(--sp-5) 0 0;}
@media (min-width:900px){ .page-hero{padding:var(--sp-16) 0 var(--sp-10);} }

.back-link{display:inline-block;margin:var(--sp-6) 0 0;font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);text-decoration:none;}
.back-link:hover{color:var(--violet);}

/* Bài viết dạng dài (prose) — dùng chung cho mọi trang kiến thức/tin tức */
.article-body{padding:0 0 var(--sp-16);}
.prose{max-width:var(--w-read);}
.prose h2{font-size:var(--fs-xl);margin:var(--sp-10) 0 var(--sp-4);}
.prose h3{font-size:var(--fs-lg);margin:var(--sp-8) 0 var(--sp-3);}
.prose p{margin:0 0 var(--sp-4);color:var(--ink-soft);font-size:var(--fs-md);}
.prose > p:first-child{font-size:var(--fs-lg);color:var(--ink);}
.prose ul,.prose ol{margin:0 0 var(--sp-4);padding-left:var(--sp-6);color:var(--ink-soft);font-size:var(--fs-md);}
.prose li{margin-bottom:var(--sp-2);}
.prose li b{color:var(--ink);}
.prose a{font-weight:600;}
.prose .table-wrap{margin:var(--sp-6) 0;}
/* Nguồn của bảng: đặt ngay dưới .table-wrap (không để trong tfoot — dòng dài làm bảng cuộn ngang); margin âm gộp với margin bảng để nằm sát. */
.prose .table-source{margin:calc(var(--sp-2) - var(--sp-6)) 0 var(--sp-6);font-size:var(--fs-xs);color:var(--ink-soft);}
.prose .notice{margin:var(--sp-6) 0;}
/* Ảnh minh hoạ trong bài (SVG chỉ vị trí tem): khung viền + chú thích, dùng chung mọi trang thiết bị. */
.fig{margin:var(--sp-6) 0;border:var(--border-soft);border-radius:var(--r-md);background:var(--surface);overflow:hidden;}
.fig img{display:block;width:100%;height:auto;max-height:var(--fig-h);object-fit:contain;background:var(--fig-bg);}
.fig figcaption{padding:var(--sp-3) var(--sp-4);border-top:var(--border-soft);font-size:var(--fs-sm);color:var(--ink-soft);}
.fig figcaption b{color:var(--ink);}
.fig-grid{display:grid;gap:var(--sp-4);margin:var(--sp-6) 0;}
.fig-grid .fig{margin:0;}
@media (min-width:640px){ .fig-grid{grid-template-columns:1fr 1fr;} }
.prose .cta-box{margin:var(--sp-8) 0;padding:var(--sp-10) var(--sp-6);}
/* CTA nằm trong cột bài viết: đè .prose h2/.prose p (độ ưu tiên cao hơn .cta-box h2/p) để giữ căn giữa + chữ sáng, cỡ chữ theo nhịp bài. */
.prose .cta-box h2{font-size:var(--fs-xl);max-width:none;margin:0 auto var(--sp-3);}
.prose .cta-box p{color:var(--card-text-soft);font-size:var(--fs-md);margin:0 auto var(--sp-6);}

/* Khuôn bài /kien-thuc/ (KHUON-BAI-KIEN-THUC.html ở root repo) — breadcrumb, câu trả lời nhanh, mục lục, trích dẫn, chia sẻ ảnh. Miễn trừ dùng .notice-warn, dòng cuối dùng .form-note. */
.breadcrumb{font-size:var(--fs-sm);color:var(--ink-soft);margin-bottom:var(--sp-4);}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-2);}
.breadcrumb li + li::before{content:"›";margin-right:var(--sp-2);}
.breadcrumb a{color:var(--ink-soft);font-weight:600;text-decoration:none;}
.breadcrumb a:hover{color:var(--violet);}
.breadcrumb [aria-current]{color:var(--ink);}
/* .prose .answer: đè .prose p để giữ chữ lớn, đậm màu (câu chatbot trích nguyên văn). */
.answer,.prose .answer{background:var(--violet-bg);border-left:var(--bw-accent) solid var(--violet);border-radius:var(--r-sm);padding:var(--sp-4) var(--sp-5);margin:var(--sp-6) 0;color:var(--ink);font-size:var(--fs-lg);line-height:1.5;}
.toc{border:var(--border-soft);border-radius:var(--r-md);background:var(--surface);padding:var(--sp-4) var(--sp-5);margin:var(--sp-6) 0;}
.toc-title{font-family:var(--font-display);font-weight:700;margin-bottom:var(--sp-2);}
.prose .toc ol{margin:0;}
/* Thu gọn thân bài: mỗi H2 là 1 <details class="fold"> đóng sẵn để bài vừa 1 màn hình (CHIEN-LUOC mục 3); dấu +/– dùng chung với .faq-item. */
.fold{border-bottom:var(--border-soft);}
.fold:first-of-type{border-top:var(--border-soft);margin-top:var(--sp-6);}
.fold>summary{padding:var(--sp-4) 0;}
.prose .fold>summary h2{margin:0;font-size:var(--fs-lg);}
.fold>summary:hover h2{color:var(--violet-deep);}
.fold[open]{padding-bottom:var(--sp-4);}
.fold>.fig:first-of-type{margin-top:0;}
.cite-box{border:var(--border-soft);border-radius:var(--r-md);background:var(--surface);padding:var(--sp-4) var(--sp-5);margin:var(--sp-6) 0;}
.cite-box-title{font-family:var(--font-display);font-weight:700;}
.cite-box .cite-box-text{margin:var(--sp-2) 0 var(--sp-3);font-size:var(--fs-sm);color:var(--ink-soft);}
.figure-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4);padding:var(--sp-3) var(--sp-4);border-top:var(--border-soft);font-size:var(--fs-sm);}
.figure-share a,.figure-share summary{font-weight:600;color:var(--violet-deep);cursor:pointer;}
.figure-share details{flex-basis:100%;}
.figure-share details:not([open]){flex-basis:auto;}
.figure-share .code-block{margin:var(--sp-2) 0;white-space:pre-wrap;word-break:break-all;}
.figure-share .form-note{margin:0 0 var(--sp-2);}

/* Checklist in được (A4) — /kien-thuc/an-toan-dien/checklist-*: ô vuông trước mỗi dòng, khi in ẩn nav/footer/CTA/nút, nền trắng, gọn 1 trang. */
.checklist{list-style:none;margin:var(--sp-6) 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3);}
.prose .checklist{padding:0;}
.checklist li{position:relative;padding-left:calc(var(--fs-xl) + var(--sp-3));margin:0;color:var(--ink);font-size:var(--fs-base);} /* không flex: link/b trong dòng không bị tách thành cột riêng */
.checklist li::before{content:"☐";position:absolute;left:0;top:0;font-size:var(--fs-xl);line-height:1;color:var(--violet-deep);}
.print-url{font-weight:700;color:var(--ink);}

/* Mẫu biểu in được (A4) — vd mau-hoa-don-*: .form-fields là các dòng "Nhãn: ______" điền tay,
   .table-form là bảng 2 cột Mục/Giá trị với ô trống đủ cao để viết tay khi in. */
.form-fields{display:flex;flex-direction:column;gap:var(--sp-4);margin:var(--sp-6) 0;}
.form-line{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--sp-2) var(--sp-3);}
.form-line b{flex-shrink:0;color:var(--ink);}
.form-line .blank{flex:1;min-width:120px;border-bottom:1px solid var(--ink-soft);min-height:1.6em;}
.table-form td:last-child{min-height:2.2em;}
.table-form :is(th,td):first-child{width:1%;white-space:nowrap;padding-right:var(--sp-6);border-right:var(--border-soft);}
/* Vùng in riêng: trang có .print-area thì khi in chỉ in vùng đó (ẩn mọi khối anh em ở main/.prose); .print-only chỉ hiện khi in. */
.print-only{display:none;}
.print-title{text-align:center;margin:0 0 var(--sp-4);}
@media print{
  .nav,.footer,.cta,.breadcrumb,.no-print{display:none !important;}
  body{background:var(--surface);}
  .page-hero{padding:0 0 var(--sp-4);}
  .page-hero .lede{display:none;}
  .article-body{padding:0;}
  .checklist{gap:var(--sp-2);margin:var(--sp-3) 0;}
  .checklist li{font-size:var(--fs-md);break-inside:avoid;}
  .form-fields{gap:var(--sp-2);margin:var(--sp-3) 0;}
  .table-form tr{break-inside:avoid;}
  .prose a{color:inherit;text-decoration:none;}
  .fig{margin:var(--sp-6) 0 0;}
  .fold>summary::after{content:none;}
  body:has(.print-area) :is(main > *, .prose > *):not(:has(.print-area)):not(.print-area){display:none !important;}
  body:has(.print-area) :is(.page-hero, .article-body){padding:0;}
  .print-only{display:block;}
  .print-url{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--ink-soft);position:fixed;right:0;bottom:0;margin:0;}
  @page{size:A4;margin:12mm;}
}

/* Card làm link (vd danh sách bài viết) — reset underline/màu link mặc định */
.card-link{display:block;text-decoration:none;color:inherit;}

/* Card bấm được cả khung nhưng vẫn giữ 1 link chữ (a11y) — link .stretched phủ kín card */
.card-stretch{position:relative;cursor:pointer;}
.card-stretch .stretched::after{content:"";position:absolute;inset:0;border-radius:inherit;}
.card-stretch:focus-within{outline:2px solid var(--violet);outline-offset:2px;}

/* Lưới thẻ — dùng chung mọi nơi cần liệt kê nhiều card */
.grid-2{display:grid;grid-template-columns:1fr;gap:var(--sp-4);}
.grid-3{display:grid;grid-template-columns:1fr;gap:var(--sp-5);}
@media (min-width:900px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(3,1fr);}
}

/* Bài viết liên quan — dùng chung mọi trang kiến thức/tin tức */
.related{padding:0 0 var(--sp-20);}
.related h2{font-size:var(--fs-xl);margin-bottom:var(--sp-5);}

/* Widget/script nhúng — khoảng cách chung khi chèn vào giữa nội dung */
.embed-block{margin:var(--sp-6) 0;}

/* CTA cuối trang — dùng chung mọi trang (kết hợp với .cta-box.card.card-dark),
   giống hệt trang chủ */
.cta{padding:var(--sp-5) 0 var(--sp-20);}

/* Luồng kiểm tra 3 bước (scripts/tiet-kiem.js) — dùng chung trang chủ + bài viết: khung bước .qc-* và bảng thiết bị .calc-* */
.calc{margin:var(--sp-8) 0;}
.qc-progress{margin:0 0 var(--sp-6);}
.qc-progress-track{display:flex;gap:var(--sp-2);}
.qc-progress-seg{flex:1;height:6px;border-radius:var(--r-pill);background:var(--line);border:var(--border);cursor:default;}
.qc-progress-seg.done{background:var(--violet);cursor:pointer;}
.qc-progress-label{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-soft);font-weight:600;}

.qc-card .kicker{margin-bottom:var(--sp-2);}
/* .qc-card .qc-title/.qc-sub: đè .prose h3/p khi luồng nằm trong bài viết */
.qc-card .qc-title{font-size:var(--fs-xl);margin:0 0 var(--sp-2);}
.qc-card .qc-sub{color:var(--ink-soft);font-size:var(--fs-md);margin:0 0 var(--sp-5);}

.qc-panel-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
.qc-panel-card{border:var(--border-soft);background:var(--surface);border-radius:var(--r-md);padding:var(--sp-4);cursor:pointer;text-align:left;display:flex;gap:var(--sp-3);align-items:flex-start;color:var(--ink-soft);}
.qc-panel-card svg{flex-shrink:0;color:var(--ink-soft);}
.qc-panel-card svg text{font-family:var(--font-display);}
.qc-panel-title{font-weight:700;font-size:var(--fs-md);color:var(--ink);margin-bottom:2px;}
.qc-panel-sub{font-size:var(--fs-xs);color:var(--ink-soft);}
.qc-panel-card.selected{border-color:var(--violet);background:var(--violet-bg);}
.qc-panel-card.selected svg{color:var(--violet-deep);}

.qc-field-label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink-soft);margin:var(--sp-5) 0 var(--sp-2);}
.qc-field-label:first-child, .qc-sub + .qc-field-label{margin-top:0;}
.qc-chip-grid{display:flex;flex-wrap:wrap;gap:var(--sp-3);}

.qc-disclaimer{margin:var(--sp-6) 0;font-size:var(--fs-sm);color:var(--ink-soft);}
.qc-disclaimer b{color:var(--ink);}

.qc-btn-row{margin:var(--sp-5) 0 0;display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.qc-card .qc-btn-row{margin-top:var(--sp-5);}

.qc-step{display:none;}
.qc-step.active{display:block;animation:qcFadeIn 0.35s ease;}
@keyframes qcFadeIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.qc-success h3{margin-bottom:var(--sp-2);color:var(--status-ok-deep);}
.qc-success p{color:var(--ink-soft);}
/* Popup 2 câu hỏi sau ghi danh (QldVanDe trong scripts/waitlist.js): <dialog> modal gắn vào body */
.van-de-dialog{width:var(--w-form);max-width:calc(100% - 2 * var(--sp-4));max-height:calc(100dvh - 2 * var(--sp-4));overflow:auto;overscroll-behavior:contain;text-align:left;}
.van-de-dialog::backdrop{background:var(--overlay);}
html:has(.van-de-dialog[open]){overflow:hidden;}
.van-de-dialog .kicker{margin-bottom:var(--sp-2);padding-right:var(--sp-10);}
.van-de-dialog .qc-title{font-size:var(--fs-xl);margin:0 0 var(--sp-5);}
.van-de-dialog .input-block{margin-bottom:0;}
.van-de-close{position:absolute;top:var(--sp-3);right:var(--sp-3);width:40px;height:40px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-soft);font-size:var(--fs-xl);line-height:1;cursor:pointer;}
.van-de-close:hover{background:var(--line);color:var(--ink);}
.van-de-reopen, .van-de-thanks{margin-top:var(--sp-4);}
.qc-chip-grid + .input{margin-top:var(--sp-3);}
.qc-field-error{margin-top:var(--sp-2);}
@media (min-width:640px){
  .qc-card{padding:var(--sp-8);}
  .van-de-dialog{padding:var(--sp-8);}
  .qc-panel-grid{grid-template-columns:repeat(2,1fr);}
}
.calc-rows{display:flex;flex-direction:column;gap:var(--sp-3);}
.calc-row{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);border:var(--border-soft);border-radius:var(--r-md);}
.calc-check{width:20px;height:20px;margin:0;accent-color:var(--violet);}
.calc-row-name{font-weight:700;color:var(--ink);font-size:var(--fs-md);}
.calc-row-help{grid-column:2;font-size:var(--fs-sm);}
.calc-fields{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:var(--sp-3);}
.calc-field{display:flex;flex-direction:column;justify-content:flex-end;}
/* Ô nhập nhãn dài kèm dòng gợi ý (công cụ trong bài): 1 cột mobile, 2 cột từ 640px */
.calc-fields-wide{grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-4);}
.calc-fields-wide .calc-field{justify-content:flex-start;gap:var(--sp-1);}
@media (min-width:640px){.calc-fields-wide{grid-template-columns:repeat(2,1fr);}}
.calc-field label,.calc-add label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-soft);margin-bottom:var(--sp-1);}
.calc-field .input,.calc-add .input,.calc-name-input{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);}
.calc-remove{grid-column:1 / -1;justify-self:start;}
.calc-add,.calc-price{margin-top:var(--sp-4);max-width:var(--w-form);}
.calc-result{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);align-items:flex-start;}
.calc-big{font-family:var(--font-display);font-weight:800;font-size:var(--fs-xl);color:var(--ink);}
.calc-note{font-size:var(--fs-sm);color:var(--ink-soft);}
.calc-error{width:100%;color:var(--status-alert-deep);font-size:var(--fs-sm);font-weight:600;margin-top:var(--sp-2);}
.calc-warn{color:var(--status-alert-deep);font-weight:600;}
/* Bảng xếp hạng "kẻ ăn điện" trong bước 2 */
.calc-rank{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);}
.calc-rank-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:var(--ink);}
.calc-rank-item{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4);border:var(--border-soft);border-radius:var(--r-md);}
.calc-rank-top{border:var(--border);}
.calc-rank-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-1) var(--sp-3);font-size:var(--fs-md);}
.calc-rank-name{font-weight:700;color:var(--ink);}
.calc-rank-val{color:var(--ink-soft);}
.calc-rank-bar{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden;}
.calc-rank-bar span{display:block;height:100%;width:var(--pct);border-radius:var(--r-pill);background:var(--violet);}
.calc-rank-top .calc-rank-bar span{background:var(--status-alert);}