: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{display:inline-flex;align-items:center;justify-content:center;height:36px;font-size:14px;font-weight:600;padding:0 18px;border-radius:999px;background:#0071e3;color:#fff;white-space:nowrap}
.hd-nut a.v{background:transparent;color:#0071e3;border:1px solid #0071e3}

/* 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{display:inline-flex;align-items:center;height:36px;font-size:14px;font-weight:500;padding:0 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:14px;font-weight:600;
       height:36px;padding:0 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 — DẤU VẾT BẢN MẪU =====
   Sáu lớp m-* dưới đây là màu ĐÁNH DẤU hồi làm bản nháp, để phân biệt
   loại khối khi dựng. Không phải màu thiết kế thật. Lẽ ra phải bỏ trước
   khi lên web mà còn sót.

   m-sp đổi về TRẮNG ngày 17/08/2026 — chủ xưởng thấy ô ảnh sản phẩm
   nền kem trong khi ảnh máy nền trắng, nhìn mỗi máy một kiểu. Ô ảnh
   sản phẩm dùng ở 650 chỗ, đổi ở đây là đổi hết, khỏi sửa từng trang.

   m-bc và m-bp chỉ còn tác dụng ngoài banner — trên banner đã bị style
   nội tuyến từ du-lieu.json ghi đè. m-clip còn 43 chỗ, m-svg và m-map
   không còn chỗ nào dùng. Chờ chủ xưởng xem rồi tính. */
.o{color:rgba(0,0,0,.42)}
.m-bc,  .bnr.m-bc  {background:#fff}
.m-bp,  .bnr.m-bp  {background:#fff}
.m-sp,  .o.m-sp    {background:#fff}
.m-svg, .o.m-svg   {background:#e0d7f0}
.m-clip,.o.m-clip  {background:#fff}
.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}
.o32{aspect-ratio:3/2}
.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)}.g1m2{grid-template-columns:repeat(2,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:36px;padding:0 18px;
     border-radius:999px;font-size:14px;font-weight:600;background:#0071e3;color:#fff}
.nut:active{opacity:.7}

.nut.v{background:transparent;color:#0071e3;border:1px solid #0071e3}
.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 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;white-space:nowrap}
@media(min-width:520px){.nut-hang.ba .nut{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}
.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:#0071e3;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:#0071e3;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,.don-o select,.don-o textarea{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 textarea{resize:vertical;line-height:1.6}
.don-o input:focus,.don-o textarea: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;height:44px;padding:0 24px}
.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:#0071e3;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}}

/* ═══════════ ẢNH NHÂN VIÊN TRONG Ô "CẦN TƯ VẤN MÁY" — TO LÊN, CANH GIỮA
   Chủ xưởng chỉ tận màn hình 15/08/2026: người bên tay phải nhỏ quá và
   nằm dí dưới đáy. Cho to lên và đưa vào giữa khung.

   Đặt Ở CUỐI FILE, sau hai dòng .gd-anh viết đè phía trên. Hai dòng đó
   nằm NGOÀI mọi @media nên trước đây đè chết luật height:50% trong khối
   860px — ảnh bị khoá cứng 260px ở mọi khổ màn hình. Viết ở đây mới ăn.

   Khoá theo PHẦN TRĂM chiều cao khối, 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. Giữ min-height và max-height làm hai đầu chặn.

   Áp cho 31 trang có khối này. Điện thoại KHÔNG đụng — vẫn xếp dọc,
   ảnh nằm dưới chữ, cao 230px như cũ. */
@media(min-width:860px){
  .gd-bao{align-items:stretch}
  .gd-anh{display:flex; align-items:center; justify-content:center;
    flex:0 0 auto; margin:0; max-width:46%}
  .gd-anh img{height:75%; width:auto; margin:0;
    min-height:260px; max-height:440px}
}

/* ═══════════ KHUNG MÀU SAU LƯNG NHÂN VIÊN — MỌI TRANG CÓ Ô NÀY ═══════
   Chủ xưởng chốt 15/08/2026: khung xanh nhạt #eaf2fb, cao 496, rộng 601,
   người cao 87% khung, xê ngang -11. Chân người bằng đáy khung.
   Lúc đầu chỉ định làm trang chủ, sau xem thật rồi chốt làm hết 31 trang.

   Bám vào gd-co-nv — lớp này có ở CẢ 31 trang có ô "Cần tư vấn máy".
   Lớp gd-nv-khung riêng cho trang chủ ĐÃ BỎ, không cần nữa.

   Bốn ảnh nhân viên khác nhau chạy qua luật này:
     nhan-vien-bom        16 trang
     nhan-vien-cho-an     13 trang
     nhan-vien-bao-hanh    1 trang
     nhan-vien-tu-van      1 trang
   Cả bốn đã kiểm: chân chạm đáy ảnh, nên đứng bằng đáy khung.
   Cả bốn bản jpg dự phòng đã nướng lại nền #eaf2fb.

   ĐỪNG nhầm với nhan-vien-bao-hanh-ngang-*.jpg — đó là banner đầu trang
   bao-hanh, không có khung, vẫn nướng nền #f5f5f7. Đổi nhầm là lộ ô xanh
   trên nền xám.

   Bề rộng khoá 601px nhưng chặn thêm max-width:46%: màn hình hẹp cỡ 900px
   mà để nguyên 601px thì khung ép cột chữ bẹp dí. */
@media(min-width:860px){
  .gd-co-nv .gd-anh{
    background:#eaf2fb; border-radius:var(--r3); overflow:hidden;
    height:496px; width:601px; max-width:46%;
    display:flex; align-items:flex-end; justify-content:center;
  }
  .gd-co-nv .gd-anh img{
    height:87%; max-height:none; min-height:0;
    transform:translateX(-11px);
  }
}
/* Điện thoại: khung chạy hết bề ngang, thấp lại cho vừa màn.
   Tỉ lệ người giữ 87% như bản màn rộng. */
@media(max-width:859px){
  .gd-co-nv .gd-anh{
    background:#eaf2fb; border-radius:var(--r3); overflow:hidden;
    height:340px; display:flex; align-items:flex-end; justify-content:center;
  }
  .gd-co-nv .gd-anh img{height:87%; margin:0}
}

/* 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 NHÓM DÒNG: CÂN LẠI BỐ CỤC ═══════════
   16 cái .bnr-doan, nằm ở 5 trang nhóm. KHÔNG đụng 56 banner bnr-chinh.

   Bốn số mặc định, chủ xưởng chốt 15/08/2026:
     cao 683px · ảnh máy cách mép phải 11% · cột chữ 53% · sơ đồ 420px
   Cỡ ảnh máy khai riêng từng cái bằng --anh-co trong HTML, mặc định 80%.

   VIẾT BẰNG BIẾN để ghi đè được TỪNG CÁI. Muốn một banner khác mấy cái
   kia thì thêm vào thẻ <a> của nó, ví dụ:  style="--d-cao:540px"

   ⚠ SỬA MỘT LỖI CỦA BẢN TRƯỚC. Bản trước nhắm vào .bnr-svg — lớp đó
   KHÔNG CÓ trong mấy banner này. Sơ đồ ở đây là .sdt, nằm TRONG cột chữ
   và chảy theo dòng, không phải đặt nổi. Nên ba dòng chỉnh vị trí sơ đồ
   của bản trước không ăn gì hết. Sơ đồ chỉ chỉnh được BỀ RỘNG. */
@media(min-width:768px){
  .bnr-doan{height:var(--d-cao,683px)}
  .bnr-doan[data-anh-co][data-anh="phai"] .bnr-anh{right:var(--d-phai,11%);left:auto}
  .bnr-doan[data-anh-co][data-anh="trai"] .bnr-anh{left:var(--d-phai,11%);right:auto}
  .bnr-doan[data-anh="phai"]:not([data-chu-duoi]) .bnr-noi .bao,
  .bnr-doan[data-anh="trai"]:not([data-chu-duoi]) .bnr-noi .bao{
    max-width:var(--d-chu,53%)}
  .bnr-doan .sdt{max-width:var(--d-sodo,420px)}
  /* Sơ đồ nằm trong cột chữ nên không cần đẩy chữ xuống nữa */
  .bnr-doan[data-svg="giua"] .bnr-noi{padding-top:0}
}
   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, KHÔNG chạm đáy nữa.
   Chủ xưởng tự kéo thử trên bang-chinh-anh.html rồi chốt 15/08/2026:
     cao banner 544px · cỡ người 78% · cách mép phải 24% · cột chữ 39%
   Trong ngày này đã đổi ý ba lần về chỗ đứng của người: chạm đáy → giữa
   → chạm đáy → giữa. Lần này là lần chốt, có xem tận mắt bằng bảng kéo.
   Ở cỡ 78% với mép phải 24% thì người không còn choán khung như hồi
   thử 75% mà để sát mép 6%.

   BỐN SỐ NÀY ĐI VỚI NHAU. Đổi một cái phải xem lại cả bốn — chẳng hạn
   kéo cột chữ rộng ra mà không đẩy người ra xa thì chữ đè lên người.

   Chỉ áp cho banner data-nguoi="1", tức /lien-he và /bao-hanh. Không
   đụng 49 banner máy. Cỡ người 78% khai trong du-lieu.json (anh_co). */
@media(min-width:768px){
  .bnr[data-nguoi="1"]{height:544px}
  .bnr[data-nguoi="1"][data-anh-co] .bnr-anh{
    top:50%; bottom:auto; transform:translateY(-50%);
  }
  .bnr[data-nguoi="1"][data-anh-co][data-anh="phai"] .bnr-anh{
    right:24%; left:auto;
  }
  .bnr[data-nguoi="1"][data-anh-co][data-anh="trai"] .bnr-anh{
    left:24%; right:auto;
  }
  /* Cột chữ hẹp lại còn 39% để chừa chỗ cho người, không đè lên nhau */
  .bnr[data-nguoi="1"] .bnr-noi{padding-bottom:0}
  .bnr[data-nguoi="1"] .bnr-noi .bao{max-width:39%}
}
@media(max-width:767px){
  /* Điện thoại banner xếp dọc, chữ vẫn nằm dưới ảnh — giữ nguyên.
     KHÔNG khoá cao 544px ở đây, màn hẹp mà ép chiều cao là vỡ. */
  .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%}
}

/* ═══════════ ICON NHÓM MÁY TRONG MENU ═══════════
   Chủ xưởng chốt 15/08/2026: đưa hình máy thật ra trước tên nhóm, ở CẢ
   thanh menu trên cùng lẫn bảng xổ "Nhóm máy".

   Icon cắt từ ảnh máy thật rồi tách nền. Năm trong bảy ảnh gốc nền TRẮNG
   ĐẶC, không trong suốt — để nguyên thì icon thành ô trắng nổi trên nền
   xám của thanh menu. Đã tách bằng cách xoá vùng trắng DÍNH MÉP, giữ
   nguyên phần trắng bên trong máy (thùng inox, nhãn).

   Riêng ao-noi-bat-hdpe là ảnh chụp thật ngoài đồng, không tách nền được,
   để nguyên như một ô ảnh. Nhìn khác sáu cái kia là cố ý.

   .mn-in a vốn dùng justify-content:space-between cho tên trái, số mẫu
   phải. Thêm icon vào thành ba món, space-between kéo tên ra giữa. Nên
   đổi sang flex-start rồi đẩy số mẫu sang phải bằng margin-left:auto. */
.dm-ic{flex:0 0 auto;object-fit:contain;display:block}
.hd-dm a{display:inline-flex;align-items:center;gap:6px}
.hd-dm .dm-ic{width:24px;height:24px}
.mn-in a{justify-content:flex-start}
.mn-in a small{margin-left:auto}
.mn-in a.dang::after{margin-left:auto}
.mn-in .dm-ic{width:44px;height:44px;background:var(--khoi);
  border-radius:10px;margin-right:2px}

/* Ghi chú nhỏ cạnh giá — dùng khi một máy có nhiều bản giá khác nhau.
   Máy bơm bùn dưới nước bán bầu bơm trơn 1.390.000đ hoặc trọn bộ có mô tơ
   8.990.000đ, hai dòng giá đứng cạnh nhau nên phải nói rõ dòng nào là gì. */
.gia-ghi{font-size:.5em;font-weight:400;color:var(--muc);margin-left:.4em}