/* ==========================================================================
   Gánh Ngon — Đồng bộ màu "Hầm rượu & Đồng thau"  (theme 1.7.1–1.7.2 — chủ đã duyệt 20/10/2026)
   Áp dụng: nạp SAU assets/site.css (theme ganhngon-saas ≥1.7.0).
   Chỉ đổi màu, chữ tiêu đề và nhịp khoảng cách; không đổi bố cục, không đổi nội dung.
   Soạn 19/10/2026 (Website & SEO); chủ duyệt 20/10/2026; nạp qua wp_enqueue_style('gns-palette') sau 'gns-site'.
   ========================================================================== */

/* 1) TOKENS — một hệ màu duy nhất -------------------------------------- */
:root{
  /* Màu chủ đạo (nền tối) */
  --gn-cellar:   #221A17;  /* Hầm rượu: hero, VIP, dải tiệc, footer   */
  --gn-cellar-2: #2E2420;  /* Hầm rượu 2: thẻ/khối nổi trên nền tối    */
  /* Màu nhấn (duy nhất) */
  --gn-brass:    #B8935A;  /* Đồng thau: nút chính, đường kẻ nhấn trên nền tối */
  --gn-brass-hi: #C9A56C;  /* hover của nút đồng thau                  */
  --gn-brass-ink:#7A5C2E;  /* Đồng thau đậm: link/nhấn chữ trên nền kem */
  /* Trung tính */
  --gn-cream:    #F2ECE2;  /* Giấy dó: nền sáng mặc định               */
  --gn-cream-2:  #E8E0D3;  /* Kem đậm: ô nhập, ảnh chờ, khối phụ       */
  --gn-line:     #D9CFC0;  /* Đường kẻ trên nền kem                    */
  --gn-line-dk:  rgba(242,236,226,.14); /* Đường kẻ trên nền tối       */
  /* Chữ */
  --gn-ink:      #221A17;  /* chữ chính trên nền kem (14.6:1)          */
  --gn-muted:    #655950;  /* chữ phụ trên nền kem (5.8:1)             */
  --gn-on-dark:  #F2ECE2;  /* chữ chính trên nền tối (14.6:1)          */
  --gn-on-dark-2:#B7AA9A;  /* chữ phụ trên nền tối (7.5:1)             */

  /* Nhịp khoảng cách & bo góc */
  --gn-band-y: clamp(64px, 8vw, 128px);
  --gn-gap:    clamp(20px, 2.4vw, 32px);
  --gn-radius: 6px;

  /* Ánh xạ các hệ token cũ về hệ mới (site.css đang có 3 hệ chồng nhau) */
  --wood:var(--gn-cellar); --wood-2:var(--gn-cellar-2); --wood-3:var(--gn-cellar-2);
  --stone:var(--gn-cellar);
  --lantern:var(--gn-brass); --lantern-2:var(--gn-brass-hi); --lantern-ink:var(--gn-brass-ink);
  --giay:var(--gn-cream); --giay-2:var(--gn-cream); --muc:var(--gn-ink);
  --leaf-ok:#4F6B4A;
  --char:var(--gn-cellar); --char-2:var(--gn-cellar-2); --char-3:var(--gn-cellar-2);
  --ivory:var(--gn-cream); --paper:var(--gn-cream); --sand:var(--gn-cream-2);
  --ember:var(--gn-brass-ink); --ember-deep:var(--gn-cellar-2);
  --gold:var(--gn-brass); --gold-soft:var(--gn-brass-hi);
  --ink:var(--gn-ink); --muted:var(--gn-muted);
  --line:var(--gn-line); --line-light:var(--gn-line-dk);
  --radius:var(--gn-radius); --radius-sm:4px; --radius-btn:4px;
  --band-y:var(--gn-band-y);
}
/* hệ .gnp (trang đối tác/voucher) và .gnlg (trang lẩu gà) */
.gnp{--gn-primary:var(--gn-cellar);--gn-primary-soft:var(--gn-cellar-2);--gn-accent:var(--gn-brass);--gn-accent-hover:var(--gn-brass-hi);
  --gn-bg:var(--gn-cream);--gn-card:#fff;--gn-text:var(--gn-ink);--gn-text-soft:var(--gn-muted);--gn-text-mute:var(--gn-muted);
  --gn-text-on-dark:var(--gn-on-dark);--gn-border:var(--gn-line);--gn-border-strong:#C4B6A2;--gn-sand:var(--gn-cream-2);
  --gn-gold-text:var(--gn-brass-ink);--gn-gold-bg:var(--gn-cream-2);--gn-font-display:var(--display)}
.gnlg{--lg-ink:var(--gn-ink)!important;--lg-soft:var(--gn-muted)!important;--lg-line:var(--gn-line)!important;
  --lg-gold:var(--gn-brass)!important;--lg-cream:var(--gn-cream-2)!important}

/* 2) NỀN SECTION — chỉ còn 2 mặt: Hầm rượu (tối) và Giấy dó (kem) ------- */
body{background:var(--gn-cream);color:var(--gn-ink)}
.band-ivory,.band-paper,.band-sand{background:var(--gn-cream)}
/* hai dải kem liền nhau: ngăn bằng 1 đường kẻ mảnh thay vì đổi màu nền */
.band-ivory+.band-ivory,.band-ivory+.band-paper,.band-ivory+.band-sand,
.band-paper+.band-ivory,.band-paper+.band-paper,.band-paper+.band-sand,
.band-sand+.band-ivory,.band-sand+.band-paper{border-top:1px solid var(--gn-line)}
.band-wood,.band-night,.band-stone,.band-ember,.booking,.hero,.hero-banner,.page-hero-img,.bestseller{
  background:var(--gn-cellar);background-image:none;color:var(--gn-on-dark-2)}
.band-wood p,.band-night p,.band-stone p,.band-ember p{color:var(--gn-on-dark-2)}
.band-wood .title,.band-night .title,.band-stone .title,.band-ember .title,.title-light{color:var(--gn-on-dark)}
.band{padding-block:var(--gn-band-y)}

/* Header & footer cùng một màu với hero, ngăn bằng hairline */
.site-header{background:rgba(34,26,23,.94);border-bottom:1px solid var(--gn-line-dk)}
.site-footer{background:var(--gn-cellar);color:var(--gn-on-dark-2);border-top:1px solid var(--gn-line-dk)}
.site-footer a{color:var(--gn-on-dark)}
.footer-title{color:var(--gn-brass);letter-spacing:.04em}
.footer-legal a,.footer-social a{color:var(--gn-on-dark-2)}

/* 3) THẺ & KHỐI ---------------------------------------------------------- */
.card,.svc-card,.dish-card,.news-card,.cat-card,.kitchen-card,.pot article,.package,.contact-card,.who li,.gns-dock-sheet,.gns-wechat-card{
  background:#FBF8F3;border:1px solid var(--gn-line);border-radius:var(--gn-radius);box-shadow:none!important}
.band-wood .card,.band-night .card,.booking .card{background:var(--gn-cream);border-color:transparent}
.sig-card{background:var(--gn-cellar-2);border-color:var(--gn-line-dk);border-radius:var(--gn-radius)}
.svc-media,.svc-frame,.gn-sig-photo,.gn-sig-card-media{background:var(--gn-cream-2);border-radius:var(--gn-radius)}
.gn-sig-photo{box-shadow:none}
.svc-strip figcaption{background:rgba(34,26,23,.78)}

/* 4) NÚT — một kiểu nút chính, một kiểu nút phụ -------------------------- */
.btn{border-radius:var(--radius-btn);letter-spacing:.01em;font-weight:600}
.btn-gold,.btn-ember,.btn-dark.is-primary,.gns-handoff-send{background:var(--gn-brass);color:var(--gn-cellar);border-color:var(--gn-brass)}
.btn-gold:hover,.btn-ember:hover{background:var(--gn-brass-hi);color:var(--gn-cellar)}
.btn-dark{background:var(--gn-cellar);color:var(--gn-on-dark)}
.btn-outline,.btn-ghost-dark{color:var(--gn-ink);border-color:var(--gn-ink);background:transparent}
.btn-outline:hover{background:var(--gn-ink);color:var(--gn-cream)}
.btn-ghost-light{color:var(--gn-on-dark);border-color:rgba(242,236,226,.45)}
.btn-ghost-light:hover{border-color:var(--gn-on-dark);background:transparent}
:focus-visible{outline:2px solid var(--gn-brass);outline-offset:3px}

/* 5) LINK & CHỮ NHẤN ----------------------------------------------------- */
/* 1.7.1: :where() — độ ưu tiên chỉ 1 class, để style nút/thành phần (vd .gnlg .lg-btn) thắng */
.band-ivory :where(a:not(.btn,.contact-card,.kitchen-card,.sig-card,.link-light)),
.band-sand :where(a:not(.btn,.contact-card,.kitchen-card,.sig-card,.link-light)){color:var(--gn-brass-ink)}
.band-ivory .eyebrow:not(.eyebrow-light):not(.eyebrow-gold),.band-sand .eyebrow:not(.eyebrow-light):not(.eyebrow-gold){color:var(--gn-brass-ink)}
.kicker,.sig-kicker,.dish-group,.news-meta,.package-size,.booking-card-kicker{color:var(--gn-brass-ink)}
.band-wood .kicker,.band-night .kicker,.kitchen-body .kicker{color:var(--gn-brass)}
.faq-list summary:after{border-color:var(--gn-brass-ink)}

/* 6) CHỮ — Phudu chỉ dùng ở H1 hero; tiêu đề section dùng Be Vietnam Pro --- */
.hero h1,.page-hero h1{font-family:var(--display);font-weight:700;letter-spacing:.005em;color:var(--gn-on-dark)}
.title,.gn-sig-headline,.svc-body h3,.sig-card h3,.gn-sig-card-name{font-family:var(--text);text-transform:none}
.title{font-weight:500;letter-spacing:-.015em;line-height:1.15;font-size:clamp(1.625rem,1.1rem + 1.6vw,2.5rem);color:var(--gn-ink)}
.gn-sig-headline{font-weight:500;letter-spacing:-.01em;font-size:clamp(1.375rem,1rem + 1vw,1.875rem)}
.title+p,.title+.section-lead{margin-top:16px}
.title.title-light,.band-wood .title,.band-night .title,.band-stone .title,.band-ember .title,.hero .title,.bestseller .title,.booking .title{color:var(--gn-on-dark)}
p{max-width:68ch}

/* 7) SỬA LỖI TƯƠNG PHẢN ĐANG CÓ ----------------------------------------- */
/* Tiêu đề khối biên tập trang tiệc đang trắng trên nền kem (1.1:1) */
.gns-editor h2,.gns-editor h3{color:var(--gn-ink)!important}
/* Nút trang lẩu gà đang chữ vàng trên nền vàng (2.2:1) và chữ vàng trên navy (2.9:1) */
.gnlg a.lg-btn.is-main{background:var(--gn-brass)!important;color:var(--gn-cellar)!important}
.gnlg a.lg-btn.is-alt{background:var(--gn-cellar)!important;color:var(--gn-on-dark)!important}
.gnlg .lg-card{background:#FBF8F3;box-shadow:none}
.page-hero-plain h1{color:var(--gn-ink)}

/* 8) TẠM THỜI: ghi đè style inline #D4AF37/#2C1810 trong nội dung trang
      (/thuc-don/, /ve-ganh-ngon/, /khach-doan-tiec-rieng/). Nên xoá style inline
      trong trình soạn thảo rồi bỏ khối này. */
.gns-editor a[style*="D4AF37"][style*="background:#D4AF37"]{background:var(--gn-brass)!important;color:var(--gn-cellar)!important;border-radius:4px!important}
.gns-editor a[style*="border:1.5px solid #D4AF37"]{border-color:var(--gn-ink)!important;color:var(--gn-ink)!important;border-radius:4px!important}
.gns-editor a[style="color:#D4AF37"],a[style="color:#D4AF37"]{color:var(--gn-brass-ink)!important}
div[style*="color:#D4AF37"]{color:var(--gn-brass-ink)!important}

/* 9) 1.7.1 — Phudu chỉ còn ở H1 hero (.hero h1, .page-hero h1, h1.display).
      Mọi tiêu đề/nhãn khác dùng Be Vietnam Pro; chữ viết thường theo câu (sentence case). */
.kitchen-name,.space figcaption strong,.who h3,.pot h3,.ent h3,.package h3,.booking-card-title,.news-title,
.post-body h2,.post-aside-title,.cat-name,.results-title,.dish-name,.entry h2,.entry h3,.post-title,.vip-name,
.dish-tile-name,.who-list dt,.vip-rooms strong,.vip-lb-cap,.footer-title,.gns-more>summary,.gnp h2,.gnp h3,.gnlg h2,.gnlg h3,.gns-editor h2,.gns-editor h3{
  font-family:var(--text);font-weight:500;text-transform:none;letter-spacing:-.005em}
.drawer nav a,.drawer .drawer-nav a,.vip-rooms-nav a,.map-addr,.drawer-phone,.pot-n,.steps li:before,.process li:before,.pot-chips strong{font-family:var(--text)}
.footer-title{font-weight:600;letter-spacing:.04em}
.post-body h2,.entry h2{font-weight:600}

.display-dark,.page-hero-plain .display{color:var(--gn-ink)}

/* 10) 1.7.2 — đồng bộ phần còn sót (audit live 20/10/2026)
       a) token dự phòng mà khối <style> trong nội dung trang (DB) đang gọi: var(--gn-text,#1B2A4A), var(--gn-gold,#C9A96E)… */
:root{--gn-text:var(--gn-ink);--gn-text-soft:var(--gn-muted);--gn-border:var(--gn-line);--gn-gold:var(--gn-brass);--gn-primary:var(--gn-cellar);--gn-accent:var(--gn-brass)}
/*  b) trang Hình ảnh (/hinh-anh-review/): nút CTA chữ trắng trên vàng (2.2:1) + chữ dẫn xám */
.gn-gal-wrap{--g-ink:var(--gn-ink)!important;--g-soft:var(--gn-muted)!important;--g-line:var(--gn-line)!important}
.gn-gal-wrap .gn-gal-cta a{background:var(--gn-brass);color:var(--gn-cellar);border-radius:4px}
.gn-gal-wrap .gn-gal-cta a.alt{background:var(--gn-cellar);color:var(--gn-on-dark)}
/*  c) style inline #D4AF37 trong nội dung trang ngoài .gns-editor (vd /doi-tac/, /doi-tac/khach-san-resort/, /du-lich-phu-quoc/).
       TẠM THỜI — nên xoá style inline trong trình soạn thảo rồi bỏ khối này. */
a[style*="color:#D4AF37"]:not([style*="background:#D4AF37"]),td[style*="color:#D4AF37"],span[style*="color:#D4AF37"],strong[style*="color:#D4AF37"]{color:var(--gn-brass-ink)!important}
a[style*="background:#D4AF37"],button[style*="background:#D4AF37"]{background:var(--gn-brass)!important;color:var(--gn-cellar)!important;border-radius:4px!important}
a[style*="solid #D4AF37"]{border-color:var(--gn-ink)!important;border-radius:4px!important}
tr[style*="background:#2C1810"]{background:var(--gn-cellar)!important;color:var(--gn-on-dark)!important}
.band-wood a[style*="color:#D4AF37"],.band-night a[style*="color:#D4AF37"],.band-stone a[style*="color:#D4AF37"],.site-footer a[style*="color:#D4AF37"]{color:var(--gn-brass)!important}
[style*="color:#2C1810"]:not(tr){color:var(--gn-ink)!important}
.skip{color:var(--gn-ink)}

/* 11) 1.7.2.1 — palette/contrast hotfix (kiem-tra-1.7.2.md). CSS only, page content untouched.
   a) Partner + travel hub heroes: content has white text (inline) but the block had no dark background (1.16:1). */
.gns-editor .gn-aff-hero,.gns-editor .gn-dlpq-hero{background:var(--gn-cellar);color:var(--gn-on-dark);border-radius:var(--gn-radius);padding:clamp(40px,6vw,72px) clamp(20px,4vw,48px);margin:0 0 32px}
.gn-aff-hero .gn-container,.gn-dlpq-hero .gn-container{max-width:none;padding:0}
.gn-aff-hero h1,.gn-aff-hero h2,.gn-aff-hero h3,.gn-dlpq-hero h1,.gn-dlpq-hero h2,.gn-dlpq-hero h3{color:var(--gn-on-dark)!important}
.gn-aff-hero p,.gn-dlpq-hero p{color:var(--gn-on-dark)!important}
.gn-aff-hero .gn-aff-eyebrow,.gn-aff-hero [style*="color:#D4AF37"],.gn-dlpq-hero [style*="color:#D4AF37"]{color:var(--gn-brass-hi)!important}
.gn-aff-hero .gn-aff-stats strong{color:var(--gn-brass-hi)}
.gn-aff-hero .gn-aff-stats span{color:var(--gn-on-dark-2)}
.gn-aff-hero .gn-aff-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:8px 0 0}
.gn-aff-hero .gn-aff-stats>div{display:flex;flex-direction:column;gap:4px;padding:14px 12px;background:var(--gn-cellar-2);border:1px solid var(--gn-line-dk);border-radius:var(--gn-radius);text-align:center}
.gn-aff-hero .gn-cta-btn{background:var(--gn-brass);color:var(--gn-cellar)!important;border:1px solid var(--gn-brass)}
.gn-aff-hero .gn-cta-btn.ghost{background:transparent;color:var(--gn-on-dark)!important;border-color:var(--gn-on-dark-2)}
.gn-aff-hero .gn-cta-btn:hover{background:var(--gn-brass-hi);border-color:var(--gn-brass-hi);color:var(--gn-cellar)!important}
/* b) footer OSM credit (3.52:1 -> on-dark-2) */
.footer-map-credit{color:var(--gn-on-dark-2)}
/* c) off-palette inline colours -> tokens (TEMPORARY: remove once the inline styles are cleaned in the editor) */
.gns-editor p[style*="background:#F5F1E8"]{background:var(--gn-cream-2)!important;border-color:var(--gn-line)!important;color:var(--gn-muted)!important;border-radius:var(--gn-radius)!important}
.gns-editor [style*="color:#5A5A5A"]{color:var(--gn-muted)!important}
.gns-editor tr[style*="background:#FAFAFA"]{background:#FBF8F3!important}
.gns-editor tr[style*="background:#F5F1E8"],.gns-editor div[style*="background:#F5F1E8"]{background:var(--gn-cream)!important}
.gns-editor div[style*="border:1px solid #EAD9B0"]{border-color:var(--gn-line)!important}
.gns-editor select,.gns-editor input:not([type=checkbox]):not([type=radio]):not([type=submit]),.gns-editor textarea{background-color:#fff;color:var(--gn-ink)}
.gns-editor select[style*="#E8DFCB"],.gns-editor input[style*="#E8DFCB"],.gns-editor textarea[style*="#E8DFCB"]{border-color:var(--gn-border-strong)!important}
.cat-card.cat-chip{background:#FBF8F3}
.cat-chip[aria-pressed=true] .cat-count{color:var(--gn-on-dark-2)}
/*  .cat-count (image-card badge: absolute + dark pill) leaked into the chips: 6 muted-on-dark badges (1.26:1) stacked at the explorer corner. Show it inline as intended. */
.cat-chip .cat-count{position:static;background:none;padding:0;border-radius:0}
.gns-khu-b-grid figure{background:var(--gn-cellar)}

/* 12) 1.7.2.2 — UI polish + light motion (owner OK 20/10 08:35). CSS/JS only; text, prices, menu, forms untouched.
   a) /khach-doan-tiec-rieng/ + /du-lich-phu-quoc/ content blocks (.gn-kd-*): had no styles at all.
      Root cause of the "Đoàn khách quốc tế" overflow: `.gns-more-body a[href^="#"]` (44px tap-target rule) made each
      .gn-kd-svc card an inline-flex ROW, so h3 + p + tag sat side by side; that card's min-content
      ("WhatsApp/WeChat/Telegram" + "International") is wider than 358px -> right edge 410px at 390 and 360. */
.gns-editor .gn-kd-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px;margin:24px 0}
.gns-editor .gn-kd-services>br,.gns-editor .gn-kd-services>p:empty,.gn-kd-svc>br,.gn-kd-svc p:empty{display:none}
.gns-editor a.gn-kd-svc,.gns-more-body a.gn-kd-svc[href^="#"]{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;max-width:100%;min-height:0;overflow-wrap:anywhere;padding:18px 18px 16px;border:1px solid var(--gn-line);border-radius:var(--gn-radius);background:#FBF8F3;color:var(--gn-ink);text-decoration:none}
.gn-kd-svc h3{margin:0;font-family:var(--text);font-size:1.0625rem;font-weight:600;line-height:1.3;color:var(--gn-ink)}
.gn-kd-svc p{margin:0;font-size:.9375rem;line-height:1.5;color:var(--gn-muted);text-decoration:none}
.gn-kd-svc .gn-kd-svc-meta{margin-top:auto;padding:3px 10px;border:1px solid #846639;border-radius:999px;color:#846639;font-size:.75rem;font-weight:600;line-height:1.35}
.gn-kd-svc:hover{border-color:var(--gn-border-strong)}
.gn-kd-svc:hover h3{text-decoration:underline;text-underline-offset:3px}
.gns-editor .gn-kd-hero{background:var(--gn-cellar);color:var(--gn-on-dark);border-radius:var(--gn-radius);padding:clamp(36px,6vw,64px) clamp(20px,4vw,48px);margin:0 0 20px;text-align:center}
.gn-kd-hero .gn-container{max-width:none;padding:0}
.gn-kd-hero h2,.gn-kd-hero p{color:var(--gn-on-dark)!important}
.gn-kd-hero [style*="color:#D4AF37"]{color:var(--gn-brass-hi)!important}
.gn-kd-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.gn-kd-hero-meta>div{padding:6px 14px;border:1px solid var(--gn-line-dk);border-radius:999px;background:var(--gn-cellar-2);color:var(--gn-on-dark);font-size:.875rem}
.gn-kd-hero .gn-cta-btn{background:var(--gn-brass);color:var(--gn-cellar)!important;border:1px solid var(--gn-brass)}
.gn-cta-btn[href^="tel:"] bdi{margin-inline-start:.35em}
.gn-kd-hero .gn-cta-btn.ghost{background:transparent;color:var(--gn-on-dark)!important;border-color:var(--gn-on-dark-2)}
.gns-editor .gn-kd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.gns-editor .gn-kd-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid #8C7D6A;border-radius:999px;background:#FBF8F3;color:var(--gn-ink);font-size:.875rem;font-weight:500;text-decoration:none}
.gns-editor .gn-kd-tabs a:hover{border-color:var(--gn-ink)}
.gns-editor .gn-kd-process{counter-reset:gnstep;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px;margin:24px 0}
.gn-kd-process>.step{counter-increment:gnstep;position:relative;min-width:0;overflow-wrap:anywhere;padding:16px 16px 14px 56px;border:1px solid var(--gn-line);border-radius:var(--gn-radius);background:#FBF8F3}
.gn-kd-process>.step:before{content:counter(gnstep);position:absolute;left:14px;top:14px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gn-cellar);color:var(--gn-brass-hi);font-size:.875rem;font-weight:600}
.gn-kd-process>.step h4{margin:0 0 4px;font-size:1rem;font-weight:600;color:var(--gn-ink)}
.gn-kd-process>.step h4:empty{display:none}
.gn-kd-process>.step p{margin:0;font-size:.9rem;color:var(--gn-muted)}
[dir=rtl] .gn-kd-process>.step{padding:16px 56px 14px 16px}
[dir=rtl] .gn-kd-process>.step:before{left:auto;right:14px}
.gns-editor [style*="grid-template-columns"]>*{min-width:0;overflow-wrap:anywhere}
.gns-editor table{max-width:100%}
.gns-editor td,.gns-editor th{overflow-wrap:anywhere}
.gns-editor div[style*="box-shadow:0 4px 12px rgba(44,24,16"]{box-shadow:none!important;border-radius:var(--gn-radius)!important;background:#FBF8F3!important}

/* b) buttons: brass a touch brighter + 1px lift; clear two-tone focus ring (reads on cream and on cellar) */
.btn-ember,.btn-gold,.gn-cta-btn{transition:transform .2s ease-out}
.btn-ember:hover,.btn-gold:hover,.gn-cta-btn:not(.ghost):hover{background:var(--gn-brass-hi);color:var(--gn-cellar)}
.btn:focus-visible,.gn-cta-btn:focus-visible,.gn-kd-svc:focus-visible,.gn-kd-tabs a:focus-visible{outline:2px solid #F2ECE2;outline-offset:2px;box-shadow:0 0 0 2px #221A17}
/* c) header: more solid + hairline once scrolled (class from gn-motion.js); only the overlay's opacity animates */
.site-header:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--gn-cellar);border-bottom:1px solid rgba(201,165,108,.24);box-shadow:0 10px 24px -18px rgba(0,0,0,.7);opacity:0;transition:opacity .3s ease-out}
.site-header.is-scrolled:after{opacity:1}
/* d) image frames clip the hover zoom */
.vip-open,.gn-mv-card .gn-mv-media,.gn-mv-gal-item figure,.gn-sig-card-media,.news-media,.svc-media,.dish-tile-media{overflow:hidden}

@media (prefers-reduced-motion:no-preference){
  /* e) hero: background settles 1.06 -> 1 (transform only; the LCP image is painted from frame 1).
        Text/buttons rise in from opacity .01, so they still count as painted for LCP. */
  @keyframes gn12-zoom{from{transform:scale(1.06)}to{transform:none}}
  @keyframes gn12-in{from{opacity:.01;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hero-banner .hero-img,.page-hero-img .page-hero-bg{animation:gn12-zoom 1.2s cubic-bezier(.2,.7,.2,1) both;transform-origin:50% 40%}
  .hero-inner>*,.page-hero-inner>*{animation:gn12-in .6s cubic-bezier(.2,.7,.2,1) both}
  .hero-inner>:nth-child(2),.page-hero-inner>:nth-child(2){animation-delay:60ms}
  .hero-inner>:nth-child(3),.page-hero-inner>:nth-child(3){animation-delay:.12s}
  .hero-inner>:nth-child(n+4),.page-hero-inner>:nth-child(n+4){animation-delay:.18s}
  /* f) reveal on scroll: hidden state exists only under html.gn-js and only for elements below the fold (gn-motion.js) */
  html.gn-js .gn-rv{opacity:0;transform:translateY(16px)}
  html.gn-js .gn-rv.gn-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.16,1,.3,1) var(--gn-d,0ms),transform .5s cubic-bezier(.16,1,.3,1) var(--gn-d,0ms)}
  /* g) card image hover */
  .vip-slide img,.gn-sig-card-media img,.news-media img,.svc-media img,.dish-tile-media img,.gn-mv-card .gn-mv-pic img,.gn-mv-gal-item img{transition:transform .4s ease-out}
  @media (hover:hover){
    .vip-open:hover img,.gn-sig-card:hover .gn-sig-card-media img,.news-card:hover .news-media img,.svc-card:hover .svc-media img,.dish-tile:hover .dish-tile-media img,.gn-mv-card:hover .gn-mv-pic img,.gn-mv-gal-item:hover img{transform:scale(1.04)}
    .btn-ember:hover,.btn-gold:hover,.gn-cta-btn:hover{transform:translateY(-1px)}
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-banner .hero-img,.page-hero-bg,.hero-inner>*,.page-hero-inner>*{animation:none!important;transform:none!important;opacity:1!important}
  html.gn-js .gn-rv{opacity:1!important;transform:none!important}
  .site-header:after,.btn-ember,.btn-gold,.gn-cta-btn,.vip-slide img,.gn-sig-card-media img,.news-media img,.svc-media img,.dish-tile-media img,.gn-mv-pic img,.gn-mv-gal-item img{transition:none!important}
  .vip-open:hover img,.gn-sig-card:hover .gn-sig-card-media img,.news-card:hover .news-media img,.svc-card:hover .svc-media img,.dish-tile:hover .dish-tile-media img,.gn-mv-card:hover .gn-mv-pic img,.gn-mv-gal-item:hover img,.btn-ember:hover,.btn-gold:hover,.gn-cta-btn:hover{transform:none!important}
}
@media print{html.gn-js .gn-rv{opacity:1!important;transform:none!important}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 1.7.3.2: khach-doan hero <picture> must not become the positioning box */
.page-hero-img>picture.hero-pic{display:contents}

/* ===== 13. 1.7.3.2: no clipping at 360-390 px (ko/zh header, ru footer) ===== */
@media (max-width:900px){.wrap.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer-grid>*{min-width:0}
.footer-grid a,.footer-grid p,.footer-grid li,.footer-grid strong{overflow-wrap:anywhere}
.footer-grid iframe,.footer-grid img{max-width:100%}
@media (max-width:400px){
  .header-inner{gap:10px}
  .header-actions{gap:6px}
  .brand{min-width:0}
  .gn-lang-current{padding:0 8px;gap:4px}
}
@media (max-width:380px){.wrap.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* ===== 14. 1.7.3.4 ===== */
/* RU bottom bar: «Забронировать» fits at 320-440 px without changing the text */
@media (max-width:440px){
  :lang(ru) .action-bar{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.32fr)}
  :lang(ru) .action-bar a{padding-left:1px;padding-right:1px}
  :lang(ru) .action-bar .action-primary span{letter-spacing:-.01em}
}
@media (max-width:340px){
  .action-bar .action-primary span{font-size:12px;letter-spacing:-.02em}
  :lang(ru) .action-bar{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr)}
}