/* Giỏ hàng SABAY – "Glass Atlas": nền sáng pha xanh, lớp kính mờ cho các bề mặt nổi (thanh bên, thanh trên, bảng, thẻ tòa nhà, ngăn chi tiết).
   Dữ liệu dày (bảng, dòng danh sách) giữ nền gần đặc để dễ đọc. Màu thương hiệu: #0000ff (chính), #03bcf4 (phụ). */
:root {
  /* tên cũ (--red, --red-soft…) giữ lại để khỏi đổi markup; --red nghĩa là xanh chủ đạo Sabay */
  --red: #0000ff; --red-dark: #0000b8; --red-soft: oklch(95.5% .03 270); --red-line: oklch(86% .07 270);
  --cyan: #03bcf4; --cyan-soft: oklch(95.5% .04 225);
  --danger: #c4161c; --danger-line: oklch(86% .07 25);
  --navy: oklch(24% .06 268); --text: oklch(32% .035 268); --muted: oklch(50% .03 268); --muted2: oklch(60% .025 268);
  --bg: oklch(96.8% .012 268); --card: oklch(99.4% .004 268); --line: oklch(90% .014 268); --line2: oklch(94% .01 268);
  --green: #0f7a43; --green-bg: oklch(94.5% .05 155); --orange: #a85f00; --orange-bg: oklch(95.5% .06 80);
  --held: #b4141f; --held-bg: oklch(94.5% .04 20); --blue: #0079a3; --blue-bg: var(--cyan-soft);

  /* kính */
  --glass: oklch(100% 0 0 / .62); --glass-strong: oklch(100% 0 0 / .8); --glass-edge: oklch(100% 0 0 / .75);
  --blur: blur(18px) saturate(1.5);
  --shadow: 0 1px 1px oklch(30% .08 268 / .04), 0 2px 6px oklch(30% .08 268 / .05), 0 14px 32px -12px oklch(30% .12 268 / .16);
  --shadow-lift: 0 2px 2px oklch(30% .08 268 / .05), 0 8px 18px oklch(30% .1 268 / .1), 0 26px 48px -16px oklch(30% .14 268 / .28);

  --font-display: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --radius: 14px; --radius-sm: 10px; --side: 272px; --dur: 160ms; --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 14px/1.45 "Be Vietnam Pro", "Segoe UI", Arial, sans-serif; color: var(--text); -webkit-font-smoothing: antialiased;
  background: var(--bg);
}
/* nền: ánh sáng xanh / cyan rất nhạt, cố định phía sau để kính có thứ để làm mờ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 8% -6%, oklch(82% .13 232 / .45), transparent 62%),
    radial-gradient(54vmax 42vmax at 100% 4%, oklch(66% .22 268 / .22), transparent 60%),
    radial-gradient(60vmax 40vmax at 62% 112%, oklch(84% .1 225 / .38), transparent 60%),
    var(--bg);
}
body.lock { overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.muted { color: var(--muted2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--red); color: #fff; padding: 8px 12px; z-index: 99; }
.skip:focus { left: 8px; top: 8px; }
.loading { position: fixed; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 12px 8px; padding: 20px; text-align: center; color: var(--muted); font-weight: 500; }
.spin { display: inline-block; width: 26px; height: 26px; margin-right: 10px; vertical-align: -8px; border: 3px solid var(--red-line); border-top-color: var(--red); border-radius: 50%; animation: sp .8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* bề mặt kính dùng chung */
.top, .side, .kpi, .toolbar, .advanced-filter, .panel, .bpanel, .mobile-bar {
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .side, .kpi, .toolbar, .advanced-filter, .panel, .bpanel, .mobile-bar, .drawer, .bmodal, .bcard { background: var(--card); }
}

/* ---- khung */
.app { display: flex; min-height: 100vh; }
.side { width: var(--side); border-width: 0 1px 0 0; border-right-color: oklch(100% 0 0 / .6); background: oklch(100% 0 0 / .55); padding: 22px 14px 18px; position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; box-shadow: 1px 0 0 var(--line2), 18px 0 40px -28px oklch(30% .14 268 / .3); }
.brand { padding: 2px 10px 18px; }
.logo { font: 800 28px/1 var(--font-display); color: var(--red); letter-spacing: .01em; }
.brand small { display: block; color: var(--muted); font-size: 10px; margin-top: 7px; letter-spacing: .08em; font-weight: 600; }
.nav { padding-top: 4px; }
.nav button { width: 100%; border: 0; background: transparent; text-align: left; padding: 10px 11px; border-radius: var(--radius-sm); color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 2px; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.nav button:hover { background: oklch(100% 0 0 / .7); }
.nav button.active { background: var(--red); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -6px oklch(45% .3 268 / .55), inset 0 1px 0 oklch(100% 0 0 / .22); }
.nav .icon { width: 22px; text-align: center; font-size: 15px; opacity: .85; }
.nav .count { margin-left: auto; background: var(--line2); color: var(--muted); border-radius: 999px; font-size: 11px; padding: 1px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav button.active .count { background: oklch(100% 0 0 / .22); color: #fff; }
.section-label { font-size: 10px; font-weight: 700; color: var(--muted2); letter-spacing: .12em; padding: 22px 11px 8px; }
.side-footer { margin-top: auto; padding: 12px 10px 52px; color: var(--muted); }
.side-footer strong { display: block; color: var(--red); font: 700 13px var(--font-display); }
.side-footer span { font-size: 11px; line-height: 1.4; }
.main { margin-left: var(--side); width: calc(100% - var(--side)); min-width: 0; }
.content { padding: 20px 28px 40px; max-width: 1720px; margin: auto; }

.top { position: sticky; top: 0; z-index: 20; min-height: 76px; border-width: 0 0 1px; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; gap: 12px; box-shadow: 0 10px 30px -22px oklch(30% .14 268 / .4); }
.titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.titleline { display: none; }
.title { margin: 0; font: 800 26px/1.15 var(--font-display); color: var(--navy); letter-spacing: -.02em; }
.subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.subtitle b { color: var(--text); font-weight: 600; }
.subtitle .sep { margin: 0 8px; color: var(--line); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.sync { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.sync i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent); }
.sync.ok { background: var(--green-bg); color: var(--green); }
.sync.warn { background: var(--orange-bg); color: var(--orange); }
.sync.wait { background: var(--blue-bg); color: var(--blue); }
.icon-btn { border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--muted); border-radius: var(--radius-sm); width: 40px; height: 40px; display: grid; place-items: center; font-size: 17px; flex: none; box-shadow: 0 1px 2px oklch(30% .08 268 / .08); transition: color var(--dur), transform var(--dur), box-shadow var(--dur); }
.icon-btn:hover { color: var(--red); box-shadow: var(--shadow); }
.icon-btn:active { transform: translateY(1px); }

/* ---- nút */
.btn { min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--glass-strong); color: var(--text); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.btn:hover { border-color: var(--red-line); background: #fff; box-shadow: 0 6px 16px -8px oklch(30% .14 268 / .3); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: 12px; }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 18px -8px oklch(45% .3 268 / .65), inset 0 1px 0 oklch(100% 0 0 / .2); }
.btn.primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn.soft { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.btn.ghost { background: transparent; }
.btn.photo { background: var(--blue-bg); border-color: oklch(86% .06 225); color: var(--blue); }
.btn.kit { background: var(--line2); color: var(--text); }
.btn.off { opacity: .5; cursor: default; pointer-events: none; }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.link-btn { border: 0; background: none; color: var(--red); font-weight: 600; padding: 8px 0; text-align: left; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.span2 { grid-column: 1 / -1; }

/* ---- chuyển chế độ (khay phân đoạn) */
.mode-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mode-switch, .subtabs, .view-toggle, .seg { display: flex; background: oklch(90% .02 268 / .55); border-radius: 12px; padding: 4px; gap: 3px; box-shadow: inset 0 1px 2px oklch(30% .08 268 / .08); }
.mode-switch button, .subtabs button, .view-toggle button, .seg button { border: 0; background: transparent; color: var(--muted); border-radius: 9px; padding: 8px 15px; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.mode-switch button:not(.active):hover, .subtabs button:not(.active):hover, .view-toggle button:not(.active):hover, .seg button:not(.active):hover { color: var(--navy); background: oklch(100% 0 0 / .5); }
.mode-switch button.active { background: var(--red); color: #fff; box-shadow: 0 6px 14px -6px oklch(45% .3 268 / .6); }
.subtabs button.active, .view-toggle button.active, .seg button.active { background: #fff; color: var(--red); box-shadow: 0 2px 8px oklch(30% .1 268 / .14); }
.mode-switch[hidden] { display: none; }
@media (min-width: 901px) { .mode-switch { display: none; } } /* thanh bên đã liệt kê đúng các danh mục này; chỉ giữ cho điện thoại / tablet */
.mode-switch { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }

/* ---- KPI */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); min-width: 0; text-align: left; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur); }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.kpi.on { border-color: var(--red); box-shadow: 0 0 0 3px oklch(55% .25 268 / .22), var(--shadow); }
.kpi-top { display: flex; align-items: center; gap: 12px; }
.kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; flex: none; background: var(--red-soft); color: var(--red); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .7); }
.kpi.green .kpi-icon { background: var(--green-bg); color: var(--green); }
.kpi.held .kpi-icon { background: var(--held-bg); color: var(--held); }
.kpi.orange .kpi-icon { background: var(--orange-bg); color: var(--orange); }
.kpi.blue .kpi-icon { background: var(--blue-bg); color: var(--blue); }
.kpi h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi .num { white-space: nowrap; font: 800 22px/1.1 var(--font-display); color: var(--navy); margin-top: 3px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi small { display: block; margin-top: 9px; color: var(--muted2); font-size: 12px; }

/* ---- bộ lọc */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); }
.toolbar select { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.toolbar select, .range input { min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; background: var(--card); transition: border-color var(--dur), box-shadow var(--dur); }
.toolbar select:hover, .range input:hover { border-color: var(--red-line); }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; min-height: 40px; background: var(--card); transition: border-color var(--dur), box-shadow var(--dur); }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; }
.search:focus-within, .toolbar select:focus-visible, .range input:focus-visible { border-color: var(--red); box-shadow: 0 0 0 3px oklch(55% .25 268 / .16); outline: 0; }
.tool-btn { min-height: 40px; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); padding: 0 14px; font-weight: 600; font-size: 13px; transition: border-color var(--dur), background var(--dur); }
.tool-btn:hover { border-color: var(--red-line); }
.tool-btn.on { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.tool-btn b { background: var(--red); color: #fff; border-radius: 999px; padding: 1px 7px; margin-left: 6px; font-size: 11px; }
.advanced-filter { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end; border-radius: var(--radius); padding: 14px; margin-top: 8px; box-shadow: var(--shadow); }
.filter-caption { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-weight: 500; }
.range { display: flex; gap: 6px; align-items: center; }
.range input { width: 120px; }
.statusbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.seg { flex-wrap: wrap; }
.seg button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; }
.seg button i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted2); }
.seg .s-available i { background: var(--green); } .seg .s-held i { background: var(--held); } .seg .s-expiring i { background: var(--orange); }
.seg b { background: oklch(30% .08 268 / .08); border-radius: 999px; padding: 0 7px; font-size: 11px; font-variant-numeric: tabular-nums; }
.seg button.active b { background: var(--red-soft); }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--red-line); background: var(--red-soft); color: var(--red); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 500; }
.filter-chip span { color: var(--muted); } .filter-chip em { font-style: normal; font-weight: 800; margin-left: 4px; }
.filter-chip.clear { background: var(--glass-strong); border-color: var(--line); color: var(--muted); }

/* ---- danh sách */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.panel { border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head strong { font: 700 17px var(--font-display); color: var(--navy); } .panel-head small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.summary-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.rightcol { display: grid; gap: 14px; position: sticky; top: 92px; }
.group { margin-bottom: 22px; }
.group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.group-name { border: 0; background: none; font: 700 16px var(--font-display); color: var(--navy); padding: 0; text-align: left; }
.group-name:hover { color: var(--red); }
.group-head > span { color: var(--muted); font-size: 12.5px; flex: 1; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
/* thẻ sản phẩm: gần đặc để đọc số liệu, nổi lên khi rê chuột */
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: oklch(100% 0 0 / .86); cursor: pointer; box-shadow: 0 1px 2px oklch(30% .08 268 / .05); transition: box-shadow var(--dur) var(--ease), border-color var(--dur), transform var(--dur) var(--ease); }
.card:hover { box-shadow: var(--shadow-lift); border-color: var(--red-line); transform: translateY(-2px); }
.card:active { transform: translateY(0); }
.card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.card-title h3 { margin: 0; font: 700 15px/1.25 var(--font-display); color: var(--navy); overflow-wrap: anywhere; }
.card-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.card-main { display: flex; justify-content: space-between; gap: 8px; margin: 14px 0 10px; align-items: flex-end; }
.card-main span { display: block; font-size: 11.5px; color: var(--muted); } .card-main b { font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; }
.card-main .r { text-align: right; } .card-price { color: var(--red); font-size: 18px !important; letter-spacing: -.01em; }
.card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.card-meta b { color: var(--text); }
.card-note { margin-top: 10px; font-size: 12px; color: var(--muted); background: var(--line2); border-radius: 8px; padding: 6px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px 3px 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--line2); color: var(--muted); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.available { background: var(--green-bg); color: var(--green); } .status.held { background: var(--held-bg); color: var(--held); } .status.expiring { background: var(--orange-bg); color: var(--orange); }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.table { width: 100%; border-collapse: collapse; min-width: 900px; }
.table th { background: oklch(97% .01 268); color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.table tbody tr[data-act]:hover td { background: oklch(97.5% .014 268); cursor: pointer; }
.table tfoot td { background: oklch(97% .01 268); font-weight: 700; }
.table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table .c { text-align: center; }
.table .price { color: var(--red); font-weight: 700; } .table .note { color: var(--muted); font-size: 12px; max-width: 220px; overflow-wrap: anywhere; }
.table .act { white-space: nowrap; } .table .act .btn { margin-right: 4px; }
.sticky-project { position: sticky; left: 0; background: var(--card); }
.project-link { border: 0; background: none; color: var(--navy); font-weight: 700; text-align: left; padding: 0; }
.project-link:hover { color: var(--red); }
.summary-count { display: inline-block; min-width: 28px; text-align: center; border-radius: 999px; padding: 2px 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.summary-count.available { background: var(--green-bg); color: var(--green); } .summary-count.held { background: var(--held-bg); color: var(--held); } .summary-count.expiring { background: var(--orange-bg); color: var(--orange); }
.summary-count.zero { background: var(--line2); color: var(--muted2); }

.side-head { display: flex; justify-content: space-between; margin-bottom: 12px; } .side-head strong { color: var(--navy); font: 700 15px var(--font-display); } .side-head span { color: var(--muted); font-size: 12px; }
.donut-wrap { display: grid; gap: 14px; justify-items: center; }
.donut { width: 156px; height: 156px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 10px 24px -12px oklch(30% .14 268 / .4); }
.donut-center { width: 96px; height: 96px; border-radius: 50%; background: oklch(100% 0 0 / .94); display: grid; place-content: center; text-align: center; font: 800 18px var(--font-display); color: var(--navy); box-shadow: inset 0 2px 6px oklch(30% .08 268 / .1); }
.donut-center small { font: 600 10px "Be Vietnam Pro", sans-serif; color: var(--muted); }
.legend { width: 100%; display: grid; gap: 2px; }
.legend button, .legend-rest { display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; padding: 6px 6px; font-size: 12.5px; border-radius: 8px; text-align: left; }
.legend button:hover { background: oklch(100% 0 0 / .7); } .legend span { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.attention-item { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line2); background: none; padding: 10px 4px; }
.attention-item:hover { background: oklch(100% 0 0 / .7); } .attention-line { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; } .attention-item small { color: var(--muted); display: block; margin-top: 3px; }
.empty { text-align: center; padding: 48px 20px; color: var(--muted); display: grid; gap: 8px; justify-items: center; }
.empty.small { padding: 14px; }
.empty-ic { font-size: 32px; color: var(--muted2); } .empty strong { color: var(--navy); font: 700 16px var(--font-display); }

/* ---- ngăn chi tiết + modal */
.overlay { position: fixed; inset: 0; background: oklch(24% .08 268 / .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 60; animation: fade var(--dur) linear; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(460px, 100vw); background: oklch(100% 0 0 / .86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-left: 1px solid var(--glass-edge); z-index: 61; display: flex; flex-direction: column; box-shadow: -24px 0 60px -20px oklch(30% .14 268 / .4); animation: slide-in 320ms var(--ease); }
.drawer-head { display: flex; justify-content: space-between; gap: 10px; padding: 20px 20px 16px; border-bottom: 1px solid var(--line); }
.drawer-head small { color: var(--red); font-weight: 700; letter-spacing: .1em; font-size: 10.5px; text-transform: uppercase; } .drawer-head h3 { margin: 4px 0; font: 800 20px/1.2 var(--font-display); color: var(--navy); } .drawer-head p { margin: 0; color: var(--muted); }
.drawer-body { padding: 18px 20px; overflow: auto; flex: 1; display: grid; gap: 14px; align-content: start; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-grid div, .detail-note, .detail-preview { background: oklch(97.5% .01 268 / .9); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 11px 12px; }
.detail-grid span, .detail-note > span, .detail-preview > span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; } .detail-grid b { overflow-wrap: anywhere; font-weight: 600; color: var(--navy); }
.detail-note p { margin: 0; overflow-wrap: anywhere; }
.detail-preview pre { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.detail-grid .price-red, .price-red { color: var(--red); font: 800 18px var(--font-display); }
.drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: oklch(100% 0 0 / .6); }
.bmodal { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(740px, 96vw); max-height: 90vh; overflow: auto; background: oklch(100% 0 0 / .88); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-lift); animation: pop 260ms var(--ease); }
.bm-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .bm-head h3 { margin: 0; font: 800 22px/1.2 var(--font-display); color: var(--navy); } .bm-head p { margin: 4px 0 0; color: var(--muted); }
.bdesc { white-space: pre-line; color: var(--muted); font-size: 12.5px; background: oklch(97.5% .01 268 / .9); border-radius: var(--radius-sm); padding: 11px 12px; margin: 0 0 14px; }
.btiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.btile { background: oklch(97.5% .01 268 / .9); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 11px 12px; } .btile span { display: block; font-size: 11.5px; color: var(--muted); } .btile b { font: 700 15px var(--font-display); color: var(--navy); }
.bpill { display: inline-flex; align-items: center; gap: 6px; } .bpill i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted2); }
.bs-open .bpill i { background: var(--green); } .bs-soon .bpill i { background: var(--orange); }
.bm-list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .bm-tools { display: flex; gap: 6px; }
.brow { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 6px; cursor: pointer; display: grid; gap: 6px; transition: border-color var(--dur), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.brow:hover { border-color: var(--red-line); box-shadow: var(--shadow); transform: translateY(-1px); }
.brow-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .brow-main em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.brow-num { display: flex; justify-content: space-between; color: var(--muted); } .brow-num b { color: var(--red); font-family: var(--font-display); } .brow-num small { color: var(--muted); font-weight: 400; }
.brow-note { color: var(--muted); font-size: 12px; } .brow-act { display: flex; gap: 6px; flex-wrap: wrap; }
.bm-full { text-align: center; padding: 28px; background: oklch(97.5% .01 268 / .9); border-radius: var(--radius-sm); display: grid; gap: 6px; color: var(--muted); } .bm-full strong { color: var(--navy); }

/* ---- tòa nhà (màn hình mở đầu): thẻ kính nổi trên nền ánh sáng */
.bpanel { border-radius: 18px; box-shadow: var(--shadow); padding: 22px; }
.bhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 18px; }
.btitle { display: flex; gap: 14px; align-items: flex-start; } .bnum { font: 800 34px/1 var(--font-display); color: var(--cyan); }
.btitle h2 { margin: 0; font: 800 24px/1.2 var(--font-display); color: var(--navy); letter-spacing: -.01em; } .bsum { margin: 6px 0 0; color: var(--muted); font-size: 13px; } .bsum b { color: var(--navy); font-weight: 700; }
.bsum i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--line); margin: 0 9px; vertical-align: middle; }
.bhint { color: var(--muted2); font-size: 12.5px; }
.bfilters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.blegend { display: flex; gap: 6px; flex-wrap: wrap; }
.bl { border: 1px solid var(--line); background: var(--glass-strong); border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: border-color var(--dur), background var(--dur); }
.bl:hover { border-color: var(--red-line); }
.bl i { width: 9px; height: 9px; border-radius: 50%; } .bl.bs-open i { background: var(--green); } .bl.bs-soon i { background: var(--orange); } .bl.bs-full i { background: var(--muted2); }
.bl b { background: oklch(30% .08 268 / .08); border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums; } .bl.on { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.bward { min-height: 38px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; background: var(--card); }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 16px; }
.bcard { position: relative; border: 1px solid var(--glass-edge); border-radius: 18px; background: oklch(100% 0 0 / .66); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: 0 0 16px; text-align: center; overflow: hidden; display: grid; box-shadow: var(--shadow); transition: box-shadow 240ms var(--ease), transform 240ms var(--ease), border-color var(--dur); }
.bcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: var(--red-line); }
.bcard:active { transform: translateY(-1px); }
.bimg { height: 126px; background: linear-gradient(180deg, oklch(93% .045 240), oklch(98% .01 250)); display: grid; place-items: center; } .bimg svg { height: 106px; }
.bring { position: absolute; right: 12px; top: 90px; width: 48px; height: 48px; background: #fff; border-radius: 50%; box-shadow: 0 6px 16px -4px oklch(30% .14 268 / .35); }
.bring svg { width: 48px; height: 48px; transform: rotate(-90deg); position: absolute; inset: 0; } .bring circle { fill: none; stroke-width: 4; } .bring .trk { stroke: var(--line); } .bring .val { stroke-linecap: round; stroke: var(--green); }
.bs-soon .bring .val { stroke: var(--orange); } .bs-full .bring .val { stroke: var(--muted2); }
.bring span { position: absolute; inset: 0; display: grid; place-content: center; line-height: 1; } .bring b { font: 800 14px var(--font-display); color: var(--navy); } .bring small { font-size: 8px; color: var(--muted); } .bring b.full { font-size: 10px; color: var(--muted); }
.bname { display: block; margin-top: 16px; padding: 0 12px; color: var(--navy); font: 700 14.5px/1.3 var(--font-display); overflow-wrap: anywhere; } .bsub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.bs-open .bsub { color: var(--green); font-weight: 600; } .bs-soon .bsub { color: var(--orange); font-weight: 600; } .bs-full { opacity: .78; }
.bempty { text-align: center; color: var(--muted); padding: 30px; }

.mobile-bar { display: none; }
.toast { position: fixed; left: 50%; bottom: 80px; transform: translate(-50%, 20px); background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity var(--dur), transform var(--dur) var(--ease); z-index: 99; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lift); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- quản trị */
.dlg { border: 1px solid var(--glass-edge); border-radius: 18px; padding: 22px; width: min(580px, 94vw); color: var(--text); background: oklch(100% 0 0 / .94); box-shadow: var(--shadow-lift); }
.dlg::backdrop { background: oklch(24% .08 268 / .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg-form { display: grid; gap: 12px; } .dlg-form h2 { margin: 0; font: 800 20px var(--font-display); color: var(--navy); }
.dlg-form .f { display: grid; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; }
.dlg-form .f input, .dlg-form .f select { min-height: 40px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 12px; background: var(--card); width: 100%; color: var(--text); }
.dlg-form .f textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; background: var(--card); width: 100%; color: var(--text); font: inherit; resize: vertical; }
.dlg-form .f input:focus-visible, .dlg-form .f select:focus-visible, .dlg-form .f textarea:focus-visible { border-color: var(--red); box-shadow: 0 0 0 3px oklch(55% .25 268 / .16); outline: 0; }
.dlg { max-height: 92vh; overflow-y: auto; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; } .err { color: var(--danger); margin: 0; min-height: 1em; font-weight: 600; }

/* ---- nút báo lỗi (Zalo) cố định góc dưới bên trái */
.bug-fab { position: fixed; left: 14px; bottom: 14px; z-index: 70; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; box-shadow: 0 10px 22px -6px oklch(45% .3 268 / .6), inset 0 1px 0 oklch(100% 0 0 / .25); transition: transform var(--dur) var(--ease), background var(--dur); }
.bug-fab:hover { background: var(--red-dark); transform: translateY(-2px); }
.bug-fab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---- giỏ hàng schema 2: lọc loại sản phẩm, mô tả nhiều dòng, liên kết tài liệu, lỗi tải */
.child-seg { margin-right: 10px; }
.detail-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; }
.load-why { display: block; max-width: 420px; margin: 8px auto 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.warn-list { margin: 0; padding-left: 18px; max-height: 50vh; overflow: auto; font-size: 13px; line-height: 1.6; }

/* ---- chuyển động: chỉ opacity / transform */
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(28px); opacity: 0; } }
@keyframes pop { from { transform: translate(-50%, calc(-50% + 14px)); opacity: 0; } }

/* ---- responsive */
@media (max-width: 1280px) { .layout { grid-template-columns: 1fr; } .rightcol { position: static; grid-template-columns: 1fr 1fr; } .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  :root { --blur: blur(10px) saturate(1.4); }
  .side { display: none; } .main { margin-left: 0; width: 100%; }
  .top { padding: 10px 16px; min-height: 64px; } .title { font-size: 20px; } .content { padding: 14px 14px 96px; }
  .kpis { grid-template-columns: repeat(2, 1fr); } .rightcol { grid-template-columns: 1fr; }
  .mobile-bar { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; border-width: 1px 0 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom); background: var(--glass-strong); }
  .mobile-bar button { border: 0; background: none; padding: 8px 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); display: grid; justify-items: center; gap: 2px; min-height: 54px; }
  .mobile-bar button.active { color: var(--red); } .mobile-bar .mi { font-size: 19px; }
  .btiles { grid-template-columns: 1fr; } .toolbar select { flex: 1 1 140px; }
  .bpanel { padding: 16px; } .bgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
@media (max-width: 767px) { .view-toggle { display: none; } .table { min-width: 760px; } .bug-fab { bottom: 78px; } .btitle h2 { font-size: 20px; } }
@media (max-width: 600px) {
  .top { gap: 8px; } .titlewrap { flex: 1; } .title { font-size: 17px; } .subtitle { font-size: 12px; }
  .sync.ok { display: none; } .top-actions { gap: 6px; } .top-actions .btn { padding: 0 12px; }
  .kpi { padding: 12px; } .kpi-icon { display: none; } .kpi .num { font-size: 19px; white-space: normal; overflow-wrap: anywhere; }
}
@media (pointer: coarse) { .search input, .toolbar select, .range input, .dlg-form .f input, .dlg-form .f select, .dlg-form .f textarea { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* vòng quay tải trang là tín hiệu trạng thái, không phải trang trí: vẫn quay (chậm hơn) để người dùng biết trang chưa treo */
  .spin { animation: sp 1.6s linear infinite !important; } }

/* ---- biểu tượng SVG (GH.icon) */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ic, .tool-btn .ic, .subtabs button .ic, .view-toggle button .ic, .seg button .ic { margin-right: 6px; vertical-align: -.2em; }
.btn, .tool-btn, .subtabs button, .view-toggle button { display: inline-flex; align-items: center; justify-content: center; }
.nav .icon { display: grid; place-items: center; font-size: 18px; opacity: .9; }
.kpi-icon { font-size: 20px; }
.empty-ic .ic { width: 34px; height: 34px; }
.mobile-bar .mi { display: grid; place-items: center; font-size: 21px; }
.search > span .ic { width: 18px; height: 18px; }

/* ---- thanh bên thu gọn */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-toggle { border: 1px solid var(--glass-edge); background: var(--glass-strong); color: var(--muted); width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 17px; transition: color var(--dur), box-shadow var(--dur); }
.side-toggle:hover { color: var(--red); box-shadow: var(--shadow); }
.side, .main { transition: width 220ms var(--ease), margin-left 220ms var(--ease); }
@media (min-width: 901px) {
  body.side-collapsed { --side: 76px; }
  body.side-collapsed .side { padding-left: 10px; padding-right: 10px; }
  body.side-collapsed .brand { padding: 2px 0 14px; }
  body.side-collapsed .brand-row { flex-direction: column; gap: 10px; }
  body.side-collapsed .logo { font-size: 0; display: block; }
  body.side-collapsed .logo::first-letter { font-size: 28px; }
  body.side-collapsed .brand small, body.side-collapsed .side-footer, body.side-collapsed .section-label, body.side-collapsed .nav .lbl, body.side-collapsed .nav .count { display: none; }
  body.side-collapsed .section-label + * { margin-top: 0; }
  body.side-collapsed .nav button { justify-content: center; padding: 11px 0; }
  body.side-collapsed .side-toggle .ic { transform: scaleX(-1); }
}
@media (max-width: 900px) { .side-toggle { display: none; } }

/* ---- trang Tòa nhà: 6 cột, có ảnh đại diện */
.bgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bimg { position: relative; overflow: hidden; }
.bimg .bcover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1500px) { .bgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1280px) { .bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* ---- tùy chỉnh báo giá cho nhân viên KD */
.custom-box { display: grid; gap: 10px; border-top: 1px dashed var(--line); padding-top: 12px; }
.custom-toggle { justify-self: start; }
.custom-panel, .custom-fields { display: grid; gap: 10px; }
.custom-panel[hidden], .custom-fields[hidden], .custom-login[hidden] { display: none; }
.custom-login { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 600px) { .custom-login { grid-template-columns: 1fr; } }
.custom-msg { color: var(--danger); margin: 0; min-height: 1em; font-weight: 600; font-size: 13px; }