/* ============================================================
   XGO Care — Design System (P1 prototype) · phong cách e-commerce nhà thuốc (Long Châu style)
   2 tông xanh thương hiệu + UI commerce dày, tập trung bán hàng.
   ============================================================ */

:root {
  /* Brand / commerce blues */
  --sky: #4FC3F7;
  --blue: #1C6DD0;        /* primary commerce blue (CTA, price) */
  --blue-dark: #14529E;
  --navy: #2C3E6B;        /* header gradient start, headings */

  /* Commerce accents */
  --sale: #EE4D2D;        /* discount badge + sale price */
  --green: #16A34A;       /* trust */
  --amber: #F6A609;

  /* Neutrals */
  --white: #FFFFFF;
  --bg: #F2F6FB;          /* page bg between sections */
  --bg-soft: #F4F9FD;
  --bg-soft-2: #EAF4FB;
  --ink: #25324B;
  --muted: #6B7A99;
  --line: #E5ECF3;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(44, 62, 107, 0.07);
  --shadow: 0 8px 24px rgba(44, 62, 107, 0.10);
  --shadow-lg: 0 16px 40px rgba(44, 62, 107, 0.14);

  --container: 1240px;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 15px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; }
p { margin: 0 0 1rem; }
strong { color: var(--navy); }

.container { width: min(100% - 28px, var(--container)); margin-inline: auto; }
.section { padding: 28px 0; }
.grid { display: grid; gap: 16px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: .95rem; border: 1.5px solid transparent; cursor: pointer; transition: filter .15s, transform .15s, background .2s, color .2s; white-space: nowrap; font-family: inherit; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { filter: brightness(.95); }
.btn-outline { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--bg-soft); }
.btn-ghost { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: .85rem; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 600; background: var(--bg-soft-2); color: var(--navy); }
.pill--green { background: #E8F7EE; color: var(--green); }
.pdp-flags .rating { color: var(--amber); font-size: .95rem; letter-spacing: 1px; align-self: center; }
.price-note { color: var(--muted); font-weight: 400; font-size: .82rem; }

/* ============================================================
   TOP PROMO BAR
   ============================================================ */
.promo-bar { background: #8a1420 url("../images/banners/promobar-desktop.webp?v=tt2026") center / cover no-repeat; color: #fff; font-size: .84rem; }
.promo-bar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 50px; text-align: center;
  flex-wrap: wrap; text-shadow: 0 1px 3px rgba(8,28,60,.45); }
.promo-bar b { color: #FFE08A; }
.promo-bar__tag { font-weight: 800; color: #fff; letter-spacing: .02em; }
.promo-bar__code { font-family: inherit; font-weight: 800; letter-spacing: .06em; color: var(--navy); background: var(--amber);
  border: 0; border-radius: var(--r-sm); padding: 3px 10px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.promo-bar__code::before { content: "🏷 "; }
.promo-bar__code:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.promo-bar__code.is-copied { background: #fff; color: var(--green); }
.promo-bar__note { opacity: .85; font-size: .8rem; }
.promo-bar__cta { color: #fff; font-weight: 700; text-decoration: none; border: 1.5px solid rgba(255,255,255,.7);
  border-radius: var(--r-pill); padding: 4px 14px; transition: background .15s, color .15s; white-space: nowrap; }
.promo-bar__cta:hover { background: #fff; color: var(--blue); border-color: #fff; }
/* Biến thể ảnh banner full-width */
.promo-bar--img { display: block; line-height: 0; }
.promo-bar--img img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .promo-bar { background-image: url("../images/banners/promobar-mobile.webp?v=tt2026"); }
  .promo-bar__note, .promo-bar__cta { display: none; }
  .promo-bar__inner { gap: 8px; min-height: 44px; }
}

/* ============================================================
   MAIN HEADER (blue) — logo + big search + actions
   ============================================================ */
/* Header: nền gradient + họa tiết bong bóng/ánh sáng sky mềm (hợp tông logo mẹ&bé), rất nhẹ để không chói chữ */
.site-header { position: sticky; top: 0; z-index: 60;
  background-color: #9e1b1f;
  background-image:
    radial-gradient(circle at 90% -35%, rgba(255,206,110,.45), transparent 46%),
    radial-gradient(circle at 10% 150%, rgba(255,176,60,.22), transparent 44%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='80'><g fill='%23FFD98A' fill-opacity='0.16'><path d='M46 12 l3 9 9 3 -9 3 -3 9 -3 -9 -9 -3 9 -3 z'/><path d='M268 20 l2.5 7 7 2.5 -7 2.5 -2.5 7 -2.5 -7 -7 -2.5 7 -2.5 z'/></g><g fill='%23FFE9B0' fill-opacity='0.20'><circle cx='150' cy='58' r='2.5'/><circle cx='96' cy='30' r='2'/><circle cx='210' cy='62' r='2.5'/><circle cx='322' cy='40' r='2'/><circle cx='120' cy='18' r='1.8'/></g></svg>"),
    linear-gradient(135deg, #6f1015 0%, #9e1b1f 56%, #c0342b 100%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: right top, left bottom, left center, center;
  background-size: auto, auto, 340px 80px, cover;
}
.header-main { display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.brand-box { background: transparent; padding: 0; display: inline-flex; flex: none; }
.brand-box img { height: 50px; width: auto; }

/* NB: dùng `form.search` (không phải `.search` trần) vì WordPress gán class `search`
   cho <body> ở trang kết quả tìm kiếm — `.search` trần sẽ biến body thành flex và vỡ layout. */
form.search { flex: 1; max-width: 640px; background: #fff; border-radius: var(--r-pill); display: flex; align-items: center; padding: 5px 6px 5px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .18s; }
form.search:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.4), var(--shadow); }
form.search input { border: 0; outline: 0; flex: 1; font-family: inherit; font-size: .95rem; color: var(--ink); background: transparent; }
form.search input::placeholder { color: #9aa7bd; }
form.search button { border: 0; background: var(--blue); color: #fff; border-radius: var(--r-pill); padding: 10px 22px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; font-family: inherit; transition: background .18s; }
form.search button:hover { background: var(--blue-dark); }

.header-actions { display: flex; align-items: center; gap: 4px; color: #fff; margin-left: auto; }
.h-action { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: .78rem; line-height: 1.25;
  padding: 6px 12px 6px 8px; border-radius: var(--r-pill); transition: background .18s, transform .15s; background: transparent; border: 0; cursor: pointer; font-family: inherit; }
.h-action:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.h-ico { position: relative; width: 38px; height: 38px; border-radius: var(--r-pill); background: rgba(255,255,255,.16);
  display: grid; place-items: center; flex: none; transition: background .18s; }
.h-action:hover .h-ico { background: rgba(255,255,255,.28); }
.h-txt { display: flex; flex-direction: column; white-space: nowrap; text-align: left; }
.h-txt b { font-size: .92rem; font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.h-cart .count, .h-wishlist .count { position: absolute; top: -5px; right: -5px; background: var(--amber); color: #fff; font-size: .64rem;
  font-weight: 800; min-width: 18px; height: 18px; border-radius: var(--r-pill); display: grid; place-items: center;
  padding: 0 4px; border: 2px solid var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.h-wishlist .count { background: #EE4D2D; }
.h-cart .count.is-zero, .h-wishlist .count.is-zero { display: none; }

/* Wishlist heart button on product cards */
.xgo-wishlist-btn { position: absolute; top: 8px; right: 8px; z-index: 25 !important; pointer-events: auto !important; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.95); border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center;
  cursor: pointer; transition: all .2s ease; padding: 0; box-shadow: var(--shadow-sm); }
.xgo-wishlist-btn * { pointer-events: none !important; }
.xgo-wishlist-btn:hover { background: #fff; color: #EE4D2D; transform: scale(1.1); }
.xgo-wishlist-btn.is-active { background: #EE4D2D; border-color: #EE4D2D; color: #fff; }
.xgo-wishlist-btn.is-active svg { fill: #fff; }
.xgo-wishlist-btn.xgo-pulse { animation: xgoHeartPulse .4s ease-out; }
@keyframes xgoHeartPulse { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* Wishlist Drawer Modal */
.xgo-wishlist-modal .xgo-wishlist-box { max-width: 620px; width: 94vw; text-align: center; }
@media ( max-width: 640px ) { .xgo-wishlist-modal .xgo-wishlist-box { width: 95vw; } }
.xgo-modal__icon-badge { width: 56px; height: 56px; border-radius: 50%; background: #fff0ed; border: 1.5px solid #ffdad3; color: #EE4D2D; display: grid; place-items: center; margin: 0 auto 14px; box-shadow: 0 6px 16px rgba(238,77,45,.15); }
.xgo-wishlist-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; max-height: 66vh; overflow-y: auto; padding-right: 6px; text-align: left; }
.xgo-wishlist-empty { text-align: center; color: var(--muted); padding: 24px 16px 12px; display: flex; flex-direction: column; align-items: center; }
.xgo-wl-empty-ic { width: 68px; height: 68px; border-radius: 50%; background: #fff0ed; border: 1px solid #ffe2dc; display: grid; place-items: center; margin-bottom: 14px; box-shadow: var(--shadow-sm); }
.xgo-wishlist-empty h4 { margin: 0 0 6px; font-size: 1.05rem; color: var(--navy); font-weight: 700; }
.xgo-wishlist-empty p { margin: 0 0 18px; font-size: .88rem; color: var(--muted); max-width: 360px; line-height: 1.5; }
.xgo-wl-cta { border-radius: 999px !important; padding: 10px 24px !important; font-weight: 700 !important; font-size: .88rem !important; background: var(--blue) !important; color: #fff !important; text-decoration: none; box-shadow: var(--shadow-sm); }
.xgo-wl-cta:hover { background: var(--blue-dark) !important; transform: translateY(-1px); }

.xgo-wishlist-item { position: relative; display: flex; align-items: center; gap: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 44px 16px 16px; transition: box-shadow .15s, border-color .15s, background .15s; }
.xgo-wishlist-item:hover { box-shadow: var(--shadow-sm); background: #fff; border-color: #cfe0f5; }
.xgo-wishlist-item__thumb { flex: none; display: block; width: 84px; height: 84px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); overflow: hidden; }
.xgo-wishlist-item__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.xgo-wishlist-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.xgo-wishlist-item__name { font-size: .95rem; line-height: 1.4; font-weight: 700; color: var(--navy); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xgo-wishlist-item__name:hover { color: var(--blue); }
.xgo-wishlist-item__cat { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: #eef3fb; color: var(--blue); font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xgo-wishlist-item__cat svg { flex: none; }
.xgo-wishlist-item__view { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-top: 2px; color: var(--blue); font-size: .85rem; font-weight: 700; text-decoration: none; }
.xgo-wishlist-item__view svg { transition: transform .15s; }
.xgo-wishlist-item__view:hover { color: var(--blue-dark); }
.xgo-wishlist-item__view:hover svg { transform: translateX(3px); }
.xgo-wishlist-del { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 0; border-radius: 50%; transition: color .15s, background .15s; }
.xgo-wishlist-del:hover { color: var(--sale); background: #fee2e2; }

/* Quick View button & modal */
.xgo-quickview-btn { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%) translateY(8px); z-index: 25 !important; pointer-events: auto !important;
  background: var(--blue); border: 1px solid var(--blue); border-radius: var(--r-pill); color: #fff;
  font-size: .74rem; font-weight: 700; padding: 5px 14px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(28,109,208,.35); opacity: 0; visibility: hidden; transition: all .2s ease; font-family: inherit; white-space: nowrap; }
.xgo-quickview-btn * { pointer-events: none !important; }
.pcard:hover .xgo-quickview-btn, .pcard__media:hover .xgo-quickview-btn { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.xgo-quickview-btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; transform: translateX(-50%) scale(1.05); }

.xgo-qv-box { max-width: 760px; width: 92vw; padding: 24px 28px; box-sizing: border-box; overflow: hidden; position: relative; border-radius: var(--r-lg); }
/* Ghi đè max-width:420px của .xgo-modal__box (dùng chung) — QV cần rộng 760px cho bố cục 2 cột,
   nếu không box bị ép 420px, cột tên co lại còn ~1 ký tự/dòng. */
.xgo-qv-modal .xgo-qv-box { max-width: 760px; width: 92vw; }
@media ( max-width: 640px ) { .xgo-qv-modal .xgo-qv-box { width: 95vw; } }
.xgo-qv-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; width: 100%; box-sizing: border-box; }
.xgo-qv-media { min-width: 0; max-width: 100%; box-sizing: border-box; }
.xgo-qv-main-img { position: relative; aspect-ratio: 1/1; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: var(--shadow-sm); }
.xgo-qv-main-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Nút lướt trái/phải ảnh Quick View — chevron SVG tự vẽ (không dùng ký tự). */
.xgo-qv-arrows { position: absolute; inset: 0; pointer-events: none; }
.xgo-qv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background-color: rgba(255,255,255,.95); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; box-shadow: 0 4px 14px rgba(0,0,0,.15); cursor: pointer; pointer-events: auto; font-size: 0; opacity: .92; transition: all .18s ease; }
.xgo-qv-arrow:hover { border-color: var(--blue); background-color: var(--blue); opacity: 1; transform: translateY(-50%) scale(1.08); }
.xgo-qv-prev { left: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d2b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.xgo-qv-next { right: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230d2b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.xgo-qv-prev:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E"); }
.xgo-qv-next:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); }
.xgo-qv-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; max-width: 100%; padding: 3px 1px; scrollbar-width: none; -ms-overflow-style: none; }
.xgo-qv-thumbs::-webkit-scrollbar { display: none; }
.xgo-qv-thumb { flex: 0 0 48px; width: 48px; height: 48px; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 2px; background: #fff; cursor: pointer; opacity: .65; transition: all .15s; box-sizing: border-box; }
.xgo-qv-thumb.is-active, .xgo-qv-thumb:hover { opacity: 1; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(28,109,208,.2); }
.xgo-qv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.xgo-qv-summary { min-width: 0; padding-right: 20px; box-sizing: border-box; }
.xgo-qv-title { font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 0 0 8px; line-height: 1.4; word-break: break-word; }
.xgo-qv-title a { color: var(--navy); text-decoration: none; transition: color .15s; }
.xgo-qv-title a:hover { color: var(--blue); }
.xgo-qv-price { font-size: 1.3rem; font-weight: 800; color: var(--sale); margin-bottom: 10px; }
.xgo-qv-excerpt { font-size: .88rem; color: var(--muted); line-height: 1.55; margin: 12px 0; max-height: 110px; overflow-y: auto; padding-right: 4px; }
@media (max-width: 640px) {
  .xgo-qv-box { padding: 18px 16px; width: 95vw; }
  .xgo-qv-grid { grid-template-columns: 1fr; gap: 16px; }
  .xgo-qv-summary { padding-right: 0; }
}

/* Mini-cart dropdown ở header (hiện khi rê chuột vào Giỏ hàng — kiểu Long Châu/Dola) */
.h-cart-wrap { position: relative; }
.xgo-minicart { position: absolute; top: calc(100% + 10px); right: 0; width: 340px; max-width: 92vw; z-index: 60;
  background: #fff; color: var(--ink); border-radius: var(--r-lg); box-shadow: 0 16px 40px rgba(20,40,80,.22);
  padding: 16px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s; }
.xgo-minicart::before { content: ""; position: absolute; top: -7px; right: 30px; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 4px rgba(20,40,80,.06); }
.h-cart-wrap:hover .xgo-minicart, .h-cart-wrap:focus-within .xgo-minicart { opacity: 1; visibility: visible; transform: translateY(0); }
/* Nội dung mini-cart của WooCommerce */
.xgo-minicart .woocommerce-mini-cart__empty-message { text-align: center; color: var(--muted); padding: 18px 0; margin: 0; }
.xgo-minicart ul.cart_list { list-style: none; margin: 0 0 6px; padding: 0; max-height: 320px; overflow-y: auto; }
.xgo-minicart ul.cart_list li { position: relative; list-style: none; padding: 12px 30px 12px 60px;
  min-height: 60px; border-bottom: 1px solid var(--line); }
.xgo-minicart ul.cart_list li img { position: absolute; left: 0; top: 12px; width: 48px !important; height: 48px;
  object-fit: contain; margin: 0 !important; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.xgo-minicart ul.cart_list li a:not(.remove) { display: block; color: var(--ink); font-weight: 600; font-size: .85rem;
  text-decoration: none; line-height: 1.35; }
.xgo-minicart ul.cart_list .quantity { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); white-space: nowrap;
  border: 0; border-radius: 0; background: none; height: auto; padding: 0; overflow: visible; vertical-align: baseline; }
.xgo-minicart ul.cart_list .quantity .amount { white-space: nowrap; }
.xgo-minicart ul.cart_list a.remove { position: absolute; right: 0; top: 12px; width: 22px; height: 22px;
  line-height: 19px; text-align: center; font-size: 16px; color: var(--sale) !important; border: 1px solid var(--line); border-radius: 50%; }
.xgo-minicart ul.cart_list a.remove:hover { background: var(--sale); color: #fff !important; }
.xgo-minicart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0; padding-top: 10px; font-size: .95rem; }
.xgo-minicart .woocommerce-mini-cart__total strong { color: var(--navy); }
.xgo-minicart .woocommerce-mini-cart__total .amount { color: var(--sale); font-weight: 800; font-size: 1.05rem; }
.xgo-minicart .woocommerce-mini-cart__buttons { display: flex; gap: 8px; margin: 0; }
.xgo-minicart .woocommerce-mini-cart__buttons a { flex: 1; text-align: center; margin: 0; padding: 10px; border-radius: var(--r-sm);
  font-size: .85rem; font-weight: 700; text-decoration: none; }
.xgo-minicart .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
.xgo-minicart .woocommerce-mini-cart__buttons a.checkout { background: var(--blue); color: #fff; border: 1.5px solid var(--blue); }

.nav-toggle { display: none; background: rgba(255,255,255,.18); border: 0; width: 42px; height: 42px; border-radius: var(--r); cursor: pointer; }

/* ============================================================
   CATEGORY BAR
   ============================================================ */
.cat-bar { background: #8a1420; border-bottom: 1px solid rgba(255,255,255,.12); position: sticky; top: 70px; z-index: 55; }
.cat-bar .container { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.cat-all { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.18); color: #fff; font-weight: 700; padding: 9px 16px; border-radius: var(--r-pill); flex: none; }
.cat-all:hover { background: rgba(255,255,255,.28); }
.cat-bar nav { display: flex; gap: 4px; }
.cat-bar nav a { padding: 8px 13px; border-radius: var(--r-sm); font-weight: 600; color: rgba(255,255,255,.94); font-size: .9rem; white-space: nowrap; }
.cat-bar nav a:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Dropdown "Góc sức khỏe" trong cat-bar (header chrome — luôn hiển thị) */
.health-nav { position: relative; flex: none; }
.health-nav__toggle { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .9rem; color: rgba(255,255,255,.94); white-space: nowrap; }
.health-nav__toggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.health-nav__toggle .chev { transition: transform .2s; }
.health-nav:hover .health-nav__toggle .chev, .health-nav:focus-within .health-nav__toggle .chev { transform: rotate(180deg); }
.health-nav__menu { position: absolute; top: 100%; left: 0; min-width: 232px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; z-index: 70; }
.health-nav:hover .health-nav__menu, .health-nav:focus-within .health-nav__menu { opacity: 1; visibility: visible; transform: none; }
.health-nav__menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink); font-size: .9rem; font-weight: 500; }
.health-nav__menu a:hover { background: var(--bg-soft); color: var(--blue); }
.health-nav__menu a svg { color: var(--blue); flex: none; }
.health-nav__all { font-weight: 700 !important; color: var(--blue) !important; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 11px !important; border-radius: 0 !important; }
@media (max-width: 860px) { .health-nav { display: none; } }

/* ============================================================
   QUICK ACTION TILES
   ============================================================ */
.quick { background: #fff; }
.quick-grid { grid-template-columns: repeat(5, 1fr); padding: 18px 0; }
.quick-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 12px 6px; border-radius: var(--r); transition: background .15s; }
.quick-tile:hover { background: var(--bg-soft); }
.quick-tile .ic { width: 52px; height: 52px; border-radius: var(--r-pill); background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; }
.quick-tile span { font-size: .82rem; font-weight: 600; color: var(--navy); line-height: 1.25; }

/* ============================================================
   HERO BANNERS
   ============================================================ */
.hero-wrap { padding: 16px 0; }
.hero-grid { display: grid; grid-template-columns: 2.2fr 1fr; gap: 16px; }
.banner { border-radius: var(--r-lg); min-height: 300px; padding: 34px; display: flex; flex-direction: column; justify-content: center; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.banner--main { background: linear-gradient(120deg, #2C3E6B 0%, #1C6DD0 60%, #4FC3F7 130%); }
.banner--main h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); max-width: 60%; }
.banner--main p { color: rgba(255,255,255,.92); max-width: 55%; }
.banner__side { min-height: 142px; padding: 22px; }
.banner--s1 { background: linear-gradient(120deg, #16A34A, #4FC3F7); }
.banner--s2 { background: linear-gradient(120deg, #F6A609, #EE4D2D); }
.banner small { opacity: .9; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .72rem; }
.banner h3 { color: #fff; margin: 6px 0; }
.banner .tag-demo { position: absolute; top: 12px; right: 14px; font-size: .66rem; background: rgba(255,255,255,.25); padding: 3px 9px; border-radius: var(--r-pill); font-weight: 700; }
.side-stack { display: grid; gap: 16px; }

/* ============================================================
   HOME STAGE — hero carousel + promo carousel, tông nền đổi theo slide
   ============================================================ */
/* Nền tổng đầu trang lấy từ ảnh panner 1 (kiểu Long Châu) — màu sáng, mờ dần xuống trắng */
.home-stage { background-color: #6f1116;
  background-image: url("../images/banners/stage-bg.webp?v=tt2026b");
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  padding: 30px 0 40px; position: relative; overflow: hidden; }
/* Đáy vùng banner: mờ dần xuống nền trắng của trang (không cắt ngang) */
.home-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 230px;
  background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; z-index: 0; }
.home-stage .container { position: relative; z-index: 1; }
.home-stage .banner--main { box-shadow: var(--shadow); }

/* Banner chính: chữ tự đổi liên tục (cross-fade) */
.banner--main .hero-slides { display: grid; }
.banner--main .hero-text { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s; pointer-events: none; }
.banner--main .hero-text.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.banner--main .hero-text small { opacity: .92; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .72rem; }
.banner--main .hero-text h2 { color: #fff; font-size: clamp(1.5rem, 2.7vw, 2.15rem); line-height: 1.2; margin: 10px 0; max-width: 100%; }
.banner--main .hero-text p { color: rgba(255,255,255,.93); margin: 0 0 18px; max-width: 92%; }
.banner--main .hero-text .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.75); align-self: flex-start; }
.banner--main .hero-text .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

.car { position: relative; }
.car__track { position: relative; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--r-lg); }
.car__track::-webkit-scrollbar { display: none; }
.car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px;
  border-radius: var(--r-pill); border: 0; background: rgba(255,255,255,.92); color: var(--navy);
  box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.car-arrow:hover { background: #fff; }
.car-arrow--prev { left: 12px; }
.car-arrow--next { right: 12px; }
.car-dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.car-dots button { width: 8px; height: 8px; border-radius: var(--r-pill); border: 0; background: rgba(255,255,255,.55);
  cursor: pointer; padding: 0; transition: width .2s, background .2s; }
.car-dots button.is-active { width: 22px; background: #fff; }

.hero-slide { flex: 0 0 100%; scroll-snap-align: start; min-height: 300px; border-radius: var(--r-lg);
  padding: 38px 44px; color: #fff; background: var(--slide-bg); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 20px; box-shadow: var(--shadow-sm); }
.hero-slide small { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; opacity: .92; }
.hero-slide h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 10px 0; line-height: 1.2; }
.hero-slide p { font-size: .98rem; opacity: .95; max-width: 470px; margin: 0; }
.hero-slide__img { display: grid; place-items: center; }
.hero-slide__img img { max-height: 220px; width: auto; filter: drop-shadow(0 12px 26px rgba(0,0,0,.24)); }
.hero-slide .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.75); margin-top: 18px; }
.hero-slide .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

.promo-card { flex: 0 0 min(440px, 82%); scroll-snap-align: start; min-height: 132px; border-radius: var(--r-lg);
  padding: 22px 26px; color: #fff; background: var(--card-bg); display: flex; flex-direction: column;
  justify-content: center; box-shadow: var(--shadow-sm); }
.promo-card small { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; opacity: .9; }
.promo-card b { font-size: 1.22rem; margin: 4px 0 2px; }
.promo-card span { font-size: .85rem; opacity: .93; }

/* Zone 2 — hàng banner thứ 2: trái lướt được + phải 2 banner xếp chồng */
.promo-row { display: grid; grid-template-columns: 1.85fr 1fr; gap: 16px; margin-top: 16px; align-items: stretch; }
.promo-row .car, .promo-row .car__track { height: 100%; }
.pslide { flex: 0 0 100%; scroll-snap-align: start; min-height: 176px; border-radius: var(--r-lg);
  padding: 26px 32px; color: #fff; background: var(--slide-bg); display: flex; flex-direction: column;
  justify-content: center; box-shadow: var(--shadow-sm); }
.pslide small { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 700; opacity: .9; }
.pslide h3 { color: #fff; font-size: clamp(1.2rem, 2.1vw, 1.65rem); margin: 6px 0 8px; line-height: 1.2; }
.pslide p { color: rgba(255,255,255,.92); margin: 0 0 14px; font-size: .9rem; max-width: 84%; }
.pslide .btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.72); align-self: flex-start; }
.pslide .btn-ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
.promo-aside { display: grid; gap: 16px; }
.promo-aside .banner__side { min-height: 80px; padding: 18px 22px; text-decoration: none; justify-content: center;
  transition: transform .15s, box-shadow .15s; }
.promo-aside .banner__side:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.promo-aside .banner__side h3 { margin: 4px 0 0; font-size: 1.05rem; }
/* Chấm panner 2 nằm ở vùng nền đã mờ xuống trắng → dùng màu navy cho rõ */
.promo-row .car-dots button { background: rgba(44,62,107,.4); }
.promo-row .car-dots button.is-active { background: var(--navy); }
.banner--a1 { background: linear-gradient(120deg, #6A4FD0, #4FC3F7); }
.banner--a2 { background: linear-gradient(120deg, #1C6DD0, #16A34A); }

/* Banner ảnh thiết kế sẵn (chữ in trong ảnh): hiển thị trọn ảnh, không bo méo, không crop */
.hero-car .hero-slide--img { padding: 0; min-height: 0; display: block; background: none; box-shadow: var(--shadow); }
.hero-car .hero-slide--img a { display: block; line-height: 0; }
.hero-car .hero-slide--img img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

.promo-row .pslide--img { padding: 0; min-height: 0; display: block; background: none; box-shadow: var(--shadow-sm); }
.promo-row .pslide--img a { display: block; line-height: 0; height: 100%; }
.promo-row .pslide--img img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }

/* 2 banner phải xếp chồng — giãn đều để canh chiều cao với banner trái */
/* Cột phải khít chiều cao với banner trái (tỉ lệ cột 1.85/1) → 2 banner xếp sát, gap đều, hết khoảng trống giữa */
.promo-aside { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; }
.promo-aside .banner__side--img { min-height: 0; padding: 0; display: block; line-height: 0;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s; }
.promo-aside .banner__side--img:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.promo-aside .banner__side--img img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  .hero-slide { grid-template-columns: 1fr; min-height: auto; padding: 26px 22px; }
  .hero-slide__img { display: none; }
  .car-arrow { width: 34px; height: 34px; }
}

/* ============================================================
   SERVICE / TRUST STRIP
   ============================================================ */
.service-strip { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display: grid; grid-template-columns: repeat(4, 1fr); }
.service-strip .item { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-right: 1px solid var(--line); }
.service-strip .item:last-child { border-right: 0; }
.service-strip .ic { width: 42px; height: 42px; border-radius: var(--r-pill); background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; flex: none; }
.service-strip b { display: block; color: var(--navy); font-size: .92rem; }
.service-strip span { color: var(--muted); font-size: .8rem; }

/* ============================================================
   SECTION CARD (white block w/ header + "Xem tất cả")
   ============================================================ */
.block { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.block--sale { background: linear-gradient(180deg, #FFF3EF, #fff 60%); }
.block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.block__title { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; font-weight: 800; color: var(--navy); margin: 0; }
.block__title .flash { color: var(--sale); }
.see-all { color: var(--blue); font-weight: 700; font-size: .88rem; white-space: nowrap; }

/* ============================================================
   PRODUCT CAROUSEL / CARDS (commerce)
   ============================================================ */
.prod-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.prod-rail.is-grid { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; overflow: visible; }
/* Dải cuộn ngang: ẩn thanh kéo (thay bằng nút ‹ ›), nhưng vẫn vuốt được trên mobile */
.prod-rail:not(.is-grid) { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; padding-bottom: 2px; }
.prod-rail:not(.is-grid)::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Bọc dải + nút điều hướng tròn hai bên */
.rail-wrap { position: relative; }
.rail-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--navy); display: grid; place-items: center; padding: 0;
  cursor: pointer; box-shadow: 0 6px 18px rgba(13, 43, 82, .16); transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease; }
.rail-nav:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.rail-nav svg { display: block; width: 22px; height: 22px; }
.rail-nav--prev { left: 2px; }
.rail-nav--next { right: 2px; }
.rail-nav.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.rail-wrap--static .rail-nav { display: none; }
/* position:relative chứa các <span.screen-reader-text> (position:absolute của WooCommerce trên
   nút add-to-cart) trong thẻ card + clip bởi overflow:hidden; nếu không, ở rail cuộn ngang chúng
   thoát ra ngoài (không có ancestor định vị) và nới rộng cả trang → sinh thanh cuộn ngang thừa. */
.pcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start; transition: box-shadow .2s, transform .15s; }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.pcard__media { position: relative; aspect-ratio: 1/1; background: #fff; display: flex; align-items: center; justify-content: center; padding: 14px; }
.pcard__media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__disc { position: absolute; top: 8px; right: 8px; background: var(--sale); color: #fff; font-weight: 800; font-size: .76rem; padding: 3px 8px; border-radius: var(--r-pill); }
.pcard__flag { position: absolute; top: 8px; left: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; color: var(--green); padding: 3px 9px; }
.pcard__body { padding: 4px 14px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
/* -webkit-line-clamp phải đặt trên <a> con, KHÔNG đặt trên .pcard__name: h3 là flex-item của
   .pcard__body nên Chrome blockify display:-webkit-box -> flow-root, line-clamp hỏng nửa vời
   (box cao ~2,7 dòng -> lòi 1 dòng thứ 3 bị cắt ngang phía trên giá = "vướng"). <a> con là block-level
   con của h3 (không phải flex-item) nên -webkit-box giữ hiệu lực -> clamp đúng 2 dòng + có dấu "…". */
.pcard__name { font-size: .95rem; font-weight: 700; color: var(--navy); margin: 0; line-height: 1.4; min-height: 2.8em; }
.pcard__name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit; }
.pcard__unit { display: inline-flex; align-self: flex-start; background: var(--bg-soft); color: var(--muted); font-size: .72rem; padding: 2px 9px; border-radius: var(--r-pill); }
/* Sao đánh giá (SVG tự vẽ): lớp sao xám nền + lớp sao vàng phủ theo % trung bình. */
.pcard__rating { display: flex; align-items: center; gap: 6px; margin: -2px 0 1px; line-height: 1; }
.xgo-stars { position: relative; display: inline-block; white-space: nowrap; line-height: 0; }
.xgo-stars__empty { color: #dce1ea; }
.xgo-stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5a623; }
.xgo-stars svg { width: 14px; height: 14px; display: inline-block; vertical-align: top; }
.xgo-stars__count { font-size: .76rem; color: var(--muted); font-weight: 600; }
.pcard__rating.is-empty .xgo-stars__empty { color: #e7ebf1; }
.rating--svg { display: inline-flex; gap: 1px; color: #f5a623; line-height: 0; vertical-align: middle; }
.rating--svg svg { width: 15px; height: 15px; }
.pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pcard__price .now { color: var(--sale); font-weight: 800; font-size: 1.08rem; }
.pcard__price .now--blue { color: var(--blue); }
.pcard__price .old { color: var(--muted); text-decoration: line-through; font-size: .82rem; }
.pcard__price .ask { color: var(--blue); font-weight: 700; }
/* Giá THẬT của WooCommerce (SP biến thể đã ép về 1 giá): del=giá gốc gạch, ins=giá sale, .price-off=badge % */
.pcard__price > .woocommerce-Price-amount { color: var(--navy); font-weight: 800; font-size: 1.05rem; }
.pcard__price del { color: var(--muted); font-weight: 500; font-size: .82rem; opacity: .9; }
.pcard__price ins .woocommerce-Price-amount { color: var(--sale); font-weight: 800; font-size: 1.05rem; }
.price ins { text-decoration: none; background: none; }
.price-off { display: inline-block; color: #fff; background: var(--sale); font-weight: 700; font-size: .72rem; line-height: 1.4; padding: 1px 7px; border-radius: var(--r-sm); vertical-align: middle; }
.pcard__price .price-off { font-size: .68rem; }
/* Hàng nút thẻ sản phẩm (trang chủ): "Xem chi tiết" (viền) + "Thêm vào giỏ hàng" (xanh, icon giỏ) */
.pcard__actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.pcard__actions .btn, .pcard__actions .button { width: 100%; margin: 0; white-space: nowrap; }
.pcard__detail { padding: 6px 10px; font-size: .8rem; border-radius: 12px; }
.pcard__actions .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--blue); color: #fff; border: 1.5px solid var(--blue); border-radius: 12px;
  padding: 7px 10px; font-weight: 700; font-size: .8rem; font-family: inherit; line-height: 1.2; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s; }
.pcard__actions .button:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.pcard__actions .button::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") center/contain no-repeat; }
.pcard__actions .added_to_cart { width: 100%; text-align: center; font-size: .78rem; font-weight: 600; color: var(--blue); padding: 2px; }
.demo-note { font-size: .68rem; color: var(--muted); font-style: italic; }
.ph-img { width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; color: var(--muted); font-size: .78rem; font-weight: 600; background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 10px, var(--bg-soft-2) 10px, var(--bg-soft-2) 20px); }

/* ============================================================
   FEATURED CATEGORIES (tiles with count)
   ============================================================ */
.featcat-grid { grid-template-columns: repeat(6, 1fr); }
.featcat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 18px 12px; text-align: center; transition: transform .15s, box-shadow .2s, border-color .2s; }
.featcat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky); }
.featcat .ic { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: var(--r-pill); background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; }
.featcat b { display: block; font-size: .88rem; color: var(--navy); }
.featcat span { font-size: .76rem; color: var(--muted); }

/* ============================================================
   BRAND SPOTLIGHT (Hikobaby)
   ============================================================ */
.spotlight { background: linear-gradient(120deg, #EAF4FB, #fff); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; box-shadow: var(--shadow-sm); }
.spotlight__media { padding: 24px; display: grid; place-items: center; }
.spotlight__media img { max-height: 320px; }
.spotlight__copy { padding: 34px 38px 34px 6px; }
.spotlight__copy .logo-mini { height: 30px; margin-bottom: 12px; }
.usp-list { display: grid; gap: 10px; margin: 14px 0 20px; }
.usp-item { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.usp-item svg { color: var(--green); flex: none; margin-top: 3px; }

/* ============================================================
   FOOTER (multi-column)
   ============================================================ */
.foot-top { background: #fff; border-top: 1px solid var(--line); }
.foot-top .container { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 28px; padding: 40px 0; }
.foot-top h4 { color: var(--navy); font-size: .98rem; margin-bottom: 14px; }
.foot-top li { margin-bottom: 8px; font-size: .86rem; color: var(--muted); }
.foot-top a:hover { color: var(--blue); }
.foot-top .brand-foot img { height: 64px; width: auto; margin-bottom: 12px; }
.badges { display: flex; flex-direction: column; gap: 8px; }
.app-btn { color: #fff; border-radius: var(--r-pill); height: 42px; width: 100%; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; font-size: .84rem; font-weight: 700; transition: all .2s ease; box-shadow: var(--shadow-sm); border: 0; text-decoration: none; }
.app-btn:hover { transform: translateY(-2px); color: #fff; }
.app-btn--fb { background: linear-gradient(135deg, #1877F2, #0B61D6); }
.app-btn--fb:hover { background: linear-gradient(135deg, #166FE5, #084EB8); box-shadow: 0 4px 14px rgba(24,119,242,.4); }
.app-btn--shopee { background: linear-gradient(135deg, #FF5722, #EE4D2D); }
.app-btn--shopee:hover { background: linear-gradient(135deg, #F4511E, #D7381B); box-shadow: 0 4px 14px rgba(238,77,45,.4); }
.app-btn--tiktok { background: linear-gradient(135deg, #161823, #2B2D3C); }
.app-btn--tiktok:hover { background: linear-gradient(135deg, #25F4EE, #FE2C55); color: #000; font-weight: 800; box-shadow: 0 4px 14px rgba(37,244,238,.4); }
.app-btn--tiktok:hover svg path { fill: #000 !important; }
.app-btn svg { flex: none; }
.foot-bottom { background: var(--navy); color: #aebfdb; }
.foot-bottom .container { padding: 18px 0; font-size: .82rem; display: flex; justify-content: center; align-items: center; gap: 8px 20px; flex-wrap: wrap; text-align: center; }
.foot-bottom b { color: #fff; }
.todo { color: var(--amber); font-style: italic; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .featcat-grid { grid-template-columns: repeat(3, 1fr); }
  .prod-rail.is-grid { grid-template-columns: repeat(3, 1fr); }
  .foot-top .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .header-main { flex-wrap: wrap; }
  form.search { order: 3; max-width: none; flex-basis: 100%; }
  .h-action { padding: 4px; }
  .h-action .h-txt { display: none; }
  .xgo-minicart { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .promo-row { grid-template-columns: 1fr; }
  .banner--main h2, .banner--main p { max-width: 100%; }
  .service-strip { grid-template-columns: repeat(2, 1fr); }
  .service-strip .item:nth-child(2) { border-right: 0; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight__copy { padding: 6px 28px 30px; }
}
@media (max-width: 560px) {
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .featcat-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-rail.is-grid { grid-template-columns: repeat(2, 1fr); }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .service-strip { grid-template-columns: 1fr; }
  .service-strip .item { border-right: 0; border-bottom: 1px solid var(--line); }
  .foot-top .container { grid-template-columns: 1fr; }
  .nav-toggle { display: inline-grid; place-items: center; }
}

/* ============================================================
   GỢI Ý TÌM KIẾM (live search) · NÚT LIÊN HỆ NỔI · LÊN ĐẦU TRANG
   ============================================================ */
form.search { position: relative; }
.xgo-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  max-height: 70vh; overflow-y: auto; padding: 6px; }
.xgo-suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); color: var(--navy); }
.xgo-suggest__item:hover { background: var(--bg-soft, #f2f6fb); }
.xgo-suggest__item img { width: 46px; height: 46px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; flex: none; }
.xgo-suggest__txt { display: flex; flex-direction: column; line-height: 1.3; }
.xgo-suggest__txt b { font-size: .9rem; font-weight: 600; }
.xgo-suggest__txt i { font-style: normal; color: var(--sale); font-weight: 700; font-size: .85rem; }
.xgo-suggest__empty { padding: 14px; text-align: center; color: var(--muted); font-size: .9rem; }

.xgo-float { position: fixed; right: 16px; bottom: 16px; z-index: 95; display: flex; flex-direction: column; gap: 12px; }
.xgo-float__btn { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); color: #fff; }
.xgo-float--zalo { background: #0068ff; }
.xgo-float--mess { background: linear-gradient(135deg, #00b2ff, #006aff); }
.xgo-float--call { background: var(--green); }
.xgo-float__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 currentColor;
  animation: xgoPulse 1.8s infinite; opacity: .5; }
.xgo-float--zalo .xgo-float__ring { color: #0068ff; }
.xgo-float--mess .xgo-float__ring { color: #0084ff; }
.xgo-float--call .xgo-float__ring { color: var(--green); }
@keyframes xgoPulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.xgo-backtop { position: fixed; right: 16px; bottom: 210px; z-index: 95; width: 44px; height: 44px; border: 0;
  border-radius: 12px; background: var(--navy); color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.xgo-backtop[hidden] { display: none; }
.xgo-backtop:hover { background: var(--blue); }
@media (max-width: 860px) {
  .xgo-float { bottom: 74px; }   /* tránh đè thanh "Mua ngay" sticky (thanh ATC hiện ở ≤860px) */
  .xgo-backtop { bottom: 264px; }
}

/* ============================================================
   POPUP ĐĂNG NHẬP
   ============================================================ */
.xgo-modal[hidden] { display: none; }
.xgo-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
.xgo-modal__overlay { position: absolute; inset: 0; background: rgba(20,32,64,.55); }
.xgo-modal__box { position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(0,0,0,.32); padding: 30px 28px; }
.xgo-modal__close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: transparent; display: grid; place-items: center; line-height: 0; color: var(--muted); cursor: pointer; border-radius: 50%; transition: background .15s, color .15s; }
.xgo-modal__close:hover { background: var(--bg-soft); }
.xgo-modal__title { text-align: center; color: var(--navy); margin: 0 0 4px; }
.xgo-modal__sub { text-align: center; color: var(--muted); font-size: .9rem; margin: 0 0 18px; }
.xgo-modal__perks-wrap { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; margin-bottom: 20px; text-align: center; }
.xgo-modal__perks-head { font-size: .72rem; font-weight: 800; color: var(--blue); letter-spacing: .05em; margin-bottom: 10px; }
.xgo-modal__perks { display: flex; justify-content: center; gap: 10px; }
.xgo-modal__perks .p { flex: 1; text-align: center; font-size: .72rem; color: var(--muted); line-height: 1.25; display: flex; flex-direction: column; align-items: center; }
.xgo-modal__perks .p b { display: block; color: var(--navy); font-size: .78rem; font-weight: 700; margin-top: 4px; }
.xgo-modal__perks .p small { display: block; font-size: .68rem; opacity: .85; }
.xgo-modal__perks .ic { width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.xgo-modal__box form.login { border: 0; padding: 0; margin: 0; }
.xgo-modal__box .form-row { display: block; width: 100%; float: none; margin: 0 0 12px; }
.xgo-modal__box .form-row-first, .xgo-modal__box .form-row-last { width: 100% !important; float: none !important; }
.xgo-modal__box .clear { clear: both; }
.xgo-modal__box .xgo-auth-view[hidden] { display: none; }
.xgo-modal__box label { display: block; margin-bottom: 5px; font-size: .85rem; color: var(--navy); font-weight: 600; }
.xgo-modal__box input[type="text"], .xgo-modal__box input[type="email"], .xgo-modal__box input[type="password"] { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; font-family: inherit; font-size: .95rem; }
.xgo-modal__box .woocommerce-form-login__submit, .xgo-modal__box button[type="submit"] { width: 100%; background: var(--blue); color: #fff; border: 0; border-radius: var(--r-sm); padding: 13px; font-weight: 700; font-size: .98rem; cursor: pointer; margin-top: 6px; font-family: inherit; }
.xgo-modal__box .woocommerce-form-login__submit:hover, .xgo-modal__box button[type="submit"]:hover { background: var(--blue-dark); }
.xgo-modal__box .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); margin: 8px 0; }
.xgo-modal__box .lost_password { text-align: center; margin-top: 12px; font-size: .85rem; }
.xgo-modal__box .lost_password a { color: var(--blue); }
.xgo-modal__alt { text-align: center; margin-top: 14px; font-size: .9rem; color: var(--muted); }
.xgo-modal__alt a { color: var(--blue); font-weight: 700; }
body.xgo-modal-open { overflow: hidden; }

/* ============================================================
   INNER PAGES — components
   ============================================================ */
/* nền trắng cho ảnh sản phẩm (ảnh đã tách nền trong suốt) */
.pcard__media, .spotlight__media, .gallery-main, .thumb, .pdp-mini img { background: #fff; }
.pcard__media img { mix-blend-mode: normal; }

/* breadcrumb */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--line); }
.breadcrumb .container { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; font-size: .84rem; color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep { color: var(--line); }
.breadcrumb b { color: var(--navy); font-weight: 600; }

/* page head band */
.page-head { background: linear-gradient(120deg, #EAF4FB, #fff); border-bottom: 1px solid var(--line); }
.page-head .container { padding: 26px 0; }
.page-head h1 { margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.page-head p { margin: 0; color: var(--muted); max-width: 900px; text-wrap: balance; word-break: keep-all; }

/* 2-col layout (shop) */
.layout-2col { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.filter { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; position: sticky; top: 120px; }
.filter h4 { font-size: .92rem; margin: 14px 0 8px; color: var(--navy); }
.filter h4:first-child { margin-top: 0; }
.filter label { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink); padding: 4px 0; cursor: pointer; }
.filter .price-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.filter .price-tags span { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px 11px; font-size: .78rem; cursor: pointer; }
.filter .price-tags span:hover { border-color: var(--blue); color: var(--blue); }
.toolbar { background: #fff; border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .sorts { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar .sorts a { font-size: .82rem; padding: 6px 12px; border-radius: var(--r-pill); background: var(--bg-soft); color: var(--ink); font-weight: 600; }
.toolbar .sorts a.active, .toolbar .sorts a:hover { background: var(--blue); color: #fff; }
.shop-grid { grid-template-columns: repeat(4, 1fr); }
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); font-weight: 600; font-size: .86rem; }
.pager a.active, .pager a:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* PDP — product detail */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.pdp__gallery { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px; position: sticky; top: 120px; }
.gallery-main { border-radius: var(--r); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb { width: 68px; height: 68px; border: 1.5px solid var(--line); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; padding: 6px; cursor: pointer; }
.thumb.active, .thumb:hover { border-color: var(--blue); }
.thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp__buy { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.pdp__buy h1 { font-size: 1.45rem; margin-bottom: 8px; }
.pdp-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.price-big { background: var(--bg-soft); border-radius: var(--r); padding: 16px 18px; margin: 14px 0; }
.price-big .now { color: var(--sale); font-weight: 800; font-size: 1.7rem; }
.price-big .ask { color: var(--blue); font-weight: 800; font-size: 1.4rem; }
.price-big .note { color: var(--muted); font-size: .82rem; }
.pdp-attr { display: grid; gap: 8px; margin: 14px 0; font-size: .9rem; }
.pdp-attr div { display: flex; gap: 8px; }
.pdp-attr b { color: var(--navy); min-width: 110px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; margin: 6px 0 16px; }
.qty button { width: 38px; height: 40px; border: 0; background: var(--bg-soft); font-size: 1.1rem; cursor: pointer; }
.qty input { width: 48px; height: 40px; border: 0; text-align: center; font-family: inherit; font-size: 1rem; }
.pdp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-cta .btn { flex: 1; min-width: 150px; }
.pdp-trust { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .86rem; }
.pdp-trust div { display: flex; gap: 9px; align-items: center; }
.pdp-trust svg { color: var(--green); flex: none; }

/* PDP content tabs/sections */
.pdp-section { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px; margin-top: 18px; }
.pdp-section h2 { font-size: 1.2rem; border-left: 4px solid var(--blue); padding-left: 12px; }
.spec-table, .compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.spec-table td:first-child { color: var(--muted); width: 38%; }
.spec-table tr:nth-child(even) { background: var(--bg-soft); }
.compare-table th, .compare-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: center; }
.compare-table th { background: var(--navy); color: #fff; font-weight: 600; }
.compare-table th.hi, .compare-table td.hi { background: var(--bg-soft-2); color: var(--navy); font-weight: 700; }
.steps { display: grid; gap: 12px; counter-reset: s; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step .n { flex: none; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; }

/* cert grid */
.cert-grid { grid-template-columns: repeat(3, 1fr); }
.cert-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.cert-card .scan { aspect-ratio: 4/3; background: repeating-linear-gradient(45deg, var(--bg-soft), var(--bg-soft) 12px, var(--bg-soft-2) 12px, var(--bg-soft-2) 24px); display: grid; place-items: center; color: var(--muted); font-weight: 600; font-size: .82rem; text-align: center; padding: 14px; }
.cert-card .info { padding: 16px 18px; }
.cert-card .info b { color: var(--navy); display: block; margin-bottom: 4px; }
.cert-card .info span { color: var(--muted); font-size: .85rem; }

/* values grid */
.values-grid { grid-template-columns: repeat(5, 1fr); }
.value-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm); }
.value-card .ic { width: 50px; height: 50px; margin: 0 auto 12px; border-radius: var(--r-pill); background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; }
.value-card b { color: var(--navy); display: block; margin-bottom: 4px; }
.value-card span { color: var(--muted); font-size: .82rem; }
.stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 16px 22px; box-shadow: var(--shadow-sm); }
.stat b { display: block; font-size: 1.7rem; color: var(--blue); line-height: 1; }
.stat span { color: var(--muted); font-size: .82rem; }

/* story / prose */
.prose { max-width: 860px; text-wrap: balance; }
.prose p { color: var(--ink); word-break: keep-all; }
.prose .lead { font-size: 1.05rem; color: var(--navy); font-weight: 500; }

/* distribution table + map */
.dist-2col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
.dist-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); font-size: .9rem; }
.dist-table th { background: var(--navy); color: #fff; text-align: left; padding: 12px 14px; }
.dist-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.dist-table tr:nth-child(even) td { background: var(--bg-soft); }
.map-ph { background: var(--bg-soft); border: 1px dashed var(--sky); border-radius: var(--r-lg); aspect-ratio: 3/4; display: grid; place-items: center; color: var(--muted); font-weight: 600; text-align: center; padding: 20px; position: sticky; top: 120px; }

/* forms */
.form-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .86rem; font-weight: 600; color: var(--navy); }
.field input, .field select, .field textarea { font-family: inherit; font-size: .92rem; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); background: #fff; }
.contact-2col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
.info-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px; }
.info-card li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.info-card li:last-child { border-bottom: 0; }

/* comparison forms table (đại lý) */
.benefit-grid { grid-template-columns: repeat(3, 1fr); }
.benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.benefit .ic { width: 46px; height: 46px; border-radius: var(--r); background: var(--bg-soft-2); color: var(--blue); display: grid; place-items: center; margin-bottom: 12px; }
.benefit b { color: var(--navy); display: block; margin-bottom: 4px; }
.benefit span { color: var(--muted); font-size: .9rem; }

@media (max-width: 960px) {
  .layout-2col { grid-template-columns: 1fr; }
  .filter { position: static; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery, .map-ph { position: static; }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-grid, .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .dist-2col, .contact-2col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid, .cert-grid, .benefit-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .pdp-cta .btn { min-width: 100%; }
}

/* ============================================================
   BẢN ĐỒ ĐIỂM BÁN (Vietnam map) — tái sử dụng SVG @svg-maps/vietnam
   ============================================================ */
.map-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.map-svg-container { position: relative; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 16px; }
.map-svg-container svg { width: 100%; height: auto; display: block; }
.map-svg-container svg path { fill: #cfe3f3; stroke: #fff; stroke-width: .8; transition: fill .2s; }
.map-svg-container svg path:hover { fill: #a9d2ef; }
.map-pin { cursor: pointer; }
.pin-pulse { fill: var(--sale); transform-box: fill-box; transform-origin: center; animation: pinpulse 1.8s ease-out infinite; }
.pin-dot { fill: var(--sale); stroke: #fff; stroke-width: 2; }
.map-pin:hover .pin-dot, .map-pin.active .pin-dot { fill: var(--navy); }
@keyframes pinpulse { 0% { transform: scale(.4); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
.map-tooltip { position: absolute; background: var(--navy); color: #fff; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 600; white-space: nowrap; pointer-events: none; transform: translate(-50%, -100%) scale(.9); transition: opacity .15s, transform .15s; z-index: 5; }
.map-legend { margin-top: 8px; font-size: .82rem; color: var(--muted); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--sale); margin-right: 5px; vertical-align: middle; }
.pos-panel { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px; }
.pos-regions-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.region-chip { border: 1px solid var(--line); background: var(--bg-soft); color: var(--ink); border-radius: var(--r-pill); padding: 7px 16px; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; }
.region-chip.active, .region-chip:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.pos-list-container { display: grid; gap: 12px; max-height: 540px; overflow-y: auto; padding-right: 6px; }
.pos-item-card { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; transition: border-color .2s, box-shadow .2s; }
.pos-item-card.highlighted { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(28, 109, 208, .15); }
.pos-prov-badge { display: inline-block; background: var(--bg-soft-2); color: var(--navy); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 6px; }
.pos-item-card h4 { margin: 4px 0; font-size: .98rem; color: var(--navy); }
.pos-addr { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }
.verified-tag { color: var(--green); font-size: .8rem; font-weight: 700; }

/* Ô hiển thị điểm bán + khu vực BÊN DƯỚI bản đồ (cập nhật khi hover/click ghim) */
.map-selected { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 14px 16px; min-height: 64px; }
.map-selected.is-active { border-color: var(--blue); }
.map-selected__hint { color: var(--muted); font-size: .88rem; }
.map-selected__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.map-selected__region { background: var(--blue); color: #fff; font-size: .74rem; font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill); }
.map-selected__prov { color: var(--navy); font-size: 1.05rem; }
.map-selected__count { color: var(--muted); font-size: .82rem; margin-left: auto; }
.map-selected__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-selected__list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; background: var(--bg-soft); border-radius: var(--r); }
.map-selected__list li b { color: var(--navy); font-size: .92rem; }
.map-selected__list li span { color: var(--muted); font-size: .83rem; }

@media (max-width: 960px) { .map-layout { grid-template-columns: 1fr; } }

/* Accordion điểm bán theo sản phẩm */
.dist-products { display: grid; gap: 14px; }
.dist-item { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color .2s; }
.dist-item.is-open { border-color: var(--blue); }
.dist-prod { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: transparent; padding: 16px 18px; cursor: pointer; font-family: inherit; text-align: left; }
.dist-prod:hover:not(.is-disabled) { background: var(--bg-soft); }
.dist-link { text-decoration: none; color: inherit; }
.dist-link:hover .dist-prod__chevron { transform: translateX(3px); }
.dist-prod__icon { width: 50px; height: 50px; border-radius: var(--r); background: var(--bg-soft); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--blue); font-size: 1.6rem; font-weight: 700; }
.dist-prod__icon img { max-height: 100%; width: auto; }
.dist-prod__info { flex: 1; }
.dist-prod__info b { display: block; color: var(--navy); font-size: 1.04rem; }
.dist-prod__info span { color: var(--muted); font-size: .85rem; }
.dist-prod__chevron { color: var(--blue); font-size: 1.1rem; transition: transform .25s; }
.dist-item.is-open .dist-prod__chevron { transform: rotate(180deg); }
.dist-prod.is-disabled { opacity: .55; cursor: not-allowed; }
.dist-panel { display: none; padding: 0 16px 16px; }
.dist-item.is-open .dist-panel { display: block; }

/* ============================================================
   MEGA-MENU danh mục (kiểu Long Châu)
   ============================================================ */
.cat-mega { position: relative; }
.mega { position: absolute; top: 100%; left: 0; width: 820px; max-width: 92vw; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 240px 1fr; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s; z-index: 70; }
.cat-mega:hover .mega, .cat-mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-side { background: var(--bg-soft); padding: 10px; border-right: 1px solid var(--line); }
.mega-cat { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); color: var(--navy); font-weight: 600; font-size: .9rem; }
.mega-cat span { margin-left: auto; color: var(--muted); }
.mega-cat.active, .mega-cat:hover { background: #fff; color: var(--blue); box-shadow: var(--shadow-sm); }
.mega-cat.active span, .mega-cat:hover span { color: var(--blue); }
.mega-body { padding: 18px 20px; }
.mega-pane { display: none; }
.mega-pane.active { display: block; }
.mega-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.mega-tile { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font-weight: 600; color: var(--navy); font-size: .88rem; }
.mega-tile:hover { border-color: var(--blue); color: var(--blue); }
.mega-feat__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.mega-feat__head a { color: var(--blue); font-size: .82rem; font-weight: 700; }
.mega-feat__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mega-prod { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.mega-prod:hover { border-color: var(--blue); }
.mega-prod__img { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: var(--r-sm); background: #fff; display: grid; place-items: center; overflow: hidden; }
.mega-prod__img img { max-height: 100%; width: auto; }
.mega-prod__name { grid-column: 2; font-size: .82rem; color: var(--navy); font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-prod b { grid-column: 2; color: var(--blue); font-size: .8rem; margin-top: 2px; }
.mega-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.mega-empty a { color: var(--blue); font-weight: 700; }
.cat-quick { display: flex; gap: 2px; margin-left: 6px; }
.cat-quick a { padding: 8px 12px; border-radius: var(--r-sm); font-weight: 600; color: var(--ink); font-size: .88rem; white-space: nowrap; }
.cat-quick a:hover { background: var(--bg-soft); color: var(--blue); }
@media (max-width: 900px) { .mega { display: none !important; } .cat-quick { display: none; } }


/* Accessibility — ẩn nội dung chỉ dành cho screen reader (WP/WooCommerce/comments dùng) */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto; clip-path: none; color: var(--blue);
  display: block; height: auto; width: auto; padding: 10px 16px; left: 6px; top: 6px;
  z-index: 100000; border-radius: var(--r-sm); box-shadow: var(--shadow);
}