.topbar { min-height: 94px; height: auto; gap: 18px; }
.topbar-left { flex: 0 0 auto; }
.topbar-dashboard-widgets { --hw-accent:#1769d2; --hw-accent2:#52d7ff; --hw-soft:#eaf4ff; display:flex; align-items:center; justify-content:center; gap:12px; flex:1 1 auto; min-width:0; }
.header-calendar,.header-clock,.header-fuel { border:1px solid color-mix(in srgb,var(--hw-accent) 25%,transparent); background:linear-gradient(145deg,color-mix(in srgb,var(--hw-soft) 82%,white),white); box-shadow:0 8px 22px color-mix(in srgb,var(--hw-accent) 13%,transparent),inset 0 1px 0 #fff; color:var(--text); }
.header-calendar { position:relative; display:grid; grid-template-columns:42px auto; grid-template-rows:auto auto; align-items:center; min-width:218px; padding:9px 14px; border-radius:18px; overflow:hidden; }
.header-calendar::before { content:""; grid-row:1/3; width:34px; height:42px; border-radius:11px; background:linear-gradient(145deg,var(--hw-accent),var(--hw-accent2)); box-shadow:0 5px 12px color-mix(in srgb,var(--hw-accent) 30%,transparent); }
.header-calendar::after { content:attr(data-day); position:absolute; left:14px; top:26px; width:34px; text-align:center; color:#fff; font-size:18px; font-weight:900; }
.header-calendar strong { font-size:14px; white-space:nowrap; }
.header-calendar small { margin-top:3px; color:var(--muted); font-size:11px; white-space:nowrap; }
.header-clock { position:relative; width:67px; height:67px; flex:0 0 67px; border-radius:50%; padding:0; cursor:pointer; appearance:none; }
.header-clock::before { content:""; position:absolute; inset:7px; border-radius:50%; background:radial-gradient(circle at 38% 28%,#fff 0 9%,var(--hw-soft) 11% 58%,color-mix(in srgb,var(--hw-accent) 18%,#fff) 100%); box-shadow:inset 4px 5px 8px rgba(255,255,255,.85),inset -5px -6px 9px rgba(15,35,65,.14); }
.clock-hand { position:absolute; z-index:2; left:50%; bottom:50%; width:2px; border-radius:3px; background:var(--hw-accent); transform-origin:50% 100%; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.clock-hour { height:17px; }.clock-minute { height:23px; background:var(--hw-accent2); }.clock-second { height:25px; width:1px; background:#ef476f; }
.clock-pin { position:absolute; z-index:3; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:var(--hw-accent); border:2px solid white; }
.header-clock span.clock-label { position:absolute; z-index:4; left:50%; bottom:-7px; transform:translateX(-50%); font-size:9px; line-height:17px; padding:0 6px; border-radius:9px; background:var(--hw-accent); color:#fff; white-space:nowrap; }
.header-fuel { display:grid; grid-template-columns:32px auto; align-items:center; column-gap:8px; min-width:150px; padding:9px 13px; border-radius:17px; }
.header-fuel-icon { grid-row:1/3; font-size:24px; filter:drop-shadow(0 3px 4px color-mix(in srgb,var(--hw-accent) 30%,transparent)); }
.header-fuel small { color:var(--muted); font-size:10px; font-weight:800; }.header-fuel strong { color:var(--hw-accent); font-size:15px; white-space:nowrap; }
.header-fuel[data-state="error"] strong { color:var(--red); font-size:12px; white-space:normal; }
.sync-state { width:13px; min-width:13px; height:13px; overflow:hidden; font-size:0; padding:0; }
.sync-state i { width:9px; height:9px; display:block; border-radius:50%; }
.topbar-dashboard-widgets[data-style="2"] { --hw-accent:#b77900;--hw-accent2:#ffd36a;--hw-soft:#fff5d7; }
.topbar-dashboard-widgets[data-style="3"] { --hw-accent:#536170;--hw-accent2:#b9c7d5;--hw-soft:#edf2f6; }
.topbar-dashboard-widgets[data-style="4"] { --hw-accent:#07835f;--hw-accent2:#59e2b5;--hw-soft:#e1faf1; }
.topbar-dashboard-widgets[data-style="5"] { --hw-accent:#7938c7;--hw-accent2:#ef6bff;--hw-soft:#f5eaff; }
.topbar-dashboard-widgets[data-style="2"] .header-calendar,.topbar-dashboard-widgets[data-style="2"] .header-fuel { background:linear-gradient(135deg,#fffaf0,#fff0bd); }
.topbar-dashboard-widgets[data-style="3"] .header-clock { border-width:3px; }
.topbar-dashboard-widgets[data-style="4"] .header-calendar,.topbar-dashboard-widgets[data-style="4"] .header-fuel { backdrop-filter:blur(12px); background:linear-gradient(135deg,rgba(230,255,247,.85),rgba(255,255,255,.7)); }
.topbar-dashboard-widgets[data-style="5"] .header-clock { box-shadow:0 0 18px color-mix(in srgb,var(--hw-accent2) 55%,transparent),inset 0 0 8px #fff; }
[data-theme="dark"] .header-calendar,[data-theme="dark"] .header-clock,[data-theme="dark"] .header-fuel { background:linear-gradient(145deg,color-mix(in srgb,var(--hw-accent) 22%,#121b2a),#121b2a); box-shadow:0 9px 22px rgba(0,0,0,.3); }
@media (max-width:1350px) { .header-calendar{min-width:180px}.header-calendar strong{font-size:12px}.header-fuel{min-width:125px}.header-fuel strong{font-size:13px}.topbar-dashboard-widgets{gap:7px} }
@media (max-width:1100px) { .topbar-dashboard-widgets{justify-content:flex-end}.header-calendar{display:none}.header-fuel{min-width:118px}.topbar-actions .soft-button{display:none} }
@media (max-width:720px) { .topbar{min-height:78px;padding-top:env(safe-area-inset-top);gap:5px}.topbar-left{flex:0 0 auto}.topbar-dashboard-widgets{justify-content:center;gap:5px}.header-calendar{display:grid;min-width:0;width:154px;padding:6px 8px;grid-template-columns:34px auto;border-radius:14px}.header-calendar::before{width:28px;height:36px;border-radius:9px}.header-calendar::after{left:8px;top:20px;width:28px;font-size:15px}.header-calendar strong{font-size:10px;overflow:hidden;text-overflow:ellipsis}.header-calendar small{font-size:8px;overflow:hidden;text-overflow:ellipsis}.header-clock{width:49px;height:49px;flex-basis:49px}.header-clock::before{inset:5px}.clock-hour{height:12px}.clock-minute{height:17px}.clock-second{height:19px}.header-clock span.clock-label{display:none}.header-fuel{display:none!important}.topbar-actions{gap:3px}.sync-state{display:none} }
@media (max-width:390px) { .header-calendar{width:134px}.header-calendar strong{font-size:9px}.header-calendar small{font-size:7px}.topbar-dashboard-widgets{gap:3px} }
/* V9.81: khung hieu ung thay dong ho. Noi dung do admin-header-effects-v981.js ve trong Shadow DOM; cho phep tran ra ngoai o (de len chu). */
.header-fx { --fx-size:70px; position:relative; z-index:6; flex:0 0 var(--fx-size); width:var(--fx-size); height:var(--fx-size); margin:0; padding:0; border:0; background:none; appearance:none; cursor:pointer; overflow:visible; }
.header-fx::before { content:""; position:absolute; inset:0; border-radius:50%; opacity:0; transition:opacity .3s; pointer-events:none; }
.header-fx[data-tone="dark"]::before { opacity:1; background:radial-gradient(circle at 35% 30%,#1b2b4d,#0a1226 70%); border:1px solid color-mix(in srgb,var(--hw-accent) 35%,transparent); box-shadow:0 8px 22px color-mix(in srgb,var(--hw-accent) 18%,transparent); }
[data-theme="dark"] .header-fx[data-tone="light"]::before { opacity:1; background:radial-gradient(circle at 35% 30%,#fff,#dbe6f5 75%); }
.header-fx-stage { position:absolute; inset:0; display:block; pointer-events:none; }
@media (max-width:720px) { .header-fx{--fx-size:49px} }
/* V9.80: o chu cai dau ten tren thanh tieu de thay bang vong quay (Uiverse spinner, thu tu 56px xuong 36px). Chu cai van nam trong the nhung an di. */
.nav-item > span > .nav-svg { display:block; margin:0 auto; }
/* V9.85: o ten nguoi dung - chu cai dau thay bang bieu tuong banh rang (tinh, khong quay). app.js van ghi chu cai vao the, CSS an chu di. */
.user-chip #topAvatar { font-size:0; }
.user-chip #topAvatar::before { content:""; width:21px; height:21px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82v0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
/* V9.86: cac o thong ke tren trang Booking gon lai - mot hang thap, nhan ben trai, so ben phai. */
.kpi-grid { gap:10px; margin-bottom:14px; }
.kpi-card { min-height:0; gap:11px; padding:10px 14px; border-radius:12px; box-shadow:none; }
.kpi-card:hover { transform:none; box-shadow:0 4px 14px rgba(25,48,84,.07); }
.kpi-card.active { box-shadow:inset 0 -2px 0 currentColor; }
.kpi-icon { width:32px; height:32px; flex:0 0 32px; border-radius:9px; font-size:15px; }
.kpi-card > div { flex:1; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label value" "note value"; align-items:center; column-gap:10px; row-gap:1px; }
.kpi-card small { grid-area:label; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.kpi-card em { grid-area:note; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--muted); }
.kpi-card strong { grid-area:value; margin:0; font-size:24px; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
@media (max-width:1250px) { .kpi-card em { display:none; } .kpi-card > div { grid-template-areas:"label value"; } }