/* =====================================================================
   NEO-BRUTALISM v4.0 "Mono Disciplined" - Vu Hai
   Style chung cho ca 3 trang (dang nhap / admin / hoc vien)
   Da hop nhat, mot nguon moi class.
   ===================================================================== */
:root{
  --brand:#c73937; --brand-dark:#a82c2a; --brand-soft:#b85048;
  --ink:#1A1A1A; --ink-2:#3D3D3D; --ink-3:#6B6B6B;
  --line:#1A1A1A; --paper:#FFFFFF; --canvas:#F7F4EF; --canvas-2:#EFEAE1; --hairline:#E4DED4;
  --ok:#1f7a3d; --warn:#9a6b00; --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;
  --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);
  --bw:1.5px; --bw-2:2px; --radius:8px; --radius-sm:6px;
  --shadow:3px 3px 0 var(--ink); --shadow-lg:5px 5px 0 var(--ink); --shadow-sm:2px 2px 0 var(--ink); --shadow-brand:3px 3px 0 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-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);}
.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:46px;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);}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand);}
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(--canvas);color:var(--ink-2);border:var(--bw) solid var(--line);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-dark);} .badge--grey{background:var(--canvas-2);color:var(--ink-3);}

/* ---- 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-soft);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{font-family:var(--font-display);font-weight:700;font-size:var(--t-h4);color:var(--paper);white-space:nowrap;flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;}
.topbar .brand .brand-logo{width:32px;height:32px;display:block;flex:0 0 auto;}
.topbar .brand .dot{color:var(--brand);}
.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:#E8908F;}
.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; }