/* =====================================================================
   site.css — giao diện riêng của site, nạp sau CSS của thư viện
   (nom.css, nom-navigation.css, nom-ui.css, nom-content.css) để ghi đè được.

   Tên lớp đặt theo vai trò (site-header, page-header, block-header, main-content…), không gắn với dự án,
   nên file này dùng làm khung cho site mới: sao chép sang, sửa phần 1 (biến màu) trước, rồi chỉnh từng phần khi cần.
   Khung trang và khối dùng chung (page-header, layout-sidebar, sidebar, block, post-list, banner, chip-nav, section)
   đã có giao diện mặc định trong nom-ui.css; file này chỉ ghi đè.

   1. Biến màu và kích thước
   2. Khung trang
   3. Topbar, header, menu chính
   4. Menu mobile
   5. Dải đầu trang
   6. Khối và cột phụ
   7. Section trang chủ: hero, stats, split-block, cta
   8. Footer
   9. Riêng của site
   ===================================================================== */

/* ---------- 1. Biến màu và kích thước ---------- */
:root {
  --nom-primary: #1565c0;
  --nom-primary-dark: #0b4a96;
  --nom-primary-soft: #e6f0fb;
  --nom-accent: #f59e0b;
  --site-header-h: 68px;
  --site-dark: #0f1f3a;
}

/* ---------- 2. Khung trang ---------- */
.site-main { min-height: 60vh; }
.site-container { padding-top: 1.25rem; padding-bottom: 1rem; }

/* Bỏ qua điều hướng (hiện khi focus bằng bàn phím). */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: .6rem 1rem; background: var(--nom-primary); color: #fff; }
.skip-link:focus { left: 1rem; top: 1rem; color: #fff; }

.back-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 700; opacity: 0; visibility: hidden; transition: opacity var(--nom-speed);
  background: var(--nom-primary); color: #fff; box-shadow: var(--nom-shadow-2); }
.back-top.show { opacity: 1; visibility: visible; }
.back-top:hover { background: var(--nom-primary-dark); color: #fff; }

/* ---------- 3. Topbar, header, menu chính ---------- */
.site-topbar { background: var(--site-dark); color: #cbd5e1; font-size: .82rem; }
.site-topbar .container { display: flex; align-items: center; min-height: 38px; gap: 1rem; }
.site-topbar a { color: #e2e8f0; }
.site-topbar a:hover { color: #fff; }
.site-topbar .topbar-contact { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.site-topbar .topbar-contact i { margin-right: .3rem; opacity: .8; }
.site-topbar .topbar-tools { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.site-topbar .menu-horizontal { height: 38px; }
.site-topbar .menu-horizontal > li > a { color: #e2e8f0; padding: 0 .6rem; font-weight: 500; }
.site-topbar .menu-horizontal > li > a::before { display: none; }

.lang-switch { display: inline-flex; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: .15rem .6rem; font-weight: 700; font-size: .75rem; text-transform: uppercase; color: #cbd5e1; text-decoration: none; }
.lang-switch a.current { background: #fff; color: var(--site-dark); }

.site-header { position: sticky; top: 0; z-index: 800; background: rgba(255,255,255,.96); backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--nom-border); transition: box-shadow var(--nom-speed); }
.site-header.scrolled { box-shadow: var(--nom-shadow-2); }
.site-header .container { display: flex; align-items: center; height: var(--site-header-h); gap: 1rem; }

.site-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--nom-text); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.site-brand:hover { color: var(--nom-text); text-decoration: none; }
.site-logo { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--nom-primary), #42a5f5); color: #fff; font-size: 1.4rem; box-shadow: 0 6px 14px rgba(21,101,192,.3); }
.site-brand small { display: block; font-size: .7rem; font-weight: 600; color: var(--nom-muted); letter-spacing: .04em; text-transform: uppercase; }

/* Menu chính đặt trên nền trắng nên ghi đè tông mặc định (chữ trắng) của nom-navigation.css. */
.site-nav { margin-left: auto; }
.site-nav .menu-horizontal { height: var(--site-header-h); }
.site-nav .menu-horizontal > li > a { color: #334155; padding: 0 1rem; font-weight: 600; font-size: .95rem; }
.site-nav .menu-horizontal > li > a::before { background: var(--nom-primary); height: 3px; border-radius: 3px 3px 0 0; }
.site-nav .menu-horizontal > li > a:hover { background: transparent; color: var(--nom-primary); text-decoration: none; }
.site-nav .menu-horizontal > li.active > a,
.site-nav .menu-horizontal > li.active-parent > a { color: var(--nom-primary); }
.site-nav .menu-horizontal > li.active > a::before,
.site-nav .menu-horizontal > li.active-parent > a::before { width: 70%; }
.site-nav .menu-horizontal ul { border: 1px solid var(--nom-border); border-radius: var(--nom-radius-sm); box-shadow: var(--nom-shadow-3); padding: .35rem; }
.site-nav .menu-horizontal ul a { border-bottom: 0; border-radius: 8px; color: #334155; }
.site-nav .menu-horizontal ul a:hover { background: var(--nom-primary-soft); color: var(--nom-primary-dark); padding-left: 25px; text-decoration: none; }
.site-nav .menu-horizontal ul li.active > a { color: var(--nom-primary); font-weight: 600; }

.site-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--nom-text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--nom-primary-soft); color: var(--nom-primary); text-decoration: none; }

/* .icon-btn tự đặt display nên lớp d-lg-none không ẩn được nút menu mobile; ẩn trực tiếp từ 1024px (mốc d-lg của NomCss). */
@media (min-width: 1024px) { #mobile-menu-toggle { display: none; } }

/* ---------- 4. Menu mobile (ngăn kéo bên phải) ---------- */
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 990; opacity: 0; visibility: hidden; transition: opacity var(--nom-speed); }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: var(--nom-surface); z-index: 991;
  transform: translateX(100%); transition: transform .22s ease; display: flex; flex-direction: column; box-shadow: var(--nom-shadow-3); }
.mobile-menu-open .mobile-menu-backdrop { opacity: 1; visibility: visible; }
.mobile-menu-open .mobile-menu { transform: none; }
.mobile-menu-open { overflow: hidden; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--nom-border); }
.mobile-menu-body { overflow-y: auto; flex: 1; padding: .5rem; }
.mobile-menu-body .menu-vertical { background: transparent; box-shadow: none; }
.mobile-menu-body .menu-vertical > li { border-bottom: 0; }
.mobile-menu-body .menu-vertical a { min-height: 48px; display: flex; align-items: center; border-radius: 10px; }
.mobile-menu-body .menu-vertical > li > a:hover { background: var(--nom-primary-soft); color: var(--nom-primary-dark); padding-left: 18px; }
.mobile-menu-body .menu-vertical li.active > a { color: var(--nom-primary); }
.mobile-menu-footer { padding: 1rem; border-top: 1px solid var(--nom-border); display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- 5. Dải đầu trang ---------- */
/* Dải đầu trang nằm sát header: bỏ khoảng đệm trên của container. Đổi màu: --page-header-bg, --page-header-fg. */
.site-container > .page-header:first-child { margin-top: -1.25rem; }

/* ---------- 6. Khối và cột phụ ---------- */
/* Dùng giao diện mặc định của nom-ui.css (.block, .post-list, .banner); ghi đè tại đây khi cần. */

/* ---------- 7. Section trang chủ ---------- */
.hero { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(900px 500px at 85% 10%, rgba(66,165,245,.55), transparent 60%),
              radial-gradient(700px 500px at 0% 100%, rgba(245,158,11,.25), transparent 60%),
              linear-gradient(135deg, #0b2a55 0%, #1565c0 100%); }
.hero .container { padding-top: clamp(3rem, 8vw, 6rem); padding-bottom: clamp(3rem, 8vw, 6rem); }
.hero .eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.14); font-size: .82rem; font-weight: 600; margin-bottom: 1.25rem; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; max-width: 760px; }
.hero p { font-size: clamp(1rem, .95rem + .3vw, 1.2rem); opacity: .9; max-width: 620px; margin-top: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero .btn-light { background: #fff; color: var(--nom-primary-dark); border-color: #fff; }
.hero .btn-light:hover { background: #f1f5f9; color: var(--nom-primary-dark); }
.hero .btn-ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.hero-art { display: none; }
@media (min-width: 1024px) {
  .hero-art { display: block; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); font-size: 15rem; line-height: 1; opacity: .14; }
}

.stats { margin-top: -2.5rem; position: relative; z-index: 2; }
.stats .card { display: grid; grid-template-columns: repeat(2, 1fr); }
.stats .stat { padding: 1.25rem; text-align: center; border-right: 1px solid var(--nom-border); border-bottom: 1px solid var(--nom-border); }
.stat-value { font-size: 1.75rem; font-weight: 800; color: var(--nom-primary); }
.stat-label { color: var(--nom-muted); font-size: .85rem; }
@media (min-width: 768px) { .stats .card { grid-template-columns: repeat(4, 1fr); } .stats .stat { border-bottom: 0; } .stats .stat:last-child { border-right: 0; } }

.split-block { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .split-block { grid-template-columns: 1fr 1fr; } }
.split-block .ratio-16x9 { border-radius: var(--nom-radius); box-shadow: var(--nom-shadow-2); }
.check-list { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; }
.check-list li { display: flex; gap: .6rem; align-items: flex-start; }
.check-list i { color: var(--nom-success); margin-top: .15rem; }

.cta { background: linear-gradient(135deg, var(--site-dark), #1565c0); color: #fff; border-radius: var(--nom-radius); padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cta h2 { font-size: 1.5rem; font-weight: 800; }
.cta p { opacity: .85; margin-top: .3rem; }
.cta .btn-light { background: #fff; color: var(--nom-primary-dark); border-color: #fff; }
.cta .btn-light:hover { background: #f1f5f9; color: var(--nom-primary-dark); }

/* ---------- 8. Footer ---------- */
.site-footer { background: var(--site-dark); color: #cbd5e1; margin-top: 3rem; padding-top: 3rem; font-size: .92rem; }
.site-footer h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.site-footer .contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.site-footer .contact-list i { width: 20px; color: #60a5fa; }
.site-footer .menu-horizontal { flex-direction: column; align-items: flex-start; height: auto; }
.site-footer .menu-horizontal > li > a { color: #cbd5e1; padding: .3rem 0; height: auto; font-weight: 500; }
.site-footer .menu-horizontal > li > a::before { display: none; }
.site-footer .menu-horizontal > li > a:hover { background: transparent; color: #fff; }
.site-footer .menu-horizontal ul { display: none; }
.social-links { display: flex; gap: .5rem; margin-top: 1rem; }
.social-links a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; }
.social-links a:hover { background: var(--nom-primary); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 2.5rem; padding: 1.1rem 0; font-size: .82rem; color: #94a3b8; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }

/* ---------- 9. Riêng của site ---------- */