/**
 * NukeViet Content Management System
 * @version 4.x
 * @author VINADES.,JSC <contact@vinades.vn>
 * @copyright (C) 2009-2021 VINADES.,JSC. All rights reserved
 * @license GNU/GPL version 2 or any later version
 * @see https://github.com/nukeviet The NukeViet CMS GitHub project
 */

/* Các tùy chỉnh CSS của giao diện nên để vào đây */

/* ==========================================================================
   Dự án ST-Viet-Lao — giao diện cổng vietlao.gdnn-gdtx.edu.vn (bản thiết kế lại 19/10/2026).
   Ba phương án nhận diện của trang học: màu lấy NGUYÊN từ packages/ui/src/brand/themes.ts (chế độ sáng); --st-deep /
   --st-deeper là sắc đậm hơn của màu chính (thanh trên cùng, chân trang). Mặc định: Hoa ban Điện Biên (C1, 21/9/2026).
   Người xem đổi phương án ở chân trang (custom.js đặt data-brand trên thẻ <html>).
   Nguyên tắc: một cột rộng, chữ 16px dòng thoáng, khối là thẻ trắng bo góc + bóng nhẹ, chuyển động ngắn (tắt khi người
   dùng chọn giảm chuyển động). Bản gốc: E:\vietlao.gdnn-gdtx.edu.vn\tools\giao-dien\custom.css (ADR-0020) — nâng cấp
   NukeViet mà tệp bị ghi đè thì chạy lại tools\giao-dien\ap-dung.ps1.
   ========================================================================== */

:root,
html[data-brand='hoaban'] {
    --st-primary: #3a3d98;
    --st-primary-contrast: #ffffff;
    --st-secondary: #1a6b45;
    --st-deep: #282a6e;
    --st-deeper: #1d1e4f;
    --st-surface: #fafafd;
    --st-surface2: #ededf6;
    --st-text: #1b1b2a;
    --st-muted: #4c4c63;
    --st-border: #74748c;
    --st-font: 'Phetsarath OT Web', 'ST Lao Du Phong', 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif;
}

html[data-brand='champa'] {
    --st-primary: #a8451c;
    --st-primary-contrast: #ffffff;
    --st-secondary: #9c2f60;
    --st-deep: #7a3013;
    --st-deeper: #55210d;
    --st-surface: #fffbf5;
    --st-surface2: #f7eee3;
    --st-text: #2a1f17;
    --st-muted: #5b4a3d;
    --st-border: #8a7566;
    --st-font: 'Phetsarath OT Web', 'ST Lao Du Phong', 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif;
}

html[data-brand='mekong'] {
    --st-primary: #0b5f6b;
    --st-primary-contrast: #ffffff;
    --st-secondary: #8a4b00;
    --st-deep: #08454e;
    --st-deeper: #052f35;
    --st-surface: #f7fafa;
    --st-surface2: #e8f0f1;
    --st-text: #16262b;
    --st-muted: #486066;
    --st-border: #6b8288;
    --st-font: 'Phetsarath OT Web', 'ST Lao Du Phong', Inter, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Thước đo dùng chung cho cả ba phương án. */
:root {
    --st-card: #ffffff;
    --st-line: rgba(20, 20, 50, 0.1);
    --st-r: 14px;
    --st-r-sm: 10px;
    --st-shadow: 0 1px 2px rgba(20, 20, 50, 0.05), 0 6px 22px rgba(20, 20, 50, 0.06);
    --st-shadow-hover: 0 2px 4px rgba(20, 20, 50, 0.06), 0 12px 32px rgba(20, 20, 50, 0.1);
    --st-ease: 160ms ease;
}

/* ---------- Nền, chữ ---------- */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---------- Phông chữ Lào chuẩn: Phetsarath OT (19/10/2026) ----------
   Phông chuẩn quốc gia của Lào (Bộ Bưu chính Viễn thông Lào, www.phetsarath.gov.la), giấy phép SIL OFL 1.1 — tệp
   ../fonts/phetsarath-ot/OFL.txt. Bốn kiểu NGUYÊN BẢN (thường, đậm, nghiêng, đậm nghiêng), do ap-dung.ps1 chép từ
   du-lieu-goc và kiểm SHA-256. Tên họ phông riêng «Phetsarath OT Web» để máy đã cài một bản Phetsarath OT khác vẫn hiện
   đúng bản này. unicode-range CHỈ khối chữ Lào (+ U+200B): phông thiếu ă, đ, ơ, ư và nhiều dấu thanh tiếng Việt, nên
   chữ Việt / Latin luôn đi sang phông kế tiếp trong --st-font; trang không có chữ Lào thì trình duyệt không tải tệp nào.
   Ba kiểu đậm / nghiêng thiếu 6 chữ hiếm (U+0EDE–0EDF, U+0EE0–0EE3, chữ cho tiếng Khơ-mú) → rơi sang Noto Sans Lao. */
@font-face {
    font-family: 'Phetsarath OT Web';
    src: url('../fonts/phetsarath-ot/PhetsarathOT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+200B;
}

@font-face {
    font-family: 'Phetsarath OT Web';
    src: url('../fonts/phetsarath-ot/PhetsarathOT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+200B;
}

@font-face {
    font-family: 'Phetsarath OT Web';
    src: url('../fonts/phetsarath-ot/PhetsarathOT-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+200B;
}

@font-face {
    font-family: 'Phetsarath OT Web';
    src: url('../fonts/phetsarath-ot/PhetsarathOT-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+200B;
}

/* Phetsarath OT KHÔNG có dấu chấm tròn ◌ (U+25CC) mà sách dùng để chỉ vị trí nguyên âm («◌ິ»). Họ phông «ST Lao Du Phong»
   (= Noto Sans Lao, SIL OFL 1.1, ../fonts/noto-sans-lao/OFL.txt) đứng NGAY SAU Phetsarath trong mọi chồng phông, chỉ phủ khối
   chữ Lào + ◌: cụm «◌ + dấu» Phetsarath không vẽ được thì CẢ cụm sang Noto Sans Lao (dấu nằm đúng chỗ trên ◌) thay vì tách
   ◌ sang phông máy (19/10/2026). Mọi chữ Lào khác vẫn là Phetsarath OT. */
@font-face {
    font-family: 'ST Lao Du Phong';
    src: url('../fonts/noto-sans-lao/NotoSansLao_400Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+25CC;
}

@font-face {
    font-family: 'ST Lao Du Phong';
    src: url('../fonts/noto-sans-lao/NotoSansLao_700Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0E80-0EFF, U+25CC;
}

/* Chữ Lào: Phetsarath OT trước, Noto Sans Lao (đi kèm mô-đun hoc-tap) và phông Lào của máy xem làm dự phòng. Chữ Lào
   cao (dấu trên + dấu dưới) → dòng thoáng hơn chữ Việt.
   KHÔNG dùng «:lang(lo)» trần: trên trang /lo/ nó khớp MỌI phần tử, kể cả biểu tượng (.fa, NukeVietIcons) → biểu tượng
   thành ô vuông (19/10/2026). Chỉ đặt ở <body> của trang tiếng Lào (con cháu thừa hưởng, biểu tượng giữ phông riêng)
   và ở phần tử có thuộc tính lang="lo" trong trang tiếng Việt. */
body:lang(lo),
body [lang='lo'] {
    font-family: 'Phetsarath OT Web', 'ST Lao Du Phong', 'Noto Sans Lao', 'Phetsarath OT', 'Leelawadee UI', 'Lao UI', var(--st-font);
    line-height: 1.8;
}

/* Chữ Lào không có chữ hoa và dấu nằm trên / dưới phụ âm: giãn chữ (letter-spacing) làm lệch dấu → tắt trong trang tiếng
   Lào và trong mọi phần tử lang="lo". */
body:lang(lo) *,
body [lang='lo'] {
    letter-spacing: normal !important;
}

body {
    background-color: var(--st-surface);
    background-image: linear-gradient(180deg, var(--st-surface2) 0, var(--st-surface) 520px);
    background-repeat: no-repeat;
    color: var(--st-text);
    font-family: var(--st-font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3 {
    color: var(--st-text);
    font-family: var(--st-font);
    line-height: 1.3;
}

a,
a:link,
a:visited {
    color: var(--st-primary);
    transition: color var(--st-ease), background-color var(--st-ease);
}

a:hover,
a:focus {
    color: var(--st-deep);
}

:focus-visible {
    outline: 3px solid var(--st-primary);
    outline-offset: 2px;
}

::selection {
    background: var(--st-primary);
    color: var(--st-primary-contrast);
}

/* ---------- Đầu trang ---------- */

/* Ảnh nền "bầu trời" mặc định của NukeViet: bỏ hẳn (để lại một dải màu cắt ngang khi trang dài). */
.site-banner {
    display: none !important;
}

.section-header-bar {
    background-image: none;
    background-color: var(--st-deeper);
    font-size: 13px;
}

.section-header-bar,
.section-header-bar a,
.section-header-bar a:link,
.section-header-bar a:visited {
    color: rgba(255, 255, 255, 0.86);
}

.section-header-bar a:hover {
    color: #fff;
}

.section-header {
    background-color: var(--st-card);
}

#header .logo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 18px 10px 18px 0;
}

#header .logo img {
    max-height: 56px;
    transition: transform var(--st-ease);
}

#header .logo a:hover img {
    transform: scale(1.03);
}

#header .logo .site_description {
    color: var(--st-muted);
    font-family: var(--st-font);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid var(--st-surface2);
}

/* ---------- Thanh menu chính: trắng, bám đỉnh khi cuộn ---------- */

.section-nav {
    background-color: var(--st-card);
    border-top: 1px solid var(--st-line);
    box-shadow: 0 1px 0 var(--st-line), 0 6px 16px rgba(20, 20, 50, 0.04);
    position: relative;
    z-index: 1020;
}

#menusite .bg.box-shadow,
.second-nav .bg {
    background: transparent !important;
    background-image: none !important;
    border-radius: 0;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#menusite .navbar-default {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    min-height: 0;
}

#menusite .navbar-default .navbar-nav > li > a {
    position: relative;
    background: transparent;
    color: var(--st-text);
    font-weight: 600;
    font-size: 15px;
    padding: 16px 16px;
    transition: color var(--st-ease), background-color var(--st-ease);
}

#menusite .navbar-default .navbar-nav > li > a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 8px;
    height: 3px;
    border-radius: 3px;
    background: var(--st-primary);
    transform: scaleX(0);
    transition: transform var(--st-ease);
}

#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: transparent !important;
    color: var(--st-primary) !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: transparent !important;
    color: var(--st-primary) !important;
}

#menusite .navbar-default .navbar-nav > li > a:hover::after,
#menusite .navbar-default .navbar-nav > .active > a::after {
    transform: scaleX(1);
}

/* Nút "Vào học": viên thuốc màu phụ của phương án. */
#menusite .navbar-default .navbar-nav > li > a[href*='hoc-tap'] {
    background: var(--st-secondary) !important;
    color: #fff !important;
    border-radius: 999px;
    margin: 9px 10px;
    padding: 7px 20px;
    box-shadow: 0 4px 12px rgba(20, 20, 50, 0.15);
}

#menusite .navbar-default .navbar-nav > li > a[href*='hoc-tap']::after {
    display: none;
}

#menusite .navbar-default .navbar-nav > li > a[href*='hoc-tap']:hover,
#menusite .navbar-default .navbar-nav > li > a[href*='hoc-tap']:focus {
    filter: brightness(0.92);
}

#menusite .dropdown-menu {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r-sm);
    box-shadow: var(--st-shadow-hover);
    padding: 6px;
}

#menusite .dropdown-menu > li > a {
    border-radius: 8px;
    padding: 8px 12px;
}

@media (min-width: 768px) {
    /* Bám đỉnh khi cuộn — chỉ trên màn hình rộng (điện thoại cần chỗ đọc). */
    .section-nav {
        position: sticky;
        top: 0;
    }
}

@media (max-width: 767.98px) {
    #header .logo {
        flex-direction: column;
        justify-content: center;
        padding: 14px 10px;
    }

    #header .logo img {
        max-height: 48px;
    }

    #header .logo .site_description {
        border-left: 0;
        padding-left: 0;
        font-size: 14px;
        text-align: center;
    }

    /* Điện thoại: giữ cách của giao diện gốc — nút menu nằm trên dải trên cùng (thanh menu đặt tuyệt đối theo trang),
       nên thanh menu KHÔNG được làm khung định vị (position) ở khổ này. */
    .section-nav {
        position: static;
        border-top: 0;
        box-shadow: none;
        background: transparent;
    }

    #menusite .navbar-toggle,
    #menusite .navbar-toggle:hover,
    #menusite .navbar-toggle:focus {
        border-radius: var(--st-r-sm);
        border-color: var(--st-primary);
        background-color: var(--st-primary);
        color: var(--st-primary-contrast);
    }

    #menusite .navbar-collapse {
        top: 50px;
        background: var(--st-card);
        border-radius: 0 0 var(--st-r) var(--st-r);
        box-shadow: var(--st-shadow-hover);
    }

    #menusite .navbar-nav {
        margin: 0;
        padding: 6px;
    }

    #menusite .navbar-default .navbar-nav > li > a {
        background-color: transparent;
        color: var(--st-text);
        border-radius: var(--st-r-sm);
        padding: 12px 14px;
    }

    #menusite .navbar-default .navbar-nav > li > a::after {
        display: none;
    }

    #menusite .navbar-default .navbar-nav > li > a:hover,
    #menusite .navbar-default .navbar-nav > li > a:focus,
    #menusite .navbar-default .navbar-nav > .active > a,
    #menusite .navbar-default .navbar-nav > .active > a:hover,
    #menusite .navbar-default .navbar-nav > .active > a:focus,
    #menusite .navbar-default .navbar-nav > .open > a {
        background: var(--st-surface2) !important;
        color: var(--st-primary) !important;
    }

    #menusite .navbar-default .navbar-nav > li > a[href*='hoc-tap'] {
        margin: 6px 0;
        text-align: center;
    }
}

/* ---------- Dải đường dẫn trang + ô tìm kiếm ---------- */

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

.third-nav {
    margin: 14px 0 10px;
}

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

.third-nav .bg {
    background: transparent;
    padding: 0;
}

.third-nav .current-time {
    display: none;
}

.breadcrumbs li {
    margin: 0 4px 0 0;
}

.breadcrumbs a,
.show-subs-breadcrumbs {
    background: transparent;
    color: var(--st-muted);
    padding: 7px 2px;
    font-size: 14px;
}

.breadcrumbs a:hover,
.show-subs-breadcrumbs:hover {
    background: transparent;
    color: var(--st-primary);
}

.breadcrumbs a::before {
    display: none;
}

.breadcrumbs a::after,
.show-subs-breadcrumbs::after {
    content: '›';
    position: static;
    display: inline-block;
    border: 0;
    margin: 0 0 0 8px;
    padding: 0;
    color: var(--st-border);
}

.breadcrumbs li:last-child a {
    color: var(--st-text);
    font-weight: 600;
}

.breadcrumbs li:last-child a::after {
    content: '';
    margin: 0;
}

/* Ô tìm kiếm dời lên hàng thanh menu (custom.js, xepOTimKiem — 19/10/2026): gọn bên phải, rộng ra khi đang gõ. */
#menusite .bg {
    display: flex;
    align-items: center;
}

#menusite .bg > .navbar {
    flex: 1 1 auto;
    min-width: 0;
}

.headerSearch.st-tim-menu {
    float: none;
    flex: 0 0 auto;
    width: 230px;
    padding: 0;
    margin-left: 12px;
    transition: width var(--st-ease);
}

.headerSearch.st-tim-menu:focus-within {
    width: 300px;
}

.headerSearch.st-tim-menu .form-control,
.headerSearch.st-tim-menu .btn-info {
    height: 38px;
}

.headerSearch.st-tim-menu .form-control {
    background: var(--st-surface);
}

.headerSearch.st-tim-dt {
    float: none;
    width: auto;
    padding: 10px 6px 4px;
}

/* Trang không có đường dẫn trang (trang chủ): dòng đường dẫn chỉ còn trống → ẩn. Trang khác: đường dẫn chiếm hết hàng. */
html.st-khong-duong-dan .third-nav {
    display: none;
}

html.st-khong-duong-dan #body {
    padding-top: 22px;
}

html.st-tim-da-chuyen .third-nav .col-sm-18,
html.st-tim-da-chuyen .third-nav .col-md-18 {
    width: 100%;
}

.headerSearch .form-control {
    height: 40px;
    border-radius: 999px 0 0 999px;
    border-color: var(--st-line);
    box-shadow: none;
    padding-left: 16px;
    background: var(--st-card);
}

.headerSearch .btn-info {
    height: 40px;
    border-radius: 0 999px 999px 0;
    background-color: var(--st-primary);
    border-color: var(--st-primary);
    color: var(--st-primary-contrast);
    padding: 0 16px;
}

.headerSearch .btn-info:hover,
.headerSearch .btn-info:focus {
    background-color: var(--st-deep);
    border-color: var(--st-deep);
}

/* ---------- Khối, thẻ, nút, ô nhập ---------- */

.panel {
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    box-shadow: var(--st-shadow);
    -webkit-box-shadow: var(--st-shadow);
    overflow: hidden;
    margin-bottom: 22px;
}

.panel-heading {
    border-top-left-radius: var(--st-r);
    border-top-right-radius: var(--st-r);
}

.panel-body {
    padding: 22px 26px;
}

.panel-primary {
    border-color: var(--st-line);
}

.panel-primary > .panel-heading {
    background-color: var(--st-primary);
    border-color: var(--st-primary);
    color: var(--st-primary-contrast);
}

.panel-default > .panel-heading {
    background: var(--st-surface);
    border-bottom: 1px solid var(--st-line);
    color: var(--st-text);
    font-weight: 600;
}

.btn {
    border-radius: var(--st-r-sm);
    font-weight: 600;
    transition: background-color var(--st-ease), border-color var(--st-ease), box-shadow var(--st-ease), transform var(--st-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
.btn-primary:visited {
    background-color: var(--st-primary);
    border-color: var(--st-primary);
    color: var(--st-primary-contrast);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--st-deep);
    border-color: var(--st-deep);
    color: var(--st-primary-contrast);
    box-shadow: 0 6px 16px rgba(20, 20, 50, 0.18);
}

.form-control {
    border-radius: var(--st-r-sm);
    border-color: rgba(20, 20, 50, 0.18);
    box-shadow: none;
    transition: border-color var(--st-ease), box-shadow var(--st-ease);
}

.form-control:focus {
    border-color: var(--st-primary);
    box-shadow: 0 0 0 3px rgba(58, 61, 152, 0.15);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-primary) 18%, transparent);
}

.input-group-addon {
    background: var(--st-surface);
    border-color: rgba(20, 20, 50, 0.18);
}

.header-nav a.button,
.socialList li a {
    background-color: var(--st-primary);
}

.header-nav a.button.active,
.header-nav a.button:hover,
.header-nav a.button:focus {
    background-color: var(--st-deep);
}

/* Trang bài viết (Giới thiệu, văn bản): rộng HẾT khung trang, thẳng hàng với đầu trang và thanh menu (chủ dự án yêu
   cầu 19/10/2026 — trước đó giới hạn 860px nên hẹp hơn đầu trang). */
.page.panel {
    max-width: none;
}

.page .panel-body {
    padding: 34px 40px 40px;
}

.page h1.title {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 0;
}

.page .hometext {
    font-size: 18px;
    font-weight: 400 !important;
    color: var(--st-muted);
    line-height: 1.6;
}

.page .hometext strong,
.page .hometext b {
    font-weight: 400;
}

.bodytext,
.bodytext p,
.bodytext li {
    font-size: 16px;
    line-height: 1.75;
}

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

    .page h1.title {
        font-size: 24px;
    }

    .page .hometext {
        font-size: 17px;
    }
}

/* ---------- Bài giới thiệu dự án (trang chủ) ---------- */

.st-gioi-thieu h2 {
    position: relative;
    color: var(--st-text);
    font-size: 23px;
    font-weight: 700;
    margin: 36px 0 12px;
    padding-left: 16px;
}

.st-gioi-thieu h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 5px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--st-primary), var(--st-secondary));
}

/* style.css của NukeViet đặt danh sách trong .bodytext bằng !important — phải ghi đè cùng mức. */
.bodytext .st-gioi-thieu ul,
.st-gioi-thieu ul {
    padding-left: 22px !important;
}

.bodytext .st-gioi-thieu li,
.st-gioi-thieu li {
    margin-bottom: 6px !important;
}

.st-gioi-thieu li::marker {
    color: var(--st-primary);
}

/* Khối mở đầu: lời mời + hai nút. Canh GIỮA cho cân (chủ dự án yêu cầu 19/10/2026): tiêu đề tự chia dòng đều
   (text-wrap: balance — không để một chữ lẻ xuống dòng), đoạn mô tả giới hạn bề rộng, hai vầng sáng đối xứng theo đường chéo. */
.st-gioi-thieu .st-mo-dau {
    position: relative;
    overflow: hidden;
    margin: 6px 0 24px;
    padding: 36px 28px 38px;
    text-align: center;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, var(--st-primary) 0%, var(--st-deep) 62%, var(--st-deeper) 100%);
    box-shadow: 0 14px 36px rgba(20, 20, 50, 0.22);
}

.st-gioi-thieu .st-mo-dau::before,
.st-gioi-thieu .st-mo-dau::after {
    /* Hai vầng sáng mềm ở hai góc đối nhau — chỉ trang trí. */
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.st-gioi-thieu .st-mo-dau::after {
    right: -80px;
    top: -80px;
}

.st-gioi-thieu .st-mo-dau::before {
    left: -90px;
    bottom: -110px;
    opacity: 0.7;
}

/* Chữ và nút nằm trên vầng sáng. */
.st-gioi-thieu .st-mo-dau > * {
    position: relative;
    z-index: 1;
}

.st-gioi-thieu .st-mo-dau .st-nhan {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    margin: 0 0 16px;
}

/* Tiêu đề trên MỘT dòng ở màn rộng (chủ dự án yêu cầu 19/10/2026): không giới hạn bề rộng, cỡ chữ co theo khung (tối đa
   26px); màn hẹp không đủ chỗ thì tự xuống dòng, chia đều hai dòng (text-wrap: balance). */
.st-gioi-thieu .st-mo-dau .st-loi-moi {
    font-size: clamp(20px, 2.05vw, 26px);
    line-height: 1.3;
    font-weight: 700;
    max-width: none;
    margin: 0 auto 14px;
    color: #fff;
    text-wrap: balance;
    letter-spacing: -0.005em;
}

.st-gioi-thieu .st-mo-dau p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.65;
    max-width: 860px;
    margin: 0 auto 24px;
    text-wrap: balance;
}

.st-gioi-thieu .st-hang-nut {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.st-gioi-thieu .st-nut-vao-hoc,
.st-gioi-thieu .st-nut-phu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 24px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--st-ease), box-shadow var(--st-ease), background-color var(--st-ease);
}

.st-gioi-thieu .st-nut-vao-hoc,
.st-gioi-thieu .st-nut-vao-hoc:link,
.st-gioi-thieu .st-nut-vao-hoc:visited {
    background-color: #fff;
    color: var(--st-primary) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.st-gioi-thieu .st-nut-vao-hoc:hover,
.st-gioi-thieu .st-nut-vao-hoc:focus {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
    color: var(--st-deep) !important;
}

.st-gioi-thieu .st-nut-phu,
.st-gioi-thieu .st-nut-phu:link,
.st-gioi-thieu .st-nut-phu:visited {
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
}

.st-gioi-thieu .st-nut-phu:hover,
.st-gioi-thieu .st-nut-phu:focus {
    background: rgba(255, 255, 255, 0.12);
}

.st-gioi-thieu .st-mo-dau :focus-visible {
    outline-color: #fff;
}

/* Bốn thẻ đặc điểm. */
.bodytext .st-gioi-thieu .st-luoi-the,
.st-gioi-thieu .st-luoi-the {
    display: grid;
    /* Bốn thẻ: một hàng 4 trên màn hình rộng, 2 × 2 ở khổ vừa, một cột trên điện thoại — không bao giờ lẻ 3 + 1. */
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin: 0 0 8px !important;
    padding: 0 !important;
    list-style: none !important;
}

.bodytext .st-gioi-thieu .st-luoi-the li,
.st-gioi-thieu .st-luoi-the li {
    margin: 0 !important;
    padding: 18px 18px 16px;
    border: 1px solid var(--st-line);
    border-radius: var(--st-r);
    background: var(--st-surface);
    transition: transform var(--st-ease), box-shadow var(--st-ease), border-color var(--st-ease);
}

@media (min-width: 576px) {
    .bodytext .st-gioi-thieu .st-luoi-the,
    .st-gioi-thieu .st-luoi-the {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .bodytext .st-gioi-thieu .st-luoi-the,
    .st-gioi-thieu .st-luoi-the {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.st-gioi-thieu .st-luoi-the li::marker {
    content: none;
}

.st-gioi-thieu .st-luoi-the li:hover {
    transform: translateY(-2px);
    box-shadow: var(--st-shadow);
    border-color: transparent;
}

.st-gioi-thieu .st-luoi-the .st-bieu-tuong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--st-surface2);
    color: var(--st-primary);
    font-size: 18px;
    margin-bottom: 10px;
}

.st-gioi-thieu .st-luoi-the strong {
    display: block;
    font-size: 16px;
    margin-bottom: 4px;
}

.st-gioi-thieu .st-luoi-the span.st-mo-ta {
    display: block;
    color: var(--st-muted);
    font-size: 15px;
    line-height: 1.55;
}

.st-gioi-thieu .st-noi-bat {
    border-left: 4px solid var(--st-secondary);
    background-color: var(--st-surface2);
    padding: 12px 16px;
    border-radius: 0 var(--st-r-sm) var(--st-r-sm) 0;
}

.st-gioi-thieu .st-mau {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: -2px;
    margin-right: 4px;
}

@media (max-width: 767.98px) {
    .st-gioi-thieu .st-mo-dau {
        padding: 26px 18px 28px;
        border-radius: 16px;
    }

    .st-gioi-thieu .st-mo-dau .st-loi-moi {
        font-size: 22px;
    }

    .st-gioi-thieu .st-hang-nut a {
        flex: 1 1 100%;
        justify-content: center;
    }

    .st-gioi-thieu h2 {
        font-size: 20px;
    }
}

/* ---------- Văn bản pháp lý (bản nháp) ---------- */

.st-nhac-quyen-rieng-tu,
.st-luu-y-gop-y {
    font-size: 13px;
    color: var(--st-muted);
    margin: 10px 0 0;
}

.st-van-ban h2 {
    font-size: 20px;
    margin-top: 28px;
}

.st-van-ban .st-canh-bao {
    border-left: 4px solid #8a5300;
    background-color: #fbf0df;
    color: #2a1f17;
    padding: 12px 16px;
    border-radius: 0 var(--st-r-sm) var(--st-r-sm) 0;
}

/* ---------- Khối cột (còn ở các trang tin) ---------- */

html .metismenu .sidebar-nav {
    background: var(--st-primary);
    background-image: linear-gradient(to right, var(--st-secondary) 4px, var(--st-primary) 4px);
    border-radius: var(--st-r-sm);
    overflow: hidden;
}

html .metismenu .sidebar-nav ul a:hover,
html .metismenu .sidebar-nav ul a:focus,
html .metismenu .sidebar-nav ul a:active {
    background-image: linear-gradient(to right, var(--st-secondary) 4px, var(--st-deep) 4px);
}

html .metismenu .sidebar-nav ul ul a {
    background-color: var(--st-deep);
}

html .metismenu .sidebar-nav ul ul a:hover,
html .metismenu .sidebar-nav ul ul a:focus,
html .metismenu .sidebar-nav ul ul a:active {
    background-color: var(--st-deeper);
}

/* ---------- Chân trang ---------- */

#footer {
    min-height: 0;
    font-size: 14px;
    margin-top: 36px;
    padding: 40px 0 18px;
    background-color: var(--st-deeper);
    background-image: linear-gradient(180deg, var(--st-deep) 0, var(--st-deeper) 100%);
    border-top: 0;
    border-bottom: 0;
}

#footer,
#footer a {
    color: rgba(255, 255, 255, 0.82);
}

#footer a:hover,
#footer a:focus {
    color: #fff;
}

#footer .h3 {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#footer .menu li a {
    border-bottom: 0 !important;
}

#footer .copyright,
#footer .copyright span a {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Hai nút nhỏ «QR-code», «Đang truy cập» của NukeViet: viên nhạt, không nền xanh chói. */
#footer .qr-code-wraper .btn {
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none;
    padding: 3px 10px;
    font-weight: 500;
}

#footer .qr-code-wraper .btn:hover,
#footer .qr-code-wraper .btn:focus {
    background: rgba(255, 255, 255, 0.18);
}

.footerNav2 {
    background-color: var(--st-deeper);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0;
}

.footerNav2 .theme-change a,
.footerNav2 .theme-change span {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.86);
    border-radius: 50%;
}

.footerNav2 .bttop a {
    background-color: var(--st-primary);
    transition: transform var(--st-ease);
}

.footerNav2 .bttop a:hover {
    transform: translateY(-2px);
}

/* Ô chọn phương án nhận diện — góc trên cùng bên phải, trong thanh màu đậm đầu trang (custom.js themOChon, 19/10/2026). */
.section-header-bar .wraper {
    position: relative;
}

.st-brand-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
}

/* Khối góc trên phải: nút ngôn ngữ + ô chọn giao diện (custom.js themOChon). */
.st-dau-phai {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
}

.st-chon-ngon-ngu {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    overflow: hidden;
}

.st-chon-ngon-ngu a,
.st-chon-ngon-ngu a:link,
.st-chon-ngon-ngu a:visited {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
}

.st-chon-ngon-ngu a:hover,
.st-chon-ngon-ngu a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Nhãn dài «Tiếng Việt / ພາສາລາວ»; điện thoại hiện nhãn ngắn «VI / ລາວ». */
.st-chon-ngon-ngu .ngan {
    display: none;
}

@media (max-width: 767.98px) {
    .st-chon-ngon-ngu .ngan {
        display: inline;
    }
}

.st-chon-ngon-ngu a.dang-chon,
.st-chon-ngon-ngu a.dang-chon:hover {
    background: #fff;
    color: var(--st-deeper);
}

.st-brand-picker label {
    margin: 0;
    font-weight: 600;
}

.st-brand-picker select {
    color: var(--st-text);
    background-color: var(--st-card);
    border: 0;
    border-radius: 999px;
    height: 26px;
    padding: 0 10px;
    font-size: 13px;
    cursor: pointer;
}

.st-brand-picker select:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Điện thoại: thanh trên cùng đã có nút ☰ (trái) và nút liên hệ (phải) → ô chọn đứng ngay trái nút liên hệ, nhãn ẩn
   (vẫn đọc được bằng trình đọc màn hình). */
@media (max-width: 767.98px) {
    .st-dau-phai {
        right: 62px;
        gap: 8px;
    }

    .st-chon-ngon-ngu a,
    .st-chon-ngon-ngu a:link,
    .st-chon-ngon-ngu a:visited {
        height: 32px;
        padding: 0 9px;
    }

    /* Ẩn bằng mắt nhưng trình đọc màn hình vẫn đọc tên đầy đủ (nhãn ngắn đã aria-hidden). */
    .st-chon-ngon-ngu .dai {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .st-dau-phai .st-brand-picker label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .st-brand-picker select {
        height: 32px;
        max-width: 120px;
    }
}

/* Hai đường dẫn văn bản ở chân trang (custom.js themDuongDanChanTrang). */
.st-chan-trang-lien-ket {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 10px 10px;
    font-size: 14px;
}

.st-link-quyen-rieng-tu,
.st-link-quyen-rieng-tu:link,
.st-link-quyen-rieng-tu:visited {
    color: rgba(255, 255, 255, 0.86);
}

.st-link-quyen-rieng-tu:hover {
    color: #fff;
}

/* KHÔNG gạch chân ở bất cứ đâu trên cổng (chủ dự án yêu cầu 19/10/2026) — kể cả khi rê chuột (bootstrap gạch chân a:hover,
   .btn-link:hover) và thẻ <u>, <ins>, <abbr> trong bài viết. Đường dẫn vẫn phân biệt bằng màu; người dùng bàn phím vẫn thấy
   viền khi chọn (:focus-visible) — đừng bỏ viền đó. */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active,
.btn-link,
.btn-link:hover,
.btn-link:focus,
u,
ins,
abbr[title] {
    text-decoration: none !important;
}

abbr[title] {
    border-bottom: 0;
}

a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}