/* ============================================================
   Hưng Anh Studio — v4 "macOS Soft"
   Bo tròn mềm · kính mờ · bóng nhiều lớp · hover mượt
   Font: Inter 14px
   ============================================================ */
:root{
  --ink:#12232e;             /* chữ đen ngả xanh */
  --body:#4a5c6a;
  --mute:#8496a4;
  --line:#e6ecf0;
  --bg:#f7f9fa;              /* nền xám rất nhẹ */
  --card:#ffffff;
  --glass:rgba(255,255,255,.75);

  /* Cam — màu hành động */
  --orange:#ff7a1a;
  --orange-dark:#e8630a;
  --orange-soft:#fff2e6;

  /* Xanh ngọc — màu công nghệ */
  --teal:#00b8a9;
  --teal-dark:#009186;
  --teal-soft:#e0f7f5;
  --cyan:#06d6c4;

  /* Giữ tên biến cũ để không vỡ, ánh xạ sang màu mới */
  --blue:#00b8a9;
  --blue-dark:#009186;
  --blue-soft:#e0f7f5;
  --violet:#00b8a9;
  --pink:#ff7a1a;
  --amber:#ff9f0a;
  --green:#00b8a9;
  --price-red:#dc2626;

  --r-sm:10px; --r:14px; --r-lg:10px; --r-xl:10px; --r-pill:999px;

  --sh-1:0 1px 1px rgba(18,35,46,.01), 0 2px 4px rgba(18,35,46,.015);
  --sh-2:0 1px 2px rgba(18,35,46,.015), 0 4px 10px rgba(18,35,46,.02), 0 8px 24px rgba(18,35,46,.02);
  --sh-3:0 2px 4px rgba(18,35,46,.02), 0 8px 20px rgba(18,35,46,.03), 0 20px 48px rgba(18,35,46,.04);
  --sh-4:0 4px 8px rgba(18,35,46,.025), 0 16px 36px rgba(18,35,46,.045), 0 32px 80px rgba(18,35,46,.06);
  --sh-blue:0 4px 14px rgba(0,184,169,.26), 0 12px 32px rgba(0,184,169,.18);
  --sh-orange:0 4px 14px rgba(255,122,26,.3), 0 12px 32px rgba(255,122,26,.2);

  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',system-ui,sans-serif;
  font-size:calc(14px + var(--font-bump, 0px));line-height:1.6;color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);font-weight:700;line-height:1.16;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Chặn tràn ngang mà KHÔNG phá position:sticky
   (overflow-x:hidden trên html/body sẽ làm hỏng sticky) */
body{max-width:100vw}
main,header,footer,section{max-width:100%}
img,svg{max-width:100%}
.lucide{stroke-width:1.7}
.eyebrow{font-size:calc(12px + var(--font-bump, 0px));font-weight:600;letter-spacing:.04em;color:var(--blue);display:inline-block;margin-bottom:10px}

/* ---------- Nút bấm ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:calc(14px + var(--font-bump, 0px));font-weight:600;padding:12px 24px;border:0;
  border-radius:var(--r-pill);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;
}
.btn::after{ /* ánh sáng lướt qua khi hover */
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-100%);transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(100%)}
.btn:active{transform:scale(.96)}
.btn-lg{padding:14px 30px;font-size:calc(15px + var(--font-bump, 0px))}
.btn-blue{background:linear-gradient(135deg,#ff8f3a,#ff7a1a);color:#fff;box-shadow:var(--sh-orange)}
.btn-blue:hover{background:linear-gradient(135deg,#ff7a1a,#e8630a);transform:translateY(-2px) scale(1.02);box-shadow:0 8px 24px rgba(255,122,26,.4), 0 18px 46px rgba(255,122,26,.26)}
.btn-glass{background:var(--glass);color:var(--ink);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-2)}
.btn-glass:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--sh-3);background:rgba(255,255,255,.9)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--sh-2)}
.btn-dark:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--sh-3)}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue-soft)}

/* ---------- Thanh trên ---------- */
.topbar{background:rgba(18,35,46,.93);backdrop-filter:blur(20px);color:#d2d2d7;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.5}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:5px 24px}
.topbar b{color:#fff;font-weight:600}
.topbar-hotline{flex:0 0 auto;white-space:nowrap}
.topbar-greeting{display:block;min-width:0;width:min(430px,48vw);overflow:hidden;color:#fff;white-space:nowrap}
.topbar-greeting-track{display:inline-block;min-width:max-content;padding-left:100%;animation:topbarGreetingRun 13s linear infinite;will-change:transform}
@keyframes topbarGreetingRun{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media(max-width:768px){.topbar .tr{display:none}}

/* ---------- Header kính mờ ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(247,249,250,.82);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(18,35,46,.07);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
/* Khi cuộn xuống: chỉ thêm nền và bóng nhẹ, không đổi kích thước header */
.site-header.stuck{
  background:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(18,35,46,.04), 0 6px 20px rgba(18,35,46,.06);
}
.header-inner{position:relative;z-index:3;display:flex;align-items:center;gap:28px;padding:12px 24px;overflow:visible}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;transition:transform .3s var(--ease)}
.brand:hover{transform:scale(1.03)}
.brand-mark{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(145deg,#1d4a5c,#12232e);
  display:grid;place-items:center;position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06);box-shadow:0 4px 10px rgba(0,0,0,.2), 0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18)}
.brand-mark svg{width:21px;height:21px;color:#fff}
.brand-name{font-size:calc(15.5px + var(--font-bump, 0px));font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.brand-name span{display:block;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:500;color:var(--mute)}

.search{
  position:relative;flex:0 0 420px;width:420px;max-width:420px;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r-pill);padding:0 16px;
  transition:all .35s var(--ease);box-shadow:var(--sh-1);
}
.search:focus-within{
  background:#fff;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,184,169,.12), var(--sh-2);
  transform:scale(1.01);z-index:220;
}
.search[aria-expanded="true"]{z-index:220}
.search svg{width:16px;height:16px;color:var(--mute);flex-shrink:0;transition:color .25s}
.search:focus-within svg{color:var(--blue)}
.search input{flex:1;border:0;background:transparent;padding:10px 0;font-size:calc(14px + var(--font-bump, 0px));font-family:inherit;color:var(--ink);outline:none}
.search input::placeholder{color:var(--mute);opacity:1}
.search-spinner{flex:0 0 16px;width:16px;height:16px;border:2px solid #cfe9e6;border-top-color:var(--teal);border-radius:50%;animation:searchSpin .65s linear infinite}
.search-spinner[hidden],.search-suggestions[hidden]{display:none}
@keyframes searchSpin{to{transform:rotate(360deg)}}
.search-suggestions{
  position:absolute;z-index:120;top:calc(100% + 9px);left:0;right:0;
  max-height:min(520px,70vh);overflow-y:auto;padding:8px;
  border:1px solid #e3e8eb;border-radius:16px;background:#fff;
  box-shadow:0 14px 36px rgba(18,35,46,.13),0 3px 10px rgba(18,35,46,.06);
  text-align:left;
}
.search-suggest-group-title{padding:5px 8px 6px;color:#8a959e;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.search-suggest-divider{height:1px;margin:7px 6px;background:#e9edef}
.search-suggest-item{display:flex;align-items:center;gap:10px;padding:7px;border-radius:10px;transition:background .18s ease}
.search-suggest-item:hover,.search-suggest-item.is-active{background:#f3f8f7}
.search-suggest-thumb{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;overflow:hidden;border-radius:9px;background:#f3f5f6;color:var(--teal-dark)}
.search-suggest-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.search .search-suggest-thumb svg{width:18px;height:18px;color:var(--teal-dark)}
.search-suggest-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.search-suggest-name{overflow:hidden;color:#26343f;font-size:calc(12.5px + var(--font-bump, 0px));font-weight:600;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.search-suggest-meta{color:#89949d;font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.3}
.search-suggest-item.is-product .search-suggest-meta{color:var(--price-red);font-weight:600}
.search-suggest-empty{padding:18px 12px;text-align:center;color:#7f8c96;font-size:calc(12.5px + var(--font-bump, 0px))}
/* Con trỏ nhấp nháy khi đang gõ */
.search.typing::after{
  content:"";width:1.5px;height:16px;background:var(--teal);
  animation:caret .75s step-end infinite;margin-left:-2px;flex-shrink:0;
}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}

.nav{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}
.nav-link{
  padding:8px 14px;border-radius:var(--r-pill);font-weight:500;color:var(--body);
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  transition:all .28s var(--ease);position:relative;
}
.nav-link:hover{color:var(--teal-dark)}
.nav-link.on{color:var(--teal-dark);font-weight:600}
.cart-btn.on{box-shadow:0 0 0 2px rgba(0,184,169,.2),var(--sh-1)}
.cart-btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 12px;
  background:var(--ink);color:#fff;border-radius:10px;font-weight:600;cursor:pointer;
  box-shadow:var(--sh-2);transition:all .3s var(--ease);
}
.cart-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--sh-3)}
.cart-btn svg{width:17px;height:17px}
.cart-num{
  min-width:19px;height:19px;padding:0 5px;background:var(--blue);border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:calc(11px + var(--font-bump, 0px));font-weight:700;
  transition:transform .4s var(--ease);
}
.cart-num.pop{transform:scale(1.5)}

/* ---------- Hero ---------- */
.hero{padding:60px 0 48px;position:relative;overflow:hidden}
.hero::before{ /* quầng sáng mềm */
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:900px;height:500px;pointer-events:none;
  background:radial-gradient(ellipse,rgba(0,184,169,.10),rgba(255,122,26,.06) 45%,transparent 70%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hero h1{font-size:calc(48px + var(--font-bump, 0px));font-weight:800;letter-spacing:-.035em;margin-bottom:16px;line-height:1.06}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(120deg,#00b8a9,#ff7a1a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{font-size:calc(16px + var(--font-bump, 0px));color:var(--body);max-width:430px;margin-bottom:28px;line-height:1.65}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:36px}
.hero-stats{display:flex;gap:14px}
.stat{
  flex:1;background:var(--card);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--sh-2);transition:all .4s var(--ease);cursor:default;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.stat b{display:block;font-size:calc(22px + var(--font-bump, 0px));font-weight:800;color:var(--ink);letter-spacing:-.02em}
.stat span{font-size:calc(11.5px + var(--font-bump, 0px));color:var(--mute)}

/* Card sản phẩm nổi trong hero — glass + tilt */
.spot{
  position:relative;padding:22px;border-radius:var(--r-xl);
  background:var(--glass);
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:var(--sh-4);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor:pointer;
}
.spot:hover{transform:translateY(-3px) rotateX(2deg) rotateY(-2deg);box-shadow:0 8px 16px rgba(0,0,0,.06), 0 24px 50px rgba(0,0,0,.12), 0 48px 100px rgba(0,0,0,.14)}
.spot-tag{
  display:inline-flex;align-items:center;gap:5px;font-size:calc(11px + var(--font-bump, 0px));font-weight:600;
  color:var(--blue);background:var(--blue-soft);padding:5px 11px;border-radius:var(--r-pill);margin-bottom:16px;
}
.spot-img{
  aspect-ratio:16/10;border-radius:var(--r-lg);margin-bottom:18px;
  background:linear-gradient(150deg,#f0f2f6,#e4e8ef);
  display:grid;place-items:center;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.05);
}
.spot-img svg{width:66%;color:var(--blue);opacity:.85;transition:transform .6s var(--ease)}
.spot:hover .spot-img svg{transform:scale(1.08)}
.spot h3{font-size:calc(17px + var(--font-bump, 0px));margin-bottom:5px}
.spot .d{font-size:calc(12.5px + var(--font-bump, 0px));color:var(--mute);margin-bottom:16px}
.spot-foot{display:flex;align-items:center;justify-content:space-between}
.spot .price{font-size:calc(21px + var(--font-bump, 0px));font-weight:800;color:var(--ink);letter-spacing:-.02em}
.spot .price s{font-size:calc(13px + var(--font-bump, 0px));font-weight:400;color:var(--mute);margin-left:7px}
.spot .save{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:600;color:var(--green);background:rgba(255,122,26,.12);padding:6px 11px;border-radius:var(--r-pill)}

/* ---------- Dải tin cậy ---------- */
.trust{padding:8px 0 56px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tcard{
  background:var(--card);border-radius:var(--r-lg);padding:20px;
  box-shadow:var(--sh-2);transition:all .4s var(--ease);cursor:default;
  display:flex;gap:13px;align-items:center;
}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--sh-3)}
.tico{
  width:42px;height:42px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;color:#fff;
  transition:transform .45s var(--ease);
}
.tcard:hover .tico{transform:scale(1.1) rotate(-6deg)}
.tico svg{width:20px;height:20px}
.tcard b{display:block;color:var(--ink);font-size:calc(13.5px + var(--font-bump, 0px));font-weight:600;margin-bottom:1px}
.tcard span{font-size:calc(12px + var(--font-bump, 0px));color:var(--mute)}

/* ---------- Section ---------- */
.section{padding:64px 0}
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.shead h2:not(.section-title){font-size:calc(32px + var(--font-bump, 0px));letter-spacing:-.03em}
.shead p{color:var(--mute);margin-top:5px}
.see{
  display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--blue);
  padding:8px 16px;border-radius:var(--r-pill);cursor:pointer;
  transition:all .3s var(--ease);
}
.see:hover{background:var(--blue-soft);gap:9px}
.see svg{width:16px;height:16px;flex-shrink:0}

/* ---------- Danh mục (icon đẹp, hover nảy) ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cat{
  background:var(--card);border:1px solid rgba(18,35,46,.06);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--sh-1);cursor:pointer;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.cat:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:rgba(0,184,169,.28)}
.cat .ci{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;color:#fff;flex-shrink:0;
  transition:transform .35s var(--ease);
}
.cat:hover .ci{transform:scale(1.08) rotate(-5deg)}
.ci svg{width:25px;height:25px}
.ci.c1{background:linear-gradient(145deg,#2fded0,#00b8a9);box-shadow:0 6px 16px rgba(0,184,169,.3)}
.ci.c2{background:linear-gradient(145deg,#ffa057,#ff7a1a);box-shadow:0 6px 16px rgba(255,122,26,.3)}
.ci.c3{background:linear-gradient(145deg,#2fded0,#00b8a9);box-shadow:0 6px 16px rgba(0,184,169,.3)}
.ci.c4{background:linear-gradient(145deg,#ffa057,#ff7a1a);box-shadow:0 6px 16px rgba(255,122,26,.3)}
.ci.c5{background:linear-gradient(145deg,#2fded0,#00b8a9);box-shadow:0 6px 16px rgba(0,184,169,.3)}
.ci.c6{background:linear-gradient(145deg,#ffa057,#ff7a1a);box-shadow:0 6px 16px rgba(255,122,26,.3)}
.cat b{display:block;color:var(--ink);font-size:calc(13.5px + var(--font-bump, 0px));font-weight:650;line-height:1.3}
.cat span{font-size:calc(11.5px + var(--font-bump, 0px));color:var(--mute)}
.cats-compact .cat{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:11px;align-items:center;text-align:left;min-height:74px}
.cats-compact .cat .ci{grid-row:1 / span 2;margin:0}
.cats-compact .cat b{margin-bottom:2px}

/* ---------- Danh mục nổi bật: chỉ icon + tên, 8 cột trên desktop ---------- */
.featured-categories{padding:0 0 58px}
.hsplit + .featured-categories{padding-top:28px}
.featured-categories-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.featured-categories-kicker{display:block;margin-bottom:6px;color:#ff5b00;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:700;letter-spacing:.065em;text-transform:uppercase}
.featured-categories-head h2:not(.section-title){margin:0;color:#07111f;font-size:calc(28px + var(--font-bump, 0px));font-weight:750;letter-spacing:-.03em;line-height:1.16}
.featured-categories-count{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #e6eaee;border-radius:999px;background:#fff;color:#697684;font-size:calc(12px + var(--font-bump, 0px));font-weight:500;white-space:nowrap}
.featured-categories-count svg{width:15px;height:15px;color:#ff6a0a}
.featured-category-grid{display:grid;grid-template-rows:repeat(2,minmax(90px,auto));grid-auto-flow:column;grid-auto-columns:calc((100% - 50px)/6);gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:3px;cursor:grab;user-select:none}
.featured-category-grid.is-dragging{cursor:grabbing;scroll-snap-type:none}
.featured-category-grid::-webkit-scrollbar{display:none;width:0;height:0}
.featured-category-card{display:flex;width:auto;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-width:0;min-height:90px;padding:5px 6px;text-align:center;scroll-snap-align:start;border:0;border-radius:11px;background:#fff;transition:box-shadow .25s var(--ease)}
.featured-category-extra[hidden]{display:none}
.featured-category-card:hover{box-shadow:0 7px 18px rgba(26,42,57,.06)}
.featured-category-more{appearance:none;width:100%;font:inherit;text-align:left;cursor:pointer;color:inherit;background:#fffaf6;border-color:#ffe0c8}
.featured-category-more .featured-category-icon{background:#fff0e5;color:#f0640a}
.featured-category-more .featured-category-arrow svg{transition:transform .25s var(--ease)}
.featured-category-more.is-open .featured-category-arrow svg{transform:rotate(180deg)}
.featured-category-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:8px;background:#fff3eb;color:#ff5b00;transition:background .25s var(--ease)}
.featured-category-icon svg{width:18px;height:18px}
.featured-category-photo{display:flex;align-items:center;justify-content:center;flex:0 0 54px;width:118px;height:54px;overflow:visible;border:0;border-radius:0;background:transparent;perspective:180px}
.featured-category-panel{position:relative;display:block;flex:0 0 39px;height:45px;overflow:hidden;background:transparent;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.34,1.56,.64,1);will-change:transform}
.featured-category-panel + .featured-category-panel{margin-left:-3px}
.featured-category-panel img{position:absolute;top:0;display:block;width:300%;max-width:none;height:100%;object-fit:fill;pointer-events:none;-webkit-user-drag:none}
.featured-category-panel.is-left{z-index:1;filter:blur(.18px) saturate(.96) opacity(.92);transform:rotateY(32deg) scale(.88);transform-origin:right center;transition-delay:0s}
.featured-category-panel.is-left img{left:0}
.featured-category-panel.is-center{z-index:3;flex-basis:52px;height:52px;filter:none;transform:translateZ(7px);transition-delay:.14s}
.featured-category-panel.is-center img{left:-100%}
.featured-category-panel.is-right{z-index:1;filter:blur(.18px) saturate(.96) opacity(.92);transform:rotateY(-32deg) scale(.88);transform-origin:left center;transition-delay:.07s}
.featured-category-panel.is-right img{left:-200%}
.featured-category-photo svg{width:20px;height:20px;color:#ff5b00}
@media(hover:hover) and (pointer:fine){
  .featured-category-card:hover .featured-category-panel.is-center{transform:translateZ(9px) translateY(-4.5px);transition-delay:0s}
  .featured-category-card:hover .featured-category-panel.is-right{transform:translateY(-4.5px) rotateY(-32deg) scale(.88);transition-delay:.09s}
  .featured-category-card:hover .featured-category-panel.is-left{transform:translateY(-4.5px) rotateY(32deg) scale(.88);transition-delay:.18s}
}
.featured-category-rail-meta{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:28px;margin-top:5px}
.featured-category-dots{display:flex;align-items:center;justify-content:center;gap:7px}
.featured-category-dots button{appearance:none;width:11px;height:11px;padding:0;border:0;border-radius:999px;background:#cfd6dc;cursor:pointer;transition:width .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.featured-category-dots button:hover{background:#aeb8c0;transform:scale(1.12)}
.featured-category-dots button.is-active{width:30px;background:#ff7a1a;box-shadow:0 3px 10px rgba(255,122,26,.3)}
.featured-category-scroll-hint{display:flex;align-items:center;justify-content:center;justify-self:end;width:max-content;gap:5px;margin:0;padding:5px 9px;border:1px solid #ffe1ca;border-radius:999px;background:#fff8f3;color:#a54e18;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:600}
.featured-category-scroll-hint svg{width:14px;height:14px;animation:category-hint-nudge 1.8s var(--ease) infinite}
@keyframes category-hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.featured-category-card:hover .featured-category-icon{background:#ffe9da}
.featured-category-copy{display:block;min-width:0;flex:none}
.featured-category-copy b{display:-webkit-box;overflow:hidden;margin:0;color:#07111f;font-size:calc(14px + var(--font-bump, 0px));font-weight:600;line-height:1.2;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.featured-category-copy small{display:none}
.featured-category-arrow{display:none}
.featured-category-arrow svg{width:16px;height:16px}
.featured-category-card:hover .featured-category-arrow{color:#ff6a0a;transform:translateX(2px)}

/* ---------- Slider ---------- */
.slider{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-4)}
.slides{display:flex;transition:transform .8s var(--ease)}
.slide{min-width:100%;aspect-ratio:21/8;display:grid;place-items:center;position:relative;overflow:hidden;isolation:isolate;background:#12232e}
.slide-media{position:absolute;inset:0;z-index:0}
.slide-media img{width:100%;height:100%;object-fit:cover;display:block}
.slide-1 .slide-media img{object-position:62% center}
.slide-2 .slide-media img{object-position:center}
.slide-3 .slide-media img{object-position:center}
.slide::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(8,18,22,.83) 0%,rgba(8,18,22,.58) 38%,rgba(8,18,22,.1) 74%),radial-gradient(ellipse at 20% 15%,rgba(0,184,169,.2),transparent 50%)}
.swave{position:absolute;inset:0;width:100%;height:100%;opacity:.2}
.sin{position:relative;z-index:2;text-align:left;color:#fff;padding:28px 34px;margin-right:auto;margin-left:54px;max-width:500px;border-left:2px solid rgba(255,255,255,.7)}
.sin .e{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8);display:block;margin-bottom:10px}
.sin h2{color:#fff;font-size:calc(32px + var(--font-bump, 0px));letter-spacing:-.03em;margin-bottom:10px;line-height:1.14;text-shadow:0 2px 18px rgba(0,0,0,.32)}
.sin p{color:rgba(255,255,255,.9);font-size:calc(14px + var(--font-bump, 0px));margin-bottom:20px;max-width:420px}
.snav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.18);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.3);
  display:grid;place-items:center;color:#fff;
  transition:all .35s var(--ease);
}
.snav:hover{background:rgba(255,255,255,.32);transform:translateY(-50%) scale(1.12)}
.snav:active{transform:translateY(-50%) scale(.94)}
.snav svg{width:19px;height:19px}
.snav.p{left:18px} .snav.n{right:18px}
.sdots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px;
  background:rgba(0,0,0,.16);backdrop-filter:blur(12px);padding:7px 11px;border-radius:var(--r-pill)}
.sdots .d{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:all .4s var(--ease)}
.sdots .d:hover{background:rgba(255,255,255,.75)}
.sdots .d.on{background:#fff;width:24px;border-radius:var(--r-pill)}

/* ---------- Sản phẩm ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.related-grid{grid-template-columns:repeat(5,1fr);gap:14px}
/* Box trắng gộp "Sản phẩm liên quan" + "Sản phẩm đã xem" */
.combo-box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 22px;box-shadow:var(--sh-1)}
.combo-head{margin-bottom:14px}
.combo-head .section-title{margin:0}
.combo-head-sep{margin-top:24px;padding-top:20px;border-top:1px dashed var(--line)}
.product-discovery-box{border:0;background:linear-gradient(145deg,#fff 0%,#fff 72%,#f7fbfa 100%);box-shadow:0 8px 26px rgba(18,35,46,.045)}
.product-discovery-head p{margin:3px 0 0 14px;color:#82909b;font-size:calc(12px + var(--font-bump, 0px));line-height:1.4}
.product-discovery-grid .pcard{animation:product-card-reveal .42s var(--ease) both}
.product-discovery-grid .pcard:nth-child(2){animation-delay:.035s}
.product-discovery-grid .pcard:nth-child(3){animation-delay:.07s}
.product-discovery-grid .pcard:nth-child(4){animation-delay:.105s}
.product-discovery-grid .pcard:nth-child(5){animation-delay:.14s}
@keyframes product-card-reveal{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.pcard{
  position:relative;display:flex;flex-direction:column;padding:16px;overflow:hidden;cursor:pointer;
  background:#fff;border:1px solid #eaedf0;border-radius:16px;
  box-shadow:none;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.pcard:hover{border-color:#ffcda8;box-shadow:0 8px 22px rgba(18,35,46,.065)}
.pthumb{
  width:100%;aspect-ratio:1/1;position:relative;overflow:hidden;margin-bottom:14px;
  background:#fafafa;border:1px solid #fafafa;border-radius:12px;
}
/* Ảnh lấp đầy khung theo vị trí tuyệt đối để KHÔNG tự kéo giãn khung theo
   tỷ lệ ảnh gốc (nguyên nhân ảnh bị tràn/cắt phần dưới trước đây) */
.pthumb > picture, .pthumb > .img-placeholder{position:absolute;inset:0}
.pcard .pthumb picture,.pcard .pthumb img{width:100%;height:100%;display:block}
.pcard .pthumb img{object-fit:cover;transition:transform .3s ease}
.pcard:hover .pthumb img{transform:scale(1.025)}
.pthumb svg.w{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pthumb svg.w{width:62%;color:#a8b2c1;transition:all .55s var(--ease)}
.pcard:hover .pthumb svg.w{color:#a8b2c1;transform:translate(-50%,-50%) scale(1.025)}
.pthumb::after{ /* ánh sáng lướt */
  content:"";display:none;position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55),transparent 65%);
  transform:translateX(-100%);transition:transform .8s var(--ease);
}
.pbadge{
  position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;min-height:20px;
  padding:3px 7px;border-radius:7px;color:#fff;font-size:calc(9px + var(--font-bump, 0px));font-weight:500;line-height:1;
  letter-spacing:.015em;box-shadow:0 4px 12px rgba(28,38,48,.12);
}
.pbadge.sale{background:linear-gradient(154deg,#ff3157 0%,#f29497 45%,#ff6900 100%)}
.pbadge.hot{background:linear-gradient(100deg,#7b8792,#596672);color:#fff}
.pfav{
  position:absolute;top:10px;right:10px;z-index:4;width:32px;height:32px;border:1px solid rgba(18,35,46,.08);border-radius:50%;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:var(--mute);
  transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
  box-shadow:0 4px 12px rgba(28,38,48,.1);
}
.pfav:hover{transform:scale(1.06);color:#f43f5e;background:#fff;box-shadow:0 6px 16px rgba(28,38,48,.14)}
.pfav.liked{color:#f43f5e;background:#fff}
.pfav.liked svg{fill:#fb7185}
.pfav svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.pfav:active svg{transform:scale(.8)}
.pcard .pbody{padding:0;display:flex;flex-direction:column;gap:0;flex:1}
.pcat{font-size:calc(11px + var(--font-bump, 0px));font-weight:600;color:var(--blue)}
.pname{height:40px;min-height:40px;margin:0 0 5px;color:#171717;font-size:calc(14px + var(--font-bump, 0px));font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;transition:color .25s ease}
.pcard:hover .pname{color:#171717}
.prate{display:flex;align-items:center;gap:5px;min-height:20px;margin:-1px 0 5px;font-size:calc(11.5px + var(--font-bump, 0px));color:#667482}
.prating-score{display:inline-flex;align-items:center;gap:4px;color:#3d4b57;line-height:1}
.prating-score svg{width:13px;height:13px;color:#f59e0b;fill:#fbbf24;stroke-width:1.5}
.prating-value{font-size:calc(12px + var(--font-bump, 0px));font-weight:400;color:#34414c;letter-spacing:-.01em}
.prating-count{font-size:calc(10.5px + var(--font-bump, 0px));color:#8a959e}
.prating-empty{font-size:calc(10.5px + var(--font-bump, 0px));color:#8a959e;white-space:nowrap}
.rating-stars{display:inline-flex;align-items:center;gap:1px;white-space:nowrap}
.rating-star{display:inline-block;flex:0 0 auto;width:13px;height:14px;font-size:calc(13px + var(--font-bump, 0px));line-height:14px}
.rating-star::before{
  content:"★";display:block;color:transparent;
  background:linear-gradient(90deg,#f5a20b 0%,#f5a20b var(--star-fill),#cbd1d5 var(--star-fill),#cbd1d5 100%);
  -webkit-background-clip:text;background-clip:text
}
.rating-stars-card{gap:0}
.rating-stars-card .rating-star{width:13px;height:14px;font-size:calc(13px + var(--font-bump, 0px));line-height:14px}
.rating-stars-pdp .rating-star{width:14px;height:15px;font-size:calc(14px + var(--font-bump, 0px));line-height:15px}
.rating-stars-overview .rating-star{width:19px;height:20px;font-size:calc(19px + var(--font-bump, 0px));line-height:20px}
.rating-stars-review .rating-star{width:13px;height:14px;font-size:calc(13px + var(--font-bump, 0px));line-height:14px}
.rating-stars-empty .rating-star{width:19px;height:20px;font-size:calc(19px + var(--font-bump, 0px));line-height:20px}
.prate-separator{width:1px;height:12px;background:#dfe4e8}
.pstock{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:transparent;color:#278247;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:650;line-height:1.2;white-space:nowrap}
.pstock-dot{width:6px;height:6px;border-radius:50%;background:#2f9d55;box-shadow:0 0 0 2px rgba(47,157,85,.14)}
.pstock.out-of-stock{border:0;background:transparent;color:#a05a5a}
.pstock.out-of-stock .pstock-dot{background:#bd6c6c;box-shadow:0 0 0 2px rgba(189,108,108,.1)}
.pcard .pprice{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding:0}
.pcard .pprice .n{font-size:calc(16px + var(--font-bump, 0px));font-weight:700;color:var(--price-red);letter-spacing:-.02em}
.pcard .pprice .o{font-size:calc(12px + var(--font-bump, 0px));color:#a3a3a3;text-decoration:line-through}
.pcta{
  margin-top:11px;padding:10px;border-radius:var(--r);text-align:center;
  background:var(--bg);color:var(--ink);font-size:calc(13px + var(--font-bump, 0px));font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .35s var(--ease);
}
.pcta svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.pcard:hover .pcta{background:linear-gradient(135deg,#ff8f3a,#ff7a1a);color:#fff;box-shadow:var(--sh-orange)}
.pcard:hover .pcta svg{transform:translateX(-2px) scale(1.1)}

/* ---------- Blog ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{background:var(--card);border:1px solid #edf0f2;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--sh-1);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.bcard:hover{border-color:#ffcda8;box-shadow:0 8px 22px rgba(18,35,46,.065)}
.bthumb{aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden}
.bthumb.g1{background:linear-gradient(145deg,#e8f2fe,#d4e6fc)}
.bthumb.g2{background:linear-gradient(145deg,#f0edfe,#e2dcfd)}
.bthumb.g3{background:linear-gradient(145deg,#e4f7f5,#d2f0ec)}
.bthumb svg{width:46px;height:46px;transition:transform .5s var(--ease)}
.bcard:hover .bthumb svg{transform:scale(1.15) rotate(-5deg)}
.bthumb.g1 svg{color:var(--blue)} .bthumb.g2 svg{color:var(--violet)} .bthumb.g3 svg{color:var(--teal)}
.bbody{padding:20px}
.bmeta{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:calc(11.5px + var(--font-bump, 0px))}
.btag{font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.btag.t1{background:var(--blue-soft);color:var(--blue)}
.btag.t2{background:#f0edfe;color:var(--violet)}
.btag.t3{background:#e4f7f5;color:var(--teal)}
.bdate{color:var(--mute)}
.bcard h3{font-size:calc(16px + var(--font-bump, 0px));margin-bottom:7px;line-height:1.35}
.bcard p{font-size:calc(13px + var(--font-bump, 0px));color:var(--body);margin-bottom:12px}
.bread{font-weight:600;font-size:calc(13px + var(--font-bump, 0px));color:var(--blue);display:inline-flex;align-items:center;gap:5px;transition:gap .3s var(--ease)}
.bcard:hover .bread{gap:9px}
.bread svg{width:14px;height:14px;flex-shrink:0}

/* ---------- CTA ---------- */
.cta{
  border-radius:var(--r-xl);padding:48px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#1d4a5c,#12232e);color:#fff;
  box-shadow:var(--sh-4);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.cta::before{content:"";position:absolute;top:-40%;right:-8%;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.32),transparent 65%)}
.cta::after{content:"";position:absolute;bottom:-50%;left:10%;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,122,26,.25),transparent 65%)}
.cta>*{position:relative;z-index:2}
.cta h2{color:#fff;font-size:calc(30px + var(--font-bump, 0px));margin-bottom:8px}
.cta p{color:#a1a1a6;max-width:440px}
.cta .eyebrow{color:#7db3ff}

/* ---------- Đăng ký ---------- */
.news{padding:0 0 72px}
.news-box{
  background:var(--card);border-radius:var(--r-xl);padding:40px;box-shadow:var(--sh-2);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.news-box h2{font-size:calc(24px + var(--font-bump, 0px));margin-bottom:5px}
.news-box p{color:var(--mute)}
.news-f{display:flex;gap:9px;flex-shrink:0}
.news-f input{
  padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:calc(14px + var(--font-bump, 0px));font-family:inherit;min-width:250px;outline:none;background:var(--bg);
  transition:all .35s var(--ease);
}
.news-f input:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,184,169,.12)}

/* ---------- Footer ---------- */
.foot{--font-bump:1px;background:#12232e;color:#86868b;padding:36px 0 0}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.footer-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-trust-item{display:flex;align-items:flex-start;gap:11px;min-width:0}
.footer-trust-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:9px;border-radius:11px;background:#1e303d;color:#ff7a1a}
.footer-trust-icon svg{width:20px;height:20px}
.footer-trust-item h3{margin:0 0 3px;color:#fff;font-size:calc(13.5px + var(--font-bump, 0px));font-weight:600;line-height:1.3}
.footer-trust-item p{margin:0;color:#7f8b96;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.45}
.fgrid{display:grid;grid-template-columns:1.2fr 1.4fr 1.4fr 1fr;gap:24px;padding-bottom:24px}
.fbrand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.fbrand .brand-mark{background:#fff;box-shadow:none}
.fbrand .brand-mark svg{color:#1d1d1f}
.fbrand .brand-name{color:#fff}
.fdesc{font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.5;margin-bottom:12px;max-width:270px}
.socs{display:flex;gap:8px}
.socs a{
  width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;color:#d2d2d7;
  transition:all .35s var(--ease);
}
.socs a:hover{background:var(--blue);color:#fff;transform:translateY(-3px) scale(1.06);box-shadow:0 6px 16px rgba(0,184,169,.4)}
.socs svg{width:16px;height:16px}
.fcol h4{color:#fff;font-size:calc(13.5px + var(--font-bump, 0px));font-weight:600;margin-bottom:9px}
.fcol{min-width:0}
.fcol a{display:block;padding:3px 0;color:#86868b;font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.4;overflow-wrap:anywhere;transition:all .25s var(--ease)}
.fcol a:hover{color:#fff;transform:translateX(3px)}
.footer-socials h4{margin-bottom:5px}
.fcol a.footer-social-link{display:flex;align-items:center;gap:7px;padding:1px 0;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.2}
.footer-social-icon{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:7px;background:rgba(255,255,255,.08);transition:background .25s var(--ease),transform .25s var(--ease)}
.footer-social-icon svg{width:13px;height:13px}
.footer-social-link:hover .footer-social-icon{transform:scale(1.06)}
.footer-social-tiktok .footer-social-icon{color:#fff}
.footer-social-youtube .footer-social-icon{color:#ff2a36}
.footer-social-youtube .footer-social-icon svg,.footer-social-facebook .footer-social-icon svg{fill:currentColor}
.footer-social-youtube .footer-social-play{fill:#12232e}
.footer-social-facebook .footer-social-icon{color:#4f86e8}
.fmeta{font-size:calc(12.5px + var(--font-bump, 0px));padding:3px 0;display:flex;align-items:center;gap:7px}
.fmeta svg{width:14px;height:14px;color:#6e6e73;flex-shrink:0}
.fcol .fmeta a{display:inline;padding:0;color:inherit}
.fcol .fmeta a:hover{color:#fff;transform:none}
.fmeta span{line-height:1.5}
.layout-no-header main,.layout-no-header .foot{margin-left:0!important}

/* Khi cuộn (stuck) KHÔNG co nhỏ thanh danh mục nữa, để gạch chân active giữ
   nguyên độ to/đậm như lúc chưa cuộn. */
.brand-name{transition:font-size .38s var(--ease)}
.search{transition:padding .38s var(--ease), max-width .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease)}
.search input{transition:padding .38s var(--ease)}
.cart-btn{transition:padding .38s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease)}
.nav-link{transition:color .28s var(--ease), padding .38s var(--ease)}
.citem svg{transition:transform .45s var(--ease), color .35s var(--ease), width .38s var(--ease), height .38s var(--ease)}
.header-inner{transition:padding .38s var(--ease)}
.brand-mark{transition:width .38s var(--ease), height .38s var(--ease), border-radius .38s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease)}
.brand-mark svg{transition:width .38s var(--ease), height .38s var(--ease)}
.brand-name span{transition:opacity .3s var(--ease), height .38s var(--ease);overflow:hidden;display:block}
.citem{transition:color .3s var(--ease), padding .38s var(--ease)}

/* ---------- Thanh danh mục (underline tinh tế) ---------- */
.catbar{
  position:relative;z-index:1;
  border-top:1px solid rgba(0,0,0,.05);
  background:rgba(255,255,255,.5);
  transition:padding .4s var(--ease);
}
.catbar-inner{display:flex;align-items:center;gap:16px;padding:0 24px;transition:padding .4s var(--ease)}


.catbar-track{
  position:relative;display:flex;gap:2px;flex:1;
  overflow-x:auto;scrollbar-width:none;
}
.catbar-track::-webkit-scrollbar{display:none}

/* Gạch chân trượt — mảnh, sang */
.pill{
  position:absolute;bottom:0;left:0;height:2px;
  background:linear-gradient(90deg,#06d6c4,#00b8a9);
  border-radius:2px 2px 0 0;
  box-shadow:0 0 8px rgba(6,214,196,.55);
  z-index:2;pointer-events:none;
  transition:transform .45s var(--ease), width .45s var(--ease);
}

/* Nút "Danh mục" - mở sidebar trái */
.catmenu{
  position:relative;z-index:1;flex-shrink:0;
  display:inline-flex;align-items:center;gap:8px;
  margin-right:6px;padding:9px 16px;border:none;cursor:pointer;
  font-size:calc(13px + var(--font-bump, 0px));font-weight:700;letter-spacing:.01em;color:#fff;
  border-radius:2px;
  background:linear-gradient(135deg,#06d6c4,#00b8a9);
  box-shadow:0 3px 10px rgba(0,184,169,.3);
  transition:box-shadow .3s var(--ease);
}
.catmenu svg{width:17px;height:17px;flex-shrink:0}
.catmenu:hover{box-shadow:0 6px 16px rgba(0,184,169,.42)}
/* Rê chuột KHÔNG làm icon nhảy; chỉ nẩy nhẹ icon khi BẤM */
.catmenu:hover svg{transform:none}
.catmenu svg.bounce{animation:catIconBounce .4s var(--ease)}
@keyframes catIconBounce{0%{transform:translateY(0)}40%{transform:translateY(-4px)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
body.sbar-open .catmenu{background:linear-gradient(135deg,#00b8a9,#009186)}

.citem{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 14px;
  font-size:calc(13.5px + var(--font-bump, 0px));font-weight:500;color:var(--mute);
  white-space:nowrap;cursor:pointer;
  transition:color .3s var(--ease), padding .4s var(--ease);
}
.citem svg{width:16px;height:16px;flex-shrink:0;transition:transform .45s var(--ease), color .3s var(--ease)}
.citem:hover{color:var(--ink)}
.citem:hover svg{transform:translateY(-3px) scale(1.15)}
.citem.on{color:var(--teal-dark);font-weight:600}
.citem.on svg{color:var(--teal)}
.citem-sale svg,.citem-sale.on svg{color:#e5242f}
.citem:active{transform:scale(.97)}
.citem-social{font-weight:600}
.citem-tiktok svg{color:#111827}
.citem-youtube svg{color:#f5222d}
.citem-youtube .youtube-mark{fill:currentColor;stroke:none}
.citem-youtube .youtube-mark-play{fill:#fff}
.citem-tiktok:hover{color:#111827}
.citem-youtube:hover{color:#d91420}


/* Nút khuyến mãi */
.cat-sale{
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  padding:7px 15px;border-radius:var(--r-pill);
  font-size:calc(12.5px + var(--font-bump, 0px));font-weight:600;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#ff8f3a,#ff7a1a);
  box-shadow:0 3px 10px rgba(0,184,169,.3);
  transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.cat-sale::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-100%);transition:transform .8s var(--ease);
}
.cat-sale:hover::after{transform:translateX(100%)}
.cat-sale:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,184,169,.42)}
.cat-sale:active{transform:scale(.96)}
.sale-dot{
  width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0;position:relative;
  animation:blink 1.8s ease-in-out infinite;
}
.sale-dot::before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  background:rgba(255,255,255,.5);animation:ring 1.8s ease-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes ring{0%{transform:scale(.7);opacity:.7}100%{transform:scale(2.2);opacity:0}}

@media(prefers-reduced-motion:reduce){.sale-dot,.sale-dot::before{animation:none}}
@media(max-width:768px){
  .cat-sale{display:none}
  .catbar-inner{padding:0 18px}
  .citem{padding:12px 11px;font-size:calc(12.5px + var(--font-bump, 0px))}
}




/* ============ SIDEBAR DỌC (desktop) ============ */
:root{ --sbar-w:52px; --sbar-w-open:238px; }

.sbar{
  position:fixed;left:0;top:0;bottom:0;z-index:120;   /* cao hơn header (100) */
  width:var(--sbar-w);
  background:var(--card);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:10px 7px;
  transition:width .38s var(--ease), box-shadow .38s var(--ease);
  overflow:hidden;
}
/* Rê chuột vào là tự xổ ra — không cần bấm */
.sbar:hover,
.sbar.open{
  width:var(--sbar-w-open);
  box-shadow:8px 0 30px rgba(18,35,46,.08);
}
/* Tên hiện khi rê chuột hoặc khi ghim mở */
.sbar:hover .sitem b,
.sbar.open .sitem b{opacity:1;transform:none;transition-delay:.06s}
/* Tooltip tắt khi đã xổ ra */
.sbar:hover .sitem::after{display:none}

/* Mục "Danh mục" ở đầu sidebar dọc (vừa là tiêu đề, vừa bật/tắt menu) */
.sitem-cat{
  width:100%;border:none;background:none;font-family:inherit;text-align:left;
  color:var(--teal-dark);font-weight:700;margin-bottom:2px;
}
.sitem-cat svg{color:var(--teal)}
.sitem-cat:hover{background:var(--teal-soft);color:var(--teal-dark)}
.sitem-cat:hover svg{color:var(--teal-dark);transform:scale(1.1)}
.sitem-cat b{font-weight:700;font-size:calc(14px + var(--font-bump, 0px))}

.sbar-nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.sbar-nav::-webkit-scrollbar{display:none}

/* Mục trong sidebar */
.sitem{
  display:flex;align-items:center;gap:11px;
  height:38px;padding:0 9px;flex-shrink:0;
  border-radius:9px;cursor:pointer;position:relative;
  color:var(--body);white-space:nowrap;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.sitem:hover{background:var(--bg);color:var(--ink)}
.sitem svg{width:19px;height:19px;flex-shrink:0;color:var(--mute);transition:color .25s, transform .4s var(--ease)}
.sitem:hover svg{color:var(--ink);transform:scale(1.1)}

/* Tên + số: ẩn khi thu, hiện khi mở */
.sitem b{
  font-size:calc(13.5px + var(--font-bump, 0px));font-weight:500;
  opacity:0;transform:translateX(-6px);
  transition:opacity .28s var(--ease), transform .35s var(--ease);
}
.sbar.open .sitem b{opacity:1;transform:none;transition-delay:.08s}
.sbar.open 
/* Mục đang chọn */
.sitem.on{background:var(--teal-soft);color:var(--teal-dark);font-weight:600}
.sitem.on svg{color:var(--teal)}
.sitem.on::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--teal);
}

/* Nút khuyến mãi trong sidebar */
.sitem-sale{color:var(--orange);margin-top:auto}
.sitem-sale svg{color:var(--orange)}
.sitem-sale:hover{background:var(--orange-soft);color:var(--orange-dark)}
.sitem-sale:hover svg{color:var(--orange-dark)}

/* Đường kẻ ngăn nhóm */
.sbar-line{height:1px;background:var(--line);margin:6px 5px;flex-shrink:0}

/* Tooltip khi thu gọn (chỉ hiện lúc chưa mở) */
.sitem::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-4px);
  background:rgba(18,35,46,.94);color:#fff;
  font-size:calc(12px + var(--font-bump, 0px));font-weight:500;padding:6px 11px;border-radius:7px;
  white-space:nowrap;pointer-events:none;z-index:120;
  opacity:0;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.sitem:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.sbar.open .sitem::after{display:none}

/* ===== Chừa chỗ cho thanh rail thu gọn (52px). Khi mở rộng, sidebar phủ
   đè lên nội dung như lúc rê chuột — KHÔNG đẩy nội dung sang phải ===== */
.site-header, main, .foot, .topbar{
  margin-left:var(--sbar-w);
}
main{position:relative;z-index:1}   /* thấp hơn sidebar, không che nó */

/* Ẩn sidebar trên mobile (đã có drawer) */
@media(max-width:768px){
  .sbar{display:none !important}
  .site-header, main, .foot, .topbar{margin-left:0 !important}
}

/* ---------- Logo ảnh ---------- */
/* Logo chữ dự phòng — chỉ hiện nếu ảnh không tải được */
.brand-fb{display:none;align-items:center;gap:11px}
.brand.no-img .logo{display:none}
.brand.no-img .brand-fb{display:flex}
.fbrand.no-img .logo{display:none}
.fbrand.no-img .brand-fb{display:flex}
.brand{display:flex;align-items:center;flex-shrink:0;cursor:pointer;transition:transform .3s var(--ease)}
.brand:hover{transform:scale(1.03)}
.logo{
  height:42px;width:auto;             /* giữ đúng tỉ lệ, không méo */
  max-width:220px;
  object-fit:contain;
  display:block;
  transition:height .38s var(--ease);
}

/* Logo trong drawer */
.drawer-head .logo{height:34px;max-width:150px}

/* Logo dưới footer (nền tối) — làm sáng lên cho nổi */
.logo-foot{
  height:38px;max-width:190px;
  filter:brightness(0) invert(1);     /* chuyển thành trắng trên nền tối */
  opacity:.95;
}

@media(max-width:768px){
  .logo{height:34px;max-width:150px}
  .logo-foot{height:34px}
}
@media(max-width:380px){
  .logo{height:30px;max-width:128px}
}

/* ---------- Nút menu: 3 gạch đều, khung bo 6px ---------- */
.burger{
  display:none;width:42px;height:42px;flex-shrink:0;padding:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  cursor:pointer;position:relative;
  box-shadow:var(--sh-1);
  transition:all .3s var(--ease);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.burger:hover{border-color:var(--teal);box-shadow:var(--sh-2)}
.burger:active{transform:scale(.94)}
.burger span{
  display:block;width:18px;height:2px;border-radius:2px;
  background:var(--ink);
  transition:transform .42s var(--ease), opacity .28s var(--ease), background .3s;
}
/* Mở: gạch trên/dưới xoay thành X, gạch giữa biến mất */
.burger.open{background:var(--ink);border-color:var(--ink)}
.burger.open span{background:#fff}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Drawer (menu trượt trái) ---------- */
.scrim{
  position:fixed;inset:0;z-index:150;
  background:rgba(18,35,46,.42);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
}
.scrim.on{opacity:1;visibility:visible}
/* Lớp tối khi mở danh mục trái (dưới sidebar z-120, trên header z-100) */
.sbar-scrim{
  position:fixed;inset:0;z-index:110;
  background:rgba(18,35,46,.32);
  opacity:0;visibility:hidden;
  transition:opacity .38s var(--ease), visibility .38s;
}
.sbar-scrim.on{opacity:1;visibility:visible}
@media(max-width:768px){.sbar-scrim{display:none}}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:160;
  width:min(68vw,232px);
  min-width:0;max-width:232px;
  background:var(--card);
  box-shadow:0 0 40px rgba(18,35,46,.18);
  transform:translateX(-100%);
  transition:transform .45s var(--ease);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.drawer.on{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 14px 14px;border-bottom:1px solid var(--line);
}
.drawer-head .brand-name{font-size:calc(15px + var(--font-bump, 0px))}
.drawer-x{
  width:34px;height:34px;flex-shrink:0;border:0;border-radius:10px;cursor:pointer;
  background:var(--bg);color:var(--body);display:grid;place-items:center;
  transition:all .25s var(--ease);
}
.drawer-x:hover{background:var(--line);color:var(--ink)}
.drawer-x svg{width:17px;height:17px}
.drawer-nav{padding:10px 9px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.drawer-nav::-webkit-scrollbar{display:none}
.dlink{
  display:flex;align-items:center;gap:8px;
  min-width:0;min-height:40px;padding:5px 6px;border-radius:9px;
  font-size:calc(13px + var(--font-bump, 0px));font-weight:500;color:var(--body);cursor:pointer;
  white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.dlink:active{background:var(--bg)}
.dlink-icon{
  width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px;border-radius:8px;
  background:#f4f7f8;color:#74838e;transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)
}
.dlink-icon svg,.dlink svg{width:17px;height:17px;flex-shrink:0;color:inherit;transition:color .25s}
.dlink-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dlink em{
  margin-left:auto;padding-left:14px;   /* cách chữ tối thiểu */
  font-style:normal;font-size:calc(11px + var(--font-bump, 0px));font-weight:600;
  color:var(--mute);
}
.dlink em::before{content:"";display:inline-block}
.dlink.on{background:var(--teal-soft);color:var(--teal-dark);font-weight:600}
.dlink.on .dlink-icon{background:var(--teal);color:#fff}
.dlink:hover .dlink-icon{transform:scale(1.04)}
.dlink.on em{background:rgba(0,184,169,.16);color:var(--teal-dark)}
.dlink-featured{font-weight:650;color:#24333e}
.dlink-sale .dlink-icon svg,.dlink-sale.on .dlink-icon svg{color:#e5242f}
.dlink-shop{margin-top:7px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:9px}
.drawer-sale{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin:4px 12px 12px;padding:11px;border-radius:12px;white-space:nowrap;
  font-size:calc(13.5px + var(--font-bump, 0px));font-weight:600;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#ff8f3a,#ff7a1a);
  box-shadow:0 4px 14px rgba(255,122,26,.3);
}
.drawer-foot{
  padding:11px 12px 13px;border-top:1px solid var(--line);background:#f6f9fa;white-space:nowrap;
}
.drawer-call{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(135deg,#ff8f3a,#ff6900);color:#fff;
  box-shadow:0 5px 14px rgba(255,105,0,.24)
}
.drawer-call-icon{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:10px;background:rgba(255,255,255,.18)}
.drawer-call-icon svg{width:18px;height:18px}
.drawer-call span:last-child{display:flex;min-width:0;flex-direction:column;gap:1px}
.drawer-call small{font-size:calc(10.5px + var(--font-bump, 0px));font-weight:600;opacity:.86}
.drawer-call b{overflow:hidden;color:#fff;font-size:calc(15px + var(--font-bump, 0px));letter-spacing:.01em;text-overflow:ellipsis}
body.locked{overflow:hidden}

/* ---------- Hero split: slider 2/3 + banner 1/3 ---------- */
.hsplit{padding:22px 0 8px}
.hsplit-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:stretch}
.hsplit .slider{height:100%}
.hsplit .slides{height:100%}
.hsplit .slide{aspect-ratio:auto;min-height:400px}

/* Cột phải: các ô banner nhỏ */
.side{display:grid;grid-template-rows:1fr 1fr 1fr;gap:16px}
.sbox{
  position:relative;border-radius:var(--r-xl);overflow:hidden;cursor:pointer;
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  box-shadow:var(--sh-2);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.sbox:hover{transform:translateY(-2px) scale(1.015);box-shadow:var(--sh-4)}
.sbox::after{ /* ánh sáng lướt */
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28),transparent 65%);
  transform:translateX(-100%);transition:transform .8s var(--ease);
}
.sbox:hover::after{transform:translateX(100%)}
.sbox-1{background:linear-gradient(140deg,#12232e,#1d4a5c);color:#fff}
.sbox-2{background:linear-gradient(140deg,#e0f7f5,#c8f0ec);color:var(--ink)}
.sbox-3{background:linear-gradient(140deg,#fff2e6,#ffe2c9);color:var(--ink)}
.sb-ico{
  width:52px;height:52px;flex-shrink:0;border-radius:15px;display:grid;place-items:center;color:#fff;
  transition:transform .5s var(--ease);
}
.sbox:hover .sb-ico{transform:scale(1.12) rotate(-8deg)}
.sb-ico svg{width:26px;height:26px}
.sb-ico.i1{background:linear-gradient(145deg,#2fded0,#00b8a9);box-shadow:0 6px 16px rgba(0,184,169,.4)}
.sb-ico.i2{background:linear-gradient(145deg,#ffa057,#ff7a1a);box-shadow:0 6px 16px rgba(255,122,26,.34)}
.sb-ico.i3{background:linear-gradient(145deg,#ffa057,#ff7a1a);box-shadow:0 6px 16px rgba(255,122,26,.34)}
.sb-txt{position:relative;z-index:2;flex:1;min-width:0}
.sb-txt .tag{font-size:calc(10.5px + var(--font-bump, 0px));font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:3px}
.sb-txt b{display:block;font-size:calc(15px + var(--font-bump, 0px));font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:3px}
.sbox-1 b{color:#fff}
.sb-txt p{font-size:calc(12px + var(--font-bump, 0px));opacity:.75;line-height:1.4}
.sb-arrow{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  transition:all .35s var(--ease);
}
.sbox-2 .sb-arrow,.sbox-3 .sb-arrow{background:rgba(0,0,0,.06)}
.sbox:hover .sb-arrow{transform:translateX(3px)}
.sb-arrow svg{width:15px;height:15px}

@media(max-width:1024px){
  .hsplit-grid{grid-template-columns:1fr}
  .side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .hsplit .slide{min-height:340px}
}
@media(max-width:768px){
  .side{grid-template-columns:1fr}
  .hsplit .slide{min-height:280px}
  .sin{margin-left:30px;padding:18px 20px;max-width:calc(100% - 72px)}
}

/* ---------- Trang phụ (SPA) ---------- */
.page{display:none;animation:fadeUp .5s var(--ease)}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.crumb{padding:20px 0 4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:calc(13px + var(--font-bump, 0px));color:var(--mute);line-height:1.5}
.crumb a{cursor:pointer;transition:color .25s;white-space:nowrap}
.crumb a:hover{color:var(--blue)}
.crumb .cur{color:var(--ink);font-weight:600}

.shop{display:grid;grid-template-columns:268px 1fr;gap:26px;align-items:start;padding:20px 0 72px}
.filt{background:var(--card);border-radius:var(--r-lg);padding:6px 20px 20px;box-shadow:var(--sh-2)}
.filt-top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.filt h4{display:flex;align-items:center;gap:8px;font-size:calc(15px + var(--font-bump, 0px));font-weight:700;color:var(--ink);letter-spacing:-.01em}
.filt h4 svg{width:17px;height:17px;color:var(--teal)}
.filt-clear{border:0;background:transparent;font-family:inherit;font-size:calc(12.5px + var(--font-bump, 0px));font-weight:500;color:var(--mute);cursor:pointer;padding:4px 8px;border-radius:8px;transition:all .25s var(--ease)}
.filt-clear:hover{color:var(--orange);background:var(--orange-soft)}
.fgroup{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.fgroup:last-child{border:0;margin:0;padding:0}
.fg-head{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}

/* Danh mục — hàng có icon + số */
.fopt{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  font-size:calc(13.5px + var(--font-bump, 0px));color:var(--body);cursor:pointer;position:relative;
  transition:background .22s var(--ease), color .22s var(--ease);
}
.fopt:hover{background:var(--bg)}
.category-tree-branch{position:relative}
.category-tree-branch+.category-tree-branch{margin-top:2px}
.category-tree-parent{display:grid;grid-template-columns:minmax(0,1fr) 30px;align-items:center;gap:2px}
.category-tree-branch:not([data-category-branch]) .category-tree-parent{grid-template-columns:1fr}
.category-tree-parent .fopt-parent{min-width:0}
.category-tree-toggle{display:grid;width:30px;height:30px;padding:0;place-items:center;border:0;border-radius:8px;background:transparent;color:#829097;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.category-tree-toggle:hover{background:var(--bg);color:var(--teal-dark)}
.category-tree-toggle svg{width:15px;height:15px;transition:transform .24s var(--ease)}
.category-tree-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.category-tree-children{position:relative;display:grid;gap:2px;margin:2px 0 6px 19px;padding:2px 0 2px 19px}
.category-tree-children[hidden]{display:none}
.category-tree-children::before{content:"";position:absolute;top:-5px;bottom:18px;left:7px;width:1px;background:#d3dce0}
.fopt-child{min-height:34px;padding:6px 8px;font-size:calc(12.75px + var(--font-bump, 0px))}
.fopt-child::before{content:"";position:absolute;top:50%;left:-11px;width:12px;border-top:1px solid #d3dce0}
.fopt-child::after{content:"";position:absolute;top:calc(50% - 2px);left:-13px;width:5px;height:5px;border:1px solid #b8c6cc;border-radius:50%;background:#fff}
.fopt-child .fc-name{padding-left:2px}
.fopt-child.on::after{border-color:var(--teal);background:var(--teal)}
.category-tree-branch.is-open>.category-tree-parent .fopt-parent:not(.on) .fc-name{color:#34454e;font-weight:600}
.fc-ico{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:var(--bg);display:grid;place-items:center;color:var(--mute);transition:all .25s var(--ease)}
.fc-ico svg{width:16px;height:16px}
.fc-name{flex:1;transition:color .22s}
.fc-num{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:600;color:var(--mute);background:var(--bg);padding:2px 8px;border-radius:var(--r-pill);transition:all .25s var(--ease)}
.fopt:hover .fc-ico{color:var(--ink)}
.fopt.on{background:var(--teal-soft)}
.fopt.on .fc-name{color:var(--teal-dark);font-weight:600}
.fopt.on .fc-ico{background:var(--teal);color:#fff}
.fopt.on .fc-num{background:rgba(0,184,169,.18);color:var(--teal-dark)}

/* Khoảng giá — thanh kéo hai đầu */
.price-range-form{display:flex;flex-direction:column;gap:10px}
.price-range-values{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price-range-values span{
  min-width:0;padding:8px 9px;border:1px solid #e4e9ed;border-radius:9px;
  background:#f8fafb
}
.price-range-values small{display:block;margin-bottom:2px;color:#8b969f;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.price-range-values output{display:block;overflow:hidden;color:#23313c;font-size:calc(12px + var(--font-bump, 0px));font-weight:700;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.price-range-control{position:relative;height:28px;margin:2px 7px 0}
.price-range-track{position:absolute;z-index:1;top:50%;left:0;right:0;height:5px;border-radius:999px;background:#dde4e8;transform:translateY(-50%)}
.price-range-selection{
  position:absolute;top:0;bottom:0;left:var(--range-start);right:calc(100% - var(--range-end));
  border-radius:inherit;background:linear-gradient(90deg,#00b8a9,#16c7b8)
}
.price-range-input{
  position:absolute;z-index:2;top:0;left:0;width:100%;height:28px;margin:0;
  appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none
}
.price-range-input.is-active{z-index:3}
.price-range-input::-webkit-slider-runnable-track{height:5px;background:transparent}
.price-range-input::-webkit-slider-thumb{
  width:18px;height:18px;margin-top:-6.5px;border:3px solid #fff;border-radius:50%;
  appearance:none;-webkit-appearance:none;background:#00a99b;box-shadow:0 1px 3px rgba(18,48,58,.22),0 0 0 1px rgba(0,169,155,.28);
  cursor:grab;pointer-events:auto;transition:transform .18s ease,box-shadow .18s ease
}
.price-range-input::-moz-range-track{height:5px;background:transparent}
.price-range-input::-moz-range-thumb{
  width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#00a99b;
  box-shadow:0 1px 3px rgba(18,48,58,.22),0 0 0 1px rgba(0,169,155,.28);
  cursor:grab;pointer-events:auto;transition:transform .18s ease,box-shadow .18s ease
}
.price-range-input:focus{outline:none}
.price-range-input:focus-visible::-webkit-slider-thumb,.price-range-input::-webkit-slider-thumb:hover{
  transform:scale(1.12);box-shadow:0 1px 4px rgba(18,48,58,.24),0 0 0 4px rgba(0,184,169,.14)
}
.price-range-input:focus-visible::-moz-range-thumb,.price-range-input::-moz-range-thumb:hover{
  transform:scale(1.12);box-shadow:0 1px 4px rgba(18,48,58,.24),0 0 0 4px rgba(0,184,169,.14)
}
.price-range-scale{display:flex;justify-content:space-between;margin-top:-5px;color:#98a2aa;font-size:calc(9.5px + var(--font-bump, 0px))}
.price-range-submit{
  min-height:36px;padding:8px 10px;border:0;border-radius:9px;background:#e7f8f6;color:#087e74;
  display:flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:700;
  cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease
}
.price-range-submit:hover{background:#00a99b;color:#fff;transform:translateY(-1px)}
.price-range-submit svg{width:14px;height:14px}

/* Đánh giá sao */
.fstar,.fchk{
  display:flex;align-items:center;gap:9px;padding:7px 4px;
  font-size:calc(13px + var(--font-bump, 0px));color:var(--body);cursor:pointer;
  transition:color .2s;
}
.fstar:hover,.fchk:hover{color:var(--ink)}
.fstar input,.fchk input{position:absolute;opacity:0;width:0;height:0}
.ck{
  width:18px;height:18px;flex-shrink:0;border-radius:6px;
  border:1.5px solid var(--line);position:relative;
  transition:all .25s var(--ease);
}
.fstar input:checked ~ .ck,.fchk input:checked ~ .ck{background:var(--teal);border-color:var(--teal)}
.fstar input:checked ~ .ck::after,.fchk input:checked ~ .ck::after{
  content:"";position:absolute;left:5px;top:1.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.fs-stars{color:var(--amber);letter-spacing:1px;font-size:calc(14px + var(--font-bump, 0px))}
.fs-stars i{color:var(--line);font-style:normal}
.fstar em{font-style:normal;font-size:calc(12px + var(--font-bump, 0px));color:var(--mute)}
.rating-filter-link{
  display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #e3e8ec;border-radius:10px;
  background:#fff;color:#33424e;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease
}
.rating-filter-link:hover{border-color:#ffc56c;background:#fffaf1}
.rating-filter-link.on{border-color:#ffbd55;background:#fff8eb;box-shadow:0 0 0 2px rgba(245,162,11,.08)}
.rating-filter-check{
  position:relative;width:19px;height:19px;flex:0 0 auto;border:1.5px solid #d4dbe0;border-radius:6px;background:#fff;
  transition:background .2s ease,border-color .2s ease
}
.rating-filter-link.on .rating-filter-check{border-color:#00a99b;background:#00a99b}
.rating-filter-link.on .rating-filter-check::after{
  content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)
}
.rating-filter-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.rating-filter-copy strong{font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.2}
.rating-filter-copy>span{display:flex;align-items:center;gap:6px}
.rating-filter-copy small{color:#8c969e;font-size:calc(10px + var(--font-bump, 0px))}
.rating-stars-filter .rating-star{width:11px;height:12px;font-size:calc(11px + var(--font-bump, 0px));line-height:12px}
.sale-filter-link svg{width:14px;height:14px;color:#f07a20}
.sbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.sbar .c{font-size:calc(13.5px + var(--font-bump, 0px));color:var(--mute)}
.sbar .c b{color:var(--ink)}
.segs{display:flex;gap:3px;background:var(--bg);padding:3px;border-radius:var(--r-pill);box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.segs button{
  padding:7px 14px;border:0;background:transparent;border-radius:var(--r-pill);
  font-size:calc(12.5px + var(--font-bump, 0px));font-family:inherit;font-weight:500;color:var(--body);cursor:pointer;
  transition:all .35s var(--ease);
}
.segs button:hover{color:var(--ink)}
.segs button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.shop .pgrid{grid-template-columns:repeat(3,1fr)}

/* Chi tiết */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:24px 0 20px}
.pdp-media{position:sticky;top:130px}
.pdp-big{
  aspect-ratio:4/3;border-radius:var(--r-xl);display:grid;place-items:center;margin-bottom:12px;
  background:linear-gradient(150deg,#f2f4f7,#e6eaf0);box-shadow:var(--sh-2);overflow:hidden;
}
.pdp-big svg{width:60%;color:var(--blue);opacity:.85}
.pdp-th{display:flex;gap:10px}
.pdp-th .t{
  width:72px;height:58px;border-radius:var(--r);cursor:pointer;
  background:linear-gradient(150deg,#f2f4f7,#e6eaf0);display:grid;place-items:center;
  box-shadow:var(--sh-1);border:1px solid transparent;
  transition:all .35s var(--ease);
}
.pdp-th .t:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pdp-th .t.on{border-color:#123b46;box-shadow:0 0 0 1px rgba(18,59,70,.12)}
.pdp-th .t svg{width:56%;color:#a8b2c1}
.pdp-th .t.on svg{color:var(--blue)}
.pdp-info .pc{font-size:calc(12px + var(--font-bump, 0px));font-weight:600;color:var(--blue)}
.pdp-info h1{font-size:calc(30px + var(--font-bump, 0px));letter-spacing:-.03em;margin:7px 0 10px;line-height:1.2}
.pdp-rt{display:flex;align-items:center;gap:7px;font-size:calc(12.5px + var(--font-bump, 0px));color:var(--mute);margin-bottom:18px}
.pdp-rt .st{color:#ff9f0a}
.pdp-pr{display:flex;align-items:baseline;gap:11px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdp-pr .n{font-size:calc(30px + var(--font-bump, 0px));font-weight:800;color:var(--ink);letter-spacing:-.025em}
.pdp-pr .o{font-size:calc(15px + var(--font-bump, 0px));color:var(--mute);text-decoration:line-through}
.pdp-pr .sv{font-size:calc(12px + var(--font-bump, 0px));font-weight:600;color:var(--green);background:rgba(255,122,26,.12);padding:5px 11px;border-radius:var(--r-pill)}
.pdp-mt{display:flex;flex-direction:column;gap:9px;padding:18px 0}
.pdp-mt .m{display:flex;gap:9px;align-items:center;font-size:calc(13.5px + var(--font-bump, 0px))}
.pdp-mt .m svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.pdp-mt .m b{color:var(--ink);font-weight:600}
.pdp-buy{display:flex;gap:11px;align-items:center;margin:6px 0 22px;flex-wrap:wrap}
.pdp-buy .btn,.pdp-buy button{border-radius:8px}
.qty{display:inline-flex;align-items:center;background:var(--bg);border-radius:8px;padding:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.qty button{
  width:36px;height:38px;border:0;background:transparent;border-radius:8px;
  font-size:calc(17px + var(--font-bump, 0px));color:var(--ink);cursor:pointer;transition:all .28s var(--ease);
}
.qty button:hover{background:#fff;box-shadow:var(--sh-1)}
.qty button:active{transform:scale(.9)}
.qty span{width:40px;text-align:center;font-weight:600;color:var(--ink)}
.specs{list-style:none;background:var(--card);border-radius:var(--r-lg);overflow:hidden;margin-top:14px;box-shadow:var(--sh-1)}
.specs li{display:flex;padding:13px 16px;font-size:calc(13.5px + var(--font-bump, 0px));border-bottom:1px solid var(--line);transition:background .25s}
.specs li:last-child{border:0}
.specs li:hover{background:var(--bg)}
.specs li span{width:145px;color:var(--mute);flex-shrink:0}
.specs li b{color:var(--ink);font-weight:500}
.pdp-desc h3{font-size:calc(15.5px + var(--font-bump, 0px));margin-bottom:9px}
.pdp-desc p{font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.7}


/* ---------- Trang bài viết blog ---------- */
.article{max-width:760px;margin:0 auto;padding:8px 0 60px}
.art-head{padding:16px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.art-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:calc(12.5px + var(--font-bump, 0px));flex-wrap:wrap}
.art-meta .btag{font-weight:600;padding:4px 11px;border-radius:var(--r-pill)}
.art-meta .dot{color:var(--line)}
.art-meta .rd{color:var(--mute)}
.article h1{font-size:calc(32px + var(--font-bump, 0px));line-height:1.22;letter-spacing:-.03em;margin-bottom:12px}
.art-lead{font-size:calc(16px + var(--font-bump, 0px));color:var(--body);line-height:1.65}
.art-hero{
  border-radius:var(--r-xl);margin-bottom:30px;
  display:block;overflow:hidden;position:relative;
  background:#f5f8f8;
}
.art-hero svg{width:52%;color:#fff;opacity:.9}
.art-hero::after{display:none}
.art-body{font-size:calc(15.5px + var(--font-bump, 0px));line-height:1.78;color:var(--body)}
.art-body p{margin-bottom:18px}
.art-body h2{
  font-size:calc(22px + var(--font-bump, 0px));letter-spacing:-.02em;color:var(--ink);
  margin:34px 0 14px;padding-left:14px;border-left:3px solid var(--teal);
}
.art-box{
  background:var(--teal-soft);border-radius:var(--r);
  padding:14px 18px;margin:18px 0 22px;
  font-size:calc(14px + var(--font-bump, 0px));color:var(--teal-dark);font-weight:500;
  display:flex;gap:10px;align-items:flex-start;
}
.art-box svg{width:17px;height:17px;flex-shrink:0;margin-top:2px}
.art-list{list-style:none;margin:0 0 20px}
.art-list li{
  padding:9px 0 9px 26px;position:relative;font-size:calc(15px + var(--font-bump, 0px));
  border-bottom:1px solid var(--line-soft,#f0f3f5);
}
.art-list li:last-child{border:0}
.art-list li::before{
  content:"";position:absolute;left:4px;top:17px;
  width:6px;height:6px;border-radius:50%;background:var(--orange);
}
.art-foot{
  margin-top:36px;padding:22px;border-radius:var(--r-lg);
  background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.art-foot p{font-size:calc(14px + var(--font-bump, 0px));color:var(--body);margin:0}
.art-foot b{color:var(--ink)}
@media(max-width:768px){
  .article h1{font-size:calc(24px + var(--font-bump, 0px))}
  .art-lead{font-size:calc(14.5px + var(--font-bump, 0px))}
  .art-body{font-size:calc(15px + var(--font-bump, 0px))}
  .art-body h2{font-size:calc(19px + var(--font-bump, 0px));margin:26px 0 12px}
  .art-hero{border-radius:var(--r-lg)}
  .art-foot{flex-direction:column;text-align:center;padding:18px}
}


/* ---------- Giỏ hàng, thanh toán & xác nhận đơn ---------- */
.commerce-shell{padding-bottom:64px}
.commerce-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:8px 0 24px}
.commerce-eyebrow,.done-kicker,.section-heading>span{display:block;margin-bottom:5px;color:var(--teal-dark);font-size:calc(11px + var(--font-bump, 0px));font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.commerce-head h1{margin:0;color:var(--ink);font-size:calc(30px + var(--font-bump, 0px));letter-spacing:-.035em}
.commerce-head p{margin:7px 0 0;color:var(--mute);font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.55}
.checkout-steps{--step-edge:42px;position:relative;display:flex;align-items:flex-start;justify-content:center;flex:0 0 430px;max-width:100%}
.checkout-step{position:relative;z-index:2;display:flex;flex:0 0 84px;flex-direction:column;align-items:center;gap:6px;color:#98a4ad;font-size:calc(11px + var(--font-bump, 0px));font-weight:700;text-align:center}
.checkout-step b{display:grid;place-items:center;width:34px;height:34px;border:1px solid #dfe5e9;border-radius:50%;background:#fff;color:#8997a1;font-size:calc(12px + var(--font-bump, 0px));box-shadow:0 3px 10px rgba(18,35,46,.05)}
.checkout-step b svg{width:15px;height:15px}
.checkout-step.is-current{color:var(--teal-dark)}
.checkout-step.is-current b{border-color:var(--teal);background:linear-gradient(145deg,#18cdbf,#00a99c);color:#fff;box-shadow:0 5px 16px rgba(0,184,169,.24)}
.checkout-step.is-done{color:#557078}
.checkout-step.is-done b{border-color:#bfe9e5;background:#e8faf8;color:var(--teal-dark)}
.checkout-steps>i{position:relative;z-index:1;height:1px;flex:1;margin-top:17px;background:#dde4e8}
.checkout-steps>i.is-done{background:#7bd7d0}
.checkout-progress-runner{position:absolute;top:-5px;left:var(--step-edge);z-index:0;width:44px;height:44px;border:2px solid rgba(255,122,26,.4);border-radius:50%;background:rgba(255,122,26,.09);box-shadow:0 0 0 7px rgba(255,122,26,.05),0 7px 20px rgba(255,122,26,.22);pointer-events:none;transform:translateX(-50%) scale(1);animation-duration:2.2s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,.8,.26,1)}
.checkout-progress-runner::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(0,184,169,.26);animation:checkoutRunnerPulse 1.5s ease-in-out infinite}
.checkout-steps[data-step="1"] .checkout-progress-runner{animation-name:checkoutRunnerStep1;animation-duration:.8s}
.checkout-steps[data-step="2"] .checkout-progress-runner{animation-name:checkoutRunnerStep2}
.checkout-steps[data-step="3"] .checkout-progress-runner{animation-name:checkoutRunnerStep3}
@keyframes checkoutRunnerStep1{from{left:var(--step-edge);opacity:0;transform:translateX(-50%) scale(.55)}to{left:var(--step-edge);opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes checkoutRunnerStep2{from{left:var(--step-edge);opacity:.35;transform:translateX(-50%) scale(.72)}to{left:50%;opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes checkoutRunnerStep3{from{left:50%;opacity:.35;transform:translateX(-50%) scale(.72)}to{left:calc(100% - var(--step-edge));opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes checkoutRunnerPulse{50%{transform:scale(1.18);opacity:.45}}
.success-steps{margin:4px auto 22px}

.co-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.checkout-main{display:flex;min-width:0;flex-direction:column;gap:20px}
.co-card{overflow:hidden;border:1px solid #e8edf0;border-radius:18px;background:var(--card);box-shadow:0 10px 30px rgba(18,35,46,.065)}
.co-card-head{display:flex;min-height:72px;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid var(--line)}
.co-card-head>div>span{display:block;margin-bottom:2px;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:700;letter-spacing:.055em;text-transform:uppercase}
.co-card-head h2{margin:0;color:var(--ink);font-size:calc(17px + var(--font-bump, 0px));letter-spacing:-.015em}
.co-card-head>a{padding:7px 10px;border-radius:9px;color:var(--teal-dark);font-size:calc(12px + var(--font-bump, 0px));font-weight:700}
.co-card-head>a:hover{background:var(--teal-soft)}
.cart-count-label{padding:6px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);font-size:calc(11.5px + var(--font-bump, 0px))}

.crow{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) 132px 34px;gap:15px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);transition:opacity .25s ease,transform .25s ease}
.crow:last-child{border-bottom:0}
.crow.is-removing{opacity:0;transform:translateX(18px)}
.crow-img{display:grid;width:88px;height:76px;place-items:center;overflow:hidden;border:1px solid #eef1f3;border-radius:14px;background:#f7f9fa}
.commerce-shell .crow-img img{width:100%;height:100%;object-fit:contain!important}
.cart-card .crow-img{position:relative;display:block;width:88px;height:88px;aspect-ratio:1;border-radius:6px}
.cart-card .crow-img picture{position:absolute;inset:5px;display:grid;width:auto;height:auto;min-width:0;min-height:0;place-items:center}
.cart-card .crow-img img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain!important}
.crow-img svg{width:62%;color:var(--teal);opacity:.72}
.crow-main{min-width:0}
.crow-name{display:-webkit-box;overflow:hidden;color:var(--ink);font-size:calc(14px + var(--font-bump, 0px));font-weight:700;line-height:1.38;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.crow-name:hover{color:var(--teal-dark)}
.crow-cat{margin-top:5px;color:var(--mute);font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.45}
.crow-price{display:flex;min-width:0;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.crow-price>span{color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px))}
.crow-price>b{color:var(--orange);font-size:calc(15px + var(--font-bump, 0px));font-weight:800}
.crow-rm{display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:50%;background:transparent;color:#9aa6ae;cursor:pointer;transition:all .25s var(--ease)}
.crow-rm:hover{background:#fff0f0;color:#e5484d}
.crow-rm:disabled{cursor:wait;opacity:.45}
.crow-rm svg{width:15px;height:15px}
.cqty{display:inline-flex;align-items:center;margin-top:10px;padding:2px;border:1px solid #e8edef;border-radius:999px;background:#f6f8f9}
.cqty button{width:31px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:calc(16px + var(--font-bump, 0px));cursor:pointer;transition:all .2s var(--ease)}
.cqty button:hover{background:#fff;box-shadow:var(--sh-1)}
.cqty button:disabled{cursor:wait;opacity:.45}
.cqty span{width:34px;color:var(--ink);font-size:calc(13px + var(--font-bump, 0px));font-weight:700;text-align:center}
.cart-card-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-top:1px solid var(--line);background:#fbfcfc}
.cart-card-foot a,.cart-card-foot span{display:flex;align-items:center;gap:6px;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:600}
.cart-card-foot a{color:var(--teal-dark)}
.cart-card-foot span{color:var(--mute)}
.cart-card-foot svg{width:14px;height:14px}

.co-form{padding:22px}
.fld{margin-bottom:17px}
.fld label{display:block;margin-bottom:7px;color:var(--ink);font-size:calc(12.5px + var(--font-bump, 0px));font-weight:700}
.fld label i{color:#e5484d;font-style:normal}
.fld label span{color:var(--mute);font-size:calc(11px + var(--font-bump, 0px));font-weight:500}
.fld input,.fld textarea{width:100%;padding:12px 14px;border:1px solid #e4eaed;border-radius:11px;outline:none;background:#f8fafb;color:var(--ink);font:inherit;font-size:calc(13.5px + var(--font-bump, 0px));transition:all .25s var(--ease)}
.fld textarea{min-height:86px;resize:vertical;line-height:1.5}
.fld input::placeholder,.fld textarea::placeholder{color:#a7b1b8}
.fld input:focus,.fld textarea:focus{border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px rgba(0,184,169,.1)}
.fld input.has-err{border-color:#e5484d;background:#fff7f7}
.fld .err-msg{margin-top:5px;color:#e5484d;font-size:calc(11.5px + var(--font-bump, 0px))}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-card-title-icon{justify-content:flex-start}
.co-title-icon{display:grid;width:40px;height:40px;place-items:center;flex:0 0 40px;border-radius:12px;background:var(--teal-soft);color:var(--teal-dark)}
.co-title-icon svg{width:19px;height:19px}
.co-card-title-icon>em{display:flex;align-items:center;gap:5px;margin-left:auto;color:#6a7b84;font-size:calc(10.5px + var(--font-bump, 0px));font-style:normal;font-weight:600}
.co-card-title-icon>em svg{width:14px;height:14px;color:var(--teal)}

.payment-section{margin-top:7px;padding-top:20px;border-top:1px solid var(--line)}
.payment-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.payment-title span{display:block;margin-bottom:2px;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:700;text-transform:uppercase}
.payment-title h3{margin:0;color:var(--ink);font-size:calc(15px + var(--font-bump, 0px))}
.payment-title>svg{width:20px;height:20px;color:var(--teal)}
.pay{display:flex;flex-direction:column;gap:10px}
.pm{position:relative;display:grid;grid-template-columns:18px 42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 15px;border:1px solid #e5eaed;border-radius:13px;background:#fafbfc;cursor:pointer;transition:all .25s var(--ease)}
.pm:hover{border-color:#cce5e2;background:#fff}
.pm.on{border-color:var(--teal);background:#f0fbfa;box-shadow:0 0 0 2px rgba(0,184,169,.07)}
.pm>input{position:absolute;opacity:0;pointer-events:none}
.pm .rd{position:relative;width:18px;height:18px;border:1.5px solid #c8d1d6;border-radius:50%;background:#fff;transition:all .2s}
.pm.on .rd{border-color:var(--teal);background:var(--teal)}
.pm.on .rd::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.pm-ico{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;color:#fff}
.pm-ico svg{width:19px;height:19px}
.pm-ico.cod{background:linear-gradient(145deg,#ff9a4d,#ff6a0a)}
.pm-ico.bank{background:linear-gradient(145deg,#20d7c9,#009b90)}
.pm-copy{min-width:0}
.pm-copy b{display:block;color:var(--ink);font-size:calc(13px + var(--font-bump, 0px))}
.pm-copy>span{display:block;margin-top:3px;color:var(--mute);font-size:calc(11.5px + var(--font-bump, 0px))}
.pm>em{padding:4px 7px;border-radius:999px;background:#fff0e6;color:#c85008;font-size:calc(9.5px + var(--font-bump, 0px));font-style:normal;font-weight:800;text-transform:uppercase}
.qr{display:none;align-items:flex-start;gap:12px;margin-top:12px;padding:14px;border:1px dashed #bcdedb;border-radius:13px;background:#f4fbfa;text-align:left}
.qr.show{display:flex;animation:fadeUp .35s var(--ease)}
.qr>svg{width:26px;height:26px;flex:0 0 26px;color:var(--teal-dark)}
.qr-info{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px;flex:1;color:var(--body);font-size:calc(11.5px + var(--font-bump, 0px))}
.qr-info p{display:flex;justify-content:space-between;gap:10px;margin:0}
.qr-info b{color:var(--ink)}
.qr-info>span{display:block;margin-top:3px;line-height:1.5}

.sum{position:sticky;top:126px;padding:20px;border:1px solid #e7ecef;border-radius:18px;background:var(--card);box-shadow:0 14px 34px rgba(18,35,46,.09)}
.checkout-summary{position:static}
.sum-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.sum-head>span{display:grid;width:40px;height:40px;place-items:center;flex:0 0 40px;border-radius:12px;background:linear-gradient(145deg,#1b3b46,#12232e);color:#fff}
.sum-head>span svg{width:18px;height:18px}
.sum-head small{display:block;margin-bottom:2px;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px))}
.sum-head h2{margin:0;color:var(--ink);font-size:calc(15px + var(--font-bump, 0px))}
.checkout-summary .payment-section{margin:0 0 14px;padding:0 0 14px;border-top:0;border-bottom:1px solid var(--line)}
.checkout-summary .payment-title{margin-bottom:9px}
.checkout-summary .pm{grid-template-columns:18px 38px minmax(0,1fr);gap:9px;padding:11px 12px}
.checkout-summary .pm-ico{width:38px;height:38px;border-radius:10px}
.checkout-summary .pm-copy b{font-size:calc(12.5px + var(--font-bump, 0px))}
.checkout-summary .pm-copy>span{font-size:calc(10.5px + var(--font-bump, 0px))}
.checkout-payment-detail{margin-top:11px;animation:fadeUp .25s var(--ease)}
.checkout-payment-detail[hidden]{display:none}
.checkout-payment-benefits{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.checkout-payment-benefits li{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:start;gap:7px;color:#55666f;font-size:calc(10.75px + var(--font-bump, 0px));line-height:1.45}
.checkout-payment-benefits li>svg{width:15px;height:15px;margin-top:1px;padding:2px;border-radius:50%;background:#e5f8f5;color:var(--teal-dark)}
.checkout-payment-benefits b,.checkout-payment-benefits strong{color:var(--ink);font-weight:800}
.checkout-payment-benefits a{color:var(--teal-dark);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.checkout-bank-transfer{display:grid;grid-template-columns:128px minmax(0,1fr);gap:10px;margin-bottom:11px;padding:10px;border:1px dashed #b9ddd9;border-radius:12px;background:#f2fbfa}
.checkout-bank-qr{display:flex;min-width:0;flex-direction:column;align-items:center;gap:4px}
.checkout-bank-qr img{display:block;width:118px;height:118px;border:1px solid #dce6e8;border-radius:9px;background:#fff;object-fit:contain}
.checkout-bank-qr small{color:#6d7d84;font-size:calc(8.75px + var(--font-bump, 0px));font-weight:650}
.checkout-bank-info{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:5px}
.checkout-bank-info>span{display:flex;min-width:0;flex-direction:column;color:#75838a;font-size:calc(9.5px + var(--font-bump, 0px));line-height:1.3}
.checkout-bank-info b{overflow-wrap:anywhere;color:var(--ink);font-size:calc(10.5px + var(--font-bump, 0px))}
.checkout-bank-info strong{color:var(--orange);font-size:calc(12px + var(--font-bump, 0px))}
.checkout-bank-info>small{margin-top:2px;color:#63747b;font-size:calc(9px + var(--font-bump, 0px));line-height:1.4}
.checkout-bank-missing{margin-bottom:10px;padding:10px;border:1px solid #ffd7b5;border-radius:10px;background:#fff8f1;color:#9a511d;font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.45}
.checkout-bank-next{display:flex;align-items:flex-start;gap:9px;margin-bottom:11px;padding:11px;border:1px dashed #b9ddd9;border-radius:12px;background:#f2fbfa;color:var(--teal-dark)}
.checkout-bank-next>svg{width:21px;height:21px;flex:0 0 21px;margin-top:1px}
.checkout-bank-next b,.checkout-bank-next span{display:block}
.checkout-bank-next b{color:var(--ink);font-size:calc(11.5px + var(--font-bump, 0px))}
.checkout-bank-next span{margin-top:3px;color:#64777e;font-size:calc(10px + var(--font-bump, 0px));line-height:1.45}
.sum-row{display:flex;justify-content:space-between;padding:7px 0;color:var(--body);font-size:calc(12.5px + var(--font-bump, 0px))}
.sum-row b{color:var(--ink);font-weight:650}
.sum-row.free b{color:var(--teal-dark)}
.sum-row.shipping-fee b{color:var(--teal-dark)}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px;padding:14px 0 6px;border-top:1px dashed #dce3e6}
.sum-total span{color:var(--ink);font-size:calc(13.5px + var(--font-bump, 0px));font-weight:700}
.sum-total b{color:var(--orange);font-size:calc(22px + var(--font-bump, 0px));font-weight:850;letter-spacing:-.03em}
.shipping-note{display:flex;align-items:flex-start;gap:9px;margin:12px 0;padding:11px;border-radius:11px;background:#f5faf9;color:var(--teal-dark)}
.shipping-note>svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.shipping-note b,.shipping-note span{display:block}
.shipping-note b{font-size:calc(11.5px + var(--font-bump, 0px))}
.shipping-note span{margin-top:2px;color:#6f8188;font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.45}
.checkout-cta,.checkout-submit{width:100%;margin-top:8px;justify-content:center;gap:8px}
.checkout-cta svg,.checkout-submit svg{width:16px;height:16px}
.sum-assurances{display:flex;justify-content:center;gap:13px;margin-top:13px;color:var(--mute);font-size:calc(9.5px + var(--font-bump, 0px))}
.sum-assurances span{display:flex;align-items:center;gap:4px}
.sum-assurances svg{width:12px;height:12px;color:var(--teal)}
.co-note{margin:11px 0 0;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.5;text-align:center}
.checkout-policy{display:grid;grid-template-columns:19px minmax(0,1fr);align-items:start;gap:8px;margin:12px 0 3px;padding:10px;border:1px solid #dce6e8;border-radius:11px;background:#f8fbfb;color:#52636c;font-size:calc(10.75px + var(--font-bump, 0px));line-height:1.45;cursor:pointer}
.checkout-policy>input{position:absolute;width:1px;height:1px;opacity:0}
.checkout-policy-box{display:grid;width:19px;height:19px;place-items:center;border:1.5px solid #bcc9ce;border-radius:5px;background:#fff;color:transparent;transition:all .2s}
.checkout-policy-box svg{width:13px;height:13px}
.checkout-policy>input:checked+.checkout-policy-box{border-color:var(--teal);background:var(--teal);color:#fff}
.checkout-policy>input:focus-visible+.checkout-policy-box{outline:3px solid rgba(0,184,169,.2);outline-offset:2px}
.checkout-policy a{color:var(--teal-dark);font-weight:750;text-decoration:underline;text-underline-offset:2px}
.checkout-policy.has-err{border-color:#e5484d;background:#fff7f7}
.checkout-inline-error{margin-top:7px;color:#c9363d;font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.4}
.checkout-inline-error.policy-error{margin:3px 2px 0}
.checkout-help{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.checkout-help>svg{width:18px;height:18px;color:var(--orange)}
.checkout-help span,.checkout-help a{display:block}
.checkout-help span{color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px))}
.checkout-help a{margin-top:1px;color:var(--ink);font-size:calc(12.5px + var(--font-bump, 0px));font-weight:800}
.checkout-submit-loading{display:none;align-items:center;gap:8px}
.checkout-submit.is-loading .checkout-submit-label{display:none}
.checkout-submit.is-loading .checkout-submit-loading{display:flex}
.checkout-submit-loading i{width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:checkoutSpin .7s linear infinite}
@keyframes checkoutSpin{to{transform:rotate(360deg)}}
.checkout-alert{display:flex;align-items:flex-start;gap:10px;margin:-8px 0 18px;padding:13px 15px;border:1px solid #ffd0d0;border-radius:12px;background:#fff6f6;color:#b5363b}
.checkout-alert>svg{width:19px;height:19px;flex:0 0 19px}
.checkout-alert b,.checkout-alert span{display:block}
.checkout-alert b{font-size:calc(12.5px + var(--font-bump, 0px))}
.checkout-alert span{margin-top:2px;font-size:calc(11px + var(--font-bump, 0px))}

.empty{text-align:center}
.empty-commerce{max-width:620px;margin:12px auto 56px;padding:58px 30px;border:1px solid #e8edef;border-radius:22px;background:linear-gradient(145deg,#fff,#f7fbfa);box-shadow:0 14px 38px rgba(18,35,46,.06)}
.empty-ico{display:grid;width:78px;height:78px;place-items:center;margin:0 auto 17px;border-radius:24px;background:var(--teal-soft);color:var(--teal-dark)}
.empty-ico svg{width:34px;height:34px}
.empty-kicker{color:var(--teal-dark);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.empty h2{margin:7px 0 8px;color:var(--ink);font-size:calc(23px + var(--font-bump, 0px))}
.empty p{max-width:440px;margin:0 auto 21px;color:var(--mute);font-size:calc(13px + var(--font-bump, 0px));line-height:1.6}
.empty .btn{gap:7px}
.empty .btn svg{width:16px;height:16px}

.success-shell{max-width:1120px}
.success-shell .checkout-step{font-size:calc(12px + var(--font-bump, 0px))}
.done{max-width:980px;margin:0 auto;text-align:center}
.done-hero{position:relative;overflow:hidden;padding:34px 24px 30px;border:1px solid #d9efec;border-radius:24px;background:radial-gradient(circle at 15% 15%,rgba(255,122,26,.11),transparent 25%),radial-gradient(circle at 88% 22%,rgba(0,184,169,.16),transparent 28%),linear-gradient(145deg,#fff,#f1fbfa);box-shadow:0 16px 42px rgba(18,35,46,.07)}
.done-ico{display:grid;width:82px;height:82px;place-items:center;margin:0 auto 17px;border:7px solid #ddf7f4;border-radius:50%;background:linear-gradient(145deg,#22d3c5,#00a99c);color:#fff;box-shadow:0 9px 28px rgba(0,184,169,.28);animation:pop .55s var(--ease)}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.07)}100%{transform:scale(1);opacity:1}}
.done-ico svg{width:38px;height:38px}
.done-hero .done-kicker{font-size:calc(13px + var(--font-bump, 0px))}
.done-hero h1{margin:5px 0 7px;color:var(--ink);font-size:calc(32px + var(--font-bump, 0px));letter-spacing:-.035em}
.done-hero-copy>p{max-width:610px;margin:0 auto 20px;color:var(--body);font-size:calc(15.5px + var(--font-bump, 0px));line-height:1.6}
.order-code{display:inline-flex;align-items:center;gap:10px;padding:8px 9px 8px 13px;border:1px solid #d9e5e7;border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(18,35,46,.07)}
.order-code span{color:var(--mute);font-size:calc(12px + var(--font-bump, 0px))}
.order-code b{color:var(--ink);font-size:calc(15px + var(--font-bump, 0px));letter-spacing:.035em}
.order-code button{padding:7px 10px;border:0;border-radius:8px;background:#ecf9f7;color:var(--teal-dark);font:inherit;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:800;cursor:pointer}
.done-hero.has-bank-payment{padding-top:22px}
.done-hero.has-bank-payment .done-hero-summary{display:block;padding:0;text-align:center}
.done-hero.has-bank-payment .done-ico{width:68px;height:68px;margin:0 auto 12px;border-width:6px}
.done-hero.has-bank-payment .done-ico svg{width:31px;height:31px}
.done-hero.has-bank-payment .done-hero-copy>p{max-width:650px;margin:0 auto;color:#617078}
.done-hero.has-bank-payment .done-hero-copy h1{margin:4px 0 6px}
.done-hero.has-bank-payment .done-kicker{margin-bottom:0}
.done-bank-inline{margin:20px -24px -30px;border-top:1px solid #cde9e5;background:#fff;text-align:left}
.done-bank-inline-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid #dfeceb;background:linear-gradient(135deg,#effbf9,#fff8f2)}
.success-bank-icon{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:linear-gradient(145deg,#18cdbf,#00a99c);color:#fff;box-shadow:0 7px 18px rgba(0,184,169,.22)}
.success-bank-icon svg{width:24px;height:24px}
.done-bank-inline-head .success-bank-icon{width:44px;height:44px;border-radius:13px}
.done-bank-inline-head small{display:block;margin-bottom:2px;color:var(--teal-dark);font-size:calc(10px + var(--font-bump, 0px));font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.done-bank-inline-head h2{margin:0;color:var(--ink);font-size:calc(18px + var(--font-bump, 0px));letter-spacing:-.02em}
.done-bank-inline-head p{margin:3px 0 0;color:var(--mute);font-size:calc(11px + var(--font-bump, 0px))}
.done-bank-order-code{justify-self:start;box-shadow:none}
.bank-payment-status{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#fff5e9;color:#b85a16;font-size:calc(11px + var(--font-bump, 0px));white-space:nowrap}
.bank-payment-status i{width:7px;height:7px;border-radius:50%;background:#ff7a1a;box-shadow:0 0 0 4px rgba(255,122,26,.13);animation:checkoutRunnerPulse 1.5s ease-in-out infinite}
.success-bank-body{display:grid;grid-template-columns:294px minmax(0,1fr);gap:20px;align-items:center;padding:18px 20px}
.success-bank-qr{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:1px solid #e0eaec;border-radius:17px;background:#fafcfc}
.success-bank-qr img{display:block;width:262px;height:262px;border-radius:12px;background:#fff;object-fit:contain}
.success-bank-qr>span{display:flex;align-items:center;gap:5px;color:var(--teal-dark);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:750}
.success-bank-qr svg{width:14px;height:14px}
.success-bank-details{display:grid;gap:12px}
.success-bank-details>div{padding-bottom:11px;border-bottom:1px solid var(--line)}
.success-bank-details>div>span,.success-bank-details>div>b,.success-bank-details>div>strong{display:block}
.success-bank-details>div>span{margin-bottom:4px;color:var(--mute);font-size:calc(11px + var(--font-bump, 0px))}
.success-bank-details>div>b{color:var(--ink);font-size:calc(15px + var(--font-bump, 0px));overflow-wrap:anywhere}
.success-bank-details>div>strong{color:var(--orange);font-size:calc(25px + var(--font-bump, 0px));font-weight:850;letter-spacing:-.03em}
.success-bank-details button{margin-top:7px;padding:7px 10px;border:0;border-radius:8px;background:#eaf8f6;color:var(--teal-dark);font:inherit;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:800;cursor:pointer}
.success-transfer-warning{display:block;margin-top:7px;color:#d92d20;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:600;line-height:1.45}
.success-transfer-warning strong{font-weight:850}
.success-bank-account{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.success-bank-account>span{min-width:0;margin:0!important}
.success-bank-account b{display:block;margin-top:3px;color:var(--ink);font-size:calc(11.5px + var(--font-bump, 0px));overflow-wrap:anywhere}
.success-bank-details>p{display:flex;align-items:flex-start;gap:7px;margin:0;color:#62757c;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.5}
.success-bank-details>p svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;color:var(--teal-dark)}
.success-bank-details>p b{color:var(--ink)}
.success-bank-assurance{display:flex;align-items:flex-start;justify-content:center;gap:8px;padding:12px 18px;border-top:1px solid #dcefeb;background:#f2fbf9;color:#5f747a;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.5;text-align:center}
.success-bank-assurance>svg{width:18px;height:18px;flex:0 0 18px;color:var(--teal-dark)}
.success-bank-assurance b{color:var(--ink)}
.success-bank-assurance a{color:var(--teal-dark);font-weight:800;text-decoration:underline;text-underline-offset:2px}
.success-bank-error{margin:18px;padding:14px;border:1px solid #ffd7b5;border-radius:12px;background:#fff8f1;color:#9a511d;font-size:calc(12px + var(--font-bump, 0px));line-height:1.5;text-align:center}
.next-steps{padding:32px 0 24px;text-align:left}
.section-heading{text-align:center}
.section-heading h2{margin:0;color:var(--ink);font-size:calc(21px + var(--font-bump, 0px))}
.next-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:17px}
.next-steps-grid article{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #e6ecee;border-radius:15px;background:#fff;text-align:left}
.next-steps-grid article>b{display:grid;width:30px;height:30px;place-items:center;flex:0 0 30px;border-radius:10px;background:#fff1e7;color:#d75a0b;font-size:calc(12px + var(--font-bump, 0px))}
.next-steps-grid h3{margin:0 0 4px;color:var(--ink);font-size:calc(14px + var(--font-bump, 0px))}
.next-steps-grid p{margin:0;color:var(--mute);font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.5}
.done-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;text-align:left}
.done-card{overflow:hidden;padding:0 20px 14px;border:1px solid #e6ecee;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(18,35,46,.055)}
.done-card header{display:flex;align-items:center;gap:10px;margin:0 -20px 8px;padding:14px 20px;border-bottom:1px solid var(--line);background:#fbfcfc}
.done-card header>span{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:var(--teal-soft);color:var(--teal-dark)}
.done-card header svg{width:17px;height:17px}
.done-card header small{display:block;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px));text-transform:uppercase}
.done-card header h2{margin:1px 0 0;color:var(--ink);font-size:calc(15px + var(--font-bump, 0px))}
.done-row{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--line);font-size:calc(12.5px + var(--font-bump, 0px))}
.done-row:last-child{border-bottom:0}
.done-row span{color:var(--mute)}
.done-row b{max-width:64%;color:var(--ink);font-weight:700;text-align:right}
.done-product{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:calc(12.5px + var(--font-bump, 0px))}
.done-product>span{min-width:0;color:var(--ink);font-weight:650;line-height:1.4}
.done-product small{display:block;margin-top:2px;color:var(--mute);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:500}
.done-product>b{flex:0 0 auto;color:var(--ink);font-size:calc(13px + var(--font-bump, 0px))}
.done-total{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0 1px}
.done-total span{color:var(--ink);font-size:calc(13.5px + var(--font-bump, 0px));font-weight:700}
.done-total b{color:var(--orange);font-size:calc(20px + var(--font-bump, 0px));font-weight:850}
.done-assurance{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0;padding:13px;border:1px solid #dcefeb;border-radius:13px;background:#f2fbf9;color:var(--teal-dark);text-align:left}
.done-assurance>svg{width:20px;height:20px;flex:0 0 20px}
.done-assurance b,.done-assurance span{display:block}
.done-assurance b{font-size:calc(12.5px + var(--font-bump, 0px))}
.done-assurance span{margin-top:2px;color:#71858b;font-size:calc(11px + var(--font-bump, 0px))}
.done-btns{display:flex;justify-content:center;gap:10px}
.done-btns .btn{gap:7px}
.done-btns svg{width:16px;height:16px}

@media(max-width:900px){
  .commerce-head{align-items:flex-start;flex-direction:column}
  .checkout-steps{width:100%;flex-basis:auto}
  .co-wrap{grid-template-columns:1fr}
  .sum{position:static}
}
@media(max-width:768px){
  .commerce-shell{padding-bottom:42px}
  .commerce-head{gap:18px;margin:3px 0 20px}
  .commerce-head h1{font-size:calc(24px + var(--font-bump, 0px))}
  .commerce-head p{font-size:calc(12.5px + var(--font-bump, 0px))}
  .checkout-step{flex-basis:68px;font-size:calc(10px + var(--font-bump, 0px))}
  .checkout-step b{width:30px;height:30px}
  .checkout-steps{--step-edge:34px}
  .checkout-steps>i{margin-top:15px}
  .co-wrap{gap:14px}
  .co-card{border-radius:15px}
  .co-card-head{min-height:64px;padding:13px 14px}
  .co-card-head h2{font-size:calc(15px + var(--font-bump, 0px))}
  .crow{grid-template-columns:70px minmax(0,1fr) 30px;gap:11px;padding:14px}
  .crow-img{width:70px;height:65px;border-radius:11px}
  .cart-card .crow-img{width:70px;height:70px}
  .crow-main{padding-right:3px}
  .crow-name{padding-right:15px;font-size:calc(12.5px + var(--font-bump, 0px))}
  .crow-price{grid-column:2;align-items:flex-start;margin-top:-4px}
  .crow-price>span{display:none}
  .crow-price>b{font-size:calc(13.5px + var(--font-bump, 0px))}
  .crow-rm{grid-column:3;grid-row:1;align-self:start;width:30px;height:30px}
  .cqty{margin-top:8px}
  .cqty button{width:28px;height:28px}
  .cqty span{width:30px}
  .crow-checkout{grid-template-columns:64px minmax(0,1fr) auto}
  .crow-checkout .crow-img{width:64px;height:58px}
  .crow-checkout .crow-name{padding-right:0}
  .crow-checkout .crow-price{grid-column:3;grid-row:1;align-items:flex-end;margin:0}
  .crow-checkout .crow-price>b{font-size:calc(12.5px + var(--font-bump, 0px))}
  .cart-card-foot{align-items:flex-start;flex-direction:column;padding:12px 14px}
  .co-form{padding:16px 14px}
  .fld-row{grid-template-columns:1fr;gap:0}
  .co-card-title-icon>em{display:none}
  .payment-section{margin-top:4px}
  .pm{grid-template-columns:18px 38px minmax(0,1fr);gap:9px;padding:12px}
  .pm-ico{width:38px;height:38px}
  .pm>em{display:none}
  .pm-copy b{font-size:calc(12px + var(--font-bump, 0px))}
  .pm-copy>span{font-size:calc(10.5px + var(--font-bump, 0px))}
  .qr-info{grid-template-columns:1fr}
  .sum{padding:17px;border-radius:15px}
  .sum-assurances{gap:9px}
  .empty-commerce{margin:4px auto 38px;padding:42px 20px}
  .empty h2{font-size:calc(20px + var(--font-bump, 0px))}
  .success-steps{margin-bottom:17px}
  .success-shell .checkout-step{font-size:calc(11px + var(--font-bump, 0px))}
  .done-hero{padding:27px 16px 24px;border-radius:19px}
  .done-ico{width:72px;height:72px}
  .done-hero h1{font-size:calc(26px + var(--font-bump, 0px))}
  .done-hero-copy>p{font-size:calc(14.5px + var(--font-bump, 0px))}
  .order-code{gap:7px}
  .order-code span{display:none}
  .checkout-progress-runner{top:-5px;width:40px;height:40px}
  .done-hero.has-bank-payment{padding-top:23px}
  .done-hero.has-bank-payment .done-hero-summary{display:block;padding:0;text-align:center}
  .done-hero.has-bank-payment .done-ico{width:62px;height:62px}
  .done-hero.has-bank-payment .done-hero-copy h1{font-size:calc(26px + var(--font-bump, 0px));line-height:1.2}
  .done-hero.has-bank-payment .done-hero-copy>p{font-size:calc(14.5px + var(--font-bump, 0px));line-height:1.45}
  .done-bank-inline{margin:12px -16px -24px}
  .done-bank-inline-head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px;flex-wrap:nowrap}
  .success-bank-icon{width:42px;height:42px;border-radius:12px}
  .done-bank-inline-head h2{font-size:calc(16px + var(--font-bump, 0px));line-height:1.3}
  .done-bank-inline-head .bank-payment-status{flex:0 0 auto;margin-left:0;padding:6px 8px;font-size:calc(10px + var(--font-bump, 0px))}
  .done-bank-order-code{min-width:0;gap:4px;padding:6px 7px}
  .done-bank-order-code span{display:inline;font-size:calc(10px + var(--font-bump, 0px));white-space:nowrap}
  .done-bank-order-code b{font-size:calc(13.5px + var(--font-bump, 0px));white-space:nowrap}
  .done-bank-order-code button{padding:6px 7px;font-size:calc(10px + var(--font-bump, 0px));white-space:nowrap}
  .success-bank-body{grid-template-columns:clamp(166px,45vw,176px) minmax(0,1fr);gap:10px;padding:12px}
  .success-bank-qr{grid-column:1;grid-row:1 / span 2;width:auto;max-width:none;margin:0;padding:8px;gap:5px;border-radius:12px}
  .success-bank-qr img{width:clamp(148px,40.5vw,158px);height:clamp(148px,40.5vw,158px);max-width:100%}
  .success-bank-qr>span{font-size:calc(9px + var(--font-bump, 0px));white-space:nowrap}
  .success-bank-details{display:contents}
  .success-bank-details>div{padding-bottom:7px}
  .success-bank-details>div:nth-child(1){grid-column:2;grid-row:1}
  .success-bank-details>div:nth-child(2){grid-column:2;grid-row:2}
  .success-bank-details>div:nth-child(2)>b{max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
  .success-bank-details>div>span{margin-bottom:2px;font-size:calc(10px + var(--font-bump, 0px))}
  .success-bank-details>div>b{font-size:calc(12px + var(--font-bump, 0px));line-height:1.35}
  .success-bank-details>div>strong{font-size:calc(21px + var(--font-bump, 0px))}
  .success-bank-details button{margin-top:5px;padding:6px 7px;font-size:calc(9.5px + var(--font-bump, 0px))}
  .success-bank-account{grid-column:1 / -1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
  .success-bank-account b{font-size:calc(10px + var(--font-bump, 0px))}
  .success-bank-details>p{grid-column:1 / -1;grid-row:4;font-size:calc(10.5px + var(--font-bump, 0px))}
  .success-bank-assurance{text-align:left}
  .next-steps{padding:27px 0 18px}
  .section-heading h2{font-size:calc(19px + var(--font-bump, 0px))}
  .next-steps-grid{grid-template-columns:1fr;gap:9px}
  .next-steps-grid article{padding:13px}
  .done-grid{grid-template-columns:1fr;gap:12px}
  .done-card{border-radius:15px}
  .done-btns{flex-direction:row;gap:8px}
  .done-btns .btn{width:auto;flex:1;justify-content:center;padding:11px 8px;font-size:calc(13px + var(--font-bump, 0px))}
}

@media(prefers-reduced-motion:reduce){
  .checkout-progress-runner{animation:none!important}
  .checkout-progress-runner::after,.bank-payment-status i{animation:none!important}
  .checkout-steps[data-step="2"] .checkout-progress-runner{left:50%}
  .checkout-steps[data-step="3"] .checkout-progress-runner{left:calc(100% - var(--step-edge))}
  .topbar-greeting-track{padding-left:0;animation:none!important}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:26px;left:50%;z-index:300;
  transform:translateX(-50%) translateY(100px) scale(.9);
  background:rgba(18,35,46,.93);backdrop-filter:blur(20px) saturate(180%);
  color:#fff;padding:12px 20px;border-radius:var(--r-pill);
  font-size:calc(13.5px + var(--font-bump, 0px));font-weight:500;
  box-shadow:var(--sh-4);
  display:flex;align-items:center;gap:9px;
  opacity:0;transition:all .45s var(--ease);
  border:1px solid rgba(255,255,255,.12);
}
.toast.show{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
.toast svg{width:16px;height:16px;color:var(--green)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1024px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .hero h1{font-size:calc(38px + var(--font-bump, 0px))}
}
@media(min-width:769px) and (max-width:1100px){
  .header-inner{gap:12px;padding:10px 14px}
  .header-inner .logo{height:36px;max-width:165px}
  .header-inner .search{width:auto;min-width:210px;max-width:360px;flex:1 1 280px}
  .header-inner .nav{gap:2px}
  .header-inner .nav-link{padding:7px 8px;font-size:calc(13px + var(--font-bump, 0px))}
  .header-inner .cart-btn{padding:7px 10px;font-size:calc(12px + var(--font-bump, 0px))}
  .header-inner .cat-sale{display:none}
}
@media(max-width:900px){
  .footer-trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .spot{max-width:440px}
  .trust-grid{grid-template-columns:1fr 1fr}
  .bgrid{grid-template-columns:1fr 1fr}
  .cta{flex-direction:column;text-align:center;padding:38px 28px}
  .news-box{flex-direction:column;text-align:center;padding:32px 24px}
  .shop{grid-template-columns:1fr}
  /* Từ tablet trở xuống ẩn danh mục bộ lọc cũ; module dùng chung được bật ở phần archive. */
  .filt{position:static;margin-bottom:16px;padding:10px;border:1px solid #e8ecef;border-radius:14px;box-shadow:none}
  .filt .filt-top{display:none}
  .filt .fgroup-cats{display:none}
  .shop .pgrid{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr;gap:26px}
  .pdp-media{position:static}
}

/* ============ MOBILE — tối ưu gọn gàng ============ */
@media(max-width:768px){
  .featured-categories{padding-bottom:44px}
  .hsplit + .featured-categories{padding-top:20px}
  .featured-categories-head{align-items:flex-end;margin-bottom:16px}
  .featured-categories-head h2:not(.section-title){font-size:calc(23px + var(--font-bump, 0px))}
  .featured-categories-kicker{font-size:calc(10.5px + var(--font-bump, 0px));margin-bottom:5px}
  .featured-categories-count{padding:5px 8px;font-size:calc(10.5px + var(--font-bump, 0px))}
  .featured-category-grid{grid-template-rows:repeat(2,82px);grid-auto-columns:calc((100% - 15px)/4);gap:5px;padding-bottom:6px}
  .featured-category-card{width:auto;min-height:82px;padding:3px 2px;gap:3px;flex-direction:column;justify-content:center;text-align:center}
  .featured-category-more{width:auto}
  .featured-category-icon{flex-basis:30px;width:30px;height:30px;border-radius:8px}
  .featured-category-icon svg{width:16px;height:16px}
  .featured-category-photo{flex-basis:36px;width:55px;height:36px}
  .featured-category-panel{flex-basis:19px;height:29px}
  .featured-category-panel + .featured-category-panel{margin-left:-2px}
  .featured-category-panel.is-center{flex-basis:35px;height:35px}
  .featured-category-panel.is-left{transform:rotateY(34deg) scale(.88)}
  .featured-category-panel.is-right{transform:rotateY(-34deg) scale(.88)}
  .featured-category-copy{flex:none}
  .featured-category-copy b{font-size:calc(14px + var(--font-bump, 0px));line-height:1.15;margin:0}
  .featured-category-copy small,.featured-category-arrow{display:none}
  .featured-category-rail-meta{gap:6px;min-height:26px;margin-top:4px}
  .featured-category-dots{gap:5px}
  .featured-category-dots button{width:9px;height:9px}
  .featured-category-dots button.is-active{width:26px}
  .featured-category-scroll-hint{gap:3px;padding:4px 7px;font-size:calc(9.5px + var(--font-bump, 0px))}
  .footer-trust{grid-template-columns:1fr;gap:15px;padding-bottom:22px;margin-bottom:22px}
  .footer-trust-item p{max-width:520px}
  /* Hiện nút 3 gạch */
  .burger{display:flex;grid-column:1;grid-row:1}

  /* Header: hàng 1 = 3 gạch | LOGO giữa | giỏ hàng — hàng 2 = tìm kiếm */
  .container.header-inner{
    display:grid;
    grid-template-columns:42px 1fr 42px;
    grid-template-rows:auto auto;
    align-items:center;gap:10px;
    padding:12px 14px;           /* thở trên dưới, không chạm topbar */
  }
  .brand{justify-content:center;gap:8px;grid-column:2;grid-row:1;min-width:0}
  .brand-mark{width:32px;height:32px;border-radius:9px}
  .brand-mark svg{width:17px;height:17px}
  .brand-name{font-size:calc(14.5px + var(--font-bump, 0px));text-align:center;white-space:nowrap}
  .brand-name span{display:none}

  /* Menu chữ trên đầu: ẩn (đã có trong drawer) */
  .nav{display:flex;justify-content:flex-end;grid-column:3;grid-row:1}
  .nav-link{display:none}

  /* Nút giỏ: icon tròn 42px, ở cột phải */
  .cart-btn{
    position:relative;width:42px;height:42px;padding:0;gap:0;font-size:0;
    justify-content:center;border-radius:10px;
  }
  .cart-btn svg{width:19px;height:19px}
  .cart-num{position:absolute;top:0;right:0;font-size:calc(10px + var(--font-bump, 0px));min-width:18px;height:18px;box-shadow:0 0 0 2px var(--bg)}

  /* Ô tìm kiếm: xuống hàng riêng, full ngang */
  .search{
    grid-column:1/-1;grid-row:2;
    width:100%;max-width:none;flex:none;
    height:40px;padding:0 15px;border-radius:var(--r-pill);
    justify-content:flex-start;
  }
  .search input{width:auto;flex:1;padding:9px 0;opacity:1;font-size:calc(14px + var(--font-bump, 0px))}
  .search svg{width:16px;height:16px}

  /* ẨN thanh menu ngang trên mobile */
  .catbar{display:none}

  /* Topbar gọn */
  .topbar-inner{gap:10px;padding:7px 14px;font-size:calc(11.5px + var(--font-bump, 0px))}
  .topbar-greeting{flex:1;width:auto;max-width:none}
  .topbar .tr{display:none}

  /* Slider: cao vừa phải, chữ vừa mắt */
  .hsplit{padding:14px 0 6px}
  .hsplit-grid{gap:12px}
  .hsplit .slide{min-height:210px}
  .sin{padding:0 44px}
  .sin h2{font-size:calc(20px + var(--font-bump, 0px));margin-bottom:7px}
  .sin p{font-size:calc(12.5px + var(--font-bump, 0px));margin-bottom:14px}
  .sin .e{font-size:calc(10.5px + var(--font-bump, 0px));margin-bottom:6px}
  .sin .btn{padding:10px 20px;font-size:calc(13px + var(--font-bump, 0px))}
  .snav{width:40px;height:40px}
  .snav svg{width:18px;height:18px}
  .snav.p{left:8px} .snav.n{right:8px}
  .sdots{bottom:10px;padding:5px 9px}
  .sdots .d{width:6px;height:6px}
  .sdots .d.on{width:18px}

  /* Banner phụ: 1 cột */
  .side{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .sbox{padding:14px 15px;gap:12px;border-radius:var(--r-lg)}
  .sb-ico{width:44px;height:44px;border-radius:13px}
  .sb-ico svg{width:22px;height:22px}
  .sb-txt b{font-size:calc(14px + var(--font-bump, 0px))}
  .sb-txt p{font-size:calc(11.5px + var(--font-bump, 0px))}
  .sb-txt .tag{font-size:calc(9.5px + var(--font-bump, 0px))}
  .sb-arrow{width:26px;height:26px}
  .sb-arrow svg{width:13px;height:13px}

  /* Lưới nội dung */
  .container{padding:0 16px}
  .success-shell{padding-bottom:calc(52px + env(safe-area-inset-bottom, 0px))}
  .section{padding:36px 0}
  .shead{flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:20px}
  .shead h2:not(.section-title){font-size:calc(22px + var(--font-bump, 0px))}
  .shead p{font-size:calc(13px + var(--font-bump, 0px))}
  .see{padding:6px 12px;font-size:calc(13px + var(--font-bump, 0px))}

  .trust{padding:6px 0 30px}
  .trust-grid{grid-template-columns:1fr 1fr;gap:10px}
  .tcard{padding:14px;gap:10px;flex-direction:column;align-items:flex-start}
  .tico{width:36px;height:36px;border-radius:10px}
  .tico svg{width:17px;height:17px}
  .tcard b{font-size:calc(12.5px + var(--font-bump, 0px))}
  .tcard span{font-size:calc(11px + var(--font-bump, 0px))}

  .cats{grid-template-columns:repeat(3,1fr);gap:10px}
  .cat{padding:16px 8px}
  .cat .ci{width:44px;height:44px;border-radius:13px;margin-bottom:9px}
  .cats-compact .cat{grid-template-columns:40px minmax(0,1fr);padding:13px 12px;min-height:68px}
  .cats-compact .cat .ci{width:40px;height:40px;margin:0}
  .ci svg{width:21px;height:21px}
  .cat b{font-size:calc(12px + var(--font-bump, 0px))}
  .cat span{font-size:calc(10.5px + var(--font-bump, 0px))}

  .pgrid{grid-template-columns:1fr 1fr;gap:11px}
  .pbody{padding:12px 12px 14px;gap:4px}
  .pname{font-size:calc(13px + var(--font-bump, 0px));min-height:36px}
  .pprice .n{font-size:calc(15.5px + var(--font-bump, 0px))}
  .pprice .o{font-size:calc(11.5px + var(--font-bump, 0px))}
  .pcat{font-size:calc(10.5px + var(--font-bump, 0px))}
  .pcard .prate{display:flex!important;align-items:center;gap:4px;min-height:20px;margin:-1px 0 5px;visibility:visible;opacity:1;white-space:nowrap}
  .pcard .prating-score,.pcard .pstock{display:inline-flex!important}
  .pcard .prating-score svg{width:12px;height:12px}
  .pcard .prating-value{font-size:calc(11px + var(--font-bump, 0px))}
  .pcard .prate-separator{display:block!important;height:10px}
  .pcard .pstock{font-size:calc(9.5px + var(--font-bump, 0px))}
  .pcard .pstock-dot{width:5px;height:5px}
  .pcta{padding:11px;font-size:calc(12.5px + var(--font-bump, 0px));margin-top:9px}
  .pbadge{top:8px;left:8px;min-height:19px;padding:3px 6px;font-size:calc(8.5px + var(--font-bump, 0px));border-radius:6px}
  .pfav{width:30px;height:30px;top:8px;right:8px}
  .pfav svg{width:15px;height:15px}
  /* Vùng chạm vô hình rộng 44px quanh nút tim */
  .pfav::before{content:"";position:absolute;inset:-5px;border-radius:50%}

  .bgrid{grid-template-columns:1fr;gap:14px}
  .bbody{padding:16px}
  .bcard h3{font-size:calc(15px + var(--font-bump, 0px))}

  .cta{flex-direction:column;text-align:center;padding:28px 20px;gap:18px;border-radius:var(--r-lg)}
  .cta h2{font-size:calc(21px + var(--font-bump, 0px))}
  .cta p{font-size:calc(13px + var(--font-bump, 0px))}

  .news{padding:0 0 40px}
  .news-box{flex-direction:column;text-align:center;padding:26px 20px;gap:18px;border-radius:var(--r-lg)}
  .news-box h2{font-size:calc(20px + var(--font-bump, 0px))}
  .news-f{flex-direction:column;width:100%}
  .news-f input{min-width:0;width:100%}
  .news-f .btn{width:100%}

  /* Trang sản phẩm */
  .crumb{padding:14px 0 2px;font-size:calc(12px + var(--font-bump, 0px))}
  .shop{grid-template-columns:1fr;gap:0;padding:8px 0 40px}
  /* .filt: đã chuyển sang lưới icon 5 cột ở breakpoint 900px phía trên */
  .sbar{margin-bottom:14px}
  .sbar .c{font-size:calc(12.5px + var(--font-bump, 0px))}
  .segs{width:100%}
  .segs button{flex:1;padding:8px 6px;font-size:calc(12px + var(--font-bump, 0px))}

  /* Chi tiết */
  .pdp{grid-template-columns:1fr;gap:20px;padding:14px 0 10px}
  .pdp-media{position:static}
  .pdp-big{border-radius:var(--r-lg)}
  .pdp-th .t{width:62px;height:50px}
  .pdp-info h1{font-size:calc(22px + var(--font-bump, 0px))}
  .pdp-pr{padding:14px 0}
  .pdp-pr .n{font-size:calc(24px + var(--font-bump, 0px))}
  .pdp-mt{padding:14px 0;gap:7px}
  .pdp-mt .m{font-size:calc(12.5px + var(--font-bump, 0px))}
  .pdp-buy{gap:9px;margin:4px 0 18px}
  .specs li{padding:11px 13px;font-size:calc(12.5px + var(--font-bump, 0px))}
  .specs li span{width:110px}

  /* Footer */
  .foot{padding:26px 0 0}
  .fgrid{grid-template-columns:1fr 1fr;gap:16px;padding-bottom:18px}
  .fgrid>div:first-child{grid-column:1/-1}
  .fdesc{max-width:none;font-size:calc(12.5px + var(--font-bump, 0px))}
  .fcol h4{font-size:calc(13px + var(--font-bump, 0px));margin-bottom:9px}
  .fcol a{font-size:calc(12.5px + var(--font-bump, 0px));padding:4px 0}
  .fmeta{font-size:calc(12.5px + var(--font-bump, 0px))}

  /* Toast gọn */
  .toast{bottom:16px;padding:11px 17px;font-size:calc(12.5px + var(--font-bump, 0px));max-width:calc(100% - 32px)}
}

/* Màn rất nhỏ (iPhone SE) */
@media(max-width:380px){
  .cats{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .sin h2{font-size:calc(18px + var(--font-bump, 0px))}
  .hsplit .slide{min-height:190px}
}


/* ============================================================
   Bổ sung cho bản PHP thật (không có trong demo tĩnh gốc)
   ============================================================ */
.img-placeholder{width:100%;height:100%;min-height:120px;background:linear-gradient(150deg,#f2f4f7,#e6eaf0)}
.pthumb picture, .pdp-big picture, .spot-img picture, .crow-img picture{width:100%;height:100%;display:block}
.pthumb img{width:100%;height:100%;object-fit:contain}
.spot-img img{width:100%;height:100%;object-fit:cover}
.pdp-big img{width:100%;height:100%;object-fit:contain}
.crow-img img{width:100%;height:100%;object-fit:cover}
.bthumb img{width:100%;height:100%;object-fit:cover}
.art-hero picture{display:block;width:100%}
.art-hero img{display:block;width:100%;height:auto;object-fit:contain}

.badge-off{background:rgba(18,35,46,.75);color:#fff;font-size:calc(11px + var(--font-bump, 0px));font-weight:700;padding:5px 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center}
.pcta.disabled{background:var(--bg);color:var(--mute);cursor:not-allowed}
.pdp-buy .note-off{font-size:calc(13px + var(--font-bump, 0px));color:var(--mute);background:var(--bg);padding:12px 16px;border-radius:var(--r)}

.pager{display:flex;justify-content:center;gap:6px;margin-top:32px}
.pager a,.pager span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-size:calc(13.5px + var(--font-bump, 0px));font-weight:600;color:var(--body);transition:all .25s var(--ease)}
.pager a:hover{background:var(--bg)}
.pager .on{background:var(--teal);color:#fff}

.fld .err-msg{font-size:calc(12px + var(--font-bump, 0px));color:#e5484d;margin-top:5px}
.fld input.has-err{border-color:#e5484d;background:#fff5f5}

.nf-wrap{max-width:520px;margin:70px auto;text-align:center;padding:0 20px}
.nf-wrap h1{font-size:calc(70px + var(--font-bump, 0px));margin-bottom:8px;background:linear-gradient(120deg,#00b8a9,#ff7a1a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nf-wrap p{margin-bottom:22px}

.page-content{max-width:820px;margin:0 auto;padding:20px 0 60px;font-size:calc(15px + var(--font-bump, 0px));line-height:1.75;color:var(--body)}
.page-content h1{font-size:calc(28px + var(--font-bump, 0px));margin-bottom:20px}
.page-content h2{font-size:calc(20px + var(--font-bump, 0px));margin:26px 0 12px;color:var(--ink)}
.page-content h3{font-size:calc(16px + var(--font-bump, 0px));margin:20px 0 8px;color:var(--ink)}
.page-content p{margin-bottom:14px}
.page-content ul,.page-content ol{margin:0 0 14px 20px}
.page-content img{max-width:100%;border-radius:var(--r-lg);margin:14px 0}
.page-content .guide-summary{margin:0 0 22px;padding:18px 20px;border:1px solid #d9eeec;border-left:4px solid var(--teal);border-radius:12px;background:#f1fbfa;color:#314854}
.page-content .guide-summary strong{display:block;margin-bottom:5px;color:var(--ink);font-size:calc(16px + var(--font-bump, 0px))}
.page-content .guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.page-content .guide-card{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.page-content .guide-card b{display:block;margin-bottom:6px;color:var(--ink)}
.page-content .guide-card p{margin:0;font-size:calc(14px + var(--font-bump, 0px));line-height:1.6}
.page-content .guide-steps{counter-reset:guide-step;list-style:none;margin:18px 0 24px}
.page-content .guide-steps li{position:relative;min-height:36px;margin:0 0 12px;padding:5px 0 5px 46px}
.page-content .guide-steps li::before{counter-increment:guide-step;content:counter(guide-step);position:absolute;left:0;top:0;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--orange-soft);color:var(--orange-dark);font-size:calc(12px + var(--font-bump, 0px));font-weight:700}
.page-content .guide-note{margin:20px 0;padding:14px 16px;border-radius:10px;background:#fff7ed;color:#71401d}
.page-content .guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.page-content .guide-actions a{display:inline-flex;align-items:center;padding:10px 15px;border-radius:999px;background:var(--ink);color:#fff;font-size:calc(13px + var(--font-bump, 0px));font-weight:600}
.page-content .guide-actions a+ a{background:var(--teal-dark)}
@media(max-width:640px){.page-content .guide-grid{grid-template-columns:1fr}}

.wishlist-toast{display:none}

/* ============================================================
   Cập nhật: ảnh vuông bo góc (trang sản phẩm), sidebar bài viết
   ============================================================ */

/* Ảnh chính sản phẩm: khung vuông 1:1, hiện đủ ảnh gốc (không cắt) */
.pdp-big{aspect-ratio:1/1;border-radius:var(--r-sm);background:#fff}
.pdp-big img{object-fit:contain}

/* Ảnh nhỏ (thumbnail) lướt ngang: cũng vuông, bo góc nhẹ 6px */
.pdp-th .t{width:74px;height:74px;border-radius:var(--r-sm);overflow:hidden}
.pdp-th .t picture,.pdp-th .t img{width:100%;height:100%;object-fit:cover;display:block}

/* Hiệu ứng chuyển ảnh khi bấm/lướt qua ảnh nhỏ */
.pdp-big-img{opacity:1;transform:translateX(0);transition:opacity .19s var(--ease),transform .19s var(--ease);will-change:opacity,transform}
.pdp-big-img.slide-out-left{opacity:0;transform:translateX(-28px)}
.pdp-big-img.slide-out-right{opacity:0;transform:translateX(28px)}
.pdp-big-img.slide-in-left{opacity:0;transform:translateX(-28px);transition:none}
.pdp-big-img.slide-in-right{opacity:0;transform:translateX(28px);transition:none}

/* Ảnh trong nội dung (mô tả sản phẩm / bài viết): thụt nhẹ so với lề chữ, không méo */
.page-content img{
  display:block;max-width:92%;height:auto;margin:18px auto;
  border-radius:var(--r-lg);box-shadow:var(--sh-2);
}
.page-content .content-responsive-picture{display:contents}

/* ---------- Bài viết đơn: 2 cột, sidebar phải ---------- */
.article-wrap{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:start;padding:8px 0 60px}
.blog-sidebar{display:flex;flex-direction:column;gap:16px}
.bs-card{background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh-1);padding:18px}
.bs-card h4{font-size:calc(13.5px + var(--font-bump, 0px));font-weight:700;color:var(--ink);margin-bottom:12px}
.bs-post{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.bs-post:last-child{border-bottom:0}
.bs-post-thumb{width:56px;height:56px;flex-shrink:0;border-radius:10px;overflow:hidden}
.bs-post-thumb picture,.bs-post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bs-post-title{font-size:calc(12.5px + var(--font-bump, 0px));font-weight:600;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bs-post-date{font-size:calc(11px + var(--font-bump, 0px));color:var(--mute);margin-top:2px}
.bs-link{display:block;padding:8px 10px;border-radius:8px;font-size:calc(13px + var(--font-bump, 0px));color:var(--body);transition:all .2s}
.bs-link:hover{background:var(--bg);color:var(--teal-dark)}

@media(max-width:1024px){
  .article-wrap{grid-template-columns:1fr}
  .blog-sidebar{position:static;flex-direction:row;flex-wrap:wrap}
  .bs-card{flex:1;min-width:260px}
}
@media(max-width:768px){
  .blog-sidebar{flex-direction:column}
  .page-content img{max-width:100%}
}

/* Ảnh có chú thích ([caption] cũ) và video nhúng trong nội dung */
.page-content figure.wp-caption{margin:18px auto;max-width:92%;text-align:center}
.page-content figure.wp-caption img{display:block;max-width:100%;margin:0 auto}
.page-content figure.wp-caption figcaption{font-size:calc(12.5px + var(--font-bump, 0px));color:var(--mute);margin-top:8px}
.page-content .embed-video{position:relative;width:100%;aspect-ratio:16/9;margin:20px 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2)}
.page-content .embed-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Bộ lọc danh mục dùng <a> thay vì <button> (server-rendered) */
.segs a{padding:7px 14px;border-radius:var(--r-pill);font-size:calc(12.5px + var(--font-bump, 0px));font-weight:500;color:var(--body);text-decoration:none;transition:all .35s var(--ease)}
.segs a.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-1)}
.fopt{text-decoration:none}
.ptag{text-decoration:none;display:block}

/* ============================================================
   Cập nhật: ảnh sản phẩm nhỏ gọn hơn + nút phóng to + lightbox,
   chọn phân loại 1 hàng gọn, sidebar sản phẩm liên quan/blog
   ============================================================ */
.pdp{grid-template-columns:440px 1fr}
@media(max-width:1024px){.pdp{grid-template-columns:1fr}}

.pdp-big{position:relative}
.pdp-big-img{width:100%;height:100%}
.zoom-btn{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(18,35,46,.14);cursor:pointer;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-2);
  opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease), transform .3s var(--ease), background .2s;
}
.pdp-big:hover .zoom-btn,.pdp-big:focus-within .zoom-btn{opacity:1;transform:none}
.zoom-btn:hover{border-color:var(--teal);background:#fff;color:var(--teal)}
.zoom-btn svg{width:18px;height:18px}

.lightbox{
  position:fixed;inset:0;z-index:400;display:none;
  background:rgba(12,20,26,.92);align-items:center;justify-content:center;padding:40px;
}
.lightbox.show{display:flex}
.lightbox img{max-width:min(92vw,900px);max-height:88vh;object-fit:contain;border-radius:var(--r-lg)}
.lightbox-content{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:94vw;max-height:94vh
}
.lightbox-image-stage{position:relative;display:block;max-width:94vw;max-height:calc(94vh - 56px);line-height:0}
.lightbox-content img{max-height:calc(94vh - 54px)}
.lightbox-nav{
  position:absolute;top:50%;z-index:2;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.68);
  background:rgba(15,23,42,.17);color:#fff;display:grid;place-items:center;cursor:pointer;
  transform:translateY(-50%);transition:border-color .2s var(--ease),background .2s var(--ease)
}
.lightbox-nav.prev{left:12px}
.lightbox-nav.next{right:12px}
.lightbox-nav svg{width:20px;height:20px}
.lightbox-nav:hover{border-color:var(--teal);background:rgba(15,23,42,.17)}
.lightbox-nav:focus-visible{outline:3px solid rgba(0,184,169,.4);outline-offset:2px}
.lightbox-nav[hidden]{display:none}
.lightbox-download{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 44px;padding:0;border-radius:50%;
  color:#fff;background:rgba(15,23,42,.92);border:1px solid rgba(255,255,255,.25);
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.lightbox-download:hover{background:#0f172a;color:#fff}
.lightbox-download svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lightbox-x{
  position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;transition:background .2s;
}
.lightbox-x:hover{background:rgba(255,255,255,.22)}
@media(max-width:640px){
  .lightbox{padding:14px}
  .lightbox-nav{width:38px;height:38px}
  .lightbox-nav.prev{left:8px}
  .lightbox-nav.next{right:8px}
  .lightbox-nav svg{width:18px;height:18px}
}

/* Sidebar cạnh mô tả sản phẩm (dùng lại style sidebar bài viết) */
.pdp-desc h3{font-size:calc(15.5px + var(--font-bump, 0px));margin-bottom:9px}

/* ============================================================
   Cập nhật: layout 3 cột trang sản phẩm, ô "Ưu đãi thêm",
   phân loại 1 hàng duy nhất
   ============================================================ */
.pdp.pdp-3col{grid-template-columns:430px minmax(0,1fr) 240px;align-items:start;gap:8px}
/* Tablet/iPad: ảnh chiếm cột trái (2 hàng), thông tin + ưu đãi xếp bên phải,
   để ưu đãi nằm ngay dưới nút mua chứ không rớt xuống dưới ảnh */
@media(max-width:1200px) and (min-width:901px){
  .pdp.pdp-3col{
    grid-template-columns:400px 1fr;
    grid-template-areas:"media info" "media offers";
  }
  .pdp.pdp-3col .pdp-media{grid-area:media}
  .pdp.pdp-3col .pdp-info{grid-area:info}
  .pdp.pdp-3col .pdp-offers{grid-area:offers;margin-top:6px}
}
@media(max-width:900px){
  .pdp.pdp-3col{grid-template-columns:1fr}
}

.pdp-sku{font-size:calc(12.5px + var(--font-bump, 0px));color:var(--mute);margin:6px 0 0}
.pdp-sku b{color:var(--body);font-weight:600}

.pdp-offers{
  background:#fff;border-radius:var(--r-sm);padding:20px;
  border:1px solid var(--line);align-self:start;
}
.pdp-offers h4{display:flex;align-items:center;gap:10px;font-size:calc(13.5px + var(--font-bump, 0px));color:var(--ink);margin-bottom:14px}
.pdp-offers h4 svg{width:17px;height:17px;flex-shrink:0}
.pdp-offers ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.pdp-offers li{display:flex;gap:9px;font-size:calc(13px + var(--font-bump, 0px));line-height:1.5;color:var(--ink)}

/* Phân loại: mỗi ô 2 dòng (tên + giá), chọn ô nào viền đỏ + tick xanh góc trên */
.variant-label{font-size:calc(13px + var(--font-bump, 0px));font-weight:600;color:var(--ink);margin:16px 0 8px}
.variant-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.variant-pill{
  position:relative;flex:0 1 auto;min-width:120px;padding:11px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--card);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.3;text-align:center;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);font-family:inherit;
}
.variant-pill .vp-name{font-size:calc(13px + var(--font-bump, 0px));font-weight:600;color:var(--ink);white-space:nowrap}
.variant-pill .vp-price{font-size:calc(14px + var(--font-bump, 0px));font-weight:800;color:#e5484d}
.variant-pill .vp-check{
  position:absolute;top:-1px;right:-1px;width:22px;height:22px;border-radius:0 8px 0 10px;
  background:var(--teal);color:#fff;display:none;place-items:center;
}
.variant-pill .vp-check svg{width:13px;height:13px}
.variant-pill:hover{border-color:#f5a3a3}
.variant-pill.on{box-shadow:0 0 0 1px #e5484d}
.variant-pill.on .vp-check{display:grid}

/* Bảng thông số kỹ thuật (sidebar sản phẩm) */
.specs-table{width:100%;table-layout:fixed;border-collapse:collapse;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.35;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.specs-table tr:nth-child(even){background:var(--bg)}
.specs-table th{text-align:left;font-weight:400;color:var(--mute);padding:6px 8px;width:44%;vertical-align:top;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs-table td{text-align:left;font-weight:400;color:var(--ink);padding:6px 8px;vertical-align:top;border-bottom:1px solid var(--line)}
.specs-table tr:last-child th,.specs-table tr:last-child td{border-bottom:0}
.specs-empty{font-size:calc(12.5px + var(--font-bump, 0px));color:var(--mute);line-height:1.6}

/* ============================================================
   Trang danh mục: thanh breadcrumb + công cụ xem/sắp xếp,
   3 kiểu hiển thị (4 cột / 3 cột / danh sách)
   ============================================================ */
.crumb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0 6px}
.crumb-bar .crumb{padding:0}
.shop-archive-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 0}
.shop-archive-head .section-title{min-width:0;margin:0}
.shop-archive-head .shop-tools{flex-shrink:0}
.archive-index-categories{display:none}
@media(max-width:900px){
  .archive-index-categories{display:block;margin-top:7px;padding-bottom:12px}
}
.shop-tools{display:flex;align-items:center;gap:14px}
.view-toggle{display:flex;gap:2px;background:var(--bg);padding:3px;border-radius:var(--r-sm)}
.view-toggle button{
  width:34px;height:32px;border:0;background:transparent;border-radius:8px;cursor:pointer;
  display:grid;place-items:center;color:var(--mute);transition:all .2s var(--ease);
}
.view-toggle button svg{width:17px;height:17px}
.view-toggle button:hover{color:var(--ink)}
.view-toggle button.on{background:#fff;color:var(--teal-dark);box-shadow:var(--sh-1)}
.sort-select{display:inline-flex;align-items:center;gap:7px;font-size:calc(13px + var(--font-bump, 0px));color:var(--mute);white-space:nowrap}
.sort-select select{
  padding:8px 30px 8px 12px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:calc(13px + var(--font-bump, 0px));font-weight:600;color:var(--ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238496a4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.sort-select select:focus{outline:none;border-color:var(--teal)}

/* Lưới sản phẩm trang danh mục theo kiểu xem */
.shop-grid.view-grid-4{grid-template-columns:repeat(4,1fr)}
.shop-grid.view-grid-3{grid-template-columns:repeat(3,1fr)}
.shop-grid.view-list{grid-template-columns:1fr;gap:12px}

/* Kiểu danh sách: card nằm ngang (ảnh trái, nội dung phải) */
.shop-grid.view-list .pcard{display:grid;grid-template-columns:180px minmax(0,1fr);gap:20px;align-items:center;min-height:210px;padding:14px}
.shop-grid.view-list .pthumb{width:100%;aspect-ratio:1/1;margin:0}
.shop-grid.view-list .pbody{display:grid;align-content:center;grid-template-rows:auto auto auto;gap:11px;min-width:0;height:100%;padding:4px 48px 4px 0}
.shop-grid.view-list .pname{height:auto;min-height:0;max-height:48px;margin:0;color:#17212b;font-size:calc(17px + var(--font-bump, 0px));font-weight:650;line-height:1.38;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis}
.shop-grid.view-list .prate{min-height:22px;margin:0;font-size:calc(12px + var(--font-bump, 0px))}
.shop-grid.view-list .prating-score{gap:5px}
.shop-grid.view-list .prating-score svg{width:14px;height:14px}
.shop-grid.view-list .prating-value{font-size:calc(12.5px + var(--font-bump, 0px))}
.shop-grid.view-list .pstock{font-size:calc(11px + var(--font-bump, 0px))}
.shop-grid.view-list .pprice{align-items:baseline;gap:10px;margin:3px 0 0;padding:0}
.shop-grid.view-list .pprice .n{font-size:calc(21px + var(--font-bump, 0px));font-weight:750}
.shop-grid.view-list .pprice .o{font-size:calc(13px + var(--font-bump, 0px))}
.shop-grid.view-list .pfav{top:14px;right:14px}
.shop-grid.view-list .pbadge{top:14px;left:14px}

/* Sidebar thông số + bài viết mới bám theo khi cuộn mô tả sản phẩm. */
@media(min-width:1025px){
  .pdp-detail-sidebar{position:sticky;top:112px;align-self:start}
}

@media(max-width:900px){
  .shop-grid.view-grid-4,.shop-grid.view-grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .shop-tools{gap:8px}
  .view-toggle{display:none}
  .sort-select span{display:none}
  .shop-archive-head{gap:8px;padding-top:8px}
  .shop-archive-head .section-title{overflow:hidden;font-size:calc(19px + var(--font-bump, 0px));line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
  .shop-archive-head .sort-select select{width:116px;max-width:35vw;padding:7px 24px 7px 9px;font-size:calc(11.5px + var(--font-bump, 0px));background-position:right 7px center}
  .archive-index-categories{display:block;margin-top:7px;padding-bottom:12px}
  .shop .filt{display:block;margin:0 0 14px;padding:12px 14px;border:1px solid #e5eaed;border-radius:12px;background:#fff}
  .shop .filt .filt-top{display:flex;padding:0 0 10px;margin:0 0 12px}
  .shop .filt .filt-top h4{font-size:calc(13.5px + var(--font-bump, 0px))}
  .shop .filt .fgroup-cats{display:none}
  .shop .filt .fgroup-sale{display:block;padding:0 0 12px;margin:0 0 12px}
  .shop .filt .fgroup-price{display:block;padding:0 0 12px;margin:0 0 12px}
  .shop .filt .fgroup-rating{display:block;padding:0;margin:0;border:0}
  .shop .filt .fg-head{margin-bottom:8px;font-size:calc(10.5px + var(--font-bump, 0px))}
  .shop .price-range-values span{padding:7px 9px}
  .shop .price-range-control{margin-top:0}
  .shop .price-range-submit{min-height:34px}
  .shop .rating-filter-link{padding:8px 9px}
  .shop-is-all{padding-top:14px}
  .shop-grid.view-list .pcard{grid-template-columns:112px minmax(0,1fr);gap:10px;min-height:132px;padding:9px}
  .shop-grid.view-list .pthumb{width:100%}
  .shop-grid.view-list .pbody{gap:6px;padding:2px 30px 2px 0}
  .shop-grid.view-list .pname{max-height:36px;font-size:calc(13px + var(--font-bump, 0px));line-height:1.35}
  .shop-grid.view-list .prate{min-height:18px}
  .shop-grid.view-list .pprice{gap:6px;margin-top:1px}
  .shop-grid.view-list .pprice .n{font-size:calc(16px + var(--font-bump, 0px))}
  .shop-grid.view-list .pprice .o{font-size:calc(10.5px + var(--font-bump, 0px))}
  .shop-grid.view-list .pfav{top:9px;right:9px}
  .shop-grid.view-list .pbadge{top:9px;left:9px}
}

/* ============================================================
   Tinh chỉnh trang sản phẩm đơn: giá đỏ nhỏ hơn, tên nhỏ hơn,
   ô phân loại thấp hơn, chọn số lượng gọn + nút cùng 1 hàng
   ============================================================ */
.pdp-info h1{font-size:calc(24px + var(--font-bump, 0px));line-height:1.28;margin:6px 0 6px}
.pdp-pr{padding:12px 0}
.pdp-pr .n{font-size:calc(23px + var(--font-bump, 0px));font-weight:800;color:#e5484d}
.pdp-pr .o{font-size:calc(13.5px + var(--font-bump, 0px))}

/* Ô phân loại thấp lại một chút */
.variant-label{margin:12px 0 7px}
.variant-pill{padding:7px 14px}
.variant-pill .vp-name{font-size:calc(12.5px + var(--font-bump, 0px))}
.variant-pill .vp-price{font-size:calc(13px + var(--font-bump, 0px))}

/* Hàng mua: qty gọn + "Thêm vào giỏ" co giãn + ZALO — tất cả 1 hàng */
.pdp-buy{display:flex;gap:10px;align-items:stretch;flex-wrap:nowrap;margin:6px 0 22px}
.pdp-buy .qty{flex-shrink:0;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;box-shadow:none;padding:0}
.pdp-buy .qty button{width:32px;height:40px;font-size:calc(17px + var(--font-bump, 0px));color:var(--ink);border-radius:0}
.pdp-buy .qty span{width:32px;font-size:calc(13px + var(--font-bump, 0px));border-left:1px solid var(--line);border-right:1px solid var(--line);height:40px;display:grid;place-items:center}
.pdp-buy .btn{min-height:40px;padding:10px 14px;font-size:calc(13px + var(--font-bump, 0px));border-radius:var(--r-sm)}
.pdp-buy [data-add-cart]{flex:0 1 158px;min-width:132px;white-space:nowrap;background:#f29721;color:#fff;border:0;box-shadow:var(--sh-orange)}
.pdp-buy [data-add-cart]:hover{background:#dc7c0f;color:#fff;border:0;transform:translateY(-1px);box-shadow:0 8px 24px rgba(242,151,33,.34)}
/* Nút Zalo tư vấn: một kiểu dùng chung cho desktop và mobile */
.btn-zalo{
  flex-shrink:0;
  gap:7px;
  background:#0086fd14;
  color:#008fff;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  box-shadow:none;
  font-weight:600;
}
.btn-zalo .zalo-logo{width:30px;height:30px}
.btn-zalo span{white-space:nowrap}
.btn-zalo:hover{
  background:#0086fd22;
  color:#0078df;
  border-color:transparent;
  transform:translateY(-1px);
  box-shadow:none;
}

/* ---------- Nâng cấp giao diện trang sản phẩm đơn ---------- */
.pdp-top-surface{--font-bump:1px;background:#fff}
.pdp.pdp-3col{gap:8px;padding-top:14px}
.pdp.pdp-3col .pdp-media,
.pdp.pdp-3col .pdp-info{
  min-width:0;padding:16px;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.pdp.pdp-3col .pdp-info{padding:22px}
.pdp.pdp-3col .pdp-big{margin-bottom:0;border:1px solid #f0f1f3;border-radius:12px;background:#fafafa;box-shadow:none}
.pdp-info .pc{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#edf9f8;color:var(--teal-dark);font-size:calc(11px + var(--font-bump, 0px));font-weight:600}
.pdp-info h1{margin:10px 0 9px;font-size:calc(25px + var(--font-bump, 0px));line-height:1.27}
.pdp-title-line{margin:0 0 9px;line-height:1.27}
.pdp-info .pdp-title-line h1{display:inline;margin:0}
.pdp-info .pdp-title-line .pc{margin-left:7px;vertical-align:.22em}
.pdp-short-description{margin:0 0 7px;color:#6f7c87;font-size:calc(13px + var(--font-bump, 0px));line-height:1.5}
.pdp-rating{display:inline-flex;align-items:center;gap:5px;color:#53616d;text-decoration:none;white-space:nowrap}
.pdp-rating svg{width:13px;height:13px;color:#f59e0b;fill:#fbbf24;stroke-width:1.5}
.pdp-rating span{font-weight:650;color:#4c5964}
.pdp-rating .pdp-rating-score{color:#263640;font-weight:750}
.pdp-rating .pdp-rating-count{color:#667783;font-weight:550}
.pdp-rating:hover .pdp-rating-count{color:var(--teal-dark)}
.pdp-rating.is-empty svg{fill:none;color:#9ca7af}
.pdp-rating.is-empty .pdp-rating-score,.pdp-rating.is-empty .pdp-rating-count{color:#7f8b94}
.pdp-rating .rating-stars{flex-shrink:0}
.pdp-meta-separator{width:1px;height:12px;background:#dfe4e8}
.pdp-availability{display:inline-flex;align-items:center;gap:5px;font-weight:650}
.pdp-availability svg{width:14px;height:14px;stroke-width:1.6}
.pdp-availability.is-available{color:#278247}
.pdp-availability.is-unavailable{color:#9b5a5a}
.pdp-sku{margin:0 0 5px;font-size:calc(11px + var(--font-bump, 0px));color:#8a949d}
.pdp-sku b{font-weight:500;color:#56636e}
.pdp-pr + .pdp-sku{margin:-8px 0 10px}
.pdp-info .pdp-pr{display:block;margin:11px 0 14px;padding:7px 0;border:0;border-radius:0;background:transparent}
.pdp-price-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:3px}
.pdp-price-status{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#71808d;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.2;white-space:nowrap;text-align:right}
.pdp-price-label{display:block;color:#8b735f;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:500;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap}
.pdp-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px}
.pdp-info .pdp-pr .n{font-size:calc(25px + var(--font-bump, 0px));font-weight:750;color:var(--price-red)}
.pdp-info .pdp-pr .o{font-size:calc(12.5px + var(--font-bump, 0px));color:#9ca4aa}
.pdp-sale-inline{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px;line-height:1.15}
.pdp-sale-inline .o{display:inline-block}
.pdp-discount{
  display:inline-flex;align-items:center;
  padding:3px 7px;border-radius:999px;
  background:#fff0e6;color:#c9550c;
  font-size:calc(10px + var(--font-bump, 0px));font-weight:650;line-height:1.2;white-space:nowrap;
}
.pdp-info .variant-label{margin-top:14px}
.pdp-info .pdp-buy{margin:14px 0}
.pdp-assurances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:7px;border:0;border-radius:12px;background:#f5f7f8}
.pdp-assurances>span{display:flex;align-items:center;gap:7px;min-width:0;padding:3px 8px;color:#64727e;line-height:1.3}
.pdp-assurances>span+span{border-left:1px solid #e1e6e9}
.pdp-assurance-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:8px;background:#fff0e6;color:#ed6b16}
.pdp-assurance-icon svg{width:15px;height:15px;stroke-width:1.5}
.pdp-assurance-copy{display:flex;min-width:0;flex-direction:column;gap:1px}
.pdp-assurance-copy b{color:#4e5b65;font-size:calc(10.5px + var(--font-bump, 0px));font-weight:650;white-space:nowrap}
.pdp-assurance-copy small{color:#919ba3;font-size:calc(8.5px + var(--font-bump, 0px));font-weight:400;white-space:nowrap}
.pdp-offers{padding:15px;border:0;border-radius:0;background:transparent;box-shadow:none}
@media(min-width:1201px){
  .pdp.pdp-3col .pdp-media{padding-left:0;padding-right:0}
  .pdp.pdp-3col .pdp-info{padding-left:10px}
  .pdp.pdp-3col .pdp-offers{align-self:stretch;border-left:1px solid #eef1f3;padding-left:16px;padding-right:0}
}
.pdp-offers h4{padding-bottom:12px;border-bottom:1px solid #edf0f2;margin-bottom:12px}
.pdp-offers-title-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#fff1e8;color:#e86512}
.pdp-offers-heading{display:flex;min-width:0;flex-direction:column;gap:2px;line-height:1.25}
.pdp-offers-heading strong{color:#26343f;font-size:calc(13px + var(--font-bump, 0px));font-weight:650}
.pdp-offers-heading small{color:#89949d;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:400}
.pdp-offers ul{gap:6px}
.pdp-offers li{align-items:flex-start;gap:9px;padding:4px 0;color:#55636e;font-size:calc(11.5px + var(--font-bump, 0px));line-height:1.45}
.pdp-offer-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;margin-top:1px;border-radius:8px;background:#f3f6f7;color:#e86512}
.pdp-offer-icon svg{width:14px;height:14px;stroke-width:1.5}
.product-detail-content{--font-bump:1px}
.pdp-detail-wrap{margin-top:14px;padding-top:6px;padding-bottom:12px;gap:28px}
.pdp-detail-wrap>.pdp-desc,
.pdp-detail-wrap>div>.pdp-desc,
.pdp-detail-wrap .pdp-detail-sidebar>.bs-card{border:0;box-shadow:0 5px 18px rgba(18,35,46,.035)}
.pdp-detail-wrap .pdp-desc>.section-title{margin-bottom:18px}
.pdp-detail-wrap .pdp-desc .page-content{--font-bump:0px}
.product-discovery-section{padding-top:4px}

/* ---------- Đánh giá sản phẩm đã xác minh ---------- */
.product-reviews-section{
  scroll-margin-top:112px;margin:18px 0 26px;padding:22px;border:0;border-radius:18px;background:#fff;
  box-shadow:0 7px 24px rgba(18,35,46,.055)
}
.product-reviews-disclosure>summary{list-style:none}
.product-reviews-disclosure>summary::-webkit-details-marker{display:none}
.product-reviews-summary{display:block;cursor:pointer;outline:0}
.product-reviews-summary:focus-visible{border-radius:12px;box-shadow:0 0 0 3px rgba(0,184,169,.14)}
.product-reviews-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:17px;border-bottom:1px solid #edf0f2}
.product-reviews-head .section-title{margin:0}
.product-reviews-head p{margin:6px 0 0;color:#7b8892;font-size:calc(12.5px + var(--font-bump, 0px))}
.review-summary-side{display:flex;align-items:center;gap:15px}
.review-head-score{display:flex;align-items:baseline;gap:5px;color:#78858f;white-space:nowrap}
.review-head-score strong{color:#ef7c18;font-size:calc(25px + var(--font-bump, 0px));line-height:1}
.review-head-score span{font-size:calc(12px + var(--font-bump, 0px))}
.review-toggle-button,.review-first-summary{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;font-size:calc(12px + var(--font-bump, 0px));font-weight:700;white-space:nowrap}
.review-toggle-button{min-height:36px;padding:0 14px;background:#eef9f8;color:var(--teal-dark)}
.review-toggle-button svg,.review-first-summary svg:last-child{width:15px;height:15px;transition:transform .2s var(--ease)}
.review-toggle-open{display:none}
.product-reviews-disclosure[open] .review-toggle-closed{display:none}
.product-reviews-disclosure[open] .review-toggle-open{display:inline}
.product-reviews-disclosure[open] .review-toggle-button svg,.product-reviews-disclosure[open] .review-first-summary svg:last-child{transform:rotate(180deg)}
.product-reviews-section.is-empty{padding:0;background:transparent;box-shadow:none}
.review-first-summary{width:max-content;min-height:38px;padding:0 15px;background:#fff;border:1px solid #e6eaed;color:#354550;cursor:pointer;box-shadow:0 4px 14px rgba(18,35,46,.045)}
.review-first-summary:hover{border-color:#b9ded9;color:var(--teal-dark)}
.review-first-summary svg:first-child{width:16px;height:16px;color:#f59e0b;fill:#fbbf24}
.product-reviews-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr);gap:24px;padding-top:20px}
.product-reviews-grid.is-form-only{grid-template-columns:minmax(0,520px);justify-content:start}
.review-public{min-width:0}
.review-overview{display:flex;align-items:center;gap:15px;padding:15px 17px;border-radius:14px;background:linear-gradient(135deg,#fff8f1,#fff)}
.review-overview>strong{color:#ee7818;font-size:calc(38px + var(--font-bump, 0px));line-height:1}
.review-overview>div{display:flex;flex-direction:column;gap:4px}
.review-overview>div>span{color:#7b8892;font-size:calc(11.5px + var(--font-bump, 0px))}
.review-stars{display:inline-flex;align-items:center;gap:3px;color:#d8dde1}
.review-stars span{display:inline-flex}
.review-stars svg{width:18px;height:18px;fill:transparent;stroke:currentColor}
.review-stars .filled{color:#f5a20b}
.review-stars .filled svg{fill:#fbbf24}
.review-stars.small{gap:2px}
.review-stars.small svg{width:13px;height:13px}
.review-list{display:flex;flex-direction:column;margin-top:6px}
.review-item{padding:17px 2px;border-bottom:1px solid #edf0f2}
.review-item:last-child{border-bottom:0}
.review-item-head{display:flex;align-items:flex-start;gap:10px}
.review-avatar{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:50%;background:#edf9f8;color:var(--teal-dark);font-size:calc(14px + var(--font-bump, 0px));font-weight:750}
.review-author-line{display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-height:18px}
.review-author-line>strong{color:#26343f;font-size:calc(13px + var(--font-bump, 0px))}
.review-verified{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:999px;background:#eaf8f2;color:#21835c;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:650}
.review-verified svg{width:12px;height:12px}
.review-item-meta{display:flex;align-items:center;gap:8px;margin-top:3px}
.review-item-meta time{padding-left:8px;border-left:1px solid #dfe4e8;color:#98a1a8;font-size:calc(10.5px + var(--font-bump, 0px))}
.review-item>p{margin:10px 0 0 46px;color:#4f5e69;font-size:calc(13px + var(--font-bump, 0px));line-height:1.65}
.review-reply{margin:12px 0 0 46px;padding:11px 13px;border-left:3px solid #ff8a33;border-radius:0 10px 10px 0;background:#fff8f2}
.review-reply strong{color:#c75b0c;font-size:calc(11px + var(--font-bump, 0px))}
.review-reply p{margin:4px 0 0;color:#65727d;font-size:calc(12px + var(--font-bump, 0px));line-height:1.55}
.review-empty{display:flex;align-items:center;gap:13px;min-height:130px;padding:22px;border-radius:14px;background:#f7f9fa;color:#65727d}
.review-empty-stars{display:flex;align-items:center;justify-content:center;flex:0 0 104px;width:104px;height:46px;border-radius:14px;background:#fff}
.review-empty strong{display:block;color:#34434e;font-size:calc(14px + var(--font-bump, 0px))}
.review-empty p{margin:4px 0 0;font-size:calc(12px + var(--font-bump, 0px));line-height:1.55}
.review-form{align-self:start;padding:18px;border:1px solid #e8ecef;border-radius:15px;background:#fbfcfc}
.review-form-title{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.review-form-title>span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#fff0e5;color:#ed771d}
.review-form-title>span svg{width:17px;height:17px;fill:#fbbf24}
.review-form-title>div{display:flex;flex-direction:column;gap:1px}
.review-form-title strong{color:#2e3c47;font-size:calc(14px + var(--font-bump, 0px))}
.review-form-title small{color:#89949c;font-size:calc(10.5px + var(--font-bump, 0px))}
.review-form>label,.review-form-row>label{display:flex;min-width:0;flex-direction:column;gap:5px;margin-bottom:11px;color:#46545f;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:650}
.review-field-label{display:inline;color:#46545f;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:650}
.review-field-label i,.review-rating-field legend>span{color:#e5484d;font-style:normal}
.review-form input[type=text],.review-form input[type=tel],.review-form textarea{
  width:100%;padding:10px 11px;border:1px solid #dfe5e8;border-radius:10px;background:#fff;color:#26343f;font:inherit;font-size:calc(12.5px + var(--font-bump, 0px));outline:0;transition:border-color .2s,box-shadow .2s
}
.review-form textarea{min-height:104px;resize:vertical;line-height:1.55}
.review-form input:focus,.review-form textarea:focus{border-color:#55bdb4;box-shadow:0 0 0 3px rgba(0,184,169,.1)}
.review-form label>small{color:#8b969e;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:400;line-height:1.45}
.review-form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.review-rating-field{margin:0 0 12px;padding:0;border:0}
.review-rating-field legend{margin-bottom:5px;color:#46545f;font-size:calc(11.5px + var(--font-bump, 0px));font-weight:650}
.review-rating-input{display:flex;width:max-content;direction:rtl}
.review-rating-input input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.review-rating-input label{display:grid;place-items:center;width:28px;height:28px;cursor:pointer;color:#cbd2d7;transition:color .18s,transform .18s}
.review-rating-input label svg{width:21px;height:21px;fill:transparent;transition:fill .18s}
.review-rating-input label>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.review-rating-input label:hover,.review-rating-input label:hover~label,
.review-rating-input input:checked~label{color:#f59e0b}
.review-rating-input label:hover svg,.review-rating-input label:hover~label svg,
.review-rating-input input:checked~label svg{fill:#fbbf24}
.review-rating-input label:hover{transform:translateY(-1px)}
.review-rating-input input:focus-visible+label{border-radius:6px;outline:2px solid var(--teal);outline-offset:1px}
.review-flash{margin-bottom:12px;padding:9px 11px;border-radius:9px;font-size:calc(11px + var(--font-bump, 0px));line-height:1.45}
.review-flash.ok{background:#eaf8f2;color:#247b59}
.review-flash.error{background:#fff0ef;color:#b84d4d}
.review-honeypot,.form-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.review-submit{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;margin-top:3px;border-radius:10px!important;background:linear-gradient(135deg,var(--teal),var(--teal-dark))!important}
.review-submit svg{width:15px;height:15px}
.review-moderation-note{display:flex;align-items:flex-start;gap:5px;margin:10px 0 0;color:#8b969e;font-size:calc(9.5px + var(--font-bump, 0px));line-height:1.45}
.review-moderation-note svg{flex:0 0 13px;width:13px;height:13px;margin-top:1px}
@media(prefers-reduced-motion:reduce){
  .pdp-big-img{transition:none}
}

@media(max-width:1200px) and (min-width:901px){
  .pdp.pdp-3col{gap:20px}
}
@media(max-width:900px){
  .pdp.pdp-3col .pdp-media{position:static}
  .product-reviews-grid{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .container{padding-left:8px;padding-right:8px}
  .pdp.pdp-3col .pdp-media{padding:8px 0}
  .pdp.pdp-3col .pdp-info{padding:12px 6px}
  .pdp.pdp-3col .pdp-offers{padding:12px 6px}
  .pdp-detail-wrap .bs-card{padding:14px 10px}
}
@media(max-width:520px){
  .container{padding-left:8px;padding-right:8px}
  .pdp.pdp-3col .pdp-media{padding:8px 0}
  .pdp.pdp-3col .pdp-info{padding:12px 6px}
  .pdp.pdp-3col .pdp-offers{padding:12px 6px}
  .pdp-detail-wrap .bs-card{padding:14px 10px}
  .pdp-info h1{font-size:calc(22px + var(--font-bump, 0px))}
  .pdp-assurances{grid-template-columns:1fr;gap:0;padding:6px}
  .pdp-assurances>span{padding:6px 4px;border-left:0;border-bottom:1px solid #e5e9eb}
  .pdp-assurances>span:last-child{border-bottom:0}
  .product-reviews-section{margin:12px 0 20px;padding:14px 10px;border-radius:14px}
  .product-reviews-head{align-items:center;padding-bottom:13px}
  .product-reviews-head p{display:none}
  .review-summary-side{margin-left:auto;gap:8px}
  .review-head-score{display:none}
  .review-toggle-button{min-height:34px;padding:0 11px;font-size:calc(11px + var(--font-bump, 0px))}
  .review-first-summary{min-height:36px;padding:0 13px;font-size:calc(11.5px + var(--font-bump, 0px))}
  .product-reviews-grid{gap:16px;padding-top:14px}
  .review-overview{padding:13px}
  .review-overview>strong{font-size:calc(32px + var(--font-bump, 0px))}
  .review-item{padding:14px 2px}
  .review-item>p,.review-reply{margin-left:0}
  .review-form{padding:14px 11px}
  .review-form-row{grid-template-columns:1fr;gap:0}
}

@media(max-width:520px){
  .pdp-buy{gap:6px;flex-wrap:nowrap}
  .pdp-buy .qty button,.pdp-buy .qty span{width:28px}
  .pdp-buy [data-add-cart]{flex:1 1 auto;min-width:0;padding-left:8px;padding-right:8px}
  .btn-zalo{flex:0 1 auto;min-width:0;padding-left:8px;padding-right:8px}
}

/* Chống tràn ngang trên mobile: cho phép cột grid co lại + nội dung WordPress
   (div/bảng rộng cố định) không vượt quá khung, chữ dài tự xuống dòng */
.article-wrap{min-width:0}
.article-wrap > div, .article-wrap > aside{min-width:0}
.page-content{overflow-wrap:break-word}
.page-content *{max-width:100%}
.page-content table{display:block;overflow-x:auto}
.page-content img{height:auto}

/* Chống tràn: cho các cột của layout sản phẩm co lại dưới min-content */
.pdp-media, .pdp-info, .pdp-offers{min-width:0}

/* ---- Album ảnh nhỏ: hiện tối đa 5 tấm, mũi tên chuyển, tự cuộn theo ảnh
   đang xem; ảnh đang xem rõ 100%, ảnh khác mờ 50% ---- */
.pdp-th-wrap{display:flex;align-items:center;gap:6px;margin-top:12px;min-width:0}
.pdp-th{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-behavior:smooth;flex:1;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.pdp-th::-webkit-scrollbar{display:none}
.pdp-th .t{
  flex:0 0 calc((100% - 32px) / 5);width:auto;height:auto;aspect-ratio:1/1;
  border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;
  opacity:.5;transition:opacity .2s var(--ease), border-color .2s var(--ease);
}
.pdp-th .t.on{opacity:1;border-color:var(--teal)}
.pdp-th .t:hover{opacity:1;transform:none;border-color:#f2a36b;box-shadow:0 4px 12px rgba(18,35,46,.09)}

/* Trang chủ: các nhóm sản phẩm 5x2 và blog ngang 4x2. */
.home-product-section,.home-blog-section{padding-top:0}
.home-product-section{padding-bottom:48px}
.home-section-head{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:16px;margin-bottom:18px;
}
.home-section-head>div{min-width:0}
.section-title{
  display:flex;align-items:center;gap:10px;margin:0;padding:0;
  color:#1f2b34;font-size:calc(22px + var(--font-bump, 0px));font-weight:720;line-height:1.22;
  letter-spacing:-.02em;
}
.section-title::before{
  content:"";display:block;flex:0 0 4px;width:4px;height:26px;
  border-radius:999px;background:linear-gradient(180deg,var(--orange),#f59e0b);
  box-shadow:0 2px 8px rgba(245,127,11,.16);
}
.home-section-head p{margin-top:3px;color:#82909b;font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-section-head .see{align-self:center;padding:6px 10px;font-size:calc(12.5px + var(--font-bump, 0px))}
.home-section-head .featured-categories-count{align-self:center}
.home-product-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.home-product-grid .pcard{padding:13px}
.home-product-grid .pthumb{margin-bottom:12px}
.home-blog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.home-blog-grid .bcard{display:grid;grid-template-columns:104px minmax(0,1fr);min-height:142px;align-items:stretch}
.home-blog-grid .bthumb{width:104px;height:100%;min-height:142px;aspect-ratio:auto}
.home-blog-grid .bthumb picture,.home-blog-grid .bthumb img{width:100%;height:100%;display:block}
.home-blog-grid .bthumb img{object-fit:cover}
.home-blog-grid .bbody{min-width:0;padding:12px 11px}
.home-blog-grid .bmeta{margin-bottom:6px;font-size:calc(9.5px + var(--font-bump, 0px))}
.home-blog-grid .bcard h3{margin-bottom:5px;font-size:calc(13px + var(--font-bump, 0px));line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-blog-grid .bcard p{margin-bottom:6px;font-size:calc(10.5px + var(--font-bump, 0px));line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.home-blog-grid .bread{font-size:calc(10.5px + var(--font-bump, 0px))}
.home-blog-grid .bread svg{width:12px;height:12px}

@media(max-width:1100px){
  .home-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .home-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .home-product-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
}
@media(max-width:640px){
  .home-product-section{padding-bottom:36px}
  .home-section-head{gap:8px;margin-bottom:14px}
  .section-title{gap:8px;font-size:calc(18px + var(--font-bump, 0px));line-height:1.24;letter-spacing:-.015em}
  .section-title::before{flex-basis:3px;width:3px;height:22px}
  .home-section-head p{margin-top:2px;font-size:calc(11.5px + var(--font-bump, 0px))}
  .home-section-head .see{gap:4px;padding:5px 4px;font-size:calc(11.5px + var(--font-bump, 0px));white-space:nowrap}
  .home-section-head .see svg{width:14px;height:14px}
  .home-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-product-grid .pcard{padding:10px}
  .home-blog-grid{grid-template-columns:1fr;gap:10px}
  .home-blog-grid .bcard{grid-template-columns:116px minmax(0,1fr);min-height:126px}
  .home-blog-grid .bthumb{width:116px;min-height:126px}
}
@media(prefers-reduced-motion:reduce){
  .product-discovery-grid .pcard{animation:none}
}
.pdp-th .t picture,.pdp-th .t img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-th-arrow{
  position:absolute;top:50%;z-index:3;
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.68);
  background:rgba(15,23,42,.17);color:#fff;display:grid;place-items:center;cursor:pointer;
  transform:translateY(-50%);
  transition:border-color .2s var(--ease);
}
.pdp-th-arrow.prev{left:12px}
.pdp-th-arrow.next{right:12px}
.pdp-th-arrow svg{width:17px;height:17px}
.pdp-th-arrow.prev.is-intro{animation:pdpArrowNudgeLeft .8s ease-out .35s 1}
.pdp-th-arrow.next.is-intro{animation:pdpArrowNudgeRight .8s ease-out .35s 1}
.pdp-th-arrow:hover{transform:translateY(-50%);border-color:var(--teal);background:rgba(15,23,42,.17);color:#fff}
.pdp-th-arrow:active{transform:translateY(-50%)}
.pdp-th-arrow:focus-visible{outline:3px solid rgba(0,184,169,.25);outline-offset:2px}
.pdp-th-arrow[hidden]{display:none}
@keyframes pdpArrowNudgeLeft{
  0%,100%{transform:translateY(-50%) translateX(0)}
  48%{transform:translateY(-50%) translateX(-6px)}
}
@keyframes pdpArrowNudgeRight{
  0%,100%{transform:translateY(-50%) translateX(0)}
  48%{transform:translateY(-50%) translateX(6px)}
}
@media(prefers-reduced-motion:reduce){
  .pdp-th-arrow.prev.is-intro,
  .pdp-th-arrow.next.is-intro{animation:none}
}

/* Ảnh chính sản phẩm: khung tỷ lệ cố định, ảnh đặt tuyệt đối để không kéo
   giãn khung (sửa lỗi ảnh cao hơn khung 6px bị cắt phần dưới) */
.pdp-big{display:block}
.pdp-big-img{position:absolute;inset:0;width:100%;height:100%}

/* Bài viết blog: bọc trong card nền trắng, viền xám (giống thẻ sidebar) */
.article-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:26px;
}
.article-card .art-head{padding-top:0}
.article-card .art-hero{margin-left:0;margin-right:0}
@media(max-width:768px){
  .article-card{padding:18px}
}

/* Đường kẻ ngang <hr> trong bài viết / bất kỳ đâu: mảnh, nhạt, lề 10px */
hr,
.page-content hr,
.art-body hr{
  border:0;
  height:1px;
  background:var(--line);
  opacity:.6;
  margin:10px;
}

/* Trang danh sách blog: 2 cột — sidebar bên trái, danh sách bài viết bên phải
   (tái dùng style .blog-sidebar giống trang bài viết đơn) */
.blog-list-wrap{display:grid;grid-template-columns:280px 1fr;gap:26px;align-items:start;padding-bottom:40px}
.blog-list-main .bgrid{grid-template-columns:repeat(2,1fr)}
@media(max-width:1024px){
  .blog-list-wrap{grid-template-columns:1fr}
  .blog-list-main{order:-1}
}
@media(max-width:768px){
  .blog-list-main .bgrid{grid-template-columns:1fr}
}

/* ============================================================
   Trang blog: 2 chế độ xem (ngang / lưới), chủ đề, badge, no-image
   ============================================================ */
/* Badge chủ đề trên card */
.bcard .btag{display:inline-flex;align-items:center;gap:4px;background:var(--teal-soft);color:var(--teal-dark);font-weight:600;padding:3px 9px 3px 7px;border-radius:var(--r-pill)}
.bcard .btag svg{width:12px;height:12px}
.bmeta{flex-wrap:wrap}

/* Ảnh bài viết + placeholder no-image (khung 16/10) */
.blog-grid .bthumb{aspect-ratio:16/10;background:#fff}
.blog-grid .bthumb picture,.blog-grid .bthumb img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.bthumb-noimg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:linear-gradient(150deg,#f2f4f7,#e6eaf0);color:var(--mute)}
.bthumb-noimg svg{width:34px;height:34px}
.bthumb-noimg span{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:500}

/* Chế độ LƯỚI: 4 cột */
.blog-grid.view-grid{grid-template-columns:repeat(4,1fr);gap:16px}
.blog-grid.view-grid .bcard h3{font-size:calc(14.5px + var(--font-bump, 0px))}
.blog-grid.view-grid .bbody{padding:14px}
.blog-grid.view-grid .bcard p{font-size:calc(12.5px + var(--font-bump, 0px));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Chế độ NGANG (mặc định): mỗi bài 1 hàng, ảnh trái - nội dung phải */
.blog-grid.view-list{grid-template-columns:1fr;gap:14px}
.blog-grid.view-list .bcard{display:flex;flex-direction:row;align-items:stretch}
.blog-grid.view-list .bthumb{width:240px;flex-shrink:0;aspect-ratio:auto;min-height:160px}
.blog-grid.view-list .bbody{flex:1;display:flex;flex-direction:column;justify-content:center}
.blog-grid.view-list .bcard h3{font-size:calc(17px + var(--font-bump, 0px))}
.blog-grid.view-list .bcard p{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* Link chủ đề ở sidebar */
.topic-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;font-size:calc(13.5px + var(--font-bump, 0px));color:var(--body);transition:background .2s var(--ease),color .2s var(--ease)}
.topic-link:hover{background:var(--bg)}
.topic-link.on{background:var(--teal-soft)}
.topic-link.on .topic-name{color:var(--teal-dark);font-weight:600}
.topic-link.on .topic-ico{background:var(--teal);color:#fff}
.topic-ico{width:30px;height:30px;flex-shrink:0;border-radius:8px;background:var(--bg);display:grid;place-items:center;color:var(--mute)}
.topic-ico svg{width:16px;height:16px}
.topic-name{flex:1}
.topic-num{font-size:calc(11.5px + var(--font-bump, 0px));font-weight:600;color:var(--mute);background:var(--bg);padding:2px 8px;border-radius:var(--r-pill)}
.topic-link.on .topic-num{background:rgba(0,184,169,.18);color:var(--teal-dark)}

@media(max-width:1024px){
  .blog-grid.view-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  /* Trên điện thoại: luôn dạng ngang */
  .blog-grid{grid-template-columns:1fr !important;gap:12px}
  .blog-grid .bcard{display:flex !important;flex-direction:row !important;align-items:stretch}
  .blog-grid .bthumb{width:130px !important;flex-shrink:0;aspect-ratio:1/1 !important;min-height:0 !important}
  .blog-grid .bbody{flex:1;padding:12px}
  .blog-grid .bcard h3{font-size:calc(14px + var(--font-bump, 0px))}
  .blog-grid .bcard p{display:none}
}

/* Badge chủ đề ở trang bài viết đơn */
.art-meta .btag{display:inline-flex;align-items:center;gap:5px;background:var(--teal-soft);color:var(--teal-dark);font-weight:600;padding:4px 11px 4px 8px;border-radius:var(--r-pill);font-size:calc(12px + var(--font-bump, 0px))}
.art-meta .btag svg{width:13px;height:13px}
.art-meta .btag:hover{background:var(--teal);color:#fff}

/* ============================================================
   Card nội dung TikTok / YouTube cạnh slider trang chủ
   ============================================================ */
.social-side{grid-template-rows:repeat(3,minmax(0,1fr))}
.social-media-card{
  position:relative;isolation:isolate;min-height:0;overflow:hidden;border-radius:var(--r-xl);
  box-shadow:var(--sh-2);color:#fff;background:#12232e;
  transition:transform .38s var(--ease),box-shadow .38s var(--ease)
}
.social-media-card:hover{transform:translateY(-3px);box-shadow:var(--sh-4)}
.social-media-card>picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.social-media-card>img,.social-media-card>picture>img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s var(--ease),filter .4s var(--ease)}
.social-media-card>img{position:absolute;inset:0}
.social-media-card:hover>img,.social-media-card:hover>picture>img{transform:scale(1.055);filter:saturate(1.08)}
.social-media-card-tiktok>img,.social-media-card-tiktok>picture>img{object-position:center 43%}
.social-media-card-youtube>img,.social-media-card-youtube>picture>img{object-position:center 45%}
.social-media-card-featured>img,.social-media-card-featured>picture>img{object-position:center 42%}
.social-media-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(7,13,19,.92) 0%,rgba(7,13,19,.68) 55%,rgba(7,13,19,.2) 100%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 66%)}
.social-media-card-tiktok .social-media-shade{background:linear-gradient(90deg,rgba(10,8,17,.93),rgba(10,8,17,.68) 58%,rgba(10,8,17,.17)),radial-gradient(circle at 90% 12%,rgba(37,244,238,.27),transparent 42%)}
.social-media-card-youtube .social-media-shade{background:linear-gradient(90deg,rgba(20,8,8,.94),rgba(20,8,8,.66) 58%,rgba(20,8,8,.15)),radial-gradient(circle at 92% 10%,rgba(255,0,0,.32),transparent 42%)}
.social-media-copy{position:absolute;z-index:2;left:18px;right:54px;bottom:16px;display:flex;flex-direction:column;gap:3px;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.social-platform{display:flex;align-items:center;gap:6px;font-size:calc(9.5px + var(--font-bump, 0px));font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.social-dot{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.social-media-card-tiktok .social-dot{background:#25f4ee}
.social-media-card-youtube .social-dot,.social-media-card-featured .social-dot{background:#ff3b30}
.social-media-copy b{color:#fff;font-size:calc(15px + var(--font-bump, 0px));line-height:1.2;letter-spacing:-.018em}
.social-media-copy small{display:block;color:rgba(255,255,255,.76);font-size:calc(11px + var(--font-bump, 0px));line-height:1.35}
.social-media-action{position:absolute;z-index:3;right:15px;bottom:15px;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);transition:transform .3s var(--ease),background .3s var(--ease)}
.social-media-action svg{width:16px;height:16px}
.social-media-card:hover .social-media-action{transform:translateX(2px) scale(1.08);background:rgba(255,255,255,.28)}
.social-media-card::after{content:"";position:absolute;z-index:2;inset:-100% -55%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);transform:translateX(-55%);transition:transform .8s var(--ease);pointer-events:none}
.social-media-card:hover::after{transform:translateX(55%)}
.home-video-card{width:100%;padding:0;border:0;font:inherit;text-align:left;cursor:pointer}
.home-video-card .social-media-shade{background:linear-gradient(90deg,rgba(8,17,23,.78),rgba(8,17,23,.48) 60%,rgba(8,17,23,.08)),linear-gradient(0deg,rgba(0,0,0,.3),transparent 70%)}
.home-video-card .social-dot{background:#ff3045;box-shadow:0 0 0 4px rgba(255,48,69,.15)}
.home-video-number{position:absolute;z-index:3;top:10px;right:12px;color:rgba(255,255,255,.52);font-size:10px;font-weight:800;letter-spacing:.08em}
.home-video-play{border-color:rgba(255,255,255,.42);background:linear-gradient(145deg,#ff3b4d,#d9182e);box-shadow:0 7px 18px rgba(216,24,46,.28)}
.home-video-play svg{width:14px;height:14px;fill:currentColor;transform:translateX(1px)}
.home-video-card:hover .home-video-play{background:linear-gradient(145deg,#ff5362,#e31c32);transform:scale(1.08)}
.home-video-modal[hidden]{display:none!important}
.home-video-modal{position:fixed;z-index:10020;inset:0;display:grid;padding:24px;place-items:center}
.home-video-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(8,17,23,.82);backdrop-filter:blur(7px);cursor:pointer}
.home-video-dialog{position:relative;z-index:1;width:min(960px,94vw);overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:#05080b;box-shadow:0 26px 80px rgba(0,0,0,.42)}
.home-video-frame{display:grid;width:100%;aspect-ratio:16/9;place-items:center;background:#05080b}
.home-video-frame iframe{display:block;width:100%;height:100%;border:0}
.home-video-close{position:absolute;z-index:3;top:10px;right:10px;display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(9,18,24,.68);backdrop-filter:blur(6px);color:#fff;font-size:24px;font-weight:300;line-height:1;cursor:pointer}
.home-video-close:hover{background:#e6273d;border-color:#e6273d}
body.home-video-open{overflow:hidden}

/* Trang tĩnh: giao diện giàu nội dung như bài viết nhưng không nằm trong Blog */
.static-page-kicker{display:inline-flex;margin-bottom:9px;padding:5px 10px;border-radius:999px;background:var(--teal-soft);color:var(--teal-dark);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:700;letter-spacing:.055em;text-transform:uppercase}
.static-page-card .art-head h1{margin-bottom:6px}
.static-page-card .page-content{max-width:none;margin:0;padding:0}
.static-page-foot{margin-top:28px}

@media(max-width:1024px){
  .social-side{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .social-media-card{min-height:160px}
}
@media(max-width:768px){
  .social-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .social-media-card{min-height:145px;border-radius:17px}
  .social-media-card:first-child{grid-column:1/-1;min-height:172px}
  .social-media-copy{left:14px;right:45px;bottom:13px}
  .social-media-copy b{font-size:calc(13.5px + var(--font-bump, 0px))}
  .social-media-copy small{font-size:calc(10.5px + var(--font-bump, 0px))}
  .social-media-action{right:11px;bottom:11px;width:31px;height:31px}
}
@media(max-width:520px){
  .social-side{grid-template-columns:1fr}
  .social-media-card,.social-media-card:first-child{grid-column:auto;min-height:150px}
  .home-video-modal{padding:10px}.home-video-dialog{width:100%;border-radius:8px}
}


/* Policy/support pages */
.policy-nav-intro{margin:-4px 0 12px;color:var(--mute);font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.55}
.policy-nav-list{display:grid;gap:8px}
.policy-nav-link{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:.18s ease}
.policy-nav-link:hover{border-color:#b9dedb;background:#f4fbfa;transform:translateY(-1px)}
.policy-nav-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--teal-soft);color:var(--teal-dark)}
.policy-nav-link b{display:block;font-size:calc(13px + var(--font-bump, 0px));line-height:1.35}
.policy-nav-link small{display:block;margin-top:3px;color:var(--mute);font-size:calc(11px + var(--font-bump, 0px));line-height:1.4}
.policy-nav-link>i{color:#8aa09e}
.policy-help-card{display:grid;gap:11px;background:linear-gradient(145deg,#f5fbfb,#fff7ed)}
.policy-help-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ink);color:#fff}
.policy-help-card h4{margin:0 0 4px}
.policy-help-card p{margin:0;color:var(--mute);font-size:calc(12.5px + var(--font-bump, 0px));line-height:1.55}
.policy-help-card .btn{justify-content:center;width:100%}
.page-content .policy-keypoints{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin:16px 0 24px;padding:0;list-style:none
}
.page-content .policy-keypoints li{
  margin:0;padding:13px 14px;border:1px solid #dce9e8;border-radius:11px;
  background:#f8fbfb;color:#40545d;font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.55
}
.page-content .policy-keypoints b{display:block;margin-bottom:3px;color:var(--ink)}
.page-content .policy-detail{
  margin:10px 0;border:1px solid var(--line);border-radius:12px;background:#fff;
  overflow:hidden
}
.page-content .policy-detail>summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;color:var(--ink);font-weight:750;cursor:pointer;list-style:none
}
.page-content .policy-detail>summary::-webkit-details-marker{display:none}
.page-content .policy-detail>summary::after{
  content:"+";display:grid;flex:0 0 24px;place-items:center;width:24px;height:24px;
  border-radius:7px;background:var(--teal-soft);color:var(--teal-dark);font-size:calc(18px + var(--font-bump, 0px))
}
.page-content .policy-detail[open]>summary{border-bottom:1px solid var(--line);background:#f7fbfb}
.page-content .policy-detail[open]>summary::after{content:"−"}
.page-content .policy-detail-body{padding:14px 16px 4px}
.page-content .policy-detail-body>p:last-child,
.page-content .policy-detail-body>ul:last-child,
.page-content .policy-detail-body>ol:last-child{margin-bottom:10px}
.page-content .policy-contact{
  margin:24px 0 0;padding:16px 18px;border-radius:12px;
  background:linear-gradient(135deg,#edf9f8,#fff7ed);color:#40545d
}
.page-content .policy-contact b{color:var(--ink)}
@media(max-width:720px){
  .page-content .policy-keypoints{grid-template-columns:1fr}
  .page-content .policy-detail>summary{padding:13px 14px}
  .page-content .policy-detail-body{padding:13px 14px 3px}
}

/* Warranty policy: quick visual scan inspired by specialist audio retailers */
.warranty-policy{--warranty-green:#069b87;--warranty-green-soft:#eaf8f5;--warranty-orange:#e97a27;--warranty-orange-soft:#fff3e9}
.warranty-policy .warranty-hero{
  position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:16px;
  margin:0 0 18px;padding:20px 22px;border:1px solid #cfe8e4;border-radius:16px;
  background:linear-gradient(135deg,#ecfaf7 0%,#f9fffe 58%,#fff6ed 100%);overflow:hidden
}
.warranty-policy .warranty-hero::after{
  content:"";position:absolute;right:-45px;bottom:-75px;width:180px;height:180px;border:30px solid rgba(6,155,135,.06);border-radius:50%;pointer-events:none
}
.warranty-policy .warranty-shield{
  position:relative;z-index:1;display:grid;width:58px;height:58px;place-items:center;
  border-radius:18px;background:var(--warranty-green);color:#fff;font-size:calc(25px + var(--font-bump, 0px));font-weight:850;
  box-shadow:0 8px 20px rgba(6,155,135,.17)
}
.warranty-policy .warranty-eyebrow{
  display:block;margin-bottom:3px;color:var(--warranty-green);font-size:calc(11px + var(--font-bump, 0px));
  font-weight:800;letter-spacing:.07em;text-transform:uppercase
}
.page-content .warranty-policy .warranty-hero h2{margin:0 0 4px;font-size:calc(21px + var(--font-bump, 0px));line-height:1.3}
.warranty-policy .warranty-hero p{margin:0;color:#425860;line-height:1.6}
.warranty-policy .warranty-quick-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0 0 24px
}
.warranty-policy .warranty-quick-item{
  position:relative;padding:15px 15px 15px 50px;border:1px solid #dde9e7;border-radius:13px;background:#fff
}
.warranty-policy .warranty-quick-number{
  position:absolute;top:15px;left:14px;display:grid;width:27px;height:27px;place-items:center;border-radius:9px;
  background:var(--warranty-green-soft);color:var(--warranty-green);font-size:calc(10px + var(--font-bump, 0px));font-weight:850
}
.warranty-policy .warranty-quick-item b{display:block;margin-bottom:3px;color:var(--ink);line-height:1.35}
.warranty-policy .warranty-quick-item p{margin:0;color:#53666e;font-size:calc(13px + var(--font-bump, 0px));line-height:1.55}
.warranty-policy .warranty-compare{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0 24px
}
.warranty-policy .warranty-status-card{
  overflow:hidden;border:1px solid #dbe7e5;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(24,45,54,.06)
}
.warranty-policy .warranty-status-head{
  display:flex;align-items:center;gap:10px;padding:13px 17px;background:var(--warranty-green);color:#fff
}
.warranty-policy .warranty-status-card.is-excluded .warranty-status-head{background:var(--warranty-orange)}
.warranty-policy .warranty-status-mark{
  display:grid;flex:0 0 26px;width:26px;height:26px;place-items:center;border:1px solid rgba(255,255,255,.48);
  border-radius:50%;background:rgba(255,255,255,.16);font-weight:900
}
.page-content .warranty-policy .warranty-status-head h2{margin:0;color:#fff;font-size:calc(17px + var(--font-bump, 0px));line-height:1.3}
.page-content .warranty-policy .warranty-status-list{margin:0;padding:16px 18px 17px;list-style:none}
.warranty-policy .warranty-status-list li{
  position:relative;margin:0;padding:5px 0 5px 27px;color:#3f535c;line-height:1.55
}
.warranty-policy .warranty-status-list li::before{
  content:"✓";position:absolute;left:0;top:5px;display:grid;width:19px;height:19px;place-items:center;
  border-radius:50%;background:var(--warranty-green-soft);color:var(--warranty-green);font-size:calc(10px + var(--font-bump, 0px));font-weight:900
}
.warranty-policy .is-excluded .warranty-status-list li::before{
  content:"×";background:var(--warranty-orange-soft);color:var(--warranty-orange);font-size:calc(15px + var(--font-bump, 0px))
}
.warranty-policy .warranty-support-note{
  display:flex;align-items:flex-start;gap:11px;margin:0 0 25px;padding:14px 16px;border:1px solid #f0dcc8;border-radius:12px;
  background:#fff9f3;color:#694b32
}
.warranty-policy .warranty-support-note>span{
  display:grid;flex:0 0 27px;width:27px;height:27px;place-items:center;border-radius:9px;background:var(--warranty-orange-soft);
  color:var(--warranty-orange);font-weight:850
}
.warranty-policy .warranty-support-note p{margin:0;line-height:1.6}
.warranty-policy .warranty-service-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:14px 0 25px
}
.warranty-policy .warranty-service-card{
  padding:15px;border:1px solid #dce8e7;border-radius:13px;background:#f9fcfc
}
.warranty-policy .warranty-service-card b{display:block;margin-bottom:5px;color:var(--ink)}
.warranty-policy .warranty-service-card p{margin:0;color:#53666e;font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.58}
.warranty-policy .warranty-contact{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin:25px 0 0;padding:17px 19px;
  border-radius:14px;background:var(--ink);color:#fff
}
.warranty-policy .warranty-contact p{margin:0;color:rgba(255,255,255,.78);font-size:calc(13px + var(--font-bump, 0px))}
.warranty-policy .warranty-contact b{display:block;margin-bottom:2px;color:#fff;font-size:calc(15px + var(--font-bump, 0px))}
.warranty-policy .warranty-contact a{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:10px 16px;border-radius:999px;
  background:var(--teal);color:#fff;font-weight:800;white-space:nowrap
}
@media(max-width:760px){
  .warranty-policy .warranty-quick-grid,.warranty-policy .warranty-service-grid{grid-template-columns:1fr}
  .warranty-policy .warranty-compare{grid-template-columns:1fr;gap:12px}
  .warranty-policy .warranty-hero{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:17px 15px}
  .warranty-policy .warranty-shield{width:48px;height:48px;border-radius:15px;font-size:calc(22px + var(--font-bump, 0px))}
  .page-content .warranty-policy .warranty-hero h2{font-size:calc(18px + var(--font-bump, 0px))}
  .warranty-policy .warranty-quick-item{padding:13px 13px 13px 47px}
  .warranty-policy .warranty-quick-number{top:13px;left:12px}
  .warranty-policy .warranty-contact{align-items:stretch;flex-direction:column;padding:16px}
  .warranty-policy .warranty-contact a{width:100%}
}

/* ============================================================
   Mobile readability patch 2026-07-25
   - Tên sản phẩm chỉ hiện đúng 2 dòng, không hé dòng thứ 3
   - Breadcrumb và cột thông tin sản phẩm dễ đọc hơn trên điện thoại
   - Tăng cỡ chữ nhưng siết khoảng cách để không tốn diện tích
   ============================================================ */
@media(max-width:768px){
  .pcard .pname{
    display:-webkit-box;
    height:2.7em;
    min-height:2.7em;
    max-height:2.7em;
    margin-bottom:5px;
    overflow:hidden;
    font-size:calc(13px + var(--font-bump, 0px));
    line-height:1.35;
    text-overflow:ellipsis;
    word-break:break-word;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
  }

  .crumb{
    gap:4px 7px;
    padding:15px 0 5px;
    font-size:calc(13.5px + var(--font-bump, 0px));
    line-height:1.45;
  }
  .crumb a,.crumb .cur{line-height:1.45}
  .crumb .cur{font-weight:650}

  .pdp.pdp-3col .pdp-info{padding:10px 8px 12px}
  .pdp-title-line{margin-bottom:7px}
  .pdp-info h1,
  .pdp-info .pdp-title-line h1{font-size:calc(23px + var(--font-bump, 0px));line-height:1.27}
  .pdp-info .pc{padding:4px 8px;font-size:calc(12px + var(--font-bump, 0px))}
  .pdp-short-description{margin-bottom:6px;font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.45}
  .pdp-sku{margin-bottom:4px;font-size:calc(12px + var(--font-bump, 0px))}

  .pdp-info .pdp-pr{margin:8px 0 10px;padding:5px 0}
  .pdp-price-head{gap:8px;margin-bottom:2px}
  .pdp-price-label{font-size:calc(11.5px + var(--font-bump, 0px))}
  .pdp-price-status{gap:6px;font-size:calc(12.25px + var(--font-bump, 0px));line-height:1.25}
  .pdp-rating{gap:3px}
  .pdp-rating span{font-size:calc(12.25px + var(--font-bump, 0px))}
  .pdp-info .pdp-pr .n{font-size:calc(26px + var(--font-bump, 0px))}
  .pdp-info .pdp-pr .o{font-size:calc(13px + var(--font-bump, 0px))}
  .pdp-discount{font-size:calc(10.5px + var(--font-bump, 0px))}

  .pdp-info .variant-label{margin:10px 0 6px;font-size:calc(13.5px + var(--font-bump, 0px))}
  .variant-pills{gap:7px}
  .variant-pill{padding:7px 11px}
  .variant-pill .vp-name{font-size:calc(13px + var(--font-bump, 0px))}
  .variant-pill .vp-price{font-size:calc(13.5px + var(--font-bump, 0px))}

  .pdp-info .pdp-buy{margin:10px 0 11px}
  .pdp-buy .btn{font-size:calc(13.5px + var(--font-bump, 0px))}

  .pdp-assurances{padding:5px}
  .pdp-assurances>span{gap:7px;padding:5px 4px}
  .pdp-assurance-copy b{font-size:calc(11.5px + var(--font-bump, 0px))}
  .pdp-assurance-copy small{font-size:calc(10px + var(--font-bump, 0px))}
}

@media(max-width:380px){
  .crumb{font-size:calc(13px + var(--font-bump, 0px))}
  .pdp-price-status{font-size:calc(11.75px + var(--font-bump, 0px))}
  .pdp-info h1,
  .pdp-info .pdp-title-line h1{font-size:calc(22px + var(--font-bump, 0px))}
}

/* ============================================================
   Tinh chỉnh giao diện PC + mobile header/breadcrumb/review
   2026-07-25
   ============================================================ */

/* Desktop: tên danh mục ở thanh bên dễ đọc hơn một chút. */
@media(min-width:769px){
  .sitem b{font-size:calc(14.5px + var(--font-bump, 0px))}
  .sitem-cat b{font-size:calc(15px + var(--font-bump, 0px))}
}

@media(max-width:768px){
  /* Header mobile cố định: không thu/phóng khi cuộn. */
  .container.header-inner{
    grid-template-columns:40px minmax(0,1fr) 40px;
    gap:8px;
    padding:9px 10px 8px;
    
  }
  .header-inner .logo{height:40px;max-width:176px}
  .burger,.cart-btn{width:40px;height:40px}

  /* Drawer mobile nhỏ và thoáng vừa đủ, không chiếm quá nhiều màn hình. */
  .drawer{width:min(62vw,210px);max-width:210px}
  .drawer-head{gap:8px;padding:10px 9px 9px}
  .drawer-head .logo{height:30px;max-width:132px}
  .drawer-x{width:30px;height:30px;border-radius:8px}
  .drawer-nav{padding:6px 7px}
  .dlink{min-height:35px;gap:7px;padding:3px 5px;font-size:calc(12.25px + var(--font-bump, 0px));border-radius:8px}
  .dlink-icon{width:25px;height:25px;flex-basis:25px;border-radius:7px}
  .dlink-icon svg,.dlink svg{width:15px;height:15px}
  .dlink-shop{margin-top:5px;padding-top:7px}
  .drawer-foot{padding:8px 9px 9px}
  .drawer-call{gap:8px;padding:8px 9px;border-radius:10px}
  .drawer-call-icon{width:29px;height:29px;flex-basis:29px;border-radius:8px}
  .drawer-call-icon svg{width:15px;height:15px}
  .drawer-call small{font-size:calc(9.5px + var(--font-bump, 0px))}
  .drawer-call b{font-size:calc(13px + var(--font-bump, 0px))}

  /* Breadcrumb cân khoảng cách với header phía trên và ảnh sản phẩm phía dưới. */
  .crumb{padding:10px 0 2px}
  .pdp.pdp-3col{padding-top:4px}
  .pdp.pdp-3col .pdp-media{padding-top:4px}

  /* Ba cam kết luôn nằm trên một hàng ngang, chữ rõ nhưng không cao thêm. */
  .pdp-assurances{grid-template-columns:repeat(3,minmax(0,1fr));padding:5px 3px}
  .pdp-assurances>span{
    min-width:0;justify-content:center;gap:4px;padding:5px 3px;
    border-bottom:0!important;
  }
  .pdp-assurances>span+span{border-left:1px solid #e1e6e9}
  .pdp-assurance-icon{flex:0 0 24px;width:24px;height:24px;border-radius:7px}
  .pdp-assurance-icon svg{width:13px;height:13px}
  .pdp-assurance-copy{gap:0;line-height:1.16}
  .pdp-assurance-copy b{font-size:calc(10.75px + var(--font-bump, 0px));white-space:normal;text-align:center}
  .pdp-assurance-copy small{font-size:calc(8.75px + var(--font-bump, 0px));white-space:normal;text-align:center}

  /* Kéo phần đánh giá/viết đánh giá lên gần nội dung phía trên hơn. */
  .product-reviews-section,
  .product-reviews-section.is-empty{margin-top:6px;margin-bottom:18px}
  .product-reviews-grid{padding-top:9px}
  .review-form{margin-top:0}
}

@media(max-width:380px){
  .header-inner .logo{height:36px;max-width:148px}
  .pdp-assurance-icon{display:none}
  .pdp-assurance-copy b{font-size:calc(10.25px + var(--font-bump, 0px))}
  .pdp-assurance-copy small{font-size:calc(8.25px + var(--font-bump, 0px))}
}


/* ============================================================
   Chốt khoảng cách trang sản phẩm; header giữ nguyên kích thước khi cuộn
   2026-07-25
   ============================================================ */
@media(min-width:769px){
  .pdp-top-surface .crumb{padding:10px 0 0}
  .pdp-top-surface .pdp.pdp-3col{padding-top:5px}
  .pdp-detail-wrap{padding-bottom:12px}
  .product-reviews-section,
  .product-reviews-section.is-empty{margin-top:8px}
}


/* ============================================================
   Product UX + popular products report patch 2026-07-25
   ============================================================ */
.pdp-hot-products{margin-top:16px;padding-top:14px;border-top:1px solid #edf0f2}
.pdp-hot-products h5{margin:0 0 9px;color:#34424d;font-size:calc(11px + var(--font-bump, 0px));font-weight:700;letter-spacing:.025em;text-transform:uppercase}
.pdp-hot-product{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:9px;padding:7px 0;color:var(--ink)}
.pdp-hot-product+.pdp-hot-product{border-top:1px solid #f1f3f4}
.pdp-hot-thumb{display:block;width:48px;height:48px;overflow:hidden;border:1px solid #edf0f2;border-radius:9px;background:#fafbfb}
.pdp-hot-thumb picture,.pdp-hot-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pdp-hot-copy{display:flex;min-width:0;flex-direction:column;gap:3px}
.pdp-hot-copy b{display:-webkit-box;overflow:hidden;color:#45525c;font-size:calc(10.75px + var(--font-bump, 0px));font-weight:650;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.pdp-hot-copy small{color:var(--price-red);font-size:calc(10.5px + var(--font-bump, 0px));font-weight:700}
.pdp-hot-product:hover .pdp-hot-copy b{color:var(--teal-dark)}

@media(min-width:769px){
  /* Tạo thêm nhịp thở giữa header và breadcrumb, vẫn giữ ảnh sát breadcrumb. */
  .pdp-top-surface .crumb{padding:14px 0 0}
  .pdp-top-surface .pdp.pdp-3col{padding-top:5px}
}

@media(max-width:768px){
  /* Đổi thứ tự nội dung ở cột thông tin mà không nhân đôi mô tả trong HTML. */
  .pdp.pdp-3col .pdp-info{display:flex;flex-direction:column}
  .pdp-info>.pdp-title-line{order:10}
  .pdp-info>.pdp-pr{order:20}
  .pdp-info>.pdp-sku{order:30}
  .pdp-info>.variant-label{order:40}
  .pdp-info>.variant-pills{order:41}
  .pdp-info>.pdp-buy{order:50}
  .pdp-info>.pdp-short-description{order:60;margin:0 0 9px;padding:0 2px;color:#65737e;font-size:calc(13.5px + var(--font-bump, 0px));line-height:1.48}
  .pdp-info>.pdp-assurances{order:70}

  .pdp-hot-products{margin-top:13px;padding-top:12px}
  .pdp-hot-product{grid-template-columns:52px minmax(0,1fr);gap:10px;padding:8px 0}
  .pdp-hot-thumb{width:52px;height:52px}
  .pdp-hot-copy b{font-size:calc(12px + var(--font-bump, 0px))}
  .pdp-hot-copy small{font-size:calc(11.5px + var(--font-bump, 0px))}
}


/* ============================================================
   Breadcrumb dùng chung toàn website - 2026-07-26
   Một class duy nhất quản lý căn lề và khoảng cách trên/dưới.
   ============================================================ */
.site-breadcrumb{
  box-sizing:border-box;
  margin:0;
}

@media(min-width:769px){
  /* Cùng một khoảng cách cho sản phẩm, blog, trang chính sách và trang phụ. */
  .site-breadcrumb{
    min-height:43px;
    padding:12px 0;
  }

  /* Trang có breadcrumb đi cùng thanh công cụ không được cộng thêm padding riêng. */
  .crumb-bar{
    padding:0;
  }
  .crumb-bar .site-breadcrumb{
    padding:12px 0;
  }

  /* Khoảng cách dưới breadcrumb do chính breadcrumb quản lý, không cộng dồn từ khối sau. */
  .site-breadcrumb + .pdp.pdp-3col,
  .site-breadcrumb + .article-wrap{
    padding-top:0;
  }

  /* Vô hiệu các bản vá cũ chỉ áp dụng riêng cho trang sản phẩm. */
  .pdp-top-surface .site-breadcrumb{
    padding:12px 0;
  }
  .pdp-top-surface .site-breadcrumb + .pdp.pdp-3col{
    padding-top:0;
  }
}

/* ============================================================
   Cân khoảng cách breadcrumb -> khối sản phẩm trên desktop
   Breadcrumb dùng chung đã đúng; khoảng hở còn lại đến từ padding
   nội bộ của cột ảnh và cột thông tin sản phẩm.
   ============================================================ */
@media (min-width:769px){
  .pdp-top-surface .site-breadcrumb + .pdp.pdp-3col{
    padding-top:0;
  }

  .pdp-top-surface .pdp.pdp-3col > .pdp-media{
    padding-top:4px;
  }

  .pdp-top-surface .pdp.pdp-3col > .pdp-info{
    padding-top:8px;
  }
}

/* ============================================================
   Desktop compact header + product gallery hint + flexible CTA
   2026-07-26
   ============================================================ */
@media(min-width:769px){
  /* Khi cuộn trên desktop: chỉ thu hàng logo/tìm kiếm; menu dưới giữ nguyên. */
  .site-header .header-inner{
    transition:padding-top .28s var(--ease),padding-bottom .28s var(--ease);
  }
  .site-header.stuck .header-inner{
    padding-top:7px;
    padding-bottom:7px;
  }
  .site-header.stuck .header-inner .logo{
    height:35px;
  }

  /* Hai nút CTA tự chia hết phần chiều ngang còn lại của cột sản phẩm. */
  .pdp-buy [data-add-cart],
  .pdp-buy .btn-zalo{
    flex:1 1 0;
    min-width:132px;
    max-width:none;
  }
}

@media(max-width:768px){
  /* Gợi ý vuốt nhẹ, chỉ hiện với sản phẩm có nhiều ảnh. */
  .pdp-big.has-swipe-hint{position:relative}
  .pdp-big.has-swipe-hint::before,
  .pdp-big.has-swipe-hint::after{
    position:absolute;
    z-index:3;
    bottom:12px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.72);
    border-radius:999px;
    background:rgba(18,35,46,.34);
    color:#fff;
    font-size:calc(23px + var(--font-bump, 0px));
    font-weight:400;
    line-height:1;
    pointer-events:none;
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    box-shadow:0 3px 12px rgba(18,35,46,.13);
    opacity:.72;
    transition:opacity .3s ease,transform .3s ease;
  }
  .pdp-big.has-swipe-hint::before{content:"‹";left:12px;animation:pdpSwipeLeft 1.8s ease-in-out infinite}
  .pdp-big.has-swipe-hint::after{content:"›";right:12px;animation:pdpSwipeRight 1.8s ease-in-out infinite}
  .pdp-big.has-swipe-hint.swipe-hint-seen::before,
  .pdp-big.has-swipe-hint.swipe-hint-seen::after{
    opacity:0;
    animation:none;
  }
}
@keyframes pdpSwipeLeft{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
@keyframes pdpSwipeRight{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){
  .pdp-big.has-swipe-hint::before,
  .pdp-big.has-swipe-hint::after{animation:none}
}
@media(max-width:768px){
  .pdp-big.has-swipe-hint::before,
  .pdp-big.has-swipe-hint::after{content:none}
  .pdp-th-arrow{width:32px;height:32px}
  .pdp-th-arrow.prev{left:8px}
  .pdp-th-arrow.next{right:8px}
  .pdp-th-arrow svg{width:16px;height:16px}
}


/* Chính sách & bảo hành: nền xanh nhạt trên header desktop */
@media(min-width:769px){
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"]{
    padding:6px 10px;
    background-color:#0086fd14;
    border-radius:var(--r-pill);
    font-weight:500;
    color:var(--body);
    display:inline-flex;
    align-items:center;
    gap:5px;
  }
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"]:hover,
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"].on{
    background-color:#0086fd22;
    color:#0675cf;
  }
}

/* ============================================================
   Product sidebar + blue service actions refinements — 2026-07-26
   ============================================================ */
@media(min-width:769px){
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"]{
    color:#008fff;
  }
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"]:hover,
  .site-header .nav > .nav-link[href="/chinh-sach-bao-hanh/"].on{
    color:#008fff;
  }

}

@media(max-width:768px){
  .pdp-hot-products{display:none!important}
}

/* ===== Slider trang chủ quản trị được ===== */
.home-hero-slider{height:auto!important}
.home-hero-slider .slides{height:auto!important}
.home-hero-slider .slide{aspect-ratio:16/9;min-height:0!important}
.home-hero-slider .slide-media picture{display:block;width:100%;height:100%}
.home-hero-slider .slide.no-copy::after{display:none}
.home-hero-slider .slide-hit{position:absolute;inset:0;z-index:2;display:block}
.home-hero-slider .copy-right .sin{margin-right:54px;margin-left:auto;border-right:2px solid rgba(255,255,255,.7);border-left:0;text-align:right}
.home-hero-slider .theme-dark .sin,.home-hero-slider .theme-dark .sin h2{color:#12232e;text-shadow:none}
.home-hero-slider .theme-dark .sin .e,.home-hero-slider .theme-dark .sin p{color:rgba(18,35,46,.82)}
.home-hero-slider .theme-dark::after{background:linear-gradient(90deg,rgba(255,255,255,.84),rgba(255,255,255,.5) 42%,rgba(255,255,255,.05) 76%)}
.home-hero-slider .copy-right.theme-dark::after{background:linear-gradient(270deg,rgba(255,255,255,.84),rgba(255,255,255,.5) 42%,rgba(255,255,255,.05) 76%)}
.home-hero-slider .copy-right.theme-light::after{background:linear-gradient(270deg,rgba(8,18,22,.83),rgba(8,18,22,.58) 38%,rgba(8,18,22,.1) 74%)}
@media(max-width:768px){
  .home-hero-slider .slide{aspect-ratio:16/9;min-height:0!important}
  .home-hero-slider .copy-right .sin{margin-right:30px;margin-left:auto}
}


/* Chia sẻ sản phẩm: icon nhỏ gọn, đồng nhất với cỡ chữ */
.pdp-share{margin-top:10px;display:flex;align-items:center;gap:7px;min-height:24px}
.pdp-share-label{display:inline-flex;align-items:center;gap:5px;color:var(--mute);font-size:calc(12.5px + var(--font-bump, 0px));font-weight:600;white-space:nowrap}
.pdp-share-label-icon{display:inline-grid;place-items:center;width:15px;height:15px;color:#176a9c;flex:0 0 15px}
.pdp-share-label-icon svg{display:block;width:15px;height:15px}
.pdp-share-icons{display:flex;align-items:center;gap:5px}
.pdp-share-icon{display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;border-radius:6px;color:#fff;cursor:pointer;box-shadow:none;transition:transform .16s var(--ease),filter .16s var(--ease)}
.pdp-share-icon:hover{transform:translateY(-1px);filter:brightness(1.08)}
.pdp-share-icon:active{transform:translateY(0)}
.pdp-share-icon svg{display:block;width:13px;height:13px;fill:currentColor}
.pdp-share-icon.is-facebook{background:#1877f2}
.pdp-share-icon.is-youtube{background:#ff0033}
.pdp-share-icon.is-tiktok{background:#111}
.pdp-share-icon.is-zalo{border:1px solid rgba(0,104,255,.24);background:#fff}
.pdp-share-icon.is-zalo .pdp-share-zalo-icon{display:block;width:20px;height:20px}

/* Ảnh nội dung sản phẩm: chỉ căn giữa ảnh khối không có lệnh căn; giữ đúng ảnh lệ trái/phải cũ */
.pdp-desc .page-content img{max-width:100%;height:auto;margin:14px 0}
.pdp-desc .page-content .content-responsive-picture>img:not(.alignleft):not(.alignright){margin-left:auto!important;margin-right:auto!important}
.pdp-desc .page-content p>img:only-child:not(.alignleft):not(.alignright),
.pdp-desc .page-content p>a:only-child>img:not(.alignleft):not(.alignright){max-width:92%;margin:18px auto}
.pdp-desc .page-content figure:not(.alignleft):not(.alignright){display:block;float:none;clear:both;max-width:92%;margin-left:auto;margin-right:auto;text-align:center}
.pdp-desc .page-content img.aligncenter,
.pdp-desc .page-content figure.aligncenter{display:block;float:none;clear:both;margin-left:auto!important;margin-right:auto!important}
.pdp-desc .page-content img.alignleft,
.pdp-desc .page-content figure.alignleft{float:left!important;clear:left;margin:6px 20px 14px 0!important;max-width:min(48%,420px)}
.pdp-desc .page-content img.alignright,
.pdp-desc .page-content figure.alignright{float:right!important;clear:right;margin:6px 0 14px 20px!important;max-width:min(48%,420px)}
.pdp-desc .page-content [style*="float: left"]{float:left!important;margin:6px 20px 14px 0!important}
.pdp-desc .page-content [style*="float:left"]{float:left!important;margin:6px 20px 14px 0!important}
.pdp-desc .page-content [style*="float: right"]{float:right!important;margin:6px 0 14px 20px!important}
.pdp-desc .page-content [style*="float:right"]{float:right!important;margin:6px 0 14px 20px!important}
.pdp-desc .page-content::after{content:"";display:block;clear:both}
@media(max-width:768px){
  .pdp-share{margin-top:8px;gap:7px;flex-wrap:wrap}
  .pdp-share-icon{width:22px;height:22px}
  .pdp-desc .page-content img.alignleft,.pdp-desc .page-content img.alignright,.pdp-desc .page-content figure.alignleft,.pdp-desc .page-content figure.alignright{float:none!important;display:block;max-width:100%;margin:16px auto!important}
}

/* Căn giữa quang học ảnh đơn trong mô tả sản phẩm.
   JS chỉ gắn class cho block thực sự chỉ chứa một ảnh, không đụng alignleft/alignright. */
.pdp-desc .page-content .pdp-media-only-center{
  display:flex!important;
  width:100%!important;
  max-width:none!important;
  justify-content:center!important;
  align-items:center!important;
  clear:both;
  box-sizing:border-box;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  text-indent:0!important;
  text-align:center!important;
}
.pdp-desc .page-content .pdp-media-only-center>a{
  display:flex!important;
  width:100%!important;
  justify-content:center!important;
  align-items:center!important;
  margin:0!important;
  padding:0!important;
}
.pdp-desc .page-content .pdp-media-only-center img{
  display:block!important;
  float:none!important;
  clear:both!important;
  width:auto!important;
  max-width:92%!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
@media(max-width:768px){
  .pdp-desc .page-content .pdp-media-only-center img{max-width:100%!important}
}

/* Wishlist: dùng chung localStorage, không cần đăng nhập. */
.wishlist-header{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #e4e9ed;
  border-radius:10px;
  background:#fff;
  color:#d92d55;
  font-size:calc(12.5px + var(--font-bump, 0px));
  font-weight:700;
  white-space:nowrap;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease);
}
.wishlist-header:hover,.wishlist-header.on{background:#fff;border-color:#ffb8c7;color:#d92d55;transform:translateY(-1px);box-shadow:0 0 0 2px rgba(229,72,77,.08)}
.wishlist-header svg{width:17px;height:17px}
.wishlist-count,.drawer-wishlist-count{
  display:inline-grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:#e5484d;
  color:#fff;
  font-size:calc(10px + var(--font-bump, 0px));
  font-weight:800;
  line-height:1;
}
.drawer-wishlist-count{margin-left:auto}

.pdp-favorite{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
  padding:5px 9px;
  border:0;
  border-radius:8px;
  background:#fff8f9;
  color:#c92d50;
  font:700 12.5px/1.25 Inter,Arial,sans-serif;
  cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.pdp-favorite:hover{background:#ffeff2;transform:translateY(-1px)}
.pdp-favorite svg{width:15px;height:15px}
.pdp-favorite.liked{background:#ffecef;color:#d51f4a}
.pdp-favorite.liked svg{fill:currentColor}
.pdp-favorite-remove{display:none}
.pdp-favorite.liked .pdp-favorite-add{display:none}
.pdp-favorite.liked .pdp-favorite-remove{display:inline}

.wishlist-empty{margin-bottom:18px}

@media (max-width:768px){
  .wishlist-header{width:40px;height:40px;min-height:40px;padding:0;border-radius:10px;background:#fff}
  .wishlist-header>span:not(.wishlist-count){display:none}
  .wishlist-count{position:absolute;top:-4px;right:-5px;min-width:17px;height:17px;font-size:calc(9px + var(--font-bump, 0px))}
  .pdp-favorite{margin-top:8px}
}


/* 2026-07-26: Wishlist filter + engagement row, source-level final rules */
.wishlist-product-hidden{display:none!important}
.pdp-engagement{
  display:flex;
  align-items:center;
  width:100%;
  gap:10px;
  margin-top:9px;
}
.pdp-engagement .pdp-favorite,
.pdp-engagement .pdp-share{margin-top:0}
.pdp-engagement-divider{
  flex:1 1 auto;
  min-width:28px;
  height:1px;
  border-top:1px dashed #cfd7dc;
}
.pdp-engagement .pdp-share{
  margin-left:auto;
  justify-content:flex-end;
  flex:0 0 auto;
}
.fgroup-favorites .rating-filter-check{flex:0 0 18px}
@media(max-width:768px){
  .pdp-engagement{gap:8px}
  .pdp-engagement-divider{min-width:16px}
  .pdp-engagement .pdp-share-label>span:last-child{display:none}
}


/* 2026-07-26: Wishlist stable filter + full sticky mobile header */
@media (max-width:768px){
  .site-header,
  .site-header.stuck{
    position:sticky;
    top:0;
    background:rgba(255,255,255,.96);
    box-shadow:0 1px 2px rgba(18,35,46,.04),0 5px 16px rgba(18,35,46,.055);
  }
  .container.header-inner,
  .site-header.stuck .container.header-inner{
    display:grid;
    grid-template-columns:40px minmax(0,1fr) 86px;
    grid-template-rows:auto auto;
    gap:8px;
    padding:9px 10px 8px;
    transform:none!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .site-header .brand,
  .site-header.stuck .brand,
  .site-header .burger,
  .site-header.stuck .burger,
  .site-header .nav,
  .site-header.stuck .nav{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    max-height:none!important;
  }
  .site-header .nav{display:flex;grid-column:3;grid-row:1;justify-content:flex-end;gap:4px;width:86px}
  .site-header .cart-btn,
  .site-header .wishlist-header{width:40px;height:40px;min-width:40px;min-height:40px;flex:0 0 40px}
  .site-header .search,
  .site-header.stuck .search{
    display:flex!important;
    grid-column:1/-1;
    grid-row:2;
    width:100%!important;
    height:40px!important;
    max-height:40px!important;
    margin:0!important;
    padding:0 15px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
}

/* 2026-07-26: Header mobile dùng nút tròn hoàn toàn */
@media (max-width:768px){
  .site-header .burger,
  .site-header .cart-btn,
  .site-header .wishlist-header{
    border-radius:999px!important;
  }
}

/* Mobile PDP: place wishlist/share after assurances, before offers */
@media (max-width: 768px){
  .pdp-info > .pdp-engagement{
    order:80;
    margin-top:8px;
    margin-bottom:0;
  }
}

/* Cụm liên hệ nhỏ ở góc dưới bên phải desktop.
   Nút neo cố định theo mép phải: mặc định là icon tròn 40px,
   hover/focus mở rộng sang trái; icon trượt sang trái và nhãn hiện bên phải icon. */
.desktop-quick-actions{
  position:fixed;
  right:14px;
  bottom:18px;
  z-index:9999;
  display:flex;
  width:132px;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
}
.desktop-quick-action{
  position:relative;
  display:block;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  overflow:hidden;
  padding:0;
  border:1px solid currentColor;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 18px rgba(18,35,46,.13);
  color:#087bea;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
  transform:none;
  will-change:width;
  transition:
    width 210ms cubic-bezier(.22,.74,.2,1),
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    opacity 160ms ease;
}
.desktop-quick-action:not(.is-scroll-top):hover,
.desktop-quick-action:not(.is-scroll-top):focus-visible{
  width:124px;
  transform:none;
  box-shadow:0 9px 24px rgba(18,35,46,.17);
}
.desktop-quick-action:focus-visible{
  outline:3px solid rgba(0,134,253,.18);
  outline-offset:2px;
}
.desktop-quick-icon{
  position:absolute;
  left:6px;
  top:50%;
  z-index:2;
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  border-radius:50%;
  transform:translateY(-50%);
  transition:none;
}
.desktop-quick-icon svg{
  display:block;
  width:100%;
  height:100%;
}
.desktop-quick-label{
  position:absolute;
  left:40px;
  right:9px;
  top:50%;
  display:block;
  overflow:hidden;
  color:inherit;
  font-size:12.5px;
  font-weight:650;
  line-height:1;
  text-align:left;
  text-overflow:ellipsis;
  opacity:0;
  transform:translate(5px,-50%);
  transition:opacity 120ms ease 45ms,transform 180ms cubic-bezier(.22,.74,.2,1) 20ms;
}
.desktop-quick-action:not(.is-scroll-top):hover .desktop-quick-label,
.desktop-quick-action:not(.is-scroll-top):focus-visible .desktop-quick-label{
  opacity:1;
  transform:translate(0,-50%);
}
.desktop-quick-action.is-facebook{
  border-color:#087bea;
  color:#087bea;
}
.desktop-quick-action.is-facebook:hover,
.desktop-quick-action.is-facebook:focus-visible{background:#f1f7ff}
.desktop-quick-messenger-icon{background:#087bea}
.desktop-quick-messenger-icon svg{fill:#087bea}
.desktop-quick-messenger-icon svg>path:first-child{fill:#087bea}
.desktop-quick-messenger-icon .messenger-bolt{fill:#fff}
.desktop-quick-action.is-zalo{
  border-color:#008fe5;
  color:#0087d8;
}
.desktop-quick-action.is-zalo:hover,
.desktop-quick-action.is-zalo:focus-visible{background:#f0faff}
.desktop-quick-zalo-icon{background:#fff}
.desktop-quick-zalo-icon .desktop-quick-zalo{
  width:27px;
  height:27px;
}
.desktop-quick-action.is-maps{
  border-color:#3daa4b;
  color:#3b9e48;
}
.desktop-quick-action.is-maps:hover,
.desktop-quick-action.is-maps:focus-visible{background:#f2fbf3}
.desktop-quick-maps-icon{background:#fff}
.desktop-quick-maps-icon svg{
  width:25px;
  height:25px;
}
.desktop-quick-action.is-scroll-top{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  display:grid;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  place-items:center;
  overflow:hidden;
  border:1px solid #d7e0e5;
  border-radius:50%;
  background:#fff;
  color:#24323a;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  box-shadow:0 6px 18px rgba(18,35,46,.14);
  transition:opacity 160ms ease,visibility 160ms ease,transform 160ms ease,background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease;
}
.desktop-quick-action.is-scroll-top svg{
  display:block;
  width:19px;
  height:19px;
  margin:0;
  transform:none;
}
.desktop-quick-action.is-scroll-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
.desktop-quick-action.is-scroll-top.is-visible:hover,
.desktop-quick-action.is-scroll-top.is-visible:focus-visible{
  border-color:#bfcbd2;
  background:#f5f8fa;
  color:#0f172a;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(18,35,46,.17);
}
@media(max-width:991.98px){
  .desktop-quick-actions{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .desktop-quick-action,
  .desktop-quick-label{transition:none}
}

.pdp-buy .btn-zalo{
  height:40px;
  min-height:40px;
  padding-top:0;
  padding-bottom:0;
}

.btn-zalo .zalo-logo{
  width:26px;
  height:26px;
  flex:0 0 26px;
}

/* Nội dung SEO danh mục: hiển thị gọn, dễ đọc, không phá bố cục bộ lọc. */
.category-description{max-width:980px;margin:10px 0 4px;color:#4b5563;font-size:14px;line-height:1.65}
@media(max-width:767px){.category-description{margin-top:8px;font-size:13px;line-height:1.6}}


/* Product-card price range for products with multiple paid variants. */
.pcard .pprice.has-range{width:100%;min-width:0}
.pcard .pprice .n.is-range{
  max-width:100%;
  font-size:calc(13.5px + var(--font-bump, 0px));
  letter-spacing:-.035em;
  white-space:nowrap;
}
.shop-grid.view-list .pprice .n.is-range{font-size:calc(17px + var(--font-bump, 0px))}
@media (max-width:768px){
  .pcard .pprice .n.is-range{
    font-size:calc(11.25px + var(--font-bump, 0px));
    letter-spacing:-.055em;
  }
  .shop-grid.view-list .pprice .n.is-range{font-size:calc(14px + var(--font-bump, 0px))}
}

/* 2026-07-30: Product-card prices stay on one line and use a consistent 15px size. */
.pcard .pprice{
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
  overflow:hidden;
}
.pcard .pprice .n,
.shop-grid.view-list .pprice .n,
.pcard .pprice .n.is-range,
.shop-grid.view-list .pprice .n.is-range{
  display:block;
  max-width:none;
  font-size:15px!important;
  line-height:1.25;
  letter-spacing:-.035em;
  white-space:nowrap!important;
}

/* Two-column mobile cards are narrow. Keep 15px type, then compress only
   a min-max variant range horizontally so it never wraps or clips. */
@media(max-width:768px){
  .pcard .pprice .n.is-range{
    width:113.64%;
    transform:scaleX(.88);
    transform-origin:left center;
    letter-spacing:-.045em;
  }
  .shop-grid.view-list .pprice .n.is-range{
    width:auto;
    transform:none;
  }
}

/* 2026-07-31: product purchase phase 1 — true variants, stock and mobile checkout. */
.pdp-th .t{
  width:72px!important;
  height:auto!important;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  background:#fff;
}
.pdp-th .t picture,.pdp-th .t img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  box-sizing:border-box;
  background:#fff;
}
.variant-pill{position:relative;align-items:flex-start;min-width:118px}
.variant-pill small{display:block;margin-top:2px;color:#7a8790;font-size:10px;font-weight:650}
.variant-pill.is-unavailable{border-style:dashed;background:#f8f9fa;opacity:.68}
.variant-pill.is-unavailable .vp-name,.variant-pill.is-unavailable .vp-price{text-decoration:none;color:#7b858b}
.variant-pill.is-unavailable small{color:#b45151}
.pdp-availability.is-preorder{color:#b46b17}
.pdp-availability.is-unavailable{color:#b34d4d}
.pdp-buy .pdp-cart-btn{background:#f29721;color:#fff;border:0;box-shadow:var(--sh-orange)}
.pdp-buy .pdp-buy-now-btn{flex:1 1 145px;min-width:125px;white-space:nowrap}
.pdp-buy button:disabled,.pdp-mobile-buybar button:disabled{cursor:not-allowed;opacity:.5;transform:none!important;box-shadow:none!important}
.crow-variant{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:4px;color:#30424c;font-size:12px}
.crow-variant b{padding:3px 7px;border-radius:6px;background:#eef7f6;color:#087f75;font-size:11px}
.crow-variant span{color:var(--mute);font-size:10.5px}
.crow-stock-warning{margin-top:5px;color:#b34d4d;font-size:11px;font-weight:650}
.crow.is-unavailable{background:#fffafa}
.done-product em{display:block;margin-top:3px;color:#087f75;font-size:11px;font-style:normal;font-weight:650}
.pdp-mobile-buybar{display:none}

@media(min-width:769px){
  .pdp-buy [data-add-cart],
  .pdp-buy [data-buy-now],
  .pdp-buy .btn-zalo{flex:1 1 0;min-width:118px;max-width:none}
}

@media(max-width:768px){
  .pdp-th .t{width:62px!important;min-width:62px;height:auto!important}
  .pdp-info .pdp-buy{display:grid;grid-template-columns:auto 1fr 1fr;gap:7px;padding-bottom:2px}
  .pdp-buy .qty{grid-row:1;grid-column:1}
  .pdp-buy [data-add-cart]{grid-row:1;grid-column:2;min-width:0!important;padding:8px!important}
  .pdp-buy [data-buy-now]{grid-row:1;grid-column:3;min-width:0!important;padding:8px!important}
  .pdp-buy .btn-zalo{grid-column:1/-1;width:100%;justify-content:center}
  .pdp-mobile-buybar{
    position:fixed;
    z-index:80;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:minmax(92px,1fr) minmax(118px,1.25fr) 46px;
    align-items:center;
    gap:7px;
    padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    border-top:1px solid rgba(214,224,228,.95);
    background:rgba(255,255,255,.96);
    box-shadow:0 -8px 28px rgba(24,39,48,.13);
    backdrop-filter:blur(14px);
  }
  .pdp-mobile-price{display:flex;min-width:0;flex-direction:column;line-height:1.1}
  .pdp-mobile-price small{overflow:hidden;color:#66777f;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
  .pdp-mobile-price b{overflow:hidden;margin-top:4px;color:#e5484d;font-size:16px;text-overflow:ellipsis;white-space:nowrap}
  .pdp-mobile-buybar .btn{min-height:42px;padding:9px 10px;border-radius:9px;font-size:13px}
  .pdp-mobile-zalo{display:grid;width:44px;height:42px;place-items:center;border:1px solid #d6eaff;border-radius:9px;background:#f2f8ff}
  .pdp-mobile-zalo .zalo-logo{width:27px;height:27px}
  .product-detail-content{padding-bottom:82px}
}
.pstock.preorder{color:#b46b17}
.pstock.preorder .pstock-dot{background:#d78622;box-shadow:0 0 0 2px rgba(215,134,34,.12)}

/* 2026-07-31: gallery counter, YouTube-first media and refined red purchase CTA. */
.pdp-th .t picture,.pdp-th .t img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:0!important;
}
.pdp-th .t{position:relative;border:0;font:inherit;padding:0;overflow:hidden}
.pdp-th .video-thumb{background:#101419}
.pdp-th .video-thumb>img{object-fit:cover!important;opacity:.8}
.video-thumb-play{position:absolute;inset:50% auto auto 50%;display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:rgba(229,72,77,.94);color:#fff;transform:translate(-50%,-50%);box-shadow:0 5px 16px rgba(0,0,0,.22)}
.video-thumb-play svg{width:14px!important;height:14px!important;color:#fff!important;opacity:1!important;fill:currentColor;transform:translateX(1px)}
.video-thumb-label{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.72);color:#fff;font-size:9px;font-weight:750;line-height:1.2}
.pdp-big.is-video{background:#0c1015}
.pdp-big.is-video .pdp-big-img{display:grid;place-items:center}
.pdp-video-frame{display:block;width:100%;aspect-ratio:16/9;max-height:100%;border:0;background:#000}
.pdp-media-counter{position:absolute;left:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;min-width:42px;height:28px;justify-content:center;padding:0 9px;border-radius:999px;background:rgba(18,35,46,.72);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:750;line-height:1;box-shadow:0 4px 14px rgba(0,0,0,.14)}
.pdp-media-counter[hidden]{display:none!important}
.zoom-btn[hidden]{display:none!important}
.pdp-buy-now-btn{background:red!important;border-color:red!important;border-radius:8px!important;color:#fff!important;box-shadow:0 8px 22px rgba(255,0,0,.22)}
.pdp-buy-now-btn:hover{background:#c62828!important;border-color:darkred!important;color:#fff!important;transform:translateY(-1px)}
.pdp-buy-now-btn:active{background:#700000!important;border-color:#700000!important;transform:none}

/* Shared product controls: one active-thumbnail treatment and one corner radius. */
.pdp-th .t.on{border:1px solid #83d8d0;box-shadow:0 0 0 1px rgba(131,216,208,.16)}
.pdp-buy .qty,.pdp-buy .btn,.pdp-buy button,.pdp-buy .qty button{border-radius:8px}

@media(max-width:768px){
  .pdp-mobile-buybar{
    grid-template-columns:58px minmax(0,1fr) 154px;
    gap:0;
    padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  }
  .pdp-mobile-zalo{grid-column:1;justify-self:start;display:grid;width:52px;height:39px;place-items:center;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .pdp-mobile-zalo .zalo-logo{width:38px;height:38px}
  .pdp-mobile-buybar .pdp-buy-now-btn{
    grid-column:3;
    justify-self:end;
    display:flex;
    width:154px;
    height:39px;
    min-height:39px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    padding:3px 12px 4px;
    border-radius:9px;
    line-height:1;
    white-space:nowrap;
  }
  .pdp-mobile-buybar .pdp-buy-now-btn [data-mobile-buy-label]{font-size:13.5px;font-weight:760;line-height:1.05}
  .pdp-mobile-buy-price{display:block;max-width:100%;margin:0;padding:0;border:0;color:rgba(255,255,255,.94);font-size:12px;font-weight:500;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pdp-media-counter{left:9px;bottom:9px;height:25px;min-width:38px;padding:0 8px;font-size:11px}
  .product-detail-content{padding-bottom:92px}
}
/* 2026-07-31: chỉ hiện thanh mua mobile khi người xem đã cuộn tới phần chi tiết sản phẩm. */
@media(max-width:768px){
  .pdp-mobile-buybar{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(0,calc(100% + 14px),0);
    transition:transform .24s ease,opacity .2s ease,visibility 0s linear .24s;
    will-change:transform,opacity;
  }
  .pdp-mobile-buybar.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate3d(0,0,0);
    transition-delay:0s;
  }
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .pdp-mobile-buybar{transition:none}
}

/* 2026-07-31 performance: lightweight YouTube facade, iframe only after click. */
.pdp-video-facade{
  position:relative;display:grid;width:100%;height:100%;min-height:220px;place-items:center;
  overflow:hidden;border:0;background:#0c1015;cursor:pointer;color:#fff;
}
.pdp-video-facade>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.pdp-video-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.32))}
.pdp-video-facade-play{position:relative;z-index:2;display:grid;width:62px;height:62px;place-items:center;border-radius:50%;background:#e5484d;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.pdp-video-facade-play svg{width:25px!important;height:25px!important;fill:currentColor;transform:translateX(2px)}
.pdp-video-facade-text{position:absolute;z-index:2;left:50%;bottom:18px;transform:translateX(-50%);font-size:12px;font-weight:650;white-space:nowrap;text-shadow:0 2px 8px rgba(0,0,0,.65)}
.pdp-video-facade:hover .pdp-video-facade-play{background:#d83b41;transform:scale(1.04)}
.pdp-video-open{display:grid;width:100%;min-height:48px;margin-top:10px;padding:7px 10px;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:9px;border:1px solid #dce7e9;border-radius:6px;background:linear-gradient(135deg,#fff,#f6fbfb);box-shadow:0 5px 16px rgba(23,62,69,.06);color:#172d36;text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.pdp-video-open:hover{border-color:#91d5cf;box-shadow:0 8px 20px rgba(23,97,99,.1);transform:translateY(-1px)}
.pdp-video-open.on{border-color:#64c9bf;background:linear-gradient(135deg,#effbf9,#fff7f7);box-shadow:0 0 0 1px rgba(100,201,191,.13)}
.pdp-video-open-icon{position:relative;display:grid;width:34px;height:34px;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ff4b55,#e51f32);box-shadow:0 5px 13px rgba(229,31,50,.24);color:#fff}
.pdp-video-open-icon:after{position:absolute;inset:-4px;border:1px solid rgba(229,31,50,.16);border-radius:50%;content:""}
.pdp-video-open-icon svg{width:15px!important;height:15px!important;fill:currentColor;transform:translateX(1px)}
.pdp-video-open-copy{display:flex;min-width:0;flex-direction:column;gap:2px}
.pdp-video-open-copy b{font-size:12.5px;line-height:1.2}.pdp-video-open-copy small{color:#7d9097;font-size:9.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.pdp-video-open-arrow{color:#7a9299;font-size:23px;font-weight:300;line-height:1;text-align:center}
@media(max-width:768px){
  .pdp-video-facade{min-height:200px}
  .pdp-video-facade-play{width:54px;height:54px}
  .pdp-video-facade-text{bottom:12px;font-size:11px}
  .pdp-video-open{margin:8px 10px 0;width:calc(100% - 20px)}
}

/* 2026-07-31: bộ đếm ảnh gọn trong ảnh chính và lightbox; nút zoom kính mờ nhẹ. */
.pdp-media-counter{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  min-width:24px;
  height:16px;
  justify-content:center;
  padding:0 9px;
  border-radius:999px;
  background:rgb(18 35 46 / 20%);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  color:#fff;
  font-size:11px;
  font-weight:400;
  line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
.pdp-media-counter[hidden]{display:none!important}
.lightbox-image-stage{display:inline-flex;align-items:center;justify-content:center}
.lightbox-media-counter{left:12px;bottom:12px;z-index:5}
.zoom-btn{
  background:rgb(255 255 255 / 48%);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  border-color:rgb(18 35 46 / 10%);
  box-shadow:0 4px 14px rgba(0,0,0,.10);
}
.zoom-btn:hover{
  background:rgb(255 255 255 / 66%);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  border-color:rgb(18 35 46 / 14%);
  color:var(--ink);
}
@media(max-width:768px){
  .pdp-media-counter,
  .lightbox-media-counter{
    left:9px;
    bottom:9px;
    min-width:24px;
    height:16px;
    padding:0 8px;
    font-size:11px;
  }
}


/* 31/07/2026: Ô phiên bản gọn, trạng thái thường giữ nguyên, ô chọn viền đỏ 1px */
.variant-pills{
  gap:7px;
}
.variant-pill{
  min-width:0;
  width:auto;
  padding:2px 14px;
  gap:1px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--card);
  box-shadow:none;
}
.variant-pill:not(.on):not(.is-unavailable) .vp-name{
  color:var(--ink);
  font-weight:600;
}
.variant-pill:not(.on):not(.is-unavailable) .vp-price{
  color:#e5484d;
  font-weight:800;
}
.variant-pill:not(.on):not(.is-unavailable):hover{
  background:var(--card);
  border-color:#d3d9dd;
}
.variant-pill.on{
  background:var(--card);
  border:1px solid #e5484d;
  box-shadow:none;
}
.variant-pill.on .vp-name{
  color:var(--ink);
  font-weight:650;
}
.variant-pill.on .vp-price{
  color:#e5484d;
  font-weight:800;
}
@media(max-width:767px){
  .variant-pill{
    min-width:0;
    padding:2px 14px;
  }
}

/* ============================================================
   Warranty / returns policy presentation — production refresh
   ============================================================ */
.warranty-page-layout{align-items:start}
.warranty-page-card{
  overflow:hidden;border:1px solid #e1e9ec;border-radius:20px;background:#fff;
  box-shadow:0 14px 42px rgba(28,48,58,.08)
}
.warranty-page-card>.art-head{
  position:relative;margin:0;padding:26px 28px 24px 92px;border-bottom:1px solid #dfeceb;
  background:linear-gradient(135deg,#eefaf8 0%,#f8fcff 62%,#fff8f1 100%)
}
.warranty-page-card>.art-head::before{
  content:"✓";position:absolute;left:28px;top:50%;display:grid;width:48px;height:48px;place-items:center;
  transform:translateY(-50%);border-radius:15px;background:#079b87;color:#fff;font-size:24px;font-weight:900;
  box-shadow:0 10px 24px rgba(7,155,135,.2)
}
.warranty-page-card>.art-head::after{
  content:"";position:absolute;right:-30px;top:-58px;width:160px;height:160px;border:28px solid rgba(7,155,135,.055);
  border-radius:50%;pointer-events:none
}
.warranty-page-card>.art-head .static-page-kicker{position:relative;z-index:1;color:#078777}
.warranty-page-card>.art-head h1{position:relative;z-index:1;margin-top:4px;font-size:clamp(25px,3vw,34px);letter-spacing:-.035em}
.warranty-page-card>.art-body{padding:26px 28px 6px!important}
.warranty-page-card>.art-foot{margin-top:8px;border-top:1px solid #e8edef;background:#fbfdfd}

.warranty-page-card .warranty-policy{
  --warranty-green:#078f7e;--warranty-green-dark:#087166;--warranty-green-soft:#e8f8f4;
  --warranty-orange:#e77827;--warranty-orange-dark:#b95213;--warranty-orange-soft:#fff1e6;
  color:#334a53
}
.warranty-page-card .warranty-hero{
  margin-bottom:16px;padding:21px 22px;border-color:#cce9e3;border-radius:16px;
  background:linear-gradient(135deg,#eaf9f5,#f9fdfc 65%,#fff6ed)
}
.warranty-page-card .warranty-quick-grid{gap:12px;margin-bottom:28px}
.warranty-page-card .warranty-quick-item{
  min-height:132px;padding:17px 16px 16px 52px;border-color:#dde9e8;border-radius:14px;
  box-shadow:0 5px 18px rgba(33,57,65,.045);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.warranty-page-card .warranty-quick-item:hover{
  transform:translateY(-2px);border-color:#bcded8;box-shadow:0 10px 24px rgba(27,83,75,.08)
}
.warranty-page-card .warranty-quick-number{top:17px;left:15px;border-radius:50%}
.warranty-page-card .warranty-compare{gap:18px;margin:22px 0 25px}
.warranty-page-card .warranty-status-card{border-radius:16px;box-shadow:0 10px 30px rgba(24,45,54,.075)}
.warranty-page-card .warranty-status-head{min-height:54px;padding:14px 18px;background:linear-gradient(135deg,var(--warranty-green),var(--warranty-green-dark))}
.warranty-page-card .is-excluded .warranty-status-head{background:linear-gradient(135deg,var(--warranty-orange),var(--warranty-orange-dark))}
.warranty-page-card .warranty-status-list{padding:17px 19px 19px!important}
.warranty-page-card .warranty-status-list li{padding-top:7px;padding-bottom:7px;border-bottom:1px dashed #edf1f2}
.warranty-page-card .warranty-status-list li:last-child{border-bottom:0}
.warranty-page-card .warranty-support-note{border-radius:14px;box-shadow:0 5px 18px rgba(129,82,34,.05)}
.warranty-page-card .warranty-policy>h2{
  position:relative;margin:30px 0 13px!important;padding-left:16px;font-size:clamp(20px,2vw,25px)!important;letter-spacing:-.025em
}
.warranty-page-card .warranty-policy>h2::before{
  content:"";position:absolute;left:0;top:.15em;width:5px;height:1.1em;border-radius:99px;background:var(--warranty-green)
}
.warranty-page-card .warranty-service-grid{gap:12px;margin-top:15px}
.warranty-page-card .warranty-service-card{
  min-height:128px;padding:17px;border-color:#dce9e7;border-radius:14px;background:linear-gradient(180deg,#fbfefe,#f5fbfa)
}
.warranty-page-card .warranty-service-card b{font-size:15px;color:#123d3a}
.warranty-page-card .guide-steps{counter-reset:warranty-step;margin:12px 0 24px;padding:0;list-style:none}
.warranty-page-card .guide-steps li{
  counter-increment:warranty-step;position:relative;margin:0 0 10px;padding:14px 15px 14px 50px;border:1px solid #e0e9eb;
  border-radius:13px;background:#fff;line-height:1.6
}
.warranty-page-card .guide-steps li::before{
  content:counter(warranty-step);position:absolute;left:14px;top:13px;display:grid;width:25px;height:25px;place-items:center;
  border-radius:50%;background:var(--warranty-green-soft);color:var(--warranty-green-dark);font-size:11px;font-weight:850
}
.warranty-page-card .warranty-contact{
  padding:19px 20px;border-radius:15px;background:linear-gradient(135deg,#17343d,#102a32);box-shadow:0 12px 28px rgba(15,39,47,.14)
}
.warranty-page-card .warranty-contact a{min-height:42px;padding-inline:18px;background:#0ba18e;transition:background .16s ease,transform .16s ease}
.warranty-page-card .warranty-contact a:hover{background:#087d70;transform:translateY(-1px)}
.warranty-page-card+.static-page-sidebar .policy-nav-card{border-top:4px solid #079b87}
.warranty-page-card+.static-page-sidebar .policy-help-card{background:linear-gradient(145deg,#f0faf8,#fff)}
.warranty-page-card .guide-note{
  margin:20px 0 0;padding:15px 17px;border:1px solid #efd9c6;border-radius:13px;background:#fff8f1;color:#6c4c34;line-height:1.65
}

@media(max-width:900px){
  .warranty-page-card>.art-head{padding:22px 20px 21px 79px}
  .warranty-page-card>.art-head::before{left:20px;width:43px;height:43px;border-radius:13px;font-size:21px}
  .warranty-page-card>.art-body{padding:20px 20px 4px!important}
}
@media(max-width:760px){
  .warranty-page-card{border-radius:15px}
  .warranty-page-card>.art-head{padding:18px 15px 17px 64px}
  .warranty-page-card>.art-head::before{left:14px;width:38px;height:38px;border-radius:12px;font-size:19px}
  .warranty-page-card>.art-head h1{font-size:22px;line-height:1.28}
  .warranty-page-card>.art-body{padding:15px 13px 2px!important}
  .warranty-page-card .warranty-hero{grid-template-columns:42px minmax(0,1fr);padding:15px 13px}
  .warranty-page-card .warranty-shield{width:42px;height:42px;border-radius:13px;font-size:20px}
  .warranty-page-card .warranty-quick-item,.warranty-page-card .warranty-service-card{min-height:0}
  .warranty-page-card .warranty-status-list{padding:14px 14px 15px!important}
  .warranty-page-card .warranty-policy>h2{margin-top:25px!important;font-size:20px!important}
  .warranty-page-card .guide-steps li{padding:13px 12px 13px 46px}
  .warranty-page-card .warranty-contact{padding:16px}
}

/* ============================================================
   Warranty policy V2 — modern, scannable and accessible
   ============================================================ */
.warranty-page-layout{
  grid-template-columns:minmax(0,1fr) 300px;
  gap:34px;
  align-items:start;
  padding-bottom:60px;
}
.warranty-page-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #dfe7ea;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 30px rgba(24,48,58,.055);
}
.warranty-page-card>.art-head{
  margin:0;
  padding:26px 28px 22px;
  border-bottom:1px solid #e2eaed;
  background:#fff;
}
.warranty-page-card>.art-head::before,
.warranty-page-card>.art-head::after{display:none}
.warranty-page-card>.art-head .static-page-kicker{
  margin-bottom:8px;
  padding:5px 10px;
  background:#e7f7f4;
  color:#057a6b;
  font-size:10.5px;
  letter-spacing:.075em;
}
.warranty-page-card>.art-head h1{
  margin:0;
  color:#18303a;
  font-size:clamp(26px,2.6vw,32px);
  line-height:1.18;
  letter-spacing:-.035em;
}
.warranty-page-card>.art-body{padding:26px 28px 8px!important}
.warranty-page-card>.art-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:10px;
  padding:18px 28px;
  border-top:1px solid #e5ecef;
  background:#fbfdfd;
}
.warranty-page-card>.art-foot p{margin:0;color:#53666e}
.warranty-page-card>.art-foot b{color:#18303a}
.warranty-page-card>.art-foot .btn{min-height:42px;border-radius:11px}

.warranty-policy{
  --warranty-ink:#18303a;
  --warranty-copy:#53666e;
  --warranty-teal:#069b87;
  --warranty-teal-dark:#057b6c;
  --warranty-teal-soft:#e8f8f5;
  --warranty-orange:#e97a27;
  --warranty-orange-dark:#bd5919;
  --warranty-orange-soft:#fff2e8;
  color:var(--warranty-copy);
}
.warranty-policy h2,.warranty-policy h3{color:var(--warranty-ink)}
.warranty-policy p{overflow-wrap:anywhere}
.warranty-policy svg{display:block;width:1em;height:1em}

.warranty-hero{
  position:relative;
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:16px;
  margin:0 0 18px;
  padding:21px 22px;
  overflow:hidden;
  border:1px solid #cce8e3;
  border-radius:16px;
  background:linear-gradient(135deg,#e9f9f5 0%,#fbfefd 62%,#fff4e9 100%);
}
.warranty-hero::after{
  content:"";
  position:absolute;
  right:-62px;
  bottom:-98px;
  width:210px;
  height:210px;
  border:32px solid rgba(6,155,135,.055);
  border-radius:50%;
  pointer-events:none;
}
.warranty-shield{
  position:relative;
  z-index:1;
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  border-radius:18px;
  background:var(--warranty-teal);
  color:#fff;
  box-shadow:0 10px 24px rgba(6,155,135,.2);
}
.warranty-shield svg{width:28px;height:28px}
.warranty-hero-copy{position:relative;z-index:1;min-width:0}
.warranty-eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--warranty-teal-dark);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.page-content .warranty-hero h2{
  margin:0 0 5px;
  font-size:clamp(20px,2vw,24px);
  line-height:1.28;
  letter-spacing:-.025em;
}
.warranty-hero p{margin:0;color:#475d65;line-height:1.62}
.warranty-hero .warranty-important-note{
  margin-top:8px;
  color:#d92d20;
  font-size:12.5px;
  line-height:1.5;
  font-weight:500;
}
.warranty-hero .warranty-important-note strong{color:#b42318}

.warranty-quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 28px;
}
.warranty-quick-item{
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  align-items:start;
  gap:10px;
  min-height:132px;
  padding:15px;
  border:1px solid #dce8e8;
  border-radius:13px;
  background:#fff;
  box-shadow:0 4px 14px rgba(24,48,58,.035);
}
.warranty-quick-number{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border-radius:9px;
  background:var(--warranty-teal-soft);
  color:var(--warranty-teal-dark);
  font-size:10px;
  font-weight:850;
}
.page-content .warranty-quick-item h3{
  margin:1px 0 4px;
  font-size:14px;
  line-height:1.35;
}
.warranty-quick-item p{margin:0;font-size:13px;line-height:1.56}

.page-content .warranty-section-title{
  position:relative;
  margin:28px 0 14px;
  padding-left:15px;
  font-size:clamp(20px,2vw,24px);
  line-height:1.3;
  letter-spacing:-.025em;
}
.page-content .warranty-section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:.16em;
  width:5px;
  height:1.05em;
  border-radius:99px;
  background:var(--warranty-teal);
}
.warranty-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0 0 20px;
}
.warranty-status-card{
  min-width:0;
  overflow:hidden;
  border:1px solid #dce7e8;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 24px rgba(24,48,58,.055);
}
.warranty-status-head{
  display:flex;
  min-height:54px;
  align-items:center;
  gap:10px;
  padding:13px 17px;
  background:var(--warranty-teal);
  color:#fff;
}
.warranty-status-card.is-excluded .warranty-status-head{background:var(--warranty-orange)}
.warranty-status-mark{
  display:grid;
  flex:0 0 27px;
  width:27px;
  height:27px;
  place-items:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:rgba(255,255,255,.15);
}
.warranty-status-mark svg{width:15px;height:15px}
.page-content .warranty-status-head h3{
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:1.35;
}
.page-content .warranty-status-list{
  margin:0;
  padding:15px 17px 17px;
  list-style:none;
}
.warranty-status-list li{
  position:relative;
  margin:0;
  padding:7px 0 7px 27px;
  border-bottom:1px dashed #edf1f2;
  color:#42575f;
  line-height:1.55;
}
.warranty-status-list li:last-child{border-bottom:0}
.warranty-status-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:8px;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border-radius:50%;
  background:var(--warranty-teal-soft);
  color:var(--warranty-teal-dark);
  font-size:10px;
  font-weight:900;
}
.is-excluded .warranty-status-list li::before{
  content:"×";
  background:var(--warranty-orange-soft);
  color:var(--warranty-orange);
  font-size:14px;
}

.warranty-support-note{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:start;
  gap:11px;
  margin:0 0 26px;
  padding:14px 16px;
  border:1px solid #efd9c5;
  border-radius:12px;
  background:#fff8f1;
  color:#6b4d36;
}
.warranty-support-note>span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  background:var(--warranty-orange-soft);
  color:var(--warranty-orange);
}
.warranty-support-note>span svg{width:17px;height:17px}
.warranty-support-note p{margin:2px 0 0;line-height:1.6}
.warranty-support-note strong{color:#644229}

.warranty-service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 18px;
}
.warranty-service-card{
  min-width:0;
  min-height:160px;
  padding:15px;
  border:1px solid #dce8e8;
  border-radius:13px;
  background:#f8fbfb;
}
.warranty-service-icon{
  display:grid;
  width:34px;
  height:34px;
  margin-bottom:10px;
  place-items:center;
  border-radius:10px;
  background:var(--warranty-teal-soft);
  color:var(--warranty-teal-dark);
}
.warranty-service-icon svg{width:18px;height:18px}
.page-content .warranty-service-card h3{margin:0 0 5px;font-size:14.5px}
.warranty-service-card p{margin:0;font-size:13px;line-height:1.58}
.warranty-copy{
  padding:2px 2px 0;
  color:#4e626a;
}
.warranty-copy p{margin:0 0 10px;line-height:1.68}

.warranty-process-list{
  display:grid;
  gap:10px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.warranty-process-list li{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:start;
  gap:12px;
  padding:14px 15px;
  border:1px solid #e0e8eb;
  border-radius:13px;
  background:#fff;
}
.warranty-step-number{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px;
  background:var(--warranty-orange-soft);
  color:var(--warranty-orange-dark);
  font-size:11px;
  font-weight:850;
}
.page-content .warranty-process-list h3{margin:0 0 3px;font-size:15px}
.warranty-process-list p{margin:0;line-height:1.58}

.warranty-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:19px 20px;
  border-radius:14px;
  background:#18303a;
  color:#fff;
}
.page-content .warranty-contact h2{margin:0 0 4px;color:#fff;font-size:18px}
.warranty-contact p{margin:0;color:rgba(255,255,255,.78);font-size:13px;line-height:1.55}
.warranty-contact a{
  display:inline-flex;
  min-height:44px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 17px;
  border-radius:999px;
  background:var(--warranty-teal);
  color:#fff;
  font-weight:800;
  white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}
.warranty-contact a:hover{background:var(--warranty-teal-dark);transform:translateY(-1px)}
.warranty-contact a:focus-visible,
.policy-nav-link:focus-visible,
.policy-help-card .btn:focus-visible,
.warranty-page-card>.art-foot .btn:focus-visible{
  outline:3px solid rgba(6,155,135,.28);
  outline-offset:3px;
}
.warranty-contact a svg{width:17px;height:17px}

.warranty-page-layout>.static-page-sidebar{width:100%;min-width:0}
.warranty-page-layout .policy-nav-card,
.warranty-page-layout .policy-help-card{
  border:1px solid #e0e8eb;
  border-radius:15px;
  box-shadow:0 7px 22px rgba(24,48,58,.045);
}
.warranty-page-layout .policy-nav-card{border-top:1px solid #e0e8eb}
.warranty-page-layout .policy-nav-card h4,
.warranty-page-layout .policy-help-card h4{color:#18303a}
.warranty-page-layout .policy-nav-link{
  min-height:62px;
  border-color:#e1e9eb;
  border-radius:12px;
}
.warranty-page-layout .policy-nav-link:hover{
  border-color:#a9d8d0;
  background:#f0faf7;
  transform:translateY(-1px);
}
.warranty-page-layout .policy-nav-link.is-current{
  border-color:#87cfc3;
  background:#eaf8f5;
  box-shadow:inset 3px 0 0 var(--warranty-teal);
}
.warranty-page-layout .policy-nav-link.is-current .policy-nav-icon{
  background:var(--warranty-teal);
  color:#fff;
}
.warranty-page-layout .policy-nav-icon{flex:none}
.warranty-page-layout .policy-nav-icon svg{width:18px;height:18px}
.warranty-page-layout .policy-help-card{background:linear-gradient(145deg,#eaf9f5,#fff4e9)}
.warranty-page-layout .policy-help-icon{background:#18303a}
.warranty-page-layout .policy-help-card .btn{
  min-height:43px;
  border-radius:11px;
  background:var(--warranty-teal,#069b87);
  color:#fff;
}
.warranty-page-layout .policy-help-card .btn:hover{background:var(--warranty-teal-dark,#057b6c);color:#fff}

@media(max-width:1024px){
  .warranty-page-layout{grid-template-columns:1fr;gap:24px}
  .warranty-page-layout>.static-page-sidebar{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:18px}
}
@media(max-width:760px){
  .warranty-page-card{border-radius:15px}
  .warranty-page-card>.art-head{padding:19px 17px 17px}
  .warranty-page-card>.art-head h1{font-size:24px}
  .warranty-page-card>.art-body{padding:17px 14px 5px!important}
  .warranty-page-card>.art-foot{align-items:stretch;flex-direction:column;padding:16px 17px}
  .warranty-page-card>.art-foot .btn{width:100%}
  .warranty-hero{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:16px 14px}
  .warranty-shield{width:48px;height:48px;border-radius:15px}
  .warranty-shield svg{width:23px;height:23px}
  .page-content .warranty-hero h2{font-size:19px}
  .warranty-quick-grid,.warranty-service-grid,.warranty-compare{grid-template-columns:1fr}
  .warranty-quick-item,.warranty-service-card{min-height:0}
  .page-content .warranty-section-title{margin-top:25px;font-size:20px}
  .warranty-status-head{padding:13px 14px}
  .page-content .warranty-status-list{padding:13px 14px 15px}
  .warranty-contact{align-items:stretch;flex-direction:column;padding:17px}
  .warranty-contact a{width:100%}
  .warranty-page-layout>.static-page-sidebar{grid-template-columns:1fr}
}
@media(max-width:420px){
  .warranty-page-card>.art-head h1{font-size:22px}
  .warranty-hero{grid-template-columns:42px minmax(0,1fr)}
  .warranty-shield{width:42px;height:42px;border-radius:13px}
  .warranty-process-list li{grid-template-columns:32px minmax(0,1fr);gap:10px;padding:13px 12px}
  .warranty-step-number{width:32px;height:32px}
}

/* Warranty page hotfix 2026-08-03
   - Keep quick-card copy in the flexible second grid column.
   - Remove the inherited article heading border so section titles have one marker only. */
.warranty-page-card .warranty-quick-item{
  grid-template-columns:29px minmax(0,1fr);
  padding:15px;
}
.warranty-page-card .warranty-quick-number{
  position:static;
  inset:auto;
  grid-column:1;
  grid-row:1;
}
.warranty-page-card .warranty-quick-item>div{
  min-width:0;
  grid-column:2;
  grid-row:1;
}
.warranty-page-card .warranty-quick-item h3,
.warranty-page-card .warranty-quick-item p{
  word-break:normal;
  overflow-wrap:break-word;
}
.warranty-page-card .warranty-section-title{
  border-left:0;
}
@media(max-width:760px){
  .warranty-page-card .warranty-quick-item{padding:13px}
}


/* Warranty / header finishing fixes 2026-08-03 */
.warranty-page-card .is-excluded .warranty-status-list li::before{
  content:"";
  background-color:var(--warranty-orange-soft);
  background-image:
    linear-gradient(45deg,transparent 42%,currentColor 43% 57%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,currentColor 43% 57%,transparent 58%);
  background-position:center;
  background-repeat:no-repeat;
  background-size:9px 9px;
  color:var(--warranty-orange);
  line-height:1;
}
.wishlist-header .wishlist-heart-icon{
  display:block;
  width:17px;
  height:17px;
  flex:0 0 17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* 2026-08-03: reduced corner radius for every clickable button. */
button,
.btn{
  border-radius:6px!important;
}

/* Four-step buying flow on the ordering guide page. */
.order-progress{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:22px 0 34px;
  padding:24px 12px 18px;
  list-style:none;
  border:1px solid #e5ecef;
  border-radius:10px;
  background:#f8fafb;
}
.order-progress li{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  flex-direction:column;
  padding:0 12px;
  color:#94a1a9;
  text-align:center;
}
.order-progress li:not(:last-child)::after{
  content:"";
  position:absolute;
  top:21px;
  left:calc(50% + 35px);
  width:calc(100% - 70px);
  height:1px;
  background:#d8e0e4;
}
.order-progress-number{
  position:relative;
  z-index:1;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  margin-bottom:9px;
  border:1px solid #dbe3e7;
  border-radius:50%;
  background:#fff;
  color:#8b99a2;
  font-size:15px;
  font-weight:750;
  box-shadow:0 4px 12px rgba(18,35,46,.05);
}
.order-progress b{color:#71818a;font-size:13px;line-height:1.25}
.order-progress small{margin-top:5px;color:#8998a1;font-size:10.5px;line-height:1.4}
.order-progress .is-active{color:#009b8d}
.order-progress .is-active .order-progress-number{
  border:3px solid #fff;
  background:#0bb7aa;
  color:#fff;
  box-shadow:0 0 0 2px #8edbd4,0 0 0 9px #fff0e5,0 6px 16px rgba(0,184,169,.18);
}
.order-progress .is-active b{color:#008f83}
@media(max-width:640px){
  .order-progress{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding:24px 8px 20px}
  .order-progress li:nth-child(2)::after{display:none}
  .order-progress li:not(:last-child)::after{left:calc(50% + 31px);width:calc(100% - 62px)}
  .order-progress small{max-width:150px}
}

/* Alignment classes emitted by the admin rich editor. */
.ha-text-center{text-align:center}
.ha-text-left{text-align:left}


/* Images inserted from the product editor: fixed 600px target, responsive and centered. */
.pdp-desc .page-content figure.ha-product-content-image,
.product-detail-content .page-content figure.ha-product-content-image{
  display:block;
  float:none;
  clear:both;
  width:600px;
  max-width:100%;
  margin:20px auto;
  text-align:center;
}
.pdp-desc .page-content figure.ha-product-content-image picture,
.product-detail-content .page-content figure.ha-product-content-image picture{display:block;width:100%}
.pdp-desc .page-content figure.ha-product-content-image img,
.product-detail-content .page-content figure.ha-product-content-image img{
  display:block;
  width:600px;
  max-width:100%;
  height:auto;
  margin:0 auto!important;
}

/* Width presets saved by the product description editor. */
.pdp-desc .page-content figure.ha-product-content-image.ha-width-240,
.product-detail-content .page-content figure.ha-product-content-image.ha-width-240{width:240px}
.pdp-desc .page-content figure.ha-product-content-image.ha-width-320,
.product-detail-content .page-content figure.ha-product-content-image.ha-width-320{width:320px}
.pdp-desc .page-content figure.ha-product-content-image.ha-width-450,
.product-detail-content .page-content figure.ha-product-content-image.ha-width-450{width:450px}
.pdp-desc .page-content figure.ha-product-content-image.ha-width-600,
.product-detail-content .page-content figure.ha-product-content-image.ha-width-600{width:600px}
.pdp-desc .page-content figure.ha-product-content-image.ha-width-full,
.product-detail-content .page-content figure.ha-product-content-image.ha-width-full{width:100%}
.pdp-desc .page-content figure.ha-product-content-image img,
.product-detail-content .page-content figure.ha-product-content-image img{width:100%;max-width:100%}
/* Tiêu đề lớn trong mô tả chi tiết sản phẩm */
/* H2 mô tả chi tiết sản phẩm */
.pdp-desc .page-content h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 30px 0 16px;
    padding: 0;
    border: 0;
    color: var(--ink, #18303a);
    font-size: calc(22px + var(--font-bump, 0px));
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.pdp-desc .page-content h2::before {
    content: "";
    flex: 0 0 3px;
    width: 3px;
    height: 1em;
    border-radius: 3px;
    background: var(--teal, #069b87);
}

@media (max-width: 768px) {
    .pdp-desc .page-content h2 {
        gap: 7px;
        margin: 25px 0 13px;
        font-size: calc(19px + var(--font-bump, 0px));
    }
}
/* 2026-08-08: unified image captions in article/product content.
   Captions stay secondary: 12px, italic, centered, light grey,
   directly below the image. */
.page-content figure > figcaption,
.page-content figure.wp-caption > figcaption,
.page-content .wp-caption-text,
.page-content .image-caption,
.page-content .ha-image-caption,
.pdp-desc .page-content figure > figcaption,
.product-detail-content .page-content figure > figcaption{
  display:block;
  width:100%;
  margin:6px auto 0!important;
  padding:0 6px;
  color:#9aa5ab!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-style:italic!important;
  font-weight:400!important;
  text-align:center!important;
  letter-spacing:0;
}
.page-content figure > figcaption a,
.page-content .wp-caption-text a,
.page-content .image-caption a,
.page-content .ha-image-caption a{
  color:inherit!important;
  font:inherit;
}
.pdp-share-icon.is-auto{background:#4b6670}.pdp-share-icon.is-auto svg{width:14px;height:14px}