/* Layout: dải xanh thông với tên trang và đếm ngược, viền kẹo gậy đỏ trắng, bên dưới là cột danh mục bên trái và danh sách sản phẩm dạng dòng bên phải. */
:root {
  --pine: #0f3b2e;
  --cream: #fbf4e6;
  --paper: #fffdf7;
  --red: #b3202a;
  --gold: #b98a2f;
  --gold-soft: #e6c46a;
  --ink: #1d2a24;
  --muted: #55645b;
  --line: #e2d6bc;
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--cream); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  overflow-x: hidden;
}

.wrap { max-width: 1080px; margin-inline: auto; padding-inline: 16px; }

/* Dải đầu trang */
.top { position: relative; overflow: hidden; background: var(--pine); color: var(--cream); }
.snow { position: absolute; top: 0; left: 0; right: 0; bottom: 12px; width: 100%; height: calc(100% - 12px); pointer-events: none; }
.top-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; padding-block: 36px 32px; }
.brand { min-width: 0; }
h1 { margin: 0; font: 800 clamp(2.4rem, 7vw, 4.2rem) / 1 var(--font-display); letter-spacing: 0.005em; }
.tagline { margin: 12px 0 0; max-width: 36ch; color: rgba(251, 244, 230, 0.82); font-size: 1.08rem; text-wrap: balance; }
.counts { display: flex; flex-wrap: wrap; gap: 14px 32px; }
.count { min-width: 0; }
.count-name { margin: 0; font-size: 0.92rem; color: rgba(251, 244, 230, 0.75); }
.count-num { margin: 0; font: 700 1.6rem / 1.25 var(--font-display); color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.cane { height: 12px; background: repeating-linear-gradient(-45deg, var(--red) 0 12px, #fffdf7 12px 24px); }

/* Bố cục hai cột */
.layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding-block: 36px 24px; align-items: start; }
.side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .side-title { margin: 0; font: 600 0.95rem var(--font-body); color: var(--muted); }
input, select {
  width: 100%;
  font: 400 1rem/1.4 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.cats { margin-top: 6px; }
.chips { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--line); }
.chip {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: 400 1rem/1.4 var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 11px 10px;
  cursor: pointer;
}
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip:hover { background: rgba(15, 59, 46, 0.06); }
.chip[aria-pressed="true"] { background: var(--pine); color: var(--cream); font-weight: 600; }
.chip[aria-pressed="true"] .n { color: var(--gold-soft); }

/* Danh sách sản phẩm */
.status { margin: 0 0 8px; color: var(--muted); font-size: 0.95rem; min-height: 1.5em; }
.grid { display: flex; flex-direction: column; }
.card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 24px; padding-block: 22px; border-top: 1px solid var(--line); }
.card:last-child { border-bottom: 1px solid var(--line); }
.thumb { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #f3e8cf; border-radius: 6px; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.badge { font-size: 0.82rem; color: var(--gold); border: 1px solid var(--gold-soft); border-radius: 4px; padding: 0 8px; margin-bottom: 4px; }
.card h3 { margin: 0; font: 700 1.5rem / 1.25 var(--font-display); overflow-wrap: anywhere; }
.cat { margin: 0; color: var(--muted); font-size: 0.98rem; }
.note { margin: 4px 0 0; max-width: 56ch; }
.btn {
  margin-top: auto;
  padding: 9px 20px;
  border-radius: 4px;
  font: 600 1rem/1.3 var(--font-body);
  text-decoration: none;
}
.card-body .cat + .btn, .card-body .note + .btn { margin-top: 14px; }
a.btn { background: var(--red); color: #fff; }
a.btn:hover { background: #961a23; }
.btn.off { border: 1px dashed var(--gold); color: var(--muted); }

/* Bóng Noel thay cho ảnh */
.orn { position: relative; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--c) 45%, #fff) 0 10%, var(--c) 42%, color-mix(in srgb, var(--c) 72%, #000) 100%); margin-top: 10px; }
.orn::before { content: ""; position: absolute; top: -9px; left: 50%; width: 22px; height: 12px; transform: translateX(-50%); background: var(--gold); border-radius: 4px 4px 1px 1px; }
.orn::after { content: ""; position: absolute; top: -17px; left: 50%; width: 12px; height: 10px; transform: translateX(-50%); border: 2px solid var(--gold); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tone-0 { --c: #b3202a; }
.tone-1 { --c: #1f6b4f; }
.tone-2 { --c: #c99a3a; }
.tone-3 { --c: #8d1a24; }

.empty { padding: 28px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.empty p { margin: 0; }
.reset { font: 600 1rem var(--font-body); color: var(--pine); background: transparent; border: 1px solid var(--pine); border-radius: 4px; padding: 8px 16px; cursor: pointer; }

.foot { padding-block: 24px 56px; }
.foot p { margin: 0; max-width: 70ch; color: var(--muted); font-size: 0.95rem; border-top: 1px solid var(--line); padding-top: 20px; }

/* Thẻ sản phẩm bấm được */
a.thumb { color: inherit; text-decoration: none; }
.photo-count { position: absolute; right: 8px; bottom: 8px; font-size: 0.82rem; line-height: 1.5; padding: 0 9px; border-radius: 4px; background: rgba(15, 59, 46, 0.88); color: var(--cream); }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }

/* Trang chi tiết sản phẩm */
.top-in.slim { align-items: center; padding-block: 22px; }
.site-name { font: 800 clamp(1.6rem, 4vw, 2.2rem) / 1 var(--font-display); color: var(--cream); text-decoration: none; }
.back { color: var(--gold-soft); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.back:hover { border-bottom-color: currentColor; }
.detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding-block: 36px 40px; align-items: start; }
.gallery { min-width: 0; }
.gallery-main { aspect-ratio: 1; display: grid; place-items: center; background: #f3e8cf; border-radius: 6px; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-main .orn { width: 120px; height: 120px; margin-top: 18px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumb-btn { width: 76px; height: 76px; padding: 0; background: none; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; }
.thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-btn[aria-current="true"] { border-color: var(--red); }
.info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.info h1 { margin: 4px 0 0; font: 800 clamp(1.8rem, 4vw, 2.5rem) / 1.2 var(--font-display); overflow-wrap: anywhere; }
.info .desc { margin: 14px 0 0; max-width: 56ch; }
.points { margin: 12px 0 0; padding-left: 1.2em; max-width: 56ch; }
.points li { margin-block: 6px; }
.source { margin: 14px 0 0; max-width: 56ch; color: var(--muted); font-size: 0.92rem; }
.info .btn.big { margin-top: 22px; padding: 12px 26px; font-size: 1.05rem; }
.missing { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 24px; }
.missing p { margin: 0; }
.missing a { color: var(--pine); font-weight: 600; }
@media (max-width: 760px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px 32px; }
  .thumb-btn { width: 64px; height: 64px; }
}

@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 24px; }
  .side { position: static; }
  .card { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; }
  .orn { width: 52px; height: 52px; }
  .card h3 { font-size: 1.25rem; }
}