/*
============================================================================
   0. LIGHT MODE DUNG CHUNG (giao dien sang co ban)
   Toan bo style.css (light) duoc gop vao day; file style.css da xoa.
   Vi tri TRUOC cac section shared/dark phia duoi giu nguyen cascade
   giong thoi diem load '<link style.css>' + '<link giaodien.css>'.
============================================================================
*/

/* ============================================================================
   LearnHub — GIAO DIỆN CHUNG DUY NHẤT (Light + Dark)
   ----------------------------------------------------------------------------
   File CSS TOÀN SITE: gộp toàn bộ UI dùng chung + dark mode trong 1 file:
     0. Light mode dùng chung  (toàn bộ style.css — file style.css đã xóa)
     1. Toast & Confirm        (lhToast / lhConfirm — trước đây trong toast.js)
     2. Banner cập nhật        (.lh-vcheck — trước đây trong version-check.js)
     3. Popup tài khoản        (#userPopup — trước đây là account-popup.css)
     4. Dark mode dùng chung   (body.dark-mode — trước đây rải trong style.css)
     5. Dark mode theo trang   (body.dark-mode — trước đây trong <style> từng trang)
   Mọi trang chỉ cần link file này; không còn style.css/account-popup.css riêng.
   ============================================================================ */

:root {
  /* Cấu hình chung */
  --bg-main: #f6f8ff;
  --bg-pattern: #d6dcff;
  --app-reveal-distance: 16px;
  --app-reveal-duration: 0.55s;
  --app-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Màu chữ */
  --text-main: #111827;
  --text-sub: #6b7280;

  /* Card & Components */
  --card-bg: linear-gradient(135deg, #ffffff, #f3f6ff);
  --card-text: #2b3a67;
  --card-sub: #6b7280;
  --blue-accent: #2563eb;

  /* Menu & Popup */
  --menu-bg: rgba(255,255,255,0.7);
  --popup-bg: rgba(255,255,255,0.75);

  /* Footer */
  --footer-bg: #ffffff;
  --footer-border: #e2e8f0;
  --footer-shadow: rgba(0, 0, 0, 0.02);
  --footer-brand-color: #0066cc;
  --footer-heading-color: #0066cc;
  --footer-text: #64748b;
  --footer-text-strong: #334155;
  --footer-link-hover: #3b82f6;
  --footer-social-bg: #f1f5f9;
  --footer-social-text: #64748b;
  --footer-divider: #f1f5f9;
  --footer-bottom-text: #94a3b8;

  /* Các biến bổ sung cho Slideshow & AI Hubie */
  --hubie-bg: linear-gradient(135deg, #f0f4ff, #e0e9ff);
  --hubie-text: #3b5998;
  --warn-text: #b78103;
  --warn-border: #eef2f6;
}

/* ẨN SCROLLBAR NHƯNG VẪN GIỮ CHỨC NĂNG CUỘN */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#quiz, .quiz-box, .quiz-box iframe {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; } /* Chrome/Safari */
#quiz::-webkit-scrollbar, .quiz-box::-webkit-scrollbar, .quiz-box iframe::-webkit-scrollbar { display: none; }


/* ===== FOOTER (LearnHub) ===== */
.lh-footer{
  margin-top: 40px;
  padding: 32px 32px 20px 32px;
  background: var(--footer-bg);
  border: 1px solid var(--footer-border);
  border-radius: 24px;
  box-shadow: 0 8px 24px var(--footer-shadow);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.lh-footer-main{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 32px;
  padding-bottom: 24px;
}
.lh-footer-brand{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lh-footer-brand-logo{
  display: flex;
  align-items: center;
  gap: 12px;
}
.lh-footer-brand-logo img{
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.lh-footer-brand-logo h3{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--footer-brand-color);
  letter-spacing: -0.5px;
}
.lh-footer-brand p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--footer-text);
  max-width: 300px;
}
.lh-footer-col h4{
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--footer-heading-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lh-footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lh-footer-links a{
  text-decoration: none;
  font-size: 14px;
  color: var(--footer-text);
  transition: all 0.2s ease;
  display: inline-block;
}
.lh-footer-links a:hover{
  color: var(--footer-link-hover);
  transform: translateX(4px);
}
.lh-social-icons{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.lh-social-icons a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--footer-social-bg);
  color: var(--footer-social-text);
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.lh-social-icons a:hover{
  transform: translateY(-3px);
  color: #ffffff;
  background: var(--footer-link-hover);
}
.lh-social-icons a.fb:hover{ background: #1877f2; }
.lh-social-icons a.zl{ font-weight: 900; font-size: 20px; font-family: 'Inter', system-ui, sans-serif; letter-spacing: -1px; }
.lh-social-icons a.zl .zl-z{ display: inline-block; font-style: normal; }
.lh-social-icons a.zl:hover{ background: #0068FF; }
.lh-social-icons a.zl:hover .zl-z{ color: #fff; }
.lh-social-icons a.yt:hover{ background: #ff0000; }
.lh-social-icons a.tk:hover{ background: var(--footer-text-strong); }
.lh-social-icons a.cm:hover{ background: #10b981; }
.lh-contact-info li{
  font-size: 14px;
  color: var(--footer-text);
  line-height: 1.5;
}
.lh-contact-info strong{
  color: var(--footer-text-strong);
}
.lh-footer-bottom{
  padding-top: 18px;
  border-top: 1px solid var(--footer-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--footer-bottom-text);
}
.lh-footer-bottom-links{
  display: flex;
  gap: 20px;
}
.lh-footer-bottom-links a{
  color: var(--footer-bottom-text);
  text-decoration: none;
  transition: color 0.2s;
}
.lh-footer-bottom-links a:hover{
  color: var(--footer-link-hover);
}
@media (max-width: 768px){
  .lh-footer-main{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .lh-footer-bottom{
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .lh-footer-bottom-links{
    justify-content: center;
  }
}

/* Tối ưu animation cho mobile: chỉ tắt/giảm đúng chỗ NẶNG (vòng lặp vô hạn + backdrop-filter/
   background property, tốn GPU-CPU liên tục), KHÔNG chặt hết toàn bộ animation như trước.
   Animation nhẹ (transform/opacity trên phần tử nhỏ, one-shot) vẫn giữ nguyên trên mobile:
   dot loading, logo float, card fade-up, các hiệu ứng chuyển trạng thái popup... */
@media (max-width: 768px) {
  /* Header: bỏ animation nền chạy vô hạn (background-position + backdrop-filter blur cùng lúc
     là tổ hợp nặng nhất trang), giữ màu gradient tĩnh */
  .header {
    animation: none;
    background-position: 50% 50%;
  }

  /* Login slide overlay: animation này đổi cả property "background" (không thể tăng tốc phần
     cứng), chạy vô hạn alternate -> tắt trên mobile, giữ lớp phủ tĩnh vẫn đẹp */
  #loginBox .auth-slide.active::after {
    animation: none;
  }
}

body{
margin:0;
font-family:'Segoe UI',Arial,sans-serif;
background-color: var(--bg-main);
background-image: radial-gradient(var(--bg-pattern) 1.2px, transparent 1.2px);
background-size:28px 28px;
overflow-x:clip;
animation:fadeIn 0.6s ease;
will-change: auto;
}
html, body{
width:100%;
max-width:100%;
overflow-x:clip;
overscroll-behavior-x:none;
}

/* Maintenance overlay CSS removed from main stylesheet.
   `maintenance.html` uses the shared `giaodien.css` and can include
   its own minimal overrides if needed. */

/* Hiệu ứng thanh tiến trình chạy qua lại */
@keyframes pulse-bar {
    0% { width: 0%; min-width: 0%; }
    50% { width: 70%; min-width: 40%; }
    100% { width: 100%; min-width: 100%; }
}
.animate-bar {
    animation: pulse-bar 2.5s ease-in-out infinite;
}

/* Hiệu ứng xoay bánh răng chậm, mượt mà */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 10s linear infinite; }
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
/* HEADER */

.header{
position:relative;
background: linear-gradient(
135deg,
rgb(30, 90, 200),     /* xanh đậm */
rgb(58, 134, 255),    /* xanh chính */
rgb(120, 100, 255)    /* tím nhẹ */
);
background-size:300% 300%;
color:white;
padding:20px 40px;
display:flex;
justify-content:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
backdrop-filter: blur(10px);
animation:headerFlow 10s ease infinite;
}
@keyframes headerFlow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.header-inner{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
}

.logo{
width:55px;
height:55px;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.3);
transition:0.3s;
background:white; /* 👈 thêm dòng này */
}

.logo:hover{
transform:scale(1.08);
box-shadow:
0 0 25px rgba(125,249,255,0.9),
0 10px 25px rgba(0,0,0,0.3);
}
/* MENU */

.menu {
    display: flex;
    align-items: center; /* Căn giữa tất cả theo chiều dọc */
    justify-content: space-between; /* Đẩy Brand sang trái, Buttons ra giữa */
    padding: 8px 20px;
    background: var(--menu-bg);
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    top: 0;
    z-index: 1000;
} 

.menu button{
  padding:12px 22px;
  border:none;
  background:none;
  font-size:15px;
  cursor:pointer;
  transition:all 0.25s ease;
  border-radius:8px;
  color: color-mix(in srgb, var(--text-main) 92%, #000);
  font-weight:600; /* make nav text a bit bolder */
  white-space: nowrap;
  flex-shrink: 0;
}

.menu button.active{
background: var(--btn-color, #1a73e8);
color:white;
font-weight:600;
box-shadow: 0 4px 12px color-mix(in srgb, var(--btn-color) 40%, transparent);
}
/* màu theo môn */
.menu button[data-subject="ly"]{
  --btn-color:#3b82f6; /* 🔵 Blue - tech, logic */
}

.menu button[data-subject="sinh"]{
  --btn-color:#16a34a; /* 🟢 Green - nature, life */
}

.menu button[data-subject="tin"]{
  --btn-color:#f59e0b; /* 🟡 Amber - digital, energy */
}

.menu button[data-subject="su"]{
  --btn-color:#dc2626; /* 🔴 Red - history, strong */
}

.menu button[data-subject="hoa"]{
  --btn-color:#9333ea; /* 🟣 Violet - chemical vibe */
}

/* Ensure embedded iframes (quiz, leaderboards) have a usable height
   so `height:100%` on the iframe works even when parent has no explicit height. */
.quiz-box iframe,
.leaderboard-embed iframe,
#quiz iframe {
  width: 100%;
  height: 70vh; /* large visible area */
  min-height: 420px; /* fallback for short viewports */
  border: none !important;
  display: block;
}

.menu button[data-subject="bxh"]{
  --btn-color:#0ea5e9; /* 🌊 Cyan - forum, social */
}

.menu button[data-subject="anh"]{
  --btn-color:#ec4899; /* 💖 Pink - language, soft */
}

.menu button[data-subject="flash"]{
  --btn-color:#2563eb; /* 🔵 FlashCard */
}

.menu button[data-subject="home"]{
  --btn-color:#f97316; /* 🟠 Orange - schedule, time */
}
.menu button[data-subject]:not(.active):hover{
  background: color-mix(in srgb, var(--btn-color) 25%, transparent);
}
.menu-brand {
    display: flex;
    align-items: center;
    margin-right: 20px;
    gap: 10px;
    flex: 0 0 auto;
}

.menu-brand img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
}

.menu-brand span {
    font-size: 18px;
    font-weight: 700;
    color: #1a73e8;
    white-space: nowrap;
}

.menu-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 18px 0 4px;
    flex: 0 1 auto;
    min-width: 0;
    scroll-behavior: smooth;
}
.menu-buttons::-webkit-scrollbar {
    display: none;
}
/* ===== NAV LINKS ===== */
.nav-link {
    display:inline-flex;
    align-items:center;
    padding:6px 14px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    color:#333;
    text-decoration:none;
    background:transparent;
    transition:color 0.25s;
    white-space:nowrap;
    position:relative;
    --accent:#ff6b35;
}
.nav-link::after {
    content:'';
    position:absolute;
    bottom:2px; left:50%;
    width:0; height:2.5px;
    background:var(--accent);
    border-radius:2px;
    transition:width 0.3s ease, left 0.3s ease;
}
.nav-link:hover::after,.nav-link.active::after {
    width:60%; left:20%;
}
.nav-link:hover,.nav-link.active {
    color:var(--accent);
}



/* ===== HEADER USER ===== */
.header-user {
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    padding-right:4px;
    white-space:nowrap;
    flex-shrink:0;
}
.header-location {
    font-size:14px;
    color:#555;
    white-space:nowrap;
}

.header-time {
    font-size:14px;
    font-weight:600;
    color:#333;
    background:rgba(0,0,0,0.04);
    padding:4px 10px;
    border-radius:12px;
    white-space:nowrap;
}

.header-user .user-right { display:flex; align-items:center; gap:6px; }
.header-user .avatar-box { width:36px; height:36px; border-radius:50%; cursor:pointer; position:relative; flex-shrink:0; }
.header-user .avatar-box img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.header-user .online-pulse { position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; background:#00e676; border-radius:50%; border:2px solid #fff; z-index:1; }

/* ==================== NOTIFICATION BELL ==================== */
.notif-bell-wrap{position:relative}
.notif-bell{background:none;border:none;cursor:pointer;position:relative;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:#eab308 !important;transition:background .15s}
.notif-bell i{color:#eab308 !important}
.notif-bell:hover{background:rgba(0,0,0,.06)}
@keyframes bellRing{0%{transform:rotate(0deg)}10%{transform:rotate(14deg)}20%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}40%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}70%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}90%{transform:rotate(0.5deg)}100%{transform:rotate(0deg)}}
.notif-bell.has-unread i{animation:bellRing 1.2s ease-in-out infinite;transform-origin:top center}
@media(prefers-reduced-motion:reduce){.notif-bell.has-unread i{animation:none !important}}
.notif-badge{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;background:#ef4444;color:#fff;border-radius:8px;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;border:2px solid #fff;line-height:1}
@keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}
.notif-dropdown{position:absolute;top:calc(100% + 6px);right:-4px;width:290px;background:var(--card-bg,#fff);border:1px solid var(--footer-border,#e2e8f0);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.1);display:none;z-index:2000;overflow:hidden}
.notif-dropdown.open{display:block;animation:notifDropIn .2s ease}
.notif-dd-head{display:flex;justify-content:space-between;align-items:center;padding:3px 8px;font-size:13px !important;font-weight:700;color:var(--text-main,#0f172a);border-bottom:1px solid var(--footer-border,#e2e8f0)}
.notif-dd-clear{background:none;border:none;font-size:13px !important;color:#2563eb;cursor:pointer;font-weight:600;padding:2px 4px;border-radius:4px;line-height:1}
.notif-dd-clear:hover{background:rgba(37,99,235,.08)}
.notif-dd-list{max-height:210px;overflow-y:auto;padding:6px;scrollbar-width:thin}
.notif-dd-empty{padding:16px;text-align:center;font-size:12px;color:var(--text-sub,#94a3b8)}
.notif-dd-item{display:flex;gap:8px;padding:8px 10px;border-radius:10px;transition:background .15s;cursor:pointer}
.notif-dd-item:hover{background:rgba(0,0,0,.03)}
.notif-dd-item-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px}
.notif-dd-item-body{flex:1;min-width:0}
.notif-dd-item-title{font-size:14px;font-weight:700;color:var(--text-main,#0f172a);margin-bottom:2px}
.notif-dd-item-msg{font-size:14px;color:var(--text-sub,#64748b);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-dd-item-time{font-size:11px;color:var(--text-sub,#94a3b8);margin-top:3px}
.notif-dd-item.unread{background:rgba(37,99,235,.06);border-left:3px solid #2563eb;padding-left:7px}
.notif-dd-item.unread .notif-dd-item-title{color:#1d4ed8}
.notif-dd-item.unread .notif-dd-item-msg{color:var(--text-main,#0f172a);-webkit-line-clamp:2}


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




@media(max-width:768px){.notif-dropdown{position:absolute;top:calc(100% + 6px);right:0;left:auto;width:280px;z-index:9999}.menu{z-index:9999}}

/* NOTIFICATION DETAIL POPUP — airmail letter */
.notif-detail-overlay{position:fixed;inset:0;z-index:99999;background:rgba(15,23,42,.65);display:none;align-items:center;justify-content:center;padding:24px}
.notif-detail-overlay.opening{display:flex;animation:notifOverlayIn .3s ease forwards}
.notif-detail-overlay.closing{display:flex;animation:notifOverlayOut .25s ease forwards}
@keyframes notifOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes notifOverlayOut{from{opacity:1}to{opacity:0}}
.notif-detail-box{width:100%;max-width:680px;min-width:320px;border-radius:16px;box-shadow:0 20px 45px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.2);position:relative;overflow:hidden;padding:16px;background-image:repeating-linear-gradient(-45deg,#ef4444 0px,#ef4444 16px,#fff 16px,#fff 32px,#2563eb 32px,#2563eb 48px,#fff 48px,#fff 64px)}
.notif-detail-overlay.opening .notif-detail-box{animation:notifLetterIn .45s cubic-bezier(.34,1.56,.64,1) forwards}
.notif-detail-overlay.closing .notif-detail-box{animation:notifLetterOut .25s ease forwards}
@keyframes notifLetterIn{0%{opacity:0;transform:translateY(40px) scale(.92)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes notifLetterOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(30px) scale(.95)}}
.notif-detail-inner{background:#fff;border-radius:10px;padding:36px 40px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);position:relative;min-height:200px;display:flex;flex-direction:column;overflow:hidden}
.notif-detail-inner::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:260px;height:260px;background-image:url('pictures/logoweb.webp');background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.12;pointer-events:none;z-index:0}
.notif-detail-header{border-bottom:2px solid #f1f5f9;padding-bottom:18px;margin-bottom:22px;position:relative;z-index:1}
.notif-detail-header h3{margin:0;font-size:20px;font-weight:800;color:#0f172a;line-height:1.4}
.notif-detail-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px;font-size:14px;color:#64748b;position:relative;z-index:1}
.notif-detail-sender{display:flex;align-items:center;gap:12px}
.notif-detail-sender-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 3px 8px rgba(79,70,229,.3);flex-shrink:0}
.notif-detail-sender-name{font-weight:700;color:#0f172a;font-size:14.5px}
.notif-detail-body{font-size:15.5px;color:#334155;line-height:22px;flex:1;position:relative;z-index:1;word-break:break-word;min-height:264px;background-image:repeating-linear-gradient(transparent,transparent 21px,#e2e8f0 21px,#e2e8f0 22px);background-position:0 -1px}
.notif-detail-body p{margin:0}

.notif-detail-date{font-weight:500}
.notif-detail-x{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:rgba(0,0,0,.06);color:#64748b;font-size:20px;font-weight:700;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;transition:all .2s ease;line-height:1}
.notif-detail-x:hover{background:rgba(239,68,68,.12);color:#ef4444;transform:scale(1.1)}
.notif-detail-x:active{transform:scale(.95)}








@media(max-width:700px){
    .header-user .header-location,
    .header-user .header-time { display:none; }
    .header-user { gap:6px; }
    #tabScrollTopBtn { right:20px; left:auto; }
}
/* ===== HAMBURGER ===== */
.hamburger {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:36px; height:36px;
    background:none; border:none;
    cursor:pointer;
    padding:6px;
    border-radius:8px;
    flex-shrink:0;
}
.hamburger span {
    display:block;
    width:100%; height:2.5px;
    background:#333;
    border-radius:2px;
    transition:all 0.3s;
}

.hamburger:hover { background:rgba(0,0,0,0.06); }

@media(max-width:700px){
    .hamburger { display:none !important; }
    .menu {
        position:relative;
        gap:0;
        padding:8px 10px;
        z-index:9999;
    }
    .menu-brand {
        flex:0 0 auto !important;
        margin-right:8px;
    }
    .menu-brand img { width:34px; height:34px; }
    .menu-buttons {
        display:flex !important;
        position:static;
        flex:1 1 0;
        min-width:0;
        overflow-x:auto;
        overflow-y:hidden;
        gap:4px;
        padding:0 6px;
        background:none;
        backdrop-filter:none;
        box-shadow:none;
        border-radius:0;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;
    }
    .menu-buttons::-webkit-scrollbar { display:none; }
    .menu-buttons .nav-link {
        padding:8px 14px;
        border-radius:8px;
        font-size:13px;
        scroll-snap-align:start;
        flex:0 0 auto;
    }
    .header-user .user-text { display:none; }
    .header-user .header-location,
    .header-user .header-time { display:none; }
    .header-user { gap:0; margin-left:auto; flex:0 0 auto; }
    .avatar-box { width:34px; height:34px; }
    .avatar-box img { width:100%; height:100%; }
}
/* ===== SUBJECT TABS (phong-hoc) ===== */
.subject-tabs {
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:10px 0 14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}
.subject-tabs::-webkit-scrollbar { display:none; }
.subject-tab {
    flex:0 0 auto;
    padding:8px 18px;
    border-radius:20px;
    font-size:14px;
    font-weight:600;
    border:2px solid #e0e0e0;
    background:#fff;
    color:#555;
    cursor:pointer;
    white-space:nowrap;
    transition:all 0.2s;
}
.subject-tab:hover { border-color:#ff6b35; color:#ff6b35; }
.subject-tab.active { background:#ff6b35; color:#fff; border-color:#ff6b35; }



.subject-panel { display:none; animation:fadeTab 0.25s ease; }
.subject-panel.active { display:block; }
@keyframes fadeTab {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}

/* CONTENT */

.content{
max-width:1100px;
margin:auto;
padding:15px 20px 30px;
}
.fade-out{
opacity:0;
transform:translateY(6px); /* giảm distance */
transition:all 0.18s ease;
}

.fade-in{
opacity:1;
transform:translateY(0);
transition:all 0.22s ease;
}
/* GRID */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}

/* CARD */
.card{
  position: relative;
  will-change: transform;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, white 86%, var(--card-color) 14%),
    color-mix(in srgb, #f8fbff 76%, var(--card-color) 24%)
  );
  background-clip: padding-box;
  padding:22px;
  border-radius:14px;
  border:2px solid color-mix(in srgb, var(--card-color) 46%, #dbe4ff);
  border-left-width:7px;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  opacity:0;
  transform:translateY(14px);
  animation:cardFadeUp 0.45s ease forwards;
  padding-bottom: 60px !important;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--card-color) 14%, transparent),
    transparent 38%
  );
  opacity:0.9;
}
.card:hover::before{
  opacity:1;
}
.card::after{
  content:none;
}
.card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--card-color) 70%, #cbd5e1);
  background:linear-gradient(
    135deg,
    color-mix(in srgb, white 82%, var(--card-color) 18%),
    color-mix(in srgb, #f8fbff 68%, var(--card-color) 32%)
  );
  box-shadow:0 10px 24px color-mix(in srgb, var(--card-color) 18%, transparent);
  z-index:1;
}
.card.active-card{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--card-color) 72%, #cbd5e1);
  background:linear-gradient(
    135deg,
    color-mix(in srgb, white 80%, var(--card-color) 20%),
    color-mix(in srgb, #f8fbff 64%, var(--card-color) 36%)
  );
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--card-color) 24%, transparent),
    0 0 0 2px color-mix(in srgb, var(--card-color) 22%, white);
  z-index:1;
}

.card.active-card::before{
  opacity:1;
}
.card:hover::after{
  content:none;
}

/* text polish */
.card h3{
  margin-top:0;
  color: color-mix(in srgb, #0f172a 72%, var(--card-color) 28%);
  font-weight:700;
}
.card p{
  color: color-mix(in srgb, #475569 78%, var(--card-color) 22%);
  font-size:14px;
}






@keyframes cardFadeUp{
from{
  opacity:0;
  transform:translateY(14px);
}
to{
  opacity:1;
  transform:translateY(0);
}
}
.card:nth-child(1){ animation-delay:0.05s; }
.card:nth-child(2){ animation-delay:0.12s; }
.card:nth-child(3){ animation-delay:0.19s; }
.card:nth-child(4){ animation-delay:0.26s; }
.card:nth-child(5){ animation-delay:0.33s; }
.card:nth-child(6){ animation-delay:0.40s; }
.card:nth-child(7){ animation-delay:0.47s; }
.card:nth-child(8){ animation-delay:0.54s; }
/* BUTTON */

.btn{
display:inline-block;
margin-top:10px;
padding:10px 20px;
background:linear-gradient(
  135deg,
  color-mix(in srgb, var(--card-color) 88%, white 12%),
  color-mix(in srgb, var(--card-color) 70%, #2563eb 30%)
);
color:white;
text-decoration:none;
border-radius:8px;
cursor:pointer;
font-size:14px;
font-weight:500;
transition:all 0.25s ease;
box-shadow:0 8px 18px color-mix(in srgb, var(--card-color) 26%, transparent);
}

.btn:hover{
transform:translateY(-2px) scale(1.05);
box-shadow:0 10px 24px color-mix(in srgb, var(--card-color) 34%, transparent);
}



/* QUIZ */

.quiz-box {
    margin-top: 50px;
    background: white;
    padding: 0;                /* Đổi từ 12px về 0 để iframe sát mép */
    border-radius: 0;          /* Nếu muốn phẳng hoàn toàn, còn không cứ để 12px nếu thích bo góc */
    box-shadow: none;          /* Xóa bỏ đổ bóng (thứ trông như viền mờ) */
    border: none;              /* Đảm bảo không có border ẩn */
    position: relative;
    height: 100vh;
    overflow: hidden;          /* Không cho iframe tràn ra gây scrollbar */
}


iframe {
  width: 100%;
  border: none !important;    /* Xóa viền */
  outline: none !important;   /* Xóa khung tập trung khi click */
  will-change: transform;      /* Giúp cuộn mượt hơn trên mobile */
  display: block;              /* Loại bỏ khoảng hở dư dưới đáy iframe */
  max-width: 100%;
}

.flashcard-frame-shell{
  width:100%;
  height:calc(100vh - 180px);
  min-height:720px;
  background:transparent;
  border:none;
  margin:0;
  padding:0;
}

.flashcard-frame-shell iframe{
  width:100%;
  height:100%;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent;
}


#tabScrollTopBtn{
  position:fixed;
  right:20px;
  bottom:22px;
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:20px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(37,99,235,0.35);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
}

#tabScrollTopBtn:hover{
  transform:translateY(-2px) scale(1.05);
}

/* POPUP */

#popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(15,23,42,0.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:3000;
  padding:20px;
  animation: popupOverlayIn 0.3s ease;
}

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

.popup-box{
  background:#fff;
  border-radius:24px;
  width:100%;
  max-width:420px;
  position:relative;
  animation: popupBoxIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
  box-shadow:0 30px 80px rgba(15,23,42,0.3), 0 0 0 1px rgba(255,255,255,0.12), 0 0 60px rgba(99,102,241,0.12);
}

@keyframes popupBoxIn{
  from{
    transform:translateY(30px) scale(0.92);
    opacity:0;
  }
  to{
    transform:translateY(0) scale(1);
    opacity:1;
  }
}

.popup-close-btn{
  position:absolute;
  top:14px;
  right:14px;
  width:32px;
  height:32px;
  border:none;
  background:rgba(255,255,255,0.2);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.2s ease;
  z-index:2;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.popup-close-btn:hover{
  background:#ef4444;
  color:#fff;
  transform:scale(1.1);
}
.popup-close-btn:active{
  transform:scale(0.95);
}

.popup-header{
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 55%,#9333ea 100%);
  padding:24px 24px 20px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.popup-header::before{
  content:"";
  position:absolute;
  top:-46px;
  right:-34px;
  width:140px;
  height:140px;
  background:rgba(255,255,255,0.09);
  border-radius:50%;
}
.popup-header::after{
  content:"";
  position:absolute;
  bottom:-56px;
  left:-24px;
  width:120px;
  height:120px;
  background:rgba(255,255,255,0.06);
  border-radius:50%;
}

.popup-icon{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  background:rgba(255,255,255,0.2);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.22);
  box-shadow:0 10px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
  position:relative;
  z-index:1;
  animation: popupIconFloat 3s ease-in-out infinite;
}

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

.popup-header h3{
  margin:0;
  font-size:21px;
  font-weight:800;
  color:#fff;
  letter-spacing:-0.3px;
  position:relative;
  z-index:1;
  text-shadow:0 1px 8px rgba(0,0,0,0.15);
}

.popup-body{
  padding:24px 26px 20px;
  text-align:center;
}

.popup-body p{
  margin:0;
  font-size:14.5px;
  line-height:1.7;
  color:#475569;
  word-break:break-word;
}

.popup-body p b{
  color:#1e3a8a;
  font-weight:700;
}

.popup-footer{
  padding:0 26px 26px;
  display:flex;
  justify-content:center;
}

.popup-confirm-btn{
  width:100%;
  padding:13px 0;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.25s ease;
  box-shadow:0 8px 22px rgba(99,102,241,0.35);
  font-family:inherit;
}
.popup-confirm-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(99,102,241,0.45);
  filter:brightness(1.05);
}
.popup-confirm-btn:active{
  transform:translateY(0) scale(0.98);
}





.close{
position:absolute;
top:10px;
right:15px;
font-size:24px;
cursor:pointer;
}

@keyframes popupShow{
from{
  transform:translateY(-40px) scale(0.9);
  opacity:0;
}
to{
  transform:translateY(0) scale(1);
  opacity:1;
}
}

.popup-hide{
animation: popupHide 0.3s ease forwards;
}

@keyframes popupHide{
from{
  transform:translateY(0) scale(1);
  opacity:1;
}
to{
  transform:translateY(-40px) scale(0.9);
  opacity:0;
}
}

#loginBox{
position:relative;
display:none;
flex-direction:column;
align-items:stretch;
justify-content:stretch;
background:#f9fafb;
z-index:1000001;
}

#loginBox .auth-shell{
width:100%;
height:100vh;
min-height:100vh;
max-width:100vw;
display:flex;
overflow:hidden;
border-radius:0;
background:#ffffff;
box-shadow:none;
border:none;
}

#loginBox .auth-left{
width:50%;
min-width:0;
background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
padding:60px;
display:flex;
flex-direction:column;
justify-content:center;
}

#loginBox .auth-right-form{
width:50%;
min-width:0;
background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
padding:60px;
display:flex;
flex-direction:column;
justify-content:center;
}

#loginBox .auth-brand{
display:flex;
align-items:center;
gap:14px;
margin-bottom:20px;
}

#loginBox .auth-brand img{
width:48px;
height:48px;
object-fit:cover;
border-radius:14px;
box-shadow:0 10px 24px rgba(37,99,235,0.18);
}

#loginBox .auth-brand span{
font-size:21px;
font-weight:800;
line-height:1.25;
color:#2563eb;
min-width:0;
word-break:break-word;
}

#loginBox .auth-tabs{
display:flex;
gap:10px;
margin-bottom:22px;
}

#loginBox .auth-tab{
flex:1;
padding:11px 14px;
text-align:center;
border-radius:12px;
background:#eef2ff;
color:#475569;
font-weight:600;
cursor:pointer;
transition:all .2s ease;
}

#loginBox .auth-tab.active{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
box-shadow:0 10px 24px rgba(37,99,235,0.22);
}

#loginBox .auth-title{
font-size:30px;
font-weight:800;
line-height:1.2;
margin-bottom:24px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}


#loginBox .auth-panel{
display:block;
animation: authPanelFadeIn 0.5s ease forwards;
}

@keyframes authPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#loginBox .auth-login-btn,
#loginBox .auth-submit{
width:100%;
border:none;
cursor:pointer;
border-radius:16px;
transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}

#loginBox .auth-login-btn{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:15px 18px;
font-size:16px;
font-weight:600;
background:#fff;
border:1px solid #e2e8f0;
box-shadow:0 10px 24px rgba(15,23,42,0.08);
min-width:0;
}

#loginBox .auth-login-btn img{
width:22px;
height:22px;
}

#loginBox .auth-login-btn:hover,
#loginBox .auth-submit:hover{
transform:translateY(-2px);
box-shadow:0 16px 32px rgba(15,23,42,0.12);
}

#loginBox .auth-login-btn:active,
#loginBox .auth-submit:active{
transform:translateY(0) scale(0.98);
}

#loginBox .auth-login-btn:disabled,
#loginBox .auth-submit:disabled{
opacity:0.7;
cursor:not-allowed;
transform:none;
}

#loginBox .auth-divider{
text-align:center;
margin:20px 0;
color:#94a3b8;
font-size:14px;
}

#loginBox .auth-input-group{
position:relative;
margin-bottom:16px;
}

#loginBox .auth-input-group input{
width:100%;
padding:15px 18px;
border-radius:16px;
border:1.5px solid #e2e8f0;
outline:none;
font-size:14px;
background:rgba(255,255,255,0.9);
transition:border-color .25s ease, box-shadow .25s ease;
}

#loginBox .auth-input-group label{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
padding:0 6px;
font-size:14px;
color:#94a3b8;
background:transparent;
pointer-events:none;
transition:all .25s ease;
}

#loginBox .auth-input-group input:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,0.12), 0 4px 12px rgba(37,99,235,0.08);
}

#loginBox .auth-input-group input:focus + label,
#loginBox .auth-input-group input:valid + label{
top:-8px;
font-size:12px;
color:#2563eb;
background:#fff;
padding:0 4px;
border-radius:4px;
}

#loginBox .auth-submit{
padding:15px 18px;
font-size:15px;
font-weight:700;
color:#fff;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
box-shadow:0 8px 20px rgba(37,99,235,0.25);
}

#loginBox .auth-submit:hover{
box-shadow:0 12px 28px rgba(37,99,235,0.35);
}


#loginBox .auth-footer{
margin-top:12px;
font-size:13px;
text-align:center;
color:#94a3b8;
}

#loginBox .auth-right{
width:50%;
position:relative;
overflow:hidden;
background:#0f172a;
}

#loginBox .auth-header-bar{
position:absolute;
top:0;
left:0;
right:0;
padding:0;
z-index:10;
pointer-events:none;
}

#loginBox .auth-header-bar span{
font-size:21px;
font-weight:800;
color:#2563eb;
letter-spacing:-0.3px;
background:#fff;
padding:12px 28px;
border-radius:0 0 16px 0;
box-shadow:0 4px 20px rgba(0,0,0,0.15);
display:inline-block;
}

#loginBox .auth-slide{
position:absolute;
inset:0;
overflow:hidden;
opacity:0;
transform:scale(1.05);
transition:opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#loginBox .auth-slide.active{
opacity:1;
transform:scale(1);
}

/* Gradient overlay animation */
#loginBox .auth-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(37,99,235,0.1) 0%, transparent 50%, rgba(139,92,246,0.15) 100%);
  opacity:0;
  transition:opacity 0.8s ease;
  z-index:2;
  pointer-events:none;
}

#loginBox .auth-slide.active::after{
  opacity:1;
  animation:gradientShift 6s ease-in-out infinite alternate;
}

@keyframes gradientShift{
  from{
    background:linear-gradient(135deg, rgba(37,99,235,0.15) 0%, transparent 50%, rgba(139,92,246,0.1) 100%);
  }
  to{
    background:linear-gradient(225deg, rgba(139,92,246,0.15) 0%, transparent 50%, rgba(37,99,235,0.1) 100%);
  }
}

#loginBox .auth-bg-blur{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
filter:blur(24px);
opacity:0.78;
}



#loginBox .auth-bg-main{
position:absolute;
inset:0;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
z-index:2;
}



#loginBox .auth-overlay{
position:absolute;
left:56px;
right:56px;
bottom:56px;
color:#fff;
z-index:3;
}

#loginBox .auth-overlay h1{
font-size:34px;
font-weight:800;
line-height:1.15;
margin:0 0 10px;
}

#loginBox .auth-overlay p{
font-size:16px;
line-height:1.6;
margin:0;
color:rgba(255,255,255,0.88);
transition:opacity .4s ease;
}

/* ===== STAGGERED TEXT REVEAL ===== */
#loginBox .auth-overlay h1 .char{
  display:inline-block;
  opacity:0;
  transform:translateY(20px);
  animation:charReveal 0.5s ease forwards;
}

@keyframes charReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

#loginBox .auth-overlay .desc-reveal{
  opacity:0;
  transform:translateY(15px);
  animation:descReveal 0.6s ease 0.4s forwards;
}

@keyframes descReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

#loginBox .auth-mobile-showcase{
display:none;
position:relative;
margin:0 0 16px;
width:100%;
height:178px;
border-radius:22px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.5);
box-shadow:0 18px 40px rgba(37,99,235,0.12);
background:linear-gradient(135deg,#dbeafe,#eef4ff);
}

#loginBox .auth-mobile-slide{
position:absolute;
inset:0;
opacity:0;
transform:scale(1.04);
transition:opacity .7s ease, transform 2s ease;
}

#loginBox .auth-mobile-slide.active{
opacity:1;
transform:scale(1);
}

#loginBox .auth-mobile-blur,
#loginBox .auth-mobile-main{
position:absolute;
inset:0;
background-position:center;
background-repeat:no-repeat;
}

#loginBox .auth-mobile-blur{
background-size:cover;
filter:blur(14px);
transform:scale(1.08);
opacity:.8;
}

#loginBox .auth-mobile-main{
background-size:cover;
z-index:1;
}

#loginBox .auth-mobile-caption{
position:absolute;
left:12px;
right:12px;
bottom:12px;
z-index:3;
padding:11px 12px;
border-radius:16px;
background:rgba(255,255,255,0.72);
backdrop-filter:blur(10px);
box-shadow:0 10px 24px rgba(15,23,42,0.10);
}

#loginBox .auth-mobile-caption strong{
display:block;
font-size:13px;
line-height:1.25;
color:#1e3a8a;
margin-bottom:2px;
}

#loginBox .auth-mobile-caption span{
display:block;
font-size:11px;
line-height:1.4;
color:#475569;
}




@media (max-width: 900px){
  #loginBox .auth-mobile-showcase{
    display:block;
  }
}

#loadingOverlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
padding:24px 16px;
box-sizing:border-box;
z-index:99999;
overflow:hidden;
}

/* Background gradient động cao cấp */
#loadingOverlay::before{
content:"";
position:absolute;
inset:-50%;
background:
  radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.3) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.25) 0%, transparent 50%),
  radial-gradient(ellipse at 40% 80%, rgba(34,211,238,0.2) 0%, transparent 50%),
  radial-gradient(ellipse at 60% 60%, rgba(236,72,153,0.15) 0%, transparent 50%);
animation: loadingBgRotate 20s linear infinite;
pointer-events:none;
z-index:0;
}

@keyframes loadingBgRotate{
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Lớp phủ mesh gradient */
#loadingOverlay::after{
content:"";
position:absolute;
inset:0;
background:
  radial-gradient(ellipse at 25% 25%, rgba(59,130,246,0.08) 0%, transparent 50%),
  radial-gradient(ellipse at 75% 75%, rgba(139,92,246,0.06) 0%, transparent 50%);
pointer-events:none;
z-index:0;
}

/* Loading content container - căn giữa màn hình */
.loading-content{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:24px;
width:100%;
max-width:520px;
padding:0 20px;
}

/* Animated dots container */
.loading-dots{
display:flex;
gap:15px;
justify-content:center;
align-items:center;
height:80px;
will-change: opacity, transform;
}

.loading-dot{
width:30px;
height:30px;
border-radius:50%;
background: linear-gradient(135deg, #3b82f6, #06b6d4);
will-change: transform, opacity;
/* Sử dụng transform và opacity để tối ưu performance */
box-shadow: 0 8px 24px rgba(59,130,246,0.3);
animation: dotWave 2s ease-in-out infinite;
}

.loading-dot:nth-child(1){ animation: dotWave 1.5s ease-in-out infinite 0s; }
.loading-dot:nth-child(2){ animation: dotWave 1.5s ease-in-out infinite 0.15s; }
.loading-dot:nth-child(3){ animation: dotWave 1.5s ease-in-out infinite 0.3s; }
.loading-dot:nth-child(4){ animation: dotWave 1.5s ease-in-out infinite 0.45s; }

/* Smooth wave animation using only transform and opacity */
@keyframes dotWave{
0%, 100%{
  transform: scale(0.5);
  opacity: 0.4;
}
50%{
  transform: scale(1.1);
  opacity: 1;
}
}


/* Fast animation when done - smoother transition */
.loading-dots.speed-up .loading-dot{
animation-duration: 0.25s;
animation-timing-function: ease-out;
}

/* Dừng animation khi hoàn thành */
.loading-dots.fade-out{
opacity: 0;
transform: scale(0.9);
transition: opacity 0.35s ease-out, transform 0.35s ease-out;
pointer-events: none;
}
/* ===== NEW: DOT SHRINK OUT ===== */
@keyframes dotShrinkOut{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(0.2);
    opacity: 0;
  }
}

.loading-dots.shrink-out .loading-dot{
  animation: dotShrinkOut 0.35s ease-out forwards !important;
}
.loading-dots.stop-animation .loading-dot{
  animation-play-state: paused;
}
.loading-dot{
  animation-fill-mode: both;
}
.loading-dots.shrink-out .loading-dot:nth-child(1){animation-delay:0s;}
.loading-dots.shrink-out .loading-dot:nth-child(2){animation-delay:0.05s;}
.loading-dots.shrink-out .loading-dot:nth-child(3){animation-delay:0.1s;}
.loading-dots.shrink-out .loading-dot:nth-child(4){animation-delay:0.15s;}
/* Hiệu ứng chuyển màu xanh lá khi hoàn thành */
.loading-dots.done .loading-dot{
background: linear-gradient(135deg, #22c55e, #16a34a);
box-shadow: 0 0 12px rgba(59,130,246,0.6),
              0 0 24px rgba(6,182,212,0.4);
transition: background 0.5s ease, box-shadow 0.5s ease;
}

/* Hiệu ứng dạt ra hai bên giống mở cổng */
.loading-dots.slide-apart{
justify-content: center;
gap: 120px;
transition: gap 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-dots.slide-apart .loading-dot:nth-child(1){
transform: translateX(-80px) translateY(-20px);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-dots.slide-apart .loading-dot:nth-child(2){
transform: translateX(-40px) translateY(-40px);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-dots.slide-apart .loading-dot:nth-child(3){
transform: translateX(40px) translateY(-40px);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-dots.slide-apart .loading-dot:nth-child(4){
transform: translateX(80px) translateY(-20px);
transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Status text */
#loadingText{
margin:0;
font-size:17px;
color: #1e293b;
font-weight:600;
letter-spacing:0.02em;
transition: opacity 0.35s ease-out;
min-height: 28px;
text-align:center;
line-height:1.5;
will-change: opacity;
}

/* Logo emphasize when done */
.loading-brand.emphasize img{
transform: scale(1.15);
opacity: 1;
filter: brightness(1.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-brand.emphasize h2{
opacity: 1;
filter: brightness(1.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading brand với logo */
.loading-brand{
  text-align:center;
  margin-bottom:20px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-brand img{
  width:min(100px, 24vw);
  height:auto;
  max-height:110px;
  object-fit:contain;
  margin-bottom:14px;
  border-radius:24px;
  box-shadow:
    0 20px 50px rgba(37,99,235,0.2),
    0 0 40px rgba(59,130,246,0.1);
  animation: logoFloat 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.loading-brand img:hover{
  transform: scale(1.05) rotate(2deg);
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-6px) rotate(1deg);
  }
  75% {
    transform: translateY(-3px) rotate(-1deg);
  }
}

.loading-brand h2{
  margin:0;
  font-size:clamp(16px, 4vw, 20px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-0.01em;
  background:linear-gradient(135deg, #1e40af, #3b82f6, #06b6d4, #7c3aed);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: textGradientShift 4s ease-in-out infinite;
}

@keyframes textGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Logo ẩn lúc đầu, hiện ra khi done */
.loading-brand.initially-hidden{
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.loading-brand.initially-hidden img,
.loading-brand.initially-hidden h2{
  animation: none !important;
}

/* Logo emphasize khi done */
.loading-brand.emphasize{
  opacity: 1 !important;
  transform: scale(1.1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.loading-brand.emphasize img{
  transform: scale(1);
  animation: none !important;
  box-shadow:
    0 20px 50px rgba(37,99,235,0.4),
    0 0 60px rgba(59,130,246,0.2);
}

.loading-brand.emphasize h2{
  animation: none !important;
  -webkit-text-fill-color: #1e40af;
  background: none;
  color: #1e40af;
}

.loading-footer{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  opacity:0.6;
  z-index:2;
  font-size:12px;
  color: #64748b;
  letter-spacing:0.03em;
}

















#loadingOverlay.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ===== DEEP LINK OVERLAY - màn che loading khi mở bài test qua deep link ===== */
#deepLinkOverlay{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(10,14,22,.55);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.deep-link-box{
  background:var(--bg, #ffffff);
  border-radius:var(--r-md, 16px);
  padding:32px 44px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  max-width:min(92vw, 380px);
}
#deepLinkOverlay .loading-dots{
  height:60px;
}
#deepLinkOverlay .loading-dot{
  width:22px;
  height:22px;
}
#deepLinkText{
  margin:12px 0 0;
  font-size:15px;
  font-weight:600;
  color:var(--text, #1f2937);
}
body.dark-mode .deep-link-box{
  background:var(--bg, #111827);
}
body.dark-mode #deepLinkText{
  color:var(--text, #f3f4f6);
}

/* ===== MAIN CONTENT TRANSITION - PERFORMANCE OPTIMIZED ===== */
#mainContent{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.4s ease-out, transform 0.4s ease-out;
}

#mainContent.show{
  opacity:1;
  transform:translateY(0);
}

/* ===== ENTRANCE ANIMATIONS - ULTRA LIGHTWEIGHT ===== */
/* Only animate essential elements for smooth performance */
body.app-ready .menu,
body.app-ready #userBox,
body.app-ready #chatButton{
  opacity:0;
  transform:translateY(6px);
  will-change:opacity, transform;
  animation:appReveal 0.35s ease-out forwards;
}

/* Stagger delays - minimal for snappy feel */
body.app-ready .menu{ animation-delay:0.05s; }
body.app-ready #userBox{ animation-delay:0.12s; }
body.app-ready #chatButton{ animation-delay:0.20s; }

/* Ticker and main content use simpler transition */
body.app-ready .ticker-container{
  opacity:0;
  transform:translateY(4px);
  will-change:opacity;
  animation:appReveal 0.3s ease-out forwards;
  animation-delay:0.08s;
}

body.app-ready #mainContent.show{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.3s ease-out, transform 0.3s ease-out;
}

@keyframes appReveal{
from{
  opacity:0;
  transform:translateY(6px);
}
to{
  opacity:1;
  transform:translateY(0);
}
}

/* ===== MOBILE - MINIMAL ANIMATIONS ===== */
@media (max-width:768px){
  /* Only animate menu and user box on mobile */
  body.app-ready .menu,
  body.app-ready #userBox{
    opacity:0;
    transform:translateY(4px);
    animation:appReveal 0.2s ease-out forwards;
  }
  
  body.app-ready .menu{ animation-delay:0.02s; }
  body.app-ready #userBox{ animation-delay:0.06s; }
  
  /* No animation for ticker and chat button on mobile */
  body.app-ready .ticker-container,
  body.app-ready #chatButton{
    opacity:1;
    transform:none;
    animation:none;
  }
  
  /* Main content instant on mobile */
  body.app-ready #mainContent.show{
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.15s ease-out;
  }
}


@keyframes loadProgress{
0%{width:0%;}
100%{width:100%;}
}

.title-box{
text-align:left;
}

.title-box h1{
margin:0;
font-size:30px;
letter-spacing:2px;
font-weight:700;
}

.title-box p{
margin:2px 0 0 0;
font-size:13px;
opacity:0.9;
letter-spacing:1px;
}
*{
-webkit-tap-highlight-color: transparent; /* bỏ highlight khi bấm */
}

body{
overscroll-behavior-y:auto;
}
#currentTime {
margin-right: auto; 
font-size: 14px; 
font-weight: 600; 
color: var(--text-sub);
padding-left: 10px;
}

.user-right{
display:flex;
align-items:center;
gap:10px;
}
#onlineDot {
position: absolute;
bottom: 0;      /* Sửa từ 1px thành 0 */
right: 0;       /* Sửa từ 1px thành 0 */
width: 12px;    /* Tăng nhẹ kích thước cho đẹp */
height: 12px;
background: #22c55e;
border-radius: 50%;
border: 2px solid white; /* Viền trắng để tách biệt với ảnh đại diện */
z-index: 10;
}


/* Container chứa chấm và chữ */
.status {
    position: absolute;
    bottom: 22px; /* Căn xuống dưới */
    left: 20px;   /* Căn sang trái */
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
}

/* Tạo dấu chấm */
.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    animation: st_blink 1.5s infinite;
}

@keyframes st_blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Nội dung chữ và màu */
.status.done { color: #27ae60; }
.status.done::after { content: 'Hoàn thành'; }

.status.up { color: #e74c3c; }
.status.up::after { content: 'Đang cập nhật'; }

/* Đẩy nút Làm bài sang phải để không đè lên status */
.card .btn {
    position: absolute;
    bottom: 15px;
    right: 20px;
    margin: 0 !important;
    width: auto !important;
}

/* ================= THÔNG BÁO MÔN HỌC ================= */
.subject-notice{
  background: linear-gradient(135deg, color-mix(in srgb, var(--subject-color, #1a73e8) 15%, #fff), color-mix(in srgb, var(--subject-color, #1a73e8) 8%, #f8fbff));
  border-left: 5px solid var(--subject-color, #1a73e8);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 15px;
  color: color-mix(in srgb, #1e293b 85%, var(--subject-color, #1a73e8) 15%);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--subject-color, #1a73e8) 12%, transparent);
  animation: noticeSlideIn 0.5s ease, noticePulse 3s ease-in-out infinite 1s;
  backdrop-filter: blur(8px);
}

.subject-notice strong{
  color: var(--subject-color, #1a73e8);
  font-weight: 700;
  margin-right: 8px;
}

.subject-notice .notice-content{
  display: inline;
  font-weight: 500;
}

/* Animation khi hiện vào */
@keyframes noticeSlideIn{
  from{
    opacity: 0;
    transform: translateY(-10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation nhấp nháy nhẹ */
@keyframes noticePulse{
  0%, 100%{
    box-shadow: 0 4px 15px color-mix(in srgb, var(--subject-color, #1a73e8) 12%, transparent);
  }
  50%{
    box-shadow: 0 4px 20px color-mix(in srgb, var(--subject-color, #1a73e8) 20%, transparent);
  }
}

/* Dark mode */


/* Màu theo từng môn */
#ly .subject-notice{ --subject-color: #3b82f6; }
#sinh .subject-notice{ --subject-color: #16a34a; }
#tin .subject-notice{ --subject-color: #7c3aed; }
#su .subject-notice{ --subject-color: #ea580c; }
#hoa .subject-notice{ --subject-color: #dc2626; }
#anh .subject-notice{ --subject-color: #db2777; }
#bxh .subject-notice{ --subject-color: #0ea5e9; }
#flash .subject-notice{ --subject-color: #2563eb; }
#home .subject-notice{ --subject-color: #f97316; }
.ticker-container{
width:100%;
overflow:hidden;
background:linear-gradient(90deg,#1a73e8,#6a5cff);
color:white;
padding:12px 0;
font-family:"Segoe UI",Arial,sans-serif;
font-size:15px;
font-weight:600;
border-radius:0;
box-shadow:0 6px 15px rgba(0,0,0,0.25);
}


.ticker-text{
display:inline-block;
white-space:nowrap;
padding-left:100%;
animation:scrollText 18s linear infinite;
will-change:transform;
}

/* Dừng lại khi di chuột lên dòng chữ chạy */
.ticker-container:hover .ticker-text{
animation-play-state:paused;
}

@keyframes scrollText{
from{
transform:translateX(0);
}
to{
transform:translateX(-100%);
}
}

/* Mobile: tốc độ lấy từ cấu hình admin (set inline qua JS), không override nữa */
@media (prefers-reduced-motion:reduce){
  .ticker-text{
    animation:none;
    padding-left:16px;
  }
}
.loader{
padding:20px 16px;
max-width:420px;
margin:0 auto;
}

/* ===== SKELETON LOADING (thay spinner khi mở quiz/module trong iframe) =====
   Chỉ dùng animation trên background-position của vài khối nhỏ, rẻ hơn nhiều
   so với spinner border xoay liên tục + nhẹ hơn hẳn so với để trắng trơn. */
.skel-bar{
  background: linear-gradient(90deg, #e2e9f5 25%, #f2f6fc 37%, #e2e9f5 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeletonShimmer{
  0%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.skel-quiz-topbar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:16px;
}
.skel-quiz-card{
  width:100%;
  height:150px;
  border-radius:20px;
  margin-bottom:14px;
}
.skel-quiz-row{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* avatar */
.user-bar img{
width:36px;
height:36px;
border-radius:50%;
margin-left:8px;

border:2px solid #fff;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

#userBox {
max-width: 1100px;
margin: 10px auto;
padding: 8px 20px;

display: flex;
align-items: center;

gap: 12px;

border-radius: 50px;
background: var(--menu-bg);
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.05);
}

#welcomeText{
color: var(--text-sub);
font-size:15px;
font-weight:400;
}

#userName{
font-weight:700;
font-size:18px;

background: linear-gradient(90deg,#3b82f6,#6366f1);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
}

/* avatar */
#userAvatar{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;

border:2px solid #fff;
box-shadow:0 2px 8px rgba(0,0,0,0.15);
}


@media (max-width:768px){
body{
--app-reveal-distance: 9px;
--app-reveal-duration: 0.36s;
}

/* chữ nhỏ lại */
.title{
font-size:18px;
}

/* padding card gọn lại */
.menu{
display:flex;
align-items:center;
justify-content:flex-start;
overflow:hidden;
padding:10px 12px;
gap:10px;
}

.menu-brand{
flex:0 0 auto;
min-width:auto;
gap:8px;
}

.menu-brand img{
width:38px;
height:38px;
}

.menu-buttons{
flex:1 1 auto;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
padding-left:0;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
}

.menu button{
flex-shrink:0;
white-space:nowrap;
scroll-snap-align:start;
padding:10px 16px;
font-size:14px;
}

/* ===== TỐI ƯU HIỆU NĂNG ===== */
.header,
.menu,
.card{
backdrop-filter:none !important;
}
.card.active-card{
    transform: translateY(-1px) !important;
    border-color: color-mix(in srgb, var(--card-color) 60%, #dbe4ff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-color) 18%, white);
  }
.card{
animation:none;
opacity:1;
transform:none;
}

.card:hover{
transform:translateY(-1px);
border-color: color-mix(in srgb, var(--card-color) 54%, #dbe4ff);
box-shadow:none;
}


body.app-ready #chatButton{
animation:none;
opacity:1;
transform:none;
}

html,
body{
overscroll-behavior-y:auto;
-webkit-overflow-scrolling:touch;
touch-action:auto;
}

/* ===== MENU SCROLL NGANG ===== */
.menu{
overflow:visible;
}
.menu.nav-open{
overflow:visible;
}

.menu-buttons{
overflow-x:auto;
scroll-snap-type:x mandatory;
}

/* ===== USER BOX (FIX CHÍNH) ===== */
#userBox{
display:flex;
width: 95%; /* Trên mobile thì chiếm gần hết chiều ngang */
justify-content:flex-end; /* 🔥 dồn phải */
align-items:center;
margin: 10px auto;
gap:6px;
padding:6px 12px;
flex-wrap:nowrap; /* 🔥 không cho xuống dòng */
}

.user-text{
display:flex;
flex-direction:row;
align-items:flex-end; /* 🔥 căn phải */
line-height:1.2;
gap: 6px;
}

#welcomeText{
font-size:14px;
opacity:0.8;
}

#userName{
font-size:15px;
font-weight:600;
}

#userAvatar{
width:34px;
height:34px;
}

#currentTime{
display:none;
}

.title{
font-size:18px;
}

/* ===== MOBILE PERFORMANCE GUARD ===== */
.header{
animation:none;
background-size:100% 100%;
}

/* Tốc độ mobile = desktop (JS sẽ tự co thời lượng theo bề ngang màn hình) */
.ticker-text{
animation:scrollText 18s linear infinite;
}

/* Loading overlay tối ưu cho mobile */
#loadingOverlay{
animation:none;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:
  radial-gradient(ellipse 80% 50% at 15% 10%, rgba(56,189,248,0.15), transparent 50%),
  radial-gradient(ellipse 70% 45% at 88% 15%, rgba(99,102,241,0.12), transparent 48%),
  linear-gradient(165deg, #eef4ff 0%, #e2ebff 45%, #d8e4ff 100%);
}

#loadingOverlay::before,
#loadingOverlay::after{
display:none !important;
}

.loading-box{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
animation:none !important;
box-shadow:0 8px 24px rgba(37,99,235,0.08);
}

/* Tắt animation không cần thiết trên mobile */
.loading-brand img,
.progress-bar::before,
.progress-fill,
#loadingText,
.online-pulse,
.status::before{
animation:none !important;
}

.progress-fill{
background-size:100% 100%;
background: linear-gradient(90deg, #3b82f6, #06b6d4);
}

.progress-fill::after{
display:none !important;
}

.card,
.btn,
.menu button{
transition-duration:0.12s;
}

#chatButton{
width:56px;
height:56px;
box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

#chatbotFrame{
left:4vw !important;
width:min(92vw, 360px) !important;
height:min(62vh, 500px) !important;
bottom:84px !important;
}

/* Tablet adjustments */

}

/* ===== CHATBOT WINDOW - HIỆU ỨNG MỞ =====
   Chạy mỗi khi #chatbotFrame / #chatOverlay chuyển display:none -> block.
   Bật "Giảm chuyển động" (body.cc-reduced) => mở ngay lập tức, không animation. */
#chatbotFrame{
  animation:lhChatPop 0.25s ease-out;
  transform-origin:right bottom;
}
#chatOverlay{
  animation:lhChatFade 0.2s ease-out;
}
@keyframes lhChatPop{
  from{opacity:0;transform:scale(0.92) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes lhChatFade{
  from{opacity:0;}
  to{opacity:1;}
}
body.cc-reduced #chatbotFrame,
body.cc-reduced #chatOverlay{
  animation:none !important;
}
@media (prefers-reduced-motion: reduce){
  #chatbotFrame,
  #chatOverlay{
    animation:none !important;
  }
}

/* ===== LOGIN/REGISTER MOBILE ===== */
@media (max-width: 900px){
  #loginBox .auth-shell{
    height:auto;
    min-height:0;
    border-radius:0;
  }

  #loginBox .auth-left{
    width:100%;
    max-width:100vw;
    padding:28px 22px 30px;
    justify-content:flex-start;
    overflow-y:auto;
  }

  #loginBox .auth-right{
    display:none;
  }
}

@media (max-width: 600px){
  #loginBox .auth-left{
    padding:18px 14px 24px;
  }

  #loginBox .auth-brand{
    gap:10px;
    margin-bottom:16px;
    padding:0 2px;
  }

  #loginBox .auth-brand img{
    width:36px;
    height:36px;
  }

  #loginBox .auth-brand span{
    font-size:14px;
    line-height:1.25;
  }

  #loginBox .auth-tabs{
    gap:8px;
    margin-bottom:14px;
  }

  #loginBox .auth-tab{
    padding:11px 8px;
    font-size:14px;
    border-radius:14px;
  }

  #loginBox .auth-title{
    font-size:22px;
    margin-bottom:18px;
  }

  #loginBox .auth-login-btn,
  #loginBox .auth-submit{
    font-size:14px;
  }

  #loginBox .auth-login-btn{
    padding:13px 12px;
    gap:10px;
    border-radius:15px;
  }

  #loginBox .auth-divider{
    margin:16px 0;
    font-size:13px;
  }

  #loginBox .auth-input-group{
    margin-bottom:12px;
  }

  #loginBox .auth-input-group input{
    padding:14px 12px;
    border-radius:14px;
    font-size:14px;
  }

  #loginBox .auth-input-group label{
    left:11px;
    font-size:13px;
  }

  #loginBox .auth-footer{
    font-size:12px;
    margin-top:18px;
  }
}

/* ===== END MOBILE CSS ===== */

/* Hiệu ứng nhấp nháy cho chấm Online */
@keyframes pulse-green {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.online-pulse {
animation: pulse-green 2s infinite;
}
.quiz-header{
  position: absolute;   /* 🔥 đổi từ sticky -> absolute */
  top: 10px;
  left: 0;
  width: 100%;
  z-index: 9999;
  border: none !important;    /* Xóa viền */
  outline: none !important;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none; /* 🔥 cho click xuyên */
}

.quiz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-width: 100px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    position: relative;
    z-index: 10;
}

.close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
    min-width: 70px !important;
    height: 32px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff4b2b, #ff416c) !important;
    border: none !important;
    box-shadow: 0 3px 6px rgba(255, 65, 108, 0.2) !important;
    cursor: pointer !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
    z-index: 101 !important;
    pointer-events: all !important;
}

.close-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 15px rgba(255, 65, 108, 0.4), 0 0 10px rgba(255, 75, 43, 0.2) !important;
    filter: brightness(1.1);
}

.close-btn::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.5s;
}

.close-btn:hover::after {
    left: 100%;
}

.close-btn:active {
    transform: translateY(1px) scale(0.97);
    box-shadow: 0 2px 4px rgba(255, 65, 108, 0.3) !important;
    filter: brightness(0.9);
}

.quiz-btn:active{
  transform: scale(0.96);
}

  /* Lớp nền tối mờ phủ mịn toàn màn hình phía sau */
  .lh-popup-overlay {
    display: none; /* Mặc định ẩn */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.55); /* Tăng độ sâu cho lớp nền */
    backdrop-filter: blur(8px); /* Làm mờ phần nội dung web phía sau cực mịn */
    z-index: 99999; /* Đảm bảo luôn nổi lên trên cùng hệ thống */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }

  /* Khung chứa Popup Premium mượt mà */
  .lh-popup-content {
    position: relative;
    width: 100%;
    max-width: 480px; /* Tăng nhẹ 20px giúp form thở thoải mái, không bị gò bó */
    height: 595px;    /* Chiều cao chuẩn ôm trọn form và dải gradient */
    background: #ffffff;
    border-radius: 24px; /* Bo góc mềm mại hơn */
    
    /* Hệ thống đổ bóng đa tầng (SaaS Soft Shadow) tạo độ nổi khối chân thực */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 
                0 25px 50px -12px rgba(0, 0, 0, 0.22);
                
    /* Cắt gọn gàng các thành phần bên trong (iframe, line gradient) không cho tràn góc vuông */
    overflow: hidden; 
    border: 1px solid rgba(255, 255, 255, 0.8);
    
    /* Hiệu ứng trồi lên và bung nhẹ theo chuẩn chuyển động Apple */
    animation: popupSpring 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  /* Cấu hình khung nhúng iframe đọc file gop-y.html */
  .lh-popup-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }

  /* Nút đóng (X) thiết kế tinh tế dạng nút dẹp chìm vào giao diện */
  .lh-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    background: #f1f5f9; /* Nền xám nhẹ tối giản */
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
  }

  .lh-popup-close:hover {
    background: #fee2e2; /* Đổi sang đỏ nhẹ khi hover */
    color: #ef4444;
    transform: scale(1.08);
  }

  /* Kịch bản chuyển động trồi mượt mà từ dưới lên */
  @keyframes popupSpring {
    from { 
      transform: scale(0.93) translateY(20px); 
      opacity: 0; 
    }
    to { 
      transform: scale(1) translateY(0); 
      opacity: 1; 
    }
  }
/* ==================== CSS CHO SLIDESHOW VÀ KHUNG GIỚI THIỆU MỚI ==================== */
.slideshow-wrapper {
  display: grid;
  grid-template-columns: 60% 40%;
  background: var(--card-bg); /* SỬA THÀNH CÁI NÀY (Thay vì mã #fff tĩnh) */
  border: 1px solid var(--footer-border); /* Dùng biến viền tối của dự án */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  margin-bottom: 30px;
  max-height: 500px; /* Tăng chiều cao tối đa */
}

.slide-media-side {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* Định dạng tỷ lệ chuẩn 16:9 */
  background-color: #000;
  overflow: hidden;
}

.slide-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.slide-img.active {
  opacity: 1;
  transform: scale(1);
}

.slide-info-side {
  padding: 60px 80px 45px 80px; /* Padding hợp lý để tạo không gian thoáng */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Đổi thành flex-start để căn từ trên */
  position: relative;
  background: var(--card-bg);
}

.slide-kicker {
  font-size: 22px; /* Tăng kích thước chữ to nhất */
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb; /* Màu xanh dương đặc trưng */
  margin-bottom: 25px;
  padding: 20px 0;
}

.slide-text-block {
  position: absolute;
  left: 100px; right: 100px; /* Tăng khoảng cách để không bị sát lề */
  top: 150px; /* Tăng top để nằm dưới slide-kicker */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out;
  z-index: 1; /* Đảm bảo z-index thấp hơn slide-kicker */
}

.slide-text-block.active {
  opacity: 1;
  visibility: visible;
}

.slide-text-block h2 {
  margin: 0 0 12px 0;
  font-size: 28px; /* Tăng kích thước chữ */
  font-weight: 700;
  color: var(--blue-accent);
  line-height: 1.3;
  transition: color 0.6s ease-in-out;
}

.slide-text-block p {
  margin: 0;
  font-size: 16px; /* Tăng kích thước chữ */
  color: var(--text-sub);
  line-height: 1.6;
  transition: color 0.6s ease-in-out;
}

/* Màu text thay đổi theo slide - chỉ đổi màu tiêu đề h2 */
.slide-text-block[data-text-color="#2563eb"].active h2 {
  color: #2563eb;
}

.slide-text-block[data-text-color="#16a34a"].active h2 {
  color: #16a34a;
}

.slide-text-block[data-text-color="#f59e0b"].active h2 {
  color: #f59e0b;
}

.slide-text-block[data-text-color="#7c3aed"].active h2 {
  color: #7c3aed;
}

.home-welcome-box {
  background: var(--card-bg);
  border: 1px solid var(--footer-border);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.01);
  margin-bottom: 30px;
}

.home-welcome-box h1 {
  margin: 0 0 12px 0;
  font-size: 25px;
  color: var(--blue-accent);
  font-weight: 800;
}

.home-welcome-box .subtitle {
  font-size: 15px;
  color: var(--text-sub);
  max-width: 800px;
  margin: 0 auto 25px auto;
  line-height: 1.6;
}

.hubie-introduce {
  display: flex;
  align-items: center;
  gap: 15px;
  background: var(--hubie-bg);
  border-radius: 14px;
  padding: 15px 20px;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.hubie-avatar {
  font-size: 32px;
  animation: hubieWave 2.5s infinite;
}

.hubie-content h4 {
  margin: 0 0 4px 0;
  color: var(--blue-accent);
  font-size: 14.5px;
}

.hubie-content p {
  margin: 0;
  font-size: 13.5px;
  color: var(--hubie-text);
  line-height: 1.4;
}

.home-details-full {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.info-card {
  background: var(--card-bg);
  border: 1px solid var(--footer-border);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.01);
}

.info-card h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--blue-accent);
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-card p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.6;
}

.purpose-list {
  margin: 15px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.purpose-list li {
  font-size: 14px;
  color: var(--text-sub);
  line-height: 1.5;
}

.dev-warning-text {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px dashed var(--warn-border);
  color: var(--warn-text);
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

@keyframes hubieWave {
  0%, 50%, 100% { transform: rotate(0deg) }
  10%, 30% { transform: rotate(14deg) }
  20% { transform: rotate(-8deg) }
  40% { transform: rotate(-4deg) }
}

/* ===== HUBIE ROW (Trợ lý ảo + Tính năng nổi bật) ===== */
.hubie-row {
  display: flex;
  gap: 15px;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hubie-row .hubie-introduce {
  flex: 1 1 50%;
  max-width: none;
  margin: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hubie-feature-card {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;
  background: var(--hubie-bg);
  border: 1px solid var(--footer-border);
  border-radius: 14px;
  padding: 15px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hubie-row .hubie-introduce:hover,
.hubie-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--footer-shadow);
}
.hubie-feat-icon {
  font-size: 32px;
  flex-shrink: 0;
  animation: hubieShake 2s ease-in-out infinite;
}
.hubie-feat-content {
  min-width: 0;
}
.hubie-feat-content h4 {
  margin: 0 0 4px 0;
  color: var(--blue-accent);
  font-size: 14.5px;
  font-weight: 700;
}
.hubie-feat-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.4;
}

@keyframes hubieShake {
  0%, 22%, 100% { transform: rotate(0) scale(1); }
  27% { transform: rotate(-12deg) scale(1.12); }
  34% { transform: rotate(10deg) scale(1.12); }
  41% { transform: rotate(-8deg) scale(1.06); }
  48% { transform: rotate(6deg) scale(1.06); }
  55% { transform: rotate(0) scale(1); }
}

@media (max-width: 768px) {
  .hubie-row {
    flex-direction: column;
  }
  .hubie-feature-card {
    flex: 1 1 auto;
  }
}

/* ==================== TÍNH NĂNG NỔI BẬT (FEATURED FEATURES) ==================== */
.featured-section {
  margin-bottom: 18px;
  padding: 22px 0 18px;
  background: var(--card-bg);
  border: 1px solid var(--footer-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px var(--footer-shadow);
  overflow: hidden;
}

.featured-header {
  text-align: center;
  margin-bottom: 14px;
}

.featured-header h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--blue-accent);
}

.featured-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-sub);
}

.feature-grid {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 26px 20px 18px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.feature-grid::-webkit-scrollbar {
  height: 0;
}

.feature-card {
  position: relative;
  flex: 0 0 258px;
  width: 258px;
  height: 220px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--card-bg);
  border: 1px solid var(--footer-border);
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-sizing: border-box;
  overflow: hidden;
  transform: scale(0.93);
  opacity: 0.8;
  transition: transform 0.35s ease, opacity 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.feature-card.active {
  transform: scale(1.05) translateY(-4px);
  opacity: 1;
  border-color: color-mix(in srgb, var(--feat-color, #2563eb) 60%, var(--footer-border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--feat-color, #2563eb) 35%, transparent),
    0 12px 22px color-mix(in srgb, var(--feat-color, #2563eb) 25%, transparent);
}

.feature-card:hover:not(.active) {
  transform: scale(0.98);
  opacity: 0.95;
}

.feature-card:hover .feature-link {
  gap: 10px;
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--feat-color, #2563eb);
  border-radius: 16px 16px 0 0;
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: color-mix(in srgb, var(--feat-color, #2563eb) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--feat-color, #2563eb) 26%, transparent);
  margin-bottom: 12px;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.feature-card.active .feature-icon {
  background: color-mix(in srgb, var(--feat-color, #2563eb) 22%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--feat-color, #2563eb) 28%, transparent);
}

.feature-card h3 {
  margin: 0 0 6px 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-main);
}

.feature-card p {
  margin: 0 0 12px 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-sub);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--feat-color, #2563eb);
  transition: gap 0.25s ease;
}

.feature-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

.feature-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--footer-border);
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.feature-dots .dot.active {
  width: 24px;
  background: var(--feat-dot, #2563eb);
}

@media (min-width: 1201px) {
  .feature-grid {
    /* The card strip is wider than its viewport: centering it creates an
       unreachable negative scroll offset and clips the first/last cards. */
    justify-content: flex-start;
  }
}

@media (max-width: 900px) {
  .feature-grid {
    gap: 14px;
  }
  .feature-card {
    flex-basis: 245px;
  }
}

@media (max-width: 600px) {
  .featured-section {
    padding: 18px 0 14px;
    border-radius: 18px;
  }

  .feature-grid {
    gap: 12px;
    padding: 32px 10px 12px;
  }
  .feature-card {
    flex-basis: 84%;
    transform: scale(0.96);
  }
  .feature-card.active {
    transform: scale(1.02) translateY(-2px);
  }
  .featured-header h2 {
    font-size: 18px;
  }
  .reveal-item {
    transform: translateY(14px);
    transition-duration: 0.4s;
  }
}

@media (hover: none) {
  .feature-card:hover:not(.active) {
    transform: scale(0.96);
    opacity: 0.8;
  }
}

/* ==================== HIỆU ỨNG HIỂN THỊ (REVEAL ON SCROLL) ==================== */
.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-item.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: các phần tử cùng lúc trong viewport sẽ依次 hiện theo thứ tự */
#home > .reveal-item:nth-child(1) { transition-delay: 0s; }
#home > .reveal-item:nth-child(2) { transition-delay: 0.12s; }
#home > .reveal-item:nth-child(3) { transition-delay: 0.24s; }
.home-details-full .reveal-item:nth-child(1) { transition-delay: 0.36s; }
.home-details-full .reveal-item:nth-child(2) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .reveal-item.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .feature-card,
  .feature-card.active {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border-color: var(--footer-border) !important;
  }
  .feature-grid {
    scroll-behavior: auto;
  }
  .feature-card,
  .feature-card::before,
  .feature-icon,
  .feature-link,
  .featured-header h2,
  .hubie-avatar,
  .hubie-feat-icon,
  .slide-img {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 800px) {
  .slideshow-wrapper { 
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .slide-media-side {
    padding-top: 56.25%;
    max-height: 250px;
  }
  .slide-info-side { 
    padding: 16px 12px;
    height: auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slide-kicker {
    font-size: 12px;
    margin-bottom: 12px;
    padding: 8px 0;
    letter-spacing: 0.05em;
  }
  .slide-text-block { 
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    opacity: 1;
    visibility: visible;
  }
  .slide-text-block h2 {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 8px;
  }
  .slide-text-block p {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 600px) {
  .slideshow-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .slide-media-side {
    padding-top: 56.25%;
    max-height: 200px;
  }
  .slide-info-side {
    padding: 20px 16px;
    min-height: auto;
    height: auto;
  }
  .slide-kicker {
    font-size: 14px;
    margin-bottom: 16px;
    padding: 10px 0;
  }
  .slide-text-block { 
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    display: none;
  }
  .slide-text-block.active {
    display: block;
    animation: slideFadeIn 0.5s ease;
  }
  .slide-text-block h2 {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .slide-text-block p {
    font-size: 14px;
    line-height: 1.6;
  }
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Thêm class này để chặn cuộn */
.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
}

/* ===== CHẾ ĐỘ GIẢM CHUYỂN ĐỘNG (body.cc-reduced) =====
   Bật trong popup user -> Giao diện -> "Giảm chuyển động".
   Giảm nhẹ hiệu ứng để mượt hơn trên thiết bị yếu — không bỏ hẳn. */
body.cc-reduced *,
body.cc-reduced *::before,
body.cc-reduced *::after {
  animation-duration: 0.2s !important;
  transition-duration: 0.15s !important;
}

/* Tắt các vòng lặp chạy liên tục (nặng nhất), giữ hiệu ứng xuất hiện 1 lần */
body.cc-reduced #loadingOverlay::before,
body.cc-reduced .spin-slow,
body.cc-reduced .pulse-bar,
body.cc-reduced .loading-dot,
body.cc-reduced .loading-brand img,
body.cc-reduced .loading-brand h2,
body.cc-reduced .status::before,
body.cc-reduced .subject-notice,
body.cc-reduced .online-pulse,
body.cc-reduced .hubie-avatar,
body.cc-reduced .hubie-feat-icon,
body.cc-reduced .skel-bar,
body.cc-reduced [class*="skel-"],
body.cc-reduced .notif-bell.has-unread i {
  animation: none !important;
}

/* Header gradient vẫn chạy bình thường cho dù bật giảm chuyển động */
body.cc-reduced .header {
  animation: headerFlow 10s ease infinite !important;
}

/* Ticker (chữ chạy) vẫn chạy bình thường cho dù bật giảm chuyển động.
   Dùng --ticker-dur do JS set theo từng thiết bị (mobile co ngắn lại cho
   khớp tốc độ cảm giác với desktop). */
body.cc-reduced .ticker-text {
  animation: scrollText var(--ticker-dur, 18s) linear infinite !important;
}

/* Hiện nội dung tĩnh ngay lập tức — không trượt, đỡ lag máy yếu */
body.cc-reduced .reveal-item {
  transform: none !important;
  transition: none !important;
}

/* Toast: giữ đúng thời lượng thật của thanh tiến trình
   (nếu bị rule chung ép về 0.2s thì thông báo sẽ nháy một cái rồi biến mất) */
body.cc-reduced .lh-toast-progress {
  animation-duration: var(--lh-toast-dur, 3500ms) !important;
}
body.cc-reduced .lh-toast-icon .lh-wave {
  animation: none !important;
}
body.cc-reduced .slide-text-block.active {
  animation-duration: 0.2s;
}

/* ===== VERSION POPUP (nút "Phiên bản v..." ở footer) ===== */
.lh-version-btn{
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:var(--footer-bottom-text);
  cursor:pointer;letter-spacing:inherit;
  border-bottom:1px dashed currentColor;
  transition:color .2s ease, border-color .2s ease;
}
.lh-version-btn:hover{color:var(--footer-link-hover)}
.lh-version-popup{
  position:fixed;inset:0;z-index:2147483000;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}
.lh-version-popup.lh-version-show{opacity:1;visibility:visible;pointer-events:auto}
.lh-version-card{
  width:min(92vw,360px);box-sizing:border-box;
  background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  padding:26px 22px 20px;text-align:center;position:relative;
  transform:translateY(18px) scale(.94);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.lh-version-popup.lh-version-show .lh-version-card{transform:translateY(0) scale(1)}
.lh-version-close{
  position:absolute;top:10px;right:12px;
  border:none;background:none;font-size:20px;line-height:1;
  color:#94a3b8;cursor:pointer;padding:4px;border-radius:8px;
  transition:color .2s ease;
}
.lh-version-close:hover{color:#0f172a}
.lh-version-logo{width:52px;height:52px;margin:0 auto 10px;display:block}
.lh-version-name{margin:0;font-size:17px;font-weight:800;color:#0f172a;letter-spacing:-.2px}
.lh-version-badge{
  display:inline-flex;align-items:center;gap:7px;
  margin:12px auto 2px;padding:7px 18px;border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(37,99,235,.35);
}
.lh-version-date{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:12px;font-size:13px;color:#64748b;font-weight:600;
}
.lh-version-date i{color:#2563eb}
.lh-version-note{margin:12px 0 0;font-size:12px;color:#94a3b8;line-height:1.6}
/* Dark mode */





@media (prefers-reduced-motion:reduce){
  .lh-version-popup,.lh-version-card{transition:none}
}







/* ============================================================================
   LearnHub — GIAO DIỆN CHUNG (Light + Dark)
   ----------------------------------------------------------------------------
   File tổng chứa toàn bộ UI dùng chung + dark mode của toàn site:
     1. Toast & Confirm        (lhToast / lhConfirm — trước đây nằm trong toast.js)
     2. Banner cập nhật        (.lh-vcheck — trước đây nằm trong version-check.js)
     3. Popup tài khoản        (#userPopup — trước đây là account-popup.css)
     4. Dark mode dùng chung   (body.dark-mode — trước đây rải trong style.css)
     5. Dark mode theo trang   (body.dark-mode — trước đây nằm trong <style> từng trang)
   File CSS duy nhất của site (đã gộp cả style.css). Mọi chỉnh sửa giao diện chung tập trung ở file này.
   ============================================================================ */

/* ============================================================================
   1. TOAST & CONFIRM — lhToast / lhConfirm  (Light + Dark)
   ============================================================================ */
.lh-toast-container{position:fixed;top:20px;right:20px;z-index:2147483400;display:flex;flex-direction:column;gap:12px;pointer-events:none;max-width:calc(100vw - 40px)}
.lh-toast{position:relative;display:flex;align-items:center;background:#fff;border-radius:4px;box-shadow:0 4px 15px rgba(0,0,0,0.05),0 1px 3px rgba(0,0,0,0.02);padding:16px 20px;width:100%;min-width:280px;max-width:400px;overflow:hidden;pointer-events:auto;transform:translateX(120%);opacity:0;transition:transform .3s ease,opacity .3s ease}
.lh-toast.lh-in{transform:translateX(0);opacity:1}
.lh-toast.lh-out{transform:translateX(40%);opacity:0}
.lh-toast::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px}
.lh-toast-info::before{background-color:#3b82f6}
.lh-toast-success::before{background-color:#22c55e}
.lh-toast-warning::before{background-color:#eab308}
.lh-toast-error::before{background-color:#ef4444}
.lh-toast-icon{font-size:20px;margin-right:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lh-toast-info .lh-toast-icon{color:#3b82f6}
.lh-toast-success .lh-toast-icon{color:#22c55e}
.lh-toast-warning .lh-toast-icon{color:#eab308}
.lh-toast-error .lh-toast-icon{color:#ef4444}
.lh-toast-icon .lh-wave{display:inline-block;transform-origin:75% 80%;animation:lhWave 1.2s ease-in-out infinite}
@keyframes lhWave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(16deg)}55%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.lh-toast-content{flex:1;min-width:0}
.lh-toast-title{margin:0 0 2px 0;font-size:14px;font-weight:700;color:#1f2937}
.lh-toast-message{margin:0;font-size:13px;color:#6b7280;word-wrap:break-word}
.lh-toast-close{background:transparent;border:none;font-size:16px;color:#9ca3af;cursor:pointer;padding:4px;margin-left:12px;transition:color .2s;flex-shrink:0}
.lh-toast-close:hover{color:#374151}
.lh-toast-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;background-color:#3b82f6}
.lh-toast:hover .lh-toast-progress{animation-play-state:paused!important}
@keyframes lh-progress-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.lh-confirm-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:2147483500;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .2s ease}
.lh-confirm-overlay.lh-in{opacity:1}
.lh-confirm-card{position:relative;background:#fff;border-radius:8px;box-shadow:0 20px 60px rgba(15,23,42,.25);padding:24px 24px 20px;width:100%;max-width:380px;overflow:hidden;transform:scale(.95);transition:transform .2s ease}
.lh-confirm-overlay.lh-in .lh-confirm-card{transform:scale(1)}
.lh-confirm-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background-color:#ef4444}
.lh-confirm-title{margin:0 0 8px 0;font-size:16px;font-weight:700;color:#1f2937}
.lh-confirm-message{margin:0 0 20px 0;font-size:14px;color:#6b7280;line-height:1.5;word-wrap:break-word}
.lh-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.lh-btn-cancel{background:#f1f5f9;color:#475569;border:none;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.lh-btn-cancel:hover{background:#e2e8f0}
.lh-btn-danger{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}
.lh-btn-danger:hover{background:#dc2626}
@media(max-width:768px){.lh-toast-container{top:92px;right:14px;left:auto}.lh-toast{min-width:240px;max-width:min(400px,calc(100vw - 28px))}}

/* --- Toast & Confirm: Dark Mode --- */
body.dark-mode .lh-toast{background:#1e293b;border:1px solid #334155;box-shadow:0 8px 28px rgba(0,0,0,.5)}
body.dark-mode .lh-toast-title{color:#f1f5f9}
body.dark-mode .lh-toast-message{color:#cbd5e1}
body.dark-mode .lh-toast-message b{color:#93c5fd}
body.dark-mode .lh-toast-close{color:#64748b}
body.dark-mode .lh-toast-close:hover{color:#e2e8f0}
body.dark-mode .lh-toast-progress{background-color:#2563eb}
body.dark-mode .lh-confirm-overlay{background:rgba(2,6,23,.62)}
body.dark-mode .lh-confirm-card{background:#1e293b;border:1px solid #334155;box-shadow:0 20px 60px rgba(0,0,0,.55)}
body.dark-mode .lh-confirm-title{color:#f1f5f9}
body.dark-mode .lh-confirm-message{color:#cbd5e1}
body.dark-mode .lh-btn-cancel{background:#334155;color:#e2e8f0}
body.dark-mode .lh-btn-cancel:hover{background:#475569}
body.dark-mode .lh-btn-danger{background:#ef4444;color:#fff}
body.dark-mode .lh-btn-danger:hover{background:#dc2626}

/* ============================================================================
   2. BANNER CẬP NHẬT — .lh-vcheck  (Light + Dark)
   Thời gian chạy thanh tiến trình (.lh-vcheck-bar) do JS đặt inline
   (version-check.js) để đồng bộ với AUTO_HIDE_MS.
   ============================================================================ */
.lh-vcheck{position:fixed;right:18px;bottom:18px;z-index:2147483400;display:flex;align-items:center;gap:12px;max-width:380px;padding:14px 16px 17px;border-radius:16px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 12px 40px rgba(15,23,42,.18);font-family:inherit;overflow:hidden;transform:translateY(24px);opacity:0;animation:lhVcheckIn .35s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes lhVcheckIn{to{transform:translateY(0);opacity:1}}
.lh-vcheck--hide{animation:lhVcheckOut .3s ease forwards}
@keyframes lhVcheckOut{from{transform:translateY(0);opacity:1}to{transform:translateX(80px);opacity:0}}
.lh-vcheck-icon{font-size:26px;line-height:1;flex-shrink:0}
.lh-vcheck-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.lh-vcheck-body strong{font-size:13.5px;color:#0f172a;font-weight:800;letter-spacing:-.1px}
.lh-vcheck-body span{font-size:12px;color:#64748b;line-height:1.45}
.lh-vcheck-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.lh-vcheck-reload{border:none;border-radius:10px;padding:8px 14px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:filter .2s ease,transform .2s ease}
.lh-vcheck-reload:hover{filter:brightness(1.08);transform:translateY(-1px)}
.lh-vcheck-later{border:none;background:none;color:#94a3b8;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:2px}
.lh-vcheck-later:hover{color:#475569;text-decoration:underline}
.lh-vcheck-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#e2e8f0}
.lh-vcheck-bar{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2563eb,#7c3aed);animation:lhVcheckBar 30s linear forwards}
@keyframes lhVcheckBar{from{width:100%}to{width:0}}
body.dark-mode .lh-vcheck{background:#1e293b;border-color:#334155;box-shadow:0 12px 40px rgba(0,0,0,.5)}
body.dark-mode .lh-vcheck-body strong{color:#f1f5f9}
body.dark-mode .lh-vcheck-body span{color:#94a3b8}
body.dark-mode .lh-vcheck-progress{background:#334155}
@media (max-width:560px){.lh-vcheck{left:12px;right:12px;bottom:12px;max-width:none}}
@media (prefers-reduced-motion:reduce){.lh-vcheck{animation:none;opacity:1;transform:none}.lh-vcheck--hide{animation:none;display:none}.lh-vcheck-bar{animation:none;width:50%}}

/* ============================================================================
   3. POPUP TAI KHOAN -- #userPopup  (toan file account-popup.css, gom Dark)
   ============================================================================ */
:root {
  --cc-accent: #2563eb;
  --cc-bg: rgba(255, 255, 255, 0.56);
  --cc-bg-solid: #f8faff;
  --cc-border: rgba(255, 255, 255, 0.38);
  --cc-shadow: 0 24px 60px rgba(15, 23, 42, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --cc-rail: rgba(255, 255, 255, 0.36);
  --cc-row: rgba(255, 255, 255, 0.6);
  --cc-soft: rgba(37, 99, 235, 0.08);
  --cc-track: rgba(15, 23, 42, 0.12);
}

body.dark-mode {
  --cc-accent: #3b82f6;
  --cc-bg: rgba(15, 23, 42, 0.72);
  --cc-bg-solid: #0f172a;
  --cc-border: rgba(148, 163, 184, 0.2);
  --cc-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --cc-rail: rgba(30, 41, 59, 0.34);
  --cc-row: rgba(148, 163, 184, 0.09);
  --cc-soft: rgba(59, 130, 246, 0.16);
  --cc-track: rgba(148, 163, 184, 0.22);
}

#userPopup {
  position: fixed;
  top: 74px;
  right: 20px;
  z-index: 3000;
  box-sizing: border-box;
  width: 344px;
  height: min(480px, calc(100vh - 104px));
  border-radius: 24px;
  overflow: hidden;
  background: var(--cc-bg);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  color: var(--text-main);
  font-family: 'Inter', Arial, sans-serif;
  transform-origin: top right;
}

/* Animation vào ra CHỈ chạy khi JS chủ động thêm class .cc-pop lúc mở popup,
   và bị loại khỏi element ngay khi chạy xong. Nhờ vậy việc gạt bật/tắt
   "Giảm chuyển động" không bao giờ đổi animation-name trên popup đang mở
   (đổi animation-name = trình duyệt chạy lại animation => popup nháy). */
body:not(.cc-reduced) #userPopup.cc-pop {
  animation: ccPop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

body.cc-glass-off #userPopup,
body.cc-glass-off .cc-rail,
body.cc-glass-off .cc-focus-widget,
body.cc-glass-off .cc-focus-pill,
body.cc-glass-off .cc-logout-overlay,
body.cc-glass-off .lh-popup-overlay,
body.cc-glass-off #lb-modal,
body.cc-glass-off #schedule-modal {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* CHỈ "Tắt kính mờ" (cc-glass-off) mới đổi nền đặc.
   "Giảm chuyển động" (cc-reduced) KHÔNG đụng vào màu nền/kính mờ —
   nó chỉ giảm animation (xem block cuối file). */
body.cc-glass-off {
  --cc-bg: var(--cc-bg-solid);
}

@keyframes ccPop {
  from { opacity: 0; transform: scale(0.92) translateY(-14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

#userPopup::before {
  display: none;
}

/* Lớp nền che header khi mở popup user — header nằm dưới, không bấm được */
.cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2900;
  background: rgba(15, 23, 42, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cc-overlay.cc-overlay-open {
  opacity: 1;
  pointer-events: auto;
}

#userPopup * {
  box-sizing: border-box;
}

.cc-shell {
  display: flex;
  height: 100%;
}

.cc-rail {
  position: relative;
  z-index: 30;
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 10px;
  gap: 6px;
  background: var(--cc-rail);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-right: 1px solid var(--cc-border);
}

.cc-nav {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--text-sub);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.cc-nav:hover {
  background: var(--cc-soft);
  color: var(--text-main);
  transform: translateY(-1px);
}

.cc-nav.cc-active {
  color: var(--cc-accent);
  background: var(--cc-soft);
}

.cc-nav-logout {
  margin-top: auto;
}

.cc-nav-logout:hover {
  background: rgba(239, 68, 68, 0.13);
  color: #ef4444;
}

.cc-nav::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 6px 11px;
  border-radius: 10px;
  background: var(--cc-bg-solid);
  border: 1px solid var(--cc-border);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  z-index: 60;
}

.cc-nav:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.cc-pill {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cc-pill-color, var(--cc-accent)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc-pill-color, var(--cc-accent)) 35%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cc-pill-color, var(--cc-accent)) 22%, transparent);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.cc-nav[data-tab="home"]:hover,
.cc-nav[data-tab="home"].cc-active{color:#2563eb;background:rgba(37,99,235,.12);}
.cc-nav[data-tab="profile"]:hover,
.cc-nav[data-tab="profile"].cc-active{color:#16a34a;background:rgba(22,163,74,.12);}
.cc-nav[data-tab="appearance"]:hover,
.cc-nav[data-tab="appearance"].cc-active{color:#7c3aed;background:rgba(124,58,237,.12);}
.cc-nav[data-tab="focus"]:hover,
.cc-nav[data-tab="focus"].cc-active{color:#d97706;background:rgba(217,119,6,.12);}
.cc-nav[data-tab="music"]:hover,
.cc-nav[data-tab="music"].cc-active{color:#db2777;background:rgba(219,39,119,.12);}
.cc-nav[data-tab="install"]:hover,
.cc-nav[data-tab="install"].cc-active{color:#0ea5e9;background:rgba(14,165,233,.12);}
.cc-nav[data-tab="admin"]:hover,
.cc-nav[data-tab="admin"].cc-active{color:#dc2626;background:rgba(220,38,38,.12);}
.cc-nav[data-tab="teacher"]:hover,
.cc-nav[data-tab="teacher"].cc-active{color:#0891b2;background:rgba(8,145,178,.12);}
.cc-nav[data-tab="logout"]:hover,
.cc-nav[data-tab="logout"].cc-active{color:#ef4444;background:rgba(239,68,68,.12);}

.cc-body {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.cc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-sub);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cc-close:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  transform: rotate(90deg);
}

.cc-pane {
  display: none;
}

.cc-pane.cc-pane-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  animation: ccEnter 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-pane.cc-leave {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ccLeave 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes ccEnter {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ccLeave {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-20px); }
}

.cc-home-top {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 14px;
  padding-right: 30px;
}

.cc-home-info {
  min-width: 0;
}

.cc-avatar-wrap {
  position: relative;
  flex: none;
}

.cc-avatar {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0;
  border-radius: 20px;
  object-fit: cover;
  border: 2px solid var(--cc-border);
  background: var(--cc-row);
}

.cc-status-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--cc-bg-solid);
}

.cc-greeting {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cc-accent);
}

.cc-name {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.cc-email {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-sub);
  word-break: break-all;
}

.cc-quote {
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--cc-row);
  font-size: 12.5px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: color-mix(in srgb, var(--text-main) 72%, var(--cc-accent));
}

.cc-card {
  border-radius: 16px;
  background: var(--cc-row);
  border: 1px solid var(--cc-border);
  padding: 10px;
}

.cc-online {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.cc-online-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
}

.cc-online-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
  flex: none;
}

.cc-online-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cc-version {
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  color: var(--text-sub);
  opacity: 0.85;
}

.cc-section-title {
  margin: 2px 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-sub);
}

.cc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  padding: 9px 11px;
  border-radius: 13px;
  background: var(--cc-row);
  border: 1px solid var(--cc-border);
  transition: all 0.25s ease;
}

.cc-row:hover {
  transform: translateX(2px);
}

.cc-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.cc-row-icon {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 9px;
  background: var(--cc-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.cc-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cc-row-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-sub);
  padding-left: 36px;
}

.cc-switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
}

.cc-switch input {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cc-switch .cc-thumb {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--cc-track);
  transition: all 0.25s ease;
}

.cc-switch .cc-thumb::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-switch input:checked + .cc-thumb {
  background: var(--cc-accent);
}

.cc-switch input:checked + .cc-thumb::after {
  transform: translateX(18px);
}

.cc-focus-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.cc-chip {
  padding: 10px 2px;
  border-radius: 12px;
  border: 1px solid var(--cc-border);
  background: var(--cc-row);
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cc-chip:hover {
  border-color: var(--cc-accent);
  color: var(--cc-accent);
  transform: translateY(-2px);
}

.cc-chip.cc-active {
  background: var(--cc-soft);
  border-color: var(--cc-accent);
  color: var(--cc-accent);
}

.cc-focus-custom {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.cc-focus-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--cc-border);
  background: var(--cc-row);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  outline: none;
}

.cc-focus-input:focus {
  border-color: var(--cc-accent);
}

.cc-btn-primary {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 14px;
  background: var(--cc-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cc-accent) 35%, transparent);
  transition: all 0.25s ease;
}

.cc-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.cc-btn-ghost {
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cc-btn-ghost:hover {
  background: var(--cc-row);
  transform: translateY(-1px);
}

.cc-btn-danger {
  padding: 11px 16px;
  border-radius: 14px;
  border: none;
  background: #ef4444;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cc-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

.cc-focus-note {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-sub);
  text-align: center;
  line-height: 1.6;
}

.cc-track-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}

.cc-track {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cc-track:hover {
  background: var(--cc-row);
}

.cc-track.cc-active {
  background: var(--cc-soft);
  border-color: color-mix(in srgb, var(--cc-accent) 30%, transparent);
}

.cc-track-icon {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  background: var(--cc-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.cc-track-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
}

.cc-track-sub {
  font-size: 10.5px;
  color: var(--text-sub);
}

.cc-track-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  margin-left: auto;
  flex: none;
}

.cc-track-eq span {
  width: 2px;
  border-radius: 2px;
  background: var(--cc-accent);
  animation: ccEq 1s ease infinite;
}

.cc-track-eq span:nth-child(2) { animation-delay: 0.2s; }
.cc-track-eq span:nth-child(3) { animation-delay: 0.4s; }

/* Bật "Giảm chuyển động" trong popup user thì tắt equalizer */
body.cc-reduced .cc-track-eq span {
  animation: none !important;
}

@keyframes ccEq {
  0%, 100% { height: 4px; }
  50% { height: 14px; }
}

.cc-player {
  padding: 7px;
  border-radius: 16px;
  background: var(--cc-row);
  border: 1px solid var(--cc-border);
}

.cc-player-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cc-now-icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--cc-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.cc-now-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-now-sub {
  font-size: 10px;
  color: var(--text-sub);
}

.cc-progress {
  position: relative;
  height: 4px;
  margin-bottom: 2px;
  border-radius: 99px;
  background: var(--cc-track);
  cursor: pointer;
}

.cc-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 99px;
  background: var(--cc-accent);
}

.cc-progress-times {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-sub);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.cc-player-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.cc-player-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.cc-pb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cc-pb:hover {
  background: var(--cc-soft);
  color: var(--cc-accent);
  transform: translateY(-1px);
}

.cc-pb-main {
  width: 38px;
  height: 38px;
  border: none;
  background: var(--cc-accent);
  color: #ffffff;
  font-size: 14px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--cc-accent) 30%, transparent);
}

.cc-pb-main:hover {
  color: #ffffff;
  filter: brightness(1.08);
}

.cc-volume {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.cc-volume input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 3px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 99px;
  background: var(--cc-track);
  outline: none;
}

.cc-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-accent);
  cursor: pointer;
}

.cc-volume input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: var(--cc-accent);
  cursor: pointer;
}

.cc-player-error {
  margin-top: 4px;
  font-size: 10.5px;
  color: #ef4444;
  text-align: center;
}

.cc-custom-url {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.cc-custom-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.cc-custom-input {
  width: 100%;
  padding: 7px 28px 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--cc-border);
  background: var(--cc-row);
  color: var(--text-main);
  font-size: 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-custom-input::placeholder {
  color: var(--text-sub);
  opacity: 0.8;
}

.cc-custom-input:focus {
  border-color: var(--cc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-accent) 20%, transparent);
}

.cc-custom-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-sub);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.cc-custom-clear:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.cc-custom-play {
  flex: none;
  padding: 0 12px;
  border: none;
  border-radius: 10px;
  background: var(--cc-accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.cc-custom-play:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cc-focus-widget {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 3500;
  display: none;
  box-sizing: border-box;
  width: 232px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--cc-bg);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text-main);
}

.cc-focus-widget.cc-open {
  display: block;
  animation: ccPop 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-focus-pill {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 3500;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid var(--cc-border);
  background: var(--cc-bg);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--cc-shadow);
  color: var(--text-main);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', Arial, sans-serif;
  transition: transform 0.25s ease;
}

.cc-focus-pill:hover {
  transform: translateY(-2px) scale(1.05);
}

.cc-fw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  cursor: grab;
}

.cc-fw-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cc-fw-hide {
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-sub);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.cc-fw-hide:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.cc-focus-widget.cc-dragging {
  user-select: none;
  cursor: grabbing;
  animation: none;
}

.cc-fw-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-sub);
}

.cc-fw-state {
  font-size: 11px;
  font-weight: 600;
  color: var(--cc-accent);
}

.cc-fw-time {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.cc-fw-bar {
  height: 6px;
  margin: 10px 0;
  border-radius: 99px;
  background: var(--cc-track);
  overflow: hidden;
}

.cc-fw-fill {
  width: 0%;
  height: 100%;
  border-radius: 99px;
  background: var(--cc-accent);
}

.cc-fw-actions {
  display: flex;
  gap: 8px;
}

.cc-fw-btn {
  flex: 1;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid var(--cc-border);
  background: transparent;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cc-fw-btn:hover {
  background: var(--cc-row);
}

.cc-fw-btn.cc-danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 35%, transparent);
}

.cc-logout-overlay {
  position: fixed;
  inset: 0;
  z-index: 5001;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 20, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--text-main);
}

.cc-logout-overlay.cc-open {
  display: flex;
}

.cc-logout-card {
  box-sizing: border-box;
  width: min(320px, calc(100vw - 32px));
  padding: 24px 22px;
  border-radius: 22px;
  background: var(--cc-bg-solid);
  border: 1px solid var(--cc-border);
  box-shadow: var(--cc-shadow);
  text-align: center;
}

.cc-logout-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: rgba(239, 68, 68, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.cc-logout-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.cc-logout-msg {
  margin: 6px 0 18px;
  font-size: 13px;
  color: var(--text-sub);
  line-height: 1.5;
}

.cc-logout-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.cc-logout-btns .cc-btn-ghost,
.cc-logout-btns .cc-btn-danger {
  flex: 1;
}

.cc-logout-btns .cc-btn-ghost {
  border: 1px solid var(--cc-track);
  background: transparent;
  color: var(--text-main);
}

.cc-logout-btns .cc-btn-ghost:hover {
  background: var(--cc-track);
}

.cc-logout-btns .cc-btn-danger {
  background: #ef4444;
  color: #fff;
}

.cc-logout-btns .cc-btn-danger:hover {
  background: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
  #userPopup,
  .cc-pane,
  .cc-nav,
  .cc-pill,
  .cc-switch .cc-thumb,
  .cc-switch .cc-thumb::after,
  .cc-focus-widget,
  .cc-logout-overlay {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== GIẢM CHUYỂN ĐỘNG (body.cc-reduced) =====
   Animation vào ra của popup đã được gate sẵn bằng :not(.cc-reduced)
   ở rule #userPopup.cc-pop phía trên, nên không cần override gì thêm ở đây. */
body.cc-reduced .cc-pane.cc-pane-active,
body.cc-reduced .cc-pane.cc-leave {
  animation: none !important;
}

@media (max-width: 480px) {
  #userPopup {
    top: 64px;
    right: 12px;
    width: 344px;
    height: min(480px, calc(100vh - 84px));
    /* Đảm bảo kính mờ hoạt động giống desktop trên mobile */
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
  }

  .cc-rail {
    width: 56px;
    /* Đảm bảo kính mờ hoạt động giống desktop trên mobile */
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    backdrop-filter: blur(26px) saturate(160%);
  }

  .cc-pill {
    left: 6px;
  }

  .cc-focus-widget {
    right: 12px;
    bottom: 84px;
    /* Đảm bảo kính mờ hoạt động giống desktop trên mobile */
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }

  .cc-focus-pill {
    right: 12px;
    bottom: 84px;
    /* Đảm bảo kính mờ hoạt động giống desktop trên mobile */
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }

  /* Tắt kính mờ trên mobile khi cc-glass-off */
  body.cc-glass-off #userPopup,
  body.cc-glass-off .cc-rail,
  body.cc-glass-off .cc-focus-widget,
  body.cc-glass-off .cc-focus-pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* ============================================================================
   4. DARK MODE DUNG CHUNG -- tu style.css
   ============================================================================ */
body.dark-mode {
  --bg-main: #0f172a;
  --bg-pattern: #1e293b;

  --text-main: #f1f5f9;
  --text-sub: #cbd5f5;

  --card-bg: linear-gradient(135deg, #1e293b, #0f172a);
  --card-text: #f1f5f9;
  --card-sub: #cbd5f5;
  --blue-accent: #3b82f6;

  --menu-bg: rgba(30,41,59,0.7);
  --popup-bg: rgba(30,41,59,0.9);

  --footer-bg: #1e293b;
  --footer-border: #334155;
  --footer-shadow: rgba(0, 0, 0, 0.2);
  --footer-brand-color: #93c5fd;
  --footer-heading-color: #93c5fd;
  --footer-text: #cbd5f5;
  --footer-text-strong: #f1f5f9;
  --footer-link-hover: #60a5fa;
  --footer-social-bg: #0f172a;
  --footer-social-text: #cbd5f5;
  --footer-divider: #334155;
  --footer-bottom-text: #94a3b8;

  /* Cập nhật màu Dark Mode cho Slideshow & AI Hubie */
  --hubie-bg: linear-gradient(135deg, #1e293b, #0f172a);
  --hubie-text: #60a5fa;
  --warn-text: #fbbf24;
  --warn-border: #1f2937;
}

body.dark-mode .menu-brand span{
    color:#93c5fd;
}

body.dark-mode .nav-link { color:#ccc; }

body.dark-mode .nav-link:hover,body.dark-mode .nav-link.active { color:var(--accent); }

body.dark-mode .header-location { color:#aaa; }

body.dark-mode .header-time { color:#fff; background:rgba(255,255,255,0.08); }

body.dark-mode .notif-dd-item.unread{background:rgba(96,165,250,.1);border-left-color:#60a5fa}

body.dark-mode .notif-dd-item.unread .notif-dd-item-title{color:#93c5fd}

body.dark-mode .notif-bell,body.dark-mode .notif-bell i{color:#facc15 !important}

body.dark-mode .notif-bell:hover{background:rgba(255,255,255,.08)}

body.dark-mode .notif-badge{border-color:#1e293b}

body.dark-mode .notif-dd-item:hover{background:rgba(255,255,255,.05)}

body.dark-mode .notif-detail-body{background-image:repeating-linear-gradient(transparent,transparent 27px,#334155 27px,#334155 28px)}

body.dark-mode .notif-detail-inner{background:#1e293b}

body.dark-mode .notif-detail-inner::before{opacity:.06}

body.dark-mode .notif-detail-header{border-bottom-color:#334155}

body.dark-mode .notif-detail-header h3{color:#f1f5f9}

body.dark-mode .notif-detail-meta{color:#94a3b8}

body.dark-mode .notif-detail-sender-name{color:#e2e8f0}

body.dark-mode .notif-detail-body{color:#cbd5e1}

body.dark-mode .hamburger span { background:#ddd; }

body.dark-mode .subject-tab { background:#1e1e2e; color:#aaa; border-color:#333; }

body.dark-mode .subject-tab:hover,
body.dark-mode .subject-tab.active { border-color:#ff6b35; color:#fff; }

body.dark-mode .card{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #0f172a 78%, var(--card-color) 22%),
    color-mix(in srgb, #1e293b 62%, var(--card-color) 38%)
  );
  border-color: color-mix(in srgb, var(--card-color) 58%, #334155);
}

body.dark-mode .card::before{
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--card-color) 20%, transparent),
    transparent 42%
  );
}

body.dark-mode .card h3{
  color: color-mix(in srgb, #f8fafc 76%, var(--card-color) 24%);
}

body.dark-mode .card p{
  color: color-mix(in srgb, #cbd5e1 82%, var(--card-color) 18%);
}

body.dark-mode .card:hover{
  border-color: color-mix(in srgb, var(--card-color) 78%, #475569);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #111827 72%, var(--card-color) 28%),
    color-mix(in srgb, #1e293b 50%, var(--card-color) 50%)
  );
  box-shadow:0 12px 28px color-mix(in srgb, var(--card-color) 24%, transparent);
}

body.dark-mode .card.active-card{
  border-color: color-mix(in srgb, var(--card-color) 88%, #64748b);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, #111827 66%, var(--card-color) 34%),
    color-mix(in srgb, #1e293b 42%, var(--card-color) 58%)
  );
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--card-color) 26%, transparent),
    0 0 0 2px color-mix(in srgb, var(--card-color) 30%, #0f172a);
}

body.dark-mode .btn{
box-shadow:0 10px 22px color-mix(in srgb, var(--card-color) 22%, transparent);
}

body.dark-mode .btn:hover{
box-shadow:0 12px 28px color-mix(in srgb, var(--card-color) 30%, transparent);
}

body.dark-mode .quiz-box{
    background:#020617;
}

body.dark-mode .popup-box{
  background:#1e293b;
  box-shadow:0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(148,163,184,0.12), 0 0 60px rgba(99,102,241,0.1);
}

body.dark-mode .popup-body p{
  color:#cbd5e1;
}

body.dark-mode .popup-body p b{
  color:#93c5fd;
}

body.dark-mode #loginBox .auth-mobile-caption{
background:rgba(15,23,42,0.68);
border:1px solid rgba(148,163,184,0.16);
box-shadow:0 14px 30px rgba(2,6,23,0.32);
}

body.dark-mode #loginBox .auth-mobile-caption strong{
color:#e2e8f0;
}

body.dark-mode #loginBox .auth-mobile-caption span{
color:#cbd5e1;
}

body.dark-mode #loadingOverlay{
  background: radial-gradient(circle at top, rgba(30,41,59,0.72), rgba(2,6,23,0.96));
}

body.dark-mode #loadingOverlay::before{
  background:
    radial-gradient(ellipse at 20% 30%, rgba(59,130,246,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(168,85,247,0.16) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(34,211,238,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 60%, rgba(14,165,233,0.1) 0%, transparent 50%);
}

body.dark-mode #loadingOverlay::after{
  background:
    radial-gradient(ellipse at 25% 25%, rgba(59,130,246,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 75%, rgba(99,102,241,0.08) 0%, transparent 55%);
}

body.dark-mode .loading-dot{
  background: linear-gradient(135deg, #60a5fa, #22d3ee);
  box-shadow: 0 10px 30px rgba(56,189,248,0.18);
}

body.dark-mode #loadingText{
  color:#e2e8f0;
}

body.dark-mode .loading-brand h2{
  background:linear-gradient(135deg, #bfdbfe, #7dd3fc, #a5b4fc, #c4b5fd);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

body.dark-mode .loading-brand.emphasize h2{
  color:#bfdbfe;
  -webkit-text-fill-color:#bfdbfe;
  background:none;
}

body.dark-mode .loading-footer{
  color:#94a3b8;
}

body.dark-mode .card{
  border:1px solid rgba(255,255,255,0.08);
}

body.dark-mode .subject-notice{
  background: linear-gradient(135deg, color-mix(in srgb, var(--subject-color, #1a73e8) 25%, #1e293b), color-mix(in srgb, var(--subject-color, #1a73e8) 15%, #0f172a));
  color: color-mix(in srgb, #f1f5f9 90%, var(--subject-color, #1a73e8) 10%);
}

body.dark-mode .ticker-container{
background:linear-gradient(90deg,#0f3e8a,#4c1d95);
box-shadow:0 10px 24px rgba(2,6,23,0.32);
}

body.dark-mode #userBox{
background:rgba(15,23,42,0.82);
border-color:rgba(148,163,184,0.12);
box-shadow:0 10px 24px rgba(2,6,23,0.28);
}

body.dark-mode #userAvatar{
border-color:rgba(255,255,255,0.18);
}

body.dark-mode .card.active-card{
    border-color: color-mix(in srgb, var(--card-color) 76%, #64748b);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--card-color) 28%, #0f172a);
}

body.dark-mode .lh-version-card{background:#1e293b;box-shadow:0 24px 60px rgba(0,0,0,.5)}

body.dark-mode .lh-version-name{color:#f1f5f9}

body.dark-mode .lh-version-close:hover{color:#f1f5f9}

body.dark-mode .lh-version-date{color:#94a3b8}

body.dark-mode .lh-version-note{color:#64748b}

/* ============================================================================
   5. DARK MODE THEO TRANG
   ============================================================================ */
/* --- 5.1 404.html --- */
body.dark-mode{
  --bg:#0b1220;--text:#f1f5f9;--sub:#94a3b8;--card:#121d33;--border:#25344f;
}

/* --- 5.2 profile.html --- */
        body.dark-mode {
            --bg-main: #0f172a;
            --bg-pattern: #1e293b;
            --text-main: #f1f5f9;
            --text-sub: #cbd5f5;
            --card-bg: linear-gradient(135deg, #1e293b, #0f172a);
            --card-border: rgba(51,65,85,0.6);
            --card-shadow: 0 8px 24px rgba(0,0,0,0.3);
            --blue-accent: #3b82f6;
            --popup-bg: rgba(30,41,59,0.92);
            --footer-border: #334155;
            --input-bg: #1e293b;
            --tint-blue: rgba(59,130,246,0.16);
            --tint-green: rgba(52,211,153,0.14);
            --tint-violet: rgba(167,139,250,0.16);
            --tint-amber: rgba(251,191,36,0.14);
        }

        body.dark-mode .lh-card:hover {
            box-shadow: 0 12px 26px rgba(0,0,0,0.32);
        }

        body.dark-mode .lh-frame-box {
            background: rgba(15,23,42,0.45);
        }

        body.dark-mode .lh-status-badge {
            background: rgba(16,185,129,0.15);
            color: #34d399;
        }

        body.dark-mode .lh-btn-primary {
            background: linear-gradient(135deg, #3b82f6, #2563eb);
        }

        body.dark-mode select.lh-input option {
            background: #1e293b;
            color: #f1f5f9;
        }

        body.dark-mode #users-grid img { border-color: #334155; }

        body.dark-mode #users-grid span { color: #cbd5f5; }

        body.dark-mode #users-grid [class*="border-blue-200"] {
            border-color: rgba(59,130,246,0.4);
            background: rgba(59,130,246,0.08);
        }

        body.dark-mode #profile-role-badge {
            background: rgba(15,23,42,0.4);
        }

/* --- 5.3 element/forum.html --- */
body.dark-mode {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-soft: #1a2332;
  --text: #f1f5f9;
  --sub: #94a3b8;
  --muted: #64748b;
  --line: #334155;
  --line-strong: #475569;
  --shadow: 0 6px 18px rgba(0,0,0,0.3);
  --shadow-soft: 0 2px 9px rgba(0,0,0,0.25);
}

body.dark-mode { background: linear-gradient(180deg, #0f172a, #1a2332); }

body.dark-mode .container { background: transparent; }

body.dark-mode .header { background: linear-gradient(135deg, #1e3a5f, #0c4a4e); box-shadow: 0 8px 22px rgba(0,0,0,0.3); }

body.dark-mode .logo { color: #f1f5f9; }

body.dark-mode .header-meta { color: #94a3b8; }

body.dark-mode .user-box { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.15); }

body.dark-mode .post-box { background: #1e293b; border-color: #334155; }

body.dark-mode .post-box .char-counter { color: #64748b; }

body.dark-mode .post {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 2px 9px rgba(0,0,0,0.25);
}

body.dark-mode .post:hover { border-color: #475569; box-shadow: 0 8px 18px rgba(0,0,0,0.3); }

body.dark-mode .post.current-user-post { border-color: rgba(59,130,246,0.4); box-shadow: 0 4px 14px rgba(59,130,246,0.15); }

body.dark-mode .post.admin-post-card { border-color: rgba(239,68,68,0.4) !important; background: linear-gradient(180deg, #2a1515, #1e293b) !important; }

body.dark-mode .meta { color: #94a3b8; }

body.dark-mode .meta b { color: #60a5fa; }

body.dark-mode .meta b.admin-name { color: #f87171 !important; }

body.dark-mode .meta .admin-badge { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,0.3); }

body.dark-mode .meta .current-user-name { background: linear-gradient(135deg, #3b82f6, #0d9488); }

body.dark-mode .post div[style*="white-space: pre-wrap;"],
body.dark-mode .reply div[style*="white-space: pre-wrap;"] { color: #e2e8f0; }

body.dark-mode .actions { border-top-color: #334155; }

body.dark-mode .reply-btn, body.dark-mode .reaction-trigger, body.dark-mode .reaction-detail-btn { color: #94a3b8; }

body.dark-mode .reply-btn:hover, body.dark-mode .reaction-trigger:hover, body.dark-mode .reaction-detail-btn:hover { color: #60a5fa; background: rgba(59,130,246,0.1); }

body.dark-mode .replies-wrapper { color: #94a3b8; }

body.dark-mode .reply-thread-toggle { color: #94a3b8; }

body.dark-mode .reply-thread-toggle:hover { color: #60a5fa; }

body.dark-mode .reply {
  background: rgba(255,255,255,0.03);
  border-left-color: #3b82f6;
}

body.dark-mode .reply.admin-reply-card { border-left-color: #ef4444 !important; background: rgba(239,68,68,0.05) !important; }

body.dark-mode .reply-status-container { background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.2); }

body.dark-mode textarea {
  background: rgba(255,255,255,0.05);
  color: #e2e8f0;
  border-color: #334155;
}

body.dark-mode textarea:focus { border-color: #3b82f6; }

body.dark-mode textarea::placeholder { color: #64748b; }

body.dark-mode .edit-btn { color: #34d399; background: rgba(16,185,129,0.1); }

body.dark-mode .delete-btn { color: #f87171; background: rgba(239,68,68,0.1); }

body.dark-mode .edit-btn:hover { background: rgba(16,185,129,0.2); }

body.dark-mode .delete-btn:hover { background: rgba(239,68,68,0.2); }

body.dark-mode .post.current-user-post::before { color: #60a5fa; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }

body.dark-mode .reaction-detail-text { color: #e2e8f0; }

body.dark-mode .reaction-detail-user { color: #e2e8f0; }

body.dark-mode .reaction-detail-type { color: #94a3b8; }

body.dark-mode #posts .skel-bar { background: rgba(255,255,255,0.06); }

body.dark-mode .mute-btn { background: rgba(255,255,255,0.08); color: #94a3b8; border-color: #334155; }

body.dark-mode .mute-btn:hover { background: rgba(255,255,255,0.12); color: #e2e8f0; }

body.dark-mode .modal-overlay { background: rgba(0,0,0,0.6); }

body.dark-mode .modal-content { background: #1e293b; border-color: #334155; }

body.dark-mode .modal-content h3 { color: #f1f5f9; }

body.dark-mode .modal-content p { color: #94a3b8; }

body.dark-mode .modal-close { color: #94a3b8; }

body.dark-mode .modal-close:hover { color: #f87171; }

body.dark-mode .search-box { background: rgba(255,255,255,0.05); border-color: #475569; }

body.dark-mode .search-box input { color: #e2e8f0; }

body.dark-mode .search-box input::placeholder { color: #64748b; }

body.dark-mode .actions-right select { background: rgba(255,255,255,0.05); border-color: #475569; color: #e2e8f0; }

body.dark-mode .post.pinned-post { border-color: rgba(245,158,11,0.4) !important; background: linear-gradient(180deg, #2a2008, #1e293b) !important; }

body.dark-mode .pin-badge { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.3); }

body.dark-mode .pin-btn { background: rgba(245,158,11,0.12); color: #fbbf24; }

body.dark-mode .pin-btn:hover { background: rgba(245,158,11,0.22); }

body.dark-mode .pagination-bar button { background: #1e293b; border-color: #475569; color: #e2e8f0; }

body.dark-mode .pagination-bar button:hover:not(.active):not(:disabled) { background: rgba(59,130,246,0.15); border-color: #3b82f6; color: #60a5fa; }

body.dark-mode .pagination-info { color: #64748b; }

/* --- 5.4 element/lich-hoc.html (<style>) --- */
body.dark-mode{
  --text:#f1f5f9;--text-sub:#94a3b8;--border:#1e293b;
  --card-bg:#1e293b;--card-border:#334155;
  --notice-bg:#1e293b;--notice-border:#334155;
}

body.dark-mode .schedule-day.sunday{background:#31290f;border-color:#6b5316;}

body.dark-mode .schedule-item-session.morning{background:#3a2f12;color:#fcd34d;}

body.dark-mode .schedule-item-session.noon{background:#3b1a1a;color:#fca5a5;}

body.dark-mode .schedule-item-session.afternoon{background:#17233f;color:#93c5fd;}

body.dark-mode .schedule-item-session.evening{background:#241a3d;color:#c4b5fd;}

/* --- 5.5 element/phong-hoc.html --- */
body.dark-mode{
  --bg:transparent;--text:#f1f5f9;--text-sub:#94a3b8;--border:#1e293b;
  --card-bg:#1e293b;--card-border:#334155;
  --notice-bg:#1e293b;--notice-border:#334155;
  --quiz-bg:#1e293b;--quiz-border:#334155;
}

body.dark-mode .card{box-shadow:0 2px 8px rgba(0,0,0,0.25);}

body.dark-mode .card:hover{box-shadow:0 8px 28px color-mix(in srgb,var(--card-color,#2563eb) 20%,rgba(0,0,0,0.3));}

body.dark-mode .card-color-bar{background:linear-gradient(90deg,var(--card-color),color-mix(in srgb,var(--card-color) 60%,#0f172a));}

body.dark-mode .subject-notice{border-color:var(--notice-border);}

/* --- 5.6 flashcard/hub.html --- */
    body.dark-mode {
      --primary: #3b82f6;
      --glass: rgba(30, 41, 59, 0.88);
      --line: rgba(100, 116, 139, 0.35);
      --text-main: #f1f5f9;
      --text-sub: #94a3b8;
      --chip: rgba(59, 130, 246, 0.18);
    }

    body.dark-mode {
      background:
        radial-gradient(circle at 12% 8%, rgba(236, 72, 153, 0.06), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(37, 99, 235, 0.06), transparent 30%),
        radial-gradient(circle at 72% 86%, rgba(245, 158, 11, 0.05), transparent 32%),
        linear-gradient(135deg, #0f172a 0%, #1a1a2e 44%, #0f172a 100%) !important;
      background-attachment: fixed !important;
    }

    body.dark-mode body::before { opacity: 0.03; }

    body.dark-mode .wrap { color: var(--text-main); }

    body.dark-mode .hero h1 { color: #60a5fa; }

    body.dark-mode .hero p { color: #94a3b8; }

    body.dark-mode .filter-btn {
      background: rgba(30, 41, 59, 0.92);
      border-color: #334155;
      color: #e2e8f0;
      box-shadow: 0 8px 18px rgba(0,0,0,0.3);
    }

    body.dark-mode .filter-menu {
      background: rgba(30, 41, 59, 0.96);
      border-color: #334155;
      box-shadow: 0 14px 30px rgba(0,0,0,0.4);
    }

    body.dark-mode .filter-item { color: #94a3b8; }

    body.dark-mode .filter-item:hover,
    body.dark-mode .filter-item.active {
      background: rgba(59, 130, 246, 0.15);
      color: #60a5fa;
    }

    body.dark-mode .section-title { color: var(--section-accent); }

    body.dark-mode .section-note { color: #94a3b8; }

    body.dark-mode .section-nav {
      background: rgba(30, 41, 59, 0.9);
      border-color: rgba(59, 130, 246, 0.3);
    }

    body.dark-mode .topic-card {
      background: rgba(30, 41, 59, 0.8);
      border-color: #334155;
    }

    body.dark-mode .topic-card:hover {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.7));
      border-color: var(--section-accent);
    }

    body.dark-mode .topic-title { color: #f1f5f9; }

    body.dark-mode .topic-desc { color: #94a3b8; }

    body.dark-mode .count { color: #60a5fa; }

    body.dark-mode .chip {
      background: rgba(59, 130, 246, 0.15);
      border-color: rgba(59, 130, 246, 0.3);
      color: #60a5fa;
    }

    body.dark-mode .open-btn {
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    }

    body.dark-mode .card-updating-badge {
      background: linear-gradient(135deg, #f59e0b, #b45309);
    }

    body.dark-mode .loading-overlay { background: rgba(0, 0, 0, 0.65); }

    body.dark-mode .loading-box {
      background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.92));
      border-color: rgba(255, 255, 255, 0.1);
    }

    body.dark-mode .loading-title { color: #f1f5f9; }

    body.dark-mode .loading-text { color: #94a3b8; }

    body.dark-mode .skel-bar { background: linear-gradient(90deg, #1e293b 25%, #2d3a4e 37%, #1e293b 63%); }

    body.dark-mode .skel-card { background: rgba(30, 41, 59, 0.6); border-color: #334155; }

/* --- 5.7 flashcard/flash.html --- */
body.dark-mode {
  --bg-1: #0f172a;
  --bg-2: #1e293b;
  --bg-3: #334155;
  --panel: rgba(30, 41, 59, 0.88);
  --panel-strong: rgba(30, 41, 59, 0.92);
  --line: rgba(100, 116, 139, 0.3);
  --text-main: #f1f5f9;
  --text-sub: #94a3b8;
}

body.dark-mode {
  background:
    radial-gradient(circle at 12% 10%, rgba(236, 72, 153, 0.08), transparent 26%),
    radial-gradient(circle at 84% 14%, rgba(37, 99, 235, 0.08), transparent 30%),
    radial-gradient(circle at 68% 86%, rgba(245, 158, 11, 0.06), transparent 34%),
    linear-gradient(135deg, #0f172a 0%, #1a1a2e 44%, #0f172a 100%);
  background-attachment: fixed;
}

body.dark-mode body::before { opacity: 0.03; }

body.dark-mode body::after { opacity: 0.05; }

body.dark-mode #menu {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(100, 116, 139, 0.3);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

body.dark-mode #menu button { color: #94a3b8; }

body.dark-mode #menu button:hover:not(.active-nav) { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }

body.dark-mode #menu button.active-nav { background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; }

body.dark-mode #backToHubBtn { box-shadow: 0 10px 20px rgba(0,0,0,0.3); }

body.dark-mode #progressContainer {
  background: rgba(30, 41, 59, 0.92);
  border-color: #334155;
}

body.dark-mode #progressText { color: #60a5fa; }

body.dark-mode #progressOuter { background: #1e293b; }

body.dark-mode #topicBanner {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(59, 130, 246, 0.2);
  color: #94a3b8;
}

body.dark-mode #topicBanner span { color: #e2e8f0; }

body.dark-mode .flash-front,
body.dark-mode .flash-back {
  background: rgba(30, 41, 59, 0.92) !important;
  box-shadow: 0 18px 35px rgba(0,0,0,0.35) !important;
  border-color: rgba(100, 116, 139, 0.2);
}

body.dark-mode .flash-front { color: #f1f5f9; }

body.dark-mode .flash-back {
  background: linear-gradient(140deg, rgba(30, 41, 59, 0.96), rgba(37, 99, 235, 0.12)) !important;
  color: #93c5fd;
}

body.dark-mode .speaker-icon { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }

body.dark-mode .speaker-icon:hover { background: #4f46e5; color: white; }

body.dark-mode .dict-icon { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }

body.dark-mode .dict-icon:hover { background: #4f46e5; color: white; }

body.dark-mode .nav-arrow { background: #1e293b; color: #60a5fa; }

body.dark-mode .game-shell {
  background: rgba(30, 41, 59, 0.74);
  border-color: rgba(100, 116, 139, 0.25);
}

body.dark-mode .game-start-card {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.95), rgba(30, 41, 59, 0.88));
  border-color: #334155;
}

body.dark-mode .game-start-card h2 { color: #a5b4fc; }

body.dark-mode .game-start-card p { color: #94a3b8; }

body.dark-mode .match-card {
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

body.dark-mode .match-card:hover { background: rgba(30, 41, 59, 0.95); border-color: #6366f1; color: #a5b4fc; }

body.dark-mode .match-card.selected { background: rgba(99, 102, 241, 0.12); border-color: #6366f1; }

body.dark-mode .blast-box {
  background: rgba(30, 41, 59, 0.88);
  border-color: #334155;
}

body.dark-mode .question { color: #f1f5f9; }

body.dark-mode .options button {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

body.dark-mode .options button:hover { background: #2d3a4e; border-color: #6366f1; color: #a5b4fc; }

body.dark-mode .popup { background: rgba(0,0,0,0.6); }

body.dark-mode .popup-box {
  background: linear-gradient(150deg, rgba(30, 41, 59, 0.96), rgba(30, 41, 59, 0.92));
  box-shadow: 0 18px 32px rgba(0,0,0,0.4);
}

body.dark-mode .popup-box h2 { color: #a5b4fc; }

body.dark-mode .popup-box p { color: #94a3b8; }

body.dark-mode .settings-modal { background: rgba(0,0,0,0.5); }

body.dark-mode .settings-box {
  background: #1e293b;
  border-color: #334155;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

body.dark-mode .settings-header h3 { color: #60a5fa; }

body.dark-mode .settings-close { background: #b91c1c; color: #fff; }

body.dark-mode .settings-close:hover { background: #991b1b; }

body.dark-mode .setting-item { border-bottom-color: #334155; }

body.dark-mode .setting-label { color: #e2e8f0; }

body.dark-mode .setting-desc { color: #64748b; }

body.dark-mode .toggle-slider { background-color: #475569; }

body.dark-mode #music-control { background: #1e293b; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }

body.dark-mode #score,
body.dark-mode .streak-badge { color: #f1f5f9; }

/* --- 5.8 cauhoi/filetest.html --- */
        body.dark-mode {
                background:
        radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 35%),
        radial-gradient(circle at top right, rgba(14,165,233,0.06), transparent 30%),
        #071120;
            --bg: #071120;
            --minibox: rgba(17, 25, 40, 0.75);
            --bg-pattern: #0f1b2d;

            --text: #f8fafc;
            --text-sub: #94a3b8;

            --card: rgba(15, 23, 42, 0.78);
            --card-gradient: linear-gradient(
                145deg,
                rgba(17, 25, 40, 0.88),
                rgba(10, 18, 32, 0.92)
            );

            --primary: #3b82f6;
            --primary-light: rgba(59, 130, 246, 0.12);

            --info: #60a5fa;
            --success-light: rgba(34, 197, 94, 0.14);
            --danger-light: rgba(239, 68, 68, 0.14);

            --anshover: rgba(255,255,255,0.04);
            --answrong: rgba(127, 29, 29, 0.28);

            --tf-bg: rgba(15, 23, 42, 0.6);
            --tf-hover: rgba(255,255,255,0.03);
            --tf-border: rgba(255,255,255,0.06);

            --true-asw: #4ade80;
            --false-asw: #f87171;
        }

        body.dark-mode .timer-box {
            background: rgba(59,130,246,0.12);
            color: #60a5fa;
        }

        body.dark-mode .timer-box.timer-warning {
            background: rgba(234,179,8,0.14);
            color: #facc15;
        }

        body.dark-mode .timer-box.timer-danger {
            background: rgba(239,68,68,0.16);
            color: #f87171;
        }

        body.dark-mode #timeSpentBox.time-danger {
            background: rgba(239,68,68,0.16) !important;
            color: #f87171 !important;
        }

        body.dark-mode .question-card,
        body.dark-mode .sidebar,
        body.dark-mode header {
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow:
                0 10px 30px rgba(0,0,0,0.25),
                inset 0 1px 0 rgba(255,255,255,0.03);
        }

        body.dark-mode .quiz-section > div[style*="background: #eff6ff"] {
    background: rgba(255,255,255,0.06) !important;
    color: #60a5fa !important;
    border-left: 5px solid #3b82f6 !important;
    border: 1px solid rgba(96,165,250,0.18) !important;
    backdrop-filter: blur(12px);
}

body.dark-mode .option,
body.dark-mode .ans-label {
    background: rgba(255,255,255,0.025);
    border: 1.5px solid rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 2px 8px rgba(0,0,0,0.12);
}

body.dark-mode .option:hover,
body.dark-mode .ans-label:hover {
    background: rgba(59,130,246,0.08);
    border-color: rgba(96,165,250,0.45);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(96,165,250,0.12),
        0 8px 20px rgba(0,0,0,0.18);
}

        body.dark-mode .nav-item {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
        }

        body.dark-mode .nav-item.done {
            background: rgba(59,130,246,0.14);
            border-color: #3b82f6;
            color: #60a5fa;
        }

        body.dark-mode .leaderboard-embed {
            background: rgba(15, 23, 42, 0.72);
            border: 1px solid rgba(255,255,255,0.06);
        }

        body.dark-mode .skel-bar {
            background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
            background-size: 400% 100%;
        }

body.dark-mode .lh-toast-mini {
    background: #1e293b !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}

body.dark-mode .lh-toast-mini .lh-toast-title { color: #60a5fa !important; }

body.dark-mode .lh-toast-mini .lh-toast-message { color: #94a3b8 !important; }

body.dark-mode .lh-toast-mini .lh-toast-message b { color: #4ade80 !important; }

/* --- 5.9 cauhoi/questionenglish.html --- */
        body.dark-mode {
                background:
        radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 35%),
        radial-gradient(circle at top right, rgba(14,165,233,0.06), transparent 30%),
        #071120;
            --bg: #071120;
            --minibox: rgba(17, 25, 40, 0.75);
            --bg-pattern: #0f1b2d;

            --text: #f8fafc;
            --text-sub: #94a3b8;

            --card: rgba(15, 23, 42, 0.78);
            --card-gradient: linear-gradient(
                145deg,
                rgba(17, 25, 40, 0.88),
                rgba(10, 18, 32, 0.92)
            );

            --primary: #3b82f6;
            --primary-light: rgba(59, 130, 246, 0.12);

            --info: #60a5fa;
            --success-light: rgba(34, 197, 94, 0.14);
            --danger-light: rgba(239, 68, 68, 0.14);

            --anshover: rgba(255,255,255,0.04);
            --answrong: rgba(127, 29, 29, 0.28);

            --tf-bg: rgba(15, 23, 42, 0.6);
            --tf-hover: rgba(255,255,255,0.03);
            --tf-border: rgba(255,255,255,0.06);

            --true-asw: #4ade80;
            --false-asw: #f87171;
        }

        body.dark-mode .timer-box {
            background: rgba(59,130,246,0.12);
            color: #60a5fa;
        }

        body.dark-mode .timer-box.timer-warning {
            background: rgba(234,179,8,0.14);
            color: #facc15;
        }

        body.dark-mode .timer-box.timer-danger {
            background: rgba(239,68,68,0.16);
            color: #f87171;
        }

        body.dark-mode #timeSpentBox.time-danger {
            background: rgba(239,68,68,0.16) !important;
            color: #f87171 !important;
        }

        body.dark-mode .question-card,
        body.dark-mode .sidebar,
        body.dark-mode header {
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,0.06);
            box-shadow:
                0 10px 30px rgba(0,0,0,0.25),
                inset 0 1px 0 rgba(255,255,255,0.03);
        }

        body.dark-mode .quiz-section > div[style*="background: #eff6ff"] {
    background: rgba(255,255,255,0.06) !important;
    color: #60a5fa !important;
    border-left: 5px solid #3b82f6 !important;
    border: 1px solid rgba(96,165,250,0.18) !important;
    backdrop-filter: blur(12px);
}

body.dark-mode .option,
body.dark-mode .ans-label {
    background: rgba(255,255,255,0.025);
    border: 1.5px solid rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 2px 8px rgba(0,0,0,0.12);
}

body.dark-mode .option:hover,
body.dark-mode .ans-label:hover {
    background: rgba(59,130,246,0.08);
    border-color: rgba(96,165,250,0.45);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(96,165,250,0.12),
        0 8px 20px rgba(0,0,0,0.18);
}

        body.dark-mode .nav-item {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
        }

        body.dark-mode .nav-item.done {
            background: rgba(59,130,246,0.14);
            border-color: #3b82f6;
            color: #60a5fa;
        }

        body.dark-mode .leaderboard-embed {
            background: rgba(15, 23, 42, 0.72);
            border: 1px solid rgba(255,255,255,0.06);
        }

        body.dark-mode .skel-bar {
            background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
            background-size: 400% 100%;
        }

        body.dark-mode .cloze-input {
            border-color: rgba(255,255,255,0.14) !important;
        }

body.dark-mode .lh-toast-mini {
    background: #1e293b !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}

body.dark-mode .lh-toast-mini .lh-toast-title { color: #60a5fa !important; }

body.dark-mode .lh-toast-mini .lh-toast-message { color: #94a3b8 !important; }

body.dark-mode .lh-toast-mini .lh-toast-message b { color: #4ade80 !important; }

body.dark-mode .listening-player {
    background: #1e293b !important;
    border-color: #334155 !important;
}

/* --- 5.10 tai-lieu/hub.html --- */
    body.dark-mode {
      --glass: rgba(15, 23, 42, 0.82);
      --line: rgba(148, 163, 184, 0.22);
      --text-main: #e2e8f0;
      --text-sub: #94a3b8;
      --panel: #1e293b;
      --panel-soft: #0f172a;
      --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      --shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.5);
      --primary-soft: rgba(8, 145, 178, 0.2);
      --primary-border: rgba(8, 145, 178, 0.5);
    }

    body.dark-mode {
      background: transparent;
    }