/* /phoi-mau — giao diện bản 2 (21/09/2026).
   Nguyên tắc: ảnh là nhân vật chính, không nút nào đè lên ảnh; mọi điều khiển nằm ở
   hàng công cụ dưới ảnh và bảng bên phải. Nhận diện theo eb.css của website
   (Be Vietnam Pro · xanh 24700B · vàng CC8D00 · thang ink). Sân ảnh nền tối để ảnh
   nổi; phần còn lại nền giấy như website.                                          */

:root{
  --paper:#FFFFFF; --sand:#F7F5F0;
  --ink-900:#131714; --ink-800:#1E241F; --ink-700:#333B35; --ink-600:#4E574F;
  --ink-500:#6B756D; --ink-400:#909890; --ink-300:#C3C9C4; --ink-200:#E2E6E3; --ink-100:#F1F3F1;
  --green-900:#0F3505; --green-800:#1A5208; --green-700:#24700B; --green-600:#2E8A0E;
  --green-100:#DFEFD6; --green-050:#F1F8EC;
  --gold-700:#A57200; --gold-600:#CC8D00; --gold-100:#F9EED2;
  --san-nen:#15191A; --san-cc:#1E2422; --san-vien:#2C3431; --san-chu:#E6EAE7; --san-mo:#9AA39D;
  --ff:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --r:10px; --dau-cao:56px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--sand);color:var(--ink-900);font:15px/1.5 var(--ff);
     -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;
     height:100vh;height:100dvh;overflow:hidden}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--green-600);outline-offset:2px}
img{max-width:100%}
h1,h2{margin:0}
::selection{background:var(--green-100)}

/* ── THANH ĐẦU ─────────────────────────────────────────────────────────────── */
.dau{flex:0 0 var(--dau-cao);display:flex;align-items:center;gap:18px;padding:0 20px;
     background:var(--paper);border-bottom:1px solid var(--ink-200);position:relative;z-index:30}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:34px;width:auto;display:block}
.tieu{display:flex;align-items:center;gap:10px;min-width:0}
.tieu h1{font-size:1.02rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.the{font-size:.66rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
     color:var(--gold-700);background:var(--gold-100);border-radius:99px;padding:3px 9px;white-space:nowrap}

.canh-hien{margin-left:auto;display:flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;
           background:var(--sand);border:1px solid var(--ink-200);border-radius:99px;cursor:pointer;
           max-width:min(46vw,380px);min-width:0;transition:border-color .15s,background .15s}
.canh-hien:hover{border-color:var(--ink-300);background:var(--ink-100)}
.canh-hien[aria-expanded="true"]{border-color:var(--green-700);background:var(--green-050)}
.canh-hien img{width:44px;height:33px;object-fit:cover;border-radius:99px 6px 6px 99px;background:var(--ink-200);flex:0 0 auto}
.canh-hien-chu{display:flex;flex-direction:column;line-height:1.15;min-width:0;text-align:left}
.canh-hien-chu small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.canh-hien-chu b{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canh-hien .mui{width:16px;height:16px;color:var(--ink-500);flex:0 0 auto;transition:transform .2s}
.canh-hien[aria-expanded="true"] .mui{transform:rotate(180deg)}

.lien-he{font-size:.86rem;font-weight:600;color:var(--green-700);text-decoration:none;white-space:nowrap;
         padding:8px 14px;border-radius:99px;border:1px solid var(--green-100);background:var(--green-050)}
.lien-he:hover{background:var(--green-100)}
.lien-he-phu{font-weight:400;color:var(--green-800)}

/* ── BỐ CỤC CHÍNH ───────────────────────────────────────────────────────────── */
.san{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px}

/* ── SÂN ẢNH ────────────────────────────────────────────────────────────────── */
.san-anh{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--san-nen)}
.sanh{flex:1;min-height:0;position:relative;display:grid;place-items:center;padding:18px}
.sanh-trong{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;
            box-shadow:0 20px 60px -20px #000c;background:#0b0e0d}
.sanh-trong>canvas,.sanh-trong>img,.sanh-trong>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#khung{cursor:crosshair}
#mach,#anh-goc{pointer-events:none}
#anh-goc{object-fit:cover}
.cho{position:absolute;inset:0;display:flex;gap:10px;align-items:center;justify-content:center;
     color:var(--san-mo);font-size:.9rem;background:#0b0e0d}
.xoay{width:16px;height:16px;border:2px solid var(--san-vien);border-top-color:var(--green-600);
      border-radius:50%;animation:xoay .9s linear infinite}
@keyframes xoay{to{transform:rotate(360deg)}}

/* Viền mặt: chỉ hiện khi rê hoặc khi mặt đang chọn. Nét mảnh, không tô nền để không
   che vân; mặt đang chọn có nét xanh + hào quang nhẹ. */
.lop-mat{pointer-events:none;overflow:visible}
.lop-mat polygon{fill:#fff;fill-opacity:0;stroke:#fff;stroke-opacity:0;stroke-width:1.5;
                 vector-effect:non-scaling-stroke;pointer-events:all;cursor:pointer;
                 transition:fill-opacity .15s,stroke-opacity .15s}
.lop-mat polygon:hover{fill-opacity:.06;stroke-opacity:.9}
.lop-mat polygon.chon{stroke:#7CD35A;stroke-width:2}
.lop-mat polygon.chon.moi{stroke-opacity:1;fill-opacity:.05;animation:loe 1.4s ease-out forwards}
.lop-mat polygon.chon:hover{stroke-opacity:1;fill-opacity:.04}
@keyframes loe{0%,55%{stroke-opacity:1;fill-opacity:.06}100%{stroke-opacity:0;fill-opacity:0}}
.sanh-trong.dang-lup .lop-mat polygon{pointer-events:none}
.sanh-trong.dang-lup .ghim{display:none}

/* Chấm chọn mặt — cách Roomvo: một chấm nhỏ trên mỗi mảng, chạm là chọn. */
.ghim{position:absolute;inset:0;pointer-events:none}
/* ⚠ TGĐ 21/09/2026: "nút chọn mảng trên ảnh hơi lớn và choáng tầm nhìn".
   Chấm nghỉ: 17 px, nền trắng 55%, viền mảnh — đủ thấy, không che ảnh.
   Chạm/rê vào mới đặc lại và to lên 1,25 lần.
   ⚠ VÙNG BẤM KHÔNG NHỎ THEO: `padding:9px` giữ ô chạm ~35 px (chấm 17 + đệm hai
   bên), vì thu nhỏ phần NHÌN THẤY mà thu cả phần CHẠM là đổi một lời phàn nàn
   lấy một lời phàn nàn khác — trên điện thoại sẽ bấm trượt. */
/* ⚠⚠ NHÃN PHẢI NẰM NGOÀI DÒNG, nếu không nó ĐẨY LỆCH CHÍNH CÁI CHẤM.
     Bản cũ để `.pin` là flex hàng chứa [chấm][nhãn] rồi `translate(-50%,-50%)` cả cụm
     — tức thứ được đặt đúng vào toạ độ là TÂM CỦA CẢ CỤM, còn cái chấm thì lệch sang
     một bên đúng bằng nửa bề rộng nhãn. Nhãn có `opacity:0` nên KHÔNG AI THẤY nó,
     mà nó vẫn chiếm chỗ. Đo ở 390px ngày 22/09/2026: 13/34 chấm nằm NGOÀI khung ảnh,
     lệch tới 47px — có chấm ở x=-47, có chấm ở x=405 trên khung rộng 391.
     Lỗi này CÓ TỪ TRƯỚC; nó chỉ lộ ra khi ghim được dời ra gần mép, nên nhìn cứ như
     do bản sửa ghim gây ra. Hai thứ khác nhau: ghim đặt ĐÚNG, cái chấm bị vẽ LỆCH.
   ⚠ Nay `.pin` chỉ còn đúng cái chấm (17px) và nó được căn vào toạ độ; nhãn tách ra
     `position:absolute` nên dù dài bao nhiêu cũng không xê dịch chấm một pixel. */
.pin{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;
     display:block;background:none;border:0;padding:9px;cursor:pointer;line-height:0}
.pin i{width:17px;height:17px;border-radius:50%;background:#ffffff8c;
       box-shadow:0 1px 5px #00000059,0 0 0 1px #ffffff59;
       display:grid;place-items:center;flex:0 0 auto;transition:transform .15s,background .15s,box-shadow .15s}
.pin i::after{content:"";width:5px;height:5px;border-radius:50%;background:#24700Bd9}
.pin b{position:absolute;left:calc(100% - 2px);top:50%;margin-top:-11px;
       font-size:.78rem;font-weight:600;color:#fff;background:#0009;padding:4px 9px;border-radius:99px;
       white-space:nowrap;backdrop-filter:blur(6px);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.pin:hover i,.pin:focus-visible i{transform:scale(1.25);background:#fff;
       box-shadow:0 2px 9px #0000006b,0 0 0 1px #ffffff8c}
.pin:hover b,.pin:focus-visible b,.pin.moi b{opacity:1;transform:none}
.pin.moi b{animation:loe-nhan 1.6s ease-out forwards}
@keyframes loe-nhan{0%,65%{opacity:1}100%{opacity:0}}
.pin.chon i{background:#24700Be6;box-shadow:0 0 0 2px #ffffffd9,0 1px 6px #00000059}
.pin.chon i::after{background:#fff}
.pin.goi-y i{animation:goi-y 1.6s ease-out infinite}
@keyframes goi-y{0%{box-shadow:0 1px 5px #00000059,0 0 0 1px #ffffff59,0 0 0 0 #7CD35A99}
                 100%{box-shadow:0 1px 5px #00000059,0 0 0 1px #ffffff59,0 0 0 11px #7CD35A00}}
.pin.trai b{left:auto;right:calc(100% - 2px);transform:translateX(4px)}
.pin.trai:hover b,.pin.trai.moi b{transform:none}

/* ── HÀNG CÔNG CỤ (dưới ảnh, không đè ảnh) ──────────────────────────────────── */
.cong-cu{flex:0 0 54px;display:flex;align-items:center;gap:16px;padding:0 18px;
         background:var(--san-cc);border-top:1px solid var(--san-vien);color:var(--san-chu);min-width:0}
.nhom-nut{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.nut{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:8px;
     background:transparent;border:1px solid transparent;color:var(--san-chu);cursor:pointer;
     font-size:.84rem;font-weight:500;white-space:nowrap;transition:background .12s,border-color .12s}
.nut svg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.nut small{font-size:.66rem;color:var(--san-mo);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.nut:hover{background:#ffffff12}
.nut:active{background:#ffffff1c}
.nut[aria-pressed="true"]{background:var(--green-800);border-color:var(--green-600);color:#fff}
.nut[disabled]{opacity:.4;cursor:default}
.muc-lup{display:none;align-items:center;border:1px solid var(--san-vien);border-radius:8px;overflow:hidden;
         background:#00000040;margin-left:-2px}
#nut-lup[aria-pressed="true"]~.muc-lup{display:inline-flex}
.muc-lup button{height:32px;padding:0 10px;border:0;background:transparent;color:var(--san-mo);
                font-size:.8rem;font-variant-numeric:tabular-nums;cursor:pointer}
.muc-lup button+button{border-left:1px solid var(--san-vien)}
.muc-lup button[aria-pressed="true"]{background:var(--green-800);color:#fff}
.vach{width:1px;height:22px;background:var(--san-vien);margin:0 4px}
.nut-ghep[aria-pressed="true"]{background:#CC8D0026;border-color:var(--gold-600);color:#F3D48A}
/* Nút "⋯" do dien-thoai.js dựng, CHỈ dùng ở khổ hẹp. Ẩn ở đây thay vì để JS gỡ:
   kéo cửa sổ rộng ra thì node vẫn còn (JS chỉ trả Ghép/mức lúp về chỗ cũ), và một
   nút mở ra tấm đáy RỖNG là một nút nói dối. Bật lại trong khối ≤899px. */
.cong-cu #nut-them{display:none}

.trang-thai{display:flex;align-items:center;gap:12px;min-width:0;flex:1;justify-content:flex-end}
.goi{font-size:.74rem;color:var(--san-mo);white-space:nowrap;padding:4px 10px;border:1px solid var(--san-vien);
     border-radius:99px}
.goi:empty{display:none}
#bao{margin:0;font-size:.8rem;color:#F3D48A;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bao:empty{display:none}
.trang-thai:has(#bao:not(:empty)) .goi{display:none}

/* ── BẢNG CHỌN ─────────────────────────────────────────────────────────────── */
.bang{display:flex;flex-direction:column;min-height:0;background:var(--paper);border-left:1px solid var(--ink-200)}
.bang-cuon{flex:1;min-height:0;overflow:auto;padding:16px 20px 20px;overscroll-behavior:contain}
.khoi+.khoi{margin-top:18px;padding-top:16px;border-top:1px solid var(--ink-100)}
.bang h2{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500);
         display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.huong{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-400);font-size:.74rem}
.dem{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-400);font-size:.74rem;font-variant-numeric:tabular-nums}

/* Mặt trong cảnh: mỗi mặt một hàng — tên · mã đang dùng (ô màu nhỏ) · trạng thái */
.mat-ds{display:flex;flex-direction:column;gap:6px}
.mat-ds button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;
               background:var(--paper);border:1px solid var(--ink-200);border-radius:var(--r);cursor:pointer;
               transition:border-color .12s,background .12s}
.mat-ds button:hover{border-color:var(--ink-300);background:var(--sand)}
.mat-ds button[aria-pressed="true"]{border-color:var(--green-700);background:var(--green-050);box-shadow:inset 0 0 0 1px var(--green-700)}
.mat-ds .stt{width:24px;height:24px;border-radius:50%;background:var(--ink-100);color:var(--ink-600);
             font-size:.72rem;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.mat-ds button[aria-pressed="true"] .stt{background:var(--green-700);color:#fff}
.mat-ds .ten{flex:1;min-width:0;font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mat-ds .ma{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--ink-500);font-variant-numeric:tabular-nums;flex:0 0 auto}
.mat-ds .ma img{width:22px;height:30px;object-fit:cover;border-radius:4px;border:1px solid var(--ink-200)}
.mat-ds .ma.trong{color:var(--ink-400);font-style:italic}

/* Tìm + nhóm vân */
.khoi-dau{display:flex;flex-direction:column;gap:10px}
.khoi-dau h2{margin:0}
.tim-o{position:relative;display:block;color:var(--ink-400)}
.tim-o svg{position:absolute;left:9px;top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none}
.tim{width:100%;height:34px;padding:0 10px 0 30px;border:1px solid var(--ink-200);border-radius:99px;
     background:var(--sand);color:var(--ink-900);font:inherit;font-size:.86rem}
.tim:focus{outline:none;border-color:var(--green-600);background:var(--paper)}
.tim::placeholder{color:var(--ink-400)}

.nhom-ma{display:flex;gap:6px;margin:10px 0 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
         padding-bottom:2px;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
.nhom-ma::-webkit-scrollbar{display:none}
/* ⚠⚠ ≥900px: XUỐNG HÀNG thay vì cuộn ngang. Đo ở 1920px ngày 22/09/2026:
     scrollWidth 732 / clientWidth 399 — BA NHÓM CUỐI (Vải & da · Kim loại · Tráng
     gương) nằm ngoài tầm nhìn và KHÔNG CÓ DẤU HIỆU NÀO cho biết còn nữa: thanh cuộn
     đã bị ẩn (`scrollbar-width:none`), cột này lại hẹp nên chuột không quen vuốt
     ngang. Tức 3/7 nhóm mã coi như không tồn tại với khách dùng chuột.
   ⚠ Chỉ đổi ở màn rộng. Dưới 900px cột còn hẹp hơn, xuống hàng thì dãy chip ăn hai
     ba hàng và đẩy lưới mã xuống — ở đó giữ cuộn ngang, nhưng thêm MỜ MÉP PHẢI để
     biết là còn nữa (mất dấu hiệu mới là lỗi thật, không phải chuyện cuộn hay không). */
@media (min-width:900px){
  .nhom-ma{flex-wrap:wrap;overflow-x:visible;row-gap:6px}
}
/* ⚠⚠ TẤM ĐÁY PHẢI RA KHỎI DÒNG CHẢY Ở MỌI KHỔ MÀN HÌNH.
   `dien-thoai.js` gắn `#tam-nen` · `#tam-ct` · `#tam-cc` vào <body> khi khổ hẹp, và
   chúng NẰM LẠI khi khổ rộng ra (kéo cửa sổ, hoặc iPad xoay ngang). Mọi quy tắc của
   chúng lại nằm trong khối `@media (max-width:899px)` bên dưới — nên ở khổ máy tính
   chúng thành `div` block bình thường TRONG dòng chảy của <body>, mà <body> là flex
   cột. `#tam-cc` chứa hai dòng chữ nên nó ăn ĐÚNG 90px, và `.san` (flex:1) co lại
   đúng 90px: ảnh 658 → 568px ở iPad xoay lại, 790 → 700px trên máy tính.

   Đo được: mở thẳng 1024 → ảnh 658px · xoay 768 rồi về 1024 → 568px, lặp 5 lần thì
   ĐỨNG YÊN ở 568 (hội tụ, không trôi) — đó là dấu hiệu nói rằng nguyên nhân là một
   phần tử chiếm chỗ cố định, KHÔNG phải vòng phản hồi của phép đo.

   ⚠ Tôi đã đoán sai một vòng ở đây: giả thuyết đầu là "nhánh máy tính đo lại chính
     kích thước inline mình vừa đặt". Đã sửa theo giả thuyết đó (xoá inline khi đổi
     nhánh) và đo lại — KHÔNG đổi một pixel. Con số không trôi mới là thứ tố cáo:
     một vòng phản hồi thì mỗi lượt co thêm một nấc.

   Ba dòng dưới đặt NGOÀI mọi media query, cố ý. Phần trình bày (nền, bo góc, trượt
   lên) vẫn ở trong khối hẹp — đây chỉ là phần giữ chúng ra khỏi dòng chảy. */
/* ⚠ `position:fixed` LÀ ĐỦ để ra khỏi dòng chảy — ĐỪNG thêm `display:none` cho
   `:not(.mo)`: `.tam-ct` đóng bằng `transform:translateY(100%)` và mở bằng
   `transform:none`, mà `display:none → block` thì không chuyển tiếp được, tấm đáy
   sẽ nhảy bụp lên thay vì trượt. `.tam-nen` thì vốn đã có `display:none` riêng. */
.tam-nen,.tam-ct{position:fixed;left:0;right:0;bottom:0;z-index:59}
.tam-nen{top:0}

@media (max-width:899px){
  .nhom-ma{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
           mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .nhom-ma.het-phai{-webkit-mask-image:none;mask-image:none}
}
.nhom-ma button{flex:0 0 auto;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--ink-200);
                background:var(--paper);font-size:.8rem;font-weight:500;color:var(--ink-700);cursor:pointer;
                white-space:nowrap;transition:background .12s,border-color .12s}
.nhom-ma button:hover{background:var(--sand);border-color:var(--ink-300)}
.nhom-ma button[aria-selected="true"]{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.nhom-ma button small{color:inherit;opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}

/* Lưới mã: ô đứng như tấm thật (1:1,5). Chọn = viền xanh + dấu tích. Mã dưới ô để
   sale đọc nhanh; tên đầy đủ ở tooltip và ở thẻ "đang chọn". */
.luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
.luoi button{position:relative;padding:0;border:0;background:none;cursor:pointer;text-align:left;border-radius:8px}
.luoi .o{display:block;position:relative;aspect-ratio:2/3;border-radius:8px;overflow:hidden;border:1px solid var(--ink-200);
         background:var(--ink-100);transition:transform .12s,box-shadow .12s}
.luoi .o img{width:100%;height:100%;object-fit:cover;display:block}
.luoi button:hover .o{transform:translateY(-1px);box-shadow:0 6px 16px -8px #0006;border-color:var(--ink-300)}
.luoi button[aria-pressed="true"] .o{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--green-700)}
.luoi .tich{position:absolute;z-index:1;right:5px;top:5px;width:20px;height:20px;border-radius:50%;background:var(--green-700);
            display:none;place-items:center}
.luoi .tich svg{width:12px;height:12px}
.luoi button[aria-pressed="true"] .tich{display:grid}
.luoi .nhan{display:block;margin-top:5px;font-size:.7rem;color:var(--ink-500);font-variant-numeric:tabular-nums;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.luoi button[aria-pressed="true"] .nhan{color:var(--green-800);font-weight:600}
.luoi .bong{position:absolute;left:5px;top:5px;font-size:.58rem;font-weight:700;letter-spacing:.06em;
            color:#fff;background:#0009;padding:2px 5px;border-radius:4px;backdrop-filter:blur(4px)}
/* Mã chưa xem được (gương / thiếu ảnh): vẫn hiện để không ai nghĩ web thiếu mã. */
.luoi button.chua{cursor:not-allowed}
.luoi button.chua .o{display:grid;place-items:center;border-style:dashed;background:repeating-linear-gradient(135deg,var(--ink-100) 0 6px,var(--paper) 6px 12px)}
.luoi button.chua .o span{font-size:.62rem;font-weight:600;color:var(--ink-500);text-align:center;padding:4px;line-height:1.25}
.luoi .trong{grid-column:1/-1;padding:24px 8px;text-align:center;color:var(--ink-500);font-size:.86rem}

/* Thẻ "đang chọn" dính đáy bảng */
.dang{flex:0 0 auto;border-top:1px solid var(--ink-200);padding:12px 20px;background:var(--paper);
      box-shadow:0 -10px 24px -18px #0004}
.dang-chon{display:flex;align-items:center;gap:12px;min-height:56px}
.dang-chon img{width:48px;height:66px;object-fit:cover;border-radius:6px;border:1px solid var(--ink-200);flex:0 0 auto}
.dang-chon .chu{min-width:0;flex:1}
.dang-chon .cho-mat{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);font-weight:600}
.dang-chon b{display:block;font-size:.96rem;font-weight:600;line-height:1.25}
.dang-chon .ten{color:var(--ink-600);font-size:.86rem}
.dang-chon .nhan-phu{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.dang-chon .nhan-phu span{font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--gold-100);color:var(--gold-700)}
.dang-chon .nhan-phu span.xam{background:var(--ink-100);color:var(--ink-600)}
.dang-chon .trong{color:var(--ink-500);font-size:.88rem}
.dang-chon .trong b{display:inline;font-size:inherit;color:var(--ink-800)}
.dang-chon .bo{flex:0 0 auto;height:32px;padding:0 10px;border-radius:99px;border:1px solid var(--ink-200);
               background:var(--paper);font-size:.78rem;color:var(--ink-600);cursor:pointer}
.dang-chon .bo:hover{background:var(--sand);color:var(--ink-900)}

/* Ghi chú — gấp lại, không chiếm chỗ của mã */
.ghi{margin-top:22px;border-top:1px solid var(--ink-100);padding-top:10px;color:var(--ink-500);font-size:.8rem;line-height:1.65}
.ghi summary{cursor:pointer;font-weight:600;color:var(--ink-600);font-size:.8rem;padding:6px 0;list-style:none;display:flex;align-items:center;gap:6px}
.ghi summary::-webkit-details-marker{display:none}
.ghi summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.ghi[open] summary::before{transform:rotate(45deg)}
.ghi p{margin:8px 0 0}
.ghi b{color:var(--ink-700);font-weight:600}

/* ── BẢNG CẢNH ─────────────────────────────────────────────────────────────── */
.bang-canh{position:fixed;inset:0;z-index:40}
.bang-canh[hidden]{display:none}
.bang-canh-nen{position:absolute;inset:0;background:#0f14117a;backdrop-filter:blur(2px)}
.bang-canh-tam{position:absolute;left:50%;top:calc(var(--dau-cao) + 10px);transform:translateX(-50%);
               width:min(760px,94vw);max-height:calc(100vh - var(--dau-cao) - 24px);max-height:calc(100dvh - var(--dau-cao) - 24px);
               background:var(--paper);border-radius:14px;box-shadow:0 30px 80px -30px #000a;display:flex;flex-direction:column;
               animation:roi .18s ease-out}
@keyframes roi{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
.bang-canh-dau{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;flex:0 0 auto}
.bang-canh-dau h2{font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-900);margin:0}
.dong{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink-100);display:grid;place-items:center;cursor:pointer;color:var(--ink-700)}
.dong svg{width:16px;height:16px}
.dong:hover{background:var(--ink-200)}
.bang-canh-tab{display:flex;gap:6px;padding:0 18px 12px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
.bang-canh-tab::-webkit-scrollbar{display:none}
.bang-canh-tab button{flex:0 0 auto;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--ink-200);
  background:var(--paper);font-size:.8rem;font-weight:500;color:var(--ink-700);cursor:pointer;white-space:nowrap}
.bang-canh-tab button[aria-selected="true"]{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.bang-canh-tab button small{opacity:.6;margin-left:4px;font-variant-numeric:tabular-nums}
.bang-canh-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 12px;padding:4px 18px 18px;overflow:auto;flex:1 1 auto;min-height:0}
.bang-canh-nhom{grid-column:1/-1;margin:10px 0 -4px;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-500)}
.bang-canh-nhom:first-child{margin-top:4px}
.bang-canh-luoi .so{position:absolute;left:8px;top:8px;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:#0009;padding:2px 7px;border-radius:99px;backdrop-filter:blur(4px)}
.bang-canh-luoi button[disabled]{opacity:.45;cursor:default}
.bang-canh-luoi button{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;border-radius:10px}
.bang-canh-luoi .anh{display:block;position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--ink-100);border:1px solid var(--ink-200);
                     transition:transform .12s,box-shadow .12s}
.bang-canh-luoi .anh img{width:100%;height:100%;object-fit:cover;display:block}
.bang-canh-luoi button:hover .anh{transform:translateY(-2px);box-shadow:0 12px 24px -14px #0008}
.bang-canh-luoi button[aria-pressed="true"] .anh{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--green-700)}
.bang-canh-luoi .ten{display:block;margin-top:7px;font-size:.84rem;font-weight:500;line-height:1.3}
.bang-canh-luoi .phu{display:block;font-size:.72rem;color:var(--ink-500)}
.bang-canh-luoi button[aria-pressed="true"] .ten{color:var(--green-800);font-weight:600}

/* ── ĐIỆN THOẠI / MÀN HẸP ─────────────────────────────────────────────────── */
@media (max-width:900px){
  :root{--dau-cao:52px}
  .dau{gap:10px;padding:0 12px}
  .logo img{height:28px}
  .tieu{display:none}
  .the{display:none}
  .lien-he{display:none}
  /* ⚠ `flex:1 1 auto` cũ bắt nút NỞ HẾT CHỖ TRỐNG: đo ở 390px ra nút rộng 301px
       (77% màn hình) trong khi tên chỉ chiếm 134px — TGĐ báo 22/09/2026 "nút chọn ảnh
       trên cùng đang bị kéo khá dài". Nay `0 1 auto`: co theo tên, tên dài thì thu lại
       và cắt bằng dấu ba chấm (đã có ở `.canh-hien-chu b`), không đẩy vỡ thanh đầu. */
  .canh-hien{max-width:100%;flex:0 1 auto;padding:4px 8px 4px 4px}
  .canh-hien img{width:36px;height:27px}
  .canh-hien-chu b{font-size:.84rem}

  .san{display:flex;flex-direction:column}
  .san-anh{flex:0 0 auto}
  .sanh{padding:0;place-items:stretch;height:auto}
  /* ⚠⚠ CHỪA CHỖ CHO ẢNH TRƯỚC KHI JS BIẾT KÍCH THƯỚC. Trên điện thoại sân ảnh cao
     theo nội dung (`.san-anh{flex:0 0 auto}`), mà chiều cao thật do JS đặt inline sau
     khi đọc được tỉ lệ ảnh — nên trong những khung hình đầu sân ảnh CAO 0 và cả bảng
     bên dưới bị đẩy xuống một nhịp. Đo bằng Lighthouse mobile: CLS 0,939, gần như
     toàn bộ dồn vào `aside.bang` — mức đó đủ để Google tính là trang nhảy.
     ⚠ `4/3` là SỐ ĐO, không phải số chọn cho đẹp: cả 14 cảnh đều đúng 4:3
       (11 cảnh 2264×1698 · 3 cảnh 1600×1200). `kiem_danh_sach.py` canh điều này,
       nên thêm một cảnh tỉ lệ khác thì có dòng báo chứ không lặng lẽ nhảy lại.
     ⚠ JS vẫn đặt `height` inline như cũ và con số khớp (375/1,3333 = 281px), nên đây
       là chừa chỗ chứ không phải nguồn sự thật thứ hai về chiều cao. */
  .sanh-trong{border-radius:0;box-shadow:none;aspect-ratio:4/3}
  .cong-cu{flex:0 0 48px;padding:0 8px;gap:8px;overflow-x:auto;scrollbar-width:none}
  .cong-cu::-webkit-scrollbar{display:none}
  .nut{height:32px;padding:0 9px;font-size:.78rem;gap:5px}
  .nut-ghep{padding:0 10px}
  .vach{margin:0}
  .nut small{display:none}
  .trang-thai{flex:1 0 auto;justify-content:flex-start}
  .goi{display:none}
  #bao{white-space:normal;font-size:.72rem;line-height:1.25;max-height:2.5em}

  .bang{flex:1;min-height:0;border-left:0;border-top:1px solid var(--ink-200)}
  .bang-cuon{padding:12px 14px 16px}
  .nhom-ma{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .khoi:first-child{position:sticky;top:-12px;z-index:2;background:var(--paper);margin:-12px -14px 0;padding:10px 14px 8px;border-bottom:1px solid var(--ink-100)}
  .khoi:first-child h2{margin-bottom:6px}
  /* ⚠ CHỪA CHỖ CHO HÀNG "Mặt đang ốp". `#mat-ds` rỗng trong HTML, JS mới điền chip
     vào — nên hàng này cao 0 trong những khung hình đầu rồi đẩy cả lưới mã xuống.
     Đo Lighthouse mobile sau khi đã chừa chỗ cho sân ảnh: cú nhảy còn lại 0,338 và
     nằm đúng ở khối này. 40px là SỐ ĐO chiều cao một hàng chip (1–3 mặt, tức mọi
     cảnh hiện có); cảnh từ 4 mặt trở lên thì chip xuống hàng và còn một nhịp nhỏ. */
  #mat-ds{min-height:40px}
  .khoi+.khoi{border-top:0;margin-top:12px;padding-top:0}
  .mat-ds{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px 2px}
  .mat-ds::-webkit-scrollbar{display:none}
  .mat-ds button{width:auto;flex:0 0 auto;padding:6px 10px 6px 6px;border-radius:99px;gap:8px}
  .mat-ds .ma img{width:18px;height:24px}
  /* ⚠ CHIP GỌN trên điện thoại (22/09/2026). Đo ở 375px: hàng "Mặt đang ốp" rộng
       483px trên khung 375 — chip thứ hai bị cắt ngoài mép, phải vuốt mới thấy, mà
       chính nó là thứ khách phải bấm để chọn mặt. Hai thứ ăn chỗ mà không mang tin:
       tên mặt viết đủ (tới 21 ký tự) và chữ trạng thái "chưa chọn" / "giữ nguyên".
     ⚠ Tên rút còn ~14 ký tự, tên đầy đủ vẫn ở `title` và ở dòng "Đang chọn cho …"
       ngay dưới lưới — không mất thông tin, chỉ thôi lặp nó ở chỗ chật nhất.
     ⚠ Ô mẫu + mã ĐÃ CHỌN thì GIỮ: đó là thứ duy nhất trong chip nói kết quả. */
  .mat-ds .ten{max-width:14ch}
  .mat-ds .ma.trong{display:none}
  .huong{display:none}
  /* ⚠⚠ LƯỚI MÃ trên điện thoại (22/09/2026). Đo ở 375×812 trước khi sửa: lưới bắt
       đầu ở y=592, thẻ "đang chọn" dính đáy ở y=760 — CHỈ CÒN 168px cho lưới, trong
       khi mỗi ô cao 186px. Tức khách chọn xong mặt thì KHÔNG THẤY TRỌN MỘT HÀNG ô nào,
       phải cuộn mới biết có gì. Ô cũ tỉ lệ 2/3 (cao gấp rưỡi bề ngang) là tỉ lệ của
       TẤM THẬT — đúng về vật, sai về chỗ: ở đây khách đang quét màu, không đang xem
       tấm.
     ⚠ Bốn cột, ô 1:1,15 -> ô ~82×94px, hai hàng ~196px. Cộng với việc gấp ô tìm
       thành icon (~44px) thì lưới còn ~212px: ĐỦ HAI HÀNG. Hai thay đổi này phải đi
       cùng nhau, làm một cái thì vẫn thiếu chỗ. */
  .luoi{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 6px}
  /* ⚠ Tỉ lệ 1:1,15 mà lệnh nêu là cho CẢ Ô; đo ra ô cao 113px = ảnh 94 + dòng mã 19,
       hai hàng thành 242px trong khi chỗ trống chỉ 196px — vẫn thiếu. Nên phần ẢNH
       để 1:0,9; cộng dòng mã thì ô ~93px, hai hàng 194px, vừa đúng chỗ có. */
  .luoi .o{aspect-ratio:1/0.9}
  .luoi .nhan{margin-top:3px;font-size:.66rem}

  /* Ô tìm gấp thành icon, bung ra khi chạm hoặc khi đang có chữ. Dùng :focus-within
     và :has() nên không cần JS — ít mã hơn thì ít chỗ lệch trạng thái hơn. */
  .khoi-ma .khoi-dau{flex-direction:row;align-items:center;gap:10px}
  .khoi-ma .khoi-dau h2{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .khoi-ma .tim-o{flex:0 0 auto;width:34px;transition:width .18s ease}
  .khoi-ma .tim-o .tim{padding-left:30px;padding-right:0}
  .khoi-ma .tim-o:focus-within{width:100%}
  .khoi-ma .tim-o:has(.tim:not(:placeholder-shown)){width:100%}
  .khoi-ma .tim-o:focus-within .tim,
  .khoi-ma .tim-o:has(.tim:not(:placeholder-shown)) .tim{padding-right:10px}
  .dang{padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px))}
  .dang-chon{min-height:44px;gap:10px}
  .dang-chon img{width:36px;height:50px}
  .dang-chon b{font-size:.9rem}
  .dang-chon .ten{font-size:.8rem}
  .dang-chon .cho-mat{font-size:.64rem}

  .bang-canh-tam{top:auto;bottom:0;left:0;right:0;transform:none;width:auto;max-height:78vh;max-height:78dvh;
                 border-radius:16px 16px 0 0;animation:len .2s ease-out;padding-bottom:env(safe-area-inset-bottom,0px)}
  @keyframes len{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
  .bang-canh-tam::before{content:"";width:36px;height:4px;border-radius:2px;background:var(--ink-300);margin:8px auto 0}
  /* ⚠⚠ `flex:0 0 auto` — KHÔNG cho bóp. `.bang-canh-tam` là flex cột có
       `max-height:78dvh`, mà mọi mục flex mặc định `flex-shrink:1`, nên dãy chip bị
       ép từ 40px xuống 34px và CẮT MẤT 6px chữ. Đo ở 390px: khung cao 34, nội dung
       cao 40. Chỉ `.bang-canh-luoi` được co — nó có `overflow:auto` nên co là cuộn,
       còn dãy chip co là mất chữ. */
  .bang-canh-tab{padding:0 14px 10px;flex:0 0 auto}
  .bang-canh-luoi{grid-template-columns:repeat(2,1fr);gap:12px 10px;padding:0 14px 16px}
}
/* ⚠ Dưới 380px KHÔNG hạ về 3 cột nữa: ô 4 cột ở 360px còn ~78px, vẫn đủ để nhận ra
     vân; hạ xuống 3 cột là ô cao lên và lại mất hàng thứ hai — đúng cái vừa sửa. */
/* Màn rộng vừa (máy tính bảng ngang, laptop nhỏ): bảng hẹp hơn, lưới 3 cột */
@media (min-width:901px) and (max-width:1180px){
  .san{grid-template-columns:minmax(0,1fr) 340px}
  .luoi{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lien-he-phu{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Lối về Bảng màu, cạnh nhận diện. Điện thoại chỉ còn mũi tên — thanh 56px không đủ
   chỗ cho chữ, nhưng bỏ hẳn nút thì khách phải bấm Back, thứ người ta không nghĩ tới
   khi trang trông như một ứng dụng. */
.ve-bang-mau{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
             height:32px;padding:0 12px;border-radius:99px;border:1px solid var(--ink-200);
             font-size:.82rem;font-weight:600;color:var(--ink-700);text-decoration:none;
             background:var(--paper);transition:border-color .15s,background .15s}
.ve-bang-mau:hover{border-color:var(--green-700);background:var(--green-050);color:var(--green-800)}
@media (max-width:900px){
  .ve-bang-mau{padding:0;width:32px;justify-content:center}
  .ve-chu{display:none}
}

/* ── HAI LINK RA LEAD trong thẻ "đang chọn" ───────────────────────────────────
   ⚠ Khối này TRƯỚC ĐÂY KHÔNG CÓ MỘT DÒNG CSS NÀO: tôi viết HTML trong giao-dien.js
     mà quên kiểu dáng, nên trên máy khách nó ra hai link xanh gạch chân mặc định và
     DÍNH LIỀN NHAU ("Chi tiết mãXin mẫu mã này") — TGĐ báo 22/09.
     Website có `kiem_lop_css()` bắt đúng loại lỗi này; công cụ thì chưa có, nên nay
     `kiem_lop_cong_cu()` trong all.py canh cả phía này.
   ⚠ Là LINK PHỤ, không phải nút: thẻ "đang chọn" đã có nút "Bỏ", thêm hai nút nữa
     là ba thứ tranh nhau trong một khối cao 44px. Nhưng vùng chạm vẫn phải đủ 44px
     theo chiều cao — đó là ngưỡng bấm được trên điện thoại.                        */
.ra-lead{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
.ra-lead a{display:inline-flex;align-items:center;min-height:32px;
           font-size:.8rem;font-weight:600;color:var(--green-700);
           text-decoration:none;border-bottom:1px solid var(--green-100)}
.ra-lead a:hover,.ra-lead a:focus-visible{color:var(--green-800);border-bottom-color:var(--green-600)}
@media (max-width:899px){
  /* Thẻ "đang chọn" trên điện thoại chỉ cao 44px nên hai link phải gọn hơn, và
     vùng chạm lấy đủ chiều cao bằng padding chứ không bằng cỡ chữ. */
  .ra-lead{gap:4px 12px;margin-top:4px}
  .ra-lead a{min-height:28px;font-size:.76rem}
}

/* ── DÒNG BÁO TRÊN ĐIỆN THOẠI: KÉO RA KHỎI HÀNG CUỘN ──────────────────────────
   ⚠⚠ TGĐ báo 22/09 "bấm nút chọn mảng nhiều khi đơ, ấn vào không phản hồi gì cả".
     Ứng dụng CÓ phản hồi: cảnh có chế độ tủ-nguyên-gốc thì phải chọn mã cho mảng
     tường trước, và `datVung()` từ chối kèm một câu giải thích. Nhưng đo ở khổ
     390px: câu đó nằm ở x = 326 và rộng 392px — tức chạy từ 326 tới 718, gần như
     TRỌN VẸN ngoài mép phải, vì `#bao` nằm trong `.cong-cu` vốn cuộn ngang (726px
     nội dung trong khung 390px).
     Một lời giải thích nằm ngoài màn hình thì bằng không có, và cái giá của nó là
     người dùng đọc ra "trang hỏng" thay vì "mình làm sai thứ tự".
   ⚠ `position:fixed` để kéo hẳn ra khỏi khối cuộn — đặt `position` khác mà vẫn nằm
     trong `.cong-cu` thì nó vẫn trôi theo cú cuộn ngang.
   ⚠ `:empty` để khi không có gì báo thì không chiếm chỗ, không che lưới mã. */
@media (max-width:899px){
  #bao{position:fixed;left:8px;right:8px;bottom:56px;z-index:40;width:auto;
       max-height:none;white-space:normal;font-size:.82rem;line-height:1.35;
       padding:10px 13px;border-radius:9px;
       background:var(--ink-900);color:var(--gold-300);
       box-shadow:0 6px 22px rgba(0,0,0,.35)}
  #bao:empty{display:none;padding:0}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — BA TRẠNG THÁI KHUNG ẢNH (lệnh 24/09/2026)

   TGĐ thử trên iPhone: "Phần ảnh và thông tin mã đang chọn choán hết phần danh
   sách các mã để chọn." Đo lại trên 390×664 thì đúng: ảnh 341 + công cụ 48 +
   nhóm màu 32 → lưới còn ~88px, khách thấy **4 trong 94 mã**.

   ⚠ NGƯỠNG DÙNG 899px, KHÔNG PHẢI 768px như lệnh ghi. Bố cục một cột của công cụ
     này bắt đầu ở ≤899px (mọi khối `@media` khác trong tệp đều lấy mốc đó). Chỉ sửa
     tới 768 thì dải 769–899 giữ nguyên bố cục cũ — tức đúng cái vừa sửa vẫn hỏng ở
     một khổ máy có thật (máy bảng dựng đứng). Lấy mốc của chính tệp này.

   ⚠⚠ KHUNG ẢNH ĐỨNG YÊN (TGĐ chốt lại 24/09 chiều). Ba trạng thái Xem/Chọn/Thu
     nhỏ đã GỠ HẲN — cùng với `--cx/--cy/--cz`, tay nắm và nút "Xem ảnh". Chỗ cho
     lưới mã giành được bằng hai việc KHÔNG chuyển động: thẻ mã nổi 150px rút còn
     một dòng 40px, và thanh công cụ 40px thành ba nút tròn nổi trên ảnh.
     Đừng dựng lại ảnh co giãn nếu không có lệnh mới: chuyển động ngay dưới ngón
     tay đang cuộn thì rối mắt hơn là hữu ích.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:899px){
  /* ── thanh công cụ: ba nút tròn nổi trên ảnh ──────────────────────────── */
  .cong-cu{position:absolute;top:8px;right:8px;left:auto;z-index:6;
    background:none;border:0;padding:0;overflow:visible;height:auto}
  .cong-cu .nhom-nut{display:flex;gap:6px;background:none;padding:0}
  .cong-cu .nut{width:32px;height:32px;min-height:32px;padding:0;border-radius:50%;
    display:grid;place-items:center;background:#000a;color:#fff;border:0;
    backdrop-filter:blur(6px)}
  .cong-cu .nut span,.cong-cu .nut small{display:none}
  .cong-cu .nut svg{width:17px;height:17px}
  .cong-cu #nut-them{display:grid}
  #nut-them svg circle{fill:currentColor}
  /* Dải mức phóng và nút Ghép đã CHUYỂN xuống tấm đáy (dien-thoai.js). Vạch ngăn
     giữa chúng không còn gì để ngăn nên ẩn đi — để lại là một gạch trắng lơ lửng. */
  .cong-cu .vach{display:none}

  /* tấm đáy "Công cụ xem": chở hai điều khiển không nhét được vào nút tròn */
  .tam-cc{display:flex;flex-direction:column;gap:10px}
  .tam-cc .tam-dau{margin:0;font-weight:700;font-size:.95rem}
  .tam-cc #tam-cc-o{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .tam-cc .muc-lup{display:inline-flex}
  .tam-cc .nut-ghep{height:44px;padding:0 16px;border-radius:10px;
    border:1px solid var(--ink-200);background:#fff;font-weight:600}
  .tam-cc .nut-ghep[aria-pressed="true"]{background:#CC8D0018;border-color:var(--gold-600);
    color:var(--gold-700)}
  .tam-cc .muc-lup button{height:44px;padding:0 16px;color:var(--ink-700)}
  .tam-cc .tt{margin:0}

  /* ── hàng chip mặt: bỏ nhãn chữ, dính dưới ảnh ────────────────────────── */
  .bang .khoi:first-child h2{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .mat-ds{display:flex;gap:8px;overflow-x:auto;height:52px;align-items:center;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mat-ds::-webkit-scrollbar{display:none}
  .nhom-ma{height:36px;align-items:center}

  /* ── DÒNG MÃ ĐANG CHỌN: một dòng 40px, cuộn theo trang, KHÔNG nổi ─────── */
  .dang-chon{min-height:40px;height:40px;gap:8px;padding:0;
    border-top:1px solid var(--ink-100);overflow:hidden}
  .dang-chon img{width:22px;height:22px;border-radius:5px;flex:0 0 auto}
  /* Lệnh mục 3: nút "Bỏ" chuyển vào tấm đáy. ẨN chứ KHÔNG XOÁ — tấm đáy bấm hộ
     chính node này (`dc.querySelector('.bo').click()`), nên nó phải còn trong DOM;
     dựng một nút "Bỏ" thứ hai là hai nút cho một việc. */
  .dang-chon .cho-mat,.dang-chon .nhan-phu,.dang-chon .ra-lead,.dang-chon .bo{display:none}
  .dang-chon .chu{display:flex;align-items:center;gap:6px;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dang-chon b{display:inline;font-size:.86rem}
  .dang-chon .ten{display:inline;font-size:.8rem}
  .nut-chi-tiet{flex:0 0 auto;min-height:32px;padding:0 10px;border-radius:8px;
    border:1px solid var(--ink-200);background:var(--paper);
    font-size:.76rem;font-weight:600;color:var(--ink-700)}

  /* ── tấm đáy "Chi tiết" ───────────────────────────────────────────────── */
  .tam-ct{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--paper);border-top:1px solid var(--ink-200);
    border-radius:14px 14px 0 0;box-shadow:0 -8px 30px -12px #0004;
    padding:8px 14px calc(16px + env(safe-area-inset-bottom,0px));
    transform:translateY(102%);transition:transform .2s ease-out}
  .tam-ct.mo{transform:none}
  .tam-ct::before{content:"";display:block;width:40px;height:4px;border-radius:99px;
    background:var(--ink-200);margin:2px auto 10px}
  .tam-ct a,.tam-ct button{display:flex;align-items:center;min-height:48px;
    width:100%;padding:0 4px;border:0;background:none;text-align:left;
    font-size:.92rem;color:var(--ink-800);text-decoration:none;
    border-bottom:1px solid var(--ink-100)}
  .tam-ct button:last-child{border-bottom:0;color:var(--red-700,#a33)}
  .tam-nen{position:fixed;inset:0;z-index:59;background:#0004;display:none}
  .tam-nen.mo{display:block}
}