/* ============================================================
   9 CHUM · khanh9chum.com — trình bày dùng chung mọi trang
   Sửa file này = đổi cả web. Đừng chép CSS vào từng trang.
   Bảng màu lấy từ file logo, không đoán. Tỷ lệ 60-30-10.

   ⭐ 2026-08-14 — DỰNG LẠI THANG CỠ CHỮ VÀ HỆ KHOẢNG CÁCH.
   Trước đó web có 16 cấp cỡ chữ, trong đó 8 cấp chen nhau trong
   khoảng 15–19,5px — chênh nhau trung bình 1,04 lần, dưới ngưỡng
   1,2 lần mà mắt phân biệt được (Bringhurst). Thứ bậc coi như
   không tồn tại. Nay còn 8 cấp, tỷ lệ 1,25 neo ở 17px.
   Khoảng cách quy về hệ 8 điểm (Material · Carbon).
   ⛔ ĐỪNG viết số px rời vào file này nữa — lấy biến bên dưới.
   ============================================================ */
/* ============================================================
   PHÔNG — DÙNG PHÔNG MÁY KHÁCH TỰ CÓ, không nhúng phông riêng.
   Sếp chốt 14/08 sau khi xem thử bốn phông: thích giữ bản gốc.
   Lý do đứng về phía sếp: trang chủ nhẹ hơn 25,7 KB, và chữ hiện ra
   ngay từ nét đầu, không có quãng nháy chờ tải phông.
   📌 Bốn phông đã đo, để lại phòng khi đổi ý — file Lora cất ở
      `projects/web-9chum/font-du-phong/`, cách cài ghi trong README.
   ============================================================ */

:root{
  --den:#12100E; --den2:#1E1915; --vien:#2E2621;
  --kem:#F4ECE0; --xam:#9C9088;
  --vang:#FDB91A; --hophach:#C9822A;
  /* --- THANG CỠ CHỮ · tỷ lệ 1,25 neo ở 17px --- */
  --c-nhan:12px;                              /* nhãn in hoa giãn chữ */
  --c-phu:15px;                               /* chú thích, chữ trong thẻ */
  --c-than:17px;                              /* thân bài — cấp neo */
  --c-muc:21px;                               /* mọi đầu mục H3 */
  --c-dan:clamp(1.15rem,2.2vw,1.6rem);        /* 18,4 → 25,6 · câu dẫn nhập */
  --c-moc:clamp(1.6rem,3.4vw,2.06rem);        /* 25,6 → 33 · mốc năm, số nhấn */
  --c-h2:clamp(2rem,4.4vw,3.25rem);           /* 32 → 52 · tiêu đề khối */
  --c-h1:clamp(2.35rem,7vw,5.05rem);          /* 37,6 → 81 · tiêu đề trang */

  /* --- ÉP CHỮ TIÊU ĐỀ ---
     Chữ càng to càng phải siết vào, không thì các nét rời rạc.
     Hai mức thôi, đừng đẻ thêm: --ep-lon cho chữ lớn, --ep-nho cho đầu mục. */
  --ep-lon:-.026em;
  --ep-nho:-.012em;
  /* --- HỆ KHOẢNG CÁCH 8 ĐIỂM --- */
  --k1:4px;  --k2:8px;  --k3:16px; --k4:24px; --k5:32px;
  --k6:48px; --k7:64px; --k8:96px; --k9:128px;
  /* --- NHỊP TRONG NHÓM · luật gần kề Gestalt ---
     Trong nhóm phải sít hơn ra ngoài nhóm ít nhất một nửa.
     8 : 28 : 16  =  1 : 3,5 : 2 */
  --sat:8px;      /* nhãn dính tiêu đề */
  --roi:28px;     /* tiêu đề tách thân bài */
  --doan:16px;    /* giữa hai đoạn cùng mạch */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--den);color:var(--kem);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  font-size:var(--c-than);line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
.bo{width:100%;max-width:1180px;margin:0 auto;padding:0 var(--k4)}

/* --- thanh trên cùng --- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;padding:var(--k3) 0;
  background:linear-gradient(to bottom,rgba(18,16,14,.94),rgba(18,16,14,0))}
.top.dac{background:rgba(18,16,14,.97);border-bottom:1px solid var(--vien)}
.top .bo{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--kem);
  font-weight:700;font-size:16px;letter-spacing:.01em}
.logo img{width:34px;height:34px;border-radius:50%}
.logo span{color:var(--vang)}
.top nav{display:flex;gap:var(--k4);font-size:var(--c-phu)}
.top nav a{color:var(--kem);opacity:.8;text-decoration:none;white-space:nowrap}
.top nav a:hover,.top nav a.dang{opacity:1;color:var(--vang)}

/* nút ba gạch — chỉ hiện trên máy nhỏ */
.mo-menu{display:none;background:none;border:0;cursor:pointer;padding:var(--k2);
  color:var(--kem);font:inherit;line-height:0}
.mo-menu span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;
  transition:transform .2s,opacity .2s}
.top.bung .mo-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.bung .mo-menu span:nth-child(2){opacity:0}
.top.bung .mo-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1024px){
  .mo-menu{display:block;color:var(--vang)}
  .top{background:rgba(18,16,14,.97);border-bottom:1px solid var(--vien)}
  .top .bo{flex-wrap:wrap}
  .top nav{display:none;width:100%;flex-direction:column;gap:0;
    margin-top:var(--k3);border-top:1px solid var(--vien)}
  .top.bung nav{display:flex}
  .top nav a{opacity:1;padding:var(--k3) 2px;border-bottom:1px solid var(--vien);font-size:16px}
  .top nav a.dang{color:var(--vang)}
  .logo{font-size:var(--c-phu)}
  .logo img{width:30px;height:30px}
}

/* --- hero trang chủ --- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Video chạy nền — nằm ĐÈ lên ảnh, mờ vào khi đã tải xong.
   Ảnh vẫn là thứ hiện đầu tiên nên trang không bao giờ trắng chờ video. */
.hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.hero>video.hien{opacity:1}
.hero .phu{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,16,14,.97) 6%,rgba(18,16,14,.6) 46%,rgba(18,16,14,.3))}
.hero .bo{position:relative;padding:var(--k9) var(--k4) var(--k7)}

/* --- đầu trang con: không ảnh nền, gọn hơn hero --- */
.dau{padding:var(--k9) 0 clamp(48px,7vw,80px);border-bottom:1px solid var(--vien);background:var(--den2)}
.dau h1{max-width:22ch}
.dau .dan{margin-top:var(--roi)}

.nhan{display:inline-flex;align-items:center;gap:10px;font-size:var(--c-nhan);letter-spacing:.2em;
  text-transform:uppercase;color:var(--vang);margin-bottom:var(--sat)}
.nhan::before{content:"";width:36px;height:2px;background:var(--vang)}
/* line-height 1.12 chứ không phải 1.02 — tiếng Việt có dấu mũ chồng dấu thanh
   (Ế · Ộ · Ữ), để chặt như chuẩn tiếng Anh là dấu dòng dưới ăn lên chân dòng trên. */
h1{font-size:var(--c-h1);line-height:1.12;font-weight:700;
  letter-spacing:var(--ep-lon);max-width:16ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--vang)}
.hero p{margin-top:var(--roi);font-size:var(--c-dan);max-width:46ch;color:#E4D9CA;line-height:1.5}

/* --- nút --- */
.nut-hang{display:flex;gap:var(--k3);flex-wrap:wrap;margin-top:var(--k5)}
.nut{display:inline-block;padding:var(--k3) var(--k5);border-radius:3px;text-decoration:none;
  font-weight:700;font-size:16px;background:var(--vang);color:var(--den);border:2px solid var(--vang)}
.nut:hover{background:#FFC94A;border-color:#FFC94A}
.nut.rong{background:transparent;color:var(--kem);border-color:rgba(244,236,224,.35)}
.nut.rong:hover{background:rgba(244,236,224,.09);border-color:var(--kem)}

/* --- dải số ---
   Cỡ tên chứng chỉ hạ từ 57,6 xuống 33: cỡ gần 60px là cỡ dành cho CON SỐ
   đọc xong trong nháy mắt, còn đây là CHỮ, có tên dài bốn tiếng. Cặp số–nhãn
   để ở tỷ lệ 2,2 lần thay vì 4,3 lần — một bên hét một bên thì thầm. */
.so-dai{border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);background:var(--den2)}
.so-luoi{display:grid;grid-template-columns:repeat(4,1fr)}
.so-o{padding:var(--k6) var(--k4)}
.so-o{border-right:1px solid var(--vien)}
.so-o:last-child{border-right:0}
.so-o .n{font-size:var(--c-moc);font-weight:700;color:var(--vang);
  line-height:1.15;letter-spacing:var(--ep-lon)}
.so-o .n small{font-size:.46em;font-weight:600;letter-spacing:0;color:var(--hophach)}
.so-o .t{margin-top:var(--k2);font-size:var(--c-phu);color:var(--xam);line-height:1.5}
@media(max-width:1024px){
  .so-luoi{grid-template-columns:repeat(2,1fr)}
  .so-o{border-bottom:1px solid var(--vien);padding:var(--k5) var(--k4)}
  .so-o:nth-child(2n){border-right:0}}

/* --- khối chữ --- */
section{padding:clamp(64px,9vw,128px) 0}
section.hep{padding:clamp(48px,6vw,80px) 0}
.tieu{font-size:var(--c-nhan);letter-spacing:.2em;text-transform:uppercase;color:var(--vang);
  margin-bottom:var(--sat)}
h2{font-size:var(--c-h2);line-height:1.2;font-weight:700;
  letter-spacing:var(--ep-lon);max-width:22ch;text-wrap:balance}
h2 em{font-style:normal;color:var(--vang)}
.dan{margin-top:var(--roi);color:#DED3C4;max-width:56ch;font-size:var(--c-than)}
.dan+.dan{margin-top:var(--doan)}
.dan b{color:var(--kem)}
.dan a{color:var(--vang)}

/* Cột chữ 1.2fr / cột ảnh .8fr = 60/40.
   Chia đôi (bản cũ 1.05/.95) là bố cục tĩnh — không bên nào dẫn mắt. */
.doi{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:center}
.doi.dao{grid-template-columns:1.2fr .8fr}
.doi img{width:100%;height:clamp(320px,46vw,555px);object-fit:cover;border-radius:2px}
@media(max-width:1024px){.doi,.doi.dao{grid-template-columns:1fr}.doi img{height:300px}}

.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien);margin-top:var(--k6)}
.ba .o{background:var(--den);padding:0 0 var(--k5)}
.ba .o img{width:100%;height:210px;object-fit:cover;margin-bottom:var(--k4)}
.ba .o .noi{padding:0 var(--k4)}
.ba .o .stt{font-size:var(--c-nhan);color:var(--vang);letter-spacing:.2em;margin-bottom:var(--sat)}
.ba .o h3{font-size:var(--c-muc);font-weight:700;margin-bottom:10px;
  letter-spacing:var(--ep-nho);line-height:1.3}
.ba .o p{color:var(--xam);font-size:var(--c-phu);line-height:1.55}
.ba.hai{grid-template-columns:repeat(2,1fr)}   /* khi chỉ còn 2 ô, vd "Hai thứ nữa" ở trang chủ */
.ba.hai .o img{height:260px}
@media(max-width:1024px){.ba{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ba,.ba.hai{grid-template-columns:1fr}}

.tran{position:relative;height:clamp(360px,56vw,640px);overflow:hidden}
.tran img{width:100%;height:100%;object-fit:cover}
.tran .chu{position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top,rgba(18,16,14,.94),rgba(18,16,14,.1) 62%)}
.tran .chu .bo{padding-bottom:var(--k6)}

/* --- thẻ chọn đường ---
   Khe giữa thẻ phải KHÔNG hẹp hơn lề trong quá nhiều, nếu không mắt gom
   cả hàng thành một mảng và người đọc mất cảm giác "chọn một trong số này". */
.re{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--k4);margin-top:var(--k6)}
.re a{display:block;text-decoration:none;color:inherit;background:var(--den2);
  border:1px solid var(--vien);padding:var(--k5);transition:border-color .15s,transform .15s}
.re a:hover{border-color:var(--vang);transform:translateY(-2px)}
.re h3{font-size:var(--c-muc);margin-bottom:10px;font-weight:700;
  line-height:1.3;letter-spacing:var(--ep-nho)}
.re p{color:var(--xam);font-size:var(--c-phu);margin-bottom:var(--k4);line-height:1.55}
.re .mui{color:var(--vang);font-size:var(--c-phu);font-weight:700}
/* Khối đọc-tiếp có ĐÚNG 4 thẻ: xếp 2×2 thay vì 3+1, để thẻ thứ tư khỏi
   đứng lệch một mình ở hàng dưới. Phải khai TRƯỚC hai media query bên dưới,
   vì cùng độ đặc hiệu thì luật đứng sau thắng — đặt sau là màn hình hẹp
   cũng bị ép 2 cột. */
.re4{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){.re{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.re{grid-template-columns:1fr}}

/* --- khối vàng gọi điện ---
   Số điện thoại là HÀNH ĐỘNG chính của cả trang, nên nó phải to hơn tiêu đề
   đứng trên nó. Vì thế h2 ở khối này hạ xuống cấp mốc, còn số lên cấp h2. */
.goi{background:var(--vang);color:var(--den)}
.goi h2{color:var(--den);font-size:var(--c-moc)}
.goi .dan{color:#4A3A0C;max-width:46ch}
.goi .dt{display:inline-block;margin-top:var(--roi);font-size:var(--c-h2);
  font-weight:700;color:var(--den);text-decoration:none;letter-spacing:var(--ep-lon);line-height:1.1}
.goi .dt:hover{text-decoration:underline}
.goi .phu-nut{margin-top:var(--k4);display:flex;gap:var(--k3);flex-wrap:wrap}
.goi .phu-nut a{display:inline-block;padding:var(--k3) var(--k4);border-radius:3px;text-decoration:none;
  font-weight:700;font-size:16px;background:var(--den);color:var(--vang)}
.goi .phu-nut a:hover{background:#241E19}

/* --- CÂU HỎI: đóng mở --- */
.hoi{margin-top:var(--k6);border-top:1px solid var(--vien)}
.hoi details{border-bottom:1px solid var(--vien)}
.hoi summary{cursor:pointer;list-style:none;padding:var(--k4) var(--k6) var(--k4) 0;position:relative;
  font-size:var(--c-muc);font-weight:700;
  letter-spacing:var(--ep-nho);line-height:1.35}
.hoi summary::-webkit-details-marker{display:none}
.hoi summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--vang);font-size:1.6rem;font-weight:400;line-height:1}
.hoi details[open] summary::after{content:"−"}
.hoi summary:hover{color:var(--vang)}
.hoi .tra{padding:0 var(--k6) var(--k5) 0;color:#DED3C4;max-width:70ch}
.hoi .tra p+p{margin-top:var(--doan)}
.hoi .tra b{color:var(--kem)}

/* --- MỐC THỜI GIAN --- */
.moc{margin-top:var(--k7);border-left:2px solid var(--vien);padding-left:clamp(24px,4vw,48px)}
.moc .o{position:relative;padding-bottom:clamp(40px,5vw,56px)}
.moc .o:last-child{padding-bottom:0}
.moc .o::before{content:"";position:absolute;left:calc(-1*clamp(24px,4vw,48px) - 7px);top:9px;
  width:12px;height:12px;border-radius:50%;background:var(--vang);border:3px solid var(--den)}
.moc .nam{font-size:var(--c-moc);font-weight:700;color:var(--vang);
  line-height:1.15;letter-spacing:var(--ep-lon);margin-bottom:var(--sat)}
.moc h3{font-size:var(--c-muc);font-weight:700;margin-bottom:10px;
  line-height:1.3;letter-spacing:var(--ep-nho)}
.moc p{color:var(--xam);max-width:58ch;font-size:var(--c-phu);line-height:1.6}

/* --- LƯỚI VIDEO --- */
.vid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--k4);margin-top:var(--k6)}
.vid a{display:block;text-decoration:none;color:inherit;background:var(--den2);
  border:1px solid var(--vien);transition:border-color .15s,transform .15s}
.vid a:hover{border-color:var(--vang);transform:translateY(-2px)}
.vid .khung{position:relative;aspect-ratio:3/4;background:#0C0A09;overflow:hidden}
/* Ảnh bìa TikTok vốn rực và nhiều chữ — trầm xuống cho hợp tông trang,
   rê chuột vào thì sáng lại. */
.vid .khung img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.82) saturate(.88);transition:transform .35s,filter .35s}
.vid a:hover .khung img{transform:scale(1.05);filter:brightness(1) saturate(1)}
/* vệt tối chân ảnh để nối liền với phần chữ bên dưới */
.vid .khung .mo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,16,14,.86),rgba(18,16,14,0) 42%)}
/* nút play chồng lên ảnh bìa */
.vid .khung::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(18,16,14,.62);
  border:2px solid rgba(244,236,224,.85);pointer-events:none}
.vid .khung::before{content:"";position:absolute;left:calc(50% + 3px);top:50%;z-index:1;
  transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #F4ECE0;pointer-events:none}
.vid .khung .trong{display:flex;align-items:center;justify-content:center;height:100%;
  color:#4A423C;font-size:var(--c-phu);text-align:center;padding:var(--k4)}
.vid .noi{padding:var(--k3) var(--k4) var(--k4)}
.vid h3{font-size:var(--c-muc);font-weight:700;margin-bottom:var(--k2);
  line-height:1.3;letter-spacing:var(--ep-nho)}
.vid .meta{color:var(--vang);font-size:var(--c-phu);font-weight:700}
/* --- Video chạy TẠI CHỖ, không bật sang TikTok ---
   Khách bấm thì mới nạp player (xem "tải-khi-bấm" trong chung.js). Trước khi bấm,
   trang không tải một byte nào của TikTok. Ba thứ dưới đây phải tắt lúc đang chạy:
   nút play vẽ bằng CSS, vệt tối chân ảnh, và hiệu ứng nhấc thẻ lên khi rê chuột —
   để lại thì nó chồng lên player và thẻ cứ nhảy khi khách đang xem. */
.vid .khung.dang-chay{aspect-ratio:9/16}
.vid .khung.dang-chay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .khung.dang-chay::after,.vid .khung.dang-chay::before,.vid .khung.dang-chay .mo{display:none}
.vid a.dang-chay:hover{transform:none;border-color:var(--vang)}
.vid a.dang-chay{cursor:default}
/* Lối thoát khi TikTok chặn embed ('overload-protect triggered') — xem chung.js */
.vid .ra-tiktok{display:block;margin-top:10px;color:var(--xam);font-size:var(--c-phu);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.vid .ra-tiktok:hover,.vid .ra-tiktok:focus{color:var(--vang);outline:none}
@media(max-width:1024px){.vid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.vid{grid-template-columns:1fr}}

/* --- Khối video đặt trong trang chữ (13/09/2026) ---
   Dùng CLASS chứ không gắn style thẳng vào thẻ: style thẳng đè mất luật màn nhỏ,
   làm điện thoại xếp 2 cột hẹp 151px. Có class thì màn nhỏ tự về một cột. */
.vid.mot-o{grid-template-columns:1fr;max-width:330px}
.vid.hai-o{grid-template-columns:repeat(2,1fr);max-width:660px}
@media(max-width:640px){.vid.hai-o{grid-template-columns:1fr;max-width:330px}}

/* --- LƯỚI SẢN PHẨM (ảnh tách nền) --- */
.sp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien);margin-top:var(--k6)}
.sp .o{background:var(--den);padding:var(--k5) var(--k4);display:flex;flex-direction:column}
.sp .anh{height:230px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--k4);
  background:radial-gradient(ellipse at 50% 78%,rgba(253,185,26,.13),transparent 66%)}
.sp .anh img{max-height:230px;max-width:100%;width:auto;object-fit:contain}
.sp .anh .trong{color:#4A423C;font-size:var(--c-phu);text-align:center;padding:0 18px}
.sp h3{font-size:var(--c-muc);font-weight:700;margin-bottom:10px;
  letter-spacing:var(--ep-nho);line-height:1.3}
.sp p{color:var(--xam);font-size:var(--c-phu);margin-bottom:var(--doan);line-height:1.55}
.sp .quy{margin-top:auto;padding-top:var(--doan);border-top:1px solid var(--vien);
  color:var(--hophach);font-size:14px;font-weight:700;letter-spacing:.02em}
@media(max-width:1024px){.sp{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sp{grid-template-columns:1fr}}

/* --- BƯỚC ĐÁNH SỐ (trang liên hệ) --- */
.buoc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien);margin-top:var(--k6)}
.buoc .o{background:var(--den);padding:var(--k5) var(--k4)}
.buoc .stt{font-size:var(--c-nhan);color:var(--vang);letter-spacing:.2em;margin-bottom:var(--sat)}
.buoc h3{font-size:var(--c-muc);font-weight:700;margin-bottom:10px;
  line-height:1.3;letter-spacing:var(--ep-nho)}
.buoc p{color:var(--xam);font-size:var(--c-phu);line-height:1.55}
@media(max-width:1024px){.buoc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.buoc{grid-template-columns:1fr}}

/* --- khối nhánh trang liên hệ --- */
.nhanh{border-top:1px solid var(--vien);padding-top:clamp(48px,6vw,80px);margin-top:clamp(48px,6vw,80px)}
.nhanh:first-of-type{border-top:0;padding-top:0;margin-top:0}

/* --- gạch đầu dòng có dấu tick --- */
.tick{margin-top:var(--roi);max-width:60ch}
.tick li{list-style:none;position:relative;padding-left:28px;margin-bottom:var(--doan);color:#DED3C4}
.tick li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--vang)}
.tick li b{color:var(--kem)}

/* --- ô ghi chú vàng nhạt --- */
.luu{margin-top:var(--k5);border-left:3px solid var(--vang);background:var(--den2);
  padding:var(--k4);max-width:62ch;color:#DED3C4;font-size:var(--c-than)}
.luu b{color:var(--kem)}

/* --- BỐN LOẠI HỘP: MỘT HỘP MỘT NHIỆM VỤ ---
   Bệnh đã chữa (soi 2026-08-10): cả 5–6 hộp trên một trang dùng CHUNG một dáng.
   Mắt quét qua hai cái đầu là tự gán nhãn "chữ nhỏ, bỏ qua" — nên câu ĐẮT NHẤT
   trang bị đọc lướt chung với dòng miễn trừ y tế, thứ rẻ nhất.
   Nguyên tắc: cái ĐẮT thì nổi lên, cái BẮT BUỘC PHẢI CÓ thì lùi xuống.
   ⚠️ Đặt tên 'tuhoi' chứ không phải 'hoi' — '.hoi' đã là khối hỏi-đáp, dùng lại là đè style. */

/* ⭐ Tự khai cái bất lợi — mua niềm tin đắt nhất, phải nổi nhất */
.luu.khai{border-left-width:5px;background:#241E19;color:var(--kem);font-size:19px;
  padding:var(--k4) var(--k4) var(--k4) var(--k4);line-height:1.6}
.luu.khai b{color:var(--vang)}

/* Miễn trừ pháp lý / y tế — bắt buộc phải có, nhưng KHÔNG được tranh chỗ */
.luu.phap{border-left-color:var(--vien);background:transparent;color:var(--xam);
  font-size:14px;padding:var(--k3) var(--k4)}
.luu.phap b{color:var(--xam)}

/* Câu hỏi để người đọc tự soi — nét đứt, ra hiệu "chỗ này bạn trả lời" */
.luu.tuhoi{border-left-style:dashed;background:transparent}

/* Mời hỏi thêm — nhẹ nhất, chỉ là lối ra */
.luu.moi{border-left-color:var(--hophach);background:transparent;font-size:var(--c-phu);
  padding:var(--k3) var(--k4)}

/* --- chân trang --- */
footer{background:var(--den2);border-top:1px solid var(--vien);padding:var(--k7) 0 var(--k5);
  font-size:var(--c-phu);color:var(--xam)}
footer .cot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--k5)}
footer b{color:var(--kem);display:block;margin-bottom:var(--sat);font-size:var(--c-than)}
footer a{color:var(--vang);text-decoration:none}
.canh{margin-top:var(--k6);padding-top:var(--k4);border-top:1px solid var(--vien);
  font-size:13px;line-height:1.6;color:#786C63}
@media(max-width:640px){footer .cot{grid-template-columns:1fr;gap:var(--k4)}}

/* --- NÚT ZALO NỔI — theo màn hình, luôn trong tầm ngón tay --- */
.zalo-noi{position:fixed;right:18px;bottom:18px;z-index:90;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 20px 13px 16px;border-radius:40px;text-decoration:none;
  background:var(--vang);color:var(--den);font-weight:700;font-size:16px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);transition:transform .15s,background .15s}
.zalo-noi:hover{background:#FFC94A;transform:translateY(-2px)}
.zalo-noi svg{width:22px;height:22px;flex:0 0 auto}
.zalo-noi .nho{display:block;font-weight:600;font-size:12px;opacity:.72;letter-spacing:.01em}
@media(max-width:640px){
  .zalo-noi{right:var(--k3);bottom:var(--k3);padding:12px 18px 12px 14px;font-size:var(--c-phu)}
  .zalo-noi .nho{display:none}
}

/* --- cổng 18+ --- */
#cong18{position:fixed;inset:0;z-index:999;background:#12100E;display:flex;
  align-items:center;justify-content:center;padding:var(--k4);text-align:center}
#cong18 .h{max-width:480px}
#cong18 img{width:72px;height:72px;margin:0 auto var(--k4)}
#cong18 h2{font-size:var(--c-moc);color:#F4ECE0;
  margin-bottom:var(--k3);max-width:none;letter-spacing:var(--ep-nho)}
#cong18 p{color:#9C9088;font-size:var(--c-than);margin-bottom:var(--k5);line-height:1.6}
#cong18 .hang{display:flex;gap:var(--k3);justify-content:center;flex-wrap:wrap}
#cong18 button{font:inherit;font-weight:700;font-size:16px;padding:var(--k3) var(--k5);
  border-radius:3px;cursor:pointer;border:2px solid #FDB91A}
#cong18 .co{background:#FDB91A;color:#12100E}
#cong18 .khong{background:transparent;color:#F4ECE0;border-color:rgba(244,236,224,.3)}
#cong18 small{display:block;margin-top:var(--k4);color:#6E635B;font-size:var(--c-nhan);line-height:1.55}


/* --- khối hình + chữ xen kẽ (trang Nhà máy) --- */
.doan{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,64px);align-items:center}
.doan.dao{direction:rtl}
.doan.dao>*{direction:ltr}
.doan img{width:100%;height:clamp(300px,44vw,520px);object-fit:cover}
.doan .so{display:inline-block;font-size:var(--c-nhan);letter-spacing:.2em;color:var(--den);
  background:var(--vang);padding:5px 12px;font-weight:700;margin-bottom:var(--k3)}
section+section .doan{border-top:1px solid var(--vien);padding-top:clamp(48px,7vw,88px)}
.chuoi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--vien)}
.chuoi figure{background:var(--den);margin:0}
.chuoi img{width:100%;height:240px;object-fit:cover}
.chuoi figcaption{padding:var(--k3) var(--k4) var(--k4);font-size:var(--c-phu);color:var(--xam);
  line-height:1.55}
.chuoi b{display:block;color:var(--kem);font-size:var(--c-than);margin-bottom:5px}
@media(max-width:1024px){.doan,.doan.dao{grid-template-columns:1fr}.doan img{height:280px}}
@media(max-width:1024px){.chuoi{grid-template-columns:1fr}}