/* =====================================================================
   WebDayHoc - CSS riêng, bổ sung cho Bootstrap 5.
   Bảng màu và các khối (thẻ số liệu, panel, sidebar, biểu đồ) lấy theo
   file mẫu dashboard-chuyen-bay.html.
   ===================================================================== */
:root {
    --dark-green: #2c4a41;
    --dark-green-2: #25403a;
    --gold: #e0a940;
    --gold-dark: #c9922c;
    --bg: #e7f0ec;
    --card: #ffffff;
    --text-dark: #1e2e29;
    --text-muted: #7c8e88;
    --teal-chip: #3c6259;
    --mint: #7fae9e;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: var(--bg);
    color: var(--text-dark);
}

a { color: var(--dark-green); }

/* ---------- Ghi đè màu Bootstrap ---------- */
.btn-primary {
    --bs-btn-bg: var(--dark-green);
    --bs-btn-border-color: var(--dark-green);
    --bs-btn-hover-bg: var(--dark-green-2);
    --bs-btn-hover-border-color: var(--dark-green-2);
    --bs-btn-active-bg: var(--dark-green-2);
    --bs-btn-active-border-color: var(--dark-green-2);
}
.btn-gold { background: var(--gold); color: #2c2109; font-weight: 600; border: none; }
.btn-gold:hover { background: var(--gold-dark); color: #2c2109; }
.form-control:focus, .form-select:focus {
    border-color: var(--mint);
    box-shadow: 0 0 0 .2rem rgba(127, 174, 158, .3);
}
.text-muted { color: var(--text-muted) !important; }

/* ---------- Khu vực công khai: thanh menu trên ---------- */
form#form1 { display: flex; flex-direction: column; min-height: 100vh; }
main.public { flex: 1 0 auto; }

.topbar { background: var(--dark-green); }
.topbar .navbar-brand { color: #fff; font-weight: 700; letter-spacing: .5px; }
.topbar .navbar-brand .dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--gold); margin-right: 8px;
}
.topbar .nav-link { color: #cdded8; }
.topbar .nav-link:hover, .topbar .nav-link.active { color: #fff; }
.topbar .dropdown-menu { border-radius: 14px; }
.topbar .role-badge { background: var(--gold); color: #2c2109; font-weight: 600; }

.hero {
    background: var(--dark-green); color: #e9f2ef;
    border-radius: 28px; padding: 48px; position: relative; overflow: hidden;
}
.hero .blob {
    position: absolute; top: -80px; right: -80px; width: 220px; height: 220px;
    border-radius: 50%; background: var(--gold); opacity: .9;
}
.hero h1 { color: #fff; position: relative; z-index: 2; }
.hero .lead { color: #cdded8; position: relative; z-index: 2; }
.hero .btn { position: relative; z-index: 2; }

footer.site-footer { color: var(--text-muted); font-size: 12.5px; }
.visit-counter {
    display: inline-block; background: var(--dark-green-2); color: #fff;
    font-size: 11px; padding: 6px 12px; border-radius: 20px;
}

/* ---------- Thẻ số liệu (3 màu) ---------- */
.tcard {
    border-radius: 18px; padding: 20px; height: 100%;
    display: flex; align-items: center; justify-content: space-between; min-height: 88px;
}
.tcard.gold { background: var(--gold); color: #2c2109; }
.tcard.white { background: var(--card); border: 1px solid #eef2f0; }
.tcard.white .label { color: var(--text-muted); }
.tcard.dark { background: var(--dark-green-2); color: #eaf3f0; }
.tcard .label { font-size: 12.5px; font-weight: 600; opacity: .85; margin-bottom: 6px; }
.tcard .value { font-size: 24px; font-weight: 700; line-height: 1; }
.tcard .ic { font-size: 30px; }

/* ---------- Panel trắng ---------- */
.panel {
    background: var(--card); border-radius: 18px; padding: 22px;
    border: 1px solid #eef2f0;
}
.panel h4 { font-size: 15px; margin-bottom: 2px; font-weight: 600; }
.panel .sub { font-size: 11.5px; color: var(--text-muted); margin-bottom: 16px; }

.panel table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.panel th {
    text-align: left; color: var(--text-muted); font-weight: 600;
    font-size: 11px; padding-bottom: 10px;
}
.panel td { padding: 10px 6px 10px 0; border-top: 1px solid #f1f3f2; vertical-align: middle; }
.panel .small-muted { font-size: 10.5px; color: var(--text-muted); }

.chip {
    background: var(--gold); color: #2c2109; font-weight: 700;
    min-width: 24px; height: 24px; padding: 0 9px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.chip.dark { background: var(--dark-green-2); color: #fff; }
.chip.mint { background: var(--mint); color: #fff; }
.chip.grey { background: #dfe8e5; color: var(--text-dark); }
.chip.green { background: var(--teal-chip); color: #fff; }
.chip.red { background: #b94a48; color: #fff; }

/* Nội dung rich text do admin / giảng viên soạn */
.rich-text img { max-width: 100%; height: auto; }
.rich-text p:last-child { margin-bottom: 0; }

/* Ô honeypot chống spam: ẩn khỏi mắt người, bot điền vào sẽ bị bỏ qua */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Thẻ danh sách khóa học / tin tuyển dụng */
.panel h4 a { color: var(--text-dark); text-decoration: none; }
.panel h4 a:hover { color: var(--dark-green); text-decoration: underline; }
.form-panel { max-width: 640px; margin: 0 auto; }

/* Khung đăng nhập / đổi mật khẩu */
.auth-card { max-width: 420px; margin: 2rem auto; }
.field-validation-error { display: block; font-size: .875rem; color: #dc3545; margin-top: .25rem; }

/* ---------- Biểu đồ cột (CSS thuần) ---------- */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; margin-top: 6px; }
.bar-col {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    gap: 8px; flex: 1; height: 100%;
}
.bar { width: 14px; border-radius: 6px 6px 0 0; min-height: 2px; }
.bar.d { background: var(--dark-green); }
.bar.g { background: var(--gold); }
.bar-col span { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }

/* ---------- Biểu đồ tròn (CSS thuần) ---------- */
.donut-wrap { display: flex; align-items: center; gap: 20px; }
.donut {
    width: 120px; height: 120px; border-radius: 50%; background: #dfe8e5;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.donut-inner {
    width: 70px; height: 70px; background: var(--card); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; text-align: center; font-weight: 600; color: var(--text-muted);
}
.legend div { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- Bố cục dashboard: sidebar trái + nội dung phải ---------- */
.dash-wrap { padding: 28px; }
.app {
    display: grid; grid-template-columns: 230px 1fr; gap: 22px;
    max-width: 1180px; margin: 0 auto; background: var(--card);
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 20px 50px rgba(30, 50, 45, .12);
    min-height: calc(100vh - 56px);
}
.sidebar {
    background: var(--dark-green); color: #e9f2ef;
    padding: 28px 20px; position: relative; overflow: hidden;
}
.sidebar .blob {
    position: absolute; top: -60px; left: -60px; width: 150px; height: 150px;
    border-radius: 50%; background: var(--gold); opacity: .9;
}
.profile {
    position: relative; z-index: 2; display: flex; flex-direction: column;
    align-items: center; text-align: center; margin-bottom: 30px;
}
.avatar {
    width: 64px; height: 64px; border-radius: 50%; background: #1a2b26;
    border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700; color: var(--gold); margin-bottom: 12px;
}
.profile h3 { font-size: 14px; letter-spacing: .5px; margin: 0; text-transform: uppercase; }
.profile span { font-size: 11px; color: #a9c1ba; margin-top: 2px; }

.sidebar nav { position: relative; z-index: 2; }
.snav-item {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border-radius: 12px; font-size: 13.5px; color: #cdded8; margin-bottom: 6px;
    text-decoration: none;
}
a.snav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.snav-item .ic { width: 18px; text-align: center; }
.snav-item.active { background: var(--gold); color: #2c2109; font-weight: 600; }
.snav-item.soon { opacity: .45; cursor: default; }
.snav-item.soon small { margin-left: auto; font-size: 9px; letter-spacing: .5px; }
.snav-sep { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 12px 0; }

.sidebar-bottom { margin-top: 28px; position: relative; z-index: 2; }
.sidebar-bottom p { font-size: 10.5px; letter-spacing: 1px; color: #9fb8b0; margin-bottom: 6px; }
.sidebar-bottom .big { font-size: 26px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 14px; }

.app main { padding: 30px 30px 30px 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; }
.page-head h1 { font-size: 22px; font-weight: 700; margin: 0; }
.page-head .sub { color: var(--text-muted); font-size: 12.5px; }

.top-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.top-cards.four { grid-template-columns: repeat(4, 1fr); }
.grid-mid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 18px; }
/* Phần tử trong lưới mặc định không co nhỏ hơn nội dung -> cho phép co để không tràn ngang */
.app main, .top-cards > *, .grid-mid > * { min-width: 0; }
/* Thẻ số liệu đặt trực tiếp trong main (không nằm trong .top-cards) thì không kéo cao theo main */
.app main > .tcard { height: auto; }
.bars { overflow: hidden; }

@media (max-width: 900px) {
    .dash-wrap { padding: 12px; }
    .app { grid-template-columns: 1fr; min-height: 0; }
    .app main { padding: 24px; }
    .top-cards, .top-cards.four, .grid-mid { grid-template-columns: 1fr; }
    .hero { padding: 28px; }
}

/* ---------- Lịch tuần (học viên / giảng viên) ---------- */
.week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.week-day { background: #f4f8f6; border-radius: 12px; padding: 8px; min-height: 120px; min-width: 0; }
.week-day.today { background: #fff6e3; border: 1px solid var(--gold); }
.week-day-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.week-day-head strong { font-size: 13px; color: var(--text-dark); }
.session-card { background: var(--card); border-left: 3px solid var(--dark-green); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 11.5px; }
.session-time { font-weight: 700; color: var(--dark-green); }
.session-class { font-weight: 600; }
.session-meta, .session-topic { color: var(--text-muted); font-size: 10.5px; }
.session-topic { margin-top: 2px; }
.session-empty { color: #b9c7c2; text-align: center; padding-top: 20px; }
@media (max-width: 900px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }

/* Danh sách bạn cùng lớp */
.mate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mate { display: flex; align-items: center; gap: 10px; background: #f4f8f6; border-radius: 12px; padding: 8px 10px; }
.mate .m-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--dark-green); color: var(--gold); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mate .m-name { font-weight: 600; font-size: 12.5px; }
.mate .m-user { font-size: 10.5px; color: var(--text-muted); }
.mate.teacher { background: #fff6e3; }

/* ---------- Nhắn tin ---------- */
.chat-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
.chat-wrap > * { min-width: 0; }
.chat-item {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
    text-decoration: none; color: var(--text-dark); margin-bottom: 4px;
}
.chat-item:hover { background: #f4f8f6; }
.chat-item.active { background: var(--dark-green); color: #fff; }
.chat-item.active .chat-sub { color: #cdded8; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e7f0ec; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-item.active .chat-avatar { background: rgba(255, 255, 255, .15); }
.chat-avatar.pf-zalo { background: #0068ff; color: #fff; font-weight: 700; }
.chat-avatar.pf-fb { background: #1877f2; color: #fff; font-weight: 700; }
.chat-item-main { flex: 1; min-width: 0; }
.chat-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-messages { height: 55vh; min-height: 320px; overflow-y: auto; background: #f4f8f6; border-radius: 12px; padding: 12px; }
.msg { display: flex; margin-bottom: 8px; }
.msg.mine { justify-content: flex-end; }
.msg-bubble { max-width: 75%; background: var(--card); border-radius: 12px; padding: 8px 10px; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.msg.mine .msg-bubble { background: var(--gold); color: #2c2109; }
.msg-sender { font-size: 11px; font-weight: 600; color: var(--dark-green); margin-bottom: 2px; }
.msg-body { white-space: pre-wrap; word-wrap: break-word; }
.msg-img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; margin-top: 4px; }
.msg-deleted { font-style: italic; color: var(--text-muted); font-size: 12px; }
.msg-time { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.msg.mine .msg-time { color: #6b5320; }
.chat-composer { display: flex; gap: 6px; margin-top: 10px; align-items: flex-end; }
.chat-composer textarea { flex: 1; resize: none; }
@media (max-width: 900px) { .chat-wrap { grid-template-columns: 1fr; } .chat-messages { height: 45vh; } }

/* ---------- Các khối nội dung trang chủ ----------
   Mỗi khối là một <section> độc lập, tự chừa khoảng cách dưới.
   Khối bị tắt thì không render thẻ nào nên không để lại chỗ trống. */
.home-block { margin-bottom: 3rem; }
.home-block:last-child { margin-bottom: 0; }
.home-h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }

/* Lưới tự dàn đều: 4 ô hay 2 ô đều kín hàng, không lệch cột */
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }

.feature, .step { display: flex; flex-direction: column; }
.feature-ic { font-size: 26px; line-height: 1; margin-bottom: 8px; }
.feature-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.feature-body { font-size: 12.5px; color: var(--text-muted); }
.step-no {
    width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #2c2109;
    font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}

/* Giới thiệu giảng viên: ảnh trái, chữ phải; hết chỗ thì ảnh lên trên */
.about { display: grid; grid-template-columns: 170px 1fr; gap: 22px; align-items: start; }
.about-photo img { width: 100%; border-radius: 16px; display: block; }
.about-initials {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--dark-green);
    color: var(--gold); font-size: 44px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.about-name { font-size: 18px; font-weight: 700; }
.about-role { font-size: 12.5px; color: var(--gold-dark); font-weight: 600; }
@media (max-width: 700px) {
    .about { grid-template-columns: 1fr; }
    .about-photo { max-width: 170px; }
}

/* Câu hỏi thường gặp */
details.faq { border-bottom: 1px solid #f1f3f2; padding: 10px 0; }
details.faq:last-child { border-bottom: 0; padding-bottom: 0; }
details.faq summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.faq summary:hover { color: var(--dark-green); }
.faq-answer { font-size: 13px; color: var(--text-muted); white-space: pre-line; margin-top: 6px; }

/* Trang quản trị nội dung trang chủ */
.about-photo-admin img { width: 100%; border-radius: 12px; display: block; }
.about-photo-admin .no-photo {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: #f4f8f6;
    color: var(--text-muted); font-size: 12px;
    display: flex; align-items: center; justify-content: center;
}
.faq-edit { border: 1px solid #eef2f0; border-radius: 12px; padding: 10px; margin-bottom: 10px; }

/* ---------- Trang hướng dẫn sử dụng ---------- */
.help-toc a { display: inline-block; margin: 0 10px 6px 0; font-size: 13px; }
.help h5 { font-size: 13.5px; font-weight: 700; color: var(--dark-green); margin: 14px 0 6px; }
.help ul, .help ol { padding-left: 20px; font-size: 13.5px; }
.help li { margin-bottom: 5px; }
.help p { font-size: 13.5px; }
.help table td, .help table th { font-size: 13px; padding: 8px 6px 8px 0; vertical-align: top; }
.help-flow { background: #f4f8f6; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; white-space: pre-wrap; }
.help code { background: #f4f8f6; padding: 1px 5px; border-radius: 4px; color: var(--dark-green-2); }

/* ---------- Khối code demo / bài giải / bài nộp ---------- */
.code-block { position: relative; margin-bottom: 12px; }
.code-block pre { margin: 0; border-radius: 10px; overflow-x: auto; max-height: 520px; }
.code-block pre code { font-size: 12.5px; line-height: 1.5; padding: 14px 16px !important; border-radius: 10px; }
.code-block .copy-btn { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 8px; opacity: .8; }
.code-block .copy-btn:hover { opacity: 1; }
.code-lang { display: inline-block; background: var(--dark-green-2); color: #fff; font-size: 10.5px; padding: 3px 8px; border-radius: 10px; margin-bottom: 6px; }
.code-input { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; }
.submit-status .chip { font-size: 12px; }
details.history summary { cursor: pointer; font-weight: 600; font-size: 12.5px; }
details.history { border-top: 1px solid #f1f3f2; padding: 8px 0; }