/* v2-base.css - CHEP NGUYEN VAN TOAN BO khoi <style> cua
   layout-v2/nuochoaoto-trang-chu.html. Khong cat, khong sua ky tu nao.
   Trang v2 KHONG nap bat ky CSS cu nao. */

:root{
  --navy:#12294F; --navy-2:#0B1B36; --navy-soft:#1E3B69;
  --gold:#F2A81D; --gold-2:#FFC94A; --gold-tint:#FFF6E0;
  --red:#D1131E; --red-2:#A50D17; --red-soft:#FFF0F0;
  --green:#137A4A; --green-tint:#E9F7F0;
  --ink:#1B2430; --ink-2:#4A5666; --ink-3:#7A8698;
  --line:#E4E7EC; --line-2:#EFF1F4;
  --page:#F2F4F7; --card:#FFFFFF; --chip:#F7F8FA;
  --cream:#FAF7F1; --cream-line:#E9E1D2; --gold-deep:#9C7A35;
  --shadow:0 1px 2px rgba(18,41,79,.06), 0 6px 18px rgba(18,41,79,.06);
  --r:12px; --r-sm:8px; --w:1220px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E8ECF3; --ink-2:#AEB8C7; --ink-3:#8590A1;
    --line:#2A3446; --line-2:#222B3A;
    --page:#0E1520; --card:#151E2C; --chip:#1B2434;
    --cream:#141C28; --cream-line:#2A3446; --gold-deep:#D9AE58;
    --gold-tint:#2A2413; --red-soft:#2C1517; --green-tint:#12271E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#E8ECF3; --ink-2:#AEB8C7; --ink-3:#8590A1;
  --line:#2A3446; --line-2:#222B3A;
  --page:#0E1520; --card:#151E2C; --chip:#1B2434;
  --cream:#141C28; --cream-line:#2A3446; --gold-deep:#D9AE58;
  --gold-tint:#2A2413; --red-soft:#2C1517; --green-tint:#12271E;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.wrap{max-width:var(--w);margin:0 auto;padding:0 14px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.sec{margin-bottom:14px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.sec-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.4px}
.sec-head a{margin-left:auto;font-size:13px;color:var(--navy);font-weight:600;white-space:nowrap}
:root[data-theme="dark"] .sec-head a{color:var(--gold-2)}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}

/* PROMO */
.promo{background:linear-gradient(90deg,var(--navy-2),var(--navy) 45%,#1C3B6B);color:#fff}
.promo .wrap{display:flex;align-items:center;gap:14px;height:44px;justify-content:center;overflow:hidden}
.promo b{font-weight:800;letter-spacing:.3px;font-size:15px;white-space:nowrap}
.promo .hl{color:var(--gold-2)}
.promo .sep{width:1px;height:18px;background:rgba(255,255,255,.25)}
.promo .reg{background:var(--gold);color:var(--navy-2);font-weight:700;font-size:12px;border-radius:999px;padding:6px 14px;white-space:nowrap}
@media(max-width:820px){.promo .sep,.promo .reg{display:none}.promo b{font-size:13px}}

/* HEADER */
.header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:60}
.header .wrap{display:flex;align-items:center;gap:16px;padding:10px 14px}
.logo{display:flex;align-items:center;gap:9px}
.logo-mark{width:38px;height:38px;flex:0 0 auto}
.logo-text .lt-1{font-weight:800;font-style:italic;font-size:19px;letter-spacing:-.4px;display:block}
.logo-text .lt-1 .dot{color:var(--gold-2)}
.logo-text .lt-2{font-size:8.5px;letter-spacing:1.6px;color:var(--gold-2);font-weight:600;margin-top:3px;display:block}
.search{flex:1;position:relative;min-width:120px}
.search input{width:100%;height:40px;border-radius:999px;border:0;padding:0 44px 0 18px;font-size:14px;background:#fff;color:#1B2430}
.search input::placeholder{color:#93A0B3}
.search .sbtn{position:absolute;right:4px;top:4px;width:32px;height:32px;border-radius:50%;background:var(--gold);display:grid;place-items:center}
.hnav{display:flex;align-items:center;gap:18px}
.hnav .item{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#DCE4F0;white-space:nowrap}
.hnav .item strong{display:block;color:#fff;font-size:13px;font-weight:600}
.hnav .item small{display:block;font-size:10.5px;color:#9FB2CE}
.cart-pill{position:relative}
.cart-pill .badge{position:absolute;top:-6px;right:-9px;background:var(--gold);color:var(--navy-2);font-size:10px;font-weight:800;border-radius:999px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px}
@media(max-width:1000px){.hnav .lbl{display:none}.hnav{gap:14px}}
@media(max-width:620px){.header .wrap{flex-wrap:wrap}.search{order:3;flex-basis:100%}}

/* CATEGORY NAV */
.catnav{background:var(--card);border-bottom:1px solid var(--line);margin-bottom:14px}
.catnav ul{display:flex;gap:2px;list-style:none;margin:0;padding:8px 0}
.catnav a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 10px;border-radius:var(--r-sm);font-size:12px;color:var(--ink-2);white-space:nowrap}
.catnav a:hover,.catnav a.on{background:var(--gold-tint);color:var(--navy);font-weight:600}
:root[data-theme="dark"] .catnav a:hover,:root[data-theme="dark"] .catnav a.on{color:var(--gold-2)}
.catnav svg{stroke:currentColor}

/* HERO */
.hero{display:grid;grid-template-columns:1.62fr 1fr;gap:12px;margin-bottom:12px}
.slides{position:relative;border-radius:var(--r);overflow:hidden;min-height:288px;background:var(--navy)}
.slide{position:absolute;inset:0;padding:30px 34px;display:none;flex-direction:column;justify-content:center;color:#fff}
.slide.on{display:flex}
.slide .kicker{font-size:12.5px;font-weight:600;color:var(--gold-2);letter-spacing:.4px}
.slide h1{margin:6px 0 2px;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-1px;max-width:15ch}
.slide .lead{font-size:14px;color:#D5DFEF;margin:10px 0 0;max-width:34ch}
.slide .bigoff{font-size:15px;font-weight:700;color:var(--navy-2);background:var(--gold);border-radius:8px;padding:8px 14px;align-self:flex-start;margin-top:14px}
.slide .terms{font-size:11.5px;color:#9FB2CE;margin-top:10px}
.slide .art{position:absolute;right:-20px;bottom:-30px;opacity:.55}
.s1{background:radial-gradient(120% 130% at 82% 15%,#2F5EA8,#12294F 58%,#08152A)}
.s2{background:radial-gradient(120% 130% at 20% 10%,#5A3E7A,#231736 60%,#120B1C)}
.s3{background:linear-gradient(120deg,#FFE2A2,#F2A81D 58%,#D07F07);color:var(--navy-2)}
.s3 .kicker{color:var(--navy-2);opacity:.75}.s3 .lead{color:#3A2C10}.s3 .terms{color:#5A4415}
.s3 .bigoff{background:var(--navy);color:#fff}
.dots{position:absolute;left:34px;bottom:18px;display:flex;gap:6px;z-index:3}
.dots button{width:22px;height:4px;border-radius:99px;background:rgba(255,255,255,.4)}
.dots button.on{background:var(--gold-2);width:34px}
.s3~.dots button{background:rgba(18,41,79,.3)}
.side{display:grid;grid-template-rows:1fr 1fr;gap:12px}
.mini{border-radius:var(--r);padding:18px 20px;color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.mini h3{margin:0 0 4px;font-size:17px;font-weight:800;line-height:1.2}
.mini p{margin:0;font-size:12.5px;opacity:.9;max-width:26ch}
.mini .go{margin-top:10px;align-self:flex-start;font-size:12px;font-weight:700;border-radius:999px;padding:7px 15px;background:var(--gold);color:var(--navy-2)}
.m1{background:linear-gradient(135deg,#1B4B3A,#0D2C22)}
.m2{background:linear-gradient(135deg,#7A2230,#3D0F17)}
@media(max-width:900px){.hero{grid-template-columns:1fr}.slides{min-height:230px}.slide h1{font-size:25px}.side{grid-template-rows:auto auto}}

/* FINANCE STRIP */
.fin{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.fin a{background:var(--card);border-radius:10px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;box-shadow:var(--shadow)}
.fin .ic{width:30px;height:30px;border-radius:8px;background:var(--gold-tint);display:grid;place-items:center;color:var(--navy);flex:0 0 auto}
:root[data-theme="dark"] .fin .ic{color:var(--gold-2)}
.fin b{color:var(--red)}
@media(max-width:760px){.fin{grid-template-columns:1fr}}

/* SEEN */
.seen{display:flex;gap:10px}
.seen-card{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:7px 12px 7px 7px;min-width:236px}
.seen-card:hover{border-color:var(--gold)}
.seen-card .thumb{width:44px;height:52px;border-radius:7px;background:var(--chip);display:grid;place-items:center;flex:0 0 auto}
.seen-card .thumb svg{width:100%;height:100%}
.seen-card .nm{font-size:12.5px;line-height:1.35}
.seen-card .pr{color:var(--red);font-weight:700;font-size:13px;margin-top:3px;display:block}

/* FLASH SALE */
.flash{background:linear-gradient(160deg,#B70E19,#7E0912 70%);border-radius:var(--r);padding:14px;color:#fff}
.flash-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.flash-logo{font-weight:800;font-size:19px;letter-spacing:-.4px;line-height:1.05}
.flash-logo em{display:block;font-size:11px;font-weight:600;font-style:normal;color:#FFD58A;letter-spacing:1.2px}
.flash-cd{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#FFD9A8}
.cd-num{background:#fff;color:#B70E19;font-weight:800;border-radius:6px;padding:3px 7px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px}
.slots{display:flex;gap:6px;margin-left:auto}
.slot{border-radius:9px;padding:6px 14px;text-align:center;font-size:11.5px;color:#FFC9CE;background:rgba(0,0,0,.18);white-space:nowrap}
.slot b{display:block;font-size:14px;color:#fff;font-weight:700}
.slot.on{background:#fff;color:var(--red-2)}
.slot.on b{color:var(--red-2)}
.flash-tabs{display:flex;gap:6px;margin-bottom:12px}
.ftab{font-size:12.5px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);color:#FFE3E5;white-space:nowrap}
.ftab.on{background:var(--gold);color:var(--navy-2);font-weight:700}
.flash-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
@media(max-width:1080px){.flash-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slots{width:100%;margin-left:0;overflow-x:auto}}
.fcard{background:var(--card);border-radius:10px;padding:9px;display:flex;flex-direction:column;color:var(--ink)}
.fcard .media{aspect-ratio:1/1;border-radius:8px;display:grid;place-items:center;margin-bottom:7px}
.fcard .media svg{width:76%;height:76%}
.fcard .nm{font-size:12.5px;line-height:1.3;min-height:33px}
.fcard .pr{color:var(--red);font-weight:800;font-size:15px;margin-top:4px}
.fcard .was{font-size:11.5px;color:var(--ink-3)}
.fcard .was .off{color:var(--red);font-weight:700}
.suat{margin:7px 0 6px}
.suat .track{height:14px;border-radius:999px;background:var(--red-soft);overflow:hidden;position:relative}
.suat .fill{height:100%;background:linear-gradient(90deg,#FF7A2F,var(--red))}
.suat .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--red-2)}
.suat .fill.hi ~ .lbl{color:#fff}
.buy{margin-top:auto;background:var(--gold);color:var(--navy-2);font-weight:800;font-size:12.5px;border-radius:8px;padding:8px 0;text-align:center}
.flash-more{display:block;margin:14px auto 0;color:#fff;font-weight:700;font-size:13px;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:9px 26px}

/* DEAL RIBBON */
.ribbon-bn{background:linear-gradient(90deg,#F2A81D,#FFD36A 40%,#F2A81D);border-radius:var(--r);padding:18px 24px;display:flex;align-items:center;gap:18px;color:var(--navy-2);margin-bottom:12px}
.ribbon-bn h2{margin:0;font-size:27px;font-weight:800;letter-spacing:-.6px;line-height:1.05}
.ribbon-bn p{margin:4px 0 0;font-size:13px;opacity:.85}
.ribbon-bn .cta{margin-left:auto;background:var(--navy);color:#fff;font-weight:700;border-radius:999px;padding:11px 22px;font-size:13px;white-space:nowrap}
@media(max-width:700px){.ribbon-bn{flex-direction:column;align-items:flex-start;gap:10px}.ribbon-bn h2{font-size:21px}}

/* TABS + GRID */
.tabs{display:flex;gap:4px;margin-bottom:12px}
.tab{font-size:13px;padding:8px 16px;border-radius:999px;color:var(--ink-2);white-space:nowrap}
.tab.on{background:var(--gold-tint);color:var(--navy);font-weight:700}
:root[data-theme="dark"] .tab.on{color:var(--gold-2)}
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media(max-width:1180px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px 12px;display:flex;flex-direction:column;position:relative;transition:box-shadow .16s ease,border-color .16s ease}
.card:hover{box-shadow:var(--shadow);border-color:var(--line)}
.rib{font-size:10.5px;color:var(--ink-3);height:16px;line-height:16px;overflow:hidden;white-space:nowrap;margin-bottom:2px}
.rib.new{color:var(--red);font-weight:700}
.media{position:relative;aspect-ratio:1/1;border-radius:10px;display:grid;place-items:center;margin-bottom:9px;overflow:hidden}
.media svg{width:78%;height:78%}
.tagOK{position:absolute;top:6px;right:8px;font-size:10px;font-weight:800;color:var(--gold);background:rgba(255,255,255,.9);border-radius:6px;padding:2px 6px}
.flame{position:absolute;left:6px;top:6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;border-radius:6px;padding:2px 7px}
.pname{font-size:13px;line-height:1.35;font-weight:500;min-height:35px;margin-bottom:6px}
.pmeta{display:flex;gap:6px;font-size:11px;color:var(--ink-3);margin-bottom:7px;flex-wrap:wrap}
.pmeta span{background:var(--chip);border-radius:5px;padding:2px 6px}
.online-lbl{color:var(--red);font-size:11.5px;font-weight:600}
.price{color:var(--red);font-size:16px;font-weight:800;letter-spacing:-.2px}
.was{font-size:12px;color:var(--ink-3);margin:1px 0 5px}
.was s{margin-right:5px}
.off{color:var(--red);font-weight:700}
.gift{font-size:11.5px;color:var(--ink-2);background:var(--gold-tint);border-radius:6px;padding:3px 7px;display:inline-block;margin-bottom:8px}
:root[data-theme="dark"] .gift{color:var(--gold-2)}
.foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-3);padding-top:6px;border-top:1px dashed var(--line-2)}
.stars{color:#F3A712;font-weight:600}
.addcart{width:100%;margin-top:8px;background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;border-radius:8px;padding:9px 0;text-align:center}
.addcart:hover{background:var(--navy-soft)}
.more{display:block;margin:16px auto 0;border:1px solid var(--navy);color:var(--navy);background:var(--card);font-weight:600;border-radius:var(--r-sm);padding:11px 30px;font-size:13.5px}
.more:hover{background:var(--navy);color:#fff}
:root[data-theme="dark"] .more{color:var(--gold-2);border-color:var(--gold-2)}

/* BRAND TILES */
.tiles{display:flex;gap:10px}
.tile{flex:0 0 150px;background:var(--card);border-radius:var(--r);padding:12px;text-align:center;box-shadow:var(--shadow)}
.tile .box{height:76px;border-radius:9px;display:grid;place-items:center;margin-bottom:8px;font-weight:800;font-size:15px;letter-spacing:-.3px}
.tile b{font-size:12.5px;display:block;line-height:1.35}
.tile small{font-size:11px;color:var(--red);font-weight:700}
/* O cum khong co uu dai: dong duoi la nhan loai cum (Thuong hieu...) - chu nhat, khong to do nhu uu dai */
.tile small.v2-tile-type{color:var(--ink-3);font-weight:400}

/* CAMPAIGN */
.camp{display:grid;grid-template-columns:330px 1fr;gap:12px}
.camp-bn{border-radius:var(--r);background:linear-gradient(170deg,#FFD65E,#F2A81D 45%,#12294F 46%,#0B1B36);padding:22px;color:var(--navy-2);display:flex;flex-direction:column}
.camp-bn .top{flex:0 0 auto}
.camp-bn h3{margin:0;font-size:28px;font-weight:800;line-height:1.05;letter-spacing:-.8px}
.camp-bn .sub{font-size:12.5px;margin:6px 0 0;font-weight:600}
.camp-bn .bottom{margin-top:auto;color:#fff}
.camp-bn .num{font-size:34px;font-weight:800;color:var(--gold-2);line-height:1;margin-bottom:6px}
.camp-bn ul{list-style:none;margin:0 0 12px;padding:0;font-size:12px;color:#D6E0EF;line-height:1.8}
.camp-bn .cta{background:var(--gold);color:var(--navy-2);font-weight:800;border-radius:999px;padding:10px 20px;font-size:13px;align-self:flex-start}
.camp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:980px){.camp{grid-template-columns:1fr}.camp-list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* TRUST */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trust .t{display:flex;gap:10px;align-items:flex-start}
.trust .ic{width:36px;height:36px;border-radius:9px;background:var(--gold-tint);display:grid;place-items:center;flex:0 0 auto;color:var(--navy)}
:root[data-theme="dark"] .trust .ic{color:var(--gold-2)}
.trust b{display:block;font-size:13px;margin-bottom:2px}
.trust p{margin:0;font-size:11.5px;color:var(--ink-2);line-height:1.45}
@media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr)}}

/* BLOG */
.blog{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.post{background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.post .ph{height:120px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;text-align:center;padding:0 14px;line-height:1.3}
.post .bd{padding:11px 13px 14px}
.post h4{margin:0 0 5px;font-size:13px;line-height:1.4}
.post small{color:var(--ink-3);font-size:11.5px}
@media(max-width:860px){.blog{grid-template-columns:repeat(2,1fr)}}

/* ===== EDITORIAL SECTIONS (kem – vàng đồng) ===== */
.cream{background:var(--cream);border-radius:18px;padding:44px 32px;margin-bottom:14px}
.eyebrow{text-align:center;font-size:11px;font-weight:700;letter-spacing:2.4px;color:var(--gold-deep);text-transform:uppercase}
.h-big{text-align:center;margin:12px 0 0;font-size:31px;font-weight:800;letter-spacing:-.9px;line-height:1.2}
.h-big em{font-style:italic;color:var(--gold-deep);font-weight:800}
.h-sub{text-align:center;margin:10px auto 0;font-size:13px;color:var(--ink-2);max-width:62ch}
@media(max-width:700px){.cream{padding:30px 16px}.h-big{font-size:23px}}

/* 1. cẩm nang */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.g-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 1px 3px rgba(60,45,20,.08)}
.g-card .g-img{height:150px;display:block}
.g-card .g-img svg{width:100%;height:100%;display:block}
.g-card .g-bd{padding:13px 15px 15px}
.g-card h3{margin:0;font-size:14px;font-weight:700;line-height:1.4}
.g-card .g-tag{margin-top:10px;font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.pill-dark{display:block;width:max-content;margin:28px auto 0;background:var(--navy-2);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:12px 26px}
:root[data-theme="dark"] .pill-dark{background:var(--gold);color:var(--navy-2)}
@media(max-width:820px){.guide{grid-template-columns:1fr}}

/* 2. tại sao chọn */
.why{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center;padding:40px 0;margin-bottom:14px}
.why-art{position:relative;min-height:340px}
.why-art .ph{position:absolute;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(30,25,15,.18)}
.why-art .ph svg{width:100%;height:100%;display:block}
.why-art .p1{left:0;top:0;width:60%;height:72%}
.why-art .p2{right:0;bottom:0;width:58%;height:78%}
.why h2{margin:0 0 22px;font-size:33px;font-weight:800;letter-spacing:-1px;line-height:1.24}
.why h2 em{font-style:italic;color:var(--gold-deep)}
.why-pt{margin-bottom:16px}
.why-pt b{display:block;font-size:13.5px;margin-bottom:5px}
.why-pt p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.75;max-width:62ch}
.why-link{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:1.6px;color:var(--gold-deep);text-transform:uppercase;border-bottom:1.5px solid var(--gold-deep);padding-bottom:5px}
@media(max-width:900px){.why{grid-template-columns:1fr;gap:26px;padding:26px 0}.why h2{font-size:24px}.why-art{min-height:250px}}

/* 3. khách hàng nói gì */
.says{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start;padding:34px 0;margin-bottom:14px}
.says h2{margin:0 0 14px;font-size:30px;font-weight:800;color:var(--gold-deep);letter-spacing:-.8px;line-height:1.24}
.says .lead{margin:0 0 24px;font-size:12.5px;color:var(--ink-2);line-height:1.8}
.score{display:flex;gap:20px;align-items:flex-start}
.score .n{font-size:48px;font-weight:800;color:var(--gold-deep);line-height:1}
.score .st{color:var(--gold-deep);font-size:14px;letter-spacing:2px;margin-top:5px}
.score .cnt{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.score .bars{flex:1;padding-top:6px}
.sbar{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-3);margin-bottom:5px}
.sbar .tr{flex:1;height:5px;border-radius:99px;background:var(--cream-line)}
.sbar .fl{height:100%;border-radius:99px;background:var(--gold-deep)}
.says-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.say{border:1px solid var(--cream-line);border-radius:10px;padding:16px 18px;background:var(--card)}
.say .top{display:flex;align-items:center;gap:11px}
.say .av{width:36px;height:36px;border-radius:50%;background:var(--cream);color:var(--gold-deep);display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}
.say .who b{display:block;font-size:13px}
.say .who small{font-size:10px;letter-spacing:.8px;color:var(--ink-3);text-transform:uppercase}
.say .st{margin-left:auto;color:var(--gold-deep);font-size:11px;letter-spacing:1px;align-self:flex-start}
.say .prod{display:block;margin:12px 0 5px;font-size:11.5px;font-weight:700;color:var(--gold-deep)}
.say p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.65}
@media(max-width:980px){.says{grid-template-columns:1fr;gap:24px}.says h2{font-size:24px}}
@media(max-width:640px){.says-grid{grid-template-columns:1fr}}

/* 4. FAQ */
.faqs{margin-top:30px;display:flex;flex-direction:column;gap:11px}
.faqs details{background:var(--cream);border-radius:10px;padding:0 22px}
.faqs summary{padding:19px 0;font-size:14.5px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";color:var(--ink-3);font-size:19px;font-weight:400;line-height:1}
.faqs details[open] summary::after{content:"×"}
.faqs .ans{padding:0 0 19px;font-size:13px;color:var(--ink-2);line-height:1.75;max-width:88ch}
.faqs .ans b{color:var(--ink)}
@media(max-width:700px){.faqs summary{font-size:13.5px;padding:16px 0}.faqs details{padding:0 16px}}

/* TAGS */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags a{font-size:12px;color:var(--ink-2);background:var(--chip);border-radius:6px;padding:5px 10px}
.tags a:hover{background:var(--gold-tint);color:var(--navy)}

/* FOOTER */
.footer{background:var(--card);border-top:1px solid var(--line);margin-top:18px;padding:26px 0 90px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fcols h4{margin:0 0 10px;font-size:13px}
.fcols ul{list-style:none;margin:0;padding:0;font-size:12.5px;color:var(--ink-2);line-height:2}
.fcols .tel{color:var(--navy);font-weight:800}
:root[data-theme="dark"] .fcols .tel{color:var(--gold-2)}
.pay{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pay i{font-style:normal;font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:var(--ink-3)}
.legal{border-top:1px solid var(--line-2);margin-top:20px;padding-top:14px;font-size:11px;color:var(--ink-3);line-height:1.7}
@media(max-width:760px){.fcols{grid-template-columns:repeat(2,1fr)}}

/* STICKY + TOAST */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--card);border-top:1px solid var(--line);display:none;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(18,41,79,.08)}
.stickybar .s-ic{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--ink-2);gap:2px;padding:0 6px}
.stickybar .s-cta{flex:1;background:var(--gold);color:var(--navy-2);font-weight:800;border-radius:9px;font-size:13.5px}
@media(max-width:860px){.stickybar{display:flex;align-items:center}}
.toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:999px;z-index:90;transition:opacity .18s,transform .18s;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== BO SUNG V2 (khong co trong mockup) ===== */

/* Nut mo menu mobile. Mockup khong co nut nay vi dung .stickybar,
   nhung ban that can no de goi mmenu (#menu). An o desktop, hien <=860px
   cho khop voi diem .stickybar bat dau hien. */
.v2-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 auto;color:#fff;border-radius:var(--r-sm);padding:0}
.v2-burger:hover{background:rgba(255,255,255,.12)}
@media(max-width:860px){.v2-burger{display:flex}}

/* Trang ngan khong co thanh cuon se rong hon trang dai 15px, lam header
   nhay ngang khi chuyen trang. Chua cho san thanh cuon de moi trang bang nhau. */
html{scrollbar-gutter:stable}

/* ===== THAN TRANG CHU V2 ===== */

/* Slide 2-3 dung the <p> thay <h1> (rule B4: 1 H1/trang) nhung phai
   trong giong het h1 cua slide 1. */
.slide .slide-h{margin:6px 0 2px;font-size:34px;line-height:1.08;font-weight:800;letter-spacing:-1px;max-width:15ch}
@media(max-width:900px){.slide .slide-h{font-size:25px}}

/* Hai o phu canh hero: mockup dung <h3>, doi sang <h2> cho dung thu bac
   (H1 -> H2), giu nguyen kich thuoc. */
.mini .mini-h{margin:0 0 4px;font-size:17px;font-weight:800;line-height:1.2}

/* Tieu de muc nho hon binh thuong (mockup dat inline font-size:16px). */
.sec-head .sec-h-sm{font-size:16px}

/* Anh san pham that: mockup dung SVG vuong, anh that phai phu kin o do. */
.v2-media{display:block;position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;margin-bottom:9px;background:var(--chip)}
/* contain chu khong cover: anh san pham thuong co nen trang va vien, cover se
   xen mat phan ria (nap chai, chu tren vo hop). contain giu tron san pham. */
.v2-thumb{width:100%;height:100%;object-fit:contain;display:block}
/* Mockup dung SVG cho anh bai viet nen chi co quy tac ".g-card .g-img svg".
   Ban that dung <img>, khong co quy tac nao khop -> anh giu kich thuoc goc
   va tran ra ngoai khung 150px, de len tieu de.
   Them quy tac tuong duong cho <img>, giu nguyen height:150px cua thiet ke.
   overflow:hidden de anh bi cat gon trong khung dung nhu preserveAspectRatio
   ="slice" ma mockup dat tren SVG. */
.g-card .g-img{overflow:hidden;background:var(--chip)}
.g-card .g-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Trang thai rong: chiem tron hang cua grid de khong lech cot. */
.v2-empty-wide{grid-column:1/-1}
.v2-empty{margin:0;padding:26px 14px;text-align:center;font-size:13px;color:var(--ink-3)}
.flash .v2-empty{color:#FFD9A8}

/* Khoi FAQ (mockup dat inline padding). */
.v2-faq-sec{padding:26px 0 8px}

/* Xep chong 3 slide bang grid thay vi position:absolute cua mockup.
   Ly do: absolute lam .slides phai co min-height co dinh, tieu de dai mot chut
   la tran ra ngoai. Grid cho .slides tu lay chieu cao cua slide cao nhat.
   Ket qua o cung noi dung thi giong het mockup, nhung khong vo khi chu dai hon. */
.slides{display:grid}
.slide{position:relative;grid-area:1/1}
.slide:not(.on){display:none}
/* Mockup dat .slide absolute nen noi dung khong day khung: khung luon 288px
   va phan thua bi cat ngam. O day .slide la grid item nen no day khung that.
   Giam padding doc va khoang cach giua cac dong de tong noi dung vua 288px,
   giong het mockup nhung khong con cat chu. */
.slide{padding-top:18px;padding-bottom:18px}
.slide .lead{margin-top:8px}
.slide .bigoff{margin-top:9px}
.slide .terms{margin-top:7px}

/* .dots nam absolute o day .slides. Mockup chua cho no bang cach dat .terms
   la dong cuoi cung; giu nguyen padding 30px cua mockup, chi day .dots xuong
   sat day de khong de len .terms. */
.dots{bottom:14px}

/* Hinh trang tri .art o mobile de len nut CTA -> an di duoi 900px. */
@media(max-width:900px){.slide .art{display:none}}

/* Anh SVG cua san pham demo (dung khi bang san pham con trong). */
.v2-demo-art{width:78%;height:78%;display:block;margin:auto}

/* Tieu de bai viet dai ngan khac nhau (1-3 dong) nen nhan "Kien thuc nuoc hoa"
   o moi the nam o mot do cao khac nhau -> nhin so le.
   Cho .g-bd cao het phan con lai cua the va day nhan xuong day bang margin-top
   auto, de ba nhan thang hang. */
.g-card{display:flex;flex-direction:column}
.g-card .g-bd{flex:1;display:flex;flex-direction:column}
.g-card .g-tag{margin-top:auto;padding-top:10px}

/* Mockup tinh hang 1 cua header mobile la: logo + hnav. Ban that them nut
   burger (38px + gap) nen tong vuot qua be ngang may -> .hnav bi day xuong
   thanh hang rieng, header thanh 3 hang.
   Cho logo co lai de burger + logo + hnav du cho tren mot hang. */
@media(max-width:620px){
  .header .wrap{gap:10px}
  .logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .logo-text{min-width:0}
  .logo-text .lt-1{font-size:17px;white-space:nowrap}
  .logo-text .lt-2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hnav{gap:12px;flex:0 0 auto;margin-left:auto}
}
/* May hep: logo chu van chiem qua nhieu -> chi giu icon logo, bo phan chu.
   Voucher/dien thoai/vi tri bo bot, giu lai gio hang la thu can nhat. */
@media(max-width:460px){
  .logo-text .lt-2{display:none}
  .logo-text .lt-1{font-size:15px}
  .hnav{gap:13px}
}
/* Rat hep: bo han chu, chi con icon logo. */
@media(max-width:360px){
  .logo-text{display:none}
  .hnav{gap:14px}
}

/* Dai khuyen mai: mockup dat justify-content:center + overflow:hidden +
   nowrap. Tren dien thoai hai dong chu dai 477px trong khung 390px nen bi
   cat ca hai dau, chu dau tien bat dau o x=-73.
   Duoi 620px chi giu dong chinh, bo dong phu de doc duoc tron ven. */
@media(max-width:620px){
  .promo .wrap{gap:0;padding:0 12px}
  .promo b.hl{display:none}
  .promo b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ===== KHOI THUONG HIEU + DOI CHAI ===== */

/* Mau nen 8 o thuong hieu. Mockup dat inline style qua JS; dua ve class de
   khong vi pham rule B1 (cam inline style). */
.tile .box{color:#fff}
.v2-tile-0{background:linear-gradient(140deg,#12294F,#2F5EA8)}
.v2-tile-1{background:linear-gradient(140deg,#7A5330,#C9A47A)}
.v2-tile-2{background:linear-gradient(140deg,#2E7FA8,#8FD3EC)}
.v2-tile-3{background:linear-gradient(140deg,#3B3468,#7E72C4)}
.v2-tile-4{background:linear-gradient(140deg,#1B4B3A,#4E9C74)}
.v2-tile-5{background:linear-gradient(140deg,#5B636F,#A8B2BF)}
.v2-tile-6{background:linear-gradient(140deg,#7A2230,#C25266)}
.v2-tile-7{background:linear-gradient(140deg,#8A5A16,#F2A81D)}

/* Mockup dung <h3> cho tieu de banner doi chai. Doi sang <h2> cho dung thu
   bac (H1 -> H2), giu nguyen kich thuoc cua thiet ke. */
.camp-bn .camp-h{margin:0;font-size:28px;font-weight:800;line-height:1.05;letter-spacing:-.8px}

/* .cta trong banner la the <a> chu khong phai <button> -> can display de
   padding an vao. */
.camp-bn a.cta{display:inline-block;text-align:center}

/* ===== FOOTER: NHAN COT ===== */

/* Rule B2: footer khong dung the H. Mockup dung <h4> cho nhan cot, da doi
   sang <div class="fcol-h"> - phai co CSS that trong dung ngu canh, khong
   chi dua vao the mac dinh cua trinh duyet. */
.fcols .fcol-h{margin:0 0 10px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.fcols .fcol-social{margin-top:10px}

/* ===== SAN PHAM DA XEM ===== */

/* Khoi an san, JS bo class nay khi co du lieu that. Dung class thay vi
   inline style de theo rule B1. */
.v2-hidden{display:none}

/* Anh thumb trong the da xem: khung 44x52 co san, anh phai phu vua khung. */
.seen-card .thumb img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}

/* css.php dong 7068 dat "body{max-width:768px}" trong @media(max-width:1024px)
   - dung cho bo cuc mobile cua ban CU. Ban v2 co gian theo be ngang may nen
   bi quy tac do bop lai (vd man 860px chi dung 768px).
   Tra lai full width cho .v2-page; ban cu khong dung class nay nen khong doi. */
@media(max-width:1024px){
  body:has(.v2-page){max-width:none}
}

/* Tieu de chi danh cho bot va trinh doc man hinh - khong hien tren giao dien.
   Dung khi can mot cap heading de khong nhay cap nhung thiet ke khong co cho. */
.v2-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== TRA FONT CHO CAC THE H =====
   main.css dong 2654 dat cho MOI the h1-h6:
     font-family:'Roboto'; font-weight:700; line-height:1.8; margin-bottom:.4rem
   Quy tac do de len font cua thiet ke v2 (Be Vietnam Pro), lam chu tieu de
   nho va manh hon mockup. Ban v2 khong dung Roboto nen tra lai o day.
   Chi ap trong .v2-page nen ban cu khong doi. */
.v2-page h1,.v2-page h2,.v2-page h3,.v2-page h4,.v2-page h5,.v2-page h6{
  font-family:"Be Vietnam Pro",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}

/* main.css con dat font-weight:700, line-height:1.8, margin-bottom:.4rem cho
   moi the H. Dung DUNG do uu tien nhu no (mot the, khong them .v2-page) de
   cac class cua thiet ke van de len binh thuong - giong het cach mockup
   hoat dong. Dat sau main.css trong thu tu nap nen van thang. */
h1,h2,h3,h4,h5,h6{font-weight:bold;line-height:inherit;margin-bottom:0}

/* ===== NHAN "demo" CHO DU LIEU CHUA CO =====
   Thanh phan nao DB chua co du lieu thi van hien nhung mo di va gan nhan
   "demo", de nhin vao biet ngay cho nao con phai bo sung.
   Chi tiet tung truong: section-chua-co-data-hashcode.md */
.v2-dm{
  display:inline-block;font-size:9.5px;font-weight:700;line-height:1.4;
  letter-spacing:.4px;text-transform:uppercase;
  color:var(--gold-deep);background:var(--gold-tint);
  border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle}
.v2-thieu{opacity:.55}

/* Nhan demo trong o dung tich nho hon cho vua. */
.vr .v2-dm{font-size:9px;padding:0 4px;margin-left:3px}

/* ===== NUT DUNG TICH TRONG THE SAN PHAM =====
   Chep tu mockup danh muc. The san pham dung chung o moi trang nen quy tac
   phai nam o v2-base, khong de rieng trong v2-category (trang danh sach
   khong nap file do -> nut bi vo, chu xuong doc tung ky tu). */
.variants{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
/* CSS cu dat span{display:flex}, span{background:...} va span{opacity:...}
   voi do uu tien cao hon .vr mot the, lam nut bi bop, nen trung mau chu va
   mo di. Dung .variants .vr va khai ro tung thuoc tinh de thang. */
.variants .vr{
  display:inline-flex;align-items:center;width:auto;flex:0 0 auto;
  font-size:11px;line-height:1.4;white-space:nowrap;
  border:1px solid var(--line);border-radius:6px;padding:3px 7px;
  background:var(--card);color:var(--ink-2);opacity:1}
.variants .vr.on{background:var(--gold-tint);border-color:var(--navy);color:var(--navy);font-weight:600}
/* Bien the demo: mo nhe nhung van doc duoc. */
.variants .vr.v2-thieu{opacity:.7}
:root[data-theme="dark"] .vr.on{color:var(--gold-2)}

/* Thanh ton kho - cung ly do. */
.stockbar{margin:2px 0 8px}
.stockbar .track{height:6px;border-radius:999px;background:var(--line-2);overflow:hidden}
.stockbar .fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--red))}
.stockbar .lbl{font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* Chan the: sao + da ban + nut So sanh nam mot hang, khong xuong dong roi
   khi co nhan demo. */
.foot .stars{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.foot .cmp{flex:0 0 auto;white-space:nowrap}

/* Nhan demo phai nam cung dong voi gia tri, khong xuong dong rieng. */
/* ===== THONG SO SAN PHAM (.specs) =====
   Chep nguyen van tu mockup. Truoc day nam trong v2-category/v2-list nen
   trang nao khong nap file do thi mat dau cham vang dau dong. */
.specs{list-style:none;margin:0 0 8px;padding:0;font-size:11.5px;color:var(--ink-2);line-height:1.6}
.specs li{padding-left:11px;position:relative}
.specs li::before{content:"";position:absolute;left:2px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--gold)}

.specs li,.stockbar .lbl,.was,.gift,.pmeta span{text-wrap:pretty}
.specs li .v2-dm,.stockbar .lbl .v2-dm{margin-left:5px}
.was .v2-dm,.gift .v2-dm{vertical-align:baseline}

/* ===== PHAN TRANG =====
   Dung chung cho trang danh muc, danh sach, thuong hieu. Truoc day chi nam
   trong v2-list.css nen trang thuong hieu bi mat vien, cac nut dinh lien
   nhau ("< 1 2 3 >"). */
.pager{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:14px}
.pager a,.pager span{
  display:inline-grid;place-items:center;min-width:36px;height:36px;
  padding:0 10px;border:1px solid var(--line);border-radius:9px;
  font-size:13px;color:var(--ink-2);background:var(--card);line-height:1}
.pager a:hover{border-color:var(--gold)}
.pager .on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
:root[data-theme="dark"] .pager .on{background:var(--gold);border-color:var(--gold);color:var(--navy-2)}
.pager .v2-pg-off{opacity:.4}


/* ===== HAI QUY TAC CUA THE SAN PHAM - PHAI DUNG CHUNG =====
   Truoc day nam trong v2-list.css nen trang thuong hieu (khong nap file do)
   hien khac: chu mau bootstrap rgb(33,37,41) va ten san pham khong gioi han
   so dong. Chuyen ve day de moi trang giong nhau. */

/* CSS cu (bootstrap) dat color cho <article> -> .card thua huong mau sai. */
.card{color:var(--ink)}

/* Ten san pham that dai trung binh 88 ky tu (mockup chi 34-38) nen chiem
   4 dong, lam cac the cao thap khac nhau. Gioi han 3 dong, du thi cat bang
   "...". Dung line-clamp nen bot Google van doc duoc toan bo ten trong HTML. */
.card .pname{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;min-height:52px}

/* Kieu danh sach co nhieu cho hon -> cho 2 dong la du. */

/* The "San pham da xem": ten san pham that dai hon mockup nhieu, khong chan
   tren thi mot the be ra chiem het hang. Mockup min-width 230px, dat them
   max-width de nhieu the con xep canh nhau duoc. */
.seen-card{max-width:300px}
/* The "San pham da xem": cat ten o 2 dong. Ten san pham that dai hon mockup
   nhieu, de nguyen thi the cao lech nhau giua cac trang.
   Dat o day (v2-base nap tren MOI trang v2) chu khong phai v2-category.css -
   file do chi nap tren controller product nen trang chu khong co rule.
   .seen-card>span can min-width:0, khong thi -webkit-box khong cat duoc.
   Dung .seen .seen-card de thang rule ".seen-card .nm" cua v2-category. */
.seen-card>span{min-width:0}
.seen .seen-card .nm{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.seen-card .thumb img{width:100%;height:100%;object-fit:cover;border-radius:7px;display:block}

/* The rut gon trang chu (v2_home_card / v2_flash_card): trang chu khong nap
   v2-list.css nen khai lai do rong thanh suat + mau "Da ban" o day. */
.suat .fill.v2-fill-0{width:5%}.suat .fill.v2-fill-10{width:10%}.suat .fill.v2-fill-20{width:20%}
.suat .fill.v2-fill-30{width:30%}.suat .fill.v2-fill-40{width:40%}.suat .fill.v2-fill-50{width:50%}
.suat .fill.v2-fill-60{width:60%}.suat .fill.v2-fill-70{width:70%}.suat .fill.v2-fill-80{width:80%}
.suat .fill.v2-fill-90{width:90%}.suat .fill.v2-fill-100{width:100%}
.foot .v2-sold{color:var(--ink-3);font-weight:400}
.fcard .nm{color:var(--ink)}
.fcard .buy{display:block}
a.flash-more{width:max-content;max-width:100%}
/* Ten trong the khung gio vang: mockup toi da 2 dong, ten SEO dai cat bang "..." */
.fcard .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:33px;min-height:0}

/* Khung goi y o tim kiem header (js.php autocomplete). Header v2 nen toi chu trang ->
   phai dat lai mau chu, khong thi ten san pham trang tren nen trang (khong thay). */
.search .autocomplete-items{top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;max-height:70vh;overflow-y:auto}
.search .autocomplete-items div{padding:8px 12px;background:#fff;border-bottom:1px solid var(--line-2);color:#1B2430}
.search .autocomplete-items div:last-child{border-bottom:0}
.search .autocomplete-items div:hover,.search .autocomplete-items .autocomplete-active{background:#F4F6FA !important;color:#1B2430}
.search .autocomplete-items a{display:flex;align-items:center;gap:10px;color:#1B2430}
.search .autocomplete-items img{width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:8px;background:#F4F6FA}
.search .autocomplete-items a strong{flex:1;min-width:0;padding:0;font-size:13px;font-weight:600;line-height:1.35;color:#1B2430;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search .autocomplete-items a span{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--red)}
/* The danh sach (v2_product_card): gia ban + gia goc gach ngang cung 1 hang, hep thi xuong dong */
.v2-price-row{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin-bottom:5px}
.v2-price-row .was{margin:0}
/* Dai tin cay trang chu con 2 o (da bo o "Tra gop 0%") */
.fin.fin-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.fin.fin-2{grid-template-columns:1fr}}

/* Anh dai dien khi san pham CHUA co anh (v2_anh_sp): hinh theo dang san pham nhu mockup
   + nen gradient nhat cua chinh cap mau do (mockup: linear-gradient(160deg,c1 22,c2 18)).
   Thu tu .v2-art-0..9 trung bang $mau trong v2_anh_sp(). */
.v2-art{display:grid;place-items:center}
.v2-art .v2-demo-art{width:76%;height:76%}
.v2-art-0{background:linear-gradient(160deg,#F4D9A022,#D9A44118)}
.v2-art-1{background:linear-gradient(160deg,#BFE3F522,#5AAFD818)}
.v2-art-2{background:linear-gradient(160deg,#D9E4EE22,#7C93AE18)}
.v2-art-3{background:linear-gradient(160deg,#D8F0E422,#63B48C18)}
.v2-art-4{background:linear-gradient(160deg,#E7D7F222,#9B72C418)}
.v2-art-5{background:linear-gradient(160deg,#F6D7C422,#D9865A18)}
.v2-art-6{background:linear-gradient(160deg,#FBE3EC22,#E39BB618)}
.v2-art-7{background:linear-gradient(160deg,#DDE3EA22,#6E7B8C18)}
.v2-art-8{background:linear-gradient(160deg,#2B3A5522,#0F1B2E18)}
.v2-art-9{background:linear-gradient(160deg,#C9A47A22,#7A533018)}
/* Dong qua tang tren the: 1 dong nhu mockup, ten qua dai cat "..." (ten day du o title) */
.card .gift{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nhan "Hang moi ve": dung y kieu .tagOK ("Chinh hang"), chi doi sang goc trai anh */
.tagOK.v2-tag-new{right:auto;left:8px}
.flame ~ .tagOK.v2-tag-new{top:30px}