@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@500;600;700;800&display=swap');
/* TVN FIX117 — giao diện chung phong cách demo: nền ô ly, viền đen dày, bóng đổ cứng, 5 màu pastel.
   Chỉ là giao diện (CSS). Tải SAU tvn-ui.css và tvn-study-note.css trên mọi trang. */

:root{
  --tvn-z:1;
  --d-ink:#151515;--d-muted:#5c5c66;--d-paper:#ffffff;
  --d-green:#8ee06b;--d-blue:#74c7ff;--d-orange:#ffae57;--d-yellow:#ffe46b;--d-pink:#ff9fcb;
  --d-green-l:#e4f8da;--d-blue-l:#dff1ff;--d-orange-l:#ffecd6;--d-yellow-l:#fff6c9;--d-pink-l:#ffe3f0;
  --d-shadow:4px 4px 0 #151515;--d-shadow-s:2px 2px 0 #151515;
}

/* ===== Khung & kích thước: mọi trang cùng một bề rộng, không bị trồi ra/sụt vô ===== */
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
html body{overflow-x:clip;max-width:100%}
html body .wrap{width:min(1240px,calc(100% - 32px))!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
html body img,html body video,html body canvas,html body iframe{max-width:100%}
html body .tablewrap,html body .scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
html body .wrap>*,html body .card,html body .grid>*,html body .row>*,html body .fields>*,html body .two>*{min-width:0}
html body .card,html body .item,html body td{overflow-wrap:anywhere}

/* ===== Chữ & nền ô ly ===== */
html body,html body button,html body input,html body select,html body textarea,html body table,html body th,html body td{
  font-family:'Nunito','Nunito Sans','Be Vietnam Pro','Segoe UI',system-ui,Arial,sans-serif!important}
html body{
  color:var(--d-ink)!important;background-color:#fff!important;
  background-image:linear-gradient(rgba(0,0,0,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.09) 1px,transparent 1px)!important;
  background-size:24px 24px!important;font-weight:600}
html body::before{display:none!important}
html body h1,html body h2,html body h3,html body .title,html body .section-title{
  font-family:'Baloo 2','Nunito',sans-serif!important;font-weight:800!important;color:var(--d-ink)!important;line-height:1.15}
html body strong,html body b{font-weight:800}
html body .sub,html body .mut,html body .muted,html body small{color:var(--d-muted)!important}
html body a{color:inherit}

/* ===== Đầu mỗi trang (chỉ tên trang; tên - địa chỉ - SĐT chỉ ở Trang chủ) ===== */
html body main.wrap>.top{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px 6px!important;margin-bottom:14px}
html body main.wrap>.top .title,html body main.wrap>.top h1{display:inline!important;font-size:30px!important;margin:0;padding:0 4px!important;border:0!important;box-shadow:none!important;
  background:linear-gradient(transparent 58%,var(--d-yellow) 58% 92%,transparent 92%)!important}
html body main.wrap>.top .brand:not(:has(*)){display:none!important}
html body .eyebrow,html body .kicker{color:var(--d-ink)!important;font-weight:800!important}

/* ===== Thẻ, khung ===== */
html body .card,html body .tile,html body .panel,html body .lesson,html body .student,html body .class-card,html body .student-card,
html body .quiz-card,html body .homework-card,html body .stat-card,html body .result-card{
  background:var(--d-paper)!important;border:3px solid var(--d-ink)!important;border-radius:18px!important;box-shadow:var(--d-shadow)!important}
html body .item{background:#fff!important;border:2.5px solid var(--d-ink)!important;border-radius:14px!important;box-shadow:var(--d-shadow-s)!important}
html body main.wrap>section.card,html body main.wrap>.card{margin-top:16px}
html body .card:hover,html body .tile:hover,html body .item:hover{transform:none}
html body a.card:hover,html body a.tile:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #151515!important}

/* tiêu đề mục: thanh màu ngang ở đầu khung (mỗi khung một màu, tự đổi theo thứ tự) */
html body .card:has(>.section-title:first-child),html body .card:has(>.sec-head:first-child){padding:16px!important}
html body .card>.section-title:first-child,html body .card>.sec-head:first-child{
  display:flex!important;align-items:center;justify-content:space-between;gap:8px;margin:-16px -16px 14px!important;padding:9px 16px!important;
  background:var(--sec,var(--d-yellow))!important;color:var(--d-ink)!important;border:0!important;border-bottom:3px solid var(--d-ink)!important;
  border-radius:13px 13px 0 0!important;box-shadow:none!important;font-size:18px!important}
html body .sec-head>.section-title{display:block!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;font-size:18px!important}
html body .panel>.section-title,html body .box>.section-title{display:inline-block!important;background:var(--sec,var(--d-yellow))!important;border:3px solid var(--d-ink)!important;
  border-radius:12px!important;padding:3px 12px!important;box-shadow:var(--d-shadow-s)!important;font-size:17px!important;margin-bottom:10px}
html body main.wrap>.card:not([class*="sec-"]):nth-of-type(5n+1){--sec:var(--d-yellow)}
html body main.wrap>.card:not([class*="sec-"]):nth-of-type(5n+2){--sec:var(--d-green)}
html body main.wrap>.card:not([class*="sec-"]):nth-of-type(5n+3){--sec:var(--d-blue)}
html body main.wrap>.card:not([class*="sec-"]):nth-of-type(5n+4){--sec:var(--d-orange)}
html body main.wrap>.card:not([class*="sec-"]):nth-of-type(5n+5){--sec:var(--d-pink)}
html body .sec-yellow{--sec:var(--d-yellow)}html body .sec-green{--sec:var(--d-green)}
html body .sec-orange{--sec:var(--d-orange)}html body .sec-blue{--sec:var(--d-blue)}html body .sec-pink{--sec:var(--d-pink)}
html body .count-pill{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;background:#fff;border:2.5px solid var(--d-ink);border-radius:999px;padding:1px 12px}

/* ô lưới (menu quản lý) tô 5 màu pastel */
html body .grid>.tile:nth-child(5n+1){background:var(--d-green-l)!important}
html body .grid>.tile:nth-child(5n+2){background:var(--d-blue-l)!important}
html body .grid>.tile:nth-child(5n+3){background:var(--d-yellow-l)!important}
html body .grid>.tile:nth-child(5n+4){background:var(--d-pink-l)!important}
html body .grid>.tile:nth-child(5n+5){background:var(--d-orange-l)!important}
html body .stat{border:3px solid var(--d-ink)!important;border-radius:16px!important;box-shadow:var(--d-shadow-s)!important;color:var(--d-ink)!important}
html body .stats>.stat:nth-child(5n+1),html body .stat:nth-child(5n+1){background:var(--d-green-l)!important}
html body .stats>.stat:nth-child(5n+2),html body .stat:nth-child(5n+2){background:var(--d-blue-l)!important}
html body .stats>.stat:nth-child(5n+3),html body .stat:nth-child(5n+3){background:var(--d-yellow-l)!important}
html body .stats>.stat:nth-child(5n+4),html body .stat:nth-child(5n+4){background:var(--d-pink-l)!important}
html body .stats>.stat:nth-child(5n+5),html body .stat:nth-child(5n+5){background:var(--d-orange-l)!important}

/* ===== Nút ===== */
html body .btn,html body button.btn,html body a.btn,html body button:not(.plain):not(.icon-only):not(.check):not(.tvn-x){
  font-family:'Baloo 2','Nunito',sans-serif!important;font-weight:700!important;font-size:14px;color:var(--d-ink)!important;
  background:#fff!important;border:3px solid var(--d-ink)!important;border-radius:12px!important;padding:6px 13px;
  box-shadow:var(--d-shadow-s)!important;cursor:pointer;transition:transform .1s,box-shadow .1s}
html body .btn:hover,html body button.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #151515!important}
html body .btn:active,html body button.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 #151515!important}
html body .btn.primary,html body button.primary,html body .primary.btn,html body input[type="submit"],html body button.primary:not(.plain):not(.icon-only):not(.check):not(.tvn-x),html body a.btn.primary:not(.plain){background:var(--d-green)!important;color:var(--d-ink)!important}
html body .btn.secondary,html body button.secondary,html body .secondary.btn{background:var(--d-yellow)!important}
html body .btn.blue{background:var(--d-blue)!important}
html body .btn.danger,html body button.danger{background:var(--d-pink)!important;color:var(--d-ink)!important}
html body .btn[disabled],html body button[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none!important}
html body .btn:focus-visible,html body summary:focus-visible,html body a:focus-visible{outline:3px solid var(--d-blue);outline-offset:2px}

/* ===== Ô nhập ===== */
html body input,html body select,html body textarea{
  background:#fff!important;color:var(--d-ink)!important;border:3px solid var(--d-ink)!important;border-radius:12px!important;font-weight:700}
html body input[type="checkbox"],html body input[type="radio"]{accent-color:#151515}
html body input:focus,html body select:focus,html body textarea:focus{outline:3px solid var(--d-blue)!important;outline-offset:1px;box-shadow:none!important;border-color:var(--d-ink)!important}
html body .field label{font-weight:800;color:var(--d-ink)}
html body .toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
html body .toolbar>select{flex:1 1 150px;min-width:0;width:auto}
html body .toolbar>input{flex:2 1 220px;min-width:0;width:auto}
html body .toolbar>.btn{flex:0 1 auto}

/* ===== Nhãn, trạng thái, ghi chú ===== */
html body .badge,html body .pill,html body .tag,html body .chip{background:var(--d-yellow)!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important;font-weight:800!important}
html body .ok{background:var(--d-green)!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important}
html body .err{background:var(--d-pink)!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important}
html body .note,html body .hint{background:var(--d-yellow-l)!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important;border-radius:12px!important}
html body .progress{background:#fff!important;border:2.5px solid var(--d-ink)!important;border-radius:999px!important}
html body .progress>span{background:var(--d-green)!important}
html body .tab{border:2.5px solid var(--d-ink)!important;border-radius:999px!important;background:#fff!important;font-family:'Baloo 2',sans-serif;font-weight:700}
html body .tab.active,html body .tab.on,html body .tab[aria-selected="true"]{background:var(--d-yellow)!important}

/* ===== Bảng ===== */
html body table{border-color:var(--d-ink)!important;background:#fff!important}
html body th{background:var(--d-yellow)!important;color:var(--d-ink)!important;border-color:var(--d-ink)!important;font-family:'Baloo 2',sans-serif;font-weight:700}
html body td{border-color:rgba(21,21,21,.35)!important}
html body tbody tr:nth-child(even) td{background:var(--d-yellow-l)!important}
html body tbody tr:hover td{background:var(--d-blue-l)!important}

/* ===== Cửa sổ nhỏ ===== */
html body .modal{background:rgba(21,21,21,.45)!important}
html body .box{background:#fff!important;border:3px solid var(--d-ink)!important;border-radius:20px!important;box-shadow:6px 6px 0 #151515!important}
html body .box .section-title{--sec:var(--d-green)}
html body .groupfix{border:3px solid var(--d-ink)!important;border-radius:14px!important;background:#fff}
html body .device,html body .audit{border-top:2px dashed rgba(21,21,21,.3)!important}
html body .tools{display:flex;gap:8px;flex-wrap:wrap}
html body .empty-note{text-align:center;color:var(--d-muted);padding:10px 0}

/* ===== Trang chủ Quản trị: việc cần làm ===== */
html body #todo.todo>a{border:3px solid var(--d-ink)!important;box-shadow:var(--d-shadow-s)!important;background:#fff!important;border-radius:14px!important}
html body #todo.todo>a:nth-child(4n+1){background:var(--d-green-l)!important}
html body #todo.todo>a:nth-child(4n+2){background:var(--d-blue-l)!important}
html body #todo.todo>a:nth-child(4n+3){background:var(--d-pink-l)!important}
html body #todo.todo>a:nth-child(4n+4){background:var(--d-yellow-l)!important}
html body #todo.todo>a .count{color:var(--d-ink)!important;font-weight:800!important}
html body .todoIcon{background:#fff!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important}
html body .lesson{border-left:10px solid var(--d-green)!important}

/* ===== Thanh điều hướng ===== */
html body .tvn-adminbar{background:#fff!important;border-bottom:3px solid var(--d-ink)!important;box-shadow:0 4px 0 rgba(21,21,21,.12)!important}
html body .tvn-adminbrand{color:var(--d-ink)!important;font-family:'Baloo 2',sans-serif;font-weight:800}
html body .tvn-adminnav a{background:#fff!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important;box-shadow:1px 1px 0 #151515!important;font-weight:800}
html body .tvn-adminnav a:hover{background:var(--d-yellow-l)!important}
html body .tvn-adminnav a.active{background:var(--d-yellow)!important;color:var(--d-ink)!important;box-shadow:2px 2px 0 #151515!important}
html body .tvn-adminnav a svg{display:none!important}
html body .tvn-adminback{background:#fff!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important}
html body .tvn-action-icon{display:none!important}
html body #tvnGlobalNav a,html body #tvnGlobalNav button,html body .tvn-teacher-nav .btn{background:#fff!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important;box-shadow:2px 2px 0 #151515!important}

/* ===== Danh sách học sinh dạng thẻ (Tài khoản học sinh) ===== */
html body .s-list{display:grid;gap:12px;margin-top:6px}
html body .s-card{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--d-ink);border-radius:16px;box-shadow:var(--d-shadow-s);padding:10px 12px}
html body .s-ava{flex:none;width:46px;height:46px;border:3px solid var(--d-ink);border-radius:14px;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;color:var(--d-ink);box-shadow:var(--d-shadow-s)}
html body .c0{background:var(--d-green)}html body .c1{background:var(--d-blue)}html body .c2{background:var(--d-orange)}html body .c3{background:var(--d-yellow)}html body .c4{background:var(--d-pink)}
html body .s-info{flex:1;min-width:0}
html body .s-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;line-height:1.2}
html body .s-meta{font-size:12.5px;color:var(--d-muted);margin-top:1px;overflow-wrap:anywhere}
html body .s-meta b{color:var(--d-ink)}
html body .s-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
html body .s-tags .tag{display:inline-block;font-size:12px;border:2px solid var(--d-ink)!important;border-radius:999px;padding:0 9px;background:#fff!important}
html body .s-tags .tg-green{background:var(--d-green)!important}html body .s-tags .tg-blue{background:var(--d-blue)!important}
html body .s-tags .tg-orange{background:var(--d-orange)!important}html body .s-tags .tg-yellow{background:var(--d-yellow)!important}html body .s-tags .tg-pink{background:var(--d-pink)!important}
html body .s-actions{display:flex;align-items:center;gap:8px;flex:none}
html body details.more{position:relative}
html body details.more>summary{list-style:none;cursor:pointer;width:40px;height:36px;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;line-height:1;background:#fff;border:3px solid var(--d-ink);border-radius:12px;box-shadow:var(--d-shadow-s);user-select:none}
html body details.more>summary::-webkit-details-marker{display:none}
html body details.more[open]>summary{background:var(--d-yellow)}
html body .menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:210px;display:grid;gap:6px;background:#fff;border:3px solid var(--d-ink);border-radius:14px;box-shadow:var(--d-shadow);padding:8px}
html body .menu .btn{width:100%;justify-content:flex-start!important;box-shadow:none!important;background:#fff!important}
html body .menu .btn:hover{background:var(--d-yellow)!important;transform:none}
html body .menu .btn.danger{background:var(--d-pink)!important}
html body .menu hr{border:0;border-top:2px dashed #151515;margin:2px 0;opacity:.35}
html body .item.person{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 12px!important;margin-top:10px}
html body .item strong{font-family:'Baloo 2',sans-serif;font-weight:800!important;font-size:16px}

/* ===== Điện thoại ===== */
@media(max-width:680px){
  html body{background-size:20px 20px!important}
  html body main.wrap>.top{padding:12px 14px!important}
  html body main.wrap>.top .title,html body main.wrap>.top h1{font-size:22px}
  html body .card,html body .tile{border-radius:16px!important}
  html body .tvn-adminnav a{font-size:12px!important;padding:8px 9px!important}
  html body .s-card{flex-wrap:wrap}
  html body .s-info{flex-basis:calc(100% - 60px)}
  html body .s-actions{width:100%;justify-content:space-between;padding-top:2px}
  html body .s-actions>.btn{flex:1}
  html body .item.person{grid-template-columns:1fr}
  html body .tools .btn{flex:1}
}
@media(prefers-reduced-motion:reduce){html body *{transition:none!important}}

/* ===== Màn hình lớn (2K/4K): phóng to đều toàn bộ giao diện để không bị nhỏ, trống hai bên ===== */
@media (min-width:2100px){:root{--tvn-z:1.3}html{zoom:1.3}}
@media (min-width:2800px){:root{--tvn-z:1.6}html{zoom:1.6}}
@media (max-width:680px){html body .wrap{width:calc(100% - 20px)!important}}

/* ===== Khối đầu trang kiểu "hero" (trang Học sinh, Tuyển dụng...): bỏ khung, chỉ còn tiêu đề gạch highlight ===== */
html body:not(.home) main.wrap .hero{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px 6px!important;margin-top:8px}
html body:not(.home) main.wrap .hero h1{display:inline!important;font-size:30px!important;margin:0;padding:0 4px!important;border:0!important;
  background:linear-gradient(transparent 58%,var(--d-yellow) 58% 92%,transparent 92%)!important}
html body:not(.home) main.wrap .hero p{color:var(--d-muted)!important;margin:8px 0 0}
@media(max-width:680px){html body:not(.home) main.wrap .hero h1{font-size:24px!important}}

/* ===== Thẻ có icon (menu học sinh): sọc màu bên trái + icon tô màu, như thẻ vai trò ở Trang chủ ===== */
html body a.card:has(>.ico){--c:var(--d-green);display:block;min-height:0!important;padding:18px 18px 18px 30px!important;
  box-shadow:inset 10px 0 0 var(--c),var(--d-shadow)!important}
html body a.card:has(>.ico):nth-child(5n+2){--c:var(--d-yellow)}html body a.card:has(>.ico):nth-child(5n+3){--c:var(--d-orange)}
html body a.card:has(>.ico):nth-child(5n+4){--c:var(--d-pink)}html body a.card:has(>.ico):nth-child(5n+5){--c:var(--d-blue)}
html body a.card:has(>.ico):hover{box-shadow:inset 10px 0 0 var(--c),5px 5px 0 #151515!important}
html body a.card>.ico{background:var(--c)!important;color:var(--d-ink)!important;border:3px solid var(--d-ink)!important;box-shadow:2px 2px 0 #151515!important;border-radius:14px!important}
html body a.card:has(>.ico) h2{color:var(--d-ink)!important}
html body a.card:has(>.ico) p{color:var(--d-muted)!important}

/* ===== Nút "Trang chủ" và thanh quản trị: tên trung tâm chỉ hiện ở Trang chủ ===== */
html body a.home{font-family:'Baloo 2','Nunito',sans-serif!important;font-weight:700!important;color:var(--d-ink)!important;background:#fff!important;border:3px solid var(--d-ink)!important;
  border-radius:12px!important;padding:6px 14px!important;box-shadow:var(--d-shadow-s)!important;text-decoration:none}
html body main.wrap>.top>a.home{margin-left:auto}
html body .tvn-adminbrand{display:none!important}

/* ===================================================================
   BỘ BỐ CỤC DÙNG CHUNG (k-*) — sắp xếp trang theo bản demo:
   đầu trang + hàng số liệu + lưới thẻ có thanh màu + ô lối tắt
   =================================================================== */
html body .k-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 18px}
html body .k-head h1{display:inline;margin:0;padding:0 4px;font-size:30px;background:linear-gradient(transparent 58%,var(--d-yellow) 58% 92%,transparent 92%)}
html body .k-head p{margin:8px 0 0;color:var(--d-muted)}
html body .k-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

html body .k-stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));margin:0 0 18px}
html body .k-stat{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--d-ink);border-radius:16px;box-shadow:var(--d-shadow);padding:12px 14px;min-width:0}
html body .k-stat:nth-child(5n+1){background:var(--d-green-l);--tc:var(--d-green)}html body .k-stat:nth-child(5n+2){background:var(--d-yellow-l);--tc:var(--d-yellow)}
html body .k-stat:nth-child(5n+3){background:var(--d-blue-l);--tc:var(--d-blue)}html body .k-stat:nth-child(5n+4){background:var(--d-orange-l);--tc:var(--d-orange)}
html body .k-stat:nth-child(5n+5){background:var(--d-pink-l);--tc:var(--d-pink)}
html body .k-ti{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--tc,var(--c,var(--d-yellow)));color:var(--d-ink);border:3px solid var(--d-ink);border-radius:13px}
html body .k-ti svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body .k-num{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;line-height:1.1}
html body .k-num.t{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
html body .k-lbl{font-size:13px;color:var(--d-muted);font-weight:700}

html body .k-grid2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start;margin-bottom:16px}
html body .k-grid2>.card,html body .k-mgrid>*{margin:0!important}
html body .k-sub{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;letter-spacing:.03em;margin:14px 0 8px;color:var(--d-ink)}
html body .k-sub:first-of-type{margin-top:2px}
html body .k-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
html body a.k-tile{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--d-ink);background:#fff;border:3px solid var(--d-ink);border-radius:14px;box-shadow:var(--d-shadow-s);padding:10px 12px;transition:transform .1s,box-shadow .1s}
html body a.k-tile:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #151515}
html body a.k-tile:nth-child(5n+1){--c:var(--d-green)}html body a.k-tile:nth-child(5n+2){--c:var(--d-blue)}html body a.k-tile:nth-child(5n+3){--c:var(--d-yellow)}
html body a.k-tile:nth-child(5n+4){--c:var(--d-orange)}html body a.k-tile:nth-child(5n+5){--c:var(--d-pink)}
html body a.k-tile b{display:block;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:16px;line-height:1.2}
html body a.k-tile small{display:block;color:var(--d-muted);font-size:12.5px;font-weight:600;line-height:1.35;margin-top:1px}

html body .k-mgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
html body a.k-mcard{display:block;text-decoration:none;color:var(--d-ink);background:#fff;border:3px solid var(--d-ink);border-radius:18px;box-shadow:var(--d-shadow);overflow:hidden;transition:transform .1s,box-shadow .1s}
html body a.k-mcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #151515}
html body a.k-mcard:active{transform:translate(2px,2px);box-shadow:0 0 0 #151515}
html body a.k-mcard:nth-child(5n+1){--c:var(--d-green)}html body a.k-mcard:nth-child(5n+2){--c:var(--d-yellow)}html body a.k-mcard:nth-child(5n+3){--c:var(--d-orange)}
html body a.k-mcard:nth-child(5n+4){--c:var(--d-pink)}html body a.k-mcard:nth-child(5n+5){--c:var(--d-blue)}
html body .k-mh{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--c,var(--d-yellow));border-bottom:3px solid var(--d-ink)}
html body .k-mh .k-ti{background:#fff;width:40px;height:40px;border-radius:12px}
html body .k-mh h2{margin:0;font-size:19px;color:var(--d-ink)!important}
html body .k-mb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
html body .k-mb p{margin:0;color:var(--d-muted);font-size:14px;line-height:1.5}
html body .k-mb p b{color:var(--d-ink)}
html body .k-open{align-self:flex-start;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;border:2.5px solid var(--d-ink);border-radius:999px;padding:0 12px;background:var(--c,var(--d-yellow))}
@media(max-width:680px){html body .k-head h1{font-size:24px}html body .k-num{font-size:23px}}

/* ===== Ô đăng nhập (Giáo viên, Trợ lý, Quản trị, Học sinh) ===== */
html body .k-login{max-width:460px!important;margin:calc(7vh / var(--tvn-z,1)) auto 24px!important;padding:24px!important;text-align:left}
html body .k-logo{display:block;width:64px;height:64px;margin:0 0 12px}
html body .k-login h1{font-size:26px!important;margin:0 0 4px!important;display:inline;padding:0 4px;background:linear-gradient(transparent 58%,var(--d-yellow) 58% 92%,transparent 92%)!important}
html body .k-login .sub,html body .k-login .mut{margin:8px 0 6px}
html body .groups .pill{font-size:14px!important;padding:4px 12px!important;border-radius:999px}
html body .todos .todo,html body .todo-grid .todo{border:2.5px solid var(--d-ink)!important;border-radius:14px!important;box-shadow:var(--d-shadow-s)!important;background:#fff!important}
html body .todo-grid .todo:nth-child(4n+1){background:var(--d-pink-l)!important}html body .todo-grid .todo:nth-child(4n+2){background:var(--d-yellow-l)!important}
html body .todo-grid .todo:nth-child(4n+3){background:var(--d-blue-l)!important}html body .todo-grid .todo:nth-child(4n+4){background:var(--d-green-l)!important}
html body .todo b{color:var(--d-ink)!important}
/* trang đăng nhập Quản trị */
html body main.card:has(#login) .mark{width:64px;height:64px;display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px;background:var(--d-green)!important;color:var(--d-ink)!important;border:3px solid var(--d-ink)!important;border-radius:16px 16px 16px 4px!important;box-shadow:var(--d-shadow-s)!important}
html body main.card:has(#login){max-width:460px!important;margin:calc(7vh / var(--tvn-z,1)) auto!important;padding:24px!important}
html body main.card:has(#login) button,html body main.card:has(#login) #btn{width:100%;background:var(--d-green)!important}
html body .tvn-morebtn{background:#fff!important;color:var(--d-ink)!important;border:2.5px solid var(--d-ink)!important;box-shadow:1px 1px 0 #151515!important;font-family:'Baloo 2','Nunito',sans-serif!important}
html body .tvn-morebtn.active,html body .tvn-morebtn[aria-expanded="true"]{background:var(--d-yellow)!important}
html body .tvn-morebtn svg{display:none!important}
html body .tvn-morepanel a svg{display:none!important}
html body .tvn-morepanel a:hover{background:var(--d-yellow-l)!important}

/* ===== FIX123: các danh sách dạng dòng trong trang admin (Giáo viên, Học tập, Nội quy, Vòng quay…) ===== */
html body .teacher,html body .rootcard,html body .classcard,html body .rule,html body .reward,html body .submission,html body .perm,html body .student:not(.k-tile),html body .grade-panel,html body .unit-card{
  --c:var(--d-green);background:#fff!important;border:2.5px solid var(--d-ink)!important;border-radius:14px!important;
  box-shadow:inset 10px 0 0 var(--c),2px 2px 0 #151515!important;padding-left:24px!important}
html body :is(.teacher,.rootcard,.classcard,.rule,.reward,.submission,.perm,.grade-panel):nth-of-type(5n+2){--c:var(--d-blue)}
html body :is(.teacher,.rootcard,.classcard,.rule,.reward,.submission,.perm,.grade-panel):nth-of-type(5n+3){--c:var(--d-yellow)}
html body :is(.teacher,.rootcard,.classcard,.rule,.reward,.submission,.perm,.grade-panel):nth-of-type(5n+4){--c:var(--d-orange)}
html body :is(.teacher,.rootcard,.classcard,.rule,.reward,.submission,.perm,.grade-panel):nth-of-type(5n+5){--c:var(--d-pink)}
html body .teacher.inactive{--c:#c8c8cf;opacity:.7}
html body .teacher .head b,html body .teacher .head strong,html body .teacher h3{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
html body .grade-panel,html body .unit-card{padding-left:0!important;box-shadow:2px 2px 0 #151515!important;overflow:hidden}
html body .grade-head{background:var(--c)!important;border-bottom:2.5px solid var(--d-ink)}
html body .grade-head h3{color:var(--d-ink)!important}
html body .unit-head{background:var(--d-yellow-l)!important;border-bottom:2px dashed rgba(21,21,21,.25)}
html body .unit-chevron,html body .grade{color:var(--d-ink)!important}
html body .program{background:var(--d-blue-l)!important;border:2px solid var(--d-ink)!important;border-radius:12px!important}
html body .access-ok{background:var(--d-green-l)!important;color:var(--d-ink)!important;border:2px solid var(--d-ink)}
html body .access-auto{background:var(--d-yellow-l)!important;color:var(--d-ink)!important;border:2px solid var(--d-ink)}
html body .check{background:#fff!important;border:2px solid var(--d-ink)!important;font-weight:700}
html body .check:has(input:checked){background:var(--d-green-l)!important}
html body .node{border-top:2px dashed rgba(21,21,21,.2)!important}
html body details>summary{cursor:pointer;font-weight:800}
/* thẻ số liệu nhỏ trong các trang (stat, tuition-stat) */
html body .tuition-stat{border:2.5px solid var(--d-ink)!important;border-radius:14px!important;box-shadow:2px 2px 0 #151515!important}
html body .tuition-stat:nth-child(4n+1){background:var(--d-green-l)!important}html body .tuition-stat:nth-child(4n+2){background:var(--d-yellow-l)!important}
html body .tuition-stat:nth-child(4n+3){background:var(--d-blue-l)!important}html body .tuition-stat:nth-child(4n+4){background:var(--d-pink-l)!important}