/* ============================================================================
   ueh-theme.css — giao dien dung chung cho MOI project UEH.

   File nay nam tren CDN: sua o day la moi project doi theo. Vi vay:
     - CHI chua thu dung chung (token mau, noi mau vao Bootstrap, sidebar/topbar,
       vai chinh sua cho select2 / Tabulator).
     - KHONG them luat rieng cua mot project vao day. Project nao can rieng thi
       viet trong wwwroot/css/style.css cua no va nap SAU file nay.

   Thu tu nap CSS (dung thu tu nay, sai la mat mau):
     @cdn/css/ueh-font.css        <- @font-face
     @cdn/lib/bootstrap/...       <- Bootstrap goc
     @cdn/lib/font-awesome/...
     @cdn/css/ueh-theme.css       <- FILE NAY, ghi de mau cua Bootstrap
     ~/css/style.css              <- rieng tung project (co the khong co)

   Doi thuong hieu: chi sua khoi :root ngay duoi.
   ============================================================================ */
:root {
    /* --- Hai mau chinh (bang mau UEH) --- */
    --ueh:        #005f69;   /* UEH Blue   - PANTONE 7715C */
    --ueh-nhan:   #f26f33;   /* UEH Orange - PANTONE 1645C */

    /* Bien the cua mau chinh, suy ra tu #005f69 / #f26f33 */
    --ueh-dam:    #004a52;
    --ueh-nhat:   #e6f1f2;
    --ueh-nhan-dam:  #d95d24;
    --ueh-nhat-nhan: #fdeee6;

    /* Dang RGB de dung voi rgba(...) va de ghi de bien cua Bootstrap */
    --ueh-rgb:      0, 95, 105;
    --ueh-nhan-rgb: 242, 111, 51;

    /* Mau thuong hieu dung lam CHU — tach rieng khoi mau nen vi do tuong phan khac nhau.
       Che do sang: #005f69 tren nen trang = 7.39 (dat AAA).
       Che do toi doi gia tri nay, xem khoi [data-bs-theme="dark"] ben duoi. */
    --ueh-chu: var(--ueh);

    /* Chu dat tren nen cam. Chu TRANG tren #f26f33 chi dat 2.96 -> KHONG dat AA.
       Chu dam dat 5.21. Dung mau cam lam nen thi chu phai dam. */
    --chu-tren-nhan: #212529;

    /* --- Mau phu (bang mau thu hai), dung cho bieu do / nhan phan loai --- */
    --ueh-xanh-la:  #004b41;  /* PANTONE 3302C */
    --ueh-xanh-duong: #28418c;/* PANTONE 7687C */
    --ueh-xanh-tham: #1e2d5a; /* PANTONE 534C  */
    --ueh-tim:      #46236e;  /* PANTONE 269C  */
    --ueh-vang:     #ffd200;  /* PANTONE 109C  */

    /* --- Mau giao dien --- */
    --nen:      #f4f6f8;
    --nen-the:  #ffffff;
    --chu:      #212529;
    --chu-mo:   #6c757d;
    --vien:     #dee2e6;


    /* Du phong xep theo thu tu: font UEH -> font he thong. Co font he thong o cuoi
       thi mang cham / font loi van doc duoc, khong vo giao dien. */
    --font-ueh: "SVN-Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Bootstrap 5.3 tu doi bien cua no theo data-bs-theme; day la bien rieng cua minh. */
[data-bs-theme="dark"] {
    --ueh-nhat: #0d2a2d;
    --ueh-nhat-nhan: #3a2317;
    --nen:     #1a1d20;
    --nen-the: #242729;
    --chu:     #e9ecef;
    --chu-mo:  #adb5bd;
    --vien:    #3a3f44;

    /* #005f69 tren nen toi #242729 chi dat 2.03 — khong doc duoc.
       Ban sang hon nay dat 6.30. Mau NEN (--ueh) van giu nguyen vi chu trang
       tren #005f69 dat 7.39, van tot o che do toi. */
    --ueh-chu: #4db6c4;
    --ueh-chu-rgb: 77, 182, 196;
}

/* ---- Noi mau UEH vao Bootstrap ----
   Chi dat --bs-primary la KHONG du: cac rule .btn-primary / .text-primary cua
   Bootstrap duoc bien dich san tu Sass, khong doc bien do. Phai ghi de tung nhom. */
:root {
    --bs-primary: var(--ueh);
    --bs-primary-rgb: var(--ueh-rgb);
    --bs-link-color: var(--ueh-chu);
    --bs-link-color-rgb: var(--ueh-rgb);
    --bs-link-hover-color: var(--ueh-dam);
    --bs-focus-ring-color: rgba(var(--ueh-rgb), .25);
}

.btn-primary {
    --bs-btn-bg: var(--ueh);
    --bs-btn-border-color: var(--ueh);
    --bs-btn-hover-bg: var(--ueh-dam);
    --bs-btn-hover-border-color: var(--ueh-dam);
    --bs-btn-active-bg: var(--ueh-dam);
    --bs-btn-active-border-color: var(--ueh-dam);
    --bs-btn-disabled-bg: var(--ueh);
    --bs-btn-disabled-border-color: var(--ueh);
    --bs-btn-focus-shadow-rgb: var(--ueh-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ueh);
    --bs-btn-border-color: var(--ueh);
    --bs-btn-hover-bg: var(--ueh);
    --bs-btn-hover-border-color: var(--ueh);
    --bs-btn-active-bg: var(--ueh);
    --bs-btn-active-border-color: var(--ueh);
    --bs-btn-focus-shadow-rgb: var(--ueh-rgb);
}

/* Mau nhan: dung cho nut goi hanh dong chinh, nhan "moi", canh bao nhe. */
/* Chu DAM, khong phai trang: chu trang tren #f26f33 chi dat 2.96 (can >= 4.5). */
.btn-nhan {
    --bs-btn-color: var(--chu-tren-nhan);
    --bs-btn-bg: var(--ueh-nhan);
    --bs-btn-border-color: var(--ueh-nhan);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ueh-nhan-dam);
    --bs-btn-hover-border-color: var(--ueh-nhan-dam);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ueh-nhan-dam);
    --bs-btn-focus-shadow-rgb: var(--ueh-nhan-rgb);
}

.text-ueh   { color: var(--ueh-chu) !important; }
/* .text-nhan chi dung cho chu LON / DAM: #f26f33 tren nen trang dat 2.96,
   du cho tieu de co lon (nguong 3.0) nhung KHONG du cho chu thuong. */
.text-nhan  { color: var(--ueh-nhan) !important; }
.bg-ueh     { background-color: var(--ueh) !important; color: #fff; }
.bg-nhan    { background-color: var(--ueh-nhan) !important; color: var(--chu-tren-nhan); }

/* O nhap dang go: vien va vong sang theo mau UEH thay vi xanh Bootstrap. */
.form-control:focus,
.form-select:focus {
    border-color: var(--ueh);
    box-shadow: 0 0 0 .25rem rgba(var(--ueh-rgb), .25);
}

/* Thanh phan dang chon / dang hoat dong */
.form-check-input:checked {
    background-color: var(--ueh);
    border-color: var(--ueh);
}
.nav-pills .nav-link.active,
.page-item.active .page-link {
    background-color: var(--ueh);
    border-color: var(--ueh);
}
.page-link { color: var(--ueh); }

body {
    background: var(--nen);
    color: var(--chu);
    font-family: var(--font-ueh);
    font-size: 14px;
}

/* Bootstrap dat font-family rieng cho cac the nay, phai keo theo. */
.btn, .form-control, .form-select, .input-group-text,
.dropdown-menu, .modal, .table, .nav, .card, .badge, .alert {
    font-family: var(--font-ueh);
}

/* ============================================================================
   THANH MENU TREN (2 cap)

   Menu dai la chuyen thuong (HRM co 7 nhom, ~90 muc). Ba cho phai chiu duoc:
     1. Cap 1 qua rong     -> CUON NGANG, khong xuong dong, khong day trang tran ngang.
     2. Dropdown qua dai   -> cuon DOC ben trong chinh dropdown, khong day trang.
     3. Duoi 992px (gom)   -> vung menu mo ra cuon doc duoc, muc cuoi van bam toi.

   Chon cuon ngang thay vi gom vao "Them v": "Them" can JS do be rong va doi muc moi
   lan doi kich thuoc (giat luc tai), muc dang xem co the bi giau trong "Them" nen mat
   to sang, va dropdown long trong "Them" thanh 3 cap — trai thiet ke 2 cap.
   ============================================================================ */
:root {
    /* Chieu cao navbar — dropdown dung de tinh max-height. Doi padding menu thi doi ca day. */
    --qnp-nav-cao: 3rem;
}

.qnp-topnav {
    background: var(--ueh);
    padding: 0 .25rem;
    min-height: var(--qnp-nav-cao);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.qnp-topnav .navbar-brand {
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.qnp-topnav .navbar-brand:hover { color: #fff; }

/* Nut hamburger: vien trang mo thay vi vien toi mac dinh cua Bootstrap. */
.qnp-topnav .navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
.qnp-topnav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.qnp-topnav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25); }

/* ---- Muc menu cap 1 ---- */
.qnp-menu .nav-link {
    color: rgba(255, 255, 255, .85);
    padding: .75rem .85rem;
    white-space: nowrap;
}
.qnp-menu .nav-link:hover,
.qnp-menu .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); }

/* Muc dang xem: gach duoi mau nhan. box-shadow chu khong border -> khong doi chieu cao. */
.qnp-menu .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 -3px 0 var(--ueh-nhan);
}
.qnp-menu .nav-link i { width: 1.1em; text-align: center; }

/* ---- Dropdown cap 2 (chung ca hai che do) ---- */
.qnp-menu .dropdown-menu {
    border: 1px solid var(--vien);
    border-radius: .4rem;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .12);
    margin-top: 0;
    min-width: 14rem;
}
.qnp-menu .dropdown-item { padding: .5rem .9rem; }
.qnp-menu .dropdown-item.active,
.qnp-menu .dropdown-item:active {
    background: var(--ueh);
    color: #fff;
}
.qnp-menu .dropdown-item i { color: var(--chu-mo); }
.qnp-menu .dropdown-item.active i,
.qnp-menu .dropdown-item:hover i { color: inherit; }

/* ============================ MAN HINH >= 992px ============================ */
@media (min-width: 992px) {
    /* Vung menu: menu co gian, cum nut ben phai (sang/toi, ngon ngu, nguoi dung)
       giu nguyen kich thuoc. Thieu min-width:0 thi flex khong cho <ul> co lai,
       no day cum nut ra ngoai man hinh. */
    .qnp-topnav .navbar-collapse { min-width: 0; }
    .qnp-topnav .navbar-collapse > .qnp-menu-khung { flex: 0 1 auto; }
    .qnp-topnav .navbar-collapse > .ms-auto { flex-shrink: 0; }

    /* 1. CAP 1 QUA RONG -> CUON NGANG, an thanh cuon. */
    .qnp-topnav .qnp-menu {
        flex-wrap: nowrap;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;                 /* Firefox */
        -ms-overflow-style: none;
    }
    .qnp-topnav .qnp-menu::-webkit-scrollbar { display: none; }   /* Chrome / Edge / Safari */

    /* An thanh cuon thi phai co goi y "con nua": lop phu gradient o mep dang khuat.
       Dat tren KHUNG (.qnp-menu-khung, khong cuon) chu khong tren <ul> (dang cuon):
         - pseudo-element cua <ul> se troi theo noi dung khi cuon;
         - KHONG dung mask-image tren <ul>: mask ap len ca CON CHAU trong khung 946x45
           cua thanh menu -> dropdown fixed thot xuong duoi bi cat thanh trong suot,
           khong nhin thay, chuot xuyen qua. Da do bang elementFromPoint.
       Class do qnp-menu.js bat/tat theo vi tri cuon. */
    .qnp-topnav .qnp-menu-khung {
        position: relative;
        display: flex;
        min-width: 0;
    }
    .qnp-topnav .qnp-menu-khung::before,
    .qnp-topnav .qnp-menu-khung::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2.5rem;
        pointer-events: none;          /* khong chan bam vao muc ben duoi */
        opacity: 0;
        transition: opacity .15s;
    }
    .qnp-topnav .qnp-menu-khung::before { left: 0;  background: linear-gradient(to right, var(--ueh), transparent); }
    .qnp-topnav .qnp-menu-khung::after  { right: 0; background: linear-gradient(to left,  var(--ueh), transparent); }
    .qnp-topnav .qnp-menu-khung.qnp-con-trai::before,
    .qnp-topnav .qnp-menu-khung.qnp-con-phai::after { opacity: 1; }

    /* 2. DROPDOWN QUA DAI -> CUON DOC TRONG CHINH NO.

       BAY: overflow-x:auto o tren ep ca truc doc thanh auto (dac ta CSS), nen dropdown
       position:absolute nam trong <ul> se BI CAT CUT. Go bang position:fixed: khoi chua
       cua phan tu fixed la viewport -> khong bi <ul> cat.
       TOA DO do qnp-menu.js dat (top/left theo nut cha). KHONG dung top/left:auto de lay
       "vi tri tinh": da do, Chrome tinh vi tri do BO QUA do cuon cua <ul> -> menu da cuon
       ngang thi dropdown lech dung bang scrollLeft (199px o 1366, 541px o 1024).
       auto o day chi la du phong khi thieu JS.
       Selector du manh de thang ca .navbar-expand-lg .navbar-nav .dropdown-menu lan
       .dropdown-menu[data-bs-popper] (top:100%; left:0) cua Bootstrap. */
    .qnp-topnav .qnp-menu .dropdown-menu,
    .qnp-topnav .qnp-menu .dropdown-menu[data-bs-popper] {
        position: fixed;
        top: auto;
        left: auto;
        max-height: calc(100vh - var(--qnp-nav-cao) - 1rem);
        max-height: calc(100dvh - var(--qnp-nav-cao) - 1rem);   /* dien thoai: tru thanh dia chi */
        overflow-y: auto;
        overscroll-behavior: contain;          /* cuon het dropdown KHONG cuon tiep trang */
    }
}

/* ============================ MAN HINH < 992px ============================= */
@media (max-width: 991.98px) {
    /* 3. VUNG MENU GOM -> CUON DOC. Thieu thi tren dien thoai menu dai hon man hinh,
       muc cuoi khong bam toi duoc (navbar sticky, trang cuon thi menu cung troi theo). */
    .qnp-topnav .navbar-collapse {
        max-height: calc(100vh - var(--qnp-nav-cao));
        max-height: calc(100dvh - var(--qnp-nav-cao));
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Dropdown ve dang danh sach thut vao, khong noi ra ngoai. */
    .qnp-menu .nav-link.active { box-shadow: inset 3px 0 0 var(--ueh-nhan); }
    .qnp-menu .dropdown-menu {
        border: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, .15);
        margin: 0 0 .25rem .5rem;
    }
    .qnp-menu .dropdown-item { color: rgba(255, 255, 255, .85); }
    .qnp-menu .dropdown-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
    .qnp-menu .dropdown-item i { color: inherit; }
}


/* ---- Vung noi dung ---- */
/* Chi khoang cach DOC. KHONG dat max-width / padding ngang / margin auto o day:
   be ngang do VIEW quyet dinh bang .container hoac .container-fluid cua Bootstrap.
   Man hinh bang (DonVi, NhanSu) can full, man hinh form hep thi khong — layout khong
   biet truoc nen khong duoc chon thay. */
.qnp-than {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.qnp-the {
    background: var(--nen-the);
    border: 1px solid var(--vien);
    border-radius: .5rem;
}

.qnp-the-dau {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--vien);
}


/* ---- Vai chinh sua nho cho thu vien ---- */
table.dataTable tbody tr:hover { background: var(--ueh-nhat); }
.select2-container--bootstrap-5 .select2-selection { min-height: 38px; }

/* ---- QNPSheet (Tabulator) ----
   Tabulator tu dat mau nen rieng -> che do toi se tro thanh o trang.
   Noi lai vao bien chu de de hai che do deu dung. */
.tabulator {
    background: var(--nen-the);
    border-color: var(--vien);
    font-size: 14px;
}
.tabulator .tabulator-header,
.tabulator .tabulator-header .tabulator-col {
    background: var(--ueh-nhat);
    border-color: var(--vien);
    color: var(--chu);
}
.tabulator .tabulator-row {
    background: var(--nen-the);
    color: var(--chu);
    border-color: var(--vien);
}
.tabulator .tabulator-row.tabulator-row-even { background: var(--nen); }
.tabulator .tabulator-row:hover { background: var(--ueh-nhat) !important; }

/* O dang sua / vung dang chon: vien mau thuong hieu cho de thay dang o dau */
.tabulator .tabulator-cell.tabulator-editing { border: 2px solid var(--ueh) !important; }
.tabulator .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) {
    background: color-mix(in srgb, var(--ueh) 14%, transparent);
}

/* Cot so thu tu */
.tabulator .qnp-sheet-stt {
    background: var(--ueh-nhat);
    color: var(--chu-mo);
    text-align: center;
}

/* O loc duoi tieu de */
.tabulator .tabulator-header-filter input,
.tabulator .tabulator-header-filter select {
    background: var(--nen-the);
    color: var(--chu);
    border: 1px solid var(--vien);
    border-radius: .25rem;
}

/* ===== Trang dang nhap (khong sidebar) ===== */
.qnp-trang-dang-nhap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nen);
    padding: 1rem;
}

.qnp-hop-dang-nhap {
    width: 100%;
    max-width: 24rem;
}

.qnp-hop-dang-nhap .card {
    background: var(--nen-the);
    border-color: var(--vien);
}

/* ---- Loader toan trang ----
   com-lib.js: ShowLoader() / HideLoader() goi $("#spinner_layout").show()/.hide().
   jQuery .show() dat display:block, nen KHONG dung flex de can giua (block se de
   len flex). Can giua bang vi tri tuyet doi -> hoat dong voi bat ky display nao. */
.qnp-loader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .35);
}
.qnp-loader .spinner-border {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    margin: -1.5rem 0 0 -1.5rem;
    color: var(--ueh-nhan);
    border-width: .3em;
}