/* wall.css — "The White Room": hệ thiết kế cho trang khách, bắt đầu từ trang chủ.
 *
 * Ba loại thứ, không hơn: TÁC PHẨM (ảnh trong khung có mat), NHÃN TRANH (chữ nhỏ,
 * cách chữ rộng), TƯỜNG (khoảng trắng + đường kẻ 1px). Phân mục bằng "wall text"
 * = số mục · tên mục in hoa · hairline có 40px đầu mang màu tiệm — thay cho icon.
 *
 * LUẬT CỨNG (tests/home-white-room.test.js khoá):
 *   - không icon / emoji / svg trang trí
 *   - border-radius = 0 ở mọi nơi
 *   - box-shadow CHỈ ở .w-frame
 *   - không gradient, không overlay lên ảnh, không chữ trắng trên --brand thô
 *   - chuyển động chỉ: opacity ảnh 400ms, màu chữ 200ms
 *   - đúng HAI ngưỡng: 700px (mobile) và 1100px (tablet)
 *
 * Màu: public/js/theme.js suy 10 tông từ MỘT màu chủ tiệm chọn và ghi lên :root
 * trước lần vẽ đầu. Giá trị dưới đây là mặc định crimson để trang không trắng
 * nếu JS chưa chạy. Mọi tông cùng hue với màu chủ. */

:root {
  --brand:     #dc143c;   /* CHỈ đường kẻ: viền khung, 40px đầu hairline, vạch mép trên */
  --brand-ink: #ac2f3b;   /* chữ mang màu tiệm */
  --block:     #9e2030;   /* nền nút đặc */
  --shade:     #4f0913;   /* nền footer + dải Book */
  --wash:      #ffe4e3;   /* hàng Today, hover hàng bảng */
  --bg:        #fdf9f9;   /* tường */
  --mat:       #f9f1f1;   /* mat trong khung */
  --line:      #ddd5d5;   /* hairline */
  --ink:       #201818;
  --ink-2:     #645b5b;
  --frame:     #dc143c;
  --frame-w:   1px;
  --fillet:    rgba(220,20,60,.45);
  --shadow:    rgba(32,24,24,.28);

  --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* thang chữ — desktop; đổi ở 700px */
  --fs-display: clamp(56px, 6.5vw, 88px);
  --lh-display: 1.04;
  --fs-num: 72px;
  --fs-h2: 34px;
  --fs-h3: 22px;
  --fs-body: 16px;
  --fs-body2: 14px;
  --fs-label: 11px;
  --fs-price: 15px;

  /* nhịp — gốc 8px, không có khoảng lưng chừng */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s14: 112px;
  --section: var(--s14);

  --container: 1280px;
  --pad: 40px;
  --gutter: 24px;
  --mat-pad: 18px;
  --mat-bottom: 24px;
  --nav-h: 64px;
}

@media (max-width: 700px) {
  :root {
    --fs-display: 40px;
    --lh-display: 1.08;
    --fs-num: 48px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --section: 72px;
    --pad: 20px;
    --gutter: 16px;
    --mat-pad: 12px;
    --mat-bottom: 16px;
  }
}

/* ===== nền ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ===== chữ ===== */
.w-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.w-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--ink);
}
.w-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--ink);
}
.w-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-num);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.w-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.w-body2 { font-size: var(--fs-body2); line-height: 1.55; color: var(--ink-2); }
.w-muted { color: var(--ink-2); }
.w-ital { font-style: italic; }

.w-link {
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 200ms;
}
.w-link:hover { color: var(--ink); }

/* nút đặc: nền --block, chữ --bg — đọc được với mọi màu vì L(block) ≤ .46 */
.w-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  background: var(--block);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms, color 200ms;
}
.w-btn:hover { background: var(--brand-ink); color: var(--bg); }
.w-btn.sm { height: 36px; padding: 0 20px; }
.w-btn.inv { background: var(--bg); color: var(--ink); }
.w-btn.inv:hover { background: var(--wash); color: var(--ink); }

/* ===== khung + lưới ===== */
.w-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.w-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.w-section { padding-block: var(--section); }
.w-section + .w-section { padding-top: 0; }

/* cột — desktop; xếp dọc ở 1100/700 */
.c-1-4  { grid-column: 1 / span 4; }
.c-1-5  { grid-column: 1 / span 5; }
.c-1-6  { grid-column: 1 / span 6; }
.c-1-7  { grid-column: 1 / span 7; }
.c-1-8  { grid-column: 1 / span 8; }
.c-1-12 { grid-column: 1 / -1; }
.c-2-11 { grid-column: 2 / span 10; }
.c-4-9  { grid-column: 4 / span 6; }
.c-7-12 { grid-column: 7 / span 6; }
.c-9-12 { grid-column: 9 / span 4; }
.c-10-12 { grid-column: 10 / span 3; }
@media (max-width: 1100px) {
  .c-1-4, .c-1-5, .c-1-6, .c-1-7, .c-1-8, .c-2-11, .c-4-9, .c-7-12, .c-9-12, .c-10-12 { grid-column: 1 / -1; }
}

/* hairline */
.w-rule { height: 1px; background: var(--line); }

/* ===== WALL TEXT — chữ ký phân mục, thay icon ===== */
.w-wall {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s6);
}
.w-wall-n { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.14em; color: var(--brand-ink); }
.w-wall-name { white-space: nowrap; }
.w-wall-rule {
  position: relative;
  flex: 1;
  height: 1px;
  align-self: center;
  background: var(--line);
}
.w-wall-rule::before {   /* 40px đầu mang màu tiệm — chữ ký của mọi mục */
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 1px;
  background: var(--brand);
}
.w-wall-aside { white-space: nowrap; }
@media (max-width: 700px) {
  .w-wall { flex-wrap: wrap; row-gap: var(--s1); }
  .w-wall-rule { flex-basis: 100%; order: 3; }
  .w-wall-aside { order: 4; }
}

/* ===== KHUNG ẢNH — tác phẩm treo tường =====
   Khung ÔM THEO ẢNH. Tỉ lệ thật của tấm ảnh đi vào bằng biến --ar đặt trên CHÍNH
   .w-frame-img (JS: box.style.setProperty('--ar', w + ' / ' + h)), nên không tấm nào
   bị xén cho vừa một khuôn dựng sẵn: kho ảnh tiệm trải từ 0,571 đến 1,502 và 89% là
   ảnh DỌC — ép hết vào 4/5 là cắt ~17% chiều cao một tấm 2:3, còn khuôn ngang 3/2
   cắt tới 55%.
   Đường lui ba tầng, theo thứ tự: --ar dựng từ width/height server trả về → --ar đọc
   naturalWidth/naturalHeight lúc ảnh load xong → không gì cả thì rơi về 4 / 5.
   Tầng cuối mới là thứ giữ cho /team và /contact (hai nơi không ai đặt --ar) y hệt
   trước. Tường hero trang chủ thì NGƯỢC LẠI: nó cũng đi qua hangPhoto nên bốn khung
   đều mang --ar và cao thấp so le — đó là thay đổi hình dáng lớn nhất của bản này,
   đừng sửa .wide hay --ar mà không mở lại trang chủ xem. */
.w-frame {
  background: var(--mat);
  border: var(--frame-w) solid var(--frame);
  padding: var(--mat-pad) var(--mat-pad) var(--mat-bottom);   /* đáy dày hơn: đóng khung tranh thật */
  box-shadow: 0 30px 40px -36px var(--shadow);
}
.w-frame-img {
  position: relative;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--mat);
  box-shadow: inset 0 0 0 1px var(--fillet);   /* gờ trong sát mép ảnh */
  overflow: hidden;
}
/* .wide có độ đặc hiệu (0,2,0), cao hơn .w-frame-img (0,1,0): để nguyên 3 / 2 ở đây
   thì --ar đặt trên phần tử mang .wide bị đè bẹp, và /services + /about + ảnh xen
   trang chủ không đổi gì hết. Nên .wide chỉ còn là tầng lui thứ ba cho khung ngang. */
.w-frame-img.wide { aspect-ratio: var(--ar, 3 / 2); }
.w-frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* khung đã ôm khít nên cover xén ~0px; đổi sang contain là lộ sọc nền do làm tròn pixel */
  object-position: 50% 35%;   /* móng nằm nửa trên khung — chỉ còn việc ở tầng lui 4 / 5 */
  opacity: 0;
  transition: opacity 400ms ease;
}
.w-frame-img img.on { opacity: 1; }

/* Khung ĐƠN — ảnh xen trang chủ, ảnh mở bài /about, ảnh giữa /services: hẹp bề ngang.
   89% kho ảnh là ảnh DỌC (trung vị 0,694), để khung rộng nguyên cột thì một tấm cao
   1,4–1,7 màn hình, khách phải cuộn mới nhìn hết một tấm. Hẹp bề ngang KHÔNG đụng tới
   tỉ lệ — vẫn đúng từng pixel theo ảnh gốc, chỉ là tấm ảnh nhỏ lại.
   486px = bề ngang 5 cột của lưới 12: container 1280 − pad 40×2 = 1200; một cột =
   (1200 − 11×24)/12 = 78; span 5 = 78×5 + 24×4 = 486. Tường hero bốn tấm KHÔNG nhận
   lớp này — bốn khung đó chia cột sẵn rồi. */
.w-frame.w-solo { width: min(100%, 486px); }
/* Trang chủ treo ảnh xen ở cột 4..9 (588px), khung hẹp 486px nằm trong đó sẽ dính mép
   TRÁI, trông như rơi lệch; canh giữa vùng đó. Giới hạn đúng .c-4-9 là cố ý: /about
   (.c-1-7) và /services (.svc-interlude) canh TRÁI theo lề chữ của bài viết.
   HAI dạng chọn vì lớp cột nằm trên CHÍNH cái khung ở index.html ("w-frame w-solo
   c-4-9"), không phải trên một thẻ bọc; đo thật: chỉ có dạng con-của thì khung vẫn
   nằm ở 426..912 trong vùng 426..1014, tức y nguyên mép trái. Dạng kia giữ cho cách
   viết bọc lồng nếu sau này đổi markup. */
.c-4-9 > .w-frame.w-solo,
.w-frame.w-solo.c-4-9 { margin-inline: auto; }

/* ===== HERO ===== */
.w-hero { padding-top: var(--s4); }
.w-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  min-height: 24px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.w-hero-head .w-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-hero-claim { margin-top: var(--s8); max-width: 17ch; }   /* 17ch: ngắt sau dấu phẩy, không để một từ mồ côi */
.w-hero-sub { margin-top: var(--s3); max-width: 46ch; }
.w-hero-cta { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.w-wall-photos {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  /* Bỏ dòng này là hỏng cả bản vá: grid mặc định stretch, bốn khung bị kéo cao bằng
     khung cao nhất và phần thừa thành mảng mat trống dưới ảnh — đo được 477,8px đều
     nhau ở bốn tấm tỉ lệ khác hẳn nhau. Đúng cái chủ tiệm cấm. */
  align-items: start;
  padding-bottom: 48px;                       /* chừa chỗ cho hai khung treo thấp */
}
.w-wall-photos > .w-frame:nth-child(2),
.w-wall-photos > .w-frame:nth-child(4) { transform: translateY(48px); }

.w-facts {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.w-fact { padding: var(--s2) 0; }
.w-fact .w-label { display: block; margin-bottom: 6px; }
.w-fact-v { font-size: var(--fs-body); color: var(--ink); }
.w-fact-v a { text-decoration: none; color: inherit; }
.w-fact-v a:hover { color: var(--brand-ink); }

@media (max-width: 1100px) {
  .w-wall-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s3); padding-bottom: 0; }
  .w-wall-photos > .w-frame:nth-child(2),
  .w-wall-photos > .w-frame:nth-child(4) { transform: none; }
}
@media (max-width: 700px) {
  .w-hero { padding-top: var(--s2); }
  .w-hero-claim { margin-top: var(--s6); }          /* giữ 17ch: ngắt sau "hands," */
  /* CHỈ giấu phần thành phố. Ô nhãn GÓC PHẢI (trạng thái mở cửa) phải hiện ở mọi
     khổ — sáu trang kia đều hiện, giấu riêng trang chủ là sáu trang hai luật. */
  .w-hero-city, .w-page-city { display: none; }
  .w-hero-cta .w-btn { width: 100%; height: 52px; }
  /* tường thành dải cuộn ngang; khung 1 canh lề chữ, lộ mép khung 2 = dấu "còn nữa" */
  .w-wall-photos {
    margin-top: var(--s6);
    display: flex;
    gap: var(--s2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: start;                       /* flex cũng stretch mặc định: đo được 598,2px đều nhau ở cả bốn khung trước khi có dòng này */
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 24px;
    scrollbar-width: none;
  }
  .w-wall-photos::-webkit-scrollbar { display: none; }
  .w-wall-photos > .w-frame { flex: 0 0 72vw; scroll-snap-align: start; }
  .w-wall-photos > .w-frame:nth-child(2),
  .w-wall-photos > .w-frame:nth-child(4) { transform: translateY(24px); }
  .w-facts { grid-template-columns: 1fr; margin-top: var(--s4); }
  .w-fact { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); border-bottom: 1px solid var(--line); }
  .w-fact:last-child { border-bottom: 0; }
  .w-fact .w-label { margin: 0; }
  .w-fact-v { text-align: right; }
}

/* ===== ĐẦU TRANG PHỤ — sáu trang không phải trang chủ =====
   Cùng nhịp với hero: hàng nhãn có kẻ dưới, rồi tít, rồi một dòng dẫn. KHÔNG nền
   màu, không băng-rôn — trang chủ đã là "tường", các trang con cũng vậy. */
.w-page {
  padding-top: var(--s4);
  padding-bottom: var(--s8);
}
.w-page-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  min-height: 24px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.w-page-label .w-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-page h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--s8);
  max-width: 17ch;
}
.w-page-sub { margin-top: var(--s3); max-width: 52ch; }
@media (max-width: 700px) {
  .w-page h1 { margin-top: var(--s6); }
}

/* ===== BẢNG HÀNG — dùng ở price list, hours, rewards ===== */
.w-row {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: 12px 4px;
  margin: 0 -4px;
  border-top: 1px solid var(--line);
  transition: background-color 200ms;
}
.w-row:hover { background: var(--wash); }
.w-lead { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 24px; }

/* ===== LIGHTBOX (Gallery) — nền SÁNG, không phải hố đen ===== */
.w-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  overflow: auto;
  padding: var(--s3) var(--pad) var(--s8);
}
.w-lb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s6);
}
.w-lb-nav { display: flex; align-items: center; gap: var(--s3); }
.w-lb-nav button { min-height: 44px; padding: 0 8px; margin: 0 -8px; }
.w-lb-nav button[disabled] { opacity: .35; cursor: default; }
.w-lb-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  max-width: var(--container);
  margin-inline: auto;
}
.w-lb-fig { grid-column: 1 / span 7; }
.w-lb-side { grid-column: 9 / span 4; }
.w-lb-side dl { margin-top: var(--s4); }
.w-lb-side dt { margin-top: var(--s3); }
.w-lb-side dd { font-size: var(--fs-body); color: var(--ink); }
.w-lb-side .w-btn { margin-top: var(--s6); width: 100%; }
@media (max-width: 1100px) {
  .w-lb-fig, .w-lb-side { grid-column: 1 / -1; }
  .w-lb-side { margin-top: var(--s4); }
}

/* ===== BÀI VIẾT (About) ===== */
.w-article { max-width: 62ch; }
.w-article p + p { margin-top: var(--s3); }
.w-article-lead {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.5;
  color: var(--ink);
}
.w-drop::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: .82;
  padding: 0 .08em 0 0;
  color: var(--brand-ink);
}

/* ===== INDEX — mục lục ba lối vào ===== */
.w-index { border-top: 1px solid var(--line); }
.w-index-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: baseline;
  min-height: 96px;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.w-index-n { grid-column: 1; }
.w-index-name { grid-column: 2 / span 5; transition: color 200ms; }
.w-index-desc { grid-column: 7 / span 5; }
.w-index-go { grid-column: 12; text-align: right; transition: color 200ms; }
.w-index-row:hover .w-index-name { color: var(--brand-ink); }
.w-index-row:hover .w-index-go { color: var(--brand-ink); }
@media (max-width: 700px) {
  .w-index-row { display: block; min-height: 0; padding: var(--s3) 0; }
  .w-index-n { display: block; margin-bottom: var(--s1); }
  .w-index-name { display: block; }
  .w-index-desc { display: block; margin-top: var(--s1); }
  .w-index-go { display: block; text-align: left; margin-top: var(--s2); }
  .w-index-row:hover .w-index-name { color: inherit; }
}

/* ===== PRICE LIST — thực đơn ===== */
.w-menu {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s6);
}
.w-menu-col { display: grid; row-gap: var(--s6); }
.w-menu-col:first-child { grid-column: 1 / span 5; }
.w-menu-col:last-child  { grid-column: 7 / span 5; }
.w-menu-group h3 { font-style: italic; margin-bottom: var(--s2); }
.w-menu-row {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  min-height: 40px;
  padding: 6px 4px;
  margin: 0 -4px;
  transition: background-color 200ms;
}
.w-menu-row:hover { background: var(--wash); }
.w-menu-name { color: var(--ink); }
.w-menu-dur { display: block; margin-top: 2px; }
.w-menu-lead { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 24px; }
.w-menu-price { font-size: var(--fs-price); font-weight: 500; color: var(--ink); white-space: nowrap; }
.w-menu-price .from { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-right: 6px; }
.w-menu-note { margin-top: var(--s4); }
@media (max-width: 1100px) {
  .w-menu-col:first-child, .w-menu-col:last-child { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .w-menu-col { row-gap: var(--s4); }
  .w-menu-row { min-height: 44px; }
}

/* ===== INTERLUDE + IN NUMBERS ===== */
.w-interlude { margin-bottom: var(--s12); }
.w-numbers {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.w-numbers.two > .w-stat:nth-child(1) { grid-column: 1 / span 5; }
.w-numbers.two > .w-stat:nth-child(2) { grid-column: 7 / span 5; }
.w-stat:nth-child(1) { grid-column: 1 / span 3; }
.w-stat:nth-child(2) { grid-column: 5 / span 3; }
.w-stat:nth-child(3) { grid-column: 9 / span 3; }
.w-stat-label { display: block; margin-top: var(--s1); font-size: var(--fs-body2); color: var(--ink-2); max-width: 22ch; }
.w-reasons {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
.w-reasons ol { list-style: none; }
.w-reasons ol:first-child { grid-column: 1 / span 5; }
.w-reasons ol:last-child  { grid-column: 7 / span 5; }
.w-reason { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--s2); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.w-reason-n { color: var(--brand-ink); font-weight: 500; font-size: var(--fs-label); letter-spacing: 0.14em; padding-top: 4px; }
.w-reason-t { font-weight: 500; color: var(--ink); }
.w-reason-d { margin-top: 4px; }
.w-lede { max-width: 62ch; }
@media (max-width: 1100px) {
  .w-numbers.two > .w-stat:nth-child(1), .w-numbers.two > .w-stat:nth-child(2),
  .w-stat:nth-child(1), .w-stat:nth-child(2), .w-stat:nth-child(3) { grid-column: 1 / -1; }
  .w-stat + .w-stat { margin-top: var(--s4); }
  .w-reasons ol:first-child, .w-reasons ol:last-child { grid-column: 1 / -1; }
}

/* ===== VISIT ===== */
.w-visit-addr { white-space: pre-line; }
.w-visit-links { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s3); }
.w-visit .w-btn { margin-top: var(--s4); }
.w-hours { border-top: 1px solid var(--line); }
.w-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  height: 40px;
  padding: 0 4px;
  margin: 0 -4px;
  border-bottom: 1px solid var(--line);
}
.w-hours-row.today { background: var(--wash); color: var(--brand-ink); }
.w-hours-row.today .w-hours-day, .w-hours-row.today .w-hours-time { color: var(--brand-ink); }
.w-hours-day { color: var(--ink); }
.w-hours-day .w-label { margin-left: var(--s2); color: inherit; }
.w-hours-time { white-space: nowrap; color: var(--ink); }
.w-hours-time.closed { color: var(--ink-2); }
.w-hours-note { margin-top: var(--s2); }
@media (max-width: 1100px) {
  .w-visit .c-7-12 { margin-top: var(--s6); }
}

/* ===== PROMO (giữ tính năng, gỡ trang trí) ===== */
.promo-banner-home { display: none; }
.promo-banner-home.active {
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--wash);
  padding: var(--s2) var(--pad);
  text-align: center;
  font-size: var(--fs-body2);
  color: var(--ink);
}
.promo-banner-home a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: .18em; margin-left: var(--s2); }
.promo-popup-overlay { position: fixed; inset: 0; background: rgba(32,24,24,.45); z-index: 300; display: flex; align-items: center; justify-content: center; padding: var(--pad); }
.promo-popup-content { position: relative; background: var(--bg); border: 1px solid var(--line); max-width: 520px; width: 100%; max-height: 88vh; max-height: 88dvh; overflow: auto;   /* vh trước: Safari < 15.4 bỏ qua dvh */ padding: var(--s4); }
.promo-popup-close { position: absolute; top: var(--s2); right: var(--s2); font-family: var(--font-body); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.promo-popup-close:hover { color: var(--ink); }
.promo-popup-text img { width: 100%; margin-bottom: var(--s2); }
.promo-popup-text h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); margin-bottom: var(--s1); }
.promo-popup-text p { color: var(--ink-2); font-size: var(--fs-body2); }
.promo-popup-text + .promo-popup-text { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }

/* ===== NAV ===== */
.w-top { height: 2px; background: var(--brand); }
/* CHÍNH div bọc phải dính: sticky chỉ dính trong phạm vi khối CHA, mà [data-wall-nav]
   cao đúng 66px (vạch 2px + nav 64px) — cuộn qua 66px là nav trôi mất và luật
   .w-nav.scrolled không bao giờ hiện. */
[data-wall-nav] { position: sticky; top: 0; z-index: 100; }
.w-nav {
  height: var(--nav-h);
  background: var(--bg);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.w-nav.scrolled { border-bottom-color: var(--line); }
.w-nav-in {
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.w-nav-brand { font-family: var(--font-display); font-size: 22px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.w-nav-brand img { height: 28px; width: auto; }
.w-nav-tabs { display: flex; gap: var(--s4); margin-inline: auto; list-style: none; }
.w-nav-tabs a { text-decoration: none; padding-bottom: 6px; border-bottom: 1px solid transparent; transition: color 200ms; }
.w-nav-tabs a:hover { color: var(--ink); }
.w-nav-tabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.w-nav-actions { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.w-nav-actions .w-label { text-decoration: none; }
.w-nav-actions .w-label:hover { color: var(--ink); }
.w-menu-toggle { display: none; }
@media (max-width: 1100px) {
  .w-nav-tabs { display: none; }
  .w-nav-actions > a.w-label { display: none; }
  .w-menu-toggle { display: inline-block; padding: 6px 0; }
}
@media (max-width: 700px) {
  /* 390px: tên tiệm 22px + nút + "Menu" + hai khoảng 32px = tràn, chữ Menu bị cắt.
     Tên co còn 18px và được cắt bằng dấu … khi quá dài; nút gọn lại; khoảng 16px. */
  .w-nav-in { gap: var(--s2); }
  .w-nav-brand { font-size: var(--fs-h3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .w-nav-actions { gap: var(--s2); flex-shrink: 0; }
  /* Vùng chạm iOS 44px: nút chữ "Menu"/"Close" và các link trong lớp phủ vốn chỉ cao
     bằng chữ 11-13px. Nới bằng padding + margin âm nên bố cục không xê dịch. */
  .w-btn.sm { height: 44px; padding: 0 14px; }
  .w-menu-toggle, [data-wall-close] { min-height: 44px; padding: 0 8px; margin: 0 -8px; }
  .w-overlay-foot a.w-label { padding-block: var(--s2); }
}

/* lớp phủ menu — chữ đánh số, hairline */
.w-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  overflow: auto;
  padding: var(--s3) var(--pad) var(--s6);
}
.w-overlay-head { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); }
.w-overlay ol { list-style: none; margin-top: var(--s4); border-top: 1px solid var(--line); }
.w-overlay li { border-bottom: 1px solid var(--line); }
.w-overlay li a {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  padding: var(--s2) 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--ink);
}
.w-overlay li a .w-wall-n { padding-top: 6px; }
.w-overlay-foot { margin-top: var(--s4); display: grid; row-gap: var(--s2); }
.w-overlay-foot .w-btn { width: 100%; height: 52px; }

/* ===== DẢI BOOK + FOOTER — một khối ===== */
.w-band {
  background: var(--shade);
  color: var(--bg);
  border-top: 1px solid var(--brand);   /* điểm màu duy nhất trong khối */
}
.w-band-in {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s8) var(--pad);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.w-band-in .w-h2 { grid-column: 1 / span 7; color: var(--bg); }
.w-band-cta { grid-column: 9 / span 4; display: flex; justify-content: flex-end; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.w-band-cta a.w-label { color: var(--bg); opacity: .85; text-decoration: underline; text-underline-offset: .18em; }
.w-foot {
  background: var(--shade);
  color: var(--bg);
}
.w-foot-in {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s6) var(--pad) var(--s6);
  border-top: 1px solid rgba(255,255,255,.2);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s4);
}
.w-foot-in > div:nth-child(1) { grid-column: 1 / span 3; }
.w-foot-in > div:nth-child(2) { grid-column: 4 / span 3; }
.w-foot-in > div:nth-child(3) { grid-column: 7 / span 3; }
.w-foot-in > div:nth-child(4) { grid-column: 10 / span 3; }
.w-foot .w-label { color: var(--bg); opacity: .7; display: block; margin-bottom: var(--s2); }
.w-foot .w-h3 { color: var(--bg); }
.w-foot p, .w-foot li { color: var(--bg); opacity: .85; font-size: var(--fs-body2); line-height: 1.7; }
.w-foot ul { list-style: none; }
.w-foot a { color: var(--bg); text-decoration: none; }
.w-foot a:hover { text-decoration: underline; text-underline-offset: .18em; }
.w-foot-end {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s3) var(--pad) var(--s4);
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
}
.w-foot-end .w-label { margin: 0; opacity: .7; }
@media (max-width: 1100px) {
  .w-band-in .w-h2 { grid-column: 1 / -1; }
  .w-band-cta { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--s3); }
  .w-foot-in > div:nth-child(1), .w-foot-in > div:nth-child(2) { grid-column: span 6; }
  .w-foot-in > div:nth-child(3), .w-foot-in > div:nth-child(4) { grid-column: span 6; }
}
@media (max-width: 700px) {
  .w-band-cta .w-btn { width: 100%; height: 52px; }
  .w-foot-in > div { grid-column: 1 / -1 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}