/* =============================================================================
   Giao diện DDCI - lớp phủ chung cho mọi trang Portal
   Cùng phong cách với banner trang khảo sát (/ks): dải màu navy -> xanh dương, điểm
   nhấn vàng, thẻ bo góc, bóng mờ. Nạp SAU ddci.min.css ở tất cả layout nên chỉ cần
   sửa ở đây, không phải dựng lại bộ CSS gộp (grunt).
============================================================================= */
:root {
    --ddci-navy: #06386f;
    --ddci-navy-dam: #052b57;
    --ddci-xanh: #0a5fae;
    --ddci-xanh-sang: #1189d8;
    --ddci-xanh-nhat: #e8f1fb;
    --ddci-vang: #ffd54a;
    --ddci-vang-dam: #f4b400;
    --ddci-chu: #1f2937;
    --ddci-chu-phu: #4b5563;
    --ddci-vien: #e3e8ef;
    --ddci-nen: #f5f8fc;
    /* Dải xanh chung (header, dải đầu trang con, nút, khối nhấn): cùng tông xanh dương
       của banner DDCI Điện Biên (chữ và dải "Phương thức khảo sát", sắc độ ~215°), sáng. */
    --ddci-dai: linear-gradient(118deg, #0d55c0 0%, #1a6fe0 55%, #3a8ff0 100%);
    --ddci-dai-chan: var(--ddci-dai); /* footer cùng màu banner như header */
    /* Thẻ / mục đang chọn - đang trỏ (thẻ khối, mục trong danh sách thả xuống). */
    --ddci-dai-chon: linear-gradient(118deg, #0b4fb3 0%, #1677e0 55%, #22a6f2 100%);
    --ddci-bong: 0 10px 30px rgba(10, 61, 122, .08);
    --ddci-font: "Inter", "Be Vietnam Pro", "Open Sans", Arial, sans-serif;
}

/* ---------------------------------------------------------------- Phông chữ
   Be Vietnam Pro (thiết kế cho tiếng Việt, dấu đều nét) thay cho Roboto / Open Sans /
   Arial rải rác trong CSS cũ. Chừa lại các phông biểu tượng (icon-*, fa). */
body,
body *:not(i):not([class^="icon-"]):not([class*=" icon-"]):not(.fa):not([class^="fa-"]):not(.select2-selection__arrow) {
    font-family: var(--ddci-font) !important;
}
body { letter-spacing: -.005em; -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- Header, menu */
#topnav {
    background: var(--ddci-dai) !important;
    box-shadow: 0 2px 14px rgba(6, 56, 111, .2) !important;
}
#topnav .nav .nav-item .nav-link {
    position: relative;
    color: #fff;
    font-weight: 600;
    transition: color .15s;
}
#topnav .nav .nav-item .nav-link::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: .45rem;
    height: 3px;
    border-radius: 3px;
    background: var(--ddci-vang);
    transform: scaleX(0);
    transition: transform .2s;
}
#topnav .nav .nav-item .nav-link:hover,
#topnav .nav .nav-item .nav-link.dang-xem { color: #fff; }
#topnav .nav .nav-item .nav-link:hover::after,
#topnav .nav .nav-item .nav-link.dang-xem::after { transform: scaleX(1); }

/* Menu 7 mục (thêm Hồ sơ PCI): cột menu rộng ra, các mục nằm một hàng, khoảng đệm
   co theo bề rộng màn hình thay cho 24px cố định của theme. */
@media (min-width: 768px) {
    #topnav .row > .col-md-3 { flex: 0 0 18%; max-width: 18%; }
    #topnav .row > .col-md-7 { flex: 0 0 66%; max-width: 66%; }
    #topnav .row > .col-md-2 { flex: 0 0 16%; max-width: 16%; }
    #topnav .nav { flex-wrap: nowrap; justify-content: center; }
    #topnav .nav .nav-item .nav-link { padding-left: clamp(.45rem, 1.1vw, 1rem); padding-right: clamp(.45rem, 1.1vw, 1rem); white-space: nowrap; }
    #topnav .nav .nav-item .nav-link::after { left: clamp(.45rem, 1.1vw, 1rem); right: clamp(.45rem, 1.1vw, 1rem); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    #topnav .nav .nav-item .nav-link { font-size: .9rem; }
    #topnav .survey-button .btn { padding: .45rem .9rem; font-size: .9rem; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    #topnav .row > .col-md-3 { flex-basis: 13%; max-width: 13%; }
    #topnav .row > .col-md-7 { flex-basis: 72%; max-width: 72%; }
    #topnav .row > .col-md-2 { flex-basis: 15%; max-width: 15%; }
    #topnav .box-logo img { max-width: 100%; }
    #topnav .nav .nav-item .nav-link { font-size: .78rem; padding-left: .3rem; padding-right: .3rem; }
    #topnav .nav .nav-item .nav-link::after { left: .3rem; right: .3rem; }
    #topnav .survey-button .btn { padding: .4rem .7rem; font-size: .8rem; }
}

/* Nút "Khảo sát": vàng nổi bật, cùng điểm nhấn với banner. */
#topnav .survey-button .btn {
    padding: .5rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--ddci-vang);
    color: var(--ddci-navy);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: transform .15s, filter .15s;
}
#topnav .survey-button .btn:hover { filter: brightness(1.05); transform: translateY(-1px); color: var(--ddci-navy); }

/* Giao diện máy tính trên cửa sổ hẹp (< 768px, ví dụ thu nhỏ trình duyệt): ba cột của header
   trước đây xếp chồng lên nhau, menu và nút "Khảo sát" tràn khỏi dải 60px, đè lên nội dung khi
   cuộn. Giữ một hàng: logo trái, nút "Khảo sát" phải, menu ở giữa vuốt ngang được.
   (Điện thoại thật dùng _LayoutMobile, có thanh menu riêng.) */
@media (max-width: 767.98px) {
    #topnav .container { padding-left: 12px; padding-right: 12px; }
    #topnav .row { flex-wrap: nowrap; align-items: center; margin: 0; }
    #topnav .row > .col-md-3,
    #topnav .row > .col-md-2 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
    #topnav .row > .col-md-3 { padding-right: 8px; }
    #topnav .row > .col-md-2 { padding-left: 8px; }
    #topnav .box-logo img { max-height: 34px !important; }
    #topnav .row > .col-md-7 { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; }
    #topnav .nav { flex-wrap: nowrap; height: 100%; align-items: center; overflow-x: auto; overflow-y: hidden;
                   scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    #topnav .nav::-webkit-scrollbar { display: none; }
    /* Mép phải mờ dần: báo còn mục menu, vuốt ngang để xem. */
    #topnav .nav { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
    #topnav .nav .nav-item .nav-link { padding: .4rem .55rem; font-size: .85rem; white-space: nowrap; }
    #topnav .nav .nav-item .nav-link::after { left: .55rem; right: .55rem; bottom: .15rem; }
    #topnav .survey-button .btn { padding: .35rem .8rem; font-size: .8rem; }
}

#header .underline { display: none; }
#header.sticky.fixed { border-bottom: 0; background: transparent; }

/* Menu bản điện thoại / máy tính bảng (lưới biểu tượng) */
#header .main-menu .main-menu-content .nav ul.navigation-main { background: var(--ddci-dai) !important; }
#header .main-menu .main-menu-content .nav ul.navigation-main .nav-item { border-right-color: rgba(255, 255, 255, .15) !important; }
#header .main-menu .main-menu-content .nav ul.navigation-main .nav-item:hover { background: rgba(255, 255, 255, .1) !important; }
/* Điện thoại khổ hẹp (320-359px): nhãn "Hồ sơ DDCI" không xuống hai dòng làm lệch hàng biểu tượng. */
@media (max-width: 359.98px) {
    #header .main-menu .main-menu-content .nav ul.navigation-main .nav-item a span { white-space: nowrap; font-size: 11px; letter-spacing: -.2px; }
}
/* Menu xổ (nút ☰) là accordion: mục trong suốt trên nền navy, phần mở rộng tối hơn. */
#header .main-menu .nav-sub .box-menu-sub .accordion-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .14) !important;
}
#header .main-menu .nav-sub .box-menu-sub .accordion-header a { background-color: transparent !important; color: #fff !important; }
#header .main-menu .nav-sub .box-menu-sub .accordion-collapse { background: rgba(0, 0, 0, .18) !important; }
#header .main-menu .nav-sub .box-menu-sub .accordion-collapse a { background-color: transparent !important; color: #fff !important; }
#header .main-menu .nav-sub .box-menu-sub .accordion-collapse a:hover { color: var(--ddci-vang) !important; }
#header .main-menu .main-menu-content .nav ul.navigation-main .nav-item.has-sub .nav-sub { background: var(--ddci-navy) !important; }

/* ---------------------------------------------------------------- Đường dẫn */
.breadcrumb { background: transparent; }
.breadcrumb .breadcrumb-body ul li,
.breadcrumb .breadcrumb-body ul li a { color: var(--ddci-chu-phu); }
.breadcrumb .breadcrumb-body ul li:last-child a { color: var(--ddci-navy); font-weight: 600; }
.breadcrumb .breadcrumb-body ul li a:hover { color: var(--ddci-xanh); }

/* Dải đầu trang con: tiêu đề trang + đường dẫn trên nền dải màu, lưới chấm, núi mờ. */
.breadcrumb.dau-trang {
    position: relative;
    margin-bottom: 36px;
    padding: 44px 0 40px;
    background: var(--ddci-dai);
    overflow: hidden;
}
.breadcrumb.dau-trang::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.3px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 20%, #000 85%);
    mask-image: linear-gradient(90deg, transparent 20%, #000 85%);
}
.breadcrumb.dau-trang::after {
    content: "";
    position: absolute;
    right: 6%;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 34px solid rgba(255, 213, 74, .12);
}
.dau-trang__nui { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; pointer-events: none; }
.breadcrumb.dau-trang .container { position: relative; z-index: 1; }
.dau-trang__tieu-de {
    margin: 0 0 10px;
    color: #fff;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.breadcrumb.dau-trang .row { margin: 0; }
.breadcrumb.dau-trang .breadcrumb-body { padding: 0; }
.breadcrumb.dau-trang .breadcrumb-body ul { margin: 0; padding: 0; }
.breadcrumb.dau-trang .breadcrumb-body ul li,
.breadcrumb.dau-trang .breadcrumb-body ul li a,
.breadcrumb.dau-trang .breadcrumb-body ul li i { color: #fff !important; }
.breadcrumb.dau-trang .breadcrumb-body ul li:last-child a { color: var(--ddci-vang) !important; font-weight: 600; }
.breadcrumb.dau-trang .breadcrumb-body ul li a:hover { color: #fff !important; }
.trung-dau-trang { display: none !important; }
@media (max-width: 767px) {
    .breadcrumb.dau-trang { margin-bottom: 22px; padding: 26px 0 24px; }
    .breadcrumb.dau-trang::after { display: none; }
    .breadcrumb.dau-trang .breadcrumb-body ul li:last-child a { display: inline-block; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
}

/* ---------------------------------------------------------------- Tiêu đề mục */
.header-title span:before { background: var(--ddci-dai) !important; }
.header-title:before, .header-title:after { background: #cfe0f3 !important; }

/* ---------------------------------------------------------------- Nút */
.btn-default, .btn-primary {
    border: 0 !important;
    background: var(--ddci-dai) !important;
    color: #fff !important;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(10, 95, 174, .25);
}
.btn-default:hover, .btn-primary:hover { filter: brightness(1.07); color: #fff !important; }
.page-wrapper .news .news-right .content-text .box-button-details a,
.page-wrapper .about .content-left .card .card-body .box-button a {
    background: var(--ddci-dai) !important;
    border-radius: 8px !important;
}

/* ---------------------------------------------------------------- Khối bên phải */
.content-wrapper .page-content .sidebar-right .card {
    overflow: hidden;
    border: 1px solid var(--ddci-vien);
    border-radius: 16px;
    box-shadow: var(--ddci-bong);
}
.content-wrapper .page-content .sidebar-right .card .card-header {
    position: relative;
    padding-left: 1.4rem;
    border-bottom: 1px solid var(--ddci-vien);
    color: var(--ddci-navy);
    font-weight: 700;
}
.content-wrapper .page-content .sidebar-right .card .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--ddci-vang);
}
.content-wrapper .page-content .sidebar-right .card li.active a,
.content-wrapper .page-content .sidebar-right .card li a:hover { color: var(--ddci-xanh); }

.box-search .input-group .form-control { border-color: var(--ddci-vien); border-radius: 10px 0 0 10px; }
.box-search .input-group-text { background: var(--ddci-dai) !important; border: 0 !important; border-radius: 0 10px 10px 0 !important; }

.box-hotline .hotline-content { border: 1px solid #cfe0f3 !important; background: #fff; }
.box-hotline .hotline-content .input-content span { color: var(--ddci-chu-phu) !important; }
.box-hotline .hotline-content .input-content p { color: var(--ddci-chu) !important; }
.box-hotline .hotline-content .input-content p a { color: var(--ddci-navy) !important; }
.box-hotline .input-group-text { border: 0 !important; background: var(--ddci-dai) !important; color: var(--ddci-vang) !important; }
.box-hotline .input-group-text svg { color: var(--ddci-vang) !important; fill: var(--ddci-vang); }

/* Ô So sánh / Hướng dẫn / Hỏi đáp và các ô liên kết cùng kiểu */
.box-content__alert {
    border: 0 !important;
    border-radius: 14px !important;
    background: var(--ddci-dai) !important;
    box-shadow: 0 8px 20px rgba(6, 56, 111, .18);
    transition: transform .15s, box-shadow .15s;
}
.box-content__alert:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(6, 56, 111, .24); }
.box-content__alert::before, .box-content__alert::after { display: none !important; }
.box-content__alert a h4 { color: #fff; font-weight: 700; }
.box-content__alert a p { color: var(--ddci-vang); margin-bottom: 0; }

/* ---------------------------------------------------------------- Hỏi đáp, phân trang */
.pagination .page-item.active .page-link { border-color: var(--ddci-xanh); background: var(--ddci-xanh); }
.pagination .page-link { color: var(--ddci-xanh); }

/* Chấm chuyển ảnh của slider trang chủ */
.wraper-slide .carousel-indicators [data-bs-target] { border-radius: 999px; }
.wraper-slide .carousel-indicators .active { background-color: var(--ddci-vang); }
/* Mọi màn hình: chiều cao ảnh theo đúng tỉ lệ banner (2264×695) thay cho 50vh / các mốc
   105-190px cố định - banner có chữ nên phải hiện trọn, không kéo giãn, không cắt. */
.wraper-slide .carousel-item .slide-img { height: auto !important; aspect-ratio: 2264 / 695; background-size: cover !important; background-position: center !important; }

/* ---------------------------------------------------------------- Chân trang */
#footer {
    position: relative;
    overflow: hidden;
    background: var(--ddci-dai-chan) !important;
}
#footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}
#footer .footer-wrapper { position: relative; }
#footer .footer-wrapper .footer-right h4 { color: var(--ddci-vang) !important; }
#footer .footer-wrapper .footer-left h4 { color: #fff !important; }
#footer .footer-wrapper .footer-line { background: rgba(255, 255, 255, .3) !important; }
#footer .footer-wrapper .footer-nav ul li a,
#footer .footer-wrapper .footer-info ul li a { transition: color .15s; }
#footer .footer-wrapper .footer-nav ul li a:hover,
#footer .footer-wrapper .footer-info ul li a:hover { color: var(--ddci-vang) !important; }
#footer .footer-wrapper .footer-copyright p { color: #fff !important; font-weight: 400 !important; font-size: .9rem !important; }

/* ---------------------------------------------------------------- Trang chủ */
/* Dải "Bắt đầu khảo sát" dưới slider: nút vàng như nút Khảo sát trên header. */
#survey { background: var(--ddci-xanh-nhat); }
#survey .survey-text h2 { color: var(--ddci-navy); }
#survey .btn-part .readon.started,
.page-wrapper .rs-about .readon.started {
    padding: 10px 26px;
    border-radius: 999px;
    background: var(--ddci-vang) !important;
    background-image: none !important;
    color: var(--ddci-navy) !important;
    font-weight: 700;
    box-shadow: 0 6px 16px rgba(6, 56, 111, .18);
}
#survey .btn-part .readon.started:hover,
.page-wrapper .rs-about .readon.started:hover { filter: brightness(1.05); }

/* Tiêu đề mục kiểu "— MỤC TIÊU": chữ navy, vạch vàng + xanh. */
.page-wrapper .sec-title .sub-text.style4-bg { color: var(--ddci-navy) !important; }
.page-wrapper .sec-title .sub-text:before { background-color: var(--ddci-vang) !important; }
.page-wrapper .sec-title .sub-text:after { background-color: var(--ddci-xanh) !important; }

/* Bộ đếm */
.rs-counter .count-number span { color: var(--ddci-xanh) !important; }

/* Nút "Chi tiết" kiểu khung có mũi tên (trang chủ, bản tin, tìm kiếm) */
.box-button a { border-color: var(--ddci-xanh) !important; border-radius: 8px; color: var(--ddci-navy); }
.box-button a i { background: var(--ddci-xanh) !important; color: #fff !important; }
.box-button a:before, .box-button a:hover:before, .box-button a:hover i:after { background: var(--ddci-xanh) !important; }
.box-button a:hover { color: #fff !important; }
#header .main-menu .nav-sub .box-search .form-control {
    border: 1px solid rgba(255, 255, 255, .25) !important;
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}
#header .main-menu .nav-sub .box-search .form-control::placeholder { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------- Tiêu đề trang, liên kết */
.tieu-de-trang { color: var(--ddci-navy) !important; font-weight: 700; }
.lien-ket-don-vi { color: var(--ddci-xanh) !important; font-weight: 500; }
.lien-ket-don-vi:hover { color: var(--ddci-navy) !important; text-decoration: underline; }

/* Thanh chọn khối (Bảng xếp hạng, Bảng chỉ số thành phần): dãy thẻ bấm, thẻ đang xem tô
   xanh như thanh header; điện thoại vuốt ngang. */
.xh-dau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 1.5rem; }
.xh-dau .content-title { margin: 0 !important; }
.xh-khoi-the { position: relative; display: flex; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid #dbe5f1; border-radius: 999px; background: #f1f5fb; overflow-x: auto; scrollbar-width: none; }
.xh-khoi-the::-webkit-scrollbar { display: none; }
.xh-khoi-the a { flex: none; padding: 8px 18px; border-radius: 999px; color: #334155; font-size: .92rem; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s; }
.xh-khoi-the a:hover { background: #fff; color: #0a5fae; box-shadow: 0 1px 4px rgba(15, 40, 80, .08); }
.xh-khoi-the a.dang-chon { background: var(--ddci-dai-chon); color: #fff; box-shadow: 0 4px 12px rgba(22, 119, 224, .3); }
@media (max-width: 575.98px) { .xh-khoi-the a { padding: 7px 14px; font-size: .86rem; } }
/* Bên phải tiêu đề: thanh chọn khối + ô chọn kỳ đứng cùng hàng. */
.xh-dau__loc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 100%; }
/* Ô chọn kỳ / năm (select.xh-chon-ky): assets/js/chon-ky.js thay danh sách thả xuống của trình duyệt
   bằng nút viên thuốc (cùng nền, viền với thanh chọn khối) + thẻ danh sách bo góc, đổ bóng. Chưa
   chạy script thì ô select gốc vẫn dùng được với cùng dáng viên thuốc. */
.xh-chon-ky, .ck__nut {
    -webkit-appearance: none; appearance: none; cursor: pointer; width: auto; min-width: 110px;
    height: 48px; padding: 0 40px 0 18px; border: 1px solid #dbe5f1; border-radius: 999px;
    background: #f1f5fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 14px;
    color: #334155; font-size: .92rem; font-weight: 600; line-height: 46px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.xh-chon-ky:hover, .ck__nut:hover { background-color: #fff; border-color: #bcd0ea; }
.xh-chon-ky:focus { background-color: #fff; border-color: #1a6fe0; box-shadow: 0 0 0 3px rgba(26, 111, 224, .15); outline: 0; }

.ck { position: relative; display: inline-block; flex: none; }
.ck .ck__goc { display: none !important; }
.ck__nut { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; background-image: none; text-align: left; }
.ck__nut svg { width: 14px; height: 14px; flex: none; color: #64748b; transition: transform .2s; }
.ck__nut:focus-visible { outline: 0; background-color: #fff; border-color: #1a6fe0; box-shadow: 0 0 0 3px rgba(26, 111, 224, .15); }
.ck.dang-mo .ck__nut { background-color: #fff; border-color: #1a6fe0; box-shadow: 0 0 0 3px rgba(26, 111, 224, .12); }
.ck.dang-mo .ck__nut svg { transform: rotate(180deg); color: #1a6fe0; }
.ck__chu { flex: 1 1 auto; }

.ck__ds {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1050;
    min-width: 100%; max-height: 300px; overflow-y: auto; padding: 6px;
    border: 1px solid #e3eaf3; border-radius: 16px; background: #fff;
    box-shadow: 0 14px 34px rgba(15, 40, 80, .14), 0 2px 6px rgba(15, 40, 80, .06);
    animation: ck-mo .16s ease-out;
}
.ck--trai .ck__ds { right: auto; left: 0; }
.ck__ds[hidden] { display: none; }
@keyframes ck-mo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ck__muc {
    display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
    padding: 9px 12px 9px 14px; border: 0; border-radius: 10px; background: none;
    color: #334155; font-size: .92rem; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer;
}
.ck__muc + .ck__muc { margin-top: 2px; }
.ck__muc svg { width: 15px; height: 15px; flex: none; opacity: 0; }
.ck__muc.dang-chon { background: #e8f1fd; color: #0b4fb3; font-weight: 600; }
.ck__muc.dang-chon svg { opacity: 1; }
/* Mục đang trỏ: nền chuyển màu như thẻ khối đang chọn, chữ trắng (cả khi là mục đang chọn). */
.ck__muc:not(:disabled):hover, .ck__muc:focus-visible { background: var(--ddci-dai-chon); color: #fff; box-shadow: 0 4px 12px rgba(22, 119, 224, .3); outline: 0; }
.ck__muc:disabled { color: #a0aec0; cursor: not-allowed; }

/* Ô chọn năm ở hồ sơ đơn vị: luôn phải có một năm. select2 dùng chung bật allowClear nên nút xoá (×)
   đè lên mũi tên thành một dấu lạ - ẩn nút xoá, giữ mũi tên. */
#sltYear + .select2 .select2-selection__clear,
#sltYearMobile + .select2 .select2-selection__clear { display: none !important; }

/* ---------------------------------------------------------------- Bảng (xếp hạng, chỉ số) */
/* Đầu bảng: nền xanh như thanh header portal, chữ trắng; mũi sắp xếp vẽ lại màu trắng
   (ảnh mặc định của bootstrap-table là xám tối, không thấy trên nền xanh). */
.table thead .header .table-header__title,
.table thead .header .table-header__title-cols_one,
.table thead .header .table-header__title-row_one,
.table thead .header .table-header__title-column,
.bootstrap-table .fixed-table-container .table thead th {
    background: transparent !important;
    color: #fff !important;
}
/* Dải màu đặt trên cả phần đầu bảng (không tô từng ô) để chuyển màu liền một mạch như thanh header. */
.table thead:has(.header),
.bootstrap-table .fixed-table-container .table thead { background: var(--ddci-dai) !important; }
.table thead:has(.header) > tr,
.bootstrap-table .fixed-table-container .table thead > tr { background: transparent !important; }
.table thead .header th .th-inner,
.table thead .header th span,
.bootstrap-table .fixed-table-container .table thead th .th-inner { color: #fff !important; }
.bootstrap-table .fixed-table-container .table thead th { border-color: rgba(255, 255, 255, .22) !important; }
.bootstrap-table .fixed-table-container .table thead th .sortable.both { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath fill='%23fff' fill-opacity='.55' d='M9.5 4l3.5 4.5H6zM9.5 15l3.5-4.5H6z'/%3E%3C/svg%3E") !important; }
.bootstrap-table .fixed-table-container .table thead th .sortable.asc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath fill='%23fff' d='M9.5 4l3.5 4.5H6z'/%3E%3Cpath fill='%23fff' fill-opacity='.35' d='M9.5 15l3.5-4.5H6z'/%3E%3C/svg%3E") !important; }
.bootstrap-table .fixed-table-container .table thead th .sortable.desc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19'%3E%3Cpath fill='%23fff' fill-opacity='.35' d='M9.5 4l3.5 4.5H6z'/%3E%3Cpath fill='%23fff' d='M9.5 15l3.5-4.5H6z'/%3E%3C/svg%3E") !important; }
.bootstrap-table .fixed-table-container { border-radius: 12px; overflow: hidden; border-color: var(--ddci-vien) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #f8fbfe; }

/* ---------------------------------------------------------------- So sánh, khung có tiêu đề */
.content-wrapper .page-content .content-body__text .card__compare,
.support-cost .card { border: 1px solid var(--ddci-vien); border-radius: 14px; overflow: hidden; box-shadow: var(--ddci-bong); }
.content-wrapper .page-content .content-body__text .card__compare .card-header,
.support-cost .card .card-header { background: var(--ddci-dai) !important; color: #fff; border: 0; }

/* ---------------------------------------------------------------- Accordion hỏi đáp (trang chủ, trang Hỏi đáp)
   Cùng kiểu với hỏi đáp ở trang /ks: thẻ bo góc, mũi tên lên xuống thay cho dấu +/−,
   mục đang mở nền dải màu giao diện, chữ và mũi tên trắng. */
.page-wrapper .content-body_text .accordion .accordion-item,
.content-wrapper .page-content .content-body__text .accordion .accordion-item {
    border: 1px solid #e3e8ef !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
    padding: 0 !important; /* trang chủ: .accordion có class .row nên mục bị đệm gutter */
    overflow: hidden;
    background: #fff;
}
/* Khung con của giao diện cũ (viền vuông lồng trong thẻ bo góc) */
.page-wrapper .content-body_text .accordion .accordion-item .accordion-header,
.page-wrapper .content-body_text .accordion .accordion-item .accordion-body,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-header,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-body { border: 0 !important; border-radius: 0 !important; }
.page-wrapper .content-body_text .accordion .accordion-item .accordion-button,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-button {
    border-radius: 0 !important;
    background: #fff !important;
    color: #1f2937 !important;
    font-weight: 600;
    box-shadow: none !important;
}
.page-wrapper .content-body_text .accordion .accordion-item .accordion-button:not(.collapsed),
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-button:not(.collapsed) {
    background: var(--ddci-dai) !important;
    color: #fff !important;
}
.page-wrapper .content-body_text .accordion .accordion-item .accordion-button::after,
.page-wrapper .content-body_text .accordion .accordion-item .accordion-button:not(.collapsed)::after,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-button::after,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-button:not(.collapsed)::after {
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231f2937'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transition: transform .2s ease-in-out;
}
.page-wrapper .content-body_text .accordion .accordion-item .accordion-button:not(.collapsed)::after,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg);
}
/* Nội dung hỏi đáp dán từ Word mang font Times: dùng font của trang. */
.page-wrapper .content-body_text .accordion .accordion-body, .page-wrapper .content-body_text .accordion .accordion-body *,
.content-wrapper .page-content .content-body__text .accordion .accordion-body, .content-wrapper .page-content .content-body__text .accordion .accordion-body * { font-family: inherit !important; }
.page-wrapper .content-body_text .accordion .accordion-item .accordion-collapse,
.content-wrapper .page-content .content-body__text .accordion .accordion-item .accordion-collapse { border-top: 1px solid #e3e8ef; }

/* Tiêu đề bài viết / trang tĩnh (Giới thiệu chung, chi tiết bản tin, Hướng dẫn...) */
.content-wrapper .page-content .content-title h3 { color: var(--ddci-navy); font-weight: 700; line-height: 1.35; }

/* ---------------------------------------------------------------- Liên quan, phân trang, xem thêm */
.content-wrapper .page-content .content-relate .relate-title:before,
.content-wrapper .page-content .content-relate .relate-title:after { background: var(--ddci-xanh) !important; }
.content-wrapper .page-content .content-relate ul li a:hover,
.content-wrapper .page-content .sidebar-right ul li.active a,
.content-wrapper .page-content .sidebar-right ul li a:hover,
.content-wrapper .news .news-content .card-text .content-text a:hover,
.content-wrapper .page-content .content-body__news .card .content-text a:hover,
.page-wrapper .news .box-news .card .content-text h3:hover,
.page-wrapper .news .box-news .content-text h3:hover { color: var(--ddci-xanh) !important; }
/* Nút "Chi tiết" cũng nằm trong .content-text: rê chuột nền đổ xanh, chữ phải trắng chứ không theo
   màu link xanh ở trên (trước đây chữ xanh trên nền xanh - nút như mất chữ). */
.content-wrapper .news .news-content .card-text .content-text .box-button a:hover,
.content-wrapper .page-content .content-body__news .card .content-text .box-button a:hover { color: #fff !important; }
#pagination .nav-pagination .page-item.active { background: var(--ddci-xanh) !important; border-color: var(--ddci-xanh) !important; }
.load-more .btn, .load-more_search .btn { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.load-more .btn a, .load-more_search .btn a {
    display: inline-block;
    padding: 10px 30px;
    border: 0 !important;
    border-radius: 999px;
    background: var(--ddci-dai) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(10, 95, 174, .25);
}
.tooltip .tooltip-inner { background: var(--ddci-navy) !important; }
.tooltip .tooltip-arrow:before { border-top-color: var(--ddci-navy) !important; }
.page-wrapper .guide-document .content-right .rs-services .services-item:hover,
.page-wrapper .rs-about .rs-services .services-item:hover { background: var(--ddci-dai) !important; }

/* ---------------------------------------------------------------- Nội dung bài viết
   Bài soạn ở trang quản trị (trình soạn thảo của màn Bài viết). Phông chữ luôn theo portal cho đồng bộ;
   còn cỡ chữ, giãn dòng, màu, canh lề, thụt lề người soạn đặt thì hiện đúng như đã đặt.
   Ngoại lệ - nội dung dán thẳng từ Word / trang web khác trước khi trình soạn thảo biết lọc khi dán: nhận ra
   nhờ cỡ chữ tính bằng pt, hoặc thẻ có ghi phông chữ (trình soạn thảo không có nút phông nên không tự sinh
   ra). Cỡ chữ, giãn dòng trên các thẻ đó và bên trong chúng vẫn đưa về chữ chung của bài. */
.page-body__text {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ddci-chu);
    text-align: justify;
}
.page-body__text::after { content: ""; display: table; clear: both; }
.page-body__text * { font-family: inherit !important; }
.page-body__text [style*="pt"],
.page-body__text [style*="font-family"], .page-body__text [style*="font-family"] [style*="font-size"],
.page-body__text [style*="font-family"] [style*="line-height"], .page-body__text font[face], .page-body__text font[face] * {
    font-size: inherit !important;
    line-height: inherit !important;
}
.page-body__text [style*="color:#000000"], .page-body__text [style*="color: #000000"],
.page-body__text [style*="color: rgb(0, 0, 0)"], .page-body__text [style*="color:black"] { color: inherit !important; }
.page-body__text p { margin-bottom: .85rem; }
/* Giao diện gốc đặt giãn dòng 1.5 cho đoạn của trang bản tin; trả về giãn dòng chung của bài (1.75). Đoạn nào
   người soạn tự đặt giãn dòng (style trên thẻ) thì vẫn theo người soạn. */
.content-wrapper .page-content .page-body__text p { line-height: inherit; }
.page-body__text img { max-width: 100%; height: auto; border-radius: 8px; }
/* Ảnh đặt "trôi trái / trôi phải" trong trình soạn thảo: chừa khoảng cách với chữ bao quanh. */
.page-body__text img[style*="float: left"], .page-body__text img.note-float-left { margin: .3rem 1.1rem .6rem 0; }
.page-body__text img[style*="float: right"], .page-body__text img.note-float-right { margin: .3rem 0 .6rem 1.1rem; }
.page-body__text a { color: var(--ddci-xanh); text-decoration: underline; }
.page-body__text ul, .page-body__text ol { margin-bottom: .85rem; padding-left: 2rem; }
.page-body__text ul { list-style: disc; }
.page-body__text ol { list-style: decimal; }
.page-body__text li { list-style: inherit; }
.page-body__text hr { margin: 1.4rem 0; border: 0; border-top: 1px solid var(--ddci-vien); opacity: 1; }
.page-body__text blockquote {
    margin: 1.1rem 0;
    padding: .7rem 1.1rem;
    border-left: 4px solid var(--ddci-xanh);
    border-radius: 0 8px 8px 0;
    background: var(--ddci-nen);
    color: var(--ddci-navy);
    font-style: italic;
}
.page-body__text blockquote > :last-child { margin-bottom: 0; }
.page-body__text pre {
    margin: 1.1rem 0;
    padding: .8rem 1rem;
    border: 1px solid var(--ddci-vien);
    border-radius: 8px;
    background: #f6f9fc;
    font-size: .9rem;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Bảng: kẻ đủ ô, chữ canh trái (giao diện chung của portal canh giữa mọi ô bảng); màn hẹp thì cuộn ngang. */
.page-body__text table { width: 100%; max-width: 100%; margin: 1.1rem 0; border-collapse: collapse; }
.page-body__text table tbody tr td, .page-body__text table tbody tr th, .page-body__text table thead tr th {
    padding: .5rem .7rem;
    border: 1px solid var(--ddci-vien);
    text-align: left;
    vertical-align: top;
}
.page-body__text table th { background: var(--ddci-nen); font-weight: 600; }
/* Video chèn vào bài (YouTube...): co theo bề ngang bài, giữ tỉ lệ 16:9. */
.page-body__text iframe, .page-body__text video {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1.1rem auto;
    border: 0;
    border-radius: 8px;
}
@media (max-width: 767.98px) {
    .page-body__text table { display: block; overflow-x: auto; }
    .page-body__text img[style*="float"] { float: none !important; width: 100% !important; margin: .6rem 0; }
}

/* ---------------------------------------------------------------- Bản tin: lọc theo loại bài, nhãn loại trên từng bài */
.bt-loai { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bt-loai__muc {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border: 1px solid var(--ddci-vien); border-radius: 999px;
    background: #fff; color: var(--ddci-navy); font-size: .9rem; font-weight: 500; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.bt-loai__muc span { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--ddci-nen); color: var(--ddci-chu-phu, #64748b); font-size: .78rem; text-align: center; }
.bt-loai__muc:hover { border-color: var(--ddci-xanh); color: var(--ddci-xanh); }
.bt-loai__muc.is-chon { background: var(--ddci-xanh); border-color: var(--ddci-xanh); color: #fff; }
.bt-loai__muc.is-chon span { background: rgba(255, 255, 255, .22); color: #fff; }
.bt-nhan {
    display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px;
    background: var(--ddci-xanh-nhat); color: var(--ddci-xanh); font-size: .76rem; font-weight: 600; text-decoration: none;
}
.content-title .bt-nhan { margin: 0 0 0 10px; vertical-align: middle; }
a.bt-nhan:hover { background: var(--ddci-xanh); color: #fff; }

/* ---------------------------------------------------------------- Chân trang luôn ở đáy
   Trang ngắn (Thư ngỏ, So sánh...) không để chân trang lơ lửng giữa màn hình. */
.page-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.page-wrapper > .content-wrapper { flex: 1 0 auto; }

/* ---------------------------------------------------------------- Trang chưa có nội dung */
.trang-trong {
    margin: 24px 0;
    padding: 40px 24px;
    border: 1px dashed #cfe0f3;
    border-radius: 16px;
    background: var(--ddci-nen);
    color: var(--ddci-chu-phu);
    text-align: center;
}
.trang-trong svg { color: var(--ddci-xanh); margin-bottom: 10px; }
.trang-trong p { margin: 0; font-size: 1rem; }
.trang-trong a { color: var(--ddci-xanh); font-weight: 600; }

/* Tiêu đề trong bài viết: không to quá khổ, cùng màu navy. */
.page-body__text h1, .page-body__text h2 { font-size: 1.45rem !important; color: var(--ddci-navy); margin: 1.6rem 0 .8rem; line-height: 1.35 !important; }
.page-body__text h3, .page-body__text h4 { font-size: 1.2rem !important; color: var(--ddci-navy); margin: 1.3rem 0 .6rem; line-height: 1.4 !important; }

/* ---------------------------------------------------------------- Sitemap: mỗi mục cấp 1 là một thẻ, mục con xếp bên trong */
.content-sitemap .nav-sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
    margin: 8px 0 32px;
    padding: 0;
    list-style: none;
}
.content-sitemap .nav-sitemap > li.level-1 {
    position: relative;
    padding: 18px 20px 16px;
    border: 1px solid #e3ecf6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(6, 56, 111, .06);
    overflow: hidden;
}
.content-sitemap .nav-sitemap > li.level-1::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--ddci-dai);
}
.content-sitemap .nav-sitemap > li.level-1 > a {
    color: var(--ddci-navy);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
}
.content-sitemap .nav-sitemap > li.level-1 > a:hover { color: var(--ddci-xanh); }
.content-sitemap .nav-sitemap ul.level-2 {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px dashed #d6e3f1;
    list-style: none;
}
.content-sitemap .nav-sitemap ul.level-2 li { padding: 4px 0; }
.content-sitemap .nav-sitemap ul.level-2 a { display: flex; align-items: baseline; color: #3b4a5c; text-decoration: none; }
.content-sitemap .nav-sitemap ul.level-2 a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: none;
    margin: 0 10px 2px 0;
    border-radius: 50%;
    background: var(--ddci-vang);
}
.content-sitemap .nav-sitemap ul.level-2 a:hover { color: var(--ddci-xanh); }

/* ---------------------------------------------------------------- Phiếu khảo sát: đầu mục (A, B, C...) và khung tài liệu dùng dải màu chung thay cho xanh #22a7f0 */
.content-wrapper .page-content .content-body__survey-details .survey-forms .card .card-header,
.content-wrapper .page-content .content-body__document--details .card-header { background: var(--ddci-dai); }
.content-wrapper .page-content .content-body__survey-details .survey-forms .card .card-header .tieu-de-muc { letter-spacing: .01em; }
.content-wrapper .services .card { box-shadow: 0 6px 18px rgba(6, 56, 111, .08); }

/* ---------------------------------------------------------------- Chân trang: logo cạnh tên hệ thống, biểu tượng trước từng dòng liên hệ */
#footer .footer-wrapper .footer-left { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
/* logo.png có lề trong suốt hai bên: cắt bằng object-fit để vạch ngăn sát chữ. */
#footer .footer-wrapper .footer-left .footer-logo { grid-row: span 2; width: 96px; height: 50px; object-fit: cover; padding-right: 16px; box-sizing: content-box; border-right: 1px solid rgba(255, 255, 255, .25); }
#footer .footer-wrapper .footer-info ul li,
#footer .footer-wrapper .footer-nav ul li a { font-weight: 500 !important; color: #fff !important; }
#footer .footer-wrapper .footer-info ul li[class^="ft-"] { position: relative; padding-left: 28px; margin-bottom: 8px; line-height: 1.55; }
#footer .footer-wrapper .footer-info ul li[class^="ft-"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 16px;
    height: 16px;
    background: var(--ddci-vang);
    -webkit-mask: var(--ft-icon) center / contain no-repeat;
    mask: var(--ft-icon) center / contain no-repeat;
}
#footer .ft-chi-dao { --ft-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 21h18M5 21V8l7-5 7 5v13M9 21v-6h6v6'/%3e%3c/svg%3e"); }
#footer .ft-chu-tri { --ft-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='7' width='18' height='14' rx='2'/%3e%3cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3e%3c/svg%3e"); }
#footer .ft-dia-chi { --ft-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 22s7-6.2 7-12a7 7 0 0 0-14 0c0 5.8 7 12 7 12z'/%3e%3ccircle cx='12' cy='10' r='2.5'/%3e%3c/svg%3e"); }
#footer .ft-hotline { --ft-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3e%3c/svg%3e"); }
#footer .ft-email { --ft-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='2' y='4' width='20' height='16' rx='2'/%3e%3cpath d='M22 6l-10 7L2 6'/%3e%3c/svg%3e"); }
@media (max-width: 575px) {
    #footer .footer-wrapper .footer-left .footer-logo { width: 76px; height: 40px; padding-right: 12px; }
    #footer .footer-wrapper .footer-left { column-gap: 12px; }
}
#footer .footer-wrapper .footer-left h2 { font-size: 1.2rem !important; letter-spacing: -.01em; }
#footer .footer-wrapper .footer-left h4 { font-size: 1rem !important; }

/* ---------------------------------------------------------------- Bảng xếp hạng: bục vinh danh 3 đơn vị dẫn đầu mỗi khối */
.xh-vinh-danh { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin: 4px 0 32px; }
.xh-khoi {
    --vong-rong: 50px;
    --vong-cao: 38px;
    --khoi-chu: #1565c0;
    --khoi-1: #1565c0;
    --khoi-2: #1976d2;
    --khoi-3: #2196f3;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: 20px 18px 18px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f4faff 0%, #e7f4ff 60%, #d9edff 100%);
    border: 1px solid rgba(30,136,229,.16);
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15,60,120,.08);
}
/* Hình trang trí lớn ở góc trên phải, để thẻ cắt bớt - theo ảnh mẫu. */
.xh-khoi::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 2px;
    top: 6px;
    width: 102px;
    height: 94px;
    pointer-events: none;
    opacity: .34;
    background: var(--khoi-nha) right top / contain no-repeat;
}
.xh-khoi--so {
    --khoi-chu: #1565c0;
    --khoi-1: #1565c0;
    --khoi-2: #1976d2;
    --khoi-3: #2196f3;
    --khoi-nha: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80' fill='none'%3e%3cpath fill='%2342a5f5' d='M18 72h54V38H62V24L45 12 28 24v14H18z'/%3e%3cpath fill='%2390caf9' d='M34 72V52h22v20z'/%3e%3ccircle cx='45' cy='18' r='4' fill='%2364b5f6'/%3e%3crect x='32' y='42' width='5' height='10' rx='1' fill='%23e3f2fd'/%3e%3crect x='42' y='42' width='5' height='10' rx='1' fill='%23e3f2fd'/%3e%3crect x='52' y='42' width='5' height='10' rx='1' fill='%23e3f2fd'/%3e%3c/svg%3e");
    background: linear-gradient(180deg, #f4faff 0%, #e7f4ff 60%, #d9edff 100%);
    border-color: rgba(30,136,229,.16);
    box-shadow: 0 10px 24px rgba(15,60,120,.08);
}
.xh-khoi--nganh-doc {
    --khoi-chu: #2e7d32;
    --khoi-1: #2e7d32;
    --khoi-2: #388e3c;
    --khoi-3: #4caf50;
    --khoi-nha: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80' fill='none'%3e%3crect x='22' y='10' width='46' height='62' rx='6' fill='%2366bb6a'/%3e%3crect x='36' y='4' width='18' height='10' rx='4' fill='%232e7d32'/%3e%3crect x='32' y='26' width='26' height='5' rx='2.5' fill='%23e8f5e9'/%3e%3crect x='32' y='38' width='26' height='5' rx='2.5' fill='%23e8f5e9'/%3e%3crect x='32' y='50' width='18' height='5' rx='2.5' fill='%23e8f5e9'/%3e%3c/svg%3e");
    background: linear-gradient(180deg, #f2fbf5 0%, #e3f7ea 60%, #cdf0d8 100%);
    border-color: rgba(67,160,71,.18);
    box-shadow: 0 10px 24px rgba(46,125,50,.08);
}
.xh-khoi--xa {
    --khoi-chu: #6a1b9a;
    --khoi-1: #6a1b9a;
    --khoi-2: #7b1fa2;
    --khoi-3: #9c27b0;
    --khoi-nha: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 80' fill='none'%3e%3cpath fill='%23ce93d8' d='M8 74h34V44L25 30 8 44z'/%3e%3cpath fill='%23ba68c8' d='M38 74h44V38L60 18 38 38z'/%3e%3crect x='50' y='46' width='9' height='9' rx='1.5' fill='%23f3e5f5'/%3e%3crect x='64' y='46' width='9' height='9' rx='1.5' fill='%23f3e5f5'/%3e%3crect x='19' y='54' width='8' height='9' rx='1.5' fill='%23f3e5f5'/%3e%3c/svg%3e");
    background: linear-gradient(180deg, #f8f2ff 0%, #f0e2ff 60%, #e6cdff 100%);
    border-color: rgba(142,36,170,.16);
    box-shadow: 0 10px 24px rgba(106,27,154,.08);
}
.xh-khoi__dau { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding-right: 64px; margin-bottom: 16px; }
.xh-khoi__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--khoi-1); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--khoi-1) 34%, transparent); }
.xh-khoi__chu { min-width: 0; }
.xh-khoi__dau span:not(.xh-khoi__icon) { display: block; color: var(--khoi-chu); font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
/* Chỉ nhãn phía trên mang màu khối; tên khối để navy đậm - theo ảnh mẫu. */
.xh-khoi__dau h4 { margin: 2px 0 0; color: #17233d; font-size: 1.2rem; font-weight: 800; line-height: 1.25; }
.xh-buc { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; }
.xh-buc__o { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; text-align: center; text-decoration: none; color: inherit; }
.xh-huy { position: relative; display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; font-weight: 800; font-size: 1rem; }
.xh-buc__o--1 .xh-huy { width: 46px; height: 46px; font-size: 1.3rem; background: radial-gradient(circle at 32% 26%, #fff6c4 0%, #ffd12e 46%, #f59300 100%); color: #6b3d00; box-shadow: 0 8px 18px rgba(245, 147, 0, .45), inset 0 -3px 6px rgba(140, 80, 0, .22); }
.xh-buc__o--2 .xh-huy { background: radial-gradient(circle at 32% 26%, #ffffff 0%, #dde4e9 46%, #a3b4c0 100%); color: #2f3f4a; box-shadow: 0 6px 14px rgba(70, 90, 110, .26), inset 0 -3px 6px rgba(60, 80, 95, .18); }
.xh-buc__o--3 .xh-huy { background: radial-gradient(circle at 32% 26%, #ffdcb0 0%, #f09b4a 46%, #cf6f1c 100%); color: #572600; box-shadow: 0 6px 14px rgba(207, 111, 28, .35), inset 0 -3px 6px rgba(120, 60, 10, .22); }
/* Vương miện nhỏ trên huy chương vàng. */
.xh-buc__o--1 .xh-huy::before { content: ""; position: absolute; left: 50%; top: -9px; width: 22px; height: 14px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 18'%3E%3Cpath fill='%23e08900' d='M2.6 16.4 1 4 7.7 8.8 14 1.1l6.3 7.7L27 4l-1.6 12.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Chốt đúng 2 dòng (2 x line-height) để chữ không bị cắt mất chân. */
.xh-buc__ten { display: -webkit-box; height: 2.6em; overflow: hidden; color: #17233d; font-size: .82rem; font-weight: 700; line-height: 1.3; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.xh-buc__o:hover .xh-buc__ten { color: var(--khoi-chu); }
.xh-buc__diem { margin-top: 5px; color: var(--khoi-chu); font-size: 1.2rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.xh-buc__diem small { margin-left: 3px; color: #8a97ad; font-size: .68rem; font-weight: 600; }
/* Bục bo tròn bốn góc, chuyển màu chéo, cách thanh đáy một khoảng - theo ảnh mẫu. */
.xh-buc__cot { position: relative; display: grid; place-items: center; width: 100%; margin-top: 10px; border-radius: 16px; background-image: linear-gradient(100deg, rgba(0, 0, 0, .12) 0%, rgba(255, 255, 255, .2) 100%); }
.xh-buc__o--1 .xh-buc__cot { height: 76px; background-color: var(--khoi-1); box-shadow: 0 8px 18px color-mix(in srgb, var(--khoi-1) 30%, transparent); }
.xh-buc__o--2 .xh-buc__cot { height: 56px; background-color: var(--khoi-2); }
.xh-buc__o--3 .xh-buc__cot { height: 50px; background-color: var(--khoi-3); }
/* Vòng nguyệt quế: logo ở /assets/images/icon/nguyetque.png (nét trắng, nền trong).
   Dùng mask nên màu vòng do CSS quyết định, đổi màu không cần xuất lại ảnh. */
.xh-buc__cot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--vong-rong);
    height: var(--vong-cao);
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, .92);
    -webkit-mask: url('../images/icon/nguyetque.png') center / contain no-repeat;
    mask: url('../images/icon/nguyetque.png') center / contain no-repeat;
    pointer-events: none;
}
.xh-buc__so { position: relative; z-index: 2; display: grid; place-items: center; width: var(--vong-rong); height: var(--vong-cao); color: #fff; font-size: 1.15rem; font-weight: 800; text-shadow: 0 1px 3px rgba(6, 30, 60, .45); }
/* Thanh đáy dạng viên thuốc trắng, thụt vào trong thẻ - theo ảnh mẫu. */
.xh-khoi__chan { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; margin: 12px 0 0; padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .9); color: #17233d; font-size: .86rem; font-weight: 700; text-decoration: none; box-shadow: 0 2px 10px rgba(20, 45, 85, .06); }
.xh-khoi__chan svg:first-child { flex: none; color: var(--khoi-chu); }
.xh-khoi__chan svg:last-child { margin-left: auto; flex: none; color: #9aa7bd; }
.xh-khoi__chan:hover { color: var(--khoi-chu); background: #fff; }
@media (max-width: 575px) {
    .xh-vinh-danh { grid-template-columns: minmax(0, 1fr); }
    .xh-khoi { padding: 16px 12px 14px; }
    .xh-khoi::after { width: 82px; height: 76px; }
    .xh-buc { gap: 7px; }
    .xh-buc__ten { font-size: .76rem; }
    .xh-buc__diem { font-size: 1.04rem; }
    .xh-buc__o--1 .xh-buc__cot { height: 66px; }
    .xh-buc__o--2 .xh-buc__cot { height: 50px; }
    .xh-buc__o--3 .xh-buc__cot { height: 44px; }
    .xh-khoi { --vong-rong: 46px; --vong-cao: 35px; }
    .xh-buc__so { font-size: .9rem; }
}

/* =============================================================================
   Phiếu khảo sát (/ks/{loai}.html): cùng phong cách các trang khác - khung giữa trang,
   thẻ bo góc, đáp án dạng ô chọn có viền, mục đang chọn tô xanh.
============================================================================= */
.content-wrapper .page-content .content-body__survey-details { max-width: 1140px; margin: 0 auto 56px; padding: 0 16px; }
.content-wrapper .page-content .content-body__survey-details .survey-forms { padding: 0; }

/* Đầu phiếu */
.phieu-dau { margin: 0 0 24px; padding: 28px 32px; border-radius: 18px; background: linear-gradient(180deg, #f5f9ff 0%, #eaf2fc 100%); border: 1px solid #e0ebf8; text-align: center; }
.phieu-dau__nhan { display: inline-flex; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--ddci-xanh); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(6, 56, 111, .08); }
.phieu-dau__ten { margin: 12px auto 16px; max-width: 860px; color: var(--ddci-navy); font-size: clamp(1.15rem, .95rem + .8vw, 1.55rem); font-weight: 800; line-height: 1.4; text-transform: uppercase; }
.phieu-dau__goi-y { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.phieu-dau__goi-y span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e0ebf8; color: var(--ddci-chu-phu); font-size: .85rem; }
.phieu-dau__goi-y i { color: var(--ddci-xanh); }

/* Thẻ thông tin (mã khảo sát, chọn đơn vị) và các mục câu hỏi */
.content-wrapper .page-content .content-body__survey-details .survey-forms .card {
    margin-bottom: 22px;
    border: 1px solid #e3e8ef !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(6, 56, 111, .06);
}
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-info .card .card-header:empty,
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-info .card > .card-header { padding: 0; border: 0; background: transparent; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-info .card .card-body { padding: 22px 24px; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .forms-survey .card .card-header { padding: 14px 22px; font-size: 1.02rem; letter-spacing: .01em; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .forms-survey .card .card-body { padding: 20px 22px 10px; }
.content-wrapper .page-content .content-body__survey-details .form-control {
    min-height: 44px;
    border: 1px solid #d5e0ec !important;
    border-radius: 10px !important;
}
.content-wrapper .page-content .content-body__survey-details .form-control:focus { border-color: var(--ddci-xanh) !important; box-shadow: 0 0 0 3px rgba(10, 95, 174, .15) !important; }
.content-body__survey-details .inputServeyCode input { width: 220px !important; letter-spacing: .08em; font-weight: 600; }

/* Câu hỏi */
.content-wrapper .page-content .content-body__survey-details .survey-forms .forms-survey .form-question p { color: var(--ddci-chu); font-size: 1rem !important; font-weight: 500; line-height: 1.6; }

/* Đáp án: mỗi lựa chọn là một ô có viền, bấm cả ô để chọn.
   Cột rộng theo chữ (auto) thay vì chia đều: đáp án ngắn ("Đồng ý") nhường chỗ cho đáp
   án dài ("Hoàn toàn không đồng ý") để cả hàng nằm một dòng; chữ quá dài thì vẫn tự
   xuống dòng. justify-content: stretch để phần trống chia cho các ô giãn ra - CSS cũ đặt
   space-between thì chỗ trống thành khe hở giữa các ô. Lề trong ô và cỡ chữ đáp án thu
   nhẹ cho các bộ 4 mức dài (VD "Khó khăn ở mức độ…") vẫn đủ một dòng ở khung ~1000px. */
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer { grid-template-columns: repeat(4, auto); justify-content: stretch; gap: 8px; margin: 6px 0 14px; }
@media (max-width: 991px) { .content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check {
    position: relative;
    /* Ô trong cùng hàng cao bằng ô nhiều dòng nhất: căn chữ giữa theo chiều dọc cho
       thẳng với nút tròn, không để chữ dính mép trên. */
    display: flex;
    align-items: center;
    width: auto !important;
    margin: 0 !important;
    padding: 9px 10px 9px 36px !important;
    border: 1px solid #e3e8ef;
    border-radius: 10px;
    background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check .form-check-input { position: absolute; left: 12px; top: 50%; margin: 0 !important; transform: translateY(-50%); cursor: pointer; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check .form-check-label { display: block; flex: 1 1 auto; min-width: 0; cursor: pointer; color: var(--ddci-chu); font-size: .95rem; line-height: 1.45; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check .form-check-label strong { color: var(--ddci-xanh); font-weight: 700; margin-right: 2px; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:hover { border-color: #bcd3f7; background: #f7faff; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:has(.form-check-input:checked) { border-color: var(--ddci-xanh); background: #eaf3fc; box-shadow: inset 0 0 0 1px var(--ddci-xanh); }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:has(.form-check-input:checked) .form-check-label { color: var(--ddci-navy); font-weight: 600; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:has(.form-check-input:disabled) { background: #fafbfd; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check-input:checked { background-color: var(--ddci-xanh); border-color: var(--ddci-xanh); }
/* Bấm vào đâu trong ô đáp án cũng chọn: nhãn có lớp phủ trong suốt kín cả ô (ô trong cùng
   hàng lưới cao bằng nhau nên chữ ngắn thì thừa khoảng trống, trước đây bấm vào đó không ăn). */
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check { cursor: pointer; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check .form-check-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:has(.form-check-input:disabled),
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .form-check:has(.form-check-input:disabled) .form-check-label { cursor: not-allowed; }

/* Nút gửi phiếu */
.content-body__survey-details .box-submit { display: flex; justify-content: center; }
.content-body__survey-details .box-submit .btn-submitSurvey {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--ddci-dai) !important;
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(10, 95, 174, .3);
    transition: transform .2s, box-shadow .2s;
}
.content-body__survey-details .box-submit .btn-submitSurvey:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(10, 95, 174, .38); }
.content-body__survey-details .box-submit .btn-submitSurvey i,
.content-body__survey-details .box-submit .btn-submitSurvey span { color: #fff !important; }

@media (max-width: 767px) {
    .content-wrapper .page-content .content-body__survey-details { padding: 0 12px; }
    .phieu-dau { padding: 20px 16px; border-radius: 14px; }
    .phieu-dau__goi-y span { font-size: .8rem; }
    .content-wrapper .page-content .content-body__survey-details .survey-forms .form-info .card .card-body { padding: 16px; }
    .content-wrapper .page-content .content-body__survey-details .survey-forms .forms-survey .card .card-header { padding: 12px 16px; font-size: .95rem; }
    .content-wrapper .page-content .content-body__survey-details .survey-forms .forms-survey .card .card-body { padding: 16px 14px 6px; }
    .content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer { grid-template-columns: minmax(0, 1fr); }
    .content-body__survey-details .inputServeyCode input { width: 100% !important; }
    .content-body__survey-details .box-submit .btn-submitSurvey { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- Bảng xếp hạng qua các kỳ */
#dataTable tbody td { padding: 9px 10px; vertical-align: middle; }
/* Cột STT và các cột theo năm căn giữa; chỉ cột tên đơn vị căn trái.
   Cần !important vì hàng mang class .align-left của giao diện cũ. */
#dataTable tbody tr:not([data-dau]) > td:first-child { text-align: center !important; color: #8a97ad; font-size: .86rem; }
#dataTable tbody tr:not([data-dau]) > td:nth-child(n+3) { text-align: center !important; }
#dataTable .lien-ket-don-vi { font-weight: 400; }
#dataTable thead th, #dataTable thead th .th-inner,
.bootstrap-table .fixed-table-header thead th .th-inner { font-weight: 600; }
/* Body có thanh cuộn dọc; luôn chừa rãnh đó. Header phải trừ cùng độ rộng
   (xem xhKhopThanhCuon) kẻo mũi sắp xếp cột cuối tràn vào chỗ thanh cuộn. */
.xh-bang-boc .fixed-table-body { scrollbar-gutter: stable; }

/* Phân biệt các năm KHÔNG bằng nền xám xanh hay màu riêng mỗi năm (rối, đụng màu dữ liệu):
   ô năm dùng chung nền / sọc với cả hàng, chữ năm đậm màu navy, vạch xám 2px ngăn đầu mỗi
   khối năm - màu trong bảng chỉ còn để mang nghĩa (nhóm, tăng / giảm, chưa đủ phiếu). */
.xh-bang-boc .fixed-table-header thead th.table-header__title-row_one.xh-nam .th-inner,
.xh-bang-boc #dataTable thead th.table-header__title-row_one.xh-nam .th-inner {
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.xh-bang-boc .fixed-table-header thead th.xh-nam--dau,
.xh-bang-boc #dataTable thead th.xh-nam--dau,
.xh-bang-boc #dataTable tbody tr:not([data-dau]) > td.xh-nam--dau {
    border-left: 2px solid #9aa8bb !important;
}
/* Trên đầu bảng nền xanh: vạch ngăn năm màu trắng mờ. */
.xh-bang-boc .fixed-table-header thead th.xh-nam--dau,
.xh-bang-boc #dataTable thead th.xh-nam--dau { border-left-color: rgba(255, 255, 255, .6) !important; }

/* Ô giá trị: số rồi tới mức tăng/giảm so với năm liền trước */
#dataTable .xh-o { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
/* Ô có số: con số canh giữa ô, mức tăng / giảm treo ngay bên phải con số (không chiếm chỗ) -
   có hay không có mũi tên thì số vẫn đứng giữa cột, các dòng dóng thẳng. */
#dataTable .xh-o:has(> .xh-gt) { display: inline-block; position: relative; font-variant-numeric: tabular-nums; }
/* Bảng xếp hạng: cột Điểm đủ rộng cho số ở giữa + mũi tên treo bên phải; cột Hạng, Nhóm gọn lại. */
.xh-bang-boc #dataTable tbody td.xh-nam--dau { width: 78px; }
.xh-bang-boc #dataTable tbody td.xh-nam--dau + td { min-width: 150px; }
.xh-bang-boc #dataTable tbody td.xh-nam--dau + td + td:not(.xh-nam--dau) { width: 86px; }
#dataTable .xh-o:has(> .xh-gt) > .xh-lech {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 5px;
    transform: translateY(-50%);
    white-space: nowrap;
}
#dataTable .xh-gt { font-size: .95rem; font-weight: 400; color: #1f3350; }
#dataTable .xh-lech { font-size: .7rem; font-weight: 400; line-height: 1; }
#dataTable .xh-lech.tang { color: #15803d; }
#dataTable .xh-lech.giam { color: #dc2626; }
/* Cảnh báo độ tin cậy (số phiếu dưới cỡ mẫu tối thiểu): dấu ⚠ treo bên trái con số, giải thích
   ở dòng chú thích dưới bảng (.xh-tin-cay). */
#dataTable .xh-o:has(> .xh-gt) > .xh-canh {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 4px;
    transform: translateY(-50%);
    color: #b45309;
    font-size: .78rem;
    line-height: 1;
}
.xh-tin-cay { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: .82rem; color: #475569; }
.xh-tin-cay .xh-canh-chu { color: #b45309; }
/* Chưa đủ phiếu: nhãn chữ trong ô xếp hạng (bảng không dùng chú thích, tooltip). */
#dataTable .xh-chua { display: inline-block; max-width: 4.8em; color: #64748b; font-size: .76rem; font-weight: 400; line-height: 1.2; white-space: normal; }
/* Cột Nhóm của năm (Rất tốt / Tốt / Khá / Chưa tốt): chỉ chữ màu, màu theo thang S_RankLevel
   (pha tối nhẹ cho đọc được trên nền trắng). */
#dataTable .xh-xep-loai { color: color-mix(in srgb, var(--mau) 82%, #000); font-size: .85rem; font-weight: 500; white-space: nowrap; }

/* Dòng tên khối: chữ đậm trên nền trắng, không biểu tượng, không tô màu theo khối;
   bấm để mở / đóng cả khối cho gọn bảng */
#dataTable tr.xh-nhom { --nhom-chu: #0b2a4a; --nhom-nen: #ffffff; }
#dataTable tr.xh-nhom > td {
    --bs-table-accent-bg: transparent;
    padding: 0;
    background-color: var(--nhom-nen) !important;
    border-left: 0;
    border-right: 0;
}
#dataTable .xh-nhom__nut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    color: var(--nhom-chu);
    font: inherit;
    font-size: .95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
#dataTable .xh-nhom__ten { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
#dataTable .xh-nhom__ten svg { flex: none; }
#dataTable .xh-nhom__dem { display: inline-flex; align-items: center; flex: none; gap: 6px; padding: 3px 10px; border: 1px solid #d3dce7; border-radius: 999px; background: #ffffff; color: #4a5a72; font-size: .76rem; font-weight: 500; }
/* Mở: mũi chỉ lên (bấm để thu gọn). Đóng: mũi chỉ xuống (bấm để mở ra). */
#dataTable .xh-nhom__dem svg { transform: rotate(180deg); transition: transform .18s ease; }
#dataTable tr.xh-nhom--dong .xh-nhom__dem svg { transform: rotate(0deg); }
#dataTable .xh-nhom__nut:hover .xh-nhom__dem { background: #fff; color: var(--nhom-chu); }

/* Phiếu khảo sát - mục "Thông tin chung của doanh nghiệp" (_BusinessQuestions): cùng kiểu
   các mục câu hỏi - đầu mục dải màu, câu có lề, ô nhập bo góc, đáp án dạng ô chọn có viền. */
.content-body__survey-details .khoi-thong-tin { margin-top: 22px; }
.content-body__survey-details .khoi-thong-tin .card-header { padding: 14px 22px; border: 0; background: var(--ddci-dai) !important; color: #fff; font-weight: 600; font-size: 1.02rem; text-transform: uppercase; }
.content-body__survey-details .khoi-thong-tin .sub-form-answer { padding: 20px 22px 6px; }
.content-body__survey-details .khoi-thong-tin .bq-question { margin-bottom: 16px !important; color: var(--ddci-chu); line-height: 1.6; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-question { font-size: 1rem; text-align: left; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-question b { color: var(--ddci-navy); }
.content-body__survey-details .khoi-thong-tin .bq-dong-con { padding-left: 22px; }
.content-body__survey-details .khoi-thong-tin textarea.bq-text { line-height: 1.5; padding-top: 8px; padding-bottom: 8px; white-space: pre-wrap; word-break: break-word; }
.content-body__survey-details .khoi-thong-tin .bq-text { min-height: 40px; margin: 4px 6px !important; border: 1px solid #d5e0ec; border-radius: 10px; font-size: .95rem; }
.content-body__survey-details .khoi-thong-tin .bq-text:focus { border-color: var(--ddci-xanh); box-shadow: 0 0 0 3px rgba(10, 95, 174, .15); }
.content-body__survey-details .khoi-thong-tin .bq-question .row { --bs-gutter-x: 10px; row-gap: 8px; margin-top: 8px !important; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check {
    position: relative; height: 100%; margin: 0; padding: 9px 12px 9px 40px; border: 1px solid #e3e8ef; border-radius: 10px;
    background: #fff; transition: border-color .15s, background .15s;
}
.content-body__survey-details .khoi-thong-tin .bq-question .form-check-input { position: absolute; left: 14px; top: 12px; margin: 0; cursor: pointer; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check-label { display: block; cursor: pointer; line-height: 1.45; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check:hover { border-color: #bcd3f7; background: #f7faff; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check:has(.form-check-input:checked) { border-color: var(--ddci-xanh); background: #eaf3fc; box-shadow: inset 0 0 0 1px var(--ddci-xanh); }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check:has(.form-check-input:checked) .form-check-label { color: var(--ddci-navy); font-weight: 600; }
.content-body__survey-details .khoi-thong-tin .form-check-input:checked { background-color: var(--ddci-xanh); border-color: var(--ddci-xanh); }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check { position: relative; cursor: pointer; }
.content-body__survey-details .khoi-thong-tin .bq-question .form-check .form-check-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Trang phiếu: chưa chọn đơn vị thì giấu mọi câu hỏi, chỉ hiện dòng nhắc. */
.forms-survey.chua-chon-don-vi > :not(.bang-chon-don-vi) { display: none !important; }
.forms-survey:not(.chua-chon-don-vi) > .bang-chon-don-vi { display: none; }
.bang-chon-don-vi { display: flex; align-items: center; gap: 14px; margin: 6px 0 24px; padding: 18px 22px; border: 1px dashed #b9cde4; border-radius: 14px; background: #f5f9fe; color: var(--ddci-navy); }
.bang-chon-don-vi__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 46px; height: 46px; border-radius: 12px; background: #e3eefb; color: var(--ddci-xanh); }
.bang-chon-don-vi b { display: block; font-size: 1.02rem; }
.bang-chon-don-vi span:not(.bang-chon-don-vi__icon) { display: block; color: #5b6b7d; font-size: .92rem; }
/* Ô mã khảo sát ở trang phiếu chỉ để xem; đổi mã ở trang /ks. */
.inputServeyCode input[readonly] { background: #f1f5f9; cursor: default; font-weight: 600; letter-spacing: .04em; }
/* Đáp án không hợp loại mã khảo sát: vẫn hiện nhưng mờ, không chọn được. */
.content-body__survey-details .khoi-thong-tin .tu-ma-khong-duoc .form-check { opacity: .45; background: #f6f7f9; cursor: not-allowed; }
.content-body__survey-details .khoi-thong-tin .tu-ma-khong-duoc .form-check:hover { border-color: #e3e8ef; background: #f6f7f9; }
.content-body__survey-details .khoi-thong-tin .tu-ma-khong-duoc .form-check-input,
.content-body__survey-details .khoi-thong-tin .tu-ma-khong-duoc .form-check-label { cursor: not-allowed; }
/* Câu lấy từ mã khảo sát và khoá: ô nhập nền xám nhạt, kèm nhãn nhỏ. */
.content-body__survey-details .khoi-thong-tin .khoa-tu-ma .bq-text { background: #f1f5f9; color: var(--ddci-navy); font-weight: 600; }
.content-body__survey-details .khoi-thong-tin .tu-ma-nhan { margin-left: 6px; color: #6b7a8c; font-size: .82rem; font-weight: 400; font-style: italic; }
/* Mục "Thông tin người trả lời phiếu": tách khỏi các câu mục I, ghi chú in sau các dòng. */
.content-body__survey-details .khoi-nguoi-tra-loi { margin: 10px 0 18px; padding: 16px 18px 4px; border: 1px solid #dfe8f2; border-radius: 12px; background: #f7fafd; }
.content-body__survey-details .khoi-nguoi-tra-loi__tieu-de { margin-bottom: 12px; padding-left: 10px; border-left: 4px solid var(--ddci-vang); color: var(--ddci-navy); font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; }
.content-body__survey-details .khoi-nguoi-tra-loi .bq-question { margin-bottom: 10px !important; }
.content-body__survey-details .khoi-nguoi-tra-loi .bq-text { background: #fff; }
.content-body__survey-details .khoi-nguoi-tra-loi__ghi-chu { margin: 0 0 12px; color: #5b6b7d; font-size: .92rem; line-height: 1.55; }
.content-body__survey-details .khoi-thong-tin__cam-on { margin: 6px 22px 22px; padding: 14px 18px; border-radius: 12px; background: var(--ddci-xanh-nhat); color: var(--ddci-navy); line-height: 1.6; }
@media (max-width: 767px) {
    .content-body__survey-details .khoi-thong-tin .sub-form-answer { padding: 16px 14px 4px; }
    .content-body__survey-details .khoi-thong-tin .bq-text { width: 100% !important; margin: 6px 0 !important; }
    .content-body__survey-details .khoi-thong-tin__cam-on { margin: 6px 14px 16px; }
}

/* Hồ sơ đơn vị: ô chọn kỳ đủ rộng cho nhãn có đợt ("2025 – Đợt 2"). */
#sltYear, #sltYearMobile, #sltYear + .select2-container, #sltYearMobile + .select2-container { min-width: 190px !important; }

/* Hộp thoại sau khi gửi phiếu: bước 1 chọn loại đơn vị, bước 2 chọn đơn vị */
.tk-xong { text-align: left; }
.tk-xong__dau { text-align: center; margin-bottom: 18px; }
.tk-xong__dau-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.tk-xong__dau h4 { margin: 0 0 6px; color: var(--ddci-navy); font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
.tk-xong__dem { margin: 0; color: var(--ddci-chu-phu); }
.tk-xong__dem b { color: #b91c1c; }
.tk-buoc { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #d6e3f1; }
.tk-buoc__nhan { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ddci-navy); font-weight: 700; }
.tk-buoc__nhan > span:first-child { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ddci-dai); color: #fff; font-size: .8rem; }
.tk-buoc__goi-y { margin: 8px 0 0; color: var(--ddci-chu-phu); font-size: .85rem; }
.tk-loai { display: grid; gap: 10px; }
.tk-loai__dang-tai { color: var(--ddci-chu-phu); font-size: .9rem; }
.tk-loai__the { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 14px; border: 1.5px solid #d5e0ec; border-radius: 12px; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.tk-loai__the:hover { border-color: var(--ddci-xanh); background: #f5f9ff; }
.tk-loai__the--chon { border-color: var(--ddci-xanh); background: #eaf3fc; box-shadow: inset 0 0 0 1px var(--ddci-xanh); }
.tk-loai__the--du { cursor: not-allowed; opacity: .6; background: #f8fafc; }
.tk-loai__the--du:hover { border-color: #d5e0ec; background: #f8fafc; }
.tk-loai__ten { color: var(--ddci-navy); font-weight: 700; font-size: 1rem; }
.tk-loai__dem { color: var(--ddci-chu-phu); font-size: .85rem; }
.tk-loai__nhan { position: absolute; top: 10px; right: 12px; padding: 2px 8px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: .72rem; font-weight: 700; }
@media (min-width: 576px) { .tk-loai { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tk-loai__nhan { position: static; margin-top: 4px; } }
/* Danh sách chọn đơn vị trong hộp thoại (gắn vào body) phải nổi trên lớp hộp thoại jconfirm. */
body > .select2-container.select2-container--open { z-index: 100000000; }

/* ---------------------------------------------------------------- Thanh cuộn
   CSS gộp đặt thanh cuộn rộng 4px, con trượt #e4e4e4 trên nền trắng - gần như không thấy,
   khó biết đang ở đâu trên phiếu khảo sát rất dài. Thay bằng thanh rộng hơn, con trượt
   xanh xám rõ trên rãnh nhạt, rê chuột / kéo thì chuyển xanh giao diện. */
::-webkit-scrollbar { width: 12px; height: 12px; background-color: #eef2f7; }
::-webkit-scrollbar-track { background-color: #eef2f7; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; }
::-webkit-scrollbar-thumb {
    border: 3px solid #eef2f7;
    border-radius: 999px;
    background-color: #9fb3cc;
    min-height: 48px; /* phiếu dài ~27.000px, con trượt mặc định chỉ còn vài px */
    box-shadow: none;
    -webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:hover { background-color: #5b82b0; }
::-webkit-scrollbar-thumb:active { background-color: var(--ddci-xanh); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background-color: #eef2f7; }
/* Khung cuộn trong hộp thoại (jconfirm) cũng theo kiểu này thay cho thanh 3px màu đen. */
.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar { width: 8px; }
.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-track { background: transparent; }
.jconfirm .jconfirm-box div.jconfirm-content-pane::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 999px; background: #9fb3cc; }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: auto; scrollbar-color: #9fb3cc #eef2f7; }
}

/* Câu chọn nhiều phương án (vd. H1 "chọn 3 yếu tố"): gợi ý thành một dòng phía trên,
   các phương án trải 4 cột như câu chọn một - trước đây gợi ý chiếm cột 1 còn cả danh
   sách bị dồn vào cột 2 của lưới. Phương án bị khoá khi đã chọn đủ số thì mờ hẳn. */
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer:has(> .chon-nhieu) { display: block; }
.content-body__survey-details .chon-nhieu-goi-y { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ddci-chu-phu); font-size: .9rem; }
.content-body__survey-details .chon-nhieu-dem { padding: 2px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 600; font-size: .85rem; }
.content-body__survey-details .chon-nhieu-dem.du { background: #dcfce7; color: #15803d; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .chon-nhieu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .chon-nhieu .form-check:has(.form-check-input:disabled:not(:checked)) { opacity: .5; cursor: not-allowed; }
@media (max-width: 991px) { .content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .chon-nhieu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .content-wrapper .page-content .content-body__survey-details .survey-forms .form-answer .chon-nhieu { grid-template-columns: minmax(0, 1fr); } }

/* Khối thông tin đơn vị đã khai ở phiếu trước (survey.action.js LoadDataSurvey). */
.bq-ghi-chu-da-khai { margin: 0 0 14px; padding: 10px 14px; border-left: 4px solid #1a6fe0; border-radius: 8px; background: #eef5ff; color: #0b3d75; font-size: .92rem; }
.bq-question.bq-bo-sung .form-question::after { content: "(điền bổ sung)"; margin-left: 6px; color: #b45309; font-size: .8rem; font-style: italic; font-weight: 400; }

/* ---------------------------------------------------------------- Danh sách thả xuống (select2)
   Một giao diện cho MỌI ô select2 của portal (phiếu khảo sát, hộp thoại sau khi gửi phiếu, hồ sơ
   đơn vị, hỏi đáp...), cùng dáng với ô chọn kỳ (.ck, chon-ky.js): ô bo góc nền trắng, mũi tên mảnh
   xoay khi mở; danh sách là thẻ bo góc tách khỏi ô, đổ bóng, mục bo góc, mục đang chọn nền xanh
   nhạt kèm dấu tích. Ghi đè bộ select2 gốc và phần chỉnh cũ trong ddci.css nên nhiều chỗ cần !important. */
.select2-container { max-width: 100%; }
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 44px; height: auto !important;
    border: 1px solid #d5e0ec !important; border-radius: 12px !important; background: #fff !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.select2-container .select2-selection--single:hover,
.select2-container .select2-selection--multiple:hover { border-color: #bcd0ea !important; }
.select2-container--focus .select2-selection--single,
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--single,
.select2-container--open .select2-selection--multiple {
    border-color: #1a6fe0 !important; box-shadow: 0 0 0 3px rgba(26, 111, 224, .14); outline: 0;
}
/* Mở danh sách không còn bẻ vuông góc của ô (select2 mặc định nối ô với danh sách). */
.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--open.select2-container--above .select2-selection--multiple { border-radius: 12px !important; }
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 64px 0 14px !important; color: #1e293b !important; font-size: .95rem; font-weight: 500;
    line-height: 42px !important;
}
.select2-container .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; font-weight: 400; }
/* Mũi tên: vẽ lại mảnh như ô chọn kỳ, xoay lên khi mở. Luôn hiện: nhiều chỗ JS cũ .hide() mũi tên
   khi đã chọn vì nút × từng đè lên nó - giờ × nằm riêng trước mũi tên nên không cần ẩn nữa. */
.select2-container .select2-selection--single .select2-selection__arrow {
    display: block !important; top: 0 !important; right: 12px !important; width: 18px !important; height: 100% !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
    transition: transform .2s;
}
.select2-container .select2-selection--single .select2-selection__arrow b,
.select2-container .select2-selection--single .select2-selection__arrow::before { display: none !important; }
.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a6fe0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Nút xoá (×): vòng tròn nhỏ nằm trước mũi tên. */
.select2-container .select2-selection--single .select2-selection__clear {
    position: absolute !important; top: 50% !important; right: 38px !important; float: none !important;
    width: 22px; height: 22px !important; margin: -11px 0 0 !important; padding: 0 !important;
    border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .15s;
}
.select2-container .select2-selection--single .select2-selection__clear span { display: none; }
.select2-container .select2-selection--single .select2-selection__clear::before {
    content: ""; position: absolute; top: 0 !important; right: 0 !important; bottom: 0; left: 0;
    width: auto !important; height: auto !important; transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") no-repeat center / 12px 12px !important;
}
.select2-container .select2-selection--single .select2-selection__clear:hover { background: #eef2f7; }
.select2-container--disabled .select2-selection--single,
.select2-container--disabled .select2-selection--multiple { background: #f1f5f9 !important; cursor: not-allowed !important; }
.select2-container--disabled .select2-selection__rendered { color: #64748b !important; }

/* Nhiều lựa chọn: thẻ viên thuốc xanh nhạt. */
.select2-container .select2-selection--multiple { padding: 4px 36px 4px 8px !important; }
.select2-container .select2-selection--multiple .select2-selection__choice {
    margin: 3px 4px 3px 0 !important; padding: 3px 10px 3px 26px !important;
    border: 0 !important; border-radius: 999px !important; background: #e8f1fd !important;
    color: #0b4fb3; font-size: .88rem; font-weight: 500;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    top: 50% !important; left: 6px !important; width: 16px; height: 16px; margin-top: -8px; padding: 0 !important;
    border: 0 !important; border-radius: 50%; color: #3b6db3 !important; line-height: 16px; text-align: center;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover { background: #cfe0f7 !important; color: #0b4fb3 !important; }

/* Danh sách mở: thẻ tách khỏi ô 8px, bo góc, đổ bóng, có khoảng đệm. */
.select2-dropdown {
    overflow: hidden; padding: 6px;
    border: 1px solid #e3eaf3 !important; border-radius: 16px !important; background: #fff;
    box-shadow: 0 14px 34px rgba(15, 40, 80, .14), 0 2px 6px rgba(15, 40, 80, .06);
    animation: s2-mo .16s ease-out;
}
.select2-dropdown--below { margin-top: 8px; }
.select2-dropdown--above { margin-top: -8px; animation-name: s2-mo-len; }
@keyframes s2-mo { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes s2-mo-len { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Ô tìm trong danh sách: bo góc, kính lúp bên trái. */
.select2-search--dropdown { padding: 2px 2px 6px !important; }
.select2-search--dropdown .select2-search__field {
    height: 38px; padding: 0 12px 0 34px !important;
    border: 1px solid #dbe5f1 !important; border-radius: 10px; outline: 0;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px;
    color: #1e293b; font-size: .92rem; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.select2-search--dropdown .select2-search__field:focus { border-color: #1a6fe0 !important; background-color: #fff; box-shadow: 0 0 0 3px rgba(26, 111, 224, .12); }

/* Mục: bo góc, di chuột nền xám xanh, mục đang chọn nền xanh nhạt + dấu tích. */
.select2-results > .select2-results__options {
    max-height: 300px !important; padding-right: 2px; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.select2-results > .select2-results__options::-webkit-scrollbar { width: 6px; }
.select2-results > .select2-results__options::-webkit-scrollbar-thumb { border-radius: 6px; background: #cbd5e1; }
.select2-results__option {
    position: relative; padding: 9px 36px 9px 12px !important; border-radius: 10px;
    color: #334155; font-size: .92rem; font-weight: 500; line-height: 1.4;
    transition: background-color .1s, color .1s;
}
.select2-results__option + .select2-results__option { margin-top: 2px; }
.select2-container--default .select2-results__option--selected {
    background: #e8f1fd !important; color: #0b4fb3 !important; font-weight: 600;
}
.select2-results__option--selected::after {
    content: ""; position: absolute; top: 50%; right: 12px; width: 15px; height: 15px; margin-top: -7.5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b4fb3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Mục đang trỏ (di chuột / phím mũi tên): nền chuyển màu xanh như thẻ khối đang chọn (.xh-khoi-the),
   chữ trắng; đặt sau mục đang chọn để trỏ vào mục đã chọn cũng đổi màu, dấu tích thành trắng. */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--ddci-dai-chon) !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(22, 119, 224, .3);
}
.select2-results__option--highlighted.select2-results__option--selected::after { filter: brightness(0) invert(1); }
.select2-container--default .select2-results__option--disabled,
.select2-container--default .select2-results__option[aria-disabled=true] { background: none !important; color: #a0aec0 !important; cursor: not-allowed; }
.select2-results__message { color: #64748b; font-size: .9rem; }
.select2-results__option--group { padding: 0 !important; }
.select2-results__group { padding: 8px 12px 4px !important; color: #64748b; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* Ô select thường (chưa gắn select2 / chon-ky): cùng dáng ô bo góc, mũi tên mảnh. */
select.form-control:not([multiple]):not(.xh-chon-ky):not(.select2-hidden-accessible),
select.form-select:not([multiple]):not(.xh-chon-ky):not(.select2-hidden-accessible) {
    -webkit-appearance: none; appearance: none; min-height: 44px; padding-right: 40px;
    border: 1px solid #d5e0ec; border-radius: 12px; cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 15px 15px;
}