.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: hsl(var(--espresso) / .35); backdrop-filter: blur(8px);
}
.nav-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-menu { display: flex; align-items: center; gap: 1.75rem; list-style: none; padding: 0; }
.nav-menu a { color: hsl(var(--ivory)); text-decoration: none; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.nav-menu a.nav-book { padding: .55rem 1.1rem; color: hsl(var(--espresso)); }
.nav-toggle { display: none; }
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: hsl(var(--espresso) / .45); }
.hero-content { position: relative; text-align: center; color: hsl(var(--ivory)); padding-block: 7rem 4rem; }
.hero-logo { width: min(60%, 300px); margin-bottom: 2rem; }
.hero h1 { max-width: 920px; margin-inline: auto; }
.hero-sub { max-width: 42rem; margin: 1.25rem auto 2.5rem; }
.hero-ctas, .section-actions, .pricing-ctas { display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap; }
/* Dòng điểm Google dưới hai nút hero. Là thẻ <a> nên phải tự dập màu xanh + gạch
   chân mặc định của trình duyệt, không thì nó chọi hẳn với nền ảnh tối. */
.hero-rating {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1.5rem auto 0; color: hsl(var(--ivory)); font-size: .875rem; text-decoration: none;
}
.hero-rating > span:first-child { color: hsl(38 60% 74%); }   /* sao vàng nhạt, hợp tông hơn vàng gắt */
.hero-rating-count { opacity: .85; }
.hero-rating:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-rating:focus-visible { outline: 2px solid hsl(var(--ivory)); outline-offset: 4px; border-radius: 2px; }
.hero-facts { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin-top: 1.25rem; font-size: .85rem; }
.section { padding: 5.375rem 0; }
.section .kicker { margin-bottom: .9rem; }
.section h2 { font-size: clamp(1.875rem, 3.1vw, 2.6875rem); }
.section-body { max-width: 40rem; color: hsl(var(--mocha) / .85); margin: 1.1rem 0 2rem; line-height: 1.8; }
.container.narrow { max-width: 820px; text-align: center; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.about .grid-2 { gap: 5rem; }
.about-figure { position: relative; overflow: hidden; border-radius: 3px; }
.about-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.about-figure figcaption {
  position: absolute; inset: auto 0 0; padding: 4rem 1.5rem 1.75rem;
  background: linear-gradient(transparent, hsl(var(--espresso) / .7));
  color: hsl(var(--ivory)); text-align: center; font: 400 1.75rem/1.3 'Playfair Display', serif;
}
/* Dịch vụ (bản duyệt mockups/jardin-services-hierarchy-preview.html): hai ảnh lớn
   thay bốn thẻ icon, rồi khối "Pro váš příjemný zážitek" nhắc hai điểm cộng. */
.services { background: hsl(var(--powder) / .48); text-align: center; }
.services .section-body { max-width: 680px; margin: 1.25rem auto 2.25rem; }
.service-photos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem;
  max-width: 900px; margin-inline: auto; align-items: start; text-align: left;
}
.service-photo img { display: block; width: 100%; border-radius: 3px; }
.service-caption { padding-top: 1.5rem; }
.service-caption h3 { font-size: 1.875rem; margin-bottom: .75rem; }
.service-caption p { font-size: .94rem; line-height: 1.8; color: hsl(var(--mocha) / .9); }
/* 8px chứ không phải 3px như các khối khác: đây là khối phụ, bo mềm hơn cho đỡ nặng. */
.experience-details {
  max-width: 900px; margin: 2.5rem auto 0; padding: 1.625rem 1.875rem 1.75rem;
  text-align: left; background: hsl(var(--ivory) / .55); border-radius: 8px;
}
.experience-details-label {
  margin-bottom: 1.125rem; font-size: .69rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--taupe));
}
.experience-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.experience-details-grid p { font-size: .875rem; line-height: 1.75; color: hsl(var(--mocha) / .9); }
.experience-details-grid strong { display: block; margin-bottom: .3125rem; font: 500 .94rem/1.5 'Inter', sans-serif; color: hsl(var(--espresso)); }
.experience-details-grid span { display: block; }
.section-actions { margin-top: 2.125rem; }
.quiet-link { color: hsl(var(--espresso)); text-underline-offset: 5px; font-size: .875rem; padding-block: .5rem; }
/* Ceník: 5 dòng tóm tắt, mở ra mới thấy giá chi tiết của nhóm */
.price-intro { max-width: 38rem; margin: 1rem auto 0; font-size: .92rem; }
.price-list { margin: 2.5rem 0 0; text-align: left; }
.price-row { border-bottom: 1px solid hsl(var(--border)); }
.price-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; min-height: 44px; }
.price-head::-webkit-details-marker { display: none; }
.price-name { display: flex; align-items: center; gap: .7rem; font-size: 1.02rem; font-weight: 500; transition: color .2s; }
.price-name::before { content: ''; width: 9px; height: 9px; flex: none; margin-top: -4px; transform: rotate(45deg); transition: transform .25s, margin-top .25s; border-right: 1px solid hsl(var(--taupe)); border-bottom: 1px solid hsl(var(--taupe)); }
.price-row[open] .price-name::before { transform: rotate(-135deg); margin-top: 2px; }
.price-head:hover .price-name, .price-row[open] .price-name { color: hsl(var(--mocha)); }
.price-from { color: hsl(var(--taupe)); white-space: nowrap; font-size: .98rem; }
.price-body { padding-bottom: 1.25rem; }
.price-note { margin: 0 0 .5rem; font-size: .8rem; font-style: italic; color: hsl(var(--taupe)); }
.price-colhead { margin: 0; padding-bottom: .1rem; text-align: right; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: hsl(var(--taupe)); }
.price-sub { margin: 0; }
.price-item { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px dotted hsl(var(--border)); }
.price-item:first-child { border-top: 0; }
.price-sub dt { font-weight: 300; font-size: .9rem; color: hsl(var(--mocha)); }
.price-sub dd { margin: 0; font-size: .9rem; color: hsl(var(--taupe)); white-space: nowrap; }
.pricing-ctas { margin-top: 2.75rem; }
.btn-ghost { color: hsl(var(--espresso)); border-color: hsl(var(--border)); }
.interlude { position: relative; height: 470px; isolation: isolate; overflow: hidden; display: grid; place-items: center; color: hsl(var(--ivory)); }
.interlude img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; z-index: -2; }
.interlude::after { content: ''; position: absolute; inset: 0; background: hsl(var(--espresso) / .35); z-index: -1; }
.interlude h2 { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; text-align: center; padding: 1.5rem; }
.why { padding: 5.5rem 0 1.875rem; }
.why .container { max-width: 1000px; }
.why-list { list-style: none; padding: 0; margin-top: 2.625rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.75rem; text-align: left; }
.why-list li { display: flex; align-items: baseline; gap: .875rem; padding: 1.25rem 0 1.5rem; border-bottom: 1px solid hsl(var(--border)); }
.why-list li::before { content: '✓'; color: hsl(var(--taupe)); }

/* ===== Recenze (bản duyệt): điểm Google + dải thẻ trượt ngang =====
   Sáu thẻ dựng từ content/reviews.json. Cột kiểu báo: kẻ mảnh chia thẻ, không nền.
   Desktop thấy 3 thẻ, tablet 2, mobile 1 — chặn 651/851px là chặn CHỨC NĂNG. */
.reviews { padding: 3.625rem 0 5.5rem; }
.reviews .container { max-width: 1000px; }
.reviews h2 em { display: block; font-size: .65em; margin-top: .625rem; }
.google-rating { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: 1.875rem; color: inherit; text-decoration: none; }
.rating-score { font: 500 4rem/1 'Playfair Display', serif; }
.rating-score > span { margin-left: .25rem; font: 300 1.25rem/1 'Inter', sans-serif; color: hsl(var(--taupe)); }
.rating-details { display: grid; gap: .4375rem; text-align: left; }
.rating-details strong { font-size: .875rem; font-weight: 400; }
/* Hai hàng sao chồng nhau: hàng dưới xám, hàng trên vàng bị cắt còn 94% = 4,7/5. */
.rating-stars { position: relative; display: block; width: max-content; font-size: 1.3125rem; line-height: 1; letter-spacing: 3px; color: hsl(var(--border)); }
.rating-stars .filled { position: absolute; inset: 0 auto 0 0; width: 94%; overflow: hidden; white-space: nowrap; color: hsl(var(--gold)); }
.review-track {
  display: flex; gap: 0; margin-top: 2.75rem; padding-bottom: 2px;
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-top: 1px solid hsl(var(--taupe) / .28); border-right: 1px solid hsl(var(--taupe) / .22);
}
.review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline: 2px solid hsl(var(--mocha)); outline-offset: 4px; }
.google-review-card {
  flex: 0 0 calc(100% / 3); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  min-height: 230px; padding: 2.125rem 1.75rem 1.875rem; text-align: left;
  border-left: 1px solid hsl(var(--taupe) / .22); color: inherit; text-decoration: none;
}
.google-review-card:focus-visible { outline: 2px solid hsl(var(--mocha)); outline-offset: -3px; }
.google-review-card blockquote p { font: 400 italic 1.375rem/1.5 'Playfair Display', serif; color: hsl(var(--espresso)); transition: color .2s; }
.google-review-card:hover blockquote p { color: hsl(var(--mocha)); }
.individual-stars { margin: auto 0 .5rem; font-size: .8125rem; letter-spacing: 2px; color: hsl(var(--gold)); }
.google-review-card h3 { font: 500 .69rem/1.4 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--taupe)); }
.review-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; margin: 1.375rem 0 1.625rem; }
.review-navigation > div { display: flex; gap: .625rem; }
.review-navigation button { width: 44px; height: 44px; border: 1px solid hsl(var(--border)); border-radius: 50%; background: transparent; color: hsl(var(--espresso)); font-size: 1.4375rem; cursor: pointer; }
.review-navigation button:hover:not(:disabled) { background: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.review-navigation button:disabled { opacity: .3; cursor: default; }
.review-navigation button:focus-visible { outline: 2px solid hsl(var(--mocha)); outline-offset: 3px; }
/* Chỉ đọc màn hình mới cần "1–3 / 6"; mắt thường đã thấy dải thẻ trượt. */
#review-range { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.review-excerpt-note { max-width: 600px; margin: 0 auto 1.5rem; font-size: .75rem; color: hsl(var(--taupe)); }
.rating-date { margin-top: 1rem; font-size: .69rem; color: hsl(var(--taupe)); }
@media (max-width: 850px) and (min-width: 651px) { .google-review-card { flex-basis: calc(100% / 2); } }
@media (max-width: 650px) {
  .reviews { padding: 2.625rem 0 3.5rem; }
  .review-track { align-items: flex-start; border-right: 0; }
  .google-review-card { flex-basis: 100%; min-height: 0; padding: 1.875rem 2px 1.5rem; border-left: 0; }
  .google-review-card blockquote p { font-size: 1.3125rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .individual-stars { margin: 1.25rem 0 .5rem; }
  .review-excerpt-note { padding-inline: .75rem; }
  .rating-score { font-size: 3.5rem; }
  .google-rating { gap: 1.125rem; }
  .hero-rating { gap: .375rem; font-size: .75rem; flex-wrap: wrap; }
}
.gallery-sec { background: hsl(var(--powder) / .48); text-align: center; }
.gallery-sec h2 { max-width: 1000px; margin-inline: auto; }
.gallery-sec .section-body { max-width: 640px; margin: 1.25rem auto 2.25rem; }
/* Approved B arrangement: two tall images flank two smaller images. */
.gallery-grid { display: grid; grid-template-columns: 1.1fr .6fr 1.1fr; grid-template-rows: auto auto; gap: 1.25rem; margin: 2.5rem 0; }
.gallery-item { position: relative; min-width: 0; margin: 0; border-radius: 3px; overflow: hidden; }
.gallery-item:first-child { grid-column: 1; grid-row: 1 / 3; }
.gallery-item:last-child { grid-column: 3; grid-row: 1 / 3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gallery-item:first-child img, .gallery-item:last-child img { position: absolute; inset: 0; }
/* Let the two portrait originals determine the row heights, without cropping. */
.gallery-item:nth-child(2) img, .gallery-item:nth-child(3) img { height: auto; }
.gallery-item:first-child:hover img, .gallery-item:last-child:hover img { transform: scale(1.04); }
.location .grid-2 { gap: 3.75rem; }
.location h2 { font-size: 2.5rem; }
.loc-list { list-style: none; padding: 0; display: grid; gap: .6rem; margin-bottom: 2rem; }
.loc-list a { color: inherit; text-underline-offset: 3px; text-decoration-color: hsl(var(--nude)); }
/* z-index: 0 nhốt các lớp/nút của Leaflet (z-index tới 800) vào trong hộp bản đồ,
   không thì chúng đè lên thanh menu cố định (z-index 50). */
.map-box { position: relative; z-index: 0; height: 440px; border-radius: 3px; background: hsl(var(--powder)); overflow: hidden; }
.map-box .map-ph, .map-box .map-canvas { width: 100%; height: 100%; }
.map-box .map-ph { background: linear-gradient(135deg, hsl(var(--powder)), hsl(var(--nude) / .45)); }
.map-box .leaflet-container { width: 100%; height: 100%; background: hsl(var(--powder)); font-family: 'Inter', system-ui, sans-serif; }
.map-box .leaflet-control-attribution { font-size: 10px; background: hsl(var(--ivory) / .85); }
.map-box .map-pop { font-size: .84rem; line-height: 1.5; }
.map-wrap > .quiet-link { display: inline-block; margin-top: .5rem; }
.site-footer { background: hsl(var(--espresso)); color: hsl(var(--ivory) / .7); padding: 2.5rem 0 2rem; }
.site-footer a { color: hsl(var(--ivory)); text-decoration: none; text-underline-offset: 4px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0 0 .3rem; font-size: .84rem; line-height: 1.65; }
.site-footer .foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.foot-h { font: 500 .69rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--ivory) / .55); margin-bottom: .75rem; }
.foot-links { display: grid; gap: .4rem; font-size: .84rem; }
.site-footer .foot-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-top: 1px solid hsl(var(--ivory) / .18); margin-top: 1.75rem; padding-top: 1.1rem;
  font-size: .78rem; color: hsl(var(--ivory) / .55);
}
@media (max-width: 1000px) { .nav-menu { gap: 1rem; } .nav-menu a { font-size: .75rem; } }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  html { scroll-padding-bottom: 100px; }
  .nav-toggle { display: grid; align-content: center; gap: 5px; background: none; border: 0; padding: .75rem; min-width: 44px; min-height: 44px; }
  .nav-toggle span { width: 22px; height: 2px; background: hsl(var(--ivory)); }
  .nav-menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; background: hsl(var(--espresso) / .96); padding: 1.5rem; gap: .5rem; }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { display: inline-flex; min-height: 44px; align-items: center; }
  .hero-logo { width: 230px; }
  .hero h1 { font-size: 2.375rem; }
  .hero-sub { font-size: .875rem; }
  .hero-facts { font-size: .75rem; gap: .75rem; }
  .hero-content { padding-block: 6.25rem 6rem; }
  .section { padding: 3.5rem 0; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about .grid-2 { gap: 1.875rem; }
  .cards { gap: .75rem; }
  .card { padding: 1.5rem .9375rem; }
  .card h3 { font-size: 1.3125rem; }
  .card p { font-size: .8125rem; }
  .interlude { height: 310px; }
  .interlude h2 { font-size: 2.25rem; }
  .why { padding-bottom: 1.5rem; }
  .why-list, .review-grid { grid-template-columns: minmax(0, 1fr); }
  .reviews { padding-top: 2rem; }
  .location .grid-2 { gap: 2rem; }
  .location h2 { font-size: 2.125rem; }
  .map-box { height: 330px; }
  .site-footer .foot-cols { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .price-name { font-size: .95rem; }
  .price-from { font-size: .9rem; }
  .price-sub dt, .price-sub dd { font-size: .85rem; }
  /* Nút nổi chỉ chiếm góc phải, không phải cả thanh đáy như bản cũ: chừa vừa đủ. */
  .site-footer { padding-bottom: calc(1.625rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: .75rem; align-items: start; }
  .gallery-item:first-child, .gallery-item:last-child { grid-row: auto; grid-column: auto; }
  .gallery-item:first-child img, .gallery-item:last-child img { position: static; height: auto; }
  .gallery-item:first-child:hover img, .gallery-item:last-child:hover img { transform: none; }
}
@media (max-width: 360px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .gallery-item img { transition: none; } .gallery-item:hover img { transform: none; } }

/* Approved final section: full portrait photo beside the booking invitation. */
.decor-ending { display: grid; grid-template-columns: minmax(0,450px) minmax(0,500px); justify-content: center; align-items: center; gap: clamp(32px,6vw,88px); padding: 72px 5vw; background: hsl(var(--powder)); color: hsl(var(--espresso)); }
.decor-ending > img { display: block; width: 100%; height: auto; border-radius: 3px; }
.decor-ending > div { text-align: left; }
.decor-ending .ending-kicker { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: hsl(var(--mocha)); margin-bottom: 24px; }
.decor-ending h2 { font-size: clamp(34px,3.6vw,52px); font-weight: 400; line-height: 1.18; margin: 0 0 28px; max-width: 470px; }
.decor-ending .ending-copy { font-size: 15px; line-height: 1.8; margin: 0 0 32px; max-width: 410px; color: hsl(var(--mocha)); }
@media(max-width:767px) {
  .decor-ending { grid-template-columns: minmax(0,450px); gap: 32px; padding: 40px 24px; }
  .decor-ending h2 { font-size: 36px; }
  .decor-ending .ending-kicker { margin-bottom: 18px; }
}

/* ===== Trang đặt lịch (mockup A đã duyệt: mockups/jardin-rezervace-mockup.html) ===== */
.page-book .site-header, .page-legal .site-header { background: hsl(var(--espresso)); backdrop-filter: none; }
/* Ảnh đầu trang đặt lịch (bản duyệt A, mockups/jardin-booking-hero2.html).
   Tỉ lệ 717/888 = 0,807 là khung chủ tiệm chốt: cắt ~7% mép TRÊN của ảnh gốc 3:4
   (object-position neo ĐÁY nên phần bị cắt rơi vào mép trên). 7% là đúng tới sát
   đỉnh chữ neon "NAIL Jardin" — cắt sâu hơn là ăn vào biển hiệu.

   --book-col là bề rộng DUY NHẤT của cả cột đặt lịch: ảnh đầu trang, form, ô nhắc
   demo, dòng noscript và khối điều kiện đều lấy từ đây, nên không bao giờ lệch mép.
   Ba mức chặn: 760px = bề rộng form đã duyệt; 100% = bề ngang trong .container (ảnh
   và form đều nằm trong .container nên 100% nghĩa y hệt nhau); và CHIỀU CAO màn hình
   — màn thấp thì cả cột hẹp lại chứ không cắt sâu thêm vào ảnh, để cụm chữ trong ảnh
   còn thấy được mà không phải cuộn.
   Biến khai báo trên .page-book nên trang chủ và trang bảo mật không thấy nó; mọi chỗ
   dùng đều kèm mặc định 760px phòng khi lọt ra ngoài .page-book. */
.page-book {
  --book-hero-top: calc(64px + 1.5rem);
  --book-col: min(760px, 100%, max(26rem, calc((100svh - var(--book-hero-top) - 1rem) * 717 / 888)));
}
.book-hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--book-col, 760px);
  aspect-ratio: 717 / 888;
  margin: var(--book-hero-top) auto 0;
  border-radius: 3px;
  display: flex; align-items: flex-end;
  animation: bookHeroFade .8s ease both;
}
.book-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.book-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, hsl(var(--espresso) / 0) 42%, hsl(var(--espresso) / .66));
}
.book-hero__in { padding: 0 1.75rem 1.75rem; color: hsl(var(--ivory)); }
.book-hero__in .kicker { color: hsl(var(--ivory) / .75); }
.book-hero__in h1 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 400; margin: .6rem 0 0; }
.book-hero__in p { max-width: 32rem; margin: .6rem 0 0; font-size: .9rem; line-height: 1.7; color: hsl(var(--ivory) / .9); }
@keyframes bookHeroFade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .book-hero { animation: none; } }
.book-sec { padding: 2.75rem 0 5.5rem; }
.book-demo { max-width: var(--book-col, 760px); margin: 0 auto 1rem; padding: .75rem 1rem; border: 1px dashed hsl(var(--taupe) / .6); border-radius: 3px; font-size: .85rem; text-align: center; color: hsl(var(--mocha)); background: hsl(var(--accent) / .18); }
.book-noscript { max-width: var(--book-col, 760px); margin: 0 auto; text-align: center; }
/* Điều kiện rezervace: nhắc ngắn dưới form, cố tình nhạt để không thành bức tường pháp lý. */
.book-terms { max-width: var(--book-col, 760px); margin: 1.5rem auto 0; font-size: .81rem; line-height: 1.7; color: hsl(var(--taupe)); text-align: center; }
.book { max-width: var(--book-col, 760px); margin: 0 auto; background: hsl(var(--ivory)); border: 1px solid hsl(var(--taupe) / .28); border-radius: 3px; }
.book:focus { outline: none; }
.book__steps { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid hsl(var(--taupe) / .28); }
.book__step { padding: 1.125rem .6rem; text-align: center; font: 500 .69rem/1.3 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--taupe)); }
.book__step b { display: block; font: italic 400 1.375rem/1 'Playfair Display', serif; margin-bottom: .375rem; color: hsl(var(--taupe) / .7); }
.book__step.on, .book__step.on b { color: hsl(var(--espresso)); }
.book__step.done b { color: hsl(var(--accent)); }
.book__body { padding: 2.25rem 2.5rem; }
.book .field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.375rem; }
.book .field > label, .daterow-head label, .book-label { font: 500 .69rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--taupe)); margin: 0; }
.book .field input { font: 300 .94rem/1.4 'Inter', sans-serif; color: hsl(var(--espresso)); background: #fff; border: 1px solid hsl(var(--taupe) / .35); border-radius: 3px; padding: .875rem 1rem; outline: 0; min-height: 48px; }
.book .field input:focus-visible { border-color: hsl(var(--mocha)); box-shadow: 0 0 0 2px hsl(var(--accent) / .5); }
.book-hint { font-size: .81rem; color: hsl(var(--taupe)); margin: -.25rem 0 .5rem; }
.book-hp { position: absolute; left: -9999px; top: -9999px; }
/* Bước 2: chọn manikérka (bản duyệt B của mockups/jardin-staff-picker.html).
   Mỗi thẻ là một <input type="radio"> THẬT nấp sau <label>, nên phím mũi tên và
   trình đọc màn hình chạy sẵn. Vòng tròn: ảnh thợ, hoặc chữ cái đầu khi chưa có ảnh. */
.staffpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .75rem; }
.staffpick__opt { position: relative; min-height: 44px; padding: .875rem .5rem; display: grid; justify-items: center; gap: .5rem; border: 1px solid hsl(var(--taupe) / .28); background: #fff; border-radius: 3px; cursor: pointer; text-align: center; font: 300 .84rem/1.3 'Inter', sans-serif; color: hsl(var(--espresso)); transition: border-color .18s, background .18s; }
.staffpick__opt:hover { border-color: hsl(var(--mocha)); }
.staffpick__opt.sel { border-color: hsl(var(--mocha)); background: hsl(var(--powder) / .45); }
/* Radio thật nhưng vô hình: giữ trong luồng tab, chỉ có cái thẻ là nhìn thấy.
   Chọn kỹ (.book .field ...) để đè kiểu ô nhập chung ở trên, không thì nó cao 48px. */
.book .field .staffpick__opt input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; box-shadow: none; pointer-events: none; }
/* Vòng sáng khi đi bằng bàn phím. :focus-within là mức nền cho trình duyệt cũ;
   trình duyệt có :has() thì tắt vòng sáng lúc bấm chuột (chỉ giữ cho :focus-visible). */
.staffpick__opt:focus-within { outline: 2px solid hsl(var(--mocha)); outline-offset: 2px; }
@supports selector(:has(*)) {
  .staffpick__opt:focus-within:not(:has(input:focus-visible)) { outline: none; }
}
.staffpick__ava { width: 56px; height: 56px; border-radius: 50%; background: hsl(var(--powder)); display: grid; place-items: center; overflow: hidden; object-fit: cover; font: 400 1.125rem 'Playfair Display', serif; color: hsl(var(--mocha)); }
.staffpick__name { overflow-wrap: anywhere; }
.choice { display: flex; gap: .625rem; flex-wrap: wrap; }
.choice button { min-height: 44px; padding: .75rem 1.125rem; border-radius: 3px; border: 1px solid hsl(var(--taupe) / .35); background: #fff; font: 300 .875rem 'Inter', sans-serif; color: hsl(var(--mocha)); cursor: pointer; transition: border-color .18s, background .18s, color .18s; }
.choice button:hover:not(:disabled) { border-color: hsl(var(--mocha)); }
.choice button.sel { border-color: hsl(var(--espresso)); background: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.choice button.addon { border-style: dashed; }
.choice button:disabled { opacity: .4; cursor: not-allowed; }
.svc-group + .svc-group { margin-top: 1.375rem; }
.svc-group__lab { font: 500 .69rem/1 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: hsl(var(--taupe)); margin-bottom: .625rem; }
.svc-group__lab i { font: italic 400 .75rem 'Playfair Display', serif; letter-spacing: 0; text-transform: none; }
.svc-items { display: flex; flex-direction: column; gap: .375rem; }
.svc-item { display: flex; align-items: center; gap: .75rem; text-align: left; min-height: 44px; padding: .69rem .875rem; border: 1px solid hsl(var(--taupe) / .25); background: #fff; border-radius: 3px; cursor: pointer; font: 300 .84rem/1.35 'Inter', sans-serif; color: hsl(var(--espresso)); transition: border-color .16s, background .16s; }
.svc-item:hover { border-color: hsl(var(--mocha)); }
.svc-item.sel { border-color: hsl(var(--mocha)); background: hsl(var(--powder) / .45); }
.svc-item__check { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1px solid hsl(var(--taupe) / .5); border-radius: 2px; color: transparent; font-size: .69rem; }
.svc-item.sel .svc-item__check { background: hsl(var(--espresso)); border-color: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.svc-item__name { flex: 1; min-width: 0; }
.svc-item__price { white-space: nowrap; color: hsl(var(--taupe)); }
.svc-item.sel .svc-item__price { color: hsl(var(--espresso)); }
.svc-acc { border: 1px solid hsl(var(--taupe) / .25); border-radius: 3px; background: #fff; }
.svc-acc.open { border-color: hsl(var(--mocha)); }
.svc-acc__head { width: 100%; display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .69rem .875rem; background: none; border: 0; cursor: pointer; text-align: left; font: 300 .84rem/1.35 'Inter', sans-serif; color: hsl(var(--espresso)); }
.svc-acc__head .svc-item__check.on { background: hsl(var(--espresso)); border-color: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.svc-acc__chev { width: 8px; height: 8px; flex: none; margin: -4px 4px 0 6px; transform: rotate(45deg); transition: transform .2s; border-right: 1px solid hsl(var(--taupe)); border-bottom: 1px solid hsl(var(--taupe)); }
.svc-acc.open .svc-acc__chev { transform: rotate(-135deg); margin-top: 4px; }
.svc-acc__body { display: none; flex-direction: column; gap: .375rem; padding: .125rem .75rem .75rem 2.75rem; }
.svc-acc.open .svc-acc__body { display: flex; }
.svc-item--sub .svc-item__check { border-radius: 50%; }
.items-total { display: flex; justify-content: space-between; align-items: center; margin-top: 1.125rem; padding: .875rem 1rem; background: hsl(var(--espresso)); color: hsl(var(--ivory)); border-radius: 3px; font-size: .84rem; }
.items-total b { font: 500 1rem 'Inter', sans-serif; }
.daterow-head { display: flex; align-items: center; justify-content: space-between; }
.cal-toggle { background: none; border: 0; padding: .25rem 0; font: 300 .81rem 'Inter', sans-serif; color: hsl(var(--mocha)); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.date-field { position: relative; }
.cal-input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.cal-input.on { position: static; width: 100%; height: auto; min-height: 48px !important; padding: .875rem 1rem !important; border: 1px solid hsl(var(--taupe) / .35) !important; opacity: 1; pointer-events: auto; }
.daychips { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.daychip { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .625rem .25rem .5rem; border: 1px solid hsl(var(--taupe) / .3); background: #fff; border-radius: 3px; cursor: pointer; }
.daychip:hover { border-color: hsl(var(--mocha)); }
.daychip__wd { font: 500 .625rem 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--taupe)); }
.daychip__n { font: 400 1.25rem/1 'Playfair Display', serif; color: hsl(var(--espresso)); }
.daychip.sel { background: hsl(var(--espresso)); border-color: hsl(var(--espresso)); }
.daychip.sel .daychip__wd { color: hsl(var(--ivory) / .7); }
.daychip.sel .daychip__n { color: hsl(var(--ivory)); }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.slot { min-height: 44px; padding: .75rem; border: 1px solid hsl(var(--taupe) / .3); background: #fff; border-radius: 3px; font: 300 .875rem 'Inter', sans-serif; color: hsl(var(--mocha)); cursor: pointer; text-align: center; }
.slot:hover:not(.off) { border-color: hsl(var(--mocha)); }
.slot.sel { background: hsl(var(--espresso)); border-color: hsl(var(--espresso)); color: hsl(var(--ivory)); }
.slot.off { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.slot-msg { grid-column: 1 / -1; color: hsl(var(--taupe)); font-size: .875rem; padding: .375rem 0; }
.slot-retry { background: none; border: 0; padding: 0; font: inherit; color: hsl(var(--mocha)); text-decoration: underline; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.book__summary { border-top: 1px solid hsl(var(--taupe) / .28); border-bottom: 1px solid hsl(var(--taupe) / .28); padding: 1.125rem 0; margin-bottom: 1.625rem; }
.book__summary dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.125rem; margin: 0; }
.book__summary dt { font: 500 .69rem/1.6 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--taupe)); }
.book__summary dd { margin: 0; text-align: right; font-size: .9rem; }
.book__summary dd b { font-weight: 500; }
.sum-item { display: flex; justify-content: space-between; gap: .75rem; font-size: .84rem; color: hsl(var(--mocha)); text-align: left; }
.sum-item b { white-space: nowrap; }
.book__actions { display: flex; gap: .75rem; margin-top: 1.375rem; }
.book__actions .btn { flex: 1; }
.book__actions .btn:disabled { opacity: .6; cursor: default; }
.book-error { color: hsl(0 45% 42%); font-size: .875rem; text-align: center; margin: .75rem 0 0; }
.book__done { text-align: center; padding: .875rem 0; }
.book__done .check { width: 64px; height: 64px; border-radius: 50%; background: hsl(var(--accent) / .4); display: grid; place-items: center; margin: 0 auto 1.375rem; font-size: 1.625rem; }
.book__done h2 { font-size: 1.875rem; font-weight: 400; }
.book__done p { max-width: 400px; margin: .75rem auto; color: hsl(var(--mocha)); font-size: .94rem; line-height: 1.7; }
.book__done .book__fine { font-size: .81rem; color: hsl(var(--taupe)); margin-bottom: 1.5rem; }
/* Hai trang này không có thanh "Rezervovat" cố định dưới đáy nên chân trang khỏi chừa chỗ. */
@media (max-width: 767px) { .page-book .site-footer, .page-legal .site-footer { padding-bottom: 2rem; } }

/* ===== Trang bảo mật (mockup đã duyệt: mockups/jardin-legal-mockup.html) ===== */
.legal-head { background: hsl(var(--powder) / .48); padding: calc(64px + 3.5rem) 0 2.25rem; text-align: center; }
.legal-head h1 { font-size: clamp(1.875rem, 3.6vw, 2.75rem); font-weight: 400; margin-top: .9rem; }
.legal-head p:not(.kicker) { max-width: 560px; margin: .75rem auto 0; color: hsl(var(--mocha) / .9); font-size: .94rem; line-height: 1.7; }
.legal { max-width: 760px; margin: 0 auto; padding: 2.75rem 1.5rem 4.5rem; }
.legal h2 { font-size: 1.25rem; font-weight: 500; margin: 2.25rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid hsl(var(--taupe) / .28); }
.legal h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.legal h3 { font-size: .95rem; font-weight: 500; font-family: 'Inter', sans-serif; margin: 1.25rem 0 .35rem; }
.legal p, .legal li { font-size: .92rem; line-height: 1.8; color: hsl(var(--mocha)); }
.legal p { margin: 0 0 .75rem; }
.legal ul { margin: 0 0 .75rem; padding-left: 1.1rem; }
.legal li { margin-bottom: .35rem; }
.legal a { color: inherit; text-underline-offset: 3px; text-decoration-color: hsl(var(--nude)); }
.legal .card { border: 1px solid hsl(var(--taupe) / .28); border-radius: 3px; padding: 1.1rem 1.25rem; background: hsl(var(--powder) / .3); }
.legal .card p { margin: 0 0 .2rem; font-size: .9rem; }
.legal .upd { margin-top: 2.5rem; padding-top: 1.1rem; border-top: 1px solid hsl(var(--taupe) / .28); font-size: .81rem; color: hsl(var(--taupe)); }
@media (max-width: 600px) {
  .legal-head { padding: calc(64px + 2.25rem) 0 1.75rem; }
  .legal { padding: 2rem 1.5rem 3.5rem; }
}
@media (max-width: 600px) {
  /* Điện thoại: không còn lề hai bên để nhường, nên ảnh tràn hết bề ngang, bỏ bo góc.
     Tỉ lệ 717/888 giữ nguyên khung đã duyệt; min/max chỉ chặn hai đầu cực đoan
     (màn rất ngắn hoặc xoay ngang) để chữ trong ảnh và ô nhắc demo ngay dưới vẫn tới được. */
  .book-hero { width: auto; margin: 64px -1.5rem 0; border-radius: 0; min-height: 58svh; max-height: 82svh; }
  .book-hero__in { padding: 0 1.5rem 1.5rem; }
  .book-hero__in p { font-size: .875rem; }
  .book-sec { padding: 1.5rem 0 3.5rem; }
  .book__body { padding: 1.5rem 1.125rem; }
  .book__step { padding: .8rem .25rem; font-size: .59rem; }
  .book__step b { font-size: 1.125rem; }
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .staffpick { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .daychips { gap: .3rem; }
  .daychip__n { font-size: 1.06rem; }
  .svc-item { align-items: flex-start; }
}

/* Nút đặt lịch nổi — CHỈ trên điện thoại. site.js ẩn nó khi hero hoặc khối kết
   đang trong tầm nhìn, vì hai chỗ đó đã có nút đặt lịch to rồi. */
.floating-book {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  min-height: 50px; padding: 0 1.1875rem;
  background: hsl(var(--accent)); color: hsl(var(--espresso));
  border: 1px solid hsl(var(--espresso) / .12); border-radius: 28px;
  box-shadow: 0 5px 22px hsl(var(--espresso) / .16);
  font: 500 .6875rem/1.3 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
.floating-book svg { width: 19px; height: 19px; }
.floating-book:hover { background: hsl(340 25% 71%); }
.floating-book:focus-visible { outline: 2px solid hsl(var(--espresso)); outline-offset: 4px; }
.floating-book[hidden] { display: none; }
@media (min-width: 768px) { .floating-book { display: none !important; } }