@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css');

/* ============================================
   VINHMATH — LINH KIỆN GIAO DIỆN DÙNG CHUNG
   (nút, ô nhập, thẻ, nhãn, bảng…)
   Mọi trang đều nhập file này + tokens.css
   ============================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  background:#faf8f5;
  color-scheme:light;
}
html[data-theme="dark"]{
  background:#000000;
  color-scheme:dark;
}
body {
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  background-size: cover;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  transition: background-color .22s ease, color .2s ease;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}
body::before, body::after {
  content: "";
  position: fixed;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  filter: blur(120px);
  z-index: -2;
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.5s ease, background 0.5s ease;
}
/* The public homepage owns its mathematical canvas. Never paint the older
   blue/gold blobs beneath it, even while its dedicated stylesheet is loading. */
html.vm-public-shell body { background: var(--vm-startup-bg); }
html.vm-public-shell body::before, html.vm-public-shell body::after { content: none; display: none; }
@keyframes floatBlob1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, 4vh) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes floatBlob2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4vw, -6vh) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}
body::before {
  top: -10vw;
  right: -10vw;
  background: radial-gradient(circle, rgba(30, 78, 140, 0.25) 0%, rgba(30, 78, 140, 0) 70%);
  animation: floatBlob1 25s ease-in-out infinite;
}
body::after {
  bottom: -10vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(194, 125, 0, 0.15) 0%, rgba(194, 125, 0, 0) 70%);
  animation: floatBlob2 20s ease-in-out infinite;
}

[data-theme="dark"] body::before {
  background: radial-gradient(circle, rgba(30, 78, 140, 0.2) 0%, rgba(30, 78, 140, 0) 70%);
  opacity: 0.45;
}
[data-theme="dark"] body::after {
  background: radial-gradient(circle, rgba(194, 125, 0, 0.1), rgba(194, 125, 0, 0) 70%);
  opacity: 0.35;
}

h1{font-family:var(--font-title);font-size:2.25rem;font-weight:700;letter-spacing:0.04em;line-height:1.25;color:var(--ink-2);text-transform:uppercase}
h2{font-family:var(--font-title);font-size:1.625rem;font-weight:700;letter-spacing:0.03em;color:var(--ink-2);text-transform:uppercase}
h3{font-family:var(--font-serif);font-size:1.25rem;font-weight:600;color:var(--ink-2)}
p{color:var(--ink)}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea,option{font-family:var(--font-sans)}

/* ---- Thanh đầu trang (Kính mờ trong suốt thích ứng) ---- */
.topbar{
  position:sticky;top:0;z-index:990;
  background:var(--topbar-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:var(--topbar-border);
  box-shadow:var(--shadow);
  transition: background 0.3s, border-color 0.3s;
}
.topbar .nav{width:min(1880px,100%);max-width:none;min-height:68px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;flex:0 0 auto;align-items:center;gap:10px;font-family:var(--font-title);font-weight:700;font-size:1.15rem;letter-spacing:0.05em;text-decoration:none;color:var(--topbar-text);text-transform:uppercase}
.logo .brand-container-el{display:inline-flex;align-items:center;gap:0;white-space:nowrap}
.logo .dot{
  width:30px;height:30px;border-radius:6px;background:var(--accent);
  color:#ffffff;display:grid;place-items:center;font-size:.95rem;font-weight:700;flex:none;
}
[data-theme="dark"] .logo .dot{
  color:#09152e;
}
.logo img{
  width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none;
}
.logo small{font-family:var(--font-sans);font-weight:500;color:var(--topbar-text-muted);font-size:.78rem;margin-left:2px;text-transform:none;letter-spacing:0}
.role-badge{font-family:var(--font-sans);font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:6px;margin-left:8px;text-transform:uppercase;letter-spacing:.5px;display:inline-block;line-height:1.2;vertical-align:middle}
.role-badge.badge-admin{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(194, 125, 0, 0.25)}
.role-badge.badge-teacher{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(26, 117, 86, 0.25)}
.role-badge.badge-assistant{background:var(--warn-soft);color:var(--warn);border:1px solid rgba(184, 125, 20, 0.25)}
.role-badge.badge-student{background:var(--topbar-btn-bg);color:var(--topbar-link);border:1px solid var(--topbar-btn-border)}
.role-badge.badge-parent{background:var(--topbar-btn-bg);color:var(--topbar-link);border:1px solid var(--topbar-btn-border)}

.navlinks{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:4px;align-items:center}
.navlinks a{
  text-decoration:none;font-size:.92rem;font-weight:600;color:var(--topbar-link);
  padding:7px 10px;border-radius:var(--r-sm);transition:all .15s;white-space:nowrap;
}
.navlinks a:hover{background:var(--topbar-btn-bg);color:var(--topbar-link-hover)}
.navlinks a.active {
  color: var(--topbar-link-active);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(194, 125, 0, 0.2);
  position: relative;
}
.navlinks a.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 3px;
  background: var(--accent-gradient);
  border-radius: 99px;
  box-shadow: 0 0 8px var(--accent);
}

/* Đồng bộ toàn bộ nút bấm trong Topbar để không bị che khuất và hiển thị đẹp mắt */
.topbar .btn-secondary {
  background: var(--topbar-btn-bg) !important;
  border: var(--topbar-btn-border) !important;
  color: var(--topbar-btn-text) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  font-family: var(--font-sans) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  font-size: 0.8rem !important;
  padding: 0 16px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm) !important;
  white-space: nowrap !important;
}
.topbar .btn-secondary:hover {
  background: var(--topbar-btn-hover-bg) !important;
  color: var(--topbar-link-hover) !important;
  border-color: var(--topbar-link-hover) !important;
}
.topbar #themeBtn {
  background: var(--topbar-btn-bg) !important;
  border: var(--topbar-btn-border) !important;
  color: var(--topbar-btn-text) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer;
}
.topbar #themeBtn:hover {
  background: var(--topbar-btn-hover-bg) !important;
  color: var(--topbar-link-hover) !important;
  border-color: var(--topbar-link-hover) !important;
}

/* ---- Dropdown menu quản trị ---- */
/* Phím tắt hướng màn hình — luôn dễ thấy trên điện thoại, không chen chúc topbar. */
.vm-orientation-btn,
.vm-orientation-panel { display: none; }

@media (max-width: 1024px), (pointer: coarse) {
  .vm-orientation-btn {
    position: fixed;
    z-index: 9490;
    left: max(12px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    min-width: 82px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-solid) 92%, var(--accent) 8%);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(20, 18, 12, .2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font: 750 .78rem/1 var(--font-sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .vm-orientation-btn > span:first-child { font-size: 1.15rem; color: var(--accent); }
  .vm-orientation-btn:active { transform: translateY(1px); }
  .vm-orientation-btn[data-mode="landscape"] > span:first-child { transform: rotate(90deg); }

  .vm-orientation-panel {
    position: fixed;
    z-index: 9500;
    left: max(12px, env(safe-area-inset-left));
    bottom: calc(max(14px, env(safe-area-inset-bottom)) + 54px);
    width: min(380px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    border-radius: 18px;
    background: var(--surface-solid);
    color: var(--ink);
    box-shadow: 0 18px 50px rgba(15, 13, 8, .28);
  }
  .vm-orientation-panel.is-open { display: block; animation: vmOrientationIn .18s ease-out; }
  .vm-orientation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .vm-orientation-head strong { display: block; font: 800 1rem/1.25 var(--font-sans); }
  .vm-orientation-head small { display: block; margin-top: 3px; color: var(--ink-3); font: 500 .74rem/1.35 var(--font-sans); }
  .vm-orientation-close {
    width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--ink-2); font-size: 1.35rem; line-height: 1; cursor: pointer;
  }
  .vm-orientation-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .vm-orientation-options button {
    min-width: 0; min-height: 62px; padding: 8px 5px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--ink-2); font-family: var(--font-sans); cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  }
  .vm-orientation-options button span { font-size: 1.3rem; }
  .vm-orientation-options button b { font-size: .75rem; }
  .vm-orientation-options button.is-active {
    border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .vm-orientation-status {
    margin: 12px 0 0; padding: 9px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 84%, var(--line) 16%);
    color: var(--ink-2); font: 550 .75rem/1.45 var(--font-sans);
  }
  .vm-orientation-status.is-success { background: var(--ok-soft); color: var(--ok); }
  .vm-orientation-status.is-error { background: var(--err-soft); color: var(--err); }
  .vm-orientation-status.is-info { background: var(--accent-soft); color: var(--ink-2); }
}

@keyframes vmOrientationIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-btn {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--topbar-link);
  padding: 7px 10px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav-dropdown-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--topbar-link-hover);
}
.nav-dropdown-btn.active {
  color: var(--topbar-link-active);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(194, 125, 0, 0.4);
  position: relative;
}
.nav-dropdown-btn.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 3px;
  background: var(--accent-gradient);
  border-radius: 99px;
  box-shadow: 0 0 8px var(--accent);
}
.nav-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  border-radius: var(--r-sm);
  min-width: 180px;
  z-index: 500;
  padding: 6px 0;
  margin-top: 6px;
}
.nav-dropdown-content a {
  display: block;
  padding: 8px 16px;
  font-size: 0.88rem !important;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 0 !important;
}
.nav-dropdown-content a:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}
.nav-dropdown-content a.active {
  color: var(--accent) !important;
  font-weight: 700;
  background: var(--accent-soft);
}
.nav-dropdown-content a.active::after {
  display: none !important;
}
.nav-dropdown.open .nav-dropdown-content {
  display: block;
}

/* ---- Chuông thông báo ---- */
.bell-wrap{position:relative;flex:none}
.nav-bell {
  position: relative;
  border: var(--topbar-btn-border);
  background: var(--topbar-btn-bg);
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--topbar-btn-text);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-bell:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--topbar-btn-hover-bg);
  box-shadow: 0 0 12px var(--accent-soft);
}
.bell-svg {
  width: 20px;
  height: 20px;
  stroke: currentColor !important;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}
.bell-svg path {
  fill: none;
  stroke: currentColor !important;
}
.bell-svg path:first-child {
  fill: var(--accent-soft);
}
.bell-svg path:last-child {
  fill: currentColor !important;
}
.nav-bell:hover .bell-svg {
  transform: rotate(15deg);
}
.bell-badge{position:absolute;top:-6px;right:-6px;background:var(--err);color:#fff;font-size:.66rem;font-weight:700;min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--topbar-bg)}
.bell-panel{position:absolute;right:0;top:calc(100% + 8px);width:330px;max-width:88vw;background:var(--surface-solid);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow);z-index:300;overflow:hidden;flex-direction:column}
.bell-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-solid);flex:none}
.bell-readall{border:none;background:none;color:var(--accent);cursor:pointer;font-size:.82rem;font-family:inherit}
.bell-list{max-height:340px;overflow-y:auto;overscroll-behavior:contain}
.bell-item{padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;gap:2px}
.bell-item:hover{background:var(--surface-2)}
.bell-item b{font-size:.85rem;line-height:1.4;color:var(--ink-2)}
.bell-item span{font-size:.8rem;color:var(--ink);line-height:1.45}
.bell-item small{font-size:.72rem;color:var(--ink-3)}
.bell-item.unread{background:var(--accent-soft)}
.vm-push-state{display:inline-flex;align-items:center;gap:6px;align-self:start;padding:5px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-solid);color:var(--ink-3);font:700 .68rem/1 var(--font-sans);white-space:nowrap}
.vm-push-state.is-enabled{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok)}
.vm-push-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-3) 14%,transparent)}
.vm-push-dot.is-enabled{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.bell-head .bell-readall{flex:none}
.vm-push-panel{padding:12px 14px;border-bottom:1px solid var(--line);background:linear-gradient(145deg,var(--accent-soft),var(--surface-solid) 70%)}
.vm-push-panel[hidden]{display:none}
.vm-push-panel-title{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:9px;align-items:start}
.vm-push-panel-title>span:first-child{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--surface-solid);border:1px solid var(--line-2);font-size:1rem}
.vm-push-panel-title b{display:block;color:var(--ink);font-size:.84rem;line-height:1.35}
.vm-push-panel-title small{display:block;margin-top:3px;color:var(--ink-3);font-size:.74rem;line-height:1.45}
.vm-push-actions{display:flex;gap:8px;margin-top:11px}
.vm-push-primary,.vm-push-test{min-height:36px;padding:7px 11px;border-radius:9px;font:800 .75rem/1.2 var(--font-sans);cursor:pointer}
.vm-push-primary{flex:1;border:1px solid var(--accent);background:var(--accent);color:#fff}
.vm-push-test{border:1px solid var(--line-2);background:var(--surface-solid);color:var(--ink-2)}
.vm-push-primary:disabled,.vm-push-test:disabled{opacity:.58;cursor:not-allowed}
.vm-push-message{margin:9px 0 0;padding:8px 9px;border-radius:8px;background:var(--surface-solid);color:var(--ink-2);font-size:.73rem;line-height:1.45}
.vm-push-message.is-success{color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}
.vm-push-message.is-error{color:var(--err);border:1px solid color-mix(in srgb,var(--err) 35%,transparent)}
.vm-push-message.is-info{color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.vm-push-privacy{margin:9px 0 0;color:var(--ink-3);font-size:.68rem;line-height:1.45}

@media(max-width:768px){
  .bell-panel{position:fixed;top:var(--vm-bell-panel-top,calc(var(--vm-safe-top) + 66px));bottom:max(8px,var(--vm-safe-bottom));right:max(8px,var(--vm-safe-right));left:max(8px,var(--vm-safe-left));width:auto;max-width:none;max-height:none}
  .bell-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:10px 12px}
  .bell-head>b{grid-column:1;grid-row:1;align-self:center}
  .bell-head .bell-readall{grid-column:2;grid-row:1;min-height:36px;padding:0 4px}
  .vm-push-panel{box-sizing:border-box;flex:none;max-height:min(38dvh,300px);overflow-y:auto;margin:9px 10px 7px;padding:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2);box-shadow:0 4px 14px rgba(31,24,15,.05)}
  .vm-push-panel-title{grid-template-columns:34px minmax(0,1fr);gap:5px 10px;align-items:start}
  .vm-push-panel-title>span:first-child{grid-column:1;grid-row:1 / span 2;width:34px;height:34px}
  .vm-push-panel-title>div{grid-column:2;min-width:0}
  .vm-push-panel-title b{font-size:.82rem}
  .vm-push-panel-title small{max-width:34ch;font-size:.72rem}
  .vm-push-state{grid-column:2;justify-self:start;max-width:100%;padding:5px 8px;font-size:.66rem}
  .vm-push-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;margin-top:10px}
  .vm-push-primary{box-sizing:border-box;width:100%;min-width:0}
  .vm-push-privacy{display:none}
  .bell-list{flex:1;min-height:0;max-height:none;overflow-y:auto}
}

.nav-burger{display:none;border:var(--topbar-btn-border);background:var(--topbar-btn-bg);color:var(--topbar-btn-text);font-size:1.1rem;width:38px;height:38px;border-radius:var(--r-sm);cursor:pointer;flex:none;transition:all 0.2s ease}
.nav-burger:hover {
  background: var(--topbar-btn-hover-bg);
  color: var(--topbar-link-hover);
  border-color: var(--topbar-link-hover);
}
@media(max-width:960px){
  .topbar .nav{position:relative;flex-wrap:wrap}
  .nav-burger{display:grid;place-items:center}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border:1px solid var(--line);border-top:none;box-shadow:0 14px 34px rgba(0,0,0,.35);flex-direction:column;align-items:stretch;padding:8px 16px 14px;gap:2px;z-index:99;max-height:calc(100vh - 60px);overflow-y:auto}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 14px;font-size:1rem}
  .nav-dropdown {
    width: 100%;
  }
  .nav-dropdown-btn {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 1rem;
  }
  .nav-dropdown-btn.active::after {
    display: none !important;
  }
  .nav-dropdown-content {
    display: none;
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 16px;
    margin-top: 0;
  }
}

/* ---- Nút ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:.94rem;font-weight:600;
  padding:10px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);text-decoration:none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.btn-primary{
  background: var(--accent-gradient);
  color: #fff;
  border: 1px solid var(--accent);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transition: left 0.6s ease;
}
.btn-primary:hover::before {
  left: 150%;
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--accent-soft), 0 0 12px var(--accent-soft);
  filter: brightness(1.1);
}
.btn-secondary{
  background: var(--surface);
  color: var(--ink);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn-secondary:hover{
  background: var(--surface-2);
  border-color: var(--line-2);
  transform: translateY(-1px);
}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-sm{padding:6px 14px;font-size:.85rem}
.btn-lg{padding:13px 26px;font-size:1rem}

/* ---- Ô nhập ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px}
.input{
  width:100%;font-family:inherit;font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:10px 14px;transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---- Thẻ ---- */
.card{
  background: var(--card-glow, transparent), var(--surface);
  border:var(--glass-border);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-radius:var(--r-md);
  padding:24px;
  box-shadow:var(--shadow);
  position:relative;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
/* Bỏ thanh vàng 4px cạnh trên — thay bằng lớp đổ màu gradient (--card-glow) */
.card::before { display: none !important; }
/* .card::after {
  content: "";
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px dashed rgba(194, 125, 0, 0.15);
  border-radius: calc(var(--r-md) - 6px);
  pointer-events: none;
  transition: border-color 0.3s;
}
.card:hover::after {
  border-color: rgba(194, 125, 0, 0.4);
} */
.card:hover {
  background: var(--card-glow, transparent), var(--surface-2);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px 0 rgba(31, 58, 96, 0.12), 0 0 15px var(--accent-soft);
  border-color: var(--line-2);
}
[data-theme="dark"] .card:hover {
  box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.55), 0 0 20px var(--accent-soft);
  border-color: rgba(194, 125, 0, 0.35);
}

/* ---- LaTeX-inspired document boxes ---- */
.box-vd {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 5px solid var(--ink-2);
  border-radius: var(--r-sm);
  padding: 16px;
  margin-bottom: 20px;
  color: var(--ink);
  position: relative;
  box-shadow: var(--shadow);
}
.box-vd .box-title {
  font-family: var(--font-title);
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}
.box-bt {
  background: #fffbeb;
  border: 1px solid rgba(194, 125, 0, 0.2);
  border-left: 5px solid #c27d00;
  border-radius: var(--r-sm);
  padding: 16px;
  margin-bottom: 20px;
  color: #1e293b;
  position: relative;
  box-shadow: 0 2px 8px rgba(194, 125, 0, 0.03);
}
.box-bt .box-title {
  font-family: var(--font-title);
  color: #c27d00;
  font-weight: 700;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---- Classic Western decorative line divider ---- */
.classic-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0;
}
.classic-divider::before, .classic-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--line-2), transparent);
}
.classic-divider::after {
  background: linear-gradient(to left, transparent, var(--line-2), transparent);
}
.classic-divider-symbol {
  font-family: var(--font-title);
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ---- Nhãn ---- */
.badge{display:inline-block;font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:99px}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-err{background:var(--err-soft);color:var(--err)}
.badge-mute{background:var(--surface-2);color:var(--ink-2)}

/* ---- Bảng ---- */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line-2)}
td{padding:12px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
.num{font-variant-numeric:tabular-nums}

/* ---- Thanh tiến độ ---- */
.bar{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}

/* ---- Thống kê ---- */
.stat b{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.2}
.stat span{font-size:.85rem;color:var(--ink-2)}

/* ---- Nhãn mục ---- */
.sec-label{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}

/* ---- Hiệu ứng vinh danh Sáng lập/Owner ---- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.name-owner {
  font-weight: 800 !important;
  color: #e74c3c !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-owner {
  background: linear-gradient(120deg, #FFD700 0%, #FF8C00 50%, #FFD700 100%) !important;
  background-size: 200% auto !important;
  color: #fff !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.2) !important;
  box-shadow: 0 1px 3px rgba(230,126,34,0.4) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  animation: shimmer 3s linear infinite !important;
  display: inline-block;
  vertical-align: middle;
}

/* ---- Hiệu ứng cuộn trồi lên (Scroll Reveal) ---- */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Phần Hành trình Thầy Vinh (Giao diện Carousel cao cấp) ---- */
.journey-section {
  padding: 56px 24px;
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
}
.timeline-wrapper {
  position: relative;
  width: 100%;
  padding: 0 48px; /* Chừa khoảng trống cho nút điều hướng tràn lề */
}
.timeline-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 24px 0 36px; /* Chừa chỗ cho hiệu ứng scale của card active */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Ẩn thanh cuộn mặc định */
}
.timeline-track::-webkit-scrollbar {
  display: none; /* Ẩn thanh cuộn trên Chrome/Safari */
}
.timeline-card {
  flex: 0 0 320px;
  scroll-snap-align: center;
  background: var(--surface);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease, 
              background-color 0.4s ease,
              opacity 0.4s ease;
  opacity: 0.65; /* Các card hai bên mờ nhẹ để hướng tiêu điểm vào giữa */
  transform: scale(0.94);
}
/* Card active ở trung tâm */
.timeline-card.active-card {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 16px 36px var(--accent-soft);
  opacity: 1;
  z-index: 2;
}
.timeline-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.timeline-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.timeline-card p {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* Nút bấm tròn trắng/glassmorphic sang trọng */
.timeline-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #4a5568;
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}
/* Hỗ trợ dark mode cho nút điều hướng */
[data-theme="dark"] .timeline-nav-btn {
  background: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.timeline-nav-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 20px var(--accent-soft);
}
.prev-btn {
  left: -4px;
}
.next-btn {
  right: -4px;
}
.timeline-nav-btn.disabled {
  opacity: 0;
  pointer-events: none;
}

/* Chấm trang (Dots Indicator) */
.timeline-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-2);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.timeline-dot.active {
  width: 24px;
  border-radius: 99px;
  background: var(--accent);
}

@media (max-width: 768px) {
  .timeline-wrapper {
    padding: 0 16px;
  }
  .timeline-nav-btn {
    display: none; /* Ẩn nút trên di động, vuốt trực quan hơn */
  }
  .timeline-card {
    flex: 0 0 280px;
  }
}

/* Modal Upgrades & Interactive Elements */
.modal-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 20px;
  padding-bottom: 10px;
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all 0.15s;
}

.tab-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
}

.inline-modal {
  animation: fadeIn 0.2s ease-out;
}

/* Styled Table for Topics list */
#modalChuyenDe table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#modalChuyenDe th, #modalChuyenDe td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  text-align: left;
}

#modalChuyenDe th {
  font-weight: 700;
  color: var(--ink-2);
  background: var(--surface-2);
}

#modalChuyenDe tr:hover td {
  background: var(--surface-2);
}

/* --- STUDENT ATTENDANCE POPUP MODAL --- */
.student-attendance-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: samFadeIn 0.25s ease;
}
.sam-inner {
  background: var(--surface);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  max-width: 400px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  animation: samScaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sam-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3);
  line-height: 1;
}
.sam-close:hover {
  color: var(--ink);
}
.sam-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: samPulseIcon 2s infinite;
}
.sam-inner h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--ink);
}
.sam-inner p {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.sam-session-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 20px;
  padding: 8px 12px;
  background: var(--accent-soft);
  border-radius: var(--r-md);
  display: inline-block;
}
.sam-input-wrapper {
  margin: 12px 0;
}

@keyframes samFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes samScaleUp {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes samPulseIcon {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* --- APPLE CONTROL CENTER WIDGETS --- */
.control-center-wrapper {
  position: relative;
  display: inline-block;
  z-index: 999;
}
.control-center-btn {
  background: var(--topbar-btn-bg);
  border: var(--topbar-btn-border);
  color: var(--topbar-btn-text);
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.control-center-btn:hover {
  background: var(--topbar-btn-hover-bg);
  color: var(--topbar-link-hover);
  border-color: var(--topbar-link-hover);
  transform: translateY(-1px);
}
.control-center-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.control-center-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
  animation: ccSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1000;
}
.control-center-panel.open {
  display: flex;
}

@keyframes ccSlideUp {
  from { transform: translateY(12px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Widgets Grid */
.cc-widgets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cc-widget {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-theme="light"] .cc-widget {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-widget-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
}
.cc-widget-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.cc-widget-info b {
  font-size: 0.85rem;
  color: var(--ink);
}
.cc-widget-info span {
  font-size: 0.72rem;
  color: var(--ink-2);
}

/* Slider Controls */
.cc-control-row {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="light"] .cc-control-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-control-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.cc-control-label span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
}
.cc-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cc-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.cc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface-solid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.1s;
}
.cc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Segmented Theme Switcher */
.cc-theme-switcher {
  display: flex;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 4px;
}
[data-theme="light"] .cc-theme-switcher {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-theme-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cc-theme-btn.active {
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cc-theme-schedule {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
}
.cc-schedule-mode,
.cc-schedule-times label {
  display: grid;
  gap: 5px;
  color: var(--ink-2);
  font-size: .75rem;
  font-weight: 700;
}
.cc-schedule-mode select,
.cc-schedule-times input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-solid);
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
  color-scheme: inherit;
}
.cc-schedule-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cc-schedule-times input:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.cc-schedule-save,
.cc-follow-system {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}
.cc-schedule-save:disabled { opacity: .6; cursor: wait; }
.cc-personal-theme{display:grid;gap:12px;padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.cc-personal-theme h3{margin:0;font:700 .95rem/1.4 var(--font-sans);color:var(--ink)}
.cc-personal-note,.cc-personal-status{margin:0;font-size:.73rem;line-height:1.6;color:var(--ink-3)}
.cc-personal-status:not(:empty){color:var(--ink);padding:8px 10px;border-radius:8px;background:var(--accent-soft)}
.cc-personal-theme [hidden]{display:none!important}
.cc-personal-quick{display:grid;gap:8px}
#ccPanel #ccGlobalThemeLink[hidden]{display:none!important}
.cc-follow-system {
  display: block;
  width: 100%;
  margin-top: 10px;
}
#ccThemeScheduleStatus {
  color: var(--ink-3);
  line-height: 1.4;
}

@media (max-width: 480px) {
  .cc-schedule-times { grid-template-columns: 1fr; }
}

/* Accent Color Picker */
.cc-color-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 12px;
}
[data-theme="light"] .cc-color-picker {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-color-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.cc-color-dots {
  display: flex;
  gap: 8px;
}
.cc-color-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid var(--surface-solid);
}
.cc-color-dot:hover {
  transform: scale(1.25);
}
.cc-color-dot.active {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--accent);
}

/* --- VINHMATH AI CHAT WIDGET --- */
.ai-chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px var(--accent-soft), 0 0 10px var(--accent-soft);
  cursor: pointer;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ai-chat-bubble:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 8px 24px var(--accent-soft), 0 0 15px var(--accent);
}
.ai-chat-bubble svg {
  width: 24px;
  height: 24px;
}
.ai-chat-box {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 380px;
  height: 520px;
  max-width: 90vw;
  max-height: 80vh;
  border-radius: var(--r-lg, 14px);
  background: var(--surface);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: aiChatSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background-color 0.3s, border-color 0.3s;
}
@keyframes aiChatSlideIn {
  from { transform: translateY(20px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.acb-header {
  padding: 14px 16px;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.acb-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.acb-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.acb-close:hover {
  opacity: 1;
}
.acb-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.92rem;
  background: transparent;
}
.acb-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.acb-msg.ai {
  background: var(--surface-2);
  color: var(--ink);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--line-2);
}
.acb-msg.user {
  background: var(--accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.acb-msg p {
  color: inherit;
  margin-bottom: 0.5em;
}
.acb-msg p:last-child {
  margin-bottom: 0;
}
.acb-msg ul, .acb-msg ol {
  padding-left: 1.2em;
  margin: 0.5em 0;
}
.acb-msg a {
  color: inherit;
  text-decoration: underline;
}
.acb-msg code {
  background: rgba(0,0,0,0.1);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 0.85em;
}
[data-theme="dark"] .acb-msg code {
  background: rgba(255,255,255,0.15);
}
.acb-footer {
  padding: 12px;
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: 8px;
  background: var(--surface-solid);
}
.acb-footer input {
  flex: 1;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s;
}
.acb-footer input:focus {
  border-color: var(--accent);
}
.acb-footer button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}
.acb-typing {
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  align-self: flex-start;
  background: var(--surface-2);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--line-2);
}
.acb-typing span {
  width: 6px;
  height: 6px;
  background: var(--ink-3);
  border-radius: 50%;
  animation: acbTyping 1.4s infinite both;
}
.acb-typing span:nth-child(2) { animation-delay: .2s; }
.acb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes acbTyping {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* CC Toggle row styling */
.cc-toggle-row {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
[data-theme="light"] .cc-toggle-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-toggle-label {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cc-toggle-label b {
  font-size: 0.82rem;
  color: var(--ink);
}
.cc-toggle-label span {
  font-size: 0.7rem;
  color: var(--ink-2);
}
.cc-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 24px;
}
.cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cc-slider-switch {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--line);
  border-radius: 24px;
  transition: .3s;
}
.cc-slider-switch:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--surface-solid);
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cc-switch input:checked + .cc-slider-switch {
  background-color: var(--accent);
}
.cc-switch input:checked + .cc-slider-switch:before {
  transform: translateX(22px);
}
.cc-input-row {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-theme="light"] .cc-input-row {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.03);
}
.cc-input-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.cc-input-group {
  display: flex;
  gap: 6px;
}
.cc-input-group input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8rem;
  font-family: var(--font-mono, monospace);
  outline: none;
}
.cc-input-group button {
  padding: 6px 12px;
  font-size: 0.8rem;
  border-radius: 6px;
}

/* ===== TỐI ƯU GIAO DIỆN MOBILE TOÀN HỆ THỐNG ===== */
@media (max-width: 960px) {
  /* Cho phép thanh đầu trang chứa menu burger thu gọn */
  .topbar .nav {
    flex-wrap: nowrap !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
}

@media (max-width: 768px) {
  /* Chặn cuộn ngang toàn trang -> hết tình trạng trượt sang phải bị dư một khúc.
     (Lịch tuần/bảng rộng vẫn cuộn được bên trong khung của nó) */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* 1. Tối ưu Topbar (Thanh đầu trang) không bị vỡ/xuống dòng */
  .topbar .nav {
    padding: 8px 10px !important;
    gap: 6px !important;
    max-width: 100% !important;
  }
  /* Ẩn các nút rườm rà trên mobile để tránh chật chội */
  #controlCenterWrapper,
  #screenshotBtn {
    display: none !important;
  }
  /* Đảm bảo các nút còn lại không bị rớt chữ */
  .topbar .btn,
  .topbar button,
  .topbar a {
    white-space: nowrap !important;
  }
  /* Luôn giữ nút menu ☰ và chuông hiển thị, không bị cắt */
  .nav-burger, .bell-wrap { flex: 0 0 auto !important; }
  /* Ẩn nhãn vai trò (QUẢN TRỊ) trên mobile để chừa chỗ cho nút ☰ */
  .role-badge { display: none !important; }
  .logo {
    font-size: 1rem !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }
  .logo .dot {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem !important;
  }
  .logo img {
    width: 26px !important;
    height: 26px !important;
  }
  .logo small {
    display: none !important; /* Ẩn chữ phụ trên mobile */
  }
  
  /* Giảm khoảng cách trong div tiện ích bên phải */
  .topbar .nav > div[style*="display:flex"],
  .topbar .nav > div {
    gap: 6px !important;
  }
  
  /* Biến nút Đăng xuất thành biểu tượng để siêu tiết kiệm diện tích */
  .topbar button[onclick*="dangXuat"] {
    font-size: 0 !important;
    padding: 8px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: var(--r-sm, 8px) !important;
  }
  .topbar button[onclick*="dangXuat"]::before {
    content: "🚪";
    font-size: 1.05rem !important;
  }

  /* Bảng Control Center: thành tấm phủ gần full màn hình, cuộn được, không bị khuất/lệch */
  .control-center-panel {
    position: fixed !important;
    top: 58px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Khung chat Trợ lý AI cũng vừa màn hình, không tràn ra ngoài */
  #aiChatBox {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 80px !important;
    max-height: calc(100vh - 150px) !important;
  }

  /* 2. Tối ưu kiểu chữ, nút bấm & thẻ trên mobile */
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
  h3 { font-size: 1.12rem !important; }

  .wrap {
    padding: 0 16px 64px !important; /* Thu hẹp lề hai bên lề để tăng diện tích hiển thị */
  }
  
  .card, [class*="-card"] {
    padding: 16px !important; /* Giảm padding thẻ */
  }
  
  .btn {
    padding: 8px 14px !important;
    font-size: 0.88rem !important;
  }
  .btn-sm {
    padding: 6px 10px !important;
    font-size: 0.8rem !important;
  }
  .input {
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
  }

  /* Đảm bảo bảng biểu tự cuộn ngang khi tràn */
  .card:has(table) {
    overflow-x: auto !important;
  }
  th, td {
    padding: 8px 10px !important; /* Thu nhỏ cell padding */
  }

  /* 3. Tối ưu mục Blog trên trang chủ */
  .blog-sec-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }
  .blog-sec-head h2 {
    font-size: 1.15rem !important;
  }
  #btnVietBlogTrangChu {
    width: auto !important;
    padding: 6px 12px !important;
  }
  .blog-slider-container {
    padding: 12px !important;
  }
  .blog-slider {
    gap: 12px !important;
  }
  .blog-card {
    flex: 0 0 250px !important; /* Giảm chiều rộng card trên mobile */
    padding: 14px !important;
  }
  .blog-card .bc-title {
    font-size: 0.98rem !important;
  }
  .blog-card .bc-ex {
    font-size: 0.82rem !important;
  }
  
  /* 4. Tối ưu bảng Lịch tuần và Đếm ngược để vừa vặn hơn */
  .date-display-card {
    padding: 20px 14px !important;
  }
  .date-day-num {
    font-size: 3.5rem !important;
  }
  .countdown-timer-grid {
    gap: 6px !important;
  }
  .timer-box {
    padding: 8px 4px !important;
  }
  .timer-box b {
    font-size: 1.1rem !important;
  }
  .timer-box span {
    font-size: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  /* Lề cực nhỏ cho màn hình siêu hẹp như iPhone SE */
  .wrap {
    padding: 0 12px 48px !important;
  }
  
  /* Đăng nhập di động */
  .main {
    padding: 24px 12px !important;
  }
  .box {
    padding: 24px 16px !important;
    border-radius: var(--r-sm) !important;
  }

  /* Khung thống kê nhanh 3 cột nằm ngang cực sang xịn mịn */
  .stats .grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .stats .stat {
    padding: 8px 4px !important;
  }
  .stats .stat b {
    font-size: 1.1rem !important;
  }
  .stats .stat span {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
  }
}


/* ============================================================
   BỘ NHẬN DIỆN CLB M.A.P (áp cho lớp có theme = map)
   ============================================================ */
body.theme-map {
  --accent:#1B2644; --accent-soft:#EAEFF6;
  /* Gradient nút/nhấn: đổi vàng -> navy (chữ trắng dễ đọc trên nền sáng) */
  --accent-gradient: linear-gradient(135deg, #2A3B66 0%, #16213D 100%);
  --accent-2:#24335C; --accent-strong:#16213D; --gold:#1B2644;
  --topbar-link-active: var(--accent); --topbar-link-hover: var(--accent);
}
/* Dark mode: làm xanh navy sáng lên, nổi bật dễ nhìn */
[data-theme="dark"] body.theme-map {
  --accent:#8FB3EC; --accent-soft:#233149;
  --accent-gradient: linear-gradient(135deg, #3E5EA0 0%, #24335C 100%);
  --accent-2:#5B7FC0; --accent-strong:#8FB3EC; --gold:#8FB3EC;
  --topbar-link-active: var(--accent); --topbar-link-hover: var(--accent);
}
/* Ép các mảng vàng đặc trưng còn sót (badge/gạch chân/vòng %) sang navy trong theme M.A.P */
body.theme-map .new-lesson-badge,
body.theme-map .badge-accent { background: var(--accent-gradient) !important; color:#fff !important; }

/* Logo chìm giữa màn hình, mờ, đè lên mọi cửa sổ (không chặn thao tác) */
#mapWatermarkGlobal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, 60vw); max-width: 620px; height: auto;
  opacity: .06; pointer-events: none; z-index: 9998; display: none; user-select: none;
}
[data-theme="dark"] #mapWatermarkGlobal { opacity: .12; }
body.theme-map #mapWatermarkGlobal { display: block; }

/* Logo M.A.P to & nổi bật hơn trên thanh điều hướng */
body.theme-map .topbar .logo img { width:44px; height:44px; border-radius:50%; object-fit:contain; }
body.theme-map .topbar .logo { font-size:1.3rem; letter-spacing:.08em; }

/* ============================================================
   BỘ NHẬN DIỆN TRUNG TÂM DUY MINH (áp cho lớp có theme = duyminh)
   Tông đỏ – trắng. DUY đỏ · MINH trắng.
   ============================================================ */
body.theme-duyminh {
  --accent:#C81E27; --accent-soft:#FCEBEC;
  --accent-gradient: linear-gradient(135deg, #D42730 0%, #8E1018 100%);
  --accent-2:#A5161E; --accent-strong:#8E1119; --gold:#C81E27;
  --topbar-link-active: var(--accent); --topbar-link-hover: var(--accent);
}
/* Dark mode: đỏ sáng hơn để nổi bật, dễ đọc trên nền tối */
[data-theme="dark"] body.theme-duyminh {
  --accent:#F3767B; --accent-soft:#3A1F22;
  --accent-gradient: linear-gradient(135deg, #E5484D 0%, #B0313A 100%);
  --accent-2:#E5565C; --accent-strong:#F3767B; --gold:#F3767B;
  --topbar-link-active: var(--accent); --topbar-link-hover: var(--accent);
}
body.theme-duyminh .new-lesson-badge,
body.theme-duyminh .badge-accent { background: var(--accent-gradient) !important; color:#fff !important; }
body.theme-duyminh .topbar .logo img { width:44px; height:44px; border-radius:50%; object-fit:contain; }
body.theme-duyminh .topbar .logo { font-size:1.3rem; letter-spacing:.05em; }
/* Wordmark DUY (đỏ) + MINH (trắng trên nền đỏ) — đọc tốt trên nền sáng lẫn tối */
.dm-mark { display:inline-flex; align-items:center; font-weight:900; letter-spacing:.02em; }
.dm-mark .dm-duy { color:var(--accent); }
.dm-mark .dm-minh { background:var(--accent); color:#fff; padding:0 6px; border-radius:5px; margin-left:3px; }

/* =========================================================================
   LỚP TINH CHỈNH "ANTIGRAVITY × VINHMATH"  (v6.0)
   Cảm hứng antigravity.google: tối giản, nhiều khoảng trắng, chuyển động
   mượt & tinh tế, dải sáng aurora nhẹ. Giữ bản sắc VÀNG GOLD của VinhMath
   (đen + vàng ở nền tối, kem/trắng + vàng ở nền sáng).
   ========================================================================= */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* mượt, giảm tốc êm */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* nảy nhẹ tinh tế */
  --dur-1: 0.18s;
  --dur-2: 0.35s;
  --dur-3: 0.6s;
  --r-xl: 22px;
  --r-pill: 999px;
  /* Bóng đổ nhiều lớp, mềm mại kiểu Apple/Google */
  --shadow-soft: 0 1px 2px rgba(20,20,40,.04), 0 8px 24px rgba(20,20,40,.06);
  --shadow-lift: 0 2px 6px rgba(20,20,40,.06), 0 18px 40px rgba(20,20,40,.12);
  --aurora-1: rgba(223, 188, 94, 0.28);  /* vàng gold */
  --aurora-2: rgba(48, 120, 200, 0.16);  /* xanh dương nhạt */
  --aurora-3: rgba(240, 176, 64, 0.14);
  /* Đổ màu gradient vàng dịu cho thẻ (thay thanh vàng cạnh trên) — nền sáng */
  --card-glow:
    radial-gradient(circle at 20% -12%, rgba(224,160,32,0.10), transparent 56%),
    radial-gradient(circle at 84% -4%, rgba(181,96,52,0.055), transparent 56%);
}
[data-theme="dark"] {
  --shadow-soft: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-lift: 0 2px 8px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.6);
  --aurora-1: rgba(223, 188, 94, 0.20);
  --aurora-2: rgba(70, 140, 220, 0.12);
  --aurora-3: rgba(243, 212, 131, 0.10);
  /* Đổ màu gradient ấm hơn cho nền tối (giống bảng vinh danh) */
  --card-glow:
    radial-gradient(circle at 20% -12%, rgba(241,196,15,0.13), transparent 56%),
    radial-gradient(circle at 84% -4%, rgba(181,72,58,0.10), transparent 56%);
}

/* --- Chuyển động mượt cho các thành phần tương tác --- */
a, button, .btn, .card, .nav-btn, .navlinks a, input, select, textarea, summary {
  transition: color var(--dur-1) var(--ease-out),
              background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out);
}

/* --- Nút bấm tinh chỉnh: nâng nhẹ khi hover, bo tròn mềm --- */
.btn { border-radius: var(--r-md); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { border-radius: var(--r-pill); padding: 14px 30px; font-weight: 700; letter-spacing: .01em; }
.btn-primary.btn-lg:hover { box-shadow: 0 10px 30px var(--accent-soft), 0 4px 12px var(--accent-soft); }

/* --- Thẻ (card) nâng nhẹ mềm mại --- */
.card { box-shadow: var(--shadow-soft); }
.card:hover { box-shadow: var(--shadow-lift); }

/* --- Vòng focus vàng gold rõ ràng, dễ nhìn (a11y) --- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Thanh cuộn mảnh, tinh tế --- */
* { scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); background-clip: padding-box; }

/* =========================================================================
   AURORA — dải sáng gradient mềm, trôi rất chậm (phong cách antigravity)
   Đặt <div class="vm-aurora"><span></span><span></span><span></span></div>
   ngay sau <body> để có nền sáng dịu. Rất nhẹ, không gây rối mắt.
   ========================================================================= */
.vm-aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.vm-aurora span {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: .9; will-change: transform;
}
.vm-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-1), transparent 70%);
  animation: auroraDrift1 26s var(--ease-out) infinite alternate;
}
.vm-aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: -6vw; top: 8vh;
  background: radial-gradient(circle at 50% 50%, var(--aurora-2), transparent 70%);
  animation: auroraDrift2 32s var(--ease-out) infinite alternate;
}
.vm-aurora span:nth-child(3) {
  width: 38vw; height: 38vw; left: 30vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, var(--aurora-3), transparent 70%);
  animation: auroraDrift3 38s var(--ease-out) infinite alternate;
}
@keyframes auroraDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.12); } }
@keyframes auroraDrift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-5vw,6vh,0) scale(1); } }
@keyframes auroraDrift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,-5vh,0) scale(1.15); } }

/* =========================================================================
   SCROLL REVEAL — hiện dần khi cuộn tới (JS gắn .is-visible)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); animation: revealFailsafe 0s linear 1.2s forwards; }
.reveal.is-visible, .reveal.active { opacity: 1; transform: none; }
/* Failsafe: nếu JS lỗi/không chạy, vẫn hiện nội dung sau 1.5s (không khoá màn đăng nhập) */
@keyframes revealFailsafe { to { opacity: 1; transform: none; } }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-scale { transform: translateY(22px) scale(.98); }
.reveal-scale.is-visible, .reveal-scale.active { transform: none; }
/* An toàn: nếu JS không chạy, sau 1.2s vẫn hiện nội dung */
.no-js .reveal { opacity: 1; transform: none; }

/* --- Tôn trọng người dùng tắt hiệu ứng chuyển động --- */
@media (prefers-reduced-motion: reduce) {
  .vm-aurora span { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a, button, .btn, .card { transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Performance budget: transitions stay on compositor-friendly properties. */
.btn, .tab-btn, .navlinks a, .nav-dropdown-btn, .card, .vm-install-btn {
  transition-property: transform, opacity, color, background-color, border-color, box-shadow !important;
  transition-duration: .18s !important;
  transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
}

/* Điều hướng giữa các tệp HTML phải đổi khung hình trực tiếp. View Transition
   đa trang chụp lại toàn bộ nền, hạt động và lớp kính rồi chồng ảnh cũ/mới;
   trên GPU yếu hoặc khi hai trang có chiều cao khác nhau sẽ tạo bóng ma và
   khựng rõ rệt. Theme preflight và menu phiên đã sẵn sàng từ khung hình đầu,
   nên không cần giữ bất kỳ ảnh chụp chuyển tiếp nào. */
@view-transition { navigation: none; }
.topbar,
.topbar-lesson,
.space-topbar,
.portal-topbar {
  view-transition-name: none;
}
.vm-page-hidden *, .vm-page-hidden *::before, .vm-page-hidden *::after {
  animation-play-state: paused !important;
}
.student-results-list > *, #dsDeThi > .exam-card, .learning-timeline > *, .submission-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}
html.vm-lite-motion body::before,
html.vm-lite-motion body::after,
html.vm-lite-motion .vm-aurora span {
  animation: none !important;
  filter: blur(56px) !important;
}
html.vm-lite-motion .card,
html.vm-lite-motion .topbar,
html.vm-lite-motion .modal-content {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.vm-lite-motion [class*="glow"],
html.vm-lite-motion [class*="pulse"],
html.vm-lite-motion [class*="shimmer"] {
  animation: none !important;
}
/* Cuộn mượt toàn trang */
html { scroll-behavior: smooth; }

/* ===== FIX MODAL BỊ ĐẨY LÊN CAO CHE NÚT X (áp dụng mọi trang) ===== */
/* Modal căn từ trên xuống + chừa khoảng cho thanh điều hướng cố định, cho phép cuộn overlay khi nội dung dài */
.modal {
  align-items: flex-start !important;
  overflow-y: auto !important;
  padding: 84px 14px 28px !important;
  -webkit-overflow-scrolling: touch;
}
.modal > .modal-content {
  max-height: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 640px) {
  .modal { padding: 70px 10px 24px !important; }
}

/* =========================================================================
   VINHMATH UX 7.4 — responsive, touch, modal va PWA
   Lop nay chi tinh chinh cac thanh phan dung chung, giu nguyen nhan dien goc.
   ========================================================================= */
:root {
  --vm-safe-top: env(safe-area-inset-top, 0px);
  --vm-safe-right: env(safe-area-inset-right, 0px);
  --vm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vm-safe-left: env(safe-area-inset-left, 0px);
  --vm-touch: 44px;
}

html {
  min-width: 0;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(74px + var(--vm-safe-top));
}

body {
  min-width: 0;
  overflow-wrap: break-word;
}

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

/* Khi nhiều modal mở chồng nhau, chỉ tầng trên cùng tạo nền tối và nhận chạm.
   Tầng dưới vẫn giữ nguyên nội dung để trở lại ngay sau khi đóng modal con. */
.vm-popup-underlay {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Tương thích với bản trình soạn bài cũ có thể còn nằm trong cache của PWA.
   Lớp tải cũ phủ toàn bộ form và chặn mọi thao tác khi truy vấn mạng chậm. */
#lessonEditorLoading {
  display: none !important;
  pointer-events: none !important;
}

main, .wrap, .card, .topbar .nav, .navlinks,
.grid, .grid-2, .grid-3, .form-row, .form-grid {
  min-width: 0;
}

iframe, video, canvas, svg, table { max-width: 100%; }

/* Modal luon bam theo viewport hien tai; noi dung dai cuon ben trong thay vi day
   cua so xuong giua mot trang rat dai. */
.modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.modal > .modal-content,
.modal > .modal-inner,
.vm-modal-panel {
  width: min(100%, 860px);
  max-height: calc(100dvh - 112px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-close, .vm-modal-close, [class*="modal"] button[aria-label="Dong"] {
  min-width: var(--vm-touch);
  min-height: var(--vm-touch);
  display: inline-grid;
  place-items: center;
}

/* Bang rong cuon trong khung rieng va khong lam trang bi crop. */
.table-scroll, .responsive-table, .card:has(> table) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* Nut cai PWA chi xuat hien khi trinh duyet ho tro hoac tren iOS chua cai. */
.vm-install-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  border: var(--topbar-btn-border);
  border-radius: var(--r-sm);
  background: var(--topbar-btn-bg);
  color: var(--topbar-btn-text);
  font: 700 .78rem/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.vm-authenticated .vm-install-btn.is-available { display: inline-flex; }
.vm-authenticated .vm-install-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}
.vm-authenticated .vm-install-btn .vm-install-label { display: none; }
.vm-install-btn:hover {
  color: var(--topbar-link-hover);
  border-color: var(--topbar-link-hover);
  background: var(--topbar-btn-hover-bg);
}
.vm-install-icon { font-size: 1rem; line-height: 1; }
.vm-install-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 100002;
  width: min(520px, calc(100vw - 28px));
  padding: 12px 16px;
  border: 1px solid rgba(255, 212, 102, .55);
  border-radius: 12px;
  background: rgba(43, 25, 6, .96);
  color: #fff7df;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 14px);
  transition: opacity .18s ease, transform .18s ease;
}
.vm-install-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.vm-install-note-flash { animation: vmInstallNoteFlash .55s ease; }
@keyframes vmInstallNoteFlash {
  0%, 100% { opacity: 1; }
  45% { opacity: .45; }
}
.vm-install-apple-guide {
  display: none;
  position: fixed;
  z-index: 120000;
  width: min(420px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-lift, var(--shadow));
  animation: vmAppleGuideIn .22s var(--ease-out, ease-out);
}
.vm-install-apple-guide.is-open { display: block; }
.vm-install-apple-guide.is-mac {
  top: max(14px, calc(var(--vm-safe-top) + 8px));
  right: max(14px, calc(var(--vm-safe-right) + 8px));
}
.vm-install-apple-guide.is-ios {
  left: 50%;
  bottom: max(18px, calc(var(--vm-safe-bottom) + 12px));
  transform: translateX(-50%);
}
.vm-install-apple-guide::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--surface-solid);
  border: 1px solid var(--line-2);
  transform: rotate(45deg);
}
.vm-install-apple-guide.is-mac::before {
  top: -10px;
  right: 42px;
  border-right: 0;
  border-bottom: 0;
}
.vm-install-apple-guide.is-ios::before {
  bottom: -10px;
  left: calc(50% - 9px);
  border-left: 0;
  border-top: 0;
}
.vm-install-guide-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 1.35rem;
  cursor: pointer;
}
.vm-install-guide-kicker {
  margin: 0 46px 7px 0;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.vm-install-apple-guide h3 { margin: 0 46px 14px 0; font-size: 1.12rem; line-height: 1.35; }
.vm-install-guide-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vm-install-guide-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: .88rem; line-height: 1.5; }
.vm-install-step-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .78rem; font-weight: 800; }
.vm-install-guide-note { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); font-size: .78rem; line-height: 1.5; }
.vm-install-guide-done { width: 100%; min-height: 44px; margin-top: 14px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent); color: #fff; font: 800 .86rem/1 var(--font-sans); cursor: pointer; }
@keyframes vmAppleGuideIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.vm-install-apple-guide.is-ios.is-open { animation-name: vmAppleGuideInIOS; }
@keyframes vmAppleGuideInIOS {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    padding-left: var(--vm-safe-left);
    padding-right: var(--vm-safe-right);
  }
  body::before, body::after, .vm-aurora span {
    filter: blur(70px);
    animation: none !important;
  }
  .topbar { padding-top: var(--vm-safe-top); }
  .topbar .nav { min-height: 58px; }
  .navlinks {
    left: var(--vm-safe-left);
    right: var(--vm-safe-right);
    max-height: calc(100dvh - 58px - var(--vm-safe-top));
    padding-bottom: max(14px, var(--vm-safe-bottom));
  }
  .navlinks a, .nav-dropdown-btn { min-height: var(--vm-touch); }
  .bell-panel {
    position: fixed;
    top: var(--vm-bell-panel-top, calc(64px + var(--vm-safe-top)));
    bottom: max(8px, var(--vm-safe-bottom));
    left: max(10px, var(--vm-safe-left));
    right: max(10px, var(--vm-safe-right));
    width: auto;
    max-width: none;
    max-height: none;
  }
  .bell-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .vm-authenticated .vm-install-btn .vm-install-label { display: none; }
  .modal {
    padding: calc(64px + var(--vm-safe-top)) max(10px, var(--vm-safe-right)) max(18px, var(--vm-safe-bottom)) max(10px, var(--vm-safe-left)) !important;
  }
  .modal > .modal-content,
  .modal > .modal-inner,
  .vm-modal-panel {
    max-height: calc(100dvh - 82px - var(--vm-safe-top) - var(--vm-safe-bottom)) !important;
    border-radius: 14px !important;
  }
  .modal-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }
  .modal-tabs > * { flex: 0 0 auto; scroll-snap-align: start; }
  .card:hover { transform: none; }
  input, select, textarea { max-width: 100%; }
  input, select, textarea, button, .btn { min-height: var(--vm-touch); }
  input[type="checkbox"], input[type="radio"], input[type="file"] { min-height: 0; }
  .grid-2, .grid-3, .form-row, .form-grid { min-width: 0; }
  .wrap {
    padding-left: max(14px, var(--vm-safe-left)) !important;
    padding-right: max(14px, var(--vm-safe-right)) !important;
  }
  .head { padding-top: 28px !important; }
  .head h1 { font-size: clamp(1.35rem, 6vw, 1.7rem) !important; line-height: 1.24; }
  .head p { font-size: .88rem; line-height: 1.55; }
  .card { border-radius: 14px; }
  .btn, .tab-btn { border-radius: 10px; font-size: min(.9rem, 3.8vw); }
  .ai-chat-bubble {
    right: max(14px, var(--vm-safe-right));
    bottom: max(14px, var(--vm-safe-bottom));
    width: 52px;
    height: 52px;
  }
  #aiChatBox, .ai-chat-box {
    left: max(10px, var(--vm-safe-left)) !important;
    right: max(10px, var(--vm-safe-right)) !important;
    bottom: calc(74px + var(--vm-safe-bottom)) !important;
    width: auto !important;
    height: min(620px, calc(100dvh - 150px - var(--vm-safe-top) - var(--vm-safe-bottom))) !important;
    max-height: none !important;
  }
}

@media (max-width: 420px) {
  .topbar .nav { padding-left: 8px !important; padding-right: 8px !important; }
  .logo { max-width: 132px; overflow: hidden; }
  .logo .brand-container-el { min-width: 0; }
  .nav-bell, .nav-burger, .topbar #themeBtn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  .vm-install-apple-guide { width: calc(100vw - 24px); padding: 18px; }
  .vm-install-guide-steps li { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
/* TeX HTML: bảng và ô trả lời phải kế thừa theme, không tạo mảng trắng/đen. */
.vm-tex-table-wrap{max-width:100%;margin:10px auto;overflow:auto;color:var(--ink)}
.vm-tex-table{max-width:100%;margin:auto;border-collapse:collapse;background:transparent;color:inherit}
.vm-tex-table td{padding:6px 10px;border:1px solid var(--line-2,var(--line));background:transparent;color:inherit;text-align:center;vertical-align:middle}
.vm-tex-table .katex,.vm-tex-table .katex *{color:inherit}
.vm-tex-short-answer{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border:1px dashed var(--line-2,var(--line));border-radius:8px;background:var(--surface-2);color:var(--ink-3);font-size:.78em;font-weight:700}

/* Shared header: reserve action widths, then collapse the whole menu before
   links collide. This also fits custom tenant labels and late rank/PWA badges. */
.topbar .nav{position:relative;flex-wrap:nowrap!important;gap:clamp(12px,1vw,20px);padding:12px clamp(16px,2vw,32px)}
.topbar .nav>.navlinks{gap:clamp(4px,.55vw,12px);flex-wrap:nowrap}
.topbar .nav>.navlinks>a,.topbar .nav>.navlinks>.nav-dropdown>.nav-dropdown-btn{flex:none;font-size:.85rem;padding:10px 8px;line-height:1.3}
.topbar .nav>.vm-nav-actions,.topbar .nav>div:has(>#themeBtn){display:flex;flex:0 0 auto;align-items:center;flex-wrap:nowrap;gap:8px!important;margin-left:auto}
.topbar .vm-nav-actions>.btn,.topbar .home-nav-actions>.btn{flex:0 0 auto;white-space:nowrap;min-height:40px;padding:9px 16px;line-height:1.2;border-radius:9px}
.topbar .vm-nav-actions>button[onclick*="dangXuat"]{height:40px!important}
.topbar .nav #themeBtn,.topbar .nav .nav-bell,.topbar .nav .nav-burger{flex:none;width:40px!important;height:40px!important;min-height:40px!important}
.topbar .vm-nav-utilities{display:flex;flex:0 0 auto;align-items:center;gap:8px}
.topbar .vm-nav-utility-label{display:none}
.topbar .logo .vm-nav-wordmark{min-width:0;white-space:nowrap}
.topbar .nav.vm-nav-compact>.logo{flex-shrink:1;min-width:0;max-width:var(--vm-logo-room,100%);overflow:visible}
.topbar .nav.vm-nav-compact>.logo .vm-nav-wordmark{overflow:hidden;text-overflow:ellipsis;display:block}
.topbar .nav.vm-nav-compact>.logo .vm-rank-logo-tag{flex:none}
.topbar .nav.vm-nav-compact>.nav-burger{display:grid;place-items:center}
.topbar .nav.vm-nav-compact>.navlinks{display:none;position:absolute;top:100%;left:0;right:0;padding:12px;flex-direction:column;align-items:stretch;gap:4px;background:var(--surface-solid);border:1px solid var(--line);border-top:none;box-shadow:0 14px 28px rgba(0,0,0,.16);border-radius:0 0 14px 14px;max-height:calc(100dvh - 80px - var(--vm-safe-top));overflow-y:auto;z-index:99}
.topbar .nav.vm-nav-compact>.navlinks.open{display:flex}
.topbar .nav.vm-nav-compact>.navlinks>a,.topbar .nav.vm-nav-compact>.navlinks>.nav-dropdown>.nav-dropdown-btn{padding:13px 16px;min-height:44px;font-size:.9rem}
.topbar .nav.vm-nav-compact .nav-dropdown{width:100%}
.topbar .nav.vm-nav-compact .nav-dropdown-btn{width:100%;justify-content:space-between}
.topbar .nav.vm-nav-compact .nav-dropdown-content{position:static;transform:none;box-shadow:none;border:0;background:transparent;padding-left:16px}
.topbar .nav.vm-nav-measuring>.navlinks{display:flex!important;position:absolute!important;left:-10000px!important;right:auto!important;top:0!important;width:max-content!important;max-width:none!important;flex-direction:row!important;align-items:center!important;visibility:hidden!important;padding:0!important;border:0!important;overflow:visible!important}
.topbar .nav.vm-nav-measuring>.navlinks>a,.topbar .nav.vm-nav-measuring>.navlinks>.nav-dropdown>.nav-dropdown-btn{width:auto!important;min-height:0!important;font-size:.85rem!important;padding:10px 8px!important}
.topbar .nav.vm-nav-measuring .vm-nav-utilities{display:none!important}
.topbar .nav.vm-nav-measuring>.logo{max-width:none!important;flex:none!important}
.topbar .nav.vm-nav-measuring>.logo .vm-nav-wordmark{overflow:visible!important}
@media(max-width:1100px){
  .topbar .nav{min-height:68px;gap:12px!important;padding:12px 20px!important}
  .topbar .nav>.nav-burger{display:grid;place-items:center}
  .topbar .nav>.navlinks{display:none}
}
@media(max-width:600px){
  .topbar .nav{min-height:60px;gap:6px!important;padding:10px 12px!important}
  .topbar .nav>.vm-nav-actions{gap:6px!important}
  .topbar .nav .nav-bell,.topbar .nav .nav-burger{width:36px!important;height:36px!important;min-height:36px!important}
  .topbar .vm-nav-actions>.btn{font-size:.75rem;padding:8px 12px;min-height:36px}
  .topbar .vm-nav-actions>button[onclick*="dangXuat"]{height:36px!important}
  .topbar .nav>.navlinks>.vm-nav-utilities{flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-top:8px;padding:12px 16px 2px;border-top:1px solid var(--line)}
  .topbar .navlinks>.vm-nav-utilities .vm-nav-utility-label{display:block;font-size:.78rem;color:var(--ink-3)}
  .topbar .navlinks .vm-install-btn{width:auto!important;min-width:40px!important;padding:0 12px!important;gap:7px!important}
  .topbar .navlinks .vm-install-btn .vm-install-label{display:inline!important}
  .topbar .nav.vm-nav-compact>.logo{font-size:.93rem!important;gap:5px!important}
}