:root{
--ink:#241715;--bg:#FDF4E9;--surface:#FFFFFF;--brand:#A81F27;
--accent:#C79433;--deep:#241715;--line:#EBD9C0;--muted:#6B554D;
--rad:10px;--display:Georgia, 'Times New Roman', serif;
--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--wrap:1200px;--gap:clamp(18px,3vw,32px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.68 var(--sans);
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── header ─────────────────────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hd-in{display:flex;align-items:center;gap:18px;min-height:66px}
.brandmark{display:flex;align-items:center;gap:10px;font-family:var(--display);
font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:-.02em;flex:0 0 auto}
.brandmark .logo{width:40px;height:40px;border-radius:9px;object-fit:contain;flex:0 0 auto;background:var(--surface)}
.brandmark .dot{width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
background:var(--brand);color:#fff;font-size:13px;font-weight:800;letter-spacing:0}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:9px 13px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;
font-weight:600;white-space:nowrap}
.nav a:hover{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.nav a[aria-current=page]{color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,transparent)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;
background:var(--brand);color:#fff;font-weight:700;text-decoration:none;font-size:15px;border:0;
box-shadow:0 6px 18px color-mix(in srgb,var(--brand) 26%,transparent);transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:none}
.btn-sm{padding:9px 16px;font-size:14px}
.hd>.wrap>.btn{flex:0 0 auto}
.nav .btn{display:none}
/* Nút mở menu mobile: ẩn về mặt thị giác nhưng PHẢI còn trong tab order.
   Bản cũ đặt `#navtog{display:none}` ở đây và media query ≤760px chỉ bật lại `.navlbl`,
   nên trên mobile ô checkbox vẫn `display:none` → cả menu không tới được bằng bàn phím
   (WCAG 2.1.1). `<label>` tự nó không nhận focus, nên ẩn label là mất luôn đường vào.
   Ở desktop mới ẩn hẳn — xem media query >760px cuối file. */
.navlbl{display:none}
#navtog{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#navtog:focus-visible~.navlbl{outline:2px solid var(--brand);outline-offset:2px}
/* Desktop: nav luôn hiện nên nút mở là thừa — ẩn hẳn, đừng để nó chiếm một nhịp Tab vô ích. */
@media(min-width:761px){#navtog{display:none}}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(38px,6vw,74px) 0 clamp(34px,5vw,60px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse 20% 44% at 17% 106%, #A81F271A, transparent 62%),radial-gradient(ellipse 16% 38% at 45% 112%, #C7943316, transparent 62%),radial-gradient(ellipse 22% 48% at 79% 104%, #A81F2714, transparent 62%);pointer-events:none}
.hero-in{position:relative;display:grid;gap:clamp(26px,4vw,46px);align-items:center}
.hero-split .hero-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.hero-collage .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-centered .hero-in{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:900px;margin:0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;
background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);
font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px}
h1{font-size:clamp(30px,4.6vw,52px);margin-bottom:14px}
h1 .hl{color:var(--brand)}
.lede{font-size:clamp(16.5px,1.7vw,19px);color:var(--muted);max-width:58ch;margin-bottom:22px}
.hero-centered .lede{margin-left:auto;margin-right:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.hero-centered .cta-row{justify-content:center}
.finenote{font-size:13px;color:var(--muted);max-width:52ch}
.hero-art{position:relative}
.hero-art img{border-radius:var(--rad);box-shadow:0 22px 50px -22px color-mix(in srgb,var(--ink) 55%,transparent)}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.collage img{aspect-ratio:1;object-fit:cover;width:100%}
.collage img:first-child{grid-row:span 2;aspect-ratio:auto;height:100%}
.solo img{aspect-ratio:4/3;object-fit:cover;width:100%}
.badge-float{position:absolute;right:-6px;top:-14px;background:var(--surface);border:2px solid var(--brand);
color:var(--brand);border-radius:50%;width:88px;height:88px;display:grid;place-items:center;text-align:center;
font-weight:800;font-size:12.5px;line-height:1.2;box-shadow:0 10px 24px -12px var(--ink);padding:6px}
.badge-float b{display:block;font-size:21px;font-family:var(--display)}

/* ── dải số liệu ────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
border-radius:var(--rad);overflow:hidden;margin-top:34px}
.stats div{background:var(--bg);padding:18px 14px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:clamp(21px,2.6vw,29px);color:var(--brand)}
.stats span{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

/* ── section ────────────────────────────────────────────────────────── */
section{padding:clamp(40px,5.5vw,70px) 0}
.sec-head{max-width:64ch;margin-bottom:clamp(22px,3vw,34px)}
.sec-head.mid{margin-left:auto;margin-right:auto;text-align:center}
h2{font-size:clamp(24px,3.3vw,36px);margin-bottom:12px}
h3{font-size:clamp(18px,2.1vw,22px)}
.sec-head p{color:var(--muted);margin:0}
.tint{background:color-mix(in srgb,var(--brand) 6%,var(--bg))}

/* ── thẻ món ────────────────────────────────────────────────────────── */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grid-lg{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px color-mix(in srgb,var(--ink) 60%,transparent)}
.card-img{aspect-ratio:1;background:color-mix(in srgb,var(--brand) 8%,var(--bg));overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-strip{height:6px;background:linear-gradient(90deg,var(--brand),var(--accent))}
/* Thẻ không ảnh nằm chung lưới với thẻ có ảnh sẽ bị kéo giãn và trống hoác.
   Căn giữa theo chiều dọc + nền phớt màu thương hiệu để trông là một kiểu thẻ có chủ đích,
   không phải thẻ hỏng ảnh. */
.card-txt{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),
var(--surface) 62%)}
.card-txt .card-b{padding:20px 18px;gap:10px;min-height:132px;justify-content:center}
.card-txt .card-p{margin-top:14px}
.card-txt .rank{left:auto;right:10px;top:14px}
.card-txt .card-n{padding-right:40px;font-family:var(--display);font-size:17.5px;line-height:1.25;font-weight:700}
.card-ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);
font-size:40px;font-weight:700;color:color-mix(in srgb,var(--brand) 55%,var(--muted))}
.card-b{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-n{font-weight:650;font-size:14.6px;line-height:1.34;margin:0}
.card-p{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:17px;font-weight:700;color:var(--brand)}
.was{font-size:12.5px;color:var(--muted);text-decoration:line-through}
.card-cta{font-size:12.5px;font-weight:700;color:var(--brand);display:inline-flex;align-items:center;gap:5px}
.stretch::after{content:"";position:absolute;inset:0}
.rank{position:absolute;left:10px;top:10px;z-index:2;background:var(--brand);color:#fff;font-size:11.5px;
font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.04em}

/* ── lọc nhóm món (CSS thuần) ───────────────────────────────────────── */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filter label{padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);
font-size:14px;font-weight:650;cursor:pointer;user-select:none;transition:.14s}
.filter label:hover{border-color:var(--brand)}
.filter label .n{opacity:.55;font-weight:600;margin-left:5px}
.fin{position:absolute;opacity:0;pointer-events:none}
.menu-grp{scroll-margin-top:80px}
.menu-grp>h3{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;padding-bottom:9px;
border-bottom:2px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.menu-grp>h3 small{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted)}
.menu-grp+.menu-grp{margin-top:clamp(28px,3.6vw,42px)}
#f-0:checked~.menu-list .menu-grp:not([data-g="0"]){display:none}#f-1:checked~.menu-list .menu-grp:not([data-g="1"]){display:none}#f-2:checked~.menu-list .menu-grp:not([data-g="2"]){display:none}#f-3:checked~.menu-list .menu-grp:not([data-g="3"]){display:none}#f-4:checked~.menu-list .menu-grp:not([data-g="4"]){display:none}#f-5:checked~.menu-list .menu-grp:not([data-g="5"]){display:none}#f-6:checked~.menu-list .menu-grp:not([data-g="6"]){display:none}#f-7:checked~.menu-list .menu-grp:not([data-g="7"]){display:none}#f-8:checked~.menu-list .menu-grp:not([data-g="8"]){display:none}#f-9:checked~.menu-list .menu-grp:not([data-g="9"]){display:none}#f-10:checked~.menu-list .menu-grp:not([data-g="10"]){display:none}#f-11:checked~.menu-list .menu-grp:not([data-g="11"]){display:none}#f-12:checked~.menu-list .menu-grp:not([data-g="12"]){display:none}#f-13:checked~.menu-list .menu-grp:not([data-g="13"]){display:none}
#f-0:checked~.filter label[for=f-0]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-1:checked~.filter label[for=f-1]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-2:checked~.filter label[for=f-2]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-3:checked~.filter label[for=f-3]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-4:checked~.filter label[for=f-4]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-5:checked~.filter label[for=f-5]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-6:checked~.filter label[for=f-6]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-7:checked~.filter label[for=f-7]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-8:checked~.filter label[for=f-8]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-9:checked~.filter label[for=f-9]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-10:checked~.filter label[for=f-10]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-11:checked~.filter label[for=f-11]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-12:checked~.filter label[for=f-12]{background:var(--brand);color:#fff;border-color:var(--brand)}#f-13:checked~.filter label[for=f-13]{background:var(--brand);color:#fff;border-color:var(--brand)}
#f-all:checked~.filter label[for=f-all]{background:var(--brand);color:#fff;border-color:var(--brand)}
/* Radio lọc menu là `.fin` — focus được nhưng vô hình, nên người dùng bàn phím mất dấu con
   trỏ giữa danh sách nhóm món (WCAG 2.4.7). Vẽ vòng focus lên đúng nhãn của radio đang focus. */
#f-0:focus-visible~.filter label[for=f-0]{outline:2px solid var(--brand);outline-offset:2px}#f-1:focus-visible~.filter label[for=f-1]{outline:2px solid var(--brand);outline-offset:2px}#f-2:focus-visible~.filter label[for=f-2]{outline:2px solid var(--brand);outline-offset:2px}#f-3:focus-visible~.filter label[for=f-3]{outline:2px solid var(--brand);outline-offset:2px}#f-4:focus-visible~.filter label[for=f-4]{outline:2px solid var(--brand);outline-offset:2px}#f-5:focus-visible~.filter label[for=f-5]{outline:2px solid var(--brand);outline-offset:2px}#f-6:focus-visible~.filter label[for=f-6]{outline:2px solid var(--brand);outline-offset:2px}#f-7:focus-visible~.filter label[for=f-7]{outline:2px solid var(--brand);outline-offset:2px}#f-8:focus-visible~.filter label[for=f-8]{outline:2px solid var(--brand);outline-offset:2px}#f-9:focus-visible~.filter label[for=f-9]{outline:2px solid var(--brand);outline-offset:2px}#f-10:focus-visible~.filter label[for=f-10]{outline:2px solid var(--brand);outline-offset:2px}#f-11:focus-visible~.filter label[for=f-11]{outline:2px solid var(--brand);outline-offset:2px}#f-12:focus-visible~.filter label[for=f-12]{outline:2px solid var(--brand);outline-offset:2px}#f-13:focus-visible~.filter label[for=f-13]{outline:2px solid var(--brand);outline-offset:2px}
#f-all:focus-visible~.filter label[for=f-all]{outline:2px solid var(--brand);outline-offset:2px}

.art-meta{font-size:12.5px;color:var(--muted);margin:0}
.art-head{max-width:820px;margin:0 auto}
.art-body{max-width:760px;margin:0 auto;font-size:17px;line-height:1.75}
.art-body h2{font-size:clamp(21px,2.6vw,27px);margin:1.7em 0 .5em}
.art-body h3{font-size:clamp(18px,2.1vw,21px);margin:1.4em 0 .4em}
.art-body ul{padding-left:1.15em;margin:0 0 1.1em;color:var(--muted)}
.art-body li{margin-bottom:.4em}
.art-body li::marker{color:var(--brand)}
.art-fig{margin:1.6em 0}
.art-fig img{border-radius:var(--rad);width:100%}
.art-fig figcaption{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.art-foot{max-width:760px;margin:clamp(28px,4vw,44px) auto 0;padding-top:20px;
border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ── bảng giá ───────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:440px;font-size:14.6px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{background:color-mix(in srgb,var(--brand) 9%,var(--surface));font-weight:700;font-size:13px;
text-transform:uppercase;letter-spacing:.05em}
td:last-child,th:last-child{text-align:right;white-space:nowrap;font-weight:650;color:var(--brand)}
tbody tr:last-child td{border-bottom:0}
/* Bảng nhãn–giá trị (Tóm tắt nhanh, Thông tin quán): cột giá trị là câu dài → xuống dòng, căn trái.
   Rule `td:last-child` ở trên viết cho cột GIÁ; không ghi đè thì câu dài bị cắt ngang một dòng. */
.kv{min-width:0}
.kv th{width:11em;text-transform:none;letter-spacing:0;font-size:13.5px;vertical-align:top}
.kv td:last-child{text-align:left;white-space:normal;font-weight:500;color:var(--ink)}
.kv tbody tr:last-child th{border-bottom:0}
/* Bảng xếp hạng bán chạy: 4 cột vẫn vừa màn điện thoại — cột "Lượt bán" không được trượt khỏi khung. */
.sold-tbl{min-width:0}
.sold-tbl th:first-child,.sold-tbl td:first-child{width:2.4em;padding-right:4px}
.sold-tbl th:nth-child(3),.sold-tbl td:nth-child(3){text-align:right;white-space:nowrap}
@media (max-width:560px){
.kv tr{display:block;border-bottom:1px solid var(--line)}
.kv tbody tr:last-child{border-bottom:0}
.kv th,.kv td{display:block;width:auto;border-bottom:0}
.kv th{padding:10px 14px 2px}
.kv td:last-child{padding:0 14px 12px}
.sold-tbl th,.sold-tbl td{padding:10px 8px}}

/* ── khối lợi ích / hoàn tiền ───────────────────────────────────────── */
.feats{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);padding:22px 20px}
.feat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;
background:color-mix(in srgb,var(--brand) 12%,transparent);margin-bottom:13px}
.feat h3{font-size:17.5px;margin-bottom:7px}
.feat p{margin:0;color:var(--muted);font-size:14.6px}

.band{background:var(--deep);color:#fff;border-radius:var(--rad);padding:clamp(28px,4vw,46px);
position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(ellipse 20% 44% at 17% 106%, #A81F271A, transparent 62%),radial-gradient(ellipse 16% 38% at 45% 112%, #C7943316, transparent 62%),radial-gradient(ellipse 22% 48% at 79% 104%, #A81F2714, transparent 62%);opacity:.75}
.band>*{position:relative}
.band h2{color:#fff}
.band p{color:#fff;opacity:.84;max-width:62ch}
.band .btn-ghost{color:#fff;border-color:#fff}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad);
padding:16px 20px;margin-bottom:10px}
details[open]{border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;display:flex;
justify-content:space-between;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--brand);flex:0 0 auto}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--muted);font-size:15.2px}

/* ── nội dung dài ───────────────────────────────────────────────────── */
.prose{max-width:74ch}
.prose h2{margin-top:1.6em}
.prose h3{margin:1.5em 0 .5em}
.prose ul{padding-left:1.15em;margin:0 0 1em;color:var(--muted)}
.prose li{margin-bottom:.42em}
.prose li::marker{color:var(--brand)}
.note{border-left:3px solid var(--brand);background:color-mix(in srgb,var(--brand) 7%,transparent);
padding:14px 18px;border-radius:0 var(--rad) var(--rad) 0;font-size:14.8px;color:var(--muted)}

/* ── footer ─────────────────────────────────────────────────────────── */
footer{background:var(--deep);color:#fff;margin-top:clamp(40px,6vw,70px);padding:clamp(34px,4.5vw,54px) 0 26px}
.ft-top{display:grid;gap:28px;grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16)}
footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px;opacity:.62}
footer p,footer li{color:rgba(255,255,255,.8);font-size:14.4px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:7px}
footer a{color:#fff;text-decoration:none;opacity:.85}
footer a:hover{opacity:1;text-decoration:underline}
.ft-brand{font-family:var(--display);font-size:20px;font-weight:700;margin-bottom:9px}
.ft-bot{padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
font-size:12.8px;color:rgba(255,255,255,.6)}
.disc{font-size:12.6px;color:rgba(255,255,255,.58);max-width:70ch;margin-top:10px}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:940px){
 .hero-split .hero-in,.hero-collage .hero-in{grid-template-columns:1fr}
 .hero-art{order:-1}
 .collage img:first-child{grid-row:auto;aspect-ratio:1}
 .ft-top{grid-template-columns:1fr 1fr}
 .badge-float{width:74px;height:74px;font-size:11px}
 .badge-float b{font-size:18px}
}
@media(max-width:760px){
 .navlbl{display:grid;place-items:center;margin-left:auto;width:42px;height:42px;border-radius:10px;
 border:1.5px solid var(--line);cursor:pointer;font-size:19px;flex:0 0 auto}
 .nav{position:fixed;inset:66px 0 auto;flex-direction:column;align-items:stretch;gap:0;
 background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 16px;display:none;
 box-shadow:0 20px 40px -24px var(--ink)}
 #navtog:checked~.nav{display:flex}
 .nav a{padding:13px 6px;border-bottom:1px solid var(--line);border-radius:0}
 .hd .btn{display:none}
 .nav .btn{display:inline-flex;justify-content:center;margin-top:12px;border-bottom:0}
 .stats{grid-template-columns:1fr 1fr}
 .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
 .ft-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
@media print{.hd,.band,footer .ft-bot{display:none}}

/* ── popup voucher ShopeeFood ── */

.hky-vc,.hky-vc *{box-sizing:border-box;margin:0;padding:0}
.hky-vc{position:fixed;right:16px;bottom:16px;width:min(340px,calc(100vw - 24px));z-index:9990;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
opacity:0;animation:hkyvIn .45s cubic-bezier(.2,.8,.3,1) 2.0s both}
.hky-vc-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.hky-vc-cb:checked ~ .hky-vc{display:none}
.hky-vc-box{background:#fff;border-radius:14px;box-shadow:0 10px 34px rgba(20,14,8,.22),0 2px 6px rgba(20,14,8,.10);
overflow:hidden;border:1px solid rgba(20,14,8,.06)}
.hky-vc-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#EE4D2D;color:#fff}
.hky-vc-title{font-size:13.5px;font-weight:800;letter-spacing:.01em;line-height:1.25;flex:1}
.hky-vc-sub{display:block;font-size:11px;font-weight:600;opacity:.92;letter-spacing:.02em}
.hky-vc-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.18);color:#fff;font-size:15px;line-height:1;font-weight:700;flex:none}
.hky-vc-x:hover{background:rgba(255,255,255,.32)}
.hky-vc-stage{position:relative;height:98px;background:#fff}
.hky-vc-card{position:absolute;inset:0;display:flex;align-items:stretch;gap:0;padding:8px 10px;opacity:0;
animation:hkyvCard 192s linear 2.0s infinite}
.hky-vc-tem{position:relative;width:96px;flex:none;border-radius:4px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:3px;color:#fff;background:#EE4D2D}
.hky-vc-card--ship .hky-vc-tem{background:#26AA99}
.hky-vc-tem--bank{background:#fff;border:1px solid #E7DCCB;gap:0;overflow:hidden;padding:0}
.hky-vc-bkname{width:100%;text-align:center;font-size:9px;font-weight:800;letter-spacing:.02em;
color:#20180F;padding:5px 3px;line-height:1.1;background:#fff}
.hky-vc-bkamt{width:100%;flex:1;display:grid;place-items:center;font-size:15px;font-weight:900;
color:#fff;background:linear-gradient(180deg,#E8402A,#C9241B);letter-spacing:.01em}
.hky-vc-bkamt small{display:block;font-size:8px;font-weight:700;opacity:.92;letter-spacing:.06em}
.hky-vc-tem svg g{fill:#EE4D2D}
.hky-vc-card--ship .hky-vc-tem svg g{fill:#26AA99}
.hky-vc-tem::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:5px;
background:radial-gradient(circle at 0 50%,transparent 0 3.2px,#fff 3.3px) 0 0/5px 9px repeat-y}
.hky-vc-temtx{font-size:10.5px;font-weight:700;letter-spacing:.01em}
.hky-vc-ic{width:27px;height:27px}
.hky-vc-body{flex:1;min-width:0;padding:2px 0 2px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px}
.hky-vc-name{font-size:13.5px;font-weight:700;color:#20180F;line-height:1.3;flex:none;
min-height:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hky-vc-cond{font-size:12px;color:#6B6156;flex:none}
.hky-vc-get{font-size:12px;font-weight:800;color:#EE4D2D;flex:none}
.hky-vc-foot{display:flex;align-items:center;gap:10px;padding:9px 12px 11px;border-top:1px dashed rgba(20,14,8,.14)}
.hky-vc-note{flex:1;font-size:10.5px;line-height:1.35;color:#8A8079}
.hky-vc-cta{flex:none;background:#EE4D2D;color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;
padding:9px 14px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(238,77,45,.32)}
.hky-vc-cta:hover{background:#D8431F;color:#fff}
.hky-vc-link{position:absolute;inset:0;z-index:2}
@keyframes hkyvIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes hkyvCard{0%{opacity:0;transform:translateY(8px)}2%{opacity:1;transform:none}
3.667%{opacity:1;transform:none}4.167%{opacity:0;transform:translateY(-8px)}
100%{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){.hky-vc{right:8px;left:8px;bottom:8px;width:auto}
.hky-vc-stage{height:94px}.hky-vc-name{font-size:13px}}
@media (prefers-reduced-motion:reduce){.hky-vc,.hky-vc-card{animation-duration:.01s;animation-delay:0s}
.hky-vc-card{animation:none}.hky-vc-card:first-child{opacity:1}}

/* ── popup giới thiệu Gắp Món ── */
.hky-gm,.hky-gm *{box-sizing:border-box;margin:0;padding:0}
.hky-gm{position:fixed;left:16px;bottom:16px;width:min(320px,calc(100vw - 24px));z-index:9985;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
opacity:0;animation:hkygmIn .5s cubic-bezier(.2,.8,.3,1) 32.0s both}
.hky-gm-cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.hky-gm-cb:checked ~ .hky-gm{display:none}
.hky-gm-box{background:linear-gradient(160deg,#1B2531,#131B24);border-radius:16px;
border:1px solid rgba(180,222,79,.28);overflow:hidden;
box-shadow:0 14px 40px rgba(6,10,16,.44),0 2px 6px rgba(6,10,16,.3)}
.hky-gm-head{display:flex;align-items:center;gap:9px;padding:12px 13px 0}
.hky-gm-logo{width:26px;height:26px;flex:none}
.hky-gm-ten{font-size:13px;font-weight:800;color:#B4DE4F;letter-spacing:.02em;flex:1}
.hky-gm-x{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
background:rgba(255,255,255,.09);color:#AFC2D2;font-size:15px;line-height:1;font-weight:700;flex:none;
transition:background .18s ease,color .18s ease}
.hky-gm-x:hover{background:rgba(255,255,255,.18);color:#EEF3F7}
.hky-gm-than{padding:9px 13px 13px;display:block}
.hky-gm-tieu{font-size:19px;font-weight:800;color:#EEF3F7;line-height:1.2;margin-bottom:6px}
.hky-gm-y{font-size:13.5px;line-height:1.5;color:#AFC2D2;margin-bottom:12px}
.hky-gm-y b{color:#EEF3F7;font-weight:700}
.hky-gm-nut{display:flex;align-items:center;justify-content:center;gap:8px;
min-height:46px;border-radius:11px;background:#B4DE4F;color:#131B24;
font-size:15px;font-weight:800;text-decoration:none;letter-spacing:.01em;
box-shadow:0 3px 0 #7FA32E;transition:filter .18s ease,transform .18s ease}
.hky-gm-nut:hover{filter:brightness(1.06);transform:translateY(-1px)}
.hky-gm-nut:active{transform:translateY(1px);box-shadow:0 1px 0 #7FA32E}
@keyframes hkygmIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
/* Màn hẹp: dưới đã có popup voucher chiếm hết chiều ngang → đẩy lên trên. */
@media (max-width:720px){
.hky-gm{left:12px;right:12px;bottom:auto;top:12px;width:auto}
.hky-gm-tieu{font-size:17px}
.hky-gm-y{font-size:13px;margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
.hky-gm{animation-duration:.01s;animation-delay:32.0s}
.hky-gm-nut{transition:none}
}