/* v2-brand.css - CSS rieng cho trang THUONG HIEU (/thuong-hieu/...).
   Trich tu layout-v2/nuochoaoto-thuong-hieu-areon.html.
   Da bo: quy tac header/footer (thuoc v2-base) va quy tac trung CA selector
   LAN gia tri voi v2-base/v2-category/v2-list. Nap sau cac file do. */

:root{
  --navy:#12294F;--navy-2:#0B1B36;--navy-soft:#1E3B69;
  --gold:#F2A81D;--gold-2:#FFC94A;--gold-tint:#FFF6E0;--gold-deep:#9C7A35;
  --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;
  --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-tint:#2A2413;--gold-deep:#D9AE58;--red-soft:#2C1517;--green-tint:#12271E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35);}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.001ms!important}}
.v2-brand .panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 14px}
.sec-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.5px}
/* promo + header */
.promo{background:linear-gradient(90deg,var(--navy-2),var(--navy) 45%,#1C3B6B);color:#fff}
@media(max-width:820px){.promo .sep, .promo .reg{display:none}.promo b{font-size:13px}}
@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%}}
.v2-brand .crumb{padding:12px 0 8px;font-size:12.5px;color:var(--ink-3)}
/* ===== BRAND HERO ===== */
.bhero{background:radial-gradient(120% 140% at 82% 14%,#2F5EA8 0%,#12294F 52%,#08152A 100%);border-radius:16px;padding:32px 34px;color:#fff;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center;margin-bottom:12px;position:relative;overflow:hidden}
.bhero .wordmark{font-size:52px;font-weight:800;letter-spacing:-2.4px;line-height:1;display:flex;align-items:baseline;gap:12px}
.bhero .wordmark span{font-size:13px;font-weight:700;letter-spacing:2.6px;color:var(--gold-2);text-transform:uppercase}
.bhero h1{margin:16px 0 0;font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.3;max-width:24ch}
.bhero .lead{margin:12px 0 0;font-size:13.5px;color:#CFDBEC;line-height:1.8;max-width:56ch}
.bbadges{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.bbadge{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 14px;font-size:12px;color:#E4ECF7}
.bbadge svg{color:var(--gold-2)}
.bctas{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
.bctas .b1{background:var(--gold);color:var(--navy-2);font-weight:800;border-radius:9px;padding:13px 24px;font-size:13.5px}
.bctas .b2{border:1.5px solid rgba(255,255,255,.5);color:#fff;font-weight:700;border-radius:9px;padding:12px 20px;font-size:13.5px}
.bstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bstat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 18px}
.bstat b{display:block;font-size:26px;font-weight:800;color:var(--gold-2);line-height:1.1;letter-spacing:-.8px}
.bstat small{display:block;font-size:11.5px;color:#B8C7DC;margin-top:5px;line-height:1.45}
@media(max-width:900px){.bhero{grid-template-columns:1fr;padding:24px 18px}.bhero .wordmark{font-size:38px}.bhero h1{font-size:20px}}
/* dải ưu đãi riêng của hãng */
.bdeal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.bdeal .d{background:var(--card);border:1px solid var(--gold);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:12px}
.bdeal .amt{background:var(--gold-tint);color:var(--gold-deep);font-weight:800;font-size:14px;border-radius:8px;padding:8px 12px;white-space:nowrap}
.bdeal .tx{flex:1;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.bdeal .tx b{display:block;color:var(--ink);font-size:13px}
.bdeal .get{background:var(--navy);color:#fff;font-weight:700;font-size:12px;border-radius:7px;padding:8px 13px;white-space:nowrap}
:root[data-theme="dark"] .bdeal .get{background:var(--gold);color:var(--navy-2)}
@media(max-width:860px){.bdeal{grid-template-columns:1fr}}
/* ===== DÒNG SẢN PHẨM ===== */
.lines{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:980px){.lines{grid-template-columns:repeat(2,1fr)}}
.line{background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:9px}
.line:hover{border-color:var(--gold)}
.line.on{border-color:var(--navy);background:var(--gold-tint)}
:root[data-theme="dark"] .line.on{border-color:var(--gold-2);background:rgba(242,168,29,.1)}
.line .ph{height:92px;border-radius:9px;display:grid;place-items:center}
.line .ph svg{width:62%;height:82%}
.line b{font-size:13.5px;display:block}
.line small{display:block;font-size:11.5px;color:var(--ink-2);line-height:1.5}
.line .n{font-size:11px;color:var(--gold-deep);font-weight:700;margin-top:auto}
/* ===== BESTSELLER STRIP ===== */
.best{background:linear-gradient(160deg,#B70E19,#7E0912 70%);border-radius:var(--r);padding:16px;color:#fff;margin-bottom:12px}
.best-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:13px}
.best-top b{font-size:18px;font-weight:800;letter-spacing:-.4px}
.best-top em{font-style:normal;font-size:11.5px;color:#FFD9A8;display:block;margin-top:2px}
.best-cd{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#FFD9A8}
.best-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media(max-width:1000px){.best-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.best-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.best-cd{margin-left:0}}
.bcard{background:var(--card);border-radius:10px;padding:9px;display:flex;flex-direction:column;color:var(--ink)}
.bcard .media{aspect-ratio:1/1;border-radius:8px;display:grid;place-items:center;margin-bottom:7px}
.bcard .media svg{width:76%;height:76%}
.bcard .nm{font-size:12.5px;line-height:1.3;min-height:33px}
.bcard .pr{color:var(--red);font-weight:800;font-size:15px;margin-top:4px}
.bcard .was{font-size:11.5px;color:var(--ink-3)}
.bcard .was .off{color:var(--red);font-weight:700}
/* ===== FILTER + GRID ===== */
.filterbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.v2-brand .chips{display:flex;gap:7px}
:root[data-theme="dark"] .chip.on{background:var(--gold);border-color:var(--gold);color:var(--navy-2)}
.v2-brand .sortbar{display:flex;align-items:center;gap:6px;margin:4px 0 12px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.v2-brand .sort.on{background:var(--gold-tint);color:var(--gold-deep);font-weight:700}
.count-note{margin-left:auto;font-size:12.5px;color:var(--ink-3)}
.empty{grid-column:1/-1;text-align:center;padding:40px 16px;color:var(--ink-2)}
/* bảng so sánh dòng */
.ctable{width:100%;border-collapse:collapse;font-size:13px}
.ctable th, .ctable td{border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
.ctable th{background:var(--chip);font-weight:700;font-size:12.5px}
.ctable td b{color:var(--ink)}
.tbl-wrap{overflow-x:auto}
/* câu chuyện thương hiệu */
.story{display:grid;grid-template-columns:1fr 1.05fr;gap:34px;align-items:center;padding:34px 0;margin-bottom:12px}
.story-art{position:relative;min-height:320px}
.story-art .ph{position:absolute;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(30,25,15,.18)}
.story-art .ph svg{width:100%;height:100%;display:block}
.story-art .p1{left:0;top:0;width:62%;height:70%}
.story-art .p2{right:0;bottom:0;width:56%;height:76%}
.story h2{margin:0 0 16px;font-size:30px;font-weight:800;letter-spacing:-.9px;line-height:1.25}
.story h2 em{font-style:italic;color:var(--gold-deep)}
.story p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.85;max-width:64ch}
.cert{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--gold-deep);text-transform:uppercase;border-bottom:1.5px solid var(--gold-deep);padding-bottom:5px}
@media(max-width:900px){.story{grid-template-columns:1fr;gap:24px;padding:24px 0}.story h2{font-size:23px}.story-art{min-height:240px}}
/* đánh giá */
.rvsec{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
@media(max-width:900px){.rvsec{grid-template-columns:1fr}}
.rvsec h2{margin:0 0 12px;font-size:26px;font-weight:800;color:var(--gold-deep);letter-spacing:-.7px;line-height:1.25}
.rvsec .lead{margin:0 0 20px;font-size:12.5px;color:var(--ink-2);line-height:1.8}
.score{display:flex;gap:18px;align-items:flex-start}
.score .n{font-size:44px;font-weight:800;color:var(--gold-deep);line-height:1}
.score .st{color:var(--gold-deep);font-size:13px;letter-spacing:2px;margin-top:5px}
.score .cnt{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.score .bars{flex:1;padding-top:5px}
.rvgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.rvgrid{grid-template-columns:1fr}}
.rv{border:1px solid var(--cream-line);border-radius:10px;padding:16px 18px;background:var(--card)}
.rv .top{display:flex;align-items:center;gap:11px}
.rv .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}
.rv .who b{display:block;font-size:13px}
.rv .who small{font-size:10px;letter-spacing:.8px;color:var(--ink-3);text-transform:uppercase}
.rv .st{margin-left:auto;color:var(--gold-deep);font-size:11px;letter-spacing:1px;align-self:flex-start}
.rv .prod{display:block;margin:12px 0 5px;font-size:11.5px;font-weight:700;color:var(--gold-deep)}
.rv p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.65}
/* FAQ + SEO */
.faqs{display:flex;flex-direction:column;gap:10px}
.faqs details{background:var(--cream);border-radius:10px;padding:0 20px}
.faqs summary{padding:17px 0;font-size:14px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faqs summary::after{content:"+";color:var(--ink-3);font-size:19px;line-height:1}
.faqs .ans{padding:0 0 17px;font-size:13px;color:var(--ink-2);line-height:1.8;max-width:88ch}
.seo-body{max-height:150px;overflow:hidden;position:relative;color:var(--ink-2);font-size:13px;line-height:1.8}
.seo-body p{margin:0 0 12px;max-width:78ch}
.seo-body h3{font-size:14px;color:var(--ink);margin:16px 0 6px}
.fade{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--card))}
.seo-toggle{display:block;margin:12px auto 0;color:var(--gold-deep);font-weight:700;font-size:13px}
/* footer + sticky */
.footer{background:var(--card);border-top:1px solid var(--line);margin-top:20px;padding:26px 0 90px}
.pay-i{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pay-i i{font-style:normal;font-size:10.5px;border:1px solid var(--line);border-radius:5px;padding:3px 7px;color:var(--ink-3)}
@media(max-width:760px){.fcols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.stickybar{display:flex}}
/* Anh dai dien cua o dong san pham - mockup dung SVG ve tay, ban that dung
   anh san pham dau tien cua dong do. */

/* So cot luoi - mockup thuong hieu: 5 cot. */
.v2-brand .grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1080px){.v2-brand .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:860px){.v2-brand .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.v2-brand .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Nen o dong san pham: mockup dat gradient theo cap mau cua tung dong bang
   inline style. Rule B1 cam inline style nen moi dong mot class rieng.
   Mau lay dung tu mang LINES[] cua mockup, do mo 33/1F nhu ban goc. */
.v2-brand .line .ph{display:grid;place-items:center}
.v2-brand .line .ph svg{width:62%;height:82%}
.v2-brand .v2-ph-ken{background:linear-gradient(160deg,#F4D9A033,#D9A4411F)}
.v2-brand .v2-ph-carbox{background:linear-gradient(160deg,#DCC49B33,#8A6A3C1F)}
.v2-brand .v2-ph-fresco{background:linear-gradient(160deg,#CFE0EE33,#5F7F9C1F)}
.v2-brand .v2-ph-mon{background:linear-gradient(160deg,#E7D7F233,#9B72C41F)}
.v2-brand .v2-ph-gelcan{background:linear-gradient(160deg,#C9E6F733,#4E96C61F)}
.v2-brand .v2-ph-perfume{background:linear-gradient(160deg,#E6EAF033,#9AA6B61F)}
.v2-brand .v2-ph-sportlux{background:linear-gradient(160deg,#2B3A5533,#0F1B2E1F)}
.v2-brand .v2-ph-combo{background:linear-gradient(160deg,#FFE9B833,#E2A33C1F)}

/* The ban chay: anh san pham that thay SVG cua mockup. */
.v2-brand .bcard .media{overflow:hidden;background:var(--chip)}
.v2-brand .bcard .media img{width:100%;height:100%;object-fit:contain;display:block}
.v2-brand .bcard .nm,.v2-brand .bcard .pr,.v2-brand .bcard .was,
.v2-brand .bcard .suat,.v2-brand .bcard .buy{display:block}
.v2-brand .bcard .suat .track{display:block;position:relative}
.v2-brand .bcard .suat .fill{display:block}

/* Nhan "demo" trong thanh suat: .lbl cua mockup cao 14px va can giua, chu
   demo bi tran ra ngoai. Cho nhan nho lai va nam gon trong thanh. */
.v2-brand .bcard .suat .lbl{gap:4px;grid-auto-flow:column;padding:0 6px;white-space:nowrap}
.v2-brand .bcard .suat .lbl .v2-dm{font-size:8px;padding:0 3px;margin:0;line-height:1.5}
/* Noi dung chi tiet trang thuong hieu (content + Section Builder).
   Kieu chu dung .bl-body cua v2-blog.css; o day chi chinh khung. */
.v2-brand .bdetail{padding:26px 30px}
.v2-brand .bdetail .bl-body > :first-child{margin-top:0}
@media(max-width:700px){.v2-brand .bdetail{padding:18px 16px}}