/* ============================================================
   AUTOSALES PRO — GIAO DIỆN MỚI ĐIỆN THOẠI (Vũ duyệt mockup 24/09/2026)
   Cùng ngôn ngữ trang quản trị mới: tiêu đề to đậm, thẻ trắng bo tròn trên
   nền xám, số to rõ, pill/thanh phân đoạn, tab dưới, tấm từ dưới lên,
   chạm ≥ 44px, không cuộn ngang, vùng an toàn iPhone.

   ☠️ PHẠM VI: mọi luật ở đây đều nằm dưới #app (giao diện điện thoại) hoặc
   body:not(.dt-che-do) (tấm/hộp gắn thẳng vào <body> — dùng chung với máy
   tính). Giao diện máy tính (#app-desktop, body.dt-che-do) KHÔNG bị ảnh
   hưởng. Ảnh báo giá gửi khách / bản in có CSS riêng — không đụng tới.
   Nạp SAU CÙNG (sau thong-bao.css) để đè kiểu cũ của điện thoại.
   ============================================================ */

/* ---------- Khung chung ---------- */
#app{ --gd-bong:0 1px 2px rgba(16,19,25,.04),0 10px 26px -14px rgba(16,19,25,.14); --gd-xam:#E6E8ED; --gd-tim:#7C3AED; --gd-tim-nhat:#F3EEFF; }
#app .gd-than{ overflow-x:hidden; }
#app .o, #app .o-tim input, #app textarea{ font-size:16px; }   /* ≥16px: iOS khỏi tự phóng to khi chạm ô */

/* Thanh trên: nền xám liền với nội dung, không viền */
#app .thanh-tren{
  background:var(--nen); border-bottom:0; min-height:58px; gap:8px;
  padding:calc(env(safe-area-inset-top) + 6px) 12px 8px 12px;
}
#app .thanh-tren .ic{
  width:44px; height:44px; border-radius:50%; background:var(--mat); box-shadow:var(--gd-bong);
  color:var(--muc); position:relative;
}
#app .thanh-tren .ic:active{ transform:scale(.94); }
#app .thanh-tren .ic svg{ stroke:var(--muc); }
#app .thanh-tren .tieu-de{ font-size:17px; font-weight:700; letter-spacing:-.01em; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .thanh-tren .tieu-de--giua{ padding-right:52px; }

#app .thanh-tren.gd-tren-lon{ align-items:flex-end; padding-left:18px; padding-bottom:10px; }
#app .gd-tren-giua{ flex:1; min-width:0; }
#app .gd-tieu{ font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-tren-nho{ display:flex; align-items:center; gap:5px; min-width:0; font-size:12.5px; font-weight:600; color:var(--muc-2); margin-bottom:1px; }
#app .gd-tren-nho svg{ flex:none; color:var(--nhan); }
#app .gd-tren-nho #tc-daily{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-tren-nho .cv-badge{ flex:none; font-size:10.5px; padding:1px 7px; margin-left:2px; cursor:pointer; }
#app .gd-tren-nho .cv-badge:empty{ display:none; }
#app .gd-tren-phu{ font-size:12.5px; color:var(--muc-3); margin-top:2px; }
#app .gd-tren-con .tieu-de{ flex:1; }

/* Chuông 🔔 (thong-bao.js gắn vào .thanh-tren màn Xe) + chuông Tương tác */
#app .gd-tren-lon .tbao-chuong,
#app .gd-tren-lon .tc-nut-chuong{ margin-left:0; flex:none; }
#app .tbao-chuong .tbao-so{ top:-3px; right:-3px; min-width:19px; height:19px; line-height:15px; border-color:var(--nen); }

/* Thanh tab dưới */
#app .thanh-tab{
  height:calc(62px + env(safe-area-inset-bottom)); padding:4px 4px env(safe-area-inset-bottom);
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-top:1px solid var(--ke);
}
#app .thanh-tab a{ font-size:11px; gap:3px; min-height:48px; -webkit-tap-highlight-color:transparent; }
#app .thanh-tab a svg{ width:25px; height:25px; }
#app .thanh-tab a[data-man="khuyen-mai"]{ font-size:11px; line-height:1.2; max-width:none; }
#app .tab-cham{ top:3px; }

/* Nhãn mục */
#app .nhan-muc{ margin:18px 20px 8px; font-size:12px; }
#app .gd-nhan-phu{ text-transform:none; letter-spacing:0; font-weight:600; color:var(--muc-3); font-size:12px; }

/* Thẻ chung */
#app .gd-the{ background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong); padding:16px; margin:0 16px 12px; }
#app .gd-the--ds{ padding:2px 16px; }
#app .gd-the--dong{ padding:4px 16px; }
#app .gd-the-dau{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
#app .gd-the-dau h2{ font-size:16px; font-weight:700; }
#app .gd-the-dau b{ font-size:16px; font-weight:800; }
#app .gd-phu{ font-size:12.5px; color:var(--muc-3); font-weight:500; }
#app .gd-goi-y{ font-size:12px; color:var(--muc-3); line-height:1.5; margin:0 20px; }
#app .gd-mo-ta{ font-size:13px; color:var(--muc-2); line-height:1.5; margin:2px 20px 14px; }
#app .gd-cuoi{ text-align:center; font-size:12px; color:var(--muc-3); margin:6px 0 4px; }
#app .gd-xanh{ color:var(--tot) !important; }
#app .gd-badge{ display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700; white-space:nowrap; }
#app .gd-badge--tot{ background:var(--tot-nhat); color:var(--tot); }
#app .gd-the-nho{ display:inline-block; font-size:11px; font-weight:600; color:var(--muc-2); background:#EEF0F3; border-radius:6px; padding:1px 6px; vertical-align:1px; }

/* Ảnh xe dùng chung: khung nền nhạt, ảnh vừa khung */
#app .gd-anh-xe{
  position:relative; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(160deg,#F5F7FB,#E9EDF5); border-radius:12px; color:#B6BECB;
}
#app .gd-anh-xe img{ width:100%; height:100%; object-fit:cover; display:block; }
#app .gd-anh-xe > svg{ width:44%; height:auto; opacity:.6; }

/* Thanh phân đoạn (segmented) — chạm ≥ 44px */
#app .gd-doan{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; padding:3px; border-radius:13px; background:var(--gd-xam); }
#app .gd-doan button{
  height:42px; min-width:0; padding:0 6px; border:0; border-radius:10px; background:transparent;
  font-weight:600; font-size:13.5px; line-height:1.1; font-family:inherit; color:var(--muc-2); white-space:nowrap; cursor:pointer;
  transition:background var(--nhanh), color var(--nhanh); touch-action:manipulation;
}
#app .gd-doan button.chon{ background:var(--mat); color:var(--muc); box-shadow:0 1px 3px rgba(16,19,25,.12); }
#app .gd-doan--rong{ margin:0 16px; }

/* Link chữ xanh */
#app .gd-link{ display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0; border:0; background:none; font-weight:600; font-size:13px; font-family:inherit; color:var(--nhan); cursor:pointer; }
#app .gd-link svg{ flex:none; }

/* Dòng "hành động" có biểu tượng + mũi tên (Thiết lập, menu ⋯) */
.gd-hanh{
  display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:8px 0;
  border:0; background:none; text-align:left; font-weight:600; font-size:15px; font-family:inherit; color:var(--muc); cursor:pointer;
  touch-action:manipulation;
}
.gd-hanh + .gd-hanh{ border-top:1px solid var(--ke); }
.gd-hanh-ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; flex:none; background:var(--nhan-nhat); color:var(--nhan); }
.gd-hanh-chu{ flex:1; min-width:0; }
.gd-hanh-chu small{ display:block; font-size:12px; font-weight:500; color:var(--muc-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd-hanh-mui{ flex:none; color:#C3C8D1; }
.gd-hanh--do{ color:var(--loi); }
.gd-hanh--do .gd-hanh-ic{ background:var(--loi-nhat); color:var(--loi); }
.gd-hanh:active{ opacity:.7; }

/* ============================================================
   TRANG XE
   ============================================================ */
#app .gd-tim{
  margin:4px 16px 2px; height:48px; padding:0 14px; border:0; border-radius:var(--bo-o);
  box-shadow:inset 0 0 0 1px var(--ke-2); background:var(--mat);
}
#app .gd-tim input{ font-size:16px; height:100%; }
#app .gd-tim .o-tim-xoa{ width:28px; height:28px; }

#app .gd-gan-day{
  display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  padding:2px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#app .gd-gan-day::-webkit-scrollbar{ display:none; }
#app .gd-bg-nho{
  flex:none; width:236px; min-height:72px; display:flex; align-items:center; gap:10px; padding:12px;
  background:var(--mat); border:0; border-radius:16px; box-shadow:var(--gd-bong); text-align:left;
  font-family:inherit; color:var(--muc); cursor:pointer; scroll-snap-align:start; touch-action:manipulation;
}
#app .gd-bg-nho:active{ transform:scale(.98); }
#app .gd-bg-nho .gd-anh-xe{ width:62px; height:44px; flex:none; border-radius:10px; }
#app .gd-bg-nho-chu{ flex:1; min-width:0; }
#app .gd-bg-nho-chu b{ display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-bg-nho-chu small{ display:block; font-size:12px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-bg-nho-chu strong{ display:block; font-size:14px; font-weight:800; margin-top:2px; }

#app .gd-xe-luoi{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 16px; }
#app .gd-xe-luoi .gd-rong-luoi{ grid-column:1/-1; padding:40px 20px; }
#app .gd-xe-the{
  position:relative; display:flex; flex-direction:column; min-width:0; padding:8px 8px 12px;
  background:var(--mat); border:0; border-radius:var(--bo-the); box-shadow:var(--gd-bong);
  text-align:left; font-family:inherit; color:var(--muc); cursor:pointer; touch-action:manipulation;
  transition:transform var(--nhanh) var(--duong-cong);
}
#app .gd-xe-the:active{ transform:scale(.97); }
#app .gd-xe-the .gd-anh-xe{ height:88px; }
#app .gd-xe-the b{ display:block; margin:10px 4px 0; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-xe-the small{ display:flex; justify-content:space-between; gap:4px; margin:1px 4px 0; font-size:12.5px; color:var(--muc-2); }
#app .gd-xe-the small em{ font-style:normal; color:var(--muc-3); white-space:nowrap; }
#app .gd-xe-km{
  position:absolute; top:6px; left:6px; z-index:2; display:inline-flex; align-items:center; height:20px; padding:0 7px;
  border-radius:6px; background:var(--tot-nhat); color:var(--tot); font-size:11px; font-weight:700;
}

/* Dải nhắc thông báo mới nhất trên trang Xe */
#app .tbao-dai{ margin:4px 16px 10px; border-radius:14px; }
#app .tbao-dai-x{ width:36px; height:36px; margin:-8px -4px 0 0; }

/* ============================================================
   CHỌN PHIÊN BẢN
   ============================================================ */
#app .gd-pb-tieu{ padding:0 20px 12px; }
#app .gd-pb-tieu h1{ font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
#app .gd-pb-hero{ background:var(--mat); border-radius:22px; box-shadow:var(--gd-bong); padding:10px; margin:0 16px 12px; }
#app .gd-pb-hero .gd-anh-xe{ height:156px; border-radius:16px; }
#app .gd-pb-so{ display:flex; padding:12px 2px 4px; text-align:center; }
#app .gd-pb-so > div{ flex:1; min-width:0; }
#app .gd-pb-so > div + div{ border-left:1px solid var(--ke); }
#app .gd-pb-so small{ display:block; font-size:11.5px; color:var(--muc-2); }
#app .gd-pb-so b{ font-size:16px; font-weight:800; white-space:nowrap; }
#app .gd-canh-bao{
  display:flex; align-items:flex-start; gap:10px; margin:0 16px 12px; padding:12px 14px; border-radius:14px;
  background:var(--canh-nhat); color:#6E4200; font-size:13px; line-height:1.5;
}
#app .gd-canh-bao svg{ flex:none; margin-top:1px; }
#app .gd-ds{ background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong); overflow:hidden; margin:0 16px 12px; }
#app .gd-pb-dong{
  display:flex; align-items:center; gap:10px; width:100%; min-height:66px; padding:11px 12px 11px 14px;
  border:0; border-top:1px solid var(--ke); background:none; text-align:left; font-family:inherit; color:var(--muc); cursor:pointer;
}
#app .gd-pb-dong:first-child{ border-top:0; }
#app .gd-pb-dong:active{ background:#F7F8FA; transform:none; }
#app .gd-pb-dong-chu{ flex:1; min-width:0; }
#app .gd-pb-dong-chu > b{ display:block; font-size:15.5px; font-weight:600; }
#app .gd-pb-gia{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:3px; font-size:13px; color:var(--muc-2); }
#app .gd-pb-lb{ flex:none; text-align:right; }
#app .gd-pb-lb small{ display:block; font-size:11px; color:var(--muc-3); }
#app .gd-pb-lb b{ font-size:15px; font-weight:800; white-space:nowrap; }
#app .gd-pb-dong .mui-ten{ flex:none; color:#C3C8D1; }

/* ============================================================
   BÁO GIÁ
   ============================================================ */
#app .gd-bg-xe{ display:flex; align-items:center; gap:12px; margin:2px 16px 12px; }
#app .gd-bg-xe[hidden]{ display:none; }
#app .gd-bg-xe-anh{ width:112px; height:70px; flex:none; border-radius:14px; background:linear-gradient(160deg,#FFFFFF,#EEF1F7); box-shadow:var(--gd-bong); }
#app .gd-bg-xe-chu{ flex:1; min-width:0; }
#app .gd-bg-xe-chu h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-chip-pb{
  display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:40px; margin-top:6px; padding:0 10px 0 12px;
  border:0; border-radius:11px; background:var(--mat); box-shadow:inset 0 0 0 1.5px var(--ke-2);
  font-weight:600; font-size:13.5px; font-family:inherit; color:var(--muc); cursor:pointer;
}
#app .gd-chip-pb span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app .gd-chip-pb svg{ flex:none; color:var(--muc-3); }

#app .gd-tong{
  margin:0 16px 12px; padding:16px 16px 14px; border-radius:22px; background:var(--nhan); color:#fff;
  box-shadow:0 18px 36px -20px rgba(37,99,235,.8);
}
#app .gd-tong-dau{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:500; opacity:.88; }
#app .gd-tong-so{ margin-top:4px; font-size:clamp(26px, 8.6vw, 34px); font-weight:800; letter-spacing:-.03em; line-height:1.12; white-space:nowrap; }
#app .gd-tong-hai{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.22); }
#app .gd-tong-hai span{ display:block; font-size:11.5px; opacity:.82; }
#app .gd-tong-hai b{ font-size:15.5px; font-weight:700; white-space:nowrap; }
#app .gd-doan--xanh{ background:rgba(255,255,255,.16); }
#app .gd-doan--xanh button{ color:rgba(255,255,255,.88); }
#app .gd-doan--xanh button.chon{ background:#fff; color:var(--nhan-dam); }

#app .gd-tg-the{
  display:flex; align-items:center; gap:12px; width:calc(100% - 32px); min-height:76px; margin:0 16px 12px;
  padding:14px 14px 14px 16px; border:0; border-radius:var(--bo-the); background:var(--mat); box-shadow:var(--gd-bong);
  text-align:left; font-family:inherit; color:var(--muc); cursor:pointer; touch-action:manipulation;
}
#app .gd-tg-the:active{ transform:scale(.99); }
#app .gd-tg-ic{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; background:var(--tot-nhat); color:var(--tot); }
#app .gd-tg-chu{ flex:1; min-width:0; }
#app .gd-tg-chu small{ display:block; font-size:12px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-tg-chu small b{ font-size:12px; font-weight:700; color:var(--muc); }
#app .gd-tg-chu > b{ display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; }
#app .gd-tg-chu > b i{ font-style:normal; font-size:13px; font-weight:600; color:var(--muc-2); }
#app .gd-tg-the > svg:last-child{ flex:none; color:#C3C8D1; }
#app .gd-tg-the--moi .gd-tg-ic{ background:var(--nhan-nhat); color:var(--nhan); }
#app .gd-tg-the--moi .gd-tg-chu > b{ font-size:16px; letter-spacing:0; }
#app .gd-tg-the--moi > svg:last-child{ color:var(--nhan); }

/* Nhóm mở/gập */
#app .gd-muc{ margin:0 16px 10px; background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong); overflow:hidden; }
#app .gd-muc-dau{
  display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:0 14px 0 16px;
  border:0; background:none; text-align:left; font-family:inherit; color:var(--muc); cursor:pointer; touch-action:manipulation;
}
#app .gd-muc-ten{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; }
#app .gd-muc-tom{ flex:none; font-size:13.5px; font-weight:600; color:var(--muc-2); white-space:nowrap; }
#app .gd-muc-mui{ flex:none; color:var(--muc-3); transition:transform .25s var(--duong-cong); }
#app .gd-muc.mo .gd-muc-mui{ transform:rotate(180deg); }
#app .gd-muc-than{ display:none; padding:0 16px 14px; }
#app .gd-muc.mo .gd-muc-than{ display:block; animation:gdMo .22s var(--duong-cong); }
@keyframes gdMo{ from{ opacity:0; transform:translateY(-4px); } }
#app .gd-dem{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px;
  border-radius:6px; background:var(--canh-nhat); color:var(--canh); font-size:11.5px; font-weight:700;
}
#app .gd-dem[hidden]{ display:none; }

/* Dòng số trong nhóm (nhãn trái — ô/giá trị phải) */
#app .gd-dg{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:5px 0; font-size:14px; }
#app .gd-dg + .gd-dg,
#app .gd-dg + div:not(:empty),
#app .gd-hang-chon + .gd-hang-chon{ border-top:1px solid var(--ke); }
#app .gd-dg > span:first-child{ flex:1; min-width:0; color:var(--muc-2); line-height:1.3; }
#app label.gd-dg{ cursor:text; }
#app .gd-dg--chot{ border-top:1px solid var(--ke); }
#app .gd-dg--chot > span:first-child{ color:var(--muc); font-weight:700; }
#app .gd-dg--chot > b{ font-size:17px; font-weight:800; white-space:nowrap; }

/* Ô sửa được: hộp viền liền (như ô chọn) — không gạch chân đứt (Vũ chốt) */
#app .gd-o-so{
  width:48%; min-width:120px; max-width:170px; height:44px; padding:0 12px; flex:none;
  border:0; outline:0; border-radius:11px; background:var(--mat); box-shadow:inset 0 0 0 1.5px var(--ke-2);
  font-family:inherit; font-size:16px; font-weight:650; color:var(--muc); text-align:right; font-variant-numeric:tabular-nums;
  -webkit-appearance:none; appearance:none;
}
#app .gd-o-so::placeholder{ color:var(--muc-3); font-weight:500; }
#app .gd-o-so:focus{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .gd-o-so--xanh{ color:var(--tot); }

/* Bảng chi phí lăn bánh (8 khoản + khoản tự thêm) — bấm dòng để sửa */
#app .gd-bang-phi .the-dong{
  min-height:54px; padding:5px 0; gap:10px; border-top:1px solid var(--ke); font-size:14px;
}
#app .gd-bang-phi .the-dong:first-child{ border-top:0; }
#app .gd-bang-phi #mt-phi-tudo:empty{ display:none; }
#app .gd-bang-phi .the-dong .nhan{ flex:1; min-width:0; color:var(--muc-2); font-size:14px; line-height:1.3; }
#app .gd-bang-phi .the-dong .gia-tri{
  flex:none; display:inline-flex; align-items:center; justify-content:flex-end; min-width:120px; height:42px; padding:0 12px;
  border-radius:11px; background:var(--mat); box-shadow:inset 0 0 0 1.5px var(--ke-2);
  font-size:14.5px; font-weight:650; color:var(--muc);
}
#app .gd-bang-phi .the-dong--nhap .gia-tri::after{ content:none; }
#app .gd-bang-phi .the-dong--nhap:active .gia-tri{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .gd-bang-phi .the-dong--sua .gia-tri{ color:var(--nhan-dam); background:var(--nhan-nhat); box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.35); }
#app .gd-bang-phi .gd-dg--chot{ padding-top:8px; }
#app .gd-hang-nut{ display:flex; gap:8px; margin-top:8px; }
#app .gd-nut-vien{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 10px;
  border:0; border-radius:var(--bo-nut); background:var(--mat); box-shadow:inset 0 0 0 1.5px var(--ke-2);
  font-weight:700; font-size:13.5px; font-family:inherit; color:var(--muc); cursor:pointer; touch-action:manipulation;
}
#app .gd-nut-vien:active{ background:var(--nen); }
#app .gd-muc-than .mt-phi-ghi{ margin:10px 2px 0; }

#app .gd-hang-chon{ padding:8px 0; }
#app .gd-hang-chon > span{ display:block; margin:4px 2px 8px; font-size:12.5px; font-weight:600; color:var(--muc-2); }

/* Quà tặng */
#app .mt-qua-dong{
  display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:4px 0;
  border:0; border-top:1px solid var(--ke); background:none; text-align:left; font-weight:500; font-size:14px; font-family:inherit; color:var(--muc);
}
#app .mt-qua-dong:first-child{ border-top:0; }
#app .mt-qua-dong:active{ background:none; opacity:.7; }
#app .gd-qua-ic{ width:32px; height:32px; flex:none; display:grid; place-items:center; border-radius:9px; background:var(--canh-nhat); color:var(--canh); }
#app .gd-qua-ten{ flex:1; min-width:0; overflow-wrap:break-word; overflow-wrap:anywhere; }
#app .mt-qua-dong > svg:last-child{ flex:none; stroke:currentColor; color:var(--muc-3); }
#app .mt-qua-rong{ min-height:0; padding:6px 0 8px; font-size:13.5px; color:var(--muc-3); }
#app .gd-them-dong{
  display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:0;
  border:0; border-top:1px solid var(--ke); background:none; font-weight:600; font-size:14px; font-family:inherit; color:var(--nhan); cursor:pointer;
}
#app .gd-them-dong:disabled{ opacity:.45; cursor:default; }

/* Lộ trình thanh toán — các bước đánh số */
#app #mt-lo-trinh .lo-trinh-hang{ gap:12px; min-height:54px; padding:6px 0; border-top:1px solid var(--ke); }
#app .gd-buoc-so{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--nhan-nhat); color:var(--nhan-dam); font-size:12px; font-weight:800; }
#app #mt-lo-trinh .lo-trinh-hang .nhan{ flex:1; min-width:0; line-height:1.3; }
#app #mt-lo-trinh .lo-trinh-hang--sua .nhan{ color:var(--muc-2); font-weight:500; }
#app .gd-o-xem{ display:inline-flex; align-items:center; height:42px; padding:0 12px; border-radius:11px; box-shadow:inset 0 0 0 1.5px var(--ke-2); }
#app .lo-trinh-hang--sua:active .gd-o-xem{ box-shadow:inset 0 0 0 2px var(--nhan); }

/* Thanh hành động đáy báo giá: Tạo ảnh · Zalo · PDF */
#app .gd-dock-bg{
  gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
#app .gd-dock-bg .nut--chinh{ flex:1; min-width:0; height:54px; border-radius:15px; font-size:15.5px; padding:0 12px; }
#app .gd-nut-vuong{
  width:62px; height:54px; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:0; border-radius:15px; background:var(--nhan-nhat); color:var(--nhan-dam);
  font-weight:700; font-size:11px; font-family:inherit; cursor:pointer; touch-action:manipulation;
  transition:transform var(--nhanh);
}
#app .gd-nut-vuong:active{ transform:scale(.95); }
#app .gd-nut-vuong--xam{ background:#EEF0F3; color:var(--muc); }
/* Gói 2Q (30/09/2026): vương miện VIP nhỏ trên nút PDF (tài khoản Free, app.js veNutPdf) */
#app #mt-in-pdf{ position:relative; }
#app .gd-nut-vip{
  position:absolute; top:5px; right:6px; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#F4E6C3; color:#8A6414; pointer-events:none;
}
/* Gói 2Q: dòng "Còn N lượt tạo ảnh hôm nay" dưới hàng nút (Free, app.js veDongLuot). Hết lượt: chữ nhấn, bấm mở hộp VIP */
.luot-anh{
  display:block; margin:0; padding:0 8px; border:0; background:none; font-family:inherit;
  font-size:12.5px; font-weight:600; line-height:1.3; color:var(--canh); text-align:center; cursor:default;
}
.luot-anh[hidden]{ display:none; }
.luot-anh:disabled{ opacity:1; color:var(--canh); }
.luot-anh--het{ color:var(--nhan); cursor:pointer; text-decoration:underline; text-underline-offset:2px; touch-action:manipulation; }
#app .gd-dock-bg .luot-anh{ flex:0 0 100%; min-height:20px; margin-top:-2px; }
#app .gd-dock-bg .luot-anh--het{ min-height:32px; }
.luot-anh--dt{ width:100%; margin-top:6px; font-size:10.5px; }
/* Gói 2Q: tấm "Thông tin trên báo giá" trước lần tạo ảnh đầu (app.js moTamTTBG) */
.ttbg .ttbg-ghi{ margin-top:0; margin-bottom:12px; }
.ttbg .o-nhom{ margin-bottom:12px; }
.ttbg .ttbg-nut{ display:flex; flex-direction:column; gap:6px; margin-top:6px; }

/* ============================================================
   TRANG TÍNH TRẢ GÓP
   ============================================================ */
#app .gd-tren-tam{ padding-left:8px; padding-right:8px; }
#app .gd-tren-tam .tieu-de{ flex:1; text-align:center; font-size:16px; }
#app .gd-nut-chu{ min-width:64px; height:44px; padding:0 8px; border:0; background:none; font-weight:600; font-size:15px; font-family:inherit; color:var(--nhan); cursor:pointer; }
#app .gd-nut-chu--dam{ font-weight:700; }
#app .gd-hanh-gat{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
#app .gd-hanh-gat .gd-hanh-chu b{ display:block; font-size:15px; font-weight:600; }
#app .gd-hanh-gat .gd-hanh-chu small{ white-space:normal; }
#app .gd-hanh-gat .gat{ width:51px; height:31px; }
#app .gd-hanh-gat .gat .ray::before{ width:25px; height:25px; }
#app .gd-hanh-gat .gat input:checked + .ray{ background:var(--tot); }
#app .gd-hanh-gat .gat input:checked + .ray::before{ transform:translateX(20px); }
#app .gd-tg-trong{ margin:0 16px 12px; padding:12px 14px; border-radius:14px; background:var(--nhan-nhat); color:var(--nhan-dam); font-size:13px; line-height:1.5; }
#app .gd-tg-lon{ margin:0 16px 12px; padding:18px 16px 16px; border-radius:22px; background:var(--muc); color:#fff; }
#app .gd-tg-lon small{ display:block; font-size:13px; opacity:.72; }
#app .gd-tg-lon-so{ margin-top:2px; font-size:clamp(30px, 10vw, 40px); font-weight:800; letter-spacing:-.03em; line-height:1.1; white-space:nowrap; }
#app .gd-tg-lon-ba{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); }
#app .gd-tg-lon-ba > div + div{ padding-left:10px; border-left:1px solid rgba(255,255,255,.14); }
#app .gd-tg-lon-ba span{ display:block; font-size:11px; opacity:.65; }
#app .gd-tg-lon-ba b{ font-size:15px; font-weight:700; white-space:nowrap; }
#app .gd-moc{ gap:7px; }
#app .gd-moc button{ height:44px; padding:0; border:0; border-radius:12px; box-shadow:inset 0 0 0 1.5px var(--ke-2); }
#app .gd-moc button.chon{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app #man-tra-gop .mt-vay-tuy-chinh{ margin:14px 0 0; }
#app #man-tra-gop .mt-vay-tuy-chinh-o .o{ height:48px; border:0; box-shadow:inset 0 0 0 1.5px var(--ke-2); }
#app #man-tra-gop .mt-vay-tuy-chinh-o .o:focus{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .gd-buoc{ width:auto; height:44px; border:0; border-radius:12px; background:var(--nen); overflow:hidden; }
#app .gd-buoc button{ width:44px; height:44px; background:transparent; color:var(--nhan); font-size:22px; }
#app .gd-buoc .giua{ min-width:62px; padding:0 2px; font-weight:500; white-space:nowrap; }
#app .gd-buoc .giua b{ font-weight:800; }
#app .gd-lai{ display:flex; align-items:center; gap:6px; flex:none; }
#app .gd-lai .gd-o-so{ width:84px; min-width:0; }
#app .gd-lai b{ font-size:13px; color:var(--muc-2); white-space:nowrap; }
/* 2 mức lãi (Vũ chốt 27/09/2026): chữ nhỏ dưới nhãn; vay 1 năm thì ô năm 2 mờ + khoá
   (chuyển mờ, không gập — gập làm nội dung nhảy đúng lúc đang bấm − năm) */
#app .gd-dg--lai{ transition:opacity var(--vua) var(--duong-cong); }
#app .gd-dg--lai > span:first-child small{ display:block; margin-top:1px; font-size:11.5px; font-weight:500; color:var(--muc-3); }
#app .gd-dg--lai.gd-dg--tat{ opacity:.45; cursor:default; }
#app .gd-dg--lai .gd-o-so:disabled{ opacity:1; color:var(--muc); -webkit-text-fill-color:var(--muc); background:var(--nen); }
#app .gd-tg-lon-nam2{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:12px;
  padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.08); transition:opacity var(--vua) var(--duong-cong);
}
#app .gd-tg-lon-nam2 span{ min-width:0; font-size:13px; opacity:.72; }
#app .gd-tg-lon-nam2 b{ font-size:17px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
#app .gd-tg-lon-nam2.gd-tat{ opacity:.4; }
#app .gd-bang-tg{ width:100%; border-collapse:collapse; font-size:13px; }
#app .gd-bang-tg td small{ display:block; margin-top:1px; font-size:11px; font-weight:500; color:var(--muc-3); }
#app .gd-bang-tg th{ padding:6px 0; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muc-3); text-align:right; }
#app .gd-bang-tg td{ padding:10px 0; border-top:1px solid var(--ke); text-align:right; font-variant-numeric:tabular-nums; }
#app .gd-bang-tg th:first-child, #app .gd-bang-tg td:first-child{ text-align:left; }
#app .gd-hang-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
#app .gd-hang-link .gd-link[hidden]{ display:none; }
#app .gd-hang-link .xem{ margin-left:auto; }
#app .gd-dock-tg .nut{ height:52px; }
#app .gd-dock-tg .nut--phu{ background:var(--nhan-nhat); color:var(--nhan-dam); border:0; flex:1 1 0; }

/* Bảng trả góp đầy đủ + xem ảnh: chỉ nắn thẻ cho cùng nhịp */
#app .bang-tom-tat, #app .bang-nam{ border:0; box-shadow:var(--gd-bong); }
#app #man-xem-anh .than{ padding:14px 16px; }
#app #xem-anh-img{ border-radius:14px; }

/* ============================================================
   CÀI ĐẶT KHUYẾN MÃI
   ============================================================ */
#app .km-tabs{ margin:2px 16px 14px; padding:3px; gap:2px; background:var(--gd-xam); border-radius:13px; }
#app .km-tab{ height:42px; border-radius:10px; font-size:13px; font-weight:600; color:var(--muc-2); }
#app .km-tab.chon{ background:var(--mat); color:var(--muc); box-shadow:0 1px 3px rgba(16,19,25,.12); }
#app .km-thang.the{ margin:0 16px 12px; padding:14px 16px; border:0; border-radius:var(--bo-the); box-shadow:var(--gd-bong); }
#app .km-thang h3{ font-size:17px; font-weight:800; }
#app .km-thang p{ font-size:12.5px; }
#app #km-thang{ height:44px; padding:0 14px; border:0; border-radius:var(--bo-nut); background:var(--nhan-nhat); color:var(--nhan-dam); font-size:14px; }
#app .gd-thanh{ display:block; height:6px; margin-top:8px; border-radius:3px; background:#EEF0F3; overflow:hidden; }
#app .gd-thanh i{ display:block; height:100%; border-radius:3px; background:var(--tot); }
#app .gd-thanh i.thieu{ background:var(--canh); }

#app .cp-dau{ padding:4px 20px 10px; align-items:center; }
#app .cp-dau button#cp-dat-lai{ min-height:40px; padding:0 4px; font-size:13px; }
#app .cp-ds.the{ margin:0 16px; border:0; border-radius:var(--bo-the); box-shadow:var(--gd-bong); }
#app .cp-dong{ min-height:56px; padding:6px 12px 6px 14px; gap:10px; }
#app .cp-dong span{ font-size:14px; color:var(--muc-2); }
#app .cp-dong b{
  display:inline-flex; align-items:center; justify-content:flex-end; min-width:104px; height:40px; padding:0 12px;
  border-radius:11px; box-shadow:inset 0 0 0 1.5px var(--ke-2); font-size:14px; font-weight:650; color:var(--muc);
}
#app .cp-dong:active b{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .cp-dong .mui-ten{ display:none; }

/* ---------- Bảng khuyến mãi kiểu Excel (gói U1 28/09/2026, tai-lieu/dac-ta-bang-khuyen-mai.md §3) ----------
   Đầu màn: số ô chưa lưu + Hoàn tác + "Lưu N". Hàng nút tròn dòng xe cuộn ngang BÊN TRONG (trang không cuộn ngang).
   Bảng 4 cột vừa 320px. Ô đã sửa chưa lưu nền vàng #FFF1C2, ô đang chọn viền xanh. Thanh sửa trượt lên từ đáy; đang
   gõ thì man-xe.js (_kmDatViTri) đặt nó ngay trên thanh nhập nhanh NHAP_SO. Tiền tố kmb- (không trùng lớp nào). */
#app .kmb-tren-hang{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; margin-top:4px; }
#app .kmb-tren-hang .gd-tren-phu{ flex:1; min-width:0; margin-top:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .kmb-tren-hang .kmb-tren-phu--doi{ color:#8A5200; font-weight:700; }
#app .kmb-tren-nut{ display:flex; align-items:center; gap:8px; flex:none; }
#app .kmb-nut-hoan{
  width:44px; height:44px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:50%;
  background:var(--mat); box-shadow:var(--gd-bong); color:var(--muc); cursor:pointer; touch-action:manipulation;
}
#app .kmb-nut-hoan:active{ transform:scale(.94); }
#app .kmb-nut-luu{
  min-width:88px; height:44px; padding:0 16px; border:0; border-radius:var(--bo-nut);
  background:#E6E8ED; color:var(--muc-2); font-family:inherit; font-size:14.5px; font-weight:700; white-space:nowrap;
  cursor:pointer; touch-action:manipulation; transition:background var(--nhanh), color var(--nhanh), opacity var(--nhanh);
}
#app .kmb-nut-luu--co, #app .kmb-nut-luu--dang{ background:var(--nhan); color:#fff; }
#app .kmb-nut-luu--dang{ opacity:.72; }
#app .kmb-nut-luu--co:active{ background:var(--nhan-dam); }
#app .kmb-nut-luu:disabled{ cursor:default; }

#app .kmb-chips{
  position:relative; display:flex; gap:8px; padding:2px 16px 12px; overflow-x:auto; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#app .kmb-chips::-webkit-scrollbar{ display:none; }
#app .kmb-chip{
  flex:none; display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border:0; border-radius:999px;
  background:var(--mat); box-shadow:inset 0 0 0 1px var(--ke-2); font-family:inherit; font-size:14px; font-weight:600;
  color:var(--muc); white-space:nowrap; cursor:pointer; touch-action:manipulation;
  transition:background var(--nhanh), color var(--nhanh), box-shadow var(--nhanh);
}
#app .kmb-chip:active{ transform:scale(.97); }
#app .kmb-chip--chon{ background:var(--nhan); color:#fff; box-shadow:none; }
#app .kmb-cham{ width:9px; height:9px; flex:none; border-radius:50%; background:#98A0AD; }
#app .kmb-cham--chua-hoan-tat{ background:#E08A00; }
#app .kmb-cham--da-hoan-tat{ background:var(--tot); }
#app .kmb-chip--chon .kmb-cham{ box-shadow:0 0 0 2px #fff; }
#app .kmb-chip-sua{ width:7px; height:7px; flex:none; margin-left:-2px; border-radius:50%; background:#F5B400; }

#app .kmb-bang{ margin:0 16px; background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong); overflow:hidden; }
#app .kmb-hang{ display:grid; grid-template-columns:minmax(0,1fr) 96px 52px 66px; min-height:56px; border-top:1px solid var(--ke); }
#app .kmb-hang--dau{ min-height:34px; border-top:0; background:#F7F8FA; font-size:11px; font-weight:700; color:var(--muc-2); }
#app .kmb-hang--ca{ background:#F4F6FA; }
#app .kmb-o{ min-width:0; display:flex; align-items:center; border-left:1px solid var(--ke); transition:background var(--nhanh), box-shadow var(--nhanh); }
#app .kmb-o--ten{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; padding:7px 8px 7px 10px; border-left:0; }
#app .kmb-o--ten b{ font-size:13.5px; font-weight:650; line-height:1.25; overflow-wrap:break-word; overflow-wrap:anywhere; }
#app .kmb-o--ten small{ font-size:11.5px; color:var(--muc-2); }
#app .kmb-o--giua{ justify-content:center; }
#app .kmb-hang--dau .kmb-o{ padding:0 8px; }
#app .kmb-hang--dau .kmb-o--ten{ padding-left:10px; }
#app .kmb-hang--dau .kmb-o--so{ justify-content:flex-end; }
#app .kmb-o--doi{ background:#FFF1C2; }
#app .kmb-o--chon{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .kmb-giam{
  width:100%; min-height:56px; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:2px;
  padding:6px 8px; border:0; background:transparent; font-family:inherit; color:var(--muc); text-align:right;
  cursor:pointer; touch-action:manipulation;
}
#app .kmb-giam b{ font-size:15px; font-weight:750; font-variant-numeric:tabular-nums; white-space:nowrap; }
#app .kmb-giam small{ font-size:11px; color:var(--muc-2); }
#app .kmb-giam--rong b{ font-size:13.5px; font-weight:600; color:var(--muc-3); }
#app .kmb-giam--vuot b, #app .kmb-giam--vuot small{ color:var(--loi); }
#app .kmb-bh{
  width:100%; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-size:11px; color:var(--muc-2); cursor:pointer; touch-action:manipulation;
}
#app .kmb-bh input{ width:22px; height:22px; margin:0; accent-color:var(--nhan); }
#app .kmb-qua{
  min-width:50px; height:34px; padding:0 8px; border:0; border-radius:999px; background:var(--nhan-nhat); color:var(--nhan-dam);
  font-family:inherit; font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; touch-action:manipulation;
}
#app .kmb-qua--rong{ background:transparent; box-shadow:inset 0 0 0 1px var(--ke-2); color:var(--muc-2); font-weight:600; }
#app .kmb-qua--ca{ background:var(--mat); box-shadow:inset 0 0 0 1px #C9D6F5; }
#app .kmb-rong{ padding:28px 16px; text-align:center; font-size:13.5px; color:var(--muc-3); }
#app .kmb-chan{ margin:12px 20px 0; }
#app .kmb-goi-y{ font-size:12px; line-height:1.5; color:var(--muc-2); }
#app .kmb-quan-ly{ margin-top:4px; }
#app .kmb-dang-luu .kmb-chips, #app .kmb-dang-luu .kmb-bang, #app .kmb-dang-luu .kmb-chan{ opacity:.55; pointer-events:none; }
#app .kmb-an{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Thanh sửa ô: trượt lên từ đáy (lớp --vao / --ra), --noi = đang nằm trên thanh nhập nhanh (bỏ đệm vùng an toàn) */
#app .kmb-thanh{ position:absolute; left:0; right:0; bottom:0; z-index:40; }
#app .kmb-thanh-trong{
  display:flex; flex-direction:column; gap:10px; padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:var(--mat); border-radius:22px 22px 0 0; box-shadow:0 -14px 34px -12px rgba(16,19,25,.3);
}
#app .kmb-thanh--noi .kmb-thanh-trong{ padding-bottom:10px; }
/* Đang nằm trên thanh nhập nhanh: nút Xong của thanh đó (ngay bên dưới, cùng tác dụng) thay cho nút Xong ở đây */
#app .kmb-thanh--noi .kmb-nut--xong{ display:none; }
#app .kmb-thanh--vao .kmb-thanh-trong{ animation:kmbLen .32s var(--duong-cong) both; }
#app .kmb-thanh--ra .kmb-thanh-trong{ animation:kmbXuong .22s cubic-bezier(.4,0,1,1) both; }
@keyframes kmbLen{ from{ transform:translateY(100%); } }
@keyframes kmbXuong{ to{ transform:translateY(100%); } }
#app .kmb-thanh-dau{ display:flex; align-items:center; gap:10px; }
#app .kmb-thanh-chu{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#app .kmb-thanh-chu b{ font-size:15px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .kmb-thanh-chu span{ font-size:12px; color:var(--muc-2); }
#app .kmb-nut{
  height:44px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 10px; border:0;
  border-radius:12px; font-family:inherit; font-size:13.5px; font-weight:700; line-height:1.15; cursor:pointer;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
#app .kmb-nut:active{ transform:scale(.97); }
#app .kmb-nut:disabled{ opacity:.4; cursor:default; }
#app .kmb-nut--xong{ flex:none; min-width:76px; padding:0 18px; background:var(--nhan); color:#fff; font-size:14.5px; }
#app .kmb-nut--xong:active{ background:var(--nhan-dam); }
#app .kmb-nut--nhe{ flex:1 1 0; min-width:0; background:var(--nhan-nhat); color:var(--nhan-dam); box-shadow:inset 0 0 0 1px #C9D6F5; text-align:center; }
#app .kmb-nut--nhe svg{ flex:none; }
#app .kmb-nut--mui{
  flex:none; flex-direction:column; gap:1px; width:52px; height:auto; min-height:56px; padding:0;
  background:var(--mat); box-shadow:inset 0 0 0 1px var(--ke-2); color:var(--muc); font-size:11.5px;
}
#app .kmb-thanh-nhap{ display:flex; align-items:stretch; gap:6px; }
#app .kmb-o-to{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:5px 12px;
  border-radius:14px; background:var(--mat); box-shadow:inset 0 0 0 2px var(--nhan); cursor:text;
}
#app .kmb-o-to-hang{ display:flex; align-items:baseline; gap:6px; }
#app .kmb-o-giam{
  flex:1; min-width:0; width:100%; height:30px; padding:0; border:0; outline:0; background:transparent;
  font-family:inherit; font-size:21px; font-weight:750; color:var(--muc); font-variant-numeric:tabular-nums;
  -webkit-appearance:none; appearance:none;
}
#app .kmb-o-giam::placeholder{ color:var(--muc-3); font-weight:600; }
#app .kmb-dv{ flex:none; font-size:14px; font-weight:600; color:var(--muc-3); }
#app .kmb-con{ font-size:11.5px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .kmb-con--loi{ color:var(--loi); font-weight:600; }
#app .kmb-thanh-nut{ display:flex; gap:8px; }
#app .kmb-thanh[data-loai="bh"] .kmb-thanh-nhap{ display:none; }
#app .kmb-thanh[data-loai="giam-ca"] .kmb-nut--mui,
#app .kmb-thanh[data-loai="giam-ca"] .kmb-nut[data-thanh="chep"]{ display:none; }
/* Đang sửa ô: ẩn thanh tab dưới, chừa đáy bảng bằng đúng phần thanh sửa đang che (--kmb-cao do man-xe.js đặt) */
#app .man.kmb-dang-sua > .thanh-tab{ display:none; }
#app .man.kmb-dang-sua #km-panel-xe{ padding-bottom:var(--kmb-cao, 0px); }
/* Màn 320-360px: cột số hẹp lại, bảng sát lề hơn (vẫn đủ 4 cột, không cuộn ngang); đặt SAU các luật thanh sửa để đè */
@media (max-width:360px){
  #app .kmb-bang{ margin:0 12px; }
  #app .kmb-hang{ grid-template-columns:minmax(0,1fr) 84px 46px 60px; }
  #app .kmb-chips{ padding-left:12px; padding-right:12px; }
  #app .kmb-nut--nhe{ padding:0 6px; font-size:12.5px; }   /* "Chép xuống 3 dòng" vừa 1 dòng ở 320px */
  #app .kmb-nut--nhe svg{ display:none; }
}

/* Tấm chọn quà (KHUNG.moTam, gắn vào <body>) */
body:not(.dt-che-do) .kmb-qua-tam{ padding:0 20px; }
body:not(.dt-che-do) .kmb-qua-phu{ margin:-4px 0 6px; font-size:13px; line-height:1.45; color:var(--muc-2); }
body:not(.dt-che-do) .kmb-qua-ds{ display:flex; flex-direction:column; margin:0 -8px; }
body:not(.dt-che-do) .kmb-qua-muc{ display:flex; align-items:center; gap:12px; min-height:48px; padding:0 8px; border-radius:12px; font-size:15px; cursor:pointer; }
body:not(.dt-che-do) .kmb-qua-muc:active{ background:var(--nen); }
body:not(.dt-che-do) .kmb-qua-muc span{ min-width:0; overflow-wrap:break-word; overflow-wrap:anywhere; }
body:not(.dt-che-do) .kmb-qua-muc input,
body:not(.dt-che-do) .kmb-qua-ap input{ width:22px; height:22px; flex:none; margin:0; accent-color:var(--nhan); }
body:not(.dt-che-do) .kmb-qua-them{ display:flex; gap:8px; margin:10px 0 2px; }
body:not(.dt-che-do) .kmb-qua-them .o{ flex:1; min-width:0; height:46px; font-size:16px; border:0; box-shadow:inset 0 0 0 1.5px var(--ke-2); }
body:not(.dt-che-do) .kmb-qua-them .o:focus{ outline:0; box-shadow:inset 0 0 0 2px var(--nhan); }
body:not(.dt-che-do) .kmb-qua-them-nut{
  flex:none; height:46px; padding:0 16px; border:0; border-radius:12px; background:var(--nhan-nhat); color:var(--nhan-dam);
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; touch-action:manipulation;
}
body:not(.dt-che-do) .kmb-qua-ap{ min-width:0; margin:12px 0 0; padding:0; border:0; }
body:not(.dt-che-do) .kmb-qua-ap legend{ padding:0; margin-bottom:2px; font-size:12px; font-weight:700; color:var(--muc-2); }
body:not(.dt-che-do) .kmb-qua-ap label{ display:flex; align-items:center; gap:12px; min-height:44px; font-size:15px; cursor:pointer; }
body:not(.dt-che-do) .kmb-qua-nut{ position:sticky; bottom:0; display:flex; gap:10px; margin-top:10px; padding-top:10px; background:var(--mat); }
body:not(.dt-che-do) .kmb-qua-nut .nut{ height:50px; }
body:not(.dt-che-do) .kmb-qua-nut .nut--phu{ flex:1; }
body:not(.dt-che-do) .kmb-qua-nut .nut--chinh{ flex:2; }
/* Danh sách chọn phiên bản để xoá: nút thật trong kiểu dòng .tam-muc */
body:not(.dt-che-do) .tam .kmb-tam-muc{ width:100%; border-left:0; border-right:0; border-bottom:0; background:none; font-family:inherit; color:inherit; text-align:left; }


/* ============================================================
   TƯƠNG TÁC (danh sách phòng) + PHÒNG CHAT — chỉ đổi kiểu dáng
   ============================================================ */
#app #tt-than .tc-nhom-phong{ margin:0 16px; border:0; box-shadow:var(--gd-bong); }
#app #tt-than .tc-phong{ min-height:78px; padding:14px; }
#app #tt-than .tc-av-nhom{ width:48px; height:48px; border-radius:15px; background:var(--gd-tim-nhat); color:var(--gd-tim); font-size:16px; }
#app #tt-than .tc-av-nhom-xam{ background:#EEF0F3; color:var(--muc-3); }
#app #tt-than .tc-dem{ background:var(--nhan); }
#app #tt-than .tc-dem-xam{ background:var(--muc-3); }
#app #tt-than .tc-goi-y{ margin:0 16px 4px; border:0; }

#app .man-phong-chat{ --tc-nen:#E9EEF6; --tc-bong-toi:#D8E5FF; }
#app .man-phong-chat .tc-dau{
  background:var(--mat); color:var(--muc); border-bottom:1px solid var(--ke);
  min-height:60px; padding:calc(env(safe-area-inset-top) + 6px) 8px 6px 4px;
}
#app .man-phong-chat .tc-dau .tc-ic{ width:44px; height:44px; color:var(--nhan); }
#app .man-phong-chat .tc-dau .tc-ic:active{ background:var(--nen); }
#app .man-phong-chat .tc-dau .tc-ic[data-tc="thong-tin"]{ color:var(--muc-2); background:var(--nen); border-radius:50%; }
#app .man-phong-chat .tc-av-nhom-nho{ width:38px; height:38px; border-radius:12px; background:var(--gd-tim-nhat); color:var(--gd-tim); }
#app .man-phong-chat .tc-dau-chu b{ font-size:15.5px; }
#app .man-phong-chat .tc-dau-chu span{ color:var(--muc-2); opacity:1; }
#app .man-phong-chat .tc-chuong-dau{ color:var(--muc-3); }
#app .man-phong-chat .tc-ghim{ background:rgba(255,255,255,.96); }
#app .man-phong-chat .tc-ngay span{ background:rgba(16,19,25,.08); color:var(--muc-2); }
#app .man-phong-chat .tc-bong{ border-radius:18px 18px 18px 6px; padding:8px 12px 6px; }
#app .man-phong-chat .tc-bong-toi{ border-radius:18px 18px 6px 18px; }
#app .man-phong-chat .tc-soan{ gap:6px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 4px; }
#app .man-phong-chat .tc-o-soan{ min-height:42px; border:0; border-radius:21px; background:var(--nen); padding:10px 14px; }
#app .man-phong-chat .tc-o-soan:focus{ box-shadow:inset 0 0 0 1.5px var(--nhan); background:var(--mat); }
#app .man-phong-chat .tc-nut-emoji, #app .man-phong-chat .tc-nut-gui{ width:44px; height:44px; }

/* ============================================================
   THÔNG BÁO (danh sách + chi tiết trên điện thoại)
   ============================================================ */
#app .tbao-doc-het{ height:44px; }
#app .tbao-loc{ gap:7px; padding:4px 16px 8px; overflow-x:auto; scrollbar-width:none; }
#app .tbao-loc::-webkit-scrollbar{ display:none; }
#app .tbao-loc button{ flex:none; height:38px; padding:0 14px; border:0; box-shadow:inset 0 0 0 1px var(--ke-2); }
#app .tbao-loc button.dang{ box-shadow:none; }
#app .tbao-nhom{ padding:12px 20px 7px; }
#app .tbao-ds .tbao-dong{ width:calc(100% - 32px); margin:0 16px; border-bottom:0; border-top:1px solid var(--ke); padding:14px 32px 14px 14px; }
#app .tbao-ds .tbao-nhom + .tbao-dong{ border-top:0; border-radius:var(--bo-the) var(--bo-the) 0 0; }
/* :last-child tách riêng khỏi :has(): máy chưa có :has() (Safari < 15.4, Chrome < 105)
   bỏ CẢ luật nếu chung danh sách, mất luôn góc bo dòng cuối. */
#app .tbao-ds .tbao-dong:last-child{ border-radius:0 0 var(--bo-the) var(--bo-the); }
#app .tbao-ds .tbao-dong:has(+ .tbao-nhom){ border-radius:0 0 var(--bo-the) var(--bo-the); }
#app .tbao-ds .tbao-nhom + .tbao-dong:last-child{ border-radius:var(--bo-the); }
#app .tbao-ds .tbao-nhom + .tbao-dong:has(+ .tbao-nhom){ border-radius:var(--bo-the); }
#app .tbao-ds .tbao-dong.moi{ background:var(--mat); }
#app .tbao-bieu{ width:40px; height:40px; border-radius:12px; }
#app .tbao-bieu.qt{ background:var(--canh-nhat); color:var(--canh); }
#app .tbao-qt{ color:var(--canh); background:var(--canh-nhat); }
#app .tbao-than-ct{ background:var(--nen); }
#app .tbao-ct{ margin:4px 16px 16px; padding:18px; background:var(--mat); border-radius:var(--bo-the); box-shadow:var(--gd-bong); }
#app .tbao-ct h3{ font-size:21px; }

/* ============================================================
   THIẾT LẬP
   ============================================================ */
#app .gd-ho-so{ display:flex; align-items:center; gap:14px; }
#app .gd-av{ width:58px; height:58px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--nhan-nhat); color:var(--nhan-dam); font-size:20px; font-weight:800; }
#app .gd-ho-so-chu{ flex:1; min-width:0; }
#app .gd-ho-so-chu b{ display:block; font-size:18px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-ho-so-chu small{ display:block; margin-top:1px; font-size:13px; color:var(--muc-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app .gd-ho-so .cv-badge{ flex:none; align-self:flex-start; }
#app .gd-ho-so .cv-badge:empty{ display:none; }
#app .gd-goi{ display:block; margin-top:14px; padding:12px 14px; border-radius:14px; background:var(--gd-tim-nhat); }
#app .gd-goi[hidden]{ display:none; }
#app .gd-goi b{ display:block; font-size:14px; color:var(--gd-tim); }
#app .gd-goi small{ display:block; font-size:12px; color:#5B3A99; }
#app .gd-goi .gd-thanh{ background:rgba(124,58,237,.15); margin-top:8px; }
#app .gd-goi .gd-thanh i{ background:var(--gd-tim); }
#app .gd-goi--trial{ background:var(--canh-nhat); }
#app .gd-goi--trial b, #app .gd-goi--trial small{ color:var(--canh); }
#app .gd-goi--trial .gd-thanh{ background:rgba(178,106,0,.15); }
#app .gd-goi--trial .gd-thanh i{ background:var(--canh); }
#app .gd-goi--pro{ background:var(--nhan-nhat); }
#app .gd-goi--pro b, #app .gd-goi--pro small{ color:var(--nhan-dam); }
#app .gd-goi--pro .gd-thanh{ background:rgba(37,99,235,.15); }
#app .gd-goi--pro .gd-thanh i{ background:var(--nhan); }
/* Close Beta đi kèm khi đã mua Pro (27/09/2026): 1 dòng dưới thanh còn lại, kẻ mảnh ngăn cách */
#app .gd-goi .gd-goi-kem{ margin-top:9px; padding-top:8px; border-top:1px solid rgba(27,69,184,.14); }
/* "Yêu cầu xoá tài khoản": nút nhẹ dạng chữ dưới thẻ Tài khoản, vùng chạm ≥ 44px */
#app .gd-nut-xoa-tk{
  display:block; min-height:44px; margin:0 auto; padding:0 16px; border:0; background:none;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--muc-3); cursor:pointer; touch-action:manipulation;
}
#app .gd-nut-xoa-tk:active{ opacity:.6; }
#app .gd-dong-bo{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:var(--muc-2); }
#app .gd-dong-bo i{ width:7px; height:7px; flex:none; border-radius:50%; background:var(--tot); }
#app #tk-ghi{ margin-top:10px; }
#app #tk-ghi:empty{ display:none; }
#app #man-thong-tin-bg .o-nhom{ margin:0 16px 14px; }
#app #man-thong-tin-bg .o{ height:50px; border:0; box-shadow:inset 0 0 0 1.5px var(--ke-2); }
#app #man-thong-tin-bg .o:focus{ box-shadow:inset 0 0 0 2px var(--nhan); }
#app .gd-xem-ten{ margin:0 16px; padding:12px 14px; border-radius:12px; background:var(--mat); box-shadow:var(--gd-bong); font-size:13px; line-height:1.55; color:var(--muc-2); }
#app .gd-xem-ten b{ color:var(--muc); }
#app .dock--doc{ background:rgba(255,255,255,.95); }


/* ============================================================
   TẤM / HỘP GẮN VÀO <body> — chỉ khi đang ở giao diện điện thoại
   ============================================================ */
/* Tấm KHUNG.moTam: từ hộp giữa màn thành tấm trượt lên từ đáy (bottom sheet) */
body:not(.dt-che-do) .phu-nen{ background:rgba(16,19,25,.34); }
body:not(.dt-che-do) .tam{
  left:0; right:0; top:auto; bottom:0; width:100%; max-width:none; max-height:calc(100% - 40px);
  border:0; border-radius:26px 26px 0 0; padding:10px 0 calc(18px + env(safe-area-inset-bottom));
  transform:translateY(100%); opacity:1; visibility:hidden;
  transition:transform .34s var(--duong-cong), visibility 0s linear .34s;
  box-shadow:0 -12px 40px -18px rgba(16,19,25,.35);
}
body:not(.dt-che-do) .tam.mo{ transform:none; visibility:visible; transition:transform .34s var(--duong-cong), visibility 0s; }
body:not(.dt-che-do) .tam::before{ content:""; display:block; width:38px; height:5px; border-radius:3px; background:#D6D9E0; margin:0 auto 14px; }
body:not(.dt-che-do) .tam .tam-tieu-de{ font-size:19px; font-weight:800; letter-spacing:-.01em; text-align:left; padding:0 20px 12px; }
body:not(.dt-che-do) .tam .tam-muc{ min-height:56px; padding:12px 20px; }
body:not(.dt-che-do) .tam .sp-o{ font-size:22px; border:0; box-shadow:inset 0 0 0 1.5px var(--ke-2); background:var(--mat); }
body:not(.dt-che-do) .tam .sp-o:focus{ box-shadow:inset 0 0 0 2px var(--nhan); }
body:not(.dt-che-do) .tam .sp-nut .nut--chinh{ height:52px; }
body:not(.dt-che-do) .tam .sp-nut .nut--nhe{ min-height:44px; }
body:not(.dt-che-do) .tam .chon-2 .nut{ height:50px; }
body:not(.dt-che-do) .tam .tich{ min-height:44px; }
body:not(.dt-che-do) .tam .gd-menu-tam{ padding:0 20px; }
body:not(.dt-che-do) .tam .gd-o-dai{ height:auto; min-height:110px; padding:12px 14px; line-height:1.5; resize:none; margin-top:12px; font-weight:500; }
body:not(.dt-che-do) .gd-nut-do{ background:var(--loi); color:#fff; }
body:not(.dt-che-do) .gd-nut-do:active{ background:#B91C1C; }

/* Hộp "Thêm/Xoá phiên bản" (km-them-tam) — cùng dáng tấm đáy */
body:not(.dt-che-do) .km-them-tam{ border-radius:26px 26px 0 0; padding-top:12px; }
body:not(.dt-che-do) .km-them-tay{ width:38px; height:5px; background:#D6D9E0; margin-bottom:14px; }
body:not(.dt-che-do) .km-them-tieu{ font-size:19px; }
body:not(.dt-che-do) .km-them-nut .nut{ height:50px; }

/* Hộp nổi "Quan trọng" */
body:not(.dt-che-do) .tbao-hop{ border-radius:26px; text-align:left; padding:22px 20px 18px; }
body:not(.dt-che-do) .tbao-hop .tbao-bieu{ display:none; }
body:not(.dt-che-do) .tbao-hop .tbao-qt{ font-size:11.5px; padding:4px 9px; border-radius:7px; margin-bottom:12px; color:var(--canh); background:var(--canh-nhat); }
body:not(.dt-che-do) .tbao-hop h3{ font-size:20px; line-height:1.3; }
body:not(.dt-che-do) .tbao-hop .tbao-nd{ font-size:14.5px; }
body:not(.dt-che-do) .tbao-hop .tbao-nut{ height:50px; }
body:not(.dt-che-do) .tbao-hop .tbao-nut-phu{ height:48px; }

/* Toast: nổi trên thanh đáy. Màu/viền/biểu tượng kiểu B nền nhạt dùng chung với máy tính (khung.css, 27/09/2026) */
body:not(.dt-che-do) #toast-vung{
  top:var(--toast-tren, auto); bottom:var(--toast-duoi, calc(96px + env(safe-area-inset-bottom))); padding:0 16px;
}
body:not(.dt-che-do) .toast{ font-size:14px; padding:12px 14px; }
/* Toast không đè nút ở đáy màn hình (Gói E, 27/09/2026). 96px ở trên đã vượt thanh tab + dock 1 hàng nút (74px); dock cao
   hơn thì đẩy vùng toast lên ngay trên dock: báo giá (dòng "Mẫu ảnh" + Tạo ảnh · Zalo · PDF, 114px), xem ảnh (2 hàng nút,
   138px). Tấm đáy đang mở (nút nằm cuối tấm) → toast lên đầu màn hình, trượt xuống. :has() chỉ đặt BIẾN (không đặt thẳng
   bố cục): máy chưa có :has() (iOS < 15.4, Chrome < 105) bỏ qua luật, toast giữ chỗ cũ như trước bản này. */
body:not(.dt-che-do):has(#app > .man.hien > .gd-dock-bg){ --toast-duoi:calc(126px + env(safe-area-inset-bottom)); }
body:not(.dt-che-do):has(#app > .man.hien > .dock--anh){ --toast-duoi:calc(150px + env(safe-area-inset-bottom)); }
body:not(.dt-che-do):has(.tam.mo){ --toast-tren:calc(12px + env(safe-area-inset-top)); --toast-duoi:auto; --toast-lech:-10px; }
body:not(.dt-che-do):has(.km-them-tam.mo){ --toast-tren:calc(12px + env(safe-area-inset-top)); --toast-duoi:auto; --toast-lech:-10px; }
/* Thanh sửa của bảng khuyến mãi đang mở (đáy màn): toast lên đầu màn, không đè nút của thanh */
body:not(.dt-che-do):has(#app .kmb-thanh:not([hidden])){ --toast-tren:calc(12px + env(safe-area-inset-top)); --toast-duoi:auto; --toast-lech:-10px; }

/* Review vòng 1 */
/* ---------- Review vòng 2 ---------- */
/* Trang Xe: [Chào Tuấn] [pill gói] / [📍 đại lý] (Vũ chốt). Tên dài thì lời chào
   rút "…", pill luôn hiện đủ; đại lý chiếm trọn dòng dưới. */
#app .gd-tren-xe{ align-items:center; }
#app .gd-chao-hang{ display:flex; align-items:center; gap:8px; min-width:0; }
#app .gd-chao-hang .gd-tieu{ min-width:0; flex:0 1 auto; }
#app .gd-chao-hang .cv-badge{ flex:none; font-size:11.5px; padding:3px 9px; cursor:pointer; }
#app .gd-chao-hang .cv-badge:empty{ display:none; }
#app .gd-tren-daily{ margin:3px 0 0; }
#app .gd-tren-daily #tc-daily{ flex:1; }

/* Ảnh xe LUÔN hiện trọn chiếc (không cắt): ảnh gốc 640×480 (4:3, nền trong
   suốt; ảnh sale tự thêm cũng cắt sẵn 640×480) → khung 4:3 + contain + đệm. */
/* ☠️ img phải nằm tuyệt đối phủ đúng khung: để img là ô lưới (display:grid của
   khung) thì height:100% không bám khung mà giãn theo tỉ lệ ảnh → bị overflow
   của khung cắt mất phần dưới (đúng lỗi "mất bánh xe" Vũ báo). */
#app .gd-anh-xe img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:4%; }
/* ☠️ Khung 4:3 của thẻ xe KHÔNG dùng aspect-ratio (26/09/2026): khung chỉ có con
   position:absolute (không có nội dung trong luồng), lại nằm trong <button> flex +
   ô lưới → Safari/WebKit trước 16.4 (iPhone iOS 16.1 của Vũ) tính cao = 0, thẻ chỉ
   còn tên + giá, mất hẳn ảnh xe. Dùng mẹo đệm %: padding-top % luôn tính theo BỀ
   RỘNG khung chứa → 75% = 4:3, chạy trên mọi Safari/Chrome cũ; đệm không bị flex
   co lại. Con svg (xe chưa có ảnh) đặt tuyệt đối, căn giữa như cũ.
   test/kiem-tuong-thich.js chặn quay lại aspect-ratio ở đây. */
#app .gd-xe-the .gd-anh-xe{ height:0; padding-top:75%; }
#app .gd-xe-the .gd-anh-xe > svg{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
#app .gd-pb-hero .gd-anh-xe{ width:100%; height:clamp(180px, 58vw, 280px); }
/* Màn rộng hơn điện thoại (tablet dọc < 1024px): lưới xe thêm cột để ảnh không quá to */
@media (min-width:600px){ #app .gd-xe-luoi{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:860px){ #app .gd-xe-luoi{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
#app .gd-bg-nho .gd-anh-xe{ width:64px; height:48px; }
#app .gd-bg-xe-anh{ width:104px; height:78px; }
#app .gd-anh-xe img[src^="data:"]{ padding:0; }   /* ảnh sale tự chụp: đã đúng 4:3, không cần đệm */

/* Thanh trên luôn nền đặc; khi nội dung đã cuộn thì thêm viền + bóng mảnh */
#app .man > .thanh-tren{ position:relative; z-index:3; background:var(--nen); transition:box-shadow var(--nhanh); }
#app .man.gd-da-cuon > .thanh-tren{ box-shadow:0 1px 0 var(--ke-2), 0 8px 16px -12px rgba(16,19,25,.28); }
/* Pill lọc đang chọn: màu nhấn xanh (như trang quản trị), không dùng đen */
#app .tbao-loc button.dang{ background:var(--nhan); border-color:var(--nhan); color:#fff; box-shadow:none; }
/* Thiết lập: huy hiệu gói ẩn khi đã có thẻ gói bên dưới (JS gắn hidden) */
#app .gd-ho-so .cv-badge[hidden]{ display:none; }

/* ===== GÓI A: xổ/gọn + cuộn ===== */
/* Chiều cao khối mở/gập do GD_XO (cuối man-xe.js) chạy bằng số đo thật px → px,
   cùng 1 vòng rAF với cú cuộn bù (giữ đầu khối trong màn, không để thanh đáy
   che phần vừa mở). CSS ở đây chỉ lo: ẩn/hiện, mờ + trượt nhẹ nội dung, xoay
   mũi tên — cùng nhịp .28s + đường cong iOS (--duong-cong). Phần hiệu ứng thị
   giác chỉ dùng opacity/transform (chạy trên compositor). */

/* Nhóm báo giá (Giá xe & ưu đãi, Quà tặng, Thông tin đăng ký, Chi phí, Lộ trình).
   Đệm đáy 14px chuyển thành ::after để bị cắt gọn theo chiều cao khi gập —
   padding thật làm khối không co về 0 được (box-sizing:border-box). */
#app .gd-muc-than{
  padding-bottom:0;
  transition:opacity .2s ease, transform .28s var(--duong-cong);
}
#app .gd-muc-than::after{ content:""; display:block; height:14px; }
#app .gd-muc.mo .gd-muc-than,
#app .gd-muc.gd-xo-dong .gd-muc-than{ display:flow-root; animation:none; }
#app .gd-muc.gd-xo-dong .gd-muc-than{ opacity:0; transform:translateY(-6px); }
#app .gd-muc.gd-xo-chay.mo .gd-muc-than{ animation:gdXoVao .28s var(--duong-cong) both; }
#app .gd-muc-mui{ transition:transform .28s var(--duong-cong); }
@keyframes gdXoVao{ from{ opacity:0; transform:translateY(-6px); } }
@keyframes gdXoMo{ from{ opacity:0; } }


/* Lịch trả theo năm (trang Tính trả góp): các năm sau năm 3 hiện/ẩn mờ dần */
#app #mt-tg-nam.gd-xo-chay:not(.gd-xo-dong) .gd-lich-them{ animation:gdXoMo .28s ease both; }
#app #mt-tg-nam.gd-xo-dong .gd-lich-them{ opacity:0; transition:opacity .2s ease; }

/* Trong lúc chạy: tắt neo cuộn tự động của Chrome/Android để không "giành"
   scrollTop với cú cuộn bù (Safari không có tính năng này). */
#app .than.gd-xo-cuon{ overflow-anchor:none; }

/* Tấm đáy: nền mờ cùng nhịp với tấm (trước .16s — nền tắt xong khi tấm mới
   bắt đầu trượt); hộp Thêm/Xoá phiên bản dùng cùng đường cong với tấm chung. */
body:not(.dt-che-do) .phu-nen{ transition:opacity .3s var(--duong-cong); }
body:not(.dt-che-do) .km-them-nen{ transition:opacity .3s var(--duong-cong); }
body:not(.dt-che-do) .km-them-tam{ transition:transform .34s var(--duong-cong); }

@media (prefers-reduced-motion: reduce){
  #app .gd-muc-than, #app .gd-muc-mui,
  #app #mt-tg-nam .gd-lich-them{ transition:none; animation:none !important; }
  #app .gd-dg--lai, #app .gd-tg-lon-nam2{ transition:none; }
  body:not(.dt-che-do) .phu-nen, body:not(.dt-che-do) .km-them-nen,
  body:not(.dt-che-do) .tam, body:not(.dt-che-do) .km-them-tam{ transition-duration:.01s; }
  #app .kmb-thanh-trong{ animation:none !important; }
}

/* ============================================================
   TỈ LỆ HIỂN THỊ ĐIỆN THOẠI (29/09/2026), xem js/ti-le.js
   · Hàng chọn mức trong Thiết lập (thanh phân đoạn .gd-doan sẵn có).
   · html.ti-le-doi: vừa đổi mức → #app hiện lại mờ → rõ cho êm (tắt khi reduced-motion).
   · html.ti-le-lon (đang thu nhỏ, k > 1; chỉ có trên điện thoại, không bao giờ trên máy tính/máy tính bảng):
     nâng các chữ nhỏ nhất (< 12px) lên 13px để ở 130% cỡ thật trên màn vẫn ≈ 10px. Chỉ đổi cỡ chữ, không đổi bố cục.
     Không đụng ảnh báo giá/bản in (ah-*, av-*, #in-khung...): chúng có CSS riêng, cỡ cố định.
   ============================================================ */
#app .gd-ti-le{ padding:10px 0 14px; border-top:1px solid var(--ke); }
#app .gd-ti-le > span small{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--muc-3); }
html.ti-le-doi #app{ animation:tiLeHien var(--vua) var(--duong-cong) both; }
@keyframes tiLeHien{ from{ opacity:.35; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ html.ti-le-doi #app{ animation:none; } }

/* thanh tab dưới */
html.ti-le-lon #app .thanh-tab a,
html.ti-le-lon #app .thanh-tab a[data-man="khuyen-mai"]{ font-size:13px; }
/* nhãn, badge */
html.ti-le-lon #app .gd-badge,
html.ti-le-lon #app .gd-the-nho,
html.ti-le-lon #app .gd-xe-km,
html.ti-le-lon #app .gd-dem,
html.ti-le-lon #app .gd-chao-hang .cv-badge,
html.ti-le-lon #app .gd-tren-nho .cv-badge,
html.ti-le-lon #app .mpc-nhan-pro,
html.ti-le-lon .mpc-nhan-pro{ font-size:13px; }
/* chọn phiên bản, báo giá */
html.ti-le-lon #app .gd-pb-lb small,
html.ti-le-lon #app .gd-pb-so small,
html.ti-le-lon #app .gd-tong-hai span,
html.ti-le-lon #app .gd-nut-vuong,
html.ti-le-lon #app .mt-phi-ghi,
html.ti-le-lon #app .mt-xe-chon-nhan,
html.ti-le-lon #app .mt-chon-gon-nhan,
html.ti-le-lon #app .mt-chon-gon small,
html.ti-le-lon #app .the-dong--sua .nhan::after{ font-size:13px; }
/* trả góp + bảng trả góp tháng */
html.ti-le-lon #app .gd-tg-lon-ba span,
html.ti-le-lon #app .gd-dg--lai > span:first-child small,
html.ti-le-lon #app .gd-bang-tg th,
html.ti-le-lon #app .gd-bang-tg td small,
html.ti-le-lon #app .bang-hang.tieu-de,
html.ti-le-lon #app .bang-tom-tat-chinh span,
html.ti-le-lon #app .bang-tom-tat-luoi span,
html.ti-le-lon #app .bang-tom-tat-chinh em{ font-size:13px; }
/* Cài đặt khuyến mãi: bảng + thanh sửa; Chi phí lăn bánh */
html.ti-le-lon #app .kmb-hang--dau,
html.ti-le-lon #app .kmb-o--ten small,
html.ti-le-lon #app .kmb-giam small,
html.ti-le-lon #app .kmb-bh,
html.ti-le-lon #app .kmb-con,
html.ti-le-lon #app .kmb-nut--mui,
html.ti-le-lon #app .cp-nhom,
html.ti-le-lon #app .cp-dau span{ font-size:13px; }
/* Thiết lập, trò chuyện (tab VIP có CSS riêng goi-pro.css, không nâng ở đây) */
html.ti-le-lon #app .kh-ghi,
html.ti-le-lon #app .kh-may-nhan,
html.ti-le-lon #app .tc-gio,
html.ti-le-lon #app .tc-cx em,
html.ti-le-lon #app .tc-da-xem span,
html.ti-le-lon #app .tc-ghim-noi small,
html.ti-le-lon #app .tc-gds-hang time,
html.ti-le-lon #app .tc-bao-them{ font-size:13px; }