/* ==========================================================================
   Bubee Shop — hệ thống giao diện
   Bảng màu lấy trực tiếp từ logo: chữ vàng đồng trên nền kem, viền kép.
   Mọi cặp màu chữ/nền dưới đây đã được kiểm tra đạt tối thiểu 4.5:1 (WCAG AA).
   Lưu ý: --gold-400 CHỈ dùng cho viền và trang trí — chữ trắng trên nền đó
   chỉ đạt 3.25:1 nên không được dùng làm nền nút bấm.
   ========================================================================== */

:root {
  /* Nền */
  --cream-50:  #FDF8F2;
  --cream-100: #F8EDE0;
  --cream-200: #F0DFCC;
  --cream-300: #E5CDB2;

  /* Vàng đồng của logo */
  --gold-400: #B98446;   /* viền, gạch trang trí — KHÔNG dùng làm nền chữ trắng */
  --gold-500: #A5743A;
  --gold-600: #9A6A33;   /* nền nút, chữ giá  (4.68:1 với trắng) */
  --gold-700: #7D5527;

  /* Chữ */
  --brown-900: #2C2016;
  --brown-800: #3E2E20;  /* chữ chính     12.99:1 trên trắng */
  --brown-600: #6B5442;  /* chữ phụ        7.07:1 trên trắng */
  --brown-400: #7D6755;  /* 5.33:1 trên trắng, 5.04:1 trên kem, 4.61:1 trên kem đậm */

  /* Nhấn "hữu cơ" */
  --sage-600: #5B6B50;   /* 4.82:1 trên nền sage nhạt, 5.73:1 trên trắng */
  --sage-100: #E8EDE4;

  --white: #FFFFFF;
  --danger: #B3261E;
  --danger-bg: #FCEEED;
  --success: #2E6B4F;
  --success-bg: #E8F3ED;

  /* Cormorant Garamond: serif tương phản cao, chất biên tập cao cấp — chỉ dùng
     cho tiêu đề lớn. Chữ số của nó là kiểu cổ (thấp lùn) nên KHÔNG dùng cho giá.
     Manrope: sans hình học hiện đại, dấu tiếng Việt sạch — dùng cho nội dung, giá, nút. */
  --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(62, 46, 32, .06), 0 1px 3px rgba(62, 46, 32, .04);
  --shadow:    0 2px 6px rgba(62, 46, 32, .07), 0 8px 20px rgba(62, 46, 32, .06);
  --shadow-lg: 0 4px 12px rgba(62, 46, 32, .08), 0 18px 40px rgba(62, 46, 32, .10);

  --wrap: 1200px;
  --ease: cubic-bezier(.32, .72, .35, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;              /* không bao giờ nhỏ hơn 16px cho nội dung */
  line-height: 1.6;
  color: var(--brown-800);
  background: var(--cream-50);
  overflow-x: hidden;           /* chặn tràn ngang trên máy nhỏ */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.08;
  color: var(--brown-900);
  margin: 0 0 var(--space-3);
  letter-spacing: -.015em;
}
/* Thang chữ lớn hơn hẳn — Cormorant chỉ đẹp khi để to. */
h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p  { margin: 0 0 var(--space-4); }

a { color: var(--gold-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brown-900); }

/* Vòng focus luôn nhìn thấy được — người dùng bàn phím phải biết mình đang ở đâu. */
:focus-visible {
  outline: 3px solid var(--gold-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { width: min(100% - 2 * var(--space-4), var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--brown-900); color: var(--white);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);   /* >= 44px cho ngón tay */
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--gold-600); color: var(--white); }
.btn-primary:hover { background: var(--gold-700); color: var(--white); }

.btn-outline { background: transparent; color: var(--gold-700); border-color: var(--gold-400); }
.btn-outline:hover { background: var(--cream-100); color: var(--brown-900); border-color: var(--gold-600); }

.btn-dark { background: var(--brown-800); color: var(--white); }
.btn-dark:hover { background: var(--brown-900); color: var(--white); }

.btn-ghost { background: transparent; color: var(--brown-600); }
.btn-ghost:hover { background: var(--cream-100); color: var(--brown-900); }

.btn-sm { min-height: 44px; padding: 0 var(--space-4); font-size: .9rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }

/* ---------- Thanh thông báo + đầu trang ---------- */
.topbar {
  background: var(--brown-800); color: var(--cream-100);
  font-size: .875rem; text-align: center; padding: var(--space-2) var(--space-4);
}
.topbar strong { color: var(--white); }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 248, 242, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-200);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 76px; padding-block: var(--space-2);
}
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; flex-shrink: 0; }
.brand img { width: 52px; height: 52px; border-radius: 50%; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: var(--brown-900); }
.brand-sub {
  font-size: .625rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700);
}

.main-nav { display: flex; gap: var(--space-1); margin-inline: auto; }
.main-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 500; color: var(--brown-800); text-decoration: none;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.main-nav a:hover { background: var(--cream-100); color: var(--brown-900); }
.main-nav a[aria-current='page'] { color: var(--gold-700); background: var(--cream-100); }

.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 48px; height: 48px; border: none; background: transparent;
  border-radius: 50%; color: var(--brown-800); cursor: pointer; text-decoration: none;
  transition: background-color .2s var(--ease);
}
.icon-btn:hover { background: var(--cream-100); }
.icon-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute; top: 5px; right: 4px; min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--gold-600); color: var(--white);
  border-radius: var(--radius-pill); font-size: .7rem; font-weight: 700; line-height: 1;
}
.nav-toggle { display: none; }

/* Thanh tìm kiếm */
.search-form { display: flex; gap: var(--space-2); }
.search-form input {
  flex: 1; min-height: 48px; padding: 0 var(--space-4);
  border: 1.5px solid var(--cream-300); border-radius: var(--radius-pill);
  background: var(--white); font: inherit; color: var(--brown-800);
}
.search-form input::placeholder { color: var(--brown-400); }
.search-panel {
  border-bottom: 1px solid var(--cream-200); background: var(--cream-100);
  padding: var(--space-4) 0;
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-9) 0 var(--space-8); background: var(--cream-50); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: var(--space-8); align-items: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-700); font-weight: 600; margin-bottom: var(--space-4);
}
.hero-eyebrow::before {
  content: ''; width: 32px; height: 1px; background: var(--gold-400);
}
.hero h1 { margin-bottom: var(--space-4); }
.hero h1 em { font-style: italic; color: var(--gold-600); font-weight: 500; }
.hero-lede {
  font-size: 1.0625rem; line-height: 1.7; color: var(--brown-600);
  max-width: 44ch; margin-bottom: var(--space-6);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Lưới 4 ô VUÔNG đều nhau. Trước đây ô đầu kéo cao gấp đôi (span 2 hàng)
   nhưng ảnh sản phẩm lại vuông, nên với object-fit:contain thì hơn nửa ô
   là khoảng trắng. Ô vuông + ảnh vuông = không còn khoảng trống nào. */
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.hero-collage figure {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--white); box-shadow: var(--shadow);
  border: 1px solid var(--cream-200);
}
/* Ảnh sản phẩm có chữ in trên đó nên phải "contain" — cắt theo khung là mất chữ.
   KHÔNG đặt height:100% ở đây: nó sẽ đè mất aspect-ratio và kéo ô méo ra. */
.hero-collage img {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: contain; background: var(--white); padding: var(--space-3);
}

/* ---------- Dải cam kết ---------- */
.trust { border-block: 1px solid var(--cream-200); background: var(--cream-100); padding: var(--space-6) 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.trust-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.trust-item svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--gold-600); margin-top: 2px; }
.trust-item h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 700; margin-bottom: 2px; }
.trust-item p { font-size: .875rem; color: var(--brown-600); margin: 0; }

/* ---------- Khối chung ---------- */
.section { padding: var(--space-8) 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.section-head p { margin: var(--space-1) 0 0; color: var(--brown-600); }
.section-head a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--space-2); margin-right: calc(-1 * var(--space-2));
  font-weight: 600; white-space: nowrap;
}

/* Đường kẻ kép nhắc lại viền oval của logo */
.rule-double {
  border: 0; height: 4px; margin: 0 0 var(--space-6);
  border-top: 1px solid var(--gold-400); border-bottom: 1px solid var(--gold-400);
  max-width: 72px;
}

/* ---------- Thẻ danh mục ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.cat-card {
  display: block; padding: var(--space-5); text-decoration: none;
  background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold-400); }
.cat-card h3 { margin-bottom: var(--space-1); }
.cat-card p { font-size: .9rem; color: var(--brown-600); margin: 0; }
.cat-card .cat-count { display: block; margin-top: var(--space-3); font-size: .8rem; color: var(--gold-700); font-weight: 600; }

/* ---------- Thẻ sản phẩm ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.product-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-400); }
.product-media { position: relative; background: var(--white); }
.product-media img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--space-4); }
.product-badges { position: absolute; top: var(--space-3); left: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.badge {
  display: inline-block; padding: 3px var(--space-2);
  font-size: .7rem; font-weight: 700; letter-spacing: .03em;
  border-radius: var(--radius-sm); background: var(--sage-100); color: var(--sage-600);
}
.badge-sale { background: var(--danger-bg); color: var(--danger); }
.badge-gold { background: var(--cream-200); color: var(--gold-700); }

.product-body { display: flex; flex-direction: column; flex: 1; padding: var(--space-4); gap: var(--space-2); }
.product-brand { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); font-weight: 700; }
.product-name { font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.4; margin: 0; }
/* Chừa sẵn chiều cao 2 dòng: vùng bấm luôn >= 44px và các thẻ đều nhau
   dù tên sản phẩm dài ngắn khác nhau. */
.product-name a {
  display: block; min-height: 44px;
  color: var(--brown-800); text-decoration: none;
}
.product-name a:hover { color: var(--gold-700); text-decoration: underline; }
.product-meta { font-size: .85rem; color: var(--brown-600); margin: 0; }
.product-foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.price {
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700;
  color: var(--gold-700); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.price-old { font-size: .875rem; color: var(--brown-400); text-decoration: line-through; margin-left: var(--space-2); font-family: var(--font-body); font-weight: 400; }
.price-ask { font-size: 1rem; font-weight: 600; color: var(--brown-600); font-family: var(--font-body); }

/* ---------- Chi tiết sản phẩm ---------- */
.breadcrumb { font-size: .875rem; color: var(--brown-600); padding: var(--space-4) 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); color: var(--brown-400); }

.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.pd-main-img {
  background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg);
  overflow: hidden;
}
.pd-main-img img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--space-5); }
.pd-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
.pd-thumb {
  padding: 0; border: 1.5px solid var(--cream-200); border-radius: var(--radius); overflow: hidden;
  background: var(--white); cursor: pointer;
  transition: border-color .2s var(--ease);
}
.pd-thumb img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: var(--space-1); }
.pd-thumb:hover { border-color: var(--gold-400); }
.pd-thumb[aria-current='true'] { border-color: var(--gold-600); border-width: 2px; }

.pd-price { display: flex; align-items: baseline; gap: var(--space-3); margin: var(--space-4) 0; }
.pd-price .price { font-size: 2.1rem; letter-spacing: -.02em; }
.pd-specs { list-style: none; margin: var(--space-5) 0; padding: 0; border-top: 1px solid var(--cream-200); }
.pd-specs li { display: flex; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--cream-200); font-size: .95rem; }
.pd-specs dt, .pd-specs .k { flex: 0 0 130px; color: var(--brown-600); }
.pd-specs .v { font-weight: 500; }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--cream-300); border-radius: var(--radius-pill); background: var(--white); overflow: hidden; }
.qty button {
  width: 46px; height: 46px; border: none; background: transparent; cursor: pointer;
  font-size: 1.25rem; color: var(--brown-800); line-height: 1;
  transition: background-color .2s var(--ease);
}
.qty button:hover { background: var(--cream-100); }
.qty input {
  width: 52px; height: 46px; border: none; text-align: center;
  font: inherit; font-weight: 600; color: var(--brown-800); background: transparent;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.prose { max-width: 68ch; }
.prose h3 { margin-top: var(--space-6); }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: var(--space-2); }

/* ---------- Biểu mẫu ---------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-weight: 600; font-size: .925rem; margin-bottom: var(--space-2); }
.field .hint { font-weight: 400; color: var(--brown-600); font-size: .85rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--cream-300); border-radius: var(--radius);
  background: var(--white); font: inherit; color: var(--brown-800);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(154, 106, 51, .15); outline: none;
}
.field input[aria-invalid='true'], .field select[aria-invalid='true'] { border-color: var(--danger); }
.field-error { display: block; margin-top: var(--space-2); color: var(--danger); font-size: .875rem; font-weight: 500; }

.alert { padding: var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-5); font-size: .95rem; }
.alert-error { background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(179, 38, 30, .25); }
.alert-ok { background: var(--success-bg); color: var(--success); border: 1px solid rgba(46, 107, 79, .25); }
.alert-info { background: var(--cream-100); color: var(--brown-800); border: 1px solid var(--cream-300); }
.alert ul { margin: var(--space-2) 0 0; padding-left: 1.25em; }

/* ---------- Giỏ hàng ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-7); align-items: start; }
.cart-list { display: flex; flex-direction: column; gap: var(--space-4); }
.cart-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: var(--space-4); align-items: center;
  background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: var(--space-4);
}
.cart-row img { width: 96px; height: 96px; object-fit: contain; background: var(--white); border-radius: var(--radius); }
.cart-row-actions { display: flex; align-items: center; gap: var(--space-3); }

.summary {
  position: sticky; top: 100px;
  background: var(--white); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); padding: var(--space-5);
}
.summary-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; font-size: .95rem; }
.summary-total {
  border-top: 1px solid var(--cream-200); margin-top: var(--space-3); padding-top: var(--space-4);
  font-size: 1.1rem; font-weight: 700;
}
.summary-total .price { font-size: 1.45rem; }

.empty { text-align: center; padding: var(--space-9) var(--space-4); }
.empty svg { width: 64px; height: 64px; color: var(--cream-300); margin-bottom: var(--space-4); }

/* ---------- Đặt hàng ---------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-7); align-items: start; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.checkout-grid .field-full { grid-column: 1 / -1; }
.pay-option {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 1.5px solid var(--gold-400); border-radius: var(--radius); padding: var(--space-4);
  background: var(--cream-100);
}
.pay-option svg { width: 24px; height: 24px; color: var(--gold-700); flex-shrink: 0; }

/* ---------- Chân trang ---------- */
.site-footer { background: var(--brown-900); color: var(--cream-200); margin-top: var(--space-9); padding: var(--space-8) 0 var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.site-footer h3 { color: var(--white); font-family: var(--font-body); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-4); }
.site-footer a { color: var(--cream-200); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer li a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-brand p { color: var(--cream-300); font-size: .925rem; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid rgba(240, 223, 204, .18); margin-top: var(--space-7); padding-top: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: .85rem; color: var(--cream-300);
}

/* Nút gọi nhanh nổi trên máy nhỏ */
.call-fab { display: none; }

/* ---------- Máy tính bảng ---------- */
/* Menu ngang 7 mục bị vỡ 2 dòng dưới 1024px, nên máy tính bảng cũng dùng menu trượt. */
@media (max-width: 1024px) {
  /* backdrop-filter trên .site-header tạo ra khung tham chiếu mới, khiến menu
     position:fixed bên trong bị bó vào header thay vì phủ kín màn hình.
     Bỏ hiệu ứng kính mờ ở khổ nhỏ để menu trượt hoạt động đúng. */
  .site-header { backdrop-filter: none; background: var(--cream-50); }

  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 320px);
    flex-direction: column; gap: 0; margin: 0; padding: var(--space-8) var(--space-4) var(--space-4);
    background: var(--cream-50); border-left: 1px solid var(--cream-200);
    box-shadow: var(--shadow-lg); z-index: 150;
    /* visibility:hidden để menu đang đóng KHÔNG bắt được tiêu điểm bàn phím
       và không tạo thanh cuộn ngang (phần tử position:fixed không bị body cắt). */
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s var(--ease), visibility 0s linear .28s;
    overflow-y: auto;
  }
  .main-nav[data-open='true'] {
    transform: translateX(0); visibility: visible;
    transition: transform .28s var(--ease), visibility 0s;
  }
  .main-nav a { min-height: 52px; font-size: 1.05rem; border-bottom: 1px solid var(--cream-200); border-radius: 0; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(44, 32, 22, .45); z-index: 140;
    opacity: 0; pointer-events: none; transition: opacity .28s var(--ease);
  }
  .nav-backdrop[data-open='true'] { opacity: 1; pointer-events: auto; }

  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-collage { max-width: 560px; }
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Điện thoại ---------- */
@media (max-width: 767px) {
  .header-inner { min-height: 64px; }
  .brand img { width: 44px; height: 44px; }
  .brand-name { font-size: 1.15rem; }
  .brand-sub { display: none; }

  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .product-body { padding: var(--space-3); }
  .product-name { font-size: .925rem; }
  .price { font-size: 1.05rem; }

  .pd-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .checkout-grid { grid-template-columns: 1fr; }
  .trust-grid, .cat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }

  .cart-row { grid-template-columns: 72px 1fr; }
  .cart-row img { width: 72px; height: 72px; }
  .cart-row-actions { grid-column: 1 / -1; justify-content: space-between; }

  .section { padding: var(--space-7) 0; }
  .hero { padding: var(--space-6) 0; }

  /* Gọi điện là cách chốt đơn nhanh nhất với khách là mẹ bỉm đang bận tay. */
  .call-fab {
    display: inline-flex; position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90;
    width: 56px; height: 56px; align-items: center; justify-content: center;
    background: var(--gold-600); color: var(--white); border-radius: 50%;
    box-shadow: var(--shadow-lg); text-decoration: none;
  }
  .call-fab svg { width: 26px; height: 26px; }
}

/* ---------- Tôn trọng thiết lập giảm chuyển động của máy ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .product-card:hover, .cat-card:hover { transform: none; }
}

/* ---------- Khi in ra giấy ---------- */
@media print {
  .site-header, .site-footer, .topbar, .call-fab, .btn { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Bố cục hiện đại — bổ sung 09/09/2026
   ========================================================================== */

/* ---------- Dải chữ chạy ngang thay cho 4 ô cam kết tĩnh ---------- */
.marquee {
  background: var(--brown-900); color: var(--cream-100);
  padding: var(--space-3) 0; overflow: hidden;
  border-block: 1px solid var(--brown-800);
}
.marquee-track {
  display: flex; gap: var(--space-7); width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; white-space: nowrap;
}
.marquee-item svg { width: 17px; height: 17px; color: var(--gold-400); flex-shrink: 0; }
.marquee-item::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-400); margin-left: var(--space-7); opacity: .6;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: var(--space-5); }
  .marquee-item::after { display: none; }
}

/* ---------- Tiêu đề khối kiểu tạp chí: số thứ tự + gạch mảnh ---------- */
.section-head { align-items: flex-end; }
.eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700);
  margin-bottom: var(--space-3);
}
.eyebrow::before {
  content: attr(data-num); font-family: var(--font-head); font-size: 1.5rem;
  font-weight: 600; letter-spacing: 0; color: var(--cream-300); line-height: 1;
}
.eyebrow::after { content: ''; flex: 1; max-width: 72px; height: 1px; background: var(--cream-300); }

/* ---------- Sản phẩm chủ lực: khối lớn chiếm trọn chiều ngang ---------- */
.spotlight { background: var(--cream-100); padding: var(--space-9) 0; }
.spotlight-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-8); align-items: center;
}
.spotlight-media { position: relative; }
.spotlight-media img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  background: var(--white); padding: var(--space-5);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* Con số lớn mờ phía sau làm điểm nhấn thị giác */
.spotlight-media::before {
  content: '01'; position: absolute; top: -46px; left: -22px; z-index: 0;
  font-family: var(--font-head); font-size: 9rem; font-weight: 700; line-height: 1;
  color: var(--cream-300); opacity: .85; pointer-events: none;
}
.spotlight-body { position: relative; z-index: 1; }
.spotlight-badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--gold-600); color: var(--white);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.spotlight-badge svg { width: 14px; height: 14px; }
.spotlight-body h2 { margin-bottom: var(--space-4); }
.spotlight-lede { font-size: 1.0625rem; line-height: 1.7; color: var(--brown-600); max-width: 46ch; }
.spotlight-points { list-style: none; margin: var(--space-5) 0; padding: 0; display: grid; gap: var(--space-3); }
.spotlight-points li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: .95rem; }
.spotlight-points svg { width: 19px; height: 19px; color: var(--sage-600); flex-shrink: 0; margin-top: 3px; }
.spotlight-buy { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); }
.spotlight-buy .price { font-size: 2.1rem; }

/* ---------- Thẻ sản phẩm: bỏ viền, nhẹ và hiện đại hơn ---------- */
.product-card {
  border: none; background: transparent; border-radius: 0; overflow: visible;
}
.product-card:hover { transform: none; box-shadow: none; }
.product-media {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--white);
  border: 1px solid var(--cream-200);
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.product-card:hover .product-media {
  box-shadow: var(--shadow-lg); border-color: var(--gold-400); transform: translateY(-4px);
}
.product-media img { transition: transform .5s var(--ease); }
.product-card:hover .product-media img { transform: scale(1.04); }
.product-body { padding: var(--space-4) var(--space-1) 0; gap: var(--space-1); }
.product-brand { font-size: .66rem; letter-spacing: .16em; }
.product-name { line-height: 1.35; }
.product-name a { min-height: 44px; }   /* giữ đúng ngưỡng vùng chạm 44px */
.product-foot { padding-top: var(--space-2); }

.badge {
  padding: 4px var(--space-3); border-radius: var(--radius-pill);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.badge-best { background: var(--gold-600); color: var(--white); }

/* ---------- Thanh mua hàng dính đáy trên điện thoại ---------- */
.buy-bar { display: none; }

@media (max-width: 1024px) {
  .spotlight-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .spotlight-media::before { font-size: 6rem; top: -34px; left: -10px; }
  .spotlight { padding: var(--space-8) 0; }
}

@media (max-width: 767px) {
  .marquee-item { font-size: .72rem; }
  .eyebrow::before { font-size: 1.2rem; }
  .spotlight-buy .price { font-size: 1.7rem; }

  /* Trang chi tiết sản phẩm: nút mua luôn nằm trong tầm ngón tay cái. */
  .buy-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(253, 248, 242, .97); border-top: 1px solid var(--cream-300);
    box-shadow: 0 -4px 20px rgba(62, 46, 32, .1);
  }
  .buy-bar .price { font-size: 1.15rem; white-space: nowrap; }
  .buy-bar .btn { flex: 1; }
  body.has-buy-bar { padding-bottom: 84px; }
  body.has-buy-bar .call-fab { bottom: 92px; }
}

/* ---------- Ô nhập mã giảm giá ---------- */
.voucher-box { margin: var(--space-4) 0; padding-top: var(--space-4); border-top: 1px dashed var(--cream-300); }
.voucher-form { display: flex; gap: var(--space-2); }
.voucher-form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-3);
  border: 1.5px solid var(--cream-300); border-radius: var(--radius);
  background: var(--white); font: inherit; text-transform: uppercase;
  letter-spacing: .06em; color: var(--brown-800);
}
.voucher-form input::placeholder { text-transform: none; letter-spacing: 0; color: var(--brown-400); }
.voucher-form input:focus { border-color: var(--gold-600); outline: none; box-shadow: 0 0 0 3px rgba(154,106,51,.15); }
.voucher-on {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--sage-100); border: 1px dashed var(--sage-600);
  border-radius: var(--radius); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}
.voucher-on strong { display: block; color: var(--sage-600); letter-spacing: .06em; }
.voucher-on span { font-size: .82rem; color: var(--brown-600); }
.voucher-err { margin: var(--space-2) 0 0; font-size: .85rem; color: var(--danger); line-height: 1.45; }
.summary-discount strong { color: var(--sage-600); }

/* ---------- Dải ưu đãi (voucher + miễn phí ship) ---------- */
.deals { background: var(--cream-50); padding: var(--space-8) 0 var(--space-7); }
.deals-head { text-align: center; margin-bottom: var(--space-6); }
.deals-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: var(--space-2); }
.deals-head p { color: var(--brown-600); margin: 0; font-size: .95rem; }

.deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.deals-grid[data-count='1'] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.deals-grid[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }

.deal {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-2); padding: var(--space-6) var(--space-4);
  background: var(--white); border: 1.5px dashed var(--gold-400);
  border-radius: var(--radius-lg); position: relative;
}
/* Hai vết khuyết hai bên cho giống chiếc phiếu giảm giá */
.deal::before, .deal::after {
  content: ''; position: absolute; top: 50%; width: 20px; height: 20px;
  background: var(--cream-50); border: 1.5px dashed var(--gold-400);
  border-radius: 50%; transform: translateY(-50%);
}
.deal::before { left: -11px; clip-path: inset(0 0 0 50%); }
.deal::after { right: -11px; clip-path: inset(0 50% 0 0); }

.deal-icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--cream-100); color: var(--gold-700);
  margin-bottom: var(--space-1);
}
.deal-icon svg { width: 24px; height: 24px; }
.deal-value {
  font-family: var(--font-body); font-size: 1.3rem; font-weight: 800;
  color: var(--gold-700); margin: 0; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.deal-cond { margin: 0; font-size: .95rem; color: var(--brown-600); }
.deal-cond strong { color: var(--brown-800); }
.deal-note { margin: 0; font-size: .78rem; color: var(--brown-400); line-height: 1.4; max-width: 30ch; }

.deal-code {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 48px; margin-top: var(--space-2); padding: var(--space-2) var(--space-5);
  background: var(--brown-800); color: var(--white);
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.deal-code:hover { background: var(--brown-900); }
.deal-code:active { transform: translateY(1px); }
.deal-code-text { font-weight: 700; letter-spacing: .14em; font-size: 1rem; }
.deal-code-hint { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.deal-code[data-copied='true'] { background: var(--sage-600); }

/* Nhắc mã ngay cạnh ô nhập trong giỏ hàng */
.voucher-goi-y { margin: var(--space-3) 0 0; font-size: .82rem; color: var(--brown-600); line-height: 1.5; }
.voucher-goi-y button {
  border: none; background: var(--cream-200); color: var(--gold-700);
  font: inherit; font-weight: 700; letter-spacing: .08em;
  padding: 3px var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
}
.voucher-goi-y button:hover { background: var(--cream-300); }

@media (max-width: 1024px) {
  .deals-grid, .deals-grid[data-count='2'] { grid-template-columns: 1fr; justify-content: stretch; }
  .deals-grid[data-count='1'] { grid-template-columns: 1fr; }
  .deal { padding: var(--space-5) var(--space-4); }
}

/* ==========================================================================
   Hiệu ứng động cho dải ưu đãi
   Nguyên tắc: KHÔNG bao giờ ẩn nội dung bằng CSS thuần. Trạng thái ẩn ban đầu
   do JavaScript gắn vào (.reveal), nên nếu JS hỏng hoặc người dùng bật chế độ
   giảm chuyển động thì mọi thứ vẫn hiện đầy đủ.
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(26px); }
.reveal-in {
  opacity: 1; transform: none;
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--delay, 0ms);
}

/* Vệt sáng quét ngang tấm phiếu */
.deal-shine {
  position: absolute; inset: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none;
}
.deal-shine::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; left: -70%; width: 45%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(212,175,116,.30) 45%,
    rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%);
  transform: rotate(14deg) translateX(-120%);
  animation: shine 6.5s var(--shine-delay, 0s) ease-in-out infinite;
}
@keyframes shine {
  0%, 62% { transform: rotate(14deg) translateX(-120%); }
  78%, 100% { transform: rotate(14deg) translateX(560%); }
}

/* Thẻ nhấc lên khi rê chuột */
.deal {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.deal:hover {
  transform: translateY(-6px);
  border-color: var(--gold-600);
  box-shadow: var(--shadow-lg);
}
.deal:hover::before, .deal:hover::after { border-color: var(--gold-600); }

/* Biểu tượng dập dềnh nhẹ */
.deal-icon { animation: noi 3.6s var(--float-delay, 0s) ease-in-out infinite; }
@keyframes noi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.deal:hover .deal-icon { background: var(--gold-600); color: var(--white); transition: background-color .3s var(--ease), color .3s var(--ease); }

/* Chấm nhấp nháy trên thẻ miễn phí ship — báo "đang áp dụng" */
.deal-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sage-600); margin-top: var(--space-2);
}
.deal-live i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sage-600);
  position: relative; flex-shrink: 0;
}
.deal-live i::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--sage-600); animation: nhipDap 2s ease-out infinite;
}
@keyframes nhipDap {
  0% { transform: scale(1); opacity: .75; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* Nút chép: bật nhẹ khi chép xong */
.deal-code[data-copied='true'] { animation: bat .4s var(--ease); }
@keyframes bat { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* Con số đang chạy giữ chỗ ổn định, không làm giật bố cục */
.deal-value { font-variant-numeric: tabular-nums; }

/* Tôn trọng thiết lập giảm chuyển động: tắt sạch, giữ nguyên nội dung */
@media (prefers-reduced-motion: reduce) {
  .deal-shine::after, .deal-icon, .deal-live i::after { animation: none; }
  .deal-shine { display: none; }
  .deal:hover { transform: none; }
  .reveal, .reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Tinh chỉnh cho điện thoại — soát ngày 09/09/2026 trên khổ 375px
   Chữ tiếng Việt có dấu cần nhiều chiều cao hơn tiếng Anh; dưới 11px thì các
   dấu (ế, ữ, ộ) dính vào nhau, đọc trên điện thoại rất mệt.
   ========================================================================== */
@media (max-width: 767px) {
  .badge            { font-size: .72rem; padding: 4px 10px; }   /* 10,6px -> 11,5px */
  .product-brand    { font-size: .72rem; letter-spacing: .12em; }
  .deal-code-hint   { font-size: .72rem; }
  .deal-live        { font-size: .75rem; }
  .spotlight-badge  { font-size: .75rem; }
  .eyebrow          { font-size: .75rem; }
  .marquee-item     { font-size: .75rem; }

  /* Đường dẫn đầu trang: trước chỉ cao 19px, ngón tay bấm dễ trượt */
  .breadcrumb ol { gap: var(--space-1) var(--space-2); align-items: center; }
  .breadcrumb li a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-inline: 2px;
  }
  .breadcrumb { padding: var(--space-2) 0; }

  /* Nút mã gợi ý trong giỏ: trước cao 26px */
  .voucher-goi-y button {
    min-height: 44px; padding: var(--space-2) var(--space-3);
    margin: 2px 0; display: inline-flex; align-items: center;
  }
  .voucher-goi-y { line-height: 1.9; }
}

/* ==========================================================================
   Khung chat góc dưới — KHÔNG dùng hộp che giữa màn hình.
   Khách vào chỉ thấy một nút nhỏ; bấm mới mở, và không bị hỏi thông tin gì
   cho tới khi shop chưa trả lời được.
   ========================================================================== */

.chat-nut {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 96;
  display: grid; place-items: center; width: 56px; height: 56px;
  border: none; border-radius: 50%; cursor: pointer;
  background: var(--gold-600); color: var(--white); box-shadow: var(--shadow-lg);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.chat-nut:hover { background: var(--gold-700); transform: translateY(-2px); }
.chat-nut svg { width: 25px; height: 25px; }
.chat-nut::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold-600); animation: song 3s ease-out infinite;
}
@keyframes song { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.65); opacity: 0; } }
.chat-nut[hidden] { display: none !important; }
/* Chấm đỏ báo có tin mới khi khung đang thu nhỏ */
.chat-nut-cham {
  position: absolute; top: 4px; right: 4px; width: 13px; height: 13px;
  background: var(--danger); border: 2px solid var(--white); border-radius: 50%;
}

/* display:flex bên dưới ĐÈ MẤT lệnh ẩn mặc định của thuộc tính hidden,
   nên khung tự mở sẵn khi khách vừa vào. Phải khai báo tường minh. */
.chat-khung[hidden] { display: none !important; }
.chat-cho[hidden] { display: none !important; }

.chat-khung {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 97;
  width: min(92vw, 348px); max-height: min(72vh, 540px);
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: chatLen .26s var(--ease);
}
@keyframes chatLen { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.chat-dau {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--brown-800); color: var(--cream-100); flex-shrink: 0;
}
.chat-dau-ten strong { display: block; font-size: .95rem; color: var(--white); }
.chat-dau-ten small { display: block; font-size: .72rem; opacity: .8; }
.chat-dau-nut { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

.chat-kenh {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; color: var(--cream-100); text-decoration: none;
  font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  transition: background-color .2s var(--ease);
}
.chat-kenh:hover { background: rgba(255,255,255,.14); color: #fff; }
.chat-kenh svg { width: 19px; height: 19px; }
.chat-kenh-zalo { color: #6FB4FF; }
.chat-kenh-mess { color: #D9A8FF; }
.chat-kenh-goi  { color: #A9D39B; }

.chat-dong {
  width: 44px; height: 44px; border: none; background: transparent; color: var(--cream-200);
  font-size: 1.5rem; line-height: 1; border-radius: 50%; cursor: pointer; flex-shrink: 0;
}
.chat-dong:hover { background: rgba(255,255,255,.14); color: #fff; }

.chat-than {
  flex: 1; overflow-y: auto; padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--cream-50); min-height: 160px;
}
.chat-tin { max-width: 84%; }
.chat-tin p {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); font-size: .92rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.chat-shop { align-self: flex-start; }
.chat-shop p { background: var(--white); border: 1px solid var(--cream-200); border-bottom-left-radius: 4px; }
.chat-khach { align-self: flex-end; }
.chat-khach p { background: var(--gold-600); color: var(--white); border-bottom-right-radius: 4px; }
.chat-gio { display: block; font-size: .68rem; color: var(--brown-400); margin-top: 3px; padding-inline: var(--space-2); }
.chat-khach .chat-gio { text-align: right; }

/* Ô xin số điện thoại — nằm trong luồng chat, không phải hộp che màn hình */
.chat-cho {
  padding: var(--space-3) var(--space-4); background: var(--cream-100);
  border-top: 1px solid var(--cream-200); flex-shrink: 0;
}
.chat-cho > p { margin: 0 0 var(--space-2); font-size: .82rem; line-height: 1.5; color: var(--brown-600); }
#chat-sdt-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
#chat-sdt-form input {
  flex: 1; min-width: 92px; min-height: 44px; padding: 0 var(--space-3);
  border: 1.5px solid var(--cream-300); border-radius: var(--radius);
  background: var(--white); font: inherit; font-size: .9rem; color: var(--brown-800);
}
#chat-sdt-form input:focus { border-color: var(--gold-600); outline: none; }
.chat-cho-loi { margin: var(--space-2) 0 0; font-size: .8rem; color: var(--danger); }

.chat-nhap {
  display: flex; gap: var(--space-2); padding: var(--space-3);
  border-top: 1px solid var(--cream-200); background: var(--white); flex-shrink: 0;
}
.chat-nhap input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-4);
  border: 1.5px solid var(--cream-300); border-radius: var(--radius-pill);
  background: var(--cream-50); font: inherit; color: var(--brown-800);
}
.chat-nhap input:focus { border-color: var(--gold-600); outline: none; background: var(--white); }
.chat-gui {
  display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
  border: none; border-radius: 50%; background: var(--gold-600); color: var(--white); cursor: pointer;
}
.chat-gui:hover { background: var(--gold-700); }
.chat-gui[disabled] { opacity: .5; cursor: not-allowed; }
.chat-gui svg { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .chat-nut { right: var(--space-3); bottom: var(--space-3); }
  .chat-khung { right: var(--space-3); left: var(--space-3); width: auto; bottom: var(--space-3); max-height: 76vh; }
  body.has-buy-bar .chat-nut { bottom: 88px; }
  body.has-buy-bar .chat-khung { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-khung { animation: none; }
  .chat-nut::after { animation: none; }
  .chat-nut:hover { transform: none; }
}