/*
 * MAG app 2.0: khung màn hình của app / web-app (menu trái, thanh trên, vùng nội dung, cột phải).
 * Trích từ MAG Marketing Hub apps/web/src/styles/khung.css + chien-dich.css (trang chủ) ngày
 * 22/10/2026, giữ nguyên tên token. Nạp SAU mag-2.0-tokens.css; thành phần (nút, thẻ, chip...)
 * nằm ở mag-2.0-thanh-phan.css. Chỉ dùng token, không mã màu trần.
 *
 * Bố cục: .khung là grid 2 cột [menu-rong | 1fr]. Menu trái là ô thứ nhất, position: sticky,
 * KHÔNG fixed (fixed gỡ phần tử khỏi grid, nội dung tụt vào cột menu).
 *
 * Chép NGUYÊN từ MAG 2.0\mag-app-2.0-khung.css (22/10/2026) cho MAGi Báo giá; chỉ đổi bóng ngăn kéo
 * điện thoại sang var(--bong-hop). Phần riêng của MAGi (thẻ Đang chạy, nhóm gập bằng JS) nằm ở app.css.
 *
 * Thiếu trong tokens.css chung: cỡ chữ. Khai báo lại ở đây để file tự chạy được.
 */

:root {
  --fs-page-title: 24px;
  --fs-section: 20px;
  --fs-card-title: 16px;
  --fs-body: 14px;
  --fs-menu: 13.5px;
  --fs-meta: 13px;
  --fs-chip: 12px;
  --lh-body: 1.55;
  --dam-tieu-de: 500;
  --dam-the: 500;
}

/* -- khung ---------------------------------------------------------------------------------- */

.khung {
  display: grid;
  grid-template-columns: var(--menu-rong) minmax(0, 1fr);
  min-height: 100vh;
}

/* -- menu trái ------------------------------------------------------------------------------ */

.menuTrai {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--nen-menu);
  border-right: 1px solid var(--vien);
  min-width: 0;
}

/* Ô workspace đầu menu: logo / chữ cái đầu + tên doanh nghiệp (hoặc tên sản phẩm) + mũi tên. */
.ws { flex: none; padding: 12px 10px 8px; }
.wsNut {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 8px;
  border: 0; border-radius: var(--radius-o); background: none; color: var(--chu);
  font: inherit; text-align: left; cursor: pointer;
}
.wsNut:hover { background: var(--nen-chon); }
.ws > .wsO { margin-left: 8px; }
.ws:not(:has(.wsNut)) { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.wsO {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  background: var(--mag-xanh); color: var(--nut-chinh-chu); font-size: var(--fs-meta); font-weight: 600;
}
.wsOLogo { overflow: hidden; background: var(--nen); border: 1px solid var(--vien); color: var(--chu-phu); }
.wsOLogo img { width: 100%; height: 100%; object-fit: contain; }
.wsTen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: 500; }
.wsMuiTen { flex: none; color: var(--chu-phu); }

/* Vùng cuộn của menu: min-height 0 để đáy menu luôn hiện dù nhóm mở dài. */
.menuCuon {
  flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.menuNhom { display: flex; flex-direction: column; gap: 1px; }

/* Tên nhóm: nhãn nhỏ 13px, bấm để gập / mở. */
.menuNhomTen {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 0 0 2px; padding: 2px 10px;
  border: 0; background: none; color: var(--chu-phu); font: inherit; font-size: var(--fs-meta); cursor: pointer;
}
.menuNhomTen:hover { color: var(--chu); }
.menuMuiTenGap { transform: rotate(-90deg); }

/* Mục menu: cao 36px, chữ 13.5px, icon 16px xám nhạt hơn chữ; chọn = nền xám + chữ đậm 600. */
.menuMuc {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--menu-hang-cao); padding: 0 10px;
  border: 0; border-radius: var(--radius-o); background: none; color: var(--chu-menu);
  font: inherit; font-size: var(--fs-menu); text-align: left; text-decoration: none; cursor: pointer;
}
.menuMuc:hover { background: var(--nen-chon); color: var(--chu); }
.menuMucChon { background: var(--nen-chon); color: var(--chu); font-weight: 600; }
.menuIcon { flex: none; color: var(--icon-menu); }
.menuMuc:hover .menuIcon, .menuMucChon .menuIcon { color: currentColor; }
.menuChu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Số nhỏ bên phải mục (vd "3/5" cạnh Tích hợp). */
.menuDuoi { flex: none; font-size: var(--fs-chip); color: var(--chu-phu); }

/* Đáy menu: mục phụ ("Mời thành viên", "Hướng dẫn & hỗ trợ"), cao 30px, chữ 13px. */
.menuDay { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 10px 10px 14px; border-top: 1px solid var(--vien); }
.menuMucNho {
  display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 10px;
  border-radius: var(--radius-o); color: var(--chu-phu); font-size: var(--fs-meta); text-decoration: none;
}
.menuMucNho:hover { background: var(--nen-chon); color: var(--chu); }
.menuMucNho .menuIcon { color: currentColor; }

/* -- cột nội dung và thanh trên -------------------------------------------------------------- */

.khungNoiDung { display: flex; flex-direction: column; min-width: 0; }

/* Thanh trên 60px, nền trang, dính khi cuộn: [tên trang | nút của màn | chuông · credits · Nâng cấp · avatar]. */
.thanhTren {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  height: var(--topbar-h); padding: 0 20px;
  background: var(--nen); border-bottom: 1px solid var(--vien);
}
.thanhTrenTen {
  margin: 0; color: var(--chu); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-card-title); font-weight: 600; letter-spacing: 0;
}
.thanhTrenNut { display: flex; align-items: center; gap: 8px; }
.thanhTrenPhai { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

/* Avatar 34px: chữ cái đầu trên nền xanh nhạt, bấm mở menu tài khoản. */
.avatarNut {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--vien); border-radius: var(--radius-pill);
  background: var(--mag-xanh-nhat); color: var(--mag-xanh); font-weight: 600; cursor: pointer;
}

/* Nút credits trên thanh trên: không viền, icon xanh, cao 28px. */
.creditsNut {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: var(--nut-cao-nho); padding: 0 8px;
  border: 0; border-radius: var(--radius-o); background: none; color: var(--chu); font: inherit; font-size: var(--fs-body); cursor: pointer;
}
.creditsNut:hover { background: var(--nen-menu); }
.creditsNut svg { color: var(--mag-xanh); }
.creditsHet { color: var(--warn); }

/* Thân trang: lề trên 28px, lề ngang 40px; trần bề rộng = content-max + 2 lề. */
.khungThan {
  --khung-pad-tren: 28px;
  --khung-pad-ngang: 40px;
  padding: var(--khung-pad-tren) var(--khung-pad-ngang) 64px;
  max-width: calc(var(--content-max) + 80px);
  width: 100%; min-width: 0; margin-inline: auto;
}
/* Thanh báo đầu màn trải sát hai mép, ngay dưới thanh trên. */
.khungThan > .uiBanner:first-child { margin: calc(-1 * var(--khung-pad-tren)) calc(-1 * var(--khung-pad-ngang)) 24px; }
.khungThan:has(> .uiBanner:first-child) { max-width: none; }

/* Màn kiểu Blaze: nội dung hẹp 1160px, căn giữa. Bọc nội dung màn trong lớp này. */
.trangHep { max-width: var(--noi-dung-hep); margin-inline: auto; }

/* -- trang chủ có cột phải (tuỳ chọn) --------------------------------------------------------- */

/* Trang chủ phủ hết bề ngang dưới thanh trên; cột phải 340px sát lề phải. */
.khungThan:has(> .tcKhung) { max-width: none; padding: 0; }
.tcKhung { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: calc(100vh - var(--topbar-h)); }
.tcGiua { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: 1104px; margin: 0 auto; padding: 40px 32px 56px; min-width: 0; }
.tcPhai { display: flex; flex-direction: column; gap: 28px; padding: 24px 20px 40px; border-left: 1px solid var(--vien); }
.tcDau { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tcTieuDe { margin: 0; font-size: var(--fs-section); font-family: var(--font-tieu-de); font-weight: 500; }
.tcPhaiTieuDe { margin: 0 0 12px; font-size: var(--fs-card-title); font-weight: 600; }

/* Thẻ số liệu nhỏ ở cột phải: số lớn 20px Inter Tight + nhãn, cao tối thiểu 92px, hai ô một hàng. */
.tcSo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcO { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 92px; padding: 14px; border: 1px solid var(--vien); border-radius: var(--radius-card); }
.tcOPhu { justify-content: center; }
.tcSoLon { font-size: var(--fs-section); font-family: var(--font-tieu-de); }

/* Thẻ "Mở rộng": ô icon 34px xanh nhạt + tên + mô tả. */
.tcViec { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--vien); border-radius: var(--radius-card); color: var(--chu); text-decoration: none; }
a.tcViec:hover { border-color: var(--vien-dam); background: var(--nen-menu); }
.tcViec strong { display: block; font-weight: 500; margin-bottom: 2px; }
.tcViecIcon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-button); background: var(--mag-xanh-nhat); color: var(--mag-xanh); }
.tcSapCo { color: var(--chu-phu); }
.tcSapCo .tcViecIcon { background: var(--nen-menu); color: var(--chu-nhat); }

/* -- thẻ số liệu màn Số liệu (so-lieu.css) ---------------------------------------------------- */

.slLuoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.slLuoi3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slO { border: 1px solid var(--vien); border-radius: 12px; padding: 16px 18px; background: var(--nen); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.slONhan { color: var(--chu-phu); font-size: 13px; }
.slOSo { font-size: 28px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.slOSoLoi { color: var(--danger); }

/* -- bảng (base.css) ------------------------------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th { text-align: left; font-size: var(--fs-meta); font-weight: 400; color: var(--chu-phu); padding: 10px 16px; border-bottom: 1px solid var(--vien); white-space: nowrap; background: var(--nen); }
.table td { padding: 6px 16px; height: var(--row-height); border-bottom: 1px solid var(--vien); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--nen-menu); }
.table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableWrap { overflow-x: auto; }
/* Thẻ chứa bảng: bỏ đệm, đầu thẻ có đường kẻ (là mép trên của bảng). */
.cardTight { padding: 0; overflow: hidden; }
.cardTight > .cardHead { padding: 16px var(--card-pad); margin-bottom: 0; border-bottom: 1px solid var(--vien); }

/* -- khung bật ra (ui.css) ------------------------------------------------------------------- */

.uiPopVo { position: relative; }
.uiPop { position: absolute; z-index: 60; min-width: 240px; padding: 6px; background: var(--nen); border: 1px solid var(--vien); border-radius: var(--radius-card); box-shadow: var(--bong-hop); }
.uiPop-below { top: calc(100% + 6px); }
.uiPop-end { right: 0; }
.uiPopMuc { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius-o); background: none; color: var(--chu); font: inherit; font-size: var(--fs-body); text-align: left; text-decoration: none; cursor: pointer; }
.uiPopMuc:hover { background: var(--nen-menu); }
.uiPopNgan { height: 1px; margin: 6px 4px; background: var(--vien); }

/* -- thông báo trong trang (app.css .notice, founder chốt 13/10/2026) ------------------------- */

.notice { display: flex; align-items: flex-start; gap: 10px; border-radius: 8px; border: 0; padding: 12px 14px; background: var(--nen-menu); }
.noticeIcon { flex: none; display: inline-flex; margin-top: 1px; color: var(--mag-xanh); }
.notice-danger .noticeIcon { color: var(--danger); }
.notice-warn .noticeIcon { color: var(--warn); }
.notice-ok .noticeIcon { color: var(--ok); }
.noticeBody { flex: 1; min-width: 0; }
.noticeBody > strong:first-child { font-weight: 600; color: var(--chu); }
.noticeText { margin-top: 2px; font-size: 13px; color: var(--chu-phu); line-height: var(--lh-body); }

/* -- máy tính bảng (641–1100px): menu thành dải icon 64px, thanh trên hai hàng ----------------- */

@media (max-width: 1100px) {
  .khungThan { --khung-pad-tren: 20px; --khung-pad-ngang: 20px; padding: 20px 20px 56px; }
  .thanhTren {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "ten phai" "nut nut";
    grid-template-rows: var(--topbar-h) auto;
    height: auto; gap: 0 8px;
  }
  .thanhTrenTen { grid-area: ten; }
  .thanhTrenPhai { grid-area: phai; }
  .thanhTrenNut { grid-area: nut; position: relative; min-width: 0; overflow-x: auto; padding: 0 0 8px; white-space: nowrap; scrollbar-width: none; }
  .thanhTrenNut:empty { display: none; }
  .thanhTrenNut > * { flex: none; }
  .tcKhung { grid-template-columns: 1fr; }
  .tcPhai { border-left: 0; border-top: 1px solid var(--vien); }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .khung { grid-template-columns: var(--menu-rail) minmax(0, 1fr); }
  .menuTrai .menuChu, .menuTrai .menuDuoi, .menuTrai .wsTen, .menuTrai .wsMuiTen, .menuTrai .menuNhomTen { display: none; }
  .menuMuc, .menuMucNho, .wsNut { justify-content: center; padding: 0; }
  .ws > .wsO { margin-left: 0; }
  .ws:not(:has(.wsNut)) { justify-content: center; }
}

@media (min-width: 1101px) and (max-width: 1360px) {
  .tcKhung { grid-template-columns: minmax(0, 1fr) 300px; }
  .tcGiua { padding-left: 24px; padding-right: 24px; }
}

/* -- điện thoại (≤ 640px): menu ẩn, nút ☰ mở ngăn kéo; credits + Nâng cấp vào menu avatar ------- */

.nutMenu { display: none; }

@media (max-width: 640px) {
  .khung { grid-template-columns: minmax(0, 1fr); }
  .menuTrai {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(280px, 85vw); height: 100dvh;
    transform: translateX(-100%); transition: transform 0.2s ease; visibility: hidden;
  }
  .menuTraiMo { transform: none; visibility: visible; box-shadow: var(--bong-hop); }
  .menuNen { position: fixed; inset: 0; z-index: 59; background: rgba(10, 15, 46, 0.35); }
  .nutMenu {
    grid-area: menu; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -6px;
    border: 0; border-radius: var(--radius-o); background: none; color: var(--chu); cursor: pointer;
  }
  .thanhTren { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu ten phai" "nut nut nut"; padding: 0 12px; }
  .thanhTrenPhai { gap: 6px; }
  .thanhTrenPhai .creditsNut, .thanhTrenPhai .btnBrandOutline { display: none; }
  .khungThan { --khung-pad-tren: 16px; --khung-pad-ngang: 16px; padding: 16px 16px 48px; }
  .slLuoi, .slLuoi3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}