/* =====================================================================
   DŨNG CỬU SPORT - dungcuubongban.com
   Hệ thống thiết kế v2. Màu lấy từ banner cửa hàng (tím → hồng sen),
   nhánh Pickleball dùng màu ngọc để phân biệt 2 mảng sản phẩm.
   ===================================================================== */

:root{
  /* Thương hiệu */
  --brand:#6d1f9c;
  --brand-dark:#43106b;
  --brand-light:#9047c4;
  --pink:#d6298b;
  --accent:#e8342c;
  --accent-dark:#c22820;
  --gold:#f0b429;
  --pkb:#e11b22;          /* nhánh Pickleball - đỏ Selkirk theo banner của shop */
  --pkb-dark:#0d1017;     /* nền đen của banner */
  --pkb-soft:#fff1f0;

  /* Nền & chữ */
  --ink:#181530;
  --ink-2:#4a4566;
  --muted:#7d7893;
  --line:#e8e4f0;
  --line-2:#f1eef7;
  --bg:#ffffff;
  --bg-2:#f8f6fc;
  --bg-3:#f1ebf9;
  --ok:#0f8a4d;
  --warn:#c2410c;

  /* Hình khối */
  --r-sm:10px;
  --r:16px;
  --r-lg:22px;
  --shadow-xs:0 1px 3px rgba(45,20,80,.06);
  --shadow:0 4px 16px rgba(45,20,80,.07);
  --shadow-lg:0 16px 40px rgba(45,20,80,.14);
  --grad:linear-gradient(100deg,#43106b 0%,#6d1f9c 45%,#d6298b 100%);
  --grad-pkb:linear-gradient(103deg,#0d1017 0%,#1c1f2a 38%,#c1121a 74%,#e11b22 100%);
  --wrap:1280px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

/* QUAN TRỌNG: thẻ có thuộc tính hidden phải luôn ẩn.
   Không có dòng này, các khối như popup, khung chat (có display trong class)
   sẽ hiện đè lên trang ngay khi tải, trước cả khi JavaScript kịp chạy. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:15.5px;line-height:1.65;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--pink)}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.015em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.15em}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
::selection{background:var(--bg-3)}

.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 18px}
.container.narrow{max-width:880px}
.muted{color:var(--muted)}
.text-ok{color:var(--ok)}
.text-warn{color:var(--warn)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:999}
.skip-link:focus{left:8px;top:8px}

/* ------------------------------ Nút ------------------------------- */
.btn{
  --btn-bg:var(--brand);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:99px;border:1.5px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);font-weight:600;font-size:14.5px;
  cursor:pointer;transition:transform .14s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  text-align:center;line-height:1.3;
}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px);box-shadow:0 10px 24px rgba(45,20,80,.18)}
.btn:active{transform:translateY(0)}
.btn--primary{--btn-bg:var(--brand)}
.btn--primary:hover{--btn-bg:var(--brand-dark)}
.btn--accent{--btn-bg:var(--accent)}
.btn--accent:hover{--btn-bg:var(--accent-dark)}
.btn--pkb{--btn-bg:var(--pkb)}
.btn--pkb:hover{--btn-bg:var(--pkb-dark)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--brand);--btn-bd:var(--brand)}
.btn--outline:hover{--btn-bg:var(--brand);--btn-fg:#fff}
.btn--ghost{--btn-bg:var(--bg-3);--btn-fg:var(--brand-dark);--btn-bd:transparent}
.btn--ghost:hover{--btn-bg:var(--line);--btn-fg:var(--ink)}
.btn--white{--btn-bg:#fff;--btn-fg:var(--brand-dark)}
.btn--sm{padding:8px 15px;font-size:13.5px}
.btn--lg{padding:15px 30px;font-size:16px}
.btn--block{display:flex;width:100%;margin-bottom:8px}

/* ----------------------------- Top bar ---------------------------- */
.topbar{background:var(--brand-dark);color:#e5d8f3;font-size:12.8px}
.topbar__in{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:38px}
.topbar__usp{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.topbar__usp li{position:relative;padding-left:15px;opacity:.92}
.topbar__usp li::before{content:"✓";position:absolute;left:0;color:#6ee7a8;font-weight:700}
.topbar__links{display:flex;gap:16px;align-items:center;flex-shrink:0}
.topbar__links a{color:#e5d8f3}
.topbar__links a:hover{color:#fff}
.topbar__hot{background:rgba(255,255,255,.14);padding:4px 12px;border-radius:99px;font-weight:600}
.topbar__hot:hover{background:var(--pink);color:#fff !important}

/* ------------------------------ Header ---------------------------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.header__in{display:flex;align-items:center;gap:20px;padding:13px 18px}
.header__burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.header__burger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px}

/* Nhãn cho sản phẩm đang dùng ảnh chờ (logo) thay ảnh chụp thật */
.pcard__cho{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(255,255,255,.92);color:#6d1f9c;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:99px;white-space:nowrap;pointer-events:none;
}

.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
/* Logo thật của cửa hàng, thay cho khối SVG vẽ tạm trước đây */
.logo__img{display:block;height:46px;width:auto;max-width:230px;object-fit:contain}
@media (max-width:600px){ .logo__img{height:34px;max-width:112px} }
/* Chân trang nền tối mà logo lại chữ tím đậm -> lót nền trắng cho đọc rõ,
   không dùng filter làm sáng vì như thế là bóp méo màu thương hiệu. */
.logo--footer{background:#fff;padding:9px 14px;border-radius:12px;display:inline-flex}
.logo--footer .logo__img{height:42px;max-width:210px}
.logo__mark{
  width:46px;height:46px;border-radius:14px;background:var(--grad);
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(109,31,156,.3);
}
.logo__text{display:flex;flex-direction:column;line-height:1.15}
.logo__text strong{font-size:19px;color:var(--brand-dark);font-weight:800;letter-spacing:-.02em}
.logo__text em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.03em}

.searchbox{position:relative;flex:1;display:flex;max-width:520px}
.searchbox input{width:100%;padding:12px 48px 12px 18px;border:1.5px solid var(--line);border-radius:99px;background:var(--bg-2);transition:.16s ease}
.searchbox input:focus{background:#fff;border-color:var(--brand-light);outline:none;box-shadow:0 0 0 4px rgba(109,31,156,.09)}
.searchbox button{position:absolute;right:5px;top:5px;bottom:5px;width:40px;border:0;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;cursor:pointer}
.searchbox__suggest{
  position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:70;overflow:hidden;max-height:60vh;overflow-y:auto;
}
.searchbox__suggest a{display:flex;gap:11px;align-items:center;padding:10px 13px;color:var(--ink);border-bottom:1px solid var(--line-2)}
.searchbox__suggest a:last-child{border-bottom:0}
.searchbox__suggest a:hover{background:var(--bg-2)}
.searchbox__suggest img{width:42px;height:42px;object-fit:contain;border-radius:8px;background:var(--bg-2)}
.searchbox__suggest span{font-size:13.5px;line-height:1.35}
.searchbox__suggest em{display:block;font-style:normal;color:var(--accent);font-weight:700}

.header__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.hotline{display:flex;align-items:center;gap:9px;color:var(--ink);padding:6px 12px;border-radius:12px;background:var(--bg-2)}
.hotline:hover{background:var(--bg-3);color:var(--ink)}
.hotline svg{color:var(--accent);flex-shrink:0}
.hotline span{display:flex;flex-direction:column;line-height:1.2}
.hotline em{font-style:normal;font-size:11px;color:var(--muted)}
.hotline strong{font-size:15px;color:var(--accent)}

.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--bg-2);color:var(--brand-dark)}
.icon-btn:hover{background:var(--brand);color:#fff}
.icon-btn--cart{background:var(--grad);color:#fff}
.icon-btn--cart:hover{filter:brightness(1.08);color:#fff}
.icon-btn__count{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;
  border:2px solid #fff;
}

/* ------------------------------- Menu ----------------------------- */
.nav{background:var(--grad)}
.nav__list{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav__item{position:relative}
.nav__item>a{display:flex;align-items:center;gap:7px;padding:13px 16px;color:#fff;font-weight:600;font-size:14.5px}
.nav__item>a:hover,.nav__item:focus-within>a{background:rgba(255,255,255,.16);color:#fff}
.nav__item>a.is-sale{color:#ffe27a}
.nav__dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.nav__dot--tt{background:#ffd166}
.nav__dot--pkb{background:#ff5a4d}
.caret{opacity:.75}

.nav__sub{
  position:absolute;top:100%;left:0;min-width:240px;background:#fff;list-style:none;margin:0;padding:8px 0;
  border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;z-index:80;
}
.nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{display:block;padding:9px 20px;color:var(--ink-2);font-size:14px}
.nav__sub a:hover{background:var(--bg-2);color:var(--brand);padding-left:24px}

/* Mega menu cho nhánh Pickleball */
.has-mega .mega{
  position:absolute;top:100%;left:0;width:min(920px,88vw);background:#fff;
  border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:var(--shadow-lg);padding:24px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;z-index:80;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__cols{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:22px}
.mega__col h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.mega__col ul{list-style:none;padding:0;margin:0}
.mega__col li{margin-bottom:2px}
.mega__col a{display:block;padding:5px 0;color:var(--ink-2);font-size:14.2px;font-weight:500}
.mega__col a:hover{color:var(--brand)}
.mega__promo{
  display:block;background:var(--bg-3);border-radius:var(--r);padding:18px;color:var(--ink);
  border:1.5px dashed var(--brand-light);
}
.mega__promo:hover{background:#fff;border-style:solid;color:var(--ink)}
.mega__promo-tag{display:inline-block;background:var(--pink);color:#fff;font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px;margin-bottom:8px}
.mega__promo strong{display:block;font-size:15.5px;margin-bottom:5px;color:var(--brand-dark)}
.mega__promo p{font-size:13.2px;color:var(--ink-2);margin:0 0 8px}
.mega__promo em{font-style:normal;font-weight:700;color:var(--pink);font-size:13.5px}

/* ---------------------------- Breadcrumb -------------------------- */
.breadcrumb{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:13.2px}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:11px 0}
.breadcrumb li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.breadcrumb span{color:var(--muted)}

/* ================================ HERO ============================= */
.hero{padding:24px 0 8px}
.hero__head{margin-bottom:16px}
.hero__head h1{font-size:20px;margin:0 0 3px;color:var(--brand-dark)}
.hero__head p{margin:0;font-size:13.5px;color:var(--muted)}
.hero__in{display:grid;grid-template-columns:1fr 320px;gap:20px}
.hero__slider{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-3)}
.hero__slide{display:none}
.hero__slide.is-active{display:block}
.hero__slide img{width:100%;height:auto;object-fit:cover}
.hero__slide--fallback{padding:70px 30px;background:var(--grad);color:#fff;text-align:center}
.hero__slide--fallback h1{color:#fff;margin-bottom:.2em}
.hero__side{display:flex;flex-direction:column;gap:14px}
.hero__card{background:linear-gradient(160deg,#fff,var(--bg-2));border:1px solid var(--line);border-radius:var(--r);padding:20px}
.hero__card h2{font-size:17px;margin-bottom:.4em}
.hero__card p{font-size:13.8px;color:var(--ink-2);margin-bottom:14px}
.hero__card--service ul{list-style:none;padding:0;margin:0}
.hero__card--service li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:14.2px;font-weight:600}
.hero__card--service li:last-child{border-bottom:0}
.hero__card--service a{display:flex;align-items:center;gap:8px;color:var(--ink)}
.hero__card--service a:hover{color:var(--brand)}
.hero__card--service a::before{content:"→";color:var(--pink);font-weight:700}

/* ------------------------- 2 MẢNG SẢN PHẨM ------------------------ */
.branches{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
.branch{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:28px 30px;color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;
  transition:transform .18s ease,box-shadow .2s ease;
}
.branch:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:#fff}
.branch--tt{background:var(--grad)}
.branch--pkb{background:var(--grad-pkb)}
.branch__tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.branch h2{font-size:25px;margin:4px 0 6px;color:#fff}
.branch p{margin:0 0 14px;font-size:14.2px;opacity:.94;max-width:34ch}
.branch__links{display:flex;flex-wrap:wrap;gap:7px}
.branch__links a,.branch__links span{background:rgba(255,255,255,.18);color:#fff;padding:5px 13px;border-radius:99px;font-size:13px;font-weight:600;backdrop-filter:blur(3px)}
.branch__links a:hover,.branch__links span:hover{background:#fff;color:var(--brand-dark)}
.branch__ball{position:absolute;border-radius:50%;opacity:.14;background:#fff;pointer-events:none}
.branch__ball--1{width:170px;height:170px;top:-60px;right:-40px}
.branch__ball--2{width:90px;height:90px;bottom:-30px;right:70px;opacity:.1}

/* -------------------------------- USP ----------------------------- */
.usp{padding:8px 0 4px}
.usp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.usp__item{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--pink);
  border-radius:var(--r-sm);padding:13px 15px;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);
}
.usp__item strong{font-size:14.5px}
.usp__item span{font-size:12.8px;color:var(--muted)}

/* ------------------------------ Section --------------------------- */
.section{padding:38px 0}
.section--tint{background:var(--bg-2)}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.section__title{font-size:26px;margin:0;position:relative;padding-left:15px}
.section__title::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:var(--grad)}
.section__sub{margin:0;color:var(--muted);font-size:14px}
.section__more{font-weight:600;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.section__more::after{content:"→";transition:transform .16s ease}
.section__more:hover::after{transform:translateX(3px)}
.page-head{padding:24px 0 10px}
.page-title{font-size:29px;margin:20px 0 8px}
.page-desc{color:var(--ink-2);max-width:72ch}

/* ----------------------------- Flash sale ------------------------- */
.flashsale{
  background:linear-gradient(100deg,#2b0b45,#6d1f9c 55%,#e8342c);color:#fff;
  border-radius:var(--r-lg);padding:20px 26px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px;
}
.flashsale h2{margin:0;font-size:22px;color:#fff;display:flex;align-items:center;gap:10px}
.flashsale p{margin:2px 0 0;font-size:13.8px;opacity:.9}
.flashsale__timer{display:flex;align-items:center;gap:8px;font-size:14px}
.flashsale__timer b{background:rgba(0,0,0,.28);border-radius:9px;padding:6px 11px;font-size:19px;font-weight:800;margin-right:3px}

/* ---------------------------- Danh mục ---------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.cat-tile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 10px;
  text-align:center;color:var(--ink);transition:.18s ease;box-shadow:var(--shadow-xs);
}
.cat-tile:hover{color:var(--brand);border-color:var(--brand-light);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.cat-tile__img{display:grid;place-items:center;height:64px;margin-bottom:9px}
.cat-tile__img img{max-height:64px;width:auto;object-fit:contain}
.cat-tile strong{display:block;font-size:13.8px;line-height:1.3}
.cat-tile em{font-style:normal;font-size:12px;color:var(--muted)}

.subcat-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 20px}
.subcat-chips a{padding:8px 16px;border-radius:99px;background:var(--bg-3);color:var(--brand-dark);font-size:13.5px;font-weight:600}
.subcat-chips a:hover{background:var(--brand);color:#fff}

.cat-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:20px 0 40px}
.cat-column h2{font-size:18px}
.cat-column ul{list-style:none;padding:0}
.cat-column li{padding:5px 0;border-bottom:1px dashed var(--line)}
.cat-column span{color:var(--muted);font-size:12.5px}

/* ---------------------------- Sản phẩm ---------------------------- */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.prod-grid--shop{grid-template-columns:repeat(4,1fr)}
.pcard{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s ease;box-shadow:var(--shadow-xs);
}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:var(--brand-light)}
.pcard.is-out{opacity:.82}
.pcard__media{display:block;position:relative;aspect-ratio:1/1;background:var(--bg-2);padding:12px}
.pcard__media img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__body{padding:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard__brand{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.pcard__name{margin:0;font-size:14.5px;font-weight:600;line-height:1.4}
.pcard__name a{color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__name a:hover{color:var(--brand)}
/* flex-wrap + nowrap: thẻ sản phẩm trên điện thoại chỉ rộng 168px, "Đã bán 71"
   bị bẻ thành 3 dòng trông rất xấu. Cho cả cụm xuống dòng nguyên khối thay vì
   bẻ chữ trong từng cụm. */
.pcard__meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-size:12.2px;color:var(--muted);min-height:16px}
.pcard__meta > *{white-space:nowrap}
.pcard__rating{display:flex;align-items:center;gap:5px}
.pcard__price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pcard__price strong{color:var(--accent);font-size:17.5px;font-weight:800}
.pcard__price del{color:var(--muted);font-size:13px}
.pcard__price--call{font-size:15px !important;color:var(--brand) !important}
.pcard__actions{display:flex;gap:6px;margin-top:5px}
.pcard__actions .btn{flex:1;padding:9px 6px;font-size:13px}

.badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:700;color:#fff;z-index:2}
.badge--sale{background:var(--accent)}
.badge--new{background:var(--ok);left:auto;right:48px}
.badge--out{background:var(--ink-2);top:auto;bottom:10px}

.stars{display:inline-flex;gap:1px}
.star{width:13px;height:13px;background:var(--line);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.is-full{background:var(--gold)}
.star.is-half{background:linear-gradient(90deg,var(--gold) 50%,var(--line) 50%)}

/* --------------------------- CTA làm quiz -------------------------- */
.quizcta{
  position:relative;overflow:hidden;background:var(--grad);color:#fff;border-radius:var(--r-lg);
  padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.quizcta__ball{position:absolute;border-radius:50%;background:#fff;opacity:.12}
.quizcta__ball--1{width:200px;height:200px;right:-50px;top:-70px}
.quizcta__ball--2{width:110px;height:110px;right:130px;bottom:-50px;opacity:.08}
.quizcta__text{position:relative;max-width:56ch}
.quizcta h2{color:#fff;font-size:27px;margin:0 0 8px}
.quizcta p{margin:0;opacity:.94;font-size:15px}
.quizcta__actions{position:relative;display:flex;gap:10px;flex-wrap:wrap}

/* ------------------------------ Dịch vụ ---------------------------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.service{
  display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow-xs);transition:.18s ease;
}
.service:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.service__icon{
  width:54px;height:54px;flex-shrink:0;border-radius:16px;background:var(--bg-3);
  display:grid;place-items:center;font-size:24px;
}
.service h3{font-size:18px;margin:0 0 5px}
.service p{font-size:14px;color:var(--ink-2);margin:0 0 10px}
.service a{font-weight:600;font-size:14px}

/* --------------------------- Tường đánh giá ------------------------ */
.reviews-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-xs)}
.rcard__stars{margin-bottom:8px}
.rcard p{font-size:14.5px;color:var(--ink-2);margin:0 0 12px}
.rcard__who{display:flex;align-items:center;gap:10px;font-size:13.5px}
.rcard__ava{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700}
.rcard__who strong{display:block;color:var(--ink)}
.rcard__who em{font-style:normal;color:var(--muted);font-size:12.5px}

/* ------------------------- Bố cục cửa hàng ------------------------ */
.shop-layout{display:grid;grid-template-columns:262px 1fr;gap:26px;margin-bottom:40px}
.filters{align-self:start;position:sticky;top:132px}
.filters__form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-xs)}
.filters__block{margin-bottom:18px}
.filters__block h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:9px}
.filters__list{list-style:none;padding:0;margin:0;max-height:260px;overflow-y:auto}
.filters__list label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;cursor:pointer}
.filters__list span{color:var(--muted);font-size:12.5px}
.filters__help{margin-top:14px;background:var(--bg-3);border-radius:var(--r);padding:16px;font-size:13.5px}
.filters__help h2{font-size:14.5px}
.filters__help p{margin:0}

.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.shop-toolbar__count{margin:0;color:var(--ink-2)}
.shop-toolbar__sort{display:flex;align-items:center;gap:8px;font-size:14px}
.shop-toolbar__sort select{padding:9px 14px;border:1.5px solid var(--line);border-radius:99px;background:#fff}

/* ---------------------------- Phân trang -------------------------- */
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0}
.pagination__item{
  min-width:42px;height:42px;padding:0 13px;display:grid;place-items:center;border-radius:12px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:14px;
}
.pagination__item:hover{border-color:var(--brand);color:var(--brand)}
.pagination__item.is-active{background:var(--grad);color:#fff;border-color:transparent}
.pagination__dots{display:grid;place-items:center;padding:0 4px;color:var(--muted)}

/* ------------------------- Chi tiết sản phẩm ---------------------- */
.product-top{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:34px;margin:24px 0 36px}
.gallery__main{position:relative;background:var(--bg-2);border-radius:var(--r-lg);padding:20px;border:1px solid var(--line)}
.gallery__main img{width:100%;aspect-ratio:1/1;object-fit:contain}
.gallery__thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gallery__thumbs button{width:68px;height:68px;padding:5px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.gallery__thumbs button.is-active{border-color:var(--brand)}
.gallery__thumbs img{width:100%;height:100%;object-fit:contain}

.product-title{font-size:28px;margin-bottom:10px}
.product-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted);margin-bottom:16px}
.product-meta strong{color:var(--ink)}
.product-meta__rating{display:flex;align-items:center;gap:6px}
.product-price{background:linear-gradient(120deg,var(--bg-3),var(--bg-2));border-radius:var(--r);padding:16px 20px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.product-price strong{font-size:32px;color:var(--accent);font-weight:800;line-height:1.1}
.product-price del{color:var(--muted)}
.product-price__save{font-size:13px;color:var(--ok);font-weight:600;background:#e9f8ef;padding:3px 10px;border-radius:99px}
.product-price--call{font-size:23px !important;color:var(--brand) !important}
.product-short{color:var(--ink-2)}

.variant{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px;flex-wrap:wrap}
.variant__label{min-width:104px;padding-top:8px;font-size:14px;color:var(--muted)}
.variant__opts{display:flex;flex-wrap:wrap;gap:8px}
.variant__opt{position:relative;cursor:pointer}
.variant__opt input{position:absolute;opacity:0;width:0;height:0}
.variant__opt span{display:block;padding:8px 16px;border:1.5px solid var(--line);border-radius:99px;font-size:13.5px;font-weight:600}
.variant__opt input:checked+span{border-color:var(--brand);background:var(--bg-3);color:var(--brand-dark)}
.variant__opt.is-disabled span{opacity:.45;text-decoration:line-through;cursor:not-allowed}

/* Nút chọn khi sản phẩm có NHIỀU nhóm thuộc tính (kiểu dáng, độ dày, màu).
   Dùng <button> chứ không phải radio, vì một trang có nhiều hàng phải chọn
   độc lập nhau — radio cùng tên thì chọn hàng này lại bỏ chọn hàng kia. */
.variant__opt--nut{appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit}
.variant__opt--nut span{transition:border-color .15s ease,background .15s ease,color .15s ease}
.variant__opt--nut:hover:not(.is-disabled) span{border-color:var(--brand)}
.variant__opt--nut.is-active span{border-color:var(--brand);background:var(--bg-3);color:var(--brand-dark)}
.variant__opt--nut:focus-visible span{outline:2px solid var(--brand);outline-offset:2px}
.variant__nhac{margin:2px 0 12px;font-size:13.5px;color:var(--pkb,#d81f26);font-weight:600}


.product-buy__row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:99px;overflow:hidden}
.qty button{width:40px;height:46px;border:0;background:#fff;font-size:18px;cursor:pointer;color:var(--ink-2)}
.qty button:hover{background:var(--bg-2)}
.qty input{width:54px;height:46px;border:0;text-align:center;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.product-extra{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.product-extra button{
  background:var(--bg-2);border:1.5px solid var(--line);border-radius:99px;padding:8px 16px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:7px;
}
.product-extra button:hover{border-color:var(--brand);color:var(--brand)}
.product-extra button.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.product-trust{list-style:none;padding:16px 18px;margin:0;background:var(--bg-2);border-radius:var(--r);font-size:13.8px}
.product-trust li{padding:5px 0 5px 24px;position:relative}
.product-trust li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}

.product-detail{display:grid;grid-template-columns:1fr 320px;gap:26px;margin-bottom:36px}
.tabs__nav{display:flex;gap:4px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabs__nav button{padding:12px 22px;border:0;background:none;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs__nav button.is-active{color:var(--brand);border-bottom-color:var(--brand)}
.tabs__panel{display:none;padding:22px 0}
.tabs__panel.is-active{display:block}

.spec-table th,.spec-table td{padding:11px 15px;border:1px solid var(--line);text-align:left;font-size:14.2px}
.spec-table th{background:var(--bg-2);width:35%;font-weight:600;color:var(--ink-2)}

.review-list{list-style:none;padding:0;margin:0 0 24px}
.review{padding:15px 0;border-bottom:1px solid var(--line)}
.review__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.review__head time{color:var(--muted);font-size:12.5px}
.review p{margin:0;color:var(--ink-2)}
.review-form{background:var(--bg-2);border-radius:var(--r);padding:20px}
.review-form h3{font-size:17px}

.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:16px;box-shadow:var(--shadow-xs)}
.side-card h2{font-size:16px}
.side-card__note{font-size:13px;color:var(--muted);margin:8px 0 0}
.mini-list{list-style:none;padding:0;margin:0}
.mini-list li{border-bottom:1px solid var(--line-2)}
.mini-list li:last-child{border-bottom:0}
.mini-list a{display:flex;gap:10px;align-items:center;padding:9px 0;color:var(--ink)}
.mini-list a:hover{color:var(--brand)}
.mini-list img{width:56px;height:56px;object-fit:contain;background:var(--bg-2);border-radius:9px;flex-shrink:0}
.mini-list span{font-size:13.4px;line-height:1.35}
.mini-list em{display:block;font-style:normal;color:var(--accent);font-weight:700;font-size:13px}
.side-links{list-style:none;padding:0;margin:0}
.side-links li{border-bottom:1px dashed var(--line)}
.side-links a{display:block;padding:9px 0;color:var(--ink-2);font-weight:500}
.side-links a.is-active,.side-links a:hover{color:var(--brand)}

/* --------------------------- Nội dung dài ------------------------- */
.rich-text{font-size:16px;color:var(--ink-2);line-height:1.8}
.rich-text h2{font-size:23px;color:var(--ink);margin-top:1.5em}
.rich-text h3{font-size:18.5px;color:var(--ink);margin-top:1.3em}
.rich-text img{border-radius:var(--r);margin:1em 0}
.rich-text ul,.rich-text ol{padding-left:1.3em}
.rich-text li{margin-bottom:.4em}
.rich-text table{margin:1.2em 0;font-size:14.5px}
.rich-text th,.rich-text td{border:1px solid var(--line);padding:10px 13px;text-align:left}
.rich-text th{background:var(--bg-2)}
.rich-text blockquote{margin:1.3em 0;padding:14px 20px;border-left:4px solid var(--pink);background:var(--bg-2);border-radius:0 var(--r) var(--r) 0}
.rich-text strong{color:var(--ink)}
.rich-text a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ----------------------------- Giỏ hàng --------------------------- */
.cart-layout,.checkout{display:grid;grid-template-columns:1fr 350px;gap:26px;margin-bottom:40px;align-items:start}
.cart-table{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cart-table th,.cart-table td{padding:13px;border-bottom:1px solid var(--line);text-align:left;font-size:14.2px;vertical-align:middle}
.cart-table thead th{background:var(--bg-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.cart-table__img img{width:68px;height:68px;object-fit:contain;background:var(--bg-2);border-radius:9px}
.cart-table__name{font-weight:600;color:var(--ink)}
.cart-table__variant{display:block;font-size:12.5px;color:var(--muted)}
.cart-table__qty{width:70px;padding:8px;border:1.5px solid var(--line);border-radius:9px;text-align:center}
.cart-table__remove{width:32px;height:32px;border:0;border-radius:50%;background:var(--bg-2);color:var(--muted);font-size:20px;cursor:pointer;line-height:1}
.cart-table__remove:hover{background:var(--accent);color:#fff}
.cart-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.summary{margin:0 0 14px}
.summary div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14.5px}
.summary dt{color:var(--ink-2)}
.summary dd{margin:0;font-weight:600}
.summary__total{border-top:1px solid var(--line);margin-top:6px;padding-top:11px !important}
.summary__total dt{font-weight:700;color:var(--ink)}
.summary__total dd{color:var(--accent);font-size:21px;font-weight:800}
.coupon{display:flex;gap:8px;margin-bottom:14px}
.coupon input{flex:1;padding:11px 15px;border:1.5px solid var(--line);border-radius:99px;min-width:0}

.order-lines{list-style:none;padding:0;margin:0 0 14px}
.order-lines li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
.order-lines__name em{font-style:normal;color:var(--muted);font-size:12.5px;margin-left:6px}

/* ------------------------------ Form ------------------------------ */
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:18px;box-shadow:var(--shadow-xs)}
fieldset.box{border:1px solid var(--line)}
.box legend{padding:0 8px;font-weight:700;color:var(--brand-dark)}
.form-stack label,.checkout label{display:block;margin-bottom:15px;font-size:14px;font-weight:600;color:var(--ink-2)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:12px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-weight:400;color:var(--ink);margin-top:5px;transition:.15s ease;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand-light);outline:none;box-shadow:0 0 0 4px rgba(109,31,156,.09)}
textarea{resize:vertical}
.has-error input,.has-error textarea{border-color:var(--accent)}
.has-error small{color:var(--accent);font-weight:500;display:block;margin-top:4px}
.form-msg{margin:8px 0 0;font-size:13.5px}
.form-msg.is-ok{color:var(--ok)}
.form-msg.is-err{color:var(--accent)}
.payopt{display:flex !important;gap:12px;align-items:flex-start;padding:15px;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:12px;cursor:pointer;font-weight:400 !important}
.payopt input{margin-top:4px;width:auto}
.payopt span{display:block}
.payopt em{display:block;font-style:normal;font-size:13px;color:var(--muted);font-weight:400}
.payopt:has(input:checked){border-color:var(--brand);background:var(--bg-3)}

/* ---------------------------- Thông báo --------------------------- */
.alert{padding:13px 17px;border-radius:var(--r-sm);margin:14px 0;font-size:14.5px;border-left:4px solid}
.alert--success{background:#e9f8ef;border-color:var(--ok);color:#0b5f36}
.alert--error{background:#fdecea;border-color:var(--accent);color:#9b1c14}
.alert--info{background:var(--bg-3);border-color:var(--brand);color:var(--brand-dark)}

.empty{text-align:center;padding:52px 20px;background:var(--bg-2);border-radius:var(--r-lg);margin:20px 0}
.empty__code{font-size:70px;font-weight:800;color:var(--brand-light);margin:0;line-height:1}
.empty--404{padding:64px 20px}

.success{text-align:center;padding:36px 0}
.success__icon{width:74px;height:74px;margin:0 auto 16px;border-radius:50%;background:var(--ok);color:#fff;font-size:38px;display:grid;place-items:center}
.success__code{color:var(--accent);font-size:20px}
.success__detail{text-align:left;max-width:660px;margin:24px auto}
.success__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

.order-status{display:inline-block;padding:3px 13px;border-radius:99px;font-size:13px;font-weight:600;background:var(--bg-3);color:var(--brand-dark)}
.order-status--completed{background:#e9f8ef;color:#0b5f36}
.order-status--cancelled{background:#fdecea;color:#9b1c14}
.order-status--shipping{background:#e8f1fd;color:#1c4e8a}
.order-result{margin-top:18px}

.data-table{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.data-table th,.data-table td{padding:12px 15px;border-bottom:1px solid var(--line);text-align:left;font-size:14.2px}
.data-table thead th{background:var(--bg-2);font-size:12.5px;text-transform:uppercase;color:var(--muted)}

/* --------------------------- Thương hiệu -------------------------- */
.brand-strip{display:flex;flex-wrap:wrap;gap:9px}
.brand-chip{padding:10px 20px;border:1.5px solid var(--line);border-radius:99px;font-weight:600;color:var(--ink-2);background:#fff}
.brand-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;color:var(--ink);box-shadow:var(--shadow-xs)}
.brand-card:hover{border-color:var(--brand-light);box-shadow:var(--shadow-lg);color:var(--ink)}
.brand-card strong{display:block;font-size:18px;color:var(--brand-dark)}
.brand-card em{font-style:normal;font-size:12.5px;color:var(--muted)}
.brand-card p{font-size:13.5px;color:var(--ink-2);margin:8px 0 0}

/* ------------------------------- FAQ ------------------------------ */
.faq-wrap{max-width:880px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;padding:2px 18px;box-shadow:var(--shadow-xs)}
.faq summary{padding:15px 0;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--brand);font-size:21px;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq summary::-webkit-details-marker{display:none}
.faq p{margin:0 0 15px;color:var(--ink-2);font-size:14.5px}

/* ------------------------------ Blog ------------------------------ */
.blog-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;margin-bottom:40px;align-items:start}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-xs);transition:.18s ease}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.post-card__media{display:block;aspect-ratio:16/10;background:var(--bg-2);overflow:hidden}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.post-card:hover .post-card__media img{transform:scale(1.05)}
.post-card__body{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1}
.post-card__cat{align-self:flex-start;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--pink);padding:3px 11px;border-radius:99px}
.post-card h2,.post-card h3{font-size:17px;margin:0;line-height:1.4}
.post-card h2 a,.post-card h3 a{color:var(--ink)}
.post-card h2 a:hover,.post-card h3 a:hover{color:var(--brand)}
.post-card p{font-size:13.8px;color:var(--ink-2);margin:0}
.post-card time{font-size:12.5px;color:var(--muted);margin-top:auto}

.article__head h1{font-size:33px;margin:10px 0}
.article__meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:16px}
.article__excerpt{font-size:17.5px;color:var(--ink-2);font-weight:500;border-left:4px solid var(--pink);padding-left:16px}
.article__cover{width:100%;border-radius:var(--r-lg);margin-bottom:22px}
.article__share{display:flex;gap:10px;align-items:center;margin:26px 0;font-size:14px}
.article__share a{padding:7px 17px;border:1.5px solid var(--line);border-radius:99px;font-weight:600}
.article__share a:hover{border-color:var(--brand)}
.article__cta{background:var(--bg-3);border:0}
.article__cta h2{font-size:20px}

/* ------------------------------ Giới thiệu ------------------------ */
.section--about{background:var(--bg-2)}
.about-text{max-width:920px;font-size:15.5px;color:var(--ink-2)}
.about-text h2{font-size:22px;color:var(--ink)}

/* ------------------------------ Liên hệ --------------------------- */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:40px;align-items:start}
.contact-list{list-style:none;padding:0;margin:0 0 18px}
.contact-list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.contact-list strong{min-width:110px;color:var(--muted);font-weight:600}
.tick-list{list-style:none;padding:0}
.tick-list li{padding:6px 0 6px 25px;position:relative;font-size:14.5px}
.tick-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.map{border-radius:var(--r);overflow:hidden;margin-top:14px}

/* ---------------------------- Dải cam kết -------------------------- */
.promise{background:var(--bg-2);border-top:1px solid var(--line);padding:26px 0}
.promise__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.promise__item{display:flex;gap:13px;align-items:flex-start}
.promise__item span{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-size:19px}
.promise__item strong{display:block;font-size:14.5px}
.promise__item em{font-style:normal;font-size:12.8px;color:var(--muted);line-height:1.4;display:block}

/* ------------------------------ Footer ---------------------------- */
.footer{background:var(--brand-dark);color:#d5c6e8}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:30px;padding:42px 18px 32px}
.footer a{color:#d5c6e8}
.footer a:hover{color:#fff}
.logo--footer .logo__text strong{color:#fff}
.logo--footer .logo__text em{color:#b6a2d0}
.footer__about{font-size:13.8px;margin:14px 0}
.footer__contact{list-style:none;padding:0;margin:0 0 16px;font-size:13.8px}
.footer__contact li{padding:4px 0}
.footer__contact strong{color:#fff}
.footer__title{font-size:15px;color:#fff;margin:0 0 12px}
.footer__col .footer__title:not(:first-child){margin-top:22px}
.footer__links{list-style:none;padding:0;margin:0;font-size:13.8px}
.footer__links li{padding:4px 0}
.subscribe{display:flex;flex-wrap:wrap;gap:8px}
.subscribe input{flex:1;min-width:150px;padding:11px 15px;border:0;border-radius:99px;margin:0}
.subscribe button{padding:11px 22px;border:0;border-radius:99px;background:var(--pink);color:#fff;font-weight:600;cursor:pointer}
.subscribe button:hover{background:var(--accent)}
.subscribe__msg{width:100%;font-size:13px;margin:4px 0 0}
.socials{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.socials a{padding:6px 15px;border:1px solid rgba(255,255,255,.25);border-radius:99px;font-size:13px}
.socials a:hover{background:rgba(255,255,255,.12)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.14);font-size:13px}
.footer__bottom-in{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;flex-wrap:wrap}
.footer__bottom p{margin:0}

/* -------------------------- Liên hệ nhanh ------------------------- */
.quick-contact{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:9px}
.quick-contact__btn{
  width:50px;height:50px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  color:#fff;box-shadow:var(--shadow-lg);font-size:12px;font-weight:700;transition:transform .16s ease;
}
.quick-contact__btn:hover{transform:scale(1.08);color:#fff}
.quick-contact__btn--call{background:var(--accent)}
.quick-contact__btn--zalo{background:#0068ff}
.quick-contact__btn--mess{background:#0084ff}
.quick-contact__btn--top{background:var(--brand)}

/* --------------------------- Menu di động ------------------------- */
.mobile-menu{position:fixed;inset:0;z-index:100;background:rgba(24,21,48,.55)}
.mobile-menu__panel{width:min(86vw,340px);height:100%;background:#fff;overflow-y:auto;animation:slidein .22s ease}
@keyframes slidein{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mobile-menu__head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;background:var(--grad);color:#fff}
.mobile-menu__head button{background:none;border:0;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.mobile-menu__list{list-style:none;padding:8px 0;margin:0}
.mobile-menu__list a{display:block;padding:11px 18px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--line-2)}
.mobile-menu__list ul{list-style:none;padding:0;margin:0;background:var(--bg-2)}
.mobile-menu__list ul a{padding-left:34px;font-weight:400;font-size:14px}

/* --------------------------- Toast thông báo ---------------------- */
.toast{
  position:fixed;right:16px;bottom:84px;z-index:140;max-width:330px;
  background:#fff;border-left:4px solid var(--ok);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:13px 17px;font-size:14px;animation:toastin .24s ease;
}
.toast--error{border-left-color:var(--accent)}
.toast strong{display:block}
@keyframes toastin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---------------------------- Quiz hero --------------------------- */
.quiz-hero{text-align:center;padding:28px 0 24px;max-width:640px;margin:0 auto}
.quiz-hero__tag{display:inline-block;background:var(--bg-3);color:var(--brand-dark);font-size:12px;font-weight:700;padding:5px 14px;border-radius:99px;margin-bottom:10px}
.quiz-hero h1{font-size:32px;margin:0 0 8px}
.quiz-hero p{color:var(--ink-2);font-size:16px;margin:0}
.compare-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}

/* ============================ RESPONSIVE ========================== */
@media (max-width:1180px){
  .prod-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid--shop{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(5,1fr)}
  .hero__in{grid-template-columns:1fr 280px}
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .mega__cols{grid-template-columns:1fr 1fr 1.2fr}
  .mega__col:nth-child(3){display:none}
}

@media (max-width:980px){
  .topbar__usp{display:none}
  .topbar__in{justify-content:center}
  .header__burger{display:flex}
  /* Trước đây ô tìm kiếm bị đẩy xuống dòng riêng (order:3 + flex-basis:100%),
     làm đầu trang trên điện thoại cao 112px. Giờ cho nó co lại nằm cùng hàng
     với logo. min-width:0 là bắt buộc — không có nó thì ô input giữ chiều
     rộng tối thiểu của chính nó và không chịu co. */
  .header__in{flex-wrap:nowrap;gap:12px}
  .searchbox{flex:1 1 auto;min-width:0;max-width:none}
  .nav{display:none}
  .hero__in{grid-template-columns:1fr}
  .hero__side{flex-direction:row}
  .hero__card{flex:1}
  .branches{grid-template-columns:1fr}
  .shop-layout,.cart-layout,.checkout,.product-detail,.blog-layout,.contact-layout,.services{grid-template-columns:1fr}
  .filters{position:static}
  .product-top{grid-template-columns:1fr;gap:22px}
  .usp__grid,.promise__grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .post-grid,.reviews-wall{grid-template-columns:repeat(2,1fr)}
  .cat-columns{grid-template-columns:repeat(2,1fr)}
  .quick-contact{flex-direction:row;right:auto;left:50%;transform:translateX(-50%);bottom:12px}
  .quizcta{padding:26px 22px}
}

@media (max-width:640px){
  body{font-size:15px}
  .container{padding:0 14px}
  .hotline span{display:none}
  .hotline{width:44px;height:44px;justify-content:center;border-radius:13px;padding:0}

  /* Màn hình 375px chỉ có 347px dùng được. Nút gọi và nút Yêu thích ẩn đi để
     ô tìm kiếm đủ chỗ nằm cùng hàng logo. KHÔNG mất chức năng nào:
       - gọi điện: đã có nút nổi ở góc dưới màn hình (mọi trang đều có)
       - yêu thích: có mục "Sản phẩm đã lưu" trong menu ba gạch          */
  .header__in{gap:8px;padding:11px 14px}
  .header__burger{padding:6px}
  .header .hotline{display:none}
  .header__actions{gap:8px}
  .header__actions .icon-btn:not(.icon-btn--cart){display:none}
  .icon-btn{width:40px;height:40px}
  .searchbox input{padding:9px 34px 9px 12px;font-size:14px}
  .searchbox button{width:30px;right:4px;top:4px;bottom:4px}
  .searchbox button svg{width:16px;height:16px}
  .prod-grid,.prod-grid--shop{grid-template-columns:repeat(2,1fr);gap:11px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .post-grid,.reviews-wall{grid-template-columns:1fr}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .cat-columns{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero__side{flex-direction:column}
  .section{padding:28px 0}
  .section__title{font-size:21px}
  .page-title{font-size:23px}
  .product-title{font-size:22px}
  .product-price strong{font-size:26px}
  .article__head h1{font-size:24px}
  .quiz-hero h1{font-size:24px}
  .quizcta h2{font-size:22px}
  .branch h2{font-size:21px}
  .flashsale{padding:16px 18px}
  .flashsale h2{font-size:18px}
  .footer__grid{grid-template-columns:1fr;gap:24px}
  .topbar__links{font-size:12.5px;gap:12px}
  .pcard__actions{flex-direction:column}
  .pcard__actions .btn{width:100%}

  /* Bảng thành thẻ trên điện thoại */
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border-bottom:1px solid var(--line);padding:10px 0;position:relative;display:grid;grid-template-columns:80px 1fr;gap:0 12px}
  .cart-table td{border:0;padding:3px 12px}
  .cart-table__img{grid-row:span 4}
  .cart-table td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-size:12.5px}
  .cart-table td:last-child{position:absolute;right:6px;top:10px;padding:0;width:auto}
  .data-table thead{display:none}
  .data-table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .data-table td{display:flex;justify-content:space-between;border:0;padding:4px 12px}
  .data-table td::before{content:attr(data-label);color:var(--muted);font-size:12.5px}
}

@media print{
  .topbar,.header,.nav,.footer,.quick-contact,.breadcrumb,.chat,.sproof,.compare-bar,.promise{display:none}
}


/* =====================================================================
   MẢNG PICKLEBALL LÀ CHÍNH
   Phong cách lấy từ banner Selkirk của cửa hàng: đỏ + đen + trắng, gạch
   chéo dứt khoát. Màu tím của Dũng Cửu vẫn giữ ở header và logo để khách
   quen mặt thương hiệu, đỏ chỉ dùng cho những khối đẩy hàng pickleball.
   ===================================================================== */

/* --- Menu: Pickleball là mục chính nên phải nhìn ra ngay --- */
.nav__item.is-main>a{font-weight:800;letter-spacing:.01em}
.nav__item.is-main>a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2.5px;
  border-radius:2px;background:var(--pkb);transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.nav__item.is-main:hover>a::after,.nav__item.is-main:focus-within>a::after{transform:scaleX(1)}
.mega--pkb{border-top:3px solid var(--pkb)}
.mega--pkb .mega__col a:hover{color:var(--pkb)}
.mega__n{
  font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  background:var(--bg-2);border-radius:99px;padding:1px 7px;margin-left:5px;
}

/* --- Hero --- */
.hero--pkb .hero__head h1{
  font-size:23px;color:var(--ink);
}
.hero--pkb .hero__head h1::before{
  content:"";display:inline-block;width:5px;height:19px;border-radius:2px;
  background:var(--pkb);margin-right:9px;transform:skewX(-12deg) translateY(2px);
}
.hero__card--pkb{
  background:linear-gradient(158deg,var(--pkb-dark) 0%,#23222c 55%,#3a1216 100%);
  border-color:transparent;color:#fff;
}
.hero__card--pkb h2{color:#fff}
.hero__card--pkb p{color:rgba(255,255,255,.82)}
.hero__card--pkb .btn--outline{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.hero__card--pkb .btn--outline:hover{--btn-bg:#fff;--btn-fg:var(--pkb-dark)}

/* --- Dải thương hiệu nổi bật --- */
.section--hang{padding-top:6px}
/* --- BĂNG CHẠY THƯƠNG HIỆU -------------------------------------------
   7 hãng trôi ngang liên tục. Danh sách được in HAI LẦN trong track, kéo
   track sang trái đúng 50% là bản sao về đúng chỗ bản đầu -> vòng lặp
   không thấy điểm nối.
   Khoảng cách giữa các thẻ đặt bằng margin-right CHỨ KHÔNG dùng gap:
   gap chỉ chèn vào giữa các thẻ nên nửa track không bằng đúng một vòng,
   chạy vài vòng là lệch dần. margin-right thì thẻ nào cũng cùng bề rộng.
   -------------------------------------------------------------------- */
.hang-bang{
  position:relative;overflow:hidden;
  --hang-khoang:12px;      /* cách nhau bao nhiêu */
  --hang-rong:150px;       /* bề ngang một thẻ */
  --hang-toc-do:38s;       /* chạy chậm, đọc kịp tên hãng */
}
.hang-bang__chay{
  display:flex;width:max-content;
  animation:hangChay var(--hang-toc-do) linear infinite;
  will-change:transform;
}
.hang-bang__chay > .hang-card{
  flex:0 0 var(--hang-rong);
  margin-right:var(--hang-khoang);
}
/* Rê chuột / chạm vào thì dừng để khách kịp bấm */
.hang-bang:hover .hang-bang__chay,
.hang-bang:focus-within .hang-bang__chay{animation-play-state:paused}

@keyframes hangChay{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* Mờ hai mép cho băng trông như chạy vô tận, không bị cắt cụt */
.hang-bang::before,
.hang-bang::after{
  content:"";position:absolute;top:0;bottom:0;width:44px;z-index:4;pointer-events:none;
}
.hang-bang::before{left:0;background:linear-gradient(90deg,var(--bg,#fff),transparent)}
.hang-bang::after{right:0;background:linear-gradient(270deg,var(--bg,#fff),transparent)}

/* Windows 11 mặc định tắt "Animation effects" ở nhiều máy, trình duyệt đọc
   thành prefers-reduced-motion: reduce. Trước đây gặp cờ này là băng đứng im —
   đúng là lý do trên máy sếp Giang nó không chạy. Băng logo chỉ trôi đều một
   chiều, không nhấp nháy, nên vẫn cho chạy; chỉ CHẬM LẠI cho dịu mắt. */
@media (prefers-reduced-motion:reduce){
  .hang-bang{--hang-toc-do:58s}
}
.hang-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-height:104px;padding:16px 10px;text-align:center;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
  color:var(--ink);box-shadow:var(--shadow-xs);overflow:hidden;
  transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease;
}
.hang-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:3;
  background:var(--pkb);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;
}
.hang-card:hover{transform:translateY(-3px);border-color:var(--pkb);box-shadow:var(--shadow-lg);color:var(--ink)}
.hang-card:hover::before{transform:scaleX(1)}
.hang-card__logo img{max-height:44px;width:auto;object-fit:contain}
.hang-card__ten{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--pkb-dark)}
.hang-card em{font-style:normal;font-size:12px;color:var(--muted)}

/* --- 2 mảng: pickleball to hơn, bóng bàn nhỏ lại --- */
.branches--pkb-first{grid-template-columns:1.45fr 1fr}
.branch--chinh{min-height:210px}
.branch--chinh h2{font-size:30px}
.branch--chinh .branch__tag{
  background:var(--pkb);opacity:1;padding:3px 11px;border-radius:99px;
  align-self:flex-start;font-size:11px;
}

/* --- Ô danh mục thuộc nhánh pickleball --- */
.cat-tile--pkb:hover{color:var(--pkb);border-color:var(--pkb)}

/* --- Khối kêu gọi làm quiz --- */
.quizcta--pkb{background:var(--grad-pkb)}

/* --- Trang thương hiệu --- */
.brand-heading{font-size:19px;margin:6px 0 14px;color:var(--ink)}
.brand-grid--noibat{grid-template-columns:repeat(3,1fr)}
.brand-card--noibat{border-color:rgba(225,27,34,.35);border-left:4px solid var(--pkb)}
.brand-card--noibat strong{color:var(--pkb-dark)}
.brand-card__n{
  display:inline-block;margin-top:6px;font-size:12px;font-weight:700;
  color:var(--pkb);background:var(--pkb-soft);border-radius:99px;padding:2px 10px;
}

@media (max-width:1024px){
  .brand-grid--noibat{grid-template-columns:repeat(2,1fr)}
  .branches--pkb-first{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand-grid--noibat{grid-template-columns:1fr}
  .hero--pkb .hero__head h1{font-size:19px}
  .branch--chinh h2{font-size:25px}
}


/* --- Đồ bóng bàn gom vào mục "Bán sỉ CLB" ---------------------------
   Danh sách dài hơn menu xổ thường (bảng giá sỉ + 9 danh mục bóng bàn),
   nên xếp 2 cột cho khỏi tràn quá chiều cao màn hình.
   ------------------------------------------------------------------- */
.nav__sub--rong{
  min-width:430px;
  display:grid;grid-template-columns:1fr 1fr;column-gap:4px;
  padding:10px 6px;
}
.nav__sub--rong>li:first-child,
.nav__sub-label,
.nav__sub--rong>li:last-child{grid-column:1 / -1}
.nav__sub-label{
  padding:9px 14px 3px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.nav__sub--rong a{padding:8px 14px;border-radius:8px}
.nav__sub--rong>li:first-child a{font-weight:700;color:var(--ink)}
.nav__sub-all{font-weight:700;color:var(--pkb) !important}


/* --- Thẻ thương hiệu có ảnh nền -------------------------------------
   Nền trắng trơn nhìn nhạt. Mỗi thẻ lấy ảnh một cây vợt CỦA CHÍNH HÃNG ĐÓ
   làm nền, phủ lớp tối dần xuống đáy để tên hãng luôn đọc được dù ảnh gốc
   sáng (Selkirk, Kamito nền trắng) hay tối (Kaiwin, Loco).
   Hãng chưa có ảnh nền vẫn giữ kiểu thẻ trắng cũ.
   ------------------------------------------------------------------- */
.hang-card--anh{
  min-height:158px;
  align-items:flex-start;justify-content:flex-end;
  gap:3px;padding:16px;text-align:left;
  background:var(--pkb-dark);border-color:transparent;color:#fff;
}
.hang-card__nen{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .4s ease;
}
.hang-card--anh::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,16,23,.10) 0%,rgba(13,16,23,.52) 52%,rgba(13,16,23,.90) 100%);
}
.hang-card--anh:hover{color:#fff;border-color:var(--pkb)}
.hang-card--anh:hover .hang-card__nen{transform:scale(1.07)}
.hang-card--anh .hang-card__ten{
  position:relative;z-index:2;color:#fff;font-size:16.5px;line-height:1.2;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hang-card--anh em{
  position:relative;z-index:2;color:rgba(255,255,255,.82);
  text-shadow:0 1px 5px rgba(0,0,0,.5);
}

@media (max-width:560px){
  .hang-card--anh{min-height:128px;padding:12px}
  .hang-card--anh .hang-card__ten{font-size:14.5px}
}


/* --- Điện thoại: gọn phần đầu trang chủ ------------------------------
   Banner Selkirk đã nói đủ ý ngay dòng đầu, thêm tiêu đề + đoạn mô tả nữa
   là đẩy banner xuống quá sâu, khách phải cuộn mới thấy hàng.

   ĐẨY RA NGOÀI MÀN HÌNH chứ KHÔNG display:none — thẻ H1 vẫn phải nằm trong
   mã nguồn cho Google đọc. Google xếp hạng theo bản điện thoại, xoá hẳn H1
   là mất từ khoá chính "Vợt Pickleball chính hãng".

   Cả cột bên phải (thẻ "Tư vấn chọn vợt" + thẻ "Cũng có tại cửa hàng") bỏ
   hẳn được, không mất lối đi nào:
     - nút Tư vấn chọn vợt  -> thanh trên cùng
     - nút gọi / Zalo / Messenger -> cụm nút nổi góc màn hình
     - HLV, đồ bóng bàn, dán vợt, độ đế giày -> menu ba gạch, khối dịch vụ
       và thẻ 2 mảng ngay bên dưới trang chủ
   Ẩn cả .hero__side chứ không ẩn từng thẻ, để không còn khoảng trống thừa
   do khoảng cách giữa các thẻ (gap) để lại.
   ------------------------------------------------------------------- */
@media (max-width:640px){
  .hero--pkb .hero__head{
    position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0;
  }
  .hero--pkb .hero__side{display:none}
  .hero--pkb .hero__in{gap:0}
  .hero--pkb{padding-top:12px;padding-bottom:0}
}


/* --- Menu điện thoại: xếp giống mega menu bên desktop ------------------
   Có nhãn nhóm (Thương hiệu / Mua theo loại / Đồ bóng bàn) nên danh sách
   dài vẫn đọc ra từng cụm, không thành một dải chữ liền.
   ---------------------------------------------------------------------- */
.mobile-menu__label{
  padding:12px 18px 5px;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);background:var(--bg-2);
}
.mobile-menu__list ul .mobile-menu__label{padding-left:18px}
.mobile-menu__n{
  font-style:normal;font-size:11px;font-weight:700;color:var(--muted);
  background:#fff;border-radius:99px;padding:1px 7px;margin-left:6px;
}
.mobile-menu__all{color:var(--pkb) !important;font-weight:700 !important}
.mobile-menu__sale{color:var(--accent) !important}

/* --- Thẻ thương hiệu dùng LOGO chính hãng ---------------------------
   Logo các hãng đều thiết kế cho nền sáng (Joola đen, Kaiwin xanh, Kamito
   đỏ, Selkirk đen-đỏ) nên thẻ để nền trắng logo mới đúng màu. Ảnh cây vợt
   của hãng vẫn còn, mờ hiện lên khi rê chuột — giữ được nét sinh động mà
   không làm chìm logo.
   -------------------------------------------------------------------- */
.hang-card--logo{
  /* Thu còn một nửa chiều cao: 132px -> 66px, dải logo thành thanh mỏng.
     Bỏ dòng "N sản phẩm" nên logo chiếm trọn ô, chỉ chừa mép nhỏ. */
  min-height:66px;
  justify-content:center;align-items:center;gap:0;
  padding:9px 12px;text-align:center;
  background:#fff;border-color:var(--line);color:var(--ink);
}
.hang-card--logo .hang-card__nen{
  opacity:0;filter:saturate(1.05);transition:opacity .3s ease,transform .4s ease;
}
.hang-card--logo:hover{border-color:var(--pkb);color:var(--ink)}
.hang-card--logo:hover .hang-card__nen{opacity:.14;transform:scale(1.05)}
.hang-card__anhlogo{
  position:relative;z-index:2;display:grid;place-items:center;
  width:100%;height:48px;
}
.hang-card__anhlogo img{
  max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain;
}
.hang-card--logo em{position:relative;z-index:2;color:var(--muted);font-size:11px;flex-shrink:0}

@media (max-width:560px){
  .hang-card--logo{min-height:58px;padding:8px 10px}
  .hang-card__anhlogo{height:42px}
  .hang-card__anhlogo img{max-height:42px}
}


/* --- Điện thoại: dải thương hiệu rút gọn tối đa ----------------------
   Mục tiêu: khách mở web trên điện thoại là thấy HÀNG càng sớm càng tốt.
   Nên bỏ dòng phụ và nút "Xem tất cả" (tiêu đề đã gắn link thay), và xếp
   cả 6 logo trên MỘT dòng thay vì 2 cột × 3 hàng.
   -------------------------------------------------------------------- */
.section__title-link{color:inherit}
.section__title-link:hover{color:var(--pkb)}

@media (max-width:640px){
  /* Nút "Xem tất cả" đã bỏ hẳn khỏi HTML, ở đây chỉ còn giấu dòng phụ. */
  .section__head--hang .section__sub{display:none}
  .section__head--hang{margin-bottom:10px}
  /* Thu cỡ chữ để tiêu đề gọn 1 dòng, khỏi ngốn thêm 34px chiều cao */
  .section--hang .section__title{font-size:18px;line-height:1.25}

  /* Băng chạy thu nhỏ: thẻ hẹp lại để lọt được ~3,5 hãng trên màn hình,
     chiều cao vẫn mỏng như cũ nên ảnh sản phẩm không bị đẩy xuống. */
  .hang-bang{--hang-rong:104px;--hang-khoang:6px;--hang-toc-do:30s}
  .hang-bang::before,.hang-bang::after{width:26px}
  .hang-card--logo{min-height:44px;padding:4px 3px;border-radius:9px}
  .hang-card__anhlogo{height:34px}
  .hang-card__anhlogo img{max-height:34px}
  .hang-card--logo::before{height:2px}
  .section--hang{padding-top:14px;padding-bottom:14px}
}

/* --- Đổi chữ tiêu đề theo bề ngang màn hình -------------------------
   Chỉ MỘT thẻ h2, đổi phần chữ hiện ra. Máy tính giữ câu đầy đủ cho
   Google đọc được từ khoá; điện thoại rút gọn cho khỏi ngốn màn hình.
   -------------------------------------------------------------------- */
.chi-dien-thoai{display:none}

@media (max-width:640px){
  .chi-may-tinh{display:none}
  .chi-dien-thoai{display:inline}

  /* Bỏ dòng phụ và nút "Xem tất cả" — tiêu đề đã gắn link thay */
  .section__head--gon .section__sub,
  .section__head--gon .section__more{display:none}
  .section__head--gon{margin-bottom:10px}
  .section__head--gon .section__title{font-size:18px;line-height:1.25}
}