/* ============================================================
   BASE.CSS — LUMIÈRE Hanoi Seasons Garden · The Bloom LDP
   Reset, typography, .container, .btn, input, card, accordion, animation
============================================================ */

/* ---------- 0. ASTRA RESET — CHỐNG CONTAINER CO CHIỀU RỘNG ---------- */
html, body{
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
/* Chặn "margin collapse" — margin-top của phần tử con đầu tiên trong
   body (vd. h1/p mặc định của theme) có thể "lộ" ra thành khoảng trắng
   phía trên toàn trang, tức là phía trên cả menu. */
body::before{ content: ""; display: table; }
.site,
#content,
.site-content,
.content-area,
.site-main,
.ast-container,
.entry-content,
.wp-block-post-content,
article,
.page{
  display: block !important; /* Astra dùng flex cho layout content+sidebar,
    khiến <main> và các phần tử anh em bị xếp cạnh nhau thay vì trên-dưới */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Astra container đã bị ép width:100% ở trên nên section chỉ cần
   width:100% là đủ full-bleed — KHÔNG dùng kỹ thuật 100vw ở đây vì
   100vw tính cả độ rộng thanh cuộn dọc, gây tràn ngang/dịch layout. */
.section-full{
  width: 100%;
}
/* Ẩn sidebar mặc định của Astra (nếu layout của theme đang bật "Right
   Sidebar" cho trang chủ) — nếu không ẩn, nó vẫn chiếm một cột trống
   chạy suốt chiều cao trang, nằm cạnh nội dung. Cách xử lý đúng hơn là
   vào WP Admin đổi Sidebar Layout của trang chủ sang "No Sidebar / Full
   Width Content", nhưng CSS này giữ vai trò chốt chặn cuối.
   LƯU Ý: chỉ áp dụng trong phạm vi #content (vùng nội dung chính, giữa
   header và footer) — KHÔNG được để selector ".widget-area" trần vì
   Astra cũng dùng đúng class đó cho các cột widget trong footer thật,
   ẩn kiểu trần sẽ xoá mất luôn thông tin footer mặc định của theme. */
#content #secondary,
#content .widget-area,
#content aside.widget-area{
  display: none !important;
  width: 0 !important;
}
/* Ẩn hàng "Above Header" của Astra nếu nó đang bật nhưng để trống —
   đây là dải màu sáng nằm ngay phía trên logo/menu chính. Cách xử lý
   gốc là vào WP Admin → Customize → Header Builder → tắt hẳn hàng
   "Above Header", CSS này chỉ là lớp chặn dự phòng. */
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-above-header{
  display: none !important;
}

/* ---------- 1. RESET CHUNG ---------- */
*, *::before, *::after{ box-sizing: border-box; }

.mcxl-page{
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 64px; /* chừa chỗ cho sticky-cta mobile, tránh che nút/chữ cuối trang */
}
.mcxl-page img{ max-width: 100%; display: block; }

@media (min-width: 1024px){
  .mcxl-page{ padding-bottom: 0; } /* sticky-cta ẩn hẳn ở desktop */
}
.mcxl-page ul{ list-style: none; margin: 0; padding: 0; }
/* :not(.btn) — nếu không loại trừ, rule này (độ ưu tiên CSS cao hơn 1 class
   đơn) sẽ đè lên màu chữ khai báo trong .btn--*, khiến các nút dạng <a>
   (vd. .btn--ghost-light) bị chữ chìm/sai màu cho tới khi hover. */
.mcxl-page a:not(.btn){ color: inherit; }

/* ---------- 2. CONTAINER ---------- */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
.container--narrow{ max-width: var(--container-narrow); }
.container--text{ max-width: var(--container-text); }
.container--form{ max-width: var(--container-form); }

@media (min-width: 768px){
  .container{ padding-inline: var(--gutter-desktop); }
}

/* ---------- 3. TYPOGRAPHY — mobile-first (Phần 3.2), desktop override (Phần 6.3) ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-accent);
  margin: 0 0 14px;
}
.eyebrow::before{
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
}
.eyebrow--center{ justify-content: center; }
.eyebrow--center::before{ display: none; }
.eyebrow--on-light{ color: var(--c-deep); }

.h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.22;
  color: var(--c-white);
  margin: 0 0 var(--sp-2);
}
.h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.28;
  color: var(--c-primary);
  margin: 0 0 var(--sp-2);
}
.h2--light{ color: var(--c-white); }
.h2--center{ text-align: center; margin-left: auto; margin-right: auto; }
.h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--c-primary);
  margin: 0 0 var(--sp-1);
}
.h3--light{ color: var(--c-white); }

.lede{
  font-size: 16px;
  line-height: 1.68;
  color: var(--c-text-mute);
  margin: 0 0 var(--sp-3);
}
.lede--center{ text-align: center; margin-inline: auto; }
.lede--on-dark{ color: rgba(255,255,255,.78); }

.body-sm{ font-size: 14px; line-height: 1.6; color: var(--c-text-mute); }
.caption{ font-size: 12px; line-height: 1.55; color: var(--c-text-faint); }
.figure-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  color: var(--c-accent);
}
.mono{ font-family: var(--font-mono); }

@media (min-width: 1024px){
  .h1{ font-size: clamp(44px, 4.4vw, 68px); line-height: 1.1; letter-spacing: -.015em; max-width: 640px; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
  .h2{ font-size: clamp(30px, 2.4vw, 40px); line-height: 1.22; letter-spacing: -.005em; }
  .h3{ font-size: 26px; line-height: 1.30; }
  .lede{ font-size: 18px; line-height: 1.65; max-width: 560px; }
  .figure-num{ font-size: 40px; }
}

/* ---------- 4. BUTTONS ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-btn);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
}
.btn:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 2px; }
.btn--full{ width: 100%; }

.btn--primary{ background: var(--c-accent); color: var(--c-ink); }
.btn--primary:hover{ background: #C9B08C; transform: translateY(-1px); }

.btn--dark{ background: var(--c-primary); color: var(--c-white); }
.btn--dark:hover{ background: var(--c-deep); }

.btn--ghost{ background: transparent; color: var(--c-primary); border: 1px solid var(--c-primary); }
.btn--ghost:hover{ background: var(--c-primary); color: var(--c-white); }

.btn--ghost-light{
  background: rgba(20,28,25,.3); /* nền mờ để chữ luôn rõ dù ảnh nền sáng/tối chỗ nào */
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,.6);
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.btn--ghost-light:hover{ background: rgba(20,28,25,.45); border-color: var(--c-accent); color: var(--c-accent); }

.btn--sm{ height: 48px; padding: 0 var(--sp-3); font-size: 13px; }

@media (min-width: 1024px){
  .btn{ height: 56px; }
}

/* ---------- 5. INPUT / FORM ---------- */
.field{ display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-2); }
.field label,
.field span.field__label{
  font-size: 13px;
  font-weight: 500;
  color: var(--c-text-mute);
}
.field input,
.field select{
  height: 52px;
  padding: 0 var(--sp-2);
  font-size: 16px; /* bắt buộc — tránh iOS auto-zoom */
  font-family: var(--font-body);
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid #DDE0D6;
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
  appearance: none;
}
.field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A72' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}
.field input::placeholder{ color: #9AA69F; }
.field input:focus,
.field select:focus{
  border-color: var(--c-deep);
  box-shadow: 0 0 0 3px rgba(69,95,57,.10);
}
.field input:invalid:not(:placeholder-shown){ border-color: var(--c-error); }

@media (min-width: 1024px){
  .field input,
  .field select{ height: 54px; }
}

/* ---------- 6. CARD ---------- */
.card{
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ---------- 7. REVEAL / ANIMATION (quiet luxury — tối giản) ---------- */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

@keyframes mcxl-pulse-dot{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}
.pulse-dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: mcxl-pulse-dot 2s infinite;
}

@keyframes mcxl-slide-up{
  from{ transform: translateY(100%); }
  to{ transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .reveal,
  .hero__content > *,
  .hero__form-wrap,
  .hero__scrollcue{ opacity: 1 !important; transform: none !important; }
}

/* ---------- 8. UTILITIES ---------- */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}