/* Đa thiết bị (chủ tịch 15/10: "làm bố cục máy tính đầy đủ — multi device"). Nạp SAU /app.css, không đổi gì dưới 768px.
   Điểm gãy: điện thoại <768 (giữ nguyên vỏ 480) · máy tính bảng 768–1023 (tab dưới, khung 760, lưới 2 cột, tấm trượt thành hộp thoại)
   · máy tính ≥1024 (tab dưới → thanh bên trái 240px, nội dung ≤1200px, Tổng quan chính + cột phụ, danh sách sàn thành bảng,
   form 2 cột, tấm trượt sàn → ngăn kéo phải, Mẫu 03 → hộp thoại giữa màn). Kit TỐI GIẢN: không bóng, không gradient. */
.thuong-hieu-ben, .chan-ben, .bang-dau { display: none; }

@media (min-width: 768px) {
  #app { max-width: 760px; }
  .tab-duoi { max-width: 760px; }
  .man { padding-left: var(--s-6); padding-right: var(--s-6); }

  /* Tổng quan: 2 cột */
  #man-tong-quan:not([hidden]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); align-items: stretch;
    grid-template-areas: "dau dau" "tien tien" "hm han" "sdau sdau" "san san" "file aff";
  }
  #man-tong-quan > .dau-tq { grid-area: dau; }
  #hero, #the-tien { grid-area: tien; }
  #the-han-muc { grid-area: hm; }
  #tq-han { grid-area: han; }
  #the-han-muc[hidden] + #tq-han { grid-column: 1 / -1; }
  #tq-san-dau { grid-area: sdau; }
  #tq-san { grid-area: san; }
  #tq-file { grid-area: file; }
  #tq-aff { grid-area: aff; align-self: start; }

  /* Kết quả: số liệu trái, biểu đồ phải */
  #kq-co:not([hidden]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4);
    grid-template-areas: "kq kq" "bo bo" "ghi ghi" "canh canh" "cdau cdau" "cot bang" "dv dv" "nut nut";
  }
  #kq-the { grid-area: kq; }
  #kq-ba-o { grid-area: bo; }
  #kq-nam-chu { grid-area: ghi; }
  #kq-canh { grid-area: canh; }
  #kq-cot-dau { grid-area: cdau; }
  #kq-cot-khoi { grid-area: cot; align-self: start; }
  #kq-bang-khoi { grid-area: bang; align-self: start; }
  #kq-dv { grid-area: dv; }
  #kq-nut { grid-area: nut; max-width: 360px; justify-self: end; }

  /* Danh sách thẻ nhập từng sàn: 2 cột */
  .luoi-san { grid-template-columns: repeat(4, minmax(0, 120px)); }

  /* Tôi: 2 cột */
  #man-toi:not([hidden]) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-4); align-items: start;
    grid-template-areas: "dau dau" "cai faq" "lk faq" "lk le" "lk foot";
  }
  #man-toi > .dau-tq { grid-area: dau; }
  #toi-cai { grid-area: cai; }
  #man-toi > .ds-lien-ket { grid-area: lk; }
  #man-toi > .faq { grid-area: faq; }
  #man-toi > .le { grid-area: le; }
  #man-toi > footer { grid-area: foot; }

  /* Tấm trượt → hộp thoại giữa màn */
  .tam { align-items: center; padding: var(--s-6); }
  .tam .to { max-width: 560px; border-radius: 20px; max-height: calc(100dvh - 48px); padding: var(--s-5) var(--s-6) var(--s-6); }
  .tam .keo { display: none; }
  .ds-lien-ket a:hover { color: var(--chinh-dam); }
}

@media (min-width: 1024px) {
  #app { max-width: none; padding-left: 240px; border: 0; }
  .man { max-width: 1200px; margin: 0 auto; padding: 0 var(--s-8) var(--s-12); }

  /* Tab dưới → thanh bên trái */
  .tab-duoi {
    inset: 0 auto 0 0; transform: none; width: 240px; max-width: none; display: flex; flex-direction: column; gap: var(--s-1);
    padding: var(--s-5) var(--s-3); border-top: 0; border-right: 1px solid var(--vien);
  }
  .tab-duoi a { flex-direction: row; justify-content: flex-start; gap: var(--s-3); font-size: var(--chu-than); font-weight: 500; padding: var(--s-2) var(--s-3); border-radius: var(--bo); min-height: 44px; }
  .tab-duoi a svg { width: 22px; height: 22px; }
  .tab-duoi a:hover { background: var(--o-xam); color: var(--chu); }
  .tab-duoi a[aria-current="page"] { background: var(--chinh-nhat); color: var(--chinh); font-weight: 600; }
  .thuong-hieu-ben { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) var(--s-5); font-weight: 700; font-size: var(--chu-muc); color: var(--chu); }
  .thuong-hieu-ben img { width: 32px; height: 32px; border-radius: var(--bo-nho); }
  .chan-ben { display: block; margin-top: auto; padding: var(--s-3) var(--s-2) 0; border-top: 1px solid var(--vien); font-size: var(--chu-nhan); color: var(--chu-mo); }

  /* Đầu màn rộng hơn; nút tài khoản trùng thanh bên → ẩn */
  .dau-tq, .dau-con { padding-top: var(--s-8); padding-bottom: var(--s-5); }
  .dau-tq .nut-tron { display: none; }
  .ten-shop, .dau-con h2 { font-size: 28px; }
  .hero-so, .so-lon { font-size: 44px; }

  /* Tổng quan: khối chính 2/3 + cột phụ 1/3; danh sách sàn thành bảng */
  #man-tong-quan:not([hidden]) {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); column-gap: var(--s-5);
    grid-template-areas: "dau dau" "tien hm" "tien han" "tien ." "sdau sdau" "san file" "san aff";
    grid-template-rows: auto auto auto 1fr; /* hàng trống 1fr nuốt phần thừa khi khối chính cao hơn cột phụ */
  }
  #the-han-muc[hidden] + #tq-han { grid-column: auto; }
  #tq-file, #tq-aff, #the-han-muc, #tq-han { align-self: start; }
  #tq-san .bang-dau {
    display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) 110px 20px; column-gap: var(--s-3);
    padding: 0 var(--s-2) var(--s-2); border-bottom: 1px solid var(--vien); font-size: var(--chu-nhan); font-weight: 500; color: var(--chu-mo);
  }
  #tq-san .bang-dau span:first-child { grid-column: 1 / 3; }
  #tq-san .bang-dau span:last-child { text-align: right; }
  #tq-san:has(#tq-san-rong:not([hidden])) .bang-dau { display: none; }
  #tq-ds-san li { padding: 0; }
  #tq-ds-san li:first-child { border-top: 0; }
  #tq-ds-san .hang-san {
    display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) 110px 20px; column-gap: var(--s-3);
    padding: var(--s-2); border-radius: var(--bo-nho); min-height: 60px;
  }
  #tq-ds-san .hang-san:hover { background: var(--nen-phu); }
  #tq-ds-san .hang-chu { display: contents; }
  #tq-ds-san .hang-chu strong { margin: 0; }
  #tq-ds-san .nhan-tt { justify-self: start; }
  #tq-ds-san .hang-chu small { margin: 0; font-size: var(--chu-phu); color: var(--chu-mo); }
  #tq-ds-san .gia-tri { text-align: right; }
  a.the:hover, .dong-san:hover, .nut-vien:hover { border-color: var(--chinh); }

  /* Doanh thu: form 2 cột — cách nhập trái, phần bổ sung + nút tính phải (dính khi cuộn) */
  .phan-doan { max-width: 480px; }
  #form-dt { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s-5); align-items: start; }
  #pn-nhanh, #pn-tung-san, #pn-tai-file { grid-column: 1; grid-row: 1; }
  #khoi-them { grid-column: 2; grid-row: 1; position: sticky; top: var(--s-5); }
  #khoi-them .nut { margin-top: var(--s-4); }

  /* Kết quả: trái số liệu, phải biểu đồ + bảng */
  #kq-co:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-5);
    grid-template-areas: "kq cdau" "kq cot" "bo cot" "ghi bang" "canh bang" "dv bang" "nut bang" ". bang";
    grid-template-rows: repeat(7, auto) 1fr;
    align-items: start;
  }
  #kq-cot-dau { margin-top: 0; }
  #kq-nut { justify-self: stretch; max-width: none; }

  /* Hồ sơ: dòng thời gian trái, tiến độ + cam kết phải (dính) */
  #man-ho-so:not([hidden]) {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--s-5); align-items: start;
    grid-template-areas: "dau dau" "dong tien" "dong cam" "dong .";
    grid-template-rows: auto auto auto 1fr;
  }
  #man-ho-so > .dau-tq { grid-area: dau; }
  #hs-dong { grid-area: dong; }
  #hs-tien-do { grid-area: tien; }
  #hs-cam-ket { grid-area: cam; }
  .dong-tg { padding: var(--s-5) var(--s-6); }
  .dong-tg li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-4); }
  .dong-tg li.cho .phu { display: block; -webkit-line-clamp: unset; }

  /* Tấm trượt chi tiết sàn → ngăn kéo phải; Mẫu 03 giữ hộp thoại giữa màn */
  #tam-san { justify-content: flex-end; align-items: stretch; padding: 0; }
  #tam-san .to { max-width: 440px; height: 100dvh; max-height: none; border-radius: 0; border-left: 1px solid var(--vien); }
  #tam-mau .to { max-width: 640px; }
  .toast { left: calc(50% + 120px); bottom: var(--s-8); }
}

@media (min-width: 1440px) {
  .man { padding-left: var(--s-10); padding-right: var(--s-10); }
}