/* ===== FONTS OFFLINE (không cần internet) ===== */

/* Anton — tiêu đề lớn */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Anton-Regular.ttf') format('truetype');
}

/* Mulish — nội dung, dùng variable font (bao phủ weight 200-900) */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/Mulish-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('../fonts/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
}

/* ===== CSS VARIABLES ===== */
:root {
  --color-primary: #C41E3A;
  --color-primary-dark: #8B0000;
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
  --color-gold: #D4A843;
  --color-gold-glow: rgba(212, 168, 67, 0.6);

  /* Font offline — hoạt động không cần internet */
  --font-heading: 'Anton', 'Impact', sans-serif;
  --font-body:    'Mulish', 'Arial', sans-serif;

  --transition: all 0.3s ease;

  /* Mobile viewport fix: JS sẽ set = window.innerHeight * 0.01 */
  --app-vh: 1vh;

  /* Chiều cao header nav-bar — dùng để tính lại kích thước slide */
  --nav-h: 44px;

  /* Width thật của khung `.slide` (16:9) — dùng để scale font thay vì `vw` */
  --slide-w: min(100vw, calc((var(--app-vh) * 100) * 16 / 9));
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--color-black);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Letterbox (vùng ngoài khung 16:9): nền sáng nhẹ để tổng thể bớt nặng tối */
  background: linear-gradient(90deg, #fad6d6 0%, #ee7759 55%, #fad6d6 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* Shared absolute element layer (theo plan toàn dự án) */
.el { position: absolute; }

/* ===== FULL-SCREEN SLIDE — giữ tỷ lệ 16:9, căn giữa viewport ===== */
.slide {
  position: fixed;
  /* Fit 16:9 trong viewport, body bg đỏ tối hiện 2 cạnh nếu thiếu */
  width:  min(100vw, calc((var(--app-vh) * 100) * 16 / 9));
  height: min(calc(var(--app-vh) * 100), calc(100vw * 9 / 16));
  left: 50%;
  top:  50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent; /* body gradient đỏ hiện ra 2 cạnh */
  /* Depth shadow: giả lập ảnh trưng bày trong phòng bảo tàng */
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.35),
    inset 0 0 160px rgba(13, 2, 4, 0.20);
}
/* .slide__bg img đã xóa — dùng background-image trên div thay thế */

/* ===== NAV BAR (breadcrumb + back) — header riêng, không đè lên slide ===== */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(20, 4, 8, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 1rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

/* Slide tự nhường chỗ cho header khi trang có nav-bar */
body:has(.nav-bar) {
  --slide-w: min(100vw, calc((var(--app-vh) * 100 - var(--nav-h)) * 16 / 9));
}

body:has(.nav-bar) .slide {
  width:  min(100vw, calc((var(--app-vh) * 100 - var(--nav-h)) * 16 / 9));
  height: min(calc(var(--app-vh) * 100 - var(--nav-h)), calc(100vw * 9 / 16));
  top: calc(var(--nav-h) + (var(--app-vh) * 100 - var(--nav-h)) / 2);
}

.nav-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.nav-bar__back:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateX(-2px);
}

.nav-bar__back svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

.nav-bar__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-family: var(--font-body);
  overflow: hidden;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.nav-bar__breadcrumb a {
  color: rgba(255, 255, 255, 0.92);
  transition: var(--transition);
  padding: 2px 0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65);
}

.nav-bar__breadcrumb a:hover {
  color: var(--color-gold);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.4);
}

.nav-bar__breadcrumb .sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 10px rgba(0, 0, 0, 0.3);
}

.nav-bar__breadcrumb .current {
  color: var(--color-white);
  font-weight: 600;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(0, 0, 0, 0.4);
}

/* ===== HOTSPOT (clickable areas on slides) ===== */
.hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  border: 3px solid transparent;
  border-radius: 12px;
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.30s ease;
  /* Pulse hint: shadow nhẹ, KHÔNG dùng viền sáng */
  animation: hotspot-hint 3.5s ease-in-out infinite;
}

@keyframes hotspot-hint {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.30),
      0 2px 8px rgba(196, 30, 58, 0.12);
  }
}

/* Hover: nổi khối (lift + shadow đổ sâu) — KHÔNG bo viền sáng */
.hotspot:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.03);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 6px 20px rgba(196, 30, 58, 0.28),
    0 2px 6px rgba(0, 0, 0, 0.40);
  transform: translateY(-5px) scale(1.015);
  animation: none;
}

.hotspot:active {
  transform: translateY(-1px) scale(0.99);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.40),
    0 2px 8px rgba(196, 30, 58, 0.20);
}

/* Hotspot with label tooltip */
.hotspot[data-label]::after {
  content: attr(data-label);
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0,0,0,0.85);
  color: var(--color-white);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 20;
}

.hotspot[data-label]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Khu B (slide06): lớp hotspot — chỉ vùng .hotspot nhận click */
.khu-b-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.khu-b-hotspots .hotspot {
  pointer-events: auto;
}

/* ===== MODAL / POPUP ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(4px);
}

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

.modal {
  background: var(--color-white);
  border-radius: 12px;
  max-width: 1000px;
  width: 100%;
  max-height: calc(var(--app-vh) * 92);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.modal__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
}

.modal__close {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,0.15);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal__close:hover {
  background: rgba(255,255,255,0.3);
  transform: scale(1.1);
}

.modal__close:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

.modal__body {
  padding: 0;
}

.modal__body iframe {
  width: 100%;
  height: calc(var(--app-vh) * 82);
  border: none;
}

.modal__body video {
  width: 100%;
  display: block;
}

/* ===== KHU B — Modal PDF / Video / 3D: icon + khung nội dung không viền, đóng ngoài góc ===== */
.b-media-modal-overlay {
  z-index: 10000;
}

.b-media-modal-overlay .b-media-modal {
  position: relative;
  width: min(1320px, 98vw);
  max-height: calc(var(--app-vh) * 94);
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  display: block;
  padding: 0;
}

.b-media-modal__shell {
  position: relative;
  width: 100%;
  padding-top: 0.5rem;
}

.b-media-modal__sr-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nút đóng ngoài góc phải phía trên khung nội dung */
.b-media-modal__close {
  position: absolute;
  top: -0.25rem;
  right: -0.5rem;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

@media (min-width: 600px) {
  .b-media-modal__close {
    right: -52px;
    top: 0;
  }
}

.b-media-modal__close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
}

.b-media-modal__close:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

/* Thanh nút icon — dưới khung nội dung, chỉ khi có ≥2 nguồn */
.b-media-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.b-media-modal__toolbar[hidden],
.b-media-modal__toolbar.is-hidden {
  display: none !important;
}

.b-media-modal__tool {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  transition: var(--transition);
}

.b-media-modal__tool:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.b-media-modal__tool.is-active {
  background: rgba(212, 168, 67, 0.35);
  color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.45);
}

.b-media-modal__tool svg {
  width: 26px;
  height: 26px;
  display: block;
  fill: currentColor;
}

/* Khung nội dung: không viền, nền tối — cao rộng để đọc PDF / xem video */
.b-media-modal__viewport {
  position: relative;
  width: 100%;
  min-height: min(calc(var(--app-vh) * 86), 920px);
  background: #0a0a0a;
  border: none;
  border-radius: 4px;
  overflow: hidden;
}

.b-media-modal__panel {
  display: none;
  width: 100%;
  height: min(calc(var(--app-vh) * 86), 920px);
  min-height: min(calc(var(--app-vh) * 86), 920px);
}

.b-media-modal__panel.is-active {
  display: block;
}

.b-media-modal__panel .b-media-modal__iframe,
.b-media-modal__panel iframe.b-media-modal__iframe {
  width: 100%;
  height: 100%;
  min-height: min(calc(var(--app-vh) * 86), 920px);
  border: none;
  display: block;
  background: #111;
}

.b-media-modal__panel .b-media-modal__video,
.b-media-modal__panel video.b-media-modal__video {
  width: 100%;
  height: 100%;
  min-height: min(calc(var(--app-vh) * 86), 920px);
  display: block;
  background: #000;
}

/* Mobile: giảm padding & nén chiều cao iframe/video để nút đóng + chuyển tab không bị che */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 0.55rem;
  }
  .modal {
    max-height: calc(var(--app-vh) * 92);
  }
  .modal__body iframe {
    height: calc(var(--app-vh) * 74);
  }

  .b-media-modal__close {
    top: calc(0.30rem + env(safe-area-inset-top));
    right: calc(0.35rem + env(safe-area-inset-right));
    z-index: 20003;
  }

  .b-media-modal__toolbar {
    margin-top: 0.45rem;
    margin-bottom: 0.15rem;
    gap: 0.55rem;
  }

  /* Tạo khoảng trống để nút đóng không che lên phần nội dung */
  .b-media-modal__shell {
    padding-top: 2.8rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .b-media-modal__viewport {
    flex: 1 1 auto;
    min-height: min(calc(var(--app-vh) * 74), 920px);
  }

  .b-media-modal__panel,
  .b-media-modal__panel .b-media-modal__iframe,
  .b-media-modal__panel iframe.b-media-modal__iframe,
  .b-media-modal__panel .b-media-modal__video,
  .b-media-modal__panel video.b-media-modal__video {
    min-height: min(calc(var(--app-vh) * 74), 920px);
    height: auto;
  }

  /* Thu gọn khung thông tin để nút/tabs có nhiều không gian */
  .b-media-modal__toolbar {
    margin-top: 0.45rem;
    margin-bottom: 0.15rem;
    gap: 0.55rem;
  }
}

/* Mobile landscape: tránh nút đóng bị đẩy ra ngoài do rule min-width 600px */
@media (pointer: coarse) and (orientation: landscape) {
  .b-media-modal__close {
    top: calc(0.35rem + env(safe-area-inset-top));
    right: calc(0.35rem + env(safe-area-inset-right));
  }

  /* Canh chỉnh khung media theo yêu cầu (landscape): top/left = 100px/60px */
  .b-media-modal__shell {
    /* Tạo mốc 100% để tính `calc(100% - xxxpx)` */
    height: calc(var(--app-vh) * 94);
    padding-top: 0.5rem;
  }

  .b-media-modal__viewport {
    position: absolute;
    top: 40px;
    left: 60px;
    width: calc(100% - 120px);
    height: calc(100% - 80px);
    min-height: 0;
  }

  .b-media-modal__panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .b-media-modal__panel .b-media-modal__iframe,
  .b-media-modal__panel iframe.b-media-modal__iframe,
  .b-media-modal__panel .b-media-modal__video,
  .b-media-modal__panel video.b-media-modal__video {
    min-height: 0;
    height: 100%;
  }

  /* Đưa toolbar vào đúng vùng đáy (tránh chạy ra ngoài) */
  .b-media-modal__toolbar {
    position: absolute;
    left: 60px;
    right: 60px;
    bottom: -10px;
    margin: 0;
  }
}

/* ===== AUDIO CONTROL ===== */
.audio-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 500;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(139, 0, 0, 0.85);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: var(--transition);
}

.audio-btn:hover {
  background: var(--color-primary);
  transform: scale(1.1);
}

.audio-btn.muted {
  opacity: 0.45;
}

/* ===== PAGE TRANSITION ===== */
.slide {
  opacity: 0;
  animation: slideIn 0.4s ease forwards;
}

@keyframes slideIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== RESPONSIVE ===== */
/* ===== HOME PAGE: ABSOLUTE LAYOUT (tọa độ từ PPTX 2880×1620) ===== */

/* "Bảo tàng số" script PNG (2441×834, ratio 2.93)
   Hiển thị width=52% → height=52%/2.93*(9/16)^-1 ≈ 20% slide height
   Đặt top=1% → chiếm ~1-21% slide height, text thực ở phần dưới PNG */
.home__bts {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -7.315%;
  width: 59.2214%;
  pointer-events: none;
  z-index: 5;
  display: block;
}

.home__bts--placeholder {
  width: auto;
  top: 3%;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: clamp(2rem, calc((7.5 / 100) * var(--slide-w)), 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

/* Subtitle — dưới script, cách đủ để không overlap */
.home__subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16.56%;
  width: 50%;
  text-align: center;
  font-family: 'Anton', 'Impact', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-white);
  font-size: clamp(1.7rem, calc((4.15 / 100) * var(--slide-w)), 4.1rem);
  letter-spacing: 0.04em;
  z-index: 5;
  pointer-events: none;
  line-height: 0.95;
  white-space: nowrap;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.26);
}

/* Card chung */
.home__card {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  text-decoration: none;
  display: block;
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.30s ease;
}

.home__card img {
  width: 100%;
  height: auto;
  display: block;
}

.home__card:hover {
  transform: translateY(-10px) scale(1.025);
  filter: drop-shadow(0 18px 36px rgba(0,0,0,0.65));
}

.home__card:active {
  transform: translateY(-3px) scale(1.01);
}

/* Mobile (chạm thô): tránh hiệu ứng hover làm bitmap bị blur */
@media (pointer: coarse) {
  .slide--home .home__card:hover {
    transform: none;
    filter: none;
  }
  .slide--home .home__card:active {
    transform: none;
  }
}

/* Card trái — Group 9: left=266, top=510, w=687 / slide 2880×1620 */
.home__card--left  { left: 9.2%;  top: 31.5%; width: 23.9%; }

/* Card giữa — Group 5: left=1002, top=407, w=902 */
.home__card--center { left: 34.8%; top: 25.1%; width: 31.3%; }

/* Card phải — Group 7: left=1953, top=528, w=687 */
.home__card--right { left: 67.8%; top: 32.6%; width: 23.9%; }

/* ===== LANDING PAGES A/C: card layer như trang chủ ===== */
.landing-card {
  position: absolute;
  z-index: 10;
  display: block;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.30s ease;
}

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

.landing-card:hover {
  transform: translateY(-10px) scale(1.02);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.62));
}

.landing-card:active {
  transform: translateY(-3px) scale(1.01);
}

/* Khu B fallback (slide 06 hiện bị flatten thành 1 shape trong PPTX) */
.khu-b-zone {
  position: absolute;
  z-index: 10;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(1px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.28s ease,
              background 0.28s ease;
}

.khu-b-zone:hover {
  transform: translateY(-6px) scale(1.015);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.52),
    0 6px 20px rgba(196, 30, 58, 0.26);
}

/* =============================================
   SLIDE 13 — Khu C: Hoạt động Ngoại khóa
   Card wrapper bao cả photo + panel + text
   ============================================= */
.c13-card {
  overflow: hidden;
}

/* Photo — luôn chiếm phần phải của wrapper */
.c13-photo {
  position: absolute;
  right: 0;
  top: 0;
  width: 78.9%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c13-photo--r {
  right: unset;
  left: 3.38%;
  width: 97.6%;
}

/* White panel (ô trắng bên trái) */
.c13-panel {
  position: absolute;
  left: 0;
  top: 6.11%;
  width: 42.18%;
  height: 87.76%;
  background: #f0ebe3;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12);
}
.c13-panel--r {
  width: 52.17%;
}

/* Title — đặt tuyệt đối theo tọa độ PPTX, % so với wrapper */
.c13-title {
  position: absolute;
  font-family: var(--font-heading);
  font-size: clamp(0.8rem, 1.05vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: #1a1a1a;
  z-index: 2;
}

/* Title card 3: "80+" large + "CÂU LẠC BỘ" smaller */
.c13-title--clb {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.c13-num {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.1vw, 2.8rem);
  line-height: 1;
  color: #1a1a1a;
}
.c13-sub {
  font-family: var(--font-heading);
  font-size: clamp(0.75rem, 0.95vw, 1.2rem);
  color: #1a1a1a;
}

/* Description — tuyệt đối theo tọa độ PPTX */
.c13-desc {
  position: absolute;
  font-family: var(--font-body);
  font-size: clamp(0.42rem, 0.56vw, 0.72rem);
  line-height: 1.45;
  color: #2a2a2a;
  overflow: hidden;
  z-index: 2;
}

/* Label dọc bên trái (TextBox 27: HOẠT ĐỘNG NGOẠI KHÓA) */
.c13-bg-label {
  position: absolute;
  left: 4.75%;
  top: 29.5%;
  width: 9.12%;
  height: 43.56%;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-heading);
  font-size: clamp(0.65rem, 0.9vw, 1.1rem);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* Footer bar (Group 34) */
.c13-footer {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-size: clamp(0.44rem, 0.6vw, 0.78rem);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}
.c13-footer span { flex-shrink: 0; }
.c13-footer__sep {
  margin: 0 0.6em;
  opacity: 0.5;
}

/* Text layer lấy theo positions từ slide01 */
.home__txt {
  color: #ffffff;
  z-index: 9;
  pointer-events: none;
}

.home__txt--label-left,
.home__txt--year-left,
.home__txt--label-center,
.home__txt--label-right {
  font-family: var(--font-heading);
  text-transform: uppercase;
  line-height: 1.07; /* Tránh dính do line-height quá gắt khi render trên mobile */
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  white-space: nowrap; /* Tránh tự xuống dòng khi xoay ngang */
  overflow: visible; /* Cho phép hiển thị đủ chữ (không cắt mất) */
  text-overflow: clip; /* Không hiện "..." (giữ đúng chữ theo thiết kế) */
}

.home__txt--label-left {
  left: 9.2512%;
  top: 82.6754%;
  width: 17.9989%;
  font-size: clamp(0.9rem, calc((1.35 / 100) * var(--slide-w)), 1.55rem);
  letter-spacing: 0.03em;
}

.home__txt--year-left {
  left: 25.2771%;
  top: 82.6055%;
  width: 7.7102%;
  text-align: right;
  font-size: clamp(0.88rem, calc((1.25 / 100) * var(--slide-w)), 1.45rem);
  letter-spacing: 0.03em;
}

.home__txt--desc-left {
  left: 9.2512%;
  top: 87.7072%;
  width: 23.8773%;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.58rem, calc((0.9 / 100) * var(--slide-w)), 1rem);
  line-height: 1.32;
}

.home__txt--label-center {
  left: 34.8224%;
  top: 91.1555%;
  width: 31.3331%;
  text-align: center;
  font-size: clamp(1rem, calc((1.45 / 100) * var(--slide-w)), 1.75rem);
  letter-spacing: 0.03em;
}

.home__txt--label-right {
  left: 67.9784%;
  top: 82.3792%;
  width: 17.4598%;
  font-size: clamp(0.9rem, calc((1.35 / 100) * var(--slide-w)), 1.55rem);
  letter-spacing: 0.03em;
}

.home__txt--desc-right {
  left: 67.9784%;
  top: 87.3014%;
  width: 23.8773%;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.58rem, calc((0.9 / 100) * var(--slide-w)), 1rem);
  line-height: 1.3;
}

/* Label dưới card */
.home__card-label {
  font-family: var(--font-heading);
  color: var(--color-white);
  font-size: clamp(0.5rem, calc((1 / 100) * var(--slide-w)), 0.9rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-top: 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.home__card-label--center {
  justify-content: center;
}

/* Mô tả ngắn dưới label (chỉ card trái và phải) */
.home__card-desc {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.4rem, calc((0.72 / 100) * var(--slide-w)), 0.65rem);
  line-height: 1.5;
  margin-top: 1.5%;
}

/* ===== HOME PAGE: 3-CARD LAYOUT (dự phòng) ===== */
.home-layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5vh 5vw;
  gap: 2.5vh;
  z-index: 5;
}

.home-title {
  text-align: center;
  flex-shrink: 0;
}

.home-title__main {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, calc((8 / 100) * var(--slide-w)), 6.5rem);
  color: var(--color-white);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 16px rgba(0,0,0,0.45);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px;
}

.home-title__sub {
  font-family: var(--font-body);
  font-size: clamp(0.7rem, calc((1.5 / 100) * var(--slide-w)), 1.15rem);
  color: var(--color-gold);
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-top: 0.5em;
  text-transform: uppercase;
}

.slide__cards {
  display: flex;
  gap: clamp(0.8rem, 2vw, 2rem);
  width: 100%;
  max-width: 1280px;
  flex: 1;
  min-height: 0;
}

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.30s ease;
  text-decoration: none;
  color: inherit;
}

.card__img-wrap {
  flex: 1;
  min-height: 0;
}

.card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  transition: transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

.card:hover {
  transform: translateY(-10px) scale(1.025);
}

.card:hover .card__img-wrap img {
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.65));
}

.card:active {
  transform: translateY(-3px) scale(1.01);
}

.card__label {
  color: var(--color-white);
  font-family: var(--font-heading);
  text-align: left;
  padding: clamp(6px, 1vh, 12px) 0 2px;
  font-size: clamp(0.65rem, 1.15vw, 1rem);
  letter-spacing: 0.05em;
  line-height: 1.2;
  flex-shrink: 0;
}

.card--center .card__label {
  text-align: center;
}

.card__desc {
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 0.9vw, 0.78rem);
  line-height: 1.5;
  padding-top: 2px;
  flex-shrink: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  :root { --nav-h: 40px; }

  .nav-bar {
    height: var(--nav-h);
    padding: 0 0.75rem;
  }

  .nav-bar__back {
    font-size: 0.78rem;
    padding: 4px 10px;
  }

  .nav-bar__breadcrumb {
    font-size: 0.75rem;
  }

  .hotspot[data-label]::after {
    font-size: 0.65rem;
    padding: 3px 8px;
  }

  .slide__cards {
    flex-direction: column;
    overflow-y: auto;
  }

  .card {
    min-height: 200px;
    flex: none;
  }

  .home-title__main {
    font-size: clamp(1.8rem, calc((8 / 100) * var(--slide-w)), 3rem);
  }
}

/* ===== KHU B — slide06: nền + lớp ảnh (slide06_0 bánh xe, 1–6 thẻ B1–B6) ===== */
.slide06-layers {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.slide06-wheel {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.slide06-wheel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.35));
}

.slide06-card {
  position: absolute;
  box-sizing: border-box;
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.28s ease;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}

.slide06-card:hover {
  transform: translateY(-10px) scale(1.025);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.65));
  z-index: 10;
}

/* Mobile (chạm thô): tránh hiệu ứng hover làm bitmap bị blur */
@media (pointer: coarse) {
  .slide--home .home__card:hover { transform: none; filter: none; }
  .slide--home .home__card:active { transform: none; }
  .slide06-card:hover { transform: none; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); }
  .landing-card:hover { transform: none; filter: none; }
}

.slide06-card:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
  z-index: 10;
}

.slide06-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

/* ===== Mobile rotate prompt (portrait only) ===== */
.rotate-prompt-overlay {
  position: fixed;
  inset: 0;
  z-index: 150; /* Cao hơn nav-bar (100), thấp hơn modal overlay (>=9999) */
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  text-align: center;
  background: transparent;
  padding: calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  pointer-events: none; /* Không chặn thao tác bên dưới khi overlay xuất hiện */
  backdrop-filter: none;
}

.rotate-prompt-overlay.is-visible {
  display: flex;
}

@keyframes rotatePromptBlink {
  0% {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
  50% {
    opacity: 0.35;
    transform: translateZ(0) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
}

.rotate-prompt-overlay__inner {
  max-width: 420px;
}

.rotate-prompt-overlay__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  color: var(--color-white);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
  animation: rotatePromptBlink 1.1s ease-in-out infinite;
}

.rotate-prompt-overlay__title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.rotate-prompt-overlay__text {
  font-size: 1.02rem;
  line-height: 1.35;
  opacity: 0.95;
}

.rotate-prompt-overlay__hint {
  margin-top: 12px;
  font-size: 0.92rem;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .rotate-prompt-overlay__icon {
    animation: none;
  }
}