* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--text); font-family: var(--font-body);
  font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
/* Thanh trên cùng — bám `.tb` porcelain (design/starsteller-home-night.html baseline):
   nền sáng var(--bg), viền dưới var(--line), logo màu brand, nav mono var(--text-2).
   Trước R26 nó là dải navy riêng nên trang bài là bề mặt duy nhất của cả site
   có header khác mọi trang khác. */
.spa-bar { position: sticky; top: 0; z-index: 50; background: var(--bg);
  color: var(--text); border-bottom: 1px solid var(--line); }
.spa-bar-in { max-width: 200mm; margin: 0 auto; padding: 13px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* brand là thẻ <a> — không khai màu là a:visited nhuộm tím chữ thương hiệu */
.brand { font-family: var(--font-display); font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--brand); }
.brand b { color: var(--accent); }
.brand-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3); display: block; margin-top: 2px; }
.btn { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 13px 24px; border: none; cursor: pointer;
  background: var(--data-a); color: var(--brand); transition: opacity .15s; }
.btn:hover { opacity: .88; } .btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--text-inv); border: 1px solid var(--data-a); }
.btn-dark { background: var(--brand); color: var(--data-a); }
.btn-lg { padding: 16px 34px; font-size: 15px; }
.wrap { max-width: 200mm; margin: 0 auto; padding: 0 20px 90px; }
label.lb { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
input.in, select.in { width: 100%; padding: 13px; border: 1px solid var(--line);
  background: var(--text-inv); color: var(--text); font-family: var(--font-body); font-size: 16px; }
input.in:focus, select.in:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.seg { display: flex; border: 1px solid var(--line); }
.seg button { flex: 1; padding: 13px; background: var(--text-inv); border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--data-a); }
.hint { font-size: 13px; color: var(--text-3); font-style: italic; }
.err { padding: 12px 14px; background: color-mix(in oklab,var(--danger) 8%,transparent);
  border: 1px solid color-mix(in oklab,var(--danger) 28%,transparent);
  font-size: 14px; color: var(--danger); margin-top: 16px; }
.actions { position: sticky; bottom: 0; z-index: 40; background: var(--bg);
  border-top: 1px solid var(--line); padding: 13px 0; margin-top: 26px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.actions .spacer { flex: 1; }
.actions .st-mini { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--text-3); text-transform: uppercase; }
.hidden { display: none !important; }

/* ══ CHECKOUT BẢN MỚI (ck2-) — tiền tố riêng, KHÔNG sửa class đang dùng ══ */
.ck2-tiep { background: var(--surface-2); border: 1px solid var(--line);
  padding: 11px 13px; font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.ck2-gia { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 11px; display:grid; gap:5px; }
.ck2-gia > div { display:flex; justify-content:space-between; font-size: 13.5px; }
.ck2-gia s { color: var(--text-3); }
.ck2-gia .hi b { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.ck2-gia .re { border-top:1px solid var(--line); padding-top:6px; }
.ck2-gia .re b { font-family: var(--font-display); font-weight: 800; }
.ck2-qua-dai { display:flex; align-items:baseline; gap:10px; margin: 15px 0 0;
  padding-bottom: 7px; border-bottom: 1.5px solid var(--data-a); }
.ck2-qua-dai .n b { font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing:.15em; text-transform: uppercase; color: var(--text); white-space:nowrap; }
.ck2-qua-dai .n span { display:none; }
.ck2-qua-dai .gia { flex:none; margin-left:auto; font-family: var(--font-mono); font-size: 10px;
  letter-spacing:.05em; text-transform: uppercase; color: var(--text-3); white-space:nowrap; }
.ck2-qua-dai .gia span { display:inline; }
.ck2-qua-dai .gia b { display:inline; font-family: var(--font-display); font-size: 14px;
  font-weight: 800; color: var(--text); margin-left: 4px; letter-spacing:0; }
.ck2-qua-hop { padding: 0; }
.ck2-qua { display:flex; gap:10px; align-items:flex-start; padding: 11px 0;
  border-bottom: 1px solid var(--line); }
.ck2-qua:last-child { border-bottom: 0; padding-bottom: 2px; }
.ck2-qua .bia { flex:none; width:20px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; color: var(--data-a); letter-spacing:.04em; margin-top: 2px; }
.ck2-qua .bia b { font-family: var(--font-mono); font-weight: 600; }
.ck2-qua .noi { flex:1; min-width:0; }
.ck2-qua .t { font-family: var(--font-display); font-size: 14.5px; font-weight: 800;
  text-transform: uppercase; line-height: 1.14; }
.ck2-qua .m { font-size: 12.5px; line-height: 1.45; color: var(--text-3); margin-top: 3px; }
.ck2-qua .rieng { font-family: var(--font-mono); font-size: 10px; color: var(--brand);
  background: var(--surface-2); border: 1px solid var(--line); padding: 5px 8px;
  margin-top: 6px; display:inline-block; }
.ck2-xem { display:inline-block; background:none; border:0; padding:0; margin-top:6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing:.12em; text-transform: uppercase;
  text-decoration: underline; color: var(--text-3); cursor:pointer; }
.ck2-qua .p { flex:none; text-align:right; white-space:nowrap; }
.ck2-qua .p s { display:block; font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.ck2-qua .p u { display:block; font-family: var(--font-display); font-size: 15px; font-weight: 800;
  color: var(--data-a); text-decoration: none; }
.ck2-bd { display:grid; gap:8px; margin: 16px 0; }
.ck2-bd > div { display:flex; gap:8px; font-size: 13px; line-height: 1.45; }
.ck2-bd i { font-style: normal; font-weight: 700; color: var(--data-a); }
.ck2-h { font-family: var(--font-mono); font-size: 10px; letter-spacing:.16em;
  text-transform: uppercase; color: var(--text-3); border-top: 1px solid var(--line);
  padding-top: 14px; margin: 6px 0 10px; }


.qz { max-width: 660px; margin: 0 auto; padding: 40px 0 80px; }
.qz-cu { max-width: 660px; margin: 16px auto -20px; display: flex; align-items: center;
  gap: 10px; background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 12px; font-size: 13.5px; }
.qz-cu a { color: var(--text); text-decoration: none; flex: 1; line-height: 1.5; }
.qz-cu a u { color: var(--accent); }
.qz-cu button { background: none; border: none; font-size: 18px; color: var(--text-3);
  cursor: pointer; line-height: 1; flex: none; }
.qz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.qz-chuong { font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: -0.005em; white-space: nowrap; flex: none; }
.qz-chuong span { color: var(--accent); margin-right: 8px; font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; }
/* phụ đề chương có thể dài — một dòng, cắt bằng …, đừng để gãy tiêu đề chương */
.qz-dem { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; }
.qz-track { height: 2px; background: color-mix(in oklab,var(--data-a) 18%,transparent); margin-top: -1px; }
.qz-fill { height: 100%; background: var(--accent); width: 0; transition: width .45s ease; }
.qz-body { padding-top: 40px; animation: qzin .38s ease both; }
@keyframes qzin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .qz-body { animation: none } }
.qz-hoi { font-family: var(--font-display); font-weight: 800; font-size: clamp(27px,4.6vw,38px);
  line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase; }
.qz-phu { font-size: 16px; color: var(--text-3); font-style: italic; margin-top: 10px; }
.qz-dap { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.qz-op { text-align: left; background: var(--text-inv); border: 1px solid var(--line);
  padding: 16px 18px; cursor: pointer; transition: all .14s; font-family: var(--font-body); }
.qz-op:hover { border-color: var(--accent); transform: translateX(3px); }
.qz-op[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); }
.qz-op .t { font-size: 17px; color: var(--text); display: block; }
.qz-op .p { font-size: 14px; color: var(--text-3); display: block; margin-top: 3px; }
.qz-op[aria-pressed="true"] .t { color: var(--data-a); }
.qz-op[aria-pressed="true"] .p { color: color-mix(in oklab,var(--text-inv) 65%,transparent); }

.qz-xen { background: var(--brand); color: var(--text-inv); margin-top: 28px; }
/* ảnh chạy hết bề ngang thẻ nên phần đệm chuyển xuống lớp trong */
.qz-xen-in { padding: 30px 32px 34px; }
/* Tỷ lệ khung PHẢI khớp tỷ lệ ảnh nguồn. Bộ thẻ xen là 1210×692 (tỷ lệ 1,749);
   khung cũ đặt 16/7 = 2,286 nên `cover` cắt mất 23% chiều cao mỗi ảnh — đúng
   chỗ bố cục riso đặt tiêu điểm. Đo rồi mới sửa, không chỉnh bằng mắt. */
.qz-xen-anh { display: block; width: 100%; aspect-ratio: 1210/692; object-fit: cover;
  border-bottom: 1px solid var(--data-a);
  /* nền chờ trong lúc ảnh về — không còn khối xanh trống trơn */
  background: linear-gradient(160deg, color-mix(in oklab,var(--data-a) 14%,transparent), color-mix(in oklab,var(--data-a) 4%,transparent)); }
.qz-xen .nhan { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--data-a); }
.qz-xen h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(21px,3.4vw,28px);
  text-transform: uppercase; line-height: 1.12; margin: 12px 0 0; }
.qz-xen.quote h3 { font-family: var(--font-body); font-style: italic; font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: clamp(20px,3.2vw,26px); color: var(--data-a); }
.qz-xen p { font-size: 16px; line-height: 1.68; color: color-mix(in oklab,var(--text-inv) 88%,transparent); margin-top: 14px; }

.qz-form { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
.qz-form .full { grid-column: 1/-1; }
.qz-nav { display: flex; gap: 12px; align-items: center; margin-top: 30px; }
.qz-back { background: none; border: none; cursor: pointer; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.qz-back:hover { color: var(--text); }
.qz-xn { background: var(--surface-2); border: 1px solid var(--line); padding: 24px; margin-top: 24px; }
.qz-xn dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.qz-xn dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3); padding-top: 4px; }
.qz-xn dd { font-family: var(--font-display); font-weight: 700; font-size: 19px; text-transform: uppercase; }
.xn-nho { display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px;
  text-transform: none; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.am-hang { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
/* Ô tìm tỉnh/thành — thay <select> 61 dòng. Danh sách gợi ý nổi TRÊN nội dung
   phía dưới (position:absolute) chứ không đẩy trang giãn ra: đẩy trang làm ô
   đang gõ nhảy khỏi tầm mắt trên điện thoại. */
/* Dòng mở âm lịch — chữ nhỏ, không phải nút to. Nó phục vụ thiểu số nên không
   được chiếm chỗ ngang hàng với ô ngày sinh. */
.lich-mo { margin-top: 8px; font-size: 13.5px; }
.am-nhan { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.am-nhan .lk { text-transform: none; letter-spacing: 0; margin-left: 6px; }
.tim-box { position: relative; }
/* Danh sách gợi ý là tấm NỔI, nên nền phải ĐỤC. Ở zone tối `--surface` chỉ là
   một lớp phủ sáng khoảng 4,5% độ đục — đúng cho thẻ nằm TRONG luồng (nó lấy
   nền trang làm đáy), sai hoàn toàn cho tấm nổi: cả form phía dưới (nhãn, nút
   Nam/Nữ, nút Tiếp) hiện xuyên qua và chữ chồng lên chữ.
   Vẫn giữ được sắc thái của `--surface`: sơn nó thành một lớp ảnh nền ĐÈ LÊN
   `--bg` đục, thay vì dùng nó làm màu nền. Cách này đúng cho cả hai zone. */
.tim-ds { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; max-height: 46vh; overflow-y: auto;
  background-color: var(--bg);
  background-image: linear-gradient(var(--surface), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3); box-shadow: 0 10px 28px color-mix(in oklab,var(--text) 20%,transparent); }
.tim-ds li { padding: 11px 12px; min-height: 44px; display: flex; align-items: center;
  cursor: pointer; border-radius: var(--r-2); font-size: 15px; }
/* `--surface-2` cũng trong suốt ở zone tối nên dòng đang chọn không hiện ra —
   trộn thẳng với chữ để có mức tương phản thật, không phụ thuộc nền phía sau. */
.tim-ds li[aria-selected="true"], .tim-ds li:hover {
  background: color-mix(in oklab, var(--bg), var(--text) 12%); }
.tim-ds:empty { display: none; }
.am-nhuan { display: flex; align-items: center; gap: 7px; margin-top: 9px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.am-nhuan span { font-size: 12px; color: var(--text-3); }
.qz-chip-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.qz-chip { flex: 1; min-width: 88px; border: 1px solid var(--line); background: var(--text-inv);
  cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3);
  border-radius: 999px; padding: 11px 10px; }
.qz-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); }
.qz-gio-box { margin-top: 10px; }
.qz-gs-note { display: flex; gap: 12px; background: var(--surface-2); border: 1px solid var(--line);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.qz-mien { display: none; margin-top: 12px; border: 1px solid var(--line);
  padding: 12px 14px; background: var(--surface-2); }
.qz-mien.hien { display: block; }
.qz-mien p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.qz-nn { display: none; margin-top: 10px; border: 1px solid var(--line);
  padding: 12px 14px; background: var(--surface-2); }
.qz-nn.hien { display: block; }
.qz-nn p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.55; }
.qz-nn .in { margin-bottom: 8px; }
.qz-nn .btn { width: 100%; }
.qz-nn .nn-xong { margin: 0; color: var(--brand); }
@media (max-width: 640px) { .qz-form { grid-template-columns: 1fr } }

@media screen {
  .he-box { position: relative; padding-bottom: 8px; }
  .he-box p { margin: 0; }
  .he-fade { position: relative; margin-top: 10px; }
  .he-fade i { display: block; height: 8px; background: color-mix(in oklab,var(--text) 9%,transparent);
    border-radius: 2px; margin-bottom: 7px; filter: blur(2.6px); }
  .he-fade i:nth-child(2) { width: 94% } .he-fade i:nth-child(3) { width: 72% }
  .muc-khoa .muc-body { color: var(--text-2); }
  /* mục khoá là vùng bấm được — phải trông như bấm được (nút CTA "Mở khoá để
     đọc tiếp" đã nằm giữa khối mờ nên không thêm nhãn nữa, tránh lặp chữ) */
  .muc-khoa { cursor: pointer; }
  .muc-khoa:active { background: color-mix(in oklab,var(--data-a) 7%,transparent); }
  .muc-nhan { outline: 1px solid var(--accent); outline-offset: 8px; }
  .nhan-lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; }
}

/* B4 — cấu trúc base; màu đêm ghi đè ở funnel night skin */
.load-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; text-align: center; background: var(--brand); color: var(--text-inv); }
.load-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.load-stars .star { fill: var(--text-inv); }
.load-in { position: relative; width: 100%; max-width: 420px; text-align: center; }
.load-mark { display: block; margin: 0 auto; width: 120px; height: auto; }
.load-mark .m-outer,.load-mark .m-inner,.load-mark .m-tick { fill: none; stroke: color-mix(in oklab,var(--text-inv) 55%,transparent); }
.load-mark .m-outer { stroke-width: 1.2; opacity: .7; }
.load-mark .m-inner { stroke-width: .8; opacity: .4; }
.load-mark .m-tick { stroke-width: 1.6; opacity: .55; }
.load-mark .m-spoke { stroke: color-mix(in oklab,var(--text-inv) 45%,transparent); stroke-width: .7; opacity: .3; fill: none; }
.load-kick { font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em;
  text-transform: none; color: color-mix(in oklab,var(--text-inv) 55%,transparent); margin-top: 26px; }
.load-title { font-family: var(--font-display); font-weight: 700; font-size: 22px;
  line-height: 1.25; letter-spacing: -.01em; margin: 10px 0 0; text-transform: none;
  text-wrap: balance; color: var(--text-inv); }
.load-chart { margin: 26px 0 0; text-align: left; }
.load-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-top: 1px solid color-mix(in oklab,var(--text-inv) 12%,transparent); }
.load-row:first-child { border-top: 0; }
.load-row svg.gl { width: 20px; height: 20px; flex: none; stroke: var(--accent); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.load-row.dim svg.gl { stroke: color-mix(in oklab,var(--text-inv) 45%,transparent); }
.load-row .t,.load-row .l { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: color-mix(in oklab,var(--text-inv) 55%,transparent); width: 86px; flex: none; text-transform: none; }
.load-row .v,.load-row .g { font-weight: 600; color: var(--text-inv); text-transform: none; font-size: 15px; }
.load-row .st { margin-left: auto; font-family: var(--font-mono); font-size: 12px;
  color: color-mix(in oklab,var(--text-inv) 55%,transparent); }
.load-row .st svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; vertical-align: -2px; }
.load-bar { width: 100%; height: 3px; background: color-mix(in oklab,var(--text-inv) 12%,transparent);
  border-radius: 999px; margin-top: 28px; overflow: hidden; }
.load-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px;
  transition: width .8s cubic-bezier(.22,.61,.21,1); }
.load-under { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 10px; }
.load-step { font-size: 12px; color: color-mix(in oklab,var(--text-inv) 55%,transparent);
  text-align: left; font-style: normal; min-height: 1.4em; flex: 1; }
.load-pct { font-family: var(--font-mono); font-size: 12px; color: var(--text-inv); flex: none; }
.load-note { font-size: 12px; color: color-mix(in oklab,var(--text-inv) 55%,transparent);
  margin-top: 26px; line-height: 1.7; text-align: center; }
.load-err { color: var(--danger); font-size: 14px; font-style: normal; }

/* night chrome — mark lockup on .tb-logo */
html.night .tb{background:transparent;border-bottom-color:var(--line)}
html.night .tb-logo{display:inline-flex;align-items:center;gap:10px;font-size:20px;color:var(--text)}
html.night .tb-logo img,html.night .tb-logo svg{width:26px;height:26px;display:block;flex:none}
/* night mock (home/shop/A4): nav = body 13px, không mono */
html.night .tb-nav,html.night .tb-nav a,html.night a.tb-nav{
  font-family:var(--font-body);font-size:13px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--text-2);text-decoration:none}
html.night .tb-nav a:hover,html.night a.tb-nav:hover{color:var(--text)}
html.night .tb-nav a[aria-current],html.night a.tb-nav[aria-current]{
  color:var(--text);border-bottom:1px solid var(--accent-text);padding-bottom:2px}
/* mockup A3: chân trang cách nội dung — shell cũ không có margin-top */
html.night .ft{border-top-color:var(--line);margin-top:clamp(64px,9vw,104px)}
html.night .ft .ft-logo{letter-spacing:.04em;color:var(--text-2)}
html.night .ft nav a{color:var(--text-2)}
html.night .ft nav a:hover{color:var(--text)}
html.night .btn-chinh{background:var(--accent);color:var(--bg)}
html.night .btn-chinh:hover{background:var(--accent-hover);color:var(--bg);filter:brightness(1.05)}
html.night{min-height:100%;
  background:
    radial-gradient(1000px 700px at 74% 12%, var(--accent-soft), transparent 62%),
    radial-gradient(760px 560px at 8% 88%, color-mix(in oklab, var(--accent-soft) 55%, transparent), transparent 65%),
    linear-gradient(168deg, color-mix(in oklab, var(--bg), var(--text) 5%), var(--bg) 52%, var(--bg2))}
html.night body{background:transparent;color:var(--text)}

/* canvas đêm + sao */
html.night body{background:transparent;color:var(--text);font-family:var(--font-body)}
html.night .stars-funnel{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html.night .stars-funnel .star{fill:var(--text)}
/* MỖI vế phải tự mang `html.night`. Dấu phẩy trong CSS KHÔNG phân phối tiền
   tố: bản cũ chỉ ràng buộc `.spa-bar`, ba vế còn lại thành quy tắc trần. Riêng
   `.load-screen` trần thắng luôn `position:fixed` của nó (cùng độ đặc hiệu,
   đứng sau) — màn "Đang dựng bản đồ sao" rơi xuống cuối trang theo luồng, bị
   cắt cụt, đúng ảnh Duc chụp 09/08.
   `.load-screen` KHÔNG được nâng lớp ở đây: nó là lớp phủ toàn màn, phải giữ
   fixed. Chỉ ba khối trong luồng mới cần nổi lên trên nền sao. */
html.night .spa-bar,html.night .wrap,html.night #qz-sec{position:relative;z-index:1}
html.night .star.tw{animation:nftw var(--tw-d,4s) ease-in-out infinite;animation-delay:var(--tw-l,0s)}
@keyframes nftw{0%,100%{opacity:var(--o,.6)}50%{opacity:calc(var(--o,.6)*.22)}}
@media (prefers-reduced-motion:reduce){html.night .star.tw{animation:none}}

/* spa-bar */
html.night .spa-bar{background:transparent;border-bottom-color:var(--line);color:var(--text)}
html.night .brand-khoi{color:var(--text)}
html.night .brand{font-family:var(--font-display);font-weight:700;font-size:15px;
  text-transform:none;letter-spacing:-.01em;color:var(--text)}
html.night .brand b{color:var(--text);font-weight:700}
html.night .brand-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.night .tb-nav,html.night .tb-nav a,html.night a.tb-nav{
  font-family:var(--font-body)!important;font-size:13px!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--text-2)!important}
html.night .tb-nav a:hover,html.night a.tb-nav:hover{color:var(--text)!important}
html.night .tb-nav-vang,html.night a.tb-nav-vang{color:var(--accent-text)!important}

/* nút phễu — brass CTA, không all-caps */
html.night .btn,html.night .qz-tiep,html.night .btn-lap{
  font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.02em;
  text-transform:none;border-radius:10px;padding:14px 24px;
  background:var(--accent);color:var(--bg);border:0;
  transition:filter .18s ease,transform .18s ease}
html.night .btn:hover,html.night .qz-tiep:hover,html.night .btn-lap:hover{
  filter:brightness(1.08);transform:translateY(-1px);opacity:1;
  background:var(--accent);color:var(--bg)}
html.night .btn:disabled{opacity:.38}
html.night .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}

/* ── B1 quiz ── */
html.night .qz{max-width:560px;padding:24px 0 64px;color:var(--text)}
html.night .qz-top{border-bottom:0;padding-bottom:0;align-items:baseline}
html.night .qz-chuong{font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.04em;text-transform:none;color:var(--text-2);white-space:nowrap}
html.night .qz-chuong span{color:var(--text-2);margin-right:8px;font-family:var(--font-mono);
  font-size:12px;font-weight:500;letter-spacing:.04em}
html.night .qz-dem{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  color:var(--text-2);text-transform:none}
html.night .qz-track{height:3px;background:var(--line);margin-top:10px;border-radius:999px;overflow:hidden}
html.night .qz-fill{background:var(--accent);border-radius:999px;transition:width .5s cubic-bezier(.22,.61,.21,1)}
html.night .qz-body{padding-top:36px}
html.night .qz-hoi{font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,4.6vw,30px);line-height:1.2;letter-spacing:-.01em;
  text-transform:none;text-wrap:balance;color:var(--text)}
html.night .qz-phu{font-family:var(--font-body);font-style:normal;font-size:13px;
  color:var(--text-2);margin:10px 0 26px}
html.night .qz-dap{gap:12px;margin-top:0}
html.night .qz-op{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:16px;cursor:pointer;font-family:var(--font-body);
  color:var(--text);transform:none;transition:border-color .15s ease,background .15s ease}
html.night .qz-op:hover{background:color-mix(in oklab,var(--surface),var(--text) 4%);
  border-color:var(--line-2);transform:none}
html.night .qz-op[aria-pressed="true"]{background:var(--surface);border:1.5px solid var(--text);color:var(--text)}
html.night .qz-op .t{font-size:15px;font-weight:500;color:var(--text)}
html.night .qz-op .p{font-size:13px;color:var(--text-2);margin-top:4px}
html.night .qz-op[aria-pressed="true"] .t{color:var(--text)}
html.night .qz-op[aria-pressed="true"] .p{color:var(--text-2)}
html.night .qz-nav{gap:12px;margin-top:30px}
html.night .qz-back{font-family:var(--font-body);font-size:15px;letter-spacing:0;
  text-transform:none;color:var(--text-2);border:1px solid var(--line-2);
  background:none;border-radius:10px;padding:14px 20px;cursor:pointer}
html.night .qz-back:hover{color:var(--text);border-color:var(--text)}
html.night .qz-nav .btn{flex:1}

/* ── B2 interstitial (xen) ── */
html.night .qz-xen{background:var(--surface);color:var(--text);margin-top:28px;
  border:1px solid var(--line);border-left:1px solid var(--line);border-radius:16px;overflow:hidden}
html.night .qz-xen-anh{border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,var(--accent-soft),transparent)}
html.night .qz-xen-in{padding:28px 28px 30px}
html.night .qz-xen .nhan{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.night .qz-xen h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,3.4vw,26px);text-transform:none;line-height:1.2;
  letter-spacing:-.01em;margin:12px 0 0;color:var(--text)}
html.night .qz-xen.quote h3{font-family:var(--font-display);font-style:normal;font-weight:700;
  text-transform:none;color:var(--accent-text)}
html.night .qz-xen p{font-size:15px;line-height:1.65;color:var(--text-2);margin-top:14px}

/* ── B3 birth form ── */
html.night .qz-form{margin-top:26px;gap:18px}
html.night label.lb{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--text-2);margin-bottom:8px}
html.night input.in,html.night select.in{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  color:var(--text);font-family:var(--font-body);font-size:15px;padding:13px 14px}
html.night input.in:focus,html.night select.in:focus{
  outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
html.night input.in::placeholder{color:color-mix(in oklab,var(--text-2) 70%,transparent)}
html.night .seg{border:1px solid var(--line);border-radius:10px;overflow:hidden}
html.night .seg button{background:var(--surface);color:var(--text-2);font-family:var(--font-body);
  font-weight:500;font-size:14px;text-transform:none;letter-spacing:0;padding:13px}
html.night .seg button[aria-pressed="true"]{background:color-mix(in oklab,var(--surface),var(--text) 8%);
  color:var(--text)}
html.night .hint{font-style:normal;font-size:13px;color:var(--text-2);margin-top:8px}
html.night .qz-chip{flex:1;min-width:88px;border:1px solid var(--line);background:var(--surface);
  border-radius:10px;padding:12px 10px;font-family:var(--font-body);font-weight:500;
  font-size:13px;text-transform:none;letter-spacing:0;color:var(--text-2)}
html.night .qz-chip[aria-pressed="true"]{border-color:var(--text);color:var(--text);background:var(--surface)}
html.night .qz-mien{background:var(--surface);border:1px solid var(--line);border-radius:12px}
html.night .qz-mien p{color:var(--text-2)}
html.night .qz-gs-note{background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text-2)}
html.night .am-nhuan{color:var(--text-2)}
html.night .am-nhuan span{color:var(--text-2)}
html.night .qz-xn{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:24px}
html.night .qz-xn dt{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.night .qz-xn dd{font-family:var(--font-display);font-weight:700;font-size:18px;
  text-transform:none;color:var(--text)}
html.night .xn-nho{font-family:var(--font-body);font-size:13px;color:var(--text-2);text-transform:none}
html.night .err{background:color-mix(in oklab,var(--accent) 14%,transparent);
  border:1px solid color-mix(in oklab,var(--accent) 32%,transparent);color:var(--accent-text)}
html.night .qz-cu{background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--text)}
html.night .qz-cu a{color:var(--text)}
html.night .qz-cu a u{color:var(--accent-text);text-decoration:none}

/* ── ba lớp (.bl) — night zone: brass + bone, không Son ── */
html.night .bl{background:var(--bg2);color:var(--text);margin-bottom:30px;
  padding:32px 28px 26px;position:relative;overflow:hidden;border:1px solid var(--line);
  border-radius:16px}
html.night .bl::before{opacity:.45;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,var(--accent) 50%,transparent 50%),
    radial-gradient(1px 1px at 78% 12%,var(--text) 50%,transparent 50%),
    radial-gradient(1.2px 1.2px at 62% 42%,var(--accent) 50%,transparent 50%),
    radial-gradient(1px 1px at 28% 62%,var(--text) 50%,transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 74%,var(--accent) 50%,transparent 50%),
    radial-gradient(1px 1px at 44% 88%,var(--text) 50%,transparent 50%)}
html.night .bl-kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;
  text-transform:none;color:var(--text-2);margin-bottom:20px}
html.night .bl-o{border-top:1px solid var(--line);padding:18px 0;gap:16px}
html.night .bl-o:first-child{border-top:none;padding-top:0}
html.night .bl-so{color:var(--accent-text);opacity:.85}
html.night .bl-nhan{color:var(--text-2);letter-spacing:.04em;text-transform:none}
html.night .bl-ten{color:var(--text);text-transform:none;font-weight:700;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
html.night .bl-ten svg{color:var(--accent)}
html.night .bl-ten .bl-phu{margin:0;flex:none;font-weight:400;text-transform:none}
html.night .bl-phu{color:var(--text-2)}
html.night .bl-o p{color:var(--text-2)}
html.night .bl-chot{border-top:1px solid var(--line);color:var(--accent-text);
  font-style:normal;font-size:15px}
html.night .stick{background:var(--bg2);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px color-mix(in oklab,var(--bg) 40%,transparent)}
html.night .stick .cta-mo{background:var(--accent);color:var(--bg);border:1px solid var(--accent)}
html.night .stick .cta-mo:hover{background:var(--accent-hover);color:var(--bg)}
html.night .uu-dai{background:var(--bg2);border:1px solid var(--line);border-top:3px solid var(--accent)}
html.night .uu-dai .ud-t{color:var(--accent-text)}
html.night .uu-dai .ud-thanh span{background:var(--accent)}

/* ── B4 loading — design/starsteller-b4-loading.html (full structure) ── */
html.night .load-screen{
  background:
    radial-gradient(760px 540px at 50% 34%, var(--accent-soft), transparent 62%),
    linear-gradient(168deg, color-mix(in oklab, var(--bg), var(--text) 5%), var(--bg) 52%, var(--bg2));
  color:var(--text);z-index:100;padding:48px 20px}
html.night .load-stars .star{fill:var(--text)}
html.night .load-stars .star.tw{animation:nftw var(--tw-d,4s) ease-in-out infinite;animation-delay:var(--tw-l,0s)}
html.night .load-in{max-width:420px}
html.night .load-mark .m-outer,html.night .load-mark .m-inner,html.night .load-mark .m-tick{
  stroke:var(--text-2)}
html.night .load-mark .m-spoke{stroke:var(--text-2)}
html.night .load-kick{font-family:var(--font-mono);font-weight:500;font-size:12px;
  letter-spacing:.05em;text-transform:none;color:var(--text-2);margin-top:26px}
html.night .load-title{font-family:var(--font-display);font-weight:700;font-size:22px;
  text-transform:none;letter-spacing:-.01em;line-height:1.25;margin:10px 0 0;
  color:var(--text);text-wrap:balance}
html.night .load-chart{margin-top:26px;text-align:left}
html.night .load-row{border-top-color:var(--line)}
html.night .load-row svg.gl{stroke:var(--accent);color:var(--accent)}
html.night .load-row.dim svg.gl{stroke:var(--text-2);color:var(--text-2)}
html.night .load-row .t,html.night .load-row .l{color:var(--text-2);letter-spacing:.04em;text-transform:none}
html.night .load-row .v,html.night .load-row .g{font-weight:600;font-size:15px;color:var(--text);text-transform:none}
html.night .load-row .st{color:var(--text-2)}
html.night .load-bar{height:3px;border-radius:999px;background:var(--line);margin-top:28px}
html.night .load-fill{background:var(--accent);border-radius:999px;
  transition:width .8s cubic-bezier(.22,.61,.21,1)}
html.night .load-under{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:10px}
html.night .load-step{font-family:var(--font-body);font-style:normal;font-size:12px;
  color:var(--text-2);margin-top:0;text-align:left}
html.night .load-pct{font-family:var(--font-mono);font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--text);margin-top:0}
html.night .load-note{font-size:12px;color:var(--text-2);margin-top:26px;line-height:1.7}
html.night .load-err{color:var(--accent-text);font-style:normal}

/* porcelain canvas — PHẲNG tuyệt đối, không gradient (HANDOFF §2) */
html.porcelain{min-height:100%;background:var(--bg);color:var(--text)}
html.porcelain body{
  background:transparent;color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased}
html.porcelain .stars-funnel{display:none!important}

/* chuyển zone night → porcelain (B5 reveal) */
html.zone-reveal{transition:background-color var(--dur-slow) var(--ease)}
html.zone-reveal .stars-funnel{
  opacity:1;transition:opacity var(--dur-slow) var(--ease);pointer-events:none}
html.zone-reveal-on .stars-funnel{opacity:0}
@media (prefers-reduced-motion:reduce){
  html.zone-reveal,html.zone-reveal .stars-funnel{transition:none}}

/* spa-bar — mang zone class night (shell trangbao): var() ở đây là token đêm,
   thanh hoà vào dải đêm mở bài thay vì mảng giấy chặn trên nền tối (Duc chê
   phá kết cấu, 09/08). KHÔNG sticky: ba dải dính chồng nhau trên đầu trông
   rất kỳ khi cuộn — chrome đọc xong việc thì trôi đi. */
html.porcelain .spa-bar{
  position:static;
  background:var(--bg);color:var(--text);border-bottom-color:var(--line)}
html.porcelain .brand-khoi{color:var(--text)}
html.porcelain .brand{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;color:var(--brand)}
html.porcelain .brand b{color:var(--brand);font-weight:var(--fw-bold)}
html.porcelain .brand-sub{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .tb-nav{
  font-family:var(--font-mono)!important;font-size:var(--fs-1)!important;
  letter-spacing:.04em!important;text-transform:none!important;color:var(--text-2)!important}
html.porcelain .tb-nav:hover{color:var(--brand)!important}
html.porcelain .tb-nav-vang{color:var(--accent)!important}

html.porcelain .wrap{color:var(--text)}
html.porcelain .actions{
  background:var(--bg);border-top-color:var(--line);color:var(--text)}
html.porcelain .actions .st-mini{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  text-transform:none;color:var(--text-2)}
html.porcelain .btn,html.porcelain .btn-dark{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-2);
  letter-spacing:.08em;text-transform:none;border-radius:var(--r-4);
  background:var(--brand);color:var(--text-inv);border:0}
html.porcelain .btn:hover,html.porcelain .btn-dark:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));
  opacity:1}
html.porcelain .btn-ghost{
  background:transparent;color:var(--text);border:var(--bw-1) solid var(--line)}
html.porcelain .btn:disabled{opacity:.4}

/* Cột đọc A6/B6: 640px nội dung + gutter — hẹp hơn 760 cũ để dòng ~60–65 ký tự. */
html.porcelain .screen-wrap{
  max-width:680px;margin:0 auto;padding:0 var(--gutter) var(--s-8)}
/* .page trên SPA là VỎ PHẦN BÀI, không phải tờ A4 — reset trọn bộ rule khổ in
   của style_pdf (height:297mm + overflow:hidden + flex), xem chú thích
   CSS_MAN_HINH trong spa_assets. */
html.porcelain .page{width:auto;height:auto;min-height:0;padding:0;margin:0;
  overflow:visible;position:static;display:block;break-after:auto}
html.porcelain .body-area{padding-top:0;width:auto}

/* dải nhắc bản mẫu /mau — zone night, KHÔNG sticky (cuộn là trôi đi).
   .night không định nghĩa --warn nên phải tự chọn màu đêm: nền bg2, chữ
   brass nhạt (accent-text) — vẫn là giọng "ghi chú" trên nền đêm. */
html.porcelain #mau-nhan.mau-nhac,html.porcelain .mau-nhac{
  position:static;
  background:var(--bg2);color:var(--accent-text);
  border-bottom:var(--bw-1) solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  text-transform:none;text-align:center;padding:var(--s-2) var(--gutter)}

/* ---- B10: xem trước tài liệu (pv-*) ---- */
html.porcelain .pv-bia{
  margin:var(--s-4) 0 0;padding:var(--s-5);position:relative;overflow:hidden;
  color:var(--text-inv);border-radius:var(--r-4);
  background:linear-gradient(165deg,
    color-mix(in oklab, var(--surface-inv), var(--text-inv) 5%),
    var(--surface-inv) 55%,
    color-mix(in oklab, var(--surface-inv), var(--text) 30%))!important;
  border:0}
@media (min-width:1024px){html.porcelain .pv-bia{margin:0}}
html.porcelain .pv-eb{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.22em;
  color:var(--focus-ring-inv)}
html.porcelain .pv-ten,html.porcelain .pv-h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-2);line-height:var(--lh-tight);margin:var(--s-2) 0}
/* Trang PDF xem trước là GIẤY TRẮNG, không phải đảo tối: chữ chạy đầu/chân
   trang phải lấy token nền sáng. Bản cũ pha từ `--text-inv` (gần trắng) nên
   đo được 2,03 — chữ trắng trên giấy trắng. */
html.porcelain .pv-run,html.porcelain .pv-cn{
  font-family:var(--font-mono);font-size:var(--fs-1);line-height:var(--lh-loose);
  color:var(--text-2)}
html.porcelain .pv-tru{
  display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4);
  padding-top:var(--s-3);
  border-top:var(--bw-1) solid color-mix(in oklab, var(--focus-ring-inv) var(--a-4), transparent)}
html.porcelain .pv-tru i,html.porcelain .pv-tru span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  border:var(--bw-1) solid color-mix(in oklab, var(--focus-ring-inv) var(--a-3), transparent);
  border-radius:var(--r-3);padding:var(--s-2) var(--s-3);flex:1;min-width:88px;text-align:center}
html.porcelain .pv-tru b{display:block;font-family:var(--font-display);font-weight:var(--fw-medium);
  font-size:var(--fs-2);margin-top:var(--s-1);letter-spacing:0;text-transform:none}
html.porcelain .pv-h,html.porcelain .pv-k{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text);margin:var(--s-4) 0 var(--s-2)}
html.porcelain .pv-k{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.1em;color:var(--text-2)}
html.porcelain .pv-hang{
  display:flex;gap:var(--s-3);overflow-x:auto;padding-bottom:var(--s-2);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
html.porcelain .pv-hang figure{flex:none;width:132px;scroll-snap-align:start;margin:0}
html.porcelain .pv-hang figcaption{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--text-2);margin-top:var(--s-2)}
html.porcelain .pv-p{
  display:block;background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-3);overflow:hidden;color:var(--text)}
html.porcelain .pv-link{
  background:none;border:0;padding:10px 0;margin-top:var(--s-2);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:center;
  font-size:var(--fs-1);color:var(--brand);text-decoration:underline;text-underline-offset:3px}
html.porcelain .pv-link:hover{color:color-mix(in oklab,var(--brand),var(--text) var(--state-hover))}

/* danh sách gói (of-*) — checkout overlay dùng chung */
html.porcelain .of-h1{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-1);
  letter-spacing:.2em;color:var(--text-2);text-transform:none}
html.porcelain .of-h{
  background:var(--surface);border:var(--bw-1) solid var(--line);border-radius:var(--r-4);
  padding:var(--s-4);margin-top:var(--s-3);cursor:pointer;
  transition:border-color var(--dur-base) var(--ease),background var(--dur-base) var(--ease)}
html.porcelain .of-h:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .of-h.chon{border:var(--bw-2) solid var(--line-strong)}
html.porcelain .of-ten{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text)}
html.porcelain .of-gia{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);color:var(--brand)}
html.porcelain .of-ds li{
  font-size:var(--fs-2);color:var(--text-2);padding:var(--s-1) 0}
html.porcelain .of-ds li::before{
  background:var(--icon);border-radius:var(--r-full)}
/* R126g — hộp quà theo DS: viền nét đứt không có trong luật (§ hairline chỉ
   có bw-1/2/3 solid + --line); caps và tracking .16em vượt trần §3; divider
   và ô số nhuộm accent là trang trí. Dải đầu giữ nền accent (quyết định
   contrast cũ — chữ token nghịch), phần thân về hairline trung tính. */
html.porcelain .qbox{
  border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);background:var(--surface);margin-top:var(--s-3);
  overflow:hidden}
/* Dải đầu hộp quà có nền ACCENT (`.qbox-top{background:var(--accent)}`), nên
   chữ trên nó phải là token nghịch. Bản cũ dùng `--text-2`/`--brand` — token
   cho nền giấy — đo được **1,13** và **3,07**: dòng "Ba tài liệu tặng kèm"
   gần như biến mất, đúng chỗ Duc chụp được. Công cụ soi phễu bắt ra con số
   này ở chặng `phễu:checkout`, quét trang tĩnh không bao giờ thấy. */
html.porcelain .qbox-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;color:var(--text-2);
  text-transform:none}
html.porcelain .qbox-top .qbox-k,html.porcelain .qbox-top .qbox-gia{color:var(--text-inv)}
html.porcelain .qbox-gia{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.04em;color:var(--brand);text-transform:none}
html.porcelain .qbox-i{border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qbox-i:last-child{border-bottom:0}
html.porcelain .qbox-n{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  color:var(--text-2);font-family:var(--font-mono);font-size:var(--fs-1)}
html.porcelain .qbox-b b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .qbox-b span{
  font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base)}
html.porcelain .qbox-p s{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .qbox-p u{
  font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-regular);
  color:var(--text-2);text-decoration:none}
/* nút mở khoá = btn-p của A6/v3.1: Son solid — hành động tiền bạc trên
   porcelain mang accent Son, không phải gradient mực đêm. */
html.porcelain .unlock,html.porcelain .cta-cuoi .btn[data-mo]{
  display:block;width:100%;border:0;cursor:pointer;text-align:center;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-2);
  letter-spacing:.02em;text-transform:none;color:var(--text-inv);border-radius:var(--r-3);
  padding:var(--s-4) var(--s-5);
  background:var(--accent);transition:background var(--dur-base) var(--ease)}
html.porcelain .unlock:hover,html.porcelain .cta-cuoi .btn[data-mo]:hover{
  background:var(--accent-hover);opacity:1}
html.porcelain .teaser{
  background:var(--surface);color:var(--text);padding:var(--s-4);margin:var(--s-4) 0;
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .teaser-lbl{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none;margin-bottom:var(--s-2)}
html.porcelain .teaser p{font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text);margin:0}
html.porcelain .mod-badge{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.08em;
  text-transform:none;border:var(--bw-1) solid var(--line);color:var(--text-2);
  border-radius:var(--r-2);padding:var(--s-1) var(--s-2);background:var(--surface-2)}
html.porcelain .mod-badge.free{border-color:var(--ok);color:var(--ok);background:var(--ok-subtle)}

/* ---- dải đêm mở bài (.dai-dem) — MỘT section night full-bleed ----
   Bìa + ba lớp + lễ B5 là một ĐOẠN đêm liền mạch tràn hết chiều ngang
   viewport, không phải ba thẻ navy rời trên nền giấy. Breakout khỏi cột
   680px bằng margin 50%−50vw; overflow-x:clip trên html để nửa pixel
   scrollbar của 100vw không sinh cuộn ngang. */
html.porcelain{overflow-x:clip}
html.porcelain .dai-dem{
  position:relative;overflow:hidden;color:var(--text);
  width:100vw;margin:0 calc(50% - 50vw) var(--s-7);
  background:
    radial-gradient(900px 520px at 50% 0%, var(--accent-soft), transparent 62%),
    linear-gradient(175deg,
      color-mix(in oklab,var(--bg),var(--text) 4%), var(--bg) 45%, var(--bg2))}
/* dải ghép đôi — cùng hệ đêm với chrome, full-bleed, KHÔNG dính (Duc 09/08).
   _legacy() alias .night{--brand:var(--text)} nên không dùng --brand làm nền
   ở đây — khai thẳng bg2. Ruột canh giữa theo cột bài 680px. */
html.porcelain .gd-dai{
  position:static;top:auto;z-index:auto;
  width:100vw;margin:0 calc(50% - 50vw);
  padding:10px max(var(--gutter),calc(50vw - 340px));
  background:var(--bg2);color:var(--text);
  border-bottom:var(--bw-1) solid var(--line);
  --accent-dao:var(--accent-text)}
html.porcelain .gd-dai .gd-dai-nut{color:var(--bg2)}
/* sao chỉ rắc vùng trời phía trên — kéo dài hết dải là sao bị scale to */
html.porcelain .dai-dem > .stars{
  position:absolute;inset:0 0 auto;width:100%;height:clamp(420px,60vw,560px);
  pointer-events:none;fill:var(--text)}
html.porcelain .dai-dem-in{
  position:relative;max-width:680px;margin:0 auto;padding:0 var(--gutter)}
/* khối bên trong dải: bỏ nền/bo góc/đổ bóng riêng, ngăn nhau bằng hairline */
html.porcelain .dai-dem .screen-cover.night{
  background:none;border-radius:0;box-shadow:none;
  margin:0;padding:clamp(48px,7vw,80px) 0 var(--s-7)}
html.porcelain .dai-dem .bl{
  background:transparent;border-radius:0;box-shadow:none;
  margin:0;padding:var(--s-6) 0;border-top:var(--bw-1) solid var(--line)}
html.porcelain .dai-dem .bl:last-child{
  padding-bottom:clamp(48px,7vw,72px)}
html.porcelain .dai-dem .md.md-night{
  background:none;margin:0;border-top:var(--bw-1) solid var(--line);
  padding:var(--s-7) 0 var(--s-6)}

/* ---- bìa bài (screen-cover) — A6 v4: BÌA ĐÊM đúng nghĩa ----
   Phần tử mang zone class `night` (spa_assets) nên mọi var() ở đây là token
   ĐÊM của tokens.css: --bg nền đêm, --accent brass, --text-2 dim. Không pha
   màu tay — đổi token là bìa đổi theo. Glow brass + nền sao seed như mockup
   starsteller-a6-sample.html. */
html.porcelain .screen-cover.night{
  margin:0 calc(-1 * var(--gutter)) var(--s-7);
  padding:clamp(56px,8vw,88px) var(--gutter);
  color:var(--text);border-radius:0;position:relative;overflow:hidden;
  text-align:center;
  background:
    radial-gradient(700px 420px at 50% 20%, var(--accent-soft), transparent 62%),
    linear-gradient(168deg, color-mix(in oklab,var(--bg),var(--text) 5%), var(--bg) 52%, var(--bg2))}
/* bìa không còn bo góc/margin desktop riêng — nó là một ĐOẠN của dải đêm
   full-bleed, mọi khổ màn hình như nhau. */
html.porcelain .screen-cover .stars{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:var(--text)}
html.porcelain .screen-cover .cover-in{position:relative}
html.porcelain .screen-cover .cover-eyebrow,html.porcelain .screen-cover .kicker{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--text-2);text-transform:none}
html.porcelain .screen-cover .h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-4);line-height:var(--lh-tight);letter-spacing:-.015em;
  text-transform:none;color:var(--text);margin:var(--s-3) auto 0;
  max-width:22ch;text-wrap:pretty}
html.porcelain .screen-cover .h1 em{font-style:normal;color:var(--accent-text)}
html.porcelain .screen-cover .cover-name{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-2);line-height:var(--lh-tight);letter-spacing:-.015em;
  text-transform:none;color:var(--text);margin:var(--s-4) auto 0;text-wrap:pretty}
html.porcelain .screen-cover .cover-meta{
  font-family:var(--font-mono);font-size:var(--fs-1);line-height:var(--lh-loose);
  letter-spacing:var(--ls-label);color:var(--text-2);margin-top:var(--s-2)}
html.porcelain .screen-cover .ct-gz{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  text-transform:none;color:var(--text)}
html.porcelain .screen-cover .ct-lbl{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  text-transform:none;color:var(--text-2)}
/* Bìa là ĐẢO ĐÊM trong zone giấy — nhờ class night, --text/--text-2 ở đây đã
   là kem/dim đọc được trên navy (bài học tương phản 3,39 hồi 09/08: đừng bao
   giờ lấy token giấy đặt lên bìa). Ba dấu · giữa các mảnh cần khoảng thở. */
html.porcelain .screen-cover .cover-foot{
  font-family:var(--font-mono);font-size:var(--fs-1);margin-top:var(--s-5);
  padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1) var(--s-3);
  color:var(--text-2)}
/* rule brass dưới meta — điểm neo A6 */
html.porcelain .screen-cover .cover-meta::after,
html.porcelain .screen-cover .cover-name + .cover-meta::after{
  content:"";display:block;width:64px;height:2px;margin:var(--s-5) auto 0;
  background:var(--accent)}
html.porcelain .screen-cover .cover-chart{
  margin-top:var(--s-4);justify-items:center;text-align:center}

/* ---- ba lớp (.bl) — khối đảo trên sứ: text-inv, không Son trên navy ---- */
html.porcelain .bl{
  background:var(--bg);
  color:var(--text);border:0;border-radius:var(--r-3);
  padding:var(--s-5) var(--s-4) var(--s-4);margin:0 0 var(--s-6)}
html.porcelain .bl::before{display:none}
html.porcelain .bl-kick{color:var(--text-2);letter-spacing:var(--ls-label);text-transform:none}
html.porcelain .bl-so{color:var(--accent-text)}
html.porcelain .bl-nhan{color:var(--text-2);text-transform:none;letter-spacing:var(--ls-label)}
html.porcelain .bl-ten{color:var(--text);text-transform:none;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-1) var(--s-3)}
html.porcelain .bl-ten svg{color:var(--accent)}
html.porcelain .bl-ten .bl-phu{margin:0;flex:none;font-weight:var(--fw-regular);
  letter-spacing:var(--ls-label);text-transform:none}
html.porcelain .bl-phu,html.porcelain .bl-o p{color:var(--text-2)}
html.porcelain .bl-o{border-top-color:var(--line)}
html.porcelain .bl-chot{border-top-color:var(--line);color:var(--accent-text);font-style:normal}
html.porcelain .hcc-ds a{
  border:0!important;border-bottom:var(--bw-1) solid var(--line)!important;
  border-radius:0!important;background:transparent!important;padding:var(--s-3) 0!important}
html.porcelain .hcc-ds a:last-child{border-bottom:0!important}
html.porcelain .hcc-ds a:hover{border-bottom-color:var(--accent)!important}
html.porcelain .hcc-so{font-size:var(--fs-1);color:var(--text-3);font-weight:var(--fw-regular)}
html.porcelain .hcc-kick{color:var(--accent);text-transform:none;letter-spacing:.1em}
html.porcelain .hcc h2{color:var(--text);text-transform:none}

/* ---- độ tin cậy giờ sinh (B6b) ----
   Palette porcelain: ok = tin cậy đủ · warn = thiếu/ước lượng giờ.
   Không dùng --info-subtle (xanh icon) — lệch mực–son của zone giấy. */
html.porcelain .tq{
  background:var(--ok-subtle);border:var(--bw-1) solid var(--line);
  border-top:var(--bw-2) solid var(--ok);border-radius:var(--r-3);
  padding:var(--s-4);margin:var(--s-4) 0}
html.porcelain .tq-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--ok);text-transform:none}
html.porcelain .tq-nhan{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  color:var(--text);text-transform:none;margin-top:var(--s-2)}
html.porcelain .tq-thieu{
  background:var(--warn-subtle);border-top-color:var(--warn)}
html.porcelain .tq-thieu .tq-k{color:var(--warn)}
html.porcelain .tq .note,html.porcelain .tq .cta-solar,html.porcelain .tq-moc{
  font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2)}
html.porcelain .tq .moc-list{font-size:var(--fs-2);color:var(--text)}

/* ---- đầu phần + mục — nhịp đọc A6 (starsteller-a6-sample.html) ----
   Gạch đáy 2px MỰC (--brand) dưới đầu phần, số mục Son, tiêu đề mục là chữ
   body semibold cùng cỡ thân bài — không phải display heading. */
html.porcelain .mod-head{
  margin:var(--s-8) 0 var(--s-5);padding-bottom:var(--s-3);
  border-bottom:var(--bw-3) solid var(--brand)}
html.porcelain .mod-head-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-3)}
html.porcelain .mod-num{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--accent);text-transform:none}
html.porcelain .mod-title{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  letter-spacing:-.01em;text-transform:none;color:var(--text);margin:var(--s-1) 0 0}
html.porcelain .mod-sub{font-size:var(--fs-1);color:var(--text-2);margin:var(--s-1) 0 0;text-wrap:pretty}
html.porcelain section.muc{
  content-visibility:auto;contain-intrinsic-size:auto 320px;
  padding:var(--s-5) 0;border-top:var(--bw-1) solid var(--line-soft);margin-top:0}
html.porcelain section.muc > h3{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-family:var(--font-body);font-size:var(--fs-2);
  font-weight:var(--fw-semibold);text-transform:none;margin:0 0 var(--s-3);line-height:var(--lh-tight)}
html.porcelain section.muc > h3 .mnum{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--accent);padding:0;flex:none}
html.porcelain .muc-body p{
  margin:0 0 var(--s-3);line-height:var(--lh-loose);font-size:var(--fs-2);
  text-align:left;text-wrap:pretty;color:var(--text)}
html.porcelain .muc-khoa{cursor:pointer;border-radius:var(--r-2)}
html.porcelain .muc-khoa:hover{background:color-mix(in oklab,var(--surface),var(--text) 2%)}
html.porcelain .muc-khoa:active{background:color-mix(in oklab,var(--surface),var(--text) 4%)}
html.porcelain .muc-khoa .muc-body{color:var(--text-2)}
html.porcelain .muc-khoa .muc-body p{color:var(--text-2)}

/* ---- khoá trả tiền (B6: fade + skeleton, không blur) ----
   Skeleton là GỢI Ý còn chữ, không phải nội dung — mỗi mục khoá trước đây vẽ
   ~5 đoạn gạch xám (2 trên + 3 dưới) × ~90 mục làm cả trang xám xịt và dài
   gấp rưỡi. B6 chỉ hé 1–2 đoạn rồi fade. Cắt bằng CSS, DOM giữ nguyên. */
html.porcelain .khoa{margin-top:var(--s-3)}
html.porcelain .khoa .kd{margin-bottom:var(--s-3)}
html.porcelain .khoa i{
  display:block;height:9px;border-radius:var(--r-full);margin-bottom:var(--s-2);
  background:color-mix(in oklab,var(--text-2) var(--a-2), transparent)}
html.porcelain .khoa > .kd:nth-child(n+3):not(:has(.kls)){display:none}
html.porcelain .khoa .kls{display:flex;gap:var(--s-2);align-items:center;margin-bottom:var(--s-2)}
html.porcelain .khoa .kls u{
  flex:none;width:9px;height:9px;
  border:var(--bw-2) solid color-mix(in oklab,var(--text-2) var(--a-4), transparent);
  border-radius:var(--r-full)}
html.porcelain .khoa-duoi{
  margin-top:var(--s-3);position:relative;
  -webkit-mask-image:linear-gradient(to bottom,
    color-mix(in oklab,var(--text) 100%, transparent),
    color-mix(in oklab,var(--text) 30%, transparent) 45%,
    transparent 85%);
  mask-image:linear-gradient(to bottom,
    color-mix(in oklab,var(--text) 100%, transparent),
    color-mix(in oklab,var(--text) 30%, transparent) 45%,
    transparent 85%)}
html.porcelain .khoa-duoi > .kd:nth-child(n+2){display:none}
html.porcelain .cta-line{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0}
html.porcelain .cta-line::before,html.porcelain .cta-line::after{
  content:"";flex:1;height:1px;background:var(--line)}
/* nút giữa bài = cùng ngôn ngữ btn-p: Son solid, gọn */
html.porcelain .cta-mo{
  flex:none;border:0;border-radius:var(--r-3);cursor:pointer;
  font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-1);
  letter-spacing:.02em;text-transform:none;padding:12px var(--s-5);min-height:44px;
  color:var(--text-inv);background:var(--accent);
  transition:background var(--dur-base) var(--ease)}
html.porcelain .cta-mo:hover{background:var(--accent-hover);opacity:1}

/* ---- mục lục + CTA cuối ---- */
html.porcelain .dan-ml{text-align:center;padding:var(--s-7) 0 var(--s-5)}
html.porcelain .dan-ml-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.14em;
  color:var(--text-2);text-transform:none}
html.porcelain .dan-ml h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:var(--fs-3);line-height:var(--lh-tight);letter-spacing:-.01em;
  text-transform:none;margin:var(--s-3) auto 0;max-width:20ch;text-wrap:pretty}
html.porcelain .dan-ml p{
  font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2);
  max-width:52ch;margin:var(--s-4) auto 0;text-wrap:pretty}
html.porcelain .ml100{
  background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-4);padding:var(--s-5);margin-bottom:var(--s-5);box-shadow:var(--sh-1)}
html.porcelain .ml100-kick{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none}
html.porcelain .ml100-h > span:not(.mui){
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.1em;
  color:var(--accent);text-transform:none}
html.porcelain .ml100 h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  text-transform:none;line-height:var(--lh-tight);letter-spacing:-.01em}
/* CTA cuối = khối "hết trích" của A6: gạch mực 2px trên, KHÔNG đóng thẻ card
   — cùng ngôn ngữ với mod-head để người đọc hiểu đây là một "phần" của bài. */
html.porcelain .cta-cuoi{
  margin-top:var(--s-8);border:0;border-top:var(--bw-3) solid var(--brand);
  border-radius:0;padding:var(--s-6) 0 0;text-align:left;
  background:transparent;color:var(--text);box-shadow:none}
html.porcelain .cta-cuoi h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  text-transform:none;line-height:var(--lh-tight);margin:0;color:var(--text);text-wrap:pretty}
html.porcelain .cta-cuoi p{
  font-size:var(--fs-2);color:var(--text-2);max-width:58ch;margin:var(--s-3) 0 0;text-wrap:pretty}
html.porcelain .cta-cuoi .nho{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:var(--ls-label);
  color:var(--text-2);text-transform:none;margin-top:var(--s-2)}
html.porcelain .cta-cuoi .btn[data-mo],html.porcelain .cta-cuoi .unlock{
  margin-top:var(--s-5);align-self:flex-start}
html.porcelain .cta-cuoi{display:flex;flex-direction:column;align-items:flex-start}
/* pull — hairline trên/dưới, KHÔNG nền, không viền trái accent (gate 17, A6) */
html.porcelain .pull{
  margin:var(--s-4) 0 0;padding:var(--s-3) 0;
  border-top:var(--bw-1) solid var(--line);border-bottom:var(--bw-1) solid var(--line);
  text-align:left;font-weight:var(--fw-semibold);font-size:var(--fs-2);
  font-family:var(--font-body);letter-spacing:0;text-wrap:pretty;
  background:transparent;border-radius:0}

/* ---- overlay + sheet (B13/B14) ---- */
/* Tấm phủ phải TRONG MỜ. Bản cũ trộn với `--bg` (đục) nên nó là một tấm kín
   đặc: mở checkout hay màn exit-intent là bài đọc trước biến mất hoàn toàn.
   Mà chính bài đó mới là thứ khách vừa nhận và là lý do họ cân nhắc trả tiền —
   che nó đi là bỏ mất đòn bẩy mạnh nhất đang có trên màn hình.
   Duc: "background đằng sau phải là bài paywall, giảm occupancy để nhìn được". */
html.porcelain .co-lop{
  background:color-mix(in oklab, var(--surface-inv) 62%, transparent);
  backdrop-filter:blur(2px);
  animation:none!important;
  overflow:hidden;overscroll-behavior:none;touch-action:none}
html.porcelain .co-lop .co{
  touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* HÌNH HỌC GIỮ ĐÚNG BẢN GỐC ĐÃ PORT — chỉ đổi MÀU.
   `CSS_CHECKOUT` của starsteller là bản port 1:1 từ dự án anh em: tấm phủ dán đáy
   (`align-items:flex-end`), khổ `min(880px,100%)` ở MỌI bề ngang, viền trên
   3px màu nhấn, không bo góc, không canh giữa. Bên kia không có một media
   query nào đổi khổ `.co` — chỉ siết đệm ở ≤640px.
   Lớp porcelain trước đây ghi đè cả hình học: ép `max-width:460px` cho mọi
   khổ (trên 1440px thành cột hẹp lọt giữa nền xám, vùng cuộn trong bị cắt),
   bỏ viền nhấn, bo góc và canh giữa thành hộp thoại. Đó là chỗ lệch với bản
   Duc muốn. Nay chỉ còn phần MÀU; hình học trả về quy tắc gốc. */
html.porcelain .co{
  background:var(--surface);color:var(--text);font-family:var(--font-body);
  box-shadow:var(--sh-3);animation:none!important;border-top-color:var(--brand)}
html.porcelain .co-top{
  position:sticky;top:0;background:var(--surface);color:var(--text);
  padding:var(--s-4) var(--gutter);border-bottom:var(--bw-1) solid var(--line);
  gap:var(--s-3)}
html.porcelain .co-top .t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;text-transform:none;color:var(--text)}
html.porcelain .co-top .p{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);margin-top:var(--s-1)}
/* NÚT ĐÓNG PHẢI NHÌN THẤY ĐƯỢC. `font-size:0` giấu ký tự `&times;` trong
   markup — chắc là để thay bằng icon, mà icon thì chưa bao giờ được thêm. Kết
   quả: một ô xám trống ở góc màn exit-intent, khách không biết đóng bằng cách
   nào. Vẽ dấu X bằng hai gạch pseudo-element: không phụ thuộc font (ba font
   của repo chỉ nhúng subset latin+vietnamese) và luôn sắc nét. */
html.porcelain .co-x{
  position:relative;color:var(--text-2);font-size:0;width:32px;height:32px;
  display:grid;place-items:center;border-radius:var(--r-2);line-height:1;
  background:none;border:0;cursor:pointer}
html.porcelain .co-x::before,html.porcelain .co-x::after{
  content:"";position:absolute;width:16px;height:1.5px;border-radius:1px;
  background:currentColor}
html.porcelain .co-x::before{transform:rotate(45deg)}
html.porcelain .co-x::after{transform:rotate(-45deg)}
html.porcelain .co-x:hover{color:var(--text);background:color-mix(in oklab,var(--surface),var(--text) var(--state-hover))}
html.porcelain .co-body{padding:var(--s-4) var(--gutter) var(--s-5)}
html.porcelain .co-lop .co{
  display:flex;flex-direction:column;
  font-family:var(--font-body);font-size:var(--fs-2);line-height:var(--lh-base);
  font-weight:var(--fw-regular);font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased}
html.porcelain .co-lop .co-body{flex:1}

/* R126b — TYPE CONTRACT (checkout popover · porcelain §5 + B13)
   body      body 400  fs-2  text / text-2
   label     mono 400  fs-1  text-2 · ls .04em
   title     display 600 fs-2  text (sheet + gói chính)
   subhead   body 600  fs-2  text (mục con, FAQ, tick)
   price     mono 600  fs-3  brand (giá nổi) · text (giá dòng)
   strike    mono 400  fs-1  text-3
   CTA       display 600 fs-2  text-inv
   link      body 600  fs-1  brand */
html.porcelain .co-lop .co-top .t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);letter-spacing:-.01em;text-transform:none;color:var(--text)}
html.porcelain .co-lop .co-top .p,
html.porcelain .co-lop .co-body .lb,
html.porcelain .co-lop .ck2-h,
html.porcelain .co-lop .of-nhan,
html.porcelain .co-lop .of-meta,
html.porcelain .co-lop .of-gia i,
html.porcelain .co-lop .of-gia s,
html.porcelain .co-lop .ck2-qua-dai .n b,
html.porcelain .co-lop .ck2-qua-dai .gia,
html.porcelain .co-lop .ck2-qua .bia,
html.porcelain .co-lop .ck2-qua .p s,
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k,
html.porcelain .co-lop .co-chan .co-tin,
html.porcelain .co-lop .ud-t,
html.porcelain .co-lop .ud-p{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:.04em;text-transform:none}
html.porcelain .co-lop .co-top .p,
html.porcelain .co-lop .of-nhan,
html.porcelain .co-lop .of-meta,
html.porcelain .co-lop .ck2-qua-dai .n b,
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k{color:var(--text-2)}
html.porcelain .co-lop .of-gia s,
html.porcelain .co-lop .ck2-qua .p s{color:var(--text-3)}
html.porcelain .co-lop .of-ten,
html.porcelain .co-lop .pv-h{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .co-lop .pv-h{font-size:var(--fs-3);margin:var(--s-1) 0 var(--s-3)}
html.porcelain .co-lop .ck2-qua .t,
html.porcelain .co-lop .tick b,
html.porcelain .co-lop .bd-o b,
html.porcelain .co-lop .faq summary,
html.porcelain .co-lop .co-bump b,
html.porcelain .co-lop .ck2-tiep b,
html.porcelain .co-lop .email-phien b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .co-lop .of-gia b,
html.porcelain .co-lop .ck2-gia .hi b,
html.porcelain .co-lop .of-tinh b.hi,
html.porcelain .co-lop .co-chan .tong b,
html.porcelain .co-lop .co-chan .tong #co-tong{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:0;color:var(--brand)}
html.porcelain .co-lop .co-chan .tong b,
html.porcelain .co-lop .co-chan .tong #co-tong{color:var(--text)}
html.porcelain .co-lop .ck2-qua .p u,
html.porcelain .co-lop .of-tinh b,
html.porcelain .co-lop .ck2-qua-dai .gia b{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);letter-spacing:0;color:var(--text)}
html.porcelain .co-lop .of-tinh span,
html.porcelain .co-lop .ck2-gia > div,
html.porcelain .co-lop .ck2-bd > div,
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .ck2-tiep,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .bd-o span,
html.porcelain .co-lop .sl-o span,
html.porcelain .co-lop .pv-cap,
html.porcelain .co-lop .tick span{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  line-height:var(--lh-base);text-transform:none}
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .ck2-bd > div,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .bd-o span,
html.porcelain .co-lop .sl-o span,
html.porcelain .co-lop .pv-cap,
html.porcelain .co-lop .tick span{color:var(--text-2)}
html.porcelain .co-lop .co-chan .btn-lg,
html.porcelain .co-lop .co-chan .btn,
html.porcelain .co-lop .co-chan #co-dat{
  font-family:var(--font-display);font-weight:var(--fw-medium);font-size:var(--fs-2);
  letter-spacing:0;text-transform:none}
html.porcelain .co-lop .pv-link,
html.porcelain .co-lop .ck2-xem,
html.porcelain .co-lop .email-phien .lk{
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-1);
  letter-spacing:0;text-transform:none;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px}
html.porcelain .co-lop .sl-o b{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--brand)}
html.porcelain .co-lop .sl-o b em{
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:.04em;text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .of-phu,
html.porcelain .co-lop .tick-khoa span{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  line-height:var(--lh-base);text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .tick-khoa b{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-strong);
  text-transform:none;color:var(--text-2)}

/* nhãn mono — sentence case, tracking ≤.06em (mockup B13) */
html.porcelain .co-body .lb,html.porcelain .ck2-h{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);text-transform:none}
html.porcelain .ck2-h{
  border-top:var(--bw-1) solid var(--line);padding-top:var(--s-4);
  margin:var(--s-4) 0 var(--s-3)}

/* R126e — DỄ ĐỌC (giữ nguyên markup + hình học sheet R80)
   1. Đo dòng: sheet 880px nhưng chữ chạy hết khổ là dòng 100+ ký tự —
      mắt lạc đầu dòng. Mọi đoạn văn dài kẹp 62ch (§ đo dòng DS).
   2. Nhịp section: các khối lớn cách nhau ĐỀU s-6, mỗi khối mở đầu bằng
      một nhãn mono + hairline — mắt chunk được trang thành từng "chương".
   3. Một điểm dừng giá: ck2-gia thành hộp nền surface-2 — chỗ duy nhất
      trong thẻ mà mắt phải dừng trước khi bấm CTA.
   4. Nhiễu phụ (meta, chip, trust line) lùi xuống text-3/fs-1. */
html.porcelain .co-lop .ck2-tiep,
html.porcelain .co-lop .of-tom,
html.porcelain .co-lop .of-phu,
html.porcelain .co-lop .ck2-qua .m,
html.porcelain .co-lop .of-ds li,
html.porcelain .co-lop .faq p,
html.porcelain .co-lop .pv-cap{max-width:62ch}
/* nhịp section đều — một hằng số cho mọi khối lớn trong co-body */
html.porcelain .co-lop .ck2-tiep{margin-bottom:var(--s-5)}
html.porcelain .co-lop .of-nhom{margin-bottom:var(--s-5)}
html.porcelain .co-lop .ck2-bd{margin:var(--s-5) 0}
html.porcelain .co-lop .ck2-h{
  padding-top:var(--s-6);margin:var(--s-6) 0 var(--s-4)}
html.porcelain .co-lop .pv,
html.porcelain .co-lop .bd,
html.porcelain .co-lop .kb{margin:0 0 var(--s-6)}
html.porcelain .co-lop .kb-k,
html.porcelain .co-lop .pv-k{
  display:block;border-top:var(--bw-1) solid var(--line);border-bottom:0;
  padding-top:var(--s-6);padding-bottom:0;margin-bottom:var(--s-4)}
/* thang bậc trong đầu thẻ gói: nhãn mờ → TÊN → tóm — meta/chip lùi hẳn */
html.porcelain .co-lop .of-ten{margin-top:var(--s-1)}
html.porcelain .co-lop .of-tom{margin-top:var(--s-2)}
html.porcelain .co-lop .of-meta{color:var(--text-3);margin-top:var(--s-2)}
html.porcelain .co-lop .of-chip{
  background:none;border:0;padding:0;margin-top:var(--s-2);
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
/* điểm dừng giá — hộp chốt duy nhất trong thẻ */
html.porcelain .co-lop .ck2-gia{
  background:var(--surface-2);border:0;border-radius:var(--r-3);
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4)}
html.porcelain .co-lop .of-tinh{
  background:var(--surface-2);border:0;border-radius:var(--r-3);
  margin-top:var(--s-4);padding:var(--s-3) var(--s-4)}
/* danh sách quà: cột số hẹp, giá 0đ dịu — nội dung tên quà là chính */
html.porcelain .co-lop .ck2-qua .p u{color:var(--text-2);font-weight:var(--fw-regular)}
html.porcelain .co-lop .ck2-qua-dai{margin-top:var(--s-5)}
/* footer: trust line lùi xuống — CTA và tổng tiền là hai thứ duy nhất đậm */
html.porcelain .co-lop .co-chan .co-tin{
  color:var(--text-3);border:0;padding:0;margin-top:var(--s-2);text-align:center}
/* tick chọn phần lẻ: dòng tổng là feedback — cho nó rõ */
html.porcelain .co-lop .tick-tong{
  font-family:var(--font-mono);font-size:var(--fs-2);color:var(--text);
  margin-top:var(--s-3)}

/* đơn + ưu đãi */
html.porcelain .co-tin{
  flex:none;text-align:left;border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  padding:var(--s-3) var(--s-4);margin-top:var(--s-2);
  font-family:inherit;font-size:var(--fs-2);letter-spacing:0;text-transform:none;color:var(--text)}
html.porcelain .uu-dai{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  background:var(--ok-subtle);border:0;border-radius:var(--r-3);
  padding:var(--s-2) var(--s-4);margin:var(--s-2) 0 var(--s-3)}
html.porcelain .ud-t{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--ok);text-transform:none}
html.porcelain .ud-p{
  font-family:var(--font-body);font-size:var(--fs-1);letter-spacing:0;
  color:var(--text-2);text-transform:none}
html.porcelain .ud-so,html.porcelain .ud-thanh{display:none}

/* bump + email */
html.porcelain .co-bump{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:var(--s-3) var(--s-4);margin-top:var(--s-4);cursor:pointer}
html.porcelain .co-bump:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .co-bump input{accent-color:var(--brand)}
html.porcelain .co-bump b{
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .co-bump span span{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .email-phien{
  font-size:var(--fs-2);padding:var(--s-2) var(--s-3);
  background:var(--surface);border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .email-phien .lk,html.porcelain .lk{
  color:var(--brand);font-family:inherit;font-size:var(--fs-1);
  text-decoration:underline;text-underline-offset:3px}
html.porcelain .co-chan .in,html.porcelain .co-body .in{
  width:100%;box-sizing:border-box;border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);background:var(--surface);color:var(--text);
  font-family:var(--font-mono);font-size:var(--fs-2);padding:var(--s-3)}
html.porcelain .co-chan .in::placeholder{color:var(--text-3)}

/* footer sticky — nút pay = brand (mockup .btn-pay) */
html.porcelain .co-chan{
  position:sticky;bottom:0;z-index:6;background:var(--surface);
  border-top:var(--bw-1) solid var(--line);padding:var(--s-3) var(--gutter) var(--s-4);
  flex-direction:column;align-items:stretch;gap:var(--s-2)}
html.porcelain .co-chan .tong{
  display:flex;justify-content:space-between;align-items:baseline;flex:none;width:100%}
html.porcelain .co-chan .tong span,html.porcelain .co-chan .tong #co-tk{
  font-size:var(--fs-2);color:var(--text-2);letter-spacing:0;text-transform:none}
html.porcelain .co-chan .tong b,html.porcelain .co-chan .tong #co-tong{
  font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-3);color:var(--text)}
html.porcelain .co-chan .btn-lg,html.porcelain .co-chan .btn,html.porcelain .co-chan #co-dat{
  width:100%;margin-top:var(--s-2);padding:var(--s-4);font-size:var(--fs-2);
  font-family:var(--font-display);font-weight:var(--fw-medium);
  letter-spacing:.02em;text-transform:none;border-radius:var(--r-4);
  background:var(--brand);color:var(--text-inv);border:0}
html.porcelain .co-chan .btn-lg:hover,html.porcelain .co-chan .btn:hover,html.porcelain .co-chan #co-dat:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));color:var(--text-inv);
  filter:none;opacity:1}
html.porcelain .co-chan .co-tin{
  display:block;text-align:center;font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none;margin-top:var(--s-1)}
html.porcelain .co-dem{color:var(--accent)}

/* ck2 offer cards — R126 calm */
html.porcelain .ck2-tiep{
  background:var(--info-subtle);border:var(--bw-1) solid var(--line);color:var(--text);
  font-size:var(--fs-2);line-height:var(--lh-base);padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-3);border-radius:var(--r-3)}
html.porcelain .ck2-tiep b{font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .ck2-gia{
  border-top:var(--bw-1) solid var(--line);margin-top:var(--s-3);padding-top:var(--s-3);
  display:grid;gap:var(--s-1)}
html.porcelain .ck2-gia > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  font-size:var(--fs-2);color:var(--text)}
html.porcelain .ck2-gia s{color:var(--text-3)}
html.porcelain .ck2-gia .hi b{
  font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);color:var(--brand)}
html.porcelain .ck2-gia .re b{color:var(--ok);font-family:var(--font-mono);font-weight:var(--fw-medium)}
html.porcelain .ck2-qua-dai{
  display:flex;align-items:baseline;gap:var(--s-3);margin-top:var(--s-4);
  padding-bottom:var(--s-2);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .ck2-qua-dai .n b{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);font-weight:var(--fw-medium)}
html.porcelain .ck2-qua-dai .gia{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:0;
  text-transform:none;color:var(--text-2)}
html.porcelain .ck2-qua-dai .gia b{
  font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-bold);color:var(--text)}
html.porcelain .ck2-qua-hop{padding:0}
html.porcelain .ck2-qua{
  gap:var(--s-3);align-items:flex-start;padding:var(--s-3) 0;
  border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .ck2-qua:last-child{border-bottom:0;padding-bottom:var(--s-1)}
html.porcelain .ck2-qua .bia{
  flex:none;width:1.5em;font-family:var(--font-mono);font-size:var(--fs-1);
  font-weight:var(--fw-medium);color:var(--text-3);letter-spacing:0;margin-top:2px}
html.porcelain .ck2-qua .t{
  font-family:var(--font-body);font-weight:var(--fw-strong);
  font-size:var(--fs-2);line-height:var(--lh-tight);text-transform:none;color:var(--text)}
html.porcelain .ck2-qua .m{
  font-size:var(--fs-1);line-height:var(--lh-base);color:var(--text-2);margin-top:var(--s-1)}
html.porcelain .ck2-qua .rieng{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-2);
  background:var(--surface-2);border:var(--bw-1) solid var(--line);padding:var(--s-1) var(--s-2);
  margin-top:var(--s-2);display:inline-block;text-transform:none}
html.porcelain .ck2-qua .p{text-align:right;white-space:nowrap}
html.porcelain .ck2-qua .p s{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .ck2-qua .p u{
  display:block;font-family:var(--font-mono);font-size:var(--fs-2);font-weight:var(--fw-bold);
  color:var(--text);text-decoration:none}
html.porcelain .ck2-xem{
  color:var(--brand);font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px;
  margin-top:var(--s-2);padding:0;background:none;border:0;cursor:pointer}
html.porcelain .ck2-bd{display:grid;gap:var(--s-2);margin:var(--s-4) 0}
html.porcelain .ck2-bd > div{
  display:flex;gap:var(--s-2);font-size:var(--fs-2);line-height:var(--lh-base);color:var(--text-2)}
html.porcelain .ck2-bd i{
  font-style:normal;font-weight:var(--fw-medium);color:var(--text-3);flex:none}

/* gói accordion trong checkout — R126 · nền theo thang sáng R126f (css_cards chốt) */
html.porcelain .of-nhom{display:grid;gap:var(--s-3);margin-bottom:var(--s-5)}
html.porcelain .of-nhom .of{
  border:var(--bw-1) solid var(--line);background:var(--surface-2);
  border-radius:var(--r-3);box-shadow:none!important;overflow:hidden}
html.porcelain .of-nhom .of:hover{border-color:var(--line-strong)}
html.porcelain .of-nhom .of[aria-pressed="true"]{
  background:var(--surface);
  border:var(--bw-2) solid var(--line-strong);box-shadow:none!important}
html.porcelain .of.of-uu{
  background:color-mix(in oklab,var(--surface),var(--brand) 4%);
  border:var(--bw-2) solid var(--line-strong)!important;box-shadow:none!important}
html.porcelain .of.of-uu[aria-pressed="true"]{border-color:var(--brand)!important}
html.porcelain .of-tag{
  position:absolute;top:0;right:0;z-index:1;
  background:var(--brand);color:var(--text-inv);
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:.04em;text-transform:none;padding:var(--s-1) var(--s-3)}
html.porcelain .of-tag.gold{
  background:var(--ok-subtle);color:var(--ok);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .of-h{
  gap:var(--s-3);padding:var(--s-4);align-items:flex-start;
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html.porcelain .of-tag + .of-h{padding-top:calc(var(--s-4) + var(--s-3))}
html.porcelain .of-nhan{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .of-ten{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:var(--lh-tight);text-transform:none;color:var(--text);margin-top:var(--s-1)}
html.porcelain .of.of-uu .of-ten{font-size:var(--fs-2)}
html.porcelain .of-tom{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  margin-top:var(--s-2);max-width:none}
html.porcelain .of-meta{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3);margin-top:var(--s-2);
  letter-spacing:0;text-transform:none}
html.porcelain .of-chip{
  display:inline-block!important;margin-top:var(--s-2);
  background:var(--surface-2);color:var(--text-2);border:var(--bw-1) solid var(--line);
  font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-regular);
  letter-spacing:0;text-transform:none;padding:var(--s-1) var(--s-2);border-radius:var(--r-2)}
html.porcelain .of-gia{text-align:right;white-space:nowrap}
html.porcelain .of-gia s{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3);
  text-decoration:line-through}
html.porcelain .of-gia b{
  display:block;font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);
  color:var(--brand);line-height:var(--lh-tight);letter-spacing:0}
html.porcelain .of-gia i{
  display:block;font-family:var(--font-mono);font-size:var(--fs-1);font-style:normal;
  letter-spacing:0;text-transform:none;color:var(--text-2);margin-top:var(--s-1)}
html.porcelain .of-mui{
  flex:none;width:28px;height:28px;border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  display:flex;align-items:center;justify-content:center}
html.porcelain .of-mui svg{width:14px;height:14px;stroke:var(--text-2)}
html.porcelain .of[aria-pressed="true"] .of-mui{
  background:var(--brand);border-color:var(--brand);transform:rotate(180deg)}
html.porcelain .of[aria-pressed="true"] .of-mui svg{stroke:var(--text-inv)}
html.porcelain .of-mo{display:none;padding:0 var(--s-4) var(--s-4)}
html.porcelain .of[aria-pressed="true"] .of-mo{display:block;animation:none!important}
html.porcelain .of-ds{list-style:none;margin:0;padding:0}
html.porcelain .of-ds li{
  display:flex;gap:var(--s-2);font-size:var(--fs-2);color:var(--text-2);
  padding:var(--s-1) 0;line-height:var(--lh-base)}
html.porcelain .of-ds li::before{
  content:"";flex:none;width:4px;height:4px;margin-top:.55em;
  background:var(--text-3);border-radius:var(--r-full);border:0}
html.porcelain .co-lop .pv-link{
  background:none;border:0;padding:0;margin-top:var(--s-3);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-medium);
  letter-spacing:0;text-transform:none;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;display:block;text-align:left}
html.porcelain .co-lop .pv-link:hover{color:var(--brand-strong)}
html.porcelain .of-tinh{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line)}
html.porcelain .of-tinh div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-1) 0;font-size:var(--fs-2)}
html.porcelain .of-tinh span{color:var(--text-2)}
html.porcelain .of-tinh b{font-family:var(--font-mono);font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .of-tinh b.hi{
  font-family:var(--font-mono);font-size:var(--fs-3);font-weight:var(--fw-bold);color:var(--brand)}
html.porcelain .of-tinh .tk{
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:var(--bw-1) solid var(--line-soft)}
html.porcelain .of-tinh .tk span,html.porcelain .of-tinh .tk b{color:var(--ok);font-weight:var(--fw-medium)}
html.porcelain .tick{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-3)}
html.porcelain .tick label{
  padding:var(--s-3);border:var(--bw-1) solid var(--line);background:var(--surface);
  border-radius:var(--r-3);font-size:var(--fs-2)}
html.porcelain .tick label:hover{border-color:var(--line-strong)}
html.porcelain .tick b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .tick span{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .tick-tong{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-1);
  color:var(--text-2);letter-spacing:0;text-transform:none}

/* bằng chứng / FAQ / preview trong checkout — R126 */
html.porcelain .co-lop .pv{margin-bottom:var(--s-5)}
html.porcelain .co-lop .pv-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2)}
html.porcelain .co-lop .pv-h{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);text-transform:none;color:var(--text);margin:var(--s-1) 0 var(--s-3)}
html.porcelain .co-lop .pv-cap{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-3)}
html.porcelain .bd{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);overflow:hidden;margin-bottom:var(--s-5)}
html.porcelain .bd-o{
  background:var(--surface);padding:var(--s-3) var(--s-4);color:var(--text)}
html.porcelain .bd-o b{
  font-family:var(--font-body);font-weight:var(--fw-strong);font-size:var(--fs-2);
  text-transform:none;line-height:var(--lh-tight);color:var(--text)}
html.porcelain .bd-o span{
  display:block;font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-1)}
html.porcelain .kb{margin-bottom:var(--s-5)}
html.porcelain .kb-k{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  text-transform:none;color:var(--text-2);padding-bottom:var(--s-2);
  border-bottom:var(--bw-1) solid var(--line);margin-bottom:var(--s-3)}
html.porcelain .sl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
html.porcelain .sl-o b{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-3);
  line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--brand)}
html.porcelain .sl-o b em{
  font-style:normal;font-family:var(--font-mono);font-size:var(--fs-1);
  font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;color:var(--text-2);
  margin-left:var(--s-1)}
html.porcelain .sl-o span{
  display:block;font-size:var(--fs-1);color:var(--text-2);line-height:var(--lh-base);margin-top:var(--s-2)}
html.porcelain .faq details{border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .faq summary{
  padding:var(--s-3) 0;font-family:var(--font-body);font-weight:var(--fw-strong);
  font-size:var(--fs-2);text-transform:none;line-height:var(--lh-tight);color:var(--text)}
html.porcelain .faq summary:hover{color:var(--text-2)}
html.porcelain .faq summary i::before,html.porcelain .faq summary i::after{background:var(--text-3)}
html.porcelain .faq details[open] summary{color:var(--brand)}
html.porcelain .faq p{
  font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  padding:0 0 var(--s-3);max-width:none}
html.porcelain .co-lop .co-email{margin-top:0}
html.porcelain .co-lop .email-phien{
  font-size:var(--fs-2);padding:var(--s-2) var(--s-3);
  background:var(--surface-2);border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  color:var(--text)}
html.porcelain .co-lop .email-phien b{font-weight:var(--fw-medium)}
@media (max-width:640px){
  html.porcelain .co-lop .bd,html.porcelain .co-lop .sl{grid-template-columns:1fr}
  html.porcelain .co-lop .tick{grid-template-columns:1fr}
  html.porcelain .co-chan .tong b,html.porcelain .co-chan .tong #co-tong{font-size:var(--fs-2)}
}

/* QR (B14) — thẻ trắng, quiet zone lớn, mô-đun đậm */
html.porcelain .qr-wrap{padding:var(--s-2) 0;text-align:center}
html.porcelain .qr-box{
  width:min(280px,78vw)!important;height:auto!important;margin:0 auto;
  background:var(--surface);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-5);box-sizing:border-box}
html.porcelain .qr-box img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
  background:var(--surface)}
html.porcelain .qr-tt{
  max-width:100%;margin:var(--s-3) 0 0;font-size:var(--fs-2);text-align:left}
html.porcelain .qr-tt div{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-2) 0;border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qr-tt span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;color:var(--text-2)}
html.porcelain .qr-tt b{font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-2);color:var(--text)}
html.porcelain .qr-note{
  font-size:var(--fs-1);color:var(--text-2);font-style:normal;line-height:var(--lh-base);
  margin:var(--s-3) 0 0;text-align:left}
html.porcelain .qr-bonus{
  display:flex;gap:var(--s-2);align-items:flex-start;
  border:0;background:transparent;padding:0;margin-top:var(--s-4);
  font-size:var(--fs-1);color:var(--text-2);max-width:100%;text-align:left}
html.porcelain .qr-tay-lk{
  display:block;width:100%;margin-top:var(--s-4);border:var(--bw-1) solid var(--line);
  background:none;color:var(--brand);cursor:pointer;font-size:var(--fs-2);
  border-radius:var(--r-3);padding:var(--s-3);text-align:center}
html.porcelain .qr-tay-lk:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .qr-tay{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);
  background:var(--surface);padding:0;margin-top:var(--s-3);text-align:left}
html.porcelain .qr-tay > div{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border-bottom:var(--bw-1) solid var(--line-soft)}
html.porcelain .qr-tay > div:last-child{border-bottom:0}
html.porcelain .qr-tay span{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);width:7em;flex:none}
html.porcelain .qr-tay b{font-family:var(--font-mono);font-size:var(--fs-2);color:var(--text);font-weight:var(--fw-medium)}
html.porcelain .qr-tay .lk-copy{
  margin-left:auto;border:var(--bw-1) solid var(--line);border-radius:var(--r-2);
  background:none;color:var(--brand);cursor:pointer;font-size:var(--fs-1);padding:var(--s-1) var(--s-3)}
html.porcelain .qr-tay .lk-copy:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .qr-hotro{font-size:var(--fs-1);color:var(--text-2);margin-top:var(--s-4);text-align:left}
html.porcelain .qr-hotro a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* thành công + exit (B15/B16) — mockup ok-* */
html.porcelain .ok-wrap{padding:var(--s-5) 0;text-align:center}
html.porcelain .ok-vong{
  width:64px;height:64px;margin:0 auto;background:var(--ok-subtle);border-radius:var(--r-full);
  display:grid;place-items:center;color:var(--ok)}
html.porcelain .ok-vong svg{stroke:var(--ok);width:var(--icon-4);height:var(--icon-4)}
html.porcelain .ok-wrap h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;line-height:var(--lh-tight);color:var(--text);
  margin:var(--s-3) 0 0}
html.porcelain .ok-wrap p{
  font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  color:var(--text-2);line-height:var(--lh-base);margin:var(--s-3) auto 0;max-width:48ch}
html.porcelain .ok-buoc{
  display:flex;flex-direction:column;gap:var(--s-3);text-align:left;max-width:100%;
  margin:var(--s-5) 0 0}
html.porcelain .ok-buoc div{
  display:flex;gap:var(--s-3);align-items:flex-start;
  font-size:var(--fs-2);color:var(--text);border:var(--bw-1) solid var(--line);
  border-radius:var(--r-3);padding:var(--s-3) var(--s-4);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .ok-buoc b{
  flex:none;width:26px;height:26px;display:grid;place-items:center;
  color:var(--accent);font-family:var(--font-mono);font-size:var(--fs-1);font-weight:var(--fw-medium);
  border:var(--bw-1) solid var(--line);border-radius:var(--r-full)}

/* preview mẫu overlay */
html.porcelain .mau-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .mau-hop{
  background:var(--surface);border:var(--bw-1) solid var(--line);box-shadow:var(--sh-3)}
html.porcelain .mau-top{
  background:var(--surface);color:var(--text-2);border-bottom:var(--bw-1) solid var(--line)}
html.porcelain .mau-top .ml-dong{color:var(--text)}
html.porcelain .mau-hop iframe{background:var(--surface)}
html.porcelain .mau-cho{background:var(--surface);color:var(--text-2)}
html.porcelain .mau-cho span{border-color:var(--line);border-top-color:var(--brand)}
html.porcelain .exp-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .exp-hop{
  background:var(--surface);border:var(--bw-1) solid var(--line);box-shadow:var(--sh-3)}
html.porcelain .exp-kick{color:var(--text-2)}
html.porcelain .exp-tit{text-transform:none;color:var(--text)}
html.porcelain .exp-cham span.on{background:var(--brand)}
html.porcelain .bgn{display:none}
html.porcelain .qz-back{
  border:var(--bw-1) solid var(--line);background:none;color:var(--text);
  font-size:var(--fs-2);border-radius:var(--r-3);padding:var(--s-3)}
html.porcelain .qz-back:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .tick-khoa svg{color:var(--accent)}
html.porcelain .of-b{background:var(--surface-2);border-color:var(--line)}
html.porcelain .of-b-k{color:var(--text-2)}
html.porcelain .chon-ban{border-color:var(--line);background:var(--surface-2)}
html.porcelain .cb-nhan{color:var(--text-2)}
html.porcelain .cb-nay{background:var(--brand);color:var(--text-inv);border-color:var(--brand)}

/* ---- B5 lễ reveal: night hero → giấy đọc (dốc đêm→giấy) ----
   .md-night nằm TRONG .dai-dem.night nên mọi var() ở đây là token đêm:
   --text kem, --text-2 dim, --accent brass. KHÔNG dùng --text-inv trong
   zone night — _legacy() của style_man_hinh alias nó về var(--bg) (chữ
   nghịch của đêm là màu TỐI, dành cho chữ trên nút sáng) — đặt lên nền
   đêm là tối-trên-tối, đã dính 09/08. */
html.porcelain .md.md-night,html.porcelain section.md.md-night{
  margin:0;padding:var(--s-7) 0 var(--s-6);
  color:var(--text);border-radius:0;position:relative;overflow:hidden;
  background:none}
html.porcelain .md-in{position:relative;max-width:min(640px,100%);margin:0 auto;text-align:center}
html.porcelain .md-ten,html.porcelain .md-in h1{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  line-height:1.15;letter-spacing:-.01em;text-transform:none;color:var(--text);margin:0}
html.porcelain .md-meta{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .md-night .md-nhan{
  display:inline-flex;gap:var(--s-2);align-items:baseline;justify-content:center;
  margin:0 0 var(--s-4);padding:var(--s-2) var(--s-4);
  border:var(--bw-1) solid var(--line);border-radius:999px;
  background:color-mix(in oklab,var(--text) var(--a-1),transparent);
  font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .md-night .md-nhan .l{text-transform:uppercase;letter-spacing:.14em}
html.porcelain .md-night .md-nhan .v{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;text-transform:none;color:var(--accent)}
html.porcelain .b5-wheel{
  display:block;margin:0 auto;width:100%;max-width:100%}
html.porcelain .b5-wheel svg{display:block;width:100%;height:auto;max-height:none}
/* bản đồ sao B5: bánh xe + chú giải cùng khối trong dải đêm (không .bx porcelain rời) */
html.porcelain .dai-dem .b5-laso{margin:0 auto;max-width:100%;text-align:left}
html.porcelain .dai-dem .b5-laso .bx-chu{
  margin-top:var(--s-4);padding-top:var(--s-3);border-top:var(--bw-1) solid var(--line);
  display:grid;gap:var(--s-2)}
html.porcelain .dai-dem .b5-laso .bx-chu div{
  display:flex;gap:var(--s-3);font-size:var(--fs-2);line-height:var(--lh-loose);color:var(--text-2)}
html.porcelain .dai-dem .b5-laso .bx-chu u{
  flex:none;text-decoration:none;font-family:var(--font-display);
  font-weight:var(--fw-bold);color:var(--accent)}
html.porcelain .md-night .bx-doi{
  margin:var(--s-2) auto 0;display:inline-flex;border:var(--bw-1) solid var(--line-2);
  background:none;color:var(--text-2);
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  border-radius:var(--r-2);padding:var(--s-1) var(--s-3);cursor:pointer}
html.porcelain .b5-conv{
  margin:var(--s-3) 0 0;font-family:var(--font-mono);font-size:var(--fs-1);
  letter-spacing:.04em;color:var(--text-2);text-transform:none}
html.porcelain .b3,html.porcelain .md-tru{
  margin:var(--s-5) auto 0;max-width:400px;text-align:left;
  display:flex;flex-direction:column;gap:0}
/* `flex-direction` PHẢI khai ở đây. Khối này mượn tên class `md-tru`, mà
   `.md-tru div` trong CSS bài khai `display:flex;flex-direction:column` cho
   lưới bốn ô của nó. Luật porcelain thắng ở `display` nhưng KHÔNG khai
   `flex-direction`, nên hướng cột rò sang: mỗi dòng Big Three xếp dọc thành
   glyph / nhãn / giá trị / độ và cao 132px thay vì 48px — đúng chỗ Duc nói
   "bố cục hơi off". Khai rõ hướng hàng là hết. */
html.porcelain .b3-row,html.porcelain .md-tru .b3-row{
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
  gap:var(--s-3);padding:var(--s-2) 2px;min-height:52px;
  border:0;border-top:var(--bw-1) solid var(--line);
  border-radius:0;background:transparent;padding-left:2px;padding-right:2px}
html.porcelain .b3-row:first-child{border-top:0}
html.porcelain .b3-row svg{
  width:var(--icon-2);height:var(--icon-2);flex:none;color:var(--accent);
  stroke:var(--accent);fill:none}
html.porcelain .b3-row.dim svg{color:var(--text-2);stroke:currentColor}
html.porcelain .b3-row .t,html.porcelain .b3-row .l{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.04em;
  color:var(--text-2);width:86px;flex:none;text-transform:none}
html.porcelain .b3-row .v,html.porcelain .b3-row .g{
  font-weight:var(--fw-medium);color:var(--text);text-transform:none;
  font-family:var(--font-body);font-size:var(--fs-2)}
html.porcelain .b3-row .n,html.porcelain .b3-row .h{
  margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-1);
  color:var(--text-2);text-transform:none}
/* Bỏ dòng tên cung thì số thứ tự và nhãn phải tự đứng thành đầu mục. */
html.porcelain .bl-gon .bl-nhan{
  font-size:var(--fs-2);color:var(--text);letter-spacing:.02em;text-transform:none}
html.porcelain .bl-gon .bl-o p{margin-top:var(--s-1)}
html.porcelain .b5-lop{
  margin:var(--s-5) auto 0;max-width:460px;text-align:left;
  border-top:var(--bw-1) solid var(--line);padding-top:var(--s-4)}
html.porcelain .b5-lop .bl-ds{margin:0}
html.porcelain .b5-lop .bl-kick{
  display:block;margin:0 0 var(--s-4);font-family:var(--font-mono);
  font-size:var(--fs-1);letter-spacing:.14em;text-transform:uppercase}

/* entrance lễ — 1 lần/phiên; .cut = xem ngay / đã xem / reduce */
html.js .md-night .st{opacity:0;transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.22,.61,.21,1) var(--d,0s),
    transform .7s cubic-bezier(.22,.61,.21,1) var(--d,0s)}
html.js .md-night.play .st{opacity:1;transform:none}
html.js .md-night.cut .st{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  html.js .md-night .st{opacity:1;transform:none;transition:none}}

/* porcelain — hướng dẫn đọc (không chuyển động) */
html.porcelain .md-paper{
  max-width:480px;margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-7)}
html.porcelain .md-paper h2{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  letter-spacing:-.01em;margin:0;color:var(--text);text-transform:none}
html.porcelain .md-cau{
  margin:var(--s-3) 0 0;font-size:var(--fs-2);color:var(--text-2);line-height:var(--lh-base);
  text-wrap:pretty}
html.porcelain .md-chi{
  display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-4);
  padding-top:0;border-top:0}
html.porcelain .md-chi .chi{display:flex;gap:var(--s-3);align-items:flex-start}
html.porcelain .md-chi .so{
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--accent);
  border:var(--bw-1) solid var(--line);border-radius:var(--r-full);
  width:26px;height:26px;flex:none;display:grid;place-items:center}
html.porcelain .md-chi p{margin:0}
html.porcelain .md-chi .chi-t{font-weight:var(--fw-medium);color:var(--text)}
html.porcelain .md-chi .chi-p{font-size:var(--fs-1);color:var(--text-2)}
html.porcelain .md-cta{
  display:block;width:100%;margin-top:var(--s-5);text-align:center;text-decoration:none;
  background:var(--brand);color:var(--text-inv);font-family:var(--font-display);
  font-weight:var(--fw-medium);font-size:var(--fs-2);letter-spacing:.02em;
  border-radius:var(--r-4);padding:var(--s-4);box-sizing:border-box}
html.porcelain .md-cta:hover{
  background:color-mix(in oklab,var(--brand),var(--text) var(--state-hover));color:var(--text-inv)}
html.porcelain .md-phu{text-align:center;margin-top:var(--s-3);font-size:var(--fs-1)}
html.porcelain .md-phu a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}

/* ---- B18: thanh dính + FAB + mục lục ---- */
html.porcelain .stick{
  background:color-mix(in oklab,var(--surface) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--text);border-top:var(--bw-1) solid var(--line);box-shadow:var(--sh-2)}
html.porcelain .stick-t{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;letter-spacing:-.01em;color:var(--text)}
html.porcelain .stick-p{font-size:var(--fs-1);color:var(--text-2);margin-top:2px}
html.porcelain .stick-km{
  font-family:var(--font-mono);font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--ok);background:var(--ok-subtle);border-radius:var(--r-2);padding:var(--s-1) var(--s-2)}
html.porcelain .stick .cta-mo,html.porcelain .stick .btn{
  font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:.04em}
html.porcelain .fab{
  background:var(--surface);border:var(--bw-1) solid var(--line);color:var(--brand);
  box-shadow:var(--sh-2);border-radius:var(--r-full)}
html.porcelain .fab svg{stroke:var(--brand)}
html.porcelain .ml-lop{background:color-mix(in oklab,var(--surface-inv) 55%, transparent)}
html.porcelain .ml{
  background:var(--surface);color:var(--text);padding:0;
  display:flex;flex-direction:column;height:100%;max-height:100dvh;overflow:hidden}
html.porcelain .ml-top{
  padding:var(--s-5) var(--gutter) var(--s-3);
  border-bottom-color:var(--line);background:var(--surface)}
html.porcelain .ml-ruot{padding:0 var(--gutter) var(--s-5);flex:1;min-height:0;overflow-y:auto}
html.porcelain .ml-top h3{
  font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--fs-2);
  text-transform:none;color:var(--text)}
html.porcelain .ml-dong{color:var(--text-2)}
html.porcelain .ml-phan-ten span{color:var(--accent)}
html.porcelain .ml-phan-ten b{text-transform:none;font-size:var(--fs-2)}
html.porcelain .ml a{color:var(--text-2);border-bottom-color:var(--line-soft);font-size:var(--fs-2)}
html.porcelain .ml a:hover{color:var(--brand)}
html.porcelain .ml a i{color:var(--text-3)}

/* biểu đồ / bảng trong bài */
html.porcelain .tbl-wrap{
  overflow-x:auto;border:var(--bw-1) solid var(--line);border-radius:var(--r-3)}
html.porcelain .tbl{font-size:var(--fs-1)}
html.porcelain .tbl th{
  font-family:var(--font-display);font-weight:var(--fw-medium);letter-spacing:.08em;
  color:var(--text-2);border-bottom-color:var(--line)}
html.porcelain .tbl td{border-bottom-color:var(--line-soft)}
html.porcelain .chart{border:var(--bw-1) solid var(--line);border-radius:var(--r-3);padding:var(--s-4)}
html.porcelain .chart .c-note{color:var(--text-3)}
html.porcelain .st-track{background:var(--surface-2)}
html.porcelain .canh{background:var(--warn-subtle);border-radius:var(--r-3)}
html.porcelain .canh .ic{color:var(--warn)}
html.porcelain .he-fade{background:linear-gradient(color-mix(in oklab,var(--bg) 0%,transparent),var(--bg))}
html.porcelain .skel-line{background:color-mix(in oklab,var(--text-2) var(--a-2),transparent)}

/* ---- B19 góp ý (.gy-*) ---- */
html.porcelain .gy{
  border-top:var(--bw-1) solid var(--line-soft);padding-top:var(--s-4);margin-top:var(--s-4)}
html.porcelain .gy-k,html.porcelain .gy-hoi{
  font-size:var(--fs-1);color:var(--text-2);letter-spacing:0;text-transform:none}
html.porcelain .gy-chon button{
  border:var(--bw-1) solid var(--line);background:var(--surface);color:var(--text);
  font-size:var(--fs-1);border-radius:var(--r-full);padding:var(--s-2) var(--s-4)}
html.porcelain .gy-chon button:hover{background:color-mix(in oklab,var(--surface),var(--text) 3%)}
html.porcelain .gy-chon button[aria-pressed="true"]{
  background:var(--brand);border-color:var(--brand);color:var(--text-inv)}
html.porcelain .gy-ta{
  border:var(--bw-1) solid var(--line);border-radius:var(--r-3);background:var(--surface);
  color:var(--text);font-size:var(--fs-2);padding:var(--s-3)}
html.porcelain .gy-ta::placeholder{color:var(--text-3)}
html.porcelain .gy-nho{font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .gy-cam{font-size:var(--fs-1);font-style:normal;color:var(--ok)}

/* hình mẫu (.hm) — tiêu đề archetype = XL cùng bìa SKU */
html.porcelain .hm-ten{
  font-family:var(--font-display);font-weight:var(--fw-hero);font-size:var(--fs-4);
  line-height:var(--lh-tight);letter-spacing:-.015em;text-transform:none;color:var(--text);
  margin:var(--s-2) 0 0;text-wrap:pretty}

/* ml100 trong bài */
html.porcelain .ml100-phu{font-size:var(--fs-2);color:var(--text-2);font-style:normal}
html.porcelain .ml100-phan{border-color:var(--line-soft)}
html.porcelain .ml100-h{overflow:visible}
html.porcelain .ml100-h > b{
  color:var(--text);text-transform:none;font-weight:var(--fw-bold)}
html.porcelain .ml100-h > i{
  color:var(--text-3);font-style:normal;font-family:var(--font-mono);font-size:var(--fs-1)}
html.porcelain .ml100-h .mui{
  font-size:0!important;letter-spacing:0!important;line-height:0!important;
  width:9px!important;height:9px!important;flex-shrink:0!important;
  margin-inline:8px 3px!important;overflow:visible!important;
  border-right:var(--bw-2) solid var(--accent)!important;
  border-bottom:var(--bw-2) solid var(--accent)!important;
  transform:rotate(45deg)!important;transition:transform .18s!important}
html.porcelain .ml100-phan.gap .ml100-h .mui{transform:rotate(-45deg)!important}
html.porcelain section.muc{scroll-margin-top:72px}

/* chân trang bài SPA — links pháp lý tối thiểu */
html.porcelain .ft-bai{
  margin-top:var(--s-8);padding:var(--s-5) 0 var(--s-7);
  border-top:var(--bw-1) solid var(--line-soft)}
html.porcelain .ft-bai-in{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);
  font-family:var(--font-mono);font-size:var(--fs-1);color:var(--text-3)}
html.porcelain .ft-bai-in a{color:var(--text-2);text-decoration:none}
html.porcelain .ft-bai-in a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* cc-big — số + nhãn cùng baseline */
html.porcelain .cc-big{
  display:flex!important;align-items:baseline!important;flex-wrap:wrap!important;
  gap:0.35em 0.5em!important;text-transform:none!important}
html.porcelain .cc-big i{margin-left:0!important}

@media (max-width:699px){
  .brand-khoi,.spa-bar .brand-khoi{
    min-height:44px;display:inline-flex;align-items:center;padding:6px 0}
  .spa-bar .tb-nav{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px;
    white-space:nowrap}
  .spa-bar-in{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .spa-bar-in::-webkit-scrollbar{display:none}
  html.porcelain .stick-in{padding:8px 14px!important;gap:10px!important}
  html.porcelain .stick-t{font-size:var(--fs-1)!important;line-height:1.2!important}
  html.porcelain .stick-km{padding:2px 6px!important;margin-bottom:2px!important}
  html.porcelain body.co-stick{padding-bottom:68px!important}
  html.porcelain .fab,body.co-stick .fab{
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
    right:12px!important;width:46px!important;height:46px!important}
  html.porcelain .hcc-ds a{
    min-height:44px;padding:12px 0!important;
    display:flex;flex-direction:column;justify-content:center}
  html.porcelain .pv-link{
    min-height:44px;padding:10px 0;display:inline-flex;align-items:center}
  html.porcelain .of-h,html.porcelain .of-nhom .of{min-height:44px}
  html.porcelain .cta-mo,html.porcelain .stick .cta-mo{
    min-height:44px;padding:12px var(--s-4)}
  html.porcelain .co-x,html.porcelain .co-dem{
    min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  html.porcelain .gy-chon button,html.porcelain .bx-doi{
    min-height:44px;padding:10px 16px}
  html.porcelain .ck2-xem{min-height:44px;padding:10px 0;display:inline-flex;align-items:center}
}

/* ---- typography: 4 cỡ (mockup b06/b18 + tokens.css) ----
   S (--fs-1) caption/mono · M (--fs-2) body + tiêu đề mục ·
   L (--fs-3) tiêu đề khối/card · XL (--fs-4) hero bìa + hình mẫu. */
html.porcelain{font-size:var(--fs-2)}
html.porcelain body{font-size:var(--fs-2)}

/* XL — hero display: tiêu đề SKU bìa + archetype hình mẫu */
html.porcelain .screen-cover .h1,html.porcelain .hm-ten{
  font-size:var(--fs-4)!important}

/* S — caption/mono (ghi đè px 8–14pt legacy) */
html.porcelain .cover-eyebrow,html.porcelain .cover-meta,html.porcelain .cover-foot,
html.porcelain .screen-cover .kicker,html.porcelain .screen-cover .ct-lbl,
html.porcelain .mod-num,html.porcelain .mod-sub,
html.porcelain section.muc > h3 .mnum,
html.porcelain .dan-ml-k,html.porcelain .ml100-kick,html.porcelain .ml100-h > span:not(.mui),
html.porcelain .bl-kick,html.porcelain .bl-nhan,html.porcelain .bl-so,
html.porcelain .hcc-kick,html.porcelain .dt-kick,html.porcelain .b5-conv,
html.porcelain .cc-kick,html.porcelain .faq-k,html.porcelain .hm-kick,
html.porcelain .fs-lbl,html.porcelain .fs-kick,
html.porcelain .tq-k,
html.porcelain .md-meta,html.porcelain .b3-row .t,html.porcelain .b3-row .l,
html.porcelain .b3-row .n,html.porcelain .b3-row .h,
html.porcelain .bx-kick,html.porcelain .cta-cuoi .nho,
html.porcelain .stick-p,html.porcelain .gd-dai-chu,
html.porcelain #mau-nhan,html.porcelain .spa-bar .brand-sub,
html.porcelain .tb-nav,html.porcelain .screen-cover .ct-gz,
html.porcelain .c-title,html.porcelain .c-note,
html.porcelain .unlock .cnt,html.porcelain .tru-label,html.porcelain .tru-dl dt,
html.porcelain .tc-head,html.porcelain .tc-meta,html.porcelain .dt-label,
html.porcelain .st-label,html.porcelain .hm-gz,html.porcelain .hm-nhan,
html.porcelain .hm-net .l,html.porcelain .cc-meta,
html.porcelain .ml100-h > i,
html.porcelain .tl-age,html.porcelain .chip,html.porcelain .toc-num,html.porcelain .toc-page,
html.porcelain .gd-diem span,html.porcelain .gd-meta,html.porcelain .gd-bo .gd-l,
html.porcelain .gd-bo .gd-e,html.porcelain .gd-vs-t,html.porcelain .gd-mot-chieu,
html.porcelain .qz-dem,html.porcelain .qz-xen .nhan,html.porcelain .qz-xn dt{
  font-size:var(--fs-1)!important}

/* L — tiêu đề khối/card (--fs-3, mockup b18) */
html.porcelain .mod-title,html.porcelain .dan-ml h2,html.porcelain .ml100 h2,
html.porcelain .cta-cuoi h3,html.porcelain .dt h2,html.porcelain .hcc h2,
html.porcelain .bl-ten,html.porcelain .of-ten,html.porcelain .faq-h h3,
html.porcelain .cc-h h3,html.porcelain .gy h4,html.porcelain .fs-wrap > h2,
html.porcelain .fs-tit,html.porcelain .cc-big,html.porcelain .md-ten,
html.porcelain .pv-tieu-de,html.porcelain .gd-xong h3,html.porcelain .tq-nhan{
  font-size:var(--fs-3)!important}

/* M — body + tiêu đề mục (ghi đè 15–21px legacy) */
html.porcelain #report{font-size:var(--fs-2)}
html.porcelain .cover-name,
html.porcelain section.muc > h3,html.porcelain .muc-body p,
html.porcelain .ml100-h > b,
html.porcelain .pull,
html.porcelain .faq summary,html.porcelain .bx-chu div,
html.porcelain .dai-dem .b5-laso .bx-chu div,
html.porcelain .stick-t,
html.porcelain .spa-bar .brand,html.porcelain .gd-dai-nut,
html.porcelain .tbl,html.porcelain .tbl th,html.porcelain .tbl .t-gz,
html.porcelain .note,html.porcelain .teaser p,
html.porcelain #report p,html.porcelain #report li,html.porcelain .mod-sec,
html.porcelain .mod-body p,html.porcelain .pitem,html.porcelain .pitem-bang,
html.porcelain .blur-list .bt,html.porcelain .unlock p,html.porcelain .err-inline,
html.porcelain .tru-tt,html.porcelain .tru-dl,html.porcelain .st-val,
html.porcelain .hc-title,html.porcelain .hc-desc,html.porcelain .tl-title,
html.porcelain .toc-name,html.porcelain .toc-list li,
html.porcelain .gd-diem b,html.porcelain .gd-diem em,html.porcelain .gd-bo .gd-v,
html.porcelain .gd-bo,html.porcelain .gd-xen p,
html.porcelain .gd-xong p,html.porcelain .qz-chuong,html.porcelain .qz-phu,
html.porcelain .qz-op .t,html.porcelain .qz-op .p,html.porcelain .qz-xen p,
html.porcelain .qz-xn dd{
  font-size:var(--fs-2)!important}

/* ---- weight: 2 cờ + hero (Duc xiết 09/08) ----
   regular 400 · strong 600 · hero 700 (Archivo bìa + hình mẫu). */
html.porcelain .screen-cover .h1,html.porcelain .hm-ten{
  font-weight:var(--fw-hero)!important}
html.porcelain .cover-name,html.porcelain .mod-title,
html.porcelain section.muc > h3,html.porcelain .dan-ml h2,html.porcelain .ml100 h2,
html.porcelain .cta-cuoi h3,html.porcelain .md-ten,html.porcelain .dt h2,
html.porcelain .hcc h2,html.porcelain .bl-ten,html.porcelain .of-ten,
html.porcelain .faq-h h3,html.porcelain .cc-h h3,html.porcelain .gy h4,
html.porcelain .fs-wrap > h2,
html.porcelain .pv-tieu-de,html.porcelain .stick-t,html.porcelain .spa-bar .brand,
html.porcelain .gd-dai-nut,html.porcelain .faq summary,html.porcelain .bx-chu div,
html.porcelain .dai-dem .b5-laso .bx-chu div,html.porcelain .md-night .md-nhan .v,
html.porcelain .ml100-h > b,
html.porcelain .qz-hoi,html.porcelain .qz-xen h3,html.porcelain .qz-xn dd,
html.porcelain .gd-diem b,html.porcelain .gd-diem em,html.porcelain .gd-bo .gd-v,
html.porcelain .gd-xong h3,html.porcelain .btn,html.porcelain .cta-mo,
html.porcelain .hc-title,html.porcelain .unlock .cta-mo,html.porcelain .tq-nhan{
  font-weight:var(--fw-strong)!important}
html.porcelain #report p,html.porcelain #report li,html.porcelain .muc-body p,
html.porcelain .mod-body p,html.porcelain .mod-sec,html.porcelain .pitem,
html.porcelain .pitem-bang,html.porcelain .note,html.porcelain .teaser p,
html.porcelain .pull,html.porcelain .blur-list .bt,html.porcelain .unlock p,
html.porcelain .err-inline,html.porcelain .tru-dl,html.porcelain .hc-desc,
html.porcelain .tl-title,html.porcelain .toc-name,html.porcelain .toc-list li,
html.porcelain .gd-bo,html.porcelain .gd-xen p,html.porcelain .gd-xong p,
html.porcelain .qz-phu,html.porcelain .qz-op .t,html.porcelain .qz-op .p,
html.porcelain .qz-xen p,html.porcelain .bl-o p,html.porcelain .bl-phu{
  font-weight:var(--fw-regular)!important}

/* ---- nhãn: không all-caps, tracking ≤ .06em ---- */
html.porcelain .cover-eyebrow,html.porcelain .cover-meta,html.porcelain .cover-foot,
html.porcelain .screen-cover .kicker,html.porcelain .screen-cover .ct-lbl,
html.porcelain .mod-num,html.porcelain .mod-sub,
html.porcelain section.muc > h3 .mnum,
html.porcelain .dan-ml-k,html.porcelain .ml100-kick,html.porcelain .ml100-h > span:not(.mui),
html.porcelain .bl-kick,html.porcelain .bl-nhan,html.porcelain .bl-so,
html.porcelain .hcc-kick,html.porcelain .dt-kick,html.porcelain .b5-conv,
html.porcelain .cc-kick,html.porcelain .faq-k,html.porcelain .hm-kick,
html.porcelain .fs-lbl,html.porcelain .fs-kick,
html.porcelain .md-meta,html.porcelain .md-night .md-nhan,
html.porcelain .b3-row .t,html.porcelain .b3-row .l,
html.porcelain .b3-row .n,html.porcelain .b3-row .h,
html.porcelain .bx-kick,html.porcelain .cta-cuoi .nho,
html.porcelain .stick-p,html.porcelain .gd-dai-chu,
html.porcelain #mau-nhan,html.porcelain .spa-bar .brand-sub,
html.porcelain .tb-nav,html.porcelain .c-title,html.porcelain .c-note,
html.porcelain .unlock .cnt,html.porcelain .tru-label,html.porcelain .tru-dl dt,
html.porcelain .tc-head,html.porcelain .tc-meta,html.porcelain .dt-label,
html.porcelain .st-label,html.porcelain .hm-gz,html.porcelain .hm-nhan,
html.porcelain .hm-net .l,html.porcelain .cc-meta,
html.porcelain .ml100-h > i,
html.porcelain .tl-age,html.porcelain .chip,html.porcelain .toc-num,html.porcelain .toc-page,
html.porcelain .gd-diem span,html.porcelain .gd-meta,html.porcelain .gd-bo .gd-l,
html.porcelain .gd-bo .gd-e,html.porcelain .gd-vs-t,html.porcelain .gd-mot-chieu,
html.porcelain .qz-dem,html.porcelain .qz-chuong,html.porcelain .qz-xen .nhan,
html.porcelain .qz-xn dt,html.porcelain label.lb{
  text-transform:none!important;letter-spacing:.04em!important;font-weight:var(--fw-regular)!important}

/* ---- cards: panel + lift (Duc xiết 10/08) ---- */
html.porcelain .hcc,html.porcelain .cc-box,html.porcelain .faq-box,
html.porcelain .chart,html.porcelain .teaser,html.porcelain .bx,
html.porcelain .gy,html.porcelain .hm,
html.porcelain .pv-p,html.porcelain .ck2-tiep,html.porcelain .qua-item{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .dt{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--accent)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .dt::before{display:none!important}
html.porcelain .ml100{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-4)!important;
  box-shadow:var(--sh-1)!important}
html.porcelain .qbox{
  background:var(--surface)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important;overflow:hidden!important}
html.porcelain .tq{border-radius:var(--r-3)!important;box-shadow:none!important}
/* Accordion checkout: border chỉ trên `.of`, không card lồng trên `.of-h` (R126d)
   R126f — thang SÁNG thay thang màu (một hero card, §182):
   thẻ phụ gấp = surface-2 chìm · thẻ phụ đang chọn = trắng + viền đậm ·
   thẻ chính of-uu = wash brand 4% (color-mix từ token, không hex mới). */
html.porcelain .of-nhom .of:not(.of-uu){
  background:var(--surface-2)!important;
  border:var(--bw-1) solid var(--line)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of:not(.of-uu)[aria-pressed="true"]{
  background:var(--surface)!important;
  border:var(--bw-2) solid var(--line-strong)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of.of-uu{
  background:color-mix(in oklab,var(--surface),var(--brand) 4%)!important;
  border:var(--bw-2) solid var(--line-strong)!important;
  border-radius:var(--r-3)!important;
  box-shadow:none!important}
html.porcelain .of-nhom .of.of-uu[aria-pressed="true"]{
  border-color:var(--brand)!important}
html.porcelain .of-nhom .of .of-h,html.porcelain .co-lop .of .of-h{
  border:0!important;border-radius:0!important;background:none!important;
  box-shadow:none!important;margin-top:0!important}
html.porcelain .faq-h{border-bottom:var(--bw-1) solid var(--line)!important}
html.porcelain .faq-den{
  box-shadow:none!important;
  background:color-mix(in oklab,var(--surface),var(--accent) 4%)!important}
/* band đêm — không card rời */
html.porcelain .dai-dem .bl,html.porcelain .dai-dem .screen-cover,
html.porcelain .dai-dem .md.md-night,html.porcelain .dai-dem .b5-laso,
html.porcelain .mod-head,html.porcelain .cta-cuoi,html.porcelain .pull,
html.porcelain section.muc{
  box-shadow:none!important}
html.porcelain .dai-dem .bl,html.porcelain .dai-dem .screen-cover,
html.porcelain .dai-dem .md.md-night{
  border-radius:0!important}
html.porcelain .dai-dem .b5-laso .bx,
html.porcelain .dai-dem .b5-laso .chart{
  background:transparent!important;border:0!important;
  border-radius:0!important;padding:0!important;margin:0!important}