/* Be Vietnam Pro, tự lưu (subset vietnamese + latin) */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bvp-400-vietnamese.woff2) format('woff2');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:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/bvp-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/bvp-500-vietnamese.woff2) format('woff2');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:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/bvp-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bvp-600-vietnamese.woff2) format('woff2');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:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/bvp-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bvp-700-vietnamese.woff2) format('woff2');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:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bvp-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bvp-800-vietnamese.woff2) format('woff2');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:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bvp-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Trùm Food - demo v2: giao diện chợ thương mại điện tử, mật độ cao, 3 cột.
   Quy tắc: bo góc tối đa 3px, viền 1px thay bóng đổ, khoảng cách 8-12px, một phông chữ.
   Màu: xanh lá logo là chủ đạo; cam logo chỉ cho giá, nhãn ưu đãi và nút mua. */
:root{
  --bg:#edf0eb; --s:#fff; --ink:#1b2a1f; --mut:#5a685d; --ln:#d6ddd3; --ln2:#e8ede6;
  --g:#1f7a34; --gd:#16572a; --gk:#0f3a1f; --gl:#e6f3e3; --gl2:#f3f9f1;
  --o:#f28a1b; --od:#c25a00; --ol:#fff3e2;
  --r:3px; --w:1380px;
  --f:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:14px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.25;font-weight:700}
:focus-visible{outline:2px solid var(--o);outline-offset:2px}
.w{max-width:var(--w);margin:0 auto;padding:0 10px}
.muted{color:var(--mut)}
.sm{font-size:12px}

/* ---------- buttons / chips ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:var(--r);font-weight:600;font-size:14px;border:1px solid transparent;transition:background .15s,border-color .15s;white-space:nowrap}
.b-g{background:var(--g);color:#fff}.b-g:hover{background:var(--gd)}
.b-o{background:var(--o);color:var(--gk)}.b-o:hover{background:#ff9d38}
.b-l{background:#fff;border-color:var(--g);color:var(--g)}.b-l:hover{background:var(--gl2)}
.b-s{padding:5px 10px;font-size:13px}
.b-full{width:100%}
.chip{display:inline-block;padding:3px 9px;border:1px solid var(--ln);border-radius:var(--r);background:#fff;font-size:13px}
.chip:hover,.chip.on{background:var(--g);border-color:var(--g);color:#fff}
.tag{display:inline-block;background:var(--o);color:var(--gk);font-size:11px;font-weight:700;padding:1px 6px;border-radius:2px}

/* ---------- top bar ---------- */
.top{background:var(--gk);color:#cfe6cb;font-size:12.5px}
.top .w{display:flex;justify-content:space-between;align-items:center;height:32px;gap:12px}
.top a:hover{color:#fff}
.top .l,.top .r{display:flex;gap:16px;align-items:center}
.top svg{margin-right:4px;vertical-align:-3px}
.seg{display:flex;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);overflow:hidden}
.seg button{padding:2px 11px;font-size:12.5px;font-weight:600;color:#cfe6cb}
.seg button+button{border-left:1px solid rgba(255,255,255,.3)}
.seg button[aria-pressed=true]{background:var(--o);color:var(--gk)}

/* ---------- header ---------- */
.hd{background:var(--g);position:sticky;top:0;z-index:40}
.hd .w{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:8px;color:#fff;font-weight:800;font-size:19px;flex:none}
.logo img{width:48px;height:48px;border-radius:50%;background:#fff;object-fit:contain}
.sf{flex:1;display:flex;max-width:640px;background:#fff;border-radius:var(--r);overflow:hidden}
.sf select{border:0;border-right:1px solid var(--ln);background:var(--gl2);padding:0 8px;font:inherit;font-size:13px;color:var(--ink);max-width:140px}
.sf input{flex:1;border:0;padding:0 12px;font:inherit;height:40px;min-width:0;outline:0}
.sf button{background:var(--o);color:var(--gk);padding:0 18px;font-size:18px}
.hact{display:flex;gap:6px;margin-left:auto}
.ha{display:flex;align-items:center;gap:8px;color:#fff;padding:6px 10px;border-radius:var(--r);line-height:1.2;position:relative}
.ha:hover{background:rgba(255,255,255,.12)}
.ha svg{flex:none}
.ha small{display:block;font-size:11.5px;opacity:.85}
.ha b{font-size:13px;display:block}
.cnt{position:absolute;top:-2px;left:20px;background:var(--o);color:var(--gk);font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.nv{background:var(--gd)}
.nv .w{display:flex;height:38px;align-items:stretch;gap:2px}
.nv a{display:flex;align-items:center;gap:5px;padding:0 13px;color:#e3f4e0;font-weight:600;font-size:13.5px}
.nv a:hover,.nv a.on{background:rgba(255,255,255,.14);color:#fff}
.nv .hot{color:var(--o)}
.dd{position:relative;display:flex}
.dd .mn{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--ln);border-top:2px solid var(--o);min-width:260px;display:none;z-index:45}
.dd:hover .mn,.dd:focus-within .mn{display:block}
.mn a{color:var(--ink);padding:7px 12px;font-weight:500;border-bottom:1px solid var(--ln2);display:flex;gap:10px}
.mn a:hover{background:var(--gl2);color:var(--g)}
.mn small{margin-left:auto;color:var(--mut)}
.burger{display:none}

/* ---------- 3-col shell ---------- */
.shell{display:grid;grid-template-columns:224px minmax(0,1fr) 288px;gap:10px;max-width:var(--w);margin:0 auto;padding:10px;align-items:start}
.rail{display:grid;gap:10px;align-self:start}
.box{background:var(--s);border:1px solid var(--ln);border-radius:var(--r)}
.bh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-bottom:1px solid var(--ln);font-weight:700;font-size:14px;background:var(--gl2)}
.bh svg{color:var(--g);margin-right:5px;vertical-align:-3px}
.bh a{font-size:12.5px;font-weight:600;color:var(--g)}
.bb{padding:8px 11px}
.ctr{display:grid;gap:10px;min-width:0}

/* left rail */
.cat a{display:flex;align-items:center;gap:8px;padding:6px 11px;border-bottom:1px solid var(--ln2);font-size:13.5px}
.cat a:last-child{border:0}
.cat a:hover{background:var(--gl2);color:var(--g)}
.cat a.on{background:var(--gl);color:var(--gd);font-weight:700;box-shadow:inset 3px 0 0 var(--g)}
.cat svg{color:var(--g);flex:none}
.cat small{margin-left:auto;color:var(--mut);font-size:12px}
.who2 label{display:flex;gap:8px;align-items:flex-start;padding:7px 11px;border-bottom:1px solid var(--ln2);cursor:pointer;font-size:13px}
.who2 label:last-child{border:0}
.who2 input{margin-top:3px;accent-color:var(--g)}
.who2 b{display:block;font-size:13.5px}
.who2 span{color:var(--mut);font-size:12px;line-height:1.35;display:block}
.who2 label:has(input:checked){background:var(--gl)}
.sv a{display:flex;gap:8px;padding:6px 11px;border-bottom:1px solid var(--ln2);font-size:13.5px;align-items:center}
.sv a:last-child{border:0}.sv a:hover{background:var(--gl2);color:var(--g)}
.sv svg{color:var(--od);flex:none}
.hl{background:var(--gk);color:#fff;padding:10px 11px;border-radius:var(--r)}
.hl b{display:block;font-size:19px;color:var(--o)}

/* ---------- hero / banners ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:10px}
.sl{position:relative;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--ln);aspect-ratio:2.3/1}
.sl .sd{position:absolute;inset:0;opacity:0;transition:opacity .6s;display:block}
.sl .sd.on{opacity:1}
.sl img{width:100%;height:100%;object-fit:cover}
.sl .cap{position:absolute;left:0;top:0;bottom:0;width:48%;padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:linear-gradient(90deg,rgba(245,248,242,.96) 70%,rgba(245,248,242,0))}
.sl .cap h1,.sl .cap h2{font-size:clamp(20px,2.3vw,30px);color:var(--gk)}
.sl .cap p{color:var(--mut);font-size:14px}
.sl .nx{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:46px;background:rgba(15,58,31,.55);color:#fff;display:grid;place-items:center}
.sl .nx:hover{background:var(--gk)}
.sl .pv{left:0;border-radius:0 var(--r) var(--r) 0}.sl .nx.nx2{right:0;border-radius:var(--r) 0 0 var(--r)}
.dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:5px;justify-content:center}
.dots button{width:18px;height:4px;background:rgba(255,255,255,.7);border-radius:1px}
.dots button.on{background:var(--o)}
.pm{display:grid;gap:10px}
.pm a{border-radius:var(--r);padding:12px;display:flex;flex-direction:column;justify-content:center;gap:4px;border:1px solid var(--ln)}
.pm a svg{flex:none}
.pm b{font-size:14.5px;line-height:1.3}
.pm span{font-size:12.5px}
.pm .a{background:var(--g);color:#fff;border-color:var(--g)}.pm .a svg{color:var(--o)}
.pm .b2{background:var(--ol);border-color:#f5cf9b}.pm .b2 svg{color:var(--od)}

/* utilities */
.util{display:grid;grid-template-columns:repeat(8,1fr)}
.util a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;text-align:center;font-size:12.5px;font-weight:600;line-height:1.25;border-right:1px solid var(--ln2)}
.util a:last-child{border:0}
.util a:hover{background:var(--gl2);color:var(--g)}
.util svg{color:var(--g)}

/* product blocks */
.pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--ln)}
.pc{position:relative;padding:9px;border-right:1px solid var(--ln2);border-bottom:1px solid var(--ln2);display:flex;flex-direction:column;gap:5px;background:#fff;min-width:0}
.pc:hover{background:var(--gl2);z-index:1;box-shadow:0 0 0 1px var(--g)}
.pc .im{position:relative;aspect-ratio:1;overflow:hidden;background:var(--gl2);border-radius:2px}
.pc .im img{width:100%;height:100%;object-fit:cover}
.pc .im .tag{position:absolute;top:5px;left:5px}
.pc .nm{font-size:13.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.pc .mt{font-size:12px;color:var(--mut);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.pr b{font-size:17px;color:var(--od);font-weight:800}
.pr small{font-size:12px;color:var(--mut)}
.pr .q{font-size:13px;color:var(--od);font-weight:700}
.pc .sub{font-size:12px;color:var(--g);font-weight:600;min-height:18px}
.pc .bt{display:flex;gap:5px}
.pc .bt .b{flex:1;padding:6px 4px;font-size:13px}
.rail-sc{display:flex;overflow-x:auto;scrollbar-width:none}
.rail-sc .pc{flex:0 0 20%;min-width:170px}
.tabs{display:flex;gap:4px;flex-wrap:wrap}

/* perks */
.perks2{display:grid;grid-template-columns:repeat(5,1fr)}
.perks2 div{display:flex;gap:7px;align-items:flex-start;padding:9px 10px;border-right:1px solid var(--ln2);border-bottom:1px solid var(--ln2);font-size:13px;line-height:1.35;font-weight:600}
.perks2 svg{color:var(--od);flex:none;margin-top:1px}
.bh.o{background:var(--o);border-color:var(--o);color:var(--gk)}
.bh.o svg{color:var(--gk)}.bh.o a{color:var(--gk)}

/* two panels */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.steps2 li{display:grid;grid-template-columns:26px 1fr;gap:9px;padding:8px 11px;border-bottom:1px solid var(--ln2);counter-increment:s;font-size:13px}
.steps2 li:last-child{border:0}
.steps2 li::before{content:counter(s);width:24px;height:24px;background:var(--g);color:#fff;font-weight:700;display:grid;place-items:center;border-radius:2px;font-size:13px}
.steps2{counter-reset:s}
.steps2 b{display:block;font-size:13.5px}
.steps2 span{color:var(--mut);font-size:12.5px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln)}
.nums div{padding:8px 11px;border-right:1px solid var(--ln2)}
.nums div:last-child{border:0}
.nums b{display:block;font-size:17px;color:var(--od)}
.nums span{font-size:12px;color:var(--mut);line-height:1.3;display:block}
input[type=range]{width:100%;accent-color:var(--g)}
.calc .row{padding:8px 11px;border-bottom:1px solid var(--ln2)}
.calc label{font-size:13px;font-weight:600;display:flex;justify-content:space-between}
.res{display:grid;grid-template-columns:1fr 1fr}
.res div{padding:9px 11px;border-right:1px solid var(--ln2)}
.res div:last-child{border:0}
.res b{font-size:20px;color:var(--gd);display:block}
.bar{height:10px;background:var(--ol);display:flex;margin:0 11px 8px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%}

/* table */
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th,.tb td{padding:7px 10px;border:1px solid var(--ln2);text-align:left;vertical-align:top}
.tb thead th{background:var(--gk);color:#fff;font-weight:700}
.tb tbody th{background:var(--gl2);width:84px}
.tb td.hi,.tb th.hi{background:var(--ol)}
.tb thead th.hi{background:var(--o);color:var(--gk)}

/* community / news */
.th{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;padding:8px 11px;border-bottom:1px solid var(--ln2);align-items:center}
.th:last-child{border:0}
.th:hover{background:var(--gl2)}
.th img{width:96px;height:62px;object-fit:cover;border-radius:2px}
.th b{font-size:13.5px;line-height:1.3;display:block}
.th span{font-size:12px;color:var(--mut)}
.ask{padding:10px 11px;display:grid;gap:8px}
.ask textarea,.f input,.f select,.f textarea{width:100%;border:1px solid #aebcab;border-radius:var(--r);padding:8px 10px;font:inherit;background:#fff;color:var(--ink)}
.ask textarea{resize:vertical;min-height:70px}
.f input:focus,.f select:focus,.f textarea:focus,.ask textarea:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 2px var(--gl)}
.f{display:grid;gap:10px}
.f label{display:block;font-weight:600;font-size:13px;margin-bottom:3px}
.f small{color:var(--mut);font-size:12px}
.f .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rg{display:flex;gap:6px;flex-wrap:wrap}
.rg input{position:absolute;opacity:0}
.rg label{margin:0;padding:6px 12px;border:1px solid #aebcab;border-radius:var(--r);font-weight:600;cursor:pointer;font-size:13px}
.rg input:checked+label{background:var(--g);color:#fff;border-color:var(--g)}
.rg input:focus-visible+label{outline:2px solid var(--o)}

/* brand strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr)}
.strip div{display:flex;gap:9px;align-items:center;padding:10px 11px;border-right:1px solid var(--ln2)}
.strip div:last-child{border:0}
.strip svg{color:var(--g);flex:none}
.strip b{display:block;font-size:13.5px}
.strip span{font-size:12px;color:var(--mut)}

/* right rail */
.mem .tp{padding:10px 11px;display:grid;gap:8px}
.mem ul{display:grid;gap:5px;font-size:13px}
.mem li{display:flex;gap:6px}
.mem li svg{color:var(--g);margin-top:3px;flex:none}
.mem .two{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.me{display:grid;grid-template-columns:44px 1fr;gap:9px;align-items:center}
.av{width:44px;height:44px;background:var(--g);color:#fff;font-weight:800;font-size:18px;display:grid;place-items:center;border-radius:var(--r)}
.me b{display:block;font-size:14.5px}
.rk{display:inline-block;background:var(--o);color:var(--gk);font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:2px}
.pts{background:var(--gl2);border:1px solid var(--ln);border-radius:var(--r);padding:8px 10px}
.pts b{font-size:22px;color:var(--od)}
.prog{height:8px;background:#fff;border:1px solid var(--ln);border-radius:2px;margin:5px 0 3px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--g)}
.mini{display:grid;grid-template-columns:36px 1fr auto;gap:7px;padding:6px 11px;border-bottom:1px solid var(--ln2);align-items:center;font-size:12.5px}
.mini img{width:36px;height:36px;object-fit:cover;border-radius:2px}
.mini b{display:block;font-size:12.5px;line-height:1.25}
.lb li{display:grid;grid-template-columns:20px 1fr auto;gap:7px;padding:6px 11px;border-bottom:1px solid var(--ln2);font-size:13px;align-items:center}
.lb li:last-child{border:0}
.lb em{font-style:normal;width:20px;height:20px;background:var(--gl);color:var(--gd);font-weight:700;font-size:12px;display:grid;place-items:center;border-radius:2px}
.lb li:first-child em{background:var(--o)}
.qa li{padding:7px 11px;border-bottom:1px solid var(--ln2);font-size:13px;line-height:1.35}
.qa li:last-child{border:0}.qa li:hover{background:var(--gl2)}
.qa small{display:block;color:var(--mut);font-size:11.5px}

/* footer */
.ft{background:var(--gk);color:#b4d2b0;margin-top:10px;font-size:13px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:24px;padding:22px 10px}
.ft h4{color:#fff;margin-bottom:8px;font-size:14px}
.ft li{padding:2px 0}.ft a:hover{color:#fff}
.ft .logo{margin-bottom:8px}
.cp{border-top:1px solid rgba(255,255,255,.14);padding:10px;display:flex;justify-content:space-between;gap:10px;font-size:12px;flex-wrap:wrap}

/* floating */
.fl{position:fixed;right:12px;bottom:14px;display:grid;gap:8px;z-index:50}
.fb{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;font-size:22px;color:#fff;border:1px solid rgba(0,0,0,.1)}
.fb.z{background:#0068ff;font-weight:800;font-size:13px}.fb.c{background:var(--o);color:var(--gk)}.fb.bt2{background:var(--g)}
.chat{position:fixed;right:12px;bottom:70px;width:330px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--g);border-radius:var(--r);z-index:60;display:none;flex-direction:column}
.chat.on{display:flex}
.chat .h{background:var(--g);color:#fff;padding:8px 11px;display:flex;align-items:center;gap:8px;font-weight:700}
.chat .h button{margin-left:auto;color:#fff;font-size:18px}
.msgs{padding:10px;display:grid;gap:7px;max-height:260px;overflow:auto;background:var(--gl2);align-content:start}
.m{padding:7px 10px;border-radius:var(--r);font-size:13px;max-width:90%;line-height:1.4}
.m.b{background:#fff;border:1px solid var(--ln)}.m.u{background:var(--g);color:#fff;justify-self:end}
.qr{display:flex;gap:5px;flex-wrap:wrap;padding:7px 10px 0}
.qr button{border:1px solid var(--g);color:var(--g);padding:3px 8px;font-size:12px;border-radius:var(--r);background:#fff}
.chat form{display:flex;gap:6px;padding:8px 10px}
.chat input{flex:1;border:1px solid var(--ln);border-radius:var(--r);padding:6px 9px;font:inherit;min-width:0}
.chat form button{background:var(--o);color:var(--gk);padding:0 12px;border-radius:var(--r)}

/* drawer / modal / toast */
.scrim{position:fixed;inset:0;background:rgba(10,30,15,.55);z-index:70;display:none}
.scrim.on{display:block}
.drawer{position:fixed;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:#fff;z-index:80;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;border-left:1px solid var(--g)}
.drawer.on{transform:none}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:var(--g);color:#fff;font-weight:700}
.drawer .dh button{color:#fff;font-size:20px}
.drawer .db{flex:1;overflow:auto}
.drawer .df{border-top:1px solid var(--ln);padding:10px 12px;display:grid;gap:8px}
.ci{display:grid;grid-template-columns:52px 1fr auto;gap:9px;padding:8px 12px;border-bottom:1px solid var(--ln2);align-items:center;font-size:13px}
.ci img{width:52px;height:52px;object-fit:cover;border-radius:2px}
.qty{display:flex;align-items:center;gap:6px;margin-top:3px}
.qty button{width:24px;height:24px;border:1px solid var(--ln);border-radius:2px;display:grid;place-items:center}
.empty{padding:34px 12px;text-align:center;color:var(--mut)}
.empty svg{color:var(--ln);display:block;margin:0 auto 4px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:430px;max-width:calc(100vw - 20px);max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--g);border-radius:var(--r);z-index:90;display:none}
.modal.on{display:block}
.modal .mh{display:flex;justify-content:space-between;align-items:center;background:var(--g);color:#fff;padding:9px 12px;font-weight:700}
.modal .mh button{color:#fff;font-size:20px}
.modal .mb{padding:14px}
.mtabs{display:flex;border-bottom:1px solid var(--ln);margin:-14px -14px 12px}
.mtabs button{flex:1;padding:9px;font-weight:700;border-bottom:3px solid transparent;color:var(--mut)}
.mtabs button.on{color:var(--g);border-color:var(--g)}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--gk);color:#fff;padding:9px 16px;border-radius:var(--r);z-index:100;display:none;font-weight:600;font-size:13px}
.toast.on{display:flex;gap:6px;align-items:center}

/* inner pages */
.pg{padding:10px 12px;background:var(--gl2);border-bottom:1px solid var(--ln)}
.crumb{font-size:12.5px;color:var(--mut);padding:8px 11px}
.crumb a:hover{color:var(--g)}
.pd{display:grid;grid-template-columns:340px 1fr;gap:14px;padding:12px}
.pd .im{border:1px solid var(--ln);aspect-ratio:1;overflow:hidden;border-radius:2px}
.pd .im img{width:100%;height:100%;object-fit:cover}
.pd h1{font-size:22px;margin-bottom:6px}
.pd .big b{font-size:28px}
.facts{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln);margin:10px 0}
.facts div{padding:7px 10px;border-bottom:1px solid var(--ln2);border-right:1px solid var(--ln2);font-size:13px}
.facts small{display:block;color:var(--mut);font-size:11.5px}
.qb{display:flex;border:1px solid var(--ln);border-radius:var(--r)}
.qb button{width:34px;font-size:18px}.qb button:hover{background:var(--gl)}
.qb span{min-width:34px;display:grid;place-items:center;font-weight:700;border-inline:1px solid var(--ln)}
.fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 11px;border-bottom:1px solid var(--ln)}
.fbar select{border:1px solid var(--ln);border-radius:var(--r);padding:5px 8px;font:inherit;background:#fff}
.note{background:var(--ol);border:1px solid #f5cf9b;border-radius:var(--r);padding:8px 11px;font-size:13px;display:flex;gap:8px}
.note svg{color:var(--od);flex:none}
.faq details{border-bottom:1px solid var(--ln2);padding:8px 11px}
.faq summary{font-weight:700;cursor:pointer;font-size:14px}
.faq p{color:var(--mut);margin-top:5px;font-size:13.5px}
.path{padding:11px;display:grid;gap:6px;align-content:start}
.path li{display:flex;gap:7px;font-size:13.5px}.path li svg{color:var(--g);margin-top:3px;flex:none}
.tl2{display:grid;grid-template-columns:repeat(4,1fr)}
.tl2 div{padding:9px 11px;border-right:1px solid var(--ln2);font-size:13px}
.tl2 div:last-child{border:0}
.tl2 b{display:block}
.tl2 em{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;background:var(--g);color:#fff;font-weight:700;border-radius:2px;margin-bottom:4px}
.dash{display:grid;grid-template-columns:repeat(4,1fr)}
.dash div{padding:10px 12px;border-right:1px solid var(--ln2)}
.dash div:last-child{border:0}
.dash b{font-size:22px;color:var(--gd);display:block}
.rw{display:grid;grid-template-columns:repeat(3,1fr)}
.rw div{padding:10px 11px;border-right:1px solid var(--ln2);border-bottom:1px solid var(--ln2);display:grid;gap:5px;align-content:start}
.rw svg{color:var(--od)}
.rw b{font-size:13.5px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .shell{grid-template-columns:200px minmax(0,1fr)}
  .shell>.rail.rr{grid-column:1/-1;position:static;max-height:none;grid-template-columns:repeat(3,1fr);align-items:start}
  .pgrid{grid-template-columns:repeat(4,1fr)}
  .perks2{grid-template-columns:repeat(3,1fr)}
  .nv a:nth-child(n+7){display:none}
}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .shell>.rail{position:static;max-height:none}
  .shell>.rail.ll{grid-template-columns:1fr 1fr;order:2}
  .shell>.ctr{order:1}
  .shell>.rail.rr{order:3;grid-template-columns:1fr}
  .hero2{grid-template-columns:1fr}
  .pm{grid-template-columns:1fr 1fr}
  .sl{aspect-ratio:1.7/1}
  .sl .cap{width:70%;padding:12px}
  .util{grid-template-columns:repeat(4,1fr)}
  .util a{border-bottom:1px solid var(--ln2)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .cols2,.pd{grid-template-columns:1fr}
  .strip,.tl2,.dash{grid-template-columns:1fr 1fr}
  .rw{grid-template-columns:1fr}
  .perks2{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr}
  .top .r{display:none}
  .sf select{display:none}
  .ha span{display:none}
  .nv .w{overflow-x:auto}
  .nv a{white-space:nowrap}
  .nv a:nth-child(n+7){display:flex}
  .tb{display:block;overflow-x:auto}
}
@media (max-width:560px){
  .logo span{display:none}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .shell>.rail.ll{grid-template-columns:1fr}
  .th{grid-template-columns:76px 1fr}.th>:last-child{display:none}.th img{width:76px;height:54px}
  .fg{grid-template-columns:1fr}
  .seg button{padding:2px 8px}
  .top .l span.t{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* ---------- hỏi đáp ---------- */
.tools-tabs{display:flex;border-bottom:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}
.tools-tabs button{padding:9px 14px;font-weight:600;font-size:13.5px;border-bottom:3px solid transparent;white-space:nowrap;color:var(--mut)}
.tools-tabs button svg{margin-right:5px;color:var(--g);vertical-align:-3px}
.tools-tabs button.on{color:var(--g);border-color:var(--g);background:var(--gl2)}
.tpane{display:none;padding:12px}
.tpane.on{display:block}
.qa-item{border-bottom:1px solid var(--ln2);padding:10px 11px;display:grid;gap:6px}
.qa-item:last-child{border:0}
.qa-q{display:flex;gap:8px;align-items:flex-start}
.qa-q b{font-size:14.5px;line-height:1.35}
.qa-a{background:var(--gl2);border-left:3px solid var(--g);padding:7px 10px;font-size:13.5px;color:var(--ink)}
.qa-a small{display:block;color:var(--g);font-weight:700;margin-bottom:2px}
.qa-m{display:flex;gap:12px;font-size:12px;color:var(--mut);align-items:center;flex-wrap:wrap}
.qa-m button{color:var(--mut);font-size:12px}
.qa-m button:hover{color:var(--g)}
.st{font-size:11px;font-weight:700;padding:1px 6px;border-radius:2px;white-space:nowrap}
.st.ok{background:var(--gl);color:var(--gd)}.st.wait{background:var(--ol);color:var(--od)}.st.new{background:#e8eefc;color:#2a4a9a}
.rules li{display:flex;gap:7px;padding:5px 11px;font-size:13px;border-bottom:1px solid var(--ln2)}
.rules li:last-child{border:0}
.rules svg{color:var(--g);margin-top:3px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sug{border:1px dashed var(--g);background:var(--gl2);padding:7px 10px;font-size:13px;display:none}
.sug.on{display:block}
.sug a{color:var(--g);font-weight:600;display:block;padding:2px 0}
.cdw{font-size:12.5px;color:var(--od);font-weight:600}

/* ---------- footer mở rộng ---------- */
.ftop{background:var(--gd);border-bottom:1px solid rgba(255,255,255,.12)}
.fcm{display:grid;grid-template-columns:repeat(5,1fr)}
.fcm div,.fsys div{display:flex;gap:9px;align-items:flex-start;padding:14px 12px;border-right:1px solid rgba(255,255,255,.12);font-size:12.5px;line-height:1.4}
.fcm div:last-child,.fsys div:last-child{border:0}
.fcm svg,.fsys svg{color:var(--o);flex:none}
.fcm b,.fsys b{display:block;color:#fff;font-size:13.5px}
.fnl{display:grid;grid-template-columns:1fr minmax(240px,340px) auto;gap:12px;align-items:center;padding:12px;border-top:1px solid rgba(255,255,255,.12)}
.fnl b{display:block;color:#fff;font-size:14.5px}
.fnl span{font-size:12.5px}
.fnl input{border:0;border-radius:var(--r);padding:9px 11px;font:inherit;min-width:0}
.fg{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important}
.fc li{display:flex;gap:7px;padding:3px 0}.fc svg{color:var(--o);margin-top:3px;flex:none}
.fsys{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.soc{display:flex;gap:6px;margin-top:10px}
.soc a{width:34px;height:34px;border-radius:3px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:18px;color:#fff}
.soc a:hover{background:var(--o);color:var(--gk)}
.fs{padding:0 11px 8px}
.fs .prog{margin:4px 0 0}
.ft .logo{margin-bottom:8px}
@media(max-width:1180px){.fcm{grid-template-columns:repeat(3,1fr)}.fg{grid-template-columns:1fr 1fr 1fr!important}}
@media(max-width:860px){.fcm,.fsys{grid-template-columns:1fr 1fr}.fnl{grid-template-columns:1fr}.fg{grid-template-columns:1fr 1fr!important}}
@media(max-width:560px){.fcm,.fsys,.fg{grid-template-columns:1fr!important}}

/* ---------- chi tiết sản phẩm ---------- */
.pd2{display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;padding:12px}
.gal .gm{border:1px solid var(--ln);aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--gl2)}
.gal .gm img{width:100%;height:100%;object-fit:cover}
.gt{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.gt button{border:1px solid var(--ln);aspect-ratio:1;overflow:hidden;border-radius:2px;padding:0;opacity:.75}
.gt button.on{border:2px solid var(--g);opacity:1}
.gt img{width:100%;height:100%;object-fit:cover}
.trust2{display:grid;gap:4px;margin-top:8px;font-size:12.5px}
.trust2 span{display:flex;gap:6px;align-items:center}.trust2 svg{color:var(--g);flex:none}
.pd2 h1{font-size:22px;margin-bottom:5px}
.meta2{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-bottom:8px}
.meta2 b{color:var(--ink)}
.big b{font-size:28px}
.lb2{font-size:12.5px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.tys{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ln);border-radius:var(--r);overflow:hidden}
.tys button{padding:7px 4px;font-size:12.5px;font-weight:600;border-right:1px solid var(--ln);display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff}
.tys button:last-child{border:0}.tys svg{color:var(--g)}
.tys button.on{background:var(--g);color:#fff}.tys button.on svg{color:var(--o)}
.bpn{border:1px solid var(--ln);border-top:0;padding:10px;display:grid;gap:8px;background:var(--gl2)}
.packs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pk{border:1px solid var(--ln);background:#fff;border-radius:var(--r);padding:6px 4px;display:grid;gap:1px;text-align:center}
.pk b{font-size:13.5px}.pk span{font-size:12px;color:var(--od);font-weight:700}
.pk.on{border:2px solid var(--g);background:var(--gl)}
.qrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qrow .qb span{min-width:70px}
.tot{font-size:13px}.tot b{font-size:20px;color:var(--od);margin-left:4px}
.bbtn{display:flex;gap:8px;flex-wrap:wrap}
.bbtn .b{flex:1;min-width:140px}
.ck{display:grid;gap:5px}.ck li{display:flex;gap:7px;font-size:13.5px;line-height:1.4}.ck svg{color:var(--g);margin-top:3px;flex:none}
.tiers th{width:120px;white-space:nowrap}
.tiers td{font-size:13px}
.pol{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ln)}
.pol div{display:flex;gap:8px;padding:9px 11px;border-right:1px solid var(--ln2);font-size:12.5px;line-height:1.35}
.pol div:last-child{border:0}.pol svg{color:var(--g);flex:none}.pol b{display:block;font-size:13px}
.tgw{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:stretch}
.tgi{display:grid;grid-template-columns:20px 54px 1fr;gap:8px;padding:9px 11px;border-right:1px solid var(--ln2);align-items:center;cursor:pointer}
.tgi img{width:54px;height:54px;object-fit:cover;border-radius:2px}
.tgi b{font-size:13px;line-height:1.3;display:block}
.tgi input{accent-color:var(--g)}
.tga{display:grid;gap:4px;align-content:center;justify-items:start;padding:9px 12px;min-width:150px}
.tga b{font-size:17px;color:var(--od)}
.h4{font-size:14px;margin-bottom:6px;color:var(--gd)}
/* thanh toán */
.co{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px;align-items:start}
.co .stp{padding:10px 11px;display:grid;gap:10px}
.sum .ln{display:flex;justify-content:space-between;gap:8px;padding:5px 11px;font-size:13.5px}
.sum .ln.t{border-top:1px solid var(--ln);font-size:16px;font-weight:700;padding-top:8px}
.sum .ln.t b{color:var(--od);font-size:20px}
.okbox{padding:24px 16px;text-align:center;display:grid;gap:8px;justify-items:center}
.okbox svg{color:var(--g)}
@media(max-width:860px){.pd2,.co{grid-template-columns:1fr}.pol,.tgw{grid-template-columns:1fr 1fr}.tga{grid-column:1/-1}}
@media(max-width:560px){.tys,.packs{grid-template-columns:1fr 1fr}.pol{grid-template-columns:1fr}}

/* sửa lỗi bố cục */
[hidden]{display:none!important}
.ctr>*,.cols2>*,.co>*,.pd2>*,.tgw>*{min-width:0}
.ask input,.ask select,.ask textarea{min-width:0;max-width:100%}
.qa-q .st{margin-left:auto;align-self:flex-start;line-height:1.6}
.sl .cap{width:40%;background:linear-gradient(90deg,#f4f8f1 84%,rgba(244,248,241,0))}
.sl .cap h1,.sl .cap h2{font-size:clamp(17px,1.9vw,26px)}
.sl .cap p{font-size:13px}
.desc{position:relative;max-height:150px;overflow:hidden;font-size:14px;line-height:1.65}
.desc.open{max-height:none}
.desc:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(transparent,#fff)}

/* ---------- bổ sung cho theme thật (server render) ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-only:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;background:#fff;color:var(--ink);padding:8px 12px;z-index:200;border:2px solid var(--o)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inl{display:inline}
.lnk{font-size:12.5px;font-weight:600;color:var(--g)}
.top .who{color:#fff;font-size:12.5px}
.noimg{display:block;width:36px;height:36px;background:var(--gl2);border-radius:2px}
.ci .noimg{width:52px;height:52px}
.sumrow{display:flex;justify-content:space-between;border-top:1px solid var(--ln2)}
.sumrow b{color:var(--od);font-size:16px}
.sumrow.big{font-size:16px;border:0;padding:0}
.rm{margin-left:auto;color:var(--mut)}
.rm:hover{color:var(--od)}
.preview-bar{background:var(--gk);color:#fff;padding:6px 12px;font-size:13px;text-align:center}
.preview-bar a{color:var(--o);margin-left:10px;text-decoration:underline}
a.b,button.b{text-decoration:none}
.hl a:hover{text-decoration:underline}
.hero0 h1{color:var(--gk)}
.sl1{border-radius:0;border:0;border-top:1px solid var(--ln)}
.col2b{border-left:1px solid var(--ln2)}
.th0{grid-template-columns:minmax(0,1fr) auto}
.about{display:grid;grid-template-columns:260px 1fr;gap:12px;padding:10px 11px;font-size:14px}
.about img{width:100%;height:100%;object-fit:cover;border-radius:2px;min-height:150px}
.ta{width:100%;border:1px solid #aebcab;border-radius:var(--r);padding:8px 10px;font:inherit;background:#fff;color:var(--ink)}
.authpg{padding:14px;display:grid;gap:10px;max-width:460px}
.stp2{padding:10px 11px}
.tools-tabs a.tabl{padding:9px 14px;font-weight:600;font-size:13.5px;border-bottom:3px solid transparent;white-space:nowrap;color:var(--mut)}
.tools-tabs a.tabl svg{margin-right:5px;color:var(--g);vertical-align:-3px}
.tools-tabs a.tabl.on{color:var(--g);border-color:var(--g);background:var(--gl2)}
.fbar .fsort{margin-left:auto}
.qsi{border:1px solid var(--ln);border-radius:var(--r);padding:5px 9px;font:inherit;min-width:180px}
.askrow{display:grid;grid-template-columns:150px 1fr;gap:8px}
.ask input,.ask select{border:1px solid #aebcab;border-radius:var(--r);padding:8px 10px;font:inherit;background:#fff;color:var(--ink)}
.qa-q a{flex:1;min-width:0}
.qa-q a:hover b{color:var(--g)}
.qa-m form{display:inline}
.qa-m a:hover{color:var(--g)}
.qa-m svg{vertical-align:-2px}
.sf404{margin:6px auto}
.sfp{margin:10px 11px;max-width:640px;border:1px solid var(--ln)}
.sf404 input,.sfp input{flex:1;border:0;padding:0 12px;font:inherit;height:40px;min-width:0;outline:0}
.sf404 button,.sfp button{background:var(--o);color:var(--gk);padding:0 18px}
.fnl .fnm{grid-column:1/-1}
.fnl .fnm:empty{display:none}
.fnl .alert{background:rgba(255,255,255,.1);padding:6px 10px;border-radius:var(--r);color:#fff}
.sm svg,.crumb svg,.meta2 svg{vertical-align:-2px}
.tgi span.pr{display:flex}
.pd2 .tag{text-decoration:none}
.bpn p{font-size:13.5px}
.bpn .pnt svg{color:var(--od);vertical-align:-3px}
.bpn .pnt a{color:var(--g);font-weight:700}
.pk{cursor:pointer}
.tys button,.pk,.qb button{cursor:pointer}
.stars{color:var(--o);letter-spacing:1px}
.rvl{display:grid}
.rvl li{display:grid;grid-template-columns:44px 1fr;gap:9px;padding:10px 11px;border-bottom:1px solid var(--ln2)}
.rvl p{margin-top:3px;font-size:13.5px}
.empty a.b{color:#fff}
.empty a.b-l{color:var(--g)}
.okbox p{max-width:560px}

/* nội dung bài viết, trang */
.art{padding:11px 14px 14px}
.art .cover{margin-bottom:10px}
.art .cover img{width:100%;max-height:420px;object-fit:cover;border-radius:2px}
.art .lead{font-size:15.5px;font-weight:600;color:var(--gk);margin-bottom:10px}
.prose{font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.prose h2{font-size:19px;margin:1.3em 0 .4em}
.prose h3{font-size:16.5px;margin:1.2em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 .8em}
.prose ul{list-style:disc;padding-left:1.3em}
.prose ol{list-style:decimal;padding-left:1.3em}
.prose img{max-width:100%;height:auto;margin:.8em auto;border-radius:2px}
.prose a{color:var(--g);text-decoration:underline}
.prose table{width:100%;border-collapse:collapse;margin:1em 0;font-size:14px;display:block;overflow-x:auto}
.prose td,.prose th{border:1px solid var(--ln);padding:6px 9px}
.prose blockquote{border-left:3px solid var(--g);background:var(--gl2);padding:8px 12px;margin:1em 0}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0}
.prose>*:first-child{margin-top:0}
.desc.prose{font-size:14px;line-height:1.65}
.toc{border:1px solid var(--ln);background:var(--gl2);border-radius:var(--r);padding:8px 12px;margin:0 0 12px;font-size:13.5px}
.toc summary{font-weight:700;cursor:pointer}
.toc ol{padding-left:1.2em;margin-top:5px;list-style:decimal}
.toc .lv3{margin-left:14px;list-style:circle}
.toc a:hover{color:var(--g)}
.share{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:13px}
.share a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--ln);border-radius:var(--r)}
.share a:hover{background:var(--g);color:#fff;border-color:var(--g)}
.pager{display:flex;gap:4px;justify-content:center;padding:12px;flex-wrap:wrap}
.pager a,.pager span{min-width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ln);border-radius:var(--r);background:#fff;font-size:13px;padding:0 8px}
.pager a:hover{background:var(--gl2);color:var(--g)}
.pager .cur{background:var(--g);color:#fff;border-color:var(--g);font-weight:700}

/* biểu mẫu từ form builder (.cms-form) */
.cms-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cms-form .form-grid .full{grid-column:1/-1}
.cms-form .form-label{display:block;font-weight:600;font-size:13px;margin-bottom:3px}
.cms-form .form-control{width:100%;border:1px solid #aebcab;border-radius:var(--r);padding:8px 10px;font:inherit;background:#fff;color:var(--ink)}
.cms-form .form-control:focus{outline:0;border-color:var(--g);box-shadow:0 0 0 2px var(--gl)}
.cms-form textarea.form-control{min-height:84px;resize:vertical}
.cms-form .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:var(--r);font-weight:600;font-size:14px;background:var(--g);color:#fff;border:1px solid var(--g)}
.cms-form .btn:hover{background:var(--gd)}
.cms-form .btn-block{width:100%}
.cms-form .choice-group{display:flex;gap:6px;flex-wrap:wrap}
.cms-form .choice{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid #aebcab;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer}
.cms-form .choice:has(input:checked){background:var(--g);color:#fff;border-color:var(--g)}
.cms-form .cms-form-title{font-size:16px;margin-bottom:4px}
.cms-form .alert{display:flex;gap:8px;padding:8px 11px;border-radius:var(--r);font-size:13px;margin-bottom:8px;align-items:flex-start}
.cms-form .alert-success,.alert-success{background:var(--gl);color:var(--gd);border:1px solid var(--g)}
.cms-form .alert-error,.alert-error{background:var(--ol);color:var(--od);border:1px solid #f5cf9b}
.modal .cms-form .form-grid,.cmsf .compact .form-grid{grid-template-columns:1fr}
.modal .cms-form .form-grid>*{grid-column:1/-1}

@media (max-width:860px){
  .about{grid-template-columns:1fr}
  .col2b{border-left:0;border-top:1px solid var(--ln2)}
  .askrow{grid-template-columns:1fr}
  .cms-form .form-grid{grid-template-columns:1fr}
  .co .g2,.f .g2{grid-template-columns:1fr}
  .top .l .t{display:inline}
}
@media (max-width:560px){
  .top .l span.t{display:inline}
  .ha div{display:none}
  .hact .ha{padding:6px}
  .cnt{left:22px}
}

/* chống tràn ngang trên màn hẹp */
.sf,.hd .w>*,.shell>*{min-width:0}
.hd .w{overflow:hidden}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .hd .w{gap:8px}
  .hact{margin-left:0}
  .tys{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:1fr 1fr}
  .bbtn .b{min-width:0}
}
.nv a{flex:none}.nv .w{scrollbar-width:none}
.nv .dd{flex:none}

/* ---------- điện thoại: thanh liên hệ dưới đáy, bỏ mũi tên banner ---------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:860px){
  .sl .nx{display:none}
  .sl .cap{width:62%;padding:10px 12px;gap:6px}
  .sl .cap h2{font-size:18px}
  .sl .cap p{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fl{left:0;right:0;bottom:0;gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ln);background:#fff}
  .fb{width:auto;height:46px;border:0;border-radius:0;font-size:14px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:6px}
  .fb svg{width:18px;height:18px}
  .fb:not(.z)::after{content:attr(data-label);font-size:13px}
  .fb.z{font-size:14px}
  body{padding-bottom:46px}
  .chat{bottom:54px}
  .back-to-top{bottom:58px}
}

/* ---------- nút lên đầu trang ---------- */
#top-sentinel{position:absolute;top:0;left:0;width:1px;height:500px;pointer-events:none}
.back-to-top{position:fixed;right:12px;bottom:178px;width:46px;height:46px;border:0;border-radius:var(--r);background:var(--gk);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:49}
.back-to-top:hover{background:var(--g)}
.back-to-top.show{opacity:1;visibility:visible;transform:none}
@media (max-width:860px){.back-to-top{bottom:58px}}

/* hộp chat: tin nhắn luôn xuống dòng trong khung, không có thanh cuộn ngang */
.msgs{grid-template-columns:minmax(0,1fr);overflow-x:hidden;overflow-y:auto}
.m{max-width:88%;width:fit-content;overflow-wrap:anywhere;white-space:normal}
.m.u{justify-self:end}
.qr{padding:8px 10px 0}