/*
 * Khung trang: container, lưới nội dung + cột bên.
 *
 * ⚠️ Bản gốc dùng 2 master page (pc/mb) chọn bằng UA sniffing → 2 bộ HTML.
 *    Bản này CHỈ MỘT bộ markup; khác biệt hoàn toàn nằm ở CSS.
 *    Cấm dùng display:none để giấu rồi dựng lại cùng nội dung chỗ khác.
 */

.hl-container {
  width: 100%;
  max-width: var(--hl-container);
  margin-inline: auto;
  padding-inline: 10px;
}

@media (min-width: 768px)  { .hl-container { padding-inline: 12px; } }
@media (min-width: 992px)  { .hl-container { padding-inline: 15px; } }
@media (min-width: 1230px) { .hl-container { padding-inline: 0; } }

/*
 * Khối tràn viền màn hình (slider trang chủ).
 *
 * ⚠️ `100vw` TÍNH CẢ THANH CUỘN DỌC. Trên máy để bàn (thanh cuộn chiếm chỗ
 *    thật, ~15px) khối này rộng hơn vùng nhìn thấy đúng bằng bề rộng thanh
 *    cuộn → trang chủ sinh thêm THANH CUỘN NGANG. Đo 06-08-2026 ở 1280px:
 *    vùng nhìn 1265px, nội dung 1273px.
 *
 *    `overflow-x: clip` ở body cắt phần thừa mà KHÔNG phá `position: sticky`
 *    của phần tử con (khác `overflow: hidden`). Thanh menu dính dùng
 *    `position: fixed` nên cũng không ảnh hưởng.
 */
body { overflow-x: clip; }

.hl-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------ *
 * Lưới nội dung + cột bên
 *
 * Một khai báo grid duy nhất; đảo trái/phải bằng `order`, KHÔNG dựng
 * lại markup. `.hl-layout--right` = cột bên nằm bên phải (trang SP).
 * ------------------------------------------------------------------ */
.hl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hl-gutter);
  align-items: start;
  padding-bottom: var(--hl-gutter);
}

.hl-layout__aside { min-width: 0; }
.hl-layout__main  { min-width: 0; }

/* Dưới 992px cột bên xuống dưới nội dung — nội dung chính quan trọng hơn. */
.hl-layout__aside { order: 2; }
.hl-layout__main  { order: 1; }

@media (min-width: 992px) {
  .hl-layout {
    grid-template-columns: var(--hl-sidebar) minmax(0, 1fr);
  }

  .hl-layout__aside { order: 1; }
  .hl-layout__main  { order: 2; }

  /* Cột bên bên PHẢI (trang chi tiết sản phẩm). */
  .hl-layout--right { grid-template-columns: minmax(0, 1fr) var(--hl-sidebar); }
  .hl-layout--right .hl-layout__aside { order: 2; }
  .hl-layout--right .hl-layout__main  { order: 1; }
}

/* ------------------------------------------------------------------ *
 * Lưới sản phẩm / tin — một class, số cột đổi theo breakpoint.
 * ------------------------------------------------------------------ */
.hl-grid {
  display: grid;
  gap: 10px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px)  { .hl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .hl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Lưới trong cột nội dung 910px chỉ có 3 cột kể cả ở màn rộng. */
.hl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .hl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Lưới tin 1 cột ở màn hẹp. */
.hl-grid--news { gap: 20px; }
@media (max-width: 479px) { .hl-grid--news { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ *
 * Tiện ích
 * ------------------------------------------------------------------ */
.hl-stack > * + * { margin-top: var(--gap, 15px); }

.hl-hidden { display: none !important; }