/* ============================================================
   distributor.css — Chỉ dùng cho he-thong-phan-phoi.html
   (trang 17 file thiết kế)
   Bố cục: cột trái = bộ lọc + danh sách chi nhánh cuộn được,
           cột phải = bản đồ (ô chờ, chưa có ảnh).
   Nạp SAU common.css. Component dùng chung (.breadcrumb,
   .page-head, .re-select-main--field, .btn…) nằm ở common.css.
   ============================================================ */

.dist { padding-bottom: var(--sp-section); }

/* Cột trái rộng 480px (trước 400px): ở 400px thì tên chi nhánh phải xuống hai
   dòng vì còn phải chừa chỗ cho link "Chỉ đường" nằm cùng hàng — "Công ty Thanh
   Long Phú Mỹ" vỡ làm đôi ngay ở khổ desktop.

   `align-items: stretch` (mặc định, trước đây là `start`) là mấu chốt để CỘT TRÁI
   CAO ĐÚNG BẰNG BẢN ĐỒ — xem §"cột trái cao bằng bản đồ" bên dưới. */
.dist__layout {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 44px);
  align-items: stretch;
}

/* ===== Cột trái cao bằng bản đồ =====
   Trước đây danh sách bị chặn bởi `max-height: clamp(360px, 48vh, 520px)` — một
   con số rời rạc, không liên quan gì tới bản đồ, nên hai cột lệch đáy ở gần như
   mọi khổ màn (đo cũ: 1920 → 644/567, 1440 → 558/567, 1280 → 510/569).
   Giờ chiều cao danh sách là PHẦN CÒN LẠI của hàng grid, mà hàng grid lấy chiều
   cao từ bản đồ (`aspect-ratio: 4/3` trên bề rộng cột phải) → hai cột luôn bằng
   đáy ở mọi bề rộng, không cần một con số magic nào.

   `height: 0` trên .dist__list KHÔNG thừa dù đã có flex-grow. Chiều cao hàng grid
   = max-content của các item; max-content của cột trái mà tính cả 11 thẻ thì ra
   ~1454px và chính cột trái sẽ kéo hàng cao lên, bản đồ giãn theo, hỏng hết.
   `height: 0` là chiều cao ĐỊNH LƯỢNG nên đóng góp của danh sách vào phép đo đó
   bằng 0 → hàng chỉ còn nghe theo bản đồ, rồi flex-grow trả lại chỗ trống.
   `min-height: 0` trên .dist__side gỡ chặn tự động của flex/grid item.

   NGOẠI LỆ ở dải 1025-1200px: bản đồ hẹp nên `aspect-ratio: 4/3` chỉ cho ~335px
   cao, trừ đi hàng lọc 46 + khe 40 thì danh sách còn ~258px — chưa nổi ba thẻ,
   thấp hơn cả sàn 360px của thiết kế cũ. Ở dải đó `min-height` của .dist__list
   thắng và ĐẢO CHIỀU phụ thuộc: cột trái thành bên cao hơn, hàng nghe theo nó.
   Bản đồ theo kịp nhờ `height: 100%` ở .dist__map-ph (xem §bản đồ) — nó cao hơn
   4/3 một chút chứ KHÔNG để hở dải trắng dưới đáy. Hai cột vẫn bằng đáy ở mọi
   bề rộng, chỉ là bên nào quyết định chiều cao thì đổi. */
.dist__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ===== Cột trái: bộ lọc =====
   MỘT hàng duy nhất: hai ô lọc chia đều, nút đặt lại bám cuối hàng — đồng bộ với
   hàng lọc trang Dự án / Tuyển dụng và với chính khổ ≤640px của trang này.

   Cột thứ ba PHẢI là `auto` chứ không phải `1fr`: <button> là block nên nó giãn
   kín ô lưới, một ô 1fr sẽ cho icon 17px một vùng bấm rộng cả trăm px — không
   nhìn thấy được nhưng quét trúng là xoá bộ lọc. Track `auto` ôm sát icon; vùng
   bấm 44x44 vẫn đủ nhờ ::after ở common.css.

   `align-items: center` để icon 24px căn giữa theo chiều cao 46px của ô lọc. */
.dist__fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
}
/* Ẩn lựa chọn tỉnh không thuộc khu vực đang chọn (JS gắn [hidden]).
   Cần khai báo vì .re-select__list button đặt display:block. */
.dist__fields .re-select__list button[hidden] { display: none; }

/* ===== Cột trái: danh sách chi nhánh (cuộn được) ===== */
.dist__list {
  /* Khe giữa hàng lọc và thẻ đầu tiên. Rộng hơn khe giữa hai thẻ (24px) thì mắt
     mới đọc ra "bộ lọc" và "kết quả" là hai khối khác nhau chứ không phải một
     danh sách dài; ở 16px cũ hai khối dính vào nhau thành một mảng đặc. */
  margin-top: clamp(28px, 3vw, 40px);
  flex: 1 1 auto;
  height: 0;                    /* xem §"cột trái cao bằng bản đồ" */
  /* Sàn tối thiểu — đúng con số sàn của thiết kế cũ (`clamp(360px, …)`). Dưới ba
     thẻ thì khung cuộn không còn đọc ra là một DANH SÁCH: người dùng thấy hai thẻ
     rưỡi và không có tín hiệu nào cho biết bên dưới còn 9 chi nhánh nữa. */
  min-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Chừa 28px giữa nội dung thẻ và thanh cuộn. Với `overflow-y: auto`, thanh cuộn
     nằm ở MÉP TRONG của padding, nên padding-right chính là khe hở đó — và cũng
     là chỗ vạch `border-bottom` của .dist-item dừng lại. Ở 10px thì link "Chỉ
     đường" gần như chạm thanh cuộn, đọc ra như bị cắt. */
  padding-right: 28px;
}
/* Thanh cuộn mảnh cho khớp thiết kế */
.dist__list { scrollbar-width: thin; scrollbar-color: var(--c-grey) transparent; }
.dist__list::-webkit-scrollbar { width: 5px; }
.dist__list::-webkit-scrollbar-track { background: var(--c-line); border-radius: var(--r-pill); }
.dist__list::-webkit-scrollbar-thumb { background: var(--c-grey); border-radius: var(--r-pill); }

.dist-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  /* 24px dọc thay cho 16px: mỗi thẻ có ba dòng (tên / địa chỉ / điện thoại) dính
     sát nhau, nên khoảng thở giữa hai thẻ phải rõ hơn khoảng cách các dòng TRONG
     thẻ, không thì vạch kẻ là thứ duy nhất tách được chúng. */
  padding: 24px 0;
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
}
.dist-item[hidden] { display: none; }
/* Cả thẻ là vùng bấm được (distributor.js gán role="button"), nên trạng thái
   đang chọn phải nhìn thấy ở mức cả thẻ chứ không chỉ ở màu chữ tiêu đề. */
.dist-item {
  position: relative;
  transition: background-color var(--dur) var(--ease);
}
.dist-item::before {
  content: "";
  position: absolute;
  left: -12px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-primary);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.dist-item.is-active::before { opacity: 1; }
.dist-item:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.dist-item:first-child { padding-top: 4px; }

.dist-item__body { min-width: 0; }
.dist-item__name {
  font-size: var(--fs-card);
  font-weight: var(--fw-title);
  line-height: 1.35;
  transition: color var(--dur) var(--ease);
}
.dist-item:hover .dist-item__name,
.dist-item.is-active .dist-item__name { color: var(--c-primary); }

.dist-item__addr {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-muted);
}
.dist-item__tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--c-muted);
  transition: color var(--dur) var(--ease);
}
.dist-item__tel:hover { color: var(--c-primary); }

/* Link "Chỉ đường" căn phải, không co lại khi tên chi nhánh dài */
.dist-item__dir {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--c-primary);
  transition: color var(--dur) var(--ease);
}
.dist-item__dir:hover { color: var(--c-primary-dark); text-decoration: underline; }

.dist__empty {
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* ===== Cột phải: bản đồ (ô chờ — chưa có ảnh bản đồ) =====
   KHÔNG dùng `position: sticky` ở đây, và giờ thì KHÔNG BAO GIỜ có tác dụng nữa.
   Sticky cần khung chứa CAO HƠN phần tử mới có quãng để dính; từ khi cột trái lấy
   chiều cao đúng bằng bản đồ (§"cột trái cao bằng bản đồ"), hàng grid cao đúng
   bằng bản đồ → quãng dính = 0 ở MỌI bề rộng, không còn phụ thuộc khổ màn như đo
   cũ nữa. Muốn bản đồ ghìm thật thì phải bỏ cuộn nội bộ của .dist__list cho danh
   sách chạy hết ~1454px — trái thiết kế PDF trang 17. Đừng thêm lại sticky nếu
   chưa đổi điều đó. */
.dist__map-ph {
  /* <figure> mang sẵn `margin-inline: 40px` của trình duyệt. common.css reset
     ul/ol/h1-h6/p nhưng KHÔNG reset figure, nên phải tự xoá ở đây — giống
     .p-hero / .p-intro__media / .p-shot bên project-page.css. Bỏ dòng này thì
     bản đồ lệch 40px và tràn ngang ở khổ hẹp. */
  margin: 0;
  position: relative;
  /* Cặp `aspect-ratio` + `height: 100%` phục vụ HAI chiều phụ thuộc trái ngược,
     và chỉ một trong hai ăn ở mỗi khổ màn — không cái nào thừa:
       · Khổ rộng (bản đồ là bên CAO HƠN): chiều cao hàng grid chưa định lượng khi
         đang được đo, nên `100%` không giải được và rơi về auto → `aspect-ratio`
         quyết định chiều cao, rồi chính nó định chiều cao hàng.
       · Dải 1025-1200px (danh sách chạm sàn `min-height`, cột TRÁI cao hơn): hàng
         đã định lượng theo cột trái → `100%` ăn và ghi đè `aspect-ratio`, bản đồ
         cao hơn 4/3 một chút cho khớp đáy. Thiếu dòng này thì figure giữ nguyên
         4/3 và hở một dải trắng dưới bản đồ.

     `width: 100%` KHÔNG phải cho đẹp mã: `aspect-ratio` là quan hệ HAI CHIỀU, nên
     ngay khi `height: 100%` ăn mà bề rộng vẫn là `auto`, Chrome suy NGƯỢC bề rộng
     ra từ tỉ lệ — figure phình từ 447px lên 583px và trang tràn ngang 96px (đo ở
     1040px: scrollWidth 1136 / viewport 1040). Khai bề rộng tường minh thì tỉ lệ
     chỉ còn được phép nói về chiều cao. */
  aspect-ratio: 4 / 3;
  width: 100%;
  height: 100%;
  background: var(--c-grey-light);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* --- Bản đồ tương tác (distributor.js chèn iframe khi người dùng chọn chi nhánh) ---
   Trạng thái mặc định là ô trống: không còn ảnh chụp bản đồ tĩnh nữa. */
.dist__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease);
}
.dist__map-ph.is-live .dist__map-frame { opacity: 1; }

/* Chú thích đè lên đáy bản đồ — nền mờ để chữ đọc được trên mọi vùng ảnh */
.dist__map-note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;                 /* trên iframe */
  pointer-events: none;       /* nhưng không chặn thao tác kéo bản đồ */
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(21, 46, 43, .88), rgba(21, 46, 43, 0));
  color: #fff;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
/* Khi chưa có bản đồ, ô trống không có gì để "đè" lên: dải mờ tối ở đáy một ô
   xám sẽ đọc như lỗi tải ảnh. Đưa lời mời ra giữa ô, bỏ nền, dùng màu chữ phụ —
   ô trống nhìn ra là đang chờ thao tác chứ không phải hỏng. */
.dist__map-ph:not(.is-live) .dist__map-note {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: none;
  color: var(--c-body);
  text-align: center;
}

/* ===== RESPONSIVE (1024 / 720 / 640) ===== */
@media (max-width: 1024px) {
  /* ---- Thứ tự một cột: BỘ LỌC → DANH SÁCH → BẢN ĐỒ ----
     Phản hồi MONA R1 tr.14: "Bỏ ghim phần map, chỉ ghim phần bộ lọc chọn khu
     vực… để tránh che list cửa hàng khi lướt xuống, di chuyển phần map xuống
     dưới cùng (giống web tasa)".

     Bản trước xếp BỘ LỌC → BẢN ĐỒ → DANH SÁCH và ghim CẢ HAI khối trên. Cộng lại
     thì phần dính cứng đầu màn hình là 62px header + 56px hàng lọc + bản đồ 16/9
     (~211px ở máy 375px) ≈ 330px — quá nửa màn hình điện thoại, danh sách chi
     nhánh chỉ còn một khe hẹp để cuộn. Đó là "che list cửa hàng" mà client báo.

     .dist__side chỉ là thẻ gom DOM (không có một khai báo CSS nào trong file
     này), nên `display: contents` xoá nó đi hoàn toàn an toàn: lọc và danh sách
     trở thành item trực tiếp của .dist__layout, sắp lại được bằng `order` mà
     không phải đụng vào markup (thứ tự DOM gốc là lọc → danh sách → bản đồ).

     `align-items: start` ở khai báo desktop PHẢI được đặt lại thành `stretch`.
     Trên grid nó nghĩa là "đừng kéo cao các hàng"; đổi sang flex cột thì trục
     chéo thành trục NGANG, nên cùng một dòng đó lại có nghĩa "co bề rộng theo
     nội dung". .dist__map khi ấy bị co quanh một figure mà con duy nhất là
     absolute (không đóng góp bề rộng) → bản đồ tụt về 0px hoặc tràn ngang. */
  .dist__layout { display: flex; flex-direction: column; align-items: stretch; }
  .dist__side { display: contents; }
  .dist__fields { order: 1; }
  .js-dist-count, .dist__list, .dist__empty { order: 2; }
  .dist__map    { order: 3; }

  /* ---- CHỈ ghim bộ lọc ----
     Bộ lọc vẫn dính dưới header: nó là thứ người dùng quay lại nhiều lần khi rà
     danh sách, và nó chỉ cao 56px nên không lấn.

     ĐỪNG thêm `position: sticky` cho .dist__map lần nữa — đó chính là thứ vừa bị
     trả lại. Bản đồ nay nằm cuối trang, việc "chọn chi nhánh ở trên, thấy bản đồ
     ở dưới" do distributor.js lo bằng cách cuộn tới bản đồ sau khi chọn.

     Nền trắng + padding để danh sách bên dưới không lộ ra ở khe dưới hàng lọc
     lúc trượt qua (vùng margin không được tô nền, nên phải dùng padding).

     `top` PHẢI cộng CẢ --header-top LẪN --header-h. Bản trước viết
     `calc(var(--header-h) + 10px)` = 62 + 10 = 72px, tưởng "10px" là khe nhưng
     nó chỉ vô tình bằng đúng --header-top: header trôi nổi chiếm y = 10..72, nên
     đỉnh hàng lọc rơi ĐÚNG vào đáy header — khe thật bằng 0 và hai khối dính
     liền nhau (client gửi ảnh chụp lúc ghim, tháng 08/2026).
     Header là position:fixed neo theo --header-top, KHÔNG nằm trong luồng, nên
     mọi mốc sticky bên dưới phải tự cộng lại đủ hai biến rồi mới tới khe. */
  .dist__fields {
    position: sticky;
    top: calc(var(--header-top) + var(--header-h) + 14px);
    z-index: 4;
    background: #fff; padding-bottom: 10px;
  }
  .dist__map { margin-top: clamp(20px, 2.4vw, 28px); }

  /* `height: auto` gỡ `height: 100%` của bản desktop: một cột nên chẳng còn hàng
     grid nào để bằng đáy, và ở đây .dist__map là flex item của một flex COLUMN nên
     `stretch` chỉ tác động lên bề rộng — chiều cao nó là auto, `100%` giải ra auto
     là vô hại nhưng khai tường minh cho khỏi phải suy luận lại. */
  .dist__map-ph { aspect-ratio: 16 / 9; height: auto; }

  /* Bỏ vùng cuộn lồng. Trên desktop `max-height` là chủ ý thiết kế (xem ghi chú
     ở §bản đồ bên trên); trên cảm ứng thì ngược lại — một khung cuộn nằm trong
     trang cũng cuộn được là cái bẫy kinh điển: vuốt trong danh sách thì trang
     đứng yên, vuốt trượt ra ngoài thì danh sách đứng yên. Cho danh sách chạy
     hết chiều cao, trang chỉ còn MỘT trục cuộn.

     `height: 0` + `flex: 1 1 auto` của bản desktop PHẢI được gỡ ở đây, và không
     thể trông chờ vào việc .dist__side đã `display: contents`: xoá thẻ bọc đi thì
     .dist__list trở thành flex item TRỰC TIẾP của .dist__layout — vốn cũng là flex
     column ở khổ này — nên hai khai báo đó vẫn có hiệu lực và ép danh sách về 0px.
     Ở đây cột trái không còn nằm cạnh bản đồ nữa nên cũng chẳng có gì để cao bằng. */
  .dist__list {
    height: auto; flex: none; min-height: 0;
    max-height: none; overflow-y: visible; padding-right: 0;
    margin-top: clamp(20px, 2.4vw, 28px);
  }
}
@media (max-width: 640px) {
  /* Vẫn MỘT hàng như desktop (xem §bộ lọc), chỉ thu khe hở lại cho vừa 375px. */
  .dist__fields { gap: 8px; }
  /* Bóp đệm ngang để chuỗi dài còn chỗ hiện trước khi bị cắt. Quy tắc "một hàng
     + ellipsis" giờ nằm ở common.css §10b và áp cho MỌI khổ, không chỉ ≤640px —
     khổ tablet cũng chỉ có ~nửa khung cho mỗi ô. */
  .dist__fields .re-select__btn { padding: 0 10px; }

  /* Số điện thoại và "Chỉ đường" đo được 21px — dưới ngưỡng chạm 24px, mà đây
     lại đúng là hai hành động chính của mỗi chi nhánh. Nới bằng padding dọc,
     bù margin-top để khoảng cách giữa các dòng trong thẻ không đổi. */
  .dist-item__tel, .dist-item__dir { padding-block: 6px; }
  .dist-item__tel { margin-top: 2px; }
  .dist-item { flex-direction: column; gap: 10px; }
  .dist-item__dir { align-self: flex-start; }
  .dist__map-ph { aspect-ratio: 4 / 3; }
}