/* =====================================================================
GIAO DIỆN ĐIỆN THOẠI — assets/dien-thoai.css
---------------------------------------------------------------------
Nạp SAU styles.css. Mọi luật trong file này nằm trong
@media (max-width:600px) nên máy tính và iPad không đụng tới một dòng.
VÌ SAO TÁCH FILE RIÊNG. `styles.css` đang 138 KB. Nhét thêm phần điện
thoại vào đó thì không ai soi được thay đổi, và lỡ hỏng là hỏng cả ba
thiết bị. Tách ra thì xoá một thẻ là quay về nguyên trạng.
ĐO ĐƯỢC TRƯỚC KHI SỬA (khổ 412×915, đo 15/09/2026):
· tài liệu rộng 461px trên khổ 412 — CUỘN NGANG được 49px
· thanh điều hướng 0×0 — biến mất hẳn, chỉ còn nút ba gạch 40×40
· 16/187 ô bấm dưới 44px
· 321px bộ lọc trước khi thấy chiếc xe đầu tiên = 35% màn hình
BỐI CẢNH DÙNG. Sale đứng cạnh xe, một tay cầm điện thoại, khách đứng
bên. Việc cần làm: tra giá, tính lăn bánh, trả lời "mỗi tháng bao
nhiêu". Nên ba nguyên tắc:
1. Chiếc xe và con số tiền là thứ DUY NHẤT được giành sự chú ý.
2. Hai chạm là tới bất kỳ con số nào.
3. Thứ ngón cái cần không nằm ở nửa trên màn hình.
===================================================================== */
@media (max-width: 600px) {
:root {
--dt-tab: 60px; /* thanh tab dưới */
--dt-cham: 44px; /* ô bấm nhỏ nhất — chuẩn cảm ứng */
}
/* ---------------------------------------------------------------
1. CHẶN CUỘN NGANG
`body{overflow-x:hidden}` KHÔNG đủ: phần tử vẫn cuộn được,
nên trang vẫn trượt ngang 49px. Phải chặn ở cả hai.
--------------------------------------------------------------- */
html { overflow-x: hidden; }
/* Nhóm nút bên phải thanh tiêu đề. `dungChoDienThoai()` trong app.js
đã chuyển hai ô chọn và nút đổi nền vào ngăn kéo, NHƯNG bỏ quên nút
#nutBC mở chúng — nút đó ở lại một mình, bị đẩy ra x=417 tức ngoài
khổ 412. Đây chính là 49px tràn. Ẩn hẳn: mọi thứ nó mở đã nằm trong
ngăn kéo rồi. */
header .thanh-phai { display: none; }
/* ---------------------------------------------------------------
2. THANH TAB DƯỚI
Thay cho nút ba gạch đơn độc. Bốn tab dùng hằng ngày khi đứng cạnh
xe — đúng thứ tự quy trình bán 1·2·3 — cộng "Thêm" mở ngăn kéo cho
sáu tab còn lại. Ngăn kéo vẫn là nguồn duy nhất giữ danh sách tab,
không nhân đôi.
--------------------------------------------------------------- */
.dt-tab {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: grid; grid-template-columns: repeat(5, 1fr);
background: var(--card);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.dt-tab button {
all: unset;
/* `all:unset` đưa box-sizing về content-box, nên padding cộng thêm
ngoài min-height làm thanh cao 72px thay vì 60px. Đặt lại. */
box-sizing: border-box;
/* `relative` là BẮT BUỘC. Vạch chỉ báo và huy hiệu đếm dùng
position:absolute; nút để static thì chúng neo vào cả thanh .dt-tab
chứ không vào nút. Trước đây nó hiện đúng chỗ chỉ vì trình duyệt rơi
về "vị trí tĩnh" — đúng do may, không do thiết kế, và vỡ ngay khi
thêm bất kỳ phần tử nào. */
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
min-height: var(--dt-tab);
padding: 7px 2px;
color: var(--tx3);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Icon nằm trong một ô tròn. Tab đang mở thì ô đó sáng lên — nhìn một
cái là thấy mình đang ở đâu, rõ hơn hẳn một vạch 2px. */
.dt-tab button svg {
width: 21px; height: 21px; flex: none;
box-sizing: content-box;
padding: 3px 14px;
border-radius: 999px;
transition: background-color .15s ease;
}
.dt-tab button .dt-nhan {
font-size: 10px; font-weight: 700; line-height: 1;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dt-tab button[aria-current="page"] { color: var(--acc2); }
.dt-tab button[aria-current="page"] svg { background: rgba(92,178,255,.16); }
.dt-tab button[aria-current="page"] .dt-nhan { font-weight: 800; }
body.sang .dt-tab button[aria-current="page"] { color: var(--acc); }
body.sang .dt-tab button[aria-current="page"] svg { background: rgba(15,111,208,.12); }
/* Huy hiệu đếm việc — mượn lại con số app đã tính, không tính lại.
Neo bằng top/right thật, không bằng margin âm. */
.dt-tab .dt-dem {
position: absolute; top: 4px; right: 50%; margin-right: -26px;
min-width: 17px; height: 17px; padding: 0 4px;
border-radius: 999px; background: var(--bad); color: #fff;
font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}
/* Chừa chỗ cho thanh tab, không để nó che dòng cuối */
body { padding-bottom: calc(var(--dt-tab) + env(safe-area-inset-bottom, 0px)); }
/* Nút ba gạch cũ không còn việc — "Thêm" thay nó */
header .menu { display: none; }
/* ---------------------------------------------------------------
3. THANH TIÊU ĐỀ GỌN LẠI
Còn đúng hai thứ: nhận diện và tên màn đang mở.
--------------------------------------------------------------- */
header .topbar { gap: 10px; }
/* Logo thu nhỏ. Đo được: hai chữ hãng cao 16px chiếm 274px trên khổ
412, chỉ chừa 36px cho tên màn — mà tên màn cần 115px, nên nó bị cắt
còn "Tư …". Hạ xuống 11px thì cụm logo còn ~188px, tên màn đủ chỗ.
KHÔNG dùng transform:scale() — transform không làm giảm chiều rộng
trong bố cục, nên tên màn vẫn bị cắt y như cũ. Phải đổi chiều cao
thật của ảnh. */
/* 19/09/2026 bỏ logo Lynk & Co khỏi đầu trang, dư ra ~90px — dùng chỗ đó
cho TÊN MÀN (13.5 -> 15.5px). Logo GIỮ cỡ cũ 11px: chủ showroom muốn
chữ tab to hơn, không phải logo. Vạch ngăn hai thứ. */
header .bm-logo { flex: none; }
header .bm-logo img { height: 11px; }
header .bm-logo i { height: 18px; margin: 0 2px 0 6px; }
header .dt-hien {
flex: 1 1 auto; min-width: 0;
font-size: 15.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Thông báo đồng bộ phải nổi TRÊN thanh tab, không nằm dưới nó */
#syncToast.synctoast {
bottom: calc(var(--dt-tab) + 12px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ---------------------------------------------------------------
4. BỘ LỌC GẤP LẠI — tab Tư vấn
Trước: 321px bộ lọc trước chiếc xe đầu tiên. Nay một thanh 52px;
bấm "Lọc" mới mở tấm trượt từ dưới lên. Con số trên nút cho biết
đang bật mấy điều kiện, để không ai quên mình đang lọc.
--------------------------------------------------------------- */
#locThanh { display: none; }
#locThanh.dt-mo { display: flex; }
/* Dòng "14 dòng xe — chọn điều kiện phía trên để lọc…" giờ vừa SAI vừa
THỪA trên điện thoại: bộ lọc không còn nằm "phía trên" mà nấp sau nút
Lọc, còn con số thì đã hiện ngay trên thanh lọc. Hai dòng chữ hoa đó
đẩy chiếc xe đầu tiên xuống thêm 44px mà không nói thêm điều gì. */
#tuvanTom { display: none; }
.dt-locbar {
position: sticky; top: 0; z-index: 30;
display: flex; gap: 8px; align-items: center;
padding: 6px 10px;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.dt-locbar button {
all: unset; box-sizing: border-box;
display: inline-flex; align-items: center; gap: 7px;
min-height: var(--dt-cham); padding: 0 14px;
border: 1px solid var(--line2); border-radius: 10px;
background: var(--card); color: var(--tx);
font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.dt-locbar button[data-bat="1"] {
border-color: var(--acc); color: var(--acc2); background: transparent;
}
body.sang .dt-locbar button[data-bat="1"] { color: var(--acc); }
.dt-locbar .dt-locdem {
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--acc); color: #fff;
font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
}
.dt-locbar .dt-locso { margin-left: auto; color: var(--tx3); font-size: 12px; font-weight: 600; }
/* Tấm trượt chứa bộ lọc đầy đủ */
.dt-tam { position: fixed; inset: 0; z-index: 95; display: none; }
.dt-tam[data-mo="1"] { display: block; }
.dt-tam-nen { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.dt-tam-than {
position: absolute; left: 0; right: 0; bottom: 0;
max-height: 82vh; overflow: auto; overscroll-behavior: contain;
background: var(--card);
border-top: 1px solid var(--line);
border-radius: 16px 16px 0 0;
padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
}
.dt-tam-dau {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 10px; margin: -10px -12px 10px; padding: 12px;
background: var(--card); border-bottom: 1px solid var(--line);
}
.dt-tam-dau b { font-size: 15px; }
.dt-tam-dau button {
all: unset; display: inline-flex; align-items: center; justify-content: center;
min-width: var(--dt-cham); min-height: var(--dt-cham);
border-radius: 10px; color: var(--tx2); font-size: 20px; cursor: pointer;
}
/* Danh sách sáu tab còn lại trong tấm "Thêm". Mỗi mục là một hàng đầy
chiều ngang cao 52px — kiểu danh sách của điện thoại, không phải lưới
icon nhỏ. Tên đầy đủ, không cắt chữ. */
.dt-them-ds { display: flex; flex-direction: column; gap: 2px; }
.dt-them-muc {
all: unset; box-sizing: border-box;
display: flex; align-items: center; gap: 13px;
width: 100%; min-height: 52px; padding: 0 4px;
border-radius: 10px;
color: var(--tx); font-size: 15px; font-weight: 600;
cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.dt-them-muc + .dt-them-muc { border-top: 1px solid var(--line); border-radius: 0; }
.dt-them-muc svg { width: 20px; height: 20px; flex: none; color: var(--tx3); }
.dt-them-muc span { flex: 1 1 auto; min-width: 0; }
.dt-them-dem {
flex: none; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--bad); color: #fff;
font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
font-style: normal;
}
/* Bộ chọn phần (Lăn bánh · Trả góp · Cả bộ) — trên máy tính là hộp giữa
màn, trên điện thoại thành tấm trượt ghim ĐÁY cho ngón cái với tới, cùng
kiểu với tấm Lọc và tấm "Màn hình khác". Mỗi lựa chọn cao ≥ 56px. */
dialog.chon-phan {
width: 100%; max-width: 100%;
margin: auto 0 0; top: auto; bottom: 0; left: 0; right: 0;
border-radius: 16px 16px 0 0;
border-left: 0; border-right: 0; border-bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chon-phan-muc { min-height: 56px; padding: 12px 18px; }
.chon-phan-x { width: var(--dt-cham); height: var(--dt-cham); }
/* Nút đóng ở đáy tấm lọc — chỗ ngón cái với tới dễ nhất */
.dt-tam-xong {
all: unset; box-sizing: border-box;
display: block; width: 100%; margin-top: 12px;
min-height: 50px; padding: 0 16px;
border-radius: 12px;
background: var(--acc); color: #fff;
font-size: 15px; font-weight: 700; text-align: center; line-height: 50px;
cursor: pointer;
}
/* Bộ lọc khi nằm trong tấm trượt: xếp dọc, mỗi ô đủ to để bấm */
.dt-tam #locThanh {
display: flex; flex-direction: column; align-items: stretch;
gap: 10px; padding: 0; border: 0; background: none;
}
.dt-tam #locThanh > * { width: 100%; }
.dt-tam #locThanh select,
.dt-tam #locThanh input { min-height: var(--dt-cham); font-size: 15px; }
/* ---------------------------------------------------------------
4b. CHỮ — BỎ BỨC TƯỜNG CHỮ HOA
Đếm được trên tab Báo giá: 17 nhãn `label.lbl` và 2 `div.sect-title`
đều bị `text-transform:uppercase`. Xếp chồng trên một màn 412px thì
thành một bức tường chữ hoa — khó đọc hơn chữ thường (mất đường viền
trên dưới của chữ, mắt phải đọc từng ký tự), tốn chiều ngang hơn, và
làm mọi nhãn hét lên như nhau nên không còn thứ bậc nào.
Chữ trong HTML vốn viết thường, chỉ bị CSS ép hoa — nên bỏ ép là ra
ngay "Tên khách hàng" thay vì "TÊN KHÁCH HÀNG", không phải sửa chữ.
CHỈ áp trên điện thoại. Máy tính có chiều ngang rộng và người dùng
ngồi xa hơn, chữ hoa nhỏ ở đó vẫn làm tốt việc phân nhóm.
--------------------------------------------------------------- */
.panel label.lbl,
.dt-tam label.lbl {
text-transform: none;
letter-spacing: 0;
font-size: 12.5px;
font-weight: 600;
color: var(--tx2);
}
.panel .sect-title {
text-transform: none;
letter-spacing: -.2px;
font-size: 15px;
font-weight: 800;
color: var(--tx);
}
/* Nhãn nhỏ đặt trên một con số — "Giá niêm yết từ", "Lăn bánh", "Trần
vay"… Có 21 chỗ chỉ riêng trên tab Tư vấn và So sánh, phần lớn nằm
ngay trên thẻ xe. Chữ gốc trong mã vốn viết thường, chỉ bị CSS ép hoa.
AN TOÀN với tên hãng đối thủ: "BYD", "VINFAST"… đã viết hoa sẵn trong
`data/doi-thu.json`, nên bỏ ép hoa không đụng tới chúng.
KHÔNG đụng tới huy hiệu (`span.ss-noi-bo`, `span.nh-nguon`,
`span.vb-the-nho`) và đầu cột bảng (`th`): ở những chỗ đó chữ hoa là
quy ước có nghĩa — nó báo "đây là nhãn trạng thái / đầu cột", không
phải câu chữ để đọc. */
.panel small { text-transform: none; letter-spacing: 0; }
/* Tiêu đề mục trong tab Hướng dẫn — là tiêu đề thật, đọc thành câu */
.panel h3.hd-de { text-transform: none; letter-spacing: -.2px; }
/* ---------------------------------------------------------------
4c. MÀU XANH ĐẶC CHỈ ĐƯỢC MANG MỘT NGHĨA
Trên tab Báo giá, hàng "Khách này cần gì?" và hàng nút hành động nằm
sát nhau, mà CẢ HAI đều có một ô tô xanh đặc:
· chip `.on` = đang CHỌN
· nút `.btn` = hành động CHÍNH
Hai nghĩa khác hẳn nhau, cùng một màu, cách nhau 12px.
Sửa: ô đang chọn dùng nền nhạt + viền + chữ màu nhấn. Xanh đặc từ nay
chỉ còn nghĩa "bấm vào đây để làm việc gì đó".
--------------------------------------------------------------- */
.panel .chips .chip.on {
background: rgba(15,111,208,.16);
border-color: var(--acc2);
color: var(--acc2);
font-weight: 700;
}
body.sang .panel .chips .chip.on {
background: rgba(15,111,208,.10);
border-color: var(--acc);
color: var(--acc);
}
/* Chip hãng đeo logo thì giữ nguyên — nó không đứng cạnh nút hành động
nào, và logo cần nền trung tính để nhìn rõ. */
.panel .chips-logo .chip.on { background: var(--card2); color: inherit; }
/* ---------------------------------------------------------------
4d. BA NÚT HÀNH ĐỘNG KHÔNG CHEN MỘT HÀNG
Trên khổ 412px, ba nút chia ngang mỗi nút còn ~120px nên chữ gãy
dòng giữa từ: "Lưu báo / giá", "Gửi cho / khách". Nhìn là thấy trang
bị bóp, và đọc chậm hơn hẳn.
Xếp lại: việc CHÍNH chiếm trọn một hàng, hai việc phụ chia đôi hàng
dưới. Thứ bậc hiện ra bằng bố cục chứ không chỉ bằng màu.
--------------------------------------------------------------- */
.panel .bgt-nut {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* `order:-1` đưa nút chính lên hàng đầu. Trong HTML nó nằm GIỮA hai nút
phụ, nên nếu không đổi thứ tự thì lưới xếp thành ba hàng mỗi hàng một
nút — hai nút phụ bị nút chính chen vào giữa. */
.panel .bgt-nut > .btn:not(.ghost) {
order: -1;
grid-column: 1 / -1;
min-height: 50px;
font-size: 15px;
}
.panel .bgt-nut > .btn { white-space: nowrap; }
/* ---------------------------------------------------------------
5. Ô BẤM ĐỦ TO
16 ô dưới 44px lúc đo. Nới theo nhóm chứ không nới từng cái, để lần
sau thêm nút mới là tự đủ chuẩn.
--------------------------------------------------------------- */
/* Mọi nút trong vùng nội dung. Đo được hàng loạt nút 40px ở tab Viết
bài (33 cái) và So sánh — chỉ thiếu 4px nhưng ngón cái thì trượt
thật. Nới theo NHÓM để lần sau thêm nút mới là tự đủ chuẩn, khỏi
phải nhớ. */
.panel button,
.loc-kieu button,
.loc-menu > summary,
.chips .chip,
.btn, button.btn { min-height: var(--dt-cham); }
/* Liên kết nào trông như nút thì cũng phải to như nút. CỐ Ý không đụng
tới liên kết nằm giữa dòng chữ — nới chúng lên 44px sẽ phá nhịp dòng. */
.panel a.btn, .panel a.chip, .panel a[role="button"],
.panel a[class*="nut"] {
min-height: var(--dt-cham);
display: inline-flex; align-items: center;
}
select, input[type="text"], input[type="search"],
input[type="number"], input[type="tel"] { min-height: var(--dt-cham); }
/* Ô tích và ô tròn 13×13 quá nhỏ cho ngón tay */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
/* ---------------------------------------------------------------
6. NỘI DUNG MỘT CỘT
Luật chung: cái gì đang chia cột thì trên điện thoại về một cột.
--------------------------------------------------------------- */
.panel > .luoi, .panel .grid-form, .panel .hai-cot,
#hsCot, .cs-bang { grid-template-columns: 1fr !important; }
/* Bảng rộng không co được thì cho cuộn ngang TRONG khung của nó,
đừng để nó kéo cả trang trượt theo. */
.panel .bang-rong { max-width: 100%; overflow-x: auto; }
/* Tờ báo giá là bố cục để IN, rộng cứng 794px (khổ A4 ở 96dpi) — không
co được và cũng KHÔNG NÊN co: co lại là tờ in ra sai khổ. Cho nó
cuộn ngang trong khung riêng, kèm viền để người dùng thấy đây là một
tấm xem trước chứ không phải trang bị vỡ. */
#p-baogia .quote {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--line);
border-radius: 10px;
}
/* ---------------------------------------------------------------
7. TAB HƯỚNG DẪN
Mục lục đang xếp ngang, tràn 762px ra ngoài khổ. Về một cột.
--------------------------------------------------------------- */
#p-huongdan .hd-muc,
#p-huongdan .hd-nhom { display: block; }
#p-huongdan .hd-muc > a,
#p-huongdan a[href^="#"] {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; width: 100%; box-sizing: border-box;
min-height: var(--dt-cham);
}
/* ---------------------------------------------------------------
8. TẤM TRƯỢT KHÔNG ĐƯỢC NẰM DƯỚI THANH TAB
--------------------------------------------------------------- */
.drawer { z-index: 100; }
/* Bảng thả xuống định vị tuyệt đối hay tràn khỏi mép phải */
.loc-bang, .bang-bc {
max-width: calc(100vw - 20px);
left: 10px !important; right: 10px !important; width: auto !important;
}
/* ---------------------------------------------------------------
9. IN ẤN — thanh tab và thanh lọc không được lên giấy
--------------------------------------------------------------- */
@media print {
.dt-tab, .dt-locbar, .dt-tam { display: none !important; }
body { padding-bottom: 0; }
}
}
/* Máy tính và iPad: những khối chỉ dành cho điện thoại phải biến mất
hoàn toàn, kể cả khi JS đã dựng chúng. */
@media (min-width: 601px) {
.dt-tab, .dt-locbar, .dt-tam { display: none !important; }
}