/* ============================================================================
   style.css : Template ADMIN AIKB (sao y khuon Teltonika, doi brand + them §6)
   Phu thuoc: OS.css (token --az-*) + OS_legacy.css (.az-legacy) + OS.js (AZ.Theme -> html.az-dark)
   Cau truc:
	 1. Header surface token (tu doi dark) + menu uppercase + underline ::after (mau)
	 2. Dropdown tai khoan (hover + cau tang hinh ::before) + theme-toggle 3 nut (mau)
	 3. Filter .search / .button.mini / paging / flash (bo sung cho OS_legacy)
	 4. DARK override cho OS_legacy core (light-hardcoded)
	 5. Login page
   ============================================================================ */
:root { --aikb-primary: #7C3AED; --tel-primary: var(--aikb-primary); }   /* brand AIKB: tim AI */
body { margin: 0; font-family: "SVN-Circular", "Segoe UI", Arial, sans-serif;
	background: var(--az-bg-body, #f5f8f9); color: var(--az-text-main, #262626); }

/* ===== 1. HEADER (surface token — theme-aware nhu PanelHeader mau) ===== */
.az-header {
	width: 100%;
	background: var(--az-bg-surface, #fff);
	border-bottom: 1px solid var(--az-border-color-subtle, rgba(33,33,33,.1));
	box-shadow: var(--az-shadow-sm, 0 0 5px rgba(1,3,4,.12));
	position: sticky; top: 0; z-index: 9000;
}
.az-header-inner { display: flex; align-items: center; gap: 18px; width: 100%; margin: 0; padding: 0 20px; height: 60px; box-sizing: border-box; }
.az-logo { color: var(--az-text-main); text-decoration: none; font-size: 18px; white-space: nowrap; letter-spacing: .3px; }
.az-logo b { color: var(--tel-primary); }
.az-logo span { color: var(--az-text-muted, #8a94a0); font-size: 12px; margin-left: 6px; }

/* Menu chinh: uppercase + underline hover (::after, khong giat layout) — theo mau */
.az-menu { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; flex: 1; }
.az-menu li { position: relative; display: inline-flex; align-items: center; height: 60px; padding: 0 4px; }
.az-menu li a {
	display: block; padding: 8px 12px; text-decoration: none; cursor: pointer;
	font-size: 14px; font-weight: 600; text-transform: uppercase; white-space: nowrap;
	color: var(--az-text-main); transition: color .15s;
}
.az-menu li:hover > a, .az-menu li.on > a { color: var(--tel-primary) !important; }
.az-menu li::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: transparent; transition: background-color .2s; }
.az-menu li:hover::after, .az-menu li.on::after { background: var(--tel-primary); }

/* ===== 2. HEADER-RIGHT: toggle nhanh + dropdown tai khoan ===== */
.az-header-right { display: flex; align-items: center; gap: 6px; }
.az-theme-toggle { color: var(--az-text-muted); cursor: pointer; padding: 8px 10px; border-radius: 6px; text-decoration: none; font-size: 15px; }
.az-theme-toggle:hover { background: var(--az-bg-surface-hover, rgba(0,0,0,.05)); color: var(--tel-primary); }

.az-account { position: relative; height: 60px; display: inline-flex; align-items: center; }
.az-account-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--az-text-main); cursor: pointer; }
.az-account-btn:hover { background: var(--az-bg-surface-hover, rgba(0,0,0,.05)); }
.az-account-btn .zmdi-account-circle { font-size: 22px; color: var(--tel-primary); }
.az-account-btn .az-person { font-size: 13px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.az-account-btn .zmdi-chevron-down { font-size: 16px; color: var(--az-text-muted); }

/* Dropdown (theo mau: absolute + shadow-lg + hover show + cau tang hinh ::before) */
.az-dropdown {
	position: absolute; top: 100%; right: 0; min-width: 240px;
	background: var(--az-bg-surface, #fff);
	border: 1px solid var(--az-border-color-subtle, rgba(33,33,33,.08));
	border-radius: 8px; box-shadow: var(--az-shadow-lg, 0 4px 15px rgba(0,0,0,.15));
	display: none; z-index: 1000; padding: 10px;
}
.az-account:hover .az-dropdown { display: block; }
.az-dropdown::before { content: ""; position: absolute; top: -14px; left: 0; width: 100%; height: 14px; background: transparent; }
.az-dropdown-divider { height: 1px; margin: 8px 0; background: var(--az-border-color-subtle, rgba(33,33,33,.08)); }
.az-dropdown-item {
	display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px;
	color: var(--az-text-main); text-decoration: none; font-size: 14px; cursor: pointer; transition: background-color .2s;
}
.az-dropdown-item:hover { background: var(--az-bg-surface-hover, #f0f0f0); }
.az-logout-item { color: var(--az-danger-text, #d32f2f); }

/* Theme toggle 3 nut (theo mau .theme-toggle) */
.az-theme-group { display: flex; align-items: center; gap: 6px; }
.az-theme-group button {
	flex: 1; padding: 8px 6px; font-size: 12.5px; font-weight: 500; cursor: pointer;
	background: var(--az-bg-surface-alt, #f0f4f5); color: var(--az-text-main);
	border: 1px solid var(--az-border-color, #d5dcde); border-radius: 6px; transition: all .15s;
}
.az-theme-group button i { margin-right: 4px; }
.az-theme-group button:hover { border-color: var(--tel-primary); }
.az-theme-group button.active { background: var(--tel-primary); color: var(--az-text-on-primary, #fff); border-color: var(--tel-primary); }

/* ===== Container ngoai (OS_legacy lo .main ben trong) ===== */
.az-main { width: 100%; margin: 16px 0; padding: 0 20px; box-sizing: border-box; }
.az-main.az-frame { max-width: 100%; margin: 0; padding: 12px; }
.az-main.az-legacy > h1 { font-size: 18px; color: var(--az-text-main, #263238); margin: 6px 0 12px; }
.az-home-empty { text-align: center; color: var(--az-text-muted, #888); padding: 40px; }

/* ===== 3. Filter .search / .button.mini / paging / flash ===== */
.az-legacy .search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.az-legacy .search .right { margin-left: auto; }
.az-legacy .search input[type="text"],
.az-legacy .search input[type="number"],
.az-legacy .search select {
	height: 2.5rem; padding: 0 10px; border-radius: 3px; font-size: 1rem; box-sizing: border-box;
	border: 1px solid var(--az-border-color, #ccc); color: var(--az-text-main, #212121); background: var(--az-bg-surface, #fff);
}
.az-legacy .search input:focus, .az-legacy .search select:focus { border-color: var(--tel-primary); outline: none; box-shadow: var(--az-shadow-focus, 0 0 0 3px rgba(29,150,178,.2)); }
.az-legacy .search button { height: 2.5rem; padding: 0 16px; border: 0; border-radius: 3px; cursor: pointer; font-size: 1rem; color: #fff; background: var(--tel-primary); transition: filter .15s; }
.az-legacy .search button:hover { filter: brightness(.92); }

.az-legacy .button.mini {
	display: inline-block; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; line-height: 1.5; text-decoration: none;
	background: var(--az-bg-surface-alt, #eef1f5); color: var(--az-text-main, #263238); border: 1px solid var(--az-border-color, #d5dbe2);
}
.az-legacy .button.mini:hover { background: var(--az-bg-surface-hover, #e2e8ef); }
.az-legacy .button.mini.green { background: #2e7d32; color: #fff; border-color: #2e7d32; }

.az-legacy .paging { margin-top: 12px; text-align: center; }
.az-legacy .paging a { margin: 0 2px; }
.az-legacy .paging a.active { background: var(--tel-primary); color: #fff; border-color: var(--tel-primary); }

.az-flash { animation: azflash 1s ease; }
@keyframes azflash { 0% { background: var(--az-warning-bg, #fff59d) !important; } 100% { background: transparent; } }

/* ===== 4. DARK override cho OS_legacy core (light-hardcoded) ===== */
html.az-dark .az-legacy.az-legacy .main { background: var(--az-bg-surface); border-color: var(--az-border-color); }
html.az-dark .az-legacy.az-legacy table { background: var(--az-bg-surface); }
html.az-dark .az-legacy.az-legacy tbody td { color: var(--az-text-main); border-color: var(--az-border-color); }
html.az-dark .az-legacy.az-legacy tbody tr:nth-child(even) { background: var(--az-bg-surface-alt); }
html.az-dark .az-legacy.az-legacy tbody tr:hover { background: var(--az-bg-surface-hover); }
html.az-dark .az-legacy.az-legacy .row > label,
html.az-dark .az-legacy.az-legacy .row > span:not(.select2) { color: var(--az-text-main); }
html.az-dark .az-legacy.az-legacy .row > p { color: var(--az-text-muted); }
html.az-dark .az-legacy.az-legacy .row > input[type="text"],
html.az-dark .az-legacy.az-legacy .row > input[type="number"],
html.az-dark .az-legacy.az-legacy .row > input[type="password"],
html.az-dark .az-legacy.az-legacy .row > input[type="file"],
html.az-dark .az-legacy.az-legacy .row > select,
html.az-dark .az-legacy.az-legacy .row > textarea { background: var(--az-bg-surface); color: var(--az-text-main); border-color: var(--az-border-color); }
html.az-dark .az-legacy.az-legacy .search input,
html.az-dark .az-legacy.az-legacy .search select { background: var(--az-bg-surface); color: var(--az-text-main); border-color: var(--az-border-color); }
html.az-dark .az-legacy.az-legacy .button.mini { background: var(--az-bg-surface-alt); color: var(--az-text-main); border-color: var(--az-border-color); }
html.az-dark .az-legacy.az-legacy > h1,
html.az-dark .az-main.az-legacy > h1 { color: var(--az-text-main); }

/* ===== 4b. FLEET DASHBOARD (TeltonikaDeviceList) ===== */
.az-fleet { margin-bottom: 14px; padding: 12px; border: 1px solid var(--az-border-color-subtle, #e7ecee); border-radius: 8px; background: var(--az-bg-surface-alt, #f7f9fa); }
.az-fleet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--az-text-main); }
.az-fleet-head .right { margin-left: auto; }
.az-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.az-kpi { flex: 1 1 110px; min-width: 110px; padding: 10px; text-align: center; border-radius: 8px; background: var(--az-bg-surface, #fff); border: 1px solid var(--az-border-color-subtle, #e7ecee); }
.az-kpi b { display: block; font-size: 22px; line-height: 1.2; color: var(--az-text-main); }
.az-kpi span { font-size: 12px; color: var(--az-text-muted); }
.az-kpi.green b { color: #2e7d32; }
.az-kpi.red b { color: #d32f2f; }
.az-kpi.amber b { color: #ef6c00; }
.az-panels { display: flex; gap: 10px; flex-wrap: wrap; }
.az-panel { flex: 1 1 220px; min-width: 220px; padding: 10px; border-radius: 8px; background: var(--az-bg-surface, #fff); border: 1px solid var(--az-border-color-subtle, #e7ecee); }
.az-panel-t { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--az-text-main); }
.az-panel.danger { border-color: rgba(198,40,40,.5); background: rgba(198,40,40,.06); }
.az-panel.danger .az-panel-t { color: #d32f2f; display: flex; align-items: center; gap: 8px; }
.az-panel.danger .az-panel-t .right { margin-left: auto; }
.az-panel.danger .az-panel-t .right + .right { margin-left: 6px; }
.az-panel .small { color: var(--az-text-muted); line-height: 1.7; }
.az-panel .green { color: #2e7d32; }
.az-panel .red { color: #d32f2f; }
.az-top { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 12px; color: var(--az-text-main); }
.az-top li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dashed var(--az-border-color-subtle, #e7ecee); }
.az-top li:last-child { border-bottom: 0; }
/* Aging bar — 5 muc, click = loc */
.az-aging { display: flex; gap: 4px; margin-top: 4px; }
.az-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 8px 4px; border-radius: 6px; text-decoration: none; color: #fff; text-align: center; opacity: .92; transition: all .15s; }
.az-seg span { font-size: 10.5px; line-height: 1.1; }
.az-seg b { font-size: 16px; }
.az-seg:hover { opacity: 1; transform: translateY(-1px); }
.az-seg.on { outline: 3px solid var(--az-color-primary, #1d96b2); outline-offset: 1px; opacity: 1; }
.az-seg-1 { background: #2e7d32; } .az-seg-2 { background: #388e9e; } .az-seg-3 { background: #ef9a00; }
.az-seg-4 { background: #ef6c00; } .az-seg-5 { background: #c62828; }
/* Chip loc Seen */
.az-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; background: var(--az-bg-surface-alt, #eef1f5); border: 1px solid var(--az-border-color, #d5dcde); color: var(--az-text-main); }
.az-chip a { color: #d32f2f; text-decoration: none; font-weight: bold; }

/* ===== 4c. DEVICE MAP + DETAIL TABS + OVERVIEW ===== */
.az-devmap { height: calc(100vh - 320px); min-height: 420px; position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--az-border-color-subtle, #e7ecee); }
.az-dev-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; padding: 8px 12px; margin-bottom: 8px; border-radius: 8px; background: var(--az-bg-surface-alt, #f7f9fa); border: 1px solid var(--az-border-color-subtle, #e7ecee); color: var(--az-text-main); font-size: 13px; }
.az-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--az-border-color-subtle, #e7ecee); margin-bottom: 10px; flex-wrap: wrap; }
.az-tabs a { padding: 9px 14px; text-decoration: none; color: var(--az-text-main); font-size: 13.5px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; }
.az-tabs a:hover { color: var(--az-color-primary, #1d96b2); }
.az-tabs a.on { color: var(--az-color-primary, #1d96b2); border-bottom-color: var(--az-color-primary, #1d96b2); }
.az-tabbody { padding: 4px 0 12px; }
.az-tab-soon { padding: 30px; text-align: center; color: var(--az-text-muted); background: var(--az-bg-surface-alt, #f7f9fa); border-radius: 8px; }
/* Overview */
.az-ov-badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.az-ov-badges .right { margin-left: auto; }
.az-badge { padding: 5px 10px; border-radius: 16px; font-size: 12.5px; background: var(--az-bg-surface-alt, #eef1f5); border: 1px solid var(--az-border-color, #d5dcde); color: var(--az-text-main); }
.az-badge.green { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.az-badge.red { background: #c62828; border-color: #c62828; color: #fff; }
.az-badge.amber { background: #ef6c00; border-color: #ef6c00; color: #fff; }
.az-ov-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.az-ov-left { flex: 1.2 1 340px; min-width: 300px; }
.az-ov-right { flex: 1 1 320px; min-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.az-ov-map { height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid var(--az-border-color-subtle, #e7ecee); position: relative; }
.az-alert { padding: 7px 10px; border-radius: 6px; font-size: 12.5px; margin-bottom: 6px; }
.az-alert.warn { background: rgba(239,108,0,.12); color: #ef6c00; border: 1px solid rgba(239,108,0,.3); }
.az-alert.danger { background: rgba(198,40,40,.12); color: #d32f2f; border: 1px solid rgba(198,40,40,.3); }
.az-ov-cmd { display: flex; gap: 6px; margin-top: 8px; }
.az-ov-cmd input { flex: 1; height: 2.2rem; padding: 0 8px; border: 1px solid var(--az-border-color, #ccc); border-radius: 4px; background: var(--az-bg-surface, #fff); color: var(--az-text-main); }

/* ===== 4d. USAGE CHARTS (bar + heat CSS thuan) ===== */
.az-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 4px 0; overflow-x: auto; }
.az-bar { flex: 1 1 0; min-width: 16px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.az-bar-fill { width: 100%; min-height: 2px; background: var(--az-color-primary, #1d96b2); border-radius: 3px 3px 0 0; }
.az-bar-fill.amber { background: #ef6c00; }
.az-bar span { font-size: 9.5px; color: var(--az-text-muted); margin-top: 2px; }
.az-heat { display: flex; gap: 3px; flex-wrap: wrap; }
.az-heat-cell { display: flex; flex-direction: column; align-items: center; width: calc(100% / 24 - 3px); min-width: 18px; }
.az-heat-box { width: 100%; height: 26px; border-radius: 3px; background: var(--az-color-primary, #1d96b2); }
.az-heat-cell span { font-size: 9px; color: var(--az-text-muted); margin-top: 2px; }

/* ===== 5. LOGIN (giu hop trang, nen gradient navy — de doc ca 2 theme) ===== */
.az-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0b1f33 0%, #12395f 55%, #1e5fa8 130%); padding: 20px; }
.az-login-box { background: #fff; border-radius: 14px; padding: 30px 34px; width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.az-login-brand { text-align: center; font-size: 22px; margin-bottom: 4px; }
.az-login-brand b { color: var(--tel-primary); }
.az-login-brand span { color: #8a94a0; font-size: 14px; }
.az-login-box .form h2 { color: #263238 !important; font-size: 15px; text-align: left; margin: 20px 0 14px; letter-spacing: 1px; font-weight: 600; border-bottom: 2px solid #eef1f5; padding-bottom: 10px; }
.az-login-box .form input { width: 100%; margin-bottom: 14px; background: #fff !important; color: #212121 !important; border: 1px solid #ccc !important; border-radius: 8px !important; padding: 11px 12px !important; font-size: 15px; outline: none; box-sizing: border-box; }
.az-login-box .form input:focus { border-color: var(--tel-primary) !important; box-shadow: 0 0 0 3px rgba(29,150,178,.15) !important; }
.az-login-box .password-wrap { position: relative; }
.az-login-box .password-wrap input { padding-right: 40px !important; }
.az-login-box .password-toggle { position: absolute; right: 12px; top: 12px; color: #8a94a0; cursor: pointer; }
.az-login-box .form button[name="Submit"], .az-login-box .az-btn { width: 100%; background: var(--tel-primary); color: #fff; border: none; border-radius: 8px; padding: 12px; font-size: 15px; font-weight: 600; cursor: pointer; }
.az-login-box .form button[name="Submit"]:hover, .az-login-box .az-btn:hover { filter: brightness(.92); }
.az-login-box .forgot { display: inline-block; margin-top: 12px; color: #8a94a0; text-decoration: none; font-size: 13px; }
.az-login-box .reg { display: none; }

/* ═══ §DIAG — Tab Chan doan V2 (2 cot + header sticky + console) ═══ */
.az-diag { min-width: 0; }
.az-diag-head { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; background: var(--az-bg-surface, #16202c); border: 1px solid var(--az-border-color, #2a3a4a); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.az-diag-head-l { min-width: 0; }
.az-diag-head-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.az-diag-cols { display: flex; gap: 12px; align-items: flex-start; }
.az-diag-left { flex: 1 1 55%; min-width: 0; }
.az-diag-right { flex: 1 1 45%; min-width: 0; position: sticky; top: 56px; }
@media (max-width: 900px) {
	.az-diag-cols { flex-direction: column; }
	.az-diag-left, .az-diag-right { flex: 1 1 100%; width: 100%; position: static; }
}
.az-console { height: 430px; overflow: auto; background: var(--az-bg-surface-alt, #0f1722); border: 1px solid var(--az-border-color, #2a3a4a); border-radius: 8px; padding: 8px 10px; font-family: 'Consolas', monospace; font-size: 12px; line-height: 1.45; }
.az-cline { margin: 2px 0; word-break: break-word; }
.az-cline .az-ct { opacity: .5; margin-right: 4px; }
.az-cline.out { color: #4fc3f7; }
.az-cline.in { color: var(--az-text-main, #dfe7ee); }
.az-cline.sys { opacity: .68; }
.az-cexp { margin: 4px 0 8px 20px; border-left: 2px solid var(--az-border-color, #2a3a4a); padding-left: 8px; }
.az-exptable td { padding: 2px 6px !important; }
.az-chipbtn { display: inline-block; padding: 2px 9px; margin: 0 4px 4px 0; border: 1px solid var(--az-border-color, #2a3a4a); border-radius: 12px; font-size: 11px; font-family: monospace; color: var(--az-text-main, #dfe7ee); text-decoration: none; background: var(--az-bg-surface-alt, #101a26); }
.az-chipbtn:hover { border-color: #26a69a; color: #26a69a; }
.az-pass-toggle td { opacity: .8; }
.az-flash { animation: azflash 0.8s ease-in-out 2; }
@keyframes azflash { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px #26a69a inset, 0 0 14px rgba(38,166,154,.5); } }

/* ═══ §MAP-CHIP — chip Tenant ánh xạ trong DeviceList ═══ */
.az-tchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 4px 1px 9px; margin: 1px 3px 1px 0; border-radius: 12px; font-size: 12px; background: rgba(46,125,50,.14); border: 1px solid rgba(46,125,50,.5); color: var(--az-text-main, #dfe7ee); }
.az-tchip.off { background: rgba(120,120,120,.14); border-color: rgba(120,120,120,.5); opacity: .7; }
.az-tchip-x { color: #d32f2f; text-decoration: none; font-weight: 700; padding: 0 3px; border-radius: 8px; }
.az-tchip-x:hover { background: rgba(211,47,47,.15); }
.az-tchip.add { padding: 1px 9px; color: #26a69a; text-decoration: none; font-weight: 700; border: 1px dashed rgba(38,166,154,.6); background: transparent; }
.az-tchip.add:hover { background: rgba(38,166,154,.1); }
.az-inline-row > td { background: rgba(38,166,154,.07); border-left: 3px solid #26a69a; padding: 10px 12px !important; }
.az-inline-row.err > td { background: rgba(211,47,47,.08); border-left-color: #d32f2f; }
.az-tchip-x.armed { background: #d32f2f; color: #fff; border-radius: 8px; padding: 0 6px; }

/* ═══ §ROAD-MATCH — dai cung duong + chips distinct (Track tab) ═══ */
.az-road-panel { }
.az-road-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.az-road-seq { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; overflow-x: auto; padding: 4px 2px 8px; white-space: nowrap; }
.az-road-seq::-webkit-scrollbar { height: 6px; }
.az-road-seq::-webkit-scrollbar-thumb { background: rgba(38,166,154,.4); border-radius: 3px; }
.az-road-seg { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 9px; border-radius: 6px; background: rgba(38,166,154,.14); border: 1px solid rgba(38,166,154,.4); flex: 0 0 auto; }
.az-road-seg.off { background: rgba(120,120,120,.12); border-color: rgba(120,120,120,.35); }
.az-road-arrow { color: #26a69a; margin: 0 3px; flex: 0 0 auto; font-weight: 700; }
.az-road-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.az-road-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 14px; background: rgba(38,166,154,.1); border: 1px solid rgba(38,166,154,.35); }

/* ═══ §HELP — sổ tay lệnh & gỡ rối (overlay) ═══ */
.az-help-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2.5%; }
.az-help-win { background: var(--az-bg, #0f1720); border: 1px solid rgba(38,166,154,.35); border-radius: 10px; width: 95%; height: 95%; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.5); overflow: hidden; }
.az-help-win.az-auto { height: auto; max-height: 95%; }
.az-help-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; }
.az-help-x { font-size: 18px; opacity: .7; text-decoration: none; padding: 2px 8px; }
.az-help-x:hover { opacity: 1; }
.az-help-ct { flex: 1 1 auto; overflow: auto; }
.az-help { padding: 0; }
.az-help-nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 16px 0; border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; background: var(--az-bg, #0f1720); z-index: 2; }
.az-help-nav a { padding: 8px 14px; border-radius: 6px 6px 0 0; text-decoration: none; font-size: 13px; opacity: .7; border: 1px solid transparent; border-bottom: none; }
.az-help-nav a.active { opacity: 1; font-weight: 700; background: rgba(38,166,154,.12); border-color: rgba(38,166,154,.4); color: #26a69a; }
.az-help-body { padding: 16px 20px 40px; }
.az-help-body h2 { margin: 0 0 10px; font-size: 19px; }
.az-help-body h3 { margin: 16px 0 8px; font-size: 15px; color: #26a69a; }
.az-help-body h4 { margin: 12px 0 6px; font-size: 14px; }
.az-help-pre { background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); border-radius: 6px; padding: 12px 14px; font-size: 12.5px; line-height: 1.7; overflow-x: auto; white-space: pre; }
.az-help-warn { background: rgba(239,108,0,.1); border-left: 3px solid #ef6c00; border-radius: 4px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.az-help-ok { background: rgba(46,125,50,.1); border-left: 3px solid #2e7d32; border-radius: 4px; padding: 10px 14px; margin: 10px 0; font-size: 13px; }
.az-help-fix { border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding: 12px 14px; margin: 10px 0; }
.az-help-fix-t { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #ef6c00; }
.az-help-fix ul { margin: 4px 0 8px; padding-left: 20px; }
.az-help-fix-do { background: rgba(46,125,50,.08); border-radius: 4px; padding: 8px 10px; }
.az-help-flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.az-help-flow .s { padding: 4px 12px; border-radius: 14px; background: rgba(38,166,154,.14); border: 1px solid rgba(38,166,154,.4); font-size: 12.5px; }
.az-help-flow .s.ok { background: rgba(46,125,50,.16); border-color: rgba(46,125,50,.5); }

/* ═══ §BULK — gửi lệnh hàng loạt + theo dõi lô ═══ */
.az-bulkbar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin: 6px 0; border-radius: 8px; background: rgba(38,166,154,.12); border: 1px solid rgba(38,166,154,.4); flex-wrap: wrap; }
.az-bulk-opt { display: block; margin: 8px 0 4px; cursor: pointer; }
.az-bulk-in { width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.22); color: inherit; font-family: inherit; }
.az-bulk-in:disabled { opacity: .4; }
.az-bulk-chk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.az-batch-head { margin-bottom: 12px; }
.az-batch-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.az-batch-prog { flex: 0 0 180px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.az-batch-prog-i { height: 100%; background: linear-gradient(90deg,#26a69a,#4db6ac); transition: width .4s ease; }
.az-batch-fail { font-size: 12px; line-height: 1.55; padding: 6px 9px; border-radius: 5px; background: rgba(211,47,47,.1); border-left: 3px solid #d32f2f; }
.az-batch-row:hover { background: rgba(38,166,154,.08); }


/* ═══ §BATCH-FIX — bảng lô lệnh: vùng scroll riêng, header dính ĐÚNG đỉnh bảng ═══ */
.az-batch { display: flex; flex-direction: column; height: 100%; padding: 14px 18px; }
.az-batch [name="Body"] { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.az-batch-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; margin-top: 10px; }
.az-batch-scroll table.list { margin: 0; }
.az-batch-scroll thead th { position: sticky; top: 0; z-index: 3; background: #1c8f86; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.az-batch-scroll tbody td { vertical-align: top; }

/* ═══ §SETTING — màn cài đặt (profile + tham số hệ thống) ═══ */
.az-setting h1 { margin-bottom: 12px; }
.az-set-row { display: grid; grid-template-columns: 210px 1fr; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.az-set-row > label { align-self: center; }
.az-set-desc { grid-column: 2; font-size: 12px; line-height: 1.6; opacity: .72; margin-top: 2px; }
.az-set-row input[readonly] { opacity: .55; }
@media (max-width: 760px) {
	.az-set-row { grid-template-columns: 1fr; }
	.az-set-desc { grid-column: 1; }
}

/* Kéo thả thứ tự profile */
.az-drag { cursor: grab; opacity: .45; font-size: 15px; letter-spacing: -2px; user-select: none; }
.az-drag:active { cursor: grabbing; }
.az-prof-tbl tbody tr:hover .az-drag { opacity: .9; color: #26a69a; }
.az-prof-tbl tbody tr.sortable-ghost { opacity: .35; background: rgba(38,166,154,.2); }

/* ═══ §CONFIG-JOB — áp cấu hình có kiểm chứng (Read→Diff→Write→Verify) ═══ */
.az-cfg { padding: 14px 18px; }
.az-cfg-head { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.az-cfg-card { border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.az-cfg-card-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.az-cfg-steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 4px; }
.az-cfg-step { padding: 3px 10px; border-radius: 12px; font-size: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); opacity: .5; }
.az-cfg-step.cur { opacity: 1; background: rgba(38,166,154,.18); border-color: #26a69a; color: #26a69a; font-weight: 700; }
.az-cfg-step.ok { opacity: 1; background: rgba(46,125,50,.15); border-color: rgba(46,125,50,.5); color: #66bb6a; }
.az-cfg-arr { opacity: .3; font-size: 12px; }
/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* MAN HINH THI NGHIEM TU CHAY (TeltonikaExperimentDetail) */
/* ═══════════════════════════════════════════════════════════════════════ */
/* V22: full man hinh desktop — bo tran 1100px, giu dem hai ben */
.az-exp { padding: 20px 32px 60px; max-width: none; }
.az-exp-loading { padding: 60px; text-align: center; color: #8b909b; }

/* ── Dau trang ── */
.az-exp-head {
	display: flex; justify-content: space-between; align-items: flex-start;
	background: linear-gradient(135deg, #1c2029, #16191f);
	border: 1px solid #2a2f3a; border-radius: 12px;
	padding: 18px 22px; margin-bottom: 18px;
}
.az-exp-title { font-size: 20px; font-weight: 700; color: #f0f2f5; margin-bottom: 8px; }
.az-exp-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.az-exp-note { color: #9aa0ab; font-size: 13px; }
.az-exp-head-r { text-align: right; flex-shrink: 0; }
.az-exp-tick { color: #6b7280; font-size: 12px; margin-bottom: 10px; }
.az-exp-actions { display: flex; gap: 8px; justify-content: flex-end; }

.az-btn {
	background: #2a303b; color: #d5d8de; border: 1px solid #3a404c;
	border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 500;
	cursor: pointer; transition: all .15s; white-space: nowrap;
}
.az-btn:hover { background: #333a46; border-color: #4a515f; }
.az-btn:disabled { opacity: .5; cursor: wait; }
.az-btn-tick { background: #1a2e42; border-color: #2a4a6a; color: #60a5fa; }
.az-btn-tick:hover { background: #223a52; }
.az-btn-go { background: #DC2626; border-color: #DC2626; color: #fff; }
.az-btn-go:hover { background: #ef4444; border-color: #ef4444; }
.az-btn-warn { background: #3a2a15; border-color: #6b4a2a; color: #f0c088; }
.az-btn-warn:hover { background: #4a3520; }
.az-btn-ghost { background: transparent; border-color: #3a404c; color: #9aa0ab; }
.az-btn-ghost:hover { background: #262b35; }

/* ── Thanh tien trinh ── */
.az-exp-prog {
	display: flex; align-items: center; padding: 4px 8px 22px; margin-bottom: 4px;
}
.az-prog-step { display: flex; align-items: center; flex: 1; }
.az-prog-step:last-child { flex: 0; }
.az-dot {
	width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: monospace; font-size: 12px; font-weight: 700;
	background: #1c2029; border: 2px solid #363c48; color: #6b7280;
}
.az-dot-done { background: #14331f; border-color: #16a34a; color: #4ade80; }
.az-dot-active { background: #3a2810; border-color: #d97706; color: #fbbf24;
	box-shadow: 0 0 0 4px rgba(217,119,6,.15); }
.az-dot-wait { background: #2a1618; border-color: #DC2626; color: #f87171;
	box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.az-dot-fail { background: #1c1c1c; border-color: #6b7280; color: #9ca3af; }
.az-dot-skip { border-style: dashed; opacity: .5; }
.az-prog-line { flex: 1; height: 2px; background: #2a2f3a; margin: 0 4px; min-width: 20px; }

/* ── The nac ── */
.az-exp-stages { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.az-stage {
	background: #16191f; border: 1px solid #262b35;
	border-left: 4px solid #363c48; border-radius: 10px; padding: 16px 18px;
	transition: border-color .2s;
}
.az-stage-passed { border-left-color: #16a34a; }
.az-stage-measuring, .az-stage-applying { border-left-color: #d97706;
	background: linear-gradient(90deg, rgba(217,119,6,.04), #16191f 40%); }
.az-stage-waitapprove { border-left-color: #DC2626;
	background: linear-gradient(90deg, rgba(220,38,38,.05), #16191f 40%); }
.az-stage-failed { border-left-color: #6b7280; opacity: .65; }
.az-stage-skipped { opacity: .45; }

.az-stage-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.az-stage-code {
	font-family: monospace; font-weight: 700; color: #fca5a5;
	background: #2a1618; padding: 3px 10px; border-radius: 6px; font-size: 12px;
}
.az-stage-name { font-weight: 600; color: #e8eaed; flex: 1; font-size: 14px; }
.az-stage-pill { font-size: 11px; padding: 3px 12px; border-radius: 12px; font-weight: 600; }
.az-pill-pending { background: #262b35; color: #8b909b; }
.az-pill-waitapprove { background: #2a1618; color: #f87171; }
.az-pill-measuring, .az-pill-applying { background: #3a2810; color: #fbbf24; }
.az-pill-passed { background: #14331f; color: #4ade80; }
.az-pill-failed { background: #2a2a2a; color: #9ca3af; }
.az-pill-skipped { background: #262b35; color: #6b7280; }

.az-stage-why { color: #8b909b; font-size: 12.5px; line-height: 1.55; margin-bottom: 10px; }
.az-stage-cmd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.az-stage-cmd code {
	background: #0d0f13; padding: 3px 9px; border-radius: 5px;
	color: #a8d5a0; font-size: 12px; border: 1px solid #1c2028;
}
.az-chip {
	font-size: 11px; padding: 2px 9px; border-radius: 10px;
	background: #1c2029; color: #7b818c; border: 1px solid #2a2f3a;
}
.az-chip-hot { background: #3a2810; color: #fbbf24; border-color: #6b4a2a; }

/* ── So do truoc/sau ── */
.az-stage-measure { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.az-metric {
	background: #0d0f13; border: 1px solid #23272f; border-radius: 8px;
	padding: 10px 14px; min-width: 128px; flex: 1;
}
.az-metric-label { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.az-metric-val { font-size: 15px; color: #e0e2e6; font-weight: 700; }
.az-metric-arr { color: #6b7280; margin: 0 6px; font-weight: 400; }
.az-metric-pct { font-size: 12px; margin-top: 3px; font-weight: 600; }
.az-metric.az-ok { border-color: rgba(22,163,74,.3); }
.az-metric.az-ok .az-metric-pct { color: #4ade80; }
.az-metric.az-bad { border-color: #7f1d1d; background: rgba(127,29,29,.08); }
.az-metric.az-bad .az-metric-pct { color: #f87171; }
.az-metric.az-warn2 .az-metric-pct { color: #fbbf24; }

.az-stage-msg {
	background: #12151b; border-radius: 7px; padding: 9px 12px;
	font-size: 12.5px; color: #9aa0ab; margin-top: 10px; border: 1px solid #1c2028;
}
.az-stage-act { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.az-ask { color: #f0c088; font-size: 13px; font-weight: 500; }

/* ── Nhom thiet bi ── */
.az-exp-devs {
	background: #16191f; border: 1px solid #262b35; border-radius: 10px; padding: 16px 18px;
}
.az-exp-devs-title { font-weight: 700; color: #e8eaed; margin-bottom: 14px; font-size: 15px; }
.az-dev-group { margin-bottom: 16px; }
.az-dev-group:last-child { margin-bottom: 0; }
.az-dev-group-h {
	font-size: 12px; font-weight: 600; color: #9aa0ab; margin-bottom: 6px;
	padding-left: 10px; border-left: 3px solid #363c48;
}
.az-dev-h-target { border-left-color: #DC2626; color: #fca5a5; }
.az-dev-h-canary { border-left-color: #d97706; color: #fbbf24; }
.az-dev-h-control { border-left-color: #6b7280; }
.az-dev-count {
	display: inline-block; background: #262b35; color: #9aa0ab;
	font-size: 10px; padding: 1px 7px; border-radius: 8px; margin-left: 4px;
}
.az-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.az-tbl td { padding: 7px 10px; border-bottom: 1px solid #1a1e26; }
.az-tbl tr:last-child td { border-bottom: none; }
.az-dev-code { font-family: monospace; color: #c5c8ce; }
.az-dev-sr { color: #8b909b; font-size: 12px; white-space: nowrap; }
.az-dev-on { white-space: nowrap; }
.az-on { color: #4ade80; font-size: 12px; }
.az-off { color: #6b7280; font-size: 12px; }
.az-dev-note { color: #6b7280; font-size: 12px; }

/* ── Nhan trang thai dot ── */
.az-bdg { font-size: 11px; padding: 3px 12px; border-radius: 12px; font-weight: 600; }
.az-bdg-draft { background: #262b35; color: #9aa0ab; }
.az-bdg-run { background: #14331f; color: #4ade80; }
.az-bdg-pause { background: #3a2810; color: #fbbf24; }
.az-bdg-done { background: #1a2e42; color: #60a5fa; }
.az-bdg-abort { background: #2a1618; color: #f87171; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════ */
/* KHOI LENH TRONG THE NAC (thu gon duoc) */
/* ═══════════════════════════════════════════════════════════════════════ */
.az-stage-cmdbox {
	margin-top: 14px; border: 1px solid #23272f; border-radius: 8px;
	background: #0f1216; overflow: hidden;
}
.az-cmdbox-toggle {
	display: flex; align-items: center; gap: 8px; padding: 10px 14px;
	cursor: pointer; user-select: none; transition: background .15s;
}
.az-cmdbox-toggle:hover { background: #14171d; }
.az-cmdbox-arrow { color: #6b7280; font-size: 10px; width: 12px; }
.az-cmdbox-label { font-weight: 600; color: #c5c8ce; font-size: 12.5px; flex: 1; }
.az-cmdbox-hint { font-size: 12px; color: #6b7280; }
.az-cmdbox-hint .az-cmd-done { color: #4ade80; font-weight: 700; }
.az-cmdbox-body { padding: 4px 14px 14px; border-top: 1px solid #1a1e26; }
.az-cmdbox-loading, .az-cmdbox-empty { padding: 16px; text-align: center; color: #6b7280; font-size: 12px; }

/* Thanh dem tien do */
.az-cmd-prog { margin: 12px 0; }
.az-cmd-bar {
	height: 8px; background: #060810; border-radius: 4px; overflow: hidden;
	margin-bottom: 8px; border: 1px solid #1c2028;
}
.az-cmd-bar-fill {
	height: 100%; background: linear-gradient(90deg, #16a34a, #4ade80);
	border-radius: 4px; transition: width .4s ease;
}
.az-cmd-stat { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.az-cmd-n { color: #6b7280; }
.az-cmd-done { color: #4ade80; font-weight: 600; }
.az-cmd-wait { color: #fbbf24; }
.az-cmd-fail { color: #f87171; }

/* Bang tung may */
.az-cmd-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.az-cmd-tbl th {
	text-align: left; color: #6b7280; font-weight: 500; font-size: 11px;
	padding: 6px 8px; border-bottom: 1px solid #262b35;
}
.az-cmd-tbl td { padding: 6px 8px; border-bottom: 1px solid #1a1e26; }
.az-cmd-tbl tr:last-child td { border-bottom: none; }
.az-cmd-dev { font-family: monospace; color: #c5c8ce; }
.az-cmd-time { color: #7b818c; font-size: 11.5px; white-space: nowrap; }
.az-cmd-resp code { color: #a8d5a0; font-size: 11px; }

.az-cmd-pill { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; }
.az-cmd-p-done { background: #14331f; color: #4ade80; }
.az-cmd-p-sent { background: #3a2810; color: #fbbf24; }
.az-cmd-p-pending { background: #262b35; color: #9aa0ab; }
.az-cmd-p-fail { background: #2a1618; color: #f87171; }
.az-cmd-p-none { background: #1c1c1c; color: #6b7280; }
.az-cmd-retry { font-size: 10px; color: #f0c088; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* KHOI HIEU QUA TUC THOI (trong the nac dang do) */
/* ═══════════════════════════════════════════════════════════════════════ */
.az-effect {
	margin-top: 14px; border: 1px solid #1e3a2a; border-radius: 8px;
	background: linear-gradient(135deg, #0f1a14, #0d1210); padding: 14px 16px;
}
.az-effect-loading, .az-effect-wait {
	padding: 12px; text-align: center; color: #7b818c; font-size: 12.5px;
}
.az-effect-wait { color: #d0a860; }

.az-effect-head { display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.az-effect-title { font-weight: 700; color: #d5f0dd; font-size: 13.5px; }
.az-effect-verdict { font-size: 12px; padding: 3px 14px; border-radius: 12px; font-weight: 700; }
.az-eff-great { background: #14331f; color: #4ade80; }
.az-eff-good { background: #1a2e14; color: #86d472; }
.az-eff-mild { background: #2a2810; color: #d4c060; }
.az-eff-neutral { background: #262b35; color: #9aa0ab; }
.az-eff-none { background: #2a1618; color: #f0a0a0; }

/* Ba the lon */
.az-effect-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.az-effect-card {
	flex: 1; min-width: 150px; background: #0d0f13; border: 1px solid #1e2a22;
	border-radius: 8px; padding: 12px 14px;
}
.az-effect-main { border-color: #2a4a35; }
.az-effect-label { font-size: 11px; color: #6b8070; margin-bottom: 8px; }
.az-effect-nums { display: flex; align-items: center; gap: 8px; }
.az-effect-before { font-size: 18px; color: #9aa0ab; font-weight: 700; }
.az-effect-arrow { color: #4a5560; }
.az-effect-after { font-size: 22px; color: #f0f2f5; font-weight: 800; }
.az-effect-nums-sm { font-size: 15px; color: #b0b5bd; font-weight: 600; }
.az-effect-pct { font-size: 15px; font-weight: 700; margin-top: 6px; }
.az-effect-pct-sm { font-size: 13px; font-weight: 600; margin-top: 4px; }

.az-drop-great { color: #4ade80; }
.az-drop-good { color: #86d472; }
.az-drop-mild { color: #d4c060; }
.az-drop-neutral { color: #7b818c; }
.az-drop-none { color: #f0a0a0; }

/* The giam rong */
.az-effect-net { border-width: 2px; }
.az-effect-net.az-eff-great { border-color: #16a34a; background: rgba(22,163,74,.08); }
.az-effect-net.az-eff-good { border-color: #4d8040; }
.az-effect-net.az-eff-mild { border-color: #6b6420; }
.az-effect-net.az-eff-none { border-color: #6b3030; background: rgba(127,29,29,.08); }
.az-effect-net-val { font-size: 26px; font-weight: 800; color: #f0f2f5; }
.az-effect-net-note { font-size: 10px; color: #6b7280; margin-top: 4px; }

/* Bang tung may */
.az-effect-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; }
.az-effect-tbl th {
	text-align: left; color: #6b8070; font-weight: 500; font-size: 11px;
	padding: 6px 8px; border-bottom: 1px solid #1e2a22;
}
.az-effect-tbl td { padding: 6px 8px; border-bottom: 1px solid #16201a; }
.az-effect-tbl tr:last-child td { border-bottom: none; }
.az-eff-dev { font-family: monospace; color: #c5c8ce; }
.az-effect-foot { font-size: 11px; color: #5a6560; line-height: 1.5; font-style: italic; }

/* Nhan phu cho hieu qua */
.az-effect-pct-lbl { font-size: 10px; color: #6b7280; font-weight: 400; }
.az-effect-noisy { border-color: #6b5420; background: rgba(107,84,32,.06); }
.az-effect-noisy-note { font-size: 10px; color: #d4a860; margin-top: 4px; }
.az-effect-net-weak { border-color: #3a404c; opacity: .75; }
.az-effect-net-weak .az-effect-net-val { color: #9aa0ab; }
.az-effect-main .az-effect-label b { color: #4ade80; }

/* Dai o gio trong khoi Hieu qua */
.az-effect-hours-wrap { margin: 4px 0 14px; }
.az-effect-hours-title { font-size: 11px; color: #6b8070; margin-bottom: 6px; }
.az-effect-hours { display: flex; gap: 6px; flex-wrap: wrap; }
.az-hr-cell {
	min-width: 58px; padding: 6px 8px; border-radius: 6px; text-align: center;
	background: #0d0f13; border: 1px solid #232a33; cursor: default;
}
.az-hr-cell.az-drop-great { border-color: #16a34a; background: rgba(22,163,74,.12); }
.az-hr-cell.az-drop-good { border-color: #4d8040; background: rgba(77,128,64,.10); }
.az-hr-cell.az-drop-mild { border-color: #6b6420; background: rgba(107,100,32,.10); }
.az-hr-cell.az-drop-none { border-color: #6b3030; background: rgba(127,29,29,.10); }
.az-hr-cell.az-drop-neutral { opacity: .6; }
.az-hr-lbl { font-size: 10px; color: #7b818c; }
.az-hr-val { font-size: 13px; font-weight: 700; margin-top: 2px; }
.az-effect-stable { margin-top: 8px; font-size: 12px; color: #9aa0ab; }
.az-effect-stable b { color: #d5f0dd; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* MAN CAI DAT LICH LAM VIEC (/Teltonika/Setting/Work) */
/* ═══════════════════════════════════════════════════════════════════════ */
.az-work-head { margin-bottom: 18px; }
.az-work-title { font-size: 20px; font-weight: 800; color: #e8eaee; }
.az-work-sub { font-size: 12.5px; color: #8b919c; margin-top: 4px; }
.az-work-on { color: #4ade80; }
.az-work-off { color: #f0a0a0; }

.az-work-card {
	background: #10131a; border: 1px solid #232a33; border-radius: 10px;
	padding: 16px 18px; margin-bottom: 16px; max-width: 720px;
}
.az-work-card-title { font-weight: 700; color: #d5dae2; margin-bottom: 12px; }

.az-work-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.az-work-tbl th { text-align: left; color: #6b7280; font-weight: 500; font-size: 11px;
	padding: 6px 8px; border-bottom: 1px solid #232a33; }
.az-work-tbl td { padding: 8px; border-bottom: 1px solid #1a212b; }
.az-work-tbl tr:last-child td { border-bottom: none; }
.az-work-dayname { font-weight: 600; color: #c5c8ce; }
.az-work-tbl input[type="number"] {
	width: 64px; background: #0d0f13; border: 1px solid #2a323d; color: #e8eaee;
	border-radius: 6px; padding: 5px 8px; font-size: 13px;
}
.az-work-tbl input[type="number"]:disabled { opacity: .35; }
.az-work-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.az-work-switch input { width: 16px; height: 16px; accent-color: #16a34a; }
.az-work-switch span { font-size: 12.5px; color: #9aa0ab; }

.az-work-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.az-work-note { font-size: 12px; color: #4ade80; }

.az-work-hols { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.az-work-hol {
	background: #1a1420; border: 1px solid #4a3060; color: #d8c8ee;
	border-radius: 14px; padding: 4px 12px; font-size: 12.5px;
}
.az-work-hol a { color: #f0a0a0; text-decoration: none; margin-left: 6px; font-weight: 700; }
.az-work-empty { color: #6b7280; font-size: 12.5px; margin-bottom: 12px; }
.az-work-addhol { display: flex; gap: 8px; flex-wrap: wrap; }
.az-work-addhol input[type="date"], .az-work-addhol input[type="text"] {
	background: #0d0f13; border: 1px solid #2a323d; color: #e8eaee;
	border-radius: 6px; padding: 7px 10px; font-size: 13px;
}
.az-work-addhol input[type="text"] { min-width: 240px; }

/* Chong giat: cho dung on dinh khi khoi dong nap async */
.az-effect { min-height: 150px; }
.az-cmdbox-body { min-height: 56px; }

/* ============================================================================
   6. AIKB — DASHBOARD + LO TRINH (bo sung cho site kho tri thuc)
   ============================================================================ */
.aikb-kpi { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 2px 0 6px; color: var(--az-text-main, #263238); }
.aikb-kpi.green { color: #2e7d32; }
.aikb-kpi.red { color: #d32f2f; }
.aikb-kpi span { font-weight: 400; opacity: .6; }

.az-panel .aikb-kpi + div { line-height: 1.75; }

/* Lo trinh cac man sap co */
.aikb-road { display: flex; flex-direction: column; gap: 6px; }
.aikb-road-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 6px; background: var(--az-bg-subtle, rgba(124,58,237,.05)); border-left: 3px solid var(--aikb-primary); }
.aikb-road-p { flex: 0 0 34px; font-weight: 700; font-size: 12px; color: var(--aikb-primary); }
.aikb-road-t { flex: 1; }
.aikb-road-r { flex: 0 0 190px; text-align: right; opacity: .55; font-family: Consolas, "Courier New", monospace; }

@media (max-width: 900px) {
	.aikb-road-item { flex-wrap: wrap; }
	.aikb-road-r { flex: 1 1 100%; text-align: left; }
}