/*
 * Trang chủ (templates/index.bwt, snippets/home-block.bwt), mockup trang chủ PA1 bản 2.
 * Mobile: các khối nền trắng xếp dọc, cách nhau 8px trên nền xám nhạt.
 * Desktop (64em): khung --page-max, khối bo góc, lưới 5 sản phẩm.
 */

.tpl-index main {
  padding-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface-alt);
}

/* ---------- Khung chung của một khối ---------- */

.home-sec { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--color-surface); }
.home-sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.home-sh h2 { flex: 1 1 0; min-width: 12rem; margin: 0; font-size: var(--text-lg); line-height: var(--leading-tight); }
.home-more { min-height: var(--tap-min); margin: -10px 0; font-size: var(--text-sm); font-weight: var(--weight-strong); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; }
.home-more .icon { width: 16px; height: 16px; }

.home-ic { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--red-50); color: var(--color-action); display: grid; place-items: center; }
.home-ic .icon { width: 20px; height: 20px; }

/* Nút danh mục con, ngân sách: một hàng cuộn ngang trên điện thoại */
.home-chips ul, .home-chips-list {
  list-style: none;
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.home-chips ul::-webkit-scrollbar, .home-chips-list::-webkit-scrollbar { display: none; }
.home-chip {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.home-chip:hover { border-color: var(--color-action); color: var(--color-action); }

/* Lưới sản phẩm: 2 cột, 4 sản phẩm trên điện thoại */
.home-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.home-grid:not(.has-builder) > li:nth-child(n+5) { display: none; }

/* ---------- Banner ---------- */

.home-hero { display: grid; gap: var(--space-3); background: var(--color-surface); }
.hero-main { position: relative; }
.hero-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-track::-webkit-scrollbar { display: none; }
.hero-slide { flex: 0 0 100%; scroll-snap-align: start; }
.hero-slide a, .hero-side a { display: block; }
.hero-slide img, .hero-side img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; background: var(--color-surface-sunken); }
.hero-side { display: none; }
.hero-nav { display: none; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; }
.hero-dots button {
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hero-dots button::before { content: ""; width: 6px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(18, 21, 31, .25); transition: width var(--duration-fast); }
.hero-dots button[aria-current="true"]::before { width: 16px; background: var(--color-action); }

/* ---------- Flash sale ---------- */

.home-flash { padding: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); background: var(--red-700); }
.hflash-head { padding: 0 var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--color-on-action); }
.hflash-head h2 { margin: 0; font-size: var(--text-lg); display: flex; align-items: center; gap: 6px; }
.hflash-head h2 .icon { width: 20px; height: 20px; }
.hflash-timer { margin: 0; font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; }
.hflash-time { font-variant-numeric: tabular-nums; font-weight: var(--weight-strong); }
.hflash-time b { padding: 0 5px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--red-700); }
.hflash-more { min-height: var(--tap-min); margin: -10px 0 -10px auto; color: var(--color-on-action); font-size: var(--text-sm); font-weight: var(--weight-strong); text-decoration: none; display: inline-flex; align-items: center; }
.hflash-more:hover { color: var(--color-on-action); text-decoration: underline; }
.hflash-more .icon { width: 16px; height: 16px; }
.hflash-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 42%;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--space-4);
  scrollbar-width: none;
}
.hflash-list::-webkit-scrollbar { display: none; }
.hflash-list > li { scroll-snap-align: start; }
.hflash-list .pcard { border-color: transparent; }

/* ---------- Chương trình khuyến mãi ---------- */

/* Dải 5 ô banner (anh huy 03/11): kiểu như banner phụ, chỉ ảnh bo góc, không khung khối.
   Điện thoại: tràn hai mép, thấy trọn 2 ô, vuốt ngang. Máy tính: 5 ô một hàng. */
.home-strip { padding: var(--space-2) 0; background: var(--color-surface); }
.hpromo-wrap { position: relative; }
.hpromo-list {
  list-style: none; margin: 0; padding: 0 var(--space-4);
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--space-2)) / 2); gap: var(--space-2);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-4); scrollbar-width: none;
}
.hpromo-list::-webkit-scrollbar { display: none; }
.hpromo { scroll-snap-align: start; }
.hpromo a {
  display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface-sunken); text-decoration: none;
}
.hpromo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base) var(--ease-out); }
.hpromo a:hover img { transform: scale(1.03); }
.hpromo a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.hpromo-noimg {
  height: 100%; padding: var(--space-2); box-sizing: border-box; font-size: var(--text-sm);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--navy-600); color: var(--color-on-action);
  font-weight: var(--weight-strong); line-height: var(--leading-tight);
}
.hpromo-nav { display: none; }

/* ---------- Khối danh mục ---------- */

.hblock-banner { display: block; }
.hblock-banner .cbanner { border-radius: var(--radius-md); }
.hbuilder-wrap { grid-column: 1 / -1; }
.hbuilder {
  height: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-inverse);
  color: var(--color-on-inverse);
  text-decoration: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.hbuilder:hover { color: var(--color-on-inverse); }
.hbuilder-ic { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--color-action); display: grid; place-items: center; }
.hbuilder-ic .icon { width: 24px; height: 24px; }
.hbuilder-txt { display: flex; flex-direction: column; gap: 2px; }
.hbuilder-txt strong { font-size: var(--text-base); }
.hbuilder-txt span { font-size: var(--text-xs); color: var(--color-on-inverse-muted); }
.hbuilder-go {
  grid-column: 1 / -1;
  min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hbuilder-go .icon { width: 18px; height: 18px; }
.hbuilder:hover .hbuilder-go { background: var(--color-action-hover); }

.hblock-cta { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-alt); display: flex; flex-direction: column; gap: var(--space-2); }
.hblock-cta p { margin: 0; font-size: var(--text-sm); color: var(--color-text); }
.hblock-cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* ---------- Dịch vụ kỹ thuật ---------- */

.hsvc-note { margin: -4px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hsvc { display: flex; flex-direction: column; gap: var(--space-3); }
.hsvc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.hsvc-item {
  height: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hsvc-item:hover { border-color: var(--color-action); color: var(--color-text); }
.hsvc-item .home-ic { margin-bottom: 4px; }
.hsvc-item strong { font-size: var(--text-sm); line-height: var(--leading-tight); }
.hsvc-item span:last-child:not(.home-ic) { font-size: var(--text-xs); color: var(--color-text-muted); }
.hsvc-book { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.hsvc-book strong { display: none; }

/* ---------- Khách doanh nghiệp ---------- */

.home-b2b { padding: var(--space-5) var(--space-4); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-3); }
.hb2b-txt h2 { margin: 0 0 4px; font-size: var(--text-lg); line-height: var(--leading-tight); }
.hb2b-txt p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.hb2b-actions { display: grid; gap: var(--space-2); }

/* ---------- Video ngắn (hàng video, khung phát: video.css) ---------- */

.home-video .home-sh h2 { display: flex; align-items: center; gap: 6px; }
.home-video .home-sh h2 .icon { width: 20px; height: 20px; flex: none; }
.hvideo-note, .hvideo-follow.is-top { display: none; }
.hvideo-follow.is-bottom { margin-top: var(--space-1); }

/* ---------- Tin tức và hướng dẫn ---------- */

.hnews-tabs {
  width: calc(100% + 2 * var(--space-4));
  margin: 0 calc(-1 * var(--space-4));
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.hnews-tabs::-webkit-scrollbar { display: none; }
.hnews-tabs button {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  cursor: pointer;
}
.hnews-tabs button[aria-selected="true"] { background: var(--color-inverse); border-color: var(--color-inverse); color: var(--color-on-inverse); }
.hnews-panel { display: flex; flex-direction: column; gap: var(--space-3); }
.hnews-panel[hidden] { display: none; }
.hnews-lead, .hnews-row { color: var(--color-text); text-decoration: none; }
.hnews-lead:hover .hnews-title, .hnews-row:hover .hnews-title { color: var(--color-action-hover); }
.hnews-lead { display: flex; flex-direction: column; gap: var(--space-2); }
.hnews-img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-sunken); }
.hnews-img img { width: 100%; height: 100%; object-fit: cover; }
.hnews-body { display: flex; flex-direction: column; gap: 4px; }
.hnews-title { font-size: var(--text-sm); line-height: var(--leading-tight); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hnews-lead .hnews-title { font-size: var(--text-base); -webkit-line-clamp: 3; }
.hnews-sum { display: none; }
.hnews-date { font-size: var(--text-xs); color: var(--color-text-muted); }
.hnews-list { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.hnews-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.hnews-all { align-self: flex-start; margin: 0; }

/* ---------- Máy tính bảng ---------- */

@media (min-width: 40em) {
  .hflash-list { grid-auto-columns: 24%; }
  .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-grid:not(.has-builder) > li:nth-child(n+5) { display: block; }
  .home-grid:not(.has-builder) > li:nth-child(n+4) { display: none; }
  .hpromo-list { gap: var(--space-3); grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3); }
  .hsvc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hb2b-actions { grid-template-columns: auto auto; justify-content: start; }
}

/* ---------- Desktop ---------- */

@media (min-width: 64em) {
  .tpl-index main { padding: var(--space-4) 0 var(--space-7); gap: var(--space-4); }
  .tpl-index main > * { width: calc(100% - 2 * var(--page-gutter)); max-width: calc(var(--page-max) - 2 * var(--page-gutter)); margin: 0 auto; box-sizing: border-box; }
  .home-sec { padding: var(--space-4); border-radius: var(--radius-md); gap: var(--space-3); }
  .home-sh h2 { font-size: var(--text-lg); }
  .home-chips ul, .home-chips-list { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }

  .home-hero { background: none; }
  .home-hero.has-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .hero-main, .hero-slide img { border-radius: var(--radius-md); overflow: hidden; }
  /* Cột phụ không tự đẩy chiều cao (contain: size); hàng cao đúng bằng ảnh slide 2:1, cột phụ giãn theo. */
  .hero-side { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: var(--space-3); contain: size; min-height: 0; }
  .hero-side li, .hero-side a { min-height: 0; height: 100%; }
  .hero-side img { height: 100%; aspect-ratio: auto; border-radius: var(--radius-md); }
  .hero-nav {
    position: absolute;
    top: 50%;
    width: 40px; height: 40px;
    margin-top: -20px;
    border: 0;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .9);
    color: var(--color-text);
    box-shadow: var(--shadow-sm);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--duration-fast);
    cursor: pointer;
  }
  .hero-nav.is-prev { left: var(--space-3); }
  .hero-nav.is-next { right: var(--space-3); }
  .hero-main:hover .hero-nav, .hero-nav:focus-visible { opacity: 1; }
  .hero-dots { bottom: var(--space-2); }


  .home-flash { padding: var(--space-4) var(--space-5) var(--space-5); border-radius: var(--radius-md); }
  .hflash-head { padding: 0; gap: var(--space-4); }
  .hflash-head h2 { font-size: var(--text-xl); }
  .hflash-head h2 .icon { width: 24px; height: 24px; }
  /* Desktop: hiện 5 sản phẩm một lượt, kéo bằng chuột (assets/home.js) hoặc cuộn ngang để xem tới 10 */
  .hflash-list { padding: 0; grid-auto-columns: calc((100% - 4 * var(--space-2)) / 5); scroll-padding: 0; cursor: grab; }
  .hflash-list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .hflash-list.is-dragging a { pointer-events: none; }

  .home-strip { padding: 0; background: none; }
  .hpromo-list { padding: 0; grid-auto-columns: calc((100% - 4 * var(--space-3)) / 5); cursor: grab; }
  .hpromo-list.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .hpromo-list.is-dragging a { pointer-events: none; }
  /* Nút trước/sau: JS bỏ hidden khi dải dài hơn khung */
  .hpromo-nav {
    position: absolute; top: 50%; z-index: 1; transform: translateY(-50%);
    width: 36px; height: 36px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .hpromo-nav[hidden] { display: none; }
  .hpromo-nav:hover { color: var(--color-action-hover); }
  .hpromo-nav .icon { width: 18px; height: 18px; }
  .hpromo-nav.is-prev { left: var(--space-2); }
  .hpromo-nav.is-next { right: var(--space-2); }

  .hblock .home-sh { justify-content: flex-start; }
  .hblock .home-more { margin-left: auto; }
  .home-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
  .home-grid:not(.has-builder) > li:nth-child(n+4) { display: block; }
  .hbuilder-wrap { grid-column: auto; }
  .hbuilder { padding: 20px; grid-template-columns: 1fr; align-content: start; gap: var(--space-3); }
  .hbuilder-ic { width: 52px; height: 52px; }
  .hbuilder-txt strong { font-size: var(--text-lg); }
  .hbuilder-txt span { font-size: var(--text-sm); }
  .hbuilder-go { margin-top: auto; align-self: end; }
  .hblock-cta { flex-direction: row; align-items: center; gap: var(--space-3); }
  .hblock-cta p { flex: 1; }
  .hblock-cta-actions { display: flex; }

  .home-svc .home-sh h2 { margin-right: var(--space-2); }
  .hsvc-note { margin: 0; }
  .hsvc { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-3); }
  .hsvc-item { padding: var(--space-4); }
  .hsvc-item strong { font-size: var(--text-base); }
  .hsvc-book { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-inverse); color: var(--color-on-inverse); grid-template-columns: 1fr; align-content: center; }
  .hsvc-book strong { display: block; }
  .hsvc-book .btn-sec { background: transparent; color: var(--color-on-inverse); box-shadow: inset 0 0 0 1px var(--color-border-inverse); }

  .home-b2b { padding: 20px var(--space-6); border-radius: var(--radius-md); box-shadow: inset 4px 0 0 var(--color-action); flex-direction: row; align-items: center; gap: var(--space-6); }
  .hb2b-txt { flex: 1; }
  .hb2b-txt h2 { font-size: var(--text-xl); }
  .hb2b-txt p { font-size: var(--text-base); }
  .hvideo-note { display: block; margin: 0; color: var(--color-text-muted); }
  .hvideo-follow.is-top { display: flex; margin-left: auto; }
  .hvideo-follow.is-bottom { display: none; }
  .home-video .home-sh h2 { flex: none; }
  .home-video .home-sh h2 .icon { width: 24px; height: 24px; }
  .home-video .hvideo-list { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: var(--space-3); }

  .home-news .home-sh { flex-wrap: nowrap; gap: var(--space-4); }
  .home-news .home-sh h2 { flex: none; }
  .hnews-tabs { width: auto; margin: 0; padding: 0; flex-wrap: wrap; }
  .hnews-panel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-3) var(--space-6); align-items: start; }
  .hnews-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
  .hnews-lead .hnews-body { gap: var(--space-2); }
  .hnews-lead .hnews-title { font-size: var(--text-lg); }
  .hnews-sum { display: -webkit-box; font-size: var(--text-sm); color: var(--color-text-muted); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .hnews-list { padding: 0; border: 0; }
  .hnews-row { grid-template-columns: 128px minmax(0, 1fr); }
  .hnews-all { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-track { scroll-behavior: auto; }
}