/*
Theme Name: Đi Chợ Hội An
Theme URI: https://dichohoian.com
Author: Quán Đi Chợ Hội An
Description: Theme cho quán hải sản tươi Đi Chợ Hội An — mỗi section là một block riêng, nội dung đa ngữ EN/VI/KO/JA/ZH.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dichohoian
Tags: restaurant, one-page, custom-blocks, multilingual
*/

/* ============================================================
   ĐI CHỢ HỘI AN — Homepage
   Layout system: GOLDEN RATIO (φ = 1.618)
   - Type scale: φ-based modular scale
   - Split sections: 38.2% / 61.8%
   - Card aspect ratio: 1 : φ
   - Spacing scale multiplies by φ
   Palette: Hội An old-town yellow, lantern red, logo deep green & gold
   ============================================================ */
:root{
  --phi: 1.618;
  /* spacing scale: exact powers of φ (rem) — φ⁻², φ⁻¹, 1, φ, φ², φ³, φ⁴ */
  --s0: .382rem; --s1: .618rem; --s2: 1rem; --s3: 1.618rem; --s4: 2.618rem; --s5: 4.236rem; --s6: 6.854rem;
  /* type scale: ×√φ ≈ 1.272 per step (two steps = φ) */
  --t-sm: .786rem; --t0: 1rem; --t1: 1.272rem; --t2: 1.618rem; --t3: 2.058rem; --t4: 2.618rem; --t5: 3.33rem; --t6: 4.236rem; --t7: 5.388rem;

  --wall: #E3A339;          /* Hội An wall yellow */
  --wall-deep: #C98A2B;
  --lantern: #B23A2E;       /* lantern red */
  --lantern-soft: #D96C4F;
  --green: #24452E;         /* logo deep green */
  --gold: #82682A;          /* logo gold */
  --gold-bright: #C9A24B;

  --bg: #FAF5EA;
  --bg-alt: #F3EAD7;
  --panel: #FFFDF6;
  --ink: #221E14;
  --ink-soft: #5C543F;
  --line: #E2D5B8;
  --shadow: 0 18px 45px -18px rgba(84,60,10,.28);
  --header-bg: rgba(250,245,234,.88);
  --hero-grad: linear-gradient(180deg, rgba(18,16,8,.55) 0%, rgba(18,16,8,.18) 38.2%, rgba(18,16,8,.62) 100%);
}
[data-theme="dark"]{
  --wall: #E3A339;
  --lantern: #D96C4F;
  --green: #9DBFA6;
  --gold: #C9A24B;
  --gold-bright: #D9B45B;

  --bg: #10160F;
  --bg-alt: #161E15;
  --panel: #1C251A;
  --ink: #F0E7D2;
  --ink-soft: #B0A88E;
  --line: #2E3A2B;
  --shadow: 0 18px 45px -18px rgba(0,0,0,.6);
  --header-bg: rgba(16,22,15,.88);
  --hero-grad: linear-gradient(180deg, rgba(6,8,5,.62) 0%, rgba(6,8,5,.3) 38.2%, rgba(6,8,5,.78) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro','Noto Sans KR',-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:17px; line-height:var(--phi);
  transition:background .45s ease, color .45s ease;
  overflow-x:hidden;
}
html[lang="ko"] body{font-family:'Noto Sans KR','Be Vietnam Pro',sans-serif}
html[lang="ja"] body{font-family:'Hiragino Mincho ProN','Yu Gothic','Noto Sans JP','Be Vietnam Pro',sans-serif}
html[lang="zh"] body{font-family:'PingFang SC','Microsoft YaHei','Noto Sans SC','Be Vietnam Pro',sans-serif}
.serif{font-family:'Playfair Display','Noto Serif KR',serif}
html[lang="ko"] .serif{font-family:'Noto Serif KR','Playfair Display',serif}
html[lang="ja"] .serif{font-family:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif}
html[lang="zh"] .serif{font-family:'Songti SC','SimSun','Noto Serif SC',serif}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px, 92%);margin:0 auto}
section{padding:var(--s5) 0}          /* φ³ between sections — compact golden rhythm */
section[id],div[id]{scroll-margin-top:110px}  /* fixed header offset for anchor links */
h2,h3,h4{line-height:1.272}  /* √φ — heading rhythm */

/* ---------- header ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border .3s;
}
header.scrolled{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:var(--s3);height:100px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:76px;width:auto;object-fit:contain;transition:transform .3s}
.brand img:hover{transform:scale(1.04)}
.brand .logo-d{display:none}
[data-theme="dark"] .brand .logo-l{display:none}
[data-theme="dark"] .brand .logo-d{display:block}
nav.links{display:flex;gap:var(--s2);font-size:.87rem;font-weight:500}
nav.links a{position:relative;padding:.3rem 0;color:var(--ink-soft);white-space:nowrap;transition:color .25s}
nav.links a:hover{color:var(--lantern)}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lantern);transition:width .3s}
nav.links a:hover::after{width:100%}
.nav-tools{display:flex;align-items:center;gap:.6rem}
.lang-box{position:relative}
.lang-btn,.mode-btn{
  display:flex;align-items:center;gap:.35rem;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);border-radius:99px;padding:.42rem .8rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .25s;
}
.lang-btn:hover,.mode-btn:hover{border-color:var(--gold-bright);color:var(--gold)}
.mode-btn{width:38px;height:38px;justify-content:center;padding:0;font-size:1rem}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);min-width:150px;padding:.4rem;display:none;overflow:hidden;
}
.lang-menu.open{display:block;animation:fadeup .25s ease}
.lang-menu button{
  display:flex;width:100%;align-items:center;gap:.5rem;background:none;border:0;color:var(--ink);
  font-size:.85rem;padding:.5rem .7rem;border-radius:9px;cursor:pointer;font-family:inherit;
}
.lang-menu button:hover{background:var(--bg-alt)}
.lang-menu button.active{color:var(--lantern);font-weight:700}
.cta-nav{
  background:var(--lantern);color:#FFF7EA !important;border-radius:99px;padding:.55rem 1.25rem;
  font-size:.85rem;font-weight:600;letter-spacing:.02em;box-shadow:0 8px 20px -8px rgba(178,58,46,.55);
  transition:transform .25s, box-shadow .25s;white-space:nowrap;
}
.cta-nav:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(178,58,46,.65)}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:40px;position:relative}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:var(--ink);transition:all .3s}
.burger span:nth-child(1){top:13px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:27px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0}
.hero video,.hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-grad)}
.hero-inner{position:relative;z-index:2;width:min(1180px,92%);margin:0 auto;padding-bottom:9.5vh;color:#FFF8EC}
.hero-kicker{
  display:inline-flex;align-items:center;gap:.7rem;font-size:.78rem;letter-spacing:.42em;text-transform:uppercase;
  color:#F5D98B;margin-bottom:var(--s2);font-weight:600;
}
.hero-kicker::before{content:"";width:38px;height:1px;background:#F5D98B}
.hero h1{font-size:clamp(2.2rem, 5.2vw, var(--t7));line-height:1.18;font-weight:600;max-width:17ch;text-wrap:balance;margin-bottom:var(--s2);text-shadow:0 3px 24px rgba(0,0,0,.45)}
.hero-sub{font-size:clamp(1rem,1.5vw,var(--t1));max-width:56ch;color:#F2E8D2;margin-bottom:var(--s3);font-weight:300}
.hero-ctas{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;border-radius:99px;padding:.9rem 1.7rem;font-size:.92rem;font-weight:600;
  letter-spacing:.02em;cursor:pointer;transition:transform .25s, box-shadow .25s, background .25s;border:0;font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--lantern);color:#FFF7EA;box-shadow:0 10px 26px -8px rgba(178,58,46,.6)}
.btn-ghost{background:rgba(255,248,236,.13);color:#FFF8EC;border:1px solid rgba(255,248,236,.45);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,248,236,.22)}
.hero-meta{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;font-size:.82rem;color:#EAD9B4}
.hero-meta b{display:block;font-size:1.05rem;color:#fff;font-weight:600}
.scroll-cue{position:absolute;left:50%;bottom:2.2vh;transform:translateX(-50%);z-index:2;color:#F2E8D2;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;opacity:.8;animation:bob 2.6s infinite ease-in-out}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- pillars ---------- */
.pillars{background:var(--bg-alt);padding:var(--s5) 0}
.pillars .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pillar{text-align:center;padding:var(--s2)}
.pillar .glyph{font-size:1.9rem;margin-bottom:.6rem}
.pillar h3{font-size:var(--t2);font-weight:600;margin-bottom:.35rem;color:var(--ink)}
.pillar h3 span{color:var(--lantern)}
.pillar p{font-size:.9rem;color:var(--ink-soft);max-width:30ch;margin:0 auto}

/* ---------- section headings ---------- */
.sec-head{margin-bottom:var(--s4)}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;color:var(--lantern);font-weight:700;margin-bottom:var(--s1)}
.kicker::before{content:"";width:30px;height:1px;background:var(--lantern)}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,var(--t5));line-height:1.22;font-weight:600;max-width:24ch;text-wrap:balance}
.sec-head p.lead{margin-top:var(--s3);color:var(--ink-soft);max-width:62ch;font-size:var(--t1);font-weight:300}

/* ---------- story (golden split 1 : φ) ---------- */
.story .wrap{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center}
.story-imgs{position:relative}
.story-imgs .main{border-radius:18px;box-shadow:var(--shadow);aspect-ratio:.7;object-fit:cover;width:100%}
.story-imgs .float{
  position:absolute;right:-4%;bottom:-9%;width:46%;border-radius:14px;border:6px solid var(--panel);
  box-shadow:var(--shadow);aspect-ratio:.8;object-fit:cover;
}
.story-copy .time{font-size:var(--t3);color:var(--lantern);font-weight:500;font-style:italic}
.story-copy h2{font-size:clamp(1.9rem,3vw,var(--t4));margin:.4rem 0 var(--s3);line-height:1.272;font-weight:600}
.story-copy p{color:var(--ink-soft);margin-bottom:var(--s3);max-width:60ch}
.story-copy p b{color:var(--ink);font-weight:600}
.story-quote{
  border-left:3px solid var(--gold-bright);padding:.4rem 0 .4rem var(--s3);margin:var(--s3) 0;
  font-size:var(--t2);line-height:1.618;font-style:italic;color:var(--ink);
}
.market-times{display:flex;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.mt{border-top:2px solid var(--line);padding-top:.7rem;min-width:130px;flex:1}
.mt b{font-size:var(--t2);color:var(--gold);font-weight:600;display:block}
.mt span{font-size:.8rem;color:var(--ink-soft)}

/* ---------- menu ---------- */
.menu-sec{background:var(--bg-alt)}
.daily-note{
  display:flex;gap:var(--s3);align-items:center;background:var(--panel);border:1px dashed var(--gold-bright);
  border-radius:16px;padding:var(--s3) var(--s4);margin-bottom:var(--s4);box-shadow:var(--shadow);
}
.daily-note .sun{font-size:1.7rem}
.daily-note p{font-size:.95rem;color:var(--ink-soft)}
.daily-note p b{color:var(--ink)}
.dish-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.dish{
  background:var(--panel);border-radius:16px;overflow:hidden;border:1px solid var(--line);
  transition:transform .35s ease, box-shadow .35s ease;position:relative;
}
.dish:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.dish .ph{aspect-ratio:.786;overflow:hidden}  /* ≈ φ-derived portrait */
.dish .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.dish:hover .ph img{transform:scale(1.06)}
.dish .info{padding:var(--s2) var(--s3) var(--s3)}
.dish h4{font-size:1.02rem;font-weight:600;line-height:1.35}
.dish .en{font-size:.8rem;color:var(--ink-soft);font-style:italic;margin:.15rem 0 .5rem}
.dish .price{font-size:.85rem;font-weight:700;color:var(--lantern);letter-spacing:.02em}
.dish .price small{color:var(--ink-soft);font-weight:400}
.dish.hidden-dish{display:none}
.dish-grid.expanded .hidden-dish{display:block;animation:fadeup .5s ease}
.menu-foot{display:flex;gap:var(--s3);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.btn-outline{background:transparent;border:1.5px solid var(--lantern);color:var(--lantern)}
.btn-outline:hover{background:var(--lantern);color:#FFF7EA}

/* ---------- experiences (tour & class) ---------- */
.exp{position:relative}
.exp-card{
  display:grid;grid-template-columns:1.618fr 1fr;background:var(--panel);border-radius:22px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:var(--s4);
}
.exp-card.flip{grid-template-columns:1fr 1.618fr}
.exp-media{position:relative;min-height:420px}
.exp-media img,.exp-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exp-badge{
  position:absolute;top:var(--s2);left:var(--s2);background:rgba(18,16,8,.72);color:#F5D98B;backdrop-filter:blur(6px);
  padding:.45rem 1rem;border-radius:99px;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
}
.exp-body{padding:var(--s5) var(--s4);display:flex;flex-direction:column;justify-content:center}
.exp-body h3{font-size:clamp(1.7rem,2.6vw,var(--t4));line-height:1.272;font-weight:600;margin:.4rem 0 var(--s3)}
.exp-body>p{color:var(--ink-soft);margin-bottom:var(--s3)}
.exp-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3);margin:var(--s2) 0 var(--s4)}
.fact{border-left:2px solid var(--gold-bright);padding-left:.8rem}
.fact b{display:block;font-size:.98rem;color:var(--ink);font-weight:600}
.fact span{font-size:.78rem;color:var(--ink-soft)}
.exp-steps{margin:0 0 var(--s3);padding:0;list-style:none;counter-reset:st}
.exp-steps li{
  counter-increment:st;position:relative;padding:.35rem 0 .35rem 2.4rem;font-size:.92rem;color:var(--ink-soft);
}
.exp-steps li::before{
  content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.42rem;font-size:.78rem;font-weight:700;
  color:var(--lantern);border:1px solid var(--lantern);border-radius:50%;width:1.65rem;height:1.65rem;
  display:flex;align-items:center;justify-content:center;
}
.exp-price{display:flex;align-items:baseline;gap:.618rem;margin-bottom:var(--s3)}
.exp-price b{font-size:var(--t3);color:var(--lantern);font-weight:700}
.exp-price span{font-size:.85rem;color:var(--ink-soft)}

/* ---------- experience packages ---------- */
.pkg-intro{max-width:62ch;color:var(--ink-soft);margin-bottom:var(--s4)}
.pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pkg{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .35s;
}
.pkg:hover{transform:translateY(-6px)}
.pkg .ph{aspect-ratio:1.618;overflow:hidden;position:relative}
.pkg .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.pkg:hover .ph img{transform:scale(1.05)}
.pkg .body{padding:var(--s4);display:flex;flex-direction:column;flex:1}
.pkg h4{font-size:clamp(1.35rem,2vw,var(--t3));font-weight:600;line-height:1.272;margin-bottom:var(--s2)}
.pkg .tl{list-style:none;margin:var(--s2) 0 var(--s3);padding:0}
.pkg .tl li{display:flex;gap:var(--s2);padding:.45rem 0;font-size:.92rem;color:var(--ink-soft);border-bottom:1px dashed var(--line)}
.pkg .tl li:last-child{border-bottom:0}
.pkg .tl b{flex:none;width:6.2rem;color:var(--gold);font-weight:700;font-size:.85rem;letter-spacing:.02em}
.pkg .gifts{background:var(--bg-alt);border-radius:14px;padding:var(--s2) var(--s3);font-size:.88rem;color:var(--ink-soft);margin-bottom:var(--s3)}
.pkg .gifts b{display:block;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--lantern);margin-bottom:.4rem;font-weight:700}
.pkg .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.pkg .foot .p b{font-size:var(--t3);color:var(--lantern);font-weight:700}
.pkg .foot .p span{display:block;font-size:.78rem;color:var(--ink-soft)}
.pkg-note{font-size:.82rem;color:var(--ink-soft);margin-top:var(--s3);text-align:center}
@media(max-width:880px){.pkg-grid{grid-template-columns:1fr}.pkg .body{padding:var(--s3)}}

/* ---------- chef ---------- */
.chef{background:var(--green);color:#F2ECD9;position:relative;overflow:hidden}
[data-theme="dark"] .chef{background:#1A2B1E}
.chef .wrap{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center}
.chef img{border-radius:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);width:100%}
.chef .kicker{color:#E8C36B}.chef .kicker::before{background:#E8C36B}
.chef h2{font-size:clamp(1.8rem,3vw,var(--t4));font-weight:600;line-height:1.272;margin-bottom:var(--s3);color:#FBF6E7}
.chef p{color:#C9D3BC;margin-bottom:var(--s3);max-width:58ch}
.chef p b{color:#FBF6E7}
.chef blockquote{font-size:var(--t2);font-style:italic;color:#F5D98B;border-left:3px solid #E8C36B;padding-left:var(--s3);margin-top:var(--s3);line-height:1.618}

/* ---------- gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:var(--s1)}
.g{border-radius:14px;overflow:hidden;position:relative}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.g:hover img{transform:scale(1.07)}
.g.tall{grid-row:span 2}.g.wide{grid-column:span 2}
.g .cap{
  position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .7rem;font-size:.75rem;color:#FFF6E4;letter-spacing:.06em;
  background:linear-gradient(0deg,rgba(15,12,5,.72),transparent);opacity:0;transition:opacity .4s;
}
.g:hover .cap{opacity:1}

/* ---------- blog ---------- */
.blog-sec{background:var(--bg-alt)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.post{
  background:var(--panel);border-radius:16px;overflow:hidden;border:1px solid var(--line);
  transition:transform .35s, box-shadow .35s;display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .ph{aspect-ratio:1.618;overflow:hidden}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.post:hover .ph img{transform:scale(1.06)}
.post .body{padding:var(--s3);display:flex;flex-direction:column;gap:.618rem;flex:1}
.post .tag{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:700}
.post h4{font-size:var(--t1);font-weight:600;line-height:1.35}
.post .en{font-size:.85rem;font-style:italic;color:var(--ink-soft)}
.post p{font-size:.88rem;color:var(--ink-soft);flex:1}
.post .more{font-size:.8rem;font-weight:700;color:var(--lantern);letter-spacing:.05em}

/* ---------- booking ---------- */
.booking .wrap{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:start}
.contact-side .card{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:var(--s4);margin-bottom:var(--s3);box-shadow:var(--shadow);
}
.c-line{display:flex;gap:.9rem;align-items:flex-start;padding:.55rem 0;font-size:.92rem}
.c-line .ic{width:2.1rem;height:2.1rem;border-radius:10px;background:var(--bg-alt);display:flex;align-items:center;justify-content:center;flex:none;font-size:1rem}
.c-line b{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.c-line a:hover{color:var(--lantern)}
.chat-btns{display:flex;gap:.6rem;margin-top:var(--s1);flex-wrap:wrap}
.chat{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.45rem;border-radius:12px;padding:.7rem .9rem;
  font-size:.83rem;font-weight:700;transition:transform .25s;min-width:110px;
}
.chat:hover{transform:translateY(-2px)}
.chat.wa{background:#DCF3E1;color:#1B7A43}
.chat.kk{background:#FBE94E;color:#3B1E1E}
[data-theme="dark"] .chat.wa{background:#1E3A28;color:#7BD99B}
[data-theme="dark"] .chat.kk{background:#4A3E08;color:#F5DE55}
.map-embed{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);height:230px}
.map-embed iframe{width:100%;height:100%;border:0;filter:saturate(.9)}
[data-theme="dark"] .map-embed iframe{filter:invert(.88) hue-rotate(180deg) saturate(.7)}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:var(--s4);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.f-full{grid-column:1/-1}
.field label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem;color:var(--ink);
  font-family:inherit;font-size:.95rem;transition:border .25s, box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-bright);box-shadow:0 0 0 3px rgba(201,162,75,.18)}
.field textarea{resize:vertical;min-height:96px}
.form-note{font-size:.8rem;color:var(--ink-soft);margin-top:var(--s1)}
.form-ok{
  display:none;margin-top:var(--s2);background:#E8F4E4;color:#256029;border-radius:12px;padding:1rem 1.2rem;font-size:.9rem;font-weight:600;
}
[data-theme="dark"] .form-ok{background:#20351F;color:#9CD99A}
.form-ok.show{display:block;animation:fadeup .4s ease}

/* ---------- footer ---------- */
footer{background:var(--green);color:#D9E0CC;padding:var(--s5) 0 var(--s3)}
[data-theme="dark"] footer{background:#0C120B}
.f-grid{display:grid;grid-template-columns:1.618fr 1fr 1fr 1fr;gap:var(--s3);margin-bottom:var(--s4)}
.f-brand img{height:118px;width:auto;margin-bottom:var(--s3)}
.f-brand p{font-size:.88rem;max-width:34ch;color:#B7C2A8;font-style:italic}
footer h5{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:#E8C36B;margin-bottom:var(--s1);font-weight:700}
footer li{list-style:none;padding:.28rem 0;font-size:.88rem}
footer a:hover{color:#F5D98B}
.f-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:var(--s2);display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:.78rem;color:#93A183}

/* ---------- mobile sticky CTA ---------- */
.m-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--panel);border-top:1px solid var(--line);padding:.6rem .8rem;gap:.6rem;box-shadow:0 -8px 30px rgba(0,0,0,.12)}
.m-cta .btn{flex:1;justify-content:center;padding:.8rem 0;font-size:.85rem}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.rv.in{opacity:1;transform:none}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .dish-grid{grid-template-columns:repeat(3,1fr)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  nav.links{display:none}
}
@media(max-width:880px){
  .story .wrap,.chef .wrap,.booking .wrap{grid-template-columns:1fr}
  .exp-card,.exp-card.flip{grid-template-columns:1fr}
  .exp-media{min-height:300px}
  .story-imgs .float{right:2%}
  .pillars .wrap{grid-template-columns:1fr;gap:var(--s2)}
  .blog-grid{grid-template-columns:1fr}
  .dish-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .f-grid{grid-template-columns:1fr 1fr}
  .burger{display:block}
  .cta-nav{display:none}
  .nav{height:82px}
  .brand img{height:62px}
  section{padding:var(--s4) 0}
  section[id],div[id]{scroll-margin-top:104px}
  .hero{padding:0}
  .pillars{padding:var(--s4) 0}
  .sec-head{margin-bottom:var(--s3)}
  .daily-note{flex-direction:column;align-items:flex-start;gap:var(--s1);padding:var(--s3)}
  .m-cta{display:flex}
  body{padding-bottom:64px}
  .form-grid{grid-template-columns:1fr}
  .exp-body{padding:var(--s3)}
}
@media(max-width:520px){
  .dish-grid{grid-template-columns:1fr 1fr;gap:var(--s1)}
  .dish .info{padding:.7rem .8rem 1rem}
  .hero-meta{gap:var(--s2)}
  .f-grid{grid-template-columns:1fr}
}
/* mobile slide menu */
.m-menu{
  position:fixed;inset:0;background:var(--bg);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);transform:translateX(100%);transition:transform .4s cubic-bezier(.7,0,.3,1);
}
.m-menu.open{transform:none}
.m-menu a{font-size:var(--t2);font-weight:600;font-family:'Playfair Display',serif}
.m-menu a:hover{color:var(--lantern)}
.m-close{position:absolute;top:1.4rem;right:1.6rem;background:none;border:0;font-size:1.8rem;color:var(--ink);cursor:pointer}

/* ============================================================
   BỔ SUNG CHO WORDPRESS
   Trang tĩnh / bài viết / danh sách — dùng lại token của thiết kế
   ============================================================ */
.dicho-page{padding:calc(var(--s6) + 2rem) 0 var(--s6)}
.dicho-page .sec-head h1{font-size:clamp(1.9rem,3.4vw,var(--t5));line-height:1.22;font-weight:600;max-width:26ch;text-wrap:balance}
.dicho-thumb{margin-bottom:var(--s4);border-radius:18px;overflow:hidden}
.dicho-thumb img{width:100%;height:auto;display:block}
.entry-content{max-width:72ch;color:var(--ink-soft);font-size:var(--t0)}
.entry-content > * + *{margin-top:var(--s2)}
.entry-content h2,.entry-content h3,.entry-content h4{font-family:"Playfair Display",serif;color:var(--ink);margin-top:var(--s4);font-weight:600}
.entry-content h2{font-size:var(--t3)}
.entry-content h3{font-size:var(--t2)}
.entry-content a{color:var(--lantern)}
.entry-content img{max-width:100%;height:auto;border-radius:14px}
.entry-content blockquote{border-left:3px solid var(--lantern);padding-left:var(--s3);font-family:"Playfair Display",serif;font-style:italic;color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:1.4rem}
.blog-sec .navigation.pagination{display:flex;gap:.6rem;justify-content:center;width:100%}
.blog-sec .page-numbers{padding:.5rem .9rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink-soft)}
.blog-sec .page-numbers.current{background:var(--lantern);color:#fff;border-color:var(--lantern)}
.blog-sec .post .ph img{width:100%;height:100%;object-fit:cover}
.links li{list-style:none}
.links ul{display:contents}

/* Tour đi chợ & Lớp nấu ăn là 2 block riêng nhưng phải liền mạch như bản thiết kế:
   khoảng cách giữa chúng do margin-bottom của .exp-card đảm nhiệm. */
section.exp#tour{padding-bottom:0}
section.exp#class{padding-top:0}

/* Thanh quản trị của WordPress khi đã đăng nhập */
.admin-bar #header{top:32px}
.admin-bar .m-menu{top:32px}
@media screen and (max-width:782px){
  .admin-bar #header{top:46px}
  .admin-bar .m-menu{top:46px}
}