/* Vibary UI — app.css (chủ: #7 FE lõi). Bố cục + thư viện UI. Tokens ở tokens.css. */

/* ===== 1. Nền tảng ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font);
  font-size: var(--c-thuong);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, canvas, table { max-width: 100%; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--xanh); }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.2; }
h1 { font-size: var(--c-h1); }
h2 { font-size: var(--c-menu); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.chu-thich { font-size: var(--c-chu-thich); font-style: italic; color: var(--chu-phu); }
.chu-thich.vang { color: var(--vang-chu); }
.chu-thich.do { color: var(--do); }
.an-chu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== 2. Khung ứng dụng ===== */
.app { display: grid; grid-template-columns: var(--r-thanh-ben) minmax(0, 1fr); min-height: 100vh; }
.chinh { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#man { flex: 1 1 auto; min-height: 0; padding: var(--k12) var(--k16) var(--k16); position: relative; display: flex; flex-direction: column; }
#man > .man { flex: 1 1 auto; min-height: 0; }
#man > .man { animation: man-vao var(--chuyen) both; }
#man > .man.an { opacity: 0; transform: translateY(6px); transition: opacity var(--chuyen), transform var(--chuyen); }
@keyframes man-vao { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Thanh bên nâu 6x6 (máy tính; mobile = ngăn kéo) */
.thanh-ben {
  background: linear-gradient(180deg, var(--nau-dam) 0%, var(--nau) 55%, #2A1A10 100%);
  color: var(--kem);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column; gap: var(--k8);
  padding: var(--k12) var(--k8) var(--k12);
  position: sticky; top: 0; height: 100vh; overflow: hidden;
}
.thanh-ben .logo { display: flex; align-items: center; gap: 10px; padding: var(--k4) var(--k4) var(--k8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.thanh-ben .logo-the { display: grid; place-items: center; width: 92px; height: 60px; background: #fff; border-radius: var(--bo-goc); padding: 2px; box-shadow: var(--bong); flex: none; transition: transform var(--chuyen); }
.thanh-ben .logo-the:hover { transform: scale(1.03); }
.thanh-ben .logo img { width: 88px; height: 56px; object-fit: contain; display: block; }
.thanh-ben .logo-chu { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.thanh-ben .logo-chu strong { font-size: var(--c-menu); color: #fff; white-space: nowrap; }
.thanh-ben .logo-chu .chu-thich { color: var(--kem-chu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-ben .nut-dong-keo { display: none; margin-left: auto; color: var(--kem); }
.thanh-ben nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; padding-right: 2px; }
.thanh-ben .nhom-dau {
  display: flex; align-items: center; gap: var(--k8); width: 100%; min-height: var(--vung-cham);
  padding: 0 var(--k8); border: 0; border-radius: 10px; background: transparent; color: #fff; text-align: left;
  font-size: var(--c-menu); font-weight: 700; transition: background var(--chuyen-nhanh);
}
.thanh-ben .nhom-dau:hover { background: rgba(255, 255, 255, 0.08); }
.thanh-ben .nhom-icon { width: 30px; height: 30px; border-radius: 8px; background: rgba(246, 231, 216, 0.14); color: #F2C58B; display: grid; place-items: center; flex: none; }
.thanh-ben .nhom-icon svg { width: 20px; height: 20px; }
.thanh-ben .nhom-ten { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-ben .nhom-mui { color: var(--kem-chu); transition: transform var(--chuyen); }
.thanh-ben .nhom-mui svg { width: 18px; height: 18px; display: block; }
.thanh-ben .nhom.mo .nhom-mui { transform: rotate(180deg); }
.thanh-ben .nhom-muc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-vua) var(--ease); padding: 0 0 0 10px; }
.thanh-ben .nhom-muc > * { min-height: 0; }
.thanh-ben .nhom-muc { overflow: hidden; }
.thanh-ben .nhom.mo .nhom-muc { grid-template-rows: 1fr; padding-bottom: var(--k4); }
.thanh-ben .nhom-muc .muc { visibility: hidden; transition: visibility 0s var(--t-vua); }
.thanh-ben .nhom.mo .nhom-muc .muc { visibility: visible; transition-delay: 0s; }
.thanh-ben .muc {
  display: flex; align-items: center; gap: var(--k8); min-height: 32px; padding: 2px var(--k8);
  border-radius: 8px; text-decoration: none; color: var(--kem); font-size: var(--c-thuong); line-height: 1.25;
  transition: background var(--chuyen-nhanh), color var(--chuyen-nhanh), transform var(--chuyen-nhanh);
}
.thanh-ben .muc-so { color: #F2C58B; font-weight: 700; flex: none; min-width: 26px; }
.thanh-ben .muc-ten { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-ben .muc svg { width: 14px; height: 14px; flex: none; color: var(--kem-chu); }
.thanh-ben .muc-chu-thich { display: none; }
.thanh-ben a.muc:hover { background: rgba(255, 255, 255, 0.1); color: #fff; transform: translateX(2px); }
.thanh-ben a.muc.hien-tai { background: #fff; color: var(--nau-dam); font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.thanh-ben a.muc.hien-tai .muc-so { color: var(--nau-dong); }
.thanh-ben .muc-mo { opacity: 0.45; cursor: not-allowed; }
.thanh-ben .muc-mo .muc-so { color: var(--kem-chu); }
.thanh-ben .cuoi { margin-top: auto; display: flex; flex-direction: column; gap: var(--k8); padding-top: var(--k8); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.thanh-ben .nguoi-dung { display: flex; align-items: center; gap: var(--k8); padding: 0 var(--k4); min-height: 32px; color: #fff; }
.thanh-ben .nguoi-dung .vong { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #F2C58B, var(--nau-dong)); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.thanh-ben .nguoi-dung .ten { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thanh-ben .nguoi-dung .chu-thich { color: var(--kem-chu); }
.nut-kem { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
.nut-kem:hover { background: rgba(255, 255, 255, 0.2); }
.nut-icon { display: inline-grid; place-items: center; width: var(--vung-cham); height: var(--vung-cham); border: 0; border-radius: 10px; background: transparent; color: var(--chu-2); position: relative; transition: background var(--chuyen-nhanh); flex: none; }
.nut-icon:hover { background: var(--vien-nhat); }
.nut-icon svg { display: block; }
.ngan-keo-nen { display: none; }

/* Đầu trang */
.dau-trang {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--k8) var(--k12);
  min-height: var(--cao-dau-trang); padding: var(--k8) var(--k16);
  background: var(--the); border-bottom: 1px solid var(--vien);
  position: sticky; top: 0; z-index: 10;
}
.dau-trang .logo-nho { display: none; min-height: var(--vung-cham); min-width: var(--vung-cham); align-items: center; justify-content: center; }
.dau-trang .logo-nho img { height: 30px; width: auto; display: block; }
.dau-trang h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dau-trang .giua { display: flex; align-items: center; gap: var(--k12); flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.dau-trang .phai { display: flex; align-items: center; gap: var(--k8); margin-left: auto; position: relative; }
.dau-trang #nut-menu { display: none; }
.trang-thai { display: flex; align-items: center; gap: var(--k8); white-space: nowrap; }
.trang-thai .cap-nhat { color: var(--chu-phu); }
.trang-thai .cap-nhat b { color: var(--chu); }

/* Nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k8);
  min-height: var(--vung-cham); padding: 0 var(--k16);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
  background: var(--the); color: var(--chu); font-weight: 700; font-size: var(--c-thuong);
  text-decoration: none; white-space: nowrap;
  transition: background var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh), transform var(--chuyen-nhanh), border-color var(--chuyen-nhanh);
}
.nut svg { width: 18px; height: 18px; }
.nut:hover { background: var(--vien-nhat); box-shadow: var(--bong); }
.nut:active { transform: scale(0.98); }
.nut:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.nut-chinh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nut-chinh:hover { background: var(--xanh-dam); border-color: var(--xanh-dam); }
.nut-nho { min-height: 36px; padding: 0 var(--k12); }
@media (max-width: 1023px) { .nut-nho { min-height: var(--vung-cham, 44px); } }
.nut-phu { color: var(--chu-phu); }
.nut-do { color: var(--do); border-color: var(--do-nhat); }
.nut-do:hover { background: var(--do-nhat); }

/* Nhãn */
.nhan { display: inline-flex; align-items: center; gap: var(--k4); padding: 0 var(--k8); border-radius: 999px; font-size: var(--c-thuong); line-height: 24px; font-weight: 700; white-space: nowrap; }
.nhan-vang { background: var(--vang-nhat); color: var(--vang-chu); }
.nhan-do { background: var(--do-nhat); color: var(--do); }
.nhan-xanh { background: var(--xanh-nhat); color: var(--xanh); }
.nhan-xanh-la { background: var(--xanh-la-nhat); color: var(--la-chu); }
.nhan-xam { background: var(--vien-nhat); color: var(--chu-phu); }

/* Bộ lọc kỳ */
.bo-loc { display: flex; align-items: center; gap: var(--k8); flex-wrap: wrap; }
.bo-loc-ky { display: inline-flex; background: var(--vien-nhat); border-radius: 999px; padding: 3px; }
.bo-loc-ky button {
  min-height: var(--vung-cham); padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--chu-phu); font-weight: 700;
  transition: background var(--chuyen), color var(--chuyen), box-shadow var(--chuyen);
}
.bo-loc-ky button:hover { color: var(--chu); }
.bo-loc-ky button[aria-checked="true"] { background: var(--the); color: var(--xanh); box-shadow: var(--bong); }
.bo-loc select {
  min-height: var(--vung-cham); padding: 0 var(--k12); border: 1px solid var(--vien); border-radius: 10px;
  background: var(--the); font-weight: 700; max-width: 220px;
}

/* ===== 3. Khối chung ===== */
.khoi {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong); padding: var(--k12) var(--k16);
  display: flex; flex-direction: column; gap: var(--k8); min-width: 0; min-height: 0;
  transition: box-shadow var(--chuyen), transform var(--chuyen);
}
.khoi:hover { box-shadow: var(--bong-noi); }
.khoi-dau { display: flex; align-items: center; gap: var(--k8); flex-wrap: wrap; min-height: 28px; }
.khoi-dau h2 { font-size: var(--c-menu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khoi-dau .khoi-phai { margin-left: auto; display: flex; align-items: center; gap: var(--k8); }
.khoi-than { flex: 1 1 auto; min-height: 0; min-width: 0; }
.khoi-bd .khoi-than { position: relative; overflow: hidden; }
.bd-khung { position: relative; width: 100%; height: 100%; min-height: 160px; }
.bd-khung canvas { display: block; }
.khoi-bang .khoi-than { overflow: auto; }

/* ===== 4. Ô KPI ===== */
.kpi {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  box-shadow: var(--bong); padding: var(--k12);
  display: flex; flex-direction: column; gap: var(--k4); min-width: 0; position: relative; overflow: hidden;
  transition: transform var(--chuyen), box-shadow var(--chuyen);
}
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--xanh), var(--teal)); opacity: 0.9; }
.kpi:hover { transform: scale(1.02); box-shadow: var(--bong-noi); z-index: 2; }
.kpi-chua-tin::before { background: linear-gradient(90deg, var(--vang), #FFD54F); }
.kpi-nhan { color: var(--chu-phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-nhan .chu-thich { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-cuoi .chu-thich, .cb-noi-dung .chu-thich { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-ss .chu-thich { display: none; }
.kpi-giua { display: flex; align-items: baseline; gap: var(--k8); flex-wrap: wrap; }
.kpi-so { font-size: var(--c-kpi); font-weight: 700; line-height: 1.15; white-space: nowrap; letter-spacing: -0.01em; }
.kpi-ss { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; padding: 0 6px; border-radius: 999px; line-height: 22px; white-space: nowrap; }
.kpi-ss.len { color: var(--la-chu); background: var(--xanh-la-nhat); }
.kpi-ss.giam { color: var(--do-chu); background: var(--do-nhat); }
.kpi-ss.bang { color: var(--chu-phu); background: var(--vien-nhat); }
.kpi-ss .chu-thich { font-weight: 400; }
.kpi-hinh { height: 34px; margin-top: auto; min-width: 0; }
.kpi-hinh svg { width: 100%; height: 100%; display: block; }
.kpi-thanh { height: 10px; border-radius: 5px; background: var(--vien-nhat); overflow: hidden; margin-top: auto; }
.kpi-thanh > span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--xanh)); transition: width 450ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.kpi-so.kpi-chu { font-size: var(--cc-tieu-de); white-space: normal; line-height: 1.25; }
.kpi-cuoi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 5. Thẻ cảnh báo ===== */
.cb-danh-sach { display: flex; flex-direction: column; gap: var(--k8); }
.cb {
  display: flex; align-items: flex-start; gap: var(--k8); width: 100%; text-align: left;
  background: var(--the); border: 1px solid var(--vien); border-left: var(--k4) solid var(--do);
  border-radius: 10px; padding: var(--k8) var(--k12); min-height: var(--vung-cham);
  transition: transform var(--chuyen), box-shadow var(--chuyen), background var(--chuyen-nhanh);
}
.cb, .cb:visited { text-decoration: none; color: inherit; }
.cb:hover { transform: scale(1.02); box-shadow: var(--bong-noi); background: #FFFDFC; z-index: 2; position: relative; }
.cb-vang { border-left-color: var(--vang); }
.cb-ok { border-left-color: var(--la); }
.cb-ok .cb-bieu-tuong { background: var(--la-nen); color: var(--la-chu); }
.cb-ok .cb-gia-tri { color: var(--la-chu); }
.cb-bieu-tuong { width: 32px; height: 32px; border-radius: 8px; background: var(--do-nhat); color: var(--do); display: grid; place-items: center; flex: none; }
.cb-bieu-tuong svg { width: 18px; height: 18px; }
.cb-vang .cb-bieu-tuong { background: var(--vang-nhat); color: var(--vang-chu); }
.cb-noi-dung { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.cb-tieu-de { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-gia-tri { font-size: var(--c-menu); font-weight: 700; color: var(--do); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-vang .cb-gia-tri { color: var(--vang-chu); }
.cb-mui-ten { color: var(--chu-mo); flex: none; align-self: center; }
.cb-mui-ten svg { width: 18px; height: 18px; }
.cb-them { align-self: flex-start; }
.cb-trong { display: flex; align-items: center; gap: var(--k8); color: var(--xanh-la); font-weight: 700; padding: var(--k8) 0; }
.cb-trong svg { width: 22px; height: 22px; }

/* ===== 6. Bảng ===== */
.bang-khung { overflow: auto; max-height: 100%; }
table.bang { width: 100%; border-collapse: collapse; font-size: var(--c-thuong); table-layout: fixed; }
table.bang th {
  position: sticky; top: 0; z-index: 1; background: var(--the);
  text-align: left; font-weight: 700; color: var(--chu-phu);
  padding: 6px var(--k8); border-bottom: 1px solid var(--vien); white-space: nowrap;
}
table.bang td { padding: 5px var(--k8); border-bottom: 1px solid var(--vien-nhat); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.bang th.so, table.bang td.so { text-align: right; }
table.bang th.o-tieu-de { width: 44%; }
table.bang tbody tr { transition: background var(--chuyen-nhanh); }
table.bang tbody tr:hover { background: var(--xanh-nhat); }
table.bang .stt { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--vien-nhat); color: var(--chu-phu); font-weight: 700; margin-right: 6px; font-size: var(--c-thuong); }
table.bang tbody tr:nth-child(-n+3) .stt { background: var(--xanh-nhat); color: var(--xanh); }
.o-thanh { display: flex; align-items: center; justify-content: flex-end; gap: var(--k8); min-width: 0; }
.o-thanh .thanh { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--xanh)); flex: none; transition: width 450ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.o-thanh .gia-tri { flex: none; font-variant-numeric: tabular-nums; }

/* ===== 7. Trạng thái ===== */
.skeleton { display: grid; gap: var(--k12); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.skeleton-khoi { height: 120px; border-radius: var(--bo-goc); background: linear-gradient(90deg, #E9EEF5 25%, #F6F8FB 50%, #E9EEF5 75%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.skeleton-khoi.cao { height: 260px; grid-column: 1 / -1; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.trong, .rong, .loi {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--k8);
  padding: 32px var(--k16); min-height: 180px; text-align: center; color: var(--chu-phu);
  background: var(--the); border: 1px dashed var(--vien); border-radius: var(--bo-goc);
}
.trong svg, .rong svg, .loi svg { width: 40px; height: 40px; opacity: 0.7; }
.loi { color: var(--do); border-color: var(--do-nhat); }
.loi .nut { color: var(--chu); }

/* Dải dữ liệu cũ (503 có cache) */
.du-lieu-cu { display: flex; align-items: center; gap: var(--k8); flex-wrap: wrap; background: var(--vang-nhat); color: var(--vang-chu); border: 1px solid #F5D98B; border-radius: 10px; padding: var(--k4) var(--k12); margin-bottom: var(--k12); font-weight: 700; }
.du-lieu-cu .nut { margin-left: auto; }
.so { font-variant-numeric: tabular-nums; }

/* Toast */
#toast-khung { position: fixed; right: var(--k16); top: var(--k16); display: flex; flex-direction: column; gap: var(--k8); z-index: 60; pointer-events: none; max-width: calc(100vw - 32px); }
.toast { pointer-events: auto; background: var(--chu); color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--bong-noi); animation: toast-vao var(--chuyen) both; max-width: 360px; }
.toast.toast-loi { background: var(--do); }
.toast.toast-canh-bao { background: var(--vang); color: var(--chu); }
.toast.toast-ok { background: var(--xanh-la); }
.toast.an { opacity: 0; transform: translateY(-6px); transition: opacity var(--chuyen), transform var(--chuyen); }
@keyframes toast-vao { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== 8. Thanh dưới + sheet (mobile) ===== */
.thanh-duoi {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--the); border-top: 1px solid var(--vien);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 8px rgba(13, 71, 161, 0.06);
}
.thanh-duoi a, .thanh-duoi button {
  min-height: var(--cao-thanh-duoi); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--chu-phu); text-decoration: none; border: 0; background: none; padding: 0 2px; min-width: 0;
  font-size: var(--c-thuong); line-height: 1.1; transition: color var(--chuyen-nhanh);
}
.thanh-duoi a span, .thanh-duoi button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.thanh-duoi svg { width: 22px; height: 22px; }
.thanh-duoi .hien-tai { color: var(--xanh); font-weight: 700; }
.sheet-nen { position: fixed; inset: 0; background: rgba(31, 41, 55, 0.45); z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--chuyen); }
.sheet-nen.mo { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  background: var(--the); border-radius: var(--bo-l) var(--bo-l) 0 0; box-shadow: var(--bong-noi);
  padding: var(--k8) var(--k16) calc(var(--k16) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); visibility: hidden; pointer-events: none;
  transition: transform var(--chuyen), visibility var(--chuyen);
}
.sheet.mo { transform: none; visibility: visible; pointer-events: auto; }
.sheet .tay-keo { width: 40px; height: 4px; border-radius: 2px; background: var(--vien); margin: 0 auto var(--k8); }
.sheet a, .sheet button { display: flex; align-items: center; gap: var(--k12); min-height: 48px; width: 100%; padding: 0 var(--k8); border: 0; background: none; border-radius: 10px; font-size: var(--c-menu); font-weight: 700; color: var(--chu); text-decoration: none; text-align: left; transition: background var(--chuyen), color var(--chuyen); }
.sheet a svg, .sheet button svg { width: 22px; height: 22px; color: var(--chu-phu); }
.sheet a:hover, .sheet button:hover { background: var(--vien-nhat); }
.sheet a.hien-tai { background: var(--xanh-nhat); color: var(--xanh); }
.sheet .sheet-tach { height: 1px; background: var(--vien); margin: var(--k4) 0; }

/* Gập (mobile) */
details.gap > summary { list-style: none; cursor: pointer; min-height: var(--vung-cham); display: flex; align-items: center; justify-content: space-between; gap: var(--k8); background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 0 var(--k16); font-size: var(--c-menu); font-weight: 700; }
details.gap > summary::-webkit-details-marker { display: none; }
details.gap > summary svg { width: 20px; height: 20px; color: var(--chu-phu); transition: transform var(--chuyen); }
details.gap[open] > summary svg { transform: rotate(180deg); }
details.gap .gap-than { display: flex; flex-direction: column; gap: var(--k12); padding-top: var(--k12); }

/* ===== 9. Màn Tổng quan ===== */
.tq { display: grid; gap: var(--k12); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1.25fr) minmax(0, 1fr); height: 100%; min-height: 0; }
.tq-kpi { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--k12); }
.tq-bd1 { grid-column: span 7; }
.tq-bd2 { grid-column: span 5; }
.tq-bang { grid-column: span 7; }
.tq-cb { grid-column: span 5; }
.tq-cb .khoi-than { overflow: auto; }

/* ===== 10. Màn đăng nhập ===== */
.dang-nhap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--k16);
  background: radial-gradient(900px 500px at 15% -10%, var(--xanh-nhat), transparent 70%), radial-gradient(700px 400px at 110% 110%, var(--teal-nhat), transparent 70%), var(--nen);
}
.dang-nhap-the { width: 100%; max-width: 400px; background: var(--the); border-radius: var(--bo-l); box-shadow: var(--bong-noi); padding: var(--k16); display: flex; flex-direction: column; gap: var(--k12); animation: man-vao var(--chuyen) both; }
.dang-nhap-the .logo { display: flex; justify-content: center; padding-bottom: var(--k4); }
.dang-nhap-the .logo img { height: 48px; width: auto; }
.dang-nhap-the h1 { text-align: center; }
.dang-nhap-the .chu-thich { text-align: center; display: block; }
.truong { display: flex; flex-direction: column; gap: var(--k4); }
.truong label { font-weight: 700; }
.truong input { min-height: var(--vung-cham); width: 100%; border: 1px solid var(--vien); border-radius: 10px; padding: 0 var(--k12); background: var(--the); transition: border-color var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh); }
.truong input:focus { outline: none; border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-mo); }
.dang-nhap-the .nut-chinh { width: 100%; margin-top: var(--k4); }
.loi-dang-nhap { background: var(--do-nhat); color: var(--do); border-radius: 10px; padding: var(--k8) var(--k12); font-weight: 700; }

/* ===== 11. Máy tính bảng 641–1023 ===== */
@media (max-width: 1023px) {
  .app { display: block; }
  .thanh-ben { display: none; }
  .thanh-duoi { display: grid; }
  .dau-trang .logo-nho { display: inline-flex; }
  .dau-trang .phai .nut-dang-xuat { display: none; }
  #man { padding-bottom: calc(var(--cao-thanh-duoi) + var(--k16) + env(safe-area-inset-bottom, 0px)); }
  #man > .man { height: auto; }
  #toast-khung { top: auto; bottom: calc(var(--cao-thanh-duoi) + var(--k16) + env(safe-area-inset-bottom, 0px)); left: var(--k16); right: var(--k16); align-items: center; }
  .tq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .tq-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tq-bd1, .tq-bd2, .tq-bang, .tq-cb { grid-column: span 1; }
  .khoi-bd { height: 320px; }
  .khoi-bang { max-height: 420px; }
}

/* ===== 12. Điện thoại ≤ 640 ===== */
@media (max-width: 640px) {
  .dau-trang { padding: var(--k8) var(--k16); gap: var(--k8); }
  .dau-trang h1 { font-size: var(--c-h1); flex: 1 1 auto; }
  .dau-trang .giua { flex-basis: 100%; order: 3; }
  .dau-trang .phai { margin-left: 0; }
  .nut-nho { min-height: var(--vung-cham); }
  .bo-loc-ky { display: flex; width: 100%; }
  #vung-loc { flex: 1 1 100%; }
  .bo-loc-ky button { flex: 1 1 0; min-height: var(--vung-cham); padding: 0 var(--k4); white-space: nowrap; }
  .bo-loc select { max-width: 100%; width: 100%; }
  .tq { display: flex; flex-direction: column; gap: var(--k12); }
  .tq-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k8); }
  .kpi { padding: var(--k12) 10px; }
  .kpi-so { font-size: var(--c-kpi); }
  .khoi { padding: var(--k12); }
  .khoi-bd { height: 280px; }
  .khoi-bang { max-height: none; }
  .khoi-bang .khoi-than { overflow: visible; }
  .bang-khung { overflow: visible; max-height: none; }
  table.bang, table.bang tbody, table.bang tr, table.bang td { display: block; }
  table.bang thead { display: none; }
  table.bang tr { border: 1px solid var(--vien); border-radius: 10px; padding: var(--k8) var(--k12); margin-bottom: var(--k8); background: var(--the); }
  table.bang tr:last-child { margin-bottom: 0; }
  table.bang td { display: flex; justify-content: space-between; align-items: center; gap: var(--k8); padding: 3px 0; border: 0; white-space: normal; max-width: none; }
  table.bang td::before { content: attr(data-nhan); color: var(--chu-phu); flex: none; }
  table.bang td.o-tieu-de { display: block; font-weight: 700; padding-bottom: var(--k4); }
  table.bang td.o-tieu-de::before { display: none; }
  table.bang td.so .o-thanh { flex: 1 1 auto; }
  .cb { padding: var(--k8) 10px; }
  .dang-nhap-the { padding: 24px 20px; }
}

/* ===== 13. Máy tính ≥ 1024: vừa 100vh, không cuộn trang ===== */
@media (min-width: 1024px) {
  .tq-day { grid-column: 1 / -1; }
  .kpi-so.kpi-chu { font-size: var(--cc-tieu-de); white-space: normal; line-height: 1.25; }
  .app { height: 100vh; overflow: hidden; }
  .chinh { height: 100vh; }
  #man { overflow: hidden; }
  #man:has(.tq6) { overflow: auto; }
  .sheet, .sheet-nen { display: none; }
}

/* ===== 14. Giảm chuyển động ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .kpi:hover, .cb:hover { transform: none; }
}

/* ===== 15. Vỏ 6x6 (25/10): đầu trang mới ===== */
.tim-kiem { position: relative; display: flex; align-items: center; gap: var(--k8); flex: 1 1 260px; max-width: 460px; min-width: 0; background: var(--nen); border: 1px solid var(--vien); border-radius: 999px; padding: 0 var(--k12); min-height: var(--vung-cham); color: var(--chu-3); transition: box-shadow var(--chuyen-nhanh), border-color var(--chuyen-nhanh); }
.tim-kiem:focus-within { border-color: var(--xanh); box-shadow: 0 0 0 3px var(--xanh-mo); background: var(--the); }
.tim-kiem svg { flex: none; }
.tim-kiem input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; min-height: 40px; color: var(--chu); }
.tim-kiem input::placeholder { color: var(--chu-mo); }
.tim-ket-qua { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--the); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong-noi); padding: var(--k4); z-index: 40; display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.tim-muc { display: flex; align-items: center; gap: var(--k8); min-height: 40px; padding: 4px var(--k8); border-radius: 8px; text-decoration: none; color: var(--chu); }
.tim-muc .muc-so { color: var(--nau-dong); font-weight: 700; flex: none; min-width: 28px; }
.tim-muc .muc-ten { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tim-muc .chu-thich { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
a.tim-muc:hover { background: var(--xanh-nhat); }
.tim-muc.muc-mo { opacity: 0.55; cursor: not-allowed; }
.tim-trong { padding: var(--k8) var(--k12); }
.khoang-ngay { display: inline-flex; align-items: center; gap: var(--k8); min-height: var(--vung-cham); padding: 0 var(--k12); border: 1px solid var(--vien); border-radius: 10px; background: var(--the); color: var(--chu); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; transition: background var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh); }
.khoang-ngay:hover { background: var(--vien-nhat); box-shadow: var(--bong); }
.khoang-ngay svg { color: var(--chu-3); }
.khoang-ngay-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--the); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong-noi); padding: var(--k4); z-index: 40; display: flex; flex-direction: column; min-width: 250px; }
.khoang-ngay-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-height: var(--vung-cham); padding: 4px var(--k12); border: 0; border-radius: 8px; background: transparent; text-align: left; }
.khoang-ngay-menu button:hover { background: var(--xanh-nhat); }
.khoang-ngay-menu button[aria-checked="true"] { background: var(--xanh-nhat); color: var(--xanh); }
.chuong .chuong-so { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--do); color: #fff; font-size: var(--c-chu-thich); font-weight: 700; display: grid; place-items: center; line-height: 1; border: 2px solid var(--the); }
.chuong .chuong-so.vang { background: var(--vang); }
.chuong-bang { position: absolute; right: 0; top: calc(100% + 6px); width: min(380px, calc(100vw - 32px)); background: var(--the); border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong-noi); padding: var(--k12); z-index: 40; display: flex; flex-direction: column; gap: var(--k8); max-height: 70vh; overflow: auto; }
.chuong-dau { display: flex; align-items: baseline; gap: var(--k8); }
.chuong-them { font-weight: 700; text-align: center; padding: var(--k4); }
.ho-so { display: flex; align-items: center; gap: var(--k8); min-height: var(--vung-cham); padding: 0 var(--k4); }
.ho-so .vong { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--nau-dong), var(--nau-dam)); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.ho-so-chu { display: flex; flex-direction: column; line-height: 1.15; }
.ho-so-chu b { white-space: nowrap; }
.lien-ket-nho { border: 0; background: none; color: var(--xanh); font-weight: 700; padding: 0; min-height: 28px; }
.lien-ket-nho:hover { text-decoration: underline; }

/* ===== 16. Màn Tổng quan 6x6 ===== */
.tq6 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--k12); align-content: start; }
.tq6-trai { display: flex; flex-direction: column; gap: var(--k12); min-width: 0; }
.tq6-phai { display: flex; flex-direction: column; gap: var(--k12); min-width: 0; }
.tq6-chan { grid-column: 1 / -1; }
.tq6-banner { position: relative; min-height: 118px; border-radius: var(--bo-goc); overflow: hidden; background: linear-gradient(90deg, #F6E7D8, #EFD6BD); box-shadow: var(--bong); display: flex; align-items: center; padding: var(--k16) 20px; }
.tq6-banner-hinh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.tq6-banner-chu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--k4); max-width: 60%; }
.tq6-banner-chu h2 { font-size: 40px; line-height: 1; color: var(--nau-dam); letter-spacing: -0.02em; }
.tq6-banner-chu p { font-size: var(--c-menu); color: var(--nau-sang); font-weight: 400; }
.tq6-banner-khau-hieu { position: absolute; right: 20px; top: 14px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; color: var(--nau-dong); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--c-menu); line-height: 1.2; }
.tq6-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1.35fr)) repeat(3, minmax(0, 1fr)); gap: var(--k12); }
.tq6-kpi .kpi { padding: var(--k12); gap: 6px; }
.tq6-kpi .kpi::before { display: none; }
.kpi-mau-la { border-color: var(--la-nen); }
.kpi-mau-do { border-color: var(--do-nen); }
.kpi-mau-cam { border-color: var(--vang-nen); }
.kpi-mau-xanh { border-color: var(--xanh-nhat); }
.kpi-mau-tim { border-color: var(--tim-nen); }
.kpi-mau-nau { border-color: var(--kem-chu); }
.kpi-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-right: var(--k8); vertical-align: middle; background: var(--xanh-nhat); color: var(--xanh); }
.kpi-icon svg { width: 20px; height: 20px; }
.kpi-mau-la .kpi-icon { background: var(--la-nen); color: var(--la-chu); }
.kpi-mau-do .kpi-icon { background: var(--do-nen); color: var(--do); }
.kpi-mau-cam .kpi-icon { background: var(--cam-nen); color: var(--cam); }
.kpi-mau-tim .kpi-icon { background: var(--tim-nen); color: var(--tim); }
.kpi-mau-nau .kpi-icon { background: var(--kem); color: var(--nau-dong); }
.tq6-kpi .kpi-nhan { display: flex; align-items: center; color: var(--chu); font-weight: 700; white-space: normal; }
.tq6-kpi .kpi-nhan .chu-thich { display: none; }
.tq6-kpi .kpi-lon .kpi-so { font-size: 30px; }
.tq6-kpi .kpi-nho .kpi-so { font-size: var(--c-kpi); }
.tq6-kpi .kpi-nho .kpi-icon { width: 30px; height: 30px; }
.tq6-kpi .kpi-hinh { height: 38px; }
.tq6-kpi .kpi-nho .kpi-hinh { height: 28px; }
.kpi-them { color: var(--chu-2); }
.kpi-trong .kpi-so { color: var(--chu-3); }
.tq6-giua { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--k12); }
.tq6-giua .khoi-bd { height: 330px; }
.tq6-giua .bd-khung { min-height: 220px; }
.tq6-tien-do .khoi-than { overflow: auto; max-height: 282px; }
.bang-tien-do th.o-tieu-de { width: 36%; }
.tien-do-o { display: flex; align-items: center; gap: 6px; }
.tien-do { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--vien-nhat); overflow: hidden; min-width: 50px; }
.tien-do-day { display: block; height: 100%; border-radius: 4px; background: var(--xanh); transition: width var(--t-cham) var(--ease); }
.tien-do-day.xong { background: var(--la); }
.tien-do-day.cham { background: var(--do); }
.tq6-duoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--k12); }
.cp-ds { display: flex; flex-direction: column; gap: 6px; }
.cp-dong { display: grid; grid-template-columns: 30px 96px minmax(0, 1fr) 64px; align-items: center; gap: var(--k8); min-height: 30px; }
.cp-icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.cp-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-thanh { display: flex; align-items: center; gap: 6px; height: 16px; background: var(--vien-nhat); border-radius: 8px; overflow: hidden; position: relative; }
.cp-day { display: block; height: 100%; border-radius: 8px; transition: width var(--t-cham) var(--ease); }
.cp-pct { position: absolute; left: 6px; top: 0; line-height: 16px; color: var(--chu); font-size: var(--c-thuong); font-weight: 700; mix-blend-mode: multiply; }
.cp-gt { text-align: right; white-space: nowrap; }
.cp-mau-0 { background: var(--bd-cp); } .cp-mau-1 { background: var(--vang); } .cp-mau-2 { background: var(--xanh); } .cp-mau-3 { background: var(--tim); } .cp-mau-4 { background: var(--do); } .cp-mau-5 { background: var(--la); } .cp-mau-6 { background: var(--bd-5); }
.cp-day.cp-mau-0 { background: linear-gradient(90deg, #F8C77A, var(--bd-cp)); }
.swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k8); }
.swot-o { border-radius: 10px; padding: 10px var(--k12); border: 1px solid; min-height: 110px; position: relative; overflow: hidden; }
.swot-dau { display: flex; align-items: center; gap: var(--k8); margin-bottom: 6px; }
.swot-chu { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--c-menu); flex: none; }
.swot-icon { margin-left: auto; opacity: 0.35; }
.swot-o ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: var(--k4); }
.swot-o li { line-height: 1.3; }
.swot-ky-s { background: var(--la-nen); border-color: var(--la-nen); } .swot-ky-s .swot-chu { background: var(--la); } .swot-ky-s .swot-icon { color: var(--la); }
.swot-ky-w { background: var(--do-nen); border-color: var(--do-nen); } .swot-ky-w .swot-chu { background: var(--do); } .swot-ky-w .swot-icon { color: var(--do); }
.swot-ky-o { background: var(--xanh-nhat); border-color: var(--xanh-nhat); } .swot-ky-o .swot-chu { background: var(--xanh); } .swot-ky-o .swot-icon { color: var(--xanh); }
.swot-ky-t { background: var(--cam-nen); border-color: var(--vang-nen); } .swot-ky-t .swot-chu { background: var(--cam); } .swot-ky-t .swot-icon { color: var(--cam); }
.cbn-ds { display: flex; flex-direction: column; gap: 6px; }
.cbn { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--k8); padding: 6px var(--k8); border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background var(--chuyen-nhanh), border-color var(--chuyen-nhanh), transform var(--chuyen-nhanh); }
.cbn:hover { background: var(--nen); border-color: var(--vien); transform: translateX(2px); }
.cbn-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--do-nen); color: var(--do); }
.cbn-vang .cbn-icon { background: var(--vang-nen); color: var(--vang-chu); }
.cbn-ok .cbn-icon { background: var(--la-nen); color: var(--la-chu); }
.cbn-nd { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cbn-nd b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbn-do .cbn-nd b { color: var(--do-chu); }
.cbn-phu { color: var(--chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cbn-gio { align-self: flex-start; white-space: nowrap; }
.lich-ds { display: flex; flex-direction: column; gap: 4px; }
.lich-dong { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr); align-items: center; gap: 6px; min-height: 34px; padding: 2px 6px; border-radius: 8px; }
.lich-dong:hover { background: var(--nen); }
.lich-icon { color: var(--nau-dong); display: grid; place-items: center; }
.lich-gio { white-space: nowrap; }
.lich-viec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lich-ghi-chu { grid-column: 3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-khau-hieu { border-radius: var(--bo-goc); overflow: hidden; box-shadow: var(--bong); height: 110px; }
.tq6-khau-hieu img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tq6-chan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k12); }
.tq6-chan-o { display: flex; align-items: center; gap: var(--k8); background: linear-gradient(90deg, var(--kem), var(--the)); border: 1px solid #E8D3BE; border-radius: var(--bo-goc); padding: var(--k8) var(--k12); min-height: 60px; }
.tq6-chan-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--nau-dong); color: #fff; display: grid; place-items: center; flex: none; }
.tq6-chan-chu { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tq6-chan-chu b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-chan-chu .chu-thich { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-chan-mui { margin-left: auto; color: var(--nau-dong); flex: none; }
.tq6-top summary { background: var(--the); }

/* 1024–1279: cột phải hẹp, KPI 3 cột */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tq6 { grid-template-columns: minmax(0, 1fr) 260px; }
  .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq6-giua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-giua .tq6-bd6 { grid-column: 1 / -1; }
  .tq6-banner-chu h2 { font-size: 32px; }
}

/* ≤1023: ngăn kéo menu + 1 cột */
@media (max-width: 1023px) {
  .dau-trang #nut-menu { display: inline-grid; }
  .dau-trang .ho-so, .dau-trang .an-mobile { display: none; }
  .tim-kiem { flex: 1 1 160px; }
  .thanh-ben { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-105%); transition: transform var(--chuyen); box-shadow: none; }
  body.keo-mo .thanh-ben { transform: none; box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35); }
  .thanh-ben .nut-dong-keo { display: inline-grid; }
  .ngan-keo-nen { display: block; position: fixed; inset: 0; background: rgba(20, 10, 4, 0.5); z-index: 49; opacity: 0; pointer-events: none; transition: opacity var(--chuyen); }
  body.keo-mo .ngan-keo-nen { opacity: 1; pointer-events: auto; }
  .tq6 { grid-template-columns: minmax(0, 1fr); }
  .tq6-phai { order: 1; }
  .tq6-trai { order: 0; }
  .tq6-chan { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq6-giua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-giua .tq6-bd6 { grid-column: 1 / -1; }
  .tq6-duoi { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .dau-trang { gap: var(--k8); }
  .dau-trang h1 { font-size: var(--c-menu); flex: 1 1 auto; }
  .tim-kiem { order: 4; flex: 1 1 100%; max-width: none; min-height: 40px; }
  .tim-kiem input { min-height: 36px; }
  .dau-trang .phai { margin-left: auto; gap: var(--k4); }
  .khoang-ngay { padding: 0 var(--k8); }
  .khoang-ngay #khoang-ngay-chu { display: none; }
  .khoang-ngay-menu, .chuong-bang { position: fixed; left: var(--k16); right: var(--k16); top: calc(var(--cao-dau-trang) + 8px); width: auto; }
  .dau-trang .giua { order: 5; }
  .tq6 { gap: var(--k8); }
  .tq6-banner { min-height: 104px; padding: var(--k12) var(--k16); }
  .tq6-banner-chu { max-width: 70%; }
  .tq6-banner-chu h2 { font-size: 28px; }
  .tq6-banner-chu p { font-size: var(--c-thuong); }
  .tq6-banner-khau-hieu { display: none; }
  .tq6-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k8); }
  .tq6-kpi .kpi-lon .kpi-so { font-size: var(--c-kpi); }
  .tq6-kpi .kpi { padding: 10px; }
  .kpi-icon { width: 28px; height: 28px; margin-right: 6px; }
  .tq6-giua, .tq6-duoi, .tq6-phai, .tq6-trai { display: flex; flex-direction: column; gap: var(--k8); }
  .tq6-giua .khoi-bd { height: 280px; }
  .tq6-tien-do .khoi-than { max-height: none; overflow: visible; }
  .bang-tien-do td.so::before { content: attr(data-nhan); }
  .tien-do-o { flex: 1 1 auto; }
  .cp-dong { grid-template-columns: 28px 84px minmax(0, 1fr) 56px; }
  .swot { grid-template-columns: minmax(0, 1fr); }
  .tq6-chan { grid-template-columns: minmax(0, 1fr); gap: var(--k8); }
  .tq6-chan-o { min-height: 52px; }
  .tq6-khau-hieu { height: 96px; }
}

/* ===== 17. Đèn trạng thái + điểm cần khắc phục + thiếu nguồn ===== */
.den { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--chu-mo); box-shadow: 0 0 0 2px rgba(154, 167, 184, 0.25); }
.den-xanh { background: var(--la); box-shadow: 0 0 0 2px var(--la-nen), 0 0 8px var(--la); }
.den-vang { background: var(--vang); box-shadow: 0 0 0 2px var(--vang-nen), 0 0 8px var(--vang); }
.den-do { background: var(--do); box-shadow: 0 0 0 2px var(--do-nen), 0 0 8px var(--do); animation: den-nhay 1.6s ease-in-out infinite; }
.den-xam { background: var(--chu-mo); box-shadow: 0 0 0 2px var(--vien-mo); }
@keyframes den-nhay { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.thanh-ben .nhom-dau .den { margin-right: 2px; }
.tq6-kpi .kpi-nhan .den { margin-left: auto; }
.kp-ds { display: flex; flex-direction: column; gap: 4px; }
.kp-dong { display: grid; grid-template-columns: 14px minmax(0, 1fr) 18px; align-items: center; gap: var(--k8); padding: 6px var(--k8); border-radius: 8px; text-decoration: none; color: inherit; transition: background var(--chuyen-nhanh), transform var(--chuyen-nhanh); }
.kp-dong:hover { background: var(--nen); transform: translateX(2px); }
.kp-nd { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.kp-nd b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-viec { color: var(--chu-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-thieu { background: var(--the); border: 1px dashed var(--vien); border-radius: var(--bo-goc); padding: 0 var(--k12); }
.tq6-thieu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--k8); min-height: var(--vung-cham); color: var(--chu-2); }
.tq6-thieu summary::-webkit-details-marker { display: none; }
.tq6-thieu-ds { margin: 0 0 var(--k12); padding-left: 18px; columns: 1; color: var(--chu-2); line-height: 1.45; }
.tq6 .khoi:hover { transform: translateY(-1px); }
.skeleton-6x6 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--k12); }
.skeleton-6x6 .skeleton-khoi.banner { height: 118px; grid-column: 1; }
.skeleton-6x6 .skeleton-kpi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--k12); }
.skeleton-6x6 .skeleton-kpi .skeleton-khoi { height: 150px; }
.skeleton-6x6 .skeleton-giua { display: grid; grid-template-columns: 1.55fr 1fr 1.1fr; gap: var(--k12); }
.skeleton-6x6 .skeleton-giua .skeleton-khoi { height: 330px; }
.skeleton-6x6 .skeleton-phai { display: flex; flex-direction: column; gap: var(--k12); }
.skeleton-6x6 .skeleton-phai .skeleton-khoi { height: 220px; }
@media (max-width: 1023px) { .skeleton-6x6 { grid-template-columns: minmax(0, 1fr); } .skeleton-6x6 .skeleton-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skeleton-6x6 .skeleton-giua { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .skeleton-6x6 .skeleton-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skeleton-6x6 .skeleton-giua { grid-template-columns: 1fr; } .skeleton-6x6 .skeleton-kpi .skeleton-khoi { height: 120px; } }
@media (prefers-reduced-motion: reduce) { .den-do { animation: none; } .tq6 .khoi:hover, .kp-dong:hover, .cbn:hover { transform: none; } }
.skeleton-6x6 .skeleton-trai { display: flex; flex-direction: column; gap: var(--k12); min-width: 0; }
a.lich-dong { text-decoration: none; color: inherit; }
.lich-pos_treo .lich-icon, .lich-canh_bao .lich-icon { color: var(--do); }
.lich-viec { white-space: normal; line-height: 1.25; }
/* Đầu trang gọn 1 hàng (25/10): kỳ chọn ở ô khoảng ngày, nút Làm mới/In chỉ icon, Đăng xuất ở thanh bên/sheet */
.dau-trang .bo-loc-ky { display: none; }
.dau-trang #nut-dang-xuat { display: none; }
.dau-trang .an-mobile { display: none; }
.dau-trang #nut-lam-moi, .dau-trang #nut-in { min-width: var(--vung-cham); padding: 0 var(--k8); }
.dau-trang h1 { font-size: 20px; }
.chuong .chuong-so { font-size: var(--c-thuong); min-width: 20px; height: 20px; top: 2px; right: 2px; }
.thanh-ben .nhom-ten { white-space: normal; line-height: 1.15; font-size: 16px; }
.thanh-ben .logo-chu strong { font-size: 16px; }
@media (max-width: 640px) { .dau-trang h1 { font-size: 18px; } }
/* Tinh chỉnh sau chụp 25/10 */
@media (min-width: 1024px) { .dau-trang { flex-wrap: nowrap; } .dau-trang .giua { flex: 0 1 auto; } .tim-kiem { flex: 1 1 200px; max-width: 380px; } .trang-thai { font-size: var(--c-thuong); } }
.tq6-duoi { align-items: start; }
.bang-tien-do { table-layout: fixed; }
.bang-tien-do th:nth-child(1) { width: 24%; } .bang-tien-do th.o-tieu-de { width: 30%; } .bang-tien-do th:nth-child(3) { width: 12%; } .bang-tien-do th:nth-child(4) { width: 20%; } .bang-tien-do th:nth-child(5) { width: 14%; }
.bang-tien-do td .nhan { padding: 0 6px; line-height: 22px; }
.tq6-giua .khoi-bd { height: 360px; }

/* Vòng tinh chỉnh 2 (25/10): KPI 6 cột đều, nhãn 1 dòng; tiến độ 2 dòng/mục */
@media (min-width: 1024px) { .tq6-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tq6-kpi .kpi { min-height: 150px; }
.tq6-kpi .kpi-nhan { white-space: nowrap; overflow: hidden; }
.tq6-kpi .kpi-nhan > .kpi-icon { flex: none; }
.tq6-kpi .kpi-nhan .den { flex: none; margin-left: var(--k8); }
.tq6-kpi .kpi-lon .kpi-so, .tq6-kpi .kpi-nho .kpi-so { font-size: var(--cc-kpi); }
.tq6-kpi .kpi-giua { flex-wrap: nowrap; min-width: 0; }
.tq6-kpi .nhan-chua-tin { display: none; }
.tq6-kpi .kpi-cuoi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-kpi .kpi-cuoi .chu-thich { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tq6-kpi .kpi-hinh { height: 32px; }
.tq6-tien-do .khoi-than { overflow: auto; max-height: 300px; }
.td-ds { display: flex; flex-direction: column; gap: 4px; }
.td-dong { display: flex; flex-direction: column; gap: 3px; padding: 5px 6px; border-radius: 8px; border-bottom: 1px solid var(--vien-nhat); }
.td-dong:hover { background: var(--nen); }
.td-1, .td-2 { display: flex; align-items: center; gap: var(--k8); min-width: 0; }
.td-ma { flex: none; color: var(--chu-2); }
.td-sp { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.td-sl { flex: none; margin-left: auto; text-align: right; }
.td-2 .tien-do { flex: 0 0 60px; min-width: 60px; }
.td-pct { flex: none; min-width: 36px; }
.td-2 .nhan { margin-left: auto; padding: 0 6px; line-height: 20px; }
@media (max-width: 640px) { .tq6-kpi .kpi { min-height: 128px; } .tq6-tien-do .khoi-than { max-height: none; } }
.tq6-kpi .kpi { position: relative; }
.tq6-kpi .kpi-nhan .den { position: absolute; top: 10px; right: 10px; margin: 0; }
.tq6-kpi .kpi-nhan { padding-right: 18px; text-overflow: ellipsis; }
.tq6-kpi .kpi-icon { width: 28px; height: 28px; margin-right: 6px; }
.tq6-kpi .kpi-giua { flex-wrap: wrap; row-gap: 2px; }
.thanh-ben .nhom-muc-trong { display: flex; flex-direction: column; min-height: 0; }

/* QA 25/10: D4 D14 D21 D25 */
.lien-ket-nho { transition: color var(--t-nhanh) var(--ease), background var(--t-nhanh) var(--ease); }
.tim-kiem { height: var(--vung-cham); flex: 0 1 300px; width: 300px; }
.trang-thai { flex: none; }
.dau-trang .giua { min-height: var(--vung-cham); }
.khoang-ngay { height: var(--vung-cham); min-width: 236px; justify-content: center; }
.nut-icon.chuong { width: var(--vung-cham); height: var(--vung-cham); }
.ho-so { width: 120px; }
@media (max-width: 1023px) {
  .thanh-ben .muc { min-height: var(--vung-cham); }
  .thanh-ben .nhom-dau { min-height: 48px; }
  .tim-kiem { width: auto; }
  .ho-so { width: auto; }
  .tq6, .tq6-trai, .tq6-phai { position: static; height: auto; }
  .tq6-top { position: static; }
}
@media (max-width: 640px) {
  .tq6 { display: flex; flex-direction: column; }
  .tq6-trai, .tq6-phai, .tq6-chan { order: 0; }
  .tq6-phai { order: 1; }
  .tq6-chan { order: 2; }
  .tim-kiem { height: 40px; }
  .khoang-ngay { min-width: 0; }
}
/* Vòng hoàn hảo 25/10: chống chồng lấn, chống CLS */
details.gap:not([open]) > .gap-than, details.tq6-thieu:not([open]) > .tq6-thieu-ds { display: none; }
.dau-trang { height: var(--cao-dau-trang); min-height: var(--cao-dau-trang); overflow: visible; }
.dau-trang .giua { width: 240px; flex: 0 0 240px; min-width: 0; overflow: hidden; white-space: nowrap; }
.dau-trang h1 { flex: 0 1 220px; min-width: 0; }
#man { min-height: calc(100vh - var(--cao-dau-trang)); }
.skeleton-6x6 .skeleton-kpi .skeleton-khoi { height: 150px; }
.skeleton-6x6 .skeleton-giua .skeleton-khoi { height: 360px; }
.skeleton-6x6 .skeleton-phai .skeleton-khoi { height: 380px; }
.skeleton-khoi { height: 150px; }
.skeleton-khoi.cao { height: 320px; }
@media (max-width: 1023px) {
  body:not(.keo-mo) .thanh-ben { visibility: hidden; transition: transform var(--chuyen), visibility 0s var(--t-vua); }
  body.keo-mo .thanh-ben { visibility: visible; transition-delay: 0s; }
  .dau-trang { height: auto; }
  .dau-trang .giua { width: auto; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .thanh-ben .muc, .thanh-ben a.muc, .thanh-ben span.muc { min-height: var(--vung-cham); }
  .tq6 { display: flex; flex-direction: column; position: static; }
  .tq6-trai, .tq6-phai { display: flex; flex-direction: column; position: static; height: auto; flex: none; }
  .tq6-phai { order: 1; }
}
@media (max-width: 640px) {
  .dau-trang .giua { flex-wrap: nowrap; height: var(--vung-cham); overflow: hidden; }
  #vung-loc { flex: 1 1 auto; min-width: 0; min-height: var(--vung-cham); }
  .bo-loc select { width: 100%; max-width: 100%; }
  .trang-thai { flex: 0 1 auto; overflow: hidden; }
  .trang-thai .cap-nhat { display: none; }
}

/* ===== 18. Vòng "đẹp từng mm" 25/10: DeepSeek 90 + 100 điểm ảnh + 4 bậc màn hình ===== */
.chu-thich, .nho-12 { font-size: var(--cc-chu-thich); font-style: italic; }
.lien-ket-nho { min-height: var(--vung-cham); padding: 0 var(--k12); display: inline-flex; align-items: center; border-radius: var(--bo-goc); font-size: var(--c-thuong); }
.tim-muc { min-height: var(--vung-cham); }
.lich-dong { min-height: var(--vung-cham); padding: var(--k4) var(--k8); }
.ho-so { width: auto; min-width: 120px; max-width: 160px; }
.kpi.kpi-bam { cursor: pointer; transition: transform var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh); }
.kpi.kpi-bam:focus-visible, .cb:focus-visible, a.cbn:focus-visible, a.kp-dong:focus-visible, a.lich-dong:focus-visible, .bo-loc-ky button:focus-visible, .thanh-ben .muc:focus-visible, .thanh-ben .nhom-dau:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.cb { transition: transform var(--chuyen-nhanh), box-shadow var(--chuyen-nhanh), background var(--chuyen-nhanh); }
.bo-loc-ky button:hover { background: rgba(255, 255, 255, 0.6); }
.bo-loc select { border-radius: var(--bo-goc); }
.tien-do-day { min-width: 4px; }
.tq6-top summary { list-style: none; }
.tq6-top summary::-webkit-details-marker { display: none; }
a.cbn:hover, a.kp-dong:hover, a.lich-dong:hover { background: var(--nen); }
.trang-thai { gap: var(--k4); }
.trang-thai .cap-nhat { display: inline-flex; gap: var(--k4); }
/* #01-#03 banner · #05-#11 KPI · #18-#22 giữa · #24-#27 SWOT · #28-#33 cột phải · #81-#91 vỏ */
.tq6-banner-chu h2 { color: var(--nau-dam); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
.tq6-banner-khau-hieu { background: rgba(255, 255, 255, 0.62); padding: 4px 10px; border-radius: var(--bo-s); }
.tq6-kpi .kpi { background: var(--the); }
.tq6-kpi .kpi-nhan .den { position: static; margin-left: var(--k8); }
.kpi-icon { width: 36px; height: 36px; border-radius: 10px; }
.tq6-kpi .kpi-ss { font-size: var(--c-thuong); padding: 0 6px; line-height: 20px; }
.tq6-kpi .kpi-hinh { min-height: 32px; height: 32px; }
.tq6-kpi .kpi-hinh:empty { visibility: hidden; }
.td-sp { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.td-2 .nhan { padding: 0 6px; line-height: 20px; gap: 4px; }
.td-2 .nhan .den { width: 7px; height: 7px; box-shadow: none; animation: none; }
.cp-dong { grid-template-columns: 30px 96px minmax(0, 1fr) 44px 64px; }
.cp-pct { position: static; mix-blend-mode: normal; text-align: right; line-height: 1; }
.cp-thanh { overflow: hidden; }
.swot-o li { margin-bottom: 4px; line-height: 1.45; color: var(--chu); }
.swot-icon { opacity: 0.9; }
.swot-icon svg { width: 24px; height: 24px; }
.cbn-nd b, .cbn-phu, .kp-nd b, .kp-viec, .lich-viec { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kp-dong .cb-mui-ten { color: var(--xanh); }
.chuong .chuong-so { top: -2px; right: -2px; border: 2px solid var(--the); }
.chuong-bang { z-index: 60; }
.chuong-bang .cb-gia-tri { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thanh-ben .logo-chu .chu-thich { overflow: visible; }
.thanh-ben .nhom-dau { position: relative; }
.thanh-ben .nhom-dau .den { position: absolute; left: 32px; top: 8px; width: 8px; height: 8px; margin: 0; box-shadow: 0 0 0 2px var(--nau-dam); animation: none; }
.thanh-ben .nhom-icon { margin-left: 2px; }
.thanh-ben .muc-mo { opacity: 0.6; }
.thanh-ben .nut-kem { min-height: 40px; background: transparent; }
.ngan-keo-nen { background: rgba(11, 27, 51, 0.55); backdrop-filter: blur(2px); }
.thanh-duoi svg { width: 24px; height: 24px; }
.thanh-duoi .hien-tai { position: relative; }
.thanh-duoi .hien-tai::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 48px; height: 30px; border-radius: 999px; background: var(--xanh-nhat); z-index: -1; }
.thanh-duoi a, .thanh-duoi button { position: relative; z-index: 0; }
.dau-trang h1 { flex: 0 0 auto; min-width: 0; max-width: 220px; }
.dau-trang .giua { flex-wrap: nowrap; }
#man.dang-lam-moi > .man { opacity: 0.92; transition: opacity var(--chuyen-nhanh); }
.lam-moi-xoay svg { animation: xoay 1s linear infinite; }
@keyframes xoay { to { transform: rotate(360deg); } }

/* ===== 19. Bốn bậc màn hình ===== */
/* ≥1440 và 1920: nội dung tối đa 1760 căn giữa, biểu đồ cao hơn, KPI 6 cột không giãn chữ */
@media (min-width: 1440px) {
  #man > .man, #man > .skeleton, #man > .du-lieu-cu { max-width: var(--rong-noi-dung-max); margin-left: auto; margin-right: auto; width: 100%; }
  .tq6 { grid-template-columns: minmax(0, 1fr) 320px; }
  .tq6-trai { grid-template-rows: 110px auto minmax(400px, auto) minmax(0, 1fr) auto; }
  .tq6-banner { height: 110px; min-height: 110px; }
  .tq6-giua .khoi-bd { min-height: 400px; }
  .tq6-duoi { min-height: 360px; }
}
/* 1024–1439: sidebar 240, KPI 6 cột, cột phải 300 */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --r-thanh-ben: 240px; }
  .thanh-ben .nhom-ten { font-size: var(--c-thuong); }
  .tq6 { grid-template-columns: minmax(0, 1fr) 300px; }
  .tq6-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tq6-giua { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr); }
  .tq6-giua .tq6-bd6 { grid-column: auto; }
}
@media (min-width: 1024px) {
  .tq6 { align-items: stretch; }
  .tq6-trai { display: grid; grid-template-rows: 100px auto minmax(360px, auto) minmax(0, 1fr) auto; gap: var(--k12); }
  .tq6-banner { min-height: 100px; height: 100px; }
  .tq6-giua { align-items: stretch; }
  .tq6-giua .khoi-bd { height: auto; min-height: 360px; }
  .tq6-tron .khoi-than { flex: 1 1 auto; }
  .tq6-tien-do .khoi-than { max-height: none; overflow: visible; }
  .tq6-duoi { align-items: stretch; min-height: 320px; }
  .tq6-chi-phi .khoi-than, .tq6-swot .khoi-than { display: flex; flex-direction: column; }
  .cp-ds { flex: 1 1 auto; justify-content: space-evenly; }
  .swot { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); }
  .tq6-phai { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) 96px; gap: var(--k12); }
  .tq6-phai .khoi { min-height: 0; }
  .tq6-phai .khoi-than { overflow: auto; }
  .tq6-khau-hieu { height: 96px; }
  .khoi { padding: var(--k16); }
  .tq6-chan { display: grid; }
  .tq6-chan-o { min-height: 56px; }
}
/* 641–1023 tablet: dải icon 64px có tooltip, KPI 3 cột, 2 cột nội dung, cột phải xuống dưới */
@media (min-width: 641px) and (max-width: 1023px) {
  .app { display: grid; grid-template-columns: var(--r-thanh-ben-tablet) minmax(0, 1fr); }
  body:not(.keo-mo) .thanh-ben { visibility: visible; transform: none; position: sticky; top: 0; height: 100vh; width: var(--r-thanh-ben-tablet); padding: var(--k8) 6px; box-shadow: none; z-index: 5; }
  body:not(.keo-mo) .thanh-ben .logo { justify-content: center; padding: 0 0 var(--k8); }
  body:not(.keo-mo) .thanh-ben .logo-the { width: 48px; height: 40px; border-radius: var(--bo-s); }
  body:not(.keo-mo) .thanh-ben .logo img { width: 44px; height: 36px; }
  body:not(.keo-mo) .thanh-ben .logo-chu, body:not(.keo-mo) .thanh-ben .nut-dong-keo, body:not(.keo-mo) .thanh-ben .nhom-ten, body:not(.keo-mo) .thanh-ben .nhom-mui, body:not(.keo-mo) .thanh-ben .nhom-muc, body:not(.keo-mo) .thanh-ben .nguoi-dung .ten, body:not(.keo-mo) .thanh-ben .nguoi-dung .chu-thich, body:not(.keo-mo) .thanh-ben .cuoi .nut { display: none; }
  body:not(.keo-mo) .thanh-ben .nhom-dau { justify-content: center; padding: 0; min-height: 52px; }
  body:not(.keo-mo) .thanh-ben .nhom-dau .den { left: 8px; top: 10px; }
  body:not(.keo-mo) .thanh-ben .nguoi-dung { justify-content: center; padding: 0; }
  body.keo-mo .thanh-ben { position: fixed; width: min(300px, 86vw); }
  .dau-trang #nut-menu { display: none; }
  .dau-trang .logo-nho { display: none; }
  .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq6-giua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-giua .tq6-bd6 { grid-column: 1 / -1; }
  .tq6-duoi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-phai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .tq6-phai .tq6-thieu, .tq6-phai .tq6-khau-hieu { grid-column: 1 / -1; }
  .tq6-chan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ≤640: header 2 hàng, KPI 2 cột, SWOT accordion, chân 1 cột */
@media (max-width: 640px) {
  .dau-trang { height: auto; min-height: 0; padding: var(--k8) var(--k16); row-gap: var(--k8); }
  .dau-trang #nut-in, .dau-trang #nut-lam-moi, .dau-trang .logo-nho { display: none; }
  .dau-trang h1 { font-size: var(--c-menu); flex: 1 1 auto; max-width: none; order: 1; }
  .dau-trang #nut-menu { order: 0; }
  .dau-trang .phai { order: 2; margin-left: auto; gap: var(--k4); }
  .tim-kiem { order: 3; flex: 1 1 60%; width: auto; height: var(--vung-cham); min-height: var(--vung-cham); }
  .tim-kiem input { min-height: 40px; }
  .dau-trang .giua { order: 4; flex: 1 1 auto; width: auto; height: var(--vung-cham); min-height: var(--vung-cham); overflow: hidden; }
  .dau-trang .giua:empty, #vung-loc:empty { display: none; }
  .trang-thai { display: none; }
  .khoang-ngay #khoang-ngay-chu { display: inline; font-size: var(--c-thuong); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .tq6-banner { min-height: 96px; }
  .tq6-banner-chu p { display: none; }
  .tq6-kpi .kpi { min-height: 112px; }
  .tq6-kpi .kpi-cuoi { display: none; }
  .tq6-kpi .kpi-giua { flex-wrap: nowrap; }
  .tq6-kpi .kpi:nth-child(odd):last-child { grid-column: 1 / -1; }
  .swot-dau { cursor: pointer; min-height: var(--vung-cham); margin-bottom: 0; }
  .swot-o:not(.mo) ul, .swot-o:not(.mo) > p { display: none; }
  .swot-o { min-height: 0; }
  .swot-dau::after { content: "▾"; margin-left: auto; color: var(--chu-3); }
  .swot-o.mo .swot-dau::after { content: "▴"; }
  .swot-icon { margin-left: var(--k8); }
  .tq6-chan-mui { display: none; }
  .tq6-chan-o { min-height: 52px; }
  .tq6-chan-chu .chu-thich { white-space: normal; }
}

/* ===== 20. UI 3D siêu đẹp (chỉ CSS, không blur nặng) ===== */
.khoi, .kpi, .the-3d { background: linear-gradient(180deg, #FFFFFF, #FBFCFE); border: 1px solid var(--vien); box-shadow: var(--bong-2); }
.khoi:hover, .kpi:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--bong-noi); z-index: 2; }
.tq6 .khoi:hover { transform: translateY(-3px) scale(1.01); }
.kpi-icon { border-radius: 50%; box-shadow: 0 4px 10px rgba(11, 27, 51, 0.12); }
.kpi-mau-la .kpi-icon { background: linear-gradient(135deg, var(--la-nen), #B7EBCB); }
.kpi-mau-do .kpi-icon { background: linear-gradient(135deg, var(--do-nen), #F9C4BE); }
.kpi-mau-cam .kpi-icon { background: linear-gradient(135deg, var(--cam-nen), #FFD9A8); }
.kpi-mau-xanh .kpi-icon { background: linear-gradient(135deg, var(--xanh-nhat), #C9DBFA); }
.kpi-mau-tim .kpi-icon { background: linear-gradient(135deg, var(--tim-nen), #D7CBF2); }
.tq6-kpi .kpi { border-top: 3px solid var(--xanh); }
.tq6-kpi .kpi-mau-la { border-top-color: var(--la); box-shadow: var(--bong-2), 0 4px 12px rgba(7, 148, 85, 0.18); }
.tq6-kpi .kpi-mau-do { border-top-color: var(--do); box-shadow: var(--bong-2), 0 4px 12px rgba(217, 45, 32, 0.18); }
.tq6-kpi .kpi-mau-cam { border-top-color: var(--cam); box-shadow: var(--bong-2), 0 4px 12px rgba(239, 108, 0, 0.18); }
.tq6-kpi .kpi-mau-xanh { border-top-color: var(--xanh); box-shadow: var(--bong-2), 0 4px 12px rgba(21, 101, 216, 0.18); }
.tq6-kpi .kpi-mau-tim { border-top-color: var(--tim); box-shadow: var(--bong-2), 0 4px 12px rgba(126, 87, 194, 0.18); }
.tq6-banner { box-shadow: var(--bong-2); }
.tq6-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 45%); pointer-events: none; }
.den { box-shadow: 0 0 0 3px var(--vien-mo); }
.den-xanh { box-shadow: 0 0 0 3px var(--la-nen), 0 0 8px var(--la); }
.den-vang { box-shadow: 0 0 0 3px var(--vang-nen), 0 0 8px var(--vang); }
.den-do { box-shadow: 0 0 0 3px var(--do-nen), 0 0 8px var(--do); }
.nut, .nut-icon, .khoang-ngay { box-shadow: var(--bong-1); }
.nut:active, .nut-icon:active, .khoang-ngay:active { transform: translateY(1px); box-shadow: none; }
.thanh-ben { box-shadow: 0 0 24px rgba(0, 0, 0, 0.25); z-index: 6; }
.thanh-ben a.muc.hien-tai { box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0, 0, 0, 0.25); }
table.bang tbody tr:hover { box-shadow: inset 0 0 0 1px var(--xanh-nhat), 0 2px 8px rgba(21, 101, 216, 0.1); position: relative; }
.td-dong:hover, .cp-dong:hover { box-shadow: 0 2px 8px rgba(11, 27, 51, 0.08); background: var(--the); }
.cp-day, .tien-do-day, .kpi-thanh > span { border-radius: 6px; }
.swot-o { box-shadow: var(--bong-1); }
.tq6-chan-o { box-shadow: var(--bong-1); }
.tq6-chan-icon { background: linear-gradient(135deg, var(--nau-dong), var(--nau-dam)); box-shadow: 0 3px 8px rgba(74, 37, 18, 0.3); }
@media (prefers-reduced-motion: reduce) { .khoi:hover, .kpi:hover, .tq6 .khoi:hover { transform: none; } }

/* ===== 21. 100 % chữ không bị cắt: bỏ ellipsis tiêu đề/nhãn, cho 2 dòng ===== */
.dau-trang h1 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; max-width: 260px; }
.khoi-dau h2 { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
.tq6-kpi .kpi-nhan { white-space: normal; overflow: visible; text-overflow: clip; display: flex; align-items: center; line-height: 1.2; }
.kpi-nhan .chu-thich, .kpi-cuoi, .kpi-cuoi .chu-thich { white-space: normal; overflow: visible; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-tieu-de, .cb-gia-tri, .cb-noi-dung .chu-thich { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq6-chan-chu b, .tq6-chan-chu .chu-thich, .lich-ghi-chu, .tim-muc .muc-ten, .tim-muc .chu-thich, .thanh-ben .nguoi-dung .ten, .thanh-ben .logo-chu .chu-thich, .thanh-ben .muc-ten, .cp-ten { white-space: normal; overflow: visible; text-overflow: clip; }
.thanh-ben .muc { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
.thanh-ben .muc-ten { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.bang { table-layout: auto; }
table.bang th.so, table.bang td.so { min-width: 72px; }
table.bang td { white-space: normal; overflow: visible; text-overflow: clip; }
table.bang td.o-tieu-de { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-dong { grid-template-columns: 30px minmax(72px, 110px) minmax(0, 1fr) 44px 64px; }
.ho-so-chu b { white-space: normal; }
/* chốt vòng 25/10 18:50 */
.tq6-kpi .kpi-nhan .chu-thich { display: none; }
.cp-dong { grid-template-columns: 30px minmax(72px, 110px) minmax(0, 1fr) 44px 76px; }
.cp-thanh { height: 14px; }
.td-sp { -webkit-line-clamp: 3; }
.chuong .chuong-so { right: 0; top: 0; }
#khoang-ngay-ngan { display: none; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .tim-kiem { flex: 0 1 200px; width: 200px; }
  .dau-trang h1 { max-width: 170px; font-size: var(--c-menu); }
  .ho-so-chu { display: none; }
  .ho-so { min-width: 0; }
  .dau-trang .giua { width: 200px; flex-basis: 200px; }
  .khoang-ngay { min-width: 0; padding: 0 var(--k8); }
}
@media (max-width: 640px) {
  .tq6-kpi .kpi-giua { flex-wrap: wrap; }
  .khoang-ngay #khoang-ngay-chu { display: none; }
  #khoang-ngay-ngan { display: inline; max-width: 110px; white-space: nowrap; }
}
/* chốt 18:55: 1024–1279 KPI 3 cột (6 cột không đủ chỗ), SWOT không tràn, tiến độ gói dòng */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tq6 { grid-template-columns: minmax(0, 1fr) 260px; }
  .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tq6-giua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-giua .tq6-bd6 { grid-column: 1 / -1; }
  .dau-trang .giua { width: 240px; flex-basis: 240px; }
  .trang-thai .cap-nhat { display: none; }
}
.swot-o { overflow: hidden; }
.swot-o ul { padding-left: 16px; max-width: 100%; }
.swot-o li { overflow-wrap: anywhere; }
.td-2 { flex-wrap: wrap; row-gap: 4px; }
.td-2 .nhan { margin-left: auto; }
/* chốt 19:00 */
@media (min-width: 641px) and (max-width: 1023px) { .thanh-duoi { display: none; } #man { padding-bottom: var(--k16); } }
@media (max-width: 640px) { .khoang-ngay { width: 164px; min-width: 164px; justify-content: flex-start; overflow: hidden; } #khoang-ngay-ngan { overflow: hidden; text-overflow: clip; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .dau-trang #nut-in { display: none; }
  .tim-kiem { flex: 0 1 170px; width: 170px; }
  .tq6-duoi { grid-template-columns: minmax(0, 1fr); }
  .cp-gt { display: none; }
  .cp-dong { grid-template-columns: 30px minmax(72px, 110px) minmax(0, 1fr) 44px; }
}
.lich-ghi-chu, .lich-viec, .kp-viec, .cbn-phu { overflow-wrap: anywhere; }
/* chốt 19:10 */
.thanh-ben .cuoi .nut-kem { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.35); box-shadow: none; }
.thanh-ben .cuoi .nut-kem:hover { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 1600px) { .tq6-kpi .kpi-icon { width: 30px; height: 30px; } .tq6-kpi .kpi-icon svg { width: 18px; height: 18px; } }
@media (max-width: 640px) { .tq6-kpi .kpi-hinh:empty { display: none; } .tq6-kpi .kpi { min-height: 0; } }
@media (min-width: 641px) and (max-width: 1023px) {
  .dau-trang { flex-wrap: nowrap; height: var(--cao-dau-trang); }
  .dau-trang h1 { max-width: 150px; font-size: var(--c-menu); }
  .tim-kiem { flex: 1 1 120px; width: auto; min-width: 120px; max-width: 220px; }
  .dau-trang .giua { width: auto; flex: 0 0 auto; }
  .trang-thai .cap-nhat { display: none; }
  .dau-trang #nut-in { display: none; }
  .khoang-ngay { min-width: 0; padding: 0 var(--k8); }
}
/* ===== 22. Hồi quy 1440 (19:30): KPI 1 dòng + đèn góc, tile 150 cố định, ZERO-SCROLL ≥1024, legend donut ===== */
.tq6-kpi .kpi { height: 150px; min-height: 150px; max-height: 150px; overflow: hidden; padding-top: 14px; }
.tq6-kpi .kpi-nhan { white-space: nowrap; overflow: hidden; padding-right: 20px; }
.tq6-kpi .kpi-nhan .den { position: absolute; top: 10px; right: 10px; margin: 0; }
.tq6-kpi .kpi-giua { flex-wrap: nowrap; }
.tq6-kpi .kpi-hinh, .tq6-kpi .kpi-thanh { margin-top: auto; }
.tq6-kpi .kpi-thanh { height: 8px; }
.tq6-kpi .kpi-thanh-xam > span { background: var(--vien); }
.tq6-kpi .kpi-them { margin: 0; }
.tq6-kpi .kpi-cuoi { display: none; }
.tq6-kpi .kpi-them.chu-thich { display: block; white-space: nowrap; overflow: hidden; }
@media (max-width: 1279px) { .tq6-kpi .kpi-icon { display: none; } }
@media (min-width: 1024px) and (min-height: 860px) {
  #man:has(.tq6) { overflow: hidden; }
  .tq6 { height: calc(100vh - var(--cao-dau-trang) - 28px); min-height: 0; grid-template-rows: minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-height: 859px) {
  .tq6-trai { grid-template-rows: 90px 150px 320px minmax(220px, auto); }
  .tq6-phai { grid-template-rows: auto auto auto auto 80px; }
  .tq6-phai .khoi-than { max-height: 320px; }
}
@media (min-width: 1024px) {
  .tq6-trai { grid-template-rows: 90px 150px 320px minmax(0, 1fr); min-height: 0; }
  .tq6-banner { height: 90px; min-height: 90px; }
  .tq6-giua { min-height: 0; height: 320px; }
  .tq6-giua .khoi-bd { min-height: 0; height: 320px; }
  .tq6-giua .khoi { min-height: 0; overflow: hidden; }
  .tq6-tien-do .khoi-than { overflow: auto; }
  .tq6-duoi { min-height: 220px; height: auto; }
  .tq6-duoi .khoi { min-height: 0; overflow: hidden; }
  .tq6-duoi .khoi-than { overflow: auto; min-height: 0; }
  .tq6-chan { display: none; }
  .tq6-phai { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) 80px; min-height: 0; }
  .tq6-khau-hieu { height: 80px; }
  .tq6-top { display: none; }
}
@media (min-width: 1440px) {
  .tq6-trai { grid-template-rows: 90px 150px 320px minmax(0, 1fr); }
  .tq6-banner { height: 90px; min-height: 90px; }
  .tq6-giua .khoi-bd { min-height: 0; height: 320px; }
  .tq6-duoi { min-height: 220px; }
}
@media (min-width: 1024px) and (min-height: 1000px) { .tq6-chan { display: grid; } .tq6-trai { grid-template-rows: 100px 150px 360px minmax(0, 1fr) auto; } .tq6-giua, .tq6-giua .khoi-bd { height: 360px; } }
/* chốt 19:40 */
.tq6-kpi .kpi-giua { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 1599px) { .tq6-kpi .kpi-icon { display: none; } }
.tq6-kpi .kpi-them.chu-thich { white-space: normal; }
/* 1024–1279: KPI 3 cột 2 hàng, giữa 2 hàng → hàng lưới auto (không cố định 150/320) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .tq6-trai { grid-template-rows: 90px auto auto minmax(220px, auto); }
  .tq6-giua { height: auto; }
  .tq6-kpi { grid-auto-rows: 150px; }
}
/* ===== 23. Rubric 10 mục (19:55): chữ không cắt (bỏ line-clamp), header có thứ tự, spacing scale, tương phản chip, cỡ chữ token, 768 lưới 2 cột ===== */
.kpi-nhan .chu-thich, .kpi-cuoi, .kpi-cuoi .chu-thich, .cbn-nd b, .cbn-phu, .kp-nd b, .kp-viec, .lich-viec, .cb-tieu-de, .cb-gia-tri, .cb-noi-dung .chu-thich, .td-sp, .khoi-dau h2, .chuong-bang .cb-gia-tri, .thanh-ben .muc-ten, table.bang td.o-tieu-de { display: block; -webkit-line-clamp: unset; overflow: visible; white-space: normal; }
.khoi-dau { align-items: flex-start; }
.khoi-dau h2 { flex: 1 1 auto; min-width: 0; }
.khoi-dau .khoi-phai { flex: none; }
.tq6-kpi .kpi-them.chu-thich { white-space: normal; }
.tq6-kpi .kpi-nhan { white-space: normal; }
/* header: thứ tự cố định, nhãn phụ ẩn < 1280 thay vì đè */
.dau-trang .giua { overflow: visible; }
@media (min-width: 1024px) and (max-width: 1279px) { .trang-thai { display: none; } .dau-trang .giua { width: auto; flex: 0 0 auto; } }
@media (min-width: 1280px) { .tim-kiem { flex: 1 1 160px; min-width: 160px; max-width: 300px; } .dau-trang .giua { width: auto; flex: 0 0 auto; max-width: 300px; } .trang-thai { white-space: nowrap; } }
/* spacing theo thang 4/8/12/16 */
.tq6-kpi .kpi { gap: var(--k8); padding: var(--k12); }
.kpi-ss { gap: var(--k4); }
.tq6-banner-khau-hieu { padding: var(--k4) var(--k8); }
.tq6-kpi .kpi-giua { row-gap: var(--k4); }
/* tương phản chip */
.nhan-do { color: var(--do-chu); }
.nhan-vang { color: var(--vang-chu); }
.nhan-xanh-la { color: var(--la-chu); }
.cb-gia-tri { color: var(--do-chu); }
/* cỡ chữ theo token: banner 28, menu nhóm/logo 14 đậm, h1 header 18 */
.tq6-banner-chu h2, .tq6-banner-chu h2.tq6-h2 { font-size: var(--cc-banner); }
@media (max-width: 1279px) { .tq6-banner-chu h2 { font-size: var(--cc-banner); } }
@media (max-width: 640px) { .tq6-banner-chu h2 { font-size: var(--cc-h1); } }
.thanh-ben .nhom-ten, .thanh-ben .logo-chu strong { font-size: var(--c-thuong); }
@media (min-width: 1024px) and (max-width: 1439px) { .thanh-ben .nhom-ten { font-size: var(--c-thuong); } }
.dau-trang h1 { font-size: var(--cc-tieu-de); }
@media (max-width: 640px) { .dau-trang h1 { font-size: var(--cc-tieu-de); } }
@media (min-width: 1024px) and (max-width: 1279px) { .dau-trang h1 { font-size: var(--cc-tieu-de); } }
/* 6 màn con ở 641–1023: lưới 2 cột rõ, không khe chết, khối khắc phục cuộn nội bộ */
@media (min-width: 641px) and (max-width: 1023px) {
  .tq { align-items: start; grid-auto-flow: dense; row-gap: var(--k12); }
  .tq > * { min-height: 0; }
  .tq .khoi-bd { height: 320px; }
  .tq .khoi-bd .khoi-than { position: relative; height: 260px; overflow: hidden; }
}
@media (min-width: 1024px) {
  .tq .khoi-than:has(.dkp-dong), .tq .khoi:has(.dkp-dong) .khoi-than { overflow: auto; min-height: 0; }
  .tq .khoi:has(.dkp-dong) { min-height: 0; position: relative; }
  .tq .khoi:has(.dkp-dong)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); border-radius: 0 0 var(--bo-goc) var(--bo-goc); pointer-events: none; }
}
@media (min-width: 1024px) { .tq6-giua .khoi-bd { overflow: hidden; } .tq6-giua .khoi-bd .khoi-than { position: relative; min-height: 0; overflow: hidden; } .tq6-giua .bd-khung { height: 100%; max-height: 100%; min-height: 0; } .tq6-giua .khoi-bd canvas { max-height: 100%; } }
/* chốt 20:15: khoi-dau không co; <860px cao → cuộn thường; legend donut đủ 6 mục */
.khoi-dau { flex: none; }
.khoi-phai .lien-ket-nho { min-height: 36px; padding: 0 var(--k8); }
@media (min-width: 1024px) and (max-height: 859px) {
  #man > .man.tq6 { flex: none; height: auto; }
  #man:has(.tq6) { overflow: auto; }
}
@media (min-width: 1024px) and (min-height: 860px) {
  .tq6-trai { grid-template-rows: 80px 150px 340px minmax(200px, 1fr); }
  .tq6-banner { height: 80px; min-height: 80px; }
  .tq6-giua, .tq6-giua .khoi-bd { height: 340px; }
  .tq6-duoi { min-height: 200px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .tq6-banner-chu p { display: none; } .tq6-banner-khau-hieu { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) {
  .tq6-giua .khoi-bd, .tq6-giua .khoi { height: 320px; min-height: 320px; max-height: 320px; }
  .tq6-duoi .khoi { max-height: 420px; }
  .tq6-duoi .khoi-than { overflow: auto; }
}
.thanh-duoi a span, .thanh-duoi button span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; text-align: center; }
/* ===== 24. Rubric vòng 2 (20:30): không cuộn trong khối (6b), màn con cuộn trang ở ≥1024, spacing scale, chip AA, header ===== */
@media (min-width: 1024px) {
  #man:not(:has(.tq6)) { overflow: auto; }
  .tq { height: auto; grid-template-rows: auto; }
  .tq-cb .khoi-than, .khoi-bang .khoi-than, .tq .khoi-than:has(.dkp-dong), .tq .khoi:has(.dkp-dong) .khoi-than { overflow: visible; max-height: none; }
  .tq .khoi:has(.dkp-dong)::after { display: none; }
  .tq .khoi-bd { height: 340px; }
  .tq .khoi-bang { max-height: none; }
  .tq6-phai .khoi-than, .tq6-tien-do .khoi-than, .tq6-duoi .khoi-than { overflow: visible; }
  .tq6-phai .khoi, .tq6-giua .khoi, .tq6-duoi .khoi { overflow: hidden; }
  .trang-thai .cap-nhat { display: none; }
}
@media (min-width: 1600px) { .trang-thai .cap-nhat { display: inline-flex; } }
@media (min-width: 641px) and (max-width: 1023px) { .tq { align-items: stretch; } }
.nhan.nhan-do, .td-2 .nhan.nhan-do { color: var(--do-chu); }
.nhan.nhan-vang { color: var(--vang-chu); }
.nhan.nhan-xanh-la { color: var(--la-chu); }
.nhan.nhan-xanh { color: var(--xanh-dam); }
.khoi-dau { gap: var(--k4) var(--k8); }
.cb-noi-dung { gap: var(--k4); }
.kpi-ss { padding: 0 var(--k4); }
.cb { padding: var(--k8) var(--k12); }
.swot-o { padding: var(--k12); }
.thanh-ben .nhom-muc { padding-left: var(--k12); }
.tq6-kpi .kpi-ss { padding: 0 var(--k4); }
.cbn { padding: var(--k4) var(--k8); }
.kp-dong { padding: var(--k4) var(--k8); }
.td-dong { padding: var(--k4) var(--k8); }
.lich-dong { padding: var(--k4) var(--k8); }
.cp-icon, .cbn-icon, .kpi-icon, .swot-chu, .tq6-chan-icon { border-radius: var(--bo-s); }
@media (min-width: 1024px) and (min-height: 860px) {
  .tq6-swot .swot { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .swot-o { min-height: 0; padding: var(--k8) var(--k12); }
  .swot-dau { margin-bottom: 4px; }
  .swot-dau b { font-size: var(--c-thuong); }
  .swot-o ul { padding-left: 14px; }
  .swot-o li { margin-bottom: 2px; }
  .tq6-duoi { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 1024px) and (max-width: 1599px) { .cp-gt { display: none; } .cp-dong { grid-template-columns: 30px minmax(72px, 110px) minmax(0, 1fr) 44px; } }
/* ===== 25. 21:00: thẻ thương hiệu, icon theo loại, zero-scroll cột phải 3 khối ===== */
.thanh-ben .the-thuong-hieu { width: 100%; height: auto; max-width: 220px; margin: 0 auto var(--k8); display: block; border-radius: var(--bo-goc); }
@media (min-width: 641px) and (max-width: 1023px) { body:not(.keo-mo) .thanh-ben .the-thuong-hieu { display: none; } }
@media (max-width: 640px) { .thanh-ben .the-thuong-hieu { max-width: 180px; } }
.ic { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: block; }
.kp-dong { grid-template-columns: 28px minmax(0, 1fr) 18px; }
.kp-icon { width: 28px; height: 28px; border-radius: var(--bo-s); display: grid; place-items: center; background: var(--do-nen); color: var(--do-chu); }
.kp-icon.kp-vang { background: var(--vang-nen); color: var(--vang-chu); }
.cbn-do .cbn-icon { color: var(--do-chu); }
.cbn-vang .cbn-icon { color: var(--vang-chu); }
.cb-bieu-tuong .ic { width: 18px; height: 18px; }
.td-1, .td-2, .td-dong { gap: var(--k4) var(--k8); }
@media (min-width: 1280px) { .trang-thai .cap-nhat { display: inline-flex; } }
@media (min-width: 1024px) and (min-height: 860px) and (max-height: 999px) {
  .tq6-khau-hieu, .tq6-thieu { display: none; }
  .tq6-phai { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
  .tq6-phai .khoi-dau { flex-wrap: nowrap; }
  .tq6-phai .khoi-dau .chu-thich { white-space: normal; }
}
.tq6-kpi .kpi-nhan { overflow: visible; white-space: normal; }
/* 21:10: tile KPI gọn (padding 8, gap 4) để nhãn 2 dòng vẫn vừa 150; tiêu đề cột phải 1 dòng */
.tq6-kpi .kpi { gap: var(--k4); padding: var(--k8) var(--k8) var(--k8); padding-top: 12px; }
.tq6-kpi .kpi-nhan { padding-right: 16px; line-height: 1.15; }
.tq6-kpi .kpi-nhan .den { top: 8px; right: 8px; }
.tq6-phai .khoi-dau h2 { white-space: nowrap; flex: none; }
.tq6-phai .khoi-dau .chu-thich { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1600px) { .tq6-kpi .kpi-nhan { white-space: nowrap; } .tq6-kpi .kpi { padding: var(--k12); gap: var(--k8); } }
/* ===== 26. 21:20: QA v2 — cập nhật 12 nghiêng, spacing 4/8, header không đè, mobile KPI, sidebar 280 ===== */
.trang-thai .cap-nhat { font-size: var(--cc-chu-thich); font-style: italic; color: var(--chu-phu); }
.trang-thai .cap-nhat::before { content: "("; }
.trang-thai .cap-nhat::after { content: ")"; }
.trang-thai .cap-nhat b { font-weight: 700; font-style: italic; }
.khoi-dau { gap: var(--k4) var(--k8); }
.td-dong, .td-1, .td-2 { gap: var(--k4) var(--k8); }
table.bang td { padding: var(--k4) var(--k8); }
@media (max-width: 640px) { table.bang td { padding: var(--k4) 0; } }
.nhan, .td-2 .nhan, .kpi-ss { padding: 0 var(--k8); }
.kpi-ss { padding: 0 var(--k4); }
.dau-trang .giua { max-width: none; flex: 0 0 auto; }
.dau-trang .phai { flex: 0 0 auto; }
.dau-trang .tim-kiem { flex: 1 1 120px; min-width: 100px; }
.cp-gt { min-width: 76px; }
@media (min-width: 1440px) { :root { --r-thanh-ben: 280px; } .thanh-ben .nhom-ten { white-space: nowrap; overflow: visible; } }
@media (max-width: 640px) {
  .tq6-kpi .kpi { height: auto; min-height: 112px; max-height: none; }
  .tq6-kpi .kpi-giua { flex-wrap: nowrap; }
  .tq6-kpi .kpi-ss { font-size: var(--c-thuong); }
  .tq6-kpi .kpi-hinh:empty, .tq6-kpi .kpi-thanh-xam { display: none; }
}
@media (min-width: 1024px) and (min-height: 860px) {
  .swot-icon { display: none; }
  .swot-dau { flex-wrap: nowrap; }
  .swot-dau b { white-space: nowrap; overflow: visible; }
  .swot-chu { width: 24px; height: 24px; font-size: var(--c-thuong); }
  .swot-o li { line-height: 1.3; }
}
/* ===== 27. 21:45: màn con cuộn trang (không khung cắt), tổng quan <860 cao để khối giãn, spacing 8 ===== */
@media (min-width: 1024px) {
  .app:not(:has(.tq6)) { height: auto; min-height: 100vh; overflow: visible; }
  .app:not(:has(.tq6)) .chinh { height: auto; min-height: 100vh; }
  .app:not(:has(.tq6)) #man { overflow: visible; }
  .app:not(:has(.tq6)) .thanh-ben { position: sticky; top: 0; height: 100vh; }
}
@media (min-width: 1024px) and (max-height: 859px) {
  .tq6-giua .khoi, .tq6-giua .khoi-bd { height: auto; min-height: 320px; max-height: none; }
  .tq6-giua .khoi-bd .khoi-than, .tq6-giua .bd-khung { height: 320px; max-height: 320px; }
  .tq6-tien-do .khoi-than, .tq6-duoi .khoi-than, .tq6-phai .khoi-than { overflow: visible; max-height: none; }
  .tq6-duoi .khoi, .tq6-giua .khoi, .tq6-phai .khoi { max-height: none; overflow: visible; }
  .app:has(.tq6) { height: auto; overflow: visible; }
  .app:has(.tq6) .chinh { height: auto; min-height: 100vh; }
  .app:has(.tq6) #man { overflow: visible; }
}
@media (max-width: 1023px) {
  .tq6-tien-do .khoi-than { max-height: none; overflow: visible; }
  .tq6-giua .khoi { height: auto; }
  .tq6-giua .khoi-bd { height: 320px; }
}
.cp-ds { gap: var(--k8); }
.cp-thanh { gap: var(--k8); }
.td-2 .nhan .den { background: currentColor; box-shadow: none; }
.nhan.nhan-do, .nhan.nhan-do .den { color: var(--do-chu); }
/* ===== 28. Menu 10×10 (22:00): tên nhóm 1 dòng ≤3 từ + title, mục chưa nguồn chip xám + ghi chú 12 nghiêng, 10 mục cuộn nội bộ ===== */
.thanh-ben .nhom-ten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
.thanh-ben .nhom-muc-trong { max-height: 56vh; overflow: auto; scrollbar-width: thin; }
.thanh-ben .muc { flex-wrap: wrap; align-items: center; row-gap: 2px; }
.thanh-ben .muc-chip { font-size: var(--c-thuong); line-height: 20px; padding: 0 var(--k8); background: rgba(255, 255, 255, 0.14); color: var(--kem-chu); flex: none; }
.thanh-ben .muc-ghi-chu { flex: 1 1 100%; color: var(--kem-chu); padding-left: 34px; display: block; white-space: normal; }
.thanh-ben .muc-mo { opacity: 0.75; }
.thanh-ben .muc-mo .muc-ten { white-space: normal; overflow: visible; }
.thanh-ben .muc { row-gap: var(--k4); }
.thanh-ben .muc-mo { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--k8); row-gap: 2px; align-items: center; padding: 6px var(--k8); }
.thanh-ben .muc-mo .muc-so { grid-column: 1; grid-row: 1; }
.thanh-ben .muc-mo .muc-ten { grid-column: 2; grid-row: 1; }
.thanh-ben .muc-mo .muc-chip { grid-column: 2; grid-row: 2; justify-self: start; }
.thanh-ben .muc-mo .muc-ghi-chu { grid-column: 2; grid-row: 3; padding-left: 0; }
.thanh-ben .nhom-muc-trong > * { flex: none; }
.thanh-ben .muc-mo { height: auto; min-height: 0; }
/* ===== 29. 22:30: kiểm mobile 320–1024 — header không tràn, tab không rơi vào nhóm đóng, focus ring, chạm 44, tương phản ===== */
.dau-trang .giua { min-width: 0; }
.dau-trang h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 220px; }
.dau-trang .phai { flex: none; }
.thanh-ben .nhom:not(.mo) .nhom-muc { visibility: hidden; transition: grid-template-rows var(--t-vua) var(--ease), visibility 0s; }
.thanh-ben .nhom.mo .nhom-muc { visibility: visible; }
.thanh-ben .nhom:not(.mo) .nhom-muc .muc { visibility: hidden; transition: none; }
#o-tim:focus-visible, .tim-kiem:focus-within, a.dkp-link:focus-visible, .dkp-link:focus-visible, a.logo-the:focus-visible, .nut-icon:focus-visible, .khoang-ngay:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.chuong .chuong-so { background: var(--vang-chu); }
.chuong .chuong-so.vang { background: var(--vang-chu); }
.swot-ky-s .swot-chu { background: var(--la-chu); }
.swot-ky-t .swot-chu { background: var(--vang-chu); }
.swot-ky-o .swot-chu { background: var(--xanh-dam); }
.swot-ky-w .swot-chu { background: var(--do-chu); }
@media (max-width: 1023px) {
  #o-tim, .tim-kiem { min-height: var(--vung-cham); height: var(--vung-cham); }
  .tim-kiem input { min-height: 42px; }
  .nut-nho, #nut-lam-moi, #nut-in, .khoi-bang .nut, .lien-ket-nho { min-height: var(--vung-cham); }
  #nut-dang-xuat-ben, .thanh-ben .cuoi .nut-kem { min-height: var(--vung-cham); }
  .thanh-ben .muc, .thanh-ben a.muc { min-height: var(--vung-cham); }
  .thanh-ben .logo-the { min-height: var(--vung-cham); min-width: var(--vung-cham); }
  a.dkp-link { min-height: var(--vung-cham); display: inline-flex; align-items: center; }
}
@media (min-width: 641px) and (max-width: 1023px) { .dau-trang .giua { flex: 0 1 auto; min-width: 0; overflow: hidden; } .dau-trang .giua select { max-width: 160px; } .dau-trang h1 { flex: 0 1 140px; } }
@media (max-width: 1023px) { .khoi-phai .lien-ket-nho, .lien-ket-nho { min-height: var(--vung-cham); } .kp-dong, .cbn, .lich-dong { min-height: var(--vung-cham); } }
/* ===== 30. 22:50: sidebar KHÔNG thanh cuộn — 10 nhóm + 10 mục vừa chiều cao; bỏ ảnh bánh ===== */
.thanh-ben .the-thuong-hieu { display: none; }
.thanh-ben { padding: var(--k8) var(--k8); gap: var(--k4); overflow: hidden; }
.thanh-ben nav { overflow: hidden; gap: 0; padding-right: 0; }
.thanh-ben .logo { padding: 0 0 var(--k4); gap: var(--k8); }
.thanh-ben .logo-the { width: 72px; height: 48px; }
.thanh-ben .logo img { width: 68px; height: 44px; }
.thanh-ben .nhom-dau { min-height: 32px; padding: 0 var(--k4); }
.thanh-ben .nhom-icon { width: 24px; height: 24px; border-radius: 6px; }
.thanh-ben .nhom-icon svg { width: 16px; height: 16px; }
.thanh-ben .nhom-dau .den { left: 22px; top: 4px; width: 7px; height: 7px; }
.thanh-ben .nhom-mui svg { width: 16px; height: 16px; }
.thanh-ben .nhom.mo .nhom-muc { padding-bottom: 2px; }
.thanh-ben .nhom-muc { padding-left: var(--k8); }
.thanh-ben .nhom-muc-trong { max-height: none; overflow: hidden; }
.thanh-ben .muc, .thanh-ben a.muc, .thanh-ben span.muc, .thanh-ben .muc-mo { min-height: 24px; height: 24px; padding: 0 var(--k4); line-height: 1.2; display: flex; align-items: center; flex-wrap: nowrap; row-gap: 0; }
.thanh-ben .muc-so { min-width: 24px; }
.thanh-ben .muc-ten { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.thanh-ben .muc-mo .muc-ten { white-space: nowrap; overflow: hidden; }
.thanh-ben .muc-chip { display: none; }
.thanh-ben .muc-ghi-chu { display: none; }
.thanh-ben .muc-mo::after { content: "·"; color: var(--kem-chu); margin-left: auto; opacity: 0.8; }
@media (min-width: 1600px) { .thanh-ben .muc-chip { display: inline-flex; line-height: 18px; margin-left: auto; } .thanh-ben .muc-mo::after { display: none; } }
.thanh-ben .cuoi { padding-top: var(--k4); gap: var(--k4); }
.thanh-ben .nguoi-dung { min-height: 28px; }
.thanh-ben .nguoi-dung .vong { width: 24px; height: 24px; }
.thanh-ben .cuoi .nut-kem { min-height: 32px; }
@media (max-width: 1023px) {
  .thanh-ben .muc, .thanh-ben a.muc, .thanh-ben span.muc, .thanh-ben .muc-mo { min-height: 32px; height: 32px; }
  .thanh-ben .nhom-dau { min-height: 36px; }
  .thanh-ben .cuoi .nut-kem, #nut-dang-xuat-ben { min-height: 36px; }
}
@media (max-height: 699px) { .thanh-ben nav { overflow-y: auto; } }
@media (max-width: 1023px) {
  .thanh-ben .muc, .thanh-ben a.muc, .thanh-ben span.muc, .thanh-ben .muc-mo { min-height: 30px; height: 30px; }
  .thanh-ben .nhom-dau { min-height: 34px; }
}
/* 23:00: h1 không co thành "K..": h1 giữ bề rộng tự nhiên (≤220), ô tìm co trước */
@media (min-width: 1024px) { .dau-trang h1 { flex: 0 0 auto; max-width: 220px; } .dau-trang .tim-kiem { flex: 1 1 100px; min-width: 100px; } .dau-trang .giua select { max-width: 170px; } .dau-trang .giua { flex: 0 1 auto; min-width: 0; } }