/* v2-list.css - CSS rieng cho trang DANH SACH san pham phang (/san-pham).
   Trich tu layout-v2/nuochoaoto-danh-sach-san-pham.html.
   Chi bo rule nao TRUNG selector VA trung ca gia tri voi v2-base/v2-category;
   trung ten nhung khac gia tri thi VAN GIU (bai hoc tu cac lan truoc bi mat
   .grid, .panel, .seen-card .pr...). Nap sau hai file kia. */

: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}}
/* 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%}}
/* page head */
.crumb{padding:12px 0 6px;font-size:12.5px;color:var(--ink-3)}
.crumb b{color:var(--ink)}
.phead{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.phead h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.7px}
.phead .cnt{font-size:13px;color:var(--ink-3)}
.phead .cnt b{color:var(--red);font-weight:800}
.promostrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.promostrip 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)}
.promostrip .ic{width:30px;height:30px;border-radius:8px;background:var(--gold-tint);display:grid;place-items:center;color:var(--gold-deep);flex:0 0 auto}
.promostrip b{color:var(--red)}
@media(max-width:800px){.promostrip{grid-template-columns:1fr}}
/* layout */
.cols{display:grid;grid-template-columns:262px minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:980px){.cols{grid-template-columns:1fr}.fpanel{display:none}}
/* filter sidebar */
.fpanel{position:sticky;top:78px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:6px 16px 16px;max-height:calc(100vh - 96px);overflow-y:auto}
.fpanel .ftop{display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--card);z-index:2}
.fpanel .ftop b{font-size:14px}
.fpanel .ftop button{font-size:12px;color:var(--red);font-weight:600}
.fgrp{border-bottom:1px solid var(--line-2)}
.fgrp>summary{padding:14px 0 12px;font-size:13.5px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fgrp>summary::-webkit-details-marker{display:none}
.fgrp>summary::after{content:"⌄";color:var(--ink-3);font-size:15px}
.fgrp[open]>summary::after{content:"⌃"}
.fgrp .body{padding-bottom:14px}
/* Nhom .opt cua BO LOC. Phai boc trong .fpanel: mockup trang chi tiet dung
   lai ten .opt cho o chon dung tich/mui huong nhung y nghia khac han (o vuong
   nam ngang, nhieu o mot hang). De toan cuc thi width:100% o day ep moi o
   ben trang chi tiet chiem tron mot hang. Cung loai loi voi .box va .cols. */
.fpanel .opt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--ink-2);cursor:pointer;width:100%;text-align:left}
.fpanel .opt:hover{color:var(--gold-deep)}
/* O chon trong bo loc. Phai boc trong .fpanel: mockup trang chi tiet cung
   dung ten .box nhung la CAI KHAC (mot the trong cot mua, rong ca cot).
   De .box tran lan thi moi the .box cua trang chi tiet bi ep con 16x16. */
.fpanel .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center}
.fpanel .opt.on .box{background:var(--navy);border-color:var(--navy)}
:root[data-theme="dark"] .fpanel .opt.on .box{background:var(--gold);border-color:var(--gold)}
.fpanel .opt.on .box::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
:root[data-theme="dark"] .fpanel .opt.on .box::after{border-color:var(--navy-2)}
.fpanel .opt.on{color:var(--ink);font-weight:600}
.fpanel .opt .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:400}
/* Mockup chi khai .opt .n; nhom huong dung .sw nen phai them cho no. */
.fpanel .sw .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-weight:400}
.fpanel .radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center}
.fpanel .opt.on .radio{border-color:var(--navy)}
.fpanel .opt.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--navy)}
:root[data-theme="dark"] .opt.on .radio{border-color:var(--gold)}
:root[data-theme="dark"] .opt.on .radio::after{background:var(--gold)}
.prange{display:flex;gap:8px;align-items:center;margin-top:10px}
.prange input{width:100%;height:34px;border:1px solid var(--line);border-radius:7px;padding:0 9px;font-size:12.5px;background:var(--chip);color:var(--ink)}
.prange span{color:var(--ink-3)}
.papply{width:100%;margin-top:9px;background:var(--navy);color:#fff;font-weight:700;font-size:12.5px;border-radius:8px;padding:9px 0}
:root[data-theme="dark"] .papply{background:var(--gold);color:var(--navy-2)}
.fpanel .swatches{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px}
/* .sw / .radio / .swatches cung cua bo loc - boc not cho nhat quan. */
.fpanel .sw{width:100%;display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--ink-2);text-align:left}
.fpanel .sw .dot{width:18px;height:18px;border-radius:50%;flex:0 0 auto;border:2px solid transparent}
.fpanel .sw.on{color:var(--ink);font-weight:600}
.fpanel .sw.on .dot{border-color:var(--navy);box-shadow:0 0 0 2px var(--card) inset}
:root[data-theme="dark"] .sw.on .dot{border-color:var(--gold)}
/* toolbar */
.tool{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 14px;display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.tool .res{font-size:13px;color:var(--ink-2)}
.tool .res b{color:var(--ink)}
.tool .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.tool select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;background:var(--card);color:var(--ink)}
.viewtog{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewtog button{width:36px;height:34px;display:grid;place-items:center;color:var(--ink-3)}
.viewtog button.on{background:var(--navy);color:#fff}
:root[data-theme="dark"] .viewtog button.on{background:var(--gold);color:var(--navy-2)}
.mfilter{display:none;align-items:center;gap:7px;border:1px solid var(--navy);color:var(--navy);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}
:root[data-theme="dark"] .mfilter{color:var(--gold-2);border-color:var(--gold-2)}
@media(max-width:980px){.mfilter{display:flex}}
/* active filters */
.active{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.afc{display:flex;align-items:center;gap:7px;background:var(--gold-tint);color:var(--gold-deep);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}
.afc button{color:var(--gold-deep);font-size:14px;line-height:1}
.clearall{font-size:12.5px;color:var(--red);font-weight:600;padding:6px 4px}
/* grid + list */
.cols .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
:root[data-theme="dark"] .addcart{background:var(--gold);color:var(--navy-2)}
/* list mode */
.cols .grid.list .card{flex-direction:row;gap:16px;padding:12px 16px;align-items:flex-start}
.empty{grid-column:1/-1;text-align:center;padding:48px 16px;color:var(--ink-2);background:var(--card);border-radius:var(--r)}
.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}
.pager{display:flex;justify-content:center;gap:6px;margin-top:14px}
.pager button{min-width:36px;height:36px;border-radius:9px;border:1px solid var(--line);font-size:13px;color:var(--ink-2);padding:0 10px}
.pager button.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
:root[data-theme="dark"] .pager button.on{background:var(--gold);border-color:var(--gold);color:var(--navy-2)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
/* trust + seo */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-top:14px}
.trust .ic{width:34px;height:34px;border-radius:9px;background:var(--gold-tint);display:grid;place-items:center;flex:0 0 auto;color:var(--gold-deep)}
.trust b{display:block;font-size:12.5px;margin-bottom:2px}
@media(max-width:860px){.trust{grid-template-columns:repeat(2,1fr)}}
.seo{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin-top:12px}
.seo h2{margin:0 0 10px;font-size:16px}
.seo-body{max-height:130px;overflow:hidden;position:relative;font-size:13px;color:var(--ink-2);line-height:1.8}
.seo-body h3{font-size:13.5px;color:var(--ink);margin:14px 0 6px}
.seo-toggle{display:block;margin:10px auto 0;color:var(--gold-deep);font-weight:700;font-size:13px}
.drawer .sheet{position:absolute;right:0;top:0;bottom:0;width:min(340px,90vw);background:var(--card);overflow-y:auto;padding:0 16px 96px}
.drawer .dbot{position:fixed;bottom:0;right:0;width:min(340px,90vw);background:var(--card);border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;gap:8px}
.drawer .dbot button{flex:1;border-radius:9px;padding:11px 0;font-weight:700;font-size:13.5px}
.drawer .dbot .rs{border:1px solid var(--line);color:var(--ink-2)}
.drawer .dbot .ok{background:var(--navy);color:#fff}
:root[data-theme="dark"] .drawer .dbot .ok{background:var(--gold);color:var(--navy-2)}
/* compare + sticky + toast */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:75;background:var(--navy);color:#fff;transform:translateY(120%);transition:transform .2s ease;padding:11px 14px calc(11px + env(safe-area-inset-bottom))}
.cmpbar .items{flex:1;font-size:12.5px;color:#D7E1F0;min-width:170px}
@media(max-width:860px){.stickybar{display:flex}}
/* ===== BO SUNG cho trang danh sach phang ===== */

/* Sap xep: dung <select> giong mockup, boc trong <form> de chay duoc ca khi
   tat JS. Form khong duoc pha layout cua .tool. */
.tool .right{min-width:0;gap:10px}
.v2-sortform{display:flex;align-items:center;gap:6px;margin:0}
.v2-sort-go{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-size:12.5px;background:var(--card)}
/* Nut doi kieu xem: mockup dung <button>, o day dung <a> de giu duoc URL
   (chuyen trang hoac doi bo loc van nho lua chon). */
.viewtog a{width:36px;height:34px;display:grid;place-items:center;color:var(--ink-3)}
.viewtog a.on{background:var(--navy);color:#fff}
/* Kieu xem danh sach: chep dung rule cua mockup
   (layout-v2/nuochoaoto-danh-sach-san-pham.html, khoi ".grid.list").
   Mockup doi ca MARKUP o che do nay chu khong chi doi CSS: the chia 3 cot
   anh (.media) | noi dung (.bd) | gia + nut mua (.buycol). v2_product_card()
   nhan tham so $listMode de dung ra dung cau truc do. */
.cols .grid.list{grid-template-columns:1fr;gap:10px}
.cols .grid.list .card{flex-direction:row;gap:16px;padding:12px 16px;align-items:flex-start}
.cols .grid.list .media{width:150px;flex:0 0 auto;margin-bottom:0;aspect-ratio:1/1}
.cols .grid.list .bd{flex:1;min-width:0;display:flex;flex-direction:column}
.cols .grid.list .rib{position:absolute;top:10px;right:16px;margin:0}
/* Ribbon o che do danh sach nam de len goc phai, ngay tren cot mua.
   Chu cua ta dai hon mockup (co them nhan demo) nen phai chua cho: day dong
   dau cua .buycol xuong duoi ribbon thay vi de hai cai chong len nhau. */
.cols .grid.list .buycol{padding-top:22px;justify-content:flex-start}
.cols .grid.list .pname{font-size:15px;font-weight:700;min-height:0;margin-bottom:8px;max-width:60ch}
.cols .grid.list .specs{font-size:12.5px}
.cols .grid.list .buycol{flex:0 0 190px;border-left:1px dashed var(--line-2);padding-left:16px;display:flex;flex-direction:column;justify-content:center}
.cols .grid.list .foot{border-top:0;padding-top:0;margin-top:10px;justify-content:flex-start;gap:14px}
@media(max-width:820px){
  .cols .grid.list .card{flex-wrap:wrap}
  .cols .grid.list .media{width:108px}
  .cols .grid.list .buycol{flex-basis:100%;border-left:0;border-top:1px dashed var(--line-2);padding:12px 0 0}
}

/* Bo loc ben trai: moi lua chon la mot link. */
:root[data-theme="dark"] .fpanel .opt.on,
:root[data-theme="dark"] .fpanel .sw.on{color:var(--gold-2)}
.fpanel .ftop a{font-size:12px;color:var(--navy);font-weight:600}
:root[data-theme="dark"] .fpanel .ftop a{color:var(--gold-2)}

/* Phan trang: mockup dung <button>, o day dung <a> + <span> cho trang hien
   tai va nut bi vo hieu. */
.pager a,.pager span{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink-2);background:var(--card)}
.pager .on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}
.pager .v2-pg-off{opacity:.4}

/* Mobile: cot loc an, nut "Bo loc" mo ra. */
@media(max-width:900px){
  .fpanel{display:none}
.fpanel.open{display:block}
}

/* ===== NHOM LOC CHUA CO DU LIEU THAT (clone demo) =====
   Chi hien khi ?demo=1. Danh dau ro de khong nham voi bo loc that.
   Chi tiet: section-chua-co-data-hashcode.md */
.v2-demo-filter{opacity:.62}
/* Nhom loc clone demo: nhin giong hang that cua mockup (o chon + chu cung
   mot hang), chi khac la khong bam duoc. Phai giu display:flex nhu .opt -
   truoc day de display:block nen o chon bi day xuong dong rieng. */
.v2-demo-filter .opt.is-demo{padding:6px 0;font-size:13px;color:var(--ink-3);cursor:not-allowed}
.v2-demo-tag{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-tint);border-radius:4px;padding:1px 5px;margin-left:6px}

/* ===== CHAM MAU NHOM HUONG =====
   Mockup dung .opt (o vuong) va .sw (cham tron) - CSS da co san o tren.
   Truoc day tu dat .fopt/.fbox/.fdot nen chu bi to va dam hon mockup
   (14px/mau ink thay vi 13px/mau ink-2). Da bo, dung dung class mockup.
   Chi con phan mau cham la mockup dat inline nen phai khai o day (rule B1). */
.v2-dot-woody{background:#6B5334}
.v2-dot-orientalperfume{background:#8A6A3B}
.v2-dot-gourmand{background:#E0A3B8}
.v2-dot-floral{background:#E0A3B8}
.v2-dot-fruitycitrus{background:#5AA3C8}
.v2-dot-aquamarine{background:#5AA3C8}
.v2-dot-herbalspicy{background:#7FA36B}
.v2-dot-coffee{background:#6B4A2F}
.v2-dot-leather{background:#8B6B4A}

/* ===== BO SUNG CHO THE SAN PHAM ===== */

/* Thanh "chi con N san pham gia uu dai" - mockup dung inline style cho
   chieu rong, o day chia thanh cac buoc 10% de theo rule B1. */
.v2-suat-txt{font-size:11px;color:var(--ink-3);margin:-2px 0 8px}
.v2-fill-0{width:5%}   .v2-fill-10{width:10%}  .v2-fill-20{width:20%}
.v2-fill-30{width:30%} .v2-fill-40{width:40%}  .v2-fill-50{width:50%}
.v2-fill-60{width:60%} .v2-fill-70{width:70%}  .v2-fill-80{width:80%}
.v2-fill-90{width:90%} .v2-fill-100{width:100%}

/* "Da ban 5,3k" mau nhat hon diem sao. */
.foot .v2-sold{color:var(--ink-3);font-weight:400}



/* CSS cu (bootstrap) dat color cho <article> -> the .card thua huong
   rgb(33,37,41) thay vi var(--ink) rgb(27,36,48) cua thiet ke.
   Mockup khong can dat vi khong nap CSS cu; o day phai dat lai ro rang. */


/* Mockup de .pname thua huong margin-top mac dinh cua <h3> (13px).
   CSS cu reset margin ve 0 nen phai dat lai. */
.card .pname{margin-top:13px}

.cols .grid.list .card .pname{-webkit-line-clamp:2;min-height:0}

/* So cot luoi - mockup danh sach phang: 4 cot. Boc trong .cols de khong de
   len trang danh muc (hai file cung nap tren controller product). */
.cols .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1180px){.cols .grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.cols .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}