/* * Phông chữ — phải đứng ĐẦU TỆP: quy tắc @import của CSS bị bỏ qua nếu có * bất kỳ quy tắc nào đứng trước nó. * * VÌ SAO Ở ĐÂY chứ không ở bố cục chung: 20 trang standalone có phần * riêng, không đi qua bố cục ấy, nên chúng không nạp phông. Chữ tiêu đề rơi * về Georgia — phông này dựng dấu tiếng Việt bằng ký tự ghép rời, nên * "nhận tư vấn" hiện thành "nhâ ̣n tư vâ ́n". Tệp site.css thì được chèn vào * mọi trang, nên đặt ở đây là cả 123 trang cùng có phông. */ @import url('/cdn/fonts.googleapis.com/css2_e15fcff971.css'); /* * Phần giao diện thêm vào 104 trang tĩnh — FE-13, FE-28. * * Quy tắc: mọi lớp ở đây bắt đầu bằng "site-" để chắc chắn không đè lên bất kỳ * lớp nào của giao diện gốc. Tệp này chỉ THÊM, không sửa quy tắc có sẵn. */ /* ------------------------------------------------ Nút đổi sáng / tối --- */ .site-mode { position: fixed; right: 14px; bottom: 96px; z-index: 9998; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; background: var(--primary, #213255); color: #fff; box-shadow: 0 6px 18px rgba(15, 25, 45, .28); transition: transform .18s ease, background .18s ease; } .site-mode:hover { transform: translateY(-2px); } .site-mode:focus-visible { outline: 3px solid var(--accent, #f39508); outline-offset: 2px; } .site-mode svg { width: 21px; height: 21px; } .site-mode__sun { display: none; } :root[data-theme="dark"] .site-mode__sun { display: block; } :root[data-theme="dark"] .site-mode__moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-mode__sun { display: block; } :root:not([data-theme="light"]) .site-mode__moon { display: none; } } @media (max-width: 767px) { .site-mode { width: 38px; height: 38px; bottom: 132px; } } /* ------------------------------------------------- Thông báo biểu mẫu --- */ .site-note { margin: 12px 0 0; padding: 11px 14px; border-radius: 8px; font-size: 14.5px; line-height: 1.55; } .site-note--ok { background: #e8f6ed; color: #1c6b3a; border: 1px solid #b7e0c6; } .site-note--err { background: #fdecec; color: #9b2c2c; border: 1px solid #f5c2c2; } :root[data-theme="dark"] .site-note--ok { background: #16352334; color: #7fd9a3; border-color: #2c6a46; } :root[data-theme="dark"] .site-note--err { background: #3a1c1c34; color: #f0a3a3; border-color: #7a3535; } /* Ô mồi bắt máy gửi tự động: người thật không nhìn thấy, không chạm tới được, nhưng vẫn nằm trong luồng đọc của trình đọc màn hình đúng nghĩa "bỏ trống". */ .site-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; } .site-busy { opacity: .6; pointer-events: none; } /* ----------------------------------------------- Cụm nút nổi (FE-51..53) --- */ .site-dock { position: fixed; right: 14px; bottom: 150px; z-index: 9997; display: flex; flex-direction: column; gap: 9px; } .site-dock__btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 17px; box-shadow: 0 6px 18px rgba(15, 25, 45, .26); transition: transform .18s ease; } .site-dock__btn:hover { transform: translateY(-2px); color: #fff; } .site-dock__btn--hotline { background: #d63b2f; } .site-dock__btn--zalo { background: #0068ff; } .site-dock__btn--messenger { background: #0084ff; } /* Số điện thoại hiện ra khi rê chuột: chiếm chỗ thì che mất nội dung trang */ .site-dock__text { position: absolute; right: 50px; top: 50%; transform: translateY(-50%); white-space: nowrap; background: #213255; color: #fff; font-size: 13px; padding: 5px 11px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .site-dock__item { position: relative; } .site-dock__item:hover .site-dock__text { opacity: 1; } @media (max-width: 767px) { .site-dock { bottom: 178px; } .site-dock__btn { width: 38px; height: 38px; font-size: 15px; } .site-dock__text { display: none; } } /* --------------------------------------------- Nút lên đầu trang (FE-11) --- */ .site-top { position: fixed; right: 14px; bottom: 46px; z-index: 9997; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer; background: var(--accent, #f39508); color: #fff; font-size: 18px; line-height: 1; box-shadow: 0 6px 18px rgba(15, 25, 45, .26); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .18s ease; } .site-top.is-on { opacity: 1; visibility: visible; } .site-top:hover { transform: translateY(-2px); } /* ----------------------------------------------- Đổi ngôn ngữ (FE-02) --- */ .site-langs { position: fixed; right: 14px; top: 96px; z-index: 9997; display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #e6ebf1; border-radius: 9px; padding: 5px; box-shadow: 0 6px 18px rgba(15, 25, 45, .12); } .site-langs__item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 13px; color: #213255; text-decoration: none; } .site-langs__item:hover { background: #f6f8fb; color: #213255; } .site-langs__flag { display: inline-flex; flex: 0 0 auto; } .site-langs__item.is-on { background: #213255; color: #fff; } :root[data-theme="dark"] .site-langs { background: #1b2432; border-color: #2b3646; } :root[data-theme="dark"] .site-langs__item { color: #dfe6ef; } :root[data-theme="dark"] .site-langs__item:hover { background: #253044; color: #fff; } @media (max-width: 767px) { .site-langs { top: auto; bottom: 46px; left: 14px; right: auto; flex-direction: row; } } /* ------------------------------------------------- Popup tiếp thị (FE-55) -- */ .site-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(12, 18, 30, .62); padding: 18px; } .site-popup__box { position: relative; max-width: 620px; width: 100%; max-height: 88vh; overflow: auto; border-radius: 12px; background: #fff; box-shadow: 0 20px 60px rgba(10, 16, 28, .4); } .site-popup__box img { display: block; width: 100%; height: auto; border-radius: 12px; } .site-popup__close { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(12, 18, 30, .55); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; } .site-popup__close:hover { background: rgba(12, 18, 30, .8); } /* ============================================================================= * MÀU ĐỘNG LẤY TỪ DỮ LIỆU * * Ba chỗ dưới đây từng dùng thuộc tính style="" vì màu do dữ liệu quyết định. * Yêu cầu 2.2 cấm CSS nằm trong tệp giao diện, nên phần cố định chuyển thành * lớp ở đây, còn phần đổi theo dữ liệu đi qua thuộc tính data- và được mã * JavaScript gắn vào. * ========================================================================== */ .cert-status-pill { display: inline-block; padding: 3px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; } /* Tab lọc ở trang danh sách khoá học */ .course-filter { display: inline-block; margin-bottom: -2px; padding: 10px 18px; border-bottom: 3px solid transparent; color: #213255; font-size: 15px; font-weight: 600; } .course-filter.is-on { border-bottom-color: #f39508; color: #f39508; } /* ============================================================================= * NÚT BA GẠCH SANG BÊN PHẢI — yêu cầu 6.2.4 (FE-09) * * Yêu cầu viết rõ: "khi ở mobile sẽ có nút 3 gạch ở bên tay phải". * * Website gốc thì đặt nút bên TRÁI: trong `partials/header.blade.php`, khối * `
` là con ĐẦU TIÊN của hàng `d-flex * justify-content-between`, đứng trước cả logo. Bản sao chép lại đúng như vậy, * nên yêu cầu này chưa bao giờ được thực hiện. * * VÌ SAO SỬA BẰNG CSS CHỨ KHÔNG ĐỔI HTML * -------------------------------------- * `partials/header.blade.php` là phần dùng chung của cả 104 trang đã bóc về, và * chúng phải giống bản gốc tới từng byte (tools/mirror/verify.py canh việc đó). * Đổi thứ tự thẻ trong header sẽ làm trượt cả 104 trang. * * Tệp site.css này nằm TRONG khối `…` — phần mà * bộ kiểm tra cắt bỏ trước khi so sánh. Nên sửa ở đây đạt được đúng yêu cầu mà * bản sao vẫn nguyên vẹn. * * `order: 9` đẩy nút xuống cuối hàng flex, tức là sang mép phải. Các phần tử * còn lại giữ `order` mặc định là 0 nên thứ tự tương đối của chúng không đổi: * logo vẫn trước, ba dấu công nhận vẫn sau. * * Mốc 991.98px lấy đúng theo Bootstrap: lớp `d-lg-none` trên chính nút đó ẩn * nó từ 992px trở lên, nên dưới mốc này mới là lúc nút hiện ra. * ========================================================================== */ @media (max-width: 991.98px) { .header-body .menu-bar { order: 9; } } /* ------------------------------------------- Dải mời để lại email ------ */ /* * Bố cục lấy theo dải đăng ký nhận tin của Traveloka: ảnh nền tràn viền phủ * màu thương hiệu, hình minh hoạ bên trái, tiêu đề lớn và biểu mẫu bên phải. * * BA LỚP NỀN, xếp từ trên xuống: * 1. Hoa văn SVG — chỉ vẽ bằng màu trắng nên dùng được với mọi màu nền * 2. Lớp phủ chuyển sắc, làm đậm mép trái để chữ luôn đọc được * 3. Màu thương hiệu lấy từ biến của quản trị * * Nhờ tách ba lớp mà đổi màu trong quản trị là cả dải đổi theo, không phải vẽ * lại ảnh nền. */ .site-signup { position: relative; padding: 48px 16px; color: #fff; background-color: var(--primary, #213255); background-image: url('/assets/site/bg-signup.svg'), linear-gradient(105deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .10) 46%, rgba(0, 0, 0, 0) 78%); background-repeat: no-repeat, no-repeat; background-size: cover, cover; background-position: center, center; } .site-signup__inner { max-width: var(--container, 1224px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; } /* --- Hình minh hoạ --- */ .site-signup__art { flex: 0 0 auto; width: 210px; /* currentColor trong hình lấy từ đây: nét mờ trên nền giấy trắng */ color: var(--primary, #213255); filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .28)); } .site-signup__art svg { display: block; width: 100%; height: auto; } /* Màn hình hẹp: hình chiếm chỗ mà không nói thêm điều gì, nên ẩn đi */ @media (max-width: 767px) { .site-signup__art { display: none; } } /* --- Chữ và biểu mẫu --- */ /* * Ba cột: hình — chữ — biểu mẫu. * * VÌ SAO KHÔNG GỘP CHỮ VÀ BIỂU MẪU LÀM MỘT: gộp lại thì biểu mẫu bị giới hạn * 620px và mép phải của dải còn trống 354px trên màn hình 1920 — khối nội dung * dồn hết về trái, nhìn lệch hẳn. Tách ba cột thì cả ba trải đều bề ngang. */ .site-signup__copy { flex: 1 1 320px; min-width: 0; } .site-signup__action { flex: 1 1 420px; min-width: 0; max-width: 520px; } .site-signup__title { margin: 0; font-family: var(--font-heading, Georgia, serif); font-size: 27px; line-height: 1.3; font-weight: 700; letter-spacing: -.2px; } .site-signup__note { margin: 8px 0 0; font-size: 15px; line-height: 1.6; opacity: .88; max-width: 56ch; } .site-signup__form { display: flex; flex-wrap: wrap; gap: 10px; } /* * Ô nhập bọc trong một thẻ riêng để đặt được biểu tượng phong bì bên trong. * Không dùng ảnh nền cho biểu tượng: hình vẽ thẳng vào trang thì đổi màu theo * biến CSS được, còn ảnh nền thì màu nằm chết trong tệp. */ .site-signup__field { position: relative; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; } .site-signup__field-icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--primary, #213255); opacity: .45; pointer-events: none; } .site-signup__input { width: 100%; padding: 13px 16px 13px 44px; border: 1px solid transparent; border-radius: var(--radius, 12px); background: #fff; color: #222; font-size: 15px; font-family: inherit; } .site-signup__input::placeholder { color: #8a94a3; } .site-signup__input:focus-visible { outline: 3px solid var(--accent, #f39508); outline-offset: 2px; } .site-signup__btn { flex: 0 0 auto; padding: 13px 26px; border: 0; border-radius: var(--radius, 12px); cursor: pointer; background: var(--accent, #f39508); color: var(--accent-contrast, #111); font-size: 15px; font-weight: 700; font-family: inherit; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: background .18s ease, transform .18s ease; } .site-signup__btn:hover { background: var(--accent-hover, #d97e00); transform: translateY(-1px); } .site-signup__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Thông báo sau khi gửi: chiếm trọn hàng dưới thay vì chen vào giữa ô nhập */ .site-signup__form .site-note { flex: 1 0 100%; margin-top: 4px; } /* --- Dải cam kết --- */ .site-signup__perks { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; } .site-signup__perks li { display: flex; align-items: center; gap: 8px; opacity: .92; } .site-signup__perks svg { width: 20px; height: 20px; flex: 0 0 auto; } @media (max-width: 575px) { .site-signup { padding: 34px 16px; } .site-signup__title { font-size: 22px; } .site-signup__form { flex-direction: column; align-items: stretch; } .site-signup__btn { width: 100%; } /* * BẮT BUỘC đặt lại flex cho ô nhập khi xếp dọc. * * `flex: 1 1 240px` ở bản ngang nghĩa là 'rộng tối thiểu 240px'. Đổi * sang flex-direction: column thì 240px ấy thành CHIỀU CAO — ô nhập * phình lên 240px và dải đăng ký trên điện thoại toàn khoảng trống. */ .site-signup__field { flex: 0 0 auto; } } /* ----------------------------------------------------- Chân trang ------ */ /* * Bốn biến --footer-* KHÔNG đổi theo chế độ sáng/tối, xem chú thích trong * Palette::defaults(). Chân trang là dải màu đậm khép lại bố cục; sáng lên * theo chế độ thì nó tan vào phần thân và mất vai trò phân tách. */ .site-footer { background: var(--footer-bg, #16233d); color: var(--footer-text, #c3ccda); font-size: 14.5px; line-height: 1.7; } .site-footer__inner { max-width: var(--container, 1224px); margin: 0 auto; padding: 40px 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 32px; } /* * Cột giới thiệu KHÔNG chiếm hai ô nữa. * * Lúc chân trang chỉ có một hai cột thì cho nó rộng gấp đôi trông cân. Nhưng * khi đã có thêm cột menu, cột chính sách và các cột chi nhánh thì tổng số ô * vượt quá một hàng: lưới chỉ xếp được 4 cột ở bề ngang 1224px, nên cột thứ * năm rơi xuống hàng hai và đứng trơ một mình. * * Để mọi cột rộng bằng nhau thì hàng nào cũng đầy, và thêm bớt cột trong quản * trị cũng không làm vỡ bố cục. */ .site-footer__col--wide { grid-column: span 1; } .site-footer__title { margin: 0 0 12px; color: var(--footer-heading, #f39508); font-family: var(--font-heading, Georgia, serif); font-size: 15px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .site-footer__lead { margin: 0 0 14px; } .site-footer__list { margin: 0; padding: 0; list-style: none; } .site-footer__list li { display: flex; gap: 10px; margin-bottom: 8px; } /* * Nhãn ngắn đứng đầu dòng ("ĐT", "Email", "Đ/c"). Rộng cố định để các dòng * thẳng cột — bản gốc dùng một chữ cái in đậm, nhưng "A" hay "P" thì người đọc * phải đoán nghĩa. */ .site-footer__key { flex: 0 0 46px; color: var(--footer-heading, #f39508); font-size: 12.5px; font-weight: 700; text-transform: uppercase; padding-top: 2px; } .site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .18s ease, color .18s ease; } .site-footer a:hover { color: var(--footer-heading, #f39508); border-bottom-color: currentColor; } .site-footer a:focus-visible { outline: 2px solid var(--footer-heading, #f39508); outline-offset: 2px; } .site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .site-footer__social-link { padding: 6px 13px; border: 1px solid var(--footer-border, #2a3854) !important; border-radius: 999px; font-size: 13px; } .site-footer__social-link:hover { background: var(--footer-heading, #f39508); border-color: var(--footer-heading, #f39508) !important; color: #14203a; } .site-footer__bar { border-top: 1px solid var(--footer-border, #2a3854); } .site-footer__inner--bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 16px; padding-bottom: 16px; font-size: 13.5px; } /* --------------------------------------------- Dải đầu trang ----------- */ /* * Dải trên cùng của đầu trang, dựng theo thanh điều hướng của Traveloka: nền * màu thương hiệu phủ hoa văn, chữ trắng, thông tin liên hệ và một nút hành * động dồn về bên phải. * * VÌ SAO CHỈ DẢI NÀY ĐƯỢC LÀM TỐI, không phải cả đầu trang: ảnh biểu trưng vẽ * bằng hai màu navy và cam trên nền trong suốt. Đặt nó lên nền navy thì đúng * phần chữ navy biến mất. Traveloka làm tối được cả đầu trang vì biểu trưng của * họ màu trắng — sao chép cách làm mà không xét tới tư liệu sẵn có thì hỏng. * * Hoa văn nạp bằng ảnh SVG chỉ vẽ màu trắng, nên đổi màu thương hiệu trong quản * trị là dải này đổi theo. */ .site-headbar { background-color: var(--primary, #213255) !important; background-image: url('/assets/site/bg-pattern.svg') !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center !important; } .site-headbar .container > .d-flex { min-height: 40px; } /* * Tách khỏi cụm liên kết bên trái bằng khoảng trống và một vạch mảnh. * * Thiếu vạch này thì số điện thoại dính ngay sau chữ "Quy Trình Chứng Nhận" * và đọc thành một dòng liền — mắt không biết đâu là menu, đâu là liên hệ. */ .site-headbar__right { display: flex; align-items: center; gap: 4px 18px; margin-left: auto; padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .22); } @media (max-width: 991px) { .site-headbar__right { padding-left: 0; border-left: 0; } } .site-headbar__item { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 13px; line-height: 1.2; text-decoration: none; opacity: .92; transition: opacity .18s ease; } .site-headbar__item:hover { color: #fff; opacity: 1; } .site-headbar__item:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; } .site-headbar__item svg { width: 16px; height: 16px; flex: 0 0 auto; } /* Số điện thoại là thứ khách tìm đầu tiên, cho nó đậm hơn phần còn lại */ .site-headbar__item--phone { font-weight: 700; font-size: 14px; opacity: 1; } .site-headbar__cta { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; background: var(--accent, #f39508); color: var(--accent-contrast, #111) !important; font-size: 13px; font-weight: 700; line-height: 1.5; text-decoration: none; white-space: nowrap; transition: background .18s ease, transform .18s ease; } .site-headbar__cta:hover { background: var(--accent-hover, #d97e00); transform: translateY(-1px); } .site-headbar__cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* * Màn hình hẹp: nửa trái của dải đã bị ẩn sẵn, nên chỉ giữ lại nút hành động. * Số điện thoại vẫn có ở nút nổi góc màn hình, hiện hai lần là thừa. */ @media (max-width: 991px) { .site-headbar__right { width: 100%; justify-content: flex-end; } .site-headbar__item { display: none; } .site-headbar__cta { margin: 5px 0; } } /* ---- Dải biểu trưng và các tổ chức công nhận ---- */ /* * Nền chuyển sắc phủ TOÀN BỘ đầu trang, xuống hết hàng menu. * * LỖI TÔI ĐÃ TỰ GÂY RA: ban đầu chỉ đặt nền cho `.header-body` (dải biểu * trưng). Hàng menu `.header-nav` vốn trong suốt nên lộ nền trắng của trang — * đầu trang trông như hai mặt phẳng rời nhau, rồi hở tiếp một khoảng trắng * nữa trước nội dung. * * Đặt nền lên chính `header.header` thì cả dải biểu trưng lẫn hàng menu nằm * trên cùng một mặt. Dải trên cùng đã có màu navy riêng nên nó tự che phần * chuyển sắc bên dưới. * * Dùng --primary-soft: biến này do quản trị sinh ra bằng cách kéo sáng màu * chính, nên luôn hợp tông dù đổi màu thương hiệu thế nào. */ header.header { background-image: linear-gradient(180deg, var(--primary-soft, #e9edf4) 0%, var(--bg-page, #fff) 100%); } /* * Nhãn đứng trước cụm logo tổ chức công nhận. * * Ba logo ấy trước đây đứng trần, không nói cho khách biết chúng là gì. Lấy * theo dải "Trusted by" của Traveloka: một nhãn ngắn, chữ nhỏ, đặt sát bên. */ .site-trust__label { margin-right: 12px; color: var(--muted, #64717f); font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .3px; text-transform: uppercase; max-width: 76px; } @media (max-width: 1199px) { .site-trust__label { display: none; } } /* * Cụm liên kết bên trái dải đầu trang: rút khoảng cách giữa các mục. * * Giao diện gốc đặt 40px giữa mỗi liên kết, hồi đó nửa phải dải để trống nên * thừa chỗ. Nay nửa phải có số điện thoại và nút hành động, tổng bề ngang vừa * đúng bằng khung chứa nên mục cuối bị đẩy xuống dòng — "Quy Trình Chứng" một * dòng, "Nhận" một dòng. * * 8 liên kết × 18px tiết kiệm được 144px, đủ để mọi thứ nằm gọn một hàng mà * không phải bỏ bớt mục nào. */ .site-headbar .header-top__left { display: flex; flex-wrap: nowrap; align-items: center; } .site-headbar .header-top__left > a { margin-right: 22px !important; white-space: nowrap; } .site-headbar .header-top__left > a:last-child { margin-right: 0 !important; } /* Hẹp hơn nữa thì bỏ khoảng cách trước, rồi mới tính tới chuyện ẩn bớt */ @media (max-width: 1279px) { .site-headbar .header-top__left > a { margin-right: 15px !important; font-size: 12.5px; } } /* * Thứ tự nhường chỗ trên dải đầu trang. * * VẤN ĐỀ: dải này chứa 8 liên kết, số điện thoại, email, giờ làm việc và một * nút. Điền đủ mọi ô trong Cấu hình chung là tổng bề ngang vượt khung chứa, mục * cuối bị đẩy xuống dòng thứ hai và dải cao gấp đôi — trông như lỗi. * * CHẶN THEO KHUNG CHỨA, KHÔNG CHẶN THEO MÀN HÌNH. * * Dải này nằm trong `.container` của Bootstrap, bề ngang tối đa 1320px. Màn * hình 1920px thì khung chứa vẫn chỉ 1320px — nên chặn theo bề ngang màn hình * là đo nhầm thứ. Tôi đã viết sai đúng kiểu đó: đặt ngưỡng 1699px, và trên màn * hình 1920px dải vẫn tràn hai dòng vì thứ chật là 1320px bên trong. * * Câu hỏi đúng không phải "màn hình rộng bao nhiêu" mà "chỗ tôi đang đứng rộng * bao nhiêu" — đó chính là việc của @container. * * Thứ tự khách cần, cái ít cần nhường trước: * * nút hành động > số điện thoại > email > giờ làm việc * * Giờ làm việc nhường đầu tiên vì nó cũng có ở chân trang; số điện thoại giữ * lâu nhất vì đó là thứ khách tìm trước tiên. */ .site-headbar .container { container-type: inline-size; } .site-headbar__item { white-space: nowrap; } @container (max-width: 1400px) { .site-headbar__item--hours { display: none; } } @container (max-width: 1200px) { .site-headbar__item:not(.site-headbar__item--phone) { display: none; } } @container (max-width: 1040px) { .site-headbar__item { display: none; } } /* ------------------------------------------- Ảnh bìa bài viết ---------- */ /* * Bìa dự phòng cho bài chưa gán ảnh đại diện — xem `_cover.blade.php`. * * PHẢI KHAI KÍCH THƯỚC: thẻ viết thẳng vào trang mà không có width/height * thì trình duyệt dựng ở cỡ mặc định 20×20 pixel, lọt thỏm giữa ô ảnh 16:9. * Thẻ thì tự giãn theo khung, thì không — khác biệt dễ quên. */ .post-cover { display: block; width: 100%; height: 100%; } /* Ô ảnh của thẻ bài có nền xám chờ ảnh; bìa lấp kín nên nền đó không lộ ra */ .post-cover + * { display: none; } /* * Bìa ở đầu trang bài: giữ tỉ lệ 16:9 và bo góc như ảnh thật. * * Thẻ bài trong danh sách đã có sẵn khung 16:9 nên bìa tự vừa; ở đây không có * khung nào, phải tự khai — nếu không thì co lại còn 20 pixel. */ .article-thumb--cover { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; } /* * Ô ảnh của khối "Bài viết liên quan". * * Trước đây khối này chỉ có chữ: sáu tiêu đề xếp nhau, mắt không bắt được cái * nào và gần như không ai bấm vào. Thêm ảnh thì mỗi mục có một điểm neo thị * giác riêng. * * Khai `aspect-ratio` ở đây chứ không ở thẻ : bìa dựng thẳng vào trang * không tự giãn theo khung như thẻ , phải có khung khai sẵn cho nó. */ .related-thumb { display: block; aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: 8px; overflow: hidden; background: var(--bg-soft, #f0f3f8); } .related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Khối mới trong chân trang: menu, chính sách, huy hiệu, fanpage ---- */ .site-footer__links { margin: 0; padding: 0; list-style: none; } .site-footer__links li { margin-bottom: 7px; } /* Menu con thụt vào, chữ nhỏ hơn — phân cấp mà không cần dấu đầu dòng */ .site-footer__links ul { margin: 6px 0 8px 14px; padding: 0; list-style: none; font-size: 13.5px; opacity: .82; } .site-footer__badge { display: inline-block; margin-top: 14px; border-bottom: 0 !important; } .site-footer__badge img { display: block; height: auto; max-width: 150px; /* * Huy hiệu vốn vẽ cho nền sáng. Trên nền chân trang tối thì viền chìm hẳn, * nên kê một nền trắng bo góc phía sau thay vì đổi màu ảnh. */ background: #fff; border-radius: 6px; padding: 5px 8px; } .site-footer__fanpage { border-radius: 8px; overflow: hidden; background: #fff; max-width: 300px; } .site-footer__fanpage iframe { display: block; width: 100%; height: 130px; border: 0; } .site-footer__gpkd { opacity: .8; } .site-footer__bar-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } /* ------------------------------------- Khoảng cách đầu trang – nội dung --- */ /* * Giao diện gốc để nội dung sát ngay dưới thanh menu. Tiêu đề trang vì thế dính * vào thanh menu và nhìn như bị đè lên, nhất là trên trang chữ. * * Khoảng cách lấy từ biến `--content-gap` do mục Màu sắc & giao diện sinh ra * (Quản trị → Màu sắc & giao diện → Khoảng cách dưới đầu trang), chỉnh được * 0–120px. Đặt thành ô chỉnh thay vì ghi cứng vì mỗi loại trang hợp một mức * khác nhau: trang mở đầu bằng ảnh bìa tràn viền thì hợp số nhỏ, trang chữ thì * cần rộng hơn. */ /* * `body .bodywrap` chứ không phải `.bodywrap`: một trang trong bộ giao diện * gốc tự đặt `padding-top: 65px` cho chính nó, còn các trang khác không đặt * gì. Đó là lý do khoảng cách lúc rộng lúc hẹp tuỳ trang. * * Nâng độ ưu tiên lên một bậc để luật này thắng ở MỌI trang — có vậy thanh * trượt trong quản trị mới điều khiển được cả website, thay vì trừ ra một trang. */ body .bodywrap { padding-top: var(--content-gap, 48px); } /* * TRỪ trang mở đầu bằng ảnh bìa tràn viền. * * Ảnh bìa vốn phải chạm thanh menu; chèn một dải trắng phía trên nó thì ảnh * trông như bị rơi ra khỏi đầu trang. Các khối này đều tràn hết bề ngang nên * nhận ra được bằng chính lớp của giao diện gốc. */ /* * ĐÃ BỎ phép loại trừ cho trang mở đầu bằng ảnh bìa tràn viền. * * Ban đầu tôi cho ảnh bìa chạm thẳng thanh menu vì nghĩ ảnh tràn viền thì phải * sát mép. Nhưng chủ website nhìn trang chủ và thấy đúng điều ngược lại: thanh * menu dính vào ảnh, không phân biệt được đâu là đầu trang đâu là nội dung. * * Giữ lại đây thay vì xoá hẳn, để lần sau ai đó định 'tối ưu' bằng cách cho ảnh * sát mép lại thì biết là đã thử rồi và đã bị bác. */ /* * Bóng đổ mảnh dưới đầu trang. * * Khoảng trống không thôi thì mắt vẫn đọc thanh menu và nội dung là cùng một * mặt phẳng. Một vệt bóng rất nhạt làm đầu trang thành lớp riêng nằm trên, nên * tách bạch được mà không cần đẩy khoảng cách lên quá lớn. */ header.header { position: relative; z-index: 20; box-shadow: 0 3px 10px rgba(15, 25, 45, .07); } /* --------------------------------- Chiều cao đầu trang tự co theo nội dung --- */ /* * GỠ CHIỀU CAO GHI CỨNG của đầu trang. * * Bộ giao diện gốc khai: * @media (min-width: 1200px) { .header { height: 231px } } * @media (max-width: 1199px) and (min-width: 992px) { .header { height: 204px } } * * Con số ấy đúng với đúng một cấu hình: dải tiện ích trên cùng cao 30px, dải * biểu trưng 141px, hàng menu 58px — vừa khít 231px (làm tròn từ 229). * * Thêm số điện thoại và nút hành động vào dải trên cùng làm nó cao 50px, tổng * thành 249px. Hộp đầu trang vẫn bị giữ ở chiều cao cũ, nên phần thừa TRÀN RA * NGOÀI hộp: nền chỉ tô tới mép hộp, còn hàng menu nằm ngoài vùng được tô. * * Đó chính là lý do hàng menu trông như thuộc về nội dung chứ không thuộc về * đầu trang. Tôi đã chữa nhầm bằng cách nới khoảng cách — sai bệnh. * * Chiều cao ghi cứng là một quả bom hẹn giờ: nó đúng cho tới lần đầu tiên có * người thêm bất cứ thứ gì vào đầu trang, và lúc vỡ thì không báo lỗi gì. * * `header.header` để thắng luật của bộ giao diện gốc, vì tệp này nạp trước. */ header.header { height: auto; min-height: 0; } /* ------------------------------------------------------------------ Video --- */ /* * Khối video chèn bằng mã `[video id="…"]` — xem VideoHtml::inline. * * Tỉ lệ 16:9 giữ bằng `aspect-ratio` trên khung, không bằng mẹo padding-top: * khung phát YouTube được chèn vào sau khi bấm, và nó phải lấp đúng chỗ ảnh bìa * vừa đứng — không nhảy bố cục khi đổi từ ảnh sang video. */ .site-video { margin: 24px auto; width: 100%; max-width: 960px; } .site-video--sm { max-width: 480px; } .site-video--md { max-width: 720px; } .site-video--lg { max-width: 960px; } .site-video--full { max-width: none; } .site-video--left { margin-left: 0; margin-right: auto; } .site-video--right { margin-left: auto; margin-right: 0; } .site-video--center { margin-left: auto; margin-right: auto; } .site-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #0f1724; } .site-video__player, .site-video__poster, .site-video__poster img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .site-video__poster { padding: 0; cursor: pointer; background: transparent; } .site-video__poster img { object-fit: cover; transition: transform .4s ease; } .site-video__poster:hover img, .site-video__poster:focus-visible img { transform: scale(1.03); } /* Nút phát: vẽ bằng CSS, không cần tệp ảnh */ .site-video__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0, 0, 0, .62); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); transition: background .2s ease, transform .2s ease; } .site-video__play::after { content: ''; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -8px; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; } .site-video__poster:hover .site-video__play, .site-video__poster:focus-visible .site-video__play { background: var(--primary, #d61f26); transform: scale(1.08); } .site-video__poster:focus-visible { outline: 3px solid var(--accent, #f5b301); outline-offset: -3px; } .site-video video.site-video__player { object-fit: contain; background: #000; } .site-video__caption { margin-top: 8px; font-size: 14px; color: var(--text-muted, #5b6472); text-align: center; } .site-video--left .site-video__caption { text-align: left; } .site-video--right .site-video__caption { text-align: right; }