/**
 * Hero slider "hp-hero" — port nguyên văn từ <style id="hp-hero-css"> của
 * index-v1.html (bản tĩnh, mô phỏng slider hoaphat.com.vn):
 * trượt ngang translate3d, KHÔNG mũi tên/dots, điều hướng bằng thanh tab chữ
 * trắng 60px dưới đáy hero. Dùng CSS variables + .container của theme knt.
 *
 * Khác bản tĩnh duy nhất: bỏ transform scale(1.04) trên img — hack đó chỉ để
 * che viền màu bake sẵn trong bộ ảnh tạm, ảnh thật không cần.
 */

.hp-hero { position: relative; background: var(--primary-dark); overflow: hidden; box-shadow: 0 3px 5px rgba(26, 34, 48, .12); }
.hp-hero:focus { outline: none; }
.hp-hero:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.hp-hero__viewport { overflow: hidden; position: relative; } /* mốc định vị cho plate logo */
.hp-hero__track { display: flex; will-change: transform; transform: translate3d(0, 0, 0); }
.hp-hero__slide { position: relative; flex: 0 0 100%; min-width: 100%; }

/* Ảnh full-bleed, cao & thoáng — chiếm gần trọn màn hình đầu tiên (khách yêu cầu
   2026-07-15). Trần 860px để màn siêu rộng không quá cao; sàn 480px cho laptop nhỏ. */
.hp-hero__media { display: block; height: clamp(480px, 80vh, 860px); overflow: hidden; }
.hp-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim (lớp tối) trên slide có caption — giữ chữ trắng đọc được trên mọi ảnh.
   Mặc định đổ từ trái; ghi đè theo vị trí chữ bên dưới để luôn tối ở chỗ có chữ.
   [Vòng 2 — 30/07] Dùng CHUNG công thức 2 tầng với .page-banner--photo::before
   (pages.css): tầng 1 tối dần từ đáy lên, tầng 2 vệt tối theo phía có chữ.
   Điểm dừng cuối KHÔNG về 0 (cũ về 0 ở mốc 72% → cuối tiêu đề nằm trên ảnh
   trần) — sàn tối thiểu .40/.45 để chữ trắng luôn đạt tương phản. */
.hp-hero__slide--text::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(6, 10, 32, .86) 0%, rgba(6, 10, 32, .55) 42%, rgba(6, 10, 32, .18) 78%, rgba(6, 10, 32, .10) 100%),
    linear-gradient(90deg, rgba(6, 10, 32, .72) 0%, rgba(6, 10, 32, .55) 55%, rgba(6, 10, 32, .45) 100%);
}

/* Khối chữ phủ toàn ảnh, canh theo data-hp-pos. pointer-events:none để bấm vùng
   trống vẫn mở link ảnh; chỉ .hp-hero__caption nhận click. */
.hp-hero__text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(34px, 6vw, 72px) 0;
  pointer-events: none;
}
.hp-hero__text .container { width: 100%; }
.hp-hero__caption { display: block; max-width: 780px; color: #fff; text-decoration: none; pointer-events: auto; }

/* --- Vị trí đứng (trên/giữa/dưới) --- */
.hp-hero__slide[data-hp-pos^="center-"] .hp-hero__text { justify-content: center; }
.hp-hero__slide[data-hp-pos^="bottom-"] .hp-hero__text { justify-content: flex-end; }

/* --- Vị trí ngang (trái/giữa/phải) trong grid 1200px --- */
.hp-hero__slide[data-hp-pos$="-center"] .hp-hero__caption { margin-left: auto; margin-right: auto; text-align: center; }
.hp-hero__slide[data-hp-pos$="-right"] .hp-hero__caption { margin-left: auto; text-align: right; }
.hp-hero__slide[data-hp-pos$="-center"] .hp-hero__slogan,
.hp-hero__slide[data-hp-pos$="-center"] .hp-hero__desc { margin-left: auto; margin-right: auto; }
.hp-hero__slide[data-hp-pos$="-right"] .hp-hero__slogan,
.hp-hero__slide[data-hp-pos$="-right"] .hp-hero__desc { margin-left: auto; margin-right: 0; }

/* --- Scrim theo vị trí: luôn tối ở phía có chữ ---
   [Vòng 2 — 30/07] Cùng công thức 2 tầng, chỉ đổi CHIỀU tầng 2 theo
   data-hp-pos; mọi điểm dừng cuối ≥ .40. */
.hp-hero__slide[data-hp-pos$="-right"]::after {
  background:
    linear-gradient(0deg, rgba(6, 10, 32, .86) 0%, rgba(6, 10, 32, .55) 42%, rgba(6, 10, 32, .18) 78%, rgba(6, 10, 32, .10) 100%),
    linear-gradient(270deg, rgba(6, 10, 32, .72) 0%, rgba(6, 10, 32, .55) 55%, rgba(6, 10, 32, .45) 100%);
}
.hp-hero__slide[data-hp-pos^="top-"][data-hp-pos$="-center"]::after {
  background: linear-gradient(180deg, rgba(6, 10, 32, .78) 0%, rgba(6, 10, 32, .50) 48%, rgba(6, 10, 32, .40) 100%);
}
.hp-hero__slide[data-hp-pos^="bottom-"][data-hp-pos$="-center"]::after {
  background: linear-gradient(0deg, rgba(6, 10, 32, .82) 0%, rgba(6, 10, 32, .50) 48%, rgba(6, 10, 32, .40) 100%);
}
.hp-hero__slide[data-hp-pos="center-center"]::after {
  background: radial-gradient(120% 120% at 50% 50%, rgba(6, 10, 32, .70) 0%, rgba(6, 10, 32, .48) 55%, rgba(6, 10, 32, .40) 100%);
}
.hp-hero__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: clamp(.9rem, 1.15vw, 1.38rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 12px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  transition: color var(--t-fast);
}
.hp-hero__name::before {
  content: "";
  width: 9px; height: 9px;
  border-top: 3px solid var(--accent);
  border-right: 3px solid var(--accent);
  transform: rotate(45deg);
  flex: none;
  transition: transform var(--t-fast);
}
.hp-hero__caption:hover .hp-hero__name { color: #ffd9b0; }
.hp-hero__caption:hover .hp-hero__name::before { transform: rotate(45deg) translate(2px, -2px); }
.hp-hero__slogan {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1.16;
  max-width: 680px;
  /* Chuỗi dài không khoảng trắng (admin gõ tay) phải xuống dòng, không bị
     .hp-hero{overflow:hidden} cắt cụt. word-break: fallback cho Safari cũ. */
  overflow-wrap: anywhere;
  word-break: break-word;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
/* Bảng màu nhấn định sẵn cho tiêu đề (áp bằng thanh công cụ màu ở màn sửa) —
   giữ on-brand + luôn đọc rõ trên ảnh tối. Áp cho cả H1 lẫn slide sau (cùng
   class hp-hero__slogan). */
.hp-hero__slogan .hl { color: var(--accent); }        /* cam nhấn thương hiệu */
.hp-hero__slogan .hl-gold { color: #ffcf9c; }          /* vàng ấm */
.hp-hero__slogan .hl-white { color: #fff; }            /* trắng (mặc định/khôi phục) */
.hp-hero__desc {
  font-size: clamp(.9rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
  color: #fff;
  opacity: .95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

/* Thanh tab chữ — dải trắng 60px ngay dưới đáy hero, điều hướng duy nhất */
.hp-hero__tabbar { position: relative; z-index: 3; background: var(--surface); box-shadow: 0 3px 5px rgba(26, 34, 48, .1); }
.hp-hero__tabwrap { position: relative; }
.hp-hero__tabs {
  display: flex;
  justify-content: center;
  gap: clamp(4px, 2.6vw, 36px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hp-hero__tabs::-webkit-scrollbar { display: none; }
.hp-hero__tab {
  display: block;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 54px;
  padding: 0 20px;
  white-space: nowrap;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .94rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  transition: background var(--t-fast), color var(--t-fast);
}
.hp-hero__tab:hover,
.hp-hero__tab.is-active { background: var(--bg); color: var(--primary); }

/* Plate logo nổi trên ảnh (trong viewport, không tính thanh tab).
   Vị trí chọn ở Cài đặt qua data-pos (lưới 9 điểm, cùng key với vị trí chữ).
   Kích thước/khoảng cách co giãn theo màn hình — KHÔNG còn ẩn trên mobile.
   --plate-x canh theo mép nội dung .container (1200px) trên màn rộng. */
.hp-hero__plate {
  position: absolute;
  z-index: 10;
  width: clamp(80px, 11vw, 148px);
  background: #fff;
  padding: clamp(6px, .8vw, 10px) clamp(8px, 1.1vw, 14px);
  border-radius: clamp(8px, .9vw, 12px);
  box-shadow: 0 10px 30px rgba(26, 34, 48, .22);
  --plate-x: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --plate-y: clamp(14px, 2.4vw, 32px);
}
/* Ngang: trái / giữa / phải */
.hp-hero__plate[data-pos$="-left"] { left: var(--plate-x); }
.hp-hero__plate[data-pos$="-right"] { right: var(--plate-x); }
.hp-hero__plate[data-pos$="-center"] { left: 50%; transform: translateX(-50%); }
/* Dọc: trên / giữa / dưới */
.hp-hero__plate[data-pos^="top-"] { top: var(--plate-y); }
.hp-hero__plate[data-pos^="bottom-"] { bottom: var(--plate-y); }
.hp-hero__plate[data-pos^="center-"] { top: 50%; transform: translateY(-50%); }
.hp-hero__plate[data-pos="center-center"] { transform: translate(-50%, -50%); }
/* Không có data-pos (dữ liệu cũ) → góc dưới-trái như trước */
.hp-hero__plate:not([data-pos]) { left: var(--plate-x); bottom: var(--plate-y); }

@media (max-width: 992px) {
  .hp-hero__media { height: clamp(420px, 66vh, 620px); }
  .hp-hero__desc { display: none; }
  /* Logo thu nhỏ dần thay vì ẩn — vẫn nhận diện được thương hiệu trên mobile */
  .hp-hero__plate { width: clamp(68px, 14vw, 110px); }
  .hp-hero__tabs { justify-content: flex-start; }
  .hp-hero__tab { line-height: 50px; font-size: .82rem; padding: 0 14px; }
  /* Vùng chữ sát mép hơn để mọi vị trí cân đối trên màn nhỏ */
  .hp-hero__text { padding: clamp(16px, 4vw, 28px) 0; }
}
@media (max-width: 600px) {
  .hp-hero__media { height: min(74vh, 500px); }
  .hp-hero__slogan { max-width: 92%; font-size: clamp(1.5rem, 7vw, 2.1rem); }
  /* Điện thoại: nới khối chữ vừa khung, các vị trí phải/giữa vẫn gọn gàng */
  .hp-hero__caption { max-width: 100%; }
  .hp-hero__slide[data-hp-pos$="-center"] .hp-hero__slogan,
  .hp-hero__slide[data-hp-pos$="-right"] .hp-hero__slogan { max-width: 92%; }
}
/* Trượt slide theo công tắc Customize (bỏ qua "Giảm chuyển động" của HĐH).
   body.knt-no-motion = TẮT → không trượt. */
body.knt-no-motion .hp-hero__track { transition: none !important; }

/* [Đợt 6B.4] Nút Tạm dừng/Chạy autoplay (WCAG 2.2.2) — đứng cuối thanh tab. */
.hp-hero__pause {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--primary, #152384);
  cursor: pointer;
  align-self: center;
  transition: background .2s ease, color .2s ease;
}
.hp-hero__pause:hover,
.hp-hero__pause:focus-visible { background: var(--primary, #152384); color: #fff; }
.hp-hero__pause svg { width: 16px; height: 16px; }