/* ============================================================================
HTIT · HSSE Field — HỆ THỐNG THIẾT KẾ v2 (Đợt 8 — UI v2 & responsive)
Một nguồn token theo VAI TRÒ (semantic). Sáng / Tối / Ngoài trời / Ca đêm CHỈ định nghĩa lại token.
Brand HTIT: navy #436AB3 (+ #2E4E88 / #1E3A6E / #152A52) · gold #E7CF7F (active) · font Barlow.
Breakpoint (mobile-first): xs <480 · sm ≥480 · md ≥768 · lg ≥1024 · xl ≥1440 · 2xl ≥1920.
KHÔNG co font-size gốc (html) theo màn hình. Chữ thân ≥14px, ô nhập ≥16px trên màn ≤900px.
Tên token cũ (--navy, --ink, --muted, --line, --card, --err…) giữ làm ALIAS để không vỡ trang cũ.
Contrast (WCAG 2.2, đã tính): chữ thường ≥4.5:1 trên --bg và --surface-1 ở mọi chế độ.
============================================================================ */
/* ---------------------------------------------------------------- 1. TOKEN */
:root {
color-scheme: light;
/* Thang thương hiệu — CỐ ĐỊNH, không lật theo chế độ */
--brand-500: #436AB3; --brand-600: #2E4E88; --brand-700: #1E3A6E; --brand-800: #152A52; --brand-900: #0B1C39;
--gold-300: #ECD391; --gold-400: #E7CF7F; --gold-600: #D8982C; --gold-ink: #9A5B00;
/* Bề mặt & chữ (Sáng) */
--bg: #F3F6FB;
--surface-1: #FFFFFF; /* thẻ */
--surface-2: #F7F9FC; /* nền phụ, header bảng */
--surface-3: #EDF2FA; /* hover, tint */
--border: #E1E7F0;
--border-soft: #EDF1F7;
--border-strong: #C9D3E2;
--field-border: #7D8CA3; /* viền ô nhập ≥3:1 (WCAG 1.4.11) */
--text-1: #0F1B2E; /* 17.3:1 */
--text-1s: #2A3A52; /* chữ thân mềm hơn — 11:1 */
--text-2: #5B6B82; /* phụ — 5.43:1 trắng / 5.0:1 bg */
--text-3: #7B8AA0; /* placeholder/disabled — chỉ chữ ≥18px hoặc không thiết yếu */
--primary: #436AB3; /* 5.3:1 với chữ trắng */
--primary-strong: #2E4E88; /* tiêu đề, link — 8.6:1 */
--on-primary: #FFFFFF;
--accent: #E7CF7F; /* active */
--on-accent: #152A52; /* 10:1 */
--danger: #C62828; --danger-bg: #FDECEC; --danger-line: #F2C1BB;
--warning: #9A5B00; --warning-bg: #FFF4E0; --warning-line: #EBCB8F;
--success: #1E7A46; --success-bg: #E8F5EE; --success-line: #B7E0C6;
--info: #3D63AA; --info-bg: #EAF0FA; --info-line: #C9D8F2;
--focus-color: #2E4E88;
--overlay: rgba(11, 28, 57, .52);
/* Vỏ ứng dụng (header Field, sidebar Admin) */
--chrome-bg: linear-gradient(180deg, #152A52 0%, #1E3A6E 100%);
--chrome-solid: #1E3A6E;
--chrome-ink: #FFFFFF;
--chrome-ink-2: rgba(255, 255, 255, .80);
--chrome-line: rgba(255, 255, 255, .14);
--chrome-hover: rgba(255, 255, 255, .10);
/* Ngữ nghĩa nghiệp vụ — THỐNG NHẤT mọi màn (HeatMap / Stats / Records / Detail / Field) */
--kind-obs: var(--primary); /* Quan sát = navy */
--kind-inc: var(--danger); /* Sự cố = đỏ */
--kind-nearmiss: var(--warning);
--lv-hi: var(--danger); /* Cao (≥4) */
--lv-mid: var(--warning); /* Trung bình (3) */
--lv-lo: var(--success); /* Thấp (1–2) */
--lv-none: var(--text-3);
--s-obs: #436AB3; --s-inc: #C62828; /* chuỗi biểu đồ */
/* Thang nhiệt tuần tự 1 hue ấm (an toàn mù màu hơn cầu vồng) — đồng bộ hsse-map.js */
--heat-0: #FFF3C4; --heat-1: #F9D57A; --heat-2: #F2B24C; --heat-3: #E3762B; --heat-4: #C62828; --heat-5: #7F1D1D;
--heat-scale: linear-gradient(90deg, #FFF3C4 0%, #F9D57A 20%, #F2B24C 40%, #E3762B 60%, #C62828 80%, #7F1D1D 100%);
/* Biểu đồ */
--chart-axis: #5B6B82; --chart-grid: #EDF1F7; --chart-grid-strong: #D5DDE9; --chart-muted: #9AA7BC;
/* Typography (Barlow self-host 400–800) */
--font-sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--text-xs: .75rem; /* 12px — nhãn phụ tối thiểu */
--text-sm: clamp(.875rem, .86rem + .08vw, .9375rem); /* 14–15px — meta, bảng */
--text-md: clamp(1rem, .97rem + .1vw, 1.0625rem); /* 16–17px — chữ thân */
--text-lg: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
--text-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--text-kpi: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
--text-display: clamp(2.25rem, 1.5rem + 3vw, 4.5rem);
--lh-tight: 1.15; --lh-body: 1.5;
/* Spacing 4pt */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
--space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
--gutter: clamp(16px, 4vw, 32px);
--stack: clamp(16px, 2.5vw, 24px);
/* Radius */
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px;
/* Elevation */
--elev-0: none;
--elev-1: 0 1px 2px rgba(15, 27, 46, .06), 0 1px 3px rgba(15, 27, 46, .04);
--elev-2: 0 4px 12px rgba(15, 27, 46, .08), 0 2px 4px rgba(15, 27, 46, .05);
--elev-3: 0 16px 40px rgba(15, 27, 46, .18);
--border-w: 1px;
/* Motion */
--dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
--ease-standard: cubic-bezier(.2, 0, 0, 1);
--ease-emphasized: cubic-bezier(.3, 0, 0, 1.15);
--ease-exit: cubic-bezier(.3, 0, 1, 1);
/* Chạm */
--tap-min: 44px;
--tap-field: 48px;
--chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
/* ---- ALIAS tên cũ (Đợt 1–7) → token v2. Không dùng cho mã mới. ---- */
--navy: var(--primary-strong); --navy-2: var(--brand-700); --navy-3: var(--brand-800); --navy-light: var(--primary);
--gold: var(--gold-300); --gold-mid: var(--gold-400); --gold-deep: var(--gold-600); --gold-deep-2: #C2851F;
--gold-text: var(--gold-ink);
--ink: var(--text-1); --ink-soft: var(--text-1s); --muted: var(--text-2);
--line: var(--border); --line-soft: var(--border-soft); --hairline: var(--border);
--card: var(--surface-1); --surface: var(--surface-2); --surface-tint: var(--surface-3);
--tint-navy: color-mix(in srgb, var(--primary) 8%, transparent);
--tint-gold: color-mix(in srgb, var(--gold-600) 10%, transparent);
--ok: var(--success); --ok-bg: var(--success-bg); --ok-line: var(--success-line);
--warn: var(--warning); --warn-bg: var(--warning-bg); --warn-line: var(--warning-line);
--err: var(--danger); --err-bg: var(--danger-bg); --err-line: var(--danger-line);
--danger-solid: var(--danger);
--tint-info: var(--info-bg); --on-info: var(--info);
--tint-warn: var(--warning-bg); --on-warn: var(--warning); --warn-border: var(--warning-line);
--r-xs: 6px; --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-pill: var(--radius-full);
--sh-xs: var(--elev-1); --sh-sm: var(--elev-1); --sh-md: var(--elev-2); --sh-lg: var(--elev-3); --sh-hover: var(--elev-2);
--focus: 0 0 0 3px color-mix(in srgb, var(--focus-color) 30%, transparent);
--focus-navy: var(--focus);
}
/* ---- Tối ---- */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0B1422; --surface-1: #121C2E; --surface-2: #172338; --surface-3: #1D2A42;
--border: #26354F; --border-soft: #1D2A42; --border-strong: #34466A; --field-border: #5E7396;
--text-1: #E6ECF5; --text-1s: #C9D3E3; --text-2: #A9B6CC; --text-3: #8B98AD;
--primary: #7FA3E6; --primary-strong: #9DBAF0; --on-primary: #0B1422;
--danger: #F08A80; --danger-bg: rgba(240, 138, 128, .14); --danger-line: rgba(240, 138, 128, .38);
--warning: #F2B24C; --warning-bg: rgba(242, 178, 76, .14); --warning-line: rgba(242, 178, 76, .38);
--success: #5FD08F; --success-bg: rgba(95, 208, 143, .14); --success-line: rgba(95, 208, 143, .38);
--info: #8DB0EE; --info-bg: rgba(127, 163, 230, .14); --info-line: rgba(127, 163, 230, .38);
--focus-color: #E7CF7F;
--overlay: rgba(0, 0, 0, .62);
--gold-ink: #E7CF7F;
--chrome-bg: linear-gradient(180deg, #0E1A30 0%, #12213D 100%);
--chrome-solid: #0E1A30;
--s-obs: #7FA3E6; --s-inc: #F08A80;
--chart-axis: #A9B6CC; --chart-grid: #1D2A42; --chart-grid-strong: #26354F; --chart-muted: #6B7A93;
--elev-1: 0 0 0 1px var(--border);
--elev-2: 0 0 0 1px var(--border-strong), 0 8px 24px rgba(0, 0, 0, .45);
--elev-3: 0 16px 48px rgba(0, 0, 0, .6);
--chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B6CC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* ---- Ngoài trời (nắng gắt) — tương phản rất cao, viền 2px, tắt bóng/gradient/glass ---- */
:root[data-mode="outdoor"] {
color-scheme: light;
--bg: #FFFFFF; --surface-1: #FFFFFF; --surface-2: #F2F4F7; --surface-3: #E6EAF0;
--border: #5B6B82; --border-soft: #8A96A8; --border-strong: #1F2A3A; --field-border: #1F2A3A;
--text-1: #000000; --text-1s: #0B0F17; --text-2: #1F2A3A; --text-3: #3B4758;
--primary: #003A8C; --primary-strong: #002A66; --on-primary: #FFFFFF; /* 10.6:1 */
--accent: #FFD84D; --on-accent: #000000; /* 15:1 */
--danger: #B00020; --danger-bg: #FFE3E6; --danger-line: #B00020; /* 7.3:1 */
--warning: #6B3D00; --warning-bg: #FFEFC7; --warning-line: #6B3D00;
--success: #0B5A2E; --success-bg: #DDF3E5; --success-line: #0B5A2E;
--info: #003A8C; --info-bg: #E1EAFA; --info-line: #003A8C;
--focus-color: #000000;
--gold-ink: #6B3D00;
--chrome-bg: #002A66; --chrome-solid: #002A66; --chrome-ink-2: #FFFFFF; --chrome-line: rgba(255, 255, 255, .5);
--s-obs: #003A8C; --s-inc: #B00020;
--chart-axis: #1F2A3A; --chart-grid: #C9D1DC; --chart-grid-strong: #5B6B82;
--elev-1: none; --elev-2: 0 0 0 2px #1F2A3A; --elev-3: 0 0 0 2px #000;
--border-w: 2px;
--text-md: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem); /* 17–18px */
--text-sm: clamp(.9375rem, .92rem + .08vw, 1rem);
--chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-mode="outdoor"] body { font-weight: 500; }
/* ---- Ca đêm — nền rất tối, tông ấm, không trắng thuần (giữ thích nghi bóng tối) ---- */
:root[data-mode="night"] {
color-scheme: dark;
--bg: #05080F; --surface-1: #0B1018; --surface-2: #0F151F; --surface-3: #151C28;
--border: #232C3A; --border-soft: #151C28; --border-strong: #2F3A4C; --field-border: #5E6878;
--text-1: #D6D0C4; --text-1s: #C4BDAF; --text-2: #A39C8E; --text-3: #877F72;
--primary: #C9A86A; --primary-strong: #D8BC85; --on-primary: #05080F;
--accent: #C9A86A; --on-accent: #05080F;
--danger: #E58A7E; --danger-bg: rgba(229, 138, 126, .13); --danger-line: rgba(229, 138, 126, .36);
--warning: #D9A55A; --warning-bg: rgba(217, 165, 90, .13); --warning-line: rgba(217, 165, 90, .36);
--success: #8FBF8A; --success-bg: rgba(143, 191, 138, .13); --success-line: rgba(143, 191, 138, .36);
--info: #9FB3C8; --info-bg: rgba(159, 179, 200, .13); --info-line: rgba(159, 179, 200, .36);
--kind-obs: #9FB3C8; /* xanh xám, tách khỏi vàng "trung bình" */
--focus-color: #C9A86A;
--gold-ink: #D8BC85;
--chrome-bg: #0A0D14; --chrome-solid: #0A0D14; --chrome-ink: #D6D0C4; --chrome-ink-2: #A39C8E;
--chrome-line: rgba(214, 208, 196, .12); --chrome-hover: rgba(214, 208, 196, .08);
--s-obs: #9FB3C8; --s-inc: #E58A7E;
--chart-axis: #A39C8E; --chart-grid: #151C28; --chart-grid-strong: #232C3A; --chart-muted: #5E6878;
--overlay: rgba(0, 0, 0, .7);
--chevron: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A39C8E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------- 2. NỀN (base) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
margin: 0; min-height: 100vh; min-height: 100dvh;
font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-body);
color: var(--text-1); background: var(--bg);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-wrap: break-word;
}
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--primary-strong); }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
h1, h2, h3 { line-height: var(--lh-tight); }
h1:focus, h1:focus-visible { outline: none; } /* FocusOnNavigate focus h1 — không tương tác */
:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
::placeholder { color: var(--text-3); opacity: 1; }
::selection { background: color-mix(in srgb, var(--primary) 28%, transparent); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
/* Ô nhập trên màn ≤900px: ≥16px để iOS Safari KHÔNG tự phóng to khi focus (UX-11) */
@media (max-width: 900px) {
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1rem) !important; }
}
/* PortIcon */
.pico { display: inline-block; vertical-align: -.14em; flex: 0 0 auto; }
.pico-color { vertical-align: -.14em; }
.pico-emoji { font-style: normal; line-height: 1; }
/* A11y */
.visually-hidden, .sr-only {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
position: fixed; left: max(8px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); z-index: 2000;
background: var(--surface-1); color: var(--text-1); padding: 10px 16px; border-radius: var(--radius-sm);
font-weight: 700; text-decoration: none; box-shadow: var(--elev-3);
/* Đẩy lên quá cả vùng tai thỏ: chỉ -160% thì trên iPhone (safe-area-top ~59px) vẫn lòi xuống dưới thanh trạng thái. */
transform: translateY(calc(-100% - max(8px, env(safe-area-inset-top)) - 8px));
}
.skip-link:focus { transform: none; }
/* ---------------------------------------------------------------- 3. THÀNH PHẦN CHUNG */
/* Nút */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .45rem; position: relative;
min-height: var(--tap-min); padding: .55rem 1rem; border: var(--border-w) solid var(--border-strong);
border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-1);
font-weight: 700; font-size: var(--text-sm); line-height: 1.2; text-decoration: none; text-align: center;
transition: background var(--dur-1) var(--ease-standard), border-color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1);
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; transform: none; }
.btn-primary, .btn[data-variant="primary"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn-primary:hover, .btn[data-variant="primary"]:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.btn-ghost, .btn[data-variant="ghost"] { background: transparent; border-color: transparent; color: var(--primary-strong); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger, .btn[data-variant="danger"] { background: var(--surface-1); border-color: var(--danger-line); color: var(--danger); }
.btn-gold, .btn[data-variant="gold"] { background: linear-gradient(135deg, var(--gold-300), var(--gold-400)); border-color: var(--gold-600); color: var(--on-accent); }
.btn-sm { min-height: 36px; padding: .35rem .7rem; font-size: var(--text-xs); }
@media (pointer: coarse) { .btn-sm { min-height: var(--tap-min); } }
.icon-btn {
position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
width: var(--tap-min); height: var(--tap-min); padding: 0; border: 0; border-radius: var(--radius-md);
background: transparent; color: inherit; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-3); }
/* Segmented control (2D|3D, 7|30|90, Bảng|Lưới) — nhãn được phép xuống dòng (EN dài hơn VI) */
.segmented {
display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px;
border: var(--border-w) solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); max-width: 100%;
}
.segmented > button, .segmented > a {
display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 38px; min-width: 0;
padding: .35rem .8rem; border: 0; border-radius: calc(var(--radius-md) - 3px); background: transparent;
color: var(--text-2); font-weight: 700; font-size: var(--text-sm); line-height: 1.15; text-align: center;
white-space: normal; text-wrap: balance; text-decoration: none;
transition: background var(--dur-1), color var(--dur-1);
}
/* Hover: tô xanh nhạt + chữ xanh đậm + viền xanh mảnh — trước đây surface-3 trên nền surface-2 gần trùng màu nên "chìm" */
.segmented > button:not(.on):not([aria-pressed="true"]):hover, .segmented > a:not(.on):not([aria-current="true"]):hover {
color: var(--primary-strong); background: color-mix(in srgb, var(--primary) 12%, var(--surface-1));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
.segmented > button:focus-visible, .segmented > a:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.segmented > .on, .segmented > [aria-pressed="true"], .segmented > [aria-current="true"] {
background: var(--primary); color: var(--on-primary); box-shadow: var(--elev-1);
}
@media (pointer: coarse) { .segmented > button, .segmented > a { min-height: var(--tap-min); } }
/* Chip (bộ lọc đang áp dụng) */
.chip {
display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; max-width: 100%;
padding: .2rem .35rem .2rem .7rem; border: var(--border-w) solid var(--border); border-radius: var(--radius-full);
background: var(--surface-2); color: var(--text-1); font-size: var(--text-xs); font-weight: 700;
}
.chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip > button {
position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
border: 0; border-radius: 50%; background: var(--surface-3); color: var(--text-2);
}
.chip > button::after { content: ""; position: absolute; inset: -10px; } /* vùng chạm ≥44px */
.chip > button:hover { color: var(--danger); }
/* Pill mức rủi ro — Cao / TB / Thấp THỐNG NHẤT */
.pill {
display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border-radius: var(--radius-full);
border: 1px solid transparent; font-size: var(--text-xs); font-weight: 800; line-height: 1.35; white-space: nowrap;
}
.pill.lv-hi { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.pill.lv-mid { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
.pill.lv-lo { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.pill.lv-none { background: var(--surface-2); color: var(--text-2); border-color: var(--border); }
.pill.lv-safe { background: var(--success-bg); color: var(--success); border-color: var(--success-line); } /* mức 0 — An toàn (phiếu Không phát hiện mối nguy) */
/* Trạng thái xử lý */
.status {
display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem; border-radius: var(--radius-sm);
font-size: var(--text-xs); font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status.t-new { background: var(--info-bg); color: var(--info); }
.status.t-work { background: var(--warning-bg); color: var(--warning); }
.status.t-done { background: var(--success-bg); color: var(--success); }
/* Loại sự vụ — quan sát navy / sự cố đỏ */
.kind-tag {
display: inline-block; padding: .05rem .4rem; border-radius: 5px; font-size: var(--text-xs); font-weight: 800;
line-height: 1.4; vertical-align: 1px; white-space: nowrap;
}
.kind-tag.obs { background: var(--info-bg); color: var(--kind-obs); }
.kind-tag.inc { background: var(--danger-bg); color: var(--kind-inc); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--lv-none); }
.dot.lv-hi { background: var(--lv-hi); } .dot.lv-mid { background: var(--lv-mid); } .dot.lv-lo { background: var(--lv-lo); }
/* Skeleton */
.skeleton { position: relative; overflow: hidden; display: block; min-height: 14px; border-radius: 6px; background: var(--surface-3); }
.skeleton-line { height: 12px; margin: 8px 0; }
.skeleton-line.w-40 { width: 40%; } .skeleton-line.w-60 { width: 60%; } .skeleton-line.w-80 { width: 80%; }
@media (prefers-reduced-motion: no-preference) {
.skeleton::after {
content: ""; position: absolute; inset: 0; transform: translateX(-100%);
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 60%, transparent), transparent);
animation: shimmer 1.3s infinite;
}
}
/* Trạng thái trang: rỗng / lỗi / không quyền — dùng chung Admin (+ Field nếu cần) */
.state {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
padding: clamp(24px, 5vw, 44px) var(--space-4); text-align: center; color: var(--text-2);
}
.state-ic {
display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .35rem; border-radius: 50%;
background: var(--surface-3); color: var(--primary);
}
.state-title { margin: 0; font-size: var(--text-lg); font-weight: 800; color: var(--text-1); text-wrap: balance; }
.state-msg { margin: 0; max-width: 46ch; font-size: var(--text-sm); line-height: 1.55; }
.state-ref { font-size: var(--text-xs); color: var(--text-2); }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .6rem; }
.state.is-error .state-ic { background: var(--danger-bg); color: var(--danger); }
.state.is-warn .state-ic { background: var(--warning-bg); color: var(--warning); }
/* Cuộn ngang có bóng mép báo còn nội dung */
.scroll-x {
overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
background:
linear-gradient(to right, var(--surface-1) 30%, transparent) left / 32px 100% no-repeat local,
linear-gradient(to left, var(--surface-1) 30%, transparent) right / 32px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(15, 27, 46, .20), transparent) left / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(15, 27, 46, .20), transparent) right / 12px 100% no-repeat scroll;
}
/* Bottom-sheet (xs–sm) / drawer phải (md+) */
.sheet-backdrop { position: fixed; inset: 0; z-index: 1200; background: var(--overlay); }
.sheet {
position: fixed; z-index: 1201; left: 0; right: 0; bottom: 0; max-height: 88dvh; display: flex; flex-direction: column;
background: var(--surface-1); color: var(--text-1); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
box-shadow: var(--elev-3); padding-bottom: env(safe-area-inset-bottom);
}
.sheet-head {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .9rem max(1rem, env(safe-area-inset-right)) .6rem max(1rem, env(safe-area-inset-left));
border-bottom: 1px solid var(--border);
}
.sheet-head::before {
content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
border-radius: 4px; background: var(--border-strong);
}
.sheet-title { margin: 0; font-size: var(--text-lg); font-weight: 800; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)); }
.sheet-foot { display: flex; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.sheet-foot > * { flex: 1 1 0; }
@media (min-width: 768px) {
.sheet { left: auto; top: 0; width: min(420px, 92vw); max-height: none; border-radius: var(--radius-xl) 0 0 var(--radius-xl); padding-bottom: 0; }
.sheet-head::before { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
.sheet { animation: sheet-up var(--dur-3) var(--ease-standard); }
.sheet-backdrop { animation: fade var(--dur-2) var(--ease-standard); }
@media (min-width: 768px) { .sheet { animation-name: sheet-left; } }
}
/* Popover menu (chế độ hiển thị, …) */
.pop { position: relative; display: inline-flex; }
.pop-backdrop { position: fixed; inset: 0; z-index: 1100; }
.pop-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 1101; min-width: 232px; max-width: calc(100vw - 24px);
padding: 6px; border: var(--border-w) solid var(--border); border-radius: var(--radius-lg);
background: var(--surface-1); color: var(--text-1); box-shadow: var(--elev-3);
}
/* Header app hiện trường: nút mở menu nằm giữa header ⇒ right:0 theo nút làm menu tràn ra mép trái.
Neo theo khung nhìn (header sticky ở top:0, không có transform) — luôn nằm trọn trong màn hình. */
.field-shell .fs-top .pop-menu {
position: fixed; top: calc(56px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); left: auto;
max-width: calc(100vw - 24px);
}
.pop-h { padding: .45rem .6rem .35rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.pop-item {
display: flex; align-items: center; gap: .6rem; width: 100%; min-height: var(--tap-min); padding: .45rem .6rem;
border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-1);
font-size: var(--text-sm); font-weight: 600; text-align: left;
}
.pop-item:hover { background: var(--surface-3); }
.pop-item[aria-checked="true"] { background: var(--info-bg); color: var(--primary-strong); font-weight: 800; }
.pop-item .pop-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-3); color: var(--primary-strong); flex: 0 0 auto; }
.pop-item[aria-checked="true"] .pop-ic { background: var(--accent); color: var(--on-accent); }
.pop-item .pop-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pop-item small { font-weight: 500; font-size: var(--text-xs); color: var(--text-2); }
.pop-item .pop-check { margin-left: auto; color: var(--primary-strong); }
@media (prefers-reduced-motion: no-preference) { .pop-menu { animation: pop-in var(--dur-2) var(--ease-standard); transform-origin: top right; } }
/* Chế độ hiển thị (DisplayMode) — nút 44px trên thanh navy hoặc thanh sáng */
.dm-btn {
position: relative; display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min);
padding: 0; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text-1s);
}
.dm-btn:hover { background: var(--surface-3); color: var(--primary-strong); }
.dm-btn[aria-expanded="true"] { border-color: var(--primary); }
.dm-btn.on-chrome { border-color: var(--chrome-line); background: rgba(255, 255, 255, .08); color: var(--chrome-ink); }
.dm-btn.on-chrome:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.dm-btn .dm-flag { position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--chrome-solid); }
/* Chọn ngôn ngữ VI | EN (LangSwitch) */
.lsw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-full); line-height: 1; }
.lsw .lsw-ic { margin: 0 3px 0 6px; flex: 0 0 auto; }
.lsw .lsw-b {
position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px;
padding: 0 10px; border-radius: var(--radius-full); font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-decoration: none;
}
.lsw .lsw-b::after { content: ""; position: absolute; inset: -4px 0; } /* vùng chạm ≥44px */
.lsw-light { background: var(--surface-1); border: 1px solid var(--border-strong); box-shadow: var(--elev-2); color: var(--primary-strong); }
.lsw-light .lsw-b { color: var(--primary-strong); }
.lsw-light .lsw-b:hover { background: var(--surface-3); }
.lsw-light .lsw-b.on { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.lsw-dark { background: rgba(255, 255, 255, .08); border: 1px solid var(--chrome-line); padding: 2px; }
.lsw-dark .lsw-b { min-width: 38px; color: var(--chrome-ink-2); }
.lsw-dark .lsw-b:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.lsw-dark .lsw-b.on { background: var(--accent); color: var(--on-accent); }
/* FileUpload — InputFile ẩn TRỰC QUAN (vẫn nhận Tab/Enter/Space), vòng focus trên nhãn (UX-07) */
.file-upload { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 100%; min-width: 0; }
.file-upload-btn { position: relative; cursor: pointer; margin: 0; }
.file-upload .fu-input {
position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; border: 0 !important; opacity: 0;
}
.file-upload-btn:has(.fu-input:focus-visible) { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.file-upload-btn:focus-within { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.file-upload-btn:has(.fu-input:focus:not(:focus-visible)) { outline: none; }
.file-upload-hint { min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--text-2); font-weight: 500; }
.file-upload-hint.has { color: var(--primary-strong); font-weight: 700; }
.file-upload-sm { gap: 7px; }
/* Banner chung (legacy) */
.banner { padding: .7rem .9rem; border-radius: var(--radius-md); margin-bottom: .9rem; font-size: var(--text-sm); line-height: 1.5; border: 1px solid transparent; }
.banner-ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.banner-warn { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
.banner-err { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
/* ---------------------------------------------------------------- 4. MẤT KẾT NỐI BLAZOR (UX-03)
#components-reconnect-modal: Blazor chỉ gắn class .components-reconnect-show | -failed | -rejected.
Thẻ nổi dưới đáy (trên tab bar), KHÔNG phủ toàn màn — người dùng vẫn đọc được dữ liệu đang nhập. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
display: flex; position: fixed; z-index: 3000; justify-content: center; pointer-events: none;
left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
bottom: calc(12px + env(safe-area-inset-bottom) + var(--rc-offset, 0px));
}
body:has(.fs-tabs) #components-reconnect-modal,
body:has(.adm-bnav) #components-reconnect-modal { --rc-offset: calc(var(--tab-clear) - env(safe-area-inset-bottom) - 2px); }
@media (min-width: 768px) { body:has(.adm-bnav) #components-reconnect-modal { --rc-offset: 0px; } }
.rc-card {
pointer-events: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .8rem; align-items: start;
width: min(560px, 100%); padding: .9rem 1rem; border-radius: var(--radius-lg);
background: var(--brand-800); color: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
border: 1px solid rgba(231, 207, 127, .45); font-family: var(--font-sans);
}
:root[data-mode="night"] .rc-card { background: #151C28; color: var(--text-1); }
.rc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(231, 207, 127, .16); color: var(--gold-400); }
.rc-txt p { margin: 0; display: none; }
.rc-txt b { display: block; font-size: 1rem; font-weight: 800; }
.rc-txt span { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.components-reconnect-show .rc-show,
.components-reconnect-failed .rc-failed,
.components-reconnect-rejected .rc-rejected { display: block; }
.rc-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.rc-act button {
min-height: var(--tap-min); padding: .5rem 1rem; border-radius: var(--radius-md); font-weight: 800; font-size: .9375rem;
border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff;
}
.rc-act .rc-reload { background: var(--gold-400); border-color: var(--gold-400); color: var(--brand-800); }
.components-reconnect-show .rc-retry { display: none; }
.rc-spin { display: none; width: 16px; height: 16px; margin-right: .35rem; vertical-align: -3px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; }
.components-reconnect-show .rc-spin { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .rc-spin { animation: spin .8s linear infinite; } }
.rc-attempt { font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------- 5. VỎ HIỆN TRƯỜNG (FieldLayout)
Tất cả bọc trong .field-shell — không rò rỉ. Giữ tương thích class các trang Field
(fld-field, fld-btn, fld-card, fld-banner, fld-thumbs, fld-quick, fld-mine, fld-kv, …). */
.field-shell {
min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
background: var(--bg); color: var(--text-1); font-size: var(--text-md);
}
.field-shell .fs-top {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
padding: calc(.45rem + env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) .45rem max(.9rem, env(safe-area-inset-left));
min-height: calc(56px + env(safe-area-inset-top));
background: var(--chrome-bg); color: var(--chrome-ink); box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.field-shell .fs-brand { display: flex; align-items: center; gap: .55rem; min-width: 0; color: inherit; text-decoration: none; }
.logo-plate { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 4px 7px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.logo-plate img { display: block; height: 22px; width: auto; }
.field-shell .fs-title { min-width: 0; font-weight: 700; font-size: clamp(1rem, .9rem + .5vw, 1.15rem); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-shell .fs-user { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.field-shell .fs-title .t-short { display: none; }
@media (max-width: 419px) { .field-shell .fs-title .t-long { display: none; } .field-shell .fs-title .t-short { display: inline; } }
.field-shell .fs-net { display: none; }
html[data-offline] .field-shell .fs-net { display: inline-flex; }
@media (max-width: 419px) { .field-shell .fs-net > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.field-shell .fs-net { align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: var(--radius-full); background: var(--danger); color: #fff; font-size: var(--text-xs); font-weight: 800; }
.field-shell .fs-logout {
display: inline-grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md);
color: var(--chrome-ink); text-decoration: none;
}
.field-shell .fs-logout.txt { width: auto; padding: 0 .8rem; font-weight: 700; }
.field-shell .fs-logout:hover { background: var(--chrome-hover); }
/* 30/09/2026: MỌI nút thanh trên là Ô VUÔNG có viền (cùng dáng nút chế độ hiển thị .dm-btn.on-chrome và thanh trên AdminLayout):
ngôi nhà (admin) · chế độ hiển thị · ngôn ngữ · chuông · đăng xuất */
.field-shell .fs-user :is(.fs-logout, .fs-bell) { border: 1px solid var(--chrome-line); background: rgba(255, 255, 255, .08); }
.field-shell .fs-user :is(.fs-logout, .fs-bell):hover { background: var(--chrome-hover); }
.field-shell .fs-lang { font-size: .8125rem; font-weight: 800; letter-spacing: .05em; }
/* Máy rất hẹp: quản trị viên có 5 ô (thêm ngôi nhà) ⇒ thu ô 44 → 38px để vẫn vừa một hàng với logo */
@media (max-width: 359px) {
.field-shell .fs-user:has(.fs-adm) :is(.fs-logout, .fs-bell, .dm-btn) { width: 38px; min-width: 38px; }
}
/* ≤430px (iPhone thường/Pro/Plus): thu khoảng cách các nút thanh trên (avatar tròn đã bỏ hẳn khỏi thanh trên) */
@media (max-width: 430px) {
.field-shell .fs-user { gap: .2rem; }
.field-shell .fs-top { gap: .4rem; }
.field-shell .fs-title { font-size: 1rem; }
}
/* ≤339px: trước ẩn logo để nhường chỗ chữ HSSE — nay thanh trên chỉ còn logo nên GIỮ logo */
.field-shell .fs-body {
flex: 1 1 auto; width: 100%; max-width: 560px; margin: 0 auto; min-width: 0;
padding: var(--space-4) max(var(--space-4), env(safe-area-inset-right)) calc(var(--tab-clear) + 16px) max(var(--space-4), env(safe-area-inset-left));
}
@media (min-width: 768px) { .field-shell .fs-body { max-width: 760px; padding-top: var(--space-6); } }
@media (min-width: 1024px) { .field-shell .fs-body { max-width: 960px; } }
/* ---- Thanh tab NỔI dùng chung (Field .fs-tabs + quản trị .adm-bnav) — kiểu iOS tab bar / M3 NavigationBar:
viên thuốc nền navy mờ cách đáy, 4 đích ngang hàng (icon trên nhãn ngắn), tab chọn tô màu nhấn (vàng),
tab khác mờ; không hiệu ứng trượt khi đổi màn; chừa env(safe-area-inset-bottom) cho thanh home iPhone. ---- */
/* ---- Ô NGÀY / NGÀY-GIỜ trên iPhone/iPad (Safari + WebView của app iOS) — 30/09/2026 ----
iOS KHÔNG vẽ icon lịch cho (Chrome/Android/desktop thì có) và tự canh GIỮA giá trị,
tự đặt bề rộng/chiều cao riêng ⇒ ô ngày trông khác và lệch so với các ô bên cạnh. Chuẩn hoá cho MỌI trình duyệt:
bỏ dáng mặc định, canh trái, không ép bề rộng tối thiểu. Riêng iOS: tự vẽ icon lịch ở mép phải (nền SVG). */
input[type="date"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; }
input[type="date"]::-webkit-date-and-time-value, input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
@supports (-webkit-touch-callout: none) {
input[type="date"], input[type="datetime-local"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important; background-position: right .7rem center !important; background-size: 18px 18px !important;
padding-right: 2.3rem !important;
}
}
/* --tab-clear = mép TRÊN của thanh tab nổi tính từ đáy màn hình = cao thanh (48 + 2×4 đệm + 2 viền = 58px) + khoảng cách đáy
(cùng công thức padding-bottom bên dưới). Nội dung trang, toast, thẻ nổi bám theo biến này ⇒ luôn cách thanh tab một khoảng
NHỎ và ĐỀU trên mọi máy. Trước 30/09/2026 dùng "84–88px + toàn bộ safe-area" ⇒ iPhone hở ~46px giữa nội dung/pop-up và thanh tab. */
:root { --tab-clear: calc(58px + max(8px, calc(env(safe-area-inset-bottom) - 20px))); }
.field-shell .fs-tabs, .adm-shell .adm-bnav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none;
/* Cách đáy: iPhone (inset ~34px) ⇒ ~14px, vẫn trên thanh Home; Android / không inset ⇒ 8px. Trước: 10px + toàn bộ inset (~44px) — trông cao */
padding: 0 max(12px, env(safe-area-inset-right)) max(8px, calc(env(safe-area-inset-bottom) - 20px)) max(12px, env(safe-area-inset-left));
}
.field-shell .fs-tabs-in, .adm-shell .adm-bnav-in {
pointer-events: auto; display: flex; width: 100%; max-width: 440px; padding: 4px; border-radius: 999px;
/* Xanh navy kính mờ. Giao diện SÁNG: gần đặc (.9) để giữ đúng sắc navy trên nền trắng (nền quá trong sẽ bị
nhạt thành xanh nhạt); giao diện TỐI: trong hơn (.62) — bên dưới */
background: rgba(30, 58, 110, .9);
-webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
border: 1px solid rgba(255, 255, 255, .12); /* không đổ bóng */
}
:root[data-mode="outdoor"] .field-shell .fs-tabs-in, :root[data-mode="outdoor"] .adm-shell .adm-bnav-in {
background: var(--chrome-solid); -webkit-backdrop-filter: none; backdrop-filter: none; border: 2px solid #000;
}
:root[data-theme="dark"]:not([data-mode="outdoor"]) .field-shell .fs-tabs-in, :root[data-theme="dark"]:not([data-mode="outdoor"]) .adm-shell .adm-bnav-in { background: rgba(30, 58, 110, .62); } /* giao diện tối: trong hơn */
.field-shell .fs-tab, .adm-shell .adm-bnav a {
position: relative; flex: 1 1 0; min-width: 0; min-height: 48px; border-radius: 999px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
padding: .3rem .2rem; text-decoration: none; color: var(--chrome-ink-2);
font-size: .6875rem; font-weight: 700; line-height: 1.15; text-align: center; -webkit-tap-highlight-color: transparent;
}
.field-shell .fs-tab > span:not(.fs-tab-ic), .adm-shell .adm-bnav a > span:not(.ic) { display: block; max-width: 100%; overflow-wrap: anywhere; }
.field-shell .fs-tab .fs-tab-ic, .adm-shell .adm-bnav .ic { position: relative; display: grid; place-items: center; width: 32px; height: 26px; }
.field-shell .fs-tab:hover, .adm-shell .adm-bnav a:hover { color: var(--chrome-ink); }
.field-shell .fs-tab.active, .adm-shell .adm-bnav a.on { color: var(--accent); }
/* Chạm chọn tab ⇒ ICON + CHỮ của tab vừa chọn nảy nhẹ một nhịp; huy hiệu số đỏ đứng yên
(chỉ áp lên