/* =====================================================================
   NEO-BRUTALISM v5.0 - Vu Hai
   Style chung cho ca 4 trang (dang nhap / admin / hoc vien / khao sat)

   v5.0 (16/10/2026): nang token theo skill neo-brutalism-design-vuhai v5.0.
   Them --brand-text, bo accent petrol, bo focus-ring, bo bac vien 5px,
   radius ve 4px, vien ve 2/3/5, bong ve 4/6/8.
   KHONG ap ba luat danh cho trang ban hang: footer lien he 5 thong tin,
   ngan sach hinh anh, texture va chu co dai moi trang. Day la cong cu
   dung hang ngay, khong phai landing.
   Da hop nhat, mot nguon moi class.
   ===================================================================== */
:root{
  --brand:#C73937; --brand-dark:#A82C2A;
  /* Do danh cho CHU NHO (duoi 24px). Chu lon va nen van dung --brand. */
  --brand-text:#A02824;
  /* Petrol: mau brand thu hai theo CLAUDE.md. Diem nhan PHU, khong bao gio
     lam nut chinh. Ty le do:petrol khoang 70:30. */
  --accent:#245B6B; --accent-text:#1D4C59; --accent-bg:#E4ECEC; 
  --ink:#1A1A1A; --ink-2:#3D3D3D; --ink-3:#6B6B6B;
  --line:#1A1A1A; --paper:#FFFFFF; --canvas:#F7F4EF; --canvas-2:#EFEAE1; --hairline:#E4DED4;
  /* --warn cu la #9a6b00, chi dat 4.28:1 tren nen nhan vang, duoi nguong 4.5.
     #8A5E00 dat 5.13:1 ma van giu sac ho phach. */
  --ok:#1f7a3d; --warn:#8A5E00; --danger:#C73937;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --t-h1:clamp(1.75rem,4vw,2.5rem); --t-h2:clamp(1.4rem,3vw,1.9rem);
  --t-h3:1.3rem; --t-h4:1.125rem; --t-body:1.0625rem; --t-small:.9375rem; --t-label:.8125rem;
  --lh-tight:1.15; --lh-snug:1.4; --lh-body:1.7;
  --ls-hero:-.02em; --ls-head:-.01em; --ls-label:.06em;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;--s-20:80px;
  --pad-card:var(--s-6); --pad-card-sm:var(--s-4); --gutter:var(--s-5);
  /* Vien theo bac 2/3/5. Bac 5px (--bw-3) danh cho DUY NHAT mot khoi chu dao
     moi man hinh, hien chua dung o dau, de san khi can nhan manh. */
  --bw:2px; --bw-2:3px; --bw-3:5px;
  --radius:4px; --radius-sm:4px; --radius-0:0px;
  --shadow:4px 4px 0 var(--ink); --shadow-lg:6px 6px 0 var(--ink); --shadow-xl:8px 8px 0 var(--ink);
  --shadow-sm:2px 2px 0 var(--ink); --shadow-brand:4px 4px 0 var(--brand);
  /* Dung CONG DON voi bong san co, khong thay the. Xem luat focus ben duoi. */
  --focus-ring:0 0 0 3px var(--brand);
  --ease:cubic-bezier(.25,0,0,1); --dur:160ms; --maxw:1760px;
}
*{margin:0;padding:0;box-sizing:border-box;font-style:normal!important;font-optical-sizing:auto;}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:var(--t-body);
  line-height:var(--lh-body);word-break:keep-all;overflow-wrap:break-word;line-break:strict;hyphens:none;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;line-height:var(--lh-tight);word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.01em;}
p,li{text-wrap:pretty;}
h1{font-size:var(--t-h1);font-weight:600;} h2{font-size:var(--t-h2);font-weight:600;}
h3{font-size:var(--t-h3);font-weight:600;} h4{font-size:var(--t-h4);font-weight:600;}
a{color:var(--brand-text);text-decoration:none;font-weight:600;} a:hover{text-decoration:underline;}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(var(--s-5),3vw,var(--s-12));}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
/* So trong bang, o thong ke va o nhap so deu phai co chieu rong co dinh,
   neu khong cot se nhay moi lan doi du lieu. */
.tbl th,.tbl td,.stat-num,input[type=number],input[type=time],input[type=date],
input[type=datetime-local],.badge,.tag{font-variant-numeric:tabular-nums;}
.muted{color:var(--ink-3);}

/* ---- Card ---- */
.card{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad-card);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
.card .header{background:var(--brand);color:var(--paper);border-bottom:var(--bw-2) solid var(--line);
  margin:calc(-1*var(--pad-card)) calc(-1*var(--pad-card)) var(--s-5);padding:var(--s-4) var(--s-6);
  border-radius:var(--radius) var(--radius) 0 0;}
.card .header h3,.card .header h4{color:var(--paper);}
/* the bam duoc */
.card--click,.mat-card--click{cursor:pointer;}
.card--click:hover,.mat-card--click:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);border-color:var(--brand);}

/* ---- Button ---- */
.btn{font-family:var(--font-mono);font-weight:600;font-size:var(--t-small);text-transform:uppercase;letter-spacing:.04em;
  background:var(--brand);color:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:var(--s-3) var(--s-5);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);}
.btn:active{transform:translate(1px,1px);box-shadow:var(--shadow-sm);}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm);}
.btn--ghost:hover{box-shadow:var(--shadow);}
.btn--sm{min-height:38px;padding:var(--s-2) var(--s-4);font-size:var(--t-label);box-shadow:var(--shadow-sm);}
.btn--sm:hover{box-shadow:var(--shadow);}
/* nut icon-only (vd xoa) mo, kin dao */
.btn--icon{min-height:38px;width:38px;padding:0;background:var(--paper);color:var(--ink-3);box-shadow:none;border-color:var(--hairline);}
.btn--icon:hover{color:var(--brand);border-color:var(--brand);transform:none;box-shadow:none;}

/* ---- Form ---- */
label.fld{display:block;font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:var(--s-2);}
input,select,textarea{width:100%;font-family:var(--font-body);font-size:var(--t-body);background:var(--paper);
  border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);color:var(--ink);
  transition:box-shadow var(--dur) var(--ease);}
/* O nhap khong co bong do san nen chi can vong focus. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring);}
/* Nut CO bong do san. Phai CONG DON, neu thay the thi nut mat bong khi bam Tab,
   trong nhu bi thut xuong. Day la loi cua ban v4.0. */
.btn:focus-visible{outline:none;box-shadow:var(--shadow),var(--focus-ring);}
.btn:hover:focus-visible{box-shadow:var(--shadow-lg),var(--focus-ring);}
/* Nut nho co bong 2px, nut icon khong co bong. Phai cong don dung bong CUA NO,
   neu khong focus lai tang bong len 4px, nut nhay len khi bam Tab. */
.btn--sm:focus-visible{box-shadow:var(--shadow-sm),var(--focus-ring);}
.btn--sm:hover:focus-visible{box-shadow:var(--shadow),var(--focus-ring);}
.btn--icon:focus-visible,.btn--icon:hover:focus-visible{box-shadow:var(--focus-ring);}
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
textarea{min-height:96px;resize:vertical;line-height:var(--lh-body);}
.field{margin-bottom:var(--s-5);}
/* ---- Thanh tim kiem (co icon) ---- */
.search-bar{position:relative;max-width:480px;}
.search-bar > .ti{position:absolute;left:var(--s-4);top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:18px;pointer-events:none;}
.search-bar input{padding-left:calc(var(--s-4) + 26px);}
/* ---- Card bai viet (blog): cao deu, nut o day ---- */
.post-card{display:flex;flex-direction:column;}
.post-title{margin:var(--s-3) 0;font-size:var(--t-h4);font-weight:600;line-height:var(--lh-snug);
  flex:1 1 auto;text-transform:none;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.post-actions{margin-top:auto;padding-top:var(--s-3);}
/* ---- Card thong bao ---- */
.ann-card--pin{border-color:var(--brand);box-shadow:var(--shadow-brand);}
.ann-top{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);}
.ann-top .ann-time{margin-left:auto;font-size:12px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.ann-title{margin-bottom:var(--s-2);line-height:var(--lh-snug);}
.ann-body{color:var(--ink);}
.ann-body p:first-child{margin-top:0;}
.ann-body p:last-child{margin-bottom:0;}
.ann-actions{margin-top:var(--s-5);padding-top:var(--s-4);border-top:var(--bw) solid var(--hairline);flex-wrap:wrap;}
.ann-ack-stat{margin-top:var(--s-4);padding-top:var(--s-4);border-top:var(--bw) solid var(--hairline);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-small);color:var(--ink-2);}
.ann-ack-stat strong{color:var(--brand);}
.ann-ack-done{margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border:var(--bw) solid var(--ok);border-radius:var(--radius-sm);background:#e3f2e7;color:var(--ok);font-weight:600;font-size:var(--t-small);display:inline-flex;align-items:center;gap:8px;}
.ack-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);}
.ack-item{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--hairline);font-size:var(--t-small);}
@media(max-width:600px){.ack-cols{grid-template-columns:1fr;}}

/* ---- Tag / badge ---- */
.tag{display:inline-block;font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent-bg);color:var(--accent-text);border:var(--bw) solid var(--accent);border-radius:var(--radius-sm);padding:3px var(--s-3);}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:600;font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.04em;padding:3px var(--s-3);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);}
.badge--ok{background:#e3f2e7;color:var(--ok);} .badge--vang{background:#fbf3d6;color:var(--warn);}
.badge--do{background:#fbe9e9;color:var(--brand-text);}
/* Nhan thong tin trung tinh, khong phai trang thai tot hay xau. */
.badge--info{background:var(--accent-bg);color:var(--accent-text);}
.badge--do{background:#fbe9e9;color:var(--brand-text);} .badge--grey{background:var(--canvas-2);color:var(--ink-2);}

/* ---- Stat ---- */
.stat-ico{font-size:18px;color:var(--ink-3);margin-bottom:var(--s-3);display:block;}
.stat-num{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.1rem);color:var(--brand);line-height:1.05;letter-spacing:-.02em;}
.stat-label{font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin-top:var(--s-2);}

/* ---- Table ---- */
.tbl{width:100%;border-collapse:collapse;background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);overflow:hidden;}
.tbl th{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.03em;text-align:left;
  background:var(--ink);color:var(--paper);padding:var(--s-4);white-space:nowrap;}
.tbl td{padding:var(--s-4);border-top:var(--bw) solid var(--hairline);vertical-align:middle;}
.tbl tbody tr{transition:background var(--dur) var(--ease);}
.tbl tbody tr:hover{background:var(--canvas);}
.tbl td.center,.tbl th.center{text-align:center;}
.tbl td.nowrap,.tbl th.nowrap{white-space:nowrap;}
/* Cot ten buoi: du rong de khong roi dong day dac */
.tbl td.col-title{min-width:200px;font-weight:600;line-height:var(--lh-snug);}

/* ---- Top bar ---- */
.topbar{background:var(--ink);color:var(--paper);border-bottom:var(--bw-2) solid var(--line);position:sticky;top:0;z-index:50;}
.topbar .inner{max-width:var(--maxw);margin-inline:auto;padding:var(--s-3) clamp(var(--s-5),3vw,var(--s-12));display:flex;align-items:center;gap:var(--s-4);justify-content:space-between;}
.topbar .brand{color:var(--paper);white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--s-3);}
/* Logo chu "Vu Hai", net lay tu Logo Vu Hai/vector/logo-vuhai.svg.
   Nhung thang vao HTML chu KHONG dung the <img>, vi fill la currentColor:
   the <img> khong thua huong mau nen se den tren nen den. */
.brand-mark{height:24px;width:auto;display:block;flex:0 0 auto;color:currentColor;}
.topbar .brand-sep{width:var(--bw);height:20px;background:rgba(255,255,255,.28);flex:0 0 auto;}
.topbar .brand-lab{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:#C9C5BD;}
/* Trang dang nhap: logo tren nen kem, an theo mau muc */
.brand-mark-wrap{color:var(--ink);display:flex;justify-content:center;margin-bottom:var(--s-5);}
.brand-mark-wrap .brand-mark{height:34px;}
@media(max-width:640px){
  .brand-mark{height:20px;}
  .topbar .brand-sep,.topbar .brand-lab{display:none;}
}
.topbar nav{display:flex;gap:var(--s-1);flex-wrap:wrap;justify-content:flex-end;align-items:center;}
/* KHONG dat overflow tren nav: dropdown menu can tran ra ngoai duoc */
.topbar nav button{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;flex:0 0 auto;
  background:transparent;color:var(--paper);border:var(--bw) solid transparent;border-radius:var(--radius-sm);padding:var(--s-2) var(--s-2);cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:5px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.topbar nav button:hover{background:rgba(255,255,255,.1);}
.topbar nav button.active{background:var(--brand);border-color:var(--paper);}

/* ---- Layout helpers ---- */
.grid{display:grid;gap:var(--s-5);}
.grid-stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;}
.spread{justify-content:space-between;}
.sticker{display:inline-block;background:var(--brand);color:var(--paper);font-family:var(--font-mono);font-weight:600;
  font-size:var(--t-label);text-transform:uppercase;padding:var(--s-2) var(--s-3);border:var(--bw-2) solid var(--line);transform:rotate(-1.5deg);box-shadow:var(--shadow);}
.section-title{margin:var(--s-10) 0 var(--s-5);display:flex;align-items:center;gap:var(--s-2);}
.hidden{display:none!important;}

/* progress bar diem danh */
.bar{height:12px;background:var(--canvas-2);border:var(--bw) solid var(--line);border-radius:99px;overflow:hidden;}
.bar > span{display:block;height:100%;background:var(--brand);transition:width var(--dur) var(--ease);}

/* dot diem danh */
.dot-att{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:11px;}
.dot-att.on{background:var(--ink);color:var(--paper);} .dot-att.off{background:var(--paper);color:var(--hairline);}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:var(--t-small);padding:var(--s-3) var(--s-5);border:var(--bw-2) solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);z-index:200;opacity:0;transition:opacity var(--dur),transform var(--dur);pointer-events:none;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(26,26,26,.55);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:var(--s-8) var(--gutter);overflow:auto;}
.modal{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:640px;width:100%;padding:var(--pad-card);margin-top:var(--s-8);}

/* ---- The tai lieu / nhom buoi ---- */
.mat-card{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--s-5);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);display:flex;flex-direction:column;}
.mat-card h4{margin:var(--s-3) 0 var(--s-4);}
.mat-card .actions{display:flex;gap:var(--s-2);align-items:center;margin-top:auto;flex-wrap:wrap;}
.mat-card .actions .spacer{flex:1;}
.buoi-no{font-family:var(--font-mono);font-weight:600;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);padding:4px 10px;border-radius:var(--radius-sm);}

/* ---- Trang con (buoi / doc tai lieu) trong app ---- */
.subpage-bar{background:var(--ink);color:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--s-4) var(--s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-6);}
.subpage-bar .sp-title{font-family:var(--font-display);font-weight:600;font-size:var(--t-h4);color:var(--paper);}
.subpage-bar .sp-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-3);margin-top:2px;}
/* Reader full-width: muc luc trai dinh + noi dung */
.reader-layout{display:block;}
.reader-layout.has-toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-6);align-items:start;}
.reader-main{min-width:0;} .reader-main .card{padding:clamp(var(--s-5),3vw,var(--s-8));}
.reader-toc{position:sticky;top:84px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:var(--s-4);max-height:calc(100vh - 110px);overflow:auto;}
.reader-toc .toc-label{font-family:var(--font-mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:var(--s-3);}
.reader-toc a{display:block;font-size:var(--t-small);color:var(--ink-2);text-decoration:none;font-weight:400;padding:5px 0 5px var(--s-3);border-left:2px solid transparent;line-height:1.35;}
.reader-toc a:hover{color:var(--brand);border-left-color:var(--brand);text-decoration:none;}
.reader-toc a.toc-l1{font-weight:600;color:var(--ink);} .reader-toc a.toc-l3,.reader-toc a.toc-l4{padding-left:var(--s-5);font-size:var(--t-label);}
@media (max-width:760px){ .reader-layout.has-toc{grid-template-columns:1fr;} .reader-toc{display:none;} }

/* Bang markdown ke nhe */
.md-table-wrap{overflow-x:auto;margin:var(--s-4) 0;}
.md-table{border-collapse:collapse;width:100%;font-size:var(--t-small);background:var(--paper);}
.md-table th,.md-table td{border:var(--bw) solid var(--hairline);padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;}
.md-table th{background:var(--canvas-2);font-family:var(--font-mono);font-weight:600;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);white-space:nowrap;}
.md-table tbody tr:nth-child(even){background:var(--canvas);}
.md-body em{font-style:italic!important;}

/* ---- Markdown body ---- */
.md-body{font-family:var(--font-body);line-height:var(--lh-body);color:var(--ink-2);font-size:var(--t-body);}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{color:var(--ink);margin:var(--s-6) 0 var(--s-2);line-height:var(--lh-snug);}
.md-body h1{font-size:1.4rem;} .md-body h2{font-size:1.2rem;} .md-body h3{font-size:1.075rem;} .md-body h4{font-size:1rem;}
.md-body h1:first-child,.md-body h2:first-child{margin-top:0;}
.md-body p{margin:var(--s-3) 0;}
.md-body ul{margin:var(--s-3) 0 var(--s-4) var(--s-5);} .md-body li{margin:6px 0;}
.md-body strong{color:var(--ink);font-weight:600;}
.md-body code{font-family:var(--font-mono);font-size:.9em;background:var(--canvas-2);border:1px solid var(--hairline);border-radius:4px;padding:1px 5px;}
.md-body pre{background:var(--canvas-2);border:var(--bw) solid var(--hairline);border-radius:var(--radius);padding:var(--s-4);overflow-x:auto;font-family:var(--font-mono);font-size:.85em;white-space:pre-wrap;margin:var(--s-4) 0;}
.md-body blockquote{border-left:3px solid var(--brand);padding-left:var(--s-4);margin:var(--s-4) 0;color:var(--ink-3);}
.md-body hr{border:none;border-top:var(--bw) solid var(--hairline);margin:var(--s-6) 0;}
.md-body .md-row{font-family:var(--font-mono);font-size:.85em;color:var(--ink-2);white-space:pre-wrap;line-height:1.5;}
.md-body a{color:var(--brand);}

/* ---- Icon (Tabler) ---- */
.ti{font-size:1.05em;line-height:1;vertical-align:-2px;}
.topbar nav button .ti{font-size:15px;vertical-align:-2px;}
.btn .ti{font-size:16px;}
.btn--icon .ti{font-size:17px;}
.card-ico{font-size:18px;color:var(--ink-3);vertical-align:-3px;margin-right:8px;}

@media (max-width:760px){
  .topbar .inner{flex-wrap:wrap;}
  /* KHONG dat overflow tren nav (se cat mat menu tha xuong). Cho nav xuong dong. */
  .topbar nav{width:100%;flex-wrap:wrap;justify-content:flex-start;gap:var(--s-1);}
  .topbar nav button{white-space:nowrap;flex:0 0 auto;}
  /* Dropdown tha xuong tren mobile: dai full-width ngay duoi topbar, khong bi cat */
  .navgroup{position:static;}
  .navmenu{left:var(--s-4);right:var(--s-4);top:calc(100% + 4px);min-width:0;}
}
@media (max-width:600px){
  .card{padding:var(--pad-card-sm);}
  .card .header{margin:calc(-1*var(--pad-card-sm)) calc(-1*var(--pad-card-sm)) var(--s-4);}
  .tbl{font-size:var(--t-small);} .tbl th,.tbl td{padding:var(--s-3);}
  .section-title{margin:var(--s-8) 0 var(--s-4);}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ---- iframe giao an HTML ---- */
.giaoan-frame{width:100%;height:calc(100vh - 180px);min-height:600px;border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--paper);display:block;}

/* Trang con tai lieu / giao an: rong hon, gan full-width */
#tab-buoichitiet{max-width:1600px;margin-inline:auto;width:100%;}
#tab-buoichitiet .reader-layout.has-toc{grid-template-columns:260px minmax(0,1fr);}
.giaoan-frame{height:calc(100vh - 170px);}

/* Badge so tren nav (vd: phan hoi moi) */
.topbar nav button .navdot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;background:var(--brand);color:#fff;border-radius:99px;font-size:10px;font-weight:600;line-height:1;}

/* ---- Nav gom nhom (dropdown) ---- */
.navgroup{position:relative;display:inline-flex;}
.navgroup-btn{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  background:transparent;color:var(--paper);border:var(--bw) solid transparent;border-radius:var(--radius-sm);padding:var(--s-2) var(--s-2);cursor:pointer;min-height:40px;
  display:inline-flex;align-items:center;gap:5px;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.navgroup-btn:hover{background:rgba(255,255,255,.1);}
.navgroup.has-active .navgroup-btn{background:var(--brand);border-color:var(--paper);}
.navgroup-caret{font-size:13px;transition:transform var(--dur) var(--ease);}
.navgroup.open .navgroup-caret{transform:rotate(180deg);}
.navmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:190px;
  background:var(--ink);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:6px 6px 0 rgba(0,0,0,.35);
  padding:var(--s-2);display:none;flex-direction:column;gap:2px;}
.navgroup.open .navmenu{display:flex;}
.navmenu button{width:100%;justify-content:flex-start;text-align:left;}
.navmenu button .navdot{margin-left:auto;}

/* ---- Chat hoi dap (ticket) ---- */
.chat-thread{max-width:760px;margin:0 auto var(--s-2);padding:var(--s-2) 0;}
.chat-bubble{max-width:80%;padding:var(--s-3) var(--s-4);border:var(--bw) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm,2px 2px 0 var(--line));}
.chat-bubble.chat-hai{background:var(--paper);border-color:var(--line);}
.chat-bubble.chat-me{background:#fdeceb;border-color:var(--brand);}
.chat-thread+.card{max-width:760px;margin-left:auto;margin-right:auto;}
#tab-hoidapchat{max-width:1000px;margin-inline:auto;width:100%;}

/* =====================================================================
   CHAN DOAN LANH DAO H-OE (prefix cd-) - dung chung hoc vien + admin
   ===================================================================== */
.cd-scalekey{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-align:right;text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--s-4);}
.cd-group-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;border-bottom:var(--bw-2) solid var(--line);padding-bottom:var(--s-3);margin:var(--s-8) 0 var(--s-5);}
.cd-group-head h3{font-size:var(--t-h4);font-weight:700;}
.cd-gbadge{font-family:var(--font-mono);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border:var(--bw) solid var(--line);border-radius:var(--radius-sm);color:var(--paper);}
.gb-lead,.gb-pers{background:var(--brand);}.gb-mgmt,.gb-mot{background:#2F63AC;}.gb-cog{background:#B8860B;}
.cd-gsub{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-left:auto;}

.cd-role{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad-card);margin-bottom:var(--s-5);}
.cd-role-top{display:flex;align-items:flex-start;gap:var(--s-3);margin-bottom:var(--s-3);}
.cd-role-num{flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:var(--t-small);background:var(--ink);color:var(--paper);border-radius:var(--radius-sm);}
.cd-role-num.mgmt{background:#2F63AC;}.cd-role-num.cog{background:#B8860B;}
.cd-role-tw{flex:1;min-width:0;}
.cd-role-tw h4{font-size:var(--t-h4);font-weight:700;line-height:1.2;}
.cd-role-en{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;}
.cd-role-note{font-size:var(--t-small);color:var(--ink-2);margin-bottom:var(--s-4);padding:var(--s-3);background:var(--canvas);border-left:var(--bw-2) solid var(--brand);border-radius:var(--radius-sm);}
.cd-role-note.warn{border-left-color:#B8860B;}
.cd-role-note b{color:var(--brand);font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}
.cd-crit{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--hairline);}
.cd-crit-b{flex:1;min-width:0;font-size:var(--t-small);}
.cd-scale{flex-shrink:0;display:flex;gap:6px;}
.cd-scale label{cursor:pointer;}
.cd-scale input{position:absolute;opacity:0;width:0;height:0;}
.cd-dot{width:30px;height:30px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:var(--t-small);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--paper);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);}
.cd-scale label:hover .cd-dot{transform:translate(-1px,-1px);}
.cd-scale input:checked + .cd-dot{background:var(--brand);color:var(--paper);box-shadow:2px 2px 0 var(--ink);}
.cd-role.mgmt .cd-scale input:checked + .cd-dot{background:#2F63AC;}
.cd-role.cog .cd-scale input:checked + .cd-dot{background:#B8860B;}

/* progress bar lam bai */
.cd-prog{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;background:var(--canvas-2);border:var(--bw-2) solid var(--line);border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-6);position:sticky;top:8px;z-index:5;box-shadow:var(--shadow-sm);}
.cd-pbar{height:8px;flex:1;min-width:120px;background:var(--paper);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.cd-pbar i{display:block;height:100%;background:var(--brand);width:0;transition:width 400ms var(--ease);}
.cd-pct{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-2);font-weight:600;white-space:nowrap;}

/* step nav lam bai */
.cd-steps{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5);}
.cd-steptab{font-family:var(--font-mono);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:var(--s-2) var(--s-3);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);cursor:pointer;}
.cd-steptab.active{background:var(--brand);border-color:var(--brand);color:var(--paper);}
.cd-steptab.done::after{content:" ✓";color:var(--ok);}

/* ===== REPORT ===== */
.cd-report-head .cd-eyebrow,.cd-eyebrow{font-family:var(--font-mono);font-weight:500;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--brand);}
.cd-report-head h2{font-size:var(--t-h2);margin:var(--s-2) 0 var(--s-6);}
.cd-scorewrap{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-6);}
.cd-scorecard{flex:1;min-width:150px;background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);padding:var(--pad-card-sm);}
.sc-l,.sc-p{box-shadow:4px 4px 0 var(--brand);}.sc-m,.sc-mo{box-shadow:4px 4px 0 #2F63AC;}.sc-c{box-shadow:4px 4px 0 #B8860B;}
.cd-scorecard .cd-lbl{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);}
.cd-scorecard .cd-big{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.8rem,5vw,2.4rem);line-height:1;margin:var(--s-2) 0;}
.cd-scorecard .cd-big small{font-size:.9rem;color:var(--ink-3);}
.cd-scorecard .cd-bar{height:10px;background:var(--canvas-2);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin-top:var(--s-2);}
.sc-l .cd-bar i,.sc-p .cd-bar i{background:var(--brand);}.sc-m .cd-bar i,.sc-mo .cd-bar i{background:#2F63AC;}.sc-c .cd-bar i{background:#B8860B;}
.cd-scorecard .cd-bar i{display:block;height:100%;width:0;transition:width 600ms var(--ease);}
.cd-scorecard .cd-vd{font-family:var(--font-mono);font-size:var(--t-small);font-weight:600;margin-top:var(--s-2);}

.cd-panel{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad-card);margin-bottom:var(--s-6);}
.cd-panel h3{font-size:var(--t-h4);margin-bottom:var(--s-2);}
.cd-panel .cd-hint{font-size:var(--t-small);color:var(--ink-2);margin-bottom:var(--s-5);}
.cd-radar-wrap{text-align:center;}
.cd-radar{width:100%;max-width:520px;height:auto;margin-inline:auto;display:block;}
.cd-maplist{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);columns:3;column-gap:var(--s-5);margin-top:var(--s-4);text-align:left;}
.cd-maplist span{display:block;break-inside:avoid;}

.cd-matrix{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);}
.cd-quad{border:var(--bw-2) solid var(--line);border-radius:var(--radius);padding:var(--s-4);min-height:130px;}
.cd-quad h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--s-1);}
.cd-quad .qd{font-size:10px;color:var(--ink-3);font-family:var(--font-mono);margin-bottom:var(--s-3);}
.cd-quad ul{list-style:none;}
.cd-quad li{font-size:var(--t-small);padding:var(--s-1) 0;display:flex;gap:var(--s-2);}
.q-lev{background:#eaf3ea;}.q-lev h4{color:var(--ok);}
.q-unt{background:#fbf4e3;}.q-unt h4{color:#B8860B;}
.q-str{background:#fdeeee;}.q-str h4{color:var(--brand);}
.q-gap{background:#f0f0f0;}.q-gap h4{color:var(--ink-2);}
.cd-empty-q{color:var(--ink-3);font-size:var(--t-small);font-family:var(--font-mono);}

.cd-warnbox{background:#fbf4e3;border:var(--bw-2) solid #B8860B;border-radius:var(--radius);padding:var(--s-4);margin-bottom:var(--s-6);font-size:var(--t-small);}
.cd-warnbox b{color:#B8860B;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;}

.cd-verdict{background:var(--ink);color:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);padding:var(--pad-card);margin-bottom:var(--s-6);}
.cd-verdict h3{color:var(--paper);font-size:var(--t-h4);}
.cd-verdict .cd-eyebrow{color:#F0817F;}
.cd-verdict p{color:var(--canvas-2);margin-top:var(--s-3);font-size:var(--t-small);}
.cd-lean{font-family:var(--font-mono);font-size:var(--t-small);font-weight:600;color:#fff;background:var(--brand);display:inline-block;padding:var(--s-1) var(--s-3);border-radius:var(--radius-sm);margin-top:var(--s-4);}

.cd-roadmap{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-6);}
.cd-road{flex:1;min-width:260px;background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad-card);}
.cd-road h4{font-size:var(--t-h4);margin-bottom:var(--s-1);}
.cd-road .when{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin-bottom:var(--s-3);}
.cd-road ul{list-style:none;}
.cd-road li{font-size:var(--t-small);padding:var(--s-2) 0;border-top:1px solid var(--hairline);}
.cd-road li:first-child{border-top:none;}
.cd-road .cd-empty{color:var(--ink-3);font-size:var(--t-small);}

.cd-detailwrap{display:flex;gap:var(--s-5);flex-wrap:wrap;margin-bottom:var(--s-6);}
.cd-detailcol{flex:1;min-width:300px;background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad-card);}
.cd-detailcol h3{font-size:var(--t-h4);margin-bottom:var(--s-3);}
table.cd-sc{width:100%;border-collapse:collapse;font-size:var(--t-small);}
table.cd-sc th,table.cd-sc td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hairline);}
table.cd-sc th{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);border-bottom:var(--bw) solid var(--line);}
table.cd-sc td.v{text-align:right;font-family:var(--font-mono);font-weight:600;width:54px;}
.cd-barmini{height:7px;background:var(--canvas-2);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:3px;}
.cd-barmini i{display:block;height:100%;}
.detail-lead .cd-barmini i,.detail-lead i{background:var(--brand);}
.detail-mgmt .cd-barmini i,.detail-mgmt i{background:#2F63AC;}
.detail-cog .cd-barmini i,.detail-cog i{background:#B8860B;}

/* bang tong hop admin */
.cd-summary-tbl td.cd-lean-cell{font-family:var(--font-mono);font-size:11px;font-weight:600;}
.cd-lean-h{color:var(--brand);}.cd-lean-o{color:#2F63AC;}.cd-lean-b{color:var(--ok);}
.cd-mini-score{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:12px;min-width:34px;text-align:center;padding:2px 4px;border:var(--bw) solid var(--line);border-radius:4px;}

@media(max-width:760px){.cd-crit{flex-direction:column;gap:var(--s-2);}.cd-scale{align-self:flex-start;}.cd-matrix{grid-template-columns:1fr;}.cd-maplist{columns:1;}}

@media print{
  .topbar,.cd-steps,.cd-prog,.cd-actions,.cd-no-print,.dl-no-print,#nav,#toast{display:none!important;}
  body{background:#fff!important;}
  .cd-verdict{background:#fff!important;color:#1A1A1A!important;border:2px solid #1A1A1A!important;}
  .cd-verdict h3,.cd-verdict .cd-eyebrow{color:#1A1A1A!important;}
  .cd-verdict p{color:#3D3D3D!important;}
  .cd-lean{background:#1A1A1A!important;color:#fff!important;}
  .cd-panel,.cd-verdict,.cd-road,.cd-detailwrap,.cd-scorecard{break-inside:avoid;page-break-inside:avoid;}
}


/* =====================================================================
   v38 - BANG DANG THE TREN DIEN THOAI (mobile card view)
   Duoi 720px: an thead, moi hang thanh mot the, nhan tren gia tri duoi.
   Nhan lay tu tieu de cot, gan qua data-label boi helper trong chandoan.js.
   Ap dung cho moi bang .tbl (hoc vien, ung vien, bai nop, buoi hoc,
   xep hang, chan doan admin, Top 5 hoc vien...). Bang .cd-sc / .md-table
   dung class khac nen khong bi anh huong.
   ===================================================================== */
@media (max-width:720px){
  table.tbl{border:none;box-shadow:none;background:transparent;border-radius:0;overflow:visible;display:block;}
  table.tbl thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  table.tbl tbody{display:block;}
  table.tbl tr{display:block;background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);margin-bottom:var(--s-4);padding:var(--s-2) var(--s-4);}
  table.tbl tbody tr:hover{background:var(--paper);}
  table.tbl td{display:block;width:auto!important;min-width:0!important;text-align:left!important;white-space:normal!important;
    padding:var(--s-3) 0;border-top:1px solid var(--hairline);vertical-align:top;}
  table.tbl tr td:first-child{border-top:none;}
  table.tbl td::before{content:attr(data-label);display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);margin-bottom:3px;}
  /* o khong co nhan (hang trong colspan, hang phu khong thead): khong hien nhan */
  table.tbl td:not([data-label])::before,table.tbl td[data-label=""]::before,table.tbl td[data-fullrow]::before{display:none;}
  table.tbl td[data-fullrow]{text-align:center!important;}
  table.tbl td.col-title{min-width:0;}
  /* bo wrapper cuon ngang thua khi da thanh the */
  .card > div[style*="overflow-x"], section > div[style*="overflow-x"]{overflow-x:visible;}
}


/* =====================================================================
   v47 - Trinh phat record co bao ve (an UI YouTube: share/link/chuot phai)
   Lop phu trong suot chan moi thao tac vao khung YouTube; controls rieng.
   ===================================================================== */
.pv-stage{position:relative;width:100%;padding-bottom:56.25%;height:0;background:#000;
  border:var(--bw-2) solid var(--line);border-radius:var(--radius);overflow:hidden;}
.pv-stage > div[id$="_yt"], .pv-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.pv-cover{position:absolute;inset:0;z-index:2;cursor:pointer;}
.pv-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.65));}
.pv-b{height:34px;width:34px;min-height:0;padding:0;background:transparent;border:none;box-shadow:none;color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.pv-b:hover{color:var(--brand);transform:none;box-shadow:none;}
.pv-b .ti{font-size:22px;}
.pv-seek{position:relative;flex:1;height:6px;background:rgba(255,255,255,.3);border-radius:99px;cursor:pointer;}
.pv-seek span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--brand);border-radius:99px;}
.pv-time{color:#fff;font-family:var(--font-mono);font-size:12px;white-space:nowrap;flex:0 0 auto;}
.pv-stage:fullscreen{padding-bottom:0;height:100%;width:100%;border-radius:0;}
.pv-stage:-webkit-full-screen{padding-bottom:0;height:100%;width:100%;border-radius:0;}


/* =====================================================================
   v50 - Form lam bai (bieu mau bai tap): rong, de doc, mobile-friendly
   ===================================================================== */
.modal--wide{max-width:920px;}
.fs-field{margin-bottom:var(--s-6);}
.fs-q{display:block;font-family:var(--font-body);font-size:1.05rem;font-weight:600;color:var(--ink);
  line-height:var(--lh-snug);margin-bottom:var(--s-3);text-transform:none;letter-spacing:0;}
.fs-q .req{color:var(--brand);}
.fs-opt{display:flex;align-items:flex-start;gap:var(--s-2);cursor:pointer;padding:var(--s-3) var(--s-4);
  border:var(--bw) solid var(--hairline);border-radius:var(--radius-sm);margin-top:var(--s-2);
  font-size:var(--t-body);line-height:var(--lh-snug);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);}
.fs-opt:hover{border-color:var(--brand);}
.fs-opt:has(input:checked){border-color:var(--brand);background:#fdeceb;}
.fs-opt input{width:auto;flex:0 0 auto;margin-top:3px;}
.fs-scale{display:flex;gap:var(--s-2);flex-wrap:wrap;}
.fs-scale label{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:var(--s-3) var(--s-5);
  border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);font-family:var(--font-mono);font-weight:600;
  transition:background var(--dur) var(--ease);}
.fs-scale label:has(input:checked){background:var(--brand);color:var(--paper);}
.fs-scale input{width:auto;position:absolute;opacity:0;}
/* Modal rong hon tren mobile + it padding thua */
@media (max-width:600px){
  .modal-bg{padding:var(--s-4) var(--s-3);align-items:flex-start;}
  .modal{margin-top:var(--s-3);padding:var(--pad-card-sm);}
  .fs-q{font-size:1rem;}
}

/* =====================================================================
   CHAN DOAN DONG LUC NHAN SU (bai tap buoi 2) - module DONGLUC
   Bang mau: brand #C73937 (Ky vong) · teal #0f7d8c (Tu quyet) ·
   ok #2f8f4e · warn #c9821f. Self-contained, prefix dl-.
   ===================================================================== */
/* Cau hoi khi lam bai */
.dl-q{border:var(--bw-2) solid var(--ink);border-radius:var(--radius);padding:var(--s-4) var(--s-4);margin-bottom:var(--s-3);background:var(--paper);}
.dl-qn{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brand);text-transform:uppercase;letter-spacing:.05em;}
.dl-qt{font-size:var(--t-body);font-weight:600;margin:3px 0 var(--s-3);}
.dl-opts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-2);}
.dl-opt{font-family:var(--font-body);font-size:var(--t-small);font-weight:600;padding:var(--s-3) 6px;border:var(--bw-2) solid var(--ink);border-radius:var(--radius-sm);background:var(--canvas-2);cursor:pointer;text-align:center;transition:background var(--dur) var(--ease),color var(--dur) var(--ease);}
.dl-opt:hover{background:#efe9df;}
.dl-opt.sel{background:var(--ink);color:#fff;}
/* Thanh tien do */
.dl-prog{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-5);flex-wrap:wrap;}
.dl-prog .dl-pct{font-family:var(--font-mono);font-size:var(--t-small);font-weight:600;color:var(--ink-3);}
.dl-pbar{flex:1;min-width:120px;height:10px;background:var(--canvas-2);border:var(--bw) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.dl-pbar i{display:block;height:100%;width:0;background:var(--brand);transition:width 400ms var(--ease);}
/* Bao cao */
.dl-report{background:var(--paper);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);padding:var(--pad-card);box-shadow:4px 4px 0 var(--ink);}
.dl-rflag{border:var(--bw-2) solid var(--brand);background:#fbeceb;border-radius:var(--radius);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-4);font-size:var(--t-body);font-weight:600;color:var(--brand);}
.dl-eyebrow{font-family:var(--font-mono);font-weight:600;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--brand);}
.dl-headline{font-family:var(--font-display);font-size:var(--t-h3);margin:var(--s-2) 0 2px;line-height:1.15;}
.dl-arche{font-size:var(--t-body);color:var(--ink-3);margin-bottom:var(--s-3);}
.dl-temp{font-family:var(--font-mono);font-size:var(--t-label);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:var(--radius-sm);display:inline-block;color:#fff;}
.dl-split{display:grid;grid-template-columns:300px 1fr;gap:var(--s-5);margin-top:var(--s-5);}
.dl-radarwrap{border:var(--bw-2) solid var(--ink);border-radius:var(--radius);padding:var(--s-3);background:var(--canvas-2);}
.dl-radarwrap svg{width:100%;height:auto;display:block;}
.dl-bal h4{font-family:var(--font-display);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:var(--s-3);}
.dl-brow{margin-bottom:var(--s-3);}
.dl-blh{font-size:var(--t-small);font-weight:700;display:flex;justify-content:space-between;gap:var(--s-2);}
.dl-track2{height:13px;background:var(--canvas-2);border:var(--bw) solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;margin-top:3px;}
.dl-fill2{height:100%;transition:width 500ms var(--ease);}
.dl-note{font-size:var(--t-small);margin-top:var(--s-3);background:var(--canvas-2);border-left:3px solid var(--ink);padding:var(--s-3) var(--s-3);border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.dl-grp{margin-top:var(--s-5);}
.dl-grp h3{font-family:var(--font-display);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:var(--s-3);display:flex;align-items:center;gap:7px;}
.dl-grp h3::before{content:"";width:16px;height:3px;background:#0f7d8c;}
.dl-grp.exp h3::before{background:var(--brand);}
.dl-bar{display:grid;grid-template-columns:130px 1fr 92px;gap:var(--s-3);align-items:center;margin-bottom:7px;}
.dl-bll{font-weight:700;font-size:var(--t-small);}
.dl-bar .dl-track{height:15px;background:var(--canvas-2);border:var(--bw) solid var(--ink);border-radius:var(--radius-sm);overflow:hidden;}
.dl-fl{display:block;height:100%;transition:width 500ms var(--ease);}
.dl-lv{font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:right;}
.dl-bar.rob .dl-track{box-shadow:inset 0 0 0 2px var(--brand);}
.dl-diag{margin-top:var(--s-6);border:var(--bw-2) dashed var(--ink);border-radius:var(--radius);padding:var(--s-4) var(--s-4);background:var(--canvas-2);}
.dl-diag h3{font-family:var(--font-display);font-size:var(--t-h4,1rem);margin-bottom:var(--s-3);}
.dl-leak{border-left:5px solid var(--brand);background:var(--paper);border:var(--bw) solid var(--hairline);border-radius:0 var(--radius) var(--radius) 0;padding:var(--s-3) var(--s-3);margin-bottom:var(--s-3);}
.dl-lt{font-weight:700;font-size:var(--t-body);}
.dl-lt small{font-family:var(--font-mono);font-weight:600;color:#fff;background:var(--brand);text-transform:uppercase;font-size:9px;letter-spacing:.05em;margin-left:8px;padding:2px 6px;border-radius:3px;vertical-align:middle;}
.dl-lt small.t{background:#0f7d8c;}
.dl-ds{font-size:var(--t-small);margin:4px 0 var(--s-2);color:var(--ink);}
.dl-fx{font-size:var(--t-small);}
.dl-fx b{color:var(--brand);}
.dl-pr{font-size:var(--t-small);margin-top:6px;background:var(--canvas-2);border-radius:var(--radius-sm);padding:7px 10px;font-style:italic;}
.dl-pr b{font-style:normal;color:var(--ink);}
.dl-plan{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-3);}
.dl-pcol{border:var(--bw) solid var(--ink);border-radius:var(--radius);padding:var(--s-3) var(--s-3);background:var(--paper);}
.dl-pcol h5{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);margin-bottom:5px;}
.dl-pcol p{font-size:var(--t-small);}
.dl-commit{margin-top:var(--s-5);border:var(--bw-2) solid var(--ink);border-radius:var(--radius);padding:var(--s-3) var(--s-4);}
.dl-commit h4{font-family:var(--font-display);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.dl-commit p{font-size:var(--t-body);}
.dl-foot{font-size:11px;color:var(--ink-3);margin-top:var(--s-4);}
@media (max-width:640px){
  .dl-split{grid-template-columns:1fr;}
  .dl-plan{grid-template-columns:1fr;}
  .dl-bar{grid-template-columns:110px 1fr 78px;}
}
@media print{
  .dl-report{box-shadow:none;border-width:2px;}
  .dl-grp,.dl-diag,.dl-split,.dl-leak,.dl-plan,.dl-report{break-inside:avoid;page-break-inside:avoid;}
}

/* ===== Service Blueprint (buoi 6) ===== */
.modal--tall{max-width:1120px;}
.bp-wrap{--bp-front:#F3F7F6;--bp-back:#F6EFE9;--bp-ev:#FBF8F3;font-size:.95rem;}
.bp-wrap .bp-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-bottom:var(--s-4);}
@media(max-width:720px){.bp-wrap .bp-kpis{grid-template-columns:1fr 1fr;}}
.bp-wrap .bp-kpi{background:var(--paper);border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);padding:var(--s-3) var(--s-4);}
.bp-wrap .bp-k-lbl{font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);}
.bp-wrap .bp-k-val{font-family:var(--font-mono);font-weight:700;font-size:1.4rem;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums;}
.bp-wrap .bp-kpi.hl .bp-k-val{color:var(--brand);}
.bp-wrap .bp-kpi.cov .bp-k-val{color:#245B6B;}
.bp-wrap .bp-bar{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4);}
.bp-wrap .bp-sel,.bp-wrap .bp-btn{font-family:var(--font-mono);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;background:var(--paper);color:var(--ink);border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);padding:var(--s-2) var(--s-3);cursor:pointer;min-height:40px;}
.bp-wrap .bp-sec{margin-bottom:var(--s-4);border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);overflow:hidden;}
.bp-wrap .bp-sec-h{background:var(--ink);color:var(--canvas);padding:var(--s-3) var(--s-4);font-family:var(--font-display);font-weight:600;font-size:.98rem;}
.bp-wrap .bp-sec-b{padding:var(--s-4);}
.bp-wrap .bp-hint{font-size:.86rem;color:var(--ink-2);margin-bottom:var(--s-3);}
.bp-wrap .bp-svc{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-3);}
@media(max-width:720px){.bp-wrap .bp-svc{grid-template-columns:1fr;}}
.bp-wrap .bp-fld{margin-bottom:var(--s-3);}
.bp-wrap .bp-fld:last-child{margin-bottom:0;}
.bp-wrap .bp-fld label{display:block;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:4px;}
.bp-wrap input,.bp-wrap textarea{width:100%;font-family:var(--font-body);font-size:.86rem;color:var(--ink);background:var(--paper);border:var(--bw) solid var(--hairline);border-radius:var(--radius-sm);padding:7px 9px;min-height:38px;resize:vertical;box-shadow:none;}
.bp-wrap input:focus,.bp-wrap textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 2px rgba(199,57,55,.28);}
.bp-wrap .bp-tablewrap{overflow-x:auto;border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);}
.bp-wrap table.bp{width:100%;border-collapse:collapse;min-width:720px;}
.bp-wrap table.bp th,.bp-wrap table.bp td{border:1px solid var(--hairline);vertical-align:top;padding:0;}
.bp-wrap .rowlab{background:var(--canvas-2);border-right:var(--bw-2) solid var(--line)!important;padding:var(--s-3)!important;min-width:140px;}
.bp-wrap .rowlab .rl-n{font-family:var(--font-display);font-weight:600;font-size:.86rem;display:block;}
.bp-wrap .rowlab .rl-h{font-family:var(--font-mono);font-size:.6rem;color:var(--ink-3);display:block;margin-top:2px;}
.bp-wrap .rowlab .rl-k{font-family:var(--font-mono);font-weight:700;font-size:.62rem;color:var(--brand);}
.bp-wrap .steph{background:var(--ink);color:var(--canvas);padding:var(--s-2)!important;min-width:170px;}
.bp-wrap .steph .sh-row{display:flex;gap:6px;align-items:center;}
.bp-wrap .steph .sh-n{font-family:var(--font-mono);font-weight:700;font-size:.7rem;color:#E8A6A4;flex:0 0 auto;}
.bp-wrap .steph input{background:rgba(255,255,255,.1);border:1px solid #4a4a4a;color:#fff;font-weight:600;font-size:.8rem;min-height:32px;}
.bp-wrap .steph.ro{font-family:var(--font-display);font-weight:600;font-size:.84rem;}
.bp-wrap .steph .delcol{font-family:var(--font-mono);font-weight:700;color:#E8A6A4;background:transparent;border:none;cursor:pointer;font-size:1rem;padding:0 6px;flex:0 0 auto;min-height:auto;}
.bp-wrap .steph .delcol:hover{color:#fff;}
.bp-wrap td.cell{padding:0!important;}
.bp-wrap td.cell textarea{border:none;border-radius:0;background:transparent;min-height:60px;font-size:.82rem;padding:7px;}
.bp-wrap td.cell.ro{padding:7px!important;}
.bp-wrap td.cell .cellval{font-size:.82rem;line-height:1.5;}
.bp-wrap tr.l-ev td.cell{background:var(--bp-ev);}
.bp-wrap tr.l-fr td.cell{background:var(--bp-front);}
.bp-wrap tr.l-ba td.cell,.bp-wrap tr.l-su td.cell{background:var(--bp-back);}
.bp-wrap tr.bpdiv td{padding:5px 10px!important;background:var(--canvas-2);border-top:var(--bw) dashed var(--line);border-bottom:var(--bw) dashed var(--line);font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);text-align:center;}
.bp-wrap tr.bpdiv.vis td{background:var(--brand);color:#fff;border-top:var(--bw-2) solid var(--line);border-bottom:var(--bw-2) solid var(--line);font-weight:700;}
.bp-wrap .bp-legend{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-3);font-family:var(--font-mono);font-size:.66rem;color:var(--ink-2);}
.bp-wrap .bp-legend span{display:flex;align-items:center;gap:6px;}
.bp-wrap .bp-legend i{width:13px;height:13px;border:1px solid var(--line);border-radius:2px;display:inline-block;}
.bp-wrap .bp-legend .sw-front{background:var(--bp-front);}
.bp-wrap .bp-legend .sw-back{background:var(--bp-back);}
.bp-wrap .bp-legend .sw-ev{background:var(--bp-ev);}
.bp-wrap table.bp-tbl{width:100%;border-collapse:collapse;font-size:.86rem;}
.bp-wrap table.bp-tbl th{font-family:var(--font-mono);font-weight:600;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;background:var(--canvas-2);border:var(--bw) solid var(--line);padding:var(--s-2) var(--s-3);color:var(--ink-2);}
.bp-wrap table.bp-tbl td{border:var(--bw) solid var(--hairline);padding:4px;vertical-align:top;}
.bp-wrap table.bp-tbl td textarea{min-height:48px;}
.bp-wrap .bpdel{font-family:var(--font-mono);font-weight:700;color:var(--brand);background:transparent;border:none;cursor:pointer;font-size:1rem;min-height:auto;padding:4px 8px;}
.bp-wrap .bpdel:hover{color:#fff;background:var(--brand);border-radius:var(--radius-sm);}
.bp-wrap .c{text-align:center;}
.bp-wrap .bp-add{margin-top:var(--s-3);font-family:var(--font-mono);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;background:var(--paper);color:var(--ink);border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);padding:var(--s-2) var(--s-4);cursor:pointer;min-height:40px;}
.bp-wrap .bp-add.acc{background:#245B6B;color:#fff;border-color:#245B6B;margin-top:0;margin-bottom:var(--s-3);}
.bp-wrap .bp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);}
@media(max-width:720px){.bp-wrap .bp-grid2{grid-template-columns:1fr;}}
.bp-wrap .bp-panel{border:var(--bw-2) solid var(--line);border-radius:var(--radius-sm);padding:var(--s-4);background:var(--canvas);}
.bp-wrap .bp-panel h4{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin-bottom:var(--s-3);}
.bp-wrap.bp-ro .bp-rohead{margin-bottom:var(--s-3);}
.bp-wrap.bp-ro .bp-roflow{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-top:2px;}
.bp-wrap .bp-roh{margin:var(--s-4) 0 var(--s-2);font-size:1rem;}
.bp-wrap .bp-empty{color:var(--ink-3);font-style:italic;}
.bp-wrap .bp-rofld{margin-bottom:var(--s-3);font-size:.84rem;}
.bp-wrap .bp-rofld span{display:block;font-family:var(--font-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:2px;}


/* ===================================================================
   DA KHOA · o chon khoa tren thanh dieu huong
   Chip toi dat tren thanh den, chu sang. Popup cua the select do he dieu
   hanh ve nen phai ep mau chu toi tren nen trang, khong duoc de inherit.
   =================================================================== */
.coursepick-wrap{
  display:inline-flex; align-items:center; gap:8px;
  margin-left:var(--s-4); margin-right:auto;
  height:38px; padding:0 var(--s-3) 0 var(--s-4);
  border:var(--bw) solid rgba(255,255,255,.30);
  border-radius:var(--radius-sm, 4px);
  background:rgba(255,255,255,.07);
  color:var(--paper);
  cursor:pointer; position:relative;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-width:0;
}
.coursepick-wrap:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); }
.coursepick-wrap > .ti{ flex:0 0 auto; font-size:16px; color:#E8B4B2; }
.coursepick-wrap::before{
  content:"KHÓA";
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.08em; color:rgba(255,255,255,.55);
  flex:0 0 auto;
}
.coursepick-wrap::after{
  content:"\25BE";                 /* mui ten xuong */
  font-size:11px; color:rgba(255,255,255,.6); flex:0 0 auto; margin-left:2px;
}
.coursepick-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:0; outline:none; cursor:pointer; padding:0;
  background:transparent;
  color:var(--paper) !important;
  font-family:var(--font-mono); font-size:var(--t-label); font-weight:500;
  max-width:230px; min-width:0;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
/* Popup cua select do he dieu hanh ve, phai ep mau ro rang */
.coursepick-wrap select option{
  color:#1A1A1A !important;
  background:#FFFFFF !important;
  font-family:var(--font-mono);
}
.coursepick-wrap:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 2px rgba(199,57,55,.45);
}

@media (max-width:1180px){
  .coursepick-wrap select{ max-width:150px; }
  .coursepick-wrap::before{ display:none; }
}
@media (max-width:820px){
  .coursepick-wrap{ margin-left:0; margin-right:0; width:100%; order:3; }
  .coursepick-wrap select{ max-width:none; width:100%; }
  .coursepick-wrap::before{ display:inline; }
  .topbar .inner{ flex-wrap:wrap; }
}

/* Trang hoc vien: o chuyen khoa dung chung kieu tren */
/* Huy hieu dem so ban dang ky moi tren nut nav */
.navbadge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; margin-left:6px;
  background:var(--brand); color:#fff;
  font-family:var(--font-mono); font-size:11px; font-weight:600; line-height:1;
  border-radius:10px; flex:0 0 auto;
}
.navbadge.hidden{ display:none; }

/* =====================================================================
   DIEN THOAI (tu 860px tro xuong)
   Van de do duoc ngay 16/10/2026: thanh menu cao 201px vi nut xuong ba hang,
   an mot phan tu man hinh truoc khi thay noi dung.
   Bang dang the da co san tu ban v38 (xem khoi @media max-width:720px o tren,
   nhan do helper trong chandoan.js gan). KHONG viet lai o day.
   ===================================================================== */
@media(max-width:860px){

  /* ---- Thanh menu chi con icon ----
     KHONG dung cuon ngang: nav chua menu tha xuong, dat overflow len no la
     cat mat menu con. Bo chu, giu icon, nam gon mot hang. */
  .topbar nav button{padding:var(--s-2) var(--s-3);min-width:44px;justify-content:center;}
  .topbar nav button .nhan-nut{display:none;}
  .topbar nav button .ti{font-size:20px;}
  .topbar nav button .navbadge{display:inline-flex;}
  /* Menu con van hien du chu */
  .topbar .navmenu button{min-width:0;padding:var(--s-3) var(--s-4);justify-content:flex-start;}
  .topbar .navmenu button .nhan-nut{display:inline;}

  /* Xep lai thanh tren: hang mot la logo va o chon khoa, hang hai la nav.
     Truoc do o chon khoa xuong rieng mot hang, an them 56px man hinh. */
  .topbar .inner{flex-wrap:wrap;gap:var(--s-3);}
  .topbar .brand{order:1;flex:0 0 auto;}
  /* Cho khung chon khoa co lai de nam canh logo. Phai go margin-left va
     cho ca the <select> ben trong co, neu khong no giu be rong noi tai
     roi day ca khung xuong hang rieng. */
  .topbar .coursepick-wrap{order:2;flex:1 1 0;min-width:0;margin-left:0;}
  .topbar .coursepick-wrap::before{content:"";display:none;}
  .topbar .coursepick-wrap select{min-width:0;width:100%;}
  .topbar nav{order:3;flex:1 0 100%;justify-content:space-between;}
}


/* =====================================================================
   v5.9 - BANG BUOI HOC GON LAI
   Truoc day bang nay co 12 cot, trong do hai o nhap gio hoc va mot o
   datetime-local chiem gan 500px, nen bang tran ra ngoai va luc nao cung
   co thanh keo ngang. Gio hoc va han nop chuyen thanh chu bam vao sua o
   rieng, bon nut chuan bi gom vao mot o xep 2x2. Con 7 cot.
   Duoi 720px khoi the o muc v38 van lam viec nhu cu, khong dung toi day.
   ===================================================================== */
.tbl--buoi{table-layout:fixed;width:100%;}
.tbl--buoi th,.tbl--buoi td{vertical-align:middle;padding:var(--s-3);}
.tbl--buoi .c-so{width:48px;}
.tbl--buoi .c-ngay{width:156px;}
.tbl--buoi .c-tt{width:148px;}
.tbl--buoi .c-han{width:150px;}
.tbl--buoi .c-viec{width:216px;}
.tbl--buoi .c-dd{width:104px;}
/* Nut trong bang khong duoc roi dong, roi dong la hang cao gap doi */
.tbl--buoi .btn{white-space:nowrap;}

.tbl--buoi .bh-ten{font-weight:600;line-height:var(--lh-snug);overflow-wrap:anywhere;}
.tbl--buoi .bh-sp{font-weight:400;font-size:var(--t-small);color:var(--ink-3);
  line-height:var(--lh-snug);margin-top:3px;overflow-wrap:anywhere;}
.tbl--buoi .bh-ngay{font-size:var(--t-small);margin-bottom:5px;}
.tbl--buoi .bh-gio{width:100%;justify-content:center;}
.tbl--buoi .bh-han{font-size:11px;}
.tbl--buoi select.bh-tt{min-width:0;width:100%;font-size:13px;padding-left:var(--s-3);}
.tbl--buoi .bh-gio{padding-left:var(--s-2);padding-right:var(--s-2);}
.tbl--buoi .c-han .btn{padding-left:var(--s-2);padding-right:var(--s-2);}

/* Bon nut chuan bi: hai hang hai cot, nut nao cung dan trai cho de doc */
.bh-viec{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);}
.bh-viec .btn{width:100%;justify-content:flex-start;gap:4px;min-width:0;
  padding-left:var(--s-2);padding-right:var(--s-2);letter-spacing:.02em;}
.bh-viec .btn i{flex:0 0 auto;}
.tbl--buoi .c-han .btn,.tbl--buoi .c-dd .btn{max-width:100%;}

@media (max-width:1100px){
  /* Man hinh hep hon: bop cac cot co dinh de nhuong cho cho cot ten.
     KHONG xep bon nut thanh mot cot, lam vay hang cao gap doi ma khong
     giam duoc be ngang. */
  .tbl--buoi th,.tbl--buoi td{padding:var(--s-2);}
  .tbl--buoi .c-ngay{width:140px;}
  .tbl--buoi .c-tt{width:132px;}
  .tbl--buoi .c-han{width:136px;}
  .tbl--buoi .c-viec{width:200px;}
  .tbl--buoi .c-dd{width:92px;}
}
@media (max-width:720px){
  /* Trong the tren dien thoai thi bo het be rong co dinh */
  .tbl--buoi{table-layout:auto;}
  .bh-viec{grid-template-columns:1fr 1fr;}
}


/* =====================================================================
   v6.0 - BANG BUOI HOC, ba viec cua thiet ke
   1. Chan be rong. Trang dung --maxw 1760px, bang bam theo nen cot ten
      phinh toi gan 860px tren man hinh rong, mat phai chay het mot quang
      trong de noi ten buoi voi cac nut o phia phai.
   2. Tra mau do ve dung nghia. Truoc day moi hang co toi chin nut do, khoa
      moi mo la mot buc tuong do, do nhieu den muc khong con bao gi ca. Gio
      mac dinh la nut vien, xong viec thi vien petrol, va chi con do o dung
      mot truong hop: buoi da day ma chua diem danh ai.
   3. Danh dau buoi sap toi. Day la thong tin Hai can nhat khi mo man hinh.
   ===================================================================== */
#tab-buoihoc > div{max-width:1320px;}

/* Xong viec: vien va chu petrol, doc luot la biet con thieu cho nao */
.tbl--buoi .btn.bh-xong{border-color:var(--accent);color:var(--accent-text);}
.tbl--buoi .btn.bh-xong:hover{border-color:var(--accent);}

/* Buoi sap toi */
.tbl--buoi tr.bh-sap-toi,
.tbl--buoi tbody tr.bh-sap-toi:hover{background:var(--accent-bg);}
.tbl--buoi tr.bh-sap-toi td:first-child{box-shadow:inset 4px 0 0 var(--accent);}
.tbl--buoi .bh-nhan{margin-top:var(--s-3);}

@media (max-width:720px){
  /* Trong the tren dien thoai, vach danh dau chuyen len canh tren cua the */
  .tbl--buoi tr.bh-sap-toi td:first-child{box-shadow:none;}
  .tbl--buoi tr.bh-sap-toi{border-color:var(--accent);}
}


/* =====================================================================
   v6.1 - BANG BUOI HOC, BO BOT KHUNG
   Moi hang dang co tam cai khung vien dam kem do bong: bon nut chuan bi,
   o gio, o han nop, o trang thai, o diem danh. Nam hang la bon muoi khung
   tren mot man hinh. Khung dam trong he thiet ke nay la de dung CAU TRUC,
   khong phai de boc tung cai nut, boc het thi khong con cai nao noi len.
   Gio moi hang chi con DUNG MOT nut that, la diem danh. Cac viec con lai
   la chu bam duoc, khong khung, khong bong.
   ===================================================================== */
.bh-lnk{display:inline-flex;align-items:center;gap:6px;background:none;border:0;box-shadow:none;
  padding:3px 0;margin:0;cursor:pointer;font-family:var(--font-mono);font-size:var(--t-label);
  /* ink-3 do duoc 5.33 tren nen trang, nhung tut xuong 4.44 tren hang buoi
     sap toi co nen petrol nhat, duoi muc doc duoc. Chu in hoa co 11px thi
     cang can tuong phan, nen dung ink-2. */
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);
  white-space:nowrap;min-height:0;text-align:left;transition:color var(--dur) var(--ease);}
.bh-lnk i{font-size:15px;flex:0 0 auto;}
.bh-lnk:hover{color:var(--brand-text);text-decoration:underline;text-underline-offset:3px;}
.bh-lnk:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm);}
/* Viec da xong: petrol, doc luot la biet con thieu cho nao */
.bh-lnk.bh-xong{color:var(--accent-text);}
.bh-lnk.bh-xong:hover{color:var(--brand-text);}
/* Gio hoc la so, doc theo hang nen de chu to hon mot chut va khong in hoa */
.tbl--buoi .bh-gio{font-size:var(--t-small);text-transform:none;letter-spacing:0;color:var(--ink);}

/* O trang thai: giu vien mong, bo do bong, de no khong doi trong so voi nut */
.tbl--buoi select.bh-tt{border-width:var(--bw);box-shadow:none;}

/* Luoi bon viec chuan bi: khong con nut nen gian dong cho de doc */
.bh-viec{gap:var(--s-2) var(--s-4);}
.bh-viec .bh-lnk{width:100%;}

/* Diem danh la nut that duy nhat con lai cua hang */
.tbl--buoi .c-dd .btn{box-shadow:none;}
.tbl--buoi .c-dd .btn:hover{box-shadow:var(--shadow-sm);}

@media (max-width:720px){
  /* Trong the tren dien thoai, chu bam duoc phai du cao cho ngon tay */
  .bh-lnk{padding:10px 0;}
  .bh-viec{gap:0 var(--s-4);}
}


/* =====================================================================
   v6.2 - BA BANG CON LAI: HOC VIEN, BAI NOP, DANG KY
   Trang dat --maxw 1760px, bang nao cung keo het chieu do, nen cot cach
   nhau cả gang tay va mat phai chay mot quang trong moi noi duoc ten nguoi
   voi nut o cuoi hang. Chan be rong theo so cot that can.
   Phan mau da sua trong admin.js: chip chi danh cho truong hop khac thuong,
   do chi danh cho viec con ton.
   ===================================================================== */
#hvTable{max-width:1120px;}
#subTable{max-width:1240px;}
#dkTable{max-width:1320px;}