/* Portal Ms.Ngọc Elite English — hệ màu navy · gold · trắng · burgundy.
   Gold chỉ dùng làm nền/viền/điểm nhấn trên navy, KHÔNG làm chữ trên nền sáng (tương phản 2.4:1). */
/* Font tự lưu trong vendor/fonts (D126): không gọi Google lúc chạy — trang mở nhanh, không gửi IP phụ huynh ra ngoài.
   Inter (biến thiên 400–700) cho mọi chữ; Noto Serif 600 chỉ cho chữ hiệu. Giấy phép SIL OFL 1.1: vendor/fonts/OFL.txt. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../vendor/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../vendor/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../vendor/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/noto-serif-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/noto-serif-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Serif'; font-style: normal; font-weight: 600; font-display: swap; src: url(../vendor/fonts/noto-serif-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Màu lấy từ logo (D126, THIET-KE-PORTAL-CAO-CAP-28-10.md mục 2 và 8.4): navy #07285d, gold #ecb551.
   Gold chỉ làm vạch, nền nút chính và điểm nhấn trên navy, KHÔNG làm chữ trên nền sáng (1.86:1). */
:root {
  /* Token thô */
  --mn-navy-950: #03122b; --mn-navy-900: #051d42; --mn-navy-800: #07285d;
  --mn-navy-700: #0e3677; --mn-navy-600: #1d4991; --mn-navy-400: #57729e;
  --mn-navy-300: #90a7cb; --mn-navy-200: #bcc8dc; --mn-navy-100: #e6ebf1; --mn-navy-50: #f4f6f8;
  --mn-gold-500: #ecb551; --mn-gold-700: #926719; --mn-gold-100: #f6eddd; --mn-gold-50: #fbf7f2;
  --mn-burgundy-600: #a82e49; --mn-burgundy-300: #eda8b3; --mn-burgundy-50: #fdf3f4;
  --mn-sage-600: #3d6f4f; --mn-sage-100: #e0efe5; --mn-sage-50: #f2f8f4;
  --mn-amber-700: #7a5217; --mn-amber-100: #faeecf; --mn-amber-50: #fdf8ed;
  /* Biến cũ, giá trị mới theo bảng 8.4 */
  --navy: #07285d;
  --navy-2: #1d4991;
  --gold: #ecb551;
  --gold-soft: #f6eddd;
  --burgundy: #a82e49;
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #07285d;
  --muted: #57729e;
  --line: #e6ebf1;
  --good: #3d6f4f;
  --good-bg: #f2f8f4;
  --warn: #7a5217;
  --warn-bg: #fdf8ed;
  --bad: #a82e49;
  --bad-bg: #fdf3f4;
  --info-bg: #e6ebf1;
  --radius: .75rem;
  --shadow: 0 1px 2px rgba(7, 40, 93, .06), 0 4px 16px rgba(7, 40, 93, .05);
  /* Lớp nghĩa của hệ thống mới */
  --nen: var(--mn-navy-50); --mat: #fff; --mat-nhat: var(--mn-navy-50); --mat-dam: var(--mn-navy-800);
  --chu: var(--mn-navy-800); --chu-phu: var(--mn-navy-400);
  --chu-tren-dam: #fff; --chu-phu-tren-dam: var(--mn-navy-200);
  --vach: var(--mn-navy-100); --vach-dam: var(--mn-navy-200); --vien-o: var(--mn-navy-400);
  --lien-ket: var(--mn-navy-600);
  --nhan: var(--mn-gold-500); --nhan-chu: var(--mn-gold-700); --nhan-nen: var(--mn-gold-100);
  --tot: var(--mn-sage-600); --tot-nen: var(--mn-sage-50);
  --luyen: var(--mn-amber-700); --luyen-nen: var(--mn-amber-50);
  --gap: var(--mn-burgundy-600); --gap-nen: var(--mn-burgundy-50);
  --tin-nen: var(--mn-navy-100); --vong-chon: var(--mn-navy-600); --phu-toi: rgba(3, 18, 43, .55);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-hieu: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --c-so: 2rem; --c-h1: 1.625rem; --c-h2: 1.25rem; --c-h3: 1.125rem;
  --c-than: 1.0625rem; --c-nho: .9375rem; --c-nhan: .875rem;
  --k1: 4px; --k2: 8px; --k3: 16px; --k4: 24px; --k5: 32px; --k6: 48px; --k7: 64px;
  --bo: .75rem;
  --bong: 0 1px 2px rgba(7, 40, 93, .06), 0 4px 16px rgba(7, 40, 93, .05);
  --bong-noi: 0 8px 24px rgba(7, 40, 93, .12);
  --cao-tab: 64px; --rong-menu: 264px;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  color-scheme: light;
}
@media (min-width: 960px) { :root { --c-so: 2.5rem; --c-h1: 2rem; --c-h2: 1.5rem; --c-h3: 1.1875rem; } }
/* Chữ lớn (+12,5%) cho phụ huynh lớn tuổi: công tắc ở Mục khác / Tài khoản, nhớ trên máy. */
:root[data-chu="lon"] { font-size: 112.5%; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); min-height: 100vh; font-family: var(--font); font-size: var(--c-than); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--lien-ket); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5rem; color: var(--navy); letter-spacing: -.01em; }
h1 { font-size: var(--c-h1); line-height: 1.2; } h2 { font-size: var(--c-h2); line-height: 1.3; font-weight: 600; } h3 { font-size: var(--c-h3); line-height: 1.4; font-weight: 600; }
p { margin: .25rem 0 .75rem; line-height: 1.6; }
:focus-visible { outline: 3px solid var(--vong-chon); outline-offset: 2px; }
small, .muted { color: var(--muted); }
button, input, select, textarea { font: inherit; }

/* ── Khung ── */
.shell { display: grid; grid-template-columns: var(--rong-menu) 1fr; min-height: 100vh; }
.side { background: var(--mn-navy-900); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--gold); color: var(--navy); display: grid; place-items: center; font-weight: 800; }
/* Dấu hiệu mới (D126): ngôi sao vàng trên ô navy, viền vàng mảnh; chữ hiệu serif */
.brand .hieu-dau { box-shadow: inset 0 0 0 1px rgba(236, 181, 81, .5); }
.brand b.hieu-chu { font-family: var(--font-hieu); font-weight: 600; font-size: 1rem; line-height: 1.15; }
.brand b { display: block; font-size: .95rem; }
.brand small { color: var(--mn-navy-200); font-size: .8125rem; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--mn-navy-200); text-decoration: none; padding: 6px 12px; border-radius: 10px; font-size: var(--c-nho); font-weight: 500; line-height: 1.3; }
.nav a svg.bt { width: 20px; height: 20px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.on { background: rgba(236,181,81,.12); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
.side :focus-visible { outline-color: #fff; }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .875rem; color: var(--mn-navy-200); }
.side-foot b { color: #fff; }
.side-foot .row { margin-top: 8px; gap: 6px; flex-wrap: nowrap; }
.side-foot .row .btn { flex: 1; justify-content: center; text-align: center; white-space: nowrap; font-size: .875rem; padding: 6px 8px; }
.side-foot .btn.on { box-shadow: inset 0 0 0 2px var(--gold); }
/* Nhóm "Công cụ khác" của menu: thu gọn, bấm để mở */
.nav-them { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 6px; }
.nav-them summary { cursor: pointer; list-style: none; color: var(--mn-navy-300); font-size: var(--c-nhan); font-weight: 600; padding: 8px 12px; min-height: 44px; border-radius: 8px; display: flex; align-items: center; }
.nav-them summary::-webkit-details-marker { display: none; }
.nav-them summary::after { content: '▾'; margin-left: auto; transition: transform .15s; }
.nav-them[open] summary::after { transform: rotate(180deg); }
.nav-them summary:hover { color: #fff; background: rgba(255,255,255,.07); }
.main { padding: 32px 48px 64px; max-width: 1216px; width: 100%; }
.topbar { display: none; }
.xem-nhu-dai { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--bad-bg); border: 2px solid var(--bad); color: var(--bad); padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; position: sticky; top: 0; z-index: 5; }
.xem-nhu-phu { font-size: .84rem; margin-top: 2px; }
.demo-banner { background: var(--gold-soft); border: 1px solid var(--gold); color: var(--navy); padding: 8px 12px; border-radius: 8px; font-size: .86rem; margin-bottom: 16px; }

/* ── Thẻ, lưới ── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); margin-bottom: 24px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head p { margin: 0; color: var(--muted); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .label { font-size: .875rem; color: var(--muted); font-weight: 600; }
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--navy); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: .875rem; color: var(--muted); }
.stat.accent { background: var(--navy); border-color: var(--navy); }
.stat.accent .label, .stat.accent .sub { color: var(--mn-navy-200); }
.stat.accent .value { color: #fff; }
.stat.accent .value em { color: var(--gold); font-style: normal; }

/* ── Nút, biểu mẫu ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 18px; border-radius: var(--bo); border: 1px solid var(--vach-dam); background: #fff; color: var(--navy); font-weight: 600; cursor: pointer; text-decoration: none; font-size: .9375rem; line-height: 1.2; }
.btn:hover { border-color: var(--navy-2); background: var(--mat-nhat); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--mn-navy-700); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--mn-navy-950); }
.btn.gold:hover { background: #efc36f; }
.btn.danger { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.btn.ghost { background: transparent; }
/* Nút nhỏ vẫn cao tối thiểu 44px (vùng bấm, D126) */
.btn.sm { min-height: 44px; padding: 6px 14px; font-size: .875rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: .9375rem; color: var(--chu); font-weight: 600; }
input, select, textarea { min-height: 48px; padding: 10px 14px; border: 1px solid var(--vien-o); border-radius: var(--bo); background: #fff; color: var(--ink); width: 100%; font-size: max(16px, 1rem); }
input[type=checkbox], input[type=radio] { min-height: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy), 0 0 0 4px var(--vach-dam); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--gap); box-shadow: 0 0 0 1px var(--gap); }
textarea { min-height: 80px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.check input { width: auto; }

/* ── Bảng ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .875rem; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--vach-dam); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:hover td { background: var(--mat-nhat); }
tfoot td { font-weight: 700; border-top: 2px solid var(--line); }

/* ── Nhãn ── */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600; line-height: 1.5; background: var(--info-bg); color: var(--navy); white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.gold { background: var(--gold-soft); color: #07285d; }
.note { padding: 12px 16px; border-radius: 10px; font-size: .9375rem; margin: 8px 0; line-height: 1.5; }
.note.good { background: var(--good-bg); color: var(--good); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.info { background: var(--info-bg); color: var(--navy); }
.note.bad { background: var(--bad-bg); color: var(--bad); border-left: 3px solid var(--bad); }
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: 8px 0; border-bottom: 1px solid var(--line); }
ul.clean li:last-child { border-bottom: 0; }

.empty { text-align: center; color: var(--muted); padding: 32px 16px; font-size: .9375rem; }

/* ── Thanh đo ── */
.meter { height: 12px; background: var(--vach); border-radius: 99px; overflow: hidden; display: flex; }
.meter > span { display: block; height: 100%; }
.meter .s { background: var(--good); }
.meter .t { background: var(--navy-2); }
.legend { display: flex; gap: 14px; font-size: .82rem; color: var(--muted); margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ── Hộp thoại, thông báo ── */
.modal-back { position: fixed; inset: 0; background: var(--phu-toi); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: #fff; border-radius: 14px; width: min(640px, 100%); max-height: 90vh; overflow-y: auto; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--mn-navy-900); color: #fff; padding: 12px 16px; border-radius: var(--bo); z-index: 60; box-shadow: var(--bong-noi); max-width: 380px; font-size: .9375rem; }
.toast.err { background: var(--burgundy); }

/* ── Đăng nhập ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: repeating-linear-gradient(135deg, rgba(236,181,81,.05) 0 2px, transparent 2px 22px), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 60%, #051d42 100%); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 400px); gap: 28px; width: min(1080px, 100%); align-items: start; }
.login .box { background: #fff; border-radius: 16px; padding: 30px 28px; width: 100%; box-sizing: border-box; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
/* Tin tức & thông báo (bên trái trang đăng nhập) */
.tin { background: #fff; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.25); overflow: hidden; display: flex; flex-direction: column; max-height: min(640px, calc(100vh - 48px)); }
.tin-head { display: flex; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.tin-head h2 { margin: 0; font-size: 1.125rem; color: var(--navy); }
.tin-head p { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.tin-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--gold-soft); color: var(--navy); flex: none; }
.tin-list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; overflow-y: auto; }
.tin-list li { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--mat-nhat); }
.tin-list li b { display: block; color: var(--ink); line-height: 1.35; }
.tin-list li p { margin: 4px 0 0; font-size: .9rem; color: var(--muted); white-space: pre-line; }
.tin-ngay { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
/* "Mới" không phải cảnh báo: nền vàng nhạt, chữ navy (D126) */
.tin-moi { background: var(--gold-soft); color: var(--navy); font-size: .8125rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.tin-list li.tin-trong { background: transparent; border-style: dashed; color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .login-grid { grid-template-columns: 1fr; max-width: 460px; }
  .login .box { order: -1; }
  .tin { max-height: none; }
}
.login .box h1 { text-align: center; }
.login .box .brand-mark { margin: 0 auto 12px; width: 52px; height: 52px; font-size: 1.3rem; }
.demo-users { margin-top: 18px; font-size: .84rem; }
.demo-users button { margin: 3px; }

/* ── Lớp học trực tiếp ── */
.classroom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.live-panel { position: sticky; top: 16px; }
.big-timer { font-size: 2.2rem; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.lamp { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c9ccd4; margin-right: 6px; }
.lamp.on { background: var(--good); box-shadow: 0 0 0 4px rgba(30,122,76,.15); }
.lamp.t.on { background: var(--navy-2); box-shadow: 0 0 0 4px rgba(31,50,96,.15); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: #fff; padding: 6px 11px; border-radius: 99px; cursor: pointer; font-size: .86rem; }
.chip.on { background: var(--good); border-color: var(--good); color: #fff; }

/* ── Trình xem tài liệu bảo vệ ── */
.viewer { background: #2b2f3a; border-radius: var(--radius); padding: 12px; user-select: none; -webkit-user-select: none; }
.viewer-bar { display: flex; gap: 8px; align-items: center; color: #fff; margin-bottom: 10px; flex-wrap: wrap; }
.viewer-bar .btn { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.viewer-bar .btn.on { background: var(--gold); color: var(--navy); }
.viewer-stage { position: relative; margin: 0 auto; background: #fff; }
.viewer-stage canvas { display: block; width: 100%; height: auto; }
.viewer-stage canvas.ink { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.viewer-stage canvas.ink.off { pointer-events: none; cursor: default; }
.viewer:fullscreen { padding: 18px; overflow: auto; display: flex; flex-direction: column; }
.viewer:fullscreen .viewer-stage { max-width: calc((100vh - 90px) * 1.414); width: 100%; }
/* Khi đang mở tài liệu bảo vệ: in ra trang trắng. Các trang khác (báo cáo, bảng lương) in bình thường. */
@media print {
  body.protect * { display: none !important; }
  body.protect::after { content: "Tài liệu nội bộ Ms.Ngọc Elite English — không được in."; display: block !important; padding: 40px; }
  .side, .topbar, .no-print, .demo-banner { display: none !important; }
  .shell { display: block; } .main { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ── Ghi âm bài tập ── */
.rec-btn { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--burgundy); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(168,46,73,.35); }
.rec-btn.on { animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168,46,73,.5); } 100% { box-shadow: 0 0 0 18px rgba(168,46,73,0); } }
.score-big { font-size: 2.6rem; font-weight: 800; color: var(--navy); }
.bars .bar { display: grid; grid-template-columns: 140px 1fr 40px; gap: 8px; align-items: center; font-size: .88rem; margin: 6px 0; }
.bars .track { height: 10px; background: var(--vach); border-radius: 99px; overflow: hidden; }
.bars .fill { height: 100%; background: var(--navy-2); border-radius: 99px; }

.video { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.chart-box { position: relative; height: 260px; }

/* ── Lời nói từng buổi (0072) ── */
.talk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--muted); margin: 10px 0 6px; }
.talk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.talk-legend i.talk-seg { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 3px; }
.talk-rows { display: grid; gap: 8px; }
.talk-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 70px; gap: 10px; align-items: center; font-size: .88rem; }
.talk-label .muted { font-size: .8rem; font-variant-numeric: tabular-nums; }
.talk-bar { display: flex; gap: 2px; height: 14px; background: var(--card); border-radius: 4px; overflow: hidden; }
.talk-seg { flex-basis: 0; min-width: 2px; }
.talk-seg.gv { background: #1d4991; } .talk-seg.hv { background: #926719; } .talk-seg.im { background: #9aa1ab; } .talk-seg.khac { background: #e4e7ec; }
.talk-pct { text-align: right; }
.talk-nx { grid-column: 1 / -1; font-size: .85rem; margin-top: -2px; }
.talk-nx summary { cursor: pointer; color: var(--navy-2); font-weight: 600; }
.talk-nx div { white-space: pre-line; color: var(--ink); background: var(--mat-nhat); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
@media (max-width: 640px) { .talk-row { grid-template-columns: 1fr 64px; } .talk-bar { grid-column: 1 / -1; order: 3; } }
@media print { .talk-seg { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* ── Báo cáo in ── */
.report { background: #fff; }
.report-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--navy); padding-bottom: 12px; margin-bottom: 16px; }
.qr { width: 180px; border: 1px solid var(--line); border-radius: 8px; }

@media (max-width: 959px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s; z-index: 40; }
  .side.open { transform: none; }
  .topbar { display: flex; align-items: center; gap: 10px; padding: 6px 14px; min-height: 56px; background: var(--mn-navy-900); color: #fff; position: sticky; top: 0; z-index: 30; }
  .topbar button { background: transparent; border: 0; color: #fff; font-size: 1.4rem; min-width: 44px; min-height: 44px; }
  .main { padding: 16px; }
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g2 { grid-template-columns: 1fr; }
  .classroom { grid-template-columns: 1fr; }
  .live-panel { position: static; }
  .bars .bar { grid-template-columns: 110px 1fr 36px; }
}
@media (max-width: 520px) { .g3, .g4 { grid-template-columns: 1fr 1fr; } .stat .value { font-size: 1.3rem; } }

/* ── Lịch Zoom (0074) ── */
.zoom-ten { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--vach-dam); border-radius: 10px; background: var(--mat-nhat); display: grid; gap: 2px; }
.zoom-ten small { color: var(--muted); font-size: .78rem; }
.zoom-ngay-thanh { position: relative; height: 34px; margin: 22px 0 6px; background: var(--vach); border-radius: 6px; }
.zoom-moc { position: absolute; top: -18px; transform: translateX(-50%); font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.zoom-moc::after { content: ''; position: absolute; left: 50%; top: 16px; width: 1px; height: 34px; background: rgba(7,40,93,.12); }
.zoom-khoi { position: absolute; top: 5px; height: 24px; border-radius: 5px; background: #1d4991; }
.zoom-khoi.cua-toi { background: var(--gold); }
.zoom-khoi.moi { background: var(--good); opacity: .85; outline: 2px solid #fff; }
.zoom-khoi.moi.trung { background: var(--bad); }
.zoom-chu-giai { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted); }
.zoom-chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.zoom-chu-giai i.zoom-khoi { position: static; display: inline-block; width: 14px; height: 10px; flex: none; outline: none; }
.zoom-ngay h3 { margin: 14px 0 6px; font-size: .9rem; color: var(--navy-2); }
.zoom-dong { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.zoom-dong.cua-toi { border-left: 4px solid var(--gold); }
.zoom-gio { font-variant-numeric: tabular-nums; font-weight: 600; display: grid; gap: 4px; justify-items: start; }
@media (max-width: 640px) { .zoom-dong { grid-template-columns: 1fr; } }

/* ── Cổng gia đình (0075): mỗi con một thẻ, cùng khung để so sánh nhanh ── */
.gd-con { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.gd-the { margin-bottom: 0; display: flex; flex-direction: column; gap: 12px; }
.gd-dau { display: flex; gap: 12px; align-items: center; }
.gd-dau h2 { margin: 0; }
.gd-chu { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-soft); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; border: 2px solid var(--gold); }
.gd-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.gd-so div { border-top: 1px solid var(--line); padding-top: 6px; }
.gd-so dt { font-size: .875rem; color: var(--muted); font-weight: 600; }
.gd-so dd { margin: 2px 0 0; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.gd-so dd.gd-het { color: var(--bad); }
.gd-td { margin: 0; }
.gd-nx { background: var(--bg); border-radius: 8px; padding: 8px 12px; }
.gd-nx p { margin: 4px 0 0; }
.gd-nut { flex-wrap: wrap; gap: 8px; }
.gd-tuan { list-style: none; padding: 0; margin: 0 0 12px; }
.gd-tuan li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.tl-ds { display: grid; gap: 10px; }
.tl-o { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tl-o:last-child { border-bottom: 0; }
.tl-o p { margin: 4px 0 0; }

/* Chế độ con vào học: ẩn menu phụ huynh, chữ và nút to cho trẻ tự bấm. */
body.che-do-con .side, body.che-do-con .topbar, body.che-do-con .thanh-tren, body.che-do-con .tab-duoi { display: none; }
body.che-do-con .shell { grid-template-columns: 1fr; }
body.che-do-con .main { max-width: 860px; margin: 0 auto; font-size: 1.08rem; }
.con-dau { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.con-dau h1 { font-size: 2rem; margin: 0; }
.con-lop { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--gold-soft); border-color: var(--gold); }
.con-lop h2 { margin: 0; }
.con-nut { font-size: 1.1rem; padding: 14px 22px; }
.con-bai { display: grid; gap: 10px; }
.con-o { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px; border: 2px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: #fff; }
.con-o:hover, .con-o:focus-visible { border-color: var(--navy-2); }
.con-o.xong { background: var(--good-bg); border-color: var(--mn-sage-100); }
.con-loai { grid-row: 1 / 3; font-size: 1.8rem; text-align: center; }
.con-ten { font-weight: 700; font-size: 1.12rem; color: var(--navy); }
.con-tt { grid-column: 2; font-size: .9rem; color: var(--muted); }
.con-o .btn { grid-column: 3; grid-row: 1 / 3; }
.con-dan { font-size: 1.15rem; }
@media (max-width: 520px) {
  .gd-con { grid-template-columns: 1fr; }
  .con-o { grid-template-columns: 36px 1fr; }
  .con-o .btn { grid-column: 1 / -1; grid-row: auto; margin-top: 10px; }
}
@media print { .gd-nut { display: none; } }
/* Cột nội dung của lưới khung không được giãn theo bảng rộng (bảng tự cuộn ngang trong khung của nó). */
.shell > .main { min-width: 0; }
/* Sổ chăm sóc (0082) */
.td-qua-han { color: var(--bad); font-weight: 600; }

/* ── Nhận xét buổi học: tách ý, điểm nhấn màu, thu gọn (js/lib/nhan-xet.js) ── */
.nx { display: grid; gap: 10px; margin-top: 8px; }
.nx-tom { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nx-thanh { display: flex; flex: 1 1 110px; max-width: 200px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); }
.nx-thanh i { display: block; height: 100%; }
.nx-thanh .tot { background: var(--good); }
.nx-thanh .luyen { background: #97651a; }
.nx-muc { border-left: 3px solid var(--vach-dam); border-radius: 0 8px 8px 0; padding: 10px 14px; background: var(--bg); }
.nx-muc.hoc { border-color: var(--navy-2); background: var(--info-bg); }
.nx-muc.tot { border-color: var(--good); background: var(--good-bg); }
.nx-muc.luyen { border-color: var(--luyen); background: var(--warn-bg); }
/* Bài về nhà không phải cảnh báo: vạch navy (D126) */
.nx-muc.bai { border-color: var(--navy); background: var(--mat-nhat); }
.nx-muc.sau { border-color: var(--gold); background: var(--gold-soft); }
.nx-muc h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .9375rem; color: var(--navy); }
.nx-muc h4 small { margin-left: auto; font-weight: 600; letter-spacing: 0; }
.nx-muc ul { margin: 0; padding-left: 18px; }
.nx-muc li { margin: 4px 0; line-height: 1.55; }
.nx-nhan { color: var(--navy); }
/* Ý chính in đậm và tô nền nhạt theo màu của mục: làm tốt xanh lá, cần luyện cam, bài về nhà đỏ rượu, buổi sau vàng. */
.nx-khoa { color: var(--navy); font-weight: 700; background: rgba(7, 40, 93, .07); border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nx-muc.tot .nx-khoa, ul.nx-gon li.tot .nx-khoa { color: var(--good); background: rgba(61, 111, 79, .12); }
.nx-muc.luyen .nx-khoa, ul.nx-gon li.luyen .nx-khoa { color: var(--luyen); background: rgba(122, 82, 23, .1); }
.nx-muc.hoc .nx-khoa { color: var(--navy); background: rgba(7, 40, 93, .08); }
.nx-muc.sau .nx-khoa { color: var(--navy); background: rgba(236, 181, 81, .3); }
.nx-trich, .nx-sai, .nx-dung { background: #fff; border-radius: 6px; padding: 0 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.nx-trich { border: 1px solid var(--line); color: var(--navy-2); font-weight: 600; }
.nx-sai { color: var(--bad); text-decoration: line-through; }
.nx-dung { color: var(--good); font-weight: 700; }
.nx-mui { color: var(--muted); margin: 0 4px; }
.nx-them { background: none; border: 0; padding: 2px 0; min-height: 44px; color: var(--navy-2); font-weight: 600; font-size: .9375rem; cursor: pointer; }
.nx-them:hover { text-decoration: underline; }
ul.nx-gon { list-style: none; margin: 0; padding: 0; }
ul.nx-gon li { position: relative; margin: 4px 0; padding-left: 20px; line-height: 1.5; }
ul.nx-gon li::before { position: absolute; left: 0; font-weight: 700; }
ul.nx-gon li.tot::before { content: "✓"; color: var(--good); }
ul.nx-gon li.luyen::before { content: "➜"; color: var(--warn); }
ul.con-dan { margin: 6px 0; padding-left: 22px; }
ul.con-dan li { margin: 6px 0; line-height: 1.5; }
/* Mẫu nhận xét tám phần (CRM D83): tiêu đề phần, tên bài luyện, bảng sửa lỗi và bảng ôn tập trong một mục */
.nx-phan { margin: 10px 0 4px; font-size: .92rem; font-weight: 700; color: var(--navy); }
.nx-muc h4 + .nx-phan { margin-top: 2px; }
.nx-nho { margin: 8px 0 2px; color: var(--navy); }
/* Ô lưới mặc định không co hẹp hơn nội dung: bảng rộng sẽ đẩy cả mục tràn khỏi thẻ trên điện thoại.
   Cho ô lưới co được để bảng cuộn ngang bên trong mục. */
.nx { grid-template-columns: minmax(0, 1fr); }
.nx-bang { margin: 6px 0; max-width: 100%; }
.nx-bang table { background: #fff; border-radius: 6px; font-size: .88rem; }
.nx-bang th, .nx-bang td { min-width: 110px; padding: 6px 8px; border: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.nx-bang th { background: var(--bg); font-size: .875rem; color: var(--navy); }
.nx-van ul { margin: 4px 0; padding-left: 20px; }
.nx-van li { margin: 4px 0; line-height: 1.55; }
/* Bản dịch trong ngoặc đơn nằm cùng một ý với câu tiếng Anh, xuống dòng riêng */
.nx-muc li, .nx-van li, ul.nx-gon li { white-space: pre-line; }
@media print {
  .nx-them { display: none; }
  .nx-muc li[hidden] { display: list-item; }
  .nx-muc ul[hidden], .nx-muc h5[hidden], .nx-muc p[hidden], .nx-muc .nx-bang[hidden] { display: block; }
}

/* ── Luyện nói theo trình độ và độ tuổi (js/views/luyen-noi.js) ── */
.ln-hoi { display: grid; gap: 6px; margin: 6px 0 12px; }
.ln-dong { display: grid; grid-template-columns: 26px 1fr; gap: 2px 8px; align-items: baseline; padding: 6px 10px; border-radius: 8px; background: var(--bg); }
.ln-so { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .78rem; font-weight: 700; display: grid; place-items: center; align-self: start; }
.ln-khung { grid-column: 2; color: var(--good); font-weight: 600; }
.ln-th { border-left: 4px solid var(--gold); background: var(--gold-soft); border-radius: 8px; padding: 9px 12px; margin: 6px 0 10px; }
.ln-th p { margin: 2px 0 6px; font-size: .9rem; }
.ln-viec { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-viec .pill { white-space: normal; }
ul.ln-cau { margin: 8px 0 0; padding-left: 18px; }
ul.ln-cau li { margin: 3px 0; font-weight: 600; color: var(--navy-2); }
.ln-tu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

/* Song ngữ Việt – Anh (cổng giáo viên và trang đăng nhập; lib/song-ngu.js đặt lớp này trên <body>).
   Chữ dài gấp đôi nên cho xuống dòng ở mấy chỗ vốn ép một dòng. Các vai trò khác không có lớp này. */
body.song-ngu .side-foot .row { flex-wrap: wrap; }
body.song-ngu .side-foot .row .btn { flex: 1 1 100%; white-space: normal; }
body.song-ngu th, body.song-ngu th.num { white-space: normal; }
body.song-ngu .pill { white-space: normal; }

/* Thư viện bài giảng + giáo án, Real Talk (CRM 0096) */
.tv-bo > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.tv-ds { list-style: none; margin: 10px 0 0; padding: 0; }
.tv-bai { border-top: 1px solid var(--line); padding: 8px 0; }
.tv-dong { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-so { min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.tv-ten { flex: 1 1 220px; min-width: 0; }
.tv-quyen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 14px; margin-top: 8px; }
.tv-o { display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.ga-wrap { margin: 8px 0 4px 3em; }
.ga { display: grid; gap: 12px; font-size: .92rem; line-height: 1.5; }
.ga-muc h4 { margin: 0 0 4px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-2); }
.ga-muc ul { margin: 0; padding-left: 1.2em; }
.ga-muc p { margin: 2px 0; }
.ga-muc blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); background: rgba(0,0,0,.03); }
.ga-phut { width: 3em; vertical-align: top; color: var(--muted); }
.ga-sai { color: var(--bad); }
.ga-hai { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
@media (max-width: 640px) { .ga-wrap { margin-left: 0; } }
/* Lộ trình (CRM 0097) */
.tv-hanh-dong { margin: 8px 0 0; flex-wrap: wrap; gap: 8px; }
.lt-khoa .tv-ten { color: var(--muted); }
.lt-khoa .tv-ten::before { content: '🔒 '; }

/* ── Bảng trình độ (0098): đối chiếu CEFR – Cambridge – IELTS, tô bậc hiện tại của học viên ── */
.td-dong { margin: 6px 0; }
.td-bang td { vertical-align: middle; }
.td-bang th { white-space: normal; }
@media (max-width: 560px) { .td-bang th, .td-bang td { padding: 8px 6px; } }
.td-bang tr.td-hien-tai td { background: var(--gold-soft); }
.td-bang .pill { margin-left: 6px; }
.td-ghi-chu { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: .86rem; }
.td-ghi-chu li { margin: 3px 0; }
/* Tài liệu mở thêm (0102): mỗi bộ bài một khối bung/thu. */
.tv-mo-them { border-top: 1px solid var(--line); padding-top: 8px; }
.tv-mo-them > summary { cursor: pointer; padding: 4px 0; }
/* ── Nhận xét của trung tâm cho giáo viên (0107): thẻ nhận xét năm phần, vòng xác nhận ── */
.gy-the > .row.between, .gy-the > summary > .row.between { gap: 8px; align-items: flex-start; }
details.gy-the > summary { cursor: pointer; list-style: none; }
details.gy-the > summary::-webkit-details-marker { display: none; }
details.gy-the > summary h2::before { content: '▸ '; color: var(--muted); }
details.gy-the[open] > summary h2::before { content: '▾ '; }
details.gy-the[open] > summary { margin-bottom: 8px; }
.gy-dong { margin: 6px 0; font-size: .9rem; }
.gy-anh { color: var(--muted); font-weight: 400; }
div.gy-anh { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--chu); }
.gy-khoi { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--mat-nhat); }
.gy-khoi p { margin: 6px 0 0; }
.gy-khoi h3 { margin-bottom: 8px; }
.gy-doc, .gy-sua { margin-top: 12px; }
.gy-sua > summary { cursor: pointer; color: var(--navy-2); font-weight: 600; margin-bottom: 8px; }
.gy-nhom { margin-top: 6px; }
.gy-chon { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.gy-chon input { width: auto; }
/* ── Phiếu bài tập tuần (0109): hội thoại, câu luyện, kết quả ── */
.pt-ds { margin: 6px 0; padding-left: 20px; }
.pt-ds li { margin: 4px 0; }
.pt-tinh-huong { font-size: 1.04rem; line-height: 1.6; }
.pt-hoi-thoai { display: grid; gap: 6px; margin: 8px 0; }
.pt-luot { display: flex; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--mat-nhat); max-width: 640px; }
.pt-luot.b { background: var(--gold-soft); margin-left: 24px; }
.pt-vai { flex: 0 0 auto; min-width: 74px; font-size: .8rem; font-weight: 700; color: var(--muted); padding-top: 2px; }
.pt-cau { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pt-cau:first-of-type { border-top: 0; }
.pt-cau.sai { background: linear-gradient(90deg, var(--bad-bg) 0, var(--bad-bg) 4px, transparent 4px); padding-left: 12px; }
.pt-cau.dung { background: linear-gradient(90deg, var(--good-bg) 0, var(--good-bg) 4px, transparent 4px); padding-left: 12px; }
.pt-doc { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
.pt-doc:first-of-type, h3 + .pt-doc { border-top: 0; margin-top: 0; }
.pt-sai { text-decoration: underline wavy var(--bad); text-underline-offset: 3px; }
.pt-chon { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.pt-chon input { width: auto; margin-top: 4px; }
.pt-tu { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { padding: 4px 10px; border: 1px dashed var(--vach-dam); border-radius: 8px; background: #fff; font-weight: 600; }
.pt-bai-viet { white-space: pre-wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--mat-nhat); line-height: 1.6; }
.pt-xem h4 { margin: 14px 0 4px; }
.pt-xem { max-height: 68vh; overflow-y: auto; }
@media (max-width: 560px) { .pt-luot.b { margin-left: 8px; } .pt-vai { min-width: 58px; } }
/* Buổi có vấn đề: hạn xác nhận 24 giờ (CRM 0139, D116) */
.gy-han { margin-top: 12px; }
.gy-han .gy-dem { font-weight: 600; }
.gy-han.bad .gy-dem { color: var(--bad); }
.gy-van-de ul { margin: 6px 0 0; padding-left: 20px; }
.gy-van-de li { margin: 4px 0; }
.gy-duyet { margin-top: 8px; }

/* ════════════════════════════════════════════════════════════════════════════
   Giao diện cổng cao cấp, giai đoạn 1 (D126, Founder duyệt 28/10/2026).
   Chép và điều chỉnh từ <style id="mnee-he-thong"> của docs/trung-tam/mau-portal-cao-cap (kho CRM).
   Lớp mới có tiền tố riêng, không trùng lớp cũ: thanh-tren, tab-duoi, tam-duoi, nut-*, nhan-tt, the*, tq-, nk-, hp-, gv-, ca.
   ════════════════════════════════════════════════════════════════════════════ */
svg.bt { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
svg.bt.nho { width: 18px; height: 18px; }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.so { font-variant-numeric: tabular-nums; }
.phu { color: var(--chu-phu); font-size: var(--c-nho); line-height: 1.5; }
.mat-nhan { display: block; font-size: var(--c-nhan); font-weight: 600; letter-spacing: .02em; color: var(--chu-phu); }

/* ── Khung: thanh trên + thanh dưới (điện thoại), menu bên (máy tính) ── */
.hieu { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chu); min-width: 0; }
.hieu-dau { width: 36px; height: 36px; border-radius: 10px; background: var(--mn-navy-800); display: grid; place-items: center; flex: none; }
.hieu-dau svg { width: 22px; height: 22px; }
.hieu-chu { font-family: var(--font-hieu); font-weight: 600; font-size: 1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hieu-chu small { display: block; font-family: var(--font); font-weight: 500; font-size: .8125rem; color: var(--chu-phu); }
.thanh-tren { display: none; }
.tab-duoi { display: none; }
.nut-bieu-tuong { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--chu); border-radius: 50%; cursor: pointer; position: relative; flex: none; }
.nut-bieu-tuong:hover { background: var(--mat-nhat); }
.cham-moi { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--gap); border: 2px solid var(--mat); }
@media (max-width: 959px) {
  body.co-tab .side, body.co-tab .topbar { display: none; }
  body.co-tab .thanh-tren { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 var(--k2) 0 var(--k3); background: var(--mat); border-bottom: 1px solid var(--vach); }
  body.co-tab .thanh-tren .hieu { flex: 1; }
  body.co-tab .tab-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--mat); border-top: 1px solid var(--vach); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -2px 12px rgba(7, 40, 93, .05); }
  body.co-tab .main { padding: var(--k3) var(--k3) calc(var(--cao-tab) + var(--k5) + env(safe-area-inset-bottom)); }
  body.co-tab .toast { left: var(--k3); right: var(--k3); bottom: calc(var(--cao-tab) + var(--k3) + env(safe-area-inset-bottom)); max-width: none; }
}
@media (min-width: 600px) and (max-width: 959px) { body.co-tab .main { padding-left: var(--k5); padding-right: var(--k5); } }
.tab-duoi a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--cao-tab); padding: 6px 2px 4px; color: var(--chu-phu); text-decoration: none; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
@media (min-width: 400px) { .tab-duoi a { font-size: 14px; } }
.tab-duoi a[aria-current="page"] { color: var(--chu); font-weight: 700; }
.tab-duoi a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 32px; height: 3px; margin-left: -16px; border-radius: 0 0 3px 3px; background: var(--nhan); }
.tab-duoi a:active { background: var(--mat-nhat); }
/* Tấm trượt "Mục khác" và tấm thông báo */
.phu-sau { position: fixed; inset: 0; background: var(--phu-toi); z-index: 40; }
.tam-duoi { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 82vh; overflow-y: auto; background: var(--mat); border-radius: 16px 16px 0 0; padding: var(--k2) var(--k3) calc(var(--k4) + env(safe-area-inset-bottom)); box-shadow: 0 -8px 32px rgba(3, 18, 43, .25); }
.tam-duoi .tay-cam { width: 40px; height: 4px; border-radius: 2px; background: var(--vach-dam); margin: 0 auto var(--k3); }
.tam-duoi h2 { font-size: var(--c-h3); margin: 0 0 var(--k2); }
@media (min-width: 600px) { .tam-duoi { left: 50%; right: auto; width: 520px; margin-left: -260px; } }
.ds-hang { list-style: none; margin: 0; padding: 0; }
.ds-hang > li + li { border-top: 1px solid var(--vach); }
.hang { display: flex; align-items: center; gap: var(--k3); min-height: 56px; padding: var(--k2) 0; text-decoration: none; color: var(--chu); width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.hang .bieu { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--mat-nhat); color: var(--chu); flex: none; }
.hang .giua { flex: 1; min-width: 0; }
.hang .giua b { display: block; font-weight: 600; line-height: 1.4; }
.hang .giua span { display: block; font-size: var(--c-nho); color: var(--chu-phu); }
.hang[aria-current="page"] .giua b { text-decoration: underline; text-decoration-color: var(--nhan); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cong-tac { position: relative; width: 52px; height: 32px; border-radius: 999px; border: 0; background: var(--vach-dam); cursor: pointer; flex: none; }
.cong-tac::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.cong-tac[aria-checked="true"] { background: var(--mn-navy-800); }
.cong-tac[aria-checked="true"]::after { left: 24px; }

/* ── Nút ── */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: var(--k2); min-height: 48px; padding: 0 var(--k4); border-radius: var(--bo); border: 1px solid transparent; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s; -webkit-tap-highlight-color: transparent; }
.nut:active { transform: translateY(1px); }
.nut-vang { background: var(--mn-gold-500); color: var(--mn-navy-950); box-shadow: 0 1px 0 rgba(3, 18, 43, .15); }
.nut-vang:hover { background: #efc36f; box-shadow: 0 4px 14px rgba(236, 181, 81, .35); }
.nut-navy { background: var(--mn-navy-800); color: #fff; }
.nut-navy:hover { background: var(--mn-navy-700); }
.nut-vien { background: var(--mat); color: var(--chu); border-color: var(--lien-ket); }
.nut-vien:hover { background: var(--mat-nhat); }
.nut-chu { background: transparent; color: var(--lien-ket); padding: 0 var(--k1); min-height: 44px; text-decoration: underline; text-decoration-color: transparent; }
.nut-chu:hover { text-decoration-color: currentColor; }
.nut-nho { min-height: 44px; padding: 0 var(--k3); font-size: var(--c-nho); }
.nut-rong { width: 100%; }
.nut:disabled, .nut[aria-disabled="true"] { background: var(--mat-nhat); color: var(--chu-phu); border-color: var(--vach); cursor: not-allowed; box-shadow: none; transform: none; }

/* ── Nhãn trạng thái: luôn có chữ, không để màu tự nói ── */
.nhan-tt { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 12px; border-radius: 999px; font-size: var(--c-nhan); font-weight: 600; line-height: 1.3; background: var(--tin-nen); color: var(--chu); white-space: nowrap; }
.nhan-tt.tot { background: var(--tot-nen); color: var(--tot); }
.nhan-tt.luyen { background: var(--luyen-nen); color: var(--luyen); }
.nhan-tt.gap { background: var(--gap-nen); color: var(--gap); }
.nhan-tt.vang { background: var(--nhan-nen); color: var(--chu); }
.nhan-tt.khoa { background: var(--mat-nhat); color: var(--chu-phu); }
.nhan-tt svg { width: 14px; height: 14px; }
.hang-nhan { display: flex; flex-wrap: wrap; gap: var(--k2); }

/* ── Chọn: chip con, đoạn chọn, chọn tháng ── */
.hang-chip { display: flex; gap: var(--k2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chip-chon { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--k3); border: 1px solid var(--vach-dam); border-radius: 999px; background: var(--mat); color: var(--chu); font-size: var(--c-nho); font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip-chon[aria-current="page"] { background: var(--mn-navy-800); border-color: var(--mn-navy-800); color: #fff; }
.chip-chon .vong { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--nhan-nen); color: var(--mn-navy-800); font-size: .8125rem; font-weight: 700; }
.doan-chon { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; background: var(--vach); border-radius: var(--bo); }
.doan-chon a { min-height: 44px; display: grid; place-items: center; border-radius: 9px; color: var(--chu-phu); font-weight: 600; text-decoration: none; text-align: center; padding: 0 6px; }
.doan-chon a[aria-current="page"] { background: var(--mat); color: var(--chu); box-shadow: var(--bong); }
.chon-thang { display: flex; align-items: center; justify-content: space-between; gap: var(--k2); }
.chon-thang b { font-size: var(--c-h3); }
.chon-thang .nut-bieu-tuong { border: 1px solid var(--vach-dam); }

/* ── Thẻ ── */
.the { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); box-shadow: var(--bong); padding: var(--k4); min-width: 0; }
.the-dau { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k2); margin-bottom: var(--k3); flex-wrap: wrap; }
.the-dau h2 { font-size: var(--c-h3); margin: 0; }
.the-chan { margin-top: var(--k3); padding-top: var(--k3); border-top: 1px solid var(--vach); display: flex; flex-wrap: wrap; gap: var(--k2) var(--k3); align-items: center; }
.lien-ket-di { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--lien-ket); }
.lien-ket-di:hover { text-decoration: underline; }
.cot > * + * { margin-top: var(--k4); }
.dau-trang { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--k3); margin-bottom: var(--k4); }
.dau-trang h1 { margin: 0; }
.dau-trang .phu { margin: var(--k1) 0 0; }

/* Thẻ buổi học tới: nền navy, vạch vàng; nút vàng chỉ hiện trong 30 phút trước giờ và lúc đang học */
.the-buoi-toi { position: relative; overflow: hidden; background: var(--mat-dam); color: var(--chu-tren-dam); border-radius: var(--bo); padding: var(--k4); box-shadow: var(--bong-noi); }
.the-buoi-toi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--nhan); }
.the-buoi-toi .mat-nhan { color: var(--nhan); display: flex; align-items: center; gap: 6px; }
.the-buoi-toi .mat-nhan svg { width: 14px; height: 14px; }
.the-buoi-toi .gio { font-size: var(--c-so); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-top: var(--k2); font-variant-numeric: tabular-nums; }
.the-buoi-toi .ngay { color: var(--chu-phu-tren-dam); font-weight: 500; }
.the-buoi-toi .bai { margin-top: var(--k3); font-weight: 600; font-size: var(--c-h3); line-height: 1.4; }
.the-buoi-toi .meta { color: var(--chu-phu-tren-dam); font-size: var(--c-nho); margin-top: var(--k1); }
.the-buoi-toi .hanh-dong { display: flex; flex-wrap: wrap; gap: var(--k2) var(--k3); align-items: center; margin-top: var(--k4); }
.the-buoi-toi .nut-chu { color: #fff; }
.the-buoi-toi .nut-vien { background: transparent; color: #fff; border-color: var(--mn-navy-300); }
.the-buoi-toi :focus-visible { outline-color: #fff; }
.the-buoi-toi .trong { color: var(--chu-phu-tren-dam); margin-top: var(--k2); }
.dem-nguoc { display: inline-flex; align-items: center; gap: 8px; font-size: var(--c-nho); font-weight: 600; color: #fff; }
.dem-nguoc i { width: 8px; height: 8px; border-radius: 50%; background: var(--nhan); box-shadow: 0 0 0 4px rgba(236, 181, 81, .25); }
@media (max-width: 599px) { .the-buoi-toi .nut-vang, .the-buoi-toi .nut-vien.vao { width: 100%; } }

/* ── Tiến độ, kỹ năng, biểu đồ nhỏ ── */
.thanh { position: relative; height: 8px; border-radius: 999px; background: var(--vach); }
.thanh > span { display: block; height: 100%; border-radius: 999px; background: var(--mn-navy-800); }
.thanh .moc { position: absolute; top: -4px; width: 3px; height: 16px; border-radius: 2px; background: var(--nhan); }
.tien-do-so { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k2); margin-bottom: var(--k2); flex-wrap: wrap; }
.tien-do-so b { font-size: var(--c-h2); font-variant-numeric: tabular-nums; }
.ky-nang { display: grid; gap: var(--k3); margin-top: var(--k3); }
.ky-nang-dong { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--k2); align-items: center; }
.ky-nang-dong .ten { font-weight: 600; }
.ky-nang-dong .diem { font-weight: 700; font-variant-numeric: tabular-nums; }
.ky-nang-dong .xu { grid-column: 1 / -1; font-size: var(--c-nho); color: var(--chu-phu); display: flex; justify-content: space-between; align-items: center; gap: var(--k2); }
.ky-nang-dong .xu .len { color: var(--tot); font-weight: 600; }
.bieu-do-nho { width: 96px; height: 28px; flex: none; }
.bieu-do-nho polyline { fill: none; stroke: var(--lien-ket); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.bieu-do-nho circle { fill: var(--nhan); stroke: var(--mn-navy-800); stroke-width: 1.5; }
.so-lon { font-size: var(--c-so); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.so-lon small { font-size: var(--c-than); font-weight: 600; letter-spacing: 0; margin-left: 4px; }

/* ── Tổng quan phụ huynh / học viên ── */
.tq-luoi { display: grid; gap: var(--k4); grid-template-columns: minmax(0, 1fr); }
.tq-luoi > * { margin: 0; }
.tq-chao .xin-chao { color: var(--chu-phu); font-size: var(--c-nho); font-weight: 500; margin: 0; }
.tq-chao h1 { margin: 2px 0 0; }
.tq-chao .hang-chip { margin-top: var(--k3); }
.tq-chao .phu { margin: var(--k1) 0 0; }
.loi-nhan { border-left: 2px solid var(--nhan); padding: 2px 0 2px var(--k3); }
.loi-nhan .nguon { font-size: var(--c-nhan); font-weight: 600; color: var(--chu-phu); margin-bottom: var(--k1); }
.loi-nhan p { margin: 0; }
.loi-nhan .dich { color: var(--chu-phu); font-size: var(--c-nho); margin-top: var(--k1); }
.ds-viec { list-style: none; margin: 0; padding: 0; }
.ds-viec li { display: flex; justify-content: space-between; align-items: center; gap: var(--k2); min-height: 44px; border-top: 1px solid var(--vach); padding: 6px 0; }
.ds-viec li:first-child { border-top: 0; }
.ds-tin { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k3); }
.ds-tin li b { display: block; }
.ds-tin li p { margin: 2px 0 0; color: var(--chu-phu); font-size: var(--c-nho); white-space: pre-line; }
/* Hai cột trên máy tính (trái: buổi tới, nhận xét, thông báo; phải: học phí, tiến độ, việc tuần). Trên điện thoại hai cột "tan" ra
   (display: contents) và xếp lại theo thứ tự đặc tả 4.1: buổi tới → nhận xét → tiến độ → việc tuần → học phí → thông báo. */
.tq-cot { display: contents; }
.tq-buoi { order: 1; } .tq-nhanxet { order: 2; } .tq-tiendo { order: 3; } .tq-viec { order: 4; } .tq-hocphi { order: 5; } .tq-thongbao { order: 6; }
@media (min-width: 960px) {
  .tq-luoi { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--k5) var(--k4); align-items: start; }
  .tq-chao { grid-column: 1 / -1; }
  .tq-cot { display: flex; flex-direction: column; gap: var(--k5); min-width: 0; }
  .tq-cot > * { margin: 0; }
}
.tq-them { margin-top: var(--k5); }

/* ── Nhật ký buổi học ── */
.nk-luoi { display: grid; gap: var(--k4); grid-template-columns: minmax(0, 1fr); }
.nk-ds { display: grid; gap: var(--k3); }
.nk-the { background: var(--mat); border: 1px solid var(--vach); border-radius: var(--bo); box-shadow: var(--bong); overflow: hidden; }
.nk-dau { display: grid; grid-template-columns: 56px minmax(0, 1fr) 24px; gap: var(--k3); align-items: start; width: 100%; padding: var(--k3); border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.nk-dau:hover { background: var(--mat-nhat); }
.nk-ngay { width: 56px; padding: 6px 0; border-radius: 10px; background: var(--mat-nhat); text-align: center; line-height: 1.15; }
.nk-ngay small { display: block; font-size: 13px; font-weight: 600; color: var(--chu-phu); }
.nk-ngay b { display: block; font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.nk-tieu-de { font-weight: 600; font-size: var(--c-h3); line-height: 1.4; display: block; }
.nk-meta { font-size: var(--c-nho); color: var(--chu-phu); margin-top: 2px; display: block; }
.nk-dau .hang-nhan { grid-column: 2 / 4; margin-top: calc(var(--k2) - var(--k3)); gap: 6px; }
.nk-mui { margin-top: 4px; color: var(--chu-phu); transition: transform .2s; }
.nk-dau[aria-expanded="true"] .nk-mui { transform: rotate(180deg); }
.nk-than { padding: 0 var(--k3) var(--k3); display: grid; gap: var(--k3); grid-template-columns: minmax(0, 1fr); }
.nk-than[hidden] { display: none; }
.nk-than .nx { margin-top: 0; }
.nk-than .nx-muc { background: transparent; padding: 2px 0 2px var(--k3); border-radius: 0; }
.nk-than .nx-muc.hoc { border-color: var(--mn-navy-600); }
.nk-than .nx-muc.bai { border-color: var(--mn-navy-800); }
.video-cho { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; background: linear-gradient(160deg, var(--mn-navy-800), var(--mn-navy-950)); color: #fff; cursor: pointer; font: inherit; }
.video-cho .nut-phat { width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--mn-navy-800); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.video-cho .nut-phat svg { width: 26px; height: 26px; fill: currentColor; stroke: none; margin-left: 4px; }
.video-cho .chu-video { position: absolute; left: 12px; bottom: 10px; font-size: var(--c-nho); font-weight: 600; }
.video-trong { border: 1px dashed var(--vach-dam); border-radius: 10px; padding: var(--k3); color: var(--chu-phu); font-size: var(--c-nho); display: flex; gap: var(--k2); align-items: center; }
.nk-chan { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--k2); border-top: 1px solid var(--vach); padding-top: var(--k2); }
@media (min-width: 960px) { .nk-luoi { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .nk-ben { position: sticky; top: var(--k5); } .nk-dau { padding: var(--k4); } .nk-than { padding: 0 var(--k4) var(--k4) calc(var(--k4) + 56px + var(--k3)); } }
/* Bảng sửa lỗi trên điện thoại: mỗi dòng thành một ô (câu đã nói → câu đúng → quy tắc), không cuộn ngang */
@media (max-width: 599px) {
  .nx-bang { overflow: visible; }
  .nx-bang table, .nx-bang tbody, .nx-bang tr, .nx-bang td { display: block; width: 100%; }
  .nx-bang thead { display: none; }
  .nx-bang tr { background: var(--mat-nhat); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
  .nx-bang tr:has(> th) { display: none; }
  .nx-bang td { border: 0; padding: 2px 0; min-width: 0; }
  .nx-bang td[data-nhan]::before { content: attr(data-nhan); display: block; font-size: var(--c-nhan); font-weight: 600; color: var(--chu-phu); }
}

/* ── Học phí & điểm danh ── */
.hp-luoi { display: grid; gap: var(--k4); grid-template-columns: minmax(0, 1fr); }
.hp-luoi > * { margin: 0; }
.luoi-so { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k3); margin-top: var(--k3); }
.o-so { border-top: 1px solid var(--vach); padding-top: 12px; min-width: 0; }
.o-so span { display: block; font-size: var(--c-nho); color: var(--chu-phu); line-height: 1.4; }
.o-so b { display: block; font-size: 1.375rem; line-height: 1.25; font-variant-numeric: tabular-nums; margin-top: 2px; overflow-wrap: anywhere; }
.o-so em { display: block; font-style: normal; font-size: var(--c-nhan); color: var(--chu-phu); }
.dong-tien { display: flex; justify-content: space-between; align-items: center; gap: var(--k3); min-height: 44px; border-bottom: 1px dashed var(--vach-dam); font-variant-numeric: tabular-nums; }
.dong-tien > span:last-child { white-space: nowrap; }
.dong-tien.tong { border-bottom: 0; font-weight: 700; font-size: var(--c-h3); }
.ds-buoi { list-style: none; margin: 0; padding: 0; }
.ds-buoi li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--k3); align-items: center; min-height: 64px; padding: var(--k2) 0; border-top: 1px solid var(--vach); }
.ds-buoi .ngay-ngan { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ds-buoi .ngay-ngan small { display: block; font-weight: 500; font-size: 13px; color: var(--chu-phu); }
.ds-buoi .tien { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ds-buoi .tien small { display: block; font-weight: 500; font-size: 13px; color: var(--chu-phu); }
.ds-buoi .giua { min-width: 0; } .ds-buoi .giua b { display: block; font-weight: 600; line-height: 1.4; } .ds-buoi .giua > span { display: block; font-size: var(--c-nho); color: var(--chu-phu); line-height: 1.4; }
.ds-buoi li.vang-mat .giua b { color: var(--chu-phu); }
.bang-hp { display: none; }
.hp-qr { display: flex; flex-wrap: wrap; gap: var(--k4); align-items: flex-start; margin-top: var(--k3); }
.hp-qr > div:first-child { flex: 1 1 240px; }
.hp-qr .qr { width: 168px; }
.lich-thang { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.lich-thang .thu { font-size: 13px; font-weight: 600; color: var(--chu-phu); padding-bottom: 4px; }
.lich-thang .ngay-o { min-height: 44px; border-radius: 10px; display: grid; place-items: center; align-content: center; font-size: var(--c-nho); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lich-thang .ngay-o i { font-style: normal; font-size: 12px; font-weight: 700; }
.lich-thang .co-mat { background: var(--tot-nen); color: var(--tot); font-weight: 700; }
.lich-thang .vang { background: var(--gap-nen); color: var(--gap); font-weight: 700; }
.lich-thang .sap-toi { box-shadow: inset 0 0 0 1.5px var(--lien-ket); font-weight: 700; }
.lich-thang .hom-nay { box-shadow: inset 0 -3px 0 var(--nhan); font-weight: 700; }
.lich-thang .sap-toi.hom-nay { box-shadow: inset 0 0 0 1.5px var(--lien-ket), inset 0 -3px 0 var(--nhan); }
.chu-giai { display: flex; flex-wrap: wrap; gap: var(--k2) var(--k3); font-size: var(--c-nho); color: var(--chu-phu); margin-top: var(--k3); }
.chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.chu-giai i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 700; }
@media (min-width: 600px) { .luoi-so { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .hp-luoi { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .ds-buoi { display: none; } .bang-hp { display: block; }
}

/* ── Giáo viên: Today, Reports due ── */
.gv-luoi { display: grid; gap: var(--k4); grid-template-columns: minmax(0, 1fr); }
.gv-luoi > * { margin: 0; }
.gv-luoi .note { margin: 0; }
.gy-nhac-han { border-left: 3px solid currentColor; }
.ca-ds { display: grid; gap: var(--k3); }
.ca { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--k2) var(--k3); padding: var(--k3); border: 1px solid var(--vach); border-radius: var(--bo); background: var(--mat); }
.ca.ke-tiep { border-color: var(--vach-dam); box-shadow: inset 3px 0 0 var(--nhan), var(--bong-noi); }
.ca.xong { background: var(--mat-nhat); }
.ca .gio-ca b { display: block; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ca .gio-ca span { font-size: var(--c-nho); color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.ca .lop-ca { font-weight: 600; font-size: var(--c-h3); line-height: 1.4; }
.ca .bai-ca { margin-top: 2px; }
.ca .phong { display: flex; align-items: center; gap: 6px; font-size: var(--c-nho); color: var(--chu-phu); margin-top: 4px; }
.ca .hanh-dong { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--k2); align-items: center; }
.bc-dong { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k2); padding: var(--k3) 0; border-top: 1px solid var(--vach); }
.bc-dong:first-child { border-top: 0; }
.bc-dong.qua-han { background: var(--gap-nen); border-radius: 10px; padding: var(--k3); border-top-color: transparent; box-shadow: inset 3px 0 0 var(--gap); margin-top: 4px; }
.bc-dong .bc-ten { font-weight: 600; }
.bc-dong .bc-han { font-size: var(--c-nho); color: var(--chu-phu); }
.bc-dong.qua-han .bc-han { color: var(--gap); font-weight: 600; }
@media (min-width: 600px) { .bc-dong { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
@media (min-width: 960px) { .gv-luoi { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; } .ca { grid-template-columns: 88px minmax(0, 1fr); } .ca .hanh-dong { grid-column: 2; } }
.gv-bieu-do > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--lien-ket); }
/* Lộ trình: bài kế tiếp của giáo viên tô vàng nhạt, thanh tiến độ của lớp */
.tv-bai.ke-tiep { background: var(--nhan-nen); border-radius: 10px; border-top-color: transparent; padding: 10px 12px; box-shadow: inset 3px 0 0 var(--nhan); }
.lt-tien-do { margin: 4px 0 8px; }

/* ── Khối rỗng ── */
.khoi-rong { text-align: center; padding: var(--k4) var(--k3); color: var(--chu-phu); }
.khoi-rong svg { width: 36px; height: 36px; color: var(--vach-dam); margin-bottom: var(--k2); }
.khoi-rong p { margin: 0 auto; font-size: var(--c-nho); }
@media (prefers-reduced-motion: reduce) { .nk-mui, .cong-tac::after, .nut { transition: none !important; } .rec-btn.on { animation: none; } }
@media print { .thanh-tren, .tab-duoi, .tam-duoi, .phu-sau, .khong-in { display: none !important; } .the, .nk-the { box-shadow: none; break-inside: avoid; } .ds-buoi { display: none !important; } .bang-hp { display: block !important; } .nk-than[hidden] { display: grid !important; } }
.thanh { overflow: visible; max-width: 100%; }
.the-buoi-toi .mat-nhan svg.bt { fill: var(--nhan); stroke: none; }
.grid > * { min-width: 0; }
@media (min-width: 960px) { .tq-cot > * { order: 0; } }

/* ── D127 (CRM 0154): Hành trình học tập (học viên, phụ huynh) và chấm kỹ năng nói (giáo viên, trung tâm) ── */
.ht-trang { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k3); margin-bottom: var(--k4); }
.ht-trang > * { min-width: 0; }
.ht-trang > .hang-chip { margin-bottom: 0; }
.ht-ds { list-style: none; margin: 0; padding: 0; position: relative; }
.ht-buoc { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--k3); position: relative; padding-bottom: var(--k3); }
.ht-buoc:last-child { padding-bottom: 0; }
.ht-buoc::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--vach); }
.ht-buoc:last-child::before { display: none; }
.ht-diem { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--c-nhan); background: var(--mat-nhat); color: var(--chu-phu); border: 2px solid var(--vach-dam); position: relative; z-index: 1; }
.ht-diem svg { width: 16px; height: 16px; }
.ht-buoc.da_qua .ht-diem { background: var(--tot-nen); color: var(--tot); border-color: var(--tot); }
.ht-buoc.dang_hoc .ht-diem { background: var(--mn-navy-800); color: #fff; border-color: var(--nhan); box-shadow: 0 0 0 3px var(--nhan-nen); }
.ht-buoc.cau-noi { grid-template-columns: 32px minmax(0, 1fr); }
.ht-buoc.cau-noi .ht-diem { width: 14px; height: 14px; margin: 9px auto 0; border-width: 2px; }
.ht-buoc.cau-noi .ht-ten { font-style: italic; font-size: var(--c-nho); }
.ht-buoc.cau-noi.dang_hoc .ht-diem { width: 18px; height: 18px; }
.ht-than { min-width: 0; padding-top: 4px; }
.ht-ten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--k2); }
.ht-ten b { font-size: var(--c-than); }
.ht-buoc.sap_toi .ht-ten { color: var(--chu-phu); }
.ht-buoc.dang_hoc > .ht-than { background: var(--nhan-nen); border-radius: 10px; padding: var(--k2) var(--k3) var(--k3); box-shadow: inset 3px 0 0 var(--nhan); }
.ht-tien-do { display: grid; gap: 6px; margin-top: var(--k2); }
.ht-cando { margin-top: var(--k2); font-size: var(--c-nho); }
.ht-cando ul { margin: 6px 0 0; padding-left: 1.2em; }
.ht-cando li { margin: 2px 0; }
.ht-kn-ds { display: grid; gap: var(--k3); }
.ht-kn { border-top: 1px solid var(--vach); padding-top: var(--k3); min-width: 0; }
.ht-kn:first-child { border-top: 0; padding-top: 0; }
.ht-kn-dau { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k2); flex-wrap: wrap; }
.ht-muc { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--chu); }
.ht-so { font-variant-numeric: tabular-nums; color: var(--mn-navy-800); font-size: var(--c-h3); }
.ht-o { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 8px 0 4px; max-width: 240px; }
.ht-o span { height: 8px; border-radius: 4px; background: var(--vach); }
.ht-o span.co { background: var(--mn-navy-800); }
.ht-trich { margin: 8px 0 0; padding: 8px 12px; background: var(--mat-nhat); border-radius: 8px; font-style: italic; overflow-wrap: anywhere; }
.ht-sua { margin: 6px 0 0; font-size: var(--c-nho); overflow-wrap: anywhere; }
.ht-nguon { margin-top: 6px; font-size: var(--c-nhan); }
/* D129: sổ lỗi — thẻ "Lỗi cũ" (học viên, phụ huynh) và #/so-loi (giáo viên, trung tâm) */
.sl-ds { list-style: none; margin: 0; padding: 0; display: grid; }
.sl-dong { border-top: 1px solid var(--vach); padding: var(--k3) 0; min-width: 0; display: grid; gap: 6px; }
.sl-dong:first-child { border-top: 0; padding-top: 0; }
.sl-cau { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
.sl-sai { color: var(--chu-phu); text-decoration: line-through; text-decoration-thickness: 1px; }
.sl-mui { color: var(--chu-phu); }
.sl-dung { font-weight: 600; color: var(--chu); }
.sl-nhan, .sl-tom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--k2); }
.sl-nhan .nhan-tt, .sl-dem .nhan-tt, .sl-tom .nhan-tt { white-space: normal; }
.sl-trich { margin-top: 2px; }
.sl-ngay { font-size: var(--c-nhan); }
.sl-dem { margin-bottom: var(--k3); }
.sl-hv > summary { cursor: pointer; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--k3); list-style: none; }
.sl-hv > summary::-webkit-details-marker { display: none; }
.sl-hv > summary b::before { content: '▸ '; color: var(--chu-phu); }
.sl-hv[open] > summary b::before { content: '▾ '; }
.sl-hv[open] > summary { margin-bottom: var(--k3); }
.sl-dong .btn { min-height: 44px; justify-self: start; }
.ht-lan > summary, .cn-bang > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--lien-ket); }
.ht-muc-bai { margin: var(--k4) 0 4px; font-size: var(--c-h2); }
.cn-moc { border-top: 1px solid var(--vach); padding: var(--k3) 0; display: grid; gap: var(--k2); min-width: 0; }
.cn-moc:first-of-type { border-top: 0; padding-top: 0; }
.cn-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--k2); flex-wrap: wrap; }
.cn-dau > div { min-width: 0; flex: 1 1 200px; }
.cn-moc > * { min-width: 0; }
.cn-moc .nhan-tt, .cn-dau .nhan-tt { white-space: normal; }
.cn-dau .btn { min-height: 44px; }
.cn-diem { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-o { font-size: var(--c-nhan); padding: 4px 10px; border-radius: 999px; background: var(--mat-nhat); font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere; }
.cn-o.trong { color: var(--chu-phu); }
.cn-trich { margin: 0; padding-left: 1.2em; font-size: var(--c-nho); overflow-wrap: anywhere; }
.cn-form { border: 1px solid var(--vach-dam); border-radius: var(--bo); padding: var(--k3); background: var(--mat); }
.cn-kn { border: 0; border-top: 1px solid var(--vach); margin: 0; padding: var(--k3) 0 0; min-width: 0; }
.cn-kn legend { font-weight: 700; padding: 0; }
.cn-nhom { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--k2) 0; }
.cn-nut { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--vach-dam); border-radius: 10px; background: var(--mat); color: var(--chu); font: inherit; font-weight: 600; cursor: pointer; }
.cn-nut[aria-pressed="true"] { background: var(--mn-navy-800); border-color: var(--mn-navy-800); color: #fff; }
.cn-nut:focus-visible { outline: 3px solid var(--vong-chon); outline-offset: 2px; }
.cn-mo-ta { margin: 0 0 var(--k2); min-height: 1em; }
.cn-bang ol { margin: 0 0 var(--k2); padding-left: 1.4em; font-size: var(--c-nho); }
.cn-goi-y .btn { min-height: 44px; text-align: left; white-space: normal; }
.cn-so { background: var(--mat-nhat); border-radius: 8px; padding: 8px 12px; display: grid; gap: 6px; }

/* ── D130 đợt 1: thẻ số và thẻ "After class" ở Today (giáo viên), trang "Việc cần xử lý" (Founder) ── */
.o-so.can-lam b { color: var(--gap); }
.sb-ds { display: grid; gap: var(--k3); }
.sau-buoi { display: grid; gap: var(--k2); padding: var(--k3); border: 1px solid var(--vach); border-radius: var(--bo); background: var(--mat); min-width: 0; }
.sb-dau { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--k2); }
.sb-dau b { font-size: var(--c-h3); line-height: 1.4; overflow-wrap: anywhere; }
.sau-buoi .hang-nhan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sau-buoi .nhan-tt { white-space: normal; }
.sb-ghi-chu { display: grid; gap: 6px; border-top: 1px solid var(--vach); padding-top: var(--k2); }
.sb-ghi-chu label { font-weight: 600; font-size: var(--c-nho); }
.sb-ghi-chu textarea { min-height: 64px; }
.sb-chan { display: flex; flex-wrap: wrap; gap: var(--k2); align-items: center; justify-content: space-between; }
.sb-chan .phu { margin: 0; flex: 1 1 200px; font-size: var(--c-nhan); }
.viec-ds { list-style: none; margin: 0; padding: 0; }
.viec-dong { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--k2); padding: var(--k3) 0; border-top: 1px solid var(--vach); }
.viec-dong:first-child { border-top: 0; padding-top: 0; }
.viec-dong.do { box-shadow: inset 3px 0 0 var(--gap); padding-left: var(--k3); }
.viec-dong.da-xong { opacity: .6; }
.viec-ten { font-weight: 600; overflow-wrap: anywhere; }
.viec-chi-tiet { margin: 2px 0 6px; overflow-wrap: anywhere; }
.viec-noi-dung .hang-nhan { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.viec-noi-dung .nhan-tt { white-space: normal; }
.viec-nut { display: flex; flex-wrap: wrap; gap: var(--k2); align-items: center; }
.viec-nhom.co-do .the-dau h2 { color: var(--gap); }
@media (min-width: 720px) { .viec-dong { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .viec-nut { justify-content: flex-end; } }
/* Cột phải của Today hẹp (≥300px): dòng báo cáo xếp dọc để tên lớp không bị bẻ từng chữ khi có thêm nút Xác nhận đã dạy (D128). */
.gv-luoi .bc-dong { grid-template-columns: minmax(0, 1fr); }
/* ── Phiếu buổi học / Session check (D136, CRM 0165) ── */
.pb-tinh-trang { border-left: 4px solid var(--tot); }
.pb-tinh-trang.luyen { border-left-color: var(--nhan); }
.pb-tinh-trang.gap { border-left-color: var(--gap); }
.pb-tinh-trang.chua { border-left-color: var(--vach-dam); }
.pb-dong-tt { font-size: var(--c-h3); font-weight: 600; margin: 0 0 8px; line-height: 1.4; }
.pb-so-do { display: grid; gap: 6px; min-width: 0; }
.pb-chu-giai { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--c-nhan); color: var(--chu-phu); margin-bottom: 6px; }
.pb-chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.pb-chu-giai i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.pb-chu-giai i.pb-lich { width: 0; height: 12px; border-left: 2px dashed #57729e; border-radius: 0; }
.pb-hang { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; }
.pb-nhan { font-size: var(--c-nhan); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; min-width: 0; }
.pb-nhan .phu { display: block; font-weight: 400; font-size: .8125rem; }
.pb-thanh { min-width: 0; line-height: 0; border-radius: 4px; overflow: hidden; }
.pb-thanh svg { display: block; }
.pb-truc .pb-vach { position: relative; height: 18px; font-size: .75rem; color: var(--chu-phu); font-variant-numeric: tabular-nums; }
.pb-truc .pb-vach span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.pb-truc .pb-vach span:first-child { transform: none; }
.pb-ti-le-thanh { position: relative; display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--vach); }
.pb-ti-le-thanh span { display: block; height: 100%; }
.pb-muc-tieu { position: absolute; top: 0; bottom: 0; border: 2px solid var(--nhan-chu); border-radius: 4px; box-sizing: border-box; }
.pb-ti-le-so { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pb-ti-le-so .tot { color: var(--tot); } .pb-ti-le-so .luyen { color: var(--luyen); }
.pb-goi-y h3 { font-size: var(--c-than); margin: 12px 0 6px; }
.pb-goi-y ul, .pb-ds { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.pb-ds li { line-height: 1.5; }
.pb-ds .lien-ket-di { margin-left: 8px; }
.pb-ai { margin-left: 6px; font-size: .75rem; padding: 1px 6px; }
.pb-chan { margin-top: 8px; }
.o-phieu { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; text-decoration: none; }
.talk-phieu { font-size: var(--c-nhan); }
@media (max-width: 420px) { .pb-hang { grid-template-columns: 72px minmax(0, 1fr); } }
@media print { .pb-thanh svg, .pb-ti-le-thanh span { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 520px) { .pb-truc .pb-vach span:nth-child(even) { display: none; } }