:root{
  --navy:#1f3b57; --navy-dark:#162a3f; --blue:#2e75b6; --blue-light:#eaf0f6;
  --green:#1e8e5a; --green-bg:#e6f4ec; --amber:#b7791f; --amber-bg:#fdf3e0;
  --red:#c0392b; --red-bg:#fbeaea; --gray:#6b7280; --gray-bg:#f4f6f8;
  --border:#e2e6ea; --text:#20262b; --card:#ffffff;
  --purple:#7c3aed; --purple-bg:#f1e9fb; --teal:#0d9488; --teal-bg:#e1f5f3; --pink:#db2777; --pink-bg:#fce7f3;
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--gray-bg);color:var(--text);}
a{color:inherit;text-decoration:none;}
.app{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{width:246px;background:var(--navy-dark);color:#fff;display:flex;flex-direction:column;flex-shrink:0;}
.brand{padding:22px 20px;font-size:20px;font-weight:800;letter-spacing:.3px;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none;cursor:pointer;}
.brand:hover{background:rgba(255,255,255,.04);}
.brand span{color:#7fb0e0;}
.brand{display:flex;align-items:center;gap:9px;}
.brand-logo{height:22px;width:auto;max-width:80px;border-radius:3px;object-fit:contain;}
.nav{flex:1;padding:16px 10px;}
.nav-section-label{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#8a9ab0;font-weight:700;padding:16px 12px 8px;}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:10px;cursor:pointer;color:#dbe4ee;font-size:14.5px;margin-bottom:4px;transition:.15s;font-weight:600;}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;}
.nav-item.active{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(124,58,237,.35);}
.nav-icon{width:18px;text-align:center;}
.nav-chip{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:rgba(255,255,255,.08);}
.nav-item.active .nav-chip{background:rgba(255,255,255,.24)!important;}
.chip-blue{background:rgba(46,117,182,.28);}
.chip-orange{background:rgba(201,120,31,.28);}
.chip-purple{background:rgba(124,58,237,.28);}
.chip-teal{background:rgba(13,148,136,.28);}
.chip-pink{background:rgba(219,39,119,.28);}
.chip-gray{background:rgba(255,255,255,.12);}
.chip-cyan{background:rgba(8,145,178,.28);}
.chip-green{background:rgba(22,163,74,.28);}

/* Người dùng: click vào tên để mở menu (đổi thông tin / đăng xuất) */
.user-chip-wrap{margin-top:auto;position:relative;border-top:1px solid rgba(255,255,255,.08);}
.user-chip{display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;transition:.15s;}
.user-chip:hover{background:rgba(255,255,255,.06);}
.user-chip-caret{margin-left:auto;color:#8a9ab0;font-size:10px;flex-shrink:0;}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;}
.avatar-sm{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0;}
img.avatar,img.avatar-sm{object-fit:cover;display:block;}
.avatar-preview{width:56px;height:56px;font-size:20px;margin:0 auto 10px;}
.user-meta{font-size:12px;line-height:1.3;color:#c9d6e3;}
.user-meta b{color:#fff;font-size:13px;display:block;}
.user-menu{display:none;position:absolute;bottom:100%;left:12px;right:12px;background:#fff;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22);overflow:hidden;margin-bottom:6px;z-index:60;}
.user-menu.show{display:block;}
.user-menu a{display:block;padding:11px 14px;font-size:13px;color:var(--navy);font-weight:600;}
.user-menu a:hover{background:var(--blue-light);}

/* Main */
.main{flex:1;display:flex;flex-direction:column;min-width:0;}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:16px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.topbar h1{font-size:21px;margin:0;font-weight:800;color:var(--navy);position:relative;padding-left:14px;letter-spacing:.1px;}
.topbar h1:before{content:'';position:absolute;left:0;top:1px;bottom:1px;width:4px;border-radius:3px;background:linear-gradient(180deg,var(--blue),var(--purple));}
.topbar p{margin:2px 0 0 14px;color:var(--gray);font-size:13px;}
.btn{background:var(--blue);color:#fff;border:none;padding:9px 16px;border-radius:7px;font-size:13.5px;cursor:pointer;font-weight:600;display:inline-block;}
.btn:hover{background:#256199;}
.btn.secondary{background:#fff;color:var(--navy);border:1px solid var(--border);}
.btn.secondary:hover{background:var(--gray-bg);}
.content{padding:24px 28px;flex:1;overflow-y:auto;}

/* Global search */
.search-wrap{position:relative;width:280px;flex-shrink:0;}
.search-wrap input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:var(--gray-bg);}
.search-wrap input:focus{outline:none;border-color:var(--blue);background:#fff;}
.search-results{position:absolute;top:calc(100% + 6px);left:0;width:360px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(20,28,38,.14);max-height:400px;overflow-y:auto;z-index:80;padding:8px;display:none;}
.search-results.show{display:block;}
.search-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--gray);padding:8px 8px 4px;font-weight:600;}
.search-item{padding:8px;border-radius:7px;cursor:pointer;}
.search-item:hover{background:var(--blue-light);}
.search-item .sub{font-size:11.5px;color:var(--gray);margin-top:1px;}

/* Chuông thông báo (topbar) */
.notif-wrap{position:relative;flex-shrink:0;}
.notif-bell{position:relative;background:var(--gray-bg);border:1px solid var(--border);border-radius:8px;width:38px;height:38px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.notif-bell:hover{background:var(--blue-light);}
.notif-badge{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;border-radius:10px;min-width:17px;height:17px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.notif-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;width:360px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 28px rgba(20,28,38,.14);max-height:440px;flex-direction:column;z-index:80;}
.notif-dropdown.show{display:flex;}
.notif-dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);font-size:13.5px;}
.notif-dropdown-header a{font-size:12px;color:var(--blue);text-decoration:none;font-weight:600;}
.notif-dropdown-header a:hover{text-decoration:underline;}
#notifList{overflow-y:auto;flex:1;}
.notif-item{display:block;padding:10px 14px;text-decoration:none;color:inherit;border-bottom:1px solid var(--border);}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:var(--blue-light);}
.notif-item-title{font-size:12.5px;font-weight:700;color:var(--navy);}
.notif-item-body{font-size:12px;color:var(--text);margin-top:2px;line-height:1.4;}
.notif-item-time{font-size:10.5px;color:var(--gray);margin-top:4px;}
.notif-dropdown-footer{padding:10px 14px;border-top:1px solid var(--border);}
#topbarActions{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}
.kpi-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 18px 20px;position:relative;overflow:hidden;}
.kpi-card:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--blue);}
.kpi-grid .kpi-card:nth-child(1):before{background:var(--green);}
.kpi-grid .kpi-card:nth-child(2):before{background:var(--amber);}
.kpi-grid .kpi-card:nth-child(3):before{background:var(--purple);}
.kpi-grid .kpi-card:nth-child(4):before{background:var(--teal);}
a.kpi-card{display:block;cursor:pointer;transition:.15s;}
a.kpi-card:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(20,28,38,.1);transform:translateY(-1px);}
.kpi-card .label{font-size:12.5px;color:var(--navy);margin-bottom:8px;font-weight:700;}
.kpi-card .value{font-size:30px;font-weight:800;color:var(--navy);}
.up{color:var(--green);} .warn{color:var(--amber);} .down{color:var(--red);}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px 20px;margin-bottom:16px;}
.panel h3{margin:0 0 16px;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:.1px;}

/* charts */
.chart-panel{display:flex;flex-direction:column;}
.chart-row{display:flex;align-items:center;gap:20px;flex:1;}
.chart-legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px;flex:1;}
.legend-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:6px;transition:.15s;font-weight:600;}
.legend-item:hover{background:var(--blue-light);}
a.chart-panel{cursor:pointer;}
a.chart-panel:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(20,28,38,.1);}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0;}
.donut-wrap{position:relative;width:120px;height:120px;margin:4px auto 0;flex-shrink:0;}
.donut-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--navy);}
.dept-row{display:block;margin-bottom:12px;padding:5px 6px;border-radius:7px;transition:.15s;}
.dept-row:hover{background:var(--blue-light);}
.dept-row-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;font-weight:600;}

/* Khối lượng công việc theo nhân viên (Dashboard) — biểu đồ cột dọc */
.emp-legend{display:flex;gap:16px;font-size:11.5px;color:var(--gray);margin-bottom:18px;font-weight:600;}
.emp-legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.bar-chart{display:flex;align-items:flex-end;justify-content:space-evenly;flex:1;min-height:170px;padding:20px 4px 0;overflow-x:auto;border-bottom:2px solid var(--border);}
.bar-chart-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-decoration:none;color:inherit;flex-shrink:0;min-width:60px;padding:6px;border-radius:8px 8px 0 0;transition:.15s;}
.bar-chart-col:hover{background:var(--blue-light);}
.bar-chart-bars{display:flex;align-items:flex-end;gap:6px;height:130px;}
.bar-chart-bar{width:26px;border-radius:5px 5px 2px 2px;position:relative;min-height:3px;transition:height .3s;}
.bar-chart-val{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:10.5px;font-weight:700;color:var(--navy);white-space:nowrap;}
.bar-chart-label{font-size:11px;color:var(--gray);margin-top:10px;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.bar-chart-col:hover .bar-chart-label{color:var(--blue);}

/* table */
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{text-align:left;color:var(--gray);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;padding:9px 10px;border-bottom:1px solid var(--border);}
td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.clickable:hover{background:var(--blue-light);cursor:pointer;}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;}
.badge.green{background:var(--green-bg);color:var(--green);}
.badge.amber{background:var(--amber-bg);color:var(--amber);}
.badge.red{background:var(--red-bg);color:var(--red);}
.badge.gray{background:var(--gray-bg);color:var(--gray);}
.badge.blue{background:var(--blue-light);color:var(--blue);}
.badge.purple{background:var(--purple-bg);color:var(--purple);}

.toolbar{display:flex;gap:10px;margin-bottom:16px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 4px 14px rgba(20,28,38,.06);}
.bulk-action-bar{display:flex;align-items:center;gap:10px;padding:10px 18px;background:var(--blue-light);color:var(--navy);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--border);}
.toolbar select,.toolbar input{padding:8px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;background:#fff;}
.toolbar input{flex:1;min-width:180px;}
.toolbar-search-wrap{position:relative;flex:1;min-width:180px;}
.toolbar-search-wrap input{width:100%;min-width:0;}
.spacer{flex:1;}

/* bộ lọc khoảng ngày (từ ngày - đến ngày) */
.date-filter{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:7px;padding:5px 10px;}
.date-filter label{font-size:12px;color:var(--gray);white-space:nowrap;font-weight:600;}
.date-filter input{border:none;padding:3px 0;font-size:13px;min-width:130px;flex:none;}
.date-filter input:focus{outline:none;}

/* phân loại danh sách (hợp đồng) theo tháng */
.month-group{margin-bottom:14px;}
.month-group-title{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);font-size:14.5px;padding:10px 4px;user-select:none;}
.month-group-title::-webkit-details-marker{display:none;}
.month-group-title::before{content:'▸';color:var(--gray);font-size:12px;transition:transform .15s;display:inline-block;}
details[open]>.month-group-title::before{transform:rotate(90deg);}
.month-count{font-weight:700;font-size:11.5px;color:var(--blue);background:var(--blue-light);padding:2px 10px;border-radius:20px;}

/* Lịch tổng quan (calendar.php) */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;}
.cal-weekday{background:var(--card);padding:9px 6px;text-align:center;font-size:12px;font-weight:700;color:var(--gray);min-width:0;}
.cal-cell{background:#fff;min-height:104px;min-width:0;padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden;}
.cal-cell-muted{background:var(--gray-bg);}
.cal-cell-muted .cal-daynum{color:var(--gray);}
.cal-cell-today{background:var(--blue-light);box-shadow:inset 0 0 0 2px var(--blue);}
.cal-daynum{font-size:12px;font-weight:700;color:var(--navy);}
.cal-event{font-size:10.5px;padding:2px 6px;border-radius:5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;font-weight:600;}
.cal-event-effective{background:#d99a15;}
.cal-event-expiry{background:#dc2626;}
.cal-event-due{background:#7c3aed;}
.cal-more{font-size:10px;color:var(--gray);padding-left:4px;}
.cal-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle;}
.cal-legend{font-size:12px;color:var(--gray);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* kanban */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.kanban-col{background:#eef1f4;border-radius:10px;padding:12px;min-height:120px;}
.kanban-col h4{margin:2px 6px 12px;font-size:13px;display:flex;justify-content:space-between;color:var(--navy);font-weight:700;}
.kanban-col h4 .count{background:#fff;border-radius:10px;padding:1px 8px;font-size:11.5px;color:var(--gray);}
.kcard{background:#fff;border:1px solid var(--border);border-radius:8px;padding:11px 12px;margin-bottom:10px;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.03);}
.kcard .title{font-weight:600;margin-bottom:6px;font-size:13.5px;}
.kcard .meta{color:var(--gray);font-size:11.5px;margin-bottom:8px;}
.kcard select{width:100%;font-size:12px;padding:5px 6px;border-radius:6px;border:1px solid var(--border);}

/* compliance */
.progress-wrap{background:#eef1f4;border-radius:8px;height:10px;overflow:hidden;}
.progress-bar{height:100%;background:var(--green);}
.check-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.check-row:last-child{border-bottom:none;}
.check-row input{width:16px;height:16px;}
.check-row .txt{flex:1;font-size:13.5px;}
.check-row .due{font-size:12px;color:var(--gray);}

/* Tài liệu (danh sách kiểu thư viện pháp luật) */
.doc-row{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-bottom:1px solid var(--border);}
.doc-row:last-child{border-bottom:none;}
.doc-row:hover{background:var(--blue-light);}
.doc-row-link{flex:1;display:flex;gap:14px;text-decoration:none;color:inherit;min-width:0;}
.doc-actions{display:flex;gap:4px;flex-shrink:0;padding-top:2px;}
.doc-action-btn{color:var(--gray);text-decoration:none;font-size:14px;padding:5px 7px;border-radius:6px;line-height:1;background:transparent;border:none;cursor:pointer;font-family:inherit;}
.doc-action-btn:hover{background:var(--gray-bg);color:var(--navy);}
.doc-action-btn.danger:hover{background:var(--red-bg);color:var(--red);}
.doc-icon{font-size:21px;flex-shrink:0;margin-top:1px;}
.doc-main{flex:1;min-width:0;}
.doc-title{font-size:14px;font-weight:700;color:var(--blue);display:block;cursor:pointer;}
.doc-title:hover{text-decoration:underline;}
.doc-title-plain{font-size:14px;font-weight:700;color:var(--navy);}
.doc-meta{font-size:12px;color:var(--gray);margin-top:4px;}
.doc-topic{background:var(--blue-light);color:var(--blue);padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;}
.doc-excerpt{font-size:12.5px;color:var(--gray);margin-top:4px;line-height:1.5;}
/* Danh sách dạng hàng (kiểu Tệp tin/Tài liệu) dùng thay cho bảng trên di
   động/tablet ở trang Nhân sự & Phòng ban — ẩn mặc định trên desktop (vẫn
   dùng bảng .desktop-table-view), chỉ hiện qua media query bên dưới. */
.mobile-list-view{display:none;}
.article-content{white-space:pre-wrap;line-height:1.7;font-size:14px;color:var(--text);margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}

/* Thư viện tài liệu (thư mục) */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray);margin-bottom:14px;flex-wrap:wrap;}
.breadcrumb a{color:var(--blue);font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}
.breadcrumb .sep{color:var(--border);}
a.doc-row{cursor:pointer;}
a.doc-row:hover{background:var(--blue-light);}

/* forms */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12.5px;color:var(--gray);margin-bottom:5px;font-weight:600;}
.field input,.field select,.field textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:13.5px;font-family:inherit;}
.field-row{display:flex;gap:12px;}
.field-row .field{flex:1;}

/* Widget chọn nhiều người kiểu tag/chip (Người phụ trách) */
.tag-picker{border:1px solid var(--border);border-radius:7px;padding:7px 9px;background:#fff;}
.tag-chip-list{display:flex;flex-wrap:wrap;gap:6px;}
.tag-chip-list:not(:empty){margin-bottom:6px;}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--blue-light);color:var(--blue);font-size:12.5px;font-weight:600;padding:3px 6px 3px 10px;border-radius:20px;}
.tag-chip-remove{background:none;border:none;color:var(--blue);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;font-weight:700;font-family:inherit;}
.tag-chip-remove:hover{color:var(--red);}
.tag-picker-input{border:none;width:100%;padding:3px 2px;font-size:13.5px;font-family:inherit;}
.tag-picker-input:focus{outline:none;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.detail-row .k{color:var(--gray);}
.detail-row a,.file-link{text-decoration:underline;color:var(--blue);cursor:pointer;}

.empty{color:var(--gray);font-size:13px;padding:24px;text-align:center;}
.banner{background:var(--blue-light);color:var(--navy);border-radius:8px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;}
.extract-note{background:var(--purple-bg);color:#5b21b6;border-radius:8px;padding:10px 14px;font-size:12.5px;margin-bottom:16px;}

/* bình luận (hợp đồng & yêu cầu pháp lý) */
.comment-list{max-height:260px;overflow-y:auto;margin-bottom:10px;}
.comment-item{padding:10px 0;border-bottom:1px solid var(--border);}
.comment-item:last-child{border-bottom:none;}
.comment-head{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.comment-head b{font-size:12.5px;color:var(--navy);}
.comment-head .when{display:block;font-size:11px;color:var(--gray);font-weight:400;}
.comment-text{font-size:13px;line-height:1.5;white-space:pre-wrap;margin-bottom:4px;}
.comment-img{max-width:200px;max-height:160px;border-radius:8px;border:1px solid var(--border);display:block;margin-top:4px;object-fit:cover;cursor:pointer;}
.comment-file{display:inline-block;margin-top:4px;font-size:12.5px;}
.comment-form{border-top:1px solid var(--border);padding-top:12px;margin-top:4px;}
.comment-textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:inherit;resize:vertical;min-height:44px;}
.comment-preview{display:none;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--gray);}
.comment-preview.show{display:flex;}
.comment-preview img{max-height:60px;border-radius:6px;border:1px solid var(--border);}
.comment-preview a{text-decoration:underline;margin-left:4px;}
.comment-actions{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.comment-attach-btn{cursor:pointer;font-size:12.5px;}

/* modal / overlay dùng chung (không chuyển trang) */
.overlay{display:none;position:fixed;inset:0;background:rgba(15,23,32,.5);z-index:200;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;}
.overlay.show{display:flex;}
.modal{background:#fff;border-radius:12px;padding:26px 26px 22px;width:560px;max-width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28);position:relative;}
.modal h2{margin:0 0 4px;font-size:18px;font-weight:800;color:var(--navy);}
.modal .close{position:absolute;top:16px;right:18px;cursor:pointer;font-size:20px;color:var(--gray);line-height:1;}
.modal .close:hover{color:var(--text);}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;margin-right:6px;vertical-align:-2px;}
@keyframes spin{to{transform:rotate(360deg);}}
.ai-tag{display:inline-block;background:var(--purple-bg);color:var(--purple);font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-left:6px;}
.history-item{padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
.history-item:last-child{border-bottom:none;}
.history-item .when{color:var(--gray);font-size:11.5px;margin-top:2px;}

/* popup xem trước file/ảnh đính kèm (lớp riêng, nổi trên cả modal chính) */
.file-overlay{z-index:300;}
.file-modal{background:#fff;border-radius:12px;padding:20px;width:auto;max-width:88vw;box-shadow:0 24px 60px rgba(0,0,0,.32);position:relative;display:inline-block;}
.file-modal .close{position:absolute;top:14px;right:16px;cursor:pointer;font-size:20px;color:var(--gray);line-height:1;}
.file-modal .close:hover{color:var(--text);}
.file-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding-right:30px;}
.file-modal-name{font-size:13px;font-weight:700;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:380px;}
.file-modal img{max-width:80vw;max-height:80vh;display:block;margin:0 auto;border-radius:8px;}
.file-modal iframe{width:78vw;height:82vh;max-width:900px;border:none;border-radius:8px;}
.file-fallback{padding:24px 30px 6px;text-align:center;min-width:280px;}
.file-fallback p{color:var(--gray);font-size:13.5px;margin-bottom:0;}

/* pagination */
.pagination{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 16px;font-size:12.5px;color:var(--gray);}
.pg-info{margin-right:auto;}
.pg-size{display:flex;align-items:center;gap:6px;}
.pg-size select{padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:12.5px;background:#fff;}
.pg-pages{display:flex;gap:4px;flex-wrap:wrap;}
.pg-link{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 6px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--navy);font-size:12.5px;}
.pg-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:28px;color:var(--gray);font-size:12.5px;}
.pg-link:hover{background:var(--blue-light);}
.pg-link.active{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;}

/* login page */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--navy-dark);}
.login-box{background:#fff;border-radius:16px;padding:40px 36px;width:380px;max-width:90vw;box-shadow:0 24px 60px rgba(0,0,0,.3);}
.login-brand{font-size:26px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:6px;letter-spacing:.2px;display:flex;align-items:center;justify-content:center;gap:10px;}
.login-logo{height:28px;width:auto;max-width:100px;object-fit:contain;}
.login-brand span{color:var(--blue);}
.login-sub{text-align:center;color:var(--gray);font-size:13px;margin:0 0 26px;}
.login-hint{text-align:center;color:var(--gray);font-size:11.5px;margin-top:18px;line-height:1.6;}

/* ==================== Giao diện điện thoại (PWA) ==================== */
/* Ẩn mặc định trên desktop — chỉ hiện qua media query bên dưới. */
.mobile-header-bar{display:none;}
.mobile-hamburger{display:none;}
.mobile-header-avatar{display:none;}
.mobile-header-avatar-wrap{display:none;position:relative;}
.mobile-user-menu{display:none;position:absolute;top:100%;right:0;margin-top:8px;background:#fff;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22);overflow:hidden;z-index:180;min-width:170px;}
.mobile-user-menu.show{display:block;}
.mobile-user-menu a{display:block;padding:11px 14px;font-size:13px;color:var(--navy);font-weight:600;white-space:nowrap;}
.mobile-user-menu a:hover{background:var(--blue-light);}
.bottom-nav{display:none;}
.mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,32,.5);z-index:190;}
.mobile-backdrop.show{display:block;}

@media (max-width: 860px) {
  /* Chặn triệt để mọi khả năng bị tràn ngang (1 phần tử lỡ rộng hơn màn hình
     sẽ chỉ bị cắt thay vì kéo cả trang rộng ra, tránh tình trạng "không full
     màn hình"/phải cuộn ngang mới thấy hết trang). */
  html, body{overflow-x:hidden;max-width:100vw;}
  .app{flex-direction:column;}

  /* Sidebar biến thành ngăn kéo trượt từ trái, ẩn theo mặc định, mở qua tab
     "Thêm" ở chân trang hoặc nút hamburger trên đầu trang. */
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:200;
    width:82vw;max-width:300px;
    padding-top:env(safe-area-inset-top);
    transform:translateX(-100%);
    transition:transform .22s ease;
    overflow-y:auto;
  }
  .sidebar.mobile-open{transform:translateX(0);}

  .main{width:100%;}

  /* Thanh xanh trên cùng: hamburger + logo/tên hệ thống + avatar — giống khu
     vực thương hiệu cố định của web tham khảo, tách riêng khỏi tiêu đề từng
     trang bên dưới để không phải đổi màu chữ tiêu đề theo từng trang.
     CỐ ĐỊNH (position:fixed) khi cuộn trang — luôn có sẵn nút hamburger để mở
     menu bất kể đang cuộn tới đâu. Chiều cao cố định 56px (chưa tính safe-area)
     để phần nội dung bên dưới bù đúng khoảng trống, không bị đè lên. */
  .mobile-header-bar{
    display:flex;align-items:center;gap:10px;
    background:#3236a8;color:#fff;
    height:56px;
    padding:env(safe-area-inset-top) 16px 0;
    position:fixed;top:0;left:0;right:0;z-index:170;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
  }
  .mobile-hamburger{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:9px;flex-shrink:0;
    background:rgba(255,255,255,.14);border:none;color:#fff;
    font-size:18px;cursor:pointer;
  }
  .mobile-brand-link{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:#fff;text-decoration:none;font-size:16px;font-weight:800;}
  .mobile-brand-text b{color:#7fb0e0;font-weight:800;}
  .mobile-brand-logo{height:24px;width:auto;max-width:76px;object-fit:contain;border-radius:3px;}
  .mobile-header-avatar{display:flex;flex-shrink:0;cursor:pointer;}
  .mobile-header-avatar-wrap{display:flex;flex-shrink:0;}

  /* Đẩy nội dung xuống đúng bằng chiều cao thanh xanh cố định ở trên (56px +
     phần safe-area-inset-top nếu có, vd notch/tai thỏ) để không bị che mất. */
  .main{padding-top:calc(56px + env(safe-area-inset-top));}

  /* Tiêu đề từng trang + tìm kiếm + thông báo + nút hành động xếp gọn lại */
  .topbar{padding:14px 16px 12px;gap:10px;}
  .topbar-title-block{width:100%;}
  .topbar h1{font-size:18px;}
  .topbar p{display:none;}
  .search-wrap{width:100%;order:3;}
  .notif-wrap{order:4;}
  #topbarActions{order:5;width:100%;display:flex;flex-wrap:wrap;gap:8px;}
  #topbarActions .btn{flex:1;min-width:130px;text-align:center;white-space:nowrap;}

  .content{padding:14px 14px calc(88px + env(safe-area-inset-bottom));width:100%;box-sizing:border-box;}

  /* Thẻ KPI xếp đầy đủ chiều rộng từng thẻ 1, giống web tham khảo */
  .kpi-grid{grid-template-columns:1fr;}
  .grid-2,.grid-3{grid-template-columns:1fr;}

  /* Chân trang dạng tab-bar với nút tròn nổi (FAB) ở giữa cho Dashboard */
  .bottom-nav{
    display:flex;align-items:flex-end;justify-content:space-around;
    position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:#fff;border-top:1px solid var(--border);
    box-shadow:0 -4px 16px rgba(20,28,38,.08);
    padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--gray);padding:4px 6px;border-radius:8px;flex:1;}
  .bn-item.active{color:var(--blue);}
  .bn-icon{font-size:19px;line-height:1;}
  .bn-label{font-size:10px;font-weight:600;}
  .bn-fab-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--gray);flex:1;transform:translateY(-14px);}
  .bn-fab{
    width:50px;height:50px;border-radius:50%;
    background:linear-gradient(135deg,var(--blue),var(--purple));
    color:#fff;font-size:21px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(46,117,182,.4);
  }
  .bn-fab-wrap.active{color:var(--blue);}

  /* Bảng dài -> cho .panel bao ngoài tự cuộn ngang. KHÔNG đổi display của
     bảng (table{display:block} làm layout vỡ vì <tr>/<td> bên trong vẫn giữ
     display kiểu bảng — đã từng gây lỗi thật, không lặp lại cách đó nữa). */
  .panel{overflow-x:auto;width:100%;box-sizing:border-box;}

  /* Kanban (Yêu cầu pháp lý) xếp CHỒNG DỌC từng cột trạng thái, không cuộn
     ngang nữa — nhất quán với cách bảng dữ liệu đã đổi sang thẻ xếp dọc. */
  .kanban{grid-template-columns:1fr;gap:10px;}
  .kanban-col{min-width:0;}

  .modal{width:92vw;padding:20px 18px 18px;}
  .toolbar{padding:10px 12px;}
  .toolbar-search-wrap{min-width:0;width:100%;}

  /* iOS Safari tự động phóng to (zoom) trang khi bấm vào ô nhập có cỡ chữ nhỏ
     hơn 16px — ép tối thiểu 16px cho mọi ô nhập/chọn để tránh bị phóng to lúc
     gõ, không liên quan gì đến việc hiển thị (16px vẫn đọc rõ bình thường). */
  input, select, textarea{font-size:16px !important;}

  .cal-cell{min-height:66px;padding:4px;}
  .cal-event{font-size:9px;padding:1px 4px;}
  .cal-daynum{font-size:11px;}

  .notif-dropdown{position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;max-height:70vh;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom);}

  /* Bảng dữ liệu (Quản lý hợp đồng, Nhân sự, Nhật ký...) đổi thành danh sách
     thẻ xếp dọc thay vì phải cuộn ngang mới đọc hết cột. Cách làm ĐÚNG là đổi
     display của TẤT CẢ các phần tử trong bảng (table/tr/td) một cách nhất
     quán — lần trước từng lỗi vì chỉ đổi mỗi <table> mà không đổi luôn
     <tr>/<td> bên trong khiến trình duyệt render sai, giờ đổi đồng bộ hết. */
  .responsive-table, .responsive-table tr, .responsive-table td{display:block;width:100%;box-sizing:border-box;}
  .responsive-table{max-width:100%;}
  .responsive-table tr:first-child{display:none;} /* dòng tiêu đề (chứa <th>) ẩn đi, dùng data-label thay thế */
  .responsive-table tr:not(:first-child){
    position:relative;
    border:1px solid var(--border);border-radius:10px;
    margin-bottom:8px;padding:8px 12px;background:#fff;
    box-sizing:border-box;
  }
  .responsive-table td{border:none !important;padding:3px 0;text-align:left;}
  .responsive-table td[data-label]:not([data-label=""])::before{
    content:attr(data-label);display:block;
    font-weight:700;color:var(--gray);font-size:10px;
    text-transform:uppercase;letter-spacing:.3px;margin-bottom:1px;
  }
  /* Ô checkbox chọn dòng: đưa gọn lên góc trên-phải thay vì chiếm hẳn 1 dòng
     riêng như các trường khác — đỡ chiếm chỗ, nhìn gọn hơn. */
  .responsive-table td.td-checkbox{
    position:absolute;top:8px;right:10px;width:auto;padding:0;z-index:1;
  }
  .responsive-table td.td-checkbox::before{display:none;}
  .responsive-table tr:not(:first-child):has(td.td-checkbox){padding-right:38px;}

  /* Quản lý hợp đồng trên di động/tablet: bỏ hẳn cột "Chọn" (checkbox chọn
     hàng loạt để xuất CSV) và thanh hành động hàng loạt đi kèm — tính năng
     này chủ yếu dùng trên desktop — để mỗi thẻ hợp đồng dùng full chiều rộng
     màn hình thay vì phải chừa khoảng trống bên phải cho ô checkbox. */
  #bulkActionBar{display:none !important;}
  .responsive-table td.td-checkbox{display:none !important;}
  .responsive-table tr:not(:first-child):has(td.td-checkbox){padding-right:12px;}

  /* Nhân sự & Phòng ban trên di động/tablet: hiện danh sách dạng hàng (icon +
     nội dung + hành động) giống Tệp tin/Tài liệu thay cho bảng, dùng full
     chiều rộng màn hình thay vì thẻ bảng nhiều dòng nhãn. */
  .desktop-table-view{display:none;}
  .mobile-list-view{display:block;}
}