/* ============================================================
   AUTOSALES PRO — TUỲ CHỈNH BÁO GIÁ (gói Pro, 26/09/2026)
   Phần 1: lớp áp lên 4 nơi vẽ (chỉ có tác dụng khi bộ tuỳ chỉnh bật —
           Mặc định không thêm class/style nào → ảnh y hệt trước).
   Phần 2: giao diện màn tuỳ chỉnh (tiền tố tcb-), xem pwa/js/tuy-chinh.js.
   html2canvas đọc style đã tính (getComputedStyle) nên var(--…) được thay
   sẵn thành màu thật lúc chụp.
   ============================================================ */

/* ---------- 1a. Mẫu Cơ bản (#anh-khung) ---------- */
#anh-khung .ah-ghi-noi{
  display:none; margin:0 0 6px; padding:6px 10px 7px; border-radius:6px;
  background:#FFF4D6; border:1px solid #F2D58A; color:#7A4B00;
  font-size:8px; font-weight:700; line-height:1.3; text-align:center;
}
#anh-khung.ah-tc-nhan .ah-lb{ background:var(--ah-tc); }
#anh-khung.ah-tc-nhan .ah-nhan,
#anh-khung.ah-tc-nhan .ah-dau-tit,
#anh-khung.ah-tc-nhan .ah-tong-cp .nh,
#anh-khung.ah-tc-nhan .ah-tong-cp .ah-so,
#anh-khung.ah-tc-nhan .ah-daily,
#anh-khung.ah-tc-nhan .ah-chip{ color:var(--ah-tc); }
#anh-khung.ah-tc-nhan .ah-sale .av span{ background:var(--ah-tc); }
/* ảnh đại diện đã cắt tròn sẵn (PNG nền trong) → bỏ nền/bo góc/overflow của ô */
#anh-khung .ah-sale .av span.ah-av-anh{ background:none; overflow:visible; border-radius:0; }
#anh-khung .ah-sale .av span.ah-av-anh img{ border-radius:0; }

/* ---------- 1b. Showroom + Ưu đãi tháng (#anh-khung-pro .mpq) ---------- */
.mpq .mpb-av span.mp-av-o, .mpq .mpd-av span.mp-av-o{ background:none !important; border-radius:0; overflow:visible; line-height:0; }
.mpq .mp-av-anh{ display:block; width:29px; height:29px; }
.mpq .mp-ghi-noi{ margin:0 0 10px; }
.mpq .mp-ghi-noi td{ padding:6px 10px 7px; text-align:center; font-size:8px; font-weight:700; line-height:1.35; }
.mpb .mp-ghi-noi td{ background:#1E1C19; color:#E7CB8F; border:1px solid #C8A96A; }
.mpd .mp-ghi-noi td{ background:#FFF4D6; color:#7A4B00; border:1px solid #FFC53D; border-radius:8px; }
.mpb.mp-tc-nhan .mpb-tong{ background:var(--mp-tc); border-top-color:var(--mp-tc); }
.mpb.mp-tc-nhan .mpb-tong-so,
.mpb.mp-tc-nhan .mpb-tong-t{ color:#fff; }
.mpb.mp-tc-nhan .mpb-tong-p{ color:rgba(255,255,255,.78); }
.mpb.mp-tc-nhan .mpb-vien{ background:var(--mp-tc); }
.mpb.mp-tc-nhan .mpb-hr,
.mpb.mp-tc-nhan .mpb-vt,
.mpb.mp-tc-nhan .mpb-sdt span,
.mpb.mp-tc-nhan .mpb-tg3 td.mpb-nb b,
.mpb.mp-tc-nhan .mpb-qua .mpb-qm td.mpb-qm-so{ color:var(--mp-tc); }
.mpb.mp-tc-nhan .mpb-av span{ background:var(--mp-tc); color:#fff; }
.mpb.mp-tc-nhan .mp-ghi-noi td{ background:var(--mp-tc); border-color:var(--mp-tc); color:#fff; }
.mpd.mp-tc-nhan .mpd-tong,
.mpd.mp-tc-nhan .mpd-cta-nen,
.mpd.mp-tc-nhan .mpd-av span{ background:var(--mp-tc); }
.mpd.mp-tc-nhan .mpd-ten,
.mpd.mp-tc-nhan .mpd-h,
.mpd.mp-tc-nhan .mpd-cpt td,
.mpd.mp-tc-nhan .mpd-tg-h,
.mpd.mp-tc-nhan .mpd-tg3 td.mpd-nb b,
.mpd.mp-tc-nhan .mpd-con.mpd-navy,
.mpd.mp-tc-nhan .mpd-gia.mpd-navy{ color:var(--mp-tc); }

/* ---------- 1c. Phiếu In / PDF (#in-khung) ---------- */
#in-khung [hidden]{ display:none !important; }
#in-khung .pi-ghi-noi{ margin:0 0 10px; padding:6px 10px; border:1.5px solid #E8B930; border-radius:6px; background:#FFF6DB; color:#6B4700; font-weight:700; font-size:12.5px; text-align:center; }
#in-khung .pi-dong-cuoi{ margin:6px 0 0; font-size:11px; color:#444; text-align:center; font-style:italic; }
#in-khung.pi-tc-nhan .pi-title{ color:var(--pi-tc); }
#in-khung.pi-tc-nhan .pi-title-line,
#in-khung.pi-tc-nhan .pi-section-title{ background:var(--pi-tc); }
#in-khung.pi-tc-nhan .pi-bottom-row{ border-color:var(--pi-tc); }

/* ============================================================
   2. GIAO DIỆN MÀN TUỲ CHỈNH (tiền tố tcb-)
   ============================================================ */
.tcb-tren .tieu-de .mpc-pro{ vertical-align:2px; margin-left:4px; }
.tcb-bo-nhan{ font-size:13px; color:var(--muc-2); font-weight:600; flex:none; }
.tcb-link{
  min-height:44px; padding:0 4px; border:0; background:none; font:inherit; font-size:14px; font-weight:700;
  color:var(--nhan); cursor:pointer; touch-action:manipulation;
}
.tcb-link--do{ color:var(--loi); }
.tcb-link:focus-visible, .tcb-bo-dau:focus-visible, .tcb-keo:focus-visible, .tcb-mat:focus-visible, .tcb-nut-nho:focus-visible,
.tcb-dong-ten:focus-visible, .tcb-kieu-o:focus-visible, .tcb-tong-o:focus-visible, .tcb-mau-o:focus-visible, .tcb-bo-chip:focus-visible,
.tcb-muc-dau:focus-visible, .tcb-bo-o:focus-visible{ outline:2px solid var(--nhan); outline-offset:2px; }

/* ảnh xem trước (máy tính) */
.tcb-xem{
  position:relative; margin:0 16px; height:min(46vh, 400px); border-radius:16px; background:#E9ECF2;
  display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:inset 0 0 0 1px var(--ke-2);
}
.tcb-xem-anh{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 6px 22px -10px rgba(16,19,25,.35); }
.tcb-xem-anh:not([src]){ display:none; }
.tcb-xem-cho{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:6px 12px; border-radius:99px;
  background:rgba(16,19,25,.72); color:#fff; font-size:12px; font-weight:600; white-space:nowrap;
}
.tcb-xem-cho[hidden]{ display:none; }
.tcb-xem-ghi{ margin:8px 20px 4px; font-size:12px; color:var(--muc-3); line-height:1.45; text-align:center; }

/* dải 4 kiểu + chấm tông */
.tcb-kieu{ display:flex; gap:8px; margin:10px 16px 0; overflow-x:auto; scrollbar-width:none; }
.tcb-kieu::-webkit-scrollbar{ display:none; }
.tcb-kieu-o{
  flex:1 1 0; min-width:0; min-height:44px; padding:0 6px; white-space:nowrap; border-radius:99px; border:1px solid var(--ke-2); background:var(--mat);
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muc); cursor:pointer; touch-action:manipulation;
}
.tcb-kieu-o.on{ background:var(--muc); border-color:var(--muc); color:#fff; }
/* máy tính, Close Beta / Dùng thử: nhãn PRO nhỏ ở góc trên các nút mẫu Pro (dải có chỗ phía trên cho nhãn) */
.tcb-kieu--khoa{ padding-top:8px; margin-top:4px; }
.tcb-kieu--khoa .tcb-kieu-o{ position:relative; }
.tcb-kieu-pro{ position:absolute; top:-7px; right:8px; padding:1px 5px; border-radius:5px; font-size:8.5px; vertical-align:0; }
.tcb-tong{ display:flex; gap:4px; margin:6px 12px 2px; }
.tcb-tong[hidden]{ display:none; }
.tcb-tong-o{ width:44px; height:44px; border:0; background:none; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.tcb-tong-o i{ width:26px; height:26px; border-radius:50%; box-shadow:0 0 0 1px rgba(16,19,25,.15); }
.tcb-tong-o.on i{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--muc); }
.tcb-ghi-nho{ margin:6px 24px 0; font-size:12px; color:var(--muc-3); text-align:center; line-height:1.5; }

/* thẻ + tiêu đề nhóm */
.tcb-the{ background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong, var(--bong)); padding:6px 14px; margin:0 16px 12px; }
.tcb-h{ font-size:15px; font-weight:800; margin:10px 0 6px; }

/* danh sách dòng phí */
.tcb-ds{ position:relative; }
.tcb-dong{
  position:relative; display:flex; align-items:center; gap:2px; min-height:56px; background:var(--mat);
  border-top:1px solid var(--ke); transition:transform var(--nhanh) var(--duong-cong);
}
.tcb-dong:first-child{ border-top:0; }
.tcb-dong.tcb-flip{ transition:transform var(--vua) var(--duong-cong); }
.tcb-dong-ten b, .tcb-mat{ transition:color var(--nhanh), background var(--nhanh); }
.tcb-dong.tcb-dang-keo{ z-index:3; transition:none; box-shadow:0 10px 26px -10px rgba(16,19,25,.35); border-radius:12px; border-top-color:transparent; }
.tcb-keo{
  flex:none; width:40px; height:48px; margin-left:-8px; border:0; background:none; color:#A9B0BC; cursor:grab;
  display:grid; place-items:center; touch-action:none; -webkit-user-select:none; user-select:none;
}
.tcb-dang-keo .tcb-keo{ cursor:grabbing; color:var(--nhan); }
.tcb-dong-ten{
  flex:1; min-width:0; min-height:48px; padding:6px 4px; border:0; background:none; text-align:left; font:inherit; cursor:pointer; color:var(--muc);
}
.tcb-dong-ten b{ display:block; font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:break-word; overflow-wrap:anywhere; }
.tcb-dong-ten b.tcb-moi{ color:var(--nhan); }
.tcb-dong-ten small{ display:block; font-size:12px; color:var(--muc-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcb-dong--an .tcb-dong-ten b{ color:var(--muc-3); text-decoration:line-through; }
.tcb-mat{
  flex:none; width:44px; height:44px; border:0; border-radius:50%; background:#F1F3F7; color:var(--muc-2);
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation;
}
.tcb-mat[aria-pressed="true"]{ background:#FBEFD9; color:#B26A00; }
/* nút ↑↓ dự phòng (bàn phím / trình đọc màn hình): chỉ hiện khi dòng có tiêu điểm */
.tcb-sx{ display:flex; flex:none; width:0; overflow:hidden; opacity:0; }
.tcb-dong:focus-within .tcb-sx{ width:auto; opacity:1; }
.tcb-nut-nho{ width:34px; height:44px; border:0; background:none; color:var(--muc-2); display:grid; place-items:center; cursor:pointer; }
.tcb-nut-nho:disabled{ opacity:.3; cursor:default; }
.tcb-doi-ten-noi{ padding:8px 0 12px; border-top:1px dashed var(--ke-2); }

.tcb-ghi-vang{
  margin:0 16px 12px; padding:10px 12px; border-radius:12px; background:#FFF6DC; color:#6B4E00;
  font-size:13px; line-height:1.5; box-shadow:inset 0 0 0 1px #F4DE9C;
}
.tcb-gat{ display:flex; align-items:center; gap:12px; min-height:56px; border-top:1px solid var(--ke); cursor:pointer; }
.tcb-h + .tcb-gat{ border-top:0; }
.tcb-gat-chu{ flex:1; font-size:15px; font-weight:600; }
.tcb-gat-chu small{ display:block; font-size:12px; font-weight:500; color:var(--muc-3); margin-top:2px; line-height:1.4; }
.tcb-mo{ opacity:.55; cursor:default; }
.tcb-khoi-phuc{ display:block; margin:0 auto 8px; }

/* nhận diện */
.tcb-anh-hang{ display:flex; align-items:flex-start; gap:12px; padding:4px 0 10px; }
.tcb-av{
  flex:none; width:56px; height:56px; border-radius:50%; background:#5A6A86; color:#fff; font-weight:800; font-size:19px;
  display:grid; place-items:center; overflow:hidden;
}
.tcb-av img{ width:100%; height:100%; object-fit:cover; }
.tcb-anh-chu{ flex:1; min-width:0; }
.tcb-anh-chu .tcb-link{ min-height:36px; padding:0; }
.tcb-anh-chu small{ display:block; font-size:12.5px; color:var(--muc-2); line-height:1.45; }
.tcb-mau{ padding:10px 0 8px; border-top:1px solid var(--ke); }
.tcb-mau-hang{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tcb-mau-o{
  width:44px; height:44px; border-radius:50%; border:0; background:var(--tc-o); color:#fff; cursor:pointer;
  display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.tcb-mau-o[aria-checked="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--tc-o, var(--muc)); }
.tcb-mau-o--goc{ background:#fff; color:var(--muc-2); box-shadow:inset 0 0 0 1.5px var(--ke-2); font-size:11px; font-weight:700; }
.tcb-mau-o--goc[aria-checked="true"]{ box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--muc); }
.tcb-mau-o:disabled{ cursor:default; }
.tcb-khoa-logo{ display:flex; align-items:center; gap:10px; padding:12px 0 8px; border-top:1px solid var(--ke); color:var(--muc-2); }
.tcb-khoa-logo b{ display:block; font-size:14px; color:var(--muc); }
.tcb-khoa-logo small{ display:block; font-size:12px; color:var(--muc-3); }

/* ô chữ */
.tcb-o-nhom{ padding:8px 0 10px; }
.tcb-o-nhom + .tcb-o-nhom{ border-top:1px solid var(--ke); }
.tcb-o-dau{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.tcb-o-nhan{ font-size:13px; font-weight:700; color:var(--muc-2); }
.tcb-dem{ font-size:12px; color:var(--muc-3); font-variant-numeric:tabular-nums; flex:none; }
.tcb-o{ width:100%; }
.tcb-o-ghi{ display:block; margin-top:6px; font-size:12px; color:var(--muc-3); line-height:1.45; }
.tcb-o-khung{ position:relative; margin-top:6px; }
.tcb-o-khung .tcb-dem{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
.tcb-o-khung .tcb-o{ padding-right:56px; }

/* tấm (đổi tên, lưu bộ, chọn bộ) */
.tcb-doi-ten{ padding:0 20px 8px; }
/* ☠️ Nút trong tấm (iPhone 26/09/2026: 2 nút "Lưu thay đổi" / "Bỏ thay đổi" bị bẹp).
   Nguyên nhân: ".nut{flex:1}" = flex-basis 0 đặt trên hàng DỌC (flex-direction:column)
   → cỡ nút theo trục dọc bị tính từ 0 thay cho height:52px của .nut; Safari co
   nút về cao ~chữ. Hàng ngang: flex 1 1 0 + min-width:0. Hàng dọc: KHÔNG flex,
   cao cố định như tấm Pro (nút chính 50px, nút phụ 48px). */
.tcb-hang-nut{ display:flex; gap:10px; margin-top:16px; }
.tcb-hang-nut .nut{ flex:1 1 0; min-width:0; height:50px; min-height:50px; padding:0 12px; white-space:nowrap; }
.tcb-hang-nut--doc{ flex-direction:column; gap:8px; }
.tcb-hang-nut--doc .nut{ flex:none; width:100%; }
.tcb-hang-nut--doc .nut--phu{ height:48px; min-height:48px; background:none; border-color:transparent; color:var(--muc-2); }
.tcb-nut-do{ background:var(--loi) !important; }
.tcb-tam-bo{ padding:0 16px 10px; }
.tcb-bo-o{
  display:flex; align-items:center; gap:10px; width:100%; min-height:60px; margin-top:8px; padding:10px 14px; text-align:left;
  border:1.5px solid var(--ke-2); border-radius:14px; background:var(--mat); font:inherit; color:var(--muc); cursor:pointer;
}
.tcb-bo-o span{ flex:1; min-width:0; }
.tcb-bo-o b{ display:block; font-size:15px; }
.tcb-bo-o small{ display:block; font-size:12px; color:var(--muc-3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcb-bo-o.on{ border-color:var(--nhan); background:var(--nhan-nhat); color:var(--nhan-dam); }
.tcb-bo-them{
  width:100%; min-height:52px; margin-top:10px; border:1.5px dashed var(--ke-2); border-radius:14px; background:none;
  font:inherit; font-size:15px; font-weight:700; color:var(--nhan); cursor:pointer;
}

/* hàng "Mẫu của tôi" trong tấm chọn mẫu ở màn báo giá */
.tcb-tam-hang{ margin:4px 20px 2px; }
.tcb-tam-chip{ display:flex; gap:8px; margin-top:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.tcb-tam-chip::-webkit-scrollbar{ display:none; }
.tcb-bo-chip{
  flex:none; min-height:40px; max-width:200px; padding:0 14px; border-radius:99px; border:1px solid var(--ke-2); background:var(--mat);
  font:inherit; font-size:13.5px; font-weight:600; color:var(--muc); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tcb-bo-chip, .tcb-kieu-o, .tcb-mau-o, .tcb-tong-o i{ transition:background var(--nhanh), border-color var(--nhanh), color var(--nhanh), box-shadow var(--nhanh); }
.tcb-bo-chip.on{ border-color:var(--nhan); background:var(--nhan-nhat); color:var(--nhan-dam); }
.tcb-bo-chip small{ font-size:11px; font-weight:600; color:var(--tot); }
.tcb-bo-chip--them{ border-style:dashed; color:var(--nhan); }
/* Close Beta / Dùng thử: bộ đã lưu mang mẫu Pro = khoá (chạm mở bảng Pro, bộ giữ nguyên) */
.tcb-bo-chip--khoa{ color:var(--muc-3); border-style:dashed; }
.tcb-bo-chip--khoa svg{ width:13px; height:13px; margin-right:5px; vertical-align:-2px; }
.tcb-bo-o--khoa{ border-style:dashed; }
.tcb-bo-o--khoa b{ color:var(--muc-2); }
.tcb-bo-o .tcb-bo-khoa{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--nen); color:var(--muc-3); }
.mpc-tam-nut--2{ display:flex; gap:10px; }
.mpc-tam-nut--2 .nut--phu{ flex:none; padding:0 16px; }
.mpc-tam-nut--2 .nut--rong{ flex:1; width:auto; }

/* ---------- máy tính: hộp thoại 2 cột ---------- */
.tam:has(.tcb-dt){ max-width:1180px; width:calc(100% - 60px); max-height:calc(100vh - 48px); }
.tam.tcb-dt--tam{ max-width:1180px; width:calc(100% - 60px); max-height:calc(100vh - 48px); }   /* máy chưa có :has(), lớp do khung.js gắn */
.tcb-dt{ display:flex; flex-direction:column; gap:12px; padding:18px 22px 16px; font-family:'Be Vietnam Pro', system-ui, sans-serif; }
.tcb-dt-dau{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tcb-dt-tit{ font-size:20px; font-weight:800; }
.tcb-dt-tit .mpc-pro{ vertical-align:3px; }
.tcb-dt-cap{ margin-left:8px; font-size:12.5px; font-weight:700; color:var(--muc-3); vertical-align:2px; white-space:nowrap; }
.tcb-dt-bo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tcb-dt-luoi{ display:grid; grid-template-columns:minmax(320px, 420px) 1fr; gap:20px; min-height:0; }
.tcb-dt-trai{ position:sticky; top:0; align-self:start; }
.tcb-xem--dt{ margin:0; height:min(66vh, 640px); }
.tcb-dt-phai{ max-height:min(70vh, 700px); overflow:auto; padding-right:4px; }
.tcb-dt-phai .tcb-kieu{ margin:0 0 4px; }
.tcb-dt-phai .tcb-tong{ margin:2px 0 8px; }
.tcb-dt-phai .tcb-the, .tcb-dt-phai .tcb-ghi-vang{ margin:0 0 12px; box-shadow:inset 0 0 0 1px var(--ke-2); }
.tcb-muc{ border-top:1px solid var(--ke); }
.tcb-muc-dau{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; border:0; background:none; font:inherit; font-size:15px; color:var(--muc); cursor:pointer; text-align:left;
}
.tcb-muc-dau b{ flex:1; }
.tcb-muc-mui{ color:var(--muc-3); transition:transform var(--nhanh); }
.tcb-muc-dau[aria-expanded="true"] .tcb-muc-mui{ transform:rotate(180deg); }
.tcb-muc-than[hidden]{ display:none; }
.tcb-muc-than{ padding:0 0 8px; }
.tcb-dt-chan{ display:flex; align-items:center; gap:10px; justify-content:flex-end; border-top:1px solid var(--ke); padding-top:12px; }
.tcb-dt-chan .nut{ min-width:120px; }
.tcb-dt-thao{ margin-right:auto; display:flex; gap:14px; }
.tcb-dt [data-o="ten-bo"] .tcb-doi-ten{ padding:12px 14px; border-radius:14px; background:#F6F7FA; max-width:520px; margin-left:auto; }

/* ============================================================
   3. ĐIỆN THOẠI: ẢNH LỚN + THANH CÔNG CỤ (phương án A, Vũ duyệt 26/09/2026)
   ============================================================ */
#man-tuy-chinh{ overflow:hidden; }
/* thanh đầu: ‹ · chip "Mẫu của tôi: <bộ> ▾" · Lưu */
.tcb-tren{ gap:4px; }
.tcb-tren-giua{ flex:1 1 auto; min-width:0; display:flex; justify-content:center; }
.tcb-bo-dau{
  display:inline-flex; align-items:center; gap:4px; max-width:100%; min-height:40px; padding:0 14px; border:0; border-radius:99px;
  background:var(--mat); box-shadow:inset 0 0 0 1px var(--ke-2); font:inherit; font-size:13.5px; color:var(--muc); cursor:pointer;
  transition:box-shadow var(--nhanh);
}
.tcb-bo-dau-nhan{ flex:none; color:var(--muc-2); font-weight:600; }
.tcb-bo-dau b{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; }
.tcb-bo-dau-mui{ flex:none; color:var(--muc-3); font-size:11px; margin-left:2px; }
.tcb-bo-dau-ic{ display:none; flex:none; color:var(--muc-3); margin-right:2px; }
/* điện thoại ≤ 420px: chữ "Mẫu của tôi:" nhường chỗ cho tên bộ → thay bằng biểu tượng dấu trang */
@media (max-width:420px){ .tcb-bo-dau-nhan{ display:none; } .tcb-bo-dau-ic{ display:inline-flex; } .tcb-bo-dau{ padding:0 12px; } }

/* vùng xem: ảnh vừa chiều NGANG, cuộn dọc bên trong */
.tcb-vung{ position:relative; flex:1 1 auto; min-height:0; }
.tcb-xv{ position:absolute; left:0; right:0; top:0; bottom:0; transition:bottom var(--vua) var(--duong-cong), top var(--vua) var(--duong-cong); }
#man-tuy-chinh:not(.tcb-chuyen) .tcb-xv{ transition:none; }
#man-tuy-chinh.tcb-chuyen--mo .tcb-xv{ transition-duration:var(--chuyen-vao); }
#man-tuy-chinh.tcb-chuyen--dong .tcb-xv{ transition-duration:var(--chuyen-ra); }
.tcb-cuon{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:4px 12px 12px; scrollbar-width:thin;
}
#man-tuy-chinh.tcb-toan-mo .tcb-cuon{ overflow-y:hidden; }
.tcb-giay{
  position:relative; border-radius:12px; background:#fff; box-shadow:0 10px 24px -14px rgba(16,19,25,.35), 0 0 0 1px var(--ke);
  transform-origin:top center; transition:transform var(--vua) var(--duong-cong); cursor:pointer; min-height:120px;
}
.tcb-giay .tcb-xem-anh{ display:block; width:100%; height:auto; max-width:none; max-height:none; border-radius:12px; box-shadow:none; object-fit:initial; }
.tcb-giay .tcb-xem-anh:not([src]){ display:block; visibility:hidden; height:60vh; }
.tcb-cuon-day{ height:0; }
/* nét gạch dọc chỉ vùng đang sửa: ở lề trái NGOÀI ảnh (không đè nội dung), cao = vùng (scaleY),
   trượt bằng transform, hiện/ẩn bằng opacity (JS đặt transform, xem datGach) */
.tcb-gach{
  position:absolute; left:0; top:0; width:3px; height:64px; border-radius:2px; background:var(--nhan);
  transform-origin:0 0; opacity:0; pointer-events:none; will-change:transform, opacity;
  transition:transform var(--vua) var(--duong-cong), opacity var(--nhanh);
}
.tcb-gach.hien{ opacity:1; }
.tcb-an-doc{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* nút Toàn ảnh trên thanh đầu (không đè ảnh); ẩn khi khung sửa đang mở */
.tcb-toan{ flex:none; transition:opacity var(--nhanh), background var(--nhanh), color var(--nhanh); }
.tcb-toan[aria-pressed="true"]{ background:var(--nhan-nhat); color:var(--nhan-dam); }
#man-tuy-chinh.tcb-co-khung .tcb-toan{ opacity:0; pointer-events:none; }
.tcb-goi-y{
  position:absolute; left:50%; bottom:14px; z-index:2; transform:translateX(-50%); max-width:calc(100% - 32px);
  padding:7px 13px; border-radius:99px; background:rgba(16,19,25,.78); color:#fff; font-size:12px; font-weight:600; text-align:center; line-height:1.35;
  animation:roiVao var(--vua) var(--duong-cong) backwards; transition:opacity var(--nhanh);
}
.tcb-goi-y[hidden]{ display:none; }
.tcb-goi-y--an{ opacity:0; }
.tcb-xv .tcb-xem-cho{ bottom:auto; top:12px; left:18px; transform:none; z-index:2; }

/* thanh công cụ 4 mục cố định ở đáy */
.tcb-cc{
  position:relative; z-index:6; flex:none; display:flex; justify-content:space-around; gap:2px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:var(--mat); border-top:1px solid var(--ke);
}
.tcb-cc-o{
  flex:1 1 0; min-width:0; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border:0; background:none; font:inherit; font-size:11px; font-weight:600; color:var(--muc-2); cursor:pointer; touch-action:manipulation;
  transition:color var(--nhanh);
}
.tcb-cc-o i{ display:grid; place-items:center; width:44px; height:30px; border-radius:11px; transition:background var(--nhanh); }
.tcb-cc-o.on{ color:var(--nhan-dam); }
.tcb-cc-o.on i{ background:var(--nhan-nhat); }
.tcb-cc-o:focus-visible{ outline:2px solid var(--nhan); outline-offset:-2px; border-radius:12px; }

/* khung sửa KHÔNG chặn: ngay trên thanh công cụ, không lớp phủ; trượt bằng transform */
.tcb-khung{
  position:absolute; left:0; right:0; bottom:64px; z-index:5; display:flex; flex-direction:column; background:var(--mat);
  border-radius:20px 20px 0 0; box-shadow:0 -10px 30px -12px rgba(16,19,25,.25), 0 -1px 0 var(--ke-2);
  transform:translate3d(0,100%,0); transition:transform var(--vua) var(--duong-cong); will-change:transform;
}
.tcb-khung[hidden]{ display:none; }
#man-tuy-chinh.tcb-chuyen--mo .tcb-khung{ transition-duration:var(--chuyen-vao); }
#man-tuy-chinh.tcb-chuyen--dong .tcb-khung{ transition-duration:var(--chuyen-ra); }
.tcb-khung-dau{ flex:none; padding:0 8px 2px 16px; touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab; }
.tcb-gac{ display:block; width:100%; height:18px; border:0; background:none; padding:0; cursor:grab; }
.tcb-gac i{ display:block; width:36px; height:5px; margin:7px auto 0; border-radius:3px; background:#D5D8DE; }
.tcb-gac:focus-visible{ outline:2px solid var(--nhan); outline-offset:-2px; border-radius:8px; }
.tcb-khung-hang{ display:flex; align-items:center; gap:8px; min-height:36px; }
.tcb-khung-tit{ flex:none; font-size:15px; font-weight:800; }
.tcb-khung-phu{ flex:1 1 auto; min-width:0; font-size:12px; color:var(--muc-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcb-khung-xong{ flex:none; min-width:56px; }
.tcb-khung-than{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:2px 16px calc(10px + var(--tcb-an, 0px));
}
.tcb-pn[hidden]{ display:none; }
.tcb-pn.tcb-vao-phai{ animation:tcbVaoPhai var(--vua) var(--duong-cong); }
.tcb-pn.tcb-vao-trai{ animation:tcbVaoTrai var(--vua) var(--duong-cong); }
@keyframes tcbVaoPhai{ from{ opacity:0; transform:translate3d(18px,0,0); } to{ opacity:1; transform:none; } }
@keyframes tcbVaoTrai{ from{ opacity:0; transform:translate3d(-18px,0,0); } to{ opacity:1; transform:none; } }

/* Mẫu: 1 dải ngang 4 thumbnail + hàng 5 chấm tông (Sang trọng) */
.tcb-mau-dai{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 2px; }
.tcb-mau-dai::-webkit-scrollbar{ display:none; }
.tcb-mau-the{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:4px; width:68px; min-height:44px; padding:0;
  border:0; background:none; font:inherit; font-size:11.5px; font-weight:600; color:var(--muc-2); cursor:pointer; touch-action:manipulation;
}
.tcb-mau-thu{
  display:block; position:relative; width:62px; height:80px; border-radius:9px; overflow:hidden; background:#E3E6EC; box-shadow:inset 0 0 0 1px var(--ke-2);
  transition:box-shadow var(--nhanh);
}
.tcb-mau-thu img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.tcb-mau-ten{ white-space:nowrap; transition:color var(--nhanh); }
/* Close Beta / Dùng thử: nhãn PRO trên thumbnail 3 mẫu Pro (chạm → bảng Pro) */
.tcb-mau-pro{ left:4px; top:4px; padding:2px 4px; border-radius:4px; font-size:8.5px; letter-spacing:.04em; }
.tcb-mau-pro[hidden]{ display:none; }
.tcb-mau-the.on .tcb-mau-thu{ box-shadow:0 0 0 2.5px var(--nhan); }
.tcb-mau-the.on .tcb-mau-ten{ color:var(--nhan-dam); font-weight:800; }
.tcb-mau-the:focus-visible{ outline:2px solid var(--nhan); outline-offset:3px; border-radius:10px; }
.tcb-mo-dan{ animation:tcbMoDan var(--vua) var(--duong-cong); }
@keyframes tcbMoDan{ from{ opacity:.3; } to{ opacity:1; } }
.tcb-tong-bao{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--vua) var(--duong-cong), opacity var(--nhanh); }
.tcb-tong-bao.mo{ grid-template-rows:1fr; opacity:1; }
.tcb-tong-bao > .tcb-tong{ min-height:0; overflow:hidden; }
.tcb-tong--ngang{ display:flex; align-items:center; gap:0; margin:4px 0 0; }
.tcb-tong-nhan{ font-size:12px; font-weight:600; color:var(--muc-2); margin-right:4px; }

/* Nhận diện: ảnh đại diện · 1 dải màu nhấn · dòng khoá logo hãng */
.tcb-nd-hang{ display:flex; align-items:center; gap:8px; min-height:48px; }
.tcb-av--nho{ width:44px; height:44px; font-size:15px; }
.tcb-nut-nhe{
  flex:none; min-height:40px; padding:0 12px; border:0; border-radius:12px; background:var(--nhan-nhat); color:var(--nhan-dam);
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; position:relative;
}
.tcb-nut-nhe::after{ content:""; position:absolute; inset:-2px 0; }
.tcb-nut-nhe--do{ background:var(--loi-nhat); color:var(--loi); }
.tcb-nd-dung{ margin-left:auto; display:flex; align-items:center; gap:8px; min-height:44px; font-size:12.5px; font-weight:600; color:var(--muc-2); cursor:pointer; }
.tcb-nd-ghi{ margin:2px 0 4px; font-size:11.5px; color:var(--muc-3); line-height:1.4; }
.tcb-mau-ngang{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; padding:4px 3px; margin:0 -3px; }
.tcb-mau-ngang::-webkit-scrollbar{ display:none; }
.tcb-mau-ngang .tcb-mau-o{ flex:none; }
.tcb-khoa-logo--gon{ padding:6px 0 0; font-size:12.5px; border-top:0; }
.tcb-khoa-logo--gon b{ display:inline; font-size:12.5px; }

/* Chi phí: dòng gọn 1 tầng ~48px */
.tcb-cp-tom{ margin:0 0 2px; padding:2px 2px 4px; font-size:11.5px; color:var(--muc-3); line-height:1.4; transition:background var(--nhanh), color var(--nhanh); }
.tcb-cp-tom--co{ padding:6px 10px; border-radius:10px; background:#FFF6DC; color:#6B4E00; font-size:12px; box-shadow:inset 0 0 0 1px #F4DE9C; }
.tcb-ds--gon .tcb-dong{ min-height:48px; gap:4px; }
.tcb-dg-giua{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.tcb-dg-ten{
  display:block; width:100%; min-height:44px; padding:0 2px; border:0; background:none; text-align:left; font:inherit; font-size:14px; font-weight:500;
  color:var(--muc); cursor:text; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--nhanh);
}
.tcb-dong--doi .tcb-dg-ten{ min-height:28px; padding-top:4px; color:var(--nhan-dam); font-weight:700; }
.tcb-dg-goc{ display:block; padding:0 2px 5px; font-size:11px; color:var(--muc-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tcb-dong--an .tcb-dg-ten{ color:var(--muc-3); text-decoration:line-through; }
.tcb-dong--an .tcb-dg-so{ color:var(--muc-3); }
.tcb-dg-so{ flex:none; min-width:50px; text-align:right; font-size:12.5px; color:var(--muc-2); font-variant-numeric:tabular-nums; }
.tcb-ds--gon .tcb-mat{ width:40px; height:40px; border-radius:11px; }
.tcb-ds--gon .tcb-mat::after{ content:""; position:absolute; inset:-2px; }
.tcb-ds--gon .tcb-mat{ position:relative; }
.tcb-dg-o{
  width:100%; min-height:40px; padding:0 10px; border:0; border-radius:10px; box-shadow:inset 0 0 0 2px var(--nhan); background:#fff;
  font:inherit; font-size:14px; color:var(--muc); outline:none;
}
.tcb-dong--chon{ background:var(--nhan-nhat); border-radius:10px; }
.tcb-dong--chon + .tcb-dong{ border-top-color:transparent; }
.tcb-dong--soi{ animation:tcbSoi calc(var(--vua) * 2) var(--duong-cong) 1; }
@keyframes tcbSoi{ 0%{ background:rgba(37,99,235,.28); } 100%{ background:var(--nhan-nhat); } }
.tcb-dong{ transition:transform var(--nhanh) var(--duong-cong), background var(--nhanh); }
.tcb-khoi-hang{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
.tcb-khoi-nhan{ font-size:12px; font-weight:700; color:var(--muc-2); margin-right:2px; }
.tcb-chip-khoi{
  display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 12px; border:0; border-radius:99px;
  background:var(--nen); color:var(--muc-2); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; position:relative;
  box-shadow:inset 0 0 0 1px var(--ke-2); transition:background var(--nhanh), color var(--nhanh), box-shadow var(--nhanh);
}
.tcb-chip-khoi::after{ content:""; position:absolute; inset:-4px -1px; }
.tcb-chip-khoi svg{ width:0; opacity:0; transition:width var(--nhanh), opacity var(--nhanh); }
.tcb-chip-khoi[aria-pressed="true"]{ background:var(--nhan-nhat); color:var(--nhan-dam); box-shadow:inset 0 0 0 1px var(--nhan); }
.tcb-chip-khoi[aria-pressed="true"] svg{ width:14px; opacity:1; }
.tcb-chip-khoi:disabled{ opacity:.5; cursor:default; }
.tcb-pn--cp .tcb-khoi-phuc{ margin:6px auto 0; }

/* Chữ: 3 chip + 1 ô nhập; bàn phím mở → thu thành 1 thanh nhập dính trên bàn phím */
.tcb-chu-chip{ display:flex; gap:6px; margin:2px 0 8px; }
.tcb-chu-c{
  position:relative; min-height:34px; padding:0 13px; border:0; border-radius:99px; background:var(--nen); color:var(--muc-2);
  font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:background var(--nhanh), color var(--nhanh);
}
.tcb-chu-c::after{ content:""; position:absolute; inset:-5px -1px; }
.tcb-chu-c.on{ background:var(--muc); color:#fff; }
.tcb-chu-hang{ display:flex; align-items:center; gap:6px; }
.tcb-chu-o-khung{ flex:1 1 auto; margin-top:0; }
.tcb-chu-xong{ display:none; }
.tcb-chu-ghi{ margin-top:6px; }
#man-tuy-chinh.tcb-go .tcb-khung-dau, #man-tuy-chinh.tcb-go .tcb-chu-ghi,
#man-tuy-chinh.tcb-go .tcb-cp-tom{ display:none; }
#man-tuy-chinh.tcb-go .tcb-chu-xong{ display:inline-flex; align-items:center; justify-content:center; }
#man-tuy-chinh.tcb-go .tcb-khung{ border-radius:14px 14px 0 0; }
#man-tuy-chinh.tcb-go .tcb-khung-than{ padding-top:8px; padding-bottom:calc(8px + var(--tcb-an, 0px)); }
#man-tuy-chinh.tcb-go .tcb-goi-y{ display:none; }

/* tấm "Mẫu của tôi" (điện thoại) */
.tcb-bo-thao-tam{ margin-top:4px; }
.tcb-nut-chu-do{ color:var(--loi) !important; }

@media (prefers-reduced-motion: reduce){
  .tcb-dong, .tcb-dong.tcb-flip, .tcb-dong-ten b, .tcb-mat, .tcb-muc-mui, .tcb-khung, .tcb-xv, .tcb-giay, .tcb-gach, .tcb-toan,
  .tcb-mau-thu, .tcb-mau-ten, .tcb-tong-bao, .tcb-cc-o, .tcb-cc-o i, .tcb-chip-khoi, .tcb-chip-khoi svg, .tcb-chu-c, .tcb-dg-ten, .tcb-goi-y{ transition:none !important; }
  .tcb-pn.tcb-vao-phai, .tcb-pn.tcb-vao-trai, .tcb-mo-dan, .tcb-dong--soi, .tcb-goi-y{ animation:none !important; }
}