/* Giao diện "Học tập" — lớp phủ lên style.css của bản sao default.
   Đầu trang trắng một hàng (tên site · menu · tài khoản), nền nhạt, chân trang mảnh. Không ảnh nền, không quảng cáo.
   Màu trùng với token --tn-* của module tracnghiem (themes/default/css/tracnghiem.css) để hai phần liền một khối. */
:root {
    --ht-primary: #0b6e4f; --ht-primary-hover: #085a40; --ht-primary-dark: #06402e;
    --ht-primary-soft: #e3f2ea; --ht-tint: #f1f8f4; --ht-primary-line: #b6dcc8;
    --ht-accent: #12928a;
    --ht-ink: #1c2723; --ht-ink-2: #38463f; --ht-muted: #62706a;
    --ht-line: #dde7e1; --ht-bg: #f4f8f6; --ht-surface: #fff;
    --ht-r: 10px; --ht-r-lg: 14px;
    --ht-shadow: 0 1px 2px rgba(16,40,30,.06), 0 4px 14px rgba(16,40,30,.06);
    --ht-pop: 0 10px 30px rgba(16,40,30,.16);
    --ht-focus: 0 0 0 3px rgba(18,146,138,.35);
    --ht-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --ht-hd-h: 64px;
}

/* ===================================================================== Nền, chữ */
html, body { background: var(--ht-bg); }
/* Chân trang luôn ở đáy khi nội dung ngắn */
body { display: flex; flex-direction: column; min-height: 100vh; height: auto; }
body > .section-body { flex: 1 0 auto; }
body { color: var(--ht-ink); font-family: var(--ht-font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--ht-font); color: var(--ht-ink); }
a, a:link, a:visited { color: var(--ht-primary); }
a:hover, a:focus { color: var(--ht-primary-hover); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ht-focus); border-radius: 6px; }
::selection { background: var(--ht-primary-soft); }
.hd-skip { position: absolute; left: -9999px; top: 8px; z-index: 2000; padding: 8px 14px; border-radius: 8px; background: var(--ht-primary); color: #fff !important; }
.hd-skip:focus { left: 8px; }

/* Khung rộng giữa trang */
.wraper { width: 100%; max-width: 1200px; padding: 0 16px; box-sizing: border-box; }
.section-body { padding: 20px 0 32px; }
/* style.css vẽ #body thành tấm giấy trắng có viền + bóng → bỏ, nội dung nằm thẳng trên nền */
#body, .section-body > .wraper > section > #body.container { width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
#body > .row { margin-left: -8px; margin-right: -8px; }

/* ===================================================================== Đầu trang */
.hd { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--ht-line); box-shadow: 0 1px 0 rgba(16,40,30,.02); }
@supports (backdrop-filter: blur(6px)) { .hd { background: rgba(255,255,255,.86); backdrop-filter: saturate(160%) blur(10px); } }
.hd-inner { position: relative; display: flex; align-items: center; gap: 20px; min-height: var(--ht-hd-h); }
.hd-brand, .hd-brand:link, .hd-brand:visited { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 11px; min-width: 0; color: var(--ht-ink); text-decoration: none; }
.hd-brand:hover { color: var(--ht-ink); text-decoration: none; }
.hd-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, var(--ht-primary), var(--ht-accent)); color: #fff; font-size: 19px; box-shadow: 0 4px 12px rgba(11,110,79,.25); }
.hd-logo { display: block; max-height: 44px; width: auto; }
.hd-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.hd-name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-desc { margin-top: 2px; font-size: 12px; color: var(--ht-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu (khối menu bootstrap của lõi trong #menusite) */
.hd-nav { flex: 1 1 auto; min-width: 0; }
#menusite .navbar-default { min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#menusite .navbar-collapse { padding: 0; border: 0; box-shadow: none; }
#menusite .navbar-nav { float: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; }
#menusite .navbar-default .navbar-nav > li, #menusite .navbar-default .navbar-nav > li:first-child, #menusite .navbar-default .navbar-nav > li:last-child { float: none; margin: 0; }
#menusite .navbar-default .navbar-nav > li > a, #menusite .navbar-nav > li > a { padding: 8px 12px; border-radius: 8px; background: transparent; color: var(--ht-ink-2); font-size: 14px; font-weight: 600; line-height: 1.4; text-shadow: none; }
#menusite .navbar-default .navbar-nav > li > a:hover, #menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .open > a, #menusite .navbar-default .navbar-nav > .open > a:hover, #menusite .navbar-default .navbar-nav > .open > a:focus { background: var(--ht-tint) !important; color: var(--ht-primary-dark) !important; }
#menusite .navbar-default .navbar-nav > .active > a, #menusite .navbar-default .navbar-nav > .active > a:hover, #menusite .navbar-default .navbar-nav > .active > a:focus { background: var(--ht-primary-soft) !important; color: var(--ht-primary-dark) !important; }
#menusite .navbar-nav > li > a.home .fa { font-size: 16px; color: var(--ht-muted); }
#menusite .navbar-nav > li > a .caret { border-top-color: currentColor; margin-left: 4px; opacity: .6; }
#menusite .dropdown-menu { min-width: 220px; margin-top: 6px; padding: 6px; border: 1px solid var(--ht-line); border-radius: 12px; background: var(--ht-surface); box-shadow: var(--ht-pop); }
#menusite .dropdown-menu > li { border: 0; }
#menusite .dropdown-menu > li > a { padding: 8px 12px; border-radius: 8px; color: var(--ht-ink-2); white-space: normal; }
#menusite .dropdown-menu > li > a:hover, #menusite .dropdown-menu > li > a:focus, #menusite .dropdown-menu > .active > a { background: var(--ht-tint) !important; color: var(--ht-primary-dark) !important; }
#menusite .navbar-toggle { margin: 0; padding: 9px 9px; border: 1px solid var(--ht-line); border-radius: 9px; background: var(--ht-surface); }
#menusite .navbar-toggle .icon-bar { width: 18px; background: var(--ht-ink-2); }
#menusite .navbar-toggle:hover, #menusite .navbar-toggle:focus { background: var(--ht-tint); border-color: var(--ht-primary-line); }

/* Tài khoản (khối nút đăng nhập của module users) + ô bật ra #tip */
.hd-user { flex: 0 0 auto; margin-left: auto; color: var(--ht-ink-2); }
.header-nav a, .header-nav a:hover { color: var(--ht-ink-2); }
.personalArea { padding-left: 0; }
.header-nav a.button { width: 38px; height: 38px; padding: 0; border: 1px solid var(--ht-primary-line); border-radius: 50%; background-color: var(--ht-primary-soft); color: var(--ht-primary); }
.header-nav a.button.active, .header-nav a.button:hover, .header-nav a.button:focus { background-color: var(--ht-primary); border-color: var(--ht-primary); color: #fff; }
.personalArea a.button.user, .personalArea a.button.user:hover { width: 38px; height: 38px; border: 2px solid var(--ht-primary-line); background-color: var(--ht-primary-soft); background-size: cover; background-position: center; }
.personalArea a.button.user.active { border-color: var(--ht-primary); }
#tip { top: calc(100% + 12px); right: 0; width: 360px; max-width: calc(100vw - 24px); border: 1px solid var(--ht-line); border-radius: var(--ht-r-lg); background: var(--ht-surface); box-shadow: var(--ht-pop); overflow: hidden; }
#tip .bg { padding: 18px; border: 0; border-radius: 0; }
#tip .tip-footer { margin: 14px -18px -18px; padding: 10px 16px; border: 0; border-top: 1px solid var(--ht-line); border-radius: 0; background: var(--ht-tint); }
#tip .h3 { font-size: 15px; }
#tip a { color: var(--ht-primary); }

/* Breadcrumb: một dòng chữ nhỏ, không khối xám */
.third-nav { margin: 0 0 14px; }
.breadcrumbs-wrap .display { display: flex; align-items: center; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.breadcrumbs li { float: none; display: inline-flex; align-items: center; margin: 0; }
.breadcrumbs li + li::before { content: "\f105"; font-family: FontAwesome; margin: 0 8px; color: var(--ht-muted); font-size: 12px; }
.breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:visited { display: inline; height: auto; padding: 0; margin: 0; background: none !important; color: var(--ht-muted); font-size: 13px; line-height: 1.6; text-decoration: none; }
.breadcrumbs a:hover { color: var(--ht-primary); }
.breadcrumbs a::before, .breadcrumbs a::after { display: none !important; }
.breadcrumbs li:last-child a { color: var(--ht-ink-2); font-weight: 600; }
.subs-breadcrumbs { border-radius: var(--ht-r); box-shadow: var(--ht-pop); }

/* ===================================================================== Thành phần chung cho các module khác (users, page, contact…) */
.panel { border: 1px solid var(--ht-line); border-radius: var(--ht-r-lg); box-shadow: var(--ht-shadow); }
.panel > .panel-heading { border-top-left-radius: calc(var(--ht-r-lg) - 1px); border-top-right-radius: calc(var(--ht-r-lg) - 1px); }
.panel-default > .panel-heading { background: var(--ht-tint); border-color: var(--ht-line); color: var(--ht-ink); font-weight: 600; }
.panel-primary { border-color: var(--ht-line); }
.panel-primary > .panel-heading { background: var(--ht-tint); border-color: var(--ht-line); color: var(--ht-ink); font-weight: 600; box-shadow: inset 4px 0 0 var(--ht-primary); }
.well { border: 1px solid var(--ht-line); border-radius: var(--ht-r-lg); background: var(--ht-surface); box-shadow: var(--ht-shadow); }
.btn { border-radius: 8px; font-weight: 600; }
.btn-primary, a.btn-primary { background: var(--ht-primary); border-color: var(--ht-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--ht-primary-hover); border-color: var(--ht-primary-hover); color: #fff; }
.btn-info, a.btn-info { background: var(--ht-accent); border-color: var(--ht-accent); color: #fff; }
.btn-info:hover, .btn-info:focus { background: #0e7a73; border-color: #0e7a73; color: #fff; }
.form-control { border-color: #cfdcd5; border-radius: 8px; box-shadow: none; }
.form-control:focus { border-color: var(--ht-accent); box-shadow: var(--ht-focus); }
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-btn:last-child > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.pagination > li > a, .pagination > li > span { color: var(--ht-primary); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover { background: var(--ht-primary); border-color: var(--ht-primary); }
.nav-tabs > li.active > a { color: var(--ht-primary-dark); }
.alert { border-radius: var(--ht-r); }

/* Trang thành viên: cột trái (menu module) và khung đăng nhập (users dùng .bg-lavender = nền xám tím) */
.bg-lavender { background-color: var(--ht-surface) !important; }
.login-box .page.panel { margin-top: 24px !important; }
.login-box .page .panel-body { padding: 22px; }
.nv-info { border: 1px solid var(--ht-line); background: var(--ht-tint); color: var(--ht-ink-2); }
.input-group-addon { border-color: #cfdcd5; background: var(--ht-tint); color: var(--ht-muted); border-radius: 8px 0 0 8px; }
.input-group > .input-group-addon + .form-control { border-radius: 0 8px 8px 0; }
.column-margin-left { margin-left: 0 !important; }
.page.panel, .nv-fullbg { border-radius: var(--ht-r-lg); }
.users-avatar, .nv-info { border-radius: var(--ht-r); }

/* ===================================================================== Chân trang */
#footer.ft { min-height: 0; padding: 0; border: 0; border-top: 1px solid var(--ht-line); background: var(--ht-surface); color: var(--ht-muted); font-size: 13px; }
#footer.ft a { color: var(--ht-muted); }
.ft-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 60px; padding-top: 12px; padding-bottom: 12px; }
.ft-brand b { color: var(--ht-ink-2); }
.ft-copy { flex: 1 1 320px; }
#footer.ft .copyright { margin: 0; color: var(--ht-muted); }
#footer.ft .copyright span a { color: var(--ht-ink-2) !important; text-decoration: none; }
#footer.ft .copyright span a:hover { color: var(--ht-primary) !important; }
.ft-top { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--ht-line); border-radius: 50%; color: var(--ht-muted) !important; text-decoration: none; }
.ft-top:hover { border-color: var(--ht-primary-line); background: var(--ht-tint); color: var(--ht-primary) !important; }
#ftip { bottom: 70px; }

/* ===================================================================== Điện thoại / máy tính bảng hẹp */
@media (max-width: 767.98px) {
    :root { --ht-hd-h: 58px; }
    .wraper { padding: 0 12px; }
    .section-body { padding: 14px 0 24px; }
    .hd-inner { gap: 10px; }
    .hd-inner:has(.navbar-toggle) { padding-left: 60px; }
    .hd-mark { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
    .hd-name { font-size: 15px; }
    .hd-desc { display: none; }
    /* main.js coi #menusite position:absolute là chế độ menu điện thoại (menu con xổ dọc) */
    #menusite { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
    #menusite .navbar-header { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: auto; }
    #menusite .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; width: auto; max-height: calc(100vh - var(--ht-hd-h)); overflow-y: auto; padding: 8px 12px 12px; border-bottom: 1px solid var(--ht-line); background: var(--ht-surface); box-shadow: 0 12px 24px rgba(16,40,30,.12); pointer-events: auto; }
    #menusite .navbar-collapse.collapse:not(.in) { display: none !important; }
    #menusite .navbar-nav { flex-direction: column; gap: 2px; }
    #menusite .navbar-default .navbar-nav > li > a { padding: 11px 12px; background: transparent; color: var(--ht-ink-2); }
    #menusite .navbar-default .navbar-nav > li > a > .caret { right: 8px; top: 8px; }
    #menusite .navbar-nav .dropdown-mobile { border-top: 0 !important; }
    #menusite .dropdown-submenu a { line-height: 1.4; padding: 9px 12px 9px 28px !important; border: 0 !important; border-radius: 8px; background: transparent; }
    #menusite .dropdown-submenu li a { color: var(--ht-muted) !important; }
    .hd-user { position: relative; z-index: 1; }
    #tip { position: fixed; top: calc(var(--ht-hd-h) + 8px); right: 12px; left: 12px; width: auto; }
    .ft-inner { justify-content: center; text-align: center; }
    .ft-copy { flex-basis: 100%; }
    .ft-top { display: none; }
    /* Module tracnghiem tự thêm lề 8px cho mobile_default (không có lề); giao diện này đã có lề .wraper */
    #body .tn-wrap { padding-left: 0; padding-right: 0; }
    #body .tn-portal, #body .tn-flash { margin-left: 0; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }
}