:root{
  --navy:#0B1B33; --navy-deep:#071427; --navy-soft:#16294A;
  --gold:#C79A3E; --gold-lt:#E8C87A; --gold-dk:#A97F2B;
  --ground:#F3F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE;
  --ink:#16233A; --ink-2:#41546F; --muted:#78899F; --line:#E3E9F2;
  --ok:#10A36C; --ok-bg:#E7F7F0;
  --warn:#E0A014; --warn-bg:#FDF4E2;
  --high:#EE7C3A; --high-bg:#FDEEE4;
  --bad:#DE4A4A; --bad-bg:#FCEBEB;
  --info:#2F6FED; --info-bg:#EAF1FE;
  --shadow:0 1px 2px rgba(16,35,66,.06), 0 8px 24px -12px rgba(16,35,66,.18);
  --shadow-lg:0 2px 4px rgba(16,35,66,.06), 0 18px 40px -18px rgba(16,35,66,.30);
  --r:14px; --r-sm:9px;
  --sidebar:252px;
  --gold-bg:#FFF8E6;
  /* Báo cho trình duyệt biết đang dùng nền sáng hay nền tối. Thiếu dòng này thì
   * danh sách sổ xuống của ô chọn, lịch của ô ngày và thanh cuộn vẫn vẽ theo nền
   * sáng, trong khi chữ lại lấy màu sáng của giao diện tối — thành chữ trắng trên
   * nền trắng, sổ ra không đọc được chữ nào. */
  color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ground:#0A1120; --surface:#111C30; --surface-2:#16233A;
  --ink:#E8EEF8; --ink-2:#B4C2D6; --muted:#8296B0; --line:#22334F;
  --ok-bg:#0E2A22; --warn-bg:#2C2312; --high-bg:#2E1D13; --bad-bg:#2E1618; --info-bg:#13203D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.7);
  /* N\u1ec1n \u00f4 nh\u1eadp: n\u1ec1n t\u1ed1i ph\u1ea3i d\u00f9ng v\u00e0ng s\u1eabm, kh\u00f4ng th\u00ec ch\u1eef tr\u1eafng n\u1eb1m tr\u00ean v\u00e0ng
   * nh\u1ea1t \u2014 g\u00f5 v\u00e0o kh\u00f4ng th\u1ea5y s\u1ed1 \u0111\u00e2u. */
  --gold-bg:#2A2312;
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --ground:#0A1120; --surface:#111C30; --surface-2:#16233A;
  --ink:#E8EEF8; --ink-2:#B4C2D6; --muted:#8296B0; --line:#22334F;
  --ok-bg:#0E2A22; --warn-bg:#2C2312; --high-bg:#2E1D13; --bad-bg:#2E1618; --info-bg:#13203D;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 18px 40px -18px rgba(0,0,0,.7);
  /* N\u1ec1n \u00f4 nh\u1eadp: n\u1ec1n t\u1ed1i ph\u1ea3i d\u00f9ng v\u00e0ng s\u1eabm, kh\u00f4ng th\u00ec ch\u1eef tr\u1eafng n\u1eb1m tr\u00ean v\u00e0ng
   * nh\u1ea1t \u2014 g\u00f5 v\u00e0o kh\u00f4ng th\u1ea5y s\u1ed1 \u0111\u00e2u. */
  --gold-bg:#2A2312;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.01em}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:6px}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:"Playfair Display", Georgia, serif}

/* ───────── layout ───────── */
.shell{display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh}
.side{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:#D8E0EE; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{flex:none; padding:22px 20px 16px; text-align:center; border-bottom:1px solid rgba(255,255,255,.07)}
.brand .crest{display:block; margin:0 auto 6px}
.brand .nm{font-family:"Playfair Display",serif; font-size:21px; letter-spacing:.16em; color:var(--gold-lt); font-weight:600}
.brand .tag{font-size:8.5px; letter-spacing:.22em; color:#8FA1BC; margin-top:5px; line-height:1.8}
/* Logo thật Lion Hotel: đầy đủ khi thanh bên rộng, chỉ đầu sư tử khi thu gọn */
.brand .logo-du{display:block; width:176px; max-width:100%; height:auto; margin:0 auto 10px}
.brand .logo-gon{display:none; width:40px; height:auto; margin:0 auto}
.login .logo-dn{display:none}
.nav{padding:14px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; overscroll-behavior:contain;
  flex:1 1 auto; min-height:0}
/* Thanh cuộn sáng mờ trên nền xanh đậm cho dễ thấy */
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); background-clip:content-box}
.nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38); background-clip:content-box}
.nav{scrollbar-color:rgba(255,255,255,.28) transparent}
.nav a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px;
  color:#B9C6DA; text-decoration:none; font-size:14px; font-weight:500; position:relative;
}
.nav a:hover{background:rgba(255,255,255,.055); color:#fff}
.nav a.on{background:linear-gradient(90deg,rgba(199,154,62,.22),rgba(199,154,62,.04)); color:#fff}
.nav a.on::before{content:""; position:absolute; left:0; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--gold)}
.nav .ct{margin-left:auto; background:var(--bad); color:#fff; font-size:11px; font-weight:700; min-width:20px; height:20px; border-radius:10px; display:grid; place-items:center; padding:0 6px}
/* Khối tài khoản dưới thanh bên: thu gọn lại để danh sách mục có thêm chỗ —
 * trước đây câu khẩu hiệu và bốn nút chiếm gần nửa cột, phải cuộn mới thấy hết mục. */
.side .quote{flex:none; padding:10px 20px 8px; font-family:"Playfair Display",serif; font-style:italic;
  font-size:12.5px; line-height:1.55; color:#C9B383; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.side .me{flex:none; display:flex; align-items:center; gap:9px; padding:9px 16px; border-top:1px solid rgba(255,255,255,.08)}
.side .me .av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; color:var(--navy); background:linear-gradient(140deg,var(--gold-lt),var(--gold)); font-size:12px}
.side .me b{display:block; font-size:12.5px; color:#fff; font-weight:600}
.side .me span{font-size:11px; color:#8FA1BC}
.side .out{flex:none; display:flex; align-items:center; gap:8px; padding:6px 18px; color:#8FA1BC; font-size:12px; background:none; border:0; cursor:pointer; text-align:left}
.side .out:last-of-type{padding-bottom:14px}
.side .out:hover{color:var(--gold-lt)}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px;
  padding:13px 30px; background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar h2{font-size:17px}
.topbar .sub{font-size:12.5px; color:var(--muted)}
.search{flex:1; max-width:330px; margin-left:auto; position:relative}
/* input[type=text] để thắng quy tắc chung của ô nhập bên dưới — nếu không, lề trái bị đè về 12px và kính lúp che chữ */
.search input[type=text]{
  width:100%; padding:9px 12px 9px 36px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface-2); color:var(--ink); font-size:13px;
}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.bell{position:relative; background:var(--surface-2); border:1px solid var(--line); width:38px; height:38px; border-radius:10px; display:grid; place-items:center; cursor:pointer; color:var(--ink-2)}
.bell b{position:absolute; top:-6px; right:-6px; background:var(--bad); color:#fff; font-size:10.5px; min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; border:2px solid var(--surface)}
.clock{text-align:right; font-size:12px; color:var(--muted); line-height:1.35}
.clock b{display:block; font-size:16px; color:var(--ink); font-weight:600}

.page{padding:26px 30px 48px; max-width:1560px; width:100%}
.page-head{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.page-head h1{font-size:26px; letter-spacing:-.02em}
.page-head p{margin:5px 0 0; color:var(--muted); font-size:13.5px}
.page-head .sp{margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* ───────── primitives ───────── */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px;
  font-weight:600; cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--muted)}
.btn-gold{background:linear-gradient(135deg,var(--gold) 0%, var(--gold-dk) 100%); color:#fff; border:0; box-shadow:0 6px 16px -8px rgba(169,127,43,.9)}
.btn-gold:hover{filter:brightness(1.06)}
.btn-primary{background:var(--info); color:#fff; border:0}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}
select,input[type=text],input[type=password],input[type=date],input[type=number],textarea{
  font-family:inherit; font-size:13.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:9px; padding:9px 12px;
}
/* Vài trình duyệt vẫn vẽ danh sách sổ xuống theo nền hệ điều hành — chỉ rõ luôn
 * màu nền và màu chữ cho từng dòng cho chắc. */
select option,select optgroup{background:var(--surface); color:var(--ink)}
textarea{width:100%; resize:vertical; min-height:58px; line-height:1.5}
label.fld{display:block; font-size:12px; font-weight:600; color:var(--ink-2); margin-bottom:6px}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.panel > header{display:flex; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line)}
.panel > header h3{font-size:15px}
.panel > header .sp{margin-left:auto; font-size:12.5px}
.panel .bd{padding:18px}
.grid{display:grid; gap:16px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}

.pill{display:inline-flex; align-items:center; gap:6px; padding:3.5px 11px; border-radius:99px; font-size:11.5px; font-weight:600; white-space:nowrap}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor}
.p-ok{background:var(--ok-bg); color:var(--ok)}
.p-warn{background:var(--warn-bg); color:var(--warn)}
.p-bad{background:var(--bad-bg); color:var(--bad)}
.p-high{background:var(--high-bg); color:var(--high)}
.p-info{background:var(--info-bg); color:var(--info)}
.p-mute{background:var(--surface-2); color:var(--muted); border:1px solid var(--line)}

/* stat tiles */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:12px; margin-bottom:18px}
.stat{display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.stat .ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none}
/* Con số của ô thống kê: "1,03 tỷ" thì to, "872,6 triệu" hay "725.952đ" dài hơn
 * nên tự nhỏ lại cho vừa ô — đừng để số tràn ra ngoài hay đẩy nhãn xuống. */
.stat .v{font-size:25px; font-weight:800; line-height:1.12; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat .v.dai{font-size:20px}
.stat .v.rat-dai{font-size:17px; letter-spacing:-.01em}
.stat>div:last-child{min-width:0; flex:1}
.stat .l{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.35}
.stat.acc-bad{background:linear-gradient(180deg,var(--bad-bg),var(--surface) 70%)}
.stat.acc-warn{background:linear-gradient(180deg,var(--warn-bg),var(--surface) 70%)}
.stat.acc-high{background:linear-gradient(180deg,var(--high-bg),var(--surface) 70%)}
.stat.acc-ok{background:linear-gradient(180deg,var(--ok-bg),var(--surface) 70%)}

/* branch cards */
.branches{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px}
.bcard{border-radius:var(--r); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; cursor:pointer; transition:.18s; display:flex; flex-direction:column; text-align:left; padding:0; font:inherit; color:inherit}
.bcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb,var(--gold) 45%, var(--line))}
.facade{height:112px; position:relative; overflow:hidden}
.facade .code{position:absolute; left:14px; bottom:12px; font-family:"Playfair Display",serif; color:#F3E2BB; font-size:15px; letter-spacing:.14em; text-shadow:0 2px 10px rgba(0,0,0,.6)}
.bcard .bd{padding:13px 15px 15px; display:flex; flex-direction:column; gap:11px; flex:1}
.bcard .nm{display:flex; align-items:center; gap:8px; justify-content:space-between}
.bcard .nm b{font-size:15px}
.bcard .loc{font-size:12px; color:var(--muted); margin-top:-6px; display:flex; align-items:center; gap:5px}
.kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:2px}
.kpis .k{font-size:11.5px; color:var(--muted)}
.kpis .k b{display:block; font-size:15px; color:var(--ink); font-weight:700; margin-top:1px}
.kpis.ba{grid-template-columns:1fr 1fr 1fr; gap:8px}
.kpis.ba .k{white-space:nowrap; min-width:0}
.rv-canh{display:flex; align-items:center; gap:7px; width:100%; margin-top:-3px; padding:7px 10px; border:1px solid color-mix(in srgb,var(--bad) 30%, transparent); border-radius:9px; background:var(--bad-bg); color:var(--bad); font:inherit; font-size:12.5px; font-weight:600; text-align:left; cursor:pointer}
.rv-canh svg{flex:none}
.rv-canh:hover{border-color:var(--bad)}
.rv-canh:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px}
.bcard:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px}
.k-nen{display:block; text-decoration:none; color:var(--muted); border-radius:8px; margin:-4px -6px; padding:4px 6px; min-width:0}
.k-nen b small{font-size:11px; font-weight:600; color:var(--muted)}
.k-nen > small{display:block; font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.k-nen.google b{color:#1A73E8}
.k-nen.booking b{color:#003580}
.k-nen:hover{background:var(--surface-2); color:var(--ink-2)}
.k-nen:hover b{text-decoration:underline}
.k-nen:focus-visible{outline:2px solid var(--gold-dk); outline-offset:0}
:root[data-theme="dark"] .k-nen.booking b{color:#6FA8FF}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .k-nen.booking b{color:#6FA8FF} }
.bcard .ft{display:flex; align-items:center; gap:9px; padding-top:11px; border-top:1px solid var(--line); font-size:13px; font-weight:600}
.cnt{width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; flex:none}

/* table */
.tbl-wrap{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-gutter:stable}
table.tbl{width:100%; border-collapse:collapse; font-size:13px; min-width:880px}
table.tbl th{
  text-align:left; padding:12px 14px; font-size:11.5px; font-weight:700; color:var(--ink-2);
  background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; letter-spacing:.02em;
}
table.tbl td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:0}
.b-ref b{display:block; font-weight:700; font-size:13px}
.b-ref span{font-size:11.5px; color:var(--muted)}
.lt{display:flex; align-items:center; gap:9px}
.ic{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex:none; font-size:14px}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:center}
.pager{display:flex; align-items:center; gap:8px; padding:13px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.pager .pg{margin-left:auto; display:flex; gap:5px}
.pg button{min-width:31px; height:31px; border-radius:8px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font-size:12.5px; color:var(--ink)}
.pg button.on{background:var(--navy); color:#fff; border-color:var(--navy)}

.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; margin-bottom:20px}
.tabs button{background:none; border:0; padding:11px 15px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent; white-space:nowrap}
.tabs button.on{color:var(--gold-dk); border-bottom-color:var(--gold)}

.tl{display:flex; flex-direction:column; gap:0}
.tl .it{display:grid; grid-template-columns:64px 18px 1fr; gap:10px; align-items:start; padding-bottom:15px; position:relative}
.tl .it:not(:last-child)::before{content:""; position:absolute; left:71px; top:14px; bottom:0; width:1.5px; background:var(--line)}
.tl .tm{font-size:11.5px; color:var(--muted); padding-top:1px; text-align:right}
.tl .pt{width:9px; height:9px; border-radius:50%; background:var(--info); margin:5px 0 0 4px; z-index:1; box-shadow:0 0 0 3px var(--surface)}
.tl .txt{font-size:13px}
.tl .txt small{display:block; color:var(--muted); font-size:11.5px; margin-top:2px}

.steps{display:flex; align-items:flex-start; gap:6px}
.steps .s{flex:1; text-align:center; position:relative}
.steps .s .b{width:30px; height:30px; border-radius:50%; margin:0 auto 7px; display:grid; place-items:center; background:var(--surface-2); border:1.5px solid var(--line); color:var(--muted); font-size:13px; font-weight:700}
.steps .s.done .b{background:var(--ok); border-color:var(--ok); color:#fff}
.steps .s.cur .b{background:var(--warn); border-color:var(--warn); color:#fff}
.steps .s span{font-size:11.5px; color:var(--ink-2); font-weight:600; display:block}
.steps .s small{font-size:11px; color:var(--muted)}
.steps .s:not(:last-child)::after{content:""; position:absolute; top:15px; left:calc(50% + 22px); right:calc(-50% + 22px); height:1.5px; background:var(--line)}
.steps .s.done:not(:last-child)::after{background:var(--ok)}

.kv{display:grid; grid-template-columns:104px 1fr; gap:11px 14px; align-items:center; font-size:13px}
.kv .k{color:var(--muted); font-size:12.5px}

.bar{height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line)}
.bar i{display:block; height:100%; border-radius:99px}
.empty{padding:40px 20px; text-align:center; color:var(--muted); font-size:13.5px}
.notice{display:flex; gap:11px; padding:13px 15px; border-radius:11px; background:var(--info-bg); color:var(--ink); font-size:13px; border:1px solid color-mix(in srgb,var(--info) 22%, transparent)}
.notice.w{background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 30%, transparent)}
.notice.d{background:var(--bad-bg); border-color:color-mix(in srgb,var(--bad) 28%, transparent)}

/* modal */
.scrim{position:fixed; inset:0; background:rgba(7,20,39,.55); backdrop-filter:blur(3px); z-index:60; display:grid; place-items:center; padding:20px}
.modal{background:var(--surface); border-radius:16px; box-shadow:var(--shadow-lg); width:min(560px,100%); max-height:88vh; border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden}
/* Tiêu đề và hàng nút luôn thấy — hộp thoại dài thì chỉ ruột cuộn, không đẩy nút Lưu ra khỏi tầm nhìn */
.modal > header,.modal > footer{flex:none}
.modal header{display:flex; align-items:center; padding:17px 20px; border-bottom:1px solid var(--line)}
.modal header h3{font-size:16px}
.modal .bd{padding:20px; display:flex; flex-direction:column; gap:15px; overflow:auto; min-height:0; flex:1 1 auto}
.modal footer{display:flex; gap:10px; justify-content:flex-end; padding:15px 20px; border-top:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap}
.x{margin-left:auto; background:none; border:0; font-size:20px; color:var(--muted); cursor:pointer; line-height:1}

.toast{position:fixed; right:22px; bottom:22px; z-index:90; display:flex; flex-direction:column; gap:9px}
.toast div{background:var(--navy); color:#fff; padding:12px 17px; border-radius:11px; font-size:13px; box-shadow:var(--shadow-lg); animation:pop .25s ease}
@keyframes pop{from{transform:translateY(8px); opacity:0}}

/* login */
.login{min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr}
.login .left{background:linear-gradient(160deg,#0B1B33 0%,#071427 60%,#0E2444 100%); color:#DCE4F0; padding:52px 48px; display:flex; flex-direction:column; position:relative; overflow:hidden}
.login .left .sky{position:absolute; inset:auto 0 0 0; opacity:.35}
.login .feat{display:flex; gap:13px; margin-top:16px; align-items:flex-start}
.login .feat b{display:block; color:#fff; font-size:13.5px; font-weight:600}
.login .feat span{font-size:12.5px; color:#97A8C2}
.login .facts{display:flex; gap:26px; margin-top:auto; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); position:relative}
.login .facts b{display:block; font-size:20px; color:var(--gold-lt); font-weight:700}
.login .facts span{font-size:11.5px; color:#8FA1BC}
.login .right{display:grid; place-items:center; padding:40px 34px; background:var(--surface)}
.login .box{width:min(420px,100%)}
.acct{display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:.15s; color:inherit; font:inherit}
.acct:hover{border-color:var(--gold); background:var(--surface-2)}
.acct .av{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; flex:none}
.acct b{display:block; font-size:14px}
.acct span{font-size:12px; color:var(--muted)}

@media (max-width:1080px){
  :root{--sidebar:72px}
  .side .nm,.side .tag,.side .quote,.nav a span,.side .me div,.side .out span{display:none}
  .nav a{justify-content:center; padding:12px 0}
  .brand{padding:16px 6px}
  .brand .logo-du{display:none}
  .brand .logo-gon{display:block}
  .login .logo-dn{display:block; width:220px; max-width:72%; height:auto; margin:0 0 26px}
  .side .me{justify-content:center; padding:14px 0}
  .page,.topbar{padding-left:18px; padding-right:18px}
  .login{grid-template-columns:1fr}
  .login .left{display:none}
}
@media (max-width:640px){
  .topbar .sub,.clock span{display:none}
  .search{max-width:none}
  .page-head h1{font-size:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* lựa chọn kết quả báo cáo */
.opt{display:flex; align-items:center; gap:9px; padding:11px 16px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; font-size:13.5px; font-weight:600; flex:1; background:var(--surface)}
.opt input{accent-color:var(--ok); width:17px; height:17px; margin:0}
.opt:has(input:checked){border-color:var(--ok); background:var(--ok-bg); color:var(--ok)}
.opt.bad input{accent-color:var(--bad)}
.opt.bad:has(input:checked){border-color:var(--bad); background:var(--bad-bg); color:var(--bad)}
.panel > header > .ic{flex:none}

/* danh sách tài khoản đăng nhập */
.dsacct{display:flex; flex-direction:column; gap:16px; max-height:min(52vh,440px); overflow-y:auto; padding-right:4px}
.nhomacct{display:flex; flex-direction:column; gap:7px}
.nhomacct .nhan{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding-left:2px}
.nhomacct .nhan b{color:var(--gold-dk)}
.acct span span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* thẻ điểm nền tảng đánh giá */
.nen{display:flex; flex-direction:column; gap:2px; padding:14px 18px; border-radius:12px; border:1px solid var(--line);
  border-left:4px solid var(--nen); background:var(--surface-2); text-decoration:none; color:inherit; min-width:168px; transition:.15s}
.nen:hover{box-shadow:var(--shadow); transform:translateY(-1px)}
.nen .ten{font-size:12px; font-weight:600; color:var(--nen)}
.nen .diem{font-size:26px; font-weight:800; line-height:1.1; letter-spacing:-.02em}
.nen .diem small{font-size:13px; font-weight:600; color:var(--muted)}
.nen .so{font-size:12px; color:var(--muted)}

/* ảnh thật của chi nhánh */
.anh-cn{width:100%; object-fit:cover; display:block; background:linear-gradient(160deg,#15325C,#23456F)}
.facade{background:linear-gradient(160deg,#15325C,#23456F)}
.facade::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,16,32,0) 45%, rgba(6,16,32,.78) 100%)}
.facade .code{z-index:1}

/* bảng theo dõi nhập liệu doanh thu */
table.tbl.lich{min-width:1040px; font-size:12.5px}
table.tbl.lich th{text-align:center}
table.tbl.lich th:first-child, table.tbl.lich td:first-child{text-align:left; position:sticky; left:0; background:var(--surface); z-index:1}
table.tbl.lich tbody tr:hover td:first-child{background:var(--surface-2)}
td.o{text-align:center; font-variant-numeric:tabular-nums; font-weight:600; padding:9px 6px}
td.o-tot{background:color-mix(in srgb,var(--ok) 16%, transparent); color:var(--ok)}
td.o-tb{background:color-mix(in srgb,var(--warn) 16%, transparent); color:var(--warn)}
td.o-kem{background:color-mix(in srgb,var(--high) 16%, transparent); color:var(--high)}
td.o-thieu{background:color-mix(in srgb,var(--bad) 15%, transparent); color:var(--bad)}
td.o-cho{color:var(--muted)}

/* thẻ sự cố tồn đọng */
.suco{border:1px solid var(--line); border-left:4px solid var(--sc,var(--warn)); border-radius:12px; padding:13px 15px; background:var(--surface-2)}
.suco.tre{background:color-mix(in srgb,var(--bad) 5%, var(--surface-2)); border-color:color-mix(in srgb,var(--bad) 28%, var(--line))}
.suco .lydo{margin-top:8px; padding:9px 12px; background:var(--surface); border:1px dashed var(--line); border-radius:9px; font-size:12.5px; color:var(--ink-2)}

/* tệp & ảnh minh chứng */
.tep-o{border:1.5px dashed var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px}
.tep-ds{display:flex; flex-wrap:wrap; gap:8px}
.tep-muc{display:flex; align-items:center; gap:9px; padding:6px 6px 6px 6px; border:1px solid var(--line); border-radius:10px; background:var(--surface); max-width:100%; min-width:0}
.tep-muc img{width:42px; height:42px; object-fit:cover; border-radius:7px; flex:none}
.tep-bieu{width:42px; height:42px; display:grid; place-items:center; border-radius:7px; background:rgba(120,137,159,.12); color:var(--muted); flex:none}
.tep-ten{display:flex; flex-direction:column; min-width:0}
.tep-ten b{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:180px}
.tep-ten small{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.tep-x{border:0; background:none; font-size:19px; line-height:1; color:var(--muted); cursor:pointer; padding:3px 7px; border-radius:6px; flex:none}
.tep-x:hover{color:var(--bad); background:rgba(220,38,38,.08)}
.tep-nuts{display:flex; flex-wrap:wrap; gap:8px}
.tep-nuts .btn{gap:7px}
.tep-goi{font-size:11.5px; color:var(--muted)}
.tep-dang{font-size:12.5px; color:var(--warn); display:flex; align-items:center; gap:6px}
.tep-ds.nho{display:inline-flex; gap:6px; flex-wrap:wrap; vertical-align:middle}
.tep-xem{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:0; cursor:pointer; color:var(--ink-2); font-size:11.5px; overflow:hidden; min-height:34px}
.tep-xem img{width:34px; height:34px; object-fit:cover; display:block}
.tep-xem svg{margin-left:7px; flex:none}
.tep-xem span{padding-right:8px; white-space:nowrap}
.tep-xem:hover{border-color:var(--gold-dk)}
.tep-xem:focus-visible,.tep-x:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px}

/* lịch họp */
.lh-bo{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; align-items:start}
.lh-thang{display:flex; align-items:center; gap:8px}
.lh-thang b{min-width:112px; text-align:center; font-size:15px}
.lh-lich > header{gap:10px; color:var(--gold-dk)}
.lh-lich > header h3{color:var(--ink)}
.lh-luoi{display:grid; grid-template-columns:repeat(7,minmax(0,1fr))}
.lh-thu{padding:9px 10px; font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--line); border-right:1px solid var(--line); background:var(--surface-2)}
.lh-o{min-height:108px; padding:6px 6px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:4px; min-width:0}
.lh-thu:nth-child(7n),.lh-o:nth-child(7n){border-right:0}
.lh-o.trong{background:var(--surface-2)}
.lh-so{display:flex; align-items:center; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.lh-so span{display:inline-grid; place-items:center; min-width:25px; height:25px; padding:0 4px; border-radius:99px}
.lh-o.qua .lh-so span{color:var(--muted); font-weight:500}
.lh-o.nay{background:var(--warn-bg)}
.lh-o.nay .lh-so span{background:var(--gold); color:#fff}
.lh-them{border:0; background:none; color:var(--muted); font-size:17px; line-height:1; width:25px; height:25px; border-radius:6px; cursor:pointer; opacity:0; transition:opacity .15s}
.lh-o:hover .lh-them,.lh-them:focus-visible{opacity:1}
.lh-them:hover{background:var(--info-bg); color:var(--info)}
@media (hover:none){.lh-them{opacity:1}}
.lh-chip{display:block; width:100%; text-align:left; border:0; border-left:3px solid var(--gold); background:var(--surface-2); color:var(--ink); border-radius:6px; padding:4px 6px; font-size:11.5px; line-height:1.35; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lh-chip b{font-weight:700; color:var(--gold-dk)}
.lh-chip:hover{background:var(--info-bg)}
.lh-chip.huy{border-left-color:var(--line); color:var(--muted); text-decoration:line-through}
.lh-chip.huy b{color:var(--muted)}
.lh-ds-thang{display:none}
.lh-sap-bd{display:flex; flex-direction:column; gap:8px; padding:12px}
.lh-dong{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:9px 11px; cursor:pointer; color:var(--ink); font:inherit}
.lh-dong:hover{border-color:var(--gold)}
.lh-dong.huy{opacity:.6}
.lh-ngay{display:flex; flex-direction:column; align-items:center; min-width:44px; padding:4px 2px; border-radius:8px; background:var(--surface-2); flex:none}
.lh-ngay b{font-size:18px; line-height:1.1; color:var(--gold-dk)}
.lh-ngay small{font-size:10.5px; color:var(--muted); font-weight:600; white-space:nowrap}
.lh-noi{display:flex; flex-direction:column; min-width:0; flex:1}
.lh-noi b{font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lh-noi small{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lh-ct{display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; font-size:13.5px}
.lh-ct > span{color:var(--muted)}
.lh-ct a{color:var(--info); word-break:break-all}
@media (max-width:1180px){ .lh-bo{grid-template-columns:1fr} }
@media (max-width:760px){
  .lh-luoi{display:none}
  .lh-ds-thang{display:flex; flex-direction:column; gap:8px; padding:12px}
  .lh-thang b{min-width:0}
  .lh-ct{grid-template-columns:1fr; gap:2px}
}

/* lưu trữ báo cáo */
.lt-muc{padding:12px 0; border-bottom:1px solid var(--line)}
.lt-muc:first-child{padding-top:0}
.lt-muc:last-child{border-bottom:0; padding-bottom:0}
.lt-muc b{font-weight:600}

/* chấm công */
.cc-the{display:flex; gap:18px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow)}
.cc-the h3{font-size:17px; margin-bottom:6px}
.cc-the p{margin:0 0 12px; color:var(--ink-2); font-size:13.5px; line-height:1.6; max-width:62ch}
.cc-bieu{width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--warn-bg); color:var(--gold-dk); flex:none}
.cc-bieu.ok{background:var(--ok-bg); color:var(--ok)}
.cc-gio{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.cc-gio > div{background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; align-items:flex-start}
.cc-gio span{font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.cc-gio b{font-size:26px; line-height:1.1}
.cc-gio small{font-size:12px; color:var(--ink-2)}
.cc-nut{padding:12px 22px; font-size:15px}
.cc-anh{width:36px; height:36px; border-radius:8px; object-fit:cover; border:1px solid var(--line); flex:none}
.cc-lop{position:fixed; inset:0; z-index:1000; background:rgba(6,14,28,.72); display:grid; place-items:center; padding:16px}
.cc-hop{background:var(--surface); color:var(--ink); border-radius:18px; width:min(440px,100%); max-height:94vh; overflow:auto; box-shadow:var(--shadow-lg); display:flex; flex-direction:column}
.cc-hop header{display:flex; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line)}
.cc-hop header h3{font-size:16px}
.cc-hop header .x{margin-left:auto; border:0; background:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:2px 8px; border-radius:8px}
.cc-khung{position:relative; background:#000; aspect-ratio:3/4; max-height:54vh; overflow:hidden}
.cc-khung[hidden]{display:none}
.cc-khung video{width:100%; height:100%; object-fit:cover; transform:scaleX(-1); display:block}
.cc-vien{position:absolute; inset:12% 18%; border:3px solid rgba(232,200,122,.92); border-radius:50% / 42%; pointer-events:none; box-shadow:0 0 0 999px rgba(0,0,0,.28)}
.cc-trang{padding:14px 18px; font-size:14px; line-height:1.55; display:flex; flex-direction:column; gap:8px}
.cc-trang p{margin:0}
.cc-trang.loi{color:var(--bad)}
.cc-trang.ok{color:var(--ok)}
.cc-trang select,.cc-trang textarea{font:inherit; color:var(--ink)}
.cc-trang textarea{width:100%; min-height:66px}
.cc-lydo[hidden]{display:none}
.cc-vt{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted)}
.cc-dongy{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; color:var(--ink)}
.cc-dongy input{margin-top:2px; width:18px; height:18px; flex:none}
.cc-nhac{color:var(--bad); font-size:13px}
.cc-xong{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 0}
.cc-xong b{font-size:17px; color:var(--ink)}
.cc-xong span{color:var(--muted); font-size:13px}
.cc-hop footer{display:flex; gap:10px; justify-content:flex-end; padding:12px 18px 16px; border-top:1px solid var(--line); background:var(--surface-2); flex-wrap:wrap}
.cc-hop footer:empty{display:none}
@media (max-width:640px){
  .cc-the{flex-direction:column}
  .cc-gio b{font-size:22px}
  .cc-lop{padding:0; place-items:end stretch}
  .cc-hop{width:100%; border-radius:18px 18px 0 0; max-height:100vh}
}

/* cẩm nang */
.cn-tim{position:relative; display:flex; align-items:center; margin-bottom:14px}
.cn-kinh{position:absolute; left:16px; color:var(--muted); display:grid; pointer-events:none}
.cn-tim input{width:100%; font:inherit; font-size:16px; padding:14px 46px 14px 48px; border:1.5px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); -webkit-appearance:none; appearance:none}
.cn-tim input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(199,154,62,.2)}
.cn-tim input::-webkit-search-cancel-button{display:none}
.cn-xoa{position:absolute; right:8px; border:0; background:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; width:36px; height:36px; border-radius:10px}
.cn-xoa:hover{background:var(--surface-2); color:var(--ink)}
.cn-nhom{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.cn-chip{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:99px; padding:6px 12px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap}
.cn-chip .num{font-size:11px; font-weight:700; color:var(--gold-dk); letter-spacing:.04em}
.cn-chip b{font-weight:600; color:var(--muted); margin-left:2px}
.cn-chip:hover{border-color:var(--gold)}
.cn-chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.cn-chip.on .num,.cn-chip.on b{color:var(--gold-lt)}
.cn-trangthai{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-bottom:14px; min-height:32px}
.cn-trangthai .btn{margin-left:auto}
.cn-loi{color:var(--warn)}
.cn-dem{font-size:13px; color:var(--muted); margin-bottom:8px}
.cn-ds{display:flex; flex-direction:column; gap:10px}
.cn-the{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.cn-the.mo{box-shadow:var(--shadow); border-color:rgba(199,154,62,.5)}
.cn-dau{display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border:0; background:none; text-align:left; font:inherit; color:var(--ink); cursor:pointer}
.cn-dau:hover{background:var(--surface-2)}
.cn-ma{flex:none; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--gold-dk); background:var(--warn-bg); border-radius:8px; padding:5px 8px; min-width:60px; text-align:center}
.cn-ten{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.cn-ten b{font-size:15px; font-weight:600}
.cn-ten small{font-size:13px; color:var(--ink-2); line-height:1.45}
.cn-nhomtag{flex:none; font-size:11.5px; color:var(--muted); max-width:170px; text-align:right}
.cn-than{padding:2px 16px 16px; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line)}
.cn-vui{font-size:13px; color:var(--gold-dk); padding-top:10px}
.cn-hang{display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; font-size:14px; line-height:1.6}
.cn-hang > span{color:var(--muted); font-size:12.5px; font-weight:600; padding-top:2px}
.cn-hang.chinh > div{background:var(--ok-bg); border-radius:10px; padding:8px 12px; color:var(--ink)}
.cn-muc{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:4px}
.cn-m{border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.55; border:1px solid var(--line); background:var(--surface-2)}
.cn-m > span{display:block; font-size:12px; font-weight:700; margin-bottom:4px; color:var(--ink)}
.cn-m1{border-top:3px solid var(--ok)}
.cn-m2{border-top:3px solid var(--warn)}
.cn-m3{border-top:3px solid var(--high)}
.cn-m4{border-top:3px solid var(--bad)}
.cn-the mark{background:rgba(232,200,122,.6); color:inherit; border-radius:3px; padding:0 1px}
@media (max-width:980px){ .cn-muc{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .cn-hang{grid-template-columns:1fr; gap:2px}
  .cn-muc{grid-template-columns:1fr}
  .cn-nhomtag{display:none}
  .cn-nhom{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
}

/* quản trị → dữ liệu mẫu */
.kv-bang{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.kv-dong{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:11px 14px; border-bottom:1px solid var(--line); align-items:center}
.kv-dong:last-child{border-bottom:0}
.kv-dong span{font-size:14px; color:var(--ink)}
.kv-dong b{font-size:15px; text-align:right}
.kv-dong small{grid-column:1 / -1; font-size:12px; color:var(--muted)}

/* ───────── Phòng trống (IBS) ───────── */
.pt-bo{display:grid; gap:16px}
.pt-tom{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.panel header .sp{margin-left:auto; display:flex; gap:8px; align-items:center}
.pt-nguon{margin:0; padding:12px 18px 4px; font-size:12.5px; color:var(--muted)}
table.tbl.pt{min-width:0; font-size:12.5px}
table.tbl.pt th, table.tbl.pt td{padding:8px 7px; text-align:center; white-space:nowrap}
table.tbl.pt th:first-child, table.tbl.pt td:first-child{text-align:left; padding-left:16px; position:sticky; left:0; background:var(--surface); z-index:1; min-width:150px}
table.tbl.pt th .thu{display:block; font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.04em}
table.tbl.pt .cuoi{background:color-mix(in srgb,var(--gold) 10%, transparent)}
table.tbl.pt td.o{font-variant-numeric:tabular-nums; font-weight:600}
table.tbl.pt td.trong{color:var(--muted); font-weight:400}
table.tbl.pt td.sap{background:var(--warn-bg); color:var(--warn)}
table.tbl.pt td.full{background:var(--bad-bg); color:var(--bad)}
table.tbl.pt tr.pt-tong td{border-top:2px solid var(--line); font-weight:700}
.pt-cn{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--ink); cursor:pointer}
.pt-cn:hover, .pt-cn.on{color:var(--gold-dk)}
.pt-sub{display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:2px}
.pt-sub.tre{color:var(--warn)}
.pt-hd{margin:0; padding-left:20px; font-size:13px; color:var(--ink-2); display:grid; gap:4px}
textarea.pt-dan{width:100%; min-height:130px; font-family:ui-monospace,Menlo,monospace; font-size:12px}

/* ───────── Báo cáo ngày / tháng — đợt 1 ───────── */
.bc-dk{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px}
.bc-dk-o{display:flex; align-items:flex-start; gap:9px; padding:9px 12px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-size:13px; line-height:1.4; background:var(--surface)}
.bc-dk-o input{accent-color:var(--ok); width:17px; height:17px; margin:1px 0 0; flex:none}
.bc-dk-o:has(input:checked){border-color:color-mix(in srgb,var(--ok) 55%, var(--line)); background:var(--ok-bg)}
.bc-diem{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); margin-top:6px; white-space:nowrap; font-variant-numeric:tabular-nums}
.bc-diem .bar{width:64px}
.bc-phu{font-size:11.5px; color:var(--muted); margin-top:4px; max-width:260px; line-height:1.45}
.bc-loi-ds{display:flex; flex-direction:column}
.bc-loi-dong{display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--line); flex-wrap:wrap}
.bc-loi-phu{font-size:12px; color:var(--muted); margin-top:3px}
.vc-ds{display:flex; flex-direction:column}
.vc-dong{display:flex; align-items:center; gap:12px; padding:11px 18px; border:0; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer; width:100%}
.vc-dong:hover{background:var(--surface-2)}
.vc-dong .pill{flex:none; min-width:104px; justify-content:center}
.vc-nd{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.vc-nd b{font-size:13.5px; font-weight:600}
.vc-nd small{font-size:12px; color:var(--muted)}
.vc-them{padding:10px 18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}

/* ───────── Kiểm phòng ───────── */
.kp-tom{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; margin-bottom:16px}
.kp-so{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 18px; display:flex; flex-direction:column; min-width:150px}
.kp-so b{font-size:24px; line-height:1.1; font-variant-numeric:tabular-nums}
.kp-so span{font-size:12px; color:var(--muted); margin-top:3px}
.kp-so.xau b{color:var(--bad)}
.kp-chu{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12px; color:var(--muted); margin-left:auto; align-self:center}
.kp-chu span{display:inline-flex; align-items:center; gap:6px}
.kp-chu-thu{margin:0; padding:0 18px 14px}
.kp-dot{width:13px; height:13px; border-radius:4px; border:1.5px solid var(--line); background:var(--surface); display:inline-block}
.kp-dot.dat{background:var(--ok-bg); border-color:var(--ok)}
.kp-dot.loi{background:var(--bad-bg); border-color:var(--bad)}
.kp-dot.cu{background:var(--surface-2); border-style:dashed; border-color:color-mix(in srgb,var(--ink-2) 40%, var(--line))}
.kp-sodo{display:flex; flex-direction:column; gap:12px; padding:16px 18px}
.kp-tang{display:grid; grid-template-columns:78px 1fr; gap:12px; align-items:start}
.kp-tang-ten{font-weight:700; font-size:13px; padding-top:10px}
.kp-tang-ten small{display:block; font-weight:400; font-size:11px; color:var(--muted)}
.kp-o-ds{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:7px}
.kp-o{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:52px; padding:7px 4px; border:1.5px solid var(--line); border-radius:9px; background:var(--surface); font:inherit; color:var(--ink); font-variant-numeric:tabular-nums}
button.kp-o{cursor:pointer}
button.kp-o:hover{border-color:var(--gold)}
.kp-o b{font-size:14px}
.kp-o small{font-size:10.5px; color:var(--muted); white-space:nowrap}
.kp-o.dat{background:var(--ok-bg); border-color:var(--ok)}
.kp-o.dat small{color:var(--ok); font-weight:600}
.kp-o.loi{background:var(--bad-bg); border-color:var(--bad)}
.kp-o.loi small{color:var(--bad); font-weight:600}
.kp-o.cu{background:var(--surface-2); border-style:dashed}
.kp-o.to{background:color-mix(in srgb,var(--mau) 18%, var(--surface)); border-color:color-mix(in srgb,var(--mau) 55%, var(--line))}
.kp-o.to small{color:color-mix(in srgb,var(--mau) 75%, var(--ink)); font-weight:600}
.kp-o.co-loi{box-shadow:inset 0 -3px 0 var(--bad)}
.kp-vb{margin:0; padding:14px 18px; white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:1.65; color:var(--ink)}
.kp-tuan{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px}
table.tbl.kp-bang{min-width:560px}
table.tbl.kp-bang tr.co td{background:color-mix(in srgb,var(--mau) 11%, transparent)}
table.tbl.kp-bang tr.kp-tong td{font-weight:700; border-top:2px solid var(--line)}
.kp-luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:16px; align-items:start}
.kp-tt{margin:0 0 12px; font-size:12.5px; color:var(--muted)}
.kp-chip-ds{display:flex; flex-wrap:wrap; gap:6px; padding:14px 18px}
.kp-lap{display:flex; gap:12px; padding:11px 18px; border-top:1px solid var(--line); align-items:flex-start; font-size:13px}
.kp-lap b.num{font-size:15px; min-width:48px}
.kp-xem{display:grid; gap:6px; font-size:12.5px; padding:12px 14px; background:var(--surface-2); border-radius:10px}
.kp-xem-tong{font-weight:700}
.bc-dk-o.loi input{accent-color:var(--bad)}
.bc-dk-o.loi:has(input:checked){border-color:color-mix(in srgb,var(--bad) 55%, var(--line)); background:var(--bad-bg)}
@media (max-width:640px){ .kp-tang{grid-template-columns:1fr; gap:6px} .kp-tang-ten{padding-top:0} .kp-chu{margin-left:0} }

/* ───────── Tin nhắn ───────── */
.tn-trang{padding-bottom:0}
.tn-khung{display:grid; grid-template-columns:330px minmax(0,1fr); height:calc(100vh - 150px); min-height:480px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.tn-ds{display:flex; flex-direction:column; border-right:1px solid var(--line); min-height:0}
.tn-ds-dau{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px 14px 8px}
.tn-ds-dau h2{font-size:17px; margin:0}
.tn-tim{display:flex; align-items:center; gap:8px; margin:0 14px 8px; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface-2)}
.tn-tim input{border:0; background:transparent; flex:1; padding:8px 0; font:inherit; color:var(--ink); outline:none; min-width:0}
.tn-loc{display:flex; gap:6px; padding:0 14px 10px; flex-wrap:wrap}
.tn-loc button{border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:inherit; font-size:12px; padding:4px 10px; border-radius:99px; cursor:pointer}
.tn-loc button.on{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.tn-ds-cuon{flex:1; overflow-y:auto; min-height:0}
.tn-muc{display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:0; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.tn-muc:hover{background:var(--surface-2)}
.tn-muc.on{background:color-mix(in srgb,var(--gold) 12%, var(--surface))}
.tn-muc-nd{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tn-muc-dong{display:flex; gap:8px; align-items:baseline}
.tn-muc-dong b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600}
.tn-muc-dong small{font-size:11px; color:var(--muted); white-space:nowrap}
.tn-muc-phu{font-size:12.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tn-muc.chua .tn-muc-dong b{font-weight:800}
.tn-muc.chua .tn-muc-phu{color:var(--ink); font-weight:600}
.tn-cham{width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none}
.tn-at{min-width:20px; height:20px; border-radius:99px; background:var(--bad); color:#fff; font-style:normal; font-size:11.5px; font-weight:700; display:grid; place-items:center; flex:none}
.tn-khan-nho{font-style:normal; font-size:10.5px; font-weight:700; color:var(--bad); background:var(--bad-bg); border-radius:4px; padding:0 5px; margin-right:5px}
.tn-av{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:12px; font-weight:700; flex:none}
.tn-av.p-mute{font-size:16px}
.tn-av.trong{visibility:hidden}
.tn-loi{padding:8px 14px; font-size:12px; color:var(--bad); border-top:1px solid var(--line)}
.tn-cuoc{display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--surface-2)}
.tn-trong{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px; text-align:center; color:var(--muted); font-size:13px}
.tn-trong b{color:var(--ink); font-size:15px}
.tn-dau{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface)}
.tn-dau-ten{flex:1; min-width:0; display:flex; flex-direction:column}
.tn-dau-ten b{font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tn-dau-ten small{font-size:12px; color:var(--muted)}
.tn-dau-nut{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.tn-lui{display:none}
.tn-ghim{display:flex; gap:8px; align-items:center; padding:7px 14px; font-size:12.5px; background:color-mix(in srgb,var(--gold) 10%, var(--surface)); border-bottom:1px solid var(--line); color:var(--ink-2)}
.tn-ghim span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tn-than{flex:1; overflow-y:auto; min-height:0; padding:12px 16px; display:flex; flex-direction:column; gap:3px}
.tn-ngay{text-align:center; margin:10px 0 6px}
.tn-ngay span{font-size:11.5px; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:2px 10px}
.tn-ht{align-self:center; max-width:88%; text-align:center; font-size:12px; color:var(--muted); margin:6px 0}
.tn-lk{border:0; background:none; color:var(--gold-dk); font:inherit; font-weight:600; cursor:pointer; padding:0}
.tn-tin{display:flex; gap:8px; align-items:flex-end; margin-top:8px; max-width:100%}
.tn-tin.lien{margin-top:2px}
.tn-tin.toi{justify-content:flex-end}
.tn-tin .tn-av{width:30px; height:30px; font-size:11px}
.tn-tin-nd{display:flex; flex-direction:column; max-width:min(560px,78%); min-width:0}
.tn-tin.toi .tn-tin-nd{align-items:flex-end}
.tn-ten{font-size:11.5px; color:var(--muted); margin:0 0 2px 4px}
.tn-bong{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:8px 12px; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere}
.tn-tin.toi .tn-bong{background:color-mix(in srgb,var(--gold) 16%, var(--surface)); border-color:color-mix(in srgb,var(--gold) 35%, var(--line))}
.tn-bong.khan{border:1.5px solid var(--bad)}
.tn-tep{margin-top:6px}
.tn-tep .tep-ds.nho img{max-width:180px; max-height:140px; border-radius:8px}
.tn-xoa{color:var(--muted); font-size:12.5px}
.tn-nhac{color:var(--gold-dk); font-weight:700}
.tn-nhac.toi{background:color-mix(in srgb,var(--gold) 22%, transparent); border-radius:4px; padding:0 2px}
.tn-khan-dong{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:7px; padding-top:7px; border-top:1px dashed color-mix(in srgb,var(--bad) 40%, var(--line)); font-size:12px; color:var(--bad)}
.tn-khan-dong span{color:var(--ink-2)}
.tn-gio{font-size:11px; color:var(--muted); margin:2px 4px 0; display:flex; gap:8px; align-items:center}
.tn-nut{display:none; gap:6px}
.tn-tin:hover .tn-nut, .tn-tin:focus-within .tn-nut{display:inline-flex}
.tn-nut button{border:0; background:none; font:inherit; font-size:11px; color:var(--gold-dk); cursor:pointer; padding:0}
.tn-soan{border-top:1px solid var(--line); background:var(--surface); padding:8px 10px}
.tn-soan-dong{display:flex; align-items:flex-end; gap:6px}
.tn-soan textarea{flex:1; min-height:38px; max-height:140px; resize:vertical; padding:9px 11px; border:1px solid var(--line); border-radius:12px; font:inherit; font-size:13.5px; background:var(--surface-2); color:var(--ink)}
.tn-cong{height:38px; min-width:38px; padding:0 8px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink-2); font:inherit; font-weight:700; cursor:pointer; display:grid; place-items:center}
.tn-cong.on{border-color:var(--gold); color:var(--gold-dk); background:color-mix(in srgb,var(--gold) 12%, var(--surface))}
.tn-cong.khan{font-size:12px; font-weight:600}
.tn-cong.khan.on{border-color:var(--bad); color:var(--bad); background:var(--bad-bg)}
.tn-gui{height:38px; padding:0 14px}
.tn-chon-nhac{display:flex; flex-wrap:wrap; gap:6px; padding:4px 2px 8px; max-height:140px; overflow-y:auto}
.tn-chon-nhac button{border:1px solid var(--line); background:var(--surface-2); border-radius:99px; padding:4px 10px; font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink)}
.tn-chon-nhac small{color:var(--muted); margin-left:5px}
.tn-tep-cho{display:flex; flex-wrap:wrap; gap:6px; padding:2px 2px 8px}
.tn-tep-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line); border-radius:8px; padding:3px 6px; background:var(--surface-2)}
.tn-tep-chip img{width:26px; height:26px; object-fit:cover; border-radius:5px}
.tn-tep-chip button{border:0; background:none; cursor:pointer; font-size:15px; color:var(--muted); line-height:1}
.tn-nguoi{display:flex; flex-direction:column; max-height:420px; overflow-y:auto; border:1px solid var(--line); border-radius:12px}
.tn-nguoi button{display:flex; align-items:center; gap:10px; padding:9px 12px; border:0; border-top:1px solid var(--line); background:var(--surface); font:inherit; color:var(--ink); text-align:left; cursor:pointer}
.tn-nguoi button:first-child{border-top:0}
.tn-nguoi button:hover{background:var(--surface-2)}
.tn-nguoi span{display:flex; flex-direction:column}
.tn-nguoi small{color:var(--muted); font-size:12px}
@media (max-width:820px){
  .tn-khung{grid-template-columns:1fr; height:calc(100dvh - 120px); border-radius:12px}
  .tn-trang .tn-cuoc{display:none}
  .tn-trang.co-kenh .tn-ds{display:none}
  .tn-trang.co-kenh .tn-cuoc{display:flex}
  .tn-lui{display:inline-flex}
  .tn-tin-nd{max-width:86%}
  .tn-nut{display:inline-flex}
  .tn-soan-dong{flex-wrap:wrap}
  .tn-soan textarea{order:-1; flex:1 1 100%}
  .tn-gui{margin-left:auto}
}

/* ── Công việc: danh sách báo cáo bên trái, khung nhập chi tiết bên phải ── */
.cv-bo{display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); gap:16px; align-items:start; margin-bottom:18px}
/* Cột danh sách mục báo cáo cao tự nhiên, cuộn chung với cả trang — con lăn đặt ở
 * đâu cũng lăn được cả màn hình, không bị nhốt trong một cột hẹp. */
.cv-trai{max-height:none; overflow:visible}
/* Đầu cột trái dính theo khi cuộn, kèm nút nhảy giữa nhóm báo cáo ngày và nhóm mốc tháng */
.cv-trai > header{position:sticky; top:0; z-index:3; background:var(--surface); flex-wrap:wrap}
.cv-chuyen{display:flex; gap:6px; flex-wrap:wrap}
.cv-chip{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap}
.cv-chip b{font-variant-numeric:tabular-nums}
.cv-chip:hover{border-color:var(--gold); color:var(--ink)}
.cv-chip.on{background:color-mix(in srgb,var(--gold) 15%, var(--surface)); border-color:var(--gold); color:var(--ink)}
.cv-chip.tre{color:var(--bad); border-color:var(--bad)}
.cv-nhom + .cv-nhom{border-top:1px solid var(--line)}
.cv-nhom-dau{display:flex; align-items:baseline; gap:8px; padding:12px 16px 6px}
.cv-nhom-dau b{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2)}
.cv-nhom-so{margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.cv-nhom-so.tre{color:var(--bad)}
.cv-muc{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 16px 10px 13px; border:0; border-left:3px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer}
.cv-muc:hover{background:var(--surface-2)}
.cv-muc.on{background:color-mix(in srgb,var(--gold) 13%, var(--surface)); border-left-color:var(--gold)}
.cv-muc:focus-visible{outline:2px solid var(--gold-dk); outline-offset:-2px}
.cv-muc .pill{flex:none}
.cv-ten{display:flex; flex-direction:column; min-width:0; flex:1}
.cv-ten b{font-size:13.5px; font-weight:600; line-height:1.35}
.cv-ten small{font-size:11.5px; color:var(--muted); margin-top:2px}
.cv-khung{min-width:0}
.cv-khung > header{align-items:flex-start}
.cv-khung > header h3{font-size:17px; margin-top:2px}
.cv-nhom-ten{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}
.cv-tt{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.5}
.panel .bd.cv-form,.panel .bd.cv-xem{display:flex; flex-direction:column; gap:15px}
.cv-form textarea{min-height:58px}
.cv-ft{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding:14px 18px; border-top:1px solid var(--line); background:var(--surface-2)}
.cv-van{white-space:pre-wrap; font-size:13.5px; line-height:1.55; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2)}
@media (max-width:1100px){
  .cv-bo{grid-template-columns:1fr}
  .cv-trai{position:static; max-height:none}
}

/* Công việc: hàng ảnh chi nhánh đứng yên, rê chuột vào thì ảnh nổi lên (bấm để chọn chi nhánh) */
.cv-day{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; margin:0 0 18px}
.cv-cn{position:relative; height:76px; padding:0; border:2px solid transparent; border-radius:11px; overflow:hidden; cursor:pointer; background:var(--navy); box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .2s}
.cv-cn img,.cv-cn svg{display:block; width:100%; height:100% !important; object-fit:cover; transition:transform .45s ease, filter .3s}
.cv-cn::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,20,39,.05) 30%,rgba(7,20,39,.85)); transition:opacity .3s}
.cv-cn-ten{position:absolute; left:8px; right:6px; bottom:6px; z-index:1; color:#fff; font-weight:700; font-size:12px; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left}
.cv-cn-so{position:absolute; right:5px; top:5px; z-index:1; background:rgba(7,20,39,.72); color:#fff; font-size:10.5px; font-weight:700; padding:1px 6px; border-radius:20px; font-variant-numeric:tabular-nums}
.cv-cn-so.du{background:var(--ok)}
.cv-cn:hover,.cv-cn:focus-visible{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gold-lt)}
.cv-cn:hover img,.cv-cn:hover svg{transform:scale(1.12); filter:brightness(1.08)}
.cv-cn:hover::after{opacity:.75}
.cv-cn.on{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 30%, transparent), var(--shadow)}
.cv-cn:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px}
@media (max-width:1320px){ .cv-day{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:640px){ .cv-day{grid-template-columns:repeat(4,minmax(0,1fr))} .cv-cn{height:64px} }

/* Lưu trữ: lỗi lặp lại */
.lt-loc{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.lt-tim{position:relative; flex:1 1 300px; min-width:220px}
.lt-tim svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.lt-tim input[type=search]{width:100%; font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:9px 12px 9px 36px}
.lt-nhan{font-size:12.5px; color:var(--muted)}
.lt-muc{margin-bottom:14px}
.lt-loi{border-top:1px solid var(--line)}
.lt-loi-dau{display:flex; align-items:center; gap:12px; width:100%; padding:11px 18px; border:0; background:none; font:inherit; color:inherit; text-align:left; cursor:pointer}
.lt-loi-dau:hover{background:var(--surface-2)}
.lt-loi-dau:focus-visible{outline:2px solid var(--gold-dk); outline-offset:-2px}
.lt-loi-dau > svg{margin-left:auto; color:var(--muted); transition:transform .2s; flex:none}
.lt-loi.mo .lt-loi-dau > svg{transform:rotate(90deg)}
.lt-lan{flex:none; min-width:58px; text-align:center; font-size:12px; font-weight:700; padding:3px 8px; border-radius:20px; background:var(--surface-2); color:var(--ink-2); font-variant-numeric:tabular-nums}
.lt-lan.lap{background:var(--warn-bg); color:var(--warn)}
.lt-lan.nang{background:var(--bad-bg); color:var(--bad)}
.lt-loi-ten{display:flex; flex-direction:column; min-width:0}
.lt-loi-ten b{font-size:13.5px; font-weight:600}
.lt-loi-ten small{font-size:12px; color:var(--muted); margin-top:2px}
.lt-lan-ds{padding:2px 18px 14px 88px; display:flex; flex-direction:column; gap:8px}
.lt-lan-dong{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px}
.lt-mo-ta small{color:var(--muted)}
@media (max-width:640px){ .lt-lan-ds{padding-left:18px} }

/* Đối soát giảm giá với bảng giá niêm yết */
.ds-bang{border:1px solid var(--line); border-radius:11px; overflow:hidden}
.ds-bang .tbl th,.ds-bang .tbl td{padding:8px 10px; font-size:12.5px}
.ds-bang input[type=text]{padding:6px 9px; font-size:13px}
.ds-nut{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; border-top:1px solid var(--line); background:var(--surface-2)}
.ds-muc{font-size:12.5px; color:var(--muted); margin-right:auto}

/* Review theo nền tảng: mỗi nền tảng một cột */
.rv-cot-bo{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; align-items:start}
.rv-cot{border-top:3px solid var(--nen)}
.rv-cham{width:10px; height:10px; border-radius:50%; background:var(--nen); flex:none}
.rv-phu{font-size:12px; color:var(--muted); margin-top:2px}
.rv-ds{display:flex; flex-direction:column; gap:13px}
.rv-muc{display:flex; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line)}
.rv-muc:last-child{padding-bottom:0; border-bottom:0}

/* Lỗi lặp lại: lịch vạn niên */
.lt-bo{display:grid; grid-template-columns:minmax(300px,360px) minmax(0,1fr); gap:16px; align-items:start}
.lt-bo .stats{margin-bottom:14px}
.lv{position:sticky; top:16px}
.lv > header{justify-content:space-between}
.lv-tieu{display:flex; flex-direction:column; align-items:center; text-align:center}
.lv-tieu b{font-size:15px}
.lv-tieu small{font-size:11.5px; color:var(--muted); margin-top:2px}
.lv-luoi{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; padding:10px 12px 12px}
.lv-thu{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-align:center; padding:0 0 4px}
.lv-o{position:relative; min-height:38px; height:38px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0; border:1px solid transparent; border-radius:9px; background:var(--surface-2); color:var(--ink); font:inherit; cursor:pointer}
.lv-o.rong{background:none; cursor:default}
.lv-o b{font-size:13px; font-weight:700; line-height:1}
.lv-o small{font-size:9.5px; color:var(--muted); line-height:1}
.lv-o small.am-dac,.lv-chu .am-dac{color:var(--bad); font-weight:700}
.lv-o:disabled{opacity:.4; cursor:default}
.lv-o.sau{opacity:.6}
.lv-o.sau:hover{opacity:1}
.lv-o:not(:disabled):not(.rong):hover{border-color:var(--gold-lt)}
.lv-o.nay{border-color:var(--gold)}
.lv-o.m1,.lv-mau.m1{background:color-mix(in srgb,var(--bad) 13%, var(--surface))}
.lv-o.m2{background:color-mix(in srgb,var(--bad) 26%, var(--surface))}
.lv-o.m3{background:color-mix(in srgb,var(--bad) 40%, var(--surface))}
.lv-o.m4,.lv-mau.m4{background:color-mix(in srgb,var(--bad) 56%, var(--surface))}
.lv-so{position:absolute; top:1px; right:3px; font-style:normal; font-size:9.5px; font-weight:800; color:var(--bad)}
.lv-o.m4 .lv-so,.lv-o.m3 .lv-so{color:var(--ink)}
.lv-o.chon{outline:2px solid var(--info); outline-offset:-2px}
.lv-o:focus-visible{outline:2px solid var(--gold-dk); outline-offset:1px}
.lv-chan{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:0 12px 10px; font-size:12.5px; color:var(--muted)}
.lv-chan b{color:var(--ink)}
.lv-chu{display:flex; gap:12px; flex-wrap:wrap; padding:8px 12px 12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted)}
.lv-chu span{display:inline-flex; align-items:center; gap:5px}
.lv-mau{width:12px; height:12px; border-radius:3px; display:inline-block}
.lt-lan-dong.trong{background:var(--info-bg); border-radius:8px; margin:0 -8px; padding:4px 8px}
@media (max-width:1100px){ .lt-bo{grid-template-columns:1fr} .lv{position:static} }

/* Đăng nhập bằng số điện thoại + mật khẩu */
.dn-goi{font-size:13px; color:var(--muted); margin:0 0 14px; line-height:1.6}
.dn-o{display:block; width:100%; margin-bottom:12px; padding:12px 14px; font:inherit; font-size:17px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px}
.dn-o:focus{outline:2px solid var(--gold-lt); outline-offset:1px; border-color:var(--gold)}
.dn-nut{width:100%; justify-content:center; padding:13px; font-size:15px}
.dn-phu{display:flex; justify-content:space-between; gap:10px; margin-top:12px}
.btn-link{border:0; background:none; padding:4px 0; color:var(--info); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.btn-link:disabled{opacity:.5; cursor:default}
.dn-doi{display:block; margin:16px auto 0}
.dn-mk{position:relative}
.dn-mk .dn-o{padding-right:62px}
.dn-mat{position:absolute; right:8px; top:8px; border:0; background:var(--surface-2); color:var(--ink-2); font:inherit; font-size:12px; font-weight:600; padding:6px 9px; border-radius:7px; cursor:pointer}
.dn-doi-mk{min-height:100vh; display:grid; place-items:center; padding:24px; background:var(--ground)}
.dn-doi-mk .box{width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; box-shadow:var(--shadow-lg)}
.mk-sdt{font-size:18px; font-weight:700}
.mk-the{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mk-the div{border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--surface-2)}
.mk-the span{display:block; font-size:11.5px; color:var(--muted)}
.mk-the b{font-size:17px; font-family:ui-monospace,Menlo,monospace}

/* Ô cập nhật điểm đánh giá: mỗi nền tảng một khối có liên kết trang riêng */
.nen-o{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.nen-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.nen-dau b{font-size:15px}
.nen-diem{font-size:13.5px;color:var(--ink);font-weight:600}
.nen-luc{font-size:12px;color:var(--muted)}

/* ───── Bảng Trung tâm cảnh báo ─────
   9 cột nên trên laptop bị bóp nát (chữ rớt từng từ, nút Xem nằm ngoài màn).
   Màn rộng: cột Nội dung được ưu tiên. Màn hẹp: đổi hẳn sang thẻ, bấm cả thẻ để mở. */
table.tbl.tbl-cb{min-width:1060px}
table.tbl.tbl-cb tbody tr[data-act]{cursor:pointer}
table.tbl.tbl-cb tbody tr:hover{background:var(--surface-2)}
.tbl-cb td.cb-nd{min-width:250px; max-width:420px}
@media (max-width:1180px){
  .cb-wrap{overflow-x:visible}
  table.tbl.tbl-cb{min-width:0; display:block}
  .tbl-cb thead{display:none}
  .tbl-cb tbody{display:grid; gap:10px; padding:4px}
  .tbl-cb tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:1px 16px; border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; background:var(--surface)}
  .tbl-cb tbody tr:hover{border-color:var(--gold); background:var(--surface)}
  .tbl-cb td{display:flex; align-items:center; gap:10px; border:0; padding:3px 0; max-width:none}
  .tbl-cb td::before{content:attr(data-nhan); flex:none; width:84px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
  .tbl-cb td:last-child{justify-content:flex-end; padding-top:8px}
  .tbl-cb td:last-child::before{content:none}
  .tbl-cb td.cb-nd{min-width:0; font-weight:600; grid-column:1/-1}
  .tbl-cb td:last-child{grid-column:1/-1}
  .tbl-cb tbody tr > td:first-child::before{content:none}
  .tbl-cb tbody tr > td:first-child{font-size:14px}
  .tbl-cb td.b-ref{display:flex}
  .tbl-cb td[colspan]{display:block; grid-column:1/-1}
  .tbl-cb td[colspan]::before{content:none}
}
@media (max-width:640px){ .tbl-cb tbody tr{grid-template-columns:1fr} }

/* ───── Thanh cuộn: to hơn cho dễ bắt, bo tròn, đậm lên khi rà chuột ───── */
*{scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink-2) 35%, transparent) transparent}
::-webkit-scrollbar{width:12px; height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--ink-2) 32%, transparent);
  border:3px solid transparent; background-clip:content-box; border-radius:999px; min-height:44px;
}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--ink-2) 55%, transparent); background-clip:content-box}
::-webkit-scrollbar-thumb:active{background:var(--gold-dk); background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* Vùng cuộn riêng: không kéo lây cả trang, cuộn mượt trên máy cảm ứng */
.tn-ds-cuon,.tn-than,.cv-trai,.tbl-wrap,.lt-lan-ds{overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.tn-ds-cuon,.cv-trai{scrollbar-gutter:stable}

/* ───── Trang kết quả tìm kiếm chung ───── */
.tk-ds{display:flex; flex-direction:column}
.tk-dong{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 16px; border:0; border-top:1px solid var(--line);
  background:none; color:inherit; font:inherit; cursor:pointer}
.tk-ds > .tk-dong:first-child{border-top:0}
.tk-dong:hover{background:var(--surface-2)}
.tk-dong:focus-visible{outline:2px solid var(--gold); outline-offset:-2px}
.tk-nd{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.tk-nd b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-nd small{color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-dong .pill{flex:none}
.tk-dong svg{color:var(--muted); flex:none}

/* Ô tích trong hộp thoại quản trị (mục báo cáo) */
.ck{display:inline-flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2)}
.ck input{width:16px; height:16px; accent-color:var(--gold-dk); cursor:pointer}
.ck:hover{border-color:var(--gold)}

/* Nút Quản trị trên thanh đầu trang: vào thẳng, khỏi cuộn menu trái */
.bell.qt{width:auto; padding:0 13px; gap:7px; display:inline-flex; align-items:center; color:var(--ink-2); white-space:nowrap}
.bell.qt .nhan{font-size:12.5px; font-weight:600}
.bell.qt:hover{border-color:var(--gold); color:var(--ink)}
@media (max-width:860px){ .bell.qt .nhan{display:none} .bell.qt{width:38px; padding:0} }
@media (max-height:780px){ .side .quote{display:none} }

/* ───── Chuyển động: mềm mắt nhưng không chớp khi dữ liệu tự cập nhật ─────
   Trang và hộp thoại chỉ chạy hiệu ứng lúc mới mở (lớp .vao do render gắn),
   còn nút/dòng dùng transition nên chỉ động khi người dùng chạm tới. */
@media (prefers-reduced-motion: no-preference){
  .page.vao{animation:hienLen .2s cubic-bezier(.22,.61,.36,1)}
  .modal.vao{animation:hopLen .18s cubic-bezier(.22,.61,.36,1)}
  .scrim.vao{animation:moMo .18s ease-out}
  .btn,.bell,.cv-muc,.tk-dong,.tn-muc,.cv-chip,.ck,.tep-xem{transition:background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .1s ease}
  .btn:active,.bell:active,.cv-chip:active{transform:translateY(1px)}
  .panel{transition:border-color .18s ease, box-shadow .18s ease}
  table.tbl tbody tr{transition:background-color .14s ease}
  .bcard,.b-the{transition:transform .18s ease, box-shadow .18s ease}
}
@keyframes hienLen{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
@keyframes hopLen{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}
@keyframes moMo{from{opacity:0} to{opacity:1}}

/* Kết quả chấm file báo cáo */
.pt-kq{display:flex; gap:10px; padding:11px 13px; border-radius:11px; font-size:13px; margin-top:4px}
.pt-kq.dat{background:var(--ok-bg); border:1px solid color-mix(in srgb,var(--ok) 28%, transparent)}
.pt-kq.kco{background:var(--bad-bg); border:1px solid color-mix(in srgb,var(--bad) 28%, transparent)}
.pt-kq b{font-size:13.5px}
.pt-goi{margin-top:8px}
.pt-cho{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted)}
.pt-loi{display:block; font-size:12px; color:var(--bad); margin-bottom:6px}
.pt-ds{margin:6px 0 0; padding-left:18px; color:var(--ink-2); font-size:12.5px}
.pt-ds li{margin:2px 0}

/* Ô chấm báo cáo của tài khoản công ty */
.cham-o{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--surface-2)}
.cham-o.dat{border-color:color-mix(in srgb,var(--ok) 40%, transparent); background:var(--ok-bg)}
.cham-o.kco{border-color:color-mix(in srgb,var(--bad) 40%, transparent); background:var(--bad-bg)}
.cham-dau{display:flex; align-items:center; gap:8px; font-size:13.5px}
.cham-kq{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
.cham-gc{font-size:12.5px; color:var(--ink-2)}

/* Thanh nhắc khi tài khoản công ty đang xem thử giao diện leader */
.xt-thanh{position:sticky; top:0; z-index:25; display:flex; align-items:center; gap:10px; padding:10px 30px;
  background:linear-gradient(90deg,var(--gold) 0%, var(--gold-dk) 100%); color:#fff; font-size:13px}
.xt-thanh b{font-weight:700}
.xt-thanh .btn{margin-left:auto; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff}
.xt-thanh .btn:hover{background:rgba(255,255,255,.28)}

/* Vạch ngăn giữa hai cách đăng nhập */
.dn-hoac{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted); font-size:12.5px}
.dn-hoac::before,.dn-hoac::after{content:""; flex:1; height:1px; background:var(--line)}

/* Danh sách người để xem thử giao diện */
.xt-ds{display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow:auto}
.xt-nguoi{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--line);
  border-radius:11px; background:var(--surface); color:inherit; font:inherit; cursor:pointer}
.xt-nguoi:hover{border-color:var(--gold); background:var(--surface-2)}
.xt-nguoi .av{width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px; flex:none}
.xt-nguoi b{display:block; font-size:13.5px}
.xt-nguoi small{color:var(--muted); font-size:12px}

/* Ô tìm mục báo cáo trong cột trái trang Công việc */
.cv-tim{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px; margin:0; padding:10px 14px;
  background:var(--surface); border-bottom:1px solid var(--line); color:var(--muted)}
.cv-tim input{flex:1; min-width:0; border:1px solid var(--line); border-radius:9px; padding:7px 10px; font:inherit; font-size:13px;
  background:var(--surface-2); color:var(--ink); outline:none}
.cv-tim input:focus{border-color:var(--gold); background:var(--surface)}
.cv-tim-x{border:0; background:none; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:0 2px}
.cv-tim-x:hover{color:var(--bad)}
.cv-tim-so{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap}

/* Bảng tổng hợp: chi nhánh × hạng mục trong ngày */
table.tbl.th-bang{min-width:1180px; table-layout:fixed; font-size:12.5px}
.th-bang th.th-goc{position:sticky; left:0; z-index:2; background:var(--surface-2); width:112px; white-space:normal}
.th-bang th.th-muc{width:88px; vertical-align:bottom; padding:8px 6px; text-transform:none; letter-spacing:0; white-space:normal}
.th-bang th.th-muc span{display:block; font-weight:600; color:var(--ink-2); line-height:1.25; font-size:11px; overflow-wrap:anywhere; hyphens:auto}
.th-bang th.th-muc small{display:block; margin-top:3px; color:var(--muted); font-variant-numeric:tabular-nums}
.th-bang th.th-cn{position:sticky; left:0; z-index:1; background:var(--surface); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); width:112px}
.th-bang th.th-cn b{display:block; font-size:13px}
.th-bang th.th-cn span{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums}
.th-bang td.th-o{text-align:center; padding:6px 4px}
.th-ket{display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; font-size:13px; font-weight:700;
  border:1px solid transparent; background:var(--surface-2); color:var(--muted); font-style:normal}
button.th-ket{cursor:pointer}
.th-ket.dat{background:var(--ok-bg); color:var(--ok); border-color:color-mix(in srgb,var(--ok) 30%, transparent)}
.th-ket.kco{background:var(--bad-bg); color:var(--bad); border-color:color-mix(in srgb,var(--bad) 32%, transparent)}
.th-ket.trong{background:var(--surface-2); color:var(--muted)}
.th-ket.lich{background:transparent; color:var(--line)}
.th-ket.cham-dat{box-shadow:inset 0 -3px 0 var(--ok)}
.th-ket.cham-kco{box-shadow:inset 0 -3px 0 var(--bad)}
.th-chu{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); flex-wrap:wrap}
.th-chu .th-ket{width:20px; height:20px; font-size:11px}

/* Lịch thống kê: đậm dần theo tỉ lệ hoàn thành trong ngày */
.lv-o.tk.t1{background:color-mix(in srgb,var(--bad) 12%, var(--surface)); border-color:color-mix(in srgb,var(--bad) 22%, transparent)}
.lv-o.tk.t2{background:color-mix(in srgb,var(--warn) 16%, var(--surface)); border-color:color-mix(in srgb,var(--warn) 26%, transparent)}
.lv-o.tk.t3{background:color-mix(in srgb,var(--warn) 30%, var(--surface)); border-color:color-mix(in srgb,var(--warn) 38%, transparent)}
.lv-o.tk.t4{background:color-mix(in srgb,var(--ok) 26%, var(--surface)); border-color:color-mix(in srgb,var(--ok) 36%, transparent)}
.lv-mau.t1{background:color-mix(in srgb,var(--bad) 12%, var(--surface))}
.lv-mau.t3{background:color-mix(in srgb,var(--warn) 30%, var(--surface))}
.lv-mau.t4{background:color-mix(in srgb,var(--ok) 26%, var(--surface))}
.tk-kco{display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--bad); color:#fff; font-size:10px; font-style:normal; font-weight:700}
.lv-o.tk .tk-kco{position:absolute; top:3px; right:3px}
.lv-o.tk{position:relative}

/* Nút mở lịch tìm cảnh báo */

/* Chừa sẵn chỗ cho thanh cuộn của cả trang để nội dung không giật ngang khi thanh hiện ra */
html{scrollbar-gutter:stable}
.modal .bd{overscroll-behavior:contain}

/* Sổ đầy đủ báo cáo theo chi nhánh trong ngày */
.so-khoi + .so-khoi{border-top:1px solid var(--line)}
.so-dau{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 16px; border:0; background:none; color:inherit; font:inherit; cursor:pointer}
.so-dau:hover{background:var(--surface-2)}
.so-khoi.mo .so-dau{background:var(--surface-2)}
.so-khoi.mo .so-dau svg{transform:rotate(90deg)}
.so-dau svg{transition:transform .15s ease; color:var(--muted); flex:none}
.so-cn{display:flex; flex-direction:column; min-width:120px}
.so-cn b{font-size:14px}
.so-cn small{color:var(--muted); font-size:12px}
.so-dem{display:flex; gap:6px; flex-wrap:wrap; flex:1}
.so-ds{border-top:1px solid var(--line); background:var(--surface)}
.so-muc{display:flex; align-items:center; gap:10px; padding:9px 16px 9px 30px; border-top:1px solid color-mix(in srgb,var(--line) 60%, transparent); flex-wrap:wrap}
.so-muc.thieu{background:color-mix(in srgb,var(--bad) 4%, transparent)}
.so-muc.kco{background:var(--bad-bg)}
.so-ten{flex:1; min-width:180px; display:flex; flex-direction:column; gap:1px; font-size:13px}
.so-ten small{color:var(--muted); font-size:11.5px}
.so-ten .so-mo-ta{color:var(--ink-2); font-size:12px}
.so-phai{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.so-diem{font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}

/* Dashboard chi nhánh: biểu đồ xếp hạng dạng thanh ngang chia đoạn */
.xh-ds{display:flex; flex-direction:column; gap:9px; padding:14px}
.xh-dong{display:grid; grid-template-columns:24px 76px minmax(0,1fr) 46px; grid-template-areas:"h t b s" ". m m m"; gap:3px 10px;
  align-items:center; width:100%; padding:9px 11px; border:1px solid transparent; border-radius:12px; background:var(--surface-2);
  font:inherit; color:var(--ink); text-align:left; cursor:pointer; transition:border-color .15s ease, transform .15s ease, background .15s ease}
.xh-dong:hover{border-color:var(--gold-lt); transform:translateX(2px); background:var(--surface)}
.xh-dong:focus-visible{outline:2px solid var(--gold-dk); outline-offset:1px}
.xh-hang{grid-area:h; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:12px; font-weight:800;
  background:color-mix(in srgb,var(--ink) 9%, transparent); color:var(--muted)}
.xh-dong.h1 .xh-hang{background:var(--bad); color:#fff}
.xh-dong.h2 .xh-hang{background:var(--warn); color:#fff}
.xh-dong.h3 .xh-hang{background:var(--gold); color:#fff}
.xh-ten{grid-area:t; font-weight:700; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.xh-thanh{grid-area:b; display:flex; height:15px; border-radius:999px; overflow:hidden; background:color-mix(in srgb,var(--ink) 7%, transparent)}
.xh-thanh i{display:block; height:100%; transform-origin:left; animation:xh-moc .45s cubic-bezier(.22,.7,.3,1) both}
.xh-thanh i + i{box-shadow:-1px 0 0 var(--surface)}
.xh-so{grid-area:s; text-align:right; font-size:16px; font-variant-numeric:tabular-nums}
.xh-mt{grid-area:m; font-size:11.5px; color:var(--muted); line-height:1.45}
.xh-dong.trong .xh-so{color:var(--muted)}
.xh-chu{display:flex; gap:14px; flex-wrap:wrap; padding:0 14px 13px; font-size:11.5px; color:var(--muted)}
.xh-chu span{display:inline-flex; align-items:center; gap:6px}
.xh-chu i{width:11px; height:11px; border-radius:3px; display:inline-block}
@keyframes xh-moc{from{transform:scaleX(.02)} to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .xh-thanh i{animation:none} }

/* Ô chọn ngày dùng lịch sẵn có của trình duyệt */
.loc-ngay{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); flex-wrap:wrap}
.loc-ngay > span{white-space:nowrap}
.o-ngay{padding:6px 9px; font:inherit; font-size:12.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:9px; min-width:140px}
.o-ngay:focus{outline:2px solid var(--gold-lt); outline-offset:1px; border-color:var(--gold)}
.cb-lich-dong{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}

/* Dòng mục trong hộp Báo cáo ngày khi bấm được để mở khung nhập */
button.lt-muc{display:block; width:100%; font:inherit; color:inherit; background:var(--surface-2); border:1px solid transparent;
  border-bottom:1px solid var(--line); border-radius:12px; padding:11px 13px; cursor:pointer; transition:border-color .15s ease, transform .15s ease}
button.lt-muc:hover{border-color:var(--gold-lt); transform:translateX(2px)}
button.lt-muc:focus-visible{outline:2px solid var(--gold-dk); outline-offset:1px}

/* Dòng hậu kiểm: phần mở báo cáo + nút đóng việc nằm cạnh nhau */

/* Chuông có việc báo cáo chưa nộp: viền vàng cho dễ thấy */
.bell.nhac{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%, transparent)}

/* Nút đổi chế độ sáng / tối */
.bell.gd{color:var(--ink-2)}
.bell.gd:hover{color:var(--gold-dk); border-color:var(--gold-lt)}

/* Dấu × đóng khung nhập báo cáo trên trang Công việc */
.cv-khung header .x{flex:none; width:30px; height:30px; display:grid; place-items:center; font-size:19px; line-height:1;
  color:var(--muted); background:var(--surface-2); border:1px solid var(--line); border-radius:9px; cursor:pointer}
.cv-khung header .x:hover{color:var(--bad); border-color:var(--bad)}

/* Ô số liệu bấm được: mở danh sách báo cáo tương ứng */
button.stat.bam{font:inherit; color:inherit; text-align:left; cursor:pointer; border:1px solid transparent;
  transition:border-color .15s ease, transform .15s ease}
button.stat.bam:hover{border-color:var(--gold-lt); transform:translateY(-1px)}
button.stat.bam:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px}

/* Nội dung đã ghi nhận hiện ngay trong danh sách mục báo cáo */
.cv-ghi{display:flex; gap:6px; align-items:flex-start; margin-top:5px; padding:6px 8px; border-radius:8px;
  background:var(--ok-bg); color:var(--ink-2); font-size:11.5px; line-height:1.45}
.cv-ghi svg{flex:none; margin-top:1px; color:var(--ok)}

/* Thông báo tương tác chưa đọc: viền trái đậm cho dễ thấy */
.vc-dong.tt-moi{border-left:3px solid var(--gold); background:var(--ok-bg)}
.vc-dong.tt-moi .vc-nd b{font-weight:700}

/* ───── Xem ảnh minh chứng: ảnh to, mũi tên hai bên, số thứ tự ───── */
.anh-khung{position:relative; display:flex; align-items:center; justify-content:center;
  background:var(--bg-2, rgba(0,0,0,.04)); border-radius:12px; padding:6px; margin-bottom:10px}
.anh-to{display:block; max-width:100%; max-height:76vh; border-radius:9px; object-fit:contain}
.anh-mui{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:0; cursor:pointer;
  background:rgba(12,22,40,.55); color:#fff; font-size:30px; line-height:1; border-radius:10px;
  display:grid; place-items:center}
.anh-mui:hover{background:rgba(12,22,40,.78)}
.anh-mui.truoc{left:10px}
.anh-mui.sau{right:10px}
.anh-dem{position:absolute; left:12px; bottom:12px; background:rgba(12,22,40,.6); color:#fff;
  font-size:12px; padding:3px 9px; border-radius:999px}
button.tep-them{cursor:pointer; border:1px solid var(--line)}
button.tep-them:hover{border-color:var(--gold-dk)}
@media (max-width:560px){
  .anh-mui{width:38px; height:54px; font-size:25px}
  .anh-to{max-height:60vh}
}

/* Ảnh minh chứng ngoài danh sách: hiện hết, đủ to để nhìn ra nội dung */
.tep-xem.anh{min-height:0; border-radius:10px}
.tep-xem.anh img{width:62px; height:62px}
.tep-xem.anh:hover img{filter:brightness(1.06)}
@media (max-width:560px){ .tep-xem.anh img{width:54px; height:54px} }

/* Lật ảnh cho mượt: giữ ảnh cũ, làm mờ nhẹ và quay vòng trong lúc tấm mới về */
.anh-khung{min-height:44vh}
.anh-to{transition:opacity .18s ease}
.anh-to.mo{opacity:.38}
.anh-cho{display:grid; place-items:center; width:100%; height:44vh; color:var(--muted)}
.anh-khung.dang-tai::after{content:""; position:absolute; width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:anh-quay .7s linear infinite}
@keyframes anh-quay{to{transform:rotate(360deg)}}

/* Thanh báo có bản cập nhật mới */
.ban-moi{position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:9999;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background:var(--ink, #16233A); color:#fff; padding:11px 14px; border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5); font-size:13px; max-width:calc(100% - 24px)}
.ban-moi button{border:0; border-radius:8px; padding:7px 13px; font-size:13px; font-weight:600;
  cursor:pointer; background:var(--gold, #C8A04A); color:#fff}
.ban-moi button.sau{background:rgba(255,255,255,.16)}

/* Phóng to / thu nhỏ ảnh minh chứng */
.anh-cuon{display:flex; align-items:center; justify-content:center; width:100%}
.anh-khung.phong .anh-cuon{overflow:auto; height:76vh; align-items:flex-start; justify-content:flex-start; cursor:grab}
.anh-khung.phong .anh-to{border-radius:6px}
.anh-zoom{position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:2px;
  background:rgba(12,22,40,.62); border-radius:999px; padding:3px}
.anh-zoom button{width:30px; height:30px; border:0; border-radius:50%; cursor:pointer;
  background:transparent; color:#fff; font-size:19px; line-height:1; display:grid; place-items:center}
.anh-zoom button:hover:not([disabled]){background:rgba(255,255,255,.18)}
.anh-zoom button[disabled]{opacity:.35; cursor:default}
.anh-zoom b{color:#fff; font-size:11.5px; min-width:42px; text-align:center; cursor:pointer; user-select:none}

/* Hộp xem ảnh: khổ rộng, cao gần hết màn hình — ảnh chụp dọc mới đủ to để nhìn */
.modal.rong-anh{width:min(1180px, 96vw); max-height:96vh}
.modal.rong-anh .bd{padding:12px 12px 10px}
.modal.rong-anh .anh-khung{min-height:52vh; background:rgba(8,14,26,.55)}
.modal.rong-anh .anh-to{max-height:78vh}
@media (max-width:700px){
  .modal.rong-anh{width:100%; max-height:100vh; border-radius:12px}
  .modal.rong-anh .anh-to{max-height:66vh}
  .anh-khung.phong .anh-cuon{height:66vh}
}

/* ───── Kéo và cuộn cho mượt ───── */
/* Kéo ảnh: khi đang giữ thì đổi con trỏ và tắt chọn chữ cho khỏi "dính" */
.anh-khung.phong .anh-cuon{scroll-behavior:auto; overscroll-behavior:contain; touch-action:none;
  -webkit-overflow-scrolling:touch}
.anh-khung.phong .anh-cuon.dang-keo{cursor:grabbing}
.anh-khung.phong .anh-to{user-select:none; -webkit-user-drag:none}

/* KHÔNG đặt scroll-behavior:smooth cho cả trang: phần mềm vẽ lại rất nhiều lần và
 * phải trả thanh cuộn về đúng chỗ cũ ngay lập tức — nếu trả về kiểu trượt êm thì
 * mỗi lần vẽ lại màn hình sẽ trôi lừ đừ, nhìn như giật. Chỗ nào cần trượt êm
 * (bấm chip nhảy tới mục) thì đã gọi riêng behavior:"smooth" ở chỗ đó. */
html{scroll-behavior:auto}

/* Cuộn trong khung không kéo theo cả trang, hết danh sách là dừng hẳn */
/* Chỉ hộp thoại và khung xem ảnh mới chặn nối cuộn; các danh sách khác lăn hết
 * là trang cuộn tiếp, không bị khựng lại giữa chừng. */
.modal .bd,.anh-cuon{overscroll-behavior:contain}
.tbl-wrap,.cv-trai,.cv-khung,.tn-ds-cuon,.tn-than,.nav,.xt-ds,.lv-luoi,.lt-lan-ds,.tk-ds,.vc-ds{
  overscroll-behavior:auto; -webkit-overflow-scrolling:touch}

/* Thanh cuộn mảnh, bo tròn, hiện rõ hơn khi rê vào — dễ nhắm mà không chiếm chỗ */
*{scrollbar-width:thin; scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:999px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted); background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* Lịch chọn ngày nghỉ */
.nghi-o{cursor:pointer}
.nghi-o.chon{background:var(--gold, #C8A04A); color:#fff; font-weight:700; border-color:transparent}
.nghi-o.qua{opacity:.35; cursor:not-allowed}
.nghi-o .nay{position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor}

/* Ô bình luận của công ty ngay trên từng báo cáo nhận được */
.ct-dong{border-bottom:1px solid var(--line)}
.ct-dong:last-child{border-bottom:0}
.ct-dong .ct-mo{border-bottom:0}
.ct-binh{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0 14px 12px; margin-top:-6px}
.ct-binh-co{display:flex; gap:7px; align-items:flex-start; flex:1; min-width:220px; padding:8px 10px; border-radius:9px;
  background:var(--warn-bg, rgba(200,160,74,.12)); color:var(--ink-2); font-size:12px; line-height:1.5}
.ct-binh-co svg{flex:none; margin-top:1px; color:var(--warn)}
.ct-binh-trong{flex:1; min-width:180px; font-size:12px; color:var(--muted); font-style:italic}
.ct-binh-o{flex:1; min-width:200px; padding:8px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--surface); color:var(--ink); font:inherit; font-size:13px}
.ct-binh-o:focus{outline:none; border-color:var(--gold, #C8A04A)}
.ct-binh-o::placeholder{color:var(--muted)}

/* Kéo tệp thả vào khung báo cáo: viền sáng lên cho biết thả được */
.modal.dang-tha,.cv-khung.dang-tha,.tn-soan.dang-tha{outline:2px dashed var(--gold, #C8A04A); outline-offset:-6px}

/* Nút nghe thử chuông: đang tắt tiếng thì gạch chéo cho dễ thấy */
.bell.gd.tat{position:relative; color:var(--muted)}
.bell.gd.tat .gach{position:absolute; left:50%; top:50%; width:22px; height:2px; background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg); border-radius:2px}

/* ───── 5 giá trị cốt lõi · 10 hành vi then chốt (màn hình đăng nhập) ───── */
.gtri{margin:26px 0 8px; display:flex; flex-direction:column; gap:11px}
.gtri-dau{display:flex; align-items:center; gap:12px; margin-bottom:3px}
.gtri-dau span{flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(199,154,62,.55),transparent)}
.gtri-dau b{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:#C79A3E; white-space:nowrap}
.gtri-d{display:flex; align-items:center; gap:13px}
.gtri-d i{flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  font-size:13px; font-weight:700; color:#0B1B33; background:linear-gradient(145deg,#E2D2A8,#C79A3E);
  box-shadow:0 4px 12px -4px rgba(199,154,62,.7)}
.gtri-d > div{min-width:0}
.gtri-d b{display:block; font-size:15px; font-weight:600; color:#F3EADA; letter-spacing:.01em}
.gtri-d span{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.gtri-d em{font-style:normal; font-size:11px; color:#9FB2CC; border:1px solid rgba(255,255,255,.14);
  border-radius:999px; padding:2px 9px; background:rgba(255,255,255,.04)}
@media (max-width:980px){
  .gtri{margin:18px 0 4px; gap:9px}
  .gtri-d b{font-size:14px}
}

/* Khung dán ảnh trong mục báo cáo */
.tep-dan{position:relative; display:block; margin-top:9px}
.tep-dan-o{width:100%; padding:13px 40px 13px 14px; border:1.5px dashed var(--line); border-radius:11px;
  background:var(--surface-2); color:var(--ink); font:inherit; font-size:12.5px; cursor:text}
.tep-dan-o::placeholder{color:var(--muted)}
.tep-dan-o:hover{border-color:var(--gold-dk)}
.tep-dan-o:focus{outline:none; border-color:var(--gold); border-style:solid;
  background:color-mix(in srgb, var(--gold) 8%, var(--surface))}
.tep-dan svg{position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.tep-dan-o:focus + svg{color:var(--gold-dk)}

/* Ô ghi nhớ máy ở màn hình đăng nhập */
.dn-nho{display:flex; align-items:center; gap:9px; margin:4px 0 14px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
.dn-nho input{width:17px; height:17px; accent-color:var(--gold-dk); flex:none}

/* Nút Face ID lớn ở đầu màn hình đăng nhập (máy đã bật) */
.dn-nut.face-to{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:15px; font-size:15.5px; margin-bottom:0}
.dn-nut.face-to svg{flex:none}

/* ═════════ GIAO DIỆN ĐIỆN THOẠI ═════════
 * Màn hình hẹp: giấu thanh bên đi cho rộng chỗ, thay bằng nút menu ở góc trái và
 * một thanh 5 mục ở đáy màn hình — ngón cái với tới được, không phải cuộn tìm.
 */
.dt-menu{display:none}
.dt-ten{display:none}
.dt-che{display:none}
.dt-duoi{display:none}

@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  /* Thanh bên trượt ra từ trái khi bấm nút menu */
  .side{position:fixed; left:0; top:0; bottom:0; width:270px; z-index:70; transform:translateX(-102%);
    transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.45)}
  .shell.menu-mo .side{transform:none}
  .shell.menu-mo ~ .dt-che,.dt-che{position:fixed; inset:0; z-index:60; border:0; padding:0;
    background:rgba(7,13,25,.55); backdrop-filter:blur(1px)}
  .dt-che{display:none}
  .shell.menu-mo + .dt-che,.shell.menu-mo .dt-che{display:block}
  .side .logo-gon{display:none}
  .side .logo-du{display:block; width:150px}
  .nav a span{display:inline}

  /* Thanh đầu trang gọn lại: nút menu · tên trang · chuông */
  .topbar{padding:10px 12px; gap:10px; align-items:center}
  .topbar h2,.topbar .sub{display:none}
  .dt-ten{display:block; font-size:16px; font-weight:700; color:var(--ink); white-space:nowrap}
  .dt-menu{display:grid; place-items:center; width:40px; height:40px; flex:none; border:1px solid var(--line);
    border-radius:11px; background:var(--surface); color:var(--ink); cursor:pointer; transform:rotate(180deg)}
  .topbar .search{display:none}
  .topbar .bell .nhan{display:none}
  .topbar .bell{width:40px; height:40px}

  /* Chừa chỗ cho thanh dưới */
  .main{padding-bottom:74px}
  .dt-duoi{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55;
    background:color-mix(in srgb, var(--surface) 96%, transparent); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom)); backdrop-filter:blur(8px)}
  .dt-duoi a{flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border-radius:10px; text-decoration:none; color:var(--muted); font-size:10.5px; font-weight:600}
  .dt-duoi a.on{color:var(--gold-dk); background:color-mix(in srgb, var(--gold) 12%, transparent)}
  .dt-duoi a .ct{position:absolute; top:2px; right:50%; margin-right:-22px; min-width:16px; height:16px;
    padding:0 4px; border-radius:999px; background:var(--bad); color:#fff; font-size:9.5px; font-style:normal;
    display:grid; place-items:center}

  /* Ngón tay chạm cho dễ: nút và ô nhập cao hơn */
  .btn,.cv-chip,.pill{min-height:38px}
  .btn.btn-sm{min-height:34px}
  input,select,textarea{font-size:16px}      /* iPhone không tự phóng to khi gõ */
  .page{padding:14px 12px}
  .page-head h1{font-size:21px}
  .stats{grid-template-columns:1fr 1fr; gap:10px}
  .modal{width:100%; max-height:94vh; border-radius:16px 16px 0 0}
  .scrim{align-items:flex-end}
}

/* Hàng tên nhân viên bấm chọn trong khung báo cáo */
.ns-chip{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 8px}
.ns-chip button{font:inherit; cursor:pointer; border:1px solid transparent}
.ns-chip button:hover{border-color:var(--gold-lt)}
.ns-chip button small{font-size:10px; opacity:.72; font-weight:600}

/* Đầu dòng báo cáo (bên trang công ty): nút bấm mở báo cáo ngày, nhìn như chữ thường */
.ct-dau{display:block; width:100%; text-align:left; padding:0; border:0; background:none;
  font:inherit; color:inherit; cursor:pointer}
.ct-dau:hover{opacity:.82}
.ct-dau:focus-visible{outline:2px solid var(--gold-dk); outline-offset:2px; border-radius:8px}

/* Tiến độ điều chỉnh trong mỗi lỗi lặp lại */
.lt-xuly{margin:8px 0 2px; padding:10px 12px; border:1px dashed var(--line); border-radius:11px;
  background:color-mix(in srgb, var(--surface-2) 70%, transparent)}
.lt-xuly-ds{margin-top:8px; display:flex; flex-direction:column; gap:7px}
.lt-xuly-dong{display:flex; gap:8px; align-items:flex-start; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.lt-xuly-dong .pill{flex:none}

/* Ô sổ danh sách nhân viên trong khung báo cáo */
.ns-so{font-size:14px}
.ns-go.an{display:none}

/* Kho liên kết Google Drive */
.dr-ds{display:flex; flex-direction:column; gap:10px}
.dr-dong{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--surface-2)}
.dr-ten{display:flex; gap:10px; align-items:flex-start; text-decoration:none; color:var(--ink)}
.dr-ten span{display:flex; flex-direction:column; min-width:0}
.dr-ten b{font-size:13.5px; line-height:1.4; word-break:break-word}
.dr-ten small{font-size:11.5px; color:var(--muted); margin-top:2px}
.dr-ten:hover b{color:var(--gold-dk)}
.dr-ghi{font-size:12.5px; color:var(--ink-2); margin-top:6px}
.dr-nut{display:flex; gap:6px; margin-top:8px}

/* Điện thoại: mở một mục báo cáo thì ẩn danh sách, chỉ còn khung nhập cho đỡ lạc */
.dt-ve{display:none}
@media (max-width:1100px){
  .cv-bo.mo-khung .cv-trai{display:none}
  .cv-khung header{align-items:center}
  .dt-ve{display:grid; place-items:center; width:36px; height:36px; flex:none; margin-right:2px;
    border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); cursor:pointer}
  .dt-ve:hover{border-color:var(--gold-lt)}
}

/* Mục Kỹ thuật: mỗi việc một thẻ, kèm ô trao đổi */
.kt-ds{display:flex; flex-direction:column; gap:12px}
.kt-the{border:1px solid var(--line); border-left:3px solid var(--warn); border-radius:12px; padding:11px 13px; background:var(--surface-2)}
.kt-the.xong{border-left-color:var(--ok)}
.kt-the.tre{border-left-color:var(--bad)}
.kt-phu{font-size:12.5px; color:var(--ink-2); margin-top:5px; line-height:1.55}
.kt-binh{margin-top:9px; padding-top:9px; border-top:1px dashed var(--line)}
.kt-binh-co{display:flex; gap:7px; align-items:flex-start; font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-bottom:6px}
.kt-binh-co svg{flex:none; margin-top:2px; color:var(--muted)}

/* Ô gõ nhanh trong hộp báo việc cho kỹ thuật */
.kt-nhanh{border:1px dashed var(--gold-lt); border-radius:12px; padding:11px 13px;
  background:color-mix(in srgb, var(--gold) 7%, transparent)}
.kt-nhanh .fld{display:flex; align-items:center; gap:6px}
.kt-nhanh textarea{width:100%}

/* Ảnh trong thẻ sự cố: để riêng một hàng, nhãn nhỏ phía trên */
.sc-anh{display:flex; gap:18px; flex-wrap:wrap; margin-top:9px}
.sc-anh > div{display:flex; flex-direction:column; gap:5px}
.sc-anh small{font-size:11px; color:var(--muted); font-weight:600}

/* Tên chi nhánh trên thẻ việc kỹ thuật — đứng trước số phòng cho dễ nhận */
.kt-cn{display:inline-block; margin-right:7px; padding:1px 8px; border-radius:7px;
  background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--gold-dk);
  font-size:11.5px; font-weight:800; letter-spacing:.02em; vertical-align:1px}

/* Khối "Ai báo cáo gì hôm nay" — mỗi người một hàng, mục đã báo là các chip bấm được */
.ai-ds{display:flex; flex-direction:column; gap:12px}
.ai-dong{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.ai-ten{min-width:170px}
.ai-ten b{display:block; font-size:13.5px}
.ai-ten small{display:block; font-size:11.5px; color:var(--muted); margin-top:2px}
.ai-chips{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:200px}
.ai-chip{cursor:pointer; border:1px solid transparent; font:inherit}
.ai-chip:hover{border-color:var(--gold-lt)}
.ai-chip small{opacity:.7; font-weight:600}

/* Bảng link báo cáo của từng chi nhánh */
.bl-link{display:inline-flex; gap:6px; align-items:center; text-decoration:none; color:var(--gold-dk); font-weight:700; font-size:13px}
.bl-link:hover{text-decoration:underline}
.bl-phu{font-size:11.5px; color:var(--muted); margin-top:3px; line-height:1.45}

/* ───────── Trang Báo cáo tuần ───────── */
.bc-loc .bd{padding:12px 14px}
.bc-loc-hang{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bc-nhom{display:flex;gap:6px}
.bc-o{display:flex;align-items:center;gap:7px;background:var(--card-2);border:1px solid var(--line);
  border-radius:10px;padding:5px 10px;color:var(--muted)}
.bc-o input,.bc-o select{border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;padding:2px 0;min-width:120px}
.bc-o select{min-width:150px}
.bc-ky{font-size:12.5px;color:var(--muted);font-weight:600}
.bc-nguon{display:flex;gap:8px;align-items:flex-start;margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.5}
.bc-nguon b{color:var(--ink-2)}
.bc-loi{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:12.5px;color:var(--bad);line-height:1.5}
.bc-muc{margin:20px 0 10px}
.bc-muc h2{display:flex;align-items:center;gap:9px;font-size:15px;margin:0;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.06em}
.bc-muc h2 svg{color:var(--gold)}
.bc-bang td .pill{font-size:11px}
.bc-kl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bc-kl-o ol{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.bc-kl-o li{font-size:13px;line-height:1.55;color:var(--ink-2)}
.bc-ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.bc-ol li{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.bc-trong{color:var(--muted);font-size:13px;margin:8px 0 0}
.bc-ds{display:flex;flex-direction:column;gap:9px;max-height:min(60vh,520px);overflow:auto}
.bc-dong{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;align-items:baseline;
  padding:9px 11px;background:var(--card-2);border:1px solid var(--line);border-radius:10px}
.bc-dong b{font-size:12.5px;color:var(--gold)}
.bc-nd{font-size:13px;color:var(--ink-2);line-height:1.5}
.bc-dong small{grid-column:2;font-size:11.5px;color:var(--muted)}
.bc-nx{white-space:pre-wrap;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.bc-in-dau{display:none}
/* Ô dán đường dẫn: ô nhập dài + nút Dán đứng cạnh */
.dan-hang{display:flex;gap:8px;align-items:center}
.dan-hang input{flex:1;min-width:0}
.dan-mach{display:block;margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.5}
@media (max-width:900px){
  .bc-kl{grid-template-columns:1fr}
  .bc-dong{grid-template-columns:1fr}
  .bc-dong small{grid-column:1}
}
/* Thẻ doanh thu + công suất của từng chi nhánh */
.cn-luoi{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:11px}
.cn-the{display:block; text-align:left; width:100%; font:inherit; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--card-2); color:var(--ink)}
.cn-the:hover{border-color:var(--gold-lt)}
.cn-the.trong{opacity:.55}
.cn-the-dau{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.cn-the-dau b{font-size:13px; color:var(--gold)}
.cn-the-dau small{font-size:10.5px; color:var(--muted)}
.cn-the-dt{font-size:20px; font-weight:800; line-height:1.15; margin-top:5px; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cn-the-cs{display:flex; align-items:center; gap:8px; margin-top:7px; font-size:12px; font-weight:700}
.cn-thanh{flex:1; height:7px; border-radius:4px; background:var(--line); overflow:hidden}
.cn-thanh i{display:block; height:100%; border-radius:4px}
.cn-the-phu{font-size:11.5px; color:var(--muted); margin-top:5px}

/* Cảnh báo tuột số */
.ts-ds{display:flex; flex-direction:column; gap:9px}
.ts-dong{display:grid; grid-template-columns:150px 1fr auto; gap:12px; align-items:center;
  padding:9px 11px; border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:10px; background:var(--card-2)}
.ts-dong.nang{border-left-color:var(--bad)}
.ts-cn{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
.ts-cn b{font-size:13.5px}
.ts-lech{font-size:12.5px; font-weight:700}
.ts-lech.xuong{color:var(--bad)}
.ts-lech.len{color:var(--ok)}
.ts-ly{display:flex; gap:6px; flex-wrap:wrap}
.ts-ly .pill{font-size:11.5px}
@media (max-width:760px){ .ts-dong{grid-template-columns:1fr} .ts-nut{justify-self:start} }

/* Hai bảng ở Tổng quan: góp ý nhắc nhiều nhất · lời khen nổi bật */
.yk-hai{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px}
.yk-hai>.panel{margin:0}
.yk-top{list-style:none; counter-reset:yk; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.yk-top li{counter-increment:yk; position:relative; padding:8px 10px 8px 34px; border-radius:9px;
  background:var(--card-2); border-left:3px solid var(--bad)}
.yk-top li.tot{border-left-color:var(--ok)}
.yk-top li:before{content:counter(yk); position:absolute; left:9px; top:8px; width:18px; height:18px;
  border-radius:50%; background:var(--bad); color:#fff; font-size:10.5px; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.yk-top li.tot:before{background:var(--ok)}
.yk-top-dau{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.yk-top-dau b{font-size:12.5px; color:var(--ink)}
.yk-top-phu{font-size:11px; color:var(--muted)}
.yk-top-cn{font-size:11px; color:var(--muted); margin-top:2px}
.yk-top-nd{font-size:12px; color:var(--ink-2); line-height:1.5; margin-top:4px; font-style:italic}
@media (max-width:900px){ .yk-hai{grid-template-columns:1fr} }
@media print{
  .yk-hai{grid-template-columns:1fr 1fr !important; gap:8px !important}
  .yk-top li{background:#fff !important; border:1px solid #C9D1DC !important;
    border-left:3px solid #C8A24A !important; break-inside:avoid; padding:5px 8px 5px 30px !important}
  .yk-top li:before{background:#0B1B33 !important; color:#F3D98B !important}
  .yk-top-nd{font-size:10.5px !important}
}

/* Sổ ý kiến mở theo chi nhánh */
.yk-cn-hang:hover td{background:var(--card-2)}
.yk-ct{padding:10px 12px; background:var(--card-2); border-top:1px solid var(--line)}
.yk-ct-nhom{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px}
.yk-ct-ds{display:flex; flex-direction:column; gap:5px; max-height:280px; overflow:auto}
.yk-ct-dong{display:grid; grid-template-columns:52px 1fr auto; gap:9px; align-items:baseline;
  font-size:12px; padding:5px 8px; border-radius:7px; border-left:3px solid var(--bad); background:var(--card)}
.yk-ct-dong.tot{border-left-color:var(--ok)}
.yk-ct-ngay{color:var(--muted); font-size:11px}
.yk-ct-nd{color:var(--ink-2); line-height:1.5}
.yk-ct-dong small{color:var(--muted); font-size:11px; white-space:nowrap}
@media (max-width:700px){ .yk-ct-dong{grid-template-columns:1fr} .yk-ct-dong small{white-space:normal} }

/* Hướng dẫn quét chữ bằng điện thoại — cách miễn phí, không cần khoá API */
.yk-quet{border:1px dashed var(--line); border-radius:10px; padding:10px 12px; background:var(--card-2)}
.yk-quet-dau{display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--ink-2)}
.yk-quet-ds{margin:7px 0 9px; padding-left:20px; display:flex; flex-direction:column; gap:3px}
.yk-quet-ds li{font-size:12px; color:var(--muted); line-height:1.5}

.yk-doc{width:100%; justify-content:center; font-size:14px; padding:11px 14px}
.yk-doc-phu{font-size:11.5px; color:var(--muted); text-align:center; margin-top:5px; line-height:1.5}

/* Xem trước khi nhập phiếu ý kiến giấy */
.yp-xem{display:flex; flex-direction:column; gap:5px; max-height:220px; overflow:auto;
  border:1px solid var(--line); border-radius:9px; padding:8px; background:var(--card-2)}
.yp-dong{display:grid; grid-template-columns:auto 42px 1fr; gap:8px; align-items:baseline; font-size:12px}
.yp-dong .pill{font-size:10.5px; padding:1px 7px}
.yp-dong b{color:var(--gold)}
.yp-dong span:last-child{color:var(--ink-2); line-height:1.45}

/* ───────── Sổ ý kiến khách hàng ───────── */
.yk-thanh{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.yk-ds{display:flex; flex-direction:column; gap:10px; max-height:min(66vh,620px); overflow:auto}
.yk-dong{border:1px solid var(--line); border-left:3px solid var(--bad); border-radius:10px; padding:9px 11px; background:var(--card-2)}
.yk-dong.tot{border-left-color:var(--ok)}
.yk-dau{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px}
.yk-dau b{color:var(--gold)}
.yk-ng{font-size:11.5px; color:var(--muted)}
.yk-gio{font-size:11.5px; color:var(--muted); text-align:right}
.yk-sao{color:var(--gold); font-size:12px; letter-spacing:1px}
.yk-sao i{color:var(--line); font-style:normal}
.yk-nd{font-size:13px; line-height:1.55; color:var(--ink-2); margin-top:6px; white-space:pre-wrap}
.yk-anh{margin-top:8px}
.yk-kq{display:flex; gap:7px; align-items:flex-start; margin-top:7px; font-size:12px; color:var(--ok); line-height:1.5}
.yk-kq.cho{color:var(--warn)}
.yk-ft{display:flex; gap:8px; align-items:center; margin-top:8px}
.yk-ft small{font-size:11px; color:var(--muted)}
@media (max-width:700px){ .yk-gio{text-align:left; width:100%} }

/* ───────── Bảng nhập doanh thu ─────────
 * Dựng theo đúng bảng leader quen nhìn trong file Google: đầu bảng nền vàng, ô
 * nhập nền vàng nhạt, cột tự tính để chữ mờ cho khỏi lẫn với ô phải gõ. */
/* Gọn hết mức có thể: 10 cột vừa một trang, dòng thấp, không phải cuộn ngang */
.dt-bang{min-width:0; width:100%; table-layout:fixed}
.dt-bang thead th{background:linear-gradient(180deg,#E8C86A,#D9B457); color:#2A2008 !important;
  font-size:10px; line-height:1.25; text-transform:none; letter-spacing:0; text-align:center;
  padding:5px 3px; white-space:normal; word-break:break-word}
.dt-bang thead th:first-child{text-align:left; width:62px}
.dt-bang td{text-align:right; padding:2px 3px; font-size:11.5px}
.dt-bang td:first-child{text-align:left; white-space:nowrap; line-height:1.15}
.dt-bang td:first-child b{font-size:12px}
.dt-thu{display:block; font-size:9.5px; color:var(--muted); font-weight:500}
/* Luật chung "select,input[type=text]…" có độ ưu tiên cao hơn một class trơn, nên phải
 * viết đủ input.dt-o — không thì ô nhập vẫn ăn cỡ chữ 13,5px và padding 12px của luật
 * chung, chữ "42" cũng bị cắt thành "4..". */
input.dt-o{width:100%; min-width:0; text-align:right; font:inherit; font-size:11px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; text-overflow:ellipsis;
  background:var(--gold-bg,#FFF8E6); border:1px solid var(--line); border-radius:5px; padding:2px 4px; color:var(--ink)}
/* Cột tiền cần rộng hơn cột đếm — "16.105.000" phải nằm trọn trong ô */
.dt-bang col.c-ngay{width:7%}
.dt-bang col.c-dem{width:8%}
.dt-bang col.c-pc{width:6.5%}
.dt-bang col.c-tien{width:15.5%}
/* Bảng chốt tháng có tới ba cột tiền (doanh thu giờ, tổng doanh thu, mục tiêu) —
 * nới rộng ra cho số "995.472.000" nằm trọn, bớt lại mấy cột đếm và tỷ lệ. */
.dt-tong col.c-tien{width:17%}
.dt-tong col.c-dem{width:11%}
.dt-tong col.c-pc{width:8.5%}
.dt-tong col.c-ngay{width:9%}
input.dt-o:focus{outline:2px solid var(--gold); outline-offset:-1px; background:var(--card)}
input.dt-o.co{font-weight:700}
.dt-xem{font-variant-numeric:tabular-nums}
.dt-tinh{color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums}
.dt-nay td{background:rgba(200,162,74,.10)}
.dt-ct td{background:rgba(47,111,237,.05)}
.dt-cong td{border-top:2px solid var(--gold) !important; font-weight:700; background:var(--card-2)}
.dt-tong tbody td{font-size:12.5px; padding:6px 6px}
.dt-tong thead th{font-size:10px}
/* Biểu đồ cột + đường */
.bd-do{padding:2px 0}
.do-tieu{font-size:12.5px; font-weight:800; letter-spacing:.04em; color:var(--ink-2); margin-bottom:8px}
.do-chu{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:6px; font-size:11.5px; color:var(--muted)}
.do-chu i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px}
/* ───── Nhập doanh thu trên điện thoại ─────
 * Bảng 10 cột nhét vào màn hình rộng 375px thì ô nhập còn bằng đầu đũa, nhãn bị bóp
 * xuống ba dòng — chị em không gõ được. Nên từ 760px trở xuống: mỗi ngày gập lại
 * thành một THẺ, bên trong xếp hai cột, nhãn nằm trên ô. Ô tiền chiếm trọn bề ngang
 * vì số dài. Cỡ chữ ô nhập để 16px — dưới 16px là iPhone tự phóng to trang lên khi
 * chạm vào ô, nhảy màn hình rất khó chịu. */
@media (max-width:980px){
  /* table.tbl ở trên đặt min-width:880px cho bảng rộng cuộn ngang được — bảng nhập
   * thì không được cuộn ngang, phải vừa đúng bề ngang màn hình. Viết đủ
   * table.dt-bang cho đủ mạnh để đè lên nó. */
  table.dt-bang{min-width:0 !important; width:100%; max-width:100%; table-layout:auto; display:block}
  /* Bảng này không cần cuộn ngang nữa — bỏ luôn chỗ chừa cho thanh cuộn để
   * lấy thêm bề ngang cho ô nhập, và để vuốt dọc không bị kẹt ngang. */
  .bd:has(> table.dt-bang),.tbl-wrap:has(> table.dt-bang){overflow-x:visible; scrollbar-gutter:auto; padding-left:0; padding-right:0}
  .dt-bang colgroup,.dt-bang col{display:none}
  .dt-bang thead{display:none}
  .dt-bang tbody{display:block}
  .dt-bang tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:9px 12px;
    border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:11px 13px;
    background:var(--card); content-visibility:auto; contain-intrinsic-size:auto 230px}
  .dt-bang tbody td{display:block; padding:0; border:0 !important; text-align:left; font-size:13px}
  /* Dòng đầu thẻ: ngày + thứ + nguồn số */
  .dt-bang tbody td:first-child{grid-column:1/-1; display:flex; align-items:baseline; gap:9px;
    padding-bottom:8px; margin-bottom:1px; border-bottom:1px solid var(--line) !important}
  .dt-bang tbody td:first-child b{font-size:15.5px}
  .dt-thu{display:inline; font-size:11.5px}
  .dt-bang td.o-nhap:before,.dt-bang td.o-tinh:before{content:attr(data-nhan); display:block;
    font-size:11px; line-height:1.3; color:var(--muted); margin-bottom:4px}
  .dt-bang td.o-tien{grid-column:1/-1}
  .dt-bang td.o-nhap input.dt-o{width:100%; max-width:none; font-size:16px; line-height:1.3;
    padding:9px 11px; border-radius:9px; text-align:right; letter-spacing:0}
  .dt-bang td.o-tinh .dt-tinh,.dt-bang td.o-tinh .dt-xem{display:block; font-size:15px; font-weight:700;
    color:var(--ink-2); padding:9px 0 0}
  .dt-bang td.o-nhap .dt-xem{display:block; font-size:15px; font-weight:700; padding:9px 0 0}
  /* Dòng Cộng và bảng chốt tháng cũng là thẻ, nhưng đóng khung vàng cho nổi */
  .dt-bang tbody tr.dt-cong{border:2px solid var(--gold); background:var(--card-2)}
  .dt-bang tbody tr.dt-cong td{font-weight:700}
  .dt-bang tbody tr.dt-cong td:first-child b{font-size:14px}
  .dt-tong tbody tr{border:2px solid var(--gold)}
  .dt-tong tbody td{font-size:13px; padding:0}
  .dt-nay{outline:2px solid var(--gold); outline-offset:1px}
}

/* ───────── Trang bìa và ô ghi nhận của bản in / PDF ─────────
 * Bản PDF gửi đi dùng đúng màu nhà: nền xanh than #0B1B33 và vàng #C8A24A. Trên
 * màn hình thì ẩn hết, chỉ hiện khi in. */
.bc-in-dau,.bc-in-cuoi{display:none}
.in-dau-hang{display:flex; gap:16px; align-items:center; background:#0B1B33; color:#fff;
  padding:12px 16px; border-radius:8px 8px 0 0; border-bottom:3px solid #C8A24A}
.in-logo{height:44px; width:auto}
.in-tieu h1{margin:0; font-size:18px; letter-spacing:.04em; color:#F3D98B !important}
.in-tieu p{margin:3px 0 0; font-size:12.5px; color:#E8ECF3 !important}
.in-tieu .in-phu{font-size:11px; color:#A9B6C8 !important}
.in-o-hang{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid #0B1B33; border-top:0}
.in-o{padding:9px 12px; border-right:1px solid #D7DDE6}
.in-o:last-child{border-right:0}
.in-o-n{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#6B7A90 !important; font-weight:700}
.in-o-v{font-size:17px; font-weight:800; color:#0B1B33 !important; margin-top:3px}
.in-o-p{font-size:10px; color:#6B7A90 !important; margin-top:1px}
.in-nguon{margin-top:9px; font-size:10px; color:#4A5668 !important; line-height:1.55;
  border-left:3px solid #C8A24A; background:#FBF6E8; padding:6px 10px; border-radius:0 5px 5px 0}

/* Ô ghi nhận vận hành — chừa dòng kẻ để họp xong ghi tay */
.gn-khoi{border:1px solid #0B1B33; border-radius:7px; margin-top:12px; padding:0 0 10px; break-inside:avoid}
.gn-dau{background:#0B1B33; color:#F3D98B !important; font-size:11px; font-weight:800;
  letter-spacing:.1em; padding:5px 11px; border-radius:6px 6px 0 0}
.gn-phu{font-size:10px; color:#6B7A90 !important; padding:6px 11px 2px}
.gn-ke{height:19px; margin:0 11px; border-bottom:1px dotted #9AA7B8}
.gn-hang{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; break-inside:avoid}
.gn-ky{text-align:center}
.gn-ky-ten{font-size:11px; font-weight:800; color:#0B1B33 !important; letter-spacing:.04em}
.gn-ky-cho{font-size:9.5px; color:#6B7A90 !important; margin-top:2px; padding-bottom:52px;
  border-bottom:1px solid #0B1B33}

/* ───────── In ra giấy / xuất PDF ─────────
 * Chữ đen nền trắng cho sắc nét, điểm nhấn xanh than và vàng cho đúng nhận diện,
 * mỗi khối không bị cắt ngang trang, bảng có kẻ rõ. */
@media print{
  @page{ size:A4; margin:12mm 10mm 14mm; }
  html,body{background:#fff !important}
  .side,.dt-duoi,.topbar,.no-print,.tabs,.bc-loc,.toast-wrap,.modal-scrim,.modal,
  .dt-ve,.cv-ft,.bc-tim,button[data-act]:not(.stat){display:none !important}
  .shell{display:block !important; grid-template-columns:none !important}
  .main,.wrap{display:block !important; margin:0 !important; padding:0 !important; background:#fff !important;
    width:100% !important; max-width:none !important}
  .page{padding:0 !important; max-width:none !important; width:100% !important}
  .page-head{display:none !important}
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; color:#111 !important }
  .bc-in-dau{display:block; margin-bottom:14px}
  .bc-in-cuoi{display:block; margin-top:16px}
  /* Tiêu đề mục: dải vàng cho dễ phân đoạn khi đọc trên giấy */
  .bc-muc{margin:15px 0 7px; break-after:avoid; page-break-after:avoid}
  .bc-muc h2{font-size:11.5px; color:#0B1B33 !important; letter-spacing:.12em;
    border-left:4px solid #C8A24A; padding:2px 0 2px 8px; border-bottom:0}
  .bc-muc h2 svg{display:none}
  .panel{break-inside:avoid; page-break-inside:avoid; border:1px solid #C9D1DC !important;
    background:#fff !important; box-shadow:none !important; border-radius:6px; margin-bottom:9px}
  .panel>header{background:#0B1B33 !important; border-bottom:2px solid #C8A24A !important; padding:6px 10px !important}
  .panel>header h3{font-size:12px !important; color:#F3D98B !important; letter-spacing:.03em}
  .panel>header div,.panel>header span,.panel>header b{color:#C7D2E0 !important}
  .panel>header .ic{display:none}
  .bd{padding:9px 10px !important}
  /* Ô số: thẻ nhỏ gọn viền vàng, 4 ô một hàng */
  .stats{display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:7px !important; margin-bottom:8px !important}
  .stat{border:1px solid #C9D1DC !important; border-left:3px solid #C8A24A !important;
    background:#fff !important; padding:7px 9px !important; border-radius:5px; break-inside:avoid; box-shadow:none !important}
  .stat .ico{display:none}
  .stat .v{font-size:14.5px !important; font-weight:800; color:#0B1B33 !important}
  .stat .v.dai{font-size:13px !important}
  .stat .v.rat-dai{font-size:11.5px !important}
  .stat .l{font-size:9.5px !important; color:#5A6676 !important}
  /* Bảng: đầu bảng xanh than chữ vàng, lặp lại ở mỗi trang */
  .tbl-wrap{overflow:visible !important}
  .tbl{width:100% !important; font-size:10px !important; border-collapse:collapse !important}
  .tbl thead{display:table-header-group}
  .tbl th,.tbl td{border:1px solid #C9D1DC !important; padding:3.5px 6px !important}
  .tbl thead th{background:#0B1B33 !important; color:#F3D98B !important; font-size:9.5px !important;
    text-transform:uppercase; letter-spacing:.04em}
  .tbl tbody tr:nth-child(even) td{background:#F7F9FC !important}
  .tbl tr{break-inside:avoid; page-break-inside:avoid}
  .pill{border:1px solid #B9C3D1 !important; background:#fff !important; font-size:9px !important; padding:1px 5px !important}
  .pill .dot{display:none}
  svg{break-inside:avoid; page-break-inside:avoid; max-width:100% !important}
  svg text{fill:#333 !important}
  /* Kết luận: ba cột xếp dọc, viền vàng */
  .bc-kl{grid-template-columns:1fr !important; gap:8px !important}
  .bc-kl-o{border:1px solid #C9D1DC; border-left:3px solid #C8A24A; border-radius:5px; padding:7px 10px; break-inside:avoid}
  .bc-kl-o li,.bc-ol li{font-size:11px !important}
  .bc-ds,.yk-ds,.yk-ct-ds{max-height:none !important; overflow:visible !important}
  .bc-dong,.yk-dong{border:1px solid #DCE3EC !important; background:#fff !important; padding:5px 8px !important; break-inside:avoid}
  .bc-nd{font-size:10.5px !important}
  .bc-dong small{font-size:9.5px !important; color:#6B7A90 !important}
  .bc-nguon,.bc-loi{font-size:9.5px !important}
  .notice{border:1px solid #DCE3EC !important; background:#FBF6E8 !important; font-size:10px !important}
  .cn-luoi{grid-template-columns:repeat(4,1fr) !important; gap:7px !important}
  .cn-the{border:1px solid #C9D1DC !important; background:#fff !important; padding:7px 9px !important}
  .cn-the-dt{font-size:14px !important; color:#0B1B33 !important}
  .ts-dong{border:1px solid #C9D1DC !important; background:#fff !important}
  textarea[data-bc-nx]{border:1px solid #C9D1DC !important; background:#fff !important; min-height:56px}
  a[href]:after{content:""}
  .bc-trang:after{content:"Lion Hotel \00b7 B\00e1o c\00e1o \0111i\1ec1u h\00e0nh \2014 in t\1eeb ph\1ea7n m\1ec1m C\1ea3nh b\00e1o V\1eadn h\00e0nh";
    display:block; margin-top:12px; padding-top:6px; border-top:2px solid #C8A24A;
    font-size:9px; color:#6B7A90 !important; text-align:center; letter-spacing:.04em}
}

/* Ô đã chốt theo bản báo cáo tháng — viền xanh cho biết đây là số chốt, không phải cộng từ ngày */
input.dt-o.chot{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 9%, transparent)}
/* Câu lễ tân thuật lại — in thẳng, không bỏ trong ngoặc kép như lời khách nói */
.yk-top-nd.thuat{font-style:normal; color:var(--muted)}
.yk-top-phu.yk-thuat{border:1px solid var(--line); border-radius:20px; padding:0 6px; font-size:10px}

/* ───── Ô nhập KPI tháng ─────
 * Hai ô leader gõ bên trái, mũi tên, rồi ba ô phần mềm tự tính — nhìn là hiểu
 * số tiền phải đạt từ đâu mà ra. */
.mtg-khoi{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); padding-bottom:14px !important}
.mtg-hop{flex:1 1 168px; min-width:158px; border:1px solid var(--line); border-radius:10px; padding:9px 11px;
  background:var(--card-2); display:flex; flex-direction:column; gap:3px}
.mtg-hop > label{font-size:11px; color:var(--muted); letter-spacing:.02em}
.mtg-hop small{font-size:10.5px; color:var(--muted); line-height:1.35}
.mtg-gt{display:flex; align-items:baseline; gap:5px; min-height:30px}
.mtg-gt > b{font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums}
.mtg-hau{font-size:12px; color:var(--muted); font-weight:700}
input.mtg-o{flex:1; min-width:0; width:100%; font:inherit; font-size:15px; letter-spacing:-.01em; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; background:var(--gold-bg,#FFF8E6); border:1px solid var(--line);
  border-radius:8px; padding:4px 8px; color:var(--ink)}
input.mtg-o:focus{outline:2px solid var(--gold); outline-offset:-1px; background:var(--card)}
.mtg-ra,.mtg-ket{background:transparent; border-style:dashed}
.mtg-mui{display:flex; align-items:center; color:var(--muted); flex:0 0 auto}
.mtg-nhac{flex:1 1 100%; display:flex; gap:7px; align-items:flex-start; font-size:11.5px; color:var(--muted);
  background:var(--card-2); border-radius:9px; padding:8px 11px}
@media (max-width:760px){
  .mtg-khoi{gap:8px}
  .mtg-hop{flex:1 1 calc(50% - 4px); min-width:0}
  .mtg-mui{display:none}
  .mtg-nhac{flex-basis:100%}
}

/* Số phần mềm tự điền (số phòng mặc định của chi nhánh) — nhạt hơn số leader gõ,
 * để nhìn là biết ô nào mình đã chốt, ô nào phần mềm đang đoán hộ. */
input.dt-o.md{background:transparent; border-style:dashed; color:var(--muted); font-weight:500}
input.dt-o.md:focus{background:var(--card); color:var(--ink); border-style:solid}

/* Ô KPI phần mềm tự tính — viền đứt, chữ nhạt, giống ô số phòng mặc định */
input.mtg-o.md{background:transparent; border-style:dashed; color:var(--ink-2); font-weight:600}
input.mtg-o.md:focus{background:var(--card); color:var(--ink); border-style:solid}

/* Thanh tiến độ nhỏ dưới cột "Dự kiến đạt" — nhìn phát thấy chi nhánh nào hụt */
.kpi-thanh{height:4px; border-radius:3px; background:var(--line); margin-top:4px; overflow:hidden; min-width:60px}
.kpi-thanh i{display:block; height:100%; border-radius:3px}
/* Dòng ngày đã khóa / đang mở sửa */
.dt-sua{margin-left:6px; border:1px solid var(--line); background:var(--card-2); color:var(--muted);
  border-radius:6px; padding:1px 4px; cursor:pointer; line-height:0; vertical-align:middle}
.dt-sua:hover{color:var(--gold); border-color:var(--gold)}
.dt-khoa td{background:var(--card-2)}
.dt-mo td{background:color-mix(in srgb, var(--gold) 8%, transparent)}

/* Dòng số liệu bất thường — bôi màu để người kiểm nhìn phát thấy, không tự sửa số */
tr.dt-la td{background:color-mix(in srgb, var(--bad) 12%, transparent) !important}
tr.dt-la td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.dt-la-co{display:inline-flex; color:var(--bad); vertical-align:middle; margin-left:5px}
.dt-la-nd{display:block; font-size:9.5px; line-height:1.3; color:var(--bad); font-weight:600; margin-top:1px}
@media (max-width:980px){ .dt-la-nd{font-size:11px} }

/* Dải nhắc chi nhánh bỏ trống doanh thu — đỏ, nằm ngay đầu trang của leader */
.tre-dt{display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; padding:13px 16px;
  border:1px solid var(--bad); border-left:4px solid var(--bad); border-radius:12px;
  background:color-mix(in srgb, var(--bad) 10%, transparent)}
.tre-dt > i{color:var(--bad); display:flex; flex:none; margin-top:1px}
.tre-dt > div{flex:1; min-width:0}
.tre-dt b{display:block; font-size:13.5px; color:var(--ink)}
.tre-dt p{margin:3px 0 0; font-size:12px; color:var(--ink-2); line-height:1.5}
.tre-dt .btn{flex:none; align-self:center}
@media (max-width:760px){ .tre-dt{flex-wrap:wrap} .tre-dt .btn{width:100%; justify-content:center} }

/* Ô giao KPI trên trang theo dõi của công ty */
input.kpi-o{width:56px; font:inherit; font-size:13px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; background:var(--gold-bg,#FFF8E6); border:1px solid var(--line);
  border-radius:7px; padding:3px 6px; color:var(--ink)}
input.kpi-o:focus{outline:2px solid var(--gold); outline-offset:-1px; background:var(--card)}
.kpi-pt{font-size:11.5px; color:var(--muted); margin-left:3px; font-weight:700}

/* Ô giao tỷ lệ KPI trên trang theo dõi của công ty */
input.kpi-o{width:52px; font:inherit; font-size:13px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; background:var(--gold-bg,#FFF8E6); border:1px solid var(--line);
  border-radius:7px; padding:3px 6px; color:var(--ink)}
input.kpi-o:focus{outline:2px solid var(--gold); outline-offset:-1px; background:var(--card)}
.kpi-pt{font-size:11.5px; color:var(--muted); margin-left:3px; font-weight:700}

/* Dòng còn bỏ trống ô nhập — vàng, nhẹ hơn dòng số liệu bất thường (đỏ) */
tr.dt-thieu td{background:color-mix(in srgb, var(--warn) 11%, transparent) !important}
tr.dt-thieu td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.dt-thieu-nd{display:block; font-size:9.5px; line-height:1.3; color:var(--warn); font-weight:600; margin-top:1px}
input.dt-o.thieu{border-color:var(--warn); border-style:dashed;
  background:color-mix(in srgb, var(--warn) 9%, transparent)}
input.dt-o.thieu:focus{border-style:solid; background:var(--card)}
@media (max-width:980px){ .dt-thieu-nd{font-size:11px} }

/* Nhãn nhỏ đứng trước nội dung ý kiến khách: số phòng và nguồn GG Map */
.yk-the{display:inline-block;margin:0 6px 2px 0;padding:1px 8px;border-radius:999px;
  font-size:11px;font-weight:700;line-height:1.6;white-space:nowrap;
  background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold)}
.yk-the.gg{background:transparent;color:#2F6FED;border-color:#2F6FED}