/* ===== Phong cách giấy: nền giấy dó, menu hai cánh, hero chữ nghiêng + Nàng Tấm vẽ chì ===== */
:root{
  --paper:#EEE9DD;
  --ink:#3E5234;            /* xanh mực như ảnh mẫu */
  --ink-soft:#5E6E55;
  --graphite:#55564E;       /* màu chì */
  --font-italic:"Playfair Display",Georgia,serif;
  --font-light:"Be Vietnam Pro",system-ui,sans-serif;
}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 500;font-display:swap;src:url("../fonts/playfair-italic.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-weight:300;font-display:swap;src:url("../fonts/be-vietnam-pro-300.woff2") format("woff2")}

body{background:var(--paper) url("../img/paper.webp") repeat;background-size:512px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Header hai cánh, logo nét ở giữa --- */
.site-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:14px clamp(16px,2.4vw,40px);background:transparent;border-bottom:1px solid transparent;backdrop-filter:none;
  transition:background-color .4s var(--ease),border-color .4s,padding .4s var(--ease)}
.site-header::after{display:none}
.site-header.is-scrolled{background:rgba(238,233,221,.9);backdrop-filter:blur(10px);border-bottom-color:rgba(62,82,52,.14);padding-block:8px}
.nav-wing{display:flex;align-items:center;gap:clamp(16px,2vw,32px);min-width:0}
.nav-right{justify-content:flex-end}
.nav-wing .menu{display:flex;gap:clamp(16px,2vw,32px);list-style:none;margin:0;padding:0}
.nav-wing a,.site-header .lang-current{font-family:var(--font-light);font-weight:300;font-size:1.02rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.nav-wing .menu a{position:relative;padding:6px 0}
.nav-wing .menu a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-wing .menu a:hover::after,.nav-wing .current-menu-item a::after{transform:scaleX(1)}
.nav-sep{width:1px;height:22px;background:rgba(62,82,52,.35)}
.site-header .lang-current{border:0;background:none;padding:6px 18px 6px 0;position:relative}
.site-header .lang-current::after{content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transform:rotate(45deg)}
.nav-book{border:1px solid var(--ink);border-radius:999px;padding:7px 16px!important;transition:background-color .3s,color .3s}
.nav-book:hover{background:var(--ink);color:var(--paper)!important}
.site-logo{justify-self:center;display:block;color:var(--ink);transition:transform .4s var(--ease)}
.site-logo img{height:84px;width:auto;transition:height .4s var(--ease)}
.site-header.is-scrolled .site-logo img{height:58px}
.nav-toggle{display:none}
.site-nav{display:none}
@media (max-width:1100px){
  .site-header{grid-template-columns:auto 1fr auto}
  .nav-wing .menu,.nav-sep,.nav-wing .lang-switcher{display:none}
  .nav-left{display:none}
  .nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid rgba(62,82,52,.3);border-radius:50%;background:none;cursor:pointer}
  .nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:18px;height:1px;background:var(--ink);position:relative;transition:transform .3s var(--ease)}
  .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
  .nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
  .nav-toggle[aria-expanded="true"] .bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}
  .site-logo img{height:64px}
  .site-nav{display:grid;align-content:start;gap:18px;position:fixed;inset:0;z-index:-1;padding:120px 28px 40px;
    background:var(--paper) url("../img/paper.webp");opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
  .site-nav.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
  .site-nav .menu{display:grid;gap:6px;list-style:none;margin:0;padding:0}
  .site-nav .menu a{font-family:var(--font-italic);font-style:italic;font-size:2.2rem;color:var(--ink);text-decoration:none}
  .site-nav .btn{justify-self:start;margin-top:12px}
}
@media (max-width:520px){.nav-book{padding:6px 12px!important;font-size:.9rem!important}}

/* --- Hero kiểu tranh lụa --- */
.hero-paper{position:relative;overflow:hidden;isolation:isolate;color:var(--ink)}
.hero-scroll-painting{min-height:calc(100svh - 112px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:1fr auto auto;column-gap:24px;padding:clamp(28px,6vh,72px) clamp(20px,5vw,80px) clamp(22px,4vh,40px) clamp(56px,8vw,128px);text-align:left}

/* Tiêu đề lệch trái */
.hero-title-block{grid-column:1 / span 8;grid-row:1;align-self:center;position:relative;z-index:2}
.hero-mark{display:flex;align-items:center;gap:12px;margin:0 0 clamp(14px,2.4vh,26px);font-family:var(--font-light);font-weight:300;
  font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-soft)}
.hero-mark .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.seal-mini{display:inline-grid;place-items:center;width:30px;height:36px;border-radius:3px;background:var(--red);color:var(--gold-light);
  font-family:var(--font-display);font-size:1rem;letter-spacing:0;text-transform:none;box-shadow:0 2px 8px rgba(119,0,0,.25)}
.hero-display{font-family:var(--font-italic);font-style:italic;font-weight:400;color:var(--ink);
  font-size:clamp(4rem,10.5vw,9.4rem);line-height:.92;letter-spacing:-.012em;margin:0 0 0 -.04em}
:lang(ja) .hero-display,:lang(ko) .hero-display,:lang(zh-TW) .hero-display,:lang(ru) .hero-display{font-family:var(--font-italic);font-weight:400}
.hero-display{width:fit-content}
.hero-display-sub{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.6vw,22px);margin:clamp(24px,4.2vh,42px) 0 0;
  font-family:var(--font-light);font-style:normal;font-weight:300;font-size:clamp(.78rem,1vw,.92rem);letter-spacing:.5em;text-transform:uppercase;color:var(--ink-soft)}
.hero-display-sub .rule{width:clamp(40px,5vw,72px);height:1px;background:var(--ink-soft)}
.hero-display-sub .sub-text{margin-right:-.5em}  /* bù khoảng giãn chữ cuối để cụm cân giữa */


/* Chú thích tranh ở góc dưới */
.hero-colophon{grid-column:1 / span 5;grid-row:2;position:relative;z-index:2;max-width:44ch;padding-left:18px;border-left:1px solid rgba(62,82,52,.35);margin-bottom:clamp(20px,3.5vh,34px)}
.hero-lead{font-family:var(--font-light);font-weight:300;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.75;color:#44493F;margin:0}
.hero-paper .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:clamp(16px,2.6vh,26px) 0 0}
.btn-ink{background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-family:var(--font-light);font-weight:400;letter-spacing:.04em}
.btn-ink:hover{background:transparent;color:var(--ink)}
.link-ink{font-family:var(--font-light);font-weight:300;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(62,82,52,.45);padding-bottom:2px}
.link-ink:hover{border-bottom-color:var(--ink)}

/* Dải thông tin nhỏ dưới cùng */
.hero-facts{grid-column:1 / span 8;grid-row:3;position:relative;z-index:2;display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:14px 0 0;border-top:1px solid rgba(62,82,52,.22)}
.hero-facts li{font-family:var(--font-light);font-weight:300;font-size:.9rem;color:var(--ink);padding:0 22px;border-left:1px solid rgba(62,82,52,.22)}
.hero-facts li:first-child{padding-left:0;border-left:0}
.fact-k{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:2px}

/* Dây treo tranh: chỉ dẫn cuộn dọc bên trái, hạt quả thị trượt xuống */
.hero-cord{position:absolute;z-index:2;left:clamp(18px,2.6vw,44px);top:clamp(90px,22vh,220px);bottom:0;display:flex;flex-direction:column;align-items:center;gap:16px;text-decoration:none}
.cord-text{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-light);font-weight:300;font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}
.cord-line{position:relative;flex:1;width:1px;background:linear-gradient(rgba(62,82,52,.4),rgba(62,82,52,.08))}
.cord-bead{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;border-radius:52% 52% 48% 48%;
  background:radial-gradient(circle at 34% 30%,#F6E3A8,#D9A63C 60%,#A9761F);box-shadow:0 0 10px rgba(217,166,60,.5);animation:nt-bead 3.2s cubic-bezier(.6,0,.4,1) infinite}
.cord-bead::before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:3px;transform:translateX(-50%);background:#5E7A4A;border-radius:60% 60% 30% 30%}
@keyframes nt-bead{0%{top:0;opacity:0}15%{opacity:1}80%{opacity:1}100%{top:calc(100% - 12px);opacity:0}}
.hero-cord:hover .cord-text{color:var(--ink)}

/* Chữ hero hiện ngay bằng CSS (không chờ thư viện hiệu ứng) */
.hero-paper [data-hero-line]{opacity:0;animation:nt-rise 1.1s var(--ease) forwards}
.hero-mark[data-hero-line]{animation-delay:.1s}
.hero-display[data-hero-line]{animation-delay:.22s}
.hero-colophon[data-hero-line]{animation-delay:.5s}
.hero-facts[data-hero-line]{animation-delay:.7s}
@keyframes nt-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
html.nt-seen .hero-paper [data-hero-line]{animation-duration:.6s}
@media (prefers-reduced-motion:reduce){.hero-paper [data-hero-line]{animation:none;opacity:1}.cord-bead{animation:none;top:40%}}


/* Nàng Tấm vẽ chì chìm vào giấy */
.hero-sketch{position:absolute;z-index:0;inset:0;pointer-events:none;--px:0px;--py:0px;--fade:1}
.sketch-figure,.hero-video{position:absolute;right:max(-3vw,calc(50% - 800px));bottom:-2vh;height:min(96%,860px);aspect-ratio:159/175;
  opacity:calc(.42 * var(--fade));mix-blend-mode:multiply;transform:translate(calc(var(--px) * -1),calc(var(--py) * -1))}
.hero-video{aspect-ratio:4/5;width:auto;height:min(98%,900px);object-fit:contain;opacity:calc(.92 * var(--fade));filter:none;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 14%);mask-image:linear-gradient(to top,transparent 0,#000 14%)}
.sketch-figure svg,.sketch-figure img{width:100%;height:100%;display:block}
.sketch-figure .sketch-lines path{fill:var(--graphite);fill-opacity:0;stroke:var(--graphite);stroke-width:.34;stroke-linecap:round;stroke-linejoin:round}
.sketch-figure.is-drawn .sketch-lines path{fill-opacity:.08;transition:fill-opacity 2.4s var(--ease)}
.sketch-figure .sketch-fallback{opacity:.55}
html:not(.no-js) .sketch-figure .sketch-fallback{display:none}
.sketch-figure.is-live .sketch-fallback{display:none}
.sketch-figure.is-live{animation:nt-breathe 9s ease-in-out infinite 5s}
@keyframes nt-breathe{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -8px;rotate:-.35deg}}

/* Quầng quả thị vàng sau lưng nàng */
.sketch-halo{position:absolute;right:max(-1vw,calc(50% - 780px));bottom:4vh;width:min(62vh,560px);aspect-ratio:1;transform:translate(calc(var(--px) * -.5 - 8%),calc(var(--py) * -.5 - 30%));
  border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(232,196,120,.42),rgba(214,170,90,.18) 48%,rgba(214,170,90,0) 70%);
  opacity:0;filter:blur(2px);transition:opacity 2.4s var(--ease)}
.sketch-halo.is-on{opacity:calc(1 * var(--fade));animation:nt-halo 7s ease-in-out infinite}
@keyframes nt-halo{0%,100%{scale:1}50%{scale:1.05}}
.sketch-ring{position:absolute;right:max(-1vw,calc(50% - 780px));bottom:4vh;width:min(62vh,560px);transform:translate(calc(var(--px) * -.5 - 8%),calc(var(--py) * -.5 - 30%));overflow:visible;opacity:var(--fade)}
.sketch-ring circle{fill:none;stroke:#A48A55;stroke-width:.5;stroke-dasharray:580;stroke-dashoffset:580;opacity:.55}
.sketch-ring.is-drawn circle{stroke-dashoffset:0;transition:stroke-dashoffset 3.4s cubic-bezier(.6,.05,.3,1)}

/* Cánh sen, lá thị rơi — nét chì */
.sketch-petals{position:absolute;inset:0;overflow:hidden}
.petal{position:absolute;top:-40px;width:var(--s,16px);height:calc(var(--s,16px) * 1.5);opacity:0;
  border:1px solid rgba(85,86,78,.55);border-radius:100% 0 100% 0;background:rgba(214,176,110,.12);
  animation:nt-fall var(--d,16s) linear var(--delay,0s) infinite}
.petal.gold{border-color:rgba(164,138,85,.7);background:rgba(232,196,120,.25);border-radius:0 100% 0 100%}
@keyframes nt-fall{0%{opacity:0;transform:translate3d(0,-5vh,0) rotate(0deg)}
  10%{opacity:.9}85%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--dx,60px),105vh,0) rotate(var(--rot,320deg))}}


@media (max-width:900px){
  .hero-scroll-painting{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:22px;padding:28px 20px 26px;min-height:auto}
  .hero-title-block,.hero-colophon,.hero-facts{grid-column:1}
  .hero-title-block{grid-row:1;padding-top:6vh;padding-right:48px}
  .hero-colophon{grid-row:2;margin-top:18vh}
  .hero-facts{grid-row:3}
  .hero-facts li{padding:6px 14px 6px 0;border-left:0;margin-right:10px}
  .hero-display-sub{margin-left:0}
  .hero-cord{display:none}
  .sketch-figure{left:0;right:0;margin-inline:auto;height:74%;bottom:12%;opacity:calc(.26 * var(--fade))}
  .sketch-halo,.sketch-ring{left:0;right:0;margin-inline:auto;transform:translate(0,-36%)}
  .hero-video{left:0;right:0;margin-inline:auto;height:74%;bottom:12%;opacity:calc(.38 * var(--fade))}
}
@media (prefers-reduced-motion:reduce){
  .petal,.sketch-figure.is-live,.sketch-halo.is-on{animation:none}
  .sketch-figure .sketch-lines path{fill-opacity:.08}
}


/* --- Nút liên hệ nổi (WhatsApp / Zalo / gọi) --- */
.chat-fab{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:70}
.chat-fab-btn{width:62px;height:62px;border-radius:50%;border:0;background:var(--ink);color:var(--paper);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 10px 30px rgba(30,45,25,.28);transition:transform .3s var(--ease)}
.chat-fab-btn:hover{transform:scale(1.06)}
.chat-fab-btn svg{width:28px;height:28px}
.chat-fab-menu{position:absolute;right:0;bottom:74px;display:grid;gap:8px;min-width:190px;padding:10px;background:rgba(250,247,240,.97);
  border:1px solid rgba(62,82,52,.18);border-radius:16px;box-shadow:0 14px 40px rgba(30,45,25,.18);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.chat-fab.open .chat-fab-menu{opacity:1;transform:none;pointer-events:auto}
.chat-fab-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-family:var(--font-light);font-weight:400}
.chat-fab-menu a:hover{background:rgba(62,82,52,.08)}
.chat-fab-menu i{width:10px;height:10px;border-radius:50%;background:var(--gold)}

/* --- Giới thiệu Nàng Tấm --- */
.about-nt{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,10vw,120px);color:var(--ink)}
.about-bg{position:absolute;inset:0;z-index:-1;opacity:.06;mix-blend-mode:multiply;filter:grayscale(1) sepia(.5) blur(2px);
  -webkit-mask:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.about-bg img{width:100%;height:100%;object-fit:cover}
.about-head{text-align:center;margin-bottom:clamp(36px,6vw,72px)}
.about-title{font-family:var(--font-italic);font-style:italic;font-weight:400;font-size:clamp(2.4rem,5vw,4rem);color:var(--ink);margin:0;line-height:1.05}
.about-brush{display:block;width:clamp(180px,22vw,300px);height:auto;margin:6px auto 0;fill:var(--gold);opacity:.7}
.about-grid{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1.05fr}}
.about-copy{max-width:58ch}
.about-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);color:var(--ink);margin:0 0 6px;line-height:1.2}
.about-name span{color:var(--gold)}
.about-kicker{font-family:var(--font-light);font-weight:400;font-size:.8rem;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--gold-dark);margin:4px 0 22px}
.about-copy p{font-family:var(--font-light);font-weight:300;font-size:1.02rem;line-height:1.8;color:#44493F;margin:0 0 14px}
.about-copy strong{font-weight:600;color:var(--ink)}
.about-copy .about-more{margin-top:22px}
.about-slider{position:relative;margin:0}
.about-slides{position:relative;aspect-ratio:4/3;border-radius:18px 18px 18px 120px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(62,82,52,.45)}
.about-slide{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1.1s var(--ease),transform 5s linear}
.about-slide.is-active{opacity:1;transform:scale(1)}
.about-slide img{width:100%;height:100%;object-fit:cover}
.about-seal{position:absolute;top:-16px;right:24px;display:grid;place-items:center;width:46px;height:54px;border-radius:4px;background:var(--red);color:var(--gold-light);
  font-family:var(--font-display);font-size:1.3rem;box-shadow:0 6px 16px rgba(119,0,0,.3);transform:rotate(4deg)}
.about-dots{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.about-dot{width:30px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(62,82,52,.22);cursor:pointer;transition:background .3s,width .3s}
.about-dot.is-active{width:54px;background:var(--gold)}
.about-dot:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (max-width:899px){.about-slides{border-radius:14px 14px 14px 64px}.about-dots{justify-content:center}}
@media (prefers-reduced-motion:reduce){.about-slide{transition:opacity .3s}}

/* --- Đánh giá của khách --- */
.reviews-nt{position:relative;padding-block:clamp(64px,10vw,120px);overflow:hidden;color:var(--ink)}
.reviews-head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.reviews-head .eyebrow{font-family:var(--font-light);font-weight:400;letter-spacing:.28em;color:var(--gold-dark)}
.reviews-title{font-family:var(--font-italic);font-style:italic;font-weight:400;font-size:clamp(2.3rem,4.8vw,3.8rem);color:var(--ink);margin:0;line-height:1.08}
.reviews-demo-note{display:inline-block;margin:16px 0 0;padding:6px 14px;border:1px dashed var(--red);border-radius:6px;font-size:.85rem;color:var(--red);background:rgba(255,255,255,.5)}
.reviews-plaques{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.4vw,28px);margin-bottom:clamp(36px,5vw,56px)}
.plaque{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;row-gap:2px;min-width:min(100%,300px);padding:18px 26px;
  border:1px solid rgba(62,82,52,.2);border-radius:14px;background:rgba(255,253,247,.55);color:var(--ink);text-decoration:none;
  transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
a.plaque[href]:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(62,82,52,.5)}
.plaque-src{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-family:var(--font-light);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px}
.src-dot{width:8px;height:8px;border-radius:50%;background:#4285F4;box-shadow:10px 0 0 #EA4335,20px 0 0 #FBBC05,30px 0 0 #34A853;margin-right:30px}
.plaque-tripadvisor .src-dot,.review-src-tripadvisor .src-dot{background:#34E0A1;box-shadow:none;margin-right:0}
.plaque-score{grid-row:2 / span 2;font-family:var(--font-italic);font-style:italic;font-size:3rem;line-height:1}
.plaque-stars,.review-stars{color:var(--gold);letter-spacing:.12em;font-size:1rem}
.plaque-stars .off,.review-stars .off{color:rgba(62,82,52,.18)}
.plaque-count{font-family:var(--font-light);font-weight:300;font-size:.88rem;color:var(--ink-soft)}
.plaque-new{grid-column:1 / -1;font-family:var(--font-light);font-weight:300;font-size:.95rem;max-width:26ch}

.reviews-rails{display:grid;gap:clamp(16px,2vw,24px);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rail{display:flex;width:max-content;animation:nt-rail 60s linear infinite}
.rail-reverse{animation-direction:reverse;animation-duration:70s}
.reviews-rails:hover .rail{animation-play-state:paused}
.rail-track{display:flex;gap:clamp(16px,2vw,24px);list-style:none;margin:0;padding:0 clamp(8px,1vw,12px)}
@keyframes nt-rail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-card{position:relative;display:flex;flex-direction:column;width:clamp(280px,28vw,380px);padding:26px 26px 20px;border-radius:14px 14px 14px 44px;
  background:#FBF8F1;border:1px solid rgba(62,82,52,.12);box-shadow:0 10px 30px -22px rgba(62,82,52,.55)}
.review-quote{position:absolute;top:-6px;right:20px;font-family:var(--font-italic);font-size:5.5rem;line-height:1;color:var(--gold);opacity:.3}
.review-stars{margin:0 0 12px}
.review-text{margin:0 0 18px;font-family:var(--font-light);font-weight:300;font-size:.98rem;line-height:1.75;color:#44493F;flex:1}
.review-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(62,82,52,.12);font-size:.86rem}
.review-author{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--ink)}
.review-country{font-family:var(--font-light);font-weight:300;font-size:.84rem;color:var(--ink-soft)}
.review-src{display:flex;align-items:center;gap:6px;font-family:var(--font-light);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.review-src .src-dot{width:6px;height:6px;box-shadow:none;margin-right:0}
.reviews-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:clamp(36px,5vw,52px) auto 0}
.reviews-nt .btn-outline{color:var(--ink)}
.fact-link{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){
  .rail{animation:none;width:auto}.rail-track[aria-hidden]{display:none}
  .reviews-rails{mask:none;-webkit-mask:none;overflow-x:auto}
}

/* --- Bảng giá dạng thực đơn: tab nhóm + ảnh + danh sách --- */
.menu-tabs{position:relative;padding-block:clamp(64px,10vw,120px);color:var(--ink)}
.menu-tabs-head{text-align:center;margin-bottom:clamp(26px,4vw,40px)}
.menu-tabs-head .eyebrow{font-family:var(--font-light);font-weight:400;letter-spacing:.28em;color:var(--gold-dark)}
.menu-tabs-title{font-family:var(--font-italic);font-style:italic;font-weight:400;font-size:clamp(2.2rem,4.6vw,3.7rem);color:var(--ink);margin:0;line-height:1.08}
.menu-tabs-note{margin:12px 0 0;font-family:var(--font-light);font-weight:300;font-size:.92rem;color:var(--ink-soft)}
.menu-tablist{display:flex;justify-content:center;gap:6px;margin:0 auto clamp(30px,4vw,48px);padding:6px;width:fit-content;max-width:100%;
  border:1px solid rgba(62,82,52,.18);border-radius:999px;background:rgba(255,253,247,.5);overflow-x:auto;scrollbar-width:none}
.menu-tablist::-webkit-scrollbar{display:none}
.menu-tab{flex:none;display:flex;align-items:center;gap:8px;padding:10px 20px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:var(--font-light);font-size:.95rem;color:var(--ink-soft);transition:background .35s var(--ease),color .35s}
.menu-tab:hover{color:var(--ink)}
.menu-tab.is-active{background:var(--ink);color:var(--paper)}
.menu-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tab-count{font-size:.72rem;opacity:.6}
.menu-panel{display:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.menu-panel.is-active{display:grid;animation:nt-panel .6s var(--ease)}
html.no-js .menu-panel{display:grid;margin-bottom:48px}
@keyframes nt-panel{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.menu-figure{position:sticky;top:120px;aspect-ratio:4/3;border-radius:18px 18px 18px 110px;overflow:hidden;box-shadow:0 24px 60px -26px rgba(62,82,52,.5)}
.menu-figure figure{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.05);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.menu-figure figure.is-on{opacity:1;transform:scale(1)}
.menu-figure img{width:100%;height:100%;object-fit:cover}
.menu-figure-cat{position:absolute;left:24px;top:18px;font-family:var(--font-display);font-size:1.5rem;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.menu-items{list-style:none;margin:0;padding:0}
.svc-item a{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:14px;padding:20px 0;border-bottom:1px solid rgba(62,82,52,.14);
  color:var(--ink);text-decoration:none;transition:padding .4s var(--ease)}
.svc-item:first-child a{border-top:1px solid rgba(62,82,52,.14)}
.item-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.2;transition:color .3s}
.item-leader{align-self:end;margin-bottom:.45em;border-bottom:1px dotted rgba(62,82,52,.35);min-width:24px}
.item-price{font-family:var(--font-light);font-weight:500;font-size:1.02rem;white-space:nowrap}
.item-from{font-weight:300;font-size:.78rem;color:var(--ink-soft);margin-right:2px}
.item-usd{font-weight:300;font-size:.8rem;color:var(--ink-soft);margin-left:4px}
.item-sub{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px;font-family:var(--font-light);font-weight:300;font-size:.88rem;color:var(--ink-soft)}
.item-mins{color:var(--gold-dark);letter-spacing:.06em}
.svc-item a:hover,.svc-item.is-hot a{padding-left:12px}
.svc-item a:hover .item-name,.svc-item.is-hot .item-name{color:var(--gold-dark)}
.menu-tabs-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin:clamp(36px,5vw,56px) 0 0}
@media (max-width:899px){
  .menu-tablist{justify-content:flex-start;border-radius:14px;width:100%}
  .menu-tab{padding:9px 14px;font-size:.88rem}
  .menu-panel{grid-template-columns:1fr;gap:22px}
  .menu-figure{position:relative;top:0;aspect-ratio:16/10;border-radius:14px 14px 14px 56px}
  .item-name{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){.menu-panel.is-active{animation:none}}
.nt-trail{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:299}

/* --- Câu hỏi thường gặp --- */
.faq-nt{padding-block:clamp(64px,10vw,120px);color:var(--ink)}
.faq-grid{display:grid;gap:clamp(32px,5vw,80px);align-items:start}
@media (min-width:900px){.faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.faq-side{position:sticky;top:130px}}
.faq-side .eyebrow{font-family:var(--font-light);font-weight:400;letter-spacing:.28em;color:var(--gold-dark)}
.faq-title{font-family:var(--font-italic);font-style:italic;font-weight:400;font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.08;color:var(--ink);margin:0 0 18px}
.faq-lead{font-family:var(--font-light);font-weight:300;font-size:1.02rem;line-height:1.75;color:#44493F;max-width:36ch;margin:0}
.faq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:26px 0 0}
.faq-item{border-bottom:1px solid rgba(62,82,52,.16)}
.faq-item:first-child{border-top:1px solid rgba(62,82,52,.16)}
.faq-item summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:22px 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.faq-num{font-family:var(--font-italic);font-style:italic;font-size:.95rem;color:var(--gold-dark)}
.faq-q{font-family:var(--font-display);font-weight:700;font-size:clamp(1.15rem,1.8vw,1.4rem);line-height:1.3;transition:color .3s}
.faq-item summary:hover .faq-q,.faq-item[open] .faq-q{color:var(--gold-dark)}
.faq-icon{position:relative;width:30px;height:30px;border:1px solid rgba(62,82,52,.3);border-radius:50%;transition:transform .4s var(--ease),background .3s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:var(--ink);transition:transform .4s var(--ease)}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon{background:var(--ink);transform:rotate(180deg)}
.faq-item[open] .faq-icon::before{background:var(--paper)}
.faq-item[open] .faq-icon::after{transform:rotate(0);background:var(--paper)}
.faq-a{padding:0 48px 24px 42px}
.faq-a p{margin:0;font-family:var(--font-light);font-weight:300;font-size:1rem;line-height:1.8;color:#44493F}
.faq-item[open] .faq-a{animation:nt-faq .45s var(--ease)}
@keyframes nt-faq{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media (max-width:640px){.faq-a{padding:0 0 22px 0}.faq-item summary{gap:12px}}
@media (prefers-reduced-motion:reduce){.faq-item[open] .faq-a{animation:none}}

/* --- Chân trang gộp: tìm đường + liên hệ + bản đồ --- */
.site-footer{padding-block:clamp(56px,8vw,96px) 28px}
.footer-visit{position:relative;display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:960px){.footer-visit{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.visit-info .eyebrow{color:var(--gold-light);font-family:var(--font-light);font-weight:400;letter-spacing:.28em}
.visit-title{font-family:var(--font-italic);font-style:italic;font-weight:400;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.08;color:var(--cream);margin:0 0 12px}
.visit-address{font-family:var(--font-display);font-size:clamp(1.25rem,1.9vw,1.55rem);color:var(--gold-light);margin:0 0 26px}
.visit-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin:0 0 22px;padding:22px 0;border-block:1px solid rgba(221,196,147,.22)}
.visit-facts .wide{grid-column:1 / -1}
.visit-facts dt{font-family:var(--font-light);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);opacity:.8;margin-bottom:6px}
.visit-facts dd{margin:0;font-family:var(--font-light);font-weight:300;font-size:.98rem;line-height:1.65;color:var(--cream)}
.site-footer .visit-facts a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(221,196,147,.35)}
.site-footer .visit-facts a:hover{border-color:var(--gold-light)}
.visit-note{font-family:var(--font-light);font-weight:300;font-size:.88rem;color:var(--cream);opacity:.72;margin:0 0 24px}
.visit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin:0}
.site-footer .btn-outline{color:var(--cream)}
.site-footer .link-gold{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(221,196,147,.45);margin-left:6px;font-family:var(--font-light)}
.visit-map{position:relative;border-radius:18px 18px 18px 110px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);border:1px solid rgba(221,196,147,.3)}
.visit-map iframe{display:block;width:100%;height:clamp(340px,40vw,480px);filter:saturate(.75) sepia(.12)}
.footer-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid rgba(221,196,147,.22)}
.footer-logo img{height:64px;width:auto;display:block}
.footer-bar .menu{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0;padding:0}
.site-footer .footer-bar .menu a{color:var(--cream);text-decoration:none;font-family:var(--font-light);font-weight:300;opacity:.85}
.site-footer .footer-bar .menu a:hover{opacity:1;color:var(--gold-light)}
.footer-copy{margin-top:22px}
@media (max-width:959px){.visit-map{border-radius:14px 14px 14px 56px}.footer-bar{justify-content:center;text-align:center}.footer-bar .menu{justify-content:center}}
@media (max-width:520px){.visit-facts{grid-template-columns:1fr}}
.site-footer .btn-gold{color:var(--green)}
.visit-facts{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.visit-facts dd{overflow-wrap:anywhere}
.footer-logo img{height:80px}
@media (max-width:520px){.visit-facts{grid-template-columns:1fr}}

/* --- Review trên TikTok: tiêu đề hai dòng + dải video dọc tràn viền --- */
.tt-reviews{padding-block:clamp(64px,9vw,110px) clamp(56px,7vw,90px);color:var(--ink);overflow:hidden}
.tt-head{text-align:center;max-width:1180px;margin-bottom:clamp(32px,4.5vw,56px)}
.tt-head .eyebrow{font-family:var(--font-light);font-weight:400;letter-spacing:.28em;color:var(--gold-dark)}
.tt-title{margin:0;font-family:var(--font-italic);font-weight:400;color:var(--ink);line-height:1}
.tt-line1{display:block;font-style:normal;font-size:clamp(2.3rem,5.2vw,4.6rem);letter-spacing:-.02em}
.tt-line2{display:block;font-style:italic;font-size:clamp(1.8rem,4.2vw,3.7rem);letter-spacing:-.025em;margin-top:.12em;color:#4A5E3F}
.tt-lead{max-width:56ch;margin:22px auto 0;font-family:var(--font-light);font-weight:300;font-size:.98rem;line-height:1.7;color:var(--ink-soft)}
.tt-strip-wrap{position:relative}
.tt-strip{display:flex;gap:3px;list-style:none;margin:0;padding:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.tt-strip::-webkit-scrollbar{display:none}
.tt-strip.is-dragging{cursor:grabbing;scroll-snap-type:none}
.tt-strip.is-dragging .tt-open{pointer-events:none}
.tt-tile{flex:0 0 clamp(230px,24vw,400px);scroll-snap-align:start}
.tt-open{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;background:#1d2419;overflow:hidden;cursor:pointer;color:#fff;text-align:left}
.tt-open:disabled{cursor:default}
.tt-open img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.tt-open:hover img{transform:scale(1.05)}
.tt-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 26%,transparent 55%,rgba(0,0,0,.62) 100%)}
.tt-badge{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:6px;font-family:var(--font-light);font-weight:600;font-size:.95rem;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.tt-badge svg{width:18px;height:18px;fill:#fff;filter:drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55)}
.tt-author{position:absolute;left:16px;top:44px;font-family:var(--font-light);font-size:.84rem;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.55);opacity:0;transform:scale(.85);transition:opacity .35s,transform .35s var(--ease)}
.tt-play::after{content:"";position:absolute;left:26px;top:21px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent #fff}
.tt-open:not(:disabled):hover .tt-play,.tt-open:focus-visible .tt-play{opacity:1;transform:none}
.tt-caption{position:absolute;left:16px;right:16px;bottom:18px;font-family:var(--font-light);font-size:.9rem;line-height:1.45;text-shadow:0 1px 8px rgba(0,0,0,.55);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tt-open:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tt-nav{position:absolute;top:50%;z-index:2;width:48px;height:48px;margin-top:-24px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(250,246,239,.88);color:var(--ink);font-size:1.2rem;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity .3s,transform .3s var(--ease)}
.tt-nav:hover{transform:scale(1.08)}
.tt-nav[disabled]{opacity:0;pointer-events:none}
.tt-prev{left:clamp(10px,2vw,28px)}.tt-next{right:clamp(10px,2vw,28px)}
.tt-follow{text-align:center;margin:28px 0 0}
.tt-modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:24px;background:rgba(14,20,12,.9)}
.tt-modal[hidden]{display:none}
.tt-frame{width:min(380px,92vw);aspect-ratio:9/16;max-height:88vh;border-radius:14px;overflow:hidden;background:#000}
.tt-frame iframe{width:100%;height:100%;border:0}
.tt-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:1.6rem;cursor:pointer}
@media (max-width:640px){.tt-tile{flex-basis:62vw}.tt-nav{display:none}}

/* --- Nhân vật Nàng Tấm xuất hiện như người đón khách --- */
.nt-host{display:block;height:auto;-webkit-mask:linear-gradient(to bottom,#000 93%,transparent);mask:linear-gradient(to bottom,#000 93%,transparent);filter:drop-shadow(0 18px 22px rgba(62,52,30,.18));animation:nt-breathe 7s ease-in-out infinite;transform-origin:50% 100%}
@keyframes nt-breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.4deg)}}
.host-halo{position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(233,200,120,.45),rgba(233,200,120,.12) 55%,transparent 70%);z-index:-1}
.about-host{position:absolute;z-index:3;left:clamp(-56px,-3vw,-24px);bottom:-30px;height:clamp(300px,30vw,420px);width:auto;pointer-events:none}
.about-slider .about-dots{padding-left:clamp(40px,6vw,90px)}
.faq-host{position:relative;isolation:isolate;margin:36px 0 0;width:clamp(170px,15vw,220px)}
.faq-host .nt-host{width:100%}
.book-host{position:relative;isolation:isolate;margin:40px 0 0 24px;width:clamp(110px,9vw,140px)}
.book-host .nt-host{width:100%;animation-delay:-2s}
@media (max-width:899px){
  .about-host{left:-8px;bottom:-26px;height:210px}
  .faq-host,.book-host{display:none}
}
@media (prefers-reduced-motion:reduce){.nt-host{animation:none}}