/* ============================================================ BAT AI — KHUNG CHUNG WEBSITE (bat-shell.css) Chủ sở hữu: Mr. Long. Đừng sửa file này trong thư mục trang của bạn — sửa ở đây sẽ bị ghi đè khi ghép. Cần thêm màu/component mới? Báo Long để thêm vào đây cho cả 4 trang. ============================================================ */ :root { /* --- Màu thương hiệu (brand kit v2.1 — KHÓA CỨNG, không đổi) --- */ --bat-do: #DA251D; /* Đỏ Quốc kỳ — logo, điểm nhấn nhỏ */ --bat-vang: #FFCD00; /* Vàng Sao — CHỈ dùng cho ngôi sao */ --bat-den: #111111; /* Chữ trên nền sáng */ --bat-xam: #4A4A4A; /* Chữ phụ, chú thích */ --bat-trang: #FFFFFF; /* Nền mặc định */ /* --- Xám phụ trợ (Long thêm cho giao diện web, không thuộc brand kit in) --- */ --bat-xam-100: #F6F6F7; /* Nền vùng nhấn nhẹ */ --bat-xam-200: #ECECEE; /* Nền bảng, sọc xen kẽ */ --bat-xam-300: #DDDDE1; /* Viền */ --bat-xam-500: #8A8A90; /* Chữ mờ, placeholder */ /* --- Màu chức năng (trạng thái, cảnh báo) — dùng biến này, đừng tự chọn màu --- */ --bat-nguy-hiem: #DA251D; /* Nguy hiểm — dùng lại đỏ thương hiệu */ --bat-canh-bao: #E8890C; /* Cảnh báo */ --bat-tot: #1E8E4E; /* Bình thường / đạt */ --bat-thong-tin: #1F6FB2; /* Thông tin */ /* --- Chữ --- */ --bat-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --bat-font-so: "Consolas", "SF Mono", "Roboto Mono", monospace; /* --- Khoảng cách --- */ --bat-cach-1: 4px; --bat-cach-2: 8px; --bat-cach-3: 16px; --bat-cach-4: 24px; --bat-cach-5: 40px; --bat-cach-6: 64px; /* --- Khác --- */ --bat-bo-goc: 8px; --bat-bong: 0 1px 3px rgba(17,17,17,.08), 0 4px 16px rgba(17,17,17,.06); --bat-rong-toi-da: 1280px; --bat-cao-header: 60px; /* chiều cao hàng header — bằng vinai.io */ --bat-header-ngat: 980px; /* ghi chú: dưới mốc này header đổi sang kiểu điện thoại */ } /* --- Reset nhẹ --- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Header cố định 60px đè lên trên: nhảy tới link neo (#lien-he) phải dừng bên dưới header, không để tiêu đề mục bị header che mất. */ scroll-padding-top: calc(var(--bat-cao-header) + var(--bat-cach-3)); } body { margin: 0; font-family: var(--bat-font); font-size: 16px; line-height: 1.6; color: var(--bat-den); background: var(--bat-trang); } img, video, svg { max-width: 100%; height: auto; display: block; } a { color: var(--bat-do); } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--bat-cach-3); font-weight: 700; } h1 { font-size: 2.5rem; } h2 { font-size: 1.875rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } p { margin: 0 0 var(--bat-cach-3); } .bat-phu { color: var(--bat-xam); } .bat-mo { color: var(--bat-xam-500); } /* ============================================================ HEADER (do bat-shell.js chèn tự động — đừng tự viết lại) Dựng theo phong cách vinai.io: · header nổi cố định trên cùng, KHÔNG viền dưới, KHÔNG gạch chân menu · trên hero thì trong suốt; cuộn xuống mới hiện nền trắng + bóng nhạt, đồng thời thu logo nhỏ lại (vinai gọi trạng thái này là "shrink") · menu dồn về phải, chữ 16px/500, hover chỉ đổi màu · nút hành động dạng viên thuốc chữ hoa ở ngoài cùng phải · điện thoại: thanh 60px + nút 3 gạch biến thành dấu X, menu trượt từ trái HAI CHẾ ĐỘ — chọn bằng thuộc tính data-header trên thẻ : data-header="noi" → header nổi trong suốt trên hero (dùng cho trang chủ). Mục đầu của trang phải tự chừa khoảng trên cho header. (không khai báo) → header nền trắng ngay từ đầu, khung chung tự thêm padding-top cho nên trang không bị che. ============================================================ */ .bat-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } /* Khung chung tự gắn class này vào ở chế độ nền trắng */ body.bat-chua-cho-header { padding-top: var(--bat-cao-header); } .bat-header__thanh { background: var(--bat-trang); transition: background .3s ease, box-shadow .3s ease, padding .3s ease; } .bat-header__hang { height: var(--bat-cao-header); max-width: var(--bat-rong-toi-da); margin: 0 auto; padding: 0 var(--bat-cach-4); display: flex; align-items: center; justify-content: space-between; gap: var(--bat-cach-4); } .bat-header__logo { display: flex; align-items: center; flex: 0 0 auto; } .bat-header__logo img { height: 36px; width: auto; transition: height .4s ease; } /* Nhóm bên phải: menu + đổi ngôn ngữ + nút hành động */ .bat-header__phai { display: flex; align-items: center; gap: var(--bat-cach-4); } .bat-nav { display: flex; align-items: center; gap: 26px; } /* 26px = khoảng cách menu vinai */ .bat-nav a { color: var(--bat-den); text-decoration: none; font-size: 1rem; font-weight: 500; line-height: var(--bat-cao-header); white-space: nowrap; transition: color .4s ease; } .bat-nav a:hover { color: var(--bat-do); } /* vinai không gạch chân — trang đang xem chỉ đổi màu chữ */ .bat-nav a[aria-current="page"] { color: var(--bat-do); } .bat-ngonngu { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .bat-ngonngu button { font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; padding: 4px 0; cursor: pointer; background: none; border: 0; color: var(--bat-xam-500); transition: color .3s ease; } .bat-ngonngu button:hover { color: var(--bat-do); } .bat-ngonngu button[aria-pressed="true"] { color: var(--bat-den); } .bat-ngonngu__vach { color: var(--bat-xam-300); font-size: .8125rem; } /* Nút hành động — viên thuốc chữ hoa, giống .tw-button-common của vinai */ .bat-header__cta { display: inline-flex; align-items: center; justify-content: center; padding: 11px 26px; border-radius: 999px; background: var(--bat-do); color: var(--bat-trang); font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background .4s ease; } .bat-header__cta:hover { background: #B81E17; } /* Thanh dành cho điện thoại — mặc định ẩn, chỉ hiện dưới mốc ngắt */ .bat-thanh-mobile { display: none; align-items: center; justify-content: space-between; height: var(--bat-cao-header); padding: 0 var(--bat-cach-3); background: var(--bat-trang); transition: background .3s ease, box-shadow .3s ease; } .bat-thanh-mobile__logo { display: flex; align-items: center; } .bat-thanh-mobile__logo img { height: 32px; width: auto; } .bat-hamburger { border: 0; background: none; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; } .bat-hamburger span { display: block; height: 3px; width: 26px; border-radius: 2px; background: var(--bat-den); margin-bottom: 5px; } .bat-hamburger span:nth-of-type(1) { width: 20px; } .bat-hamburger span:nth-of-type(3) { width: 13px; margin-bottom: 0; } .bat-hamburger span:nth-of-type(1), .bat-hamburger span:nth-of-type(3) { transition: transform .4s ease, width .4s ease; } /* Ba gạch gập thành dấu X — đúng góc 42° của vinai */ .bat-hamburger.doi span:nth-of-type(2) { opacity: 0; } .bat-hamburger.doi span:nth-of-type(1) { transform: rotate(42deg) translate(8px, 4px); width: 26px; } .bat-hamburger.doi span:nth-of-type(3) { transform: rotate(-42deg) translate(7px, -4px); width: 26px; } /* Màn che mờ phía sau menu điện thoại */ .bat-man-che { position: fixed; inset: 0; z-index: 998; background: rgba(17,17,17,.16); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .bat-man-che.hien { opacity: 1; visibility: visible; } /* Mở menu thì khoá cuộn trang phía sau */ html.bat-khoa-cuon { overflow: hidden; } /* ---------- Header trên máy tính ---------- */ @media (min-width: 981px) { /* Chế độ nổi: trong suốt và thoáng hơn 10px trên/dưới như vinai */ .bat-header--noi .bat-header__thanh { background: transparent; padding: 10px 0; } /* Đã cuộn: nền trắng, thu gọn, bóng nhạt lấy từ đỏ thương hiệu */ .bat-header.dinh .bat-header__thanh { background: var(--bat-trang); padding: 0; box-shadow: 0 12px 15px rgba(218,37,29,.10); } .bat-header.dinh .bat-header__logo img { height: 30px; } /* vinai thu logo còn ~80% */ } /* ---------- Header trên điện thoại / máy tính bảng ---------- */ @media (max-width: 980px) { .bat-thanh-mobile { display: flex; } .bat-header--noi .bat-thanh-mobile { background: transparent; } .bat-header.dinh .bat-thanh-mobile { background: var(--bat-trang); box-shadow: 0 12px 15px rgba(218,37,29,.10); } .bat-header.dang-mo .bat-thanh-mobile { background: var(--bat-xam-100); box-shadow: none; } /* Menu thành ngăn kéo trượt từ trái, nằm dưới thanh 60px */ .bat-header__thanh { position: fixed; top: var(--bat-cao-header); left: 0; right: 0; bottom: 0; padding: 0; background: var(--bat-xam-100); box-shadow: none; overflow-y: auto; transform: translateX(-100%); transition: transform .4s ease; } .bat-header.dang-mo .bat-header__thanh { transform: translateX(0); } .bat-header__hang { height: auto; flex-direction: column; align-items: flex-start; padding: var(--bat-cach-5) var(--bat-cach-4) var(--bat-cach-5); gap: var(--bat-cach-5); } .bat-header__logo { display: none; } /* logo đã có trên thanh mobile */ .bat-header__phai { flex-direction: column; align-items: flex-start; gap: var(--bat-cach-4); width: 100%; } .bat-nav { flex-direction: column; align-items: flex-start; gap: 15px; } .bat-nav a { font-size: 1.5rem; line-height: 1.2; } /* vinai: 24px/28px */ .bat-header__cta { width: 100%; padding: 14px 26px; } } /* ============================================================ FOOTER (do bat-shell.js chèn tự động) ============================================================ */ .bat-footer { margin-top: var(--bat-cach-6); border-top: 3px solid var(--bat-do); background: var(--bat-xam-100); padding: var(--bat-cach-5) var(--bat-cach-4) var(--bat-cach-4); font-size: .875rem; color: var(--bat-xam); } .bat-footer__trong { max-width: var(--bat-rong-toi-da); margin: 0 auto; } .bat-footer__cot { display: flex; flex-wrap: wrap; gap: var(--bat-cach-5); } .bat-footer__cot > div { flex: 1 1 220px; } .bat-footer h4 { color: var(--bat-den); font-size: .875rem; margin-bottom: var(--bat-cach-2); } .bat-footer__day { margin-top: var(--bat-cach-4); padding-top: var(--bat-cach-3); border-top: 1px solid var(--bat-xam-300); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--bat-cach-2); } .bat-khauhieu { color: var(--bat-do); font-weight: 700; letter-spacing: .08em; } /* ============================================================ BỐ CỤC ============================================================ */ /* width:100% là bắt buộc: đặt .bat-trong trong một khung display:flex (hero trang chủ) thì thiếu nó, khối sẽ co lại theo chữ và lệch trái so với logo trên header — hai bên phải thẳng cùng một lề. */ .bat-trong { width: 100%; max-width: var(--bat-rong-toi-da); margin: 0 auto; padding: 0 var(--bat-cach-4); } .bat-muc { padding: var(--bat-cach-6) 0; } /* một section của trang */ .bat-muc--nhan { background: var(--bat-xam-100); } /* section nền xám nhạt */ .bat-luoi { display: grid; gap: var(--bat-cach-4); } .bat-luoi--2 { grid-template-columns: repeat(2, 1fr); } .bat-luoi--3 { grid-template-columns: repeat(3, 1fr); } .bat-luoi--4 { grid-template-columns: repeat(4, 1fr); } /* ============================================================ COMPONENT DÙNG CHUNG ============================================================ */ .bat-nut { display: inline-block; font: inherit; font-weight: 600; padding: 10px 22px; border-radius: var(--bat-bo-goc); border: 1px solid var(--bat-do); background: var(--bat-do); color: var(--bat-trang); text-decoration: none; cursor: pointer; } .bat-nut:hover { background: #B81E17; border-color: #B81E17; } .bat-nut--vien { background: transparent; color: var(--bat-do); } .bat-nut--vien:hover { background: var(--bat-do); color: var(--bat-trang); } .bat-the { background: var(--bat-trang); border: 1px solid var(--bat-xam-300); border-radius: var(--bat-bo-goc); padding: var(--bat-cach-4); } .bat-the--noi { box-shadow: var(--bat-bong); border-color: transparent; } .bat-nhan { display: inline-block; font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--bat-xam-200); color: var(--bat-xam); } .bat-nhan--nguy-hiem { background: rgba(218,37,29,.12); color: var(--bat-nguy-hiem); } .bat-nhan--canh-bao { background: rgba(232,137,12,.14); color: var(--bat-canh-bao); } .bat-nhan--tot { background: rgba(30,142,78,.12); color: var(--bat-tot); } .bat-nhan--thong-tin { background: rgba(31,111,178,.12); color: var(--bat-thong-tin); } .bat-bang { width: 100%; border-collapse: collapse; font-size: .9375rem; } .bat-bang th, .bat-bang td { text-align: left; padding: 10px var(--bat-cach-3); border-bottom: 1px solid var(--bat-xam-300); } .bat-bang th { background: var(--bat-xam-100); font-weight: 600; white-space: nowrap; } .bat-bang tbody tr:hover { background: var(--bat-xam-100); } .bat-bang .bat-so { font-family: var(--bat-font-so); text-align: right; white-space: nowrap; } /* Bảng rộng phải cuộn trong khung riêng, không làm cả trang trôi ngang */ .bat-cuon-ngang { overflow-x: auto; } /* ============================================================ MÀN HÌNH NHỎ ============================================================ */ @media (max-width: 1100px) { .bat-luoi--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { h1 { font-size: 1.875rem; } h2 { font-size: 1.5rem; } .bat-luoi--2, .bat-luoi--3, .bat-luoi--4 { grid-template-columns: 1fr; } .bat-muc { padding: var(--bat-cach-5) 0; } } /* --- Khi in / xuất PDF --- */ @media print { .bat-header, .bat-footer { position: static; } body.bat-chua-cho-header { padding-top: 0; } .bat-header__thanh { position: static; transform: none; box-shadow: none; } .bat-ngonngu, .bat-header__cta, .bat-thanh-mobile, .bat-man-che { display: none; } }