/* =====================================================================
   WGNC 2027 - BAN NHAP THEME NAVY (option mau B "Quoc gia doi dau")
   ---------------------------------------------------------------------
   - Nhap rieng, CHUA dua vao design-system (Andrew chot 08/11/2026).
   - Font + 8 kieu chu .t-* lay nguyen tu design-system/tokens.css.
   - Ma mau hex CHI nam trong khoi [data-theme="navy"] duoi day.
     Phan thanh phan (component) ben duoi chi dung bien.
   ===================================================================== */
@import url("tokens.css");

[data-theme="navy"] {
  --bg-page:          #FFFFFF;
  --bg-section:       #EEF2F7;   /* xam xanh */
  --bg-card:          #FFFFFF;
  --bg-inverse:       #06172E;   /* navy - 09/11/2026 Andrew chot dung chung 1 mau navy sau voi hero (truoc la #0B2545) */
  --bg-inverse-deep:  #06172E;   /* navy sau */
  --bg-band:          #06172E;
  --bg-nav:           #06172E;

  --text-heading:     #0B2545;   /* 15.4:1 tren trang, 13.7:1 tren xam xanh */
  --text-body:        #0E1A2B;   /* 15.6:1 tren xam xanh */
  --text-muted:       #33445A;   /* 8.8:1 tren xam xanh */
  --text-label:       #7A5218;   /* 6.1:1 tren xam xanh */

  --text-on-inverse:        #FFFFFF;  /* 15.4:1 tren navy */
  --text-on-inverse-muted:  #E2E8F0;  /* 12.5:1 */
  --text-on-inverse-accent: #F8DE96;  /* 11.6:1 */

  --band-number:      #F8DE96;
  --band-text:        #E2E8F0;
  --nav-text:         #FFFFFF;
  --nav-accent:       #D4A24C;
  --nav-accent-ink:   #06172E;

  --accent:           #D4A24C;   /* CHI lam nen nut / duong ke. Chu tren nen sang: cam */
  --accent-ink:       #06172E;   /* chu tren nen vang - 7.8:1 */
  --hero-title-1:     linear-gradient(180deg, #F8DE96 10%, #D4A24C 100%);
  --overlay-rgb:      6, 23, 46;
  --line:             rgba(11, 37, 69, .14);
  --line-on-inverse:  rgba(255, 255, 255, .22);
  --field-bg:         #FFFFFF;
  --field-border:     rgba(11, 37, 69, .35);
}

/* ---------- Nen tang dung chung ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
[id] { scroll-margin-top: 96px; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 48px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nut */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; border: 0; cursor: pointer; padding: 14px 28px; border-radius: 6px; }
.btn-pill { border-radius: 999px; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(1.06); }
.btn-navy { background: var(--bg-inverse); color: var(--text-on-inverse); }
.btn-ghost-inverse { background: transparent; border: 1.5px solid var(--text-on-inverse); color: var(--text-on-inverse); }
.btn-ghost-light { background: transparent; border: 1.5px solid var(--text-heading); color: var(--text-heading); }
.btn:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Nut doi ngon ngu (ban mau: chi tieng Viet). 09/11/2026: bo kieu vien thuoc to vang, doi sang kieu chu toi gian
   "VI | EN": ngon ngu dang chon sang mau + vach vang manh ben duoi, ngon ngu kia mo di. */
.lang { display: inline-flex; align-items: center; }
.lang button { position: relative; background: transparent; border: 0; padding: 8px 12px; cursor: pointer;
  letter-spacing: inherit; text-transform: inherit; color: color-mix(in srgb, var(--nav-text) 55%, transparent); transition: color .2s ease; }
.lang button + button { border-left: 1px solid var(--line-on-inverse); }
.lang button:hover { color: var(--nav-text); }
.lang button.on { color: var(--nav-text); }
.lang button.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--nav-accent); }

/* Logo nho trong menu */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nav-text); }
.brand img { height: 56px; width: auto; }

/* ---------- Dem nguoc ---------- */
.cd { display: inline-grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 12px; }
.cd-box { background: var(--bg-inverse-deep); border: 1px solid var(--line-on-inverse); border-radius: 8px; padding: 12px 10px; text-align: center; color: var(--text-on-inverse); }
.cd-box .t-h3 { color: var(--text-on-inverse); }
.cd-box .t-label { color: var(--text-on-inverse-accent); }
.cd-done { display: none; }
.cd-wrap.is-live .cd, .cd-wrap.is-over .cd { display: none; }
.cd-wrap.is-live .cd-live, .cd-wrap.is-over .cd-over { display: block; }
.cd-wrap.is-live .cd-pre, .cd-wrap.is-over .cd-pre { display: none; }

/* ---------- Co cac quoc gia ---------- */
.flags { display: grid; grid-template-columns: repeat(7, 1fr); gap: 24px 16px; }
.flag { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.flag img { width: 72px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field input, .field select { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; color: var(--text-body); background: var(--field-bg); border: 1.5px solid var(--field-border); border-radius: 6px; padding: 12px 14px; width: 100%; }
.form-note { display: none; margin-top: 12px; }
.form-note.show { display: block; }

/* Thong bao nho */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); opacity: 0; background: var(--bg-inverse-deep); color: var(--text-on-inverse); border: 1px solid var(--accent); padding: 12px 20px; border-radius: 8px; transition: .25s; z-index: 99; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dai logo don vi to chuc */
.logo-strip { display: flex; align-items: center; justify-content: center; gap: 56px; flex-wrap: wrap; }
.logo-strip figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.logo-strip img { height: 52px; width: auto; }
.logo-strip img.tall { height: 84px; }
.logo-strip .row { display: flex; gap: 28px; align-items: center; }

/* Hop thoai "Nhan ho so tai tro" (shared.js tao ra) */
.sponsor-dlg { width: min(560px, calc(100% - 32px)); border: 0; border-top: 4px solid var(--accent); padding: 36px 36px 28px; background: var(--bg-card); color: var(--text-body); }
.sponsor-dlg::backdrop { background: rgba(var(--overlay-rgb), .72); }
.sponsor-dlg .t-h3 { margin: 4px 0 6px; }
.sponsor-dlg .sp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.sponsor-dlg .full { grid-column: 1 / -1; }
.sponsor-dlg .form-note { color: var(--text-heading); }
.sponsor-dlg .dlg-call { margin: 18px 0 0; color: var(--text-muted); }
.sponsor-dlg .dlg-call a { color: var(--text-heading); }
.dlg-close { position: absolute; top: 10px; right: 14px; background: transparent; border: 0; cursor: pointer; color: var(--text-heading); }