/* ============================================================
   AUTOSALES PRO — GIAO DIỆN DESKTOP
   ------------------------------------------------------------
   Lớp trình bày RIÊNG cho màn hình rộng (>=1024px), sống song
   song với giao diện mobile (nen-tang.css/thanh-phan.css/khung.css/
   man-hinh.css) — KHÔNG đụng tới các file đó, KHÔNG đè biến :root
   của chúng. Toàn bộ token + lớp ở đây có tiền tố "dt-" hoặc nằm
   trong biến CSS khai báo ngay trên #app-desktop, nên không lớp
   nào ở đây có thể ăn nhầm vào mobile (xem log.md bẫy #9 — bài học
   cũ về tên lớp trần ăn chéo giữa các khu vực).

   Bố cục: HEADER (đủ rộng) → dưới là SIDEBAR (200px) + NỘI DUNG
   (2 cột trái/phải). Chỉ hiện khi >=1024px; dưới ngưỡng đó
   #app-desktop ẩn hẳn, nhường lại cho #app (mobile) — xem cuối file.
   Dữ liệu/logic tính toán lấy y hệt mobile qua window.TINH / window.DL /
   window.KHUNG.KHO / window.BAN_QUYEN / window.ANH (pwa/js/desktop.js).
   ============================================================ */

:root{
  /* --- Bảng màu desktop (Vũ chốt theo ảnh mẫu) — KHÔNG phải màu mobile,
     đặt ở :root (không phải #app-desktop) để hộp thoại sửa phí/khuyến mãi
     mở qua KHUNG.moTam() (gắn thẳng vào <body>, ngoài #app-desktop) vẫn
     lấy được đúng tông màu này — xem .dt-dialog bên dưới. Tên biến có
     tiền tố "dt-" riêng nên không đụng biến nào của mobile (nen-tang.css). */
  --dt-navy:       #0B3B78;   /* nhấn đậm — thanh tổng lăn bánh, số tiền lớn */
  --dt-xanh:       #1466C3;   /* nhấn chính — nút, viền đang chọn, tab đang mở */
  --dt-muc:        #0B1736;   /* chữ chính */
  --dt-muc-2:      #61708A;   /* chữ phụ / nhãn */
  --dt-vien:       #DFE6EF;   /* viền thẻ, viền ô, đường kẻ */
  --dt-nen:        #F6F9FC;   /* nền trang */
  --dt-nhan-nhat:  #EDF5FF;   /* nền nhấn nhạt — dòng nổi bật, badge, tab đang chọn */
  --dt-mat:        #FFFFFF;   /* mặt thẻ */

  --dt-bo-the:     8px;
  --dt-bo-o:       8px;
  --dt-bo-pill:    999px;
  --dt-khe:        18px;      /* khoảng cách giữa 2 cột chính + giữa các thẻ */
  --dt-le:         20px;      /* padding trang / thẻ */
}

/* Hộp thoại sửa phí/khuyến mãi mở từ desktop (KHUNG.moTam, .sua-phi/.sp-*
   và .sua-km sống trong thanh-phan.css/man-hinh.css) — đổi cục bộ biến
   màu CHUNG mà các lớp đó đang dùng (--nhan/--nhan-dam/--nhan-nhat/--muc/
   --muc-2/--ke-2) sang tông desktop, KHÔNG đụng khai báo :root gốc nên
   mobile không suy suyển. Gắn class "dt-dialog" vào nội dung tấm khi mở
   từ desktop.js. */
.dt-dialog{
  --nhan:var(--dt-xanh); --nhan-dam:var(--dt-navy); --nhan-nhat:var(--dt-nhan-nhat);
  --muc:var(--dt-muc); --muc-2:var(--dt-muc-2); --ke-2:var(--dt-vien);
}

/* Form Thêm/Sửa dòng xe + Sửa phiên bản (xe-tudo.js) dùng chung mobile —
   mặc định .tam 360px quá chật trên PC dư chỗ, khiến khung nhập/tên phiên
   bản bị cắt chữ (Vũ báo 22/09/2026). Chỉ nới riêng khi mở từ desktop
   (.dt-dialog), mobile giữ nguyên 360px. */
.tam:has(.xe-tudo-form.dt-dialog){ max-width:460px; }
.tam.xe-tudo-form--tam.dt-dialog--tam{ max-width:460px; }   /* máy chưa có :has(), lớp do khung.js gắn */

#app-desktop{
  display:none;   /* mặc định ẩn — media query cuối file bật khi đủ rộng */
  position:fixed; inset:0;
  background:var(--dt-nen);
  color:var(--dt-muc);
  font-family:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  overflow-y:auto;
  flex-direction:column;
  z-index:1;
}
#app-desktop *{ box-sizing:border-box; }
#app-desktop .so{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
#app-desktop button{ font-family:inherit; cursor:pointer; }
#app-desktop img{ max-width:none; }

/* ============================================================
   HEADER
   ============================================================ */
.dt-header{
  flex:none;
  height:66px;
  background:var(--dt-mat);
  border-bottom:1px solid var(--dt-vien);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:0 24px;
  position:sticky; top:0; z-index:5;
}
.dt-header-brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.dt-header-brand img{ width:34px; height:34px; border-radius:8px; flex:none; }
.dt-header-brand h1{ font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; }
.dt-header-brand span{ display:block; font-size:11.5px; font-weight:500; color:var(--dt-muc-2); }

.dt-header-tim{ justify-self:center; width:100%; max-width:600px; }
.dt-header-tim .dt-o-tim{
  display:flex; align-items:center; gap:10px;
  background:var(--dt-nen); border:1px solid var(--dt-vien); border-radius:var(--dt-bo-o);
  height:40px; padding:0 14px; color:var(--dt-muc-2);
}
.dt-header-tim input{ border:0; background:transparent; font-family:inherit; font-size:14px; color:var(--dt-muc); width:100%; }
.dt-header-tim input::placeholder{ color:#9AA6B8; }
.dt-header-tim input:focus{ outline:0; }
.dt-header-tim svg{ flex:none; stroke:#9AA6B8; }

.dt-header-user{ display:flex; align-items:center; gap:11px; }
.dt-header-user-chu{ text-align:right; line-height:1.3; }
.dt-header-user-chu b{ display:block; font-size:13.5px; font-weight:700; }
.dt-header-user-chu span{ display:block; font-size:11.5px; color:var(--dt-muc-2); }
.dt-header-avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--dt-navy); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700;
}

/* ============================================================
   THÂN: SIDEBAR + NỘI DUNG
   ============================================================ */
.dt-shell{ flex:1; display:flex; align-items:flex-start; min-height:0; }

/* ---------- Sidebar ---------- */
.dt-sidebar{
  flex:none; width:200px;
  background:var(--dt-mat); border-right:1px solid var(--dt-vien);
  padding:20px 14px; align-self:stretch;
}
.dt-sidebar-nhan{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dt-muc-2); margin:0 6px 8px; }
.dt-hang-chon{ position:relative; margin-bottom:22px; }
.dt-hang-chon select{
  -webkit-appearance:none; appearance:none;
  width:100%; height:40px; padding:0 32px 0 12px;
  background:var(--dt-mat); border:1px solid var(--dt-vien); border-radius:var(--dt-bo-o);
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--dt-muc);
}
.dt-hang-chon::after{
  content:""; position:absolute; right:13px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--dt-muc-2); border-bottom:2px solid var(--dt-muc-2);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.dt-nav{ display:flex; flex-direction:column; gap:2px; }
.dt-nav button,.dt-nav a.dt-nav-lk{
  display:flex; align-items:center; gap:10px;
  height:38px; padding:0 10px; border:0; background:transparent; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--dt-muc-2); text-align:left;
  transition:background .12s, color .12s;
}
.dt-nav button:hover,.dt-nav a.dt-nav-lk:hover{ background:var(--dt-nen); }
.dt-nav button.dt-dang{ background:var(--dt-nhan-nhat); color:var(--dt-xanh); }
.dt-nav button svg,.dt-nav a.dt-nav-lk svg{ flex:none; stroke:currentColor; }

/* ---------- Vùng nội dung chính ---------- */
.dt-main{ flex:1; min-width:0; padding:var(--dt-le); }
.dt-grid{ display:grid; grid-template-columns:1.32fr 1fr; gap:var(--dt-khe); align-items:start; max-width:1560px; margin:0 auto; }
.dt-col{ display:flex; flex-direction:column; gap:var(--dt-khe); min-width:0; }

/* ============================================================
   THẺ DÙNG CHUNG
   ============================================================ */
.dt-the{
  background:var(--dt-mat); border:1px solid var(--dt-vien); border-radius:var(--dt-bo-the);
  padding:var(--dt-le);
}
.dt-the-dau{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dt-the-tit{ font-size:16px; font-weight:700; letter-spacing:-.01em; }

/* ============================================================
   CHỌN PHIÊN BẢN — danh sách dòng xe cuộn ngang + dòng chi tiết
   ============================================================ */
.dt-xe-cuon{
  display:flex; gap:10px; overflow-x:auto; padding:0 8px 4px 0; margin-bottom:16px;
  scroll-padding-inline:0 8px;
  scrollbar-width:thin;
}
.dt-xe-cuon::-webkit-scrollbar{ height:6px; }
.dt-xe-cuon::-webkit-scrollbar-thumb{ background:var(--dt-vien); border-radius:99px; }
.dt-xe-the{
  flex:0 0 116px; border:1.5px solid var(--dt-vien); border-radius:10px;
  padding:10px 10px 11px; text-align:left; background:var(--dt-mat);
  transition:border-color .12s, background .12s;
}
.dt-xe-the:hover{ border-color:#B9CBE6; }
.dt-xe-the.chon{ border-color:var(--dt-xanh); background:var(--dt-nhan-nhat); }
.dt-xe-the .dt-xe-anh{
  width:100%; height:52px; border-radius:6px; background:#F1F4F8; margin-bottom:8px;
  display:grid; place-items:center; overflow:hidden;
}
.dt-xe-the .dt-xe-anh img{ width:92%; height:88%; object-fit:contain; object-position:center; display:block; }
.dt-xe-the .dt-xe-ten{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-xe-the .dt-xe-gia{ display:block; font-size:11.5px; color:var(--dt-muc-2); margin-top:2px; }

.dt-xe-rong{ padding:20px 4px; color:var(--dt-muc-2); font-size:13px; }

.dt-xe-chitiet{
  display:flex; align-items:center; gap:14px; padding-top:16px; border-top:1px solid var(--dt-vien);
}
/* Toàn bộ ảnh + tên dòng + phiên bản là 1 nút bấm để mở lại danh sách
   phiên bản (KHUNG.moTam) — không còn là <select> tí hon nữa. */
.dt-xe-chitiet-chon{
  flex:1; min-width:120px; display:flex; align-items:center; gap:14px;
  border:0; background:transparent; padding:6px; margin:-6px; border-radius:10px;
  text-align:left; transition:background .12s;
}
.dt-xe-chitiet-chon:hover{ background:var(--dt-nen); }
.dt-xe-chitiet-anh{
  flex:none; width:64px; height:46px; border-radius:8px; background:#F1F4F8;
  display:grid; place-items:center; overflow:hidden;
}
.dt-xe-chitiet-anh img{ width:100%; height:100%; object-fit:contain; }
.dt-xe-chitiet-ten{ min-width:0; }
.dt-xe-chitiet-ten b{ display:block; font-size:15px; font-weight:700; }
.dt-xe-chitiet-pb{
  display:inline-flex; align-items:center; gap:3px;
  font-size:12.5px; font-weight:500; color:var(--dt-xanh); margin-top:1px;
}
.dt-xe-chitiet-pb svg{ stroke:currentColor; flex:none; }

.dt-truong{ flex:none; width:128px; }
.dt-truong label{ display:block; font-size:11px; font-weight:600; color:var(--dt-muc-2); margin-bottom:5px; }
.dt-o-chon{ position:relative; display:block; width:100%; min-width:0; }
.dt-truong select, .dt-o-chon select{
  -webkit-appearance:none; appearance:none; width:100%; height:36px; padding:0 26px 0 10px;
  background:var(--dt-mat); border:1px solid var(--dt-vien); border-radius:7px;
  font-family:inherit; font-size:12.5px; font-weight:600; color:var(--dt-muc);
}
.dt-truong .dt-o-chon::after, .dt-o-chon::after{
  content:""; position:absolute; right:10px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--dt-muc-2); border-bottom:2px solid var(--dt-muc-2);
  transform:translateY(-65%) rotate(45deg); pointer-events:none;
}
.dt-truong .dt-nhan-tinh{
  display:flex; align-items:center; height:36px; padding:0 10px;
  border:1px solid var(--dt-vien); border-radius:7px; font-size:12.5px; font-weight:600; color:var(--dt-muc);
  background:var(--dt-nen);
}

/* ============================================================
   GIÁ BÁN & KHUYẾN MÃI
   ============================================================ */
.dt-gia-dong{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 4px; border-top:1px solid var(--dt-vien); font-size:13.5px;
}
.dt-gia-dong:first-of-type{ border-top:0; }
.dt-gia-dong .k{ color:var(--dt-muc-2); }
.dt-gia-dong .v-nhom{ display:flex; align-items:baseline; gap:8px; }
.dt-gia-dong .v{ font-weight:700; }
.dt-gia-dong .dv{ font-size:11.5px; color:var(--dt-muc-2); }
.dt-gia-dong--noibat{
  background:var(--dt-nhan-nhat); border-radius:7px; padding:14px 14px; margin-top:2px; border-top:0;
}
.dt-gia-dong--noibat .k{ font-weight:700; color:var(--dt-muc); }
.dt-gia-dong--noibat .v{ font-size:17px; font-weight:800; color:var(--dt-navy); letter-spacing:-.01em; }

/* Ô nhập liền dòng (giá niêm yết / giảm giá) — khung bo góc kiểu ô nhập thật
   (giống các <select> cạnh bên), không phải viền gạch chấm (Vũ báo 15/09/2026
   bản trước xấu) — để người dùng nhận ra đây là ô sửa được, không phải chữ tĩnh. */
.dt-o-inline{
  width:126px; text-align:right; padding:5px 9px; border:1px solid var(--dt-vien);
  border-radius:7px; background:var(--dt-nen); font:inherit; font-weight:700; color:inherit;
  transition:background .15s, border-color .15s, box-shadow .15s;
}
.dt-o-inline:hover{ border-color:var(--dt-xanh); background:var(--dt-mat); }
.dt-o-inline:focus{
  outline:none; border-color:var(--dt-xanh); background:var(--dt-mat);
  box-shadow:0 0 0 3px rgba(20,102,195,.14);
}

/* ============================================================
   LƯỚI 2 CỘT (Thuế trước bạ & chi phí phát sinh)
   ============================================================ */
.dt-luoi-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.dt-luoi-2 .dt-truong{ width:auto; }

/* ============================================================
   NÚT "ĐẶT LẠI MẶC ĐỊNH" — ở chân cột "Ảnh gửi khách" (Giao diện máy tính
   mới 30/09/2026, xem khối cuối file; trước nằm ở đầu khối Chi phí đăng ký
   của khung iPhone).
   ============================================================ */
.dt-datlai{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--dt-vien); background:var(--dt-mat); border-radius:7px;
  height:30px; padding:0 11px; font-size:11.5px; font-weight:600; color:var(--dt-muc-2);
  flex:none;
}
.dt-datlai:hover{ border-color:#B9CBE6; color:var(--dt-muc); }
.dt-datlai svg{ stroke:currentColor; }

/* nút "+ Thêm khoản khác" — chân cột "Ảnh gửi khách" */
.dt-them-phi-tudo{
  display:inline-flex; align-items:center; gap:6px;
  margin:10px 0 12px; border:1px solid var(--dt-nhan-nhat); background:var(--dt-nhan-nhat); border-radius:7px;
  height:30px; padding:0 11px; font-size:11.5px; font-weight:600; color:var(--dt-xanh);
}
.dt-them-phi-tudo:hover{ background:#E1EBFF; }
.dt-them-phi-tudo svg{ stroke:currentColor; }

/* ============================================================
   TRẢ GÓP — thẻ riêng trong CỘT TRÁI (thay cho "Chi phí lăn bánh"
   cũ — khoản đó lặp lại đúng nội dung của "Chi phí đăng ký" bên
   preview nên bị dư, Vũ báo 15/09/2026 buổi 3).
   ============================================================ */
.dt-tg-bat-hang{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; }
.dt-tg-bat-hang b{ display:block; font-size:13.5px; }
.dt-tg-bat-hang span{ display:block; font-size:11.5px; color:var(--dt-muc-2); margin-top:1px; }
.dt-gat{ position:relative; width:42px; height:25px; flex:none; }
.dt-gat input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.dt-gat .ray{ position:absolute; inset:0; border-radius:999px; background:var(--dt-vien); transition:background-color .22s ease,box-shadow .22s ease; }
.dt-gat .ray::before{ content:""; position:absolute; top:2.5px; left:2.5px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .24s cubic-bezier(.22,.8,.3,1),box-shadow .2s ease; }
.dt-gat input:checked + .ray{ background:var(--dt-xanh); }
.dt-gat input:checked + .ray{ box-shadow:0 0 0 4px rgba(20,102,195,.10); }
.dt-gat input:checked + .ray::before{ transform:translateX(17px); box-shadow:0 2px 6px rgba(5,45,95,.28); }
.dt-gat input:focus-visible + .ray{ outline:2px solid #82B3EA; outline-offset:2px; }
.dt-tg-than[hidden]{ display:none; }

.dt-nhan-muc{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dt-muc-2); margin:0 0 8px; }
.dt-moc-vay{ display:flex; gap:7px; margin-bottom:14px; }
.dt-moc-vay button{
  flex:1; border:1px solid var(--dt-vien); background:var(--dt-mat); border-radius:8px;
  font-weight:700; font-size:13px; color:var(--dt-muc-2); padding:9px 0;
}
.dt-moc-vay button.chon{ border-color:var(--dt-xanh); background:var(--dt-nhan-nhat); color:var(--dt-xanh); }

.dt-o-nhom{ margin-bottom:12px; }
.dt-o-nhom label{ display:block; font-size:12px; font-weight:600; color:var(--dt-muc-2); margin-bottom:5px; }
.dt-o{
  width:100%; height:40px; padding:0 12px; background:var(--dt-mat);
  border:1px solid var(--dt-vien); border-radius:7px; font-family:inherit;
  font-size:14px; font-weight:600; color:var(--dt-muc);
}
.dt-o:focus{ outline:0; border-color:var(--dt-xanh); box-shadow:0 0 0 3px var(--dt-nhan-nhat); }
.dt-o--tien{ text-align:right; }
.dt-vay-o{ position:relative; }
.dt-vay-o .dt-o{ padding-right:38px; text-align:left; }
.dt-vay-o > b{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:#9AA6B8; font-size:12px; pointer-events:none; }
.dt-goi-y{ font-size:11.5px; color:#9AA6B8; margin-top:5px; }
.dt-2o{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dt-buoc{ display:flex; align-items:center; justify-content:space-between; height:40px; border:1px solid var(--dt-vien); border-radius:7px; padding:0 12px; }
.dt-buoc button{ width:22px; height:22px; border:0; background:var(--dt-nen); border-radius:6px; font-size:15px; font-weight:700; color:var(--dt-muc); line-height:1; }
.dt-buoc .giua{ font-size:13px; }

.dt-tg-thong-tin{ overflow:hidden; margin-top:14px; border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat); }
.dt-tg-thong-tin-dong{ min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 12px; border-top:1px solid var(--dt-vien); }
.dt-tg-thong-tin-dong:first-child{ border-top:0; }
.dt-tg-thong-tin-dong > span:first-child{ color:var(--dt-muc-2); font-size:13px; }
.dt-tg-thong-tin-dong > b{ font-size:14px; font-weight:700; white-space:nowrap; }
.dt-tg-thong-tin-dong .dt-buoc{ width:148px; border:0; }
.dt-tg-lai{ display:flex; align-items:center; justify-content:flex-end; gap:4px; }
.dt-tg-lai input{ width:43px; padding:0; border:0; outline:0; background:transparent; color:var(--dt-muc); font-family:inherit; font-size:14px; font-weight:700; line-height:1; text-align:right; }
.dt-tg-lai b{ font-size:14px; white-space:nowrap; }
.dt-tg-thong-tin-dong:focus-within{ background:var(--dt-nhan-nhat); }
.dt-tg-kq-gon{ overflow:hidden; margin-top:12px; border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat); }
.dt-tg-binhquan{ margin:0; padding:13px 14px; text-align:left; background:var(--dt-nhan-nhat); }
.dt-tg-binhquan span{ display:block; margin-bottom:3px; color:var(--dt-xanh); font-size:11.5px; }
.dt-tg-binhquan b{ color:var(--dt-navy); font-size:24px; font-weight:800; }
.dt-tg-binhquan b span{ display:inline; margin:0; color:inherit; font-size:inherit; }
.dt-tg-xem{ width:100%; min-height:44px; border:0; border-top:1px solid var(--dt-vien); background:var(--dt-mat); color:var(--dt-xanh); font-size:12.5px; font-weight:700; }
.dt-tg-xem span{ margin-left:4px; font-size:18px; vertical-align:-1px; }
.tam:has(.dt-bang-day){ max-width:900px; }
.tam.dt-bang-day--tam{ max-width:900px; }   /* máy chưa có :has() */
.dt-bang-day{ padding:0 20px; }
.dt-bang-tom-tat{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:12px; color:var(--dt-muc-2); font-size:12px; }
.dt-bang-tom-tat b{ color:var(--dt-muc); }
.dt-bang-cuon{ max-height:58vh; overflow:auto; border:1px solid var(--dt-vien); border-radius:8px; }
.dt-bang-table{ width:100%; border-collapse:collapse; font-size:12px; }
.dt-bang-table th{ position:sticky; top:0; z-index:1; padding:9px 10px; background:var(--dt-nhan-nhat); color:var(--dt-navy); text-align:right; }
.dt-bang-table th:first-child,.dt-bang-table td:first-child{ text-align:center; }
.dt-bang-table td{ padding:8px 10px; border-top:1px solid var(--dt-vien); text-align:right; white-space:nowrap; }
.dt-bang-actions{ display:grid; grid-template-columns:1fr 1fr auto; gap:10px; margin-top:14px; }
.dt-bang-actions .nut{ min-width:0; }
.dt-bang-actions .nut--nhe{ padding:0 10px; }

/* Lộ trình thanh toán — Đặt cọc/Đợt 2 (hoặc Đối ứng)/Chi phí đăng ký/
   Đợt 3 (hoặc Số tiền vay). Vũ chốt 15/09/2026, công thức port từ CRM
   (xem tai-lieu/cong-thuc-lo-trinh-thanh-toan.md), giống hệt bản mobile. */
.dt-lo-trinh{ border:1px solid var(--dt-vien); border-radius:8px; overflow:hidden; margin-bottom:14px; }
.dt-lo-trinh-coc{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; }
.dt-lo-trinh-coc > div:first-child label{ display:block; color:var(--dt-muc-2); font-size:13px; }
.dt-lo-trinh-coc > div:first-child span{ display:block; margin-top:2px; color:#9AA6B8; font-size:11px; }
.dt-lo-trinh-coc-o{ display:flex; align-items:center; width:174px; height:34px; padding:0 9px; background:var(--dt-nen); border:1px solid var(--dt-vien); border-radius:7px; }
.dt-lo-trinh-coc-o:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px var(--dt-nhan-nhat); }
.dt-lo-trinh-coc-o input{ width:145px; min-width:0; padding:0; border:0; outline:0; background:transparent; color:var(--dt-muc); font:700 14px/1 var(--font); text-align:right; }
.dt-lo-trinh-coc-o > span{ margin-left:4px; color:var(--dt-muc-2); font-size:12px; font-weight:600; }
.dt-lo-trinh-hang{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-top:1px solid var(--dt-vien); font-size:13px; }
.dt-lo-trinh-hang .nhan{ color:var(--dt-muc-2); }
.dt-lo-trinh-hang .nhan i{ font-style:normal; color:#9AA6B8; font-size:11.5px; }
.dt-lo-trinh-hang .so{ font-weight:700; white-space:nowrap; }
.dt-lo-trinh-hang--sua{ cursor:pointer; }
.dt-lo-trinh-hang--sua .nhan{ color:var(--dt-xanh); font-weight:600; }
.dt-lo-trinh-hang--sua:hover{ background:var(--dt-nen); }

/* ============================================================
   CỘT PHẢI — "Ảnh gửi khách": xem trước sống bằng chính mẫu ảnh (ANH.dungKhung,
   Shadow DOM), Giao diện máy tính mới 30/09/2026 giai đoạn 2 (khối cuối file).
   Khung iPhone mô phỏng cũ (.dt-iphone / .dt-pv-*) đã gỡ.
   ============================================================ */
.dt-col-phai > .dt-the{ padding:0; overflow:hidden; }

/* hộp sửa quà tặng (moSuaQuaTang) */
.dt-qua-o{
  display:block; height:150px; padding:13px 15px; resize:vertical;
  font-size:15px; font-weight:500; line-height:1.55; text-align:left;
  font-variant-numeric:normal;
}
.dt-qua-hoi{ padding:6px 4px 18px; text-align:center; }
.dt-qua-hoi-ic{ width:46px; height:46px; margin:0 auto 11px; border-radius:50%; display:grid; place-items:center; color:var(--dt-xanh); background:var(--dt-nhan-nhat); }
.dt-qua-hoi > b{ display:block; font-size:15px; }
.dt-qua-hoi > p{ max-width:320px; margin:7px auto 0; color:var(--dt-muc-2); font-size:12px; line-height:1.55; }

.dt-nut-hang{ display:flex; gap:10px; }
.dt-nut-gui, .dt-nut-in{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  height:48px; border:0; border-radius:8px;
  font-size:14.5px; font-weight:700; transition:background .12s, border-color .12s, opacity .12s;
}
.dt-nut-gui{ background:var(--dt-xanh); color:#fff; }
.dt-nut-gui:hover{ background:var(--dt-navy); }
.dt-nut-gui[disabled], .dt-nut-in[disabled]{ opacity:.45; cursor:not-allowed; }
.dt-nut-gui svg, .dt-nut-in svg{ stroke:currentColor; }
.dt-nut-in{ border:1px solid var(--dt-vien); background:var(--dt-mat); color:var(--dt-muc); }
.dt-nut-in:hover{ border-color:#B9CBE6; background:var(--dt-nen); }

/* ============================================================
   KHUYẾN MÃI (máy tính): BẢNG KIỂU EXCEL (gói U2, 28/09/2026)
   tai-lieu/dac-ta-bang-khuyen-mai.md: mỗi dòng xe 1 nhóm + hàng "Cả dòng", ô vàng = đã sửa chưa lưu, nút
   "Chép xuống" có chữ, thanh công cụ + tiêu đề cột dính trên khi cuộn (#dt-view-km vẫn là khung cuộn như gói P1),
   thanh trạng thái dính đáy. Cột co theo bề rộng (tối thiểu vừa 1024px, không cuộn ngang). Chuyển động dùng
   --nhanh / --vua / --duong-cong, tắt hết khi prefers-reduced-motion. Thay danh sách dòng xe + ngăn trượt 21/09.
   ============================================================ */
.dt-view[hidden]{ display:none; }
.dt-view-1cot{ max-width:900px; margin:0 auto; }
#dt-view-km{ max-width:1480px; }
.dt-km-dau{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin-bottom:12px; }
.dt-km-dau h2{ font-size:20px; font-weight:800; }
.dt-km-dau p{ font-size:12.5px; color:var(--dt-muc-2); margin-top:3px; }

/* ---------- 2 tab nội bộ ---------- */
.dt-km-tabs{ display:inline-flex; gap:4px; padding:4px; background:#E8EEF5; border-radius:10px; }
.dt-km-tab{
  height:34px; padding:0 16px; border:0; border-radius:7px; background:transparent;
  font-size:13px; font-weight:600; color:var(--dt-muc-2); font-family:inherit; cursor:pointer;
  transition:background var(--nhanh), color var(--nhanh);
}
.dt-km-tab.chon{ background:var(--dt-mat); color:var(--dt-xanh); box-shadow:0 1px 2px rgba(11,23,54,.08); }
.dt-km-panel[hidden]{ display:none; }

/* ---------- tháng áp dụng + 3 số tổng quan (1 dải gọn) ---------- */
.dt-km-thang{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; padding:11px 14px; margin-bottom:4px;
  background:var(--dt-mat); border:1px solid #D9E2EF; border-radius:var(--dt-bo-the); box-shadow:0 7px 20px rgba(11,28,55,.06);
}
.dt-km-thang-chu{ min-width:0; }
.dt-km-thang h3{ font-size:14.5px; font-weight:800; }
.dt-km-thang p{ font-size:11.5px; color:var(--dt-muc-2); margin-top:2px; }
.dt-km-thang-nut{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 12px;
  border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat);
  font-size:12.5px; font-weight:600; color:var(--dt-muc); transition:border-color var(--nhanh), background var(--nhanh);
}
.dt-km-thang-nut:hover{ border-color:#B9CBE6; background:var(--dt-nhan-nhat); }
.dt-km-thang-nut svg{ color:var(--dt-xanh); }
.dt-km-tk{ display:flex; gap:8px; margin-left:auto; }
.dt-km-tk-o{ min-width:104px; padding:6px 11px; border-radius:8px; background:var(--dt-nen); }
.dt-km-tk-o span{ display:block; font-size:10.5px; color:var(--dt-muc-2); white-space:nowrap; }
.dt-km-tk-o b{ display:block; margin-top:1px; font-size:15px; font-weight:800; white-space:nowrap; }

/* ---------- khung bảng: thanh công cụ + tiêu đề cột dính trên, thanh trạng thái dính dưới ---------- */
.dt-km-khung{
  --dt-km-cot:minmax(170px,1.6fr) minmax(132px,.8fr) minmax(136px,.85fr) minmax(134px,.8fr) minmax(88px,.55fr) minmax(170px,1.6fr);
  --dt-km-ke:#D9E2EF; --dt-km-ke-nhat:#EDF1F6;
}
.dt-km-dinh{ position:sticky; top:0; z-index:6; padding-top:10px; background:var(--dt-nen); }
.dt-km-cc{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding-bottom:10px; }
.dt-km-tim{
  flex:1 1 160px; max-width:260px; min-width:150px; height:36px; display:flex; align-items:center; gap:8px; padding:0 11px;
  border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat); color:var(--dt-muc-2);
  transition:border-color var(--nhanh), box-shadow var(--nhanh);
}
.dt-km-tim:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px var(--dt-nhan-nhat); }
.dt-km-tim svg{ flex:none; }
.dt-km-tim input{ flex:1; min-width:0; height:100%; border:0; background:transparent; font:inherit; font-size:13px; color:var(--dt-muc); }
.dt-km-tim input:focus{ outline:0; }
.dt-km-loc{ display:flex; align-items:center; gap:7px; height:36px; padding:0 2px; font-size:12.5px; font-weight:600; color:var(--dt-muc); white-space:nowrap; cursor:pointer; }
.dt-km-loc input{ width:16px; height:16px; margin:0; accent-color:var(--dt-xanh); cursor:pointer; }
.dt-km-cc-gian{ flex:1 1 0; min-width:0; }
.dt-km-chu-giai{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dt-muc-2); white-space:nowrap; }
.dt-km-chu-giai i{ width:14px; height:14px; border-radius:4px; background:#FFF1C2; border:1px solid #E8C65A; }
.dt-km-chu-ngan{ display:none; }
.dt-km-cc-nut{
  display:flex; align-items:center; gap:6px; height:36px; padding:0 12px; border:1px solid var(--dt-vien); border-radius:8px;
  background:var(--dt-mat); color:var(--dt-muc); font-size:12.5px; font-weight:600; white-space:nowrap;
  transition:border-color var(--nhanh), background var(--nhanh), color var(--nhanh);
}
.dt-km-cc-nut:hover:not(:disabled){ border-color:#B9CBE6; background:var(--dt-nhan-nhat); }
.dt-km-cc-nut:disabled{ color:#9AA6B8; cursor:default; }
.dt-km-luu{
  height:36px; padding:0 16px; border:0; border-radius:8px; background:#E6EBF2; color:var(--dt-muc-2);
  font-size:12.5px; font-weight:700; white-space:nowrap; transition:background var(--nhanh), color var(--nhanh), box-shadow var(--nhanh);
}
.dt-km-luu:disabled{ cursor:default; }
.dt-km-luu--co{ background:var(--dt-xanh); color:#fff; box-shadow:0 6px 14px rgba(20,102,195,.24); }
.dt-km-luu--co:hover{ background:#0F58AC; }
.dt-km-luu[aria-busy="true"]{ background:var(--dt-nhan-nhat); color:var(--dt-xanh); }

.dt-km-hang{ display:grid; grid-template-columns:var(--dt-km-cot); }
.dt-km-o{ position:relative; min-width:0; display:flex; align-items:center; }
.dt-km-hang--tieu-de{
  min-height:38px; background:#F3F6FA; border:1px solid var(--dt-km-ke); border-radius:10px 10px 0 0;
  font-size:11.5px; font-weight:700; color:var(--dt-muc-2);
}
.dt-km-hang--tieu-de .dt-km-o{ display:block; padding:0 10px; line-height:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-km-hang--tieu-de .dt-km-o:first-child{ padding-left:38px; }
.dt-km-hang--tieu-de .dt-km-o + .dt-km-o{ border-left:1px solid #E3E9F1; }
.dt-km-hang--tieu-de .dt-km-o--so{ text-align:right; }
.dt-km-hang--tieu-de .dt-km-o--giua{ text-align:center; }
.dt-km-hang--tieu-de .dt-km-o--sua-duoc{ color:var(--dt-xanh); }

.dt-km-luoi{ background:var(--dt-mat); border:1px solid var(--dt-km-ke); border-top:0; }
.dt-km-luoi .dt-km-o + .dt-km-o{ border-left:1px solid var(--dt-km-ke-nhat); }
.dt-km-rong{ padding:36px 16px; text-align:center; font-size:13px; color:var(--dt-muc-2); }

/* hàng dòng xe (Cả dòng) */
.dt-km-hang--dong{ min-height:44px; background:#F4F7FB; border-top:1px solid #DDE5EF; }
.dt-km-nhom:first-child > .dt-km-hang--dong{ border-top:0; }
.dt-km-hang--dong .dt-km-o--ten{ gap:6px; padding:4px 6px 4px 4px; }
.dt-km-gap{
  flex:0 1 auto; display:flex; align-items:center; gap:6px; min-width:0; height:34px; padding:0 6px 0 5px;
  border:0; border-radius:8px; background:transparent; color:var(--dt-muc); text-align:left; transition:background var(--nhanh);
}
.dt-km-gap:hover{ background:#E6EDF6; }
.dt-km-gap b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:800; }
.dt-km-mui{ flex:none; color:var(--dt-muc-2); transition:transform var(--nhanh) var(--duong-cong); }
.dt-km-gap[aria-expanded="true"] .dt-km-mui{ transform:rotate(90deg); }
.dt-km-tt{ flex:none; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; background:#E9EEF4; color:#5A6472; }
.dt-km-tt--da-hoan-tat{ background:var(--tot-nhat); color:#047A43; }
.dt-km-tt--chua-hoan-tat{ background:var(--canh-nhat); color:#8A5200; }
/* nút nhỏ (Thêm phiên bản / Sửa dòng xe ở hàng dòng xe, Xoá phiên bản ở hàng phiên bản) nổi ở mép phải ô tên, chỉ hiện khi
   rê chuột / hàng đang chọn / đang focus: không chiếm chỗ nên tên + nhãn trạng thái không bị xuống dòng ở 1024px */
.dt-km-nut-hang{
  position:absolute; right:4px; top:50%; transform:translateY(-50%); display:flex; gap:2px; padding-left:16px;
  background:linear-gradient(90deg, rgba(244,247,251,0), #F4F7FB 16px);
}
.dt-km-nut-nho{
  flex:none; width:26px; height:26px; display:grid; place-items:center; padding:0; border:0; border-radius:7px;
  background:transparent; color:var(--dt-muc-2); opacity:0; pointer-events:none; transition:opacity var(--nhanh), background var(--nhanh), color var(--nhanh);
}
.dt-km-hang:hover .dt-km-nut-nho, .dt-km-hang--dang .dt-km-nut-nho, .dt-km-nut-nho:focus{ opacity:1; pointer-events:auto; }
.dt-km-nut-hang:not(:focus-within){ pointer-events:none; }
.dt-km-hang:not(:hover):not(.dt-km-hang--dang) .dt-km-nut-hang:not(:focus-within){ background:none; }
.dt-km-nut-nho:hover{ background:var(--dt-nhan-nhat); color:var(--dt-xanh); }
.dt-km-nut-xoa{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:var(--dt-mat); }
.dt-km-nut-xoa:hover{ background:var(--loi-nhat); color:var(--loi); }
.dt-km-o--nhan{ justify-content:flex-end; padding:0 10px; font-size:11.5px; font-weight:700; color:var(--dt-muc-2); }
.dt-km-hang--dong .dt-km-o--tien{ background:var(--dt-mat); }

/* hàng phiên bản */
.dt-km-hang--pb{ min-height:40px; border-top:1px solid var(--dt-km-ke-nhat); transition:background var(--nhanh); }
.dt-km-hang--pb:hover{ background:#FBFCFE; }
.dt-km-hang--pb .dt-km-o--ten{ gap:4px; padding:0 6px 0 38px; font-size:13px; color:var(--dt-muc); }
.dt-km-ten-pb{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dt-km-o--so{ font-size:13px; font-variant-numeric:tabular-nums; }
.dt-km-o--gia{ justify-content:flex-end; padding:0 10px; background:#FAFBFD; color:var(--dt-muc-2); }
.dt-km-so{
  width:100%; height:100%; min-height:38px; padding:0 10px; border:0; background:transparent; color:var(--dt-muc);
  font:inherit; font-size:13px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; cursor:cell;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dt-km-so--mo{ font-size:12px; font-weight:500; color:var(--dt-muc-2); }
.dt-km-o--sau{ justify-content:flex-end; gap:5px; padding:0 10px; background:#FAFBFD; color:#9AA6B8; }
.dt-km-hang--dong .dt-km-o--sau{ background:transparent; }
.dt-km-o--co-giam{ color:var(--dt-muc); font-weight:600; }
.dt-km-o--vuot{ color:var(--loi); font-weight:700; }
.dt-km-o--vuot svg{ flex:none; }
.dt-km-o--bh{ justify-content:center; }
.dt-km-bh{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; height:100%; min-height:38px; padding:0 6px; font-size:12.5px; color:var(--dt-muc-2); white-space:nowrap; cursor:pointer; }
.dt-km-bh input{ width:16px; height:16px; margin:0; accent-color:var(--dt-xanh); cursor:pointer; }
.dt-km-qua-nut{
  display:flex; align-items:center; gap:5px; width:100%; height:100%; min-width:0; min-height:38px; padding:0 10px;
  border:0; background:transparent; text-align:left; overflow:hidden; cursor:pointer;
}
.dt-km-qua-the{
  flex:0 1 auto; min-width:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:3px 8px; border-radius:999px; background:var(--dt-nhan-nhat); color:#0F4E97; font-size:11.5px; font-weight:600;
}
.dt-km-qua-them{ flex:none; font-size:11.5px; font-weight:700; color:var(--dt-muc-2); }
.dt-km-qua-them--hep{ display:none; }
.dt-km-qua-rong{ font-size:12.5px; color:#9AA6B8; }
.dt-km-qua-dong{
  display:flex; align-items:center; gap:5px; height:30px; margin:0 8px; padding:0 11px; border:1px solid #C9D6F5; border-radius:8px;
  background:var(--dt-mat); color:var(--dt-xanh); font-size:12px; font-weight:700; white-space:nowrap; transition:background var(--nhanh);
}
.dt-km-qua-dong:hover{ background:var(--dt-nhan-nhat); }

/* ô đã sửa chưa lưu (vàng) · ô đang chọn (viền xanh) · ô đang gõ */
.dt-km-o--doi, .dt-km-hang--pb:hover .dt-km-o--doi{ background:#FFF1C2; }
.dt-km-o--chon{ z-index:2; box-shadow:inset 0 0 0 2px var(--dt-xanh); }
.dt-km-luoi .dt-km-dk:focus{ outline:0; }
.dt-km-o--sua > .dt-km-dk{ visibility:hidden; }
.dt-km-nhap{
  position:absolute; inset:0; width:100%; height:100%; padding:0 10px; border:0; border-radius:0; background:#fff;
  box-shadow:inset 0 0 0 2px var(--dt-xanh); color:var(--dt-muc); font:inherit; font-size:13px; font-weight:700;
  text-align:right; font-variant-numeric:tabular-nums;
}
.dt-km-nhap:focus{ outline:0; }
.dt-km-nhap::placeholder{ color:#9AA6B8; font-weight:500; }
.dt-km-nhap[aria-invalid="true"]{ box-shadow:inset 0 0 0 2px var(--loi); background:#FFF7F7; }
.dt-km-nut-nho:focus{ outline:2px solid var(--dt-xanh); outline-offset:-2px; }

/* nút xanh có chữ "Chép xuống N dòng dưới" ngay dưới ô đang chọn */
.dt-km-chep{
  position:absolute; z-index:7; top:calc(100% - 5px); right:6px; display:flex; align-items:center; gap:5px;
  height:28px; padding:0 10px; border:0; border-radius:8px; background:var(--dt-xanh); color:#fff;
  font-size:11.5px; font-weight:700; white-space:nowrap; box-shadow:0 6px 16px rgba(20,102,195,.3); transition:background var(--nhanh);
}
.dt-km-chep:hover{ background:#0F58AC; }
.dt-km-chep--bh{ right:auto; left:50%; transform:translateX(-50%); }
.dt-km-chep--qua{ right:auto; left:8px; }
.dt-km-chep--vao{ animation:dtKmNay var(--nhanh) var(--duong-cong) both; }
.dt-km-chep--bh.dt-km-chep--vao{ animation-name:dtKmNayGiua; }
@keyframes dtKmNay{ from{ opacity:0; transform:translateY(-4px) scale(.96); } }
@keyframes dtKmNayGiua{ from{ opacity:0; transform:translate(-50%,-4px) scale(.96); } }

/* hàng phiên bản trượt vào khi mở dòng xe */
.dt-km-hang--vao{ animation:dtKmVao var(--vua) var(--duong-cong) both; }
@keyframes dtKmVao{ from{ opacity:0; transform:translateY(-4px); } }

/* cuối bảng + thanh trạng thái */
.dt-km-cuoi{ padding:9px 12px; background:var(--dt-mat); border:1px solid var(--dt-km-ke); border-top:1px solid var(--dt-km-ke-nhat); border-bottom:0; }
.dt-km-them-xe{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border:1px dashed #B9CBE6; border-radius:8px;
  background:var(--dt-mat); color:var(--dt-xanh); font-size:12.5px; font-weight:700; transition:background var(--nhanh), border-color var(--nhanh);
}
.dt-km-them-xe:hover{ background:var(--dt-nhan-nhat); border-color:var(--dt-xanh); }
.dt-km-thanh{
  position:sticky; bottom:0; z-index:5; display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px; min-height:34px; padding:7px 12px;
  background:#F3F6FA; border:1px solid var(--dt-km-ke); border-radius:0 0 10px 10px; font-size:11.5px; color:var(--dt-muc-2);
}
.dt-km-thanh b{ flex:1 1 240px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dt-muc); font-weight:600; }
.dt-km-phim{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 12px; }
.dt-km-phim span{ white-space:nowrap; }
@media (max-width:1280px){ .dt-km-phim-phu{ display:none; } }

/* hộp chọn quà (bám ô đang chọn, position:fixed) */
.dt-km-hop-qua{
  position:fixed; z-index:60; left:0; top:0; width:360px; max-width:calc(100vw - 16px); display:flex; flex-direction:column;
  background:var(--dt-mat); border:1px solid #D9E2EF; border-radius:12px; box-shadow:0 20px 50px rgba(11,23,54,.2);
  color:var(--dt-muc); animation:dtKmHop var(--nhanh) var(--duong-cong) both;
}
@keyframes dtKmHop{ from{ opacity:0; transform:translateY(-6px) scale(.98); } }
.dt-km-hq-dau{ display:flex; align-items:flex-start; gap:8px; padding:14px 14px 8px; }
.dt-km-hq-dau > div{ flex:1; min-width:0; }
.dt-km-hq-dau b{ display:block; font-size:14.5px; font-weight:800; overflow-wrap:break-word; }
.dt-km-hq-dau span{ display:block; margin-top:2px; font-size:12px; color:var(--dt-muc-2); }
.dt-km-hq-dong{ flex:none; width:30px; height:30px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:var(--dt-nen); color:var(--dt-muc-2); }
.dt-km-hq-dong:hover{ background:var(--dt-vien); color:var(--dt-muc); }
.dt-km-hq-ds{ max-height:240px; overflow-y:auto; padding:0 8px; overscroll-behavior:contain; }
@media (max-height:820px){ .dt-km-hq-ds{ max-height:180px; } }
.dt-km-hq-muc{ display:flex; align-items:center; gap:9px; min-height:36px; padding:0 8px; border-radius:8px; font-size:13px; cursor:pointer; }
.dt-km-hq-muc:hover{ background:var(--dt-nen); }
.dt-km-hq-muc input{ flex:none; width:16px; height:16px; margin:0; accent-color:var(--dt-xanh); cursor:pointer; }
.dt-km-hq-muc span{ flex:1; min-width:0; overflow-wrap:break-word; }
.dt-km-hq-muc em{ flex:none; font-style:normal; font-size:11.5px; font-weight:600; color:var(--dt-muc-2); }
.dt-km-hq-rong{ padding:10px 8px; font-size:12.5px; color:var(--dt-muc-2); }
.dt-km-hq-them{ padding:8px 14px 2px; }
.dt-km-hq-o{ width:100%; height:36px; padding:0 11px; border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat); color:var(--dt-muc); font:inherit; font-size:13px; }
.dt-km-hq-o:focus{ outline:0; border-color:var(--dt-xanh); box-shadow:0 0 0 3px var(--dt-nhan-nhat); }
.dt-km-hq-pv{ margin:8px 14px 0; padding:0; border:0; }
.dt-km-hq-pv legend{ padding:0 0 2px; font-size:11.5px; font-weight:700; color:var(--dt-muc-2); }
.dt-km-hq-pv label{ display:flex; align-items:center; gap:9px; min-height:32px; font-size:13px; cursor:pointer; }
.dt-km-hq-pv input{ flex:none; width:16px; height:16px; margin:0; accent-color:var(--dt-xanh); cursor:pointer; }
.dt-km-hq-chan{ display:flex; justify-content:flex-end; gap:8px; margin-top:10px; padding:12px 14px 14px; border-top:1px solid #EDF1F6; }
.dt-km-hq-chan button{ height:36px; padding:0 16px; border-radius:8px; font-size:12.5px; font-weight:700; transition:background var(--nhanh), border-color var(--nhanh); }
.dt-km-hq-huy{ border:1px solid var(--dt-vien); background:var(--dt-mat); color:var(--dt-muc); }
.dt-km-hq-huy:hover{ border-color:#B9CBE6; background:var(--dt-nen); }
.dt-km-hq-ap{ border:0; background:var(--dt-xanh); color:#fff; }
.dt-km-hq-ap:hover{ background:#0F58AC; }

/* hộp hướng dẫn "Dán từ Excel" (KHUNG.moTam, ngoài #app-desktop) */
.dt-km-hd-ds{ margin:0; padding:0 0 0 18px; font-size:13.5px; line-height:1.55; color:var(--muc); }
.dt-km-hd-ds li + li{ margin-top:6px; }
.dt-km-hd kbd{
  display:inline-block; padding:0 6px; border:1px solid #CBD5E1; border-bottom-width:2px; border-radius:5px;
  background:#F8FAFC; font-family:inherit; font-size:12px; font-weight:700; line-height:1.5;
}
.dt-km-hd .sp-ghi{ margin-top:12px; }

/* màn 1024 - 1180px: cột số hẹp hơn chút, chữ số 12,5px, thanh công cụ gọn để vẫn 1 hàng, không cuộn ngang */
@media (max-width:1180px){
  .dt-km-khung{ --dt-km-cot:minmax(160px,1.8fr) minmax(122px,.8fr) minmax(132px,.85fr) minmax(126px,.8fr) minmax(80px,.55fr) minmax(150px,1.4fr); }
  .dt-km-tt{ padding:2px 6px; font-size:10.5px; }
  .dt-km-gap b{ font-size:13px; }
  .dt-km-hang--dong .dt-km-o--ten{ gap:4px; padding-right:2px; }
  .dt-km-qua-the--2, .dt-km-qua-them{ display:none; }
  .dt-km-qua-them.dt-km-qua-them--hep{ display:inline; }
  .dt-km-cc{ gap:6px; }
  .dt-km-chu-dai{ display:none; }
  .dt-km-chu-ngan{ display:inline; }
  .dt-km-cc-nut{ padding:0 10px; }
  .dt-km-hang--tieu-de{ font-size:11px; }
  .dt-km-hang--tieu-de .dt-km-o, .dt-km-o--gia, .dt-km-o--sau, .dt-km-o--nhan, .dt-km-so, .dt-km-nhap, .dt-km-qua-nut{ padding-left:8px; padding-right:8px; }
  .dt-km-o--so, .dt-km-so, .dt-km-nhap{ font-size:12.5px; }
}

/* nhãn ô nhập dùng chung ở Thiết lập (máy tính) */
.dt-o-nhom label{ display:block; font-size:12px; font-weight:600; color:var(--dt-muc-2); margin-bottom:6px; }

@media (prefers-reduced-motion:reduce){
  .dt-km-hang--vao,.dt-km-chep--vao,.dt-km-hop-qua{ animation:none; }
  .dt-km-mui,.dt-km-tab,.dt-km-cc-nut,.dt-km-luu,.dt-km-nut-nho,.dt-km-gap,.dt-km-hang--pb,.dt-km-chep,.dt-km-tim,.dt-km-thang-nut,.dt-km-them-xe,.dt-km-qua-dong,.dt-km-hq-chan button{ transition:none; }
}

.dt-cp-the{ margin-top:16px; }
.dt-cp-dau{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dt-cp-dau h2{ font-size:16px; font-weight:700; }
.dt-cp-dau p{ margin-top:3px; font-size:12px; color:var(--dt-muc-2); }
.dt-cp-dau button{ height:34px; padding:0 12px; border:1px solid var(--dt-vien); border-radius:7px; background:var(--dt-mat); color:var(--dt-muc-2); font:600 12px inherit; }
.dt-cp-ds{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; }
.dt-cp-nhom{ grid-column:1/-1; padding-top:8px; color:var(--dt-muc-2); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.dt-cp-dong{ min-height:42px; display:flex; align-items:center; gap:12px; padding:0 11px; border:1px solid var(--dt-vien); border-radius:8px; background:var(--dt-mat); color:var(--dt-muc); font-family:inherit; text-align:left; }
.dt-cp-dong:hover{ border-color:var(--dt-xanh); background:var(--dt-nhan-nhat); }
.dt-cp-dong span{ flex:1; font-size:12.5px; }
.dt-cp-dong b{ font-size:12.5px; }
.dt-cp-dong svg{ color:var(--dt-muc-2); }


/* ============================================================
   THIẾT LẬP (desktop) — chưa có ảnh mẫu, thiết kế tối giản
   cùng tông, tái dùng nguyên DL.SALE / BAN_QUYEN
   ============================================================ */
.dt-tl-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-top:16px; }
.dt-tl-luoi .dt-o-nhom{ margin-bottom:0; }
.dt-tl-ghi{ font-size:11.5px; color:var(--dt-muc-2); margin-top:10px; }
.dt-kh-the{ margin-top:22px; padding-top:20px; border-top:1px solid var(--dt-vien); }
/* Thẻ "Mẫu ảnh báo giá" (27/09/2026 gom "Tuỳ chỉnh báo giá" vào): dưới lưới mẫu là 1 vạch ngăn, trái nhãn + PRO, mô tả
   1 dòng, bộ đang dùng; phải nút "Mở tuỳ chỉnh" (chữ do pwa/js/tuy-chinh.js veLoiVao vẽ) */
.dt-kh-tc{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:20px; padding-top:16px; border-top:1px solid var(--dt-vien); }
.dt-kh-tc-chu{ flex:1; min-width:0; }
.dt-kh-tc-tit{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; }
.dt-kh-tc .dt-tl-ghi{ margin-top:4px; }
.dt-kh-tc .dt-kh-tc-dung{ margin-top:2px; }
.dt-kh-tc-dung b{ font-weight:700; color:var(--dt-muc); }
.dt-kh-tc .dt-kh-chep{ flex:none; transition:border-color var(--nhanh), background var(--nhanh), color var(--nhanh); }
.dt-kh-tc .dt-kh-chep:hover{ border-color:var(--dt-xanh); background:var(--dt-nhan-nhat); color:var(--dt-xanh); }
.dt-kh-tt{ margin-bottom:14px; }
.dt-kh-may{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--dt-nen); border-radius:8px; padding:12px 14px; }
.dt-kh-may-nhan{ font-size:11px; color:var(--dt-muc-2); margin-bottom:3px; }
.dt-kh-may-gt{ font-size:14px; font-weight:700; }
.dt-kh-chep{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border:1px solid var(--dt-vien); background:var(--dt-mat); border-radius:7px;
  font-size:12.5px; font-weight:600; color:var(--dt-muc);
}
.dt-kh-mua{
  display:inline-flex; align-items:center; height:38px; padding:0 15px; margin-top:12px;
  border:1px solid var(--dt-vien); background:var(--dt-mat); border-radius:7px;
  font-size:12.5px; font-weight:700; color:var(--dt-xanh);
}
/* Gói có hạn dưới ô "Đã đăng nhập" (27/09/2026): dòng chính Pro/Close Beta/Dùng thử + dòng Close Beta đi kèm */
.dt-kh-goi{ margin-top:10px; padding:10px 14px; border-radius:8px; background:var(--dt-nhan-nhat); font-size:12.5px; line-height:1.5; }
.dt-kh-goi b{ display:block; font-weight:700; color:var(--dt-navy); }
.dt-kh-goi span{ display:block; margin-top:2px; color:var(--dt-muc-2); }
/* "Yêu cầu xoá tài khoản": nút nhẹ dạng chữ ở cuối phần tài khoản */
.dt-kh-xoa{
  display:block; margin-top:14px; padding:6px 0; border:0; background:none;
  font-family:inherit; font-size:12px; font-weight:600; color:var(--dt-muc-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.dt-kh-xoa:hover{ color:#B42318; }

/* ============================================================
   DÒNG XE 21/09/2026 — bố cục đã duyệt
   Sidebar + Cột xem trước cố định; chỉ cột tính ở giữa cuộn.
   ============================================================ */
#app-desktop{
  --dt-bo-the:14px; --dt-bo-o:9px; --dt-khe:18px; --dt-le:16px;
  overflow:hidden;
}
.dt-header{ height:64px; padding:0 18px; gap:20px; }
.dt-header-brand h1{ font-size:15px; }
.dt-header-brand span{ font-size:10px; }
.dt-header-user-chu b{ font-size:12px; }
.dt-header-user-chu span{ font-size:10px; }
.dt-header-avatar{ width:35px; height:35px; font-size:11px; }
.dt-shell{ flex:1; min-height:0; overflow:hidden; align-items:stretch; }

/* Sidebar xanh */
.dt-sidebar{
  position:relative; align-self:stretch; width:178px; min-height:0; overflow:hidden;
  padding:22px 13px 16px; color:#fff; border-right:0;
  background:linear-gradient(170deg,#1264C5 0%,#073F85 72%,#032D63 100%);
  box-shadow:8px 0 22px rgba(4,40,82,.19); z-index:3;
}
.dt-sidebar::before,.dt-sidebar::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; }
.dt-sidebar::before{ width:170px; height:170px; top:-78px; right:-78px; background:rgba(255,255,255,.08); }
.dt-sidebar::after{ width:110px; height:110px; bottom:34px; left:-68px; border:22px solid rgba(255,255,255,.055); }
.dt-sidebar-nhan,.dt-hang-chon,.dt-nav{ position:relative; z-index:1; }
.dt-sidebar-nhan{ margin:0 5px 8px; color:rgba(255,255,255,.68); font-size:10px; letter-spacing:.09em; }
.dt-hang-chon{ margin-bottom:21px; }
.dt-hang-chon select{
  height:43px; padding-left:11px; color:#fff; border-color:rgba(255,255,255,.28); border-radius:11px;
  background:rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); font-size:12px;
}
.dt-hang-chon::after{ border-color:#fff; }
.dt-nav{ gap:6px; }
.dt-nav button,.dt-nav a.dt-nav-lk{ min-height:42px; height:auto; padding:9px 11px; border-radius:11px; color:rgba(255,255,255,.74); font-size:12px; line-height:1.35; text-decoration:none; }
.dt-nav button:hover,.dt-nav a.dt-nav-lk:hover{ color:#fff; background:rgba(255,255,255,.1); }
.dt-nav button.dt-dang{ color:#073F85; background:#fff; box-shadow:0 7px 18px rgba(0,22,55,.2); }
.dt-nav-nhan{ margin:14px 5px 2px; padding-top:12px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.45); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
/* Thẻ tên sale + nút Đăng xuất cuối thanh bên (.dt-sidebar-tk) đã bỏ (30/09/2026): thay bằng thẻ gói .dt-st, Đăng xuất
   chuyển vào menu avatar ở thanh trên, xem khối "GIAO DIỆN MÁY TÍNH MỚI" cuối file. */

/* Vùng làm việc cố định */
.dt-main{ flex:1; min-width:0; min-height:0; overflow:hidden; padding:18px; }
#dt-view-xe{ height:100%; min-height:0; overflow:hidden; }
#dt-view-km,#dt-view-tl,#dt-view-pro{ height:100%; overflow:auto; padding-right:4px; }
/* Gói P1 (28/09/2026): Gói VIP trước đây không có luật cuộn nên .dt-main (overflow:hidden) cắt mất phần dưới, không cuộn tới được
   nút mua / lịch sử thanh toán; nay cuộn trong khung như Khuyến mãi / Thiết lập, chừa đáy để thẻ không sát mép khi cuộn hết */
#dt-view-pro{ padding-bottom:20px; }
.dt-grid{ height:100%; min-height:0; max-width:none; grid-template-columns:minmax(480px,1fr) 376px; gap:18px; align-items:stretch; }
.dt-col-giua{ min-height:0; overflow:hidden; gap:0; }
.dt-trang-dau{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:13px; }
.dt-trang-dau h1{ font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.dt-trang-dau p{ margin-top:4px; color:var(--dt-muc-2); font-size:11px; }
.dt-tu-luu{ display:flex; align-items:center; gap:6px; color:var(--dt-muc-2); font-size:10px; white-space:nowrap; }
.dt-tu-luu i{ width:7px; height:7px; border-radius:50%; background:#26A269; }
.dt-form-cuon{ flex:1; min-height:0; display:flex; flex-direction:column; gap:13px; overflow-y:auto; overflow-x:hidden; padding:1px 7px 18px 1px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(18,100,197,.32) transparent; }
.dt-form-cuon::-webkit-scrollbar{ width:5px; }
.dt-form-cuon::-webkit-scrollbar-thumb{ border-radius:99px; background:rgba(18,100,197,.32); }
.dt-the{ border-color:#D9E2EF; box-shadow:0 7px 20px rgba(11,28,55,.09); }
.dt-the-dau{ margin-bottom:13px; }
.dt-the-tit{ font-size:14px; }
.dt-buoc-nhan{ color:var(--dt-xanh); background:var(--dt-nhan-nhat); padding:4px 8px; border-radius:999px; font-size:9px; font-weight:700; }

/* Chọn xe */
.dt-xe-cuon{ gap:8px; margin-bottom:12px; }
.dt-xe-the{ flex:0 0 108px; padding:9px 8px 8px; border-radius:11px; }
.dt-xe-the.chon{ box-shadow:0 0 0 3px rgba(20,102,195,.11); }
.dt-xe-the .dt-xe-anh{ height:47px; margin-bottom:7px; border-radius:8px; }
.dt-xe-the .dt-xe-ten{ font-size:11px; }
.dt-xe-the .dt-xe-gia{ font-size:9px; }
.dt-xe-chitiet{ gap:9px; padding-top:12px; }
.dt-xe-chitiet-chon{ flex:1.25; }
.dt-xe-chitiet-anh{ width:55px; height:39px; }
.dt-xe-chitiet-ten b{ font-size:12px; }
.dt-xe-chitiet-pb{ font-size:10px; }
.dt-truong{ width:130px; }
.dt-truong label{ font-size:9px; }
.dt-truong select,.dt-o-chon select{ height:38px; border-radius:9px; font-size:11px; }

/* Giá bán & đăng ký — không lặp tổng phí/lăn bánh bên trái */
.dt-gia-dangky{ display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:12px; padding:13px; border:1px solid var(--dt-vien); border-radius:12px 12px 0 0; }
.dt-gia-o{ min-width:0; }
.dt-gia-o > span:first-child{ display:block; margin-bottom:6px; color:var(--dt-muc-2); font-size:9px; font-weight:600; }
.dt-gia-nhap,.dt-gia-o > .dt-o-chon{ height:39px; display:flex; align-items:center; border:1px solid var(--dt-vien); border-radius:9px; background:#fff; }
.dt-gia-nhap:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(20,102,195,.11); }
.dt-gia-nhap input{ width:100%; min-width:0; padding:0 3px 0 10px; border:0; outline:0; background:transparent; color:var(--dt-muc); font:700 12px inherit; text-align:right; }
.dt-gia-nhap i{ padding-right:9px; color:var(--dt-muc-2); font-size:9px; font-style:normal; }
.dt-gia-o .dt-o-chon select{ border:0; }
.dt-gia-tong{ min-height:50px; padding:9px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--dt-vien); border-top:0; border-radius:0 0 12px 12px; background:var(--dt-nhan-nhat); color:var(--dt-navy); }
.dt-gia-tong span{ font-size:10px; font-weight:700; }
.dt-gia-tong b{ font-size:16px; font-weight:800; }

/* Thanh toán & trả góp — một khối cân đối, tránh cảm giác “khung lồng khung” */
.dt-thanh-toan-luoi{ display:grid; grid-template-columns:minmax(250px,.88fr) minmax(330px,1.12fr); gap:15px; align-items:stretch; }
.dt-lo-trinh-the{ position:relative; min-width:0; overflow:hidden; padding:14px 15px 13px; border:1px solid #D9E6F5; border-radius:12px; background:linear-gradient(145deg,#F7FBFF 0%,#EEF5FF 100%); }
.dt-lo-trinh-the::after{ content:""; position:absolute; width:110px; height:110px; right:-55px; bottom:-66px; border-radius:50%; background:rgba(20,102,195,.055); pointer-events:none; }
.dt-lo-trinh-the .dt-nhan-muc{ position:relative; z-index:1; max-width:100%; margin:0 0 10px; color:var(--dt-navy); font-size:9px; line-height:1.35; letter-spacing:.035em; white-space:nowrap; }
.dt-lo-trinh{ z-index:1; margin:0; border:0; border-radius:0; overflow:visible; padding-left:24px; position:relative; }
.dt-lo-trinh::before{ content:""; position:absolute; left:7px; top:9px; bottom:10px; width:2px; border-radius:2px; background:#C9DCF2; }
.dt-lo-trinh-coc,.dt-lo-trinh-hang{ position:relative; min-height:36px; padding:7px 0; border:0; font-size:10px; }
.dt-lo-trinh-coc::before,.dt-lo-trinh-hang::before{ content:""; position:absolute; left:-21px; top:12px; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--dt-xanh); box-shadow:0 0 0 3px #E6F1FF; }
.dt-lo-trinh-coc > label,.dt-lo-trinh-hang .nhan{ min-width:0; color:var(--dt-muc-2); font-size:10px; font-weight:500; }
.dt-lo-trinh-coc-o{ width:128px; height:auto; padding:0; justify-content:flex-end; border:0; background:transparent; }
.dt-lo-trinh-coc-o:focus-within{ border:0; box-shadow:none; }
.dt-lo-trinh-coc-o input{ width:108px; padding:0; font:700 10px/1.2 inherit; }
.dt-lo-trinh-coc-o svg{ width:11px; color:var(--dt-xanh); margin-left:6px; }
.dt-lo-trinh-hang .so{ color:var(--dt-navy); font-size:10px; font-weight:750; }
.dt-lo-trinh-hang--sua{ margin:0 -6px; padding-left:6px; padding-right:6px; border-radius:7px; }
.dt-lo-trinh-hang--sua .nhan{ color:var(--dt-muc-2); font-weight:500; }
.dt-lo-trinh-hang--sua:hover{ background:rgba(255,255,255,.66); }
.dt-lo-trinh-hang--sua .so::after{ content:""; display:inline-block; width:10px; height:10px; margin-left:5px; vertical-align:-1px; background:no-repeat center/10px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231466C3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.dt-vay-the{ min-width:0; padding:14px; border:1px solid #D9E6F5; border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(11,28,55,.045); transition:border-color .22s ease,box-shadow .22s ease; }
.dt-vay-the.dt-vay-the--bat{ border-color:#BCD5F1; box-shadow:0 8px 22px rgba(20,102,195,.09); }
.dt-tg-bat-hang{ min-height:38px; padding:0 0 11px; border-bottom:1px solid #E5ECF5; }
.dt-tg-bat-hang b{ color:var(--dt-navy); font-size:11px; }
.dt-tg-bat-hang span{ font-size:9px; }
#dt-tg-than{ margin-top:12px; overflow:hidden; transform-origin:top center; }
#dt-tg-than[hidden]{ display:none; }
#dt-tg-than.dt-tg-than--vao{ animation:dt-mo-tra-gop .24s cubic-bezier(.22,.8,.3,1) both; }
#dt-tg-than.dt-tg-than--ra{ animation:dt-dong-tra-gop .18s ease both; }
@keyframes dt-mo-tra-gop{
  from{ max-height:0; opacity:0; transform:translateY(-7px) scale(.985); }
  to{ max-height:420px; opacity:1; transform:translateY(0) scale(1); }
}
@keyframes dt-dong-tra-gop{
  from{ max-height:420px; opacity:1; transform:translateY(0) scale(1); }
  to{ max-height:0; opacity:0; transform:translateY(-6px) scale(.988); }
}
.dt-vay-luoi{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.dt-vay-truong{ min-width:0; padding:9px 10px; border:1px solid #DCE6F2; border-radius:9px; background:#F8FBFF; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.dt-vay-truong:focus-within{ border-color:#76A9E4; background:#fff; box-shadow:0 0 0 3px rgba(20,102,195,.09); }
.dt-vay-truong > span:first-child{ display:block; margin-bottom:4px; color:var(--dt-muc-2); font-size:8px; font-weight:600; }
.dt-vay-truong .dt-o-chon select{ height:25px; padding:0 18px 0 0; border:0; border-radius:0; background-color:transparent; box-shadow:none; font-size:12px; }
.dt-vay-nhap{ height:25px; display:flex; align-items:center; }
.dt-vay-nhap input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--dt-muc); font:700 11px inherit; }
.dt-vay-nhap i{ color:var(--dt-muc-2); font-size:8px; font-style:normal; }
.dt-vay-goiy{ width:max-content; max-width:100%; margin:8px 0 0; padding:4px 7px; border-radius:999px; background:#EDF5FF; color:#55708F; font-size:8px; }
/* 2 mức lãi (Vũ chốt 27/09/2026): hàng ô riêng dưới gợi ý tỷ lệ; vay 1 năm thì ô năm 2 +
   ô "Tháng đầu năm 2" mờ đi (chuyển mờ, không đổi bố cục) */
.dt-vay-lai{ margin-top:9px; }
.dt-vay-lai .dt-vay-truong{ transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,opacity var(--vua) var(--duong-cong); }
.dt-vay-truong > span:first-child em{ margin-left:2px; color:#8A97AB; font-style:normal; font-weight:500; }
.dt-vay-truong--tat{ opacity:.45; cursor:default; }
.dt-vay-lai .dt-vay-nhap input:disabled{ opacity:1; color:var(--dt-muc); -webkit-text-fill-color:var(--dt-muc); }
.dt-vay-nhap i{ white-space:nowrap; }
.dt-vay-phu{ margin-top:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; color:var(--dt-muc-2); font-size:8px; }
.dt-vay-phu > span{ min-width:0; min-height:48px; padding:7px 8px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; border:1px solid #E1EAF5; border-radius:8px; background:#FBFDFF; transition:opacity var(--vua) var(--duong-cong); }
.dt-vay-phu > .dt-vay-phu--tat{ opacity:.45; }
.dt-vay-phu b{ max-width:100%; overflow:hidden; color:var(--dt-navy); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.dt-tg-xem{ min-height:33px; margin-top:9px; border:1px solid #CFE0F3; border-radius:8px; background:#F4F9FF; font-size:9px; }
.dt-tg-xem:hover{ border-color:#9FC1E9; background:#EAF4FF; }

@media (prefers-reduced-motion:reduce){
  .dt-gat .ray,.dt-gat .ray::before,.dt-vay-the{ transition:none; }
  #dt-tg-than.dt-tg-than--vao,#dt-tg-than.dt-tg-than--ra{ animation-duration:.01ms; }
  .dt-vay-lai .dt-vay-truong,.dt-vay-phu > span{ transition:none; }
  .dt-kh-tc .dt-kh-chep{ transition:none; }
}

/* Cột xem trước dạng iPhone */
.dt-col-phai{ min-height:0; height:100%; gap:0; overflow:hidden; align-items:center; }
.dt-datlai{ height:25px; padding:0 7px; font-size:8px; }
.dt-nut-hang{ gap:7px; }
.dt-nut-gui,.dt-nut-in{ height:36px; border-radius:8px; font-size:9px; }

@media (max-width:1180px) and (min-width:1024px){
  .dt-sidebar{ width:158px; padding-left:10px; padding-right:10px; }
  .dt-main{ padding:14px; }
  .dt-grid{ grid-template-columns:minmax(400px,1fr) 330px; gap:14px; }
  .dt-header-tim{ max-width:440px; }
  .dt-gia-dangky{ gap:8px; }
}
@media (max-width:1100px) and (min-width:1024px){
  .dt-thanh-toan-luoi{ grid-template-columns:1fr; }
  .dt-lo-trinh-the{ min-height:180px; }
}

/* ============================================================
   HỘP THOẠI SỬA PHÍ / KHUYẾN MÃI (dùng lại KHUNG.moTam có sẵn —
   .tam/.phu-nen của thanh-phan.css + khung.css đã trung tính viewport,
   chỉ thêm khung nội dung bên trong cho gọn ở màn rộng)
   ============================================================ */
#app-desktop ~ .tam{ font-family:'Be Vietnam Pro', system-ui, sans-serif; }

/* ============================================================
   CHUYỂN ĐỔI THEO BỀ RỘNG MÀN HÌNH
   >=1024px: hiện Desktop, ẩn hẳn #app (mobile).
   <1024px : #app-desktop luôn display:none (khai báo ở đầu file) —
             chỉ #app (mobile) hiện, KHÔNG đổi gì so với trước đây.
   ============================================================ */
@media (min-width:1024px){
  body.dt-che-do #app{ display:none; }
  body.dt-che-do #app-desktop{ display:flex; }
}


/* ============================================================
   GIAO DIỆN MÁY TÍNH MỚI (30/09/2026, bản mẫu Vũ đã duyệt, đồng bộ trang quản trị ma/src/admin-html.js
   "Giao diện mới (30/09/2026)"). Giai đoạn 1: khung (thanh bên navy, thanh trên trong suốt, menu avatar,
   thẻ gói, tiêu đề trang, thẻ / nút / ô nhập tông tím). Giai đoạn 2: cột "Ảnh gửi khách" xem trước sống (mục 12).
   - Màu mới CHỈ khai báo trong #app-desktop và .dt-dialog (hộp thoại mở từ máy tính); KHÔNG đụng :root,
     #anh-khung*, mẫu ảnh (ảnh xem trước nằm trong Shadow DOM, luật trang ở đây không lọt vào).
   - Nằm CUỐI desktop.css và dùng body.dt-che-do nên thắng các luật cũ ở trên; điện thoại không bị ảnh hưởng.
   - Không làm lại màn Tương tác và nội dung Gói VIP (để sau), chúng chỉ nhận màu theo biến.
   ============================================================ */

/* ---------- 1. Bảng màu mới ---------- */
body.dt-che-do #app-desktop,
body.dt-che-do .dt-dialog{
  --dt-navy:#1b2350;        /* nhấn đậm: số tiền lớn, chữ đậm nhấn */
  --dt-xanh:#5b5bf7;        /* màu chính tím xanh */
  --dt-xanh-dam:#4f46e5;
  --dt-muc:#141833;
  --dt-muc-2:#6a7090;
  --dt-mo:#9aa0bd;
  --dt-vien:#e6e8f5;
  --dt-nen:#f3f5ff;
  --dt-nhan-nhat:#eceeff;
  --dt-mat:#fff;
  --dt-bong:0 1px 2px rgba(20,24,60,.04),0 6px 20px rgba(40,46,110,.06);
  --dt-sb:248px;            /* bề rộng thanh bên */
}
body.dt-che-do #app-desktop ::selection{ background:#dcdcff; }

/* ---------- 2. Bố cục: lưới 2 cột, thanh bên cao hết màn, thanh trên nằm trong cột nội dung ---------- */
@media (min-width:1024px){
  body.dt-che-do #app-desktop{
    display:grid;
    grid-template-columns:var(--dt-sb) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    /* dải núi tím nhạt ở đầu vùng nội dung (SVG nội tuyến, không tải gì từ mạng) */
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 250' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e4e6ff'/%3E%3Cstop offset='1' stop-color='%23f3f5ff'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfd2ff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23f3f5ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23dcd6ff' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23f3f5ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='250' fill='url(%23a)'/%3E%3Cpath d='M0 155 L144 95 L264 125 L432 55 L600 115 L744 75 L936 130 L1080 70 L1200 105 L1200 250 L0 250Z' fill='url(%23b)'/%3E%3Cpath d='M0 195 L216 140 L360 175 L552 125 L720 170 L888 120 L1056 165 L1200 140 L1200 250 L0 250Z' fill='url(%23c)'/%3E%3C/svg%3E")
        no-repeat var(--dt-sb) 0 / calc(100% - var(--dt-sb)) 250px,
      #f3f5ff;
  }
  body.dt-che-do .dt-shell{ display:contents; }
  body.dt-che-do .dt-sidebar{ grid-column:1; grid-row:1 / 3; }
  body.dt-che-do .dt-header{ grid-column:2; grid-row:1; }
  body.dt-che-do .dt-main{ grid-column:2; grid-row:2; }
}

/* ---------- 3. Thanh bên navy ---------- */
body.dt-che-do .dt-sidebar{
  position:relative; width:auto; min-height:0; display:flex; flex-direction:column;
  padding:20px 14px 16px; overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(180deg,#0f1733 0%,#1b2350 100%);
  color:#c7cbe6; box-shadow:none; scrollbar-width:thin; scrollbar-color:#3a4280 transparent;
}
body.dt-che-do .dt-sidebar::before,
body.dt-che-do .dt-sidebar::after{ display:none; }
/* logo ở đầu thanh bên (trước đây nằm ở thanh trên) */
body.dt-che-do .dt-sidebar .dt-header-brand{ flex:none; display:flex; align-items:center; gap:11px; padding:0 8px 20px; }
body.dt-che-do .dt-sidebar .dt-header-brand img{ width:38px; height:38px; border-radius:11px; box-shadow:0 6px 16px rgba(91,91,247,.35); background:#fff; }
body.dt-che-do .dt-sidebar .dt-header-brand h1{ color:#fff; font-size:15.5px; font-weight:750; letter-spacing:-.01em; line-height:1.25; }
body.dt-che-do .dt-sidebar .dt-header-brand span{ color:#8e94c0; font-size:12px; font-weight:500; }

body.dt-che-do .dt-sidebar-nhan,
body.dt-che-do .dt-nav-nhan{
  margin:0; padding:12px 12px 6px; border:0;
  color:#6d74a3; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
body.dt-che-do .dt-sidebar-nhan{ padding-top:0; }
body.dt-che-do .dt-hang-chon{ margin:0 0 6px; }
body.dt-che-do .dt-hang-chon select{
  height:40px; padding-left:12px; border-radius:10px; font-size:13px; font-weight:650;
  color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(160,165,230,.22); box-shadow:none;
}
body.dt-che-do .dt-hang-chon select:focus-visible{ outline:2px solid #a5a8ff; outline-offset:1px; }
body.dt-che-do .dt-hang-chon select option{ color:#141833; }
body.dt-che-do .dt-hang-chon::after{ border-color:#9aa0cc; }
body.dt-che-do .dt-nav{ gap:2px; }
body.dt-che-do .dt-nav button,
body.dt-che-do .dt-nav a.dt-nav-lk{
  min-height:38px; height:38px; padding:0 12px; gap:11px; border-radius:10px;
  color:#c3c7e4; font-size:13.5px; font-weight:550; line-height:1.2; white-space:nowrap;
}
body.dt-che-do .dt-nav button svg,
body.dt-che-do .dt-nav a.dt-nav-lk svg{ stroke:#9aa0cc; }
body.dt-che-do .dt-nav button:hover,
body.dt-che-do .dt-nav a.dt-nav-lk:hover{ background:rgba(255,255,255,.06); color:#fff; }
body.dt-che-do .dt-nav button.dt-dang{
  color:#fff; background:linear-gradient(135deg,#6366f1,#5b5bf7);
  box-shadow:0 8px 18px rgba(79,70,229,.4);
}
body.dt-che-do .dt-nav button.dt-dang svg{ stroke:#fff; }
/* mục Gói VIP: vương miện vàng (chọn theo data-view, lớp gp- chỉ được dùng trong goi-pro.css), đang chọn thì trắng */
body.dt-che-do .dt-nav [data-view="pro"] svg{ stroke:#f5c95c; }
body.dt-che-do .dt-nav [data-view="pro"].dt-dang svg{ stroke:#fff; }
body.dt-che-do .dt-nav button:focus-visible,
body.dt-che-do .dt-nav a.dt-nav-lk:focus-visible{ outline:2px solid #a5a8ff; outline-offset:-2px; }
/* biểu tượng "mở trang mới" cho 2 liên kết ngoài */
body.dt-che-do .dt-nav a.dt-nav-lk::after{ content:"↗"; margin-left:auto; color:#6d74a3; font-size:11px; }

/* thẻ gói ở đáy thanh bên (desktop.js veTheGoi) — kiểu thẻ "Mục tiêu" của trang quản trị */
body.dt-che-do .dt-st{
  flex:none; margin-top:auto; padding:14px 14px 13px; border-radius:14px;
  background:linear-gradient(160deg,rgba(99,102,241,.35),rgba(99,102,241,.12)); border:1px solid rgba(140,145,255,.28);
}
body.dt-che-do .dt-st:empty{ display:none; }
body.dt-che-do .dt-st-dau{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 7px; color:#fff; font-size:13.5px; min-width:0; }
body.dt-che-do .dt-st-dau svg{ color:#ffd166; flex:none; }
body.dt-che-do .dt-st-dau b{ flex:none; font-weight:750; white-space:nowrap; }
body.dt-che-do .dt-st-dau span{ margin-left:auto; color:#d7daf4; font-size:12px; font-weight:650; white-space:nowrap; }
body.dt-che-do .dt-st p{ margin:5px 0 10px; color:#aeb3dc; font-size:12px; line-height:1.4; }
body.dt-che-do .dt-st-thanh{ display:block; height:7px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; }
body.dt-che-do .dt-st-thanh i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#8b8bff,#c4b5fd); }
body.dt-che-do .dt-st-nut{
  width:100%; height:34px; margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px;
  border:0; border-radius:10px; background:linear-gradient(135deg,#6d6dfb,#5b5bf7); color:#fff;
  font-weight:700; font-size:12.5px; line-height:1; box-shadow:0 4px 12px rgba(0,0,0,.18);
}
body.dt-che-do .dt-st-nut svg{ color:#ffd166; }
body.dt-che-do .dt-st-nut:hover{ background:#4f46e5; }
body.dt-che-do .dt-st-nut:focus-visible{ outline:2px solid #c4c6ff; outline-offset:2px; }

/* ---------- 4. Thanh trên trong suốt ---------- */
body.dt-che-do .dt-header{
  position:relative; z-index:6; height:auto; min-height:0;
  display:flex; align-items:center; gap:14px;
  padding:16px 28px 0; background:transparent; border:0;
}
body.dt-che-do .dt-header-tim{ flex:0 1 440px; max-width:none; justify-self:auto; min-width:220px; }
body.dt-che-do .dt-header-tim .dt-o-tim{
  height:42px; padding:0 8px 0 16px; border-radius:999px; background:#fff;
  border:1px solid #e3e6f7; box-shadow:0 2px 8px rgba(40,46,110,.04); color:var(--dt-mo);
  transition:border-color .15s ease, box-shadow .15s ease;
}
body.dt-che-do .dt-header-tim .dt-o-tim:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(91,91,247,.14); }
body.dt-che-do .dt-header-tim svg{ stroke:#9aa0bd; }
body.dt-che-do .dt-header-tim input{ font-size:13.5px; }
body.dt-che-do .dt-header-tim input::placeholder{ color:#9aa0bd; }
body.dt-che-do .dt-o-tim kbd{
  flex:none; font:600 11.5px/1 ui-monospace,Menlo,Consolas,monospace; color:#7a80a3;
  background:#f1f3fb; border:1px solid #e3e6f5; border-radius:7px; padding:5px 7px; white-space:nowrap;
}
body.dt-che-do .dt-header-user{ margin-left:auto; gap:14px; }
body.dt-che-do .dt-header .tbao-chuong{
  width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid #e3e6f7; color:#4a5074; box-shadow:none;
}
body.dt-che-do .dt-header .tbao-chuong:hover{ border-color:#c9ccf6; color:var(--dt-xanh-dam); background:#fff; }
/* chip gói: VIP vàng, Close Beta / Dùng thử tím nhạt, Free xám tím; trống thì ẩn */
body.dt-che-do .dt-header .cv-badge{
  height:30px; display:inline-flex; align-items:center; padding:0 12px; margin:0;
  border-radius:999px; font-size:12px; font-weight:750; cursor:pointer; white-space:nowrap;
  color:#4b5190; background:#fff; border:1px solid #e0e3f3;
}
body.dt-che-do .dt-header .cv-badge:empty{ display:none; }
body.dt-che-do .dt-header .cv-badge--pro{ color:#7a4d00; background:linear-gradient(135deg,#fff3cf,#ffe39a); border-color:#f3d27a; }
body.dt-che-do .dt-header .cv-badge--beta,
body.dt-che-do .dt-header .cv-badge--trial{ color:var(--dt-xanh-dam); background:var(--dt-nhan-nhat); border-color:#d9dcfb; }
/* nút avatar + tên sale + đại lý, có vạch ngăn bên trái như trang quản trị; bấm mở menu tài khoản */
body.dt-che-do .dt-toi{ position:relative; padding-left:14px; border-left:1px solid #e0e3f3; }
body.dt-che-do .dt-header-toi{
  display:flex; align-items:center; gap:10px; min-width:0; padding:4px 6px 4px 4px; margin:-4px -6px -4px -4px;
  border:0; border-radius:12px; background:transparent; color:inherit; text-align:left;
}
body.dt-che-do .dt-header-toi:hover{ background:rgba(255,255,255,.6); }
body.dt-che-do .dt-header-toi:focus-visible{ outline:2px solid var(--dt-xanh); outline-offset:2px; }
body.dt-che-do .dt-header-avatar{ width:40px; height:40px; font-size:15px; font-weight:750; color:#fff; background:linear-gradient(135deg,#7c7cff,#4f46e5); }
body.dt-che-do .dt-header-user-chu{ display:block; min-width:0; text-align:left; line-height:1.3; }
body.dt-che-do .dt-header-user-chu b{ display:block; font-size:13.5px; font-weight:700; line-height:1.25; color:var(--dt-muc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
body.dt-che-do .dt-header-user-chu span{ display:block; font-size:12px; color:var(--dt-muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
body.dt-che-do .dt-toi-mui{ flex:none; color:#9aa0bd; transition:transform .15s ease; }
body.dt-che-do .dt-header-toi[aria-expanded="true"] .dt-toi-mui{ transform:rotate(180deg); }
body.dt-che-do .dt-toi-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:30; min-width:220px; padding:6px;
  background:#fff; border:1px solid #eef0fa; border-radius:14px; box-shadow:0 18px 40px -18px rgba(20,24,60,.35);
}
body.dt-che-do .dt-toi-menu[hidden]{ display:none; }
body.dt-che-do .dt-toi-menu small{ display:block; padding:6px 10px 8px; margin-bottom:4px; border-bottom:1px solid #f0f1f8; color:var(--dt-muc-2); font-size:11.5px; white-space:nowrap; }
body.dt-che-do .dt-toi-menu button{
  width:100%; display:flex; align-items:center; gap:9px; height:36px; padding:0 10px;
  border:0; border-radius:9px; background:none; color:var(--dt-muc); font-weight:650; font-size:13px; line-height:1; text-align:left;
}
body.dt-che-do .dt-toi-menu button svg{ flex:none; color:var(--dt-muc-2); }
body.dt-che-do .dt-toi-menu button:hover{ background:#f5f6ff; }
body.dt-che-do .dt-toi-menu button:focus-visible{ outline:0; background:#f5f6ff; }
body.dt-che-do .dt-toi-menu #dt-tk-nut-dangxuat{
  margin-top:4px; height:38px; border-top:1px solid #f0f1f8; border-radius:0 0 9px 9px; color:#e5484d; justify-content:flex-start;
}
body.dt-che-do .dt-toi-menu #dt-tk-nut-dangxuat svg{ color:currentColor; }
body.dt-che-do .dt-toi-menu #dt-tk-nut-dangxuat:hover{ background:#feecec; }
body.dt-che-do .dt-toi-menu #dt-tk-nut-dangxuat:focus-visible{ background:#feecec; }

/* ---------- 5. Vùng nội dung + tiêu đề trang (breadcrumb nhỏ + tiêu đề 26px + dòng phụ) ---------- */
body.dt-che-do .dt-main{ position:relative; z-index:1; padding:14px 28px 20px; }
body.dt-che-do .dt-duong-dan{ display:flex; align-items:center; gap:6px; margin-bottom:4px; color:var(--dt-muc-2); font-size:12.5px; font-weight:500; }
body.dt-che-do .dt-duong-dan svg{ flex:none; stroke:var(--dt-mo); }
body.dt-che-do .dt-trang-dau{ align-items:flex-end; margin-bottom:16px; }
body.dt-che-do .dt-trang-dau h1,
body.dt-che-do .dt-km-dau h2{ font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--dt-muc); }
body.dt-che-do .dt-trang-dau p,
body.dt-che-do .dt-km-dau p{ margin-top:4px; font-size:14px; color:var(--dt-muc-2); }
body.dt-che-do .dt-km-dau{ align-items:flex-end; margin-bottom:16px; }
body.dt-che-do .dt-tu-luu{
  height:32px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.75);
  border:1px solid #e3e6f7; color:var(--dt-muc-2); font-size:12px;
}
body.dt-che-do .dt-tu-luu i{ background:#16a34a; }
/* các trang 1 cột (Khuyến mãi, Gói VIP, Thiết lập) canh trái như trang quản trị */
body.dt-che-do .dt-view-1cot{ max-width:1080px; margin:0; }
body.dt-che-do #dt-view-km{ max-width:1480px; }

/* ---------- 6. Thẻ trắng bo 16px, bóng rất nhẹ ---------- */
body.dt-che-do #app-desktop .dt-the{
  border:1px solid #eef0fa; border-radius:16px; box-shadow:var(--dt-bong); padding:18px 20px;
}
body.dt-che-do .dt-col-phai > .dt-the{ padding:0; }
body.dt-che-do .dt-the-dau{ margin-bottom:14px; }
body.dt-che-do .dt-the-tit{ font-size:16px; font-weight:750; letter-spacing:-.01em; }
/* nhãn Bước 1/2/3: chip tím nhạt */
body.dt-che-do .dt-buoc-nhan{
  padding:5px 11px; border-radius:999px; font-size:11.5px; font-weight:700;
  color:var(--dt-xanh-dam); background:var(--dt-nhan-nhat);
}
body.dt-che-do .dt-form-cuon{ gap:16px; scrollbar-color:rgba(91,91,247,.3) transparent; }
body.dt-che-do .dt-form-cuon::-webkit-scrollbar-thumb{ background:rgba(91,91,247,.3); }

/* ---------- 7. Dòng xe & báo giá: chip chọn tím, ô nhập bo 10px, focus vòng tím ---------- */
body.dt-che-do .dt-xe-the{ border:1.5px solid #e6e8f5; border-radius:12px; }
body.dt-che-do .dt-xe-the:hover{ border-color:#c9ccf6; }
body.dt-che-do .dt-xe-the.chon{ border-color:var(--dt-xanh); background:var(--dt-nhan-nhat); box-shadow:0 0 0 3px rgba(91,91,247,.12); }
body.dt-che-do .dt-xe-the .dt-xe-anh{ background:#f5f6fd; }
body.dt-che-do .dt-xe-the .dt-xe-ten{ font-size:12px; }
body.dt-che-do .dt-xe-the .dt-xe-gia{ font-size:10.5px; }
body.dt-che-do .dt-xe-chitiet-anh{ background:#f5f6fd; }
body.dt-che-do .dt-xe-chitiet-ten b{ font-size:14px; }
body.dt-che-do .dt-xe-chitiet-pb{ font-size:12px; color:var(--dt-xanh-dam); font-weight:600; }
body.dt-che-do .dt-truong label,
body.dt-che-do .dt-gia-o > span:first-child{ font-size:11.5px; font-weight:600; color:var(--dt-muc-2); }
body.dt-che-do .dt-truong select,
body.dt-che-do .dt-o-chon select{ height:40px; border-radius:10px; border-color:#e0e3f3; font-size:13px; }
body.dt-che-do .dt-truong select:focus-visible,
body.dt-che-do .dt-o-chon select:focus-visible{ outline:0; border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(91,91,247,.14); }
body.dt-che-do .dt-gia-dangky{ border-color:#eef0fa; border-radius:14px 14px 0 0; }
body.dt-che-do .dt-gia-nhap,
body.dt-che-do .dt-gia-o > .dt-o-chon{ height:42px; border-color:#e0e3f3; border-radius:10px; }
body.dt-che-do .dt-gia-nhap input{ font-size:14px; }
body.dt-che-do .dt-gia-nhap i{ font-size:11px; }
body.dt-che-do .dt-gia-nhap:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(91,91,247,.14); }
body.dt-che-do .dt-gia-tong{ border-color:#eef0fa; border-radius:0 0 14px 14px; background:var(--dt-nhan-nhat); color:var(--dt-xanh-dam); }
body.dt-che-do .dt-gia-tong span{ font-size:12.5px; }
body.dt-che-do .dt-gia-tong b{ font-size:19px; color:var(--dt-muc); }

body.dt-che-do .dt-lo-trinh-the{ border-color:#e6e8f7; border-radius:14px; background:linear-gradient(145deg,#f8f8ff 0%,#eff0ff 100%); }
body.dt-che-do .dt-lo-trinh-the::after{ background:rgba(91,91,247,.06); }
body.dt-che-do .dt-lo-trinh-the .dt-nhan-muc{ color:#4f46e5; font-size:10.5px; }
body.dt-che-do .dt-lo-trinh::before{ background:#d4d6fb; }
body.dt-che-do .dt-lo-trinh-coc::before,
body.dt-che-do .dt-lo-trinh-hang::before{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px #e6e7ff; }
body.dt-che-do .dt-lo-trinh-coc,
body.dt-che-do .dt-lo-trinh-hang,
body.dt-che-do .dt-lo-trinh-coc > label,
body.dt-che-do .dt-lo-trinh-hang .nhan{ font-size:12.5px; }
body.dt-che-do .dt-lo-trinh-coc-o input,
body.dt-che-do .dt-lo-trinh-hang .so{ font-size:12.5px; color:var(--dt-muc); }
body.dt-che-do .dt-lo-trinh-coc-o svg{ color:var(--dt-xanh); }
body.dt-che-do .dt-vay-the{ border-color:#eef0fa; border-radius:14px; box-shadow:none; }
body.dt-che-do .dt-vay-the.dt-vay-the--bat{ border-color:#d9dcfb; box-shadow:0 8px 22px rgba(91,91,247,.08); }
body.dt-che-do .dt-tg-bat-hang{ border-bottom-color:#eef0f8; }
body.dt-che-do .dt-tg-bat-hang b{ color:var(--dt-muc); font-size:13.5px; }
body.dt-che-do .dt-tg-bat-hang span{ font-size:11.5px; }
body.dt-che-do .dt-gat input:checked + .ray{ background:var(--dt-xanh); box-shadow:0 0 0 4px rgba(91,91,247,.12); }
body.dt-che-do .dt-vay-truong{ border-color:#e3e6f7; background:#fafaff; border-radius:10px; }
body.dt-che-do .dt-vay-truong:focus-within{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(91,91,247,.12); }
body.dt-che-do .dt-vay-truong > span:first-child{ font-size:10.5px; }
body.dt-che-do .dt-vay-nhap input{ font-size:13px; }
body.dt-che-do .dt-vay-goiy{ background:var(--dt-nhan-nhat); color:#4b5190; font-size:10.5px; }
body.dt-che-do .dt-vay-phu{ font-size:10.5px; }
body.dt-che-do .dt-vay-phu > span{ border-color:#eceefb; background:#fbfbff; }
body.dt-che-do .dt-vay-phu b{ color:var(--dt-muc); font-size:12px; }
body.dt-che-do .dt-tg-xem{ min-height:38px; border-color:#d9dcfb; border-radius:10px; background:#fff; color:var(--dt-xanh-dam); font-size:12.5px; }
body.dt-che-do .dt-tg-xem:hover{ border-color:#b9bdf7; background:#fbfbff; }
/* chip mốc vay: chọn = nền tím */
body.dt-che-do .dt-moc-vay button{ border-color:#e3e6f5; border-radius:999px; color:#4b5270; }
body.dt-che-do .dt-moc-vay button.chon{ background:var(--dt-xanh); border-color:var(--dt-xanh); color:#fff; box-shadow:0 4px 10px -4px rgba(91,91,247,.55); }

/* ---------- 8. Nút chung: chính tím, phụ viền ---------- */
body.dt-che-do .dt-km-luu--co,
body.dt-che-do .dt-km-hq-ap,
body.dt-che-do .dt-km-chep{ background:var(--dt-xanh); box-shadow:0 4px 12px rgba(91,91,247,.28); }
body.dt-che-do .dt-km-luu--co:hover,
body.dt-che-do .dt-km-hq-ap:hover,
body.dt-che-do .dt-km-chep:hover{ background:var(--dt-xanh-dam); }
body.dt-che-do .dt-km-cc-nut,
body.dt-che-do .dt-km-thang-nut,
body.dt-che-do .dt-kh-chep,
body.dt-che-do .dt-kh-mua{ border-radius:10px; border-color:#d9dcfb; }
body.dt-che-do .dt-km-cc-nut:hover:not(:disabled),
body.dt-che-do .dt-km-thang-nut:hover,
body.dt-che-do .dt-kh-chep:hover{ border-color:#b9bdf7; background:#fbfbff; }
/* nút .nut dùng chung (điện thoại) khi nằm trong máy tính */
body.dt-che-do #app-desktop .nut--chinh,
body.dt-che-do .dt-dialog .nut--chinh{ border-radius:12px; box-shadow:0 4px 12px rgba(91,91,247,.28); }

/* ---------- 9. Khuyến mãi (bảng Excel): đổi tông, giữ nguyên cột ---------- */
body.dt-che-do .dt-km-tabs{ background:#eceefb; border-radius:12px; }
body.dt-che-do .dt-km-tab{ border-radius:9px; }
body.dt-che-do .dt-km-tab.chon{ color:var(--dt-xanh-dam); box-shadow:0 1px 3px rgba(20,24,60,.12); }
body.dt-che-do .dt-km-thang{ border:1px solid #eef0fa; border-radius:16px; box-shadow:var(--dt-bong); padding:14px 18px; }
body.dt-che-do .dt-km-tk-o{ background:#f6f7ff; border-radius:10px; }
body.dt-che-do .dt-km-tk-o b{ color:var(--dt-muc); }
body.dt-che-do .dt-km-dinh{ background:#f3f5ff; }
body.dt-che-do .dt-km-tim{ border-radius:999px; border-color:#e3e6f5; height:38px; }
body.dt-che-do .dt-km-tim:focus-within{ box-shadow:0 0 0 3px rgba(91,91,247,.14); }
body.dt-che-do .dt-km-loc input{ accent-color:var(--dt-xanh); }
body.dt-che-do .dt-km-khung{ --dt-km-ke:#e6e8f5; --dt-km-ke-nhat:#f0f1f8; }
body.dt-che-do .dt-km-bang{ border-color:#eef0fa; border-radius:16px; box-shadow:var(--dt-bong); }
body.dt-che-do .dt-km-hang--tieu-de{ background:#f8f9fe; }
body.dt-che-do .dt-km-hang--tieu-de .dt-km-o{ color:#7a80a3; }
body.dt-che-do .dt-km-hang--tieu-de .dt-km-o + .dt-km-o{ border-left-color:#eef0f8; }
body.dt-che-do .dt-km-hang--dong{ background:#f7f7ff; border-top-color:#e6e8f5; }
body.dt-che-do .dt-km-gap:hover{ background:#eceefb; }
body.dt-che-do .dt-km-hang--pb:hover{ background:#fafbff; }
body.dt-che-do .dt-km-o--gia,
body.dt-che-do .dt-km-o--sau{ background:#fbfbfe; }
body.dt-che-do .dt-km-tt{ background:#eceefb; color:#5a6090; }
body.dt-che-do .dt-km-qua-dong{ border-radius:10px; border-color:#d9dcfb; color:var(--dt-xanh-dam); }

/* ---------- 10. Thiết lập (Gói VIP chỉ nhận màu theo biến, nội dung để sau; lớp gp- chỉ nằm trong goi-pro.css) ---------- */
body.dt-che-do .dt-tl-luoi{ gap:14px 18px; }
body.dt-che-do .dt-o{ height:42px; border-radius:10px; border-color:#e0e3f3; font-size:14px; }
body.dt-che-do textarea.dt-o{ height:auto; }
body.dt-che-do .dt-o:focus{ border-color:var(--dt-xanh); box-shadow:0 0 0 3px rgba(91,91,247,.14); }
body.dt-che-do .dt-o-nhom label{ font-size:12.5px; }
body.dt-che-do .dt-kh-the{ border-top-color:#eef0f8; }
body.dt-che-do .dt-kh-may{ background:#f6f7ff; border-radius:12px; }
body.dt-che-do .dt-kh-goi{ background:var(--dt-nhan-nhat); border-radius:12px; }
body.dt-che-do .dt-kh-goi b{ color:var(--dt-xanh-dam); }

/* ---------- 11. Máy tính hẹp / máy tính bảng ngang ---------- */
@media (max-width:1279.98px) and (min-width:1024px){
  body.dt-che-do #app-desktop,
  body.dt-che-do .dt-dialog{ --dt-sb:212px; }
  body.dt-che-do .dt-header,
  body.dt-che-do .dt-main{ padding-left:20px; padding-right:20px; }
  body.dt-che-do .dt-trang-dau h1,
  body.dt-che-do .dt-km-dau h2{ font-size:23px; }
  body.dt-che-do .dt-trang-dau p,
  body.dt-che-do .dt-km-dau p{ font-size:13px; }
}
/* 1024 - 1180px: thanh bên gọn, ẩn Ctrl K + dòng đại lý, chữ ô nhập nhỏ lại để 3 ô Giá bán không bị cắt,
   "Quà cho cả dòng" thu gọn; không cuộn ngang */
@media (max-width:1180px) and (min-width:1024px){
  body.dt-che-do #app-desktop,
  body.dt-che-do .dt-dialog{ --dt-sb:168px; }
  body.dt-che-do .dt-sidebar{ padding-left:10px; padding-right:10px; }
  body.dt-che-do .dt-header,
  body.dt-che-do .dt-main{ padding-left:14px; padding-right:14px; }
  body.dt-che-do .dt-o-tim kbd{ display:none; }
  body.dt-che-do .dt-header-user-chu span{ display:none; }
  body.dt-che-do .dt-header-user-chu b{ max-width:140px; }
  body.dt-che-do .dt-sidebar .dt-header-brand{ padding:0 4px 18px; gap:9px; }
  body.dt-che-do .dt-sidebar .dt-header-brand img{ width:30px; height:30px; }
  body.dt-che-do .dt-sidebar .dt-header-brand h1{ font-size:13.5px; }
  body.dt-che-do .dt-sidebar .dt-header-brand span{ font-size:11px; }
  body.dt-che-do .dt-sidebar-nhan,
  body.dt-che-do .dt-nav-nhan{ padding-left:10px; padding-right:10px; }
  body.dt-che-do .dt-nav button,
  body.dt-che-do .dt-nav a.dt-nav-lk{ padding:0 10px; gap:9px; font-size:13px; }
  body.dt-che-do .dt-trang-dau h1,
  body.dt-che-do .dt-km-dau h2{ font-size:21px; }
  body.dt-che-do .dt-trang-dau p,
  body.dt-che-do .dt-km-dau p{ font-size:12px; }
  body.dt-che-do #app-desktop .dt-the{ padding:16px; }
  body.dt-che-do .dt-gia-dangky{ gap:8px; padding:11px; }
  body.dt-che-do .dt-gia-nhap input{ font-size:12.5px; }
  body.dt-che-do .dt-truong select,
  body.dt-che-do .dt-o-chon select{ font-size:12px; }
  body.dt-che-do .dt-truong label,
  body.dt-che-do .dt-gia-o > span:first-child{ font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.dt-che-do .dt-truong{ width:124px; }
  body.dt-che-do .dt-xe-chitiet-ten b{ font-size:13px; }
  body.dt-che-do .dt-st{ padding:11px; }
  body.dt-che-do .dt-st-dau{ font-size:12.5px; }
  body.dt-che-do .dt-st-dau span{ font-size:11px; }
  body.dt-che-do .dt-st p{ font-size:11px; }
  body.dt-che-do .dt-km-qua-dong{ margin:0 6px; padding:0 8px; gap:4px; font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){
  body.dt-che-do .dt-header-tim .dt-o-tim,
  body.dt-che-do .dt-toi-mui{ transition:none; }
}

/* ---------- 12. Cột "Ảnh gửi khách" (giai đoạn 2, 30/09/2026): xem trước sống bằng chính mẫu ảnh ----------
   Ảnh nằm trong Shadow DOM #dt-xa-host (CSS riêng = ANH.cssMau()), luật ở đây chỉ lo khung cột quanh ảnh.
   Tô sáng (.dt-xa-sang) + mẹo "Bấm để sửa …" (.dt-xa-meo) đặt tuyệt đối theo #dt-xa-anh (desktop.js toSang). */
body.dt-che-do .dt-col-phai{ align-items:stretch; }
@media (min-width:1360px){ body.dt-che-do .dt-grid{ grid-template-columns:minmax(480px,1fr) 440px; } }
body.dt-che-do .dt-xa{
  flex:1; min-height:0; display:flex; flex-direction:column;
  background:#fff; border:1px solid #eef0fa; border-radius:16px; box-shadow:var(--dt-bong); overflow:hidden;
}
body.dt-che-do .dt-xa-dau{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid #f0f1f8; }
body.dt-che-do .dt-xa-tit{ flex:none; display:flex; align-items:center; gap:7px; margin:0; color:var(--dt-muc); font-size:14px; white-space:nowrap; }
body.dt-che-do .dt-xa-tit svg{ color:var(--dt-xanh); }
body.dt-che-do .dt-xa-tit b{ font-weight:750; }
body.dt-che-do .dt-xa-mau{ min-width:0; display:flex; align-items:center; height:30px; padding:0 3px 0 11px; border-radius:999px; background:var(--dt-nhan-nhat); font-size:12px; color:#3f4474; white-space:nowrap; }
body.dt-che-do .dt-xa-mau span{ min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:650; padding-right:8px; }
body.dt-che-do .dt-xa-mau button{ flex:none; height:24px; padding:0 10px; border:0; border-radius:999px; background:#fff; color:var(--dt-xanh-dam); font-weight:700; font-size:11.5px; line-height:1; box-shadow:0 1px 2px rgba(20,24,60,.1); }
body.dt-che-do .dt-xa-mau button:hover{ background:var(--dt-xanh); color:#fff; }
body.dt-che-do .dt-xa-mau button:focus-visible{ outline:2px solid var(--dt-xanh); outline-offset:2px; }

/* dải khoá: Free chọn mẫu VIP, nằm trên đầu ảnh, không che ảnh */
body.dt-che-do .dt-xa-khoa{ flex:none; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px 10px; padding:9px 14px; background:linear-gradient(135deg,#fff7df,#fff1c9); border-bottom:1px solid #f3dfa2; }
body.dt-che-do .dt-xa-khoa[hidden]{ display:none; }
body.dt-che-do .dt-xa-khoa-nhan{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:999px; background:linear-gradient(135deg,#E9C77B,#B8872B); color:#2a1d05; font-size:11.5px; font-weight:800; white-space:nowrap; }
body.dt-che-do .dt-xa-khoa-chu{ min-width:0; color:#7a5a12; font-size:11.5px; line-height:1.35; }
body.dt-che-do .dt-xa-khoa-nut{ grid-column:1 / -1; display:flex; gap:8px; }
body.dt-che-do .dt-xa-khoa-nut button{ flex:1; height:30px; padding:0 11px; border-radius:9px; font-weight:700; font-size:11.5px; line-height:1; white-space:nowrap; }
body.dt-che-do .dt-xa-khoa-phu{ border:1px solid #e8d29a; background:#fff; color:#6b4e0e; }
body.dt-che-do .dt-xa-khoa-nut .dt-xa-khoa-chinh{ flex:1.2; border:0; background:var(--dt-xanh); color:#fff; box-shadow:0 4px 10px -4px rgba(91,91,247,.6); }
body.dt-che-do .dt-xa-khoa-chinh:hover{ background:var(--dt-xanh-dam); }

/* vùng ảnh: cuộn dọc riêng */
body.dt-che-do .dt-xa-cuon{
  position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px; background:#f6f7fc;
  scrollbar-width:thin; scrollbar-color:rgba(91,91,247,.3) transparent; overscroll-behavior:contain;
}
body.dt-che-do .dt-xa-cuon::-webkit-scrollbar{ width:5px; }
body.dt-che-do .dt-xa-cuon::-webkit-scrollbar-thumb{ border-radius:99px; background:rgba(91,91,247,.3); }
body.dt-che-do .dt-xa-anh{ position:relative; border-radius:10px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(20,24,60,.08),0 10px 24px -14px rgba(20,24,60,.25); contain:layout paint; }
body.dt-che-do .dt-xa-anh[hidden]{ display:none; }
body.dt-che-do .dt-xa-host{ display:block; position:relative; overflow:hidden; outline:0; }
body.dt-che-do .dt-xa-host:focus-visible{ box-shadow:inset 0 0 0 2px var(--dt-xanh); }
body.dt-che-do .dt-xa-sang{ position:absolute; z-index:4; pointer-events:none; border-radius:6px; background:rgba(91,91,247,.12); box-shadow:0 0 0 2px rgba(91,91,247,.85),0 0 0 6px rgba(91,91,247,.14); transition:left .08s, top .08s, width .08s, height .08s; }
body.dt-che-do .dt-xa-sang[hidden]{ display:none; }
body.dt-che-do .dt-xa-meo{ position:absolute; z-index:5; pointer-events:none; padding:6px 9px; border-radius:8px; background:#141833; color:#fff; font-size:11.5px; font-weight:650; white-space:nowrap; box-shadow:0 6px 16px rgba(20,24,60,.3); }
body.dt-che-do .dt-xa-meo[hidden]{ display:none; }
body.dt-che-do .dt-xa-trong{ padding:60px 20px; text-align:center; color:var(--dt-muc-2); font-size:13px; }
body.dt-che-do .dt-xa-trong[hidden]{ display:none; }
body.dt-che-do .dt-xa-ghi{ margin:8px 2px 0; color:var(--dt-mo); font-size:11px; line-height:1.4; text-align:center; }
body.dt-che-do .dt-xa-ghi[hidden]{ display:none; }
body.dt-che-do .dt-xa-doc{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
body.dt-che-do .dt-xa-dang{ position:sticky; float:right; top:0; z-index:6; margin:-4px -4px -26px 0; display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; background:rgba(20,24,51,.82); color:#fff; font-size:11px; font-weight:650; }
body.dt-che-do .dt-xa-dang[hidden]{ display:none; }
body.dt-che-do .dt-xa-dang i{ width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:dt-xa-quay .8s linear infinite; }
@keyframes dt-xa-quay{ to{ transform:rotate(360deg); } }

/* chân cột: Thêm khoản khác · Quà tặng · Đặt lại mặc định · Gửi Zalo · In */
body.dt-che-do .dt-xa-chan{ flex:none; padding:10px 14px 14px; border-top:1px solid #f0f1f8; background:#fff; }
body.dt-che-do .dt-xa-chan-phu{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
body.dt-che-do .dt-xa-chan .dt-them-phi-tudo,
body.dt-che-do .dt-xa-chan .dt-datlai{ height:30px; margin:0; padding:0 11px; border-radius:9px; font-size:12px; font-weight:700; }
body.dt-che-do .dt-xa-chan .dt-them-phi-tudo[hidden],
body.dt-che-do .dt-xa-chan .dt-datlai[hidden]{ display:none; }
body.dt-che-do .dt-xa-chan .dt-them-phi-tudo{ border:1px dashed #c9ccf6; background:#fff; color:var(--dt-xanh-dam); }
body.dt-che-do .dt-xa-chan .dt-them-phi-tudo:hover{ background:var(--dt-nhan-nhat); }
body.dt-che-do .dt-xa-chan .dt-xa-qua{ border-style:solid; border-color:#e3e6f5; color:var(--dt-muc-2); }
body.dt-che-do .dt-xa-chan .dt-datlai{ margin-left:auto; border:1px solid #e3e6f5; background:#fff; color:var(--dt-muc-2); }
body.dt-che-do .dt-xa-chan .dt-nut-hang{ gap:10px; }
body.dt-che-do .dt-xa-chan .dt-nut-gui,
body.dt-che-do .dt-xa-chan .dt-nut-in{ height:44px; border-radius:12px; font-size:14px; }
body.dt-che-do .dt-xa-chan .dt-nut-gui{ flex:1.6; background:var(--dt-xanh); color:#fff; box-shadow:0 6px 16px -6px rgba(91,91,247,.7); }
body.dt-che-do .dt-xa-chan .dt-nut-gui:hover{ background:var(--dt-xanh-dam); }
body.dt-che-do .dt-xa-chan .dt-nut-in{ border:1px solid #d9dcfb; background:#fff; color:var(--dt-xanh-dam); }
body.dt-che-do .dt-xa-chan .dt-nut-in:hover{ border-color:#b9bdf7; background:#fbfbff; }
@media (max-width:1180px) and (min-width:1024px){
  body.dt-che-do .dt-xa-dau{ padding:10px 11px; }
  body.dt-che-do .dt-xa-tit b{ display:none; }
  body.dt-che-do .dt-xa-cuon{ padding:9px; }
  body.dt-che-do .dt-xa-chan{ padding:9px 11px 11px; }
  body.dt-che-do .dt-xa-chan .dt-them-phi-tudo,
  body.dt-che-do .dt-xa-chan .dt-datlai{ padding:0 9px; font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){
  body.dt-che-do .dt-xa-dang i{ animation:none; }
  body.dt-che-do .dt-xa-sang{ transition:none; }
}