/* ==========================================================================
   Siêu Thị Giá Tốt — stylesheet chung
   Tông màu: đỏ / cam (kiểu siêu thị tạp hoá Việt Nam)
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  --brand:        #d70018;
  --brand-600:    #b80014;
  --brand-700:    #96000f;
  --brand-soft:   #fff1f1;
  --accent:       #ff6b00;
  --accent-soft:  #fff4e8;
  --gold:         #ffb800;

  --ink:          #17181c;
  --ink-2:        #43464f;
  --ink-3:        #71757f;
  --ink-4:        #9aa0aa;
  --line:         #e8eaee;
  --line-2:       #f1f2f5;
  --bg:           #f4f5f7;
  --surface:      #ffffff;
  --surface-2:    #fafbfc;

  --ok:           #12923f;
  --ok-soft:      #eaf7ef;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-1: 0 1px 2px rgba(16,20,30,.05);
  --sh-2: 0 4px 14px rgba(16,20,30,.08);
  --sh-3: 0 12px 32px rgba(16,20,30,.12);

  --wrap: 1240px;
  --header-h: 64px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* --- Layout helpers ----------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.spacer { flex: 1; }
.hide-sm { }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.topbar {
  background: var(--brand-700);
  color: #ffd9dc;
  font-size: 12.5px;
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 34px; }
.topbar a:hover { color: #fff; }
.topbar .dot { opacity: .4; }

.header {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: var(--sh-2);
}
.header .wrap {
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: #fff; color: var(--brand);
  display: grid; place-items: center;
  font-weight: 900; font-size: 19px; letter-spacing: -1px;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.logo-text { line-height: 1.1; }
.logo-text b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.logo-text span { font-size: 10.5px; opacity: .82; letter-spacing: .06em; text-transform: uppercase; }

/* search */
.search { position: relative; flex: 1; max-width: 560px; }
.search input {
  width: 100%; height: 42px;
  padding: 0 46px 0 16px;
  border: 0; border-radius: var(--r-xl);
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.search input::placeholder { color: var(--ink-4); }
.search button {
  position: absolute; right: 4px; top: 4px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  transition: background .15s;
}
.search button:hover { background: var(--brand-700); }

.head-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.head-link {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.head-link:hover { background: rgba(255,255,255,.16); }
.head-link svg { flex-shrink: 0; }

/* category nav */
.catnav { background: var(--surface); border-bottom: 1px solid var(--line); }
.catnav .wrap { display: flex; gap: 6px; }
.catnav-links { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.catnav-links::-webkit-scrollbar { display: none; }
.category-menu { position: relative; flex-shrink: 0; }
.category-menu summary { padding: 12px 13px; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; white-space: nowrap; }
.category-menu summary::-webkit-details-marker { display: none; }
.category-menu summary:hover, .category-menu[open] summary { color: var(--brand); }
.category-menu summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.category-menu-panel { position: absolute; top: 100%; left: 0; z-index: 65; width: 300px; max-width: calc(100vw - 32px); max-height: min(65vh, 480px); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 12px 12px; box-shadow: var(--sh-2); }
.catnav .category-menu-panel a { display: flex; gap: 8px; padding: 10px 12px; white-space: normal; border: 0; border-radius: 6px; }
.category-menu-panel a:hover, .category-menu-panel a.is-active { background: var(--bg); }
.catnav a {
  flex-shrink: 0; padding: 12px 13px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.catnav a:hover { color: var(--brand); }
.catnav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* ==========================================================================
   BUTTONS / PILLS / BADGES
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700;
  transition: transform .12s, box-shadow .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, #f01f31 0%, var(--brand) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(215,0,24,.28);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%); }
.btn-accent {
  background: linear-gradient(180deg, #ff8a2b 0%, var(--accent) 100%);
  color: #fff; box-shadow: 0 2px 8px rgba(255,107,0,.3);
}
.btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-lg { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--r); }
.btn-block { width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11px; font-weight: 700; line-height: 1.6;
}
.badge-sale { background: var(--brand); color: #fff; }
.badge-new  { background: var(--accent); color: #fff; }
.badge-soft { background: var(--line-2); color: var(--ink-3); }
.badge-ok   { background: var(--ok-soft); color: var(--ok); }
.badge-out  { background: #f3f4f6; color: var(--ink-4); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: .15s;
}
.pill:hover { border-color: var(--brand); color: var(--brand); }
.pill.is-active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { margin-top: 24px; }
.section-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: 19px; display: flex; align-items: center; gap: 9px;
}
.section-head h2::before {
  content: ''; width: 4px; height: 20px; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
.section-head .more {
  margin-left: auto; font-size: 13px; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: 4px;
}
.section-head .more:hover { text-decoration: underline; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
}

/* ==========================================================================
   HERO / BANNER
   ========================================================================== */
.hero { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin-top: 18px; }
.hero-main {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  min-height: 300px;
  background: linear-gradient(115deg, #d70018 0%, #ff4d1c 52%, #ff8a00 100%);
  color: #fff;
  display: flex; align-items: center;
  padding: 34px 40px;
}
.hero-main::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(420px 320px at 88% 18%, rgba(255,255,255,.22), transparent 65%),
    radial-gradient(300px 260px at 12% 96%, rgba(0,0,0,.14), transparent 60%);
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; max-width: 460px; }
.hero-kicker {
  display: inline-block; margin-bottom: 12px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255,255,255,.2); backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.hero-copy h1 { font-size: 34px; line-height: 1.15; margin-bottom: 12px; letter-spacing: -.03em; }
.hero-copy p { font-size: 15px; opacity: .93; margin-bottom: 20px; max-width: 400px; }
.hero-main .btn-white {
  background: #fff; color: var(--brand);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.hero-card {
  border-radius: var(--r-lg); padding: 20px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.hero-card h3 { font-size: 16px; margin-bottom: 5px; }
.hero-card p { font-size: 13px; margin: 0; opacity: .85; }
.hero-card--a { background: linear-gradient(135deg, #fff1e6, #ffe3cc); color: #7a3600; }
.hero-card--b { background: linear-gradient(135deg, #e8f6ec, #d5efdc); color: #0d5b2b; }
.hero-card .big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }

/* trust strip */
.trust {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin-top: 16px;
}
.trust div {
  background: var(--surface); padding: 14px 16px;
  display: flex; align-items: center; gap: 11px;
}
.trust .ic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.trust b { display: block; font-size: 13.5px; }
.trust small { color: var(--ink-3); font-size: 12px; }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.cat-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px;
}
.cat-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px 8px;
  text-align: center; transition: .18s;
}
.cat-tile:hover { border-color: var(--brand); box-shadow: var(--sh-2); transform: translateY(-2px); }
.cat-tile .emo {
  width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px;
  background: var(--accent-soft);
}
.cat-tile span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: block; line-height: 1.35; }

/* ==========================================================================
   THẺ NGUỒN SIÊU THỊ — mỗi chuỗi mang màu thương hiệu riêng (--src / --src-soft
   do source_brand() tiêm vào từng thẻ)
   ========================================================================== */
.src-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.src-tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 14px 16px;
  text-align: center; transition: .18s;
}
/* Vạch màu thương hiệu chạy ngang mép trên, đậm dần khi rê chuột */
.src-tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--src, var(--brand)); opacity: .55; transition: opacity .18s;
}
.src-tile:hover {
  border-color: var(--src, var(--brand));
  box-shadow: 0 6px 18px var(--src-soft, rgba(0,0,0,.06));
  transform: translateY(-2px);
}
.src-tile:hover::before { opacity: 1; }

.src-logo {
  width: 52px; height: 52px; margin: 0 auto 10px;
  border-radius: 14px; display: grid; place-items: center;
  background: var(--src-soft, var(--surface-2));
  overflow: hidden;
}
.src-logo b {
  font-size: 15px; font-weight: 900; letter-spacing: .3px;
  color: var(--src, var(--ink-2));
}
.src-logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.src-name {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--ink);
}
.src-tile:hover .src-name { color: var(--src, var(--brand)); }
.src-cnt { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }

/* Chấm màu nhận diện trong danh sách lọc theo nguồn */
.src-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--src, var(--ink-4)); margin-right: 6px;
  flex: none; vertical-align: middle;
}

/* ==========================================================================
   PRODUCT CARD + GRID
   ========================================================================== */
.p-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.p-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.pcard:hover { border-color: rgba(215,0,24,.35); box-shadow: var(--sh-2); transform: translateY(-2px); }

.pcard-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  display: block;
}
.pcard-media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 10px; transition: transform .3s;
}
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-media .ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--ink-4); font-size: 26px;
}

.pcard-off {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 800;
  padding: 3px 7px; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(215,0,24,.3);
}
/* Nhãn nguồn mang màu thương hiệu của siêu thị (--src do PHP tiêm vào).
   Vẫn giữ nền trắng đục để đọc được khi đè lên ảnh sản phẩm. */
.pcard-src {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: linear-gradient(var(--src-soft, transparent), var(--src-soft, transparent)),
              rgba(255,255,255,.94);
  border: 1px solid var(--src, var(--line));
  font-size: 10.5px; font-weight: 700; color: var(--src, var(--ink-3));
  padding: 2px 7px; border-radius: 999px;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bản có ảnh nhãn: bỏ hết viền/nền của viên chữ vì mỗi ảnh đã tự mang nền
   thương hiệu riêng. Chỉ giữ một đường viền mảnh trung tính để nhãn nền
   trắng (Co.opmart, Lotte) không chìm vào ảnh sản phẩm cũng nền trắng. */
.pcard-src.is-logo {
  background: none; border: 0; padding: 0;
  border-radius: 5px; max-width: 68%;
  line-height: 0;                       /* chặn khoảng hở dưới ảnh inline */
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
/* Phải ghi đè cả padding lẫn transform của `.pcard-media img` — nhãn nằm
   trong khung ảnh nên dính luôn luật cỡ ảnh sản phẩm (width:100%,
   padding:10px) và cả hiệu ứng phóng to khi rê chuột lên thẻ. */
.pcard-src.is-logo img {
  display: block; width: auto; height: 18px;
  padding: 0; object-fit: fill;
  border-radius: 5px;
  outline: 1px solid rgba(0,0,0,.08); outline-offset: -1px;
}
.pcard:hover .pcard-src.is-logo img { transform: none; }
.pcard-oos {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(255,255,255,.68);
  display: grid; place-items: center;
}
.pcard-oos span {
  background: var(--ink-2); color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: 999px;
}

.pcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.pcard-cat { font-size: 11px; color: var(--ink-4); margin-bottom: 3px; }
.pcard-name {
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.8em;
  margin-bottom: 6px;
}
.pcard:hover .pcard-name { color: var(--brand); }
.pcard-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pcard-price .now { font-size: 16.5px; font-weight: 800; color: var(--brand); letter-spacing: -.02em; }
.pcard-price .was { font-size: 12.5px; color: var(--ink-4); text-decoration: line-through; }
.pcard-uom { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.pcard-cta { margin-top: 10px; }
/* Nút theo dõi giá trên thẻ: chỉ một icon cạnh giá, tên nút hiện khi rê chuột
   hoặc khi focus bằng bàn phím (title của trình duyệt hiện chậm và không thấy
   được trên máy cảm ứng). */
.watch-add-icon { position: relative; display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-3); background: var(--surface); flex-shrink: 0; }
.watch-add-icon:hover, .watch-add-icon:focus-visible { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.watch-add-tip { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 3; padding: 5px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.watch-add-icon:hover .watch-add-tip, .watch-add-icon:focus-visible .watch-add-tip { opacity: 1; visibility: visible; }
.watch-section { margin-bottom: 20px; }
.watch-preview { padding-left: 20px; margin-bottom: 16px; font-size: 13px; }
.watch-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; }
.watch-layout > * { min-width: 0; }
.watch-lists { display: grid; gap: 8px; margin-bottom: 18px; }
.watch-lists a { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.watch-lists a[aria-current] { color: var(--brand); background: var(--brand-soft); }
.watch-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
/* Nút "Theo dõi giá" dùng chung markup với thẻ sản phẩm (btn-block), trong hàng
   nút này phải co lại cho bằng các nút bên cạnh. */
.watch-inline .btn-block { width: auto; }
.watch-inline input { min-width: 0; max-width: 100%; height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.watch-item { padding-block: 16px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.watch-item h3 { font-size: 16px; }
.watch-prices { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 13px; }
.watch-prices b { display: block; font-size: 18px; }
.watch-change { margin-block: 8px; font-size: 14px; font-weight: 600; }
.watch-change.is-down { color: #15803d; }
.watch-change.is-up { color: #b91c1c; }
.acc-field select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 16px; }
@media (max-width: 720px) {
  .watch-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.pcard-cta .btn { height: 34px; font-size: 13px; }

/* skeleton */
.sk { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sk-box { background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.sk .sk-img { aspect-ratio: 1/1; }
.sk .sk-line { height: 12px; margin: 10px 12px; border-radius: 4px; }
.sk .sk-line.w60 { width: 60%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ==========================================================================
   FLASH SALE
   ========================================================================== */
.flash {
  border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(120deg, #c9000f, #e8380d 55%, #ff7a00);
  padding: 16px;
}
.flash-head { display: flex; align-items: center; gap: 14px; color: #fff; margin-bottom: 14px; }
.flash-head h2 { font-size: 19px; display: flex; align-items: center; gap: 8px; }
.flash-head .more { margin-left: auto; color: #fff; font-size: 13px; font-weight: 600; }
.countdown { display: flex; align-items: center; gap: 5px; font-weight: 800; }
.countdown i {
  font-style: normal; background: rgba(0,0,0,.28);
  border-radius: 6px; padding: 3px 7px; font-size: 14px;
  min-width: 30px; text-align: center;
}
.countdown em { font-style: normal; opacity: .7; }

/* ==========================================================================
   FILTER SIDEBAR (trang danh mục)
   ========================================================================== */
.shop { display: grid; grid-template-columns: 236px 1fr; gap: 20px; align-items: start; margin-top: 18px; }
.filter-sidebar { position: sticky; top: calc(var(--header-h) + 12px); min-width: 0; }
.filter-toggle { display: none; }
.fgroup { border-bottom: 1px solid var(--line-2); padding: 14px 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup:last-child { border-bottom: 0; padding-bottom: 0; }
.fgroup h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-3); margin-bottom: 10px;
}
.fopt {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; cursor: pointer; font-size: 13.5px; color: var(--ink-2);
}
.fopt:hover { color: var(--brand); }
.fopt input { accent-color: var(--brand); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.fopt .cnt { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.price-row { display: flex; align-items: center; gap: 8px; }
.price-row input {
  width: 100%; height: 34px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13px;
}
.price-row input:focus { border-color: var(--brand); outline: none; }

.shop-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px;
}
.shop-bar .count { font-size: 13px; color: var(--ink-3); }
.shop-bar .count b { color: var(--ink); }
.sortsel {
  height: 34px; padding: 0 30px 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371757f' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;
  font-size: 13px; font-weight: 600; appearance: none; cursor: pointer;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-soft); color: var(--brand);
  border-radius: 999px; padding: 4px 6px 4px 11px;
  font-size: 12.5px; font-weight: 600;
}
.chip button { color: inherit; opacity: .6; display: grid; place-items: center; }
.chip button:hover { opacity: 1; }

/* pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pager .pg {
  min-width: 36px; height: 36px; padding: 0 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: border-color .15s, color .15s;
}
.pager a.pg:hover { border-color: var(--brand); color: var(--brand); }
.pager .pg.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .pg.is-off { opacity: .4; }
.pager .gap { color: var(--ink-4); padding: 0 2px; }

/* empty / error state */
.state { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.state .emo { font-size: 44px; margin-bottom: 12px; }
.state h3 { font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.state p { max-width: 420px; margin: 0 auto 16px; font-size: 13.5px; }

/* notice (API/token) */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fffbeb; border: 1px solid #fde68a; color: #7c5b09;
  border-radius: var(--r); padding: 12px 14px; margin-top: 14px; font-size: 13px;
}
.notice b { color: #6b4d05; }
.notice code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); padding: 14px 0 0; flex-wrap: wrap; }
.crumb a:hover { color: var(--brand); }
.crumb .sep { opacity: .5; }
.crumb .cur { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pd { display: grid; grid-template-columns: 440px 1fr; gap: 24px; margin-top: 16px; }
.pd-gallery { position: sticky; top: calc(var(--header-h) + 12px); }
.pd-main {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); aspect-ratio: 1/1;
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.pd-thumbs button {
  width: 64px; height: 64px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); overflow: hidden;
}
.pd-thumbs button.is-active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.pd-info h1 { font-size: 23px; line-height: 1.32; margin-bottom: 10px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.pd-meta b { color: var(--ink-2); font-weight: 600; }

.pd-pricebox {
  background: linear-gradient(135deg, var(--brand-soft), #fff6f0);
  border: 1px solid #ffd9d9; border-radius: var(--r-lg);
  padding: 18px; margin-bottom: 16px;
}
.pd-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pd-price .now { font-size: 32px; font-weight: 800; color: var(--brand); letter-spacing: -.03em; }
.pd-price .was { font-size: 16px; color: var(--ink-4); text-decoration: line-through; }
.pd-save { font-size: 13px; color: var(--ok); font-weight: 600; margin-top: 6px; }
.pd-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pd-actions .btn { flex: 1; min-width: 180px; }
.pd-note { font-size: 12px; color: var(--ink-3); margin-top: 10px; }
.pd-pricebox > .watch-add {
  display: inline-flex; width: auto; min-width: 0; height: 44px;
  margin-top: 12px; padding: 0 18px; font-size: 14px;
}

.pd-attrs { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pd-attrs div { display: flex; font-size: 13.5px; border-bottom: 1px solid var(--line-2); }
.pd-attrs div:last-child { border-bottom: 0; }
.pd-attrs dt { width: 160px; flex-shrink: 0; padding: 10px 14px; background: var(--surface-2); color: var(--ink-3); margin: 0; }
.pd-attrs dd { padding: 10px 14px; margin: 0; font-weight: 600; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button {
  padding: 11px 16px; font-size: 14px; font-weight: 700; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.tabpane { display: none; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.tabpane.is-active { display: block; }
.tabpane ul { list-style: disc; padding-left: 20px; margin: 0 0 1em; }
.tabpane li { margin-bottom: 5px; }

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; margin-top: 18px; }

.bhero {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 18px;
}
.bcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; transition: .18s;
}
.bcard:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: rgba(215,0,24,.3); }
.bcard-media { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.bcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.bcard:hover .bcard-media img { transform: scale(1.04); }
.bcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.bcard-cat {
  align-self: flex-start; margin-bottom: 8px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.bcard h3 { font-size: 16px; line-height: 1.4; margin-bottom: 7px; }
.bcard:hover h3 { color: var(--brand); }
.bcard p {
  font-size: 13.5px; color: var(--ink-3); line-height: 1.6; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bcard-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-4); }
.bcard-foot .av { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 12px; }

.bcard--feature { grid-row: span 2; }
.bcard--feature .bcard-media { aspect-ratio: 16/10; }
.bcard--feature h3 { font-size: 22px; letter-spacing: -.02em; }
.bcard--feature p { -webkit-line-clamp: 3; font-size: 14px; }

.bcard--row { flex-direction: row; }
.bcard--row .bcard-media { width: 150px; flex-shrink: 0; aspect-ratio: 1/1; }
.bcard--row .bcard-body { padding: 12px 14px; }
.bcard--row h3 { font-size: 15px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.side-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
.side-box h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.side-box h3::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--brand); }
.side-cats a {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); font-weight: 500;
}
.side-cats a:last-child { border-bottom: 0; }
.side-cats a:hover { color: var(--brand); }
.side-cats .cnt { margin-left: auto; font-size: 11.5px; color: var(--ink-4); background: var(--line-2); border-radius: 999px; padding: 1px 8px; }
.side-post { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.side-post:last-child { border-bottom: 0; }
.side-post img { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; }
.side-post b { font-size: 13px; font-weight: 600; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-post small { color: var(--ink-4); font-size: 11.5px; }
.side-post:hover b { color: var(--brand); }
.tagcloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tagcloud a {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.tagcloud a:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* blog detail */
.article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 34px; }
.article-head { border-bottom: 1px solid var(--line-2); padding-bottom: 18px; margin-bottom: 22px; }
.article-head h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.025em; margin: 10px 0 12px; }
.article-head .lead { font-size: 16px; color: var(--ink-3); line-height: 1.65; margin: 0 0 14px; }
.article-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.article-meta .av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; }
.article-cover { border-radius: var(--r); overflow: hidden; margin-bottom: 24px; }
.article-cover img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }

.prose { font-size: 15.5px; line-height: 1.8; color: var(--ink-2); }
.prose h2 { font-size: 21px; color: var(--ink); margin: 32px 0 12px; }
.prose h3 { font-size: 17px; color: var(--ink); margin: 24px 0 10px; }
.prose ul, .prose ol { list-style: disc; padding-left: 22px; margin: 0 0 1.2em; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 7px; }
.prose a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote {
  margin: 22px 0; padding: 14px 18px;
  background: var(--brand-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2); font-style: italic;
}
.prose img { border-radius: var(--r); margin: 20px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.prose th { background: var(--surface-2); font-weight: 700; color: var(--ink); }

.toc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 24px; }
.toc h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 9px; }
.toc a { display: block; padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.toc a:hover { color: var(--brand); }

.share { display: flex; align-items: center; gap: 9px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.share span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.share a {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.share a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ==========================================================================
   NEWSLETTER + FOOTER
   ========================================================================== */
.newsletter {
  margin-top: 28px; border-radius: var(--r-lg);
  background: linear-gradient(120deg, #241f1f, #3a2321 60%, #5b2a17);
  color: #fff; padding: 28px 32px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.newsletter h3 { font-size: 20px; margin-bottom: 5px; }
.newsletter p { font-size: 13.5px; opacity: .75; margin: 0; }
.newsletter form { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.newsletter input {
  height: 44px; width: 260px; padding: 0 16px;
  border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.1);
  color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.newsletter input::placeholder { color: rgba(255,255,255,.5); }

.footer { background: #1b1c20; color: #a8adb8; margin-top: 32px; padding: 36px 0 0; font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 28px; padding-bottom: 30px; }
.footer h4 { color: #fff; font-size: 14px; margin-bottom: 13px; }
.footer a:hover { color: #fff; }
.footer li { margin-bottom: 8px; }
.footer .logo-text b { color: #fff; }
.footer .logo-text span { color: #7e838d; }
.footer .about { margin: 14px 0 0; line-height: 1.7; max-width: 300px; }
.footer .socials { display: flex; gap: 8px; margin-top: 14px; }
.footer .socials a {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.07); display: grid; place-items: center; color: #cfd3da;
}
.footer .socials a:hover { background: var(--brand); color: #fff; }
/* Ghi nguồn dữ liệu ở cuối cột Liên hệ.
   Logo Dicho là mực đậm trên nền trong suốt nên đặt thẳng lên footer #1b1c20
   sẽ chìm mất; lót một mảng trắng bo góc thay vì đảo màu — đảo màu làm hỏng
   luôn mấy vạch xanh lá trong logo. */
.footer-credit { margin-top: 16px; }
.footer-credit span { display: block; margin-bottom: 9px; font-size: 12.5px; color: #7e838d; }
/* inline-block để vùng bấm ôm sát logo, không kéo dài hết chiều ngang cột. */
.footer-credit a { display: inline-block; border-radius: 9px; }
.footer-credit img {
  display: block; width: 148px; height: auto;
  background: #fff; border-radius: 9px; padding: 7px 10px;
  transition: opacity .15s;
}
.footer-credit a:hover img { opacity: .82; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 16px 0; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: #7e838d;
}
.footer-bottom .disc { max-width: 720px; }

/* back to top */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s;
}
.totop.show { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   BẢN ĐỒ CỬA HÀNG (/ban-do/)
   Leaflet tự lo phần trong khung bản đồ — dưới đây chỉ là khung, thanh bên
   và danh sách địa chỉ. Biến --lc là màu nhận diện của lớp đang vẽ.
   ========================================================================== */
.map-head { display: flex; align-items: flex-end; gap: 18px; margin: 16px 0 14px; }
.map-head h1 { font-size: 28px; letter-spacing: -.03em; }
.map-head p { color: var(--ink-3); margin: 6px 0 0; font-size: 14.5px; max-width: 640px; }
.map-head .map-count {
  margin-left: auto; text-align: center; flex: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 16px;
}
.map-count b { display: block; font-size: 22px; color: var(--brand); letter-spacing: -.02em; }
.map-count span { font-size: 12px; color: var(--ink-3); }

/* Ba vùng đặt theo tên chứ không theo thứ tự trong HTML: trên desktop cột
   trái là bộ lọc + kết quả, bản đồ chiếm hết bên phải; trên mobile bản đồ
   phải nhảy lên NGAY dưới bộ lọc, nếu không khách phải cuộn qua 60 thẻ kết
   quả mới nhìn thấy cái bản đồ — thứ họ vào trang để xem. */
.map-wrap {
  display: grid; gap: 14px;
  grid-template-columns: 310px 1fr;
  grid-template-areas: "ctl map" "res map";
  align-content: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 12px; margin-bottom: 26px;
}
.map-side   { grid-area: ctl; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.map-canvas { grid-area: map; }
.map-results{ grid-area: res; }

.map-search { display: flex; gap: 6px; }
.map-search input {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.map-search input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.btn-near {
  flex: none; padding: 9px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
}
.btn-near:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.btn-near:disabled { opacity: .6; cursor: default; }

.map-layers {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px;
}
.map-layer {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; font-size: 13.5px;
}
.map-layer:hover { background: var(--surface-2); }
.map-layer input { accent-color: var(--lc); }
.map-layer .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lc); flex: none; }
.map-layer .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-layer .ct { color: var(--ink-4); font-size: 12px; font-variant-numeric: tabular-nums; }

.map-results { overflow-y: auto; max-height: 430px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.map-hint, .map-empty { color: var(--ink-3); font-size: 12.5px; margin: 2px 2px 4px; }
.map-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-left: 3px solid var(--lc);
  border-radius: var(--r-sm); background: var(--surface); padding: 8px 10px;
}
.map-item:hover { background: var(--surface-2); }
.map-item b { display: block; font-size: 13.5px; }
.map-item span { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.map-item em { font-style: normal; color: var(--brand); font-size: 11.5px; font-weight: 600; }

.map-canvas { position: relative; min-width: 0; }
#map { height: 560px; border-radius: var(--r); z-index: 1; }
.map-noscript {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 20px;
  background: var(--surface-2); border-radius: var(--r); color: var(--ink-3); text-align: center;
}

/* Ghim và cụm ghim — divIcon nên phải tự bỏ nền mặc định của Leaflet. */
.map-pin { background: none; border: 0; }
.map-cluster { background: none; }
.map-cluster > div {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
  border: 3px solid rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.map-pop { font-size: 13.5px; min-width: 180px; }
.map-pop b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.map-pop span { display: block; color: var(--ink-2); }
.map-pop i { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.map-pop em { display: block; color: var(--ink-4); font-size: 11.5px; font-style: normal; margin-top: 4px; }
.map-pop a { display: inline-block; margin-top: 7px; font-weight: 600; color: var(--brand); }

/* Danh sách chữ dưới bản đồ — phần Google đọc được */
.map-list { margin-bottom: 30px; }
.map-list h2 { font-size: 20px; margin-bottom: 12px; letter-spacing: -.02em; }
.map-list h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 16px; margin: 20px 0 10px; padding-left: 10px;
  border-left: 4px solid var(--lc);
}
.map-list h3 span { color: var(--ink-4); font-size: 12.5px; font-weight: 500; }
.map-list h3 a { color: var(--brand); font-size: 12.5px; font-weight: 600; }
.map-addr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.map-addr li {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; font-size: 13px;
}
.map-addr b { display: block; }
.map-addr span { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.map-addr i { display: block; color: var(--ink-4); font-size: 12px; font-style: normal; }
.map-addr a { display: inline-block; margin-top: 5px; color: var(--brand); font-size: 12px; font-weight: 600; }
.map-more { margin: 10px 0 0; }
.map-more a { color: var(--brand); font-weight: 600; font-size: 13.5px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .p-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cat-grid { grid-template-columns: repeat(6, 1fr); }
  .pd { grid-template-columns: 380px 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .map-wrap { grid-template-columns: 1fr; grid-template-areas: "ctl" "map" "res"; }
  .map-results { max-height: 300px; }
  #map { height: 420px; }
  .map-addr { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .shop { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
  .filter-toggle:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; padding: 10px 14px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r);
    font-size: 14px; font-weight: 600; cursor: pointer;
  }
  .filter-toggle-icon { font-size: 20px; line-height: 1; color: var(--brand); }
  .filters.is-collapsible:not(.is-open) { display: none; }
  .filters.is-open { margin-top: 8px; }
  .shop { gap: 12px; }
  .shop > div:last-child { min-width: 0; }
  .shop-bar { gap: 8px; padding: 10px; }
  .shop-bar .count { flex-basis: 100%; }
  .shop-bar .spacer { display: none; }
  .blog-layout { grid-template-columns: 1fr; }
  .bhero { grid-template-columns: 1fr; }
  .bcard--feature { grid-row: auto; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .pd { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .trust { grid-template-columns: 1fr 1fr; }
  .article { padding: 22px 20px; }
  .article-head h1 { font-size: 24px; }
}
@media (max-width: 720px) {
  .map-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .map-head .map-count { margin-left: 0; }
  .map-addr { grid-template-columns: 1fr; }
  .topbar { display: none; }
  /* Header cuộn cùng trang; giữ hai hàng gọn và không tràn ở màn hình nhỏ. */
  .header { position: static; box-shadow: none; }
  .header .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    height: auto; padding: 4px 12px; gap: 4px 6px;
  }
  .header .logo { min-width: 0; gap: 6px; }
  .header .logo-mark { width: 30px; height: 30px; flex-shrink: 0; font-size: 16px; border-radius: 8px; }
  .header .logo img { max-width: 100%; max-height: 30px; object-fit: contain; }
  .header .logo-text { min-width: 0; }
  .header .logo-text b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .header .logo-text > span { display: none; }
  .search { order: 3; grid-column: 1 / -1; min-width: 0; max-width: none; }
  .search input { font-size: 16px; padding-left: 12px; }
  .head-links { gap: 0; margin-left: 0; }
  .head-link { width: 40px; min-height: 44px; padding: 0; justify-content: center; }
  .head-links .label { display: none; }
  .catnav .wrap { padding-inline: 12px; gap: 2px; }
  .catnav a { padding: 8px 10px; font-size: 12px; }
  .category-menu summary { padding: 8px 10px; font-size: 12px; }
  .catnav-links { gap: 2px; }
  .p-grid, .p-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .hero-copy h1 { font-size: 25px; }
  .hero-main { padding: 26px 22px; min-height: 240px; }
  .pd-price .now { font-size: 26px; }
  .newsletter { padding: 22px; }
  .newsletter form { margin-left: 0; width: 100%; }
  .newsletter input { flex: 1; width: auto; min-width: 0; }
  .blog-grid { grid-template-columns: 1fr; }
  .bcard--row .bcard-media { width: 110px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .pd-attrs dt { width: 120px; }
}

/* ==========================================================================
   Popup chờ trước khi sang trang bán hàng (affiliate interstitial)
   ========================================================================== */
.go-lock { overflow: hidden; }

.go-ov {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(12, 13, 16, .62);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: goFade .16s ease-out;
}
.go-ov[hidden] { display: none; }
@keyframes goFade { from { opacity: 0; } to { opacity: 1; } }

.go-box {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 26px 22px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  animation: goUp .2s cubic-bezier(.2, .8, .3, 1);
  text-align: center;
}
@keyframes goUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.go-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: var(--line-2); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
}
.go-x:hover { background: var(--line); color: var(--ink); }

.go-head h3 { font-size: 17px; letter-spacing: -.02em; margin-bottom: 5px; }
.go-prod {
  font-size: 13px; color: var(--ink-3); margin: 0;
  overflow-wrap: anywhere;
}

/* --- Đếm ngược --- */
.go-wait { padding: 18px 0 4px; }
.go-ring {
  width: 66px; height: 66px; margin: 0 auto 12px;
  border-radius: 50%;
  border: 3px solid var(--brand-soft); border-top-color: var(--brand);
  display: grid; place-items: center;
  font-size: 23px; font-weight: 800; color: var(--brand);
  animation: goSpin 1s linear infinite;
}
.go-ring span { animation: goSpin 1s linear infinite reverse; }
@keyframes goSpin { to { transform: rotate(360deg); } }
.go-wait p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.go-bar { height: 5px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.go-bar i {
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 1s linear;
}

/* --- Đã sẵn sàng --- */
.go-ready { padding: 16px 0 4px; }
.go-url {
  font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 11px; margin-bottom: 12px;
  overflow-wrap: anywhere; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-height: 76px; overflow-y: auto;
}

/* --- 2 banner ảnh --- */
.go-figs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
}
.go-figs:has(> :only-child) { grid-template-columns: 1fr; }
.go-fig {
  display: block; border-radius: var(--r-sm); overflow: hidden;
  background: var(--line-2); line-height: 0;
}
.go-fig img { width: 100%; height: auto; display: block; }
.go-fig[href]:hover { opacity: .92; }

.go-note {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-4);
  margin: 14px 0 0; text-align: left;
}

@media (max-width: 480px) {
  .go-box { padding: 22px 16px 16px; }
  .go-figs { grid-template-columns: 1fr; }
}

/* Nút "Tìm trên Shopee" ở trang chi tiết sản phẩm */
.btn-shopee {
  background: #ee4d2d; color: #fff; border-color: #ee4d2d;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-shopee:hover { background: #d8431f; border-color: #d8431f; color: #fff; }
.btn-shopee svg { flex-shrink: 0; }

/* Thông báo khi hệ thống tự nới từ khoá tìm kiếm (danh-muc.php) */
.search-relaxed{
  margin:0 0 12px;padding:10px 13px;border-radius:10px;
  background:var(--brand-soft,#fff4f4);border:1px solid #ffd9d9;
  font-size:13.5px;line-height:1.6;color:var(--ink-2)
}
.search-relaxed b{color:var(--brand)}

/* ==========================================================================
   Quét mã QR từ ô tìm kiếm
   ========================================================================== */

/* Nút camera nằm cạnh nút kính lúp. Ô input phải chừa thêm chỗ bên phải,
   nếu không chữ dài sẽ chui xuống dưới hai nút. */
.search:has(.search-scan:not([hidden])) input { padding-right: 84px; }
.search-scan {
  position: absolute; right: 42px; top: 4px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; transition: background .15s, color .15s;
}
.search-scan:hover { background: var(--line-2); color: var(--brand); }
.search-scan[hidden] { display: none; }

.scan-ov {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(12, 13, 16, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.scan-ov[hidden] { display: none; }

.scan-box {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
}
.scan-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.scan-head h3 { font-size: 16px; letter-spacing: -.02em; margin: 0; flex: 1; }
.scan-x {
  width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: var(--line-2); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
}
.scan-x:hover { background: var(--line); color: var(--ink); }

/* Khung hình vuông: video của điện thoại là 4:3 hoặc 16:9 nên phải cắt bằng
   object-fit, để nguyên thì khung méo và mã QR bị bóp lệch. */
.scan-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r);
  overflow: hidden;
  background: #0d0e12;
}
.scan-stage video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Bốn góc ngắm, thuần trang trí — người dùng biết đưa mã vào đâu. */
.scan-frame { position: absolute; inset: 14%; pointer-events: none; }
.scan-frame i {
  position: absolute; width: 26px; height: 26px;
  border: 3px solid #fff; border-radius: 4px;
  opacity: .9;
}
.scan-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scan-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scan-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scan-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.scan-msg {
  margin: 12px 0 0; text-align: center;
  font-size: 13px; color: var(--ink-2); min-height: 34px;
}
.scan-acts { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.scan-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.scan-btn:hover { border-color: var(--brand); color: var(--brand); }
.scan-btn[hidden] { display: none; }
.scan-hint {
  margin: 12px 0 0; text-align: center;
  font-size: 12px; line-height: 1.5; color: var(--ink-4);
}

/* Trình duyệt chưa có :has() (Firefox cũ) — lùi về chừa chỗ cố định. Thừa vài
   px khi nút ẩn thì không ai thấy, chữ chui xuống dòng thì thấy ngay. */
@supports not selector(:has(*)) {
  .search input { padding-right: 84px; }
}

/* ==========================================================================
   Khu tài khoản khách hàng
   ========================================================================== */

.head-link.is-me { background: rgba(255,255,255,.16); }
.head-link.is-me .label { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-wrap { padding: 30px 0 56px; display: flex; justify-content: center; }
.acc-wrap.is-wide { display: block; }

.acc-card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px;
}
.acc-wrap.is-wide .acc-card { max-width: none; }

.acc-title { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.acc-sub   { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }
.acc-h2    { font-size: 15px; margin: 0 0 14px; letter-spacing: -.01em; }

/* Đầu trang tài khoản: tên bên trái, nút đăng xuất bên phải */
.acc-head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
}
.acc-head > div { flex: 1; min-width: 200px; }

/* auto-fit để 3 thẻ tự xuống dòng, không cần media query riêng */
.acc-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.acc-form { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.acc-field { display: block; }
.acc-field > span {
  display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.acc-field > span i { font-weight: 400; color: var(--ink-4); font-style: normal; }
.acc-field input {
  width: 100%; height: 42px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: 14.5px;
}
.acc-field input:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.acc-field input:disabled { background: var(--line-2); color: var(--ink-3); }
.acc-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-4); font-style: normal; }

.acc-btn {
  height: 44px; padding: 0 20px;
  border: 0; border-radius: var(--r-sm);
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.acc-btn:hover { background: var(--brand-700); }
.acc-btn.is-ghost {
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line);
}
.acc-btn.is-ghost:hover { border-color: var(--brand); color: var(--brand); }
.acc-btn.is-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }

.acc-alt { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.acc-alt a { color: var(--brand); font-weight: 600; }

/* Nút đăng nhập Google — nền trắng, logo 4 màu theo hướng dẫn nhận diện của Google */
.acc-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 16px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: #1f1f1f;
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.acc-google:hover { border-color: #9aa0a6; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.acc-google:focus-visible { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.acc-google svg { flex-shrink: 0; }
.acc-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; font-size: 12.5px; color: var(--ink-4);
}
.acc-or::before, .acc-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Thông báo: một khối, ba màu, phân biệt bằng viền trái cho người mù màu */
.acc-note {
  margin: 16px 0 0; padding: 11px 14px;
  border-radius: var(--r-sm); border-left: 3px solid;
  font-size: 13.5px; line-height: 1.55;
}
.acc-note.is-ok   { background: var(--ok-soft);    border-color: var(--ok);     color: #0c6b2f; }
.acc-note.is-warn { background: var(--accent-soft); border-color: var(--accent); color: #8a4200; }
.acc-note.is-err  { background: var(--brand-soft);  border-color: var(--brand);  color: #9a0012; }
.acc-errs { margin: 0; padding-left: 18px; }
.acc-errs li + li { margin-top: 3px; }

.acc-more { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.acc-more summary { cursor: pointer; font-size: 13.5px; color: var(--ink-3); }
.acc-more summary:hover { color: var(--brand); }

.acc-meta { margin: 0; font-size: 13.5px; }
.acc-meta dt { color: var(--ink-3); font-size: 12.5px; }
.acc-meta dd { margin: 2px 0 12px; color: var(--ink); font-weight: 600; }
.acc-tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.acc-tag.is-ok { background: var(--ok-soft); color: var(--ok); }

@media (max-width: 560px) {
  .acc-card { padding: 20px 16px; border-radius: var(--r); }
  .acc-wrap { padding: 18px 0 40px; }
}

/* --- Điều kiện mật khẩu, đánh dấu ngay khi gõ ---------------------------- */
.pw-rules {
  list-style: none;
  margin: -6px 0 0; padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
  transition: border-color .2s, background .2s;
}
.pw-rules li {
  position: relative;
  padding-left: 22px;
  transition: color .15s;
}
.pw-rules li + li { margin-top: 4px; }
.pw-rules li[hidden] { display: none; }

/* Chấm tròn mặc định; đạt thì thành dấu tick, chưa đạt thì thành dấu x.
   Dùng cả hình dạng lẫn màu, để người mù màu vẫn phân biệt được. */
.pw-rules li::before {
  content: '';
  position: absolute; left: 4px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-4);
  transition: background .15s;
}
.pw-rules li.is-ok  { color: var(--ok); }
.pw-rules li.is-no  { color: var(--ink-3); }
.pw-rules li.is-ok::before,
.pw-rules li.is-no::before { background: none; }

.pw-rules li.is-ok::after,
.pw-rules li.is-no::after {
  position: absolute; left: 0; top: -1px;
  width: 16px; text-align: center;
  font-weight: 800; font-size: 13px;
}
.pw-rules li.is-ok::after { content: '✓'; color: var(--ok); }
.pw-rules li.is-no::after { content: '✕'; color: var(--ink-4); }

/* Đủ điều kiện thì cả khối đổi sang nền xanh nhạt — một tín hiệu gọn để
   người dùng biết có thể bấm nút, không cần đọc lại từng dòng. */
.pw-rules.is-done {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

/* Người đặt hệ điều hành ở chế độ giảm chuyển động thì bỏ hết transition. */
@media (prefers-reduced-motion: reduce) {
  .pw-rules, .pw-rules li, .pw-rules li::before { transition: none; }
}

/* Danh sách theo dõi giá: các dòng gọn, ưu tiên giá hiện tại. */
.watch-page { padding-inline: 16px; }
.watch-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.watch-list-head .acc-h2 { margin-bottom: 0; overflow-wrap: anywhere; }
.watch-list-head .btn { flex-shrink: 0; font-size: 12px; height: 32px; padding-inline: 10px; }
.watch-create summary { cursor: pointer; color: var(--brand); font-size: 13px; padding-block: 10px; }
.watch-create .acc-form { margin-top: 8px; }
.watch-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding-block: 14px; }
.watch-thumb { width: 64px; height: 64px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.watch-thumb img { width: 100%; height: 100%; object-fit: contain; }
.watch-thumb span { font-size: 24px; }
.watch-content { min-width: 0; }
.watch-item h3 { font-size: 14px; line-height: 1.45; }
.watch-item .acc-hint { margin-top: 3px; }
.watch-prices { gap: 16px; margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.watch-current b { color: var(--brand); font-size: 18px; }
.watch-initial b { color: var(--ink-3); font-size: 14px; font-weight: 500; }
.watch-change { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; background: var(--surface-2); color: var(--ink-3); margin-block: 6px; }
.watch-change.is-down { background: #f0fdf4; }
.watch-change.is-up { background: #fef2f2; }
.watch-dates { font-size: 11px; color: var(--ink-3); }
.watch-dates summary { cursor: pointer; padding-block: 3px; }
.watch-item .watch-inline { margin-top: 6px; }
.watch-item .watch-inline .btn { height: 30px; padding-inline: 10px; font-size: 11px; }
.watch-item .watch-inline form .btn { border-color: transparent; color: var(--ink-3); background: transparent; }
.watch-item .watch-inline form .btn:hover { color: #b91c1c; background: #fef2f2; }

/* Popup thêm sản phẩm dùng dialog để giữ focus và hỗ trợ phím Escape. */
.watch-dialog-open { overflow: hidden; }
.watch-dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 70px rgba(0,0,0,.22); overflow-y: auto; }
.watch-dialog::backdrop { background: rgba(15,23,42,.5); }
.watch-dialog [hidden] { display: none !important; }
.watch-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.watch-dialog-head h2 { font-size: 19px; margin: 0; }
.watch-dialog-head button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); font-size: 24px; cursor: pointer; }
.watch-dialog-product { font-size: 13px; line-height: 1.5; margin-block: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
#watch-dialog-status { font-size: 13px; line-height: 1.5; margin-bottom: 12px; }
#watch-dialog-status:empty { display: none; }
.watch-new-toggle { text-align: left; color: var(--brand); font-size: 13px; min-height: 36px; cursor: pointer; }
.watch-dialog .acc-btn { width: 100%; }
.watch-dialog button:disabled { opacity: .6; cursor: wait; }
#watch-dialog-success { display: flex; flex-wrap: wrap; gap: 8px; }

/* Popup tìm sản phẩm ngay trong trang danh sách — rộng hơn vì có danh sách kết quả. */
.watch-find { width: min(560px, calc(100% - 24px)); }
.watch-find-form { display: flex; gap: 8px; margin-top: 14px; }
.watch-find-form input { flex: 1; min-width: 0; height: 42px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.watch-find .acc-btn { width: auto; flex-shrink: 0; padding-inline: 18px; }
#watch-find-status { font-size: 13px; line-height: 1.5; margin-top: 12px; color: var(--ink-3); }
#watch-find-status:empty { display: none; }
.watch-find-results { margin-block: 8px; list-style: none; max-height: min(52vh, 420px); overflow-y: auto; }
.watch-find-results:empty { display: none; }
.watch-find-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); }
.watch-find-row > div { flex: 1; min-width: 0; }
.watch-find-thumb { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; background: var(--surface-2); overflow: hidden; font-size: 20px; }
.watch-find-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.watch-find-row b { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.watch-find-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.watch-find-row .btn { flex-shrink: 0; height: 34px; padding-inline: 14px; font-size: 13px; }
.watch-find > .btn-block { margin-top: 10px; }

/* Khối chia sẻ danh sách trong "Quản lý danh sách". */
.watch-item-name { font-size: 14px; line-height: 1.45; }

/* Nhóm nhiều nguồn: một dòng gộp, bên trong là bảng so giá từng siêu thị. */
.watch-item.is-group { background: var(--surface-2); border-radius: 12px; padding: 14px; margin-block: 8px; }
.watch-sources { list-style: none; margin: 10px 0 4px; display: grid; gap: 4px; }
.watch-source-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: var(--surface); font-size: 12px; }
.watch-source-row.is-best { box-shadow: inset 0 0 0 1px var(--ok); }
.watch-source-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.watch-source-price { display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-weight: 700; }
.watch-best { padding: 1px 6px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-size: 10px; font-style: normal; font-weight: 700; }
.watch-gap { color: var(--ink-4); font-size: 11px; font-style: normal; font-weight: 500; }
.watch-source-link { flex-shrink: 0; font-size: 12px; }
.watch-source-x { flex-shrink: 0; width: 24px; height: 24px; border-radius: 6px; background: transparent; color: var(--ink-4); font-size: 16px; line-height: 1; cursor: pointer; }
.watch-source-x:hover { background: #fef2f2; color: #b91c1c; }
.watch-rename { font-size: 12px; }
.watch-rename > summary { cursor: pointer; color: var(--ink-3); }
/* Thanh gộp nhóm: chỉ hiện khi đã tick ít nhất một dòng (JS bỏ [hidden]). */
/* display:grid đè mất thuộc tính [hidden] của trình duyệt — phải nói lại rõ,
   nếu không JS ẩn thanh đi mà nó vẫn hiện. */
.watch-groupbar[hidden] { display: none !important; }
.watch-groupbar { position: sticky; bottom: 12px; display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 8px 28px rgba(0,0,0,.10); }
.watch-groupbar-text b { display: block; font-size: 13px; }
.watch-groupbar .acc-hint { display: block; margin-top: 2px; }
.watch-groupbar input[name="group_name"] { flex: 1; min-width: 200px; height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.watch-groupbar .acc-btn { width: auto; flex-shrink: 0; padding-inline: 18px; }
.watch-pick-label { font-size: 12px; color: var(--ink-3); cursor: pointer; }
.watch-item .watch-pick { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.watch-item-name a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 720px) {
  .watch-page .acc-card { padding: 16px; }
  .watch-page .watch-lists { display: flex; overflow-x: auto; margin-bottom: 4px; }
  .watch-page .watch-lists a { flex: 0 0 auto; max-width: 220px; }
  .watch-item { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
  .watch-thumb { width: 48px; height: 48px; }
  .watch-list-head { align-items: flex-start; flex-wrap: wrap; }
  .watch-dialog { padding: 20px; }
}

/* Tuỳ chọn email riêng cho từng danh sách. */
/* Bốn thẻ cấu hình (email, Telegram, chia sẻ, đổi tên/xoá) dùng chung một kiểu:
   cùng chiều cao hàng, cùng vị trí nhãn trạng thái, cùng mũi tên tự vẽ — mũi tên
   mặc định của <details> mỗi trình duyệt một khác nên phải tắt cả hai kiểu marker. */
.watch-panels { display: grid; gap: 8px; margin-bottom: 18px; }
.watch-panel { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.watch-panel > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; border-radius: 10px; }
.watch-panel > summary::-webkit-details-marker { display: none; }
.watch-panel > summary::after { content: ""; flex-shrink: 0; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4); transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.watch-panel[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.watch-panel > summary:hover { background: var(--surface-2); }
.watch-panel > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.watch-panel[open] > summary { border-bottom: 1px solid var(--line-2); border-radius: 10px 10px 0 0; }
.watch-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.watch-panel-title svg { flex-shrink: 0; color: var(--ink-4); }
.watch-panel-body { padding: 14px; }
.watch-panel-body > .acc-form { margin-top: 0; }
.watch-panel.is-quiet > summary { color: var(--ink-3); font-weight: 500; }
/* Nhãn trạng thái: tắt thì xám im lặng, đang bật thì mang màu thương hiệu. */
.watch-pill { margin-left: auto; flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 600; }
.watch-pill.is-on { background: var(--ok-soft); color: var(--ok); }
/* Các <details> nhỏ khác trong trang dùng lại đúng mũi tên đó, khỏi lẫn ▶ mặc định. */
.watch-create > summary, .watch-dates > summary, .watch-danger > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.watch-create > summary::-webkit-details-marker,
.watch-dates > summary::-webkit-details-marker,
.watch-danger > summary::-webkit-details-marker { display: none; }
.watch-create > summary::after, .watch-dates > summary::after, .watch-danger > summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; transition: transform .15s ease; }
.watch-create[open] > summary::after, .watch-dates[open] > summary::after, .watch-danger[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.watch-copy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.watch-copy input { flex: 1; min-width: 220px; height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font-size: 12px; }
.watch-danger { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.watch-danger > summary { cursor: pointer; color: #b91c1c; font-size: 12px; }
.watch-danger .btn { margin-top: 8px; color: #b91c1c; }
.watch-email-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.watch-email-error { color: #b91c1c; font-size: 12px; }
@media (max-width: 560px) { .watch-email-grid { grid-template-columns: minmax(0,1fr); } }

/* Trang tài khoản: hồ sơ là phần chính, mật khẩu mở khi cần. */
.account-page { max-width: 980px; padding: 24px 16px 48px; }
.account-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.account-avatar { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px; color: var(--brand); background: var(--brand-soft); font-size: 23px; font-weight: 800; }
.account-identity { flex: 1; min-width: 0; }
.account-identity .acc-sub { overflow-wrap: anywhere; }
.account-quick-link { display: inline-block; margin-top: 6px; color: var(--brand); font-size: 12px; font-weight: 600; }
.account-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; grid-template-areas: "profile overview" "security overview"; align-items: start; gap: 16px; }
.account-profile { grid-area: profile; }
.account-security { grid-area: security; }
.account-overview { grid-area: overview; }
.account-description { font-size: 13px; color: var(--ink-3); margin: -4px 0 18px; line-height: 1.5; }
.account-page .acc-card { padding: 22px; min-width: 0; }
.account-page .acc-field input { font-size: 16px; }
.account-profile .acc-btn, .account-security .acc-btn { width: fit-content; padding-inline: 16px; font-size: 13px; }
.account-security > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; list-style: none; }
.account-security > summary::-webkit-details-marker { display: none; }
.account-security > summary small { color: var(--brand); font-size: 12px; font-weight: 500; }
.account-security > summary small::after { content: ' ＋'; }
.account-security[open] > summary small::after { content: ' −'; }
.account-security[open] > summary { margin-bottom: 20px; }
.account-watch-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); font-size: 21px; margin-bottom: 12px; }
.account-stats { display: flex; gap: 24px; margin-bottom: 16px; color: var(--ink-3); font-size: 12px; }
.account-stats b { display: block; color: var(--ink); font-size: 22px; }
.account-overview .btn { font-size: 13px; }
.account-divider { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.account-overview .acc-meta { font-size: 12px; }
@media (max-width: 720px) {
  .account-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: "profile" "overview" "security"; }
  .account-page .acc-card { padding: 18px; }
  .account-hero { gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
  .account-avatar { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; }
  .account-hero .acc-title { font-size: 20px; }
  .account-hero .acc-btn { font-size: 12px; padding-inline: 10px; }
}
.watch-panel [hidden] { display: none !important; }
.account-telegram-form { margin-top: 8px; }
.account-telegram-form .btn { height: 32px; font-size: 12px; padding-inline: 10px; }

/* Badge nguồn bán trong danh sách theo dõi giá. */
.watch-source { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--src); border-radius: 8px; background: var(--src-soft); color: var(--src); font-size: 12px; font-weight: 700; line-height: 1.3; }
.watch-source > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.watch-source-logo { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 24px; padding: 3px; border-radius: 4px; background: #fff; }
.watch-source-logo img { width: 100%; height: 100%; object-fit: contain; }
.watch-source-logo b { font-size: 10px; color: var(--src); }
.watch-source.is-brand-badge { padding: 0; border: 0; background: transparent; border-radius: 5px; }
.watch-source.is-brand-badge img { display: block; width: auto; max-width: 96px; height: 20px; object-fit: contain; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }