/* ============ FONT ============
   XIXA dùng DUY NHẤT một bộ chữ: Google Sans Flex (font biến thiên, tự lưu trên
   máy chủ tại /fonts/google_sans_flex/). Mọi nơi lấy qua biến --font ở phần
   VARIABLES bên dưới — trang web, trang quản trị (/admin/admin.css khai báo lại
   y hệt) và nội dung do quản trị soạn.
   Đổi font toàn site = sửa đúng biến --font (và bản sao trong admin.css).
   Ngoại lệ DUY NHẤT là mấy ô nhập mã / mã nguồn (pre, code, ô sửa HTML, ô mã
   SKU, ô JSON) vẫn dùng font đều nét để canh cột và phân biệt 0 với O.
   ============================== */
@font-face {
  font-family: "Google Sans Flex";
  src: url("/fonts/google_sans_flex/googlesansflex-variablefont_grad,rond,opsz,slnt,wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* ============ A11Y / SEO ============ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ VARIABLES ============ */
:root {
  --green: #2f7d32;          /* primary brand green */
  --green-deep: #006600;     /* headings */
  --green-dark: #245d27;     /* footer bottom bar */
  --green-lime: #53a100;     /* nav active / accents */
  --green-lime2: #8fd14f;
  --green-light: #cfecac;    /* section bg */
  --green-soft: #e6f4d2;     /* cards */
  --blue: #5bb4e5;
  --pink: #f17075;
  --orange: #f3a420;
  --yellow: #a1ca3a;
  --gray: #606161;
  --ink: #1f2421;
  --muted: #6b7280;
  --line: #e7ebe4;
  --bg-soft: #f6f8f4;        /* nền nhạt: đầu bảng, khối trích dẫn, khối mã */
  --hero1: #c9c1f2;
  --hero2: #aab6f4;
  --hero3: #c7e0f7;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(31, 71, 35, .10);
  --shadow-lg: 0 18px 50px rgba(31, 71, 35, .16);
  --maxw: 1700px;
  --font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============ RESET ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Tắt lớp phủ xám/đen khi chạm nút, ảnh, link trên mobile (iOS/Android) */
a, button, img, input, textarea, select, label, [role="button"], .swatch, .prod-card {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* Ô nhập, ô chọn, vùng soạn thảo mặc định KHÔNG thừa hưởng font của trang —
   trình duyệt tự gán Arial. Khai báo một lần ở đây để cả site chỉ còn một font,
   khỏi phải vá 'font-family: inherit' cho từng thành phần. */
input, select, textarea, optgroup, option { font-family: inherit; }
ul { list-style: none; }
.mobile-only { display: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.green-title {
  color: var(--green-deep);
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ============ TOP BAR ============ */
.topbar {
  background: var(--green);
  color: #eaf6e9;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 101;
  overflow: hidden;
  transition: transform .3s ease;
}
.topbar .tb-arrow {
  display: none;
  color: #cfeac9;
  font-size: 20px;
  padding: 0 14px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.topbar .tb-track {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.topbar .tb-track span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-shrink: 0;
  animation: tbslide 9s infinite;
}
@keyframes tbslide {
  0%, 28% { transform: translateY(0); }
  33%, 61% { transform: translateY(-100%); }
  66%, 94% { transform: translateY(-200%); }
  100% { transform: translateY(-300%); }
}

/* ============ HEADER ============ */
.header {
  position: sticky;
  top: 38px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s, background .3s, transform .3s ease, opacity .3s ease;
  will-change: transform, opacity;
}
.header .container {
  max-width: 100%;
  padding: 0 40px;
}
.header.scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
body.sticky-product-active .topbar {
  transform: translateY(-100%);
}
body.sticky-product-active .header {
  transform: translateY(-150px);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header .inner {
  height: 72px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo { display: flex; align-items: center; }
.logo img { height: 30px; }
.nav { display: flex; gap: 34px; margin: 0 auto; }
.nav a {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  position: relative;
  padding: 6px 0;
  color: #2b2f2c;
  transition: color .2s;
}
.nav a.active { color: var(--green-lime); }
/* Đang ở trang SALE -> mục SALE dùng màu cam của chương trình thay vì xanh */
.nav a.active[href="/sale"] { color: #e44c0f; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--green-lime);
  transition: width .25s ease;
}
.nav a:hover { color: var(--green-lime); }
.nav a:hover::after { width: 100%; }

/* ===== Mega menu (desktop nav dropdowns) ===== */
.nav { align-items: stretch; }
.nav-item { display: flex; align-items: center; height: 72px; position: static; }
.nav-item > a { display: inline-flex; align-items: center; }

.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none; border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 30px 50px rgba(0,0,0,.16);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity .26s ease, transform .3s cubic-bezier(.4,.9,.3,1), visibility .26s;
  z-index: 90; overflow: hidden;
}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-inner {
  max-width: 1040px; margin: 0 auto;
  padding: 30px 34px 24px;
  display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 34px;
}
.mega-col h4 {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 12px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.mega-col h4 svg { width: 13px; height: 13px; color: var(--green-lime); }
.mega-col a.ml {
  display: block; padding: 8px 0 8px 0; font-size: 14.5px; font-weight: 600;
  color: #3d453e; position: relative; transition: color .18s, padding-left .18s;
}
.mega-col a.ml::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0);
  width: 5px; height: 5px; border-radius: 50%; background: var(--green-lime); transition: transform .18s;
}
.mega-col a.ml:hover { color: var(--green-deep); padding-left: 13px; }
.mega-col a.ml:hover::before { transform: translateY(-50%) scale(1); }
.mega-col a.ml .mn { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 1px; }

.mega-promo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mega-card {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 176px;
  display: flex; align-items: flex-end; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}
.mega-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mega-card:hover img { transform: scale(1.06); }
.mega-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(20,40,20,.8) 100%); }
.mega-card-body { position: relative; z-index: 2; padding: 15px 16px; }
.mega-card-kicker { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #dff2c8; margin-bottom: 4px; }
.mega-card-title { display: block; color: #fff; font-size: 16.5px; font-weight: 800; line-height: 1.15; }
.mega-card-cta { display: inline-flex; margin-top: 8px; font-size: 11.5px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .2s; }
.mega-card:hover .mega-card-cta { border-bottom-color: var(--green-lime2); }

/* Card lớn duy nhất (mega GIÀY CHÂN BẸT) */
.mega-promo--single { grid-template-columns: 1fr; }
.mega-card--wide { min-height: 214px; }
.mega-card-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; width: 100%; }
.mega-card-row .mega-card-title { font-size: 18px; letter-spacing: .4px; }
.mega-card-circle { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #1e2b1e; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: transform .25s; }
.mega-card-circle svg { width: 15px; height: 15px; }
.mega-card--wide:hover .mega-card-circle { transform: translateX(4px); }

.mega-foot {
  grid-column: 1 / -1; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.mega-foot .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.mega-foot a {
  font-size: 13.5px; font-weight: 700; color: #3d453e; padding: 7px 15px;
  border: 1.5px solid var(--line); border-radius: 999px; transition: color .18s, background .18s, border-color .18s;
}
.mega-foot a:hover { color: #fff; background: var(--green); border-color: var(--green); }
.mega-foot a::after { display: none; }

.mega-backdrop {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--mega-top, 111px);
  background: rgba(12,18,12,.6);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
  /* Phải cao hơn thanh công cụ dính của trang danh mục (.collection .col-head,
     z-index 97), nếu không mở menu lớn thì cả trang mờ đi nhưng riêng thanh
     "13 kết quả / Mặc định / Bộ lọc" vẫn sáng trưng nổi lên trên. Vẫn thấp hơn
     .header (100) nên menu lớn vẫn nằm trên lớp mờ. */
  z-index: 98; pointer-events: none;
}
body.mega-open .mega-backdrop { opacity: 1; visibility: visible; }

.header-icons { display: flex; align-items: center; gap: 18px; }
.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #2b2f2c;
  transition: background .2s, transform .2s, color .2s;
}
.icon-btn:hover { background: var(--green-soft); color: var(--green); transform: translateY(-2px); }
.icon-btn svg { width: 22px; height: 22px; }
.hamburger { display: none; }

/* ============ HERO ============ */
.hero {
  position: relative;
  background: linear-gradient(120deg, var(--hero1) 0%, var(--hero2) 45%, var(--hero3) 100%);
  overflow: hidden;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slides {
  position: relative;
  width: 100%;
  z-index: 2;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero-slide:first-child { position: relative; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide a { display: block; }
.hero-banner {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 2;
}
.hero-slide:first-child .hero-banner { height: auto; }
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.hero-dots span.active {
  background: #fff;
  transform: scale(1.2);
}

/* ============ X LOADER (đang tải sản phẩm) ============ */
.x-loader {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 0;
}
.x-loader .xl-mark {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* vòng tròn loading quay quanh logo */
.x-loader .xl-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--green-soft, #e6f4d2);
  border-top-color: var(--green, #2f7d32);
  animation: xlSpin .9s linear infinite;
}
.x-loader svg {
  width: 46px;
  height: 46px;
  animation: xlBeat 1.3s ease-in-out infinite;
}
.x-loader .xl-arm {
  fill: var(--green, #2f7d32);
}
@keyframes xlSpin { to { transform: rotate(360deg); } }
@keyframes xlBeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
.x-loader .xl-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--green, #2f7d32);
}
.x-loader .xl-text::after {
  content: "";
  animation: xlDots 1.4s steps(1, end) infinite;
}
@keyframes xlDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
/* lớp phủ loading toàn màn hình khi bấm vào sản phẩm */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nền đục hoàn toàn: trước đây để rgba(...,.94) nên phần nội dung server
     render sẵn (tên + mô tả sản phẩm) hiện mờ xuyên qua lúc đang tải. */
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.page-loader.show { opacity: 1; visibility: visible; }
.page-loader .x-loader { padding: 0; }
@keyframes heroFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
/* decorative floating dots */
.hero .spark {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  filter: blur(1px);
  opacity: .7;
  animation: floaty 7s ease-in-out infinite;
}
.hero .spark.s1 { width: 16px; height: 16px; background: #fff; top: 22%; left: 12%; }
.hero .spark.s2 { width: 10px; height: 10px; background: #fde68a; top: 30%; left: 30%; animation-delay: 1.5s; }
.hero .spark.s3 { width: 14px; height: 14px; background: #fff; top: 18%; right: 16%; animation-delay: 2.5s; }
.hero .spark.s4 { width: 9px; height: 9px; background: #f9a8d4; top: 60%; right: 10%; animation-delay: .8s; }
@keyframes floaty {
  0%,100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(8px); }
}

/* ============ SECTION HELPERS ============ */
section { position: relative; }
.section-pad { padding: 70px 0; }
.center { text-align: center; }
h2.section-h {
  font-size: 30px;
  font-weight: 800;
  color: var(--green-deep);
  text-align: center;
}
.section-sub {
  text-align: center;
  color: var(--muted);
  margin-top: 10px;
  font-size: 15px;
}

/* ============ FOOTFIT ============ */
.footlab { padding: 80px 0 70px; background: #fff; }
.footlab .container { max-width: 1800px; }
.footlab h2 { font-size: 30px; }
.footlab-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
  margin: 40px auto 0;
  /* 1800px làm hai cột chữ bị đẩy sát mép màn hình, cách ảnh giày một khoảng
     trống rất lớn. Thu lại để chữ nằm gần ảnh, đường nối nét đứt cũng ngắn và
     dễ theo dõi hơn (đường nối do JS vẽ theo vị trí thật nên tự co lại). */
  max-width: 1320px;
  container-type: inline-size;
}
.fl-col { display: flex; flex-direction: column; gap: 56px; position: relative; }
.fl-col.left { text-align: left; align-items: flex-start; }
.fl-col.right { text-align: left; align-items: flex-end; }

@media (min-width: 1081px) {
  .footlab-grid {
    align-items: stretch;
  }
  .footlab .fl-col {
    position: relative;
  }
  .footlab .sole-wrapper {
    width: clamp(430px, 33vw, 500px);
  }
  .footlab .fl-feature {
    position: absolute;
    width: 100%;
    max-width: 300px;
  }
  .footlab .fl-feature .fl-ic {
    width: 74px;
    height: 58px;
    margin-bottom: 8px;
  }
  .footlab .fl-feature img {
    height: 56px;
  }
  .footlab .fl-feature h4 {
    font-size: 19px;
    margin-bottom: 6px;
  }
  .footlab .fl-feature p {
    font-size: 14px;
    line-height: 1.5;
  }
}
.fl-feature { max-width: 290px; position: relative; }
.fl-feature .fl-ic {
  width: 70px; height: 58px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-end;
}
.fl-col.left .fl-ic { margin-left: 0; }
.fl-feature img { height: 54px; width: auto; object-fit: contain; }
.fl-feature h4 { color: var(--green-deep); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.fl-feature p { color: var(--muted); font-size: 14px; }

/* dashed connector lines toward the sole are drawn dynamically using SVG and JS */

/* Sole markers */
.sole-marker {
  position: absolute;
  border: 2px dashed #2f7d32;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  display: none;
}

@media (min-width: 1081px) {
  .sole-marker {
    display: block;
  }
}

.sole-marker.marker-toe {
  width: 40px;
  height: 40px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(47, 125, 50, 0.2);
}

.sole-marker.marker-flex {
  width: 36px;
  height: 36px;
  top: 205px;
  left: 38px;
  transform: translate(-50%, -50%);
}

.fl-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
.sole-wrapper {
  position: relative;
  display: block;                 /* block: bỏ khoảng trắng baseline của inline-block */
  width: 380px;
  margin: 0 auto;
  /* Khung luôn đúng tỉ lệ ảnh giày (940x1394) nên các chấm neo theo % không
     bị xê dịch ở bất kỳ độ phân giải nào, kể cả lúc ảnh chưa tải xong. */
  aspect-ratio: 940 / 1394;
}
.sole-x-overlay {
  display: none;
}
.fl-sole { width: 100%; height: 100%; display: block; object-fit: contain; }
.fl-feature {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.fl-feature.in { opacity: 1; transform: none; }

.btn-primary {
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 15px 54px;
  border-radius: 40px;
  display: inline-block;
  transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 8px 20px rgba(47,125,50,.3);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(47,125,50,.4); background: #2a722d; }
.fl-cta { text-align: center; margin-top: 50px; }

/* ============ CATEGORIES ============ */
.cats { background: var(--green-light); padding: 30px 0 35px; }
.cats .container { max-width: 1300px; }
.cats h2 { color: var(--green-deep); }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.cat-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .3s;
}
/* Chỉ nhấc thẻ trên thiết bị có chuột thật. Trên điện thoại, :hover bị "dính"
   sau khi chạm nên thẻ vừa chạm cứ nằm cao hơn các thẻ khác (lệch hàng) và bị
   khung cuộn ngang cắt mất phần trên. */
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover { transform: translateY(-8px); }
  .cat-card:hover .ph img { transform: scale(1.06); }
}
.cat-card .ph { aspect-ratio: 1/1; overflow: hidden; padding: 10px; }
.cat-card .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform .5s; }
.cat-card .cat-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  font-weight: 700; font-size: 16px;
}
.cat-card .cat-arrow {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.6px solid #cdd5c6;
  display: grid; place-items: center;
  color: var(--green); transition: background .2s, color .2s, border-color .2s;
}
.cat-card:hover .cat-arrow { background: var(--green); color: #fff; border-color: var(--green); }

/* ============ TESTIMONIALS ============
   Cả trang dùng đơn vị vw (khung nội dung 80.7292vw) nên mọi thứ tự co giãn theo
   bề ngang màn hình. Riêng khối này trước đây dùng số px cố định (cột giới thiệu
   360px, khoảng cách 40px, ảnh sản phẩm nhỏ 78px...). Trên màn hẹp hơn 2K —
   ví dụ màn 4K để tỉ lệ hiển thị 200% thì trình duyệt chỉ thấy 1920px — khung
   nội dung co lại còn 1550px nhưng mấy số px kia không co, ăn hết chỗ của thẻ
   -> ô "Mua ngay" bị bóp, mất tên sản phẩm.
   Cách sửa: quy các số đó về vw, lấy đúng màn 2K (2560px) làm chuẩn nên ở 2K
   mọi kích thước giữ nguyên như cũ, các màn khác co giãn theo đúng tỉ lệ đó.
   Bảng quy đổi:  360px = 14.0625vw | 40px = 1.5625vw | 24px = .9375vw
                  20px = .78125vw   | 26px = 1.0156vw | 78px = 3.0469vw
                  12px = .46875vw   | 14px = .546875vw | 30px = 1.171875vw   */
.testi {
  padding: 70px 0; background: #f2f2f2;
  --testi-gap: clamp(16px, .9375vw, 32px);   /* khoảng cách giữa 2 thẻ */
}
.testi-wrap {
  display: grid;
  grid-template-columns: clamp(268px, 14.0625vw, 460px) 1fr;
  gap: clamp(24px, 1.5625vw, 56px);
  align-items: center;
}
/* Canh đúng bằng lưới sản phẩm ở trên (80.7292vw, tối đa 3100px) — xem phần PRODUCTS */
@media (min-width: 1081px) {
  .testi .container { max-width: 3180px; }
  .testi-wrap {
    width: 80.7292vw; max-width: 3100px;
    margin-left: auto; margin-right: auto;
  }
}
.testi-intro .badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 20px; border-radius: 30px;
  margin-bottom: 22px;
}
.testi-intro h2 { font-size: clamp(22px, 1.171875vw, 38px); line-height: 1.25; color: var(--green-deep); font-weight: 800; }
.testi-intro p { color: var(--muted); margin-top: 18px; font-size: clamp(13px, .5859vw, 19px); }
.testi-nav { display: flex; gap: 12px; margin-top: 28px; }
.testi-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid #ccd6c4;
  display: grid; place-items: center;
  color: var(--green); transition: all .2s;
}
.testi-nav button.dark { background: var(--green); color: #fff; border-color: var(--green); }
.testi-nav button:hover { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.06); }

.testi-viewport { overflow: hidden; }
.testi-track { display: flex; gap: var(--testi-gap); transition: transform .5s ease; }
.testi-card {
  flex: 0 0 calc((100% - var(--testi-gap)) / 2);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(12px, .78125vw, 28px);
  min-height: 300px;
}
.testi-card > img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.testi-body {
  padding: clamp(16px, 1.0156vw, 36px) clamp(14px, .9375vw, 32px);
  display: flex; flex-direction: column;
  background: var(--green-soft); border-radius: 18px;
}
.testi-body .quote { font-size: 40px; line-height: .6; color: var(--green); font-weight: 900; font-family: var(--font); }
.testi-body .txt { font-size: 14px; color: #2c3a2d; margin-top: 10px; }
.testi-body .more { color: var(--green); font-weight: 600; font-size: 13px; text-decoration: underline; margin-top: 6px; display: inline-block; }
.testi-body .author { font-weight: 700; margin-top: auto; padding-top: 14px; }
.testi-mini {
  display: flex; align-items: center; gap: clamp(8px, .46875vw, 16px);
  background: #fff; border-radius: 12px; margin-top: 12px;
  padding: 0 clamp(8px, .46875vw, 16px) 0 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.06); overflow: hidden;
}
.testi-mini img {
  width: auto; height: clamp(56px, 3.0469vw, 100px); aspect-ratio: 1.1 / 1;
  object-fit: cover; display: block; border-radius: 12px 0 0 12px; flex: 0 0 auto;
}
.testi-mini .mini-name {
  font-size: clamp(12px, .5078vw, 16px); font-weight: 600;
  flex: 1 1 auto; min-width: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
}
/* Nút chữ "Mua ngay" — giữ nguyên kiểu cũ, phòng khi trang nào đó (bản lưu tạm
   trong trình duyệt, nội dung dựng bằng JS bản cũ) vẫn còn dùng chữ. */
.testi-mini .mini-buy { flex-shrink: 0; white-space: nowrap; }
.testi-mini .mini-buy {
  background: var(--green-lime); color: #fff; font-size: clamp(11px, .46875vw, 15px); font-weight: 700;
  padding: 7px clamp(10px, .546875vw, 18px); border-radius: 20px; transition: background .2s, transform .2s;
}
.testi-mini .mini-buy:hover { background: #468a00; transform: scale(1.05); }

/* Bản dùng icon giỏ hàng (icon_Cart+.svg): ảnh đã có sẵn nền tròn xanh nên nút
   bỏ nền, chỉ cần đúng kích thước. */
.testi-mini .mini-buy-icon {
  flex: 0 0 auto;
  width: clamp(32px, 1.5625vw, 52px);
  height: clamp(32px, 1.5625vw, 52px);
  display: block; padding: 0; background: none; border-radius: 50%;
  transition: transform .2s, filter .2s; cursor: pointer;
}
.testi-mini .mini-buy-icon img { width: 100%; height: 100%; display: block; }
.testi-mini .mini-buy-icon:hover { background: none; transform: scale(1.08); filter: brightness(1.06); }
/* 1081–1439px: mỗi thẻ chỉ còn ~270-390px, xếp ảnh cạnh nội dung thì cả hai đều
   bị bóp (tên sản phẩm ở ô "Mua ngay" mất chữ). Xếp dọc như bản máy tính bảng. */
@media (min-width: 1081px) and (max-width: 1439px) {
  .testi-card { grid-template-columns: 1fr; }
  .testi-card > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
}

.testi-progress { height: 4px; background: #e3ecd8; border-radius: 4px; margin-top: 26px; overflow: hidden; }
.testi-progress span { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .4s; }

/* ============ PRODUCTS ============ */
.products { background: #fff; padding: 60px 0 70px; }
/* Lề trái/phải giữ nguyên như các khu khác (24px, điện thoại 16px);
   riêng lưới 4 thẻ bị chặn rộng tối đa 3100px và canh giữa. */
.products .container { max-width: 3180px; }
.products .prod-title,
.products .prod-grid { max-width: 3100px; margin-left: auto; margin-right: auto; }

/* Tỉ lệ chuẩn lấy từ bản thiết kế 4K (màn 3840px):
   lưới 4 thẻ rộng 3100px, khoảng cách 40px.
     3100 / 3840 = 80.7292vw
       40 / 3840 =  1.0417vw
   Dùng vw để mọi màn hình đều giữ đúng tỉ lệ lưới / màn hình:
     4K   3840px -> lưới 3100px, gap 40px
     2K   2560px -> lưới 2067px, gap 26.7px
     FHD  1920px -> lưới 1550px, gap 20px
   Chỉ áp dụng cho layout 4 cột (>=1081px); từ 1080px trở xuống giữ nguyên lưới 3/2 cột cũ. */
@media (min-width: 1081px) {
  .products .prod-title,
  .products .prod-grid { width: 80.7292vw; }
  /* gap tỉ lệ theo màn, chặn sàn 16px để màn nhỏ (~1100-1500px) không bị dính thẻ */
  .products .prod-grid { gap: clamp(16px, 1.0417vw, 40px); }
}
.prod-title {
  text-align: left; color: var(--green); font-weight: 800;
  font-size: 22px; margin: 0 0 24px;
}
.prod-tabs { display: flex; gap: 12px; margin-bottom: 30px; }
.prod-tabs button {
  padding: 11px 26px; border-radius: 30px; font-weight: 700; font-size: 14px;
  background: #fff; color: #3a4a39; border: 1.5px solid transparent; transition: all .2s;
}
.prod-tabs button.active { background: var(--green); color: #fff; }
.prod-tabs button:not(.active):hover { border-color: var(--green); color: var(--green); }
.prod-grid {
  /* 4 sản phẩm mỗi hàng, khoảng cách đều 40px */
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.prod-pager {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 32px; flex-wrap: wrap;
}
.prod-pager:empty { display: none; }
.pg-btn {
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: var(--ink, #2c3a2d);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.pg-btn:hover:not(:disabled):not(.active) {
  border-color: var(--green); color: var(--green);
}
.pg-btn.active {
  background: var(--green); border-color: var(--green); color: #fff; cursor: default;
}
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Nút "Xem thêm" + dòng đếm sản phẩm ở trang chủ (thay cho phân trang).
   Dùng tên class riêng (home-loadmore-*) để tránh đè bởi CSS cũ .prod-more-wrap. */
.home-loadmore-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px; margin: 44px 0 8px;
}
.home-loadmore-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--green); color: #fff; border: none;
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
  padding: 14px 42px; border-radius: 40px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(47,125,50,.25);
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.home-loadmore-btn svg { width: 20px; height: 20px; transition: transform .18s ease; }
.home-loadmore-btn:hover { background: var(--green-deep); box-shadow: 0 8px 22px rgba(0,102,0,.3); }
.home-loadmore-btn:hover svg { transform: translateX(4px); }
.home-loadmore-btn:active { transform: translateY(1px); }
/* Trạng thái "Thu gọn": mũi tên quay ngược lại */
.home-loadmore-btn.is-collapse svg { transform: rotate(180deg); }
.home-loadmore-btn.is-collapse:hover svg { transform: rotate(180deg) translateX(4px); }
.home-loadmore-count { margin: 0; font-size: 14.5px; color: var(--muted, #6b7280); font-weight: 500; }
@media (max-width: 560px) {
  .home-loadmore-wrap { margin: 32px 0 6px; }
  .home-loadmore-btn { padding: 13px 36px; font-size: 14.5px; }
  .home-loadmore-count { font-size: 13.5px; }
}
.prod-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
}
.prod-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green-deep);
  text-transform: uppercase;
  background: var(--green-soft);
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 2;
  font-family: var(--font) !important;
}
.prod-thumb { position: relative; aspect-ratio: 1/1; padding: 0; background: #fff; }
.prod-thumb img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* KHÔNG đặt will-change / translate3d / backface-visibility cố định ở đây.
   Mỗi thứ đó ép trình duyệt tạo một lớp GPU riêng cho MỌI thẻ và giữ vĩnh viễn;
   lưới có 24+ thẻ -> 24+ lớp luôn bật. Khi chạm trần bộ nhớ lớp, trình duyệt bỏ
   vẽ một số lớp: ảnh đã tải xong nhưng không hiện, đổi src (click swatch) buộc
   dựng lại lớp thì mới thấy. will-change chỉ nên bật đúng lúc sắp đổi opacity. */
/* visibility:hidden để lớp ảnh hover KHÔNG tham gia vẽ khi không rê chuột —
   opacity:0 vẫn còn là một lớp được vẽ và có thể phủ lên ảnh chính. */
.prod-thumb .prod-img-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; pointer-events: none; }
.prod-thumb:hover .prod-img-hover { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s linear 0s; will-change: opacity; }

/* ============================================================
   KHUNG ẢNH 3:4 — DÙNG CHUNG CHO MỌI LƯỚI SẢN PHẨM
   Trang chủ (.prod-grid), các trang danh mục + "Sản phẩm bạn đã xem"
   (.col-grid) và "Có thể con thích mang" ở trang chi tiết (.pd-sg-thumb).
   Ảnh gốc 1:1 được CẮT (cover) cho vừa khung dọc.
   ============================================================ */
.prod-grid .prod-thumb,
.col-grid .prod-thumb {
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: #f4f4f4;
}
.prod-grid .prod-img-base,
.prod-grid .prod-img-hover,
.col-grid .prod-img-base,
.col-grid .prod-img-hover { object-fit: cover; }

/* ============================================================
   THÔNG TIN Ở 3 GÓC THẺ SẢN PHẨM — DÙNG CHUNG CHO MỌI TRANG
   - Góc PHẢI TRÊN : nhãn (tag) dạng viên thuốc, chữ đen nền trắng.
   - Góc TRÁI TRÊN : icon nhãn (badge_icon) tải lên từ admin, nhận cả .svg.
   - Góc TRÁI DƯỚI: ảnh quà tặng (gift_image) tải lên từ admin.
   ============================================================ */
.prod-tag,
.pd-sg-tag {
  left: auto;
  right: 20px;
  top: 18px;
  background: #fff;
  color: #111;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

/* Icon nhãn góc trái trên (hình vuông 1:1) */
.prod-badge-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: clamp(30px, 17%, 140px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.prod-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ảnh quà tặng góc trái dưới (nền trong, tỷ lệ ngang ~3:1) */
.prod-gift {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: clamp(84px, 45%, 340px);
  pointer-events: none;
}
.prod-gift img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.prod-info {
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.prod-info .name {
  font-size: 15px;
  font-weight: 500;
  color: #2c3a2d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  width: 100%;
}
.swatches-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.swatches {
  display: flex;
  align-items: center;
  gap: 0; /* Bỏ khoảng trống ở giữa các ảnh màu */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Luôn chừa sẵn chỗ nút "+N" (44px) để ô màu MỌI thẻ đều
     cùng kích thước, dù thẻ đó có 2 màu hay 5+ màu (chuẩn theo thẻ có +N) */
  flex: 0 0 calc(100% - 48px);
  max-width: calc(100% - 48px);
  min-width: 0;
  padding: 2px 0;
}
.swatches::-webkit-scrollbar { display: none; }
/* Sản phẩm chưa có ảnh phân loại (quà tặng…) vẫn chừa đúng chiều cao một hàng
   ảnh phân loại, để tên + giá của mọi thẻ trên cùng một hàng luôn thẳng nhau.
   4.4 = 4 ô x tỉ lệ 1.1/1 -> cao đúng bằng hàng có ảnh. */
.swatches:empty { aspect-ratio: 4.4 / 1; box-sizing: content-box; }
.swatch {
  flex: 0 0 25%;
  width: auto;
  height: auto;
  aspect-ratio: 1.1 / 1; /* Làm cho ảnh to và cao hơn */
  background: #f4f4f4;
  cursor: pointer;
  position: relative;
  border: none !important;
  box-sizing: border-box;
}
.swatch::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  z-index: 2;
  transform: scaleX(0);
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.swatch:hover::after {
  transform: scaleX(1);
  opacity: 0.55;
}
.swatch.active::after {
  transform: scaleX(1);
  opacity: 1;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Nút "+N ›" mở rộng dải màu — kiểu pill trắng viền mảnh của XIXA */
.swatch-more { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--muted); flex: 0 0 44px; height: auto; aspect-ratio: 1.1 / 1; box-sizing: border-box; border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 2px 8px 0; cursor: pointer; transition: color .15s, border-color .15s, opacity .2s ease; }
.swatch-more::after { content: ' ›'; }
.swatch-more:hover { color: var(--green); border-color: var(--green); }
.m-more { display: none; }
.d-more { cursor: pointer; }
/* Nút "‹" quay lại các màu phía trước — chỉ hiện sau khi đã mở rộng (PC) */
.swatch-back { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--green); font-size: 17px; font-weight: 700; line-height: 1; padding: 0 0 1px 0; cursor: pointer; flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: background .15s, border-color .15s; }
.swatch-back:hover { background: var(--green-soft); border-color: var(--green); }
.swatches-row.sw-expanded .swatch-back { display: inline-flex; }
.swatches:not(.expanded) .swatch:nth-child(n+5) { display: none !important; }
.swatches:not(.expanded) { overflow-x: hidden !important; }
/* Mở rộng: dải màu trượt ngang mượt tới cuối; PC dùng nút ‹, mobile vuốt tay.
   Nút +N đã ẩn nên dải màu dàn full bề rộng thẻ (PC chỉ trừ chỗ nút ‹ = 36px) */
.swatches.expanded { overflow-x: auto !important; scroll-behavior: smooth; flex-basis: calc(100% - 36px); max-width: calc(100% - 36px); }
/* Container rộng thêm 16px khi mở rộng -> trừ lại để ô màu GIỮ NGUYÊN kích thước */
.swatches.expanded .swatch { flex-basis: 20% !important; }
.swatches.expanded ~ .d-more { display: none !important; }
.swatches-row.scrolled .swatch-more { opacity: 0; pointer-events: none; }
.prod-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: nowrap;
}
.price-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.price-current {
  font-size: 15px;
  font-weight: 800;
  color: #1f2421;
  line-height: 1;
}
.price-discount {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--green-deep);
  border: none;
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.price-discount.is-flash,
.pd-discount.is-flash,
.spb-discount-badge.is-flash {
  background: #e44c0f !important;
}
.price-old {
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
  line-height: 1;
}
.prod-more-wrap { display: none; }

/* PC: tên và giá sản phẩm to hơn (tên dài tự cắt bằng dấu ...) */
@media (min-width: 1081px) {
  .prod-info .name { font-size: 18px; }
  .price-current { font-size: 19px; }
  .price-old { font-size: 14px; }
  .price-discount { font-size: 12px; }
  /* PC: dồn giá bán - nhãn -X% - giá gốc về sát mép trái thẻ
     (mobile/tablet vẫn giữ kiểu giá trái / giảm giá phải như cũ) */
  .prod-price-box { justify-content: flex-start; gap: 10px; }
  .price-right { flex-wrap: nowrap; }
}

/* ============ KNOWLEDGE + FAQ ============ */
.know-faq { padding: 70px 0; background: #fff; }
.kf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
/* Canh đúng bằng lưới sản phẩm ở trên (80.7292vw, tối đa 3100px) — xem phần PRODUCTS.
   Ở đây .container và .kf-grid là cùng 1 thẻ nên bỏ padding ngang và đặt width trực tiếp. */
@media (min-width: 1081px) {
  .know-faq .container {
    width: 80.7292vw; max-width: 3100px;
    padding-left: 0; padding-right: 0;
    margin-left: auto; margin-right: auto;
  }
}
.kf-grid > div { min-width: 0; }
.kf-head { font-size: 26px; color: var(--green-deep); font-weight: 800; margin-bottom: 28px; }
.articles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.article { cursor: pointer; }
.article .pic { border-radius: 14px; overflow: hidden; aspect-ratio: 16/11; margin-bottom: 14px; }
.article .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.article:hover .pic img { transform: scale(1.06); }
.article h4 { font-size: 16px; font-weight: 700; line-height: 1.4; color: #20281f; transition: color .2s; }
.article:hover h4 { color: var(--green); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; }
.faq-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed transparent; cursor: pointer; transition: transform .2s; }
.faq-item:hover { transform: translateX(4px); }
.faq-item .num { font-size: 30px; font-weight: 800; color: #d2d8cf; line-height: 1; }
.faq-item:hover .num { color: var(--green-lime); }
.faq-item .q { font-size: 15px; color: #333; }

/* ============ FOOTER ============ */
/* ẢNH SÓNG FOOTER
   HÌNH SÓNG GIỮ NGUYÊN 100% bản gốc Illustrator — viewBox vẫn đủ
   "0 0 1499.7 94.25", không cắt xén gì.
   Chỉ thêm width/height + preserveAspectRatio="none" trong tệp SVG để ảnh
   LUÔN kéo căng lấp đầy đúng khung của thẻ <img>, không còn phụ thuộc vào
   việc trình duyệt tự suy ra tỉ lệ ảnh — đây chính là chỗ Safari trên iOS
   tính sai và để hở 2 mép trái/phải.
   --wave-h  : chiều cao ảnh = 100vw * 94.25 / 1499.7 = 6.285vw (đúng tỉ lệ)
   --wave-lap: phần ảnh đè xuống footer, che dải trong suốt ở đáy ảnh */
:root { --wave-h: 6.285vw; --wave-lap: 0.9vw; }
.footer {
  position: relative;
  background: var(--green);
  color: #e8f3e6;
  padding-top: 0;
  /* chừa đúng phần sóng nhô lên trên footer, tránh sóng đè vào nội dung phía trên */
  margin-top: calc(var(--wave-h) - var(--wave-lap));
}
.footer-wave {
  display: block;
  width: 100%;
  height: var(--wave-h);   /* đặt cứng, KHÔNG dùng auto -> iOS không thể tính sai */
  position: absolute;
  bottom: calc(100% - var(--wave-lap));
  left: 0;
  pointer-events: none;
}
/* Ảnh sóng đã xoá phông (nền trong suốt) nên phần trong suốt để lộ nền trang.
   Dải này nối màu nền của khối ngay phía trên footer vào vùng sóng, tránh
   lộ vệt trắng khi khối đó có nền màu. Mặc định trong suốt = giữ nguyên nền trang. */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--wave-h) - var(--wave-lap));   /* đúng bằng margin-top của .footer */
  background: var(--wave-bg, transparent);
  pointer-events: none;
}
/* Trang danh mục kết thúc bằng khối SEO nền xám (mục "Sản phẩm bạn đã xem" đang ẩn) */
body:has(.col-seo:not([hidden]) ~ .col-recent[hidden]) { --wave-bg: #f6f7f5; }

/* Nền footer vẫn tràn hết bề ngang màn hình; riêng phần nội dung được bó trong
   khung --footer-max và canh giữa, các cột của 2 hàng dùng cùng lưới nên thẳng nhau */
:root { --footer-pad: 40px; --footer-max: 1700px; }
@media (max-width: 860px) { :root { --footer-pad: 24px; } }
@media (max-width: 560px) { :root { --footer-pad: 16px; } }

.footer-top { padding-top: 50px; padding-bottom: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.footer-top,
.footer-cols { max-width: var(--footer-max); margin-left: auto; margin-right: auto; padding-left: var(--footer-pad); padding-right: var(--footer-pad); }
.footer h3 { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.footer p { font-size: 15px; color: #c8ffae; max-width: 320px; }
.socials { display: flex; gap: 16px; margin-top: 22px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; color: #cfe9cb; transition: transform .2s, color .2s; }
.socials a:hover { transform: translateY(-3px); color: #fff; }
.socials svg { width: 26px; height: 26px; }
.socials a img { width: auto; height: auto; max-width: 24px; max-height: 24px; }
.map-btn img { height: 24px; width: auto; }
.map-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; border: 1.5px solid #c8ffae; border-radius: 30px; padding: 11px 22px; color: #c8ffae; font-weight: 600; font-size: 14px; transition: background .2s; }
.map-btn:hover { background: rgba(255,255,255,.12); }
.contact-boxes { display: flex; gap: 16px; flex-wrap: wrap; }
.contact-box { display: flex; align-items: center; gap: 14px; border: 1.5px solid #c8ffae; border-radius: 14px; padding: 14px 20px; text-decoration: none; }
a.contact-box { cursor: pointer; transition: border-color .2s, background .2s; }
a.contact-box:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.contact-box .cb-ic { width: 34px; height: 34px; color: #fff; }
.contact-box .cb-ic svg { width: 34px; height: 34px; }
.contact-box .cb-ic img { width: 30px; height: 30px; }
.contact-box .big { font-size: 21px; font-weight: 800; color: #fff; }
.contact-box .small { font-size: 12px; color: #c8ffae; }
.zalo-ic { width: 34px; height: 34px; display: grid; place-items: center; }
.zalo-ic img { width: 30px; height: 30px; }

.footer-cols { border-top: 1px solid rgba(255,255,255,.18); padding-top: 40px; padding-bottom: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.footer-cols h5 { font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #fff; margin-bottom: 18px; }
.footer-cols li { margin-bottom: 14px; }
.footer-cols a { font-size: 15px; color: #c8ffae; transition: color .2s, padding-left .2s; }
.footer-cols a:hover { color: #fff; padding-left: 4px; }

.footer-bottom { background: var(--green-dark); }
.footer-bottom .inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--footer-max); margin-left: auto; margin-right: auto; padding: 22px 240px 22px var(--footer-pad); flex-wrap: wrap; }
.footer-bottom p { font-size: 14px; color: #c8ffae; max-width: none; }

/* Footer (mọi trang) co giãn đúng tỉ lệ như lưới sản phẩm trang chủ:
   3100 / 3840 = 80.7292vw  ->  4K 3100px | 2K 2067px | FHD 1550px
   Bỏ padding ngang và đặt width trực tiếp để mép trái/phải trùng lưới sản phẩm. */
@media (min-width: 1081px) {
  :root { --footer-pad: 0px; --footer-max: 3100px; }
  .footer-top,
  .footer-cols,
  .footer-bottom .inner { width: 80.7292vw; }
}
.badges { display: flex; align-items: center; gap: 14px; }
.badges .bd { background: #fff; color: #333; border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.bd.norton { color: #f5b30b; }
.bd.dmca { color: #1a8cd8; }
.bd.bct { background: #1466b3; color: #fff; }
/* Logo Hàng Việt Nam Chất Lượng Cao — cao bằng các badge chữ bên cạnh (ảnh gốc 150×55) */
.badges .bd-hvnclc { height: 42px; width: auto; display: block; border-radius: 8px; }

.bear {
  position: absolute;
  right: 0; bottom: 0;
  width: 230px;
  z-index: 5;
  pointer-events: none;
}

/* ============ FOOTFIT INTERACTIVE DOTS & POPUP ============ */
.sole-dot {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(46, 125, 50, .72);    /* chấm hơi mờ, nhìn xuyên thấy chi tiết giày bên dưới */
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.sole-dot::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border-radius: 50%;
  background: rgba(47, 125, 50, 0.22);
  border: 1px solid rgba(47, 125, 50, 0.32);
  z-index: -1;
  animation: ringPulse 1.8s infinite ease-in-out;
  pointer-events: none;
}

@keyframes ringPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.95;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.55;
  }
}

/* Coordinates for the 6 dots */
/* dot-0 lót nâng vòm · dot-1 đế 1/3 · dot-2 mũi giày rộng
   dot-3 trợ gót · dot-4 quai velcro · dot-5 mũi giày gia cố */
.dot-0 { top: 27%; left: 57%; transform: translate(-50%, -50%); }
.dot-1 { top: 54%; left: 20%; transform: translate(-50%, -50%); }
.dot-2 { top: 81%; left: 5%; transform: translate(-50%, -50%); }
.dot-3 { top: 18%; left: 79%; transform: translate(-50%, -50%); }
.dot-4 { top: 41%; left: 77%; transform: translate(-50%, -50%); }
.dot-5 { top: 91%; left: 15%; transform: translate(-50%, -50%); }

/* Popup style */
.fl-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Phải ngang hàng các overlay khác (tìm kiếm / đăng nhập / bản đồ = 9999),
     nếu để 300 thì header + topbar dính và nút chat nổi vẫn đè lên trên và bấm được. */
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.fl-popup-overlay.open {
  opacity: 1;
  visibility: visible;
}
.fl-popup-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 28px);
  max-width: 460px;
  margin: 0 auto;
  padding: 0 4px 22px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.fl-popup-overlay.open .fl-popup-controls {
  transform: translateY(0);
  opacity: 1;
}
.fl-popup-arrows { display: flex; gap: 14px; }
.fl-popup-nav {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}
.fl-popup-nav:active { transform: scale(0.92); }
.fl-popup-nav svg { width: 22px; height: 22px; display: block; }
.fl-popup-close { font-size: 30px; font-weight: 300; }
.fl-popup-card {
  background: #fff;
  width: calc(100% - 28px);
  max-width: 460px;
  margin: 0 auto 90px;
  border-radius: 24px;
  padding: 34px 24px 34px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(130%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.fl-popup-overlay.open .fl-popup-card {
  transform: translateY(0);
}
.fl-popup-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-popup-icon img {
  max-height: 100%;
  width: auto;
}
.fl-popup-content h3 {
  color: var(--green-deep);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
}
.fl-popup-content p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto;
}

/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .42s ease-out, transform .42s ease-out; transition-delay: var(--rv-delay, 0s); }
.reveal.in { opacity: 1; transform: none; }
/* Người dùng bật "giảm chuyển động" trong hệ điều hành -> hiện thẳng, không animate */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
}

/* ============ MOBILE DRAWER ============ */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transition: .3s; z-index: 200;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

/* ===== XIXA Mobile Drawer — bố cục phẳng, tràn viền (bản 2026) =====
   Thứ tự các khối: logo/ngôn ngữ/đóng · ô tìm kiếm · banner (sửa trong
   trang quản trị) · danh mục sản phẩm · các trang giới thiệu · liên hệ.
   Lề hai bên của mọi khối dùng chung biến --d-pad; riêng ô tìm kiếm hẹp hơn. */
.drawer {
  --d-pad: 28px;
  position: fixed; top: 0; left: 0; height: 100%; width: 100%; max-width: 480px;
  background: #fff; z-index: 201; transform: translateX(-100%);
  transition: transform .38s cubic-bezier(.4,.9,.3,1);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--font);
}
.drawer.open { transform: none; box-shadow: 8px 0 34px rgba(0,0,0,.16); }

/* Đầu menu: logo · nút ngôn ngữ · nút đóng */
.drawer .d-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--d-pad) 6px; background: #fff; flex: none;
}
.drawer .d-logo { margin-right: auto; display: flex; }
.drawer .d-logo img { height: 27px; display: block; }

/* Nút đổi ngôn ngữ — /js/lang-switch.js bọc thêm .d-lang-wrapper + dropdown */
.drawer .d-lang-wrapper { position: relative; flex: none; }
.drawer .d-lang {
  display: inline-flex; align-items: center; gap: 6px;
  border: none !important; background: #f1f2f0 !important; color: var(--ink);
  padding: 6px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: background .2s;
}
.drawer .d-lang:hover { opacity: 1; background: #e8eae6 !important; }
.drawer .d-lang svg { width: 10px; height: 10px; opacity: .55; }
.drawer .d-lang .flag-icon-flat {
  width: 17px !important; height: 17px !important;
  border-radius: 50% !important; object-fit: cover; flex: none;
}
.drawer .d-lang-code { line-height: 1; }
.drawer .d-close {
  width: 36px; height: 36px; margin-right: -8px; padding: 0;
  border: none; background: none; color: var(--ink);
  cursor: pointer; display: grid; place-items: center; transition: opacity .2s;
}
.drawer .d-close:hover { opacity: .6; background: none; transform: none; }
.drawer .d-close svg { width: 22px; height: 22px; }

/* Vùng cuộn */
.drawer .d-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 14px;
}
.drawer .d-scroll::-webkit-scrollbar { width: 5px; }
.drawer .d-scroll::-webkit-scrollbar-thumb { background: #d7e2cf; border-radius: 4px; }

/* Ô tìm kiếm */
.drawer .d-search {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 14px 16px; padding: 0 16px; height: 44px;
  background: #f1f2f0; border: 1.5px solid transparent; border-radius: 999px;
  transition: border-color .2s, background .2s;
}
.drawer .d-search:focus-within { border-color: var(--green-lime); background: #fff; }
.drawer .d-search svg { width: 19px; height: 19px; color: #8c9490; flex: none; }
.drawer .d-search input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 15.5px; font-weight: 400; color: var(--ink); font-family: inherit;
}
.drawer .d-search input::placeholder { color: #9aa0a0; }
.drawer .d-search input::-webkit-search-cancel-button,
.drawer .d-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Banner trong menu — ảnh, tiêu đề và liên kết sửa ở trang quản trị
   (Cài đặt > Ảnh menu điện thoại), khoá `menu_mobile_banner`.
   Tỉ lệ 2.5:1 để ảnh ngang giống mẫu thiết kế. */
.drawer .d-hero {
  display: block; position: relative; margin: 0 var(--d-pad) 16px;
  aspect-ratio: 2.5 / 1; border-radius: 10px; overflow: hidden;
  text-decoration: none; background: #eef1ec;
}
.drawer .d-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drawer .d-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.42) 100%);
}
.drawer .d-hero-body { position: absolute; left: 14px; right: 14px; bottom: 11px; z-index: 2; }
.drawer .d-hero-title {
  display: block; color: #fff; font-size: 21px; font-weight: 800; line-height: 1.08;
  letter-spacing: -.3px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.drawer .d-hero-sub {
  display: flex; align-items: center; gap: 5px; margin-top: 2px;
  color: #fff; font-size: 13px; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.drawer .d-hero-go { display: inline-grid; place-items: center; flex: none; }
.drawer .d-hero-go svg { width: 12px; height: 12px; display: block; }

/* Danh sách liên kết */
.drawer .d-nav { display: flex; flex-direction: column; padding: 0 var(--d-pad); }
.drawer .d-nav-link {
  display: block; padding: 11px 0; text-decoration: none;
  font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; color: var(--ink);
  transition: opacity .15s;
}
.drawer .d-nav-link:active { opacity: .55; }
.drawer .d-nav-link.is-green { color: var(--green-lime); }
.drawer .d-nav-link.ql-sale { color: #e8226a; text-transform: uppercase; }
/* Nhóm dưới (trang giới thiệu): chữ thường, không đậm */
.drawer .d-nav--sub .d-nav-link { font-size: 15.5px; font-weight: 400; }

/* Đường kẻ ngăn cách tràn hết chiều ngang */
.drawer .d-sep { height: 1px; background: var(--line); margin: 12px 0; }

/* Hotline + Zalo cuối menu */
/* Hotline + Zalo nằm ngoài .d-scroll -> luôn dính đáy màn hình, danh sách phía
   trên cuộn bên dưới nó. Nền trắng để chữ không lẫn vào nội dung đang cuộn qua. */
.drawer .d-contact {
  flex: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 12px var(--d-pad) calc(12px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--line);
}
.drawer .d-ct {
  display: flex; align-items: center; gap: 9px; min-width: 0;
  text-decoration: none; color: inherit;
}
.drawer .d-ct-ic { flex: none; width: 27px; height: 27px; display: grid; place-items: center; }
.drawer .d-ct-ic svg { width: 100%; height: 100%; display: block; }
/* Tai nghe tổng đài: xám nhạt — biểu tượng gốc màu xanh lá chỉ hợp nền xanh ở chân trang */
.drawer .d-ct-ic--phone { color: #9aa0a0; }
/* Zalo: ô bo góc màu xanh nước biển đúng nhận diện Zalo, hình bên trong màu trắng */
.drawer .d-ct-ic--zalo { background: #0068ff; border-radius: 6px; color: #fff; }
.drawer .d-ct-tx { display: flex; flex-direction: column; min-width: 0; }
.drawer .d-ct-tx b { font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.drawer .d-ct-tx i { font-size: 12px; font-style: normal; color: var(--muted); white-space: nowrap; }

@media (max-width: 374px) {
  .drawer { --d-pad: 20px; }
  .drawer .d-hero-title { font-size: 19px; }
  .drawer .d-nav-link { font-size: 15.5px; }
  .drawer .d-nav--sub .d-nav-link { font-size: 14.5px; }
  .drawer .d-ct-tx b { font-size: 13.5px; }
  .drawer .d-ct-tx i { font-size: 11.5px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .footlab-grid { grid-template-columns: 1fr; }
  .fl-feature::after, .fl-feature::before { display: none; }
  .fl-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 28px; }
  .fl-col.left, .fl-col.right { text-align: center; align-items: center; }
  .fl-col.left .fl-ic { margin: 0 auto; }
  .fl-col .fl-ic { margin: 0 auto; }
  .fl-center { order: -1; }
  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .testi-card { grid-template-columns: 1fr; }
  .testi-card > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
}

@media (max-width: 860px) {
  html { scroll-padding-top: 100px; }
  .topbar { height: 24px; font-size: 11px; }
  .header { top: 24px; }
  .nav { display: none; }
  .icon-btn {
    width: 32px;
    height: 32px;
  }
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }
  .hamburger { display: grid; z-index: 6; }
  .header .inner { height: 48px; display: flex; align-items: center; justify-content: space-between; position: relative; padding: 0 16px; }
  .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0 !important;
    z-index: 5;
  }
  .logo img {
    height: 20px;
  }
  .header-icons { display: flex; align-items: center; gap: 8px; z-index: 6; }
  .header-icons .search {
    position: absolute;
    left: 56px;
    top: 50%;
    transform: translateY(-50%);
  }
  .topbar .tb-arrow { display: inline-flex; position: absolute; top: 0; }
  .topbar .tb-prev { left: 8px; }
  .topbar .tb-next { right: 8px; }
  .topbar .tb-track span { padding-top: 3px; }
  
  /* Hero Banner on mobile to fit screen width */
  .hero { height: auto; min-height: 0; display: block; }
  .hero-banner { width: 100%; height: 100%; object-fit: cover; }
  .hero-slide:first-child .hero-banner { height: auto; object-fit: contain; }
  /* Banner có ảnh riêng cho điện thoại -> khung tỷ lệ 3:4 */
  .hero-slide.has-mob .hero-banner { aspect-ratio: 3 / 4; height: auto; object-fit: cover; }

  /* Hide features in Footlab on mobile */
  .footlab-grid .fl-col { display: none; }
  .footlab-grid { grid-template-columns: 1fr; justify-items: center; margin-top: 24px; }
  .fl-center { width: 100%; display: flex; justify-content: center; }
  .sole-wrapper { width: 280px; }
  .fl-sole { width: 100%; }
  .sole-dot { display: flex; }
  /* Điện thoại: kéo nút "Mua ngay" lên gần chiếc dép hơn */
  .footlab .fl-cta { margin-top: 24px; }

  /* Product card layout and 'Xem thêm' button */
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .prod-thumb {
    padding: 0 !important;
  }
  .prod-thumb .prod-img-hover {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  /* Thẻ hẹp trên máy tính bảng / điện thoại: thu nhỏ nhãn - icon - quà tặng */
  .prod-grid .prod-thumb { border-radius: 14px; }
  .prod-tag,
  .pd-sg-tag {
    top: 12px;
    right: 14px;
    padding: 4px 10px;
    font-size: 10px;
  }
  .prod-badge-icon { top: 8px; left: 8px; width: 19%; }
  .prod-gift { left: 8px; bottom: 8px; width: 52%; }
  .prod-info {
    padding: 0 0 14px;
    gap: 6px;
    width: 100%;
  }
  .prod-info .name {
    font-size: 14.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.6em;
    line-height: 1.3;
  }
  .prod-price-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
  }
  .price-right {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .price-current {
    font-size: 13.5px;
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .price-discount {
    font-size: 9.5px;
    padding: 1px 3px;
    flex-shrink: 0;
    letter-spacing: -0.01em;
  }
  .price-old {
    font-size: 10.5px;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    letter-spacing: -0.02em;
  }
  .prod-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  .prod-more-btn {
    border: 1.5px solid #ccd6c4;
    background: #fff;
    color: var(--green-deep);
    font-weight: 700;
    font-size: 14px;
    padding: 8px 30px;
    border-radius: 20px;
  }

  /* Testimonials styling and horizontal scroll layout */
  .testi .container { padding-right: 0; }
  .testi-wrap { display: flex; flex-direction: column; gap: 24px; overflow: hidden; }
  .testi-intro {
    background: var(--green);
    color: #fff;
    padding: 24px 20px;
    border-radius: 18px;
    text-align: center;
    width: auto;
    margin-right: 16px;
  }
  .testi-intro h2 {
    color: #fff;
    font-size: 20px;
    margin-top: 8px;
  }
  .testi-intro p {
    color: #e2f0d9;
    font-size: 14px;
    margin-top: 12px;
  }
  .testi-intro .badge {
    background: rgba(255,255,255,0.18);
    color: #fff;
    margin-bottom: 0;
  }
  .testi-nav, .testi-progress { display: none; }
  .testi-viewport {
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .testi-viewport::-webkit-scrollbar { display: none; }
  .testi-track {
    display: flex;
    flex-direction: row;
    gap: 16px;
    transform: none !important;
    width: max-content;
    scroll-snap-type: x mandatory;
  }
  .testi-card {
    flex: 0 0 280px;
    max-width: 82vw;
    scroll-snap-align: start;
    grid-template-columns: 1fr;
  }
  .testi-card > img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

  /* Categories horizontal scroll */
  .cats .container { padding-right: 0; }
  .cat-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    margin-top: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-card {
    flex: 0 0 230px;
    scroll-snap-align: start;
  }

  /* FAQ horizontal scroll: each swipe panel = 1 full-width column of 3 rows */
  .faq-grid {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    grid-auto-columns: 100%;
    gap: 0 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-top: 0;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .faq-grid::-webkit-scrollbar { display: none; }
  .faq-item {
    scroll-snap-align: start;
    align-items: flex-start;
  }
  /* keep numeric order 01..06 despite interleaved desktop markup
     -> column 1: 01,02,03  column 2: 04,05,06 */
  .faq-grid .faq-item:nth-child(1) { order: 1; }
  .faq-grid .faq-item:nth-child(2) { order: 4; }
  .faq-grid .faq-item:nth-child(3) { order: 2; }
  .faq-grid .faq-item:nth-child(4) { order: 5; }
  .faq-grid .faq-item:nth-child(5) { order: 3; }
  .faq-grid .faq-item:nth-child(6) { order: 6; }

  /* Footer ordering and accordions */
  .footer-top { display: flex; flex-direction: column; gap: 24px; padding-bottom: 0; }
  .footer-top > div:nth-child(1) { order: 3; }
  .footer-top > div:nth-child(2) { order: 2; }
  .footer-top > .contact-boxes { order: 1; width: 100%; }
  .socials { margin-top: 16px; margin-bottom: 16px; }
  .contact-box {
    border: none;
    padding: 6px 0;
    width: 100%;
  }
  
  .footer-cols { grid-template-columns: 1fr; gap: 0; padding-top: 20px; padding-bottom: 20px; }
  .footer-cols h5 {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 14px 0;
    margin-bottom: 0;
  }
  .footer-cols h5::after {
    content: "+";
    font-size: 18px;
    font-weight: 400;
  }
  .footer-cols div.active h5::after {
    content: "−";
  }
  .footer-cols ul {
    display: none;
    padding: 10px 0;
  }
  .footer-cols div.active ul {
    display: block;
  }

  .kf-grid { grid-template-columns: 1fr; gap: 40px; }
  .bear { width: 90px; opacity: .9; }
  .footer-bottom .inner { padding-right: 110px; }
  h2.section-h, .footlab h2, .testi-intro h2, .cats h2 { font-size: 22px; }
  .section-sub { font-size: 13px; margin-top: 8px; }
  .mobile-only { display: inline; }
  .footlab h2 {
    max-width: none;
    margin: 0 auto;
    line-height: 1.35;
  }
  .footlab .section-sub {
    max-width: 320px;
    margin: 8px auto 0;
    line-height: 1.45;
    font-size: 11px;
  }

  /* Articles horizontal scroll */
  .know-faq .container { padding-right: 0; }
  .know-faq .kf-grid > div:last-child { padding-right: 24px; }
  .articles {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .articles::-webkit-scrollbar { display: none; }
  .article {
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .section-pad, .footlab, .cats, .testi, .products, .know-faq { padding-top: 44px; padding-bottom: 44px; }
  /* Mobile: lưới dọc 2 cột, hiện 4 sản phẩm đầu, bấm "Xem thêm" thì xổ tiếp xuống dưới
     (trước đây là carousel vuốt ngang 2 hàng/trang) */
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: row;
    gap: 14px 14px;
    overflow-x: visible;
  }
  .prod-grid .prod-thumb { border-radius: 12px; }
  .prod-tag,
  .pd-sg-tag {
    top: 10px;
    right: 11px;
    padding: 3px 8px;
    font-size: 9px;
  }
  .prod-badge-icon { top: 6px; left: 6px; width: 21%; }
  .prod-gift { left: 6px; bottom: 6px; width: 56%; }
  .prod-pager { display: none !important; }
  .prod-title { font-size: 17px; margin-bottom: 18px; }
  .articles { gap: 14px; }
  .know-faq .kf-grid > div:last-child { padding-right: 16px; }
  .footer-bottom .inner { flex-direction: column; align-items: flex-start; padding: 22px 16px; }
  .contact-boxes { flex-direction: column; }

  /* Mobile swatch list optimization: maximum 3 swatches + 1 "+N" button */
  .swatches-row .d-more {
    display: none !important;
  }
  .swatches-row .m-more {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .swatches-row {
    gap: 4px !important;
  }
  .swatches {
    flex-basis: 75% !important;
    max-width: 75% !important;
    gap: 0 !important; /* Bỏ khoảng trống ở giữa các ảnh màu */
  }
  /* Mobile giữ 3 ô màu mỗi hàng, làm to lên và sát nhau */
  .swatch {
    flex-basis: 33.333% !important;
    aspect-ratio: 1.1 / 1 !important; /* Làm cho ảnh to và cao hơn */
    border: none !important; /* Không vẽ đường viền xung quanh ảnh phân loại màu */
    box-sizing: border-box;
  }
  .swatches:not(.expanded) .swatch:nth-child(n+4) {
    display: none !important;
  }
  .swatches:not(.expanded) {
    overflow-x: hidden !important;
  }
  .swatches.expanded {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  /* Khi mở rộng, giữ nguyên kích thước ô màu */
  .swatches.expanded .swatch {
    flex-basis: 25% !important; /* Vì không có nút +N nữa, mỗi ô màu vẫn chiếm đúng 25% chiều rộng thẻ */
  }
  /* Pill +N gọn lại thành hình tròn nhỏ xám nhạt cao cấp */
  .swatch-more {
    font-size: 10px !important;
    font-weight: 700 !important;
    flex: 0 0 18% !important;
    max-width: 18% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Tạo hình tròn hoàn hảo */
    border-radius: 50% !important; /* Bo tròn hoàn toàn */
    background: #f1f5f9 !important;
    border: none !important;
    color: #64748b !important;
    padding: 0 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin-left: auto !important; /* Đẩy sát về góc phải */
  }
  .swatch-more::after {
    content: "" !important;
  }
  /* Mobile: vuốt qua lại dải màu bằng tay, không cần nút ‹ */
  .swatch-back {
    display: none !important;
  }
  /* dùng ~ vì giữa .swatches và .m-more có thể còn nút .d-more */
  .swatches.expanded ~ .m-more {
    display: none !important;
  }
  .sale-slider-track .prod-card {
    border: none !important;
  }
}

/* ============ ADD TO CART BUTTON ============ */
.add-cart-btn {
  margin-top: 12px;
  width: 100%;
  border: none;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 0;
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.add-cart-btn:hover { background: var(--green-deep); transform: translateY(-1px); }
.add-cart-btn:active { transform: translateY(0); }

/* ============ CART BADGE ============ */
.icon-btn.cart { position: relative; }
.cart-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #e53935;
  color: #fff;
  font-size: 11px; font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

/* ============ CART CONTAINER & DROPDOWN ============ */
.cart-container {
  position: relative;
  display: inline-block;
}

.cart-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 16px;
  z-index: 1000;
  margin-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  cursor: default;
}

.cart-container:hover .cart-dropdown,
.cart-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cart-dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 14px;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
}

.cd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 12px;
}

.cd-subtotal {
  font-size: 13px;
  color: #555;
}

.cd-subtotal strong {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}

.cd-link-checkout {
  font-size: 13px;
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
}

.cd-link-checkout:hover {
  text-decoration: underline;
}

.cd-items {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 4px;
}

/* Custom scrollbar for dropdown items */
.cd-items::-webkit-scrollbar {
  width: 4px;
}
.cd-items::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.cd-items::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.cd-item {
  display: flex;
  gap: 12px;
  position: relative;
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 12px;
}

.cd-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cd-item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #eee;
  flex-shrink: 0;
  background: #fff;
}

.cd-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cd-item-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cd-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  padding-right: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.cd-item-meta {
  font-size: 11px;
  color: #777;
}

.cd-item-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.cd-item-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-deep);
}

.cd-item-old-price {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}

.cd-item-qty {
  font-size: 11px;
  color: #666;
}

.cd-item-remove {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  background: none;
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
  padding: 2px;
}

.cd-item-remove:hover {
  color: #ff3b30;
}

.cd-btn-checkout-now {
  display: block;
  width: 100%;
  background: var(--green);
  color: #ffffff;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.15s;
  text-decoration: none;
}

.cd-btn-checkout-now:hover {
  background: var(--green-dark);
}

/* ============ CHECKOUT PAGE STYLES ============ */
.checkout-container {
  padding-top: 24px;
  /* Trang này không có chân trang, lại có thanh thao tác dính ở đáy (~78px).
     Chừa thêm chỗ để khối "Có thể con cũng thích" không nằm sát thanh đó. */
  padding-bottom: 150px;
}
/* Thoáng thêm một chút dưới hàng giá của khối gợi ý */
.checkout-suggest { padding-bottom: 6px; }

.checkout-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: start;
}

.checkout-form-box,
.checkout-cart-box {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e7ebe4;
  padding: 24px;
}

.checkout-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--green-deep);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkout-inputs-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.checkout-field {
  display: flex;
  flex-direction: column;
  position: relative;
}

.checkout-field input,
.checkout-field select,
.checkout-field textarea {
  width: 100%;
  background: #fdfdfd;
  border: 1px solid #cdd5c6;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.checkout-field input:focus,
.checkout-field select:focus,
.checkout-field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.08);
  background: #fff;
}

/* Payment Methods Styled Radios */
.payment-methods-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid #e7ebe4;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}

.payment-method-item:hover {
  border-color: var(--green-lime2);
  background: #fafbfa;
}

.payment-method-item.active {
  border-color: var(--green);
  background: rgba(47, 125, 50, 0.03);
  box-shadow: 0 4px 12px rgba(47, 125, 50, 0.05);
}

/* Hình thức thanh toán tạm ngưng: làm mờ và không cho chọn */
.payment-method-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: #f6f7f5;
}
.payment-method-item.disabled:hover {
  border-color: #e7ebe4;
  background: #f6f7f5;
}

.payment-method-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.payment-method-left input[type="radio"] {
  accent-color: var(--green);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.payment-method-left svg {
  color: var(--green);
  width: 18px;
  height: 18px;
}

.payment-method-right img {
  height: 24px;
  object-fit: contain;
}

.terms-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  margin-top: 10px;
}

.terms-checkbox-row input {
  accent-color: var(--green);
  margin-top: 3px;
  cursor: pointer;
}

.terms-checkbox-row a {
  color: var(--green);
  text-decoration: underline;
}

/* Right column checkout products list */
.checkout-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 12px;
}

.checkout-cart-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.checkout-clear-btn {
  font-size: 13px;
  color: #ff3b30;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.checkout-clear-btn:hover {
  text-decoration: underline;
}

.checkout-prods-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.checkout-prod-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 16px;
}

.checkout-prod-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Ảnh giỏ hàng theo khung 3:4 giống thẻ sản phẩm trang chủ.
   checkout.js ưu tiên ảnh đại diện 3:4 (home_image); sản phẩm chưa có ảnh 3:4
   thì dùng ảnh 1:1 và object-fit: cover tự cắt cho vừa khung. */
.checkout-prod-img {
  width: 68px;
  aspect-ratio: 3 / 4;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e7ebe4;
  flex-shrink: 0;
  background: #fff;
}

.checkout-prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Ảnh và tên sản phẩm (kể cả quà tặng) bấm được để sang trang chi tiết */
.checkout-prod-img .checkout-prod-link {
  display: block;
  width: 100%;
  height: 100%;
}
.checkout-prod-name .checkout-prod-link {
  color: inherit;
  text-decoration: none;
  transition: color .15s;
}
.checkout-prod-name .checkout-prod-link:hover {
  color: var(--green-deep);
  text-decoration: underline;
}

.checkout-prod-details {
  flex-grow: 1;
}

.checkout-prod-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 4px;
}

.checkout-prod-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.checkout-prod-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Nút xoá: icon thùng rác + chữ "Xóa", không gạch chân */
.checkout-prod-remove-btn {
  background: none;
  border: none;
  padding: 0;
  color: #3f4a3d;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  line-height: 1;
  transition: color .15s;
}

.checkout-prod-remove-btn svg {
  width: 17px;
  height: 17px;
  display: block;
  flex: 0 0 auto;
}

.checkout-prod-remove-btn:hover {
  color: #ff3b30;
}

.checkout-prod-price-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  text-align: right;
}

.checkout-prod-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--green-deep);
}

.checkout-prod-old-price {
  font-size: 11px;
  color: #aaa;
  text-decoration: line-through;
  display: block;
}

/* Ô số lượng kiểu viên thuốc: viền mảnh, nút − + trong suốt hai đầu */
.checkout-qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e6df;
  border-radius: 999px;
  overflow: hidden;
  height: 38px;
  background: #fff;
}

.checkout-qty-selector button {
  width: 38px;
  height: 100%;
  background: transparent;
  border: none;
  color: #3f4a3d;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.checkout-qty-selector button:hover {
  background-color: var(--green-soft, #eef7e3);
  color: var(--green-deep);
}

.checkout-qty-selector span {
  min-width: 30px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #2c3a2d);
  font-variant-numeric: tabular-nums;
}

/* Promo Code Box */
/* Ô nhập mã giảm giá kiểu viên thuốc: ô nhập và nút đều bo tròn hết cỡ */
.promo-code-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px;
}

.promo-code-row input {
  flex-grow: 1;
  min-width: 0;
  height: 46px;
  border: 1px solid #e2e6df;
  border-radius: 999px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink, #2c3a2d);
  background: #fff;
  transition: border-color .15s;
}

.promo-code-row input::placeholder {
  color: #9aa3a0;
}

.promo-code-row input:focus {
  outline: none;
  border-color: var(--green);
}

.promo-code-btn {
  flex: 0 0 auto;
  height: 46px;
  min-width: 132px;
  background: #6f7570;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.promo-code-btn:hover {
  background: var(--green);
}

/* Account Voucher Suggestions */
.voucher-suggestions {
  margin: 0 0 16px;
}

.voucher-sugg-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.voucher-chip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voucher-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: #f3fbef;
  border: 1px dashed var(--green);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.voucher-chip:hover {
  background: #e7f6df;
}

.voucher-chip .vc-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.voucher-chip .vc-code {
  font-size: 13px;
  font-weight: 800;
  color: var(--green-dark);
  letter-spacing: 0.02em;
}

.voucher-chip .vc-desc {
  font-size: 11px;
  color: #6b7280;
}

.voucher-chip .vc-action {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--green);
  border-radius: 8px;
  padding: 5px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.voucher-chip:hover .vc-action {
  background: var(--green-dark);
}

.voucher-chip.is-applied {
  border-style: solid;
  border-color: #cdd5c6;
  background: #f5f7f3;
  cursor: default;
  opacity: 0.85;
}

.voucher-chip.is-applied .vc-action {
  background: #9ca3af;
}

.voucher-empty {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  padding: 2px 0;
}

.member-warning-box {
  background: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  color: #d46b08;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.member-warning-box svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.member-warning-box a {
  font-weight: 700;
  text-decoration: underline;
}

/* Totals List */
.checkout-totals-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.checkout-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 15.5px;
  color: #555;
}

.checkout-total-row.grand-total {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  border-top: 1px dashed #e5e5e5;
  border-bottom: 1px solid #e7ebe4;
  margin-top: 6px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.checkout-total-row.grand-total span:last-child {
  color: var(--green-deep);
}

/* Checkout Trust Footer Badges */
.checkout-trust-footer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding-top: 0;
}

.trust-badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.trust-badge-icon {
  width: 42px;
  height: 42px;
  background: var(--green-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-deep);
}

.trust-badge-icon svg {
  width: 20px;
  height: 20px;
}

/* Icon ảnh (SVG nhiều màu, vd icon_Freeship) trong huy hiệu tròn: cân theo
   chiều CAO cho bằng các icon vẽ bằng nét ở trên, bề ngang tự co theo tỷ lệ. */
.trust-badge-icon img {
  height: 21px;
  width: auto;
  display: block;
}

.trust-badge-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.trust-badge-desc {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

/* Sản phẩm gợi ý trong trang thanh toán */
.checkout-suggest {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #e7ebe4;
}
.checkout-suggest-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 12px;
}
.checkout-suggest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.suggest-card { display: block; text-decoration: none; min-width: 0; }
/* Khung ảnh 3:4 giống thẻ sản phẩm trang chủ (ô gợi ý ở cột thanh toán vẫn nhỏ) */
.suggest-thumb {
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: #f6f7f5;
}
.suggest-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.suggest-card:hover .suggest-thumb > img { transform: scale(1.06); }
/* Rê chuột lật sang ảnh thứ hai, giống thẻ sản phẩm ở các trang khác */
.suggest-thumb .prod-img-hover {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s; pointer-events: none;
}
.suggest-card:hover .suggest-thumb .prod-img-hover {
  opacity: 1; visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
/* Nhãn / icon nhãn / ảnh quà tặng trên thẻ gợi ý: cùng bố cục 3 góc như thẻ
   sản phẩm thường, thu nhỏ lại cho vừa ô gợi ý ở cột thanh toán. */
.suggest-thumb .prod-tag {
  position: absolute; right: 6px; top: 6px; left: auto;
  padding: 3px 8px; font-size: 9.5px; font-weight: 700; line-height: 1.1;
  border-radius: 999px; background: #fff; color: #111;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08); z-index: 2;
}
/* Ô gợi ý nhỏ nên icon nhãn để 20% (thẻ ở trang khác là 17% của thẻ to hơn
   nhiều). .suggest-thumb chỉ dùng ở trang thanh toán nên không đụng trang nào khác. */
.suggest-thumb .prod-badge-icon { top: 6px; left: 6px; width: 20%; }
.suggest-thumb .prod-gift { left: 6px; bottom: 6px; width: 55%; }
.suggest-name {
  font-size: 12px;
  font-weight: 600;
  color: #3d453e;
  margin-top: 6px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-card:hover .suggest-name { color: var(--green-deep); }
.suggest-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}
.suggest-price-current {
  font-size: 13px;
  font-weight: 800;
  color: var(--green-deep);
}
.suggest-price-old {
  font-size: 11px;
  color: #9aa39b;
  text-decoration: line-through;
  margin-left: auto; /* giá gốc nằm sát góc phải */
}
/* Khung chứa lưới gợi ý + nút mũi tên (nút neo theo khung này) */
.checkout-suggest-viewport { position: relative; }
/* Máy tính: mỗi "trang" trong suốt -> cả 4 thẻ nằm trên lưới 4 cột như cũ */
.suggest-page { display: contents; }
.suggest-next { display: none; }

/* ---------- Nút tròn "thêm nhanh vào giỏ" (mọi thẻ sản phẩm) ----------
   /js/quick-add.js tự gắn nút này vào .prod-thumb, .pd-sg-thumb, .suggest-thumb.
   Nút trong mờ để vẫn nhìn thấy ảnh sản phẩm phía sau. */
.prod-thumb, .pd-sg-thumb, .suggest-thumb { position: relative; }
.qa-btn {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #1f2421;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 32, 18, .1);
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.qa-btn-ic {
  width: 22px;
  height: 22px;
  display: block;
  background: currentColor;
  -webkit-mask: url('/icons/cart-plus.svg') no-repeat center / contain;
  mask: url('/icons/cart-plus.svg') no-repeat center / contain;
}
.qa-btn:hover {
  background: rgba(255, 255, 255, .88);
  color: var(--green-deep);
  transform: scale(1.08);
}
.qa-btn:active { transform: scale(.96); }

/* Cỡ riêng cho từng loại thẻ: thẻ càng nhỏ thì nút càng nhỏ */
.pd-sg-thumb .qa-btn { right: 8px; bottom: 8px; width: 38px; height: 38px; }
.pd-sg-thumb .qa-btn-ic { width: 20px; height: 20px; }
.suggest-thumb .qa-btn { right: 8px; bottom: 8px; width: 34px; height: 34px; }
.suggest-thumb .qa-btn-ic { width: 18px; height: 18px; }

@media (max-width: 760px) {
  /* Điện thoại: mỗi trang 2 sản phẩm (1 hàng 2 cột), vuốt ngang sang trang sau */
  .checkout-suggest-grid {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .checkout-suggest-grid::-webkit-scrollbar { display: none; }
  .suggest-page {
    display: grid;
    flex: 0 0 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    scroll-snap-align: start;
  }
  .suggest-next {
    position: absolute;
    /* Tâm nút nằm ĐÚNG trên cạnh phải của sản phẩm thứ 2 (nửa trong nửa ngoài).
       Nút rộng 34px -> lùi ra 17px. */
    right: -17px;
    /* checkout.js canh top vào đúng giữa ảnh sau khi dựng xong */
    top: 34%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e2e6df;
    border-radius: 50%;
    background: #fff;
    color: var(--green-deep);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 71, 35, .16);
    transition: transform .2s ease, background .16s ease;
  }
  .suggest-next svg { width: 17px; height: 17px; display: block; }
  .suggest-next:hover { background: var(--green-soft); }
  /* Tới trang cuối -> mũi tên quay ngược, bấm là về đầu */
  .suggest-next.at-end { transform: translateY(-50%) rotate(180deg); }
  .prod-thumb .qa-btn { right: 8px; bottom: 8px; width: 36px; height: 36px; }
  .prod-thumb .qa-btn-ic { width: 19px; height: 19px; }
  .pd-sg-thumb .qa-btn { width: 34px; height: 34px; }
  .pd-sg-thumb .qa-btn-ic { width: 18px; height: 18px; }
  .suggest-thumb .qa-btn { right: 7px; bottom: 7px; width: 32px; height: 32px; }
  .suggest-thumb .qa-btn-ic { width: 17px; height: 17px; }
}

/* ============ POPUP THÊM NHANH VÀO GIỎ ============
   Máy tính: hộp thoại giữa màn hình. Điện thoại: tấm trượt lên từ đáy. */
.qa-modal { position: fixed; inset: 0; z-index: 11000; }
.qa-modal[hidden] { display: none; }
.qa-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 32, 18, .48);
  opacity: 0; transition: opacity .22s ease;
}
.qa-modal.open .qa-backdrop { opacity: 1; }
.qa-sheet {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.97);
  width: min(460px, calc(100vw - 32px));
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(18, 40, 16, .28);
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.qa-modal.open .qa-sheet { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.qa-grab { display: none; }
.qa-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; padding: 0;
  border: none; border-radius: 50%;
  background: #f2f4f0; color: #465244;
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, color .15s;
}
.qa-close svg { width: 16px; height: 16px; display: block; }
.qa-close:hover { background: var(--green-soft); color: var(--green-deep); }

.qa-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 40px; }
.qa-thumb {
  width: 96px; aspect-ratio: 3 / 4; flex: 0 0 auto;
  border-radius: 14px; overflow: hidden; background: #f4f6f3;
}
.qa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qa-headinfo { min-width: 0; padding-top: 2px; }
.qa-name {
  font-size: 16px; font-weight: 800; color: var(--ink, #2c3a2d);
  line-height: 1.35; overflow-wrap: anywhere;
}
.qa-price { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; }
.qa-price b { font-size: 19px; font-weight: 800; color: var(--green-deep); }
.qa-price del { font-size: 13px; color: #9aa39b; }
.qa-picked { margin-top: 6px; font-size: 13px; color: #6b7280; }

.qa-body { margin-top: 18px; display: flex; flex-direction: column; gap: 16px; }
.qa-group[hidden] { display: none; }
.qa-label {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #7a857a; margin-bottom: 9px;
}
.qa-colors { display: flex; flex-wrap: wrap; gap: 9px; }
.qa-color {
  width: 52px; aspect-ratio: 1 / 1; padding: 2px;
  border: 2px solid #e6e9e3; border-radius: 11px;
  background: #fff; overflow: hidden; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.qa-color img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.qa-color:hover { transform: translateY(-2px); }
.qa-color.on { border-color: var(--green); }

.qa-label-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.qa-guide-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: none; background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--green); text-transform: none; letter-spacing: 0;
  cursor: pointer; text-decoration: underline;
}
.qa-guide-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.qa-guide-btn:hover { color: var(--green-deep); }

.qa-guide {
  margin-top: 12px;
  padding: 13px 14px;
  border: 1px solid #e6ece0;
  border-radius: 12px;
  background: #f7faf4;
}
.qa-guide[hidden] { display: none; }
.qa-guide-head { font-size: 12.5px; line-height: 1.5; color: #5b665a; }
.qa-guide-table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
  font-size: 13px;
}
.qa-guide-table th, .qa-guide-table td {
  padding: 7px 8px; text-align: left;
  border-bottom: 1px solid #e6ece0;
}
.qa-guide-table th {
  font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; color: #7a857a;
}
.qa-guide-table td { color: var(--ink, #2c3a2d); }
.qa-guide-table td:first-child { font-weight: 800; width: 78px; }
.qa-guide-table tr:last-child td { border-bottom: none; }
.qa-guide-note { margin-top: 9px; font-size: 12px; line-height: 1.5; color: #7a857a; }

.qa-sizes { display: flex; flex-wrap: wrap; gap: 9px; }
.qa-size {
  min-width: 54px; height: 42px; padding: 0 14px;
  border: 1.5px solid #e2e6df; border-radius: 999px;
  background: #fff; color: var(--ink, #2c3a2d);
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.qa-size:hover { border-color: var(--green); color: var(--green-deep); }
.qa-size.on { background: var(--green); border-color: var(--green); color: #fff; }

.qa-foot {
  margin-top: 22px; display: flex; align-items: center; gap: 12px;
}
.qa-qty {
  display: inline-flex; align-items: center; height: 50px;
  border: 1px solid #e2e6df; border-radius: 999px; overflow: hidden;
  flex: 0 0 auto;
}
.qa-qty button {
  width: 44px; height: 100%; border: none; background: transparent;
  color: #3f4a3d; font-family: inherit; font-size: 19px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.qa-qty button:hover { background: var(--green-soft); color: var(--green-deep); }
.qa-qty span {
  min-width: 30px; text-align: center;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.qa-add {
  flex: 1 1 auto; height: 50px;
  border: none; border-radius: 999px;
  background: var(--green); color: #fff;
  font-family: inherit; font-size: 15.5px; font-weight: 800;
  cursor: pointer; transition: background .15s, transform .12s;
}
.qa-add:hover { background: var(--green-deep); }
.qa-add:active { transform: translateY(1px); }

@media (max-width: 640px) {
  /* Điện thoại: tấm trượt lên từ đáy, bo tròn 2 góc trên */
  .qa-sheet {
    left: 0; top: auto; bottom: 0;
    width: 100%;
    max-height: 88vh;
    transform: translateY(14px);
    border-radius: 22px 22px 0 0;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .qa-modal.open .qa-sheet { transform: translateY(0); }
  .qa-grab {
    display: block; width: 42px; height: 4px; margin: 0 auto 14px;
    border-radius: 999px; background: #dfe4dc;
  }
  .qa-close { top: 8px; right: 10px; width: 32px; height: 32px; }
  .qa-thumb { width: 82px; }
  .qa-name { font-size: 15px; }
  .qa-price b { font-size: 18px; }
  .qa-color { width: 46px; }
  .qa-size { min-width: 48px; height: 40px; padding: 0 12px; font-size: 14px; }
  .qa-foot { margin-top: 18px; }
  .qa-qty { height: 48px; }
  .qa-qty button { width: 40px; }
  .qa-add { height: 48px; font-size: 15px; }
}

/* Sticky Bottom Bar */
/* ---- Thanh đặt hàng dính đáy ----
   PC: 1 hàng — cụm thông tin (phương thức thanh toán · voucher) chiếm phần
   rộng bên trái trên nền xanh nhạt, tổng tiền và nút ĐẶT HÀNG dồn sát mép phải,
   nút cao hết thanh và vuông góc để trông như một khối liền.
   Điện thoại: xem @media (max-width: 768px) bên dưới — tách thành 2 hàng. */
.checkout-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Cả thanh dùng CHUNG nền trắng: phần bên trái (thanh toán, voucher, đăng
     nhập) và phần giá bên phải liền một dải, không bị chia hai màu. */
  background: #ffffff;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.10);
  z-index: 1001;
  display: flex;
  align-items: stretch;
  /* Chiều cao cố định: mọi cụm dùng align-items:center nên luôn cân nhau,
     không bị so le khi dòng phụ dài ngắn khác nhau. */
  height: 78px;
}

/* Cụm trái: phương thức thanh toán + voucher */
.csb-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  /* space-evenly (không phải space-around): mọi khoảng hở — kể cả hai mép —
     đều bằng nhau, nên phương thức thanh toán, vạch ngăn và voucher nhìn dàn
     thật đều chứ không bị lệch về một phía. */
  justify-content: space-evenly;
  gap: 20px;
  padding: 0 28px;
  /* Nền xanh nhạt chỉ ôm cụm thanh toán + voucher; phần đăng nhập và giá bên
     phải để nền trắng của cả thanh. */
  background: var(--green-soft);
}
.csb-pay {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
/* Ô icon dùng chung: chứa ảnh SVG (COD), icon nét (ví ZaloPay) hoặc nhãn chữ
   (ATM, VIETQR) — nội dung được sao từ hình thức thanh toán đang chọn. */
.csb-pay-ic { display: inline-flex; align-items: center; flex: 0 0 auto; }
.csb-pay-ic img, .csb-pay-ic svg { height: 22px; width: auto; display: block; }
.csb-pay-ic span { font-size: 10.5px !important; padding: 2px 6px !important; }
/* Cột chữ của cụm thanh toán: tên hình thức ở trên, dòng phụ "Miễn phí vận
   chuyển" ở dưới. Cột tự căn giữa theo chiều dọc so với icon, nên dù có 1 hay
   2 dòng thì icon vẫn nằm đúng giữa khối chữ. */
.csb-pay-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.csb-pay-txt > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.csb-pay-free {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-deep);
}
.csb-pay-free[hidden] { display: none; }
.csb-div { flex: 0 0 auto; width: 1px; height: 28px; background: #c3dcc5; }
.csb-voucher {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.csb-voucher:hover { color: var(--green-deep); }
.csb-voucher-ic {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--green-deep);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.csb-voucher-ic svg { width: 15px; height: 15px; display: block; }
/* Đã áp mã: mã hiện trong viên thuốc xanh. max-width + ellipsis để mã dài
   (hoặc màn hẹp) cũng không đẩy vỡ thanh. */
.csb-voucher > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.csb-voucher.has-code > span:last-child {
  max-width: 210px;
  background: #fff;
  border: 1px solid var(--green);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .3px;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1;
}

/* Cụm phải: tổng tiền + nút đặt hàng */
.csb-checkout {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}
.csb-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 0 28px;
  gap: 3px;
}
.csb-total-val {
  font-size: 23px;
  font-weight: 800;
  color: var(--green-deep);
  line-height: 1.1;
  letter-spacing: -.3px;
}
/* Hàng mời đăng nhập: chỉ dùng ở điện thoại (xem @media 768px). */
.csb-login-row { display: none; }
/* Chữ "Chọn / nhập mã" cũng chỉ dùng ở điện thoại */
.csb-voucher-cta { display: none; }
/* Bản PC của lời mời đăng nhập: ô riêng trên nền trắng, nằm giữa cụm xanh và
   khối giá — cùng màu nền với khối giá đúng như yêu cầu. */
.csb-login-pc {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  /* flex nuốt mất khoảng trắng giữa nút "Đăng nhập" và phần chữ còn lại,
     nên phải trả lại bằng gap — nếu không sẽ dính thành "Đăng nhậpđể dùng…". */
  gap: 5px;
  padding: 0 26px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Đã đăng nhập hoặc đã áp mã -> ẩn cả 2 bản */
.checkout-sticky-bar:not(.show-login) .csb-login-row,
.checkout-sticky-bar:not(.show-login) .csb-login-pc { display: none; }

/* Dòng phụ: "Đăng nhập để dùng mã giảm giá · Tiết kiệm 30.000đ" */
.csb-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.2;
  white-space: nowrap;
}
.csb-save[hidden] { display: none; }
.csb-login {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--green-deep);
  text-decoration: underline;
  cursor: pointer;
}
.csb-login:hover { color: var(--green); }
.csb-save { color: var(--muted); }

.checkout-submit-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 0 44px;
  min-width: 200px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.checkout-submit-btn:hover:not(:disabled):not(.locked) {
  background: var(--green-dark);
}

.checkout-submit-btn:active:not(:disabled):not(.locked) {
  background: var(--green-deep);
}

.checkout-submit-btn:disabled,
.checkout-submit-btn.locked {
  background: #d1d5db;
  color: #6b7280;
  box-shadow: none;
}

/* .locked: nút vẫn bấm được (để hiện popup nhắc tích điều khoản),
   chỉ trông như bị khóa. :disabled mới thật sự chặn click (lúc đang xử lý). */
.checkout-submit-btn.locked {
  cursor: pointer;
}
.checkout-submit-btn:disabled {
  cursor: not-allowed;
}

/* Order Success Modal */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 38, 20, 0.4);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.success-overlay.active {
  opacity: 1;
  visibility: visible;
}

.success-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 32px;
  width: 90%;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-overlay.active .success-card {
  transform: scale(1);
}

.success-icon-wrap {
  width: 72px;
  height: 72px;
  background: #e6f4d2;
  color: var(--green-deep);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px auto;
}

.success-icon-wrap svg {
  width: 36px;
  height: 36px;
}

.success-card h3 {
  font-size: 22px;
  color: var(--ink);
  font-weight: 800;
  margin-bottom: 12px;
}

.success-card p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 28px;
}

.success-btn-home {
  display: block;
  width: 100%;
  background: var(--green);
  color: #ffffff;
  text-align: center;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s;
  text-decoration: none;
}

.success-btn-home:hover {
  background: var(--green-dark);
}

@media (max-width: 1024px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  /* Một cột: đưa GIỎ HÀNG lên trên phần "Thông tin vận chuyển" để bố mẹ soát
     lại đơn rồi mới điền địa chỉ. Trên PC hai cột nên giữ nguyên thứ tự cũ. */
  .checkout-grid > .checkout-cart-box { order: -1; }
  .checkout-grid > form { order: 0; }
  /* Ô lưới mặc định min-width:auto -> hàng sản phẩm dài làm tràn ngang.
     Ép min-width:0 để tên sản phẩm xuống dòng thay vì đẩy giá ra ngoài mép. */
  .checkout-grid > * { min-width: 0; }
  .checkout-prod-details,
  .checkout-gift-info { min-width: 0; }
  .checkout-prod-name { overflow-wrap: anywhere; }
  .csb-meta { gap: 14px; padding: 12px 18px; }
  .csb-total { padding: 10px 18px; }
  .checkout-submit-btn { min-width: 168px; padding: 0 30px; }
}

@media (max-width: 768px) {
  .checkout-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Điện thoại: bỏ khung viền bo tròn của 2 thẻ "Giỏ hàng" và "Thông tin vận
     chuyển" để nội dung dàn hết bề ngang màn hình. Giữ đúng MỘT đường kẻ ngăn
     giữa hai mục, kẻ chạy sát hai mép cho gọn mắt. */
  .checkout-form-box,
  .checkout-cart-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  .checkout-grid { gap: 0; }
  /* Giỏ hàng đang ở trên (order:-1) nên đường kẻ đặt ở đầu phần form bên dưới,
     dùng ::before để kéo kẻ chạm hai mép màn hình. */
  .checkout-grid > form { margin-top: 24px; }
  .checkout-grid > form::before {
    content: '';
    display: block;
    height: 1px;
    background: #e7ebe4;
    margin: 0 -16px 24px;
  }
  /* Điện thoại: bỏ hẳn hàng cam kết (Giao hàng miễn phí / Chính hãng 100%…) và
     khối "Có thể con cũng thích". Khách đã ở bước cuối rồi, hai khối này chỉ kéo
     trang dài thêm và đẩy nút ĐẶT HÀNG ra xa. Máy tính vẫn giữ nguyên cả hai. */
  .checkout-trust-footer,
  .checkout-suggest {
    display: none !important;
  }

  /* Thanh đặt hàng tách 2 hàng: trên là phương thức + voucher (nền xanh nhạt),
     dưới là tổng tiền bên trái và nút ĐẶT HÀNG cao hết hàng bên phải. */
  /* Điện thoại: thanh xếp thành 3 hàng
     1) mời đăng nhập (nền xanh nhạt, chỉ hiện khi chưa đăng nhập)
     2) voucher + "Chọn / nhập mã"
     3) tổng tiền bên trái, nút ĐẶT HÀNG cao hết hàng bên phải */
  .checkout-sticky-bar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  .checkout-sticky-bar.show-login .csb-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 16px;
    background: #fff;
    font-size: 13px;
    color: var(--muted);
  }
  .csb-login-row > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .csb-login-row .csb-login { flex: 0 0 auto; font-size: 13px; }

  /* Hàng 2: phương thức thanh toán bên trái (dài quá thì cắt bằng dấu …),
     voucher và lời gọi "Chọn / nhập mã" bên phải. */
  .csb-meta {
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 16px;
    /* giữ nền xanh nhạt như PC: đây là cụm thanh toán + voucher */
    background: var(--green-soft);
    font-size: 14px;
  }
  .csb-pay { flex: 1 1 auto; min-width: 0; font-size: 13.5px; gap: 8px; }
  .csb-pay img { height: 20px; }
  .csb-pay-free { font-size: 11.5px; }
  .csb-div { height: 20px; }
  .csb-voucher { flex: 0 0 auto; font-size: 13.5px; gap: 8px; }
  .csb-voucher-ic { width: 23px; height: 23px; }
  .csb-voucher-ic svg { width: 13px; height: 13px; }
  .csb-voucher.has-code > span:nth-child(2) { max-width: 110px; font-size: 12.5px; padding: 4px 10px; }
  .csb-voucher-cta {
    display: inline-block;
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }

  /* Hàng đăng nhập và hàng giá cùng nền trắng; chỉ hàng thanh toán + voucher
     ở giữa là nền xanh nhạt. */
  .csb-checkout { align-items: stretch; background: #fff; }
  .csb-total {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    padding: 10px 16px;
  }
  .csb-total-val { font-size: 21px; }
  /* Bản PC của lời mời đăng nhập -> ẩn, vì điện thoại đã có hàng riêng ở trên */
  .csb-login-pc { display: none !important; }
  .csb-sub { flex-wrap: wrap; white-space: normal; row-gap: 2px; font-size: 12px; }
  .checkout-submit-btn { min-width: 146px; padding: 16px 22px; }
}

/* Máy hẹp (iPhone thường): bỏ chữ "Chọn / nhập mã" để nhường chỗ cho tên hình
   thức thanh toán — nếu không nó bị cắt còn mỗi "Thanh toá…". Bản thân viên
   voucher đã đủ rõ là bấm được. */
@media (max-width: 430px) {
  .csb-voucher-cta { display: none; }
  .csb-meta { gap: 12px; }
}

/* ============ CONTACT FORM SECTION ============ */
.contact-section { background: var(--green-light); padding: 60px 0; }
.contact-section .green-title { color: var(--green-deep); }
.contact-form {
  max-width: 560px; margin: 28px auto 0;
  display: flex; flex-direction: column; gap: 14px;
}
.contact-form .cf-row { display: flex; gap: 14px; }
.contact-form .cf-row input { flex: 1; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid #cdd5c6; border-radius: 12px;
  padding: 13px 16px; font-size: 15px; font-family: inherit; background: #fff;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--green); }
.contact-form .btn-primary { align-self: center; border: none; cursor: pointer; }
.cf-status { text-align: center; font-size: 14px; margin: 4px 0 0; }
.cf-status.ok { color: var(--green-deep); font-weight: 600; }
.cf-status.err { color: #e53935; }

@media (max-width: 600px) {
  .contact-form .cf-row { flex-direction: column; }
}

/* ============================================================= */
/* ============ TRANG CHI TIẾT SẢN PHẨM (product.html) ========= */
/* ============================================================= */
.container-wide { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 28px; }

.pd-page { padding-bottom: 60px; }

/* Breadcrumb */
.breadcrumb { padding: 16px 0 4px; font-size: 15px; color: var(--muted); font-weight: 500; }
.breadcrumb .container { max-width: 100%; padding: 0 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px !important; line-height: 1; }
.breadcrumb a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.breadcrumb a:hover { color: var(--green); }
.breadcrumb .bc-home { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.breadcrumb .bc-home svg { display: block; width: 17px !important; height: 17px !important; transform: translateY(-1px) !important; }
.breadcrumb .sep { margin: 0; color: #c7ccc4; display: inline-flex; align-items: center; line-height: 1; }
.breadcrumb .cur { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; line-height: 1; }


.pd-loading { padding: 80px 0; text-align: center; color: var(--muted); font-size: 16px; }
.pd-loading a { color: var(--green); text-decoration: underline; }

/* ---- Khối trên: gallery trái + thông tin phải ---- */
.pd-top {
  display: grid;
  /* Cột thông tin bên phải: rộng hơn mức 552px của keenfootwear.com một chút,
     vì nội dung XIXA có thêm khối chứng nhận 5 icon — đúng 552px thì hàng icon
     vừa khít 0px dư và icon đang chọn (phóng to 1.08) bị tràn ra mép.
     Track 620px đã gồm cả lề trái 45px (khoảng cách với ảnh) và lề phải 28px,
     nên phần CHỮ rộng ~547px (bản gốc chỉ 420px).
     Màn hẹp hơn thì co theo 42vw nhưng không dưới 420px để nút mua và ô chọn
     size không bị bó.
     Chỉ áp dụng cho PC — từ 1080px trở xuống quy tắc bên dưới xếp thành 1 cột. */
  grid-template-columns: minmax(0, 1fr) clamp(420px, 42vw, 620px);
  gap: 40px;
  align-items: start;
  margin-top: 14px;
}

/* Gallery */
.pd-gallery-wrap { position: sticky; top: 96px; }
.pd-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-gcell {
  background: #f4f6f3; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer;
}
.pd-gcell img { width: 100%; height: 100%; object-fit: cover; }
.pd-gcell-video { cursor: default; background: #000; }
.pd-gcell-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-dots { display: none; }
/* Dải ảnh nhỏ dọc chỉ dùng cho giao diện điện thoại (xem @media max-width: 760px).
   Trên desktop thư viện đã xếp lưới 2 cột nên không cần. */
.pd-gthumbs { display: none; }

/* Thông tin */
.pd-info { padding-top: 6px; }
.pd-brand {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 400; font-size: 18px; letter-spacing: .2px;
}
.pd-brand img { width: 22px; height: 22px; display: block; }
.pd-brand span { color: var(--ink); font-weight: 400; }
.pd-tag {
  display: inline-block; background: var(--green-soft); color: var(--green-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .4px; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
  font-family: var(--font) !important;
}
.pd-name { font-size: 30px; line-height: 1.2; color: var(--ink); font-weight: 500; }
/* Hàng sao đánh giá + nút "Chia sẻ" đẩy sang mép phải cùng dòng */
.pd-rating-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 14px; }
.pd-rating-row .pd-rating { margin: 0; }
.pd-share {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--green); line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.pd-share img { width: 19px; height: 19px; display: block; }
.pd-share:hover { color: var(--green-deep); }
.pd-share:hover span { text-decoration: underline; }
.pd-rating { display: flex; align-items: center; gap: 5px; margin: 10px 0 14px; cursor: pointer; }
.pd-rating:hover .pd-reviews { text-decoration: underline; }
.pd-stars { display: inline-flex; gap: 2px; align-items: center; }
.pd-rating .star { color: #d9d9d9; display: inline-flex; align-items: center; }
.pd-rating .star .star-svg { width: 18px; height: 18px; display: block; }
.pd-rating .star.on { color: var(--green); }
.pd-reviews { font-size: 14px; color: var(--ink); display: inline-flex; align-items: center; height: 18px; line-height: 1; }

.pd-price-block { margin-bottom: 22px; }
.pd-old { font-size: 16px; color: var(--muted); text-decoration: line-through; margin-bottom: 3px; }
.pd-price-row { display: flex; align-items: center; gap: 12px; }
.pd-price { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.5px; }
.pd-discount { background: var(--green); color: #fff; font-size: 12px; font-weight: 400; padding: 4px 10px; border-radius: 999px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.pd-voucher-row { margin: -10px 0 22px; }
.pd-freeship { font-size: 15px; color: var(--muted); margin-bottom: 18px; display: flex; align-items: center; gap: 4px; }
/* Trong icon, chiếc xe nằm nửa dưới còn đồng hồ nhô lên trên trái, nên tâm khung
   icon KHÔNG phải tâm chiếc xe (đo được: tâm xe thấp hơn tâm khung 6.39 đơn vị
   SVG ≈ 3.9px ở cỡ 21px). Dịch icon lên đúng khoảng đó để dòng chữ thẳng hàng
   với chiếc xe, đồng hồ nhô nhẹ lên trên — đúng như thiết kế. */
.pd-freeship-ic { width: 21px; height: 21px; display: block; flex: 0 0 auto; transform: translateY(-3.9px); }
.pd-voucher { display: inline-block; background: var(--green-soft); color: var(--green-deep); border: 1px dashed var(--green); font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 8px; }

.pd-field { margin-bottom: 18px; }
.pd-label { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.pd-label b { color: var(--ink); }
.pd-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
/* Viên chọn màu: màu đang xem là <span>, các màu khác là <a> sang trang sản
   phẩm của màu đó -> cần display:block để nhận width/height. */
.pd-swatch {
  display: block;
  width: 60px; height: 60px; border-radius: 0; cursor: pointer; overflow: visible;
  padding: 0; background: #f4f4f4; border: none;
  position: relative;
  transition: transform .12s;
  text-decoration: none;
}
.pd-swatch::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green);
  z-index: 2;
  transform: scaleX(0);
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pd-swatch:hover::after {
  transform: scaleX(1);
  opacity: 0.55;
}
.pd-swatch.active::after {
  transform: scaleX(1);
  opacity: 1;
}
.pd-swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-swatch:hover { transform: translateY(-2px); }

/* CHỈ PC (>=761px): ảnh phân loại màu LUÔN 5 ảnh/hàng ở mọi độ phân giải,
   tự phóng to theo bề rộng cột, thừa thì xuống hàng 2. (Mobile <=760px giữ nguyên.) */
@media (min-width: 761px) {
  .pd-swatch {
    flex: 0 0 calc((100% - 4 * 12px) / 5);
    max-width: calc((100% - 4 * 12px) / 5);
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
  }
}

.pd-size { position: relative; width: 100%; }
.pd-size-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--ink);
  background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.pd-size-trigger:hover { border-color: var(--green-light); }
.pd-size.open .pd-size-trigger { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.pd-size-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-size-caret { display: flex; color: var(--muted); transition: transform .2s; }
.pd-size.open .pd-size-caret { transform: rotate(180deg); color: var(--green); }

.pd-size-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20, 40, 25, .14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
}
.pd-size.open .pd-size-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.pd-size-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: background .12s;
}
.pd-size-opt:hover { background: var(--green-soft); }
.pd-size-opt.active { background: var(--green-soft); }
.pd-size-lbl { font-size: 15px; font-weight: 600; color: var(--ink); }
.pd-size-opt.active .pd-size-lbl { color: var(--green-deep); }
.pd-size-desc { font-size: 13px; color: var(--muted); }
.pd-size-opt.active { position: relative; }
.pd-size-opt.active::after {
  content: '✓'; color: var(--green); font-weight: 800; font-size: 14px; margin-left: 4px;
}

.pd-buy { display: flex; gap: 12px; margin: 22px 0; }
.pd-qty {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  background: #f2f3f5;
  overflow: hidden;
  height: 50px;
}
.pd-qty button {
  width: 44px;
  height: 100%;
  font-size: 20px;
  color: #333;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}
.pd-qty button:hover {
  opacity: 0.6;
}
.pd-qty input {
  width: 48px;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #111;
}
.pd-qty input:focus {
  outline: none;
}
.pd-add {
  flex: 1;
  border-radius: 999px;
  padding: 0 24px;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  background: var(--green);
  color: #fff;
  border: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.pd-add:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.pd-add:active {
  transform: translateY(0);
}

/* Hộp xanh "Cách XIXA tạo ra sản phẩm này" */
.pd-howbox { background: var(--green-soft); border-radius: 16px; padding: 18px 20px; margin: 22px 0; }
.pd-howbox-title { font-weight: 700; color: var(--green-deep); margin-bottom: 14px; font-size: 15px; }
.pd-feats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.pd-feat { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-feat img { width: 46px; height: 46px; }
.pd-feat span { font-size: 12.5px; line-height: 1.35; color: var(--ink); }

/* Accordion chi tiết */
.pd-accordion { border-top: 1px solid var(--line); margin-top: 20px; }
.pd-acc-head {
  width: 100%; display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 0; font-size: 17px; font-weight: 700; color: var(--ink); text-align: left;
  line-height: 1.3;
}
.pd-acc-head > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 4px;
}
.pd-acc-ic {
  font-size: 24px;
  color: var(--green);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 24px;
  align-self: flex-start;
}
.pd-acc-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-bottom: 0;
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.25s ease-out, padding-bottom 0.3s ease-out;
}
.pd-acc-body.open {
  max-height: 800px;
  opacity: 1;
  padding-bottom: 18px;
}
.pd-spec { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.pd-spec span { color: var(--muted); }
.pd-spec b { font-weight: 400; }
.pd-desc { margin-top: 14px; font-size: 15px; line-height: 1.75; color: #3a423b; }
/* Không justify: cột mô tả chỉ rộng ~370-420px, canh đều làm giãn khoảng trắng
   không đều (rõ nhất trên màn 1080p / DPI 1x). Canh trái cho khoảng cách chữ ổn định. */
.pd-desc p, .pd-desc li { text-align: left; overflow-wrap: break-word; }
.pd-desc p { margin: 0 0 10px; }
.pd-desc ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.pd-desc ol { margin: 0 0 12px; padding-left: 22px; list-style: decimal; }
.pd-desc li { margin: 4px 0; }
.pd-desc hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.pd-desc a { color: var(--green-deep); text-decoration: underline; }

/* Chính sách */
.pd-policies { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.pd-policy { display: flex; align-items: flex-start; gap: 20px; }
.pd-policy-ic { width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain; margin-top: 2px; }
.pd-policy-text b { display: block; font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.pd-policy-text p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; text-align: justify; }
.pd-policy-text a { color: var(--green); text-decoration: underline; }

/* ---- 3 ảnh chi tiết ---- */
.pd-details { margin-top: 56px; max-width: 100%; padding: 0; }
.pd-detimgs { --sq: min(calc(100vh - 111px), 60vw); display: flex; gap: 8px; height: var(--sq); border-radius: 0; overflow: hidden; align-items: stretch; }
.pd-detimg { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer;
  transition: flex-grow .55s cubic-bezier(.4,0,.2,1), flex-basis .55s cubic-bezier(.4,0,.2,1); }
.pd-detimg.active { flex: 0 0 var(--sq); height: 100%; }
.pd-detimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.pd-detimg:not(.active) img { transform: scale(1.04); }
.pd-detimg.active .pd-detimg-plus { display: none; }
.pd-detimg-plus {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: background .15s, transform .15s;
}
.pd-detimg-plus:hover { background: #fff; transform: scale(1.08); }
.pd-detimg figcaption {
  position: absolute; left: 0; bottom: 0; width: 100%; padding: 18px 20px;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff;
}
.pd-detimg figcaption b { display: block; font-size: 30px; line-height: 1.2; }
.pd-detimg figcaption small { font-size: 13px; opacity: .9; }
.pd-detimg:not(.active) figcaption b { font-size: 30px; }
.pd-detimg:not(.active) figcaption small { display: none; }

/* Lightbox */
/* Lightbox toàn màn hình: 1 trang, không cuộn (stage co giãn + thanh mua hàng ở đáy) */
body.lightbox-open { overflow: hidden; }
html:has(body.lightbox-open) { overflow: hidden; }
.pd-lightbox { overscroll-behavior: contain; }
/* Nâng nút chat AI lên trên thanh thêm giỏ hàng ở đáy lightbox (không che nút mua) */
html body.lightbox-open .xb-fab,
html body.lightbox-open .xb-panel {
  transform: translateY(calc(-1 * var(--lb-foot-h, 0px) - 8px));
}
/* Khung chat lúc ĐÓNG vẫn nằm đè giữa màn hình (opacity:0 nhưng ô nhập bên trong
   lại pointer-events:auto) nên nuốt mất cú chạm vào nút +/− của bảng zoom.
   Ẩn hẳn khi lightbox mở; mở chat thì .open trả lại bình thường. */
html body.lightbox-open .xb-panel:not(.open) {
  visibility: hidden;
}
.pd-lightbox {
  position: fixed; inset: 0; background: #f3f4f2; z-index: 2000;
  display: flex; flex-direction: column;
}
.pd-lightbox[hidden] { display: none; }
.pd-lightbox-stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  /* Bỏ hết padding: khung xem phủ kín màn hình -> ảnh phóng to tràn ra sát hai
     mép trái/phải và chạm mép trên, đáy chạm thanh bot bar.
     Nút qua/lại nằm đè lên ảnh (position:absolute) nên không cần chừa chỗ. */
  padding: 0;
}
.pd-lightbox-imgwrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* Khi phóng to, phần ảnh tràn ra ngoài phải bị cắt gọn trong khung */
  overflow: hidden;
  touch-action: none;   /* tự xử lý chạm: chụm để zoom, kéo để di chuyển */
}
/* Hiệu ứng trượt khi đổi ảnh. Đặt trên KHUNG chứ không đặt trên thẻ ảnh, vì
   transform của ảnh đang dành cho zoom/kéo -> tránh giẫm chân nhau. */
.pd-lightbox-imgwrap.lb-slide {
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .26s ease;
}
@media (prefers-reduced-motion: reduce) {
  .pd-lightbox-imgwrap.lb-slide { transition: opacity .2s ease; }
}
/* height:100% thay cho max-height:100% -> ảnh PHÓNG TO lấp đầy chiều cao khung.
   max-height chỉ biết thu nhỏ, nên trên màn 2K (khung cao ~1330px) ảnh gốc
   1000px giữ nguyên kích thước và hụt hai đầu. width:auto giữ đúng tỉ lệ,
   max-width:100% chặn tràn với ảnh quá ngang. */
.pd-lightbox-stage img {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
/* Có hiệu ứng mượt khi bấm nút/nhấp đúp, nhưng TẮT lúc đang kéo hoặc chụm
   để ảnh bám ngón tay/chuột theo thời gian thực, không bị trễ. */
.pd-lightbox-stage img.lb-anim { transition: transform .22s cubic-bezier(.22,1,.36,1); }
.pd-lightbox-stage img.lb-zoomed { cursor: grab; }
.pd-lightbox-stage img.lb-dragging { cursor: grabbing; }
/* Nút qua lại + đóng kiểu XIXA: tròn trắng, mũi tên/X xanh */
.pd-lightbox-nav, .pd-lightbox-close {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,.16);
  transition: transform .15s ease, background .15s ease;
}
.pd-lightbox-nav:hover { background: var(--green-soft); }
.pd-lightbox-close:hover { background: var(--green-soft); transform: scale(1.06); }
.pd-lightbox-nav svg { width: 24px; height: 24px; display: block; }
.pd-lightbox-close svg { width: 24px; height: 24px; display: block; }
.pd-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.pd-lightbox-prev { left: 24px; }
.pd-lightbox-next { right: 24px; }
.pd-lightbox-close { position: absolute; top: 22px; right: 24px; z-index: 5; box-shadow: none; }
/* ----- Bảng điều khiển zoom (viên thuốc trắng, chữ/icon xanh XIXA) ----- */
.lb-zoom-ctl {
  position: absolute;
  left: 24px; bottom: 22px;
  z-index: 4;
  display: flex; align-items: center; gap: 2px;
  padding: 5px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(31,71,35,.16);
  transition: opacity .2s ease;
}
.lb-zoom-btn {
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: transparent; color: var(--green);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lb-zoom-btn svg { width: 19px; height: 19px; display: block; }
.lb-zoom-btn:hover:not(:disabled) { background: var(--green-soft); }
.lb-zoom-btn:disabled { color: #b9c2b6; cursor: default; }
.lb-zoom-level {
  min-width: 62px; height: 38px; padding: 0 8px;
  border: none; background: transparent; border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 800;
  color: var(--green-deep); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease;
}
.lb-zoom-level:hover { background: var(--green-soft); }
.lb-zoom-sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }
/* Chữ "· Thu nhỏ" cạnh số phần trăm: chỉ dùng cho bản điện thoại */
.lb-zoom-word { display: none; }

/* ----- Gợi ý thao tác ----- */
.lb-zoom-hint {
  position: absolute;
  /* Nằm ngay dưới nút X (nút cao 56px, cách mép trên 22px) */
  left: 50%; top: 90px; bottom: auto; transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(31,36,33,.82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lb-zoom-hint svg { width: 16px; height: 16px; flex: 0 0 auto; }
.lb-zoom-hint.show { opacity: 1; visibility: visible; }

/* Khi đang phóng to: làm mờ nút qua/lại để không rối mắt, vẫn bấm được */
.pd-lightbox.is-zoomed .pd-lightbox-nav { opacity: .35; }
.pd-lightbox.is-zoomed .pd-lightbox-nav:hover { opacity: 1; }

/* Trên điện thoại / máy cảm ứng: bỏ các nút bấm − + ⛶ vì đã có cử chỉ thay thế
   (chụm 2 ngón để phóng to, chạm 2 lần để bật/tắt nhanh). Chỉ còn một viên
   thuốc gọn "250% · Thu nhỏ" hiện KHI ĐANG PHÓNG TO — chạm vào là ảnh về vừa
   khung. Lúc xem bình thường thì không có gì che ảnh. */
@media (max-width: 768px), (hover: none) {
  .lb-zoom-btn,
  .lb-zoom-sep { display: none; }
  .lb-zoom-word { display: inline; }

  .lb-zoom-ctl {
    display: none;                       /* chỉ hiện khi đã phóng to */
    left: 50%; right: auto;
    transform: translateX(-50%);
    bottom: 14px;
    padding: 0;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 16px rgba(31, 71, 35, .18);
  }
  .pd-lightbox.is-zoomed .lb-zoom-ctl { display: flex; }

  .lb-zoom-level {
    min-width: 0;
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: 999px;
  }
  .lb-zoom-level:hover { background: transparent; }
}

@media (max-width: 768px) {
  /* Trải gần hết bề ngang máy: neo cả hai mép thay vì left:50%. Dùng left:50%
     thì hộp chỉ co trong nửa màn hình còn lại nên chữ bị cắt cụt. */
  .lb-zoom-hint {
    left: 14px;
    right: 14px;
    transform: none;
    max-width: none;
    /* Dưới nút X phiên bản mobile (cách mép trên 14px, nút cao 48px) */
    top: 72px;
    bottom: auto;
    justify-content: center;
    text-align: center;
    /* Cỡ chữ tự co theo bề ngang máy: nhỏ nhất 11px, lớn nhất 13px */
    font-size: clamp(11px, 3.3vw, 13px);
    padding: 9px 14px;
    gap: 8px;
    white-space: normal;   /* hiện đủ chữ, tự xuống dòng khi máy quá hẹp */
    line-height: 1.4;
    border-radius: 14px;
  }
  .lb-zoom-hint svg { width: 15px; height: 15px; }
}

/* Chấm tròn (mobile) — bọc trong một viên thuốc bo tròn cho gọn mắt,
   thay vì các chấm nằm trơ trên nền trắng. */
.pd-lightbox-dots {
  display: none; justify-content: center; align-items: center; gap: 8px;
  width: -moz-fit-content; width: fit-content;
  margin: 8px auto 14px;
  padding: 9px 16px;
  background: #f2f5ef;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pd-lightbox-dots .lb-dot {
  width: 8px; height: 8px; border-radius: 999px; background: #cfd6cd; cursor: pointer;
  /* Chấm đang chọn giãn dài ra mượt mà thay vì nhảy phắt sang */
  transition: background .28s ease, width .34s cubic-bezier(.22, 1, .36, 1);
}
.pd-lightbox-dots .lb-dot:hover { background: var(--green-lime); }
.pd-lightbox-dots .lb-dot.on { background: var(--green); width: 24px; }
/* Thanh mua hàng tái dùng -> nằm tĩnh ở đáy lightbox */
.pd-lightbox-foot { width: 100%; flex: 0 0 auto; }
.pd-lightbox-foot .sticky-product-bar,
.pd-lightbox-foot .sticky-product-botbar {
  position: relative !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important;
  box-shadow: none; border-top: 1.5px solid var(--line); border-bottom: none;
}

/* ============================================================
   THÔNG BÁO "ĐÃ THÊM VÀO GIỎ HÀNG"
   Thẻ có ảnh 3:4 của sản phẩm + tên + phân loại + số lượng.
   Vị trí: nổi ngay DƯỚI ICON GIỎ HÀNG ở góc trên bên phải, trượt xuống khi hiện.
   --stack-top (chiều cao topbar + header) do /js/script.js đo lại theo từng
   khổ màn hình, nên thông báo luôn nằm sát dưới header ở cả máy tính lẫn điện thoại.
   HTML do /js/quick-add.js dựng (window.xixaCartToast).
   ============================================================ */
.cart-toast-card {
  position: fixed; right: 24px; top: calc(var(--stack-top, 110px) + 12px); bottom: auto; left: auto;
  z-index: 12000;                 /* trên popup thêm nhanh (11000) */
  display: flex; align-items: flex-start; gap: 14px;
  width: min(400px, calc(100vw - 32px));
  padding: 14px;
  background: #fff; color: var(--ink, #2c3a2d);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(18, 40, 16, .18);
  opacity: 0; visibility: hidden;
  transform: translateY(-16px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
}
.cart-toast-card.show { opacity: 1; visibility: visible; transform: translateY(0); }
.cart-toast-card .ct-thumb {
  flex: 0 0 auto; width: 64px; aspect-ratio: 3 / 4;
  border-radius: 10px; overflow: hidden; background: #f4f6f3;
}
.cart-toast-card .ct-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-toast-card .ct-body { min-width: 0; flex: 1 1 auto; padding-right: 18px; }
.cart-toast-card .ct-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; color: var(--green-deep);
}
.cart-toast-card .ct-ic { width: 15px; height: 15px; flex: 0 0 15px; }
.cart-toast-card .ct-name {
  margin-top: 5px; font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  line-clamp: 2; overflow: hidden;
}
.cart-toast-card .ct-meta {
  margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 12.5px; color: #6b7280;
}
.cart-toast-card .ct-link {
  display: inline-block; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: var(--green-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.cart-toast-card .ct-close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%;
  background: none; color: #9aa39b; cursor: pointer;
  display: grid; place-items: center;
}
.cart-toast-card .ct-close:hover { background: #f2f4f0; color: #465244; }
.cart-toast-card .ct-close svg { width: 13px; height: 13px; }

@media (max-width: 600px) {
  .cart-toast-card {
    right: 12px; left: 12px; width: auto;
    top: calc(var(--stack-top, 110px) + 8px);
    gap: 12px; padding: 12px; border-radius: 14px;
  }
  .cart-toast-card .ct-thumb { width: 56px; }
  .cart-toast-card .ct-name { font-size: 13.5px; }
}

/* Kiểu cũ (pill xanh) — giữ lại làm lối dự phòng */
.cart-toast {
  position: fixed; left: 50%; bottom: 28px;
  z-index: 4000;
  display: flex; align-items: center; gap: 10px;
  max-width: min(92vw, 560px);
  padding: 14px 24px;
  background: var(--green); color: #fff;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  font-size: 15px; font-weight: 600; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(20px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
  pointer-events: none;
}
.cart-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cart-toast-ic { width: 20px; height: 20px; flex: 0 0 20px; color: #fff; }
.cart-toast-text { min-width: 0; overflow: hidden; }
.cart-toast-name { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 700; }
@media (max-width: 600px) {
  .cart-toast { bottom: 80px; max-width: 92vw; padding: 11px 18px; font-size: 13.5px; gap: 8px; }
  .cart-toast-ic { width: 18px; height: 18px; flex: 0 0 18px; }
  .cart-toast-name { max-width: 120px; }
}

/* ---- Gợi ý ---- */
.pd-suggest { margin-top: 64px; }
.pd-suggest-title { font-size: 26px; font-weight: 800; color: var(--green-deep); margin-bottom: 24px; }
.pd-suggest-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
/* "Có thể con thích mang" dùng đúng lưới + kích thước thẻ của trang chủ */
@media (min-width: 1081px) {
  .pd-suggest {
    width: 80.7292vw;
    max-width: 3100px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .pd-suggest-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.0417vw, 40px);
  }
}
.pd-suggest-dots { display: none; }
.pd-sg-card { display: block; min-width: 0; }
.pd-sg-card .swatches-row { margin: 4px 0 6px !important; }
.pd-sg-thumb { position: relative; background: #f4f6f3; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4; }
.pd-sg-thumb > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Cùng lý do như .prod-img-hover: không giữ lớp GPU vĩnh viễn cho mọi thẻ */
.pd-sg-img-hover { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.pd-sg-thumb:hover .pd-sg-img-hover { opacity: 1; will-change: opacity; }
/* Nhãn thẻ gợi ý: kiểu viên thuốc chữ đen nền trắng, góc phải trên (xem khối chung ở trên) */
.pd-sg-tag { position: absolute; z-index: 2; font-family: var(--font) !important; }
.pd-sg-sw { display: flex; align-items: center; gap: 7px; margin: 12px 0 6px; }
.pd-sg-name { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-sg-price { display: flex; align-items: center; }
.pd-sg-price span { font-weight: 700; color: var(--green-deep); line-height: 1; }
.pd-sg-price-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* PC: dồn giá bán - nhãn -X% - giá gốc về sát mép trái, giống thẻ sản phẩm ở
   trang chủ và các trang danh mục (xem .prod-price-box ở phần PRODUCTS). */
@media (min-width: 1081px) {
  .pd-sg-price { gap: 10px; }
  .pd-sg-price-right { margin-left: 0; flex-wrap: nowrap; }
}
.pd-sg-price-right .price-discount { color: #fff; }
.pd-sg-price-right small { font-size: 13px; color: var(--muted); text-decoration: line-through; line-height: 1; }

/* ---- Responsive ---- */
/* CHỈ PC (>1080px): dựng lại khối ảnh + thông tin theo đúng cách
   keenfootwear.com bố trí, để ô ảnh bên trái to hẳn lên.
   - Khối chạy sát mép màn hình (bỏ lề 28px của .container-wide) như KEEN;
     phần lề thu được dồn hết cho cột ảnh.
   - Bỏ khoảng cách giữa 2 cột; khoảng thở giữa ảnh và chữ do padding trái 45px
     của cột thông tin đảm nhiệm (KEEN cũng dùng đúng 45px).
   - Cột thông tin còn 462px nội dung — bằng đúng số đo trên trang KEEN.
   Máy tính bảng (761–1080px) và điện thoại KHÔNG bị ảnh hưởng. */
@media (min-width: 1081px) {
  /* Lề trái 28px = đúng lề .container-wide, nên mép trái cột ảnh thẳng hàng với
     breadcrumb phía trên và các khối "Chi tiết sản phẩm", "Đánh giá" phía dưới
     (ảnh không còn dán sát mép màn hình). Lề phải để 0 vì .pd-info tự có 28px. */
  .pd-top { padding-left: 28px; padding-right: 0; gap: 0; }
  /* Lề trái 45px = khoảng cách giữa ảnh và cột thông tin (giữ như thiết kế cũ).
     Lề phải 28px = đúng lề .container-wide, nên mép phải của cột thông tin
     thẳng hàng với các khối "Chi tiết sản phẩm", "Đánh giá" bên dưới. */
  .pd-info { padding: 6px 28px 0 45px; }
  /* Các ô ảnh xếp khít nhau, không khe ngang lẫn khe dọc. Bỏ luôn bo góc: để
     nguyên bo góc thì chỗ 4 ô giáp nhau sẽ hở ra 4 góc trắng hình cánh quạt. */
  .pd-gallery { gap: 0; }
  .pd-gcell { border-radius: 0; }

  /* Cỡ chữ cột phải to theo bề ngang mới: nội dung từ 420px lên 527px (×1.25),
     chữ tăng ~1.15 lần — đủ tương xứng mà không làm tiêu đề vỡ dòng.
     Các ô bấm (chọn size, số lượng, nút mua) cao lên tương ứng để không bị lùn
     so với chữ. */
  .pd-brand { font-size: 20px; }
  .pd-name { font-size: 34px; }
  .pd-reviews { font-size: 15px; }
  .pd-old { font-size: 17px; }
  .pd-price { font-size: 34px; }
  .pd-discount { font-size: 13px; padding: 5px 11px; }
  .pd-freeship { font-size: 16px; }
  .pd-label { font-size: 15.5px; }
  .size-guide-btn { font-size: 15px; }
  .pd-size-trigger { font-size: 16.5px; padding: 15px 18px; }
  .pd-size-opt { padding: 13px 16px; font-size: 15.5px; }
  .pd-qty { height: 56px; }
  .pd-qty button { width: 48px; font-size: 22px; }
  .pd-qty input { font-size: 17px; }
  .pd-add { height: 56px; font-size: 17.5px; }
  .pd-feat img { width: 52px; height: 52px; }
  .pd-feat span { font-size: 14px; }
  .pd-acc-head { font-size: 19px; }
  .pd-acc-subtext { font-size: 14.5px; }

  /* Icon "Chứng nhận an toàn" và chữ trong ô mô tả: xem cuối phần
     CHỨNG NHẬN AN TOÀN (phải đặt sau khối đó thì rule mới không bị đè). */
}

@media (max-width: 1080px) {
  .pd-top { grid-template-columns: 1fr; gap: 28px; }
  .pd-gallery-wrap { position: static; }
  .pd-suggest-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .container-wide, .breadcrumb .container { padding: 0 16px; }
  /* Gallery -> vuốt ngang 1 ảnh, xem 5 ảnh còn lại */
  .pd-gallery {
    display: flex; grid-template-columns: none; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-gallery::-webkit-scrollbar { display: none; }
  .pd-gcell { flex: 0 0 100%; scroll-snap-align: center; border-radius: 14px; }

  /* ---- Dải ảnh nhỏ dọc, nổi bên trái trong khung ảnh lớn (chỉ điện thoại) ----
     Ảnh chưa xem để mờ, ảnh đang xem hiện rõ hoàn toàn — không viền, không đổ
     bóng, để dải ảnh chìm vào khung ảnh lớn.
     Nhiều ảnh thì dải này tự cuộn dọc, mép nào còn ảnh sẽ được làm mờ dần. */
  /* relative để neo dải ảnh nhỏ; PHẢI huỷ 'top: 96px' của bản sticky ở desktop,
     nếu không khung ảnh bị đẩy tụt xuống 96px và đè lên phần chọn màu bên dưới. */
  .pd-gallery-wrap { position: relative; top: auto; }
  .pd-gthumbs {
    display: flex; flex-direction: column; gap: 8px;
    position: absolute; left: 12px; top: 12px; z-index: 3;
    max-height: calc(100% - 24px);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: none; mask-image: none;
    transition: -webkit-mask-image .2s, mask-image .2s;
  }
  .pd-gthumbs::-webkit-scrollbar { display: none; }
  .pd-gthumbs:empty { display: none; }
  /* Mờ dần mép còn ảnh chưa cuộn tới */
  .pd-gthumbs.can-down:not(.can-up) {
    -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(#000 calc(100% - 26px), transparent);
  }
  .pd-gthumbs.can-up:not(.can-down) {
    -webkit-mask-image: linear-gradient(transparent, #000 26px);
            mask-image: linear-gradient(transparent, #000 26px);
  }
  .pd-gthumbs.can-up.can-down {
    -webkit-mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(transparent, #000 26px, #000 calc(100% - 26px), transparent);
  }
  .pd-gthumb {
    position: relative; flex: 0 0 auto;
    width: 46px; height: 46px; padding: 0; border: 0;
    border-radius: 11px; overflow: hidden; background: transparent; cursor: pointer;
    /* .5 là mức mờ thấp nhất còn nhìn rõ: ảnh sản phẩm nền trắng mà mờ hơn nữa
       thì gần như biến mất trên khung ảnh cũng màu trắng. */
    opacity: .5; -webkit-tap-highlight-color: transparent;
    transition: opacity .3s ease, transform .3s ease;
  }
  .pd-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pd-gthumb.is-on { opacity: 1; }
  .pd-gthumb:active { transform: scale(.94); }
  /* Ô video: thêm dấu play nhỏ cho dễ nhận ra */
  .pd-gthumb-video::after {
    content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .3);
  }
  .pd-gthumb-play {
    position: absolute; left: 50%; top: 50%; z-index: 1;
    width: 0; height: 0; transform: translate(-38%, -50%);
    border-left: 10px solid #fff;
    border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent;
  }
  @media (prefers-reduced-motion: reduce) {
      .pd-gthumb, .pd-gthumb.is-on { transition: none; transform: none; }
  }

  .pd-dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
  .pd-dot { width: 7px; height: 7px; border-radius: 50%; background: #d3d8d1; transition: background .2s, width .2s; }
  .pd-dot.on { background: var(--green); width: 18px; border-radius: 4px; }

  .pd-name { font-size: 24px; }
  .pd-detimg figcaption b { font-size: 24px; }
  .pd-price { font-size: 24px; }
  .pd-feats { gap: 8px; }
  .pd-feat span { font-size: 11px; }

  /* 3 ảnh chi tiết -> accordion dọc: bung/co theo chiều cao (giống PC nhưng theo trục dọc) */
  .pd-detimgs { flex-direction: column; height: auto; gap: 8px; --sq: calc(100vw - 32px); border-radius: 0; }
  .pd-detimg { flex: none; height: 96px; aspect-ratio: auto; border-radius: 0;
    transition: height .55s cubic-bezier(.4,0,.2,1); }
  .pd-detimg.active { height: var(--sq); }
  .pd-detimg:not(.active) figcaption { padding: 14px 18px; }
  .pd-detimg:not(.active) figcaption small { display: none; }
  .pd-detimg:not(.active) figcaption b { font-size: 24px; }

  /* Gợi ý -> carousel ngang: 2 sản phẩm/màn hình, vuốt để xem thêm */
  .pd-suggest-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-suggest-grid::-webkit-scrollbar { display: none; }
  .pd-suggest-title { font-size: 22px; }
  .pd-sg-card {
    flex: 0 0 calc((100% - 14px) / 2);
    min-width: 0;
    scroll-snap-align: none;
  }
  .pd-sg-card:nth-child(odd) { scroll-snap-align: start; }
  .pd-sg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pd-suggest-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }

  /* Mobile: ảnh trải hết chiều rộng màn hình -> bỏ hẳn padding của khung xem */
  .pd-lightbox-stage { padding: 0; }
  .pd-lightbox-stage img { width: 100%; height: auto; max-height: 100%; }
  .pd-lightbox-nav { display: none; }
  .pd-lightbox-close { top: 14px; right: 14px; width: 48px; height: 48px; }
  /* Chấm tròn nổi ĐÈ lên ảnh thay vì chiếm một hàng riêng -> khung xem kéo dài
     xuống tận thanh mua hàng, ảnh phóng to tràn kín và chạm luôn bot bar. */
  .pd-lightbox-dots {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    margin: 0;
    z-index: 4;
    background: rgba(242, 245, 239, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  /* Viên thuốc "250% · Thu nhỏ" xếp NGAY TRÊN hàng chấm tròn để không bị che
     (chấm tròn cao 28px + cách đáy 12px = 40px, chừa thêm 16px cho thoáng). */
  .lb-zoom-ctl { bottom: 56px; }

  /* Style the color selection container when moved under the gallery on mobile */
  .pd-top {
    /* gap 8px: thu hẹp khoảng cách giữa ảnh sản phẩm và hàng "Màu sắc"
       margin-top 4px: thu hẹp khoảng cách giữa đường dẫn và ảnh */
    gap: 8px !important;
    margin-top: 4px;
  }
  .pd-field-colors {
    margin-bottom: 0 !important;
  }
  .pd-color-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    width: 100% !important;
  }
  .pd-color-header .pd-label {
    margin-bottom: 0 !important;
  }
  .pd-color-header #pdDots {
    margin-top: 0 !important;
    justify-content: flex-end !important;
  }

  /* Enlarge and wrap color swatches to 4 items per row on mobile product page */
  .pd-swatches {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .pd-swatch {
    flex: 0 0 calc((100% - 3 * 8px) / 4) !important;
    max-width: calc((100% - 3 * 8px) / 4) !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1.1 / 1 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
}

/* ---------- Size Guide Header & Link Button ---------- */
.pd-size-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.pd-size-header .pd-label {
  margin-bottom: 0;
}
.size-guide-btn {
  background: transparent;
  border: none;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s ease;
  font-family: inherit;
}
.size-guide-btn:hover {
  color: var(--green-deep);
}

/* ---------- Size Guide Drawer (Sidebar) ---------- */
.size-guide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 12, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* Phải cao hơn .sticky-product-bar và .sticky-product-botbar (z-index 1005),
     nếu không thanh sản phẩm dính trên/dưới sẽ đè lên popup hướng dẫn size. */
  z-index: 1010;
}
.size-guide-overlay.open {
  opacity: 1;
  visibility: visible;
}

.size-guide-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: #fff;
  z-index: 1011;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.35s;
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  visibility: hidden; /* ẩn khi đóng để bóng không hắt vào mép màn hình */
}
.size-guide-drawer.open {
  transform: translateX(0);
  visibility: visible;
}
/* CHỈ PC: bảng "Hướng dẫn chọn size" trượt ra đúng bằng bề ngang cột thông tin
   bên phải (cùng công thức clamp với .pd-top), nên nó phủ vừa khít cột đó thay
   vì đè lem sang phần ảnh. Đặt SAU rule gốc phía trên để không bị max-width:
   480px đè lại. Máy tính bảng và điện thoại giữ nguyên 480px như cũ. */
@media (min-width: 1081px) {
  .size-guide-drawer { max-width: clamp(420px, 42vw, 620px); }
}

.sg-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.sg-drawer-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sg-drawer-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: var(--gray);
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.sg-drawer-close:hover {
  color: var(--ink);
}

.sg-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: #fdfdfd;
}
.sg-tab-btn {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 15px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.sg-tab-btn:hover {
  color: var(--green);
}
.sg-tab-btn.active {
  color: var(--green);
  border-bottom-color: var(--green);
  background: #fff;
}

.sg-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}
.sg-tab-content {
  display: none;
  animation: sg-fade-in 0.25s ease forwards;
}
.sg-tab-content.active {
  display: block;
}

@keyframes sg-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Alert Box */
.sg-alert-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff3f3;
  border: 1px dashed #ffa39e;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
}
.sg-alert-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.sg-alert-box p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #f5222d;
  line-height: 1.45;
}

/* Table Card */
.sg-table-container {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
}
.sg-table th {
  background: #f3f4f6;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 14px;
  text-align: center;
  letter-spacing: 0.01em;
  border-bottom: 1px solid #e5e7eb;
}
.sg-table td {
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid #edf0f5;
}
.sg-table tr:last-child td {
  border-bottom: none;
}
.sg-table tr:nth-child(even) td {
  background: #fafafa;
}
.sg-table td strong {
  font-weight: 700;
  color: var(--ink);
}

/* English Instructions Style */
.sg-measure-instructions {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}
.sg-measure-instructions h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.sg-measure-instructions h5 {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 16px;
}
.sg-measure-instructions ol {
  padding-left: 20px;
  margin: 0 0 24px;
}
.sg-measure-instructions li {
  font-size: 13.5px;
  color: var(--gray);
  line-height: 1.6;
  margin-bottom: 10px;
}
.sg-download-btn {
  display: block;
  width: 100%;
  background: var(--ink);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.sg-download-btn:hover {
  background: #333;
}

.sg-measure-illustration {
  border-top: 1px dashed var(--line);
  padding-top: 24px;
  text-align: center;
}
.sg-measure-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.sg-full-guide-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* ============ GIỎ HÀNG TRỐNG (trang thanh toán) ============ */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px 64px;
  margin: 0 auto;
  max-width: 620px;
}
.cart-empty-state[hidden] { display: none; }

/* Gấu ngồi trên nền tròn xanh lá mềm - tông thương hiệu XIXA */
.ces-bear-wrap {
  position: relative;
  width: 240px;
  height: 240px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.ces-blob {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, var(--green-soft) 0%, var(--green-light) 100%);
  box-shadow: var(--shadow);
}
.ces-bear {
  position: relative;
  width: 172px;
  height: auto;
}

.ces-title {
  margin: 18px 0 0;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--green-deep);
}
.ces-desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 480px;
}

.ces-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.ces-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.ces-btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 20px rgba(47, 125, 50, 0.28);
}
.ces-btn-primary:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(47, 125, 50, 0.34);
}
.ces-btn-ghost {
  background: #fff;
  color: var(--green-deep);
  border: 1.8px solid var(--green-light);
}
.ces-btn-ghost:hover {
  background: var(--green-soft);
  border-color: var(--green);
  transform: translateY(-2px);
}

.ces-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  width: 100%;
  max-width: 560px;
  font-size: 13.5px;
}
.ces-quick-label {
  color: var(--muted);
  font-weight: 600;
}
.ces-quick a {
  color: var(--green-deep);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s ease;
}
.ces-quick a:hover { border-bottom-color: var(--green); }

@media (max-width: 560px) {
  .cart-empty-state { padding: 24px 16px 48px; }
  .ces-bear-wrap { width: 190px; height: 190px; }
  .ces-bear { width: 136px; }
  .ces-title { font-size: 22px; }
  .ces-desc { font-size: 14.5px; }
  .ces-actions { flex-direction: column; width: 100%; max-width: 300px; }
  .ces-btn { width: 100%; }
}

/* ----- Video hướng dẫn đo chân (dọc 9:16) ----- */
.sg-video-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
/* width/height:auto + max-width/max-height để trình duyệt tự thu nhỏ video theo
   đúng tỉ lệ gốc 576x1024 -> luôn vừa khung, không bị cắt lẹm và không có viền
   đen hai bên. max-height trừ đi phần header + tabs + padding của drawer để
   video không bao giờ tràn quá chiều cao màn hình. */
.sg-guide-video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 176px);
  max-height: calc(100dvh - 176px);
  aspect-ratio: 576 / 1024;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
/* Màn hình thấp (laptop 13", mobile ngang): ưu tiên chiều cao để không phải cuộn. */
@media (max-height: 720px) {
  .sg-guide-video { max-height: calc(100dvh - 150px); }
}

@keyframes sg-backdrop-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sg-backdrop-hide {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ============ SEARCH OVERLAY ============ */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 38, 20, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-bar-container {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 800px;
  margin-top: 40px;
  margin-bottom: 20px;
  transform: translateY(-20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-overlay.active .search-bar-container {
  transform: translateY(0);
}

.search-input-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid rgba(47, 125, 50, 0.2);
  border-radius: 9999px;
  padding: 12px 20px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 4px 25px rgba(47, 125, 50, 0.15);
}

.search-input-box svg {
  color: #888;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.search-input-box input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 16px;
  margin-left: 12px;
  font-family: inherit;
  color: #111827;
}

.search-input-box input::placeholder {
  color: #9ca3af;
}

.search-clear-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-clear-btn:hover {
  color: #374151;
}

.search-close-btn {
  background: #ffffff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 20px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, background-color 0.2s;
}

.search-close-btn:hover {
  transform: scale(1.05);
  background-color: #f3f4f6;
}

/* Results Card */
.search-results-card {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 32px;
  box-sizing: border-box;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.search-overlay.active .search-results-card {
  transform: translateY(0);
}

.search-section {
  margin-bottom: 28px;
}

.search-section:last-child {
  margin-bottom: 0;
}

.search-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Tags List */
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-tag-btn {
  background: #f3f4f6;
  border: none;
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  font-family: var(--font) !important;
}

.search-tag-btn:hover {
  background: var(--green);
  color: #ffffff;
}

/* Products Grid */
.search-prods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.search-prod-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.2s;
}

.search-prod-item:hover {
  transform: translateY(-4px);
}

.search-prod-thumb {
  background: #f9f9f9;
  border-radius: 16px;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
}

.search-prod-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.search-prod-item:hover .search-prod-thumb img {
  transform: scale(1.05);
}

.search-prod-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-prod-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-prod-price del {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
  margin-left: auto; /* giá gốc nằm sát góc phải */
}

.search-no-results {
  color: #6b7280;
  font-size: 14px;
  padding: 10px 0;
}

.search-view-all-btn {
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 24px auto 0 auto;
  background: var(--green);
  color: #ffffff;
  border: none;
  border-radius: 9999px;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}

.search-view-all-btn:hover {
  background: var(--green-dark);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-overlay {
    padding: 12px;
  }
  .search-bar-container {
    margin-top: 15px;
    gap: 8px;
  }
  .search-close-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  .search-input-box {
    padding: 10px 16px;
  }
  .search-results-card {
    border-radius: 16px;
    padding: 20px;
    max-height: calc(100vh - 100px);
  }
  .search-prods-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .search-prod-name {
    font-size: 13px;
  }
  .search-prod-price {
    font-size: 13px;
  }
}

/* ============ CHECKOUT FOOTER CUSTOM STYLES & FIXES ============ */
.footer-about {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-about .footer-logo {
  max-width: 140px;
  height: auto;
  margin-bottom: 12px;
}
.footer-contact {
  display: flex;
  flex-direction: column;
}
.footer-contact .green-title {
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d6ecd3;
  font-size: 14px;
  line-height: 1.5;
}
.info-item.address {
  align-items: flex-start;
}
.info-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.info-item.address img {
  margin-top: 2px;
}
.info-item .cb-ic,
.info-item .zalo-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.info-item .cb-ic img,
.info-item .zalo-ic img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.info-item strong {
  color: #fff;
}

/* ============ CUSTOM SEARCHABLE SELECT DROPDOWNS ============ */
.custom-select-field {
  position: relative;
}
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-wrapper.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.custom-select-input {
  cursor: text;
  padding-right: 36px !important;
}
.custom-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: #889380;
  transition: transform 0.2s;
}
.custom-select-wrapper.open .custom-select-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #cdd5c6;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
}
.custom-select-wrapper.open .custom-select-dropdown {
  display: block;
}
.custom-select-option {
  padding: 11px 16px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
}
.custom-select-option:hover {
  background: #f4f7f3;
  color: var(--green);
}
.custom-select-option.selected {
  background: #e8f3e6;
  color: var(--green);
  font-weight: 600;
}
.custom-select-no-results {
  padding: 12px 16px;
  font-size: 13px;
  color: #888;
  text-align: center;
  font-style: italic;
}
/* Style the scrollbar for dropdown */
.custom-select-dropdown::-webkit-scrollbar {
  width: 6px;
}
.custom-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.custom-select-dropdown::-webkit-scrollbar-thumb {
  background: #cdd5c6;
  border-radius: 4px;
}
.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
  background: #aab4a1;
}

/* ============ STICKY PRODUCT BAR ============ */
.sticky-product-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1005;
  height: 110px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
  will-change: transform, opacity;
}

.sticky-product-bar.active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.spb-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 20px;
}

/* Left Section */
.spb-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}

.spb-thumb-wrap {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f7f9f6;
  overflow: hidden;
  flex-shrink: 0;
}

.spb-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.spb-thumb.fade-out {
  opacity: 0;
}
.spb-thumb.fade-in {
  opacity: 1;
}

.spb-discount-badge {
  position: static;
  background: var(--pink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.spb-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}

.spb-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.spb-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.spb-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
}

.spb-old-price {
  font-size: 13px;
  text-decoration: line-through;
  color: var(--muted);
}

.spb-stats-col {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 24px;
  font-size: 13px;
  white-space: nowrap;
}

.spb-stats-col::before,
.spb-center::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: #e9ece4;
}

.spb-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spb-stat-rating {
  cursor: pointer;
}

.spb-stat-rating:hover .spb-rating-val {
  text-decoration: underline;
}

.spb-stat-rating .spb-stars {
  display: inline-flex;
  align-items: center;
}

.spb-stat-rating .spb-stars .pd-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.spb-stat-rating .star {
  display: inline-flex;
  align-items: center;
}

.spb-stat-rating .star .star-svg {
  width: 15px;
  height: 15px;
  color: #d8dcd2;
  display: block;
}

.spb-stat-rating .star.on .star-svg {
  color: var(--green);
}

.spb-rating-val {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: var(--muted);
  font-weight: 600;
}

.spb-rating-val b {
  color: var(--ink);
  font-weight: 800;
}

.spb-stat-sold {
  color: var(--muted);
}

.spb-stat-sold b {
  color: var(--green);
  font-weight: 800;
}

/* Center Section */
.spb-center {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 1;
  justify-content: flex-start;
  padding-left: 24px;
}

.spb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.spb-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.spb-label b {
  color: var(--ink);
}

.spb-swatches {
  display: flex;
  gap: 8px;
  max-width: 220px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px;
  margin: -4px 0;
}
.spb-swatches::-webkit-scrollbar {
  display: none;
}

.spb-swatch {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  padding: 2px;
  cursor: pointer;
  background: #fff;
  transition: transform 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.spb-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.spb-swatch:hover {
  transform: translateY(-2px);
}

.spb-swatch.active {
  border-color: var(--green);
  box-shadow: 0 0 0 1.5px var(--green);
}

.spb-size-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.spb-size-guide-btn {
  font-size: 11.5px;
  color: var(--green-deep);
  text-decoration: underline;
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.spb-sizes {
  display: flex;
  gap: 6px;
}

.spb-size-opt {
  padding: 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}

.spb-size-opt:hover {
  border-color: var(--green-light);
  background: var(--green-soft);
}

.spb-size-opt.active {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green-deep);
}

/* Right Section */
.spb-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.spb-qty {
  display: flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  background: #f2f3f5;
  overflow: hidden;
  height: 44px;
}

.spb-qty button {
  width: 36px;
  height: 100%;
  font-size: 18px;
  color: #333;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

.spb-qty button:hover {
  opacity: 0.6;
}

.spb-qty input {
  width: 38px;
  height: 100%;
  text-align: center;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.spb-qty input:focus {
  outline: none;
}

.spb-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: none;
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  border: none;
}

.spb-add:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.spb-add:active {
  transform: translateY(1px);
}

/* Base Sticky Botbar Style (Hidden on Desktop) */
.sticky-product-botbar {
  display: none;
}

/* Desktop topbar scale-to-fit container (2K ratio lock) */
@media (min-width: 992px) {
  .sticky-product-bar {
    overflow: visible !important;
  }
  .spb-inner {
    width: 1650px !important;
    max-width: 1650px !important;
    min-width: 1650px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(var(--spb-scale, 1)) !important;
    transform-origin: center center !important;
    margin: 0 !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    transition: transform 0.1s ease-out !important;
  }
}

@media (max-width: 991px) {
  .sticky-product-bar {
    display: none !important;
  }
  
  .sticky-product-botbar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1005;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1.5px solid var(--line);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(calc(100% + 24px)) scale(0.96);
    opacity: 0;
    pointer-events: none;
    /* Ẩn: hút xuống nhanh, mượt */
    transition: transform 0.38s cubic-bezier(0.55, 0.06, 0.45, 0.94), opacity 0.26s ease;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
    will-change: transform, opacity;
  }

  .sticky-product-botbar.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    /* Hiện: trượt lên có độ nảy đàn hồi nhẹ */
    transition: transform 0.55s cubic-bezier(0.22, 1.35, 0.36, 1), opacity 0.3s ease;
  }

  /* Đẩy nút chat AI lên trên thanh botbar sản phẩm khi botbar hiện */
  body.pd-botbar-active .xb-fab {
    transform: translateY(calc(-1 * var(--pd-botbar-h, 0px) - 8px));
  }
  
  .spb-bot-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .spb-bot-row {
    display: flex;
    align-items: center;
    width: 100%;
  }
  
  .spb-bot-row-options {
    justify-content: space-between;
  }
  
  .spb-bot-row-actions {
    gap: 10px;
  }
  
  /* Swatches Col */
  .spb-bot-swatches-col {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 130px;
    overflow: hidden;
  }
  
  .spb-bot-swatches {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    padding: 4px 2px;
    margin: -4px 0;
  }
  .spb-bot-swatches::-webkit-scrollbar {
    display: none;
  }
  
  .spb-bot-swatch {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    border: 1.5px solid var(--line);
    padding: 2px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
  }
  
  .spb-bot-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .spb-bot-swatch.active {
    border-color: var(--green);
    border-width: 2px;
    box-shadow: 0 0 0 1.5px var(--green);
  }
  
  /* Divider */
  .spb-bot-divider {
    border-left: 1.5px solid var(--line);
    height: 24px;
    margin: 0 12px;
    flex-shrink: 0;
  }
  
  /* Sizes Col */
  .spb-bot-sizes-col {
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
  }
  
  .spb-bot-sizes {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .spb-bot-sizes::-webkit-scrollbar {
    display: none;
  }
  
  .spb-bot-size-opt {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: #f7f9f6;
    cursor: pointer;
    transition: all 0.15s;
  }
  
  .spb-bot-size-opt:hover {
    border-color: var(--green-light);
    background: var(--green-soft);
  }
  
  .spb-bot-size-opt.active {
    border-color: var(--green);
    background: var(--green);
    color: #ffffff;
  }
  
  /* Actions Row */
  .spb-bot-qty {
    display: flex;
    align-items: center;
    background: #f4f6f3;
    border-radius: 20px;
    overflow: hidden;
    height: 40px;
    padding: 0 4px;
    flex-shrink: 0;
  }
  
  .spb-bot-qty button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
  
  .spb-bot-qty button:hover {
    background: var(--green-soft);
  }
  
  .spb-bot-qty input {
    width: 34px;
    height: 100%;
    text-align: center;
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    background: transparent;
  }
  
  .spb-bot-qty input:focus {
    outline: none;
  }
  
  .spb-bot-add {
    flex-grow: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: #fff;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(47, 125, 50, 0.15);
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
    border: none;
  }
  
  .spb-bot-add:hover {
    background: var(--green-dark);
  }
  
  .spb-bot-add:active {
    transform: translateY(1px);
  }
}

/* ============ XIXA CUSTOM DIALOG ============ */
.xixa-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.xixa-dialog-overlay.active {
  opacity: 1;
  visibility: visible;
}

.xixa-dialog-box {
  background: #ffffff;
  padding: 36px 28px 28px;
  border-radius: 24px;
  max-width: 420px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.xixa-dialog-overlay.active .xixa-dialog-box {
  transform: scale(1);
}

.xixa-dialog-icon {
  width: 72px;
  height: 72px;
  background: #f0fdf4; /* Soft green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
  border: 1px solid var(--green-light);
}

.xixa-dialog-icon img {
  width: 36px;
  height: 36px;
}

.xixa-dialog-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.xixa-dialog-desc {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.55;
  margin-bottom: 28px;
}

.xixa-dialog-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.xixa-dialog-btn {
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s, transform 0.1s;
  min-width: 110px;
  font-family: inherit;
}

.xixa-dialog-btn:active {
  transform: scale(0.96);
}

.xixa-dialog-btn.btn-confirm {
  background: var(--green);
  color: #ffffff;
}

.xixa-dialog-btn.btn-confirm:hover {
  background: var(--green-deep);
}

.xixa-dialog-btn.btn-cancel {
  background: #f3f4f6;
  color: #4b5563;
}

.xixa-dialog-btn.btn-cancel:hover {
  background: #e5e7eb;
}

/* ===================================================================
   TRANG "SẢN PHẨM MỚI RA MẮT" (collection)
=================================================================== */
.collection { background: #fff; padding: 0; }
.collection .container { max-width: 1760px; }

/* ===================================================================
   PAGE HERO BANNER (full-width banner + white text) — dùng cho
   trang Sản phẩm mới, Giày chân bẹt, Sale
=================================================================== */
.page-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4500 / 688;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
/* Rotating slides layer (admin-managed banners) */
.page-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .8s ease;
}
.page-hero-slide.active {
  opacity: 1;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.30) 32%, rgba(0,0,0,.06) 62%, rgba(0,0,0,0) 100%);
  z-index: 1;
}
/* Hero trơn: banner tự có chữ nên bỏ lớp phủ tối bên trái (dùng ở trang SALE) */
.page-hero.page-hero-plain::before {
  display: none;
}

/* Banner trang Kết quả tìm kiếm: khung khớp đúng tỉ lệ ảnh (3808x1279)
   để hiện TRỌN chiều rộng, không bị cắt trên-dưới như các hero khác. */
.page-hero.page-hero-search {
  aspect-ratio: 3808 / 1279;
  background-size: 100% 100%;
}
@media (max-width: 860px) {
  .page-hero.page-hero-search { background-size: cover; }
}

/* ===== Dải chữ chạy dưới banner trang SALE ===== */
.sale-marquee {
  background: #e44c0f;
  overflow: hidden;
  width: 100%;
  padding: 9px 0;
  /* Dính ngay dưới header khi cuộn: topbar 38px + .header .inner 72px = 110px.
     z-index 98 < .header (100) -> luôn trượt xuống dưới header */
  position: sticky;
  top: 110px;
  z-index: 98;
}
/* Từ 860px trở xuống header thu nhỏ: topbar 24px + inner 48px = 72px */
@media (max-width: 860px) {
  .sale-marquee { top: 72px; }
}
.sale-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: -webkit-max-content;
  width: max-content;
  /* Track gồm 2 nửa giống hệt nhau -> chạy hết 1 nửa (-50%) rồi lặp lại liền mạch.
     --mq-duration do /js/sale.js tính theo bề rộng thật để tốc độ luôn ~45px/s */
  animation: sale-marquee-scroll var(--mq-duration, 22.5s) linear infinite;
  will-change: transform;
}
.mq-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  flex: 0 0 auto;
}
/* Safari/iOS bỏ qua tỉ lệ viewBox của SVG trong flex item -> phải khoá width thật */
.mq-group > * { flex: 0 0 auto; }
.mq-logo { height: 22px; width: 94px; display: block; }
.mq-bear { height: 34px; width: 31px; display: block; }
.mq-store { height: 21px; width: 59px; display: block; }
.mq-date {
  color: #fff;
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: .3px;
  white-space: nowrap;
}
@keyframes sale-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .sale-marquee {
    padding: 7px 0;
  }
  .mq-group { gap: 16px; padding-right: 16px; }
  .mq-logo { height: 17px; width: 73px; }
  .mq-bear { height: 27px; width: 25px; }
  .mq-store { height: 16px; width: 45px; }
  .mq-date { font-size: 20px; }
}
/* Người bật "Giảm chuyển động": vẫn chạy nhưng chậm lại, thay vì đứng yên hẳn
   (đứng yên khiến dải chữ trông như bị lỗi trên iOS) */
@media (prefers-reduced-motion: reduce) {
  .sale-marquee-track { animation-duration: 60s; }
}
.page-hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  /* Breadcrumb + tiêu đề bám sát mép màn hình, không thụt vào theo khung nội dung */
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.page-hero-breadcrumb {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.95);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px !important;
  line-height: 1;
}
.page-hero-breadcrumb a {
  color: rgba(255,255,255,.95);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
.page-hero-breadcrumb .bc-home { 
  flex-shrink: 0; 
  color: #fff;
  width: 17px !important;
  height: 17px !important;
  display: block;
  transform: translateY(-1px) !important;
}
.page-hero-breadcrumb a:hover { color: #fff; }
.page-hero-breadcrumb .sep { 
  opacity: .7; 
  display: inline-flex;
  align-items: center;
  line-height: 1;
  margin: 0;
}
.page-hero-title {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  letter-spacing: .2px;
  text-shadow: 0 2px 14px rgba(0,0,0,.38);
}

@media (max-width: 768px) {
  .page-hero {
    aspect-ratio: auto;
    min-height: 150px;
  }
  .page-hero .container {
    padding: 16px;
    gap: 8px;
  }
  .page-hero-breadcrumb { font-size: 13px; }
  .page-hero-title { font-size: 24px; }
}

/* ===== Đầu trang danh mục trên ĐIỆN THOẠI =====
   Bỏ ảnh banner, thay bằng dải nền pastel + breadcrumb và tiêu đề chữ đậm cho
   dễ đọc trên màn hình nhỏ. Máy tính giữ nguyên banner ảnh như cũ, nên mọi quy
   tắc dưới đây nằm trong media query. Dùng !important vì banner do trang quản
   trị đặt được gắn thẳng vào thuộc tính style của thẻ. */
@media (max-width: 768px) {
  .page-hero.page-hero-soft {
    aspect-ratio: auto;
    min-height: 0;
    /* !important vì banner do trang quản trị đặt nằm ở thuộc tính style của thẻ */
    background-image: linear-gradient(105deg, #fbe4ee 0%, #f0e6fa 52%, #e3ebfb 100%) !important;
    background-color: transparent;
  }
  .page-hero.page-hero-soft::before { display: none; }
  .page-hero.page-hero-soft .page-hero-slides { display: none; }
  .page-hero.page-hero-soft .container { padding: 16px 16px 20px; gap: 10px; }
  .page-hero.page-hero-soft .page-hero-breadcrumb,
  .page-hero.page-hero-soft .page-hero-breadcrumb a { color: var(--muted); }
  .page-hero.page-hero-soft .page-hero-breadcrumb .bc-home { color: #9aa3ae; }
  /* Dấu ngăn kiểu chấm tròn, chỉ đổi trên điện thoại nên không sửa HTML */
  .page-hero.page-hero-soft .page-hero-breadcrumb .sep { font-size: 0; opacity: 1; }
  .page-hero.page-hero-soft .page-hero-breadcrumb .sep::after {
    content: "•";
    font-size: 13px;
    color: #b4bcc6;
  }
  .page-hero.page-hero-soft .page-hero-title {
    color: var(--ink);
    text-shadow: none;
    font-size: 25px;
    font-weight: 800;
  }
}

.col-breadcrumb {
  font-size: 15px; color: var(--muted, #6b7280); font-weight: 500;
  display: flex; align-items: center; gap: 4px !important; padding: 10px 0 18px;
  line-height: 1;
}
.col-breadcrumb a { color: var(--muted, #6b7280); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.col-breadcrumb .bc-home { flex-shrink: 0; color: var(--ink, #1f2421); width: 17px !important; height: 17px !important; display: block; transform: translateY(-1px) !important; }
.col-breadcrumb a:hover { color: var(--green-deep); }
.col-breadcrumb .sep { opacity: .5; display: inline-flex; align-items: center; line-height: 1; margin: 0; }

.col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
  padding: 14px 0;
  border-top: 1px solid var(--line, #e5e7eb);
  border-bottom: 1px solid var(--line, #e5e7eb);
}
.col-title { font-size: 28px; font-weight: 800; color: var(--ink, #1f2421); margin: 0; }
.col-count { margin: 0; font-size: 14px; color: var(--muted, #6b7280); }

/* ===== Thanh công cụ + bảng bộ lọc dính khi cuộn (trang danh mục) =====
   --stack-top (topbar + header) và --filter-top (+ chiều cao .col-head) được
   /js/script.js đo lại theo breakpoint; giá trị mặc định ứng với desktop:
   topbar 38px + .header .inner 72px = 110px.
   z-index 97 < .header (100) -> thanh luôn trượt xuống dưới header. */
.collection .col-head {
  position: sticky;
  top: var(--stack-top, 110px);
  z-index: 97;
  background: #fff;
  /* Hai đường kẻ vẽ bằng lớp giả để chạy tràn hết bề ngang màn hình, trong khi
     chữ vẫn nằm gọn trong khung nội dung. Thân trang đã có overflow-x:clip nên
     100vw không sinh thanh cuộn ngang. */
  border-top: none;
  border-bottom: none;
}
.collection .col-head::before,
.collection .col-head::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--line, #e5e7eb);
  pointer-events: none;
}
/* Chỉ giữ đường kẻ phía DƯỚI: phía trên đã có mép khối tiêu đề của trang nên
   thêm một vạch nữa thành hai nét sát nhau, rối mắt. */
.collection .col-head::before { display: none; }
.collection .col-head::after { bottom: 0; }
@media (min-width: 1025px) {
  .collection .col-body-layout.sidebar-open .filter-sidebar {
    position: sticky;
    top: var(--filter-top, 176px);
    /* Grid item mặc định stretch cao bằng cột sản phẩm -> sticky không có chỗ
       trượt; align-self:start co lại đúng nội dung để dính được */
    align-self: start;
    max-height: calc(100vh - var(--filter-top, 176px) - 24px);
    overflow-y: auto;
    /* .filter-panel bo góc 18px. Khi có overflow, góc bo cắt luôn nội dung, mà
       "DANH MỤC" nằm sát mép trên-trái (cách 0px) nên chữ D bị cắt theo đường
       cong. Trên desktop panel vốn trong suốt (không nền/viền/đổ bóng) nên bỏ
       bo góc không đổi giao diện. */
    border-radius: 0 !important;
    /* overflow-y khác visible cũng ép overflow-x thành auto -> chừa thêm 3px
       để chữ không nằm sát đúng đường cắt, rồi kéo lại bằng margin âm cho vị
       trí hiển thị giữ nguyên. Cần !important vì <style> của từng trang danh
       mục đặt .filter-sidebar { padding: 0 !important }. */
    padding-left: 3px !important;
    margin-left: -3px !important;
  }
}

/* Thanh lọc kiểu tối giản (text, không viền) — trang Sản phẩm mới */
.collection .col-tools { gap: 0; align-items: center; }
.collection .col-tools .custom-select-trigger {
  border: none; background: transparent; box-shadow: none;
  height: auto; min-width: 0; width: auto; padding: 0 18px 0 0;
  font-size: 14px; font-weight: 600; color: var(--gray, #606161);
}
.collection .col-tools .custom-select-trigger:hover {
  border-color: transparent; background: transparent; color: var(--green-deep);
}
.collection .col-tools .filter-toggle-btn {
  border: none; border-left: 1.5px solid var(--line, #e5e7eb);
  background: transparent; box-shadow: none; border-radius: 0;
  padding: 0 0 0 18px; font-size: 14px; font-weight: 600;
  color: var(--gray, #606161);
}
.collection .col-tools .filter-toggle-btn:hover {
  border-color: var(--line, #e5e7eb); background: transparent;
  color: var(--green-deep); transform: none; box-shadow: none;
}
.collection .col-tools .filter-toggle-btn.active {
  background: transparent !important; color: var(--green-deep) !important;
  border-color: var(--line, #e5e7eb) !important;
}
.col-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Ô chọn trong bảng bộ lọc: bo tròn hẳn thành viên thuốc cho đồng bộ với thẻ
   lọc đang chọn ở thanh công cụ. Ô size vốn vuông nhỏ nên bo vừa phải. */
.filter-chip { border-radius: 999px !important; }
.size-grid .filter-chip { border-radius: 999px !important; }

/* Thẻ lọc đang chọn trên thanh công cụ: bo tròn hẳn thành viên thuốc.
   !important vì mỗi trang danh mục tự khai lại .col-head-left .active-filter-tag
   kèm !important trong <style> của trang. */
.collection .col-head .active-filter-tag {
  border-radius: 999px !important;
  padding: 5px 6px 5px 14px !important;
}
.collection .col-head .active-filter-tag .remove-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 0 !important;
}
.collection .col-head .active-filter-tag .remove-btn:hover {
  background: #e2e2e2;
}
.col-select {
  position: relative;
}
.custom-select {
  position: relative;
  display: inline-block;
}
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 20px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 750;
  color: var(--gray, #606161);
  background: #fff;
  cursor: pointer;
  height: 38px;
  min-width: 190px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  width: 100%;
}
.custom-select-trigger:hover {
  border-color: var(--green-lime2);
  color: var(--green-deep);
  background-color: var(--green-soft);
}
.custom-select-trigger:focus {
  outline: none;
  border-color: var(--green);
}
.custom-select-trigger .arrow-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
  stroke-width: 2.5px;
}
.custom-select.open .custom-select-trigger {
  border-color: var(--green);
  background-color: #fff;
}
.custom-select.open .arrow-icon {
  transform: rotate(180deg);
}
.custom-select-options {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 12px;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.08));
  min-width: 100%;
  width: max-content;
  overflow: hidden;
  z-index: 105;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.custom-select.open .custom-select-options {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.custom-select-option {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray, #606161);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.custom-select-option:hover {
  background: var(--green-soft);
  color: var(--green-deep);
}
.custom-select-option.active {
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 750;
}

/* Lưới sản phẩm các trang danh mục + "Sản phẩm bạn đã xem".
   Từ 1081px trở lên dùng ĐÚNG lưới của trang chủ: 4 sản phẩm mỗi hàng, khung
   rộng 80.7292vw (tối đa 3100px), khoảng cách 1.0417vw — xem phần PRODUCTS.
   Từ 1080px trở xuống giữ nguyên lưới 3/2 cột cũ. */
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 56px; }
@media (min-width: 1081px) {
  .collection .container,
  .col-recent .container,
  /* Breadcrumb + tiêu đề trên banner dùng chung khung với khối sản phẩm để
     thẳng hàng với dòng "13 kết quả" bên dưới. */
  .page-hero .container {
    width: 80.7292vw;
    max-width: 3100px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .col-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.0417vw, 40px);
  }
}
.col-empty { grid-column: 1 / -1; text-align: center; color: var(--muted, #888); padding: 40px 0; }

/* Ô thiết kế (banner dọc xen giữa lưới) — cao BẰNG CẢ THẺ sản phẩm bên cạnh
   (ảnh + hàng ảnh phân loại + tên + giá), không chỉ bằng phần ảnh.
   height:100% cho banner kéo hết chiều cao ô lưới; aspect-ratio 3/4 chỉ còn là
   mức tối thiểu cho trường hợp cả hàng không có thẻ sản phẩm nào. */
.col-promo {
  position: relative; border-radius: 16px; overflow: hidden;
  display: block; aspect-ratio: 3 / 4; width: 100%; height: 100%;
  text-decoration: none; background: #eef2ee;
}
.col-promo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.col-promo:hover img { transform: scale(1.04); }
.col-promo .promo-overlay {
  position: absolute; inset: 0; padding: 22px; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%, transparent);
  color: #fff;
}
.col-promo .promo-overlay h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; line-height: 1.2; }
.col-promo .promo-overlay p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; opacity: .95; }
.col-promo .promo-link { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.col-more-wrap { display: flex; justify-content: center; margin: 40px 0 10px; }
.col-more {
  border: 1px solid var(--green); background: var(--green); color: #fff;
  font-size: 15px; font-weight: 700; padding: 12px 40px; border-radius: 30px;
  cursor: pointer; transition: background .15s, color .15s;
}
.col-more:hover { background: var(--green-deep); border-color: var(--green-deep); }

/* Nút "Xem thêm" bản màu cam — dùng cho lưới Flash Sale */
.col-more.is-flash {
  background: #e44c0f;
  border-color: #e44c0f;
  color: #fff;
  box-shadow: 0 4px 14px rgba(228, 76, 15, 0.25);
}
.col-more.is-flash:hover {
  background: #e07b00;
  border-color: #e07b00;
}

/* Bài viết SEO danh mục */
.col-seo { background: #f6f7f5; margin-top: 50px; padding: 48px 0; }
.col-seo .container { max-width: 1500px; text-align: center; }
.col-seo-title { font-size: 22px; font-weight: 800; color: var(--ink, #1f2421); margin: 0 0 16px; }
/* Bài viết SEO cuối trang danh mục đọc y như một trang bài viết bình thường.
   Trước đây khối này có bộ chữ riêng (14px / màu xám xanh / đoạn cách 10px) nên
   cùng một nội dung soạn trong admin mà ra trang shop lại nhỏ và chật hơn hẳn
   trang bài viết — xem .bv-html-content trong tệp này, sửa bên nào sửa cả hai.
   max-width: khối này chiếm hết bề ngang 1500px của .container, ở màn hình lớn
   một dòng chữ dài tới ~1160px (khoảng 160 ký tự) nên mắt đọc rất mỏi. Kẹp lại
   cho độ dài dòng về mức dễ đọc, canh giữa trong khu vực. */
.col-seo-body {
  font-size: 16.5px; line-height: 1.75; color: #333333; text-align: justify;
  max-width: 1000px; margin-left: auto; margin-right: auto;
  max-height: 200px; overflow: hidden; position: relative; transition: max-height .3s ease;
}
.col-seo-body p { margin: 0 0 18px; }
.col-seo-body li { margin-bottom: 8px; }
.col-seo-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  background: linear-gradient(to bottom, rgba(246,247,245,0), #f6f7f5);
  pointer-events: none; transition: opacity .3s ease;
}
/* Mở rộng bài rồi thì thôi cắt tràn — để yên overflow:hidden thì danh sách
   chọn size của thẻ sản phẩm nhúng bị cắt cụt ngay mép khối. */
.col-seo-body.open { max-height: none; overflow: visible; }
.col-seo-body.open::after { opacity: 0; }
.col-seo-body table { max-width: 100%; border-collapse: collapse; text-align: left; }
.col-seo-body table th, .col-seo-body table td { border: 1px solid var(--line, #d8ddd6); padding: 8px 12px; vertical-align: top; }
.col-seo-body ul { list-style: disc; padding-left: 22px; text-align: left; }
.col-seo-body ol { list-style: decimal; padding-left: 22px; text-align: left; }
.col-seo-body a { color: var(--green-deep); text-decoration: underline; }
.col-seo-toggle {
  position: relative; z-index: 1; margin-top: -46px;
  border: 1px solid var(--line, #d8ddd6); background: #fff;
  color: var(--green-deep); font-size: 14px; font-weight: 700;
  padding: 9px 28px; border-radius: 24px; cursor: pointer;
  transition: margin-top .3s ease;
}
.col-seo .container:has(.col-seo-body.open) .col-seo-toggle { margin-top: 18px; }
.col-seo-toggle:hover { background: var(--green-soft, #eef5ee); }

/* Ảnh đại diện của bài viết SEO danh mục */
.col-seo-thumb {
  display: block; width: 100%; max-width: 620px; height: auto;
  margin: 0 auto 20px; border-radius: 16px; object-fit: cover;
}
.col-seo-thumb[hidden] { display: none; }

/* Các kiểu nội dung được tạo từ trình soạn thảo trong trang quản trị */
.col-seo-body h4, .col-seo-body h5, .col-seo-body h6 { text-align: left; color: var(--ink, #1f2421); }
.col-seo-body img { max-width: 100%; height: auto; border-radius: 12px; }
.col-seo-body figure { margin: 16px auto; text-align: center; }
.col-seo-body figcaption { font-size: 13px; font-style: italic; color: #6b7280; }
.col-seo-body blockquote {
  border-left: 4px solid var(--green-deep, #006600); margin: 14px 0;
  padding: 6px 16px; text-align: left; color: #55605a; background: #fff;
  border-radius: 0 8px 8px 0;
}
.col-seo-body pre {
  text-align: left; background: #eef1ec; border-radius: 8px; padding: 12px;
  overflow: auto; font-size: 13px;
}
.col-seo-body hr { border: none; border-top: 1px solid var(--line, #d8ddd6); margin: 16px 0; }
.col-seo-body iframe { max-width: 100%; }

/* Sản phẩm đã xem */
.col-recent { padding: 50px 0 60px; }
.col-recent-title { font-size: 22px; font-weight: 800; color: var(--ink, #1f2421); margin: 0 0 22px; }

@media (max-width: 1024px) {
  /* Máy tính bảng hết chỗ trống hai bên: giữ gap cũ để ô sản phẩm không bị co lại */
  .col-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
}
@media (max-width: 760px) {
  .col-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .col-title { font-size: 22px; }
  .col-tools { width: 100%; display: flex; gap: 10px; }
  .filter-toggle-btn { flex: 1; justify-content: center; }
  .col-select { flex: 1; width: auto; position: relative; }
  .custom-select-trigger { width: 100%; min-width: 0; }

  /* Trang danh mục trên ĐIỆN THOẠI: "13 kết quả" bên trái, "Mặc định" và
     "Bộ lọc" bên phải CÙNG MỘT HÀNG; các thẻ lọc đang chọn xuống hàng dưới,
     ngăn cách bằng một đường kẻ. display:contents để .col-head-left tan ra,
     ba phần tử con xếp trực tiếp trong .col-head và thẻ lọc mới chiếm trọn
     chiều ngang được. */
  .collection .col-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 12px;
    /* Bỏ đường kẻ phía trên; đệm trên–dưới BẰNG NHAU để chữ nằm đúng giữa
       thanh (nhất là khi thanh dính lúc cuộn). Muốn thanh sát khối tiêu đề
       pastel thì rút đệm của .collection bên dưới, không lệch đệm ở đây. */
    padding: 10px 0;
    margin-bottom: 16px;
  }
  .collection .col-head-left { display: contents; }
  .collection .col-count { flex: 0 1 auto; }
  .collection .col-tools { width: auto; flex: none; gap: 0; }
  .collection .col-tools .col-select,
  .collection .col-tools .filter-toggle-btn { flex: none; width: auto; }
  .collection .col-tools .custom-select-trigger { width: auto; min-width: 0; }
  .collection .col-head .active-filters-bar {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--line, #e5e7eb) !important;
  }
  /* "Xoá tất cả" nằm cùng hàng với các thẻ lọc — bản mobile chung của bảng lọc
     kéo nút này rộng hết hàng, ở thanh công cụ thì phải thu lại. */
  .collection .col-head .clear-all-filters-btn {
    width: auto;
    margin: 0 0 0 6px;
    text-align: left;
  }
  .col-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .col-promo { aspect-ratio: auto; height: 100%; }
  .col-promo .promo-overlay h3 { font-size: 17px; }
  .col-promo .promo-overlay p { display: none; }
  .col-seo { padding: 36px 0; }
  .col-seo-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.pd-review-sec {
  background: #f8f9fa;
  padding-top: 50px;
  padding-bottom: 60px;
  margin: 50px auto 0;
}

/* Sao xanh lá cho toàn bộ khu vực đánh giá */
.pd-review-sec .star .star-svg { width: 16px; height: 16px; color: #d8dcd2; display: block; }
.pd-review-sec .star.on .star-svg { color: var(--green); }
.pd-review-sec .pd-stars { display: inline-flex; gap: 1px; }

/* --- Header tổng quan --- */
.rv-head {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid #eef0ea;
  border-radius: 16px;
  padding: 28px 32px;
}
.rv-score { display: flex; flex-direction: column; gap: 8px; }
.rv-score-num { font-size: 44px; font-weight: 800; line-height: 1; color: var(--ink); }
.rv-score-stars .star .star-svg { width: 22px; height: 22px; }
.rv-score-sub { font-size: 13px; color: var(--muted); }

.rv-fit-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.rv-fit-row { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 12px; margin-bottom: 8px; }
.rv-fit-label { font-size: 13px; color: var(--muted); }
.rv-fit-track { height: 8px; border-radius: 6px; background: #eef0ea; overflow: hidden; }
.rv-fit-fill { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.rv-fit-pct { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }

/* --- Body: sidebar + danh sách --- */
.rv-body { display: grid; grid-template-columns: 220px 1fr; gap: 32px; margin-top: 24px; }

.rv-filter-title { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.rv-filter-opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 7px 0; text-align: left;
}
.rv-check {
  width: 16px; height: 16px; border: 1.5px solid #cdd2c6; border-radius: 4px;
  flex-shrink: 0; position: relative; transition: .15s;
}
.rv-filter-opt.on .rv-check { background: var(--green); border-color: var(--green); }
.rv-filter-opt.on .rv-check::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.rv-filter-all { font-size: 14px; color: var(--ink); }
.rv-filter-count { font-size: 12px; color: var(--muted); }
.rv-filter-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

.rv-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.rv-count-label { font-size: 13px; color: var(--muted); }
.rv-sort { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.rv-custom-select {
  position: relative;
  display: inline-block;
}
.rv-custom-select .custom-select-trigger {
  min-width: 140px;
  height: 36px;
  border-radius: 12px;
  font-weight: 600;
  border: 1.5px solid var(--line, #e5e7eb);
  box-shadow: none;
  padding: 0 14px;
}
.rv-custom-select .custom-select-trigger:hover {
  border-color: var(--green-lime2);
  color: var(--green-deep);
  background-color: var(--green-soft);
}
.rv-custom-select.open .custom-select-trigger {
  border-color: var(--green);
}
.rv-custom-select .custom-select-options {
  border-radius: 10px;
  min-width: 100%;
}

.rv-list { display: flex; flex-direction: column; gap: 0; }
.rv-loading, .rv-empty { padding: 30px 0; text-align: center; color: var(--muted); font-size: 14px; }

.rv-item { padding: 20px 0; border-bottom: 1px solid #eef0ea; position: relative; }
.rv-item:first-child { padding-top: 0; }
.rv-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.rv-item-author { font-size: 14px; font-weight: 700; color: var(--ink); }
.rv-item-date { font-size: 12px; color: var(--muted); }
.rv-source { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1; color: var(--muted); }
.rv-source img { height: 16px; width: auto; display: block; transform: translateY(-2px); }
.rv-item-stars { margin-bottom: 8px; }
.rv-item-stars .star .star-svg { width: 14px; height: 14px; }
.rv-item-meta { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.rv-item-fit { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.rv-item-fit b { color: var(--ink); font-weight: 700; }
.rv-item-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rv-tag { font-size: 12px; color: var(--green); background: var(--green-soft, #e6f4d2); border-radius: 20px; padding: 4px 12px; }
.rv-item-comment { font-size: 14px; color: var(--ink); line-height: 1.6; margin-bottom: 10px; }
.rv-item-images { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-img { width: 72px; height: 72px; padding: 0; border: none; border-radius: 10px; overflow: hidden; cursor: pointer; background: #f4f5f1; }
.rv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-pager { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 24px; }
.rv-page-btn {
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #e3e6dd; border-radius: 9px;
  background: #fff; color: var(--ink); font-size: 13px; cursor: pointer; transition: .15s;
}
.rv-page-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.rv-page-btn.on { background: var(--green); border-color: var(--green); color: #fff; }
.rv-page-btn:disabled { opacity: .4; cursor: default; }
.rv-page-gap { color: var(--muted); padding: 0 2px; }

@media (max-width: 860px) {
  .rv-head { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
  .rv-body { grid-template-columns: 1fr; gap: 20px; }
  /* Bộ lọc xếp hạng: lưới 2 cột thẳng hàng trên mobile */
  .rv-filter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; align-items: center; }
  .rv-filter-title { grid-column: 1 / -1; margin-bottom: 4px; }
  .rv-filter-note { grid-column: 1 / -1; margin-top: 8px; }
  .rv-filter-opt { width: 100%; padding: 6px 0; }
  .rv-toolbar { flex-wrap: wrap; gap: 10px; }
}

/* An toàn: khu vực đánh giá không bao giờ rộng hơn màn hình (tránh cuộn ngang) */
.pd-review-sec { max-width: 100%; overflow-x: hidden; }
.pd-review-sec * { min-width: 0; }
.rv-fit-row { max-width: 100%; }

/* ======================= CHỨNG NHẬN AN TOÀN ======================= */
.pd-cert-container {
  padding: 8px 0;
}
.pd-cert-main {
  display: flex;
  gap: 24px;
  align-items: center;
}
.pd-cert-shield {
  flex: 0 0 95px;
  display: flex;
  justify-content: center;
}
.pd-cert-shield img {
  width: 100%;
  max-width: 85px;
  height: auto;
}
.pd-cert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-cert-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.pd-cert-badge-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-cert-badge-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pd-cert-badge-btn:hover {
  transform: scale(1.08);
}
.pd-cert-badge-btn.active {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.16);
  border-color: var(--green);
}
.pd-cert-desc-box {
  background: #fff;
  border: 1px solid #eef0ea;
  border-radius: 10px;
  padding: 14px 20px;
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pd-cert-desc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.pd-cert-desc-text {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 768px) {
  .pd-cert-main {
    flex-direction: column;
    gap: 20px;
  }
  .pd-cert-shield {
    flex: 0 0 auto;
    width: 80px;
  }
  .pd-cert-badges {
    justify-content: center;
    gap: 10px;
  }
  .pd-cert-badge-btn {
    width: 44px;
    height: 44px;
  }
}

/* CHỈ PC (>1080px): cột thông tin đã rộng ra nên icon chứng nhận to theo.
   Mỗi icon chia đều phần ngang còn lại (flex: 1 1 0) nên luôn to hết mức có thể
   mà không bao giờ tràn hay rớt xuống dòng; aspect-ratio giữ icon tròn đều.
   BẮT BUỘC đặt SAU khối .pd-cert-* phía trên: rule gốc có height: 50px, nếu
   khối này nằm trước thì chiều cao bị kẹt 50px trong khi bề ngang co giãn,
   icon sẽ méo thành hình bầu dục.
   Máy tính bảng và điện thoại giữ nguyên kích thước cũ. */
@media (min-width: 1081px) {
  .pd-cert-main { gap: 16px; }
  .pd-cert-shield { flex: 0 0 100px; }
  .pd-cert-shield img { max-width: 100px; }
  /* padding 4px: chừa chỗ cho icon đang chọn phóng to 1.08 lần, nếu không ở màn
     hẹp icon cuối hàng sẽ nhô ra khỏi mép cột và trông như bị cắt.
     justify-content: center để hàng icon nằm chính giữa, cân với ô mô tả
     "Khả năng kháng cháy…" trải hết bề ngang ngay bên dưới. */
  .pd-cert-badges {
    gap: 10px; flex-wrap: nowrap; padding: 4px;
    justify-content: center;
  }
  .pd-cert-badge-btn {
    flex: 1 1 0;
    width: auto; height: auto; min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 68px;
  }
  /* Chữ trong ô mô tả chứng nhận to theo cùng tỷ lệ với phần còn lại của cột */
  .pd-cert-desc-title { font-size: 16px; }
  .pd-cert-desc-text { font-size: 14px; }
}

/* ======================= XEM THÊM MÔ TẢ ======================= */
.pd-desc-wrapper {
  position: relative;
  transition: max-height 0.4s ease-in-out;
}
.pd-desc-wrapper.limit {
  max-height: 280px;
  overflow: hidden;
}
.pd-desc-wrapper.limit.expanded {
  max-height: none;
}
.pd-desc-gradient {
  display: none;
}
.pd-desc-wrapper.limit:not(.expanded) .pd-desc-gradient {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
  pointer-events: none;
}
.pd-desc-more-btn {
  display: block;
  margin: 14px auto 0;
  padding: 10px 24px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  background: #fff;
  border: 1.5px solid var(--green);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(47, 125, 50, 0.08);
}
.pd-desc-more-btn:hover {
  background: var(--green-soft);
  color: var(--green-deep);
}

/* Accordion Subtext */
.pd-acc-subtext {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
@media (max-width: 480px) {
  .pd-acc-subtext {
    font-size: 11.5px;
  }
}

/* ==========================================================================
   BỘ LỌC ĐA NĂNG & THÔNG MINH (MULTI-FACETED FILTER STYLES)
   ========================================================================== */

/* Nút kích hoạt bộ lọc */
.filter-toggle-btn {
  border: 1.5px solid var(--line, #e5e7eb);
  color: var(--gray, #606161);
  font-weight: 750;
  border-radius: 20px;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  height: 38px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.filter-toggle-btn:hover {
  border-color: var(--green-lime2);
  color: var(--green-deep);
  background-color: var(--green-soft);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(47, 125, 50, 0.08);
}
.filter-toggle-btn.active {
  background: var(--green) !important;
  color: #fff !important;
  border-color: var(--green) !important;
}
.filter-toggle-btn.active:hover {
  background: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
}
.filter-count-badge {
  background: var(--pink);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 10px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  min-width: 18px;
  text-align: center;
  display: inline-block;
  margin-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Bảng bộ lọc */
.filter-panel {
  background: #fdfefc;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
  animation: filterSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes filterSlideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-group-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--green-deep);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Các nút lựa chọn (Chips) */
.filter-chip {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--gray);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  line-height: 1.25;
}
.filter-chip:hover {
  border-color: var(--green-lime2);
  color: var(--green-deep);
  background: #fafdf7;
}
.filter-chip.active {
  background: var(--green-soft) !important;
  color: var(--green) !important;
  border-color: var(--green) !important;
  font-weight: 750;
  box-shadow: inset 0 1px 2px rgba(47, 125, 50, 0.05);
}

/* Lưới size */
.size-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.size-grid .filter-chip {
  justify-content: center;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12.5px;
}

/* Flexbox màu sắc */
.color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.color-grid .filter-chip {
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: 20px;
}
.color-swatch-circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: inline-block;
  background-size: cover;
  background-position: center;
}

/* Thanh hiển thị bộ lọc đang hoạt động */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--green-soft);
  border-radius: 12px;
  padding: 10px 18px;
  margin-bottom: 24px;
  border: 1px solid rgba(47, 125, 50, 0.08);
}
.active-filters-label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--green-deep);
}
.active-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green-deep);
  background: #fff;
  border: 1px solid var(--green-light);
  padding: 4px 10px;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(47, 125, 50, 0.03);
}
.active-filter-tag .remove-btn {
  font-size: 14px;
  cursor: pointer;
  color: var(--pink);
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  margin-left: 2px;
  transition: color 0.15s ease;
}
.active-filter-tag .remove-btn:hover {
  color: #d32f2f;
}
.clear-all-filters-btn {
  font-size: 12px;
  font-weight: 800;
  color: var(--pink);
  border-bottom: 1.5px dashed var(--pink);
  cursor: pointer;
  transition: color 0.15s;
  margin-left: auto;
  padding-bottom: 1px;
}
.clear-all-filters-btn:hover {
  color: #d32f2f;
  border-color: #d32f2f;
}

/* Responsive cho Bộ lọc */
@media (max-width: 1200px) {
  .filter-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .filter-panel {
    padding: 16px;
  }
  .filter-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .size-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .active-filters-bar {
    padding: 10px 14px;
    gap: 8px;
  }
  .clear-all-filters-btn {
    margin-left: 0;
    width: 100%;
    text-align: center;
    border-bottom: none;
    background: #fff;
    border: 1px solid var(--pink);
    padding: 6px 12px;
    border-radius: 16px;
    margin-top: 4px;
  }
  .clear-all-filters-btn:hover {
    background: #fdf2f2;
  }
}

@media (max-width: 480px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .size-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ============ GÓC GIA ĐÌNH (FAMILY CORNER) ============ */
.family-corner {
  padding-bottom: 20px;
}

/* Hero Banner */
.fc-hero-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 340px;
  margin-bottom: 40px;
  background: #eef2ee;
}
.fc-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fc-hero-overlay {
  position: absolute;
  inset: 0;
  padding: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.3) 70%, transparent);
  color: #ffffff;
}
.fc-hero-title {
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.fc-hero-subtitle {
  font-size: 16px;
  max-width: 500px;
  line-height: 1.6;
  opacity: 0.92;
}

/* Layout Grid */
.fc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}

/* Section Header */
.fc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.fc-section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--green-deep);
  letter-spacing: -0.01em;
}
.fc-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 240px;
}
.fc-search-ic {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}
.fc-search-box input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border-radius: 9999px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  background: #fcfdfc;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fc-search-box input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.15);
  background: #fff;
}

/* Posts Grid */
.fc-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.fc-post-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.fc-post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(31, 71, 35, 0.08);
}
.fc-post-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f7f9f6;
  border-bottom: 1px solid var(--line);
}
.fc-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.fc-post-card:hover .fc-post-thumb img {
  transform: scale(1.04);
}
.fc-post-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.fc-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.fc-post-date {
  margin-bottom: 0;
}
.fc-post-author {
  font-size: inherit;
  color: inherit;
}
.fc-post-author strong {
  font-weight: 600;
}
.fc-post-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.fc-post-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-post-summary {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-post-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fc-post-more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  transition: color 0.15s;
}
.fc-post-card:hover .fc-post-more {
  color: var(--green-lime);
}

/* Sidebar Widgets */
.fc-sidebar-box {
  background: #fcfdfc;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
}
.fc-side-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 20px;
  border-left: 4px solid var(--green);
  padding-left: 12px;
  line-height: 1.15;
}

/* Accordion FAQ */
.fc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fc-faq-item {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.fc-faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.fc-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 8px 0;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  gap: 12px;
  cursor: pointer;
  justify-content: space-between;
}
.fc-faq-num {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-soft);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.fc-faq-q {
  flex-grow: 1;
  line-height: 1.4;
  text-align: justify;
}
.fc-faq-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
.fc-faq-arrow svg {
  width: 12px;
  height: 12px;
  display: block;
}
.fc-faq-item.open .fc-faq-arrow {
  background: var(--green-soft);
  color: var(--green);
  transform: rotate(180deg);
}
.fc-faq-trigger:hover .fc-faq-arrow {
  background: var(--green-soft);
  color: var(--green);
}
.fc-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.fc-faq-inner {
  padding: 8px 0 8px 38px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5563;
  text-align: justify;
}
.fc-faq-more-btn-wrap {
  margin-top: 12px;
  display: flex;
}
.fc-faq-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft);
  padding: 6px 14px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.fc-faq-more-btn:hover {
  background: var(--green);
  color: #fff;
}

/* Sidebar Vertical Promo Banner */
.fc-side-promo {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1.35;
  background: #f7f9f6;
  border: 1px solid var(--line);
}
.fc-side-promo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.fc-side-promo:hover img {
  transform: scale(1.04);
}
.fc-side-promo-overlay {
  position: absolute;
  inset: 0;
  padding: 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent);
  color: #ffffff;
}
.fc-side-promo-overlay h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.25;
}
.fc-side-promo-overlay p {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.9;
}

/* Pagination */
.fc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.fc-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: #f7f9f6;
  border: 1px solid var(--line);
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.fc-page-btn:hover {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green);
}
.fc-page-btn.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.fc-page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.fc-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
.fc-page-btn.nav-btn {
  border-radius: 20px;
  width: auto;
  padding: 0 16px;
}
.fc-sidebar-box .fc-pagination {
  margin-top: 24px;
  margin-bottom: 8px;
  gap: 6px;
}
.fc-sidebar-box .fc-page-btn {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.fc-sidebar-box .fc-page-ellipsis {
  width: 32px;
  height: 32px;
  font-size: 13px;
}
.fc-sidebar-box .fc-page-btn.nav-btn {
  padding: 0 10px;
  border-radius: 16px;
}

/* Slide Transition Animations */
.fc-posts-grid, .fc-faq-list {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: translateX(0);
}
.fc-posts-grid.slide-out, .fc-faq-list.slide-out {
  opacity: 0;
  transform: translateX(-20px);
}
.fc-posts-grid.slide-in, .fc-faq-list.slide-in {
  opacity: 0;
  transform: translateX(20px);
}

/* Blog detail subscription box */
.bv-subscribe-section {
  margin-top: 40px;
  margin-bottom: 20px;
}
.bv-subscribe-card {
  background: var(--green-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.bv-subscribe-card::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(47,125,50,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.bv-subscribe-info {
  flex: 1;
  max-width: 550px;
}
.bv-subscribe-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-deep);
  margin-bottom: 8px;
}
.bv-subscribe-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.bv-subscribe-form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  flex-shrink: 0;
}
.bv-subscribe-form input {
  flex: 1;
  height: 48px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: #ffffff;
  padding: 0 20px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  transition: all 0.3s ease;
  outline: none;
}
.bv-subscribe-form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 125, 50, 0.15);
}
.bv-subscribe-btn {
  height: 48px;
  border-radius: 24px;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 0 28px;
  transition: all 0.3s ease;
}
.bv-subscribe-btn:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(47, 125, 50, 0.2);
}
.bv-subscribe-btn:active {
  transform: translateY(0);
}
.bv-subscribe-msg {
  position: absolute;
  bottom: 8px;
  right: 40px;
  font-size: 12.5px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.bv-subscribe-msg.success {
  color: var(--green-deep);
}
.bv-subscribe-msg.error {
  color: var(--pink);
}

@media (max-width: 991px) {
  .bv-subscribe-card {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 20px;
  }
  .bv-subscribe-info {
    max-width: 100%;
  }
  .bv-subscribe-form {
    max-width: 100%;
  }
  .bv-subscribe-msg {
    position: static;
    margin-top: 10px;
    text-align: left;
  }
}
@media (max-width: 767px) {
  .bv-subscribe-form {
    flex-direction: column;
    gap: 10px;
  }
  .bv-subscribe-form input {
    flex: none;
    width: 100%;
    height: 48px;
  }
  .bv-subscribe-btn {
    width: 100%;
  }
}

/* Success Modal Popup */
.bv-success-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bv-success-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.bv-success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(31, 71, 35, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bv-success-box {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 440px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 40px 32px 32px 32px;
  z-index: 3002;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bv-success-modal.active .bv-success-box {
  transform: scale(1);
}
.bv-success-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  background: none;
  border: none;
}
.bv-success-close:hover {
  color: var(--pink);
}
.bv-success-bear-wrap {
  width: 110px;
  height: 110px;
  margin: 0 auto 20px auto;
  background: var(--green-soft);
  border-radius: 50%;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(47, 125, 50, 0.15);
}
.bv-success-bear-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bv-success-body h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-deep);
  margin-bottom: 12px;
}
.bv-success-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 24px;
}
.bv-success-btn {
  height: 44px;
  border-radius: 22px;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  padding: 0 36px;
  border: none;
  transition: all 0.3s ease;
  width: 100%;
}
.bv-success-btn:hover {
  background: var(--green-deep);
  box-shadow: 0 4px 12px rgba(47, 125, 50, 0.2);
}

/* Article Reader Lightbox */
.fc-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fc-reader-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.fc-reader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fc-reader-box {
  position: relative;
  background: #ffffff;
  width: 90%;
  max-width: 900px;
  height: 85%;
  border-radius: 24px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: translateY(30px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.fc-reader-modal.active .fc-reader-box {
  transform: translateY(0);
}
.fc-reader-close {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 32px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: background-color 0.2s, transform 0.2s;
  border: 1px solid var(--line);
}
.fc-reader-close:hover {
  background: #fff;
  transform: scale(1.05);
}
.fc-reader-content {
  padding: 48px;
  overflow-y: auto;
  flex-grow: 1;
  scrollbar-width: thin;
}
.fc-reader-header {
  margin-bottom: 24px;
  text-align: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
.fc-reader-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 8px;
}
.fc-reader-header h1 {
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 14px;
}
.fc-reader-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}
.fc-reader-hero {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  max-height: 420px;
  border: 1px solid var(--line);
}
.fc-reader-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fc-reader-body {
  font-size: 16.5px;
  line-height: 1.8;
  color: #374151;
  text-align: justify;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}
.fc-reader-body h2, .fc-reader-body h3 {
  color: var(--ink);
  font-weight: 800;
  margin: 28px 0 14px 0;
  text-align: left;
}
.fc-reader-body h2 { font-size: 22px; }
.fc-reader-body h3 { font-size: 19px; }
.fc-reader-body p {
  margin-bottom: 18px;
}
.fc-reader-body ul, .fc-reader-body ol {
  margin-bottom: 18px;
  padding-left: 24px;
}
.fc-reader-body ul { list-style: disc; }
.fc-reader-body ol { list-style: decimal; }
.fc-reader-body li {
  margin-bottom: 8px;
}
.fc-reader-body blockquote {
  border-left: 4px solid var(--green);
  padding: 8px 20px;
  background: var(--green-soft);
  margin: 20px 0;
  font-style: italic;
  border-radius: 0 12px 12px 0;
}

/* ============ RESPONSIVE GÓC GIA ĐÌNH ============ */
@media (max-width: 991px) {
  .fc-hero-banner {
    height: 240px;
    margin-bottom: 28px;
  }
  .fc-hero-overlay {
    padding: 24px;
  }
  .fc-hero-title {
    font-size: 26px;
    margin-bottom: 8px;
  }
  .fc-hero-subtitle {
    font-size: 13.5px;
  }
  .fc-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .fc-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .fc-sidebar-box {
    margin-bottom: 0;
  }
  .fc-side-promo {
    aspect-ratio: auto;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .fc-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .fc-search-box {
    width: 100%;
  }
  .fc-posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .fc-sidebar {
    grid-template-columns: 1fr;
  }
  .fc-reader-box {
    width: 95%;
    height: 90%;
  }
  .fc-reader-content {
    padding: 24px;
  }
  .fc-reader-header h1 {
    font-size: 22px;
  }
  .fc-reader-lead {
    font-size: 14px;
  }
  .fc-reader-body {
    font-size: 15px;
  }
}

/* ==========================================================================
   NEW BLOG POST LAYOUT & DETAILS
   ========================================================================== */

.bv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  margin-top: 24px;
  align-items: start;
}

/* Không đóng khung bài viết: bỏ viền, bỏ đổ bóng, bỏ padding để phần chữ dàn
   hết bề ngang cột — trước đây khung này ăn mất 32px mỗi bên. */
.bv-content-col {
  min-width: 0; /* cho phép cột co lại, tránh tràn ngang khi có nội dung rộng (sản phẩm nhúng) */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Chặn mọi nội dung nhúng vượt quá chiều rộng cột bài viết */
.bv-html-content { min-width: 0; overflow-wrap: break-word; }
.bv-html-content img,
.bv-html-content table,
.bv-html-content iframe { max-width: 100%; }

.bv-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.bv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}

.bv-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--muted);
}

.bv-meta-label {
  color: #777;
}

.bv-meta-ic {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.bv-featured-image-wrap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--line);
}

.bv-featured-image-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  max-height: 480px;
}

/* Post body HTML styling */
.bv-html-content {
  font-size: 16.5px;
  line-height: 1.75;
  color: #333333;
}

.bv-html-content p {
  margin-bottom: 18px;
  text-align: justify;
}

/* ============================================================
   FONT CHỮ CỦA NỘI DUNG SOẠN TỪ TRANG QUẢN TRỊ
   Kiểu chữ do MÃ NGUỒN quyết định (biến --font ở đầu tệp này), không phải do
   người nhập. Nội dung dán từ Word / WordPress / Shopee hay kéo theo
   font-family riêng (Google Sans Flex, SHPBurmese, Times New Roman…) khiến mỗi
   đoạn một kiểu chữ. Quy tắc dưới ép mọi đoạn về đúng font của web.
   Muốn đổi font toàn site: sửa biến --font, không cần sửa lại nội dung.
   ============================================================ */
.bv-html-content [style*="font-family"],
.pd-desc [style*="font-family"],
.col-seo-body [style*="font-family"],
.privacy-content [style*="font-family"] {
  font-family: var(--font) !important;
}
/* Riêng khối mã giữ font đều nét để canh cột */
.bv-html-content pre, .bv-html-content code,
.pd-desc pre, .pd-desc code,
.col-seo-body pre, .col-seo-body code,
.privacy-content pre, .privacy-content code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* Tiêu đề H2: thanh xanh + dải nền bo góc mờ dần sang phải.
   Dùng chung cho MỌI khu vực nội dung soạn từ trang quản trị — bài viết, mô tả
   sản phẩm, trang chính sách, bài viết SEO cuối trang danh mục — để bố mẹ soạn
   trong admin thấy sao thì ngoài web ra đúng như vậy.
   Khung soạn thảo của trang quản trị dùng lại y kiểu này, xem .rte h2 trong
   /admin/admin.css — sửa bên nào thì sửa cả hai bên.

   :not([style*="font-size"]) — một số nội dung dán từ WordPress / Shopee biến
   MỌI đoạn văn thành <h2 style="font-size:14px">. Nếu áp dải xanh cho cả những
   thẻ đó thì trang sẽ đầy dải xanh chồng nhau. Nên chỉ tô cho tiêu đề soạn sạch
   (không mang cỡ chữ dán kèm); nội dung dán giữ nguyên hình thức cũ cho tới khi
   được soạn lại trong trang quản trị.

   Mốc màu của dải nền dùng ĐỘ DÀI CỐ ĐỊNH (min(38%, 190px) / min(100%, 510px))
   chứ không dùng phần trăm thuần. Lý do: cùng một quy tắc nhưng khung nội dung
   mỗi nơi một bề ngang — bài viết ~510px, bài SEO cuối trang danh mục ~1160px,
   khung soạn thảo trong admin ~1290px. Với mốc phần trăm thì dải xanh giãn theo
   khung: ở bài viết là một tab xanh gọn, sang trang shop và admin lại thành vệt
   xanh nhạt kéo gần hết bề ngang — cùng CSS mà nhìn ra hai kiểu khác nhau.
   Kẹp bằng min() giữ dải xanh y như trang bài viết ở mọi khung rộng, đồng thời
   màn hình hẹp hơn 510px vẫn mờ dần hết trong lòng thẻ như cũ (không bị cắt cụt). */
.bv-html-content h2:not([style*="font-size"]),
.pd-desc h2:not([style*="font-size"]),
.col-seo-body h2:not([style*="font-size"]),
.privacy-content h2:not([style*="font-size"]) {
  font-size: 22px;
  font-weight: 800;
  color: var(--green-deep);
  margin: 40px 0 18px;
  padding: 13px 24px 13px 18px;
  border-left: 5px solid var(--green);
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #e8f6d2 0px, #f1fae2 min(38%, 190px), rgba(255, 255, 255, 0) min(100%, 510px));
  line-height: 1.35;
  text-align: left;
}

.bv-html-content h3,
.pd-desc h3,
.col-seo-body h3,
.privacy-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--green-deep);
  margin: 28px 0 12px;
  line-height: 1.35;
  text-align: left;
}

.bv-html-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  margin: 20px auto;
  display: block;
  box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

/* Ảnh có khung + chú thích — DÙNG CHUNG cho mọi khu vực nội dung soạn từ trang
   quản trị (bài viết, mô tả sản phẩm, bài SEO cuối trang danh mục, trang chính
   sách) để soạn trong admin thấy sao thì ngoài web ra đúng vậy.
   Trước đây chỉ .bv-html-content có bộ này, nên bài SEO của /giay-chan-bet
   chỉnh cỡ ảnh và căn giữa trong admin xong ra ngoài chẳng ăn gì. */
.bv-html-content figure, .bv-html-content .wp-caption,
.pd-desc figure, .pd-desc .wp-caption,
.col-seo-body figure, .col-seo-body .wp-caption,
.privacy-content figure, .privacy-content .wp-caption {
  /* !important vì bài cũ có thể mang sẵn style="width:3000px" trên chính thẻ
     <figure> (lỗi chèn ảnh cỡ đầy đủ trước đây) — style nội tuyến thắng CSS
     thường, không chặn cứng thì khung ảnh vẫn tràn ra ngoài trang. */
  max-width: 100% !important;
  margin: 20px auto;
}

.bv-html-content figure img, .bv-html-content .wp-caption img,
.pd-desc figure img, .pd-desc .wp-caption img,
.col-seo-body figure img, .col-seo-body .wp-caption img,
.privacy-content figure img, .privacy-content .wp-caption img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px;
  display: inline-block;
}

/* Ảnh CHƯA được chỉnh cỡ trong admin thì vẫn rộng hết khung như trước.
   Ảnh đã kéo góc chỉnh cỡ (có width riêng) thì giữ đúng cỡ đó — không ép 100%
   nữa, vì ép thì mọi ảnh ra ngoài web đều to bằng nhau, khác hẳn lúc soạn. */
.bv-html-content figure img:not([style*="width"]), .bv-html-content .wp-caption img:not([style*="width"]),
.pd-desc figure img:not([style*="width"]), .pd-desc .wp-caption img:not([style*="width"]),
.col-seo-body figure img:not([style*="width"]), .col-seo-body .wp-caption img:not([style*="width"]),
.privacy-content figure img:not([style*="width"]), .privacy-content .wp-caption img:not([style*="width"]) {
  width: 100%;
}

.bv-html-content figcaption, .bv-html-content .wp-caption-text,
.pd-desc figcaption, .pd-desc .wp-caption-text,
.col-seo-body figcaption, .col-seo-body .wp-caption-text,
.privacy-content figcaption, .privacy-content .wp-caption-text {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  font-style: italic;
  font-weight: 400;
}

/* Căn trái / giữa / phải đặt trong admin — figure co vừa ảnh thì mới thấy lệch */
.bv-html-content .aligncenter, .pd-desc .aligncenter,
.col-seo-body .aligncenter, .privacy-content .aligncenter {
  display: block;
}

/* Căn TRÁI / PHẢI = float để chữ chảy quanh ảnh, đúng như lúc soạn trong admin.
   Không có float thì bên cạnh ảnh là một mảng trống, chữ rơi hết xuống dưới. */
/* !important ở đây là BẮT BUỘC: rule ".bv-html-content figure" phía trên đặt
   max-width:100% !important (để chặn mấy khung ảnh cũ lỡ mang width:3000px).
   Không có !important thì nó đè luôn mức trần 52% này, khung ảnh nổi phình ra
   gần hết bề ngang bài — bên cạnh ảnh không còn chỗ cho chữ, mà phía dưới ảnh
   thì hở một mảng trắng to. Đúng lỗi "trong trình soạn thảo nhìn ổn, ra web lại
   nhiều khoảng trống". */
.bv-html-content .alignleft, .pd-desc .alignleft, .col-seo-body .alignleft, .privacy-content .alignleft {
  float: left;
  max-width: 52% !important;
  margin: 6px 22px 14px 0;
}
.bv-html-content .alignright, .pd-desc .alignright, .col-seo-body .alignright, .privacy-content .alignright {
  float: right;
  max-width: 52% !important;
  margin: 6px 0 14px 22px;
}
/* Dọn float: tiêu đề, bảng, đường kẻ đứng sau ảnh phải xuống hàng mới,
   không bị hút lên nằm cạnh ảnh. */
.bv-html-content h2, .bv-html-content h3, .bv-html-content table, .bv-html-content hr,
.pd-desc h2, .pd-desc h3, .pd-desc table, .pd-desc hr,
.col-seo-body h2, .col-seo-body h3, .col-seo-body table, .col-seo-body hr,
.privacy-content h2, .privacy-content h3, .privacy-content table, .privacy-content hr {
  clear: both;
}
/* Khối nội dung tự bao lấy ảnh đang float ở cuối bài.
   Dùng display:flow-root chứ KHÔNG dùng ::after — .col-seo-body đã xài ::after
   cho lớp mờ "Xem thêm", chèn thêm một ::after nữa là mất lớp mờ đó. */
.bv-html-content, .pd-desc, .privacy-content { display: flow-root; }
.col-seo-body.open { display: flow-root; }

@media (max-width: 640px) {
  /* Điện thoại: ảnh float chiếm hơn nửa dòng thì chữ bên cạnh mỗi dòng chỉ nhét
     được vài chữ, đọc rất mệt. Cho ảnh chiếm cả dòng. */
  .bv-html-content .alignleft, .pd-desc .alignleft, .col-seo-body .alignleft, .privacy-content .alignleft,
  .bv-html-content .alignright, .pd-desc .alignright, .col-seo-body .alignright, .privacy-content .alignright {
    float: none;
    /* !important để thắng mức trần 52% !important của bản máy tính ở trên,
       không thì ra điện thoại ảnh vẫn bị bó lại còn nửa màn hình */
    max-width: 100% !important;
    width: auto !important;
    margin: 16px 0;
  }
}

.bv-html-content blockquote {
  border-left: 4px solid var(--green-soft);
  background: var(--bg-soft);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #555555;
}

.bv-html-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  -webkit-overflow-scrolling: touch;
}

/* Bề rộng cột do người soạn kéo trong trang quản trị (ghi bằng %) — dùng
   table-layout: fixed để trình duyệt tôn trọng đúng con số đó, soạn sao ra vậy.
   Xem phần kéo giãn cột trong /admin/rte.js. */
.bv-html-content table,
.pd-desc table,
.col-seo-body table,
.privacy-content table { table-layout: fixed; }
.bv-html-content td, .bv-html-content th,
.pd-desc td, .pd-desc th,
.col-seo-body td, .col-seo-body th,
.privacy-content td, .privacy-content th { overflow-wrap: break-word; }

.bv-html-content th, .bv-html-content td {
  border: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
}

.bv-html-content th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
}

/* Cột đầu tiên là cột "tiêu chí" — tô xám như hàng tiêu đề để mắt bám theo từng
   dòng, bảng nhiều cột đọc đỡ lạc. Dùng chung màu với <th> cho đồng bộ.
   Khung soạn thảo trong trang quản trị có quy tắc tương ứng: xem `.rte td:first-child`
   trong /admin/admin.css — sửa bên nào thì sửa cả hai bên. */
.bv-html-content td:first-child {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
}

/* Hàng đầu tiên cũng tô nền như cột đầu.
   Bảng soạn đúng chuẩn có <th> thì quy tắc `.bv-html-content th` ở trên đã lo.
   Nhưng nội dung dán từ Word/Google Docs (và vài bài cũ) sinh ra bảng TOÀN <td>,
   không có <th> nào — khi đó chỉ mỗi ô góc trái được tô, nhìn lệch hẳn.
   `:not(:has(th))` để chỉ tô hàng đầu ở đúng loại bảng thiếu <th>; bảng đã có
   <th> thì không đụng tới, tránh tô nhầm hàng dữ liệu đầu tiên.
   Trình duyệt quá cũ không hiểu :has() thì bỏ qua cả quy tắc — bảng trở về
   đúng như hiện nay, không vỡ layout.
   Khung soạn thảo trang quản trị có quy tắc y hệt: xem `.rte table:not(:has(th))`
   trong /admin/admin.css — sửa bên nào thì sửa cả hai bên. */
.bv-html-content table:not(:has(th)) tr:first-child > td {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink);
}

/* Màu chữ dán kèm không được đè màu xanh của tiêu đề.
   Khi dán từ Word / Google Docs / web, trình duyệt tự bọc chữ trong
   <span style="color: rgb(58,66,59)"> (màu chữ đang tính của khung soạn thảo)
   -> tiêu đề H2 hiện ra đen xì thay vì xanh lá của giao diện.
   Khâu dán đã chặn từ gốc (xem boStyleChu() trong /admin/rte.js), nhưng nội dung
   ĐÃ LƯU trước đó vẫn còn màu cũ nên cần trung hoà thêm ở đây.
   Lưu ý đánh đổi: tô màu riêng cho chữ BÊN TRONG tiêu đề sẽ không còn tác dụng —
   toàn bộ 1392 thẻ tiêu đề hiện có không dùng đến nên không ảnh hưởng gì. */
.bv-html-content :is(h1, h2, h3, h4, h5, h6) *,
.pd-desc :is(h1, h2, h3, h4, h5, h6) *,
.col-seo-body :is(h1, h2, h3, h4, h5, h6) *,
.privacy-content :is(h1, h2, h3, h4, h5, h6) * {
  /* !important vì màu nằm ngay trong thuộc tính style của thẻ (inline style
     luôn thắng mọi selector thường) — không có !important thì quy tắc này vô tác dụng. */
  color: inherit !important;
  background-color: transparent !important;
}

/* Thẻ khối lọt vào BÊN TRONG tiêu đề (do dán từ Word / Google Docs) — <h2><p>…</p></h2>
   là HTML sai, trình duyệt vẫn hiện nhưng <p> mang margin riêng nên dải xanh của
   tiêu đề bị đội cao lên trông như "phình ra". Trung hoà lại để dù nội dung cũ
   còn sót thẻ khối thì tiêu đề vẫn cao đúng bằng một dòng chữ.
   Gốc rễ đã chặn ở khâu dán: xem phangChoTieuDe()/donDepTieuDe() trong /admin/rte.js. */
.bv-html-content :is(h1, h2, h3, h4, h5, h6) :is(p, div),
.pd-desc :is(h1, h2, h3, h4, h5, h6) :is(p, div),
.col-seo-body :is(h1, h2, h3, h4, h5, h6) :is(p, div),
.privacy-content :is(h1, h2, h3, h4, h5, h6) :is(p, div) {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
}

/* Reset ở đầu tệp có "ul { list-style: none }" cho các menu điều hướng — phải
   trả lại dấu đầu dòng cho nội dung bài viết, nếu không danh sách trong bài chỉ
   còn là mấy dòng chữ thụt lề (trong trang quản trị vẫn thấy dấu chấm nên rất
   dễ tưởng là đã đúng). Dùng padding-left thay margin-left để dấu chấm nằm gọn
   trong cột chữ. */
.bv-html-content ul {
  list-style: disc;
  margin: 0 0 20px;
  padding-left: 24px;
}
.bv-html-content ol {
  list-style: decimal;
  margin: 0 0 20px;
  padding-left: 24px;
}
/* Danh sách lồng nhau: đổi dấu theo từng cấp như trình duyệt vẫn làm */
.bv-html-content ul ul { list-style: circle; }
.bv-html-content ul ul ul { list-style: square; }
.bv-html-content ol ol { list-style: lower-alpha; }
.bv-html-content ol ol ol { list-style: lower-roman; }
.bv-html-content li ul,
.bv-html-content li ol { margin: 8px 0 0; }

.bv-html-content li {
  margin-bottom: 8px;
}

/* --- LỖI 3: đường kẻ ngang đang dùng kiểu mặc định xấu của trình duyệt --- */
.bv-html-content hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

/* --- LỖI 4: khối mã không có nền nên nhìn như chữ thường --- */
.bv-html-content pre {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
}
.bv-html-content code {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .92em;
}
.bv-html-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Sidebar TOC */
.bv-sidebar-col {
  position: sticky;
  top: 110px;
}

.bv-toc-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid var(--line);
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.bv-toc-head {
  font-size: 16.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.bv-toc-list {
  list-style: none;
  padding: 0 12px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green-soft, #e2e8df) #f7f9f4;
}

.bv-toc-list::-webkit-scrollbar {
  width: 5px;
}

.bv-toc-list::-webkit-scrollbar-track {
  background: #f7f9f4;
  border-radius: 4px;
}

.bv-toc-list::-webkit-scrollbar-thumb {
  background: var(--green-soft, #e2e8df);
  border-radius: 4px;
}

.bv-toc-list::-webkit-scrollbar-thumb:hover {
  background: var(--green, #2f7d32);
}

.bv-toc-list li a {
  display: block;
  font-size: 14px;
  color: #555555;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s, padding-left 0.2s;
}

.bv-toc-list li.toc-h3 {
  padding-left: 14px;
  font-size: 13px;
}

.bv-toc-list li.toc-h3 a {
  color: #777777;
}

.bv-toc-list li a:hover {
  color: var(--green);
  padding-left: 4px;
}

/* Embedded Product Card */
.embedded-product-placeholder {
  margin: 28px 0;
}

.eb-prod-card {
  display: flex;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  gap: 20px;
  box-shadow: 0 6px 24px rgba(31, 36, 33, 0.04);
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 100%;
}

.eb-prod-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
}

.eb-prod-img-wrap {
  position: relative;
  align-self: center; /* ảnh sản phẩm căn giữa theo chiều dọc */
  flex: 0 0 190px;
  width: 190px;
  height: 190px;
  background: var(--green-soft, #e6f4d2);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* Badge "MỚI VÀ CẢI TIẾN" nằm trong ảnh sản phẩm */
.eb-badge-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.eb-prod-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s;
}

.eb-prod-card:hover .eb-prod-img {
  transform: scale(1.05);
}

.eb-prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.eb-prod-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eb-prod-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--green);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.06em;
}

.eb-prod-discount {
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: #d32f2f;
  padding: 3px 6px;
  border-radius: 4px;
}

.eb-prod-card .eb-prod-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin: 0; /* ghi đè margin tiêu đề h3 của bài viết, thu gọn khoảng trắng phía trên */
  line-height: 1.3;
}

.eb-prod-prices {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eb-prod-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}

.eb-prod-price-old {
  font-size: 13.5px;
  text-decoration: line-through;
  color: var(--muted);
}

.eb-prod-prop {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eb-prod-prop-label {
  font-size: 13px;
  color: #666;
  flex: 0 0 auto;
}

.eb-prod-prop-label strong {
  color: var(--ink);
  font-weight: 700;
}

.eb-prod-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.eb-color-opt {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  outline: 1px solid var(--line);
  cursor: pointer;
  background-size: cover;
  background-position: center;
  transition: outline-color 0.2s, transform 0.2s;
}

.eb-color-opt:hover {
  transform: scale(1.05);
}

.eb-color-opt.active {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* Chọn size kiểu dropdown (giống trang sản phẩm) */
.eb-size-field {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.eb-size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eb-size-header .eb-prod-prop-label {
  font-weight: 600;
  color: var(--ink);
}

.eb-size-guide {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}

.eb-size-guide:hover {
  color: var(--green-deep);
}

/* Dropdown size trong widget nhúng (tái dùng .pd-size) */
.eb-size .pd-size-trigger {
  border-width: 1px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
}
.eb-size .pd-size-current {
  min-width: 0;        /* cho phép cắt ellipsis, tránh tràn ngang trên mobile */
  flex: 1;
  text-align: left;
}
.eb-size .pd-size-opt {
  justify-content: space-between;
}
.eb-size .pd-size-lbl {
  font-size: 14px;
  line-height: 1.35;
}

.eb-prod-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
}

.eb-qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  height: 38px;
  background: #ffffff;
  overflow: hidden;
}

.eb-qty-btn {
  width: 32px;
  height: 100%;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.eb-qty-btn:hover {
  background: #f0f2f0;
}

.eb-qty-val {
  width: 28px;
  height: 100%;
  border: none;
  background: none;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  outline: none;
}

.eb-add-btn {
  flex: 1;
  height: 38px;
  border-radius: 100px;
  border: none;
  background: var(--green);
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.2s;
}

.eb-add-btn:hover {
  background: var(--green-deep);
}

/* Related articles */
.bv-related-section {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 48px;
  margin-bottom: 32px;
}

.bv-related-head {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 24px;
  text-align: center;
}

.bv-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.bv-related-card {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.01);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.bv-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.bv-related-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.bv-related-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.bv-related-card:hover .bv-related-card-img img {
  transform: scale(1.04);
}

.bv-related-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bv-related-card-date {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
}

.bv-related-card-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 44px;
}

.bv-related-card-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 38px;
}

.bv-related-card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

.bv-related-card-views {
  color: var(--muted);
  font-weight: normal;
  font-size: 12px;
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
  .bv-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bv-sidebar-col {
    display: none;
  }
  .bv-toc-card {
    position: static;
    margin: 24px 0;
  }
  .bv-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bv-title {
    font-size: 24px;
  }
  .eb-prod-card {
    flex-direction: column;
    align-items: stretch; /* trên mobile (cột), giãn hết chiều rộng để không tràn */
    gap: 16px;
    padding: 16px;
  }
  .eb-prod-img-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .bv-related-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Google Maps Popup Modal --- */
.map-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.map-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.map-modal-card {
  background: #fff;
  width: 90%;
  max-width: 800px;
  height: 80%;
  max-height: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translateY(30px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.map-modal-overlay.active .map-modal-card {
  transform: translateY(0);
}

.map-modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.map-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--green-deep);
}

.map-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s;
  line-height: 1;
  padding: 0;
}

.map-modal-close:hover {
  color: var(--ink);
}

.map-modal-body {
  flex-grow: 1;
  position: relative;
  background: #f4f6f3;
}

#map-canvas {
  width: 100%;
  height: 100%;
}

.map-modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  background: #fff;
  gap: 12px;
}

.map-btn-direct {
  background: var(--green);
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, transform 0.2s;
}

.map-btn-direct:hover {
  background: var(--green-deep);
  transform: scale(1.02);
}

.map-btn-direct img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

/* ============ STYLING TRANG SALE (SHOPEE / TIKTOK STYLE BY XIXA) ============ */
.sale-page {
  padding: 24px 0 60px 0;
  background-color: #fff;
  min-height: 100vh;
}

/* 1. Countdown Flash Sale Bar */
.flash-sale-bar {
  background: #e44c0f;
  color: #fff;
  border-radius: 12px;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(228, 76, 15, 0.25);
  flex-wrap: wrap;
  gap: 12px;
}
.fs-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: pulse-glow 1.5s infinite;
}
.fs-title svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}
.fs-countdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
}
.fs-countdown span {
  color: #fff;
  font-size: 15px;
  font-family: inherit;
}

@keyframes pulse-glow {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.6)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.6)); }
}

/* 2. Hero Carousel Banners */
.sale-hero-carousel {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  aspect-ratio: 2.8 / 1;
}
@media (max-width: 768px) {
  .sale-hero-carousel {
    aspect-ratio: 2 / 1;
  }
}
.sale-carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.sale-carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
}
.sale-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
  opacity: 0;
}
.sale-hero-carousel:hover .carousel-nav {
  opacity: 1;
}
.carousel-nav:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
}
.carousel-nav.prev { left: 16px; }
.carousel-nav.next { right: 16px; }

.carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.25s;
}
.carousel-dot.active {
  width: 24px;
  border-radius: 4px;
  background: #fff;
}

/* 3. Sale Sections */
.sale-section {
  margin-bottom: 50px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}
.sale-section-banner {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  aspect-ratio: 5 / 1;
}
@media (max-width: 768px) {
  .sale-section-banner {
    aspect-ratio: 3 / 1;
  }
}
.sale-section-banner a {
  display: block;
  width: 100%;
  height: 100%;
}
.sale-section-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.sale-section-banner:hover img {
  transform: scale(1.025);
}

.sale-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-left: 4px solid #e44c0f;
  padding-left: 12px;
}
.sale-section-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.5px;
  margin: 0;
}
.sale-section-more {
  font-size: 14px;
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s;
}
.sale-section-more:hover {
  opacity: 0.8;
}

/* 4. Product Slider Carousel */
.sale-product-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 4px;
}
.sale-slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.sale-slider-track .prod-card {
  flex-shrink: 0;
  width: calc((100% - (3 * 20px)) / 4); /* default 4 cards */
  border-radius: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  background: #fff;
  position: relative;
}
.sale-slider-track .prod-info {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1024px) {
  .sale-slider-track .prod-card {
    width: calc((100% - (2 * 20px)) / 3); /* 3 cards */
  }
}
@media (max-width: 768px) {
  .sale-slider-track .prod-card {
    width: calc((100% - (1 * 16px)) / 2); /* 2 cards */
  }
  .sale-slider-track {
    gap: 16px;
  }
  /* Chỉ trang Sale: thẻ hẹp -> cho giá xuống dòng khi thiếu chỗ,
     tránh giá cũ bị cắt lẹm ở mép thẻ (card overflow:hidden). */
  .sale-slider-track .prod-price-box {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .sale-slider-track .price-old {
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Navigation Arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #333;
  border: 1px solid #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.2s ease;
}
.slider-arrow:hover {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.slider-arrow.disabled {
  opacity: 0;
  pointer-events: none;
}
.slider-arrow.prev { left: 4px; }
.slider-arrow.next { right: 4px; }

/* 5. Custom Shopee/TikTok Badge Styles inside Product Cards */
.sale-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e44c0f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(228,76,15,0.3);
  text-transform: uppercase;
}
.sale-stock-bar {
  margin: 8px 0;
  position: relative;
}
.sale-stock-progress {
  width: 100%;
  height: 14px;
  background: #f3f4f6;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sale-stock-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #e44c0f;
  border-radius: 10px;
  transition: width 0.5s ease;
}
.sale-stock-text {
  position: relative;
  z-index: 1;
  font-size: 9.5px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.sale-buy-now-btn {
  background: var(--green);
  color: #fff;
  border: none;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.sale-buy-now-btn:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
}

/* ==================== HOVER ACCOUNT DROPDOWN ==================== */
.account-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 240px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 16px;
  display: none;
  z-index: 9999;
  margin-top: 8px;
  text-align: left;
}
.account-container:hover .account-dropdown,
.account-dropdown:hover {
  display: block;
}
.account-dropdown a {
  color: #475569;
  font-size: 13.5px;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
  display: block;
  transition: color 0.2s;
}
.account-dropdown a:hover {
  color: var(--green, #5f8a00);
}
.account-dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

/* ==================== MY ACCOUNT PAGE REDESIGN ==================== */
.acc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}
.acc-header h1 {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}
.acc-header-sub {
  font-size: 14px;
  color: #64748b;
  margin: 4px 0 0;
}
.acc-logout-btn {
  background: transparent;
  color: #ef4444;
  border: 1.5px solid #ef4444;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.acc-logout-btn:hover {
  background: #fef2f2;
}
.acc-logout-mobile {
  display: none !important;
}
.acc-user-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.acc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  padding: 24px;
  margin-bottom: 24px;
}
.acc-card-title {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.acc-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .acc-grid-layout {
    grid-template-columns: 1fr;
  }
}

.acc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.acc-save-btn {
  background: #1e293b;
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  transition: opacity 0.2s;
  margin-top: 20px;
}
.acc-save-btn:hover {
  opacity: 0.9;
}

/* VOUCHERS LIST */
.acc-voucher-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
}
.acc-voucher-empty {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
.acc-voucher-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7f9f4;
  border: 1px solid #e2e5dd;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
}
.acc-voucher-code {
  color: var(--green, #5f8a00);
  font-weight: 800;
  font-size: 14px;
}
.acc-voucher-limit {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* ORDERS LIST */
.acc-order-table-wrap {
  overflow-x: auto;
}
.acc-order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.acc-order-table th,
.acc-order-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.acc-order-table th {
  color: #64748b;
  font-weight: 700;
  background: #f8fafc;
}
.acc-order-status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.acc-order-status-badge.new {
  background: rgba(95,138,0,0.1);
  color: var(--green, #5f8a00);
}
.acc-order-status-badge.other {
  background: #f1f5f9;
  color: #475569;
}

/* ==================== LOADING SPINNER ANIMATION ==================== */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==================== CỘNG ĐỒNG BỐ MẸ ==================== */
.community-page { padding-bottom: 60px; }

.cm-hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 260px;
  margin-bottom: 28px;
  box-shadow: 0 12px 34px rgba(47,125,50,.16);
}
.cm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,60,22,.82) 0%, rgba(20,60,22,.45) 55%, rgba(20,60,22,.08) 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 46px; color: #fff;
}
.cm-hero-title { font-size: 34px; font-weight: 900; margin: 0 0 10px; letter-spacing: .3px; }
.cm-hero-subtitle { font-size: 15.5px; line-height: 1.6; max-width: 560px; margin: 0; opacity: .95; }

.cm-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.cm-main { min-width: 0; }

/* ----- Ô đăng bài ----- */
.cm-composer {
  background: #fff;
  border: 1px solid var(--line, #e6eae3);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 24px;
  box-shadow: 0 4px 18px rgba(20,40,20,.05);
}
.cm-composer-top { display: flex; gap: 12px; align-items: flex-start; }
.cm-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; border: 1px solid #d8e2d4; background: #f4f7f2; flex-shrink: 0;
}
.cm-avatar-sm { width: 36px; height: 36px; }
.cm-post-input {
  flex: 1; border: none; outline: none; resize: none;
  font-family: inherit; font-size: 15px; line-height: 1.55; color: #223;
  background: #f4f7f2; border-radius: 14px; padding: 12px 14px; min-height: 46px;
}
.cm-post-input:focus { background: #eef4ea; box-shadow: 0 0 0 2px rgba(47,125,50,.18); }

.cm-post-preview { position: relative; margin: 12px 0 0 58px; max-width: 320px; }
.cm-post-preview img { width: 100%; border-radius: 12px; display: block; }
.cm-preview-remove {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.cm-composer-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin: 14px 0 0 58px; gap: 12px;
}
.cm-attach-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 20px; cursor: pointer;
  background: #f0f5ec; color: var(--green, #2f7d32); font-weight: 700; font-size: 13.5px;
  border: 1px solid transparent; transition: .18s;
}
.cm-attach-btn:hover { background: #e4efdc; border-color: #cfe3c2; }
.cm-attach-btn svg { width: 18px; height: 18px; }
.cm-post-btn {
  background: var(--green, #2f7d32); color: #fff; border: none;
  padding: 10px 24px; border-radius: 22px; font-weight: 800; font-size: 14px;
  cursor: pointer; transition: .18s; white-space: nowrap;
}
.cm-post-btn:hover { background: #276b2a; transform: translateY(-1px); }
.cm-post-btn:disabled { opacity: .6; cursor: default; transform: none; }

.cm-composer.cm-admin-note, .cm-composer.cm-guest {
  display: flex; align-items: center; gap: 16px; justify-content: space-between; flex-wrap: wrap;
}
.cm-composer.cm-admin-note { border-left: 4px solid var(--green, #2f7d32); }
.cm-composer.cm-admin-note strong, .cm-composer.cm-guest strong { color: var(--green-deep, #1f5c22); font-size: 15.5px; }
.cm-composer.cm-admin-note p, .cm-composer.cm-guest p { margin: 4px 0 0; color: #55645a; font-size: 13.5px; line-height: 1.5; }
.cm-composer.cm-admin-note > div { flex: 1; min-width: 200px; }

.cm-msg { font-size: 13px; margin-top: 8px; margin-left: 58px; color: #55645a; }
.cm-msg.err { color: #d33; }
.cm-cmt-msg { margin-left: 0; }

/* ----- Bài viết ----- */
.cm-feed { display: flex; flex-direction: column; gap: 20px; }
.cm-loading, .cm-loading-sm { color: #7a8a7d; font-size: 14px; padding: 18px 4px; }
.cm-loading-sm { padding: 12px 4px; }
.cm-empty {
  position: relative; overflow: hidden;
  text-align: center; padding: 46px 20px; color: #7a8a7d;
  background: #fff; border: 1px dashed #cfe0c6; border-radius: 18px;
}
.cm-empty img {
  position: absolute; right: 0; bottom: 0;
  width: 74px; height: 74px; opacity: .85; margin: 0;
}
.cm-empty p { margin: 0; font-size: 15px; line-height: 1.6; }

.cm-post {
  background: #fff;
  border: 1px solid var(--line, #e6eae3);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 4px 18px rgba(20,40,20,.05);
}
.cm-post-head { display: flex; align-items: center; gap: 12px; }
.cm-post-meta { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.cm-post-author { font-weight: 800; color: #1e2b20; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.cm-post-time { font-size: 12.5px; color: #90a094; }
.cm-badge-admin {
  background: var(--green, #2f7d32); color: #fff; font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 10px; letter-spacing: .4px; text-transform: uppercase;
}
.cm-del-post, .cm-del-comment {
  background: none; border: none; cursor: pointer; color: #b0bcb2;
  padding: 6px; border-radius: 8px; transition: .15s; flex-shrink: 0;
}
.cm-del-post svg { width: 17px; height: 17px; display: block; }
.cm-del-post:hover, .cm-del-comment:hover { color: #d33; background: #fdeceb; }
.cm-del-comment { font-size: 18px; line-height: 1; padding: 0 6px; }

.cm-post-body { margin: 12px 0 0; font-size: 15px; line-height: 1.62; color: #2a382c; white-space: normal; word-break: break-word; }
.cm-post-img { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid #eef2ec; }
.cm-post-img img { width: 100%; display: block; max-height: 520px; object-fit: cover; }

.cm-post-stats {
  display: flex; gap: 16px; margin-top: 14px; padding-bottom: 10px;
  font-size: 12.5px; color: #90a094; min-height: 8px;
}
.cm-post-stats span:empty { display: none; }
.cm-comment-count { margin-left: auto; }

.cm-post-actions {
  display: flex; gap: 8px; border-top: 1px solid #f0f3ee; padding-top: 8px;
}
.cm-act {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 9px; border-radius: 12px;
  color: #5b6a5e; font-weight: 700; font-size: 14px; transition: .15s;
}
.cm-act:hover { background: #f2f6ee; }
.cm-act svg { width: 20px; height: 20px; }
.cm-heart { fill: none; stroke: #5b6a5e; stroke-width: 1.8px; transition: .18s; }
.cm-like-btn.liked { color: #e0245e; }
.cm-like-btn.liked .cm-heart { fill: #e0245e; stroke: #e0245e; }
.cm-comment-toggle.active { color: var(--green, #2f7d32); }

/* ----- Bình luận ----- */
.cm-comments { margin-top: 6px; border-top: 1px solid #f0f3ee; padding-top: 14px; }
.cm-comment-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.cm-comment { display: flex; gap: 10px; }
.cm-comment-main { flex: 1; min-width: 0; }
.cm-comment-bubble {
  background: #f4f7f2; border-radius: 14px; padding: 10px 14px; position: relative;
}
.cm-comment-admin .cm-comment-bubble { background: #eef6ea; border: 1px solid #d6e8cc; }
.cm-comment-head { display: flex; align-items: center; gap: 6px; }
.cm-comment-author { font-weight: 800; color: #1e2b20; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.cm-comment-head .cm-del-comment { margin-left: auto; }
.cm-comment-text { margin-top: 3px; font-size: 14px; line-height: 1.55; color: #2a382c; word-break: break-word; }
.cm-comment-time { font-size: 11.5px; color: #a0aea3; margin: 4px 0 0 14px; display: block; }

.cm-cmt-products { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cm-prod {
  display: flex; gap: 12px; align-items: center; text-decoration: none;
  background: #fff; border: 1px solid #dfead7; border-radius: 12px; padding: 8px; transition: .16s;
}
.cm-prod:hover { border-color: var(--green, #2f7d32); box-shadow: 0 4px 14px rgba(47,125,50,.14); transform: translateY(-1px); }
.cm-prod img { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #f2f4f0; }
.cm-prod-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-prod-name { font-weight: 700; color: #1e2b20; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-prod-price { font-weight: 800; color: var(--green, #2f7d32); font-size: 14px; }
.cm-prod-old { color: #a0aea3; text-decoration: line-through; font-weight: 500; font-size: 12px; margin-left: 4px; }
.cm-prod-cta { font-size: 12px; color: #e07b1a; font-weight: 700; margin-top: 1px; }

/* ----- Form bình luận ----- */
.cm-comment-form { display: flex; gap: 10px; }
.cm-comment-input-wrap { flex: 1; min-width: 0; }
.cm-comment-input {
  width: 100%; border: 1px solid #dde5d8; border-radius: 14px; padding: 10px 14px;
  font-family: inherit; font-size: 14px; line-height: 1.5; resize: none; outline: none; color: #223;
  background: #fafcf8; box-sizing: border-box;
}
.cm-comment-input:focus { border-color: var(--green, #2f7d32); background: #fff; }
.cm-comment-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.cm-send-comment {
  background: var(--green, #2f7d32); color: #fff; border: none;
  padding: 7px 20px; border-radius: 18px; font-weight: 800; font-size: 13.5px; cursor: pointer; transition: .16s;
}
.cm-send-comment:hover { background: #276b2a; }
.cm-send-comment:disabled { opacity: .6; cursor: default; }
.cm-comment-guest { justify-content: center; padding: 6px 0; }
.cm-clogin-btn {
  background: #f0f5ec; color: var(--green, #2f7d32); border: 1px solid #d6e5c9;
  padding: 9px 22px; border-radius: 20px; font-weight: 700; cursor: pointer; font-size: 13.5px;
}
.cm-clogin-btn:hover { background: #e4efdc; }

.cm-admin-tools { margin-top: 8px; }
.cm-attach-prod {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px dashed var(--green, #2f7d32); color: var(--green, #2f7d32);
  padding: 6px 14px; border-radius: 18px; font-weight: 700; font-size: 13px; cursor: pointer; transition: .15s;
}
.cm-attach-prod:hover { background: #f0f5ec; }
.cm-attach-prod svg { width: 15px; height: 15px; }
.cm-prod-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-prod-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef6ea; border: 1px solid #d6e8cc; border-radius: 16px; padding: 4px 6px 4px 4px; font-size: 12.5px; color: #1e2b20;
}
.cm-prod-chip img { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; }
.cm-prod-chip span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-prod-chip button { background: none; border: none; color: #7d8b80; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.cm-prod-chip button:hover { color: #d33; }

/* ----- Sidebar ----- */
.cm-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.cm-side-box {
  background: #fcfdfc; border: 1px solid var(--line, #e6eae3); border-radius: 20px; padding: 22px;
}
.cm-side-title { font-size: 16px; font-weight: 800; color: var(--green-deep, #1f5c22); margin: 0 0 14px; }
.cm-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-rules li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.55; color: #4a5a4d; }
.cm-rules li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%; background: #e4efdc; color: var(--green, #2f7d32);
  font-size: 11px; font-weight: 900; display: grid; place-items: center;
}
.cm-side-promo {
  position: relative; display: block; border-radius: 20px; overflow: hidden; height: 300px; text-decoration: none;
}
.cm-side-promo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-side-promo-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px; color: #fff; background: linear-gradient(to top, rgba(10,40,12,.86), rgba(10,40,12,.05) 70%);
}
.cm-side-promo-overlay h3 { margin: 0 0 6px; font-size: 19px; font-weight: 900; }
.cm-side-promo-overlay p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; opacity: .94; }
.cm-side-promo .promo-link { font-weight: 800; font-size: 13.5px; }

/* ----- Bộ chọn sản phẩm (admin) ----- */
.cm-picker-overlay {
  position: fixed; inset: 0; z-index: 4000; background: rgba(15,25,15,.55);
  display: grid; place-items: center; padding: 20px;
}
.cm-picker {
  background: #fff; border-radius: 18px; width: min(560px, 100%); max-height: 82vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.cm-picker-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eef2ec; }
.cm-picker-head h3 { margin: 0; font-size: 17px; font-weight: 800; color: #1e2b20; }
.cm-picker-close { background: none; border: none; font-size: 26px; line-height: 1; color: #90a094; cursor: pointer; }
.cm-picker-close:hover { color: #d33; }
.cm-picker-search { padding: 14px 20px; border-bottom: 1px solid #f2f4f0; }
.cm-picker-search input {
  width: 100%; border: 1px solid #dde5d8; border-radius: 12px; padding: 10px 14px;
  font-family: inherit; font-size: 14px; outline: none; box-sizing: border-box;
}
.cm-picker-search input:focus { border-color: var(--green, #2f7d32); }
.cm-picker-list { overflow-y: auto; padding: 8px 12px; flex: 1; }
.cm-picker-empty { text-align: center; color: #90a094; padding: 24px; font-size: 14px; }
.cm-picker-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; transition: .12s;
}
.cm-picker-item:hover { background: #f4f7f2; }
.cm-picker-item.on { background: #eef6ea; }
.cm-picker-item input { width: 18px; height: 18px; accent-color: var(--green, #2f7d32); flex-shrink: 0; }
.cm-picker-item img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #f2f4f0; flex-shrink: 0; }
.cm-picker-name { flex: 1; font-size: 13.5px; font-weight: 600; color: #1e2b20; line-height: 1.35; }
.cm-picker-price { font-size: 13px; font-weight: 800; color: var(--green, #2f7d32); white-space: nowrap; }
.cm-picker-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid #eef2ec; }
.cm-picker-foot span { font-size: 13px; color: #55645a; font-weight: 600; }
.cm-picker-done {
  background: var(--green, #2f7d32); color: #fff; border: none; padding: 9px 24px; border-radius: 20px; font-weight: 800; cursor: pointer;
}
.cm-picker-done:hover { background: #276b2a; }

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .cm-layout { grid-template-columns: 1fr; gap: 28px; }
  .cm-sidebar { position: static; order: 2; }
  .cm-hero { height: 200px; }
  .cm-hero-overlay { padding: 0 24px; }
  .cm-hero-title { font-size: 25px; }
  .cm-hero-subtitle { font-size: 13.5px; }
}
@media (max-width: 560px) {
  .cm-composer-actions, .cm-post-preview, .cm-msg { margin-left: 0; }
  .cm-post-btn { padding: 9px 18px; }
  .cm-attach-btn span { display: none; }
}

@media (max-width: 760px) {
  .acc-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .acc-user-info-row {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .acc-logout-desktop {
    display: none !important;
  }
  .acc-logout-mobile {
    display: block !important;
    width: 200px !important;
    align-self: center !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    border-width: 1.5px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
}
/* Fix mobile responsive header padding, sticky bar alignment and lock page width on mobile view */
@media (max-width: 768px) {
  body, html {
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .topbar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 10000 !important;
  }
  .topbar .tb-track span {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .header {
    position: sticky !important;
    top: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999 !important;
  }
  /* Menu drawer phải nằm trên topbar (10000) và header (9999) ở mobile */
  .drawer-overlay {
    z-index: 10001 !important;
  }
  .drawer {
    z-index: 10002 !important;
  }
  /* Lightbox xem ảnh sản phẩm cũng phải phủ kín topbar/header ở mobile */
  .pd-lightbox {
    z-index: 10010 !important;
  }
  .header .container {
    padding: 0 16px !important;
  }
  .collection .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .fc-section-title {
    font-size: 20px !important;
  }
  .fc-search-box {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 14px !important;
  }
  .fc-search-box input {
    height: 36px !important;
    padding: 8px 12px 8px 32px !important;
    font-size: 12.5px !important;
  }
  .fc-search-ic {
    left: 11px !important;
    width: 13px !important;
    height: 13px !important;
  }
  .fc-posts-grid {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .fc-post-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 108px !important;
    margin: 0 auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 10px !important;
    gap: 12px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }
  .fc-post-thumb {
    width: 88px !important;
    height: 88px !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    border-bottom: none !important;
  }
  .fc-post-thumb img {
    border-radius: 8px !important;
  }
  .fc-post-body {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    flex-grow: 1 !important;
    height: 88px !important;
    box-sizing: border-box !important;
  }
  .fc-post-meta {
    margin-bottom: 0 !important;
    font-size: 10px !important;
    flex-wrap: wrap !important;
    gap: 2px 6px !important;
    justify-content: flex-start !important;
  }
  .fc-post-author {
    margin-left: auto !important;
  }
  .fc-post-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .fc-post-summary {
    display: none !important;
  }
  .fc-post-more {
    font-size: 11px !important;
    margin-top: 0 !important;
  }
  .fc-pagination {
    gap: 6px !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
  }
  .fc-page-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  .fc-page-ellipsis {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
  .fc-side-promo {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
  /* Breadcrumbs mobile optimization */
  .col-breadcrumb,
  .breadcrumb .container {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    /* đáy 4px (trước là 12px): kéo ảnh sản phẩm lên sát dòng đường dẫn */
    padding: 8px 16px 4px !important;
    gap: 3px !important;
  }
  .col-breadcrumb a[href="/"],
  .breadcrumb .container a[href="/"] {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .col-breadcrumb .bc-home,
  .breadcrumb .container .bc-home svg {
    transform: translateY(-2px) !important;
  }
  .breadcrumb .container a[href="/"] span {
    display: none !important;
  }
  .col-breadcrumb a,
  .col-breadcrumb .sep,
  #bvBreadcrumbType,
  .breadcrumb .container a,
  .breadcrumb .container .sep {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  #bvBreadcrumbTitle,
  .breadcrumb .container .cur {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-shrink: 1 !important;
    display: inline-block !important;
  }
}

/* Gutenberg FAQ (details / summary) styling */
details.gutenberg-faq {
  background: #f7f9f4;
  border: 1px solid var(--line, #e2e5dd);
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 16px 20px;
  transition: all 0.3s ease;
}

details.gutenberg-faq[open] {
  background: #ffffff;
  border-color: var(--green);
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

details.gutenberg-faq summary {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

details.gutenberg-faq summary::-webkit-details-marker {
  display: none;
}

details.gutenberg-faq summary::after {
  content: "▼";
  font-size: 11px;
  color: var(--green);
  transition: transform 0.2s ease;
}

details.gutenberg-faq[open] summary::after {
  transform: rotate(180deg);
}

.gutenberg-faq-content {
  margin-top: 14px;
  border-top: 1px dashed var(--line, #e2e5dd);
  padding-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4b5563;
}

/* Gutenberg Box (Tip / Warning / Info) */
.gutenberg-box {
  background: #e6f9a8; /* Fresh light green background matching the photos */
  border-radius: 12px;
  padding: 20px 24px;
  margin: 24px 0;
  border: 1px solid rgba(160, 220, 100, 0.25);
  box-shadow: 0 4px 15px rgba(160, 220, 100, 0.06);
}

.gutenberg-box-title {
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2c4d15;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gutenberg-box p,
.gutenberg-box .wp-block-paragraph {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #1e350b;
}

/* ============================================================
   MOBILE: hiệu ứng phản hồi khi CHẠM nút (thay lớp phủ đen đã tắt)
   Chỉ áp dụng cho điện thoại (<=760px). PC không đổi.
   ============================================================ */
@media (max-width: 760px) {
  /* Nút biểu tượng tròn: menu, tìm kiếm, tài khoản, giỏ hàng... */
  .icon-btn { transition: background .18s ease, color .18s ease, transform .12s ease; }
  .icon-btn:active {
    background: var(--green-soft);
    color: var(--green);
    transform: scale(0.85);
    opacity: 1;
  }
  /* Nút bấm chung / CTA / swatch / mũi tên slider / nút chat... */
  button, .btn-primary, [role="button"], .d-tab, .d-acc-head,
  .slider-arrow, .pd-swatch, .swatch, .swatch-more, .xb-fab,
  .map-btn, .d-hero-btn, .search-clear-btn, .search-close-btn,
  .sale-section-more, .bc-home, .prod-card {
    -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, opacity .12s ease;
  }
  button:active, .btn-primary:active, [role="button"]:active,
  .d-tab:active, .d-acc-head:active, .slider-arrow:active,
  .pd-swatch:active, .swatch:active, .swatch-more:active, .xb-fab:active,
  .map-btn:active, .d-hero-btn:active, .search-clear-btn:active,
  .search-close-btn:active, .sale-section-more:active, .prod-card:active {
    transform: scale(0.92);
    opacity: 0.7;
  }
}

/* =========================================================
   iOS: ngăn tự động phóng to (zoom) khi focus vào ô nhập liệu.
   iOS Safari/WebKit tự zoom khi input có font-size < 16px, làm
   vỡ giao diện cố định ở trang thanh toán. @supports (-webkit-
   touch-callout) chỉ đúng trên iOS/iPadOS nên KHÔNG ảnh hưởng
   giao diện desktop, và áp dụng cho mọi trình duyệt trên iOS
   (Safari, Chrome, trình duyệt trong app...) vì tất cả đều
   dùng WebKit. Vẫn giữ được thao tác pinch-to-zoom của người dùng.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* =========================================================
   STORIES — "tin nổi bật" kiểu Instagram ở ngay dưới banner
   Vòng tròn ảnh/video ở trang chủ, bấm vào mở trình xem
   toàn màn hình có thanh tiến trình + thẻ sản phẩm gắn kèm.
   ========================================================= */
.stories { padding: 26px 0 0; background: #fff; }
/* Khi có khối tin nổi bật ngay trên, kéo khối FootFit lại gần cho liền mạch */
.stories + .footlab { padding-top: 26px; }
.stories .container { max-width: var(--maxw); }
.stories-title {
  font-size: 20px; font-weight: 800; color: var(--green-deep);
  text-align: center; margin-bottom: 16px;
}
.stories-rail {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 22px; flex-wrap: wrap;
}
.story-dot {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--font);
}
/* Tin CHƯA xem: viền gradient xanh lá chủ đạo của web, dày & rõ */
.story-ring {
  --ring: 78px;                      /* 1 biến duy nhất -> luôn vuông, không cần aspect-ratio */
  width: var(--ring); height: var(--ring);
  flex: 0 0 var(--ring);
  border-radius: 50%; padding: 2px;
  box-sizing: border-box;
  /* linear-gradient thay cho conic-gradient: Safari trên iPhone vẽ conic-gradient
     theo ô vuông rồi mới bo tròn nên viền bị vát thành hình thoi. */
  background-image: linear-gradient(135deg,
    var(--green-lime2) 0%, var(--green-lime) 35%, var(--green) 70%, var(--green-deep) 100%);
  transition: transform .25s ease, background-image .3s ease;
}
.story-ring-in {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; background: var(--green-soft);
  display: block; box-sizing: border-box;
  -webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%); /* iOS: cắt ảnh theo đúng hình tròn */
}
.story-ring-in img, .story-ring-in video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.story-dot:hover .story-ring { transform: translateY(-3px) scale(1.05); }
/* Tin ĐÃ xem: viền xám nhạt, bỏ gradient */
.story-dot.seen .story-ring { background-image: none; background-color: #d8e2d4; }
.story-name {
  font-size: 12.5px; color: var(--ink); font-weight: 600; line-height: 1.25;
  text-align: center; max-width: 86px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Trình xem toàn màn hình ---------- */
.story-viewer {
  position: fixed; inset: 0; z-index: 100000;   /* trên cả header (9999) và các lớp phủ khác */
  background: rgba(16, 32, 18, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
}
.story-viewer.open { opacity: 1; visibility: visible; }
.sv-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px; overflow: hidden;
}
.sv-card {
  position: absolute; height: min(86vh, 820px); aspect-ratio: 9 / 16;
  border-radius: 20px; overflow: hidden; background: #000;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.22, .8, .28, 1), opacity .45s ease, filter .45s ease;
  will-change: transform, opacity; cursor: pointer;
}
.sv-card.active { cursor: default; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.sv-card:not(.active) { filter: brightness(.45) saturate(.85); }
/* Khung luôn cố định 9:16 — ảnh/video tỷ lệ khác sẽ vừa khít chiều rộng
   hoặc chiều cao, phần dư để nền đen (không cắt mất nội dung). */
.sv-media { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }

/* thanh tiến trình */
.sv-bars {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4;
  display: flex; gap: 4px;
}
.sv-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.sv-bar i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.sv-head {
  position: absolute; top: 24px; left: 14px; right: 14px; z-index: 4;
  display: flex; align-items: center; gap: 10px; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5); pointer-events: none;
}
.sv-head .sv-ava {
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, .85); background: var(--green-soft);
}
/* Khối chữ 2 dòng căn giữa theo chiều cao ảnh đại diện */
/* Tên thương hiệu + số thứ tự xếp sát nhau, cả cụm căn giữa theo ảnh đại diện */
.sv-head .sv-meta { display: flex; flex-direction: column; justify-content: center; gap: 0; }
.sv-head .sv-brand { font-size: 13.5px; font-weight: 700; line-height: 1.08; }
.sv-head .sv-count { font-size: 11.5px; opacity: .8; line-height: 1.08; }
/* lớp phủ mờ trên/dưới cho dễ đọc chữ */
.sv-card.active::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 34%);
}

/* thẻ sản phẩm gắn kèm */
.sv-tags {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px;
}
.sv-tag {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  background: rgba(255, 255, 255, .68); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px; padding: 6px 12px 6px 6px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transform: translateY(10px); opacity: 0;
  animation: svTagIn .45s cubic-bezier(.22, .8, .28, 1) forwards;
  transition: background .2s ease, transform .2s ease;
}
.sv-tag:hover { background: rgba(255, 255, 255, .88); transform: translateY(0) scale(1.02); }
@keyframes svTagIn { to { transform: translateY(0); opacity: 1; } }
.sv-tag-ic {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px; overflow: hidden;
  background: var(--green-soft); display: flex; align-items: center; justify-content: center;
}
.sv-tag-ic img { width: 100%; height: 100%; object-fit: cover; }
.sv-tag-ic svg { width: 20px; height: 20px; stroke: var(--green); fill: none; stroke-width: 1.8; }
.sv-tag-txt { flex: 1; min-width: 0; }
.sv-tag-name {
  font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-tag-price { font-size: 12.5px; color: var(--green); font-weight: 700; margin-top: 1px; }
.sv-tag-go { flex: 0 0 auto; color: var(--green); display: flex; }
.sv-tag-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* caption + nút điều hướng */
.sv-cap {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4;
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.sv-tags + .sv-cap { display: none; }
.sv-close, .sv-nav {
  position: absolute; z-index: 10; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sv-close:hover, .sv-nav:hover { background: rgba(255, 255, 255, .3); transform: scale(1.08); }
.sv-close { top: 22px; right: 24px; width: 42px; height: 42px; }
.sv-nav { top: 50%; margin-top: -22px; width: 44px; height: 44px; }
.sv-nav.prev { left: 24px; }
.sv-nav.next { right: 24px; }
.sv-close svg, .sv-nav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Nút loa riêng của từng video, nằm TRONG khung, cùng hàng với ảnh đại diện */
.sv-vol {
  flex: 0 0 auto; margin-left: auto;   /* đẩy sang góc phải, cùng hàng với ảnh đại diện */
  width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  color: #fff; background: rgba(0, 0, 0, .38); pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.sv-vol:hover { background: rgba(0, 0, 0, .6); transform: scale(1.08); }
.sv-vol svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-card:not(.active) .sv-vol { pointer-events: none; }

@media (max-width: 860px) {
  /* ĐIỆN THOẠI: thanh tin ghim ngay dưới header, nằm đè lên ảnh bìa.
     Vị trí top do JS tính theo đáy header (vì thanh khuyến mãi cuộn mất).
     Một hàng vừa đúng 5,5 ô để lộ ô thứ 6 -> khách biết còn kéo được. */
  .stories {
    position: fixed; left: 0; right: 0; top: 96px; z-index: 90;
    padding: 8px 0 7px;
    /* nền mờ trong suốt giống thanh header */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: transform .4s cubic-bezier(.22, .8, .28, 1), opacity .3s ease, visibility .3s;
  }
  .stories .container { padding: 0 12px; }
  .stories-title { display: none; }
  .stories + .footlab { padding-top: 34px; }
  /* Cuộn tới tiêu đề FootFit thì thanh trượt lên và mờ dần rồi biến mất */
  .stories.stories--hidden {
    transform: translateY(-118%); opacity: 0; visibility: hidden; pointer-events: none;
  }
  .stories-rail {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 10px; padding: 0; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .stories-rail::-webkit-scrollbar { display: none; }
  .story-dot { flex: 0 0 calc((100vw - 24px - 50px) / 5.5); }
  .story-ring { --ring: calc((100vw - 24px - 50px) / 5.5); padding: 2px; }
  .story-name { font-size: 11.5px; max-width: 72px; }
  .sv-card { height: calc(100vh - 180px); max-height: 640px; width: auto; max-width: 92vw; }
  .sv-close { top: 14px; right: 14px; width: 38px; height: 38px; }
  .sv-nav { display: none; }
}

/* Khi đang xem tin nổi bật: ẩn bong bóng chat AI để không che nội dung */
body.story-open .xb-fab,
body.story-open .xb-panel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* ============ LANGUAGE SWITCHER (PC & MOBILE) ============ */
.topbar {
  overflow: visible !important;
}

.topbar-lang {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
}

.topbar-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  border: none !important;
  color: #ffffff;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s ease;
  font-family: inherit;
  line-height: 1;
}

.topbar-lang-btn:hover {
  opacity: 0.85;
}

.topbar-lang-btn svg {
  width: 9px;
  height: 9px;
  transition: transform 0.2s ease;
}

.topbar-lang.open .topbar-lang-btn svg {
  transform: rotate(180deg);
}

.topbar-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  min-width: 140px;
  z-index: 1000;
}

.topbar-lang.open .topbar-lang-dropdown {
  display: flex;
  animation: topbarLangFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes topbarLangFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.topbar-lang-opt,
.d-lang-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1f2937);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  font-family: inherit;
}

.topbar-lang-opt:hover,
.d-lang-opt:hover {
  background: #f4faee;
  color: var(--green, #1e6e38);
}

.topbar-lang-opt.active,
.d-lang-opt.active {
  background: #eaf6e9;
  color: var(--green, #1e6e38);
  font-weight: 700;
}

.topbar-lang-opt .flag-icon,
.d-lang-opt .flag-icon {
  font-size: 15px;
  line-height: 1;
}

.flag-icon-flat {
  width: 20px !important;
  height: 13px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.4) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  object-fit: cover !important;
}

/* Mobile Drawer Language Selector */
.d-lang-wrapper {
  position: relative;
  display: inline-block;
}

.d-lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  min-width: 135px;
  z-index: 1000;
}

.d-lang-wrapper.open .d-lang-dropdown {
  display: flex;
  animation: topbarLangFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .topbar-lang {
    display: none !important;
  }
}

/* Hide Default & Modern Google Translate UI Artifacts & Spinner */
#google_translate_element {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
iframe[id*=":1.container"],
iframe[id*=":2.container"],
iframe[src*="translate.googleapis.com"],
iframe[src*="translate.google.com"],
.goog-te-spinner-pos,
.goog-te-spinner,
.goog-te-spinner-animation,
[class*="goog-te-spinner"],
[class*="VIpgJd-yDnbFd"],
div[id*="goog-gt-"],
.VIpgJd-yDnbFd-aJuUfe-ibnAVc,
.VIpgJd-yDnbFd-aJuUfe,
.VIpgJd-yDnbFd-OvfBl-pnT9fe,
.VIpgJd-yDnbFd-Lg2fx-iTx2fe,
.VIpgJd-yDnbFd-v1fa2e,
.VIpgJd-yDnbFd-Smw21e-lh9fP,
.VIpgJd-yDnbFd-X5u20-lh9fP,
.skiptranslate:not(.topbar-lang):not(.topbar-lang *):not(.d-lang-wrapper):not(.d-lang-wrapper *) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  border: none !important;
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  pointer-events: none !important;
}

/* Chặn Google Translate đẩy trang xuống. Phải loại trừ body.xixa-locked:
   lúc popup mở, scroll-lock.js đặt body { position:fixed; top:-Ypx } — nếu để
   'position: static !important' ở đây thì khoá cuộn bị vô hiệu và nền vẫn cuộn được. */
body, html {
  margin-top: 0px !important;
}
html, body:not(.xixa-locked) {
  top: 0px !important;
  position: static !important;
}

/* Khoá nền khi popup mở — đặt trong CSS để không popup nào bị sót và không bị
   quy tắc !important nào khác đè mất. */
body.xixa-locked {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Trước đây header/topbar dính có z-index 9999/10000 nên nổi lên trên lớp phủ,
   phải hạ xuống z-index 1 lúc popup mở. Nay topbar = 101, header = 100, mà lớp
   phủ thấp nhất là drawer (200) -> không cần hạ nữa.
   KHÔNG hạ z-index của topbar/header ở đây: hạ xuống 1 thì mọi thứ trong thẻ sản
   phẩm có z-index >= 2 (.prod-gift, .prod-badge-icon, .prod-tag, .qa-btn...) sẽ
   đè lên thanh topbar/header khi popup thêm nhanh vào giỏ đang mở. */
body.xixa-locked .xb-fab {
  opacity: 0 !important;
  pointer-events: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
  display: none !important;
  visibility: hidden !important;
}


.goog-te-spinner-pos {
  display: none !important;
}

font {
  background-color: transparent !important;
  box-shadow: none !important;
}



/* =========================================================================
   LIÊN KẾT ĐƯỢC CHÈN TỪ TRÌNH SOẠN THẢO TRONG TRANG QUẢN TRỊ
   Mặc định toàn site đặt `a { color: inherit }`, nên phần nội dung do biên
   tập viên chèn cần tự khai báo màu xanh lá của thương hiệu.
   ========================================================================= */
.bv-html-content a,
.col-seo-body a,
.privacy-content a,
a.fp-link {
  color: var(--green-deep, #006600);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease, opacity .15s ease;
}
.bv-html-content a:hover,
.col-seo-body a:hover,
.privacy-content a:hover,
a.fp-link:hover {
  color: var(--green, #2f7d32);
  opacity: .85;
}
/* Không tô màu lại các khối sản phẩm nhúng (đã có giao diện riêng) */
.bv-html-content a.embedded-product-placeholder,
.bv-html-content .embedded-product-placeholder a { text-decoration: none; }

/* Ảnh đại diện bài viết trên các trang ở chân trang (chính sách, câu chuyện…) */
.fp-page-thumb {
  display: block; width: 100%; max-width: 900px; height: auto;
  margin: 0 auto 28px; border-radius: 18px; object-fit: cover;
}
.fp-page-thumb[hidden] { display: none; }
.privacy-container .fp-page-thumb { margin: 8px auto 28px; }
@media (max-width: 760px) {
  .fp-page-thumb { border-radius: 12px; margin-bottom: 20px; }
}

/* =========================================================================
   ẢNH / VIDEO CHÈN TỪ HỘP THOẠI "CHÈN TẬP TIN" (giống WordPress)
   Chú thích là dòng chữ nghiêng, canh giữa ngay dưới ảnh.
   ========================================================================= */
.wp-caption { max-width: 100%; margin: 18px auto; }
.wp-caption img,
.wp-caption video { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.wp-caption-text {
  margin-top: 8px;
  font-size: 14px; font-style: italic; line-height: 1.5;
  color: #6b7280; text-align: center;
}
.aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.alignleft { float: left; margin: 6px 20px 14px 0; }
.alignright { float: right; margin: 6px 0 14px 20px; }
.alignnone { margin-left: 0; margin-right: 0; }
/* Không để ảnh nổi (alignleft/alignright) làm vỡ bố cục phần sau.
   Bỏ qua .col-seo-body vì ::after của nó đang dùng cho hiệu ứng mờ dần. */
.bv-html-content::after,
.privacy-content::after { content: ""; display: table; clear: both; }
.col-seo-body { overflow: hidden; }
@media (max-width: 640px) {
  .alignleft, .alignright { float: none; margin: 14px auto; }
  .wp-caption { width: auto !important; }
}

/* =====================================================================
   TRANG GÓC GIA ĐÌNH — bố cục mới
   Khung rộng tối đa 3100px (3180 − 2×40px lề), giống lưới sản phẩm trang chủ.
   Đặt ở cuối tệp để đè các quy tắc .fc-* cũ phía trên.
   ===================================================================== */
.family-corner { padding: 0 0 64px; }
.fc-wrap {
  width: 100%;
  max-width: 3180px;
  margin: 0 auto;
  padding: 0 40px;
}
.fc-h2 {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink, #2c3a2d);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.2;
}

/* ---------- Bài viết nổi bật: tiêu đề + ô tìm bài ---------- */
.fc-featured { padding-top: 30px; }
.fc-featured-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.fc-featured-head .fc-h2 { margin: 0; }
.fc-featured-head .fc-search-box { width: 260px; flex: none; }

/* ---------- Hai băng bài viết chạy ngược chiều nhau ---------- */
.fc-marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;          /* băng tràn ra ngoài lề trang là cố ý */
}
.fc-mq-row { overflow: hidden; }
.fc-mq-track {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
/* Danh sách được nhân đôi trong JS nên chạy đúng 50% là khớp vòng lặp */
.fc-mq-left  .fc-mq-track { animation: fc-mq-left  var(--fc-mq-dur, 70s) linear infinite; }
.fc-mq-right .fc-mq-track { animation: fc-mq-right var(--fc-mq-dur, 70s) linear infinite; }
@keyframes fc-mq-left  { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes fc-mq-right { from { transform: translateX(-50%);  } to { transform: translateX(0);    } }
.fc-marquee:hover .fc-mq-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .fc-mq-track { animation: none !important; }
  .fc-mq-row { overflow-x: auto; }
}

.fc-mq-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 20vw, 560px);
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2ee;
  display: block;
  color: #fff;
  text-decoration: none;
}
.fc-mq-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.fc-mq-card:hover img { transform: scale(1.05); }
.fc-mq-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 13px;
  background: linear-gradient(to top, rgba(0, 0, 0, .84), rgba(0, 0, 0, .45) 58%, transparent);
}
.fc-mq-title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fc-mq-desc {
  font-size: 11.5px;
  line-height: 1.4;
  margin: 0;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Kiến thức sức khoẻ ---------- */
.fc-knowledge { padding-top: 56px; }
.fc-knowledge .fc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 23%, 560px);
  gap: 40px;
  align-items: start;
}
.fc-main-col { min-width: 0; }

/* Chip bộ lọc (Tất cả / Bàn chân bẹt / Nuôi dạy con ...) */
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}
.fc-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: #3a4a39;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.fc-chip:hover { border-color: var(--green); color: var(--green); }
.fc-chip.active { background: var(--green); border-color: var(--green); color: #fff; }

/* Lưới 12 bài: 3 cột, thẻ không viền cho nhẹ nhìn */
.fc-knowledge .fc-posts-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 26px;
}
.fc-knowledge .fc-post-card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.fc-knowledge .fc-post-card:hover { transform: translateY(-3px); box-shadow: none; }
.fc-knowledge .fc-post-thumb {
  aspect-ratio: 16 / 10;
  border: none;
  border-radius: 10px;
  background: #123f14;
}
.fc-knowledge .fc-post-body { padding: 12px 0 0; }
.fc-knowledge .fc-post-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fc-knowledge .fc-post-meta { margin-bottom: 8px; font-size: 11.5px; }
.fc-knowledge .fc-post-summary {
  font-size: 12.5px;
  margin-bottom: 0;
  -webkit-line-clamp: 2;
}
.fc-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Nút xem thêm + dòng đếm */
.fc-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 38px;
}
.fc-more-btn {
  background: #16241a;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 32px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .18s, transform .12s;
}
.fc-more-btn:hover { background: var(--green-deep); }
.fc-more-btn:active { transform: translateY(1px); }
.fc-more-count { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Hộp "Bố mẹ thường hỏi" */
.fc-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.fc-side-head .fc-side-title { margin-bottom: 0; }
.fc-side-bubble {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
}

/* ---------- Giày chân bẹt (thẻ 3:4 giống trang chủ) ---------- */
.fc-products { padding-top: 56px; }
.fc-products .prod-grid { margin-top: 4px; }

/* Khung nội dung co giãn theo màn hình đúng như trang chủ:
   3100 / 3840 = 80.7292vw (tối đa 3100px ở 4K), gap lưới 40 / 3840 = 1.0417vw.
   Chỉ áp dụng cho desktop (>=1081px); tablet/mobile giữ padding 24/16px như cũ. */
@media (min-width: 1081px) {
  .fc-wrap {
    width: 80.7292vw;
    max-width: 3100px;
    padding-left: 0;
    padding-right: 0;
  }
  .fc-products .prod-grid { gap: clamp(16px, 1.0417vw, 40px); }
}

/* ---------- Máy tính bảng ---------- */
@media (max-width: 1080px) {
  .fc-wrap { padding: 0 24px; }
  .fc-knowledge .fc-layout { grid-template-columns: 1fr; gap: 32px; }
  .fc-knowledge .fc-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .fc-mq-card { width: clamp(220px, 30vw, 340px); }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 640px) {
  .family-corner { padding-bottom: 44px; }
  .fc-wrap { padding: 0 16px; }
  .fc-featured { padding-top: 20px; }
  .fc-knowledge, .fc-products { padding-top: 40px; }
  .fc-h2 { font-size: 19px; }
  .fc-featured-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .fc-featured-head .fc-search-box { width: 100%; }
  .fc-marquee { gap: 12px; }
  .fc-mq-track { gap: 12px; }
  .fc-mq-card { width: 62vw; border-radius: 12px; }
  .fc-mq-title { font-size: 12.5px; }
  .fc-mq-desc { display: none; }
  .fc-chips { gap: 8px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .fc-chips::-webkit-scrollbar { display: none; }
  .fc-chip { flex: none; padding: 7px 15px; font-size: 12.5px; }
  .fc-knowledge .fc-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .fc-knowledge .fc-post-title { font-size: 13.5px; }
  .fc-knowledge .fc-post-summary { font-size: 11.5px; }
  .fc-side-bubble { width: 32px; height: 32px; font-size: 14px; }
  .fc-more-btn { padding: 12px 26px; font-size: 12px; }
}

/* ---------- Bố mẹ thường hỏi: số thứ tự to, không viền tròn ---------- */
.fc-side-bubble {
  border: none;
  background: none;
  width: 46px;
  height: 44px;
  color: var(--green);
}
.fc-side-bubble svg { width: 100%; height: 100%; display: block; }

.fc-knowledge .fc-faq-num {
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 30px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: #c3ccc4;                    /* xám khi đóng */
  transition: color .2s ease;
}
/* Bấm mở câu hỏi nào thì số của câu đó mới chuyển sang xanh */
.fc-knowledge .fc-faq-item.open .fc-faq-num { color: var(--green); }
.fc-knowledge .fc-faq-trigger {
  align-items: flex-start;
  gap: 14px;
  padding: 10px 0;
  font-size: 13.5px;
}
.fc-knowledge .fc-faq-q { text-align: left; padding-top: 2px; }
.fc-knowledge .fc-faq-arrow { margin-top: 1px; }

@media (max-width: 640px) {
  .fc-side-bubble { width: 38px; height: 36px; }
  .fc-knowledge .fc-faq-num { font-size: 17px; min-width: 26px; }
}

/* ---------- Sửa đè các quy tắc !important cũ + chỉnh cỡ chữ khu hỏi đáp ---------- */
/* Quy tắc cũ @media (max-width:768px) ép .fc-posts-grid về 1 cột bằng !important,
   trang mới cần 2 cột trên điện thoại nên phải đè lại cũng bằng !important. */
@media (max-width: 768px) {
  .fc-knowledge .fc-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* Khu "Bố mẹ thường hỏi": chữ to hơn, nút Đọc tiếp canh giữa */
.fc-knowledge .fc-side-title { font-size: 19px; }
.fc-knowledge .fc-faq-trigger { font-size: 15px; }
.fc-knowledge .fc-faq-num { font-size: 20px; }
.fc-knowledge .fc-faq-inner p { font-size: 14.5px !important; line-height: 1.65 !important; }
.fc-knowledge .fc-faq-more-btn-wrap {
  display: flex;
  justify-content: center;
}
.fc-knowledge .fc-faq-more-btn { font-size: 14px; }

@media (max-width: 640px) {
  .fc-knowledge .fc-side-title { font-size: 17px; }
  .fc-knowledge .fc-faq-trigger { font-size: 14px; }
  .fc-knowledge .fc-faq-num { font-size: 18px; }
  .fc-knowledge .fc-faq-inner p { font-size: 13.5px !important; }
  .fc-knowledge .fc-faq-more-btn { font-size: 13px; }
}

/* Bỏ vạch xanh bên trái tiêu đề "Bố mẹ thường hỏi" */
.fc-knowledge .fc-side-title {
  border-left: none;
  padding-left: 0;
}

/* Khu "Bố mẹ thường hỏi": tăng cỡ chữ thêm một bậc nữa */
.fc-knowledge .fc-side-title { font-size: 22px; }
.fc-knowledge .fc-faq-trigger { font-size: 17px; }
.fc-knowledge .fc-faq-num { font-size: 23px; min-width: 34px; }
.fc-knowledge .fc-faq-inner p { font-size: 16px !important; line-height: 1.7 !important; }
.fc-knowledge .fc-faq-more-btn { font-size: 15px; padding: 9px 20px; }
.fc-knowledge .fc-faq-arrow { width: 32px; height: 32px; }
.fc-knowledge .fc-faq-arrow svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .fc-knowledge .fc-side-title { font-size: 19px; }
  .fc-knowledge .fc-faq-trigger { font-size: 15.5px; }
  .fc-knowledge .fc-faq-num { font-size: 20px; min-width: 29px; }
  .fc-knowledge .fc-faq-inner p { font-size: 14.5px !important; }
  .fc-knowledge .fc-faq-more-btn { font-size: 14px; }
}

/* Điện thoại: mỗi hàng CHỈ 1 bài viết ở khu Kiến thức sức khoẻ (chỉ áp dụng ≤768px) */
@media (max-width: 768px) {
  .fc-knowledge .fc-posts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Nút "Xem thêm" của khu Bố mẹ thường hỏi (nhỏ hơn nút của khu bài viết) */
.fc-faq-more-wrap { margin-top: 22px; }
.fc-more-btn--sm {
  padding: 10px 24px;
  font-size: 12px;
}
.fc-faq-more-wrap .fc-more-count { font-size: 12px; }

/* Số 01 02 03… cao bằng 2 hàng chữ câu hỏi */
.fc-knowledge .fc-faq-num {
  font-size: 40px;
  line-height: 1;
  min-width: 58px;
  letter-spacing: -0.02em;
}
@media (max-width: 640px) {
  .fc-knowledge .fc-faq-num { font-size: 33px; min-width: 48px; }
  .fc-more-btn--sm { padding: 9px 20px; font-size: 11.5px; }
}

/* Số 01 02 03… cao đúng bằng 2 hàng chữ câu hỏi (17px × 1.4 × 2 ≈ 48px) */
.fc-knowledge .fc-faq-num { font-size: 46px; min-width: 64px; }
@media (max-width: 640px) {
  .fc-knowledge .fc-faq-num { font-size: 38px; min-width: 54px; }
}

/* =========================================================================
   GÓC GIA ĐÌNH — ĐIỆN THOẠI: thẻ bài viết dạng dọc (ảnh trên, chữ dưới)
   Đè các quy tắc !important cũ ép thẻ nằm ngang cao 108px.
   ========================================================================= */
@media (max-width: 768px) {
  .fc-knowledge .fc-post-card {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .fc-knowledge .fc-post-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    border-bottom: none !important;
  }
  .fc-knowledge .fc-post-thumb img {
    border-radius: 12px !important;
  }
  .fc-knowledge .fc-post-body {
    height: auto !important;
    padding: 12px 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .fc-knowledge .fc-post-title {
    order: 1;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    -webkit-line-clamp: 2 !important;
  }
  .fc-knowledge .fc-post-meta {
    order: 2;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    font-size: 12px !important;
  }
  .fc-knowledge .fc-post-summary {
    order: 3;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #6b7280;
  }
  .fc-knowledge .fc-posts-grid {
    gap: 26px !important;
  }
}

/* Khu Kiến thức sức khoẻ: tên bài viết chỉ 1 dòng, dài hơn thì cắt bằng "…" */
.fc-knowledge .fc-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* =========================================================================
   CHI TIẾT BÀI VIẾT — GIAO DIỆN MỚI (theo bản thiết kế khổ 2520px)
   ========================================================================= */

/* ---------- Mục lục: bỏ viền, nền nổi khối rõ hơn phần bài viết ---------- */
.bv-toc-card {
  border: none;
  border-radius: 18px;
  background: #f4f7f1;
  padding: 22px 24px;
  box-shadow: none;
}
.bv-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 14px;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--green-deep);
}
.bv-toc-head::before {
  content: '';
  flex: none;
  width: 4px;
  height: 18px;
  border-radius: 100px;
  background: var(--green);
}
.bv-toc-list {
  gap: 12px;
}
.bv-toc-list li a {
  display: flex;
  gap: 7px;
  align-items: baseline;
}
.bv-toc-num {
  flex: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--green);
}
.bv-toc-list li.toc-h3 .bv-toc-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

/* Banner quảng cáo dưới mục lục */
.bv-side-promo {
  margin-top: 20px;
}

/* ---------- Khối sản phẩm nhúng: mỗi hàng 2 sản phẩm ---------- */
.ebp-group {
  position: relative;
  margin: 24px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(31, 36, 33, 0.03);
  /* KHÔNG cắt tràn: menu chọn size cần đổ ra ngoài khung */
  overflow: visible;
}
.ebp-group-head {
  display: block;
  margin: -22px -22px 20px;
  padding: 12px 22px;
  background: linear-gradient(90deg, #f4511e 0%, #ff8a3d 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  width: fit-content;
  border-radius: 18px 0 16px 0;
}
.ebp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.ebp-grid > .embedded-product-placeholder {
  margin: 0;
  min-width: 0;
}
/* Khối chỉ có 1 sản phẩm: canh giữa, không để trống nửa hàng */
.ebp-group.is-single .ebp-grid {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}

.ebp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
/* Thẻ đang mở danh sách size phải nằm trên thẻ bên cạnh */
.ebp-card:has(.pd-size.open) {
  z-index: 40;
}
.ebp-card .pd-size-menu {
  max-height: 244px;
}
.ebp-card .pd-size-opt {
  padding: 10px 12px;
}
.ebp-card .pd-size-lbl {
  font-size: 14px;
}
.ebp-thumb {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}
.ebp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
/* Rê chuột đổi sang ảnh phụ — giống thẻ sản phẩm ngoài shop */
.ebp-thumb .ebp-img-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  pointer-events: none;
}
.ebp-thumb:hover .ebp-img-hover {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.ebp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Huy hiệu công nghệ (góc trái trên) và ảnh quà tặng (góc trái dưới) */
.ebp-badge-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: clamp(30px, 17%, 140px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
}
.ebp-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.ebp-gift {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: clamp(84px, 45%, 340px);
  pointer-events: none;
}
.ebp-gift img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Dải chọn màu — dựng đúng như .swatches của thẻ sản phẩm ngoài shop */
/* Hàng ngoài: dải ô màu + nút "+N". Chỉ thẻ có QUÁ 4 màu mới chừa chỗ cho nút
   +N; thẻ 4 màu trở xuống giữ nguyên như cũ (ô màu trải hết bề ngang thẻ). */
.ebp-colors {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.ebp-color-list {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ebp-color-list::-webkit-scrollbar {
  display: none;
}
.ebp-colors.co-them .ebp-color-list {
  flex: 0 0 calc(100% - 48px);
  max-width: calc(100% - 48px);
}
/* Chưa mở rộng: chỉ hiện 4 viên đầu, không cho cuộn ngang */
.ebp-colors:not(.mo-rong) .ebp-color-list { overflow-x: hidden; }
.ebp-colors.co-them:not(.mo-rong) .ebp-color:nth-child(n + 5) { display: none; }

/* Nút "+N ›" — kiểu viên thuốc trắng viền mảnh, giống thẻ sản phẩm ngoài shop */
.ebp-color-more {
  flex: 0 0 44px;
  height: auto;
  aspect-ratio: 1.1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2px 8px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ebp-color-more::after { content: ' ›'; }
.ebp-color-more:hover { color: var(--green); border-color: var(--green); }
.ebp-colors.mo-rong .ebp-color-more { display: none; }

/* Nút "‹" quay lại các màu phía trước — chỉ hiện sau khi đã mở rộng */
.ebp-color-back {
  display: none;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--green);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
  transition: background .15s, border-color .15s;
}
.ebp-color-back:hover { background: var(--green-soft); border-color: var(--green); }
.ebp-colors.mo-rong .ebp-color-back { display: inline-flex; }
/* Mở rộng: dải màu trượt ngang, nút +N đã ẩn nên chỉ trừ chỗ nút ‹ */
.ebp-colors.mo-rong .ebp-color-list {
  flex: 0 0 calc(100% - 36px);
  max-width: calc(100% - 36px);
  overflow-x: auto;
  scroll-behavior: smooth;
}
.ebp-colors.mo-rong .ebp-color { flex-basis: 20%; }
.ebp-color {
  position: relative;
  flex: 0 0 25%;
  width: auto;
  height: auto;
  aspect-ratio: 1.1 / 1;
  padding: 0;
  border: none;
  background: #f4f4f4;
  cursor: pointer;
  box-sizing: border-box;
}
.ebp-color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.ebp-color::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 2;
  background: var(--green);
  transform: scaleX(0);
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ebp-color:hover::after {
  transform: scaleX(1);
  opacity: 0.55;
}
.ebp-color.active::after {
  transform: scaleX(1);
  opacity: 1;
}
/* Vừa bấm viên màu: ảnh mờ nhẹ một nhịp trong lúc tải dữ liệu màu mới, để người
   dùng thấy thẻ đang đổi chứ không tưởng bấm hụt. */
.ebp-card.ebp-doi-mau .ebp-img,
.ebp-card.ebp-doi-mau .ebp-title {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.bv-html-content a.ebp-thumb,
.ebp-thumb {
  text-decoration: none;
}
.bv-html-content a.ebp-title,
.ebp-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  text-decoration: none;
  /* Tên sản phẩm gói gọn ĐÚNG MỘT DÒNG, dài hơn thì cắt bằng dấu "…".
     Để tên tràn xuống dòng thứ hai thì hai thẻ đứng cạnh nhau lệch nhau: giá,
     ô chọn size và nút "Mua ngay" của thẻ bên này tụt thấp hơn thẻ bên kia. */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bv-html-content a.ebp-title:hover,
.ebp-title:hover {
  color: var(--green);
  opacity: 1;
}
.ebp-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ebp-price {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}
.ebp-discount {
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--green);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
}
.ebp-price-old {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
}
.ebp-size-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ebp-size-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ebp-size-label {
  font-size: 14px;
  color: #666666;
}
.ebp-size-guide {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.ebp-size-guide:hover {
  color: var(--green-deep);
}
.ebp-buy {
  width: 100%;
  height: 50px;
  margin-top: 2px;
  border: none;
  border-radius: 999px;
  background: var(--green);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-user-select: none;
  user-select: none;
}
.ebp-buy::selection,
.ebp-buy::-moz-selection {
  background: transparent;
}
.ebp-buy:hover {
  background: var(--green-deep);
}

.ebp-missing {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

/* ---------- Khối "TOP sản phẩm bán chạy" (băng chuyền 2 sản phẩm/trang) ---------- */
.ebp-top .ebp-page {
  display: none;
}
.ebp-top .ebp-page.is-active {
  display: grid;
}
.ebp-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}
.ebp-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: #d8dcd8;
  cursor: pointer;
  transition: width 0.2s, background 0.2s;
}
.ebp-dot:hover {
  background: #b9c0b9;
}
.ebp-dot.is-active {
  width: 22px;
  background: var(--green);
}

/* ---------- Mô tả Meta dưới dòng ngày đăng, đường kẻ nằm dưới mô tả ---------- */
.bv-meta {
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 14px;
}
.bv-desc {
  margin: 0 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.65;
  color: #555555;
}
.bv-desc[hidden] {
  display: none;
}
/* Bài chưa có mô tả thì kẻ đường line ngay dưới dòng ngày đăng */
.bv-meta:has(+ .bv-desc[hidden]),
.bv-meta:last-child {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}

/* ---------- Khối "Xem thêm" ---------- */
.bv-seealso {
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: 16px;
  background: #f5f6f5;
  font-size: 15.5px;
  line-height: 1.6;
}
.bv-seealso-label {
  display: block;
  margin-bottom: 12px;
  color: #444444;
}
.bv-seealso-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bv-html-content a.bv-seealso-item,
.bv-seealso-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--green);
  text-decoration: none;
}
.bv-html-content a.bv-seealso-item:hover,
.bv-seealso-item:hover {
  color: var(--green-deep);
  text-decoration: underline;
  opacity: 1;
}
.bv-seealso-chev {
  flex: none;
  color: var(--green);
}
.bv-seealso.is-inline .bv-seealso-label {
  display: inline;
  margin: 0 4px 0 0;
}
.bv-seealso.is-inline .bv-seealso-list,
.bv-html-content .bv-seealso.is-inline .bv-seealso-item,
.bv-seealso.is-inline .bv-seealso-item {
  display: inline;
}

/* ---------- Chia sẻ bài viết ---------- */
.bv-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 30px;
}
.bv-share[hidden] {
  display: none;
}
.bv-share-label {
  font-size: 14px;
  color: #444444;
}
.bv-share-list {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bv-share-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  display: inline-flex;
  transition: transform 0.2s, filter 0.2s;
}
.bv-share-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.bv-share-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}
.bv-share-tip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s;
}
.bv-share-tip.show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   TRANG THANH TOÁN — KHU "QUÀ TẶNG KÈM"
   Hiện ảnh quà tặng (gift_image) của các sản phẩm đang có trong giỏ.
   ========================================================================= */
/* ---------- Quà tặng kèm: dựng như một hàng sản phẩm trong giỏ ---------- */
.checkout-gifts {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f5f5f5;
}
.checkout-gifts[hidden] {
  display: none;
}
.checkout-gift-row {
  border-bottom: none;
  padding-bottom: 0;
  align-items: center;
}
.checkout-gift-row + .checkout-gift-row { margin-top: 16px; }
/* Ảnh quà nhỏ hơn ảnh sản phẩm chính, thụt vào một chút cho thấy rõ là quà
   đi kèm chứ không phải một dòng hàng ngang hàng với sản phẩm chính */
.checkout-gift-img {
  width: 44px;
  margin-left: 14px;
  border-color: #eef0ec;
  background: #f5f6f4;
}
.checkout-gift-img img { object-fit: contain; }
.checkout-gift-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.checkout-gift-info { min-width: 0; }
.checkout-gift-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--green-soft, #eef7e3);
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
/* "Đổi" đứng ngay sau tên màu, bấm vào mới xổ hàng ô màu ra */
.checkout-gift-change {
  background: none;
  border: none;
  padding: 0 0 0 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
}
.checkout-gift-change:hover { color: var(--green-deep); }
/* ---------- "Có N người dùng đang thêm cùng sản phẩm..." ---------- */
.checkout-social-proof {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid #f5f5f5;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7280;
}
.checkout-social-proof[hidden] { display: none; }
.checkout-social-proof strong {
  color: var(--green-deep);
  font-weight: 800;
}

/* Quà tặng kèm trong chi tiết đơn hàng ở trang tài khoản */
.acc-detail-gifts {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--green);
  border-radius: 12px;
  background: var(--green-soft, #eef7e3);
}
.acc-gift-head {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--green-deep);
}
.acc-gift-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.acc-gift-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 240px;
}
.acc-gift-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #ffffff;
}
.acc-gift-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: #4b5563;
}
.acc-gift-note strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Thứ tự cuối trang: Đăng ký → Bài viết liên quan ---------- */
.bv-subscribe-section {
  margin-top: 48px;
}
.bv-related-section {
  margin-top: 48px;
  border-top: none;
  padding-top: 0;
}

/* ---------- Khung trang chi tiết bài viết: 2500px ở màn 4K, tự co theo màn ----------
   2500 / 3840 = 65.1042vw  ->  4K 2500px | 2K 1667px | FHD 1250px
   Chỉ áp dụng desktop (>=1081px); tablet/mobile giữ nguyên .collection .container cũ. */
@media (min-width: 1081px) {
  .bv-page .container {
    width: 65.1042vw;
    max-width: 2500px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Màn hình trung bình & điện thoại ---------- */
@media (min-width: 1025px) and (max-width: 1400px) {
  .bv-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Điện thoại: ẩn hẳn mục lục (JS gán display:block inline nên cần !important) */
  .bv-toc-card {
    display: none !important;
  }

  /* Khung viền đã bỏ ở quy tắc mặc định (.bv-content-col), không cần lặp lại */
  .bv-layout {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .ebp-group {
    padding: 16px;
  }
  .ebp-group-head {
    margin: -16px -16px 16px;
    padding: 10px 16px;
    font-size: 13px;
  }
  .ebp-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bv-seealso {
    padding: 18px 18px;
    font-size: 14.5px;
  }
  .bv-share {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .bv-html-content h2:not([style*="font-size"]),
  .pd-desc h2:not([style*="font-size"]),
  .col-seo-body h2:not([style*="font-size"]),
  .privacy-content h2:not([style*="font-size"]) {
    font-size: 19px;
    padding: 11px 16px 11px 14px;
  }
}

/* ==========================================================================
   THÔNG BÁO & TUỲ CHỌN COOKIE  (/js/cookie-consent.js)
   ========================================================================== */
/* Thanh thông báo KHÔNG chặn thao tác: không có lớp phủ, khách vẫn bấm menu,
   cuộn trang, thêm giỏ hàng và thanh toán bình thường khi chưa chọn cookie. */
.ck-banner {
  /* Cao hơn nút trợ lý XIXA (99998) và bảng chat (99999) để không bị che */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -10px 40px rgba(16, 51, 26, .12);
  transform: translateY(110%); transition: transform .38s cubic-bezier(.4,.9,.3,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: var(--font);
}
.ck-banner.show { transform: none; }

/* Nhường chỗ cho thanh thông báo: mọi thứ dính ở đáy màn hình được đẩy lên
   đúng bằng chiều cao thật của thanh (--ck-banner-h do cookie-consent.js đo),
   nhờ vậy khách vẫn bấm được nút trợ lý, nút ĐẶT HÀNG... khi chưa chọn cookie. */
html.ck-banner-on .xb-fab,
html.ck-banner-on .xb-panel {
  bottom: calc(22px + var(--ck-banner-h, 0px));
}
html.ck-banner-on .xb-panel {
  height: min(660px, calc(100vh - 44px - var(--ck-banner-h, 0px)));
}
html.ck-banner-on .checkout-sticky-bar {
  bottom: var(--ck-banner-h, 0px);
}
html.ck-banner-on .cart-toast {
  bottom: calc(28px + var(--ck-banner-h, 0px));
}
/* Điện thoại: thanh "Thêm vào giỏ" dính đáy ở trang sản phẩm */
html.ck-banner-on .sticky-product-botbar {
  bottom: var(--ck-banner-h, 0px);
}
/* Đang mở popup (body.xixa-locked) -> thanh thông báo tạm trượt xuống để không
   đè lên nút ở đáy popup; đóng popup thì thanh hiện lại như cũ. */
body.xixa-locked .ck-banner {
  transform: translateY(110%);
  pointer-events: none;
}
.ck-banner-in {
  max-width: 1240px; margin: 0 auto; padding: 18px 20px;
  display: flex; align-items: center; gap: 18px;
}
.ck-banner-ic {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--green-soft); color: var(--green-deep);
}
.ck-banner-ic svg { width: 24px; height: 24px; }
.ck-banner-tx { flex: 1; min-width: 0; }
.ck-banner-tx h2 {
  font-size: 15.5px; font-weight: 800; color: var(--ink); margin: 0 0 4px;
  letter-spacing: -.01em;
}
.ck-banner-tx p {
  font-size: 13.5px; line-height: 1.6; color: var(--gray); margin: 0;
}
/* Máy tính: khoá đúng 2 dòng ở mọi độ phân giải, không để tràn thành 3 dòng */
@media (min-width: 1024px) {
  .ck-banner-tx p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.ck-banner-tx a { color: var(--green); font-weight: 700; text-decoration: underline; }
.ck-banner-btns { flex: none; display: flex; align-items: center; gap: 9px; }

.ck-btn {
  border: none; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 11px 20px;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.ck-btn:active { transform: scale(.97); }
.ck-btn-ghost { background: #fff; color: var(--ink); border: 1.5px solid #dde3d9; }
.ck-btn-ghost:hover { background: #f4f7f1; border-color: #c8d4c2; }
.ck-btn-main { background: var(--green); color: #fff; }
.ck-btn-main:hover { background: var(--green-deep); }

@media (max-width: 1023px) {
  .ck-banner-in { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .ck-banner-ic { display: none; }
  .ck-banner-btns { width: 100%; flex-wrap: wrap; }
  .ck-banner-btns .ck-btn { flex: 1 1 auto; text-align: center; }
  .ck-banner-btns .ck-btn-main { flex-basis: 100%; order: -1; }
}

/* Điện thoại: giữ thanh gọn nhất có thể — thanh không chặn thao tác nữa nên
   phần màn hình nó che chính là thứ duy nhất còn làm phiền khách. */
@media (max-width: 600px) {
  .ck-banner-in { gap: 11px; padding: 13px 14px; }
  .ck-banner-tx h2 { font-size: 14.5px; margin-bottom: 3px; }
  .ck-banner-tx p {
    font-size: 12.5px; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .ck-banner-btns { gap: 8px; }
  .ck-banner-btns .ck-btn { padding: 10px 14px; font-size: 13px; }
}

/* ---------- Bảng tuỳ chọn ---------- */
.ck-modal { position: fixed; inset: 0; z-index: 100010; display: none; }
.ck-modal.show { display: block; }
.ck-modal-bg {
  position: absolute; inset: 0; background: rgba(18, 30, 16, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ck-modal-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 760px);
  background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  font-family: var(--font); outline: none;
  animation: ckPop .28s cubic-bezier(.2,1.1,.4,1);
}
@keyframes ckPop { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } }
.ck-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 24px 4px; flex: none;
}
.ck-modal-head h2 { font-size: 19px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -.015em; }
.ck-x {
  width: 34px; height: 34px; border: none; border-radius: 50%; background: #f2f4f0;
  color: var(--ink); cursor: pointer; display: grid; place-items: center; flex: none;
  transition: background .18s;
}
.ck-x:hover { background: #e6eae2; }
.ck-x svg { width: 18px; height: 18px; }

.ck-modal-body { flex: 1; overflow-y: auto; padding: 12px 24px 20px; }
.ck-modal-intro { font-size: 13.5px; line-height: 1.65; color: var(--gray); margin: 0 0 18px; }

/* Mỗi nhóm là một hàng bấm để mở/đóng phần mô tả */
.ck-group {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px 12px; margin-bottom: 10px; padding: 4px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: #fafbf9;
  transition: border-color .2s, background .2s;
}
.ck-group.open { border-color: var(--green); background: #fff; }
.ck-group-top {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; padding: 13px 0; margin: 0;
  font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--ink);
  text-align: left; cursor: pointer; min-width: 0;
}
.ck-pm { position: relative; width: 14px; height: 14px; flex: none; color: var(--gray); }
.ck-pm::before, .ck-pm::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.ck-pm::before { left: 0; top: 6px; width: 14px; height: 2px; }
.ck-pm::after  { left: 6px; top: 0; width: 2px; height: 14px; }
.ck-group.open .ck-pm { color: var(--green); }
.ck-group.open .ck-pm::after { transform: scaleY(0); opacity: 0; }
.ck-group-name { min-width: 0; }

/* Phần mô tả mở ra bên dưới, chiếm hết chiều ngang của hàng */
.ck-group-detail {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,.9,.3,1);
}
.ck-group.open .ck-group-detail { grid-template-rows: 1fr; }
.ck-group-detail-in { overflow: hidden; }
.ck-group-detail p {
  font-size: 13px; line-height: 1.6; color: var(--gray); margin: 0 0 12px;
}
.ck-group-detail-in p:first-child { margin-top: -2px; }
.ck-group-items { font-size: 12px !important; color: #97a094 !important; }

/* Công tắc bật/tắt */
.ck-sw { flex: none; display: inline-flex; align-items: center; cursor: pointer; }
.ck-sw-locked { cursor: not-allowed; opacity: .95; }
.ck-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-sw-track {
  width: 44px; height: 26px; border-radius: 999px; background: #d3d9cf;
  display: block; position: relative; transition: background .22s;
}
.ck-sw-dot {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2);
  transition: transform .22s cubic-bezier(.4,.9,.3,1);
}
.ck-sw-track.on { background: var(--green); }
.ck-sw-track.on .ck-sw-dot { transform: translateX(18px); }
.ck-sw input:focus-visible + .ck-sw-track { outline: 2px solid var(--green-lime); outline-offset: 2px; }

.ck-policy-link {
  display: inline-block; margin-top: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--green); text-decoration: none;
}
.ck-policy-link:hover { text-decoration: underline; }

.ck-modal-foot {
  display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
  padding: 16px 24px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: #fbfcfa;
}
.ck-modal-foot .ck-btn-main { margin-left: auto; }
.ck-btn-plain { background: transparent; color: var(--gray); border: none; }
.ck-btn-plain:hover { background: #eef1ec; color: var(--ink); }

@media (max-width: 560px) {
  .ck-modal-card { width: 100vw; max-width: 100vw; max-height: 92vh;
    top: auto; bottom: 0; left: 0; transform: none; border-radius: 20px 20px 0 0; }
  @keyframes ckPop { from { opacity: 0; transform: translateY(24px); } }
  .ck-modal-foot { gap: 8px; }
  .ck-modal-foot .ck-btn-main { margin-left: 0; flex-basis: 100%; order: -1; }
  .ck-modal-foot .ck-btn-ghost, .ck-modal-foot .ck-btn-plain { flex: 1; }
}


/* ---- Trang thanh toán: ô "Lưu thông tin cho lần đặt sau" (khách chưa đăng nhập) ---- */
.save-info-box {
  margin-top: 4px; padding: 13px 15px;
  background: #f6f9f2; border: 1px solid #e0ead4; border-radius: 12px;
}
.save-info-row {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer; margin: 0;
}
.save-info-row input[type="checkbox"] {
  width: 19px; height: 19px; margin: 1px 0 0; flex: none;
  accent-color: var(--green); cursor: pointer;
}
.save-info-row b {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.save-info-row i {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 12.5px; line-height: 1.55; color: var(--gray);
}
.save-info-clear {
  margin: 10px 0 0 30px; padding: 0; border: none; background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: #c0392b; text-decoration: underline; cursor: pointer;
}
.save-info-clear:hover { opacity: .75; }

/* ============================================================================
   XIXA FootFit™ — công cụ tìm size trong drawer "Hướng dẫn chọn size"
   (markup do /js/size-finder.js dựng; nằm ngay dưới video hướng dẫn đo chân)
   ========================================================================== */

/* --- Nút gợi ý cuộn xuống, đặt ngay dưới video --- */
.sg-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 4px 0 18px;
  padding: 12px 16px;
  border: 1.5px dashed #b9dfa4;
  border-radius: 999px;
  background: linear-gradient(180deg, #f4fbee 0%, #eaf6df 100%);
  color: var(--green);
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sg-jump:hover { border-color: var(--green-lime); background: #eaf6df; transform: translateY(-1px); }
.sg-jump svg { width: 16px; height: 16px; animation: xsf-bob 1.6s ease-in-out infinite; }
@keyframes xsf-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* --- Nút tải bản hướng dẫn (thay cho ảnh dài trước đây) --- */
.sg-guide-dl {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(31, 71, 35, .06);
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.sg-guide-dl:hover {
  border-color: var(--green-lime);
  box-shadow: 0 10px 26px rgba(31, 71, 35, .12);
  transform: translateY(-2px);
}
.sg-guide-dl-thumb {
  position: relative;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-soft);
}
.sg-guide-dl-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sg-guide-dl-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-guide-dl-tx b { font-size: 14px; font-weight: 800; color: var(--ink); }
.sg-guide-dl-tx span { font-size: 12px; color: var(--muted); }
.sg-guide-dl-ic {
  margin-left: auto;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
}
.sg-guide-dl-ic svg { width: 18px; height: 18px; }
.sg-guide-dl:hover .sg-guide-dl-ic svg { animation: xsf-dl 0.6s ease; }
@keyframes xsf-dl {
  0% { transform: translateY(-6px); opacity: .4; }
  60% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); }
}

/* --------------------------- khung công cụ ------------------------------- */
.xsf {
  margin-top: 24px;
  padding: 20px 18px 18px;
  border: 1px solid #dcebd1;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 100% 0%, #eef8e4 0%, rgba(238, 248, 228, 0) 62%),
    linear-gradient(180deg, #fbfdf8 0%, #ffffff 55%);
  box-shadow: 0 10px 30px rgba(31, 71, 35, .07);
}
.xsf.is-empty .xsf-modes,
.xsf.is-empty .xsf-pane,
.xsf.is-empty .xsf-run { opacity: .5; pointer-events: none; }

.xsf-head { margin-bottom: 16px; }
.xsf-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.xsf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-lime2);
  box-shadow: 0 0 0 0 rgba(143, 209, 79, .8);
  animation: xsf-pulse 1.9s ease-out infinite;
}
@keyframes xsf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 209, 79, .75); }
  70%  { box-shadow: 0 0 0 7px rgba(143, 209, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 209, 79, 0); }
}
.xsf-title {
  margin: 10px 0 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
}
.xsf-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.xsf-sub b { color: var(--green); font-weight: 700; }

/* --------------------------- chọn cách đo -------------------------------- */
.xsf-modes {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 14px;
  background: #edf3e7;
}
.xsf-mode-ink {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(31, 71, 35, .12);
  transition: transform .28s cubic-bezier(.25, 1, .5, 1);
  pointer-events: none;
}
.xsf-mode {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 8px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease;
}
.xsf-mode.is-on { color: var(--green); }
.xsf-mode-t { font-size: 13.5px; font-weight: 800; }
.xsf-mode-d { font-size: 11px; font-weight: 600; opacity: .75; }

/* ------------------------------ ô nhập ----------------------------------- */
.xsf-pane { display: none; }
.xsf-pane.is-on { display: block; animation: xsf-rise .28s ease both; }
@keyframes xsf-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.xsf-lb {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray);
}
.xsf-lb b { color: var(--pink); }

.xsf-stepper { display: flex; align-items: center; gap: 10px; }
.xsf-step {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.xsf-step:hover { background: var(--green-soft); border-color: var(--green-lime); }
.xsf-step:active { transform: scale(.92); }

.xsf-num, .xsf-inp {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.xsf-num:focus-within, .xsf-inp:focus-within {
  border-color: var(--green-lime);
  box-shadow: 0 0 0 3px rgba(143, 209, 79, .18);
}
.xsf-num input {
  width: 100%;
  padding: 11px 42px 11px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  outline: none;
}
.xsf-inp input, .xsf-inp select {
  width: 100%;
  padding: 11px 40px 11px 13px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  outline: none;
}
.xsf-inp-sel select { padding-right: 30px; appearance: none; cursor: pointer; }
.xsf-inp-sel::after {
  content: '';
  position: absolute;
  right: 14px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}
.xsf-unit {
  position: absolute;
  right: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}

.xsf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.xsf-quick-lb { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.xsf-quick-b {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: all .15s ease;
}
.xsf-quick-b:hover { border-color: var(--green-lime); color: var(--green); }
.xsf-quick-b.is-on { background: var(--green); border-color: var(--green); color: #fff; }

.xsf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xsf-fld { min-width: 0; }

.xsf-gt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.xsf-gt-b {
  padding: 11px 6px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray);
  cursor: pointer;
  transition: all .16s ease;
}
.xsf-gt-b:hover { border-color: var(--green-lime); }
.xsf-gt-b.is-on {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.xsf-hint {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* ------------------------------ nút tính --------------------------------- */
.xsf-run {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-lime) 100%);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(47, 125, 50, .28);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.xsf-run svg { width: 18px; height: 18px; }
.xsf-run:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(47, 125, 50, .34); filter: saturate(1.08); }
.xsf-run:active { transform: translateY(0) scale(.985); }

.xsf-err {
  margin: 12px 0 0;
  padding: 11px 14px;
  border: 1px dashed #ffa39e;
  border-radius: 12px;
  background: #fff4f3;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #d4380d;
  animation: xsf-rise .22s ease both;
}

/* ---------------------------- hiệu ứng quét ------------------------------ */
.xsf-scan[hidden], .xsf-out[hidden], .xsf-err[hidden] { display: none !important; }
.xsf-scan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 0 18px;
  animation: xsf-rise .22s ease both;
}
.xsf-scan-box {
  position: relative;
  width: 62px;
  height: 100px;
  overflow: hidden;
}
.xsf-foot { width: 100%; height: 100%; display: block; animation: xsf-foot-beat 1.4s ease-in-out infinite; }
.xsf-foot-sole { fill: #dcebd1; }
.xsf-toe { fill: #c3e0ac; }
@keyframes xsf-foot-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.xsf-scan-line {
  position: absolute;
  left: -6%;
  width: 112%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(83,161,0,0) 0%, var(--green-lime) 45%, var(--green-lime2) 55%, rgba(83,161,0,0) 100%);
  box-shadow: 0 0 12px rgba(83, 161, 0, .75);
  animation: xsf-scan 1.1s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes xsf-scan {
  0%   { top: -4%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.xsf-scan-tx { font-size: 12.5px; font-weight: 700; color: var(--green); }

/* ------------------------------ kết quả ---------------------------------- */
.xsf-card {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #cfe6bd;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 71, 35, .1);
  animation: xsf-rise .34s cubic-bezier(.25, 1, .5, 1) both;
}

.xsf-hero { display: flex; align-items: center; gap: 15px; }
.xsf-ring {
  position: relative;
  flex: 0 0 92px;
  width: 92px; height: 92px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: radial-gradient(circle at 32% 26%, #63b93a 0%, var(--green) 62%, var(--green-dark) 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 125, 50, .32);
  animation: xsf-pop .45s cubic-bezier(.2, 1.5, .5, 1) both;
}
.xsf-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(143, 209, 79, .55);
  animation: xsf-halo 2.4s ease-out infinite;
}
@keyframes xsf-pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes xsf-halo {
  0%   { transform: scale(.92); opacity: .9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.xsf-ring-lb { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; opacity: .82; }
.xsf-ring-sz { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.xsf-ring-us { font-size: 10px; font-weight: 700; opacity: .82; }

.xsf-hero-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.xsf-hero-k {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.xsf-tag-ref {
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff4e3;
  color: #b26a00;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}
.xsf-hero-v { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.xsf-hero-d { font-size: 12.5px; color: var(--gray); }

.xsf-stock {
  align-self: flex-start;
  margin-top: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
}
.xsf-stock.is-ok      { background: var(--green-soft); color: var(--green); }
.xsf-stock.is-low     { background: #fff3e0; color: #c25a00; }
.xsf-stock.is-out     { background: #ffece9; color: #d4380d; }
.xsf-stock.is-unknown { background: #f1f3f0; color: var(--muted); }

.xsf-warn, .xsf-alt {
  margin-top: 13px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.55;
  animation: xsf-rise .3s ease both;
}
.xsf-warn { background: #fff8ec; border: 1px dashed #f0c078; color: #8a5a00; }
.xsf-alt  { background: #f4f8ff; border: 1px dashed #a9c8f5; color: #17457f; }
.xsf-alt b { font-weight: 800; }
.xsf-alt-b {
  display: inline-block;
  margin-top: 7px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: #17457f;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.xsf-alt-b:hover { filter: brightness(1.15); transform: translateY(-1px); }

.xsf-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 15px;
}
.xsf-fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--bg-soft);
  text-align: center;
  animation: xsf-rise .3s ease both;
}
.xsf-fact:nth-child(2) { animation-delay: .05s; }
.xsf-fact:nth-child(3) { animation-delay: .1s; }
.xsf-fact-k { font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1.3; }
.xsf-fact-v { font-size: 17px; font-weight: 800; color: var(--ink); }
.xsf-fact-v i { font-size: 11px; font-style: normal; font-weight: 700; color: var(--muted); }
.xsf-fact-v.is-warn { color: #c25a00; }
.xsf-bmi-chuan { color: var(--green); }
.xsf-bmi-thua  { color: #c25a00; }
.xsf-bmi-beo   { color: #d4380d; }

.xsf-strip { margin-top: 16px; }
.xsf-strip-lb {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.xsf-strip-lb i { font-style: normal; font-weight: 600; opacity: .8; }
.xsf-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.xsf-chips::-webkit-scrollbar { height: 4px; }
.xsf-chips::-webkit-scrollbar-thumb { background: #d8e2d1; border-radius: 4px; }
.xsf-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 50px;
  padding: 8px 9px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--gray);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
  animation: xsf-chip-in .32s cubic-bezier(.25, 1, .5, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes xsf-chip-in { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.xsf-chip:hover { border-color: var(--green-lime); transform: translateY(-2px); }
.xsf-chip-sz { font-size: 15px; font-weight: 800; color: var(--ink); }
.xsf-chip-cm { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.xsf-chip.is-pick {
  border-color: var(--green);
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  box-shadow: 0 6px 16px rgba(47, 125, 50, .3);
}
.xsf-chip.is-pick .xsf-chip-sz, .xsf-chip.is-pick .xsf-chip-cm { color: #fff; }
.xsf-chip.is-pick .xsf-chip-cm { opacity: .85; }
.xsf-chip.is-alt { border-color: #17457f; border-style: dashed; }
.xsf-chip.is-out {
  opacity: .42;
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, #f6f6f6 0 5px, #eee 5px 10px);
}
.xsf-chip.is-out:hover { transform: none; border-color: var(--line); }
.xsf-chip.is-out .xsf-chip-sz { text-decoration: line-through; }

.xsf-notes {
  margin: 15px 0 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xsf-notes li {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.xsf-notes li::marker { color: var(--green-lime); }

.xsf-cta {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 18px;
  border: 0;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.xsf-cta:hover { background: #000; transform: translateY(-1px); }

/* -------------------------- cảnh báo tham khảo --------------------------- */
.xsf-note-ref {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 13px;
  border: 1px dashed #f0c078;
  border-radius: 13px;
  background: #fffaf1;
}
.xsf-note-ref svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: #d08700; }
.xsf-note-ref p { margin: 0; font-size: 11.8px; line-height: 1.6; color: #7a5410; }
.xsf-note-ref b { font-weight: 800; color: #613f00; }
.xsf-note-ref a { color: var(--green); font-weight: 800; text-decoration: underline; }

/* ------------------------------- mobile ---------------------------------- */
@media (max-width: 430px) {
  .xsf { padding: 18px 14px 16px; }
  .xsf-grid { grid-template-columns: 1fr; }
  .xsf-hero { gap: 12px; }
  .xsf-ring { flex-basis: 80px; width: 80px; height: 80px; }
  .xsf-ring-sz { font-size: 29px; }
  .xsf-facts { grid-template-columns: 1fr 1fr; }
  .xsf-facts .xsf-fact:nth-child(3) { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .xsf-dot, .xsf-foot, .xsf-scan-line, .xsf-ring, .xsf-ring::after,
  .xsf-chip, .xsf-card, .xsf-pane.is-on, .xsf-fact, .sg-jump svg { animation: none !important; }
}

/* Đổi màu ngay trên 2 thanh sticky: mờ nhẹ lúc đang tải sản phẩm màu đó */
.spb-swatches.is-loading, .spb-bot-swatches.is-loading { opacity: .55; pointer-events: none; }
/* Viên màu nay là <button> -> gỡ nền/viền mặc định của nút */
button.spb-swatch, button.spb-bot-swatch { font: inherit; color: inherit; appearance: none; }