/* ==========================================================================
   HOCLAIXESG MODERN DESIGN SYSTEM (PASSMEFAST & ZUTOBI 2026 EDITION)
   School: Truong Trung Cap Quoc Te Khoi Viet (hoclaixesg.com)
   Version: 4.0.0-pmf | Compiled automatically from 9 CSS modules
   Modules:
     1. variables.css (Design tokens, safe insets, semantic palette)
     2. header.css (Sticky app header, timer pill, progress bar)
     3. question-card.css (Question stage, fatal pulse, zoomable images)
     4. answer-card.css (Min 52px thumb target, circle keys 1-4, states)
     5. bottom-nav.css (3-button mobile thumb zone, matrix, desktop ticket)
     6. dashboard.css (Bento grid, setup screen, segmented tabs, leaderboard)
     7. mo-phong.css (120 tinh huong mo phong, video stage, spacebar button)
     8. sa-hinh.css (11 bai sa hinh & khan cap, interactive 2D canvas)
     9. duong-truong.css (Sat hach duong truong, lenh tang/giam so)
   ========================================================================== */


/* >>> MODULE: variables.css <<< */

/* ==========================================================================
   MODULE 1: DESIGN TOKENS & SYSTEM VARIABLES (WCAG 2.1 AA COMPLIANT)
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

:root {
  /* 1. BRAND COLORS (ĐỒNG BỘ TRANG CHỦ PASSMEFAST & ZUTOBI) */
  --pmf-navy: #0F172A;          /* Navy Space chủ đạo */
  --pmf-navy-dark: #060E3D;     /* Navy siêu đậm */
  --pmf-navy-light: #1E293B;    /* Navy sắc thái card */
  --pmf-orange: #F97316;        /* Cam Sport nhấn mạnh */
  --pmf-orange-hover: #EA580C;  /* Cam đậm khi hover */
  --pmf-pink: #FF1F8E;          /* Hồng điểm nhấn phụ */
  
  /* 2. SEMANTIC STATUS COLORS (ĐẠT CHUẨN ĐỘ TƯƠNG PHẢN WCAG 4.5:1) */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-success-border: #86EFAC;
  --color-success-text: #065F46;

  --color-error: #EF4444;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FCA5A5;
  --color-error-text: #991B1B;

  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-warning-border: #FCD34D;
  --color-warning-text: #92400E;

  /* 3. SURFACES & NEUTRALS */
  --color-bg: #F8FAFC;          /* Slate 50 nền êm mắt */
  --color-card: #FFFFFF;        /* Trắng tinh khiết */
  --color-border: #E2E8F0;      /* Slate 200 viền thanh thoát */
  --color-border-hover: #CBD5E1;
  --color-text-main: #0F172A;   /* Slate 900 tương phản cao */
  --color-text-body: #1E293B;   /* Slate 800 dễ đọc */
  --color-text-muted: #64748B;  /* Slate 500 chú thích phụ */

  /* 4. SEMANTIC ANSWER CARD TOKENS (THẺ ĐÁP ÁN) */
  --color-answer-default-bg: #FFFFFF;
  --color-answer-default-border: #E2E8F0;
  --color-answer-default-text: #1E293B;
  
  --color-answer-selected-bg: #FFF7ED;
  --color-answer-selected-border: #F97316;
  --color-answer-selected-text: #0F172A;

  --color-answer-correct-bg: #ECFDF5;
  --color-answer-correct-border: #10B981;
  --color-answer-correct-text: #065F46;

  --color-answer-wrong-bg: #FEF2F2;
  --color-answer-wrong-border: #EF4444;
  --color-answer-wrong-text: #991B1B;

  /* 5. TYPOGRAPHY & FONT SCALING */
  --pmf-font: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.75rem;   /* 28px */

  /* 6. TOUCH TARGETS & GEOMETRY (THUMB-FRIENDLY CHO MOBILE) */
  --touch-target-min: 52px;   /* Chiều cao tối thiểu phím bấm di động */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;          /* rounded-2xl chuẩn Zutobi */
  --radius-pill: 9999px;

  /* 7. ANIMATION & TRANSITION TIMING SYSTEM */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* 8. ELEVATION SHADOWS */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.35);

  /* 9. SAFE AREA INSETS (DÀNH CHO IPHONE CÓ TAI THỎ & DYNAMIC ISLAND) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* GLOBAL RESETS & SMOOTH SCROLLING */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--pmf-font) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text-body) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

:focus-visible {
  outline: 2px solid var(--pmf-orange) !important;
  outline-offset: 2px !important;
}

/* VIEWPORT SPACING CHO MOBILE APP & TRÁNH BỊ THANH ĐIỀU HƯỚNG CHE NỘI DUNG */
@media (max-width: 991.98px) {
  #examScreen,
  .exam-body,
  .exam-left {
    padding-bottom: calc(76px + var(--safe-bottom)) !important;
  }
  
  #practiceScreen .ol-prac-body,
  #pracBody {
    padding-bottom: calc(76px + var(--safe-bottom)) !important;
  }
  
  body:not(.exam-active):not(.practice-active) {
    padding-bottom: calc(68px + var(--safe-bottom)) !important;
  }
}

/* DESKTOP FULLSCREEN EXAM OVERRIDE (PASSMEFAST DARK NAVY THEME) */
@media (min-width: 992px) {
  body.exam-active #examScreen.is-on,
  body.exam-active #examScreen.exam-visible {
    background: #0F172A !important;
  }
  .exam-bottom-panel {
    background: #1E293B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
    border-radius: var(--radius-lg) !important;
  }
  .exam-bottom-panel .exam-panel-title,
  .exam-bottom-panel strong {
    color: #FFFFFF !important;
  }
  .exam-bottom-panel small,
  .exam-info-lbl {
    color: #94A3B8 !important;
  }
  .exam-info-val {
    color: #F8FAFC !important;
  }
}


/* >>> MODULE: header.css <<< */

/* ==========================================================================
   MODULE 2: STICKY APP HEADER, EXAM APP HEADERS & TIMER COMPONENT
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

/* 1. HEADER CHÍNH CỐ ĐỊNH (DESKTOP & GENERAL PAGES) */
.app-header,
header.shared-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  background: var(--pmf-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
  padding-top: var(--safe-top) !important;
}

.app-header .header-top {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
}

/* 2. LOGO THƯƠNG HIỆU HOCLAIXESG */
.app-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.app-logo-icon {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--radius-md) !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}

.app-logo-text {
  font-family: var(--pmf-font) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.2 !important;
}

.app-logo-text small {
  color: #94A3B8 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* 3. ĐIỀU HƯỚNG DESKTOP MENU */
.desktop-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.desktop-nav a {
  font-family: var(--pmf-font) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  color: #E2E8F0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
}

.desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

.desktop-nav a.active {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.35) !important;
}

/* 4. NÚT TÀI KHOẢN & CÀI ĐẶT HEADER */
.auth-btn-header,
.header-actions .header-btn {
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all var(--transition-fast) !important;
}

.auth-btn-header:hover,
.header-actions .header-btn:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
  transform: translateY(-1px) !important;
}

/* 5. APP-NATIVE HEADER CỦA MÀN HÌNH THI (thi.html) */
.exam-app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 54px !important;
  padding: 0 16px !important;
  background: var(--pmf-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
  padding-top: var(--safe-top) !important;
}

.exam-app-title {
  font-family: var(--pmf-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  flex: 1 !important;
}

/* TIMER PILL NATIVE TRONG HEADER */
.exam-app-timer,
.exam-timer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  font-variant-numeric: tabular-nums !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  transition: all var(--transition-fast) !important;
}

/* Timer warning states */
.exam-app-timer.warn,
.exam-timer.warn,
.exam-timer-card-val.warn {
  background: var(--color-warning) !important;
  color: #ffffff !important;
  border-color: var(--color-warning) !important;
}

.exam-app-timer.danger,
.exam-timer.danger,
.exam-timer-card-val.urgent {
  background: var(--color-error) !important;
  color: #ffffff !important;
  border-color: var(--color-error) !important;
  animation: timerPulse 1s infinite alternate ease-in-out !important;
}

@keyframes timerPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.85; }
}

/* Nút Nộp Bài trên mobile top bar */
.exam-app-submit {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4) !important;
  transition: all var(--transition-fast) !important;
}

.exam-app-submit:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-1px) !important;
}

/* 6. HEADER MÀN HÌNH ÔN LUYỆN (on-luyen.html) */
.ol-prac-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 54px !important;
  padding: 0 16px !important;
  background: var(--pmf-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
  padding-top: var(--safe-top) !important;
}

.ol-prac-close {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 12px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}

.ol-prac-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.ol-prac-title-bar {
  flex: 1 !important;
  text-align: center !important;
  color: #ffffff !important;
  font-family: var(--pmf-font) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.ol-prac-progress {
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  font-size: 0.9rem !important;
  color: #CBD5E1 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
}

/* 7. PROGRESS BAR (DESKTOP & MOBILE) */
.exam-progress-desktop {
  background: #E2E8F0 !important;
  border-radius: var(--radius-pill) !important;
  height: 8px !important;
  overflow: hidden !important;
  margin: 12px 0 !important;
  position: relative !important;
}

.exam-progress-desktop-fill {
  background: linear-gradient(90deg, var(--pmf-orange), #FB923C) !important;
  height: 100% !important;
  border-radius: var(--radius-pill) !important;
  transition: width var(--transition-base) !important;
}

.exam-progress-desktop-label {
  display: none !important;
}

@media (max-width: 768px) {
  .desktop-nav { display: none !important; }
  .app-header .header-top { padding: 8px 12px !important; }
  .app-logo-text { font-size: 1rem !important; }
}


/* >>> MODULE: question-card.css <<< */

/* ==========================================================================
   MODULE 3: QUESTION CARD, STAGE & CRITICAL QUESTION ALERT
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

/* 1. KHUNG CHÍNH CÂU HỎI (EXAM STAGE & PRACTICE CARD) */
.exam-q-stage,
.ol-q-card,
.exam-card,
.ol-card,
.ol-question-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px 20px !important;
  margin-bottom: 16px !important;
  transition: all var(--transition-base) !important;
  position: relative !important;
}

@media (max-width: 640px) {
  .exam-q-stage,
  .ol-q-card,
  .exam-card,
  .ol-card,
  .ol-question-card {
    padding: 16px 14px !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 12px !important;
  }
}

/* 2. HEADER CÂU HỎI & BADGES (SỐ CÂU, CHỦ ĐỀ, ĐIỂM LIỆT) */
.ol-q-chapter-tag {
  background: #F1F5F9 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
}

/* HUY HIỆU CÂU ĐIỂM LIỆT (CẢNH BÁO BẮT BUỘC ĐÚNG VỚI HIỆU ỨNG PULSE) */
.ol-q-critical-badge,
.exam-critical-badge,
.is-fatal-badge,
.ol-badge-fatal {
  background: var(--color-error) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.35) !important;
  animation: fatalPulse 2s infinite ease-in-out !important;
  margin-left: 6px !important;
}

@keyframes fatalPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    transform: scale(1.02);
  }
}

/* 3. NỘI DUNG CÂU HỎI (ĐỘ TƯƠNG PHẢN CAO WCAG 4.5:1, CHỮ RÕ RÀNG) */
.exam-q-text,
.ol-q-content,
.ol-q-title {
  font-family: var(--pmf-font) !important;
  font-size: clamp(1.05rem, 2.6vw, 1.22rem) !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  color: var(--color-text-main) !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

/* 4. KHUNG HÌNH ẢNH SA HÌNH / BIỂN BÁO CĂN GIỮA ĐẸP MẮT */
.exam-q-img,
.ol-q-img,
.question-image-box {
  text-align: center !important;
  margin: 14px auto !important;
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
}

.exam-q-img img,
.ol-q-img img,
.question-image-box img,
img.exam-img-fluid,
img.ol-q-image {
  max-width: 100% !important;
  max-height: 280px !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  object-fit: contain !important;
  background: #ffffff !important;
  transition: transform var(--transition-base), box-shadow var(--transition-base) !important;
  cursor: zoom-in !important;
}

.exam-q-img img:hover,
.ol-q-img img:hover,
img.exam-img-fluid:hover,
img.ol-q-image:hover {
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-md) !important;
}

/* 5. KHUNG GIẢI THÍCH, MẸO THẦY HOÀNG & FEEDBACK (CALLOUT CARDS) */
#examExplanation,
.ol-explanation,
.gx,
.ol-explain-container {
  margin: 18px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-radius: var(--radius-lg) !important;
}

#examExplanation {
  background: #FFFBEB !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  color: #92400E !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  box-shadow: var(--shadow-sm) !important;
}

.gx-block {
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  box-shadow: var(--shadow-sm) !important;
}

.gx-block.gx-hieu {
  background: var(--color-success-bg) !important;
  border: 1.5px solid var(--color-success-border) !important;
  color: var(--color-success-text) !important;
}

.gx-block.gx-meo {
  background: var(--color-warning-bg) !important;
  border: 1.5px solid var(--color-warning-border) !important;
  color: var(--color-warning-text) !important;
}

.gx-k {
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.gx-meo-rules li,
.gx-block p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin: 4px 0 !important;
}


/* >>> MODULE: answer-card.css <<< */

/* ==========================================================================
   MODULE 4: ANSWER CARDS & INTERACTIVE STATES (TOUCH TARGET >= 52PX)
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

/* 1. DANH SÁCH ĐÁP ÁN */
.exam-options,
.ol-options,
.question-options-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

/* 2. THẺ ĐÁP ÁN (TOUCH-FRIENDLY: CAO TỐI THIỂU 52PX THEO CHUẨN THUMB-ZONE) */
.exam-opt,
.ol-opt,
.option-item {
  min-height: var(--touch-target-min) !important;
  background: var(--color-answer-default-bg) !important;
  border: 2px solid var(--color-answer-default-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-fast) !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-sizing: border-box !important;
}

/* Hover state */
.exam-opt:hover,
.ol-opt:hover {
  border-color: var(--color-border-hover) !important;
  background: #F8FAFC !important;
  transform: translateY(-1px) !important;
}

/* Focus state cho điều hướng bàn phím phím 1-2-3-4 & phím mũi tên */
.exam-opt:focus-visible,
.ol-opt:focus-visible,
.exam-opt.focused {
  outline: 2px solid var(--pmf-orange) !important;
  outline-offset: 2px !important;
}

/* 3. TRẠNG THÁI ĐANG CHỌN (SELECTED - VIỀN CAM NỔI BẬT) */
.exam-opt.selected,
.ol-opt.selected {
  background: var(--color-answer-selected-bg) !important;
  border-color: var(--color-answer-selected-border) !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.18) !important;
}

.exam-opt.selected .exam-opt-text,
.ol-opt.selected span:not(.ol-opt-num),
.ol-opt.selected .ol-opt-text {
  color: var(--color-answer-selected-text) !important;
  font-weight: 700 !important;
}

/* 4. TRẠNG THÁI ĐÚNG (CORRECT - XANH LÁ CHUẨN ZUTOBI) */
.exam-opt.correct,
.ol-opt.correct {
  background: var(--color-answer-correct-bg) !important;
  border-color: var(--color-answer-correct-border) !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18) !important;
}

.exam-opt.correct .exam-opt-text,
.ol-opt.correct span:not(.ol-opt-num),
.ol-opt.correct .ol-opt-text {
  color: var(--color-answer-correct-text) !important;
  font-weight: 700 !important;
}

/* 5. TRẠNG THÁI SAI (WRONG - ĐỎ HỒNG CẢNH BÁO) */
.exam-opt.wrong,
.ol-opt.wrong {
  background: var(--color-answer-wrong-bg) !important;
  border-color: var(--color-answer-wrong-border) !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.18) !important;
}

.exam-opt.wrong .exam-opt-text,
.ol-opt.wrong span:not(.ol-opt-num),
.ol-opt.wrong .ol-opt-text {
  color: var(--color-answer-wrong-text) !important;
  font-weight: 700 !important;
}

/* 6. NÚT TRÒN SỐ THỨ TỰ (1, 2, 3, 4) */
.exam-opt-key,
.ol-opt-key,
.ol-opt-num,
.option-key {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--radius-pill) !important;
  background: #F1F5F9 !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  border: 1.5px solid var(--color-border) !important;
  transition: all var(--transition-fast) !important;
}

/* Key khi chọn */
.exam-opt.selected .exam-opt-key,
.ol-opt.selected .ol-opt-num,
.ol-opt.selected .ol-opt-key {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  border-color: var(--pmf-orange) !important;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.4) !important;
}

/* Key khi đúng */
.exam-opt.correct .exam-opt-key,
.ol-opt.correct .ol-opt-num,
.ol-opt.correct .ol-opt-key {
  background: var(--color-success) !important;
  color: #ffffff !important;
  border-color: var(--color-success) !important;
}

/* Key khi sai */
.exam-opt.wrong .exam-opt-key,
.ol-opt.wrong .ol-opt-num,
.ol-opt.wrong .ol-opt-key {
  background: var(--color-error) !important;
  color: #ffffff !important;
  border-color: var(--color-error) !important;
}

/* 7. NỘI DUNG CHỮ ĐÁP ÁN (CHUẨN TƯƠNG PHẢN WCAG 4.5:1) */
.exam-opt-text,
.ol-opt-text,
.ol-opt > span:not(.ol-opt-num),
.option-label {
  font-family: var(--pmf-font) !important;
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-main) !important;
  flex: 1 1 auto !important;
}

@media (max-width: 640px) {
  .exam-opt,
  .ol-opt {
    padding: 10px 14px !important;
    gap: 12px !important;
  }
  .exam-opt-text,
  .ol-opt-text,
  .ol-opt > span:not(.ol-opt-num) {
    font-size: 0.98rem !important;
  }
}


/* >>> MODULE: bottom-nav.css <<< */

/* ==========================================================================
   MODULE 5: MOBILE THUMB-ZONE NAVIGATION, QUESTION MATRIX & DESKTOP TICKET
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

/* 1. THANH ĐIỀU HƯỚNG 3 NÚT DƯỚI ĐÁY (MOBILE THUMB ZONE: CAO 52PX)
      Áp dụng cho cả thi.html (.exam-nav) và on-luyen.html (.ol-prac-footer) */
.exam-nav,
.ol-prac-footer,
.ol-bottom-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 16px !important;
  padding-bottom: calc(10px + var(--safe-bottom)) !important;
  background: #ffffff !important;
  border-top: 1px solid var(--color-border) !important;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08) !important;
  box-sizing: border-box !important;
}

/* 2. NÚT CÂU TRƯỚC / CÂU TIẾP THEO (MIN 52PX) */
.exam-nav-prev,
.exam-nav-next,
.ol-prac-nav-btn,
.btn-ol-prev,
.btn-ol-next {
  min-height: var(--touch-target-min) !important;
  min-width: 58px !important;
  padding: 10px 20px !important;
  background: #F1F5F9 !important;
  color: var(--pmf-navy) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-sm) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.exam-nav-prev:hover,
.exam-nav-next:hover,
.ol-prac-nav-btn:hover,
.btn-ol-prev:hover,
.btn-ol-next:hover {
  background: #E2E8F0 !important;
  border-color: #CBD5E1 !important;
  transform: translateY(-1px) !important;
}

.exam-nav button:active,
.ol-prac-footer button:active,
.ol-bottom-bar button:active {
  transform: scale(0.97) !important;
}

.exam-nav-prev:disabled,
.exam-nav-next:disabled,
.ol-prac-nav-btn:disabled,
.btn-ol-prev:disabled,
.btn-ol-next:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* 3. NÚT TRUNG TÂM HIỂN THỊ SỐ CÂU (VÍ DỤ: "1 / 30") */
.exam-nav-center,
.ol-prac-nav-center,
.ol-bottom-counter {
  flex: 1 1 auto !important;
  max-width: 200px !important;
  min-height: var(--touch-target-min) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #F8FAFC !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  cursor: pointer !important;
  padding: 4px 14px !important;
  box-sizing: border-box !important;
  transition: all var(--transition-fast) !important;
}

.exam-nav-center:hover,
.ol-prac-nav-center:hover {
  border-color: var(--pmf-orange) !important;
  background: #FFF7ED !important;
}

.exam-nav-counter,
.ol-prac-nav-counter {
  font-family: var(--pmf-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

.exam-nav-label,
.ol-prac-nav-label {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* 4. THANH MA TRẬN CÂU HỎI NGANG (HORIZONTAL SCROLL MATRIX BAR) */
.exam-matrix-bar,
.ol-prac-matrix {
  height: 56px !important;
  background: #F8FAFC !important;
  border-bottom: 1px solid var(--color-border) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  box-sizing: border-box !important;
}

.exam-matrix-inner,
.ol-prac-matrix-inner {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.exam-matrix-grid,
.ol-prac-matrix-grid {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* Ô CÂU HỎI TRONG MA TRẬN (.qnav-cell) */
.qnav-cell,
.ol-prac-matrix-cell,
.ol-prac-qdot,
.ol-palette-cell {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: var(--radius-md) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  user-select: none !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
}

.qnav-cell:hover,
.ol-prac-matrix-cell:hover,
.ol-palette-cell:hover {
  border-color: var(--pmf-orange) !important;
  transform: translateY(-1px) !important;
}

/* Trạng thái đã trả lời */
.qnav-cell.answered,
.ol-prac-matrix-cell.answered,
.ol-prac-qdot.answered,
.ol-palette-cell.answered {
  background: var(--pmf-navy) !important;
  border-color: var(--pmf-navy) !important;
  color: #ffffff !important;
}

/* Câu hiện tại đang làm (active/current) */
.qnav-cell.cur,
.qnav-cell.current,
.ol-prac-matrix-cell.current,
.ol-prac-qdot.current,
.ol-palette-cell.current {
  border: 2px solid var(--pmf-orange) !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3) !important;
  font-weight: 900 !important;
}

/* Câu đúng khi xem lại */
.qnav-cell.correct,
.ol-prac-matrix-cell.correct,
.ol-palette-cell.correct {
  background: var(--color-success) !important;
  border-color: var(--color-success) !important;
  color: #ffffff !important;
}

/* Câu sai khi xem lại */
.qnav-cell.wrong,
.ol-prac-matrix-cell.wrong,
.ol-palette-cell.wrong {
  background: var(--color-error) !important;
  border-color: var(--color-error) !important;
  color: #ffffff !important;
}

/* Dấu chấm câu điểm liệt trong ma trận */
.qnav-cell.is-fatal::after,
.ol-palette-cell.is-fatal::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--color-error) !important;
  border-radius: 50% !important;
}

/* 5. SIDEBAR DESKTOP VÀ PHIẾU TRẢ LỜI (#examRightDesktop) TRONG thi.html - CHỈ HIỆN TRÊN DESKTOP */
@media (min-width: 992px) {
  .exam-right-desktop {
    background: #ffffff !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}

@media (max-width: 991.98px) {
  #examRightDesktop,
  .exam-right-desktop {
    display: none !important;
  }
  .exam-left {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
  }
}

.exam-timer-card {
  background: var(--pmf-navy) !important;
  color: #ffffff !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.exam-timer-card-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #94A3B8 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
}

.exam-timer-card-val {
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  color: #ffffff !important;
}

/* NÚT KẾT THÚC THI TRÊN DESKTOP */
.exam-finish-desktop,
.exam-nav-finish,
#examAppSubmitBtn,
.btn-submit-exam,
.btn-finish-test {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.exam-finish-desktop:hover,
.exam-nav-finish:hover,
#examAppSubmitBtn:hover,
.btn-submit-exam:hover,
.btn-finish-test:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-1px) !important;
}

/* BẢNG PHIẾU ĐÁP ÁN DESKTOP (EXAM TICKET) */
.exam-ticket-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-radius: var(--radius-md) !important;
  transition: background var(--transition-fast) !important;
}

.exam-ticket-row:hover {
  background: #F1F5F9 !important;
}

.exam-ticket-row.current {
  background: #FFF7ED !important;
  font-weight: 800 !important;
}

.exam-ticket-cell.checked .exam-ticket-box {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
}

/* 6. THANH ĐÁY APP CỐ ĐỊNH CHO TOÀN BỘ MOBILE (PWA BOTTOM APP BAR) */
nav.bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(60px + var(--safe-bottom)) !important;
  background: #ffffff !important;
  border-top: 1px solid var(--color-border) !important;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06) !important;
  z-index: 999 !important;
  padding-bottom: var(--safe-bottom) !important;
}

nav.bottom-nav .bottom-nav-inner {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  height: 60px !important;
  padding: 0 !important;
  list-style: none !important;
}

nav.bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  text-decoration: none !important;
  color: var(--color-text-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  transition: all var(--transition-fast) !important;
}

nav.bottom-nav .nav-item.active,
nav.bottom-nav .nav-item:hover {
  color: var(--pmf-orange) !important;
}

nav.bottom-nav .nav-icon {
  font-size: 1.25rem !important;
  line-height: 1 !important;
}


/* >>> MODULE: dashboard.css <<< */

/* ==========================================================================
   MODULE 6: DASHBOARD, BENTO GRID, SETUP SCREEN & LEADERBOARD (SẢNH CHÍNH)
   Brand: HocLaiXeSG.com - PassMeFast / Zutobi 2026 Style
   ========================================================================== */

/* 1. NỀN SẢNH CHÍNH & VÙNG HERO */
body.page-index {
  background: radial-gradient(1200px 420px at 50% -80px, rgba(249, 115, 22, 0.08), transparent 60%), var(--color-bg) !important;
}

.intro-hero,
.management-section,
.seo-card-main,
.curriculum-card,
#bxhPublic {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px 28px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 640px) {
  .intro-hero,
  .management-section,
  .seo-card-main,
  .curriculum-card,
  #bxhPublic {
    padding: 18px 16px !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 16px !important;
  }
}

.intro-hero {
  border-left: 6px solid var(--pmf-orange) !important;
}

.intro-title {
  color: var(--pmf-navy) !important;
  font-size: clamp(1.4rem, 3.5vw, 1.85rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.intro-desc {
  color: var(--color-text-body) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* 2. CHỌN HẠNG BẰNG (SEGMENTED PILL TABS) */
.license-chips {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

.license-chips::-webkit-scrollbar {
  display: none !important;
}

.license-chip {
  background: #ffffff !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 10px 22px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}

.license-chip:hover {
  border-color: var(--pmf-orange) !important;
  color: var(--pmf-orange) !important;
  transform: translateY(-2px) !important;
}

.license-chip.active {
  background: var(--pmf-navy) !important;
  border-color: var(--pmf-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

.license-chip.active .chip-badge {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
}

/* 3. BENTO GRID CHẾ ĐỘ LUYỆN THI */
.part-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
}

@media (min-width: 768px) {
  .part-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}

.part-card {
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 22px 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
}

.part-card:hover {
  border-color: var(--pmf-orange) !important;
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
}

.part-card strong {
  color: var(--pmf-navy) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.part-card span {
  color: var(--color-text-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
}

/* 4. CÁC NÚT HÀNH ĐỘNG CHÍNH (CTAS) */
.hlx-cta {
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 13px 28px !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
}

.hlx-cta-thi {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35) !important;
}

.hlx-cta-thi:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45) !important;
}

.hlx-cta-on {
  background: var(--pmf-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25) !important;
}

.hlx-cta-on:hover {
  background: var(--pmf-navy-dark) !important;
  transform: translateY(-2px) !important;
}

/* 5. MÀN HÌNH CHUẨN BỊ THI (SETUP SCREEN - thi.html) */
#setupScreen {
  padding: 20px 16px 40px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
}

.setup-box {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 24px 20px !important;
}

.setup-box-hdr h2 {
  font-family: var(--pmf-font) !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 0 0 6px 0 !important;
}

.setup-box-hdr p {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  margin: 0 0 16px 0 !important;
}

.setup-section-title {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--pmf-navy) !important;
  margin-bottom: 10px !important;
}

.hang-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.hang-btn {
  background: #F8FAFC !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 8px !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: var(--pmf-navy) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
}

.hang-btn:hover {
  border-color: var(--pmf-orange) !important;
  background: #FFF7ED !important;
  transform: translateY(-1px) !important;
}

.hang-btn.active,
.hang-btn.selected {
  background: var(--pmf-navy) !important;
  border-color: var(--pmf-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}

.info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.info-item {
  background: #F8FAFC !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.info-item-lbl {
  font-size: 0.75rem !important;
  color: var(--color-text-muted) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.info-item-val {
  font-size: 1.15rem !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
}

.setup-liet-note {
  background: #FFFBEB !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: var(--radius-lg) !important;
  padding: 12px 16px !important;
  color: #92400E !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin-bottom: 22px !important;
}

.setup-actions {
  display: flex !important;
  gap: 12px !important;
}

.btn-bo {
  flex: 1 !important;
  min-height: var(--touch-target-min) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  transition: all var(--transition-fast) !important;
}

.btn-bo-primary {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4) !important;
}

.btn-bo-primary:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5) !important;
}

.btn-bo-secondary {
  background: #F1F5F9 !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--pmf-navy) !important;
}

.btn-bo-secondary:hover {
  background: #E2E8F0 !important;
}

/* 6. BẢNG VINH DANH HỌC VIÊN (LEADERBOARD) */
.leaderboard-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 14px !important;
  font-size: 0.95rem !important;
}

.leaderboard-table th {
  background: #F1F5F9 !important;
  color: var(--pmf-navy) !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  text-align: left !important;
  border-bottom: 2px solid var(--color-border) !important;
}

.leaderboard-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-body) !important;
}

.leaderboard-table tr:hover td {
  background: #F8FAFC !important;
}

.rank-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
}

.rank-badge.top-1 { background: #FEF08A !important; color: #854D0E !important; }
.rank-badge.top-2 { background: #E2E8F0 !important; color: #334155 !important; }
.rank-badge.top-3 { background: #FED7AA !important; color: #9A3412 !important; }


/* >>> MODULE: mo-phong.css <<< */

/* ==========================================================================
   MODULE 7: 120 TÌNH HUỐNG MÔ PHỎNG (PASSMEFAST & ZUTOBI 2026)
   Path: /thithu/mo-phong/ (index.html, on.html, thi.html, meo.html)
   ========================================================================== */

/* 1. TOP BAR MÔ PHỎNG (NATIVE APP HEADER) */
.sch-top,
.mp-top,
.top {
  background: var(--pmf-navy) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: calc(8px + var(--safe-top)) 14px 10px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}

.sch-top .sch-name,
#hvName {
  font-family: var(--pmf-font) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sch-top .sch-name::before {
  content: "👤";
  font-size: 0.85rem;
}

.sch-top .sch-home,
.dt-back,
.mp-back,
.back {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  padding: 6px 14px !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: all var(--transition-fast) !important;
}

.sch-top .sch-home:hover,
.dt-back:hover,
.mp-back:hover,
.back:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
  color: #ffffff !important;
}

.sch-top .sch-fs {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: var(--radius-pill) !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 16px !important;
  transition: all var(--transition-fast) !important;
}

.sch-top .sch-fs:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
}

.sch-top .sch-clock,
#clock {
  font-variant-numeric: tabular-nums !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
}

/* 2. THANH TIÊU ĐỀ PHỤ (.sch-bar) */
.sch-bar {
  background: #1E293B !important;
  color: #F8FAFC !important;
  padding: 8px 14px !important;
  font-family: var(--pmf-font) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 3. BẢNG CHỌN CHƯƠNG & MA TRẬN TÌNH HUỐNG (.ch-scroll, .nums) */
.ch-scroll {
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 10px 14px !important;
  box-shadow: var(--shadow-sm) !important;
}

.ch-block {
  margin-bottom: 10px !important;
}

.ch-block:last-child {
  margin-bottom: 0 !important;
}

.chap {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  letter-spacing: 0.04em !important;
  margin: 0 0 8px !important;
}

.nums {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.nums button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: var(--radius-md) !important;
  background: #F8FAFC !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  box-shadow: var(--shadow-sm) !important;
}

.nums button:hover {
  border-color: var(--pmf-orange) !important;
  background: #FFF7ED !important;
  transform: translateY(-1px) !important;
}

.nums button.on,
.nums button.active {
  background: var(--pmf-navy) !important;
  border-color: var(--pmf-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;
}

/* 4. KHUNG VIDEO TÌNH HUỐNG MÔ PHỎNG (.vid-wrap) */
.vid-wrap {
  background: #000000 !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--pmf-navy-light) !important;
  margin: 14px 0 !important;
  position: relative !important;
}

.vid-wrap video {
  width: 100% !important;
  display: block !important;
  border-radius: var(--radius-xl) !important;
}

.sit {
  font-family: var(--pmf-font) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 14px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sit-ico {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--pmf-orange) !important;
  display: inline-block !important;
}

/* 5. NÚT SPACE BẤM KỊP THỜI (THUMB-FRIENDLY SPACEBAR BUTTON) */
.space-btn,
.btn-space-click,
.btn-space-action {
  min-height: 54px !important;
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.45) !important;
  transition: all var(--transition-fast) !important;
  width: 100% !important;
  margin: 14px 0 !important;
  user-select: none !important;
}

.space-btn:hover,
.btn-space-click:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.55) !important;
}

.space-btn:active,
.btn-space-click:active {
  transform: scale(0.98) !important;
}

/* 6. HƯỚNG DẪN THI & BẢO ĐẢM KẾT THÚC (.guide) */
.guide {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 22px 20px !important;
  box-shadow: var(--shadow-sm) !important;
  margin: 16px 0 !important;
}

.guide h2 {
  font-family: var(--pmf-font) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  border-bottom: 1.5px solid #F1F5F9 !important;
  padding-bottom: 8px !important;
}

.guide ul {
  padding-left: 20px !important;
  color: var(--color-text-body) !important;
  line-height: 1.65 !important;
}

.guide li {
  margin-bottom: 8px !important;
}

/* 7. KẾT QUẢ ĐIỂM SỐ MÔ PHỎNG */
.mp-score-5 {
  color: var(--color-success) !important;
  font-weight: 900 !important;
}

.mp-score-0 {
  color: var(--color-error) !important;
  font-weight: 900 !important;
}

/* 8. SẢNH MÔ PHỎNG (mo-phong/index.html HERO & CARDS) */
.sch.hub .intro-hero,
.sch.hub .hero {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-left: 6px solid var(--pmf-orange) !important;
  border-radius: var(--radius-xl) !important;
  padding: 24px 22px !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
}

.intro-badge {
  display: inline-block !important;
  background: #FFF7ED !important;
  color: var(--pmf-orange) !important;
  border: 1px solid #FED7AA !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 8px !important;
}

.intro-title {
  font-family: var(--pmf-font) !important;
  font-size: clamp(1.4rem, 3.2vw, 1.8rem) !important;
  font-weight: 900 !important;
  color: var(--pmf-navy) !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.25 !important;
}

.intro-sub {
  color: var(--color-text-muted) !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* HUB BIG CARDS (ÔN TẬP & THI THỬ MÔ PHỎNG) */
.hub-big {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}

.hub-card {
  background: #ffffff !important;
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 22px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

.hub-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-md) !important;
}

.hub-card.hub-on {
  border-color: var(--color-border) !important;
}

.hub-card.hub-on:hover {
  border-color: var(--pmf-navy) !important;
}

.hub-card.hub-on strong {
  font-family: var(--pmf-font) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hub-card.hub-on strong::before {
  content: "📚";
  font-size: 1.2rem;
}

.hub-card.hub-thi {
  background: #FFF7ED !important;
  border-color: var(--pmf-orange) !important;
}

.hub-card.hub-thi:hover {
  border-color: var(--pmf-orange-hover) !important;
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.25) !important;
}

.hub-card.hub-thi strong {
  font-family: var(--pmf-font) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--pmf-orange) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hub-card.hub-thi strong::before {
  content: "⏱";
  font-size: 1.2rem;
}

.hub-card span {
  color: var(--color-text-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

/* NÚT MẸO MÔ PHỎNG */
.hub-meo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: var(--touch-target-min) !important;
  background: #F1F5F9 !important;
  color: var(--pmf-navy) !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 12px 24px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
  margin: 16px 0 24px !important;
}

.hub-meo:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* QUY ĐỊNH PHÁP LÝ BENTO CARDS (.law2) */
.law2 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin: 16px 0 !important;
}

.law2 article {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

.law2 h3 {
  font-family: var(--pmf-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.law2 p {
  color: var(--color-text-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 0 0 6px 0 !important;
}


/* >>> MODULE: sa-hinh.css <<< */

/* ==========================================================================
   MODULE 8: 11 BÀI THI SA HÌNH & KHẨN CẤP (PASSMEFAST & ZUTOBI 2026)
   Path: /thithu/sa-hinh/ (index.html, bai-01 -> bai-11, khan-cap)
   ========================================================================== */

/* 1. SẢNH TỔNG QUAN 11 BÀI SA HÌNH (sa-hinh/index.html) */
body:has(.section-title) header.header,
body[data-bai] header.header,
.sa-hinh-header {
  background: var(--pmf-navy) !important;
  color: #ffffff !important;
  padding: calc(16px + var(--safe-top)) 16px 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
}

body:has(.section-title) header.header .container,
body[data-bai] header.header .container {
  max-width: 800px !important;
  margin: 0 auto !important;
}

body:has(.section-title) header.header h1,
body[data-bai] header.header h1 {
  font-family: var(--pmf-font) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 8px 0 4px 0 !important;
}

body:has(.section-title) header.header p {
  color: #94A3B8 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
}

/* 2. DANH SÁCH 11 BÀI THI (BENTO CARDS THAY CHO FAQ CŨ) */
.faq-item,
.bai-card,
.sa-hinh-card {
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-base) !important;
}

.faq-item:hover,
.bai-card:hover {
  border-color: var(--pmf-orange) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}

.faq-item h4,
.bai-card h4 {
  font-family: var(--pmf-font) !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 0 0 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.faq-item h4::before {
  content: "🚗";
  font-size: 1rem;
}

.faq-item p,
.bai-card p {
  color: var(--color-text-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.faq-item a,
.bai-card a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: var(--pmf-orange) !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
}

.faq-item a:hover,
.bai-card a:hover {
  color: var(--pmf-orange-hover) !important;
  transform: translateX(3px) !important;
}

/* 3. MÀN HÌNH MÔ PHỎNG THỰC HÀNH 2D (sa-hinh/bai-01 -> bai-11) */
body[data-bai] {
  background: var(--color-bg) !important;
  color: var(--color-text-main) !important;
  font-family: var(--pmf-font) !important;
}

body[data-bai] .wrap {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 12px 14px 40px !important;
}

body[data-bai] .top {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

body[data-bai] .top .back {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--radius-pill) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  color: var(--pmf-navy) !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  box-shadow: var(--shadow-sm) !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
}

body[data-bai] .top .back:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
  color: #ffffff !important;
}

body[data-bai] h1 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 0 !important;
}

body[data-bai] .sub {
  font-size: 0.88rem !important;
  color: var(--color-text-muted) !important;
  margin-top: 3px !important;
  line-height: 1.45 !important;
}

/* KHUNG STAGE SA HÌNH 2D */
body[data-bai] .stage {
  background: var(--pmf-navy) !important;
  border: 1px solid var(--pmf-navy-light) !important;
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
  margin-bottom: 16px !important;
}

/* THANH TRẠNG THÁI & HƯỚNG DẪN BƯỚC (.step-bar) */
body[data-bai] .step-bar {
  background: #1E293B !important;
  color: #F8FAFC !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-align: center !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* NÚT THAO TÁC (ACTIONS: BẮT ĐẦU / RESET - 52PX TOUCH TARGET) */
body[data-bai] .actions {
  display: flex !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #0F172A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-bai] .btn {
  min-height: var(--touch-target-min) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: none !important;
  transition: all var(--transition-fast) !important;
  flex: 1 !important;
}

body[data-bai] .btn-main {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4) !important;
}

body[data-bai] .btn-main:hover {
  background: var(--pmf-orange-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5) !important;
}

body[data-bai] .btn-ghost {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body[data-bai] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* THẺ TRÌNH TỰ THAO TÁC & BẢNG TRỪ ĐIỂM (.panel) */
body[data-bai] .panel {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: var(--shadow-sm) !important;
}

body[data-bai] .panel h2 {
  font-family: var(--pmf-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 0 0 12px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid #F1F5F9 !important;
}

body[data-bai] .steps {
  padding-left: 20px !important;
  color: var(--color-text-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
}

body[data-bai] .steps li {
  margin-bottom: 8px !important;
}

body[data-bai] table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 0.92rem !important;
}

body[data-bai] th {
  background: #F8FAFC !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
  padding: 10px 12px !important;
  text-align: left !important;
  border-bottom: 2px solid var(--color-border) !important;
}

body[data-bai] td {
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-body) !important;
}

/* THANH ĐIỀU HƯỚNG BÀI TIẾP / BÀI TRƯỚC (.nav) */
body[data-bai] .nav {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

body[data-bai] .nav a {
  min-height: var(--touch-target-min) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--color-border) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--pmf-navy) !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 20px !important;
  flex: 1 !important;
  box-shadow: var(--shadow-sm) !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
}

body[data-bai] .nav a:hover {
  border-color: var(--pmf-orange) !important;
  color: var(--pmf-orange) !important;
  transform: translateY(-1px) !important;
}


/* >>> MODULE: duong-truong.css <<< */

/* ==========================================================================
   MODULE 9: SÁT HẠCH ĐƯỜNG TRƯỜNG (PASSMEFAST & ZUTOBI 2026)
   Path: /thithu/duong-truong/ (index.html)
   ========================================================================== */

/* 1. TOP HEADER ĐƯỜNG TRƯỜNG */
.dt-top {
  background: var(--pmf-navy) !important;
  color: #ffffff !important;
  padding: calc(10px + var(--safe-top)) 14px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--shadow-sm) !important;
}

.dt-top-inner {
  max-width: 720px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.dt-back {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: all var(--transition-fast) !important;
}

.dt-back:hover {
  background: var(--pmf-orange) !important;
  border-color: var(--pmf-orange) !important;
  color: #ffffff !important;
}

.dt-top h1 {
  font-family: var(--pmf-font) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: #ffffff !important;
}

.dt-top h1 small {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #94A3B8 !important;
  margin-top: 2px !important;
}

.dt-wrap {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 16px 14px 40px !important;
}

/* 2. KHỐI LƯU Ý ĐẦU TRANG (.dt-note) */
.dt-note {
  background: #FFFBEB !important;
  border: 1.5px solid #FDE68A !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 18px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: #92400E !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* 3. MỤC LỤC NHANH DẠNG CHIPS (.dt-toc) */
.dt-toc {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.dt-toc::-webkit-scrollbar {
  display: none !important;
}

.dt-toc a {
  flex-shrink: 0 !important;
  border: 1.5px solid var(--color-border) !important;
  background: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--pmf-navy) !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-fast) !important;
}

.dt-toc a:hover {
  border-color: var(--pmf-orange) !important;
  color: var(--pmf-orange) !important;
  background: #FFF7ED !important;
}

/* 4. THẺ NỘI DUNG ĐƯỜNG TRƯỜNG (.dt-card) */
.dt-card {
  background: #ffffff !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  padding: 20px 18px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-sm) !important;
}

.dt-card h2 {
  font-family: var(--pmf-font) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--pmf-navy) !important;
  margin: 0 0 12px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dt-badge {
  background: var(--pmf-orange) !important;
  color: #ffffff !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

.dt-card p {
  color: var(--color-text-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 0 10px 0 !important;
}

/* 5. CÁC HỘP LỆNH TĂNG / GIẢM SỐ (.cmd, .cmd.up, .cmd.down) */
.cmd {
  border-radius: var(--radius-lg) !important;
  padding: 16px 18px !important;
  margin: 14px 0 !important;
  box-shadow: var(--shadow-sm) !important;
}

.cmd.up {
  background: #FFF7ED !important;
  border: 2px solid var(--pmf-orange) !important;
}

.cmd.down {
  background: #F8FAFC !important;
  border: 2px solid var(--pmf-navy) !important;
}

.cmd-title {
  font-family: var(--pmf-font) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
}

.cmd.up .cmd-title {
  color: var(--pmf-orange) !important;
}

.cmd.down .cmd-title {
  color: var(--pmf-navy) !important;
}

.cmd-rule {
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 10px !important;
  color: var(--color-text-muted) !important;
}

.cmd ul {
  padding-left: 20px !important;
  color: var(--color-text-body) !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
}

.cmd li {
  margin-bottom: 6px !important;
}