/* ===================================================================== BẢNG MÀU — suy ra từ xanh thương hiệu #085296 của Geely và Lynk & Co --------------------------------------------------------------------- Mọi cặp màu dưới đây đã ĐO tương phản, không ước lượng. Ba lỗi được chữa ở đây: 1. Nút chính nền tối: chữ trắng trên #4d8dff chỉ đạt 3,20:1 — dưới ngưỡng 4,5:1. Đổi sang #0b74d5 cho 4,69:1. 2. Màu trạng thái ở nền sáng HỎNG NẶNG: khối body.sang cũ quên khai lại --ok --warn --bad, nên ba màu chỉnh cho nền tối bị dùng nguyên trên nền trắng — #3fbf87 chỉ đạt 2,15:1, #e8a13a 2,02:1. Đây là màu của nhãn EV/PHEV và các cảnh báo: đọc không ra là lỗi chức năng, không phải chuyện thẩm mỹ. 3. Màu nhấn không phải màu thương hiệu. #085296 vừa đúng nhận diện vừa đạt 7,90:1 với chữ trắng. Lưu ý khi sửa: badge nằm trên --card2 (#f0f3f9), KHÔNG phải nền trắng. Đo trên nền trắng sẽ ra con số đẹp hơn thực tế khoảng 0,5. ===================================================================== */ /* --------------------------------------------------------------------- NỀN TỐI — làm lại 11/09/2026. Ba việc bản cũ chưa xong: 1. MỘT CẶP DƯỚI CHUẨN. `--tx3` trên `--card2` chỉ đạt 4,41:1, thiếu so với ngưỡng 4,5. Đây là chữ mờ trên thẻ phụ — ghi chú, nhãn cột, đơn vị tiền. Nay 5,02:1. 2. THẺ PHỤ KHÔNG TÁCH KHỎI THẺ CHÍNH. Bậc card→card2 cũ chỉ 1,11 — gần như không thấy ranh giới, nên khối lồng trong khối nhìn thành một mảng. Nay 1,20. 3. NỀN QUÁ XANH NAVY. Mọi lớp nền đều ngả xanh nên màu nhấn xanh thương hiệu chìm vào đó. Nền mới trung tính hơn, giữ chút hơi lạnh, để màu xanh còn là màu xanh. Cả 17 cặp đã ĐO, không cặp nào thiếu. Con số ghi ngay cạnh từng dòng. Sửa một màu thì đo lại cả cột màu đó — badge nằm trên --card2 chứ không phải nền trắng, đo nhầm nền là lệch khoảng 0,5. --------------------------------------------------------------------- */ :root{ --bg:#0c1119; --bg2:#131a25; --card:#1a2230; --card2:#26303f; --line:#303b4c; /* 1,67:1 trên --bg — thấy được đường mà không chói */ --line2:#3f4b5e; /* 1,81:1 trên --card — viền ô nhập */ --tx:#eaeef6; /* 13,73:1 trên --card */ --tx2:#aeb9ca; /* 8,05:1 trên --card · 6,72:1 trên --card2 */ --tx3:#93a0b2; /* 6,01:1 trên --card · 5,02:1 trên --card2 */ --acc:#0f6fd0; /* nút chính — chữ trắng 4,99:1 */ --acc2:#5cb2ff; /* chữ nhấn, giá tiền — 7,05:1 trên --card */ --gold:#e6bd72; /* 7,54:1 trên --card2 */ --ok:#4fd98d; /* 7,38:1 trên --card2 — nhãn EV */ --warn:#e3ad60; /* 6,60:1 trên --card2 */ --bad:#ea7b70; /* 4,80:1 trên --card2 */ --nguy-dac:#c0392b; /* nền nút XOÁ đặc — chữ trắng 5,44:1 (--bad chỉ 2,78) */ --cot:272px; /* Chiều cao thanh tiêu đề. Trước đây gõ cứng 56px ở hai nơi; tab Hướng dẫn thêm nơi thứ ba và gõ nhầm 0 ngay lần đầu — mục lục dính nấp hẳn sau thanh. Đặt tên một lần cho hết cãi nhau. */ --cao-dau:56px; --r:14px; --sh:0 4px 20px rgba(0,0,0,.45); } /* Nền sáng — CỐ Ý tách rời chế độ Khách. Trước 05/09/2026 bảng màu này dính cứng vào body.khach nên chế độ Sale không bao giờ sáng được. Nay lớp .sang do nút gạt trên thanh tiêu đề bật/tắt, dùng được ở cả hai chế độ. Đừng gộp ngược lại. */ body.sang{ --bg:#f4f6fa; --bg2:#ffffff; --card:#ffffff; --card2:#f0f3f9; /* #dde3ee chỉ 1,19:1 trên nền — đường kẻ gần như vô hình. Nay 1,24. */ --line:#d8dfeb; --line2:#c7d0e0; --tx:#141c2b; --tx2:#4a566d; --tx3:#646f82; /* 4,69:1 trên --bg */ --acc:#085296; /* chính màu thương hiệu — chữ trắng 7,90:1 */ --acc2:#085296; --gold:#8a6412; /* trên --card2 #f0f3f9: #966d14 chỉ 4,20:1, nay 4,83 */ /* BA DÒNG NÀY LÀ THỨ TRƯỚC ĐÂY BỊ THIẾU. Đo trên --card2 #f0f3f9: #1e8046 chỉ 4,47 và #986823 chỉ 4,35 — vẫn thiếu, nên đậm thêm. */ --ok:#1a7340; /* 5,29:1 */ --warn:#8a5d1f; /* 5,15:1 */ --bad:#b13729; /* 5,48:1 */ --nguy-dac:#b13729; /* chữ trắng 6,09:1 */ --sh:0 3px 16px rgba(20,30,60,.10); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--tx); /* Be Vietnam Pro — do người Việt thiết kế nên dấu đặt chuẩn, và đây là chỗ app này cần nhất: màn hình đầy chữ hoa có dấu (ƯU ĐÃI, ĐẶT CỌC) cùng chữ nhỏ 12px. File nằm sẵn trong assets/fonts/. Phông hệ thống đứng sau làm nền đỡ nếu font chưa về. */ font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Số thẳng cột ở MỌI nơi. Bảng giá 25 dòng lệch một ly là khó dò, mà số tiền thì nằm rải khắp app chứ không riêng trong bảng. */ font-variant-numeric:tabular-nums; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } body.khach{font-size:16.5px} a{color:var(--acc)} h1,h2,h3,h4{margin:0 0 .5em; line-height:1.25; font-weight:650} .wrap{max-width:1240px;margin:0 auto;padding:0 18px} /* ---------- THANH TRÊN — một hàng, 56px ---------- Trước đây thanh này gánh ba thứ khác loại chồng lên nhau: nhận diện, bối cảnh (nơi ĐK + phí DV), và điều hướng. Đo thật: 112px trên laptop 1366×768 (15% màn hình), 164px trên iPad ngang (21%), 179px trên iPad dọc — và ở iPad dọc thanh tab còn tràn ngang, tab thứ 6 bị khuất hẳn. Nay mỗi thứ về một chỗ, thanh này còn đúng 56px. */ header{position:sticky;top:0;z-index:60;background:var(--bg2); border-bottom:1px solid var(--line);box-shadow:var(--sh)} .topbar{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px} .bm-logo{display:flex;align-items:center;gap:8px;flex:none} /* Chiều cao TUYỆT ĐỐI. Ảnh SVG lấy height:100% trong flex container thì không suy ra được bề rộng nội tại, logo co về 0px và biến mất. */ .bm-logo img{height:20px;width:auto;display:block;flex:none} /* Vạch ngăn logo với tên màn đang mở — cao gần bằng cụm chữ bên cạnh để thấy rõ ranh giới (chủ showroom 19/09/2026). */ .bm-logo i{width:1px;height:22px;background:var(--line2);flex:none;margin-left:6px} /* Đổi bản màu bằng CSS, KHÔNG bằng JS: JS hỏng hay chạy chậm là logo trắng nằm trên nền trắng, mất sạch nhận diện. */ .bm-logo .lg-sang{display:none} body.sang .bm-logo .lg-toi{display:none} body.sang .bm-logo .lg-sang{display:block} /* Tên màn đang mở */ .dt-hien{font-size:17px;font-weight:650;white-space:nowrap; overflow:hidden;text-overflow:ellipsis;min-width:0} .thanh-phai{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none} /* ---------- nút bối cảnh ---------- */ .boi-canh{position:relative} .nut-bc{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px; border-radius:10px;border:1px solid var(--line2);background:var(--card); color:var(--tx);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer; white-space:nowrap} .nut-bc:hover{border-color:var(--acc2)} .nut-bc svg{width:17px;height:17px;flex:none} .bang-bc{position:absolute;right:0;top:calc(100% + 8px);width:290px;z-index:70; background:var(--card);border:1px solid var(--line2);border-radius:12px; box-shadow:var(--sh);padding:16px;display:none} .bang-bc[data-mo="1"]{display:block} .bang-bc h5{margin:0 0 10px;font-size:12px;text-transform:uppercase; letter-spacing:.8px;color:var(--tx3);font-weight:700} .bang-bc .ctrl{flex-direction:column;align-items:stretch;gap:5px;margin-bottom:12px} .bang-bc .ctrl:last-child{margin-bottom:0} .bang-bc .ctrl select{width:100%} .ctrl{display:flex;align-items:center;gap:7px} label.lbl{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;font-weight:600} select,input[type=text],input[type=number]{ background:var(--card);color:var(--tx);border:1px solid var(--line2);border-radius:9px; padding:8px 11px;font:inherit;font-size:14px;outline:none;max-width:100%; } select:focus,input:focus{border-color:var(--acc)} /* Nút gạt nền sáng/tối — thế chỗ ô "Tìm xe" cũ (bỏ vì gần như không dùng). Chỉ hiện biểu tượng của cái SẮP chuyển sang, nên nền tối thì thấy mặt trời. */ .thsw{ background:var(--card);border:1px solid var(--line2);border-radius:10px; width:38px;height:38px;flex:none;padding:0;cursor:pointer;color:var(--tx2); display:grid;place-items:center } .thsw:hover{color:var(--tx);border-color:var(--acc)} .thsw:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .thsw svg{width:18px;height:18px;display:block} .thsw .i-sang{display:block} .thsw .i-toi{display:none} body.sang .thsw .i-sang{display:none} body.sang .thsw .i-toi{display:block} /* ---------- nút ba gạch + danh mục trượt (CHỈ điện thoại) ---------- Máy tính và iPad giữ nguyên giao diện cũ — chủ showroom chốt 06/09: "cái này chỉ sửa trên giao diện điện thoại". Mọi thứ dưới đây đều nằm trong khối @media (max-width:600px) hoặc bị ẩn mặc định. */ .menu{ display:none; background:var(--card); border:1px solid var(--line2); border-radius:10px; width:40px; height:40px; flex:none; padding:0; cursor:pointer; place-items:center; gap:4px; align-content:center } .menu span{display:block;width:18px;height:2px;border-radius:2px;background:var(--tx2)} .menu:hover span{background:var(--tx)} .menu:focus-visible{outline:2px solid var(--acc);outline-offset:2px} /* Dòng tên tab đang xem — thế chỗ dòng phụ của tiêu đề khi ở điện thoại. Phải viết đủ `.brandmark small.dt-hien` chứ không phải mỗi `.dt-hien`: luật `.brandmark small{display:block}` ở trên mạnh hơn, viết thiếu là dòng này lòi ra cả trên máy tính và đội thanh đầu trang cao thêm 18px. */ .brandmark small.dt-hien{display:none} .drawer{position:fixed;inset:0;z-index:210} .drawer-nen{position:absolute;inset:0;background:rgba(4,8,16,.6); opacity:0;transition:opacity .22s ease} .drawer.mo .drawer-nen{opacity:1} .drawer-panel{ position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw); background:var(--bg2);border-left:1px solid var(--line2); box-shadow:-8px 0 30px rgba(0,0,0,.4); display:flex;flex-direction:column;overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(100%);transition:transform .22s ease } .drawer.mo .drawer-panel{transform:translateX(0)} .drawer-dau{display:flex;align-items:center;gap:10px;padding:14px 16px; border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg2);z-index:2} .drawer-dau b{font-size:15px} .drawer-x{margin-left:auto;background:var(--card2);border:1px solid var(--line2); color:var(--tx);border-radius:9px;width:34px;height:34px;font-size:16px;cursor:pointer;flex:none} .drawer-tabs{padding:10px} /* Thanh tab đổi từ hàng ngang sang danh sách dọc. CỐ Ý không đụng tới thuộc tính display của nút — luật .sale-only ẩn/hiện tab nội bộ dựa vào display, đè lên là chế độ Khách lòi ra tab giá vốn. Xếp dọc bằng flex-direction là đủ, nút trong flex tự thành khối. */ .drawer-tabs nav.tabs{flex-direction:column;gap:2px;overflow:visible} .drawer-tabs nav.tabs button{ width:100%;text-align:left;padding:13px 14px;border-radius:10px; border-bottom:0;border-left:3px solid transparent;font-size:15px } .drawer-tabs nav.tabs button.on{ background:var(--card);border-left-color:var(--acc);border-bottom-color:transparent } .drawer-caidat{padding:6px 16px 16px;border-top:1px solid var(--line);margin-top:auto} .drawer-nhan{font-size:12px;letter-spacing:.7px;text-transform:uppercase; color:var(--tx3);font-weight:700;margin:14px 0 10px} .drawer-caidat .ctrl{flex-direction:column;align-items:stretch;gap:6px;margin-bottom:14px} .drawer-caidat .ctrl select{width:100%} .drawer-caidat .thsw{width:100%;height:44px;justify-content:center; grid-auto-flow:column;gap:9px;font:inherit;font-size:14.5px;font-weight:600} .drawer-caidat .thsw::after{content:'Nền sáng'} body.sang .drawer-caidat .thsw::after{content:'Nền tối'} /* ===================================================================== KHUNG: cột điều hướng dọc + nội dung --------------------------------------------------------------------- Sáu tab ngang với nhãn tiếng Việt dài ("Kịch bản & xử lý từ chối") tràn màn hình từ 768px trở xuống. Nay là tám mục xếp dọc, chia ba nhóm theo loại việc. Thu gọn được về 64px khi cần chỗ ngang. ===================================================================== */ .khung{display:grid;grid-template-columns:var(--cot,272px) 1fr;align-items:start} body.gon-cot{--cot:64px} nav.tabs{ position:sticky;top:var(--cao-dau);height:calc(100vh - var(--cao-dau)); background:var(--bg2);border-right:1px solid var(--line); padding:12px 10px;display:flex;flex-direction:column;gap:2px; /* Chỉ cuộn dọc. overflow-x:hidden để nhãn dài không đẻ ra thanh cuộn ngang chạy suốt đáy cột — nhãn đã có text-overflow:ellipsis rồi. */ overflow-y:auto; overflow-x:hidden; } nav.tabs .nhom{font-size:12px;text-transform:uppercase;letter-spacing:.9px; font-weight:700;color:var(--tx3);padding:16px 10px 6px} nav.tabs .nhom:first-child{padding-top:4px} nav.tabs button{ display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 11px; border-radius:10px;border:0;background:none;color:var(--tx2); font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-align:left; width:100%;position:relative;transition:background .12s,color .12s; } nav.tabs button:hover{background:var(--card2);color:var(--tx)} nav.tabs button.on{background:var(--acc);color:#fff} nav.tabs button:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} nav.tabs button > svg{width:19px;height:19px;flex:none} nav.tabs .nhan{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} nav.tabs .pill{flex:none;min-width:22px;height:20px;padding:0 6px;border-radius:20px; background:var(--bad);color:#fff;font-size:12px;font-weight:700; display:grid;place-items:center;margin:0} nav.tabs button.on .pill{background:rgba(255,255,255,.28)} /* Số bước — chỉ nhóm "Quy trình bán" có, vì bốn màn đó đi theo thứ tự */ nav.tabs .buoc{flex:none;width:20px;height:20px;border-radius:50%;font-size:12px; font-weight:800;display:grid;place-items:center; border:1.5px solid var(--line2);color:var(--tx3)} nav.tabs button.on .buoc{border-color:rgba(255,255,255,.6);color:#fff} nav.tabs .thu-gon{margin-top:auto;color:var(--tx3)} nav.tabs .thu-gon svg{transition:transform .2s} body.gon-cot nav.tabs .thu-gon svg{transform:rotate(180deg)} /* ---- cột thu gọn: chỉ icon, nhãn hiện khi rê chuột ---- */ body.gon-cot nav.tabs .nhom{font-size:0;padding:12px 0 6px} body.gon-cot nav.tabs .nhom::after{content:'';display:block;height:1px; background:var(--line2);margin:0 8px} body.gon-cot nav.tabs button{justify-content:center;padding:9px 0} body.gon-cot nav.tabs .nhan,body.gon-cot nav.tabs .buoc{display:none} body.gon-cot nav.tabs .pill{position:absolute;top:3px;right:5px; min-width:18px;height:18px;font-size:12px} body.gon-cot nav.tabs button::after{ content:attr(data-ngan);position:absolute;left:calc(100% + 8px);white-space:nowrap; background:var(--card);color:var(--tx);border:1px solid var(--line2); border-radius:8px;padding:6px 10px;font-size:13px;font-weight:600; opacity:0;pointer-events:none;transition:opacity .12s;z-index:80;box-shadow:var(--sh)} body.gon-cot nav.tabs button:hover::after{opacity:1} /* Nội dung TRÀN HẾT chỗ còn lại, không bó trong bề ngang cố định. `.wrap` gốc khoá 1240px và căn giữa — hợp với trang đọc, không hợp với công cụ tra cứu: bảng 25 đời xe và bảng thông số càng rộng càng dễ đọc, mà màn hình rộng thì lại bỏ trống hai bên. Ở đây bỏ khoá đó. */ .khung > main.wrap{max-width:none;margin:0;padding:0 22px;min-width:0} /* Đầu mỗi màn mới */ .man-dau{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap; margin-bottom:20px} .man-dau h2{margin:0 0 2px;font-size:21px;letter-spacing:-.3px} .man-dau > div:first-child{margin-right:auto} .man-dau .hang{align-items:flex-end} /* ===================================================================== BA CHẶNG MÀN HÌNH ≥901px cột đầy đủ 272px, nhãn dài thoải mái 601–900px cột hẹp 78px, icon xếp trên nhãn ngắn — iPad KHÔNG có hover nên không dùng được nhãn hiện khi rê chuột ≤600px cột chuyển vào ngăn kéo, cơ chế cũ giữ nguyên ===================================================================== */ @media (max-width:900px) and (min-width:601px){ .khung{grid-template-columns:78px 1fr} nav.tabs{padding:10px 5px} nav.tabs .nhom{font-size:0;padding:10px 0 5px} nav.tabs .nhom::after{content:'';display:block;height:1px; background:var(--line2);margin:0 6px} nav.tabs button{flex-direction:column;gap:3px;padding:8px 3px;min-height:58px; justify-content:center;text-align:center} nav.tabs .nhan,nav.tabs .buoc{display:none} nav.tabs button::after{content:attr(data-ngan);font-size:12px;font-weight:600; line-height:1.2;white-space:nowrap} nav.tabs .pill{position:absolute;top:3px;right:8px;min-width:18px;height:18px; font-size:12px} nav.tabs .thu-gon{display:none} .khung > main.wrap{padding:0 16px} } @media (max-width:600px){ .khung{grid-template-columns:1fr} .khung > nav.tabs{display:none} /* đã bị chuyển vào ngăn kéo */ .khung > main.wrap{padding:0 12px} .nut-bc .ten-bc{display:none} .nut-bc{width:44px;padding:6px;justify-content:center} /* Trong ngăn kéo, cột dọc trở lại dạng danh sách phẳng */ .drawer-tabs nav.tabs{position:static;height:auto;border-right:0; background:none;padding:0;overflow:visible} .drawer-tabs nav.tabs .nhom{padding:14px 10px 6px} } /* ---------- generic ---------- */ main{padding:22px 0 70px} /* Thuộc tính hidden phải ẨN THẬT. Luật mặc định của trình duyệt cho [hidden] yếu hơn mọi lớp có `display` — khung `.vb-khung{display:grid}` gắn hidden vẫn hiện nguyên, màn Sổ bài và màn Soạn bài chồng lên nhau (bắt được 11/09/2026). Một luật chung ở đây thay cho việc nhớ viết `.x[hidden]{display:none}` cho từng lớp. */ [hidden]{display:none!important} .panel{display:none} .panel.on{display:block} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px} .muted{color:var(--tx2)} .tiny{font-size:12.5px;color:var(--tx3)} .btn{background:var(--acc);color:#fff;border:0;border-radius:10px;padding:10px 18px;font:inherit;font-weight:650;cursor:pointer} .btn:hover{filter:brightness(1.08)} .btn.ghost{background:transparent;border:1px solid var(--line2);color:var(--tx)} .btn.sm{padding:6px 12px;font-size:13px;border-radius:8px} .chips{display:flex;flex-wrap:wrap;gap:8px} .chip{background:var(--card2);border:1px solid var(--line2);border-radius:20px;padding:7px 14px;font-size:13.5px;cursor:pointer;user-select:none;font-weight:550} .chip.on{background:var(--acc);border-color:var(--acc);color:#fff} .badge{display:inline-block;background:var(--card2);border:1px solid var(--line2);border-radius:6px;padding:2px 8px;font-size:12px;color:var(--tx2);font-weight:600;white-space:nowrap} .badge.ev{color:var(--ok);border-color:rgba(63,191,135,.45)} .badge.phev{color:var(--warn);border-color:rgba(232,161,58,.45)} .badge.acc{color:var(--acc);border-color:var(--acc)} .badge.ok{color:var(--ok);border-color:rgba(63,191,135,.5)} .badge.bad{color:var(--bad);border-color:rgba(232,97,95,.5)} .alert{border-radius:12px;padding:13px 16px;margin-bottom:16px;font-size:14px;border:1px solid} .alert.warn{background:rgba(232,161,58,.10);border-color:rgba(232,161,58,.45)} .alert.warn b{color:var(--warn)} /* Lớp `.sale-only` từng dùng để giấu thông tin nội bộ khi màn sale chuyển sang "chế độ Khách". Bỏ chế độ đó ngày 10/09/2026 — khách đã có khach.html riêng, nên index.html LUÔN là màn nội bộ. Giữ lại tên lớp trong HTML như một ghi chú "chỗ này là thông tin nội bộ", nhưng không còn luật nào giấu nó đi. */ .bgtable{font-size:13px} .bgtable th{white-space:nowrap;font-size:12px} .bgtable td{padding:9px 10px;vertical-align:middle} .bgrow{cursor:pointer} .bgrow:hover td{background:var(--card2)} .khach-only{display:none} body.khach .khach-only{display:revert} .money{font-variant-numeric:tabular-nums;white-space:nowrap} .sect-title{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3);font-weight:700;margin:22px 0 10px} .grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px} /* min-width:0 là bắt buộc: ô lưới mặc định min-width:auto nên KHÔNG co xuống dưới bề rộng nội dung. Ô "Chọn xe" có tên dài như "LYNK&CO 08 — Halo (có sẵn kho ĐL - 2 xe Xám/Đen)" đặt sàn 424px, đẩy cả trang tràn ngang trên điện thoại. */ .fld{display:flex;flex-direction:column;gap:6px;min-width:0} .fld > select,.fld > input,.fld > textarea{width:100%;min-width:0} /* ---------- car cards ---------- */ .cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .carcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .12s,border-color .12s;cursor:pointer} .carcard:hover{transform:translateY(-2px);border-color:var(--acc)} .thumb{aspect-ratio:16/10;background:var(--card2);position:relative;overflow:hidden;display:grid;place-items:center} .thumb img{width:100%;height:100%;object-fit:cover;display:block} .thumb .ph{color:var(--tx3);font-size:12.5px;text-align:center;padding:14px;font-weight:600;letter-spacing:.5px} .thumb .tag{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.62);color:#fff;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;letter-spacing:.4px} .cbody{padding:14px 15px 15px;display:flex;flex-direction:column;gap:9px;flex:1} .cbody h4{margin:0;font-size:15.5px} .cbody .var{color:var(--tx2);font-size:13px;margin-top:-4px} .prices{margin-top:auto;padding-top:9px;border-top:1px dashed var(--line2)} .prices .lb{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;font-weight:650} .prices .big{font-size:19px;font-weight:750;color:var(--acc2)} body.sang .prices .big{color:var(--acc)} .prices .strike{text-decoration:line-through;color:var(--tx3);font-size:12.5px} .selbox{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2);cursor:pointer;padding-top:4px} /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse;font-size:14px} th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)} th{color:var(--tx3);font-size:12px;text-transform:uppercase;letter-spacing:.6px;font-weight:700} tbody tr:hover{background:var(--card2)} td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .inh{border-bottom:1px dotted var(--warn);cursor:help} /* ---------- quote ---------- */ .quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .quote .qh{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--card2)} .qrow{display:flex;justify-content:space-between;gap:16px;padding:9px 20px;border-bottom:1px solid var(--line);font-size:14.5px} .qrow:last-child{border-bottom:0} .qrow.total{background:var(--card2);font-size:18px;font-weight:750} .qrow.total .money{color:var(--acc2)} body.sang .qrow.total .money{color:var(--acc)} .qrow.sub{color:var(--tx2);font-size:13.5px} .qrow.disc .money{color:var(--ok)} .internal{background:rgba(232,161,58,.07);border:1px dashed rgba(232,161,58,.5);border-radius:12px;padding:14px 18px;margin-top:16px} .internal h4{color:var(--warn);font-size:13px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px} /* ---------- chọn phiên bản trong hồ sơ xe ---------- */ .vtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .vtabs button{flex:1 1 150px;background:var(--card);border:1.5px solid var(--line2);border-radius:11px; padding:9px 14px;font:inherit;color:var(--tx);cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:2px} .vtabs button b{font-size:14.5px} .vtabs button span{font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums} .vtabs button.on{border-color:var(--acc);background:rgba(77,141,255,.10)} .vtabs button.on span{color:var(--acc)} .subrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:-4px 0 13px} .subrow .chip{padding:5px 12px;font-size:12.5px} /* ---------- mẫu màu ---------- */ .coltabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} .coltabs button{background:var(--card2);border:1px solid var(--line2);color:var(--tx2);border-radius:20px; padding:6px 16px;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer} .coltabs button.on{background:var(--acc);border-color:var(--acc);color:#fff} /* ---------- header phiên bản bấm được trong bảng thông số ---------- */ .vhead{background:none;border:0;color:var(--tx2);font:inherit;font-size:13px;font-weight:700; padding:9px 12px;width:100%;text-align:left;cursor:pointer;border-bottom:2.5px solid transparent} .vhead:hover:not(:disabled){color:var(--acc)} .vhead.on{color:var(--ok);border-bottom-color:var(--ok)} .vhead:disabled{cursor:default;opacity:.55} /* ---------- modal ---------- */ /* Lề trên/dưới đặt ở `.msheet` (margin), KHÔNG ở đây (padding). `sticky` bám theo mép trong phần padding của vùng cuộn: padding 26px thì thanh đầu hồ sơ dính ở 26px, và bảng thông số cuộn qua lọt lên dải 26px phía trên thanh đầu. Chuyển sang margin thì thanh đầu dính sát mép màn hình. */ .modal{position:fixed;inset:0;z-index:100;background:rgba(4,8,16,.72);display:none;overflow-y:auto;padding:0 14px} .modal.on{display:block} /* Dùng gần hết chiều ngang màn hình. Trước đây khoá ở 1020px nên trên laptop và màn rời, hồ sơ xe nằm gọn một dải giữa còn hai bên bỏ trắng — mà bảng thông số so sánh ba bốn phiên bản thì rất cần bề ngang. Chủ showroom chốt 08/09. Vẫn chừa lề để không dính sát mép. */ /* `overflow:clip` chứ KHÔNG `hidden`. `hidden` biến khối này thành vùng cuộn riêng, nên mọi thứ `sticky` bên trong bám vào nó thay vì bám vào `.modal` — mà nó không cuộn, thành ra thanh tiêu đề hồ sơ xe và hàng tên phiên bản đều trôi mất khi cuộn. `clip` cắt góc y hệt nhưng không tạo vùng cuộn. Cùng một bẫy đã dính ở `.k-the` bên màn hình khách. */ .msheet{max-width:1800px;margin:26px auto;background:var(--bg2);border:1px solid var(--line2);border-radius:16px;overflow:clip;box-shadow:0 20px 60px rgba(0,0,0,.5)} .mhead{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px;position:sticky;top:0;background:var(--bg2);z-index:5} .mhead .x{margin-left:auto;background:var(--card2);border:1px solid var(--line2);color:var(--tx);border-radius:9px;width:34px;height:34px;font-size:18px;cursor:pointer;flex:none} .mbody{padding:20px 22px 30px} /* ---------- ba khối thông số, cùng bố cục với màn hình khách ---------- */ /* dải 5 thông số cơ bản — không tiêu đề, số tự nói lên nó là gì */ .ts-lieu{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:13px; overflow:hidden;margin:4px 0 6px; } .ts-lieu div{background:var(--card);padding:16px 14px;text-align:center} .ts-lieu small{display:block;font-size:12px;letter-spacing:.8px;text-transform:uppercase; color:var(--tx3);font-weight:700;margin-bottom:6px} .ts-lieu b{font-size:20px;letter-spacing:-.4px;line-height:1.25;display:block} /* khối "bản này hơn bản kia ở gì" */ .ts-hon{background:rgba(63,191,135,.06);border:1px solid rgba(63,191,135,.28); border-radius:13px;padding:14px 16px} .ts-hon ul.pl{margin:0} .ts-hon-them{margin:10px 0 0;font-size:13.5px;color:var(--tx2);line-height:1.6} .ts-hon-them b{color:var(--ok)} /* bảng thông số: cột chia đều, hàng tên phiên bản dính lại khi cuộn. `top` lấy theo chiều cao THẬT của `.mhead` — thanh tiêu đề hồ sơ xe cũng dính ở đỉnh cùng vùng cuộn, mà chiều cao nó đổi theo tên xe dài ngắn và số nhãn, nên đặt số cứng là có xe bị che. `renderModal()` đo rồi ghi vào biến `--mhead-h` sau mỗi lần dựng. */ .ts-bang{overflow:visible} .ts-bang table{width:100%;border-collapse:collapse;table-layout:fixed} .ts-bang th,.ts-bang td{overflow-wrap:anywhere;vertical-align:top} .ts-bang thead th{position:sticky;top:var(--mhead-h,115px);z-index:4;background:var(--card2)} .ts-nhom th{background:var(--card2);color:var(--acc)} .ts-nhom small{color:var(--tx3);text-transform:none;letter-spacing:0;font-weight:600} .ts-nhan{color:var(--tx2);text-transform:none;font-size:13.5px;letter-spacing:0;font-weight:500} .ts-dangxem{background:rgba(63,191,135,.07);font-weight:600} #tgTrangThai:empty{display:none} /* Thanh lọc tab Khách hàng dùng lại đúng bộ lớp .loc của tab Tư vấn */ .loc-menus{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .loc .o-tim{flex:1 1 240px;min-width:200px;margin:0} .loc-nhom{font-size:var(--fs-xs,11px);text-transform:uppercase;letter-spacing:.14em; color:var(--tx3);padding:10px 8px 4px} button.loc-muc{width:100%;border:0;background:transparent;color:inherit;font:inherit; text-align:left;cursor:pointer} button.loc-muc.on{background:rgba(15,111,208,.16)} /* Nút icon trong hồ sơ khách (sửa / xoá) — vuông 40px, đủ ngón tay chạm */ /* Menu "Xử lý" trong một dòng việc — thẻ việc là lưới bốn cột, thêm cột thứ năm cho menu này, không thì nó rơi xuống hàng dưới và chiếm cả hàng. */ /* Đặt dưới .ds-viec để thắng luật .the-viec gốc nằm sau trong file này */ .ds-viec .the-viec{grid-template-columns:minmax(160px,1.4fr) minmax(140px,1fr) auto auto auto} .tv-xuly>summary{min-height:36px;padding:0 12px;font-size:13px;white-space:nowrap} .tv-xuly .loc-bang{right:0;left:auto;width:264px} .tv-mo{display:block;font-style:normal;font-size:11.5px;color:var(--tx3)} /* Khách hai ngày tới: nhạt hơn, để mắt không nhầm với việc phải làm hôm nay */ .ds-sap .the-viec{opacity:.88} .ds-sap .the-viec:hover,.ds-sap .the-viec:focus-within{opacity:1} .hs-icon{width:40px;min-width:40px;padding:0;display:grid;place-items:center} .hs-icon svg{width:18px;height:18px;display:block} /* Nút gọi: icon ống nghe + số (13/09/2026). Trước là chữ "Gọi" + số và mỗi nút một chiều dài, cột nút bên phải danh sách trông so le. Be Vietnam Pro KHÔNG có bảng chữ số cùng bề ngang, nên font-variant- numeric:tabular-nums ở đây không ăn gì (đo rồi: bề ngang không đổi một pixel) — phải chốt bề rộng thì các nút mới thẳng hàng. Giữ dòng tabular-nums lại phòng khi sau này đổi sang phông có bảng đó. */ .nut-goi{display:inline-flex;align-items:center;justify-content:center;gap:7px; font-variant-numeric:tabular-nums;letter-spacing:.01em} .ds-viec .nut-goi{min-width:144px} .nut-goi .i-goi{width:16px;height:16px;flex:none;display:block} .hs-nut .nut-goi .i-goi{width:17px;height:17px} /* ===== TAB BÁO GIÁ: hai tờ cạnh nhau (12/09/2026) ===== Lăn bánh trái, trả góp phải. Dưới 1100px thì xếp dọc — iPad dọc mà ép hai cột thì mỗi cột hẹp tới mức số tiền phải xuống dòng. */ .bg-doi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start} @media(max-width:1100px){ .bg-doi{grid-template-columns:1fr} } @media print{ .bg-doi{display:block} } /* ===== THANH LỌC tab Tư vấn — gộp 12/09/2026 ===== Thay khối "Khách cần gì?" cao 349px + hàng hãng/sắp xếp 44px. Cho phép xuống dòng (flex-wrap) chứ không cuộn ngang: iPad dọc mà cuộn ngang thì sale không thấy có gì bên phải, còn xuống dòng thì cùng lắm cao thêm một hàng — vẫn thấp hơn khối cũ rất nhiều. */ .loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px} .loc select,.loc .btn{min-height:40px} .loc select,.loc-tim{background:var(--card2);color:var(--tx);border:1px solid var(--line2); border-radius:9px;padding:0 10px;font-size:13.5px;font-family:inherit;min-height:40px} .loc-tien{display:flex;align-items:center;gap:6px;background:var(--card2); border:1px solid var(--line2);border-radius:9px;padding:3px 4px 3px 11px;min-height:40px} .loc-tien input{width:142px;border:0;background:transparent;color:var(--tx); font-size:13.5px;font-family:inherit;padding:0} .loc-tien input:focus{outline:none} .loc-kieu{display:flex;gap:2px;background:var(--bg);border-radius:7px;padding:2px} .loc-kieu button{border:0;background:transparent;color:var(--tx3);font:inherit;font-size:12px; padding:5px 9px;border-radius:5px;cursor:pointer} .loc-kieu button[aria-pressed="true"]{background:var(--acc);color:#fff} .loc-tim{width:150px} .loc-sx{margin-left:auto} .loc-menu{position:relative} .loc-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; min-height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:9px; background:var(--card2);font-size:13.5px;-webkit-user-select:none;user-select:none} .loc-menu>summary::-webkit-details-marker{display:none} .loc-menu>summary::after{content:'▾';opacity:.6;font-size:11px} .loc-menu[open]>summary{border-color:var(--acc2)} .loc-dem{background:var(--acc);color:#fff;border-radius:999px;min-width:19px;height:19px; display:grid;place-items:center;font-size:11px;font-weight:700;padding:0 5px} .loc-bang{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:284px; background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px; box-shadow:0 14px 34px rgba(0,0,0,.4);max-height:62vh;overflow:auto} /* Ô chọn cao 40px: ngón tay trên iPad, không phải chuột */ .loc-muc{display:flex;align-items:center;gap:9px;padding:0 8px;border-radius:7px; font-size:13.5px;cursor:pointer;min-height:40px} .loc-muc:hover{background:var(--card2)} .loc-muc span{flex:1} .loc-muc b{color:var(--tx3);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600} .loc-muc.on{background:rgba(79,217,141,.10)} .loc-muc.on b{color:var(--ok)} .loc-muc.khoa{opacity:.42;cursor:not-allowed} .loc-dang{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px} .loc-chip{border:1px solid var(--line2);background:var(--card2);color:var(--tx2); border-radius:999px;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;min-height:32px} .loc-chip:hover{border-color:var(--warn);color:var(--tx)} .loc-chip.loc-xoa{border-style:dashed;color:var(--tx3)} @media(max-width:900px){ .loc-tien input,.loc-tim{width:118px} .loc-sx{margin-left:0} .loc-bang{width:min(300px,86vw)} } /* thư viện ảnh */ .gal{margin-bottom:18px} .galwrap{position:relative} .gal .main{aspect-ratio:16/10;background:var(--card2);border-radius:12px;overflow:hidden;display:grid;place-items:center;position:relative} .gal .main img{width:100%;height:100%;object-fit:cover} /* ảnh xe theo màu: nền trong suốt, canh vừa khung chứ không cắt */ .gal .main.fit img{object-fit:contain;padding:10px 14px 26px} .gal .strip div.fit img{object-fit:contain;padding:3px} /* ghi chú góc ảnh: ảnh dùng chung cả dòng mà chụp tính năng bản đang xem không có — "Cửa sổ trời chỉ có ở bản Flagship". Nền tối riêng để đọc được trên mọi ảnh, sáng hay tối, giao diện nào cũng vậy. */ .gal-ban{position:absolute;left:10px;top:10px;z-index:2;max-width:calc(100% - 20px); background:rgba(12,16,26,.8);color:#fff;border-left:3px solid #e8a13a;border-radius:6px; padding:5px 10px;font-size:12.5px;font-weight:600;line-height:1.35;pointer-events:none; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* nút chuyển ảnh — bấm hoặc vuốt trái/phải */ .gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%; border:0;background:rgba(10,14,22,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer; display:grid;place-items:center;padding:0 0 3px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .gnav:hover{background:rgba(10,14,22,.78)} .gnav.prev{left:10px} .gnav.next{right:10px} @media(hover:none){.gnav{width:46px;height:46px}} .gal .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.78)); color:#fff;padding:26px 16px 11px;font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center} .gal .cap .k{background:rgba(255,255,255,.2);border-radius:5px;padding:1px 7px;font-size:12px;letter-spacing:.4px} /* ---- xem ảnh to toàn màn hình (chạm vào ảnh) ---- */ .galto{position:fixed;inset:0;z-index:220;background:rgba(4,8,16,.95); display:none;flex-direction:column;align-items:center;justify-content:center; padding:14px;cursor:zoom-out} .galto.mo{display:flex} .galto-anh{flex:1;min-height:0;width:100%;display:grid;place-items:center;position:relative} .galto-ban{font-size:14px;max-width:min(80%,520px)} .galto-anh img{max-width:100%;max-height:100%;object-fit:contain;display:block} .galto-chu{color:#cfd6e4;font-size:13px;padding:12px 4px 4px;text-align:center; white-space:pre-wrap} .galto-x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px; width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14); color:#fff;font-size:17px;cursor:pointer} .gal .strip{display:flex;gap:7px;overflow-x:auto;margin-top:9px;padding-bottom:4px} .gal .strip div{flex:none;width:92px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--card2); cursor:pointer;border:2px solid transparent;display:grid;place-items:center} .gal .strip div.on{border-color:var(--acc)} .gal .strip img{width:100%;height:100%;object-fit:cover} .gal .ph{color:var(--tx3);font-size:12px;text-align:center;padding:10px} .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:18px} .kv .b{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px} .kv .b .k{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;font-weight:700} .kv .b .v{font-size:16px;font-weight:700;margin-top:3px} ul.pl{margin:0;padding-left:20px} ul.pl li{margin-bottom:7px} .two{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:760px){.two,.gallery{grid-template-columns:1fr}.gallery .side{grid-template-columns:1fr 1fr}} /* ---------- reco ---------- */ .reco{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:210px 1fr auto;gap:16px;align-items:center;margin-bottom:13px;cursor:pointer} .reco:hover{border-color:var(--acc)} .reco .th{aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--card2);display:grid;place-items:center} .reco .th img{width:100%;height:100%;object-fit:cover} .reco .why{font-size:13.5px;color:var(--tx2);margin-top:6px} .reco .why b{color:var(--ok)} .rank{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none} @media(max-width:760px){.reco{grid-template-columns:1fr}} .score{text-align:right} .score .n{font-size:22px;font-weight:800;color:var(--acc2)} body.sang .score .n{color:var(--acc)} .score .l{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;font-weight:700} @media print{ header,nav.tabs,.noprint{display:none!important} body{background:#fff;color:#000;font-size:12pt} .quote{border:1px solid #999} .internal{display:none!important} } /* ---------- thông báo đồng bộ Google Sheet ---------- */ .synctoast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,120%); background:var(--card); color:var(--tx); border:1px solid var(--line2); border-left:4px solid var(--ok); border-radius:12px; padding:12px 20px; font-size:14px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.4); z-index:200; max-width:90vw; opacity:0; transition:transform .28s ease, opacity .28s ease; pointer-events:none; } .synctoast.on{transform:translate(-50%,0); opacity:1} .synctoast.warn{border-left-color:var(--warn)} .queuebadge{ position:fixed; right:16px; bottom:16px; z-index:150; background:var(--warn); color:#231a08; border-radius:20px; padding:7px 15px; font-size:12.5px; font-weight:700; box-shadow:0 4px 16px rgba(0,0,0,.35); } /* ---------- khối lưu lên Google Sheet ---------- */ .sheetbox{border-left:3px solid var(--acc)} .sheethead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px} .sheetbtns{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .sheetbtns .tiny{flex:1 1 240px;min-width:0} .okdot::before{content:'●';color:var(--ok);margin-right:5px} .warndot::before{content:'●';color:var(--warn);margin-right:5px} button:disabled{opacity:.55;cursor:default} input[type=date],input[type=tel]{ background:var(--card);color:var(--tx);border:1px solid var(--line2);border-radius:9px; padding:8px 11px;font:inherit;font-size:14px;outline:none;max-width:100%; } /* ===== BẢNG SO SÁNH GÓI VAY — thêm cho màn hình báo giá ===== */ .goi-chon{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .goi-chon .gc{display:inline-flex;align-items:center;gap:6px;padding:6px 11px; border:1px solid var(--line);border-radius:4px;font-size:13px;cursor:pointer} .goi-chon .gc.on{border-color:var(--acc);background:rgba(77,141,255,.14);font-weight:600} .goi-chon .gc.mo{opacity:.45;cursor:not-allowed} .goi-chon .gc small{color:var(--tx3);font-weight:400} .goitb-wrap{overflow-x:auto} table.goitb{border-collapse:collapse;width:100%;margin-top:2px} table.goitb th,table.goitb td{padding:9px 12px;border-bottom:1px solid var(--line); text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} table.goitb th:first-child,table.goitb td:first-child{text-align:left;white-space:normal} table.goitb thead th{border-bottom:2px solid var(--line);font-size:13px;line-height:1.35} table.goitb thead th small{display:block;font-weight:400;color:var(--tx3);font-size:12px} table.goitb tr.nhan td{color:var(--tx3);font-size:12.5px;padding-top:4px;padding-bottom:9px} table.goitb tr.chinh td{font-size:17px;font-weight:700;padding-top:12px} table.goitb tr.chinh td:first-child{font-size:13px;font-weight:600} table.goitb td.re{color:var(--ok)} table.goitb td.tat{opacity:.35} .goi-ghichu{font-size:12px;color:var(--tx3);margin-top:10px;line-height:1.5} .goi-canh{font-size:12.5px;margin-top:8px;padding:8px 11px;border-radius:4px; background:rgba(232,161,58,.12);color:var(--warn);border-left:3px solid var(--warn)} /* ===================================================================== ĐIỆN THOẠI DỰNG ĐỨNG — dưới 600px --------------------------------------------------------------------- Sale hay mở máy bằng điện thoại khi đang đứng cạnh xe ngoài sân, không phải lúc nào cũng ngồi trước máy tính. Ba việc ở đây: 1. Nút và ô nhập đủ lớn để bấm bằng ngón cái (mốc 44px của Apple) 2. Cỡ chữ ô nhập >= 16px, nếu nhỏ hơn Safari iOS tự phóng to cả trang mỗi lần chạm vào ô — rất khó chịu khi đang gõ số với khách 3. Bảng và thanh tab cuộn ngang trong khung riêng, không đẩy cả trang Đặt cuối file để thắng các luật ở trên mà không phải tăng độ ưu tiên. ===================================================================== */ @media (max-width: 600px) { body{font-size:15.5px} .wrap{padding:0 12px} /* Thanh tab: cuộn ngang trong khung của nó, không làm vỡ trang */ nav.tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; } nav.tabs::-webkit-scrollbar{display:none} nav.tabs button{white-space:nowrap; flex:none} /* Ngón cái bấm được — và 16px để Safari iOS không tự phóng trang */ select, input[type=text], input[type=number], input[type=tel], input[type=date]{ font-size:16px; padding:11px 12px; min-height:44px; } .btn{min-height:44px; padding:11px 16px} .btn.sm{min-height:38px} /* Thanh đầu trang gọn còn MỘT hàng: logo + tên + nút ba gạch. Hai ô chọn, nút sáng/tối và cả thanh tab đều chuyển vào danh mục trượt (xem dungChoDienThoai() trong app.js), nên ở đây không còn gì phải xuống hàng. Trước 06/09 khối này cao 176px — gần nửa màn hình. */ .topbar{gap:9px;flex-wrap:nowrap} .menu{display:grid} .brandmark small.dt-an{display:none} .brandmark small.dt-hien{display:block;color:var(--acc2);font-weight:650} body.sang .brandmark small.dt-hien{color:var(--acc)} .brandmark b{font-size:14.5px} /* Ô chọn trong danh mục trượt phải rộng hết khung, không co theo hàng */ .drawer-caidat .ctrl select,.drawer-caidat .ctrl input{flex:1 1 auto;min-width:0} /* Mọi bảng dữ liệu cuộn trong khung riêng */ .scroll{max-width:100%} table{font-size:13.5px} th,td{padding:8px 10px} /* Lưới biểu mẫu về một cột. `grid-column:span 2` gắn nội tuyến trên ô "Chọn xe" trong index.html ép lưới đẻ ra một cột ảo khi chỉ còn một cột thật — đẩy trang tràn ngang 285px ở màn hình 375px. Phải dùng !important vì kiểu nội tuyến thắng mọi bộ chọn. */ .grid-form{grid-template-columns:1fr} .grid-form > *{grid-column:span 1!important} /* Lưới xe và ô màu cho dễ chạm bằng ngón cái */ .cars{grid-template-columns:1fr} /* Hộp thoại chi tiết xe: trước đây bốn lớp lề (26+14 ngoài, 20+22 trong) ăn hết 72px, còn 288px nên lưới .kv đòi tối thiểu 160px mỗi ô chỉ xếp được MỘT cột — trang dài lê thê. Cho hộp thoại tràn hết màn hình và ép hai cột. */ .modal{padding:0} .msheet{border-radius:0;min-height:100%;border:0;margin:0} .mhead{padding:14px 14px} .mbody{padding:14px 14px 26px} .kv{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .kv .b{padding:9px 10px} .kv .b .k{font-size:12px;letter-spacing:.4px} .kv .b .v{font-size:14.5px} /* Ảnh xe: bỏ hẳn mũi tên, chỉ vuốt — chủ showroom chốt 06/09. Chú thích thôi đè lên ảnh, xuống hẳn phía dưới. */ .gnav{display:none!important} .gal .cap{position:static;background:none;color:var(--tx2); padding:8px 2px 0;font-size:12.5px;flex-wrap:wrap;gap:6px} .gal .cap .k{background:var(--card2);color:var(--tx2);border:1px solid var(--line2)} .gal .main{cursor:zoom-in} /* Tờ báo giá: bỏ bớt đệm để vừa màn hình hẹp */ .quote{padding:16px 14px} .qrow{font-size:14.5px} /* Bảng gói vay hay tràn nhất — cho nó cuộn riêng */ .goitb-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch} .goitb{min-width:420px} } /* ===================================================================== MÀN HÌNH LÃI SUẤT & TRẢ GÓP — tab "Lãi suất" Dùng chung token màu của dự án; không thêm màu mới. ===================================================================== */ /* ---- thẻ ngân hàng ---- */ .ls-the{ background:var(--card); border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--r); padding:18px 20px; margin-bottom:16px; } .ls-the.het{border-left-color:var(--bad)} .ls-dau{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-start;margin-bottom:16px} .ls-dau h3{margin:0 0 6px;font-size:19px} .ls-tran{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap} .ls-tran div{display:flex;flex-direction:column;gap:2px} .ls-tran small{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.6px;font-weight:700} .ls-tran b{font-size:16px} .ls-cham{ display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:20px; } .ls-cham.ok{background:rgba(63,191,135,.14);color:var(--ok)} .ls-cham.vang{background:rgba(232,161,58,.14);color:var(--warn)} .ls-cham.do{background:rgba(232,97,95,.14);color:var(--bad)} /* ---- bảng chung của màn hình này ---- */ .ls-bang{width:100%;border-collapse:collapse;font-size:14px} .ls-bang th,.ls-bang td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left} .ls-bang thead th{ font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tx3); font-weight:700;white-space:nowrap; } .ls-bang .p{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .ls-bang tbody tr:last-child td{border-bottom:0} .ls-lai{color:var(--acc2);font-size:15px} body.sang .ls-lai{color:var(--acc)} /* ---- ô con trong thẻ ---- */ .ls-o{ background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:13px 16px; margin-top:14px; } .ls-o.nghi{border-color:rgba(232,161,58,.45)} .ls-o.hoi{border-color:rgba(77,141,255,.35)} .ls-o-dau{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--tx3);font-weight:700;margin-bottom:9px} .ls-o-than{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .ls-lscs{font-size:23px;font-weight:800;color:var(--gold)} .ls-mo{font-size:13px;color:var(--tx2);line-height:1.5} .ls-nguon{font-size:12px;color:var(--tx3);margin-top:7px;line-height:1.5} .ls-nhan{ display:inline-block;font-size:12px;font-weight:800;letter-spacing:.5px; padding:2px 7px;border-radius:5px;vertical-align:middle; } .ls-nhan.nghi{background:rgba(232,161,58,.2);color:var(--warn)} .ls-nhan.nho{background:rgba(232,161,58,.16);color:var(--warn);font-weight:600;letter-spacing:0} /* ---- phí trả nợ trước hạn ---- */ .ls-phi{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px} .ls-phi-o{ background:var(--card);border:1px solid var(--line2);border-radius:9px; padding:8px 13px;display:flex;flex-direction:column;gap:2px;min-width:82px; } .ls-phi-o.mien{border-color:rgba(63,191,135,.45)} .ls-phi-o small{font-size:12px;color:var(--tx3);font-weight:600} .ls-phi-o b{font-size:15px} .ls-phi-o.mien b{color:var(--ok)} /* ---- liên hệ ---- */ .ls-lh{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap} .ls-sdt{ font-weight:700;font-size:16px;text-decoration:none; background:rgba(77,141,255,.13);padding:4px 12px;border-radius:8px; } .ls-hoi{margin:0;padding-left:20px;font-size:14px;color:var(--tx2);line-height:1.6} .ls-hoi li{margin-bottom:4px} /* ---- bốn con số lớn của bảng trả nợ ---- */ .ls-tomtat{ display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px;margin-bottom:16px; } .ls-tomtat.nho{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:10px 0 0} .ls-so{ background:var(--card);border:1px solid var(--line);border-radius:11px; padding:13px 15px;display:flex;flex-direction:column;gap:3px;min-width:0; } .ls-so.ok{border-color:rgba(63,191,135,.45)} .ls-so.ok b{color:var(--ok)} /* Ô "phải nộp để tất toán" — con số khách hỏi, cho nổi hơn các ô cạnh nó */ .ls-so.chinh{border-color:var(--acc);background:rgba(77,141,255,.07)} .ls-so.chinh b{color:var(--acc2)} body.sang .ls-so.chinh b{color:var(--acc)} .ls-so.canh{border-color:rgba(232,161,58,.45)} .ls-so small{font-size:12px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;font-weight:700} .ls-so b{font-size:19px;font-variant-numeric:tabular-nums;line-height:1.25} .ls-so span{font-size:12px;color:var(--tx3)} /* ---- bảng lịch trả nợ: đầu bảng dính, thân cuộn ---- */ .ls-bang-wrap{ max-height:460px;overflow:auto;-webkit-overflow-scrolling:touch; background:var(--card);border:1px solid var(--line);border-radius:var(--r); } .ls-bang.lich{font-size:13.5px} .ls-bang.lich thead th{ position:sticky;top:0;z-index:2;background:var(--card2); border-bottom:1px solid var(--line2); } .ls-bang.lich tfoot td{ position:sticky;bottom:0;background:var(--card2);border-top:1px solid var(--line2); border-bottom:0;font-variant-numeric:tabular-nums; } .ls-bang.lich tr.uoc td{color:var(--tx2);background:rgba(232,161,58,.045)} .ls-canh{ background:rgba(232,161,58,.10);border:1px solid rgba(232,161,58,.4); border-radius:9px;padding:9px 13px;font-size:13.5px;margin-bottom:10px; } /* ---- tra phí tất toán sớm ---- */ .ls-tt{display:flex;gap:11px;align-items:center;flex-wrap:wrap} .ls-tt input{width:110px} .ls-tt label{margin:0} /* ---- đoạn mã sinh ra để dán ---- */ .ls-goi-sua{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:14px} .ls-ma{ background:var(--bg);border:1px solid var(--line2);border-radius:10px; padding:14px 16px;margin:14px 0 0;overflow-x:auto; font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.65; color:var(--tx);white-space:pre; } /* ---- điện thoại ---- */ @media (max-width: 600px) { .ls-the{padding:15px 14px} .ls-tran{margin-left:0;gap:16px} .ls-dau h3{font-size:17px} .ls-o{padding:12px 13px} .ls-bang-wrap{max-height:380px} .ls-bang.lich{font-size:12.5px} .ls-bang th,.ls-bang td{padding:7px 9px} .ls-tomtat{grid-template-columns:1fr 1fr} .ls-so b{font-size:17px} .ls-goi-sua{grid-template-columns:1fr} .ls-tt input{width:100%} } /* ---- bảng tính trả góp dự kiến & xuất ảnh ---- */ .tg-hang{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px} .tg-tick{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--tx2);cursor:pointer;margin-left:auto} /* Công tắc "in kèm khuyến mãi đại lý" — chỉ hiện khi xe đang chọn thật sự có khoản để bật/tắt. Viền cam khi BẬT: bật nghĩa là tờ gửi khách lộ phần đại lý tự bỏ ra, đó là thứ đáng liếc lại một lần trước khi bấm gửi. */ .tg-uudai{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:11px 13px; border:1px solid var(--line2);border-radius:10px;background:var(--bg2);cursor:pointer} .tg-uudai:has(input:checked){border-color:var(--warn);background:rgba(227,173,96,.08)} .tg-uudai input{margin:2px 0 0;flex:none;width:18px;height:18px;cursor:pointer} .tg-uudai span{font-size:13.5px;line-height:1.45;color:var(--tx)} .tg-uudai i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--tx3)} .tg-nut{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px} .tg-xem{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:6px} .tg-trang{display:flex;flex-direction:column;gap:8px;align-items:flex-start} .tg-trang canvas{ width:300px;height:auto;border:1px solid var(--line2);border-radius:8px; background:#fff;box-shadow:var(--sh); } /* ---- khung in PDF: ẩn trên màn hình, chỉ hiện khi in ---- LỖI CŨ: `@page{margin:8mm}` làm vùng in nhỏ hơn khổ A4, mà ảnh lại đặt `width:100%` nên nó CAO HƠN vùng in — phần thừa vài chục điểm ảnh cuối tràn sang trang sau, và chân trang nhảy lên đầu trang kế. Nay: lề trang bằng 0 và mỗi ảnh ghim đúng 210×297mm. Ảnh vốn đã đúng tỉ lệ A4 nên `contain` không cắt gì. Nội dung có sẵn lề 40px bên trong. */ .khung-in-tra-gop{display:none} @media print{ @page{size:A4 portrait;margin:0} html,body{margin:0 !important;padding:0 !important} body.dang-in-tra-gop > *{display:none !important} body.dang-in-tra-gop .khung-in-tra-gop{display:block !important} /* CỐ Ý để `height:auto`, KHÔNG ghim 297mm. Safari trên iPad và iPhone BỎ QUA `@page{size:A4;margin:0}` ở trên và tự áp lề riêng, nên vùng in nhỏ hơn khổ A4. Ghim cứng 297mm là ảnh cao hơn vùng in, mỗi tờ tràn sang trang sau — chủ showroom lấy PDF trên iPad ngày 07/09/2026 ra 15 trang thay vì 5. Để ảnh co theo BỀ NGANG thì đúng ở mọi máy: ảnh thấp hơn A4 một chút (xem CAO_A4 trong xuat-anh.js) nên rộng bao nhiêu cũng không bao giờ cao quá trang, dù trình duyệt có tự thêm lề hay không. */ .khung-in-tra-gop .trang-in{ width:100%;max-width:100%;height:auto;display:block; break-inside:avoid;page-break-inside:avoid; break-after:page;page-break-after:always; } .khung-in-tra-gop .trang-in:last-child{break-after:auto;page-break-after:auto} } @media (max-width: 600px){ .tg-tick{margin-left:0} .tg-trang canvas{width:100%} } /* ---- ngân hàng ở chế độ nhập tay ---- */ .ls-cham.tay{background:rgba(77,141,255,.14);color:var(--acc2)} body.sang .ls-cham.tay{color:var(--acc)} .ls-the.tay{border-left-color:var(--acc)} .ls-o.tay-nhac{border-color:rgba(77,141,255,.4);background:rgba(77,141,255,.06)} /* ---- xuất ảnh: nhắc về việc Chrome chặn tải nhiều tệp ---- */ .tg-luuy{ background:rgba(232,161,58,.10);border:1px solid rgba(232,161,58,.4); border-radius:10px;padding:11px 15px;font-size:13.5px;margin-bottom:14px;color:var(--tx2); } .tg-trang button.xong{border-color:rgba(63,191,135,.55);color:var(--ok)} .btn:disabled{opacity:.45;cursor:default} .btn:disabled:hover{filter:none} /* ---- ô chọn nhu cầu trong tab Báo giá & trả góp ---- */ .nhucau{ margin-top:16px;padding-top:16px;border-top:1px dashed var(--line2); } /* ---- khối ngân hàng thu gọn ở cuối tab ---- */ details.nh-goi{ margin-top:32px;border:1px solid var(--line);border-radius:var(--r); background:var(--card);padding:0 18px; } details.nh-goi > summary{ cursor:pointer;padding:15px 0;font-weight:650;font-size:14.5px;color:var(--tx2); list-style:none;display:flex;align-items:center;gap:9px; } details.nh-goi > summary::-webkit-details-marker{display:none} details.nh-goi > summary::before{content:'▸';color:var(--tx3);font-size:13px} details.nh-goi[open] > summary::before{content:'▾'} details.nh-goi[open] > summary{border-bottom:1px solid var(--line);margin-bottom:14px} details.nh-goi > *:last-child{margin-bottom:18px} /* ================= TAB CHÍNH SÁCH HÃNG ================= Bảng dựng lại đúng dạng bảng chính sách hãng gửi hằng tháng, cộng phần nhật ký "lần này đổi gì" mà bảng của hãng không có. */ .cs-tieude{margin:26px 0 12px; font-size:15px; letter-spacing:.4px; text-transform:uppercase; color:var(--tx3)} .cs-tieude:first-child{margin-top:0} .cs-bang{width:100%; border-collapse:collapse; font-size:14px} .cs-bang th,.cs-bang td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left} .cs-bang thead th{position:sticky; top:0; z-index:1; background:var(--card2); font-size:12.5px; line-height:1.35; white-space:nowrap; color:var(--tx2)} .cs-bang td.num{text-align:right; font-variant-numeric:tabular-nums} /* Tên xe và tên phiên bản không được gãy dòng — bảng của hãng đọc theo hàng, gãy chữ là mắt trượt sang dòng khác. */ .cs-bang tbody td:nth-child(2){white-space:nowrap} .cs-bang tbody td:nth-child(3){min-width:130px} .cs-bang td.nowrap{white-space:nowrap} .cs-bang tbody tr:nth-child(even){background:rgba(127,141,176,.05)} /* Hai cột chữ dài — cho rộng vừa đủ đọc, đừng để cả bảng giãn theo */ .cs-bang .cs-ct{min-width:280px; max-width:420px} .cs-bang .cs-qua{min-width:200px; max-width:320px} /* Cột lô hàng — chỗ DUY NHẤT còn nhắc năm sản xuất và tồn kho */ .cs-bang .cs-lo{min-width:210px; max-width:300px; font-size:13px} .cs-mot-lo{padding:5px 8px; margin-bottom:5px; border-radius:8px; background:rgba(168,106,16,.10); border:1px solid rgba(168,106,16,.28)} .cs-mot-lo:last-child{margin-bottom:0} .cs-lan{margin-bottom:16px} .cs-dau{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px} .cs-dau b{font-size:17px} .cs-tomtat{margin:0 0 14px; color:var(--tx2)} .cs-nhom{margin-top:12px; padding:12px 14px; border-radius:10px; background:var(--card2); border:1px solid var(--line)} .cs-nhom .cs-nhan{font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--tx3); margin-bottom:6px} .cs-nhom ul{margin:0; padding-left:20px} .cs-nhom li{margin:5px 0; line-height:1.5} /* Thay đổi làm ĐỔI TIỀN và chỗ hãng chưa trả lời: tô lên, sale phải đọc */ .cs-nhom.tien{background:rgba(22,87,208,.07); border-color:rgba(22,87,208,.3)} .cs-nhom.tien .cs-nhan{color:var(--acc)} .cs-nhom.chuaro{background:rgba(168,106,16,.08); border-color:rgba(168,106,16,.34)} .cs-nhom.chuaro .cs-nhan{color:var(--warn)} /* Khối .bm-logo cũ đã BỎ ngày 11/09/2026. Nó đặt height:15px (đè lên 20px ở phần thanh trên) và quan trọng hơn: áp filter:invert(1) lên logo. Cách cũ chỉ nạp bản logo ĐEN rồi lật màu cho nền tối. Nay HTML nạp sẵn cả hai bản và CSS chọn bản nào hiện, nên bộ lọc đó lật NGƯỢC bản trắng thành đen — logo nằm trên nền #161d2c gần như biến mất. Đúng lỗi "logo nền tối khó nhìn". Chip lọc hãng thì VẪN dùng logo đen nên vẫn cần lật. */ body:not(.sang) .chips-logo .chip img:not(.bt){filter:invert(1) brightness(1.7)} body:not(.sang) .chip.on img:not(.bt){filter:none} .chips-logo .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 18px} .chips-logo .chip img{height:14px; width:auto; display:block} .chips-logo .chip img.lynk{height:12px} .chips-logo .chip img.bt{height:18px; width:18px; border-radius:3px} .chips-logo .chip.on img.bt{box-shadow:0 0 0 1px rgba(255,255,255,.55)} /* ===================================================================== HAI MÀN THEO DÕI — Việc cần làm · Doanh số Xem assets/theo-doi.js. Biểu đồ vẽ bằng CSS, không nạp thư viện nào. ===================================================================== */ /* ---------- ô trống có hướng dẫn, không để trắng trơn ---------- */ .trong-man{border:1.5px dashed var(--line2);border-radius:var(--r); padding:36px 22px;text-align:center;color:var(--tx3)} .trong-man svg{width:38px;height:38px;margin-bottom:12px;opacity:.55} .trong-man b{display:block;color:var(--tx);font-size:16px;margin-bottom:5px} .trong-man p{margin:0;max-width:420px;margin-inline:auto} /* ---------- danh sách việc ---------- */ .ds-viec{display:flex;flex-direction:column;gap:8px} .the-viec{ display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(140px,1fr) auto auto; align-items:center;gap:14px; background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line2); border-radius:var(--r);padding:12px 16px; } .the-viec.tre{border-left-color:var(--bad)} .tv-chinh{min-width:0} .tv-chinh b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-phu{display:block;color:var(--tx2);font-size:13px} .tv-nhan{display:flex;gap:6px;flex-wrap:wrap} .tv-han{text-align:right;font-size:13.5px;font-weight:650;color:var(--tx2);white-space:nowrap} .the-viec .tv-han.tre{color:var(--bad)} .tv-han small{display:block;font-weight:500;color:var(--tx3);font-size:12px} .the-viec .btn.sm{white-space:nowrap;text-decoration:none;display:inline-flex; align-items:center;min-height:38px} @media (max-width:760px){ .the-viec{grid-template-columns:1fr auto;gap:8px} .tv-nhan{grid-column:1/-1} .tv-han{text-align:left;grid-column:1} .the-viec .btn.sm{grid-column:2;grid-row:3} } /* ---------- ô số tổng quan ---------- */ .luoi-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;margin-bottom:8px} .o-so{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .os-nhan{font-size:12px;text-transform:uppercase;letter-spacing:.7px; color:var(--tx3);font-weight:700} .os-gt{font-size:26px;font-weight:750;letter-spacing:-.5px;margin:4px 0 2px; color:var(--acc2);font-variant-numeric:tabular-nums} body.sang .os-gt{color:var(--acc)} .os-phu{font-size:12.5px;color:var(--tx3)} /* ---------- thanh mục tiêu (bullet) ---------- Chọn dạng này thay đồng hồ đo: gauge chiếm chỗ, mà từ ba chỉ tiêu trở lên thì xếp lưới thanh dễ so hơn hẳn. */ .ds-muc{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px} .muc-tieu{background:var(--card);border:1px solid var(--line); border-radius:var(--r);padding:14px 16px} .mt-dau{display:flex;justify-content:space-between;align-items:baseline; gap:10px;font-size:13.5px;color:var(--tx2);margin-bottom:8px} .mt-dau b{color:var(--tx);font-variant-numeric:tabular-nums;white-space:nowrap} .mt-thanh{height:10px;border-radius:20px;background:var(--card2); border:1px solid var(--line2);overflow:hidden} .mt-thanh i{display:block;height:100%;background:var(--acc); border-radius:20px;transition:width .35s ease} .mt-phan{text-align:right;font-size:12.5px;font-weight:700;color:var(--tx3);margin-top:5px} /* ---------- phễu bán hàng ---------- Giữ ĐÚNG thứ tự trạng thái trong danh mục, không sắp theo số lượng — phễu mà xáo thứ tự thì không còn là phễu. */ .pheu{display:flex;flex-direction:column;gap:7px} .pheu-dong{display:grid;grid-template-columns:minmax(120px,180px) 1fr 56px; align-items:center;gap:12px} .pd-ten{font-size:13.5px;color:var(--tx2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .pd-thanh{height:22px;background:var(--card2);border:1px solid var(--line); border-radius:7px;overflow:hidden} .pd-thanh i{display:block;height:100%;background:var(--acc); opacity:.85;transition:width .35s ease} .pd-so{text-align:right;font-variant-numeric:tabular-nums;font-size:14px} @media (max-width:600px){ .pheu-dong{grid-template-columns:1fr 46px} .pd-ten{grid-column:1/-1} } /* ===================================================================== VÙNG CHẠM TỐI THIỂU 44×44 --------------------------------------------------------------------- Đo trên bản cũ: 21 trong 27 phần tử bấm được thấp dưới 44px. Trên máy tính có chuột thì không sao, nhưng app này chạy cả trên iPad đặt trước mặt khách — ngón tay không nhắm được ô cao 36px. Đặt bằng min-height chứ không phải height, để ô nào cần cao hơn (vùng nhập nhiều dòng) vẫn tự giãn. ===================================================================== */ select, input:not([type="checkbox"]):not([type="radio"]), .btn, .chip{ min-height:44px } .btn.sm{ min-height:44px } /* kể cả nút phụ trong bảng: app chạy trên iPad */ .thsw{ width:44px; height:44px } .chip{ display:inline-flex; align-items:center } /* ===================================================================== HỒ SƠ KHÁCH — kho dữ liệu khách hàng Xem assets/ho-so-khach.js ===================================================================== */ /* ---- hai chế độ ---- */ .khach-che{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px} .khach-che button{background:none;border:0;border-bottom:2.5px solid transparent; color:var(--tx2);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer; padding:11px 16px;min-height:44px;display:flex;align-items:center;gap:8px} .khach-che button.on{color:var(--acc2);border-bottom-color:var(--acc2)} body.sang .khach-che button.on{color:var(--acc);border-bottom-color:var(--acc)} .khach-che .dem{background:var(--card2);border:1px solid var(--line2);border-radius:20px; padding:1px 8px;font-size:12px;font-weight:700;color:var(--tx3)} .khach-che button.on .dem{border-color:currentColor;color:inherit} /* ---- hàng tìm kiếm ---- */ .loc-dau{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px} .o-tim{position:relative;flex:1;min-width:260px} .o-tim svg{position:absolute;left:13px;top:50%;transform:translateY(-50%); width:17px;height:17px;color:var(--tx3);pointer-events:none} .o-tim input{width:100%;padding-left:38px} /* ---- chip lọc kèm số đếm ---- */ .loc-hang{display:flex;gap:12px;align-items:baseline;margin-bottom:9px;flex-wrap:wrap} .loc-nhan{flex:none;width:104px;font-size:12px;text-transform:uppercase; letter-spacing:.6px;color:var(--tx3);font-weight:700;padding-top:9px} .loc-hang .chips{flex:1;min-width:0} #dsChip .chip{padding:8px 12px;font-size:13px;gap:7px} #dsChip .chip i{font-style:normal;font-weight:700;font-size:12px; background:var(--bg2);border-radius:20px;padding:1px 7px;color:var(--tx3)} #dsChip .chip.on i{background:rgba(255,255,255,.25);color:#fff} /* ---- khung: danh sách bên trái, hồ sơ bên phải ---- */ .khach-khung{display:grid;grid-template-columns:minmax(340px,440px) 1fr; gap:16px;align-items:start;margin-top:16px} .ds-dem{font-size:12.5px;color:var(--tx3);margin:0 0 8px} .ds-khach{display:flex;flex-direction:column;gap:7px} .k-dong{display:grid;grid-template-columns:1fr auto;gap:4px 12px; background:var(--card);border:1px solid var(--line);border-left:3px solid transparent; border-radius:var(--r);padding:12px 14px;cursor:pointer; transition:border-color .12s,background .12s} .k-dong:hover{border-color:var(--line2);background:var(--card2)} .k-dong:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} .k-dong.tre{border-left-color:var(--bad)} .k-dong.chon{border-color:var(--acc2);background:var(--card2)} .k-ten b{display:block;font-size:15px} .k-ten span{display:block;color:var(--tx3);font-size:12.5px} .k-xe{grid-column:1;font-size:13px;color:var(--tx2)} .k-nhan{grid-column:1;display:flex;gap:6px;flex-wrap:wrap;margin-top:2px} .k-lich{grid-column:2;grid-row:1/4;text-align:right;font-size:13px; font-weight:650;color:var(--tx2);white-space:nowrap} .k-lich.tre{color:var(--bad)} .k-lich small{display:block;font-weight:500;color:var(--tx3);font-size:12px;margin-top:3px} /* ---- cột hồ sơ ---- */ .hs-cot{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px;position:sticky;top:74px} .hs-trong{text-align:center;color:var(--tx3);padding:34px 12px} .hs-trong svg{width:40px;height:40px;opacity:.45;margin-bottom:10px} .hs-trong p{margin:0;font-size:13.5px} .hs-dau{position:relative;padding-bottom:14px;border-bottom:1px solid var(--line); margin-bottom:16px} .hs-dau h3{margin:0 0 8px;font-size:19px;padding-right:36px} .hs-nhan{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .hs-dong{position:absolute;right:0;top:-6px;width:44px;height:44px;border-radius:10px; background:var(--card2);border:1px solid var(--line2);color:var(--tx2); font-size:15px;cursor:pointer;line-height:1} .hs-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;margin-bottom:16px} /* `> span` chứ không phải `span`: giá trị "02/09/2026 — trễ 9 ngày" cũng bọc trong nằm trong . Viết `span` là luật nhãn ăn vào cả nó — chữ báo trễ thành chữ hoa cỡ 12 như một cái nhãn. */ .hs-o1 > span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.5px; color:var(--tx3);font-weight:650} .hs-o1 b{font-size:14px;font-weight:600} .hs-o1 .do{color:var(--bad)} .hs-ghi{background:var(--card2);border-radius:10px;padding:11px 14px; font-size:13.5px;color:var(--tx2);margin-bottom:4px} /* ---- dòng kể lịch sử: nhật ký và báo giá TRỘN CHUNG theo thời gian ---- Tách hai danh sách riêng thì không thấy được "gửi báo giá xong ba ngày sau mới gọi lại" — mà đó chính là thứ cần nhìn ra. */ .dong-ke{list-style:none;margin:0;padding:0 0 0 18px;position:relative} .dong-ke::before{content:'';position:absolute;left:4px;top:6px;bottom:6px; width:2px;background:var(--line)} .mk{position:relative;padding:0 0 16px 0} .mk::before{content:'';position:absolute;left:-18px;top:5px;width:10px;height:10px; border-radius:50%;background:var(--card);border:2px solid var(--line2)} .mk.bg::before{border-color:var(--acc2);background:var(--acc2)} .mk-luc{font-size:12px;color:var(--tx3);font-variant-numeric:tabular-nums} .mk-nd{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-top:2px} .mk-nd b{font-size:14px;font-weight:600} .mk-tien{font-size:13.5px;font-weight:700;color:var(--acc2)} body.sang .mk-tien{color:var(--acc)} .hs-chan{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)} /* ---- hẹp: hồ sơ che lên danh sách ---- */ @media (max-width:1100px){ .khach-khung{grid-template-columns:1fr} .hs-cot{display:none} body.dang-xem-ho-so .hs-cot{display:block;position:fixed;inset:56px 0 0;z-index:75; border-radius:0;overflow-y:auto;padding:18px 16px 40px} body.dang-xem-ho-so .hs-cot .hs-trong{display:none} } @media (max-width:600px){ .loc-nhan{width:100%;padding-top:0} .k-lich{grid-column:1;grid-row:auto;text-align:left} .khach-che button{padding:11px 12px;font-size:13.5px} } /* Ba tiêu chí lọc ít dùng, gấp lại cho danh sách khách lên cao */ .loc-them{border-top:1px solid var(--line);margin-top:6px;padding-top:8px} .loc-them summary{cursor:pointer;font-size:12.5px;color:var(--tx3);font-weight:650; padding:8px 2px;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none} .loc-them summary::-webkit-details-marker{display:none} .loc-them summary::before{content:'';width:7px;height:7px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(-45deg);flex:none;transition:transform .15s} .loc-them[open] summary::before{transform:rotate(45deg)} .loc-them summary:hover{color:var(--tx2)} .loc-them > .loc-hang:first-of-type{margin-top:6px} /* Khối tra cứu gấp lại ở màn Bảng giá — nhật ký chính sách và mục hãng chưa trả lời. Số lượng hiện ngay trên nhãn, khỏi mở ra mới biết. */ .cs-gap{border:1px solid var(--line);border-radius:var(--r);background:var(--card); margin-bottom:12px;overflow:hidden} .cs-gap > summary{cursor:pointer;padding:14px 18px;min-height:52px;display:flex; align-items:center;gap:10px;flex-wrap:wrap;list-style:none;font-size:14.5px} .cs-gap > summary::-webkit-details-marker{display:none} .cs-gap > summary::before{content:'';width:8px;height:8px;flex:none; border-right:2px solid var(--tx3);border-bottom:2px solid var(--tx3); transform:rotate(-45deg);transition:transform .15s} .cs-gap[open] > summary::before{transform:rotate(45deg)} .cs-gap > summary:hover{background:var(--card2)} .cs-gap > summary .pill{background:var(--warn);color:#0f1420;border-radius:20px; padding:1px 9px;font-size:12px;font-weight:800} body.sang .cs-gap > summary .pill{color:#fff} .cs-gap > *:not(summary){padding:0 18px 16px} .cs-gap .card{border:0;background:none;padding:0;margin-bottom:14px} /* Nút trong ô bảng không được xuống dòng — "Báo giá" vỡ thành hai dòng làm mỗi hàng cao thêm 20px, nhân 25 hàng là gần nửa màn hình. */ table .btn.sm{white-space:nowrap} /* Nút chuyển kiểu xem ở màn Tư vấn */ .xem-kieu{display:inline-flex;gap:2px;padding:3px;border-radius:11px; background:var(--card2);border:1px solid var(--line2);margin:22px 0 14px} .xem-kieu button{font:inherit;font-size:13.5px;font-weight:650;cursor:pointer; border:0;background:none;color:var(--tx2);padding:9px 16px;border-radius:8px; min-height:44px} .xem-kieu button.on{background:var(--acc);color:#fff} .xem-kieu button:not(.on):hover{color:var(--tx)} /* Kịch bản xử lý từ chối — mỗi câu một khối gấp */ .kb-cau{background:var(--card);border:1px solid var(--line);border-radius:var(--r); margin-bottom:8px;overflow:hidden} .kb-cau > summary{cursor:pointer;padding:14px 18px;min-height:52px;display:flex; align-items:center;gap:11px;list-style:none;font-size:15px;font-weight:650; color:var(--bad)} .kb-cau > summary::-webkit-details-marker{display:none} .kb-cau > summary::before{content:'';width:8px;height:8px;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s;opacity:.7} .kb-cau[open] > summary::before{transform:rotate(45deg)} .kb-cau > summary:hover{background:var(--card2)} .kb-noi{padding:0 18px 16px;border-top:1px solid var(--line);padding-top:14px} /* ===================================================================== THANH CUỘN — mảnh, không nền, chỉ hiện con trượt --------------------------------------------------------------------- Thanh cuộn mặc định của Windows rộng 17px và có nền sáng, ăn mất chỗ của nội dung và tạo một vệt dọc chói ngay cạnh màn hình chính. ===================================================================== */ *{scrollbar-width:thin;scrollbar-color:var(--line2) transparent} *::-webkit-scrollbar{width:8px;height:8px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line2);border-radius:20px} *::-webkit-scrollbar-thumb:hover{background:var(--tx3)} *::-webkit-scrollbar-corner{background:transparent} /* ===================================================================== BẢNG GIÁ — cố định đầu bảng và hai cột định danh --------------------------------------------------------------------- Bảng 25 dòng × 16 cột: kéo sang phải là mất tên xe, cuộn xuống là mất tên cột. Ghim lại cả hai. ===================================================================== */ .bg-khung{ max-height:calc(100vh - 250px); overflow:auto; border:1px solid var(--line);border-radius:var(--r);background:var(--card); /* Kéo thả chuột để xem cột phía sau — xem keoDeXem() trong app.js */ cursor:grab; } .bg-khung.dang-keo{cursor:grabbing;user-select:none} .bg-khung table{margin:0} .bgtable thead th{ position:sticky;top:0;z-index:3; background:var(--card2); /* Viền dưới vẽ bằng box-shadow: viền thật của không dính theo khi phần tử sticky, sẽ bị nội dung trượt đè lên. */ box-shadow:inset 0 -1px 0 var(--line2); } /* Hai cột định danh ghim trái */ .bgtable th:nth-child(2),.bgtable td:nth-child(2){ position:sticky;left:0;z-index:2;background:var(--card);min-width:150px} .bgtable th:nth-child(3),.bgtable td:nth-child(3){ position:sticky;left:150px;z-index:2;background:var(--card);min-width:110px} .bgtable thead th:nth-child(2),.bgtable thead th:nth-child(3){z-index:4;background:var(--card2)} .bgtable tbody tr:hover td:nth-child(2), .bgtable tbody tr:hover td:nth-child(3){background:var(--card2)} /* Vạch ngăn để biết chỗ nào là phần ghim */ .bgtable th:nth-child(3),.bgtable td:nth-child(3){box-shadow:1px 0 0 var(--line2)} @media (max-width:600px){ .bgtable th:nth-child(2),.bgtable td:nth-child(2), .bgtable th:nth-child(3),.bgtable td:nth-child(3){position:static;min-width:0} } /* BỎ hiệu ứng "rê chuột vào cột thì bung ra" — 11/09/2026. Nó đặt nav.tabs thành position:fixed khi hover. Phần tử fixed bị lấy ra khỏi dòng chảy nên ô lưới đầu tiên của .khung sập lại, kéo toàn bộ nội dung dồn sang trái và mất một phần hiển thị. Muốn mở lại cột thì bấm nút "Mở rộng" ở đáy cột — rõ ràng và không phá bố cục. */ /* ===================================================================== HIỆU ỨNG CHUYỂN --------------------------------------------------------------------- Mọi thứ trong app xuất hiện tức thì, đổi tab là màn hình giật một cái. Thêm chuyển tiếp ngắn để mắt kịp bám theo — nhưng ngắn thôi: đây là công cụ dùng liên tục, hiệu ứng dài hoá ra chờ đợi. Thời lượng chọn theo hướng dẫn của bộ dữ liệu ui-ux-pro-max cho phong cách Swiss: hover 200–250ms, chuyển màn 180–300ms. ===================================================================== */ /* ---- đổi tab: nội dung mờ dần lên, nhích nhẹ ---- Có GSAP (assets/hieu-ung.js) thì từng khối hiện lần lượt thay cho cả màn mờ một lượt — tắt keyframe CSS để không chạy hai hiệu ứng chồng. */ .panel.on{animation:hienMan .2s ease-out both} html.co-gsap .panel.on{animation:none} /* ---- vệt sáng menu dọc: một mảng màu trượt tới nút đang chọn ---- Vị trí do hieu-ung.js tính (datVet). Nút đang chọn để nền trong suốt, màu nền là của vệt nằm phía sau. Chỉ bật ở máy tính và iPad. */ .tab-vet{position:absolute; left:0; top:0; width:0; height:0; border-radius:10px; background:var(--acc); pointer-events:none; z-index:0; opacity:0} html.co-vet-menu nav.tabs button{z-index:1} html.co-vet-menu nav.tabs button.on, html.co-vet-menu nav.tabs button.on:hover{background:transparent} /* ---- đổi sáng/tối: vòng tròn lan (View Transitions, xem HieuUng.doiNen) ---- Tắt kiểu mờ chéo mặc định của trình duyệt; vòng tròn do clip-path lo. */ ::view-transition-old(root),::view-transition-new(root){animation:none; mix-blend-mode:normal} ::view-transition-new(root){z-index:2} ::view-transition-old(root){z-index:1} @keyframes hienMan{ from{opacity:0; transform:translateY(6px)} to {opacity:1; transform:none} } /* ---- đổi nền sáng/tối: chuyển màu thay vì nháy ---- Lớp .dang-doi-nen chỉ tồn tại 340ms, xem datGiaoDien() trong app.js. */ body.dang-doi-nen, body.dang-doi-nen *, body.dang-doi-nen *::before, body.dang-doi-nen *::after{ transition:background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease, fill .28s ease !important; } /* ---- nút, ô chọn, thẻ ---- */ .btn,.chip,.badge,select,input,textarea, nav.tabs button,.khach-che button,.xem-kieu button,.nut-bc,.nut-icon,.thsw{ transition:background-color .18s ease, color .18s ease, border-color .18s ease, filter .18s ease, transform .12s ease; } .btn:active,.chip:active,nav.tabs button:active{transform:scale(.97)} /* Thẻ xe và dòng khách nhấc nhẹ khi rê chuột */ .carcard,.k-dong,.the-viec,.o-so,.muc-tieu{ transition:transform .16s ease, border-color .16s ease, background-color .16s ease} /* ---- khối gấp mở ra ---- */ .kb-noi,.cs-gap > *:not(summary),.loc-them > .loc-hang{ animation:xoMo .18s ease-out both} @keyframes xoMo{from{opacity:0}to{opacity:1}} /* ---- bảng thả xuống ---- */ .bang-bc[data-mo="1"]{animation:thaXuong .16s ease-out both} @keyframes thaXuong{ from{opacity:0; transform:translateY(-6px)} to {opacity:1; transform:none} } /* ---- cột điều hướng bung/gọn ---- */ .khung{transition:grid-template-columns .2s ease} nav.tabs{transition:width .2s ease, box-shadow .2s ease} /* ---- hồ sơ khách hiện ra ---- */ #hsCot > *{animation:hienMan .22s ease-out both} /* Ai tắt hiệu ứng trong hệ điều hành thì tôn trọng — đã có luật chung ở đầu file, nhắc lại ở đây cho chắc vì phần này toàn animation. */ @media (prefers-reduced-motion:reduce){ .panel.on,.kb-noi,.cs-gap > *:not(summary),.loc-them > .loc-hang, .bang-bc[data-mo="1"],#hsCot > *{animation:none !important} body.dang-doi-nen,body.dang-doi-nen *{transition:none !important} } /* ===================================================================== MÀN TƯ VẤN — một danh sách, xe không khớp làm mờ --------------------------------------------------------------------- Làm MỜ chứ không giấu: sale vẫn thấy chiếc xe đó tồn tại để còn chào phương án khác nếu khách đổi ý giữa chừng. Giấu đi thì phải nhớ bỏ lọc mới thấy lại — thêm một thao tác giữa lúc đang nói chuyện với khách. ===================================================================== */ .o-xe-luoi{position:relative;transition:opacity .22s ease, filter .22s ease} .o-xe-luoi.mo{opacity:.34;filter:grayscale(.7)} .o-xe-luoi.mo:hover{opacity:.85;filter:none} /* Số thứ hạng — chỉ hiện khi đang lọc theo nhu cầu */ .xe-hang{ position:absolute;top:10px;left:10px;z-index:2; width:26px;height:26px;border-radius:50%; background:var(--acc);color:#fff; font-size:13px;font-weight:800; display:grid;place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.35); } /* ===================================================================== TAB BÁO GIÁ — thanh làm việc dính trên đầu --------------------------------------------------------------------- Bản cũ: panel cao 1768px, hai nút xuất ở y=1673, còn nút lưu báo giá thì nằm ở TAB KHÁC. Lập xong một báo giá phải cuộn gần hai màn rồi đổi tab. Nay gom vào một chỗ và ghim lại. top:56px vì thanh trên của app cao đúng 56px — dán ngay dưới nó. ===================================================================== */ .bg-thanh{ position:sticky; top:56px; z-index:30; display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:14px 18px; margin-bottom:18px; box-shadow:var(--sh); } .bgt-trai{display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; flex:1; min-width:0} .bgt-trai .fld{min-width:200px} .bgt-nut{display:flex; gap:10px; flex-wrap:wrap; flex:none} /* --------------------------------------------------------------------- BỘ CHỌN PHẦN — "Lăn bánh · Trả góp · Cả bộ" (16/09/2026) Thẻ gốc: Escape, bẫy tiêu điểm, nền tối đều có sẵn. Trên máy tính là hộp giữa màn; trên điện thoại (dien-thoai.css) đổi thành tấm trượt từ đáy lên cho ngón cái với tới. --------------------------------------------------------------------- */ dialog.chon-phan{ width:min(380px, calc(100vw - 32px)); padding:0; border:1px solid var(--line2); border-radius:14px; background:var(--card); color:var(--tx); box-shadow:var(--sh); } dialog.chon-phan::backdrop{background:rgba(0,0,0,.55)} .chon-phan-dau{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)} .chon-phan-dau b{font-size:15px} .chon-phan-x{all:unset; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; color:var(--tx2); font-size:18px; cursor:pointer} .chon-phan-x:hover{background:var(--card2)} .chon-phan-muc{all:unset; box-sizing:border-box; display:flex; flex-direction:column; gap:3px; width:100%; padding:13px 16px; cursor:pointer; border-top:1px solid var(--line)} .chon-phan-muc:first-of-type{border-top:0} .chon-phan-muc b{font-size:15px; font-weight:700; color:var(--tx)} .chon-phan-muc span{font-size:12.5px; color:var(--tx3); line-height:1.4} .chon-phan-muc:hover:not(:disabled){background:var(--card2)} .chon-phan-muc:focus-visible{outline:2px solid var(--acc2); outline-offset:-2px} /* Khoá kèm LÝ DO ngay dưới — không để sale đoán vì sao bấm không được */ .chon-phan-muc:disabled{cursor:not-allowed} .chon-phan-muc:disabled b{color:var(--tx3)} .chon-phan-muc:disabled span{color:var(--warn)} @media (max-width:760px){ .bg-thanh{gap:12px; padding:12px 14px} .bgt-nut{width:100%} .bgt-nut .btn{flex:1} } /* Khi in tờ báo giá thì thanh này không được lên giấy */ @media print{ .bg-thanh{display:none} } /* ===================================================================== TAB HƯỚNG DẪN — danh sách thu gọn, sửa được. Làm lại 11/09/2026. --------------------------------------------------------------------- Mỗi mục là một
: mặc định chỉ thấy dòng tiêu đề, bấm mới mở. Chủ showroom muốn nhìn một lượt là thấy hết đầu mục, mục nào đã biết thì ẩn đi, và sửa được nội dung. Nội dung và cách vẽ: huong-dan.js. Một cột, rộng tối đa 880px: danh sách tiêu đề đọc dọc từ trên xuống nhanh hơn hai cột, và mở một mục ra thì không làm cột bên kia nhảy. ===================================================================== */ #hdND{max-width:880px} /* Mục lục — dính trên đầu vùng cuộn. Màn rộng thì XUỐNG DÒNG: cuộn ngang trên máy tính không có dấu hiệu gì cho biết còn mục phía sau, hai nhóm cuối ("Trục trặc", "Ghi chú của tôi") nằm khuất mà không ai hay. Máy hẹp mới cuộn ngang, vì ở đó vuốt ngang là thói quen sẵn có. */ .hd-muc{ position:sticky; top:var(--cao-dau); z-index:5; display:flex; gap:8px; flex-wrap:wrap; padding:12px 0; background:var(--bg); border-bottom:1px solid var(--line); -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .hd-muc a{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px; border-radius:20px; background:var(--card); border:1px solid var(--line2); color:var(--tx2); text-decoration:none; font-size:13.5px; font-weight:600; white-space:nowrap; transition:background .18s ease, color .18s ease, border-color .18s ease; } .hd-muc a:hover{background:var(--card2); color:var(--tx); border-color:var(--acc2)} .hd-muc a:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} .hd-muc a i{font-style:normal; font-size:12px; color:var(--tx3); font-variant-numeric:tabular-nums} .hd-cong-cu{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0 2px} .hd-dan{flex:1} .hd-de{ margin:26px 0 10px; font-size:13px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tx3); } .hd-ds{display:flex; flex-direction:column; gap:8px} /* ---------- một mục ---------- */ .hd-item{background:var(--card); border:1px solid var(--line); border-radius:12px} .hd-item[open]{border-color:var(--line2)} .hd-item > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; min-height:48px; padding:11px 16px; /* 48: chạm được trên iPad */ font-size:15px; font-weight:650; color:var(--tx); line-height:1.35; border-radius:12px; } .hd-item > summary::-webkit-details-marker{display:none} .hd-item > summary:hover{background:var(--card2)} .hd-item > summary:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} /* mũi tên vẽ bằng viền — ký tự ›/⌄ mỗi phông một hình */ .hd-item > summary::after{ content:''; flex:none; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--tx3); border-bottom:2px solid var(--tx3); transform:rotate(45deg); transition:transform .18s ease; } .hd-item[open] > summary::after{transform:rotate(225deg)} /* Mục "nặng" — sai là khách chịu hậu quả — có chấm vàng trước tiêu đề, để lướt danh sách vẫn thấy mục nào phải đọc kỹ */ .hd-item.nang > summary::before{ content:''; flex:none; width:8px; height:8px; border-radius:50%; background:var(--warn); } .hd-ten{min-width:0} .hd-nhan{ flex:none; font-size:11.5px; font-weight:700; color:var(--tx2); border:1px solid var(--line2); border-radius:6px; padding:1px 7px; } .hd-than{padding:2px 16px 4px; max-width:68ch; color:var(--tx2); line-height:1.65} .hd-than p{margin:0 0 10px} .hd-than b{color:var(--tx); font-weight:700} /* Công thức — chữ đều nét để các dấu = thẳng cột nhau */ .hd-ct{ margin:2px 0 12px; padding:12px 14px; background:var(--card2); border:1px solid var(--line); border-radius:10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.8; color:var(--tx); white-space:pre; overflow-x:auto; } .hd-nut{display:flex; gap:8px; flex-wrap:wrap; padding:6px 16px 14px} /* ---------- sửa / thêm ---------- */ .hd-form{display:flex; flex-direction:column; gap:12px; padding:4px 16px 16px} .hd-nhom-ds > .hd-form{ background:var(--card); border:1px solid var(--acc2); border-radius:12px; padding:16px; margin-bottom:8px; } .hd-form textarea{ width:100%; background:var(--card); color:var(--tx); border:1px solid var(--line2); border-radius:9px; padding:10px 12px; font:inherit; font-size:14px; line-height:1.55; resize:vertical; outline:none; } .hd-form textarea:focus{border-color:var(--acc)} .hd-form .hd-nut{padding:0} .hd-meo{margin:-4px 0 0; font-size:12.5px; color:var(--tx3)} .hd-meo b{color:var(--tx2); font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:600} .hd-loi{margin:0; color:var(--bad); font-size:13.5px; font-weight:600} .hd-rong{margin:0; padding:10px 2px; font-size:14px; color:var(--tx3)} /* ---------- mục đã ẩn ---------- */ .hd-da-an{margin-top:30px; padding-top:14px; border-top:1px dashed var(--line2)} .hd-da-an > summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--tx3); } .hd-da-an > summary i{font-style:normal; letter-spacing:0} .hd-da-an ul{list-style:none; margin:8px 0 14px; padding:0} .hd-da-an li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--tx2); font-size:14.5px; } /* ---------- tab Khách: dòng "Ghi vào hồ sơ của số …" ---------- */ .cs-cho{margin:0 0 14px; font-size:14px; color:var(--tx2)} .cs-cho b{color:var(--tx); font-variant-numeric:tabular-nums} .cs-cho.thieu{color:var(--warn)} @media (prefers-reduced-motion:reduce){ .hd-item > summary::after{transition:none} } @media (max-width:760px){ .hd-muc{flex-wrap:nowrap; overflow-x:auto} .hd-item > summary{padding:11px 14px} .hd-than{padding:2px 14px 4px; max-width:none} .hd-nut{padding:6px 14px 14px} } /* ===================================================================== QUẢN LÝ HỒ SƠ KHÁCH — thêm 11/09/2026 --------------------------------------------------------------------- Hộp thoại thêm/sửa, hộp xác nhận xoá, ngăn kéo hồ sơ mở từ tab khác, và ghi/sửa nhật ký ngay trong dòng kể. Dùng gốc của trình duyệt chứ không tự dựng lớp phủ: nó tự giữ tiêu điểm bên trong, Esc tự đóng, trình đọc màn hình tự biết đây là hộp thoại. Tự dựng thì phải tự làm lại cả ba — và thường quên một. ===================================================================== */ /* Nút nguy hiểm, hai mức: · .nguy — viền đỏ, chữ đỏ. Dùng cho nút MỞ việc xoá (chưa xoá ngay). · .nguy-dac — nền đỏ đặc. Chỉ dùng cho nút XÁC NHẬN xoá cuối cùng. Nền đặc KHÔNG dùng --bad: chữ trắng trên #ea7b70 chỉ đạt 2,78:1. */ .btn.nguy{color:var(--bad);border-color:var(--bad)} .btn.nguy:hover{background:var(--card2)} .btn.nguy-dac{background:var(--nguy-dac);color:#fff} #dsThem{margin-left:auto;white-space:nowrap} /* ---------- đầu hồ sơ ---------- */ .hs-nut{display:flex;gap:8px;flex-wrap:wrap} .hs-nut .btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center} .hs-xoa-bang{ border:1px solid var(--line2);border-left:3px solid var(--warn); background:var(--card2);border-radius:10px;padding:12px 14px; } .hs-xoa-bang p{margin:0 0 10px;font-size:13.5px;color:var(--tx2);line-height:1.55} .hs-xoa-bang b{color:var(--tx)} .hs-ls-dau{display:flex;align-items:center;justify-content:space-between; gap:10px;margin:22px 0 10px} .hs-ls-dau .sect-title{margin:0} /* ---------- dòng kể: nút Sửa trên từng dòng nhật ký ---------- */ .mk.cs{padding-right:74px} .mk-sua{ position:absolute;right:0;top:0; min-height:44px;min-width:62px;padding:0 12px; border:1px solid var(--line2);border-radius:9px;background:transparent; color:var(--tx2);font:inherit;font-size:13px;font-weight:600;cursor:pointer; transition:color .15s ease,border-color .15s ease; } .mk-sua:hover{color:var(--tx);border-color:var(--acc2)} .mk-sua:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} .mk-hen{font-size:12.5px;color:var(--tx3);white-space:nowrap} .mk.dang-sua{padding-right:0} /* ---------- biểu mẫu nhật ký (ghi mới + sửa tại chỗ) ---------- */ .nk-moi{margin:0 0 16px} .nk-form{ background:var(--card2);border:1px solid var(--line2);border-radius:12px; padding:14px;display:flex;flex-direction:column;gap:12px;margin-top:6px; } .nk-hang{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px} .nk-nut{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nk-dan{flex:1} .nk-loi{margin:0;color:var(--bad);font-size:13.5px;font-weight:600} /* textarea chưa có kiểu gốc trong file này — ô nhập một dòng thì có */ .nk-form textarea,.hop-thoai textarea{ width:100%;background:var(--card);color:var(--tx); border:1px solid var(--line2);border-radius:9px; padding:9px 11px;font:inherit;font-size:14px;line-height:1.5; resize:vertical;outline:none; } .nk-form textarea:focus,.hop-thoai textarea:focus{border-color:var(--acc)} /* ---------- hộp thoại chung ---------- */ dialog.hop-thoai{ padding:0;border:1px solid var(--line2);border-radius:16px; background:var(--card);color:var(--tx); box-shadow:0 24px 64px rgba(0,0,0,.5); width:min(640px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); } dialog.hop-thoai::backdrop,dialog.ngan-ho-so::backdrop{background:rgba(5,8,14,.6)} dialog.hop-thoai[open]{animation:hop-vao .18s ease-out} @keyframes hop-vao{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}} .hop-nut{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} /* Hộp thêm/sửa: đầu và chân đứng yên, chỉ phần giữa cuộn — nút Lưu luôn nằm trong tầm mắt dù biểu mẫu dài. */ .hop-form form{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)} .hf-dau{position:relative;padding:18px 20px 12px;border-bottom:1px solid var(--line)} .hf-dau h3{margin:0;font-size:18px;padding-right:52px} .hf-dau .hs-dong{top:8px;right:12px} .hf-than{overflow-y:auto;padding:18px 20px;overscroll-behavior:contain} .hop-form .hop-nut{padding:14px 20px;border-top:1px solid var(--line)} .fld.rong{grid-column:1/-1} .hf-loi{ margin-top:16px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.55; border:1px solid var(--bad);background:var(--card2);color:var(--tx2); } .hf-loi b{color:var(--bad)} .hf-loi-nut{margin:10px 0 8px} .hf-loi .tiny{margin:0} /* Hộp xác nhận xoá — hẹp, nói ngắn */ dialog.hop-xac-nhan{width:min(440px,calc(100vw - 24px));padding:22px} .hop-xac-nhan h3{margin:0 0 10px;font-size:18px;line-height:1.35} .hop-xac-nhan p{margin:0 0 20px;color:var(--tx2);line-height:1.6;font-size:14.5px} .hop-xac-nhan b{color:var(--tx)} /* ---------- ngăn kéo hồ sơ — mở từ tab Việc cần làm ---------- */ dialog.ngan-ho-so{ /* mặc định nằm giữa màn và cao tối đa 100% trừ lề. Ghim nó vào mép phải, cao trọn màn. */ position:fixed;inset:0 0 0 auto;margin:0; width:min(580px,100vw);max-width:100vw;height:100dvh;max-height:100dvh; padding:0;border:0;border-left:1px solid var(--line2); background:var(--card);color:var(--tx); box-shadow:-16px 0 48px rgba(0,0,0,.45); } dialog.ngan-ho-so[open]{animation:ngan-vao .22s ease-out} @keyframes ngan-vao{from{transform:translateX(28px);opacity:.5}to{transform:none;opacity:1}} .ngan-than{height:100%;overflow-y:auto;padding:22px 20px 48px;overscroll-behavior:contain} /* Không cho trang phía sau cuộn theo khi đang lướt trong ngăn */ body.mo-ngan-ho-so{overflow:hidden} @media (prefers-reduced-motion:reduce){ dialog.hop-thoai[open],dialog.ngan-ho-so[open]{animation:none} } /* ---------- tab Việc: thẻ khách bấm được ---------- */ .the-viec.co-ho-so{cursor:pointer;transition:border-color .15s ease,background .15s ease} .the-viec.co-ho-so:hover{border-color:var(--line2);background:var(--card2)} .the-viec.co-ho-so:focus-visible{outline:2px solid var(--acc2);outline-offset:2px} /* ---------- danh sách: hồ sơ đã xoá ---------- */ /* Không làm mờ bằng opacity: mờ cả khối là chữ tụt dưới ngưỡng đọc. Dùng viền nét đứt bên trái để phân biệt. */ .k-dong.da-xoa{border-left:3px dashed var(--tx3)} .k-dong.da-xoa .k-lich{color:var(--tx3)} .ds-dem-xoa{color:var(--warn);font-weight:600} /* ---------- máy hẹp ---------- */ @media (max-width:600px){ /* Hộp thêm/sửa phủ trọn màn: bàn phím ảo chiếm nửa màn hình rồi, hộp nổi ở giữa thì còn chỗ cho đúng hai ô nhập. */ dialog.hop-form{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh; margin:0;border-radius:0;border:0} .hop-form form{height:100%;max-height:100dvh} .hop-form .hop-nut .btn{flex:1} .mk.cs{padding-right:0} .mk-sua{position:static;margin-top:8px} #dsThem{margin-left:0} } /* ===================================================================== HỒ SƠ XE (cửa sổ chi tiết) — làm lại 11/09/2026 --------------------------------------------------------------------- Theo mẫu trang sản phẩm ngành ô tô: ẢNH XE làm trung tâm, thông tin quyết định mua đặt NGAY CẠNH ảnh — giá lăn bánh, thông số chính, chọn màu. Bản trước dựng thành một cột dài 7–10 màn hình: trên máy tính màn đầu tiên chỉ có ảnh (rộng trọn cửa sổ, cao ~700px), còn nút Lập báo giá nằm tận đáy. Ba vùng: thanh đầu (dính) tên xe + Lập báo giá + So sánh + đóng màn đầu ảnh | giá · thông số chính · màu các mục Tổng quan · Thông số kỹ thuật · Bảo hành — mục lục dính ngay dưới thanh đầu Mọi lớp ở đây dùng tiền tố `hsx-`, KHÔNG `xe-`: `.xe-anh`, `.xe-gia`, `.xe-nhan` là lớp của thẻ xe (the-xe.css) và sẽ đè lên cửa sổ này — đã từng ép khung ảnh còn 313×195. ===================================================================== */ /* ---------- thanh đầu ---------- */ .mhead{align-items:center; gap:16px; padding:14px 22px} .hsx-ten{min-width:0} .hsx-ten h3{margin:0; font-size:22px; letter-spacing:-.3px; line-height:1.2} .hsx-ten .muted{font-size:13.5px; color:var(--tx2); margin-top:2px} .hsx-nhanxe{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px} /* Không xuống dòng: nút × rơi xuống hàng thứ hai trên iPad dọc trông như lỗi. Chỗ thiếu thì phần tên xe bên trái co lại (nhãn tự xuống dòng). */ .hsx-hanh{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:nowrap; flex:none} .hsx-hanh .btn{white-space:nowrap} .mhead .hsx-hanh .x{margin-left:4px; width:44px; height:44px} /* ---------- chọn phiên bản — NẰM TRÊN THANH ĐẦU (19/09/2026) ---------- Chen giữa tên xe và hai nút, chỗ vốn trống. Mỗi chip chỉ tên + giá niêm yết. Màn hẹp (dưới 900px) không đủ chỗ ba khối một hàng thì chip xuống hàng riêng bên dưới, trải hết bề ngang. */ .vtabs{margin-bottom:14px} .vtabs button{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; text-align:left; min-height:56px; cursor:pointer; color:var(--tx)} .mhead .vtabs{flex:1 1 auto; min-width:0; margin:0; justify-content:center; flex-wrap:nowrap} .mhead .vtabs button{flex:0 1 220px; min-width:0; min-height:52px; padding:8px 14px} .mhead .vtabs button b, .mhead .vtabs button span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%} @media (max-width:899px){ .mhead{flex-wrap:wrap} .mhead .vtabs{order:3; flex:1 1 100%; justify-content:flex-start} .mhead .vtabs button{flex:1 1 0} } .subrow{margin:-4px 0 14px} .hsx-nhan{font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--tx3); font-weight:700} /* ---------- màn đầu: ảnh | bảng ---------- */ .hsx-dau{display:grid; gap:20px; grid-template-columns:minmax(0,1fr); align-items:start} .hsx-dau .gal{margin:0} /* Hàng ảnh nhỏ có thể tới 21 ảnh nằm ngang — không chốt min-width:0 thì nó ép cả cột ảnh phình ra theo, khung ảnh lớn bị kéo rộng quá cửa sổ. */ .hsx-anh{min-width:0} .hsx-anh .strip{overflow-x:auto} .hsx-bang{display:grid; gap:14px; align-content:start; min-width:0} /* Màn rộng (máy tính, iPad ngang): hai cột. Cột ảnh 1,55 phần — ảnh 16:10 ở 1280px rộng ~750px, cao ~470px, còn thấy giá ngay màn đầu. */ @media (min-width:1040px){ .hsx-dau{grid-template-columns:minmax(0,1.55fr) minmax(360px,1fr)} } /* iPad dọc: ảnh trên, bên dưới giá và thông số đứng cạnh nhau cho đỡ dài */ @media (min-width:640px) and (max-width:1039px){ .hsx-bang{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .hsx-bang .hsx-mau{grid-column:1/-1} } /* giá */ .hsx-gia{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px} .hsx-gia-lb small{display:block; font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--tx3); font-weight:700} .hsx-gia-lb b{display:block; font-size:28px; letter-spacing:-.6px; line-height:1.15; color:var(--acc2); margin:6px 0 12px; font-variant-numeric:tabular-nums} .hsx-gia-dong{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; color:var(--tx2)} .hsx-gia-dong b{color:var(--tx); font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:650} .hsx-gia-dong.giam b{color:var(--ok)} .hsx-gia-canh{margin:10px 0 0; padding:10px 12px; border-radius:10px; background:var(--card2); border:1px solid var(--warn); font-size:13px; line-height:1.55; color:var(--tx2)} .hsx-gia-canh b{color:var(--warn)} /* thông số chính */ .hsx-so{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; align-self:start} .hsx-so div{background:var(--card); padding:12px 14px; min-width:0} .hsx-so small{display:block; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--tx3); font-weight:700; margin-bottom:4px} .hsx-so b{display:block; font-size:16px; line-height:1.3; overflow-wrap:anywhere} /* số ô lẻ: ô cuối trải hết hàng, không để một ô trống xám */ .hsx-so div:last-child:nth-child(odd){grid-column:1/-1} /* màu */ .hsx-mau{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px} .hsx-mau-dau{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px} .hsx-mau .coltabs{margin:0 0 0 auto} /* Chip màu CÙNG KIỂU màn hình khách (.k-mau trong kiosk.css) — 19/09/2026. Ô ảnh HÌNH CHỮ NHẬT 12:5, ảnh xe hiện TRỌN (contain): ảnh màu hãng phát hành có tỉ lệ 1,29 tới 2,8, cắt vào ô tròn là mất đầu mất đuôi xe. Bản trước là chấm tròn 40px — Trắng Sữa với Kem Vani nhìn như nhau. */ .mau-ds{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px} .mau-o{display:flex; flex-direction:column; align-items:center; gap:7px; padding:6px; min-height:44px; min-width:0; background:none; border:2px solid transparent; border-radius:12px; color:var(--tx2); font:inherit; cursor:pointer; text-align:center; transition:border-color .15s ease, background .15s ease} .mau-o:hover:not(:disabled){background:var(--card2)} .mau-o:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} .mau-o .o-anh{width:100%; aspect-ratio:12/5; border-radius:9px; overflow:hidden; display:grid; place-items:center; background:var(--card2); border:1px solid var(--line2)} .mau-o .o-anh img{width:100%; height:100%; object-fit:contain; display:block} .mau-o .o-anh .ph{display:none} .mau-o .o-anh .chu{font-weight:700; font-size:18px; color:var(--tx3)} .mau-o .ten{font-size:13px; font-weight:600; line-height:1.3} .mau-o .ghi{font-size:12px; color:var(--warn); line-height:1.2} .mau-o.on{border-color:var(--acc); background:rgba(77,141,255,.08)} .mau-o.on .ten{color:var(--tx); font-weight:700} .mau-o:disabled{cursor:default; opacity:.5} .mau-o.khac .ten{text-decoration:line-through; text-decoration-thickness:1px} .mau-chon{margin:12px 0 0; font-size:13.5px; color:var(--tx3)} .mau-chon b{color:var(--ok)} .mau-canh{margin:8px 0 0; font-size:13px; color:var(--warn); line-height:1.5} .mau-ghi{margin-top:10px} .mau-ghi summary{cursor:pointer; font-size:13px; color:var(--tx3); font-weight:600; min-height:32px; display:flex; align-items:center} .mau-ghi p{margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--tx2)} .hsx-thieu{margin:8px 0 0; font-size:13.5px; color:var(--warn)} /* bảo hành — ngay dưới dải ảnh (19/09/2026) */ .hsx-bh{margin-top:14px} .hsx-bh > .hsx-nhan{margin-bottom:8px} .hsx-bh .kv{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:0} .hsx-bh .kv .b{padding:10px 12px} .hsx-bh .kv .b .v{font-size:15px} /* lưu ý khi tư vấn — gấp lại mặc định */ .ts-luuy{margin:16px 0 0; border:1px solid rgba(232,161,58,.4); border-radius:12px; background:var(--card); padding:0 16px} .ts-luuy summary{cursor:pointer; min-height:46px; display:flex; align-items:center; font-size:14px; font-weight:650; color:var(--warn)} .ts-luuy ul{margin:0 0 14px} /* ---------- mục lục dính + các mục ---------- */ .hsx-muc{position:sticky; top:var(--xe-dau-h,76px); z-index:4; display:flex; gap:8px; flex-wrap:wrap; padding:12px 0; margin:22px 0 4px; background:var(--bg2); border-bottom:1px solid var(--line)} .hsx-muc a{display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:20px; background:var(--card); border:1px solid var(--line2); color:var(--tx2); text-decoration:none; font-size:13.5px; font-weight:600; transition:background .15s ease, color .15s ease, border-color .15s ease} .hsx-muc a:hover{background:var(--card2); color:var(--tx); border-color:var(--acc2)} .hsx-muc a:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} /* Chừa đúng chiều cao thanh đầu + mục lục đang dính, để bấm mục lục thì tiêu đề mục không chui xuống dưới hai thanh đó. */ .hsx-phan{padding-top:18px; scroll-margin-top:var(--mhead-h,115px)} .hsx-phan > h4{margin:0 0 14px; font-size:18px; letter-spacing:-.2px} .hsx-tieude{margin:18px 0 10px; font-size:12.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--tx3); font-weight:700} .hsx-phan > .hsx-tieude:first-of-type{margin-top:0} .hsx-vs{margin:0; color:var(--tx2); line-height:1.6} .hsx-noibat li{line-height:1.6} /* trang bị bản cao có thêm — thẻ nhỏ thay cho một đoạn chữ dài nối dấu chấm */ .hsx-them{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px} .hsx-them span{font-size:13px; padding:4px 10px; border-radius:8px; background:var(--card); border:1px solid var(--line2); color:var(--tx)} /* ---------- thông số: tìm + lọc ---------- */ .ts-loc{display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap; margin:0 0 12px} /* Ô tìm tối đa 420px — không kéo hết bề ngang cửa sổ (19/09/2026) */ .ts-loc .o-tim{flex:0 1 420px; min-width:220px} .ts-loc .o-tim input{width:100%} .ts-khac{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; color:var(--tx2); cursor:pointer; user-select:none} .ts-khac input{width:20px; height:20px; accent-color:var(--acc)} .ts-dem{font-size:13px; color:var(--tx3); font-variant-numeric:tabular-nums} .ts-bang tr.an{display:none} .ts-trong{margin:0; padding:22px; text-align:center; color:var(--tx3); background:var(--card); border:1px dashed var(--line2); border-radius:12px} .ts-thuong .ts-nhan{width:40%} /* Điện thoại — làm kỹ ở đợt riêng. Tạm cho hàng nút xuống dòng để phần tên xe không bị bóp còn vài chục điểm ảnh. */ @media (max-width:600px){ .mhead{flex-wrap:wrap} .hsx-hanh{width:100%; flex-wrap:wrap} } @media (max-width:760px){ .mhead{padding:12px 16px} .hsx-ten h3{font-size:19px} .hsx-gia-lb b{font-size:24px} } /* ===================================================================== TAB SO SÁNH — gộp trang đối thủ vào, 11/09/2026 (assets/so-sanh.js) --------------------------------------------------------------------- Ba tầng, trên xuống: chọn xe xe mình | "So với": Ngoài hãng / Trong hãng + các ô chọn lời tư vấn gập được — sale gập lại trước khi xoay màn cho khách bảng đối đầu cột đầu là xe mình, hàng tên xe dính khi cuộn Lớp dùng tiền tố `ss-`; phần tìm/lọc dùng lại `.ts-loc` `.ts-bang` của hồ sơ xe cho hai màn trông như một. ===================================================================== */ .an-chu{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .ss-chon{display:grid; gap:18px 26px; grid-template-columns:minmax(0,1fr); margin-bottom:16px} @media (min-width:1100px){ .ss-chon{grid-template-columns:minmax(300px,380px) minmax(0,1fr)} } .ss-minh{display:flex; gap:14px; align-items:flex-start; min-width:0} .ss-minh-anh{flex:none; width:128px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; background:var(--card2)} .ss-minh-anh img{width:100%; height:100%; object-fit:cover; display:block} .ss-minh-nd{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px} .ss-minh-nd select{width:100%; font-weight:650} .ss-minh-gia{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:13px; color:var(--tx2)} .ss-minh-gia b{color:var(--tx)} .ss-doi{min-width:0} .ss-doi-dau{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:12px} .ss-loai{display:inline-flex; padding:3px; border-radius:24px; background:var(--card2); border:1px solid var(--line2)} .ss-loai button{min-height:40px; padding:0 16px; border:0; border-radius:20px; background:transparent; color:var(--tx2); font:inherit; font-size:14px; font-weight:650; cursor:pointer} .ss-loai button i{font-style:normal; font-weight:600; font-size:12px; margin-left:4px; opacity:.8} .ss-loai button[aria-selected="true"]{background:var(--acc); color:#fff} .ss-loai button:focus-visible,.ss-uv:focus-visible,.ss-bo:focus-visible,.ss-tv-the button:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} .ss-dem{font-size:13px; color:var(--tx3); font-variant-numeric:tabular-nums} .ss-dem.day{color:var(--warn); font-weight:650} .ss-doi-dau .btn{margin-left:auto} /* ô chọn xe để so — một nút, trạng thái bật/tắt nằm ở aria-pressed */ .ss-uv-ds{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(176px,1fr))} .ss-uv{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:9px 34px 9px 12px; text-align:left; background:var(--card); color:var(--tx); border:1px solid var(--line2); border-radius:12px; font:inherit; cursor:pointer; transition:border-color .15s ease, background .15s ease} .ss-uv small{font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--tx3); font-weight:700} .ss-uv b{font-size:14.5px; line-height:1.25} .ss-uv-gia{font-size:13px; color:var(--gold); font-weight:650; font-variant-numeric:tabular-nums} .ss-uv .nh-nguon{margin-top:3px} .ss-uv:hover{border-color:var(--acc2)} .ss-uv.on{border-color:var(--acc2); background:rgba(92,178,255,.10); box-shadow:inset 0 0 0 1px var(--acc2)} /* dấu tích để trạng thái "đã chọn" không chỉ dựa vào màu */ .ss-uv.on::after{content:''; position:absolute; top:10px; right:10px; width:16px; height:16px; border-radius:50%; background:var(--acc2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .ss-uv[aria-disabled="true"]{opacity:.45; cursor:not-allowed} .ss-uv[aria-disabled="true"]:hover{border-color:var(--line2)} body.sang .ss-uv.on{background:rgba(8,82,150,.07)} .ss-khac{margin-top:12px} .ss-khac > summary{display:inline-flex; align-items:center; gap:8px; min-height:40px; cursor:pointer; color:var(--acc2); font-weight:650; font-size:14px} .ss-khac > summary span{font-size:12px; color:var(--tx3); font-weight:600} .ss-khac-nhom{margin-top:10px} .ss-khac-nhom h5{margin:0 0 6px; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--tx3); font-weight:700} .ss-cho,.ss-rong{margin:0; color:var(--tx3); font-size:14px} .ss-rong{text-align:center; padding:26px} .ss-loi{display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--bad); font-size:14px} /* nhãn nguồn số liệu của đối thủ — viền theo màu chữ, tự đổi theo nền */ .nh-nguon{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:1px 6px; border-radius:5px; border:1px solid currentColor; white-space:nowrap; vertical-align:middle; line-height:1.5} .nh-nguon.oem{color:var(--ok)} .nh-nguon.press{color:var(--warn)} .nh-nguon.check{color:var(--bad)} /* ---------- lời tư vấn ---------- */ .ss-tv{margin-bottom:16px; padding:0} .ss-tv > summary{display:flex; align-items:center; gap:10px; min-height:52px; padding:0 18px; cursor:pointer; font-size:15px} .ss-tv > summary::marker{color:var(--tx3)} .ss-noi-bo{font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--warn); border:1px solid currentColor; border-radius:6px; padding:1px 7px} .ss-tv-the{display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 12px} .ss-tv-the button{min-height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--line2); background:var(--card2); color:var(--tx2); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer} .ss-tv-the button[aria-selected="true"]{background:var(--acc); border-color:var(--acc); color:#fff} .ss-tv-nd{display:grid; gap:16px 26px; grid-template-columns:minmax(0,1fr); padding:4px 18px 18px} @media (min-width:1000px){ .ss-tv-nd{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} } .ss-tv-nd h4{margin:0 0 10px; font-size:15px; line-height:1.35} .ss-tv-vi h4{color:var(--acc2)} .ss-tv-vi ol{margin:0; padding-left:22px} .ss-tv-vi li{line-height:1.5; border-bottom:1px solid var(--line)} .ss-tv-vi li:last-child{border-bottom:0} .ss-tv-vi li::marker{color:var(--tx3); font-weight:700} .ss-tv-vi summary{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:6px 0; cursor:pointer; list-style:none; font-weight:650; color:var(--tx)} .ss-tv-vi summary::-webkit-details-marker{display:none} /* mũi tên nhỏ cuối dòng: gập chỉ xuống, mở chỉ lên */ .ss-tv-vi summary::after{content:''; flex:none; width:8px; height:8px; margin-right:4px; border-right:2px solid var(--tx3); border-bottom:2px solid var(--tx3); transform:rotate(45deg) translateY(-2px); transition:transform .15s ease} .ss-tv-vi details[open] > summary::after{transform:rotate(-135deg) translateY(-2px)} .ss-tv-vi details p{margin:0 0 10px; color:var(--tx2); line-height:1.6} .ss-tv-ly{display:block; padding:10px 0; font-weight:650} .ss-canh{background:rgba(227,173,96,.09); border:1px solid rgba(227,173,96,.35); border-radius:12px; padding:13px 15px; margin-bottom:10px} .ss-canh h4{color:var(--warn); font-size:14px; margin-bottom:6px} .ss-canh p{margin:0; line-height:1.6} .ss-gap{border-top:1px solid var(--line)} .ss-gap > summary{display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-weight:650; font-size:14px} .ss-gap > summary span{font-size:12px; color:var(--tx3); font-weight:600} .ss-gap ul{padding-bottom:8px} .ss-gap li{line-height:1.55} .ss-tv-thieu{margin:0; padding:0 18px 16px; color:var(--tx3); font-size:13.5px} /* ---------- bảng đối đầu ---------- */ .ss-loc{margin-top:4px} .ss-bang table{table-layout:fixed} .ss-bang col.ss-c-nhan{width:clamp(128px,19%,220px)} /* Bảng này nằm thẳng trong vùng cuộn main (không có thanh dính nào phía trên) nên hàng tên xe dính ở 0 — khác bảng trong hồ sơ xe. */ .ss-bang thead th{top:0; vertical-align:top; text-transform:none; letter-spacing:0; color:var(--tx); font-size:13px; padding:10px 12px} .ss-bang thead th.ss-goc{background:var(--card2)} .ss-cot-dau{display:flex; align-items:flex-start; gap:6px} .ss-cot-ten{flex:1; min-width:0} .ss-cot-ten small{display:block; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--tx3); font-weight:700} .ss-cot-ten b{display:block; font-size:14.5px; line-height:1.25} .ss-phan{display:block; font-size:12px; color:var(--tx3); font-weight:500; margin-top:1px} .ss-cot.minh .ss-cot-ten b{color:var(--acc2)} .ss-cot select{width:100%; margin-top:6px; font-size:13px; padding:6px 8px; min-height:40px} .ss-ban-minh{display:block; margin-top:6px; font-size:13px; font-weight:650; color:var(--tx2)} .ss-cot-nhan{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:6px; font-size:11.5px; color:var(--tx3); font-weight:500} .ss-bo{flex:none; display:grid; place-items:center; width:40px; height:40px; margin:-6px -6px 0 0; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--tx3); cursor:pointer} .ss-bo svg{width:16px; height:16px} .ss-bo:hover{border-color:var(--line2); color:var(--bad)} .ss-bang td{font-size:13.5px; line-height:1.5} .ss-bang td.minh{background:rgba(92,178,255,.06)} body.sang .ss-bang td.minh{background:rgba(8,82,150,.045)} .ss-bang td.tot{color:var(--ok); font-weight:650} .ss-tot-i{width:12px; height:12px; margin-right:5px; vertical-align:-1px} .ss-giam{color:var(--ok); font-variant-numeric:tabular-nums; white-space:nowrap} .ss-dat{color:var(--ok); font-weight:650} .ss-re{color:var(--warn); font-weight:650} .ss-mo{color:var(--tx3)} .ss-ghi,.ss-ghi-luon{display:block; font-size:12px; color:var(--tx3); margin-top:3px; line-height:1.45; font-weight:400} .ss-ghi{display:none} .hien-ghi .ss-ghi{display:block} .ss-nguon-ds{margin-top:14px; font-size:13px; color:var(--tx3)} .ss-nguon-ds > summary{display:inline-flex; align-items:center; min-height:40px; cursor:pointer; font-weight:650; color:var(--tx2)} .ss-nguon-ds ul{margin-top:4px} .ss-nguon-ds li{line-height:1.6} .ss-nguon-ds p{margin:6px 0 0; line-height:1.6} /* ===================================================================== TAB VIẾT BÀI — máy ghép bài đưa vào app, 11/09/2026 (assets/viet-bai.js) --------------------------------------------------------------------- Thanh làm việc dính trên đầu (xem / page / nút) · cột trái 9 bước soạn · cột phải là BẢN NHÁP trình bày như một bài đăng, dính theo khi cuộn, dưới là kết quả kiểm luật. Dưới 1100px thì một cột, nút "Bản nháp" trên thanh nhảy xuống bản nháp. writer.css của trang cũ không dùng nữa. ===================================================================== */ .vb-thanh{position:sticky; top:0; z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin-bottom:16px; box-shadow:var(--sh)} /* Hai cụm có bề rộng GỐC riêng: không đủ chỗ thì cụm nút xuống dòng. Bản đầu để cụm trái co về 0 — trên iPad dọc nó bị ép thành một cột chữ. */ .vb-thanh-trai{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; flex:1 1 330px; min-width:0} .vb-thanh-nut{display:flex; flex-wrap:wrap; gap:8px; flex:0 1 auto; justify-content:flex-end} .vb-thanh .vb-seg button,.vb-page{white-space:nowrap} .vb-thanh-nut .btn{min-height:44px} .vb-page{font-size:13px; font-weight:650; color:var(--tx2); padding:5px 11px; border-radius:20px; background:var(--card2); border:1px solid var(--line2)} .vb-page.tron{color:var(--warn); border-color:currentColor} .vb-toi-nhap{display:none} .vb-dem-loi{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; margin-left:6px; border-radius:10px; background:var(--nguy-dac); color:#fff; font-size:12px; font-weight:700} /* nút chọn dạng đoạn: dùng chung cho mọi nhóm lựa chọn trong tab */ .vb-seg{display:flex; flex-wrap:wrap; gap:6px} .vb-seg button{min-height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--line2); background:var(--card2); color:var(--tx2); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer} .vb-seg button i{font-style:normal; font-size:12px; font-weight:600; margin-left:4px; opacity:.85} .vb-seg button[aria-pressed="true"],.vb-seg button[aria-selected="true"]{background:var(--acc); border-color:var(--acc); color:#fff} .vb-seg-nho button{min-height:36px; padding:0 12px; font-size:12.5px} .vb-seg button:focus-visible,.vb-chip:focus-visible,.vb-khuon:focus-visible,.vb-cau:focus-visible,.vb-so-tom:focus-visible{outline:2px solid var(--acc2); outline-offset:2px} .vb-khung{display:grid; gap:18px; grid-template-columns:minmax(0,1fr); align-items:start} .vb-soan{display:flex; flex-direction:column; gap:14px; min-width:0} .vb-buoc{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; min-width:0} .vb-buoc > h3{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:16px} .vb-buoc > h3 small{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--tx3)} .vb-buoc > h3 small.lech{color:var(--warn)} .vb-so{display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--acc); color:#fff; font-size:12.5px; font-weight:800; flex:none} .vb-buoc > input[type=text]{width:100%} .vb-buoc .fld{margin-top:10px} .vb-mo{color:var(--tx3); font-size:13px; margin:6px 0} .vb-canh{color:var(--warn); font-size:13.5px; margin:10px 0 0} .vb-lien{background:none; border:0; padding:8px 0; min-height:40px; color:var(--acc2); font:inherit; font-size:13.5px; font-weight:650; cursor:pointer} .vb-chip-ds{display:flex; flex-wrap:wrap; gap:8px; align-items:center} .vb-chip-ds > .lbl{margin-right:4px} .vb-chip{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:22px; border:1px solid var(--line2); background:var(--card2); color:var(--tx); font:inherit; font-size:14px; font-weight:600; cursor:pointer} .vb-chip small{font-size:11.5px; font-weight:600; color:var(--tx3)} .vb-chip.on{background:var(--acc); border-color:var(--acc); color:#fff} .vb-chip.on small{color:rgba(255,255,255,.85)} .vb-chip[aria-disabled="true"]{opacity:.45; cursor:not-allowed} .vb-chip-nho{min-height:36px; font-size:12.5px; font-weight:500; padding:0 12px} /* ---------- chủ đề ---------- */ .vb-khuon-luoi{display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} .vb-khuon{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-height:64px; padding:9px 12px 9px 44px; text-align:left; border:1px solid var(--line2); border-radius:12px; background:var(--card); color:var(--tx); font:inherit; cursor:pointer} .vb-khuon b{font-size:13.5px; line-height:1.3} .vb-khuon small{font-size:11.5px; color:var(--tx3); line-height:1.35} .vb-khuon-so{position:absolute; left:10px; top:10px; width:26px; height:22px; border-radius:6px; display:grid; place-items:center; background:var(--card2); color:var(--tx2); font-size:11.5px; font-weight:800; font-variant-numeric:tabular-nums} .vb-khuon.on{border-color:var(--acc2); background:rgba(92,178,255,.10); box-shadow:inset 0 0 0 1px var(--acc2)} .vb-khuon.on .vb-khuon-so{background:var(--acc); color:#fff} body.sang .vb-khuon.on{background:rgba(8,82,150,.07)} .vb-khuon[aria-disabled="true"]{opacity:.4; cursor:not-allowed} .vb-the-nho{display:inline-block; margin-left:4px; font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--ok); border:1px solid currentColor; border-radius:5px; padding:0 5px; vertical-align:1px} .vb-khuon-ct{margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--card2); font-size:13.5px; line-height:1.55} .vb-khuon-ct p{margin:0 0 6px} .vb-khuon-ct p:last-child{margin-bottom:0} .vb-khuon-ct .lbl{margin-right:6px} .vb-gap > summary{cursor:pointer; min-height:36px; display:flex; align-items:center; font-weight:650; color:var(--tx2)} .vb-gap ol{margin:4px 0 0; padding-left:20px} .vb-chan-dung{margin-top:10px} .vb-chan-dung > .lbl{display:block; margin-bottom:6px} /* ---------- câu mở đầu / lời mời ---------- */ .vb-tim{margin:10px 0 8px; min-width:0} .vb-cau-ds{display:flex; flex-direction:column; gap:6px; margin-top:8px} .vb-cau{display:block; width:100%; text-align:left; padding:10px 12px; min-height:44px; border-radius:10px; border:1px solid var(--line2); background:var(--card); color:var(--tx); font:inherit; font-size:14px; line-height:1.5; cursor:pointer} .vb-cau small{display:block; margin-top:3px; font-size:11.5px; color:var(--tx3)} .vb-cau:hover{border-color:var(--acc2)} .vb-cau.on{border-color:var(--acc2); background:rgba(92,178,255,.10); box-shadow:inset 3px 0 0 var(--acc2)} body.sang .vb-cau.on{background:rgba(8,82,150,.07)} .vb-tu-viet textarea{width:100%} .vb-buoc [data-vb="luu-cau"]{margin-top:8px} /* ---------- thân bài ---------- */ .vb-dm-ds{margin-top:10px; max-height:460px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:12px} .vb-dm{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer} .vb-dm:last-child{border-bottom:0} .vb-dm input{width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--acc)} .vb-dm > span{display:flex; flex-direction:column; gap:2px; min-width:0} .vb-dm b{font-size:14px} .vb-dm-t{font-size:13.5px; line-height:1.5; color:var(--tx2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .vb-dm.on .vb-dm-t{-webkit-line-clamp:unset; display:block; color:var(--tx)} .vb-dm small{font-size:11.5px; color:var(--tx3)} .vb-dm small em{font-style:normal; color:var(--ok); font-weight:700} .vb-dm.on{background:rgba(92,178,255,.07)} .vb-dm.mon:not(.on){opacity:.6} .vb-dm.hop{box-shadow:inset 3px 0 0 var(--ok)} .vb-mota-ds .fld input{width:100%} /* ---------- giá · khối thêm ---------- */ .vb-hai{display:grid; gap:10px 14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .vb-hai .fld input{width:100%} .vb-pb{margin-top:10px} .vb-bat{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:12px} .vb-cong{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:14px; cursor:pointer} .vb-cong input{width:20px; height:20px; accent-color:var(--acc)} .vb-cong .vb-mo{margin:0} .vb-khan{padding:4px 12px 8px; border-left:3px solid var(--warn); margin:6px 0} .vb-khan .fld input{width:100%} .vb-that textarea{width:100%} .vb-tag{margin:10px 0 0; font-size:13px; color:var(--tx2); line-height:1.6; overflow-wrap:anywhere} .vb-tag .lbl{margin-right:6px} /* ---------- bản nháp: trình bày như một bài đăng ---------- */ .vb-cot-nhap{display:flex; flex-direction:column; gap:14px; min-width:0} /* Không cho khối con co lại: cột này có trần chiều cao khi dính, mà khối bản nháp có overflow:hidden -> nó co theo trần và cắt mất chữ bài. */ .vb-cot-nhap > *{flex-shrink:0} .vb-bai{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .vb-bai:focus-within{border-color:var(--acc2)} .vb-bai-dau{display:flex; align-items:center; gap:12px; padding:14px 16px 10px} .vb-bai-dau b{display:block; font-size:15px} .vb-bai-dau small{display:block; font-size:12.5px; color:var(--tx3)} .vb-ava{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none; background:var(--card2); color:var(--tx2); font-weight:800; font-size:13px; letter-spacing:-.3px} .vb-ava[data-hang="geely"]{background:#0f6fd0; color:#fff} .vb-ava[data-hang="lynkco"]{background:#1d1f24; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .vb-sua-tay{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 16px 8px; padding:9px 12px; border-radius:10px; background:rgba(227,173,96,.12); border:1px solid rgba(227,173,96,.4); color:var(--warn); font-size:13px} #vbNhap{display:block; width:100%; min-height:320px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; color:var(--tx); padding:14px 16px; font:inherit; font-size:15px; line-height:1.6; resize:none; overflow:hidden} #vbNhap:focus{outline:none; box-shadow:none} .vb-dem{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 16px 12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--tx3)} .vb-dem b{color:var(--tx)} .vb-thuoc{position:relative; flex:1 1 90px; max-width:160px; height:6px; border-radius:3px; background:var(--card2); overflow:hidden} .vb-thuoc i{position:absolute; left:0; top:0; bottom:0; background:var(--ok); border-radius:3px} .vb-thuoc em{position:absolute; top:0; bottom:0; border-left:1px dashed var(--tx3); border-right:1px dashed var(--tx3)} .vb-thuoc.lech i{background:var(--warn)} .vb-o-trong{background:var(--card); border:1px solid var(--warn); border-radius:var(--r); padding:14px 16px} .vb-o-trong h4{margin:0 0 4px; color:var(--warn); font-size:14px} .vb-o-trong .fld input{width:100%} .vb-o-trong .btn{margin-top:10px} .vb-kiem{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px 16px} .vb-kiem-nhom{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px; text-transform:uppercase; letter-spacing:.5px} .vb-kiem-nhom span{font-size:12px} .vb-kiem-nhom.do{color:var(--bad)} .vb-kiem-nhom.vang{color:var(--warn)} .vb-kiem-nhom.xam{color:var(--tx3)} .vb-loi-ds{list-style:none; margin:0 0 8px; padding:0} .vb-loi{display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5} .vb-loi:last-child{border-bottom:0} .vb-loi-ma{flex:none; min-width:46px; text-align:center; font-size:11px; font-weight:800; padding:2px 6px; border-radius:6px; border:1px solid currentColor} .vb-loi.do .vb-loi-ma{color:var(--bad)} .vb-loi.vang .vb-loi-ma{color:var(--warn)} .vb-loi.xam .vb-loi-ma{color:var(--tx3)} .vb-loi-nd small{display:block; font-size:11.5px; color:var(--tx3)} .vb-kiem-trong{margin:4px 0; color:var(--tx3); font-size:13.5px} .vb-kiem-ok{display:flex; align-items:center; gap:8px; margin:4px 0; color:var(--ok); font-weight:650; font-size:14px} .vb-kiem-ok svg{width:20px; height:20px; flex:none} /* ---------- sổ bài đã viết ---------- */ .vb-so-dau{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-bottom:12px} .vb-so-dau .o-tim{flex:1 1 280px; min-width:0} .vb-so-dau .o-tim input{width:100%} .vb-so-tt{font-size:13px; color:var(--tx3)} .vb-so-ds{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .vb-so-bai{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden} .vb-so-bai.mo{border-color:var(--acc2)} .vb-so-tom{display:grid; grid-template-columns:82px minmax(0,1fr) auto; gap:12px; align-items:center; width:100%; min-height:56px; padding:10px 14px; background:none; border:0; color:var(--tx); font:inherit; text-align:left; cursor:pointer} .vb-so-ngay{font-size:13px; font-weight:700; color:var(--tx2); font-variant-numeric:tabular-nums} .vb-so-chinh{display:flex; flex-direction:column; min-width:0} .vb-so-chinh b{font-size:14px} .vb-so-chinh span{font-size:13px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .vb-so-meta{font-size:12px; color:var(--tx3); text-align:right; line-height:1.45} .vb-so-meta em{font-style:normal; color:var(--warn); font-weight:700} .vb-so-nd{border-top:1px solid var(--line); padding:12px 14px} .vb-so-nd pre{margin:0; white-space:pre-wrap; font:inherit; font-size:14px; line-height:1.6; max-height:420px; overflow:auto} .vb-so-nut{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px} .vb-so-nut .vb-mo{margin:0 auto 0 0} .vb-rong,.vb-cho{color:var(--tx3); text-align:center; padding:26px; background:var(--card); border:1px dashed var(--line2); border-radius:12px; margin:0} .vb-loi-nap{display:flex; flex-wrap:wrap; align-items:center; gap:10px; color:var(--bad)} @media (min-width:1100px){ .vb-khung{grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr)} /* Bản nháp dính dưới thanh làm việc; dài quá màn thì cuộn bên trong */ .vb-cot-nhap{position:sticky; top:calc(var(--vb-thanh-h, 70px) + 14px); max-height:calc(100dvh - var(--cao-dau, 56px) - var(--vb-thanh-h, 70px) - 34px); overflow-y:auto; overscroll-behavior:contain} } @media (max-width:1099px){ .vb-toi-nhap{display:inline-flex; align-items:center} .vb-cot-nhap{scroll-margin-top:calc(var(--vb-thanh-h, 70px) + 12px)} } @media (max-width:600px){ .vb-so-tom{grid-template-columns:minmax(0,1fr); gap:4px} .vb-so-meta{text-align:left} } /* ===================================================================== KHUNG APP CỐ ĐỊNH — thanh tiêu đề và menu dọc KHÔNG BAO GIỜ trôi 11/09/2026 --------------------------------------------------------------------- Trước: CẢ TRANG cuộn, thanh tiêu đề và menu giữ chỗ bằng position:sticky. Chrome máy tính chạy đúng — nhưng chủ showroom báo trên iPad hai thanh cuộn trôi theo nội dung. Chrome giả lập đúng cỡ iPad vẫn dính đúng, tức là lỗi nằm ở cách Safari (WebKit) xử lý sticky, không tái hiện được ngoài máy thật. Nay: khoá cả trang, chỉ VÙNG NỘI DUNG (main) cuộn. Thanh tiêu đề và menu nằm NGOÀI vùng cuộn nên không có đường nào trôi được, bất kể trình duyệt xử lý sticky ra sao. Đây đúng cách khach.html (kiosk.css) đang làm — và nó chạy tốt trên chính chiếc iPad đó. Ba điều phải nhớ khi sửa sau này: · Cuộn trang = cuộn `.khung > main`, KHÔNG phải window. Gọi window.scrollTo là không có gì xảy ra. · Phần tử sticky BÊN TRONG main (thanh làm việc báo giá, mục lục hướng dẫn, cột hồ sơ) tính `top` từ mép trên của main — tức NGAY DƯỚI thanh tiêu đề. Không cộng 56px nữa. · Lúc in trả lại dòng chảy thường, không thì bản in bị cắt còn đúng phần đang thấy trên màn hình. ===================================================================== */ html{height:100%} body.sale{ height:100%; /* dự phòng cho Safari cũ chưa có dvh */ height:100dvh; /* dvh = cao đúng phần NHÌN THẤY, trừ thanh công cụ Safari */ display:flex;flex-direction:column;overflow:hidden; /* Tắt chạm-hai-lần-để-phóng-to. Trên iPad bấm nhanh hai lần vào một nút là cả trang phóng to; lúc đang phóng to, thanh cố định bám theo KHUNG TRANG chứ không bám phần đang nhìn, nên vẫn trượt khỏi màn hình khi cuộn. Phóng to bằng hai ngón vẫn dùng được như thường. */ touch-action:manipulation; } body.sale > header{position:relative;flex:none} body.sale > .khung{flex:1 1 auto;min-height:0;align-items:stretch; grid-template-rows:minmax(0,1fr)} body.sale nav.tabs{position:relative;top:auto;height:auto;min-height:0} body.sale .khung > main.wrap{ min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain; /* Chừa đáy: cuộn hết vẫn còn khoảng thở, không dính sát vạch Home của iPad hay nấp dưới thông báo nổi. */ padding-bottom:max(40px, env(safe-area-inset-bottom)); } /* Sticky bên trong main: đo từ mép trên của main, không cộng thanh 56px */ body.sale .bg-thanh{top:0} body.sale .hd-muc{top:0} body.sale .hd-de{scroll-margin-top:88px} /* 78 mục lục dính + 10 thở */ body.sale .hs-cot{top:18px} @media print{ html,body.sale{height:auto;overflow:visible;display:block} body.sale .khung{display:block} body.sale .khung > main.wrap{height:auto;overflow:visible;padding-bottom:0} }