/* ============================================================
   NSX — INDEX-8 · Tech Editorial
   Asymmetric hero + IT/tech SVG vector decorations
   Brand: Navy #0a2470 + Gold #f5b827
   ============================================================ */
:root {
  --navy-900: #050d28;
  --navy-800: #0a1942;
  --navy-700: #0a2470;
  --navy-600: #143494;
  --navy-blue:#1a4dc6;
  --gold:     #f5b827;
  --gold-2:   #f5d76e;
  --gold-d:   #c9911a;
  --ink:      #0a0f1f;
  --ink-2:    #2a3247;
  --ink-3:    #5b6378;
  --ink-4:    #8a91a5;
  --line:     #e6e9f0;
  --line-2:   #d4d9e6;
  --bg:       #ffffff;
  --bg-soft:  #f3f6fc;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Open Sans', sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }
svg { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
.mono { font-family: 'Open Sans', sans-serif; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ============================================================
   HEADER
   ============================================================ */
.header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.h-inner {
  max-width: 1280px; margin: 0 auto; padding: 14px 28px;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 26px;
}
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo img { width: 44px; height: 44px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.lt-name { font-weight: 500; font-size: 12px; color: var(--ink-3); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; }
.lt-name b { font-weight: 900; font-size: 16px; color: var(--navy-900); letter-spacing: .01em; }
.lt-tag { font-size: 12px; color: var(--gold-d); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; margin-top: 2px; font-weight: 700; }

.nav { display: flex; justify-content: center; gap: 30px; }
.nav-item {
  padding: 10px 0; font-weight: 500; font-size: 15px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  white-space: nowrap; transition: color .2s;
}
.nav-item:hover, .nav-item.active { color: var(--navy-700); }
.nav-item.active { font-weight: 700; }
.nav-item .caret { font-size: 12px; opacity: .6; }

.h-actions { display: flex; align-items: center; gap: 12px; }
.btn-vote {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 20px; background: var(--gold);
  color: var(--navy-900); border-radius: 999px;
  font-weight: 700; font-size: 14px; transition: background .2s;
  white-space: nowrap; flex-shrink: 0;
}
.btn-vote:hover { background: var(--gold-2); }
.btn-vote .btn-ic {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.btn-vote .btn-ic svg { width: 12px; height: 12px; }
.btn-vote:hover .btn-ic { background: #0a1942; }
.ic-btn {
  display: none; width: 40px; height: 40px;
  background: transparent; color: var(--ink-2);
  align-items: center; justify-content: center; transition: color .2s;
}
.ic-btn svg { width: 16px; height: 16px; }

/* ============================================================
   HERO — Asymmetric tech editorial
   ============================================================ */
.hero {
  position: relative;
  background: var(--navy-900) url('../images/hero-bg-tech.png') center/cover no-repeat fixed;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100vh - 74px);
  padding: 40px 0 50px;
  display: flex; align-items: center;
}

/* readability overlay over the photo background */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(90deg, rgba(5,13,40,.86) 0%, rgba(5,13,40,.62) 45%, rgba(5,13,40,.35) 100%);
  pointer-events: none;
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; padding: 0 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 70px;
  align-items: center;
}

/* metadata strip (replaces pill) */
.hero-meta {
  display: flex; align-items: center; gap: 18px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; letter-spacing: .12em;
  color: var(--gold-2);
  margin-bottom: 32px;
  font-weight: 500;
}
.hm-sep {
  width: 1px; height: 14px;
  background: rgba(245,184,39,.4);
}
.hm-slash {
  color: rgba(245,184,39,.55);
  font-weight: 400;
  margin: 0 4px;
}
.hm-dash {
  color: rgba(245,184,39,.55);
  font-weight: 400;
}
.hm-dot {
  width: 6px; height: 6px; background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.022em; margin: 0 0 24px; color: #fff;
}
.hero h1 .slash { color: var(--gold); font-weight: 300; margin: 0 6px; }
.hero h1 em {
  font-family: 'Open Sans', sans-serif;
  font-style: italic; font-weight: 300;
  color: var(--gold-2);
}

.hero-desc {
  font-size: 16px; color: #fff;
  line-height: 1.7; max-width: 520px;
  margin: 0 0 36px; font-weight: 300;
}

/* tech stats grid (3-col with mono numbers, no pill) */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 0;
  margin-bottom: 36px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  max-width: 540px;
}
.hs-item { padding: 0 28px; border-left: 1px solid rgba(255,255,255,.10); }
.hs-item:first-child { padding-left: 0; border-left: none; }
.hs-num {
  font-family: 'Open Sans', sans-serif;
  font-size: 30px; font-weight: 700;
  color: var(--gold);
  line-height: 1; letter-spacing: -.02em;
}
.hs-num sup { font-size: 15px; color: var(--gold-d); vertical-align: super; margin-left: 1px; }
.hs-label {
  font-size: 12px; color: #fff;
  letter-spacing: .14em; text-transform: uppercase;
  margin-top: 8px; font-weight: 500;
}

.hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 24px; background: var(--gold); color: var(--navy-900);
  border-radius: 999px;
  font-weight: 700; font-size: 14px;
  transition: background .2s, transform .2s; letter-spacing: .02em;
}
.btn-primary:hover { background: var(--gold-2); transform: translateY(-1px); }
.btn-primary .btn-ic {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.btn-primary .btn-ic svg { width: 14px; height: 14px; }
.btn-primary:hover .btn-ic { background: #0a1942; }

.btn-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-size: 14px; font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.3);
  transition: .2s;
}
.btn-link:hover { color: var(--gold); border-color: var(--gold); }
.btn-link svg { width: 12px; height: 12px; transition: transform .25s; }
.btn-link:hover svg { transform: translateX(4px); }

/* RIGHT visual panel */
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  max-height: 600px;
}
.hv-photo {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--navy-700);
}
.hv-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.hv-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(5,13,40,.8));
}

/* Corner brackets — camera focus markers */
.hv-corner {
  position: absolute; width: 28px; height: 28px;
  border: 2px solid var(--gold);
  z-index: 3;
  pointer-events: none;
}
.hv-corner.tl { top: -8px; left: -8px; border-right: none; border-bottom: none; }
.hv-corner.tr { top: -8px; right: -8px; border-left: none; border-bottom: none; }
.hv-corner.bl { bottom: -8px; left: -8px; border-right: none; border-top: none; }
.hv-corner.br { bottom: -8px; right: -8px; border-left: none; border-top: none; }

/* Photo caption strip */
.hv-caption {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  z-index: 3;
  font-family: 'Open Sans', sans-serif;
  font-style: italic; font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.hv-caption strong { color: var(--gold-2); font-style: normal; font-weight: 700; letter-spacing: .04em; }

/* ============================================================
   BRANDS — partner strip with tech divider
   ============================================================ */
.brands {
  background: #fff;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.brands-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Soft fade on both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.brands-track {
  display: flex; align-items: center;
  gap: 60px;
  width: max-content;
  /* Duplicated 2× → translating by -50% loops seamlessly */
  animation: brands-scroll 40s linear infinite;
  will-change: transform;
  opacity: .75;
}
.brands-marquee:hover .brands-track { animation-play-state: paused; }
@keyframes brands-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; }
}
.brand-item {
  font-size: 18px; font-weight: 900; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0;
}
.brand-item .sub { font-weight: 400; font-size: 13px; }
.brands-label {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; color: var(--ink-3);
  letter-spacing: .2em; text-transform: uppercase;
  margin-bottom: 18px; font-weight: 500;
}

/* ============================================================
   SECTION HEADER (shared)
   ============================================================ */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Open Sans', sans-serif;
  /* feedback "size chữ mục vàng vẫn hơi nhỏ": 11 → 12.5 → 14px, đậm hơn */
  font-size: 14px; font-weight: 700;
  color: var(--gold-d); letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

/* ============================================================
   STATS HIGHLIGHT — tech data visualization
   ============================================================ */
.tech-stats {
  background: var(--bg-soft);
  padding: 80px 0;
  position: relative; overflow: hidden;
}
/* tech bg vector — geometric pattern */
.tech-stats::before {
  content: ''; position: absolute; right: -100px; top: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(10,36,112,.05), transparent 70%);
  pointer-events: none;
}
.ts-head {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 50px; align-items: end;
  margin-bottom: 50px;
}
.ts-head h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1; margin: 0;
  color: var(--navy-900);
}
.ts-head h2 em { font-style: italic; font-weight: 400; color: var(--navy-700); }
.ts-head p {
  font-size: 16px; color: var(--ink-3); line-height: 1.7;
  margin: 0; max-width: 460px;
}
.ts-grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
}
.ts-card {
  padding: 36px 30px;
  border-right: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.ts-card:last-child { border-right: none; }
.ts-card::after {
  /* tech vector — grid dot pattern in corner */
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 100px; height: 100px;
  background-image: radial-gradient(rgba(10,36,112,.12) 1px, transparent 1px);
  background-size: 12px 12px;
  background-position: bottom right;
  opacity: .5; pointer-events: none;
}
.ts-card .ic {
  width: 44px; height: 44px;
  background: var(--navy-700); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.ts-card .ic svg { width: 20px; height: 20px; }
.ts-card .num {
  font-family: 'Open Sans', sans-serif;
  font-size: 38px; font-weight: 700;
  color: var(--navy-900); line-height: 1;
  letter-spacing: -.02em;
}
.ts-card .num sup { color: var(--gold-d); font-size: 21px; }
.ts-card .label {
  font-size: 13px; color: var(--ink-3); margin-top: 12px; line-height: 1.5;
}
.ts-card .meta {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; color: var(--gold-d);
  letter-spacing: .14em; text-transform: uppercase;
  margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* ============================================================
   ABOUT + SERVICES
   ============================================================ */
.about-sec { padding: 100px 0; background: #fff; position: relative; overflow: hidden; }
/* tech bg vector — corner triangle */
.about-sec::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid; border-width: 140px 140px 0 0;
  border-color: var(--bg-soft) transparent transparent transparent;
  pointer-events: none;
}

.about-head {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 60px; align-items: end; margin-bottom: 50px;
  position: relative; z-index: 1;
}
.ah-left h2 {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1;
  margin: 0; color: var(--navy-900);
}
.ah-left h2 em { font-style: italic; font-weight: 400; color: var(--navy-700); }
.ah-right p { font-size: 16px; color: var(--ink-3); line-height: 1.7; margin: 0 0 18px; }
.ah-right a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy-700); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--navy-700);
  padding-bottom: 4px; transition: .2s;
}
.ah-right a:hover { color: var(--gold-d); border-color: var(--gold-d); }
.ah-right a svg { width: 11px; height: 11px; }

/* ============================================================
   FEATURE BLOCK
   ============================================================ */
.feature {
  padding: 100px 0;
  background: var(--navy-900) url('../images/feature-bg-tech.png') center/cover no-repeat fixed;
  color: #fff;
  position: relative; overflow: hidden;
}
/* readability overlay */
.feature::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(5,13,40,.78) 0%, rgba(5,13,40,.55) 50%, rgba(5,13,40,.78) 100%);
  pointer-events: none;
}
.feature::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(26,77,198,.10), transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.feature .container { position: relative; z-index: 1; }
/* .feature .sec-eyebrow: bo mau vang rieng — dong nhat tieu de nho toan site (feedback Lan 5, muc 4.0) */
.feature-grid {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 60px; align-items: center;
}
.feat-left h3 {
  font-size: clamp(28px, 3.5vw, 42px); font-weight: 900;
  letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 20px; color: #fff;
}
.feat-left h3 em { font-style: italic; font-weight: 300; color: var(--gold-2); }
.feat-left p { font-size: 16px; color: #fff; line-height: 1.7; margin: 0 0 26px; max-width: 540px; }

.feat-bullets {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 32px;
}
.fb-row {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 14px; align-items: start;
}
.fb-row .check {
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.fb-row .check svg { width: 12px; height: 12px; }
.fb-row .text {
  font-size: 14px; color: #fff;
  line-height: 1.5;
}
.fb-row .text strong { color: var(--gold-2); font-weight: 700; }

.feat-right {
  position: relative;
  aspect-ratio: 5/4;
}
.feat-right .photo {
  position: absolute; inset: 0;
  overflow: hidden;
}
.feat-right .photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.feat-right .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5,13,40,.5), transparent 50%);
}
/* corner brackets */
.feat-right .hv-corner.tl { top: -8px; left: -8px; border-color: var(--gold); }
.feat-right .hv-corner.tr { top: -8px; right: -8px; border-color: var(--gold); }
.feat-right .hv-corner.bl { bottom: -8px; left: -8px; border-color: var(--gold); }
.feat-right .hv-corner.br { bottom: -8px; right: -8px; border-color: var(--gold); }

.feat-right .data-overlay {
  position: absolute; bottom: 20px; left: 20px; right: 20px;
  z-index: 3;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,184,39,.4);
  padding-top: 14px;
}
.fdo-cell {
  padding: 0 16px;
  border-left: 1px solid rgba(255,255,255,.15);
}
.fdo-cell:first-child { padding-left: 0; border-left: none; }
.fdo-cell strong {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 22px; font-weight: 700; color: var(--gold);
  line-height: 1;
}
.fdo-cell span {
  display: block;
  font-size: 12px; color: #fff;
  letter-spacing: .12em; text-transform: uppercase;
  margin-top: 6px;
}

/* ============================================================
   PROCESS — connecting circuit lines
   ============================================================ */
.process {
  padding: 100px 0;
  background: #fff;
  position: relative; overflow: hidden;
}
.process::before {
  /* tech bg vector — diagonal stripes */
  content: ''; position: absolute; top: 0; right: 0;
  width: 300px; height: 100%;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(10,36,112,.025) 0,
      rgba(10,36,112,.025) 1px,
      transparent 1px,
      transparent 16px);
  pointer-events: none;
}
.proc-head {
  text-align: center; max-width: 720px;
  margin: 0 auto 50px; position: relative; z-index: 1;
}
.proc-head .sec-eyebrow { justify-content: center; }
.proc-head h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 900;
  letter-spacing: -.02em; margin: 0 0 14px; color: var(--navy-900);
}
.proc-head h2 em { font-style: italic; font-weight: 400; color: var(--navy-700); }
.proc-head p { font-size: 16px; color: var(--ink-3); margin: 0; line-height: 1.7; }
.proc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; position: relative; z-index: 1;
}
.proc-grid::before {
  content: '';
  position: absolute; left: 70px; right: 70px; top: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--gold) 0 4px,
    transparent 4px 12px);
  z-index: 0;
}
.proc-item {
  text-align: center; padding: 0 16px;
  position: relative; z-index: 1; background: #fff;
}
.proc-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: var(--navy-700); color: var(--gold);
  margin-bottom: 22px;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px; font-weight: 700;
}
.proc-step::after {
  /* tech corner brackets on step */
  content: ''; position: absolute;
  inset: -6px;
  background-image:
    linear-gradient(90deg, var(--gold) 0 8px, transparent 8px),
    linear-gradient(90deg, var(--gold) 0 8px, transparent 8px),
    linear-gradient(0deg, var(--gold) 0 8px, transparent 8px),
    linear-gradient(0deg, var(--gold) 0 8px, transparent 8px);
  background-position: top left, top right, bottom left, bottom right;
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-repeat: no-repeat;
}
.proc-num {
  display: block;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; color: var(--gold-d);
  font-weight: 700; letter-spacing: .18em;
  margin-bottom: 6px; text-transform: uppercase;
}
.proc-item h4 { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--navy-900); }
.proc-item p { margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.65; }

/* ============================================================
   SOLUTIONS (Dark accordion + image)
   ============================================================ */
.solutions { padding: 100px 0; background: var(--bg-soft); }

/* ============================================================
   TEAM (Vinh danh)
   ============================================================ */
.team { padding: 100px 0; background: #fff; }
.team .container { display: grid; grid-template-columns: auto 1fr; gap: 80px; align-items: start; }
.team-head { position: sticky; top: 100px; }
.team-head h2 {
  font-size: 26px; font-weight: 900; letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 18px; color: var(--navy-900); max-width: 280px;
}
.team-head h2 em { font-style: italic; font-weight: 400; color: var(--navy-700); }
/* Section này nền XANH ĐẬM (không phải nền trắng như thiết kế gốc) nên
   không dùng --ink-3 (#5b6378, dành cho nền sáng) — đo được tương phản
   chỉ 3.2, dưới chuẩn 4.5. Dùng chữ trắng như các đoạn mô tả khác. */
.team-head p { font-size: 16px; color: #fff; line-height: 1.65; margin: 0 0 22px; max-width: 300px; }
.team-link {
  color: var(--navy-700); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--navy-700);
  padding-bottom: 4px; transition: .2s;
}
.team-link:hover { color: var(--gold-d); border-color: var(--gold-d); }
.team-link svg { width: 11px; height: 11px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card { text-align: center; cursor: pointer; transition: transform .25s; }
.team-card:hover { transform: translateY(-4px); }
.tc-avatar {
  width: 160px; height: 160px; border-radius: 50%;
  margin: 0 auto 18px; overflow: hidden; position: relative;
  background: var(--bg-soft);
}
.tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tc-name { font-size: 17px; font-weight: 800; color: var(--navy-900); margin: 0 0 4px; }
.tc-role { font-size: 12px; color: var(--gold-d); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; font-family: 'Open Sans', sans-serif; }
.tc-year { font-size: 12px; color: var(--ink-3); }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.testimonial { padding: 100px 0; background: var(--bg-soft); }

/* ============================================================
   NEWS
   ============================================================ */
.news { padding: 100px 0; background: #fff; }
.news-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 40px; flex-wrap: wrap; gap: 20px;
}
.news-head h2 {
  font-size: clamp(24px, 2.8vw, 32px); font-weight: 900;
  letter-spacing: -.02em; margin: 0; color: var(--navy-900);
  max-width: 540px; line-height: 1.1;
}
.news-head h2 em { font-style: italic; font-weight: 400; color: var(--navy-700); }
.news-head a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--navy-700); font-size: 12px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--navy-700);
  padding-bottom: 4px; transition: .2s;
}
.news-head a:hover { color: var(--gold-d); border-color: var(--gold-d); }
.news-head a svg { width: 12px; height: 12px; }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card {
  background: #fff; border: 1px solid var(--line);
  transition: .25s;
  display: flex; flex-direction: column;
}
.news-card:hover { border-color: var(--gold); box-shadow: 0 12px 32px rgba(10,36,112,.10); transform: translateY(-4px); }
.nc-img { aspect-ratio: 16/10; overflow: hidden; }
.nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.nc-body { padding: 22px 22px 24px; }
.nc-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.nc-date { font-size: 12px; color: var(--ink-3); font-family: 'Open Sans', sans-serif; }
.news-card h3 { font-size: 17px; font-weight: 800; color: var(--navy-900); margin: 0 0 12px; line-height: 1.3; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-900); color: #fff; padding: 0 0 24px; position: relative; }
.footer::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,184,39,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,184,39,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* ============================================================
   AD SLOTS — placeholder containers for sponsor banners
   ============================================================ */
.ad-section { padding: 30px 0; background: #fff; }
.ad-section.ad-soft { background: var(--bg-soft); }
.ad-slot {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  padding: 26px 30px;
}
.ad-section.ad-soft .ad-slot { background: #fff; }
.ad-slot .ad-label {
  position: absolute;
  top: 10px; right: 16px;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ad-slot .ad-ic {
  width: 56px; height: 56px;
  background: var(--navy-900);
  color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ad-slot .ad-ic svg { width: 26px; height: 26px; }
.ad-slot .ad-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ad-slot .ad-title { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -.005em; }
.ad-slot .ad-meta {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px; color: var(--ink-3); letter-spacing: .04em;
}
.ad-slot.ad-tall { padding: 50px 30px; min-height: 140px; }
@media (max-width: 720px) {
  .ad-slot { padding: 20px; gap: 16px; }
  .ad-slot .ad-ic { width: 44px; height: 44px; }
  .ad-slot .ad-ic svg { width: 22px; height: 22px; }
  .ad-slot .ad-title { font-size: 14px; }
}

.foot-top {
  background: var(--navy-700);
  padding: 50px;
  margin: 0 auto 50px; max-width: 1224px;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: center; color: #fff; isolation: isolate;
}
.foot-top::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 100% 50%, rgba(245,184,39,.2), transparent 50%),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: cover, 50px 50px, 50px 50px;
}
.foot-top h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 900; letter-spacing: -.012em; line-height: 1.25; margin: 0 0 6px; }
.foot-top h3 em { font-style: italic; color: var(--gold-2); font-weight: 300; }
.foot-top p { margin: 0; font-size: 14px; color: #fff; font-family: 'Open Sans', sans-serif; letter-spacing: .02em; }
.foot-top a {
  background: var(--gold); color: var(--navy-900);
  padding: 6px 6px 6px 24px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 14px;
  white-space: nowrap; transition: background .2s;
}
.foot-top a:hover { background: var(--gold-2); }
.foot-top a .btn-ic {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy-900); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .2s;
}
.foot-top a .btn-ic svg { width: 14px; height: 14px; }
.foot-top a:hover .btn-ic { background: #0a1942; }

.foot-main { max-width: 1280px; margin: 0 auto; padding: 0 28px; position: relative; }
.foot-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.foot-brand .logo { margin-bottom: 16px; }
.foot-brand .lt-name { color: #fff; }
.foot-brand .lt-tag { color: var(--gold-2); }
.foot-brand p { font-size: 14px; line-height: 1.7; margin: 0 0 16px; max-width: 320px; }
.foot-socials { display: flex; gap: 8px; margin-top: 14px; }
.foot-socials a {
  width: 36px; height: 36px;
  background: transparent; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  transition: .2s;
}
.foot-socials a:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.foot-socials svg { width: 15px; height: 15px; }
.foot-col h5 { font-size: 13px; font-family: 'Open Sans', sans-serif; font-weight: 700; color: var(--gold-2); margin: 0 0 18px; letter-spacing: .18em; text-transform: uppercase; }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a { font-size: 14px; transition: color .2s; }
.foot-col a:hover { color: var(--gold); }
.foot-col p { font-size: 13px; line-height: 1.7; margin: 0; }
.foot-bottom { padding-top: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,.88); font-family: 'Open Sans', sans-serif; letter-spacing: .04em; }
.foot-bottom a:hover { color: var(--gold); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav { gap: 18px; }
  .nav-item { font-size: 14px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-height: 480px; }
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-card:nth-child(2) { border-right: none; }
  .ts-card:nth-child(1), .ts-card:nth-child(2) { border-bottom: 1px solid var(--line); }
  .serv-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; gap: 40px; }
  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .proc-grid::before { display: none; }
  .sol-card { grid-template-columns: 1fr; padding: 40px 0 0 0; }
  .sol-left { padding: 0 40px; }
  .sol-right { min-height: 280px; margin: 0; }
  .team .container { grid-template-columns: 1fr; gap: 36px; }
  .team-head { position: static; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .ic-btn { display: inline-flex; }
  .h-inner { grid-template-columns: 1fr auto; padding: 12px 22px; }
  .hero { min-height: auto; padding: 40px 0 50px; display: block; }
  .hs-item { padding: 0 18px; }
  .hs-num { font-size: 24px; }
  .ts-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .about-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .news-grid { grid-template-columns: 1fr; gap: 18px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr; text-align: center; margin: 0 22px 40px; padding: 40px 30px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .feature, .process, .solutions, .team, .testimonial, .news, .about-sec, .tech-stats { padding: 70px 0; }
}

@media (max-width: 640px) {
  .container, .h-inner, .hero-inner, .foot-main { padding-left: 18px; padding-right: 18px; }
  .h-inner { padding: 10px 16px; gap: 10px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hs-item { padding: 0 10px; }
  .hs-num { font-size: 20px; }
  .hs-label { font-size: 12px; letter-spacing: .1em; }
  .ts-grid { grid-template-columns: 1fr; }
  .ts-card { border-right: none; border-bottom: 1px solid var(--line); }
  .ts-card:last-child { border-bottom: none; }
  .brands-track { gap: 36px; }
  .brand-item { font-size: 16px; }
  .proc-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .tc-avatar { width: 140px; height: 140px; }
  .news-head { flex-direction: column; align-items: flex-start; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .foot-top { margin: 0 16px 40px; padding: 32px 24px; }
  .feat-right .data-overlay { grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .fdo-cell strong { font-size: 18px; }
}

@media (max-width: 420px) {
  .lt-tag { display: none; }
  .logo img { width: 38px; height: 38px; }
  .lt-name { font-size: 15px; }
  .btn-vote { padding: 4px; gap: 0; }
  .btn-vote .bv-label { display: none; }
  .btn-vote .btn-ic { width: 32px; height: 32px; }
  .hero h1 { font-size: clamp(30px, 9vw, 42px); }
}

/* Reveal — fade-up for content blocks */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Word-by-word title drop */
.reveal-text { display: inline; }
.reveal-text .word {
  display: inline-block;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-32px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal-text.in .word { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-text .word { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   FONTAWESOME icon sizing (matches previous SVG rules)
   ============================================================ */
i[class*="fa-"] { line-height: 1; vertical-align: -.125em; flex-shrink: 0; }
.btn-vote .btn-ic i { font-size: 12px; }
.ic-btn i { font-size: 16px; }
.btn-primary .btn-ic i { font-size: 13px; }
.btn-link i { font-size: 12px; transition: transform .25s; }
.btn-link:hover i { transform: translateX(4px); }
.ts-card .ic i { font-size: 20px; }
.fb-row .check i { font-size: 13px; }
.team-link i { font-size: 13px; }
.news-head a i { font-size: 12px; }
.ad-slot .ad-ic i { font-size: 24px; }
.foot-top a .btn-ic i { font-size: 13px; }
.foot-socials i { font-size: 16px; }
.cs-btn i { font-size: 14px; }
.cs-cta i { font-size: 12px; margin-left: 6px; transition: transform .25s; }
.cs-slide:hover .cs-cta i { transform: translateX(4px); }

/* ============================================================
   FLOATING STARS (hero + feature)
   ============================================================ */
.floating-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fs-star {
  position: absolute; bottom: -30px; color: var(--gold);
  opacity: 0; animation: starRise var(--dur) linear infinite;
  animation-delay: var(--delay); will-change: transform, opacity;
}
.fs-star svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(245,184,39,.35)); }
@keyframes starRise {
  0%   { transform: translate3d(0,0,0) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--peak); }
  50%  { transform: translate3d(var(--drift), calc(var(--rise) * -.5), 0) rotate(180deg); }
  92%  { opacity: var(--peak); }
  100% { transform: translate3d(0, calc(var(--rise) * -1), 0) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fs-star { animation: none; opacity: var(--peak); } }

/* ============================================================
   PARALLAX DARK OVERHAUL — body is the parallax base layer
   ============================================================ */
body {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(180deg, rgba(5,13,40,.80), rgba(5,13,40,.86)),
    url('../images/feature-bg-tech.png');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: #fff;
}
@media (max-width: 900px) {
  body { background-attachment: scroll, scroll; }
  .hero, .feature { background-attachment: scroll !important; }
}

/* All light sections → transparent */
.brands, .tech-stats, .cat-slider-sec, .process, .solutions,
.team, .testimonial, .news, .ad-section, .ad-section.ad-soft {
  background: transparent !important;
  border-bottom: none !important;
}
.about-sec::before, .process::before, .tech-stats::before { display: none !important; }
.ts-head h2 em, .proc-head h2 em, .team-head h2 em,
.news-head h2 em, .cs-slide h3 em {
  color: var(--gold-2) !important;
}
.brand-item { color: #fff !important; }
.brand-item .sub { color: #fff !important; }
.team-link, .news-head a { color: var(--gold-2) !important; border-bottom-color: rgba(245,184,39,.5) !important; }
.team-link:hover, .news-head a:hover { color: var(--gold) !important; border-bottom-color: var(--gold) !important; }

/* Cards → glass */
.ts-grid { background: rgba(255,255,255,.035) !important; border-color: rgba(255,255,255,.10) !important; }
.ts-card { border-right-color: rgba(255,255,255,.10) !important; background: transparent !important; }
.ts-card .meta { border-top-color: rgba(255,255,255,.12) !important; color: var(--gold-2) !important; }
.ts-card::after { opacity: .15 !important; }

.proc-item { background: transparent !important; }
.proc-num { color: var(--gold-2) !important; }
.news-card { background: rgba(255,255,255,.035) !important; border-color: rgba(255,255,255,.10) !important; }
.news-card:hover { background: rgba(255,255,255,.07) !important; border-color: var(--gold) !important; box-shadow: none !important; }
.tc-avatar { background: rgba(255,255,255,.08) !important; }
.ad-slot { background: rgba(255,255,255,.035) !important; border-color: rgba(255,255,255,.10) !important; border-left-color: var(--gold) !important; }
.ad-section.ad-soft .ad-slot { background: rgba(255,255,255,.035) !important; }
.ad-slot .ad-label { color: var(--gold-2) !important; }
.ad-slot span { color: #fff !important; }

/* Sticky header keeps white */
.header { background: #fff !important; }

/* ============================================================
   CATEGORY SLIDER (hạng mục)
   ============================================================ */
.cat-slider-sec { padding: 100px 0 90px; position: relative; z-index: 1; }
.cs-head {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 60px; align-items: start; margin-bottom: 50px;
}
.cs-head h2 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; margin: 0;
  color: #fff;
}
.cs-head h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.cs-head-right { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.cs-head-right p { font-size: 16px; color: #fff; line-height: 1.7; margin: 0; }
.cs-controls { display: flex; gap: 10px; }
.cs-btn {
  width: 44px; height: 44px;
  background: transparent; color: var(--gold-2);
  border: 1px solid rgba(255,255,255,.20);
  display: flex; align-items: center; justify-content: center;
  transition: .25s;
}
.cs-btn:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

.cs-viewport { overflow: hidden; position: relative; }
.cs-track {
  display: flex; gap: 20px;
  scroll-snap-type: x proximity;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.cs-track::-webkit-scrollbar { display: none; }

/* Grid tĩnh hiện đủ 4 hạng mục — bỏ slider/mũi tên
   (feedback: Update web NSX Lần 4, mục 4.0) */
.cs-track-static {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .cs-track-static { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cs-track-static { grid-template-columns: 1fr; } }

.cs-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: #fff; transition: .3s;
}
.cs-slide:hover { border-color: var(--gold); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.cs-img { aspect-ratio: 16/10; overflow: hidden; background: var(--navy-800); }
.cs-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.cs-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.cs-meta {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 600;
}
.cs-slide h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  margin: 0; color: #fff;
}
.cs-slide p {
  font-size: 14px; color: #fff; line-height: 1.65;
  margin: 0; min-height: 66px;
}
.cs-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin-top: 6px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12);
}

/* ============================================================
   QUOTES SLIDER
   ============================================================ */
.quote-head {
  display: grid; grid-template-columns: 1.5fr auto;
  gap: 40px; align-items: end; margin-bottom: 50px;
}
.qh-left h2 {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800;
  margin: 0 0 12px; letter-spacing: -.02em; line-height: 1.1;
  color: #fff;
}
.qh-left h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.qh-left p { font-size: 16px; color: #fff; line-height: 1.7; margin: 0; max-width: 560px; }
.qh-controls { display: flex; gap: 10px; }

.quote-track { gap: 24px; }
.quote-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
  display: grid; grid-template-columns: 260px 1fr;
  gap: 50px; align-items: center;
  padding: 50px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
}
.quote-portrait { width: 260px; }
.quote-portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.quote-body { color: #fff; }
.quote-body .qm { font-size: 34px; color: var(--gold); display: block; margin-bottom: 14px; }
.quote-body p {
  font-size: 18px; line-height: 1.65; font-style: italic;
  color: #fff; margin: 0 0 22px;
  max-width: 720px; font-weight: 300;
}
.quote-author strong {
  font-size: 16px; font-weight: 700; color: var(--gold);
  display: block; margin-bottom: 4px;
}
.quote-author span {
  font-size: 12px; color: #fff;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ============================================================
   PROCESS CTA
   ============================================================ */
.proc-cta {
  margin-top: 44px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.btn-primary-lg { padding: 10px 10px 10px 30px; font-size: 16px; }
.proc-cta-note {
  font-size: 12px; color: #fff;
  letter-spacing: .06em;
}

/* ============================================================
   HERO title tweaks for new long headline
   ============================================================ */
.hero h1 { font-size: clamp(28px, 4.5vw, 52px); line-height: 1.1; }

/* ============================================================
   RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 1024px) {
  .cs-slide { flex-basis: calc((100% - 20px) / 2); }
  .cs-head, .quote-head { grid-template-columns: 1fr; gap: 24px; }
  .cs-head-right { align-items: stretch; }
  .qh-controls { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .cs-slide { flex-basis: 100%; max-width: 100%; min-width: 0; }
  .quote-slide { grid-template-columns: 1fr; padding: 34px 24px; gap: 24px; }
  .quote-portrait { width: 180px; }
  .quote-body p { font-size: 16px; }
  .ts-grid { grid-template-columns: repeat(2, 1fr); }
  .ts-card:nth-child(2n) { border-right: none !important; }
}
@media (max-width: 480px) {
  .ts-grid { grid-template-columns: 1fr; }
  .ts-card { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.10); }
  .ts-card:last-child { border-bottom: none; }
  .brands-track { gap: 26px; animation-duration: 30s; }
  .brand-item { font-size: 14px; }
  /* Header shrink to prevent 360px overflow */
  .h-inner { padding: 10px 16px; gap: 10px; }
  .logo img { width: 34px; height: 34px; }
  .lt-name { font-size: 12px; }
  .lt-name b { font-size: 12px; }
  .lt-tag { font-size: 12px; }
  .btn-vote { padding: 4px 4px 4px 14px; font-size: 12px; }
  .btn-vote .btn-ic { width: 28px; height: 28px; }
  .ic-btn { width: 34px; height: 34px; }
  .cs-track { padding: 0 4px 4px; }
}
/* ============================================================
   SUB-PAGE HERO — smaller than homepage hero
   ============================================================ */
.page-hero {
  position: relative;
  padding: 90px 0 60px;
  background: var(--navy-900) url('../images/hero-bg-tech.png') center/cover no-repeat fixed;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(5,13,40,.75) 0%, rgba(5,13,40,.65) 100%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto; padding: 0 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; letter-spacing: .04em;
  color: #fff; font-weight: 500;
  margin-bottom: 6px;
}
.crumb a { color: var(--gold-2); text-decoration: none; }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: rgba(255,255,255,.35); }
.page-hero h1 {
  /* feedback "tiêu đề trắng hơi bự so với nội dung": 46 → 38px,
     tỉ lệ so với body 16px hạ từ 2.88× xuống 2.38× cho cân */
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; margin: 0; color: #fff;
}
.page-hero h1 em { font-style: italic; font-weight: 300; color: var(--gold-2); }
.page-hero .lead {
  font-size: 16px; line-height: 1.7; color: #fff;
  margin: 6px 0 0; max-width: none;  /* full chiều ngang khung — feedback: mô tả bị ngắn hơn chiều ngang trang */
}
@media (max-width: 900px) {
  .page-hero { background-attachment: scroll !important; padding: 70px 0 44px; }
}

/* ============================================================
   PAGE SECTION — generic dark section wrapper
   ============================================================ */
.page-section { padding: 90px 0; position: relative; z-index: 1; }
/* max-width nằm ở h2 (giữ dòng tiêu đề dễ đọc); mô tả dùng khổ rộng hơn hẳn
   để không bị "ngắn hơn chiều ngang trang" (feedback: NSX-Trang Giới thiệu
   - Lần 2, mục 1.0/5.0 và NSX - Đề cử - Lần 2, mục 1.0/5.0) */
.page-section .sec-head { max-width: none; margin-bottom: 44px; }
.page-section .sec-head h2 {
  max-width: 780px;
  font-size: clamp(24px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.02em; margin: 10px 0 12px; color: #fff;
}
.page-section .sec-head h2 em { font-style: italic; font-weight: 400; color: var(--gold-2); }
.page-section .sec-head p { max-width: none; font-size: 16px; color: #fff; line-height: 1.7; margin: 0; }
.page-section.tight { padding: 60px 0; }

/* ============================================================
   TIMELINE — Vinh danh / Giới thiệu
   ============================================================ */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 78px; top: 24px; bottom: 24px;
  width: 1px; background: rgba(255,255,255,.15);
}
.tl-row {
  display: grid; grid-template-columns: 156px 1fr;
  gap: 32px; align-items: start;
  padding: 22px 0; position: relative;
}
.tl-year {
  font-size: 22px; font-weight: 800; color: var(--gold);
  letter-spacing: -.01em;
}
.tl-year .season {
  display: block; font-size: 13px; color: rgba(255,255,255,.88);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px;
}
.tl-body { padding-left: 32px; position: relative; }
.tl-body::before {
  content: ''; position: absolute; left: -6px; top: 8px;
  width: 12px; height: 12px; background: var(--gold);
  border: 3px solid var(--navy-900);
}
.tl-body h4 {
  font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 6px;
}
.tl-body p {
  font-size: 14px; color: #fff; line-height: 1.7; margin: 0;
}

/* ============================================================
   CATEGORY GRID (Đề cử page — 16 hạng mục)
   ============================================================ */
.cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
}
.cat-cell {
  background: rgba(255,255,255,.035);
  padding: 26px 22px; display: flex; flex-direction: column;
  gap: 12px; min-width: 0; transition: .25s;
}
.cat-cell:hover { background: rgba(255,255,255,.07); }
.cat-cell .ic {
  width: 42px; height: 42px;
  border: 1px solid rgba(245,184,39,.4); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.cat-cell .ic i { font-size: 18px; }
.cat-cell .meta { font-size: 12px; color: var(--gold-2); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.cat-cell h4 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
.cat-cell p { font-size: 13px; color: #fff; line-height: 1.6; margin: 0; }

/* ============================================================
   WINNER CARDS — Vinh danh
   ============================================================ */
.winner-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.winner-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  transition: .25s; overflow: hidden;
}
.winner-card:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255,255,255,.07); }
.winner-photo { aspect-ratio: 3/4; overflow: hidden; }
.winner-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.winner-body { padding: 18px 20px 22px; }
.winner-body .prize {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; margin-bottom: 6px; display: block;
}
.winner-body h4 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.winner-body .work { font-size: 13px; color: #fff; }

/* ============================================================
   ARTICLE (News detail)
   ============================================================ */
.article-wrap {
  max-width: 1240px; margin: 0 auto; padding: 60px 28px 80px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 60px;
  color: #fff;
}
.article-main { min-width: 0; max-width: 820px; }
.article-sidebar { position: sticky; top: 100px; align-self: start; display: flex; flex-direction: column; gap: 24px; }
.sb-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  padding: 22px 22px 24px;
}
.sb-card h5 {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700; margin: 0 0 16px;
}
.sb-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sb-toc li a {
  display: block; padding: 6px 0 6px 12px;
  border-left: 2px solid rgba(255,255,255,.12);
  font-size: 14px; color: #fff;
  transition: .2s;
}
.sb-toc li a:hover { color: var(--gold-2); border-left-color: var(--gold); }
.sb-related { display: flex; flex-direction: column; gap: 14px; }
.sb-related a {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; align-items: start;
  padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.sb-related a:last-child { border-bottom: none; padding-bottom: 0; }
.sb-related .thumb { aspect-ratio: 4/3; overflow: hidden; }
.sb-related img { width: 100%; height: 100%; object-fit: cover; }
.sb-related .info { min-width: 0; }
.sb-related .info .cat {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; display: block; margin-bottom: 4px;
}
.sb-related .info h4 { font-size: 13px; font-weight: 700; color: #fff; margin: 0; line-height: 1.35; }
.sb-related a:hover .info h4 { color: var(--gold-2); }
.sb-author {
  display: grid; grid-template-columns: 48px 1fr;
  gap: 14px; align-items: center;
  padding-top: 4px;
}
.sb-author .avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy-700); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.sb-author strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.sb-author span { font-size: 12px; color: #fff; }
.sb-share-row { display: flex; gap: 10px; }
.sb-share-row a {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-2); transition: .2s;
}
.sb-share-row a:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.article-header { margin-bottom: 40px; }
.article-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px; font-size: 12px;
}
.article-meta .cat {
  color: var(--navy-900); background: var(--gold);
  padding: 5px 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; font-size: 12px;
}
.article-meta .date, .article-meta .read {
  color: #fff; letter-spacing: .04em;
}
.article-meta .sep { color: rgba(255,255,255,.3); }
.article-header h1 {
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; margin: 0 0 20px; color: #fff;
}
.article-header .lede {
  font-size: 18px; line-height: 1.65; color: #fff;
  font-weight: 300; font-style: italic; margin: 0;
}
.article-hero {
  margin: 0 0 40px;
  aspect-ratio: 16/9; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: 16px; line-height: 1.8; }
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  font-size: 24px; font-weight: 800; color: #fff;
  margin: 40px 0 16px; letter-spacing: -.01em;
}
.article-body h3 {
  font-size: 19px; font-weight: 800; color: #fff;
  margin: 32px 0 12px;
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: #fff; font-weight: 700; }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 8px 0 8px 24px;
  margin: 28px 0; font-style: italic;
  color: #fff; font-size: 17px;
}
.article-body img {
  margin: 28px 0; border: 1px solid rgba(255,255,255,.10);
}
.article-body figcaption {
  font-size: 13px; color: #fff;
  text-align: center; margin-top: 8px; font-style: italic;
}
.article-share {
  display: flex; align-items: center; gap: 14px;
  padding: 30px 0; margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.article-share span { font-size: 13px; color: #fff; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-right: auto; }
.article-share a {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-2); transition: .2s;
}
.article-share a:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 60px;
}
.contact-info h3 {
  font-size: 20px; font-weight: 800; color: #fff;
  margin: 0 0 20px;
}
.contact-info .info-item {
  display: grid; grid-template-columns: 42px 1fr;
  gap: 16px; padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.contact-info .info-item:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.contact-info .info-item .ic {
  width: 42px; height: 42px;
  border: 1px solid rgba(245,184,39,.4);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.contact-info .info-item .ic i { font-size: 16px; }
.contact-info .info-item strong { display: block; color: #fff; font-size: 16px; margin-bottom: 4px; }
.contact-info .info-item span, .contact-info .info-item a { color: #fff; font-size: 14px; line-height: 1.6; }
.contact-info .info-item a:hover { color: var(--gold-2); }

.contact-form {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  padding: 40px;
}
.contact-form h3 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700;
}
.form-field input, .form-field textarea, .form-field select {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff; padding: 12px 14px;
  font-family: inherit; font-size: 14px;
  transition: .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--gold);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(-45deg, transparent 50%, var(--gold-2) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ============================================================
   RESPONSIVE — sub-page grids
   ============================================================ */
@media (max-width: 1100px) {
  .cat-grid, .winner-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cat-grid, .winner-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .tl-row { grid-template-columns: 90px 1fr; gap: 20px; }
  .timeline::before { left: 47px; }
  .tl-year { font-size: 18px; }
  .tl-body { padding-left: 22px; }
  .page-hero-inner { padding: 0 20px; }
  .article-wrap { padding: 44px 22px 60px; grid-template-columns: 1fr; gap: 44px; }
  .article-sidebar { position: static; }
  .article-main { max-width: 100%; }
}
@media (max-width: 560px) {
  .cat-grid, .winner-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 28px 22px; }
  .article-body h2 { font-size: 20px; }
  .article-body { font-size: 16px; }
}

/* ============================================================
   MOBILE DRAWER NAV — proper class-based toggle
   ============================================================ */
.nav-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 55; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.nav-scrim.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav.mobile-open {
    display: flex; position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 82vw);
    flex-direction: column; align-items: stretch;
    background: var(--navy-900);
    padding: 84px 24px 24px;
    gap: 4px;
    z-index: 60;
    box-shadow: -10px 0 40px rgba(0,0,0,.5);
    transform: translateX(0);
    animation: nav-slide-in .25s ease-out;
  }
  .nav.mobile-open .nav-item {
    padding: 14px 12px; font-size: 16px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav.mobile-open .nav-item.active { color: var(--gold); }
  .nav.mobile-open .nav-item:hover { color: var(--gold-2); }
  .nav.mobile-open .caret { display: none; }
  @keyframes nav-slide-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
}

/* ============================================================
   ĐỀ CỬ CHI TIẾT — Category detail page
   ============================================================ */
.cat-detail-hero {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 60px; align-items: center;
  padding: 40px 0 60px;
}
.cd-info .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(245,184,39,.15);
  color: var(--gold-2);
  font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid rgba(245,184,39,.35);
  margin-bottom: 20px;
}
.cd-info h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
  margin: 0 0 18px; color: #fff;
}
.cd-info h2 em { font-style: italic; font-weight: 300; color: var(--gold-2); }
.cd-info p { font-size: 16px; color: #fff; line-height: 1.7; margin: 0 0 26px; }
.cd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cd-stat strong {
  display: block; font-size: 26px; font-weight: 800;
  color: var(--gold); line-height: 1; margin-bottom: 6px;
}
.cd-stat span {
  font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; font-weight: 600;
}
.cd-progress {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  padding: 30px;
}
.cd-progress h4 {
  font-size: 16px; font-weight: 700; color: #fff;
  margin: 0 0 20px; letter-spacing: -.01em;
}
.cd-progress .bar {
  height: 8px; background: rgba(255,255,255,.10);
  overflow: hidden; margin-bottom: 14px;
}
.cd-progress .bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold-d), var(--gold));
}
.cd-progress .stats-line {
  display: flex; justify-content: space-between;
  font-size: 13px; color: #fff;
}
.cd-progress .stats-line strong { color: var(--gold); }

/* Nominee grid */
.nominee-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nominee-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column;
  overflow: hidden; transition: .25s;
}
.nominee-card:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255,255,255,.07); }
.nom-poster { aspect-ratio: 3/4; overflow: hidden; position: relative; }
.nom-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.nom-poster .nom-rank {
  position: absolute; top: 14px; left: 14px;
  width: 32px; height: 32px;
  background: var(--gold); color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.nom-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.nom-body .nom-meta {
  font-size: 12px; color: var(--gold-2);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
}
.nom-body h4 {
  font-size: 16px; font-weight: 800; color: #fff;
  margin: 0; letter-spacing: -.01em;
}
.nom-body .nom-sub {
  font-size: 13px; color: #fff;
  line-height: 1.55;
}
.nom-vote-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.nom-vote-row .vote-count {
  font-size: 12px; color: #fff;
}
.nom-vote-row .vote-count strong { color: var(--gold); font-size: 14px; }
.nom-vote-row .btn-vote-small {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--gold); color: var(--navy-900);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; transition: .2s;
}
.nom-vote-row .btn-vote-small:hover { background: var(--gold-2); }
.nom-vote-row .btn-vote-small i { font-size: 12px; }

/* ============================================================
   VINH DANH CHI TIẾT — Winner profile
   ============================================================ */
.winner-detail {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 60px; align-items: start;
  padding: 40px 0 20px;
}
.wd-photo { position: relative; }
.wd-photo img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}
.wd-photo .season-badge {
  position: absolute; top: 20px; right: 20px;
  padding: 8px 14px;
  background: var(--gold); color: var(--navy-900);
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase;
}
.wd-info .prize {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(245,184,39,.15);
  color: var(--gold-2);
  font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700;
  border: 1px solid rgba(245,184,39,.35);
  margin-bottom: 18px;
}
.wd-info h2 {
  font-size: clamp(32px, 4.5vw, 48px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 12px; color: #fff;
}
.wd-info .role { font-size: 16px; color: #fff; margin: 0 0 30px; letter-spacing: .04em; }
.wd-info h4 {
  font-size: 13px; font-weight: 700; color: var(--gold-2);
  letter-spacing: .14em; text-transform: uppercase;
  margin: 32px 0 12px;
}
.wd-info p { font-size: 16px; color: #fff; line-height: 1.75; margin: 0 0 16px; }
.wd-quote {
  padding: 22px 24px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid var(--gold);
  margin: 28px 0;
  font-style: italic; font-size: 16px;
  color: #fff; line-height: 1.7;
}

.wd-work-list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 0; padding: 0; list-style: none; }
.wd-work-list li {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 20px; align-items: center;
  padding: 16px 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
}
.wd-work-list li .year {
  font-size: 22px; font-weight: 800; color: var(--gold);
  letter-spacing: -.01em;
}
.wd-work-list li strong { font-size: 16px; color: #fff; display: block; margin-bottom: 4px; }
.wd-work-list li span { font-size: 13px; color: #fff; }
.wd-work-list li .tag {
  font-size: 12px; color: var(--gold-2);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid rgba(255,255,255,.15);
  font-weight: 700;
}

.wd-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.wd-gallery img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  transition: .25s;
}
.wd-gallery img:hover { border-color: var(--gold); }

/* Responsive */
@media (max-width: 1100px) {
  .nominee-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-detail-hero { grid-template-columns: 1fr; gap: 40px; }
  .winner-detail { grid-template-columns: 320px 1fr; gap: 44px; }
}
@media (max-width: 900px) {
  .nominee-grid { grid-template-columns: repeat(2, 1fr); }
  .winner-detail { grid-template-columns: 1fr; gap: 30px; }
  .wd-photo img { max-width: 400px; margin: 0 auto; }
  .wd-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nominee-grid { grid-template-columns: 1fr; }
  .wd-work-list li { grid-template-columns: 60px 1fr; }
  .wd-work-list li .tag { grid-column: 2 / -1; justify-self: start; margin-top: 4px; }
  .cd-stats { grid-template-columns: 1fr; gap: 18px; }
  .wd-gallery { grid-template-columns: 1fr; }
}

/* ============================================================
   MÙA GIẢI ĐANG DIỄN RA — slider 3 thẻ / hàng trên desktop
   ============================================================ */
.phase-slider-sec { padding: 100px 0 90px; position: relative; z-index: 1; }
.phase-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.phase-grid::-webkit-scrollbar { display: none; }
.phase-slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column;
  transition: .3s;
}
.phase-slide:hover { border-color: var(--gold); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.ph-img { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--navy-800); }
.ph-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.ph-status {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ph-status.ph-done { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.20); }
.ph-status.ph-live { background: var(--gold); color: var(--navy-900); }
.ph-status.ph-upcoming { background: rgba(0,0,0,.4); color: #fff; border: 1px solid rgba(255,255,255,.15); backdrop-filter: none; }
.ph-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy-900);
  animation: ph-pulse-ani 1.4s infinite;
}
@keyframes ph-pulse-ani { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.ph-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.ph-num {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700;
}
.phase-slide h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  margin: 0; color: #fff;
}
.ph-date {
  font-size: 13px; color: #fff;
  margin: 4px 0 8px; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: rgba(255,255,255,.03);
  border-left: 2px solid var(--gold);
}
.ph-date i { color: var(--gold); font-size: 12px; }
.phase-slide p:not(.ph-date) {
  font-size: 14px; color: #fff; line-height: 1.6;
  margin: 0;
}
.phase-slide .ph-body p + p { margin-top: -4px; }
.ph-quy-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.ph-quy-list li {
  font-size: 13px; color: #fff; line-height: 1.5;
  padding: 7px 12px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid var(--gold-2);
}
.ph-quy-list li strong { color: var(--gold-2); font-weight: 700; }
.phase-closing {
  margin: 28px 0 0; font-size: 14px; color: #fff;
  line-height: 1.7; opacity: .85;
}
.phase-closing strong { color: var(--gold-2); }

@media (max-width: 900px) {
  .phase-slide { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
  .phase-slide { flex-basis: 100%; }
}

/* ============================================================
   DRAG / SWIPE — cursor state
   ============================================================ */
.cs-track { cursor: grab; user-select: none; -webkit-user-select: none; }
.cs-track.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  /* Disable scroll-snap during active drag so scrollLeft can be set freely.
     Native snap resumes on release. */
  scroll-snap-type: none;
}
.cs-track.dragging a, .cs-track.dragging .phase-slide { pointer-events: none; }
/* On mobile revert to touch native */
@media (max-width: 720px) {
  .cs-track { cursor: auto; }
}

/* ============================================================
   NOTE-2 (14/07/2026) — UNIFIED HEADINGS
   Item 2.0: "Tất cả các tiêu đề lớn hạng mục: 1 màu và 1 font chữ"
   Single source of truth: all section headings render identical —
   same font (Open Sans 800), same color (#fff), including <em>.
   ============================================================ */
.ts-head h2, .cs-head h2, .quote-head h2, .qh-left h2,
.team-head h2, .news-head h2, .sec-head h2,
.proc-head h2, .page-hero h1, .hero h1,
.cd-info h2, .wd-info h2, .article-header h1,
.feat-left h3 {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-style: normal !important;
}
.ts-head h2 em, .cs-head h2 em, .quote-head h2 em, .qh-left h2 em,
.team-head h2 em, .news-head h2 em, .sec-head h2 em,
.proc-head h2 em, .page-hero h1 em, .hero h1 em,
.cd-info h2 em, .wd-info h2 em,
.feat-left h3 em {
  font-style: normal !important;
  font-weight: 800 !important;
  color: #fff !important;
}

/* ============================================================
   NOTE-2 — PARTNERS AT PAGE BOTTOM (item 9.0)
   ============================================================ */
.brands-group-label {
  text-align: center;
  font-size: 13px; color: var(--gold-2);
  letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
  margin: 26px 0 14px;
}
.brands-group-label:first-of-type { margin-top: 8px; }
/* Second marquee scrolls the opposite way for visual variety */
.brands-track-rev { animation-direction: reverse; }

/* 4-category layout on de-cu (2×2 grid, larger cells) */
.cat-grid-4 { grid-template-columns: repeat(2, 1fr); }
.cat-grid-4 .cat-cell { padding: 34px 30px; }
.cat-grid-4 .cat-cell h4 { font-size: 19px; }
.cat-grid-4 .cat-cell p { font-size: 14px; }
@media (max-width: 720px) {
  .cat-grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   TECH-LEAD REFACTOR — page-level smooth scroll & anchor offset
   Fixes: hero CTA "#dau-an" jumped hard + sticky header covered
   the section heading. scroll-margin keeps anchors clear of the
   fixed header on every section with an id.
   ============================================================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
section[id] { scroll-margin-top: 90px; }

/* ============================================================
   GIỚI THIỆU — timeline phase groups + council/advisor lists
   ============================================================ */
.tl-phase {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin: 34px 0 6px; padding-left: 4px;
  position: relative; z-index: 1;
}
.tl-phase:first-child { margin-top: 0; }

/* Council / advisor member list */
.council-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.council-item {
  min-width: 0;
  padding: 22px 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid rgba(255,255,255,.18);
}
.council-item.council-chair {
  grid-column: 1 / -1;
  border-left-color: var(--gold);
  background: rgba(245,184,39,.05);
}
.ci-name {
  font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 5px;
}
.ci-role {
  font-size: 14px; line-height: 1.6; color: #fff;
}
@media (max-width: 720px) {
  .council-list { grid-template-columns: 1fr; }
}

/* ============================================================
   UPDATE LẦN 3 (21/07/2026)
   ============================================================ */

/* ---- Logo đối tác (hình ảnh thật thay text) ---- */
.brands { padding: 60px 0 70px; }
.brands-heading {
  text-align: center;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 800; color: #fff;
  margin: 0 0 8px; letter-spacing: -.01em;
}
.brands-sub {
  text-align: center; font-size: 14px;
  color: #fff; margin: 0 0 34px;
}
.partner-logo-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px;
}
.partner-logo {
  width: 168px; height: 92px;
  background: #fff; border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  padding: 14px 18px; transition: .25s;
}
.partner-logo:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) {
  .partner-logo { width: calc(50% - 9px); height: 76px; }
}

/* ---- Hội đồng nghệ thuật / BTC / Ban cố vấn — thẻ có ảnh ---- */
.cp-subhead {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.cp-subhead i { color: var(--gold); font-size: 14px; }
.cp-subhead-mt { margin-top: 44px; }
.council-photo-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Chưa có ảnh thật — icon placeholder, cập nhật sau */
.cp-photo.no-photo {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-800);
}
.cp-photo.no-photo i { font-size: 44px; color: rgba(255,255,255,.22); }
.cp-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden; transition: .25s;
  display: flex; flex-direction: column;
}
.cp-card:hover { transform: translateY(-4px); border-color: var(--gold); background: rgba(255,255,255,.07); }
.cp-photo { aspect-ratio: 4/5; overflow: hidden; background: #5e0f10; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.cp-body { padding: 16px 18px 20px; }
.cp-title {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700; display: block; margin-bottom: 6px;
}
.cp-name { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -.01em; }
.cp-role { font-size: 13px; color: #fff; line-height: 1.55; }
/* Hội đồng Nghệ thuật: mọi giám khảo hiển thị GIỐNG NHAU — bỏ thẻ chủ tịch cỡ lớn
   (feedback Lần 5, mục 5.0). Chỉ giữ lại số cột theo bề ngang màn hình. */
@media (max-width: 1024px) { .council-photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .council-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .council-photo-grid { grid-template-columns: 1fr; } }

/* ---- Quy chế & Thể lệ ---- */
.rule-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.rule-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 3px solid var(--gold);
  padding: 26px 28px;
}
.rule-card h4 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 12px; letter-spacing: -.01em; }
.rule-card ul { margin: 0; padding-left: 18px; }
.rule-card li { font-size: 14px; color: #fff; line-height: 1.65; margin-bottom: 8px; }
.rule-card li:last-child { margin-bottom: 0; }
.rule-note {
  font-size: 14px; color: #fff; line-height: 1.7;
  background: rgba(245,184,39,.06); border: 1px solid rgba(245,184,39,.25);
  padding: 18px 22px; margin-top: 22px;
}
.rule-note strong { color: var(--gold-2); }
@media (max-width: 900px) { .rule-grid { grid-template-columns: 1fr; } }

/* Cơ cấu giải thưởng */
.award-structure {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: 10px;
}
.aw-col {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  padding: 24px 24px 26px;
}
.aw-col .aw-count {
  font-size: 30px; font-weight: 800; color: var(--gold); line-height: 1;
}
.aw-col h4 { font-size: 16px; font-weight: 800; color: #fff; margin: 10px 0 14px; text-transform: uppercase; letter-spacing: .04em; }
.aw-col h5 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700; margin: 14px 0 8px;
}
.aw-col ul { margin: 0; padding-left: 16px; }
.aw-col li { font-size: 13px; color: #fff; line-height: 1.6; margin-bottom: 5px; }
@media (max-width: 1024px) { .award-structure { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .award-structure { grid-template-columns: 1fr; } }

/* Bảng quy đổi vote */
.vote-table-wrap { overflow-x: auto; margin-top: 10px; }
.vote-table {
  width: 100%; border-collapse: collapse;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
}
.vote-table th {
  background: var(--navy-700); color: var(--gold-2);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 18px; text-align: left;
}
.vote-table td {
  padding: 13px 18px; font-size: 14px; color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
}
.vote-table td strong { color: var(--gold); }
.vote-table tr.free td { background: rgba(245,184,39,.07); }

/* Các bước bình chọn (thể lệ) */
.vote-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vote-step-col {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  padding: 26px 28px;
}
.vote-step-col h4 {
  font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 6px;
  display: flex; align-items: center; gap: 10px;
}
.vote-step-col h4 i { color: var(--gold); font-size: 16px; }
.vote-step-col .vs-sub { font-size: 13px; color: var(--gold-2); margin-bottom: 16px; display: block; }
.vote-step-col ol { margin: 0; padding-left: 20px; }
.vote-step-col ol li { font-size: 14px; color: #fff; line-height: 1.65; margin-bottom: 10px; }
@media (max-width: 900px) { .vote-steps { grid-template-columns: 1fr; } }

/* ---- ĐỀ CỬ — 4 tab hạng mục ---- */
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 40px;
}
.cat-tab {
  padding: 13px 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; transition: .2s;
  display: inline-flex; align-items: center; gap: 9px;
}
.cat-tab i { font-size: 13px; color: var(--gold-2); }
.cat-tab:hover { border-color: var(--gold); color: #fff; }
.cat-tab.active { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }
.cat-tab.active i { color: var(--navy-900); }
.cat-panel { display: none; }
.cat-panel.active { display: block; }

.cat-panel-hero {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 50px; align-items: center;
  margin-bottom: 46px;
}
.cph-info h2 {
  /* dùng size chung của hệ thống — QA DC-01: tiêu đề desktop từng lớn (42px) so với body */
  font-size: var(--h2-size); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 16px; color: #fff;
}
.cph-info p { font-size: 16px; color: #fff; line-height: 1.75; margin: 0 0 14px; }
.cph-visual { position: relative; }
.cph-visual img {
  width: 100%; aspect-ratio: 16/11; object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
}
.cph-stats {
  /* feedback Lần 5, mục 8.0: 3 thông số nằm NGANG trên 1 dòng, ngay dưới ảnh */
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(255,255,255,.12); border-top: none;
  background: rgba(255,255,255,.04);
}
.cph-stat { padding: 18px 22px; border-left: 1px solid rgba(255,255,255,.12); }
.cph-stat:first-child { border-left: none; }
.cph-stat strong { display: block; font-size: 24px; font-weight: 800; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.cph-stat span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #fff; font-weight: 600; }
@media (max-width: 1024px) { .cat-panel-hero { grid-template-columns: 1fr; gap: 30px; } }

.award-list-head {
  font-size: 14px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-2); margin: 0 0 18px;
}
/* heading thứ 2 trở đi trong panel bị dính sát khối phía trên (đo 0px);
   cho cách đúng 46px như heading đầu (nhịp margin-bottom của .cat-panel-hero) */
.award-cols + .award-list-head,
.nom-grid + .award-list-head { margin-top: 46px; }
.award-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.award-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 16px; align-items: center;
  padding: 15px 20px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
}
.award-row .no {
  width: 44px; height: 44px;
  background: var(--navy-700); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.award-row strong { display: block; font-size: 15px; color: #fff; margin-bottom: 2px; }
.award-row span { font-size: 12px; color: #fff; }
.award-row .who {
  font-size: 12px; color: var(--gold-2); letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border: 1px solid rgba(245,184,39,.3); font-weight: 700; white-space: nowrap;
}
@media (max-width: 900px) { .award-rows { grid-template-columns: 1fr; } }

/* ============================================================
   LOGO ĐỐI TÁC — 1 hàng chạy ngang + hover blur-flash
   (theo video mô tả: rê chuột vào logo → logo nhòe rồi hiện rõ lại)
   ============================================================ */
.partner-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 6px 0;
  /* mờ dần 2 mép như video */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.partner-track {
  display: flex; align-items: center;
  gap: 18px;
  width: max-content;
  /* nội dung nhân đôi 2× → dịch -50% là lặp liền mạch */
  animation: partners-scroll 45s linear infinite;
  will-change: transform;
}
/* dừng chạy khi rê chuột vào dải logo */
.partner-marquee:hover .partner-track { animation-play-state: paused; }
@keyframes partners-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* thẻ logo trong marquee giữ kích thước cố định */
.partner-track .partner-logo { flex: 0 0 168px; }

/* hover: thẻ nhấc nhẹ + viền vàng (đồng bộ site) */
.partner-logo { cursor: pointer; }

/* hiệu ứng blur-flash chạy 1 lần mỗi khi rê chuột vào logo */
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
@keyframes logo-blur-flash {
  0%   { filter: blur(0);   opacity: 1; }
  40%  { filter: blur(7px); opacity: .45; }
  100% { filter: blur(0);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .partner-logo:hover img { animation: none; }
}
@media (max-width: 640px) {
  .partner-track { gap: 12px; animation-duration: 30s; }
  .partner-track .partner-logo { flex: 0 0 140px; height: 78px; width: 140px; }
}

/* 2 nhóm — 2 hàng marquee riêng: hàng truyền thông chạy ngược chiều */
.partner-track-media { animation-direction: reverse; animation-duration: 40s; }
.partner-marquee + .brands-group-label { margin-top: 34px; }
@media (max-width: 640px) {
  .partner-track-media { animation-duration: 26s; }
}

/* ============================================================
   IMG SHATTER HOVER — canvas WebGL phủ lên ảnh gốc
   ============================================================ */
[data-shatter] { position: relative; overflow: hidden; }
[data-shatter] canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
/* các overlay/pseudo giữ trên canvas */
.wd-photo .season-badge { z-index: 2; }
.cph-img { position: relative; }
/* Hạng mục chưa có ảnh: giữ khung 16:11 thay vì sập mất cột ảnh */
.cph-img:empty { aspect-ratio: 16/11; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }

/* ============================================================
   QC ROUND 4
   ============================================================ */

/* ---- (2) SỬA TƯƠNG PHẢN — text tối trên nền tối ---- */
.ts-card .num, .proc-item h4, .news-card h3, .tc-name { color: #fff !important; }
.ts-card .label { color: #fff !important; }
.ts-head p, .proc-head p { color: #fff !important; }
.nc-date, .tc-year { color: #fff !important; }
.proc-item p { color: #fff !important; }
.ad-slot .ad-title { color: #fff !important; }
.ad-slot .ad-meta { color: #fff !important; }

/* ---- (3) CONFIG TẬP TRUNG — spacing section & size tiêu đề
   Đổi 1 chỗ tại đây là áp dụng toàn site ---- */
:root {
  --sec-pad: 88px;         /* khoảng cách dọc của section thường */
  --sec-pad-tight: 60px;   /* section "tight" */
  --h2-size: clamp(23px, 2.7vw, 31px);  /* size chung mọi tiêu đề section — giảm nhẹ cho cân đối với eyebrow (feedback: Update web NSX Lần 4, mục 1.0) */
}
.page-section, .tech-stats, .cat-slider-sec, .phase-slider-sec,
.team, .news, .process, .brands {
  padding-top: var(--sec-pad) !important;
  padding-bottom: var(--sec-pad) !important;
}
.page-section.tight {
  padding-top: var(--sec-pad-tight) !important;
  padding-bottom: var(--sec-pad-tight) !important;
}
.ts-head h2, .cs-head h2, .team-head h2, .news-head h2,
.sec-head h2, .proc-head h2, .brands-heading {
  font-size: var(--h2-size) !important;
}
@media (max-width: 900px) {
  :root { --sec-pad: 60px; --sec-pad-tight: 44px; }
}

/* ---- (4)+(5) CARD KIỂU MỚI — bo tròn, icon tile, số tròn góc phải
   Dùng chung cho: các bước bình chọn (.vstep) & thẻ quy chế (.rule-card) ---- */
.rule-card, .vstep {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-left: 1px solid rgba(255,255,255,.10); /* bỏ viền vàng trái cũ */
  border-radius: 22px;
  padding: 26px 28px 28px;
  position: relative;
  transition: transform .25s, border-color .25s, background .25s;
}
.rule-card:hover, .vstep:hover {
  transform: translateY(-4px);
  border-color: rgba(245,184,39,.55);
  background: rgba(255,255,255,.075);
}
.rc-head, .vs-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.rc-ic, .vs-ic {
  width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
}
.rc-ic i, .vs-ic i { font-size: 22px; }
.rc-num, .vs-num {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(245,184,39,.5);
  color: var(--gold-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; letter-spacing: .04em;
}
.vstep h4 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.vstep p { font-size: 14px; color: #fff; line-height: 1.65; margin: 0; }
.vstep-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px; position: relative; z-index: 1;
}
@media (max-width: 1024px) { .vstep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .vstep-grid { grid-template-columns: 1fr; } }

/* thumb lazy shatter cần position để canvas phủ đúng */
.shatter-thumb { position: relative; }
.shatter-thumb canvas {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  display: block;
}
/* avatar tròn: canvas cũng bo tròn theo */
.tc-avatar.shatter-thumb canvas { border-radius: 50%; }

/* ---- BUG UI FIX: header section "Dấu ấn" + tiêu đề bị inline cạnh eyebrow ----
   .ts-head là grid 2 cột làm eyebrow/h2/p chia ô sai (h2 văng sang phải).
   Đưa về xếp dọc: eyebrow -> tiêu đề -> mô tả, căn trái như các section khác. */
.ts-head {
  display: block !important;
  max-width: 780px;
  margin-bottom: 44px;
}
.ts-head h2 { margin: 0 0 12px; }
.ts-head p { max-width: 640px; }

/* JS word-reveal đặt h2 display:inline khiến tiêu đề nằm CHUNG DÒNG với eyebrow
   (vd "MÙA GIẢI XII · 2025 Mùa giải đang diễn ra."). Tiêu đề section phải là block. */
h2.reveal-text { display: block; }

/* ---- ĐỀ CỬ: danh sách giải thưởng kiểu editorial (bớt "template")
   Gom theo nhóm thật (HĐNT / Khán giả), số vàng + hairline, bỏ lặp thừa ---- */
.award-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px; align-items: start;
}
.award-group {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 22px;
  padding: 24px 30px 14px;
}
.ag-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700;
  padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.ag-label i { color: var(--gold); font-size: 14px; }
.ag-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ag-list li {
  display: flex; align-items: baseline; gap: 18px;
  padding: 13px 2px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: padding-left .2s, color .2s;
}
.ag-list li:last-child { border-bottom: none; }
.ag-list li:hover { padding-left: 10px; }
.ag-list li:hover .aw-name { color: var(--gold-2); }
.ag-list .no {
  font-size: 12px; font-weight: 700; color: var(--gold-d);
  min-width: 22px; letter-spacing: .04em;
}
.ag-list .aw-name { font-size: 16px; color: #fff; font-weight: 600; line-height: 1.5; transition: color .2s; }
.ag-list .note { display: block; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.88); margin-top: 2px; }
@media (max-width: 900px) { .award-cols { grid-template-columns: 1fr; } }

/* ---- Danh sách đề cử dạng ảnh (feedback: NSX - Đề cử - Lần 2, mục 2.0) ----
   Dữ liệu mẫu — thay nút "Bình chọn ngay" cuối trang. */
.nom-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 30px;
}
.nom-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden; transition: .25s;
}
.nom-card:hover { border-color: var(--gold); transform: translateY(-3px); }
.nom-img { aspect-ratio: 4/5; overflow: hidden; background: var(--navy-800); }
.nom-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* hover-img effect removed (feedback L4-01: bỏ hết hiệu ứng rê chuột vào hình) */
.nom-body { padding: 14px 16px 18px; }
.nom-body h4 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -.01em; }
.nom-cat { font-size: 13px; color: var(--gold-2); line-height: 1.4; }
@media (max-width: 720px) { .nom-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .nom-grid { grid-template-columns: 1fr; } }

/* ---- VINH DANH: thẻ winner kiểu ảnh tràn + text đè gradient (theo mẫu)
   Bỏ viền mảnh/hover vàng kiểu template. Item hover: hiện mô tả + nút mũi tên ---- */
.winner-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  border: none;
  background: var(--navy-800);
  transition: transform .3s;
}
.winner-card:hover {
  transform: translateY(-6px);
  border: none;
  background: var(--navy-800);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.winner-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.winner-photo img { width: 100%; height: 100%; object-fit: cover; }
/* gradient tối dần về đáy để chữ luôn đọc được */
.winner-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(5,13,40,.55) 68%, rgba(5,13,40,.95) 100%);
  transition: background .3s;
}
.winner-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 24px; }
.winner-body .prize {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(10,25,66,.5);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 12px;
}
.winner-body h4 { font-size: 19px; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
/* mô tả + nút mũi tên chỉ hiện khi hover (như item 1 trong mẫu) */
.winner-body .work {
  display: block; max-height: 0; opacity: 0; transform: translateY(8px);
  overflow: hidden;
  font-size: 13px; color: #fff; line-height: 1.55;
  transition: max-height .35s ease, opacity .35s ease, transform .35s ease, margin-top .35s ease;
}
.winner-card:hover .work { max-height: 84px; opacity: 1; transform: none; margin-top: 8px; }
.winner-body::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: var(--navy-900);
  margin-top: 0; opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease .05s, transform .3s ease .05s, margin-top .3s ease;
}
.winner-card:hover .winner-body::after { opacity: 1; transform: none; margin-top: 16px; }
/* canvas hiệu ứng vỡ nằm dưới gradient + chữ */
.winner-photo.shatter-thumb canvas { z-index: 0; }

/* ---- Chip hạng mục trên thẻ winner: luôn 1 dòng ---- */
.winner-body .prize {
  display: block;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  letter-spacing: .09em;
  padding: 6px 12px;
}

/* ---- TIN TỨC: card kiểu mẫu — nền solid bo lớn, notch ngày cắt vào ảnh,
   hairline + nút pill "Đọc tiếp" ---- */
:root { --news-card-bg: #0d1a3d; --news-card-bg-hover: #10214b; }
.news-card {
  background: var(--news-card-bg) !important;
  border: none !important;
  border-radius: 24px;
  padding: 12px 12px 6px;
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  transition: transform .25s, background .25s, box-shadow .25s;
}
.news-card:hover {
  background: var(--news-card-bg-hover) !important;
  border: none !important;
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}
.news-card .nc-img { border-radius: 16px; position: relative; }
.news-card .nc-body { padding: 0 10px 12px; }

/* badge ngày trong notch: nền trùng nền card + 2 góc lõm */
.news-card .nc-meta {
  position: relative; z-index: 2;
  width: fit-content;
  margin: -40px 0 14px -10px;
  background: var(--news-card-bg);
  padding: 10px 20px 8px 12px;
  border-top-right-radius: 18px;
  transition: background .25s;
}
.news-card:hover .nc-meta { background: var(--news-card-bg-hover); }
.news-card .nc-meta::before,
.news-card .nc-meta::after {
  content: ''; position: absolute;
  width: 18px; height: 18px;
  background: transparent;
  border-bottom-left-radius: 18px;
  box-shadow: -6px 6px 0 0 var(--news-card-bg);
  transition: box-shadow .25s;
}
.news-card .nc-meta::before { left: 0; top: -18px; }
.news-card .nc-meta::after  { right: -18px; bottom: 0; }
.news-card:hover .nc-meta::before,
.news-card:hover .nc-meta::after { box-shadow: -6px 6px 0 0 var(--news-card-bg-hover); }

.news-card .nc-date {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #fff;
}
.news-card .nc-date::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.news-card h3 { margin-bottom: 0; }

/* hairline + nút pill */
.nc-foot {
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 18px;
  padding: 14px 0 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.nc-more {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff;
  transition: .2s;
}
.nc-more i { font-size: 13px; }
.news-card:hover .nc-more { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }

/* ---- ĐỀ CỬ: bố cục danh sách giải gọn — nhóm xếp dọc full-width,
   danh sách chảy 2 cột nên không còn khoảng trống lớn cạnh nhóm ngắn ---- */
.award-cols { grid-template-columns: 1fr; gap: 18px; }
.award-group { padding: 24px 34px 16px; }
.ag-list { column-count: 2; column-gap: 56px; }
.ag-list li { break-inside: avoid; }
@media (max-width: 760px) { .ag-list { column-count: 1; } }

/* ============================================================
   LIÊN HỆ — redesign theo mẫu tham khảo
   ============================================================ */
/* --- khối info trái + form phải --- */
.contact2-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 56px; align-items: start;
}
.c2-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(245,184,39,.45);
  color: var(--gold-2); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; margin-bottom: 20px;
}
.c2-chip i { font-size: 13px; color: var(--gold); }
.c2-left h2 {
  font-size: var(--h2-size); font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1.15; margin: 0 0 14px;
}
.c2-sub { font-size: 16px; color: #fff; line-height: 1.7; margin: 0 0 26px; max-width: 440px; }
.c2-line { height: 1px; background: rgba(255,255,255,.10); margin-bottom: 28px; }
.c2-row {
  display: grid; grid-template-columns: 52px 1fr;
  gap: 18px; align-items: center;
  margin-bottom: 24px;
}
.c2-ic {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-d));
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.c2-row strong { display: block; font-size: 16px; color: #fff; margin-bottom: 3px; }
.c2-row p { margin: 0; font-size: 14px; color: #fff; line-height: 1.6; }
.c2-row a { color: #fff; }
.c2-row a:hover { color: var(--gold-2); }
.c2-socials {
  display: flex; gap: 26px; margin-top: 34px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.c2-socials a { font-size: 14px; font-weight: 700; color: #fff; transition: color .2s; }
.c2-socials a:hover { color: var(--gold-2); }

/* --- form card --- */
.c2-form {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 40px;
}
.c2-form h3 { font-size: 19px; font-weight: 800; color: #fff; margin: 0 0 24px; line-height: 1.45; }
.c2-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.c2-field { position: relative; }
.c2-field.full { grid-column: 1 / -1; }
.c2-field > i {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--gold-2); font-size: 14px; pointer-events: none;
}
.c2-field input, .c2-field select, .c2-field textarea {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #fff; padding: 14px 20px 14px 46px;
  font-family: inherit; font-size: 14px;
  transition: border-color .2s, background .2s;
}
.c2-field textarea {
  border-radius: 20px; min-height: 150px; resize: vertical;
  padding-top: 16px;
}
.c2-field.full > i { top: 24px; transform: none; }
.c2-field input:focus, .c2-field select:focus, .c2-field textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(255,255,255,.08);
}
.c2-field input::placeholder, .c2-field textarea::placeholder { color: rgba(255,255,255,.88); }
.c2-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(-45deg, transparent 50%, var(--gold-2) 50%);
  background-position: calc(100% - 24px) 55%, calc(100% - 19px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.c2-field select option { background: var(--navy-800); color: #fff; }

/* --- 2 cơ sở: card vòng tròn dashed --- */
.office-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 420px));
  gap: 24px; justify-content: center;
}
.office-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  padding: 44px 36px 38px;
  text-align: center;
  transition: transform .25s, background .25s;
}
.office-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.oc-ring {
  width: 148px; height: 148px; border-radius: 50%;
  border: 2px dashed rgba(245,184,39,.55);
  margin: 0 auto 26px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.oc-ring::before {
  content: ''; position: absolute; inset: 12px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,184,39,.16), rgba(245,184,39,.05));
}
.oc-ring i { position: relative; font-size: 44px; color: var(--gold); }
.office-card h4 { font-size: 21px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.oc-tag {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold-2);
}
.oc-div { display: block; width: 44px; height: 2px; background: rgba(245,184,39,.5); margin: 16px auto 18px; }
.office-card p { margin: 0 0 10px; font-size: 14px; color: #fff; line-height: 1.65; }
.office-card a { color: #fff; }
.office-card a:hover { color: var(--gold-2); }
/* Người phụ trách riêng theo Ban Thư Ký (feedback: NSX-Trang Liên hệ - Lần 2, mục 1.0) */
.oc-people {
  text-align: left; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.oc-person { margin-bottom: 12px; }
.oc-person:last-child { margin-bottom: 0; }
.oc-person strong { display: block; font-size: 14px; color: #fff; font-weight: 700; margin-bottom: 3px; }
.oc-person span { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.5; }
.oc-person a { color: rgba(255,255,255,.85); }
.oc-person a:hover { color: var(--gold-2); }

@media (max-width: 1024px) { .contact2-grid { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 760px)  {
  .office-grid { grid-template-columns: 1fr; }
  .c2-form { padding: 28px 22px; }
  .c2-form-grid { grid-template-columns: 1fr; }
}

/* tiêu đề khối liên hệ: đồng nhất font, không nghiêng */
.c2-left h2 em { font-style: normal; font-weight: 800; color: #fff; }

/* ---- FOOT-TOP CTA: nền technical vector (circuit + star + grid + beam) ---- */
.foot-top {
  position: relative;
  overflow: hidden;
  background: linear-gradient(118deg, #0e2a7a 0%, #0a1a4d 52%, #123078 100%);
}
/* lớp vector: mạch circuit trái + ngôi sao outline phải + lưới kỹ thuật */
.foot-top::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='rgba(245,184,39,0.30)' stroke-width='1.5'%3E%3Cpath d='M0 40h90l26 26h96'/%3E%3Cpath d='M0 120h140l30-30h80'/%3E%3Cpath d='M0 200h70l24-24h120l20 20h70'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1'%3E%3Cpath d='M0 70h60l20 20h50'/%3E%3Cpath d='M0 160h100l18-18h60'/%3E%3C/g%3E%3Cg fill='rgba(245,184,39,0.55)'%3E%3Ccircle cx='212' cy='66' r='3.5'/%3E%3Ccircle cx='250' cy='90' r='3.5'/%3E%3Ccircle cx='304' cy='196' r='3.5'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.38)'%3E%3Ccircle cx='140' cy='120' r='3'/%3E%3Ccircle cx='130' cy='90' r='2.5'/%3E%3Ccircle cx='178' cy='142' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.9 7.4.4-5.8 4.6 2 7.1-6.2-4.1-6.2 4.1 2-7.1L2 9.3l7.4-.4z' fill='none' stroke='rgba(245,184,39,0.20)' stroke-width='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.6 6.9 7.4.4-5.8 4.6 2 7.1-6.2-4.1-6.2 4.1 2-7.1L2 9.3l7.4-.4z' fill='rgba(245,184,39,0.07)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 480px 240px, 320px 320px, 160px 160px, 46px 46px, 46px 46px;
  background-position: -20px center, right -60px top -70px, right 220px bottom -40px, 0 0, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
}
/* lớp ánh sáng: glow vàng + glow xanh + vệt beam chéo */
.foot-top::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(420px 200px at 86% 28%, rgba(245,184,39,.16), transparent 70%),
    radial-gradient(520px 260px at 6% 92%, rgba(72,130,255,.22), transparent 70%),
    linear-gradient(115deg, transparent 42%, rgba(255,255,255,.06) 49%, transparent 56%);
}
.foot-top > * { position: relative; z-index: 2; }

/* ---- FOOTER: nền ảnh technical circuit (do BTC cung cấp) ---- */
.footer {
  background: var(--navy-900) url("../images/footer-bg.jpg") center top / cover no-repeat;
}
/* thay lưới cũ bằng scrim mờ để chữ footer luôn rõ trên ảnh */
.footer::before {
  background-image: linear-gradient(180deg, rgba(5,13,40,.20) 0%, rgba(5,13,40,.55) 100%);
  background-size: auto;
}
/* logo ở footer: tên giải phải trắng trên nền tối (header nền trắng vẫn navy) */
.footer .lt-name b { color: #fff; }

/* ============================================================
   MOBILE DRAWER MENU — bản chuyên nghiệp
   (đè hoàn toàn drawer cũ; desktop không đổi)
   ============================================================ */
.nav-no, .nav-drawer-head, .nav-drawer-foot { display: none; }

@media (max-width: 900px) {
  .nav-scrim { background: rgba(3,8,26,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

  /* drawer luôn render để đóng/mở đều mượt */
  .nav {
    display: flex !important;
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(380px, 90vw);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 0;
    background:
      radial-gradient(320px 200px at 90% 0%, rgba(245,184,39,.10), transparent 70%),
      linear-gradient(160deg, #0d1e52 0%, #081231 55%, #0a1435 100%);
    border-left: 1px solid rgba(245,184,39,.25);
    box-shadow: -24px 0 60px rgba(0,0,0,.55);
    z-index: 60;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .38s cubic-bezier(.22,.9,.3,1), visibility 0s linear .38s;
    overflow-y: auto;
  }
  .nav.mobile-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.22,.9,.3,1);
    animation: none;
  }

  /* header drawer */
  .nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .ndh-brand { font-size: 13px; color: #fff; line-height: 1.35; }
  .ndh-brand b { display: block; font-size: 16px; font-weight: 900; color: #fff; letter-spacing: .01em; }
  .ndh-brand i { display: block; font-style: normal; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); margin-top: 3px; }
  .nav-close {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: transparent;
    color: #fff; font-size: 16px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: .2s;
  }
  .nav-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }

  /* nav items: số vàng + label lớn + mũi tên, stagger khi mở */
  .nav > .nav-item {
    display: flex; align-items: center; gap: 16px;
    padding: 17px 22px;
    font-size: 17px; font-weight: 700;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: relative;
    opacity: 0; transform: translateX(24px);
    transition: opacity .35s ease, transform .35s ease, color .2s, background .2s;
  }
  .nav.mobile-open > .nav-item { opacity: 1; transform: none; }
  .nav.mobile-open > .nav-item:nth-of-type(1) { transition-delay: .08s; }
  .nav.mobile-open > .nav-item:nth-of-type(2) { transition-delay: .13s; }
  .nav.mobile-open > .nav-item:nth-of-type(3) { transition-delay: .18s; }
  .nav.mobile-open > .nav-item:nth-of-type(4) { transition-delay: .23s; }
  .nav.mobile-open > .nav-item:nth-of-type(5) { transition-delay: .28s; }
  .nav.mobile-open > .nav-item:nth-of-type(6) { transition-delay: .33s; }
  .nav > .nav-item .nav-no {
    display: inline-block;
    font-size: 13px; font-weight: 800; letter-spacing: .08em;
    color: var(--gold-d); min-width: 20px;
  }
  .nav > .nav-item::after {
    content: '\f061';
    font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px;
    color: rgba(255,255,255,.25);
    margin-left: auto;
    transition: color .2s, transform .2s;
  }
  .nav > .nav-item:hover::after, .nav > .nav-item.active::after { color: var(--gold); transform: translateX(3px); }
  .nav > .nav-item.active {
    color: var(--gold-2);
    background: linear-gradient(90deg, rgba(245,184,39,.10), transparent 60%);
    box-shadow: inset 3px 0 0 var(--gold);
  }
  .nav > .nav-item:hover { color: var(--gold-2); background: rgba(255,255,255,.04); }

  /* footer drawer */
  .nav-drawer-foot {
    display: block;
    margin-top: auto;
    padding: 24px 22px 28px;
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .ndf-vote {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-d));
    color: var(--navy-900); font-weight: 800; font-size: 16px;
    border-radius: 999px; padding: 15px 20px;
    transition: transform .2s, box-shadow .2s;
  }
  .ndf-vote:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(245,184,39,.35); }
  .ndf-socials { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
  .ndf-socials:first-child { margin-top: 0; }
  .ndf-socials a {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; transition: .2s;
  }
  .ndf-socials a:hover { border-color: var(--gold); color: var(--gold); }

  /* hamburger → X */
  .ic-btn.is-open i::before { content: '\f00d'; }
}

/* ============================================================
   RESPONSIVE HARDENING — quét toàn site
   ============================================================ */
/* Vinh danh: 4 → 3 → 2 → 1 cột */
@media (max-width: 1100px) { .winner-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .winner-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 500px)  { .winner-grid { grid-template-columns: 1fr; } }

/* Đề cử: tab cuộn ngang trên màn hẹp, không vỡ hàng */
@media (max-width: 700px) {
  .cat-tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -18px; margin-right: -18px;
    padding: 0 18px 8px;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tab { flex: 0 0 auto; white-space: nowrap; }
  /* vẫn giữ 1 dòng ngang trên mobile, chỉ thu nhỏ chữ/đệm */
  .cph-stats { grid-template-columns: repeat(3, 1fr); }
  .cph-stat { padding: 14px 12px; }
  .cph-stat strong { font-size: 20px; }
  .cph-stat span { font-size: 12px; letter-spacing: .08em; }
  .award-group { padding: 20px 22px 12px; }
}

/* Timeline Giới thiệu: thu cột năm trên mobile */
@media (max-width: 640px) {
  .timeline::before { left: 58px; }
  .tl-row { grid-template-columns: 92px 1fr; gap: 18px; }
  .tl-year { font-size: 18px; }
  .tl-body { padding-left: 20px; }
}

/* Trang con: hero gọn hơn trên mobile */
@media (max-width: 640px) {
  .page-hero-inner { padding-top: 46px; padding-bottom: 46px; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 38px) !important; }
  .page-hero .lead { font-size: 15px; }
  .cat-panel-hero { gap: 22px; }
  .c2-form h3 { font-size: 17px; }
  .office-card { padding: 34px 24px 30px; }
  .foot-eyebrow { font-size: 16px; }
}

/* Bảng quy đổi vote: đảm bảo cuộn ngang an toàn trên màn rất hẹp */
@media (max-width: 480px) {
  .vote-table th, .vote-table td { padding: 10px 12px; font-size: 13px; }
  .rc-ic, .vs-ic { width: 48px; height: 48px; }
  .rc-num, .vs-num { width: 38px; height: 38px; }
}

/* ============================================================
   MOBILE SPACING TIGHTEN — banner + khoảng cách toàn site
   ============================================================ */
/* Khi hero về 1 cột (≤1100): ảnh chuyển tỉ lệ ngang 3/2, hết khoảng trống
   giữa ảnh và caption (trước đây giữ khung dọc 4/5 của desktop) */
@media (max-width: 1100px) {
  .hero-visual { aspect-ratio: 3/2; max-height: none; }
}

@media (max-width: 640px) {
  /* section thở gọn hơn nữa trên phone */
  :root { --sec-pad: 46px; --sec-pad-tight: 34px; }

  /* HERO gọn: meta 1 dòng (ẩn các cụm phụ), khoảng cách chữ hợp lý */
  .hero { padding: 24px 0 40px; }
  .hero-inner { gap: 28px; }
  .hero-meta { margin-bottom: 14px; gap: 12px; font-size: 12px; letter-spacing: .1em; }
  .hero-meta span:nth-child(n+3) { display: none; } /* giữ chấm + "NSX 2025 / LẦN THỨ XII" */
  .hero h1 { margin-bottom: 14px; }
  .hero-desc { margin-bottom: 22px; font-size: 16px; line-height: 1.65; }
  .hero-stats { margin-bottom: 24px; }
  .hero-cta { gap: 12px; }

  /* các đầu section: kéo sát nội dung */
  .ts-head { margin-bottom: 24px; }
  .cs-head { margin-bottom: 22px; }
  .sec-head { margin-bottom: 24px; }
  .team-head { margin-bottom: 8px; }
  .news-head { margin-bottom: 22px; }
  .proc-head { margin-bottom: 26px; }
  .cs-head-right p { margin-bottom: 14px; }
  .cat-panel-hero { margin-bottom: 26px; }
  .award-list-head { margin: 24px 0 12px; }
  .brands-heading { margin-bottom: 10px; }
  .brands-sub { margin-bottom: 22px; }
  .partner-marquee + .brands-group-label { margin-top: 24px; }
  .contact2-grid { gap: 34px; }
  .c2-sub { margin-bottom: 20px; }
  .c2-line { margin-bottom: 22px; }
  .c2-row { margin-bottom: 18px; }
  .office-grid { gap: 16px; }
  .vstep-grid { gap: 14px; }
  .rule-grid { gap: 14px; }
  .award-cols { gap: 14px; }
  .news-grid { gap: 16px; }
  .winner-grid { gap: 14px; }
}

/* ============================================================
   HÀNH TRÌNH 12 MÙA — timeline dọc "cây đứng" (feedback: NSX-Trang
   Giới thiệu - Lần 2, mục 2.0 — quay lại dạng cây đứng như bản cũ)
   ============================================================ */
.jr-vlist { position: relative; padding-left: 44px; }
.jr-vlist::before {
  content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
  width: 1px; background: rgba(255,255,255,.16);
}
.jr-vitem { position: relative; padding-bottom: 40px; }
.jr-vitem:last-child { padding-bottom: 0; }
.jr-vdot {
  position: absolute; left: -44px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--navy-900);
  border: 2px solid var(--gold);
  box-shadow: 0 0 10px rgba(245,184,39,.35);
}
.jr-era {
  display: block;
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin-bottom: 10px;
}
.jr-year {
  font-size: 32px; font-weight: 300;
  color: var(--gold-2); line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.jr-year span {
  font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
  margin-left: 8px;
}
.jr-vbody h4 {
  font-size: 17px; font-weight: 800; color: #fff;
  margin: 0 0 8px; line-height: 1.35; letter-spacing: -.01em;
}
.jr-vbody p {
  font-size: 14px; color: #fff;
  line-height: 1.7; margin: 0; max-width: 660px;
}
.jr-closing {
  font-size: 14px; color: #fff; line-height: 1.7;
  margin: 30px 0 0; max-width: 860px;
}
.jr-closing strong { color: var(--gold-2); }
@media (max-width: 640px) {
  .jr-vlist { padding-left: 32px; }
  .jr-vdot { left: -32px; }
  .jr-year { font-size: 27px; }
}

/* ============================================================
   UX ROUND — typography trắng/16px, timeline spacing,
   lightbox ảnh sự kiện, lỗi form inline
   ============================================================ */

/* (2)+(3) Body text: 16px & màu trắng dễ đọc */
body { font-size: 16px; }
.hero-desc, .lead,
.ts-head p, .cs-head-right p, .sec-head p, .proc-head p,
.cph-info p, .c2-sub, .jr-closing,
.article-body p, .wd-info > p, .brands-sub {
  font-size: 16px !important;
  color: #fff !important;
}
.ph-body p, .cs-body p, .jr-vbody p, .vstep p,
.rule-card li, .office-card p, .c2-row p,
.ag-list .aw-name, .foot-brand p, .cd-body p {
  font-size: 16px !important;
  color: #fff !important;
}
.ts-card .label, .cph-stat span, .hs-label { color: #fff !important; }
.ag-list .note, .nc-date, .tc-year { color: #fff !important; }

/* (4) Lightbox ảnh sự kiện */
.img-zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(3,8,26,.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox figure {
  margin: 0; max-width: min(1200px, 92vw); max-height: 92vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transform: scale(.96); transition: transform .28s ease;
}
.lightbox.open figure { transform: scale(1); }
.lightbox img {
  max-width: 100%; max-height: 82vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox figcaption { font-size: 14px; color: #fff; text-align: center; }
.lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: .2s;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); transform: rotate(90deg); }

/* (5) Lỗi form inline dưới từng field */
.c2-field .err-msg {
  display: none;
  font-size: 13px; font-weight: 600;
  color: #ff9c9c;
  margin: 7px 0 0 18px;
}
.c2-field.invalid .err-msg { display: block; }
.c2-field.invalid input,
.c2-field.invalid textarea,
.c2-field.invalid select {
  border-color: rgba(229,72,77,.85);
  background: rgba(229,72,77,.08);
}
.c2-field.invalid > i { color: #ff9c9c; }
/* icon field neo theo INPUT (top cố định) — không trôi khi có dòng lỗi bên dưới */
.c2-field > i { top: 25px; transform: translateY(-50%); }
.c2-field.full > i { top: 24px; transform: none; }
.c2-field .err-msg { color: #ff7b7b; }

/* ============================================================
   FIX ROUND — tiêu đề 1 dòng · gallery
   ============================================================ */
/* (2) GSAP điều khiển chữ: tắt transition CSS để 2 animation không chồng nhau (hết giật) */
.reveal-text.gsap-text .word { transition: none !important; }

/* (4) Ảnh "Ảnh từ sự kiện" — gợi ý click phóng to */
.wd-gallery img { cursor: zoom-in; border-radius: 8px; }
.wd-gallery img:hover { border-color: var(--gold); }

/* ============================================================
   QC FIX — hover zoom cho ảnh mở modal (con trỏ kính lúp phải có phản hồi)
   ============================================================ */
.img-zoomable { position: relative; overflow: hidden; }
.img-zoomable img,
.img-zoomable canvas {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
/* hover-img zoom removed (feedback L4-01) */
/* ảnh trực tiếp (gallery) — không có wrapper để zoom */
img.img-zoomable { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
/* hover-img zoom removed (feedback L4-01) */

/* huy hiệu kính lúp hiện khi hover — do JS chèn nên không đụng ::after sẵn có */
.zoom-badge {
  position: absolute; right: 14px; bottom: 14px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(5,13,40,.75);
  border: 1px solid rgba(245,184,39,.55);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  opacity: 0; transform: translateY(8px) scale(.92);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.img-zoomable:hover .zoom-badge { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .img-zoomable:hover img, .img-zoomable:hover canvas, img.img-zoomable:hover { transform: none; }
}
/* Hero: caption nằm DƯỚI CHÂN HÌNH (không đè lên ảnh) — theo feedback mục 2.0 */
.hero-visual { aspect-ratio: auto; }
.hv-photo { position: relative; inset: auto; aspect-ratio: 4/5; }
.hv-caption {
  position: static; margin-top: 12px;
  font-style: normal; font-size: 13px;
  letter-spacing: .04em; text-shadow: none;
  color: #fff;
}
.hv-photo::after { display: none; }   /* bỏ lớp phủ tối vốn để đọc caption trên ảnh */
@media (max-width: 1100px) { .hv-photo { aspect-ratio: 3/2; } }
/* link "Xem chi tiết hạng mục" trong panel đề cử */
.cph-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; color: var(--gold-2); }
.cph-more:hover { color: var(--gold); }
.cph-more i { font-size: 13px; }
/* trang chi tiết vinh danh: h1 tên winner dùng cùng style với h2 cũ */
.wd-info h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 14px; }

/* ---- Sóng chữ theo KÝ TỰ (GSAP) — mượt như mẫu tham khảo ---- */
.reveal-text .char {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* GSAP điều khiển ở cấp ký tự → từ phải hiện sẵn, không giữ trạng thái ẩn của bản CSS */
.reveal-text.gsap-text .word { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-text .char { opacity: 1 !important; transform: none !important; }
}

/* ---- CTA cuối trang: nút vừa nội dung + căn giữa (không kéo giãn full-width) ---- */
.foot-top > a {
  justify-self: center;          /* grid item mặc định stretch → ép về giữa */
  align-self: center;
  width: fit-content;
  max-width: 100%;
}
@media (max-width: 900px) {
  .foot-top { justify-items: center; gap: 26px; }
}
@media (max-width: 480px) {
  .foot-top > a { font-size: 14px; padding: 5px 5px 5px 18px; gap: 10px; }
  .foot-top > a .btn-ic { width: 34px; height: 34px; }
  .foot-top > a .btn-ic i { font-size: 12px; }
}

/* lớp vỏ bọc <img> để gắn icon kính lúp (gallery, ảnh bài viết) */
.zoom-wrap { display: block; position: relative; overflow: hidden; line-height: 0; }
.wd-gallery .zoom-wrap { border-radius: 8px; }
.wd-gallery .zoom-wrap img { display: block; }

/* ============================================================
   TRANG CHI TIẾT HẠNG MỤC — bố cục riêng (không lặp trang Đề cử)
   ============================================================ */
.cd-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(245,184,39,.4);
  background: rgba(245,184,39,.08);
  font-size: 13px; font-weight: 700; color: var(--gold-2);
}
.cd-chip i { font-size: 12px; }

.cd-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: start; }
.cd-copy p { font-size: 16px; line-height: 1.8; color: #fff; margin: 0 0 18px; }
.cd-copy .cd-sub {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-2); font-weight: 700; margin: 26px 0 10px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
}
.cd-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 20px; display: block; }
.cd-figcap { font-size: 13px; color: #fff; opacity: .8; margin: 12px 0 0; }
.cd-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.cd-quick > div {
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px; padding: 18px 20px;
}
.cd-quick strong { display: block; font-size: 30px; font-weight: 800; color: var(--gold-2); line-height: 1; margin-bottom: 8px; }
.cd-quick span { font-size: 13px; color: #fff; line-height: 1.45; display: block; }
.cd-note { font-size: 13px; color: #fff; opacity: .75; margin: 14px 0 0; line-height: 1.7; }

/* Tiêu chí — dạng editorial, không dùng card icon/số */
.crit-list { margin-top: 6px; }
.crit-item {
  display: grid; grid-template-columns: 280px 1fr; gap: 36px;
  padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12);
}
.crit-item:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.crit-item .lbl { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; display: block; margin-bottom: 8px; }
.crit-item h3 { font-size: 18px; font-weight: 800; color: #fff; margin: 0; line-height: 1.35; letter-spacing: -.01em; }
.crit-item ul { margin: 0; padding-left: 20px; }
.crit-item li { font-size: 16px; color: #fff; line-height: 1.75; margin-bottom: 10px; }
.crit-item li:last-child { margin-bottom: 0; }

/* Điều hướng sang hạng mục khác */
.cat-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat-nav a {
  display: flex; align-items: center; gap: 16px;
  padding: 22px 24px; border-radius: 20px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10);
  transition: transform .25s, border-color .25s, background .25s;
}
.cat-nav a:hover { transform: translateY(-3px); border-color: rgba(245,184,39,.55); background: rgba(255,255,255,.075); }
.cat-nav i { color: var(--gold); font-size: 20px; flex-shrink: 0; }
.cat-nav strong { display: block; font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.cat-nav span { font-size: 13px; color: #fff; opacity: .72; }

@media (max-width: 1024px) {
  .cd-intro { grid-template-columns: 1fr; gap: 32px; }
  .crit-item { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .cat-nav { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cd-quick { grid-template-columns: 1fr; }
}
/* card tin tức / vinh danh là thẻ <a> → giữ đúng dạng khối như trước */
a.news-card, a.team-card { display: block; color: inherit; text-decoration: none; }
a.team-card { text-align: center; }

/* ============================================================
   LOGO MỚI (lockup chữ) — thay logo icon + text cũ
   ============================================================ */
.header .logo { display: flex; align-items: center; }
.header .logo img { width: auto; height: 58px; display: block; }
.footer .logo { display: inline-flex; margin-bottom: 18px; }
.footer .logo img { width: auto; height: 76px; display: block; }
@media (max-width: 900px) { .header .logo img { height: 50px; } }
@media (max-width: 420px) { .header .logo img { height: 44px; } }

/* ---- "Dấu ấn NSX 2025": banner thiết kế (desktop) ⇄ thẻ số (mobile) ---- */
.dau-an-banner { margin: 0 0 8px; }
.dau-an-banner img {
  width: 100%; height: auto; display: block;
  border-radius: 22px;
}
/* desktop/tablet: dùng banner, ẩn lưới thẻ số (nội dung đã có trong ảnh) */
@media (min-width: 861px) {
  .tech-stats .ts-grid { display: none; }
}
/* mobile: chữ trong banner quá nhỏ → dùng thẻ số cho dễ đọc + có hiệu ứng đếm */
@media (max-width: 860px) {
  .dau-an-banner { display: none; }
}

/* ============================================================
   HERO — font & font-style theo brand spec NSX (NSX_Font)
   Open Sans ExtraBold · Regular · ExtraBold Italic
   ============================================================ */
.hero h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;                 /* EXTRA BOLD theo spec */
  text-transform: uppercase;        /* tiêu đề chữ hoa như thiết kế */
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.16;
  letter-spacing: -.005em;
}
.hero h1 em {                        /* EXTRA BOLD ITALIC */
  font-family: 'Open Sans', sans-serif;
  font-style: italic;
  font-weight: 800;
  color: var(--gold-2);
}
.hero-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;                 /* REGULAR theo spec (trước là Light 300) */
  font-size: 16px;
  line-height: 1.75;
}
.hero-meta {
  font-weight: 600;
  text-transform: uppercase;
}
/* Số liệu hero: vàng, đậm — mô phỏng Pepsi Owner (font gốc chưa có file) */
.hs-num {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -.01em;
}
.hs-label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}
@media (max-width: 640px) {
  .hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* ---- Hero hashtag — Open Sans ExtraBold Italic, xanh brand (theo NSX_Font) ---- */
:root { --brand-blue: #0043F4; --brand-blue-lite: #4C8DFF; }
.hero-tags {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-style: italic;              /* EXTRA BOLD ITALIC theo spec */
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--brand-blue-lite);   /* xanh brand, chỉnh sáng cho đọc rõ trên nền navy */
  margin: -14px 0 26px;
  max-width: 520px;
}
@media (max-width: 640px) {
  .hero-tags { font-size: 13px; margin: -8px 0 20px; }
}

/* ---- Logo mới (chữ vàng trên nền navy): bo góc nhẹ cho gọn trên header trắng ---- */
.header .logo img,
.footer .logo img { border-radius: 10px; }
.footer .logo img { height: 88px; }

/* ---- Trang Giới thiệu: banner 4 chỉ số (desktop) ⇄ thẻ số (mobile) ---- */
.gt-banner { margin: 0 0 8px; }
.gt-banner img { width: 100%; height: auto; display: block; border-radius: 22px; }
@media (min-width: 861px) {
  #about .ts-grid { display: none; }      /* nội dung đã có trong banner */
}
@media (max-width: 860px) {
  .gt-banner { display: none; }           /* mobile: chữ trong ảnh quá nhỏ → dùng thẻ số */
}

/* ---- Logo lockup: ảnh emblem + cụm chữ bên phải ---- */
.header .logo img { height: 52px; }
.footer .logo { align-items: center; gap: 14px; }
.footer .logo img { height: 62px; }
.footer .lt-name b { color: #fff; }
@media (max-width: 900px) { .header .logo img { height: 46px; } }
@media (max-width: 480px) {
  .header .logo { gap: 9px; }
  .header .logo img { height: 40px; }
}

/* ============================================================
   NỀN VỆT XANH UỐN LƯỢN + VỆT SÁNG NGĂN CÁCH GIỮA CÁC SECTION
   (đang bật cho trang chủ qua body.bg-waves — footer giữ nguyên)
   ============================================================ */
body.bg-waves main > section {
  position: relative;
  isolation: isolate;               /* stacking context riêng: lớp trang trí dùng
                                       z-index âm vẫn nổi trên nền section, và
                                       KHÔNG phải đụng vào position của nội dung */
  overflow: hidden;                 /* chặn slider tràn ngang. An toàn vì cả lớp
                                       nền lẫn 2 vệt sáng đều nằm gọn bên trong */
  background-image: none;           /* gỡ nền circuit cũ */
}

/* --- Lớp nền: ảnh vệt xanh phủ TRỌN section, trôi/phình rất chậm ---
   Không opacity, không mask, không màu đè lên — để ảnh hiện đúng như file
   thiết kế. .sec-bg tự cắt phần thừa của mình nên ảnh luôn kín khung. */
body.bg-waves .sec-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;                      /* dưới nội dung nhờ isolation ở section */
  pointer-events: none;
}
body.bg-waves .sec-bg::before {
  content: '';
  position: absolute;
  inset: -10% -6%;                  /* dư biên để animation không lộ mép */
  /* ảnh nguồn là ảnh DỌC — neo mép trên nơi có vệt lụa rõ nhất */
  /* ?v= gắn thẳng vào URL ảnh: đổi ảnh mà giữ nguyên tên file thì bump ?v=
     ở đây, nếu không trình duyệt khách cũ vẫn dùng ảnh cache cũ */
  background: url('../images/bg-wave-01.jpg?v=20260803j') center top / cover no-repeat;
  will-change: transform;
  animation: wave-drift-a 26s ease-in-out infinite alternate;
}
/* xen kẽ: section chẵn dùng nền 02 (mềm hơn), neo mép dưới + đảo nhịp */
body.bg-waves main > section:nth-of-type(even) .sec-bg::before {
  background: url('../images/bg-wave-02.jpg') center bottom / cover no-repeat;
  animation-name: wave-drift-b;
  animation-duration: 32s;
}
@keyframes wave-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-1.6%, -2%, 0) scale(1.11); }
}
@keyframes wave-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(1.6%, 1.8%, 0) scale(1.04); }
}

/* ============================================================
   HIGHLIGHT SECTION — 2 vệt sáng viền trên & dưới mỗi section
   ------------------------------------------------------------
   CÔNG TẮC CHO CMS: thêm/bỏ class "is-highlight" trên thẻ <section>.
     <section class="news is-highlight"> …  →  có 2 vệt sáng
     <section class="news">              …  →  không có vệt nào
   Hai thẻ <span class="sec-line sec-line-top|sec-line-bot"> luôn nằm
   sẵn trong markup; class trên section quyết định hiện hay ẩn, nên phía
   CMS chỉ cần bật/tắt đúng một class, không phải sinh thêm thẻ.

   Glow toả VÀO TRONG section (vệt trên toả xuống, vệt dưới toả lên) nên
   không thẻ nào thò ra ngoài — không còn cảnh bị overflow cắt đứt đôi.
   Hai section liền nhau cùng bật thì lõi sáng của chúng trùng đúng đường
   ranh, ghép lại thành một vệt đối xứng hoàn chỉnh.
   ============================================================ */
body.bg-waves .sec-line { display: none; }

/* Section được highlight phải cho vệt sáng TRÀN ra ngoài khung trên/dưới,
   đè sang section kế bên. Hai điều kiện:
   1. overflow-x: clip vẫn chặn slider tràn ngang, còn overflow-y: visible
      cho vệt thò lên/xuống (cặp giá trị này hợp lệ, khác với hidden/visible).
   2. z-index: 1 để phần vệt tràn xuống không bị section phía dưới —
      vốn vẽ sau và có nền đục — phủ mất. */
body.bg-waves main > section.is-highlight {
  overflow-x: clip;
  overflow-y: visible;
  z-index: 1;
  /* thoáng hơn section thường 16px mỗi đầu, để 2 vệt sáng không ép vào nội dung.
     Cộng trên biến --sec-pad nên vẫn tự co theo cấu hình mobile.
     Cần !important vì rule khoảng cách trung tâm cũng dùng !important. */
  padding-top: calc(var(--sec-pad) + 16px) !important;
  padding-bottom: calc(var(--sec-pad) + 16px) !important;
}
/* Section highlight: nền chỉ để MỘT màu xanh đậm phẳng, không dùng ảnh nền —
   để 2 vệt sáng là thứ duy nhất nổi lên, không bị vệt lụa làm nhiễu.
   Đây là chỗ DUY NHẤT còn khai màu nền; các section khác để ảnh phủ trọn. */
body.bg-waves main > section.is-highlight { background-color: #050d28; }
body.bg-waves main > section.is-highlight > .sec-bg { display: none; }

body.bg-waves main > section.is-highlight > .sec-line {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;                      /* đúng bề ngang section → không tràn ngang */
  height: clamp(84px, 11vw, 148px);
  z-index: -1;
  pointer-events: none;
  /* phóng riêng ẢNH lên 116% để cắt 2 đầu vệt bị nhạt, lõi sáng chạy
     hết bề ngang mà phần tử vẫn không thò ra khỏi khung */
  background-position: center;
  background-size: 116% 100%;
  background-repeat: no-repeat;
  opacity: .95;
}
body.bg-waves main > section.is-highlight > .sec-line-top {
  top: 0;
  transform: translateY(-50%);      /* nửa trên tràn đè lên section phía trên */
  /* lõi sáng nằm ở ĐÁY dải, glow loang ngược LÊN qua khỏi mép trên */
  background-image: url('../images/line-bottom.png');
}
body.bg-waves main > section.is-highlight > .sec-line-bot {
  bottom: 0;
  transform: translateY(50%);       /* nửa dưới tràn đè xuống section phía dưới */
  /* lõi sáng nằm ở ĐỈNH dải, glow loang ngược XUỐNG qua khỏi mép dưới */
  background-image: url('../images/line-top.png');
}

/* --- Mobile: giữ nền tĩnh cho nhẹ máy --- */
@media (max-width: 860px) {
  /* phải liệt kê cả selector :nth-of-type(even), vì rule đặt nền cho section
     chẵn có độ ưu tiên cao hơn — nếu chỉ ghi selector gốc thì section chẵn
     vẫn chạy animation trên mobile */
  body.bg-waves .sec-bg::before,
  body.bg-waves main > section:nth-of-type(even) .sec-bg::before {
    animation: none;
    transform: scale(1.04);
  }
  body.bg-waves main > section.is-highlight > .sec-line {
    height: clamp(62px, 18vw, 104px);
    background-size: 170% 100%;
    opacity: .9;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.bg-waves .sec-bg::before,
  body.bg-waves main > section:nth-of-type(even) .sec-bg::before { animation: none; }
}

/* ============================================================
   MÔ TẢ FULL CHIỀU NGANG — trang Giới thiệu (QA GT-01/GT-05):
   bỏ grid 2 cột ở phần đầu section, tiêu đề và mô tả xếp dọc,
   mô tả chạy hết khổ nội dung thay vì bó trong 1 cột.
   ============================================================ */
.cs-head.cs-head-full { display: block; }
.cs-head.cs-head-full .cs-head-left { margin-bottom: 14px; }
.cs-head.cs-head-full .cs-head-right p { max-width: none; }

/* ============================================================
   FEEDBACK LẦN 4 — ảnh giữ nguyên khi rê chuột.
   Card vẫn có thể đổi viền để phản hồi tương tác, nhưng nội dung ảnh không
   phóng to, dịch chuyển hoặc chạy hiệu ứng thay ảnh.
   ============================================================ */
.phase-slide:hover .ph-img img,
.cs-slide:hover .cs-img img,
.team-card:hover img,
.news-card:hover .nc-img img,
.cp-card:hover .cp-photo img,
.nom-card:hover .nom-img img,
.nominee-card:hover .nom-poster img,
.winner-card:hover .winner-photo img,
.partner-logo:hover img,
.img-zoomable:hover img,
.img-zoomable:hover canvas,
img.img-zoomable:hover {
  transform: none !important;
  animation: none !important;
}

/* Trang Đề cử: cho mô tả chạy hết chiều ngang.
   H1 và eyebrow KHÔNG khai riêng ở đây nữa — dùng chung giá trị toàn site
   (.page-hero h1 = clamp(26,3.2vw,38), .sec-eyebrow = 14px) để mọi trang
   đồng nhất; trước đây khai riêng nên trang này lệch 46px/13px. */
.page-de-cu .cat-panel-hero {
  grid-template-columns: 1fr;
  gap: 28px;
}
.page-de-cu .cph-info { max-width: none; }
.page-de-cu .cph-info p { max-width: none; }
/* .committee-summary-grid / .page-de-cu .rule-note: bo cung 2 section cuoi trang De cu (feedback Lan 5, muc 9.0) */

/* ============================================================
   FONT SỐ — Pepsi Owners (bộ nhận diện Ngôi Sao Xanh)
   Chuyển từ PepsiOwners-Regular.otf sang WOFF2 (15KB) + WOFF (18KB).

   unicode-range chỉ gồm CHỮ SỐ và dấu phân cách: font này chỉ có
   22/68 ký tự tiếng Việt, nên phần chữ ("Hơn", "Top", "tr"…) tự động
   rơi về Open Sans, chỉ riêng con số dùng Pepsi Owners.
   ============================================================ */
@font-face {
  font-family: 'Pepsi Owners';
  src: url('../fonts/PepsiOwners-Regular.woff2') format('woff2'),
       url('../fonts/PepsiOwners-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+002B, U+002C, U+002E, U+0025;
}

:root { --font-num: 'Pepsi Owners', 'Open Sans', sans-serif; }

/* Các con số có hiệu ứng đếm (đúng selector trong main.js) + số thống kê
   cùng kiểu ở trang chi tiết, để mọi số liệu trên site dùng chung một font. */
.hs-num,
.ts-card .num,
.cph-stat strong,
.cd-quick strong,
.fdo-cell strong,
/* số thứ tự trong danh sách giải (trang Đề cử + 4 trang chi tiết) */
.ag-list .no,
/* số thứ tự các bước / thẻ quy chế */
.vs-num,
.rc-num,
/* số liệu & năm hiển thị */
.aw-col .aw-count,
.jr-year,
.wd-work-list li .year {
  font-family: var(--font-num);
}

/* ============================================================
   UPDATE LẦN 5 — mục 1.0
   Trang chủ "Mùa giải đang diễn ra": bỏ mô tả dài, 4 thẻ = hình + mô tả
   ngắn, bấm vào từng giai đoạn để xem trang chi tiết riêng.
   ============================================================ */
.cs-head.cs-head-solo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.cs-head.cs-head-solo .cs-head-left { margin-bottom: 0; }
.phase-controls { flex: 0 0 auto; }

a.phase-slide { text-decoration: none; color: inherit; }
.ph-more {
  margin-top: auto; padding-top: 4px;
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.ph-more i { font-size: 12px; transition: transform .25s; }
a.phase-slide:hover .ph-more i { transform: translateX(4px); }

/* --- Trang chi tiết từng giai đoạn --- */
.gd-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 34px;
  align-items: start;
}
.gd-figure { margin: 0; }
.gd-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255,255,255,.10);
}
.gd-body { display: flex; flex-direction: column; gap: 14px; }
.gd-body h2 { font-size: var(--h2-size); margin: 2px 0 0; }
.gd-body p { font-size: 16px; line-height: 1.78; color: #fff; margin: 0; }
.gd-date {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-num);
  font-size: 14px; color: #fff;
  padding: 9px 14px;
  background: rgba(255,255,255,.04);
  border-left: 2px solid var(--gold);
}
.gd-date i { color: var(--gold); font-size: 12px; }
.gd-nav-head { margin-top: 56px; }

@media (max-width: 900px) {
  .gd-detail { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 720px) {
  .cs-head.cs-head-solo { align-items: center; }
  .cat-nav { grid-template-columns: 1fr; }
}

/* ============================================================
   UPDATE LẦN 5 — mục 2.0
   Banner "Dấu ấn Ngôi Sao Xanh": có phản hồi khi rê chuột nhưng KHÔNG
   phóng to / dịch chuyển nội dung ảnh — chỉ sáng viền + nhô nhẹ khung.
   ============================================================ */
.dau-an-banner img {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 rgba(245,184,39,0);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dau-an-banner:hover img {
  transform: translateY(-5px);
  border-color: rgba(245,184,39,.65);
  box-shadow: 0 16px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(245,184,39,.35);
}
@media (prefers-reduced-motion: reduce) {
  .dau-an-banner:hover img { transform: none; }
}

/* ============================================================
   UPDATE LẦN 5 — mục 7.0
   Link "Xem tất cả đề cử hạng mục …" chuyển xuống DƯỚI danh sách đề cử.
   ============================================================ */
.nom-more { margin-top: 26px; display: flex; justify-content: center; }
.nom-more .cph-more { font-size: 15px; }

/* ============================================================
   UPDATE LẦN 5 — mục 10.0
   Trang Liên hệ: bỏ tiêu đề "Phía Nam · Phía Bắc", đưa "Ban Thư Ký giải
   thưởng" lên làm tiêu đề vàng cỡ lớn (nhãn nhỏ .sec-eyebrow giữ nguyên
   định dạng chung toàn site — xem mục 4.0).
   ============================================================ */
/* .sec-head h2 dat color/font-size bang !important nen o day cung phai !important */
.sec-head h2.h2-gold,
h2.h2-gold {
  font-size: calc(var(--h2-size) + 4px) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  color: var(--gold) !important;
  margin: 0;
}

/* ============================================================
   Banner "Sứ mệnh tôn vinh giá trị nghệ thuật" (trang Giới thiệu):
   dùng CHUNG hiệu ứng rê chuột với banner "Dấu ấn" ở trang chủ —
   sáng viền + nhô nhẹ khung, nội dung ảnh giữ nguyên.
   ============================================================ */
.gt-banner img {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 rgba(245,184,39,0);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.gt-banner:hover img {
  transform: translateY(-5px);
  border-color: rgba(245,184,39,.65);
  box-shadow: 0 16px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(245,184,39,.35);
}
@media (prefers-reduced-motion: reduce) {
  .gt-banner:hover img { transform: none; }
}

/* Chữ "tr" (triệu) trong thẻ thông số: mặc định trình duyệt cho <sup> là 0.8333em
   nên ra số lẻ (16.6667px) ở khổ hẹp. Khai cỡ nguyên rõ ràng cho cả 2 mốc. */
.cph-stat strong sup { font-size: 20px; }
@media (max-width: 900px) {
  .cph-stat strong sup { font-size: 17px; }
}

/* ============================================================
   Header dính trên bản WordPress: header là widget Elementor, nằm trong mấy lớp div
   cao đúng bằng nó nên sticky của .header không có chỗ trượt. header.php bọc cả khối
   trong .nsx-site-header (con trực tiếp của <body>) và lớp này mới là lớp dính.
   z-index giữ bằng .header của bản tĩnh: menu trượt trên điện thoại (.nav, nằm trong
   khối này) vẫn phủ lên lớp mờ .nav-scrim (z-index 55).
   ============================================================ */
.nsx-site-header { position: sticky; top: 0; z-index: 60; }
/* Đang đăng nhập: thanh quản trị cố định ở đỉnh, header dính ngay dưới nó.
   Từ 600px trở xuống thanh quản trị cuộn theo trang nên header lại dính sát đỉnh. */
.admin-bar .nsx-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .nsx-site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .nsx-site-header { top: 0; } }