/* Hallmark · genre: editorial (photographic) · macrostructure: brochure ảnh-dẫn (giữ)
   nav: N9 edge-aligned minimal · footer: Ft1 mast-headed · theme: custom nude-cream
   redesign 2026-08-16 theo audit 2026-08-14 · pre-emit critique: P4 H5 E4 S4 R5 V4 */
/* ============================================================
   AMI MAKEUP — Trang giới thiệu dịch vụ Makeup Cô Dâu
   Phong cách: trắng + kem + nude · Hàn Quốc · nàng thơ · tự nhiên
   v3 (2026-08-16): sửa theo audit — siết tương phản (giữ gu nude),
   bỏ chữ nghiêng, nav tối giản, khối cam kết + cảm nhận khách,
   thêm giá makeup thử & chính sách cọc.
   v2 (2026-08-14): hero ảnh tràn viền trên điện thoại, dải vuốt ngang,
   gộp dịch vụ + bảng giá, rút gọn còn 6 khối.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg:        #FDFBF7;   /* trắng ngà — nền trang */
  --bg-cream:  #F7F1E8;   /* kem nhạt — nền section xen kẽ */
  --bg-nude:   #F0E6D9;   /* nude sáng — nền panel */
  --white:     #FFFDFA;   /* trắng ám ấm — không dùng trắng tuyệt đối */

  --ink:       #423A31;   /* nâu trầm ấm — chữ chính */
  --muted:     #6E6154;   /* nâu ấm — chữ phụ, 5,3:1+ trên cả 3 nền */
  --accent:    #B08A63;   /* nude caramel — CHỈ trang trí: chấm, viền, gạch */
  --accent-dk: #85603C;   /* màu nhấn cho CHỮ — 4,5:1+ ở cỡ nhỏ */
  --accent-btn:    #8A6440; /* nền nút có chữ trắng — 5,3:1 */
  --accent-btn-dk: #745233; /* nền nút khi hover */
  --accent-ink:    #FFFFFF; /* chữ trên nền nút */
  --focus:     #7A5836;   /* vòng focus — 3:1+ trên mọi nền */
  --line:        #E9DECF; /* viền trang trí */
  --line-strong: #CDBA9E; /* kẻ phải nhìn thấy: chấm nối, kẻ bảng giá */

  --bloom:   #F3E9DB;     /* nền toả tròn hero & liên hệ */
  --hero-em: #F3DFC6;     /* chữ nhấn trên hero điện thoại */
  --scrim: 40 30 21;      /* nâu đen DUY NHẤT cho lớp phủ & bóng chữ */
  --veil: 253 251 247;    /* nền mờ header / thanh đáy */

  --font-head: "Cormorant Garamond", "Palatino Linotype", serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;

  --radius:    18px;
  --shadow:    0 18px 45px -18px rgba(90, 72, 50, .22);
  --shadow-sm: 0 8px 22px -12px rgba(90, 72, 50, .25);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur:      220ms;

  --topbar-h:  38px;      /* dải địa chỉ · hotline · nhạc */
  --header-h:  72px;      /* hàng logo + nút Zalo */
  --header-all: calc(var(--topbar-h) + var(--header-h));
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.18;
  color: var(--ink);
  overflow-wrap: anywhere;
  min-width: 0;
}
h1, h2 { font-weight: 700; }
h3 { font-weight: 600; }

h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }

/* Nhấn trong tiêu đề: màu, KHÔNG nghiêng */
h1 em, h2 em { font-style: normal; color: var(--accent-dk); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(1140px, 100% - 2.5rem);
  margin-inline: auto;
}

.section { padding: clamp(64px, 9vw, 110px) 0; }

section[id] { scroll-margin-top: calc(var(--header-all) + 12px); }
/* #bang-gia là thẻ div (không phải section) nên phải khai riêng, kẻo cuộn tới bị header che */
#bang-gia { scroll-margin-top: calc(var(--header-all) + 20px); }
/* Vừa cuộn tới thì nháy sáng một nhịp để khách biết mình đang đứng ở đâu */
#bang-gia.vua-toi { animation: nhay-sang 1.6s var(--ease-out); }
@keyframes nhay-sang {
  0%   { box-shadow: 0 0 0 0 rgb(176 138 99 / 0);   }
  18%  { box-shadow: 0 0 0 6px rgb(176 138 99 / .30); }
  100% { box-shadow: 0 0 0 14px rgb(176 138 99 / 0);  }
}

/* ---------- Nhãn hero & tiêu đề section ---------- */
.eyebrow {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dk);
  margin-bottom: 14px;
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); }
.section-sub { color: var(--muted); margin-top: 14px; max-width: 58ch; margin-inline: auto; }

/* gợi ý vuốt — chỉ hiện trên điện thoại */
.swipe-hint { display: none; font-weight: 500; color: var(--accent-dk); white-space: nowrap; }

.text-link {
  color: var(--accent-dk);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}

/* ---------- Nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent-btn); color: var(--accent-ink); }

.btn-outline { border-color: var(--accent); color: var(--accent-dk); background: transparent; }

.btn-lg { padding: 15px 32px; font-size: 1rem; }

/* ---------- Header — N9: logo trái · một nút phải ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  transition: background 260ms var(--ease-out);
}

.header-main {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

/* --- Dải liên hệ trên cùng: địa chỉ · hotline --- */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  background: var(--bg-nude);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.topbar-addr,
.topbar-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--ink);          /* 9:1 trên nền nude */
}
.topbar-addr { font-weight: 500; }
.topbar-addr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-addr svg,
.topbar-tel svg { flex: 0 0 auto; color: var(--accent-dk); }

.topbar-tel {
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.topbar-tel:hover { color: var(--accent-dk); border-bottom-color: var(--accent); }

.topbar-tel { flex: 0 0 auto; }
.site-header.scrolled {
  background: rgb(var(--veil) / .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 22px -14px rgb(var(--scrim) / .35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.brand-name em { font-style: normal; font-weight: 500; color: var(--accent-dk); }

.header-cta { padding: 10px 22px; font-size: .9rem; }

.header-actions { display: inline-flex; align-items: center; gap: 10px; }

/* Nút xem giá nhanh — nền hơi đục để đọc được cả khi header còn trong suốt */
.btn-price {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-size: .9rem;
  background: rgb(var(--veil) / .82);
}
.btn-price svg { flex: 0 0 auto; }
.no-js .btn-price, .no-js .btn-price-hero { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-all) + clamp(28px, 6vw, 64px));
  padding-bottom: clamp(56px, 8vw, 96px);
  background:
    radial-gradient(58% 75% at 88% 12%, var(--bloom) 0%, transparent 70%),
    var(--bg);
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(36px, 6vw, 72px);
}

.hero-sub {
  color: var(--muted);
  max-width: 470px;
  margin-top: 22px;
  font-size: 1.04rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-figure { display: flex; justify-content: center; }

.arch-frame {
  position: relative;
  width: min(430px, 100%);
  border-radius: 999px 999px var(--radius) var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.arch-frame::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 999px 999px calc(var(--radius) - 8px) calc(var(--radius) - 8px);
  pointer-events: none;
}
.arch-frame img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

/* ---------- Dải 3 điểm mạnh dưới hero ---------- */
.trust-strip {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 42px;
  padding: 18px 0;
}
.trust-strip li {
  position: relative;
  padding-left: 20px;
  font-size: .9rem;
  color: var(--muted);
}
.trust-strip li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .55;
}

/* ---------- Bố cục 2 cột dùng chung ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.split-text h2 { margin-bottom: 20px; }
.split-text p { color: var(--muted); margin-bottom: 16px; }
.split-text strong { color: var(--ink); font-weight: 600; }

/* ---------- Gallery — masonry cân cột (2/3 xen 4/5) ---------- */
.gallery { background: var(--bg-cream); }

.gallery-grid {
  columns: 3;
  column-gap: 18px;
}
.gallery-grid figure {
  margin-bottom: 18px;
  break-inside: avoid;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 300ms var(--ease-out);
}
.gallery-grid figure:nth-child(even) img { aspect-ratio: 4 / 5; }

/* ---------- Giới thiệu ---------- */
.intro { background: var(--white); }

.intro-figure img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 5;   /* ảnh nhóm cô dâu + học viên là ảnh DỌC, khung 3:2 cũ sẽ cắt mất đầu */
  object-fit: cover;
}

/* ---------- Phong cách ---------- */
.style-section { background: var(--bg-cream); }

.style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.style-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

.style-card figure { overflow: hidden; }
.style-card figure, .service-card figure { overflow: hidden; }
.style-card img, .service-card img {
  transition: transform 520ms var(--ease-out);
}
.style-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.style-card h3 { margin: 20px 22px 8px; }
.style-card p { margin: 0 22px 24px; color: var(--muted); font-size: .94rem; }

.style-note {
  text-align: center;
  margin-top: 36px;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- Dịch vụ + Bảng giá (một khối) ---------- */
.services { background: var(--white); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.service-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

.service-card figure { overflow: hidden; }
.service-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.service-body { padding: 22px 24px 26px; }
.service-body h3 { margin-bottom: 6px; }
.service-body > p { color: var(--muted); font-size: .93rem; }

.service-price {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-dk);
  margin-bottom: 10px;
}

.service-perks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.service-perks li {
  font-size: .875rem;
  color: var(--accent-dk);
  background: var(--bg-nude);
  border-radius: 999px;
  padding: 5px 13px;
}

.menu-card {
  max-width: 760px;
  margin: clamp(44px, 6vw, 68px) auto 0;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(26px, 5vw, 56px);
  box-shadow: var(--shadow);
}

.menu-heading {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
  position: relative;
}
.menu-list + .menu-heading { margin-top: 40px; }
.menu-heading::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--accent);
  opacity: .5;
  margin: 12px auto 0;
  border-radius: 2px;
}

.menu-row {
  display: flex; align-items: baseline;
  gap: 12px;
  padding: 13px 10px; margin-inline: -10px; border-radius: 10px;
  transition: background var(--dur) var(--ease-out);
}
.menu-row .menu-price { transition: color var(--dur) var(--ease-out); }
.menu-list .menu-row + .menu-row { border-top: 1px solid var(--line-strong); }

.menu-name { font-weight: 500; }
.menu-note {
  display: block;
  font-size: .875rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 3px;
}

.menu-dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 2px dotted var(--line-strong);
  transform: translateY(-4px);
}

.menu-price {
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--accent-dk);
  white-space: nowrap;
}

.menu-policy {
  margin-top: 28px;
  padding: 14px 18px;
  background: var(--bg-nude);
  border-radius: 12px;
  font-size: .9rem;
}

.menu-cta { text-align: center; margin-top: 28px; }

/* ---------- Cảm nhận khách — ảnh tin nhắn thật ---------- */
.fb { background: var(--bg-cream); }

.fb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
}

.fb-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.fb-card img { width: 100%; border-bottom: 1px solid var(--line); }

.fb-quote { padding: 16px 20px 18px; }
.fb-quote p { margin: 0 0 6px; font-size: .95rem; }
.fb-quote cite { font-style: normal; font-size: .875rem; color: var(--muted); }

/* ---------- Để bạn yên tâm — dòng xếp dọc lệch trái ---------- */
.why { background: var(--bg); }

.why-list { max-width: 780px; margin-inline: auto; }
.why-item {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 8px 36px;
  padding: 24px 0;
  align-items: start;
}
.why-item + .why-item { border-top: 1px solid var(--line); }
.why-item h3 { font-size: 1.2rem; }
.why-item p { margin: 0; color: var(--muted); }

/* ---------- Liên hệ / CTA cuối ---------- */
.contact {
  background:
    radial-gradient(65% 90% at 50% 0%, var(--bloom) 0%, transparent 75%),
    var(--white);
}

.contact-inner {
  text-align: center;
  max-width: 660px;
}
.contact-sub { color: var(--muted); margin-top: 18px; max-width: 58ch; margin-inline: auto; }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.contact-note { margin-top: 26px; font-size: .88rem; color: var(--muted); }

/* ---------- Bản đồ ---------- */
.map-section { background: var(--bg-cream); }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-nude);       /* nền chờ trong lúc bản đồ tải */
  aspect-ratio: 16 / 9;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-cream);
  border-top: 1px solid var(--line);
  padding: 44px 0 36px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer-tagline { color: var(--muted); font-size: .9rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.footer-links a {
  font-size: .9rem;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.footer-copy { font-size: .8rem; color: var(--muted); margin-top: 8px; }

/* ---------- Thanh liên hệ đáy (điện thoại) ---------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
  background: rgb(var(--veil) / .96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.mobile-bar .mb-main {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--accent-btn);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 13px 18px;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.mobile-bar .mb-call {
  flex: 0 0 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  color: var(--accent-dk);
  border-radius: 50%;
  transition: background 120ms var(--ease-out), transform 100ms var(--ease-out);
}
.mobile-bar .mb-main:active,
.mobile-bar .mb-call:active { transform: translateY(1px); }

/* ---------- Hiệu ứng rê chuột — chỉ trên máy có chuột thật ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  /* ảnh trong thẻ phong cách & dịch vụ cũng phóng nhẹ như thẻ gallery */
  .style-card:hover img, .service-card:hover img { transform: scale(1.045); }
  /* rê chuột lên từng dòng giá thì dòng đó sáng lên, giá nhích sang trái */
  .menu-row:hover { background: var(--bg-nude); }
  .menu-row:hover .menu-price { color: var(--accent-dk); }
  .btn-primary:hover { background: var(--accent-btn-dk); }
  .btn-outline:hover { background: var(--accent-btn); color: var(--accent-ink); border-color: var(--accent-btn); }
  .text-link:hover { border-color: var(--accent-dk); }
  .gallery-grid figure:hover img { transform: scale(1.03); }
  .style-card:hover, .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
  .footer-links a:hover { color: var(--accent-dk); border-color: var(--accent); }
}

/* ---------- Vùng chạm đủ lớn cho ngón tay ---------- */
@media (pointer: coarse) {
  .footer-links a, .text-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Hiệu ứng hiện dần khi cuộn tới ----------
   Cố ý giữ NHẸ: 10px + 460ms. Bản audit 14/08 từng chấm hiệu ứng
   rình rang là "dấu AI", nên ở đây chỉ mờ-và-nhích, không bay không xoay. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }

/* Khối nhiều thẻ thì các thẻ hiện so le nhau cho có nhịp */
.reveal-nhom > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out);
}
.reveal-nhom.visible > * { opacity: 1; transform: none; }
.reveal-nhom.visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-nhom.visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-nhom.visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-nhom.visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-nhom.visible > *:nth-child(6) { transition-delay: 450ms; }
/* khối cha đã mờ dần rồi thì con khỏi mờ thêm lần nữa cho khỏi nhợt */
.reveal.reveal-nhom { opacity: 1; transform: none; transition: none; }

/* Không có JS thì vẫn thấy nội dung */
.no-js .reveal, .no-js .reveal-nhom > * { opacity: 1; transform: none; }

/* ---------- Màn hình đầu: chữ hiện dần ngay khi mở trang ---------- */
.hero-vao > * { animation: hero-len 620ms var(--ease-out) both; }
.hero-vao > *:nth-child(2) { animation-delay: 110ms; }
.hero-vao > *:nth-child(3) { animation-delay: 210ms; }
.hero-vao > *:nth-child(4) { animation-delay: 310ms; }
@keyframes hero-len { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.no-js .hero-vao > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-nhom > * { opacity: 1; transform: none; transition: none; }
  .hero-vao > * { animation: none; }
  #bang-gia.vua-toi { animation: none; }
  .style-card img, .service-card img, .menu-row { transition: none; }
  .gallery-grid img, .btn, .style-card, .service-card,
  .mobile-bar .mb-main, .mobile-bar .mb-call, .site-header { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Tablet --- */
@media (max-width: 960px) {
  .hero-inner { gap: 36px; }
  .style-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { columns: 2; }
}

/* ============================================================
   --- ĐIỆN THOẠI ---
   Hero: ảnh cô dâu tràn viền chiếm gần trọn màn hình đầu,
   chữ đè lên đáy ảnh. Đây là màn hình đầu tiên khách nhìn thấy
   khi bấm link gửi qua Zalo.
   ============================================================ */
@media (max-width: 760px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 24px; }
  .section-sub { margin-top: 10px; font-size: .94rem; }

  /* Điện thoại là màn hình chính — giữ hiệu ứng NHẸ HƠN: chỉ mờ dần,
     không nhích lên, để nội dung gần như hiện ngay khi cuộn tới */
  .reveal, .reveal-nhom > * { transform: none; transition: opacity 300ms var(--ease-out); }
  .reveal-nhom.visible > *:nth-child(n) { transition-delay: 0ms; }

  /* Header gọn: bỏ nút Zalo (đã có ở thanh đáy), giữ nút xem giá */
  .header-cta { display: none; }
  .site-header { background: transparent; }
  .btn-price { padding: 9px 15px; font-size: .84rem; gap: 6px; }
  .btn-price span { font-size: 0; }
  .btn-price span::after { content: "Xem giá"; font-size: .84rem; }


  /* Dải liên hệ: rút gọn địa chỉ cho vừa bề ngang */
  .topbar { font-size: .78rem; }
  .topbar-inner { gap: 10px; }
  .topbar-prov { display: none; }

  /* ----- Hero ảnh tràn viền ----- */
  .hero {
    display: flex;
    align-items: flex-end;
    min-height: 86vh;
    min-height: 86svh;
    padding: 0 0 92px;
    background: var(--ink);
  }

  /* .hero-inner (=.container) không position → ảnh absolute bám vào .hero */
  .hero-inner {
    display: block;
    width: min(1140px, 100% - 2.5rem);
  }

  .hero-figure {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
  }
  .arch-frame {
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .arch-frame::after { display: none; }
  .arch-frame img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 50% 18%;
  }

  /* Lớp phủ: sáng ở trên cho logo đọc được, tối ở dưới cho chữ đọc được */
  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    z-index: 1;
    pointer-events: none;
  }
  .hero::before {
    top: 0; height: 190px;
    background: linear-gradient(180deg,
      rgb(var(--veil) / .97) 0%,
      rgb(var(--veil) / .84) 36%,
      rgb(var(--veil) / 0) 100%);
  }
  .hero::after {
    bottom: 0; height: 82%;
    background: linear-gradient(0deg,
      rgb(var(--scrim) / .95) 0%,
      rgb(var(--scrim) / .90) 22%,
      rgb(var(--scrim) / .76) 46%,
      rgb(var(--scrim) / .48) 68%,
      rgb(var(--scrim) / .16) 87%,
      rgb(var(--scrim) / 0) 100%);
  }

  .hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
  }
  .hero-text .eyebrow {
    color: rgba(255, 255, 255, .88);
    margin-bottom: 10px;
    text-shadow: 0 1px 10px rgb(var(--scrim) / .6);
  }
  .hero-text h1 {
    color: var(--accent-ink);
    font-size: 2.6rem;
    text-shadow: 0 2px 20px rgb(var(--scrim) / .55);
  }
  .hero-text h1 em { color: var(--hero-em); }
  .hero-sub {
    color: rgba(255, 255, 255, .94);
    margin-inline: auto;
    margin-top: 16px;
    font-size: 1rem;
    max-width: 340px;
    text-shadow: 0 1px 14px rgb(var(--scrim) / .6);
  }
  .hero-cta { justify-content: center; margin-top: 26px; }
  .hero-cta .btn { box-shadow: 0 10px 26px -10px rgb(var(--scrim) / .55); }
  /* nút viền chữ nâu đặt trên ảnh tối chỉ còn ~1,5:1 — đổi sang nền sáng, chữ nâu 5,11:1 */
  .hero-cta .btn-price-hero {
    background: rgb(var(--veil) / .94);
    border-color: transparent;
    color: var(--accent-btn);
  }

  /* ----- Dải 3 điểm mạnh ----- */
  .trust-strip ul { gap: 6px 20px; padding: 14px 0; justify-content: flex-start; }
  .trust-strip li { font-size: .875rem; padding-left: 16px; }
  .trust-strip li::before { width: 7px; height: 7px; }

  /* ----- Bố cục chung ----- */
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .intro-figure { order: -1; }

  /* ----- Dải vuốt ngang: Gallery, Phong cách, Dịch vụ, Cảm nhận ----- */
  .swipe {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -1.25rem;
    padding: 4px 1.25rem 12px;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: center;
  }
  .swipe figure { margin-bottom: 0; }
  .gallery-grid.swipe figure img { aspect-ratio: 2 / 3; }
  .swipe-hint { display: inline; }

  /* giá là thứ khách tìm — cho nổi hơn trên màn hình nhỏ */
  .service-price { font-size: 1.7rem; margin-bottom: 8px; }

  .style-note { margin-top: 24px; }

  /* ----- Bảng giá: bỏ chấm nối, tên trái — giá phải ----- */
  .menu-card { margin-top: 30px; padding: 24px 20px 28px; }
  .menu-heading { font-size: 1.3rem; margin-bottom: 10px; }
  .menu-heading::after { margin-top: 9px; }
  .menu-list + .menu-heading { margin-top: 28px; }
  .menu-dots { display: none; }
  .menu-row { justify-content: space-between; gap: 16px; padding: 10px 0; }
  .menu-name { flex: 1; }
  .menu-price { font-size: 1.1rem; }
  .menu-policy { margin-top: 22px; }
  .menu-cta { margin-top: 24px; }

  /* ----- Để bạn yên tâm ----- */
  .why-item { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 0; }

  .contact-actions { flex-direction: column; align-items: stretch; }

  /* Bản đồ trên điện thoại: cao hơn cho dễ nhìn, 2 nút xếp dọc */
  .map-wrap { aspect-ratio: 4 / 5; }
  .map-cta { flex-direction: column; align-items: stretch; }
  .map-cta .btn { justify-content: center; }

  /* ----- Thanh liên hệ đáy ----- */
  .mobile-bar { display: flex; }
  .site-footer { padding-bottom: 96px; }
}

/* --- Địa chỉ rút gọn dần theo bề ngang --- */
@media (max-width: 460px) {
  .topbar-ward { display: none; }
}

/* --- Điện thoại nhỏ --- */
@media (max-width: 380px) {
  .topbar { font-size: .75rem; }
  .brand-name { font-size: 1.15rem; white-space: nowrap; }
  /* bỏ biểu tượng + thu nút cho vừa hàng, kẻo tên thương hiệu bị vắt 2 dòng */
  .btn-price svg { display: none; }
  .btn-price { padding: 8px 13px; }
  .hero-text h1 { font-size: 2rem; }   /* «Đẹp theo cách riêng» dài hơn câu cũ — 2,3rem bị vắt thành 3 dòng ở khổ 320px */
  .btn { padding-inline: 20px; }
  .mobile-bar .mb-main { font-size: .88rem; padding: 12px 14px; }
}