/* ==========================================================================
   THE LENS STORY 2026 - CINEMATIC PHOTOGRAPHY DESIGN SYSTEM
   Khoa Công Nghệ Thông Tin - Trường Đại Học Lạc Hồng × CANON Vietnam
   ========================================================================== */

:root {
  /* ==========================================================================
     PALETTE TRÍCH XUẤT TỪ THƯ MỜI THE LENS STORY 2026:
     - Imperial Royal Navy: #0F3B7A, #164E96 (Xanh Hoàng Gia Cuộc Thi)
     - Midnight Obsidian Navy: #070E1B, #0C182E (Nền Xanh Đêm Nghệ Thuật)
     - Heritage Imperial Gold: #E5A823, #FBE49D, #B88114 (Vàng Ánh Kim Lạc Hồng)
     - Arizona ASU Maroon: #7C182A, #8C1D40, #9E1B32 (Đỏ Trầm Rượu Vang Thư Mời)
     - Đồng Nai River Cyan: #00A3E0, #0284C7 (Xanh Sóng Nước Phản Chiếu)
     - Warm Ivory / Cream Silk: #FAF6EC, #FFFDF7 (Nền Giấy Mỹ Thuật Thư Mời)
     ========================================================================== */

  /* Dark Mode Palette: Midnight Royal Navy & Heritage Imperial Gold */
  --bg-main: #070E1B;
  --bg-secondary: #0C182E;
  --bg-card: rgba(12, 24, 46, 0.82);
  --bg-card-hover: rgba(18, 35, 68, 0.94);
  --bg-glass: rgba(9, 18, 36, 0.88);
  --bg-tag: rgba(229, 168, 35, 0.08);

  --text-main: #F4F7FC;
  --text-muted: #96A7C2;
  --text-dim: #647694;
  --text-glow: #FFFFFF;

  /* Arizona ASU Maroon & Royal Wine Red (Chuẩn màu chữ "Thư mời", "23 THÁNG 10" & ASU) */
  --canon-red: #8C1D40;
  --canon-red-glow: rgba(140, 29, 64, 0.45);
  --canon-red-light: #A82447;
  --canon-crimson: #9E1B32;

  /* LHU Royal Blue & River Cyan (Chuẩn màu chữ "KICK-OFF", "THE LENS STORY" & Sóng Nước) */
  --lhu-blue: #0F3B7A;
  --lhu-blue-bright: #1D58B0;
  --lhu-blue-dark: #08234A;
  --lhu-cyan: #00A3E0;
  --lhu-cyan-glow: rgba(0, 163, 224, 0.35);

  /* Primary Heritage Gold (#E5A823 - Chuẩn màu chim biểu tượng LHU & Viền dải lụa thiệp) */
  --lhu-gold: #E5A823;
  --lhu-gold-light: #FBE49D;
  --lhu-gold-dark: #B88114;
  --lhu-gold-glow: rgba(229, 168, 35, 0.35);
  --lhu-gold-bg: rgba(229, 168, 35, 0.12);
  --lhu-gold-border: rgba(229, 168, 35, 0.38);

  --border-subtle: rgba(229, 168, 35, 0.14);
  --border-card: rgba(229, 168, 35, 0.24);
  --border-focus: rgba(229, 168, 35, 0.65);

  --shadow-card: 0 20px 45px -15px rgba(2, 6, 18, 0.85);
  --shadow-glow-red: 0 0 25px rgba(140, 29, 64, 0.4);
  --shadow-glow-gold: 0 0 25px rgba(229, 168, 35, 0.35);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --font-main: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme='light'] {
  /* Light Mode Palette: Warm Ivory Parchment & Royal Navy (Chuẩn xác 100% nền thiệp giấy mỹ thuật) */
  --bg-main: #FAF6EC;
  --bg-secondary: #F4EDE1;
  --bg-card: #FFFFFF;
  --bg-card-hover: #FFFDF8;
  --bg-glass: rgba(250, 246, 236, 0.94);
  --bg-tag: rgba(15, 59, 122, 0.06);

  --text-main: #0B2553;
  --text-muted: #4B5F7E;
  --text-dim: #7084A3;
  --text-glow: #0B2553;

  --canon-red: #7C182A;
  --canon-red-glow: rgba(124, 24, 42, 0.22);
  --canon-red-light: #9E1B32;
  --canon-crimson: #8C1D40;

  --lhu-blue: #0F3B7A;
  --lhu-blue-bright: #144B99;
  --lhu-blue-dark: #071F42;
  --lhu-cyan: #0284C7;

  --lhu-gold: #C68A16;
  --lhu-gold-light: #E09F22;
  --lhu-gold-dark: #8C5D08;
  --lhu-gold-glow: rgba(198, 138, 22, 0.22);
  --lhu-gold-bg: rgba(198, 138, 22, 0.08);
  --lhu-gold-border: rgba(198, 138, 22, 0.32);

  --border-subtle: rgba(11, 37, 83, 0.08);
  --border-card: rgba(198, 138, 22, 0.22);
  --border-focus: rgba(198, 138, 22, 0.58);

  --shadow-card: 0 12px 32px -6px rgba(11, 37, 83, 0.08), 0 1px 3px rgba(11, 37, 83, 0.05);
  --shadow-glow-red: 0 8px 24px -4px rgba(124, 24, 42, 0.22);
  --shadow-glow-gold: 0 8px 24px -4px rgba(198, 138, 22, 0.2);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  overflow-x: clip;
  overflow-y: auto;
  font-family: var(--font-main);
  background-color: var(--bg-main);
  color: var(--text-main);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--font-main);
}

body {
  overflow-x: clip;
  min-height: 100vh;
  position: relative;
  background-color: transparent;
}

/* Nền gradient cố định bằng một lớp riêng.
   Trước đây dùng background-attachment: fixed trên body khiến trình duyệt
   phải repaint toàn bộ nền mỗi khung hình khi cuộn (nguyên nhân gây giật/đứng). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(229, 168, 35, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 85% 25%, rgba(140, 29, 64, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 15% 75%, rgba(15, 59, 122, 0.18) 0%, transparent 55%);
}

/* ==========================================================================
   SLIDE SCROLL ARCHITECTURE (CHUẨN TRUYENTHONG.S4H.EDU.VN)
   Hệ thống cuộn Slide từng phần, căn giữa chuẩn xác, hỗ trợ Wheel & Phím tắt
   ========================================================================== */

html {
  scroll-behavior: auto;
  scroll-padding-top: 76px;
  overflow-x: clip;
}

body.tls-front-page {
  /* Cho phép cuộn mượt khi ở trang chủ */
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.modal-open {
  overflow: hidden !important;
}

html, body, #root, .slides-app, .slides-track {
  max-width: 100vw;
}

.slides-app {
  width: 100%;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.slides-track {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Slide Section Styling: Từng phần chuẩn kích thước màn hình & căn giữa */
.slide-section,
section.snap-section,
section[id] {
  width: 100%;
  min-height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(88px, 8.5vw, 120px) 24px;
  scroll-margin-top: 80px;
  box-sizing: border-box;
}

/* Hero Section */
#home.slide-section,
#home {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 82px 24px 20px;
  justify-content: space-between;
  scroll-margin-top: 0px;
}

/* Footer Section */
footer.slide-section,
footer.snap-section,
#contact {
  min-height: auto;
  padding: 72px 20px 32px;
  scroll-margin-top: 76px;
}

@media (max-width: 1024px) {
  .footer-grid-balanced {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 640px) {
  .footer-grid-balanced {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Container bên trong: Tự động căn giữa nếu nội dung ngắn */
.slide-container,
.slide-section > .container,
section.snap-section > .container {
  width: 100%;
  max-width: 1320px;
  margin: auto auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   SIDE DOTS NAVIGATION (THANH CHẤM ĐIỀU HƯỚNG CỐ ĐỊNH BÊN PHẢI)
   ========================================================================== */
.side-dots-nav {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 990;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 6px;
  border-radius: 999px;
  background: rgba(7, 14, 28, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229, 168, 35, 0.28);
  box-shadow: 0 8px 32px rgba(2, 6, 16, 0.75), 0 0 15px rgba(229, 168, 35, 0.12);
}

.side-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(244, 247, 252, 0.35);
  border: 1px solid rgba(229, 168, 35, 0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  padding: 0;
  position: relative;
}

.side-dot-btn:hover {
  background: #FBE49D;
  border-color: #E5A823;
  transform: scale(1.3);
}

.side-dot-btn.active {
  height: 32px;
  background: linear-gradient(180deg, #E5A823 0%, #8C1D40 100%);
  border-color: #FBE49D;
  box-shadow: 0 0 16px rgba(229, 168, 35, 0.7);
}

.side-dot-btn .side-dot-tooltip {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: rgba(7, 14, 28, 0.96);
  border: 1px solid rgba(229, 168, 35, 0.45);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #FBE49D;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}

.side-dot-btn:hover .side-dot-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   FLOATING NEXT SLIDE BUTTON (NÚT CUỘN XUỐNG PHẦN KẾ TIẾP)
   ========================================================================== */
.floating-scroll-down-btn {
  position: fixed;
  bottom: 84px;
  right: 28px;
  z-index: 98;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(14, 18, 30, 0.9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(229, 184, 66, 0.45);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 20px rgba(229, 184, 66, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: bounceDownSmooth 2.5s infinite ease-in-out;
}

.floating-scroll-down-btn:hover {
  transform: translateY(3px) scale(1.05);
  background: rgba(22, 28, 50, 0.98);
  border-color: #E5B842;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 30px rgba(229, 184, 66, 0.5);
  color: #E5B842;
}

/* ==========================================================================
   BACK TO TOP BUTTON
   ========================================================================== */
.back-to-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 998;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(14, 18, 32, 0.88);
  border: 1px solid rgba(229, 184, 66, 0.45);
  color: #E5B842;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(229, 184, 66, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.back-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: linear-gradient(135deg, rgba(229, 168, 35, 0.25), rgba(140, 29, 64, 0.25));
  border-color: #E5A823;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), 0 0 24px rgba(229, 168, 35, 0.45);
}

/* ==========================================================================
   CYBER MOUSE SCROLL CUE (HERO SECTION)
   ========================================================================== */
.hero-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(10, 20, 38, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(229, 168, 35, 0.38);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: cyberCapsulePulse 3s infinite ease-in-out;
  margin-top: 14px;
}

.hero-scroll-cue:hover {
  transform: translateY(4px) scale(1.04);
  background: rgba(16, 32, 60, 0.96);
  border-color: #E5A823;
  box-shadow: 0 0 30px rgba(229, 168, 35, 0.5), 0 12px 45px rgba(0, 0, 0, 0.9);
}

.cyber-mouse-capsule {
  width: 20px;
  height: 32px;
  border-radius: 10px;
  border: 2px solid #E5A823;
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  box-shadow: 0 0 10px rgba(229, 168, 35, 0.35);
}

.cyber-mouse-dot {
  width: 4px;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(180deg, #E5A823, #8C1D40);
  animation: mouseWheelMove 1.8s infinite ease-in-out;
  box-shadow: 0 0 8px #E5A823;
}

.scroll-cue-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.scroll-cue-dot-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E5B842;
  box-shadow: 0 0 8px #E5B842;
  animation: bounceDownSmooth 1.2s infinite ease-in-out;
}

@keyframes mouseWheelMove {
  0% { opacity: 1; transform: translateY(0); }
  60% { opacity: 0.9; transform: translateY(10px); }
  to { opacity: 0; transform: translateY(16px); }
}

@keyframes bounceDownSmooth {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@keyframes cyberCapsulePulse {
  0%, 100% {
    box-shadow: 0 0 14px rgba(229, 184, 66, 0.25), 0 8px 24px rgba(0, 0, 0, 0.6);
    border-color: rgba(229, 184, 66, 0.35);
  }
  50% {
    box-shadow: 0 0 26px rgba(229, 184, 66, 0.55), 0 10px 32px rgba(0, 0, 0, 0.8);
    border-color: rgba(229, 184, 66, 0.75);
  }
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE (≤ 960px)
   ========================================================================== */
@media (max-width: 960px), (pointer: coarse) {
  html, body {
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .slide-section,
  section.snap-section,
  #home.slide-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    min-height: auto !important;
    padding: 72px 16px !important;
  }

  #home.slide-section,
  #home {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 82px 16px 24px !important;
  }

  .side-dots-nav {
    display: none !important;
  }

  .hero-middle-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .hero-bottom-metrics {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hero-countdown-val {
    font-size: 1.85rem !important;
  }
}

@media (max-width: 768px) {
  .floating-scroll-down-btn {
    display: none !important;
  }

  .back-to-top-btn {
    bottom: 16px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .hero-scroll-cue {
    padding: 6px 16px !important;
    margin-top: 10px !important;
  }

  .container, 
  .slide-container,
  .slide-section > .container,
  section.snap-section > .container {
    padding: 0 16px !important;
  }

  h2.font-display {
    font-size: clamp(1.45rem, 5.6vw, 1.95rem) !important;
    line-height: 1.28 !important;
  }

  .hero-title-h1 {
    font-size: clamp(1.95rem, 6.2vw, 2.7rem) !important;
    line-height: 1.18 !important;
  }

  .hero-subtitle {
    font-size: clamp(1.2rem, 3.8vw, 1.55rem) !important;
  }

  .hero-desc-p {
    font-size: 0.98rem !important;
    line-height: 1.62 !important;
    margin-bottom: 20px !important;
  }
}

@media (max-width: 640px) {
  .slide-section,
  section.snap-section {
    padding: 56px 12px !important;
  }

  .container, 
  .slide-container,
  .slide-section > .container,
  section.snap-section > .container {
    padding: 0 12px !important;
  }

  /* Quick action buttons trong Hero */
  .hero-action-btns {
    gap: 10px !important;
  }
  .hero-btn-submit,
  .hero-btn-link {
    width: 100% !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 0.98rem !important;
    text-align: center !important;
  }

  /* Khối Countdown Card & Logo cột phải */
  .hero-countdown-card,
  .hero-right-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
  }
  .hero-logos-row {
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .hero-logo-pill {
    height: 56px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
  .hero-logo-pill img {
    max-height: 38px !important;
  }
  .hero-logos-times {
    font-size: 1.35rem !important;
  }

  /* Kick-off Header trên màn hình nhỏ */
  .hero-kickoff-header {
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .hero-kickoff-date {
    font-size: 0.95rem !important;
  }

  /* Countdown Timer trên điện thoại */
  .hero-countdown-grid {
    gap: 8px !important;
  }
  .hero-countdown-box {
    padding: 12px 4px 10px !important;
    border-radius: 12px !important;
  }
  .hero-countdown-val {
    font-size: 1.55rem !important;
    margin-bottom: 2px !important;
  }
  .hero-countdown-lbl {
    font-size: 0.65rem !important;
    letter-spacing: 0.8px !important;
  }

  /* 3 Thẻ Key Metrics xếp cân đối, gọn đẹp */
  .hero-metrics-grid,
  .hero-left-metrics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .hero-metric-item {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .hero-metric-val {
    font-size: 1.3rem !important;
    margin-bottom: 2px !important;
  }

  /* Hội đồng Giám khảo 2 cột cân đối */
  .jury-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .jury-cards-grid > div:last-child {
    grid-column: span 2;
  }

  /* Modals trên màn hình nhỏ */
  .modal-card {
    padding: 22px 16px !important;
    border-radius: 16px !important;
    max-height: 94dvh !important;
  }
  .modal-category-selector {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .modal-receipt-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .modal-cohort-grid {
    grid-template-columns: 90px 1fr !important;
  }
}

@media (max-width: 380px) {
  .hero-title-h1 {
    font-size: 1.72rem !important;
    letter-spacing: -0.5px !important;
  }
  .hero-subtitle {
    font-size: 1.08rem !important;
  }
  .hero-countdown-grid {
    gap: 5px !important;
  }
  .hero-countdown-box {
    padding: 10px 2px !important;
  }
  .hero-countdown-val {
    font-size: 1.25rem !important;
  }
  .hero-countdown-lbl {
    font-size: 0.58rem !important;
    letter-spacing: 0.5px !important;
  }
  .hero-logo-pill {
    height: 48px !important;
    padding: 6px 8px !important;
  }
  .hero-logo-pill img {
    max-height: 30px !important;
  }
  .hero-metric-val {
    font-size: 1.15rem !important;
  }
}

/* Custom Scrollbar - Tinh tế và tự thích ứng cả Light Mode & Dark Mode */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: var(--border-card);
  border-radius: 9999px;
  border: 2px solid var(--bg-main);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--canon-red);
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Typography Helpers - Đồng bộ 1 kiểu font Be Vietnam Pro */
.font-display {
  font-family: var(--font-main);
  letter-spacing: -0.015em;
}
.font-mono {
  font-family: var(--font-main);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Camera Reticle corners - Gold & Maroon harmony from poster */
.camera-frame {
  position: relative;
}
.camera-frame::before,
.camera-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 10;
}
.camera-frame::before {
  top: 12px;
  left: 12px;
  border-top: 1.5px solid var(--lhu-gold);
  border-left: 1.5px solid var(--lhu-gold);
}
.camera-frame::after {
  bottom: 12px;
  right: 12px;
  border-bottom: 1.5px solid var(--canon-red);
  border-right: 1.5px solid var(--canon-red);
}

/* Submission Modal Enhancements */
.modal-sub-tab {
  transition: all 0.2s ease;
}
.modal-sub-tab:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}
#dropzone-submission:hover {
  border-color: var(--lhu-gold) !important;
  background: var(--bg-card-hover) !important;
}
.team-member-row input:focus,
#tls-submission-form input:focus,
#tls-submission-form textarea:focus,
#tls-register-form input:focus {
  border-color: var(--lhu-gold) !important;
  outline: none;
}

/* Glassmorphism */
.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel:hover {
  background: var(--bg-card-hover);
  border-color: rgba(229, 168, 35, 0.45);
  box-shadow: 0 16px 40px rgba(2, 6, 16, 0.55), 0 0 18px rgba(229, 168, 35, 0.15);
}

/* Gradient Texts */
.text-grad-gold {
  background: linear-gradient(135deg, #FFF3D0 0%, #E5A823 50%, #B88114 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-red {
  background: linear-gradient(135deg, #C42747 0%, #8C1D40 55%, #681126 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-silver {
  background: linear-gradient(135deg, #FFFFFF 0%, #D8E5F8 50%, #9EB8DF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-grad-royal {
  background: linear-gradient(135deg, #60A5FA 0%, #1D58B0 50%, #0F3B7A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #9E1B32 0%, #7C182A 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.94rem;
  padding: 11px 24px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(229, 168, 35, 0.45);
  cursor: pointer;
  box-shadow: 0 8px 24px -4px rgba(140, 29, 64, 0.5), 0 0 15px rgba(229, 168, 35, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(140, 29, 64, 0.65), 0 0 20px rgba(229, 168, 35, 0.35);
  background: linear-gradient(135deg, #B2223D 0%, #8C1D40 100%);
  border-color: #FBE49D;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(15, 59, 122, 0.22);
  color: #FBE49D;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(229, 168, 35, 0.35);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  background: rgba(15, 59, 122, 0.42);
  border-color: #E5A823;
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Badges */
.badge-canon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(140, 29, 64, 0.16);
  border: 1px solid rgba(140, 29, 64, 0.45);
  color: #E87A92;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(229, 168, 35, 0.14);
  border: 1px solid rgba(229, 168, 35, 0.45);
  color: #FBE49D;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.badge-royal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: rgba(15, 59, 122, 0.25);
  border: 1px solid rgba(0, 163, 224, 0.45);
  color: #38BDF8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Pulse Animation */
@keyframes pulseDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 1200px;
    transform: translateY(0);
  }
}

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulseDot 1.8s infinite ease-in-out;
}

/* Footer Link styling */
.footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-link:hover {
  color: var(--lhu-gold);
  transform: translateX(4px);
}

/* ==========================================================================
   LIGHT MODE DESIGN SYSTEM & ADAPTIVE STYLING LAYER
   Đảm bảo toàn bộ giao diện sáng (Light Mode) hài hòa, sang trọng, tương phản sắc nét
   ========================================================================== */

[data-theme='light'] body {
  background-color: var(--bg-main);
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(229, 168, 35, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 85% 25%, rgba(124, 24, 42, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 15% 75%, rgba(15, 59, 122, 0.08) 0%, transparent 55%);
}

/* Glass Panels & Thẻ Nội Dung trong Light Mode */
[data-theme='light'] .glass-panel {
  background: #ffffff !important;
  border: 1px solid rgba(198, 138, 22, 0.25) !important;
  box-shadow: 0 10px 30px -4px rgba(11, 37, 83, 0.07), 0 1px 3px rgba(11, 37, 83, 0.04) !important;
}

[data-theme='light'] .glass-panel:hover {
  background: #ffffff !important;
  border-color: var(--lhu-gold) !important;
  box-shadow: 0 16px 36px -6px rgba(11, 37, 83, 0.12), 0 0 18px rgba(198, 138, 22, 0.18) !important;
}

/* Tiêu đề & Chữ chính trong Light Mode */
[data-theme='light'] h1,
[data-theme='light'] h2,
[data-theme='light'] h3,
[data-theme='light'] h4,
[data-theme='light'] h5,
[data-theme='light'] h6 {
  color: var(--text-main);
}

/* Gradient chữ sang trọng trên nền sáng */
[data-theme='light'] .text-grad-silver {
  background: linear-gradient(135deg, #0B2553 0%, #103E7E 60%, #1D58B0 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme='light'] .text-grad-gold {
  background: linear-gradient(135deg, #7A4600 0%, #A16207 45%, #C68A16 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

[data-theme='light'] .text-grad-red {
  background: linear-gradient(135deg, #7C182A 0%, #9E1B32 50%, #C42747 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Nút phụ trong Light Mode */
[data-theme='light'] .btn-secondary {
  background: #ffffff !important;
  color: #0B2553 !important;
  border: 1px solid rgba(198, 138, 22, 0.45) !important;
  box-shadow: 0 2px 8px rgba(11, 37, 83, 0.05) !important;
}

[data-theme='light'] .btn-secondary:hover {
  background: #FFFDF8 !important;
  border-color: var(--lhu-gold) !important;
  color: var(--lhu-gold) !important;
  box-shadow: 0 4px 14px rgba(198, 138, 22, 0.22) !important;
}

/* Huy hiệu (Badges) */
[data-theme='light'] .badge-gold {
  background: rgba(198, 138, 22, 0.12) !important;
  border: 1px solid rgba(198, 138, 22, 0.4) !important;
  color: #8C5D08 !important;
}

[data-theme='light'] .badge-canon {
  background: rgba(124, 24, 42, 0.1) !important;
  border: 1px solid rgba(124, 24, 42, 0.35) !important;
  color: #7C182A !important;
}

[data-theme='light'] .badge-royal {
  background: rgba(15, 59, 122, 0.1) !important;
  border: 1px solid rgba(15, 59, 122, 0.35) !important;
  color: #0F3B7A !important;
}

/* Form Controls (Inputs, Selects, Textareas) trong Light Mode */
[data-theme='light'] input,
[data-theme='light'] textarea,
[data-theme='light'] select {
  background: #ffffff !important;
  color: #0B2553 !important;
  border: 1px solid rgba(11, 37, 83, 0.2) !important;
  box-shadow: 0 1px 3px rgba(11, 37, 83, 0.04) !important;
}

[data-theme='light'] input:focus,
[data-theme='light'] textarea:focus,
[data-theme='light'] select:focus {
  border-color: var(--lhu-gold) !important;
  box-shadow: 0 0 0 3px rgba(198, 138, 22, 0.18) !important;
  outline: none !important;
}

[data-theme='light'] input::placeholder,
[data-theme='light'] textarea::placeholder {
  color: #7084A3 !important;
}

[data-theme='light'] label {
  color: #0B2553;
}

/* Hộp thoại & Modal trong Light Mode */
[data-theme='light'] .modal-backdrop {
  background: rgba(7, 14, 28, 0.65) !important;
}

[data-theme='light'] .modal-card {
  background: #ffffff !important;
  color: #0B2553 !important;
  border: 1.5px solid rgba(198, 138, 22, 0.35) !important;
  box-shadow: 0 25px 60px -15px rgba(11, 37, 83, 0.25), 0 0 25px rgba(198, 138, 22, 0.12) !important;
}

/* Custom Scrollbar trong Light Mode */
[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: rgba(11, 37, 83, 0.2);
}
[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: var(--lhu-gold);
}

/* Footer Link trong Light Mode */
[data-theme='light'] .footer-link {
  color: #4B5F7E;
}
[data-theme='light'] .footer-link:hover {
  color: var(--lhu-gold);
}

/* ==========================================================================
   HERO COUNTDOWN HUD & NỔI BẬT TRONG LIGHT MODE
   ========================================================================== */
[data-theme='light'] .hero-countdown-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(198, 138, 22, 0.45) !important;
  box-shadow: 0 20px 48px rgba(11, 37, 83, 0.09), 0 0 20px rgba(198, 138, 22, 0.16) !important;
}

[data-theme='light'] .hero-logos-row {
  background: rgba(15, 59, 122, 0.04) !important;
  border: 1px solid rgba(198, 138, 22, 0.22) !important;
}

[data-theme='light'] .hero-countdown-box {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EC 100%) !important;
  border: 1.5px solid rgba(198, 138, 22, 0.45) !important;
  box-shadow: 0 8px 22px rgba(11, 37, 83, 0.07), inset 0 1px 0 #ffffff !important;
}

[data-theme='light'] .hero-countdown-val {
  color: #0F3B7A !important;
  text-shadow: none !important;
}

[data-theme='light'] .hero-countdown-lbl {
  color: #8C1D40 !important;
}

[data-theme='light'] .hero-kickoff-date,
[data-theme='light'] .hero-kickoff-date span {
  color: #0B2553 !important;
  text-shadow: none !important;
}

/* ==========================================================================
   NAVIGATION NỔI BẬT & CÁC NÚT ĐIỀU HƯỚNG TRONG LIGHT MODE
   ========================================================================== */
[data-theme='light'] .side-dots-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(198, 138, 22, 0.35) !important;
  box-shadow: 0 8px 28px rgba(11, 37, 83, 0.1), 0 0 14px rgba(198, 138, 22, 0.12) !important;
}

[data-theme='light'] .side-dot-btn {
  background: rgba(11, 37, 83, 0.2) !important;
  border-color: rgba(198, 138, 22, 0.45) !important;
}

[data-theme='light'] .side-dot-btn:hover {
  background: #C68A16 !important;
  border-color: #8C5D08 !important;
}

[data-theme='light'] .side-dot-btn.active {
  background: linear-gradient(180deg, #C68A16 0%, #8C1D40 100%) !important;
  border-color: #8C1D40 !important;
  box-shadow: 0 0 12px rgba(198, 138, 22, 0.5) !important;
}

[data-theme='light'] .side-dot-btn .side-dot-tooltip {
  background: #FFFFFF !important;
  color: #0B2553 !important;
  border: 1px solid rgba(198, 138, 22, 0.5) !important;
  box-shadow: 0 4px 14px rgba(11, 37, 83, 0.12) !important;
}

[data-theme='light'] .floating-scroll-down-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0B2553 !important;
  border: 1.5px solid rgba(198, 138, 22, 0.45) !important;
  box-shadow: 0 8px 24px rgba(11, 37, 83, 0.1), 0 0 16px rgba(198, 138, 22, 0.15) !important;
}

[data-theme='light'] .floating-scroll-down-btn:hover {
  background: #FFFDF8 !important;
  color: #8C1D40 !important;
  border-color: #8C1D40 !important;
}

[data-theme='light'] .back-to-top-btn {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1.5px solid rgba(198, 138, 22, 0.45) !important;
  color: #0F3B7A !important;
  box-shadow: 0 6px 20px rgba(11, 37, 83, 0.12) !important;
}

[data-theme='light'] .back-to-top-btn:hover {
  background: #FFFDF8 !important;
  color: #8C1D40 !important;
  border-color: #8C1D40 !important;
}

[data-theme='light'] .hero-scroll-cue {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1.5px solid rgba(198, 138, 22, 0.45) !important;
  box-shadow: 0 6px 22px rgba(11, 37, 83, 0.08), 0 0 16px rgba(198, 138, 22, 0.15) !important;
}

[data-theme='light'] .hero-scroll-cue:hover {
  background: #FFFFFF !important;
  border-color: #8C1D40 !important;
  box-shadow: 0 8px 28px rgba(11, 37, 83, 0.14) !important;
}

[data-theme='light'] .scroll-cue-text {
  color: #0F3B7A !important;
}

/* Hero Section trong Dark Mode */
[data-theme='dark'] #home .text-grad-silver {
  background: linear-gradient(135deg, #ffffff 0%, #F4F7FC 50%, #CBD8EC 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 14px rgba(2, 6, 16, 0.85));
}

/* Hero Countdown HUD & Card Styles trong Dark Mode */
.hero-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-submit-action-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #c42745 0%, #9e1d32 100%) !important;
  box-shadow: 0 8px 28px rgba(140, 29, 64, 0.55) !important;
}
.hero-metric-card {
  transition: all 0.2s ease;
}
.hero-metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme='dark'] .hero-left-card,
[data-theme='dark'] .hero-right-card {
  background: rgba(11, 22, 42, 0.94) !important;
  border-color: rgba(229, 168, 35, 0.35) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
}
[data-theme='dark'] .hero-title-h1 span:first-child {
  color: #ffffff !important;
}
[data-theme='dark'] .hero-title-h1 span:last-child {
  color: #E5B842 !important;
}
[data-theme='dark'] .hero-subtitle {
  color: #E5B842 !important;
}
[data-theme='dark'] .hero-desc-p {
  color: rgba(243, 244, 246, 0.8) !important;
}
[data-theme='dark'] .hero-desc-p strong {
  color: #E5B842 !important;
}
[data-theme='dark'] .hero-metric-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme='dark'] .hero-metric-card div:nth-child(2) {
  color: #ffffff !important;
}
[data-theme='dark'] .hero-metric-card div:first-child,
[data-theme='dark'] .hero-metric-card div:last-child {
  color: rgba(243, 244, 246, 0.65) !important;
}
[data-theme='dark'] #tls-countdown {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme='dark'] #tls-countdown > div {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-theme='dark'] .hero-countdown-val {
  color: #E5B842 !important;
}
[data-theme='dark'] .hero-countdown-lbl {
  color: rgba(243, 244, 246, 0.8) !important;
}
[data-theme='dark'] .hero-right-card > div:nth-child(3) {
  color: #E5B842 !important;
}
[data-theme='dark'] .hero-right-card > div:last-child span {
  color: rgba(243, 244, 246, 0.75) !important;
}
[data-theme='dark'] .hero-right-card > div:last-child strong {
  color: #ffffff !important;
}

/* ==========================================================================
   NAVIGATION BAR & ACTIONS (HEADER DESIGN 2026 - MEDIA MATCH)
   ========================================================================== */
.navbar-logo-pill {
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.navbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(0, 0, 0, 0.12);
}
[data-theme='dark'] .navbar-divider {
  background: rgba(255, 255, 255, 0.15);
}

.navbar-tag-2026 {
  background: linear-gradient(135deg, #E5B842 0%, #b88d22 100%);
  color: #07090e;
  font-size: 0.64rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.nav-pill-capsule {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme='dark'] .nav-pill-capsule {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.desktop-nav-menu .nav-item {
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  position: relative;
  white-space: nowrap;
}
[data-theme='dark'] .desktop-nav-menu .nav-item {
  color: rgba(243, 244, 246, 0.78);
}
.desktop-nav-menu .nav-item:hover:not(.active) {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}
[data-theme='dark'] .desktop-nav-menu .nav-item:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.desktop-nav-menu .nav-item.active {
  font-weight: 800;
  color: #b45309;
  background: rgba(229, 184, 66, 0.22);
  border: 1px solid rgba(229, 184, 66, 0.45);
}
[data-theme='dark'] .desktop-nav-menu .nav-item.active {
  color: #E5B842;
  background: rgba(229, 184, 66, 0.16);
  border: 1px solid rgba(229, 184, 66, 0.35);
}

/* Button 1: Tra Cứu (Gold outline pill) */
.nav-lookup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(217, 148, 18, 0.55);
  color: #b45309;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}
[data-theme='dark'] .nav-lookup-btn {
  background: rgba(229, 168, 35, 0.12);
  border-color: rgba(229, 168, 35, 0.6);
  color: #E5B842;
}
.nav-lookup-btn:hover {
  transform: translateY(-1px);
  background: rgba(229, 168, 35, 0.16);
  border-color: #d97706;
  box-shadow: 0 4px 12px rgba(217, 148, 18, 0.2);
}

/* Button 2: Đăng Nhập (Subtle border pill) */
.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: #1f2937;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
}
[data-theme='dark'] .nav-auth-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #f3f4f6;
}
.nav-auth-btn:hover {
  border-color: rgba(229, 184, 66, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
[data-theme='dark'] .nav-auth-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Button 3: Nộp Bài (Solid Crimson/Maroon pill) */
.nav-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 20px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #9E1B32 0%, #7C182A 100%);
  border: 1px solid rgba(229, 168, 35, 0.45);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(140, 29, 64, 0.45), 0 0 10px rgba(229, 168, 35, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.nav-submit-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #B2223D 0%, #8C1D40 100%);
  box-shadow: 0 6px 20px rgba(140, 29, 64, 0.6), 0 0 14px rgba(229, 168, 35, 0.35);
  border-color: #FBE49D;
}

/* Theme Toggle Button */
.nav-theme-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 1px solid rgba(198, 138, 22, 0.4);
  background: rgba(255, 255, 255, 0.85);
  color: #8C5D08;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
[data-theme='dark'] .nav-theme-toggle-btn {
  border-color: rgba(229, 168, 35, 0.35);
  background: rgba(12, 24, 46, 0.75);
  color: #FBE49D;
}
.nav-theme-toggle-btn:hover {
  transform: scale(1.08);
  border-color: var(--lhu-gold);
}

/* Tinh chỉnh thanh điều hướng trên các màn hình laptop trung bình (920px - 1200px) */
@media (max-width: 1200px) and (min-width: 920px) {
  .desktop-nav-menu .nav-item {
    padding: 5px 10px !important;
    font-size: 0.81rem !important;
  }
  .nav-lookup-btn, .nav-auth-btn {
    padding: 0 12px !important;
    font-size: 0.8rem !important;
  }
  .navbar-brand-sub {
    display: none !important;
  }
}




/* ==========================================================================
   WORDPRESS COMPATIBILITY & SYSTEM OVERRIDES
   ========================================================================== */

/* WordPress Admin Bar Compatibility */
body.admin-bar header {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar header {
    top: 46px !important;
  }
}

/* WordPress Standard Block & Content Classes */
.entry-content {
  line-height: 1.8;
  font-size: 1.05rem;
  color: var(--text-main);
}
.entry-content p {
  margin-bottom: 1.5rem;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 800;
  color: var(--text-main);
}
.entry-content a {
  color: var(--lhu-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.entry-content blockquote {
  border-left: 4px solid var(--lhu-gold);
  padding: 14px 20px;
  background: var(--bg-tag);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--text-muted);
}
.entry-content ul,
.entry-content ol {
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}
.entry-content li {
  margin-bottom: 0.5rem;
}

/* Standalone Page / Post Container */
.single-page-wrapper {
  padding-top: 110px;
  padding-bottom: 80px;
  min-height: 80vh;
}

/* ==========================================================================
   SINGLE POST / PAGE: ĐẢM BẢO CUỘN DỌC TỰ NHIÊN BẰNG CON LĂN CHUỘT
   Trang bài viết không dùng cơ chế slide như trang chủ, nên không được phép
   khóa chiều cao hoặc overflow của khung trang.
   ========================================================================== */
body.single,
body.page,
body.archive,
body.search,
body.error404,
body.blog {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  scroll-behavior: auto !important;
  overscroll-behavior-y: auto;
}

body.single .slides-app,
body.page .slides-app,
body.archive .slides-app,
body.search .slides-app,
body.error404 .slides-app,
body.blog .slides-app,
body.single .slides-track,
body.page .slides-track,
body.archive .slides-track,
body.search .slides-track,
body.error404 .slides-track,
body.blog .slides-track {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  min-height: 0 !important;
}

/* Nội dung bài viết không bị cắt khi cửa sổ thấp.
   Đồng thời tắt backdrop-filter trên tấm card khổng lồ: blur 16px trên một
   vùng cao hàng nghìn px là chi phí rất lớn khi cuộn, trong khi nền card
   gần như đặc nên hiệu ứng gần như không thấy. */
body.single .single-card,
body.page .single-card {
  overflow: visible !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none;
}

/* Tắt hiệu ứng hover trên tấm card bài viết: card chiếm gần hết màn hình,
   mỗi lần rê chuột sẽ repaint cả vùng lớn và gây giật khi cuộn. */
body.single .single-card:hover,
body.page .single-card:hover {
  background: var(--bg-card);
  border-color: var(--border-card);
  box-shadow: var(--shadow-card);
}

.single-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
}
@media (max-width: 768px) {
  .single-card {
    padding: 24px 18px;
  }

  /* Tránh rule .container { padding:0 16px !important } làm mất khoảng
     cách với header cố định trên trang bài viết / trang tĩnh. */
  .single-page-wrapper {
    padding-top: 92px !important;
    padding-bottom: 56px !important;
  }
}

/* Search & Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  color: var(--text-main);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}
.page-numbers.current,
.page-numbers:hover {
  background: var(--lhu-gold);
  color: #070e1b;
  border-color: var(--lhu-gold);
}

/* Notification Toast */
.tls-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--bg-card);
  color: var(--text-main);
  border: 1.5px solid var(--border-card);
  padding: 14px 24px;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.tls-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tls-toast.success {
  border-color: #10b981;
}
.tls-toast.error {
  border-color: #ef4444;
}

/* Modal Open Body Lock */
body.modal-open {
  overflow: hidden !important;
}

/* SVG Inline Helper */
.tls-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Pulse animation for active milestone */
@keyframes tls-pulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

/* ==========================================================================
   HỆ THỐNG RESPONSIVE TOÀN DIỆN (MOBILE, TABLET, LAPTOP)
   ========================================================================== */

/* 1. General Fluid Media */
img, picture, svg, video {
  max-width: 100%;
  height: auto;
}

/* 2. Timeline Phase Cards (Chuẩn giao diện danh sách thẻ bo góc 100% theo bản mẫu) */
.timeline-phases-stack {
  max-width: 960px;
  margin: 0 auto;
}

.timeline-step-card,
.timeline-accordion-card {
  background: #ffffff;
  border: 1px solid rgba(15, 59, 122, 0.1);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}
.timeline-step-card:hover,
.timeline-accordion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 59, 122, 0.08);
  border-color: rgba(15, 59, 122, 0.25);
}
.timeline-accordion-card.open {
  border-color: rgba(15, 59, 122, 0.35);
  box-shadow: 0 10px 30px rgba(15, 59, 122, 0.1);
}

.timeline-accordion-toggle {
  width: 100%;
  border: none;
  background: transparent;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
}

.timeline-step-left {
  display: flex;
  align-items: center;
  gap: 18px;
}
.timeline-step-icon-box {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.timeline-accordion-card:hover .timeline-step-icon-box,
.timeline-step-card:hover .timeline-step-icon-box {
  transform: scale(1.05);
}
.timeline-step-icon-c1 {
  background: rgba(15, 59, 122, 0.06);
  border: 1px solid rgba(15, 59, 122, 0.16);
  color: #0F3B7A;
}
.timeline-step-icon-c2 {
  background: rgba(140, 29, 64, 0.06);
  border: 1px solid rgba(140, 29, 64, 0.16);
  color: #8C1D40;
}
.timeline-step-icon-c3 {
  background: rgba(229, 168, 35, 0.09);
  border: 1px solid rgba(229, 168, 35, 0.28);
  color: #B88114;
}

.timeline-step-info {
  display: flex;
  flex-direction: column;
}
.timeline-step-tag {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: var(--font-mono);
  display: inline-block;
  margin-bottom: 4px;
  width: fit-content;
}
.timeline-step-tag-c1 {
  color: #0F3B7A;
  border: 1px solid rgba(15, 59, 122, 0.28);
  background: rgba(15, 59, 122, 0.03);
}
.timeline-step-tag-c2 {
  color: #8C1D40;
  border: 1px solid rgba(140, 29, 64, 0.28);
  background: rgba(140, 29, 64, 0.03);
}
.timeline-step-tag-c3 {
  color: #B88114;
  border: 1px solid rgba(229, 168, 35, 0.35);
  background: rgba(229, 168, 35, 0.04);
}

.timeline-step-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0B2553;
  margin: 0 0 4px;
  line-height: 1.3;
}
.timeline-step-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: #647694;
  font-weight: 600;
  font-family: var(--font-mono);
}
.timeline-step-chevron {
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
.timeline-accordion-card.open .timeline-step-chevron {
  transform: rotate(180deg);
}
.timeline-step-chevron-c1 { color: #0F3B7A; }
.timeline-step-chevron-c2 { color: #8C1D40; }
.timeline-step-chevron-c3 { color: #B88114; }

/* Accordion Pane */
.timeline-accordion-pane {
  display: none;
  padding: 0 24px 20px;
}
.timeline-accordion-card.open .timeline-accordion-pane {
  display: block;
}
.timeline-accordion-pane-inner {
  border-top: 1px solid rgba(15, 59, 122, 0.08);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.timeline-milestone-subcard {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 59, 122, 0.12);
  background: rgba(250, 246, 236, 0.6);
  transition: all 0.2s ease;
}
.timeline-milestone-subcard:hover {
  background: rgba(250, 246, 236, 0.95);
  border-color: rgba(15, 59, 122, 0.25);
}
.timeline-milestone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 8px;
}
.timeline-milestone-num-badge {
  font-size: 0.7rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: #0F3B7A;
  background: rgba(15, 59, 122, 0.08);
  border: 1px solid rgba(15, 59, 122, 0.2);
  padding: 2px 8px;
  border-radius: 6px;
}
.timeline-milestone-item-title {
  font-size: 0.95rem;
  color: #0B2553;
  font-weight: 800;
}
.timeline-milestone-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.78rem;
  color: #647694;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.timeline-milestone-desc {
  font-size: 0.82rem;
  color: #4B5F7E;
  line-height: 1.55;
  margin: 0;
}

.timeline-plan-pill-btn {
  background: #ffffff;
  border: 1px solid rgba(15, 59, 122, 0.16);
  border-radius: 9999px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #0F3B7A;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.timeline-plan-pill-btn:hover {
  background: #F4F7FC;
  border-color: rgba(15, 59, 122, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 59, 122, 0.1);
}

/* Dark Mode Adaptation */
[data-theme="dark"] .timeline-step-card,
[data-theme="dark"] .timeline-accordion-card {
  background: rgba(12, 24, 46, 0.85);
  border-color: rgba(229, 168, 35, 0.18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .timeline-accordion-pane-inner {
  border-top-color: rgba(229, 168, 35, 0.15);
}
[data-theme="dark"] .timeline-milestone-subcard {
  background: rgba(15, 30, 58, 0.6);
  border-color: rgba(229, 168, 35, 0.15);
}
[data-theme="dark"] .timeline-milestone-item-title {
  color: #F4F7FC;
}
[data-theme="dark"] .timeline-milestone-meta {
  color: #96A7C2;
}
[data-theme="dark"] .timeline-milestone-desc {
  color: #96A7C2;
}
[data-theme="dark"] .timeline-milestone-num-badge {
  color: #FBE49D;
  background: rgba(229, 168, 35, 0.12);
  border-color: rgba(229, 168, 35, 0.3);
}
[data-theme="dark"] .timeline-step-title {
  color: #F4F7FC;
}
[data-theme="dark"] .timeline-step-date {
  color: #96A7C2;
}
[data-theme="dark"] .timeline-plan-pill-btn {
  background: rgba(12, 24, 46, 0.85);
  border-color: rgba(229, 168, 35, 0.3);
  color: #FBE49D;
}

@media (max-width: 640px) {
  .timeline-step-card,
  .timeline-accordion-toggle {
    padding: 14px 16px;
  }
  .timeline-accordion-pane {
    padding: 0 16px 16px;
  }
  .timeline-step-left {
    gap: 12px;
  }
  .timeline-step-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
  }
  .timeline-step-title {
    font-size: 0.96rem;
  }
  .timeline-step-date {
    font-size: 0.78rem;
  }
  .timeline-milestone-subcard {
    padding: 12px 14px;
  }
  .timeline-milestone-item-title {
    font-size: 0.88rem;
  }
}

/* 3. Sliders Items Responsive Widths (Posts & Exhibits) */
.post-card-item,
.exhibit-slide-item {
  min-width: calc(33.333% - 11px);
  flex: 0 0 calc(33.333% - 11px);
}

@media (max-width: 992px) {
  .post-card-item,
  .exhibit-slide-item {
    min-width: calc(50% - 8px) !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}

@media (max-width: 640px) {
  .post-card-item,
  .exhibit-slide-item {
    min-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* 4. Jury Cards Styles & Hover Effects */
.jury-card-item:hover {
  transform: translateY(-5px);
}
.jury-card-item.is-canon:hover {
  border-color: rgba(140, 29, 64, 0.75) !important;
}
.jury-card-item:not(.is-canon):hover {
  border-color: rgba(229, 168, 35, 0.65) !important;
}
[data-theme='dark'] .jury-role-pill:not(.is-canon) {
  color: var(--text-muted) !important;
  background: var(--bg-tag) !important;
  border-color: var(--border-subtle) !important;
}
.jury-lock-icon {
  opacity: 0.7;
}

/* 4. Jury Cards Grid Responsive */
@media (max-width: 1100px) and (min-width: 769px) {
  .jury-cards-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 768px) and (min-width: 501px) {
  .jury-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .jury-cards-grid > div:last-child {
    grid-column: span 2 !important;
  }
}

@media (max-width: 500px) {
  .jury-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .jury-cards-grid > div:last-child {
    grid-column: span 1 !important;
  }
}

/* 5. Archive 2025 Quán Quân Grid */
.archive-winners-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.champion-card:hover {
  transform: translateY(-4px);
}

.runner-up-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

@media (max-width: 880px) {
  .archive-winners-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .archive-runners-col {
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .runner-up-card {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .runner-up-thumb {
    width: 100% !important;
    min-width: 100% !important;
    aspect-ratio: 16 / 10 !important;
  }
}

/* 6. Header Responsive */
@media (max-width: 960px) {
  .desktop-nav-menu {
    display: none !important;
  }
  #mobile-menu-toggle {
    display: flex !important;
  }
  .nav-lookup-btn,
  .nav-auth-btn {
    display: none !important;
  }
  .navbar-brand-sub {
    display: none !important;
  }
  .navbar-row {
    height: 64px !important;
  }
  #mobile-drawer {
    top: 64px !important;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 12px !important;
  }
  .navbar-row {
    height: 60px !important;
    gap: 8px !important;
  }
  #mobile-drawer {
    top: 60px !important;
  }
  .nav-submit-btn {
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    height: 36px !important;
  }
}

@media (max-width: 540px) {
  .navbar-brand-wrap {
    max-width: calc(100% - 150px);
  }
  .navbar-brand-link {
    gap: 6px !important;
  }
  .navbar-logo-pill {
    padding: 3px 6px !important;
  }
  .navbar-logo-pill img {
    height: 22px !important;
  }
  .navbar-title-text {
    font-size: 0.82rem !important;
  }
  .navbar-tag-2026 {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
  }
  .navbar-controls {
    gap: 6px !important;
  }
  .nav-submit-btn {
    padding: 0 10px !important;
    font-size: 0.78rem !important;
    height: 34px !important;
  }
  .nav-theme-toggle-btn {
    width: 34px !important;
    height: 34px !important;
  }
  #mobile-menu-toggle {
    width: 34px !important;
    height: 34px !important;
  }
}

/* 7. Footer Responsive */
@media (max-width: 1024px) {
  .footer-grid-balanced {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 640px) {
  .footer-grid-balanced {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .footer-bottom-row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* 8. Modal Dialogs Responsive */
@media (max-width: 640px) {
  .tls-modal-backdrop {
    padding: 8px !important;
  }
  .modal-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
    max-height: 94vh !important;
    width: 100% !important;
  }
  .plan-tabs-bar {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .plan-tab-btn {
    padding: 6px 12px !important;
    font-size: 0.76rem !important;
  }
  .modal-body {
    padding: 14px 10px !important;
  }
  .plan-milestone-card {
    padding: 12px 14px !important;
  }
}

@media (max-width: 480px) {
  .plan-milestone-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* 9. Sliders Drag & Smooth Scroll (Cho phép lăn chuột dọc tự nhiên và kéo rê ngang chuột) */
.posts-slider-container,
.exhibit-slider-wrapper {
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.posts-slider-container.grabbing,
.exhibit-slider-wrapper.grabbing {
  cursor: grabbing;
}
.post-card-item,
.exhibit-slide-item {
  touch-action: pan-y;
  overscroll-behavior-y: auto;
}