/* ==================================================================
   He thong hoc ngoai ngu - Design system
   Tong mau: giay/kem am + muc than (ink) + dat nung (terracotta accent)
   Kieu chu: Fraunces (serif, tieu de) + Public Sans (than bai)
   ================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --mau-nen: #FAF7F1;
    --mau-be: #F1EBDF;
    --mau-mat: #FFFFFF;
    --mau-vien: #E3DCCC;
    --mau-vien-dam: #CFC5AC;

    --mau-muc: #201A14;
    --mau-muc-nhat: #55503F;
    --mau-muc-mo: #8A8371;

    --mau-nhan: #B4592B;
    --mau-nhan-dam: #8C3F1B;
    --mau-nhan-nen: #F5E2D3;

    --mau-thanh-cong: #386641;
    --mau-thanh-cong-nen: #E1EDDD;
    --mau-loi: #A93226;
    --mau-loi-nen: #F6E1DD;
    --mau-pro: #92660B;
    --mau-pro-nen: #F7E9C2;
    --mau-dang-hoc: #2A5C7A;
    --mau-dang-hoc-nen: #DEEBF2;

    --bo-tron-sm: 4px;
    --bo-tron-md: 8px;
    --bo-tron-lg: 14px;

    --bong: 0 1px 2px rgba(32, 26, 20, 0.06), 0 1px 0 rgba(32, 26, 20, 0.05);
    --bong-noi: 0 12px 32px rgba(32, 26, 20, 0.14);

    --font-tieu-de: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-than: 'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-than);
    background: var(--mau-nen);
    margin: 0;
    color: var(--mau-muc);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-tieu-de); font-weight: 600; color: var(--mau-muc); margin: 0 0 4px; }
h1 { font-size: 26px; letter-spacing: -0.01em; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mau-muc-nhat); font-weight: 600; margin-top: 0; }
h3 { font-size: 18px; margin-bottom: 2px; }
p { margin: 0 0 12px; color: var(--mau-muc-nhat); }
a { color: var(--mau-nhan-dam); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- form controls ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--mau-muc-nhat); margin: 0 0 6px; }

input, select {
    width: 100%;
    padding: 11px 13px;
    margin: 0 0 16px;
    border: 1px solid var(--mau-vien-dam);
    border-radius: var(--bo-tron-sm);
    font-size: 14.5px;
    font-family: var(--font-than);
    background: var(--mau-mat);
    color: var(--mau-muc);
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--mau-muc-mo); }
input:focus, select:focus {
    outline: none;
    border-color: var(--mau-nhan);
    box-shadow: 0 0 0 3px var(--mau-nhan-nen);
}
input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--mau-nhan); }
input[type="file"] { padding: 9px; background: var(--mau-be); cursor: pointer; }

button {
    font-family: var(--font-than);
    background: var(--mau-muc);
    color: var(--mau-mat);
    border: 1px solid var(--mau-muc);
    padding: 11px 20px;
    border-radius: var(--bo-tron-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background .15s, transform .05s, opacity .15s;
    white-space: nowrap;
}
button:hover { background: #3a3226; border-color: #3a3226; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }

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

button.phu {
    background: transparent;
    color: var(--mau-muc);
    border: 1px solid var(--mau-vien-dam);
}
button.phu:hover { background: var(--mau-be); }

button.nguy-hiem {
    background: transparent;
    color: var(--mau-loi);
    border: 1px solid #E3B9B1;
}
button.nguy-hiem:hover { background: var(--mau-loi-nen); border-color: var(--mau-loi); }

button.nho { padding: 7px 13px; font-size: 13px; }

/* ---------- thong bao ---------- */
.thong-bao-loi, .thong-bao-thanh-cong {
    font-size: 13.5px;
    margin-bottom: 14px;
    padding: 10px 13px;
    border-radius: var(--bo-tron-sm);
    display: none;
}
.thong-bao-loi:not(:empty) { display: block; color: var(--mau-loi); background: var(--mau-loi-nen); }
.thong-bao-thanh-cong:not(:empty) { display: block; color: var(--mau-thanh-cong); background: var(--mau-thanh-cong-nen); }

/* ---------- the/nhan (badges) ---------- */
.nhan {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-left: 6px;
    border: 1px solid transparent;
}
.nhan-pro { background: var(--mau-pro-nen); color: var(--mau-pro); }
.nhan-hoan-thanh { background: var(--mau-thanh-cong-nen); color: var(--mau-thanh-cong); }
.nhan-dang-hoc { background: var(--mau-dang-hoc-nen); color: var(--mau-dang-hoc); }
.nhan-free { background: var(--mau-be); color: var(--mau-muc-nhat); border-color: var(--mau-vien-dam); }

/* ==================================================================
   AUTH SHELL (dang nhap / dang ky / doi mat khau)
   ================================================================== */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-brand {
    background: var(--mau-muc);
    color: #EFE7D8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px;
    background-image: radial-gradient(circle at 15% 20%, rgba(180, 89, 43, 0.35), transparent 45%);
}
.auth-brand .logo {
    font-family: var(--font-tieu-de);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.auth-brand .logo span { color: var(--mau-nhan); }
.auth-brand .tagline {
    font-family: var(--font-tieu-de);
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.15;
    font-weight: 600;
    max-width: 420px;
}
.auth-brand .chan {
    font-size: 12.5px;
    color: #B7AD97;
}
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card h1 { margin-bottom: 6px; }
.auth-card .phu-de { color: var(--mau-muc-mo); font-size: 13.5px; margin-bottom: 26px; }
.auth-card button { width: 100%; margin-top: 4px; padding: 12px; }
.auth-lien-ket { margin-top: 20px; font-size: 13.5px; color: var(--mau-muc-nhat); text-align: center; }

@media (max-width: 860px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-form-side { padding: 32px 20px; }
}

/* ==================================================================
   APP TOPBAR (giao dien hoc vien)
   ================================================================== */
.topbar {
    background: var(--mau-muc);
    color: #EFE7D8;
    padding: 0 28px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar .logo {
    font-family: var(--font-tieu-de);
    font-size: 18px;
    font-weight: 600;
    color: #F4EEE1;
}
.topbar .logo span { color: var(--mau-nhan); }
.topbar-phai { display: flex; align-items: center; gap: 14px; }
.topbar button.phu { color: #EFE7D8; border-color: #4A4436; }
.topbar button.phu:hover { background: #3a3226; }

.noi-dung-trang {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 24px 64px;
}

.the {
    background: var(--mau-mat);
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-tron-md);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--bong);
}

.banner-tiep-tuc {
    background: linear-gradient(135deg, #2A5C7A 0%, #1E4356 100%);
    color: #EAF3F8;
    border-radius: var(--bo-tron-md);
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.banner-tiep-tuc .nhan-nho { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.banner-tiep-tuc a.nut-trang {
    background: #fff;
    color: #1E4356;
    padding: 9px 16px;
    border-radius: var(--bo-tron-sm);
    font-weight: 700;
    font-size: 13.5px;
}
.banner-tiep-tuc a.nut-trang:hover { text-decoration: none; opacity: .9; }

.hang-form-key { display: flex; gap: 10px; align-items: flex-end; }
.hang-form-key input { margin-bottom: 0; }
.hang-form-key button { flex-shrink: 0; }

.khoi-chu-de { margin-bottom: 8px; }
.khoi-chu-de + .khoi-chu-de { margin-top: 28px; }
.khoi-chu-de h3 {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mau-vien);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.the-bai-hoc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-tron-sm);
    margin-bottom: 8px;
    background: var(--mau-mat);
    transition: border-color .15s;
}
.the-bai-hoc:hover { border-color: var(--mau-vien-dam); }
.the-bai-hoc.khoa { opacity: .6; }
.the-bai-hoc .ten-bai { font-weight: 600; font-size: 14.5px; }

.rong {
    text-align: center;
    padding: 40px 20px;
    color: var(--mau-muc-mo);
    font-size: 13.5px;
    border: 1px dashed var(--mau-vien-dam);
    border-radius: var(--bo-tron-md);
}

/* ==================================================================
   ADMIN SHELL (sidebar)
   ================================================================== */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }

.sidebar {
    background: var(--mau-muc);
    color: #DCD3BF;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar .logo {
    font-family: var(--font-tieu-de);
    color: #F4EEE1;
    font-size: 17px;
    font-weight: 600;
    padding: 0 10px 24px;
}
.sidebar .logo span { color: var(--mau-nhan); }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bo-tron-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: #C9C0AA;
    cursor: pointer;
}
.sidebar nav button:hover { background: #322B21; color: #F4EEE1; }
.sidebar nav button.dang-chon { background: var(--mau-nhan); color: #fff; }
.sidebar .chan-sidebar { border-top: 1px solid #3a3327; padding-top: 14px; margin-top: 14px; }
.sidebar .chan-sidebar button.phu { width: 100%; color: #DCD3BF; border-color: #4A4436; background: transparent; }
.sidebar .chan-sidebar button.phu:hover { background: #322B21; }

.admin-main { padding: 36px 40px 64px; max-width: 980px; }
.trang-con { display: none; }
.trang-con.dang-hien { display: block; }

.tieu-de-trang { margin-bottom: 28px; }
.tieu-de-trang p { margin: 0; }

.luoi-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.luoi-form .chiem-het { grid-column: 1 / -1; }

table { width: 100%; border-collapse: collapse; margin-top: 4px; }
th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mau-muc-mo);
    border-bottom: 1px solid var(--mau-vien-dam);
}
td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--mau-vien); font-size: 14px; }
tr:last-child td { border-bottom: none; }
td.thao-tac { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 900px) {
    .admin-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 14px 16px; }
    .sidebar .logo { padding: 0 16px 0 0; flex-shrink: 0; }
    .sidebar nav { flex-direction: row; flex: none; }
    .sidebar .chan-sidebar { border-top: none; margin: 0 0 0 auto; padding: 0; flex-shrink: 0; }
    .admin-main { padding: 24px 18px 48px; }
    .luoi-form { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    table, thead, tbody, th, td, tr { display: block; }
    thead { display: none; }
    tr { border: 1px solid var(--mau-vien); border-radius: var(--bo-tron-sm); margin-bottom: 10px; padding: 4px 0; }
    td { border-bottom: none; display: flex; justify-content: space-between; gap: 12px; }
    td::before { content: attr(data-nhan); font-weight: 700; color: var(--mau-muc-mo); font-size: 11.5px; text-transform: uppercase; }
    td.thao-tac { justify-content: flex-start; flex-wrap: wrap; }
}

/* ==================================================================
   MODAL + TOAST (thay the confirm()/prompt()/alert() mac dinh trinh duyet)
   ================================================================== */
.modal-lop-phu {
    position: fixed; inset: 0;
    background: rgba(32, 26, 20, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 100; padding: 20px;
}
.modal-hop {
    background: var(--mau-mat);
    border-radius: var(--bo-tron-lg);
    box-shadow: var(--bong-noi);
    padding: 26px;
    width: 100%; max-width: 360px;
}
.modal-hop h3 { margin-bottom: 10px; }
.modal-hop p { font-size: 14px; margin-bottom: 18px; }
.modal-hop .modal-nut-hang { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.modal-hop input { margin-bottom: 6px; }

.toast-vung {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 200;
}
.toast {
    background: var(--mau-muc);
    color: #F4EEE1;
    padding: 12px 18px;
    border-radius: var(--bo-tron-sm);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: var(--bong-noi);
    animation: toast-vao .2s ease-out;
}
.toast.loai-loi { background: var(--mau-loi); }
.toast.loai-thanh-cong { background: var(--mau-thanh-cong); }
@keyframes toast-vao { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ==================================================================
   MENU HUB (trang chinh hoc vien: chon Hoc theo chu de / Tu do / Chat)
   ================================================================== */
.duong-dan-quay-lai {
    font-size: 13px;
    font-weight: 600;
    color: var(--mau-muc-nhat);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.duong-dan-quay-lai:hover { color: var(--mau-nhan-dam); text-decoration: none; }

.chao-mung { margin-bottom: 32px; }
.chao-mung h1 { font-size: 28px; }

.luoi-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.the-menu {
    background: var(--mau-mat);
    border: 1px solid var(--mau-vien);
    border-radius: var(--bo-tron-lg);
    padding: 26px 22px;
    text-decoration: none;
    color: var(--mau-muc);
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color .15s, transform .15s, box-shadow .15s;
    box-shadow: var(--bong);
    position: relative;
    overflow: hidden;
}
.the-menu:hover { border-color: var(--mau-nhan); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(32,26,20,.10); text-decoration: none; }
.the-menu .icon-menu {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: var(--mau-nhan-nen);
    color: var(--mau-nhan-dam);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-tieu-de); font-size: 20px; font-weight: 700;
}
.the-menu h3 { font-size: 18px; }
.the-menu p { font-size: 13.5px; margin: 0; color: var(--mau-muc-mo); }
.the-menu .mui-ten { position: absolute; top: 22px; right: 22px; color: var(--mau-muc-mo); font-size: 18px; }
.the-menu .cham-online { position: absolute; top: 20px; right: 20px; }

@media (max-width: 760px) {
    .luoi-menu { grid-template-columns: 1fr; }
}

/* ==================================================================
   CHAT
   ================================================================== */
.chat-shell {
    display: grid;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 62px);
}
.chat-danh-sach {
    border-right: 1px solid var(--mau-vien);
    overflow-y: auto;
    background: var(--mau-mat);
}
.chat-hv {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    border-bottom: 1px solid var(--mau-vien);
    transition: background .1s;
}
.chat-hv:hover { background: var(--mau-be); }
.chat-hv.dang-chon { background: var(--mau-nhan-nen); }
.chat-hv .avt {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--mau-muc); color: #F4EEE1;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-tieu-de); font-weight: 600; font-size: 15px;
    flex-shrink: 0; position: relative;
}
.cham-online {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--mau-vien-dam);
    border: 2px solid var(--mau-mat);
    position: absolute; bottom: -1px; right: -1px;
}
.cham-online.online { background: #3E9A5C; }
.chat-hv .ten { font-weight: 600; font-size: 14px; flex: 1; }
.chat-hv .trang-thai-chu { font-size: 11.5px; color: var(--mau-muc-mo); }
.chat-hv .huy-hieu-chua-doc {
    background: var(--mau-nhan); color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 20px; min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

.chat-khung { display: flex; flex-direction: column; height: 100%; }
.chat-header {
    padding: 14px 22px;
    border-bottom: 1px solid var(--mau-vien);
    display: flex; align-items: center; gap: 12px;
    background: var(--mau-mat);
}
.chat-header .ten { font-family: var(--font-tieu-de); font-weight: 600; font-size: 16px; }
.chat-tin-nhan-vung { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.bong-tin-nhan {
    max-width: 62%;
    padding: 9px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    word-wrap: break-word;
}
.bong-tin-nhan.cua-toi { align-self: flex-end; background: var(--mau-muc); color: #F4EEE1; border-bottom-right-radius: 4px; }
.bong-tin-nhan.cua-ho { align-self: flex-start; background: var(--mau-be); color: var(--mau-muc); border-bottom-left-radius: 4px; }
.bong-tin-nhan audio { width: 220px; height: 36px; }
.bong-tin-nhan .gio { font-size: 10.5px; opacity: .6; margin-top: 3px; }

.chat-input-vung {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--mau-vien);
    background: var(--mau-mat);
}
.chat-input-vung input[type=text] { margin: 0; flex: 1; }
.nut-mic {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--mau-be); border: 1px solid var(--mau-vien-dam);
    color: var(--mau-muc); flex-shrink: 0; padding: 0; font-size: 16px;
}
.nut-mic.dang-ghi { background: var(--mau-loi); border-color: var(--mau-loi); color: #fff; animation: nhap-nhay 1s infinite; }
@keyframes nhap-nhay { 50% { opacity: .55; } }
.nut-gui { flex-shrink: 0; }

.chat-trong { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--mau-muc-mo); font-size: 14px; flex-direction: column; gap: 8px; }

@media (max-width: 760px) {
    .chat-shell { grid-template-columns: 1fr; height: calc(100vh - 62px); }
    .chat-danh-sach.co-doi-thoai-mo { display: none; }
    .chat-khung.chua-chon { display: none; }
    .nut-quay-lai-ds-chat { display: inline-flex !important; }
}
.nut-quay-lai-ds-chat { display: none; background: none; border: none; color: var(--mau-muc); padding: 4px; font-size: 18px; }

/* ---------- legacy container (giu tuong thich file cu, se loai bo dan) ---------- */
.khung { max-width: 960px; margin: 40px auto; background: var(--mau-mat); border-radius: var(--bo-tron-lg); padding: 32px; box-shadow: var(--bong); }
.khung-nho { max-width: 420px; }
.thanh-tren { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }