:root{--sab:min(env(safe-area-inset-bottom,0px),34px);--sat:min(env(safe-area-inset-top,0px),59px)}
/* ===== Phông chữ (tải cục bộ) ===== */
@font-face{font-family:"BVP";src:url(../fonts/bvp-400.woff2) format("woff2");font-weight:400;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"BVP";src:url(../fonts/bvp-500.woff2) format("woff2");font-weight:500;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"BVP";src:url(../fonts/bvp-600.woff2) format("woff2");font-weight:600;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"BVP";src:url(../fonts/bvp-700.woff2) format("woff2");font-weight:700;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"BVP";src:url(../fonts/bvp-800.woff2) format("woff2");font-weight:800;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"BVP";src:url(../fonts/bvp-latin-400.woff2) format("woff2");font-weight:400;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}
@font-face{font-family:"BVP";src:url(../fonts/bvp-latin-500.woff2) format("woff2");font-weight:500;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}
@font-face{font-family:"BVP";src:url(../fonts/bvp-latin-600.woff2) format("woff2");font-weight:600;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}
@font-face{font-family:"BVP";src:url(../fonts/bvp-latin-700.woff2) format("woff2");font-weight:700;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}
@font-face{font-family:"BVP";src:url(../fonts/bvp-latin-800.woff2) format("woff2");font-weight:800;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2212}

/* ===== TOKEN · GIAO DIỆN CAM (y chang ảnh mẫu: kính mờ tối + cam) ===== */
:root,[data-gd="cam"]{
  --nen:#0D1017; --nen2:#15181E;
  --kinh:rgba(28,32,35,.74); --kinh-dam:rgba(22,24,28,.88); --vien:rgba(255,255,255,.10); --blur:blur(20px) saturate(130%);
  --bong:0 12px 32px rgba(0,0,0,.45);
  --chu:#FFFFFF; --chu2:rgba(255,255,255,.68); --chu3:rgba(255,255,255,.45);
  --nhan:#F7931E; --nhan-dam:#F68E11; --nhan-nhat:rgba(247,147,30,.18); --nhan-chu:#FFB15C; --tren-nhan:#FFFFFF;
  --grad:linear-gradient(135deg,#FFB547 0%,#F7931E 55%,#E8700A 100%);
  --wave:linear-gradient(180deg,#FFC371,#F7931E 55%,#F35C1E); --glow:rgba(247,147,30,.45);
  --tim:#FA4331; --cay-nen:rgba(250,67,49,.18); --cay-chu:#FF6B5A; --ok:#4ADE80;
  --r-the:24px; --r-sheet:32px; --r-tim:20px; --r-nho:14px;
  --bg-img:url(../img/bg_cafe_cam_blur.webp);
  --bg-veil:linear-gradient(180deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.76) 40%,rgba(0,0,0,.82) 100%);
}
/* ===== TOKEN · GIAO DIỆN XANH NGỌC (Biển đêm Quy Nhơn) ===== */
[data-gd="xanhngoc"]{
  --nen:#041A1C; --nen2:#062B2D;
  --kinh:rgba(8,40,42,.70); --kinh-dam:rgba(4,28,30,.88); --vien:rgba(94,234,212,.18); --blur:blur(22px) saturate(140%);
  --bong:0 10px 30px rgba(20,184,166,.18);
  --chu:#F0FDFA; --chu2:rgba(204,251,241,.72); --chu3:rgba(204,251,241,.48);
  --nhan:#14B8A6; --nhan-dam:#0D9488; --nhan-nhat:rgba(20,184,166,.16); --nhan-chu:#5EEAD4; --tren-nhan:#042F2B;
  --grad:linear-gradient(135deg,#5EEAD4 0%,#14B8A6 55%,#0D9488 100%);
  --wave:linear-gradient(180deg,#99F6E4,#1ABC9C 55%,#0D9488); --glow:rgba(20,184,166,.45);
  --tim:#FB7185; --cay-nen:rgba(251,113,133,.16); --cay-chu:#FDA4AF; --ok:#5EEAD4;
  --r-the:28px; --r-sheet:36px; --r-tim:24px; --r-nho:16px;
  --bg-img:url(../img/bg_cafe_xanhngoc_v2_blur.webp);
  --bg-veil:linear-gradient(180deg,rgba(0,8,10,.68) 0%,rgba(0,10,12,.74) 40%,rgba(0,12,14,.80) 100%)}

/* ===== NỀN TẢNG ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:#05070A;color:var(--chu);font-family:"BVP",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
body{transition:opacity .22s}
body.fade{opacity:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font-family:inherit;font-weight:inherit;line-height:inherit;color:var(--chu);font-size:16px}
svg{width:22px;height:22px;flex:none}
#app{position:relative;max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--nen);overflow-x:clip}
/* t75u — nền cafe mờ + tối (dark) / veil trắng (light); blur pre-baked webp, overlay CSS nhẹ */
.bgimg{
  position:fixed;inset:-8%;max-width:430px;margin:0 auto;width:100%;
  background:var(--bg-img) center/cover no-repeat;
  z-index:0;opacity:1;pointer-events:none;
  transform:scale(1.12);
  transform-origin:center center;
  transition:background-image .4s, opacity .35s;
  will-change:transform;
}
.bgimg::after{
  content:"";position:absolute;inset:0;
  background:var(--bg-veil, linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.78)));
  pointer-events:none;
}
#app{background:transparent;z-index:1}
html{background:var(--nen)}
/* Welcome: cho ảnh lộ hơn một chút nhưng chữ vẫn AA nhờ card/gradient */
#app:has(.chao-c) .bgimg::after,
#app:has(.chao-x) .bgimg::after{
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.62) 35%,rgba(0,0,0,.78) 100%);
}
#app:has(.chao-c) .bgimg,
#app:has(.chao-x) .bgimg{opacity:.95}
.scr{position:relative;padding:max(var(--sat),16px) 18px 0;min-height:100dvh}
.glass{background:var(--kinh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien)}
.muted{color:var(--chu2);font-size:13px}
.price{color:var(--nhan-chu);font-weight:700}
.price.lg{font-size:20px}
.pad-b{height:150px}
.ib{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.ib-sp{width:44px;flex:none}
.ib.glass{border-radius:50%}
.lg-mark{width:26px;height:26px;border-radius:9px;background:var(--grad);display:grid;place-items:center;color:var(--tren-nhan)}
.lg-mark svg{width:16px;height:16px}
.logo-tq{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:.2px}
.btn-main{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 26px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-weight:700;font-size:16px;box-shadow:0 10px 26px var(--glow)}
.btn-main.wide{width:100%}
.btn-ghost{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;border:1px solid var(--vien);background:var(--kinh);font-weight:600}
.btn-sm{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-weight:700;font-size:13px}
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(255,255,255,.08);color:var(--chu2);white-space:nowrap}
.chip.ok{background:rgba(74,222,128,.14);color:var(--ok)}
.chip.hot{background:var(--cay-nen);color:var(--cay-chu)}
.tag{position:absolute;top:10px;left:10px;z-index:2;height:24px;padding:0 10px;border-radius:999px;background:var(--cay-nen);color:var(--cay-chu);font-size:11px;font-weight:700;display:flex;align-items:center;backdrop-filter:blur(8px)}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 120px);transform:translate(-50%,20px);opacity:0;z-index:99;background:var(--kinh-dam);backdrop-filter:var(--blur);border:1px solid var(--vien);padding:12px 18px;border-radius:16px;font-size:14px;transition:.25s;pointer-events:none;max-width:340px;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:22px 2px 12px}
.sec-h h2{margin:0;font-size:19px;font-weight:700}
.sec-h a{color:var(--nhan-chu);font-size:13px;font-weight:600}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.topbar h1{margin:0;font-size:18px;font-weight:700;flex:1;text-align:center}
.cnt{min-width:44px;font-size:13px;color:var(--chu2);text-align:right}
.hd-act{display:flex;gap:10px}

/* view transition khi đổi giao diện */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s}
::view-transition-old(root){animation-name:vtOut}
::view-transition-new(root){animation-name:vtIn}
@keyframes vtOut{to{opacity:0;filter:blur(8px)}}
@keyframes vtIn{from{opacity:0;filter:blur(8px)}}

/* ===== THANH TAB ===== */
.badge{position:absolute;top:-4px;right:-10px;height:20px;padding:0 7px;border-radius:999px;background:var(--tim);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;white-space:nowrap}
[data-gd] .tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 12px);width:min(394px,calc(100% - 36px));padding-right:78px;height:70px;border-radius:26px;display:flex;align-items:center;justify-content:space-around;background:var(--kinh-dam);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:var(--bong);z-index:20}
[data-gd] .tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--chu2);font-weight:500}
[data-gd] .tab.on{color:var(--nhan)}
[data-gd] .tab.on svg{fill:var(--nhan-nhat)}
.qee-fab{position:fixed;bottom:calc(var(--sab) + 18px);left:calc(50% + min(197px,calc(50% - 18px)) - 70px);width:60px;height:60px;border-radius:50%;background:var(--grad);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;z-index:21;box-shadow:0 0 0 6px rgba(247,147,30,.16),0 10px 28px var(--glow)}
.qee-fab svg{width:22px;height:22px}
.qee-fab span{font-size:10px;font-weight:700;margin-top:1px}
[data-gd="xanhngoc"] .tabbar{background:rgba(4,26,28,.86);box-shadow:0 -1px 0 rgba(94,234,212,.35),0 -16px 40px rgba(20,184,166,.10)}
[data-gd="xanhngoc"] .tab{color:var(--chu3)}
[data-gd="xanhngoc"] .tab.on{color:var(--nhan-chu)}
[data-gd="xanhngoc"] .tab.on::before{background:var(--nhan-chu);box-shadow:0 0 12px var(--nhan)}
.tab-qee{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--nhan-chu);margin-top:-30px}
.tab-qee i{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);box-shadow:0 0 0 6px rgba(4,26,28,.9),0 0 26px var(--glow)}

/* ===== DẢI GIỎ ===== */
.gio-strip{position:fixed;left:50%;transform:translateX(-50%);z-index:19;display:flex;align-items:center;gap:10px}
[data-gd] .gio-strip{bottom:calc(var(--sab) + 94px);height:50px;padding:0 6px 0 16px;border-radius:999px;backdrop-filter:var(--blur);border:1px solid rgba(247,147,30,.35);width:min(354px,calc(100% - 36px))}
[data-gd="cam"] .gio-strip{background:var(--kinh-dam);box-shadow:var(--bong)}
[data-gd="xanhngoc"] .gio-strip{background:linear-gradient(90deg,rgba(13,148,136,.92),rgba(20,184,166,.85));color:var(--tren-nhan)}
.gs-ic{color:var(--nhan-chu)} [data-gd="xanhngoc"] .gs-ic{color:var(--tren-nhan)}
.gs-t{flex:1;font-weight:600;font-size:14px}
.gs-b{height:38px;padding:0 16px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-weight:700;font-size:13px;display:flex;align-items:center}
[data-gd="xanhngoc"] .gs-b{background:rgba(4,47,43,.9);color:#5EEAD4}

/* ===== MÀN CHÀO ===== */
.chao-c{padding:0;display:flex;flex-direction:column}
.chao-collage{height:430px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:6px;mask-image:linear-gradient(#000 55%,transparent)}
.chao-collage img{width:100%;height:100%;object-fit:cover;border-radius:22px}
.chao-c .chao-body{margin-top:-90px;padding:0 24px calc(var(--sab) + 30px);display:flex;flex-direction:column;gap:14px;position:relative}
.eyebrow{margin:0;color:var(--chu2);font-size:14px}
.hero{margin:0;font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.4px}
.hero em{font-style:normal;color:var(--nhan)}
.ban-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--nhan-nhat);border:1px solid rgba(247,147,30,.4);color:var(--nhan-chu);font-weight:600;font-size:14px;align-self:flex-start}
[data-gd="xanhngoc"] .ban-pill{border-color:rgba(94,234,212,.4)}
.fine{margin:6px 0 0;color:var(--chu3);font-size:12px;text-align:center}
.chao-x{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:calc(var(--sab) + 26px)}
.chao-x .ripples{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%)}
.ripples i{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;border:1px solid rgba(94,234,212,.5);animation:rip 3.6s infinite ease-out}
.ripples i:nth-child(2){animation-delay:1.2s}.ripples i:nth-child(3){animation-delay:2.4s}
@keyframes rip{from{transform:scale(.4);opacity:.9}to{transform:scale(3.2);opacity:0}}
.chao-card{position:relative;padding:28px 24px;border-radius:var(--r-sheet);background:var(--kinh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:var(--bong);display:flex;flex-direction:column;gap:14px}
.chao-x .hero{font-size:30px;font-weight:600}
.chao-x .sub{margin:0;color:var(--chu2);font-size:14px;line-height:1.5}

/* ===== TRANG CHÍNH · CAM ===== */
.hd-row{display:flex;align-items:center;justify-content:space-between}
.store-pill{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 9px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);font-weight:600;font-size:13px;max-width:240px}
.store-pill span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-c .hello{margin:20px 2px 6px;color:var(--chu2);font-size:15px}
.banlbl{color:var(--nhan-chu);font-weight:700}
.home-c .hero{font-size:36px}
.search{display:flex;align-items:center;gap:12px;height:54px;margin-top:20px;padding:0 8px 0 18px;border-radius:var(--r-tim);color:var(--chu3);font-size:15px}
.search span{flex:1}
.sf{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--chu);background:rgba(255,255,255,.06)}
.cats{display:flex;gap:10px;overflow-x:auto;margin:18px -18px 0;padding:0 18px 4px;scrollbar-width:none}
.cats::-webkit-scrollbar,.hscroll::-webkit-scrollbar,.utabs::-webkit-scrollbar,.util-row::-webkit-scrollbar{display:none}
.cat{flex:none;width:76px;height:92px;border-radius:20px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;color:var(--chu2);text-align:center;line-height:1.2;padding:0 4px}
.cat img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.cat.on{background:linear-gradient(160deg,rgba(247,147,30,.55),rgba(247,147,30,.18));border-color:rgba(255,177,92,.6);color:#fff;box-shadow:0 8px 22px rgba(247,147,30,.25)}
.promo{position:relative;display:flex;margin-top:18px;height:170px;border-radius:var(--r-the);overflow:hidden}
.pr-t{flex:1;padding:18px;display:flex;flex-direction:column;gap:8px;z-index:1}
.pr-k{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--chu2)}
.pr-k svg{width:16px;height:16px;color:var(--nhan)}
.promo h2{margin:0;font-size:22px;line-height:1.15}
.promo h2 em{font-style:normal;color:var(--nhan)}
.promo .btn-sm{align-self:flex-start;margin-top:auto;height:40px;padding:0 20px}
.promo img{width:48%;object-fit:cover;mask-image:linear-gradient(90deg,transparent,#000 35%)}
.util-row{display:flex;gap:14px;overflow-x:auto;margin:0 -18px;padding:0 18px 4px}
.util{flex:none;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;color:var(--chu2);width:62px}
.util i{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;color:var(--nhan-chu)}
.hscroll{display:flex;gap:12px;overflow-x:auto;margin:0 -18px;padding:0 18px 6px;scrollbar-width:none}
.pcard{position:relative;flex:none;width:158px;border-radius:var(--r-the);padding:10px;display:flex;flex-direction:column;gap:8px}
.pcard img{width:100%;height:124px;object-fit:cover;border-radius:18px}
.pcard b{font-size:14px;font-weight:600;line-height:1.3;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrt{position:absolute;top:18px;right:18px;z-index:2;color:#fff}
.hrt svg{width:20px;height:20px}
.pc-f{display:flex;align-items:center;justify-content:space-between}
.add{width:32px;height:32px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 6px 14px var(--glow)}
.add svg{width:18px;height:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 .pcard{width:auto}

/* ===== TRANG CHÍNH · XANH NGỌC ===== */
.home-x{padding:0}
.home-x>*:not(.hero-sea):not(.tabbar):not(.gio-strip){margin-left:18px;margin-right:18px}
.hero-sea{position:relative;padding:max(var(--sat),16px) 18px 26px;background:linear-gradient(180deg,rgba(4,26,28,.35) 0%,rgba(4,26,28,.55) 55%,var(--nen) 100%),var(--hero-img,url(../img/hero_cafe_bien.webp)) center 60%/cover;min-height:290px;display:flex;flex-direction:column;justify-content:space-between}
.hs-top{display:flex;align-items:center;justify-content:space-between}
.hs-top .ib{background:rgba(4,26,28,.45);border:1px solid var(--vien);backdrop-filter:blur(12px)}
.store-card{padding:20px;border-radius:var(--r-the);background:rgba(6,43,45,.42);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:0 0 30px rgba(20,184,166,.15)}
.store-card .hello{margin:0;color:var(--nhan-chu);font-size:13px;font-weight:600}
.store-card h1{margin:6px 0 10px;font-size:26px;font-weight:600;line-height:1.2}
.sc-s{margin:0;display:flex;align-items:center;gap:6px;color:var(--chu2);font-size:13px;flex-wrap:wrap}
.sc-s svg{width:16px;height:16px;color:var(--nhan-chu)}
.sc-s .dot{width:4px;height:4px;border-radius:50%;background:var(--chu3);margin:0 4px}
.search-x{display:flex;align-items:center;gap:10px;height:56px;margin-top:4px;padding:0 6px 0 18px;border-radius:var(--r-tim);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur)}
.search-x>a:first-child{flex:1;display:flex;align-items:center;gap:12px;color:var(--chu3)}
.mic-in{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);box-shadow:0 0 18px var(--glow)}
.util-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:18px 10px;border-radius:var(--r-the);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur)}
.util-grid .util{width:auto}
.util-grid .util i{width:50px;height:50px;border-radius:50%;border:1px solid rgba(94,234,212,.28);background:rgba(20,184,166,.10)}
.vlist{display:flex;flex-direction:column}
.row-x{position:relative;display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(94,234,212,.10)}
.row-x img{width:92px;height:92px;border-radius:22px 22px 22px 6px;object-fit:cover;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.rx-b{flex:1;min-width:0}
.rx-b b{font-size:15px;font-weight:600}
.rx-b p{margin:4px 0 8px;font-size:12px;color:var(--chu2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.rx-f{display:flex;align-items:center;gap:8px}
.rx-f .tag{position:static;height:22px;backdrop-filter:none}
.row-x .add{width:36px;height:36px;border-radius:50%;background:transparent;border:1.5px solid var(--nhan-chu);color:var(--nhan-chu);box-shadow:none}

/* ===== THỰC ĐƠN · XANH NGỌC ===== */
.topbar-x{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;min-height:48px}
.topbar-x h1{margin:0;font-size:22px;font-weight:600;flex:1}
.topbar-x .ib{border:1px solid var(--vien);background:rgba(20,184,166,.08)}
.topbar-x .ib+h1{text-align:center;font-size:17px}
.utabs{display:flex;gap:22px;overflow-x:auto;margin:0 -18px;padding:0 18px;border-bottom:1px solid rgba(94,234,212,.12)}
.ut{flex:none;padding:12px 0 12px;font-size:14px;color:var(--chu3);font-weight:500;position:relative;white-space:nowrap}
.ut.on{color:var(--chu);font-weight:600}
.ut.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--nhan-chu);box-shadow:0 0 12px var(--nhan)}
.cat-banner{display:flex;align-items:center;gap:14px;margin:16px 0 4px;padding:12px;border-radius:var(--r-the);background:linear-gradient(120deg,rgba(20,184,166,.20),rgba(6,43,45,.4));border:1px solid var(--vien)}
.cat-banner img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(94,234,212,.5)}
.cat-banner h2{margin:0;font-size:18px;font-weight:600}.cat-banner p{margin:2px 0 0;font-size:12px;color:var(--chu2)}

/* ===== CHI TIẾT MÓN ===== */
.mon-c{padding:0}
.mon-hero{position:relative;height:400px}
.mon-hero img{width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(#000 70%,transparent)}
.mon-hero .back{position:absolute;top:max(var(--sat),16px);left:18px}
.mon-hero .hrt-r{position:absolute;top:max(var(--sat),16px);right:18px;color:var(--tim)}
.sheet{position:relative;margin:-70px 14px 0;border-radius:var(--r-the);padding:18px 18px 8px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.mon-t{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:12px 0 6px}
.mon-t h1{margin:0;font-size:23px;font-weight:700;line-height:1.25}
.mon-t .price{white-space:nowrap;margin-top:3px}
.desc{margin:0 0 6px;color:var(--chu2);font-size:14px;line-height:1.55}
.cus{margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--vien);font-size:16px}
.opt{padding:10px 0}
.opt-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-weight:600;font-size:14px}
.opt-h small{color:var(--chu3);font-weight:500;font-size:12px}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{height:38px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--vien);font-size:13px;color:var(--chu2);font-weight:500;transition:.2s}
[data-gd="cam"] .seg button.on{background:var(--grad);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(247,147,30,.3)}
.tg-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:14px}
.tg-row small{display:block;color:var(--chu3);font-size:12px;margin-top:2px}
.toggle{width:50px;height:30px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;transition:.25s}
.toggle i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.toggle.on{background:var(--nhan-dam)}
[data-gd="xanhngoc"] .toggle.on{background:var(--grad)}
.toggle.on i{left:23px}
textarea{width:100%;min-height:76px;resize:none;border-radius:var(--r-nho);background:rgba(255,255,255,.05);border:1px solid var(--vien);padding:12px 14px;font-size:16px;outline:none}
textarea:focus,input:focus{border-color:var(--nhan)}
.buybar{position:sticky;bottom:calc(var(--sab) + 12px);margin:14px 14px 0;padding:10px;border-radius:26px;display:flex;align-items:center;gap:10px;z-index:5}
.mon-c::after{content:"";display:block;height:calc(var(--sab) + 20px)}
.stepper{display:flex;align-items:center;gap:4px}
.stepper .ib{width:38px;height:38px;background:rgba(255,255,255,.08)}
.stepper .ib svg{width:18px;height:18px}
.stepper .sl{min-width:56px;text-align:center;font-weight:600;font-size:14px}
.btn-buy{flex:1;height:54px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 10px 24px var(--glow)}
.btn-buy i{width:1px;height:20px;background:rgba(255,255,255,.5)}
/* chi tiết · xanh ngọc */
.mon-frame{margin:6px auto 0;width:270px;height:270px;border-radius:50%;padding:8px;background:conic-gradient(from 200deg,rgba(94,234,212,.6),rgba(20,184,166,0),rgba(94,234,212,.6));box-shadow:0 0 50px rgba(20,184,166,.25)}
.mon-frame img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.mon-info{text-align:center;margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mon-info h1{margin:0;font-size:24px;font-weight:600}
.mon-info .desc{max-width:330px;margin:0}
.opts-x{margin-top:14px;padding:6px 16px;border-radius:var(--r-the);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur)}
.opts-x .opt+.opt{border-top:1px solid rgba(94,234,212,.10)}
[data-gd="xanhngoc"] .seg button{background:transparent}
[data-gd="xanhngoc"] .seg button.on{border-color:var(--nhan-chu);color:var(--nhan-chu);background:var(--nhan-nhat);box-shadow:inset 0 -2px 0 var(--nhan-chu)}
.buybar-x{position:sticky;bottom:0;margin:16px -18px 0;padding:14px 18px calc(var(--sab) + 14px);display:flex;flex-direction:column;gap:12px;align-items:center;background:linear-gradient(180deg,rgba(4,26,28,0),rgba(4,26,28,.95) 30%)}
.buybar-x .btn-buy{width:100%;flex:none}

/* ===== GIỎ HÀNG ===== */
.ban-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:12px;border-radius:var(--r-nho);background:var(--nhan-nhat);border:1px solid rgba(255,255,255,.06);font-size:13px;color:var(--chu2)}
.ban-bar svg{color:var(--nhan-chu)}
.ban-bar b{color:var(--nhan-chu)}
.ci-list{display:flex;flex-direction:column;gap:12px}
.ci{display:flex;gap:12px;padding:12px;border-radius:var(--r-the)}
.ci img{width:84px;height:84px;border-radius:18px;object-fit:cover;flex:none}
.ci-b{flex:1;min-width:0}
.ci-b b{font-size:15px;font-weight:600}
.ci-o{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0}
.ci-o .chip{height:22px;font-size:11px;background:var(--nhan-nhat);color:var(--nhan-chu)}
.ci-n{margin:0 0 6px;color:var(--chu2);font-size:12px}
.ci-f{display:flex;align-items:center;gap:8px}
.ci-f .stepper .ib{width:32px;height:32px}
.ci-f .stepper .sl{min-width:50px;font-size:13px}
.ci-f .price{flex:1;text-align:right;font-size:14px}
.del{width:34px;height:34px;color:var(--chu3)}
.del svg{width:18px;height:18px}
.gio-xanhngoc .ci{border-radius:0;padding:14px 0;border-bottom:1px solid rgba(94,234,212,.10)}
.gio-xanhngoc .ci img{border-radius:50%}
.addmore{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0;height:46px;border-radius:999px;border:1px dashed var(--vien);color:var(--nhan-chu);font-weight:600;font-size:14px}
.sum{padding:16px;border-radius:var(--r-the);display:flex;flex-direction:column;gap:10px;font-size:14px}
.sum>div{display:flex;justify-content:space-between;color:var(--chu2)}
.sum b{color:var(--chu);font-weight:600}
.sum .tot{padding-top:10px;border-top:1px solid var(--vien);font-size:16px}
.sum .tot b{color:var(--nhan-chu);font-size:18px}
.gio-xanhngoc .sum{background:linear-gradient(140deg,rgba(20,184,166,.22),rgba(6,43,45,.5));border:1px solid rgba(94,234,212,.3);box-shadow:0 0 30px rgba(20,184,166,.18)}
.orderbar{position:sticky;bottom:calc(var(--sab) + 96px);margin:16px 0 0;padding:10px 10px 10px 18px;border-radius:24px;display:flex;align-items:center;justify-content:space-between;background:var(--kinh-dam);backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:var(--bong);z-index:6}
.orderbar span{display:block;font-size:12px;color:var(--chu2)}
.orderbar b{font-size:19px;color:var(--nhan-chu)}
.orderbar .btn-main{height:50px;padding:0 30px}
.gio-xanhngoc .orderbar{bottom:calc(var(--sab) + 86px)}
.form .orderbar{bottom:calc(var(--sab) + 14px)}
.gio{padding-bottom:110px}
.empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:80px 0;color:var(--chu2)}
.empty>svg{width:56px;height:56px;color:var(--nhan-chu)}
/* sheet hình thức */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.3s;z-index:30}
.sheet-bg.on{opacity:1;pointer-events:auto}
.bsheet{position:fixed;left:50%;bottom:0;width:100%;max-width:430px;transform:translate(-50%,105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:31;padding:10px 18px calc(var(--sab) + 22px);border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--kinh-dam);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien)}
.bsheet.on{transform:translate(-50%,0)}
.grab{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:0 auto 14px}
.bsheet h2{margin:0;font-size:20px}
.bsheet .muted{margin:4px 0 14px;display:block}
.hopt{display:flex;align-items:center;gap:14px;padding:14px;margin-top:10px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.hopt i{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu);flex:none}
.hopt div{flex:1}
.hopt b{display:block;font-size:15px}
.hopt span{font-size:12px;color:var(--chu2)}
.hopt>svg{color:var(--chu3)}
[data-gd="cam"] .hopt:first-of-type{border-color:rgba(247,147,30,.5);background:linear-gradient(120deg,rgba(247,147,30,.22),rgba(255,255,255,.03))}
[data-gd="xanhngoc"] .hopt:first-of-type{border-color:var(--nhan-chu);box-shadow:0 0 22px rgba(20,184,166,.2)}

/* ===== FORM ĐẶT ===== */
.form{padding-bottom:30px}
.intro{display:flex;gap:12px;align-items:flex-start;padding:14px;margin-bottom:12px;border-radius:var(--r-the);background:var(--nhan-nhat);border:1px solid rgba(255,255,255,.06)}
.intro i{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);flex:none}
.intro p{margin:0;font-size:13px;line-height:1.55;color:var(--chu2)}
.card{padding:16px;margin-bottom:12px;border-radius:var(--r-the);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.card h3{margin:0 0 12px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.card h3 svg{color:var(--nhan-chu)}
.btn-tq{width:100%;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(255,255,255,.95);color:#10151C;font-weight:700;font-size:15px}
[data-gd="xanhngoc"] .btn-tq{background:transparent;color:var(--nhan-chu)}
.or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--chu3);font-size:12px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--vien)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label,.fl{display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--chu2);font-weight:500}
.card .fl+.fl,.card .seg+.fl,.lock+.fl{margin-top:12px}
.fl+.seg{margin-top:8px}.seg.wrap+.seg.wrap{margin-top:8px}
input{height:48px;border-radius:var(--r-nho);background:rgba(255,255,255,.05);border:1px solid var(--vien);padding:0 14px;font-size:16px;outline:none;width:100%}
input::placeholder,textarea::placeholder{color:var(--chu3)}
.idcard,.acc{display:flex;align-items:center;gap:12px}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);flex:none;font-size:15px;font-weight:700;letter-spacing:.02em;line-height:1}
.av svg{width:22px;height:22px;display:block}
.idcard div,.acc div{flex:1;min-width:0}
.idcard b,.acc b{display:block;font-size:15px}
.idcard span:not(.av),.acc span:not(.av){display:flex;align-items:center;gap:4px;font-size:12px;color:var(--chu2)}
.idcard .id-meta svg,.acc span:not(.av) svg{width:14px;height:14px;color:var(--ok);flex:none}
.lnk{color:var(--nhan-chu);font-weight:600;font-size:13px}
.acc .lnk{max-width:130px;text-align:right;line-height:1.3}
.lock{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--nhan-nhat)}
.lock i{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);flex:none}
.lock div{flex:1}.lock b{display:block;font-size:16px}.lock span{font-size:12px;color:var(--chu2);line-height:1.45}
/* t94u2 — QR bàn: title không xuống dòng số bàn; bỏ pill chen ngang */
.lock.lock-ban{align-items:flex-start;gap:12px}
.lock.lock-ban > div{flex:1;min-width:0}
.lock.lock-ban .lock-ban-t,.lock b.lock-ban-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px;line-height:1.3}
.lock.lock-ban span{display:block;margin-top:4px}

.ln{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:14px}
.ln small{color:var(--chu3)}
.ln.mut{color:var(--chu2)}
.ln.tot{margin-top:6px;padding-top:12px;border-top:1px solid var(--vien);font-size:16px;font-weight:600}
.ln.tot b{color:var(--nhan-chu);font-size:18px}
.pay{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;border:1.5px solid var(--nhan);background:var(--nhan-nhat)}
.pay i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#0A6E3F;color:#fff;flex:none}
.pay div{flex:1}.pay b{display:block;font-size:15px}.pay span{font-size:12px;color:var(--chu2)}
.rd{width:26px;height:26px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--tren-nhan)}
.rd svg{width:16px;height:16px}
.note-cash{margin:12px 2px 0;font-size:12px;color:var(--chu2);line-height:1.5}
.form-xanhngoc .card{border-radius:var(--r-the)}
.form-xanhngoc .intro{background:transparent;border:1px solid var(--vien)}

/* ===== CỔNG THANH TOÁN ===== */
.pay-scr{display:flex;flex-direction:column;gap:16px;padding-bottom:30px}
.onl-h{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur)}
.onl-logo{width:46px;height:46px;border-radius:14px;background:#0A6E3F;display:grid;place-items:center;color:#fff}
.onl-h b{display:block}.onl-h span{font-size:12px;color:var(--chu2)}
.pay-box{padding:28px 20px;border-radius:var(--r-sheet);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.pay-ic{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:var(--nhan-nhat)}
.pay-box.ok .pay-ic{background:var(--grad);color:var(--tren-nhan);box-shadow:0 0 40px var(--glow)}
.pay-box.ok .pay-ic svg{width:42px;height:42px;stroke-width:2.4}
.spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--nhan-nhat);border-top-color:var(--nhan);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pay-box h1{margin:6px 0 0;font-size:22px}
.pay-box p{margin:0;color:var(--chu2);font-size:14px;line-height:1.5}
.pay-rows{width:100%;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.pay-rows div{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-top:1px solid var(--vien)}
.pay-rows span{color:var(--chu2)}
.pay-act{display:flex;flex-direction:column;gap:10px}
.vitri{margin:0}
.vitri h3{margin-bottom:4px}
.vitri .muted{margin:0 0 12px}
.vt-read{height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;color:var(--chu3);background:rgba(255,255,255,.05);border:1.5px dashed var(--vien)}
.vt-read.has{color:var(--chu2);border-style:solid;border-color:var(--nhan)}
.vt-read b{font-size:32px;color:var(--nhan-chu);letter-spacing:2px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.keypad button{height:62px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid var(--vien);font-size:26px;font-weight:600;display:grid;place-items:center}
.keypad button:active{background:var(--nhan-nhat)}
.keypad .kp-ok{background:var(--grad);color:var(--tren-nhan);font-size:18px;font-weight:700;border:0}
.vitri.ok p{margin:10px 0 0;font-size:15px}

/* ===== THÊM / WIFI / GÓP Ý ===== */
.them{padding-bottom:20px}
.gd-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--vien)}
.gd-seg button{position:relative;z-index:1;height:46px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;color:var(--chu2);transition:color .3s}
.gd-seg button.on{color:var(--tren-nhan)}
.gd-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--grad);box-shadow:0 6px 18px var(--glow);transition:transform .45s cubic-bezier(.3,1.3,.5,1)}
html[data-mode="toi"] .gd-seg.mode-seg > .gd-thumb{transform:translateX(100%)}
html[data-mode="sang"] .gd-seg.mode-seg > .gd-thumb{transform:none}

.sw{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
.sw-cam{background:#F7931E}.sw-xn{background:#14B8A6}
.gd-card .muted{display:block;margin-top:10px}
.list{padding:6px 16px}
.list h3{margin:10px 0 2px}
.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--vien)}
.li:last-child{border-bottom:0}
.li i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu);flex:none}
.li div{flex:1}.li b{display:block;font-size:15px;font-weight:500}.li span{font-size:12px;color:var(--chu2)}
.li>svg{color:var(--chu3);width:18px;height:18px}
.wifi-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 0 24px;color:var(--chu2);font-size:13px}
.wifi-hero i{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu);box-shadow:0 0 40px var(--glow)}
.wifi-hero i svg{width:40px;height:40px}
.wf{display:flex;flex-direction:column;gap:12px}
.wf div{display:flex;justify-content:space-between;align-items:center}
.wf b{font-size:15px}
.pw{height:38px;padding:0 14px;border-radius:12px;background:var(--nhan-nhat);color:var(--nhan-chu);font-weight:700;letter-spacing:.5px}
.rate{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.rate+.rate{border-top:1px solid var(--vien)}
.rate span{font-size:14px}
.stars{display:flex;gap:4px}
.stars button{color:rgba(255,255,255,.18)}
.stars button.on{color:var(--nhan)}
.stars svg{width:26px;height:26px}
.gopy textarea{min-height:110px}

/* ===== QEE ===== */
.qee{display:flex;flex-direction:column;height:100dvh;padding-bottom:calc(var(--sab) + 12px)}
.qt{flex:1;text-align:center}
.qt h1{margin:0;font-size:18px}
.qt span{font-size:12px;color:var(--chu2)}
.qee-xanhngoc .qt{text-align:left}
.msgs{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:8px 0 12px}
.msg{display:flex;gap:10px;max-width:92%}
.msg p{margin:0;padding:12px 14px;font-size:14px;line-height:1.5;border-radius:20px}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--grad);color:var(--tren-nhan);border-bottom-right-radius:6px}
.msg.qee p{background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);border-top-left-radius:6px}
.qav{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--tren-nhan);flex:none}
.qav svg{width:18px;height:18px}
.qcard{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px;border-radius:18px;background:var(--kinh-dam);border:1px solid var(--vien)}
.qcard img{width:54px;height:54px;border-radius:14px;object-fit:cover}
.qcard div{flex:1}.qcard b{display:block;font-size:14px}.qcard span{font-size:12px;color:var(--nhan-chu)}
.qsug{display:flex;gap:8px;margin-top:8px}
.qsug a{flex:1;padding:8px;border-radius:16px;background:var(--kinh-dam);border:1px solid var(--vien);display:flex;flex-direction:column;gap:4px;font-size:12px}
.qsug img{width:100%;height:64px;object-fit:cover;border-radius:12px}
.qsug span{color:var(--nhan-chu);font-weight:600}
.speaking{display:flex;align-items:center;gap:8px;align-self:flex-start;margin-left:44px;padding:8px 14px;border-radius:999px;background:var(--nhan-nhat);color:var(--nhan-chu);font-size:12px;font-weight:600}
.speaking svg{width:18px;height:18px}
.mini-bars{display:flex;gap:3px;align-items:center;height:16px}
.mini-bars i{width:3px;height:100%;border-radius:2px;background:var(--wave);animation:bar .8s infinite ease-in-out alternate}
.mini-bars i:nth-child(2n){animation-delay:.2s}.mini-bars i:nth-child(3n){animation-delay:.4s}
.mini-ripple{position:relative;width:18px;height:18px}
.mini-ripple i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--nhan-chu);animation:rip2 1.4s infinite}
.mini-ripple i:nth-child(2){animation-delay:.7s}
@keyframes rip2{from{transform:scale(.3);opacity:1}to{transform:scale(1.4);opacity:0}}
.qsugg{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 10px;padding:0 18px;scrollbar-width:none}
.qsugg::-webkit-scrollbar{display:none}
.qsugg button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--vien);background:var(--kinh);font-size:13px;color:var(--chu2)}
[data-gd="xanhngoc"] .qsugg button{border-color:rgba(94,234,212,.35);color:var(--nhan-chu);background:transparent}
.qee-bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:999px;background:var(--kinh-dam);border:1px solid var(--vien);backdrop-filter:var(--blur)}
.qee-bar input{flex:1;min-width:0;height:44px;border:0;background:transparent;padding:0;font-size:16px!important;outline:none}
.qee-bar .send{width:40px;height:40px;color:var(--chu2)}
.mic-btn{width:60px;height:60px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:var(--tren-nhan);box-shadow:0 0 0 6px var(--nhan-nhat),0 10px 26px var(--glow);touch-action:none;user-select:none;-webkit-user-select:none}
.mic-btn svg{width:26px;height:26px}
.mic-btn.on{transform:scale(1.08)}
.listen{position:fixed;left:50%;transform:translateX(-50%);width:100%;max-width:430px;bottom:0;pointer-events:none;opacity:0;transition:.3s;z-index:40}
.listen.on{opacity:1}
.ls-in{margin:0 12px calc(var(--sab) + 92px);padding:22px 20px 24px;border-radius:var(--r-sheet);background:var(--kinh-dam);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:var(--bong);text-align:center}
.ls-k{margin:0;font-size:12px;color:var(--nhan-chu);font-weight:600;letter-spacing:.3px}
.live{margin:10px 0 16px;font-size:20px;font-weight:600;line-height:1.4;min-height:56px}
.wave-bars{display:flex;align-items:center;justify-content:center;gap:4px;height:64px}
.wave-bars i{width:5px;height:var(--h);border-radius:4px;background:var(--wave);box-shadow:0 0 10px var(--glow);animation:bar .7s var(--d) infinite ease-in-out alternate}
@keyframes bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.wave-orb{position:relative;width:140px;height:140px;margin:0 auto}
.wave-orb i{position:absolute;inset:30px;border-radius:50%;border:2px solid rgba(94,234,212,.7);animation:rip3 2.1s infinite ease-out}
.wave-orb i:nth-child(2){animation-delay:.7s}.wave-orb i:nth-child(3){animation-delay:1.4s}
@keyframes rip3{from{transform:scale(.7);opacity:1}to{transform:scale(2);opacity:0}}
.wave-orb .core{position:absolute;inset:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#99F6E4,#1ABC9C 45%,#0D9488);display:grid;place-items:center;color:var(--tren-nhan);box-shadow:0 0 40px var(--glow);animation:pulse 1.2s infinite alternate}
.wave-orb .core svg{width:30px;height:30px}
@keyframes pulse{to{transform:scale(1.08)}}
.qee-xanhngoc .listen{top:0;bottom:0;background:rgba(4,26,28,.55);backdrop-filter:blur(6px)}
.qee-xanhngoc .ls-in{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 24px calc(var(--sab) + 120px);border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:linear-gradient(180deg,rgba(6,43,45,.75),rgba(4,26,28,.96))}
.qee-xanhngoc .live{font-weight:500;font-size:22px}
.qee-xanhngoc .qee-bar{position:relative;z-index:41}
.qee-xanhngoc .msg.qee p{border-radius:22px 22px 22px 6px}
.qee-cam .msg.qee p{background:rgba(36,37,41,.78)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.orderbar b{white-space:nowrap}
.orderbar>div{flex:0 1 auto;min-width:0;margin-right:10px}
.form .orderbar .btn-main{padding:0 18px;font-size:15px;flex:1;max-width:220px}
.buybar-x{background:linear-gradient(180deg,rgba(4,26,28,0),rgba(4,26,28,.96) 22%);padding-top:28px}
.btn-buy{white-space:nowrap;font-size:14px;gap:10px;padding:0 14px}
.buybar .stepper .sl{min-width:48px;font-size:13px}
.buybar .stepper .ib{width:34px;height:34px}
.ci-f .price{white-space:nowrap}
.ci-f{gap:4px}
.ci-f .stepper .sl{min-width:44px}

/* ===== BỔ SUNG r2: hình thức, wifi theo cấu hình ===== */
.hopt.off{opacity:.55;cursor:not-allowed}
.hopt.off i{background:rgba(255,255,255,.06);color:var(--chu3)}
.hopt.off .chip{flex:none}
.note-xn{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--chu2)}
.note-xn svg{width:16px;height:16px;color:var(--nhan-chu);margin-top:1px}
.empty .muted{text-align:center;font-size:13px;max-width:280px;line-height:1.5}
.wf-cho{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.wf-cho b{font-size:17px}.wf-cho .muted{margin:0;line-height:1.5;font-size:13px}

/* ===== CHẾ ĐỘ QUẦY ===== */
html.quay #app{max-width:none}
html.quay .bgimg{max-width:none}
.q-scr{position:relative;min-height:100dvh}
.q-main{padding:max(var(--sat),12px) 14px 0}
.q-top{display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.q-badge{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 6px 16px var(--glow)}
.q-badge svg{width:14px;height:14px}
.q-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.q-tt b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-tt span{font-size:12px;color:var(--chu2)}
.gd-seg.sm{display:none;width:230px;padding:4px}
.gd-seg.sm button{height:36px;font-size:13px}
.gd-seg.sm .gd-thumb{top:4px;bottom:4px;left:4px;width:calc(50% - 4px)}
.q-pal{width:40px;height:40px}
.q-sticky{position:sticky;top:0;z-index:5;margin:0 -14px;padding:8px 14px 8px;background:linear-gradient(var(--nen) 82%,transparent);}
[data-gd] .q-sticky{background:linear-gradient(rgba(13,16,23,.94) 85%,rgba(13,16,23,0))}
[data-gd="xanhngoc"] .q-sticky{background:linear-gradient(rgba(4,26,28,.95) 85%,rgba(4,26,28,0))}
.q-tim{flex-direction:row;align-items:center;gap:10px;height:46px;padding:0 6px 0 14px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--chu3)}
.q-tim svg{width:19px;height:19px}
.q-tim input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:16px}
.q-tim input::placeholder{color:var(--chu3)}
.q-tim .ib{width:36px;height:36px}
.q-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:10px}
.q-tabs::-webkit-scrollbar,.q-chips::-webkit-scrollbar,.q-gan-r::-webkit-scrollbar{display:none}
.q-tabs button{flex:none;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--chu2);background:rgba(255,255,255,.06);border:1px solid var(--vien);white-space:nowrap}
[data-gd="cam"] .q-tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(247,147,30,.3)}
[data-gd="xanhngoc"] .q-tabs button{background:none;box-shadow:inset 0 -2px 0 var(--vien)}
[data-gd="xanhngoc"] .q-tabs button.on{color:var(--nhan-chu);box-shadow:inset 0 -3px 0 var(--nhan-chu);text-shadow:0 0 14px var(--glow)}
.q-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-top:8px}
.q-chips button{flex:none;height:32px;padding:0 12px;border-radius:10px;font-size:12px;font-weight:600;color:var(--chu2);border:1px dashed var(--vien);white-space:nowrap}
.q-chips button.on{border-style:solid;border-color:var(--nhan);color:var(--nhan-chu);background:var(--nhan-nhat)}
.q-gan{margin:6px 0 4px}
.q-gan-t{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--chu2);margin-bottom:6px}
.q-gan-t svg{width:14px;height:14px}
.q-gan-r{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.q-gan-r button{flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 4px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);font-size:12px;font-weight:600;white-space:nowrap}
.q-gan-r img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.q-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.q-card{position:relative;min-width:0;display:flex;flex-direction:column;text-align:left;padding:5px 5px 8px;border-radius:16px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:transform .12s}
.q-card:active{transform:scale(.96)}
.q-card.co{border-color:var(--nhan);box-shadow:0 0 0 1px var(--nhan) inset}
.q-card img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:12px;pointer-events:none}
[data-gd="xanhngoc"] .q-card img{box-shadow:0 0 0 2px var(--vien),0 8px 20px rgba(0,0,0,.35)}
.q-sl{position:absolute;top:8px;right:8px;height:22px;padding:0 8px;border-radius:999px;background:var(--grad);color:var(--tren-nhan);font-size:11px;font-weight:700;display:flex;align-items:center;white-space:nowrap}
.q-ten{font-size:12px;font-weight:600;line-height:1.3;margin:6px 3px 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.q-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:3px 4px;margin:auto 3px 0}
.q-ma{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--chu3);border:1px solid var(--vien);border-radius:6px;padding:1px 4px}
.q-f b{font-size:12px;color:var(--nhan-chu);white-space:nowrap}
.q-hint{text-align:center;font-size:12px;color:var(--chu3);margin:12px 0 0;padding-bottom:300px}
.q-rong{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 0;color:var(--chu2)}
.q-rong>svg{width:40px;height:40px;color:var(--nhan-chu)}
.q-rong .btn-ghost{padding:0 22px;height:44px}
/* bảng đơn luôn hiển thị */
.q-panel{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;max-height:250px;padding:10px 14px calc(var(--sab) + 12px);border-radius:26px 26px 0 0;background:var(--kinh-dam);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--vien);box-shadow:0 -12px 30px rgba(0,0,0,.4)}
.q-ph{display:flex;align-items:center;justify-content:space-between;gap:10px}
.q-ph>div{display:flex;flex-direction:column}
.q-ph b{font-size:15px}.q-ph>div span{font-size:12px;color:var(--chu2)}
.q-vt{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px dashed var(--nhan);color:var(--nhan-chu);font-size:12px;font-weight:600;white-space:nowrap}
.q-vt.co{border-style:solid;background:var(--nhan-nhat)}
.q-vt svg{width:16px;height:16px}
.q-lns{flex:1;overflow-y:auto;margin:8px 0;min-height:40px}
.q-trong{margin:10px 0;text-align:center;font-size:13px;color:var(--chu3)}
.q-ln{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--vien)}
.q-ln:last-child{border-bottom:0}
.q-ln-b{min-width:0}
.q-ln-b b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-ln-b span{display:block;font-size:11px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-ln .stepper .ib{width:30px;height:30px}
.q-ln .stepper .sl{min-width:48px;font-size:12px}
.q-ln .price{font-size:13px;min-width:72px;text-align:right;white-space:nowrap}
.q-pf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.q-pf>div{display:flex;flex-direction:column}
.q-pf span{font-size:12px;color:var(--chu2)}
.q-pf b{font-size:20px;color:var(--nhan-chu);white-space:nowrap}
.q-pf .btn-main{height:50px;padding:0 28px;white-space:nowrap}
.btn-main:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.q-sheet{max-height:88dvh;overflow-y:auto;z-index:41}
html.quay .sheet-bg{z-index:40}
.q-sheet .keypad button{height:58px}
.q-khong{margin-top:12px;width:100%;font-size:14px}
.q-oh{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.q-oh img{width:64px;height:64px;border-radius:16px;object-fit:cover}
.q-oh h2{font-size:18px!important}
.q-oh .muted{margin:2px 0 0!important}
.q-note{height:46px;border-radius:14px;padding:0 14px;background:rgba(255,255,255,.06);border:1px solid var(--vien);outline:0}
.q-ob{display:flex;align-items:center;gap:10px;margin-top:12px}
.q-ob .btn-main{flex:1;height:52px;padding:0 14px;white-space:nowrap;font-size:15px}
/* bước thanh toán */
.q-tt-scr .q-main,.q-xong .q-main{max-width:520px;margin:0 auto;padding-bottom:30px}
.q-cols h3{margin:0 0 12px;font-size:15px}
button.pay{width:100%;text-align:left;margin-top:10px;border-color:var(--vien);background:rgba(255,255,255,.04)}
button.pay:first-of-type{margin-top:0}
button.pay.on{border-color:var(--nhan);background:var(--nhan-nhat)}
button.pay .rd{background:rgba(255,255,255,.08);border:1.5px solid var(--vien)}
button.pay.on .rd{background:var(--grad);border:0}
.pay.cash i{background:var(--nhan-nhat);color:var(--nhan-chu)}
.q-dua{flex-direction:row;align-items:center;gap:8px;height:60px;padding:0 18px;border-radius:18px;background:rgba(255,255,255,.06);border:1.5px solid var(--nhan)}
.q-dua input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:26px;font-weight:700;color:var(--chu)}
.q-dua span{font-size:20px;color:var(--chu2);font-weight:600}
.q-goiy{margin-top:10px}
.q-goiy button{font-size:13px}
.q-kq{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.q-kq span{font-size:13px;color:var(--chu2)}
.q-kq b{font-size:22px;white-space:nowrap}
.q-kq.ok{border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.10)}.q-kq.ok b{color:var(--ok)}
.q-kq.thieu{border-color:rgba(250,67,49,.4);background:var(--cay-nen)}.q-kq.thieu b{color:var(--cay-chu)}
.q-cho{display:flex;gap:14px;align-items:center}
.q-cho .spin{width:36px;height:36px;flex:none}
.q-cho b{display:block}.q-cho span{font-size:12px;color:var(--chu2)}
.q-pf-tt{padding:14px 16px;border-radius:var(--r-the);background:var(--kinh-dam);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.q-xong .pay-box{margin-top:10px}
.q-thua b{color:var(--ok);font-size:18px}
.q-xong .pay-act{margin-top:16px}
/* máy tính bảng ngang */
@media (min-width:700px){
  .gd-seg.sm{display:grid}
  .q-pal{display:none}
  .q-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
}
@media (min-width:900px){
  .q-scr:not(.q-tt-scr):not(.q-xong){display:grid;grid-template-columns:1fr 380px}
  .q-main{padding:14px 18px 0}
  .q-sticky{margin:0 -18px;padding:8px 18px}
  .q-hint{padding-bottom:30px}
  .q-panel{position:sticky;top:0;height:100dvh;max-height:none;border-radius:0;border-width:0 0 0 1px;padding:18px 18px 20px;box-shadow:-12px 0 30px rgba(0,0,0,.3)}
  .q-ph{flex-direction:column;align-items:stretch}
  .q-ph b{font-size:18px}
  .q-vt{justify-content:center;height:42px;font-size:13px}
  .q-lns{margin:12px 0}
  .q-ln .stepper .ib{width:34px;height:34px}
  .q-tt-scr .q-main,.q-xong .q-main{max-width:1100px}
  .q-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .q-xong .q-main{max-width:560px}
  html.quay .bsheet{max-width:520px;bottom:auto;top:50%;transform:translate(-50%,-40%) scale(.96);opacity:0;pointer-events:none;border-radius:var(--r-sheet);transition:.28s}
  html.quay .bsheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
}

@media (max-width:699px){
  html.quay .q-ln{padding:3px 0}
  html.quay .q-ln .stepper .ib{width:28px;height:28px}
  html.quay .q-f{flex-direction:row-reverse;justify-content:flex-end;flex-wrap:wrap}
  html.quay .q-f b{font-size:12px;flex-basis:100%}
  html.quay .q-hint{padding-bottom:260px}
}
@media (min-width:700px){.q-card img{aspect-ratio:1/1}}

/* ===== Đợt 3: Trang chủ dạng ô, giỏ hàng nhảy số, tab Trang chủ · Quay lại · Giỏ hàng · Qee ===== */
.tab{background:none;border:0;padding:0;cursor:pointer}
.tab-gio .badge{transform-origin:50% 60%}
.badge.bump{animation:tqBump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes tqBump{0%{transform:scale(1)}35%{transform:scale(1.45) translateY(-3px)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.tab-gio:has(.badge.bump) svg{animation:tqShake .5s ease}
@keyframes tqShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}55%{transform:rotate(9deg)}80%{transform:rotate(-4deg)}}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:128px;padding:16px;border-radius:var(--r-the);background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile i{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu);margin-bottom:auto}
.tile i svg{width:24px;height:24px}
.tile b{font-size:16px;font-weight:700;margin-top:12px}
.tile span{font-size:12px;color:var(--chu2);line-height:1.35}
.tile.main{grid-column:1/-1;min-height:118px;background:var(--grad);border-color:transparent;color:var(--tren-nhan);box-shadow:0 14px 30px var(--glow)}
.tile.main i{background:rgba(255,255,255,.22);color:inherit}
.tile.main b{font-size:20px}
.tile.main span{color:inherit;opacity:.85}
.tile.off,.act-b.off{opacity:.5;filter:saturate(.3);cursor:not-allowed}
.tile.off span,.act-b.off span{color:var(--chu3);font-style:italic}
[data-gd="xanhngoc"] .tile{background:rgba(6,43,45,.5)}
[data-gd="xanhngoc"] .tile i{box-shadow:0 0 18px var(--glow)}
[data-gd="xanhngoc"] .tile.main{background:linear-gradient(135deg,rgba(20,184,166,.9),rgba(8,90,96,.92));color:#fff}
.home-x .tiles{margin-top:6px}
.hd-act{display:flex;gap:8px;align-items:center}
.info-scr .card{margin-bottom:14px}
.kb-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 18px}
.kb-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu)}
.kb-ic svg{width:30px;height:30px}
.kb-card .btn-main{margin-top:8px;width:100%}
.kb-card .btn-main.da{background:rgba(255,255,255,.08);color:var(--nhan-chu);box-shadow:none;border:1px solid var(--nhan)}
.acts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.act-b{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 6px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.act-b i{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu)}
.act-b i svg{width:21px;height:21px}
.act-b b{font-size:13px}
.act-b span{font-size:11px;color:var(--chu2);line-height:1.3}
.if-ten{font-size:18px}
.if-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--vien)}
.if-row:first-of-type{margin-top:10px}
.if-row i{color:var(--nhan-chu)}.if-row i svg{width:20px;height:20px}
.if-row div{display:flex;flex-direction:column;gap:2px}
.if-row span{font-size:12px;color:var(--chu2)}
.if-row b{font-size:14px}
.if-row b.chua{color:var(--chu3);font-weight:500;font-style:italic}

/* Tiêu đề dính trên cùng, chừa vùng an toàn và thanh địa chỉ thu gọn của Safari */
.topbar,.topbar-x{position:sticky;top:0;z-index:20;margin:calc(-1 * max(var(--sat),16px)) -18px 12px;padding:max(var(--sat),22px) 18px 10px}
[data-gd] .topbar{background:linear-gradient(rgba(13,16,23,.92) 78%,rgba(13,16,23,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-gd="xanhngoc"] .topbar-x{background:linear-gradient(rgba(4,26,28,.93) 78%,rgba(4,26,28,0))}
.q-main{padding-top:0}
.q-top{position:sticky;top:0;z-index:20;margin:0 -14px;padding:max(var(--sat),22px) 14px 10px}
[data-gd] .q-top{background:rgba(13,16,23,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[data-gd="xanhngoc"] .q-top{background:rgba(4,26,28,.92)}
.q-ban .q-top{position:relative}
.q-ban .q-sticky{top:0}

/* Chế độ quầy: không còn bảng đơn cố định */
html.quay .scr{max-width:430px;margin:0 auto}
.q-hint,html.quay .q-hint{padding-bottom:130px}
.q-h1{font-size:26px;margin:14px 0 4px}
.q-sub{margin:0}
.q-home .q-main{max-width:720px;margin:0 auto}
.q-gio .q-main{max-width:560px;margin:0 auto}
.q-gl-list{padding:6px 14px}
.q-gl{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--vien)}
.q-gl:last-child{border-bottom:0}
.q-gl img{width:64px;height:64px;border-radius:14px;object-fit:cover;flex:none}
.q-gl-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.q-gl-b>b{font-size:14px}
.q-gl-b>span{font-size:12px;color:var(--chu2)}
.q-gl-f{display:flex;align-items:center;gap:10px;margin-top:4px}
.q-gl-f .price{margin-left:auto;font-weight:700;color:var(--nhan-chu);font-size:14px;white-space:nowrap}
.q-gl-f .del{width:36px;height:36px;color:var(--chu3)}
.q-pf-gio{padding:14px 16px;border-radius:var(--r-the);background:var(--kinh-dam);border:1px solid var(--vien);margin-top:6px}
.q-vtk .vt-read.khong{border-style:solid;border-color:var(--nhan);color:var(--nhan-chu);font-size:14px;text-align:center;padding:0 10px}
.q-vtk .keypad button{height:54px;font-size:24px}
.q-vtk .kp-clr{font-size:14px!important;color:var(--chu2)}
.q-khong{display:flex;align-items:center;justify-content:center;gap:8px}
.q-khong.on{border-color:var(--nhan);color:var(--nhan-chu);background:var(--nhan-nhat)}
.q-khong svg{width:18px;height:18px}
@media (min-width:700px){
  .q-home .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .q-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (min-width:900px){
  .q-scr:not(.q-tt-scr):not(.q-xong){display:block}
  .q-top{margin:0 -18px;padding-left:18px;padding-right:18px}
  .q-hint{padding-bottom:130px}
}
.q-ban .q-sticky{padding-top:max(var(--sat),12px)}

/* Đợt 4: Trang chủ gọn, vừa một màn iPhone (kể cả khung Safari 390×664) */
.f-hint{display:block;margin-top:5px;font-size:11.5px;font-weight:500;color:var(--chu2);line-height:1.3}
.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}
.tile{min-height:0;padding:12px 10px 11px;gap:2px;border-radius:20px}
.tile i{width:38px;height:38px;border-radius:13px;margin-bottom:8px}
.tile i svg{width:20px;height:20px}
.tile b{font-size:13.5px;margin-top:0;line-height:1.25}
.tile span{font-size:10.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile.main{grid-column:auto;min-height:0;box-shadow:0 8px 18px var(--glow)}
.tile.main b{font-size:13.5px}
.home-c .hello{margin:14px 2px 4px;font-size:14px}
.home-c .hero{font-size:28px}
.hero-sea{min-height:0;padding-bottom:12px}
.store-card{padding:14px 16px;margin-top:14px}
.store-card h1{font-size:22px;margin:4px 0 8px}
.home-x .tiles{margin-top:4px}
.q-h1{font-size:22px;margin:10px 0 2px}
.q-home .tiles{margin-top:14px}
@media (min-width:700px){.q-home .tile{padding:18px 16px}.q-home .tile b{font-size:16px}.q-home .tile span{font-size:12px}}
/* 4 ô 2×2 gọn + nút tròn Zalo / Gọi quán */
.tiles.t4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tiles.t4 .tile{flex-direction:row;align-items:center;gap:10px;padding:12px;min-height:76px}
.tiles.t4 .tile i{margin:0;flex:none}

.tile .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.lh-nhanh{display:flex;gap:8px}
.lh-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--kinh);border:1px solid var(--vien);color:var(--nhan-chu);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.lh-btn svg{width:21px;height:21px}
.lh-btn.off{opacity:.55}
.home-pill{display:inline-flex;margin-top:12px;max-width:100%}
.home-pill span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-card .lh-nhanh{margin-top:12px}
[data-gd="xanhngoc"] .lh-btn{background:rgba(4,26,28,.5)}
.q-home .q-top .lh-nhanh{margin-right:2px}
.kb-intro{margin:0 2px 12px;font-size:13px}
.kb-me{display:flex;gap:14px;align-items:center}
.kb-qr{flex:none;width:120px;height:120px;padding:6px;border-radius:16px;background:#fff}
.qr-svg{width:100%;height:100%;display:block}
.kb-me-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.kb-me-b>span{font-size:12px;color:var(--chu2)}
.kb-me-b>b{font-size:16px;color:var(--nhan-chu);word-break:break-all}
.kb-me-b small{font-size:11.5px;color:var(--chu2);line-height:1.35}
.kb-me-b .btn-main{margin-top:8px;height:42px;padding:0 14px;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.kb-me-b .btn-main svg{width:18px;height:18px}
.info-scr .tg-row span{display:flex;flex-direction:column;gap:3px;padding-right:10px}
.info-scr .tg-row small{font-size:11.5px;color:var(--chu2);line-height:1.35}
.kb-k{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--vien)}
.kb-k:first-of-type{border-top:0}
.kb-av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 70% 55%),hsl(calc(var(--h) + 40) 60% 35%))}
.kb-av svg{width:20px;height:20px}
.kb-k>div{flex:1;min-width:0;display:flex;flex-direction:column}
.kb-k>div b{font-size:14px;overflow:hidden;text-overflow:ellipsis}
.kb-k>div span{font-size:11.5px;color:var(--chu2)}
.kb-b{height:36px;padding:0 14px;font-size:12.5px;white-space:nowrap}
.kb-b.da{color:var(--chu2)}
.kb-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 8px 6px;color:var(--chu2);font-size:13px}
.kb-empty svg{width:30px;height:30px;color:var(--nhan-chu)}
.kb-empty p{margin:0;line-height:1.45}
.kb-sheet{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-bottom:calc(var(--sab) + 22px)}
.kb-sheet p,.kb-card>p{margin:4px 6px 6px;font-size:16px;font-weight:600;line-height:1.45}
.kb-sheet .btn-main,.kb-sheet .btn-ghost{width:100%}
.kb-sheet .kb-ic{margin-top:4px}
button.tile{text-align:left;font:inherit;color:inherit;cursor:pointer}

/* ---- t63: Kết bạn consent / Chia sẻ hồ sơ / lời mời ---- */
button.li{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;background:none;border:0}
.kb-dongy,.kb-loi{align-items:stretch;text-align:left;gap:12px;max-height:min(85dvh,640px);overflow-y:auto;padding-top:6px;padding-bottom:10px}
.kb-dongy .grab,.kb-loi .grab{align-self:center}
/* Sheet sits above tab bar (not under / overlapping it) */
[data-gd] .bsheet.kb-dongy,[data-gd] .bsheet.kb-loi{bottom:calc(var(--sab) + 96px);padding-bottom:18px}
.kb-dy-t{margin:2px 0 0;font-size:20px;font-weight:700;text-align:center;letter-spacing:-.01em;line-height:1.3}
.kb-dy-sub{margin:0;font-size:15.5px;font-weight:700;text-align:center;color:var(--chu);line-height:1.35}
.kb-dy-body{margin:0;font-size:13.5px;font-weight:400;color:var(--chu2);line-height:1.5;text-align:center}
.kb-dy-box{display:flex;flex-direction:column;gap:12px;padding:14px 14px;border-radius:18px;background:rgba(0,0,0,.28);border:1px solid var(--vien)}
[data-gd] .kb-dy-box{background:rgba(0,0,0,.22)}
[data-gd="xanhngoc"] .kb-dy-box{background:rgba(2,20,24,.45)}
.kb-dy-row{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--chu2)}
.kb-dy-row i{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--chu2);margin-top:1px}
.kb-dy-row i svg{width:20px;height:20px}
.kb-dy-row:first-child i{color:#34d399}
.kb-dy-check{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:6px 2px;background:none;border:0;color:var(--chu);font:inherit;cursor:pointer}
.kb-dy-check .box{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--chu3);display:grid;place-items:center;margin-top:2px;transition:.2s}
.kb-dy-check.on .box{background:var(--grad);border-color:transparent;color:var(--tren-nhan)}
.kb-dy-check.on .box::after{content:"";width:10px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translate(1px,-1px)}
.kb-dy-check span{font-size:13.5px;line-height:1.4;font-weight:500}
.kb-dongy .btn-main:disabled,.kb-dongy .btn-main[disabled]{opacity:.38;pointer-events:none;box-shadow:none;filter:grayscale(.2)}
.kb-sheet.kb-dongy .kb-dy-foot,.kb-sheet.kb-loi .kb-dy-foot{margin:2px 0 0;text-align:center;font-size:12.5px!important;font-weight:400!important;color:var(--chu3);line-height:1.4;flex-shrink:0}
.kb-share .tg-row span{font-weight:600;font-size:14.5px}
.kb-loi-who{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.kb-loi-who div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kb-loi-who b{font-size:15px}.kb-loi-who span{font-size:12.5px;color:var(--chu2)}
.kb-loi-act{display:flex;gap:10px;margin-top:4px}
.kb-loi-act button{flex:1;height:48px;font-size:15px}
.kb-sheet.kb-dongy p.kb-dy-body,.kb-sheet.kb-loi p.kb-dy-body{font-weight:400;font-size:13.5px;margin:0}

/* ---- Đợt 4: Kết bạn · Bạn bè · Nhắn tin · Tặng món ---- */
.kb-seg{display:flex;gap:6px;padding:4px;margin:0 0 12px;border-radius:999px;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.kb-seg a{flex:1;height:40px;display:grid;place-items:center;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--chu2)}
.kb-seg a.on{background:var(--grad);color:var(--tren-nhan)}
[data-gd="xanhngoc"] .kb-seg a.on{background:var(--nhan-nhat);color:var(--nhan-chu);box-shadow:inset 0 0 0 1px var(--nhan-chu)}
.kb-k2{flex-wrap:wrap}
.kb-k2 .kb-more{width:44px;height:44px;color:var(--chu2)}
.kb-k2 .kb-more svg{width:22px;height:22px}
.kb-acts{flex-basis:100%;display:flex;gap:8px;padding-left:54px}
.kb-acts .kb-b{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 10px}
.kb-acts .kb-b svg{width:16px;height:16px}
.kb-f .kb-go{color:var(--nhan-chu)} .kb-f .kb-go svg{width:20px;height:20px}
.kb-note{font-size:12px;margin:8px 2px 0;line-height:1.45}
.kb-me .kb-qr{width:96px;height:96px}
.kb-me-b .btn-ghost{margin-top:8px;height:42px;padding:0 14px;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:6px}
.kb-me-b .btn-ghost svg{width:18px;height:18px}
.kb-sheet small{font-size:13px;line-height:1.45;margin:-6px 8px 4px}
.kb-sh-h{display:flex;align-items:center;gap:10px;font-size:16px}
.kb-sh-b{display:flex;align-items:center;justify-content:center;gap:8px}
.kb-sh-b svg{width:18px;height:18px}
.kb-sh-b[data-act="kbchan"]{color:#ff8a80}
.qua-ds{display:flex;flex-direction:column;gap:10px}
.qua-card{padding:14px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.qua-card.ban.tt-gui{border-color:var(--nhan);background:var(--nhan-nhat)}
.qua-h{display:flex;gap:10px;align-items:center}
.qua-h>i{width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan)}
.qua-h>i svg{width:22px;height:22px}
.qua-h div{display:flex;flex-direction:column;min-width:0}
.qua-h b{font-size:14.5px;line-height:1.3}
.qua-h span{font-size:12px;color:var(--chu2)}
.qua-mon{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.qua-mon small{display:block;color:var(--chu2);font-size:11.5px}
.qua-loi{margin:8px 0 0;font-size:13px;font-style:italic;color:var(--chu2)}
.qua-tt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.qua-tt small{font-size:12px;color:var(--chu2);flex:1}
.qua-tt b{font-size:14px;color:var(--nhan-chu)}
.qua-act{display:flex;gap:8px;margin-top:12px}
.qua-act button{flex:1;height:44px;font-size:14px;padding:0 12px}
/* Nhắn tin */
.chat-scr{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:0}
.ct-h{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;margin:calc(-1 * max(var(--sat),16px)) -18px 0;padding:max(var(--sat),18px) 12px 10px;border-radius:0 0 24px 24px;border-top:0}
.ct-h .kb-av{width:38px;height:38px}
.ct-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ct-t b{font-size:15.5px} .ct-t span{font-size:12px;color:var(--chu2)}
.ct-list{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 0 calc(var(--sab) + 96px)}
.ct-sys{align-self:center;text-align:center;font-size:12px;color:var(--chu3);margin:0 20px 6px;line-height:1.4}
.bb{max-width:78%;padding:9px 13px 6px;border-radius:20px;font-size:14.5px;line-height:1.4}
.bb p{margin:0;white-space:pre-wrap;word-break:break-word}
.bb time,.bb-q time{display:block;font-size:10.5px;opacity:.6;text-align:right;margin-top:2px}
.bb.toi{align-self:flex-end;background:var(--grad);color:var(--tren-nhan);border-bottom-right-radius:6px}
.bb.ban{align-self:flex-start;background:var(--kinh);border:1px solid var(--vien);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom-left-radius:6px}
[data-gd="xanhngoc"] .bb.toi{background:linear-gradient(135deg,rgba(20,184,166,.85),rgba(13,148,136,.85));color:#F0FDFA}
.bb-q{max-width:86%}
.bb-q.toi{align-self:flex-end} .bb-q.ban{align-self:flex-start}
.bb-q .qua-card{background:var(--kinh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.ct-in{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 12px);width:calc(100% - 24px);max-width:406px;z-index:25;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px}
.ct-in input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--chu);font-size:16px!important;outline:none;padding:0 6px}
.ct-in input::placeholder{color:var(--chu3)}
.ct-gift{color:var(--nhan-chu)}
.ct-send{background:var(--grad);color:var(--tren-nhan)}
.ct-in .ib svg{width:21px;height:21px}
/* Tặng món */
.tg-cho{display:flex;gap:12px;align-items:center}
.tg-cho div{display:flex;flex-direction:column;gap:2px}
.tg-cho b{font-size:15px} .tg-cho span{font-size:12px;color:var(--chu2);line-height:1.4}
.tg-dm{display:flex;gap:8px;overflow-x:auto;margin:0 -18px 12px;padding:0 18px;scrollbar-width:none}
.tg-dm::-webkit-scrollbar{display:none}
.tg-dm button{flex:none;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--vien);background:var(--kinh);color:var(--chu2);font:inherit;font-size:13.5px;font-weight:600}
.tg-dm button.on{background:var(--grad);color:var(--tren-nhan);border-color:transparent}
[data-gd="xanhngoc"] .tg-dm button.on{background:var(--nhan-nhat);color:var(--nhan-chu);border-color:var(--nhan-chu)}
.tg-ds{padding:6px 14px}
.tg-m{padding:10px 0;border-top:1px solid var(--vien)} .tg-m:first-child{border-top:0}
.tg-r{display:flex;align-items:center;gap:12px}
.tg-r img{width:52px;height:52px;border-radius:14px;object-fit:cover;flex:none}
.tg-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tg-b b{font-size:14px;line-height:1.3}
.tg-add{height:38px;padding:0 14px;display:flex;align-items:center;gap:4px;font-size:13px}
.tg-add svg{width:16px;height:16px}
.tg-m .stepper .ib{width:34px;height:34px;background:rgba(255,255,255,.08)}
.tg-m .stepper .sl{font-size:12.5px;min-width:46px;text-align:center}
.tg-o{margin:10px 0 0 64px}
.tg-o>span{display:block;font-size:12px;color:var(--chu2);margin-bottom:6px}
.tg-o .seg button{height:34px;padding:0 12px;font-size:12.5px}
.tang-scr textarea{width:100%;min-height:64px;border-radius:16px;border:1px solid var(--vien);background:rgba(255,255,255,.05);color:var(--chu);font-size:16px!important;padding:10px 12px;resize:none}
.tg-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 12px);width:calc(100% - 24px);max-width:406px;z-index:25;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px}
.tg-bar div{flex:1;display:flex;flex-direction:column}
.tg-bar span{font-size:12px;color:var(--chu2)} .tg-bar b{font-size:16px;color:var(--nhan-chu)}
.tg-bar .btn-main{height:48px;padding:0 18px;font-size:14.5px}
.tg-bar .btn-main:disabled{opacity:.45;box-shadow:none}
/* Quầy: đơn quà tặng */
.q-qua-l{position:relative}
.q-dot{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 0 2px var(--nen)}
.qq-h{display:flex;align-items:center;gap:8px}
.qq-h .chip.hot svg{width:14px;height:14px;margin-right:4px}
.qq-h b{flex:1;font-size:13px;color:var(--chu2)}
.qq-ban{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.qq-ban span{font-size:12px;color:var(--chu2)} .qq-ban b{font-size:22px;color:var(--nhan-chu)}
.qq-n{font-size:12.5px;color:var(--chu2);margin:8px 0 0}
.qq .btn-main,.qq .btn-ghost{margin-top:12px;width:100%;height:46px}
.kb-k>.kb-acts{flex:1 1 100%;flex-direction:row;padding-left:54px}
.kb-k2>div:not(.kb-acts){flex:1 1 0}
.tg-row .toggle{flex:none}
.tg-row>span{padding-right:12px;line-height:1.35}
.kb-k2>div span{line-height:1.35}
.q-qua-card{display:flex;align-items:center;gap:12px;margin-top:12px;padding:12px 14px}
.q-qua-card>i{position:relative;width:40px;height:40px;flex:none;border-radius:14px;display:grid;place-items:center;background:var(--nhan-nhat);color:var(--nhan-chu)}
.q-qua-card>i svg{width:22px;height:22px}
.q-qua-card .q-dot{top:-3px;right:-3px}
.q-qua-card div{flex:1;display:flex;flex-direction:column;gap:2px}
.q-qua-card b{font-size:14.5px} .q-qua-card span{font-size:12px;color:var(--chu2)}
.q-qua-card>svg{width:18px;height:18px;color:var(--chu3)}
/* Nút đổi giao diện nhanh (như nút sáng / tối): ô màu hai nửa gợi ý giao diện sẽ chuyển sang */
.gd-sw .gd-sw-i{width:22px;height:22px;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 2px 8px rgba(0,0,0,.35);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.gd-sw .den-xanhngoc{background:linear-gradient(135deg,#2DD4BF 0 50%,#0B2530 50% 100%)}
.gd-sw .den-cam{background:linear-gradient(135deg,#FFB547 0 50%,#F7931E 50% 100%)}
.gd-sw:active .gd-sw-i{transform:rotate(180deg) scale(.9)}
.gd-sw:focus-visible{outline:2px solid var(--nhan-chu);outline-offset:2px}
/* Trang chủ quầy trên điện thoại: tên quán xuống dòng riêng, không bị ép */
@media (max-width:699px){
  .q-home .q-top{flex-wrap:wrap;row-gap:8px}
  .q-home .q-top .q-pal{margin-left:auto}
  .q-home .q-top .q-tt{order:9;flex:1 1 100%}
  .q-home .q-top .q-tt b{font-size:17px}
}
.q-pal.gd-sw{width:44px;height:44px}
@media (max-height:700px){.chao-collage{height:min(430px,calc(100svh - 300px))}}
.chao-c .hero{font-size:min(34px,8vw)}
/* t40u — hướng dẫn nhấn món + ghi chú */
button.add{border:0;padding:0;cursor:pointer;font:inherit;flex:none}
.hd-mon{display:flex;align-items:flex-start;gap:10px;margin:10px 0 6px;padding:10px 12px;border-radius:16px;border:1px solid var(--vien);background:var(--kinh);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);font-size:13px;line-height:1.4;color:var(--chu)}
.hd-mon>i{flex:none;width:20px;height:20px;color:var(--nhan-chu);margin-top:1px}
.hd-mon>i svg{width:20px;height:20px}
.hd-mon>span{flex:1;min-width:0}
.hd-mon>.ib{flex:none;width:28px;height:28px;margin:-4px -4px 0 0;opacity:.7}
.hd-mon.q-hd{margin:8px 0 4px}
.menu-c .hd-mon{margin:12px 0 2px}
.note-opt{margin-top:6px;padding:12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--vien)}
.note-opt .opt-h{margin-bottom:8px}
.note-opt textarea,.note-opt .q-note{width:100%;min-height:64px;height:auto;resize:none;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--vien);padding:10px 12px;font-size:16px!important;color:var(--chu);outline:0}
.note-opt textarea:focus,.note-opt .q-note:focus{border-color:var(--nhan)}
.ln span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ln-n{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--chu2);line-height:1.35}
/* t41u — thẻ Qee trên Thực đơn + thẻ món trong chat */
.qee-card{display:flex;flex-direction:column;gap:10px;margin:10px 0 8px;padding:12px 14px;border-radius:20px;border:1px solid var(--vien)}
.menu-c .qee-card{margin:10px 0 4px}
.qee-card-h{display:flex;align-items:center;gap:10px}
.qee-card-h .qav{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:var(--tren-nhan);flex:none}
.qee-card-h .qav svg{width:20px;height:20px}
.qee-card-h b{display:block;font-size:14px;font-weight:700}
.qee-card-h span{display:block;font-size:12px;color:var(--chu2);margin-top:1px}
.qee-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow:visible;margin:0;padding:0;width:100%}
.qee-chips-2 .qchip{flex:1 1 0;min-width:0;justify-content:center;height:36px;padding:0 10px;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qee-chips::-webkit-scrollbar{display:none}
.qchip{flex:none;display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--vien);background:rgba(255,255,255,.05);font-size:12.5px;font-weight:600;color:var(--chu);max-width:100%;white-space:nowrap;box-sizing:border-box}
.qchip.mic{color:var(--nhan-chu);border-color:color-mix(in srgb,var(--nhan-chu) 45%,transparent);font-size:12.5px}
.qchip.mic svg{width:14px;height:14px;flex:none}
.qchip.mic span{font-size:inherit;font-weight:inherit}
.hd-tip{display:flex;align-items:flex-start;gap:8px;padding-top:8px;border-top:1px solid var(--vien);font-size:12.5px;line-height:1.4;color:var(--chu2)}
.hd-tip>i{flex:none;width:16px;height:16px;color:var(--nhan-chu);margin-top:1px}
.hd-tip>i svg{width:16px;height:16px}
.hd-tip>span{flex:1;min-width:0}
.hd-tip>.ib{flex:none;width:26px;height:26px;margin:-4px -6px 0 0;opacity:.7}
.hd-mon-wrap.q-hd .qee-card{display:none}
.qcard{flex-wrap:wrap}
.qcard-a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.qcard-a div{flex:1;min-width:0}
.qcard-n{display:block;font-style:normal;font-size:11.5px;color:var(--chu2);margin-top:2px}
.qcard .tag{display:inline-block;margin-top:4px;font-size:10px;font-style:normal;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(244,63,94,.18);color:#FB7185}
.qcard-acts{display:flex;gap:8px;width:100%;margin-top:4px}
.qcard-acts .btn-sm{flex:1;justify-content:center}
.btn-ghost.sm{height:36px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600}
.qee-cart-bump{position:fixed;right:14px;bottom:calc(var(--sab) + 78px);z-index:25}
.tab-qee span{font-size:10px;font-weight:700;max-width:64px;text-align:center;line-height:1.15}

/* t42u/t43u/t66u — mascot Qee antenna head + wink animation */
.qee-img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.qee-ico{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 2px rgba(62,240,255,.55),0 0 0 5px rgba(4,26,28,.9),0 0 18px rgba(63,224,234,.4);overflow:hidden;padding:0;box-sizing:border-box}
.qee-ico .qee-img,.qee-ico .qee-av-anim{width:100%;height:100%;margin:0;object-fit:contain;object-position:center 40%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))}
.qee-micb{position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#3fe0ea,#0f9fae);color:#03303a;box-shadow:0 2px 8px rgba(63,224,234,.55),0 0 0 2px rgba(4,26,28,.9);z-index:2}
.qee-micb svg{width:11px;height:11px}
.qee-fab{background:transparent;box-shadow:none;gap:2px;width:64px;height:72px}
.qee-fab .qee-ico{width:56px;height:56px}
.qee-fab span{color:var(--chu);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.tab-qee{color:var(--nhan-chu)}
.tab-qee .qee-ico{margin-bottom:2px}
.tab-qee i{display:none} /* legacy */
.qav-mascot{background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);padding:0;overflow:hidden;border-radius:50%;box-shadow:0 0 0 1.5px rgba(62,240,255,.45)}
.qav-mascot .qee-img,.qav-mascot .qee-av-anim{width:100%;height:100%;object-fit:contain;object-position:center 40%;border-radius:0}
/* t66u animated avatar: open↔wink ~2.4s + bob/tilt + antenna glow pulse */
.qee-av-anim{position:relative;display:block;width:100%;height:100%;animation:qee-av-bob 2.4s ease-in-out infinite}
.qee-av-anim .qee-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 40%;animation:qee-av-glow 2.4s ease-in-out infinite}
.qee-av-anim .qee-av-open{opacity:1;animation:qee-av-open-fade 2.4s ease-in-out infinite,qee-av-glow 2.4s ease-in-out infinite}
.qee-av-anim .qee-av-wink{opacity:0;animation:qee-av-wink-fade 2.4s ease-in-out infinite,qee-av-glow 2.4s ease-in-out infinite}
@keyframes qee-av-open-fade{
  0%,34%{opacity:1}
  42%,64%{opacity:0}
  72%,88%{opacity:1}
  91%,93%{opacity:.15}
  96%,100%{opacity:1}
}
@keyframes qee-av-wink-fade{
  0%,34%{opacity:0}
  42%,64%{opacity:1}
  72%,88%{opacity:0}
  91%,93%{opacity:.9}
  96%,100%{opacity:0}
}
@keyframes qee-av-bob{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  35%{transform:translateY(-1.5px) rotate(1.4deg)}
  55%{transform:translateY(-.5px) rotate(.6deg) scale(1.02)}
  70%{transform:translateY(-1px) rotate(1deg)}
}
@keyframes qee-av-glow{
  0%,100%{filter:drop-shadow(0 0 1px rgba(62,240,255,.25)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
  50%{filter:drop-shadow(0 0 4px rgba(62,240,255,.7)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
}
.qee-card-h .qee-stage{flex:none}
.qee-stage{position:relative;display:grid;place-items:center;isolation:isolate}
.qee-stage.sm{width:64px;height:68px}
.qee-stage.lg{width:140px;height:148px}
.qee-stage .qee-glow{position:absolute;left:8%;right:8%;bottom:2px;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(63,224,234,.55),transparent);filter:blur(6px);z-index:0;pointer-events:none}
.qee-stage .q3d{position:relative;z-index:1;width:100%;height:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.45));animation:qee-bob 5.5s ease-in-out infinite}
.qee-hero{display:flex;justify-content:center;padding:4px 0 2px;transition:max-height .35s ease,opacity .25s ease,padding .25s ease;max-height:168px;overflow:hidden}
.qee-hero.compact{max-height:72px;padding:0;opacity:.95}
.qee-hero.compact .qee-stage.lg{width:64px;height:68px}
.qee-hero.compact .qee-stage .qee-glow{height:28%;bottom:0}
.li .qav-mascot,.li .qee-img,.li .qee-av-anim{width:28px;height:28px;border-radius:50%}
.li>i>.qee-img,.li>i img.qee-img,.li>i>.qee-av-anim{width:28px;height:28px}
.wave-orb .core{overflow:hidden;padding:6px}
.wave-orb .core .qee-img{width:100%;height:100%}
@keyframes qee-bob{50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  .qee-ico .qee-img,.qee-stage .q3d,.qee-av-anim,.qee-av-anim .qee-img{animation:none!important}
  .qee-av-anim{transform:none}
  .qee-av-anim .qee-av-open{opacity:0!important}
  .qee-av-anim .qee-av-wink{opacity:1!important;filter:drop-shadow(0 0 2px rgba(62,240,255,.4)) drop-shadow(0 2px 3px rgba(0,0,0,.25))}
}
html[data-gd="cam"] .qee-ico{background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 2px rgba(247,147,30,.65),0 0 0 5px rgba(36,24,12,.7),0 0 18px rgba(247,147,30,.4)}
html[data-gd="cam"] .qee-micb{background:linear-gradient(180deg,#ffd089,#f7931e);color:#3b1d05}
html[data-gd="cam"] .qee-stage .qee-glow{background:radial-gradient(closest-side,rgba(247,147,30,.5),transparent)}

/* t43u/t44u — Qee tóm tắt đơn + QR thanh toán */
.qsum{margin-top:8px;padding:12px;border-radius:16px;border:1px solid var(--vien);background:var(--kinh);display:flex;flex-direction:column;gap:6px}
.qsum h4{margin:0 0 4px;font-size:14px}
.qsum-ln{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.qsum-ln i{display:block;font-style:normal;color:var(--chu2);font-size:11px}
.qsum-tot{display:flex;justify-content:space-between;margin-top:4px;padding-top:8px;border-top:1px solid var(--vien);font-weight:700}
.qsum-acts{display:flex;gap:8px;margin-top:8px}
.qsum-acts .btn-main{flex:1;height:40px;font-size:14px}
.pay-qr{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;text-align:center}
.pay-qr-frame{width:168px;height:168px;padding:10px;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.pay-qr-frame .qr-svg{width:100%;height:100%;display:block}
.pay-qr p{margin:0;font-size:13px;line-height:1.4}


/* t48u/t49u — Món bạn hay gọi + Gọi lại thẳng thanh toán */
.hay-goi{margin:12px 16px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.hay-h{display:flex;flex-direction:column;gap:2px}
.hay-h b{font-size:15px}
.hay-h span{font-size:12px;opacity:.7}
.hay-list{display:flex;flex-direction:column;gap:8px}
.hay-card{display:flex;align-items:center;gap:10px}
.hay-a{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.hay-a img,.hay-a .anh{width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0}
.hay-a b{display:block;font-size:14px}
.hay-a span{display:block;font-size:12px;opacity:.7}
.hay-pay{white-space:nowrap;flex-shrink:0;font-size:12px;padding:6px 10px}
.qgoilai{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.qgoilai .qsum-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pay-sua{display:inline-block;margin-top:8px;font-size:13px;opacity:.85;text-decoration:underline;color:inherit}
.onl-h{display:flex;align-items:center;gap:10px}.onl-h>div{flex:1;min-width:0}.onl-h .pay-sua{margin:0;flex-shrink:0;font-size:13px}

/* ===== t57u/t58u Qee chef + chat sheet + voice overlay ===== */
.qee-card-tap{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer;font:inherit}
.qee-card .qchip.mic{border:0;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.2}
button.qee-fab,button.tab-qee{border:0;cursor:pointer;font:inherit;background:transparent;color:inherit;padding:0}
button.qee-fab{position:fixed;bottom:calc(var(--sab) + 18px);left:calc(50% + min(197px,calc(50% - 18px)) - 70px);width:64px;height:72px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:21;gap:2px}
button.tab-qee{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0}

.qee-sheet{display:flex;flex-direction:column;height:100dvh;max-height:100dvh;overflow:hidden;padding:0!important;background:rgba(12,12,14,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-gd="xanhngoc"] .qee-sheet{background:rgba(4,26,28,.94)}
.qee-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + var(--sat));border-bottom:1px solid var(--vien);background:var(--nen);position:sticky;top:0;z-index:5}
.qee-hd-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);display:grid;place-items:center;padding:0;box-shadow:0 0 0 1.5px rgba(62,240,255,.5)}
.qee-hd-av .qee-img,.qee-hd-av .qee-av-anim{width:100%;height:100%;object-fit:contain;object-position:center 40%}
html[data-gd="cam"] .qee-hd-av{background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 1.5px rgba(247,147,30,.6)}
.qee-hd .qt{flex:1;min-width:0}
.qee-hd .qt h1{margin:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qee-hd .qt span{display:block;font-size:11px;color:var(--chu2)}
.qee-hd-cart{position:relative}
.qee-hd-badge{position:absolute;top:-6px;right:-8px;font-size:9px;padding:1px 5px;border-radius:999px;background:var(--nhan);color:var(--tren-nhan);white-space:nowrap}

.qee-welcome{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 4px;transition:.25s}
.qee-welcome.hide{display:none}
.qee-welcome p{margin:0;font-size:12px;color:var(--chu2)}
.qee-sheet .msgs{flex:1;min-height:0;overflow-y:auto;padding:10px 14px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.qee-sheet .msg.qee{display:flex;gap:8px;align-items:flex-start}
.qee-sheet .msg.qee .qav{display:grid;width:28px;height:28px;margin-top:2px}
.qee-sheet .msg.qee .qav.sm{width:28px;height:28px}
.qbubble{max-width:92%;background:var(--kinh-dam);border:1px solid var(--vien);border-radius:18px 18px 18px 6px;padding:10px 12px}
.qbubble p{margin:0;padding:0;font-size:14px;line-height:1.45}
.msg.me p{background:var(--grad);color:var(--tren-nhan);border-radius:18px 18px 6px 18px}
.qdots{display:flex;gap:5px;padding:4px 2px;align-items:center;height:18px}
.qdots i{width:6px;height:6px;border-radius:50%;background:var(--chu2);opacity:.5;animation:qdot 1.1s infinite ease-in-out}
.qdots i:nth-child(2){animation-delay:.15s}.qdots i:nth-child(3){animation-delay:.3s}
@keyframes qdot{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}

.qcard{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px;border-radius:16px;background:var(--nen);border:1px solid var(--vien);flex-wrap:nowrap}
.qcard-a{display:flex;align-items:center;gap:10px;width:100%;color:inherit;text-decoration:none;min-width:0}
.qcard-img,.qcard a img,.qcard img{width:56px!important;height:56px!important;border-radius:12px;object-fit:cover;flex:none}
.qcard-b{flex:1;min-width:0}
.qcard-b b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard-qp{display:block;font-size:12px;color:var(--chu2);white-space:nowrap;font-variant-numeric:tabular-nums}
.qcard-n{display:block;font-style:normal;font-size:11.5px;color:var(--chu2);margin-top:2px}
.qcard-acts{display:flex;gap:8px;width:100%}
.qcard-acts .btn-sm,.qcard-acts .btn-ghost{flex:1;justify-content:center;height:36px}
.qcard-acts .btn-sm.on{opacity:.85}

.qee-sum-host{padding:0 14px;flex:none}
.qee-sheet .qsugg{flex:none}
.qee-sheet .qee-bar{flex:none}
.qee-sumbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:14px;border:1px solid var(--vien);background:var(--kinh-dam);margin:4px 0 8px;font-size:13px;font-weight:600}
.qee-sumbar.empty{justify-content:center;font-weight:500;color:var(--chu2);font-size:12px}
.qee-sumbar .btn-sm{height:32px;padding:0 12px;flex:none}
.qsugg.hide{display:none}
.qee-sheet .qsugg{margin:0;padding:0 14px 8px}
.qee-sheet .qee-bar{display:flex;gap:8px;align-items:center;padding:8px 12px calc(8px + var(--sab));border-top:1px solid var(--vien);background:var(--nen)}
.qee-sheet .qee-bar input{flex:1;height:44px;border-radius:14px;border:1px solid var(--vien);background:var(--kinh);padding:0 12px;color:inherit;font-size:16px}
.qee-sheet .mic-btn{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);color:var(--tren-nhan);display:grid;place-items:center;flex:none}
.qee-sheet .mic-btn.on{box-shadow:0 0 0 4px rgba(247,147,30,.25);animation:pulseMic 1.2s infinite}
@keyframes pulseMic{50%{transform:scale(1.06)}}

/* Voice overlay */
.voice-ov{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px;padding-bottom:calc(16px + var(--sab))}
.voice-card{width:100%;max-width:400px;max-height:min(92dvh,720px);overflow:auto;border-radius:28px;background:var(--nen);border:1px solid var(--vien);box-shadow:0 20px 60px rgba(0,0,0,.35);padding:14px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:voiceIn .28s ease}
@keyframes voiceIn{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.voice-top{display:flex;width:100%;gap:6px;justify-content:flex-end}
.voice-top .ib{width:36px;height:36px}
.voice-mascot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:2px}
.voice-stage{width:120px;height:148px}
.voice-stage .qee-img{width:120px;height:148px;object-fit:contain}
.voice-level{width:180px;height:36px;opacity:.35;transition:.2s}
.voice-level.on{opacity:1}
.vbars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%;width:100%}
.vbars i{width:5px;border-radius:4px;background:var(--grad);min-height:12%;transition:height .08s linear}
.voice-state{margin:4px 0 0;font-size:13px;font-weight:600;color:var(--chu2)}
.voice-live{margin:0;min-height:20px;font-size:15px;font-weight:600;text-align:center;max-width:100%;padding:0 8px}
.voice-reply{margin:0;font-size:15px;line-height:1.45;color:var(--chu);text-align:center;max-width:100%;padding:8px 12px;background:var(--kinh);border:1px solid var(--vien);border-radius:14px;max-height:40vh;overflow:auto;-webkit-overflow-scrolling:touch}
.voice-reply[hidden]{display:none!important}
.voice-hear{display:inline-flex;margin:8px auto 0;padding:10px 16px;font-weight:600}
.voice-hear[hidden]{display:none!important}
.voice-err{margin:6px 0 0;font-size:12px;line-height:1.35;color:#ff8a8a;text-align:center;max-width:100%;padding:0 10px}
.voice-err[hidden]{display:none!important}
.voice-ov .qee-sumbar{width:100%;margin:6px 0 4px}
.voice-mic{width:64px;height:64px;border-radius:50%;border:0;background:var(--grad);color:var(--tren-nhan);display:grid;place-items:center;box-shadow:0 8px 24px var(--glow);margin-top:4px}
.voice-mic.on{animation:pulseMic 1s infinite;box-shadow:0 0 0 6px rgba(247,147,30,.22),0 8px 24px var(--glow)}
.voice-mic svg{width:26px;height:26px}
[data-gd="xanhngoc"] .voice-ov{background:rgba(2,24,26,.55)}
[data-gd="xanhngoc"] .voice-mic.on{box-shadow:0 0 0 6px rgba(45,212,191,.22),0 8px 24px var(--glow)}

.qee-stage.lg .qee-img{object-fit:contain}
.qee-stage.sm .qee-img{width:72px;height:94px;object-fit:contain}
button.tab-qee{margin-top:-30px;font-size:11px;color:var(--nhan-chu)}

/* t59u — dedicated chef head in round frames */
.qee-card-av{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;padding:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 2px rgba(62,240,255,.5),0 6px 14px rgba(0,0,0,.35)}
.qee-card-av .qee-img,.qee-card-av .qee-av-anim{width:100%;height:100%;object-fit:contain;object-position:center 40%;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
html[data-gd="cam"] .qee-card-av{background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 2px rgba(247,147,30,.6),0 6px 14px rgba(0,0,0,.35)}
html[data-gd="cam"] .qav-mascot{background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%);box-shadow:0 0 0 1.5px rgba(247,147,30,.55)}

/* ===== t69u — LIGHT MODE (Sáng) · kính sáng + chữ đậm · người lớn dễ nhìn ===== */
html[data-mode="sang"]{
  --nen:#FFFFFF; --nen2:#F6F7F9;
  --kinh:rgba(255,255,255,.88); --kinh-dam:rgba(255,255,255,.96);
  --vien:rgba(26,29,33,.12); --blur:blur(14px) saturate(120%);
  --bong:0 6px 20px rgba(26,29,33,.08),0 1px 0 rgba(26,29,33,.04);
  --chu:#1A1D21; --chu2:#4A5260; --chu3:#5C6570;
  --tim:#D63B2F; --cay-nen:rgba(214,59,47,.12); --cay-chu:#B52E24; --ok:#1B7A3D;
  --fs-bump:1px;
}
html[data-gd][data-mode="sang"]{
  --nhan:#C4540A; --nhan-dam:#A34509; --nhan-nhat:rgba(196,84,10,.12);
  --nhan-chu:#A34509; --tren-nhan:#FFFFFF;
  --grad:linear-gradient(135deg,#D9600F 0%,#C4540A 55%,#A34509 100%);
  --wave:linear-gradient(180deg,#E8791A,#C4540A 55%,#A34509); --glow:rgba(196,84,10,.28);
}
html[data-gd="xanhngoc"][data-mode="sang"]{
  --nhan:#0A6E68; --nhan-dam:#085A55; --nhan-nhat:rgba(10,110,104,.12);
  --nhan-chu:#0A6E68; --tren-nhan:#FFFFFF;
  --grad:linear-gradient(135deg,#0E8C84 0%,#0A6E68 55%,#085A55 100%);
  --wave:linear-gradient(180deg,#1AA89E,#0A6E68 55%,#085A55); --glow:rgba(10,110,104,.25)}
/* Nền trắng: không phủ chữ lên ảnh cafe tối */
html[data-mode="sang"],html[data-mode="sang"] body{background:#F6F7F9;color:var(--chu)}
html[data-mode="sang"] #app{background:var(--nen)}
html[data-mode="sang"]{
  --bg-img:url(../img/bg_cafe_cam_blur.webp);
  --bg-veil:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.90) 45%,rgba(255,255,255,.92) 100%);
  --kinh:rgba(255,255,255,.86); --kinh-dam:rgba(255,255,255,.94);
}
html[data-mode="sang"][data-gd="xanhngoc"]{
  --bg-img:url(../img/bg_cafe_xanhngoc_v2_blur.webp);
  --bg-veil:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(246,250,249,.92) 50%,rgba(255,255,255,.94) 100%)}
html[data-mode="sang"] .bgimg{
  opacity:1;transform:scale(1.08);
  filter:saturate(.55) brightness(1.15);
}
html[data-mode="sang"] .bgimg::after{background:var(--bg-veil)}
html[data-mode="sang"] #app:has(.chao-c) .bgimg::after,
html[data-mode="sang"] #app:has(.chao-x) .bgimg::after{
  background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.88) 40%,rgba(255,255,255,.94) 100%);
}
html[data-mode="sang"]{font-size:16px}
html[data-mode="sang"] body{font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
html[data-mode="sang"] .muted{color:var(--chu2);font-size:14px}
html[data-mode="sang"] .price{color:var(--nhan-chu);font-weight:800;font-size:16px}
html[data-mode="sang"] .price.lg{font-size:22px}
html[data-mode="sang"] .sec-h h2,html[data-mode="sang"] .topbar h1,html[data-mode="sang"] .topbar-x h1{font-size:20px}
html[data-mode="sang"] .pcard b,html[data-mode="sang"] .mon-t b,html[data-mode="sang"] .rx-b b,html[data-mode="sang"] .li b{font-size:17px;font-weight:700;color:var(--chu)}
html[data-mode="sang"] .hero{font-size:calc(1em + 2px);color:var(--chu)}
html[data-mode="sang"] .chip{background:var(--nen2);color:var(--chu2);border:1px solid var(--vien);font-size:13px;height:28px;min-height:28px}
html[data-mode="sang"] .chip.ok{background:rgba(27,122,61,.1);color:#1B7A3D}
html[data-mode="sang"] .chip.hot{background:var(--cay-nen);color:var(--cay-chu)}
html[data-mode="sang"] .btn-main{font-size:17px;min-height:52px;box-shadow:0 8px 20px var(--glow)}
html[data-mode="sang"] .btn-ghost{background:var(--nen2);border:1px solid var(--vien);color:var(--chu);font-weight:600;min-height:48px}
html[data-mode="sang"] .btn-sm{min-height:40px;font-size:14px}
html[data-mode="sang"] .ib{min-width:44px;min-height:44px}
html[data-mode="sang"] .tab{font-size:12px;font-weight:600;color:var(--chu2);min-height:44px}
html[data-mode="sang"][data-gd] .tab.on{color:var(--nhan-chu)}
html[data-mode="sang"][data-gd="xanhngoc"] .tab{color:var(--chu2)}
html[data-mode="sang"][data-gd="xanhngoc"] .tab.on{color:var(--nhan-chu)}
html[data-mode="sang"] .tab-qee{color:var(--nhan-chu);font-size:12px;font-weight:700}

/* Cards: trắng + bóng mềm + viền 1px (kính sáng rất nhẹ) */
html[data-mode="sang"] .card,
html[data-mode="sang"] .glass,
html[data-mode="sang"] .pcard,
html[data-mode="sang"] .store-pill,
html[data-mode="sang"] .search,
html[data-mode="sang"] .cat,
html[data-mode="sang"] .tile,
html[data-mode="sang"] .rx,
html[data-mode="sang"] .q-card,
html[data-mode="sang"] .bsheet,
html[data-mode="sang"] .toast,
html[data-mode="sang"] .chao-card,
html[data-mode="sang"] .store-card{
  background:#FFFFFF;
  border:1px solid rgba(26,29,33,.10);
  box-shadow:var(--bong);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--chu);
}
html[data-mode="sang"] .glass.ib,html[data-mode="sang"] .ib.glass{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(26,29,33,.12);
  box-shadow:0 2px 8px rgba(26,29,33,.06);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

/* Tabbar light */
html[data-mode="sang"][data-gd] .tabbar{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(26,29,33,.10);
  box-shadow:0 8px 28px rgba(26,29,33,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html[data-mode="sang"][data-gd="xanhngoc"] .tabbar{
  background:rgba(255,255,255,.97);
  box-shadow:0 -6px 24px rgba(26,29,33,.06)}
html[data-mode="sang"][data-gd="xanhngoc"] .tab.on::before{background:var(--nhan);box-shadow:0 0 8px var(--glow)}
html[data-mode="sang"] .tab-qee i{box-shadow:0 0 0 6px #fff,0 0 18px var(--glow)}
html[data-mode="sang"] .qee-fab{box-shadow:0 0 0 5px rgba(217,96,15,.12),0 8px 22px var(--glow)}
html[data-mode="sang"][data-gd="xanhngoc"] .qee-fab,
html[data-mode="sang"][data-gd="xanhngoc"] .tab-qee i{box-shadow:0 0 0 5px rgba(14,140,132,.12),0 8px 22px var(--glow)}

/* Topbars / sticky — trắng mờ thay vì tối */
html[data-mode="sang"][data-gd="cam"] .topbar,
html[data-mode="sang"][data-gd="xanhngoc"] .topbar-x,
html[data-mode="sang"][data-gd="cam"] .q-sticky,
html[data-mode="sang"][data-gd="xanhngoc"] .q-sticky{
  background:linear-gradient(rgba(255,255,255,.97) 78%,rgba(255,255,255,0))}
html[data-mode="sang"][data-gd="cam"] .q-top,
html[data-mode="sang"][data-gd="xanhngoc"] .q-top{
  background:rgba(255,255,255,.96)}

/* Hero xanh ngọc: ảnh chỉ nền; thẻ nội dung trắng */
html[data-mode="sang"] .hero-sea{
  background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.55) 55%,var(--nen) 100%),var(--hero-img,url(../img/hero_cafe_bien.webp)) center 60%/cover;
}
html[data-mode="sang"] .hs-top .ib{background:rgba(255,255,255,.92);border:1px solid var(--vien)}
html[data-mode="sang"] .store-card{background:#fff;box-shadow:var(--bong)}
html[data-mode="sang"] .store-card .hello{color:var(--nhan-chu)}
html[data-mode="sang"] .sc-s{color:var(--chu2)}

/* Màn chào */
html[data-mode="sang"] .chao-c .chao-body,
html[data-mode="sang"] .chao-x{background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%)}
html[data-mode="sang"] .chao-card{background:#fff}
html[data-mode="sang"] .eyebrow,html[data-mode="sang"] .fine,html[data-mode="sang"] .hello{color:var(--chu2)}
html[data-mode="sang"] .banlbl,html[data-mode="sang"] .ban-pill{color:var(--nhan-chu);border-color:rgba(163,69,9,.35);background:var(--nhan-nhat)}

/* Menu / item */
html[data-mode="sang"] .cat-banner{background:var(--nen2);border:1px solid var(--vien)}
html[data-mode="sang"] .seg button{background:var(--nen2);color:var(--chu2);border:1px solid var(--vien);min-height:44px;font-size:14px}
html[data-mode="sang"][data-gd] .seg button.on{color:#fff}
html[data-mode="sang"][data-gd="xanhngoc"] .seg button.on{background:var(--nhan-nhat);color:var(--nhan-chu);border-color:var(--nhan)}
html[data-mode="sang"] .buybar-x{background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.98) 28%)}
html[data-mode="sang"] .desc,html[data-mode="sang"] .opt-h small,html[data-mode="sang"] .tg-row small{color:var(--chu2)}

/* Giỏ / thanh toán */
html[data-mode="sang"] .gio-xanhngoc .sum,
html[data-mode="sang"] .sum{background:#fff;border:1px solid var(--vien);box-shadow:var(--bong)}
html[data-mode="sang"][data-gd="xanhngoc"] .gio-strip{background:var(--grad);color:#fff}
html[data-mode="sang"][data-gd="xanhngoc"] .gs-b{background:#fff;color:var(--nhan-chu)}
html[data-mode="sang"][data-gd="cam"] .gio-strip{background:#fff;border:1px solid rgba(217,96,15,.3)}
html[data-mode="sang"] .keypad button{background:var(--nen2);border:1px solid var(--vien);color:var(--chu);min-height:52px;font-size:20px;font-weight:700}
html[data-mode="sang"] .vt-read{background:var(--nen2);border:1px solid var(--vien);color:var(--chu)}

/* Qee chat / voice — khung Qee vẫn nền đen (t67u) */
html[data-mode="sang"] .qee-sheet,
html[data-mode="sang"][data-gd="xanhngoc"] .qee-sheet{background:rgba(255,255,255,.97)}
html[data-mode="sang"] .voice-ov,
html[data-mode="sang"][data-gd="xanhngoc"] .voice-ov{background:rgba(246,247,249,.72)}
html[data-mode="sang"] .qee-xanhngoc .listen{background:rgba(246,247,249,.55)}
html[data-mode="sang"] .qee-xanhngoc .ls-in{background:linear-gradient(180deg,#fff,#F6F7F9)}
html[data-mode="sang"] .bb{color:var(--chu)}
html[data-mode="sang"] .bb.toi{background:var(--grad);color:#fff}
html[data-mode="sang"] .bb.qee,html[data-mode="sang"] .bb:not(.toi){background:var(--nen2);border:1px solid var(--vien)}

/* Kết bạn / sheets */
html[data-mode="sang"][data-gd="cam"] .kb-dy-box,
html[data-mode="sang"][data-gd="xanhngoc"] .kb-dy-box{background:var(--nen2)}
html[data-mode="sang"][data-gd="xanhngoc"] .kb-seg a.on{background:var(--nhan-nhat);color:var(--nhan-chu);box-shadow:inset 0 0 0 1px var(--nhan)}
html[data-mode="sang"][data-gd="xanhngoc"] .lh-btn{background:var(--nen2)}
html[data-mode="sang"][data-gd="xanhngoc"] .tile{background:#fff}
/* t82u: bỏ ghi đè chữ trắng tile.main ở Sáng+Xanh ngọc */

/* Settings segments */
html[data-mode="sang"] .gd-seg{background:var(--nen2);border:1px solid var(--vien)}
html[data-mode="sang"] .gd-seg button{color:var(--chu2)}
html[data-mode="sang"] .gd-seg button.on{color:#fff}
html[data-mode="sang"] .gd-h2{margin:18px 0 10px;font-size:16px;font-weight:700}
html[data-mode="toi"] .gd-h2{margin:18px 0 10px;font-size:15px;font-weight:700}
.mode-sw svg{width:20px;height:20px}
html[data-mode="sang"] .mode-sw{color:var(--chu)}
html[data-mode="sang"] .q-tabs button{color:var(--chu2);border-color:var(--vien)}
html[data-mode="sang"][data-gd] .q-tabs button.on{color:#fff}
html[data-mode="sang"][data-gd="xanhngoc"] .q-tabs button.on{color:var(--nhan-chu);box-shadow:inset 0 -3px 0 var(--nhan)}
html[data-mode="sang"] .q-chips button{background:var(--nen2);border:1px solid var(--vien);color:var(--chu2);min-height:36px}
html[data-mode="sang"] .input,html[data-mode="sang"] input,html[data-mode="sang"] textarea{
  color:var(--chu);background:#fff;border-color:var(--vien);
}
html[data-mode="sang"] input::placeholder,html[data-mode="sang"] textarea::placeholder{color:var(--chu3)}

/* Quầy light */
html.quay[data-mode="sang"] .q-sticky{background:linear-gradient(rgba(255,255,255,.98) 85%,rgba(255,255,255,0))}
html[data-mode="sang"] .hopt{background:#fff;border:1px solid var(--vien)}
html[data-mode="sang"][data-gd="cam"] .hopt:first-of-type{background:linear-gradient(120deg,rgba(217,96,15,.12),#fff);border-color:rgba(217,96,15,.4)}
html[data-mode="sang"][data-gd="xanhngoc"] .hopt:first-of-type{border-color:var(--nhan);box-shadow:0 0 16px rgba(14,140,132,.12)}

/* Tap targets ≥44px where interactive rows */
html[data-mode="sang"] .li{min-height:52px;padding-top:12px;padding-bottom:12px}
html[data-mode="sang"] .tg-row{min-height:48px}
html[data-mode="sang"] .util,html[data-mode="sang"] .cat{min-height:44px;font-size:12px;color:var(--chu2);font-weight:600}

/* Qee round frames: GIỮ nền đen + viền theme (t67u) — không đổi sang trắng */
html[data-mode="sang"] .qee-ico,
html[data-mode="sang"] .qee-hd-av,
html[data-mode="sang"] .qee-card-av,
html[data-mode="sang"] .qav-mascot{
  background:radial-gradient(circle at 50% 42%,#15181c 0%,#0a0c0e 55%,#000 100%) !important;
}

/* ===== t70u — LƯỚI GỌN + Lưới/Dọc toggle ===== */
.sec-h{align-items:center;gap:10px}
.sec-h-l{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}
.sec-h-l h2{margin:0}
.view-tog{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--vien);flex:none}
.view-tog button{width:36px;height:36px;min-width:36px;min-height:36px;border-radius:10px;display:grid;place-items:center;color:var(--chu3);transition:.18s}
.view-tog button svg{width:18px;height:18px}
.view-tog button.on{background:var(--grad);color:var(--tren-nhan);box-shadow:0 4px 12px var(--glow)}
.cat-banner{position:relative}
.cat-banner-t{flex:1;min-width:0}
.cat-banner .view-tog{margin-left:auto}

/* Compact grid ~20–25% smaller cards */
.grid2{gap:10px}
.grid2 .pcard{padding:8px;gap:6px;border-radius:16px}
.grid2 .pcard img{height:92px;border-radius:14px}
.grid2 .pcard b{font-size:13px;min-height:32px;line-height:1.25}
.grid2 .pcard .pc-f .price{font-size:13px}
.grid2 .pcard .add{width:28px;height:28px;border-radius:8px}
.grid2 .pcard .add svg{width:15px;height:15px}
.grid2 .pcard .tag{top:8px;left:8px;height:20px;padding:0 8px;font-size:10px}
.grid2 .pcard .hrt{top:12px;right:12px}
.grid2 .pcard .hrt svg{width:16px;height:16px}
/* hscroll featured cards also slightly tighter */
.hscroll .pcard{width:138px;padding:8px;gap:6px}
.hscroll .pcard img{height:104px;border-radius:14px}
.hscroll .pcard b{font-size:13px;min-height:32px}

/* List/doc view shared across themes */
.menu-c .vlist .row-x,
.menu-x .vlist .row-x{border-bottom-color:var(--vien)}
.menu-c .row-x img{border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.menu-c .row-x .add{border-radius:50%;background:var(--grad);border:0;color:#fff;box-shadow:0 6px 14px var(--glow)}

html[data-mode="sang"] .view-tog{background:rgba(0,0,0,.04);border-color:var(--vien)}
html[data-mode="sang"] .view-tog button{color:var(--chu2)}
html[data-mode="sang"] .view-tog button.on{color:#fff}
html[data-mode="sang"] .grid2 .pcard b{font-size:14px;min-height:34px}
html[data-mode="sang"] .grid2 .pcard .pc-f .price{font-size:14px;font-weight:800}

/* ===== t71u — NÚT BACK ĐẬM, SÁNG, GÂY CHÚ Ý ===== */
.ib.ib-back{
  width:auto;min-width:42px;height:42px;padding:0 10px 0 6px;gap:4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;flex:none;
  background-color:var(--nhan) !important;
  background-image:var(--grad) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nhan) 28%, transparent),0 6px 16px var(--glow);
  text-decoration:none;
}
.ib.ib-back .ib-back-ic{display:grid;place-items:center;width:28px;height:28px}
.ib.ib-back .ib-back-ic svg{
  width:22px;height:22px;stroke:#fff;color:#fff;
  stroke-width:2.75;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.ib.ib-back .ib-back-txt{
  font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff;
  white-space:nowrap;padding-right:4px;
}
/* mon-hero floating back: circle only (no text over photo) */
.mon-hero .ib.ib-back,
.mon-hero .ib.ib-back.back{
  position:absolute;top:max(var(--sat),16px);left:18px;z-index:3;
  width:42px;height:42px;min-width:42px;padding:0;border-radius:50%;
}
.mon-hero .ib.ib-back .ib-back-txt{display:none}
.q-top .ib.ib-back{width:42px;height:42px;min-width:42px;padding:0;border-radius:50%}
.q-top .ib.ib-back .ib-back-txt{display:none}
.topbar-x .ib.ib-back{background-color:var(--nhan) !important;background-image:var(--grad) !important;border:0 !important;color:#fff !important}
/* menu-x: back + title + actions — hide text to keep circle prominent */
.menu-x .topbar-x .ib.ib-back{width:42px;min-width:42px;height:42px;padding:0;border-radius:50%}
.menu-x .topbar-x .ib.ib-back .ib-back-txt{display:none}
.menu-x .topbar-x h1{text-align:center;font-size:17px}
/* Narrow: hide text label, keep solid circle */
@media (max-width:360px){
  .ib.ib-back .ib-back-txt{display:none}
  .ib.ib-back{width:42px;min-width:42px;padding:0;border-radius:50%}
}

/* Tab bar Quay lại — high contrast, not dimmed */
.tab.tab-back{color:#fff !important;font-weight:700 !important;opacity:1 !important}
.tab.tab-back svg{stroke:#fff;stroke-width:2.5;color:#fff}
[data-gd="xanhngoc"] .tab.tab-back{color:#fff !important}
[data-gd="xanhngoc"] .tab.tab-back svg{stroke:#fff;color:#fff}

html[data-mode="sang"] .ib.ib-back{
  background-color:var(--nhan) !important;
  background-image:var(--grad) !important;
  color:#fff !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--nhan) 22%, transparent),0 6px 14px var(--glow);
}
html[data-mode="sang"] .ib.ib-back .ib-back-ic svg{stroke:#fff;color:#fff}
html[data-mode="sang"] .ib.ib-back .ib-back-txt{color:#fff}
html[data-mode="sang"] .tab.tab-back{color:#121417 !important;font-weight:800 !important}
html[data-mode="sang"] .tab.tab-back svg{stroke:#121417;color:#121417;stroke-width:2.5}
html[data-mode="sang"][data-gd="xanhngoc"] .tab.tab-back{color:#0B1A1A !important}
html[data-mode="sang"][data-gd="xanhngoc"] .tab.tab-back svg{stroke:#0B1A1A;color:#0B1A1A}

/* ===== t72u — TAB BAR GỌN + orderbar + hoá đơn ===== */
[data-gd] .tabbar{
  height:56px;padding-right:64px;border-radius:22px;
  bottom:calc(var(--sab) + 10px);
  width:min(394px,calc(100% - 36px));
}
[data-gd] .tab{gap:2px;font-size:11px;font-weight:600}
[data-gd] .tab svg{width:22px;height:22px}
.qee-fab,button.qee-fab{
  width:48px;height:48px;min-width:48px;min-height:48px;
  bottom:calc(var(--sab) + 14px);
  left:calc(50% + min(197px,calc(50% - 18px)) - 58px);
  gap:0;border-radius:50%;
}
.qee-fab .qee-ico,button.qee-fab .qee-ico{width:44px;height:44px}
.qee-fab span,button.qee-fab span{display:none}

/* gio-strip sits above compact tab */
[data-gd] .gio-strip{bottom:calc(var(--sab) + 72px);height:44px}

/* Compact sticky order bar on cart */
.orderbar{
  bottom:calc(var(--sab) + 70px);
  margin:12px 0 0;padding:8px 8px 8px 14px;border-radius:18px;
}
.orderbar span{font-size:11px}
.orderbar b{font-size:16px}
.orderbar .btn-main{height:42px;padding:0 20px;font-size:14px}
.gio-xanhngoc .orderbar{bottom:calc(var(--sab) + 64px)}
.gio{padding-bottom:calc(56px + 52px + var(--sab) + 24px)}
.pad-b{height:calc(56px + var(--sab) + 28px)}
.scr.menu-c .pad-b,.scr.menu-x .pad-b,
.scr.home-c .pad-b,.scr.home-x .pad-b{height:calc(56px + 52px + var(--sab) + 20px)}

/* Invoice card */
.hd-card .hd-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.hd-card .hd-h b{font-size:15px}
.hd-card .hd-h-r{display:flex;gap:12px;align-items:center}
.hd-acts{display:flex;gap:10px}
.hd-btn{flex:1;min-height:44px;height:44px;font-size:14px}
.hd-loai{margin-bottom:12px}
.hd-spin{display:flex;align-items:center;gap:10px;margin-top:8px;color:var(--chu2);font-size:13px}
.hd-card.done{display:flex;flex-direction:column;gap:4px}
.hd-card.skipped .hd-h{margin-bottom:8px}
.pay-cont{margin:12px 0 16px}
.q-don-list{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.q-don-h{margin:0 0 4px;font-size:14px;color:var(--chu2);font-weight:600}
.q-don-card .q-don-t{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px}
.q-don-card .q-hd-yc{margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--nhan-nhat);border:1px solid color-mix(in srgb, var(--nhan) 35%, transparent);font-size:13px;line-height:1.4;color:var(--chu)}
.q-don-card .q-hd-yc b{color:var(--nhan-chu)}

html[data-mode="sang"][data-gd] .tabbar{height:56px}
html[data-mode="sang"] .qee-fab,html[data-mode="sang"] button.qee-fab{width:48px;height:48px}
html[data-mode="sang"] .orderbar{background:#fff;border:1px solid var(--vien)}


/* ===== t76u — Giỏ xác minh sau Qee ===== */
.gio-xn .ci-list{gap:12px;padding:0 2px}
.ci.ci-qee{
  margin:0;
  padding:12px;
  border-radius:18px;
  border:1.5px solid color-mix(in oklab, var(--nhan) 55%, transparent);
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--nhan) 40%, transparent);
  background:color-mix(in oklab, var(--nhan) 12%, var(--kinh, transparent));
  box-sizing:border-box;
  overflow:hidden;
  outline:none;
}

.gio-cam .ci.ci-qee{
  margin:0;
  border-color:rgba(255,150,70,.55);
  background:rgba(255,140,60,.10);
}
.gio-xanhngoc .ci.ci-qee{
  margin:0;
  padding:12px;
  border-radius:18px;
  border:1.5px solid rgba(40,190,170,.55);
  border-bottom:1.5px solid rgba(40,190,170,.55);
  background:rgba(32,180,160,.10);
}
.gio-xanhngoc .ci.ci-qee img{border-radius:18px}
html[data-mode="sang"] .gio-cam .ci.ci-qee{
  background:rgba(255,140,60,.08);
  border-color:rgba(230,122,46,.45);
}
html[data-mode="sang"] .gio-xanhngoc .ci.ci-qee{
  background:rgba(20,168,150,.08);
  border-color:rgba(20,168,150,.42);
}
.ci-qee-hint{
  margin:2px 0 4px;
  font-size:12px;
  font-weight:600;
  color:var(--nhan-chu);
  line-height:1.3;
}
.chip-qee{border-color:color-mix(in oklab, var(--nhan) 50%, var(--vien))}
.ci-note-edit{display:flex;flex-direction:column;gap:4px;margin:6px 0 2px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.ci-note-edit>span{font-size:12px;color:var(--chu2);font-weight:600}
.ci-note-edit input{
  height:44px;border-radius:12px;border:1px solid var(--vien);
  background:var(--nen2, rgba(255,255,255,.08));color:var(--chu);
  padding:0 12px;font-size:16px!important;width:100%;max-width:100%;
  box-sizing:border-box;min-width:0;
  -webkit-appearance:none;appearance:none;
}
.ci-note-edit input:focus{outline:2px solid color-mix(in oklab, var(--nhan) 55%, transparent);outline-offset:0}

/* Cart item: price on name row; trash top-right; stepper alone */
.ci{position:relative}
.ci > .ci-del{
  position:absolute;top:10px;right:10px;z-index:3;
  width:30px;height:30px;flex:none;
}
.ci-hd{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding-right:36px; /* room for absolute trash */
  min-width:0;width:100%;box-sizing:border-box;
}
.ci-hd > b{
  display:block;width:100%;max-width:100%;
  font-size:15px;font-weight:600;line-height:1.35;
  overflow:hidden;white-space:normal;word-break:break-word;
}
.ci-hd > .price{
  display:block;width:auto;max-width:100%;
  white-space:nowrap;overflow:hidden;
  text-align:left;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--nhan-chu);
  line-height:1.3;
}
html[data-mode="sang"] .ci-hd > .price{font-size:14px;font-weight:800}
.ci-f{
  display:flex;flex-wrap:nowrap;align-items:center;
  min-width:0;max-width:100%;width:100%;gap:8px;
  box-sizing:border-box;margin-top:6px;
}
.ci-f .stepper{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;max-width:100%;
}
.ci-f .stepper .sl{
  min-width:52px;width:auto;flex:none;
  white-space:nowrap;text-align:center;
  font-variant-numeric:tabular-nums;
}
.ci.ci-qee .ci-b{min-width:0;max-width:100%;overflow:hidden}
.ci.ci-qee{overflow:hidden;max-width:100%;box-sizing:border-box}
.gio-xanhngoc .ci.ci-qee{padding-right:12px;padding-left:12px}
.gio-xanhngoc .ci > .ci-del{top:10px;right:6px}

/* Merged verification banner (QR + Qee + Sửa) */
.xn-banner{
  margin:8px 0 12px;padding:12px 14px;border-radius:16px;
  background:color-mix(in oklab, var(--nhan) 14%, transparent);
  border:1px solid color-mix(in oklab, var(--nhan) 42%, var(--vien));
  color:var(--chu);display:flex;flex-direction:column;gap:8px;
}
.xn-banner-main{font-size:13.5px;line-height:1.4}
.xn-banner-main b{color:var(--nhan-chu);font-weight:700}
.xn-banner-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--chu2);line-height:1.35;
}
.xn-banner-meta svg{width:16px;height:16px;flex:none;color:var(--nhan-chu)}
.xn-banner-meta b{color:var(--nhan-chu)}
.xn-sua{
  align-self:flex-start;
  background:none;border:none;padding:0;
  font:inherit;font-size:13px;font-weight:700;
  color:var(--nhan-chu);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
}
.gio-cam .xn-banner{background:rgba(255,140,60,.14);border-color:rgba(255,160,80,.42)}
.gio-xanhngoc .xn-banner{background:rgba(32,180,160,.12);border-color:rgba(40,190,170,.4)}
html[data-mode="sang"] .gio-cam .xn-banner{background:rgba(255,140,60,.10)}
html[data-mode="sang"] .gio-xanhngoc .xn-banner{background:rgba(20,168,150,.09)}

/* Compact sticky confirm bar — clear of tabbar + Qee FAB */
.orderbar-xn{
  position:relative; /* flow after Gọi thêm món — không sticky đè card */
  bottom:auto!important;left:auto;right:auto;
  box-sizing:border-box;width:100%;max-width:100%;
  flex-wrap:nowrap;gap:10px;align-items:center;
  padding:8px 16px;margin:14px 0 8px;
  overflow:visible;z-index:2;
}
.gio-xanhngoc .orderbar-xn,
.gio-xanhngoc.gio-xn .orderbar-xn{bottom:auto!important}
.gio-xn .orderbar-xn{bottom:auto!important}
.orderbar-xn .ob-tot{flex:1 1 auto;min-width:0;margin-right:0;overflow:visible}
.orderbar-xn .ob-tot span{display:block;font-size:11px;color:var(--chu2)}
.orderbar-xn .ob-tot b{display:block;font-size:15px;white-space:nowrap;color:var(--nhan-chu);overflow:visible}
.orderbar-xn .btn-main,
html[data-mode="sang"] .orderbar-xn .btn-main{
  flex:0 0 auto;height:48px;min-height:48px;max-height:48px;
  padding:0 14px;font-size:13.5px;white-space:nowrap;
  box-shadow:0 6px 16px var(--glow);
  max-width:none;
}
html[data-mode="sang"] .orderbar-xn{box-shadow:0 6px 20px rgba(26,29,33,.08);background:#fff}
.gio-xn{padding-bottom:calc(72px + var(--sab) + 16px)} /* tabbar only — orderbar in flow */
.gio-xn .ci-list{padding-bottom:4px}
.gio-xn .sum,.gio-xn .addmore{margin-bottom:10px}
.gio-xn .addmore{position:relative;z-index:1}
html[data-mode="sang"][data-gd="xanhngoc"] .tab{color:var(--chu2)}
html[data-mode="sang"][data-gd="xanhngoc"] .tab.on{color:var(--nhan-chu)}

.ci.ci-qee{border-width:1.5px}
.gio-cam .ci.ci-qee,.gio-xanhngoc .ci.ci-qee{border-width:1.5px}

/* cam tabbar: even gaps; number badge inside */
[data-gd] .tabbar.t3{justify-content:space-between;padding-left:10px;padding-right:70px;overflow:visible}
[data-gd] .tabbar.t3 .tab{flex:1;min-width:0;max-width:110px;overflow:visible}
[data-gd] .tabbar.t3 .tab span{font-size:10.5px;white-space:nowrap}
[data-gd] .tab-gio{overflow:visible}
[data-gd] .tab-gio .badge{
  right:auto;left:50%;margin-left:6px;top:0;z-index:3;
  min-width:18px;height:18px;padding:0 5px;font-size:10px;
}

/* t76u8 tab overflow */
.tabbar{overflow:visible}
.tab-gio .badge{overflow:visible}
/* ===== t82u — Qee nằm giữa tabbar cho cả Cam & Xanh ngọc (bỏ qee-fab; lỗi cũ: .qee-fab span{display:none} ẩn luôn span.qee-ico) ===== */
.tabbar.t4q{overflow:visible}
[data-gd] .tabbar.t4q{padding:0 8px;justify-content:space-around}
.tabbar.t4q > .tab,.tabbar.t4q > .tab-qee{flex:1 1 0;min-width:0;max-width:96px}
.tabbar.t4q > .tab-qee{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;margin-top:-26px;align-self:center;border:0;background:transparent;padding:0;cursor:pointer}
.tabbar.t4q .tab-qee .qee-ico{display:grid!important;width:50px;height:50px;margin:0;flex:0 0 auto}
.tabbar.t4q .tab-qee .qee-lb{display:block;font-size:10.5px;font-weight:700;color:var(--nhan-chu);line-height:1.1;white-space:nowrap}
.tabbar.t4q .tab span{font-size:10.5px;white-space:nowrap}
.qee-fab{display:none!important}
[data-gd="xanhngoc"] .cat.on{background:linear-gradient(160deg,rgba(20,184,166,.55),rgba(20,184,166,.18));border-color:rgba(94,234,212,.6)}
[data-gd="xanhngoc"] .qee-sheet .mic-btn.on{box-shadow:0 0 0 4px rgba(20,184,166,.25)}
[data-gd="xanhngoc"] .voice-mic.on{box-shadow:0 0 0 6px rgba(20,184,166,.22),0 8px 24px var(--glow)}
html[data-mode="sang"][data-gd="xanhngoc"] .tile.main{background:#fff;color:var(--chu)}
/* t88u — chat Qee: không tràn ngang */
.qee-sheet{overflow-x:hidden;max-width:100vw}
.qee-sheet .msgs{overflow-x:hidden}
.qee-sheet .msg{max-width:100%;min-width:0}
.qee-sheet .msg.qee{width:100%}
.qee-sheet .msg.me{max-width:85%}
.qee-sheet .qbubble{flex:1;min-width:0;max-width:calc(100% - 36px)}
.qee-sheet .qsug{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;overflow:visible}
.qee-sheet .qsug .qcard{width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin-top:0}
.qee-sheet .qsug{margin-top:8px}
.qcard-acts{display:flex;gap:8px;width:100%}
.qcard-acts .btn-sm{flex:1 1 auto;min-width:0;white-space:nowrap;height:38px;padding:0 12px;justify-content:center}
.qcard-acts .btn-ghost.sm{flex:0 0 auto;white-space:nowrap;height:38px;padding:0 16px}
.qee-hd-cart{overflow:visible}
.qee-hd-badge{top:-4px;right:-4px;font-size:10px;line-height:14px;padding:1px 6px}
.qee-hd{overflow:visible;padding-right:18px}
.qsugg{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:0 14px;scrollbar-width:none;box-sizing:border-box}
.qsugg::-webkit-scrollbar{display:none}
.qsugg button{flex:none;white-space:nowrap}
.qee-sum-host,.qee-bar{max-width:100%;box-sizing:border-box}
.qsugg{margin:0 0 10px}.qsugg.hide{display:none}
.qee-sheet .msg.qee{flex-direction:row!important;align-items:flex-start}
.qee-sheet .msg.qee .qbubble{flex:0 1 auto;width:auto;height:auto;min-height:0}
.qee-sheet .msg.qee .qbubble>p{background:none!important;border:0!important;padding:0!important;backdrop-filter:none!important}
.qee-sheet .qsug .qcard-a{flex-direction:row!important;align-items:center;text-align:left;width:100%}
.qee-sheet .qsug .qcard-b{text-align:left}

/* ===== t90u — iOS no-zoom inputs + chat polish ===== */
input,textarea,select{font-size:16px!important;-webkit-text-size-adjust:100%}
/* keep compact: height already ≥44px on most fields */
html,body,#app{overflow-x:hidden}
.form,.scr,.card,.f2,label{max-width:100%;box-sizing:border-box}
.f2{min-width:0}
.f2 label,.f2 input{min-width:0;max-width:100%}

/* Qee dish cards: no double border inside bubble */
.qee-sheet .qbubble .qcard,
.qbubble .qcard{
  border:0!important;
  background:transparent;
  padding:8px 0;
  margin-top:6px;
  border-radius:0;
  box-shadow:none;
}
.qee-sheet .qsug{
  gap:0;
  margin-top:6px;
  padding-top:2px;
  border-top:1px solid var(--vien);
}
.qee-sheet .qsug .qcard{
  margin-top:0;
  padding:10px 0;
  border-bottom:1px solid var(--vien)!important;
  border-radius:0;
  background:transparent;
}
.qee-sheet .qsug .qcard:last-child{border-bottom:0!important;padding-bottom:0}
.qee-sheet .qsug .qcard:first-child{padding-top:10px}
/* single card directly in bubble (not wrapped in .qsug) */
.qbubble > .qcard{border-top:1px solid var(--vien)!important;padding-top:10px;margin-top:8px}

/* Welcome: collapse hard when conversation started; msgs pack to top */
.qee-welcome.hide{display:none!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
.qee-sheet .msgs{justify-content:flex-start;align-content:flex-start;gap:10px}
.qee-sheet .msg{flex:none}

/* t91u keypad xoá */
.keypad button{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.keypad .kp-del{display:flex!important;flex-direction:column;gap:2px;font-size:13px!important;font-weight:700;color:var(--nhan-chu)}
.keypad .kp-del svg{pointer-events:none}.keypad .kp-del span{pointer-events:none;line-height:1}
.keypad .kp-ok:disabled{opacity:.4;filter:grayscale(.6)}

/* ===== t95u · Hướng dẫn lần đầu ghi chú món (coach-mark) ===== */
.tour-root{position:fixed;inset:0;z-index:95;pointer-events:none}
.tour-root *{pointer-events:none}
.tour-root .tour-spot,
.tour-root .tour-tip,
.tour-root .tour-tip button{pointer-events:auto}
.tour-spot{
  position:fixed;z-index:96;
  box-shadow:0 0 0 9999px rgba(0,0,0,.72),0 0 0 3px var(--nhan),0 0 28px var(--glow);
  border-radius:22px;
  background:transparent;
  transition:top .25s,left .25s,width .25s,height .25s,border-radius .25s;
  cursor:pointer;
}
.tour-spot.roundish{border-radius:18px}
.tour-ring{
  position:fixed;z-index:97;pointer-events:none;
  border:2px solid var(--nhan-chu);
  border-radius:inherit;
  box-shadow:0 0 18px var(--glow);
  animation:tourPulse 1.6s ease-in-out infinite;
}
.tour-hand{
  position:fixed;z-index:98;width:44px;height:44px;
  display:grid;place-items:center;
  font-size:28px;line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));
  animation:tourTap 1.2s ease-in-out infinite;
  transform-origin:60% 10%;
  pointer-events:none;
}
.tour-tip{
  position:fixed;z-index:99;
  left:50%;transform:translateX(-50%);
  width:min(340px,calc(100vw - 28px));
  max-width:calc(100% - 28px);
  padding:16px 16px 14px;
  border-radius:20px;
  background:var(--kinh-dam);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--vien);
  box-shadow:var(--bong);
  color:var(--chu);
  pointer-events:auto;
}
.tour-tip h3{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--chu)}
.tour-tip p{margin:0 0 10px;font-size:14px;line-height:1.45;color:var(--chu2)}
.tour-tip .tour-qee{
  margin:0 0 12px;padding:8px 10px;border-radius:12px;
  background:var(--nhan-nhat);border:1px solid var(--vien);
  font-size:13px;line-height:1.4;color:var(--nhan-chu);font-weight:600;
}
.tour-dots{display:flex;justify-content:center;gap:8px;margin:0 0 12px}
.tour-dots i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.22);display:block;
}
.tour-dots i.on{background:var(--nhan);box-shadow:0 0 10px var(--glow);width:18px;border-radius:999px}
.tour-acts{display:flex;gap:8px;align-items:stretch;width:100%}
.tour-acts .tour-skip{
  flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;border-radius:999px;
  border:1px solid var(--vien);background:rgba(255,255,255,.06);
  font-weight:600;font-size:12.5px;color:var(--chu2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tour-acts .tour-next{
  flex:1 1 0;min-width:0;min-height:44px;padding:0 6px;border-radius:999px;
  background:var(--grad);color:var(--tren-nhan);
  font-weight:700;font-size:12.5px;
  box-shadow:0 8px 20px var(--glow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tour-acts .tour-next.solo{flex:1 1 auto;font-size:14px;padding:0 14px}
@media (max-width:380px){
  .tour-acts{flex-direction:column;gap:8px}
  .tour-acts .tour-skip,.tour-acts .tour-next{flex:none;width:100%;font-size:13.5px;padding:0 12px;white-space:nowrap;overflow:visible;text-overflow:clip}
}
html[data-mode="sang"] .tour-spot{box-shadow:0 0 0 9999px rgba(15,23,42,.55),0 0 0 3px var(--nhan),0 0 24px var(--glow)}
html[data-mode="sang"] .tour-tip{background:rgba(255,255,255,.94);color:var(--chu)}
html[data-mode="sang"] .tour-tip p{color:var(--chu2)}
html[data-mode="sang"] .tour-dots i{background:rgba(0,0,0,.16)}
html[data-mode="sang"] .tour-acts .tour-skip{background:var(--nen2);color:var(--chu)}
@keyframes tourPulse{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.015)}
}
@keyframes tourTap{
  0%,100%{transform:translateY(0) scale(1)}
  40%{transform:translateY(6px) scale(.92)}
  55%{transform:translateY(2px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .tour-ring,.tour-hand{animation:none!important}
  .tour-spot{transition:none}
}


/* ===== t95u — chặn zoom iOS + tràn ngang Giỏ xác minh ===== */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{
  overflow-x:hidden!important;
  overscroll-behavior-x:none;
  max-width:100%;
  width:100%;
  position:relative;
}
#app{
  overflow-x:hidden!important;
  max-width:min(430px,100%);
  width:100%;
  box-sizing:border-box;
}
.scr,.ci-list,.ci,.ci-b,.ci-o,.ci-hd,.ci-f,.ci-note-edit,
.sum,.addmore,.orderbar,.orderbar-xn,.xn-banner,.card,.form{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.ci{overflow:hidden}
.ci-o{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0;max-width:100%;min-width:0}
.ci-o .chip{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.orderbar-xn{
  position:relative!important;bottom:auto!important;left:auto!important;right:auto!important;
  width:100%!important;
  max-width:100%!important;
  overflow:hidden;
  box-sizing:border-box;
}
.orderbar-xn .btn-main{
  flex:0 1 auto;
  min-width:0;
  max-width:56%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.addmore{max-width:100%;box-sizing:border-box;overflow:hidden}
/* Mọi ô nhập ≥16px — không dùng font shorthand (tránh inherit 13px từ label) */
input,textarea,select,
input[type="text"],input[type="tel"],input[type="email"],input[type="number"],input[type="search"],
.ci-note-edit input,.fl input,.fl textarea,textarea[data-act],input[data-act],
#qin,[name="ten"],[name="sdt"],[name="hd_mst"],[name="hd_ten"],[name="hd_diachi"],[name="hd_email"],[name="hd_gc"]{
  font-size:16px!important;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}

/* t95u+ — bổ sung từ screenshot Long (overflow + inherit) */
.qee-bar input,.qee-sheet .qee-bar input{font-size:16px!important}
.ci.ci-qee,.ci.ci-qee .ci-b,.ci.ci-qee .ci-o{overflow:hidden!important;max-width:100%;min-width:0}
.scr.gio{overflow-x:hidden;max-width:100%}
.scr.gio .ci,.scr.gio .ci-list,.scr.gio .addmore,.scr.gio .orderbar,.scr.gio .xn-banner{max-width:100%}
.orderbar-xn .ob-tot{flex:1 1 auto!important;min-width:0}
.bgimg{pointer-events:none}
input,textarea,select{font-size:16px!important}

/* t100u auth sheet — full-width inputs, left labels, seg 2 equal halves 1 line */
#tqauth .kb-sheet{
  align-items:stretch;text-align:left;gap:10px;
  width:100%;max-width:100%;box-sizing:border-box;
  max-height:min(92dvh,720px);overflow-y:auto;
  padding-left:18px;padding-right:18px;
  transition:bottom .2s ease,max-height .2s ease;
}
#tqauth .kb-dy-t,#tqauth .kb-dy-sub,#tqauth .grab{align-self:center;text-align:center}
#tqauth .kb-dy-sub{max-width:100%}
#tqauth .kb-seg.auth-seg{
  display:flex;flex-wrap:nowrap;width:100%;box-sizing:border-box;
  gap:4px;padding:4px;margin:2px 0 4px;
}
.kb-seg.auth-seg button{
  flex:1 1 0;min-width:0;height:40px;display:grid;place-items:center;
  border-radius:999px;font-size:13px;font-weight:600;line-height:1.15;
  color:var(--chu2);background:transparent;border:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;
}
.kb-seg.auth-seg button.on{background:var(--grad);color:var(--tren-nhan)}
[data-gd="xanhngoc"] .kb-seg.auth-seg button.on{background:var(--nhan-nhat);color:var(--nhan-chu);box-shadow:inset 0 0 0 1px var(--nhan-chu)}
#tqauth #authbody{width:100%;display:flex;flex-direction:column;gap:0}
#tqauth .fl{
  width:100%;margin:8px 0;text-align:left;align-items:stretch;
  font-size:13px;font-weight:500;color:var(--chu2);box-sizing:border-box;
}
#tqauth .fl input{
  width:100%;max-width:100%;box-sizing:border-box;
  height:48px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid var(--vien);padding:0 14px;outline:none;
  font-size:16px!important;text-align:left;
}
#tqauth .btn-main,#tqauth .btn-ghost{margin:8px 0 0;width:100%}
#tqauth .kb-note{text-align:center;width:100%}