/* Vibary UI — on_dinh.css (27/10/2026). Tải SAU CÙNG: chốt bố cục Tổng quan dạng cuộn trang.
   Bỏ zero-scroll (khung cao cố định → cắt chữ chú thích, SWOT cắt 6 từ, danh sách bị bỏ mục).
   Bộ chọn bắt đầu bằng #man / html body để thắng các lớp vá 22–30 trong app.css. */

/* ---- sidebar dính khi nội dung dài (lỗi 27/10) ----
   app.css: html, body { overflow-x: hidden } biến body thành vùng cuộn riêng (không cuộn thật) → position: sticky của
   sidebar mất tác dụng, cuộn xuống là sidebar trôi lên để lại khoảng trắng. clip vẫn chặn tràn ngang nhưng không tạo vùng cuộn. */
html, body { overflow-x: clip; }
@media (min-width: 1024px) {
  html body .app > .thanh-ben { position: sticky; top: 0; height: 100vh; max-height: 100vh; align-self: start; }
}

/* ---- khung trang: cuộn thường, sidebar dính ---- */
@media (min-width: 1024px) {
  html body .app:has(.tq6) { height: auto; min-height: 100vh; overflow: visible; }
  html body .app:has(.tq6) .chinh { height: auto; min-height: 100vh; }
  html body .app:has(.tq6) .thanh-ben { position: sticky; top: 0; height: 100vh; }
  html body .app:has(.tq6) #man { overflow: visible; }
  html body .app:has(.tq6) .dau-trang { position: sticky; top: 0; z-index: 20; }
}

/* ---- lưới tổng quan ---- */
#man .tq6 { height: auto; min-height: 0; grid-template-rows: none; align-items: start; }
#man .tq6-trai, #man .tq6-phai { display: flex; flex-direction: column; gap: var(--k12); grid-template-rows: none; min-height: 0; height: auto; }
#man .tq6-giua { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--k12); height: auto; min-height: 0; align-items: stretch; }
#man .tq6-duoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--k12); height: auto; min-height: 0; align-items: stretch; }
#man .tq6 .khoi { height: auto; min-height: 0; max-height: none; overflow: visible; }
#man .tq6 .khoi-than { max-height: none; overflow: visible; }

/* biểu đồ: khung cao cố định để canvas không giãn vô hạn */
#man .tq6-giua .khoi-bd { height: 360px; min-height: 360px; max-height: 360px; overflow: hidden; display: flex; flex-direction: column; }
#man .tq6-giua .khoi-bd .khoi-than { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; position: relative; overflow: hidden; }
#man .tq6-giua .bd-khung { height: 100%; max-height: 100%; min-height: 0; }

/* ---- KPI: cao theo nội dung, cùng chiều cao mỗi hàng ---- */
#man .tq6-kpi { grid-auto-rows: auto; align-items: stretch; }
#man .tq6-kpi .kpi { height: auto; min-height: 128px; max-height: none; overflow: visible; }
#man .tq6-kpi .kpi-giua { flex-wrap: wrap; row-gap: var(--k4); }
#man .tq6-kpi .kpi-thanh-xam { display: none; }
#man .kpi-diem { white-space: nowrap; font-size: var(--cc-chu-thich, 12px); font-weight: 600; }

/* ---- SWOT trọn hàng: 4 cột, chữ đầy đủ ---- */
#man .tq6-swot .swot { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
#man .swot-o { min-height: 0; }
#man .swot-o li { white-space: normal; overflow: visible; }

/* ---- cột phải: tiêu đề + chú thích xuống dòng gọn ---- */
#man .tq6-phai .khoi-dau { flex-wrap: wrap; }
#man .tq6-phai .khoi-dau h2 { white-space: nowrap; }
#man .tq6-phai .khoi-dau .chu-thich { flex: 1 1 auto; white-space: nowrap; }
#man .lich-dong { grid-template-columns: 22px minmax(0, 1fr); align-items: start; row-gap: 2px; }
#man .lich-dong .lich-icon { grid-column: 1; grid-row: 1 / span 3; padding-top: 2px; }
#man .lich-dong .lich-gio, #man .lich-dong .lich-viec, #man .lich-dong .lich-ghi-chu { grid-column: 2; }

/* ---- < 1440: 6 KPI một hàng quá hẹp (số tràn sang ô bên) → 3 cột × 2 hàng ---- */
@media (min-width: 641px) and (max-width: 1439px) {
  #man .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #man .tq6-kpi .kpi-nhan { white-space: nowrap; }
}

/* ---- 1024–1279: cột phải hẹp → đưa xuống dưới, 2 cột ---- */
@media (min-width: 1024px) and (max-width: 1279px) {
  #man .tq6 { grid-template-columns: minmax(0, 1fr); }
  #man .tq6-phai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  #man .tq6-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- máy tính bảng / điện thoại ---- */
@media (max-width: 1023px) {
  #man .tq6-giua, #man .tq6-duoi { grid-template-columns: minmax(0, 1fr); }
  #man .tq6-giua .khoi-bd { height: 340px; min-height: 340px; max-height: 340px; }
  #man .tq6-swot .swot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #man .tq6-swot .swot { grid-template-columns: minmax(0, 1fr); }
  #man .tq6-kpi .kpi { min-height: 108px; }
  #man .tq6-kpi .kpi-ss { white-space: nowrap; }
}

/* ===== 27/10: đăng nhập + đăng ký (2 tab) ===== */
.dn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--nen); border-radius: var(--bo-goc); }
.dn-tabs button { min-height: 40px; border: 0; border-radius: calc(var(--bo-goc) - 2px); background: transparent; font: inherit; font-weight: 600; color: var(--chu-phu); cursor: pointer; }
.dn-tabs button.chon { background: var(--the); color: var(--chu); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.dn-tabs button:focus-visible { outline: 2px solid var(--xanh); outline-offset: 2px; }
.dang-nhap-the form { display: flex; flex-direction: column; gap: var(--k12); }
.dang-nhap-the form[hidden] { display: none; }
.dn-chuyen { align-self: center; border: 0; background: none; color: var(--xanh-dam); font: inherit; cursor: pointer; min-height: 36px; text-decoration: underline; }
.dn-goi-y { text-align: left !important; }
.dn-thong-bao { padding: var(--k8) var(--k12); border-radius: var(--bo-goc); background: var(--la-nen, #e8f6ee); color: var(--la-chu); line-height: 1.4; }
.dn-thong-bao[hidden] { display: none; }

/* ===== 27/10: hồ sơ bấm → Tài khoản của tôi ===== */
.ho-so-bam { cursor: pointer; border-radius: var(--bo-goc); }
.ho-so-bam:hover { background: var(--nen); }
.nguoi-dung-lk { display: flex; align-items: center; gap: var(--k8); color: inherit; text-decoration: none; min-width: 0; flex-wrap: wrap; }
.nguoi-dung-lk:hover .ten { text-decoration: underline; }

/* ===== 27/10: màn Người dùng & phân quyền / Tài khoản của tôi ===== */
#man .nd { display: flex; flex-direction: column; gap: var(--k12); }
#man .nd-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--k12); }
#man .nd-ds { display: flex; flex-direction: column; }
#man .nd-dong { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr) auto auto; gap: var(--k8) var(--k12); align-items: center; padding: var(--k12) var(--k4); border-bottom: 1px solid var(--vien); }
#man .nd-dong:last-child { border-bottom: 0; }
#man .nd-cho { grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr) auto; }
#man .nd-toi { background: var(--nen); border-radius: var(--bo-goc); }
#man .nd-ten { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#man .nd-ten .chu-thich { overflow-wrap: anywhere; }
#man .nd-cap { display: flex; flex-direction: column; gap: 2px; }
#man .nd-chon-cap { min-height: 38px; border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 0 var(--k8); font: inherit; background: var(--the); color: var(--chu); max-width: 100%; }
#man .nd-nut { display: flex; gap: var(--k8); flex-wrap: wrap; justify-content: flex-end; }
#man .nd-nut-do { color: var(--do-chu); }
#man .nd-mk-moi { padding: var(--k8) var(--k12); margin-bottom: var(--k8); border-radius: var(--bo-goc); background: var(--vang-nen); color: var(--chu); }
#man .nd-mk-moi[hidden] { display: none; }
#man .nd-mk { font-size: 1.05em; font-weight: 700; padding: 2px 6px; background: var(--the); border-radius: 4px; user-select: all; }
#man .nd-bang-boc { overflow-x: auto; }
#man .nd-bang-cap { width: 100%; border-collapse: collapse; }
#man .nd-bang-cap th, #man .nd-bang-cap td { text-align: left; vertical-align: top; padding: var(--k8); border-bottom: 1px solid var(--vien); }
#man .nd-bang-cap .nd-mo-ta { display: block; margin-top: 2px; }
#man .nd-cap-toi { background: var(--nen); }
.nd-so-cap { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; color: #fff; background: var(--nau-dong, #7a4a2a); }
.nd-cap-1 { background: #8b2d1a; } .nd-cap-2 { background: #a8541f; } .nd-cap-3 { background: #2f6f9f; }
.nd-cap-4 { background: #3d7d4f; } .nd-cap-5 { background: #6a5aa8; } .nd-cap-6 { background: #6b7280; }
#man .nd-ho-so { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--k8) var(--k16); margin: 0; }
#man .nd-ho-so dt { color: var(--chu-phu); }
#man .nd-ho-so dd { margin: 0; font-weight: 600; }
#man .nd-form-mk { display: flex; flex-direction: column; gap: var(--k12); max-width: 420px; }
@media (max-width: 1023px) {
  #man .nd-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #man .nd-dong, #man .nd-cho { grid-template-columns: minmax(0, 1fr); }
  #man .nd-nut { justify-content: flex-start; }
}
/* thẻ đăng nhập luôn 1 cột (dang_nhap.css ≥1024 dựng lưới 2 cột cho khối thương hiệu không còn dùng → tab bị kéo thành 2 cột cao) */
@media (min-width: 641px) {
  html body .dang-nhap-the { display: flex; flex-direction: column; max-width: 440px; padding: 28px 32px; gap: var(--k12); }
}
/* màn tài khoản / người dùng không có số liệu theo kỳ → ẩn chọn kỳ và nút In */
.app:has(#man .nd) #khoang-ngay, .app:has(#man .nd) #nut-in { display: none; }