@charset "UTF-8";
/* ==========================================================================
   TMT COLLECTION Gift: 3 TRANG DANH MỤC CHA (Task 51; template page.gift-cat, snippet tmt-gift-cat.bwt).
   Nạp SAU tmt-gift-home.css (dùng token .gho). Selector dưới .gcl. Mood: tien = navy-vàng, tet = đỏ-vàng, doc = be/sage.
   Cổng nhẹ: hero ngắn + điều hướng vào danh mục con. Mobile-first (gốc 375). Không JS.
   ========================================================================== */
.gcl { --gcl-scroll: 96px; }

/* ---- hero ---- */
.gcl-hero { padding-block: 22px 34px; }
.gcl--tien .gcl-hero { color: var(--g-ivory); background: radial-gradient(760px 420px at 85% 0%, rgba(201, 169, 95, 0.18), transparent 62%), linear-gradient(180deg, var(--g-navy), var(--g-navy-deep)); }
.gcl--tet .gcl-hero { color: #fff; background: radial-gradient(700px 420px at 12% 20%, rgba(240, 207, 134, 0.16), transparent 62%), linear-gradient(180deg, #8a1320, var(--g-red-deep)); }
.gcl--doc .gcl-hero { color: var(--g-ink); background: var(--g-sand); }
.gcl-hero__grid { display: grid; gap: 24px; align-items: center; }
.gcl-hero__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 2px; border: 1px solid rgba(224, 201, 143, 0.4); }
.gcl--doc .gcl-hero__media { border-color: rgba(20, 32, 58, 0.18); }
.gcl .gcl-hero__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.gcl--tien .gcl-hero__media img, .gcl--tet .gcl-hero__media img { object-position: 50% 50%; transform: scale(1.04); }
.gcl .gcl-h1 { margin: 0 0 14px; font: 700 32px/1.12 var(--font-display); letter-spacing: -0.01em; color: inherit; text-wrap: balance; }
.gcl-lead { margin: 0 0 22px; max-width: 46ch; font-size: 16px; line-height: 1.65; color: inherit; opacity: 0.9; }
.gcl--doc .gcl-lead { color: var(--g-soft); opacity: 1; }
.gcl--doc .gho-eyebrow { color: var(--g-sage); }
@media (min-width: 768px) { .gcl-hero { padding-block: 28px 56px; } .gcl .gcl-h1 { font-size: 42px; } }
@media (min-width: 992px) {
  .gcl-hero { padding-block: 32px 72px; }
  .gcl-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; }
  .gcl-hero__media { aspect-ratio: 1 / 1; max-width: 520px; justify-self: end; width: 100%; }
  .gcl .gcl-h1 { font-size: 50px; }
  .gcl-lead { font-size: 18px; }
}

/* nút viền sáng trên nền tối */
.gho a.gho-btn--line-light { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.55); }
.gho a.gho-btn--line-light:hover { background: #fff; color: var(--g-navy-deep); border-color: #fff; }

/* breadcrumb */
.gcl-crumb { margin: 0 0 22px; font-size: 13px; line-height: 1.4; }
.gcl-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.gcl-crumb li + li::before { content: "/"; margin: 0 8px; opacity: 0.55; }
.gcl .gcl-crumb a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: inherit; opacity: 0.85; text-decoration: none; }
.gcl .gcl-crumb a:hover { opacity: 1; text-decoration: underline; }
.gcl-crumb [aria-current] { opacity: 0.7; }

/* ---- Quà tiền theo người nhận (tien) ---- */
.gcl-who { padding-block: var(--g-sec); }
.gcl-who__grid { display: grid; gap: 14px; }
.gcl-person { display: flex; flex-direction: column; padding: 20px 20px 18px; scroll-margin-top: var(--gcl-scroll); background: #fffaf0; border: 1px solid rgba(20, 32, 58, 0.16); border-top: 3px solid var(--g-gold); border-radius: 2px; }
.gcl .gcl-person h3 { margin: 0 0 8px; font: 700 20px/1.25 var(--font-display); color: var(--g-ink); }
.gcl-person p { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--g-soft); }
.gho a.gcl-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; align-self: flex-start; font: 600 14px/1.2 var(--font-sans); letter-spacing: 0.02em; color: var(--g-red); text-decoration: underline; text-decoration-thickness: 1.5px; }
.gho a.gcl-link::after { content: "\2192"; margin-left: 8px; text-decoration: none; display: inline-block; }
.gho a.gcl-link:hover { color: var(--g-red-deep); }
@media (min-width: 768px) { .gcl-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 992px) { .gcl-who__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .gcl-person { padding: 24px 22px 20px; } }

/* ---- thẻ mục con (tet 2 thẻ, doc 3 thẻ) ---- */
.gcl-kids { padding-block: var(--g-sec); }
.gcl-kids__grid { display: grid; gap: 20px; }
.gcl-kid { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fffaf0; border: 1px solid rgba(20, 32, 58, 0.14); border-radius: 2px; }
.gcl-kid__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--g-navy); }
.gcl .gcl-kid__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; transition: transform 0.7s var(--ease, ease); }
.gcl-kid:hover .gcl-kid__media img { transform: scale(1.04); }
.gcl .gcl-kid__media img.gcl-kid__zoom { transform: scale(1.28); transform-origin: 50% 52%; }
.gcl-kid:hover .gcl-kid__media img.gcl-kid__zoom { transform: scale(1.32); }
.gcl-kid__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 22px; }
.gcl .gcl-kid__name { margin: 0 0 8px; font: 700 22px/1.2 var(--font-display); color: var(--g-ink); }
.gho a.gcl-kid__link { color: inherit; text-decoration: none; }
.gho a.gcl-kid__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.gho a.gcl-kid__link:focus-visible { outline: 0; }
.gho a.gcl-kid__link:focus-visible::after { outline: 3px solid var(--color-focus, #1a56c4); outline-offset: -3px; }
.gcl-kid__text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--g-soft); }
.gcl-kid__cta { margin-top: auto; align-self: flex-start; font: 600 14px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 5px; color: var(--g-red); border-bottom: 2px solid currentColor; }
.gcl--doc .gcl-kids { background: var(--g-ivory); }
@media (min-width: 768px) { .gcl-kids__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .gcl-kids__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gcl-kid__body { padding: 22px 22px 26px; } .gcl .gcl-kid__name { font-size: 24px; } }
@media (min-width: 992px) { .gcl-kids__grid { gap: 32px; } .gcl-kid__text { font-size: 16px; } .gcl .gcl-kid__name { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .gcl .gcl-kid__media img { transition: none; } .gcl-kid:hover .gcl-kid__media img { transform: none; } .gcl-kid:hover .gcl-kid__media img.gcl-kid__zoom { transform: scale(1.28); } }

/* ---- dải "đang tuyển chọn thêm" + liên kết phụ ---- */
.gcl-more { padding-block: 34px; border-bottom: 1px solid var(--g-line); }
.gcl-more__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.gcl-soon { margin: 0; padding: 14px 18px; width: 100%; font-size: 15px; line-height: 1.6; color: var(--g-soft); background: transparent; border: 1px dashed rgba(20, 32, 58, 0.3); border-radius: 2px; }
.gcl-soon strong { color: var(--g-ink); }
.gcl-sub { margin: 0; }
@media (min-width: 768px) { .gcl-more__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .gcl-soon { width: auto; flex: 1 1 auto; } }
.gcl .gho-help .gcl-sub { margin-top: 10px; }

/* CSS toàn site có thể đặt màu cho tiêu đề: ép màu tường minh theo nền */
.gcl--tien .gcl-hero .gcl-h1, .gcl--tet .gcl-hero .gcl-h1 { color: #fff; }
.gcl--doc .gcl-hero .gcl-h1 { color: var(--g-ink); }
.gcl--tien .gcl-hero .gho-eyebrow, .gcl--tet .gcl-hero .gho-eyebrow { color: var(--g-gold-soft); }

/* ---- Task 71 IA (2026-10-14): 4 nhóm trong Quà Sưu Tầm Độc Lạ; 3 nhóm trong Tiền Lì Xì Tết ---- */
@media (min-width: 768px) { .gcl-kids__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gcl-who__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .gcl-kids__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .gcl .gcl-kids__grid--4 .gcl-kid__name { font-size: 22px; } .gcl-who__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }