@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--navy:#162038;--navy2:#202d49;--orange:#ff7417;--bg:#f4f6f9;--card:#fff;--text:#172033;--muted:#6c7688;--line:#e4e8ee;--green:#16a34a;--red:#dc2626;--shadow:0 8px 30px rgba(18,32,56,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;font-size:14px}a{color:inherit}button,input,select,textarea{font:inherit}button:disabled{opacity:.45;cursor:not-allowed}.top{background:var(--navy);color:#fff;padding:14px max(16px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.1)}.brand{font-weight:800;font-size:20px;letter-spacing:-.5px}.brand span,.login-brand span{color:var(--orange)}.user{font-size:12px;color:#eef2f8}.user a{text-decoration:underline}.wrap{max-width:1180px;margin:auto;padding:18px 16px 30px}.nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.nav a{background:#e9edf4;padding:10px 13px;border-radius:10px;text-decoration:none;font-weight:700;color:#243149}.nav a.active,.btn{background:var(--orange);color:#fff}.nav a:hover{transform:translateY(-1px)}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}.stat{margin-bottom:0}.stat .label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.4px}.stat .value{font-size:26px;font-weight:800;margin-top:6px}.title{font-size:25px;margin:4px 0 4px;letter-spacing:-.5px}.muted{color:var(--muted);font-size:13px}.small{font-size:12px;color:var(--muted)}.eyebrow{font-size:11px;font-weight:800;color:var(--orange);letter-spacing:1px}.hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:4px 0 16px}.hero-date{font-size:14px;font-weight:700;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-head h2{margin:0}.btn,button{border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block;transition:.15s}.btn:hover{filter:brightness(.96);transform:translateY(-1px)}.btn.secondary{background:#e9edf4;color:var(--text)}.btn.danger{background:#fee2e2;color:#991b1b}.btn.green{background:#dcfce7;color:#166534}.btn.full{width:100%;text-align:center}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.formrow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.formrow .wide{grid-column:1/-1}.align-end{align-self:end}.narrow{max-width:560px;margin:20px auto}label{display:block;font-size:12px;font-weight:800;margin:0 0 6px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cfd6e1;border-radius:10px;background:#fff;color:var(--text);outline:none}input:focus,select:focus,textarea:focus{border-color:#aab5c7;box-shadow:0 0 0 3px rgba(255,116,23,.09)}textarea{min-height:105px;resize:vertical}label+input,label+select,label+textarea{margin-bottom:12px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.35px}tbody tr:hover{background:#fafbfc}.badge{display:inline-block;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:800;background:#e9edf4}.ok{color:#166534;background:#dcfce7}.warn{color:#9a3412;background:#ffedd5}.err{color:#991b1b;background:#fee2e2}.flash{padding:12px 14px;border-radius:11px;margin-bottom:14px;font-weight:600}.flash.ok{color:#166534;background:#dcfce7}.flash.err{color:#991b1b;background:#fee2e2}.checkrow{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}.checkrow input[type=checkbox]{width:22px;height:22px;flex:none;margin:0}.progress{height:10px;background:#e8ebf0;border-radius:99px;overflow:hidden;margin:10px 0}.progress i{display:block;height:100%;background:var(--orange);border-radius:99px}.filecard{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}.file-icon{font-size:26px}.file-info{flex:1;min-width:0}.empty{text-align:center;padding:24px;color:var(--muted);background:#fafbfc;border-radius:12px}.mini-input{width:170px;padding:9px}.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#121c31,#1d2944);padding:20px}.login-card{width:min(420px,100%);background:#fff;border-radius:20px;padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.login-mark{width:48px;height:48px;border-radius:14px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:900;margin:0 auto 14px}.login-brand{text-align:center;font-size:23px;font-weight:900}.login-sub{text-align:center;color:var(--muted);font-size:11px;letter-spacing:1px;margin:7px 0 22px}.field{margin-bottom:13px}.remember{display:flex;align-items:center;gap:8px;font-weight:500;margin:4px 0 12px}.remember input{width:auto}.setup{max-width:520px}.print-preview{min-height:600px}.print-frame{margin-top:15px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;min-height:650px;display:grid;place-items:center}.print-frame iframe{width:100%;height:760px;border:0}.print-frame img{max-width:100%;max-height:760px;object-fit:contain}.value-box{font-size:18px;font-weight:800;padding:12px;background:#f8fafc;border-radius:10px}.detail-box{white-space:pre-wrap;line-height:1.65;background:#fafbfc;border-radius:10px;padding:13px;min-height:90px}.spacer{height:10px}.mobile-bottom{display:none}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,1fr)}.grid2,.formrow{grid-template-columns:1fr}.top{padding:12px 14px}.user{font-size:10px}.wrap{padding:12px}.nav{display:grid;grid-template-columns:1fr 1fr}.nav a{text-align:center;font-size:12px}.title{font-size:21px}.card{padding:14px}.hero{align-items:flex-start}.mobile-bottom{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:100;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(0,0,0,.08)}.mobile-bottom a{font-size:10px;text-align:center;text-decoration:none;font-weight:800}.mobile-bottom b{display:block;font-size:17px}.spacer{height:65px}}
@media(max-width:430px){.grid{grid-template-columns:1fr 1fr}.brand{font-size:17px}.user{display:none}.filecard{align-items:flex-start;flex-wrap:wrap}.file-info{min-width:calc(100% - 55px)}.filecard .actions{width:100%}}
@media print{.top,.nav,.no-print,.mobile-bottom,.flash{display:none!important}body{background:#fff}.wrap{max-width:none;padding:0}.card{box-shadow:none;border:0}.print-frame{border:0}.print-frame iframe{height:100vh}.print-preview{padding:0}.print-preview .section-head{display:none}}

/* =========================================================
   HOA NHÂN STORE UI V2 — DESKTOP SIDEBAR + MOBILE BOTTOM BAR
   ========================================================= */
:root{
  --navy:#10203b;--navy2:#172d50;--orange:#ff7417;--orange2:#ff944d;
  --bg:#f5f7fb;--card:#fff;--text:#182338;--muted:#697386;--line:#e6eaf0;
  --shadow:0 8px 24px rgba(16,32,59,.07);--radius:16px;--sidebar:224px;
}
html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text)}
.top{height:64px;min-height:64px;padding:0 22px;background:linear-gradient(135deg,var(--navy),var(--navy2));box-shadow:0 4px 16px rgba(16,32,59,.16)}
.brand{font-size:19px;letter-spacing:-.35px}.user{font-size:12px}
.wrap{max-width:none;width:100%;margin:0;padding:24px 28px 44px calc(var(--sidebar) + 44px);min-height:calc(100vh - 64px)}
.nav{position:fixed;z-index:45;left:0;top:64px;bottom:0;width:var(--sidebar);margin:0;padding:20px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;background:linear-gradient(180deg,#13294a,#0f1f39);border:0;border-radius:0;box-shadow:6px 0 20px rgba(16,32,59,.08)}
.nav:before{content:'ĐIỀU HƯỚNG';display:block;padding:0 10px 8px;color:#8fa0ba;font-size:10px;font-weight:800;letter-spacing:1.2px}
.nav a{display:flex;align-items:center;min-height:43px;padding:10px 12px;border-radius:10px;background:transparent;color:#dce5f1;font-size:13px;font-weight:700;white-space:normal}
.nav a:hover{background:rgba(255,255,255,.075);color:#fff;transform:none}
.nav a.active{background:linear-gradient(135deg,var(--orange),#ff8a39);color:#fff;box-shadow:0 6px 16px rgba(255,116,23,.25)}
.hero{margin:0 0 18px;padding:18px 20px;background:linear-gradient(135deg,#fff,#fbfcfe);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.title{font-size:27px;color:var(--navy);margin:2px 0}.eyebrow{color:var(--orange)}
.card{border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px}
.card:hover{box-shadow:0 12px 30px rgba(16,32,59,.09)}
.grid,.grid2{gap:16px}.stat{position:relative;overflow:hidden}.stat:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--orange),var(--orange2))}
.section-head h2{color:var(--navy);font-size:18px}.btn,button{border-radius:10px;min-height:40px}.btn:not(.secondary):not(.danger):not(.green),button:not(.secondary):not(.danger):not(.green){background:var(--orange);color:#fff}.btn.secondary{background:#edf1f6;color:#28364d}.btn.danger{background:#fee7e7;color:#a61b1b}
input,select,textarea{border-color:#d7dde6;min-height:42px}input:focus,select:focus,textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,116,23,.11)}
.tablewrap{border:1px solid var(--line);border-radius:13px;background:#fff}th{background:#f8fafc;color:#667085}tbody tr:hover{background:#fffaf6}
.badge{font-weight:800}.mobile-bottom{display:none}

/* Print / form-work cards */
.print-page{max-width:1180px!important;margin:0 auto 40px!important}.print-head{margin:0 0 18px!important}.print-head h1{font-size:27px!important;color:var(--navy)!important}.print-grid{gap:16px!important}.print-card,.pdf-panel{border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important}.print-btn.main{background:var(--orange)!important}.print-btn.sub{background:#edf1f6!important;color:var(--navy)!important}

/* Employee page uses common shell, never a second nav */
.employee-nav{display:none!important}.employee-header{padding:18px 20px!important;margin-bottom:16px!important;background:#fff!important;border:1px solid var(--line)!important;border-radius:18px!important;box-shadow:var(--shadow)!important}.employee-title{color:var(--navy)!important;font-size:26px!important}.branch-badge{background:#fff7ed!important;border-color:#fed7aa!important;color:#9a3412!important}.employee-grid{gap:14px!important}.employee-stat{border:1px solid var(--line)!important;border-radius:16px!important;box-shadow:var(--shadow)!important}.quick-card{border-radius:15px!important;border-color:var(--line)!important;box-shadow:0 5px 18px rgba(16,32,59,.05)!important}.quick-card:hover{border-color:#fdba74!important;box-shadow:0 8px 22px rgba(16,32,59,.09)!important}

@media(max-width:900px){
  .top{height:58px;min-height:58px;padding:0 14px}.wrap{padding:16px 14px 86px}.nav{display:none!important}.mobile-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;background:#10203b;border:0;padding:7px 4px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -5px 18px rgba(16,32,59,.2)}.mobile-bottom a{flex:1;color:#dce5f1;font-size:10px}.mobile-bottom a b{font-size:18px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2,.formrow{grid-template-columns:1fr}.hero{padding:14px}.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.employee-header{padding:14px!important}.employee-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.print-grid{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  body{font-size:13px}.brand{font-size:17px}.user{font-size:10px;max-width:52%;text-align:right}.wrap{padding:12px 10px 82px}.title,.print-head h1{font-size:21px!important}.card{padding:14px;border-radius:14px}.grid{gap:9px}.employee-title{font-size:21px!important}.employee-header{align-items:flex-start!important}.branch-badge{font-size:11px!important;padding:8px 10px!important}.employee-grid{gap:9px!important}.employee-stat{padding:13px!important;min-height:100px!important}.quick-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}.quick-card{padding:13px!important}.btn,button{font-size:12px;padding:9px 11px}input,select,textarea{font-size:16px;min-height:44px}table{min-width:650px}th,td{font-size:12px;padding:10px}.pdf-frame{height:70vh!important}
}
@media(max-width:390px){.grid,.employee-grid{grid-template-columns:1fr!important}.quick-grid{grid-template-columns:1fr!important}.user{display:none}.card{padding:12px}}
@media print{.nav,.mobile-bottom{display:none!important}.wrap{padding:0!important}.card{box-shadow:none!important}}

/* =========================================================
   NHÂN SỰ
========================================================= */
.staff-toolbar{display:grid;grid-template-columns:minmax(240px,1.7fr) minmax(170px,.8fr) auto;gap:10px;align-items:end;margin-bottom:16px}
.staff-list-card{padding:0;overflow:hidden}.staff-table{min-width:850px}
.staff-person{display:flex;align-items:center;gap:10px;min-width:190px}
.staff-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,#162038,#263755);color:#fff;font-weight:900;font-size:13px}
.staff-name{font-weight:900;color:#162038}.staff-role{font-size:11px;color:#788396;margin-top:2px}.staff-phone{font-weight:800}
.staff-card-grid{display:none;grid-template-columns:1fr;gap:10px}
.staff-mobile-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;box-shadow:0 4px 15px rgba(16,32,59,.05);text-decoration:none}
.staff-mobile-top{display:flex;gap:11px;align-items:center}.staff-mobile-info{flex:1;min-width:0}.staff-mobile-arrow{font-size:19px;color:#a0a8b5}
.staff-mobile-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid #edf0f4;font-size:11px;color:#687386}
.staff-mobile-meta b{display:block;color:#243149;margin-top:2px}
.staff-profile-head{display:flex;align-items:center;gap:16px}.staff-profile-avatar{width:72px;height:72px;border-radius:20px;background:linear-gradient(135deg,#162038,#293c61);color:#fff;display:grid;place-items:center;font-size:25px;font-weight:900;flex:none;box-shadow:0 8px 20px rgba(16,32,59,.16)}
.staff-profile-title{font-size:24px;font-weight:900;color:#162038}.staff-profile-sub{margin-top:5px;color:#748095}
.staff-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}.staff-summary-item{border:1px solid #e7eaf0;border-radius:12px;padding:11px;background:#fafbfc}
.staff-summary-item span{display:block;font-size:10px;color:#7a8596;font-weight:800;text-transform:uppercase;letter-spacing:.35px}.staff-summary-item b{display:block;margin-top:5px;color:#1d2a42}
.staff-profile-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px}.staff-profile-menu{position:sticky;top:80px;align-self:start}
.staff-profile-menu a{display:block;text-decoration:none;border-radius:9px;padding:10px 11px;color:#4a576d;font-weight:800;margin:3px 0}.staff-profile-menu a.active,.staff-profile-menu a:hover{background:#fff1e8;color:#dd5d08}
.staff-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.staff-detail-card h3{margin:0 0 13px;color:#162038;font-size:15px}
.staff-kv{display:grid;grid-template-columns:145px minmax(0,1fr);gap:9px 12px;font-size:13px}.staff-kv .k{color:#7a8596}.staff-kv .v{font-weight:700;color:#26334b;overflow-wrap:anywhere}
.staff-privacy{background:#eef6ff;border:1px solid #cfe3ff;color:#365b80;padding:11px 13px;border-radius:11px;font-size:12px;margin-top:14px}
.profile-section-title{font-size:12px;color:#ff7417;font-weight:900;text-transform:uppercase;letter-spacing:.7px;margin:4px 0 12px}
.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 13px}.profile-form-grid .wide{grid-column:1/-1}
@media(max-width:900px){.staff-toolbar{grid-template-columns:1fr 1fr}.staff-toolbar-action{grid-column:1/-1}.staff-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-profile-layout{grid-template-columns:1fr}.staff-profile-menu{position:static;display:flex;overflow-x:auto;gap:5px}.staff-profile-menu a{white-space:nowrap;background:#f4f6f9}}
@media(max-width:800px){.mobile-bottom{overflow-x:auto;justify-content:flex-start}.mobile-bottom a{min-width:62px;flex:1 0 62px}.staff-toolbar{grid-template-columns:1fr}.staff-toolbar-action{grid-column:auto}.staff-list-card{display:none}.staff-card-grid{display:grid}.staff-profile-avatar{width:58px;height:58px;border-radius:16px;font-size:20px}.staff-profile-title{font-size:20px}.staff-summary{grid-template-columns:1fr 1fr}.staff-details,.profile-form-grid{grid-template-columns:1fr}.profile-form-grid .wide{grid-column:auto}}
@media(max-width:430px){.staff-summary{grid-template-columns:1fr}.staff-kv{grid-template-columns:115px minmax(0,1fr)}}

/* =========================================================
   HEADER AVATAR + USER INFO — DESKTOP & MOBILE
========================================================= */
.top{
    min-height:62px;
}

.header-user{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    min-width:0;
}

.header-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:50%;
    overflow:hidden;
    display:grid;
    place-items:center;
    flex:none;
    text-decoration:none !important;
    background:linear-gradient(135deg,#ff7417,#ff914d);
    color:#fff !important;
    border:2px solid rgba(255,255,255,.86);
    box-shadow:0 3px 10px rgba(0,0,0,.14);
    font-size:10px;
    font-weight:900;
}

.header-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.header-user-info{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
    min-width:0;
    white-space:nowrap;
    color:#eef2f8;
    font-size:11px;
}

.header-user-name{
    font-weight:900;
    color:#fff;
}

.header-user-role{
    color:#d8deea;
}

.header-user-info a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
}

/* Điện thoại: KHÔNG ẩn thông tin tài khoản */
@media(max-width:600px){

    .top{
        min-height:58px;
        padding:8px 10px !important;
        gap:7px;
    }

    .brand{
        font-size:15px !important;
        flex:0 0 auto;
    }

    .user,
    .header-user{
        display:flex !important;
    }

    .header-user{
        max-width:69%;
        gap:5px;
    }

    .header-avatar{
        width:28px;
        height:28px;
        min-width:28px;
        border-width:1.5px;
        font-size:9px;
    }

    .header-user-info{
        display:flex !important;
        font-size:9px;
        gap:3px;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
    }

    .header-user-info::-webkit-scrollbar{
        display:none;
    }

    .header-user-name,
    .header-user-role,
    .header-user-sep,
    .header-user-info a{
        flex:none;
    }
}

@media(max-width:430px){

    .user,
    .header-user{
        display:flex !important;
    }

    .top{
        align-items:center !important;
    }

    .brand{
        font-size:14px !important;
    }

    .header-user{
        max-width:72%;
    }

    .header-user-info{
        font-size:8.5px;
    }
}

@media(max-width:360px){

    .brand{
        font-size:13px !important;
    }

    .header-user{
        max-width:74%;
    }

    .header-avatar{
        width:26px;
        height:26px;
        min-width:26px;
    }

    .header-user-info{
        font-size:8px;
    }
}

/* =========================================================
   HEADER PROFILE DROPDOWN — FIX
========================================================= */
.header-user{
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    max-width:none !important;
    overflow:visible !important;
}

.header-profile{
    position:relative;
    overflow:visible;
}

.header-profile-trigger{
    min-height:38px !important;
    width:auto !important;
    padding:3px 8px 3px 4px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.07) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    box-shadow:none !important;
    cursor:pointer;
}

.header-profile-trigger:hover{
    background:rgba(255,255,255,.12) !important;
    transform:none !important;
}

.header-profile-trigger .header-avatar{
    width:30px;
    height:30px;
    min-width:30px;
    border-width:1.5px;
    pointer-events:none;
}

.header-profile-name{
    max-width:190px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:900;
    color:#fff;
}

.header-profile-arrow{
    font-size:11px;
    color:#cfd6e2;
    transition:transform .15s ease;
}

.header-profile-trigger[aria-expanded="true"] .header-profile-arrow{
    transform:rotate(180deg);
}

.header-profile-menu{
    position:absolute;
    z-index:99999;
    top:calc(100% + 8px);
    right:0;
    width:220px;
    padding:7px;
    border-radius:13px;
    background:#fff;
    border:1px solid #e3e7ed;
    box-shadow:0 16px 38px rgba(18,32,56,.22);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-5px) scale(.98);
    transform-origin:top right;
    transition:.15s ease;
}

.header-profile-menu.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.header-profile-menu-head{
    padding:10px 10px 9px;
    border-bottom:1px solid #edf0f4;
    margin-bottom:5px;
}

.header-profile-menu-name{
    color:#162038;
    font-size:12px;
    font-weight:900;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.header-profile-menu-role{
    margin-top:3px;
    color:#7d8899;
    font-size:10px;
}

.header-profile-menu a{
    display:flex;
    align-items:center;
    min-height:38px;
    padding:8px 10px;
    border-radius:9px;
    color:#2c3950 !important;
    text-decoration:none !important;
    font-size:11px;
    font-weight:800;
}

.header-profile-menu a:hover{
    background:#f4f6f9;
}

.header-profile-divider{
    height:1px;
    background:#edf0f4;
    margin:5px 3px;
}

.header-profile-menu .header-profile-logout{
    color:#c62828 !important;
}

.header-profile-menu .header-profile-logout:hover{
    background:#fff0f0;
}

/* Không dùng dòng user info cũ nữa */
.header-user-info{
    display:none !important;
}

@media(max-width:600px){
    .top{
        overflow:visible !important;
    }

    .header-user{
        display:flex !important;
        max-width:64% !important;
        overflow:visible !important;
    }

    .header-profile{
        max-width:100%;
    }

    .header-profile-trigger{
        max-width:100%;
        min-height:36px !important;
    }

    .header-profile-trigger .header-avatar{
        width:28px;
        height:28px;
        min-width:28px;
    }

    .header-profile-name{
        max-width:125px;
        font-size:10px;
    }

    .header-profile-menu{
        width:210px;
    }
}

@media(max-width:430px){
    .header-user{
        max-width:68% !important;
    }

    .header-profile-name{
        max-width:105px;
    }

    .header-profile-menu{
        position:fixed;
        top:58px;
        right:8px;
        width:min(230px,calc(100vw - 16px));
    }
}


/* =========================================================
   HOA NHÂN — MOBILE HEADER SAFE AREA FIX 2026-09-03
   Tránh thanh trạng thái iPhone/PWA che logo và tài khoản.
   ========================================================= */
@media(max-width:900px){
    .top{
        height:auto !important;
        min-height:calc(58px + env(safe-area-inset-top)) !important;
        padding-top:env(safe-area-inset-top) !important;
        padding-left:max(14px,env(safe-area-inset-left)) !important;
        padding-right:max(14px,env(safe-area-inset-right)) !important;
        padding-bottom:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        overflow:visible !important;
    }
    .top > .brand{
        min-width:0 !important;
        flex:1 1 auto !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        line-height:58px !important;
    }
    .top > .header-user{
        flex:0 1 auto !important;
        min-width:0 !important;
        max-width:58% !important;
        height:58px !important;
        display:flex !important;
        align-items:center !important;
    }
    .header-profile-trigger{
        max-width:100% !important;
    }
    .header-profile-name{
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }
}

@media(max-width:430px){
    .top{
        min-height:calc(58px + env(safe-area-inset-top)) !important;
        padding-top:env(safe-area-inset-top) !important;
        padding-left:max(10px,env(safe-area-inset-left)) !important;
        padding-right:max(10px,env(safe-area-inset-right)) !important;
    }
    .top > .brand{
        font-size:14px !important;
        line-height:58px !important;
    }
    .top > .header-user{
        max-width:62% !important;
        height:58px !important;
    }
    .header-profile-name{
        max-width:92px !important;
    }
    .header-profile-menu{
        top:calc(58px + env(safe-area-inset-top)) !important;
        right:max(8px,env(safe-area-inset-right)) !important;
    }
}