/* =================================================================
   Hệ thống học trực tuyến — bộ giao diện
   Dùng chung ngôn ngữ thiết kế với phần mềm Quản lý Đào tạo (qlhssv):
   cùng bảng màu, cùng phông chữ, cùng độ đặc — để người dùng chuyển
   qua lại giữa hai phần mềm không phải làm quen lại.

   Khác một điểm: qlhssv dựng trên Bootstrap, bản này không nạp
   Bootstrap mà viết thẳng cho bộ tên lớp sẵn có của dự án.
   ================================================================= */

:root {
    --nen: #EEF2F5;
    --the: #FFFFFF;
    --vien: #DCE4EA;
    --vien-nhat: #F0F3F6;
    --chu: #1B2A35;
    --chu-nhat: #5E7080;
    --chu-mo: #93A3B0;

    --xanh: #0E6E7C;
    --xanh-dam: #0A5560;
    --xanh-nhat: #E0F0F2;

    --luc: #1F7A4D;
    --luc-nhat: #E2F2EA;
    --do: #B0342F;
    --do-nhat: #FAE8E7;
    --cam: #A9691B;
    --cam-nhat: #FBEEDC;

    --side-w: 234px;
}

* { box-sizing: border-box; }

body {
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    background: var(--nen);
    color: var(--chu);
    margin: 0;
}

.mono, .doc-may {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: .92em;
}

a { color: var(--xanh); text-decoration: none; }
a:hover { color: var(--xanh-dam); text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--vien); }
code, kbd {
    background: #F4F7F9; color: var(--do); padding: 1px 5px;
    border-radius: 4px; font-size: .82em;
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* ============ BỐ CỤC ============ */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--side-w);
    flex-shrink: 0;
    background: var(--the);
    border-right: 1px solid var(--vien);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    overflow-y: auto;
    z-index: 1030;
}
.app-main { flex: 1; margin-left: var(--side-w); min-width: 0; display: flex; flex-direction: column; }

.brand { padding: 16px 18px; border-bottom: 1px solid var(--vien); text-decoration: none; display: block; }
.brand:hover { text-decoration: none; }
.brand span {
    display: block; font-size: .66rem; text-transform: uppercase;
    letter-spacing: .12em; color: var(--xanh); font-weight: 600; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand b {
    display: block; font-size: .95rem; color: var(--chu); font-weight: 700; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Chỉ có tên đơn vị, không có dòng phụ: giữ trên một hàng. Tên quá dài
   thì cắt bớt kèm dấu … — thuộc tính title vẫn cho xem đủ khi rê chuột. */
.brand-mot-dong { padding: 16px 12px; }
.brand-mot-dong b {
    display: block; font-size: .73rem; line-height: 1.35; letter-spacing: 0;
    text-align: center; color: var(--xanh);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-mot-dong:hover b { color: var(--xanh-dam); }

/* ---------- Thẻ học viên trên đầu thanh bên ---------- */

.the-hoc-vien {
    padding: 16px 14px 14px; text-align: center;
    border-bottom: 1px solid var(--vien); background: #FBFCFD;
}
.the-hoc-vien .hv-ten {
    font-size: .82rem; font-weight: 700; margin-top: 10px; line-height: 1.35;
    text-transform: uppercase; letter-spacing: .01em;
}

.the-hoc-vien .hv-phu {
    font-size: .68rem; color: var(--chu-mo); margin-top: 5px; line-height: 1.5;
    word-break: break-all;
}

/*
 * Dòng lớp ở đầu khu nội dung. Mã học viên, tiến độ, trạng thái đều theo lớp
 * — tách khỏi thẻ thông tin cá nhân bên trái để luôn thấy mình đang xem lớp
 * nào. Gói gọn trong một dòng để không lấn chỗ của tiêu đề trang.
 */
.dong-lop, .dong-lop-don {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px; font-size: .82rem; color: var(--chu);
}
.dong-lop .nhan, .dong-lop-don .nhan {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--chu-mo);
}
.dong-lop-don .doc-may { font-size: .76rem; color: var(--chu-nhat); }
.dong-lop > .doc-may { font-size: .76rem; color: var(--chu-nhat); }

/* Bộ nút liền nhau: gọn hơn mấy cái thẻ rời, và đọc ra ngay là một nhóm */
.bo-nut-lop {
    display: inline-flex; border: 1px solid var(--vien); border-radius: 8px;
    background: #fff; overflow: hidden;
}
.bo-nut-lop form { margin: 0; display: flex; }
.bo-nut-lop > *:not(:first-child), .bo-nut-lop form:not(:first-child) .nut-lop {
    border-left: 1px solid var(--vien);
}

.nut-lop {
    font-family: inherit; font-size: .81rem; font-weight: 600; line-height: 1.2;
    padding: 6px 14px; border: 0; background: transparent; color: var(--chu-nhat);
    cursor: pointer; white-space: nowrap; transition: background .12s, color .12s;
}
.nut-lop:hover { background: var(--xanh-nhat); color: var(--xanh); }

/* Lớp đang xem là chữ, không phải nút — bấm vào cũng chẳng đi đâu */
.nut-lop.dang-xem { cursor: default; background: var(--xanh); color: #fff; }

/* Ô ảnh thẻ khổ 3×4 — giữ đúng tỉ lệ dù ảnh gốc khổ nào */
.o-anh-the {
    width: 96px; aspect-ratio: 3 / 4; margin: 0 auto;
    border: 1px solid var(--vien); border-radius: 8px;
    background: var(--nen); overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative;
}
.o-anh-the img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-anh-the .chu-dau {
    font-size: 1.9rem; font-weight: 700; color: var(--chu-mo); line-height: 1;
}
.o-anh-the .chua-co {
    font-size: .64rem; font-weight: 600; letter-spacing: .08em;
    color: var(--chu-mo); margin-top: 6px;
}

/* Hàng ảnh thẻ trong biểu mẫu sửa hồ sơ */
.hang-anh-the {
    display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--vien-nhat);
}
.hang-anh-the .o-anh-the { width: 90px; margin: 0; flex: none; }

.side-nav { padding: 6px 10px 20px; }
.side-grp {
    font-size: .63rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--chu-mo); font-weight: 600; padding: 14px 8px 6px;
}
.side-nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 6px; margin-bottom: 1px;
    text-decoration: none; font-size: .83rem; font-weight: 500; color: #4A5C6B;
}
.side-nav a .ic { width: 15px; text-align: center; font-size: .78rem; opacity: .7; flex: none; }
.side-nav a:hover { background: var(--nen); color: var(--chu); text-decoration: none; }
.side-nav a.active { background: var(--xanh); color: #fff; }
.side-nav a.active .ic { opacity: 1; }
.side-nav a .dem {
    margin-left: auto; background: var(--do-nhat); color: var(--do);
    font-size: .66rem; font-weight: 700; line-height: 1;
    padding: 3px 7px; border-radius: 999px;
}
.side-nav a.active .dem { background: rgba(255, 255, 255, .22); color: #fff; }

.khoi-nguoi-dung {
    margin-top: auto; padding: 12px 14px;
    border-top: 1px solid var(--vien); background: #FBFCFD;
}
.khoi-nguoi-dung .nd-ten { font-size: .83rem; font-weight: 600; color: var(--chu); }
.khoi-nguoi-dung .nd-vai-tro {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--xanh); font-weight: 600; margin-bottom: 8px;
}
.khoi-nguoi-dung .nd-nut { display: flex; gap: 6px; align-items: stretch; }
.khoi-nguoi-dung .nd-nut form { flex: 1; display: flex; margin: 0; }
.khoi-nguoi-dung .nd-nut a, .khoi-nguoi-dung .nd-nut button {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: inherit; font-size: .73rem; padding: 6px 8px; border-radius: 7px;
    border: 1px solid var(--vien); background: #fff; color: var(--chu-nhat);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.khoi-nguoi-dung .nd-nut a:hover, .khoi-nguoi-dung .nd-nut button:hover {
    background: var(--nen); color: var(--chu); text-decoration: none;
}
.khoi-nguoi-dung .nd-nut .nd-thoat:hover { background: var(--do-nhat); color: var(--do); border-color: var(--do); }
.khoi-nguoi-dung .nd-ic { font-size: .85rem; line-height: 1; }

.topbar {
    background: var(--the); border-bottom: 1px solid var(--vien);
    padding: 10px 22px; display: flex; align-items: center; gap: 14px;
    position: sticky; top: 0; z-index: 1020;
}
.topbar .crumb { font-size: .76rem; color: var(--chu-nhat); }

.tb-nguoi { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-ten {
    font-size: .82rem; font-weight: 600; color: var(--chu);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.tb-vai-tro {
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
}
.tb-vai-tro.tb-admin { background: #E8F0FB; color: #2C5F9E; }
.tb-vai-tro.tb-giaovu { background: var(--xanh-nhat); color: var(--xanh); }
.tb-vai-tro.tb-hocvien { background: #F1EDF7; color: #6A4C93; }

.tb-phai { display: flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: auto; }
.tb-nut {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 10px;
    border: 1px solid var(--vien); border-radius: 8px;
    background: var(--the); color: var(--chu-nhat);
    font-size: .82rem; font-family: inherit; cursor: pointer;
    text-decoration: none; white-space: nowrap;
}
.tb-nut:hover { background: var(--xanh-nhat); color: var(--xanh); border-color: var(--xanh); text-decoration: none; }
.tb-nut.tb-thoat:hover { background: var(--do-nhat); color: var(--do); border-color: var(--do); }
.tb-nut-ic { font-size: .88rem; line-height: 1; }

/* Thanh trên rút gọn: trên máy tính không còn gì để hiện nên ẩn hẳn,
   chỉ bật lại ở màn hình hẹp để còn nút mở menu */
.topbar-gon { display: none; }
/* Không còn thanh trên thì nội dung sát mép quá — bù thêm khoảng thở */
@media (min-width: 901px) {
    .topbar-gon + .app-body { padding-top: 26px; }
}

.app-body { padding: 18px 22px 48px; flex: 1 1 auto; }

/* Trang công khai không có thanh bên */
.app-shell.khong-canh-ben { display: block; }
.app-shell.khong-canh-ben .app-main { margin-left: 0; }

.thanh-ngang {
    background: var(--the); border-bottom: 1px solid var(--vien);
    position: sticky; top: 0; z-index: 1020;
}
.thanh-ngang .trong-thanh {
    padding: 0 22px;
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 16px; min-height: 68px;
}

/* Tên đơn vị bên trái — đặt trong Quản trị → Cấu hình */
.thanh-ngang .don-vi-hieu {
    font-size: .88rem; font-weight: 700; color: var(--chu);
    letter-spacing: -.01em; justify-self: start;
}
.thanh-ngang .don-vi-hieu:hover { text-decoration: none; color: var(--xanh); }

/* Tên hệ thống ở giữa, in hoa.
   Oswald là chữ hẹp ngang nên tên dài vẫn nằm gọn một dòng, mà in hoa
   thì nổi hẳn lên như chữ trên bảng hiệu. */
.thanh-ngang .he-thong-hieu {
    font-family: Oswald, 'Be Vietnam Pro', sans-serif;
    text-align: center; white-space: nowrap;
    font-size: 1.32rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--xanh); line-height: 1.2;
}

.thanh-ngang .phai { justify-self: end; display: flex; align-items: center; gap: 8px; }

@media (max-width: 820px) {
    .thanh-ngang .trong-thanh {
        grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px; min-height: 0;
    }
    .thanh-ngang .he-thong-hieu {
        grid-column: 1 / -1; order: 3; text-align: left;
        font-size: .76rem; letter-spacing: .07em; white-space: normal;
    }
}
.thanh-ngang .trong-thanh, .app-shell.khong-canh-ben .app-body {
    max-width: 1320px; margin: 0 auto; width: 100%;
}

/* Trang một cột hẹp: đăng nhập, đổi mật khẩu, gửi đơn xong.
   Khai sau và cùng độ cụ thể với luật 1320px ở trên, nếu không sẽ bị luật
   đó đè và biểu mẫu đăng nhập kéo dài hết màn hình. */
.app-shell .app-body.khung-hep {
    /* Đủ rộng để dòng "Quên mật khẩu, vui lòng liên hệ phòng đào tạo để
       được cấp lại." nằm gọn một hàng — hẹp hơn là nó rớt xuống hai hàng.
       width:100% bắt buộc phải có: .app-body là flex item trong .app-main
       (flex-direction:column) — margin:auto ngang tắt hành vi stretch mặc
       định, không có width:100% thì nó co về đúng khít nội dung bên trong
       thay vì lấp đầy chiều ngang, tràn ra ngoài màn hình hẹp. */
    width: 100%; max-width: 486px; margin: 0 auto; padding: 24px 20px 40px;
    /* Căn giữa theo chiều dọc phần màn hình còn lại dưới thanh đầu trang */
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 68px - 66px);
}
.app-shell .app-body.khung-hep .the { padding: 24px 26px; }
.app-shell .app-body.khung-hep h1 { font-size: 1.3rem; margin-bottom: 18px; }

/* Ô nhập trên trang đăng nhập cao hơn cho dễ bấm */
.app-shell .app-body.khung-hep input[type=text],
.app-shell .app-body.khung-hep input[type=email],
.app-shell .app-body.khung-hep input[type=password] {
    height: 42px; min-height: 42px; font-size: .88rem; padding: 8px 12px;
}
.app-shell .app-body.khung-hep label { font-size: .78rem; margin-bottom: 5px; }
.app-shell .app-body.khung-hep .o { margin-bottom: 16px; }

/* Nút chính trải hết bề ngang thẻ — khung hẹp thì nút nhỏ giữa khoảng
   trống trông lạc lõng, mà đây cũng là việc duy nhất cần làm ở trang này */
.app-shell .app-body.khung-hep form .nut-chinh { width: 100%; }
.app-shell .app-body.khung-hep .nho { text-align: center; text-wrap: balance; }

/* Trang gửi đơn đăng ký — hẹp hơn toàn màn hình cho đỡ loãng */
/* width:100% cần thiết — lý do giống .khung-hep ở trên: .app-body là flex
   item cột trong .app-main, margin:auto ngang tắt stretch mặc định. */
.app-shell .app-body.khung-vua { width: 100%; max-width: 820px; margin: 0 auto; }

/* ---------- Đơn đăng ký học ---------- */

.dau-don { margin: 6px 0 16px; }
.dau-don h1 { font-size: 1.5rem; margin: 0 0 6px; }
.dau-don p { color: var(--chu-nhat); font-size: .86rem; margin: 0; max-width: 62ch; line-height: 1.7; }

.don-dang-ky .the { padding: 18px 22px 20px; }
.don-dang-ky .section-title { margin-bottom: 14px; }
.don-dang-ky label { font-size: .76rem; }
.don-dang-ky .o-ngang { gap: 16px; }

/* Ô nhập cao bằng nút cho cân, và đủ rộng để bấm trên điện thoại */
.don-dang-ky input[type=text], .don-dang-ky input[type=email],
.don-dang-ky input[type=tel], .don-dang-ky input[type=date],
.don-dang-ky select {
    height: 40px; min-height: 40px; font-size: .86rem; padding: 8px 11px;
}
.don-dang-ky textarea { font-size: .86rem; min-height: 72px; }

.bat-buoc { color: var(--do); font-weight: 700; }
.an-nhan { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.hang-gui {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #FBFCFD;
}
.hang-gui .nut-gui { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 560px) {
    .hang-gui .nut-gui { margin-left: 0; width: 100%; }
    .hang-gui .nut-gui .nut { flex: 1; }
}

@media (max-width: 820px) {
    .app-shell .app-body.khung-hep { min-height: 0; padding-top: 20px; }
}

/* ============ CHỮ ============ */

h1, h2, h3, h4, h5 { color: var(--chu); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.3rem; margin: 0 0 4px; }
h2 { font-size: 1rem; }
h3 { font-size: .9rem; }
.text-muted, .nho { color: var(--chu-nhat); font-size: .78rem; }
small { font-size: .78rem; }

.tieu-de-trang {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap; margin: 0 0 16px;
}
.tieu-de-trang .day-phai { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.section-title, .nhom-cd {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--xanh); font-weight: 600; margin: 0 0 10px;
    display: flex; align-items: center; gap: 10px;
}
.section-title::after, .nhom-cd::after { content: ''; flex: 1; height: 1px; background: var(--vien); }

/* ============ THẺ ============ */

.the {
    background: var(--the); border: 1px solid var(--vien);
    border-radius: 11px; box-shadow: none;
    padding: 15px 17px; margin-bottom: 14px;
}
.the > h2, .the > h3 { margin-top: 0; }
.the > *:last-child { margin-bottom: 0; }

.luoi { display: grid; gap: 12px; }
.luoi-2 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.luoi-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.bo-cuc-hoc { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }

/* ============ TRANG CHI TIẾT LỚP — thẻ trái cố định + tab phải ============ */

.bo-cuc-lop { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 14px; align-items: start; }
/* minmax(0, 1fr), không phải 1fr trần — 1fr trần vẫn giữ min-width:auto ngầm,
   nên bảng rộng bên trong (Học viên) sẽ ép cả lưới rộng ra thay vì tự cuộn
   ngang gọn trong khung của nó. */
@media (max-width: 900px) { .bo-cuc-lop { grid-template-columns: minmax(0, 1fr); } }

.the-lop-trai { position: sticky; top: 14px; }
.dau-lop-trai { text-align: center; }
.dau-lop-trai h1 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 4px; }

.nhan-tt.co-cham::before {
    content: ''; display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px;
}

.o-si-so { background: var(--xanh-nhat); border-radius: 10px; padding: 16px; text-align: center; margin: 14px 0; }
.o-si-so .so-lon { font-size: 2rem; font-weight: 700; color: var(--chu); line-height: 1.1; font-variant-numeric: tabular-nums; }
.o-si-so .nhan { font-size: .8rem; color: var(--chu-nhat); margin-top: 4px; }

.khoi-thong-tin-lop { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vien-nhat); }
.khoi-thong-tin-lop .tieu-de-khoi {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--chu-nhat); font-weight: 700; margin-bottom: 4px;
}
.hang-tt { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--vien-nhat); font-size: .82rem; }
.hang-tt:last-child { border-bottom: 0; }
.hang-tt .nhan { color: var(--chu-nhat); flex: none; }
.hang-tt .gia-tri { font-weight: 600; text-align: right; }

.the-tab { display: flex; gap: 18px; border-bottom: 1px solid var(--vien); margin-bottom: 14px; flex-wrap: wrap; }
.the-tab button {
    background: none; border: none; padding: 10px 2px; font-family: inherit;
    font-size: .88rem; font-weight: 600; color: var(--chu-nhat); cursor: pointer;
    border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 7px;
}
.the-tab button:hover { color: var(--xanh); }
.the-tab button.dang { color: var(--xanh); border-color: var(--xanh); }
.the-tab button .dem {
    background: var(--xanh-nhat); color: var(--xanh); font-size: .72rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.the-tab button.dang .dem { background: var(--xanh); color: #fff; }
.khoi-tab { display: none; }
.khoi-tab.dang { display: block; }

.so-lieu { padding: 13px 15px; }
.so-lieu .so {
    font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
/* Biến thể cho ô hiện TÊN/CHỮ (khóa học, trạng thái...) thay vì con số —
   nhẹ hơn .so mặc định để đỡ to và thô. */
.so-lieu .so-chu {
    font-size: .92rem; font-weight: 600; letter-spacing: normal; line-height: 1.4;
}
.so-lieu .so-chu .nhan-tt { font-size: .78rem; }
.so-lieu .nhan {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--chu-nhat); font-weight: 600; margin-top: 3px;
}
.so-lieu .nhan a { color: var(--chu-nhat); }
.so-lieu .nhan a:hover { color: var(--xanh); }

/* ============ BẢNG ============ */

table { width: 100%; border-collapse: collapse; font-size: .82rem; color: var(--chu); }
th, td { padding: 7px 11px; text-align: left; vertical-align: middle; }
thead th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    font-weight: 600; color: var(--chu-nhat);
    background: #F6F8FA; border-bottom: 1px solid var(--vien); white-space: nowrap;
}
tbody td { border-bottom: 1px solid var(--vien-nhat); word-break: break-word; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #F9FBFC; }
.bang-cuon { overflow-x: auto; }
.bang-cuon thead th:first-child { border-top-left-radius: 8px; }
.bang-cuon thead th:last-child { border-top-right-radius: 8px; }

/* ============ Ô NHẬP ============ */

label, .form-label {
    display: block; font-size: .72rem; font-weight: 600;
    color: var(--chu-nhat); margin-bottom: 3px;
}
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=time], input[type=number], input[type=file], input[type=tel],
input[type=search], input[type=url], select, textarea {
    width: 100%;
    font-family: inherit; font-size: .82rem;
    padding: 6px 9px; height: 32px; min-height: 32px;
    border: 1px solid var(--vien); border-radius: 7px;
    background: var(--the); color: var(--chu);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-nhat);
}
input::placeholder, textarea::placeholder { color: var(--chu-mo); }
textarea { height: auto; min-height: 58px; padding: 8px 10px; }
input[type=file] { padding: 4px 8px; background: #FAFBFC; cursor: pointer; }
input[type=file]::file-selector-button {
    margin-right: 10px; padding: 3px 11px; height: 22px;
    border: 1px solid var(--vien); border-radius: 5px;
    background: #fff; color: var(--chu-nhat);
    font: inherit; font-size: .74rem; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--xanh-nhat); color: var(--xanh); border-color: var(--xanh); }
select {
    appearance: none; padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'%3E%3Cpath fill='%235E7080' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}

.o { margin-bottom: 12px; }
.o-ngang { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.goi-y { color: var(--chu-mo); font-size: .72rem; margin-top: 3px; line-height: 1.5; }

/*
 * Hàng nhiều ô với tỉ lệ đặt sẵn, dùng cho biểu mẫu hồ sơ học viên.
 * auto-fit chia đều nhau nên ô "Họ và tên" bị bóp bằng ô "Giới tính";
 * ở đây khai tỉ lệ thẳng để ô dài được rộng hơn.
 */
.o-ngang.ngang-nhan-than { grid-template-columns: 2.4fr 1fr 1.2fr 1.5fr; }
.o-ngang.ngang-lien-he { grid-template-columns: 1.1fr 1fr 1.8fr; }
.o-ngang.ngang-dia-chi { grid-template-columns: 1.3fr 1fr; }

/* Màn hẹp thì xếp lại cho ô không bị bóp xuống dưới ngưỡng bấm được */
@media (max-width: 1000px) {
    .o-ngang.ngang-nhan-than { grid-template-columns: 2fr 1fr; }
    .o-ngang.ngang-lien-he { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    .o-ngang.ngang-nhan-than,
    .o-ngang.ngang-lien-he,
    .o-ngang.ngang-dia-chi { grid-template-columns: 1fr; }
}

.chon-co { display: flex; align-items: flex-start; gap: 8px; }
.chon-co input { width: auto; height: auto; min-height: 0; margin-top: 3px; accent-color: var(--xanh); }
.chon-co label { margin: 0; font-size: .82rem; font-weight: 500; color: var(--chu); text-transform: none; }

/* ============ NÚT ============ */

.nut {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: inherit; font-size: .81rem; font-weight: 500;
    padding: 6px 14px; border-radius: 7px;
    border: 1px solid var(--vien); background: var(--the); color: var(--chu);
    cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nut:hover { background: var(--nen); color: var(--chu); border-color: var(--chu-mo); text-decoration: none; }
.nut:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }

.nut-chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }

.nut-do { color: var(--do); border-color: var(--vien); background: var(--the); }
.nut-do:hover { background: var(--do-nhat); border-color: var(--do); color: var(--do); }

.nut:disabled, .nut[disabled] { opacity: .5; cursor: not-allowed; }
.nut-nho { font-size: .74rem; padding: 4px 9px; border-radius: 6px; }

/* Nút hành động chính của một trang công khai — cao bằng ô nhập (42px)
   để các nút cạnh nhau không so le */
.nut-lon { height: 42px; padding: 0 22px; font-size: .88rem; }

/* ============ NHÃN TRẠNG THÁI ============ */

.nhan-tt {
    display: inline-block; font-size: .68rem; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; line-height: 1.5;
}
.tt-xong { background: var(--luc-nhat); color: var(--luc); }
.tt-cho { background: var(--cam-nhat); color: var(--cam); }
.tt-tu-choi { background: var(--do-nhat); color: var(--do); }
.tt-khoa { background: #EDF1F4; color: var(--chu-nhat); }

.the-mo {
    display: inline-block; padding: 1px 8px; border-radius: 20px;
    background: var(--xanh-nhat); color: var(--xanh);
    font-size: .66rem; font-weight: 600;
}

/* ============ THÔNG BÁO ============ */

.bao {
    border-radius: 9px; font-size: .84rem; padding: 10px 14px;
    border: 1px solid; margin-bottom: 12px;
}
.bao-ok { background: var(--luc-nhat); border-color: #C4E2D3; color: var(--luc); }
.bao-loi { background: var(--do-nhat); border-color: #EFCDCB; color: var(--do); }
.bao-y { background: var(--cam-nhat); border-color: #EDD7B4; color: var(--cam); }

/* ============ THANH TIẾN ĐỘ ============ */

.thanh { height: 6px; background: #E3E9ED; border-radius: 999px; overflow: hidden; }
.thanh > span {
    display: block; height: 100%; width: 0;
    background: var(--xanh); border-radius: 999px; transition: width .35s ease;
}
.thanh.xong > span { background: var(--luc); }

/* Thanh phân bố nhiều đoạn màu — ví dụ chia học viên theo trạng thái. */
.thanh-phan-bo {
    display: flex; height: 10px; border-radius: 999px; overflow: hidden;
    background: #E3E9ED; margin: 4px 0;
}
.thanh-phan-bo .doan { height: 100%; }
.thanh-phan-bo .doan.mau-xong { background: var(--luc); }
.thanh-phan-bo .doan.mau-hoc { background: var(--xanh); }
.thanh-phan-bo .doan.mau-cho { background: var(--cam); }
.thanh-phan-bo .doan.mau-tu-choi { background: var(--do); }

.chu-thich-phan-bo { display: flex; flex-wrap: wrap; gap: 14px; font-size: .78rem; color: var(--chu-nhat); }
.chu-thich-phan-bo .cham {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px;
}
.chu-thich-phan-bo .mau-xong { background: var(--luc); }
.chu-thich-phan-bo .mau-hoc { background: var(--xanh); }
.chu-thich-phan-bo .mau-cho { background: var(--cam); }
.chu-thich-phan-bo .mau-tu-choi { background: var(--do); }

/* ============ DANH SÁCH BÀI GIẢNG ============ */

/* Cuộn riêng danh sách bài giảng ở cột phải trang học, tránh kéo dài cả
   trang khi chương trình có nhiều môn/bài — video ở cột trái vẫn gọn. */
.khung-cuon-bai-giang {
    max-height: 70vh; overflow-y: auto; padding-right: 4px; scrollbar-width: thin;
}

.ds-mon {
    border: 1px solid var(--vien); border-radius: 10px;
    overflow: hidden; margin-bottom: 8px; background: var(--the);
}
.ds-mon > header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 14px; background: #F7F9FA; border-bottom: 1px solid var(--vien);
}
.ds-mon > header .ten { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 8px; }
.ds-mon > header .nho { margin-left: auto; }
.ds-mon ul { list-style: none; margin: 0; padding: 0; }
.ds-mon li { border-bottom: 1px solid var(--vien-nhat); }
.ds-mon li:last-child { border-bottom: 0; }
.ds-mon li > a, .ds-mon li > span {
    display: flex; gap: 10px; align-items: center;
    padding: 9px 14px; color: var(--chu); font-size: .84rem;
}
.ds-mon li > a:hover { background: var(--xanh-nhat); text-decoration: none; }
.ds-mon li.khoa > span { color: var(--chu-mo); }
.ds-mon li.chua-video > span { color: var(--chu-mo); cursor: default; }
.ds-mon li.dang-hoc { background: var(--xanh-nhat); box-shadow: inset 3px 0 0 var(--xanh); }
.ds-mon li.dang-hoc > a { font-weight: 600; }
.ds-mon .dau { flex: none; width: 16px; text-align: center; font-size: .78rem; color: var(--chu-nhat); }
.ds-mon li > a .dau { color: var(--xanh); }
.ds-mon .icon-video { flex: none; font-size: .76rem; }
.ds-mon .phu { margin-left: auto; font-size: .74rem; color: var(--chu-nhat); flex: none; }

/* ============ TRÌNH PHÁT VIDEO ============ */

.khung-phat { background: #000; border-radius: 10px; overflow: hidden; position: relative; }
.khung-phat video { display: block; width: 100%; max-height: 66vh; background: #000; }
#trinh-phat:fullscreen { background: #0B1116; padding: 14px; }
#trinh-phat:fullscreen video { max-height: 84vh; }
#trinh-phat:fullscreen .hang-tien-do { color: #E6EAF0; }

.lop-che {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center; text-align: center;
    background: rgba(11, 17, 22, .9); color: #fff; padding: 24px;
    font-weight: 600; font-size: .9rem;
}
.lop-che.hien { display: flex; }

.hang-tien-do { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.hang-tien-do .thanh { flex: 1 1 180px; }
.hang-tien-do input[type=range] { accent-color: var(--xanh); width: auto; height: auto; min-height: 0; }
.hang-tien-do .hang-ke-tiep { margin-left: auto; max-width: 100%; }
.nut-cat {
    display: inline-block; max-width: 220px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}

.canh-bao-tua {
    margin-top: 9px; display: none;
    padding: 9px 13px; border-radius: 9px;
    background: var(--cam-nhat); border: 1px solid #EDD7B4;
    color: var(--cam); font-weight: 500; font-size: .82rem;
}
.canh-bao-tua.hien { display: block; }

/* ============ PHÂN TRANG ============ */

.phan-trang { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 14px; }
.phan-trang a, .phan-trang span {
    min-width: 26px; text-align: center;
    font-size: .74rem; padding: 2px 8px; line-height: 1.6;
    border: 1px solid var(--vien); border-radius: 6px;
    background: var(--the); color: var(--xanh);
}
.phan-trang a:hover { background: var(--xanh-nhat); border-color: var(--xanh); color: var(--xanh-dam); text-decoration: none; }
.phan-trang .hien-tai { background: var(--xanh); border-color: var(--xanh); color: #fff; font-weight: 600; }
.phan-trang .tat { color: var(--chu-mo); background: #FAFBFC; border-color: var(--vien-nhat); }

/* ============ DANH SÁCH NHÃN — GIÁ TRỊ ============ */

.ds-tt { margin: 0; }
.ds-tt > div {
    display: grid; grid-template-columns: 170px minmax(0, 1fr);
    gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--vien-nhat);
}
.ds-tt > div:last-child { border-bottom: 0; }
.ds-tt > div:first-child { padding-top: 0; }
.ds-tt dt { color: var(--chu-nhat); font-size: .78rem; }
.ds-tt dd { margin: 0; font-size: .84rem; font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ds-tt > div { grid-template-columns: 1fr; gap: 1px; } }

/* Chọn nguồn video: tải lên hay dùng liên kết */
.chon-nguon { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.mot-nguon {
    display: flex; gap: 10px; align-items: flex-start; margin: 0;
    padding: 12px 14px; border: 1px solid var(--vien); border-radius: 9px;
    cursor: pointer; font-weight: 400; text-transform: none; letter-spacing: 0;
}
.mot-nguon:hover { background: var(--nen); }
.mot-nguon.dang { border-color: var(--xanh); background: var(--xanh-nhat); }
.mot-nguon input { width: auto; height: auto; min-height: 0; margin-top: 3px; flex: none; accent-color: var(--xanh); }
.mot-nguon > span { display: grid; gap: 3px; }
.mot-nguon strong { font-size: .86rem; }

/*
 * Bộ chọn nhiều mục (lớp, khóa học).
 *
 * Danh sách cuộn trong khung cố định thay vì trải hết ra: 20 lớp đã tràn
 * màn hình, mà trường thật thì còn nhiều hơn. Ô tìm lọc tại chỗ, dải chip
 * bên dưới cho thấy đang chọn gì kể cả khi mục đó đã cuộn khuất.
 */
.chon-nhieu { border: 1px solid var(--vien); border-radius: 9px; background: #fff; overflow: hidden; }

.cn-dau {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-bottom: 1px solid var(--vien-nhat); background: #FBFCFD;
}
.cn-dau .cn-tim {
    flex: 1; height: 32px; min-height: 32px; font-size: .81rem; padding: 5px 10px;
}
.cn-dem { font-size: .72rem; color: var(--chu-mo); white-space: nowrap; }
.cn-xoa-het {
    font-family: inherit; font-size: .72rem; color: var(--do); background: none;
    border: 0; padding: 2px 4px; cursor: pointer; white-space: nowrap;
}
.cn-xoa-het:hover { text-decoration: underline; }

.cn-danh-sach { max-height: 232px; overflow-y: auto; padding: 6px; }
.cn-ten-nhom {
    position: sticky; top: -6px; z-index: 1;
    font-size: .64rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--chu-mo); background: #fff; padding: 7px 6px 4px;
}
.cn-nhom + .cn-nhom { border-top: 1px solid var(--vien-nhat); margin-top: 4px; }

.cn-muc {
    display: flex; align-items: center; gap: 9px; margin: 0;
    padding: 6px 8px; border-radius: 6px; cursor: pointer;
    font-size: .82rem; color: var(--chu); text-transform: none; font-weight: 400;
}
.cn-muc:hover { background: var(--xanh-nhat); }

/* display của bảng kiểu tác giả đè lên [hidden]{display:none} của trình duyệt,
   nên phải tự khai lại, nếu không lọc chạy mà danh sách vẫn hiện nguyên. */
.cn-muc[hidden], .cn-nhom[hidden], .cn-khong-thay[hidden], .cn-xoa-het[hidden] { display: none; }
.cn-muc input {
    width: auto; height: auto; min-height: 0; margin: 0; flex: none; accent-color: var(--xanh);
}
.cn-muc:has(input:checked) { background: var(--xanh-nhat); }
.cn-muc:has(input:checked) .cn-ten { font-weight: 600; color: var(--xanh); }
.cn-ten { flex: 1; }
.cn-ma { font-size: .7rem; color: var(--chu-mo); }
.cn-khong-thay { padding: 14px 8px; font-size: .8rem; color: var(--chu-mo); text-align: center; }

.cn-da-chon { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.cn-da-chon:not(:empty) { padding: 9px 10px; border-top: 1px solid var(--vien-nhat); background: #FBFCFD; }
.cn-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: .74rem; font-weight: 500; cursor: pointer;
    padding: 3px 8px 3px 10px; border-radius: 20px;
    border: 1px solid var(--xanh); background: var(--xanh-nhat); color: var(--xanh);
}
.cn-chip:hover { background: var(--xanh); color: #fff; }

/* Xem trước danh sách nhập từ Excel */
.so-lieu.so-lieu-loi .so { color: var(--do); }
.bang-xem-truoc tr.hang-bo_qua { background: var(--do-nhat); }
.bang-xem-truoc tr.hang-bo_qua td { color: var(--do); }
.bang-xem-truoc tr.hang-dung_lai { background: var(--cam-nhat); }
.bang-xem-truoc td { vertical-align: top; }
/* Ngày, CCCD, điện thoại đọc theo cụm — đừng để xuống dòng giữa chừng */
.bang-xem-truoc td.doc-may { white-space: nowrap; }

/* Hàng cấp lại mật khẩu hàng loạt ở danh sách học viên */
.hang-cap-lai { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hang-cap-lai .nut { margin-left: auto; }
table input[type=checkbox] { width: auto; height: auto; min-height: 0; accent-color: var(--xanh); }

/* Cột thao tác trong bảng danh sách: các nút nằm trên một hàng */
.o-thao-tac { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.o-thao-tac form, .nut-xoa-nhanh { margin: 0; display: inline-flex; }

/* ============ NGÂN HÀNG CÂU HỎI & BÀI THI ============ */

.cau-hoi {
    border: 1px solid var(--vien); border-radius: 10px;
    margin-bottom: 10px; background: var(--the); overflow: hidden;
}
.cau-hoi.tat { opacity: .6; }
.cau-hoi .dau-cau {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 14px; background: #F7F9FA; border-bottom: 1px solid var(--vien);
}
.cau-hoi .stt {
    flex: none; min-width: 26px; height: 26px; padding: 0 7px;
    border-radius: 7px; background: var(--xanh-nhat); color: var(--xanh);
    display: grid; place-items: center; font-size: .76rem; font-weight: 700;
}
.cau-hoi .noi-dung { flex: 1; min-width: 0; font-size: .88rem; font-weight: 500; line-height: 1.6; }
.cau-hoi .thao-tac { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: none; }

.ds-dap-an { list-style: none; margin: 0; padding: 8px 14px 12px; display: grid; gap: 5px; }
.ds-dap-an li {
    display: flex; gap: 9px; align-items: baseline;
    padding: 6px 10px; border-radius: 7px; font-size: .84rem;
    border: 1px solid transparent;
}
.ds-dap-an .ky-hieu {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--nen); color: var(--chu-nhat);
    display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700;
}
.ds-dap-an li.dung { background: var(--luc-nhat); border-color: #C4E2D3; }
.ds-dap-an li.dung .ky-hieu { background: var(--luc); color: #fff; }
.ds-dap-an li.da-chon { border-color: var(--xanh); background: var(--xanh-nhat); }
.ds-dap-an li.da-chon.dung { background: var(--luc-nhat); border-color: var(--luc); }
.ds-dap-an .dau-dung { margin-left: auto; color: var(--luc); font-size: .72rem; font-weight: 700; flex: none; }
.ds-dap-an .dau-chon { margin-left: auto; color: var(--xanh); font-size: .72rem; font-weight: 600; flex: none; }
.ds-dap-an li.da-chon .dau-dung { margin-left: 8px; }

.cau-hoi.cau-dung { border-color: #C4E2D3; }
.cau-hoi.cau-sai { border-color: var(--do-vien, #EFCDCB); }

/* Ô nhập đáp án trong biểu mẫu câu hỏi */
.hang-dap-an { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.hang-dap-an .o-dung { margin: 0; flex: none; }
.hang-dap-an .o-dung input { width: auto; height: auto; min-height: 0; accent-color: var(--luc); }
.hang-dap-an .ky-hieu {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--nen); color: var(--chu-nhat);
    display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.hang-dap-an input[type=text] { flex: 1; }

/* ---------- Màn làm bài ---------- */

.thanh-thi {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 18px; margin-bottom: 16px;
    background: var(--the); border: 1px solid var(--vien); border-radius: 11px;
}
.thanh-thi .ten-de { font-weight: 700; font-size: .95rem; }
.thanh-thi .da-lam {
    margin-left: auto; font-size: .82rem; color: var(--chu-nhat);
    padding: 5px 12px; border-radius: 20px; background: var(--nen);
}
.thanh-thi .da-lam.du { background: var(--luc-nhat); color: var(--luc); font-weight: 600; }
.thanh-thi .dong-ho {
    flex: none; font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: 1.5rem; font-weight: 700; letter-spacing: .02em;
    padding: 4px 14px; border-radius: 9px;
    background: var(--xanh-nhat); color: var(--xanh);
}
.thanh-thi.sap-het .dong-ho { background: var(--cam-nhat); color: var(--cam); }
.thanh-thi.gan-het .dong-ho { background: var(--do-nhat); color: var(--do); animation: nhay 1s steps(2) infinite; }

@keyframes nhay { 50% { opacity: .45; } }

.cau-thi .dau-cau-thi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cau-thi .dau-cau-thi .stt { font-weight: 700; font-size: .88rem; color: var(--xanh); }
.cau-thi .trang-thai { margin-left: auto; }
.cau-thi .trang-thai.xong { color: var(--luc); }
.cau-thi .trang-thai.loi { color: var(--do); font-weight: 600; }
.cau-thi .hoi { font-size: .92rem; line-height: 1.7; margin-bottom: 12px; }

.ds-chon { display: grid; gap: 7px; }
.mot-chon {
    display: flex; gap: 10px; align-items: center; margin: 0;
    padding: 10px 13px; border: 1px solid var(--vien); border-radius: 9px;
    font-size: .86rem; font-weight: 400; color: var(--chu);
    cursor: pointer; text-transform: none; letter-spacing: 0;
}
.mot-chon:hover { background: var(--nen); }
.mot-chon.da-chon { border-color: var(--xanh); background: var(--xanh-nhat); }
.mot-chon input { width: auto; height: auto; min-height: 0; flex: none; accent-color: var(--xanh); }
.mot-chon .ky-hieu {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--nen); color: var(--chu-nhat);
    display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}
.mot-chon.da-chon .ky-hieu { background: var(--xanh); color: #fff; }
.mot-chon .chu { flex: 1; min-width: 0; }

@media (max-width: 560px) {
    .thanh-thi .da-lam { margin-left: 0; }
    .thanh-thi .dong-ho { margin-left: auto; font-size: 1.25rem; }
}

/* ============ LỊCH SỬ HỌC TẬP ============ */

.loc-ngay { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.loc-ngay .o { margin: 0; }
.loc-ngay .o:last-child { display: flex; gap: 6px; }
.loc-ngay input[type=date] { width: auto; min-width: 160px; }

.ngay-hoc { padding: 0; overflow: hidden; }
.ngay-hoc .dau-ngay {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 12px 16px; background: #F7F9FA; border-bottom: 1px solid var(--vien);
}
.ngay-hoc .ngay-so {
    flex: none; width: 52px; text-align: center; line-height: 1.1;
    padding: 6px 0; border-radius: 8px;
    background: var(--xanh-nhat); color: var(--xanh);
}
.ngay-hoc .ngay-so .d { display: block; font-size: 1.25rem; font-weight: 700; }
.ngay-hoc .ngay-so .m { display: block; font-size: .6rem; font-weight: 600; text-transform: uppercase; }
.ngay-hoc .thu { font-weight: 600; font-size: .88rem; }
.ngay-hoc .tong-ngay { margin-left: auto; text-align: right; }
.ngay-hoc .tong-ngay .gio { font-weight: 700; font-size: .95rem; color: var(--xanh); }
.ngay-hoc .bang-cuon { padding: 0 6px 6px; }

@media (max-width: 560px) {
    .ngay-hoc .tong-ngay { margin-left: 0; text-align: left; width: 100%; }
}

/* Khung giờ gọn nằm trong thẻ thông tin học tập ở trang Hồ sơ */
.khoi-khung-gio { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--vien-nhat); }
.khoi-khung-gio .bao { margin-bottom: 10px; }
.khoi-khung-gio .ds-khung-gio li { padding: 6px 11px; font-size: .8rem; }
.khoi-khung-gio .ds-khung-gio .gio { font-size: .74rem; }

/* Hàng tham số trang cấu hình */
.hang-cd {
    display: grid; grid-template-columns: minmax(0, 1fr) 190px;
    gap: 18px; align-items: start;
    padding: 14px 0; border-bottom: 1px solid var(--vien-nhat);
}
.hang-cd:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.hang-cd .ten { font-weight: 600; font-size: .86rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hang-cd .ten label { font-size: .86rem; color: var(--chu); text-transform: none; margin: 0; }
.hang-cd .mo-ta { color: var(--chu-nhat); font-size: .76rem; margin-top: 3px; line-height: 1.55; }
.hang-cd .o { margin: 0; }
.hang-cd .don-vi { display: flex; align-items: center; gap: 7px; }
.hang-cd .don-vi .chu-don-vi { color: var(--chu-nhat); font-size: .76rem; flex: none; }
@media (max-width: 720px) { .hang-cd { grid-template-columns: 1fr; gap: 8px; } }

/*
 * Ô số chỉ cần chỗ cho vài chữ số nên nằm gọn ở cột phải. Ô chữ và ô tải tệp
 * thì không: nhét vào 190px là tên đơn vị bị cắt mất đuôi, còn ảnh xem trước
 * teo lại. Những hàng đó xếp một cột, ô nhập xuống dưới phần mô tả.
 */
.hang-cd.hang-rong { grid-template-columns: 1fr; gap: 10px; }
.hang-cd.hang-rong input[type=text] { max-width: 520px; }

/* Ảnh xem trước đứng cạnh ô chọn tệp, không xếp chồng cho đỡ dài trang */
.khoi-media { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.khoi-media .xem-truoc-media { width: 220px; flex: none; margin-bottom: 0; }
.khoi-media .ben-media { flex: 1; min-width: 240px; max-width: 420px; }
.khoi-media .ben-media .goi-y { margin-top: 8px; }

/* ============ KHUNG GIỜ HỌC ============ */

.ds-khung-gio { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ds-khung-gio li {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; border: 1px solid var(--vien); border-radius: 8px;
    background: #FBFCFD; font-size: .84rem;
}
.ds-khung-gio .ngay { font-weight: 600; }
.ds-khung-gio .gio {
    margin-left: auto; padding: 2px 10px; border-radius: 20px;
    background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; font-size: .78rem;
}

/* ============ KẾT LUẬN KẾT QUẢ HỌC TẬP ============ */

.ket-luan { display: flex; gap: 14px; align-items: flex-start; }
.ket-luan .dau {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.1rem;
    background: var(--cam-nhat); color: var(--cam);
}
.ket-luan .chinh { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.ket-luan .phu { color: var(--chu-nhat); font-size: .8rem; margin-top: 4px; line-height: 1.7; }
.ket-luan-dat { border-color: var(--xanh-vien, #BFDFE3); background: #FAFDFD; }
.ket-luan-dat .dau { background: var(--luc-nhat); color: var(--luc); }

/* ============ TRANG CÔNG KHAI ============ */

/* Cả trang chủ phải lọt một màn hình laptop (768px): thanh đầu trang 68px
   + khối mở đầu + ba thẻ giới thiệu + chân trang. Vì vậy khối mở đầu bị
   khống chế chiều cao thay vì để nó tự giãn theo ảnh. */
.trang-bia { padding: 32px 40px; background: var(--the); margin-bottom: 16px; }
.trang-bia.co-media,
.trang-bia:has(.bia-media) {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px; align-items: center;
}
.trang-bia h1 {
    font-size: 2.1rem; line-height: 1.22; margin: 12px 0 12px;
    letter-spacing: -.025em; max-width: 22ch;
}
.trang-bia p {
    max-width: 58ch; color: var(--chu-nhat);
    font-size: .92rem; line-height: 1.7; margin: 0;
}
.trang-bia .nut-hang { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }
.trang-bia .nut { height: 42px; padding: 0 22px; font-size: .88rem; }

/* Nhãn "HỆ THỐNG ĐÀO TẠO TRỰC TUYẾN" trên đầu khối mở đầu —
   cùng phông với dòng ở thanh đầu trang */
.trang-bia .bia-nhan {
    font-family: Oswald, 'Be Vietnam Pro', sans-serif;
    font-size: .95rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; padding: 4px 14px;
}

/* Khung ảnh / video giới thiệu */
.bia-media {
    aspect-ratio: 16 / 10; max-height: 300px; margin-left: auto;
    border-radius: 12px; overflow: hidden;
    background: var(--nen); border: 1px solid var(--vien);
}
.bia-media img, .bia-media video {
    width: 100%; height: 100%; object-fit: cover; display: block; background: #000;
}
.bia-media .media-trong {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border: 2px dashed var(--vien-nhat); border-radius: 12px;
    color: var(--chu-mo); text-align: center; padding: 20px;
}
.bia-media .media-trong .dau { font-size: 2.4rem; line-height: 1; }
.bia-media .media-trong .chu { font-size: .82rem; font-weight: 600; }

/* Ô xem trước trong trang Cấu hình */
.xem-truoc-media {
    aspect-ratio: 4 / 3; margin-bottom: 8px;
    border: 1px solid var(--vien); border-radius: 8px; overflow: hidden; background: var(--nen);
}
.xem-truoc-media img, .xem-truoc-media video {
    width: 100%; height: 100%; object-fit: cover; display: block; background: #000;
}

@media (max-width: 980px) {
    .trang-bia.co-media,
    .trang-bia:has(.bia-media) { grid-template-columns: 1fr; gap: 28px; }
    .bia-media { max-width: 520px; }
}

/* Ba thẻ giới thiệu dưới khối mở đầu */
.luoi-gioi-thieu { gap: 16px; margin-bottom: 4px; }
.luoi-gioi-thieu .the { padding: 16px 20px; margin-bottom: 0; }
.luoi-gioi-thieu .the .section-title { margin-bottom: 7px; }
.luoi-gioi-thieu .the p { font-size: .82rem; line-height: 1.7; }

@media (max-width: 900px) {
    .trang-bia { padding: 28px 22px; }
    .trang-bia h1 { font-size: 1.8rem; }
}
@media (max-width: 640px) {
    .trang-bia { padding: 24px 18px; }
    .trang-bia h1 { font-size: 1.5rem; }
}

/* ============ KHÁC ============ */

.trong { text-align: center; color: var(--chu-nhat); padding: 26px 12px; font-size: .84rem; }
.an { display: none !important; }
footer.chan {
    text-align: center; color: var(--chu-mo); font-size: .74rem;
    padding: 18px 0 24px;
}
.chan-nhan { letter-spacing: .04em; }

/* ============ MÀN HÌNH HẸP ============ */

.nut-menu {
    display: none; background: none; border: 1px solid var(--vien);
    border-radius: 7px; padding: 4px 11px; font-size: 1rem; color: var(--chu); cursor: pointer;
}
.lop-phu {
    display: none; position: fixed; inset: 0;
    background: rgba(27, 42, 53, .35); z-index: 1025;
}
.lop-phu.mo { display: block; }

@media (max-width: 1000px) { .bo-cuc-hoc { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 40px rgba(27, 42, 53, .18); }
    .sidebar.mo { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .nut-menu { display: inline-block; }
    .tb-nguoi { display: none; }
    .topbar { padding: 9px 14px; }
    .topbar-gon { display: flex; }
    .app-body { padding: 14px 14px 36px; }
    .thanh-ngang .trong-thanh { padding: 0 14px; }
}

/* ============ IN TỪ TRANG THƯỜNG ============ */

@media print {
    .sidebar, .topbar, .thanh-ngang, .lop-phu, .khong-in { display: none !important; }
    .app-main { margin-left: 0; }
    body { background: #fff; font-size: 11.5px; }
    .app-body { padding: 0; }
    .the { border-color: #999; break-inside: avoid; }
}