/* ============================================================================
   LINK 2 LINK VIỆT NAM — HỆ THỐNG THIẾT KẾ  /  DESIGN SYSTEM
   ---------------------------------------------------------------------------
   Bảng màu lấy trực tiếp từ chính bộ ảnh của công ty: nắng ấm, lông vàng kem,
   lá thu, đệm vải nhạt. Ảnh được để sáng nguyên bản — không phủ lớp đen lên
   trên, vì lớp đen giết chết đúng thứ làm bộ ảnh đẹp.

   Nền sáng = dành cho người nuôi thú cưng.
   Nền xanh rêu đậm = dành cho phần thương mại (đại lý, hợp tác thương hiệu).
   Màu gạch nung = CHỈ dùng cho nút mở đại lý, để nó luôn có một nghĩa duy nhất.
   ========================================================================= */

:root {
  /* Bề mặt */
  --bone:      #FBF8F3;
  --sand:      #F2ECE2;
  --shell:     #FFFFFF;
  --shell-2:   #FAF6F0;

  /* Chữ */
  --ink:       #211E19;
  --ink-2:     #4A443B;
  --ink-3:     #7C7365;

  /* Nhấn */
  --amber:     #B8791E;
  --amber-lt:  #E0A94A;
  --amber-bg:  #FDF3E1;
  --oxide:     #A6432B;
  --oxide-bg:  #FBEDE9;

  /* Bề mặt thương mại */
  --pine:      #22362A;
  --pine-2:    #2E4737;
  --pine-3:    #3F5D4A;
  --pine-ink:  #E8EFE9;

  /* Đường kẻ */
  --line:      rgba(33, 30, 25, .12);
  --line-2:    rgba(33, 30, 25, .06);
  --line-pine: rgba(232, 239, 233, .16);

  /* Hình khối */
  --r:     12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --gut:   clamp(1.15rem, 4vw, 3.25rem);
  --max:   1280px;
  --narrow: 720px;

  /* Chữ */
  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;

  /* Đổ bóng — ấm, không xám */
  --sh-1: 0 1px 2px rgba(33,30,25,.05), 0 2px 8px rgba(33,30,25,.04);
  --sh-2: 0 2px 6px rgba(33,30,25,.06), 0 12px 28px rgba(33,30,25,.07);
  --sh-3: 0 8px 20px rgba(33,30,25,.08), 0 28px 60px rgba(33,30,25,.10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wrap { width: min(100% - calc(var(--gut) * 2), var(--max)); margin-inline: auto; }
.wrap--narrow { width: min(100% - calc(var(--gut) * 2), var(--narrow)); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   CHỮ  /  TYPE
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -.02em; font-weight: 700; }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }

h1 { font-size: clamp(2.35rem, 5.6vw, 4.35rem); line-height: 1.04; }
h2 { font-size: clamp(1.72rem, 3.6vw, 2.85rem); line-height: 1.1; }
h3 { font-size: 1.16rem; font-weight: 700; }
h4 { font-size: .95rem; font-weight: 700; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block; margin: 0 0 1rem;
  font-size: .73rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--amber);
}
.lede { font-size: clamp(1.02rem, 1.55vw, 1.18rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.small { font-size: .88rem; color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   ĐẦU TRANG  /  MASTHEAD
   --------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 80;
  background: rgba(251, 248, 243, .86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line-2);
}
.masthead .wrap { display: flex; align-items: center; gap: 1.25rem; height: 74px; }

.brandmark { display: flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.brandmark img { height: 34px; width: auto; flex-shrink: 0; }
.brandmark b {
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Màn hình hẹp: chỉ giữ logo. Logo đã có chữ "LINK2LINK" nên không mất nhận diện,
   và nút Menu không bị đẩy ra ngoài màn hình. */
@media (max-width: 480px) { .brandmark b { display: none; } }
.brandmark b i { font-style: normal; color: var(--amber); }

.masthead nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.masthead nav a {
  padding: .5rem .82rem; border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background .15s, color .15s;
}
.masthead nav a:hover { background: rgba(33,30,25,.055); color: var(--ink); }
.masthead nav a[aria-current='page'] { color: var(--amber); background: var(--amber-bg); font-weight: 700; }

.nav-end { display: flex; align-items: center; gap: .55rem; margin-left: .6rem; padding-left: .8rem; border-left: 1px solid var(--line); }
/* Nút chuyển ngôn ngữ dạng hai ô — luôn thấy rõ đang ở ngôn ngữ nào */
.langs {
  display: inline-flex; align-items: center; padding: 3px;
  background: rgba(33,30,25,.05); border: 1px solid var(--line); border-radius: 999px;
}
.langs a {
  display: block; padding: .3rem .68rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-3); text-decoration: none;
  transition: color .15s, background .15s;
}
.langs a:hover { color: var(--ink); }
.langs a[aria-current='true'] {
  background: var(--shell); color: var(--ink);
  box-shadow: 0 1px 3px rgba(33,30,25,.14);
  cursor: default;
}

.navtoggle {
  display: none; margin-left: auto; align-items: center; gap: .5rem;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer;
}
.navtoggle span { display: block; width: 15px; height: 9px; position: relative; }
.navtoggle span::before, .navtoggle span::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: transform .2s ease;
}
.navtoggle span::before { top: 0; }
.navtoggle span::after  { bottom: 0; }
.navtoggle[aria-expanded='true'] span::before { transform: translateY(3.7px) rotate(45deg); }
.navtoggle[aria-expanded='true'] span::after  { transform: translateY(-3.8px) rotate(-45deg); }

@media (max-width: 1040px) {
  .navtoggle { display: inline-flex; }
  .masthead nav {
    position: absolute; top: 74px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .1rem;
    background: var(--bone); border-bottom: 1px solid var(--line);
    padding: .7rem var(--gut) 1.15rem; box-shadow: var(--sh-2);
  }
  .masthead nav[hidden] { display: none; }
  .masthead nav a { padding: .8rem .9rem; font-size: .98rem; }
  .nav-end { margin: .5rem 0 0; padding: .8rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------------------
   NÚT  /  BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: .94rem; font-weight: 700; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  transition: transform .14s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1.5px); background: var(--ink); color: var(--bone); }
.btn:active { transform: translateY(0); }

.btn--amber  { background: var(--amber); border-color: var(--amber); color: #fff; box-shadow: var(--sh-1); }
.btn--amber:hover { background: #A06714; border-color: #A06714; color: #fff; box-shadow: var(--sh-2); }

/* Gạch nung — CHỈ dùng cho hành động mở đại lý */
.btn--oxide  { background: var(--oxide); border-color: var(--oxide); color: #fff; box-shadow: var(--sh-1); }
.btn--oxide:hover { background: #8E3823; border-color: #8E3823; color: #fff; box-shadow: var(--sh-2); }

.btn--ghost  { border-color: var(--line); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }

.btn--light  { background: var(--shell); border-color: var(--shell); color: var(--ink); box-shadow: var(--sh-1); }
.btn--light:hover { background: var(--shell); border-color: var(--shell); color: var(--ink); box-shadow: var(--sh-2); }

.btn--onpine { border-color: var(--line-pine); color: var(--pine-ink); }
.btn--onpine:hover { background: var(--pine-ink); border-color: var(--pine-ink); color: var(--pine); }

/* Nút đặt trên ảnh — viền trắng rõ, đọc được trên mọi nền ảnh */
.btn--onimage {
  border-color: rgba(255,255,255,.65); color: #fff;
  background: rgba(255,255,255,.10); backdrop-filter: blur(6px);
}
.btn--onimage:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn--sm { padding: .6rem 1.15rem; font-size: .86rem; }

/* ---------------------------------------------------------------------------
   HERO — ẢNH LÀ NHÂN VẬT CHÍNH
   Chữ nằm ở đáy trái, trên một lớp chuyển màu tối ấm chỉ ở vùng đó. Toàn bộ
   phần còn lại của ảnh giữ nguyên độ sáng và màu thật.
   (Bản trước phủ kem 97% lên toàn ảnh — chữ thì đọc được nhưng ảnh biến mất.)
   --------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--sand); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center 42%); }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(28,22,16,.86) 0%, rgba(28,22,16,.62) 26%, rgba(28,22,16,.24) 52%, rgba(28,22,16,.04) 75%),
    linear-gradient(to right, rgba(28,22,16,.52) 0%, rgba(28,22,16,.18) 42%, transparent 70%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end;
  min-height: min(84vh, 760px);
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(2.75rem, 6vw, 4.25rem);
  max-width: 40rem;
}
.hero .eyebrow { color: var(--amber-lt); }
.hero h1 { margin-bottom: 1.15rem; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
/* Xuống dòng ở đúng chỗ, tránh chữ cuối bị rớt một mình xuống dòng */
.hero h1 em { display: block; font-style: italic; color: var(--amber-lt); }
.hero .lede { margin-bottom: 2rem; max-width: 44ch; color: rgba(255,255,255,.90); text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 760px) {
  .hero-inner { min-height: min(76vh, 620px); padding-top: 6rem; }
  .hero::after {
    background: linear-gradient(to top, rgba(28,22,16,.90) 0%, rgba(28,22,16,.66) 34%, rgba(28,22,16,.22) 66%, rgba(28,22,16,.06) 100%);
  }
}

/* ---------------------------------------------------------------------------
   LỐI VÀO THEO LOÀI — hai ô ảnh lớn "Cho chó" / "Cho mèo"
   --------------------------------------------------------------------------- */
.species { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 820px) { .species { grid-template-columns: 1fr; } }
.speciescard {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 340px; border-radius: var(--r-xl); text-decoration: none; color: #fff;
  background: var(--sand); box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.speciescard img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.speciescard::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(24,19,14,.90) 0%, rgba(24,19,14,.55) 42%, rgba(24,19,14,.10) 78%);
}
.speciescard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.speciescard:hover img { transform: scale(1.05); }
.sc-body { position: relative; z-index: 2; padding: clamp(1.5rem, 3vw, 2.25rem); }
.sc-body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 3.4vw, 2.5rem); color: #fff; margin-bottom: .5rem; }
.sc-body p { font-size: .95rem; color: rgba(255,255,255,.85); max-width: 38ch; margin-bottom: 1rem; }
.sc-body .go { font-weight: 700; font-size: .93rem; color: var(--amber-lt); }

/* ---------------------------------------------------------------------------
   DẢI MỜI HỢP TÁC — một khối gọn, không phải cả một mục lớn
   --------------------------------------------------------------------------- */
.trade--band { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.band {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
@media (max-width: 860px) { .band { grid-template-columns: 1fr; } }
.band h2 { font-size: clamp(1.5rem, 2.8vw, 2.15rem); margin-bottom: .7rem; }
.band .lede { max-width: 56ch; margin: 0; }
.band-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.band--quiet {
  padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--sand);
  border: 1px solid var(--line); border-radius: var(--r-xl);
}

/* Hero phụ cho các trang trong — gọn hơn */
.pagehead { position: relative; overflow: hidden; background: var(--sand); }
.pagehead-media { position: absolute; inset: 0; z-index: 0; }
.pagehead-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(251,248,243,.97) 0%, rgba(251,248,243,.88) 42%, rgba(251,248,243,.35) 78%);
}
.pagehead > .wrap { position: relative; z-index: 2; padding: clamp(2.6rem, 6vw, 4.75rem) 0; }
.pagehead h1 { margin-bottom: .9rem; }
.pagehead .lede { max-width: 54ch; }

/* Logo trên trang thương hiệu — nền ở đây SÁNG, nên quy tắc đảo lại so với thẻ */
.logo-bare { height: 46px; width: auto; margin-bottom: 1.1rem; }
.logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  height: 62px; padding: 0 1.1rem; margin-bottom: 1.1rem; border-radius: 12px;
}
.logo-plate--dark { background: var(--pine); box-shadow: var(--sh-1); }
.logo-plate img { height: 32px; width: auto; object-fit: contain; }

.crumb { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ink-3); margin-bottom: 1rem; flex-wrap: wrap; }
.crumb a { text-decoration: none; color: var(--ink-3); }
.crumb a:hover { color: var(--amber); }
.crumb span { opacity: .5; }

/* ---------------------------------------------------------------------------
   BẢNG PHÂN TÍCH  —  yếu tố nhận diện chính của cả website
   Lấy nguyên hình thức bảng thông số in ở mặt sau bao thức ăn.
   --------------------------------------------------------------------------- */
.spec {
  background: var(--shell); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1);
}
.spec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .82rem 1.15rem; background: var(--amber-bg);
  border-bottom: 1px solid var(--line-2);
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber);
}
.spec-head em { font-style: normal; font-weight: 600; letter-spacing: .04em; text-transform: none; font-size: .74rem; opacity: .75; }
.spec dl { margin: 0; }
.spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .72rem 1.15rem; border-top: 1px solid var(--line-2); font-size: .91rem;
}
.spec-row:first-child { border-top: 0; }
.spec-row dt { margin: 0; color: var(--ink-2); flex-shrink: 0; }
/* Giá trị ngắn (số liệu) giữ trên một dòng; giá trị dài như tên nhà máy thì
   cho xuống dòng thay vì bị cắt mất chữ ở mép phải. */
.spec-row dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.spec-row dd.missing { color: var(--amber); font-weight: 600; font-size: .82rem; font-style: italic; }
.spec-foot { padding: .7rem 1.15rem; border-top: 1px solid var(--line-2); background: var(--shell-2); font-size: .78rem; color: var(--ink-3); }

/* Bảng số liệu lớn trên hero */
.spec--stat .spec-row { padding: .95rem 1.2rem; }
.spec--stat .spec-row dd { font-family: var(--serif); font-size: 1.75rem; font-weight: 600; color: var(--amber); }
.spec--stat .spec-row dd.missing { font-family: var(--sans); font-size: .82rem; }

/* ---------------------------------------------------------------------------
   PHẦN TRANG  /  SECTIONS
   --------------------------------------------------------------------------- */
.section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.section--sand { background: var(--sand); }
.section--tight { padding: clamp(2.25rem, 4vw, 3.25rem) 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2 { margin-bottom: .85rem; }

/* ---------------------------------------------------------------------------
   HAI LỐI VÀO  /  DOORS
   --------------------------------------------------------------------------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 820px) { .doors { grid-template-columns: 1fr; } }

.door {
  display: flex; flex-direction: column; text-decoration: none;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.door:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: rgba(33,30,25,.18); }
.door h3, .door h2 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin-bottom: .65rem; }
.door p { color: var(--ink-2); font-size: .95rem; margin-bottom: 1.4rem; }
.door .go { margin-top: auto; font-weight: 700; font-size: .93rem; color: var(--amber); }
.door--trade { background: var(--pine); border-color: var(--pine); color: var(--pine-ink); }
.door--trade p { color: rgba(232,239,233,.78); }
.door--trade .go { color: var(--amber-lt); }

/* ---------------------------------------------------------------------------
   Ô THƯƠNG HIỆU  —  ảnh lớn, phủ tối từ dưới lên để chữ đọc được trên mọi ảnh
   --------------------------------------------------------------------------- */
.brandgrid { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .brandgrid { grid-template-columns: 1fr; } }

.brandcard {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 330px; padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-lg); text-decoration: none; color: #fff;
  background: var(--pine-2); box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brandcard img.bc-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
/* Thương hiệu chưa có ảnh nền — dùng màu nhận diện, không để ô xám trống */
.brandcard--flat { background: var(--accent, var(--pine-2)); }
.brandcard--flat::after { background: linear-gradient(to top, rgba(0,0,0,.34), rgba(0,0,0,.06)); }
.pagehead--flat { background: var(--sand); }

.brandcard::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(20,17,13,.93) 0%, rgba(20,17,13,.74) 30%, rgba(20,17,13,.34) 58%, rgba(20,17,13,.10) 100%);
}
.brandcard:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.brandcard:hover img.bc-bg { transform: scale(1.045); }
.bc-body { position: relative; z-index: 2; width: 100%; }
/* Logo là hình vẽ trắng — để thẳng trên ảnh đã phủ tối, không cần nền */
.bc-logo { height: 30px; width: auto; margin-bottom: 1rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }

/* Logo là hình vẽ đậm — cần tấm nền sáng mới đọc được */
.bc-plate {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 .85rem; margin-bottom: 1rem;
  background: rgba(255,255,255,.94); border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.bc-plate img { height: 26px; width: auto; object-fit: contain; }
.bc-tier {
  display: inline-block; margin-bottom: .7rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--amber-lt);
}
.brandcard h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .5rem; color: #fff; }
.brandcard p { font-size: .92rem; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 44ch; margin-bottom: 1.1rem; }
.bc-meta { display: flex; flex-wrap: wrap; gap: .45rem; }
.bc-chip {
  font-size: .74rem; font-weight: 600; padding: .3rem .72rem; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
}

/* ---------------------------------------------------------------------------
   DANH MỤC  /  CATALOGUE
   --------------------------------------------------------------------------- */
.catalog { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 1000px) { .catalog { grid-template-columns: 1fr; } }

.searchbar { position: relative; margin-bottom: 1.35rem; }
.searchbar input {
  width: 100%; font: inherit; font-size: .97rem; color: var(--ink);
  padding: .88rem 1.05rem .88rem 2.75rem;
  background: var(--shell); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--sh-1); transition: border-color .15s, box-shadow .15s;
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.searchbar svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--ink-3); fill: none; stroke-width: 2; }

.filters { background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); position: sticky; top: 94px; }
@media (max-width: 1000px) { .filters { position: static; } }
.filters-top { display: flex; align-items: center; justify-content: space-between; padding: .95rem 1.15rem; border-bottom: 1px solid var(--line-2); background: var(--shell-2); }
.filters-top h2 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.filters-clear { font: inherit; font-size: .8rem; font-weight: 600; color: var(--amber); background: none; border: 0; cursor: pointer; padding: 0; }
.filters-clear[hidden] { display: none; }
.fgroup { padding: 1.05rem 1.15rem; border-top: 1px solid var(--line-2); }
.fgroup:first-of-type { border-top: 0; }
.fgroup h3 { margin: 0 0 .7rem; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.fgroup label { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .92rem; color: var(--ink-2); cursor: pointer; }
.fgroup label:hover { color: var(--ink); }
.fgroup input { width: 1rem; height: 1rem; accent-color: var(--amber); flex-shrink: 0; }
.fgroup .n { margin-left: auto; font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.count { font-size: .9rem; color: var(--ink-3); margin: 0 0 1.1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 1.1rem; }

.card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: rgba(33,30,25,.18); }
.card-img {
  aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 1.1rem;
  background: radial-gradient(75% 62% at 50% 42%, #fff 0%, var(--sand) 100%);
  border-bottom: 1px solid var(--line-2);
}
.card-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.card-img .ph { font-size: .76rem; font-weight: 600; color: var(--ink-3); opacity: .65; text-align: center; }
.card-body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.card-brand { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: .4rem; }
.card h3 { font-family: var(--sans); font-size: .99rem; font-weight: 700; line-height: 1.38; letter-spacing: -.005em; margin-bottom: .25rem; }
/* Tên dòng sản phẩm: nhiều mã chỉ đặt tên theo mùi hương nên nếu không ghi
   dòng thì hai sản phẩm khác nhau trông y hệt nhau trên danh mục. */
.card-line { font-size: .82rem; color: var(--ink-3); line-height: 1.35; margin-bottom: .7rem; }
.card .tags { margin-top: auto; }

.tags { display: flex; flex-wrap: wrap; gap: .32rem; }
.tag { font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--sand); color: var(--ink-2); }
.tag--gf { background: var(--amber-bg); color: var(--amber); }
.tag--pine { background: rgba(34,54,42,.09); color: var(--pine-2); }

.empty {
  grid-column: 1 / -1; text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 2rem;
  background: var(--shell); border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink-2);
}
.empty h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; margin-bottom: .6rem; }
.empty a { color: var(--amber); font-weight: 600; }

/* ---------------------------------------------------------------------------
   TRANG SẢN PHẨM  /  PRODUCT DETAIL
   --------------------------------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.pdp-media {
  border-radius: var(--r-xl); overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem);
  background: radial-gradient(70% 58% at 50% 40%, #fff 0%, var(--sand) 100%);
  border: 1px solid var(--line); display: grid; place-items: center; aspect-ratio: 1 / 1;
}
.pdp-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pdp-media .ph { color: var(--ink-3); font-size: .9rem; text-align: center; }
.pdp h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .8rem; }
.pdp-brand { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: .7rem; display: block; text-decoration: none; }
.pdp-desc { color: var(--ink-2); margin-bottom: 1.6rem; }
.pdp-desc p { margin-bottom: .8rem; }
.pdp-block { margin-top: 1.6rem; }
.pdp-block h2 { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .8rem; }

.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
.size-chip {
  padding: .6rem 1.05rem; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--shell); font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.size-chip small { display: block; font-size: .74rem; font-weight: 500; color: var(--ink-3); margin-top: .1rem; }

.notice {
  padding: 1.05rem 1.2rem; border-radius: var(--r); font-size: .91rem; line-height: 1.55;
  background: var(--amber-bg); border: 1px solid rgba(184,121,30,.22); color: #7A5210;
}
.notice a { color: var(--amber); font-weight: 700; }

.feeding { width: 100%; border-collapse: collapse; font-size: .9rem; }
.feeding th, .feeding td { padding: .62rem .8rem; text-align: left; border-bottom: 1px solid var(--line-2); }
.feeding th { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.feeding td { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   CÁC BƯỚC KIỂM TRA  /  VERIFICATION STEPS
   --------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: s; }
/* Bốn bước xếp ngang trên trang chủ — gọn hơn danh sách dọc dài */
.steps--row { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.steps--row .step { grid-template-columns: 1fr; gap: .85rem; }
.step {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 1.2rem; align-items: start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
@media (max-width: 620px) { .step { grid-template-columns: 1fr; gap: .75rem; } }
.step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.55rem; height: 2.55rem; border-radius: 50%;
  background: var(--amber-bg); border: 1px solid rgba(184,121,30,.25);
  color: var(--amber); font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums;
}
.step h3 { margin-bottom: .45rem; font-size: 1.1rem; }
.step p { color: var(--ink-2); font-size: .94rem; }
.flag { margin-top: .7rem; padding: .8rem 1rem; border-radius: var(--r); background: var(--oxide-bg); border: 1px solid rgba(166,67,43,.2); color: #7E3220; font-size: .89rem; }

/* ---------------------------------------------------------------------------
   ĐIỂM BÁN  /  STOCKISTS
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   ĐIỂM BÁN — bản đồ tỉnh thành + bộ lọc
   257 cửa hàng trong một danh sách dọc thì không ai cuộn hết. Bản đồ và các
   nút tỉnh/thành cho phép nhảy thẳng tới khu vực cần tìm.
   --------------------------------------------------------------------------- */
.stocklayout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
@media (max-width: 1000px) { .stocklayout { grid-template-columns: 1fr; } }
.stockside { position: sticky; top: 94px; }
@media (max-width: 1000px) { .stockside { position: static; } }

.mapwrap { padding: 1.1rem; background: var(--shell); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.vnmap { width: 100%; height: auto; display: block; }
.vnland { fill: var(--sand); stroke: rgba(33,30,25,.18); stroke-width: .7; stroke-linejoin: round; }
.vnmap circle { fill: rgba(184,121,30,.42); stroke: var(--amber); stroke-width: 1.4; transition: fill .15s, stroke-width .15s; }
.vnmap text { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink-2); }
.vnmap text.sm { font-size: 10.5px; fill: var(--ink-3); }
.mapdot { cursor: pointer; }
.mapdot:hover circle, .mapdot:focus-visible circle { fill: rgba(184,121,30,.55); stroke-width: 2.2; }
.mapdot.is-on circle { fill: var(--amber); stroke: var(--amber); }
.mapdot.is-on text { fill: var(--ink); font-weight: 700; }
.mapdot:focus { outline: none; }
.mapnote { margin: .85rem 0 0; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink-2);
  padding: .42rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--shell); cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.chip span { font-size: .76rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--amber); color: var(--ink); }
.chip.is-on { background: var(--amber); border-color: var(--amber); color: #fff; }
.chip.is-on span { color: rgba(255,255,255,.8); }

.province-n { font-family: var(--sans); font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.province { margin-bottom: 2.25rem; }
.province h2 { font-family: var(--serif); font-weight: 600; font-size: 1.22rem; margin-bottom: .9rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.stockist {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center;
  padding: 1.1rem 1.25rem; margin-bottom: .7rem;
  background: var(--shell); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1);
}
@media (max-width: 660px) { .stockist { grid-template-columns: 1fr; } }
.stockist h3 { font-size: 1rem; margin-bottom: .25rem; }
.stockist p { font-size: .89rem; color: var(--ink-3); margin: 0; }
.stockist .tags { margin-top: .55rem; }
.stockist-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   BIỂU MẪU  /  FORMS
   --------------------------------------------------------------------------- */
.formwrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (max-width: 980px) { .formwrap { grid-template-columns: 1fr; } }

.field { margin-bottom: 1.05rem; }
.field > label { display: block; margin-bottom: .4rem; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.field > label .req { color: var(--oxide); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .96rem; color: var(--ink);
  padding: .8rem .95rem; background: var(--shell);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .8; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.field textarea { min-height: 110px; resize: vertical; }
.field .hint { margin: .4rem 0 0; font-size: .84rem; color: var(--ink-3); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 600px) { .field-pair { grid-template-columns: 1fr; } }

.checks { display: grid; gap: .45rem; }
.checks label { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--ink); cursor: pointer; }
.checks input { width: 1rem; height: 1rem; accent-color: var(--amber); }

.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }
.submit-row .or { font-size: .88rem; color: var(--ink-3); }

.aside { padding: 1.7rem; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-lg); }
.aside h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin-bottom: .95rem; }
.aside ul { margin: 0; padding-left: 1.1rem; }
.aside li { font-size: .92rem; color: var(--ink-2); margin-bottom: .55rem; }
.aside li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   BỀ MẶT THƯƠNG MẠI  /  TRADE SURFACES (dark)
   --------------------------------------------------------------------------- */
.trade { background: var(--pine); color: var(--pine-ink); }
.trade h1, .trade h2, .trade h3 { color: #fff; }
.trade .eyebrow { color: var(--amber-lt); }
.trade .lede, .trade p { color: rgba(232,239,233,.80); }
.trade a { color: var(--amber-lt); }
.trade .spec { background: var(--pine-2); border-color: var(--line-pine); box-shadow: none; }
.trade .spec-head { background: rgba(224,169,74,.13); color: var(--amber-lt); border-bottom-color: var(--line-pine); }
.trade .spec-row { border-top-color: var(--line-pine); }
.trade .spec-row dt { color: rgba(232,239,233,.68); }
.trade .spec-row dd { color: #fff; }
.trade .spec-row dd.missing { color: var(--amber-lt); }
.trade .spec-foot { background: rgba(0,0,0,.14); border-top-color: var(--line-pine); color: rgba(232,239,233,.6); }

.cap { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.05rem; }
.capcard { padding: 1.6rem; background: var(--pine-2); border: 1px solid var(--line-pine); border-radius: var(--r-lg); }
.capcard h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; margin-bottom: .6rem; }
.capcard p { font-size: .92rem; line-height: 1.58; margin: 0; }
.capcard .k { display: block; margin-bottom: .8rem; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--amber-lt); }

/* ---------------------------------------------------------------------------
   CHÂN TRANG  /  FOOTER
   --------------------------------------------------------------------------- */
.footer { background: var(--pine); color: var(--pine-ink); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.footer a { color: rgba(232,239,233,.78); text-decoration: none; }
.footer a:hover { color: var(--amber-lt); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.25rem; margin-bottom: 2.75rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
/* Tiêu đề cột ở chân trang dùng thẻ h2 chứ không phải h4: chân trang là một
   vùng riêng của trang, để h4 thì trang nào cũng nhảy từ h2 xuống thẳng h4,
   trình đọc màn hình hiểu là thiếu mất một cấp. Cỡ chữ vẫn giữ nguyên. */
.footer h2 { margin-bottom: .95rem; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-lt); line-height: 1.14; }
.footer p, .footer li { font-size: .9rem; line-height: 1.65; color: rgba(232,239,233,.72); margin: 0 0 .4rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer strong { color: #fff; font-weight: 700; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-pine); font-size: .82rem; color: rgba(232,239,233,.5);
}

/* ---------------------------------------------------------------------------
   TIỆN ÍCH  /  UTILITIES
   --------------------------------------------------------------------------- */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: .6rem; z-index: 200; background: var(--amber); color: #fff; padding: .7rem 1.2rem; border-radius: var(--r); text-decoration: none; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: 1rem; }
[hidden] { display: none !important; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 130%);
  z-index: 300; padding: .8rem 1.4rem; border-radius: 999px;
  background: var(--ink); color: var(--bone); font-size: .9rem; font-weight: 600;
  box-shadow: var(--sh-3); transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.toast.show { transform: translate(-50%, 0); }

/* Nhãn xuất xứ nhỏ trên thẻ thương hiệu */
.door-origin { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); margin: -.3rem 0 .6rem; }

/* Logo thương hiệu trên thẻ. Thẻ nền sáng nên logo hình vẽ màu trắng phải có
   tấm nền tối phía sau, còn logo màu đậm thì đặt thẳng lên thẻ. Cùng một chiều
   cao khung cho mọi thương hiệu để hàng thẻ nhìn đều nhau. */
.door-logo { display: flex; align-items: center; justify-content: flex-start;
  height: 46px; margin-bottom: .95rem; }
.door-logo img { max-height: 100%; max-width: 165px; width: auto; height: auto; object-fit: contain; }
.door-logo--dark { background: var(--ink); border-radius: 8px; padding: .5rem .8rem;
  align-self: flex-start; width: auto; height: 46px; box-sizing: content-box; }
.door-logo--dark img { max-height: 30px; }