/* ═══════════════════════════════════════════════════════════════════════════
   CHÂN TRANG CHUNG — lấy nguyên từ bản mẫu `assets/shared-footer.css`
   Tải ngày 01/09/2026, phiên bản HT-SITE-FOOTER-V1.

   ⚠️ ĐỪNG SỬA TỆP NÀY THEO Ý RIÊNG. Nó là bản sao của bản mẫu, để lần sau
   anh Hải cập nhật bản mẫu thì chỉ cần tải đè lại. Sai khác duy nhất là
   dòng `font-family` — đã ghi rõ lý do ngay tại chỗ.
   ═══════════════════════════════════════════════════════════════════════════ */

.htSiteFooter {
  /* 22/09/2026 - Anh Hai chot doi footer ve graphite theo bao cao kiem
     dinh 21/09. Doi tu #0B161C (xanh den, vi pham chuan khoa "khong dung
     xanh than/xanh den lam nen doc chinh") sang #202224 - dung token
     --ht-surface-inverse cua bang mau khoa v1.1. Da do lai tuong phan
     tren nen moi: chu chinh 12,98:1 - chu phu 9,20:1 - vang 7,47:1, ca
     ba deu vuot xa nguong 4,5:1. Day la NGOAI LE co chu y voi dong ghi
     chu "dung sua theo y rieng" o dau file - da duoc anh Hai duyet truc
     tiep, khong phai Hermes tu y doi ban mau chung. */
  --ht-footer-bg: #202224;
  --ht-footer-panel: #14212A;
  --ht-footer-panel-hover: #1B2B35;
  --ht-footer-text: #E8E8E3;
  --ht-footer-muted: #C3C5C4;
  --ht-footer-gold: #D6AA6D;
  --ht-footer-line: rgba(232, 232, 227, 0.18);
  background: var(--ht-footer-bg);
  border-top: 1px solid var(--ht-footer-line);
  color: var(--ht-footer-text);
  color-scheme: dark;
  /* ⚠️ SAI KHAC CO CHU Y so voi ban mau: ban mau ep system-ui.
     Tren ban mau khong nhin ra khac biet vi Be Vietnam Pro o do duoc khai
     bao ma KHONG BAO GIO duoc nap. Tren hatiencorp.vn phong do co that,
     nen ep system-ui se lam chan trang lech phong voi ca trang.
     Dung `inherit` de chan trang theo dung phong cua theme. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  padding: clamp(64px, 7vw, 88px) 0 30px;
}

.htSiteFooter *,
.htSiteFooter *::before,
.htSiteFooter *::after {
  box-sizing: border-box;
}

.htSiteFooter__inner {
  margin-inline: auto;
  width: min(calc(100% - 144px), 1480px);
}

.htSiteFooter__top {
  display: grid;
  gap: clamp(48px, 7vw, 112px);
  grid-template-columns: minmax(260px, 0.78fr) minmax(520px, 1.35fr);
}

.htSiteFooter__lead {
  align-self: start;
  max-width: 540px;
}

.htSiteFooter__brand,
.htSiteFooter__eyebrow,
.htSiteFooter__intro {
  margin: 0;
}

.htSiteFooter__brand {
  color: var(--ht-footer-gold);
  font-size: clamp(27px, 2.15vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.htSiteFooter__intro {
  color: var(--ht-footer-muted);
  /* 17px -> 18px: doan dan la than bai, san 18 */
  font-size: 18px;
  line-height: 1.7;
  margin-top: 18px;
  max-width: 500px;
}

.htSiteFooter__leadAction,
.htSiteFooter__action {
  align-items: center;
  border: 1px solid var(--ht-footer-line);
  color: var(--ht-footer-text);
  display: inline-flex;
  font-size: 18px;
  font-weight: 760;
  justify-content: center;
  line-height: 1.25;
  min-height: 48px;
  padding: 12px 18px;
  text-decoration: none;
}

.htSiteFooter__leadAction {
  border-color: var(--ht-footer-gold);
  color: var(--ht-footer-gold);
  gap: 10px;
  margin-top: 28px;
}

.htSiteFooter__leadAction:hover,
.htSiteFooter__action:hover {
  background: var(--ht-footer-panel-hover);
  border-color: var(--ht-footer-gold);
  color: var(--ht-footer-text);
}

.htSiteFooter__eyebrow {
  color: var(--ht-footer-gold);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.htSiteFooter__marketList {
  border-top: 1px solid var(--ht-footer-line);
}

.htSiteFooter__market {
  border-bottom: 1px solid var(--ht-footer-line);
}

.htSiteFooter__market summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: 780;
  justify-content: space-between;
  list-style: none;
  min-height: 58px;
  padding: 7px 2px;
}

.htSiteFooter__market summary::-webkit-details-marker {
  display: none;
}

.htSiteFooter__market summary::after {
  align-items: center;
  border: 1px solid var(--ht-footer-line);
  border-radius: 50%;
  color: var(--ht-footer-gold);
  content: "+";
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 24px;
  font-weight: 400;
  height: 44px;
  justify-content: center;
  line-height: 1;
  margin-left: 16px;
}

.htSiteFooter__market[open] summary::after {
  content: "−";
}

.htSiteFooter__marketBody {
  background: var(--ht-footer-panel);
  border: 1px solid var(--ht-footer-line);
  margin: 4px 0 22px;
  padding: clamp(22px, 3vw, 34px);
}

.htSiteFooter__marketBody h3 {
  color: var(--ht-footer-text);
  /* clamp 17-20px -> 22-24px: tieu de MUC trong chan trang, san h3 = 22 may
     tinh / 21 dien thoai; day 22 nen dat ca hai san, khong can @media */
  font-size: clamp(22px, 1.4vw, 24px);
  font-weight: 760;
  letter-spacing: -0.012em;
  line-height: 1.35;
  margin: 0 0 22px;
}

.htSiteFooter__details {
  margin: 0;
}

.htSiteFooter__detailRow {
  border-top: 1px solid var(--ht-footer-line);
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(112px, 0.35fr) minmax(0, 1fr);
  padding: 12px 0;
}

.htSiteFooter__detailRow:first-child {
  border-top: 0;
  padding-top: 0;
}

.htSiteFooter__detailRow dt {
  color: var(--ht-footer-muted);
  font-size: 17px;
  font-weight: 720;
}

.htSiteFooter__detailRow dd {
  color: var(--ht-footer-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.htSiteFooter address {
  color: inherit;
  font-style: normal;
}

.htSiteFooter__detailRow a {
  color: var(--ht-footer-text);
  text-decoration-color: color-mix(in srgb, var(--ht-footer-gold) 76%, transparent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.htSiteFooter__detailRow address + a {
  color: var(--ht-footer-gold);
  display: inline-flex;
  margin-top: 5px;
}

.htSiteFooter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.htSiteFooter__action--primary {
  background: var(--ht-footer-gold);
  border-color: var(--ht-footer-gold);
  color: var(--ht-footer-bg);
}

.htSiteFooter__action--primary:hover {
  background: var(--ht-footer-gold);
  color: var(--ht-footer-bg);
}

.htSiteFooter__bottom {
  align-items: center;
  border-top: 1px solid var(--ht-footer-line);
  color: var(--ht-footer-muted);
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  line-height: 1.5;
  margin-top: clamp(50px, 7vw, 82px);
  padding-top: 24px;
}

.htSiteFooter a:focus-visible,
.htSiteFooter summary:focus-visible {
  outline: 3px solid var(--ht-footer-gold);
  outline-offset: 4px;
}

@media (max-width: 1050px) {
  .htSiteFooter__inner {
    width: min(calc(100% - 64px), 1480px);
  }

  .htSiteFooter__top {
    gap: 46px;
    grid-template-columns: 1fr;
  }

  .htSiteFooter__lead {
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .htSiteFooter {
    padding: 56px 0 24px;
  }

  .htSiteFooter__inner {
    width: calc(100% - 32px);
  }

  .htSiteFooter__top {
    gap: 42px;
  }

  .htSiteFooter__intro {
    /* 16px -> 18px: san than bai 18 ap cho ca dien thoai */
    font-size: 18px;
  }

  .htSiteFooter__leadAction,
  .htSiteFooter__action {
    width: 100%;
  }

  .htSiteFooter__market summary {
    font-size: 17px;
    min-height: 62px;
  }

  .htSiteFooter__marketBody {
    margin-bottom: 18px;
    padding: 22px 18px;
  }

  .htSiteFooter__detailRow {
    gap: 4px;
    grid-template-columns: 1fr;
    padding: 13px 0;
  }

  .htSiteFooter__detailRow dt {
    font-size: 17px;
  }

  .htSiteFooter__details,
  .htSiteFooter__detailRow dd {
    font-size: 18px;
  }

  .htSiteFooter__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    margin-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .htSiteFooter *,
  .htSiteFooter *::before,
  .htSiteFooter *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  .htSiteFooter,
  .htSiteFooter__marketBody,
  .htSiteFooter__leadAction,
  .htSiteFooter__action,
  .htSiteFooter__market summary::after {
    border-color: CanvasText;
    forced-color-adjust: auto;
  }
}