@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300..700&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho&display=swap"); @media screen and (min-width: 1600px) { html { /* ĐÃ REVERT về giá trị gốc (12.6984126984px) — từng thử giảm ~13.5% theo yêu cầu "font to quá", nhưng root font-size này KHÔNG chỉ quyết định cỡ chữ mà còn là đơn vị "rem" cho hầu hết max-width container toàn site (banner, hero, lineup-link__inner...). Giảm root font kéo theo mọi container đó co lại tỉ lệ thuận trong khi header (.custom-header, dùng px cố định, không phải rem) vẫn full-width — gây lệch rõ: nội dung bó hẹp giữa màn hình, lề 2 bên giãn to bất thường so với header tràn viền (xem ảnh chụp sếp gửi, trang chủ). Muốn giảm cỡ CHỮ mà không ảnh hưởng bề rộng layout thì phải chỉnh riêng từng font-size của các thành phần chữ, không đụng root này. */ font-size: 12.6984126984px; } } @media screen and (min-width: 768px) and (max-width: 1599px) { html { font-size: 0.7936507937vw; } } @media screen and (max-width: 767px) { html { font-size: 2.5vw; } } html * { outline: none; /* Tắt hẳn hiệu ứng "chớp sáng" mặc định của trình duyệt mobile (Android Chrome/Safari) khi chạm vào link/nút/phần tử có thể bấm — đây là -webkit-tap-highlight-color mặc định (thường là màu xám/xanh phủ full khối), không phải hiệu ứng site tự thêm. Áp dụng toàn site vì lỗi này xảy ra ở bất kỳ phần tử bấm được nào, không riêng 1 trang. */ -webkit-tap-highlight-color: transparent; } [x-cloak] { display: none !important; } :root { /* Lề tối thiểu dùng chung cho MỌI container "max-width + margin auto" toàn site (desktop) — đảm bảo nội dung không sát mép màn hình ở dải laptop 14-16" (~1366-1600px), nơi max-width co theo % viewport nên lề tự nhiên còn lại rất mỏng nếu chỉ padding cố định 2rem. min 24px, tự nới theo 4vw, tối đa 64px (không phình quá lớn trên màn rất rộng — ở đó margin-auto của max-width vốn đã đủ thoáng rồi). Đây là biến CHUNG cho toàn site: style.css lẫn