/**
 * ═══════════════════════════════════════════════════════════════════════════
 * THEME BTGTU — LỚP THIẾT KẾ TOÀN CỔNG THÔNG TIN
 * Ban Tuyên giáo Thành ủy Đồng Nai. Bản 29/08/2026.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Bảng màu "Đỏ - trắng, nền trống đồng Đông Sơn" (19/09/2026): đỏ cờ #B80F1E
 * chủ đạo, khung đầu trang đỏ, chân trang đỏ sẫm #6E0A12, nền trắng, chữ Be
 * Vietnam Pro, góc 10px. Ảnh nền themes/btgtu/images/trong-dong.jpg.
 * LƯU Ý TÊN BIẾN: thang --btgtu-blue-* giữ tên cũ để không phải sửa hàng trăm
 * chỗ dùng, nhưng GIÁ TRỊ nay là thang đỏ. Đọc "blue" là "màu chủ đạo".
 * Bản xanh Chuyển đổi số: design/_backup-20260919-ban-xanh-truoc-khi-doi-do/. Áp dụng cho TẤT CẢ
 * module: news, page, users, contact, voting, statistics, seek, comment,
 * banners, menu, quiz.
 *
 * TẠI SAO LÀ MỘT TỆP GHI ĐÈ, KHÔNG PHẢI VIẾT LẠI style.css
 * ─────────────────────────────────────────────────────────
 * NukeViet nạp css/custom.css SAU css/style.css và sau các css module, nên tệp
 * này thắng mọi quy tắc cùng độ đặc hiệu. style.css có hơn 2.000 dòng gắn với
 * hạ tầng Bootstrap 3 và lưới 24 cột của NukeViet; viết lại nó nghĩa là nhận
 * rủi ro hỏng toàn cổng để đổi lấy đúng một thứ ta cần: bảng màu và nhịp giao
 * diện. Tệp này làm được đúng thứ đó, và luôn có thể lùi lại bằng cách xóa nó.
 *
 * ĐÂY LÀ NGUỒN SỰ THẬT DUY NHẤT VỀ MÀU VÀ KÍCH THƯỚC.
 * quiz.css đọc lại các biến --btgtu-* ở mục 1; đổi màu ở đây là đổi cả cổng,
 * kể cả trang cuộc thi. Đừng viết mã màu trực tiếp ở bất kỳ tệp nào khác.
 *
 * MỤC LỤC
 *   1. Token
 *   2. Chữ và nền chung
 *   3. Chrome: dải trên, logo, menu chính, ô tìm kiếm trong menu
 *   4. Breadcrumb và vùng nội dung
 *   5. Nút
 *   6. Biểu mẫu
 *   7. Panel, well, box, tiêu đề khối
 *   8. Bảng, phân trang, tab, list-group, nhãn
 *   9. Thông báo: alert, nv-info, nv-alert, nv-infodie
 *  10. Module news
 *  11. Module users
 *  12. Module contact, voting, statistics, comment, seek
 *  13. Menu module, module-menu, banner khối
 *  14. Modal, tooltip, dropdown
 *  15. Chân trang
 *  16. Màn hình nhỏ
 *  17. In
 *  27. Phông chữ thống nhất (cuối tệp)
 */


/* ═══ 1. TOKEN ═══════════════════════════════════════════════════════════ */
:root {
    /* Xanh chủ đạo — thang 100…900 */
    --btgtu-blue-100: #fdeced;
    --btgtu-blue-200: #fad3d6;
    --btgtu-blue-300: #f6b8bd;  /* chữ phụ trên nền đỏ */
    --btgtu-blue-400: #ec7b85;
    --btgtu-blue-500: #dd3a47;
    --btgtu-blue: #b80f1e;      /* đỏ cờ, lấy theo dải cờ trong ảnh trống đồng */
    --btgtu-blue-700: #9c0c19;
    --btgtu-blue-800: #820a15;
    --btgtu-blue-900: #6e0a12;
    --btgtu-deep: #6e0a12;      /* nền chân trang */
    --btgtu-head: #b80f1e;      /* nền đầu trang + menu */

    /* Trung tính */
    --btgtu-ink: #1d1f27;
    --btgtu-ink-2: #3a3d4a;
    --btgtu-muted: #5f6270;
    --btgtu-muted-2: #858896;
    --btgtu-bg: #ffffff;
    --btgtu-soft: #f7f7f8;
    --btgtu-soft-2: #efeff1;
    --btgtu-line: rgba(29, 31, 39, 0.14);
    --btgtu-line-soft: rgba(29, 31, 39, 0.08);

    /* Trạng thái */
    --btgtu-ok: #15803d;
    --btgtu-ok-bg: #eafaf0;
    --btgtu-ok-line: #b7e4c7;
    --btgtu-bad: #b42318;
    --btgtu-bad-bg: #fdecea;
    --btgtu-bad-line: #f3b4ad;
    --btgtu-warn: #b45309;
    --btgtu-warn-bg: #fff7ea;
    --btgtu-warn-line: #f5d9a8;

    /* Hình khối */
    --btgtu-r-sm: 8px;
    --btgtu-r: 10px;
    --btgtu-r-lg: 16px;
    --btgtu-sh-sm: 0 1px 2px rgba(16, 35, 63, 0.08);
    --btgtu-sh: 0 1px 3px rgba(16, 35, 63, 0.10), 0 8px 20px rgba(16, 35, 63, 0.08);
    --btgtu-sh-lg: 0 1px 3px rgba(16, 35, 63, 0.10), 0 18px 44px rgba(16, 35, 63, 0.12);

    --btgtu-font: var(--font-base, 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif);
}

/* ═══ 2. CHỮ VÀ NỀN CHUNG ════════════════════════════════════════════════ */
body {
    background: var(--btgtu-soft-2);
    color: var(--btgtu-ink);
    font-family: var(--btgtu-font);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--btgtu-font);
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--btgtu-ink);
    line-height: 1.3;
}

h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 20px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 14px; }

/* style.css của theme khai báo `a, a:link, a:active, a:visited { color: #1a3f5e }`.
   Ba lớp giả đó đẩy độ ưu tiên lên (0,0,1,1), cao hơn `a` trơn (0,0,0,1), nên
   dù custom.css nạp sau thì MỌI liên kết trong site vẫn ra màu xanh cũ. Phải
   viết đúng bộ chọn đó mới đè được. */
a,
a:link,
a:active,
a:visited {
    color: var(--btgtu-blue-700);
    transition: color .15s;
}

a:hover,
a:focus {
    color: var(--btgtu-blue-800);
}

/* a.black là tiện ích “chữ đen” của theme (#333). */
a.black {
    color: var(--btgtu-ink);
}

a.black:hover {
    color: var(--btgtu-blue-700);
}

/* Ô tiêu điểm bàn phím — không để mặc định của trình duyệt.
   Bắt buộc cho cán bộ dùng Tab, và cho phần mềm đọc màn hình. */
:focus-visible {
    outline: 2px solid var(--btgtu-blue);
    outline-offset: 2px;
}

::selection {
    background: var(--btgtu-blue-200);
    color: var(--btgtu-ink);
}

hr,
.nv-hr {
    border-color: var(--btgtu-line);
    color: var(--btgtu-line);
}

blockquote {
    border-left: 3px solid var(--btgtu-blue);
    background: var(--btgtu-blue-100);
    border-radius: 0 var(--btgtu-r) var(--btgtu-r) 0;
    padding: 14px 18px;
    font-size: 15px;
}

code, kbd, pre, samp {
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

code {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
    border-radius: var(--btgtu-r-sm);
    padding: 2px 6px;
}

pre {
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
}

/* Nhóm lớp chữ ngữ cảnh của Bootstrap 3 dùng bảng màu riêng (#8a6d3b, #a94442…)
   — kéo về bảng màu của cổng để mọi module dùng chung một tông. */
.text-muted {
    color: var(--btgtu-muted);
}

.text-primary { color: var(--btgtu-blue-700); }
.text-info { color: var(--btgtu-blue-800); }
.text-success { color: var(--btgtu-ok); }
.text-warning { color: var(--btgtu-warn); }
.text-danger { color: var(--btgtu-bad); }

a.text-primary:hover { color: var(--btgtu-blue-800); }
a.text-info:hover { color: var(--btgtu-blue-900); }
a.text-success:hover { color: #11702f; }
a.text-warning:hover { color: #92400e; }
a.text-danger:hover { color: #8f1c12; }

.bg-primary { background: var(--btgtu-blue); color: #fff; }
.bg-info { background: var(--btgtu-blue-100); color: var(--btgtu-blue-900); }
.bg-success { background: var(--btgtu-ok-bg); color: var(--btgtu-ok); }
.bg-warning { background: var(--btgtu-warn-bg); color: var(--btgtu-warn); }
.bg-danger { background: var(--btgtu-bad-bg); color: var(--btgtu-bad); }

.bodytext,
.hometext {
    font-size: 16px;
    line-height: 1.8;
    color: var(--btgtu-ink-2);
}

.bodytext h2,
.bodytext h3 {
    margin-top: 26px;
}

.bodytext img {
    max-width: 100%;
    height: auto;
    border-radius: var(--btgtu-r);
}

.bodytext figure.image figcaption {
    color: var(--btgtu-muted);
    font-size: 13.5px;
    font-style: normal;
    padding-top: 8px;
}

.bg-gradient,
.bg-gainsboro,
.bg-lavender {
    background: var(--btgtu-soft) !important;
}

.radius,
.radius-top-left,
.radius-top-right,
.radius-bottom-left,
.radius-bottom-right {
    border-radius: var(--btgtu-r);
}

/* ═══ 3. CHROME: DẢI TRÊN, LOGO, MENU CHÍNH ══════════════════════════════ */
.section-header-bar {
    background: var(--btgtu-blue-900);
    color: var(--btgtu-blue-200);
    border: 0;
    font-size: 13px;
    position: relative;
    z-index: 99;
    border-radius: var(--btgtu-r-lg) var(--btgtu-r-lg) 0 0;
}

/* style.css đặt màu chữ trên chính .header-nav / .header-nav-inner, nên màu của
   .section-header-bar không với tới được các mục con — phải viết lại đúng hai
   bộ chọn đó. */
.header-nav,
.header-nav-inner {
    color: var(--btgtu-blue-200);
}

.section-header-bar a,
.header-nav a {
    color: var(--btgtu-blue-300);
}

.section-header-bar a:hover,
.header-nav a:hover {
    color: #fff;
    text-decoration: none;
}

.header-nav a.button {
    border: 1px solid var(--btgtu-blue-600, var(--btgtu-blue));
    border-radius: var(--btgtu-r-sm);
    background: transparent;
    color: #fff;
    padding: 5px 12px;
}

.header-nav a.button:hover,
.header-nav a.button:focus {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue);
    color: #fff;
}

.contactList li,
.company_info li {
    border-color: rgba(255, 255, 255, 0.14);
}

.socialList li a {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--btgtu-r-sm);
    color: #fff;
}

.socialList li a:hover {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue);
}

/* ── TỜ LIỀN MẠCH ────────────────────────────────────────────────────────
   Trang là MỘT tờ trắng chạy suốt từ dải liên hệ xuống tới thanh cuối trang,
   không phải một chồng hộp rời. Bốn khối chrome của theme (header, thanh menu,
   vùng nội dung, thanh cuối) là các phần tử anh em nên không bọc chung được
   bằng CSS — thay vào đó cho cả bốn cùng bề ngang, cùng nền trắng, dán sát
   nhau, chỉ bo góc ở đầu tờ và cuối tờ. Ranh giới giữa các phần là đường kẻ
   mảnh, không phải khe hở.
   Bề rộng bám theo .wraper của theme (100% dưới 992px, tối đa 1080px từ 992px
   lên) để màn hình nhỏ không bị tràn. */
header,
.section-nav,
.section-body,
.section-footer-bottom {
    width: 100%;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    background: var(--btgtu-bg);
    border-left: 1px solid var(--btgtu-line-soft);
    border-right: 1px solid var(--btgtu-line-soft);
}

header {
    margin-top: 20px;
    border-top: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg) var(--btgtu-r-lg) 0 0;
    position: relative;
    z-index: 100;
}

.section-footer-bottom {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--btgtu-line-soft);
    border-radius: 0 0 var(--btgtu-r-lg) var(--btgtu-r-lg);
}

/* .wraper bị ép 1080px cố định từ breakpoint 1200px; để nguyên thì nó tràn ra
   khỏi phần đệm của tờ. Trong tờ cho nó chạy hết bề ngang và tự chừa lề. */
header .wraper,
.section-nav .wraper,
.section-body .wraper,
.section-footer-bottom .wraper {
    width: 100%;
    max-width: none;
    padding: 0 22px;
}

.section-header {
    background: var(--btgtu-bg);
    border-bottom: 0;
    padding: 16px 0;
}

/* Dải ảnh nền phía trên (themes/btgtu/images/header.png, cao ~305px) KHÔNG có
   trong thiết kế: đầu trang đi thẳng từ dải liên hệ xuống khối logo. Ảnh bong
   bóng mặc định của NukeViet cũng không liên quan gì tới cơ quan.
   Muốn ảnh trở lại thì bỏ khối này. */
.site-banner {
    display: none;
}

/* Khối logo: ảnh bên trái, tên cơ quan và dòng mô tả xếp chồng bên phải.
   Theme in tên cơ quan trong <h1 class="sr-only"> — tức là chỉ trình đọc màn
   hình mới thấy. Thiết kế cần tên hiện ra, nên gỡ sr-only ở lớp trình bày
   thay vì sửa header_extended.tpl (giữ nguyên markup của theme). */
#header .logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "mark name"
        "mark desc";
    align-items: center;
    column-gap: 14px;
}

#header .logo > a {
    grid-area: mark;
}

#header .logo > a img {
    max-height: 60px;
    width: auto;
}

#header .logo .sr-only {
    grid-area: name;
    align-self: end;
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--btgtu-ink);
}

#header .logo .site_description {
    grid-area: desc;
    align-self: start;
    color: var(--btgtu-muted);
    font-size: 13.5px;
}

/* Nút Đăng nhập ở dải trên. Theme để nhãn trong <span class="hidden"> và chỉ
   hiện mỗi biểu tượng người dùng; thiết kế là nút viền có chữ. Chỉ nhắm đúng
   liên kết đăng nhập (data-callback="loginFormLoad") để không đụng vào menu
   tài khoản lúc đã đăng nhập. */
.header-nav .personalArea a[data-callback="loginFormLoad"] {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.header-nav .personalArea a[data-callback="loginFormLoad"] .hidden {
    display: inline !important;
}

.header-nav .personalArea a[data-callback="loginFormLoad"] em.fa {
    display: none;
}

/* Hộp bật lên của dải trên (thông tin liên hệ, khu vực thành viên) và bản dưới
   chân trang. Theme để nền #eee, chữ #333 kèm !important. */
#tip,
#ftip {
    background: var(--btgtu-bg);
    color: var(--btgtu-ink) !important;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh);
}

#tip .bg,
#ftip .bg {
    border-bottom-color: var(--btgtu-line);
}

#tip .tip-footer,
#ftip .tip-footer {
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
}

#tip a,
#ftip a {
    color: var(--btgtu-blue-700);
}

/* Menu chính */
/* Nút mở menu trên màn hình hẹp — bootstrap dựng sẵn của theme để #428bca. */
.navbar-toggle,
.navbar-default .navbar-toggle {
    background: var(--btgtu-blue-700);
    border-color: var(--btgtu-blue-700);
    border-radius: var(--btgtu-r-sm);
    color: #fff;
}

.navbar-toggle:hover,
.navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: var(--btgtu-blue-800);
    border-color: var(--btgtu-blue-800);
}

.navbar-toggle .icon-bar,
.navbar-default .navbar-toggle .icon-bar {
    background: #fff;
}

/* Nền của .section-nav do quy tắc gộp của tờ liền mạch ở đầu mục 3 lo (trắng).
   Trước đây để transparent nên trên màn hẹp — lúc dải menu xanh gập lại — chỗ
   này hở ra nền xanh nhạt của trang, cắt tờ làm đôi. */
.section-nav {
    background: var(--btgtu-bg);
}

/* Thanh menu là một DẢI chạy hết bề ngang tờ, không phải một thẻ nổi lên. Bỏ
   phần đệm của .wraper ở riêng khối này để dải chạm hai mép tờ; chữ trong menu
   vẫn thẳng hàng với nội dung nhờ phần đệm đặt lại trên chính dải. */
.section-nav .wraper {
    padding: 0;
}

.section-nav .bg,
.second-nav .bg {
    background: var(--btgtu-blue);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 12px;
}

#menusite .container {
    padding: 0;
}

#menusite .navbar-default {
    background: transparent;
    border: 0;
}

/* MỤC MENU LÀ MỘT CÁI NÚT
   Trước đây mỗi mục menu là một mảng chữ chạy suốt chiều cao dải, khi rê chuột
   thì cả mảng 50px đổi màu, góc vuông. Cả phần còn lại của cổng — nút bấm, ô
   tìm kiếm, thẻ nội dung — đều bo 8px và cao 40px, nên riêng thanh menu đọc ra
   một thứ khác hẳn. Nay mục menu mượn đúng hình dáng của .btn ở mục 5: cùng bo
   góc, cùng chiều cao, cùng cỡ chữ và độ đậm; chỉ khác ở chỗ nền để trong suốt
   cho đến khi rê chuột. Sửa cỡ chữ hay bo góc của .btn thì phải sửa cả ở đây. */
#menusite .navbar-default .navbar-nav > li > a,
#menusite .navbar-nav > li > a,
#navbar_menu > li > a,
.second-nav a {
    color: #fff;
    font-weight: 500;
    font-size: 14.5px;
    text-transform: none;
    /* 11 + 18 + 11 = 40px, đúng min-height của .btn; phần đệm ngang 16px ăn
       theo 18px của .btn, bớt đi một chút vì menu có nhiều mục liền nhau. */
    line-height: 18px;
    padding: 11px 16px;
    border-radius: var(--btgtu-r);
    transition: background .15s, color .15s;
}

/* Chừa đều trên dưới để dải 50px ôm lấy nút 40px, và một khe nhỏ giữa các nút
   để chúng đọc thành từng cái rời chứ không phải một dải liền. */
#menusite .navbar-default .navbar-nav > li,
#menusite .navbar-nav > li {
    margin: 5px 1px;
}

/* Rê chuột và menu con đang mở: như .btn-primary lúc :hover. */
#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .open > a,
#navbar_menu li:hover > a,
.second-nav a:hover {
    background: var(--btgtu-blue-700);
    color: #fff;
}

/* Mục của trang đang xem: đậm hơn một bậc — như .btn-primary lúc :active — để
   phân biệt được với mục chỉ đang bị rê chuột. */
#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .active > a:hover,
#menusite .navbar-default .navbar-nav > .active > a:focus,
.second-nav .active > a {
    background: var(--btgtu-blue-800);
    color: #fff;
    font-weight: 600;
}

/* Menu con */
/* style.css khóa menu con bằng !important (nền #dcdcdc, viền #aaa) nên phải
   dùng !important mới gỡ được — đây là chỗ duy nhất trong tệp buộc phải làm
   vậy vì bản gốc làm trước. */
#menusite .dropdown-menu,
#navbar_menu ul {
    background: var(--btgtu-bg) !important;
    border: 1px solid var(--btgtu-line) !important;
    border-radius: var(--btgtu-r) !important;
    box-shadow: var(--btgtu-sh);
    padding: 6px;
}

#menusite .dropdown-menu > li > a,
#navbar_menu ul a {
    color: var(--btgtu-ink);
    border-radius: var(--btgtu-r-sm);
    padding: 8px 12px;
    font-weight: 500;
}

#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus,
#menusite .dropdown-menu > .active > a,
#navbar_menu ul a:hover {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

#menu-trigger {
    background: var(--btgtu-blue-700);
    border-radius: var(--btgtu-r-sm);
    color: #fff;
}

/* Ô TÌM KIẾM NẰM TRONG DẢI MENU
   Trước đây ô tìm kiếm ở dải breadcrumb bên dưới, cạnh đồng hồ ngày giờ; nay
   đồng hồ bỏ hẳn và ô tìm kiếm dời vào chính dải menu xanh, neo về mép phải.
   Lớp .headerSearch trên thẻ bọc phải giữ nguyên: js/main.js bắt sự kiện bấm
   và phím Enter theo đúng bộ chọn ".headerSearch button" / ".headerSearch
   input", đổi tên lớp là ô tìm kiếm chết lặng. */
.menu-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* min-width: 0 để dải menu co lại được khi có nhiều mục — thiếu dòng này thì
   phần tử flex lấy chiều rộng nội dung làm mức tối thiểu và ô tìm kiếm bị đẩy
   tràn khỏi dải. */
.menu-bar-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-bar-search {
    flex: 0 0 auto;
    width: 240px;
    /* margin phải khai đủ bốn cạnh: style.css đặt .headerSearch { margin: .15em 0 }
       nên nếu chỉ ghi margin-left thì còn 2.25px trên/dưới, đủ để đẩy dải menu
       cao hơn hàng nút 4-5px. */
    margin: 0 0 0 auto;
    /* 5 + 40 + 5 = 50px, khớp đúng chiều cao của một mục menu, để ô tìm kiếm và
       các nút menu nằm trên cùng một đường. */
    padding: 5px 0;
}

.menu-bar-search .input-group {
    width: 100%;
}

/* ═══ 4. BREADCRUMB VÀ VÙNG NỘI DUNG ════════════════════════════════════ */
/* Nền vùng nội dung do quy tắc gộp của tờ liền mạch ở mục 3 lo (trắng). Trước
   đây khối này tô --btgtu-soft-2 để các thẻ nội dung nổi lên trên nền xanh
   nhạt — chính chỗ đó làm trang gãy thành từng mảng. */
.section-body {
    padding-top: 24px;
    padding-bottom: 28px;
}

/* Thanh breadcrumb là MỘT HÀNG trong tờ, ngăn với phần nội dung bên dưới bằng
   một đường kẻ — không phải một thẻ nổi riêng. Cả thẻ <nav> nay nằm gọn trong
   khối breadcrumbs của header_extended.tpl, nên trang chủ (không có breadcrumb)
   không còn để lại một hàng trống có kẻ chân. */
.third-nav {
    margin: 0 0 22px;
    border-bottom: 1px solid var(--btgtu-line-soft);
}

.third-nav .row {
    border-bottom: 0;
}

.third-nav .bg {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 0;
}

/* Breadcrumb: theme gốc vẽ từng mục thành một mũi tên xám #dcdcdc bằng hai
   khối giả :before/:after. Đó là chi tiết duy nhất trong vùng nội dung còn giữ
   bảng màu NukeViet cũ, nhìn lạc hẳn với các thẻ bo góc xung quanh. Dẹp hai
   khối giả, để lại chữ phẳng ngăn nhau bằng dấu ›. */
.breadcrumbs a,
.breadcrumbs .txt {
    color: var(--btgtu-muted);
    font-size: 13.5px;
}

.breadcrumbs li {
    margin: 0;
}

.breadcrumbs a,
.show-subs-breadcrumbs {
    background: transparent;
    border-radius: var(--btgtu-r-sm);
    padding: 6px 8px;
}

.breadcrumbs a:before,
.breadcrumbs a:after,
.breadcrumbs a:hover:before,
.breadcrumbs a:hover:after,
.show-subs-breadcrumbs:after,
.show-subs-breadcrumbs:hover:after {
    display: none;
}

.breadcrumbs li + li:before {
    content: '›';
    float: left;
    padding: 6px 2px;
    color: var(--btgtu-muted-2);
}

.breadcrumbs a:hover,
.show-subs-breadcrumbs:hover {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-700);
}

.breadcrumbs li:last-child a,
.breadcrumbs li:last-child .txt {
    color: var(--btgtu-ink);
    font-weight: 600;
}

.subs-breadcrumbs {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh);
}

/* Từng mục trong danh sách xổ xuống của breadcrumb — style.css để nền #eee. */
.subs-breadcrumbs li {
    background: transparent;
    border: 0;
}

.subs-breadcrumbs a {
    color: var(--btgtu-ink);
    border-radius: var(--btgtu-r-sm);
}

.subs-breadcrumbs a em,
.subs-breadcrumbs a .fa {
    color: var(--btgtu-muted-2);
}

.subs-breadcrumbs a:hover {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

/* Ô nhập nền trắng, viền và nút cùng tông xanh đậm hơn dải menu để tách khỏi
   nền mà vẫn thuộc về dải. Cao 40px và bo 8px — đúng khuôn .btn ở mục 5, cũng
   là khuôn của các mục menu bên trái. */
.headerSearch input,
.headerSearch .form-control {
    border: 1px solid var(--btgtu-blue-800);
    border-right: 0;
    border-radius: var(--btgtu-r) 0 0 var(--btgtu-r);
    box-shadow: none;
    height: 40px;
    padding: 9px 13px;
    font-size: 14px;
}

.headerSearch input:focus,
.headerSearch input:hover {
    border-color: var(--btgtu-blue-900);
    box-shadow: none;
}

.headerSearch .btn-info,
.headerSearch .btn {
    background: var(--btgtu-blue-800);
    border-color: var(--btgtu-blue-800);
    border-radius: 0 var(--btgtu-r) var(--btgtu-r) 0;
    color: #fff;
    height: 40px;
    min-height: 0;
    padding: 0 15px;
}

.headerSearch .btn-info:hover,
.headerSearch .btn:hover,
.headerSearch .btn-info:focus,
.headerSearch .btn:focus {
    background: var(--btgtu-blue-900);
    border-color: var(--btgtu-blue-900);
    color: #fff;
}

/* style.css tô nút tìm kiếm sang vàng #e6b902 khi bấm giữ — lạc hẳn bảng màu. */
.headerSearch .btn-info:active,
.headerSearch .btn-info.active {
    background: var(--btgtu-blue-900);
    border-color: var(--btgtu-blue-900);
    color: #fff;
}

#body {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-top: 0;
}

/* ═══ 5. NÚT ═════════════════════════════════════════════════════════════ */
.btn {
    border-radius: var(--btgtu-r);
    font-family: var(--btgtu-font);
    font-size: 14.5px;
    font-weight: 500;
    padding: 9px 18px;
    min-height: 40px;
    box-shadow: none;
    text-shadow: none;
    transition: background .15s, border-color .15s, color .15s;
}

.btn-lg {
    font-size: 16px;
    padding: 13px 26px;
    min-height: 48px;
    font-weight: 600;
}

.btn-sm,
.btn-xs {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 13px;
}

.btn-primary,
.btn-info {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue-700);
    color: #fff;
    font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--btgtu-blue-700);
    border-color: var(--btgtu-blue-800);
    color: #fff;
}

.btn-primary:active,
.btn-info:active {
    background: var(--btgtu-blue-800);
}

.btn-default {
    background: var(--btgtu-bg);
    border-color: var(--btgtu-line);
    color: var(--btgtu-ink);
}

.btn-default:hover,
.btn-default:focus {
    background: var(--btgtu-soft);
    border-color: var(--btgtu-blue-400);
    color: var(--btgtu-blue-800);
}

.btn-success {
    background: var(--btgtu-ok);
    border-color: #11702f;
    color: #fff;
}

.btn-success:hover,
.btn-success:focus {
    background: #11702f;
    color: #fff;
}

.btn-danger {
    background: var(--btgtu-bad);
    border-color: #8f1c12;
    color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
    background: #8f1c12;
    color: #fff;
}

.btn-warning {
    background: var(--btgtu-warn);
    border-color: #92400e;
    color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
    background: #92400e;
    color: #fff;
}

.btn-link {
    color: var(--btgtu-blue-700);
    min-height: 0;
}

.btn.disabled,
.btn[disabled] {
    opacity: .45;
    box-shadow: none;
}

/* ═══ 6. BIỂU MẪU ════════════════════════════════════════════════════════ */
/* Ô chọn và ô đánh dấu của module thăm dò ý kiến, tìm kiếm nâng cao, đăng ký
   thành viên… đều là input trần, trước giờ ăn màu mặc định xám của trình duyệt.
   accent-color kéo chúng về màu xanh của cổng mà không phải dựng lại nút giả. */
/* style.css dung -webkit-appearance:none roi tu ve o danh dau: khung vuong,
   dau tick la mot ky tu FontAwesome o :checked:before mau #333. accent-color
   khong con tac dung voi appearance:none, nen phai to thang len khung va dau
   tick moi keo duoc chung ve mau xanh cua cong. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--btgtu-blue);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border-color: var(--btgtu-blue);
}

input[type="checkbox"]:checked:before {
    color: var(--btgtu-blue);
}

input[type="radio"]:checked:before {
    background-color: var(--btgtu-blue);
}

.radio label,
.radio-inline,
.checkbox label,
.checkbox-inline {
    color: var(--btgtu-ink-2);
}

/* Khung nhóm ô chọn (trang đăng ký thành viên, biểu mẫu liên hệ). */
div.radio-box,
div.check-box {
    background: var(--btgtu-bg);
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: none;
}

.has-error div.radio-box,
.has-error div.check-box {
    border-color: var(--btgtu-bad-line);
}

.form-control {
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: none;
    color: var(--btgtu-ink);
    font-family: var(--btgtu-font);
    font-size: 15px;
    height: 42px;
    padding: 9px 13px;
    transition: border-color .15s, box-shadow .15s;
}

textarea.form-control {
    height: auto;
}

.form-control:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, 0.14);
}

.form-control::placeholder {
    color: var(--btgtu-muted-2);
}

.form-control[disabled],
.form-control[readonly] {
    background: var(--btgtu-soft);
    color: var(--btgtu-muted);
}

label,
.control-label,
.form-horizontal .control-label {
    color: var(--btgtu-ink);
    font-weight: 600;
    font-size: 14px;
}

.help-block {
    color: var(--btgtu-muted);
    font-size: 13px;
}

.input-group-addon {
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
    color: var(--btgtu-muted);
    border-radius: var(--btgtu-r);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--btgtu-blue);
}

.has-error .form-control {
    border-color: var(--btgtu-bad-line);
}

.has-error .form-control:focus {
    border-color: var(--btgtu-bad);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.has-error .control-label,
.has-error .help-block,
.txtrequired {
    color: var(--btgtu-bad);
}

.has-success .form-control {
    border-color: var(--btgtu-ok-line);
}

.select2-container--bootstrap .select2-selection--single {
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
    height: 42px;
}

/* ═══ 7. PANEL, WELL, BOX, TIÊU ĐỀ KHỐI ══════════════════════════════════ */
/* Panel là ĐƠN VỊ CHIA PHẦN của tờ, không phải một thẻ nổi lên trên nền.
   Trước đây mỗi panel có viền, bo góc, bóng đổ và khe hở 18px — chính chỗ này
   làm trang gãy thành từng mảng rời. Nay panel chỉ còn phần đệm dọc và một
   đường kẻ ngăn với phần kế tiếp; chữ thẳng hàng với lề của tờ.
   (Hộp "Gửi phản hồi" nổi ở góc màn hình vẫn giữ dáng thẻ — xem mục 12.) */
.panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--btgtu-line-soft);
}

.panel:last-child {
    border-bottom: 0;
}

/* Phần đệm ngang do tờ lo rồi, panel không đệm thêm nữa. */
.panel > .panel-heading,
.panel > .panel-body,
.panel > .panel-footer {
    padding-left: 0;
    padding-right: 0;
}

/* Bootstrap khai báo .panel-default > .panel-heading (hai lớp) nên nó thắng
   .panel-heading (một lớp) dù custom.css nạp sau — nền xám #f5f5f5 và viền
   #ddd của Bootstrap 3 vẫn lọt ra ở news, contact, page. Phải liệt kê đủ các
   biến thể cho ngang bậc ưu tiên. */
.panel-heading,
.panel-default > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--btgtu-ink);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
    padding: 20px 0 10px;
    text-shadow: none;
}

/* Gạch xanh ngắn trước tiêu đề khối — dấu hiệu nhận dạng của cổng, dùng lại ở
   trang cuộc thi (quiz.css .quiz-section-title). */
.panel-heading::before {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    margin-bottom: 9px;
    border-radius: 2px;
    background: var(--btgtu-blue);
}

.panel-title {
    font-size: 17px;
    font-weight: 600;
    color: inherit;
}

.panel-title > a {
    color: inherit;
}

.panel-body {
    padding: 18px;
}

.panel-footer {
    background: transparent;
    border-top-color: var(--btgtu-line-soft);
    border-radius: 0;
}

.panel-default,
.panel-primary,
.panel-info,
.panel-success,
.panel-warning,
.panel-danger {
    border-color: var(--btgtu-line-soft);
}

/* Panel primary/info là phần được nhấn: chỉ đổi màu chữ tiêu đề, không dựng
   lại thành hộp riêng. Bootstrap đặt cả bốn cạnh #337ab7 nên phải gỡ hết. */
.panel-primary > .panel-heading,
.panel-info > .panel-heading {
    background: transparent;
    border-color: transparent;
    color: var(--btgtu-blue-800);
}

.panel-primary > .panel-heading > a,
.panel-primary > .panel-heading > a:hover {
    color: var(--btgtu-blue-900);
}

/* .well / .box-shadow là hộp phụ bên trong một phần — giữ khung nhưng nhạt và
   phẳng, để nó đọc là "ô ghi chú trong bài" chứ không phải một tầng mới. */
.well,
.box-shadow,
.content-box {
    background: var(--btgtu-soft);
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r);
    box-shadow: none;
}

.img-thumbnail,
.thumbnail {
    background: var(--btgtu-bg);
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
    padding: 3px;
}

/* ═══ 8. BẢNG, PHÂN TRANG, TAB, LIST-GROUP, NHÃN ═════════════════════════ */
.table {
    background: var(--btgtu-bg);
    font-size: 14.5px;
}

.table > thead > tr > th {
    background: var(--btgtu-soft);
    border-bottom: 1px solid var(--btgtu-line);
    color: var(--btgtu-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top-color: var(--btgtu-line-soft);
    padding: 11px 12px;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover,
.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--btgtu-blue-100);
}

/* Phải liệt kê đủ sáu tổ hợp như Bootstrap, không thì ô nào rơi vào tổ hợp
   thiếu (ví dụ <td> nằm trong <thead> ở bảng quảng cáo) vẫn giữ viền #ddd. */
.table-responsive {
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
    border-color: var(--btgtu-line);
}

.pagination > li > a,
.pagination > li > span {
    border-color: var(--btgtu-line);
    color: var(--btgtu-ink);
    font-weight: 500;
    margin: 0 3px;
    border-radius: var(--btgtu-r-sm);
    min-width: 38px;
    text-align: center;
}

.pagination > li > a:hover {
    background: var(--btgtu-blue-100);
    border-color: var(--btgtu-blue-300);
    color: var(--btgtu-blue-800);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue-700);
    color: #fff;
}

.nav-tabs {
    border-bottom-color: var(--btgtu-line);
}

.nav-tabs > li > a {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--btgtu-muted);
    font-weight: 600;
    margin: 0 4px -1px 0;
}

.nav-tabs > li > a:hover {
    background: transparent;
    border-bottom-color: var(--btgtu-blue-300);
    color: var(--btgtu-blue-800);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--btgtu-blue);
    color: var(--btgtu-blue-800);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover {
    background: var(--btgtu-blue);
    border-radius: var(--btgtu-r-sm);
}

.list-group-item {
    border-color: var(--btgtu-line-soft);
    color: var(--btgtu-ink);
}

.list-group-item:first-child {
    border-radius: var(--btgtu-r) var(--btgtu-r) 0 0;
}

.list-group-item:last-child {
    border-radius: 0 0 var(--btgtu-r) var(--btgtu-r);
}

.list-group-item:hover {
    background: var(--btgtu-blue-100);
}

.list-group-item.active {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue-700);
}

.badge {
    background: var(--btgtu-blue);
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 9px;
}

.label {
    border-radius: var(--btgtu-r-sm);
    font-weight: 600;
    font-size: 12px;
    padding: 4px 8px;
}

.label-primary,
.label-info {
    background: var(--btgtu-blue);
}

.label-success { background: var(--btgtu-ok); }
.label-danger { background: var(--btgtu-bad); }
.label-warning { background: var(--btgtu-warn); }

.label-default {
    background: var(--btgtu-soft);
    color: var(--btgtu-muted);
    border: 1px solid var(--btgtu-line);
}

.progress {
    background: #e4eaf3;
    border-radius: 999px;
    box-shadow: none;
    height: 8px;
}

.progress-bar {
    background: var(--btgtu-blue);
    box-shadow: none;
}

/* ═══ 9. THÔNG BÁO ═══════════════════════════════════════════════════════ */
.alert,
.nv-alert {
    border-radius: var(--btgtu-r);
    border-width: 1px;
    font-size: 14.5px;
    padding: 13px 16px;
    box-shadow: none;
}

.alert-info,
.nv-alert.info {
    background: var(--btgtu-blue-100);
    border-color: var(--btgtu-blue-300);
    color: var(--btgtu-blue-900);
}

.alert-success,
.nv-alert.success {
    background: var(--btgtu-ok-bg);
    border-color: var(--btgtu-ok-line);
    color: #14532d;
}

.alert-warning,
.nv-alert.warning {
    background: var(--btgtu-warn-bg);
    border-color: var(--btgtu-warn-line);
    color: #7c3d0a;
}

.alert-danger,
.nv-alert.error,
.nv-alert.danger {
    background: var(--btgtu-bad-bg);
    border-color: var(--btgtu-bad-line);
    color: var(--btgtu-bad);
}

.alert a,
.nv-alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.nv-info {
    border-radius: var(--btgtu-r);
    border: 1px solid var(--btgtu-line);
    background: var(--btgtu-soft);
    color: var(--btgtu-ink);
}

.nv-info.error {
    background: var(--btgtu-bad-bg);
    border-color: var(--btgtu-bad-line);
    color: var(--btgtu-bad);
}

.nv-info.success {
    background: var(--btgtu-ok-bg);
    border-color: var(--btgtu-ok-line);
    color: #14532d;
}

.nv-info.info {
    background: var(--btgtu-blue-100);
    border-color: var(--btgtu-blue-300);
    color: var(--btgtu-blue-900);
}

/* Trang lỗi / bảo trì */
.nv-infodie {
    background: var(--btgtu-soft-2);
}

.nv-infodie .panel {
    border-radius: var(--btgtu-r-lg);
    box-shadow: var(--btgtu-sh-lg);
}

.nv-infodie .panel-heading {
    background: var(--btgtu-blue-800);
    color: #fff;
    border: 0;
}

.nv-infodie .panel-heading::before {
    background: var(--btgtu-blue-300);
}

.cookie-notice {
    background: var(--btgtu-blue-900);
    color: var(--btgtu-blue-200);
    border: 0;
}

.cookie-notice a {
    color: var(--btgtu-blue-300);
}

.cookie-notice button {
    background: var(--btgtu-blue);
    border: 0;
    border-radius: var(--btgtu-r-sm);
    color: #fff;
    font-weight: 600;
}

/* ═══ 10. MODULE NEWS ════════════════════════════════════════════════════ */
/* news.css của module đặt `div.news_column ul.related a { color: #3b3b3b }`
   với độ ưu tiên (0,0,2,3) — cao hơn quy tắc `a` chung, nên danh sách tin liên
   quan vẫn ra chữ xám cũ. Viết lại đúng bộ chọn đó. */
div.news_column ul.related a {
    color: var(--btgtu-ink);
}

div.news_column ul.related a:hover {
    color: var(--btgtu-blue-700);
}

/* Tin nổi bật */
#topnews {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh-sm);
    padding: 4px 0;
}

#topnews ul.lastest-news a {
    color: var(--btgtu-ink);
    font-weight: 500;
}

#topnews ul.lastest-news a:hover {
    color: var(--btgtu-blue-700);
}

/* Danh sách tin: tiêu đề, mô tả, thời gian */
.panel-body .item h3,
.panel-body .item .h3,
h3.title,
.title > a {
    font-weight: 600;
    letter-spacing: -0.012em;
}

h3.title a,
.item h3 a {
    color: var(--btgtu-ink);
}

h3.title a:hover,
.item h3 a:hover {
    color: var(--btgtu-blue-700);
}

.time,
.publtime,
small.time {
    color: var(--btgtu-muted);
    font-size: 13px;
}

/* Trang chi tiết tin */
#hometext h2,
.featured h2 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--btgtu-ink-2);
    border-left: 3px solid var(--btgtu-blue);
    background: var(--btgtu-blue-100);
    border-radius: 0 var(--btgtu-r) var(--btgtu-r) 0;
    padding: 14px 18px;
}

.news-download-file .list-group-item {
    border-color: var(--btgtu-line-soft);
}

.news-download-file .list-group-item .badge {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

.news-download-file .list-group-item .badge a {
    color: var(--btgtu-blue-800);
}

.news-detail-player > .source,
.news-detail-player > .tools {
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
    color: var(--btgtu-muted);
}

/* Công tắc bật/tắt của module news */
.news-switch .news-switch-btn.checked .news-switch-slider {
    background: var(--btgtu-blue);
}

.news-switch .news-switch-btn .news-switch-slider {
    background: #cbd5e1;
}

.other-news .panel-body > div.clearfix {
    border-bottom-color: var(--btgtu-line-soft);
}

#hot-news .hot-news-others ul li {
    border-bottom-color: var(--btgtu-line-soft);
}

#hot-news li a span {
    color: var(--btgtu-muted);
}

/* Chia sẻ mạng xã hội */
.nv-social-share li a,
.social-share-buttons button {
    border-radius: var(--btgtu-r-sm);
    font-weight: 500;
}

/* ═══ 11. MODULE USERS ═══════════════════════════════════════════════════ */
/* ─── 11a. TRANG ĐĂNG KÝ THÀNH VIÊN ───────────────────────────────────────
   Trước đây mỗi ô trên biểu mẫu này được dựng một kiểu: ba trường tùy biến
   (Đơn vị công tác, Xã/Phường, Khu phố) có nhãn ở trên, còn Số điện thoại, Họ
   tên, Ngày sinh, Mật khẩu chỉ có chữ mờ trong ô; dấu sao bắt buộc là ảnh nền
   dán vào chính ô nhập nên nó nằm lơ lửng giữa ô, và ở ô chọn thì đè lên mũi
   tên xổ xuống. Nay mọi ô dùng chung một khuôn: nhãn ở trên, dấu sao trong
   nhãn, ô nhập bên dưới. */
.reg-page {
    width: 100%;
    max-width: 560px;
}

.reg-page .panel-body {
    padding: 28px 30px 24px;
}

.reg-title {
    margin: 0 0 4px;
    text-align: center;
    font-size: 26px;
}

/* Nhãn dùng chung cho mọi ô. */
.user-reg-form .reg-label {
    display: block;
    margin-bottom: 6px;
    color: var(--btgtu-ink);
    font-weight: 600;
    font-size: 14px;
}

/* Dấu sao bắt buộc: một ký tự trong nhãn, không phải ảnh nền trong ô. */
.user-reg-form .reg-label.required::after {
    content: ' *';
    color: var(--btgtu-bad);
    font-weight: 600;
}

/* style.css dán ảnh required.png vào nền ô nhập và ô chọn. Trong biểu mẫu này
   dấu sao đã nằm ở nhãn nên phải gỡ ảnh đó, nếu không mỗi ô có hai dấu sao và
   ở ô chọn thì ảnh chồng lên mũi tên. Cả padding-right 20px của label.required
   cũng bỏ vì không còn ảnh để chừa chỗ. */
.user-reg-form input.required,
.user-reg-form select.required,
.user-reg-form textarea.required,
.user-reg-form label.required {
    background-image: none;
}

.user-reg-form label.required {
    padding-right: 0;
}

.user-reg-form .form-group {
    margin-bottom: 16px;
}

/* Ô ngày sinh là readonly để buộc chọn qua lịch, nhưng nó vẫn bấm được nên
   không được xám như ô bị khóa thật. */
.user-reg-form .datepicker[readonly] {
    background: var(--btgtu-bg);
    color: var(--btgtu-ink);
    cursor: pointer;
}

.user-reg-form select.form-control {
    padding-right: 34px;
}

/* Khung nhóm ô chọn/ô đánh dấu (giới tính, trường tùy biến kiểu radio). */
.user-reg-form .choice-box {
    padding: 10px 12px;
}

.user-reg-form .choice-box .radio-box,
.user-reg-form .choice-box .check-box {
    font-weight: 400;
    margin-bottom: 2px;
}

/* Hàng đồng ý điều khoản. Bản gốc căn giữa và nhét nút "Quy định đăng ký" vào
   giữa câu, đọc như một mẩu vụn giữa các ô lớn. Nay là một hàng trái, ô đánh
   dấu và câu chữ thẳng hàng, liên kết điều khoản là chữ có gạch chân. */
.user-reg-form .reg-agree {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    background: var(--btgtu-soft);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    padding: 12px 14px;
    text-align: left;
}

.user-reg-form .reg-agree .fix-box {
    margin: 0;
    position: relative;
    top: 2px;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.user-reg-form .reg-agree-label {
    margin: 0;
    font-weight: 400;
    color: var(--btgtu-ink-2);
    cursor: pointer;
}

.user-reg-form .reg-terms-link {
    color: var(--btgtu-blue-700);
    font-weight: 600;
    text-decoration: underline;
}

/* Hàng mã bảo mật: ảnh — nút vẽ lại — ô nhập, cùng một chiều cao. Bản gốc để
   ô nhập rộng cố định 100px nên chữ gợi ý "Mã bảo mật" bị cắt cụt. */
.user-reg-form .reg-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-reg-form .reg-captcha .captchaImg {
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r-sm);
    flex: 0 0 auto;
}

.user-reg-form .reg-captcha-reload {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    min-height: 0;
    padding: 0;
    color: var(--btgtu-muted);
}

.user-reg-form .reg-captcha-reload:hover {
    color: var(--btgtu-blue-700);
}

.user-reg-form .reg-captcha .rsec {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hàng nút: nút chính đứng trước và rộng, nút Thiết lập lại là nút phụ. */
.user-reg-form .reg-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.user-reg-form .reg-actions .btn-primary {
    flex: 1 1 auto;
}

.user-reg-form .reg-actions .btn-default {
    flex: 0 0 auto;
}

/* Viền báo lỗi. Mặc định của tờ là --btgtu-bad-line (#f3b4ad) — hợp cho một
   hộp cảnh báo lớn nhưng trên đường viền 1px của ô nhập thì nhạt đến mức không
   nhận ra ô nào sai; đây lại đúng là chỗ người dùng cần nhìn thấy ngay. */
.user-reg-form .has-error .form-control,
.user-reg-form .has-error .choice-box,
.user-reg-form .has-error .reg-agree {
    border-color: var(--btgtu-bad);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}

.user-reg-form .has-error .reg-label {
    color: var(--btgtu-bad);
}

/* Dòng hướng dẫn dưới ô chọn — lấy từ phần mô tả của trường tùy biến trong
   quản trị. Trước đây phần mô tả đó được nhập nhưng không hiện ở đâu cả, nên
   câu "Kết quả giải tập thể tính theo đơn vị này" không ai đọc được. Trường
   nào bỏ trống mô tả thì thẻ rỗng và :empty gỡ luôn khoảng trống.
   Không giới hạn trong .user-reg-form: trang sửa thông tin cá nhân (info.tpl)
   dùng lại chính lớp này. */
.reg-help {
    margin: 6px 0 0;
    color: var(--btgtu-muted);
    font-size: 13px;
    line-height: 1.5;
}

.reg-help:empty {
    display: none;
}

/* ─── 11b. BẢNG CHỌN ĐƠN VỊ CÓ TÌM KIẾM ──────────────────────────────────
   Đi kèm themes/btgtu/js/reg-org-picker.js — đọc phần chú thích đầu tệp đó
   trước khi sửa mục này.

   Danh sách đơn vị lấy từ cột full_title nên mỗi dòng là cả đường dẫn cây
   ("Đảng ủy ... > Văn phòng Thành ủy > Phòng Quản trị"). Trong một ô chọn
   rộng 380px thì phần đầu giống hệt nhau, phần đuôi — thứ phân biệt các đơn
   vị — lại bị cắt. Bảng này thay bằng: nút hiện lựa chọn thành hai dòng
   (đường dẫn cha nhỏ ở trên, tên đơn vị đậm ở dưới), bảng xổ có ô gõ tìm và
   danh sách thụt lề theo cấp.

   <select> gốc vẫn nằm đó và vẫn là cái được gửi đi. KHÔNG dùng display:none
   cho nó: users.js validCheck() bỏ qua mọi ô không :visible, ô bắt buộc sẽ
   không còn được kiểm tra ở trình duyệt nữa. Làm trong suốt và trải đúng lên
   cái nút thì vừa giữ được kiểm tra, vừa để bóng chú thích lỗi (bootstrap
   tooltip neo theo ô gốc) hiện đúng chỗ người dùng đang nhìn. */
.org-pick-host {
    position: relative;
}

.org-pick-host > select {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 42px;
    opacity: 0;
    pointer-events: none;
}

.org-pick {
    position: relative;
}

/* Nút mở bảng: vẫn là .form-control để ăn nguyên viền, bo góc, chiều cao và
   cả viền đỏ của .has-error như mọi ô khác trên biểu mẫu. */
.org-pick-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: var(--btgtu-bg);
    cursor: pointer;
    padding: 6px 13px;
}

.org-pick-toggle:focus {
    outline: none;
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, 0.14);
}

/* Viền báo lỗi đậm, ở cả hai trang dùng bảng này. Trang sửa thông tin cá nhân
   để mặc định --btgtu-bad-line (#f3b4ad): trên đường viền 1px thì nhạt đến mức
   không nhận ra ô nào sai, mà ở đây viền chính là tín hiệu duy nhất. */
.has-error .org-pick-toggle {
    border-color: var(--btgtu-bad);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.10);
}

.org-pick-current {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
}

.org-pick-current.is-empty {
    color: var(--btgtu-muted-2);
    font-size: 15px;
}

/* Đường dẫn cha in nhỏ và mờ: đủ để biết đơn vị nằm ở nhánh nào mà không
   giành chỗ của cái tên. */
.org-pick-current-path {
    display: block;
    color: var(--btgtu-muted-2);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-pick-current-name {
    display: block;
    color: var(--btgtu-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-pick-caret {
    flex: 0 0 auto;
    color: var(--btgtu-muted);
    font-size: 16px;
    transition: transform .15s;
}

.org-pick-toggle[aria-expanded="true"] .org-pick-caret {
    transform: rotate(180deg);
}

/* Bảng xổ */
.org-pick-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    max-height: 340px;
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh-lg);
    overflow: hidden;
}

.org-pick-panel[hidden] {
    display: none;
}

.org-pick-panel.is-up {
    top: auto;
    bottom: calc(100% + 6px);
}

/* Thanh tiêu đề chỉ dùng ở bản màn hình hẹp, xem cuối mục. */
.org-pick-head {
    display: none;
}

.org-pick-search {
    position: relative;
    flex: 0 0 auto;
    border-bottom: 1px solid var(--btgtu-line-soft);
}

.org-pick-search .fa {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--btgtu-muted-2);
    font-size: 14px;
    pointer-events: none;
}

.org-pick-input {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 11px 13px 11px 34px;
    font-family: var(--btgtu-font);
    font-size: 14px;
    color: var(--btgtu-ink);
}

.org-pick-input:focus {
    outline: none;
}

.org-pick-input::placeholder {
    color: var(--btgtu-muted-2);
}

.org-pick-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.org-pick-list:focus {
    outline: none;
}

.org-pick-opt {
    padding: 7px 13px;
    font-size: 14.5px;
    color: var(--btgtu-ink-2);
    cursor: pointer;
    line-height: 1.35;
}

.org-pick-opt.is-active {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-900);
}

.org-pick-opt.is-chosen {
    font-weight: 600;
    color: var(--btgtu-blue-800);
}

/* Dòng "bỏ chọn", chỉ có ở ô chọn không bắt buộc. Nhạt hơn các đơn vị thật để
   không bị đọc nhầm thành một đơn vị. */
.org-pick-opt.is-clear {
    color: var(--btgtu-muted-2);
    border-bottom: 1px solid var(--btgtu-line-soft);
    margin-bottom: 4px;
    padding-bottom: 9px;
}

/* Cấp bậc khi KHÔNG lọc: thụt lề dần, kèm một vạch dọc mảnh làm mốc mắt.
   Đơn vị có cấp con in đậm hơn để đọc ra được đâu là đầu một nhánh — nó vẫn
   chọn được như mọi dòng khác. */
.org-pick-opt.is-parent {
    font-weight: 600;
    color: var(--btgtu-ink);
}

.org-pick-opt.lv1,
.org-pick-opt.lv2,
.org-pick-opt.lv3,
.org-pick-opt.lv4 {
    border-left: 1px solid var(--btgtu-line-soft);
}

.org-pick-opt.lv1 {
    margin-left: 13px;
    padding-left: 12px;
}

.org-pick-opt.lv2 {
    margin-left: 27px;
    padding-left: 12px;
}

.org-pick-opt.lv3 {
    margin-left: 41px;
    padding-left: 12px;
}

.org-pick-opt.lv4 {
    margin-left: 55px;
    padding-left: 12px;
}

/* Khi lọc thì thứ tự cây đứt đoạn nên thụt lề vô nghĩa: mỗi kết quả tự mang
   theo đường dẫn cha của nó. */
.org-pick-opt.is-found {
    padding-top: 6px;
    padding-bottom: 6px;
}

.org-pick-opt-path {
    display: block;
    color: var(--btgtu-muted-2);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.org-pick-opt-name {
    display: block;
}

.org-pick-opt mark {
    background: rgba(184, 15, 30, 0.14);
    color: inherit;
    padding: 0;
    border-radius: 3px;
    font-weight: 600;
}

.org-pick-none {
    margin: 0;
    padding: 18px 16px;
    color: var(--btgtu-muted);
    font-size: 13.5px;
    text-align: center;
}

.org-pick-note {
    flex: 0 0 auto;
    border-top: 1px solid var(--btgtu-line-soft);
    background: var(--btgtu-soft);
    padding: 7px 13px;
    color: var(--btgtu-muted);
    font-size: 12px;
}

/* Màn hình hẹp: bảng xổ cao 340px trong một trang đang cuộn là chỗ bấm nhầm
   và gõ hụt. Cho nó phủ kín màn hình như một tờ chọn riêng, có tiêu đề và nút
   đóng, ô tìm nằm trên cùng để bàn phím ảo không đẩy mất. */
@media (max-width: 767px) {
    html.org-pick-lock,
    html.org-pick-lock body {
        overflow: hidden;
    }

    .org-pick-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1060;
        max-height: none;
        border: 0;
        border-radius: 0;
    }

    /* is-up là quyết định của bản xổ xuống; ở đây bảng phủ kín nên phải gỡ
       cả top:auto mà nó đặt, nếu không bảng chỉ còn cao bằng nội dung. */
    .org-pick-panel.is-up {
        top: 0;
        bottom: 0;
    }

    .org-pick-head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        background: var(--btgtu-head);
        padding: 12px 8px 12px 16px;
    }

    .org-pick-head-title {
        flex: 1 1 auto;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
    }

    .org-pick-close {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 26px;
        line-height: 1;
    }

    .org-pick-input {
        padding-top: 14px;
        padding-bottom: 14px;
        /* Dưới 16px thì Safari iOS tự phóng to trang khi đặt con trỏ vào ô. */
        font-size: 16px;
    }

    .org-pick-opt {
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

.reg-footer-links {
    margin-top: 18px;
    border-top: 1px solid var(--btgtu-line-soft);
    padding-top: 12px;
    text-align: center;
}

.reg-footer-links .users-menu {
    display: inline-block;
    float: none;
    margin: 0;
}

.reg-footer-links .users-menu > li {
    float: none;
    display: inline-block;
}

.login-box {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r-lg);
    box-shadow: var(--btgtu-sh);
    padding: 26px;
}

.users-menu > li > a {
    border-radius: var(--btgtu-r-sm);
    color: var(--btgtu-ink);
    font-weight: 500;
}

.users-menu > li > a:hover,
.users-menu > li.active > a {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

.users-av-wraper,
.users-avupload .img-area {
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
}

.users-avupload .upload-button {
    border: 1px dashed var(--btgtu-blue-400);
    border-radius: var(--btgtu-r);
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

.users-av-wraper .guide {
    color: var(--btgtu-muted);
    font-size: 13px;
}

.openid-btns .btn-group a.btn,
.openid-btns .btn-group button.btn {
    border-radius: var(--btgtu-r);
    font-weight: 500;
}

/* ═══ 12. CONTACT, VOTING, STATISTICS, COMMENT, SEEK, FEEDS ═════════════ */
/* Cây RSS của module feeds (feeds.css) vẽ đường nối và khung từng nhánh bằng
   #999, nền hover #eee — tông xám của theme cũ. */
.tree li::before {
    border-left-color: var(--btgtu-line);
}

.tree li::after {
    border-top-color: var(--btgtu-line);
}

.tree li span {
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r-sm);
    background: var(--btgtu-bg);
    padding: 5px 10px;
}

.tree li.parent_li > span:hover,
.tree li.parent_li > span:hover + ul li span {
    background: var(--btgtu-blue-100);
    border: 1px solid var(--btgtu-blue-300);
    color: var(--btgtu-blue-900);
}

.tree li span .fa-rss {
    color: var(--btgtu-warn);
}

/* Hộp nổi ở góc màn hình — không nằm trong mạch của tờ nên phải trả lại dáng
   thẻ mà quy tắc .panel phẳng ở mục 7 vừa gỡ đi. */
#contactButton .panel {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh);
    padding-bottom: 0;
}

#contactButton .panel > .panel-heading,
#contactButton .panel > .panel-body {
    padding-left: 14px;
    padding-right: 14px;
}

#contactButton .panel > .panel-heading {
    border-bottom: 1px solid var(--btgtu-line-soft);
}

#contactButton .ctb {
    background: var(--btgtu-blue);
    border-radius: var(--btgtu-r-sm);
    color: #fff;
}

.contact-result {
    background: var(--btgtu-ok-bg);
    border: 1px solid var(--btgtu-ok-line);
    border-radius: var(--btgtu-r);
    color: #14532d;
}

.voting-col-2,
.padding-voting ul li {
    border-color: var(--btgtu-line-soft);
}

.sum-voting {
    color: var(--btgtu-blue-800);
    font-weight: 600;
}

/* Bình luận */
.comment-item,
.comment_content {
    border-color: var(--btgtu-line-soft);
}

/* Kết quả tìm kiếm: từ khóa trùng */
.seek-highlight,
.search-highlight,
mark {
    background: var(--btgtu-blue-200);
    color: var(--btgtu-blue-900);
    border-radius: 3px;
    padding: 0 3px;
}

/* Thống kê: bỏ hai ảnh nền gif cũ, dùng thanh màu phẳng */
.statistics-bar,
.stat-bar {
    background: var(--btgtu-blue) !important;
    border-radius: 2px;
}

/* ── Module cuộc thi hòa vào tờ ──────────────────────────────────────────
   quiz.css dựng .quiz-shell thành một thẻ riêng (viền, bo góc, bóng đổ). Đặt
   thẻ đó vào trong tờ trắng thành ra thẻ lồng thẻ, và vì trang chủ cuộc thi có
   HAI shell (một của block global.quiz_hero, một của thân mô-đun) nên nhìn
   thành hai hòn đảo rời.
   quiz.css nạp SAU custom.css, nên phải thêm #body để đủ ưu tiên đè lên.
   Trang làm bài không đi qua đây: quiz-focus.css trả lại dáng thẻ bằng bộ chọn
   ưu tiên cao hơn. */
#body .quiz-shell {
    max-width: none;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Dải nền chuyển sắc của phần mở đầu chạy hết bề ngang tờ thay vì thụt vào
   trong một thẻ. Số âm 22px khớp với phần đệm của .section-body .wraper. */
#body .quiz-hero {
    margin: 0 -22px;
    padding: 32px 22px;
    border-bottom: 1px solid var(--btgtu-line-soft);
}

/* Hai shell liền nhau: shell sau không lặp lại phần đệm trên. */
#body .quiz-shell + .quiz-shell .quiz-section:first-child,
#body .quiz-shell:first-child .quiz-section:first-child {
    padding-top: 28px;
}

/* ═══ 13. MENU MODULE, MODULE-MENU, BANNER KHỐI ══════════════════════════ */
.module-menu a {
    border-radius: var(--btgtu-r-sm);
    color: var(--btgtu-ink);
    font-weight: 500;
}

.module-menu a:hover,
.module-menu a:focus {
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue-800);
}

.module-menu a.active {
    background: var(--btgtu-blue);
    color: #fff;
}

.module-menu a.active:before,
.module-menu a.active:hover {
    color: #fff;
}

.nv-list-item li {
    border-bottom-color: var(--btgtu-line-soft);
}

.nv-block-banners img,
.nv-block-rss img {
    border-radius: var(--btgtu-r);
}

.featured-products .img-thumbnail {
    border-radius: var(--btgtu-r);
}

.featured-products ul > li:before {
    color: var(--btgtu-blue);
}

/* ═══ 14. MODAL, TOOLTIP, DROPDOWN ══════════════════════════════════════ */
.modal-content,
#sitemodal .modal-content {
    border: 0;
    border-radius: var(--btgtu-r-lg);
    box-shadow: var(--btgtu-sh-lg);
}

.modal-header {
    border-bottom-color: var(--btgtu-line);
    padding: 18px 22px;
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.modal-body {
    padding: 22px;
}

.modal-footer {
    background: var(--btgtu-soft);
    border-top-color: var(--btgtu-line);
    border-radius: 0 0 var(--btgtu-r-lg) var(--btgtu-r-lg);
    padding: 16px 22px;
}

.modal-backdrop.in {
    opacity: .55;
    background: var(--btgtu-blue-900);
}

.close {
    color: var(--btgtu-muted);
    opacity: 1;
    text-shadow: none;
}

.close:hover {
    color: var(--btgtu-bad);
    opacity: 1;
}

.tooltip-inner {
    background: var(--btgtu-ink);
    border-radius: var(--btgtu-r-sm);
    font-size: 13px;
    padding: 7px 11px;
}

.tooltip.top .tooltip-arrow { border-top-color: var(--btgtu-ink); }
.tooltip.bottom .tooltip-arrow { border-bottom-color: var(--btgtu-ink); }
.tooltip.left .tooltip-arrow { border-left-color: var(--btgtu-ink); }
.tooltip.right .tooltip-arrow { border-right-color: var(--btgtu-ink); }

#tip .bg,
#ftip .bg {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    box-shadow: var(--btgtu-sh);
}

/* ═══ 15. CHÂN TRANG ════════════════════════════════════════════════════ */
/* Chân trang lớn <footer class="section-footer-top" id="footer"> đã gỡ khỏi
   layout/footer_extended.tpl ngày 30/08/2026. Phần dưới cùng của trang giờ chỉ
   còn thanh .section-footer-bottom (đổi giao diện + nút lên đầu trang).

   Các khối global.company_info, global.copyright, global.QR_code, menu chân
   trang vẫn còn trong themes/btgtu/blocks/ và có thể được gán sang vị trí khác
   ([FOOTER] hay [BOTTOM]) — hai vị trí đó nằm trên nền sáng, nên phần màu dưới
   đây viết cho nền sáng chứ không còn là chữ nhạt trên nền xanh đậm. */
.company_info li,
.copyright,
.copyright span a {
    color: var(--btgtu-muted);
    font-size: 13.5px;
    line-height: 1.75;
}

.company_info li {
    border-color: var(--btgtu-line-soft);
}

.company_info li em {
    color: var(--btgtu-blue);
}

.company_info .company_name {
    color: var(--btgtu-ink);
    font-weight: 600;
}

.copyright span a:hover {
    color: var(--btgtu-blue-700);
}

.company-map {
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
}

.qr-code-wraper img {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r);
    padding: 6px;
}

/* Thanh cuối trang — ĐỔI 18/09/2026: đồng bộ với .section-header-bar (cũng
   nền --btgtu-blue-900), để tờ trắng có hai đầu tối bọc lấy nội dung sáng ở
   giữa, thay vì chân trang chìm vào tờ trắng như trước (rà soát 18/09/2026:
   nhìn như một dải trống chưa xong giao diện). Bộ màu chữ/nút vay lại nguyên
   khỏi .section-header-bar (mục 3) — chữ nhạt + nút viền mờ như .socialList. */
.section-footer-bottom,
.footerNav2 {
    background: var(--btgtu-blue-900);
    color: var(--btgtu-blue-200);
}

.footerNav2 > .wraper {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 12px;
    margin-top: 6px;
}

.footerNav2 .theme-change a,
.footerNav2 .theme-change span,
.footerNav2 .bttop a {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--btgtu-r-sm);
    color: var(--btgtu-blue-200);
}

.footerNav2 .theme-change a:hover,
.footerNav2 .bttop a:hover {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue);
    color: #fff;
}

/* ═══ 16. MÀN HÌNH NHỎ ══════════════════════════════════════════════════ */
/* Menu gập trên máy tính bảng và điện thoại. style.responsive.css dựng lại toàn
   bộ menu trong @media (max-width: 1119.98px) với bảng màu cũ (#428bca, #82b2dc,
   #a6c8e6, #4247ca) và nhiều chỗ dùng !important — nên phải viết lại đúng bộ
   chọn có #menusite, trong cùng ngưỡng, và giữ nguyên !important ở đâu bản gốc
   có. Không làm phần này thì trang trên điện thoại vẫn là giao diện cũ. */
@media (max-width: 1119.98px) {
    /* Dưới ngưỡng này tờ đã rộng bằng màn hình, nên viền hai bên nằm sát mép và
       góc bo không còn thấy được — bỏ hết cho tờ chạy tràn màn hình. */
    header,
    .section-nav,
    .section-body,
    .section-footer-bottom {
        border-left: 0;
        border-right: 0;
    }

    header {
        margin-top: 0;
        border-top: 0;
        border-radius: 0;
    }

    .section-footer-bottom {
        margin-bottom: 0;
        border-bottom: 0;
        border-radius: 0;
    }

    header .wraper,
    .section-body .wraper,
    .section-footer-bottom .wraper {
        padding: 0 14px;
    }

    #body .quiz-hero {
        margin: 0 -14px;
        padding: 24px 14px;
    }

    /* style.responsive.css đặt .second-nav thành position:absolute rồi lại đổi
       .section-nav > .wraper về position:inherit — nên thanh menu mất mốc neo và
       nút gập menu nhảy lên đầu tài liệu, đè lên thẻ đầu trang. Trả mốc neo về
       .section-nav và chừa đúng một hàng cho nút. */
    .section-nav {
        position: relative;
        min-height: 50px;
    }

    #menusite .navbar-default {
        background-color: var(--btgtu-blue);
        border-color: var(--btgtu-blue);
        border-radius: var(--btgtu-r);
    }

    #menusite .navbar-default .navbar-nav > li > a {
        background-color: var(--btgtu-blue);
        color: #fff;
    }

    #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(--btgtu-blue-700) !important;
        color: #fff !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(--btgtu-blue-800) !important;
        color: #fff !important;
    }

    #menusite .navbar-toggle {
        background-color: var(--btgtu-blue);
        border-color: var(--btgtu-blue);
        border-radius: var(--btgtu-r-sm);
        color: #fff;
    }

    #menusite .navbar-toggle:hover,
    #menusite .navbar-toggle:focus {
        background-color: var(--btgtu-blue-800);
        border-color: var(--btgtu-blue-800);
        color: #fff;
    }

    #menusite .navbar-toggle .icon-bar {
        background-color: #fff;
    }

    #menusite .navbar-nav .dropdown-mobile {
        border-top-color: rgba(255, 255, 255, 0.28) !important;
    }

    #menusite .dropdown-submenu a {
        background-color: var(--btgtu-blue-700);
        border-top-color: rgba(255, 255, 255, 0.22) !important;
    }

    #menusite .dropdown-submenu li a {
        color: #fff !important;
    }
}

/* Dưới 768px style.responsive.css mới gập menu thành nút; ô tìm kiếm trong dải
   phải nhường chỗ cho nút đó. Ngưỡng ở đây phải trùng ngưỡng 767.98px của
   style.responsive.css — dùng 1119.98px như phần màu sắc bên trên thì từ 768px
   đến 1120px menu vẫn nằm ngang mà cột chứa nó đã bị bóp còn 56px. */
@media (max-width: 767.98px) {
    .menu-bar {
        min-height: 50px;
    }

    /* Dưới ngưỡng này menu không còn là một hàng nút mà là một bảng xổ xuống
       xếp dọc. Trả các mục về khối liền nhau: giữ khe 5px và bo góc như trên
       máy tính thì bảng thủng lỗ chỗ, nhìn xuyên xuống ảnh phía dưới. */
    #menusite .navbar-default .navbar-nav > li,
    #menusite .navbar-nav > li {
        margin: 0;
    }

    #menusite .navbar-default .navbar-nav > li > a,
    #menusite .navbar-nav > li > a {
        border-radius: 0;
        /* Chừa 35px bên phải cho mũi tên của mục có menu con — đúng con số
           style.responsive.css dùng, phải nhắc lại vì phần đệm gộp ở trên đã
           ghi đè mất padding-right của nó. */
        padding: 13px 35px 13px 16px;
    }

    /* Chừa đúng một ô cho nút gập, phần còn lại của hàng dành cho ô tìm kiếm. */
    .menu-bar-nav {
        flex: 0 0 56px;
    }

    .menu-bar-search {
        flex: 0 1 240px;
        width: auto;
        max-width: 100%;
    }

    /* Nút gập và bảng menu xổ ra đều là khối tuyệt đối. Bootstrap để .navbar ở
       position:relative nên chúng lấy .navbar-default làm mốc — mà .navbar-default
       nay chỉ rộng bằng ô 56px chừa cho nút, khiến bảng menu xổ ra hẹp bằng đúng
       cái nút. Bỏ mốc neo đó để cả hai neo theo dải .second-nav như trước. */
    #menusite .navbar-default {
        position: static;
    }

    /* style.responsive.css chỉ đặt left cho nút gập, còn chiều dọc để nguyên vị
       trí tĩnh — vị trí đó nay nằm giữa một cột cao 0px nên nút rơi xuống dưới
       dải. Neo thẳng vào mép trên dải và canh giữa hàng 50px. */
    #menusite .navbar-toggle {
        top: 0;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    /* Cùng lý do: bảng menu xổ ra cũng chỉ có left tĩnh nên bị lệch sang phải
       đúng bằng lề trái của cột chừa cho nút. Neo về mép trái dải. */
    #menusite .navbar-collapse {
        left: 0;
    }
}

/* Từ 992px đến 1199px menu vẫn nằm ngang mà dải đã hẹp dần; thu ô tìm kiếm lại
   để sáu mục menu của cổng còn đủ chỗ trên một hàng. Ngưỡng lấy theo bề rộng
   thật của menu (Cuộc thi trực tuyến / Thông báo từ BTC / Tài liệu tham khảo /
   Thành viên / Liên hệ) — ở 992px mà để ô 240px thì "Liên hệ" bị đẩy xuống
   hàng thứ hai. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menu-bar-search {
        width: 180px;
    }
}

/* 768px–991px: menu chưa gập thành nút (ngưỡng gập là 767.98px) nhưng dải đã
   quá hẹp. Sáu mục menu rộng khoảng 712px trong khi dải ở 768px chỉ còn 739px
   — không còn chỗ cho một ô nhập liệu bên phải ở bất kỳ bề rộng nào còn dùng
   được. Xuống hàng có chủ ý: menu chiếm trọn hàng trên, ô tìm kiếm nằm hàng
   dưới và vẫn neo phải — gọn hơn là để menu tự vỡ thành hai hàng so le.
   Chặn dưới 768px là bắt buộc: dưới ngưỡng đó menu đã gập lại và cột chứa nó
   chỉ rộng 56px, ăn trọn một hàng là hỏng. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .menu-bar {
        flex-wrap: wrap;
    }

    .menu-bar-nav {
        flex: 1 1 100%;
    }

    .menu-bar-search {
        width: 240px;
        padding-top: 0;
        padding-bottom: 8px;
    }
}

@media (max-width: 991px) {
    body {
        font-size: 14.5px;
    }

    h1, .h1 { font-size: 25px; }
    h2, .h2 { font-size: 21px; }
    h3, .h3 { font-size: 18px; }

    .section-nav .bg,
    .second-nav .bg {
        border-radius: var(--btgtu-r-sm);
    }

    /* Vùng chạm tối thiểu 44px trên thiết bị cầm tay */
    .btn,
    .pagination > li > a,
    .module-menu a,
    .users-menu > li > a {
        min-height: 44px;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .panel-body {
        padding: 14px;
    }

    .reg-page .panel-body {
        padding: 20px 18px 18px;
    }

    .reg-title {
        font-size: 22px;
    }

    /* Ô nhập mã bảo mật xuống hàng riêng: đứng cùng hàng với ảnh mã và nút vẽ
       lại thì nó chỉ còn khoảng 74px, không đọc nổi chữ đang gõ. */
    .user-reg-form .reg-captcha {
        flex-wrap: wrap;
    }

    .user-reg-form .reg-captcha .rsec {
        flex: 1 0 100%;
    }

    /* Hai nút xếp dọc. Nút "Đăng ký thành viên" không rút ngắn được dưới bề
       rộng chữ của nó, nên đứng cùng hàng với nút phụ là tràn khỏi thẻ. */
    .user-reg-form .reg-actions {
        flex-direction: column;
    }

    .login-box {
        padding: 18px;
    }

    .table {
        font-size: 13.5px;
    }
}

/* ═══ 17. IN ════════════════════════════════════════════════════════════ */
@media print {
    body {
        background: #fff;
        color: #000;
        font-size: 12pt;
    }

    .section-header-bar,
    .section-nav,
    .third-nav,
    .section-footer-top,
    .section-footer-bottom,
    .fix_banner_left,
    .fix_banner_right,
    #contactButton,
    .nv-social-share,
    .social-share-container,
    .cookie-notice {
        display: none !important;
    }

    .panel,
    .well,
    .box-shadow {
        border: 0;
        box-shadow: none;
    }

    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ═══ 18. TIMELINE (block.about.tpl) ════════════════════════════════════ */
.page-timeline-item {
    position: relative;
    padding-left: 20px;
    padding-bottom: 20px;
    border-left: 2px solid var(--btgtu-blue-200);
}

.page-timeline-marker {
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--btgtu-blue);
    box-shadow: 0 0 0 4px var(--btgtu-bg);
}

.page-timeline-title {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 6px;
    line-height: 1.3;
}

.page-timeline-title a {
    color: var(--btgtu-blue-800);
}

.page-timeline-time {
    font-size: 12.5px;
    color: #888;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-timeline-body {
    font-size: 14.5px;
    color: var(--btgtu-ink-2);
}

/* ═══ 19. DOC LIST (block.page_list.tpl) ════════════════════════════════════ */
.quiz-doc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-doc-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.quiz-doc-item:hover {
    border-color: var(--btgtu-blue);
    box-shadow: 0 4px 12px rgba(184, 15, 30, 0.1);
    transform: translateY(-2px);
}
.quiz-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--btgtu-blue-50);
    color: var(--btgtu-blue);
    border-radius: 50%;
    margin-right: 14px;
    font-size: 18px;
    flex-shrink: 0;
}
.quiz-doc-content {
    flex-grow: 1;
}
.quiz-doc-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--btgtu-ink);
    line-height: 1.4;
}
.quiz-doc-item:hover .quiz-doc-title {
    color: var(--btgtu-blue);
}
.quiz-doc-action {
    color: #a0aebf;
    font-size: 16px;
    margin-left: 12px;
    transition: transform 0.2s;
}
.quiz-doc-item:hover .quiz-doc-action {
    color: var(--btgtu-blue);
    transform: translateX(4px);
}

/* ═══ 20. 2-COLUMN LAYOUT WRAPPER ════════════════════════════════════ */
.quiz-2cols-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 992px) {
    .quiz-2cols-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

/* ═══ 21. KHUNG "XANH CHUYỂN ĐỔI SỐ" (19/09/2026) ═══════════════════════
   Thay "tờ liền mạch" 1080px (mục 3) bằng khung tràn màn hình: đầu trang và
   chân trang là dải xanh đậm chạy hết bề ngang, nội dung nằm trong cột giữa
   tối đa 1200px. Toàn bộ mục này ĐÈ lên mục 3, 15 và 16 bằng cùng bộ chọn
   (nạp sau nên thắng); gỡ cả mục là trở về bản trước.
   Markup không đổi, trừ khối .logo trong header_extended.tpl (chữ ký nhận
   diện thay ảnh logo NukeViet). */

html,
body {
    overflow-x: clip; /* cho các dải tràn màn hình dùng 100vw không tạo thanh cuộn ngang */
}

body {
    background: var(--btgtu-soft);
}

header,
.section-nav,
.section-body,
.section-footer-bottom {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
}

header {
    margin-top: 0;
    background: var(--btgtu-head);
    z-index: 100;
}

.section-body {
    background: transparent;
}

header .wraper,
.section-nav .wraper,
.section-body .wraper,
.section-footer-bottom .wraper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Dải trên chỉ còn nút Đăng nhập / menu tài khoản: đưa lên cùng hàng với
   chữ ký nhận diện, neo mép phải, thay vì chiếm riêng một hàng. */
.section-header-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    border-radius: 0;
    pointer-events: none;
}

.section-header-bar .header-nav {
    pointer-events: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 72px;
}

.section-header-bar .header-nav-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-nav .personalArea a[data-callback="loginFormLoad"],
.header-nav a.button {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--btgtu-r);
    color: #fff;
    font-weight: 600;
    padding: 8px 16px;
}

.header-nav .personalArea a[data-callback="loginFormLoad"]:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.section-header {
    background: transparent;
    padding: 0;
}

#header {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding-right: 160px; /* chừa chỗ cho nút Đăng nhập neo mép phải */
}

#header .logo {
    display: block;
}

#header .logo .brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

#header .logo .brand-mark {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--btgtu-r);
    background: #fff;
    color: var(--btgtu-blue);
    font-size: 19px;
}

#header .logo .brand-text small {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #fde6e8;
}

#header .logo .brand-text small:empty {
    display: none;
}

#header .logo .brand-text strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    letter-spacing: -0.01em;
}

/* Tên site đã hiện trong .brand — trả hai phần tử cũ về đúng vai trò: h1/span
   chỉ cho trình đọc màn hình, dòng mô tả cũ ẩn đi. */
#header .logo .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

#header .logo .site_description {
    display: none;
}

#header .right-ads:empty {
    display: none;
}

/* Thanh menu: cùng nền xanh đậm, ngăn với hàng trên bằng một đường mảnh. */
.section-nav {
    background: var(--btgtu-head);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    position: relative;
    z-index: 90;
}

.section-nav .wraper {
    padding: 0 24px;
}

.section-nav .bg,
.second-nav .bg {
    background: transparent;
    padding: 0;
}

#menusite .navbar-default .navbar-nav > li > a,
#menusite .navbar-nav > li > a,
#navbar_menu > li > a,
.second-nav a {
    color: #fde6e8;
}

#menusite .navbar-default .navbar-nav > li > a:hover,
#menusite .navbar-default .navbar-nav > li > a:focus,
#menusite .navbar-default .navbar-nav > .open > a,
#navbar_menu li:hover > a,
.second-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

#menusite .navbar-default .navbar-nav > .active > a,
#menusite .navbar-default .navbar-nav > .active > a:hover,
#menusite .navbar-default .navbar-nav > .active > a:focus,
.second-nav .active > a {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.menu-bar-search .form-control {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.menu-bar-search .form-control::placeholder {
    color: #fbd5d8;
}

.menu-bar-search .form-control:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--btgtu-blue-500);
}

.menu-bar-search .btn,
.menu-bar-search .btn-info {
    background: #fff;
    border-color: #fff;
    color: var(--btgtu-blue);
}

/* Vùng nội dung: không còn là tờ trắng, các khối tự mang nền của mình. */
#body {
    padding-top: 0;
}

/* Chân trang: dải xanh đậm tràn màn hình. */
.section-footer-bottom,
.footerNav2 {
    background: var(--btgtu-deep);
    margin-top: 64px;
}

.footerNav2 > .wraper {
    border-top: 0;
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

@media (max-width: 1119.98px) {
    header,
    .section-nav,
    .section-body,
    .section-footer-bottom {
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 767.98px) {
    header .wraper,
    .section-nav .wraper,
    .section-body .wraper,
    .section-footer-bottom .wraper {
        padding: 0 16px;
    }

    #header {
        min-height: 64px;
        padding-right: 120px;
    }

    .section-header-bar .header-nav {
        min-height: 64px;
    }

    #header .logo .brand-text small {
        display: none;
    }

    #header .logo .brand-text strong {
        font-size: 15px;
    }
}

/* Hero xanh dán sát thanh menu: bỏ phần đệm trên của vùng nội dung. */
.section-body {
    padding-top: 0;
}

/* Khối "Thông báo", "Tài liệu" ở trang chủ (panel + page-timeline): thẻ
   trắng bo 16px, mỗi mục là một hàng bấm được có ô biểu tượng, thay cho
   đường dọc + chấm tròn của dạng timeline. */
#body .panel.panel-default {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg);
    box-shadow: 0 1px 2px rgba(70, 18, 22, .06), 0 12px 32px rgba(70, 18, 22, .06);
    overflow: hidden;
}

#body .panel-default > .panel-heading {
    background: transparent;
    border: 0;
    padding: 20px 24px 6px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--btgtu-ink);
}

#body .panel-default > .panel-heading::before,
#body .panel-default > .panel-heading::after {
    display: none;
}

#body .panel-default > .panel-body {
    padding: 6px 10px 14px;
}

#body .panel .page-timeline-item {
    padding: 0;
    border: 0;
}

#body .panel .page-timeline-marker {
    display: none;
}

#body .panel .page-timeline-content {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 12px;
    transition: background-color .15s;
}

#body .panel .page-timeline-content:hover {
    background: var(--btgtu-soft);
}

/* Ô biểu tượng và mũi tên vẽ bằng FontAwesome sẵn có của theme. */
#body .panel .page-timeline-content::before {
    content: "\f15c"; /* fa-file-text */
    font-family: FontAwesome;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--btgtu-blue-100);
    color: var(--btgtu-blue);
    font-size: 16px;
}

#body .panel .page-timeline-content::after {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    grid-column: 3;
    grid-row: 1 / span 2;
    color: var(--btgtu-muted-2);
    font-size: 18px;
}

#body .panel .page-timeline-title {
    grid-column: 2;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

/* Cả hàng bấm được: kéo vùng bấm của liên kết tiêu đề phủ hết hàng. */
#body .panel .page-timeline-title a {
    color: var(--btgtu-ink);
    text-decoration: none;
}

#body .panel .page-timeline-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

#body .panel .page-timeline-content:hover .page-timeline-title a {
    color: var(--btgtu-blue);
}

#body .panel .page-timeline-time {
    grid-column: 2;
    margin: 0;
    font-size: 13px;
    color: var(--btgtu-muted);
}

#body .panel .page-timeline-time .fa {
    display: none;
}

#body .panel .page-timeline-body:empty {
    display: none;
}

/* ═══ 22. DẢI ĐẦU TRANG CHUNG + TRANG ĐĂNG KÝ (19/09/2026) ═══════════════
   .btgtu-page-head là bản dùng chung (ngoài module cuộc thi) của dải đầu
   trang xanh đậm tràn màn hình, giống .quiz-page-head trong quiz.css. Hiện
   dùng ở users/register.tpl. */
.btgtu-page-head {
    position: relative;
    margin: 0 calc(50% - 50vw) 32px;
    padding: 40px max(24px, calc(50vw - 576px)) 40px;
    background: #fff url("../images/trong-dong.jpg") center 30% / max(1400px, 100%) auto no-repeat;
    border-bottom: 3px solid var(--btgtu-blue);
    color: var(--btgtu-ink);
}

.btgtu-page-title {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--btgtu-blue-800);
}

/* Đường dẫn "Trang nhất > Thành viên" cắt giữa menu và dải: bỏ ở trang có dải. */
.section-body:has(.btgtu-page-head) .third-nav {
    display: none;
}

/* Thẻ biểu mẫu đăng ký, căn giữa dưới dải. */
.reg-page {
    max-width: 600px;
    margin: 0 auto;
    float: none;
}

.reg-page > .panel {
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg);
    box-shadow: 0 1px 2px rgba(70, 18, 22, .06), 0 12px 32px rgba(70, 18, 22, .08);
}

.reg-page .panel-body {
    padding: 28px 32px 22px;
}

/* Dòng hướng dẫn đầu biểu mẫu. users.js thay chữ trong khối này bằng thông
   báo lỗi khi gửi không hợp lệ (nên giữ khối, chỉ đổi dáng): lúc bình thường
   là một dòng chữ phụ, không phải hộp cảnh báo. */
.user-reg-form > .nv-info {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--btgtu-muted);
    font-size: 14.5px;
}

.user-reg-form > .nv-info.error,
.user-reg-form > .nv-info.nv-info-error,
.user-reg-form > .nv-info[class*="danger"] {
    padding: 12px 14px;
    background: var(--btgtu-bad-bg);
    border: 1px solid var(--btgtu-bad-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-bad);
}

.user-reg-form .form-control {
    min-height: 44px;
    border-radius: var(--btgtu-r);
}

.user-reg-form .form-control:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

.user-reg-form .reg-actions .btn {
    min-height: 48px;
    border-radius: var(--btgtu-r);
    font-weight: 600;
}

.reg-footer-links {
    margin-top: 20px;
    padding-top: 14px;
}

.reg-footer-links .users-menu > li > a {
    color: var(--btgtu-blue-700);
    font-weight: 600;
    padding: 6px 12px;
}

.reg-footer-links .users-menu .fa-caret-right {
    display: none;
}

@media (max-width: 767.98px) {
    .btgtu-page-head {
        padding: 28px 16px 32px;
        margin-bottom: 20px;
    }

    .reg-page .panel-body {
        padding: 22px 18px 18px;
    }
}

.user-reg-form > .nv-info.success {
    padding: 12px 14px;
    background: var(--btgtu-ok-bg);
    border: 1px solid var(--btgtu-ok-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-ok);
}

/* Hàng [QUIZ_BOTTOM_LEFT]/[QUIZ_BOTTOM_RIGHT] của layout.quiz.tpl in ra kèm
   margin-bottom 20px viết sẵn ngay cả khi hai vị trí trống (trang đăng ký
   cũng dùng layout này): ẩn để dải đầu trang dán sát menu. */
#body .row[style*="margin-bottom"]:not(:has(.col-md-12 > *)) {
    display: none;
}

/* Trang đăng ký là biểu mẫu căn giữa: tiêu đề trên dải cũng căn giữa. */
.btgtu-page-head:has(+ .row .reg-page),
.btgtu-page-head:has(+ * .reg-page) {
    text-align: center;
}

/* Mục 21 thu phần đệm panel cho các khối danh sách ở trang chủ; thẻ biểu
   mẫu đăng ký cần lại phần đệm rộng. */
#body .reg-page > .panel > .panel-body {
    padding: 28px 32px 22px;
}

@media (max-width: 767.98px) {
    #body .reg-page > .panel > .panel-body {
        padding: 22px 18px 18px;
    }
}

/* ═══ 23. CHÂN TRANG: LIÊN HỆ BAN TỔ CHỨC (19/09/2026) ═══════════════════
   Hàng trên của dải chân trang xanh đậm; hàng dưới là thanh nút lên đầu
   trang (.footerNav2). Hai phần dán liền thành một khối chân trang. */
.section-footer-contact {
    margin-top: 64px;
    background: var(--btgtu-deep);
    color: #f3c6ca;
}

.section-footer-contact .wraper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 28px;
}

.footer-contact-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.footer-contact-body {
    margin: 0;
    max-width: 90ch;
    font-size: 15px;
    line-height: 1.75;
    color: #f3c6ca;
}

.footer-contact-body a,
.footer-contact-body a:link,
.footer-contact-body a:visited {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.footer-contact-body a:hover {
    color: #fde6e8;
    text-decoration: underline;
}

.section-footer-contact + .section-footer-bottom,
.section-footer-contact + .footerNav2 {
    margin-top: 0;
}

.section-footer-contact + .footerNav2 > .wraper {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 767.98px) {
    .section-footer-contact .wraper {
        padding: 32px 16px 24px;
    }
}

/* ═══ 24. MỤC MENU ĐANG CHỌN / RÊ CHUỘT (19/09/2026) ═════════════════════
   style.css gốc (dòng ~1540) tô nền mục menu lúc :hover/:focus/.active/.open
   bằng dải chuyển XANH #82b2dc → #428bca kèm !important, nên mọi quy tắc
   thường ở mục 3 và 21 đều thua. Thanh menu xanh trước đây che mất lỗi này;
   sang nền đỏ thì mục đang chọn lộ ra một ô xanh. Phải dùng !important cùng
   bộ chọn để đè lại.
   Mục đang chọn: ô trắng chữ đỏ (nổi rõ nhất trên thanh đỏ). Rê chuột / menu
   con đang mở: nền trắng mờ. */
/* Chỉ từ 1120px: dưới ngưỡng đó menu gập, mục 16 đã có bộ màu riêng. */
@media (min-width: 1120px) {
    #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: rgba(255, 255, 255, 0.14) !important;
        color: #fff !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: #fff !important;
        color: var(--btgtu-blue) !important;
        font-weight: 600;
    }
}

/* Mục con đang chọn / rê chuột trong menu xổ xuống (nền trắng). */
#menusite .dropdown-menu > li > a:hover,
#menusite .dropdown-menu > li > a:focus,
#menusite .dropdown-menu > .active > a,
#menusite .dropdown-menu > .active > a:hover,
#menusite .dropdown-menu > .active > a:focus,
#menusite .navbar .navbar-nav .open .dropdown-menu > li > a:hover,
#menusite .navbar .navbar-nav .open .dropdown-menu > li > a:focus,
#menusite .navbar .navbar-nav .open .dropdown-menu > .active > a,
#menusite .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
#menusite .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
    background: var(--btgtu-blue-100) !important;
    color: var(--btgtu-blue-800) !important;
}

/* Viền #064481 (xanh) của .navbar-collapse do style.css đặt: đổi theo nền đỏ. */
#menusite .navbar-collapse {
    border-color: rgba(255, 255, 255, 0.16);
}

/* ═══ 25. TRANG ĐĂNG NHẬP (19/09/2026) ═══════════════════════════════════
   Cùng khuôn với trang đăng ký (mục 22): dải nền trống đồng ở đầu, thẻ trắng
   căn giữa. Phần biểu mẫu (nhãn, ô nhập, nút) viết cho MỌI chỗ in
   login_form.tpl: trang đăng nhập, hộp bật lên khi bấm "Đăng nhập" ở đầu
   trang, và khối đăng nhập. */
.btgtu-page-head--center {
    text-align: center;
}

/* #body để thắng users.css (nạp sau, đặt .login-box { width: 334px }). */
#body .login-box {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.login-box > .panel {
    margin-top: 0 !important;
    background: var(--btgtu-bg) !important; /* bg-lavender của theme có !important */
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg);
    box-shadow: 0 1px 2px rgba(70, 18, 22, .06), 0 12px 32px rgba(70, 18, 22, .08);
}

#body .login-box > .panel > .panel-body {
    padding: 28px 32px 22px;
}

/* Dòng hướng dẫn / chỗ users.js in lỗi: như ở trang đăng ký. */
form[action*="login"] > .nv-info {
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--btgtu-muted);
    font-size: 14.5px;
    text-align: left;
}

form[action*="login"] > .nv-info.error {
    padding: 12px 14px;
    background: var(--btgtu-bad-bg);
    border: 1px solid var(--btgtu-bad-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-bad);
}

form[action*="login"] > .nv-info.success {
    padding: 12px 14px;
    background: var(--btgtu-ok-bg);
    border: 1px solid var(--btgtu-ok-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-ok);
}

form[action*="login"] .reg-label {
    display: block;
    margin-bottom: 6px;
    color: var(--btgtu-ink);
    font-weight: 600;
    font-size: 14px;
}

form[action*="login"] .form-group {
    margin-bottom: 16px;
}

form[action*="login"] .input-group-addon {
    min-width: 44px;
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r) 0 0 var(--btgtu-r);
    color: var(--btgtu-muted);
}

form[action*="login"] .input-group .form-control {
    height: 44px;
    border-radius: 0 var(--btgtu-r) var(--btgtu-r) 0;
}

/* style.css dán ảnh dấu sao required.png vào nền ô nhập: bỏ, như trang đăng ký. */
form[action*="login"] input.required {
    background-image: none;
}

form[action*="login"] .form-control:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

/* Mã bảo mật: ảnh, nút vẽ lại, ô nhập trên một hàng như trang đăng ký. */
form[action*="login"] .loginCaptcha .middle {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

form[action*="login"] .loginCaptcha .captchaImg {
    flex: 0 0 auto;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r-sm);
}

form[action*="login"] .loginCaptcha .fa-refresh {
    flex: 0 0 auto;
    margin: 0 !important;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-muted);
}

form[action*="login"] .loginCaptcha .bsec {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 44px;
    border-radius: var(--btgtu-r);
}

/* Hàng nút: "Đăng nhập" đứng trước và rộng, "Thiết lập lại" là nút phụ. */
form[action*="login"] .login-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

form[action*="login"] .login-actions .btn {
    min-height: 48px;
    border-radius: var(--btgtu-r);
    font-weight: 600;
}

form[action*="login"] .login-actions .btn-primary {
    flex: 1 1 auto;
}

form[action*="login"] .login-actions .btn-default {
    flex: 0 0 auto;
}

/* Liên kết cuối thẻ (Đăng ký, Khôi phục mật khẩu...). */
.login-box #other_form {
    margin-top: 18px !important;
    padding-top: 14px;
    border-top: 1px solid var(--btgtu-line-soft);
}

.login-box #other_form a {
    font-weight: 600;
    color: var(--btgtu-blue-700);
}

.login-box #other_form .fa-caret-right {
    display: none;
}

@media (max-width: 767.98px) {
    #body .login-box > .panel > .panel-body {
        padding: 22px 18px 18px;
    }
}

/* ═══ 25b. ĐĂNG NHẬP DỰNG LẠI + BƯỚC NHẬP MÃ XÁC THỰC (30/09/2026) ═══════
   Chỉ dùng token --btgtu-*, bán kính 10/16 như mục 25. Không đổi tên ô hay
   lớp mà users.js dựa vào. Hai bước mã (.loginstep2 = mã ứng dụng 6 số,
   .loginstep3 = mã dự phòng 8 ký tự) cùng dùng khuôn .loginotp. */
.login-perks {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
    padding: 14px 16px;
    background: var(--btgtu-blue-100);
    border: 1px solid var(--btgtu-blue-200);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-blue-800);
    font-size: 14px;
    line-height: 1.4;
}

.login-perks li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.login-perks .fa {
    flex: 0 0 auto;
    color: var(--btgtu-blue);
}

/* Đang ở bước nhập mã thì bỏ phần giới thiệu, để người dùng chỉ thấy một việc. */
.login-box:has(.loginotp:not(.hidden)) .login-perks {
    display: none;
}

form[action*="login"] .login-actions .btn-primary {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue-700);
    color: #fff;
    transition: background-color .2s ease, transform .12s ease;
}

form[action*="login"] .login-actions .btn-primary:hover,
form[action*="login"] .login-actions .btn-primary:focus {
    background: var(--btgtu-blue-700);
}

form[action*="login"] .login-actions .btn:active {
    transform: translateY(1px) scale(.99);
}

form[action*="login"] .login-actions .btn-default {
    color: var(--btgtu-ink-2);
    border-color: var(--btgtu-line);
}

form[action*="login"] .login-actions .btn:focus-visible {
    outline: 3px solid rgba(184, 15, 30, .35);
    outline-offset: 2px;
}

form[action*="login"] .openid-btns {
    border-top: 1px solid var(--btgtu-line-soft);
}

/* --- Bước mã xác thực --- */
form[action*="login"] .loginotp {
    text-align: center;
}

form[action*="login"] .loginotp > label {
    display: block;
    max-width: 30em;
    margin: 0 auto 14px;
    color: var(--btgtu-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

form[action*="login"] .otp-badge {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 4px auto 14px;
    border-radius: 50%;
    background: var(--btgtu-blue-100);
    border: 1px solid var(--btgtu-blue-200);
    color: var(--btgtu-blue);
    font-size: 24px;
}

form[action*="login"] .otp-group {
    display: block;
}

form[action*="login"] .otp-group .input-group-addon {
    display: none;
}

form[action*="login"] .otp-group .otp-input {
    display: block;
    width: 100%;
    height: 60px;
    border-radius: var(--btgtu-r);
    text-align: center;
    font-family: var(--btgtu-font);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .38em;
    text-indent: .38em; /* bù khoảng cách chữ cuối để số nằm giữa ô */
    font-variant-numeric: tabular-nums;
    color: var(--btgtu-ink);
    background: var(--btgtu-bg);
    border: 1.5px solid var(--btgtu-line);
}

/* Chữ mờ gợi ý dùng cỡ thường, không kéo theo cỡ và khoảng cách của mã. */
form[action*="login"] .otp-input::placeholder {
    font-family: var(--btgtu-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-indent: 0;
    color: var(--btgtu-muted);
}

form[action*="login"] .otp-group .otp-input:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

form[action*="login"] .otp-switch a {
    display: inline-block;
    padding: 10px 14px;
    min-height: 44px;
    color: var(--btgtu-blue-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    form[action*="login"] .loginotp:not(.hidden) {
        animation: btgtu-otp-in .28s cubic-bezier(.16, 1, .3, 1);
    }
}

@keyframes btgtu-otp-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
    form[action*="login"] .otp-group .otp-input {
        font-size: 24px;
        letter-spacing: .3em;
        text-indent: .3em;
    }
}

/* ═══ 25c. Ô MÃ XÁC THỰC TÁCH TỪNG Ô (30/09/2026) ════════════════════════
   Đoạn script ở cuối users.js vẽ hàng ô; ô nhập thật (.otp-real) phủ lên,
   chữ và con trỏ trong suốt. Vẫn là ô thật nên dán, xóa lùi, tự điền mã và
   kiểm tra của users.js chạy như cũ. */
form[action*="login"] .otp-group.otp-wrap {
    position: relative;
}

form[action*="login"] .otp-boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

form[action*="login"] .otp-cell {
    flex: 0 1 50px;
    min-width: 0;
    height: 58px;
    display: grid;
    place-items: center;
    background: var(--btgtu-bg);
    border: 1.5px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-ink);
    font: 600 26px/1 var(--btgtu-font);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease;
}

form[action*="login"] .otp-cell.otp-active {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

form[action*="login"] .otp-group .otp-input.otp-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: transparent;
    caret-color: transparent;
    text-indent: 0;
    letter-spacing: 0;
    font-size: 16px; /* dưới 16px thì Safari iOS tự phóng to trang */
    cursor: text;
}

form[action*="login"] .otp-input.otp-real::placeholder,
form[action*="login"] .otp-input.otp-real::selection {
    color: transparent;
    background: transparent;
}

@media (max-width: 479.98px) {
    form[action*="login"] .otp-boxes {
        gap: 6px;
    }

    form[action*="login"] .otp-cell {
        height: 52px;
        font-size: 22px;
    }

    form[action*="login"] .otp-group .otp-input.otp-real {
        height: 52px;
    }
}

/* ═══ 26. ĐIỆN THOẠI: KHÔNG ZOOM, KHÔNG CUỘN NGANG (19/09/2026) ══════════
   Ba lớp, vì mỗi trình duyệt chỉ nghe một phần:
   1. Thẻ viewport (theme.php): maximum-scale=1, user-scalable=no. Chrome
      Android nghe; Safari iOS từ bản 10 BỎ QUA.
   2. touch-action: pan-x pan-y — chỉ cho kéo cuộn, không cho chụm hai ngón
      (pinch) và không cho chạm đúp để phóng to. Safari iOS có nghe. Vẫn giữ
      pan-x để bảng rộng bên trong khung .quiz-table-wrap còn vuốt ngang được;
      bản thân trang thì không cuộn ngang vì overflow-x: clip ở dưới.
   3. Ô nhập cỡ chữ 16px: dưới 16px thì Safari iOS tự phóng to trang khi chạm
      vào ô, và sau đó không thu lại được vì zoom đã bị khoá.
   Cử chỉ gesturestart riêng của Safari chặn thêm bằng script trong
   footer_extended.tpl. */
html,
body {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    max-width: 100%;
}

/* Trang chỉ cuộn dọc. overflow-x: clip (không tạo khung cuộn mới, không làm
   hỏng position: sticky); trình duyệt cũ chưa hiểu clip thì lùi về hidden. */
html,
body {
    overflow-x: hidden;
}

@supports (overflow-x: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

/* Nội dung soạn trong trình soạn thảo (ảnh, bảng, khung nhúng) không được
   rộng hơn màn hình. */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

.bodytext table,
.quiz-modal-body table,
.quiz-rules-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.bodytext,
.quiz-modal-body,
.quiz-page,
.quiz-home {
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
    }
}

/* .row của Bootstrap trong thanh menu có lề âm 5px, làm dải menu tràn 5px
   sang phải: trên điện thoại nút tìm kiếm bị cắt mép (overflow-x: clip cắt
   đi chứ không cuộn). */
#menusite > .container > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Dưới 1120px style.responsive.css kéo #menusite ra sát hai mép màn hình
   (bỏ qua phần đệm của .wraper): nút mở menu và ô tìm kiếm dán mép. Đệm lại
   ngay trên .menu-bar. */
@media (max-width: 1119.98px) {
    #menusite .menu-bar {
        padding: 0 16px;
    }
}

/* ═══ 27. PHÔNG CHỮ THỐNG NHẤT (20/10/2026) ═══════════════════════════════
   Phông nạp một lần ở font-be-vietnam-pro.css (theme.php), chỉ 400/500/600.
   Bootstrap đặt Helvetica cho tooltip/popover; nội dung dán từ Word hay mang
   font-family Times New Roman — ép về phông chung. */
.tooltip, .popover { font-family: var(--btgtu-font); }
.bodytext [style*="font-family"], .bodytext font[face],
.ck-content [style*="font-family"], .ck-content font[face] { font-family: inherit !important; }

/* Trần độ đậm (đợt PHONG-CHUNG 26/10/2026): Bootstrap đặt 700 cho các phần tử
   này; phông chỉ có tới 600 (font-be-vietnam-pro.css). */
b, strong, th, dt, label, optgroup, .alert-link, .close { font-weight: 600; }


/* ═══ 26. ĐỒNG BỘ CÁC TRANG THÀNH VIÊN CÒN LẠI (28/10/2026) ══════════════
   Khôi phục mật khẩu, Thông tin thành viên, Thiết lập tài khoản theo cùng
   khuôn trang đăng nhập/đăng ký (mục 22, 25): dải trống đồng, thẻ trắng
   bo 16px, ô nhập 44px bo 10px, nút chính đỏ rộng, liên kết cuối không có
   mũi tên. Chỉ token --btgtu-*. Không đổi tên ô hay lớp mà users.js dùng. */

/* Liên kết cuối trang (Đăng nhập, Đăng ký, Thoát...). */
.btgtu-users-links {
    margin-top: 18px !important;
    padding-top: 14px;
    border-top: 1px solid var(--btgtu-line-soft);
}

.btgtu-users-links a {
    font-weight: 600;
    color: var(--btgtu-blue-700);
}

.btgtu-users-links .fa-caret-right {
    display: none;
}

ul.btgtu-users-links {
    float: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin: 4px 0 0;
    padding-left: 0;
    border-top: 0;
}

ul.btgtu-users-links > li {
    float: none;
}

ul.btgtu-users-links > li > a {
    padding: 8px 14px;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    background: var(--btgtu-bg);
}

ul.btgtu-users-links > li > a:hover,
ul.btgtu-users-links > li > a:focus {
    background: var(--btgtu-blue-100);
    border-color: var(--btgtu-blue-200);
}

/* --- 26a. Khôi phục mật khẩu ------------------------------------------ */
.btgtu-lostpass form > .nv-info {
    margin-bottom: 18px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--btgtu-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.btgtu-lostpass form > .nv-info.error {
    padding: 12px 14px;
    background: var(--btgtu-bad-bg);
    border: 1px solid var(--btgtu-bad-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-bad);
}

.btgtu-lostpass form > .nv-info.success {
    padding: 12px 14px;
    background: var(--btgtu-ok-bg);
    border: 1px solid var(--btgtu-ok-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-ok);
}

.btgtu-lostpass .reg-label {
    display: block;
    margin-bottom: 6px;
    color: var(--btgtu-ink);
    font-weight: 600;
    font-size: 14px;
}

.btgtu-lostpass .form-group {
    margin-bottom: 16px;
}

.btgtu-lostpass .input-group-addon {
    min-width: 44px;
    background: var(--btgtu-soft);
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r) 0 0 var(--btgtu-r);
    color: var(--btgtu-muted);
}

.btgtu-lostpass .input-group .form-control {
    height: 44px;
    border-radius: 0 var(--btgtu-r) var(--btgtu-r) 0;
}

/* style.css dán ảnh dấu sao required.png vào nền ô nhập: bỏ. */
.btgtu-lostpass input.required {
    background-image: none;
}

.btgtu-lostpass .form-control:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

/* Bản gốc ghi cứng ô mã rộng 100px nên chữ gợi ý bị cắt ("Mã bảo m"). */
.btgtu-lostpass .lost-captcha {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ::before/::after của .clearfix thành phần tử flex và ăn thêm khoảng gap. */
.btgtu-lostpass .lost-captcha::before,
.btgtu-lostpass .lost-captcha::after {
    display: none;
}

.btgtu-lostpass .lost-captcha .captchaImg {
    flex: 0 0 auto;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r-sm);
}

.btgtu-lostpass .lost-captcha .fa-refresh {
    flex: 0 0 auto;
    margin: 0 !important;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    color: var(--btgtu-muted);
}

.btgtu-lostpass .lost-captcha .bsec {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    height: 44px;
    border-radius: var(--btgtu-r);
}

.btgtu-lostpass .lost-actions {
    margin: 22px 0 0 !important;
}

.btgtu-lostpass .lost-actions .btn {
    width: 100%;
    min-height: 48px;
    border-radius: var(--btgtu-r);
    font-weight: 600;
}

/* --- 26b. Thông tin thành viên + Thiết lập tài khoản ------------------ */
.btgtu-users {
    max-width: 880px;
    margin: 0 auto 32px;
}

.btgtu-users-card {
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg);
    box-shadow: 0 1px 2px rgba(70, 18, 22, .06), 0 12px 32px rgba(70, 18, 22, .08);
}

#body .btgtu-users > .btgtu-users-card > .panel-body {
    padding: 22px 26px;
}

/* Khối "ai đang đăng nhập": ảnh tròn bên trái, bốn dòng thông tin bên phải. */
.btgtu-users-who {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

.btgtu-users-who::before,
.btgtu-users-who::after {
    display: none;
}

/* #body + figure: một quy tắc của theme đặt figure margin auto (căn giữa). */
#body .btgtu-users-who > figure.avatar {
    flex: 0 0 auto;
    width: 104px;
    float: none;
    margin: 0;
    text-align: center;
}

.btgtu-users-who .avatar img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    padding: 0;
    border: 2px solid var(--btgtu-blue-100);
    border-radius: 50%;
    margin: 0 0 6px;
}

/* Nhãn "Thay đổi hình đại diện": bản gốc là dải xanh dán dưới ảnh. */
#body .btgtu-users-who figure.avatar figcaption {
    position: static;
    top: auto;
    margin: 0;
    width: auto;
    padding: 0;
    background: transparent !important;
    color: var(--btgtu-blue-700) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    opacity: 1;
}

.btgtu-users-who .avatar:hover figcaption {
    text-decoration: underline;
}

.btgtu-users-who .nv-list-item {
    margin: 0;
    padding: 0;
    color: var(--btgtu-muted);
}

.btgtu-users-who .nv-list-item li {
    padding: 2px 0;
    border: 0;
}

.btgtu-users-who .nv-list-item .fa-angle-right {
    display: none;
}

.btgtu-users-who .nv-list-item strong {
    color: var(--btgtu-ink);
}

/* Bảng hồ sơ: bỏ sọc hồng và khung ô, chỉ một vạch mảnh giữa các dòng. */
.btgtu-users-kv {
    margin-top: 16px;
    overflow: hidden;
}

.btgtu-users-kv > .table {
    margin: 0;
}

.btgtu-users-kv > .table > tbody > tr > td {
    padding: 11px 26px;
    border-top: 1px solid var(--btgtu-line-soft);
    background: transparent;
    vertical-align: top;
}

.btgtu-users-kv > .table > tbody > tr:first-child > td {
    border-top: 0;
}

.btgtu-users-kv > .table > tbody > tr > td:first-child {
    color: var(--btgtu-muted);
}

.btgtu-users-kv > .table > tbody > tr > td:last-child {
    color: var(--btgtu-ink);
    font-weight: 500;
}

.btgtu-users > .alert {
    border-radius: var(--btgtu-r);
}

/* Thiết lập tài khoản: danh sách chức năng hiện thẳng thành hàng thẻ. */
.btgtu-users-edit > .users-menu {
    margin: 0 0 16px !important;
    border-bottom: 0;
}

.btgtu-users-edit > .users-menu > li.dropdown {
    float: none;
}

.btgtu-users-edit > .users-menu #myTabEl {
    display: none;
}

.btgtu-users-edit > .users-menu #funcList {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.btgtu-users-edit > .users-menu #funcList > li > a {
    padding: 8px 14px;
    border: 1px solid var(--btgtu-line);
    border-radius: var(--btgtu-r);
    background: var(--btgtu-bg);
    color: var(--btgtu-ink-2);
    font-weight: 500;
    white-space: nowrap;
}

.btgtu-users-edit > .users-menu #funcList > li > a:hover,
.btgtu-users-edit > .users-menu #funcList > li > a:focus {
    background: var(--btgtu-blue-100);
    border-color: var(--btgtu-blue-200);
    color: var(--btgtu-blue-800);
}

.btgtu-users-edit > .users-menu #funcList > li.active > a {
    background: var(--btgtu-blue);
    border-color: var(--btgtu-blue-700);
    color: #fff;
}

.btgtu-users-edit > .tab-content {
    padding: 0;
    background: var(--btgtu-bg);
    border: 1px solid var(--btgtu-line-soft);
    border-radius: var(--btgtu-r-lg);
    box-shadow: 0 1px 2px rgba(70, 18, 22, .06), 0 12px 32px rgba(70, 18, 22, .08);
}

.btgtu-users-edit > .tab-content > .tab-pane {
    padding: 26px 28px 10px;
    background: transparent;
    border: 0;
}

/* Biểu mẫu ngang của lõi (nhãn canh phải cột 6/24): xếp nhãn lên trên ô,
   khung tối đa 560px. Cột có push/pull bị đưa về vị trí tự nhiên. */
.btgtu-users-edit .form-horizontal {
    max-width: 560px;
}

.btgtu-users-edit .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
}

.btgtu-users-edit .form-horizontal .form-group > [class*="col-"] {
    float: none;
    width: 100%;
    left: auto;
    right: auto;
    padding-left: 0;
    padding-right: 0;
}

.btgtu-users-edit .form-horizontal .control-label,
.btgtu-users-edit .form-horizontal .form-group > .text-right {
    display: block;
    margin-bottom: 6px;
    padding-top: 0;
    text-align: left;
    color: var(--btgtu-ink);
    font-weight: 600;
    font-size: 14px;
}

.btgtu-users-edit .form-control {
    min-height: 44px;
    border-color: var(--btgtu-line);
    border-radius: var(--btgtu-r);
}

.btgtu-users-edit textarea.form-control {
    min-height: 88px;
}

.btgtu-users-edit .form-control:focus {
    border-color: var(--btgtu-blue);
    box-shadow: 0 0 0 3px rgba(184, 15, 30, .15);
}

.btgtu-users-edit input.required,
.btgtu-users-edit select.required,
.btgtu-users-edit textarea.required {
    background-image: none;
}

.btgtu-users-edit .form-detail > .form-group:last-child > [class*="col-"]:empty {
    display: none;
}

.btgtu-users-edit .btn {
    border-radius: var(--btgtu-r);
}

.btgtu-users-edit form .btn-primary,
.btgtu-users-edit form input[type="submit"] {
    min-height: 44px;
    padding-left: 22px;
    padding-right: 22px;
    font-weight: 600;
}

.btgtu-users-edit form .btn-default {
    min-height: 44px;
}

.btgtu-users-edit > .tab-content > .tab-pane > form > .nv-info {
    margin-bottom: 18px;
    border-radius: var(--btgtu-r);
}

@media (max-width: 767.98px) {
    #body .btgtu-users > .btgtu-users-card > .panel-body {
        padding: 18px;
    }

    .btgtu-users-who {
        gap: 14px;
        align-items: flex-start;
    }

    /* .table-responsive của Bootstrap ép nowrap nên giá trị dài bị cắt mép. */
    .btgtu-users-kv > .table,
    .btgtu-users-kv > .table > tbody,
    .btgtu-users-kv > .table > tbody > tr {
        display: block;
        width: 100%;
    }

    .btgtu-users-kv > .table > tbody > tr > td {
        display: block;
        padding: 0 18px;
        border-top: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .btgtu-users-kv > .table > tbody > tr > td:first-child {
        padding-top: 10px;
        font-size: 13px;
    }

    .btgtu-users-kv > .table > tbody > tr > td:last-child {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--btgtu-line-soft);
    }

    .btgtu-users-kv > .table > tbody > tr:last-child > td:last-child {
        border-bottom: 0;
    }

    .btgtu-users-edit > .tab-content > .tab-pane {
        padding: 20px 18px 6px;
    }
}

/* ── PORTAL GĐ3: xác minh bậc hai chống công cụ tự động (human-sig.js, modules/users/antibot.btgtu.php) ──
   Khung .nvab-stepup do JS chèn ngay trước nút gửi khi máy chủ đòi xác minh thêm
   (đăng ký, đăng nhập, bắt đầu lượt thi). Chép từ themes/themequiz/css/custom.css. */
.nvab-stepup {
    display: flex;
    justify-content: center;
    margin: 12px 0;
}

.nvab-stepup[hidden] {
    display: none;
}

.nvab-img {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.nvab-img img {
    border: 1px solid #e4e4e8;
    border-radius: var(--btgtu-r-sm, 4px);
    background: #fff;
}

.nvab-img .nvab-img-refresh {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e4e4e8;
    border-radius: var(--btgtu-r-sm, 4px);
    background: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.nvab-img .nvab-img-input {
    width: 140px;
    font-size: 18px;
    letter-spacing: .12em;
    text-transform: uppercase;
}