:root {
  --bg: #070c17;
  --bg-alt: #0b1120;
  --bg-card: #131c31;
  --border: #22304a;
  --text: #e6ebf5;
  --text-dim: #bcc6de;
  --accent: #d62828;
  --accent-soft: rgba(214, 40, 40, 0.16);
  --accent-dim: #7a1a1a;
  --gold: #e8b923;
  --gold-soft: rgba(232, 185, 35, 0.15);
  --on-accent: #fff6f0;
  --danger: #ff6b6b;
  --header-bg: rgba(7, 12, 23, 0.85);
  --hero-glow: #0f1a30;
  --radius: 10px;
  --max-width: 960px;
  --header-brand-h: 92px;
  --header-h: 56px;
}

/* Nen sang: trang anh vang, tinh than "co do sao vang" */
:root[data-theme="light"] {
  --bg: #fdf8ec;
  --bg-alt: #f7ecd2;
  --bg-card: #fffdf7;
  --border: #e6d6a8;
  --text: #241a10;
  --text-dim: #54462d;
  --accent: #d62828;
  --accent-soft: rgba(214, 40, 40, 0.10);
  --accent-dim: #b32626;
  --gold: #9c6f0b;
  --gold-soft: rgba(184, 134, 11, 0.14);
  --on-accent: #fff8f0;
  --danger: #c62828;
  --header-bg: rgba(253, 248, 236, 0.88);
  --hero-glow: #ffe9ae;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 112.5%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  transition: background-color 0.25s ease, color 0.25s ease;
}

body, .site-header, .hero, .banner, .corner-stat, .stat-tile, .badge-icon, .partner-badges,
.timeline-section, .activity-section, .activity-card, .site-footer,
.admin-links, .activity-modal-box, .activity-modal-close, .news-ticker {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a { color: inherit; }

/* ---------- Hieu ung tuong tac chung (hover chuot / cham tay) ---------- */
/* Bo sung dong loat cho cac khoi/nut chinh tren toan site cam giac "co the
   bam duoc": hover (chuot) nhun nhe len, cham/bam (:active, ca chuot lan
   cam ung) nhun nhe xuong. Chi THEM trang thai con thieu, khong ghi de cac
   hieu ung hover rieng da co (vd .activity-card:hover dich len 2px). */
@media (prefers-reduced-motion: no-preference) {
  .stat-tile,
  .corner-stat,
  .activity-card,
  .skill-card,
  .banner-dot,
  .theme-toggle,
  .admin-toggle,
  .hero-cta,
  .corner-fab,
  .event-summary,
  .nav a,
  .site-nav a {
    transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }

  .stat-tile:hover,
  .corner-stat:hover {
    transform: translateY(-2px);
  }

  .stat-tile:active,
  .corner-stat:active,
  .activity-card:active,
  .skill-card:active,
  .banner-dot:active,
  .theme-toggle:active,
  .admin-toggle:active,
  .hero-cta:active,
  .corner-fab:active,
  .event-summary:active,
  .site-nav a:active {
    transform: scale(0.96);
  }
}

/* ---------- Dai tin chay (thoi su chinh thong) ---------- */

.news-ticker {
  background: transparent;
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  overflow: hidden;
}

.news-ticker[hidden] { display: none; }

.news-ticker-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ticker-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
}

.ticker-weather {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ticker-weather[hidden] { display: none; }

.ticker-weather-icon { font-size: 0.95rem; line-height: 1; }

.news-ticker-label {
  flex-shrink: 0;
  padding: 3px 10px;
  background: var(--accent-soft);
  border: 1px solid transparent;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
}

.news-ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 12px), transparent);
}

.news-ticker-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  white-space: nowrap;
  animation: news-ticker-scroll 220s linear infinite;
}

.news-ticker:hover .news-ticker-track,
.news-ticker-track:focus-within {
  animation-play-state: paused;
}

.news-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
}

.news-ticker-item:hover,
.news-ticker-item:focus-visible {
  text-decoration: underline;
}

.news-ticker-source {
  flex-shrink: 0;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--text-dim);
  white-space: nowrap;
}

@keyframes news-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .news-ticker-track {
    animation: none;
  }
  .news-ticker-viewport {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .news-ticker-inner { gap: 8px; }
  .ticker-meta { gap: 8px; padding-right: 8px; }
  .ticker-datetime { display: none; }
  .news-ticker-item { font-size: 0.78rem; }
}

/* ---------- Widget goc: tin tuc lien quan + hom thu gop y ---------- */

.corner-widgets {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.corner-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent-dim);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.corner-fab:hover,
.corner-fab:focus-visible {
  background: var(--accent-dim);
  transform: translateY(-2px);
}

#feedback-fab { background: var(--gold); color: #1a1206; border-color: var(--gold); }
#feedback-fab:hover, #feedback-fab:focus-visible { background: #c99a12; }

.corner-panel {
  width: min(340px, calc(100vw - 36px));
  max-height: min(70vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.corner-panel[hidden] { display: none; }

.corner-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.corner-panel-close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
}

.corner-panel-body {
  padding: 12px 14px;
  overflow-y: auto;
}

.corner-stats-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.corner-stat {
  font-family: inherit;
  text-align: left;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  cursor: default;
}

.corner-stat .stat-icon {
  width: 16px;
  height: 16px;
  margin-bottom: 4px;
}

.corner-stat strong {
  display: block;
  font-size: 1.15rem;
  color: var(--gold);
  letter-spacing: 0.2px;
}

.corner-stat span {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.corner-stat-link {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.corner-stat-link:hover,
.corner-stat-link:focus-visible {
  border-color: var(--gold);
}

.news-panel-item {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.news-panel-item:last-child { border-bottom: 0; }

.news-panel-item:hover .news-panel-item-title,
.news-panel-item:focus-visible .news-panel-item-title {
  color: var(--accent);
  text-decoration: underline;
}

.news-panel-item-source {
  display: block;
  font-size: 0.68rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}

.news-panel-item-title {
  display: block;
  font-size: 0.85rem;
  line-height: 1.4;
}

.news-panel-item-date {
  display: block;
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 3px;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feedback-honeypot { position: absolute; left: -9999px; }

.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

.feedback-field input,
.feedback-field textarea {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  resize: vertical;
}

.feedback-field input:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-submit {
  align-self: flex-start;
  padding: 9px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.feedback-submit:hover { background: var(--accent-dim); }
.feedback-submit:disabled { opacity: 0.6; cursor: default; }

.feedback-note {
  font-size: 0.82rem;
  color: var(--gold);
  margin: 0;
}

.feedback-note[hidden] { display: none; }

@media (max-width: 640px) {
  .corner-widgets { right: 12px; bottom: 12px; }
}

/* ---------- Thu vien anh & video (mo tu the "Thu vien anh & video") ---------- */

.media-library-box {
  max-width: 760px;
}

.media-library-title {
  margin: 0 0 4px;
  padding-right: 32px;
  font-size: 1.1rem;
}

.media-library-hint {
  margin: 0 0 16px;
  font-size: 0.84rem;
  color: var(--text-dim);
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.media-library-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  background: var(--bg-alt);
}

.media-library-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-library-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px 20px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Hang 1: logo + ten thuong hieu, can giua, rieng 1 hang - kieu masthead
   bao dien tu (vd Cong an nhan dan). */
.header-brand-row {
  height: var(--header-brand-h);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand .logo {
  display: flex;
  flex-shrink: 0;
}

.brand .logo img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  /* Lam sang, ro net hon tren nen ca 2 theme - huy hieu goc hoi tram. */
  filter: brightness(1.18) saturate(1.12) contrast(1.04);
}

.brand-text {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  font-size: 1.05em;
}

.brand-line1,
.brand-line2 {
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
}

.brand-line2 {
  color: var(--gold);
}

/* Hang 2: thanh dieu huong mau accent, rieng 1 khung - kieu bao dien tu. */
.header-nav-row {
  background: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
}

.header-nav-inner {
  max-width: var(--max-width);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  text-decoration: none;
  color: var(--on-accent);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gold);
}

/* Ngan cach nhe giua cac muc menu chinh, khong ap dung cho theme-toggle/
   admin-menu (da co khung rieng). */
.site-nav > a {
  position: relative;
}

.site-nav > a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.3);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: var(--on-accent);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: flex; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: flex; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }

/* Truy cap nhanh tren mobile (Gioi thieu/Tuyen truyen/Bo ky nang) - chi hien
   duoi nguong 940px, xem quy tac o media query ben duoi. Tren desktop cac
   muc nay da co san dang chu trong .site-nav nen an di o day. */
.mobile-quick-nav {
  display: none;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.mobile-quick-nav::-webkit-scrollbar {
  display: none;
}

.mobile-quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: var(--on-accent);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.mobile-quick-link:hover,
.mobile-quick-link:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

/* Menu "Them" gop chung: 4 muc noi dung con lai (Doi moi sang tao, Khac,
   Nghien cuu khoa hoc, Kiem tra nhanh) + 2 muc quan tri, ngan cach bang
   .admin-links-sep. Gop vao 1 icon nho theo yeu cau nguoi dung, thay vi 2
   nut rieng nhu truoc. */
.admin-menu {
  position: relative;
}

.admin-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: var(--on-accent);
  cursor: pointer;
}

.admin-toggle:hover,
.admin-toggle[aria-expanded="true"] {
  color: var(--gold);
  border-color: var(--gold);
}

.admin-links {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.admin-links.open {
  display: flex;
}

.admin-links a {
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
}

.admin-links a:hover {
  background: var(--bg-alt);
  color: var(--accent);
}

.admin-links-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--on-accent);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 28px 20px 96px;
  text-align: center;
  background: radial-gradient(ellipse at top, var(--hero-glow) 0%, var(--bg) 65%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(214, 40, 40, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 40, 40, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at top, black 0%, transparent 70%);
  pointer-events: none;
}

/* Banner anh noi bat, chon tay tu kho anh trong /admin */
.banner {
  position: relative;
  max-width: var(--max-width);
  height: clamp(200px, 32vw, 380px);
  margin: 0 auto 36px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.banner[hidden] { display: none; }

.banner-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  cursor: pointer;
}

.banner-slide.active {
  opacity: 1;
  z-index: 1;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: #fff;
  text-align: left;
  font-size: 0.86rem;
}

.banner-caption strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.banner-dots {
  position: absolute;
  bottom: 12px;
  right: 16px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.banner-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.banner-dot.active {
  width: 20px;
  border-radius: 4px;
  background: var(--accent);
}

.hero-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

/* Carousel chay ngang qua lai giua huy hieu va cac anh Banner, dang khoi
   banner chu nhat 16:9, cao va sat ngay duoi dai tin "Thoi su". Be rong co
   dinh (khong con dong bo theo chu tieu de - qua nho so voi 1 khoi banner).
   Slide moi truot vao tu phai, slide cu truot ra trai (xem setupHeroCarousel
   trong main.js). */
.hero-icon {
  position: relative;
  display: block;
  width: min(720px, 94vw);
  aspect-ratio: 16 / 9;
  margin: 0 auto 24px;
  border-radius: 14px;
  overflow: hidden;
  filter: drop-shadow(0 0 28px var(--accent-soft));
}

.hero-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);
  transition: transform 0.9s ease;
}

.hero-icon img[data-logo="true"] {
  object-fit: contain;
  padding: 8%;
}

.hero-icon img.is-active { transform: translateX(0); }
.hero-icon img.is-prev { transform: translateX(-100%); }

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 3.2vw, 1.9rem);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

@media (max-width: 460px) {
  .hero h1 { white-space: normal; }
}

.hero p {
  color: var(--text-dim);
  margin: 0 auto 28px;
  max-width: 680px;
  white-space: pre-line;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 999px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-soft);
}

.stats-row {
  position: relative;
  max-width: var(--max-width);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.stat-tile {
  font-family: inherit;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 12px;
}

.stat-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-bottom: 6px;
  color: var(--gold);
}

.stat-tile strong {
  display: block;
  font-size: 1.6rem;
  color: var(--gold);
  letter-spacing: 0.3px;
}

.stat-tile span {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.stat-tile-link {
  width: 100%;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.stat-tile-link:hover,
.stat-tile-link:focus-visible {
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .stats-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .stats-row { margin-top: 32px; }
}

/* ---------- About ---------- */

.about {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.about h2 {
  margin: 0 0 16px;
  font-size: 1.5rem;
}

.about-top-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.about-intro-box {
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
}

.about-intro-box p {
  margin: 0;
  color: var(--text-dim);
  text-align: justify;
  text-justify: inter-word;
}

.partner-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.partner-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 18px;
  max-width: 100%;
  flex: 1;
}

.badge-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 4px;
}

.partner-badge span {
  color: var(--text-dim);
  font-size: 0.88rem;
  text-align: justify;
  text-justify: inter-word;
}

.about-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.point {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px;
  font-size: 0.92rem;
}

.point span:last-child {
  text-align: justify;
  text-justify: inter-word;
}

.point-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--accent);
}

.directive-basis {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}

.directive-basis h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.directive-basis ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.directive-basis li {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
}

.directive-basis strong {
  color: var(--text);
}

@media (max-width: 720px) {
  .about-top-grid { grid-template-columns: 1fr; }
}

/* ---------- Timeline section ---------- */

.timeline-section h2 {
  margin: 0 0 6px;
  font-size: 1.5rem;
}

.section-hint {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 20px;
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.category-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.category-pill:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

.category-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.activity-card.filtered-out {
  display: none;
}

.timeline {
  position: relative;
  padding-left: 28px;
  border-left: 2px solid var(--border);
}

.loading, .empty, .error {
  color: var(--text-dim);
  padding: 20px 0;
}

.error { color: var(--danger); }

.event-card {
  position: relative;
  margin-bottom: 20px;
}

.event-dot {
  position: absolute;
  left: -34px;
  top: 22px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.event-summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
}

.event-card.open .event-summary {
  border-color: var(--accent-dim);
}

.event-summary-text {
  flex: 1;
  min-width: 0;
}

.event-date {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.event-title {
  margin: 0 0 4px;
  font-size: 1.08rem;
}

.event-location {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.event-category {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  vertical-align: middle;
}

.toggle-icon {
  flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.25s ease;
}

.event-card.open .toggle-icon {
  transform: rotate(180deg);
  color: var(--accent);
}

.event-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.event-card.open .event-panel {
  max-height: 3000px;
  opacity: 1;
}

.event-panel-inner {
  padding: 16px 18px 4px;
}

.event-body { color: var(--text); font-size: 0.96rem; }
.event-body p { margin: 0 0 10px; }
.event-body ul { margin: 0 0 10px 20px; padding: 0; }
.event-body a { color: var(--accent); }

.event-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 4px 0 14px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}

.event-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.event-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 4px 0 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--gold);
}

.event-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.event-cover img:hover { transform: scale(1.02); }

.event-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}

.event-gallery img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: transform 0.15s ease;
}

.event-gallery img:hover { transform: scale(1.03); }

.event-link {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.92rem;
}

.event-link:hover { text-decoration: underline; }

.event-plan-number {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 0.86rem;
  font-style: italic;
}

/* ---------- Hoat dong khac (luoi the dang tap chi) ---------- */

.activity-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.activity-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.activity-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.activity-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: var(--bg-alt);
}

.activity-body {
  padding: 14px 16px 16px;
}

.activity-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.activity-title {
  margin: 6px 0 4px;
  font-size: 0.96rem;
  line-height: 1.35;
}

.activity-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ---------- Bo ky nang An toan so (luoi anh/infographic) ---------- */

.skills-section {
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.skills-subheading {
  margin: 0 0 14px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.skills-grid + .skills-subheading {
  margin-top: 32px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.skill-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.skill-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
}

.skill-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  background: var(--bg-alt);
  cursor: zoom-in;
}

.skill-body {
  padding: 12px 14px 14px;
}

.skill-title {
  margin: 0 0 4px;
  font-size: 0.94rem;
  line-height: 1.35;
}

.skill-summary {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.skill-open-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}

.activity-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 110;
}

.activity-modal.active { display: flex; }

.activity-modal-box {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 26px;
}

.activity-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  cursor: pointer;
}

.activity-modal-content .event-title {
  padding-right: 32px;
}

.activity-modal-content .event-location {
  margin-bottom: 14px;
}

@media (max-width: 640px) {
  .activity-modal { padding: 0; }
  .activity-modal-box { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
}

/* ---------- Quiz an toan so ---------- */

.quiz-section {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}

.quiz-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}

.quiz-question {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.quiz-question-text {
  margin: 0 0 12px;
  font-weight: 600;
  line-height: 1.5;
}

.quiz-question label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.45;
}

.quiz-question label:hover {
  background: var(--bg-alt);
}

.quiz-question input[type="radio"] {
  margin-top: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.quiz-question label.is-correct {
  background: rgba(34, 160, 90, 0.16);
  color: #1c8a4e;
  font-weight: 600;
}

:root[data-theme="light"] .quiz-question label.is-correct {
  color: #17703e;
}

.quiz-question label.is-wrong {
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: line-through;
}

.quiz-explain {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.quiz-submit {
  align-self: flex-start;
  padding: 12px 28px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.quiz-submit:hover {
  background: var(--accent-dim);
}

.quiz-result {
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  text-align: center;
}

.quiz-score {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

.quiz-feedback {
  margin: 0 0 16px;
  color: var(--text-dim);
}

.quiz-retry {
  padding: 10px 22px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.quiz-retry:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Dang ky ban tin (Netlify Forms, khong can backend) ---------- */

.newsletter-section {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  border-top: 1px solid var(--accent-dim);
}

.newsletter-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.newsletter-text h2 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--on-accent);
}

.newsletter-text .section-hint {
  margin: 0;
  max-width: 620px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.newsletter-form {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.newsletter-input {
  width: 220px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
  color: var(--on-accent);
  font-size: 0.86rem;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.2);
}

.newsletter-submit {
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1206;
  border: 1px solid var(--gold);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.newsletter-submit:hover {
  background: #c99a12;
}

.newsletter-note {
  width: 100%;
  margin: 0;
  padding-top: 4px;
  color: var(--on-accent);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 640px) {
  .newsletter-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .newsletter-text .section-hint { max-width: none; }
  .newsletter-form { flex-direction: column; }
  .newsletter-input { width: 100%; }
}

/* ---------- Footer (gon, trang trong, dung nhan dien Hoc vien/CAND) ---------- */

.site-footer {
  border-top: 2px solid var(--accent-dim);
  background: var(--bg-alt);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
}

.footer-line-1 {
  margin: 0 0 2px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text);
}

.footer-line-2 {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}

.footer-sep {
  margin: 0 6px;
  color: var(--border);
}

.footer-contact {
  margin: 6px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}

.footer-contact a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}

/* ---------- Lightbox ---------- */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 30px;
  /* Phai cao hon moi modal khac (activity-modal/media-library-modal = 110) vi
     lightbox thuong duoc mo TU BEN TRONG cac modal do (bam anh trong Thu vien
     anh) - neu thap hon, anh mo ra se bi modal dang mo de len tren, nhin nhu
     "chim xuong duoi". */
  z-index: 200;
  cursor: zoom-out;
}

.lightbox.active { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  z-index: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-nav:active {
  transform: translateY(-50%) scale(0.92);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 640px) {
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
}

.lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
}

/* ---------- Link modal (xem link tham khao ngay trong trang) ---------- */

.link-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 110;
}

.link-modal.active { display: flex; }

.link-modal-box {
  width: 100%;
  max-width: 960px;
  height: 88vh;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.link-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.link-modal-title {
  font-size: 0.82rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.link-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.link-modal-newtab {
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.link-modal-newtab:hover { text-decoration: underline; }

.link-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}

.link-modal-box iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 640px) {
  .link-modal { padding: 0; }
  .link-modal-box { max-width: none; height: 100vh; border-radius: 0; }
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .about-points { grid-template-columns: 1fr; }
}

/* Menu chinh gio co 9 muc (them 4 the phan loai + Bo ky nang) - o vung
   640-900px moi muc tu co lai/xuong dong rieng le trong flex nowrap, chu
   khong tran deu, nhin lech nhau. Gap som sang menu rut gon (hamburger) o
   nguong rong hon rieng cho phan nav, cac quy tac layout khac (padding,
   grid...) van giu nguong 640/720px cu. */
@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .mobile-quick-nav { display: flex; }

  .site-nav {
    position: fixed;
    top: calc(var(--header-brand-h) + var(--header-h));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .site-nav.open { max-height: 480px; overflow-y: auto; }

  .site-nav a {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
  }

  .site-nav > a:not(:first-child)::before {
    display: none;
  }

  .admin-toggle { display: none; }

  .admin-links {
    position: static;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .admin-links-sep {
    margin: 0;
  }
}

@media (max-width: 640px) {
  .section-inner { padding: 44px 18px; }
  .hero { padding: 20px 18px 56px; }
  .timeline { padding-left: 20px; }
  .event-dot { left: -26px; }
  .event-summary { align-items: flex-start; }

  .banner { margin: 0 auto 28px; border-radius: 8px; }

  /* Tiet kiem khong gian tren mobile - carousel banner da du noi bat, bo
     tieu de + doan mo ta lap lai y nghia, giu lai nut CTA. */
  #hero-title,
  #hero-subtitle {
    display: none;
  }

  .hero-icon { margin-bottom: 16px; }
}