/* GL Báo cáo — giao diện theo report Looker "GL BÁO CÁO DATA 2026" (đỏ German Link, Montserrat) */
:root {
  --red: #d71f26; --red-dark: #9e1016; --ink: #23324a; --muted: #6b7686;
  --line: #e3e6ea; --bg: #eef0f3; --card: #fff; --title-blue: #3d6a9e;
  --st-raw: #fdeea8; --st-mql: #c5df9f; --st-sql: #80c684; --st-chot: #6fbfa0; --st-tt: #5b9bd0;
  --up: #1a8f3c; --down: #c62828;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: Montserrat, system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 14px; }
a { color: inherit; }

/* Thanh trên cùng */
.topbar { position: fixed; inset: 0 0 auto 0; height: 52px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 30; }
.app-name { font-weight: 600; font-size: 16px; }
.sync-info { margin-left: auto; color: var(--muted); font-size: 12px; }
.user-box { font-size: 12px; color: var(--muted); white-space: nowrap; }
.menu-toggle { display: none; border: 0; background: none; font-size: 22px; cursor: pointer; }

/* Menu trái */
.sidebar { position: fixed; top: 52px; bottom: 0; left: 0; width: 230px; background: #fff;
  border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px; z-index: 20; }
.nav-group { font-size: 11px; font-weight: 700; color: var(--muted); padding: 14px 12px 6px; letter-spacing: .3px; }
.nav-link { display: block; text-decoration: none; padding: 9px 12px; border-radius: 20px; font-size: 12.5px; font-weight: 600; }
.nav-link.sub { font-weight: 500; padding-left: 22px; color: #4a5568; }
.nav-link:hover { background: #f1f4f8; }
.nav-link.active { background: #dce8fb; color: #1a56c4; }
.nav-backdrop { display: none; }

/* Khung trang */
.content { margin-left: 230px; padding: 68px 24px 32px; }
.page { max-width: 1180px; margin: 0 auto; background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.08); padding-bottom: 28px; }
.banner { background: linear-gradient(180deg, #e8222a 0%, #b5121a 100%); color: #fff; display: flex; align-items: center;
  gap: 24px; padding: 18px 32px; }
.banner-logo { height: 42px; }
.banner h1 { flex: 1; text-align: center; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .3px; }
.section-bar { margin-top: 40px; background: linear-gradient(180deg, #e8222a, #b5121a); color: #fff; text-align: center;
  font-weight: 800; font-size: 20px; padding: 10px; letter-spacing: .4px; }
.placeholder { padding: 32px; color: var(--muted); }
.footnote { color: var(--muted); font-size: 11.5px; padding: 0 28px; line-height: 1.6; }
.loading { padding: 40px; color: var(--muted); grid-column: 1 / -1; text-align: center; }

/* Thanh công cụ + bộ chọn ngày */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 28px 6px; flex-wrap: wrap; }
.compare-note { color: var(--muted); font-size: 12px; }
.date-range { position: relative; }
.date-btn { background: linear-gradient(180deg, #d71f26, #a8141b); color: #fff; border: 0; border-radius: 4px;
  padding: 10px 18px; min-width: 250px; font: 600 13px Montserrat; cursor: pointer; text-align: left;
  box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.date-btn::after { content: "▾"; float: right; }
.date-pop { position: absolute; right: 0; top: 44px; background: #fff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 12px; width: 300px; z-index: 10; display: none; }
.date-pop.open { display: block; }
.preset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.preset-list button { border: 1px solid var(--line); background: #fafbfc; border-radius: 4px; padding: 7px; font: 500 12px Montserrat; cursor: pointer; }
.preset-list button:hover { border-color: var(--red); color: var(--red); }
.custom-range { display: flex; gap: 6px; align-items: center; }
.custom-range input { flex: 1; font: 12px Montserrat; padding: 6px; border: 1px solid var(--line); border-radius: 4px; }
.custom-range button { background: var(--red); color: #fff; border: 0; border-radius: 4px; padding: 7px 10px; font: 600 12px Montserrat; cursor: pointer; }

/* Lưới phễu */
.funnel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 14px 22px; }
.funnel-card { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff;
  overflow: hidden; display: flex; flex-direction: column; }
.funnel-card h3 { margin: 0; background: #f2f3f5; color: var(--title-blue); font-size: 14.5px; font-weight: 700;
  text-align: center; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.funnel-body { position: relative; padding: 8px 8px 10px; }
.funnel-svg { display: block; width: 100%; height: auto; }
.funnel-tip { position: absolute; pointer-events: none; background: rgba(35,50,74,.95); color: #fff; font-size: 11.5px;
  padding: 7px 9px; border-radius: 4px; line-height: 1.5; display: none; z-index: 5; white-space: nowrap; }

/* Đăng nhập */
.login-body { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 16px; }
.login-card { width: 100%; max-width: 360px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.login-head { background: linear-gradient(180deg, #e8222a, #b5121a); color: #fff; padding: 22px; text-align: center; font-weight: 800; }
.login-head img { height: 40px; display: block; margin: 0 auto 8px; }
.login-card label { display: block; padding: 10px 22px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.login-card input { width: 100%; margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; font: 14px Montserrat; }
.login-card button { margin: 18px 22px 22px; width: calc(100% - 44px); padding: 11px; background: var(--red); color: #fff; border: 0; border-radius: 4px; font: 700 14px Montserrat; cursor: pointer; }
.login-error { margin: 14px 22px 0; color: var(--down); font-size: 13px; }

/* Điện thoại / máy tính bảng */
@media (max-width: 1100px) { .funnel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .menu-toggle { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: 52px 0 0 0; background: rgba(0,0,0,.3); z-index: 15; }
  .content { margin-left: 0; padding: 64px 0 24px; }
  .sync-info { display: none; }
  .banner { padding: 14px 16px; gap: 12px; }
  .banner-logo { height: 30px; }
  .banner h1 { font-size: 16px; }
  .section-bar { font-size: 16px; margin-top: 20px; }
  .toolbar { padding: 16px; }
  .date-btn { min-width: 0; width: 100%; }
  .date-range { width: 100%; }
  .funnel-grid { grid-template-columns: 1fr; padding: 12px 16px; }
  .footnote { padding: 0 16px; }
}

/* ===== Trang Báo cáo data ===== */
.pad { padding: 0 28px; }
.filters { justify-content: flex-start; }
.filters .date-range { margin-left: auto; }
.flt { appearance: none; background: linear-gradient(180deg, #d71f26, #a8141b) right 12px center / auto no-repeat; color: #fff;
  border: 0; border-radius: 4px; padding: 10px 34px 10px 14px; font: 600 13px Montserrat; min-width: 200px; max-width: 280px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(180deg, #d71f26, #a8141b);
  background-position: right 18px center, right 13px center, 0 0; background-size: 5px 5px, 5px 5px, 100% 100%; }
.flt option { color: var(--ink); background: #fff; }
.flt.active { outline: 3px solid #ffd54f; }
.reset-btn { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 9px 14px; font: 600 12px Montserrat; cursor: pointer; }
.kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 14px 28px; }
.kpi { background: #fdeeee; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.12); padding: 12px 14px; text-align: center; }
.kpi-label { color: #666; font-size: 13px; }
.kpi-value { font-size: 30px; font-weight: 500; margin: 2px 0; }
.kpi-pct { color: #c62828; font-size: 13px; font-weight: 600; }
.kpi-pct small, .kpi-yoy small { color: var(--muted); font-weight: 400; }
.kpi-bar { height: 9px; background: #e2e4e8; border-radius: 5px; margin: 6px 6px; overflow: hidden; }
.kpi-bar i { display: block; height: 100%; border-radius: 5px; }
.kpi-yoy { font-size: 12px; font-weight: 700; color: var(--muted); }
.kpi-yoy.up { color: var(--up); } .kpi-yoy.down { color: var(--down); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 10px 28px; }
.two-col.wide-right { grid-template-columns: 1fr 2fr; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 10px 28px; }
.panel { background: #f6f7f9; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.14); padding: 10px 12px; min-width: 0; }
.panel.flat { margin: 12px 28px; background: #fff; }
.panel h4 { margin: 2px 0 8px; text-align: center; font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.chart { height: 300px; width: 100%; } .chart.tall { height: 420px; }
.sub-bar { margin: 34px 0 10px; background: #f0f1f3; color: #c0161e; text-align: center; font-weight: 800; font-size: 24px; padding: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bd-table th { text-align: right; font-weight: 700; padding: 8px 8px; border-bottom: 1px solid var(--line); cursor: pointer; white-space: normal; vertical-align: bottom; user-select: none; }
.bd-table th[data-k="name"], .bd-table.simple th { text-align: left; }
.bd-table th.desc::after { content: " ▼"; font-size: 9px; } .bd-table th.asc::after { content: " ▲"; font-size: 9px; }
.bd-table td { padding: 6px 8px; border-bottom: 1px solid #f1f2f4; white-space: nowrap; }
.bd-table td.idx { color: var(--muted); width: 28px; }
.bd-table td.name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.bd-table td.num { text-align: right; }
.bd-table td.bar { position: relative; min-width: 110px; }
.bd-table td.bar span { position: relative; z-index: 1; display: inline-block; min-width: 38px; }
.bd-table td.bar i { position: absolute; left: 52px; top: 9px; height: 14px; max-width: calc(100% - 58px); border-radius: 1px; }
.bd-table td.bar { text-align: left; }
.bd-table tfoot td { font-weight: 800; border-top: 2px solid var(--line); }
.more-btn { margin: 8px 0 2px; border: 0; background: none; color: #1a56c4; font: 600 12px Montserrat; cursor: pointer; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .kpi-row { grid-template-columns: 1fr 1fr; padding: 12px 16px; }
  .two-col, .two-col.wide-right, .three-col { grid-template-columns: 1fr; padding: 8px 16px; }
  .panel.flat { margin: 10px 16px; }
  .flt { min-width: 0; width: 100%; max-width: none; }
  .pad { padding: 0 16px; }
  .sub-bar { font-size: 17px; }
}
.funnel-card h3 a { text-decoration: none; } .funnel-card h3 a:hover { color: var(--red); }

/* ===== Trang Chi phí - đơn giá ===== */
.tile-grid { display: grid; gap: 10px; align-content: start; }
.tile-grid.two { grid-template-columns: 1fr 1fr; }
.tile-grid.four { grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.tile { border-radius: 4px; padding: 10px 8px; text-align: center; color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.18); min-width: 0; }
.tile-label { font-size: 11.5px; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-value { font-size: 21px; font-weight: 500; white-space: nowrap; }
.tile.dark { color: var(--ink); } .tile.dark .tile-label { color: var(--muted); }
.tile.wide { grid-column: 1 / -1; margin: 0 auto 10px; max-width: 320px; }
.tile small { font-size: 12px; font-weight: 700; }
.up { color: var(--up) !important; } .down { color: var(--down) !important; }
.cost-box { border: 1.5px solid #333; background: #fff; }
.kpi-row.four { grid-template-columns: repeat(4, 1fr); }
.kpi-value.small { font-size: 22px; font-weight: 600; }
.bd-table td.name a { text-decoration: none; color: #1a56c4; font-weight: 600; }
@media (max-width: 860px) {
  .tile-grid.four { grid-template-columns: 1fr 1fr; }
  .kpi-row.four { grid-template-columns: 1fr 1fr; }
  .tile-value { font-size: 17px; }
}
.warn { color: #b26a00; font-weight: 700; font-size: 11.5px; }

/* ===== Trang So sánh cùng kỳ ===== */
.kpi-row.five-tight { padding: 6px 0 10px; }
.two-col.inner { padding: 0; }

/* ===== Ô lọc chọn nhiều (kiểu Looker) ===== */
.msel { position: relative; }
.msel-btn { background: linear-gradient(180deg, #d71f26, #a8141b); color: #fff; border: 0; border-radius: 4px; padding: 10px 34px 10px 14px;
  font: 600 13px Montserrat; min-width: 200px; max-width: 290px; box-shadow: 0 2px 4px rgba(0,0,0,.2); cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.msel-btn::after { content: "▾"; position: absolute; right: 12px; }
.msel.active .msel-btn { outline: 3px solid #ffd54f; }
.msel-pop { display: none; position: absolute; top: 44px; left: 0; z-index: 20; width: 340px; background: #fff; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2); border: 1px solid var(--line); }
.msel-pop.open { display: block; }
.msel-head { display: flex; justify-content: space-between; padding: 12px 14px 8px; font-size: 13px; border-bottom: 1px solid var(--line); }
.msel-head span { font-weight: 700; color: var(--muted); font-size: 12px; }
.msel-search { width: calc(100% - 24px); margin: 8px 12px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; font: 13px Montserrat; }
.msel-list { max-height: 320px; overflow-y: auto; padding: 0 6px; }
.msel-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 4px; font-size: 13px; }
.msel-item:hover { background: #f4f6f9; }
.msel-item label { flex: 1; display: flex; gap: 8px; align-items: center; cursor: pointer; min-width: 0; }
.msel-item label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-item input, .msel-head input { accent-color: #d9534f; width: 16px; height: 16px; }
.msel-n { color: #555; min-width: 40px; text-align: right; }
.msel-only { visibility: hidden; border: 0; background: #eceff3; border-radius: 3px; font: 600 11px Montserrat; padding: 3px 8px; cursor: pointer; }
.msel-item:hover .msel-only { visibility: visible; }
.msel-empty { padding: 12px; color: var(--muted); font-size: 13px; }
.msel-foot { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid var(--line); }
.msel-foot button { border: 0; border-radius: 4px; padding: 7px 14px; font: 600 12px Montserrat; cursor: pointer; }
.msel-clear { background: #f1f2f4; } .msel-apply { background: var(--red); color: #fff; }
@media (max-width: 860px) { .flt-ms, .msel-btn { width: 100%; max-width: none; } .msel-pop { width: 100%; } }

/* ===== Nút bật/tắt so sánh cùng kỳ ===== */
.yoy-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.yoy-toggle input { display: none; }
.yoy-slider { width: 36px; height: 20px; background: #c9ced6; border-radius: 10px; position: relative; transition: .2s; }
.yoy-slider::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.yoy-toggle input:checked + .yoy-slider { background: var(--red); }
.yoy-toggle input:checked + .yoy-slider::after { left: 18px; }
body:not(.show-yoy):not(.force-yoy) .yoy { display: none !important; }
body.force-yoy .yoy-toggle { visibility: hidden; }
@media (max-width: 860px) { .yoy-toggle { font-size: 0; gap: 0; } }

/* Dòng "cách đọc" dưới mỗi biểu đồ/bảng — cho người mới xem */
.chart-note { margin: 6px 4px 2px; font-size: 11.5px; color: #66707d; line-height: 1.5; text-align: left; }
.chart-note::before { content: "ⓘ Cách đọc: "; font-weight: 700; color: #4a5568; }

/* ===== Hiệu ứng rê chuột (zoom nhẹ, nổi khối) ===== */
.kpi, .tile, .panel, .funnel-card { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease; will-change: transform; }
.kpi:hover, .tile:hover { transform: translateY(-3px) scale(1.035); box-shadow: 0 10px 22px rgba(0,0,0,.16); z-index: 2; position: relative; }
.funnel-card:hover, .panel:not(.flat):hover { transform: translateY(-3px) scale(1.012); box-shadow: 0 12px 28px rgba(0,0,0,.14); }
.panel.flat:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); }
/* Phễu: tầng đang trỏ phóng to, tầng khác mờ đi */
.funnel-svg .stage { transition: transform .2s ease, opacity .2s ease; cursor: pointer; }
.funnel-svg:hover .stage { opacity: .45; }
.funnel-svg .stage:hover { opacity: 1; transform: scale(1.06); }
/* Bảng: dòng đang trỏ sáng lên, thanh số đậm hơn */
.bd-table tbody tr { transition: background .15s ease; }
.bd-table tbody tr:hover { background: #fff6d6; }
.bd-table tbody tr:hover td.bar i { filter: saturate(1.4) brightness(.95); }
/* Nút, menu, ô lọc */
.nav-link, .date-btn, .msel-btn, .reset-btn, .preset-list button { transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.date-btn:hover, .msel-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(160,20,27,.35); }
.nav-link:hover { transform: translateX(3px); }
/* Ai cài "giảm chuyển động" trong máy thì tắt hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  .kpi, .tile, .panel, .funnel-card, .funnel-svg .stage, .nav-link, .date-btn, .msel-btn { transition: none !important; transform: none !important; }
}
/* Màn hình cảm ứng: không phóng khối (tránh giật khi cuộn) */
@media (hover: none) { .kpi:hover, .tile:hover, .funnel-card:hover, .panel:hover { transform: none; } }

/* In / xuất PDF: bỏ menu, nút; mỗi cơ sở sang trang mới */
@media print {
  .topbar, .sidebar, .no-print, .nav-backdrop, .chart-note::before { display: none !important; }
  .content { margin: 0; padding: 0; } .page { box-shadow: none; max-width: none; }
  .s-wrap { break-after: page; box-shadow: none !important; margin: 0 !important; }
  .blue-box textarea { border: 0 !important; resize: none; background: transparent; }
  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Báo cáo giao ban: slide 16:9 theo bộ slide gốc ===== */
.gb-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 18px 28px 6px; }
.gb-controls fieldset { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px 8px; margin: 0; }
.gb-controls legend { font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.gb-controls input[type=date] { font: 600 13px Montserrat; padding: 6px; border: 1px solid var(--line); border-radius: 4px; }
.gb-ctl-right { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.yoy-toggle input:disabled + .yoy-slider { opacity: .4; }
.gb-print { background: var(--red); color: #fff; border: 0; border-radius: 4px; padding: 10px 16px; font: 700 13px Montserrat; cursor: pointer; }
.gb-deck { padding: 8px 20px 20px; }
.s-wrap { position: relative; width: 100%; margin: 16px 0; overflow: hidden; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.18); background: #fff; }
.s { position: absolute; top: 0; left: 0; width: 1600px; height: 900px; transform-origin: 0 0; background: #fff; font-family: Montserrat; color: #111; overflow: hidden; }
.s-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; }
.s-foot i:nth-child(1) { width: 14.5%; background: #000; } .s-foot i:nth-child(2) { flex: 1; background: #ab2f33; } .s-foot i:nth-child(3) { width: 14.5%; background: #f6d55c; }
.s-head { display: flex; gap: 34px; padding: 22px 30px 0 26px; align-items: flex-start; }
.s-head img { width: 220px; flex: none; }
.s-title { font-size: 25px; font-weight: 700; line-height: 1.32; }
.s-title em, .s-head em { color: #c0272d; font-style: normal; }
.s-note-red { color: #d0343a; font-weight: 400; font-size: 24px; }
/* Bìa */
.s-cover .cover-logo { position: absolute; left: 115px; top: 85px; width: 300px; }
.cover-title { position: absolute; left: 122px; top: 295px; font-size: 52px; font-weight: 800; color: #b5282e; }
.cover-line { position: absolute; left: 122px; top: 382px; width: 630px; height: 4px; background: #1d2433; }
.cover-sub { position: absolute; left: 122px; top: 425px; font-size: 34px; font-weight: 700; }
.cover-date { position: absolute; left: 20px; bottom: 50px; font-size: 25px; font-weight: 700; }
.cover-arc { position: absolute; right: -420px; top: -330px; width: 1750px; height: 1750px; border-radius: 50%;
  box-shadow: inset -360px 40px 0 0 #ab2f33, inset -330px 30px 0 0 #fff, inset -300px 20px 0 0 #f4cd4c; clip-path: inset(0 0 0 50%); pointer-events: none; }
/* OKR */
.s-head.okr { padding: 0; align-items: stretch; } .s-head.okr img { margin: 22px 30px 0 26px; }
.okr-bar { flex: 1; background: #ab2f33; color: #fff; font-size: 46px; font-weight: 800; padding: 22px 20px; }
.okr-item { margin: 70px 235px 0; background: #ab2f33; color: #fff; font-size: 32px; font-weight: 800; padding: 14px 8px; line-height: 1.3; }
/* Thẻ số kiểu Looker */
.lk-card { background: #fbefef; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.18); padding: 26px 30px; text-align: center; }
.lk-card.big { width: 555px; } .lk-card.sm { width: 260px; margin: 34px 0 0 48px; padding: 18px; }
.lk-l { color: #666; font-size: 30px; } .lk-card.big .lk-l { font-size: 40px; }
.lk-v { font-size: 48px; font-weight: 400; color: #333; } .lk-card.big .lk-v { font-size: 92px; line-height: 1.1; }
.lk-p { color: #c74e4b; font-size: 22px; } .lk-card.big .lk-p { font-size: 40px; } .lk-p.or { color: #e7a046; }
.lk-bar { height: 30px; background: #e9e6e6; border-radius: 15px; margin: 14px 40px 6px; overflow: hidden; }
.lk-bar i { display: block; height: 100%; background: #ad4a46; border-radius: 15px; } .lk-bar.or i { background: #e6a14a; }
.lk-t { text-align: right; color: #555; font-size: 26px; margin-right: 40px; }
.kr1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 20px 80px 0 100px; }
.kr1-total { font-size: 30px; line-height: 1.55; margin-bottom: 24px; }
.blue-box { background: #c2dbf7; border: 2px solid #3a6fc4; border-radius: 34px; padding: 26px 26px; font-size: 25px; line-height: 1.55; text-align: justify; }
.blue-box.big { margin-top: 70px; font-size: 27px; padding: 60px 34px; }
.s-table { width: calc(100% - 180px); margin: 34px 90px 0; border-collapse: collapse; font-size: 25px; font-weight: 700; }
.s-table th { background: #c2dbf7; text-align: left; padding: 18px 16px; border: 2px dashed #bcd0e8; }
.s-table td { padding: 16px; border: 2px dashed #a8a8a8; }
.s-table.big { font-size: 29px; margin-top: 18px; } .s-table.big td { padding: 14px 16px; }
.r-ko { background: #df9e9c; } .r-ok { background: #9ed2a7; } .r-na { background: #eee; }
.gb-old { display: block; font-size: 60%; font-weight: 500; color: #7a6a1c; background: #fff4c2; border-radius: 6px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; }
.gb-old b.up { color: #1a8f3c; } .gb-old b.down { color: #c62828; }
/* Phễu kiểu slide */
.kr1d-grid { display: grid; grid-template-columns: 850px 1fr; gap: 60px; padding: 30px 60px 0 80px; }
.fx-box { padding: 4px 0; } .fx-title { font-size: 34px; font-weight: 800; color: #1d2b4f; } .fx-sub { font-size: 17px; color: #555; margin-bottom: 10px; }
.fx-cap { font-size: 13.5px; color: #333; margin-top: 8px; border-top: 1px solid #ddd; padding-top: 8px; }
.fs { display: grid; grid-template-columns: 310px 1fr 190px; gap: 16px; align-items: start; }
.fs-shape { display: flex; flex-direction: column; align-items: center; padding-top: 28px; }
.fs-shape i { display: block; height: 60px; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.fs-cap { font-size: 13px; font-weight: 700; color: #444; height: 26px; }
.fs-card { display: flex; justify-content: space-between; align-items: center; height: 54px; margin-bottom: 6px; padding: 0 12px;
  border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 12%, white); }
.fs-card b { display: block; font-size: 23px; } .fs-card span { font-size: 15px; } .fs-card .gb-old { font-size: 12px; display: inline-block; margin-left: 6px; }
.fs-card em { font-style: normal; background: var(--c); color: #fff; font-weight: 700; font-size: 15px; padding: 3px 12px; border-radius: 4px; }
.fs-cv { height: 120px; display: flex; flex-direction: column; justify-content: center; } .fs-cv b { font-size: 25px; } .fs-cv span { font-size: 14px; color: #666; }
.yoy-box { border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0,0,0,.12); border-radius: 6px; padding: 10px; }
.yoy-title { font-size: 26px; font-weight: 700; text-align: center; } .yoy-chart { height: 360px; }
.kr2-grid { display: grid; grid-template-columns: 480px 1fr; gap: 160px; padding: 60px 260px 0 160px; }
.kr2-grid .lk-card:first-child { width: 420px; }
/* Phễu chi phí */
.s.cf .s-head { justify-content: space-between; }
.date-pill { background: linear-gradient(180deg, #d63a37, #a5201f); color: #fff; padding: 14px 30px; border-radius: 6px; font-size: 22px; box-shadow: 0 3px 6px rgba(0,0,0,.25); }
.date-pill.sm { font-size: 19px; padding: 12px 28px; }
.cf-top { position: absolute; left: 320px; top: 70px; right: 20px; display: grid; grid-template-columns: 860px 200px 1fr; gap: 20px; }
.cf-h { font-size: 30px; font-weight: 700; margin-bottom: 4px; }
.cf-top .fs { grid-template-columns: 230px 1fr 170px; } .cf-top .fs-shape i { height: 52px; } .cf-top .fs-card { height: 64px; } .cf-top .fs-cv { height: 70px; }
.cf-tiles { display: flex; flex-direction: column; gap: 8px; padding-top: 30px; }
.t { color: #fff; text-align: center; padding: 8px 4px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.t span { display: block; font-size: 13px; opacity: .95; } .t b { font-size: 22px; font-weight: 500; } .t .gb-old { color: #5a4a00; }
.cf-tiles .t b { font-size: 26px; }
.cf-cost { background: #fbefef; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.18); padding: 18px; text-align: center; align-self: center; }
.cf-cost span { display: block; color: #666; font-size: 22px; } .cf-cost b { font-size: 40px; font-weight: 500; }
.cf-cost.sm span { font-size: 19px; } .cf-cost.sm b { font-size: 32px; }
.cf-bottom { position: absolute; left: 20px; right: 20px; top: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 1px solid #e5e5e5; padding-top: 10px; }
.cf-half + .cf-half { border-left: 1px solid #e5e5e5; padding-left: 20px; }
.cf-row { display: grid; grid-template-columns: 1fr 330px; gap: 10px; }
.cf-fsm .fs { grid-template-columns: 110px 1fr 112px; gap: 8px; } .cf-fsm .fs-shape i { height: 64px; } .cf-fsm .fs-card { height: 76px; padding: 0 6px; }
.cf-fsm .fs-card b { font-size: 20px; } .cf-fsm .fs-card span { font-size: 12.5px; } .cf-fsm .fs-card em { font-size: 12px; padding: 2px 6px; }
.cf-fsm .fs-cv { height: 82px; } .cf-fsm .fs-cv b { font-size: 19px; } .cf-fsm .fs-cv span { font-size: 11px; } .cf-fsm .fs-cap { font-size: 10.5px; height: 30px; }
.cf-side { display: flex; flex-direction: column; gap: 10px; }
.tg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .tg2 .t { padding: 6px 2px; }
.tg4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .tg4 .t { padding: 5px 1px; } .tg4 .t span { font-size: 10px; } .tg4 .t b { font-size: 16px; }
/* Bảng lũy tiến */
.s.ky { background: #f7f9fc; }
.ky-top { margin: 14px 20px 0; padding: 12px 30px; background: linear-gradient(90deg, #fde9e8, #fbe4e4); border-radius: 22px; display: flex; gap: 60px; align-items: center; }
.ky-top img { width: 250px; } .ky-title { font-size: 38px; font-weight: 800; text-align: center; } .ky-sub { font-size: 24px; color: #444; text-align: center; }
.ky-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 18px 20px 0; }
.ky-card { background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(30,60,120,.12); margin-bottom: 18px; overflow: hidden; }
.ky-h { background: linear-gradient(90deg, #e3eefc, #f2f6fd); font-size: 28px; font-weight: 800; padding: 10px 20px; display: flex; gap: 16px; align-items: center; }
.ky-card.big .ky-h { font-size: 36px; padding: 18px 24px; } .ky-ic { font-size: 30px; }
.ky-t { width: 100%; border-collapse: collapse; font-size: 19px; }
.ky-t th { background: #eef3fb; color: #333; font-weight: 500; padding: 8px; }
.ky-t td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #eef0f4; }
.ky-t td:nth-child(2) { text-align: left; } .ky-t .ic { margin-right: 10px; }
.ky-card.big .ky-t { font-size: 24px; } .ky-card.big .ky-t td { padding: 22px 10px; } .ky-card.big .ky-t th { padding: 14px; }
.tu { color: #2a9d48; font-weight: 700; } .td { color: #d23b3b; font-weight: 700; }
.pill { display: inline-block; padding: 4px 20px; border-radius: 16px; font-size: 85%; background: #eee; }
.pill.g { background: #dff5e3; color: #2a9d48; } .pill.r { background: #fde3e3; color: #d23b3b; }
/* Kết quả đã làm được */
.rs-title { position: absolute; left: 520px; top: 50px; width: 600px; text-align: center; background: #c2dbf7; border: 1px solid #3a6fc4; font-size: 32px; font-weight: 800; padding: 16px; }
.rs-grid { position: absolute; top: 150px; left: 40px; right: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.rs-badge { display: inline-block; background: linear-gradient(180deg, #c8312f, #9f1f1e); color: #fff; font-size: 30px; font-weight: 800; padding: 10px 16px; margin-bottom: 30px; }
.rs-date { display: flex; justify-content: flex-end; gap: 16px; align-items: center; margin: 10px 0; } .cal { font-size: 40px; }
.rs-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 30px; }
.rc { background: #fbefef; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.18); text-align: center; padding: 12px 6px 22px; }
.rc span { display: block; color: #666; font-size: 15px; } .rc b { font-size: 30px; font-weight: 400; }
.rs-sum { position: absolute; left: 180px; right: 180px; bottom: 60px; font-size: 27px; }
/* Ghi chú */
.blue-box.note { margin: 20px 140px 0; font-size: 24px; }
.blue-box.note textarea { width: 100%; font: 22px/1.6 Montserrat; background: rgba(255,255,255,.55); border: 1px dashed #3a6fc4; border-radius: 10px; padding: 8px 12px; margin-top: 6px; resize: none; }
.note-cs { font-size: 30px; color: #b5282e; font-weight: 800; }
.note-act { position: absolute; right: 140px; bottom: 40px; }
.gb-save { background: #1a56c4; color: #fff; border: 0; border-radius: 6px; padding: 12px 20px; font: 700 18px Montserrat; cursor: pointer; }
.gb-saved { font-size: 18px; color: var(--up); }
/* Độ trễ */
.lag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 30px 40px 0; }
.lagt { width: 100%; margin: 0; font-size: 20px; } .lagt td, .lagt th { padding: 9px 10px; }
.lag-note { position: absolute; left: 40px; right: 40px; bottom: 50px; font-size: 19px; background: #fff8e6; border-left: 6px solid #f5b800; padding: 10px 16px; }
@media (max-width: 860px) { .gb-controls { padding: 12px 16px; } .gb-ctl-right { margin-left: 0; } .gb-deck { padding: 4px 8px; } }
/* chỉnh mật độ slide khi bật so sánh số cũ */
.s .gb-old { font-size: 14px; padding: 0 5px; }
.s td .gb-old, .ky-sub .gb-old, .ky-t .gb-old { display: inline-block; margin: 0 0 0 8px; vertical-align: middle; }
.lk-card.big .gb-old { font-size: 26px; display: inline-block; }
.lk-card .gb-old { font-size: 17px; display: inline-block; }
.fs-card div { white-space: nowrap; } .fs-card .gb-old { font-size: 12px !important; margin-left: 6px; }
.s-table td { padding: 11px 14px; } .s-table.big td { padding: 9px 14px; } .s-table th { padding: 12px 14px; }
.kr1-grid { padding-top: 8px; } .s-table { margin-top: 22px; }
.cover-arc { position: absolute; inset: 0; width: 1600px; height: 900px; box-shadow: none; clip-path: none; border-radius: 0; right: auto; top: 0; }
.cf-top { left: 250px; grid-template-columns: 760px 220px 1fr; }
.cf-cost b { font-size: 30px; } .cf-cost span { font-size: 18px; } .cf-cost.sm b { font-size: 26px; } .cf-cost .gb-old { display: block; }
.cf-row { grid-template-columns: 1fr 300px; }
.cf-fsm .fs { grid-template-columns: 70px 1fr 92px; gap: 6px; } .cf-fsm .fs-card b { font-size: 18px; }
.tg2 .t b { font-size: 18px; } .tg2 .t .gb-old, .tg4 .t .gb-old { display: block; font-size: 10px; margin: 2px 4px 0; }
.ky-card.big .ky-t { font-size: 21px; } .ky-card.big .ky-t td { padding: 12px 8px; } .ky-card.big .ky-h { padding: 10px 20px; font-size: 30px; }
.ky-t td { padding: 4px 6px; } .ky-t .gb-old { display: block; margin: 1px auto 0; width: fit-content; font-size: 11px; }
.rs-grid { top: 120px; } .rs-badge { margin-bottom: 12px; font-size: 26px; } .rs-cards { margin-bottom: 8px; gap: 14px; }
.rc { padding: 8px 4px 10px; } .rc b { font-size: 26px; } .rc .gb-old { font-size: 12px; }
.rs-sum { bottom: 40px; font-size: 24px; padding: 16px 24px; }
/* chỉnh lần 2: slide phễu chi phí + bảng lũy tiến cho vừa khung */
.cf-top { left: 240px; top: 64px; grid-template-columns: 720px 210px 1fr; }
.cf-top .fs-card { height: 50px; margin-bottom: 4px; } .cf-top .fs-shape i { height: 46px; } .cf-top .fs-cv { height: 54px; }
.cf-tiles { gap: 5px; padding-top: 22px; } .cf-tiles .t { padding: 4px; } .cf-tiles .t b { font-size: 22px; } .cf-tiles .t .gb-old { display: block; font-size: 11px; }
.cf-bottom { top: 400px; grid-template-columns: .82fr 1.18fr; }
.cf-row { grid-template-columns: minmax(0, 1fr) 270px; } .cf-half + .cf-half .cf-row { grid-template-columns: minmax(0, 1fr) 400px; }
.cf-fsm { min-width: 0; overflow: hidden; } .cf-fsm .fs-card { height: 66px; } .cf-fsm .fs-shape i { height: 56px; } .cf-fsm .fs-cv { height: 72px; }
.cf-h { font-size: 26px; } .tg2 .t, .tg4 .t { padding: 3px 1px; } .tg4 .t b { font-size: 15px; } .tg2 .t b { font-size: 17px; }
.ky-grid { padding-top: 12px; gap: 18px; } .ky-card { margin-bottom: 12px; }
.ky-t { font-size: 16.5px; } .ky-t td { padding: 2px 6px; } .ky-t th { padding: 5px; } .ky-h { font-size: 24px; padding: 6px 16px; }
.ky-card.big .ky-t { font-size: 20px; } .ky-card.big .ky-t td { padding: 14px 8px; }
.cf-half:first-child .cf-row { grid-template-columns: minmax(0, 1fr) 250px; } .cf-fsm .fs-conv { overflow: hidden; }
/* chỉnh theo góp ý 15/10: tách tiêu đề khỏi logo, cân slide */
.s-head { gap: 70px; padding: 30px 50px 0 40px; }
.s-title { padding-top: 6px; }
.kr1-grid { padding: 26px 90px 0 120px; }
.s-table { margin-top: 30px; }
.kr1d-grid { padding: 18px 60px 0 80px; } .yoy-chart { height: 320px; }
.kr1d-grid .fs-card { height: 46px; margin-bottom: 4px; } .kr1d-grid .fs-shape i { height: 48px; } .kr1d-grid .fs-cv { height: 96px; }
.fx-cap { margin-top: 4px; font-size: 12.5px; }
.s-table.big { font-size: 24px; margin-top: 12px; } .s-table.big td { padding: 6px 14px; } .s-table.big th { padding: 8px 14px; }
.lk-formula { font-size: 17px; color: #8a5a10; margin-top: 4px; }
/* Phễu chi phí: tách khỏi logo, giãn đều trên/dưới */
.cf-top { top: 140px; left: 60px; grid-template-columns: 820px 230px 1fr; }
.cf-top .fs { grid-template-columns: 260px 1fr 180px; } .cf-top .fs-card { height: 60px; } .cf-top .fs-shape i { height: 56px; } .cf-top .fs-cv { height: 64px; }
.cf-tiles { gap: 8px; } .cf-tiles .t { padding: 7px 4px; }
.cf-bottom { top: 470px; } .cf-fsm .fs-card { height: 72px; } .cf-fsm .fs-shape i { height: 62px; } .cf-fsm .fs-cv { height: 78px; }
.s.cf .s-head { padding-right: 40px; }
/* Lịch sử nhận xét */
.note-act { display: flex; gap: 10px; align-items: center; }
.note-meta { font-size: 16px; color: #555; }
.note-hist-box { margin: -6px 0 16px; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; max-height: 360px; overflow-y: auto; }
.nh-item { border-bottom: 1px dashed #ddd; padding: 8px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.nh-meta { font-weight: 700; color: #1a56c4; }
.s-title { font-size: 23.5px; }
.s-table { font-size: 23px; } .s-table th, .s-table td { white-space: nowrap; }
.kr1-grid { padding-top: 16px; } .lk-card.big { padding: 18px 30px; } .lk-card.big .lk-v { font-size: 84px; }
.kr1-total { margin-bottom: 14px; } .blue-box { padding: 20px 24px; }
.lk-card.sm { width: 330px; margin-left: 40px; }
.blue-box.note { text-align: left; margin-top: 16px; } .blue-box.note b { display: block; }
.blue-box.note textarea { height: 150px; } .blue-box.note:nth-of-type(2) textarea { height: 230px; }
.note-act { bottom: 34px; right: 120px; }
.blue-box.note textarea[data-k="van_de"] { height: 150px; } .blue-box.note textarea[data-k="giai_phap"] { height: 250px; }