@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.noi-dung-trang {
    width: min(1180px, calc(100% - 32px));
    margin: 28px auto;
    min-height: calc(100vh - 170px);
}

.header-he-thong {
    position: sticky;
    top: 0;
}
.header-trong, .footer-trong {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}
.header-trong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.logo-he-thong { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.logo-chu {
    display: grid;
    place-items: center;
    background: var(--chinh);
    color: #fff;
    font-weight: 900;
}
.menu-phai { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.menu-phai > a:hover { color: var(--chinh); }
.menu-phai .dang-xuat { color: var(--do); font-weight: 700; }
.thong-tin-user { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.thong-tin-user span { color: var(--chu-phu); font-size: 12px; margin-top: 3px; }

.footer-he-thong { color: var(--chu-phu); font-size: 13px; }
.footer-trong { border-top: 1px solid var(--vien); padding: 20px 0 30px; }

label { display: block; margin: 14px 0 7px; font-weight: 700; font-size: 14px; }
input, select, textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    color: var(--chu);
    padding: 11px 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: #77b88a;
    box-shadow: 0 0 0 3px rgba(21,94,239,.12);
}
small { display: block; color: var(--chu-phu); margin-top: 6px; }

.nut-chinh, .nut-phu {
    min-height: 42px;
    border-radius: 10px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    cursor: pointer;
}
.nut-chinh { border: 1px solid var(--chinh); background: var(--chinh); color: #fff; }
.nut-chinh:hover { background: var(--chinh-dam); }
.nut-phu { border: 1px solid var(--vien); background: #fff; }

/* Xuat Excel: mot mau rieng, mot chieu cao tren toan he thong. */
a[href*="xuat_excel"],
a[href*="xuat_giahan"],
button[formaction*="xuat_excel"],
button[formaction*="xuat_giahan"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
    margin: 0;
/*     border: 1px solid #0b63ce;   */
    border-radius: 6px;
    background: linear-gradient(90deg, #ff0000, #ff7f00);
    color: #fff;
    font-weight: 800;
}
a[href*="xuat_excel"]:hover,
a[href*="xuat_giahan"]:hover,
button[formaction*="xuat_excel"]:hover,
button[formaction*="xuat_giahan"]:hover { background: linear-gradient(273deg, #c12a4d, #ef8c26); color:#fff; }
.nut-day { width: 100%; margin-top: 22px; }

.thong-bao { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; }
.thong-bao.loi { color: #912018; background: #fef3f2; border: 1px solid #fecdca; }
.thong-bao.thanh-cong { color: #05603a; background: #ecfdf3; border: 1px solid #abefc6; }

.the-noi-dung { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); box-shadow: var(--bong); }
.tieu-de-khu-vuc h2 { margin: 0; }
.tieu-de-trang p, .tieu-de-khu-vuc p { margin: 7px 0 0; color: var(--chu-phu); }
.hang-nut { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* Menu chức năng: chỉ hiển thị các module đã code và user có quyền truy cập. */
.menu-chuc-nang {
    border-top: 1px solid #f2f4f7;
    background: #fff;
}
.menu-chuc-nang-trong {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.menu-chuc-nang-link {
    flex: 0 0 auto;
    padding: 11px 12px 10px;
    border-bottom: 2px solid transparent;
    color: var(--chu-phu);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.menu-chuc-nang-link:hover {
    color: var(--chinh);
    background: #f9fafb;
}
.menu-chuc-nang-link.dang-mo {
    color: var(--chinh);
    border-bottom-color: var(--chinh);
    background: #f3faf4;
}

@media (max-width: 720px) {
    .menu-chuc-nang-trong { width: calc(100% - 20px); }
    .menu-chuc-nang-link { padding: 10px 11px 9px; }
}


/* ============================================================
   THEME V1 - dong bo mau sac / menu / button / table / card
   Lay cam hung truc tiep tu style V1 cua he thong cu.
   ============================================================ */
:root {
    --nen: #f8fafd;
    --the: #ffffff;
    --chu: #170655;
    --chu-phu: #6c757d;
    --vien: #e1e6e3;
    --chinh: #025a2a;
    --chinh-dam: #01451f;
    --do: #dc3545;
    --xanh: #198754;
    --bong: 0 2px 10px rgba(0,0,0,.10);
    --bo-goc: 12px;
}

body,
button,
input,
select,
textarea,
table,
.menu-chuc-nang-link {
    font-family: 'Roboto Condensed', 'Arial Narrow', 'Segoe UI', Arial, sans-serif;
}
body {
    background: #f8fafd;
    color: #170655;
    font-size: 15px;
}

/* Header V1: gradient chuyen dong, chu trang. */
.header-he-thong {
    background: linear-gradient(90deg,
        #ff0000,
        #ff6600,
        #2b7e2f,
        #d1d41a,
        #ecba15,
        #6610b8,
        #227ef5,
        #2b7e2f,
        #b3c50e,
        #ff0000);
    background-size: 400% 400%;
    color: #fff;
    border-bottom: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,.20);
    animation: v1GradientShift 15s ease infinite;
    backdrop-filter: none;
}
.header-he-thong:hover { animation-duration: 8s; }
@keyframes v1GradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.header-trong { min-height: 60px; }
.logo-he-thong,
.logo-he-thong:hover,
.logo-he-thong:visited { color: #fff; }
.menu-phai { color: #fff; }
.menu-phai > a,
.menu-phai > a:hover,
.menu-phai .dang-xuat,
.thong-tin-user span { color: #fff; }
.menu-phai > a {
    padding: 7px 9px;
    border-radius: 5px;
}
.menu-phai > a:hover { background: rgba(255,255,255,.16); }
.menu-phai .dang-xuat { font-weight: 800; background: rgba(0,0,0,.13); }

/* Menu chuc nang V1: nen toi + active gradient. */
.menu-chuc-nang {
    background: #343a40;
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 2px 8px rgba(228,7,7,.60);
}
.menu-chuc-nang-trong { gap: 2px; }
.menu-chuc-nang-link {
    color: #fff;
    padding: 9px 14px;
    margin: 3px 2px;
    border: 0;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s ease, opacity .2s ease, transform .15s ease;
}
.menu-chuc-nang-link:hover,
.menu-chuc-nang-link.dang-mo {
    color: #fff;
    background: linear-gradient(90deg,
        #ff0844, #bd2a4f, #c50f79, #f06940,
        #9456f8, #3185ca, #da26cb, #e49b47, #e60b04);
    background-size: 400% 400%;
    animation: v1GradientShift 15s ease infinite;
}
.menu-chuc-nang-link:hover { animation-duration: 8s; transform: translateY(-1px); }

.noi-dung-trang { margin-top: 22px; }

/* Tieu de khu vuc theo V1; H1 page duoc dieu khien tap trung o block V8.6. */
.tieu-de-khu-vuc h2,
.noi-dung-trang > h2 {
    color: #025a2a;
}

/* Form / card / box. */
input,
select,
textarea {
    min-height: 42px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #212529;
    padding: 10px;
}
textarea { min-height: 96px; }
input:focus,
select:focus,
textarea:focus {
    border-color: #43a047;
    box-shadow: 0 0 0 3px rgba(67,160,71,.12);
}
.the-noi-dung {
    background: #fff;
    border: 1px solid #e7ebe8;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* Button V1: primary xanh, secondary tim dam, add gradient do-cam. */
.nut-chinh,
button[type='submit'] {
    border-radius: 6px;
}
.nut-chinh {
    border-color: #025a2a;
    background: #025a2a;
    color: #fff;
}
.nut-chinh:hover { background: #01451f; }
.nut-phu {
    border-color: #170655;
    background: #170655;
    color: #fff;
    border-radius: 6px;
}
.nut-phu:hover { filter: brightness(1.12); }

/* R45: thao tác duyệt dùng một bố cục và một màu Từ chối trên toàn hệ thống. */
.nut-tu-choi,
button.nut-tu-choi,
input.nut-tu-choi {
    min-height: 42px;
    border: 1px solid #d92d20 !important;
    border-radius: 8px !important;
    background: #d92d20 !important;
    color: #fff !important;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
}
.nut-tu-choi:hover,
button.nut-tu-choi:hover { background: #b42318 !important; border-color: #b42318 !important; }

.duyet-hai-form-chung.duyet-hai-form-chung {
    display: grid !important;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: center !important;
}
.duyet-hai-form-chung > form { margin: 0 !important; }
.duyet-hai-form-chung > form:first-of-type button { width: 100%; min-height: 42px; }
.duyet-hai-form-chung > .duyet-form-tu-choi-chung.duyet-form-tu-choi-chung {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(96px, auto) !important;
    gap: 8px !important;
    align-items: center !important;
}
.duyet-form-tu-choi-chung > input,
.duyet-form-tu-choi-chung > textarea,
.duyet-form-tu-choi-chung > button {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0 !important;
}
.duyet-mot-form-chung.duyet-mot-form-chung {
    display: grid !important;
    grid-template-columns: minmax(96px, auto) minmax(180px, 1fr) minmax(96px, auto) !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 0;
}
.duyet-mot-form-chung > input:not([type='hidden']),
.duyet-mot-form-chung > select,
.duyet-mot-form-chung > textarea,
.duyet-mot-form-chung > button {
    width: 100%;
    height: 42px;
    min-height: 42px;
    margin: 0 !important;
}

@media (max-width: 720px) {
    .duyet-hai-form-chung.duyet-hai-form-chung {
        grid-template-columns: 78px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    .duyet-hai-form-chung > .duyet-form-tu-choi-chung.duyet-form-tu-choi-chung {
        grid-template-columns: minmax(0, 1fr) 82px !important;
        gap: 6px !important;
    }
    .duyet-mot-form-chung.duyet-mot-form-chung {
        grid-template-columns: 78px minmax(120px, 1fr) 82px !important;
        gap: 6px !important;
    }
    .duyet-hai-form-chung button,
    .duyet-hai-form-chung input,
    .duyet-mot-form-chung button,
    .duyet-mot-form-chung input,
    .duyet-mot-form-chung select { padding: 6px !important; font-size: 12px !important; }
}

/* Bang tong quat: xanh dam nhu V1, row hover xanh rat nhat. */
table { border-collapse: collapse; }
table thead th {
    background: #025a2a;
    color: #fff;
    font-weight: 800;
}
table tbody tr:hover > td { background: #eefbf2; }

/* Scrollbar menu nhe hon tren desktop. */
.menu-chuc-nang-trong::-webkit-scrollbar { height: 6px; }
.menu-chuc-nang-trong::-webkit-scrollbar-thumb { background: rgba(255,255,255,.32); border-radius: 999px; }

@media (max-width: 720px) {
    .header-trong { padding: 10px 0 8px; }
    .menu-phai { font-size: 13px; }
    .menu-chuc-nang-trong { width: calc(100% - 12px); }
    .menu-chuc-nang-link { padding: 9px 11px; margin: 3px 1px; font-size: 13px; }
    .noi-dung-trang { margin-top: 14px; }
}

/* ===== PC FULL WIDTH + FORM 4 COT (mobile de xu ly sau) ===== */
@media (min-width:1024px) {
    .noi-dung-trang,
    .header-trong,
    .footer-trong,
    .menu-chuc-nang-trong {
        width:calc(100% - 24px)!important;
        max-width:none!important;
    }

    .nhan-nho { display:none!important; }

    /* Bo cac gioi han 1024/1180/1280 cu tren PC. */
    .cc-trang,
    .xc-trang,
    .np-trang,
    .nv-trang,
    .pq-trang,
    .dt-form-card,
    .xe-thang-form-card,
    .np-khung-form,
    .nv-khung-form,
    .pq-hep {
        max-width:none!important;
        width:100%!important;
    }

    /* Mac dinh form nghiep vu tren PC theo 4 cot / hang. Kho de xu ly rieng sau. */
    .luoi-form-baixe,
    .bc-luoi-form,
    .dt-grid,
    .dt-grid.hai,
    .np-grid-2,
    .nv-grid-2,
    .gv-grid-2,
    .pq-luoi-2 {
        grid-template-columns:repeat(4,minmax(0,1fr))!important;
        gap:12px!important;
    }
}

@media (min-width:1024px) {
    /* Cac module workflow moi dung ten class rieng cho nhan nho; PC an dong bo. */
    .dx-nhan,
    .np-nhan,
    .nv-nhan,
    .gv-kicker,
    .bc-nhan { display:none!important; }
}


/* ===== PC V3: thong ke gon dong bo toan he thong ===== */
@media (min-width:1024px) {
    .thong-ke-gon-pc {
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        flex-wrap:wrap!important;
        gap:0!important;
        width:100%!important;
        min-height:54px!important;
        margin:10px 0 14px!important;
        padding:10px 16px!important;
        background:#fff!important;
        border:1px solid var(--vien)!important;
        border-radius:10px!important;
        box-shadow:var(--bong)!important;
    }
    .thong-ke-gon-pc > * {
        display:inline-flex!important;
        align-items:baseline!important;
        gap:6px!important;
        flex:0 0 auto!important;
        width:auto!important;
        min-height:28px!important;
        margin:0!important;
        padding:3px 20px!important;
        background:transparent!important;
        border:0!important;
        border-right:1px solid #e5e7eb!important;
        border-radius:0!important;
        box-shadow:none!important;
        text-align:left!important;
        white-space:nowrap!important;
    }
    .thong-ke-gon-pc > *:first-child { padding-left:2px!important; }
    .thong-ke-gon-pc > *:last-child { border-right:0!important; }
    .thong-ke-gon-pc > * > span,
    .thong-ke-gon-pc > span,
    .thong-ke-gon-pc > span > b {
        display:inline!important;
        margin:0!important;
        color:#475467!important;
        font-size:16px!important;
        font-weight:700!important;
        line-height:1.2!important;
    }
    .thong-ke-gon-pc > :not(span) > span { order:1; }
    .thong-ke-gon-pc > :not(span) > strong { order:2; }
    .thong-ke-gon-pc > :not(span) > span::after { content:':'; }
    .thong-ke-gon-pc strong {
        display:inline!important;
        margin:0!important;
        color:#025a2a!important;
        font-size:20px!important;
        font-weight:900!important;
        line-height:1.1!important;
    }
    .thong-ke-gon-pc small { display:none!important; }
    .thong-ke-gon-pc .np-card-noi strong,
    .thong-ke-gon-pc .nv-card-noi strong { color:#170655!important; }
}

/* ===== MOBILE: thong ke gon dung chung ===== */
@media (max-width:768px) {
    .thong-ke-gon-pc {
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:6px!important;
        width:100%!important;
        min-height:0!important;
        margin:0 0 10px!important;
        padding:0!important;
        background:transparent!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
    }
    .thong-ke-gon-pc > * {
        display:block!important;
        min-width:0!important;
        min-height:54px!important;
        margin:0!important;
        padding:9px 10px!important;
        background:#fff!important;
        border:1px solid #e2e8e5!important;
        border-radius:8px!important;
        box-shadow:none!important;
        color:#475467!important;
        font-size:13px!important;
        font-weight:700!important;
        line-height:1.2!important;
        text-align:left!important;
        white-space:normal!important;
    }
    .thong-ke-gon-pc > * strong {
        display:block!important;
        margin-top:4px!important;
        color:#025a2a!important;
        font-size:17px!important;
        font-weight:900!important;
        line-height:1.1!important;
    }
    .thong-ke-gon-pc .np-so-do,
    .thong-ke-gon-pc .nv-so-do { color:#d00000!important; }
}

/* ===== MOBILE V5: menu drawer ben trai + giao dien mobile thong nhat ===== */
.nut-menu-mobile,.menu-mobile,.menu-mobile-overlay,.menu-mobile-top-actions{display:none}
@media(max-width:768px){
    body.menu-mobile-open{overflow:hidden}
    .menu-mobile-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:89}
    .menu-mobile-overlay[hidden]{display:none!important}
    .menu-mobile{display:flex;position:fixed;left:0;top:0;bottom:0;width:min(84vw,320px);z-index:90;background:#343a40;color:#fff;transform:translateX(-102%);transition:transform .22s ease;box-shadow:10px 0 28px rgba(0,0,0,.28);flex-direction:column}
    .menu-mobile.mo{transform:translateX(0)}
    .menu-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.14);background:#252a2e}
    .menu-mobile-head strong{font-size:20px;letter-spacing:.6px}
    .menu-mobile-head button{width:38px;height:38px;border:0;border-radius:7px;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer}
    .menu-mobile-body{overflow-y:auto;padding:8px 8px 24px;display:flex;flex-direction:column;gap:3px}
    .menu-mobile-body>a,.menu-mobile-group a{display:block;padding:11px 12px;border-radius:6px;color:#fff;font-size:15px;font-weight:750}
    .menu-mobile-body>a.dang-mo,.menu-mobile-body>a:hover,.menu-mobile-group a.dang-mo,.menu-mobile-group a:hover{background:linear-gradient(90deg,#ff0844,#bd2a4f,#c50f79,#f06940,#9456f8,#3185ca,#da26cb,#e49b47,#e60b04);background-size:400% 400%;animation:v1GradientShift 15s ease infinite}
    .menu-mobile-group{border-top:1px solid rgba(255,255,255,.12);margin-top:6px;padding-top:5px}
    .menu-mobile-group summary{list-style:none;cursor:pointer;padding:11px 12px;color:#fff;font-size:15px;font-weight:900;display:flex;justify-content:flex-start;align-items:center;gap:8px}
    .menu-mobile-group summary::-webkit-details-marker{display:none}
    .menu-mobile-group summary::after{content:'▾';font-size:22px;font-weight:900;line-height:1;margin-left:auto;min-width:24px;text-align:center;color:#fff}
    .menu-mobile-group:not([open]) summary::after{content:'▸'}
    .menu-mobile-group>div{padding-left:10px}
    .noi-dung-trang{width:calc(100% - 16px)!important;margin:12px auto 18px!important;min-height:calc(100vh - 100px)}
    .nhan-nho,.dx-nhan,.np-nhan,.nv-nhan,.gv-kicker,.bc-nhan{display:none!important}
}
@media(max-width:768px){.menu-mobile-user{display:flex;flex-direction:column;padding:10px 12px 12px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.12)}.menu-mobile-user strong{font-size:16px}.menu-mobile-user span{margin-top:3px;font-size:12px;color:#d7dde1}.menu-mobile-logout{margin-top:8px!important;background:#8f1d18!important;color:#fff!important}}

/* ===== MOBILE/DESKTOP V7: HEADER RIENG, MENU RIENG BEN DUOI ===== */
.header-he-thong{position:sticky;top:0;z-index:80;border-bottom:0!important}
.header-chi-logo{justify-content:space-between;align-items:stretch;height:58px;min-height:58px}
.header-chi-logo .logo-he-thong{align-self:center;justify-content:flex-start;font-size:20px;letter-spacing:.3px;text-align:left}
.thanh-menu-he-thong{position:sticky;top:58px;z-index:79;background:#343a40;box-shadow:0 2px 8px rgba(228,7,7,.60)}
.thanh-menu-trong{width:calc(100% - 24px);margin:0 auto}
.menu-chuc-nang{display:block;background:transparent!important;border:0!important;box-shadow:none!important}
.menu-chuc-nang-trong{width:100%!important;max-width:none!important;overflow:visible!important;display:flex;align-items:stretch;min-height:46px}.menu-chuc-nang-trong>.menu-chuc-nang-link{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:40px;min-height:40px;line-height:20px;font-weight:700}
.menu-day-phai{margin-left:auto}
.menu-dang-xuat{color:#fff!important;background:#8f1d18!important}
.menu-user-info{padding:9px 11px 7px;border-bottom:1px solid rgba(255,255,255,.15);color:#fff;display:grid;gap:2px}
.menu-user-info small{margin:0;color:#d7dde1;font-size:12px}
.menu-nhom{position:relative;flex:0 0 auto;margin:0}
.menu-nhom>summary{list-style:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:6px;height:40px;min-height:40px;color:#fff;padding:9px 14px;margin:3px 2px;border-radius:5px;font-weight:700;font-size:14px;line-height:20px;cursor:pointer;white-space:nowrap}
.menu-nhom>summary::-webkit-details-marker{display:none}
.menu-nhom>summary:hover,.menu-nhom[open]>summary,.menu-nhom.dang-mo>summary{background:linear-gradient(90deg,#ff0844,#bd2a4f,#c50f79,#f06940,#9456f8,#3185ca,#da26cb,#e49b47,#e60b04);background-size:400% 400%;animation:v1GradientShift 15s ease infinite}
.menu-nhom-con{display:none;position:absolute;top:calc(100% - 2px);left:2px;min-width:220px;padding:6px;background:#343a40;border:1px solid rgba(255,255,255,.14);border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.28);z-index:110}
.menu-nhom[open]>.menu-nhom-con{display:block}
.menu-nhom-con-phai{left:auto;right:2px;min-width:230px}
.menu-nhom-con a{display:block;color:#fff;padding:10px 11px;border-radius:5px;font-size:14px;font-weight:700;white-space:nowrap}
.menu-nhom-con a:hover,.menu-nhom-con a.dang-mo{background:#025a2a;color:#fff}

@media(min-width:769px){
  .nut-menu-mobile,.menu-mobile,.menu-mobile-overlay{display:none!important}
}

@media(max-width:768px){
  .header-he-thong{position:sticky!important;top:0!important;z-index:80!important}
  .header-chi-logo{display:grid;width:calc(100% - 16px);height:76px;min-height:76px;padding:6px 0 5px;grid-template-columns:minmax(0,1fr);grid-template-rows:35px 24px;gap:4px;align-content:end;justify-content:stretch}
  .header-chi-logo .logo-he-thong{width:100%;min-width:0;justify-content:flex-start;text-align:left}
  .header-chi-logo .logo-he-thong>span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:15px;line-height:1.1;white-space:nowrap}
  .thanh-menu-he-thong{top:76px;min-height:44px;display:block}
  .thanh-menu-trong{width:100%;min-height:44px;padding:4px 8px;display:flex;align-items:center;gap:8px}
  .nut-menu-mobile{display:inline-flex!important;align-items:center;justify-content:center;width:40px!important;min-width:40px!important;height:36px!important;margin:0!important;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#fff!important;font-size:25px!important;font-weight:900!important;line-height:1!important;cursor:pointer}
  .nut-menu-mobile:hover,.nut-menu-mobile:focus-visible{background:rgba(255,255,255,.10)!important}
  .menu-mobile-top-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:8px;min-width:0;margin-left:auto}
  .menu-mobile-chuong{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;flex:0 0 38px;border-radius:6px;color:#ffd34e;text-decoration:none;font-size:20px;line-height:1}
  .menu-mobile-chuong:hover,.menu-mobile-chuong:focus-visible{background:rgba(255,255,255,.10)}
  .menu-mobile-user-top{display:flex;align-items:center;min-width:0;max-width:min(48vw,220px);height:36px;color:#fff}
  .menu-mobile-user-top strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:800;line-height:1.2}
  .menu-chuc-nang{display:none!important}
  .menu-mobile{top:0!important;height:100dvh}
  .menu-mobile-body{min-height:0;flex:1}
  .menu-mobile-cuoi{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}
  .menu-mobile-cuoi>a{display:block;padding:11px 12px;border-radius:6px;color:#fff;font-size:15px;font-weight:750}
  .menu-mobile-user{margin:0 0 4px!important;border-bottom:0!important;background:rgba(255,255,255,.06);border-radius:6px}
  .noi-dung-trang{margin-top:12px!important}
}

/* ===== V8: Desktop submenu chỉ tồn tại khi hover/focus ===== */
@media(min-width:769px){
  .menu-chuc-nang .menu-nhom:not(:hover):not(:focus-within)>.menu-nhom-con{display:none!important}
  .menu-chuc-nang .menu-nhom:hover>.menu-nhom-con,
  .menu-chuc-nang .menu-nhom:focus-within>.menu-nhom-con{display:block!important}
}

/* ===== V8.6: H1 TOAN HE THONG - MOT NGUON DUY NHAT =====
   Muc tieu:
   - Module CSS KHONG duoc tu style H1.
   - PC: moi page cung mep trai, cung khoang Menu -> H1, cung H1 -> body.
   - Mobile giu size/line-height da test OK.
*/
:root{
    --page-h1-color:#050383;
    --page-h1-size-pc:30px;
    --page-h1-size-mobile:24px;
    --page-side-gap-pc:12px;
    --page-top-gap-pc:18px;
    --page-h1-offset-top-pc:5px;
    --page-heading-height-pc:42px;
    --page-heading-body-gap-pc:14px;
}

/* H1 chung cho moi page, khong module nao duoc phep khai bao lai. */
html body main.noi-dung-trang h1{
    margin:0!important;
    padding:0!important;
    color:var(--page-h1-color)!important;
    -webkit-text-fill-color:var(--page-h1-color)!important;
    background:none!important;
    animation:none!important;
    font-family:'Roboto Condensed','Arial Narrow','Segoe UI',Arial,sans-serif!important;
    font-weight:900!important;
    font-style:normal!important;
    letter-spacing:0!important;
    text-transform:uppercase!important;
    transform:none!important;
    zoom:1!important;
}

/* Tiêu đề nội dung trên toàn hệ thống luôn viết hoa, chỉ có một nguồn chung. */
html body main.noi-dung-trang h2,
html body main.noi-dung-trang h3{
    text-transform:uppercase!important;
}

@media(min-width:769px){
    /* Toan bo main PC dung CHINH XAC 12px hai ben; khong con module max-width/padding rieng. */
    html body main.noi-dung-trang{
        box-sizing:border-box!important;
        width:auto!important;
        max-width:none!important;
        margin:var(--page-top-gap-pc) var(--page-side-gap-pc) 28px!important;
        padding-top:0!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    html body main.noi-dung-trang.cc-trang,
    html body main.noi-dung-trang.xc-trang,
    html body main.noi-dung-trang.np-trang,
    html body main.noi-dung-trang.nv-trang,
    html body main.noi-dung-trang.dx-trang,
    html body main.noi-dung-trang.gv-page,
    html body main.noi-dung-trang.bc-trang,
    html body main.noi-dung-trang.dt-trang,
    html body main.noi-dung-trang.xe-thang-trang,
    html body main.noi-dung-trang.gh-trang,
    html body main.noi-dung-trang.bct-trang,
    html body main.noi-dung-trang.kho-trang,
    html body main.noi-dung-trang.pq-trang,
    html body main.noi-dung-trang.noi-dung-nhan-su{
        width:auto!important;
        max-width:none!important;
        margin-left:var(--page-side-gap-pc)!important;
        margin-right:var(--page-side-gap-pc)!important;
        padding-top:0!important;
        padding-left:0!important;
        padding-right:0!important;
    }

    /* H1 PC duy nhat: 30px. Offset 5px lam H1 co cung toa do ke ca wrapper flex hay block. */
    html body main.noi-dung-trang h1{
        font-size:var(--page-h1-size-pc)!important;
        line-height:1.08!important;
        margin-top:var(--page-h1-offset-top-pc)!important;
        margin-right:0!important;
        margin-bottom:0!important;
        margin-left:0!important;
    }

    /* Tat ca wrapper tieu de page co cung chieu cao va cung khoang cach xuong body.
       Khong ep display de tranh lam vo markup cu; H1 tu can bang bang offset 5px o tren. */
    html body main.noi-dung-trang > .tieu-de-trang,
    html body main.noi-dung-trang > .hang-tieu-de-nhan-su,
    html body main.noi-dung-trang > .hang-tieu-de-baixe,
    html body main.noi-dung-trang > .cc-dau-trang,
    html body main.noi-dung-trang > .xc-dau-trang,
    html body main.noi-dung-trang > .np-tieu-de,
    html body main.noi-dung-trang > .nv-tieu-de,
    html body main.noi-dung-trang > .dx-tieu-de,
    html body main.noi-dung-trang > .gv-head,
    html body main.noi-dung-trang > .bc-tieu-de,
    html body main.noi-dung-trang > .dt-title,
    html body main.noi-dung-trang > .xe-thang-tieu-de,
    html body main.noi-dung-trang > .gh-tieu-de,
    html body main.noi-dung-trang > .bct-title,
    html body main.noi-dung-trang > .kho-tieu-de,
    html body main.noi-dung-trang > .pq-dau-trang{
        box-sizing:border-box!important;
        width:100%!important;
        max-width:none!important;
        min-height:var(--page-heading-height-pc)!important;
        margin-top:0!important;
        margin-right:0!important;
        margin-bottom:var(--page-heading-body-gap-pc)!important;
        margin-left:0!important;
        padding:0!important;
        align-items:flex-start!important;
    }

    /* Khong cho wrapper con chen tieu de sang phai. */
    html body main.noi-dung-trang > .tieu-de-trang > :first-child,
    html body main.noi-dung-trang > .hang-tieu-de-nhan-su > :first-child,
    html body main.noi-dung-trang > .hang-tieu-de-baixe > :first-child,
    html body main.noi-dung-trang > .cc-dau-trang > :first-child,
    html body main.noi-dung-trang > .xc-dau-trang > :first-child,
    html body main.noi-dung-trang > .np-tieu-de > :first-child,
    html body main.noi-dung-trang > .nv-tieu-de > :first-child,
    html body main.noi-dung-trang > .dx-tieu-de > :first-child,
    html body main.noi-dung-trang > .gv-head > :first-child,
    html body main.noi-dung-trang > .bc-tieu-de > :first-child,
    html body main.noi-dung-trang > .dt-title > :first-child,
    html body main.noi-dung-trang > .xe-thang-tieu-de > :first-child,
    html body main.noi-dung-trang > .kho-tieu-de > :first-child,
    html body main.noi-dung-trang > .pq-dau-trang > :first-child{
        margin-left:0!important;
        padding-left:0!important;
    }

    /* An tat ca kicker/nhan nho o dau page PC de H1 khong bi day xuong. */
    html body main.noi-dung-trang .nhan-nho,
    html body main.noi-dung-trang .dx-nhan,
    html body main.noi-dung-trang .np-nhan,
    html body main.noi-dung-trang .nv-nhan,
    html body main.noi-dung-trang .gv-kicker,
    html body main.noi-dung-trang .bc-nhan,
    html body main.noi-dung-trang > .kho-tieu-de > div:first-child > span{
        display:none!important;
        margin:0!important;
        padding:0!important;
    }

    /* Mo ta page an tren PC; khong duoc chiem chieu cao. */
    html body main.noi-dung-trang h1 + p{display:none!important}

    /* Body dau tien sau heading khong tu chen them khoang cach. */
    html body main.noi-dung-trang > .tieu-de-trang + *,
    html body main.noi-dung-trang > .hang-tieu-de-nhan-su + *,
    html body main.noi-dung-trang > .hang-tieu-de-baixe + *,
    html body main.noi-dung-trang > .cc-dau-trang + *,
    html body main.noi-dung-trang > .xc-dau-trang + *,
    html body main.noi-dung-trang > .np-tieu-de + *,
    html body main.noi-dung-trang > .nv-tieu-de + *,
    html body main.noi-dung-trang > .dx-tieu-de + *,
    html body main.noi-dung-trang > .gv-head + *,
    html body main.noi-dung-trang > .bc-tieu-de + *,
    html body main.noi-dung-trang > .dt-title + *,
    html body main.noi-dung-trang > .xe-thang-tieu-de + *,
    html body main.noi-dung-trang > .gh-tieu-de + *,
    html body main.noi-dung-trang > .bct-title + *,
    html body main.noi-dung-trang > .kho-tieu-de + *,
    html body main.noi-dung-trang > .pq-dau-trang + *{
        margin-top:0!important;
    }

    html body main.noi-dung-trang .thong-ke-gon-pc{margin-top:0!important}
}

/* MOBILE: giu dung size hien tai, nhung H1 van chi do chung.css dieu khien. */
@media(max-width:768px){
    html body main.noi-dung-trang h1{
        font-size:var(--page-h1-size-mobile)!important;
        line-height:1.08!important;
        margin:0!important;
        padding:0!important;
    }
}

/* =========================================================
   V8.6 R2 - THONG BAO / HUY HIEU NGHIEP VU
   Poll 15s; badge doc lap voi trang thai da doc cua chuong.
   ========================================================= */
.menu-huy-hieu,
.thongbao-bell-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:19px;
    height:19px;
    padding:0 5px;
    border-radius:999px;
    box-sizing:border-box;
    background:#dc3545;
    color:#fff;
    font-size:11px;
    font-weight:900;
    line-height:1;
}
.menu-huy-hieu[hidden],
.thongbao-bell-count[hidden]{display:none!important}
.menu-chuc-nang-link,
.menu-nhom>summary,
.menu-nhom-con a{
    gap:6px;
}
.menu-nhom-con a{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.thongbao-bell{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    margin:3px 2px;
    flex:0 0 40px;
    border-radius:5px;
    color:#fff;
    text-decoration:none;
    font-size:18px;
}
.thongbao-bell:hover,
.thongbao-bell:focus-visible{background:rgba(255,255,255,.14)}
.thongbao-bell-count{
    position:absolute;
    top:2px;
    right:0;
    min-width:17px;
    height:17px;
    padding:0 4px;
    font-size:10px;
    box-shadow:0 0 0 2px #343a40;
}
.menu-mobile-chuong{display:none}

@media(max-width:768px){
    .thongbao-bell{display:none!important}
    .menu-mobile-body>a,
    .menu-mobile-group a,
    .menu-mobile-group summary{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:8px;
    }
    .menu-mobile-chuong{display:inline-flex}
}

/* ===== R22: CÂU NÓI CHẠY PHẢI -> TRÁI, MỘT NGUỒN PC/MOBILE ===== */
.header-cau-noi{
    flex:0 0 33.333%;
    height:24px;
    min-width:0;
    margin:0 0 4px 24px;
    padding:0 0 2px;
    align-self:flex-end;
    overflow:hidden;
    color:#fff;
    font-size:12px;
    font-style:italic;
    font-weight:700;
    line-height:18px;
    text-align:left;
    text-shadow:0 1px 2px rgba(0,0,0,.24);
}
.header-cau-noi>span{
    display:inline-block;
    box-sizing:content-box;
    width:max-content;
    padding-left:100%;
    white-space:nowrap;
    will-change:transform;
    animation:headerCauNoiPhaiTrai 22s linear infinite;
}

@keyframes headerCauNoiPhaiTrai{
    from{transform:translateX(0)}
    to{transform:translateX(-100%)}
}

@media(max-width:768px){
    .header-cau-noi{
        width:100%;
        height:24px;
        margin:0;
        padding-bottom:3px;
        align-self:end;
        font-size:12px;
        line-height:17px;
    }
}

/* ===== R37: FOOTER 3 KHỐI PC + XẾP GỌN MOBILE ===== */
.footer-he-thong{
    position:relative;
    margin-top:34px;
    overflow:hidden;
    border-top:0;
    background:linear-gradient(135deg,#12251b 0%,#075b2c 48%,#0b7040 100%);
    color:#fff;
    font-size:13px;
    box-shadow:0 -8px 24px rgba(7,91,44,.10);
}
.footer-he-thong::before{
    content:'';
    position:absolute;
    inset:0 0 auto;
    height:3px;
    background:linear-gradient(90deg,#ffb000,#f65b31,#b23fe7,#2d9bf0,#25b866,#ffb000);
}
.footer-trong{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(280px,.9fr) minmax(0,1fr);
    align-items:center;
    gap:28px;
    min-height:126px;
    padding:22px 0;
    border-top:0;
}
.footer-lien-he{display:grid;gap:8px;min-width:0;color:rgba(255,255,255,.86)}
.footer-dong-lien-he{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;align-items:start;line-height:1.35}
.footer-dong-lien-he strong{color:#fff}
.footer-dong-lien-he a{color:inherit;text-decoration:none}
.footer-icon{width:18px;height:18px;margin-top:1px;fill:none;stroke:#7de0a4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.footer-trung-tam{display:grid;justify-items:center;gap:4px;min-width:0;text-align:center}
.footer-trung-tam>strong{color:#fff;font-size:16px;letter-spacing:.65px}
.footer-trung-tam>span{color:rgba(255,255,255,.78);font-size:12px}
.footer-trung-tam>small{margin:2px 0 0;color:rgba(255,255,255,.78);font-size:12px}
.footer-trung-tam a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.footer-mang-xa-hoi{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.footer-mxh{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:#fff;text-decoration:none;transition:transform .15s,background .15s}
.footer-mxh:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}
.footer-facebook span{font-family:Arial,sans-serif;font-size:28px;font-weight:900;line-height:1;transform:translateY(2px)}
.footer-zalo span{font-family:Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:-.3px}
.footer-youtube svg{width:25px;height:25px;fill:#ff3b30}
.footer-youtube .footer-youtube-play{fill:#fff}
@media(max-width:820px){
    .footer-he-thong{width:100%;margin-top:22px}
    .footer-trong{grid-template-columns:1fr;gap:16px;min-height:0;padding:20px 0 22px}
    .footer-trung-tam{grid-row:1}
    .footer-lien-he{grid-row:2;gap:7px}
    .footer-mang-xa-hoi{grid-row:3;justify-content:flex-start;width:100%;padding-left:0;box-sizing:border-box}
    .footer-mxh{width:38px;height:38px}
}

/* ===== R21: MỘT NGUỒN BỐ CỤC CHO 4 TRANG QUY TRÌNH =====
   Nghỉ phép / Nghỉ việc / Đề xuất / Giao việc chỉ dùng block này.
   Màu sắc lấy trực tiếp từ biến chung, module CSS không khai báo lại.
*/
.qt-khoi{
    display:block;
    overflow:hidden;
    margin:14px 0 0;
    border:1px solid var(--vien);
    border-radius:var(--bo-goc);
    background:var(--the);
    box-shadow:var(--bong);
}
.qt-bo-loc{
    display:block;
    margin:0;
    padding:12px 12px 8px;
    background:var(--nen);
}
.qt-loc-trai{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    width:min(660px,100%);
}
.qt-loc-trai.qt-loc-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
    width:min(880px,100%);
}
.qt-bo-loc-co-tong{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.qt-loc-tong-tien{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-height:42px;
}
.qt-tong-tien-do{
    color:#d92d20;
    font-size:14px;
    font-weight:900;
    white-space:nowrap;
}
.qt-loc-trai select,
.qt-loc-trai input{
    width:100%;
    height:38px;
    min-height:38px;
    margin:0;
    padding:0 12px;
    border-radius:7px;
}
.qt-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    margin:0;
    padding:0 14px;
    border-radius:9px;
    background:var(--chinh);
    color:#fff;
}
.qt-section-head h2{
    margin:0;
    color:inherit;
    font-size:18px;
    font-weight:900;
    line-height:1.15;
}
.qt-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    min-height:30px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--the);
    color:var(--chinh);
    font-weight:900;
    line-height:1;
}
.qt-count-do{color:var(--do)}
.qt-list{
    display:grid;
    gap:8px;
    padding:10px;
    background:var(--the);
}
.qt-rong{
    padding:24px 12px;
    color:var(--chu-phu);
    text-align:center;
}

@media(max-width:768px){
    .qt-khoi{
        margin-top:12px;
        border-radius:10px;
    }
    .qt-bo-loc{padding:9px 9px 7px}
    .qt-loc-trai,
    .qt-loc-trai.qt-loc-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
        width:100%;
    }
    .qt-loc-trai select,
    .qt-loc-trai input{
        height:38px;
        min-height:38px;
        padding:0 8px;
        font-size:13px;
    }
    .qt-section-head{
        min-height:42px;
        padding:0 10px;
        border-radius:7px;
    }
    .qt-section-head h2{font-size:16px}
    .qt-count{
        min-width:32px;
        min-height:28px;
        padding:3px 8px;
        font-size:14px;
    }
    .qt-list{
        gap:7px;
        padding:8px;
    }
    .qt-rong{padding:20px 10px}
}

@media(max-width:900px){
    .qt-bo-loc-co-tong{align-items:stretch;flex-direction:column;gap:9px}
    .qt-bo-loc-co-tong .qt-loc-trai{width:100%}
    .qt-loc-tong-tien{justify-content:space-between;min-height:34px}
    .qt-tong-tien-do{white-space:normal;text-align:right}
}

/* R40 - form đánh giá Báo cáo Tháng. */
.bct-form-danh-gia{display:grid;gap:12px}
.bct-form-danh-gia label{display:grid;gap:6px;font-weight:700}
.bct-form-danh-gia textarea{min-height:90px;resize:vertical}

/* R73 - Dropdown chọn nhiều người gọn, dùng chung cho Giao việc/Lịch công tác/Đề xuất. */
.chon-nguoi-dropdown{position:relative;display:block;min-width:0;font-weight:600}
.chon-nguoi-dropdown>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:42px;box-sizing:border-box;padding:9px 11px;border:1px solid #cfd8d3;border-radius:8px;background:#fff;color:#17202a;cursor:pointer;font-weight:600}
.chon-nguoi-dropdown>summary::-webkit-details-marker{display:none}
.chon-nguoi-dropdown>summary::after{content:'⌄';flex:0 0 auto;color:#667085;font-size:14px;transition:transform .15s ease}
.chon-nguoi-dropdown[open]>summary{border-color:#75a987;box-shadow:0 0 0 2px rgba(2,90,42,.08)}
.chon-nguoi-dropdown[open]>summary::after{transform:rotate(180deg)}
.chon-nguoi-dropdown.co-lua-chon>summary{color:#025a2a;font-weight:800}
.chon-nguoi-dropdown [data-chon-nguoi-label]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chon-nguoi-panel{position:absolute;z-index:250;left:0;right:0;top:calc(100% + 5px);max-height:280px;overflow:auto;padding:7px;border:1px solid #d7dfdb;border-radius:10px;background:#fff;box-shadow:0 14px 35px rgba(15,23,42,.16)}
.chon-nguoi-option{display:flex!important;align-items:center!important;gap:8px!important;min-width:0;margin:0!important;padding:8px 9px!important;border:0!important;border-radius:7px!important;background:#fff!important;cursor:pointer!important;font-weight:600!important}
.chon-nguoi-option:hover{background:#f1f8f3!important}
.chon-nguoi-option:has(input:checked){background:#eaf7ee!important;color:#025a2a}
.chon-nguoi-option input[type=checkbox]{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;flex:0 0 16px!important;margin:0!important;padding:0!important;accent-color:#025a2a}
.chon-nguoi-option>span{min-width:0;display:block}
.chon-nguoi-option strong,.chon-nguoi-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chon-nguoi-option small{margin-top:2px;color:#667085;font-size:11px;font-weight:500}
.chon-nguoi-rong{display:block;padding:10px;color:#667085;font-size:12px}
.chon-nguoi-hai-cot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
@media(max-width:760px){.chon-nguoi-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px;max-height:min(58vh,420px);z-index:1200}.chon-nguoi-hai-cot{grid-template-columns:1fr}}