/* GenZ Coffee — thanhconghpt.com/genzcoffee. Phong cách theo chamberlaincoffee.com, màu nhận diện GenZ. */
:root{
  --bg:#F5EDE3; --sheet:#FFFDFA; --card:#fff; --ink:#2B1B12; --muted:#6B5646; --line:#E6D9CA;
  --brand:#E98A2E; --cta:#C4581A; --cta-h:#A94811; --dark:#2B1B12; --cream:#FCEFD3;
  --r-lg:28px; --r-md:20px; --r-sm:12px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.gz{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.h1{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;line-height:1.12;margin:0 0 .4em}
.wrap{max-width:1296px;margin:0 auto;padding:0 32px}
.muted{color:var(--muted)}
.center{text-align:center;margin-top:32px}
.center-t{text-align:center}
.note{text-align:center;color:var(--muted);font-size:14px;margin-top:24px}
.note a{color:var(--cta);font-weight:600}

/* nút */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 28px;border-radius:var(--r-sm);background:var(--cta);color:#fff;font:600 15px/1 var(--sans);text-decoration:none;border:2px solid var(--cta);transition:background .15s,border-color .15s,transform .15s}
.btn:hover{background:var(--cta-h);border-color:var(--cta-h)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.btn-w{background:#fff;color:var(--ink);border-color:#fff;min-width:220px}
.btn-w:hover{background:var(--cream);border-color:var(--cream)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* thanh trên + header */
.topbar{background:var(--dark);color:#F5EDE3;text-align:center;font-size:13px;padding:8px 16px}
.hd{background:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line)}
.hd-in{max-width:1296px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;gap:36px}
.logo{display:block;flex:none}
.logo-svg{width:96px;height:auto;display:block}
.nav{display:flex;gap:28px;flex:1}
.nav a{font:600 15px/1 var(--serif);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--brand)}
.hd-r{display:flex;align-items:center;gap:14px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:999px;padding:8px 14px;font:600 13px/1 var(--sans);text-decoration:none}
.pill:hover{background:var(--cta)}
.ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;text-decoration:none}
.ico:hover{background:var(--bg)}
.burger{display:none;background:none;border:0;padding:6px;color:var(--ink);cursor:pointer}
.mnav{display:none}

/* hero */
.hero{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;background:var(--dark)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;background:var(--img) center/cover no-repeat;opacity:0;transition:opacity .8s;display:flex;align-items:center}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(25,14,7,.72) 0%,rgba(25,14,7,.35) 45%,rgba(25,14,7,0) 75%)}
.slide.on{opacity:1;z-index:1}
.hero-tx{position:relative;max-width:1296px;width:100%;margin:0 auto;padding:0 32px;color:#fff}
.hero-tx h1,.hero-tx .h1{font-size:clamp(40px,5vw,62px);max-width:12ch;display:block}
.hero-tx p{font-size:clamp(17px,1.6vw,21px);margin:0 0 28px;max-width:32ch;opacity:.95}
.dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:10px;z-index:2}
.dots button{width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;background:transparent;padding:0;cursor:pointer}
.dots button.on{background:#fff}

/* dải cam kết */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust-in{max-width:1296px;margin:0 auto;padding:14px 32px;display:flex;justify-content:space-around;gap:16px;flex-wrap:wrap;font:600 14px/1.3 var(--serif)}
.trust-in span{display:inline-flex;align-items:center;gap:8px}
.trust-in b{color:var(--cta)}
.trust-in svg{color:var(--brand)}

/* khối */
.sec{padding:72px 0}
.sheet{background:var(--sheet);border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:-28px;position:relative;box-shadow:0 -1px 0 var(--line)}
.sheet + .sec{border-radius:0}
.sec:not(.sheet) + .sheet{margin-top:0}
.st{font-size:clamp(30px,3vw,40px);text-align:center;margin-bottom:36px}

/* thẻ đồ uống */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cards-3{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--card);border-radius:var(--r-md);padding:18px 18px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 1px 2px rgba(43,27,18,.05)}
.sheet .card{background:var(--bg)}
.tag{position:absolute;top:14px;left:14px;z-index:1;background:var(--ink);color:#fff;border-radius:999px;padding:5px 12px;font:600 12px/1 var(--serif)}
.card-img{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;margin-bottom:16px;background:var(--bg)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.04)}
.card-img-cream{background:#FDEFD0;aspect-ratio:4/3}
.card-img-cream img{object-fit:contain}
.card h3{font-size:20px;margin:0 0 4px}
.card .muted{font-size:14px;margin:0 0 16px;flex:1}
.card .btn{width:100%}
.price{font:700 30px/1 var(--serif);color:var(--cta);margin:4px 0 6px}
.jobs .card{padding:28px}

/* nhóm đồ uống */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.cat{text-decoration:none;text-align:center;font:600 15px/1.3 var(--serif)}
.cat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;margin-bottom:12px;transition:transform .3s}
.cat:hover img{transform:translateY(-4px)}

/* góc chill */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gal figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,253,250,.92);color:var(--ink);border-radius:999px;padding:6px 12px;font:600 13px/1 var(--serif)}

/* câu chuyện */
.story{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r-md);overflow:hidden;background:var(--dark);color:#F5EDE3;min-height:460px}
.story-tx{padding:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.story-tx h2{font-size:clamp(30px,3vw,40px);color:#fff}
.story-tx p{max-width:46ch;margin:0 0 18px}
.story-tx .btn{margin-top:10px}
.story-img{background:var(--img) center/cover no-repeat;min-height:320px}

/* quán */
.stores{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.store{background:var(--bg);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column}
.store-top{height:120px;display:flex;align-items:flex-end;padding:18px 22px;background:var(--brand);color:#fff}
.store.s1 .store-top{background:var(--dark)}
.store.s2 .store-top{background:#7A4A2A}
.store-city{font:700 34px/1 var(--serif);letter-spacing:-.02em}
.store-bd{padding:22px;display:flex;flex-direction:column;flex:1}
.store-bd h3{font-size:22px}
.store-bd p{margin:0 0 6px}
.store-bd .btn{margin-top:auto;align-self:flex-start}
.store-bd .muted{margin-bottom:18px;font-size:14px}

/* trang con */
.phead{padding:64px 0 88px;text-align:center}
.phead h1{font-size:clamp(38px,4.4vw,56px)}
.phead p{color:var(--muted);max-width:52ch;margin:0 auto 20px;font-size:18px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.chips a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;text-decoration:none;font:600 14px/1 var(--serif)}
.chips a:hover{border-color:var(--ink)}
.menu{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mgrp{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;background:var(--bg);border-radius:var(--r-md);padding:18px;scroll-margin-top:100px}
.mgrp img{width:150px;height:150px;object-fit:cover;border-radius:14px}
.mgrp h2{font-size:26px}
.mgrp ul{margin:0;padding:0;list-style:none}
.mgrp li{padding:6px 0;border-bottom:1px dashed var(--line)}
.mgrp li:last-child{border:0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.split-img{width:100%;border-radius:var(--r-md);aspect-ratio:4/5;object-fit:cover}
.prose h2{font-size:28px;margin-top:1.1em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);margin:0 0 12px}
.prose .btn{margin-top:18px}

/* chân trang */
.ft{background:#fff;border-radius:var(--r-lg) var(--r-lg) 0 0;margin-top:0;padding:64px 0 0}
.ft-in{display:grid;grid-template-columns:1.2fr 1fr 1.6fr;gap:40px;align-items:start}
.ft-brand .logo-svg{width:120px}
.ft-h{font-size:32px;margin:22px 0 6px}
.ft-brand p{color:var(--muted);margin:0 0 18px;font-size:14px}
.soc{display:flex;gap:10px}
.soc a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff}
.soc a:hover{background:var(--cta)}
.ft-cup{width:150px;justify-self:center;color:var(--ink)}
.ft-cols{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:24px}
.ft-cols h3{font-size:16px;margin-bottom:12px}
.ft-cols a{display:block;text-decoration:none;color:var(--muted);font-size:14px;padding:4px 0}
.ft-cols a:hover{color:var(--ink)}
.ft-bot{display:flex;justify-content:center;gap:24px;border-top:1px solid var(--ink);margin-top:48px;padding-top:16px;padding-bottom:24px;font-size:13px;color:var(--muted)}
.ft-bot a{text-decoration:none}

/* máy tính bảng */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:block}
  .hd-in{justify-content:space-between;gap:12px;padding:0 20px}
  .hd .logo{position:absolute;left:50%;transform:translateX(-50%)}
  .hd-in{position:relative}
  .nav-open .mnav{display:flex}
  .mnav{flex-direction:column;border-top:1px solid var(--line);padding:8px 20px 16px;background:#fff}
  .mnav a{padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font:600 17px/1.2 var(--serif)}
  .mnav a:last-child{border:0;color:var(--cta)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .ft-in{grid-template-columns:1fr 1fr}
  .ft-cols{grid-column:1/-1}
}
/* điện thoại */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .hd-in{height:64px;padding:0 12px}
  .logo-svg{width:78px}
  .pill span{display:none}
  .pill{padding:9px}
  .hd-r .ico{display:none}
  .hero{height:auto;min-height:0}
  .slides{position:relative;height:620px}
  .slide{align-items:flex-start}
  .slide::before{background:linear-gradient(180deg,rgba(25,14,7,.78) 0%,rgba(25,14,7,.35) 45%,rgba(25,14,7,0) 70%)}
  .hero-tx{padding:36px 20px 0;text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero-tx h1,.hero-tx .h1{font-size:44px;margin-left:auto;margin-right:auto}
  .hero-tx p{font-size:17px;margin-bottom:22px}
  .trust-in{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px;font-size:13px;gap:10px}
  .sec{padding:52px 0}
  .st{font-size:32px;margin-bottom:26px}
  .rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{flex:0 0 82%;scroll-snap-align:center}
  .gal.rail > *{flex-basis:70%}
  .cards-3,.stores,.menu{grid-template-columns:1fr}
  .cats{grid-template-columns:repeat(3,1fr);gap:14px}
  .cat{font-size:13px}
  .story{grid-template-columns:1fr}
  .story-tx{padding:40px 22px}
  .story-img{min-height:300px}
  .mgrp{grid-template-columns:96px 1fr;gap:16px;padding:14px}
  .mgrp img{width:96px;height:96px}
  .mgrp h2{font-size:22px}
  .split{grid-template-columns:1fr;gap:28px}
  .phead{padding:44px 0 72px}
  .ft{padding-top:48px}
  .ft-in{grid-template-columns:1fr}
  .ft-cup{width:120px;order:3}
  .ft-cols{grid-template-columns:1fr 1fr}
  .ft-quan{grid-column:1/-1}
  .ft-bot{flex-direction:column;align-items:center;gap:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
blockquote{margin:18px 0;padding:14px 20px;border-left:4px solid var(--brand);background:var(--bg);border-radius:0 var(--r-sm) var(--r-sm) 0;font:600 19px/1.45 var(--serif);color:var(--ink)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:8px 0 10px}
.vals>div{background:var(--bg);border-radius:var(--r-sm);padding:16px}
.vals h3{font-size:18px;margin:0 0 4px;color:var(--cta)}
.vals p{font-size:14px;margin:0}
@media (max-width:760px){.vals{grid-template-columns:1fr}}

/* 28/09/2026 SEO: đường dẫn, danh sách, hỏi đáp, xem thêm, dòng thương hiệu trên H1 */
.h1-eyebrow{display:block;font-family:"Be Vietnam Pro",sans-serif;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.bc{font-size:13px;color:#7a6a5f;padding-top:14px;padding-bottom:0}
.bc a{color:inherit}
.prose ul.ds{padding-left:20px;margin:0 0 16px}
.prose ul.ds li{margin:6px 0;line-height:1.55}
.prose-w{max-width:820px}
.faq{background:#fff;border-radius:14px;padding:14px 18px;margin:10px 0;border:1px solid #eadfd4}
.faq summary{font-weight:600;cursor:pointer;line-height:1.4}
.faq p{margin:8px 0 0;line-height:1.6}
.lq{display:flex;flex-wrap:wrap;gap:10px}
.lq-a{background:#fff;border:1px solid #eadfd4;border-radius:999px;padding:9px 16px;text-decoration:none;color:inherit;font-weight:500}

/* ================================================================
   28/09/2026 — "SÂN NHÀ CỦA THẾ HỆ Z" (anh Hiếu chốt định vị + xưng "tụi mình – cậu"; nghiên cứu AN café + đối thủ:
   seo\GENZ-DINH-VI-THUONG-HIEU.md). Khác Highlands (đỏ nâu), Starbucks (xanh lá), Phê La (nâu cổ), Katinat (sáng), AN café (kem + đỏ son):
   nền THAN tối như sân quán buổi tối, VÀNG ĐÈN DÂY làm điểm nhấn, cam logo, chữ tiêu đề sans đậm hẹp (Bricolage Grotesque).
   Lớp này ĐÈ lên phần trên; xoá khối này là về giao diện sáng cũ.
   ================================================================ */
:root{
  --bg:#121015; --sheet:#19161D; --card:#221E27; --ink:#F5EEE3; --muted:#B8ACA0; --line:rgba(245,238,227,.16);
  --brand:#F08A24; --lamp:#FFC857; --neon:#C8F560; --dark:#0C0A0E; --cream:#F5EEE3;
  --display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
  --r-lg:30px; --r-md:22px; --r-sm:999px;
}
body.gz{background:var(--bg);color:var(--ink)}
h1,h2,h3,.h1{font-family:var(--display);font-weight:800;font-stretch:78%;letter-spacing:-.02em;line-height:.98}
em{font-style:normal}
h1 em,h2 em,.h1 em{color:var(--lamp)}
.muted{color:var(--muted)}
.kicker{font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--neon);margin:0 0 12px;text-align:center}
.story-tx .kicker{color:var(--lamp)}
.st{font-size:clamp(40px,5.6vw,80px);text-transform:uppercase}
.note{color:var(--muted)}
.note a{color:var(--lamp)}

/* nút */
.btn{border-radius:999px;background:var(--lamp);color:#140F08;border:0;font:700 15px/1 var(--sans);transition:transform .15s,box-shadow .25s,background .2s}
.btn:hover{background:#FFD77F;box-shadow:0 0 28px rgba(255,200,87,.45);transform:translateY(-2px);border:0}
.btn-w{background:var(--lamp);color:#140F08}
.btn-o{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-o:hover{background:var(--ink);color:#140F08;box-shadow:none;border:1.5px solid var(--ink)}

/* thanh trên, header */
.topbar{background:var(--dark);color:var(--lamp);font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.hd{background:rgba(18,16,21,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav a{font:700 16px/1 var(--display);font-stretch:85%;color:var(--ink)}
.nav a:hover,.nav a[aria-current]{border-color:var(--lamp)}
.pill{background:var(--lamp);color:#140F08}
.pill:hover{background:var(--brand);color:#140F08}
.ico,.burger{color:var(--ink)}
.ico:hover{background:rgba(255,255,255,.08)}
.mnav{background:var(--bg)!important;border-top:1px solid var(--line)!important}
.mnav a{border-bottom:1px solid var(--line)!important;font-family:var(--display)!important;color:var(--ink)}
.mnav a:last-child{color:var(--lamp)!important}

/* hero */
.hero{background:var(--dark)}
.slide::before{background:linear-gradient(90deg,rgba(8,6,10,.86) 0%,rgba(8,6,10,.5) 48%,rgba(8,6,10,.1) 80%)}
.hero-tx h1,.hero-tx .h1{font-size:clamp(64px,9vw,140px);text-transform:uppercase;max-width:9ch;line-height:.88}
.hero-tx p{font-size:clamp(18px,1.7vw,22px);max-width:30ch}
.h1-eyebrow{display:inline-block;font:700 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--neon);border:1px solid rgba(200,245,96,.5);border-radius:999px;padding:8px 12px;margin-bottom:18px;opacity:1}
.dau-nhan{position:absolute;right:6%;bottom:14%;z-index:3;width:138px;height:138px;border-radius:50%;background:var(--lamp);color:#140F08;display:grid;place-items:center;text-align:center;font:800 17px/1.02 var(--display);font-stretch:80%;text-transform:uppercase;box-shadow:0 0 40px rgba(255,200,87,.55);transform:rotate(10deg);animation:lac 5s ease-in-out infinite}
@keyframes lac{0%,100%{transform:rotate(10deg)}50%{transform:rotate(3deg) scale(1.05)}}
.dots button{border-color:var(--lamp)}
.dots button.on{background:var(--lamp)}

/* dải chữ chạy */
.marquee{background:var(--lamp);overflow:hidden;white-space:nowrap;border-top:1px solid var(--dark);border-bottom:1px solid var(--dark)}
.marquee-in{display:inline-flex;animation:mq 30s linear infinite;padding:13px 0}
.marquee span{font:800 17px/1 var(--display);font-stretch:80%;text-transform:uppercase;padding:0 20px;color:#140F08}
.marquee span::after{content:"✦";margin-left:40px;color:var(--brand)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.trust{background:var(--sheet);border-bottom:1px solid var(--line)}
.trust-in b{color:var(--lamp)}

/* khối + dây đèn trang trí đầu mỗi tấm */
.sheet{background:var(--sheet);box-shadow:none;border-top:1px solid var(--line)}
.sheet::before{content:"";position:absolute;left:0;right:0;top:-1px;height:18px;pointer-events:none;
  background:radial-gradient(circle at 50% 70%,var(--lamp) 0 3px,rgba(255,200,87,.35) 4px,transparent 9px) 0 0/46px 18px repeat-x;opacity:.9;filter:drop-shadow(0 0 4px rgba(255,200,87,.6))}

/* thẻ */
.card{background:var(--card);border:1px solid var(--line);box-shadow:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,200,87,.6);box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 24px rgba(255,200,87,.18)}
.sheet .card{background:var(--card)}
.card-img,.card-img-cream{background:#2A2530}
.card h3{font-size:26px;text-transform:uppercase;color:var(--ink)}
.tag{background:var(--neon);color:#10140A;font:800 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg)}
.cards .card:nth-child(2n) .tag{background:var(--lamp);color:#140F08;transform:rotate(3deg)}
.biet-danh{margin:0 0 2px;font:800 14px/1 var(--display);font-stretch:80%;letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.price{font:800 44px/1 var(--display);font-stretch:78%;color:var(--lamp)}

/* tối nay sân nhà có gì */
.san-nha{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 44px}
.sn{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;background:linear-gradient(160deg,rgba(255,200,87,.10),rgba(255,200,87,0) 55%)}
.sn b{display:block;font:800 26px/1 var(--display);font-stretch:78%;text-transform:uppercase;color:var(--lamp);margin-bottom:10px}
.sn span{color:var(--muted);font-size:15px}

/* nhóm món */
.cat{color:var(--ink);font:800 15px/1.2 var(--display);font-stretch:85%;text-transform:uppercase}
.cat img{border:2px solid rgba(255,200,87,.35)}
.cat:hover img{box-shadow:0 0 26px rgba(255,200,87,.45)}

/* góc sống ảo: polaroid dưới đèn */
.gal figure{background:#F5EEE3;border-radius:6px;padding:10px 10px 46px;box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:visible;transition:transform .3s}
.gal figure:nth-child(odd){transform:rotate(-2.2deg)}
.gal figure:nth-child(even){transform:rotate(2deg)}
.gal figure:hover{transform:rotate(0) translateY(-6px)}
.gal img{border-radius:3px}
.gal figcaption{left:0;right:0;bottom:14px;background:none;text-align:center;color:#1A140F;font:800 15px/1 var(--display);font-stretch:80%;text-transform:uppercase}

/* câu chuyện */
.story{background:var(--card);border:1px solid var(--line);color:var(--ink)}
.story-tx h2{font-size:clamp(40px,4.6vw,72px);text-transform:uppercase;color:var(--ink)}
.story-tx p{color:var(--muted)}

/* quán */
.store{background:var(--card);border:1px solid var(--line)}
.store-top{background:var(--brand);color:#140F08}
.store.s1 .store-top{background:var(--lamp);color:#140F08}
.store.s2 .store-top{background:var(--neon);color:#10140A}
.store-city{font:800 42px/1 var(--display);font-stretch:75%;text-transform:uppercase}
.store-bd h3{text-transform:uppercase}
.store-bd .btn-o{border-color:var(--line)}

/* trang con */
.phead h1{font-size:clamp(52px,7.4vw,112px);text-transform:uppercase;line-height:.9}
.phead p{color:var(--muted)}
.bc{color:var(--muted)}
.chips a{background:transparent;border:1px solid var(--line);color:var(--ink);font:700 14px/1 var(--display)}
.chips a:hover{border-color:var(--lamp);color:var(--lamp)}
.mgrp{background:var(--card);border:1px solid var(--line)}
.mgrp h2{text-transform:uppercase;color:var(--lamp)}
.mgrp li{border-bottom:1px dashed var(--line);color:var(--ink)}
.split-img{box-shadow:0 20px 50px rgba(0,0,0,.45)}
.prose h2{font-size:clamp(30px,3vw,42px);text-transform:uppercase;color:var(--ink)}
.prose p,.prose li{color:#D9CFC3}
.prose ul.ds li::marker{content:"✦  ";color:var(--lamp)}
blockquote{background:rgba(255,200,87,.08);border-left:4px solid var(--lamp);color:var(--ink);font:800 22px/1.3 var(--display);font-stretch:85%}
.vals>div{background:var(--card);border:1px solid var(--line)}
.vals h3{color:var(--lamp);text-transform:uppercase}
.vals p{color:var(--muted)}
.faq{background:var(--card);border:1px solid var(--line)}
.faq summary{font:800 19px/1.25 var(--display);font-stretch:88%;color:var(--ink)}
.faq p{color:var(--muted)}
.lq-a{background:transparent;border:1px solid var(--line);color:var(--ink)}
.lq-a:hover{border-color:var(--lamp);color:var(--lamp)}

/* chân trang */
.ft{background:var(--dark);border-top:1px solid var(--line)}
.ft-h{font-size:clamp(52px,6vw,96px);text-transform:uppercase;color:var(--lamp);line-height:.88}
.ft-brand p{color:var(--muted)}
.ft-cup{color:var(--lamp)}
.ft-cols h3{color:var(--ink);text-transform:uppercase}
.ft-cols a{color:var(--muted)}
.ft-cols a:hover{color:var(--lamp)}
.ft-bot{border-top:1px solid var(--line);color:var(--muted)}
.soc a{background:var(--lamp);color:#140F08}
.soc a:hover{background:var(--brand)}

@media (max-width:1100px){.san-nha{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .hero-tx h1,.hero-tx .h1{font-size:68px}
  .dau-nhan{width:98px;height:98px;font-size:13px;right:14px;bottom:20px}
  .st{font-size:44px}
  .phead h1{font-size:54px}
  .san-nha{grid-template-columns:1fr 1fr;gap:10px}
  .sn{padding:16px}
  .sn b{font-size:21px}
  .sn span{font-size:13px}
  .marquee span{font-size:14px;padding:0 12px}
  .marquee span::after{margin-left:24px}
}
@media (prefers-reduced-motion:reduce){.marquee-in,.dau-nhan{animation:none}}

.hero-tx .h1-eyebrow{display:table;margin-bottom:18px}
@media (max-width:760px){.hero-tx .h1-eyebrow{margin-left:auto;margin-right:auto}}

/* ================================================================
   12/10/2026 — THẺ MÓN SÁNG (việc #3193): ảnh món đã làm sáng nền kem, thẻ món đổi sang nền kem sáng
   kiểu thẻ sản phẩm chuỗi lớn để ảnh "nổi" trên nền than tối của trang. Chỉ áp cho .card-mon
   (món ruột + combo); xoá khối này là về thẻ tối cũ.
   ================================================================ */
.card.card-mon{background:#FFF9EF;border:0;color:#2B1B12;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.sheet .card.card-mon{background:#FFF9EF}
.card.card-mon:hover{border:0;box-shadow:0 16px 44px rgba(0,0,0,.38),0 0 26px rgba(255,200,87,.28)}
.card-mon .card-img,.card-mon .card-img-cream{background:#FFF1DA}
.card-mon h3{color:#2B1B12}
.card-mon .muted{color:#6B5646}
.card-mon .biet-danh{color:#C4581A}
.card-mon .price{color:#C4581A}
.card-mon .btn-o{color:#2B1B12;border-color:#2B1B12}
.card-mon .btn-o:hover{background:#2B1B12;color:#FFF9EF;border-color:#2B1B12}
.card-mon .tag{box-shadow:0 2px 6px rgba(0,0,0,.18)}