/* =============================================================================
Cổng tin tức Ban CNTT — CSS thuần, không framework.
Mục tiêu: Lighthouse Performance/SEO >= 90, tương phản đạt WCAG AA,
không tải font ngoài (dùng font hệ thống) để không phát sinh request chặn render.
============================================================================= */
/* Màu và font theo Bộ nhận diện thương hiệu Đại học Trà Vinh
(QĐ 10003/QĐ-ĐHTV ngày 14/11/2023). Giải thích từng token + bảng kiểm tra
tương phản WCAG: docs/BRAND-TVU.md và docs/brand-tokens.css. */
:root {
--brand: #053384; /* CHÍNH THỨC — xanh dương chủ đạo của Logo */
--brand-dark: #04296A; /* phái sinh: tối 20%, dùng cho hover và tiêu đề */
--brand-light: #E6EBF3; /* phái sinh: tint 10%, nền thẻ/tag */
--accent: #007500; /* CHÍNH THỨC — xanh lá; 5,92:1 trên nền trắng */
--brand-yellow: #FFFF00; /* CHÍNH THỨC — vàng truyền thống, CHỈ dùng trên nền tối */
/* Vạch 3 màu nhận diện TVU (header/chân trang/tiêu đề mục) — BẤT BIẾN trên mọi tenant/bộ giao diện (AI_RULES D.3 BR-9).
KHÔNG được ghi đè --bb1/2/3 ở bất kỳ đâu (theme, SiteInfoProvider, CSS riêng đơn vị). */
--bb1: #053384; /* xanh dương */
--bb2: #007500; /* xanh lá */
--bb3: #F2C200; /* vàng gold */
--ink: #0E1726;
--ink-soft: #51607A;
--line: #DAE0ED;
--bg: #FFFFFF;
--bg-soft: #F5F7FA;
--radius: 10px;
--shadow: 0 1px 2px rgb(16 32 48 / 6%), 0 8px 24px rgb(16 32 48 / 6%);
--maxw: 1120px;
/* UTM Futura trong bộ nhận diện KHÔNG được nhúng làm webfont (giấy phép phi
thương mại). Roboto chỉ dùng nếu máy người đọc đã cài — không tải font ngoài. */
--font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial,
"Noto Sans", "Liberation Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Chuyển trang mượt (bỏ "chớp" trắng): hòa mờ toàn trang khi điều hướng giữa các
tài liệu. Không đặt tên riêng cho header/footer để tránh nháy menu khi trang đích
nạp chậm. Thuần CSS; trình duyệt chưa hỗ trợ sẽ điều hướng như cũ. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
body {
margin: 0;
font-family: var(--font);
font-size: 16px;
line-height: 1.65;
color: var(--ink);
background: var(--page-bg, var(--bg));
}
img { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.sr-only, .skip-link:not(:focus) {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100;
background: var(--bg); color: var(--brand); padding: 10px 16px;
border-radius: var(--radius); box-shadow: var(--shadow);
}
/* ---------- Header (dính khi cuộn) ---------- */
.site-header {
background: var(--header-bg, var(--bg));
/* Ảnh nền do quản trị đặt (Appearance.HeaderBackgroundUrl) truyền qua biến --header-bg-image (không dùng inline
background-image) để media query mobile ghi đè được mà không cần !important. */
background-image: var(--header-bg-image, none);
background-size: var(--header-bg-size, cover);
background-position: center;
background-repeat: no-repeat;
position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 8px rgb(16 32 48 / 6%);
}
/* Nền đầu trang có chuyển động: người dùng bật "giảm chuyển động" → bỏ ảnh nền động (nền màu/vạch 3 màu vẫn giữ). */
@media (prefers-reduced-motion: reduce) {
.site-header[data-hbg-anim] { background-image: none !important; }
}
/* Vạch 3 màu nhận diện thương hiệu — đặt Ở TRÊN thanh menu (ranh giới dải logo và menu),
gắn bằng CSS nên LUÔN hiển thị dù ảnh nền bị background-size:cover cắt, và áp dụng cho MỌI ảnh nền.
KHÔNG đặt ở đáy header để tránh đè lên gạch vàng "mục đang chọn" của menu. */
.site-nav { position: relative; }
.site-nav::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
background: linear-gradient(to right,
var(--bb1) 0 36%, var(--bb2) 36% 68%, var(--bb3) 68% 100%);
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; padding-block: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
/* Ảnh tùy chọn BÊN PHẢI vùng logo (Appearance.HeaderRightImage*): chỉ khi đơn vị bật + chọn ảnh. Cao theo --hr-h (mặc định 72px),
rộng theo tỷ lệ ảnh (object-fit: contain), tối đa ~46% bề ngang → không bao giờ làm tràn ngang. Di động: ẩn (mặc định) hoặc hiện nhỏ ≤ 40px. */
.header-right { display: flex; align-items: center; flex: 0 1 auto; margin-left: auto; min-width: 0; color: inherit; }
.header-right:hover { text-decoration: none; }
.header-right img { display: block; height: var(--hr-h, 72px); width: auto; max-width: min(46vw, 460px); object-fit: contain; }
.header-inner.has-right .brand { min-width: 0; } /* chỉ khi có ảnh phải: logo/tên được co để nhường chỗ, không xuống dòng */
@media (max-width: 820px) {
.header-right--hide { display: none; }
.header-right--small img { height: min(var(--hr-h, 72px), 40px); max-width: 34vw; }
}
/* Vùng an toàn quanh logo: tài liệu không quy định con số, dùng khoảng cách
bằng ~1/6 chiều cao logo cho tới phần chữ bên cạnh. */
/* Logo đầu trang: cao theo --header-logo-size, RỘNG tự do (object-fit contain) để nhận cả logo VUÔNG
(giữ nguyên như cũ: width auto = height) lẫn logo NGANG dạng banner (vd logo "20 năm" có chữ) — co
theo bề rộng màn hình (max-width) nên hiện TRỌN trên cả di động. */
.brand-logo { width: auto; height: var(--header-logo-size, 48px); max-width: min(72vw, 360px); object-fit: contain; flex: 0 0 auto; }
/* CHẾ ĐỘ BANNER đầu trang: ảnh nguyên khối hiện như ![]()
CO GIÃN đầy chiều ngang.
max-height: 280px + object-fit:cover để ảnh to/vuông không chiếm hết màn hình.
Ảnh mỏng đúng chuẩn (≥1600×80-180px) hiện nguyên tỷ lệ, ảnh quá cao bị cắt phần dưới. */
/* Banner hiện TẠI VỊ TRÍ LOGO (BannerImageSize=logo): giữ tỷ lệ ảnh, width = auto, height theo HeaderLogoSize. */
/* Banner ở vị trí logo: cao theo --banner-h (Appearance.BannerImageHeight, mặc định 72px), rộng tự theo tỷ lệ; không tràn khung. */
.brand .brand-logo.brand-banner-logo { width: auto; height: var(--banner-h, 72px); max-width: 100%; object-fit: contain; object-position: left center; }
/* Banner bung HẾT chiều rộng màn hình (bỏ giới hạn .container + lề) → không hở 2 dải hai bên trên desktop. */
.site-header .header-inner--banner { position: relative; padding: 0; display: block; max-width: none; width: 100%; }
.header-banner { display: block; width: 100%; line-height: 0; }
.header-banner img { width: 100%; height: auto; display: block; max-height: 280px; object-fit: cover; object-position: center top; }
.header-inner--banner .lang-switch, .header-inner--banner .langswitch { position: absolute; top: 50%; transform: translateY(-50%); right: 16px; z-index: 3; }
/* Ảnh nền header (Appearance.HeaderBackgroundUrl): MỘT bản duy nhất — background CSS của .site-header, nằm sau dải logo (thanh menu đặc che phần dưới).
Desktop và mobile dùng CÙNG quy tắc (background-size theo cài đặt "cover/contain/stretch", mặc định cover) nên tự co theo bề ngang như nhau.
Không có khối ảnh thứ hai dưới thanh menu (trước đây thêm khối đó nên ảnh hiện 2 lần, còn dải logo bị trắng). */
/* Icon kính lúp trong nav-inner — desktop; click mở panel bên dưới nav-bar */
.nav-inner > .nav-search-btn {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto; flex-shrink: 0; width: 38px; height: 38px; align-self: center;
cursor: pointer; color: var(--menu-text, #eaf2fb); border-radius: var(--radius);
background: var(--menu-ctl-bg, rgb(255 255 255 / 12%)); border: 1px solid var(--menu-ctl-bd, rgb(255 255 255 / 20%));
transition: background .15s, opacity .15s;
}
.nav-inner > .nav-search-btn:hover { background: var(--menu-hover, rgb(255 255 255 / 25%)); }
.nav-inner > .nav-search-btn svg { width: 17px; height: 17px; }
@media (max-width: 820px) {
.nav-inner > .nav-search-btn { display: none; } /* mobile dùng nav-mobile-search */
}
/* Menu TIÊU CHUẨN (không mega): icon tìm kiếm di động nằm sát mép phải thanh menu (mega đã có brand ở giữa nên không cần) */
@media (max-width: 820px) { .site-nav:not(.site-nav--mega) .nav-bar .nav-mobile-search { margin-left: auto; } }
/* Mobile search icon style (nav-mobile-search dùng .search-icon) */
.nav-bar .search-icon { width: 36px; height: 36px; background: var(--menu-ctl-bg, rgb(255 255 255 / 15%)); border-color: var(--menu-ctl-bd, rgb(255 255 255 / 25%)); color: var(--menu-ctl-fg, #eaf2fb); }
.nav-bar .search-icon:hover { background: var(--menu-hover, rgb(255 255 255 / 28%)); color: var(--menu-hover-text, #fff); }
.nav-bar .search-icon svg { width: 17px; height: 17px; }
.nav-bar .search-input { background: var(--menu-ctl-bg, rgb(255 255 255 / 10%)); color: var(--menu-ctl-fg, #fff); border-color: var(--menu-ctl-bd, rgb(255 255 255 / 30%)); }
.nav-bar .search-input::placeholder { color: var(--menu-ctl-ph, rgb(255 255 255 / 55%)); }
.nav-bar .search-input:focus { border-color: var(--menu-ctl-fg, rgb(255 255 255 / 70%)); }
.nav-bar .search-toggle:checked ~ .search-input { width: min(200px, 40vw); padding: 6px 10px; }
.nav-bar .search-toggle:checked ~ .search-go { width: 36px; height: 36px; }
.nav-bar .search-go svg { width: 17px; height: 17px; }
@media (max-width: 820px) {
.nav-bar .search-toggle:checked ~ .search-input { width: min(180px, 50vw); }
}
/* === Panel tìm kiếm dropdown bên dưới nav-bar (desktop) — giống tvu.edu.vn === */
.nav-search-panel-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
/* Ô tìm kiếm GỌN thả xuống ngay dưới kính lúp (canh phải khung nội dung) — KHÔNG phải dải trắng tràn hết chiều ngang màn hình.
Panel trong suốt + không bắt chuột; chỉ