:root{
  --navy:#0F3A5C; --text:#1A4A6E; --deep:#1B7DB8; --mid:#2E96D0; --light:#5BAFDD;
  --pale:#B8DCEF; --bg:#EEF7FC; --kbg:#EEF7FC; --gold:#CDA85F; --gold2:#E4C58A; --hot:#F5C843;
  --tx2:#4A6A82; --ln:#D7E6F1; --white:#fff;
  --on-toi:#A8CFE6; --on-toi2:#CFE6F4;
  --g-btn:linear-gradient(135deg,#1B7DB8 0%,#2E96D0 100%);
  --g-deep:linear-gradient(135deg,#0F3A5C 0%,#1A4A6E 50%,#1B7DB8 100%);
  --g-soft:linear-gradient(135deg,#EEF7FC 0%,#D6E9F5 100%);
  --g-gold:linear-gradient(135deg,#F5C843 0%,#E4C58A 100%);
  --g-cta:linear-gradient(135deg,#1B7DB8 0%,#2E96D0 50%,#5BAFDD 100%);
  --rail:linear-gradient(90deg,#1B7DB8,#2E96D0,#5BAFDD,#F5C843,#CDA85F);
  /* Dải nền màn vinh danh + dải mờ ở đáy nó. Phải là biến, không được ghi màu thẳng:
     mỗi giáo viên chọn một bảng màu, ghi thẳng là cả màn lệch hẳn khỏi phần còn lại
     của web (anh Ba 25/09/2026: "anh đang để màu xanh lá cây mà"). */
  --g-xh:radial-gradient(120% 90% at 50% 0%,#2E96D0 0%,#1A4A6E 52%,#0F3A5C 100%);
  --g-xh-mo:linear-gradient(180deg,#0F3A5C00 0%,#EEF7FC8C 62%,#EEF7FC 100%);
  /* THANG KÍCH THƯỚC KHU QUẢN TRỊ — ba cỡ, khai báo một chỗ. Chi tiết và phạm vi
     áp dụng: xem khối "THANG KÍCH THƯỚC KHU QUẢN TRỊ" ở cuối chuỗi CSS này. */
  --qt-l:42px; --qt-lx:12px; --qt-lf:14.5px;    /* cỡ lớn — ô nhập biểu mẫu, nút chính */
  --qt-m:36px; --qt-mx:10px; --qt-mf:13.5px;    /* cỡ vừa — thanh công cụ, hàng lọc, hộp bật ra từ bảng */
  --qt-s:30px; --qt-sx:9px;  --qt-sf:12.5px;    /* cỡ nhỏ — nút trong bảng, nút ⋯ */
  --qt-mi:46px;                                  /* dòng chọn trong menu ⋯ (.mi) */
  --qt-loc:50px;                                 /* ô lọc có số (.bl-o .oso-nut) */
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#FBFDFE;color:#12283A;font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  /* chạm không loé ô xám, không kéo giãn mép như trang web */
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;
  /* Tắt "chạm hai lần để phóng to". Trình duyệt phải chờ khoảng 300ms sau mỗi cú
     chạm để xem có cú thứ hai không — đó chính là chỗ bấm nhanh thấy khựng.
     Vẫn giữ chụm hai ngón để phóng to, nên người mắt kém không bị thiệt. */
  touch-action:manipulation}
a,button,label,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Nút và mục menu không phải chữ để đọc: chạm nhiều lần không bôi đen,
   giữ lâu không bật bảng chọn của hệ điều hành. */
.tabitem,.btn,.aprow,.segbar a,.navcta,.cd-dong,.mback,.mico,
button,[role=button]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Phản hồi tức thì khi chạm. Trang tải xong mất ~150ms; không có dấu hiệu nào
   trong khoảng đó thì người dùng tưởng nút không ăn và bấm lại. */
a:active,.btn:active,.ccta:active,button:active{transform:scale(.97)}
.tabitem:active{background:var(--bg);transform:none}
.tabitem:active svg{transform:scale(.9)}
.btn,.ccta,.navcta{transition:transform .08s,filter .15s}
.tabitem,.tabitem svg{transition:background .08s,transform .08s,color .08s}
/* đang chuyển trang thì làm mờ nhẹ để biết máy đã nhận lệnh */
body.dangdi{opacity:.72;transition:opacity .12s .05s}
a{color:var(--deep);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.rail{height:3px;background:var(--rail)}

/* nav */
nav.top{background:#fff;border-bottom:1px solid var(--ln);position:sticky;top:0;z-index:50}
nav.top .in{display:flex;align-items:center;gap:14px;padding:11px 20px}
.brand{display:flex;align-items:center;gap:9px;color:var(--navy);flex-shrink:0}
.brand .mk{width:30px;height:30px;border-radius:7px;flex-shrink:0;display:block;
  object-fit:cover;background:var(--g-btn)}
.brand b{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

/* ẩn checkbox đúng chuẩn: không chiếm chỗ, vẫn dùng được bằng bàn phím */
.navtog{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.navtog:focus-visible ~ .burger{outline:2px solid var(--deep);outline-offset:2px}
.burger{display:none;margin-left:auto;font-size:21px;line-height:1;color:var(--navy);
  cursor:pointer;padding:5px 9px;border-radius:5px;user-select:none}
.burger:hover{background:var(--bg)}

.navmenu{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:nowrap}
.navmenu a{font-size:14.5px;font-weight:600;color:var(--navy);white-space:nowrap;letter-spacing:-.005em}
.navmenu a:hover{color:var(--deep);text-decoration:none}
.navmenu a.cur{color:var(--deep)}
/* menu cấp 2: mở khi rê chuột hoặc khi con trỏ bàn phím vào bên trong */
.navdrop{position:relative;display:inline-flex}
.dropmenu{display:none;position:absolute;top:100%;right:0;min-width:186px;z-index:70;
  background:#fff;border:1px solid var(--ln);border-radius:7px;padding:5px;
  box-shadow:0 10px 26px -10px rgba(15,58,92,.28)}
.navdrop:hover .dropmenu, .navdrop:focus-within .dropmenu{display:block}
/* vùng đệm để chuột đi từ chữ xuống menu không bị rơi */
.navdrop::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px}
.dropmenu a{display:block;padding:9px 12px;border-radius:5px;font-size:14px;font-weight:500;
  color:var(--navy);white-space:nowrap}
.dropmenu a:hover{background:var(--kbg);color:var(--deep);text-decoration:none}
.dropmenu a.thoat{color:#B4453C;border-top:1px solid var(--ln);border-radius:0 0 5px 5px;margin-top:4px;padding-top:11px}
.dropmenu a.thoat:hover{background:#FBEAE8;color:#A33F36}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.navdrop,.dropmenu{display:none}}
.navtim{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--kbg);color:var(--navy);flex:none}
.navtim:hover{background:var(--pale)}
.navtim svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.navsep{width:1px;height:20px;background:var(--ln);flex-shrink:0}
.navcta{display:inline-block;background:var(--g-btn);color:#fff!important;
  padding:8px 16px;border-radius:5px;font-size:12.5px;font-weight:600;white-space:nowrap}
.navcta:hover{filter:brightness(1.06)}

@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .burger{display:block}
  .navmenu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--ln);box-shadow:0 8px 20px -12px rgba(15,58,92,.3);
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0}
  .navtog:checked ~ .navmenu{display:flex}
  .navmenu a{padding:12px 20px;font-size:15px;border-bottom:1px solid var(--bg)}
  .navmenu a:last-child{border-bottom:none}
  .navsep{display:none}
  .navcta{display:none}
}

/* ── Trang tìm kiếm ── */
.timo{display:flex;gap:9px;margin:2px 0 22px}
.timo input{flex:1;min-width:0;padding:12px 15px;font-size:15.5px;font-family:inherit;
  border:1px solid var(--ln);border-radius:7px;background:#fff;color:var(--navy)}
.timo input::placeholder{color:var(--tx2)}
.timo input:focus{outline:none;border-color:var(--deep);box-shadow:0 0 0 3px var(--pale)}
.kqnhom{margin-bottom:22px;padding-bottom:0}   /* là thẻ section nên phải gỡ padding chung */
.kqnhom > h3{font-size:13.5px;font-weight:700;color:var(--navy);margin:0 0 9px;
  display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.kqnhom > h3 span{font-size:11.5px;font-weight:500;color:var(--tx2)}
.kqds{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:8px;
  background:#fff;overflow:hidden}
.kq{display:block;padding:13px 16px;border-top:1px solid var(--bg);color:inherit}
.kq:first-child{border-top:none}
.kq:hover{background:var(--kbg);text-decoration:none}
.kq b{display:block;font-size:15px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.kq span{display:block;font-size:13.5px;color:var(--tx2);margin-top:3px;line-height:1.5}
.kq span:empty{display:none}

/* buttons */
.btn{display:inline-block;background:var(--g-btn);color:#fff;padding:11px 22px;border-radius:5px;font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:inherit;text-align:center}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.gold{background:var(--g-gold);color:var(--navy)}
.btn.ghost{background:none;border:1px solid var(--deep);color:var(--deep)}
.btn.wide{display:block;width:100%}
.btn.lg{padding:14px 30px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* hero */
.hero{background:var(--g-deep);color:#fff;padding:46px 0}
.hero .kick{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--hot);margin-bottom:12px}
.hero h1{font-size:clamp(26px,4.4vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 13px;max-width:20ch;text-wrap:balance}
.hero p{font-size:15.5px;line-height:1.7;color:#C6E1F2;max-width:none;margin:0 0 14px}
.hero p:last-of-type{margin-bottom:20px}
.stats{display:flex;gap:28px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(184,220,239,.28);flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:"IBM Plex Mono",monospace;font-size:23px;color:var(--hot);font-weight:500}
.stats span{font-size:11px;color:var(--on-toi)}

/* sections */
section{padding:40px 0;border-top:1px solid var(--ln)}
.slabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
h1.st,h2.st{font-size:21px;font-weight:600;margin:0 0 18px;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
h3{font-size:16px;font-weight:600;margin:0;color:var(--navy)}
p{margin:0 0 12px;max-width:68ch}
p:last-child{margin-bottom:0}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12.5px;padding:6px 13px;background:var(--bg);border:1px solid var(--pale);border-radius:5px;color:var(--deep);font-weight:500}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
/* trang Gói tập: 4 gói một hàng trên máy tính, 2 ở màn vừa */
.grid-goi{grid-template-columns:minmax(0,1fr)}
@media(min-width:641px){.grid-goi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1101px){.grid-goi{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}   /* 1024: 2×2 cho thoáng, giá + giá gạch còn chung dòng */
/* Thẻ gói: giá đứng RIÊNG một dòng, giá gạch + nhãn % xuống dòng dưới.
   Trước đây ép cả ba thứ trên một dòng (flex-wrap:nowrap từ 1201px trở lên). Bỏ hẳn cách đó:
   bốn gói một hàng thì ô giá chỉ rộng 212px, mà một thẻ giá bảy chữ số như
   "6.500.000đ  12.000.000đ  −46%" cần tới 257px — ép một dòng là chữ tràn khỏi thẻ rồi bị cắt
   cụt (anh Ba bắt được ở trang thật 25/09/2026). Thu nhỏ cỡ chữ chỉ cứu được chừng 30px, không
   đủ, mà gói càng đắt càng vỡ — nên chốt hai dòng thay vì chữa mẹo.
   Chốt hai dòng cho MỌI thẻ, kể cả thẻ không giảm giá (min-height), để các thẻ cao bằng nhau
   và hàng nút Đăng ký thẳng một đường. */
.goi-card{height:100%}
.goi-card .cexc{min-height:2.9em}
.goi-card .cprice{flex-wrap:wrap;gap:1px 8px;align-items:baseline;align-content:flex-end;min-height:52px}
.goi-card .pnew{font-size:21px;flex:0 0 100%}
.goi-card .pold{font-size:12.5px}
.goi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.cgia-buoi{font-size:12.5px;color:var(--tx2);margin:-2px 0 6px}
.goi-top .clv{margin:0}
/* ── trang /goi-tap: thẻ đầy đủ (gc-day), gói nổi bật (gc-nb) ── */
.gc-day .cbody{gap:6px}
.gc-day .ctitle{font-size:16.5px}
.gc-day .cexc{min-height:0}
.gc-tk{font-size:11px;font-weight:700;color:#8E2A1E;background:#FDECEA;padding:2px 8px;border-radius:4px;white-space:nowrap}
.gc-nb .gc-tk{background:var(--hot);color:var(--navy)}
.gc-loi{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.gc-loi li{display:flex;align-items:flex-start;gap:7px;font-size:13px;line-height:1.45;color:var(--tx2)}
.gc-loi svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;color:#1E7A4D}
.gc-day .cprice{padding-top:10px;min-height:0}
.gc-day .cgia-buoi{margin:-3px 0 4px}
.gc-day form{margin:0}
.gc-day .ccta{margin-top:6px}
.gc-xem{display:block;text-align:center;font-size:12.5px;color:var(--tx2);margin-top:2px;text-decoration:underline;text-underline-offset:2px}
.gc-xem:hover{color:var(--deep)}
/* gói nổi bật: dải vàng trên đỉnh, viền ấm, bóng đậm hơn — nhận ra ngay kể cả khi xếp một cột */
.gc-nb{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot),0 10px 28px rgba(15,23,42,.14)}
.gc-nb:hover{box-shadow:0 0 0 1px var(--hot),0 14px 32px rgba(15,23,42,.18)}
.gc-rb{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--g-gold);color:var(--navy);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;line-height:1.3}
.gc-rb svg{width:13px;height:13px;fill:currentColor;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.gc-nb .pnew{color:var(--navy);font-size:23px}
.gc-nb .ccta.vang{box-shadow:0 4px 12px rgba(15,23,42,.14)}
/* dải tin cậy dưới lưới */
.gc-tin{list-style:none;margin:22px 0 0;padding:16px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 22px;
  background:var(--bg);border:1px solid var(--pale);border-radius:12px}
.gc-tin li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--deep)}
.gc-tin svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;color:var(--deep);opacity:.85}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){.gc-tin{grid-template-columns:minmax(0,1fr);padding:14px 16px;gap:10px}}
.card{border:1px solid var(--ln);border-radius:6px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/10;background:var(--g-soft);display:grid;place-items:center;
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
  font-size:30px;color:var(--light);border-bottom:1px solid var(--ln);overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .cb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .lvl{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.07em;color:var(--gold);text-transform:uppercase}
.card .nm{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--navy);letter-spacing:-.01em}
.card .han{display:block;margin:2px 0 3px}
.card .mt{font-size:12px;color:var(--tx2)}
.card .pr{font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--deep);font-weight:500;margin-top:auto;padding-top:9px}

/* thẻ khoá học — theo chuẩn kimbayoga.com */
.ccard{background:#fff;border:1px solid #E5E7EB;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.05);display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s}
.ccard:hover{box-shadow:0 6px 22px rgba(15,23,42,.1);transform:translateY(-2px)}
.cmedia{display:block;aspect-ratio:16/9;background:var(--g-soft);overflow:hidden}
.cmedia img{width:100%;height:100%;object-fit:cover;display:block}
.cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.clv{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold)}
.ctitle{font-size:17px;font-weight:700;line-height:1.4;margin:0;letter-spacing:-.01em}
.ctitle a{color:var(--navy)}
.ctitle a:hover{text-decoration:none;color:var(--deep)}
.cexc{font-size:14px;color:#6B7280;line-height:1.6;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cprice{display:flex;align-items:baseline;gap:9px;margin-top:auto;padding-top:9px}
.pnew{font-size:19px;font-weight:600;color:var(--deep)}
.pold{font-size:13.5px;color:#9CA3AF;text-decoration:line-through}
/* Nhãn % giảm trên thẻ khoá học. Đỏ tươi #E53935 chứ không phải đỏ gạch trầm: cả lưới tám
   thẻ ảnh màu, đỏ trầm chìm nghỉm, đỏ tươi mới bắt được mắt — đúng sắc Kinafit đang dùng. */
.poff{font-size:11.5px;font-weight:700;line-height:1.5;color:#fff;background:#E53935;
  border-radius:6px;padding:1px 6px;align-self:center;white-space:nowrap}
.ccta{display:block;text-align:center;background:var(--g-cta);color:#fff;
  border-radius:8px;padding:10px 16px;font-size:14px;font-weight:700;margin-top:11px}
.ccta:hover{text-decoration:none;filter:brightness(1.06)}
button.ccta{width:100%;border:none;cursor:pointer;font-family:inherit;line-height:inherit}
.ccta.vang{background:var(--g-gold);color:var(--navy)}     /* đã có quyền học → Vào học */
/* Khoá miễn phí: vàng cam như nút Vào học — vàng = không mất tiền, bấm là vào; màu chủ đạo đặc = cần mua */
.ccta.free{background:var(--g-gold);color:var(--navy)}
.cprice{flex-wrap:wrap}.cprice .badge{margin-left:auto}                            /* nhãn trọn đời / có hạn dồn sang mép phải */

.cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;
  font-size:12.5px;color:var(--tx2);margin-top:2px}
.cmeta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.cmeta svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.pnote{font-size:12.5px;color:var(--tx2)}
.pnew.free{color:#1E7A4D}

/* bảng thông tin lớp */
.dl{border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#fff}
.dr{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:11px 15px;
  border-bottom:1px solid var(--ln);font-size:14px}
.dr:last-child{border-bottom:none}
.dk{color:var(--tx2)}
/* .dk vốn chỉ để ĐÁNH DẤU "chỉ hiện trên máy tính" (xem @media bên dưới ẩn nó đi),
   nhưng nó cũng đặt màu chữ xám — đặt sau .btn nên đè luôn chữ trắng của nút nền đậm,
   làm nút "+ Thêm học viên" chữ đậm trên nền đậm, đọc không ra (anh Ba thấy 23/09/2026).
   Nút nền đậm giữ chữ trắng; nút ghost nền trắng thì chữ xám vẫn đúng. */
.btn.dk:not(.ghost){color:#fff}
.dv{color:var(--navy);font-weight:500}

/* bảng dữ liệu */
.tbl{overflow-x:auto;border:1px solid var(--ln);border-radius:8px;background:#fff}
.tbl table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--tx2);padding:11px 14px;background:var(--bg);
  border-bottom:1px solid var(--ln);white-space:nowrap}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--ln);vertical-align:middle;color:var(--navy)}
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.act,.tbl td.act{text-align:right;width:1%;white-space:nowrap}
.tbl td.act form{display:inline-block}
.tbl .pill{min-width:136px;text-align:center}
/* cột đầu (tên) không bị bóp thành 4 dòng khi bảng chật — thà cuộn ngang */
.tbl td:first-child,.tbl th:first-child{min-width:190px}
.tbl td .han{white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#FAFCFE}
/* ── Bảng đơn hàng (Tổng quan + màn Đơn hàng) ──
   Mã đơn chỉ để tra cứu, các mốc thời gian là thông tin đi kèm → xuống dòng phụ, chữ nhỏ,
   nhờ vậy bảng bớt một cột và tên học viên không bị bóp thành bốn dòng. */
.dontbl .don-phu{display:block;font-size:11px;line-height:1.45;color:var(--tx2);margin-top:2px}
/* Cột đầu giữ chỗ cho tên học viên đủ một dòng (tên dài nhất thực tế ~21 chữ) — thông tin
   quan trọng nhất của dòng; dưới nó là số điện thoại và mã đơn cỡ nhỏ. */
.dontbl td:first-child,.dontbl th:first-child{min-width:196px}
.dontbl .don-tg{font-size:12.5px;white-space:nowrap}
/* mã đơn không bị ngắt giữa chừng, và dấu · đi theo mã khi dòng phụ phải xuống hàng */
.dontbl .don-ma{white-space:nowrap}
/* Chữ trạng thái đơn ngắn ("đã huỷ") nên không ép rộng như bảng thẻ tập dùng pill dài */
.dontbl .pill{min-width:0}
/* Bề ngang hẹp (máy tính 13" hoặc cửa sổ chia đôi ~900px): nén bảng đơn lại để cột Thao tác
   không bị đẩy ra ngoài vùng cuộn — việc chính ở màn này là bấm Kích hoạt.
   Cùng mốc 1180px với khối xếp lại khu quản trị ở dưới, để không có dải nào lệch nhau. */
@media(min-width:861px) and (max-width:1260px){
  .dontbl td,.dontbl th{padding-left:9px;padding-right:9px}
}
@media(min-width:861px) and (max-width:1180px){
  /* 118px: vừa đủ để tên học viên không tãi ra bốn dòng, vẫn đủ chỗ cho cột Thao tác */
  .dontbl td:first-child,.dontbl th:first-child{min-width:118px}
  .dontbl .don-tg,.dontbl .pill{white-space:normal}
  /* dòng phụ "thực nhận 1,500,000đ" để một dòng thì ép cột tiền rộng 150px và
     đẩy cột Thao tác ra ngoài vùng cuộn — cho nó xuống dòng ở bề ngang hẹp */
  .dontbl td.num{white-space:normal}
}

/* ── Bảng danh sách học viên ──
   Bảy cột cũ làm hàng cao ba–bốn dòng: cột Liên hệ chỉ để một số điện thoại mà chiếm
   gần 170px. Gộp phần nhận diện (tên · mã · số gọi · nhãn) vào một ô, còn lại mỗi cột
   một ý — thẻ tập, khoá video, tập gần đây, đã trả, chăm sóc. */
/* Cột 1 nay là Mã số (hẹp), cột 2 mới là Học viên — bề rộng tối thiểu dời sang cột 2 */
.hvtbl td:nth-child(2),.hvtbl th:nth-child(2){min-width:210px}
.hvtbl .hv-phu{gap:3px 5px;line-height:1.45}
.hvtbl .hv-phu a{color:var(--deep)}
.hvtbl .hv-sep{color:#C3CEDA}
/* email dài (học viên chưa có số) không được kéo rộng cả cột */
.hvtbl .hv-em{max-width:186px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hvtbl td.hv-nho{font-size:12.5px;color:var(--tx2)}
/* ghi chú chăm sóc là chữ dài nhất bảng — chặn bề rộng và cắt còn hai dòng để hàng
   không cao vọt lên; chữ đầy đủ nằm trong title, trỏ chuột là đọc được cả câu */
.hvtbl td.hv-cham .trong{white-space:nowrap}
.hvtbl .hv-cham-n{line-height:1.45;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
/* dấu sinh nhật trong tháng: hồng nhạt, cùng bảng màu với dấu "tặng" nhưng tên riêng */
.badge.sn{background:#FDEEF4;color:#8E2A56}
/* Bề ngang hẹp (861–1180px, cửa sổ chia đôi ~900px): bóp đệm ô, thu dấu nhỏ lại và
   giữ cột đầu 170px — hẹp hơn nữa thì đống dấu (tạm khoá · sinh nhật · nhãn) xếp thành
   sáu bảy dòng, hàng cao vọt; rộng hơn nữa thì sáu cột không đủ chỗ, phải cuộn ngang. */
@media(min-width:861px) and (max-width:1180px){
  .hvtbl td,.hvtbl th{padding-left:8px;padding-right:8px}
  .hvtbl td:nth-child(2),.hvtbl th:nth-child(2){min-width:170px}
  .hvtbl .hv-em{max-width:112px}
  .hvtbl .badge{font-size:9.5px;padding:1px 6px}
  .hvtbl .hv-phu{font-size:11px}
  /* tên cột được xuống dòng: "TẬP GẦN ĐÂY" nằm một dòng làm cả bảng phải cuộn ngang */
  .hvtbl th{white-space:normal}
}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  /* Bảng cuộn ngang trên điện thoại là trải nghiệm tệ — đổi sang thẻ xếp dọc */
  .tbl{border:none;background:none;overflow:visible}
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto;min-width:0}
  .tbl thead{display:none}
  .tbl tr{background:#fff;border:1px solid var(--ln);border-radius:10px;
    padding:13px 15px;margin-bottom:10px}
  .tbl td{border:none;padding:0;display:flex;justify-content:space-between;
    gap:14px;align-items:baseline;font-size:13.5px;padding-top:5px}
  .tbl td:first-child{padding-top:0;padding-bottom:7px;margin-bottom:6px;
    border-bottom:1px solid var(--ln);font-size:15px}
  .tbl td:not(:first-child)::before{content:attr(data-k);color:var(--tx2);
    font-size:12px;font-weight:500;flex-shrink:0}
  .tbl td br{display:none}
  /* Ô để trống (chưa có mã số, chưa mua thẻ nhóm đó) thì giấu luôn cả dòng — nếu không,
     trên điện thoại mỗi thẻ hiện một loạt nhãn "Thẻ PT 1-1" chẳng có gì đứng sau. */
  .tbl td:empty{display:none}
}
/* Tên riêng, không dùng lại ".warn" của khối cảnh báo lớn — tránh đụng style */
.badge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;
  border-radius:4px;white-space:nowrap;line-height:1.5;border:0}
.badge.alert{background:#FDF6E4;color:#7A5C14}
/* Dấu "quản trị": bản ghi thuộc tài khoản quản trị của giáo viên, không phải học viên thật */
.badge.qt{background:#F3EEFB;color:#5B3E8E}
/* Thẻ ĐỂ DÀNH: đã thu tiền, chưa kích hoạt — màu riêng, không lẫn với chờ tiền (vàng) hay
   đang tập (xanh). Nền cũ #EEF2FB nhạt gần bằng nền bảng (#F5F8FC) nên ở hàng so le là chìm
   hẳn; đậm lên một bậc cho bật khỏi nền, vẫn là xanh dương nên không lẫn trạng thái nào. */
.pill.giu{background:#DCE5F8;color:#27427F}
/* Thẻ TẶNG: không thu tiền — dấu hồng nhạt, nhìn bảng là biết ngay */
.badge.tang{background:#FDEEF4;color:#8E2A56}
/* Khối chỉ đường nghiệp vụ trong menu thẻ (chuyển nhượng thẻ đã kích hoạt) */
.gh-cn{border-top:1px dashed var(--ln);margin-top:6px;padding-top:9px}
/* Danh sách các bước có số, dùng ở trang hướng dẫn chuyển nhượng */
.ds-so{margin:10px 0 12px;padding-left:22px;font-size:14px;line-height:1.65;color:var(--navy)}
.ds-so li{margin-bottom:7px}
.ds-so i{font-style:normal;color:var(--tx2)}
/* Ô tích "Đây là thẻ tặng" trong form Cấp thẻ: giải thích nằm dưới, chữ nhỏ hơn */
.o-tang{display:flex;gap:9px;align-items:flex-start;margin:0 0 13px;padding:11px 13px;
  background:#FDEEF4;border:1px solid #F3D3E0;border-radius:7px}
.o-tang input{margin-top:3px;flex:none}
.o-tang b{display:block;font-size:14px;color:#7A2349}
.o-tang i{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:#8E5A72;margin-top:3px}
/* Ô lý do huỷ và ô tick đè luật một-thẻ-một-loại trong menu thao tác thẻ */
.gh-huy .gh-o{display:flex;gap:7px;align-items:center;flex-wrap:nowrap}
.gh-huy input{flex:1 1 auto;min-width:0}
/* .mi vốn là nút menu chiếm cả dòng — trong ô lý do thì phải co lại đứng cạnh ô nhập */
.gh-huy .gh-o .btn{border-radius:6px}
.gh-de{display:flex;gap:7px;align-items:flex-start;margin:2px 0 4px;font-size:12.5px;line-height:1.4;color:var(--tx2)}
.gh-de input{margin-top:2px;flex:none}

/* ── Định dạng bài viết: dùng chung cho Giới thiệu và blog ── */
.art{max-width:none;padding:0}
/* cột bên của trang bài viết — dùng chung lưới .split với trang khoá học,
   nhờ vậy hai mép trang thẳng hàng với đầu trang và chân trang */
.canh{display:flex;flex-direction:column;gap:16px;position:sticky;top:78px}
.canh-o{border:1px solid var(--ln);border-radius:7px;background:#fff;padding:16px 17px}
.canh-o h4{margin:0 0 11px;font-size:13.5px;font-weight:700;color:var(--navy);
  letter-spacing:.02em}
.canh-o .llist{border:none;border-radius:0}
.canh-o .li{padding:9px 0;font-size:13.5px;line-height:1.45;align-items:flex-start}
.canh-o .morelink{margin-top:10px;display:inline-block}
.canh-o .li .d{font-family:"IBM Plex Mono",monospace;font-size:11px;padding-top:2px}
/* thẻ khoá học gợi ý: ảnh bìa nhỏ 16:9 bên trái, tên + giá bên phải */
.canh-kh{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:6px;
  background:var(--g-soft)}
.canh-kh:hover{text-decoration:none}
.canh-kh .th{flex:0 0 96px;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:var(--bg)}
.canh-kh .th img{width:100%;height:100%;object-fit:cover;display:block}
.canh-kh .tt{display:flex;flex-direction:column;gap:4px;min-width:0}
.canh-kh .nm{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35}
.canh-kh .pr{font-size:13.5px;color:var(--deep);font-weight:500;line-height:1.3}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.canh{position:static}}
.art-date{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--gold);margin-bottom:10px}
.art h1{font-size:clamp(26px,3.6vw,34px);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 14px;text-wrap:balance}
.art-sub{font-size:13px;color:var(--tx2);margin:0 0 22px}
.art-lead{font-size:18px;line-height:1.65;color:var(--tx2);margin:0 0 24px}
/* ảnh bìa đầu bài: 16:9, đầy bề rộng cột bài */
.art-bia{margin:0 0 28px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--g-soft)}
.art-bia img{width:100%;height:100%;object-fit:cover;display:block}
.art-avatar{width:92px;height:92px;border-radius:50%;background:var(--g-soft);
  display:grid;place-items:center;font-size:42px;margin-bottom:18px;overflow:hidden;
  box-shadow:0 0 0 3px rgba(205,168,95,.35)}
.art-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* Ảnh giáo viên thật: giữ khung DỌC 4:5 y như trang chủ, chữ chảy quanh.
   Cắt tròn thì cùng một tấm không thể vừa đẹp ở cả hai nơi. */
.art-anh{float:right;width:180px;aspect-ratio:4/5;border-radius:11px;overflow:hidden;
  margin:2px 0 12px 22px;background:var(--g-soft);shape-outside:inset(0 round 11px)}
.art-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.art .art-end{clear:both}
@media(max-width:640px){.art-anh{width:132px;margin:2px 0 10px 15px}}

.art-body{font-size:17px;line-height:1.75;color:#33506B;max-width:68ch}
.art-body > *:first-child{margin-top:0}
.art-body p{margin:0 0 20px;max-width:none}
.art-body h2,.art-body h3{font-size:21px;font-weight:700;color:var(--navy);
  margin:28px 0 10px;line-height:1.35;letter-spacing:-.01em}
.art-body a{color:var(--deep);text-decoration:underline;text-decoration-color:var(--light);
  text-underline-offset:3px;text-decoration-thickness:1px}
.art-body a:hover{text-decoration-color:var(--deep)}
.art-body ul,.art-body ol{margin:0 0 20px;padding-left:24px}
.art-body li{margin-bottom:8px}
.art-body li::marker{color:var(--light)}
.art-body strong,.art-body b{color:var(--navy);font-weight:600}
.art-body em{color:var(--navy);font-style:normal;font-weight:600}
/* ảnh và video chèn trong bài viết */
.nhung{margin:0 0 22px;display:flex;flex-direction:column;gap:7px}
.nhung img{width:100%;height:auto;border-radius:9px;display:block;margin:0}
.nhung-vid{position:relative;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#0F1B24}
.nhung-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nhung figcaption{font-size:13px;color:var(--tx2);line-height:1.5;text-align:center}

/* thanh nút chèn media trong ô soạn bài */
.soan{display:flex;flex-direction:column;gap:9px}
.soan-nut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.soan-nut .btn{cursor:pointer}
.soan-nut .fhint{flex:1;min-width:190px}

/* ảnh chèn trong bài: rộng đúng 600px, cao theo tỉ lệ, căn giữa; màn hẹp thì co theo cột.
   Bài cũ trong D1 còn <img> trần hoặc figure.nhung — lo cả ba dạng. */
.art-body img{display:block;width:600px;max-width:100%;height:auto;border-radius:8px;margin:24px auto}
.art-body figure.art-img{margin:24px auto;width:600px;max-width:100%;display:flex;flex-direction:column;gap:8px}
.art-body figure.art-img img,.art-body .nhung img{margin:0 auto}
.art-body figure.art-img figcaption{font-size:13px;color:var(--tx2);line-height:1.5;text-align:center}
.art-body .nhung{margin:24px 0}
.art-body hr{border:none;border-top:1px solid var(--ln);margin:32px 0}
.art-body blockquote{margin:0 0 20px;padding:2px 0 2px 18px;
  border-left:3px solid var(--gold);color:var(--text)}

/* cuối bài: dải chia sẻ + dòng ngày/tác giả */
.art-chia{margin-top:30px;padding-top:18px;border-top:1px solid var(--ln);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.art-chia .k{font-size:12.5px;font-weight:600;color:var(--tx2);margin-right:4px}
.art-meta{margin-top:12px;font-size:13px;color:var(--tx2)}
.art-end{margin-top:28px;padding-top:22px;border-top:1px solid var(--ln);
  display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.art-end span{font-size:15px;color:var(--tx2);margin-right:4px}

@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .art{padding:26px 0 34px}
  .art-body{font-size:16px;line-height:1.7}
  .art-body h2,.art-body h3{font-size:19px;margin:26px 0 10px}
  .art-body img,.art-body figure.art-img{margin-top:18px;margin-bottom:18px}
  .art-body .nhung{margin:18px 0}
  .art-bia{margin-bottom:20px;border-radius:8px}
  .art-lead{font-size:16.5px}
  .art-avatar{width:76px;height:76px;font-size:34px}
}

/* Khung hẹp căn giữa — dùng cho form và nội dung ngắn,
   thay vì để dính lề trái trong khung 1080px. */
.narrow{max-width:440px;margin:0 auto;padding:40px 20px 52px}
.narrow > h1.st,.narrow > h2.st{margin-bottom:20px}
.narrow form.f{max-width:none}

/* dòng thông tin gọn thay cho hộp màu */
.metaline{display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--tx2);
  padding:13px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.metaline b{color:var(--navy);font-weight:600}
.metaline .ct{color:#7A5C14}

@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){ .narrow{padding:26px 20px 34px} }

/* ── Thẻ kết quả một bước (.xn) ──────────────────────────────────────
   Dùng cho trang báo kết quả trong khung .narrow (hiện dùng ở trang
   "Đã ghi nhận yêu cầu" sau khi gửi yêu cầu quên mật khẩu).
   Ràng buộc: đọc đủ trong một màn hình — cả thẻ phải cao dưới 550px ở
   1024×800, nên đầu thẻ gộp một hàng (biểu tượng 28px + tiêu đề), mỗi
   bước đúng một dòng, khối "Cần gấp" nằm chung hàng với hai nút nhỏ.
   Chỉ dùng token màu sẵn có, không thêm font hay thư viện. */
.xn{border:1px solid var(--ln);border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.05)}
.xn-top{padding:13px 20px 12px;text-align:center;background:var(--bg);
  border-bottom:1px solid var(--ln)}
.xn-hd{display:flex;align-items:center;justify-content:center;gap:9px}
.xn-ic{width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--ln);
  display:grid;place-items:center;color:var(--deep);flex-shrink:0}
.xn-ic svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xn-top h1.st,.xn-top h2.st{margin:0;font-size:18px;line-height:1.25}
.xn-sub{font-size:12.5px;line-height:1.45;color:var(--tx2);margin:6px 0 0;max-width:none}
.xn-buoc{list-style:none;margin:0;padding:0}
.xn-buoc .li{gap:10px;padding:9px 22px;font-size:13.5px;line-height:1.45;color:var(--navy)}
.xn-buoc .li:last-child{border-bottom:none}
.xn-buoc .n{width:21px;height:21px;font-size:10.5px}
.xn-gap{display:flex;align-items:center;gap:9px;padding:11px 22px;border-top:1px solid var(--ln)}
.xn-gap-lb{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx2);margin:0;flex-shrink:0}
.xn-nut{display:flex;gap:8px;margin-left:auto;min-width:0}
.xn-nut .btn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xn-nut .btn.ghost{background:#fff}
.xn-di{padding:13px 22px 15px;border-top:1px solid var(--ln)}
.xn-di .btn{display:block;width:100%}
.xn-chan{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:9px 0 0;font-size:12px;line-height:1.4;color:var(--tx2)}
.xn-chan a{font-weight:600;white-space:nowrap}

@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .xn-top{padding:13px 16px 12px}
  .xn-buoc .li{padding:9px 16px}
  .xn-gap{padding:11px 16px;flex-wrap:wrap}
  .xn-nut{margin-left:0;width:100%;flex-wrap:wrap}
  /* chia phần dư theo bề ngang chữ để số điện thoại không bị cắt;
     máy quá hẹp thì nút thứ hai tự xuống hàng và chiếm trọn hàng */
  .xn-nut .btn{flex:1 1 auto;min-width:0}
  .xn-di{padding:12px 16px 14px}
  .xn-chan{flex-direction:column;gap:5px;text-align:center}
}

/* ── Slider trượt ngang: tối đa 6 thẻ, không xuống dòng ── */
.shead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.shead-r{display:flex;align-items:center;gap:16px;flex-shrink:0}
.smore-link{font-size:13.5px;font-weight:600;color:var(--deep);white-space:nowrap}
.smore-link:hover{text-decoration:underline}
.shead h1.st,.shead h2.st{margin:0}
.sarrows{display:flex;gap:8px;flex-shrink:0}
.sarrow{width:36px;height:36px;border-radius:50%;border:1px solid var(--ln);background:#fff;
  color:var(--deep);cursor:pointer;display:grid;place-items:center;font-size:15px;
  font-family:inherit;line-height:1;transition:background .15s,opacity .15s;flex-shrink:0}
.sarrow:hover:not(:disabled){background:var(--bg)}
.sarrow:disabled{opacity:.35;cursor:default}

.strack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.strack::-webkit-scrollbar{display:none}
.strack > *{flex:0 0 clamp(260px,31%,340px);scroll-snap-align:start;min-width:0}

@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .sarrows{display:none}                 /* điện thoại vuốt, không cần mũi tên */
  .strack{gap:12px;scroll-padding-left:20px;align-items:flex-start} /* thẻ cao theo nội dung — không kéo giãn làm giá xa mô tả */
  .strack > *{flex:0 0 82%}
  @media(min-width:600px){.strack > *{flex:0 0 46%}}   /* máy tính bảng: 2 thẻ một màn */

  /* Trang chủ trên điện thoại: bài viết xếp dọc 5 bài, ảnh nhỏ bên trái + tiêu đề,
     thay cho dải cuộn ngang. Chỉ ăn vào #sl-bai, trang /tin-tuc không đổi. */
  #sl-bai{flex-direction:column;gap:10px;overflow:visible;scroll-snap-type:none}
  #sl-bai > .po{flex:0 0 auto;width:100%;flex-direction:row;align-items:center;border-radius:10px}
  #sl-bai > .po:nth-child(n+6){display:none}
  #sl-bai .th{width:112px;aspect-ratio:16/9;flex:0 0 auto}
  #sl-bai .po-txt{padding:8px 12px;gap:0}
  #sl-bai .dt{display:none}
  #sl-bai .tt{font-size:13.5px;-webkit-line-clamp:2;line-height:1.35}

  /* Khối học thử: ẩn trên điện thoại — trang chủ app chỉ giữ khối nổi bật + danh sách */
  #hoc-thu{display:none}
}

/* ── Hộp giá ── */
.buybox{border:1px solid var(--ln);border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 2px 10px rgba(15,23,42,.05)}
.bb-top{padding:18px 20px 16px;background:var(--g-soft);border-bottom:1px solid var(--ln)}
.bb-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bb-new{font-size:28px;font-weight:700;color:var(--deep);letter-spacing:-.02em}
.bb-new.free{color:#1E7A4D}
.bb-old{font-size:15px;color:#9CA3AF;text-decoration:line-through}
.bb-save{font-size:12px;font-weight:700;color:#fff;background:#E53935;
  padding:3px 8px;border-radius:6px;white-space:nowrap}
.bb-promo{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12.5px;
  color:#7A5C14;font-weight:600}
.bb-body{padding:16px 20px 18px;display:flex;flex-direction:column;gap:14px}
.bb-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.bb-list li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px;
  font-size:13.5px;color:var(--tx2);line-height:1.5;align-items:start}
.bb-list i{font-style:normal;color:#1E7A4D;font-weight:700}
.bb-note{font-size:12px;color:var(--tx2);text-align:center}

/* ── Đánh giá ── */
.rv{display:flex;flex-direction:column;gap:12px}
.rv-item{border:1px solid var(--ln);border-radius:10px;background:#fff;padding:15px 17px;
  display:flex;flex-direction:column;gap:7px}
.rv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rv-name{font-weight:600;color:var(--navy);font-size:14.5px}
.rv-stars{color:var(--hot);font-size:13px;letter-spacing:1px}
.rv-date{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2);margin-left:auto}
.rv-body{font-size:14.5px;color:var(--tx2);line-height:1.6;margin:0}
.rv-avg{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tx2);margin-bottom:14px}
.rv-avg b{font-size:22px;color:var(--navy);font-weight:700}

.rv-form{border:1px dashed var(--pale);border-radius:10px;background:var(--bg);
  padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.rv-form h4{margin:0;font-size:14.5px;font-weight:600;color:var(--navy)}
.rv-stars-in{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:3px}
.rv-stars-in input{position:absolute;width:1px;height:1px;clip-path:inset(50%)}
.rv-stars-in label{font-size:23px;color:var(--ln);cursor:pointer;line-height:1;padding:0}
.rv-stars-in input:checked ~ label,
.rv-stars-in label:hover, .rv-stars-in label:hover ~ label{color:var(--hot)}
.rv-form .two{gap:10px}

/* ── quản trị: gọn, dạng bảng ── */
.anav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--ln)}
.anav a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--tx2);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.anav a:hover{color:var(--deep);text-decoration:none}
.anav a.on{color:var(--deep);border-bottom-color:var(--deep)}

/* ═══════════ Ô SỐ LIỆU DÙNG CHUNG (.oso) — 24/09/2026 ═══════════
   MỘT dạng cho cả ba họ khối "một nhãn + một giá trị": ô số liệu (tiles), ô lọc có số
   ở đầu màn danh sách (boLoc), dải tình trạng trên hồ sơ học viên. Luôn là:
   NHÃN nhỏ in hoa ở trên · giá trị đậm ở dưới · chú thích nhỏ (nếu có).
   Nhãn đứng trước vì giá trị có khi là câu chữ ("chưa mở khoá nào") chứ không phải số.
   Viền trái đổi màu theo nghĩa, đúng bốn bậc đã chốt của khu quản trị; ô nào ra 0 thì
   chỗ gọi không truyền màu nên ô để trắng. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
/* CHỮ CÂN ĐỐI TRONG KHUNG (anh Ba 24/09/2026) — hai luật, dùng cho CẢ ba họ ô:
   1) justify-content:center — các ô nằm trong lưới nên bị kéo cao bằng ô cao nhất cùng hàng.
      Trước đây chữ neo ở mép trên, ô nào nội dung ngắn thì chừa 17px trống dưới đáy mà chỉ
      8px trên đỉnh. Canh giữa thì trên và dưới bằng nhau, và vì các ô cùng hàng có cùng
      chiều cao nên hàng nhãn VẪN thẳng nhau.
   2) Dòng cuối là con số thì kéo lên 3px (xem rule .oso-v.so:last-child bên dưới): chữ số
      không có nét thòng (g, y, p) nên trình duyệt để thừa ~4px trắng dưới chân số — đo bằng
      thước thì cân, nhìn bằng mắt thì chữ vẫn như dính lên trên.
   3) text-align:center (anh Ba 24/09/2026: "các khối phải căn center nội dung bên trong").
      Căn bằng text-align chứ KHÔNG bằng align-items:center — ba dòng con vẫn rộng bằng ô nên
      .oso-p giữ được text-overflow:ellipsis, và bề ngang ô không đổi một pixel nào (chín ô lọc
      màn Thẻ tập vẫn một hàng). Vạch màu mép trái giữ nguyên, đó là tín hiệu trạng thái.
      text-wrap:balance để nhãn hai dòng ("SINH NHẬT THÁNG NÀY") chia đều hai dòng, không so le. */
.oso{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:8px 12px;background:#fff;position:static;
  text-align:center;
  border:1px solid var(--ln);border-left:3px solid var(--pale);border-radius:6px}
.oso-n{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx2);line-height:1.3;min-width:0;text-wrap:balance}
.oso-v{font-size:15px;font-weight:600;color:var(--navy);line-height:1.3;letter-spacing:-.01em;min-width:0}
/* giá trị thuần số / tiền thì để chữ máy, so hàng dọc mới thẳng; câu chữ thì để chữ thường */
.oso-v.so{font-family:"IBM Plex Mono",monospace;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.oso-p{font-size:10.5px;color:#93A9B8;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* bù khoảng trắng dưới chân chữ số (xem luật 2 ở khối .oso) */
.oso > .oso-v.so:last-child{margin-bottom:-3px}
.oso.canh{border-left-color:var(--hot);background:#FFFCF4}
.oso.canh .oso-n{color:#8A6413}
.oso.canh .oso-v{color:#7A5C14}
.oso.gap{border-left-color:#C0392B;background:#FEF6F4}
.oso.gap .oso-n,.oso.gap .oso-v{color:#9B3324}
.oso.ok{border-left-color:#2F9E6B}
.oso.ok .oso-v{color:#1E7A4D}
.oso.tien{border-left-color:var(--gold)}
.oso.tien .oso-v{color:#8A6B2E}
.oso.nhat{border-left-color:#C3CEDA}
.oso.nhat .oso-v{color:var(--tx2)}
/* Ô bấm được (hàng ô lọc): một hàng, nhãn không xuống dòng, có trạng thái đang chọn */
.oso-nut{flex:none;min-width:112px;text-decoration:none;transition:border-color .12s,background-color .12s}
.oso-nut .oso-n{white-space:nowrap}
.oso-nut:hover{border-color:var(--pale);background:var(--bg);text-decoration:none}
.oso-nut.on{border-color:transparent;border-left-color:transparent;background:var(--g-btn)}
.oso-nut.on .oso-n,.oso-nut.on .oso-v{color:#fff}
@media(max-width:520px){.tiles{grid-template-columns:1fr 1fr;gap:7px}}

.btn.sm{padding:6px 12px;font-size:12.5px;border-radius:5px}
.tbl tr.hi{background:#FFFDF7}
.badge.paid{background:#E8F6ED;color:#1E5E3A}
.badge.free{background:var(--bg);color:var(--deep)}
.badge.cls{background:#F3EEFB;color:#5B3E8E}
.pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:5px;
  white-space:nowrap;display:inline-block;line-height:1.5}
.pill.pending{background:var(--bg);color:var(--deep)}
.pill.claimed{background:#FDF6E4;color:#7A5C14}
.pill.activated{background:#E8F6ED;color:#1E5E3A}
.pill.rejected{background:#FDECEA;color:#8E2A1E}

.prof-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;
  margin-bottom:22px;border-bottom:1px solid var(--ln)}
.prof-av{width:54px;height:54px;border-radius:50%;background:var(--g-btn);color:#fff;
  display:grid;place-items:center;font-size:22px;font-weight:700;flex-shrink:0}
.prof-name{font-size:17px;font-weight:600;color:var(--navy)}

/* warn */
.warn{background:#FDF6E4;border-left:3px solid var(--gold);color:#7A5C14;padding:13px 16px;border-radius:0 5px 5px 0;font-size:13.5px;line-height:1.5}
.warn b{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;margin-bottom:4px}
.info{background:var(--bg);border-left:3px solid var(--deep);padding:13px 16px;border-radius:0 5px 5px 0;font-size:13.5px;color:var(--text)}
.err{background:#FDECEA;border-left:3px solid #C0392B;padding:12px 15px;border-radius:0 5px 5px 0;font-size:13.5px;color:#8E2A1E}
.ok{background:#E8F6ED;border-left:3px solid #2E8B57;padding:12px 15px;border-radius:0 5px 5px 0;font-size:13.5px;color:#1E5E3A}

/* forms */
form.f{display:flex;flex-direction:column;gap:14px;max-width:440px}
form.f.wide{max-width:100%}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:var(--text);
  min-width:0}
input,select,textarea{font-family:inherit;font-size:15px;padding:10px 12px;
  border:1px solid var(--ln);border-radius:5px;background:#fff;color:#12283A;
  width:100%;min-width:0;max-width:100%;box-sizing:border-box}
/* Safari trên iPhone cho ô ngày tháng một bề rộng tự nhiên rất lớn,
   không ép thì nó đẩy tràn cả lưới hai cột. */
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-height:41px}
/* Ô chọn (select) cao bằng ô nhập, mũi tên vẽ tay để mọi trình duyệt giống nhau */
select{min-height:41px;-webkit-appearance:none;appearance:none;padding-right:36px;background-color:#fff;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A6A82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;line-height:1.3}
select.sm{min-height:0}
input:focus,select:focus,textarea:focus{border-color:var(--deep)}
textarea{min-height:70px;resize:vertical}
.hint{font-size:12px;color:var(--tx2);font-weight:400}
/* ô tích đồng ý — hộp giữ nguyên kích thước, chữ xuống dòng quanh nó */
.tick{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:13.5px;line-height:1.55;color:var(--tx2);font-weight:400;cursor:pointer}
.tick input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;flex:none;
  accent-color:var(--deep);cursor:pointer}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.two > *{min-width:0}

/* khối biểu mẫu quản trị */
.panel{border:1px solid var(--ln);border-radius:7px;background:#fff;padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:14px}
.panel > h4{margin:0;font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.01em;
  padding-bottom:11px;border-bottom:1px solid var(--ln)}
.panel > h4 span{display:block;font-size:12px;font-weight:400;color:var(--tx2);margin-top:3px;letter-spacing:0}

/* Viền màu bên trái phân nhóm các bảng cấu hình: nhìn lướt là biết đang ở
   nhóm nào mà chưa cần đọc tiêu đề. Sáu nhóm dùng chung cho mọi trang sửa. */
.panel[class*="pc-"]{border-left-width:3px;border-left-color:var(--pc);padding-left:18px}
.panel[class*="pc-"] > h4::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:2px;background:var(--pc);margin-right:8px;vertical-align:1px}
.pc-nhan{--pc:#6C4FB6}      /* nhận diện: tên, màu, biểu tượng */
.pc-lienhe{--pc:#0F7A8A}    /* liên hệ, mạng xã hội */
.pc-tien{--pc:#1B6B44}      /* học phí, tài khoản nhận tiền */
.pc-noidung{--pc:#B07D12}   /* chữ nghĩa khách đọc */
.pc-lich{--pc:#B4552F}      /* lịch học, địa điểm, thời hạn và quyền lợi của thẻ */
.pc-seo{--pc:#1F5C93}       /* Google, đường dẫn */
.pc-hienthi{--pc:#5B6B7C}   /* bật tắt, thứ tự, ảnh bìa */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
/* Đúng hai cột: dùng khi nhóm có 4 ô, để không bao giờ rơi thành 3 + 1 ô lẻ */
.pgrid.p2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Một ô ngắn đứng riêng (số ngày, số thứ tự): giữ bề ngang vừa phải
   thay vì kéo dài hết bảng cho trống trải. */
.pgrid.ongan{grid-template-columns:minmax(0,300px)}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){.pgrid.p2{grid-template-columns:1fr}}
.fhint{font-size:11.5px;color:var(--tx2);font-weight:400;line-height:1.45}
.abar{display:flex;align-items:center;justify-content:flex-end;gap:12px;
  padding:14px 0 2px;border-top:1px solid var(--ln);margin-top:4px;flex-wrap:wrap}
.abar .hint{margin-right:auto}
/* Nút phá huỷ đứng hẳn bên trái, nút chính bên phải — tay không trượt nhầm.
   Có nút nguy hiểm thì dòng gợi ý thôi đẩy, để khoảng trống nằm giữa hai nút. */
.abar .btn.nguy{margin-right:auto}
.abar .btn.nguy ~ .hint{margin-right:0}

/* Nhãn kèm bộ đếm ký tự ở góc phải */
.lbr{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* dấu * đỏ: ô bắt buộc */
.bb{color:#C0392B;font-style:normal;font-weight:700;margin-left:3px}
.batbuoc{margin:-4px 0 2px;font-size:12.5px}
.dem{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  color:var(--tx2);flex-shrink:0;letter-spacing:.01em}
.dem.gan{color:#9A7318}
.dem.het{color:#8E2A1E;font-weight:700}

/* Ô chọn mang màu của lựa chọn: nhìn lướt là biết đang bật hay tắt.
   Chấm tròn bên trái vẽ bằng ảnh nền, xếp cùng lớp với mũi tên. */
select.smau{font-weight:600;padding-left:30px;background-repeat:no-repeat,no-repeat;
  background-position:right 12px center,left 11px center}
select.mau-xanh{color:#1E5E3A;background-color:#E8F6ED;border-color:#A8D8BC;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231E5E3A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='4' fill='%232F9E6B'/></svg>")}
select.mau-xam{color:#6B7F90;background-color:#F1F5F9;border-color:var(--ln);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7F90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='4' fill='%23A3B4C2'/></svg>")}
select.mau-vang{color:#7A5C14;background-color:#FDF6E4;border-color:#E8D3A0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A5C14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><circle cx='5' cy='5' r='4' fill='%23D1A62A'/></svg>")}
select.smau:disabled{background-color:#F1F5F9;color:#6B7F90;border-color:var(--ln)}

/* Nút phá huỷ: viền đỏ, chỉ đầy màu khi rê chuột vào */
.btn.nguy{background:#fff;border:1px solid #E6B7AE;color:#8E2A1E;font-weight:600}
.btn.nguy:hover{background:#FDECEA;border-color:#C96A5B;filter:none}

/* Dòng nhắc nền vàng nhạt gắn ngay dưới ô nhập */
.nhacvang{display:block;font-size:11.5px;font-weight:500;line-height:1.5;
  background:#FDF6E4;color:#7A5C14;border:1px solid #EFE0B6;border-radius:5px;
  padding:6px 9px;margin-top:2px}
.nhacvang[hidden]{display:none}
.nhacvang a{color:#6A4F0F;text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.panel{padding:15px 15px 17px}.two{grid-template-columns:1fr}}

/* ── tra cứu danh sách dài ── */
.thanhtim{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.otim{display:flex;gap:8px;align-items:center;flex:1;min-width:240px}
.otim input[type=search]{flex:1;min-width:0}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
.osap{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:11px;
  font-size:12.5px;color:var(--tx2)}
.osap > span{font-weight:600;margin-right:4px}
.osap a{padding:5px 10px;border-radius:100px;border:1px solid var(--ln);
  color:var(--tx2);font-weight:500;background:#fff}
.osap a:hover{border-color:var(--deep);color:var(--deep);text-decoration:none}
.osap a.on{background:var(--kbg);border-color:var(--pale);color:var(--deep);font-weight:600}

.ptrang{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--tx2)}
.pt-n{font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.pt-s{display:flex;gap:4px}
.pt-s a,.pt-s .no{min-width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--ln);border-radius:6px;background:#fff;font-size:13px;
  color:var(--tx2);font-weight:500;padding:0 7px}
.pt-s a:hover{border-color:var(--deep);color:var(--deep);text-decoration:none}
.pt-s a.on{background:var(--g-btn);border-color:transparent;color:#fff;font-weight:600}
.pt-s .no{opacity:.35}
/* Bản công khai: căn giữa, nút to hơn cho ngón tay bấm trên điện thoại.
   Bảng quản trị vẫn giữ nút nhỏ vì thao tác bằng chuột. */
.ptrang.ck{justify-content:center;flex-direction:column;gap:14px;
  margin:34px 0 6px;padding-top:24px;border-top:1px solid var(--ln)}
.ptrang.ck .pt-n{order:2;font-size:12px;opacity:.75}
.ptrang.ck .pt-s{order:1;gap:6px}
.ptrang.ck .pt-s a,.ptrang.ck .pt-s .no{min-width:42px;height:42px;font-size:14px;border-radius:8px}
@media (max-width:520px){
  /* Màn hẹp: bỏ các số ở giữa, chỉ chừa lùi – trang hiện tại – tiến */
  .ptrang.ck .pt-s a:not(.on):not(:first-child):not(:last-child),
  .ptrang.ck .pt-s .no:not(:first-child):not(:last-child){display:none}
}

/* ô thao tác trong hồ sơ học viên */
.thaotac{display:flex;flex-direction:column;gap:9px;padding:13px 14px;
  border:1px solid var(--ln);border-radius:6px;background:#FAFCFE}
.thaotac button{align-self:flex-start}
.mkmoi{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:600;
  background:#fff;border:1px solid var(--gold2);border-radius:5px;padding:3px 9px;
  color:var(--navy);letter-spacing:.04em}

/* ── hồ sơ học viên: gom thao tác vào đúng chỗ nó thuộc về ── */
.mucdau{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:10px}
.mucdau h3{margin:0}
.mokhoa{display:flex;gap:7px;align-items:center}
.mokhoa select{width:auto;min-width:190px;max-width:260px}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */

/* nút trông như liên kết, dùng cho thao tác phụ nằm trong dòng */
.lienket{background:none;border:none;padding:0;font-family:inherit;font-size:12.5px;
  color:var(--tx2);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.lienket:hover{color:#B4453C}

/* (Cột hồ sơ dán bên phải đã bỏ 24/09/2026 — form sửa giờ nằm trong tab "Sửa hồ sơ") */
.hoso-f{display:flex;flex-direction:column;gap:9px;padding:12px 13px;
  border:1px solid var(--ln);border-radius:6px;background:#FAFCFE}
.hoso-f button{align-self:flex-start}
/* ô không sửa được: mờ đi, con trỏ báo cấm — nhìn là biết không phải chỗ gõ */
input:disabled,select:disabled,textarea:disabled{background:#F1F5F9;color:#6B7F90;border-color:var(--ln);
  cursor:not-allowed;-webkit-text-fill-color:#6B7F90;opacity:1}
.hoso-f .two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.hoso-f label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tx2)}
.hoso-f .fhint{font-size:11.5px;color:var(--tx2)}
.nhan-chon{display:flex;flex-wrap:wrap;gap:6px 12px;margin:2px 0 6px}
.tick.nho{font-size:13px;color:var(--navy);flex-direction:row;align-items:center;gap:6px}
.hv-ma{font-size:11px;font-weight:500;color:#93A9B8;letter-spacing:.02em}
.hv-phu{font-size:11.5px;color:var(--tx2);margin-top:2px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.badge.het{background:#FDECEA;color:#8E2A1E}
.badge.trondoi{background:#E8F6ED;color:#1E5E3A}   /* quyền học trọn đời */
.rv-moi{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.buybox.dahoc .bb-top{background:linear-gradient(135deg,#E8F6ED,#F3FAF5)}
.buybox.dahoc .bb-new{color:#1E5E3A;font-size:22px}
.rv-moi .btn{align-self:flex-start}
.badge.con{background:#E8F6ED;color:#1E5E3A}       /* còn hạn */
.tbl td .badge{white-space:nowrap}
.badge.han{background:#FDF6E4;color:#7A5C14}       /* quyền học có hạn: 30 ngày / đến dd/mm */
.ccard .badge{align-self:center}
.badge.nhan{background:#EEF7FC;color:var(--deep);font-weight:600}
/* hạn học: màu theo tình trạng */
.han{font-size:12.5px;font-weight:600}
.h-trondoi{color:var(--tx2);font-weight:500}
.h-con{color:#1E5E3A}
.h-sap{color:#7A5C14}
.h-het,.h-khoa{color:#8E2A1E}
.lienket.nguy{color:#8E2A1E}
.nky{list-style:none;margin:0;padding:0;border:1px solid var(--ln);border-radius:8px;background:#fff}
.nky li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px 13px;border-bottom:1px solid var(--ln);font-size:13px}
.nky li:last-child{border-bottom:none}
.nky-ngay{color:var(--tx2);font-size:12px;padding-top:1px}
.nky-nd i{color:var(--tx2);font-style:normal}
/* Nhật ký dạng dòng thời gian: chấm tròn nối bằng vạch dọc; 5 dòng đầu mở sẵn, còn lại gập */
.nky-box{border:1px solid var(--ln);border-radius:8px;background:#fff;overflow:hidden}
.nky-box .nky{border:none;border-radius:0}
.nky-box .nky li{grid-template-columns:14px 124px minmax(0,1fr);gap:8px;padding:8px 14px 8px 12px;position:relative;line-height:1.45}
.nky-box .nky li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pale);border:2px solid #fff;
  box-shadow:0 0 0 1px var(--pale);margin-top:5px}
.nky-box .nky li::after{content:"";position:absolute;left:17px;top:22px;bottom:-4px;width:1px;background:var(--ln)}
.nky-box .nky li:last-child::after{display:none}
.nky-box > .nky > li:first-child::before{background:var(--deep);box-shadow:0 0 0 1px var(--deep)}   /* chỉ dòng mới nhất tô đậm */
.nky-them summary{cursor:pointer;list-style:none;padding:8px 14px 8px 34px;font-size:12.5px;font-weight:600;color:var(--deep);
  border-top:1px solid var(--ln);background:#FAFCFE;user-select:none}
.nky-them summary::-webkit-details-marker{display:none}
.nky-them summary::before{content:"+ "}
.nky-them[open] summary::before{content:"− "}
.nky-them[open] summary{border-bottom:1px solid var(--ln)}
@media(max-width:640px){.hoso-f .two{grid-template-columns:1fr}.nky li{grid-template-columns:1fr;gap:2px}}

/* ── Bảng điều khiển học viên (/trangquanly/hoc-vien/:id) ──
   Thẻ danh tính: avatar chữ cái | tên + liên hệ + nhãn | cụm nút. Ghi chú riêng và
   mật khẩu mới (nếu có) nằm hàng dưới, trải hết bề ngang thẻ. */
.hvdash{display:flex;flex-direction:column;gap:16px}
.hvdash > .slabel{margin-bottom:-6px}
.hvdash > .ok,.hvdash > .err{margin:0}
.hv-id{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:2px 14px;align-items:start;
  border:1px solid var(--ln);border-radius:8px;background:#fff;padding:10px 16px}
/* Vạch màu bên trái thẻ nhận diện = trạng thái tổng của học viên (24/09/2026).
   Đúng bốn bậc của khu quản trị, không đẻ nghĩa màu mới:
   đỏ ngói = đang mất / quá hạn · hổ phách = việc mấy ngày tới · chàm = đã hẹn hoặc mới
   · xanh "còn hạn" (màu sẵn có của pill) = đang tập đều · xám = không còn quyền học. */
.hv-id{border-left-width:4px;border-left-style:solid;border-left-color:var(--ln)}
.hv-id.tt-gap,.hv-id.tt-khoa{border-left-color:#C0392B}
.hv-id.tt-canh{border-left-color:#D8830F}
.hv-id.tt-hen,.hv-id.tt-moi{border-left-color:var(--deep)}
.hv-id.tt-deu{border-left-color:#2F9E6B}
.hv-id.tt-nghi{border-left-color:#9FB0C2}
.hv-tt-dau{display:inline-block;position:static;vertical-align:middle;margin-left:6px;font-size:11px;font-weight:700;
  letter-spacing:.03em;padding:3px 9px;border-radius:5px;white-space:nowrap;
  background:var(--bg);color:var(--tx2);border:1px solid var(--ln)}
.hv-tt-dau.gap,.hv-tt-dau.khoa{background:#FDECEA;color:#9B3324;border-color:#F0C4BA}
.hv-tt-dau.canh{background:#FFF6E3;color:#8A6413;border-color:#EFDCAC}
.hv-tt-dau.hen,.hv-tt-dau.moi{background:var(--kbg);color:var(--deep);border-color:var(--pale)}
.hv-tt-dau.deu{background:#E8F6ED;color:#1E5E3A;border-color:#BFE3CE}
.hv-av{width:44px;height:44px;border-radius:50%;background:var(--g-btn);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;letter-spacing:.02em;grid-row:1}
.hv-tt{display:flex;flex-direction:column;gap:3px;min-width:0;grid-row:1}
.hv-tt h2.st{margin:0;font-size:19px;line-height:1.25}
.hv-tt h2.st .badge{vertical-align:middle;margin-left:4px}
/* MÃ SỐ TẬP dẫn đầu dòng tên: chữ máy, to hơn tên một nấc, màu theo tình trạng — nhìn lướt
   là bắt được số và mức độ gấp cùng lúc, không phải đọc chữ. Tên lùi xuống một nấc để số nổi. */
.hv-sotap{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:700;letter-spacing:-.02em;
  color:var(--tx2);margin-right:9px}
/* Màu lấy theo lớp tình trạng của CẢ THẺ, không gắn lớp trần (gap/canh/deu…) lên thẻ span:
   'canh' trùng tên với lớp cột dính của trang công khai (.canh ở trên), gắn vào là thẻ span
   hoá display:flex + position:sticky, mã số rơi xuống dòng riêng. */
.hv-id.tt-gap .hv-sotap,.hv-id.tt-khoa .hv-sotap{color:#B03325}
.hv-id.tt-canh .hv-sotap{color:#C2760C}
.hv-id.tt-hen .hv-sotap,.hv-id.tt-moi .hv-sotap{color:var(--deep)}
.hv-id.tt-deu .hv-sotap{color:#1E7A4D}
.hv-id.tt-nghi .hv-sotap{color:#8296A9}
.hv-ten{font-size:19px;font-weight:700;color:var(--navy)}
/* Ô chữ cái cũng đổi màu theo tình trạng, cùng bảng màu với vạch viền trái và với mã số */
.hv-id.tt-gap .hv-av,.hv-id.tt-khoa .hv-av{background:#C0392B}
.hv-id.tt-canh .hv-av{background:#D8830F}
.hv-id.tt-deu .hv-av{background:#2F9E6B}
.hv-id.tt-nghi .hv-av{background:#9FB0C2}
.hv-lh{display:flex;flex-wrap:wrap;gap:2px 7px;align-items:baseline;font-size:13px;color:var(--navy);line-height:1.4}
.hv-lh a{color:var(--deep)}
.hv-lh .mono{font-weight:500;letter-spacing:.01em}
.hv-lh .sep,.hv-meta .sep{font-style:normal;color:#9CB0C0}   /* dấu chấm ngăn cách, xuống dòng theo mục */
.trong{color:#93A9B8}
/* Dòng phụ duy nhất dưới tên: mã · nhãn · nguồn · tham gia · đăng nhập cuối (24/09/2026).
   Gộp từ ba dòng cũ (.hv-chips, .hv-meta và mã đứng cạnh tên) — cùng nói chuyện lý lịch,
   không việc gì phải ăn ba dòng của màn hình. */
.hv-meta{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;font-size:11.5px;color:var(--tx2);line-height:1.45}
.hv-nhan{display:inline-flex;flex-wrap:wrap;gap:3px 4px;align-items:center}
.hv-meta .badge.nhan{font-size:10.5px;padding:1px 7px;line-height:1.5}
.hv-nut{grid-row:1;display:flex;align-items:center;gap:7px;flex:none}
/* viền trong suốt cho nút đặc: cao bằng đúng nút viền đứng cạnh */
.hv-nut .btn{white-space:nowrap;padding:6px 13px;line-height:1.25;font-size:12.5px;border:1px solid transparent}
/* menu ⋯ ở đầu trang: việc hiếm (đặt lại mật khẩu) nằm trong đây, không đứng ngang Gọi/Zalo */
.hv-menu.hv-menu-id summary{width:30px;height:30px;font-size:16px}
.hv-menu-id .hv-pop{min-width:200px}
.hv-menu-id .hv-pop .mi{text-decoration:none}
.hv-note{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin-top:6px;
  background:#FFF8E6;border:1px solid var(--gold2);border-radius:6px;padding:9px 13px;font-size:13.5px;line-height:1.5;color:#5A4712}
.hv-note b{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8A6A22;padding-top:4px}
/* Lưu ý gập một dòng: ghi chú hay dài 3-4 dòng, để nguyên là đẩy thanh tab khỏi màn hình.
   details/summary nên bấm vào là xoè, không cần JS. Chữ cắt đuôi, title giữ nguyên văn. */
details.hv-note.hv-luuy{display:block;grid-column:1 / -1;margin-top:0;padding:0;background:#FFF8E6;
  border:1px solid var(--gold2);border-radius:6px;color:#5A4712}
details.hv-luuy > summary{display:flex;align-items:baseline;gap:9px;padding:5px 12px;cursor:pointer;
  list-style:none;font-size:12.5px;line-height:1.45}
details.hv-luuy > summary::-webkit-details-marker{display:none}
details.hv-luuy > summary::marker{content:""}
details.hv-luuy > summary:hover{background:#FFF3D6;border-radius:5px}
details.hv-luuy > summary > b{flex:none;padding-top:0}
details.hv-luuy > summary > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.hv-luuy > summary > .hv-note-mo{flex:none;font-style:normal;font-size:11px;color:#8A6A22;transition:transform .15s}
details.hv-luuy[open] > summary > span{white-space:pre-line;overflow:visible;text-overflow:clip}
details.hv-luuy[open] > summary > .hv-note-mo{transform:rotate(180deg)}
/* Dải nhắc trên hồ sơ của chính tài khoản quản trị — tím thay vì vàng, để không lẫn với Lưu ý */
.hv-note.qt{background:#F6F2FC;border-color:#DCCFF0;color:#46335F}
.hv-note.qt b{color:#6A4FA3}
.hv-note.qt a{color:inherit;text-decoration:underline}
/* Ô khoá cứng trong hồ sơ tài khoản quản trị: số chính, email — đổi ở Tài khoản của tôi */
.hoso-f input[readonly]{background:var(--bg);color:var(--tx2);cursor:not-allowed}
.hv-note span{white-space:pre-line}
.hv-mk{grid-column:1 / -1;margin-top:6px}
/* Dải LỜI MỜI trên hồ sơ học viên — một dòng, hai nút, nội dung gập lại.
   Bám trên hồ sơ tới khi học viên đăng nhập được hoặc giáo viên bấm Ẩn. */
.lmoi{grid-column:1 / -1;margin-top:8px;background:#FFF8E6;border:1px solid var(--gold2);
  border-radius:7px;padding:9px 13px}
.lmoi-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lmoi-t{flex:1 1 200px;min-width:0;font-size:13.5px;line-height:1.4;color:#5A4712}
.lmoi-t b{display:inline;font-size:13.5px}
.lmoi-t i{font-style:normal;color:#8A6A22}
.lmoi-t i::before{content:" — "}
.lmoi-h .btn{flex:none}
.lmoi-xem{margin-top:8px}
.lmoi-xem summary{cursor:pointer;font-size:12.5px;color:#8A6A22;width:fit-content}
.lmoi-xem summary:hover{color:#5A4712}
.lmoi-o{width:100%;box-sizing:border-box;margin-top:7px;font-family:"IBM Plex Sans",sans-serif;
  font-size:13px;line-height:1.55;padding:10px 12px;border:1px solid var(--gold2);border-radius:6px;
  background:#fff;color:var(--navy);resize:vertical}
.lmoi-o:focus{outline:2px solid var(--gold2);outline-offset:1px}
.lmoi .fhint{display:block;margin-top:5px}
.btn.xong{background:#1E5E3A;border-color:#1E5E3A}
/* ── Dải tình trạng (thay bốn ô số liệu cũ) ──
   Bốn ô kia học viên mới thì đều là 0 và "—", chiếm một hàng to mà không nói gì. Dải này
   trả lời đúng bốn câu hỏi trước khi gọi: thẻ còn mấy ngày · học video tới đâu · lần tập
   gần nhất · đã trả bao nhiêu. Ô nào không có dữ liệu thì không hiện, ô nào cần để ý mới tô. */
.hv-tom{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:7px;
  margin-top:6px;padding-top:6px;border-top:1px solid var(--ln)}
/* các ô trong dải là .oso DÙNG CHUNG toàn khu quản trị — chỉ hạ trong phạm vi .hv-tom,
   không đụng .oso gốc, kẻo lệch mọi màn khác (52px -> 42px, 24/09/2026) */
.hv-tom .oso{padding:5px 10px;gap:0}
.hv-tom .oso-n{font-size:10px;line-height:1.25}
.hv-tom .oso-v{font-size:13px;line-height:1.35}
.hv-tom .oso-v.so{font-size:14px;line-height:1.35}
/* Thân hồ sơ một cột: form sửa đã thành một tab nên nội dung được cả bề ngang */
.hv-than{display:block}
.hv-trai{gap:20px}
/* bảng đơn / lớp trong cột này hẹp hơn trang danh sách: bỏ bề rộng tối thiểu cột đầu, thu nhãn trạng thái */
.hv-trai .tbl td:first-child,.hv-trai .tbl th:first-child{min-width:0}
.hv-trai .tbl .pill{min-width:112px}
.hv-trai .tbl td{padding:9px 12px}
.hv-trai .tbl th{padding:9px 12px}
.hv-so{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--tx2);background:var(--bg);
  border-radius:10px;padding:1px 8px;margin-left:4px;vertical-align:middle}
.hv-h3{margin-bottom:10px}
.hv-trong{border:1px dashed var(--ln);border-radius:8px;padding:12px 15px;font-size:13px;color:var(--tx2);background:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* bảng khoá: mỗi khoá một hàng ~60px, menu ⋯ ở cuối hàng — không cuộn ngang để menu không bị cắt */
.khtbl{overflow:visible}
.khtbl table{min-width:0}
.khtbl td{padding:9px 11px;height:58px}   /* mọi hàng cao bằng nhau dù tên khoá một hay hai dòng */
.khtbl th{padding:9px 11px}
.khtbl td:first-child,.khtbl th:first-child{min-width:180px}
.khtbl td.kh-ten{font-size:13.5px;line-height:1.4}
.khtbl td.kh-ten .badge{margin-left:4px;vertical-align:1px}
.khtbl td.nho,.tbl td.nho{font-size:12.5px;color:var(--tx2);white-space:nowrap}
.khtbl td.nowrap{white-space:nowrap;line-height:1.35}
.khtbl .tdo{width:56px}
.khtbl .kh-phu{display:block;font-size:11.5px;color:var(--tx2);margin-top:2px}
.khtbl tr.qh-het td,.khtbl tr.qh-khoa td{opacity:.62}
.khtbl tr.qh-het td.act,.khtbl tr.qh-khoa td.act{opacity:1}
.khtbl tr.qh-het:hover td,.khtbl tr.qh-khoa:hover td{opacity:1}
.khtbl tr.qh-sap td:first-child{box-shadow:inset 3px 0 0 var(--hot)}
.khtbl tr.qh-het td:first-child{box-shadow:inset 3px 0 0 #E6B7AE}
.khtbl td.act{position:relative;overflow:visible}
.hv-menu{position:relative;display:inline-block}
.hv-menu summary{list-style:none;cursor:pointer;width:30px;height:30px;border-radius:6px;border:1px solid var(--ln);
  display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--tx2);background:#fff;user-select:none}
.hv-menu summary::-webkit-details-marker{display:none}
.hv-menu summary:hover,.hv-menu[open] summary{border-color:var(--deep);color:var(--deep);background:var(--bg)}
.hv-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:236px;background:#fff;border:1px solid var(--ln);
  border-radius:8px;box-shadow:0 8px 24px rgba(15,58,92,.14);padding:6px;display:flex;flex-direction:column;gap:2px;text-align:left}
.tbl td.act .hv-pop form{display:block;margin:0}
/* Nút trong popup nhìn phải ra nút (anh Ba 24/09/2026): có viền, có nền, chữ chính đậm
   nói rõ bấm xong xảy ra gì; chú thích ngắn nằm dòng dưới, chữ nhạt. */
.hv-pop .mi{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--ln);border-radius:6px;padding:7px 10px;
  font-family:inherit;font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;text-decoration:none}
.hv-pop .mi b{font-weight:600;font-size:13px;line-height:1.3}
.hv-pop .mi i{font-style:normal;font-size:11.5px;line-height:1.35;color:var(--tx2);white-space:normal}
.hv-pop .mi:hover{background:var(--kbg);border-color:var(--deep);color:var(--deep);text-decoration:none}
.hv-pop .mi:hover i{color:var(--deep)}
.hv-pop .mi.nguy{color:#8E2A1E;border-color:#E6B7AE}
.hv-pop .mi.nguy:hover{background:#FDECEA;border-color:#C96A5B;color:#8E2A1E}
.hv-pop .giahan{padding:5px 9px 7px;border-bottom:1px solid var(--ln);margin-bottom:3px;display:flex;flex-direction:column;gap:5px}
.hv-pop .gh-t{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);line-height:1.3}
/* chú thích ngắn đứng ngay cạnh nhãn, nằm chung một <span> với nhãn nên không rớt dòng riêng */
.hv-pop .gh-p{font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:11px;color:#93A9B8;margin-left:5px}
.hv-pop .gh-t2{margin-top:2px}
.hv-pop .gh-o{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--tx2)}
.hv-pop .gh-o input{width:60px;text-align:center}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
.hv-pop .gh-cuoi{margin-top:1px}
/* một dòng chỉ đường khi không có gì để thao tác — thay cho cả khung trống + nút */
.hv-pop .gh-lien{padding:2px 10px 7px;margin-bottom:3px;border-bottom:1px solid var(--ln);
  font-size:11.5px;line-height:1.45;color:var(--tx2)}
/* nhắc trong menu thẻ: học viên chưa bấm "đã chuyển khoản" nhưng vẫn kích hoạt được */
.hv-pop .gh-nhac{margin:2px 2px 5px;padding:7px 9px;border-radius:6px;background:#FDF6E4;border-left:3px solid var(--gold);
  font-size:11.5px;line-height:1.4;color:#7A5C14;white-space:normal}
/* form hồ sơ: nhóm trường có tiêu đề nhỏ */
.hoso-h{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx2);
  font-weight:600;padding-top:6px;margin-top:2px;border-top:1px solid var(--ln)}
.hoso-h:first-child{border-top:none;padding-top:0;margin-top:0}



/* ── chọn màu giao diện ── */
.maupick{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:10px}
.mau-o{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  border:1px solid var(--ln);border-radius:8px;background:#fff;overflow:hidden;
  padding-bottom:11px;transition:.13s}
.mau-o:hover{border-color:var(--light)}
.mau-o.on{border-color:var(--deep);box-shadow:0 0 0 1px var(--deep) inset}
.mau-o input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mau-dai{height:46px;display:block}
.mau-cham{display:flex;gap:5px;padding:0 12px;margin-top:-13px}
.mau-cham i{width:17px;height:17px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 3px rgba(15,58,92,.18)}
.mau-t{font-size:13.5px;font-weight:600;color:var(--navy);padding:0 12px;margin-top:3px}
.mau-ta{font-size:11.5px;color:var(--tx2);line-height:1.4;padding:0 12px}
.mau-o.on .mau-t{color:var(--deep)}

/* ── chọn biểu tượng ứng dụng ── */
.iconpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px}
.ico-o{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
  padding:12px 8px;border:1px solid var(--ln);border-radius:8px;background:#fff;
  font-size:12px;font-weight:500;color:var(--tx2);text-align:center;transition:.13s}
.ico-o:hover{border-color:var(--light)}
.ico-o.on{border-color:var(--deep);background:var(--kbg);color:var(--deep);
  box-shadow:0 0 0 1px var(--deep) inset}
.ico-o input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ico-h svg{width:52px;height:52px;display:block;border-radius:12px}
.ico-t{line-height:1.25}
.ico-tai{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.ico-tai .btn{cursor:pointer;flex-shrink:0}
.ico-hien{display:flex;align-items:center;gap:8px}
.ico-hien img{width:38px;height:38px;border-radius:9px;border:1px solid var(--ln)}
.ico-tai .fhint{flex:1;min-width:180px}

@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.hoso{position:static}}

@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .osap{display:none}
  .thanhtim .dk{display:none}
  .otim{width:100%}
}


/* phần soạn nội dung: chỉ mở trên máy tính cho dễ thao tác */
.mobnote{display:none}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .deskonly{display:none !important}
  .mobnote{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
    border:1px solid var(--ln);border-radius:7px;background:var(--kbg);padding:20px}
  .mobnote b{font-size:15px;color:var(--navy)}
  .mobnote p{margin:0;font-size:13.5px;color:var(--tx2);line-height:1.6}
  .mobnote.qt-mob{margin:28px 0}
  .anav a.dk{display:none}
}

/* quản lý chương và bài học */
.chuong{border:1px solid var(--ln);border-radius:7px;background:#fff;margin-bottom:14px;overflow:hidden}
.chuong > .ch-h{display:flex;align-items:center;gap:10px;padding:12px 15px;
  background:var(--kbg);border-bottom:1px solid var(--ln)}
.chuong > .ch-h .ch-t{font-size:14px;font-weight:700;color:var(--navy);flex:1;min-width:0}
.chuong > .ch-h .ch-n{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2)}
.bl{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid var(--ln);font-size:14px}
.bl:last-child{border-bottom:none}
.bl .b-n{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--tx2);
  width:22px;flex-shrink:0;text-align:right}
.bl .b-t{flex:1;min-width:0;color:var(--navy);font-weight:500;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* Hai cột số cùng bề rộng, canh phải: đọc dọc một mạch là thấy bài nào đang đuối */
.bl .b-tk{margin-left:0;flex:0 0 92px;text-align:right}
.bl .b-tk.mo{opacity:.45}
.bl .b-m{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--tx2);
  flex:0 0 46px;text-align:right}
.bl.trong{color:var(--tx2);font-style:italic;font-size:13px;justify-content:center;padding:14px}
.dich{display:flex;gap:3px;flex-shrink:0}
.dich button, .dich .no{width:24px;height:24px;border:1px solid var(--ln);border-radius:5px;
  background:#fff;color:var(--tx2);font-size:11px;line-height:1;cursor:pointer;padding:0;
  display:grid;place-items:center;font-family:inherit;opacity:.55;transition:opacity .12s}
/* Đổi thứ tự là việc thỉnh thoảng mới làm — để mờ cho tên bài nổi lên,
   rê chuột vào mới đậm. */
.dich button:hover{border-color:var(--deep);background:var(--kbg);color:var(--deep);opacity:1}
.dich .no{opacity:.32;cursor:default}
.themform{display:flex;gap:12px;align-items:flex-end;padding:12px 15px;background:#FAFCFE;
  border-top:1px solid var(--ln);flex-wrap:wrap}
.themform label{flex:1;min-width:150px}
/* bộ đếm lùi vào một chút cho khỏi dính nhãn của ô bên cạnh */
.themform .lbr .dem{font-size:10px;padding-right:3px}
.themform .w{flex:0 0 96px;min-width:96px}
.themform .w2{flex:0 0 168px;min-width:168px}
@media(max-width:640px){.themform{flex-direction:column;align-items:stretch}
  .themform label,.themform .w,.themform .w2{flex:1 1 auto;min-width:0}}

/* ô chọn ảnh bìa */
.anhbox{display:flex;flex-direction:column;gap:5px}
.ab-lb{font-size:13px;font-weight:600;color:var(--text)}
.ab-in{display:flex;gap:14px;align-items:flex-start}
/* Khung xem trước để ĐÚNG tỉ lệ nơi ảnh sẽ hiện, để giáo viên thấy ngay
   phần nào của ảnh bị cắt mất. */
.ab-xem{flex:0 0 176px;aspect-ratio:16/9;border:1px solid var(--ln);border-radius:6px;
  background:var(--g-soft);overflow:hidden;display:grid;place-items:center}
.ab-xem.doc{flex:0 0 132px;aspect-ratio:4/5}
.ab-lb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ab-ti{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  background:var(--bg);color:var(--deep);border:1px solid var(--pale);
  border-radius:100px;padding:2px 8px}
.ab-xem img{width:100%;height:100%;object-fit:cover;display:block}
.ab-trong{font-size:12px;color:var(--tx2);text-align:center;line-height:1.5}
.ab-trong small{font-size:10.5px;opacity:.75}
.ab-dk{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ab-nut{display:flex;gap:8px;flex-wrap:wrap}
.ab-nut .btn{cursor:pointer}
@media(max-width:640px){.ab-in{flex-direction:column}.ab-xem{flex:0 0 auto;width:100%}}

/* hộp xác nhận (thay confirm) */
.hxn-nen{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.hxn-nen[hidden]{display:none}
body.hxn-mo{overflow:hidden}
.hxn-hop{background:#fff;border-radius:14px;width:min(440px,100%);padding:26px 26px 22px;
  box-shadow:0 24px 60px rgba(15,23,42,.28);animation:hxn-len .16s ease-out}
@keyframes hxn-len{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.hxn-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin-bottom:14px;position:relative}
.hxn-ic::before{content:"?";font-size:22px;font-weight:700;color:var(--deep)}
.hxn-hop.nguy .hxn-ic{background:#FEF3F2}
.hxn-hop.nguy .hxn-ic::before{content:"!";color:#B42318}
.hxn-hop h3{margin:0 0 6px;font-size:17px;line-height:1.35;color:var(--navy);letter-spacing:-.01em}
.hxn-p{margin:0;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.hxn-nut{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.hxn-nut .btn{min-width:96px}
.hxn-ok.nguy{background:#B42318;color:#fff}
.hxn-ok.nguy:hover{background:#9A1F14}
.hxn-ok:focus-visible{outline:2px solid var(--deep);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hxn-hop{animation:none}}

/* ── BẢNG TÍNH dùng chung: .khtbl.thet (Thẻ tập) và .khtbl.hvtbl (Học viên) ──
   (Thẻ tập 24/09/2026, Học viên 25/09/2026 — anh Ba: "chỉnh cái danh sách thành dạng
   google sheets, cột đầu là Mã số tập")
   Kẻ ô cả dọc lẫn ngang, hàng so le, hàng tiêu đề dính theo cuộn TRANG, số căn phải chữ máy.
   TIÊU ĐỀ DÍNH LÀM BẰNG position:sticky TRÊN TỪNG <th>, KHÔNG bọc bảng vào khung overflow:auto —
   menu ⋯ của mỗi hàng là <details> nổi ra ngoài bảng, có khung cuộn là bị cắt cụt ngay. */
.giahan{display:inline-flex;align-items:center;gap:6px}
.giahan input[type=date],.giahan select{width:auto;min-width:0}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
.giahan .o-so{width:52px}
.tbl tr.mo td{opacity:.62}
.tbl tr.mo td.act{opacity:1}
.tbl tr.mo:hover td{opacity:1}
.thet-bar{margin-top:-4px;margin-bottom:14px}
.khtbl.thet td:first-child,.khtbl.thet th:first-child,
.khtbl.hvtbl td:first-child,.khtbl.hvtbl th:first-child{min-width:0}
.khtbl.thet td,.khtbl.hvtbl td{padding:7px 10px;height:54px}
/* ── MỌI HÀNG CAO ĐÚNG BẰNG NHAU ──
   Luật của bảng tính: ô nào cũng đúng HAI DÒNG — dòng trên 20px, cách 3px, dòng dưới 17px,
   cộng 40px nội dung + 14px đệm + 1px kẻ = 55px. Ô nào có nhiều chữ hơn thì CẮT, tuyệt đối
   không cho đẩy hàng cao lên: chỉ cần một học viên tên dài hay đeo bốn cái nhãn là cả bảng
   cao thấp so le, mắt hết dóng được theo hàng ngang. Chữ bị cắt còn nguyên trong chú thích. */
.khtbl.hvtbl td{height:55px}
.hvtbl .hv-d1{height:20px;line-height:20px;overflow:hidden}
.hvtbl .hv-phu{height:17px;margin-top:3px;flex-wrap:nowrap;overflow:hidden}
/* Số gọi co lại và cắt bằng … khi hàng chật; nhóm dấu bên phải giữ nguyên vẹn (flex:none)
   vì dấu bị xén ngang thân trông như lỗi hiển thị, còn số gọi cắt bằng … thì đọc ra là rút gọn. */
/* Tên riêng .hv-sdt, KHÔNG dùng .hv-lh: tên đó đã có ở khối liên hệ trong hồ sơ học viên
   (display:flex;flex-wrap:wrap;font-size:13px) — trùng tên là ăn nguyên bộ nếp của khối kia. */
.hvtbl .hv-sdt{flex:0 1 auto;min-width:98px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hvtbl .hv-sdt .hv-sep{margin:0 3px}
.hvtbl .hv-phu .badge{line-height:1.3}
.hvtbl .hv-phai{overflow:hidden}
.hvtbl .hv-cham-n{margin-top:0;max-height:37px}
.khtbl.thet th,.khtbl.hvtbl th{padding:8px 10px}
.khtbl.thet .pill,.khtbl.hvtbl .pill{min-width:0;white-space:nowrap;padding:3px 10px}
/* Kẻ ô dọc: ô cuối (menu ⋯) không kẻ để vạch không dính vào mép bảng */
.khtbl.thet td:not(:last-child),.khtbl.thet th:not(:last-child),
.khtbl.hvtbl td:not(:last-child),.khtbl.hvtbl th:not(:last-child){border-right:1px solid var(--ln)}
/* Hàng thẻ hết hạn / đã huỷ mờ đi nhưng đừng mờ quá — mã số và chữ "đã hết hạn" màu đỏ
   phải còn đọc được (bảng chung để .62, ở đây nhấc lên .72) */
.khtbl.thet tr.mo td{opacity:.72}
/* Hàng so le + trỏ chuột: viết kèm bản body.qt-mau để đè bộ kẻ hàng chung của khu quản trị */
.khtbl.thet tbody tr:nth-child(2n),body.qt-mau .khtbl.thet tbody tr:nth-child(2n),
.khtbl.hvtbl tbody tr:nth-child(2n),body.qt-mau .khtbl.hvtbl tbody tr:nth-child(2n){background:#F5F8FC}
.khtbl.thet tbody tr:hover,body.qt-mau .khtbl.thet tbody tr:hover,
.khtbl.hvtbl tbody tr:hover,body.qt-mau .khtbl.hvtbl tbody tr:hover{background:#E9EFFC}
/* MÃ SỐ HỌC VIÊN — cột chính: chữ máy, đậm, màu theo mức cần để ý; mã thẻ ở dòng phụ */
/* MÃ SỐ TẬP — cột đầu bảng Học viên. Chưa cấp mã thì ĐỂ TRỐNG hẳn (anh Ba chốt 25/09/2026),
   không ghi dấu gạch: ô trống đọc lướt là biết ngay "người này chưa có mã", còn một rừng dấu
   gạch thì mắt phải dừng lại đọc từng cái. */
.hv-ma-o{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--navy);white-space:nowrap}
/* ── BẢNG HỌC VIÊN: CHÍN CỘT (anh Ba chốt 25/09/2026) ──────────────────────
   Mã số · Học viên · Thẻ Cộng đồng · Thẻ PT 1-1 · Tập gần đây · Khoá video · Số khoá ·
   Đã trả · Chăm sóc. Bề rộng đóng cứng cho từng cột để MỌI HÀNG CAO BẰNG NHAU và mép
   cột không nhảy theo độ dài tên — đúng kiểu bảng tính. Hai cột chữ dài (Học viên,
   Khoá video) dùng max-width:0 để tên dài cắt bằng … thay vì kéo rộng cả bảng. */
.khtbl.hvtbl td:nth-child(1){width:74px}
.khtbl.hvtbl td:nth-child(2){width:23%;min-width:214px;max-width:0}
.khtbl.hvtbl td:nth-child(3),.khtbl.hvtbl td:nth-child(4){width:108px}
.khtbl.hvtbl td:nth-child(5){width:94px}
.khtbl.hvtbl td:nth-child(6){width:19%;min-width:170px;max-width:0}
.khtbl.hvtbl td:nth-child(7){width:68px}
.khtbl.hvtbl td:nth-child(8){width:96px}
.khtbl.hvtbl td:nth-child(9){width:14%;min-width:138px;max-width:0}
/* Sáu cột hẹp KHÔNG ĐƯỢC XUỐNG DÒNG: "chưa tập" gãy làm đôi là hàng cao vọt lên một dòng,
   mà cả bảng chỉ cần một ô như thế là mọi hàng cao thấp lệch nhau. */
.khtbl.hvtbl td.hv-c,.khtbl.hvtbl td.hv-c .trong{white-space:nowrap}
/* TIÊU ĐỀ HAI HÀNG, CĂN GIỮA HẾT — kể cả cột số (phải ghi kèm th.num mới đè được
   .tbl th.num{text-align:right}). Mỗi hàng 26px, ô gộp dọc ăn cả 52px.
   Cho chữ xuống dòng được: tên nhóm dài như "TẬP GẦN ĐÂY" mà bắt nằm một dòng thì nó
   kéo cả cột rộng ra 115px trong khi nội dung bên dưới chỉ cần 94px. */
/* ── TIÊU ĐỀ HAI HÀNG, dùng chung cho bảng Học viên và bảng Thẻ tập ──
   Hàng .hd-nhom gộp ngang đặt tên nhóm, hàng .hd-cot là tên từng cột, cột nào không thuộc
   nhóm nào thì ô tiêu đề gộp dọc ăn cả hai hàng (rowspan) — đúng lối gộp ô của bảng tính. */
.khtbl thead tr.hd-nhom th,.khtbl thead tr.hd-cot th,
.khtbl thead tr.hd-nhom th.num,.khtbl thead tr.hd-cot th.num{text-align:center;vertical-align:middle;
  line-height:1.2;height:30px;padding-top:5px;padding-bottom:5px}
.khtbl thead th[rowspan]{height:60px}
/* Hàng trên là TÊN NHÓM: đậm hơn, chữ to hơn một chút, nền hơi sẫm để đọc ra ngay đây là
   tầng gộp chứ không phải một cột riêng. Ô gộp DỌC ("Tập gần đây", "Đã trả", "Chăm sóc")
   được xuống dòng — bắt nằm một dòng thì riêng chữ "TẬP GẦN ĐÂY" đã kéo cột rộng ra 115px
   trong khi nội dung bên dưới chỉ cần 94px. */
.khtbl thead tr.hd-nhom th,.khtbl thead tr.hd-cot th{white-space:nowrap}
.khtbl thead th[rowspan]{white-space:normal}
.khtbl thead tr.hd-nhom th{font-size:11px;letter-spacing:.07em;color:var(--navy);background:#E9EFF8}
.khtbl thead tr.hd-cot th{font-size:10px;letter-spacing:.05em;font-weight:600}
.hvtbl td.hv-c{text-align:center}
/* Ô nhận diện: tên bám mép trái, dấu sinh nhật / nhãn dồn sang mép phải */
.hvtbl .hv-d1{display:flex;align-items:center;gap:6px;min-width:0}
.hvtbl .hv-d1 > a,.hvtbl .hv-d1 > .hv-kh-t{flex:1 1 auto;min-width:92px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* Nhóm dấu bên phải co lại TRƯỚC tên: tên học viên là thứ cô tìm, dấu sinh nhật / nhãn chỉ
   là thông tin kèm — thiếu một cái nhãn còn đọc được, cụt mất tên thì hàng đó vô dụng. */
.hvtbl .hv-d1 .hv-phai{margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden;
  display:flex;align-items:center;gap:4px;padding-left:8px}
.hvtbl .hv-phu .hv-phai{margin-left:auto;flex:0 1 auto;min-width:0;overflow:hidden;
  display:flex;align-items:center;gap:4px;padding-left:8px}
.hvtbl .hv-d2{display:block;height:17px;margin-top:3px;font-size:11.5px;color:var(--tx2);
  line-height:1.45;white-space:nowrap;overflow:hidden}
.hvtbl .hv-kh-t{font-weight:600;font-size:13.5px;line-height:1.45;color:var(--navy)}
.hvtbl .hv-kh .tdo{width:62px}
.hvtbl .hv-sokh{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:700;color:var(--navy)}
/* ── Ô TRẠNG THÁI THẺ (cột Cộng đồng · PT 1-1) ──
   Sáu trạng thái sáu màu khác hẳn nhau, chữ trạng thái ở trên, ngày hết hạn ở dưới.
   Màu của DÒNG NGÀY là mức cần để ý (.sc-*), tách khỏi màu trạng thái — xem oTheTap(). */
.hvtbl td.hv-the{line-height:1.3}
/* Dấu gạch của ô rỗng: CHỈ MỖI DẤU GẠCH, không khung không nền (anh Ba 25/09/2026:
   "chỉ cần dấu - thôi, cần gì cái khung"). Tên phải là .hv-gach chứ KHÔNG dùng .hv-trong —
   tên đó đã là khung nét đứt "chưa có gì" của hồ sơ học viên, lấy trùng là mỗi ô rỗng
   trong bảng đội một cái khung nét đứt. */
.hvtbl .hv-gach{color:#B4C2CF;font-size:14px}
.hvt{display:inline-block;font-size:11px;font-weight:700;line-height:1.55;
  padding:2px 10px;border-radius:999px;white-space:nowrap}
.hvt-tap{background:#E3F4E9;color:#17613C}    /* đang tập */
.hvt-giu{background:#E6EEFC;color:#26468C}    /* để dành — đã thu tiền, chưa kích hoạt */
.hvt-bl{background:#FCF1DA;color:#77570F}     /* bảo lưu */
.hvt-buoi{background:#FBEADB;color:#8A4A17}   /* hết buổi — bán thêm buổi, khác hết hạn */
.hvt-het{background:#FCE3DF;color:#8E2A1E}    /* hết hạn — gia hạn ngày */
.hvt-huy{background:#EAEFF4;color:#5E7189}    /* đã huỷ */
.hvt-n{display:block;margin-top:3px;font-size:11.5px;line-height:1.4;
  font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.thet-ma{white-space:nowrap;font-size:13px}
.thet-so{display:block;font-family:"IBM Plex Mono",monospace;font-size:15.5px;font-weight:700;
  letter-spacing:-.01em;line-height:1.2;color:var(--navy)}
.thet-so.dai{font-size:13px;font-weight:600;letter-spacing:0}   /* mã thẻ dài hơn mã số học viên */
/* Bốn bậc màu của khu quản trị, dùng cho CON SỐ trong bảng (mã số, ngày còn, buổi còn).
   Đặt trong phạm vi .khtbl để thắng .khtbl .kh-phu (cùng độ mạnh, nằm sau nên ăn). */
.khtbl .sc-canh{color:#8A6413}
.khtbl .sc-gap{color:#9B3324}
.khtbl .sc-ok{color:#1E7A4D}
.khtbl .sc-mo{color:#8296A9}
.thet-hv{width:19%;min-width:150px;max-width:0}
.thet-hv b{font-weight:600}
.thet-goi{width:29%;min-width:168px;max-width:0}   /* hai cột co giãn: lấy phần còn lại, tên dài cắt bằng … */
/* Cột ngày tháng: nội dung dài bao nhiêu là biết trước ("01/06/2026 → 31/05/2027" + một dòng
   phụ), nên đóng cứng luôn. Trước đây nó co giãn và ăn mất 193px trong khi chỉ cần 172px —
   phần dôi ra ấy lấy đúng từ cột Tên gói, chỗ đang phải cắt tên bằng dấu ba chấm. */
.thet-tg{width:172px}
/* Dòng chính của ô co giãn: tên một dòng, cắt bằng … (title giữ nguyên văn), dấu badge
   không bị đẩy đi — nhờ vậy MỌI HÀNG CAO ĐÚNG BẰNG NHAU như bảng tính. */
.khtbl.thet .thet-d1{display:flex;align-items:center;gap:5px;min-width:0}
.khtbl.thet .thet-d1 > a,.khtbl.thet .thet-d1 > .thet-ten{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.khtbl.thet td.num,.khtbl.hvtbl td.num{font-size:13px;font-family:"IBM Plex Mono",monospace}
.khtbl.thet td.num b{font-weight:700}
.khtbl .thet-tien-phu{display:none}   /* cùng specificity với .khtbl .kh-phu để đè được */
/* ── CỘT LOẠI ──
   Chọn màu theo hai ràng buộc, không phải theo sở thích:
   1. PHẢI NỔI KHỎI NỀN BẢNG. Cả khu quản trị là một dải xanh nhạt — nền trang #F5F8FC,
      hàng so le #F5F8FC, hàng tiêu đề nhóm #E9EFF8. Bản đầu em để "Cộng đồng" nền #E6EEFC,
      tức gần như trùng nền, nhìn xa là mất dấu (anh Ba 25/09/2026: "đừng lẫn vào màu nền
      chung"). Nay nền đậm hơn hẳn và có viền riêng nên bật lên ở cả hàng trắng lẫn hàng xanh.
   2. PHẢI KHÁC HẲN MÀU TRẠNG THÁI. Cột Trạng thái ngay bên cạnh đã ăn xanh lá (đang tập),
      hổ phách (bảo lưu), đỏ (hết hạn); dấu tặng và sinh nhật ăn hồng. Nên Loại lấy hai màu
      CÒN TRỐNG trong bảng màu: XANH NGỌC cho lớp cộng đồng, TÍM ĐẬM cho kèm riêng PT 1-1.
      Hai màu này ở hai phía đối nhau của vòng màu nên không bao giờ đọc nhầm nhau. */
.thet-loai{width:110px;text-align:center}
.tl-o{display:inline-block;font-size:11px;font-weight:700;line-height:1.5;
  padding:2px 11px;border-radius:999px;white-space:nowrap;border:1px solid}
.tl-cd{background:#CDEDE5;border-color:#8FCFC1;color:#0B5248}   /* lớp cộng đồng — xanh ngọc */
.tl-pt{background:#E4D8FA;border-color:#BFA5EF;color:#46229A}   /* kèm riêng PT 1-1 — tím */
/* ── CĂN LỀ TỪNG CỘT ──
   Cột nào giá trị NGẮN và CÙNG CỠ thì căn giữa (mã số, buổi còn, bảo lưu còn, trạng thái):
   nằm giữa ô thì mắt chạy dọc một đường thẳng, không phải nhảy theo độ dài chữ.
   Riêng CỘT TIỀN giữ căn phải — tiền phải dóng hàng đơn vị mới so nhanh được số nào lớn hơn. */
.khtbl.thet td.thet-giua,.khtbl.thet th.thet-giua,
.khtbl.xqtbl td.thet-giua,.khtbl.xqtbl th.thet-giua{text-align:center}
.khtbl.thet td.thet-buoi,.khtbl.thet td.thet-bl{text-align:center;white-space:nowrap}
.khtbl.thet .pill{min-width:104px}
.thet-hma{width:94px}
.thet-buoi{width:66px}
.thet-bl{width:70px}
.thet-tien{width:98px}
.thet-goi .thet-ten{font-weight:600}
/* Dấu "tặng" DỒN SANG MÉP PHẢI của ô (anh Ba 25/09/2026), không dính sát đuôi tên gói —
   nhờ vậy mọi dấu tặng trong bảng nằm thẳng một cột dọc, đếm được bằng mắt. */
.khtbl td.thet-goi .badge{flex:none;margin-left:auto}
.thet-khung{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── CỘT THỜI HẠN THẺ ──
   Căn giữa: nội dung là một cụm ngày tháng cỡ cố định, nằm giữa ô thì cả cột dóng thành một
   khối cân, không lệch trái như trước. Dấu gạch của thẻ chưa kích hoạt cũng nằm đúng tâm ấy. */
.khtbl.thet td.thet-tg{text-align:center}
.thet-tg{line-height:1.35}
.thet-tg .mono{white-space:nowrap}
.thet-tg .tg-d{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.thet-tg .tg-bd{color:#8296A9;font-weight:500}   /* ngày kích hoạt — chuyện đã rồi, để nhạt */
.thet-tg .tg-mt{color:#C3CEDA}                   /* mũi tên ngăn hai mốc */
.thet-tg .tg-hh{font-weight:700}                 /* ngày kết thúc — đậm, màu do mucHan quyết */
/* Vạch màu mép trái theo mức cần để ý — .thet-nhac đặt sau để đè vạch theo trạng thái */
.thet-cho_duyet td:first-child,.thet-cho_tt td:first-child{box-shadow:inset 3px 0 0 var(--hot)}
.thet-tam_dung td:first-child{box-shadow:inset 3px 0 0 #C9D6E0}
.thet-het_han td:first-child{box-shadow:inset 3px 0 0 #E6B7AE}
.thet-nhac td:first-child{box-shadow:inset 3px 0 0 #D8830F}
/* Bề ngang cố định để popup không phình theo câu chữ (trước có cái rộng tới 607px) */
.thet-pop{min-width:278px;max-width:322px}
.hv-pop .gh-o input[type=date]{width:auto;flex:1;text-align:left}
.hv-pop .gh-o select{width:auto;flex:1}
.hv-pop .gh-o .btn{flex:none}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
/* Hàng tiêu đề dính dưới thanh trên cùng (nav.top cao 55px, cũng sticky).
   z-index thấp hơn .hv-pop (20) nên menu ⋯ vẫn phủ lên tiêu đề, không bị cắt. */
@media (min-width:861px) and (pointer:fine){
  .khtbl.thet thead th,.khtbl.hvtbl thead th{position:sticky;top:55px;z-index:2;
    box-shadow:inset 0 -1px 0 var(--ln),inset -1px 0 0 var(--ln)}
  /* Hàng dưới dính ngay dưới hàng trên (55px thanh trên cùng + 30px hàng nhóm). */
  .khtbl thead tr.hd-cot th{top:85px}
  /* Chỉ ô cuối của HÀNG TRÊN mới là cột cuối bảng — ô cuối hàng dưới nằm giữa bảng nên phải
     giữ vạch phải, nếu không hai cột cạnh nó dính liền nhau. */
  .khtbl thead tr.hd-nhom th:last-child{box-shadow:inset 0 -1px 0 var(--ln)}
}
@media(max-width:1300px){
  .khtbl.hvtbl td,.khtbl.hvtbl th{padding-left:7px;padding-right:7px}
  .khtbl.hvtbl td:nth-child(2){min-width:180px}
  .khtbl.hvtbl td:nth-child(3),.khtbl.hvtbl td:nth-child(4){width:86px}
  .khtbl.hvtbl td:nth-child(5){width:86px}
  .khtbl.hvtbl td:nth-child(6){min-width:150px}
  .khtbl.hvtbl td:nth-child(1){width:66px}
  .khtbl.hvtbl td:nth-child(7){width:58px}
  .khtbl.hvtbl td:nth-child(8){width:88px}
  .khtbl.hvtbl td:nth-child(9){min-width:112px}
  .khtbl.hvtbl thead tr.hd-cot th{letter-spacing:.02em}
}
/* ≤1120 (máy tính bảng nằm ngang, cửa sổ chia đôi màn 13 inch): cất hẳn cột Chăm sóc.
   Cột này ĐỨNG RIÊNG ở tiêu đề (ăn cả hai hàng) nên cất đi không làm lệch ô gộp nào —
   đó cũng là lý do chọn nó chứ không chọn Số khoá, vì Số khoá nằm trong nhóm Khoá video.
   Chăm sóc tốn 120px mà câu ghi chú đằng nào cũng bị cắt còn hai dòng; việc "ai đến hẹn
   chăm" vẫn nhìn được ở ô lọc ngay phía trên, mở hồ sơ là đọc đủ. */
@media(max-width:1120px){
  .khtbl.hvtbl td:nth-child(9),.khtbl.hvtbl thead tr.hd-nhom th:last-child{display:none}
  .khtbl.hvtbl thead tr.hd-nhom th:nth-last-child(2){box-shadow:inset 0 -1px 0 var(--ln)}
  .khtbl.hvtbl td:nth-child(1){width:60px}
  .khtbl.hvtbl td:nth-child(2){min-width:160px}
  /* Cho tên cột ở hàng dưới xuống dòng được: ở bề ngang này chính mấy chữ "MÃ SỐ TẬP",
     "CỘNG ĐỒNG" mới là thứ giữ cột rộng ra, chứ không phải nội dung bên dưới. */
  .khtbl.hvtbl thead tr.hd-cot th{white-space:normal}
  .khtbl.hvtbl td:nth-child(3),.khtbl.hvtbl td:nth-child(4){width:80px}
  /* Dòng "N buổi / 30 ngày" một mình đòi 84px — rộng hơn cả ngày tháng ở trên nó. Ở bề
     ngang này cất đi, số vẫn tra được bằng cách rê chuột lên ngày. */
  .khtbl.hvtbl td:nth-child(5){width:82px}
  .khtbl.hvtbl td:nth-child(5) .hv-d2{display:none}
  .khtbl.hvtbl td:nth-child(6){min-width:134px}
}
/* 861–1360: bỏ cột Quỹ bảo lưu (vẫn xem được trong menu ⋯) để cột Gói còn đọc được */
@media(max-width:1360px){
  .thet-bl{display:none}
}
/* máy tính hẹp (≤1180): bỏ thêm cột Số tiền — tiền dời xuống dòng phụ dưới mã */
@media(max-width:1180px){
  .thet-tien,.khtbl .thet-tao{display:none}
  .khtbl .pill{min-width:104px}   /* ô trạng thái hẹp lại cho bảng vừa khung, khỏi tràn ngang */
  .khtbl .thet-tien-phu{display:block}
  /* cột mã thành ba dòng (mã số · mã thẻ · số tiền): bó sát dòng lại cho hàng khỏi cao vổng */
  .khtbl.thet td{height:64px}
  .khtbl.thet .thet-ma .kh-phu{margin-top:0;line-height:1.3}
}
/* ≤1120: bóp lại cho vừa khung, KHÔNG cất thêm cột nào.
   Cột Loại vừa thêm nằm TRONG nhóm gộp "Gói tập", cất nó đi là ô tiêu đề vẫn ăn hai cột
   rồi lệch khỏi thân bảng — mà CSS không sửa được colspan. Nên ở đây chỉ hạ đệm ô và hạ
   bề rộng tối thiểu của hai cột chữ; đo tại 1024 vừa đủ, không còn trôi ngang. */
@media(max-width:1120px){
  .khtbl.thet td,.khtbl.thet th{padding-left:5px;padding-right:5px}
  .khtbl.thet .thet-hv{min-width:112px}
  .khtbl.thet .thet-goi{min-width:122px}
  .khtbl.thet .thet-loai{width:86px}
  .khtbl.thet .tl-o{padding:2px 7px;font-size:10.5px}
  .khtbl.thet .thet-buoi{width:58px}
  .khtbl.thet .pill{min-width:92px}
}
/* Điện thoại: bảng đổi sang dạng thẻ xếp dọc → tắt kẻ ô dọc, tiêu đề dính và hàng so le */
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .khtbl.thet td:not(:last-child),.khtbl.thet th:not(:last-child){border-right:none}
  .khtbl.thet td{height:auto;padding-top:5px}
  .khtbl.thet tbody tr:nth-child(2n),body.qt-mau .khtbl.thet tbody tr:nth-child(2n){background:#fff}
  .khtbl.thet .thet-so{display:inline-block}
  .khtbl.thet td.num{justify-content:space-between}
}

/* bảng khung giờ (quản trị): lịch và hình thức không gãy dòng, địa điểm là dòng phụ */
.kgtbl .kg-ht-td{white-space:nowrap;font-size:12.5px}
.kgtbl .kg-lich-td{color:var(--tx2);font-size:12.5px;line-height:1.45}   /* các thứ được gãy dòng ở 1024, giờ giữ nguyên một cụm */
.kgtbl .kg-lich-td .kg-gio{white-space:nowrap}
.kgtbl td:first-child,.kgtbl th:first-child{min-width:150px}
.kgtbl .kh-ten b{font-weight:600}
.kgtbl .pill{min-width:0;white-space:nowrap;padding:3px 10px}
.kgtbl .kg-sc{color:var(--tx2)}
/* form cấp thẻ tay: ô Khung giờ nổi bật khi gói cố định */
.canchon > span{color:var(--deep)}
.canchon select,.canchon input{border-color:var(--deep);box-shadow:0 0 0 3px var(--kbg)}

/* ── trang gói tập (công khai): danh sách khung giờ ── */
.khung-ds .li{align-items:center;gap:13px;padding:11px 15px}
.kg-ic{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--bg);color:var(--deep)}
.kg-ic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kg-ic.truc-tiep{background:#E8F6ED;color:#1E5E3A}
.kg-ic.ca-hai{background:#F3EEFB;color:#5B3E8E}
.khung-ds .t{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.khung-ds .t b{font-weight:600;color:var(--navy);font-size:14px}
.kg-lich,.kg-ghi{font-size:12px;color:var(--tx2)}
.kg-noi{font-size:12px;color:var(--tx2);text-align:right;white-space:normal;max-width:120px}

/* ── tài khoản học viên: thẻ tập của tôi ── */
.the-hv{gap:9px;padding:15px 18px 16px}
.the-hv.mo{opacity:.62}
.the-hv .orow{align-items:flex-start;flex-wrap:nowrap;gap:8px 12px}   /* pill luôn bên phải, tên dài thì tự xuống dòng */
.the-hv .orow .pill{flex:none;margin-top:2px}
.thv-meta .mono,.thv-han > span{white-space:nowrap}   /* giờ 06:00–07:00 và "đến hết dd/mm" không gãy giữa chừng */
.thv-ten{font-size:16px;font-weight:600;color:var(--navy);letter-spacing:-.01em;flex:1;min-width:0;line-height:1.35}
.thv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:13px;color:var(--tx2);line-height:1.45}
.thv-meta .mono{font-size:12.5px}
.thv-han{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--navy);
  padding:9px 12px;background:var(--bg);border-radius:6px;line-height:1.4}
.thv-han b{font-weight:600;color:var(--deep)}
.thv-con{font-size:12px;font-weight:600;color:#1E5E3A;background:#E8F6ED;border-radius:4px;padding:2px 8px}
.thv-cho{color:var(--tx2);font-size:13px}
.thv-nut{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.the-hv.thv-dang_tap{box-shadow:inset 3px 0 0 #1E5E3A}
.the-hv.thv-cho_tt,.the-hv.thv-cho_duyet{box-shadow:inset 3px 0 0 var(--hot)}

/* thẻ tập của học viên: các ca được xếp, mỗi ca một dòng có nút Vào Zoom */
.thv-ca{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.thv-ca-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--ln);border-radius:8px;background:var(--bg);font-size:13px}
.thv-ca-r .mono{font-size:12px;color:var(--tx2)}
.thv-ca-r .btn{flex:none}
/* hộp ⋯ của thẻ: danh sách ô tích ca */
.ca-chon{flex-direction:column;gap:6px;margin:4px 0 8px}
.ca-chon .tick.nho{font-size:12.5px}
/* trang gói: điều khoản ngắn */
.goi-dk{max-width:520px}

/* form lớp: khối theo loại lớp ẩn bằng thuộc tính hidden; khối tuỳ chọn gập.
   Dòng tiêu đề của khối gập đóng vai trò như <h4> của .panel thường: cùng cỡ chữ,
   cùng màu, và chỉ kẻ vạch ngăn khi đã mở ra — đóng lại thì nó là một dòng gọn. */
.panel[hidden]{display:none}
details.panel.tuychon:not([open]){gap:0}
details.panel.tuychon > summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:0 9px;font-size:14px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
details.panel.tuychon > summary::-webkit-details-marker{display:none}
details.panel.tuychon > summary::before{content:"▸";color:var(--tx2);font-size:12px;font-weight:400}
details.panel.tuychon[open] > summary::before{content:"▾"}
details.panel.tuychon[open] > summary{padding-bottom:11px;border-bottom:1px solid var(--ln)}
details.panel.tuychon > summary i{font-style:normal;font-size:12px;font-weight:400;
  color:var(--tx2);letter-spacing:0}
details.panel.tuychon > summary:hover b{text-decoration:underline;text-underline-offset:3px}
/* Cấp thẻ tay: dòng xem trước ngày hết hạn ngay dưới ô ngày bắt đầu.
   Ngày đã qua thì đổi sang màu hổ phách — nhập thẻ cũ là việc cố ý, nhưng chọn nhầm
   năm thì cũng phải đập vào mắt ngay chứ đừng để lưu xong mới biết. */
.bd-nhac{display:block;margin-top:5px;font-weight:600;color:var(--tx2)}
.bd-nhac.qua{color:#8A5A00}

/* Lịch học theo tuần (quản trị): 7 cột, mỗi buổi là một <details> bấm ra hộp sửa */
.tuan-dau{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.tuan-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tuan-ten{margin-left:6px;font-size:14px;color:var(--navy)}
.them-buoi{position:relative}
.them-buoi summary{list-style:none;cursor:pointer;display:inline-block}
.them-buoi summary::-webkit-details-marker{display:none}
.them-buoi-f{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(680px,90vw);background:#fff;border:1px solid var(--ln);border-radius:12px;padding:16px;box-shadow:0 18px 48px rgba(15,23,42,.18);gap:10px}
.tuan{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}   /* các cột cùng hàng cao bằng nhau */
.tuan-cot{background:#fff;border:1px solid var(--ln);border-radius:10px;padding:8px;min-height:160px;display:flex;flex-direction:column;gap:6px}
.tuan-cot.homnay{border-color:var(--deep);box-shadow:0 0 0 3px var(--kbg)}
.tuan-cot.qua{opacity:.72}
.tuan-th{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 6px;border-bottom:1px solid var(--ln);margin-bottom:2px}
.tuan-th b{font-size:13px;color:var(--navy)}
.tuan-th span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--tx2)}
.tuan-cot.homnay .tuan-th b{color:var(--deep)}
.tuan-trong{color:var(--tx2);font-size:12px;text-align:center;padding:10px 0}
.tuan-rong{margin:-2px 0 10px}
.bh{position:relative;border-radius:8px;border:1px solid var(--ln);background:var(--bg)}
.bh summary{list-style:none;cursor:pointer;padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.bh summary::-webkit-details-marker{display:none}
.bh-gio{font-size:11.5px;color:var(--deep);font-weight:600}
.bh-ten{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3}
.bh-phu{font-size:11px;color:var(--tx2)}
.bh-cong_dong{border-left:3px solid #4F86C6}
.bh-pt{border-left:3px solid #D9A441;background:#FFF9EC}
.bh-dang{border-color:#1E7A4D;background:#EAF7EE}
.bh-huy{opacity:.55}
.bh-huy .bh-ten{text-decoration:line-through}
.bh-qua{opacity:.6}
.bh[open]{z-index:25;border-color:var(--deep);box-shadow:0 0 0 2px var(--kbg)}   /* buổi đang mở hộp sửa: viền nổi để biết đang sửa buổi nào */
.bh-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:26;width:300px;background:#fff;border:1px solid var(--ln);border-radius:12px;padding:12px;
  box-shadow:0 18px 48px rgba(15,23,42,.18);display:flex;flex-direction:column;gap:10px}
.tuan-cot:nth-child(n+5) .bh-pop{left:auto;right:0}
.bh-pop label{font-size:12.5px}
.bh-nut{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bh-pop > .bh-nut{border-top:1px solid var(--ln);padding-top:9px}   /* hàng Huỷ / Xoá tách khỏi hàng Lưu */
@media(max-width:1180px){.tuan{grid-template-columns:repeat(4,minmax(0,1fr))}.tuan-cot:nth-child(n+5) .bh-pop{left:0;right:auto}.tuan-cot:nth-child(4n) .bh-pop,.tuan-cot:nth-child(7) .bh-pop{left:auto;right:0}}

/* bảng gói tập (quản trị): hàng nhóm và hàng gói gọn */
.goitbl tr.goi-nhom td{background:var(--bg);padding:8px 14px;border-top:1px solid var(--ln)}
.goitbl tr.goi-nhom .badge{margin-right:6px}
.goitbl td{vertical-align:middle}
.goitbl tr.mo td{opacity:.6}
.goitbl .kh-phu{display:block;font-size:11.5px;color:var(--tx2);font-family:"IBM Plex Sans",sans-serif;font-weight:400}

/* bảng tin tức (quản trị): ảnh bìa nhỏ 16:9 bên trái tiêu đề */
.tb-bai{display:flex;align-items:center;gap:12px;min-width:0}
.tb-anh{flex:none;width:96px;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--g-soft);display:block}
.tb-anh img{width:100%;height:100%;object-fit:cover;display:block}
.tb-tx{min-width:0}

/* kho ảnh — 5 cột × 3 hàng = 15 ảnh/trang trên máy tính, thẻ nhỏ gọn */
.kho{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(min-width:1181px){.kho{grid-template-columns:repeat(5,minmax(0,1fr))}}
.anh{margin:0;border:1px solid var(--ln);border-radius:7px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.anh > a{display:block;background:var(--g-soft)}
.anh img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.anh figcaption{padding:7px 9px 8px;display:flex;flex-direction:column;gap:3px;min-width:0}
.an-t{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-m{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.an-m b{color:#1B6B44;font-weight:600}
.an-d{display:flex;gap:5px;align-items:center;margin-top:3px;min-width:0}
.an-u{font-family:"IBM Plex Mono",monospace;flex:1;min-width:0;border-radius:5px}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
.an-x{background:none;border:1px solid var(--ln);color:#B42318;font-family:inherit;font-weight:600;
  border-radius:5px;cursor:pointer;flex:none}
.an-x:hover{border-color:#B42318;background:#FEF3F2}

/* lesson list */
.llist{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:6px;overflow:hidden;background:#fff}
.li{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--ln);font-size:14px}
.li:last-child{border-bottom:none}
.li .n{width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--tx2);display:grid;place-items:center;font-size:11px;font-family:"IBM Plex Mono",monospace;flex-shrink:0}
.li .n.done{background:var(--g-btn);color:#fff}
.li .t{flex:1;min-width:0}
.li .d{font-size:12px;color:var(--tx2);white-space:nowrap}
.li .free{font-size:10px;background:var(--g-gold);color:var(--navy);padding:2px 7px;border-radius:3px;font-weight:700}
a.li-thu{color:inherit;text-decoration:none;cursor:pointer}
a.li-thu:hover{background:var(--bg)}
a.li-thu .d{color:var(--deep);font-weight:600}

/* progress */
.pbar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--g-btn)}

/* player */
.player{position:relative;background:#000;aspect-ratio:16/9;border-radius:6px;overflow:hidden}
/* Cắt khung: iframe cao hơn khung 120px và dịch lên 60px, nên thanh tiêu đề (trên) và
   logo "Xem trên YouTube" (dưới) của YouTube nằm ngoài vùng nhìn thấy. Chuột không tới iframe. */
.pl-khung{position:absolute;inset:0;overflow:hidden}
.pl-khung iframe,.player iframe{position:absolute;top:-60px;left:0;width:100%;height:calc(100% + 120px);border:0;pointer-events:none}
.player:fullscreen{border-radius:0;aspect-ratio:auto}
#ytB{z-index:0}#yt{z-index:1}
/* Toàn màn hình thật (Fullscreen API) và giả (.fs-gia, khi trình duyệt không cho): khung video 16:9 canh giữa, nền đen */
.player:fullscreen .pl-khung,.player.fs-gia .pl-khung{inset:0 auto;left:50%;transform:translateX(-50%);height:100%;width:auto;aspect-ratio:16/9;max-width:100%}
body.fs-gia{overflow:hidden}
.player.fs-gia{position:fixed;top:0;left:0;z-index:9999;border-radius:0;aspect-ratio:auto;width:100vw;height:var(--appvh,100vh);box-shadow:none;background:#000}
@media(orientation:portrait){.player.fs-gia{width:var(--appvh,100vh);height:100vw;transform:translateX(100vw) rotate(90deg);transform-origin:left top}}
.player.fs-gia .ctrl,.player:fullscreen .ctrl{padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
.player.fs-gia .ctrl button,.player:fullscreen .ctrl button{min-width:44px;height:44px;font-size:18px}
/* Chế độ "chạm tay": mở iframe cho chạm trực tiếp (Safari/iPhone), ẩn shield và thanh điều khiển */
.pl-goi{display:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:18;background:rgba(15,23,42,.8);color:#fff;
  font-size:13px;padding:7px 12px;border-radius:999px;pointer-events:none;white-space:nowrap}
.player.tu-tay .pl-khung iframe{pointer-events:auto}
.player.tu-tay .shield,.player.tu-tay .ctrl{display:none}
.player.tu-tay .pl-goi{display:block}
/* phủ kín mặt video: click không bao giờ tới iframe, nên YouTube không bung overlay */
.shield{position:absolute;inset:0;z-index:10;cursor:pointer}
.endcard{position:absolute;inset:0;background:var(--g-deep);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20;text-align:center;padding:20px}
.endcard.on{display:flex}
.poster{position:absolute;inset:0;background:var(--g-deep);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:15;text-align:center;padding:20px}
.poster.on{display:flex}
.po-t{color:#fff;font-size:19px;font-weight:600;max-width:24ch;line-height:1.3}
.po-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--hot)}
/* nút phát giữa poster — trước đây trùng tên lớp .po-txt của thẻ bài viết nên bị kéo thành hình chữ nhật cao */
.po-play{width:66px;height:66px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.14);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 0 4px;font-family:inherit}
.po-play:hover{background:rgba(255,255,255,.28)}
.po-b{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;background:var(--g-gold);color:var(--navy);font-size:20px;padding-left:4px}
.po-d{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--on-toi)}
.endcard h4{margin:0;font-size:20px;font-weight:600}
.endcard p{color:#C6E1F2;font-size:14px;margin:0}
/* Thanh điều khiển nổi dưới mặt video, tự ẩn khi đang phát và không động chuột */
.ctrl{position:absolute;left:0;right:0;bottom:0;z-index:16;display:flex;flex-direction:column;gap:8px;padding:10px 12px 10px;
  background:linear-gradient(180deg,rgba(15,23,42,0),rgba(15,23,42,.85));color:#fff;opacity:0;transition:opacity .2s}
.player.hien .ctrl,.player:not(.dangphat) .ctrl{opacity:1}
.ctrl-r{display:flex;align-items:center;gap:4px}
.ctrl button{background:none;border:none;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:5px 8px;border-radius:7px;font-family:inherit;display:inline-flex;align-items:center}
.ctrl button:hover{background:rgba(255,255,255,.15)}
.ctrl-sp{flex:1}
.seek{position:relative;height:6px;background:rgba(255,255,255,.28);border-radius:99px;cursor:pointer}
.seek:hover{height:8px}
.seek i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:0}
.seek .sk-dem{background:rgba(255,255,255,.35)}
.seek #sf{background:var(--g-gold)}
.sk-nut{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#F3D27A;transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(243,210,122,.3)}
.tcode{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#fff;white-space:nowrap;margin-left:4px;font-variant-numeric:tabular-nums}
.vol{width:80px;accent-color:#F3D27A}
.rate{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:7px;padding:4px 6px;font-size:12.5px;height:auto;width:auto;min-width:0;background-image:none}
.rate option{color:#000}
.ec-auto{font-size:14px;color:#C6E1F2}
.ec-auto button{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:7px;padding:3px 10px;cursor:pointer;margin-left:4px;font-family:inherit}
@media(max-width:600px){.vol,.rate{display:none}}

/* qr */
.qrbox{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start}
.ck-mot{max-width:560px}                                   /* chưa có QR: một cột, không để dòng chữ dài quá */
.ck-lh{display:flex;gap:10px;flex-wrap:wrap}
.ck-lh .btn{flex:1 1 200px;text-align:center}
.qrcard{border:1px solid var(--ln);border-radius:8px;padding:16px;background:#fff;text-align:center}
.qrcard svg{width:100%;height:auto;display:block}
.kv{display:flex;flex-direction:column;gap:11px}
.kv .r{display:flex;justify-content:space-between;gap:16px;padding-bottom:9px;border-bottom:1px solid var(--ln);font-size:14px}
.kv .r:last-child{border-bottom:none}
.kv .k{color:var(--tx2)}
.kv .v{font-weight:600;color:var(--navy);text-align:right;font-family:"IBM Plex Mono",monospace}
.kv .v .chep{margin-left:8px;font-family:inherit;font-size:11px;font-weight:600;color:var(--deep);background:var(--bg);
  border:1px solid var(--ln);border-radius:4px;padding:2px 7px;cursor:pointer;vertical-align:middle}
.kv .v .chep:hover{border-color:var(--deep)}
.buoc-ck{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:13.5px;line-height:1.5;color:var(--tx2)}
.buoc-ck b{color:var(--navy)}
.qr-dt{display:none;margin-top:8px;text-align:left;line-height:1.5}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.qr-dt{display:block}}
.note-hi{background:#FDF6E4;border:1px dashed var(--gold);border-radius:5px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.note-hi code{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;color:#7A5C14;letter-spacing:.04em}

/* admin */
.ocard{border:1px solid var(--ln);border-radius:6px;background:#fff;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.orow{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:4px}
.pill.pending{background:var(--bg);color:var(--deep)}
.pill.claimed{background:#FDF6E4;color:#7A5C14}
.pill.activated{background:#E8F6ED;color:#1E5E3A}
.actions{display:flex;gap:9px;flex-wrap:wrap}
.mono{font-family:"IBM Plex Mono",monospace}

/* footer */
footer{background:var(--g-deep);color:var(--on-toi);font-size:13.5px;margin-top:44px}
footer a{color:var(--on-toi2)}
footer a:hover{color:#fff;text-decoration:none}
.frail{height:3px;background:var(--rail)}

/* hàng trên: thương hiệu | liên hệ */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;padding:26px 20px 18px;align-items:start}
.fcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.fname{color:#fff;font-weight:600;font-size:15.5px}
.ftag{color:#8FBBD6;font-size:12.5px;line-height:1.5}
.frow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}

/* vòng tròn kênh — nhỏ lại */
.fsoc{display:flex;gap:7px}
.fsoc a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(184,220,239,.26);color:#DCEBF6}
.fsoc a:hover{background:rgba(255,255,255,.18);border-color:rgba(184,220,239,.55)}
.fsoc svg{width:15px;height:15px;fill:currentColor;display:block}
.fsoc .zalo{font-size:10px;font-weight:700;letter-spacing:-.02em}

.fban{font-size:11.5px;color:var(--tx2);opacity:.75;padding:10px 20px 14px;border-top:1px solid var(--ln);margin-top:4px;text-align:center}
.fzalo{display:inline-flex;align-items:center;background:var(--g-gold);color:var(--navy)!important;
  padding:8px 15px;border-radius:7px;font-size:12.5px;font-weight:700;white-space:nowrap}
.fzalo:hover{filter:brightness(1.05)}

/* Liên hệ: một cột dọc. Chia đôi làm địa chỉ xuống dòng lẻ loi,
   để nguyên cột rộng thì mỗi mục gọn trong một dòng. */
.fmeta{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right}
.fmeta div{display:flex;gap:9px;align-items:baseline;line-height:1.5;font-size:13px}
.fmeta i{font-style:normal;opacity:.65;font-size:11px}

/* hàng link ngang — thay cho cột dọc 6 dòng */
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 18px;padding:14px 20px 16px;
  border-top:1px solid rgba(184,220,239,.14);font-size:12.5px}
.fnav a{white-space:nowrap}



/* ── hero có ảnh giáo viên ── */
/* Ảnh cố định hẹp, chữ chiếm phần còn lại — không để hở khoảng giữa. */
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:44px;align-items:center}
/* ảnh đứng trước trong mã để trên điện thoại chữ chảy quanh được;
   trên máy tính đẩy sang cột phải bằng order */
.hero .hphoto{order:2}
.hero .hchu{order:1;min-width:0}
.hero .cred{font-size:12.5px;color:#8FBBD6;margin:0 0 14px}
.hbtns{display:flex;gap:11px;flex-wrap:wrap}
.hphoto{aspect-ratio:4/5;width:240px;border-radius:11px;
  background:linear-gradient(150deg,var(--mid),var(--light) 60%,var(--pale));
  display:grid;place-items:center;font-size:52px;overflow:hidden;align-self:center}
.hphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* ── hero khối nổi bật: ảnh 16:9 bên phải, chữ bên trái ── */
.hero.nbat .in{grid-template-columns:minmax(0,1fr) minmax(300px,46%);gap:40px}
.nb-anh{order:2;display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:linear-gradient(150deg,var(--mid),var(--light) 60%,var(--pale));box-shadow:0 12px 32px rgba(0,0,0,.25)}
.nb-anh img{width:100%;height:100%;object-fit:cover;display:block}
.hero.nbat h1{max-width:24ch}
.hero.nbat h1 a{color:inherit}
.hero.nbat h1 a:hover{text-decoration:underline}
.hero.nbat p:last-of-type{margin-bottom:22px}
.nb-nut{background:var(--hot);color:var(--navy)}
.nb-nut:hover{filter:brightness(1.05)}
.morelink{display:inline-block;color:var(--hot);font-size:13.5px;font-weight:600;margin-bottom:4px}
.morelink:hover{text-decoration:underline}

/* ── số đỏ "việc chờ" trên menu quản trị, thanh tab, chuông ── */
.qts-so,.nav-so,.tab-so,.mico-so{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:#E5484D;color:#fff;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px #fff}
.nav-qt{position:relative}
.nav-so{position:absolute;top:-9px;right:-14px;min-width:17px;height:17px;font-size:10.5px}
.tabitem{position:relative}
.tab-so{position:absolute;top:4px;left:calc(50% + 4px);min-width:17px;height:17px;font-size:10.5px}
.mico{position:relative}
.mico-so{position:absolute;top:-5px;right:-6px;min-width:17px;height:17px;font-size:10.5px}

/* ── Khoá của tôi: bảng tiến độ + mục lục theo chương ── */
.tiendo{display:flex;flex-direction:column;gap:12px}
.td-dau{display:flex;gap:14px;align-items:center}
.td-so{font-size:15px}
.vong{--pt:0;width:72px;height:72px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:conic-gradient(var(--deep) calc(var(--pt) * 1%),#E3ECF3 0);position:relative}
.vong::before{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.vong b{position:relative;font-size:15px;color:var(--navy);font-family:"IBM Plex Mono",monospace}
.td-dong{border-top:1px solid var(--ln);padding-top:6px}
.td-dong .dr{grid-template-columns:104px minmax(0,1fr);padding:7px 0;font-size:13px;border:none}
.td-dong .dr.canh .dv{color:#7A5C14}
.chuong-hoc{margin-top:14px}
.chuong-hoc summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;
  font-weight:600;font-size:15.5px;color:var(--navy);padding:6px 0;margin-bottom:6px}
.chuong-hoc summary::-webkit-details-marker{display:none}
.chuong-hoc summary::before{content:"▾";font-size:12px;color:var(--tx2);margin-right:8px}
.chuong-hoc:not([open]) summary::before{content:"▸"}
.ch-ten{flex:1}
.ch-dem{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tx2);font-weight:500}
.ch-dem.xong{color:#1E5E3A}
.li.tiep{background:#FFFBEE;box-shadow:inset 3px 0 0 var(--hot)}
.badge.tiep{background:var(--hot);color:var(--navy);margin-left:8px;vertical-align:middle}
.li-ic{font-size:12px;color:var(--tx2);margin-left:6px}
.li-do{display:block;height:3px;background:#E3ECF3;border-radius:2px;margin-top:5px;max-width:200px;overflow:hidden}
.li-do i{display:block;height:100%;background:var(--deep)}

/* ── Trang xem bài học: meta dưới tên bài, nút trước/sau, nút đã xong, cột phải ── */
.bai-ten.st{margin-bottom:8px}
.bai-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--tx2);margin:0 0 18px}
.bai-meta .badge{font-size:11px;padding:3px 9px}
.bm-tg{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--navy)}
.bm-ic{color:var(--deep);text-decoration:none;border-bottom:1px dotted var(--deep)}
.bai-nav{display:flex;justify-content:space-between;gap:10px}
.bai-nav{min-width:0;max-width:100%}
.bai-nav .btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:0 1 48%;max-width:48%;min-width:0;padding:8px 14px;background:#fff;overflow:hidden;white-space:normal}
.bai-nav .btn b{white-space:nowrap}
.bai-nav .btn .bn-t{display:block;width:100%}
.bai-nav .btn.sau{align-items:flex-end;text-align:right;margin-left:auto}
.bai-nav .btn b{font-weight:600}
.bn-t{font-weight:400;font-size:12px;color:var(--tx2);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bai-nd-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx2);margin-bottom:8px}
.player{scroll-margin-top:84px}   /* nút Tập lại cuộn lên không bị thanh trên che */
.xong-hang{display:flex;gap:10px;align-items:stretch}
.xong-hang .btn.wide{flex:1;width:auto}
.xong-hang .btn.ghost{flex:0 0 auto;background:#fff}
.xong-hang #doneBtn:disabled{opacity:1;cursor:default;background:#E8F6ED;color:#1E5E3A;border:1px solid #BFE3CC}
.bai-ben{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto;gap:8px}
.ben-td{display:flex;flex-direction:column;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--ln)}
.ben-td-hang{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.bai-muc .chuong-hoc{margin-top:6px}
.bai-muc .chuong-hoc summary{font-size:14px;padding:5px 0;margin-bottom:4px}
.bai-muc .li{padding:9px 11px;font-size:13.5px;gap:10px}
.bai-muc .li .t{line-height:1.4}
.bai-muc .li .d{font-size:11.5px}
.li.hien{background:var(--bg);box-shadow:inset 3px 0 0 var(--deep);font-weight:600}
.badge.hien{background:var(--deep);color:#fff;margin-left:8px;vertical-align:middle;font-weight:600}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .split .bai-ben{position:static;max-height:none;overflow:visible}
  .bai-nav .btn{flex:1 1 0}
  .xong-hang{flex-direction:column}
  .xong-hang .btn.ghost{width:100%}
  .bai-meta{margin-bottom:14px}
}

/* ── bài học: dặn dò, tài liệu, bài khoá theo ngày ── */
.bai-nd{background:#fff;border:1px solid var(--ln);border-radius:8px;padding:16px 20px;font-size:15px;line-height:1.7}
.bai-nd h2,.bai-nd h3{font-size:16px;margin:14px 0 6px}
.bai-nd p{margin:0 0 10px}
.bai-nd ul{margin:0 0 10px;padding-left:20px}
.bai-nd img{max-width:100%;border-radius:6px}
/* mô tả dài của khoá / gói: cùng luật văn bản thường như dặn dò */
.mota-dai{color:#4A6A82;font-size:16px;line-height:1.7}
.mota-dai p{margin:0 0 10px}
.mota-dai ul{margin:0 0 12px;padding-left:22px}
.mota-dai li{margin:2px 0}
.mota-dai h2,.mota-dai h3{font-size:17px;color:var(--navy);margin:14px 0 6px}
.mota-dai strong{color:var(--navy)}
.tailieu{background:var(--bg);border-radius:8px;padding:12px 16px;font-size:14px}
.tailieu b{display:block;margin-bottom:6px}
.tailieu ul{margin:0;padding-left:18px}
.tailieu li{margin:3px 0}
.li.khoa{color:var(--tx2);background:#FAFCFE;cursor:not-allowed}
.li.khoa .n{background:#E9EFF4;color:#8A9BAA}
.li.khoa .t{color:#7A8B99}
.badge.ngay{background:#FDF6E4;color:#7A5C14}
.badge.thu{background:#EAF1FD;color:#2A4E8E}      /* học thử — xem được không cần mua */
.badge.loi{background:#FDECEA;color:#8E2A1E}      /* cảnh báo thật: bài chưa phát được */
.badge.xam{background:#EEF2F6;color:#61748A}      /* ghi chú nhẹ, không phải việc phải làm */
.b-tk{font-size:11.5px;color:var(--tx2);margin-left:6px;font-family:"IBM Plex Mono",monospace}

/* ── dải học thử ── */
.trial{background:var(--g-gold);border-radius:9px;padding:20px 24px;display:flex;
  justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
/* Nhãn phân loại tách riêng: tiêu đề khỏi dài dòng mà người đọc vẫn biết ngay
   đây là khoá video tự học, không phải lớp có huấn luyện viên. */
.trial .t-nhan{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:#7A5C14;font-weight:600;margin-bottom:4px}
.trial h3{font-size:20px;font-weight:700;color:var(--navy);margin:0 0 4px}
.trial p{font-size:13.5px;line-height:1.55;color:#5C4712;margin:0;max-width:54ch}
.trial p a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.trial .btn{background:var(--navy);color:#fff;white-space:nowrap}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .trial{padding:16px 17px;gap:13px}
  .trial h3{font-size:17.5px}
  .trial p{font-size:12.5px}
  .trial .btn{width:100%;padding:11px}
}

/* ── thẻ bài viết: cùng ngôn ngữ với thẻ khoá học ── */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.po{display:flex;flex-direction:column;background:#fff;border:1px solid #E5E7EB;
  border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(15,23,42,.05);
  color:inherit;transition:box-shadow .18s,transform .18s}
.po:hover{box-shadow:0 6px 22px rgba(15,23,42,.1);transform:translateY(-2px);text-decoration:none}
.po .th{aspect-ratio:16/9;flex:0 0 auto;background:var(--g-soft);display:grid;
  place-items:center;font-size:22px;color:var(--light);overflow:hidden}
.po .th img{width:100%;height:100%;object-fit:cover;display:block}
.po-txt{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.po .dt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--tx2)}
.po .tt{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Trang /tin-tuc: lưới cố định để 12 bài luôn chia hàng tròn — máy tính 4 cột,
   màn vừa 3, tablet 2, điện thoại 1. Trang chủ vẫn dùng .po thường trong dải
   cuộn ngang nên mọi thứ dưới đây chỉ ăn theo .tt-luoi. */
.posts.tt-luoi{grid-template-columns:1fr;gap:14px}
.tt-luoi .po .th img{transition:transform .35s ease}
.tt-luoi .po:hover .th img{transform:scale(1.04)}
@media(min-width:641px){.posts.tt-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media (min-width:861px) and (pointer:fine){.posts.tt-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1101px){.posts.tt-luoi{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Hộp trống dùng chung: biểu tượng nét, tiêu đề, một câu giải thích, nút đi tiếp */
.hop-trong{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:44px 24px;border:1px dashed var(--pale);border-radius:14px;background:#fff}
.hop-trong svg{width:34px;height:34px;fill:none;stroke:var(--deep);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.8;margin-bottom:4px}
.hop-trong strong{font-size:15.5px;color:var(--navy)}
.hop-trong p{margin:0;max-width:420px;font-size:13.5px;line-height:1.55;color:var(--tx2)}
.hop-trong .btn{margin-top:8px}

/* ── Bản app trên điện thoại ──
   Dưới 860px: bỏ menu xổ và chân trang, điều hướng dồn hết vào thanh tab dưới đáy.
   Trên 860px: giữ nguyên website bình thường. */
/* ═══ BẢNG XẾP HẠNG (/xep-hang) ═══
   Dựng lại 25/09/2026 theo lối của Kinafit (anh Ba: "làm cho năng lượng hơn, sang hơn").
   Ý chính KHÔNG nằm ở màu mè mà ở BỐ CỤC: nền tối cao hẳn, rồi kéo ngược nội dung lên nằm đè
   lên nó, nên bục và hàng chip NỔI TRÊN NỀN TỐI thay vì nằm trên nền trắng. Cả màn tự nhiên
   có chiều sâu, và ba người dẫn đầu được đặt trên sân khấu chứ không phải trong một cái bảng. */
/* Bỏ đệm trên và đường kẻ mà mọi <section> đều có: nền tối phải ăn sát thanh menu, hở ra
   một vạch trắng kèm hairline ở trên là mất hết vẻ liền khối. */
.xh{padding:0 0 34px;border-top:0}
/* ── NỀN TỐI ──
   Tràn hết bề ngang màn hình: dùng margin âm theo 50vw rồi bù lại bằng padding, nên khối nền
   chạy sát hai mép kính mà chữ bên trong vẫn thẳng hàng với mọi trang khác. */
.xh-dau{position:relative;overflow:hidden;text-align:center;color:#fff;
  margin:0 calc(50% - 50vw) 0;padding:26px calc(50vw - 50%) 371px;
  background:var(--g-xh)}
/* Dải mờ dần ở đáy: nền tối tan vào nền trang thay vì cắt ngang một đường thẳng.
   CHỈ 60px — để cao như lúc đầu (150px) thì vùng sáng ăn lên tới chỗ đặt TÊN trên bục, chữ
   trắng nằm trên nền sáng, đọc không ra. Nay dải chỉ liếm phần chân bục, mà chân bục là ba
   khối màu đặc nên không hề gì. */
.xh-dau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;z-index:1;
  background:var(--g-xh-mo);
  pointer-events:none}
/* Tia sáng xoay 60 giây một vòng — chậm tới mức không thấy nó chuyển động, chỉ thấy nền sống */
.xh-tia{position:absolute;inset:-40% -20%;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.075) 12deg,
    rgba(255,255,255,0) 24deg,rgba(255,255,255,0) 36deg,rgba(255,255,255,.075) 48deg,rgba(255,255,255,0) 60deg);
  animation:xh-xoay 60s linear infinite}
@keyframes xh-xoay{to{transform:rotate(360deg)}}
.xh-h1{position:relative;z-index:2;margin:0;font-size:30px;letter-spacing:-.02em;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.3)}
/* margin ngang PHẢI là auto: luật chung p{max-width:68ch} bó thẻ <p> này lại hẹp hơn khối nền,
   mà khối hẹp hơn thì text-align:center của cha chỉ căn chữ trong khối, còn cả khối vẫn nép
   mép trái — nhìn ra thành dòng chữ lệch hẳn sang trái so với tên màn. Đúng lỗi đã gặp ở dòng
   chú thích cuối trang (.xh-chan), cùng một nguyên nhân. */
.xh-sub{position:relative;z-index:2;margin:6px auto 15px;font-size:14px;color:rgba(255,255,255,.85)}
/* Hai thẻ chọn bảng: viên thuốc kính mờ trên nền tối, cái đang xem bật trắng hẳn.
   Xếp MỘT HÀNG ngang (biểu tượng · tên · đơn vị) chứ không xếp chồng hai dòng — cao 42px thay
   vì 58px, đỡ chiếm chỗ ngay dưới chữ lớn (anh Ba 25/09/2026: "cho nút nó mảnh lại"). */
.xh-tabs{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:0 auto}
.xh-tab{display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 5px;border-radius:999px;
  background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.33);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .16s,transform .16s,box-shadow .16s}
.xh-tab:hover{text-decoration:none;background:rgba(255,255,255,.22);transform:translateY(-1px)}
.xh-tic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;line-height:1;background:rgba(255,255,255,.2)}
.xh-tab b{font-size:14.5px;line-height:1.1}
.xh-tab i{font-style:normal;font-size:12px;line-height:1.1;color:rgba(255,255,255,.72)}
.xh-tab i::before{content:"·";margin-right:7px;opacity:.55}
.xh-tab.on{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 12px 26px -12px rgba(0,0,0,.6)}
.xh-tab.on .xh-tic{background:var(--g-gold)}
.xh-tab.on i{color:var(--tx2)}
/* ── NỘI DUNG KÉO NGƯỢC LÊN ĐÈ TRÊN NỀN TỐI ── */
/* Kéo ngược lên đúng bằng chiều cao của hàng chip + bục, để chân bục hạ xuống sát đáy vùng
   tối. Lệch con số này là bục hoặc trôi xuống nền trắng, hoặc đâm lên đè vào hai thẻ chọn bảng. */
.xh-noi{position:relative;z-index:3;margin-top:-357px}
.xh-ky{display:flex;justify-content:center;gap:8px;margin:0 0 16px}
.xh-chip{padding:6px 16px;border-radius:999px;font-size:13px;font-weight:700;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55)}
.xh-chip:hover{text-decoration:none;background:rgba(255,255,255,.28)}
.xh-chip.on{background:var(--hot);border-color:var(--hot);color:var(--navy)}
.xh-luoi{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.xh-luoi{grid-template-columns:minmax(0,1fr);gap:0}}
/* ── BỤC TRAO GIẢI, đứng trên nền tối ──
   Hạng 1 giữa và cao nhất. Bậc bục có vệt tối ở chân (inset box-shadow) nên trông như khối
   đặc có bề dày, không phải một hình chữ nhật dán lên. */
.xh-buc{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:end;margin:0 0 14px}
.xh-b{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.xh-vuong{height:24px;font-size:21px;line-height:24px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.b1 .xh-vuong{animation:xh-nhun 2.4s ease-in-out infinite}
.xh-ten{margin-top:6px;font-size:13.5px;font-weight:700;color:#fff;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.b1 .xh-ten{font-size:15px}
.xh-so{font-size:19px;font-weight:700;color:#fff;line-height:1.15;margin-top:2px;white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.b1 .xh-so{font-size:23px;color:var(--gold2)}
.xh-so i{font-style:normal;font-size:.62em;font-weight:600;opacity:.78;margin:0 .06em 0 .1em}
.xh-be{display:grid;place-items:center;width:100%;margin-top:8px;border-radius:12px 12px 0 0;
  font-weight:800;color:#fff;box-shadow:inset 0 -5px 0 rgba(0,0,0,.16)}
.b1 .xh-be{height:66px;font-size:34px;background:linear-gradient(180deg,#F5C843,#D9A52A);color:#5B3F05}
.b2 .xh-be{height:48px;font-size:28px;background:linear-gradient(180deg,#D8E1EA,#A9B6C4);color:#2B3F53}
.b3 .xh-be{height:40px;font-size:26px;background:linear-gradient(180deg,#E2B892,#B98155);color:#4A2C12}
.xh-be.trong{height:32px;font-size:17px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.6);box-shadow:none}
/* Vòng tròn chữ tắt: viền dày + quầng sáng, hạng nhất to hẳn và ăn quầng vàng */
.xh-av{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:64px;height:64px;border-radius:50%;background:var(--g-btn);color:#fff;
  font-size:21px;font-weight:800;border:3px solid #CDD6DE;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.b1 .xh-av{width:86px;height:86px;font-size:28px;border-color:#F5C843;
  background:linear-gradient(145deg,#F5C843,#C58F0E);color:#4A2E05;
  box-shadow:0 0 0 5px rgba(245,200,67,.26),0 14px 30px -8px rgba(0,0,0,.55)}
.b2 .xh-av{background:linear-gradient(145deg,#D8E1EA,#93A3B4);color:#26364A;border-color:#E3EAF1}
.b3 .xh-av{background:linear-gradient(145deg,#E2B892,#A97244);color:#40240E;border-color:#E8C6A6}
/* ── THẺ CỦA BẠN — nền gradient, nổi hẳn khỏi mọi thứ khác trên màn ──
   Ba hạng đầu thì đổi sang gradient vàng: người đang đứng trên bục nhìn thấy mình cũng vàng. */
.xh-toi{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:18px;
  border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--text),var(--mid));
  box-shadow:0 16px 36px -16px rgba(0,0,0,.55)}
.xh-toi.vang{background:linear-gradient(135deg,#B8860B,#F5C843);color:#3A2A05}
.xh-toi.chua{background:linear-gradient(135deg,#4C5661,#727E8B)}
/* Ô hạng: bề ngang TỰ CO THEO CHỮ, không khoá cứng 56px nữa (anh Ba bắt được 26/09/2026).
   Khoá 56px thì lòng ô chỉ còn 52px, mà chữ "hạng của bạn" cần đúng 52px — vỡ làm hai dòng,
   dòng "bạn" tụt xuống ép sát đáy, đuôi chữ ạ chạm viền. Nay chữ để nowrap và ô nở ra vừa đủ,
   min-width giữ ô vuông khi hạng chỉ một chữ số.
   line-height 1.25 cho phần chữ: để 1 thì đuôi các chữ ạ ậ ị bị viền cắt ngang. */
.xh-hcap{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;
  min-width:56px;height:56px;padding:0 9px;border-radius:15px;background:rgba(255,255,255,.22);
  color:inherit;border:2px solid rgba(255,255,255,.5);line-height:1}
.xh-hcap b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.xh-hcap i{font-style:normal;font-size:9px;font-weight:700;opacity:.85;margin-top:2px;
  white-space:nowrap;line-height:1.25}
.xh-toi .xh-av{width:54px;height:54px;font-size:18px;border-width:3px;
  border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.2);box-shadow:none}
.xh-toi-n{flex:1;min-width:0}
.xh-toi-n > b{display:block;font-size:17px}
.xh-toi-n > b em{font-style:normal;font-size:13px;font-weight:500;opacity:.85}
.xh-toi .btn{flex:none;background:#fff;color:var(--deep);border-color:#fff}
.xh-toi.vang .btn{background:#3A2A05;color:#fff;border-color:#3A2A05}
.xh-muc{display:block;font-size:13px;opacity:.92;margin-top:3px}
.xh-muc b{display:inline;font-size:inherit;color:var(--gold2)}
.xh-toi.vang .xh-muc b{color:#3A2A05;font-weight:800}
.xh-nhat{font-weight:700}
/* Thanh so sánh: chạy từ xanh sang vàng — càng gần đích càng ngả vàng */
/* display:block là BẮT BUỘC, không phải cho gọn: bên bảng xếp hạng của giáo viên thanh này
   dựng bằng thẻ <span>, mà thẻ inline thì trình duyệt bỏ qua height — thanh phình thành một
   vệt tròn khổng lồ tràn khắp hàng (anh Ba 25/09/2026: "lỗi tùm lum"). */
.xh-thanh{display:block;height:8px;border-radius:999px;background:var(--kbg);overflow:hidden;margin-top:7px;
  border:1px solid var(--ln)}
.xh-thanh i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mid),var(--hot))}
.xh-toi .xh-thanh{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)}
.xh-toi .xh-thanh i{background:linear-gradient(90deg,#FFE28A,#fff)}
/* ── Danh sách hạng 4 trở đi ── */
.xh-ds{background:#fff;border:1px solid var(--ln);border-radius:16px;overflow:hidden;
  box-shadow:0 10px 30px -18px rgba(22,32,46,.45)}
.xh-hang{display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;align-items:center;
  gap:11px;padding:9px 14px;border-bottom:1px solid var(--ln)}
.xh-hang:last-child{border-bottom:none}
.xh-hang.toi{background:var(--kbg)}
.xh-n{text-align:center;font-size:17px;font-weight:800;color:var(--tx2);
  font-family:"IBM Plex Mono",monospace;line-height:1}
.xh-hang .xh-av{width:38px;height:38px;font-size:13px;border-width:2px;border-color:#E3EAF1;
  box-shadow:none}
.xh-hang-n{min-width:0}
.xh-hang-n b{display:block;font-size:14px;font-weight:600;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xh-hang-n em{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;
  background:var(--deep);border-radius:999px;padding:1px 8px;margin-left:5px}
.xh-hang-n .xh-thanh{height:6px;margin-top:5px}
.xh-hang-s{font-size:13.5px;font-weight:700;color:var(--navy);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.xh-rong{text-align:center;padding:34px 20px;margin-bottom:14px;color:#fff;
  background:rgba(255,255,255,.12);border-radius:16px}
.xh-rong b{display:block;font-size:16px;color:#fff}
.xh-rong span{display:block;font-size:13px;color:rgba(255,255,255,.8);margin-top:5px}
.xh-itnguoi{margin:0;padding:28px 18px;text-align:center;font-size:13px;color:var(--tx2);
  background:#fff;border:1px solid var(--ln);border-radius:16px}
.xh-chan{font-size:11.5px;color:var(--tx2);line-height:1.55;margin:16px auto 0;text-align:center}
/* ── CHUYỂN ĐỘNG ──
   Bục nhô lên lệch nhịp nhau, thanh chạy tới đích. Ai tắt hiệu ứng trong máy thì tắt sạch. */
@keyframes xh-len{from{transform:translateY(20px);opacity:0}}
@keyframes xh-chay{from{width:0}}
@keyframes xh-nhun{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.xh-b{animation:xh-len .5s cubic-bezier(.2,.8,.2,1) both}
.xh-b.b2{animation-delay:.05s}.xh-b.b3{animation-delay:.1s}.xh-b.b1{animation-delay:.16s}
.xh-thanh i{animation:xh-chay .9s cubic-bezier(.2,.8,.2,1) both}
.xh-ds .xh-hang:nth-child(2) .xh-thanh i{animation-delay:.06s}
.xh-ds .xh-hang:nth-child(3) .xh-thanh i{animation-delay:.12s}
.xh-ds .xh-hang:nth-child(4) .xh-thanh i{animation-delay:.18s}
.xh-ds .xh-hang:nth-child(5) .xh-thanh i{animation-delay:.24s}
.xh-ds .xh-hang:nth-child(n+6) .xh-thanh i{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){
  .xh-b,.xh-vuong,.xh-thanh i,.xh-tia{animation:none}
}
/* ── APP ĐIỆN THOẠI ── nền tối thấp lại, chữ lớn giấu đi (thanh app đã ghi tên màn) */
@media(max-width:560px){
  .xh-to{display:none}
  .xh-dau{padding-top:14px;padding-bottom:352px}
  .xh-noi{margin-top:-340px}
  .xh-tabs{gap:8px}
  .xh-tab{padding:4px 13px 4px 4px;gap:7px}
  .xh-tic{width:26px;height:26px;font-size:13px}
  .xh-tab b{font-size:13.5px}
  .xh-tab i{display:none}
  .xh-ky{gap:6px;margin-bottom:14px}
  .xh-chip{padding:5px 13px;font-size:12.5px}
  .xh-buc{gap:6px}
  .xh-av{width:54px;height:54px;font-size:18px}
  .b1 .xh-av{width:72px;height:72px;font-size:23px}
  .xh-ten{font-size:12.5px}.b1 .xh-ten{font-size:14px}
  .xh-so{font-size:16px}.b1 .xh-so{font-size:20px}
  .b1 .xh-be{height:58px;font-size:29px}
  .b2 .xh-be{height:44px;font-size:24px}
  .b3 .xh-be{height:36px;font-size:22px}
  .xh-toi{flex-wrap:wrap;padding:12px}
  .xh-toi .btn{width:100%}
  .xh-hang{grid-template-columns:28px 34px minmax(0,1fr) auto;gap:9px;padding:9px 12px}
}
.segbar .segra{margin-left:auto;color:var(--deep);font-weight:600}
.segbar .segra:hover{text-decoration:underline}
.tabbar{display:none}
.caidat{display:none}
.mhead,.mback,.mtitle{display:none}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .deskonly-ib{display:none}
  nav.top .navmenu, nav.top .burger, nav.top .navtog{display:none}
  nav.top .in{padding:8px 16px;gap:10px}
  nav.top .brand b{font-size:16px}
  footer, .frail{display:none}

  .mhead{display:flex;align-items:center;gap:9px;margin-left:auto}
  .mback{display:flex;align-items:center;justify-content:center;width:32px;height:32px;
    flex-shrink:0;color:var(--navy);margin-left:-4px}
  .mtitle{display:block;font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:-.012em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .mico{width:32px;height:32px;border-radius:50%;background:var(--kbg);display:grid;
    place-items:center;color:var(--deep);flex-shrink:0}
  .mback svg,.mico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round}

  /* ── dải gợi ý lưu ra màn hình chính, nằm ngay trên thanh tab ── */
  .caidat[hidden]{display:none !important}
  .caidat{position:fixed;left:0;right:0;z-index:59;display:flex !important;align-items:center;gap:11px;
    bottom:calc(64px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--ln);padding:11px 14px;
    box-shadow:0 -6px 18px -8px rgba(15,58,92,.22);
    animation:cdlen .22s ease-out}
  @keyframes cdlen{from{transform:translateY(100%)}to{transform:none}}
  .cd-ic{width:38px;height:38px;border-radius:9px;flex-shrink:0;object-fit:cover;
    background:var(--g-btn)}
  .cd-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .cd-tx b{font-size:13px;font-weight:600;color:var(--navy);line-height:1.3}
  .cd-tx span{font-size:11.5px;color:var(--tx2);line-height:1.4}
  .cd-tx b, .cd-tx span{overflow-wrap:anywhere}
  .cd-sh{width:13px;height:13px;vertical-align:-2px;color:var(--deep)}
  .caidat .btn{flex-shrink:0;padding:8px 15px}
  .cd-dong{background:none;border:none;color:var(--tx2);font-size:15px;line-height:1;
    padding:6px;cursor:pointer;flex-shrink:0}
  body.cocaidat{padding-bottom:calc(140px + env(safe-area-inset-bottom))}

  /* bảng hướng dẫn ba bước cho iPhone */
  .cdhd{position:fixed;inset:0;z-index:80;background:rgba(15,40,58,.55);
    display:flex;align-items:flex-end;justify-content:center;padding:16px;
    animation:cdmo .18s ease-out}
  .cdhd[hidden]{display:none}
  @keyframes cdmo{from{opacity:0}to{opacity:1}}
  .cdhd-hop{position:relative;background:#fff;border-radius:14px;padding:20px 18px 16px;
    width:100%;max-width:420px;max-height:82vh;overflow:auto;
    margin-bottom:calc(56px + env(safe-area-inset-bottom));
    box-shadow:0 18px 44px -14px rgba(15,40,58,.5);animation:cdlen .24s ease-out}
  .cdhd-x{position:absolute;top:10px;right:10px;background:none;border:none;
    color:var(--tx2);font-size:16px;padding:7px;cursor:pointer;line-height:1}
  .cdhd-ic{width:52px;height:52px;border-radius:12px;display:block;margin-bottom:11px;
    object-fit:cover;background:var(--g-btn)}
  .cdhd-hop > b{display:block;font-size:16.5px;color:var(--navy);line-height:1.3}
  .cdhd-p{margin:6px 0 15px;font-size:13px;color:var(--tx2);line-height:1.55}
  .cdhd-b{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
  .cdhd-b li{display:flex;gap:11px;align-items:flex-start;font-size:14px;
    color:var(--text);line-height:1.5}
  .cdhd-b .n{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--g-btn);
    color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;
    font-family:"IBM Plex Mono",monospace}
  .cdhd-b b{color:var(--navy);font-weight:600}
  .cdhd-b em{font-style:normal;color:var(--tx2);font-size:12.5px}
  .cdhd-mui{text-align:center;font-size:22px;color:var(--deep);margin-top:14px;
    animation:cdnhay 1.1s ease-in-out infinite}
  @keyframes cdnhay{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
  @media(prefers-reduced-motion:reduce){
    .cdhd-mui,.cdhd,.cdhd-hop,.caidat{animation:none}}

  .tabbar{display:grid;position:fixed;bottom:0;left:0;right:0;z-index:60;
    grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid var(--ln);
    padding-top:8px;
    padding-left:max(2px, env(safe-area-inset-left));
    padding-right:max(2px, env(safe-area-inset-right));
    padding-bottom:max(15px, calc(8px + env(safe-area-inset-bottom)));
    box-shadow:0 -2px 12px rgba(15,58,92,.07)}
  .tabitem{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
    font-size:10.5px;line-height:1.2;color:#6B8598;padding:2px 1px;font-weight:600}
  .tabitem svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round}
  .tabitem.on{color:var(--deep)}
  @media(min-width:600px){.tabbar{padding-left:calc(50% - 300px);padding-right:calc(50% - 300px)}.tabitem{font-size:11.5px}.tabitem svg{width:24px;height:24px}}
  .tabitem.on svg{stroke-width:2.3}
  .tabitem:hover{text-decoration:none}
  body{padding-top:env(safe-area-inset-top);
    padding-bottom:max(76px, calc(69px + env(safe-area-inset-bottom)))}
  /* máy có khuyết đỉnh: khi xoay ngang, chừa hai mép cho nội dung */
  .wrap{padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right))}
  main{padding-bottom:6px}

  /* thanh chuyển mục trong tab Tin tức và Cần duyệt */
  .segbar{display:flex;background:var(--kbg);border-radius:10px;padding:3px;gap:3px;
    margin:0 0 18px}
  .segbar a{flex:1;text-align:center;font-size:13px;font-weight:600;padding:8px 4px;
    border-radius:8px;color:var(--tx2)}
  .segbar a.on{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,58,92,.13)}
  .segbar a:hover{text-decoration:none}
}
/* trên máy tính thanh chuyển mục thành hàng liên kết gọn */
@media (min-width:861px) and (pointer:fine){
  /* ── khu quản trị: menu dọc bên trái, nội dung bên phải ── */
  main.qt{max-width:1400px;display:grid;grid-template-columns:216px minmax(0,1fr);gap:0 34px;align-items:start}
  main.qt .anav{display:none}            /* dải ngang cũ chỉ còn cho điện thoại */
  main.qt .qtbody{min-width:0}
  main.qt .qtbody > section:first-child{border-top:none}
  .qtside{position:sticky;top:64px;max-height:calc(100vh - 64px);overflow:auto;
    padding:26px 14px 26px 0;border-right:1px solid var(--ln);display:flex;flex-direction:column;gap:2px}
  .qts-nhom{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--tx2);margin:16px 0 5px 12px}
  .qts-nhom:first-child{margin-top:0}
  .qts-a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:7px;font-size:13.5px;
    font-weight:600;color:var(--tx2);line-height:1.3}
  .qts-a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;opacity:.85}
  .qts-a:hover{background:var(--bg);color:var(--deep);text-decoration:none}
  .qts-a.on{background:var(--bg);color:var(--deep);box-shadow:inset 3px 0 0 var(--deep)}
  .qts-a.ra{color:#8E2A1E;margin-top:4px}
  .qts-so{margin-left:auto}
}
/* Máy tính hẹp (861–1180px): có cột menu thì hai cột nội dung + hồ sơ không đủ chỗ,
   ô nhập bị cắt chữ — xếp hồ sơ xuống dưới, bảng rộng ra hết cỡ. */
@media (min-width:861px) and (max-width:1180px) and (pointer:fine){
  main.qt{grid-template-columns:196px minmax(0,1fr);gap:0 22px}
  main.qt .split{grid-template-columns:minmax(0,1fr)}
  main.qt .hoso{position:static}
  main.qt .tbl .pill{min-width:0}
}
@media (min-width:861px) and (pointer:fine){
  .segbar{display:flex;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--ln)}
  .segbar a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--tx2);
    border-bottom:2px solid transparent;margin-bottom:-1px}
  .segbar a.on{color:var(--deep);border-bottom-color:var(--deep)}
  .segbar a:hover{text-decoration:none;color:var(--deep)}
}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .dr{grid-template-columns:100px minmax(0,1fr);gap:10px;font-size:13.5px}
  /* Thẻ khoá học: ảnh bìa lớn là ô trống vô nghĩa trên điện thoại.
     Đổi sang hàng ngang — cao 96px thay vì 300px. */
  .grid{grid-template-columns:1fr;gap:10px}
  .cbody{padding:14px 16px 16px;gap:6px}
  .ctitle{font-size:16px}
  .cexc{font-size:13.5px}
  .pnew{font-size:18px}


  /* Khối gọn lại */
  section{padding:26px 0}
  h1.st,h2.st{font-size:19px;margin-bottom:13px}
  .trial{padding:18px 20px;gap:14px}
  .trial h3{font-size:17px}
  footer{margin-top:30px}
  .fgrid{grid-template-columns:1fr;gap:20px;padding:22px 20px 16px}
  .fmeta{align-items:flex-start;text-align:left}
  .fzalo{flex:1;justify-content:center}

  /* Điện thoại: giữ ảnh DỌC như trên máy tính, thu nhỏ và cho chữ chảy quanh.
     Cắt tròn thì cùng một tấm ảnh không thể vừa đẹp ở hai khung. */
  .hero{padding:24px 0}
  .hero .in{display:block}
  .hero .hchu{display:contents}          /* bỏ khối bọc để chữ chảy quanh ảnh nổi */
  .hphoto{float:right;width:126px;aspect-ratio:4/5;height:auto;border-radius:10px;
    margin:4px 0 10px 15px;font-size:40px;shape-outside:inset(0 round 10px)}
  .hero h1{font-size:25px;margin-bottom:10px;max-width:none}
  .hero p{font-size:14.5px;line-height:1.65;margin-bottom:11px}
  .hero .cred{clear:none}
  .hero .morelink{clear:both;display:block;padding-top:4px}
  /* Khối nổi bật: nút không chiếm riêng một dòng — nằm cùng hàng với nhãn nhỏ
     (nhãn trái, nút phải), tiêu đề và mô tả trải đủ hai cột bên dưới. */
  .hero.nbat .hchu{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .hero.nbat .kick{grid-column:1;grid-row:1;margin:0}
  .hero.nbat .nb-nut{grid-column:2;grid-row:1;padding:9px 16px;font-size:13.5px;border-radius:7px}
  .hero.nbat h1,.hero.nbat p{grid-column:1/-1}
  .hero.nbat h1{margin-top:10px}
  .hero.nbat p:last-of-type{margin-bottom:0}
  .nb-anh{float:none;width:100%;margin:0 0 16px;border-radius:9px}
  .hero.nbat h1{max-width:none}
  .stats{gap:20px}
  .stats b{font-size:19px}
}

.stack{display:flex;flex-direction:column;gap:16px}

/* ── BỀ RỘNG CHUẨN KHU QUẢN TRỊ (/trangquanly) ──
   Cột nội dung .qtbody luôn rộng như nhau ở mọi màn (1110px khi cửa sổ 1512), nên
   chỗ nào cần hẹp hơn thì dùng ĐÚNG một trong ba lớp dưới đây — đừng viết
   max-width bằng số vào markup nữa, mỗi màn một số là lý do các màn trông lệch nhau.

   .qt-hep  (640px)  biểu mẫu một cột, hộp kết quả một khối, đoạn chữ dài phải đọc:
                     Chuyển nhượng thẻ, ô mã đặt lại mật khẩu, dòng lưu ý cuối trang.
                     640px ≈ 90 ký tự một dòng — rộng hơn là mắt nhảy dòng bị mỏi.
   .qt-vua  (880px)  biểu mẫu có hàng hai ô (.pgrid.p2): hai ô còn đủ ~420px nên
                     ngày tháng, ô chọn, số tiền không bị bóp.
   .qt-2cot          biểu mẫu chia hai khối cạnh nhau khi cửa sổ ≥1240px, để cả
                     nút Lưu nằm trong một màn hình mà không phải cuộn. Dưới mức đó
                     tự về một cột; đeo kèm .qt-vua để lúc một cột vẫn có trần rộng.
                     Hàng nút .abar luôn chạy hết bề ngang.
   Không dùng overflow trên cột của .qt-2cot: bảng gợi ý ô tìm học viên (.timhv-ds)
   nổi tuyệt đối ra ngoài khung, gặp overflow là bị cắt ngang. */
.qt-hep{max-width:640px}
.qt-vua{max-width:880px}
.qt-2cot{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.qt-2cot > .abar{grid-column:1 / -1}
/* Khối tuỳ chọn gập nằm ngang hết bề ngang, dưới cả hai cột — nó là phần phụ,
   không nên chen vào một cột làm cột kia trống hoác. */
.qt-2cot > details.tuychon{grid-column:1 / -1}
@media (min-width:1240px) and (pointer:fine){
  .qt-vua.qt-2cot{max-width:none}
  /* cột trái rộng hơn vì chứa các hàng hai ô, cột phải chỉ một cột ô */
  .qt-2cot{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
}

/* Hàng liên kết mảnh ở cuối trang Tài khoản. Thay cho khung menu bốn dòng cũ:
   ba mục Thông tin · Lớp học · Bảo mật đã nằm ở thanh chuyển mục ngay trên,
   ở đây chỉ còn những lối đi không có chỗ nào khác dẫn tới. */
.cuoitk{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;
  margin-top:28px;padding-top:15px;border-top:1px solid var(--ln);font-size:13.5px}
.cuoitk a{color:var(--deep);font-weight:500}
.cuoitk a.ra{margin-left:auto;color:#B4453C}

/* thanh tiến độ nhỏ trong bảng học viên */
.tdo{display:inline-block;vertical-align:middle;width:52px;height:5px;border-radius:3px;
  background:var(--bg);overflow:hidden;margin-right:7px}
.tdo i{display:block;height:100%;background:var(--g-btn)}
.tdo-s{font-size:12px;color:var(--tx2)}

/* nhãn phân loại lớp: học ở đâu · nhóm hay kèm riêng */
.nlop{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.nlop.nho{margin:2px 0 8px}
.nl{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap;
  border:1px solid transparent}
.nlop.nho .nl{font-size:10.5px;padding:2px 7px}
.nl.online{background:#E8F1FB;color:#1F5C93;border-color:#C4DCF2}
.nl.truc-tiep{background:#EAF6EF;color:#1B6B44;border-color:#BFE3CE}
.nl.ca-hai{background:#F2ECFB;color:#5A3E96;border-color:#DCCFF2}
.nl.k-nhom{background:var(--bg);color:var(--deep);border-color:var(--pale)}
.nl.k-rieng{background:#FFF3D6;color:#8A6A22;border-color:#EBD9A6}
/* Khoá/lớp đã gỡ khỏi trang bán — người đã mua vẫn giữ quyền dùng */
.nl-an{font-style:normal;display:inline-block;vertical-align:middle;
  background:#F3F0EC;color:#7A6A57;border-color:#E2DAD0}

/* ── Trang Tài khoản kiểu app ──
   Trên điện thoại dùng danh sách nhóm có biểu tượng thay cho thanh tab ngang:
   số lượng nằm gọn bên phải nên nhãn không bao giờ bị bẻ dòng. */
.mobonly{display:none}
.qtside{display:none}
@media (min-width:861px) and (pointer:fine){.qtside{display:flex}}

/* ═══════════ KHU QUẢN TRỊ — BẢNG MÀU RIÊNG (lớp .qt-mau trên <body>) ═══════════
   Trang bán đổi màu theo bảng màu cô chọn ở Cài đặt (cssMau sinh khối :root).
   Khu quản trị thì KHÔNG: giáo viên mở nó cả ngày, 17 site phải nhìn như nhau, nên
   ở đây chốt một bảng màu xanh chàm–thạch bản trung tính: nền lạnh dịu, chữ đậm rõ,
   màu chỉ dùng để CHỈ VIỆC (chàm = hành động, hổ phách = sắp tới hạn, đỏ ngói = đã quá).
   Đè được khối :root vì chọn theo body.qt-mau (một lớp + một thẻ), specificity cao hơn.
   Trang công khai không bao giờ mang lớp này nên không đổi một pixel nào. */
body.qt-mau{
  --navy:#16202E;--text:#243449;--deep:#2F4FAB;--mid:#4069C9;--light:#7C9BE0;
  --pale:#C3D3F2;--bg:#EFF3FB;--kbg:#E3EAFB;--ln:#DBE2EE;--tx2:#5A6A80;
  --gold:#9A7A2E;--gold2:#D8BD79;--hot:#E39A2B;
  --on-toi:#C3D3F2;--on-toi2:#9FB6EA;
  --g-btn:linear-gradient(135deg,#2F4FAB 0%,#4069C9 100%);
  --g-deep:linear-gradient(135deg,#16202E 0%,#243449 55%,#2F4FAB 100%);
  --g-soft:linear-gradient(135deg,#EFF3FB 0%,#DDE6F8 100%);
  --g-gold:linear-gradient(135deg,#E39A2B 0%,#D8BD79 100%);
  --g-cta:linear-gradient(135deg,#2F4FAB 0%,#4069C9 50%,#7C9BE0 100%);
  --rail:linear-gradient(90deg,#2F4FAB,#4069C9,#7C9BE0,#E39A2B,#9A7A2E);
  /* nền làm việc hơi lạnh để mọi thẻ trắng nổi lên thành từng lớp */
  background:#F4F6FB;color:#1B2634;
}
/* ── Nút chính: đặc, có bóng, nhấc lên khi trỏ vào ── */
body.qt-mau .btn:not(.ghost):not(.nguy){box-shadow:0 1px 2px rgba(22,32,46,.16),0 3px 8px rgba(47,79,171,.20)}
body.qt-mau .btn:not(.ghost):not(.nguy):hover{filter:brightness(1.07);box-shadow:0 2px 4px rgba(22,32,46,.18),0 6px 16px rgba(47,79,171,.26)}
body.qt-mau .btn.ghost{background:#fff;border-color:#B9C7E4;color:#2F4FAB}
body.qt-mau .btn.ghost:hover{background:#EFF3FB;border-color:#2F4FAB}
/* ── Menu dọc: mục đang mở có nền màu + vạch màu, nhìn một cái là biết đang ở đâu ── */
body.qt-mau .qts-a{transition:background-color .12s,color .12s}
body.qt-mau .qts-a:hover{background:#E9EEFA;color:#2F4FAB}
body.qt-mau .qts-a.on{background:#DFE7FA;color:#22397D;box-shadow:inset 3px 0 0 #2F4FAB}
body.qt-mau .qts-a.on svg{opacity:1}
body.qt-mau .qtside{border-right-color:#DCE3EF}
body.qt-mau .qts-nhom{color:#8494A8}
/* ── Ô đếm: chỉ tô màu khi thật sự có việc (số > 0, do boLoc quyết định), ô đang chọn tô đặc ── */
body.qt-mau .oso{box-shadow:0 1px 2px rgba(22,32,46,.05)}
body.qt-mau .oso-nut:hover{border-color:#9FB6EA;background:#F7F9FD}
body.qt-mau .oso.canh:hover{background:#FEF6E6;border-color:#DFC178}
body.qt-mau .oso.gap:hover{background:#FDEBE7;border-color:#DF9C8C}
body.qt-mau .oso-nut.on{box-shadow:0 2px 10px rgba(47,79,171,.30)}
/* ── Bảng: đầu bảng rõ, kẻ hàng dịu, trỏ vào sáng hẳn lên để mắt lần theo dòng dài ── */
body.qt-mau .tbl{box-shadow:0 1px 2px rgba(22,32,46,.05)}
body.qt-mau .tbl th{background:#EBF0FA;color:#4A5A72;border-bottom-color:#D3DCEC}
body.qt-mau .tbl tbody tr{transition:background-color .1s}
body.qt-mau .tbl tbody tr:nth-child(2n){background:#FAFBFE}
body.qt-mau .tbl tbody tr:hover{background:#E9EFFC}
body.qt-mau .tbl tr.hi{background:#FFF8E8}
body.qt-mau .tbl tr.hi:hover{background:#FDF1D8}

/* ── Ô nhập: viền sáng lên và có vòng mờ khi đang gõ, để biết con trỏ đang ở đâu ── */
body.qt-mau input:focus,body.qt-mau select:focus,body.qt-mau textarea:focus{
  border-color:#2F4FAB;box-shadow:0 0 0 3px rgba(47,79,171,.13)}
/* ── Nhãn trạng thái: "chưa chuyển khoản" trước đây dùng biến màu nên nhoè theo trang bán ── */
body.qt-mau .pill.pending{background:#E9EDF5;color:#4C5B72}
/* ── Tiêu đề khu vực: vạch màu bên trái để phân lớp thông tin, chỉ cho tiêu đề đầu trang ── */
body.qt-mau .qtbody > section > h2.st:first-child,
body.qt-mau .qtbody > section > h1.st:first-child{position:relative;padding-left:14px}
body.qt-mau .qtbody > section > h2.st:first-child::before,
body.qt-mau .qtbody > section > h1.st:first-child::before{content:"";position:absolute;left:0;
  top:.14em;bottom:.14em;width:4px;border-radius:3px;background:var(--g-btn)}
@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  /* bảng đã đổi thành thẻ xếp dọc thì bỏ kẻ hàng, kẻo thẻ này trắng thẻ kia xanh */
  body.qt-mau .tbl tbody tr:nth-child(2n){background:#fff}
}

.hsthe{display:flex;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid var(--ln)}
.hs-av{width:52px;height:52px;border-radius:50%;background:var(--g-btn);color:#fff;
  display:grid;place-items:center;font-size:21px;font-weight:700;flex-shrink:0}
.hs-tx{min-width:0;display:flex;flex-direction:column;gap:2px}
.hs-tx b{font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-.01em}
.hs-tx span{font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.apnhom{margin-bottom:18px}
.ap-td{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx2);margin:0 4px 7px}
.apds{border:1px solid var(--ln);border-radius:11px;background:#fff;overflow:hidden}
.aprow{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-bottom:1px solid var(--ln);font-size:15px;font-weight:500;color:var(--navy)}
.aprow:last-child{border-bottom:none}
.aprow:hover,.aprow:active{text-decoration:none;background:var(--bg)}
.aprow svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--deep);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ap-nhan{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-so{flex-shrink:0;min-width:22px;height:22px;padding:0 7px;border-radius:11px;
  background:var(--bg);color:var(--deep);font-family:"IBM Plex Mono",monospace;
  font-size:12px;font-weight:600;display:grid;place-items:center}
.ap-mt{flex-shrink:0;color:#C3D3DF;font-size:19px;line-height:1}
.aprow.ra{color:#B4453C}
.aprow.ra svg{stroke:#B4453C}
.aprow.ra .ap-mt{display:none}

.quaylai{display:inline-block;font-size:14px;font-weight:600;color:var(--deep);margin-bottom:14px}
.quaylai.mobonly{display:none}

@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .mobonly{display:block}
  .quaylai.mobonly{display:inline-block}
  .hsthe{padding-bottom:15px;margin-bottom:18px}
}

/* ô đã khoá — điền sẵn từ tài khoản, không cho sửa */
.dakhoa{background:var(--bg);color:var(--tx2);cursor:default}
.dakhoa:focus{border-color:var(--ln)}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  /* trên app, thanh tab dưới đáy đã ghi "Tài khoản" nên không cần tiêu đề nữa;
     thẻ hồ sơ rút gọn còn một dòng */
  .prof-head{margin-bottom:16px;padding-bottom:14px}
  .prof-av{width:44px;height:44px;font-size:17px}
  .prof-name{font-size:16px}
}
@media(max-width:520px){.cuoitk a.ra{margin-left:0}}

/* ô chỉ đọc — email đăng nhập */
.tinhkhoa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--ln);border-radius:5px;background:var(--kbg);
  font-size:15px;color:var(--tx2)}
.tinhkhoa b{color:var(--navy);font-weight:600;word-break:break-all}
.tinhkhoa i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--tx2)}
@media(max-width:520px){.tinhkhoa i{margin-left:0;flex-basis:100%}}
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:start}
.split-art{grid-template-columns:minmax(0,1fr) 320px}   /* trang bài viết: cột bài ≈ 68ch ở 1080px, cột phải cố định */
.demo-flag{background:var(--hot);color:var(--navy);font-size:11.5px;font-weight:700;text-align:center;padding:5px 12px}

@media (max-width:860px),((pointer:coarse) and (max-width:1023px)){
  .split,.qrbox,.two{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…): cột không nở theo nội dung rộng (nút, iframe) → không tràn ngang */
  /* trang bài viết: ảnh 600px trong bài không được kéo rộng cột (1fr = minmax(auto,1fr) sẽ nở theo ảnh) */
  .split-art{grid-template-columns:minmax(0,1fr)}
  /* điện thoại: hộp mua / Vào học lên TRÊN mục lục bài, không bắt kéo hết 12 bài mới thấy nút */
  .split .ben-mua{order:-1;position:static !important}
  .hero{padding:36px 0}
  .navlinks{gap:12px;font-size:12.5px}
  nav.top .in{flex-wrap:wrap;gap:8px}
}
/* ── Khối đầu trang dùng chung cho /khoa-hoc và /goi-tap ──
   Hàng 1: tên trang + phụ đề bên trái, thanh lọc bên phải (đáy thẳng hàng h1).
   Hàng 2: hai ý ngắn có biểu tượng + nút sang trang chéo. */
.phead{display:flex;flex-direction:column;gap:13px;margin:0 0 22px}
.phead-top{display:flex;flex-direction:column;gap:6px}
.phead h1.st{margin:0}
.phead-sub{color:var(--tx2);font-size:13.5px;line-height:1.5;margin:0}
.phead-dem{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tx2);white-space:nowrap}
.phead-y{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  border-top:1px solid var(--ln);padding-top:12px}
.pmeo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.pmeo li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:var(--tx2)}
.pmeo svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--deep);opacity:.85}
.phead-y .btn{flex:0 0 auto;white-space:nowrap}
/* Thanh lọc ở đầu trang: viên thuốc bo tròn hẳn, nền nhạt hơn, mục đang chọn nổi lên bằng
   nền trắng + bóng đổ mềm chứ không bằng viền (anh Ba 25/09/2026: "thiết kế cho đơn, mượt hơn").
   Có chuyển động 140ms khi đổi mục — bấm qua lại không thấy giật. */
.phead .segbar{margin:0;border:none;background:var(--kbg);border-radius:999px;padding:4px;gap:2px}
.phead .segbar a{display:inline-flex;align-items:center;gap:7px;border-bottom:none;margin-bottom:0;
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--tx2);
  white-space:nowrap;transition:background-color .14s,color .14s,box-shadow .14s}
.phead .segbar a:hover{color:var(--navy);background:rgba(255,255,255,.55)}
.phead .segbar a.on{background:#fff;color:var(--navy);box-shadow:0 2px 6px -1px rgba(15,58,92,.16)}
/* Ô đếm — mượn đúng hình dáng ô số đỏ "việc chờ" của khu quản trị, nhưng KHÔNG lấy màu đỏ:
   trong app này đỏ nghĩa là "có việc phải xử lý" (Quản trị · Đơn hàng · Cần duyệt). Số gói
   trong một mục là thông tin bình thường, tô đỏ là báo động giả, lần sau thấy đỏ thật lại nhờn. */
.segn{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 6px;
  border-radius:999px;background:rgba(15,58,92,.09);color:var(--tx2);font-style:normal;
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;line-height:1;
  transition:background-color .14s,color .14s}
.phead .segbar a.on .segn{background:var(--deep);color:#fff}
@media (min-width:861px) and (pointer:fine){
  /* thanh lọc nằm cùng hàng với h1, chạm cùng đường đáy */
  .phead-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
    row-gap:6px;column-gap:24px}
  .phead-top > h1.st{grid-column:1;grid-row:1}
  .phead-top > .phead-sub{grid-column:1;grid-row:2}
  .phead-top > .segbar{grid-column:2;grid-row:1;justify-self:end}
  .phead-top > .phead-dem{grid-column:2;grid-row:1;justify-self:end;padding-bottom:4px}
  .phead-y{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){
  .phead .segbar{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none;margin-top:3px}
  .phead .segbar::-webkit-scrollbar{display:none}
  .phead .segbar a{flex:1 0 auto;padding:8px 13px;justify-content:center}
}
/* Máy tính hẹp (861–1000px): đủ chỗ cho menu ngang nhưng không dư — với tài khoản
   giáo viên (thêm "Quản trị" + số đỏ) thanh bị đẩy tràn làm cả trang cuộn ngang.
   Thu khoảng cách, cỡ chữ và rút bớt phần đuôi của nhãn — không ẩn liên kết nào. */
@media (min-width:861px) and (max-width:1000px) and (pointer:fine){
  nav.top .in{gap:10px;min-width:0}
  .brand{min-width:0;flex-shrink:1}
  .brand b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
  .navmenu{gap:10px;min-width:0;flex-wrap:nowrap}
  .navmenu a{font-size:13.5px;white-space:nowrap}
  /* số đỏ tròi ra phải 14px — gap hẹp thì nó đè lên chữ mục kế bên */
  .navmenu .nav-qt{margin-right:9px}
  .nav-dai{display:none}
  .navtim{width:29px;height:29px}
  .navtim svg{width:15px;height:15px}
  .navcta{padding:7px 12px;font-size:12px}
  .navsep{height:18px}
}

/* ── Lịch học phía học viên (mô hình Kinafit: dải ngày, dải trạng thái gói, thẻ buổi) ── */
.lh-dau{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.lh-loai{display:flex;gap:8px;flex-wrap:wrap}
.lh-loai a{padding:8px 16px;border-radius:999px;background:var(--bg);color:var(--navy);font-weight:700;font-size:13px;text-decoration:none;border:1px solid var(--ln)}
.lh-loai a.on{background:var(--g-gold);border-color:transparent;color:var(--navy);box-shadow:0 6px 16px -8px rgba(205,168,95,.9)}
.lh-thang{display:flex;align-items:center;gap:10px;font-size:15px;margin-bottom:8px}
.lh-pick{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--ln);background:#fff;display:grid;place-items:center;font-size:15px;cursor:pointer}
.lh-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.lh-homnay{margin-left:auto;font-size:13px;color:var(--deep);text-decoration:none;font-weight:600}
.lh-tuan{display:flex;align-items:center;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.lh-tuan::-webkit-scrollbar{display:none}
.lh-nav{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--navy);font-size:24px;text-decoration:none;border-radius:50%}
.lh-nav:hover{background:var(--bg)}
.lh-ngay{flex:1 0 46px;max-width:64px;height:60px;border-radius:12px;background:#fff;border:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--navy);text-decoration:none}
.lh-ngay b{font-size:16px;font-variant-numeric:tabular-nums}
.lh-ngay span{font-size:11px;color:var(--tx2)}
.lh-ngay.nay{border-color:var(--gold)}
.lh-ngay.on{background:var(--g-gold);border-color:transparent;color:var(--navy)}
.lh-ngay.on span{color:var(--navy);font-weight:700}
.lh-goi{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 14px;border-radius:10px;border:1px solid var(--ln);background:var(--bg);margin-bottom:16px;font-size:14px}
.lh-goi-ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:700;flex:none;background:#fff;color:var(--navy)}
.lh-goi-tx{flex:1;min-width:200px}
.lh-goi-tx b{display:block;font-weight:700}
.lh-goi-tx small{display:block;color:var(--tx2);font-size:12.5px;margin-top:1px}
.lh-goi.ok{background:#F1FAF3;border-color:#BFE6CB}.lh-goi.ok .lh-goi-ic{background:#DDF3E3;color:#15803d}
.lh-goi.over{background:#FFF5F5;border-color:#F3C4C4}.lh-goi.over .lh-goi-ic{background:#FBE1E1;color:#b91c1c}
.lh-goi.hold{background:#FFF9E8;border-color:#F3DFA3}.lh-goi.hold .lh-goi-ic{background:#FBEFC7;color:#a16207}
.lh-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lhc{background:#fff;border:1px solid var(--ln);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(15,58,92,.04)}
.lhc h3{margin:0;font-size:15px;line-height:1.35;text-wrap:pretty}
.lhc-gv{display:flex;align-items:center;gap:11px}
.lhc-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--g-btn);color:#fff;display:inline-grid;place-items:center;font-size:14px;font-weight:700;font-style:normal}
.lhc-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lhc-tx b{font-size:13.5px;font-weight:600}
.lhc-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);flex-wrap:wrap}
.lhc-st{margin-left:auto;font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lhc-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lhc-st.dang{color:#15803d}.lhc-st.sap{color:#e08a00}.lhc-st.qua{color:var(--tx2)}.lhc-st.huy{color:#b91c1c}
.lhc-nut{width:100%;padding:10px 14px;font-size:14px}
.lhc-cd{display:flex;align-items:center;gap:8px;font-size:13px;padding-top:8px;border-top:1px solid var(--ln);color:var(--tx2)}
.lhc-cdn{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy);font-size:13px}
.lhc-cdn b{font-weight:700}
.lhc-dang{background:linear-gradient(180deg,#F3FBF5 0%,#E6F6EA 100%);border-color:#9AD6AC;box-shadow:0 10px 26px -14px rgba(21,128,61,.4)}
.lhc-dang h3{color:#14532d}
.lhc-qua{background:#F6F8FA;opacity:.62;filter:saturate(.35)}
.lhc-huy{background:#FFF5F5;border-color:#F3C4C4;opacity:.85}
.lhc-huy h3{color:#991b1b;text-decoration:line-through;text-decoration-thickness:1px}
.lh-trong{text-align:center;padding:40px 16px 30px;color:var(--tx2);display:flex;flex-direction:column;align-items:center;gap:12px}
.lh-trong-ic{width:84px;height:84px;border-radius:50%;background:#fff;border:1px solid var(--ln);display:grid;place-items:center;font-size:36px}
.lh-trong p{max-width:48ch;font-size:14.5px;margin:0}
.lh-trong-nut{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lh-khong{padding:24px 0}
.kg-hv-td .kh-phu{white-space:normal}
.kg-canh{color:#b45309}
@media(max-width:1000px){.lh-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lh-grid{grid-template-columns:1fr}.lh-tuan{gap:4px}.lh-ngay{height:56px;flex-basis:38px}.lh-nav{width:22px;font-size:20px}.lh-goi{padding:10px 12px;gap:10px}.lh-goi-tx{min-width:200px}.lh-goi .btn{margin-left:42px}}

/* ── Điểm danh ── */
.dd-dau{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.dd-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px}
.dd-tong{font-size:14px;color:var(--tx2)}.dd-tong b{font-size:20px;color:var(--navy)}
/* GỠ khối CSS của lối chọn cũ (ba nút tròn Có mặt / Vắng / Báo nghỉ trong một khung viền).
   Từ 26/09/2026 ô điểm danh chỉ còn MỘT dấu tick, dựng bằng span chứ không phải radio — nhưng
   khối cũ vẫn bám vào .dd-chon và .dd-chon span, đẻ ra một cái khung viền thừa cùng một ô trống
   nằm chơ vơ bên phải chữ "Không đi". Mã chết mà vẫn vẽ ra thứ nhìn thấy được. */
.bh-dd{color:#1E5E3A}

/* ── form lớp: chọn loại lớp rồi tích gói ──
   Bộ chọn loại: segmented control (nền xám, ô đang chọn nổi trắng), kèm số gói mỗi loại.
   Danh sách gói: lưới thẻ 4 cột, ô đang tích đổi viền + nền màu chủ đạo. */
.loai-chon{display:inline-flex;align-self:flex-start;background:var(--kbg);border-radius:9px;padding:3px;gap:3px;margin:0}
.loai-o{position:relative;flex:none;display:block;padding:0;margin:0;border-radius:7px;cursor:pointer;color:var(--tx2)}
.loai-o input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.loai-o > span{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap}
.loai-o > span em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(15,58,92,.10);color:var(--tx2);display:inline-grid;place-items:center;line-height:1}
.loai-o:hover{color:var(--navy)}
.loai-o.on{color:var(--navy)}
.loai-o.on > span{background:#fff;box-shadow:0 1px 3px rgba(15,58,92,.13)}
.loai-o.on > span em{background:var(--deep);color:#fff}
.loai-o input:focus-visible+span{outline:2px solid var(--deep);outline-offset:-2px}
div.goi-nhom{display:flex;flex-direction:column;gap:14px}
div.goi-nhom[hidden]{display:none}
.goi-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1180px){.goi-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.goi-luoi{grid-template-columns:minmax(0,1fr)}}
.goi-o{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;margin:0;
  padding:11px 13px;border:1px solid var(--ln);border-radius:8px;background:#fff;cursor:pointer;
  transition:border-color .12s,background-color .12s,box-shadow .12s}
.goi-o input[type=checkbox]{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--deep);cursor:pointer}
.goi-o-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.goi-o-tx b{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35;overflow-wrap:anywhere}
.goi-o-tx small{font-size:12px;font-weight:400;color:var(--tx2);line-height:1.35}
.goi-o:hover{border-color:var(--pale);background:var(--bg)}
.goi-o.on{border-color:var(--deep);background:var(--kbg);box-shadow:inset 0 0 0 1px var(--deep)}
.goi-o.on .goi-o-tx b{color:var(--deep)}
.goi-o:has(input:focus-visible){outline:2px solid var(--deep);outline-offset:2px}
.goi-trong{margin:0;max-width:none;padding:14px 16px;border:1px dashed var(--ln);border-radius:8px;background:var(--bg);font-size:13px;color:var(--tx2);line-height:1.5}
/* Gán riêng học viên (lớp PT): hàng riêng dưới lưới, bề ngang vừa phải */
.gan-hv{padding-top:14px;border-top:1px dashed var(--ln)}
.gan-hv label{max-width:520px;gap:5px}
/* Không xoá được lớp: hộp lý do bên trái hàng nút, không tràn */
.abar .xoa-khong{flex:1 1 200px;max-width:max-content;min-width:0;font-size:12.5px;line-height:1.5;color:var(--tx2);
  padding:8px 12px;border:1px solid var(--ln);border-radius:6px;background:var(--bg)}
.abar .xoa-khong b{color:var(--navy);font-weight:600;white-space:nowrap}

/* ── Khoá combo ──
   Nhãn tím nhạt để phân biệt với khoá video; danh sách khoá bên trong là hàng có số
   thứ tự, ảnh bìa nhỏ, tên + số buổi, giá lẻ (trang bán) hoặc nút vào học (trang học). */
.badge.combo{background:#F2ECFB;color:#5A3E96}
.clv .clv-combo{font-weight:700;color:#5A3E96}
.nl-combo{font-style:normal;display:inline-block;vertical-align:middle;background:#F2ECFB;color:#5A3E96;border-color:#DCCFF2}
.bb-combo{margin-top:8px;font-size:13px;color:var(--tx2);line-height:1.5}
.bb-combo s{color:var(--tx2)}.bb-combo b{color:#1E5E3A}
.combo-ds{display:flex;flex-direction:column;border:1px solid var(--ln);border-radius:8px;overflow:hidden;background:#fff}
.combo-o{display:grid;grid-template-columns:26px 72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;
  border-bottom:1px solid var(--ln);color:inherit;text-decoration:none;transition:background-color .12s}
.combo-o:last-child{border-bottom:none}
.combo-o:hover{background:var(--bg)}
.combo-o.tiep{background:#FFFBEE;box-shadow:inset 3px 0 0 var(--hot)}
.combo-n{width:26px;height:26px;border-radius:50%;background:var(--bg);color:var(--tx2);display:grid;place-items:center;font-size:11.5px;font-family:"IBM Plex Mono",monospace}
.combo-o img,.combo-anh{width:72px;height:44px;border-radius:5px;object-fit:cover;background:var(--kbg);display:grid;place-items:center;color:var(--pale);font-size:18px}
.combo-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.combo-tx b{font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.3}
.combo-tx small{font-size:12px;color:var(--tx2);line-height:1.4}
.combo-tx small em{font-style:normal;color:#1E5E3A;font-weight:600}
.combo-tx .pbar{margin-top:4px;max-width:220px}
.combo-gia{font-size:13px;font-weight:600;color:var(--deep);white-space:nowrap}
@media(max-width:560px){.combo-o{grid-template-columns:22px 56px minmax(0,1fr);gap:10px;padding:11px 12px}
  .combo-o img,.combo-anh{width:56px;height:36px}.combo-gia{grid-column:3;justify-self:start;font-size:12.5px}}

/* ── Giáo viên ── ảnh tròn nhỏ + tên, dùng ở bảng quản trị, thẻ khoá, trang bán */
/* ══ BẢNG GIÁO VIÊN ══ (1.10.5)
   Bảy cột, mỗi cột một việc. Khoá bề ngang những cột có nội dung ngắn để cột Giáo viên và cột
   Bằng cấp — hai cột duy nhất có chữ dài — được ăn hết chỗ thừa; không khoá thì trình duyệt
   chia đều phần dư, cột "Khoá" hai chữ số cũng phình bằng cột tên. */
.gv-dau{border-top:none;padding-top:0;margin-bottom:14px}
.gvtbl td{height:66px}
/* Bằng cấp tóm tắt cho tới 120 ký tự nên nó là cột ngốn chỗ nhất. max-width:0 trên ô <td> là
   mẹo chuẩn của bảng: cột co về min-content rồi chữ thừa cắt bằng …, nhường chỗ cho cột tên và
   cột thao tác. Rê chuột vào vẫn đọc được đủ nhờ title. */
.gvtbl td:nth-child(2){max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gvtbl td:nth-child(3){width:168px}
.gvtbl td:nth-child(4),.gvtbl td:nth-child(5){width:76px}
.gvtbl td:nth-child(6){width:116px}
.gvtbl .pill{min-width:0}
/* Ô tên: đường dẫn dài cắt bằng … thay vì bẻ xuống ba dòng, để hàng nào cũng cao bằng nhau.
   Mẹo max-width:0 CHỈ dùng được cho ô <td>; đặt lên phần tử flex thì nó co về đúng 0 và tên
   giáo viên biến mất sạch (em vừa làm hỏng đúng kiểu đó rồi tự bắt lại 25/09/2026).
   Với flex thì min-width:0 mới là thứ cho phép co, còn cắt chữ để cho từng dòng con. */
.gv-ten{min-width:0;flex:1}
/* Tên và nhãn "chính" phải CÙNG MỘT DÒNG. Để tên là inline-block max-width:100% rồi thả nhãn
   ra sau thì nhãn bị đẩy xuống dòng dưới, hàng đó cao thêm 20px và cả bảng so le. */
.gv-ten > .gv-h{display:flex;align-items:center;gap:6px;min-width:0}
.gv-ten > .gv-h > a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-ten > .gv-h > .badge{flex:none}
.gv-ten > .hint{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Số điện thoại đăng nhập nằm dưới viên trạng thái — đây là thứ chủ site đọc lên cho giáo viên
   nghe qua điện thoại, nên để chữ đều (mono) cho khỏi đọc nhầm 0 với O.
   nowrap: để nó xuống dòng thì hàng đó cao thêm 20px và cả bảng so le. */
.gv-sdt{display:block;margin-top:3px;font-size:11.5px;color:var(--tx2);white-space:nowrap}
/* "Chưa có — tạo": vừa là câu trả lời vừa là đường đi, không cần thêm nút riêng. */
.gv-chua{font-size:12.5px;font-weight:600;color:var(--deep);
  text-decoration:underline;text-underline-offset:3px;text-decoration-style:dotted}
.gv-chua:hover{text-decoration-style:solid}
/* Cửa sổ hẹp (1024–1240px, hay gặp khi anh Ba kéo trình duyệt chỉ chiếm nửa màn): bảy cột không
   đủ chỗ, bảng trôi ngang 197px và cột THAO TÁC — chỗ có nút Sửa — rơi hẳn ra ngoài màn.
   Giấu hai cột Khoá và Lớp: đó là hai con số để ngó, còn nút Sửa là thứ phải bấm được.
   Mở hồ sơ ra vẫn thấy đủ hai số đó. */
@media(max-width:1240px){
  .gvtbl td:nth-child(4),.gvtbl td:nth-child(5),
  .gvtbl th:nth-child(4),.gvtbl th:nth-child(5){display:none}
}
.gv-o{display:flex;align-items:center;gap:10px}
.gv-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--kbg);color:var(--deep);font-style:normal;font-size:12px;font-weight:700;display:grid;place-items:center}
.cgv{display:flex;align-items:center;gap:7px;margin:-2px 0 8px;font-size:12.5px;color:var(--tx2)}
.cgv .gv-av{width:22px;height:22px;font-size:9px}
.gv-dong{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tx2)}
.gv-dong a{color:var(--navy);font-weight:600;text-decoration:none}.gv-dong a:hover{text-decoration:underline}
.gv-dong .gv-av{width:28px;height:28px;font-size:10px}
.gv-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:14px}
.gv-the{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:inherit;text-decoration:none}
.gv-the:hover{border-color:var(--pale);background:var(--bg)}
.gv-the .gv-av{width:52px;height:52px;font-size:15px}
.gv-the b{display:block;font-size:14.5px;color:var(--navy)}.gv-the small{font-size:12px;color:var(--tx2);line-height:1.4}

/* ── Khung lọc dùng chung (bloc) ── ô tóm tắt trên cùng luôn hiện, hàng tìm + sắp xếp, lọc chi tiết gập/mở
   TÊN LỚP: .bloc, KHÔNG phải .bl — .bl đã là hàng bài học trong khối "quản lý chương và
   bài học" phía trên. Trùng tên nên rule này (đứng sau) đè flex-direction của hàng bài học,
   làm danh sách bài ở /trangquanly/khoa-hoc/:id/bai-hoc xếp dọc thành từng cục (sửa 24/09/2026). */
.bloc{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-bottom:6px}
.bloc>*{width:100%;max-width:none;margin-left:0;margin-right:0}
/* Hàng ô lọc XUỐNG DÒNG, không cuộn ngang (24/09/2026: màn Thẻ tập có 10 ô, ô cuối
   "ĐÃ HUỶ" bị cắt cụt ở mép phải — cuộn trong hộp thì cô không biết là còn ô bị che).
   Lưới tự chia cột nên mọi ô rộng bằng nhau; nhãn dài được gãy dòng để không tràn ô. */
.bl-o{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px}
/* auto-FIT chứ không auto-fill: cột trống bị gộp lại nên các ô GIÃN RA cho đầy hàng,
   không để hở một khoảng trắng bên phải (anh Ba 24/09/2026: "cân đối nữa"). */
/* Ô lọc = ô số liệu bấm được (.oso.oso-nut), kiểu dáng nằm ở khối .oso phía trên.
   Ở ĐÂY nhãn và số nhỏ hơn ô số liệu thường (anh Ba 24/09/2026: "đừng to đùng đoàng,
   tối ưu trong 1 dòng") — nhãn 9.5px, số 16px — để chín ô lọc của màn Thẻ tập nằm gọn
   MỘT HÀNG ở cả 1512 và 1280. Bề ngang do lưới .bl-o chia, chiều cao thì CỐ ĐỊNH:

   MỌI Ô LỌC CAO ĐÚNG 50px (--qt-loc) ở mọi màn. Trước đây ô cao theo chữ nên màn Thẻ tập
   ra 45px (nhãn một dòng) mà màn Học viên ra 57px (nhãn "Sinh nhật tháng này" gãy hai
   dòng) — hai màn cạnh nhau lệch hẳn một tầng.

   CHỮ CÂN ĐỐI TRONG KHUNG (anh Ba 24/09/2026 — chính chỗ nhìn thấy "chữ không cân đối"):
   trước là đệm 5px trên / 5px dưới nên nhãn dính mép trên, số dính mép dưới, nhìn chật.
   Nay ô chỉ khai chiều cao và đệm ngang; nhãn + số canh giữa theo chiều dọc và bù 3px
   chân số theo đúng hai luật chung ở khối .oso phía trên. line-height để bằng px chẵn
   (11px cho nhãn, 17px cho số) nên tính ra được: khoảng trắng trên và dưới bằng nhau
   trong CẢ hai trường hợp nhãn một dòng và nhãn gãy hai dòng. */
.bl-o .oso-nut{min-width:0;min-height:var(--qt-loc);padding:0 var(--qt-mx);gap:0}
.bl-o .oso-n{white-space:normal;font-size:9.5px;line-height:11px;letter-spacing:.04em}
.bl-o .oso-v{font-size:15px;line-height:17px}
.bl-o .oso-v.so{font-size:16px;line-height:17px}
.bl-f{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.bl-f .bl-q{flex:1 1 240px;width:auto;min-width:0;border:1px solid var(--ln);border-radius:7px;font:inherit;margin:0}
form.bl-f .bl-sx{width:auto;border:1px solid var(--ln);border-radius:7px;font:inherit;background:#fff;margin:0}
.bl-nut{margin-left:auto;display:flex;gap:8px}
/* Cả hàng lọc — ô tìm, ô sắp xếp, mọi nút — cao đúng MỘT cỡ vừa (36px).
   Chiều cao, đệm và cỡ chữ nằm ở khối THANG KÍCH THƯỚC KHU QUẢN TRỊ cuối file;
   trước đây mỗi thứ tự khai một số nên hàng cao lô nhô 29 · 31 · 35 · 36 · 41px. */
.bl-mo[aria-expanded=true]{background:var(--kbg);border-color:var(--deep);color:var(--deep)}
.bl-ct{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-items:end;padding:12px;border:1px dashed var(--ln);border-radius:8px;background:var(--bg)}
.bl-ct-o{display:flex;flex-direction:column;gap:4px;margin:0}
.bl-ct-o span{font-size:11.5px;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em}
.bl-ct-o select,.bl-ct-o input{border:1px solid var(--ln);border-radius:6px;font:inherit;background:#fff}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
.bl-tt{font-size:12.5px;color:var(--tx2)}
@media(max-width:640px){.bl-nut{margin-left:0;flex-basis:100%}.oso-nut{min-width:96px;padding:7px 10px}.oso-nut .oso-v.so{font-size:15px}}

/* ── Hồ sơ học viên 360: dải việc cần làm, tab, khối tổng quan, sổ chăm sóc ── */
/* Dải việc cần làm — thứ quý nhất màn này khi có việc, nên có tiêu đề và viền rõ;
   khi rỗng thì teo còn một dòng chữ nhạt (trước đây chiếm nguyên một dải xanh). */
.hv-viec{display:flex;flex-direction:column;gap:5px;margin:0;
  padding:8px 11px 9px;border:1px solid var(--ln);border-radius:10px;background:#fff;
  box-shadow:0 1px 2px rgba(22,32,46,.05)}
.hv-viec-dau{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.hv-viec-them{font-weight:600;letter-spacing:.02em;text-transform:none;font-size:11.5px;color:#93A9B8}
/* Hai việc một hàng khi màn đủ rộng: bốn việc còn hai hàng, thanh tab lên trên mép màn hình */
/* ── Ô TÌM HỌC VIÊN (khu quản trị) ── */
.timhv{position:relative}
.timhv-khung{position:relative;display:block}
.timhv-khung input{width:100%;padding-right:34px}
.timhv-xoa{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  border:0;background:none;cursor:pointer;color:var(--tx2);font-size:19px;line-height:1;border-radius:5px}
.timhv-xoa:hover{background:var(--bg);color:#B03325}
.timhv-ds{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:264px;overflow:auto;
  /* Ô gõ co lại khi biểu mẫu thành hai cột (291px ở 1512, 256px ở 1280) — bảng gợi ý thì
     KHÔNG được co theo, nếu không tên học viên bị cắt ngay từ chữ thứ ba. Nó nổi tuyệt đối
     nên rộng hơn ô gõ vẫn nằm gọn trong bảng. */
  min-width:340px;
  background:#fff;border:1px solid var(--pale);border-radius:9px;box-shadow:0 10px 26px rgba(15,58,92,.16);padding:4px}
.timhv-m{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;
  padding:7px 9px;border:0;border-radius:6px;background:none;cursor:pointer;text-align:left;font:inherit}
.timhv-m:hover,.timhv-m.on{background:var(--kbg)}
.timhv-ma{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--tx2)}
.timhv-ten{font-size:13.5px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timhv-sdt{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tx2);white-space:nowrap}
.timhv-khong{padding:9px 10px;font-size:12.5px;color:var(--tx2);line-height:1.45}
/* ── Theo dõi điểm danh: chọn kỳ, dải số, dòng giải nghĩa, hai bảng, thanh tỉ lệ ── */
/* CHỌN KỲ — là NÚT, không phải số liệu (anh Ba 24/09/2026: ba ô chọn kỳ trông y hệt ô số liệu,
   người mở ra tưởng là dữ liệu). Nay là một cụm nút liền nhau cao 32px nằm trên một dòng
   với nhãn "Xem số liệu của" và khoảng ngày — nhỏ hẳn so với ô số liệu cao 52px ở dưới. */
.tdky{display:flex;flex-wrap:wrap;align-items:center;gap:7px 12px;margin:0 0 12px}
.tdky-n{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)}
/* CẢ HÀNG ĐÚNG MỘT CHIỀU CAO 36px và căn theo TÂM (anh Ba 25/09/2026: "cái nút Xem khoảng
   này nó lệch thế kia mà vẫn oki"). Trước đó hàng này có bốn chiều cao khác nhau — nút mốc
   nhanh 31px, hai ô ngày 42px, nút Xem 30px, chữ bên cạnh 21px — và tâm lệch nhau tới 15px,
   vì hai ô ngày bị bắt theo cỡ lớn của biểu mẫu còn nút thì theo cỡ nhỏ trong bảng.
   Đây là THANH CÔNG CỤ nên cả hàng theo cỡ vừa 36px của thang chung. */
.tdky-ds{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;background:var(--kbg);border-radius:9px}
.tdky-a{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap}
.tdky-a:hover{text-decoration:none;color:var(--deep);background:#fff}
/* Ô chọn khoảng tự do, đứng ngay cạnh hai mốc nhanh — cùng một hàng để cô thấy đây là
   hai cách chọn CÙNG một thứ, không phải hai bộ lọc chồng nhau. */
.tdky-f{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
/* flex-direction:row phải ghi RÕ. Quy tắc chung cho mọi thẻ label trong khu quản trị là xếp
   dọc, nên chỉ đổi display thôi thì nhãn vẫn đội lên đầu ô và cả hàng lệch tâm. */
.tdky-o{display:inline-flex;flex-direction:row;align-items:center;gap:7px;margin:0}
.tdky-o span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tx2)}
.tdky-o input{width:auto;min-width:0}
.tdky-p i{font-style:normal;color:var(--tx2)}
.tdky-a.on{background:var(--g-btn);color:#fff;box-shadow:0 1px 3px rgba(47,79,171,.28)}
.tdky-a.on:hover{color:#fff}
.tdky-p{font-size:12.5px;color:var(--tx2)}
/* Dòng giải nghĩa đặt ngay dưới dải số: nói rõ "lượt" là gì trước khi bắt người đọc hiểu % */
/* BỐN ô số liệu LUÔN đủ một hàng (lưới chung tự chia theo 210px nên ở 1100px ra 3+1,
   ô cuối đứng trơ một mình một tầng). Dưới 1000px thì 2×2 cho cân, không để 3+1.
   Dòng chú thích ở đây được xuống dòng thay vì cắt ba chấm — nó chính là chỗ nói đang đo gì. */
.tiles.td-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.tiles.td-3{grid-template-columns:1fr}}
/* ── Bảng xếp hạng bản GIÁO VIÊN (/trangquanly/xep-hang) ──
   Bản học viên có bục và vương miện vì học viên cần động lực; bản này là bảng tính vì giáo
   viên cần theo dõi. Chung dữ liệu, khác cách bày. */
.xq-thanh{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 14px}
.xq-nhom{display:inline-flex;align-items:center;gap:2px;padding:3px;background:var(--kbg);border-radius:9px}
.xq-n{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap}
.xq-n:hover{text-decoration:none;color:var(--deep);background:#fff}
.xq-n.on{background:var(--deep);color:#fff}
.xq-thanh .btn{margin-left:auto}
/* Mọi hàng cao đúng 56px. Ô tên là ô duy nhất có thể nở ra (tên dài xuống hai dòng) nên
   khoá lại một dòng, cắt bằng … — một hàng cao hơn là cả bảng lệch nhịp khi đọc dọc. */
.xqtbl td{height:56px}
/* width:100% là mẹo của bảng: cột nào để 100% thì nuốt hết chỗ thừa, các cột còn lại mới co
   về đúng bề ngang mình khai. Để 30% như trước thì trình duyệt chia đều phần dư cho mọi cột,
   cột Hạng và cột Mã số tập phình lên 180px. */
.xqtbl td.kh-ten{width:100%;min-width:180px;max-width:0}
.xqtbl td.kh-ten b,.xqtbl td.kh-ten .kh-phu{display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.xqtbl td:not(:last-child),.xqtbl th:not(:last-child){border-right:1px solid var(--ln)}
.xqtbl tbody tr:nth-child(2n),body.qt-mau .xqtbl tbody tr:nth-child(2n){background:#F5F8FC}
.xqtbl tbody tr:hover,body.qt-mau .xqtbl tbody tr:hover{background:#E9EFFC}
/* Khoá bề ngang từng cột, để riêng cột HỌ TÊN nuốt chỗ thừa. Không khoá thì bảng rộng
   1108px đem chia đều phần dư: cột Hạng và cột Mã số tập phình lên 180px mỗi cột, con số
   nằm lọt thỏm giữa ô trống (anh Ba 25/09/2026: "lỗi tùm lum"). */
/* Luật chung .khtbl td:first-child{min-width:180px} là dành cho các bảng có cột đầu là TÊN
   học viên. Bảng này cột đầu là số hạng, và hàng tiêu đề thứ hai có ô đầu là Mã số tập —
   cả hai bị ép 180px, đứng lọt thỏm giữa ô trống. Gỡ riêng cho bảng này. */
.khtbl.xqtbl td:first-child,.khtbl.xqtbl th:first-child{min-width:0}
.xq-h{width:70px}
.xqtbl td:nth-child(2){width:120px}
.xqtbl td:nth-child(5){width:132px}
.xqtbl td:nth-child(6){width:120px}
/* Ba hạng đầu ăn màu huy chương, cho khớp với bục bên bản học viên */
.xq-hc{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 7px;border-radius:8px;background:var(--kbg);color:var(--tx2);
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:700}
.xq-hc.h1{background:#E8B33C;color:#412402}
.xq-hc.h2{background:#C2CEDB;color:#2C3E50}
.xq-hc.h3{background:#D9A87C;color:#4A1B0C}
/* min-width chứ không phải width: cột Họ tên để width:100% nên nó nuốt hết chỗ thừa, các cột
   khác chỉ còn được cấp đúng bề ngang TỐI THIỂU — khai width ở đây là khai suông. */
.xq-so{min-width:230px}
.xq-so b{display:block;font-size:13.5px;font-weight:700;color:var(--navy);
  font-family:"IBM Plex Mono",monospace}
.xq-so .xh-thanh{margin-top:5px;max-width:210px}
/* ══ MÀN "LỚP CỦA TÔI" ══ (1.9.13)
   Một hàng = một buổi: cột giờ bên trái để mắt dò dọc theo thời gian, thân ở giữa, nút bên phải.
   Buổi của chính mình có vạch màu bên trái — không tô cả nền, vì cả trung tâm mà nền nào cũng
   tô thì lại thành không phân biệt được gì. */
.lct-nhan{margin:20px 0 8px;font-size:15px;font-weight:700;color:var(--navy)}
.lct-nhan:first-of-type{margin-top:6px}
.lct-ngay{margin:14px 0 6px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tx2)}
.lct-ds{display:flex;flex-direction:column;gap:8px}
.lct{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;
  border:1px solid var(--ln);border-left:4px solid transparent;border-radius:12px}
.lct-toi{border-left-color:var(--deep);background:linear-gradient(90deg,var(--kbg) 0%,#fff 22%)}
.lct-huy{opacity:.6}
.lct-dang{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
.lct-gio{flex:0 0 58px;display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.lct-gio b{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:700;color:var(--navy)}
.lct-gio span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--tx2)}
.lct-than{flex:1;min-width:0}
.lct-than h3{margin:0;font-size:14.5px;font-weight:700;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lct-phu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:3px;
  font-size:12px;color:var(--tx2)}
.lct-tt{font-weight:700;padding:1px 8px;border-radius:999px;background:var(--kbg);color:var(--tx2)}
.lct-tt-dang{background:var(--hot);color:var(--navy)}
.lct-tt-qua{background:transparent;padding:0}
.lct-tt-huy{background:#FDECEA;color:#8E2A1E}
.lct-ghi{margin:4px 0 0;font-size:12px;color:var(--tx2);max-width:none}
/* "chưa ai được đánh dấu có mặt" — lời nhắc, không phải lỗi, nên hổ phách chứ không đỏ. */
.lct-nhac{color:#8A6413;font-weight:600}
.bh-chua{font-style:normal;color:#8A6413}
.lct-nut{flex:0 0 auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
/* Ô chứa tin nhắn gửi học viên: phải NẰM TRONG TRANG mới chép được ở trình duyệt cũ
   (execCommand('copy') đòi ô đang hiển thị), nên giấu bằng kích thước 0 chứ không display:none. */
.lct-an{position:absolute;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none}
@media(max-width:700px){
  .lct{flex-wrap:wrap;gap:8px 12px}
  .lct-than{flex:1 1 calc(100% - 72px)}
  .lct-nut{flex:1 1 100%;justify-content:flex-start}
}
/* ══ Khối tài khoản trong hồ sơ giáo viên ══ */
/* Ô email là đường phụ nên xếp vào ngăn kéo: mở ra mới thấy, đóng lại thì màn Thêm giáo viên
   chỉ còn hai ô cần điền (anh Ba 25/09/2026: "tối ưu để gọn lại"). */
.gv-them{margin-top:10px}
.gv-them > summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:var(--deep);list-style:none}
.gv-them > summary::-webkit-details-marker{display:none}
.gv-them > summary::before{content:"+";display:grid;place-items:center;width:16px;height:16px;
  border-radius:50%;background:var(--kbg);font-weight:700;line-height:1}
.gv-them[open] > summary::before{content:"−"}
.gv-them > summary:hover{text-decoration:underline}
.gv-them > label{margin-top:10px}
.gv-sau{margin:-2px 0 2px;padding:12px 14px;border-radius:10px;background:var(--kbg);
  border:1px dashed var(--ln);font-size:12.5px;line-height:1.6}

/* Đường nhảy xuống khối tài khoản, đặt ngay trong câu mở đầu của trang. */
.gv-toi{font-weight:600;color:var(--deep);white-space:nowrap}
.gv-tk{margin-top:16px;scroll-margin-top:80px}
.gv-mo{color:#1E7A4D}
.gv-khoa{color:#8E2A1E}
.gv-mk{margin:0 0 14px;padding:13px 15px;border-radius:12px;
  border:1px solid var(--hot);background:#FFFCF4}
.gv-mk > b{display:block;font-size:14.5px;color:var(--navy)}
.gv-mk p{margin:4px 0 0;font-size:12.5px;color:var(--tx2);max-width:none}
.gv-mko{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:9px 0 2px}
.gv-mko span{font-family:"IBM Plex Mono",monospace;font-size:19px;font-weight:700;
  letter-spacing:.04em;color:var(--navy);padding:6px 12px;background:#fff;
  border:1px solid var(--ln);border-radius:8px}
/* ── Ba ô số liệu đầu bảng xếp hạng ──
   Mềm hơn ô .oso dùng chung: bo 16px, nền pha từ trắng sang một sắc nhạt, biểu tượng nằm
   trong ô bo tròn dẫn mắt. Ba sắc khác nhau để phân biệt ba con số mà không phải đọc nhãn.
   Màu ghi thẳng chứ không dùng biến — khu quản trị cố ý chốt một bảng màu chung cho cả 17
   bản cài, đúng như .oso.canh / .oso.gap vẫn làm. */
.xq-os{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.xq-o{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:16px;
  border:1px solid var(--ln);box-shadow:0 10px 24px -18px rgba(22,32,46,.55)}
.xq-o-bt{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  font-size:20px;line-height:1}
.xq-o-n{min-width:0}
.xq-o-nh{display:block;font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tx2)}
.xq-o-v{display:block;margin-top:1px;font-size:20px;font-weight:700;color:var(--navy);
  line-height:1.25;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xq-o-p{display:block;font-size:11.5px;color:var(--tx2);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xqo-nguoi{background:linear-gradient(135deg,#fff 0%,#EDF2FD 100%)}
.xqo-nguoi .xq-o-bt{background:#DCE6FA}
.xqo-gio{background:linear-gradient(135deg,#fff 0%,#EAF5F0 100%)}
.xqo-gio .xq-o-bt{background:#D5EBE0}
.xqo-dau{background:linear-gradient(135deg,#fff 0%,#FCF4E4 100%)}
.xqo-dau .xq-o-bt{background:#F6E5C2}
.xqo-dau .xq-o-v{color:#7A5C14}
@media(max-width:980px){.xq-os{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.xq-os{grid-template-columns:1fr}}
.tiles.td-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.td-4 .oso-p{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:1000px){.tiles.td-4{grid-template-columns:1fr 1fr}}
.td-gt{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--tx2)}
.td-gt b{color:var(--navy);font-weight:600}
/* Dải cảnh báo số liệu thiếu — có luôn nút đi tới chỗ điểm danh bù */
.td-bao{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:9px;padding:9px 13px;
  border:1px solid var(--ln);border-left:3px solid var(--pale);border-radius:8px;background:#fff;
  font-size:12.5px;line-height:1.5;color:var(--tx2)}
.td-bao b{color:var(--navy)}
.td-bao .btn{margin-left:auto;flex:none}
/* TÊN LỚP tự đặt tiền tố tdb-/tdm-: .canh là CỘT DÍNH của trang công khai (position:sticky)
   và .ok là DẢI BÁO KẾT QUẢ (nền xanh, viền trái) — dùng lại trần là dải này dính lên đầu
   màn hình và ba chấm chú giải nở thành ba khối xanh. */
.td-bao.tdb-canh{border-left-color:var(--hot);background:#FFFCF4}
.td-bao.tdb-canh b{color:#7A5C14}
.td-bao.tdb-ok{border-left-color:#2F9E6B;background:#F6FBF8}
.td-bao.tdb-ok b{color:#1E7A4D}
/* Bỏ LƯIỚI HAI CỘT cũ (anh Ba 24/09/2026: bảng Theo lớp có 2 dòng mà cột trái vẫn chiếm nửa
   màn, chừa mảng trắng cao gần 400px). Hai bảng dài ngắn không bao giờ bằng nhau — đặt cạnh
   nhau là luôn hở một bên — nên nay XẾP DỌC, bảng nào cũng được cả bề ngang: không còn chỗ
   trống nào ở mọi bề rộng, và bảng Theo lớp đủ chỗ cho năm cột viết đủ chữ. */
.td-doc{display:flex;flex-direction:column;gap:16px;margin-top:14px}
/* Bảng theo dõi: khoá bề ngang những cột ngắn, để cột HỌC VIÊN nuốt chỗ thừa. Không khoá thì
   trình duyệt chia đều, tên dài như "Nguyễn Thị Mai Phương Quỳnh Anh" vỡ làm bảy dòng còn nút
   Gọi bị đẩy ra ngoài màn (bắt được 26/09/2026). */
.tdtbl td{height:auto;padding:7px 10px}
.tdtbl th{padding:7px 10px}
.tdtbl td:first-child{width:78px;min-width:0}
.tdtbl td.kh-ten{width:100%;min-width:150px}
.tdtbl td.num{width:86px}
.tdtbl td.act{width:74px}
/* "còn 1 buổi chưa điểm danh" đứng dưới ngày thành DÒNG RIÊNG, viết đủ chữ. Trước đây nó
   nằm cạnh số buổi thành "1 1 chưa DD" — hai con số 1 đứng cạnh nhau đọc ra "11". */
.td-chua{display:block;margin-top:1px;font-size:10.5px;line-height:1.35;font-weight:600;color:#8A6413}
/* Ô tỉ lệ khi chưa điểm danh: nói bằng chữ. Để dấu gạch trống thì ai đọc cũng tưởng hỏng,
   mà thật ra là chưa có dữ liệu để tính (anh Ba chỉ ra 25/09/2026). */
.td-chua-o{display:inline-block;padding:2px 9px;border-radius:5px;background:#FFF6E3;
  color:#8A6413;font-size:11.5px;font-weight:600;white-space:nowrap}
.td-vang{color:#B03325}
/* Chú giải ba mức màu của thanh tỉ lệ — để người không biết cũng đọc được bảng */
.td-cg{display:flex;flex-wrap:wrap;align-items:center;gap:3px 16px;font-size:11.5px;color:var(--tx2)}
.td-cg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:0}
.td-cg i.tdm-ok{background:#CDEBDA;box-shadow:inset 0 0 0 1px #2F9E6B}
.td-cg i.tdm-canh{background:#FBE7B8;box-shadow:inset 0 0 0 1px #C99A28}
.td-cg i.tdm-gap{background:#F7D3CC;box-shadow:inset 0 0 0 1px #C0392B}
/* Màn chưa có dữ liệu cũng phải nói được nó sẽ đo gì khi có dữ liệu */
.td-trong{display:flex;flex-direction:column;gap:5px;line-height:1.55}
.td-trong b{font-size:13.5px;color:var(--navy)}
/* Thanh tỉ lệ: đọc được cả bằng số lẫn bằng độ dài, không cần biểu đồ riêng */
.tlo{position:relative;display:block;min-width:92px;height:18px;border-radius:5px;background:var(--bg);overflow:hidden}
.tlo i{position:absolute;left:0;top:0;bottom:0;border-radius:5px}
.tlo b{position:relative;display:block;text-align:center;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;line-height:18px;font-weight:600}
.tl-ok i{background:#CDEBDA}    .tl-ok b{color:#1E7A4D}
.tl-canh i{background:#FBE7B8}  .tl-canh b{color:#8A6413}
.tl-gap i{background:#F7D3CC}   .tl-gap b{color:#9B3324}
.tl-nhat i{background:var(--ln)} .tl-nhat b{color:var(--tx2)}
/* ── Điểm danh: hàng bấm một chạm, và dải buổi chưa điểm danh ── */
.ddtbl tbody tr.ddr{cursor:pointer}
.ddtbl tbody tr.ddr:hover td{background:var(--kbg)}
/* Một dấu duy nhất: CÓ MẶT. Hàng có dấu thì vạch xanh + ô tick xanh; hàng không dấu để trơn.
   Cố ý KHÔNG tô đỏ hàng không đi: đỏ là màu của lỗi, mà học viên nghỉ một buổi không phải lỗi —
   cả bảng đỏ lòm thì nhìn vào chỉ thấy rối, không thấy thông tin. */
.ddtbl tr.dd-co_mat td:first-child{box-shadow:inset 3px 0 0 #2F9E6B}
.ddtbl tr.dd-trong td{color:var(--tx2)}
.dd-chon{display:flex;align-items:center;gap:10px}
.dd-o{flex:none;width:22px;height:22px;border-radius:7px;border:2px solid var(--ln);
  background:#fff;position:relative;transition:background-color .12s,border-color .12s}
.dd-o::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(43deg);opacity:0;
  transition:opacity .12s}
.dd-co_mat .dd-o{background:#2F9E6B;border-color:#2F9E6B}
.dd-co_mat .dd-o::after{opacity:1}
.ddr:hover .dd-o{border-color:#2F9E6B}
.dd-dau-tt{font-size:13px;font-weight:600;color:var(--tx2)}
.dd-co_mat .dd-dau-tt{color:#1E7A4D}
.dd-luu{font-size:12px;font-weight:600;color:#1E7A4D;margin-left:auto}
.dd-luu.loi{color:#B03325}
.ddbu{margin:0 0 14px;border:1px solid #EFD8A0;border-radius:9px;background:#FFFBF1}
.ddbu > summary{cursor:pointer;padding:10px 13px;display:flex;flex-wrap:wrap;gap:3px 9px;align-items:baseline;
  font-size:13.5px;color:#7A5C14;list-style:none}
.ddbu > summary::-webkit-details-marker{display:none}
.ddbu > summary::marker{content:""}
.ddbu > summary i{font-style:normal;font-size:12px;color:var(--tx2)}
.ddbu-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:6px;padding:0 13px 12px}
.ddbu-o{display:flex;align-items:baseline;gap:8px;padding:7px 10px;border:1px solid #EFD8A0;border-radius:7px;
  background:#fff;font-size:13px;color:var(--navy);text-decoration:none;min-width:0}
.ddbu-o:hover{border-color:#D8830F;background:#FFF6E3;text-decoration:none}
.ddbu-ng{flex:none;font-size:11.5px;color:#8A6413}
.ddbu-lop{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ddbu-gio{flex:none;font-size:11.5px;color:var(--tx2)}
/* Cửa vào lớp đã đóng vì muộn quá — buổi vẫn đang dạy nên KHÔNG dùng màu "đã kết thúc" */
.lhc-cd.lhc-muon{flex-direction:column;align-items:flex-start;gap:2px;color:#8A6413}
.lhc-muon-p{font-size:11.5px;color:var(--tx2)}
/* ── Xem thử mẫu tên Zoom (Cài đặt) ── */
.ztm-goi{display:flex;flex-direction:column;gap:8px;margin-top:-4px}
.ztm-bien{display:flex;flex-wrap:wrap;gap:6px}
.ztm-b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:4px 9px;border:1px dashed var(--pale);
  border-radius:6px;background:#fff;color:var(--deep);cursor:pointer;line-height:1.3}
.ztm-b:hover{background:var(--kbg);border-style:solid}
.ztm-thu{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:baseline;
  padding:9px 12px;border:1px solid var(--ln);border-radius:8px;background:var(--bg)}
.ztm-thu .oso-n{grid-row:1}
.ztm-thu b{font-size:14px;color:var(--navy);word-break:break-word}
.ztm-thu i{grid-column:1;font-style:normal;font-size:10.5px;color:var(--tx2);line-height:1.35;max-width:128px}
.hv-viec-ds{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:5px}
.hv-viec-trong{margin:0;font-size:12.5px;color:var(--tx2)}
.hv-viec-o{display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:7px;font-size:13px;background:var(--bg);border:1px solid var(--ln);min-height:32px}
.hv-viec-cham{width:9px;height:9px;border-radius:50%;flex:none;background:var(--pale)}
.hv-viec-o.do{background:#FEF4F2;border-color:#EFC3B9;color:#7A2418}.hv-viec-o.do .hv-viec-cham{background:#C0392B}
.hv-viec-o.cam{background:#FFF6E3;border-color:#EFD8A0;color:#7A5C14}.hv-viec-o.cam .hv-viec-cham{background:#D8830F}
.hv-viec-o.vang{background:#FFFBF1;border-color:#EFE3B0;color:#7A5C14}.hv-viec-o.vang .hv-viec-cham{background:#C99A28}
.hv-viec-o.xanh{background:var(--kbg);border-color:var(--pale);color:#22397D}.hv-viec-o.xanh .hv-viec-cham{background:var(--deep)}
.hv-viec-o.hong{background:#FDEEF4;border-color:#F3C4D8;color:#8E2A56}.hv-viec-o.hong .hv-viec-cham{background:#C2418A}
.hv-viec-tx{flex:1;min-width:0}
/* nút Câu mở lời: là hành động nên tô chàm nhạt, không để viền trắng lẫn vào nền dải */
.hv-viec-goi{flex:none;font:inherit;font-size:11.5px;font-weight:600;padding:2px 9px;line-height:1.5;border:1px solid var(--pale);
  border-radius:6px;background:#fff;color:var(--deep);cursor:pointer;white-space:nowrap}
.hv-viec-goi:hover{background:var(--kbg);border-color:var(--deep)}
.hv-tabs{display:flex;flex-wrap:wrap;gap:2px;border-bottom:2px solid var(--ln);margin-bottom:2px}
.hv-tabs a{flex:none;padding:7px 11px;margin-bottom:-2px;font-size:13.5px;font-weight:600;color:var(--tx2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.hv-tabs a:hover{color:var(--navy)}
.hv-tabs a.on{color:var(--deep);border-bottom-color:var(--deep)}
.hv-tabs .hv-so{margin-left:4px}
/* Sửa hồ sơ là việc làm sau cùng, đẩy sang mép phải để không chen vào các mục đọc;
   bề ngang hẹp thì thôi đẩy, kẻo nó rơi xuống một dòng riêng chỉ có mình nó */
.hv-tab-hs{margin-left:auto}
@media(max-width:1180px){.hv-tab-hs{margin-left:0}}
/* Form hồ sơ khi đã thành tab: hai cột theo NHÓM trường (liên hệ+cá nhân | phân loại+ghi chú),
   không để lưới tự bắt cặp từng ô — bắt cặp kiểu đó sinh ô mồ côi ở cuối nhóm. */
.hv-pane-hs .hoso-f{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 26px;align-items:start}
.hv-pane-hs .hoso-cot{display:flex;flex-direction:column;gap:9px;min-width:0}
.hv-pane-hs .hoso-f > button{grid-column:1 / -1;justify-self:start}
@media(max-width:1000px){.hv-pane-hs .hoso-f{grid-template-columns:1fr}}
.hv-pane{display:flex;flex-direction:column;gap:18px}
.hv-tq{display:flex;flex-direction:column;gap:8px}
.hv-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.hv-ul li{padding:8px 12px;border:1px solid var(--ln);border-radius:7px;background:#fff;line-height:1.45}
.hv-ul li.qua-hen{border-color:#F5C6C0;background:#FFF7F6}
.hv-ul .lienket{margin-left:8px}
.cham-f{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--ln);border-radius:10px;background:var(--bg)}
.cham-f textarea{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--ln);border-radius:7px;resize:vertical;background:#fff}
.cham-hang{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:6px 12px;align-items:end}
/* Dòng chỉ dẫn nằm RIÊNG một hàng dưới, không nhét trong <label> nữa: nhét trong label thì ô
   Hẹn chăm lại cao hơn ô Kênh, mà hàng canh theo đáy nên nhãn và ô của hai bên lệch nhau. */
.cham-hang .fhint{grid-column:2/-1;margin:0}
.cham-hang label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tx2);margin:0}
.cham-hang select,.cham-hang input{border:1px solid var(--ln);border-radius:6px;font:inherit;background:#fff}   /* cỡ: xem THANG KÍCH THƯỚC KHU QUẢN TRỊ ở cuối file */
@media(max-width:760px){.cham-hang{grid-template-columns:1fr}.cham-hang .fhint{grid-column:1}}

.dn-goi{margin-bottom:16px;padding:12px 14px;border:1px solid #EBD9A6;border-radius:9px;background:#FFF8E6;font-size:14px;line-height:1.5}
.dn-goi b{color:var(--navy)}.dn-goi p{margin:6px 0 0}.dn-goi .hint{margin-top:8px}
.dn-goi-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* iPhone không khoá xoay được bằng manifest → điện thoại cầm ngang thì phủ lời nhắc xoay dọc,
   trừ màn xem video (body.cho-xoay) và lúc đang toàn màn hình giả. */
.xoay-doc{display:none;position:fixed;inset:0;z-index:99990;background:var(--g-deep);color:#fff;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px}
.xoay-doc .xoay-ic{font-size:40px;transform:rotate(90deg);margin-bottom:6px}
.xoay-doc b{font-size:18px}.xoay-doc span{font-size:13.5px;opacity:.85;max-width:34ch}
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){body:not(.cho-xoay):not(.fs-gia) .xoay-doc{display:flex}}

/* ── Kéo từ đỉnh xuống để tải lại (chỉ máy cảm ứng) ── */
.ptr{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;z-index:1150;pointer-events:none;transition:height .2s}
.ptr i{width:28px;height:28px;border-radius:50%;border:3px solid var(--pale);border-top-color:var(--deep);background:#fff;margin-bottom:8px;opacity:0;transition:opacity .15s;box-shadow:0 2px 8px rgba(15,58,92,.2)}
.ptr.keo i{opacity:1}
.ptr.chay i{animation:ptrxoay .7s linear infinite}
@keyframes ptrxoay{to{transform:rotate(360deg)}}

/* ── App: lời chào theo tên ở góc trái màn gốc khi đã đăng nhập ── */
.chao{display:none;align-items:center;gap:9px;min-width:0;color:var(--navy);text-decoration:none}
.chao-av{width:34px;height:34px;border-radius:50%;background:var(--g-btn);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.chao-tx{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2)}
.chao-tx b{color:var(--navy);font-weight:700}
@media (max-width:860px),((pointer:coarse) and (max-width:1366px)){.chao{display:flex}}

/* ── Chân trang neo đáy khi nội dung ngắn ── */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > main{flex:1 0 auto;width:100%}
/* ── Safari 14 (2020) chưa có aspect-ratio / inset: khung video giữ tỷ lệ 16:9 bằng padding ── */
@supports not (aspect-ratio:16/9){
  .player{height:0;padding-bottom:56.25%}
  .player.fs-gia,.player:fullscreen{height:var(--appvh,100vh);padding-bottom:0}
  .ccard .cmedia img,.th img{height:auto}
}
@supports not (inset:0){
  .pl-khung,.shield,.poster,.endcard,.xoay-doc,.hxn-nen,.lh-pick input,.dd-chon input,.loai-o input{top:0;left:0;right:0;bottom:0}
}

/* ── Điện thoại / máy tính bảng: chạm và đọc ── */
@media(pointer:coarse){
  /* iOS Safari tự phóng to trang khi chạm vào ô chữ < 16px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  /* trình phát: nút đủ to để chạm, thanh tua dày hơn, giữ chọn tốc độ */
  .ctrl button{min-width:40px;height:40px;font-size:16px;justify-content:center}
  .seek{height:10px}
  .ctrl .rate{display:inline-block}
  /* trang thanh toán: nút chép, lưu QR đủ cao */
  .kv .v .chep{font-size:13px;padding:7px 12px;min-height:36px}
  #luu-qr{min-height:44px;font-size:14.5px}
  /* lịch học: ô ngày đủ rộng, dải cuộn ngang; mũi tên tuần to hơn */
  .lh-ngay{flex:0 0 46px;max-width:none}
  .lh-nav{width:34px;height:34px;font-size:22px}
  .lh-tuan{gap:6px}
  /* dl thông tin liên hệ: email dài xuống dòng */
  .dl .dr .dv,.dl .dr a{overflow-wrap:anywhere;min-width:0}
  /* mờ hover không "dính" sau khi chạm */
  a:hover,.btn:hover{text-decoration:none}
}
/* Điện thoại cầm ngang ở màn xem video: bỏ thanh trên/thanh tab, video chiếm trọn */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  body.cho-xoay nav.top,body.cho-xoay .tabbar,body.cho-xoay .ptr{display:none}
  body.cho-xoay{padding:0}
  body.cho-xoay main{padding:0}
  body.cho-xoay .player{border-radius:0;max-height:100vh;aspect-ratio:auto;height:100vh}
  body.cho-xoay .split > .stack > div:first-child{margin:0}
}
/* ═══════════ THANG KÍCH THƯỚC KHU QUẢN TRỊ (24/09/2026 — anh Ba) ═══════════
   Trước bản này cùng một lớp .btn.sm ra BẢY chiều cao (29·30·31·32·33·35·36), ô nhập ra
   ba (32·36·42), ô chọn ba, ô ngày ba, ô lọc hai. Mở hai màn cạnh nhau là thấy lệch hàng.
   Nay CHỈ CÓ BA CỠ, khai báo một chỗ duy nhất bằng token --qt-* ở khối :root đầu file:

     CỠ LỚN  42px · đệm ngang 12px · chữ 14.5px
       ô nhập · ô chọn · ô ngày · ô giờ · ô số · ô nhiều dòng của MỌI BIỂU MẪU
       (Cấp thẻ tay, Cài đặt, Chính sách, Gói tập, Khoá học, Thêm buổi lẻ, Sửa hồ sơ,
       Sổ chăm sóc, Thêm chương/bài, ô tìm học viên) và NÚT CHÍNH .btn (không .sm),
       kể cả nút ở hàng nút cuối biểu mẫu (.abar). Đệm ngang nút: 20px.
     CỠ VỪA  36px · đệm ngang 10px · chữ 13.5px
       thanh công cụ và hàng lọc: ô tìm (.bl-q, .otim), ô sắp xếp (.bl-sx), ô lọc chi tiết
       (.bl-ct-o), ô mở khoá (.mokhoa) và các nút Tìm · Lọc chi tiết · Xoá lọc · Tải CSV ·
       ＋ Cấp thẻ tay · ‹ Tuần trước · ＋ Thêm buổi lẻ; cùng các ô + nút trong menu ⋯ của
       bảng (hàng gia hạn, đổi ngày, số buổi) và ô đường dẫn trong thẻ ảnh của Kho ảnh.
       Đệm ngang nút: 14px.
       Cùng cỡ này: NÚT PHỤ đứng kèm một ô nhập trong biểu mẫu — Chọn ảnh từ máy / Gỡ ảnh
       (.ab-nut), Dùng ảnh riêng của tôi (.ico-tai), Chèn ảnh / Chèn video (.soan-nut).
       Hộp sửa buổi của Lịch học (.bh-pop) KHÔNG thuộc cỡ này — nó là biểu mẫu có nhãn
       cho từng ô nên theo cỡ lớn, giống hộp Thêm buổi lẻ đứng ngay cạnh.
     CỠ NHỎ  30px · đệm ngang 9px · chữ 12.5px
       NÚT nằm TRONG BẢNG (.tbl td .btn.sm), nút ⋯ (.hv-menu summary) và hàng nút gọn ở
       dải nhận diện hồ sơ học viên (.hv-nut .btn) — ba thứ này luôn đứng cạnh nhau.

   Ngoài ba cỡ chỉ còn MỘT số riêng: .mi = 46px. Đó là DÒNG CHỌN trong menu ⋯ (chữ chính
   + chú thích, có dòng hai dòng có dòng một dòng), không phải nút trong hàng; mọi .mi cao
   đúng bằng nhau nhờ min-height + justify-content:center.

   CHỮ CĂN GIỮA THEO CHIỀU DỌC: ô nhập bỏ hẳn đệm trên/dưới (trình duyệt tự canh giữa chữ
   trong khung ô), nút dùng inline-flex + align-items:center. Không còn đệm dọc lẻ.

   PHẠM VI: mọi rule bắt đầu bằng body.qt-mau — lớp này chỉ có ở /trangquanly/* và
   /tai-khoan của giáo viên. .btn, .btn.sm, input, select, textarea là lớp DÙNG CHUNG với
   trang bán khoá học; sửa thẳng các lớp đó là đổi luôn nút "Mua khoá học" ngoài trang chủ.
   Khối nằm trong @media máy tính (điện thoại giữ nguyên: ô chữ phải ≥16px kẻo iOS tự
   phóng to trang) và đặt ở CUỐI chuỗi CSS để thắng rule cũ cùng độ mạnh — không !important. */
@media (min-width:861px) and (pointer:fine){
  /* ── CỠ LỚN · ô nhập biểu mẫu ── */
  body.qt-mau input[type=text],body.qt-mau input:not([type]),body.qt-mau input[type=tel],
  body.qt-mau input[type=email],body.qt-mau input[type=password],body.qt-mau input[type=number],
  body.qt-mau input[type=date],body.qt-mau input[type=time],body.qt-mau input[type=month],
  body.qt-mau input[type=url],body.qt-mau select{
    height:var(--qt-l);min-height:var(--qt-l);padding:0 var(--qt-lx);font-size:var(--qt-lf)}
  body.qt-mau select{padding-right:32px;background-position:right var(--qt-lx) center}
  body.qt-mau select.smau{padding-left:30px;background-position:right var(--qt-lx) center,left 11px center}
  body.qt-mau textarea{padding:10px var(--qt-lx);font-size:var(--qt-lf)}
  /* ô tìm học viên: chừa chỗ cho dấu × bỏ người đã chọn (đừng để đè lên chữ) */
  body.qt-mau .timhv-khung input{padding-right:34px}
  /* ── CỠ LỚN · nút chính, kể cả nút cuối biểu mẫu ── */
  body.qt-mau .btn:not(.sm){
    min-height:var(--qt-l);height:auto;padding:0 20px;font-size:var(--qt-lf);line-height:1.25;
    display:inline-flex;align-items:center;justify-content:center}
  body.qt-mau .btn.lg{padding:0 26px;font-size:15px}
  body.qt-mau .btn.wide{display:flex;width:100%}
  /* ── CỠ NHỎ · nút trong bảng và hàng nút dải nhận diện hồ sơ ── */
  body.qt-mau .btn.sm{height:var(--qt-s);min-height:var(--qt-s);padding:0 var(--qt-sx);
    font-size:var(--qt-sf);line-height:1.25;display:inline-flex;align-items:center;justify-content:center}
  /* ── CỠ VỪA · ô của thanh công cụ, hàng lọc và hộp bật ra từ bảng ── */
  body.qt-mau form.bl-f .bl-q,body.qt-mau form.bl-f .bl-sx,
  body.qt-mau .bl-ct-o input,body.qt-mau .bl-ct-o select,
  body.qt-mau .otim input[type=search],body.qt-mau .mokhoa select,
  body.qt-mau .hv-pop .gh-o input,body.qt-mau .hv-pop .gh-o select,
  body.qt-mau .tdky-o input,
  body.qt-mau .an-d .an-u{
    height:var(--qt-m);min-height:var(--qt-m);padding:0 var(--qt-mx);font-size:var(--qt-mf)}
  body.qt-mau form.bl-f .bl-sx,body.qt-mau .bl-ct-o select,body.qt-mau .mokhoa select,
  body.qt-mau .hv-pop .gh-o select{
    padding-right:28px;background-position:right var(--qt-mx) center}
  /* ── CỠ VỪA · nút của thanh công cụ, hàng lọc và hộp bật ra từ bảng ── */
  body.qt-mau .bl-f .btn.sm,body.qt-mau .bl-nut .btn.sm,body.qt-mau .thanhtim .btn.sm,
  body.qt-mau .mokhoa .btn.sm,body.qt-mau .tuan-nav .btn.sm,body.qt-mau .them-buoi > summary.btn,
  body.qt-mau .hv-pop .gh-o .btn.sm,body.qt-mau .an-d .an-x,
  body.qt-mau .ab-nut .btn.sm,body.qt-mau .ico-tai .btn.sm,body.qt-mau .soan-nut .btn.sm,
  body.qt-mau .tdky-f .btn.sm{
    height:var(--qt-m);min-height:var(--qt-m);padding:0 14px;font-size:var(--qt-mf);
    line-height:1.25;display:inline-flex;align-items:center;justify-content:center}
  /* ── DÒNG CHỌN trong menu ⋯ · mọi .mi cao đúng bằng nhau ──
     Chữ chính và chú thích cho line-height chẵn theo px để dòng hai dòng luôn ra đúng
     31px, còn min-height kéo dòng một dòng lên bằng; justify-content canh giữa. */
  body.qt-mau .hv-pop .mi{min-height:var(--qt-mi);justify-content:center;padding:6px var(--qt-mx)}
  body.qt-mau .hv-pop .mi b{line-height:16px}
  body.qt-mau .hv-pop .mi i{line-height:15px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}