/* ==========================================================================
   components.css — header, footer, nút, thẻ, accordion, lightbox, form...
   Mỗi khối bắt đầu bằng một comment mốc để dễ tìm.
   ========================================================================== */

/* === NÚT ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }
/* Vùng bấm ngón tay tối thiểu 44px trên cảm ứng (§4.2b QT-M4.3) */
@media (pointer: coarse) { .btn { min-height: 48px; } }

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

.btn--outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--outline:hover { background: var(--c-primary); color: var(--c-on-dark); }

.btn--ghost-light {
  background: transparent;
  color: var(--c-on-dark);
  border-color: rgba(255,255,255,0.6);
}
.btn--ghost-light:hover { background: var(--c-on-dark); color: var(--c-primary); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* === HEADER — MOBILE-FIRST ==============================================
   Base = điện thoại: logo + nút hamburger + ngăn kéo trượt từ phải.
   Menu ngang chỉ xuất hiện từ 1024px trở lên.
   ======================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow 0.25s var(--ease);
  /* Tai thỏ / Dynamic Island: đẩy nội dung xuống dưới vùng an toàn (§4.2b QT-M3) */
  padding-top: env(safe-area-inset-top);
}
.site-header.is-stuck { box-shadow: var(--shadow); }

/* --- Biến thể TRONG SUỐT: đè lên banner để ảnh khách nổi trọn vẹn (§4.2c QT-D2) ---
   Chuyển sang nền đặc khi đã cuộn (.is-stuck) hoặc khi mở ngăn kéo (.is-open). */
.has-hero .site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
}
/* Dải phủ mờ CHỈ ở mép trên — không chạm vùng giữa nơi có mặt người (§4.2c QT-D1) */
.has-hero .site-header::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(100% + 28px);
  background: linear-gradient(180deg, rgba(18,20,28,0.55) 0%, rgba(18,20,28,0.18) 60%, transparent 100%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.has-hero .site-header .nav__link,
.has-hero .site-header .nav-toggle { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.has-hero .site-header .site-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
.has-hero .site-header .site-header__inner { position: relative; z-index: 1; }

/* Đã cuộn HOẶC mở menu -> trả về nền trắng đặc, chữ về màu thường */
.has-hero .site-header.is-stuck,
.has-hero .site-header.is-open {
  background: var(--c-bg);
  border-bottom-color: var(--c-border);
}
.has-hero .site-header.is-stuck::before,
.has-hero .site-header.is-open::before { opacity: 0; }
.has-hero .site-header.is-stuck .nav__link,
.has-hero .site-header.is-open  .nav__link,
.has-hero .site-header.is-stuck .nav-toggle,
.has-hero .site-header.is-open  .nav-toggle { color: var(--c-primary); text-shadow: none; }
.has-hero .site-header.is-stuck .site-logo img,
.has-hero .site-header.is-open  .site-logo img { filter: none; }
.has-hero .site-header.is-stuck .nav__link.is-active,
.has-hero .site-header.is-open  .nav__link.is-active { color: var(--c-accent-dark); }

/* Trong ngăn kéo (mobile) chữ luôn là màu thường vì nền ngăn kéo màu trắng */
@media (max-width: 1023px) {
  .has-hero .site-header .nav .nav__link { color: var(--c-primary); text-shadow: none; }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h-mobile);
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.site-logo img { height: 34px; width: auto; }

.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: 48px;                      /* vùng bấm ngón tay (§4.2b QT-M4.3) */
  padding: var(--sp-2);
  font-family: var(--f-ui);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border);
}
.nav__link.is-active { color: var(--c-accent-dark); border-bottom-color: var(--c-accent); }

.header__cta { display: none; }          /* nút Book Now nằm trong ngăn kéo trên điện thoại */
.nav__cta { margin-top: var(--sp-5); }

/* --- Nút hamburger --- */
.nav-toggle {
  display: block;
  width: 48px; height: 48px;             /* ≥ 44px */
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--c-primary);
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin: 5px auto;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Ngăn kéo menu --- */
.nav {
  position: fixed;
  top: calc(var(--header-h-mobile) + env(safe-area-inset-top));
  right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4);
  /* chừa chỗ cho thanh Home ở đáy màn hình */
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
}
.nav.is-open { transform: translateX(0); }

.nav-backdrop {
  position: fixed;
  top: calc(var(--header-h-mobile) + env(safe-area-inset-top));
  left: 0; right: 0; bottom: 0;
  background: rgba(22, 25, 34, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
  z-index: 99;
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* Không có JS thì ngăn kéo phải luôn mở, nếu không menu biến mất hoàn toàn */
.no-js .nav { position: static; width: auto; transform: none; box-shadow: none;
              border: 0; padding-bottom: var(--sp-4); }
.no-js .nav-toggle { display: none; }

/* --- ≥ 1024px: menu ngang, bỏ ngăn kéo --- */
@media (min-width: 1024px) {
  .site-header__inner { height: var(--header-h); gap: var(--sp-4); }
  .site-logo img { height: 44px; }
  .nav-toggle { display: none; }
  .header__cta { display: inline-flex; flex-shrink: 0; }

  .nav {
    position: static;
    width: auto;
    transform: none;
    box-shadow: none;
    border: 0;
    overflow: visible;
    padding: 0;
    /* ⚠️ PHẢI trả nền về trong suốt. Ngăn kéo mobile đặt background:#fff; nếu quên
       xoá ở đây thì trên desktop còn một dải trắng bám quanh menu, đè lên banner —
       vừa phá menu-trong-suốt (§4.2c QT-D2), vừa làm chữ trắng gần như tàng hình. */
    background: transparent;
  }
  .nav__list { display: flex; align-items: center; gap: var(--sp-1); }
  .nav__link {
    min-height: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }
  .nav__link:hover { color: var(--c-accent-dark); }
  .nav__link.is-active { border-bottom-color: var(--c-accent); }
  .nav__cta { display: none; }
  .nav-backdrop { display: none; }
}

/* === BANNER ĐẦU TRANG ====================================================
   §4.2c QT-D1: ảnh khách KHÔNG bị phủ. Ảnh hiện trọn, chữ nằm trong thẻ
   riêng bên dưới, đè lên MÉP ảnh — không bao giờ chạm vùng mặt ở giữa.
   ======================================================================== */
.page-hero { position: relative; background: var(--c-blush); }

/* ⚠️ Banner là ảnh ĐÃ IN SẴN CHỮ ⇒ KHÔNG ĐƯỢC CẮT (user chốt: hiện đủ 100% bề
   ngang). Vì vậy TUYỆT ĐỐI không đặt aspect-ratio / object-fit:cover / max-height
   lên khối này — mọi thứ đó đều xén mất một phần ảnh và biến chữ in sẵn thành
   chữ cụt kiểu "udio Dedicated To Elegance".
   Cách duy nhất an toàn: để ảnh tự quyết chiều cao theo tỉ lệ gốc của nó. */
.page-hero__media { position: relative; }
.page-hero__media img {
  width: 100%;
  height: auto;      /* tỉ lệ gốc — không bao giờ cắt */
  display: block;
}
/* Cố ý KHÔNG chặn max-width ở đây (đã bỏ cap 1200px theo yêu cầu user
   2026-08-27): banner phải tràn viền tuyệt đối (100vw) trên mọi bề rộng màn
   hình, kể cả nghĩa là ảnh 16:9 sẽ CAO hơn 1 màn hình laptop trên monitor
   rộng — đây là đánh đổi CÓ CHỦ Ý, ưu tiên full-bleed hơn giới hạn chiều cao. */
.page-hero__card {
  position: relative;
  /* KHÔNG chồng lên banner trên điện thoại: ở 393px banner 16/9 chỉ cao ~221px,
     kéo thẻ lên 32px là che mất 14% ảnh (hàng ảnh tròn + chữ ký Master Coco) —
     đúng thứ user yêu cầu không được cắt. Desktop banner cao ~810px nên chồng
     nhẹ vẫn an toàn (xem media query bên dưới). */
  margin: 0 var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-blush-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.page-hero__card h1 { margin-bottom: var(--sp-2); }
.page-hero__card p  { color: var(--c-text-muted); max-width: 620px; margin-inline: auto; }

@media (min-width: 768px) {
  .page-hero__card {
    max-width: 860px;
    margin-inline: auto;
    margin-top: calc(var(--sp-7) * -1);
    padding: var(--sp-5) var(--sp-7);
  }
}

/* --- Hero trang chủ (thay Revslider) ---
   §4.2c QT-D1: KHÔNG phủ gì lên ảnh. Ảnh khách hiện trọn, rõ mặt.
   Chữ nằm trong thẻ kem đè lên mép dưới, tối đa ~15-16% chiều cao ảnh —
   dải chữ caption/logo ở đáy ảnh, không bao giờ chạm vùng mặt phía trên. ---
   Nền section = trắng (không dùng blush) để thẻ chỉ cắt đúng MỘT đường ranh
   giới ảnh→trắng, không tạo dải màu thứ 3 kẹt giữa. --- */
.home-hero { position: relative; background: var(--c-bg); }

/* ⚠️ Như .page-hero__media: hero-mobile.jpg / hero-desktop.jpg đều ĐÃ IN SẴN CHỮ
   nên phải hiện đủ 100% bề ngang. Không aspect-ratio, không cover, không
   max-height — mỗi thứ đó đều xén mất chữ. */
.home-hero__media { position: relative; }
.home-hero__bg {
  width: 100%;
  height: auto;      /* tỉ lệ gốc — không bao giờ cắt */
  display: block;
}
/* Như .page-hero__media: cố ý KHÔNG chặn max-width — banner tràn viền
   100vw trên mọi màn hình, chấp nhận cao hơn 1 màn laptop trên monitor
   rộng (đánh đổi có chủ ý, xem ghi chú ở .page-hero__media). */
.home-hero__inner {
  position: relative; z-index: 2;
  /* -60px ≈ 16% chiều cao ảnh mobile — đè đúng dải caption ở đáy, không chạm mặt. */
  margin: -60px var(--sp-4) 0;
  padding: var(--sp-6) var(--sp-5);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
  text-align: center;
}
.home-hero h1 { color: var(--c-primary); letter-spacing: 0.02em; }
.home-hero__tagline {
  font-size: var(--fs-lg);
  color: var(--c-text-muted);
  margin-bottom: var(--sp-5);
}
/* Nút Book Now trong thẻ hero: nhấc nhẹ + phát sáng vàng khi hover — chỉ
   áp dụng trong khối này, không đổi .btn--primary dùng chung toàn site. */
.home-hero__inner .btn--primary { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease); }
.home-hero__inner .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(239, 175, 83, 0.3); }
@media (min-width: 768px) {
  .home-hero__inner {
    max-width: 720px;
    margin-inline: auto;
    /* -120px ≈ 15% chiều cao ảnh desktop (810px) — cùng logic, vẫn dưới mức mặt. */
    margin-top: -120px;
    padding: var(--sp-5) var(--sp-7);
  }
  .home-hero__tagline { margin-bottom: var(--sp-3); }
}

/* ⚠️ ĐỪNG khai báo lại màu chữ hero ở đây.
   Trước đây có một khối lặp đặt h1 + tagline thành MÀU TRẮNG (di sản của bản
   thiết kế cũ khi chữ nằm ĐÈ LÊN ảnh). Từ khi chữ chuyển vào thẻ nền trắng
   (.home-hero__inner) thì khối đó thành chữ trắng trên nền trắng — tiêu đề
   "COCO BROW WORLD" tàng hình trên cả 7 trang mà không ai thấy.
   Màu đúng khai báo một lần ở .home-hero h1 / .home-hero__tagline phía trên. */

/* === THẺ DỊCH VỤ (trang chủ) ============================================= */
.service-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card__media { aspect-ratio: 4 / 3; background: var(--c-bg-soft); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.service-card__body h3 { font-size: var(--fs-lg); }
.service-card__body p {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  flex: 1;
}
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.price {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-primary);
  white-space: nowrap;
}
.price__now { font-size: var(--fs-xl); color: var(--c-accent-dark); }
.price__was {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: var(--sp-2);
}

/* === KHỐI DỊCH VỤ CHI TIẾT (trang Services) ============================== */
.service-block {
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
  padding-block: var(--sp-7);
  border-bottom: 1px solid var(--c-border);
}
.service-block:last-child { border-bottom: 0; }
.service-block__media img { border-radius: var(--radius-lg); width: 100%; }
.service-block h2 { font-size: var(--fs-2xl); }
.service-block .price { display: block; margin-bottom: var(--sp-5); }

/* === LỜI CHỨNG =========================================================== */
.testimonial {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow);
}
.testimonial__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.testimonial__head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-family: var(--f-display); font-weight: 700; color: var(--c-primary); }
.testimonial__stars { color: var(--c-accent-dark); letter-spacing: 2px; font-size: var(--fs-sm); }
.testimonial p { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* === LƯỚI ẢNH / THƯ VIỆN ================================================= */
.media-tile {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--c-bg-soft);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
}
.media-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease);
}
.media-tile:hover img { transform: scale(1.05); }
.media-tile--tall { aspect-ratio: 3 / 4; }

/* === TAB ================================================================= */
.tabs {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.tab {
  min-height: 44px;                      /* vùng bấm ngón tay (§4.2b QT-M4.3) */
  padding: var(--sp-2) var(--sp-5);
  background: transparent;
  border: 2px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.tab[aria-selected="true"] {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-dark);
}
/* Không có JS: hiện tất cả các panel, bỏ hàng tab */
.no-js .tabs { display: none; }
.no-js .tab-panel[hidden] { display: block !important; }

/* === VIDEO =============================================================== */
.video-tile {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-dark);
  aspect-ratio: 9 / 16;
}
.video-tile video { width: 100%; height: 100%; object-fit: cover; }

/* === ACCORDION (FAQ) — nền là <details>, không JS vẫn mở được =========== */
.faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
  background: var(--c-bg);
  overflow: hidden;
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-primary);
  cursor: pointer;
  list-style: none;
  transition: background 0.2s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--c-bg-alt); }
.faq-item > summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-accent-dark);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 var(--sp-5) var(--sp-5); color: var(--c-text-muted); }

/* === BẢNG SO SÁNH ======================================================== */
.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare-table th, .compare-table td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--c-primary);
  color: var(--c-on-dark);
  font-family: var(--f-display);
  white-space: nowrap;
}
.compare-table tbody th {
  position: sticky; left: 0;      /* giữ tên hàng khi cuộn ngang trên điện thoại */
  background: var(--c-bg-alt);
  color: var(--c-primary);
  font-family: var(--f-display);
  white-space: nowrap;
}
.compare-table tbody tr:nth-child(even) td { background: #fbfbfc; }

/* === THẺ THÔNG TIN (why-us, face shape...) =============================== */
.info-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  height: 100%;
  box-shadow: var(--shadow);
}
.info-card__icon { font-size: var(--fs-2xl); line-height: 1; margin-bottom: var(--sp-3); }
.info-card h3 { font-size: var(--fs-lg); }
.info-card p { font-size: var(--fs-sm); color: var(--c-text-muted); }

/* === FORM ================================================================ */
.form__row { margin-bottom: var(--sp-4); }
.form__label {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}
.form__req { color: var(--c-error); }
.form__control {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form__control:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(244, 183, 85, 0.25);
  outline: none;
}
textarea.form__control { min-height: 140px; resize: vertical; }
.form__control[aria-invalid="true"] { border-color: var(--c-error); }

.form__error {
  display: block;
  min-height: 1.25em;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--c-error);
}

/* Bẫy bot — người thật không bao giờ nhìn thấy ô này */
.form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none;
}

.form__status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.form__status[hidden] { display: none; }
.form__status--ok   { background: #e8f5ee; border: 1px solid var(--c-success); color: #14513a; }
.form__status--err  { background: #fdeceb; border: 1px solid var(--c-error);   color: #8c2b20; }
.form__status__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.form__status__actions .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }

.form__note { font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Turnstile bị chặn (ad-blocker, mất mạng, script hỏng) => ô chứa rỗng.
   Cho nó co lại thay vì để một khoảng trắng ~120px giữa form và nút gửi.
   §5.1: script bên thứ ba hỏng thì KHÔNG được để lỗ hổng layout. */
.cf-turnstile:empty { display: none; }

/* === KHỐI THÔNG TIN LIÊN HỆ ============================================== */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.contact-list li:last-child { border-bottom: 0; }
/* Số điện thoại / e-mail là link bấm được -> phải cao đủ 44px, không phải dòng chữ 26px */
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.contact-list .label {
  flex: 0 0 92px;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--c-primary);
}
/* Số chính + số dự phòng ngang hàng trong cùng dòng "Phone", kèm icon —
   thay vì một dòng "Backup" riêng biệt trông như thông tin phụ, kém sang. */
.contact-list .phone-pair { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.contact-list .phone-pair svg { width: 16px; height: 16px; flex: none; fill: var(--c-primary); opacity: .7; }
.contact-list .phone-pair__nums { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.contact-list .phone-pair__sep { color: var(--c-text-muted); }
.map-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--c-bg-soft);
}

/* === NÚT LIÊN HỆ NỔI (thay plugin Chaty) ================================= */
.float-contact {
  position: fixed;
  right: max(var(--sp-3), env(safe-area-inset-right));
  /* KHÔNG để nút nằm dưới thanh Home — bấm sẽ không trúng (§4.2b QT-M3) */
  bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.float-contact a {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s var(--ease);
}
.float-contact a:hover { transform: scale(1.08); color: #fff; }
.float-contact svg { width: 26px; height: 26px; fill: currentColor; }
.float-contact .fc-phone     { background: var(--c-primary); }
.float-contact .fc-email     { background: var(--c-accent-dark); }
/* Màu mạng xã hội của cụm nút nổi lấy từ bảng dùng chung ở cuối file. */

@media (min-width: 1024px) {
  .float-contact { right: var(--sp-4); bottom: var(--sp-4); gap: var(--sp-3); }
}

/* === LIGHTBOX ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(12, 14, 20, 0.92);
  padding: var(--sp-5);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(100%, 1100px);
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,0.28); }
.lightbox__close { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prev  { left: var(--sp-4);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute;
  bottom: var(--sp-4); left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.75);
  font-size: var(--fs-sm);
}

/* === KHỐI CTA CUỐI TRANG ================================================= */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--c-on-dark); }
.cta-band p { max-width: 640px; margin-inline: auto; margin-bottom: var(--sp-6); }
.cta-band__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* === FOOTER ============================================================== */
.site-footer {
  background: var(--c-brown);
  color: rgba(255,255,255,0.78);
  padding-top: var(--sp-8);
  /* thanh Home + chỗ cho cụm nút nổi, tránh đè lên link cuối trang */
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
}
.site-footer h4 {
  color: var(--c-on-dark);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
/* width:auto bắt buộc — base.css có max-width:100%, nếu không khai width thì logo
   bị kẹp bề ngang trong khi height cố định 52px => méo ngang. */
.site-footer__logo img { height: 52px; width: auto; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }
/* Hai số điện thoại (chính + dự phòng) ngang hàng, kèm icon — thay vì
   "Backup:" xuống dòng riêng trông như một đường link phụ, kém sang. */
.footer-phones { display: flex; align-items: center; gap: var(--sp-2); }
.footer-phones svg { width: 16px; height: 16px; flex: none; fill: rgba(255,255,255,0.85); }
.footer-phones__nums { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.footer-phones__sep { color: rgba(255,255,255,0.4); }
/* Là flex item nên <a> mặc định thành block cao bằng dòng chữ (~26px) — dưới
   ngưỡng 44px bấm được (§4.2b QT-M4.3). Ép chiều cao tối thiểu ở đây. */
.footer-phones a { display: inline-flex; align-items: center; min-height: 44px; }
.social {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
/* ⚠️ Icon ở đây KHÔNG được để nền trong suốt.
   Trước đây footer dùng nền trong + viền trắng 25% + icon 18px. Trên nền nâu đậm
   nó nhạt tới mức gần như không thấy — mà đây lại chính là chỗ khách tìm mạng xã hội.
   Nay dùng nền màu đặc theo nhận diện từng nền tảng, giống hệt cụm nút nổi và
   trang Contact (bảng màu dùng chung ở cuối file). */
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;              /* tối thiểu 44px cho ngón tay (§4.2b QT-M4.3) */
  border-radius: 50%;
  color: #fff;
  transition: transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.social a:hover { transform: translateY(-2px) scale(1.05); color: #fff; }
.social svg { width: 22px; height: 22px; fill: currentColor; }
.site-footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.18);
  text-align: center;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.6);
}

@media (min-width: 768px)  { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--sp-7); } }

/* === TIỆN ÍCH ============================================================ */
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mb-0 { margin-bottom: 0; }
.lead { font-size: var(--fs-lg); color: var(--c-text-muted); }

/* Khối dự phòng khi script bên thứ ba hỏng (Trustindex) */
.widget-fallback {
  text-align: center;
  padding: var(--sp-6);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-bg-alt);
}

/* ==========================================================================
   NỮ TÍNH: viền ảnh, hoạ tiết, icon  (CLAUDE.md §4.2c QT-D3)
   ========================================================================== */

/* --- Khung ảnh: viền vàng mảnh lệch ra ngoài + bo góc + bóng ám hồng --- */
.framed {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
}
.framed > img,
.framed > picture > img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
  z-index: 1;
}
/* Viền lệch — tạo cảm giác khung tranh, không đè lên ảnh */
.framed::after {
  content: "";
  position: absolute;
  inset: var(--frame-offset) calc(var(--frame-offset) * -1)
         calc(var(--frame-offset) * -1) var(--frame-offset);
  border: var(--frame-w) solid var(--frame-c);
  border-radius: var(--radius-lg);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) { :root { --frame-offset: 7px; } }

/* --- Hoạ tiết hoa nhỏ ở góc khung ảnh --- */
.framed--bloom::before {
  content: "❀";
  position: absolute;
  top: calc(var(--frame-offset) * -1);
  right: calc(var(--frame-offset) * -0.5);
  z-index: 2;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-rose);
  text-shadow: 0 1px 3px rgba(255,255,255,0.9);
}

/* --- Đường phân cách có hoa văn, thay cho <hr> khô khan --- */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-5) auto;
  color: var(--c-accent-dark);
  font-size: var(--fs-lg);
  line-height: 1;
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 0 1 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-blush-deep), transparent);
}

/* --- Icon đứng trước tiêu đề khối --- */
.section-head .eyebrow::before { content: "✿ "; color: var(--c-rose); }

/* --- Icon mở đầu cho thẻ thông tin / dịch vụ --- */
.info-card__icon,
.svc-icon {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--c-blush);
  border: 1px solid var(--c-blush-deep);
  font-size: 1.5rem;
  line-height: 1;
}

/* --- Danh sách có dấu đầu dòng hình hoa --- */
.list-bloom { list-style: none; padding-left: 0; }
.list-bloom li {
  position: relative;
  padding-left: 1.6em;
}
.list-bloom li::before {
  content: "✿";
  position: absolute; left: 0; top: 0;
  color: var(--c-rose);
  font-size: 0.9em;
}

/* --- Nền dịu xen kẽ: hồng phấn / kem thay cho xám --- */
.section--alt   { background: var(--c-cream); }
.section--blush { background: var(--c-blush); }

/* --- Thẻ dịch vụ: viền hồng + đường vàng ở mép trên --- */
.service-card {
  border-color: var(--c-blush-deep);
  box-shadow: var(--shadow-soft);
}
.service-card::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--c-accent), var(--c-rose), var(--c-accent));
}
.service-card__body h3::after {
  content: "";
  display: block;
  width: 42px; height: 1px;
  margin-top: var(--sp-2);
  background: var(--c-accent);
}

/* --- Giá: thêm dấu trang trí --- */
.price__now::before { content: "✧ "; color: var(--c-rose); font-size: 0.7em; vertical-align: 2px; }

/* ==========================================================================
   MẠNG XÃ HỘI — CHỈ ICON, không chữ  (CLAUDE.md §4.2c QT-D4)
   ========================================================================== */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 0;
  margin: var(--sp-4) 0 0;
  list-style: none;
}
.social-row li { margin: 0; }
.social-row a {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;              /* vùng bấm ngón tay */
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.social-row a:hover { transform: translateY(-2px) scale(1.05); color: #fff; }
.social-row svg { width: 22px; height: 22px; fill: currentColor; }

/* ==========================================================================
   BẢNG MÀU MẠNG XÃ HỘI — NGUỒN DUY NHẤT
   Site hiện icon mạng xã hội ở BA nơi: footer (.social), trang Contact
   (.social-row) và cụm nút nổi (.float-contact). Cả ba phải trông giống hệt nhau.
   Khai màu ở đây một lần; đừng khai lại trong khối riêng của từng nơi — trước đây
   footer bị bỏ sót đúng vì màu nằm rải rác nhiều chỗ.
   Mỗi luật chỉ dùng MỘT class nên độ ưu tiên thấp hơn khối bố cục — cố ý.

   ⚠️ ĐỪNG viết dạng rút gọn kiểu chấm-s-sao-gạch-chéo trong chú thích CSS: cặp ký tự
   sao+gạch-chéo ĐÓNG COMMENT ngay tại đó. Lỗi này đã xảy ra thật — nó nuốt mất luật
   .s-facebook ngay bên dưới, làm nút Facebook mất nền ở cả ba nơi mà CSS vẫn "trông đúng".
   ========================================================================== */
.s-facebook,  .fc-facebook  { background: #1877f2; }
.s-instagram, .fc-instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.s-tiktok,    .fc-tiktok    { background: #010101; }
.s-whatsapp,  .fc-whatsapp  { background: #25d366; }
.s-messenger, .fc-messenger { background: linear-gradient(45deg,#0695ff,#a334fa); }

/* ==========================================================================
   BẢNG GIÁ HAI BẬC — Signature Package / Single Session
   ========================================================================== */

/* --- Khung nhấn đầu trang: mọi gói đều gồm những gì --- */
.package-banner {
  background: linear-gradient(160deg, var(--c-blush) 0%, var(--c-cream) 100%);
  border: 1px solid var(--c-blush-deep);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.package-banner h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-4);
}
.package-banner ul {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.package-banner li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.package-banner li::before {
  content: "✓";
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-primary);
  font-size: 0.8rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .package-banner { padding: var(--sp-7); }
  .package-banner ul { grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); }
}

/* --- Hai bậc giá --- */
.tiers { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0; }

.tier {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg);
}
.tier--signature {
  border-color: var(--c-accent);
  background: linear-gradient(160deg, #fffdf8 0%, var(--c-blush) 100%);
  box-shadow: var(--shadow-soft);
  position: relative;
}
.tier__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent-dark);
  margin-bottom: var(--sp-1);
}
.tier--single .tier__label { color: var(--c-text-muted); }
.tier__price {
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.1;
}
.tier__price small {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-muted);
  letter-spacing: 0.06em;
}
.tier__from {
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-muted);
  margin-right: var(--sp-1);
}
.tier__perks {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
}
.tier__perks li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-family: var(--f-ui);
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.tier__perks li::before { content: "✓"; color: var(--c-accent-dark); font-weight: 700; }
.tier__perks li:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .tiers { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

/* Ghi chú tiền tệ */
.price-note {
  font-family: var(--f-ui);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}