/* An Academy — bộ thành phần giao diện. Nạp sau tokens.css. Tên lớp giữ theo mã trang học (tiếng Việt không dấu). */

/* ---------- Nền ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nen);color:var(--chu);font:400 16px/1.55 var(--font-sans)}
img{max-width:100%}
a{color:var(--xanh);text-underline-offset:2px}
a:hover{color:var(--xanh-dam)}
h1,h2,h3{font-weight:600;line-height:1.25;color:var(--xanh-dam);text-wrap:balance;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--xanh);outline-offset:2px}
.khung{max-width:var(--khung-toi-da);margin:0 auto;padding-inline:var(--khoang-4)}
.chu-phu{color:var(--chu-phu)}
.so{font-variant-numeric:tabular-nums}
.an-di{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Giảm chuyển động: bỏ mọi dịch chuyển; phần tử vốn có chuyển màu thì vẫn giữ chuyển màu và độ mờ, không trễ. Viền focus đổi tức thì vì outline không nằm trong danh sách. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition-property:color,background-color,border-color,opacity!important;transition-delay:0s!important}}

/* ---------- Nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:var(--khoang-2);min-height:var(--cham-toi-thieu);padding:10px 18px;border-radius:var(--bo-vua);border:1px solid var(--xanh);background:var(--xanh);color:var(--trang);font:600 16px/20px var(--font-sans);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s}
.nut:hover{background:var(--xanh-dam);border-color:var(--xanh-dam);color:var(--trang)}
.nut.phu{background:var(--trang);color:var(--xanh)}
.nut.phu:hover{background:var(--xanh-nhat);color:var(--xanh-dam)}
.nut.nhe{background:transparent;border-color:transparent;color:var(--xanh);padding-inline:10px}
.nut.nhe:hover{background:var(--xanh-nhat);color:var(--xanh-dam)}
.nut.nguy{background:var(--trang);border-color:var(--do);color:var(--do)}
.nut.nguy:hover{background:var(--do-nhat);color:var(--do)}
.nut.lon{min-height:52px;padding:12px 24px;font-size:17px}
.nut.rong{width:100%}
.nut:disabled,.nut[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.nut[aria-busy="true"]{cursor:wait}
.hang-nut{display:flex;flex-wrap:wrap;gap:var(--khoang-2)}

/* ---------- Ô nhập ---------- */
.truong{display:grid;gap:6px;margin-top:var(--khoang-4)}
.truong>label,.nhan-truong{font-weight:600}
.tuy-chon{font-weight:400;color:var(--chu-phu)}
.o-nhap,input[type=text],input[type=tel],input[type=password],input[type=number],input[type=search],textarea,select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--vien-dam);border-radius:var(--bo-vua);background:var(--trang);color:var(--chu);font:400 16px/1.5 var(--font-sans)}
textarea{min-height:96px;resize:vertical}
.o-nhap:focus,input:focus,textarea:focus,select:focus{outline:2px solid var(--xanh);outline-offset:1px;border-color:var(--xanh)}
[aria-invalid="true"]{border-color:var(--do)}
input[readonly]{background:var(--nen);color:var(--chu-phu)}
.goi-y{color:var(--chu-phu)}
.loi-truong{color:var(--do)}
.dong-y{display:flex;gap:10px;align-items:flex-start;margin-top:var(--khoang-5);font-weight:400;cursor:pointer}
.dong-y input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--xanh)}

/* ---------- Thông báo ---------- */
.thong-bao{border-radius:var(--bo-vua);padding:10px 12px}
.thong-bao:empty{display:none}
.thong-bao.loi{background:var(--do-nhat);color:var(--do)}
.thong-bao.ok{background:var(--xanh-nhat);color:var(--xanh-dam)}
.thong-bao.luu-y{background:var(--vang-nhat);color:var(--nhan-chu)}

/* ---------- Nhãn ---------- */
.nhan{display:inline-flex;align-items:center;gap:var(--khoang-1);padding:1px 10px;border-radius:var(--bo-tron);background:var(--xanh-nhat);color:var(--xanh-dam);font:600 16px/24px var(--font-sans);white-space:nowrap}
.nhan.vang{background:var(--nhan);color:var(--chu)}
.nhan.xam{background:var(--nen);color:var(--chu-phu);box-shadow:inset 0 0 0 1px var(--vien)}
.nhan.do{background:var(--do-nhat);color:var(--do)}
.dem{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--bo-tron);background:var(--xanh);color:var(--trang);font:600 14px/1 var(--font-sans);font-variant-numeric:tabular-nums}

/* ---------- Dấu chờ duyệt ---------- */
.cho{background:var(--cho-nen);color:var(--cho-chu);border-radius:var(--bo-nho);padding:0 4px}

/* ---------- Thẻ ---------- */
.the{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-lon);padding:var(--khoang-6)}
@media (max-width:480px){.the{padding:var(--khoang-5)}}

/* ---------- Đầu trang ---------- */
.dau{background:var(--trang);border-bottom:1px solid var(--vien);position:sticky;top:env(safe-area-inset-top,0px);z-index:10;min-height:65px}
.dau .khung{display:flex;align-items:center;justify-content:space-between;gap:var(--khoang-3);min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:var(--cham-toi-thieu)}
.logo img{display:block;width:auto}
.logo-khien{height:40px}
.logo-chu{height:22px}
@media (max-width:480px){.logo{gap:8px}.logo-khien{height:34px}.logo-chu{height:18px}}
.menu{display:flex;align-items:center;gap:var(--khoang-2);flex-wrap:wrap}
.menu a:not(.nut){display:inline-flex;align-items:center;min-height:var(--cham-toi-thieu);padding:0 10px;border-radius:var(--bo-vua);color:var(--chu);text-decoration:none;font-weight:600}
.menu a:not(.nut):hover{background:var(--xanh-nhat)}
.menu a[aria-current="page"]{color:var(--xanh)}
.tai-khoan{display:inline-flex;align-items:center;gap:var(--khoang-2);min-height:var(--cham-toi-thieu);padding:4px 10px 4px 4px;border-radius:var(--bo-tron);border:1px solid var(--vien);background:var(--trang);color:var(--chu);text-decoration:none;font-weight:600}
.tai-khoan:hover{border-color:var(--xanh)}
.anh-dai-dien{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:var(--bo-tron);background:var(--xanh-nhat);color:var(--xanh-dam);font:600 15px/1 var(--font-sans)}
.anh-dai-dien.gv{background:var(--xanh);color:var(--trang)}
@media (max-width:480px){.dau{min-height:57px}.dau .khung{flex-wrap:wrap;padding-block:var(--khoang-2)}.menu .nut{padding:8px 12px}}

/* Thanh đầu trang (14/10/2026; chuyển từ cong-khai.css để khu giáo viên cũng một hàng): điện thoại một hàng; trang đăng nhập/đăng ký chỉ có logo và không dính trên cùng */
.dau.dau-tinh{position:static}
@media (max-width:480px){
  .dau .khung{flex-wrap:nowrap;min-height:56px;padding-block:6px}
  .dau .menu{flex-wrap:nowrap;gap:4px}
  .dau .muc-khoa-hoc{display:none!important}
  .dau .nut-dang-nhap{background:transparent;border-color:transparent;color:var(--xanh);padding-inline:8px}
  .dau .menu .nut{padding:8px 14px}
}
.dau .menu a{white-space:nowrap}
@media (max-width:359px){.dau .logo-chu{display:none}}
@media (max-width:480px){.dau .muc-khoa-cua-toi{display:none!important}.dau .tai-khoan .ten-tk{display:none}.dau .tai-khoan{padding:4px}}

/* ---------- Chân trang ---------- */
.chan{border-top:1px solid var(--vien);background:var(--trang);margin-top:var(--khoang-12);padding-block:var(--khoang-6);color:var(--chu-phu)}
.chan .khung{display:grid;gap:var(--khoang-4)}
.chan strong{color:var(--chu)}
.chan a{display:inline-flex;align-items:center;min-height:var(--cham-toi-thieu)}
@media (min-width:720px){.chan .khung{grid-template-columns:1fr 1fr}}

/* ---------- Màn trống ---------- */
/* Ô trống dùng chung (public/js/o-trong.js): chỉ icon nhỏ + ghi chú (+ nút), không hình minh họa */
.trong{display:grid;justify-items:center;gap:var(--khoang-2);text-align:center;padding:var(--khoang-5) var(--khoang-4)}
.trong .trong-icon{width:36px;height:36px;color:var(--xanh);opacity:.55}
.trong p{color:var(--chu-phu);max-width:36ch}
.trong .nut{margin-top:var(--khoang-2)}

/* ---------- Thẻ khóa ---------- */
.ds-khoa{display:grid;gap:var(--khoang-4);grid-template-columns:minmax(0,1fr)}
.the-khoa{display:flex;flex-direction:column;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-lon);overflow:hidden;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){.the-khoa:hover{border-color:var(--xanh);box-shadow:var(--bong-noi)}}
.the-khoa .bia{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--xanh-nhat)}
.the-khoa .than{display:flex;flex-direction:column;gap:var(--khoang-2);padding:var(--khoang-4);flex:1}
.the-khoa h3{font-size:20px;line-height:28px}
.the-khoa .mo-ta{color:var(--chu-phu);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.the-khoa .so-lieu{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--chu-phu)}
.the-khoa .nut{margin-top:auto;align-self:flex-start}
@media (min-width:720px){
  .ds-khoa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-khoa.mot{grid-template-columns:minmax(0,1fr)}
  .ds-khoa.mot .the-khoa{flex-direction:row}
  .ds-khoa.mot .bia{width:45%;aspect-ratio:auto;min-height:260px}
  .ds-khoa.mot .than{padding:var(--khoang-8);justify-content:center}
  .ds-khoa.mot h3{font-size:24px;line-height:32px}
  .ds-khoa.mot .nut{margin-top:var(--khoang-3)}
}
@media (min-width:1000px){.ds-khoa:not(.mot){grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Thanh tiến độ ---------- */
.thanh{height:10px;background:var(--xanh-nhat);border-radius:var(--bo-tron);overflow:hidden}
.thanh>span{display:block;height:100%;background:var(--xanh);border-radius:var(--bo-tron)}
.thanh.manh{height:6px}
.pt{color:var(--chu-phu);font-variant-numeric:tabular-nums}

/* ---------- Danh sách bài ---------- */
.ds-bai{list-style:none;margin:0;padding:0;background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-lon);overflow:hidden}
.ds-bai li+li{border-top:1px solid var(--vien)}
.ds-bai a,.ds-bai .dong{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--khoang-3);align-items:start;padding:var(--khoang-3) var(--khoang-4);color:inherit;text-decoration:none;min-height:var(--cham-toi-thieu)}
.ds-bai a:hover{background:var(--nen)}
.ds-bai .dau-dong{width:28px;height:28px;border-radius:var(--bo-tron);border:2px solid var(--vien-dam);display:inline-flex;align-items:center;justify-content:center;font:600 14px/1 var(--font-sans);color:var(--trang);margin-top:2px}
.ds-bai .xong .dau-dong{background:var(--xanh);border-color:var(--xanh)}
.ds-bai .dang-hoc .dau-dong{border-color:var(--xanh);background:var(--trang);box-shadow:inset 0 0 0 5px var(--trang),inset 0 0 0 14px var(--xanh)}
.ds-bai .so-bai{display:block;color:var(--nhan-chu);font-weight:600}
.ds-bai .ten{display:block;font-weight:600;overflow-wrap:anywhere}
.ds-bai .tl{color:var(--chu-phu);white-space:nowrap;font-variant-numeric:tabular-nums}
.ds-bai .phu{display:block;color:var(--chu-phu)}
.ds-bai .dang-hoc>a,.ds-bai .dang-hoc>.dong{background:var(--xanh-nhat)}
.ds-bai .khoa-bai>.dong{color:var(--chu-phu)}
.ds-bai .khoa-bai .ten{font-weight:400}
.ds-bai .thanh{margin-top:6px}

/* ---------- Tab ---------- */
.tab-ds{display:flex;gap:var(--khoang-1);border-bottom:1px solid var(--vien);overflow-x:auto;scrollbar-width:none}
.tab{display:inline-flex;align-items:center;gap:var(--khoang-2);min-height:48px;padding:0 var(--khoang-4);border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;color:var(--chu-phu);font:600 16px/1 var(--font-sans);white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--chu)}
.tab[aria-selected="true"]{color:var(--xanh-dam);border-bottom-color:var(--xanh)}
.tab .dem{background:var(--xanh-nhat);color:var(--xanh-dam)}
.tab[aria-selected="true"] .dem{background:var(--xanh);color:var(--trang)}
.tab-noi{padding-block:var(--khoang-4)}

/* ---------- Lời giảng ---------- */
.loi-giang{display:grid;gap:2px}
.cau{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--khoang-2);width:100%;padding:8px 10px;border:0;border-radius:var(--bo-vua);background:none;color:var(--chu);text-align:left;font:400 16px/25px var(--font-sans);cursor:pointer}
.cau:hover{background:var(--nen)}
.cau .moc{color:var(--chu-phu);font-variant-numeric:tabular-nums}
.cau[aria-current="true"]{background:var(--xanh-nhat)}
.cau[aria-current="true"] .moc{color:var(--xanh)}
.cau mark{background:var(--cho-nen);color:inherit;border-radius:3px}
.viec-tuan{background:var(--vang-nhat);border-radius:var(--bo-lon);padding:var(--khoang-5);display:grid;gap:var(--khoang-2)}
.viec-tuan h3{color:var(--nhan-chu);font-size:17px}
.tai-lieu{list-style:none;margin:0;padding:0;display:grid;gap:var(--khoang-2)}
.tai-lieu a{display:flex;align-items:center;gap:var(--khoang-3);min-height:var(--cham-toi-thieu);padding:8px 12px;border:1px solid var(--vien);border-radius:var(--bo-vua);background:var(--trang);text-decoration:none;font-weight:600}
.tai-lieu a:hover{border-color:var(--xanh)}
.tai-lieu .loai{font:600 14px/1 var(--font-sans);color:var(--do);border:1px solid currentColor;border-radius:4px;padding:3px 4px}

/* ---------- Bình luận ---------- */
.binh-luan{list-style:none;margin:0;padding:0;display:grid;gap:var(--khoang-5)}
.bl{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--khoang-3)}
.bl-dau{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.bl-ten{font-weight:600}
.bl-luc{color:var(--chu-phu)}
.bl-noi{margin-top:4px;overflow-wrap:anywhere}
.bl-viec{display:flex;gap:var(--khoang-1);margin-top:2px;margin-left:-10px}
.bl-viec .nut{min-height:36px;padding:4px 10px}
.bl .tra-loi{list-style:none;margin:var(--khoang-3) 0 0;padding:0;display:grid;gap:var(--khoang-4)}
.bl.cua-gv>.bl-than>.bl-noi{background:var(--xanh-nhat);border-radius:var(--bo-vua);padding:8px 12px}
.moc-video{display:inline-flex;align-items:center;gap:4px;padding:0 8px;border:0;border-radius:var(--bo-tron);background:var(--xanh-nhat);color:var(--xanh-dam);font:600 15px/26px var(--font-sans);font-variant-numeric:tabular-nums;cursor:pointer;vertical-align:baseline}
.moc-video:hover{background:var(--xanh);color:var(--trang)}
.soan{display:grid;gap:var(--khoang-2);padding:var(--khoang-4);background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-lon)}
.soan textarea{min-height:72px}
.soan-chan{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--khoang-2)}
.soan-chan .dong-y{margin:0}

/* ---------- Trò chuyện ---------- */
.tro-chuyen{display:flex;flex-direction:column;min-height:420px;background:var(--nen);border:1px solid var(--vien);border-radius:var(--bo-lon);overflow:hidden}
.tc-dau{display:flex;align-items:center;gap:var(--khoang-3);padding:var(--khoang-3) var(--khoang-4);background:var(--trang);border-bottom:1px solid var(--vien)}
.tc-dau .phu{color:var(--chu-phu)}
.tc-ds{flex:1;display:flex;flex-direction:column;gap:var(--khoang-2);padding:var(--khoang-4);overflow-y:auto}
.tc-ngay{align-self:center;color:var(--chu-phu);padding:4px 0}
.tin{max-width:min(80%,520px);padding:8px 12px;border-radius:var(--bo-vua);overflow-wrap:anywhere}
.tin.cua-ho{align-self:flex-start;background:var(--trang);border:1px solid var(--vien);border-bottom-left-radius:4px}
.tin.cua-toi{align-self:flex-end;background:var(--xanh);color:var(--trang);border-bottom-right-radius:4px}
.tin .tu-bai{display:block;font-weight:600;margin-bottom:2px;color:var(--nhan-chu)}
.tin.cua-toi .tu-bai{color:var(--vang-nhat)}
.tin .luc{display:block;margin-top:2px;text-align:right;color:var(--chu-phu)}
.tin.cua-toi .luc{color:var(--xanh-nhat)}
.tc-soan{display:flex;gap:var(--khoang-2);align-items:flex-end;padding:var(--khoang-3);background:var(--trang);border-top:1px solid var(--vien)}
.tc-soan textarea{min-height:48px;height:48px}

/* ---------- Trang học ---------- */
.trang-hoc{display:grid;grid-template-columns:minmax(0,1fr);background:var(--nen)}
.san-khau{background:var(--nen-toi);color:var(--chu-tren-toi);padding:var(--khoang-3) var(--khoang-4) var(--khoang-4)}
.san-khau .duong-dan{display:flex;align-items:center;justify-content:space-between;gap:var(--khoang-3);margin-bottom:var(--khoang-3)}
.san-khau a{color:var(--chu-tren-toi)}
.san-khau .phu{color:var(--chu-phu-tren-toi)}
.san-khau h1{color:var(--chu-tren-toi);font-size:20px;line-height:28px}
.khung-video{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;background:var(--nen);border-radius:var(--bo-lon);overflow:hidden;box-shadow:var(--bong-video)}
.khung-video iframe,.khung-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.hoc-noi{padding:0 var(--khoang-4) var(--khoang-8)}
.hoc-ben{padding:var(--khoang-4)}
@media (max-width:899px){.san-khau{position:sticky;top:0;z-index:5;padding:0}.san-khau .duong-dan{display:none}.khung-video{border-radius:0;box-shadow:none}}
@media (min-width:900px){
  .trang-hoc{grid-template-columns:minmax(0,1fr) var(--cot-ben);grid-template-areas:"san ben" "noi ben"}
  .san-khau{grid-area:san;padding:var(--khoang-4) var(--khoang-6) var(--khoang-6)}
  .hoc-noi{grid-area:noi;padding:0 var(--khoang-6) var(--khoang-12)}
  .hoc-ben{grid-area:ben;border-left:1px solid var(--vien);background:var(--trang);padding:var(--khoang-4);position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
}

/* ---------- Khu giáo viên ---------- */
.khu-gv{display:grid;grid-template-columns:minmax(0,1fr);min-height:100%}
.menu-gv{display:flex;gap:var(--khoang-1);overflow-x:auto;padding:var(--khoang-2) var(--khoang-4);background:var(--trang);border-bottom:1px solid var(--vien)}
.menu-gv a{display:flex;align-items:center;justify-content:space-between;gap:var(--khoang-2);min-height:var(--cham-toi-thieu);padding:0 12px;border-radius:var(--bo-vua);color:var(--chu);text-decoration:none;font-weight:600;white-space:nowrap}
.menu-gv a:hover{background:var(--nen)}
.menu-gv a[aria-current="page"]{background:var(--xanh-nhat);color:var(--xanh-dam)}
/* Chỗ chừa cho cụm nút góp ý nằm trong ô nội dung (không ở body) để cột menu trắng kéo dài tới đáy trang */
html body:has(> .khu-gv){padding-bottom:0}
.khu-gv{--gv-chua:calc(var(--gy-cao,0px) + 16px + env(safe-area-inset-bottom,0px))}
.gv-noi{padding:var(--khoang-6) var(--khoang-4) calc(var(--khoang-12) + var(--gv-chua,0px));display:grid;gap:var(--khoang-6);align-content:start;min-width:0}
.gv-tieu-de{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--khoang-3)}
@media (min-width:900px){
  .khu-gv{grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 65px);align-items:stretch}
  .menu-gv{flex-direction:column;overflow:visible;padding:var(--khoang-4) var(--khoang-3);border-bottom:0;border-right:1px solid var(--vien)}
  .gv-noi{padding:var(--khoang-8) var(--khoang-8) calc(var(--khoang-8) + var(--gv-chua,0px))}
}
.luoi-so{display:grid;gap:var(--khoang-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.luoi-so{grid-template-columns:repeat(var(--cot,4),minmax(0,1fr))}}
/* Ba ô: máy tính chia ba cột đều; điện thoại ô thứ ba trải hết hàng, không nằm lẻ */
.luoi-so.ba-o{--cot:3}
@media (max-width:899px){.luoi-so.ba-o>:last-child{grid-column:1/-1}}
.o-so{background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-lon);padding:var(--khoang-4);display:grid;gap:var(--khoang-1);align-content:start;color:inherit;text-decoration:none}
a.o-so:hover{border-color:var(--xanh)}
.o-so .ten-so{color:var(--chu-phu)}
.o-so .gia-tri{font:600 32px/36px var(--font-sans);color:var(--xanh-dam);font-variant-numeric:tabular-nums}
.o-so .them{color:var(--chu-phu)}
.o-so.can-lam .gia-tri{color:var(--nhan-chu)}

/* Bảng theo dõi tiến độ */
.bang-cuon{overflow-x:auto;border:1px solid var(--vien);border-radius:var(--bo-lon);background:var(--trang)}
.bang-td{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}
.bang-td th,.bang-td td{padding:6px;text-align:center;border-bottom:1px solid var(--vien);white-space:nowrap}
.bang-td thead th{font-weight:600;color:var(--chu-phu);background:var(--trang);position:sticky;top:0}
.bang-td th[scope=row],.bang-td thead th:first-child{position:sticky;left:0;background:var(--trang);text-align:left;padding:8px 12px;min-width:200px;z-index:1}
.bang-td th[scope=row] .ten{display:block;font-weight:600;color:var(--chu)}
.bang-td th[scope=row] .phu{display:block;font-weight:400;color:var(--chu-phu)}
.bang-td tr:last-child>*{border-bottom:0}
.o-pt{display:block;min-width:52px;padding:6px 4px;border-radius:var(--bo-nho);font:600 14px/20px var(--font-sans)}
.o-pt.m0{background:var(--tien-do-0);color:var(--chu-phu)}
.o-pt.m1{background:var(--tien-do-1);color:var(--chu)}
.o-pt.m2{background:var(--tien-do-2);color:var(--chu)}
.o-pt.m3{background:var(--tien-do-3);color:var(--trang)}
.chu-giai{display:flex;flex-wrap:wrap;gap:var(--khoang-3);color:var(--chu-phu);align-items:center}
.chu-giai .o-pt{display:inline-block;min-width:0;width:18px;height:18px;padding:0;vertical-align:-3px;margin-right:6px}

/* Tải tệp */
.vung-tai{display:grid;justify-items:center;gap:var(--khoang-2);padding:var(--khoang-8) var(--khoang-4);border:2px dashed var(--vien-dam);border-radius:var(--bo-lon);background:var(--trang);text-align:center;cursor:pointer}
.vung-tai:hover,.vung-tai.dang-keo{border-color:var(--xanh);background:var(--xanh-nhat)}
.vung-tai .chinh{font-weight:600}
.vung-tai .phu{color:var(--chu-phu)}
.tep{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--khoang-3);align-items:center;padding:var(--khoang-3) var(--khoang-4);background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-vua)}
.tep .ten{font-weight:600;overflow-wrap:anywhere}
.tep .thanh{grid-column:1/-1}
.tep .trang-thai{color:var(--chu-phu);font-variant-numeric:tabular-nums}
.tep.loi .trang-thai{color:var(--do)}
.tep.xong .trang-thai{color:var(--xanh)}

/* Dòng bài trong trình sửa khóa */
.ds-sua{list-style:none;margin:0;padding:0;display:grid;gap:var(--khoang-2)}
.ds-sua li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--khoang-3);align-items:center;padding:var(--khoang-2) var(--khoang-3);background:var(--trang);border:1px solid var(--vien);border-radius:var(--bo-vua)}
.keo{width:32px;height:var(--cham-toi-thieu);border:0;background:none;color:var(--chu-phu);cursor:grab;font:600 18px/1 var(--font-sans);letter-spacing:-3px}