/* Luna Nails & Spa Beauty — tông be sáng, điểm nhấn: mặt trăng ở hero */
:root {
  --milk: #fbf8f3;      /* nền trang */
  --linen: #f3ece2;     /* dải nền xen kẽ */
  --sand: #e4d7c5;      /* đường kẻ, viền */
  --taupe: #74604f;     /* chữ phụ (đạt AA trên --milk) */
  --cocoa: #3a2d24;     /* chữ chính, nút chính */
  --moon: #d8bf8f;      /* vàng trăng — chỉ trang trí */
  --moon-soft: #efe2c6;

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--milk);
  color: var(--cocoa);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cocoa); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cocoa); color: var(--milk); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--taupe); max-width: 34em; }

/* Nút */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.6em; border-radius: 999px;
  font: 500 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid var(--cocoa); transition: background-color .2s, color .2s;
}
.btn-solid { background: var(--cocoa); color: var(--milk); }
.btn-solid:hover { background: #5a4638; border-color: #5a4638; }
.btn-line { background: transparent; color: var(--cocoa); }
.btn-line:hover { background: var(--linen); }
.btn svg { flex: none; }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--milk) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--sand);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-logo { height: 62px; width: auto; margin: 3px 0; }
.foot-logo { height: 96px; width: auto; background: var(--milk); border-radius: 12px; padding: 6px 10px; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; font-size: .95rem; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { min-height: 42px; padding: 0 1.2em; }
.lang { font-size: .85rem; color: var(--taupe); }
.menu-btn { display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer; color: var(--cocoa); }
.menu-btn svg { display: block; }

@media (max-width: 820px) {
  /* Điện thoại: thanh ngang trên cùng dạng kính mờ (liquid glass) */
  .site-head {
    background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(251,248,243,.16));
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border-bottom: 1px solid rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(201,172,120,.2), 0 10px 28px -18px rgba(58,45,36,.45);
  }
  .head-row { min-height: 58px; }
  .brand-logo { height: 46px; margin: 0; }
  .menu-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -8px; }
  .nav {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 6px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(251,248,243,.66));
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255,255,255,.75); border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -16px rgba(58,45,36,.4);
    padding: 8px 20px 20px; display: none;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--linen); }
  .nav .btn { margin-top: 16px; min-height: 48px; }
}

/* Hero: chữ bên trái, ảnh lớn khung vòm (gợi hình mặt trăng) bên phải */
.hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px) 0 clamp(36px, 5vw, 64px);
  background: radial-gradient(ellipse 60% 70% at 78% 40%, var(--moon-soft) 0%, rgba(239,226,198,0) 70%), var(--milk); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.hero-text { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); line-height: 1.06; }
.hero h1 .line2 { display: block; color: #8a6233; font-style: italic; font-weight: 400; }
.hero .lead { margin-top: 18px; color: var(--cocoa); font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.quiet-link { padding: 12px 8px; text-underline-offset: 5px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 18px 0 0; list-style: none; font-size: .95rem; color: #5c4637; border-top: 1px solid var(--sand); max-width: 520px; }
.hero-facts strong { color: var(--cocoa); font-weight: 500; }

.hero-strip { display: none; }
.hero-photo { position: relative; margin: 0; justify-self: end; width: min(100%, 500px); }
.hero-photo picture, .hero-photo img { display: block; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%;
  border-radius: 999px 999px 24px 24px; box-shadow: 0 30px 60px -30px rgba(90,64,40,.45); }
.hero-photo::before { content: ""; position: absolute; inset: -14px -14px auto auto; width: 100%; height: 100%;
  border: 1px solid #d3b98c; border-radius: 999px 999px 24px 24px; z-index: -1; }
.hero-badge { position: absolute; left: -22px; bottom: 34px; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--cocoa);
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 10px 30px -14px rgba(58,45,36,.4); }
.hero-badge-moon { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset -5px -1px 0 0 #c9a46a; transform: rotate(-20deg); }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-text { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  /* Điện thoại: chữ lên trước, ảnh lớn ẩn đi, thay bằng dải 3 ảnh nhỏ khung vòm */
  .hero-photo { display: none; }
  .hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-strip img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 14px 14px; box-shadow: 0 14px 28px -18px rgba(90,64,40,.5); }
  .hero-strip img:nth-child(2) { transform: translateY(-14px); }
  .hero-actions { justify-content: center; }
  /* Giờ mở cửa gọn một dòng, địa chỉ dòng dưới, tất cả căn giữa */
  .hero-facts { justify-content: center; gap: 6px 9px; font-size: .86rem; text-align: center; margin-left: auto; margin-right: auto; }
  .hero-facts li { white-space: nowrap; }
  .hero-facts li:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Khối chung */
.band { padding: clamp(40px, 6vw, 72px) 0; }
.band-linen { background: var(--linen); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 56px; align-items: end; margin-bottom: clamp(22px, 3vw, 34px); }
.section-head p { color: var(--taupe); margin: 0; max-width: 32em; }
@media (max-width: 820px) { .section-head { grid-template-columns: 1fr; } }

/* Bảng giá: mỗi danh mục một hàng, bấm vào để mở chi tiết */
.price-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--sand); }
.price-row { border-bottom: 1px solid var(--sand); scroll-margin-top: 100px; }
.price-row summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 17px 4px; }
.price-row summary::-webkit-details-marker { display: none; }
.price-cat { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; flex: 1; transition: color .2s; }
.price-from { color: #8a6233; font-family: var(--serif); font-size: 1.08rem; white-space: nowrap; }
.price-row summary::after { content: ""; width: 9px; height: 9px; flex: none; margin: -4px 4px 0 6px; border-right: 1.5px solid var(--cocoa); border-bottom: 1.5px solid var(--cocoa); transform: rotate(45deg); transition: transform .2s; }
.price-row[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.price-row summary:hover .price-cat { color: #8a6233; }
.price-row .menu-list { list-style: none; margin: 0; padding: 0 4px 18px; }
.menu-item { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; padding: 9px 0; }
.menu-item .name { display: flex; align-items: baseline; gap: 10px; }
.menu-item .name::after { content: ""; flex: 1; min-width: 16px; border-bottom: 1px dotted #c9a46a; transform: translateY(-4px); }
.menu-item .price { color: var(--cocoa); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item .note { grid-column: 1 / -1; color: var(--taupe); font-size: .88rem; }
.menu-foot { margin-top: 18px; color: var(--taupe); font-size: .95rem; text-align: center; }
@media (max-width: 820px) { .price-cat { font-size: 1.2rem; } .price-row summary { padding: 18px 2px; } }

/* Vì sao chọn Luna */
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.promise li { border-top: 1px solid var(--sand); padding-top: 16px; }
.promise h3 { font-size: 1.35rem; margin-bottom: 10px; }
.promise p { color: var(--taupe); margin: 0; }
@media (max-width: 820px) { .promise { grid-template-columns: 1fr; gap: 28px; } }

/* Ảnh — chờ ảnh thật */
.gallery { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 12px; }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); position: relative; }
.gallery figure:first-child { grid-row: span 2; }
.gallery figure:last-child { grid-column: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 820px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 170px 170px; gap: 8px; }
  .gallery figure:first-child { grid-row: span 2; }
  .gallery figure:last-child { grid-column: span 2; }
}
}

/* Đặt lịch SalonGo */
/* Đặt lịch: thông tin bên trái, khung SalonGo bên phải */
.booking-band { background: linear-gradient(180deg, var(--milk) 0%, var(--linen) 100%); }
.booking { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.booking-info { position: sticky; top: 100px; }
.booking-lead { color: var(--taupe); margin: 14px 0 22px; max-width: 30em; }
.booking-steps { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.booking-steps li { display: flex; gap: 14px; align-items: flex-start; }
.booking-steps strong { display: block; font-weight: 500; color: var(--cocoa); }
.booking-steps li span:last-child { color: var(--taupe); font-size: .95rem; line-height: 1.5; }
.bk-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cocoa); color: var(--milk);
  font-family: var(--serif); font-size: 1rem; line-height: 1; font-variant-numeric: lining-nums; }
.booking-card { background: rgba(255,255,255,.65); border: 1px solid rgba(216,191,143,.5); border-radius: 18px; padding: 18px 20px; }
.booking-hours { margin: 0 0 12px; font-size: .92rem; color: #5c4637; }
.booking-hours strong { color: var(--cocoa); font-weight: 500; }
.booking-note { margin: 0 0 10px; font-size: .9rem; color: var(--taupe); }
.booking-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.booking-open { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 500; text-underline-offset: 4px; }
.booking-frame { position: relative; background: #fff; border: 1px solid rgba(216,191,143,.55); border-radius: 22px; overflow: hidden;
  box-shadow: 0 30px 60px -36px rgba(90,64,40,.45); min-height: 760px; }
.booking-frame iframe { position: relative; z-index: 1; width: 100%; height: 820px; border: 0; display: block; opacity: 0; transition: opacity .6s ease; }
.booking-frame.loaded iframe { opacity: 1; }
.booking-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--taupe); font-size: .95rem; }
.booking-frame.loaded .booking-loading { display: none; }
.booking-spinner { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--sand); border-top-color: #b98a4e; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .booking { grid-template-columns: 1fr; }
  .booking-info { position: static; }
  .booking-frame { min-height: 680px; border-radius: 18px; margin: 0 calc(var(--gutter) * -0.5); }
  .booking-frame iframe { height: 720px; }
}

/* Liên hệ */
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.contact h3 { font-size: 1.3rem; margin-bottom: 14px; }
.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: 7px 0; border-bottom: 1px solid var(--sand); }
.hours td { text-align: right; }
.contact address { font-style: normal; }
.contact a { text-underline-offset: 3px; }
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--sand); border-radius: 50%; }
.socials a[href]:hover { background: var(--linen); }
.socials a.todo { padding: 0; }
.map { margin-top: 48px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--sand); background: var(--linen); }
.map iframe { width: 100%; height: 340px; border: 0; display: block; }
.map .ph { display: grid; place-items: center; height: 220px; color: var(--taupe); font-size: .95rem; padding: 16px; text-align: center; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; gap: 22px; } }

/* Câu hỏi thường gặp */
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--sand); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 40px 15px 0; position: relative; font-weight: 500; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 1.5px solid var(--cocoa); border-bottom: 1.5px solid var(--cocoa); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { color: var(--taupe); margin: 0 0 15px; max-width: 40em; }

/* Footer */
.site-foot { background: var(--cocoa); color: #eadfce; padding: 40px 0 24px; font-size: .95rem; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.site-foot a { color: #eadfce; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.foot-nap { margin: 28px 0 0; }
.foot-legal { margin-top: 24px; padding-top: 16px; border-top: 1px solid #5a4638; color: #cbb9a3; font-size: .85rem; }

/* Nút đặt lịch nổi trên điện thoại */
.sticky-book { display: none; }
@media (max-width: 820px) {
  .sticky-book { display: flex; gap: 10px; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 30;
    transform: translateY(140%); transition: transform .3s ease; }
  .sticky-book .btn { box-shadow: 0 10px 30px -10px rgba(58,45,36,.5); }
  .sticky-book .btn-call { flex: 0 0 auto; background: var(--milk); }
  .sticky-book .btn-solid { flex: 1; }
  .sticky-book .btn { white-space: nowrap; padding: 0 1.1em; font-size: .95rem; }
  .sticky-book.show { transform: none; }
  body { padding-bottom: 80px; }
}

/* Đánh dấu chỗ còn chờ thông tin thật — xoá class này khi đã điền */
.todo { background: #fff3c4; border-radius: 4px; padding: 0 4px; }

/* Giới thiệu tiệm */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 64px; align-items: center; }
.story-photos { position: relative; padding: 0 0 48px 48px; }
.story-photos .photo-tall { border-radius: 200px 200px var(--radius) var(--radius); box-shadow: 0 30px 60px -34px rgba(90,64,40,.5); }
.story-photos .photo-small { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 3 / 4; border: 6px solid var(--linen); box-shadow: 0 20px 40px -24px rgba(90,64,40,.5); }
.story-main h2 { margin-bottom: 18px; }
.story-text p { color: var(--taupe); max-width: 36em; }
.story-text p:first-child { font-size: 1.2rem; color: var(--cocoa); }
.sub-h { font-size: 1.6rem; margin: clamp(30px, 4vw, 44px) 0 16px; }
@media (max-width: 820px) { .story { grid-template-columns: 1fr; } .story-photos { padding: 0 0 36px 28px; max-width: 420px; margin: 0 auto; } }

/* Mô tả dịch vụ */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 48px; list-style: none; margin: 0; padding: 0; }
.services h3 { border-top: 1px solid var(--cocoa); padding-top: 16px; }
.services h3 { margin-bottom: 10px; }
.services p { color: var(--taupe); margin: 0; max-width: 34em; }
.services li { display: flex; }
.svc-link { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: inherit; }
.svc-link h3 { flex: 1; }
.svc-link .svc-more { align-self: flex-start; }
.svc-more { display: inline-block; margin-top: 4px; font-size: .9rem; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c9a46a; }
.svc-link:hover h3 { color: #8a6233; }
.svc-link .photo img { transition: transform .6s ease; }
.svc-link:hover .photo img { transform: scale(1.05); }
.services .photo-wide { aspect-ratio: 4 / 3; }
.price-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 64px; align-items: end; margin-bottom: 18px; }
.price-head .sub-h { margin-bottom: 0; }
.price-head { scroll-margin-top: 100px; }
.to-prices { display: inline-block; margin-top: 6px; color: var(--cocoa); font-weight: 500; text-underline-offset: 4px; }
.price-head p { color: var(--taupe); margin: 0; }
@media (max-width: 820px) {
  .price-head { grid-template-columns: 1fr; }
  /* Điện thoại: 2 dịch vụ một hàng cho gọn */
  .services { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .services .photo-wide { aspect-ratio: 4 / 3; margin-bottom: 12px; }
  .services .photo .ph { font-size: .78rem; padding: 8px; }
  .services h3 { font-size: 1.15rem; padding-top: 10px; margin-bottom: 6px; }
  .services p { font-size: .88rem; line-height: 1.55; }
}

/* Câu nhấn giữa trang */
.interlude { position: relative; overflow: hidden; padding: clamp(80px, 12vw, 150px) 0; text-align: center; color: #fff; }
.interlude-bg, .interlude-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.interlude-bg img { object-fit: cover; object-position: 50% 45%; }
.interlude::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,30,22,.35), rgba(42,30,22,.6)); }
.interlude-inner { position: relative; z-index: 1; }
.interlude-line { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 5.6vw, 4.2rem); line-height: 1.12; margin: 0 auto; max-width: 14em; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.interlude-sub { margin: 14px 0 26px; color: #f3e7d6; }
.btn-light { background: #fff; color: var(--cocoa); border-color: #fff; }
.btn-light:hover { background: var(--linen); border-color: var(--linen); }

/* Các bước khi đến tiệm (đúng là một trình tự nên đánh số) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--moon); border-radius: 50%; font-family: var(--serif); font-size: 1.2rem; color: #9a7444; margin-bottom: 12px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; padding-bottom: 1px; }
.steps h3 { font-size: 1.3rem; margin-bottom: 8px; }
.steps p { color: var(--taupe); margin: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Lời mời cuối trang */
.closing { text-align: center; }
.closing p { color: var(--taupe); max-width: 32em; margin: 12px auto 0; }
.closing .hero-actions { justify-content: center; }

/* Khung ảnh (chưa có ảnh thì hiện khung kẻ sọc có ghi chú) */
.photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--sand); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .ph { display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; color: var(--taupe); font-size: .9rem;
  background: repeating-linear-gradient(135deg, var(--linen) 0 14px, #ece2d4 14px 28px); border: 1px dashed #cdb89c; border-radius: inherit; }
.photo-tall { aspect-ratio: 4 / 5; }
.photo-wide { aspect-ratio: 16 / 10; margin-bottom: 18px; }
.services li .photo-wide { margin-top: 2px; }
.photo-pano { aspect-ratio: 21 / 9; max-width: 1040px; margin: 28px auto 0; }
.photo-door { min-height: 340px; }
.map-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-top: 28px; }
.map-row .map { margin-top: 0; }
@media (max-width: 820px) {
  .photo-pano { aspect-ratio: 4 / 3; margin-top: 22px; }
  .map-row { grid-template-columns: 1fr; }
  .photo-door { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ===== Hiệu ứng xuất hiện (chỉ chạy khi có JS; tắt khi người dùng chọn giảm chuyển động) =====
   Không dùng làm mờ. Mỗi loại nội dung một kiểu riêng:
   tiêu đề trồi lên từ sau mép chữ, ảnh mở như rèm, ảnh phụ trượt nghiêng vào, đường kẻ vàng tự kẻ,
   số bước nảy lên, bảng giá trượt từ trái, câu nhấn giãn chữ rồi khép lại. */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --ease-io: cubic-bezier(.65,0,.35,1); }

/* Đầu trang (chạy khi tải trang) */
@keyframes text-up { from { clip-path: inset(0 0 100% 0); transform: translateY(.45em); } to { clip-path: inset(-20% -5% -20% -5%); transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes photo-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes gold-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
@keyframes badge-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes ring-in { from { opacity: 0; transform: translate(-14px, 14px); } to { opacity: 1; transform: none; } }

.js .hero h1 { animation: text-up 1.1s var(--ease-out) both; }
.js .hero h1 .line2 { display: block; }
.js .hero .lead { animation: fade-up .9s var(--ease-out) .35s both; }
.js .hero .hero-actions { animation: fade-up .9s var(--ease-out) .5s both; }
.js .hero-facts { animation: fade-up .9s var(--ease-out) .65s both; }
/* Ảnh đầu trang: chỉ chạy khi ảnh đã tải xong (main.js thêm .ready), dùng opacity + transform cho mượt */
.js .hero-photo picture { display: block; opacity: 0; will-change: opacity, transform; }
.js .hero-photo img { will-change: transform; }
.js .hero-photo::before, .js .hero-badge { opacity: 0; }
.js .hero.ready .hero-photo picture { animation: photo-in 1.3s var(--ease-out) both; }
.js .hero.ready .hero-photo img { animation: settle 2s var(--ease-out) both; }
.js .hero.ready .hero-photo::before { animation: ring-in 1.1s var(--ease-out) .5s both; }
.js .hero.ready .hero-badge { animation: badge-in .8s var(--ease-out) .9s both; }
.js .hero h1 .line2 {
  background: linear-gradient(100deg, #8a6233 0%, #8a6233 40%, #e8cd98 50%, #8a6233 60%, #8a6233 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-sheen 2.2s ease 1s both; }
/* Dải 3 ảnh (điện thoại): 2 ảnh hai bên trượt vào từ hai mép, ảnh giữa trồi lên từ dưới */
@keyframes strip-left { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes strip-right { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: none; } }
@keyframes strip-up { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: translateY(-14px); } }
.js .hero-strip img { opacity: 0; will-change: opacity, transform; }
.js .hero.ready .hero-strip img:nth-child(1) { animation: strip-left 1s var(--ease-out) .1s both; }
.js .hero.ready .hero-strip img:nth-child(3) { animation: strip-right 1s var(--ease-out) .1s both; }
.js .hero.ready .hero-strip img:nth-child(2) { animation: strip-up 1.1s var(--ease-out) .4s both; }

/* Khi cuộn tới */
.js .fx { transition-property: opacity, transform, clip-path, letter-spacing; transition-duration: .9s; transition-timing-function: var(--ease-out); transition-delay: var(--d, 0s); }
/* tiêu đề: trồi lên từ sau mép chữ */
.js .fx-title { clip-path: inset(0 0 100% 0); transform: translateY(.5em); }
.js .fx-title.in { clip-path: inset(-20% -5% -20% -5%); transform: none; }
/* đoạn chữ, khối nội dung: nổi lên nhẹ */
.js .fx-up { opacity: 0; transform: translateY(22px); }
/* ảnh: mở như rèm từ dưới lên */
.js .fx-curtain { clip-path: inset(100% 0 0 0); transition-duration: 1.3s; transition-timing-function: var(--ease-io); }
.js .fx-curtain.in { clip-path: inset(0 0 0 0); }
.js .fx-curtain img { transform: scale(1.12); transition: transform 1.8s var(--ease-out) var(--d, 0s); }
.js .fx-curtain.in img { transform: scale(1); }
.js .gallery figure.in:hover img, .js .svc-link:hover .fx-curtain.in img { transform: scale(1.05); transition-duration: .6s; transition-delay: 0s; }
/* ảnh dịch vụ: bay lên từ dưới, lần lượt từng thẻ */
.js .fx-rise { opacity: 0; transform: translateY(90px); transition-duration: 1.1s; will-change: opacity, transform; }
.js .fx-rise.in { opacity: 1; transform: none; }
/* ảnh: lau từ trái sang phải */
.js .fx-wipe { clip-path: inset(0 100% 0 0); transition-duration: 1.2s; transition-timing-function: var(--ease-io); }
.js .fx-wipe.in { clip-path: inset(0 0 0 0); }
/* ảnh phụ: trượt nghiêng vào */
.js .fx-tilt { opacity: 0; transform: translate(-40px, 30px) rotate(-6deg); transition-duration: 1.1s; }
/* bảng giá, câu hỏi: trượt từ trái */
.js .fx-left { opacity: 0; transform: translateX(-36px); }
/* số bước: nảy lên */
.js .fx-pop { opacity: 0; transform: translateY(16px); }
.js .fx-pop::before { transform: scale(0); transition: transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--d, 0s) + .15s); }
.js .fx-pop.in::before { transform: scale(1); }
/* đường kẻ vàng tự kẻ (mục "Na čem nám záleží") */
.js .fx-line { opacity: 0; transform: translateY(14px); border-top-color: transparent; position: relative; }
.js .fx-line::after { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: #c9a46a; transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-io) var(--d, 0s); }
.js .fx-line.in::after { transform: scaleX(1); }
/* câu nhấn: hiện chậm theo thứ tự câu chính, địa chỉ, nút; giữ nguyên bố cục để chữ không nhảy dòng */
.js .fx-slow, .js .fx-slow2, .js .fx-slow3 { opacity: 0; transform: translateY(16px); transition-duration: 1.6s; }
.js .fx-slow2 { transition-delay: .9s; }
.js .fx-slow3 { transition-delay: 1.5s; }
.js .fx-slow.in, .js .fx-slow2.in, .js .fx-slow3.in { opacity: 1; transform: none; }
.js .fx.in { opacity: 1; }
.js .fx-up.in, .js .fx-tilt.in, .js .fx-left.in, .js .fx-pop.in, .js .fx-line.in { transform: none; }
/* ảnh nền câu nhấn lùi chậm */
.js .interlude-bg img { transform: scale(1.14); transition: transform 2.8s var(--ease-out); }
.js .interlude.in .interlude-bg img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .js .hero *, .js .hero-photo picture, .js .hero-photo img, .js .hero-photo::before, .js .hero-badge, .js .hero-strip img { animation: none !important; }
  .js .hero h1 .line2 { background: none; color: #8a6233; }
  .js .hero-photo picture, .js .hero-photo::before, .js .hero-badge, .js .hero-strip img { opacity: 1 !important; }
  .js .fx, .js .fx img, .js .fx::before, .js .fx::after, .js .interlude-bg img { opacity: 1 !important; transform: none !important; clip-path: none !important; letter-spacing: normal !important; transition: none !important; }
}

/* Hiệu ứng trượt ngang không được làm trang bị kéo ngang */
main { overflow-x: clip; }

/* Căn khung ảnh dịch vụ dọc cho thấy đúng phần chính */
.services img[src*="svc-manicure"] { object-position: 50% 65%; }
.services img[src*="svc-pedicure"] { object-position: 50% 50%; }
.services img[src*="svc-spa"] { object-position: 50% 45%; }

/* Khung đặt lịch nổi (máy tính) */
.modal-open { overflow: hidden; }
.book-modal { width: min(920px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); max-width: none; max-height: none; padding: 0; border: 0;
  border-radius: 24px; background: var(--milk); box-shadow: 0 40px 90px -30px rgba(42,30,22,.55); overflow: hidden; color: var(--cocoa); }
.book-modal[open] { display: flex; flex-direction: column; animation: modal-in .45s var(--ease-out, ease) both; }
.book-modal::backdrop { background: rgba(42,30,22,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .3s ease both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.book-modal-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 26px; border-bottom: 1px solid var(--sand); }
.book-modal-head h2 { font-size: 1.5rem; flex: 1; }
.book-modal-new { font-size: .9rem; font-weight: 500; text-underline-offset: 4px; }
.book-modal-close { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sand); background: #fff; color: var(--cocoa); cursor: pointer; }
.book-modal-close:hover { background: var(--linen); }
.book-modal-back { display: none; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; color: var(--cocoa);
  font: 500 .85rem/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #c9a46a; cursor: pointer; }
.book-modal-back svg { width: 14px; height: 14px; }
.book-modal-head h2:focus { outline: none; }
.book-modal-back:focus:not(:focus-visible) { outline: none; }
@media (max-width: 820px) {
  /* Điện thoại: khung đặt lịch phủ kín màn hình, có nút quay lại web */
  .book-modal { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
  .book-modal[open] { animation-name: sheet-in; }
  .book-modal-head { position: relative; min-height: 52px; padding: 8px 12px; gap: 10px; }
  .book-modal-back { display: inline-flex; }
  .book-modal-head h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.15rem; white-space: nowrap; pointer-events: none; }
  .book-modal-new, .book-modal-close { display: none; }
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.book-modal-body { position: relative; flex: 1; background: #fff; }
.book-modal-body iframe { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .5s ease; }
.book-modal.loaded .book-modal-body iframe { opacity: 1; }
.book-modal.loaded .booking-loading { display: none; }
@media (prefers-reduced-motion: reduce) { .book-modal[open], .book-modal::backdrop { animation: none; } }