/* ============================================================================
   Ngôi Sao PC — MỘT file CSS duy nhất cho toàn bộ trang bán hàng
   Font Roboto · biến màu gốc --navy · responsive kiểm ở 390px
   ============================================================================ */

:root{
  --navy:#d62828;              /* màu thương hiệu */
  --navy-d:#a81f1f;
  --navy-l:#fdecec;
  --ink:#14181d;
  --ink-2:#3b444e;
  --mut:#707b86;
  --line:#e6e9ed;
  --line-2:#f1f3f5;
  --bg:#ffffff;
  --bg-2:#f6f7f9;
  --ok:#15803d;
  --ok-bg:#eaf7ef;
  --warn:#b45309;
  --warn-bg:#fff7e6;
  --err:#c0281f;
  --dark:#1b2530;
  --dark-line:#2b3846;
  --r:10px;
  --r-lg:14px;
  --sh:0 1px 2px rgba(16,24,40,.06),0 4px 14px rgba(16,24,40,.06);
  --sh-2:0 10px 34px rgba(16,24,40,.14);
  --wrap:1280px;
  --hd-h:166px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Arial,"Helvetica Neue",Helvetica,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.43;overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg.ic{flex:none;vertical-align:middle}

/* số liệu thẳng hàng, đồng hồ không nhảy — KHÔNG dùng font monospace */
.num,.price-now,.price-old,.money,.count,.tm,.stat-v,td.num,.ord-total{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================ HEADER ==================================== */
/* min-height cố định theo từng khoảng màn hình -> trang không giật khi tải */
#site-header{display:block;min-height:var(--hd-h);background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:40}

.topbar{background:var(--dark);color:#cdd6e0;font-size:12.5px;height:34px}
.topbar-in{display:flex;align-items:center;gap:22px;height:34px}
.tb-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tb-hot{margin-left:auto;color:#fff;font-weight:700}

/* Hàng logo: 3 cột bằng nhau nên logo nằm chính giữa dù hai bên dài ngắn khác nhau */
.hd-main{background:#fff;padding:10px 0 12px}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.hd-l{display:flex;align-items:center;justify-self:start}
.hd-r{display:flex;align-items:center;gap:6px;justify-self:end}
.hd-burger{display:none;padding:6px;margin-left:-6px;color:var(--ink)}
.logo{display:flex;align-items:center;justify-content:center;justify-self:center;flex:none}
.logo-mark{width:78px;height:78px;border-radius:16px;background:var(--navy);color:#fff;display:grid;place-items:center}
.logo-mark .ic{width:38px;height:38px}
.logo-img{height:80px;width:auto;max-width:300px;object-fit:contain}
.logo-txt{display:none}          /* tên shop chỉ còn ở thẻ trình duyệt */

/* Ô tìm kiếm chiếm trọn một hàng riêng bên dưới logo */
.hd-srow{padding-bottom:12px}
.hd-search{width:100%;min-width:0;display:flex;height:44px;border:1.6px solid var(--navy);border-radius:999px;overflow:hidden;background:#fff}
.hd-search input{flex:1;min-width:0;border:0;outline:none;padding:0 18px;font-size:14.5px;background:transparent}
.hd-search button{width:54px;background:var(--navy);color:#fff;display:grid;place-items:center}

.hd-act{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);font-size:13px;font-weight:600;color:var(--ink-2)}
.hd-act:hover{background:var(--bg-2)}
.hd-hot span{display:flex;flex-direction:column;line-height:1.1;font-weight:800;color:var(--navy)}
.hd-cart{position:relative}
.cart-dot{position:absolute;top:0;left:26px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}

.hd-nav{height:46px;background:#fff;border-top:1px solid var(--line-2)}
.hd-nav-in{display:flex;align-items:center;gap:22px;height:46px;overflow-x:auto;scrollbar-width:none}
.hd-nav-in::-webkit-scrollbar{display:none}
.nav-main{display:flex;gap:4px;flex:none}
.nav-a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav-a:hover{background:var(--bg-2)}
.nav-a.on{background:var(--navy-l);color:var(--navy)}
.nav-cats{display:flex;gap:16px;font-size:13.5px;color:var(--mut);white-space:nowrap}
.nav-cats a:hover{color:var(--navy)}

/* drawer mobile */
.drawer{position:fixed;inset:0;z-index:90}
.drawer-bg{position:absolute;inset:0;background:rgba(10,14,20,.5)}
.drawer-panel{position:absolute;inset:0 auto 0 0;width:min(84vw,320px);background:#fff;display:flex;flex-direction:column;overflow-y:auto;animation:slideIn .2s ease}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:none}}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:16px}
.drawer-sec{padding:8px 0;border-bottom:1px solid var(--line-2)}
.drawer-t{padding:8px 16px 4px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.drawer-sec a{display:flex;align-items:center;gap:11px;padding:11px 16px;font-size:14.5px;font-weight:500}
.drawer-sec a.on{color:var(--navy);font-weight:700;background:var(--navy-l)}

/* ============================ FOOTER ==================================== */
#site-footer{margin-top:52px;background:var(--dark);color:#b9c4d0;font-size:13.5px}
.ft-in{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:30px;padding:38px 16px}
.ft-col{min-width:0}
.ft-logo{display:flex;align-items:center;gap:8px;color:#fff;font-size:17px;margin-bottom:10px}
.ft-intro{margin-bottom:12px;line-height:1.65}
.ft-line{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.ft-t{color:#fff;font-weight:700;margin-bottom:12px;font-size:14.5px}
.ft-col a{display:block;padding:4px 0}
.ft-col a:hover{color:#fff}
.ft-bot{border-top:1px solid #2b3846;padding:14px 0;font-size:12.5px;text-align:center}

/* ============================ TOAST ===================================== */
#toast-wrap{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;gap:9px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;max-width:min(92vw,400px);padding:11px 15px;border-radius:var(--r);background:var(--dark);color:#fff;font-size:13.5px;box-shadow:var(--sh-2);opacity:0;transform:translateY(10px);transition:.26s}
.toast.on{opacity:1;transform:none}
.toast-ic{display:grid;place-items:center;color:#7ee2a8}
.toast-err{background:#7e1d15}
.toast-err .toast-ic{color:#ffb4ab}
.toast-msg{min-width:0}

/* ============================ NÚT / FORM ================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);font-weight:700;font-size:14.5px;border:1px solid transparent;transition:.15s}
.btn-pri{background:var(--navy);color:#fff}
.btn-pri:hover{background:var(--navy-d)}
.btn-dark{background:var(--dark);color:#fff}
.btn-out{border-color:var(--line);background:#fff;color:var(--ink)}
.btn-out:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost{color:var(--ink-2)}
.btn-ghost:hover{background:var(--bg-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%}
.btn-sm{height:36px;padding:0 13px;font-size:13px}

.fld{margin-bottom:14px;min-width:0}
.fld label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.fld label i{color:var(--navy);font-style:normal}
.inp,.sel,.txa{width:100%;height:44px;padding:0 13px;border:1px solid var(--line);border-radius:var(--r);background:#fff;outline:none;font-size:14.5px;transition:.15s}
.txa{height:auto;padding:11px 13px;resize:vertical;min-height:88px;line-height:1.55}
.inp:focus,.sel:focus,.txa:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-l)}
.inp.bad,.sel.bad{border-color:var(--err);box-shadow:0 0 0 3px #fdeceb}
.sel{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707b86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 9 7 7 7-7'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:18px;padding-right:36px}
.hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0}

/* ============================ KHỐI CHUNG ================================ */
.sec{margin-top:34px}
.sec-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.sec-t{font-size:20px;font-weight:700;letter-spacing:-.2px;display:flex;align-items:center;gap:9px}
.sec-t .ic{color:var(--navy)}
.sec-more{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;color:var(--navy)}
.crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mut);padding:14px 0;flex-wrap:wrap}
.crumb a:hover{color:var(--navy)}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-width:0}
.empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:52px 16px;color:var(--mut);text-align:center}

/* ============================ LƯỚI SẢN PHẨM ============================= */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px;min-width:0}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.18s;min-width:0}
.card:hover{border-color:var(--navy);box-shadow:var(--sh);transform:translateY(-2px)}
.card .card-img{display:block}
.card-img{position:relative;aspect-ratio:1/1;background:#fff;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:contain;padding:0;display:block;transition:transform .35s ease}
.card:hover .card-img img{transform:scale(1.06)}
.badge-sale{position:absolute;top:8px;left:8px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:800;padding:3px 7px;border-radius:6px}
.badge-tag{position:absolute;top:8px;right:8px;background:var(--dark);color:#fff;font-size:10.5px;font-weight:700;padding:3px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.card-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.card-name{display:-webkit-box;font-size:13.5px;font-weight:500;line-height:1.42;height:2.84em;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-name:hover{color:var(--navy)}
.card-colors{display:flex;align-items:center;gap:5px}
.cdot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.16);display:block}
.cmore{font-size:11px;color:var(--mut);font-style:normal}
.card-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price-now{font-size:16px;font-weight:700;color:var(--navy)}
.price-old{font-size:12.5px;color:var(--mut);text-decoration:line-through}
.card-specs{display:flex;flex-wrap:wrap;gap:5px}
.spec-bg{display:inline-flex;align-items:center;gap:5px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:5px;padding:3px 7px;font-size:11px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.spec-bg img{height:12px;width:auto;max-width:16px;object-fit:contain;display:block;opacity:.75}
.card-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut)}
.card-acts{display:flex;gap:7px;margin-top:auto;padding-top:10px}
.card-cart{flex:none;width:40px;height:38px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--navy);background:#fff}
.card-cart:hover{border-color:var(--navy);background:var(--navy-l)}
.card-buy{flex:1;min-width:0;height:38px;border-radius:8px;background:var(--navy);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.card-buy:hover{background:var(--navy-d)}
.stars{display:inline-flex;align-items:center;gap:3px;color:#e8a317}
.card.sk{pointer-events:none}
.card.sk .card-img{background:linear-gradient(90deg,#f1f3f5,#e9ecef,#f1f3f5);background-size:200% 100%;animation:sh 1.2s infinite}
.skl{display:block;height:12px;border-radius:5px;background:#eef0f3;animation:sh 1.2s infinite;background-image:linear-gradient(90deg,#f1f3f5,#e9ecef,#f1f3f5);background-size:200% 100%}
.skl.w60{width:60%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================ TRANG CHỦ ================================= */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;margin-top:16px}
.slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);aspect-ratio:1120/420}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:grid}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(transparent,rgba(12,16,22,.82));color:#fff}
.slide-cap b{display:block;font-size:22px;font-weight:700}
.slide-cap span{font-size:13.5px;opacity:.9}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:.2s}
.dots i.on{background:#fff;width:22px;border-radius:4px}
.hero-side{display:flex;flex-direction:column;gap:14px}
.hero-card{flex:1;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);position:relative;min-height:100px}
.hero-card img{width:100%;height:100%;object-fit:cover}

/* ---------- menu danh mục dạng dọc, xổ bảng con sang phải ---------- */
.catmenu{position:relative;min-width:0}
.catmenu-bar{display:flex;align-items:center;gap:12px;width:100%;height:52px;padding:0 18px;
  border-radius:var(--r-lg);background:var(--navy);color:#fff;font-size:15.5px;font-weight:800;
  letter-spacing:.01em;box-shadow:0 6px 18px rgba(214,40,40,.22);transition:.18s}
.catmenu-bar:hover{background:var(--navy-d)}
.catmenu.open .catmenu-bar{border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none}
.cm-burger{display:grid;place-items:center;flex:none}
.cm-ttl{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-n{flex:none;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px}
.cm-caret{flex:none;display:grid;place-items:center;transition:transform .22s}
.catmenu.open .cm-caret{transform:rotate(180deg)}

.catmenu-panel{position:relative;display:grid;grid-template-columns:286px minmax(0,1fr);
  border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
  background:#fff;overflow:hidden;box-shadow:var(--sh);animation:cmIn .18s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.cm-list{border-right:1px solid var(--line-2);padding:5px 0;min-width:0}
.cm-item{position:relative;min-width:0}
.cm-link{display:flex;align-items:center;gap:11px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink-2);min-width:0}
.cm-ic{flex:none;width:30px;height:30px;border-radius:9px;background:var(--bg-2);color:var(--navy);display:grid;place-items:center;transition:.16s}
.cm-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-go{flex:none;color:var(--mut);display:grid;place-items:center;transition:transform .16s}
.cm-item:hover .cm-link,.cm-item.on .cm-link{background:var(--navy-l);color:var(--navy)}
.cm-item:hover .cm-ic,.cm-item.on .cm-ic{background:var(--navy);color:#fff}
.cm-item.on .cm-go{transform:translateX(3px);color:var(--navy)}

.cm-fly{padding:18px 20px;min-width:0;align-self:start}
.cm-sub{display:none}
.fly-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line-2);margin-bottom:13px}
.fly-hd b{font-size:16px;font-weight:700}
.fly-hd a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--navy)}
.fly-t{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:14px 0 9px}
.fly-t:first-of-type{margin-top:0}
.fly-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.fly-b{height:46px;border:1px solid var(--line);border-radius:9px;background:#fff;
  display:grid;place-items:center;padding:6px 8px;min-width:0;transition:.16s}
.fly-b:hover{border-color:var(--navy);box-shadow:var(--sh)}
.fly-b img{max-width:100%;max-height:100%;object-fit:contain}
.fly-b .blabel{display:none;font-style:normal;font-size:12px;font-weight:700;color:var(--ink-2);
  text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fly-b .blabel.show,.fly-b.logo-fail .blabel{display:block}
.fly-prices{display:flex;flex-wrap:wrap;gap:8px}
.fly-p{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink-2);background:#fff;transition:.16s}
.fly-p:hover{border-color:var(--navy);background:var(--navy-l);color:var(--navy)}
.fly-hot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fly-hc{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;min-width:0;display:block;transition:.16s}
.fly-hc:hover{border-color:var(--navy);box-shadow:var(--sh);transform:translateY(-2px)}
.fly-hc-i{display:block;aspect-ratio:1/1;background:#fff;border-radius:7px;overflow:hidden;margin-bottom:7px}
.fly-hc-i img{width:100%;height:100%;object-fit:contain;display:block}
.fly-hc b{display:-webkit-box;font-size:12px;font-weight:500;line-height:1.38;height:2.76em;overflow:hidden;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--ink-2)}
.fly-hc em{display:block;margin-top:5px;font-style:normal;font-size:13px;font-weight:700;color:var(--navy)}
/* Bảng mặc định bên phải: 6 sản phẩm cao cấp nhất.
   Ảnh để chiều cao cố định (không dùng aspect-ratio) để bảng bên phải
   không cao vọt hơn danh sách danh mục bên trái. */
.fly-hot-top{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fly-hot .fly-hc-i{aspect-ratio:auto;height:96px}
.fly-hot-top .fly-hc-i{height:118px}
.cm-fly .fly-hd b{display:inline-flex;align-items:center;gap:7px}
.cm-fly .fly-hd b .ic{color:var(--navy)}
.cm-fly .fly-t{text-transform:none;letter-spacing:0}


.sale-strip{background:linear-gradient(135deg,var(--navy),var(--navy-d));border-radius:var(--r-lg);padding:16px 18px;color:#fff;margin-bottom:0}
.sale-strip-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sale-ttl{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700}
.cd{display:flex;align-items:center;gap:7px;font-size:13px}
.cd .tm{background:rgba(0,0,0,.28);padding:5px 11px;border-radius:7px;font-weight:800;font-size:15px;letter-spacing:.04em}
.sale-strip .grid{margin-top:14px}
.sale-strip .card{border-color:transparent}

.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{padding:7px 15px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2);background:#fff}
.tab.on{background:var(--navy);border-color:var(--navy);color:#fff}

.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
.trust-i{display:flex;gap:11px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;min-width:0}
.trust-i .ic{color:var(--navy);flex:none}
.trust-i b{display:block;font-size:13.5px}
.trust-i span{font-size:12px;color:var(--mut)}

/* ============================ DANH MỤC ================================== */
/* --- banner đầu trang --- */
.cat-hero{position:relative;overflow:hidden;border-radius:10px;background:#07090b;color:#fff;margin-bottom:18px;min-height:214px;display:flex;align-items:center}
.cat-hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 120% at 82% 50%,rgba(118,185,0,.22),transparent 60%),
  radial-gradient(ellipse 50% 100% at 96% 20%,rgba(118,185,0,.16),transparent 62%),
  linear-gradient(100deg,#000 0%,#0a0d10 46%,#10161a 74%,#1b2a17 100%)}
.cat-hero-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.045) 47%,transparent 48%),
             linear-gradient(72deg,transparent 62%,rgba(118,185,0,.10) 63%,transparent 65%)}
.cat-hero-in{position:relative;padding:30px 34px;max-width:64%;min-width:0}
.cat-hero-in h1{font-size:44px;font-weight:700;letter-spacing:-1px;line-height:1.02;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.cat-hero-in p{margin-top:9px;font-size:17px;font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.9);text-transform:uppercase}
.cat-hero-cta{display:inline-flex;align-items:center;gap:9px;margin-top:20px;height:44px;padding:0 26px;border:2px solid rgba(255,255,255,.85);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cat-hero-cta:hover{background:#fff;color:#07090b}
.cat-hero-ic{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.10);pointer-events:none}

/* --- thanh lọc ngang --- */
.cat-title{font-size:23px;font-weight:700;letter-spacing:-.3px;margin:18px 0 12px}
.cat-title em{font-style:normal;font-weight:700;color:var(--mut);font-size:18px}

.filterbar{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:4px 14px;margin-bottom:14px}
.fb-row{display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2);min-width:0}
.fb-row:last-child{border-bottom:0}
.fb-lb{flex:none;width:96px;padding-top:6px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.fb-chips{display:flex;gap:7px;flex-wrap:wrap;min-width:0;flex:1}
.fchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:.14s}
.fchip:hover{border-color:var(--navy);color:var(--navy)}
.fchip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fchip-b{font-weight:700;letter-spacing:.01em}
/* chip có logo thật của hãng */
.fchip-logo{height:46px;min-width:112px;padding:0 16px;justify-content:center;background:#fff;border-radius:8px;border-color:var(--line)}
.fchip-logo:hover{box-shadow:var(--sh)}
.fchip-logo img{height:24px;width:auto;max-width:92px;object-fit:contain;display:block}
.fchip-logo .blabel{display:none;font-style:normal;font-size:13px;font-weight:800;color:var(--ink-2)}
/* ảnh logo hỏng -> hiện lại tên hãng bằng chữ, ô không bị trống */
.fchip-logo.logo-fail .blabel{display:inline}
.fchip-logo.on{background:var(--navy);border-color:var(--navy)}
.fchip-logo.on .blabel{color:#fff}
.fchip-logo.on img{filter:brightness(0) invert(1)}      /* logo đổi sang trắng khi chip đang bật */
.fchip-more{font-weight:700;color:var(--navy);border-style:dashed}
.chip-clear{font-size:12.5px;font-weight:600;color:var(--mut);text-decoration:underline;padding:5px 2px}
.chip-clear:hover{color:var(--navy)}

/* --- nút xem thêm --- */
.sortbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
.sortbar-lb{font-size:13.5px;font-weight:700;color:var(--ink-2);flex:none}
.sort-chips{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.sort-chip .ic{color:var(--mut)}
.sort-chip.on .ic{color:#fff}

.more-wrap{display:flex;justify-content:center;margin-top:24px}
.btn-more{height:46px;padding:0 26px;font-size:14px}
.btn-more em{font-style:normal;color:var(--mut);font-weight:500}
.more-done{font-size:13px;color:var(--mut)}

/* --- bài tư vấn cuối trang --- */
.cat-article{margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.art-hd{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.art-hd h2{font-size:21px;font-weight:700;letter-spacing:-.2px}
.art-hd .ic{color:var(--navy)}
.art-body{max-width:860px}
.art-body h2{font-size:19px;font-weight:800;margin:26px 0 10px;padding-left:12px;border-left:3px solid var(--navy);line-height:1.3}
.art-body h3{font-size:15.5px;font-weight:700;margin:16px 0 6px;color:var(--ink)}
.art-body p{margin:0 0 11px}
.art-body ul,.art-body ol{margin:0 0 12px;padding-left:20px}
.art-body ul{list-style:disc}
.art-body ol{list-style:decimal}
.art-body li{margin-bottom:5px}
.art-body b{color:var(--ink)}

.cat-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:20px;align-items:start}
.filters{position:sticky;top:14px;min-width:0}
.f-block{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:12px;background:#fff}
.f-t{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:10px}
.f-list{display:flex;flex-direction:column;gap:2px;max-height:262px;overflow:auto}
.f-list a,.f-list button{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13.5px;text-align:left;width:100%}
.f-list a:hover,.f-list button:hover{background:var(--bg-2)}
.f-list .on{background:var(--navy-l);color:var(--navy);font-weight:700}
.f-toggle{display:none}
.cat-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cat-count{font-size:13.5px;color:var(--mut)}
.sortbar{display:flex;align-items:center;gap:8px}
.sortbar .sel{height:38px;width:auto;min-width:168px}
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:26px;flex-wrap:wrap}
.pager button{min-width:38px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;font-size:13.5px;font-weight:600;background:#fff}
.pager button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pager button:disabled{opacity:.4}
.chipbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:var(--navy-l);color:var(--navy);font-size:12.5px;font-weight:600}
.chip button{display:grid;place-items:center;color:inherit}

/* ============================ CHI TIẾT SP =============================== */
.pd{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:30px;align-items:start;margin-top:8px}
.pd-gal{min-width:0;position:sticky;top:14px}

/* khay ảnh dọc bên trái + ảnh lớn */
.pd-stage{position:relative;min-width:0}
.pd-stage.has-rail .pd-main{margin-left:87px}
.pd-rail{position:absolute;top:0;bottom:0;left:0;width:76px;display:flex;flex-direction:column;gap:5px}
.rail-nav{height:24px;flex:none;border:1px solid var(--line);border-radius:7px;background:#fff;display:grid;place-items:center;color:var(--ink-2)}
.rail-nav:hover{border-color:var(--navy);color:var(--navy)}
.rail-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;scrollbar-width:none}
.rail-list::-webkit-scrollbar{display:none}
.rail-list button{width:76px;height:76px;flex:none;border:1.6px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.rail-list button.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy-l)}
.rail-list img{width:100%;height:100%;object-fit:contain;display:block}
.pd-main{position:relative;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:1/1}
.pd-main img{width:100%;height:100%;object-fit:contain;padding:0;display:block}
.pd-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-2);box-shadow:0 2px 8px rgba(0,0,0,.09)}
.pd-arrow:hover{color:var(--navy);border-color:var(--navy)}
.pd-arrow.prev{left:9px}
.pd-arrow.next{right:9px}
.pd-count{position:absolute;right:11px;bottom:11px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:20px;font-variant-numeric:tabular-nums}

/* 3 ô nhảy nhanh dưới ảnh */
.pd-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
.pd-jump a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:11.5px;font-weight:600;line-height:1.35;text-align:center;color:var(--ink-2)}
.pd-jump a:hover{border-color:var(--navy);color:var(--navy)}
.pd-jump .ic{color:var(--navy)}

/* 4 ô chính sách */
.pd-policy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:11px}
.pd-policy p{display:flex;gap:8px;align-items:center;font-size:12.5px;border:1px solid var(--line);border-radius:10px;padding:10px 11px;min-width:0}
.pd-policy .ic{color:var(--navy);flex:none}
.pd-policy span{min-width:0;overflow-wrap:anywhere}
.pd-policy a{color:var(--navy);font-weight:600}

.pd-info{min-width:0}
.pd-name{font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.2px}
.pd-sku{font-size:13px;color:var(--mut);margin-top:9px}
.pd-sku b{color:var(--ink);font-weight:700}
.pd-rate{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--mut);margin-top:6px}
.pd-rate em{font-style:normal;font-weight:700;color:var(--ink-2)}
.pd-sku .sep,.pd-rate .sep{color:var(--line-2)}
.pd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:13px}
.pd-price .now{font-size:30px;font-weight:700;color:var(--navy);line-height:1}
.pd-price .old{font-size:15px;color:var(--mut);text-decoration:line-through}
.pd-price .off{background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;padding:3px 8px;border-radius:6px}

/* khối khuyến mãi */
.promo-box{margin-top:15px;border:1px solid var(--line);border-radius:var(--r-lg);padding:13px 15px 15px}
.promo-hd{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--navy);padding:8px 11px;border-radius:8px;background:linear-gradient(90deg,var(--navy-l),#fff)}
.promo-hd-2{margin-top:13px}
.promo-hd .ic{flex:none}
.promo-list{margin:9px 0 0;padding:0 0 0 4px;list-style:none;display:grid;gap:7px}
.promo-list li{position:relative;padding-left:20px;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.promo-list li::before{content:'✓';position:absolute;left:0;top:0;color:#2f9e44;font-weight:700}
.promo-list.num{counter-reset:pl}
.promo-list.num li{counter-increment:pl}
.promo-list.num li::before{content:counter(pl) '.';color:var(--ink-2);font-weight:700}
.promo-list a{color:var(--navy);font-weight:700}
.pd-call{margin-top:13px;font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pd-call .ic{color:var(--navy);flex:none}
.pd-call b{color:var(--navy);font-weight:800}

.pd-opt{margin-top:16px}
.pd-opt-t{font-size:13px;font-weight:700;margin-bottom:9px;display:flex;gap:7px;align-items:center}
.pd-opt-t em{font-style:normal;color:var(--mut);font-weight:500}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{min-width:56px;height:40px;padding:0 14px;border:1.6px solid var(--line);border-radius:9px;background:#fff;font-size:13.5px;font-weight:600}
.opt.on{border-color:var(--navy);background:var(--navy-l);color:var(--navy)}
.sw{width:42px;height:42px;border:2px solid var(--line);border-radius:9px;padding:3px;background:#fff}
.sw i{display:block;width:100%;height:100%;border-radius:5px;border:1px solid rgba(0,0,0,.12)}
.sw.on{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-l)}
.qty{display:inline-flex;align-items:center;border:1.6px solid var(--line);border-radius:9px;overflow:hidden;height:48px;flex:none}
.qty button{width:40px;height:100%;display:grid;place-items:center;color:var(--ink-2)}
.qty input{width:48px;height:100%;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-weight:700;outline:none;font-variant-numeric:tabular-nums}

.pd-qty-t{margin-top:18px;font-size:13px;font-weight:700}
.pd-actions{display:flex;gap:10px;margin-top:9px;align-items:stretch;flex-wrap:wrap}
.pd-add{flex:none;width:62px;height:48px;border:1.6px solid var(--navy);border-radius:9px;background:var(--navy-l);color:var(--navy);display:grid;place-items:center}
.pd-add:hover{background:var(--navy);color:#fff}
.pd-add i{display:none}
.pd-buy-now{flex:1;min-width:170px;height:48px;border-radius:9px;background:var(--navy);color:#fff;font-size:15px;font-weight:700;letter-spacing:.04em}
.pd-buy-now:hover{background:var(--navy-d)}

/* các khối nội dung dưới */
.pd-sec{margin-top:30px}
.pd-sec-t{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding-bottom:10px;border-bottom:2px solid var(--line);margin-bottom:14px}
.pd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.spec-wrap,.desc-wrap{position:relative;min-width:0}
.spec-wrap.clipped,.desc-wrap.clipped{max-height:296px;overflow:hidden}
.spec-wrap.clipped::after,.desc-wrap.clipped::after{content:'';position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff);pointer-events:none}
.spec-more{display:flex;justify-content:center;margin-top:12px}
.spec-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-grp{background:var(--navy-l);color:var(--navy);font-size:13px;font-weight:800;padding:9px 13px}
.spec-card .spec-tb th,.spec-card .spec-tb td{border-left:0;border-right:0}
.spec-tb{width:100%;border-collapse:collapse;font-size:14px}
.spec-tb th,.spec-tb td{padding:10px 13px;border:1px solid var(--line);text-align:left;vertical-align:top}
.spec-tb th{background:var(--bg-2);width:36%;font-weight:600;color:var(--ink-2)}
.desc-html{font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.desc-html h3{font-size:16px;margin:16px 0 8px;color:var(--ink)}
.desc-html p{margin:0 0 10px}
.desc-html ul{list-style:disc;padding-left:20px;margin:0 0 10px}

/* ============================ GIỎ HÀNG ================================== */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:8px}
.cart-line{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:13px;padding:14px 0;border-bottom:1px solid var(--line-2);align-items:center}
.cart-line:last-child{border-bottom:0}
.cart-img{width:88px;height:88px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.cart-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.cart-mid{min-width:0}
.cart-nm{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:4px}
.cart-var{display:flex;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-bottom:8px}
.cart-var span{background:var(--bg-2);padding:2px 8px;border-radius:6px}
.cart-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.cart-amt{font-size:15.5px;font-weight:700;color:var(--navy)}
.lnk-del{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--mut)}
.lnk-del:hover{color:var(--err)}
.sum{position:sticky;top:14px}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px}
.sum-row.big{border-top:1px solid var(--line);margin-top:6px;padding-top:13px;font-size:16px;font-weight:700}
.sum-row.big span:last-child{color:var(--navy);font-size:20px}
.note-ship{font-size:12.5px;color:var(--ok);background:var(--ok-bg);padding:8px 11px;border-radius:8px;margin:10px 0}

/* ============================ ĐẶT HÀNG ================================== */
.co-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;margin-top:8px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.addr-prev{background:var(--bg-2);border-radius:10px;padding:11px 13px;font-size:13.5px;color:var(--ink-2);margin-bottom:8px}
.addr-prev b{color:var(--ink)}
.pay-warn{display:flex;gap:10px;background:var(--warn-bg);border:1px solid #f5d9a3;border-radius:10px;padding:11px 13px;font-size:13px;color:#7a4b09;margin-bottom:12px}
.pay-warn .ic{color:var(--warn);flex:none;margin-top:1px}
.pays{display:flex;flex-direction:column;gap:10px}
.pay{display:flex;gap:12px;align-items:flex-start;border:1.6px solid var(--line);border-radius:var(--r-lg);padding:13px 15px;cursor:pointer;transition:.15s;min-width:0}
.pay:hover{border-color:var(--navy)}
.pay.on{border-color:var(--navy);background:var(--navy-l)}
.pay input{margin-top:3px;accent-color:var(--navy);width:17px;height:17px;flex:none}
.pay-b{min-width:0;flex:1}
.pay-b b{display:flex;align-items:center;gap:8px;font-size:14.5px}
.pay-b span{display:block;font-size:12.5px;color:var(--mut);margin-top:2px}
.pay.off{background:#f4f5f7;border-color:var(--line);cursor:not-allowed;opacity:.72}
.pay.off b,.pay.off span{color:#98a1ab}
.pay-no{margin-left:auto;background:#e4e7eb;color:#6c757d;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em;flex:none}
.mini-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.mini-line:last-of-type{border-bottom:0}
.mini-img{width:52px;height:52px;border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;background:#fff}
.mini-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.mini-q{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--dark);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center}

/* ============================ TRANG QR ================================== */
.steps{display:flex;align-items:center;gap:0;margin:16px 0 18px}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.step i{width:24px;height:24px;border-radius:50%;border:1.6px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800;flex:none}
.step.on{color:var(--ink);font-weight:700}
.step.on i{background:var(--navy);border-color:var(--navy);color:#fff}
.step.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.step-ln{flex:1;height:2px;background:var(--line);margin:0 10px;min-width:12px}

/* thanh trạng thái — nền đặc tối, VIỀN 1px đều quanh, bo 11px.
   KHÔNG vẽ vạch gradient ở mép trên: màu nhoè ra hai góc trông bẩn. */
.paybar{
  background:var(--dark);border:1px solid var(--dark-line);border-radius:11px;
  color:#e8eef5;padding:14px 16px;display:flex;flex-direction:column;gap:12px;
  min-height:137px;justify-content:center;
}
.paybar-l{display:flex;flex-direction:column;gap:7px;min-width:0}
.pb-state{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#ffcf86}
.pb-dot{width:8px;height:8px;border-radius:50%;background:#ffb020;box-shadow:0 0 0 0 rgba(255,176,32,.6);animation:blink 1.4s infinite}
@keyframes blink{0%{box-shadow:0 0 0 0 rgba(255,176,32,.55)}70%{box-shadow:0 0 0 9px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.pb-code{display:flex;align-items:center;gap:9px;min-width:0}
.pb-code b{font-size:19px;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.pb-copy{width:30px;height:30px;border:1px solid var(--dark-line);border-radius:8px;display:grid;place-items:center;color:#9fb0c2;flex:none}
.pb-copy:hover{color:#fff;border-color:#435466}
.pb-copy.ok{color:#5bd48a;border-color:#2f5a42}
.paybar-r{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.pb-amt{display:flex;flex-direction:column;gap:2px}
.pb-amt span{font-size:11.5px;color:#93a3b4}
.pb-amt b{font-size:21px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.pb-cd{text-align:right}
.pb-cd span{display:block;font-size:11.5px;color:#93a3b4}
.pb-cd .tm{font-size:19px;font-weight:700;color:#ff9b8a;letter-spacing:.04em}

.blk{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-top:14px;overflow:hidden}
.blk-hd{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line-2)}
.blk-no{width:26px;height:26px;border-radius:6px;background:var(--dark);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:700;flex:none}
.blk-hd b{font-size:15px;font-weight:800}
.blk-bd{padding:16px}

.qr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.qr-frame{position:relative;padding:16px}
.qr-frame img{width:222px;height:222px;object-fit:contain;display:block;background:#fff}
.qr-c{position:absolute;width:19px;height:19px;border:2px solid var(--navy)}
.qr-c.tl{top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:4px}
.qr-c.tr{top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:4px}
.qr-c.bl{bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:4px}
.qr-c.br{bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:4px}
.qr-hint{font-size:13.5px;color:var(--ink-2);text-align:center;max-width:420px}
.btn-paid{width:100%;max-width:366px;height:48px;background:var(--navy);color:#fff;border-radius:10px;font-weight:700;font-size:14.5px;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:9px}
.btn-paid:hover{background:var(--navy-d)}
.qr-links{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mut)}
.qr-links a{color:var(--navy);font-weight:600}
.qr-links em{font-style:normal}

details.bankbox{border:1px solid var(--line);border-radius:10px;margin-top:4px;width:100%;max-width:520px}
details.bankbox>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:9px}
details.bankbox>summary::-webkit-details-marker{display:none}
details.bankbox>summary .ic{color:var(--navy)}
details.bankbox>summary .ar{margin-left:auto;transition:.2s}
details.bankbox[open]>summary .ar{transform:rotate(180deg)}
.bank-rows{border-top:1px solid var(--line-2);padding:6px 14px 12px}
.bank-row{display:grid;grid-template-columns:118px minmax(0,1fr) 30px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line-2);font-size:13.5px}
.bank-row:last-child{border-bottom:0}
.bank-row span{color:var(--mut);font-size:12.5px}
.bank-row b{font-weight:700;word-break:break-word}
.bank-row b.mono{font-variant-numeric:tabular-nums;letter-spacing:.03em}
.cpy{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--mut);flex:none}
.cpy:hover{border-color:var(--navy);color:var(--navy)}
.cpy.ok{color:var(--ok);border-color:#bfe5cd}

.note-box{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:15px 17px}
.note-box b{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:9px}
.note-box .ic{color:var(--navy)}
/* KHÔNG dùng flex ở đây: mã đơn là một chuỗi không thể ngắt dòng, nằm trong
   anonymous flex item có min-width:auto nên sẽ đẩy tràn ngang ở 390px. */
.note-box li{position:relative;padding:4px 0 4px 15px;font-size:13.5px;color:var(--ink-2);line-height:1.55;overflow-wrap:anywhere}
.note-box li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--navy)}
/* an toàn chung cho các khối flex có chữ dài */
.pd-perk p>span,.trust-i>div,.info-row>div,.toast-msg,.pop-b{min-width:0;overflow-wrap:anywhere}

/* hộp thoại xác nhận */
.modal{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:rgba(12,17,23,.62)}
.modal-box{position:relative;width:100%;max-width:430px;max-height:92vh;overflow-y:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);animation:pop .18s ease}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-hd{display:flex;align-items:center;gap:10px;padding:15px 17px;border-bottom:1px solid var(--line-2)}
.modal-hd b{font-size:15.5px;font-weight:800}
.modal-x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--mut)}
.modal-x:hover{background:var(--bg-2)}
.modal-bd{padding:17px}
.modal-ft{display:flex;gap:10px;padding:0 17px 17px}
.modal-ft .btn{flex:1}

.drop{border:2px dashed var(--line);border-radius:var(--r-lg);min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:16px;text-align:center;cursor:pointer;transition:.16s;background:var(--bg-2);position:relative;overflow:hidden}
.drop:hover,.drop.over{border-color:var(--navy);background:var(--navy-l)}
.drop .ic{color:var(--navy)}
.drop b{font-size:13.5px}
.drop span{font-size:12px;color:var(--mut)}
.drop.has{padding:0;border-style:solid;background:#fff}
.drop.has img{width:100%;max-height:260px;object-fit:contain;display:block}
.drop-re{position:absolute;right:8px;bottom:8px;background:rgba(12,17,23,.78);color:#fff;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:7px}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.5;cursor:pointer}
.chk input{margin-top:3px;width:18px;height:18px;accent-color:var(--navy);flex:none}
.chk b{color:var(--navy)}

.done-wrap{max-width:560px;margin:34px auto;text-align:center}
.done-ic{width:74px;height:74px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto 16px}
.done-wrap h2{font-size:23px;font-weight:700;margin-bottom:8px}
.done-wrap p{color:var(--ink-2);font-size:14.5px}
.done-code{display:inline-flex;align-items:center;gap:10px;margin:16px 0;background:var(--bg-2);border-radius:10px;padding:11px 16px;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.done-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}

/* ============================ TIN TỨC / LIÊN HỆ ========================= */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.news-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;transition:.16s;cursor:pointer;min-width:0}
.news-card:hover{border-color:var(--navy);box-shadow:var(--sh)}
.news-card .cv{aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.news-card .cv img{width:100%;height:100%;object-fit:cover}
.news-card .bd{padding:13px 15px 16px}
.news-card h3{font-size:15.5px;font-weight:700;line-height:1.4;margin-bottom:6px}
.news-card p{font-size:13px;color:var(--mut);line-height:1.6}
.news-card time{display:block;font-size:12px;color:var(--mut);margin-top:9px}
.article{max-width:800px;margin:0 auto}
.article h1{font-size:27px;font-weight:700;line-height:1.28;margin-bottom:10px}
.article .meta{font-size:13px;color:var(--mut);margin-bottom:16px}
.article img{border-radius:var(--r-lg);margin:14px 0}

.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.info-row{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.info-row:last-child{border-bottom:0}
.info-row .ic{color:var(--navy);flex:none;margin-top:2px}
.info-row b{display:block;font-size:12.5px;color:var(--mut);font-weight:600}
.info-row span{font-size:14.5px}
.track-res{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px}
.track-res .rw{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;border-bottom:1px dashed var(--line-2)}
.track-res .rw:last-child{border-bottom:0}
.tag-st{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800}
.st-new{background:var(--warn-bg);color:var(--warn)}
.st-paid{background:#e8f1fe;color:#1d4ed8}
.st-shipping{background:#eef2ff;color:#4338ca}
.st-done{background:var(--ok-bg);color:var(--ok)}
.st-cancel{background:#fdeceb;color:var(--err)}

/* ============================ WIDGET ĐƠN GẦN ĐÂY ======================== */
#sale-pop{position:fixed;left:16px;bottom:16px;z-index:120;max-width:min(88vw,320px)}
.pop{display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-2);padding:10px 12px;opacity:0;transform:translateY(12px);transition:.3s}
.pop.on{opacity:1;transform:none}
.pop .ic{color:var(--navy);flex:none}
.pop-b{min-width:0;font-size:12.5px;line-height:1.45}
.pop-b b{display:block;font-size:13px}
.pop-b span{color:var(--mut)}
.pop-x{margin-left:auto;color:var(--mut);flex:none}

/* ============================ RESPONSIVE ================================ */
@media (max-width:1180px){
  .grid-5{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:1023px){
  :root{--hd-h:237px}
  .hd-main{padding:9px 0 11px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-side{flex-direction:row}
  .cat-layout{grid-template-columns:minmax(0,1fr)}
  .filters{position:static}
  .f-toggle{display:inline-flex}
  .filters.collapsed .f-body{display:none}
  .cart-layout,.co-layout{grid-template-columns:minmax(0,1fr)}
  .sum{position:static}
  .pd{grid-template-columns:minmax(0,1fr);gap:20px}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd-r .hd-act span:not(.cart-dot){display:none}
  .hd-r .hd-hot{display:none}
}
@media (min-width:768px){
  .paybar{flex-direction:row;align-items:center;justify-content:space-between;min-height:84px;padding:0 20px;gap:20px}
  .paybar-r{flex:none;align-items:center;gap:26px}
}
@media (max-width:767px){
  :root{--hd-h:160px}
  .cat-hero{min-height:150px}
  .cat-hero-in{padding:20px 16px;max-width:100%}
  .cat-hero-in h1{font-size:24px;letter-spacing:-.5px}
  .cat-hero-in p{font-size:12.5px}
  .cat-hero-cta{height:38px;padding:0 18px;font-size:12.5px;margin-top:14px}
  .cat-hero-ic{display:none}
  .cat-title{font-size:18px;margin:14px 0 10px}
  .cat-title em{font-size:14px}
  .sortbar{gap:8px}
  .sortbar-lb{width:100%}
  .sort-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%;min-width:0}
  .sort-chips::-webkit-scrollbar{display:none}
  .fchip-logo{height:40px;min-width:92px;padding:0 12px}
  .fchip-logo img{height:20px;max-width:72px}
  .card-buy{font-size:11.5px;height:36px}
  .card-cart{width:36px;height:36px}
  .spec-bg{font-size:10.5px;padding:2px 6px}
  .filterbar{padding:2px 12px}
  .fb-row{flex-direction:column;gap:7px;padding:9px 0}
  .fb-lb{width:auto;padding-top:0}
  /* cha là flex-direction:column nên flex:1 không bó được chiều ngang
     -> phải ép width:100% + min-width:0 thì overflow-x:auto mới có tác dụng */
  .fb-chips{flex:none;width:100%;min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .fb-chips::-webkit-scrollbar{display:none}
  .fchip{height:30px;padding:0 11px;font-size:12.5px}
  .btn-more{width:100%;padding:0 14px;font-size:13.5px}
  .btn-more em{display:none}
  .art-hd h2{font-size:17px}
  .art-body h2{font-size:16.5px}
  body{font-size:14.5px}
  .topbar{display:none}
  .hd-main{padding:8px 0 10px}
  .hd-in{gap:8px}
  .hd-burger{display:grid;place-items:center}
  .logo-mark{width:56px;height:56px;border-radius:13px}
  .logo-mark .ic{width:28px;height:28px}
  .logo-img{height:58px;max-width:190px}
  .hd-srow{padding-bottom:9px}
  .hd-search{height:40px}
  .hd-r .hd-hot{display:none}      /* điện thoại đã có hotline ở ngăn kéo */
  .hd-act{padding:7px 8px}
  .hd-cart span:not(.cart-dot){display:none}
  .hd-nav{height:44px}
  .hd-nav-in{height:44px;gap:10px}
  .nav-cats{display:none}
  .nav-a{padding:7px 11px;font-size:13.5px}
  .slide-cap{padding:14px 16px}
  .slide-cap b{font-size:17px;line-height:1.25}
  .slide-cap span{font-size:12px}
  .hero-card{min-height:118px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catmenu-bar{height:48px;padding:0 14px;font-size:14.5px;gap:9px}
  .cm-n{display:none}
  .catmenu-panel{grid-template-columns:minmax(0,1fr)}
  .cm-list{border-right:0}
  .cm-fly{display:none}
  .cm-sub{display:block;padding:2px 14px 14px;border-bottom:1px solid var(--line-2)}
  .cm-sub[hidden]{display:none}
  .cm-link{padding:11px 6px 11px 14px}
  .cm-go{padding:10px 12px;margin:-10px -6px}
  /* điện thoại: danh sách nằm gọn trong thanh "Danh mục sản phẩm",
     bấm thanh (hoặc mũi tên) mới xổ ra */
  .catmenu-panel[hidden]{display:none}
  .cm-fly,.fly-hot-top{display:none}
  .fly-hd b{font-size:14.5px}
  .fly-brands{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
  .fly-b{height:42px}
  .fly-hot{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sec{margin-top:26px}
  .sec-t{font-size:17px}
  .pd{grid-template-columns:minmax(0,1fr);gap:20px}
  .pd-gal{position:static}
  .pd-stage.has-rail .pd-main{margin-left:0}
  .pd-rail{position:static;width:100%;flex-direction:row;align-items:center;margin-top:9px}
  .rail-nav{height:64px;width:22px;flex:none}
  .rail-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;min-width:0;width:100%}
  .rail-list button{width:64px;height:64px}
  .pd-jump a{font-size:10.5px;padding:10px 4px}
  .pd-policy{grid-template-columns:minmax(0,1fr)}
  .pd-name{font-size:18px}
  .pd-price .now{font-size:25px}
  .pd-actions{gap:8px}
  .pd-add{width:54px}
  .pd-buy-now{min-width:0;flex:1;font-size:14px}
  .pd-cols{grid-template-columns:minmax(0,1fr);gap:8px}
  .pd-sec-t{font-size:15px}
  .spec-tb{font-size:13px}
  .spec-tb th,.spec-tb td{padding:8px 10px}
  .spec-tb th{width:42%}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .cart-line{grid-template-columns:68px minmax(0,1fr);gap:10px}
  .cart-img{width:68px;height:68px}
  .cart-right{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .ft-in{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 16px}
  .trust{grid-template-columns:minmax(0,1fr)}
  .qr-frame img{width:194px;height:194px}
  .steps{font-size:11.5px;overflow-x:auto}
  .step span{display:none}
  .step.on span{display:inline}
  .news-grid{grid-template-columns:minmax(0,1fr)}
  .article h1{font-size:21px}
  #sale-pop{left:10px;right:10px;bottom:10px;max-width:none}
  #toast-wrap{left:12px;right:12px;bottom:12px;align-items:stretch}
  .toast{max-width:none}
  .bank-row{grid-template-columns:100px minmax(0,1fr) 30px;gap:8px}
  .spec-tb th{width:42%}
}
@media (max-width:400px){
  .wrap{padding:0 12px}
  .grid{gap:8px}
  .card-name{font-size:12.5px}
  .price-now{font-size:14.5px}
  .pb-code b{font-size:17px}
  .pb-amt b{font-size:19px}
}

/* ---------- Banner danh mục do quản trị tải lên ---------- */
.cat-banner{margin:0 0 16px;border-radius:12px;overflow:hidden;background:var(--bg-2);line-height:0}
.cat-banner img{width:100%;height:auto;display:block}
.cat-banner.broken{display:none}
@media(max-width:600px){ .cat-banner{border-radius:9px;margin-bottom:12px} }

/* logo đã tải lên dùng luôn ở chân trang */
.ft-logo-img{width:22px;height:22px;object-fit:contain;display:inline-block;vertical-align:-5px;border-radius:4px;background:#fff}

/* ---------- Đầu mục có hàng tab (Sản phẩm nổi bật) trên màn hẹp ----------
   Để tiêu đề và hàng tab cùng một dòng thì tiêu đề bị bóp lại, chữ vỡ thành
   "Sản / phẩm nổi / bật". Ở màn hẹp cho tiêu đề chiếm trọn một dòng, hàng tab
   xuống dưới và trượt ngang thay vì xuống dòng lộn xộn. */
@media(max-width:700px){
  .sec-hd{flex-direction:column;align-items:stretch;gap:10px}
  .sec-t{font-size:17px;white-space:nowrap}
  .sec-hd .sec-more{align-self:flex-end;margin-top:-34px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding-bottom:3px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;white-space:nowrap;padding:7px 14px;font-size:13px}
}

/* ---------- Ô chờ tên shop ----------
   Lần đầu vào web chưa có gì trong bộ nhớ đệm: vẽ ô xám mờ đúng chỗ chữ,
   chờ cấu hình về mới điền tên thật. Nhờ vậy không bao giờ hiện tên cũ
   rồi nháy sang tên mới, và khung header cũng không bị xê dịch. */
.sk-name,.sk-slogan{display:block;border-radius:5px;
  background:linear-gradient(90deg,#e9edf1 25%,#f3f6f8 50%,#e9edf1 75%);
  background-size:220% 100%;animation:skName 1.1s linear infinite}
.sk-name{width:132px;height:17px;margin:2px 0}
.sk-slogan{width:104px;height:10px;margin-top:4px}
.sk-name.dark{width:120px;height:15px;
  background:linear-gradient(90deg,rgba(255,255,255,.10) 25%,rgba(255,255,255,.20) 50%,rgba(255,255,255,.10) 75%);
  background-size:220% 100%;display:inline-block;vertical-align:-2px}
@keyframes skName{0%{background-position:120% 0}100%{background-position:-120% 0}}

/* ---------- Mô tả sản phẩm: bảng thông số + bộ ảnh trong phần mô tả ---------- */
.desc-html .desc-spec{width:100%;border-collapse:collapse;margin:12px 0 4px;font-size:13.5px}
.desc-html .desc-spec th,.desc-html .desc-spec td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.desc-html .desc-spec th{width:40%;background:var(--bg-2);font-weight:600;color:var(--ink-2)}
.desc-gal{display:grid;gap:14px;margin:12px 0 4px}
.desc-gal figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.desc-gal img{width:100%;height:auto;display:block}
@media(max-width:600px){
  .desc-html .desc-spec th{width:46%}
  .desc-gal{gap:11px}
}

/* ---------- Khung SALE vẽ bằng SVG ---------- */
.card.on-sale{position:relative}
.sale-frame{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  border:2px solid var(--sale-ring);box-shadow:0 0 0 3px color-mix(in srgb,var(--sale-ring) 16%,transparent)}
.card.on-sale:hover .sale-frame{box-shadow:0 0 0 4px color-mix(in srgb,var(--sale-ring) 26%,transparent)}
.card.sale-hot .sale-frame{animation:saleGlow 1.8s ease-in-out infinite}
@keyframes saleGlow{
  0%,100%{box-shadow:0 0 0 3px rgba(255,59,48,.16)}
  50%{box-shadow:0 0 0 6px rgba(255,59,48,.05)}
}
.card-img{position:relative;overflow:hidden}
.sale-rib{position:absolute;top:0;left:0;width:96px;height:96px;pointer-events:none;z-index:3}
.card .badge-tag{z-index:3}
@media (max-width:600px){
  .sale-rib{width:78px;height:78px}
  .sale-frame{border-width:1.5px}
}
@media (prefers-reduced-motion:reduce){
  .card.sale-hot .sale-frame{animation:none}
}

/* ---------- Máy tính: logo nằm góc trên bên trái ----------
   Điện thoại và máy tính bảng giữ nguyên kiểu logo căn giữa. */
@media (min-width:1024px){
  .hd-main{padding:12px 0 14px}
  .hd-in{grid-template-columns:auto minmax(0,1fr) auto;gap:24px}
  .hd-l{display:none}
  /* chỉ định rõ từng cột, không để lưới tự xếp rồi đẩy ô tìm kiếm xuống dòng */
  .logo{grid-column:1;grid-row:1;justify-self:start}
  .hd-in .hd-search{grid-column:2;grid-row:1;width:100%;max-width:620px;justify-self:center}
  .hd-r{grid-column:3;grid-row:1;justify-self:end}
  .hd-srow{display:none}
  .logo-img{height:62px;max-width:240px}
  .logo-mark{width:60px;height:60px}
}
/* Màn hẹp: giấu ô tìm kiếm nằm cùng hàng logo, dùng ô ở hàng riêng bên dưới */
@media (max-width:1023px){
  .hd-in .hd-search{display:none}
}

/* ---------- Thẻ sản phẩm nằm trong dải khuyến mãi ----------
   Dải sale đặt color:#fff cho nền đỏ; thẻ sản phẩm nền trắng nên phải tự
   đặt lại màu chữ, nếu không tên sản phẩm trắng trên nền trắng — mất chữ. */
.sale-strip .card,
.sale-strip .card-name,
.sale-strip .card-meta{color:var(--ink)}
.sale-strip .card-name{color:var(--ink)}
.sale-strip .card-meta .sold{color:var(--mut)}

/* Màn hẹp: thẻ đang quá cao vì hàng thông số xuống 3 dòng — gom lại 1 dòng,
   thừa thì cắt, và siết bớt khoảng cách cho thẻ gọn hơn. */
@media (max-width:600px){
  .card-body{padding:9px 10px 11px;gap:5px}
  .card-specs{flex-wrap:nowrap;overflow:hidden;gap:4px}
  .card-specs>*{flex:0 0 auto}
  .card-name{height:2.7em;font-size:12.5px}
  .card-acts .btn{height:36px;font-size:12.5px}
  .sale-strip{padding:13px 12px}
  .sale-strip .grid{gap:9px}
}