
      :root{
        --bg:#eef2f7; --card:#ffffff; --card-2:#f7f9fc; --ink:#1f2a3d; --ink-2:#5b6b82; --ink-3:#8a99b0;
        --line:#e2e8f2; --line-strong:#c3d0e2;
        --primary:#435ebe; --primary-dark:#354a9e; --primary-soft:#e8ecfb;
        --teal:#0e9f8a; --teal-dark:#0b7d6c; --teal-soft:#e0f5f1;
        --amber:#b97a0c; --amber-soft:#fdf0d5;
        --red:#c0392b; --red-soft:#fdecea;
        --green:#1e7d46; --green-soft:#e2f3e8;
        --grey-soft:#edf1f6;
        --sidebar-bg:#ffffff; --sidebar-ink:#3d4a63; --sidebar-muted:#93a2b8;
        --shadow:0 1px 3px rgba(31,42,61,.05),0 10px 30px -14px rgba(31,42,61,.14);
        --shadow-lg:0 4px 14px rgba(31,42,61,.07),0 18px 44px -16px rgba(53,74,158,.18);
        --radius:14px;
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#141a26; --card:#1e2635; --card-2:#232e42; --ink:#e9eef7; --ink-2:#aab8cc; --ink-3:#7e8ea8;
          --line:#303d55; --line-strong:#46587a;
          --primary:#8aa2f0; --primary-dark:#a9bcf5; --primary-soft:#2a3560;
          --teal:#3ec9b2; --teal-dark:#3ec9b2; --teal-soft:#173d38;
          --amber:#e5b45c; --amber-soft:#42340f;
          --red:#f0938a; --red-soft:#4a2622;
          --green:#7fd29c; --green-soft:#1d3a2a; --grey-soft:#27334a;
          --sidebar-bg:#1a2231; --sidebar-ink:#c3cfe2; --sidebar-muted:#7e8ea8;
          --shadow:0 1px 3px rgba(0,0,0,.35),0 10px 30px -14px rgba(0,0,0,.5);
          --shadow-lg:0 4px 14px rgba(0,0,0,.4),0 18px 44px -16px rgba(0,0,0,.6);
        }
      }
      *{ box-sizing:border-box; }
      html{ scroll-behavior:smooth; }
      body{ margin:0; background:var(--bg); color:var(--ink); font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:15.5px; line-height:1.55; }
      h1,h2,h3,h4{ line-height:1.25; margin:0; }
      p{ margin:0; }
      a{ color:var(--primary); }
      button{ font:inherit; cursor:pointer; }
      input,select,textarea{ font:inherit; color:var(--ink); }
      :focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }
      .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

      /* ===== Khung admin ===== */
      .app{ display:flex; min-height:100vh; align-items:stretch; }
      .sidebar{
        width:264px; flex:0 0 264px; background:var(--sidebar-bg); border-right:1px solid var(--line);
        display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
      }
      .brand{ padding:20px 20px 14px; display:flex; gap:12px; align-items:center; }
      .brand-mark{
        width:44px; height:44px; flex:0 0 44px; border-radius:12px; background:var(--primary); color:#fff;
        display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; letter-spacing:.02em;
      }
      @media (prefers-color-scheme: dark){ .brand-mark{ color:#131c33; } }
      .brand-name{ font-weight:800; font-size:15px; line-height:1.3; }
      .brand-sub{ color:var(--sidebar-muted); font-size:12px; margin-top:1px; }
      .side-scroll{ flex:1; overflow-y:auto; padding:4px 14px 16px; }
      .side-label{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--sidebar-muted); padding:16px 10px 7px; }
      .side-item{
        display:flex; align-items:center; gap:11px; width:100%; text-align:left;
        background:transparent; border:none; border-radius:10px; padding:10px 12px; margin-bottom:2px;
        color:var(--sidebar-ink); font-weight:600; font-size:14.5px;
      }
      .side-item .side-badge-soon{ margin-left:auto; }
      .side-item:hover{ background:var(--card-2); }
      .side-item[aria-current="page"]{ background:var(--primary); color:#fff; box-shadow:0 8px 18px -8px rgba(67,94,190,.55); }
      @media (prefers-color-scheme: dark){ .side-item[aria-current="page"]{ color:#131c33; } }
      .side-item[hidden]{ display:none !important; }
      .side-item:disabled{ opacity:.55; cursor:not-allowed; }
      .side-item:disabled:hover{ background:transparent; }
      .side-ico{ width:34px; height:34px; flex:0 0 34px; border-radius:9px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
      .side-item[aria-current="page"] .side-ico{ background:rgba(255,255,255,.22); color:inherit; }
      .side-item:disabled .side-ico{ background:var(--grey-soft); color:var(--ink-3); }
      .side-ico svg{ width:19px; height:19px; }
      .side-text{ flex:1 1 120px; min-width:0; line-height:1.3; }
      .side-text small{ display:block; font-weight:500; font-size:12px; opacity:.75; }
      .side-badge-soon{ font-size:10.5px; font-weight:700; background:var(--amber-soft); color:var(--amber); border-radius:99px; padding:2px 8px; white-space:nowrap; }
      .side-badge-on{ font-size:10.5px; font-weight:700; background:var(--teal-soft); color:var(--teal-dark); border-radius:99px; padding:2px 8px; white-space:nowrap; }
      .side-item[aria-current="page"] .side-badge-on{ background:rgba(255,255,255,.25); color:inherit; }
      .side-foot{ border-top:1px solid var(--line); padding:14px 20px; font-size:12.5px; color:var(--sidebar-muted); }
      .side-foot strong{ color:var(--sidebar-ink); display:block; font-size:13px; }
      .side-overlay{ display:none; }
      .main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
      .topbar{
        position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--card) 88%, transparent);
        backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
        display:flex; align-items:center; gap:14px; padding:12px 26px;
      }
      .burger{ display:none; background:var(--card-2); border:1px solid var(--line); border-radius:10px; width:42px; height:42px; align-items:center; justify-content:center; color:var(--ink); }
      .burger svg{ width:21px; height:21px; }
      .crumb{ font-size:13px; color:var(--ink-3); }
      .crumb strong{ color:var(--ink); font-size:15px; display:block; line-height:1.3; }
      .topbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
      .domain-pill{ display:inline-flex; align-items:center; gap:7px; background:var(--teal-soft); color:var(--teal-dark); font-weight:700; font-size:13px; border-radius:99px; padding:6px 13px; }
      .domain-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal); }
      .user-chip{ display:flex; align-items:center; gap:10px; }
      .avatar{ width:40px; height:40px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
      @media (prefers-color-scheme: dark){ .avatar{ color:#131c33; } }
      .user-chip .u-name{ font-weight:700; font-size:13.5px; line-height:1.25; }
      .user-chip .u-role{ font-size:12px; color:var(--ink-3); line-height:1.25; }
      .page{ flex:1; width:100%; max-width:1240px; margin:0 auto; padding:26px 26px 48px; }
      .page-foot{ border-top:1px solid var(--line); color:var(--ink-2); font-size:13px; padding:16px 26px 26px; display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between; max-width:1240px; width:100%; margin:0 auto; }
      @media (max-width:991px){
        .sidebar{ display:none; position:fixed; left:0; top:0; box-shadow:var(--shadow-lg); }
        .sidebar.open{ display:flex; }
        .side-overlay{ display:block; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:35; }
        .side-overlay[hidden]{ display:none; }
        .burger{ display:inline-flex; }
        .page{ padding:20px 16px 40px; }
        .topbar{ padding:10px 16px; }
        .user-chip .u-meta{ display:none; }
      }
      @media (prefers-reduced-motion: reduce){ .sidebar{ transition:none; } html{ scroll-behavior:auto; } }

      /* ===== Dashboard ===== */
      .dash-head{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; justify-content:space-between; margin-bottom:20px; }
      .dash-head h1{ font-size:clamp(23px,3.4vw,30px); font-weight:800; letter-spacing:-.01em; }
      .dash-head p{ color:var(--ink-2); margin-top:5px; max-width:640px; }
      .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
      @media (max-width:1080px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
      @media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
      .stat-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; display:flex; gap:14px; align-items:center; }
      .stat-ico{ width:52px; height:52px; flex:0 0 52px; border-radius:13px; display:flex; align-items:center; justify-content:center; }
      .stat-ico svg{ width:26px; height:26px; }
      .stat-ico.c-blue{ background:var(--primary-soft); color:var(--primary); }
      .stat-ico.c-teal{ background:var(--teal-soft); color:var(--teal-dark); }
      .stat-ico.c-amber{ background:var(--amber-soft); color:var(--amber); }
      .stat-ico.c-green{ background:var(--green-soft); color:var(--green); }
      .stat-card span{ display:block; color:var(--ink-2); font-size:13px; font-weight:600; }
      .stat-card strong{ font-size:26px; font-weight:800; line-height:1.15; }
      .stat-card small{ display:block; color:var(--ink-3); font-size:12px; }
      .section-title{ font-size:18px; font-weight:800; margin:6px 0 4px; }
      .section-sub{ color:var(--ink-2); font-size:14px; margin-bottom:14px; }
      .mod-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
      @media (max-width:820px){ .mod-grid{ grid-template-columns:1fr; } }
      .mod-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:9px; }
      .mod-card.featured{ border-top:4px solid var(--teal); box-shadow:var(--shadow-lg); }
      .mod-card.soon{ opacity:.82; }
      .mod-top{ display:flex; align-items:center; gap:12px; }
      .mod-ico{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; background:var(--primary-soft); color:var(--primary); display:flex; align-items:center; justify-content:center; }
      .mod-card.featured .mod-ico{ background:var(--teal-soft); color:var(--teal-dark); }
      .mod-ico svg{ width:24px; height:24px; }
      .mod-card h2{ font-size:17.5px; flex:1; }
      .mod-tag{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:99px; background:var(--teal-soft); color:var(--teal-dark); white-space:nowrap; }
      .mod-card.soon .mod-tag{ background:var(--grey-soft); color:var(--ink-2); }
      .mod-card p{ color:var(--ink-2); font-size:14.5px; flex:1; }
      .mod-meta{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:10px; }
      .dash-cols{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; margin-top:16px; }
      @media (max-width:900px){ .dash-cols{ grid-template-columns:1fr; } }
      .info-panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
      .info-panel h2{ font-size:16.5px; margin-bottom:12px; }
      .info-panel ol,.info-panel ul{ margin:0; padding-left:20px; color:var(--ink-2); }
      .info-panel li{ margin-bottom:7px; }
      .info-panel li::marker{ color:var(--primary); font-weight:700; }
      .flow-step{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
      .flow-step:last-child{ border-bottom:none; padding-bottom:0; }
      .flow-num{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:13.5px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
      @media (prefers-color-scheme: dark){ .flow-num{ color:#131c33; } }
      .flow-step strong{ display:block; font-size:14.5px; }
      .flow-step span{ color:var(--ink-2); font-size:13.5px; }

      /* ===== Nút & biểu mẫu ===== */
      .btn{ display:inline-block; background:var(--primary); color:#fff; border:1px solid var(--primary); padding:9px 18px; border-radius:10px; font-weight:600; font-size:14.5px; text-decoration:none; }
      @media (prefers-color-scheme: dark){ .btn{ color:#131c33; } }
      .btn:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }
      .btn:disabled{ opacity:.45; cursor:not-allowed; }
      .btn-secondary{ background:var(--card); color:var(--primary); border-color:var(--line-strong); }
      @media (prefers-color-scheme: dark){ .btn-secondary{ color:var(--ink); } }
      .btn-secondary:hover{ background:var(--card-2); }
      .btn-teal{ background:var(--teal); border-color:var(--teal); color:#fff; }
      .btn-teal:hover{ background:var(--teal-dark); border-color:var(--teal-dark); }
      @media (prefers-color-scheme: dark){ .btn-teal{ color:#0a2420; } }
      .field{ display:flex; flex-direction:column; gap:5px; margin-bottom:10px; }
      .field label{ font-weight:600; font-size:14px; }
      .field input[type="text"],.field input[type="number"],.field input[type="search"],.field select,.field textarea{ background:var(--card); border:1px solid var(--line-strong); border-radius:9px; padding:8px 11px; max-width:100%; }
      .field-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; }
      .field-row .field{ flex:1 1 200px; }
      .hint{ color:var(--ink-2); font-size:13.5px; }
      .error{ color:var(--red); font-weight:600; }
      .warn{ color:var(--amber); font-weight:600; }
      .ok-note{ color:var(--green); font-weight:600; }
      .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin:18px 0; box-shadow:var(--shadow); }
      .panel h3{ font-size:17px; margin-bottom:8px; }
      .panel h4{ font-size:15.5px; margin:16px 0 8px; }

      /* ===== Module đối chiếu ===== */
      .tool-head{ margin-bottom:4px; }
      .tool-title{ font-size:clamp(22px,3.2vw,28px); font-weight:800; letter-spacing:-.01em; }
      .tool-sub{ color:var(--ink-2); max-width:760px; margin-top:5px; }
      .stepper{ display:flex; gap:8px; margin:18px 0 4px; padding:0; list-style:none; flex-wrap:wrap; }
      .stepper li{ flex:1 1 170px; }
      .stepper button{ width:100%; text-align:left; background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:11px; padding:11px 14px; font-weight:600; font-size:14px; box-shadow:var(--shadow); }
      .stepper button[aria-current="step"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
      @media (prefers-color-scheme: dark){ .stepper button[aria-current="step"]{ color:#131c33; } }
      .stepper button:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
      .revision-note{ color:var(--ink-3); font-size:13px; margin-top:6px; }
      .step-title{ font-size:19px; font-weight:800; margin:20px 0 12px; }
      .step-actions{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
      .file-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
      @media (max-width:860px){ .file-grid{ grid-template-columns:1fr; } }
      .file-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
      .file-card h3{ font-size:16.5px; margin-bottom:12px; display:flex; align-items:center; gap:9px; }
      .side-badge{ background:var(--primary); color:#fff; border-radius:7px; font-size:12.5px; padding:2px 9px; font-weight:700; }
      @media (prefers-color-scheme: dark){ .side-badge{ color:#131c33; } }
      .dropzone{ border:2px dashed var(--line-strong); border-radius:11px; padding:22px 16px; text-align:center; background:var(--card-2); }
      .dropzone.drag-over{ border-color:var(--teal); background:var(--teal-soft); }
      .dropzone input[type="file"]{ margin-top:10px; max-width:100%; }
      .badge-synthetic{ background:var(--amber-soft); color:var(--amber); border-radius:99px; padding:1px 9px; font-size:12px; font-weight:700; margin-left:6px; white-space:nowrap; }
      .synthetic{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
      .synthetic .hint{ flex-basis:100%; }
      .meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
      @media (max-width:520px){ .meta-grid{ grid-template-columns:1fr; } }
      fieldset.metadata{ border:1px solid var(--line); border-radius:10px; margin-top:16px; padding:12px 14px 4px; }
      fieldset.metadata legend{ font-weight:700; font-size:14px; padding:0 6px; }
      details.warnings{ border:1px solid var(--amber); background:var(--amber-soft); border-radius:10px; padding:10px 14px; margin-top:12px; }
      details.warnings summary{ font-weight:700; cursor:pointer; }
      details.warnings ul{ margin:8px 0 4px; padding-left:20px; }
      .table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; margin-top:10px; background:var(--card); }
      table{ border-collapse:collapse; width:100%; font-size:14px; }
      th,td{ padding:8px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
      thead th{ background:var(--card-2); font-size:13px; }
      tbody tr:last-child td, tbody tr:last-child th{ border-bottom:none; }
      .preview-table td,.preview-table th{ font-size:12.5px; padding:5px 7px; white-space:nowrap; }
      tr.hl-data td{ background:var(--teal-soft); }
      tr.hl-header td,tr.hl-header th{ background:var(--amber-soft); font-weight:700; }
      .mapping-table select{ max-width:230px; width:100%; background:var(--card); border:1px solid var(--line-strong); border-radius:7px; padding:6px; }
      .mapping-table input[type="checkbox"]{ width:19px; height:19px; accent-color:var(--primary); }
      .scope-panel{ border-color:var(--amber); background:var(--amber-soft); }
      .scope-panel ul{ margin:6px 0 12px; padding-left:20px; }
      .scope-panel input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--amber); vertical-align:-3px; }
      .stats{ list-style:none; margin:0 0 6px; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; }
      .candidate-list{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
      .candidate{ border:1px solid var(--amber); background:var(--amber-soft); border-radius:11px; padding:14px; }
      .candidate-pair{ display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
      .student-card{ flex:1 1 210px; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-size:13.5px; }
      .student-card p{ margin-bottom:2px; }
      .candidate-arrow{ align-self:center; font-size:20px; color:var(--amber); font-weight:800; }
      .candidate-actions{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
      .unmatched{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
      @media (max-width:640px){ .unmatched{ grid-template-columns:1fr; } .candidate-arrow{ display:none; } }
      .status-banner{ border-radius:var(--radius); padding:18px 20px; margin:16px 0; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); }
      .status-banner strong{ font-size:18px; letter-spacing:.02em; }
      .status-banner p{ margin-top:5px; }
      .status-MATCH_IN_SCOPE{ border-left:8px solid var(--green); background:var(--green-soft); }
      .status-HAS_DIFF{ border-left:8px solid var(--red); background:var(--red-soft); }
      .status-INCOMPLETE{ border-left:8px solid var(--amber); background:var(--amber-soft); }
      .status-NO_SCORES{ border-left:8px solid var(--line-strong); background:var(--grey-soft); }
      .summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin:14px 0; }
      .summary-card{ background:var(--card); border:1px solid var(--line); border-radius:11px; padding:12px 14px; box-shadow:var(--shadow); }
      .summary-card span{ display:block; color:var(--ink-2); font-size:12.5px; font-weight:600; }
      .summary-card strong{ font-size:23px; font-weight:800; }
      .results-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:16px; }
      .results-toolbar .field{ flex:1 1 170px; margin-bottom:0; }
      .status-chip{ font-weight:700; white-space:nowrap; }
      tr.row-MISMATCH td,tr.row-INVALID td{ background:var(--red-soft); }
      tr.row-MISSING_A td,tr.row-MISSING_B td{ background:var(--amber-soft); }
      .pagination{ display:flex; gap:14px; align-items:center; margin:14px 0; flex-wrap:wrap; }
      .export-panel h3{ margin-bottom:6px; }
      .results-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
      .confirm-panel{ border:1px solid var(--teal); background:var(--teal-soft); border-radius:var(--radius); padding:16px 20px; margin:18px 0; }
      .confirm-panel h3{ font-size:16.5px; margin-bottom:6px; }
      .confirm-panel ul{ margin:6px 0 12px; padding-left:20px; }

      /* ===== Module thống kê điểm (native) ===== */
      .tk-tabs{ display:flex; gap:8px; margin:18px 0 4px; padding:0; list-style:none; flex-wrap:wrap; }
      .tk-tabs button{ background:var(--card); color:var(--ink-2); border:1px solid var(--line); border-radius:11px; padding:9px 16px; font-weight:600; font-size:14px; box-shadow:var(--shadow); }
      .tk-tabs button[aria-current="page"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
      @media (prefers-color-scheme: dark){ .tk-tabs button[aria-current="page"]{ color:#131c33; } }
      .tk-toolbar{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin-top:14px; }
      .tk-toolbar .field{ flex:0 1 260px; margin-bottom:0; }
      .tk-toolbar .field.grow{ flex:1 1 220px; }
      .hist-wrap{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:10px; overflow-x:auto; }
      .hist-wrap svg{ display:block; min-width:560px; width:100%; height:auto; }
      .miss-tag{ color:var(--red); font-weight:700; white-space:nowrap; }
      .ok-tag{ color:var(--green); font-weight:700; white-space:nowrap; }
      .subj-kind{ font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:99px; background:var(--grey-soft); color:var(--ink-2); white-space:nowrap; }
      .subj-kind.elec{ background:var(--amber-soft); color:var(--amber); }
      tr.tk-student-row{ cursor:pointer; }
      tr.tk-student-row:hover td{ background:var(--card-2); }

      /* ===== Phân quyền theo module (trang Người dùng) ===== */
      .alert-warn{ border:1px solid var(--amber); background:var(--amber-soft); border-radius:var(--radius); padding:16px 20px; margin:16px 0; }
      .alert-warn h3{ font-size:16px; margin-bottom:6px; }
      .alert-warn p{ color:var(--ink-2); margin-bottom:8px; }
      .alert-warn details{ margin-top:10px; }
      .alert-warn summary{ font-weight:700; cursor:pointer; }
      .alert-warn pre{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; overflow-x:auto; font-size:12px; line-height:1.5; max-height:340px; overflow-y:auto; white-space:pre; }
      .acct-card{ border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin-top:14px; background:var(--card); }
      .acct-head{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
      .acct-head strong{ font-size:15.5px; }
      .acct-head .acct-email{ color:var(--ink-3); font-size:13px; }
      .acct-head .role-pill{ margin-left:auto; }
      .perm-table{ margin-top:12px; }
      .perm-table select,.perm-table input[type="text"]{ background:var(--card); border:1px solid var(--line-strong); border-radius:7px; padding:6px 8px; max-width:100%; }
      .perm-table input[type="text"]{ min-width:130px; }
      .acct-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:12px; }
      .acct-status{ font-size:13.5px; }
      .data-note{ border:1px solid var(--teal); background:var(--teal-soft); border-radius:var(--radius); padding:16px 20px; margin:16px 0; }
      .data-note h3{ font-size:16px; margin-bottom:6px; }
      .data-note ul{ margin:6px 0 0; padding-left:20px; color:var(--ink-2); }
      .data-note li{ margin-bottom:5px; }

      /* ===== Trang chính sách bảo mật (/privacy) ===== */
      .privacy-wrap{ max-width:860px; }
      .privacy-doc{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 34px; margin-top:18px; }
      @media (max-width:640px){ .privacy-doc{ padding:22px 18px; } }
      .privacy-doc h2{ font-size:17px; font-weight:800; margin:26px 0 8px; display:flex; gap:10px; align-items:baseline; }
      .privacy-doc h2:first-of-type{ margin-top:22px; }
      .privacy-doc h2 .p-num{ color:var(--primary); font-size:14px; font-weight:800; }
      .privacy-doc p{ color:var(--ink-2); margin-bottom:9px; }
      .privacy-doc ul{ margin:0 0 9px; padding-left:20px; color:var(--ink-2); }
      .privacy-doc li{ margin-bottom:6px; }
      .privacy-doc li::marker{ color:var(--primary); }
      .privacy-doc strong{ color:var(--ink); }
      .privacy-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--ink-3); font-size:13px; border-bottom:1px solid var(--line); padding-bottom:16px; }
      .privacy-contact{ border:1px solid var(--teal); background:var(--teal-soft); border-radius:12px; padding:16px 18px; margin-top:26px; }
      .privacy-contact h2{ margin:0 0 6px; }
      .privacy-contact p{ margin-bottom:0; }
      .page-foot a{ color:var(--ink-2); font-weight:600; }
      .page-foot a:hover{ color:var(--primary); }

      /* ===== Trang công khai: trang chủ (/) & chính sách bảo mật (/privacy) ===== */
      #public-home[hidden],#public-privacy[hidden]{ display:none !important; }
      .pub-header{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
      .pub-header-in{ max-width:1080px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:14px; }
      .pub-brand{ display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-weight:800; font-size:15px; line-height:1.3; }
      .pub-header nav{ margin-left:auto; display:flex; align-items:center; gap:18px; }
      .pub-header nav a.pub-link{ color:var(--ink-2); font-weight:600; font-size:14.5px; text-decoration:none; }
      .pub-header nav a.pub-link:hover{ color:var(--primary); }
      @media (max-width:560px){ .pub-header nav a.pub-link{ display:none; } }
      .pub-main{ max-width:1080px; margin:0 auto; padding:52px 22px 30px; }
      .pub-hero h1{ font-family:"Source Serif 4",Georgia,serif; font-size:clamp(30px,5vw,44px); font-weight:700; letter-spacing:-.01em; max-width:720px; }
      .pub-hero p{ color:var(--ink-2); font-size:17px; max-width:640px; margin-top:14px; }
      .pub-hero .btn{ margin-top:24px; padding:12px 26px; font-size:15.5px; }
      .pub-mods{ margin-top:52px; }
      .pub-mods h2{ font-size:19px; font-weight:800; margin-bottom:14px; }
      .pub-mod-list{ list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
      .pub-mod-list li{ display:flex; align-items:center; gap:13px; padding:16px 20px; font-weight:700; font-size:16px; }
      .pub-mod-list li + li{ border-top:1px solid var(--line); }
      .pub-mod-list .mod-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:10px; }
      .pub-mod-list .mod-ico svg{ width:21px; height:21px; }
      .pub-foot{ max-width:1080px; margin:0 auto; padding:20px 22px 34px; border-top:1px solid var(--line); margin-top:44px; color:var(--ink-2); font-size:13.5px; display:flex; flex-wrap:wrap; gap:6px 24px; justify-content:space-between; }
      .pub-foot a{ color:var(--ink-2); font-weight:600; }
      .pub-foot a:hover{ color:var(--primary); }
      .pub-back{ color:var(--primary); font-weight:600; text-decoration:none; font-size:14.5px; }

      /* ===== Cổng đăng nhập (Supabase Auth) ===== */
      #auth-gate{ position:fixed; inset:0; z-index:300; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
      #auth-gate[hidden]{ display:none !important; }
      #app-shell[hidden]{ display:none !important; }
      .gate-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); max-width:430px; width:100%; padding:32px 30px; text-align:center; margin:auto; }
      .gate-card[hidden]{ display:none !important; }
      .gate-brand{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:20px; text-align:left; }
      .gate-card h1{ font-size:22px; font-weight:800; margin-bottom:8px; }
      .gate-text{ color:var(--ink-2); font-size:14.5px; }
      .gate-spinner{ width:38px; height:38px; margin:8px auto 16px; border-radius:50%; border:4px solid var(--line); border-top-color:var(--primary); animation:gate-spin .9s linear infinite; }
      @keyframes gate-spin{ to{ transform:rotate(360deg); } }
      @media (prefers-reduced-motion: reduce){ .gate-spinner{ animation-duration:2.6s; } }
      .btn-google{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; background:#ffffff; color:#1f2a3d; border:1px solid var(--line-strong); border-radius:10px; padding:11px 18px; font-weight:700; font-size:15px; margin-top:20px; box-shadow:var(--shadow); }
      .btn-google:hover{ background:#f2f5fa; }
      .btn-google:disabled{ opacity:.55; cursor:not-allowed; }
      .btn-google svg{ width:20px; height:20px; flex:0 0 20px; }
      .gate-error{ border:1px solid var(--red); background:var(--red-soft); color:var(--red); border-radius:10px; padding:10px 14px; font-size:14px; font-weight:600; margin-top:16px; text-align:left; }
      .gate-error[hidden]{ display:none !important; }
      .gate-note{ color:var(--ink-3); font-size:13px; margin-top:16px; }
      .gate-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }
      .gate-links{ margin-top:20px; font-size:13.5px; }
      .role-pill{ font-size:11.5px; font-weight:700; background:var(--primary-soft); color:var(--primary); border-radius:99px; padding:3px 10px; white-space:nowrap; }
      img.avatar{ object-fit:cover; border:1px solid var(--line); }
      .avatar[hidden]{ display:none !important; }

      @media print{
        #auth-gate{ display:none !important; }
        .sidebar,.topbar,.page-foot,.stepper,.results-toolbar,.pagination,.results-actions,.no-print{ display:none !important; }
        body{ background:#fff; }
        .page{ padding:0; max-width:none; }
      }

    