/* Bảng màu chính thức Nova Automation (chốt 27/08/2026) — xem ../Dich vụ/CLAUDE.md */ :root { --nen: #fdf6fa; --nen-phu: #fbe7f1; --nhan: #e11d8f; --nhan-dam: #cb137e; --chu: #1f1420; --chu-mo: #6b5a66; --vien: #f0d7e6; --trang: #ffffff; --xanh: #0f8a5f; --do: #c62828; --vang: #b26a00; /* Nền nút. CHỦ ĐÃ CHỐT 03/09/2026: dùng hồng sáng #e11d8f phẳng, giống hệt nút bên Nova Đăng Nhóm và NOVA Affiliate — ba sản phẩm một màu. ĐÂY LÀ ĐÁNH ĐỔI CÓ CHỦ Ý, ĐỪNG TỰ SỬA LẠI: #e11d8f với chữ trắng chỉ đạt 4,42:1, thiếu 0,08 so với chuẩn AA 4,5:1. Trước đó tệp này từng để #f342ab (3,40:1) rồi #cc1a82 (5,20:1); chủ xem cả ba và chọn màu này vì đồng bộ thương hiệu. Ai thấy con số tương phản mà định làm đậm lên thì phải hỏi chủ trước, đừng sửa thẳng — đã đi hai lượt rồi. Đã XOÁ hẳn biến --grad cũ (dải #f342ab, 3,40:1) khỏi tệp: để lại một biến không ai dùng mà tương phản kém là mời người sau vô tình lấy lại. Bù lại bằng hai thứ không đụng tới màu nền: chữ TRẮNG TINH #fff (chữ ngà #fdf6fa kéo tỷ số xuống còn 4,15) và nét đậm 700. */ --grad-nut: #e11d8f; --bong: 0 1px 2px rgba(31, 20, 32, 0.06), 0 8px 24px rgba(31, 20, 32, 0.06); --bo: 14px; } * { box-sizing: border-box; } body { margin: 0; background: var(--nen); color: var(--chu); /* Chủ chốt 03/09/2026: cả ba sản phẩm Nova dùng chung Be Vietnam Pro. Chuỗi dự phòng phía sau là bắt buộc — Google Fonts chặn hoặc chậm thì trang vẫn đọc được. */ font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.6; } a { color: var(--nhan-dam); } h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; } h1 { font-size: 34px; } h2 { font-size: 24px; } h3 { font-size: 18px; } p { margin: 0 0 12px; } .khung { max-width: 1080px; margin: 0 auto; padding: 0 20px; } .hep { max-width: 720px; } /* ── Thanh điều hướng ─────────────────────────────────────────────────────── */ .thanh-dau { background: var(--trang); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 20; } /* min-height chứ KHÔNG phải height: nav có flex-wrap, trên điện thoại 390px thì logo + các mục không đủ chỗ một hàng nên xuống dòng — chiều cao cố định làm nó tràn ra ngoài, đè lên phần đầu trang. Phần lớn chủ tiệm xem bằng điện thoại nên đây là thứ đầu tiên họ thấy. */ .thanh-dau .khung { display: flex; align-items: center; gap: 16px; min-height: 62px; padding-top: 8px; padding-bottom: 8px; } .logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; text-decoration: none; color: var(--chu); } .logo svg { width: 26px; height: 26px; } .thanh-dau nav { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .thanh-dau nav a { text-decoration: none; color: var(--chu-mo); padding: 8px 10px; border-radius: 8px; font-weight: 500; } /* :not(.nut) — luật hover có độ ưu tiên (0,2,2), không loại trừ thì rê chuột lên NÚT là chữ lại hoá xám trên nền hồng nhạt, tái diễn đúng lỗi vừa sửa. */ .thanh-dau nav a:not(.nut):hover { background: var(--nen-phu); color: var(--chu); } /* Vùng chạm 44px cho cả liên kết chữ, không riêng nút: "Đăng nhập" là lối vào của khách cũ. */ .thanh-dau nav a { display: flex; align-items: center; min-height: 44px; } /* Trên điện thoại: giấu các mục ĐIỀU HƯỚNG NỘI DUNG (Cách hoạt động, Bảng giá, Câu hỏi), chỉ chừa logo + nút hành động. Chủ tiệm không đi lang thang trong trang bán hàng. NHƯNG "Đăng nhập" phải ở lại: đó không phải điều hướng mà là LỐI VÀO SẢN PHẨM của khách cũ — giấu nó đi thì khách đang dùng dịch vụ không có đường quay lại tài khoản trên điện thoại, trong khi phần lớn họ dùng điện thoại. (Lỗi đã mắc và đã sửa 03/09/2026.) */ @media (max-width: 700px) { /* ĐỔI TỪ QUÉT RỘNG SANG ĐÁNH DẤU TAY (03/09/2026). Luật cũ là "ẩn MỌI liên kết trong nav trừ mấy cái được miễn" — nghĩa là bất cứ thứ gì thêm vào thanh đầu về sau đều bị ẩn trên điện thoại, và người thêm KHÔNG HỀ BIẾT: máy tính nhìn đúng, điện thoại mất sạch. Đã dính hai lần: nút Đăng nhập (sửa bằng cách miễn .loi-vao), rồi chip gói (miễn .chip-goi). Và lần thứ ba chưa ai thấy — nút ĐĂNG XUẤT của trang quản lý cũng đang bị ẩn, tức chủ tiệm dùng điện thoại thì không có đường thoát tài khoản. Giờ chỉ ẩn thứ nào ĐÁNH DẤU .an-man-hep. Thêm gì vào thanh đầu cũng hiện, muốn ẩn phải cố ý. */ .thanh-dau nav a.an-man-hep { display: none; } .thanh-dau nav { gap: 4px; } /* Tên tiệm bên cạnh logo: bỏ trên điện thoại. Thanh đầu trang quản lý đã có logo, nhãn trạng thái, nút bật/tắt trợ lý và Đăng xuất — thêm tên tiệm là xuống dòng. */ #ten-tiem { display: none; } } /* Nút chuyển đổi chính phải đủ lớn cho ngón tay: tối thiểu 44px theo hướng dẫn cảm ứng. Phải viết kèm .nho vì trong HTML nút này mang class "nut nho", mà .nut.nho nằm SAU trong tệp và cùng độ ưu tiên nên đè lại cỡ chữ về 13px. Nút "Dùng thử miễn phí" bị kêu là mờ vì HAI thứ cộng lại: cỡ chữ bị kéo về 13px, và quan trọng hơn nhiều là màu chữ bị luật .thanh-dau nav a đè thành xám. */ .thanh-dau .nut, .thanh-dau .nut.nho { padding: 11px 16px; font-size: 14.5px; min-height: 44px; font-weight: 700; } /* Màu chữ trắng CHỈ cho nút nền hồng. :not(.phu) là bắt buộc — .nut.phu là nút NỀN TRẮNG (dùng cho công tắc "Trợ lý đang bật/tắt" trên thanh đầu trang quản lý), mà luật này 3 class nên đè luôn màu chữ hồng của nó thành trắng: chữ trắng trên nền trắng, nút biến mất hoàn toàn. Lỗi đã mắc và đã sửa 03/09/2026 — phát hiện nhờ ảnh chụp màn hình của chủ, không phải nhờ đo. Bài học: vá một luật màu bằng cách tăng độ ưu tiên thì nó đè cả những biến thể mình không nghĩ tới. Phải LOẠI TRỪ, đừng đè bừa. */ .thanh-dau .nut:not(.phu), .thanh-dau .nut.nho:not(.phu) { color: #fff; } /* ── Nút ──────────────────────────────────────────────────────────────────── */ .nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; text-decoration: none; background: var(--grad-nut); color: #fff; transition: filter .15s ease, transform .05s ease; } .nut:hover { filter: brightness(1.06); } .nut:active { transform: translateY(1px); } .nut:disabled { opacity: .5; cursor: not-allowed; } .nut.phu { background: var(--trang); color: var(--nhan-dam); border: 1px solid var(--vien); } .nut.nhat { background: var(--nen-phu); color: var(--chu); } .nut.nho { padding: 6px 12px; font-size: 13px; border-radius: 8px; } .nut.nguy { background: var(--trang); color: var(--do); border: 1px solid #f0c9c9; } /* ── Thẻ ──────────────────────────────────────────────────────────────────── */ .the { background: var(--trang); border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px; box-shadow: var(--bong); } .luoi { display: grid; gap: 16px; } .luoi.c2 { grid-template-columns: repeat(2, 1fr); } .luoi.c3 { grid-template-columns: repeat(3, 1fr); } .luoi.c4 { grid-template-columns: repeat(4, 1fr); } /* Máy tính bảng: hạ 2 cột thay vì rơi thẳng từ 4 xuống 1. */ @media (max-width: 860px) { .luoi.c3, .luoi.c4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .luoi.c2, .luoi.c3, .luoi.c4 { grid-template-columns: 1fr; } } /* ── Biểu mẫu ─────────────────────────────────────────────────────────────── */ label { display: block; font-weight: 600; margin: 16px 0 0; font-size: 14px; } label .goi-y { display: block; font-weight: 400; color: var(--chu-mo); font-size: 13px; margin-top: 2px; } /* Ô nhập nằm BÊN TRONG thẻ label, nên margin dưới của label không tạo được khoảng cách giữa chữ nhãn và ô — phải đẩy từ chính ô nhập ra, nếu không biểu mẫu trông chật và rối. */ label > input, label > select, label > textarea { display: block; margin-top: 6px; } input, textarea, select { width: 100%; padding: 13px 12px; border: 1px solid var(--vien); border-radius: 10px; font-family: inherit; font-size: 15px; background: var(--trang); color: var(--chu); } input:focus, textarea:focus, select:focus { outline: 2px solid var(--nhan); outline-offset: -1px; } textarea { min-height: 96px; resize: vertical; } /* Ô mật khẩu kèm nút hiện/ẩn. Chừa chỗ bên phải để chữ gõ vào không chui xuống dưới nút. */ .o-mat-khau { display: block; position: relative; margin-top: 6px; } .o-mat-khau input { padding-right: 74px; } .hien-mk { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--nen-phu); color: var(--nhan-dam); font-family: inherit; font-size: 13px; font-weight: 600; /* 44px là ngưỡng chạm tối thiểu. Nút này lồng trong ô nhập cao 48 nên vừa khít, còn dư 2px mỗi bên. Trước đây nó 50x32 — nhỏ hơn cả ô chứa nó, bấm trượt suốt. */ min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 8px; cursor: pointer; } .hien-mk:hover { background: #f6d9e8; } /* ── Nhãn trạng thái ──────────────────────────────────────────────────────── */ .nhan-tt { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .tt-xanh { background: #e4f5ec; color: var(--xanh); } .tt-do { background: #fdeaea; color: var(--do); } .tt-vang { background: #fdf1e0; color: var(--vang); } .tt-xam { background: #f1eef0; color: var(--chu-mo); } .mo { color: var(--chu-mo); } .nho { font-size: 13px; } /* Đoạn nội dung chính khách phải đọc để hiểu sản phẩm. Cố ý KHÔNG dùng .mo .nho cho những đoạn này: 13px màu mờ là cỡ dành cho dòng ghi chú, mà người đọc phần lớn là chủ tiệm ngoài 40 tuổi, cầm điện thoại ngoài nắng. Chỉ dòng phụ thật sự mới để mờ. */ .dan { font-size: 15px; color: var(--chu); } .giua { text-align: center; } .hang { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hang.phai { justify-content: flex-end; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--vien); vertical-align: top; } th { font-size: 13px; color: var(--chu-mo); font-weight: 600; } /* Khung xương chờ dữ liệu — đặt sẵn trong HTML để khách không nhìn thấy vùng trắng trong lúc trang lấy dữ liệu về. */ .xuong { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--nen-phu), #f6ecf2, var(--nen-phu)); background-size: 200% 100%; animation: xuong-chay 1.4s ease-in-out infinite; margin: 10px auto; width: 80%; } .xuong.to { height: 30px; width: 60%; } .xuong.ngan { width: 45%; } @keyframes xuong-chay { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .xuong { animation: none; } } .bao { padding: 12px 14px; border-radius: 10px; margin-bottom: 14px; border: 1px solid var(--vien); background: var(--nen-phu); } .bao.loi { background: #fdeaea; border-color: #f5cccc; color: #8c1c1c; } .bao.ok { background: #e4f5ec; border-color: #bfe6d2; color: #14603f; } .bao.canh { background: #fdf1e0; border-color: #f2ddba; color: #7a4a00; } /* ── Nhảy tới neo (#bang-gia, #cau-hoi...) ──────────────────────────────────── Thanh đầu là position:sticky nên khi trình duyệt nhảy tới một neo, nó đưa neo lên SÁT MÉP TRÊN và phần đầu của khối nằm KHUẤT dưới thanh. Khách bấm "Xem bảng giá" từ trang chủ novaauto.vn sẽ đáp xuống GIỮA bảng giá, không thấy chữ "Bảng giá" đâu. Hỏng im lặng đúng kiểu: liên kết chạy, trang hiện, không lỗi nào — chỉ là khách đáp sai chỗ. Số phải LỚN HƠN chiều cao thanh (min-height 62px + viền) và chừa thêm khoảng thở. (Phiên affiliate nêu 03/09/2026; họ dùng 78px cho thanh 62px của họ.) */ :target, section[id] { scroll-margin-top: 80px; } /* Trên điện thoại thanh đầu có thể xuống dòng khi tên tiệm dài — chừa rộng hơn cho chắc. */ @media (max-width: 700px) { :target, section[id] { scroll-margin-top: 96px; } } /* ── Thẻ giá (dùng ở cả trang bán hàng lẫn màn Thanh toán trong trang quản lý) ── Trước 03/09/2026 ba lớp này chỉ nằm trong