/* Bé Ham Học — giao diện quản trị phẳng (v4). Thay cho admin.css + admin3.css trong khu quản trị.
   Phẳng: viền mảnh, không đổ bóng, không chuyển màu; màu theo nhận diện Bé Ham Học. */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-500-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-vietnamese-700-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/be-vietnam-pro-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/be-vietnam-pro-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/be-vietnam-pro-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/be-vietnam-pro-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --brand:#13A86B;--brand-hover:#0E8F5A;--brand-dark:#0B5E3E;--brand-pale:#E8F7EF;--brand-line:#BFE6D0;
  --accent:#FFB020;
  --ink:#16302A;--ink-soft:#5F726B;--ink-faint:#8A9A94;
  --border:#DCE6E1;--bg:#F4F8F6;--white:#fff;
  --green-bg:#E8F7EF;--green-fg:#0B7A4B;--green-line:#BFE6D0;
  --blue-bg:#E8F1FF;--blue-fg:#0A56C2;--blue-line:#C4DAFF;
  --yellow-bg:#FFF6DD;--yellow-fg:#8A6000;--yellow-line:#F3DE9E;
  --orange-bg:#FDF0E2;--orange-fg:#B35900;--orange-line:#F5D7AE;
  --red-bg:#FDECEC;--red-fg:#B3261E;--red-line:#F3C6C4;
  --gray-bg:#EEF3F0;--gray-fg:#5F726B;
  --radius:12px;--radius-sm:8px;--side:248px;
  --font:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand-dark);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.01em;margin-top:0}
h2{font-size:16px;margin-bottom:12px}
code{background:var(--gray-bg);border-radius:6px;padding:1px 6px;font-size:12.5px}
.ic{width:20px;height:20px;fill:currentColor;flex:none;vertical-align:-5px}
.ic-sm{width:16px;height:16px;vertical-align:-3px}

/* ---------- Khung ---------- */
.adm-shell{display:flex;min-height:100vh}
.adm-side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--white);border-right:1.5px solid var(--border);display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.adm-logo{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px;border-bottom:1.5px solid var(--border)}
.adm-logo a{display:flex;align-items:center;gap:10px;text-decoration:none}
.adm-logo img{height:34px;width:auto}
.adm-logo small{font-size:11px;font-weight:700;color:var(--brand-dark);background:var(--brand-pale);border-radius:6px;padding:2px 7px}
.adm-nav{display:flex;flex-direction:column;gap:2px;padding:10px 10px 18px}
.adm-sec{margin:14px 10px 4px;color:var(--ink-faint);font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:.01em}
.adm-sec:first-child{margin-top:4px}
.adm-nav a,.adm-nav summary{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-sm);color:#2F4640;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;line-height:1.35}
.adm-nav a .ic,.adm-nav summary .ic{color:#7A8C85}
.adm-nav a span,.adm-nav summary span{flex:1}
.adm-nav a:hover,.adm-nav summary:hover{background:#F1F6F3;color:var(--ink);text-decoration:none}
.adm-nav a.on{background:var(--brand-pale);color:var(--brand-dark);font-weight:600}
.adm-nav a.on .ic{color:var(--brand)}
.adm-count{background:var(--accent);color:#4A3300;border-radius:999px;font-size:11.5px;font-weight:700;padding:0 8px;line-height:20px}
.adm-nav details summary{list-style:none}.adm-nav details summary::-webkit-details-marker{display:none}
.adm-nav details summary .caret{transition:transform .15s}.adm-nav details[open] summary .caret{transform:rotate(180deg)}
.adm-nav details .sub{position:relative;padding:2px 0 4px 18px}
.adm-nav details .sub::before{content:"";position:absolute;left:21px;top:2px;bottom:6px;border-left:1.5px solid var(--border)}
.adm-nav details .sub a{padding:7px 12px 7px 18px;font-size:13.5px}
.adm-side-foot{margin-top:auto;padding:12px 10px 16px;border-top:1.5px solid var(--border)}
.adm-main{margin-left:var(--side);flex:1;min-width:0;display:flex;flex-direction:column}
.adm-top{height:64px;display:flex;align-items:center;gap:14px;padding:0 28px;background:var(--white);border-bottom:1.5px solid var(--border);position:sticky;top:0;z-index:30}
.adm-top h1{font-size:18px;margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-top .adm-menu{display:none;border:1.5px solid var(--border);background:var(--white);border-radius:var(--radius-sm);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.adm-user{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft)}
.adm-user b{display:block;color:var(--ink);font-weight:600;font-size:13.5px;line-height:1.2}
.adm-ava{width:34px;height:34px;border-radius:50%;background:var(--brand-pale);color:var(--brand-dark);display:grid;place-items:center;font-weight:700}
.adm-content{padding:24px 28px 48px;max-width:1440px;width:100%}
.adm-scrim{display:none}

/* ---------- Thành phần v3 ---------- */
.a3-card,.panel{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:18px}
.a3-card h2,.panel h2{font-size:16px}
.panel{margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.panel-head p{color:var(--ink-soft);margin:2px 0 0}
.a3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:0}
.a3-grid>.a3-card{margin-bottom:18px}
.a3-grid>*{min-width:0}
.a3-card,.panel{overflow-x:auto}
.a3-table td .a3-btn,.a3-table td .a3-badge{white-space:nowrap}
.a3-flash{border-radius:var(--radius-sm);padding:11px 14px;margin-bottom:16px;font-weight:600;border:1.5px solid}
.a3-flash.ok{background:var(--green-bg);color:var(--green-fg);border-color:var(--green-line)}
.a3-flash.err{background:var(--red-bg);color:var(--red-fg);border-color:var(--red-line)}
.a3-muted{color:var(--ink-soft);font-size:13px}
.a3-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.a3-btn,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:var(--radius-sm);font:inherit;font-size:13.5px;font-weight:600;
  border:1.5px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer;text-decoration:none;transition:background-color .12s,border-color .12s;white-space:nowrap}
.a3-btn:hover,.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff;text-decoration:none}
.a3-btn.ghost{background:var(--white);color:var(--ink);border-color:var(--border)}
.a3-btn.ghost:hover{background:var(--gray-bg);border-color:#C6D4CD;color:var(--ink)}
.a3-btn.danger{background:var(--white);color:var(--red-fg);border-color:var(--red-line)}
.a3-btn.danger:hover{background:var(--red-bg)}
.a3-btn.small{height:32px;padding:0 12px;font-size:12.5px}
.a3-btn:focus-visible,.btn:focus-visible{outline:3px solid #13A86B44;outline-offset:2px}

.a3-badge,.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;background:var(--gray-bg);color:var(--gray-fg);white-space:nowrap}
.a3-badge.g,.badge{background:var(--green-bg);color:var(--green-fg)}
.a3-badge.r{background:var(--red-bg);color:var(--red-fg)}
.a3-badge.y{background:var(--yellow-bg);color:var(--yellow-fg)}
.a3-badge.b{background:var(--blue-bg);color:var(--blue-fg)}

.a3-table,.admin-main table,.adm-content table{width:100%;border-collapse:collapse;font-size:13.5px}
.a3-table th,.adm-content th{text-align:left;color:var(--ink-soft);font-size:12px;font-weight:600;text-transform:none;padding:9px 10px;border-bottom:1.5px solid var(--border);background:#F8FBF9;white-space:nowrap}
.a3-table td,.adm-content td{padding:10px;border-bottom:1px solid #EAF0ED;vertical-align:top}
.a3-table tr:last-child td{border-bottom:0}
.a3-table tbody tr:hover td{background:#FAFCFB}
.a3-table input:not([type=checkbox]),.a3-table select{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;font:inherit;font-size:13px;background:#fff}

.a3-form{display:grid;gap:12px}
.a3-form label{display:grid;gap:6px;font-weight:600;font-size:13px}
.a3-form input:not([type=checkbox]):not([type=radio]),.a3-form select,.a3-form textarea,.a3-inline input:not([type=checkbox]),.a3-inline select,.form-grid input,.form-grid select,.form-grid textarea{
  border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;height:40px;font:inherit;font-size:14px;background:var(--white);color:var(--ink)}
.a3-form textarea,.form-grid textarea{height:auto;padding:10px 12px;line-height:1.5}
.a3-form input:focus,.a3-form select:focus,.a3-form textarea:focus,.a3-inline input:focus,.a3-inline select:focus,.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #13A86B22}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:grid;gap:6px;font-weight:600;font-size:13px}.wide{grid-column:1/-1}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:16px;height:16px}
.a3-kv{display:grid;grid-template-columns:150px 1fr;gap:8px 14px;font-size:14px}.a3-kv dt{color:var(--ink-soft);font-weight:500}.a3-kv dd{margin:0}
.a3-fit{min-width:0}.a3-fit .a3-grid>*{min-width:0}.a3-fit .a3-grid input,.a3-fit .a3-grid select{min-width:0;width:100%}

/* Thẻ số liệu (legacy .metric và trang lộ trình, nội dung) — nền màu phẳng */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.metric{background:var(--green-bg);color:var(--green-fg);border:0;border-radius:var(--radius);padding:14px 16px}
.metric:nth-child(2){background:var(--blue-bg);color:var(--blue-fg)}
.metric:nth-child(3){background:var(--yellow-bg);color:var(--yellow-fg)}
.metric:nth-child(4){background:var(--orange-bg);color:var(--orange-fg)}
.metric small{display:block;font-size:12.5px;font-weight:600;opacity:.9}
.metric h2,.metric b{display:block;font-size:26px;font-weight:700;margin:4px 0 0;color:inherit;line-height:1.2}

/* Đăng nhập */
.a3-login{max-width:420px;margin:72px auto;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:28px}
.a3-login .adm-login-logo{display:block;height:40px;margin-bottom:18px}
.a3-login h1{margin:0 0 6px;font-size:21px}.a3-login p{color:var(--ink-soft);margin:0 0 16px}
.a3-secret{font-family:ui-monospace,Menlo,monospace;font-size:15px;letter-spacing:2px;background:var(--gray-bg);border-radius:var(--radius-sm);padding:10px;word-break:break-all;text-align:center}
#qr{display:flex;justify-content:center;margin:12px 0}#qr svg{width:180px;height:180px}

/* ---------- Điện thoại ---------- */
@media (max-width:960px){
  .adm-side{transform:translateX(-100%);transition:transform .2s}
  body.adm-open .adm-side{transform:none}
  body.adm-open .adm-scrim{display:block;position:fixed;inset:0;background:#0b1f1a55;z-index:35}
  .adm-main{margin-left:0}
  .adm-top{padding:0 14px}
  .adm-top .adm-menu{display:inline-flex}
  .adm-user .who{display:none}
  .adm-content{padding:16px 14px 40px}
  .form-grid{grid-template-columns:1fr}
  .a3-card,.panel{padding:16px}
  .a3-card{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){.adm-side{transition:none}}
@media print{.adm-side,.adm-top{display:none}.adm-main{margin:0}}
@media (min-width:1100px){.a3-grid-3-2{grid-template-columns:minmax(0,3fr) minmax(320px,2fr)}}

/* Password visibility toggle */
.a3-pass{position:relative;display:block}.a3-pass input{padding-right:46px!important;width:100%}.a3-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0!important;background:transparent!important;color:#74838e!important;padding:2px!important;cursor:pointer;display:grid;place-items:center}.a3-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.a3-eye:hover{color:var(--brand)!important}

/* Sidebar thu gọn trên desktop */
.adm-logo{position:relative}.adm-collapse{position:absolute;right:10px;bottom:-16px;width:32px;height:32px;border:1.5px solid var(--border);border-radius:10px;background:#fff;color:#61766f;display:grid;place-items:center;cursor:pointer;z-index:2}.adm-collapse .ic{width:18px;height:18px}.adm-collapse:hover{color:var(--brand);border-color:#b8ddcd}.adm-collapse.is-collapsed{transform:rotate(180deg)}
@media (min-width:981px){body.adm-collapsed{--side:78px}body.adm-collapsed .adm-logo{padding:18px 8px 14px;min-height:78px}body.adm-collapsed .adm-logo a{justify-content:center}body.adm-collapsed .adm-logo img{width:46px;height:46px;object-fit:contain;object-position:left;clip-path:inset(0 0 0 0)}body.adm-collapsed .adm-logo small,body.adm-collapsed .adm-sec,body.adm-collapsed .adm-nav a span,body.adm-collapsed .adm-nav summary span,body.adm-collapsed .adm-nav .caret,body.adm-collapsed .adm-user .who{display:none}body.adm-collapsed .adm-nav{padding-left:8px;padding-right:8px}body.adm-collapsed .adm-nav a,body.adm-collapsed .adm-nav summary{justify-content:center;padding:11px 8px}body.adm-collapsed .adm-nav a .ic,body.adm-collapsed .adm-nav summary .ic{width:22px;height:22px}body.adm-collapsed .adm-nav details .sub{display:none}body.adm-collapsed .adm-count{position:absolute;margin-left:28px;margin-top:-25px;font-size:10px;padding:1px 4px}body.adm-collapsed .adm-side-foot{padding-left:8px;padding-right:8px}.adm-nav a{position:relative}}
@media (max-width:980px){.adm-collapse{display:none}}

/* Biên soạn giáo án: cùng ngôn ngữ UI với Tạo phiếu */
.lesson-editor{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:18px;align-items:start}.lesson-main-card{min-width:0}.lesson-sections{display:grid;gap:12px}.lesson-section{border:1.5px solid var(--border);border-radius:16px;background:#fbfdfa;padding:14px}.lesson-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.lesson-section-no{font-weight:800;color:#b76512;font-size:12px;letter-spacing:.04em;text-transform:uppercase}.lesson-section-empty{opacity:.72}.lesson-section-grid{display:grid;grid-template-columns:minmax(220px,2fr) 90px 150px 160px;gap:10px;align-items:end}.lesson-section-grid label{margin:0;font-size:12px;color:#62766f}.lesson-section-grid select,.lesson-section-grid input{margin-top:6px;width:100%}.lesson-side{position:sticky;top:78px;display:grid;gap:14px}.lesson-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.lesson-tab{border:1.5px solid var(--border);background:#fff;color:#3f554e;border-radius:999px;padding:8px 13px;font-weight:700;cursor:pointer}.lesson-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}.lesson-pane{display:none}.lesson-pane.on{display:block}.lesson-preview{overflow:auto;background:#eef4f1;padding:12px;border-radius:14px;max-height:72vh}.lesson-preview-inner{transform-origin:top left;zoom:.56}.lesson-history{max-height:62vh;overflow:auto}.lesson-review-list label{display:flex;align-items:flex-start;gap:8px;font-weight:600;margin:8px 0}.lesson-review-list input{margin-top:3px}.lesson-meta-grid{display:grid;grid-template-columns:1fr 220px;gap:12px}.lesson-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--border);padding-top:12px;margin-top:14px}
@media (max-width:1180px){.lesson-editor{grid-template-columns:1fr}.lesson-side{position:static}.lesson-section-grid{grid-template-columns:minmax(220px,2fr) 82px 140px 150px}.lesson-preview{max-height:none}}
@media (max-width:760px){.lesson-section-grid,.lesson-meta-grid{grid-template-columns:1fr 1fr}.lesson-section-grid label:first-child{grid-column:1/-1}.lesson-preview-inner{zoom:.42}}


/* Tooltip nổi của sidebar thu gọn. Fixed vào viewport nên không bị overflow của sidebar cắt mất. */
.adm-floating-tip{position:fixed;z-index:9999;left:-9999px;top:-9999px;opacity:0;visibility:hidden;pointer-events:none;white-space:nowrap;background:#203b33;color:#fff;border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:800;line-height:1.25;box-shadow:0 8px 24px rgba(20,55,44,.18);transform:translateX(-4px);transition:opacity .12s ease,transform .12s ease,visibility .12s}
.adm-floating-tip.show{opacity:1;visibility:visible;transform:translateX(0)}
@media (max-width:980px){.adm-floating-tip{display:none}}
/* Mầm non số: bảng rộng cuộn ngang trên điện thoại thay vì tràn khỏi khung */
@media (max-width:760px){.adm-content .a3-table,.adm-content table.a3-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.adm-content .a3-table td{min-width:90px}.adm-content .a3-table td:first-child{min-width:120px}.a3-inline{flex-wrap:wrap}}