@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   JEJU COFFEE VĨNH YÊN

   Hệ thống dựng trên ba ràng buộc, không có số lẻ nào nằm ngoài thang:
     · Thang khoảng cách  — mọi giá trị là bội số của 4px
     · Thang chữ          — 17 bậc token, không cỡ chữ nào viết thẳng
     · Bảng màu           — 1 màu nhấn + trung tính, mọi cặp chữ/nền đạt AA 4,5:1

   Ba hoạ tiết rút thẳng từ công trình, dùng lặp lại để cả trang thành một bộ:
     · VÒM     — .frame--arch và nét vòm lớn ở chương "Chỗ ngồi"
     · MÁI NGÓI — dải vảy .intro::before / .foot::before
     · VÂN XOÁY — vòng tròn đồng tâm sau chương "Trăng"

   Vùng chạm tối thiểu 44px. Ô nhập liệu 16px để iOS không tự phóng to trang.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Màu ────────────────────────────────────────────────────────────
     Rút từ ảnh chụp quán. Tỷ lệ tương phản ghi kèm để không phá khi sửa. */
  --clay:#C4693C;      /* vòm đất nung — CHỈ dùng cho mảng lớn, chữ to */
  --ember:#9E4A24;     /* đất nung đậm — chữ nhỏ, nút. 5,22:1 trên kem · 4,68:1 trên giấy */
  --cream:#F4EDE1;     /* tường kem — nền chính */
  --paper:#EAE1D0;     /* nền phụ */
  --sand:#DCCFB8;      /* nền chờ phía sau ảnh, tránh chớp trắng */
  --ink:#221A13;       /* gỗ sẫm — chữ chính. 13,2:1 */
  --ink-soft:#6A5B4C;  /* chữ phụ. 5,03:1 */
  --ink-faint:#6E6152; /* nhãn, chú thích. 4,63:1 */
  --night:#12100D;     /* nền tối */
  --night-2:#1B1712;   /* mặt phẳng nổi trên nền tối */
  --fern:#33492F;      /* nền chương lý do */
  --glow:#EFC077;      /* ánh đèn mây — chỉ trên nền tối. 11,3:1 */
  --leaf:#6E9B62;      /* báo đang mở cửa */
  --tile:#6C7278;      /* xám ngói — CHỈ cho hoạ tiết, 4,18:1 nên không dùng cho chữ */

  /* nét kẻ: gom về token để không rải color-mix khắp nơi */
  --line:color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft:color-mix(in srgb, var(--ink) 8%, transparent);
  --line-firm:color-mix(in srgb, var(--ink) 26%, transparent);
  --line-dark:rgba(244,237,225,.18);

  /* ── Chữ ──────────────────────────────────────────────────────────── */
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --t-micro:.75rem;                                        /* 12 — nhãn hoa dãn */
  --t-label:.8125rem;                                      /* 13 — nút, điều hướng */
  --t-small:.9375rem;                                      /* 15 — thực đơn, chú thích dài */
  --t-input:1rem;                                          /* 16 — BẮT BUỘC, dưới mức này iOS tự phóng to trang */
  --t-body:clamp(1rem, .96rem + .18vw, 1.0625rem);         /* 16→17 */
  --t-lead:clamp(1.125rem, 1.02rem + .42vw, 1.3125rem);    /* 18→21 */
  --t-h3:clamp(1.3125rem, 1.1rem + .8vw, 1.625rem);        /* 21→26 */
  --t-h2s:clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem);         /* 24→38 */
  --t-h2:clamp(1.875rem, 1.25rem + 2.5vw, 3.25rem);        /* 30→52 */
  --t-quote:clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);       /* 28→52 */
  --t-h1:clamp(2.75rem, 1.2rem + 5.4vw, 5.5rem);           /* 44→88 */
  --t-lede:clamp(1.625rem, .8rem + 2.4vw, 3rem);           /* 26→48 câu tuyên bố */
  --t-sheet:clamp(1.5rem, 6.4vw, 2.25rem);                 /* 24→36 menu di động */
  --t-numeral:clamp(2rem, 1.2rem + 2.6vw, 3.25rem);        /* 32→52 số thứ tự chỗ ngồi */
  --t-star:.625rem;                                        /* 10 dấu ★ */
  --t-logo-sm:1.375rem;                                    /* 22 mác trên thanh */
  --t-logo-lg:1.75rem;                                     /* 28 mác chân trang */

  /* ── Khoảng cách, bội số 4px ──────────────────────────────────────── */
  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:3rem;    --s8:4rem;
  --s9:6rem;    --s10:8rem;

  --pad:clamp(1.25rem, 4.5vw, 4.5rem);   /* lề trang */
  --gap:clamp(1rem, 2.6vw, 2.5rem);      /* khe giữa cột */
  --bay:clamp(4rem, 11vw, 10rem);        /* nghỉ giữa các chương */
  --card:clamp(1.5rem, 3.4vw, 3rem);     /* đệm trong thẻ, dùng chung */
  --max:1500px;
  --tap:44px;                            /* vùng chạm tối thiểu */

  /* hoạ tiết vòm — bán kính dùng lại cho ảnh và nét trang trí */
  --arch:50% 50% 0 0 / 32% 32% 0 0;

  /* Nét mực vẽ tay. Dùng làm MASK chứ không phải background, nhờ vậy nó ăn theo
     currentColor của chỗ đặt — một nét kẻ dùng được cho cả nền sáng lẫn nền tối,
     không phải khai hai bản màu. Điểm đầu và điểm cuối đặt cùng cao độ 3.2 để
     khi lặp ngang không lộ mối nối. */
  --ink-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='6' viewBox='0 0 132 6'%3E%3Cpath d='M0 3.2C16 1.8 30 4.6 46 3.1 62 1.7 76 4.7 92 3.3 106 2.1 118 4.2 132 3.2' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round'/%3E%3C/svg%3E");

  --ease:cubic-bezier(.19,1,.22,1);
  --slow:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:var(--t-body); line-height:1.72;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body.lock{ overflow:hidden; }

img,iframe{ display:block; max-width:100%; }
img{ height:auto; background:var(--sand); }   /* nền chờ, không chớp trắng khi ảnh đang tải */
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol,address{ margin:0; }
ul,ol{ padding:0; list-style:none; }
address{ font-style:normal; }
::selection{ background:var(--ember); color:var(--cream); }

/* Vòng focus hai lớp: viền đậm + quầng sáng, nên hiện rõ trên cả nền sáng lẫn tối */
:focus-visible{
  outline:2px solid var(--ember); outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--glow) 55%, transparent);
  border-radius:2px;
}

.skip{ position:fixed; top:-80px; left:var(--s4); z-index:999;
  background:var(--ink); color:var(--cream);
  padding:var(--s3) var(--s4); border-radius:2px; font-size:var(--t-label); }
.skip:focus{ top:var(--s4); }

/* ── hạt phim ───────────────────────────────────────────────────────── */
.noise-defs{ position:absolute; width:0; height:0; }
.noise{ position:fixed; inset:-40%; z-index:800; pointer-events:none;
  filter:url(#nz); opacity:.03; mix-blend-mode:multiply; }
@media (prefers-reduced-motion:reduce){ .noise{ display:none; } }

/* ── quả cầu trăng dựng bằng CSS ───────────────────────────────────────
   Quán có một mặt trăng thật ở trong nhà, nên trang mở ra và khép lại bằng
   chính nó — không phải một cái đĩa tròn tô màu, mà một khối cầu.

   Ba lớp, và cần đủ cả ba mới ra khối:
     · nền        — màu đá mặt trăng
     · ::before   — bề mặt có hố, vẽ trên một dải rộng gấp đôi khung. Trượt dải
                    này sang ngang là quả cầu quay. Đây là chỗ khác nhau giữa
                    một khối cầu quay và một cái đĩa xoay: bề mặt chạy qua,
                    còn vùng sáng thì đứng yên.
     · ::after    — nguồn sáng đứng yên: quầng sáng lệch trên trái, bóng đổ
                    lõm vào ở dưới phải. Lớp này không bao giờ quay.
   --orb đặt cỡ, mọi số đo khác tính theo nó nên đổi một chỗ là đổi cả quả cầu. */
/* display:block là bắt buộc — thẻ <i> mặc định là inline, mà inline thì bỏ qua
   width và aspect-ratio, nên quả cầu biến mất hoàn toàn ở chân trang */
.orb{ display:block; position:relative; flex:none; width:var(--orb, 64px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  /* quả cầu này là một cái ĐÈN, không phải một hòn đá: nền phải sáng lên từ
     bên trong, nếu để màu đá xám thì nó rơi ra khỏi bảng màu ấm của cả trang */
  background:radial-gradient(circle at 34% 30%, #FFF4DF 0%, #F0DCB4 42%, #D8B87E 100%);
  box-shadow:0 0 calc(var(--orb, 64px) * 1.1) calc(var(--orb, 64px) * -.1) rgba(239,192,119,.62),
             0 0 calc(var(--orb, 64px) * .3) rgba(239,192,119,.28); }
.orb::before,.orb::after{ content:""; position:absolute; inset:0; border-radius:50%; }
.orb::before{
  background-image:
    radial-gradient(circle at 11% 34%, rgba(150,113,64,.26) 0 2.2%, transparent 2.6%),
    radial-gradient(circle at 19% 62%, rgba(150,113,64,.21) 0 1.5%, transparent 1.9%),
    radial-gradient(circle at 27% 22%, rgba(150,113,64,.19) 0 1.1%, transparent 1.5%),
    radial-gradient(circle at 34% 71%, rgba(150,113,64,.24) 0 2.6%, transparent 3%),
    radial-gradient(circle at 41% 44%, rgba(150,113,64,.16) 0 1.3%, transparent 1.7%),
    radial-gradient(circle at 52% 18%, rgba(150,113,64,.22) 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 58% 58%, rgba(150,113,64,.19) 0 2.2%, transparent 2.6%),
    radial-gradient(circle at 67% 33%, rgba(150,113,64,.26) 0 1.4%, transparent 1.8%),
    radial-gradient(circle at 74% 76%, rgba(150,113,64,.18) 0 1.9%, transparent 2.3%),
    radial-gradient(circle at 83% 47%, rgba(150,113,64,.23) 0 2.4%, transparent 2.8%),
    radial-gradient(circle at 91% 26%, rgba(150,113,64,.16) 0 1.2%, transparent 1.6%),
    /* biển tối — mảng lớn nhoè, thứ làm bề mặt không đều màu */
    radial-gradient(ellipse 22% 30% at 24% 48%, rgba(160,120,66,.20), transparent 70%),
    radial-gradient(ellipse 18% 24% at 63% 66%, rgba(160,120,66,.17), transparent 70%),
    radial-gradient(ellipse 15% 20% at 86% 38%, rgba(160,120,66,.15), transparent 70%);
  background-size:200% 100%;
  background-position:calc(var(--spin, 0) * -200%) 0; }
.orb::after{
  background:radial-gradient(circle at 31% 27%, rgba(255,252,244,.62), rgba(255,252,244,0) 50%);
  box-shadow:
    inset calc(var(--orb, 64px) * -.19) calc(var(--orb, 64px) * -.18) calc(var(--orb, 64px) * .34) rgba(83,55,22,.5),
    inset calc(var(--orb, 64px) * .05) calc(var(--orb, 64px) * .06) calc(var(--orb, 64px) * .18) rgba(255,248,232,.32); }

/* ── màn mở: một mặt trăng mọc lên rồi tắt ──────────────────────────── */
.boot{ position:fixed; inset:0; z-index:900; background:var(--night);
  display:grid; place-content:center; justify-items:center; gap:var(--s5);
  transition:opacity .7s var(--ease), visibility .7s; }
.boot.gone{ opacity:0; visibility:hidden; }
.boot__moon{ --orb:76px; animation:moonRise 1.4s var(--ease) both; }
/* quay bằng background-position chứ không bằng biến --spin: biến tuỳ biến chỉ
   nội suy được khi đã khai báo @property, còn cách này chạy ở mọi trình duyệt */
.boot__moon::before{ animation:moonTurn 2.6s linear both; }
@keyframes moonRise{ from{ opacity:0; transform:translateY(32px) scale(.7); } to{ opacity:1; transform:none; } }
@keyframes moonTurn{ from{ background-position:6% 0; } to{ background-position:-34% 0; } }
.boot span{ font-family:var(--serif); font-size:var(--t-h3); color:var(--glow);
  letter-spacing:.32em; text-indent:.32em; animation:bootIn 1.1s var(--ease) both; }
@keyframes bootIn{ from{ opacity:0; letter-spacing:.62em; } to{ opacity:1; letter-spacing:.32em; } }

/* ── chữ dùng lại ───────────────────────────────────────────────────── */
.kicker{ font-size:var(--t-micro); letter-spacing:.26em; text-transform:uppercase;
  font-weight:500; color:var(--ember); margin-bottom:var(--s4);
  display:flex; align-items:center; gap:var(--s3); }
/* nét sau nhãn chương là nét mực có run tay, không phải một pixel kẻ thẳng */
.kicker::after{ content:""; flex:1; max-width:72px; height:6px;
  background:currentColor; opacity:.55;
  -webkit-mask:var(--ink-rule) no-repeat left center / 100% 6px;
          mask:var(--ink-rule) no-repeat left center / 100% 6px; }

h1,h2,h3,.lede{ font-family:var(--serif); font-weight:300; letter-spacing:-.015em; }
h2{ font-size:var(--t-h2); line-height:1.04; text-wrap:balance; }
h3{ font-size:var(--t-h3); line-height:1.2; }
.it{ font-style:italic; color:var(--clay); }
.note{ font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-top:var(--s5); }

.rise{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rise.in{ opacity:1; transform:none; }
/* Một kiểu hiện KHÁC, và cố ý chỉ dùng đúng một chỗ (ảnh ly nước ở chương thực
   đơn). Cả trang cùng một kiểu hiện lên là thứ khiến nó trông như dựng bằng
   khuôn; một chương có nhịp riêng thì đọc ra là có người chọn. */
.wipe{ clip-path:inset(100% 0 0 0); transition:clip-path 1.2s var(--ease); }
.wipe.in{ clip-path:inset(0 0 0 0); }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; }
  .wipe{ clip-path:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── khung ảnh: cắt ảnh, và là chỗ duy nhất ảnh được phép nhích ─────── */
.frame{ display:block; overflow:hidden; background:var(--sand); }
.frame img{ transition:transform 1.4s var(--ease); }
figure:hover .frame img{ transform:scale(1.035); }
/* Khung vòm không còn là ảnh bo góc, mà là một Ô HÕM khoét vào tường: bóng đổ
   vào lòng khung làm mép vòm có bề dày, nên mắt đọc ra một lối mở để nhìn xuyên
   qua — đúng vai trò của cái vòm trong công trình. */
.frame--arch{ border-radius:var(--arch); position:relative; }
.frame--arch::after{ content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 34px 2px rgba(34,26,19,.34),
             inset 0 18px 30px -14px rgba(34,26,19,.6); }
@media (prefers-reduced-motion:reduce){ figure:hover .frame img{ transform:none; } }

/* ── dải vảy mái ngói ───────────────────────────────────────────────── */
.intro::before,.foot::before{
  content:""; position:absolute; left:0; right:0; top:0; height:9px;
  background-repeat:repeat-x; background-position:center top; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M0 0C0 8 26 8 26 0' fill='none' stroke='%236C7278' stroke-width='1'/%3E%3C/svg%3E"); }
.foot::before{ opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cpath d='M0 0C0 8 26 8 26 0' fill='none' stroke='%23EFC077' stroke-width='1'/%3E%3C/svg%3E"); }

.btn{ display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:var(--s3) var(--s6); border-radius:2px;
  font-size:var(--t-label); font-weight:500; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ember); color:var(--cream); border:1px solid var(--ember);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.btn:hover{ background:var(--ink); border-color:var(--ink); }
.btn--line{ background:transparent; color:inherit; border-color:currentColor; opacity:.72; }
.btn--line:hover{ background:var(--ink); border-color:var(--ink); color:var(--cream); opacity:1; }
.btn--full{ width:100%; }
/* trên ảnh hero: nền kem đặc để chữ đạt tương phản bất kể ảnh phía sau */
.btn--glow{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.btn--glow:hover{ background:var(--glow); border-color:var(--glow); color:var(--night); }
.btn--ghost{ background:rgba(10,8,6,.34); color:var(--cream); border-color:rgba(244,237,225,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn--ghost:hover{ background:var(--cream); border-color:var(--cream); color:var(--ink); }

/* huy hiệu đang mở cửa */
.live{ display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-label); letter-spacing:.02em; white-space:nowrap; }
.live i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; flex:none; }
.live.is-open i{ background:var(--leaf); opacity:1; box-shadow:0 0 0 0 rgba(110,155,98,.6); animation:beat 2.6s infinite; }
.live.is-shut i{ background:var(--clay); opacity:1; }
@keyframes beat{ 70%{ box-shadow:0 0 0 8px rgba(110,155,98,0); } 100%{ box-shadow:0 0 0 0 rgba(110,155,98,0); } }
.live--sm{ font-size:var(--t-micro); margin-left:var(--s2); }

figcaption{ margin-top:var(--s3); font-size:var(--t-micro); letter-spacing:.02em; color:var(--ink-faint); }

/* ═══════════════ THANH TRÊN ═══════════════ */
.bar{ position:fixed; inset:0 0 auto; z-index:700;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s3) var(--pad);
  color:var(--cream);
  transition:transform .5s var(--ease), color .4s var(--ease);
  text-shadow:0 1px 14px rgba(8,6,4,.6); }
.bar.solid{ color:var(--ink); text-shadow:none;
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 9%, transparent); }
.bar.up{ transform:translateY(-105%); }

/* vạch tiến độ cuộn — chỉ hiện khi thanh đã đặc, để không đè lên ảnh hero */
.bar__prog{ position:absolute; left:0; bottom:0; height:2px; width:100%;
  transform:scaleX(var(--p,0)); transform-origin:left;
  background:var(--ember); opacity:0; transition:opacity .4s; }
.bar.solid .bar__prog{ opacity:.9; }

.bar__logo{ display:flex; align-items:center; gap:var(--s3); min-height:var(--tap); }
/* Huy hiệu thật của quán. Lòng huy hiệu gần trắng nên trên thanh nền kem nó gần
   như tan vào nền — vòng viền mảnh này là thứ tách nó ra. Trên nền ảnh tối thì
   viền không nhìn thấy, mà lúc đó cũng không cần. */
.bar__mark{ width:34px; height:34px; flex:none; border-radius:50%; }
.bar.solid .bar__mark{ box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
/* Đo ở khổ 390px: huy hiệu + 제주 + JEJU COFFEE chiếm 206px, cộng nút ngôn ngữ
   và nút menu 118px, cộng khe 24px và lề 40px là 388px — dư đúng 2px. Phải bỏ
   bớt một thứ. Bỏ 제주 chứ không bỏ chữ Latin: ở cỡ 34px thì dòng "Jeju COFFEE"
   trong lòng huy hiệu không đọc được, nên nếu bỏ luôn chữ Latin thì khách mở
   web bằng điện thoại không còn chỗ nào đọc ra tên quán. */
@media (max-width:420px){
  .bar__ko{ display:none; }
  /* khe 24px giữa mác và nhóm nút là quá rộng khi chỉ còn 320px bề ngang */
  .bar{ gap:var(--s3); }
}
.bar__ko{ font-family:var(--serif); font-size:var(--t-logo-sm); line-height:1; }
/* nowrap là bắt buộc: chữ có giãn cách 0,24em nên ở khổ 320px nó xuống hai dòng,
   đội thanh trên cao lên và mác quán trông như bị vỡ */
.bar__en{ font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase;
  opacity:.85; white-space:nowrap; }
/* đệm ngang thay cho khe: nhãn ngắn như "Vòm", "Ghé" vẫn đủ 44px bề ngang */
.bar__nav{ display:flex; gap:clamp(var(--s1), .9vw, var(--s3)); }
.bar__nav a{ font-size:var(--t-label); opacity:.82; position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); min-width:var(--tap); padding-inline:var(--s3);
  transition:opacity .3s; }
.bar__nav a::after{ content:""; position:absolute; left:var(--s3); right:var(--s3);
  bottom:calc(50% - .9em); height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.bar__nav a:hover{ opacity:1; }
.bar__nav a:hover::after,.bar__nav a.here::after{ transform:scaleX(1); transform-origin:left; }
.bar__nav a.here{ opacity:1; }
@media (max-width:1060px){ .bar__nav{ display:none; } }

.bar__end{ display:flex; align-items:center; gap:var(--s2); }
.bar__book{ display:inline-flex; align-items:center; min-height:var(--tap);
  padding-inline:var(--s4); border:1px solid currentColor; border-radius:2px;
  font-size:var(--t-label); letter-spacing:.09em; text-transform:uppercase;
  opacity:.85; transition:background .4s var(--ease), color .4s var(--ease), opacity .3s; }
.bar__book:hover{ opacity:1; background:var(--ember); border-color:var(--ember); color:var(--cream); }
@media (max-width:1060px){ .bar__book{ display:none; } }

.lang{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);
  min-width:var(--tap); min-height:var(--tap); padding-inline:var(--s2);
  font-size:var(--t-micro); letter-spacing:.14em; }
.lang span{ opacity:.5; transition:opacity .3s; }
.lang span.on{ opacity:1; }
.lang i{ opacity:.35; font-style:normal; }

.burger{ display:none; width:var(--tap); height:var(--tap); position:relative; }
.burger i{ position:absolute; left:calc(50% - 13px); width:26px; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease), opacity .25s; }
.burger i:nth-child(1){ top:calc(50% - 7px); }
.burger i:nth-child(2){ top:50%; }
.burger i:nth-child(3){ top:calc(50% + 7px); }
.burger.on i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.on i:nth-child(2){ opacity:0; }
.burger.on i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:1060px){ .burger{ display:block; } }

.sheet{ position:fixed; inset:0; z-index:690; background:var(--night); color:var(--cream);
  display:flex; flex-direction:column; gap:var(--s6); padding:var(--s9) var(--pad) var(--s7);
  clip-path:circle(0% at 100% 0); transition:clip-path .8s var(--ease); visibility:hidden;
  overflow-y:auto; }
/* margin auto thay cho justify-content:center — màn hình thấp vẫn cuộn tới được đầu danh sách */
.sheet nav{ margin-top:auto; } .sheet__foot{ margin-bottom:auto; }
.sheet::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 82% 12%, rgba(239,192,119,.14), transparent 70%); }
.sheet.is-open{ clip-path:circle(150% at 100% 0); visibility:visible; }
.sheet nav{ display:grid; position:relative; }
.sheet nav a{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  font-family:var(--serif); font-size:var(--t-sheet); line-height:1.1;
  padding-block:var(--s3); border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(16px); }
.sheet.is-open nav a{ animation:sheetIn .6s var(--ease) forwards; }
.sheet.is-open nav a:nth-child(1){ animation-delay:.18s } .sheet.is-open nav a:nth-child(2){ animation-delay:.23s }
.sheet.is-open nav a:nth-child(3){ animation-delay:.28s } .sheet.is-open nav a:nth-child(4){ animation-delay:.33s }
.sheet.is-open nav a:nth-child(5){ animation-delay:.38s } .sheet.is-open nav a:nth-child(6){ animation-delay:.43s }
.sheet.is-open nav a:nth-child(7){ animation-delay:.48s }
@keyframes sheetIn{ to{ opacity:1; transform:none; } }
.sheet nav em{ font-family:var(--sans); font-style:normal; font-size:var(--t-micro);
  letter-spacing:.2em; color:var(--glow); }
.sheet__foot{ font-size:var(--t-label); color:rgba(244,237,225,.66); position:relative; }
/* số điện thoại trong menu di động cũng phải đủ 44px để bấm. Dùng gạch chân
   chứ không dùng border-bottom, vì hộp chạm cao 44px sẽ đẩy đường viền rơi
   xuống xa chân chữ — cùng cách đã xử lý ở phần hỏi đáp và cuối thực đơn. */
.sheet__foot a{ display:inline-flex; align-items:center; min-height:var(--tap);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  text-decoration-color:rgba(244,237,225,.45); }

/* ═══════════════ MỞ ĐẦU ═══════════════ */
.hero{ position:relative; min-height:100svh; display:grid;
  grid-template-rows:1fr auto; align-content:end;
  padding:var(--s9) var(--pad) var(--s5);
  color:var(--cream); overflow:hidden; isolation:isolate; }

/* ── sân khấu ba chiều của chương mở đầu ───────────────────────────────
   --gate chạy 0 → 1 trong đúng một màn hình cuộn đầu tiên (js mục 2).
   Cổng vòm nổi phía trước lướt tới rồi tan; gian phòng phía sau nhích lại gần.
   Cả sân khấu nằm ở z-index -2 nên dù xoay trở thế nào trong không gian ba
   chiều nó vẫn không bao giờ trèo lên trên chữ. */
.hero__stage{ position:absolute; inset:0; z-index:-2;
  perspective:1000px; perspective-origin:38% 46%; transform-style:preserve-3d; }
.hero__bg{ position:absolute; inset:0;
  /* lùi 260px thì phối cảnh thu ảnh còn 0,794 lần, nên phải phóng 1,3 lần mới
     phủ kín khung — đổi một trong hai số thì phải tính lại số kia */
  transform:translateZ(calc(-260px + var(--gate, 0) * 90px)) scale(1.3); }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.06); animation:drift 16s var(--ease) forwards; }
@keyframes drift{ to{ transform:scale(1); } }

/* Cổng: một bức tường tối có lỗ hổng hình vòm. Lỗ hổng là chính phần tử này,
   còn bức tường là cái bóng đổ 100vmax toả ra ngoài nó. */
.hero__gate{ position:absolute; left:50%; top:6%; width:min(76vw, 1020px); height:98%;
  border-radius:var(--arch); pointer-events:none;
  transform:translate(-50%, 0) translateZ(calc(120px + var(--gate, 0) * 300px))
            scale(calc(1 + var(--gate, 0) * .38));
  opacity:calc(1 - var(--gate, 0) * 1.15);
  box-shadow:0 0 0 100vmax rgba(9,7,5,.66), 0 0 90px 40px rgba(9,7,5,.72); }
@media (max-width:760px){ .hero__gate{ width:104vw; top:2%; } }
@media (prefers-reduced-motion:reduce){
  .hero__bg{ transform:translateZ(-260px) scale(1.3); }
  .hero__gate{ transform:translate(-50%,0) translateZ(120px); opacity:1; }
}

.hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,8,6,.72) 0%, rgba(10,8,6,.12) 30%, rgba(10,8,6,.58) 72%, rgba(10,8,6,.9) 100%),
    /* Cột trái phải đủ tối cho nhãn 12px đạt 4,5:1 — đo trên pixel thật, không ước lượng */
    linear-gradient(90deg, rgba(10,8,6,.80) 0%, rgba(10,8,6,.30) 40%, transparent 68%); }

.hero__type{ align-self:end; }
.hero .kicker{ color:var(--glow); }
.hero__h1{ font-size:var(--t-h1); line-height:.92; letter-spacing:-.032em; margin-bottom:var(--s5); }
/* Khe chứa dòng chữ. Đệm trên dưới là bắt buộc: tiếng Việt có dấu trèo lên đỉnh
   chữ (Ẵ) và dấu thụt xuống chân chữ (ặ, ọ), overflow:hidden bó sát sẽ cắt cụt cả hai.
   Âm lề bù lại đúng phần đệm để khoảng cách giữa hai dòng không bị nới ra. */
.hero__h1 i{ display:block; overflow:hidden;
  padding:.16em 0 .2em; margin-block:-.16em -.2em; }
/* Trạng thái ẩn nằm TRONG keyframe, không nằm ở quy tắc gốc. Nếu để gốc là
   translateY(108%) rồi chờ JS gỡ ra, thì hôm nào JS hỏng hoặc bị chặn, tiêu đề
   chính của cả trang nằm mãi dưới khe và không ai đọc được. Cách này: không có
   JS thì chữ hiển thị bình thường, có JS thì chữ trồi lên. */
.hero__h1 span{ display:block; }
.hero.ready .hero__h1 span{ animation:lineUp 1s var(--ease) both; }
.hero.ready .hero__h1 i:nth-child(2) span{ animation-delay:.13s; }
@keyframes lineUp{ from{ transform:translateY(108%); } to{ transform:none; } }
.hero__h1 .it{ color:var(--glow); }
.hero__sub{ font-size:var(--t-lead); max-width:34ch; color:rgba(244,237,225,.88); }
.hero__go{ display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--s2) var(--s5); margin-top:var(--s6); }
/* Việc phụ: chữ thường, không khung, có mũi tên. Nó vẫn cao 44px để bấm được
   trên điện thoại, nhưng không tranh chỗ với nút chính. */
.hero__alt{ display:inline-flex; align-items:center; gap:var(--s2);
  min-height:var(--tap); font-size:var(--t-label);
  color:rgba(244,237,225,.9);
  text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; text-decoration-color:rgba(244,237,225,.4);
  transition:color .3s, text-decoration-color .3s; }
.hero__alt::after{ content:"→"; text-decoration:none;
  transition:transform .4s var(--ease); }
.hero__alt:hover{ color:var(--glow); text-decoration-color:var(--glow); }
.hero__alt:hover::after{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){ .hero__alt:hover::after{ transform:none; } }

.hero__foot{ display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--s3) var(--s5);
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid rgba(244,237,225,.2); }
.hero__facts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4);
  font-size:var(--t-label); color:rgba(244,237,225,.86); }
.hero__facts li{ display:flex; align-items:center; gap:var(--s4); }
.hero__facts li + li::before{ content:""; width:4px; height:4px; border-radius:50%;
  background:var(--glow); opacity:.75; flex:none; }
@media (max-width:520px){ .hero__facts li:last-child{ display:none; } }
.hero__down{ font-size:var(--t-micro); letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:var(--s3); min-height:var(--tap);
  opacity:.85; transition:opacity .3s; }
.hero__down::after{ content:""; width:34px; height:1px; background:currentColor;
  transform-origin:left; animation:pull 2.4s var(--slow) infinite; }
.hero__down:hover{ opacity:1; }
@keyframes pull{ 0%,100%{ transform:scaleX(.35) } 50%{ transform:scaleX(1) } }

/* ═══════════════ LỜI MỞ ═══════════════ */
.intro{ position:relative; padding:var(--bay) var(--pad); background:var(--cream); overflow:hidden; }
.intro__grid{ max-width:var(--max); margin-inline:auto; display:grid; gap:var(--gap);
  grid-template-columns:1fr; align-items:end; }
@media (min-width:900px){ .intro__grid{ grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr); } }
.lede{ font-size:var(--t-lede); line-height:1.12;
  max-width:19ch; margin-bottom:var(--s7); text-wrap:balance; }
.cols{ display:grid; gap:var(--s5); max-width:60ch; }
@media (min-width:680px){ .cols{ grid-template-columns:1fr 1fr; gap:var(--s6); max-width:none; } }
.cols p{ color:var(--ink-soft); }

.ticks{ display:flex; flex-wrap:wrap; gap:var(--s6) clamp(var(--s6), 4vw, var(--s8));
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); }
.ticks li{ display:grid; gap:var(--s1); }
.ticks b{ font-family:var(--serif); font-weight:300; font-size:var(--t-h2s);
  line-height:1; letter-spacing:-.02em; }
.ticks b i{ font-style:normal; color:var(--ember); padding-inline:.1em; }
.ticks span{ font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }

/* ── con dấu ───────────────────────────────────────────────────────────
   Dấu triện đóng cuối lời mở đầu, như người ta ký tên vào cuối một đoạn viết.
   Mép dấu và nét chữ đều được bộ lọc nhiễu làm méo đi một chút, nên nó có vẻ
   của một con dấu khắc tay dập xuống giấy — chỗ ăn mực đậm, chỗ ăn mực nhạt. */
.seal{ display:block; width:64px; height:64px; margin-top:var(--s7);
  transform:rotate(-5deg); opacity:.9; }
@media (min-width:900px){ .seal{ margin-left:auto; margin-right:var(--s7); } }

.intro__pic{ margin-right:calc(var(--pad) * -1); }
@media (min-width:900px){ .intro__pic{ margin-bottom:calc(var(--s7) * -1); } }
.intro__pic img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

/* ═══════════════ VÒM ═══════════════ */
.arch{ padding-block:var(--bay); background:var(--paper); overflow:hidden; }
.arch__pic{ margin-inline:calc(var(--pad) * -1); }
.arch__pic img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (max-width:680px){ .arch__pic img{ aspect-ratio:4/3; } }

.arch__card{ background:var(--cream); padding:var(--card);
  max-width:min(100% - var(--pad)*2, 34rem);
  margin:clamp(-6rem, -7vw, -3rem) auto 0 var(--pad);
  position:relative; z-index:2;
  box-shadow:0 40px 60px -50px rgba(34,26,19,.5); }
@media (min-width:900px){ .arch__card{ margin-left:clamp(var(--pad), 8vw, 9rem); } }
.arch__card h2{ font-size:var(--t-h2s); margin-bottom:var(--s4); }
.arch__card > p{ color:var(--ink-soft); }
.arch__card .note{ padding-top:var(--s4); border-top:1px solid var(--line); }

.arch__pair{ max-width:var(--max); margin:var(--s8) auto 0;
  padding-inline:var(--pad); display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:760px){
  .arch__pair{ grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); align-items:start; }
  .arch__pair figure:last-child{ margin-top:var(--s8); }
}
.arch__pair img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* ═══════════════ TRĂNG ═══════════════ */
.moon{ position:relative; color:var(--cream);
  padding:var(--bay) var(--pad); overflow:hidden; isolation:isolate;
  /* quầng đèn mây phía sau ảnh */
  background:radial-gradient(44% 40% at 76% 28%, rgba(239,192,119,.15), transparent 70%), var(--night); }
/* vân xoáy đồng tâm — cùng hoạ tiết với bức tường sau mặt trăng thật.
   Phải là một ĐĨA có tâm nhìn thấy được: rải vòng tròn khắp cả chương thì bán kính
   quá lớn, cung tròn hoá thành vệt thẳng và trông như nhiễu màn hình. */
.moon::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
  left:-22%; top:16%; width:min(70vw, 760px); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle, rgba(239,192,119,.11) 0%, transparent 58%),
    repeating-radial-gradient(circle, transparent 0 14px, rgba(239,192,119,.055) 14px 16px);
  -webkit-mask-image:radial-gradient(circle, #000 26%, transparent 68%);
          mask-image:radial-gradient(circle, #000 26%, transparent 68%); }
@media (max-width:900px){ .moon::before{ left:-40%; top:6%; width:min(110vw, 620px); } }

/* position:relative để ảnh chèn góc bám vào lưới này, không bám cả chương —
   nếu bám cả chương thì nó rơi xuống đè lên dải mốc giờ phía dưới */
.moon__grid{ position:relative; display:grid; gap:var(--gap); grid-template-columns:1fr;
  align-items:center; max-width:var(--max); margin-inline:auto; }
@media (min-width:900px){
  .moon__grid{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
         column-gap:clamp(var(--s6), 5vw, var(--s9)); }
}
.moon .kicker{ color:var(--glow); }
.moon__h2{ font-size:var(--t-h2); margin-bottom:var(--s5); }
.moon__h2 span{ display:block; }
.moon__h2 .it{ color:var(--glow); }
.moon__type p{ color:rgba(244,237,225,.76); max-width:40ch; }
.moon__note{ margin-top:var(--s5); font-size:var(--t-label); letter-spacing:.02em;
  color:var(--glow) !important; border-left:1px solid currentColor; padding-left:var(--s3); }

.moon__pic{ margin-right:calc(var(--pad) * -1); position:relative; }
.moon__pic img{ width:100%; aspect-ratio:6/5; object-fit:cover; }
@media (min-width:900px){ .moon__pic img{ aspect-ratio:5/4; } }

/* ảnh chèn góc — neo vào chính khung ảnh lớn, đè lên góc dưới trái của nó.
   Trước đây neo vào lưới chương nên rơi xuống cột chữ và đè lên dòng
   "hãy đến sau 19 giờ"; giờ không thể chạm vào chữ ở bất kỳ bề ngang nào. */
.moon__small{ display:none; }
@media (min-width:1100px){
  .moon__small{ display:block; position:absolute; z-index:2;
    left:var(--s6); bottom:calc(var(--s6) * -1);
    width:clamp(150px, 15vw, 220px);
    border:6px solid var(--night);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.85); }
  .moon__small img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
}

/* mốc giờ trong ngày */
.clock{ max-width:var(--max); margin:var(--s9) auto 0;
  display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width:760px){ .clock{ grid-template-columns:repeat(4,1fr); gap:var(--gap); } }
.clock li{ padding-block:var(--s5); border-top:1px solid var(--line-dark); }
@media (min-width:760px){ .clock li{ padding-top:var(--s5); } }
.clock b{ display:flex; align-items:center; gap:var(--s3);
  font-family:var(--serif); font-weight:300; font-size:var(--t-h3);
  color:var(--glow); letter-spacing:.01em; margin-bottom:var(--s2); }
.clock b::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:none; }
.clock span{ display:block; font-size:var(--t-small); line-height:1.6;
  color:rgba(244,237,225,.72); max-width:34ch; }

/* ═══════════════ ĐI MỘT VÒNG ═══════════════ */
.walk{ background:var(--cream); }
.walk__rail{ height:340vh; position:relative; }
@media (max-width:760px){ .walk__rail{ height:auto; } }
/* đệm trên/dưới vừa đủ: tiêu đề + dải ảnh + chú thích phải nằm gọn trong một
   màn hình, nếu không overflow:hidden sẽ cắt mất dòng chú thích dưới mỗi ảnh */
.walk__stick{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--s5); padding-block:var(--s7) var(--s5);
  perspective:1400px; perspective-origin:50% 46%; }
@media (max-width:760px){ .walk__stick{ position:static; height:auto; padding:var(--bay) 0; } }
.walk__head{ padding-inline:var(--pad); flex:none; }
.walk__head h2{ font-size:var(--t-h2s); }
.walk__bar{ display:block; margin-top:var(--s5); height:1px; max-width:280px;
  background:var(--line); overflow:hidden; }
.walk__bar i{ display:block; height:100%; width:100%; background:var(--ember);
  transform:scaleX(var(--p,0)); transform-origin:left; }
@media (max-width:760px){ .walk__bar{ display:none; } }

.walk__row{ display:flex; align-items:flex-end; gap:clamp(var(--s3), 2vw, var(--s6));
  padding-inline:var(--pad); will-change:transform; transform-style:preserve-3d; }
@media (max-width:760px){
  .walk__row{ flex-direction:column; align-items:stretch; gap:var(--s7);
    transform:none !important; transform-style:flat; perspective:none; }
}

/* ── hành lang 3D ──────────────────────────────────────────────────────
   Sáu khung ảnh đứng trong một không gian có chiều sâu thật: khung nào ra xa
   tâm màn hình thì xoay đi và lùi lại, nên cuộn ngang đọc ra như đang đi dọc
   một hành lang, chứ không phải kéo một băng ảnh phẳng.
   Góc xoay và độ lùi do JS đặt vào --turn / --depth trong cùng khung hình với
   phép tịnh tiến của cả dải, nên hai chuyển động không lệch nhịp nhau.
   --imh gom chiều cao ảnh về một chỗ, vì mảng tối phải phủ đúng phần ảnh. */
.walk__f{ flex:none; position:relative;
  width:clamp(260px, 40vw, 480px); --imh:clamp(200px, 46vh, 440px);
  transform-origin:50% 100%; transform-style:preserve-3d;
  transform:rotateY(calc(var(--turn, 0) * 1deg)) translateZ(calc(var(--depth, 0) * 1px)); }
.walk__f--w{ width:clamp(320px, 58vw, 740px); --imh:clamp(220px, 50vh, 480px); }
.walk__f--t{ width:clamp(220px, 27vw, 340px); --imh:clamp(240px, 56vh, 540px); }
.walk__f img{ width:100%; height:var(--imh); object-fit:cover; }

/* mảng tối trượt trên mặt ảnh: cạnh nào quay ra xa thì tối đi. Đây mới là thứ
   làm mắt tin khung ảnh đang nghiêng, chứ không phải đang bị bóp méo. */
.walk__f::before{ content:""; position:absolute; left:0; right:0; top:0; height:var(--imh);
  z-index:1; pointer-events:none;
  background:linear-gradient(90deg,
    rgba(18,16,13,var(--shade-l, 0)) 0%, rgba(18,16,13,0) 42%,
    rgba(18,16,13,0) 58%, rgba(18,16,13,var(--shade-r, 0)) 100%); }

@media (max-width:760px){
  .walk__f,.walk__f--w,.walk__f--t{ width:100%; transform:none !important; }
  .walk__f img{ height:auto; aspect-ratio:4/3; }
  .walk__f::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .walk__f{ transform:none !important; }
  .walk__f::before{ display:none; }
}
.walk__f figcaption{ display:grid; gap:var(--s1); margin-top:var(--s3); max-width:32ch; }
.walk__f figcaption b{ font-family:var(--serif); font-weight:400; font-size:var(--t-body);
  color:var(--ink); letter-spacing:0; }
.walk__f figcaption span{ font-size:var(--t-label); line-height:1.5; color:var(--ink-faint); }

/* ═══════════════ CHỖ NGỒI ═══════════════ */
.seats{ position:relative; background:var(--paper); padding:var(--bay) var(--pad); overflow:hidden; }
/* ── vòm nhìn xuyên ────────────────────────────────────────────────────
   Chương này là chương duy nhất không có ảnh, nên hoạ tiết vòm ở đây được
   dựng thành chiều sâu thật: năm nét vòm cùng cỡ, mỗi nét lùi thêm một nấc
   trong không gian ba chiều. Phối cảnh tự thu nhỏ nét ở xa, nên mắt đọc ra
   một cái vòm nhìn xuyên vào trong — đúng thứ người ta thấy khi đứng ở đầu
   gian phòng nhìn dọc theo vòm đất nung.
   Không có JS, không có chuyển động: nó là một hình vẽ, chỉ tình cờ có bề sâu. */
.vault{ position:absolute; pointer-events:none;
  right:-6%; top:3%; width:min(30vw, 380px); aspect-ratio:3/4;
  perspective:900px; perspective-origin:38% 40%; transform-style:preserve-3d; }
.vault i{ position:absolute; inset:0; border-radius:var(--arch);
  border:1px solid color-mix(in srgb, var(--clay) 34%, transparent); border-bottom:0;
  transform:translateZ(calc(var(--i, 0) * -78px));
  opacity:calc(1 - var(--i, 0) * .17);
  /* Chỉ để lộ phần đỉnh vòm. Ở bản thử đầu, mặt nạ mờ tới 92% nên hai chân vòm
     còn nhìn thấy, và năm cái chân dựng đứng ấy cắt ngang qua cột chữ bên phải
     — trông như lỗi dựng trang chứ không phải hoạ tiết. */
  -webkit-mask-image:linear-gradient(#000 8%, transparent 52%);
          mask-image:linear-gradient(#000 8%, transparent 52%); }
.vault i:nth-child(2){ --i:1; } .vault i:nth-child(3){ --i:2; }
.vault i:nth-child(4){ --i:3; } .vault i:nth-child(5){ --i:4; }
@media (max-width:1240px){ .vault{ display:none; } }
.seats__in{ max-width:var(--max); margin-inline:auto; position:relative; z-index:1; }
.seats__head{ max-width:34rem; margin-bottom:var(--s8); }
.seats__head h2{ font-size:var(--t-h2s); }
.seats__sub{ margin-top:var(--s4); color:var(--ink-soft); }

.seats__list{ display:grid; gap:0; grid-template-columns:1fr; }
@media (min-width:820px){
  .seats__list{ grid-template-columns:1fr 1fr; column-gap:clamp(var(--s7), 6vw, var(--s10)); }
}
.seats__list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s5);
  padding-block:var(--s6); border-top:1px solid var(--line); align-items:start; }
/* --clay nguyên bản chỉ đạt 2,98:1 trên nền giấy — thiếu 0,02 so với mức 3:1
   của chữ ≥24px. Pha thêm 10% mực, đo lại 3,47:1. */
.seats__no{ font-family:var(--serif); font-weight:200; font-size:var(--t-numeral);
  line-height:.86; color:color-mix(in srgb, var(--clay) 90%, var(--ink));
  letter-spacing:-.04em; }
.seats__body h3{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s3); }
.seats__body h3 i{ font-style:normal; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.2em; color:var(--ember); }
.seats__body p{ color:var(--ink-soft); font-size:var(--t-small); line-height:1.66; max-width:46ch; }

.tags{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.tags li{ display:block; padding:var(--s1) var(--s3); border:1px solid var(--line-firm);
  border-radius:99px; font-size:var(--t-micro); letter-spacing:.08em; color:var(--ink-faint); }

/* ═══════════════ THỰC ĐƠN ═══════════════ */
.menu{ background:var(--cream); padding:var(--bay) var(--pad); overflow:hidden;
  display:grid; gap:var(--gap) clamp(var(--s6), 5vw, var(--s9)); grid-template-columns:1fr;
  max-width:var(--max); margin-inline:auto; }
@media (min-width:960px){
  .menu{ grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
         grid-template-areas:"head head" "pic body"; align-items:start; }
  .menu__head{ grid-area:head; } .menu__pic{ grid-area:pic; } .menu__body{ grid-area:body; }
}
/* rem chứ không phải ch: thẻ bao chạy cỡ chữ sans nhỏ nên 1ch quá hẹp */
.menu__head{ max-width:38rem; margin-bottom:var(--s4); }
.menu__head h2{ font-size:var(--t-h2s); }
/* Ảnh tràn ra mép trái, nên trong không gian ba chiều nó là mảng tường bên tay
   trái người đang đi vào: mép trái phải lùi ra xa. rotateY âm làm đúng việc đó
   (rotateY dương đẩy mép PHẢI ra xa), lấy mép phải làm trục nên ảnh không xê
   dịch khỏi vị trí đã căn. Góc 5° — quá 7° là chữ trong chú thích bắt đầu nhoè. */
.menu__pic{ margin-left:calc(var(--pad) * -1); perspective:1400px; }
.menu__pic .frame{ display:block; transform:rotateY(-5deg); transform-origin:100% 50%; }
.menu__pic img{ width:100%; aspect-ratio:2/3; object-fit:cover; }
@media (prefers-reduced-motion:reduce){ .menu__pic .frame{ transform:none; } }
@media (max-width:959px){
  /* Ảnh không còn tràn ra mép trái ở khổ này, nên nó thôi là mảng tường bên tay
     trái — không còn lý do gì để nghiêng, và nghiêng lúc này chỉ đọc ra là lệch. */
  .menu__pic{ margin-left:0; max-width:20rem; perspective:none; }
  .menu__pic .frame{ transform:none; }
  .menu__pic img{ aspect-ratio:4/5; }
}

/* ba món nên gọi lần đầu */
/* Khe giữa các mẩu giấy là bắt buộc từ khi chúng có nền riêng: trước đây chúng
   chỉ ngăn nhau bằng một đường kẻ nên gap:0 là đúng, giờ để 0 thì hai mẩu dính
   vào nhau thành một mảng liền ở khổ dọc. */
.picks{ display:grid; gap:var(--s4); grid-template-columns:1fr; margin-bottom:var(--s7); }
@media (min-width:700px){ .picks{ grid-template-columns:repeat(3,1fr); gap:var(--gap); } }
/* Ba mẩu giấy ghi tay đặt xuống mặt bàn, không phải ba ô lưới cắt bằng máy.
   Góc nghiêng của từng mẩu khác nhau và đều dưới 1,2° — đủ để mắt biết là do
   tay người đặt xuống, chưa đủ để đọc ra là lỗi căn lề. */
.picks li{ display:grid; gap:var(--s2); padding:var(--s5) var(--s4) var(--s5);
  background:var(--paper); position:relative;
  box-shadow:0 18px 28px -26px rgba(34,26,19,.7);
  transform:rotate(var(--tilt, 0deg)); }
.picks li:nth-child(1){ --tilt:-.9deg; }
.picks li:nth-child(2){ --tilt:.5deg; margin-top:var(--s2); }
.picks li:nth-child(3){ --tilt:-.35deg; }
/* nét mực gạch ngang đầu mỗi mẩu, thay cho đường kẻ 1px */
.picks li::before{ content:""; position:absolute; left:var(--s4); right:var(--s4); top:var(--s3);
  height:6px; background:var(--ember); opacity:.5;
  -webkit-mask:var(--ink-rule) repeat-x left center / 132px 6px;
          mask:var(--ink-rule) repeat-x left center / 132px 6px; }
.picks b{ font-family:var(--serif); font-weight:400; font-size:var(--t-body); letter-spacing:0; }
.picks b::after{ content:"★"; margin-left:var(--s2); font-size:var(--t-star);
  vertical-align:super; color:var(--ember); }
.picks span{ font-size:var(--t-label); line-height:1.55; color:var(--ink-soft); }
.picks em{ font-style:normal; font-size:var(--t-micro); letter-spacing:.12em;
  color:var(--ember); font-variant-numeric:tabular-nums; }

/* đệm ngang thay cho khe, giống thanh điều hướng: nhãn ngắn như "Trà" vẫn đủ 44px */
.tabs{ display:flex; flex-wrap:wrap; gap:0 var(--s3); margin-bottom:var(--s4);
  border-bottom:1px solid var(--line); }
.tabs button{ font-size:var(--t-label); color:var(--ink-faint); position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); min-width:var(--tap); padding-inline:var(--s2);
  transition:color .3s; }
.tabs button:hover{ color:var(--ink); }
.tabs button.on{ color:var(--ember); font-weight:400; }
/* gạch chân bám ngay dưới chữ, không bám đáy khung — tab xuống dòng vẫn đúng */
.tabs button.on::after{ content:""; position:absolute; left:var(--s2); right:var(--s2);
  bottom:var(--s2); height:1px; background:var(--ember); }

/* chú thích đơn vị đặt TRƯỚC bảng giá, để đọc số là hiểu ngay */
.menu__unit{ font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:var(--s5); }
.menu__unit b{ color:var(--ember); font-weight:500; }

.menu__cols{ columns:1; column-gap:clamp(var(--s6), 4vw, var(--s8)); }
@media (min-width:700px){ .menu__cols{ columns:2; } }
/* Lọc còn một nhóm thì hai cột là sai: nhóm không tách ra được (break-inside:avoid)
   nên nó ngồi trọn ở cột trái và bỏ trống nửa bên phải. Thu về một cột hẹp,
   giống đúng một tờ thực đơn. */
@media (min-width:700px){ .menu__cols.one{ columns:1; max-width:40rem; } }
.grp{ break-inside:avoid; margin-bottom:var(--s7); }
.grp.off{ display:none; }
/* Bấm đổi nhóm thì các bảng giá lật xuống quanh cạnh trên, như bảng lật ở quầy
   vé tàu. Chuyển động này gắn với một hành động của người dùng, không phải một
   thứ tự chạy — nên nó ở lại được trong nguyên tắc "ít và chậm" của Phần 3.6. */
.grp.turn{ animation:grpTurn .52s var(--ease) both; }
@keyframes grpTurn{
  from{ opacity:0; transform:perspective(900px) rotateX(-34deg) translateY(-10px); }
  to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .grp.turn{ animation:none; } }
.grp h3{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s3); margin-bottom:var(--s1); position:relative; }
/* Tuyệt đối không dùng flex item cho nét kẻ này: h3 là hộp flex, một phần tử
   giả thường sẽ thành cột thứ ba và đẩy chữ Hàn ra khỏi mép. position:absolute
   gỡ nó khỏi dòng flex. */
.grp h3::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:currentColor; opacity:.42;
  -webkit-mask:var(--ink-rule) repeat-x left center / 132px 6px;
          mask:var(--ink-rule) repeat-x left center / 132px 6px; }
.grp h3 i{ font-style:normal; font-family:var(--sans); font-size:var(--t-micro);
  letter-spacing:.18em; color:var(--ember); }
/* Dãy chấm nối tên món sang giá — thứ mọi tờ thực đơn in đều có, và là thứ
   không bảng giá web nào tự mọc ra. Nét chấm là phần tử giả của <li>, nhưng
   <li> là hộp flex nên nó rơi xuống CUỐI hàng; dùng order để chèn nó vào đúng
   giữa tên món và giá mà không phải thêm thẻ rỗng vào HTML. */
.grp li{ display:flex; align-items:baseline; gap:var(--s3); padding-block:var(--s2);
  font-size:var(--t-small); border-bottom:1px solid var(--line-soft); }
.grp li span{ flex:none; max-width:74%; }
.grp li::after{ content:""; order:1; flex:1 1 var(--s6); align-self:baseline;
  height:0; margin-bottom:.34em;
  border-bottom:1px dotted currentColor; opacity:.3; }
.grp li b{ order:2; flex:none; font-weight:400; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.grp li.star span::after{ content:"★"; margin-left:var(--s1); font-size:var(--t-star);
  vertical-align:super; color:var(--ember); }
.grp li.star b{ color:var(--ember); font-weight:500; }
.menu__fine{ margin-top:var(--s5); font-size:var(--t-small); color:var(--ink-soft); max-width:52ch; }
/* text-decoration chứ không phải border-bottom: hộp chạm cao 44px sẽ đẩy
   đường kẻ viền rơi xuống xa chân chữ, còn gạch chân thì bám đúng chữ */
.menu__fine a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
  display:inline-flex; align-items:center; min-height:var(--tap); }

/* ═══════════════ LÝ DO ═══════════════ */
.why{ background:var(--fern); color:var(--cream); padding:var(--bay) var(--pad); }
.why__in{ max-width:var(--max); margin-inline:auto; }
.why h2{ max-width:16ch; margin-bottom:var(--s7); }
.why__list{ display:grid; gap:0; }
.why__list > div{ display:grid; gap:var(--s1) var(--s6); padding-block:var(--s5);
  border-top:1px solid rgba(244,237,225,.2); }
@media (min-width:760px){ .why__list > div{ grid-template-columns:minmax(0,.34fr) minmax(0,1fr); } }
.why__list dt{ font-family:var(--serif); font-size:var(--t-h3); }
.why__list dd{ color:rgba(244,237,225,.74); max-width:56ch; }

/* ═══════════════ KHÁCH NÓI ═══════════════ */
.guests{ background:var(--paper); padding:var(--bay) var(--pad); overflow:hidden;
  display:grid; gap:var(--gap) clamp(var(--s6), 5vw, var(--s8)); grid-template-columns:1fr;
  align-items:center; max-width:var(--max); margin-inline:auto; }
@media (min-width:900px){ .guests{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); } }
.guests__pic{ margin-left:calc(var(--pad) * -1); }
.guests__pic img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
/* Dấu ngoặc kép mở treo ra ngoài lề trái, để cạnh chữ thẳng hàng với mọi khối
   chữ khác trong chương. Đây là việc thợ sắp chữ vẫn làm bằng tay; trình duyệt
   không tự làm, và không trang nào để mặc định mà có được canh lề này. */
.guests blockquote p{ font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:var(--t-quote); line-height:1.14; letter-spacing:-.02em; text-wrap:balance;
  text-indent:-.42em; hanging-punctuation:first last; }
.guests__more{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line);
  display:grid; gap:var(--s4); max-width:52ch; }
.guests__more p{ font-size:var(--t-small); color:var(--ink-soft); }
.guests__more cite{ font-style:normal; font-size:var(--t-micro); letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-faint); }

/* ═══════════════ HỎI ĐÁP ═══════════════ */
.faq{ background:var(--cream); padding:var(--bay) var(--pad); }
.faq__in{ max-width:var(--max); margin-inline:auto; display:grid; gap:var(--gap);
  grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){
  .faq__in{ grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
            column-gap:clamp(var(--s7), 6vw, var(--s10)); }
  .faq__head{ position:sticky; top:calc(var(--tap) + var(--s6)); }
}
.faq__head{ max-width:24rem; }
.faq__head h2{ font-size:var(--t-h2s); }
.faq__list{ display:grid; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  min-height:calc(var(--tap) + var(--s4)); padding-block:var(--s3);
  font-family:var(--serif); font-size:var(--t-lead); line-height:1.3;
  cursor:pointer; list-style:none; transition:color .3s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--ember); }
/* dấu cộng thành dấu trừ — hai gạch chồng nhau, gạch dọc thu về 0 khi mở */
.faq summary::after{ content:""; flex:none; width:14px; height:14px;
  background-image:linear-gradient(var(--ember),var(--ember)),linear-gradient(var(--ember),var(--ember));
  background-repeat:no-repeat; background-position:center, center;
  background-size:14px 1px, 1px 14px;
  transition:background-size .45s var(--ease), transform .45s var(--ease); }
.faq details[open] summary::after{ background-size:14px 1px, 1px 0; transform:rotate(180deg); }
.faq details p{ font-size:var(--t-small); color:var(--ink-soft);
  max-width:56ch; padding-bottom:var(--s5); }
/* inline-flex + min-height: số điện thoại trong câu trả lời cũng phải đủ 44px để bấm */
.faq details p a{ color:var(--ember); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px;
  display:inline-flex; align-items:center; min-height:var(--tap); }
.faq details[open] p{ animation:faqIn .5s var(--ease) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ═══════════════ GHÉ THĂM ═══════════════ */
.visit{ background:var(--paper); padding:var(--bay) var(--pad) 0; }
.visit__top{ max-width:var(--max); margin:0 auto var(--s8); }
.visit__top h2{ max-width:14ch; margin-bottom:var(--s4); }
.visit__top p{ max-width:46ch; color:var(--ink-soft); }

.visit__grid{ max-width:var(--max); margin-inline:auto;
  display:grid; gap:var(--gap) clamp(var(--s6), 6vw, var(--s10)); grid-template-columns:1fr; }
@media (min-width:900px){ .visit__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); } }
/* Huy hiệu mở đầu khối thông tin liên hệ, như tấm biển treo trước cửa quán:
   chương này là chương chỉ đường, nên nó là chỗ người ta cần thấy mặt quán nhất. */
.visit__mark{ width:clamp(64px, 7vw, 88px); height:auto; margin-bottom:var(--s5); }

.visit__facts dl > div{ display:grid; gap:var(--s1) var(--s6); padding-block:var(--s4);
  border-top:1px solid var(--line); }
@media (min-width:520px){ .visit__facts dl > div{ grid-template-columns:7rem 1fr; align-items:baseline; } }
.visit__facts dt{ font-size:var(--t-micro); letter-spacing:.17em; text-transform:uppercase; color:var(--ink-faint); }
.visit__facts dd{ color:var(--ink-soft); }
.visit__facts a{ display:inline-flex; align-items:center; min-height:var(--tap);
  border-bottom:1px solid var(--line-firm); transition:color .3s, border-color .3s; }
.visit__facts a:hover{ color:var(--ember); border-color:var(--ember); }
.visit__go{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6); }

.form{ background:var(--cream); padding:var(--card); display:grid; gap:var(--s4);
  box-shadow:0 40px 70px -60px rgba(34,26,19,.55); }
.form h3{ margin-bottom:calc(var(--s2) * -1); }
.form__sub{ font-size:var(--t-label); color:var(--ink-soft); margin-bottom:var(--s1); }
.form label{ display:grid; gap:var(--s1); }
.form label > span{ font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
/* font-size 16px là bắt buộc: nhỏ hơn thì iOS tự phóng to trang khi bấm vào ô */
.form input,.form textarea,.form select{ width:100%; min-height:var(--tap); padding:var(--s2) var(--s3);
  font:inherit; font-size:var(--t-input); background:transparent; color:var(--ink); border:0;
  border-bottom:1px solid var(--line-firm);
  border-radius:0; transition:border-color .3s; }
.form input::placeholder,.form textarea::placeholder{ color:var(--ink-faint); opacity:.7; }
.form input:focus,.form textarea:focus,.form select:focus{ border-bottom-color:var(--ember); }
.form textarea{ resize:vertical; }
.form select{ appearance:none; -webkit-appearance:none; padding-right:var(--s6); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%236E6152' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s3) center; }
.form select option{ background:var(--cream); color:var(--ink); }
.form__row{ display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); }
.form .btn{ margin-top:var(--s2); }
.form__msg{ font-size:var(--t-label); min-height:1.3em; }
.form__msg.ok{ color:var(--fern); }
.form__msg.err{ color:var(--ember); }

.chips{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
/* nhãn chiếm trọn một dòng, ba nút bên dưới không bị đẩy xuống lẻ một cái */
.chips__lbl{ flex:1 0 100%; font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); }
.chips button{ min-height:var(--tap); padding-inline:var(--s4);
  border:1px solid var(--line-firm); border-radius:99px;
  font-size:var(--t-label); color:var(--ink-soft);
  transition:border-color .3s, color .3s, background .3s; }
.chips button:hover{ border-color:var(--ember); color:var(--ember); }
.chips button.on{ background:var(--ember); border-color:var(--ember); color:var(--cream); }

/* nền chờ: iframe bản đồ của Google có thể tải chậm hoặc bị trình duyệt chặn,
   không có nền thì chỗ đó là một mảng trống 440px không ai hiểu là cái gì */
.visit__map{ margin:var(--s8) calc(var(--pad) * -1) 0; background:var(--sand);
  background-image:radial-gradient(circle at 50% 46%, rgba(196,105,60,.16), transparent 58%); }
.visit__map iframe{ width:100%; height:clamp(280px, 40vw, 440px); border:0;
  filter:grayscale(.4) sepia(.12) contrast(1.04); }

/* ═══════════════ CHÂN ═══════════════ */
.foot{ position:relative; background:var(--night); color:var(--cream);
  padding:var(--s9) var(--pad) var(--s6); overflow:hidden; }
.foot::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 12% 0%, rgba(239,192,119,.10), transparent 70%); }
.foot__in{ position:relative; max-width:var(--max); margin-inline:auto;
  display:grid; gap:var(--s7); grid-template-columns:1fr; }
@media (min-width:800px){
  .foot__in{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.9fr);
             gap:clamp(var(--s6), 5vw, var(--s9)); }
}
.foot__moon{ --orb:clamp(88px, 9vw, 132px); margin-bottom:var(--s5); }
.foot__ko{ display:block; font-family:var(--serif); font-size:var(--t-logo-lg);
  color:var(--glow); line-height:1; margin-bottom:var(--s4); }
.foot__brand p{ font-size:var(--t-small); color:rgba(244,237,225,.72); max-width:34ch; }
.foot__col h2{ font-size:var(--t-micro); font-family:var(--sans); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(244,237,225,.5);
  margin-bottom:var(--s3); }
/* xếp theo cột chứ không theo hàng: lưới hai cột chảy ngang thì thứ tự đọc
   là Vòm–Trăng–Đi một vòng… nhảy qua nhảy lại, còn mắt thì đọc dọc từng cột */
.foot__nav{ display:grid; gap:0 var(--s5);
  grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, auto); grid-auto-flow:column; }
.foot__nav a{ font-size:var(--t-label); color:rgba(244,237,225,.78);
  display:inline-flex; align-items:center; min-height:var(--tap); transition:color .3s; }
.foot__nav a:hover{ color:var(--glow); }
/* mỗi liên kết là một khối riêng cao 44px — liên kết nằm trong dòng chữ
   chỉ cao bằng cỡ chữ, không đủ vùng chạm trên điện thoại */
.foot__addr{ display:grid; justify-items:start; gap:var(--s1);
  font-size:var(--t-small); line-height:1.7; color:rgba(244,237,225,.72); }
.foot__addr a{ display:inline-flex; align-items:center; min-height:var(--tap);
  border-bottom:1px solid rgba(244,237,225,.28); transition:color .3s, border-color .3s; }
.foot__addr a:hover{ color:var(--glow); border-color:var(--glow); }
.foot__social{ display:flex; flex-wrap:wrap; gap:0 var(--s5); }

.foot__end{ position:relative; max-width:var(--max); margin:var(--s8) auto 0;
  padding-top:var(--s5); border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s6);
  font-size:var(--t-micro); letter-spacing:.05em; color:rgba(244,237,225,.55); }
@media (min-width:800px){ .foot__end span:last-child{ margin-left:auto; } }

/* ═══════════════ THANH DƯỚI (di động) ═══════════════ */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:650; display:none;
  grid-template-columns:repeat(3,1fr); background:var(--night);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(110%); transition:transform .5s var(--ease); }
.dock.up{ transform:none; }
@media (max-width:760px){ .dock{ display:grid; } }
.dock a{ display:flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:var(--s3) var(--s2); text-align:center;
  font-size:var(--t-label); letter-spacing:.06em;
  color:var(--cream); border-left:1px solid var(--line-dark); }
.dock a:first-child{ border-left:0; }
.dock__go{ background:var(--ember); }
@media (max-width:760px){ .foot{ padding-bottom:var(--s9); } }

/* ═══════════════ IN ═══════════════ */
@media print{
  .bar,.dock,.sheet,.noise,.boot,.visit__map,.hero__down,.hero__go,.vault,.orb,
  .hero__gate{ display:none !important; }
  /* gỡ hết phối cảnh: bóng đổ 100vmax của cổng vòm và các phép xoay chỉ có
     nghĩa trên màn hình, in ra giấy thì thành mảng đen và ảnh lệch */
  .hero__stage,.menu__pic{ perspective:none !important; }
  .hero__bg,.menu__pic .frame,.picks li{ transform:none !important; }
  .hero__h1 span{ animation:none !important; }
  .picks li{ box-shadow:none; border-top:1px solid #999; background:none; }
  body{ background:#fff; color:#000; }
  .walk__rail{ height:auto; }
  .walk__stick{ position:static; height:auto; overflow:visible; perspective:none; }
  .walk__row{ flex-direction:column; transform:none !important; }
  /* JS đã ghi --turn/--depth vào thuộc tính style của từng khung, mà quy tắc
     gỡ 3D lại nằm trong @media max-width:760px — bản in rộng nên không dính.
     Phải gỡ ở đây, nếu không sáu khung ảnh in ra đều bị xoay nghiêng.
     Chiều cao ảnh cũng phải bỏ: vh trong bản in là chiều cao trang giấy. */
  .walk__f{ transform:none !important; }
  .walk__f::before{ display:none !important; }
  .walk__f,.walk__f--w,.walk__f--t{ width:100% !important; }
  .walk__f img{ height:auto !important; aspect-ratio:4/3; }
  .moon,.why,.foot{ background:#fff !important; color:#000 !important; }
  .moon::before,.foot::after{ display:none !important; }
  .moon__type p,.why__list dd,.clock span,.foot__brand p,.foot__col address{ color:#333 !important; }
  .clock b,.foot__ko{ color:#000 !important; }
  /* phần hỏi đáp được mở bằng JS ở sự kiện beforeprint — trình duyệt ẩn nội dung
     <details> đóng bằng UA stylesheet, CSS của trang không đè lại được */
}