:root{
  --nen:#f5f5f7; --trang:#fff; --muc:#1d1d1f; --phu:#6e6e73;
  --vien:#d2d2d7; --khoi:#e3e3e8; --khoi2:#d7d7de; 
  --k1:8px; --k2:16px; --k3:24px; --k4:32px; --k5:48px; --k6:64px;
  --r1:14px; --r2:20px; --r3:28px;
  --le:20px; --rong:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro','BVP du phong',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--nen); color:var(--muc); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.bao{max-width:var(--rong); margin:0 auto; padding:0 var(--le)}

/* CHỮ */
.d1{font-size:38px;font-weight:700;line-height:1.06;letter-spacing:-.025em}
.d2{font-size:27px;font-weight:700;line-height:1.15;letter-spacing:-.02em}
.h3{font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.than{font-size:16px;font-weight:400;line-height:1.65;color:var(--phu)}
.nho{font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--phu)}
@media(min-width:768px){.d1{font-size:58px}.d2{font-size:36px}.h3{font-size:23px}.than{font-size:17px}}

/* HEADER */
.hd{position:sticky;top:0;z-index:50;background:rgba(245,245,247,.86);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.06)}
.hd-in{max-width:var(--rong);margin:0 auto;padding:0 var(--le);height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-size:17px;font-weight:700;letter-spacing:-.02em;flex:0 0 auto}
.hd-nut{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.hd-nut a{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;background:var(--muc);color:#fff;white-space:nowrap}
.hd-nut a.v{background:transparent;color:var(--muc);border:1px solid var(--vien)}

/* menu danh mục trên máy tính */
.hd-dm{display:none;flex:1 1 auto;justify-content:center;gap:2px}
.hd-dm a{font-size:14px;font-weight:500;padding:7px 12px;border-radius:999px;white-space:nowrap;color:var(--muc)}
.hd-dm a:hover{background:rgba(0,0,0,.05)}
.hd-dm a.dang{font-weight:700;background:rgba(0,0,0,.07)}
@media(min-width:900px){.hd-dm{display:flex} .hd-mo{display:none}}

/* nút mở menu trên điện thoại */
.hd-mo{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
       padding:7px 13px;border-radius:999px;border:1px solid var(--vien);cursor:pointer;background:transparent}
.hd-mo b{display:block;width:14px;height:1.5px;background:var(--muc);position:relative}
.hd-mo b::before,.hd-mo b::after{content:"";position:absolute;left:0;width:14px;height:1.5px;background:var(--muc)}
.hd-mo b::before{top:-4.5px} .hd-mo b::after{top:4.5px}

/* bảng menu xổ xuống */
.mn{position:fixed;top:52px;left:0;right:0;z-index:45;background:rgba(245,245,247,.97);
    backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--vien);
    max-height:0;overflow:hidden;transition:max-height .28s ease}
.mn.mo{max-height:70vh;overflow-y:auto}
.mn-in{max-width:var(--rong);margin:0 auto;padding:10px var(--le) 20px}
.mn-in a{display:flex;align-items:center;justify-content:space-between;gap:12px;
         padding:15px 0;border-bottom:1px solid var(--vien);font-size:17px;font-weight:600}
.mn-in a:last-child{border-bottom:0}
.mn-in a small{font-size:13px;font-weight:400;color:var(--phu)}
.mn-in a.dang{color:var(--muc)}
.mn-in a.dang::after{content:"đang xem";font-size:11px;font-weight:600;color:var(--phu);
                     border:1px solid var(--vien);border-radius:999px;padding:3px 9px}

/* ĐƯỜNG DẪN */
.dd{padding:14px 0 0;font-size:13px;color:var(--phu);display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;align-content:flex-start;min-height:56px}
.dd a{font-weight:500}
.dd a:active{opacity:.5}
.dd span{opacity:.45}


/* ===== BANNER FULL MÀN HÌNH ===== */
.bnr{position:relative;width:100%;background:var(--khoi);overflow:hidden;
     display:flex;align-items:flex-end;isolation:isolate}
.bnr.dam{background:var(--khoi2)}
.bnr-chinh{aspect-ratio:5/8;max-height:80vh}
.bnr-phu{aspect-ratio:5/7;max-height:72vh}
@media(min-width:768px){
  .bnr-chinh{aspect-ratio:16/9;max-height:min(900px,86vh)}
  .bnr-phu{aspect-ratio:16/9;max-height:min(720px,72vh)}
}
.bnr-nhan{position:absolute;top:16px;left:20px;right:20px;z-index:1;
          font-size:11px;font-weight:700;letter-spacing:.08em;color:rgba(0,0,0,.38)}
.bnr-noi{position:relative;z-index:2;width:100%;padding:var(--k5) 0}
.bnr-noi .bao{width:100%}
a.bnr:active{opacity:.72}
.bnr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block;border:0}
/* KHÔNG margin — dùng padding để nền chạm đường kẻ.
   margin đẩy cả khối xuống, để lộ khe màu nền trang giữa vạch ngăn và mép
   trên của nền banner. Banner đặt màu riêng thì thấy rõ màu không chạy hết
   lên tới vạch. padding thì khe nằm TRONG khối, mang màu của banner. */
.bnr-doan{margin-top:0;padding-top:12px}
.bnr-doan + .bnr-doan{margin-top:0;padding-top:12px}


/* ===== MÀU PHÂN LOẠI KHỐI — chỉ có trong bản mẫu ===== */
.o{color:rgba(0,0,0,.42)}
.m-bc,  .bnr.m-bc  {background:#cfe0f2}
.m-bp,  .bnr.m-bp  {background:#d4e8d4}
.m-sp,  .o.m-sp    {background:#f3e7c8}
.m-svg, .o.m-svg   {background:#e0d7f0}
.m-clip,.o.m-clip  {background:#f0dcc6}
.m-map, .o.m-map   {background:#cfe6e4}
.m-pk,  .o.m-pk    {background:#e6e0d6}

/* bảng chú giải */
.cg{position:fixed;left:12px;right:12px;bottom:62px;z-index:70;background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);border:1px solid var(--vien);border-radius:var(--r2);
    padding:16px;display:none;box-shadow:0 8px 30px rgba(0,0,0,.14);max-width:420px;margin:0 auto}
.cg.mo{display:block}
.cg h4{font-size:14px;font-weight:600;margin-bottom:10px}
.cg .cg-tieu-de{font-size:14px;font-weight:600;margin-bottom:10px}
.cg-i{display:flex;align-items:center;gap:10px;padding:5px 0}
.cg-o{width:26px;height:18px;border-radius:5px;flex:0 0 26px}
.cg-i span{font-size:13px;color:var(--phu)}

/* KHỐI ẢNH */
.o{background:var(--khoi);border-radius:var(--r2);position:relative;overflow:hidden;margin:0;padding:0}
.o>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border:0}
.o-nhan{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:5px;
        align-items:center;justify-content:center;text-align:center;padding:8px;margin:0}
.o b{font-size:11.5px;font-weight:700;letter-spacing:.07em;display:block}
.o i{font-style:normal;font-size:11px;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums;letter-spacing:.02em;display:block}
.bnr-nhan b{display:block;font-size:11px;font-weight:700;letter-spacing:.08em}
.bnr-nhan i{display:block;font-style:normal;font-size:11px;font-weight:600;opacity:.72;margin-top:3px;
            font-variant-numeric:tabular-nums;letter-spacing:.02em}
.o169{aspect-ratio:16/9;border-radius:var(--r3)}
.o43{aspect-ratio:4/3}
.o11{aspect-ratio:1/1}
.o.dam{background:var(--khoi2);color:#7e7e88}

/* MỤC */
.muc{padding:var(--k6) 0 0}
.muc:first-of-type{padding-top:var(--k4)}
.muc-dau{margin-bottom:var(--k3)}

/* LƯỚI */
.luoi{display:grid;gap:var(--k2)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(min-width:700px){.g2m3{grid-template-columns:repeat(3,1fr)}.g3m4{grid-template-columns:repeat(4,1fr)}}

/* THẺ */
.the{background:var(--trang);border-radius:var(--r2);border:1px solid rgba(0,0,0,.05);overflow:hidden;display:block}
.the:active{opacity:.62}
.the-chu{padding:var(--k2) var(--k2) 18px}
.the-ten{font-size:17px;font-weight:600;letter-spacing:-.01em}
.the-mo{font-size:14px;color:var(--phu);line-height:1.55;margin-top:4px}
@media(min-width:700px){.the-ten{font-size:19px}}

/* BANNER DÒNG (tầng 2) */
.bn{background:var(--trang);border-radius:var(--r2);border:1px solid rgba(0,0,0,.05);overflow:hidden;display:block}
.bn:active{opacity:.62}
.bn-chu{padding:var(--k3)}
.bn-gach{list-style:none;margin:14px 0 0}
.bn-gach li{font-size:14.5px;color:var(--phu);line-height:1.5;padding-left:18px;position:relative;margin-top:7px}
.bn-gach li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--vien)}
@media(min-width:820px){
  .bn{display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .bn-chu{padding:var(--k4)}
}

/* Ô MÁY (tầng 3) */
.may{background:var(--trang);border-radius:var(--r1);border:1px solid rgba(0,0,0,.05);overflow:hidden;display:block}
.may:active{opacity:.62}
.may .o{border-radius:0}
.may-chu{padding:12px 12px 14px}
.may-ten{font-size:14px;font-weight:600}
.may-gia{font-size:13px;color:var(--phu);margin-top:3px;font-variant-numeric:tabular-nums}
.ds-pk{list-style:none;margin:0;padding:0}
.ds-pk li{font-size:15px;line-height:1.6;color:var(--phu);padding:11px 0;border-bottom:1px solid var(--vien)}
.ds-pk li:last-child{border-bottom:0}
.ds-pk b{font-weight:600;color:var(--muc)}
.may-mo{font-size:12.5px;color:var(--phu);line-height:1.5;margin-top:6px}

/* NÚT */
.nut{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;
     border-radius:999px;font-size:16px;font-weight:600;background:var(--muc);color:#fff}
.nut:active{opacity:.7}

.nut.v{background:transparent;color:var(--muc);border:1px solid var(--muc)}
.nut.rong{width:100%;padding:0 16px}
.nut-hang{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--k3)}
.nut-hang.ba{display:grid;grid-template-columns:repeat(3,1fr)}

/* BẢNG */
.bang{width:100%;border-collapse:collapse;font-size:15px}
.bang td{padding:13px 0;border-bottom:1px solid var(--vien);vertical-align:top}
.bang.ss{font-size:14px}
.bang.ss th,.bang.ss td{padding:11px 10px 11px 0;width:auto}
.bang.ss thead th{font-weight:600;color:var(--muc);border-bottom:1px solid var(--muc)}
.bang.ss tbody th{width:30%}
.bang-cuon{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;position:relative;z-index:3}
.bang-cuon>table{min-width:520px}
.bang th{padding:13px 0;border-bottom:1px solid var(--vien);vertical-align:top;
         color:var(--phu);width:46%;font-weight:400;text-align:left}
.bang tr:last-child th{border-bottom:0}
.bang td:last-child{font-weight:500;font-variant-numeric:tabular-nums}
.bang tr:last-child td{border-bottom:0}

/* HỎI ĐÁP */
.hd-i{background:var(--trang);border-radius:var(--r1);border:1px solid rgba(0,0,0,.05);padding:18px var(--k2)}
.hd-i + .hd-i{margin-top:10px}
.hd-i h3{font-size:15px;font-weight:600;display:block;line-height:1.35;letter-spacing:0}
.hd-i p{font-size:14.5px;color:var(--phu);line-height:1.6;margin-top:6px}

/* TIN CẬY */
.tc{background:var(--trang);border-radius:var(--r1);border:1px solid rgba(0,0,0,.05);padding:var(--k3) var(--k2)}
.tc b{font-size:26px;font-weight:700;letter-spacing:-.02em;display:block}
.tc span{font-size:14px;color:var(--phu);display:block;margin-top:4px;line-height:1.45}

/* GIÁ */
.gia{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ma{font-size:13px;color:var(--phu);letter-spacing:.06em;font-weight:600}

/* FOOTER */
.ft{margin-top:var(--k6);border-top:1px solid var(--vien);padding:var(--k4) 0 var(--k6)}
.ft p{font-size:13px;color:var(--phu);line-height:1.7}

.trang{display:none}
.trang.hien{display:block}

/* thanh dieu huong demo */
.demo{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(29,29,31,.94);
      backdrop-filter:blur(16px);color:#fff;padding:9px var(--le);
      padding-bottom:calc(9px + env(safe-area-inset-bottom));
      display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo span{font-size:12px;opacity:.72;line-height:1.35}
.demo b{font-weight:600;opacity:1}
.demo a{margin-left:6px;font-size:12px;font-weight:600;background:rgba(255,255,255,.16);padding:7px 13px;border-radius:999px;white-space:nowrap}
body{padding-bottom:64px}

/* =====================================================================
   CSS BÙ — giữ giao diện y hệt sau khi đổi sang thẻ đúng chuẩn
   ===================================================================== */

/* A1: khối ảnh là <figure><img><figcaption> — nhìn y hệt <div> cũ */
figure.o{margin:0;position:relative;overflow:hidden}
.o img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.o-nhan{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;
        align-items:center;justify-content:center;text-align:center}
.o-nhan b{font-size:11.5px;font-weight:700;letter-spacing:.07em}
.o-nhan i{font-style:normal;font-size:11px;font-weight:600;opacity:.6;
          font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* Banner: ảnh nền là <img> thật */
/* CỠ ẢNH CHỈNH ĐƯỢC — biến --anh-co, mặc định 100%.
   object-fit:cover phủ kín khung nhưng CẮT CỤT ảnh: máy cao hơn khung thì
   mất cả phễu lẫn chân. Đặt --anh-co nhỏ hơn 100 thì ảnh thu lại, thấy đủ
   cái máy, phần thừa là nền banner.
   contain giữ nguyên tỉ lệ, không méo. */
.bnr-anh{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block}
/* inset:auto phải viết TRƯỚC top/left.
   Viết sau thì nó xoá luôn top và left vừa đặt — ảnh dính mép trên khung
   thay vì căn giữa. Đã thấy tận mắt: ảnh thu nhỏ đúng nhưng lệch hẳn lên. */
/* CHỈ ÁP TỪ 768px TRỞ LÊN.
   Dưới 768px banner xếp DỌC: ảnh nằm trên, chữ nằm dưới, ảnh dùng
   position:relative trong luồng. Ép position tuyệt đối vào đó là ảnh
   nhảy ra khỏi luồng, đè lên chữ, bố cục lộn xộn — chủ xưởng thấy trên
   điện thoại.

   Trên điện thoại ảnh đã max-height:44vh và object-fit:contain nên
   không bị cắt cụt sẵn. Chỉ màn hình rộng mới cần chỉnh cỡ. */
@media(min-width:768px){
  .bnr[data-anh-co] .bnr-anh{inset:auto;object-fit:contain;
    width:var(--anh-co,100%);height:var(--anh-co,100%);
    left:50%;top:50%;transform:translate(-50%,-50%)}
  .bnr[data-anh-co][data-anh="phai"] .bnr-anh{left:auto;right:3%;
    transform:translateY(-50%)}
  .bnr[data-anh-co][data-anh="trai"] .bnr-anh{left:3%;right:auto;
    transform:translateY(-50%)}
}
.bnr-noi .nho{margin:0}

/* A7: sơ đồ SVG nhúng thẳng */
.o-svg{flex-direction:column;padding:18px 14px;justify-content:center;aspect-ratio:auto}
.sd-svg{position:relative;z-index:1;width:100%;height:auto;max-height:100%}
.o-nhan-duoi{margin-top:8px}

/* A2: câu hỏi là <h3> — nhìn y hệt <b> cũ */
.hd-i h3{font-size:15px;font-weight:600;display:block;margin:0;line-height:inherit;letter-spacing:0}

/* A3: cột trái bảng là <th scope="row"> — nhìn y hệt <td> cũ */
.bang th{padding:13px 0;border-bottom:1px solid var(--vien);vertical-align:top;
         color:var(--phu);width:46%;font-weight:400;text-align:left}
.bang tr:last-child th{border-bottom:0}
.bang caption.bang-cap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
                       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Bảng so sánh nhiều cột — chữ thật, cuộn ngang khi màn hẹp */
.bang-cuon{position:relative;z-index:3;overflow-x:auto;overflow-y:hidden;
           -webkit-overflow-scrolling:touch}
.bang-ss{min-width:100%;width:auto}
.bang-ss th,.bang-ss td{white-space:nowrap;padding-right:22px;width:auto}
.bang-ss thead th{color:var(--muc);font-weight:600;font-size:14px}
.bang-ss tbody th{color:var(--phu);font-weight:400;min-width:120px}

/* Tiêu đề ô máy là <h3>, giá là <p> — nhìn y hệt <div> cũ */
h3.may-ten{font-size:14px;font-weight:600;margin:0;line-height:1.3;letter-spacing:0}
p.may-gia{margin:3px 0 0}
.may-mo{font-size:12.5px;line-height:1.5;color:var(--phu);margin:7px 0 0}

/* Mã sản phẩm là <p> */
p.ma{margin:0}
p.gia{margin:0}

/* Danh sách đi kèm */
.ds-kem{list-style:none;margin:var(--k3) 0 0;padding:0}
.ds-kem li{font-size:14.5px;line-height:1.6;color:var(--phu);padding:11px 0;
           border-bottom:1px solid var(--vien)}
.ds-kem li:last-child{border-bottom:0}
.ds-kem strong{color:var(--muc);font-weight:600}

/* Link trong câu văn */
.lk{color:var(--muc);font-weight:600;text-decoration:underline}

/* Chân trang: địa chỉ đầy đủ */
.ft-dc{font-style:normal;font-size:13px;color:var(--phu);line-height:1.7;margin-top:10px}
.ft-dc strong{color:var(--muc);font-weight:600}
.ft-dc a{color:var(--phu);text-decoration:underline}
.ft-ghi{font-size:13px;color:var(--phu);line-height:1.7;margin-top:14px;opacity:.7}
.ft p.logo{margin:0}


/* ===== BỔ SUNG CHO BẢN TĨNH ===== */
/* nút mở menu là <button> nên phải gỡ kiểu mặc định của trình duyệt */
button.hd-mo{font-family:inherit;color:inherit;line-height:normal}
/* đoạn mở đầu nằm trong banner, ngay sau h1 */
.bnr-noi .d1{margin-top:12px}
.doan-mo-dau{margin-top:14px;max-width:520px;color:var(--muc);opacity:.72}
.dd-nay{opacity:1;color:var(--muc);font-weight:500}
/* banner kiểu chồng: ảnh nền và SVG dùng chung khung, SVG đè lên trên */
/* Banner kiểu chồng: SVG số liệu nằm ở vùng trên của khung, chữ HTML ở nửa dưới.
   preserveAspectRatio giữ tỉ lệ nên chữ không méo khi đổi cỡ màn hình.
   max-height chặn SVG lấn xuống vùng chữ. */
.bnr-svg{position:absolute;top:52px;left:0;width:100%;height:auto;max-height:44%;
         z-index:1;pointer-events:none}

/* Ảnh chưa có thật: giấu chữ alt để khối không vỡ khi xem bản mẫu.
   alt vẫn nằm nguyên trong HTML cho máy đọc. Khi có ảnh thật, bỏ khối này. */
.o img, .bnr-anh{color:transparent;font-size:0}

.bnr-nhan{z-index:2}

/* Ba nút mua trên trang sản phẩm nay ghi rõ đích đến nên chữ dài hơn.
   Giữ nguyên chiều cao và khoảng cách, chỉ cho cỡ chữ co lại vừa khung. */
.nut-hang.ba .nut{padding:0 8px;font-size:14px;white-space:nowrap}
@media(min-width:520px){.nut-hang.ba .nut{font-size:15px;padding:0 14px}}

/* ===== Trang cố định ===== */
.ban-do{position:relative;z-index:1;width:100%;aspect-ratio:16/9;overflow:hidden;
        border-radius:var(--r2);background:var(--khoi)}
.ban-do iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.bai-ngay{font-size:13.5px;padding-top:var(--k3)}
.phan-trang{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--k4)}
.phan-trang a,.phan-trang span{font-size:14px;font-weight:600;padding:9px 15px;
    border-radius:999px;border:1px solid var(--vien)}
.phan-trang span[aria-current]{background:var(--muc);color:#fff;border-color:var(--muc)}
.ft-mn{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--k3)}
.ft-mn a{font-size:13.5px;font-weight:500;text-decoration:underline}
.mn-in a small{font-weight:400}

/* Việc 4.2 — dễ tiếp cận */
.nhay{position:absolute;left:-9999px;top:0;z-index:100;background:var(--muc);
      color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-size:15px;font-weight:600}
.nhay:focus{left:0}
:focus-visible{outline:3px solid #1d1d1f;outline-offset:2px;border-radius:4px}
.bnr :focus-visible,.hd :focus-visible{outline-color:#1d1d1f}

/* Khớp với CSS màn hình đầu — tránh nhảy layout khi tải xong */
.o picture{position:absolute;inset:0;display:block}
.bnr picture{position:absolute;inset:0;display:block;z-index:0}

/* Việc 4.2 — độ tương phản đạt mức AA */
.dd .dd-nay{opacity:1;color:var(--muc);font-weight:500}
.ft-ghi{opacity:1;color:#6e6e73}
.o-nhan,.bnr-nhan{color:#5d5d63}
.may-mo{color:#6e6e73}

.o-nhan i,.bnr-nhan i{opacity:1;color:#55555b}

/* ===== VIỆC 3.3 — KHỐI CHỮ ÁP CUỐI =====
   Nhỏ và nhạt, nhưng có ba giới hạn cứng:
     cỡ chữ tối thiểu 13px  ·  tương phản đạt AA  ·  dòng tối đa 75 ký tự
   Chữ quá nhỏ hoặc quá nhạt bị coi là chữ ẩn để nhồi từ khoá, sẽ bị phạt.
   Không dùng display:none, không max-height:0, không chữ cùng màu nền. */
.ap-cuoi{margin-top:var(--k6);padding-top:var(--k5);
         border-top:1px solid var(--vien)}
.ap-cuoi h2{font-size:17px;font-weight:600;letter-spacing:-.01em;
            color:var(--muc);margin-bottom:var(--k2)}
.ap-cuoi p{font-size:13.5px;line-height:1.75;color:#5f5f65;
           max-width:68ch;margin-top:12px}
.ap-cuoi p:first-of-type{margin-top:0}
@media(min-width:768px){
  .ap-cuoi h2{font-size:19px}
  .ap-cuoi p{font-size:14px;max-width:72ch}
}

/* ===== VIỆC 4 — sơ đồ từ thư viện, nhúng thẳng trong thân trang ===== */
.sd-khung{margin:0;background:var(--trang);border:1px solid rgba(0,0,0,.06);
          border-radius:var(--r2);padding:var(--k3) var(--k2)}
.sd-khung .sd-thu-vien{display:block;width:100%;height:auto}
.sd-khung figcaption{font-size:13.5px;line-height:1.7;color:#5f5f65;
                     margin-top:var(--k3);max-width:68ch}

/* ===== NỀN BANNER TỐI — chữ đổi sang trắng =====
   Màu nền banner do chủ xưởng chọn trong trang quản trị, đặt inline trên
   khối .bnr. Chọn nền "Than" thì chữ đen trên nền đen là mất chữ, nên
   những phần tử có màu cố định phải đổi theo. */
.bnr[data-nen-toi] .nho,
.bnr[data-nen-toi] .d1,
.bnr[data-nen-toi] .d2,
.bnr[data-nen-toi] .than{color:#fff}
.bnr[data-nen-toi] .than{opacity:.82}
.bnr[data-nen-toi] .nut.v{background:#fff;color:#1d1d1f;border-color:#fff}
.bnr[data-nen-toi] .bnr-nhan{color:rgba(255,255,255,.45)}

/* ===== TẠM HẾT HÀNG =====
   Dải chữ ở đầu banner. Trang vẫn lên web đầy đủ, chỉ báo cho khách biết —
   ẩn trang vì hết hàng vài tuần là mất thứ hạng gây dựng cả năm. */
.het-hang{
  display:inline-block;margin:0 0 12px;padding:6px 15px;border-radius:99px;
  background:#b45309;color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.02em;
}
.bnr[data-nen-toi] .het-hang{background:#f59e0b;color:#1d1d1f}

/* ═══════════ BANNER — TUỲ CHỌN NỀN, VỊ TRÍ, CHỮ ═══════════
   Đặt bằng thuộc tính data- trên khối .bnr, không phải class, để
   sinh-trang.py ghi thẳng giá trị từ dữ liệu mà không cần bảng tra. */

/* --- ảnh nền phủ toàn khung (khác ảnh máy) --- */
.bnr-nen{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;display:block}
.bnr[data-phu-mo] .bnr-nen{filter:brightness(.62)}

/* --- chữ nằm bên nào --- */
.bnr[data-chu="trai"]  .bnr-noi .bao{margin-right:auto;text-align:left}
.bnr[data-chu="giua"]  .bnr-noi .bao{margin:0 auto;text-align:center}
.bnr[data-chu="phai"]  .bnr-noi .bao{margin-left:auto;text-align:right}
.bnr[data-chu="giua"] .bnr-noi .than,
.bnr[data-chu="phai"] .bnr-noi .than{margin-left:auto;margin-right:0}
.bnr[data-chu="giua"] .bnr-noi .than{margin-right:auto}
.bnr[data-chu="giua"] .nut-hang{justify-content:center}
.bnr[data-chu="phai"] .nut-hang{justify-content:flex-end}

/* --- cỡ chữ tiêu đề --- */
.bnr[data-co="nho"]  .bnr-noi .d1{font-size:30px}
.bnr[data-co="vua"]  .bnr-noi .d1{font-size:40px}
.bnr[data-co="to"]   .bnr-noi .d1{font-size:52px}
@media(min-width:768px){
  .bnr[data-co="nho"] .bnr-noi .d1{font-size:38px}
  .bnr[data-co="vua"] .bnr-noi .d1{font-size:52px}
  .bnr[data-co="to"]  .bnr-noi .d1{font-size:70px}
}

/* --- màu chữ --- */
.bnr[data-mau-chu="trang"] .nho,
.bnr[data-mau-chu="trang"] .d1,
.bnr[data-mau-chu="trang"] .d2,
.bnr[data-mau-chu="trang"] .than{color:#fff}
.bnr[data-mau-chu="trang"] .than{opacity:.85}
.bnr[data-mau-chu="trang"] .nut.v{background:#fff;color:#1d1d1f;border-color:#fff}
.bnr[data-mau-chu="den"] .nho,
.bnr[data-mau-chu="den"] .d1,
.bnr[data-mau-chu="den"] .d2{color:#1d1d1f}
.bnr[data-mau-chu="den"] .than{color:#6e6e73}

/* --- SVG nằm bên nào --- */
.bnr[data-svg="trai"]  .bnr-svg{left:0;right:auto;width:52%}
.bnr[data-svg="giua"]  .bnr-svg{left:50%;right:auto;width:56%;
  transform:translateX(-50%)}
.bnr[data-svg="phai"]  .bnr-svg{left:auto;right:0;width:52%}

/* SVG trên banner là dải PHỤ, không phải hình chính — nó đè lên phần ảnh
   máy để ghi số liệu. Để nó to bằng nửa khung thì chồng cả lên chữ lẫn
   ảnh máy, đã thấy tận mắt với cánh xoắn inox trên trang chủ.

   Nên: SVG gọn lại, dán sát mép trên, cao tối đa 38% khung. Muốn hình vẽ
   to thì dùng mục "Nhóm 8 · SVG giải thích" ở giữa trang, chỗ đó rộng rãi. */
.bnr-svg{max-height:38%}
@media(min-width:768px){
  /* BỀ RỘNG ĐỌC TỪ BIẾN --svg-w, mặc định 34%.
     Trước đây viết cứng 34% ở ba dòng này, nên thanh trượt trong trang quản
     trị kéo thế nào cũng không đổi — ghi --svg-w:46% vào HTML mà luật này
     đè lên. Chủ xưởng tưởng thanh trượt hỏng. */
  .bnr[data-svg="trai"] .bnr-svg{left:3%;right:auto;width:var(--svg-w,34%)}
  .bnr[data-svg="giua"] .bnr-svg{left:50%;right:auto;width:var(--svg-w,34%);
    transform:translateX(-50%)}
  .bnr[data-svg="phai"] .bnr-svg{left:auto;right:3%;width:var(--svg-w,34%)}
}

/* ═══════════ BANNER CÓ SVG: CHỮ PHẢI NHƯỜNG CHỖ ═══════════
   SVG chiếm 34% khung. Chữ không giới hạn bề rộng thì tiêu đề trải gần hết
   khung, SVG đặt bên nào cũng đè lên chữ — đã đo cả bốn kiểu ghép, kiểu
   nào cũng đè.

   Nên: khi banner có SVG, khối chữ chỉ được 58% và dạt về phía đối diện.
   SVG ở giữa thì chữ xuống dưới, chừa khoảng trên cho SVG. */
@media(min-width:768px){
  .bnr[data-svg="trai"] .bnr-noi .bao{
    max-width:58%;margin-left:auto;margin-right:0}
  .bnr[data-svg="phai"] .bnr-noi .bao{
    max-width:58%;margin-left:0;margin-right:auto}
  .bnr[data-svg="giua"] .bnr-noi{padding-top:44%}
  .bnr[data-svg="trai"] .bnr-noi .than,
  .bnr[data-svg="phai"] .bnr-noi .than{max-width:100%}
}

/* SVG một bên, ảnh máy bên kia — chữ không còn chỗ nào ngang, phải xuống
   DƯỚI cả hai. Không làm vậy thì ảnh máy đè lên tiêu đề. */
@media(min-width:768px){
  .bnr[data-chu-duoi] .bnr-noi{padding-top:52%}
  .bnr[data-chu-duoi] .bnr-noi .bao{max-width:100%;margin:0}
  .bnr[data-chu-duoi] .bnr-svg{max-height:30%}
}

/* ═══════════ CHỮ TRÁNH ẢNH MÁY ═══════════
   Chữ phải tránh ẢNH MÁY trước tiên — ảnh máy to hơn SVG nhiều. Trước đây
   chữ chỉ dạt theo SVG nên kiểu "SVG giữa, ảnh phải" vẫn để tiêu đề đè lên
   ảnh máy. */
@media(min-width:768px){
  .bnr[data-anh="phai"]:not([data-chu-duoi]) .bnr-noi .bao{
    max-width:56%;margin-left:0;margin-right:auto}
  .bnr[data-anh="trai"]:not([data-chu-duoi]) .bnr-noi .bao{
    max-width:56%;margin-left:auto;margin-right:0}
  /* ảnh máy ở giữa thì chữ đè lên ảnh là cố ý — giữ nguyên bề rộng */
}

/* ═══════════ ĐIỆN THOẠI: XẾP DỌC, KHÔNG CHỒNG ═══════════
   Mọi quy tắc đặt ảnh và SVG ở trên đều nằm trong @media(min-width:768px).
   Màn hình hẹp thì không quy tắc nào ăn, ba thứ chồng lên nhau — chữ đè cả
   ảnh máy lẫn SVG, đọc không ra. Đã thấy trên khổ 390px.

   Trên điện thoại: SVG ở trên cùng, ảnh máy giữa, chữ dưới cùng. */
@media(max-width:767px){
  /* Điện thoại: SVG ĐÈ LÊN ảnh máy ở nửa trên — đúng thiết kế gốc của kiểu
     "ảnh + SVG đè lên". Không tách hai bên được, khung quá hẹp.

     Đã thử đẩy chữ xuống bằng padding, nhưng không ăn: đoạn giới thiệu
     trang chủ dài 10 dòng trên khổ 390px, chiếm gần hết banner. Chỗ chật
     là do đoạn chữ dài, không phải do SVG. */
  .bnr[data-svg] .bnr-svg{
    top:8%;left:50%;right:auto;transform:translateX(-50%);
    width:58%;max-height:22%;opacity:.92}
}

/* ═══════════ BANNER — SỬA SAU KHI THỬ BỐN CÁCH XẾP ═══════════

   1. ĐOẠN VĂN KHÔNG CĂN PHẢI, KHÔNG CĂN GIỮA.
      Chữ Việt có dấu, đoạn dài mà căn phải thì mắt phải dò lại điểm đầu
      mỗi dòng — đọc rất mệt. Chỉ tiêu đề và nhãn nhỏ căn theo lựa chọn,
      đoạn văn luôn căn trái.

   2. GIỚI HẠN BỀ RỘNG CHỮ.
      Màn hình 1400px mà chữ trải hết thì một dòng hơn 180 ký tự. Mắt đọc
      thoải mái là 60–90 ký tự.                                          */
.bnr-noi .than{text-align:left!important;max-width:62ch!important}
.bnr[data-chu="giua"] .bnr-noi .than{margin-left:auto;margin-right:auto}
.bnr[data-chu="phai"] .bnr-noi .than{margin-left:auto;margin-right:0}
@media(min-width:768px){
  .bnr-noi .d1,.bnr-noi .d2{max-width:20ch}
  .bnr[data-co="nho"] .bnr-noi .d1{max-width:28ch}
}
.bnr[data-chu="giua"] .bnr-noi .d1,
.bnr[data-chu="giua"] .bnr-noi .d2{margin-left:auto;margin-right:auto}
.bnr[data-chu="phai"] .bnr-noi .d1,
.bnr[data-chu="phai"] .bnr-noi .d2{margin-left:auto;margin-right:0}

/* ═══════════ CHỮ ĐÈ LÊN HÌNH — LỚP MỜ PHÍA SAU ═══════════
   Chủ xưởng chốt: cho chữ đè lên hình. Chữ đen trên máy vàng thì đọc không
   ra, nên cần lớp mờ đằng sau chữ.

   KHÔNG dùng var(--nen) trong gradient: biến đó không phân giải ở đây, rơi
   về màu đen và tô kín cả khung — đã thấy tận mắt, banner thành một khối
   đen. Ghi mã màu thật.

   Lớp mờ chỉ phủ vùng CÓ CHỮ và mờ dần, không phủ cả khung.              */
.bnr-noi{position:relative;z-index:2}
.bnr[data-mo-chu="1"] .bnr-noi::before{
  content:"";position:absolute;left:-6%;right:38%;top:-8%;bottom:-8%;
  z-index:-1;pointer-events:none;
  background:linear-gradient(to right,
    rgba(245,245,247,.94) 0%, rgba(245,245,247,.94) 62%,
    rgba(245,245,247,0) 100%)}
.bnr[data-mo-chu="1"][data-chu="phai"] .bnr-noi::before{
  left:38%;right:-6%;
  background:linear-gradient(to left,
    rgba(245,245,247,.94) 0%, rgba(245,245,247,.94) 62%,
    rgba(245,245,247,0) 100%)}
.bnr[data-mo-chu="1"][data-chu="giua"] .bnr-noi::before{
  left:-6%;right:-6%;
  background:radial-gradient(ellipse 60% 100% at center,
    rgba(245,245,247,.94) 0%, rgba(245,245,247,.7) 62%,
    rgba(245,245,247,0) 100%)}
/* nền tối thì lớp mờ cũng tối */
.bnr[data-mo-chu="1"][data-nen-toi] .bnr-noi::before{
  background:linear-gradient(to right,
    rgba(29,29,31,.94) 0%, rgba(29,29,31,.94) 62%,
    rgba(29,29,31,0) 100%)}

/* ẢNH VÀ SVG ĐẶT THEO PHẦN TRĂM — kéo thanh trượt là dịch, không còn ba
   mức trái/giữa/phải cứng nhắc. Giá trị đặt qua biến CSS. */
@media(min-width:768px){
  .bnr[style*="--svg-x"] .bnr-svg{
    left:var(--svg-x);right:auto;transform:translateX(-50%);
    width:var(--svg-w,34%)}
  .bnr[style*="--svg-y"] .bnr-svg{top:var(--svg-y)}
}

/* Dòng bản quyền ở chân trang. Nhỏ, mờ — có mặt để khi cần yêu cầu gỡ nội
   dung copy thì có chỗ chỉ vào, không phải để khoe. */
.ft-bq{margin:18px 0 0;font-size:12px;color:var(--nhat);line-height:1.6}

/* ═══════════ BANNER TRÊN ĐIỆN THOẠI — ẢNH TRÊN, CHỮ DƯỚI ═══════════
   Ảnh máy là position:absolute phủ cả khung. Trên máy tính thì chữ nằm một
   bên nên không đụng nhau, còn điện thoại chữ trải hết ngang — ảnh chồng
   lên chữ, đọc không ra. Nhân viên báo lỗi này khi xem trên máy khách.

   Dưới 768px: xếp dọc thật. Ảnh thành khối riêng ở trên, chữ ở dưới. */
@media(max-width:767.98px){
  /* BỎ khung cố định và BỎ cắt tràn.
     .bnr-chinh mặc định aspect-ratio 5/8 max-height 80vh — khung đó dựng cho
     ảnh phủ nền. Xếp dọc rồi mà giữ khung thì chữ dài bị cắt mất đuôi: đo
     được chữ cần 369px mà khung chỉ còn 675px cho cả ảnh lẫn chữ. */
  .bnr-chinh, .bnr-phu{aspect-ratio:auto;max-height:none;overflow:visible}
  .bnr{display:flex;flex-direction:column}
  /* KHÔNG đặt aspect-ratio cho ảnh — để nó theo khổ thật.
     Đặt 4/3 với object-fit contain thì ảnh ngang chín máy để lại hai dải
     trắng trên dưới, nhìn như lỗi. */
  /* GIỚI HẠN CHIỀU CAO ẢNH.
     Khuôn banner cho điện thoại là ảnh khổ DỌC, nên để nó theo khổ thật thì
     cao 624px — chiếm gần hết màn hình, khách phải cuộn mới thấy chữ. Chặn
     ở 46vh: ảnh vẫn to rõ mà chữ lọt vào màn hình đầu. */
  .bnr>picture,
  .bnr>img{position:relative;order:1;width:100%;height:auto;
    max-height:46vh;aspect-ratio:auto;object-fit:contain}
  .bnr-anh{position:relative;width:100%;height:auto;
    max-height:46vh;aspect-ratio:auto;object-fit:contain}
  .bnr-noi{order:2;padding:var(--k4) 0 var(--k5)}
  /* Ảnh nền phủ khung thì vẫn để phủ — nó cố tình làm nền, và chữ đã
     được đổi sang trắng trên nền tối. */
  .bnr-nen{position:absolute;inset:0;height:100%;object-fit:cover;
    aspect-ratio:auto}
  .bnr[data-phu-mo] .bnr-noi{order:0}
  /* SVG đè lên banner: xuống dưới ảnh, khỏi che máy */
  .bnr-svg{position:relative;order:1;left:auto;right:auto;top:auto;
    width:72%;max-height:none;margin:0 auto;transform:none}
  /* Chữ trên điện thoại luôn căn trái, không theo lựa chọn máy tính —
     căn giữa hay phải ở khổ hẹp thì đọc mệt. */
  .bnr .bnr-noi .bao{text-align:left;margin:0}
  .bnr .nut-hang{justify-content:flex-start}
}

/* ═══════════ CLIP YOUTUBE ═══════════
   Ảnh bìa + nút phát. Bấm mới tải video.

   KHÔNG nhúng iframe ngay: mỗi iframe YouTube kéo về hơn một megabyte
   JavaScript của Google, làm trang chậm hẳn dù khách không bấm xem. */
.clip{position:relative;overflow:hidden;border-radius:var(--r1);
  background:#e5e7eb;cursor:pointer}
.clip img.clip-bia{width:100%;height:100%;object-fit:cover;display:block}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-nut{position:absolute;inset:0;width:100%;height:100%;border:0;
  background:rgba(0,0,0,.18);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:background .18s}
.clip-nut:hover{background:rgba(0,0,0,.28)}
/* tam giác phát, vẽ bằng viền để khỏi thêm ảnh */
.clip-tam{width:72px;height:72px;border-radius:50%;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;position:relative}
.clip-tam::after{content:'';border-style:solid;border-width:13px 0 13px 22px;
  border-color:transparent transparent transparent #fff;margin-left:5px}
@media(min-width:768px){.clip-tam{width:88px;height:88px}}


/* ═══════════ CÔNG CỤ THỬ BỐ TRÍ MÁY ═══════════
   Gộp từ thanh-phan/2-kieu.css.

   ĐÃ ĐỔI TÊN BẢY LỚP có tiền tố tbt- : tile · wrap · eyebrow · lede ·
   reveal … Mấy tên đó trùng với lớp của trang, gộp trực tiếp là
   .reveal{opacity:0} làm TOÀN TRANG tàng hình — đã thấy tận mắt.

   Cũng nối tám biến màu của công cụ sang biến của trang: --ink thành
   --muc, --muted thành --phu… Không nối thì mọi màu về mặc định đen
   trên trắng. */
.tbt-hop{background:#fff;padding:66px 22px;text-align:center;overflow:hidden}.tbt-hop-xanh{background:#e7eef5}.tbt-bao{max-width:1024px;margin:0 auto}.tbt-nhan{font-size:13px;font-weight:600;color:#0071e3;margin-bottom:12px}.tbt-hop-toi .tbt-nhan{color:#2997ff}.tbt-dan{font-size:clamp(16px,1.5vw,20px);color:var(--phu);margin-top:16px;letter-spacing:-.01em;line-height:1.32}.tbt-hop-toi .tbt-dan{color:var(--phu)}@media(prefers-reduced-motion:reduce){}.calc{margin-top:52px}.calc-stage{background:var(--trang);border:1px solid var(--vien);
  border-radius:18px;padding:26px 22px 18px;}.calc-stage svg{width:100%;height:auto;display:block}.calc-controls{max-width:620px;margin:34px auto 0}.calc-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.calc-row label{font-size:15px;color:var(--phu)}.calc-area{font-size:22px;font-weight:600;letter-spacing:-.01em}.calc-slider{width:100%;height:26px;accent-color:#0071e3;
  background:transparent;cursor:pointer;}.calc-scale{display:flex;justify-content:space-between;font-size:13px;color:var(--phu);margin-top:2px}.calc-ket{margin-top:22px;text-align:center}.calc-so{font-size:15px;color:var(--phu)}.calc-so b{font-size:34px;color:var(--muc);font-weight:700;letter-spacing:-.02em;margin-right:6px}.calc-ghi{font-size:13px;color:var(--phu);margin-top:8px;max-width:440px;
  margin-left:auto;margin-right:auto;line-height:1.5}#ao-svg .may.dang-keo{cursor:grabbing}.calc-chon{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px}.calc-chon button{font:inherit;font-size:15px;padding:9px 18px;border-radius:980px;cursor:pointer;
  background:transparent;color:var(--phu);
  border:1px solid var(--vien);transition:background .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);}.calc-chon button[aria-pressed="true"]{background:var(--muc);color:var(--trang);border-color:transparent}.calc-cach{font-size:15px;color:var(--phu);margin-top:6px}.calc-ket{margin-top:22px;text-align:center}.calc-so{font-size:15px;color:var(--phu)}.calc-so b{font-size:34px;color:var(--muc);font-weight:700;letter-spacing:-.02em;margin-right:6px}.calc-ghi{font-size:13px;color:var(--phu);margin-top:8px;max-width:440px;
  margin-left:auto;margin-right:auto;line-height:1.5}html.js-loi .tbt-hop h2 .mo{color:var(--phu);font-weight:inherit}.kdau .tbt-bao{max-width:1024px;margin:0 auto;width:100%;padding:0 22px;flex:0 0 auto}.kdau .tbt-nhan{margin-bottom:10px}.kdau .tbt-dan{margin:0 auto;max-width:640px;font-size:clamp(19px,2.1vw,26px)}@media(max-width:560px){.kdau .tbt-bao{padding:0 18px}}#cong-cu .tbt-nhan,#cong-cu > .wrap-rong > h2{max-width:900px;margin-left:auto;margin-right:auto;
 padding:0 22px}#cong-cu > .wrap-rong > .tbt-nhan,#cong-cu > .wrap-rong > h2{max-width:900px;
 margin-left:auto;margin-right:auto;padding:0 22px}#thu-bo-tri .calc-stage{background:transparent!important;border:0!important;
 border-radius:0!important;padding:0!important}#thu-bo-tri .calc{margin-top:34px}#thu-bo-tri .calc-controls{margin-top:26px}#thu-bo-tri .calc-keo{margin-top:6px}#thu-bo-tri .calc-ket{margin-top:18px}#thu-bo-tri .calc-ghi{display:none}#cong-cu > .wrap-rong > .tbt-nhan,#cong-cu > .wrap-rong > h2{max-width:900px;
 margin-left:auto;margin-right:auto;padding:0 22px}.kdau .tbt-dan{max-width:760px}.kdau-hinh > .tbt-bao{position:relative;z-index:2;flex:0 0 auto;padding:54px 22px 60px}.kdau-hinh .tbt-nhan{color:#9ed0ff}.kdau-hinh .tbt-dan{color:rgba(255,255,255,.88)}@media(max-width:900px){.kdau-hinh > .tbt-bao{padding:42px 18px 48px}}@media(max-width:560px){.kdau-hinh > .tbt-bao{padding:34px 18px 40px}}
/* Câu thay giá khi máy bán trọn bộ, giá tuỳ cấu hình.
   Nhỏ hơn giá thật vì nó là một câu, không phải con số. */
.gia-goi{font-size:19px;font-weight:600;color:var(--phu)}
@media(min-width:768px){.gia-goi{font-size:22px}}

/* Dòng Bộ Công Thương ở chân trang. Nhỏ, mờ — dấu tin cậy, không phải
   chỗ muốn khách bấm vào. */
.ft-bct{margin:10px 0 0;font-size:12px}
.ft-bct a{color:var(--phu);text-decoration:underline}

/* ═══════════ Ô SVG NHỎ TRONG THẺ DÒNG ═══════════
   Nằm dưới chữ, trong luồng đọc — khác SVG đè banner nằm trên ảnh máy.
   Khách đọc "rải hình quạt 120°" thì thấy ngay hình quạt, không phải
   tưởng tượng hay bấm vào trang mới. */
.sdt{margin-top:26px;max-width:420px}
.sdt-tieu{font-size:14px;font-weight:600;color:var(--muc);
  margin:0 0 10px;text-align:center}
/* KHÔNG nền, KHÔNG viền.
   SVG trong thư viện đã VẼ SẴN khung xám bên trong. Bọc thêm khung nữa thì
   ra hai lớp lồng nhau, nhìn như lỗi giao diện. */
.sdt-khung{overflow:hidden}
.sdt-khung svg{width:100%;height:auto;display:block}
.sdt-chu{margin:10px 0 0;text-align:center;font-size:13px;color:var(--phu);
  line-height:1.65}
.sdt-chu span{display:block}
@media(min-width:768px){
  .sdt{margin-top:30px}
  .sdt-tieu{font-size:15px}
  .sdt-chu{font-size:13.5px}
}

/* ═══════════ KHỐI SƠ ĐỒ CĂN GIỮA ═══════════
   Nhãn nhỏ · tiêu đề lớn · câu phụ · SVG lớn · chú thích.
   Chỉ áp khi mục sơ đồ có ô nhan/dau/phu — không thì giữ bố cục cũ. */
.sd-muc{padding-top:var(--k6)}
.sd-dau{text-align:center;max-width:760px;margin:0 auto var(--k4)}
.sd-nhan{margin:0 0 12px;font-size:13px;font-weight:600;color:#0071e3}
.sd-de{margin:0;font-size:29px;font-weight:700;letter-spacing:-.02em;
  line-height:1.14;color:var(--muc)}
.sd-phu{margin:14px 0 0;font-size:16px;color:var(--phu);line-height:1.5}
.sd-giua figcaption{text-align:center;max-width:640px;margin-left:auto;
  margin-right:auto}
.sd-chu-giua{text-align:center;max-width:640px;margin-left:auto;
  margin-right:auto}
@media(min-width:768px){
  .sd-de{font-size:40px}
  .sd-phu{font-size:18px}
  .sd-nhan{font-size:14px}
}

/* Chừa chỗ cho thanh menu dán trên khi cuộn tới một mục.
   Không có dòng này thì bấm link tới mục nào là thanh menu che tiêu đề mục
   đó — thấy khi chụp ảnh từng khối, mà khách bấm link cũng bị y vậy. */
/* 72px chỉ vừa hết thanh menu, nhãn xanh phía trên tiêu đề vẫn bị che
   một nửa. Đo trên trình duyệt: thanh cao 57px, nhãn cao 20px, cần thêm
   khoảng thở — 96px thì nhãn hiện đủ. */
.muc,.sd-muc,.bnr{scroll-margin-top:96px}

/* ═══════════ CHỮ CHỈ CHO MÁY ĐỌC ═══════════
   Mô tả hình cho người khiếm thị. Mắt không thấy, máy đọc màn hình và bot
   tìm kiếm vẫn đọc đủ.

   KHÔNG dùng display:none hay visibility:hidden — hai cái đó giấu luôn với
   máy đọc màn hình, và Google bỏ qua nội dung. Mất cả hai mục đích.

   Cách này là chuẩn phổ biến: đẩy ra ngoài khung nhìn 1px rồi cắt sạch. */
.chi-may-doc{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Ô để khách để lại tên và số ===== */
.don{margin-top:var(--k3);max-width:460px}
.don-o{margin-bottom:var(--k2)}
.don-o label{display:block;font-size:15px;color:var(--phu);margin-bottom:6px}
.don-o input{width:100%;padding:14px 16px;font:inherit;font-size:16px;
  background:var(--trang);color:var(--muc);
  border:1px solid var(--vien);border-radius:var(--r1);appearance:none}
.don-o input:focus{outline:2px solid var(--muc);outline-offset:1px;border-color:var(--muc)}
.don-o input[aria-invalid="true"]{border-color:#c0392b}
/* Bẫy máy gửi rác. Đẩy ra ngoài khung nhìn, KHÔNG dùng display:none —
   máy biết bỏ qua ô ẩn kiểu đó. */
.don-bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.don-gui{margin-top:var(--k1);cursor:pointer;border:0}
.don-gui[disabled]{opacity:.55;cursor:default}
.don-bao{margin-top:var(--k2);font-size:15px;line-height:1.6;min-height:1px}
.don-bao.xong{color:#1e7a45}
.don-bao.hong{color:#c0392b}
/* Nút nổi. z-index 2 — DƯỚI vùng vuốt ngang (z-index 3) để không nuốt cú vuốt. */
.don-noi{position:fixed;right:16px;bottom:16px;z-index:2;
  padding:13px 20px;border-radius:999px;border:0;cursor:pointer;
  background:var(--muc);color:var(--trang);font:inherit;font-weight:600;font-size:15px;
  box-shadow:0 6px 20px rgba(0,0,0,.22);text-decoration:none}
@media (prefers-reduced-motion:no-preference){.don-noi{transition:transform .15s}}
.don-noi:active{transform:scale(.96)}
@media print{.don-noi{display:none}}

/* ═══════════ LƯỚI MÁY VUỐT NGANG ═══════════
   Chủ xưởng chốt 15/08/2026: danh sách máy vuốt ngang thay vì xếp dọc,
   cho trang ngắn lại. Áp cho CẢ máy tính lẫn điện thoại.

   BỐN CÁI BẪY ĐÃ VẤP TRONG DỰ ÁN NÀY — đừng sửa nếu chưa đọc hết:

   1. VUỐT BỊ HIỂU THÀNH BẤM. Đã xảy ra BA LẦN. Vùng cuộn phải nằm TRÊN
      lớp phủ link, nên vùng cuộn z-index:3 còn thẻ link hạ xuống z-index:1.
      Không làm là ngón tay vừa kéo đã nhảy sang trang khác.

   2. scroll-snap-type PHẢI LÀ proximity. Để mandatory thì iPhone Safari
      kẹt cứng cuộn DỌC mỗi khi chạm vùng cuộn ngang — cả trang đứng im.

   3. overflow-x:auto TỰ KÉO THEO overflow-y:auto và cắt mất nội dung.
      Phải ghi rõ overflow-y:hidden, không được bỏ.

   4. KHÔNG dùng :has() — iOS dưới 15.4 không hiểu, cả khối hỏng im lặng.  */
.luoi-vuot{
  display:flex; gap:var(--k2);
  overflow-x:auto;
  overflow-y:hidden;                 /* bẫy 3 — bắt buộc ghi rõ */
  scroll-snap-type:x proximity;      /* bẫy 2 — KHÔNG mandatory */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  position:relative; z-index:3;      /* bẫy 1 — trên lớp phủ link */
  padding:2px 2px 10px;
  margin-left:calc(var(--le) * -1); margin-right:calc(var(--le) * -1);
  padding-left:var(--le); padding-right:var(--le);
  scrollbar-width:thin; scrollbar-color:var(--khoi2) transparent;
}
.luoi-vuot::-webkit-scrollbar{height:6px}
.luoi-vuot::-webkit-scrollbar-thumb{background:var(--khoi2);border-radius:99px}
.luoi-vuot::-webkit-scrollbar-track{background:transparent}
.luoi-vuot > .may{
  flex:0 0 auto;
  width:min(264px, 68vw);
  scroll-snap-align:start;
  position:relative; z-index:1;      /* bẫy 1 — dưới vùng cuộn */
}
@media(min-width:700px){
  .luoi-vuot > .may{width:min(300px, 30vw)}
}

/* ═══════════ ẢNH THỰC TẾ: ẢNH LỚN + DẢI ẢNH NHỎ VUỐT NGANG ═══════════
   Chủ xưởng chốt 15/08/2026: mỗi máy 5 tới 9 ảnh thực tế, vuốt ngang,
   bấm ảnh nào thì ảnh đó hiện lớn.

   Bốn bẫy vuốt ngang giống khối .luoi-vuot phía trên — đọc lại ở đó
   trước khi sửa. KHÔNG dùng :has(): lớp "hien" và "chon" do JavaScript
   gán, vì iOS dưới 15.4 không hiểu :has().

   Không có JavaScript thì ảnh đầu vẫn hiện, dải ảnh nhỏ vẫn vuốt được —
   chỉ mất việc đổi ảnh. Trang không gãy. */
.atk-lon{position:relative}
.atk-o{display:none}
.atk-o.hien{display:block}
.atk-dai{
  display:flex; gap:10px;
  margin-top:var(--k2);
  overflow-x:auto;
  overflow-y:hidden;                 /* bẫy 3 */
  scroll-snap-type:x proximity;      /* bẫy 2 */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  position:relative; z-index:3;      /* bẫy 1 */
  padding-bottom:8px;
  scrollbar-width:thin; scrollbar-color:var(--khoi2) transparent;
}
.atk-dai::-webkit-scrollbar{height:6px}
.atk-dai::-webkit-scrollbar-thumb{background:var(--khoi2);border-radius:99px}
.atk-nho{
  flex:0 0 auto; width:84px; padding:0; border:0; background:none;
  cursor:pointer; border-radius:12px; overflow:hidden;
  scroll-snap-align:start;
  position:relative; z-index:1;      /* bẫy 1 */
  outline:2px solid transparent; outline-offset:2px;
}
@media(min-width:700px){.atk-nho{width:104px}}
.atk-nho .o{border-radius:12px}
.atk-nho.chon{outline-color:var(--muc)}
.atk-nho:focus-visible{outline-color:#0071e3}
@media(prefers-reduced-motion:no-preference){
  .atk-nho{transition:opacity .18s}
}
.atk-nho:not(.chon){opacity:.55}
.atk-nho:not(.chon):hover{opacity:.85}

/* ═══════════ KHỐI ĐỂ LẠI SỐ — MỘT KHỐI MÀU, CÓ ẢNH NHÂN VIÊN ═══════════
   Chủ xưởng chốt 15/08/2026: gom thành một khối màu tĩnh, ảnh nhân viên
   bên phải, để khách thấy mặt người rồi mới để lại số.

   Nền dùng --khoi (#e3e3e8), đậm hơn nền trang một bậc — đủ tách khỏi
   trang mà không chói. KHÔNG dùng màu mới: thêm màu lạ vào bảng màu là
   sau này mỗi chỗ một kiểu.

   Trên điện thoại xếp DỌC: chữ trên, ảnh dưới. Ảnh không bị bóp méo vì
   khung đã dựng sẵn đúng tỉ lệ 3:4 lúc làm ảnh. */
.gd{background:var(--khoi)}
.gd-bao{display:block}
.gd-anh{margin-top:var(--k3);text-align:center}
.gd-anh img{width:min(260px,64vw);height:auto;display:inline-block;
  border-radius:var(--r2)}
@media(min-width:860px){
  .gd-bao{display:flex;align-items:flex-end;gap:var(--k5);
    justify-content:space-between}
  .gd-chu{flex:1 1 auto;min-width:0}
  .gd-anh{flex:0 0 auto;margin-top:0;align-self:flex-end}
  .gd-anh img{width:300px}
}

/* ═══════════ KHỐI ĐỂ LẠI SỐ CÓ ẢNH NHÂN VIÊN — CHỈ TRANG CHỦ ═══════════
   Chủ xưởng chốt 15/08/2026: gộp thành một khối màu riêng, ảnh nhân viên
   đứng bên phải, chỉ hiện ở trang chủ.

   Ảnh nhân viên nằm SAU phần chữ trong mã HTML để máy đọc màn hình đọc
   nội dung trước. CSS kéo sang phải, không đổi thứ tự trong mã. */
.gd-co-nv{background:var(--trang);border-radius:var(--r3);
  margin-left:var(--le);margin-right:var(--le);overflow:hidden}
.gd-bao{display:block}
@media(min-width:860px){
  .gd-bao{display:flex;align-items:flex-end;gap:var(--k5)}
  .gd-chu{flex:1 1 auto;min-width:0;padding-bottom:var(--k5)}
  /* Ảnh người: KHOÁ CHIỀU CAO, không khoá bề rộng.
     Khoá bề rộng thì người gầy hay người mập ra hai chiều cao khác nhau,
     mà ảnh cắt tới đầu gối lại vống lên cao hơn cả cột chữ. Chủ xưởng
     báo "to quá" 15/08/2026. */
  /* Người cao bằng NỬA khối. Chủ xưởng chốt 15/08/2026.
     Khoá theo phần trăm chứ không khoá px: khối dài ngắn theo nội dung
     từng trang, khoá px thì trang ngắn người vống lên, trang dài người
     lọt thỏm. align-items:stretch cho .gd-anh có chiều cao xác định,
     không thì height:50% không tính được. */
  .gd-bao{align-items:stretch}
  .gd-anh{flex:0 0 auto;margin:0;max-width:46%;
          display:flex;align-items:flex-end;justify-content:center}
  .gd-anh img{height:50%;width:auto;min-height:200px}
}
.gd-anh{display:block;margin:var(--k3) auto 0}
.gd-anh img{display:block;width:auto;height:260px;margin:0 auto}
/* Điện thoại: ảnh thấp lại, nằm dưới phần chữ */
@media(max-width:859px){
  .gd-anh img{height:230px;margin-left:0}
}
@media print{.gd-anh{display:none}}

/* Nút Gọi và Zalo nằm SAU ô nhập trong khối đã gộp — chốt 15/08/2026.
   Ô nhập mới là việc chính, hai nút này là đường vòng cho người ngại gõ,
   nên đặt sau và ghi nhẹ hơn. */
.gd-hoac{margin-top:var(--k4);font-size:15px;color:var(--phu)}
.gd-nut{margin-top:var(--k1)}
.gd-dia{margin-top:var(--k3)}


/* ═══════════ GỘP MỘT KHỐI LIÊN HỆ ═══════════
   Trước đây "Cần tư vấn máy" và "Để lại số" là hai mục rời, hai nền khác
   nhau, giữa có đường cắt ngang. Cùng một chuyện mà chia đôi thì khách
   phải đọc hai lần. Chủ xưởng chốt gộp 15/08/2026. */
.gd .gd-dc{margin-top:var(--k3);font-size:15px}
.gd .gd-tieu-de-phu{margin-top:var(--k5)}
.gd .don{margin-top:var(--k2)}
/* Nền riêng chỉ khi có ảnh người — không thì khối trơn như các mục khác */
.gd-co-nv .gd-chu{padding-top:var(--k5)}
@media(min-width:860px){
  .gd-co-nv .gd-chu{padding-right:var(--k3)}
}

/* ═══════════ BANNER CÓ ẢNH NGƯỜI: CHỮ LÊN GIỮA ═══════════
   Banner mặc định dồn chữ xuống ĐÁY — hợp với ảnh máy phủ kín khung.
   Nhưng banner ảnh người thì người đứng giữa khung, chữ nằm dưới chân,
   nhìn rời hai mảnh. Chủ xưởng báo 15/08/2026: cho chữ lên ngang người.

   Chỉ áp cho banner được đánh dấu data-nguoi="1", không đụng banner máy. */
.bnr[data-nguoi="1"]{align-items:center}
/* Người CANH GIỮA khung theo chiều dọc.
   Bản trước neo bottom:0 cho người đứng chạm đáy. Chủ xưởng xem thật trên
   trang liên hệ rồi đổi ý cùng ngày 15/08/2026: cho lên giữa khung.
   Nên KHÔNG ghi đè top/transform nữa — để luật chung của [data-anh-co]
   ở mục "CỠ ẢNH CHỈNH ĐƯỢC" tự canh giữa. Chỉ giữ phần đẩy vào 6% cho
   người khỏi sát mép, và giữ nguyên transform canh giữa của luật chung. */
@media(min-width:768px){
  .bnr[data-nguoi="1"][data-anh-co][data-anh="phai"] .bnr-anh{
    right:6%; left:auto;
  }
  .bnr[data-nguoi="1"][data-anh-co][data-anh="trai"] .bnr-anh{
    left:6%; right:auto;
  }
  /* Chữ nhích lên giữa khung, ngang tầm thân người */
  .bnr[data-nguoi="1"] .bnr-noi{padding-bottom:var(--k6)}
}
@media(max-width:767px){
  /* Điện thoại banner xếp dọc, chữ vẫn nằm dưới ảnh — giữ nguyên */
  .bnr[data-nguoi="1"]{align-items:flex-end}
}

/* ═══════════ BANNER XẾP DỌC: ẢNH TRÊN, CHỮ DƯỚI ═══════════
   Banner mặc định cho chữ ĐÈ LÊN ảnh — hợp khi ảnh phủ kín khung.
   Nhưng dàn máy xếp so le thì chữ che mất mấy cái máy bên trái.
   Chủ xưởng chốt 15/08/2026: trang chủ ảnh trên, chữ dưới, cùng khung.

   Bỏ aspect-ratio và max-height: khung tự cao theo ảnh cộng chữ, không
   ép tỉ lệ nữa. Ảnh chuyển từ nằm đè sang nằm xuôi trong dòng. */
.bnr[data-xep="doc"]{
  display:flex; flex-direction:column; align-items:stretch;
  aspect-ratio:auto; max-height:none; padding-top:var(--k4);
}
.bnr[data-xep="doc"] picture{position:static;display:block;width:100%}
.bnr[data-xep="doc"] .bnr-anh,
.bnr[data-xep="doc"][data-anh-co] .bnr-anh{
  position:static; inset:auto; left:auto; right:auto; top:auto;
  transform:none; margin:0 auto;
  width:min(var(--anh-co,92%),100%); height:auto;
  object-fit:contain; display:block;
}
.bnr[data-xep="doc"] .bnr-noi{padding-top:var(--k3);padding-bottom:var(--k5)}
@media(max-width:767px){
  .bnr[data-xep="doc"]{padding-top:var(--k3)}
  .bnr[data-xep="doc"] .bnr-anh{width:100%}
}