/*
 * Bộ khung giao diện khu học viên — VISEM-EDU
 * Viết tay, không qua bước biên dịch (dự án không dùng Node).
 *
 * HỆ MÀU THEO ĐÚNG NGỮ NGHĨA THƯƠNG HIỆU VISEM
 * (nguồn: 01_Document/01_MoTaVISEM — logo chữ V ghép từ hai thân tre:
 *  thân trái tre già = thế hệ F0, thân phải măng non = thế hệ F1 kế cận,
 *  đốt vàng ở giữa = VISEM, điểm chuyển giao — "không ai thành công một mình")
 *
 *   #0C2744  Navy      — màu chủ đạo: tiêu đề, thanh trên, chân trang
 *   #3D6B22  Tre Già   — hành động chính: nút, liên kết (F0, bản lĩnh dày dặn)
 *   #64A22A  Măng Mọc  — đang tiến lên: tiến độ đang học (F1, đang vươn cao)
 *   #B8960C  Vàng      — kết nối & hoàn thành: tiến độ đạt 100%, chứng chỉ, mốc
 *   #0A8C8C  Teal      — DÀNH RIÊNG cho tính năng AI (màu sub-brand VISEM-AI).
 *                        Chỉ dùng khi hiển thị thứ do AI sinh ra, để người học
 *                        nhìn màu là biết ngay đang xem phần của trợ giảng AI.
 *
 * Ngôn ngữ thiết kế học theo trang mẫu đã khảo sát: nền trắng/xám rất nhạt,
 * thẻ viền mảnh bo góc nhẹ, nhãn phụ chữ in hoa cỡ nhỏ, nhiều khoảng trắng,
 * vòng tròn tiến độ (không dùng thanh ngang).
 */

:root {
    /* --- Màu thương hiệu VISEM --- */
    --navy: #0c2744;
    --navy-nhat: #1a3a5a;
    --tre-gia: #3d6b22;
    --tre-gia-dam: #2d5019;
    --mang-moc: #64a22a;
    --vang: #b8960c;
    --vang-nhat: #f5eed4;
    --teal-ai: #0a8c8c;

    /* --- Vai trò trong giao diện --- */
    --mau-chinh: var(--tre-gia);
    --mau-chinh-dam: var(--tre-gia-dam);
    --mau-chinh-nhat: #eef3e7;
    --mau-tieu-de: var(--navy);

    --mau-chu: #1f2933;
    --mau-chu-phu: #667180;
    --mau-vien: #e3e7ea;
    --mau-nen: #ffffff;
    --mau-nen-phu: #f4f7f0;

    --mau-thanh-cong: var(--tre-gia);
    --mau-canh-bao: var(--vang);
    --mau-loi: #b3261e;

    --bo-goc: 6px;
    --bo-goc-lon: 10px;
    --rong-toi-da: 1200px;
    --chu: "Inter", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--chu);
    font-size: 16px;
    line-height: 1.6;
    color: var(--mau-chu);
    background: var(--mau-nen);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    line-height: 1.3;
    font-weight: 600;
    color: var(--mau-tieu-de);
}

h1 { font-size: 2rem; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a {
    color: var(--mau-chinh);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ---------- Bố cục chung ---------- */

.khung {
    width: 100%;
    max-width: var(--rong-toi-da);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.thanh-tren {
    border-bottom: 1px solid var(--mau-vien);
    background: var(--mau-nen);
}

.thanh-tren__trong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 72px;
}

/* Thương hiệu: ký hiệu tre + tên chữ */
.thuong-hieu {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.thuong-hieu:hover { text-decoration: none; }

.thuong-hieu__ky-hieu {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: none;
}

.thuong-hieu__ten {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.thuong-hieu__chinh {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.01em;
}

.thuong-hieu__phu {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tre-gia);
}

.dieu-huong {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.95rem;
}

.dieu-huong a { color: var(--navy); }

.dieu-huong a:hover { color: var(--tre-gia); }

.chan-trang {
    margin-top: 4rem;
    padding: 2.5rem 0;
    background: var(--navy);
    color: #c3cdd8;
    font-size: 0.9rem;
}

.chan-trang a { color: #fff; }

/* ---------- Nhãn phụ chữ in hoa ---------- */

.nhan-phu {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tre-gia);
}

/* ---------- Nút ---------- */

.nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--mau-chinh);
    border-radius: var(--bo-goc);
    background: transparent;
    color: var(--mau-chinh);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nut:hover {
    background: var(--mau-chinh-nhat);
    text-decoration: none;
}

.nut--chinh {
    background: var(--mau-chinh);
    color: #fff;
}

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

/* Nút cho mốc quan trọng: hoàn thành bài, nhận chứng chỉ */
.nut--moc {
    background: var(--vang);
    border-color: var(--vang);
    color: #fff;
}

.nut--moc:hover {
    background: #9d800a;
    border-color: #9d800a;
    color: #fff;
}

.nut--lon {
    padding: 0.8rem 1.6rem;
    font-size: 1.05rem;
}

/* ---------- Thẻ ---------- */

.the {
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc-lon);
    background: var(--mau-nen);
    overflow: hidden;
}

.luoi-the {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* ---------- Huy hiệu (nhãn in đè ảnh bìa khóa học) ---------- */

.huy-hieu {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}

.huy-hieu--moi { background: var(--mang-moc); }
.huy-hieu--mien-phi { background: var(--tre-gia); }
.huy-hieu--uy-tin { background: var(--vang); }

/* ---------- Vòng tròn tiến độ ---------- */

.vong-tien-do {
    --phan-tram: 0;
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(var(--mang-moc) calc(var(--phan-tram) * 1%), #e8ebe4 0);
    flex: none;
}

.vong-tien-do::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--mau-nen);
}

.vong-tien-do__so {
    position: relative;
    z-index: 1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--tre-gia-dam);
}

/* Hoàn thành 100% chuyển sang màu vàng — đốt vàng là mốc chuyển giao */
.vong-tien-do--xong {
    background: conic-gradient(var(--vang) 100%, #e8ebe4 0);
}

.vong-tien-do--xong .vong-tien-do__so { color: var(--vang); }

/* ---------- Dấu hiệu phần do AI sinh ra (dùng màu sub-brand VISEM-AI) ---------- */

.khoi-ai {
    border-left: 3px solid var(--teal-ai);
    background: #f0f8f8;
    padding: 0.85rem 1rem;
    border-radius: 0 var(--bo-goc) var(--bo-goc) 0;
}

.khoi-ai__nhan {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--teal-ai);
}

/* ---------- Trang giới thiệu tạm ---------- */

.mo-dau {
    padding: 4rem 0 3rem;
}

.mo-dau__dan {
    max-width: 46rem;
    font-size: 1.15rem;
    color: var(--mau-chu-phu);
}

.mo-dau__ghi-chu {
    display: inline-block;
    margin: 0.5rem 0 1.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--bo-goc);
    background: var(--vang-nhat);
    color: #7a6408;
    font-size: 0.9rem;
}

/* ---------- Tiện ích ---------- */

.chu-phu { color: var(--mau-chu-phu); }
.can-giua { text-align: center; }
.an { display: none; }

@media (max-width: 640px) {
    h1 { font-size: 1.6rem; }
    .thanh-tren__trong { min-height: 64px; }
    .thuong-hieu__ky-hieu { width: 34px; height: 34px; }
    .thuong-hieu__phu { display: none; }
    .dieu-huong { gap: 1rem; font-size: 0.9rem; }
    .mo-dau { padding: 2.5rem 0 2rem; }
}

/* =========================================================================
 * Trang xác thực: đăng nhập, quên / đặt / đổi mật khẩu
 * ====================================================================== */

.trang-xac-thuc {
    padding: 3rem 0 4rem;
}

/* Thẻ hẹp căn giữa: biểu mẫu ngắn dễ đọc hơn khi bề rộng bị bó lại */
.the--hep {
    max-width: 27rem;
    margin: 0 auto;
    padding: 2rem 1.75rem;
}

.xac-thuc__dau {
    margin-bottom: 1.5rem;
    text-align: center;
}

.xac-thuc__ky-hieu {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.6rem;
    object-fit: contain;
}

.xac-thuc__tieu-de {
    margin: 0.35rem 0 0;
    font-size: 1.5rem;
}

.xac-thuc__dan {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
}

.xac-thuc__chan {
    margin: 1.35rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--mau-vien);
    font-size: 0.88rem;
    text-align: center;
    color: var(--mau-chu-phu);
}

/* ---------- Biểu mẫu ---------- */

.o-nhom {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

.o-nhan {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--navy);
}

.o-nhap {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    background: var(--mau-nen);
    color: var(--mau-chu);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}

.o-nhap:focus {
    outline: none;
    border-color: var(--mau-chinh);
    box-shadow: 0 0 0 3px var(--mau-chinh-nhat);
}

.o-nhap:disabled {
    background: var(--mau-nen-phu);
    color: var(--mau-chu-phu);
}

.o-nhap--loi { border-color: var(--mau-loi); }

.o-nhap--loi:focus {
    border-color: var(--mau-loi);
    box-shadow: 0 0 0 3px #fbe3e1;
}

.o-loi {
    font-size: 0.82rem;
    color: var(--mau-loi);
}

.o-goi-y {
    font-size: 0.82rem;
    color: var(--mau-chu-phu);
}

/* Hàng ô đánh dấu: ghi nhớ đăng nhập... */
.o-danh-dau {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--mau-chu);
    cursor: pointer;
}

.o-danh-dau input { accent-color: var(--mau-chinh); }

/* Hàng phụ dưới các ô nhập: ghi nhớ bên trái, quên mật khẩu bên phải */
.hang-phu-bieu-mau {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.35rem;
    font-size: 0.9rem;
}

/* Nút chiếm hết bề rộng thẻ — hành động chính của biểu mẫu */
.nut--tran { width: 100%; }

/* ---------- Thông báo chớp nhoáng ---------- */

.thong-bao {
    margin-bottom: 1.25rem;
    padding: 0.7rem 0.95rem;
    border-left: 3px solid transparent;
    border-radius: 0 var(--bo-goc) var(--bo-goc) 0;
    font-size: 0.9rem;
}

.thong-bao--tot {
    border-left-color: var(--mau-thanh-cong);
    background: var(--mau-chinh-nhat);
    color: var(--tre-gia-dam);
}

.thong-bao--loi {
    border-left-color: var(--mau-loi);
    background: #fdecea;
    color: #8c1d18;
}

/* Nhắc việc còn phải làm — vàng, cùng ngữ nghĩa "mốc cần vượt qua" */
.thong-bao--nhac {
    border-left-color: var(--vang);
    background: var(--vang-nhat);
    color: #7a6408;
}

@media (max-width: 640px) {
    .trang-xac-thuc { padding: 2rem 0 3rem; }
    .the--hep { padding: 1.5rem 1.25rem; }
    .xac-thuc__tieu-de { font-size: 1.35rem; }
}

/* =========================================================================
 * Khu học viên — trang "Khóa học của tôi" (/hoc)
 * ====================================================================== */

/*
 * Thanh trên giờ mang thêm tên người dùng và nút đăng xuất nên dài hơn hẳn.
 * Ghi đè hai quy tắc ở đầu tệp (cùng độ ưu tiên, quy tắc sau thắng) thay vì sửa
 * chúng, để phần khuôn cũ giữ nguyên: cho phép xuống dòng là cách gọn nhất để
 * thanh trên không tràn ngang trên điện thoại.
 */
.thanh-tren__trong { flex-wrap: wrap; }
.dieu-huong { flex-wrap: wrap; row-gap: 0.35rem; }

.dieu-huong__nguoi {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    color: var(--mau-chu-phu);
}

/* Đăng xuất phải là biểu mẫu POST (chống CSRF), nhưng trông như liên kết */
.dieu-huong__ra { margin: 0; }

.dieu-huong__nut-ra {
    padding: 0;
    border: 0;
    background: none;
    color: var(--navy);
    font: inherit;
    cursor: pointer;
}

.dieu-huong__nut-ra:hover {
    color: var(--tre-gia);
    text-decoration: underline;
}

/* ---------- Dòng chào ---------- */

.chao-mung {
    padding: 2.75rem 0 2rem;
}

.chao-mung__ten {
    margin: 0;
    font-size: 2.25rem;
    /* Navy, KHÔNG dùng teal như trang mẫu: teal dành riêng cho phần do AI sinh ra */
    color: var(--mau-tieu-de);
}

/* ---------- Vùng danh sách khóa ---------- */

/*
 * Trang mẫu đổi màu nền cả bề rộng màn hình để tách khỏi dòng chào. Ở đây dùng
 * một khối nền nhạt bo góc thay vì kỹ thuật tràn lề bằng 100vw: 100vw tính cả
 * bề rộng thanh cuộn dọc nên sinh ra thanh cuộn ngang trên Windows.
 */
.vung-hoc {
    margin-bottom: 2.5rem;
    padding: 1.75rem;
    border-radius: var(--bo-goc-lon);
    background: var(--mau-nen-phu);
}

.hang-tieu-de-hoc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.vung-hoc__tieu-de { margin: 0; }

.hop-tim {
    display: flex;
    flex: 1 1 18rem;
    max-width: 24rem;
    gap: 0.5rem;
    margin: 0;
}

.hop-tim__nhap {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    background: var(--mau-nen);
    color: var(--mau-chu);
    font-family: inherit;
    font-size: 0.92rem;
}

.hop-tim__nhap:focus {
    outline: none;
    border-color: var(--mau-chinh);
    box-shadow: 0 0 0 3px var(--mau-chinh-nhat);
}

.hop-tim__nut {
    flex: none;
    padding: 0.55rem 1rem;
    border: 1px solid var(--mau-chinh);
    border-radius: var(--bo-goc);
    background: var(--mau-chinh);
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.hop-tim__nut:hover { background: var(--mau-chinh-dam); border-color: var(--mau-chinh-dam); }

/* ---------- Dải bộ lọc trạng thái ---------- */

.dai-loc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dai-loc__muc {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--mau-vien);
    border-radius: 999px;
    background: var(--mau-nen);
    color: var(--navy);
    font-size: 0.88rem;
}

.dai-loc__muc:hover {
    border-color: var(--mau-chinh);
    color: var(--mau-chinh);
    text-decoration: none;
}

.dai-loc__muc--chon {
    border-color: var(--mau-chinh);
    background: var(--mau-chinh);
    color: #fff;
    font-weight: 600;
}

.dai-loc__muc--chon:hover { color: #fff; }

.dai-loc__so {
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* ---------- Thẻ khóa học ---------- */

/* Thẻ là cột dọc để thân thẻ giãn ra, nhờ vậy hàng nút của mọi thẻ thẳng hàng */
.the-khoa {
    display: flex;
    flex-direction: column;
}

.the-khoa__bia {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy);
}

.the-khoa__anh {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Khóa chưa có ảnh bìa: chữ cái đầu tên khóa trên nền chuyển sắc thương hiệu */
.the-khoa__bia-chu {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--navy) 0%, var(--tre-gia) 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.the-khoa__nhan-bia {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
}

/*
 * Vòng tròn phần trăm nằm GIỮA mép dưới ảnh bìa, tâm đúng trên đường biên
 * ảnh/thân thẻ — đo từ ảnh chụp trang mẫu. Vòng cao 56px nên lệch xuống 28px là
 * chia đôi. Viền trắng bao ngoài để vòng đọc được cả khi ảnh bìa sáng.
 */
.the-khoa__vong {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 0 3px var(--mau-nen);
}

.the-khoa__than {
    flex: 1 1 auto;
    padding: 2.5rem 1.1rem 1.1rem;
    text-align: center;
}

.the-khoa__ten {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

.the-khoa__phu {
    margin: 0;
    font-size: 0.85rem;
    color: var(--mau-chu-phu);
}

.the-khoa__ly-do {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: var(--mau-loi);
}

/* Chân thẻ: đúng hai nút chia đôi bề rộng, có đường kẻ dọc ở giữa */
.the-khoa__chan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--mau-vien);
}

.the-khoa__nut {
    padding: 0.8rem 0.5rem;
    background: var(--mau-nen);
    color: var(--mau-chinh);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.the-khoa__nut + .the-khoa__nut { border-left: 1px solid var(--mau-vien); }

.the-khoa__nut:hover {
    background: var(--mau-chinh-nhat);
    text-decoration: none;
}

.the-khoa__nut--hanh-dong { font-weight: 700; }

/* Đã hoàn thành khóa: nút chuyển vàng cho khớp vòng tiến độ 100% */
.the-khoa__nut--moc { color: var(--vang); }

.the-khoa__nut--moc:hover { background: var(--vang-nhat); }

/* Ghi danh hết hạn / tạm ngưng: KHÔNG in thẻ <a>, nên không bấm vào học được */
.the-khoa__nut--tat {
    background: var(--mau-nen-phu);
    color: var(--mau-chu-phu);
    cursor: not-allowed;
}

.the-khoa__nut--tat:hover { background: var(--mau-nen-phu); }

/* Hai biến thể huy hiệu mới, dùng cho nhãn trạng thái ghi danh trên ảnh bìa */
.huy-hieu--het-han { background: var(--mau-loi); }
.huy-hieu--tam-ngung { background: var(--mau-chu-phu); }

/* ---------- Trạng thái rỗng ---------- */

.trong-rong {
    padding: 2.5rem 1.25rem;
    border: 1px dashed var(--mau-vien);
    border-radius: var(--bo-goc-lon);
    background: var(--mau-nen);
    text-align: center;
}

.trong-rong p { max-width: 34rem; margin: 0 auto 0.75rem; }

/* ---------- Phân trang ---------- */

.phan-trang {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
    font-size: 0.9rem;
}

.phan-trang__muc {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-goc);
    background: var(--mau-nen);
    color: var(--mau-chinh);
}

.phan-trang__muc:hover { border-color: var(--mau-chinh); text-decoration: none; }

.phan-trang__muc--tat {
    color: var(--mau-chu-phu);
    background: var(--mau-nen-phu);
}

.phan-trang__muc--tat:hover { border-color: var(--mau-vien); }

.phan-trang__so { color: var(--mau-chu-phu); }

@media (max-width: 640px) {
    .chao-mung { padding: 1.75rem 0 1.25rem; }
    .chao-mung__ten { font-size: 1.6rem; }
    /* Bó hẹp đệm và ép lưới về một cột: 280px của .luoi-the cộng đệm hai bên là
       vừa đúng tràn màn hình 320px. */
    .vung-hoc { padding: 1rem 0.85rem; }
    .vung-hoc .luoi-the { grid-template-columns: 1fr; }
    .dieu-huong__nguoi { max-width: 8rem; }
}