@charset "UTF-8";
/* ==========================================================================
   TMT Gift Collection (Task 41): giao diện premium riêng cho /qua-tang-doc-la. Chỉ nạp ở collection qua-tang-doc-la (layouts/theme.bwt), SAU tmt-collection.css.
   Mọi selector nằm dưới .tmt-collection.tmt-gcol => KHÔNG ảnh hưởng collection Sưu tầm, sản phẩm, giỏ hàng, tìm kiếm, trang chủ, bài viết, tài khoản.
   Ngôn ngữ thị giác = trang chủ V2: navy / ngà / đồng thau champagne, serif, nhiều khoảng thở, gần như không viền/bóng, bo góc 2px. Token (--hv-*) chỉ có trong .tmt-gcol, không đổi token toàn site.
   Giữ nguyên hành vi thương mại: lọc / sắp xếp / phân trang AJAX (col.js, search_filter.js) và thẻ sản phẩm (thêm giỏ, mua ngay, biến thể, hết hàng) chỉ được tô lại, không đổi markup.
   Mobile-first (thiết kế gốc 375). Không thư viện, không slider.
   ========================================================================== */

.tmt-collection.tmt-gcol {
  --hv-navy-950: #071327;
  --hv-navy-900: #0b1a35;
  --hv-navy-800: #10244a;
  --hv-ivory: #f8f3e7;
  --hv-cream: #efe6d0;
  --hv-sand: #e2d6b8;
  --hv-ink: #14203a;
  --hv-ink-soft: #4a5368;
  --hv-gold: #c9a95f;
  --hv-gold-soft: #e0c98f;
  --hv-gold-deep: #7a5c20;
  --hv-line: rgba(20, 32, 58, 0.14);
  --gc-h1: 31px;
  --gc-h2: 26px;
  --gc-sec: 56px;
  background: var(--hv-ivory);
  color: var(--hv-ink);
  padding-bottom: 0;
}
@media (min-width: 768px) { .tmt-collection.tmt-gcol { --gc-h1: 46px; --gc-h2: 32px; --gc-sec: 80px; } }
@media (min-width: 992px) { .tmt-collection.tmt-gcol { --gc-h1: 48px; --gc-h2: 38px; --gc-sec: 96px; } }
@media (min-width: 1200px) { .tmt-collection.tmt-gcol { --gc-h1: 56px; --gc-h2: 40px; } }

/* ---------- 1. Hero ---------- */
.tmt-gcol .tmt-gh { position: relative; overflow: hidden; color: var(--hv-ivory); background: radial-gradient(720px 400px at 80% 70%, rgba(201, 169, 95, 0.16), transparent 62%), linear-gradient(180deg, var(--hv-navy-900), var(--hv-navy-950)); border-bottom: 1px solid rgba(201, 169, 95, 0.28); }
.tmt-gcol .tmt-gh__inner { position: relative; z-index: 2; padding-block: 0; }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb { padding-top: 0; }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb ol { font-size: 13px; color: rgba(248, 243, 231, 0.66); }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb li + li::before { color: rgba(224, 201, 143, 0.5); }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb a { color: rgba(248, 243, 231, 0.86); text-decoration: none; }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb [aria-current="page"], .tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb li > span { color: rgba(248, 243, 231, 0.86); font-weight: 400; }
.tmt-gcol .tmt-gh__crumbs .tmt-breadcrumb a:focus-visible { outline-color: var(--hv-gold); }

.tmt-gcol .tmt-gh__eyebrow { margin: 0 0 8px; font: 700 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv-gold); }
.tmt-gcol .tmt-gh__title { margin: 0 0 12px; font: 700 var(--gc-h1)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; color: #fff; overflow-wrap: break-word; text-wrap: balance; }
.tmt-gcol .tmt-gh__lede { margin: 0 0 18px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(248, 243, 231, 0.88); }
.tmt-gcol .tmt-gh__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; font: 600 14px/1.2 var(--font-sans); letter-spacing: 0.02em; text-decoration: none; color: var(--hv-navy-950); background: var(--hv-gold); border: 1.5px solid var(--hv-gold); border-radius: 2px; transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); }
.tmt-gcol .tmt-gh__cta:hover { background: var(--hv-gold-soft); border-color: var(--hv-gold-soft); color: var(--hv-navy-950); }
.tmt-gcol .tmt-gh__cta:focus-visible { outline: 3px solid var(--hv-gold-soft); outline-offset: 3px; }
.tmt-gcol .tmt-gh__visual { position: relative; z-index: 1; margin-top: 4px; aspect-ratio: 2 / 1; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
.tmt-gcol .tmt-gh__visual img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
@media (max-width: 479.98px) { .tmt-gcol .tmt-gh__cta { width: 100%; } }
@media (min-width: 768px) {
  .tmt-gcol .tmt-gh__lede { font-size: 16px; margin-bottom: 24px; }
  .tmt-gcol .tmt-gh__eyebrow { margin-bottom: 12px; }
  .tmt-gcol .tmt-gh__title { margin-bottom: 16px; }
  .tmt-gcol .tmt-gh__visual { aspect-ratio: 5 / 2; margin-top: 8px; }
  .tmt-gcol .tmt-gh__visual img { object-position: 50% 54%; }
}
@media (min-width: 992px) {
  .tmt-gcol .tmt-gh { display: flex; min-height: clamp(470px, 36vw, 540px); }
  .tmt-gcol .tmt-gh__inner { display: flex; flex-direction: column; padding-bottom: 56px; }
  .tmt-gcol .tmt-gh__copy { margin-block: auto; padding-top: 12px; max-width: 500px; }
  .tmt-gcol .tmt-gh__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; margin: 0; aspect-ratio: auto; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
  .tmt-gcol .tmt-gh__visual img { object-position: 52% 50%; }
}
@media (min-width: 1200px) { .tmt-gcol .tmt-gh__copy { max-width: 580px; } .tmt-gcol .tmt-gh__visual { width: 54%; } }

/* ---------- 2. Chọn theo nhu cầu: editorial chips ---------- */
.tmt-gcol .tmt-gi { padding-block: 22px 4px; }
.tmt-gcol .tmt-gi__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.tmt-gcol .tmt-gi__label { margin: 0; font: 700 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv-gold-deep); }
.tmt-gcol .tmt-gi__more { font: 600 13px/1.2 var(--font-sans); color: var(--hv-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hv-gold); }
.tmt-gcol .tmt-gi__list { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tmt-gcol .tmt-gi__list::-webkit-scrollbar { display: none; }
.tmt-gcol .tmt-gi__list > li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.tmt-gcol .tmt-gi__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; font: 600 14px/1.2 var(--font-sans); letter-spacing: 0.01em; white-space: nowrap; text-decoration: none; color: var(--hv-ink); background: transparent; border: 1px solid rgba(20, 32, 58, 0.3); border-radius: 2px; transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease); }
.tmt-gcol .tmt-gi__chip:not(.is-current)::after { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5c20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.tmt-gcol .tmt-gi__chip:hover { border-color: var(--hv-gold); background: rgba(201, 169, 95, 0.12); color: var(--hv-ink); }
.tmt-gcol .tmt-gi__chip.is-current { color: var(--hv-ivory); background: var(--hv-navy-900); border-color: var(--hv-navy-900); }
.tmt-gcol .tmt-gi__chip.is-current:hover { background: var(--hv-navy-800); }
.tmt-gcol .tmt-gi__chip:focus-visible, .tmt-gcol .tmt-gi__more:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (min-width: 768px) {
  .tmt-gcol .tmt-gi { padding-block: 32px 8px; }
  .tmt-gcol .tmt-gi__list { flex-wrap: wrap; gap: 10px; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ---------- 3. Lưới quà tặng ---------- */
.tmt-gcol .tmt-gc-body { padding-top: 28px; padding-bottom: var(--gc-sec); }
.tmt-gcol .tmt-gc-head { margin: 0 0 18px; scroll-margin-top: calc(var(--header-h) + 12px); }
.tmt-gcol .tmt-gc-head__title { margin: 0; font: 700 var(--gc-h2)/1.18 var(--font-display); letter-spacing: -0.005em; color: var(--hv-ink); }
.tmt-gcol .tmt-gc-head::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 12px; background: var(--hv-gold); }
@media (min-width: 768px) { .tmt-gcol .tmt-gc-body { padding-top: 40px; } .tmt-gcol .tmt-gc-head { margin-bottom: 22px; } }

.tmt-gcol .tmt-toolbar { padding-bottom: 14px; margin-bottom: 24px; border-bottom: 1px solid var(--hv-line); }
.tmt-gcol .tmt-toolbar__count { color: var(--hv-ink-soft); }
.tmt-gcol .tmt-toolbar__count strong { color: var(--hv-ink); }
.tmt-gcol .tmt-toolbar__sort-label { color: var(--hv-ink-soft); }
.tmt-gcol .tmt-toolbar__badge { background: var(--hv-navy-900); }
.tmt-gcol .tmt-toolbar .tmt-select, .tmt-gcol .tmt-select { background-color: transparent; border: 1px solid rgba(20, 32, 58, 0.3); border-radius: 2px; color: var(--hv-ink); }
.tmt-gcol .tmt-toolbar .tmt-select:hover { border-color: var(--hv-navy-900); }
.tmt-gcol .tmt-toolbar .tmt-select:focus { border-color: var(--color-focus); }

/* Nút trong trang Quà tặng (thanh công cụ, khung lọc, thẻ sản phẩm): navy/ngà thay cho xanh lục của site, bo góc 2px */
.tmt-gcol .tmt-btn { border-radius: 2px; }
.tmt-gcol .tmt-btn--primary { background: var(--hv-navy-900); border-color: var(--hv-navy-900); color: var(--hv-ivory); }
.tmt-gcol .tmt-btn--primary:hover { background: var(--hv-navy-800); border-color: var(--hv-navy-800); color: #fff; }
.tmt-gcol .tmt-btn--primary:active { background: var(--hv-navy-950); border-color: var(--hv-navy-950); }
.tmt-gcol .tmt-btn--secondary { background: transparent; border-color: var(--hv-navy-900); color: var(--hv-navy-900); }
.tmt-gcol .tmt-btn--secondary:hover { background: rgba(11, 26, 53, 0.06); }
.tmt-gcol .tmt-btn--ghost { background: transparent; border-color: rgba(20, 32, 58, 0.3); color: var(--hv-ink); }
.tmt-gcol .tmt-btn--ghost:hover { background: rgba(11, 26, 53, 0.05); }
.tmt-gcol .tmt-toolbar__filter { border: 1px solid rgba(20, 32, 58, 0.3); color: var(--hv-ink); }
.tmt-gcol .tmt-toolbar__filter:hover { border-color: var(--hv-navy-900); }
.tmt-gcol .tmt-btn[disabled], .tmt-gcol .tmt-btn[aria-disabled="true"] { background: transparent; color: var(--color-text-disabled); border-color: rgba(20, 32, 58, 0.16); }

.tmt-gcol .tmt-grid--collection { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
@media (min-width: 768px) { .tmt-gcol .tmt-grid--collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 22px; } }
@media (min-width: 992px) { .tmt-gcol .tmt-grid--collection { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 26px; } }

/* Thẻ sản phẩm (chỉ trong trang Quà tặng, cả bản tải lần đầu lẫn bản AJAX sau khi lọc/sắp xếp): ảnh lớn trên nền kem, tên serif, giá sạch, CTA gọn */
.tmt-gcol .tmt-product-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.tmt-gcol .tmt-product-card.tmt-card--hover:hover { box-shadow: none; border-color: transparent; }
.tmt-gcol .tmt-product-card .tmt-card__media { aspect-ratio: 1 / 1; background: var(--hv-cream); border-radius: 2px; overflow: hidden; }
.tmt-gcol .tmt-product-card .tmt-card__media img { padding: 7%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s var(--ease); }
.tmt-gcol .tmt-product-card:hover .tmt-card__media img { transform: scale(1.04); }
.tmt-gcol .tmt-product-card .tmt-card__body { padding: 14px 2px 0; gap: 6px; }
.tmt-gcol .tmt-product-card .tmt-card__title { min-height: calc(2 * 1.38em); font: 600 15px/1.38 var(--font-display); color: var(--hv-ink); }
.tmt-gcol .tmt-product-card .tmt-card__title a:hover { color: var(--hv-gold-deep); }
.tmt-gcol .tmt-product-card .tmt-price { font-size: 16px; font-weight: 700; color: var(--hv-ink); }
.tmt-gcol .tmt-product-card .tmt-price__old { font-size: 13px; color: var(--hv-ink-soft); }
.tmt-gcol .tmt-product-card .tmt-small { color: var(--hv-ink-soft); }
.tmt-gcol .tmt-product-card .tmt-badge { font-size: 12px; border-radius: 2px; }
.tmt-gcol .tmt-product-card .tmt-badge--sale { background: var(--hv-navy-900); border-color: var(--hv-navy-900); color: var(--hv-ivory); }
.tmt-gcol .tmt-product-card .tmt-badge--out { background: rgba(248, 243, 231, 0.92); border-color: var(--hv-line); color: var(--hv-ink-soft); }
.tmt-gcol .tmt-product-card .tmt-card__cta { margin-top: 8px; }
.tmt-gcol .tmt-product-card .tmt-card__btn { min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; }
@media (min-width: 992px) { .tmt-gcol .tmt-product-card .tmt-card__title { font-size: 16px; } .tmt-gcol .tmt-product-card .tmt-card__btn { font-size: 14px; } }
.tmt-gcol .tmt-product-card .tmt-card__title a:focus-visible, .tmt-gcol .tmt-btn:focus-visible, .tmt-gcol .tmt-select:focus-visible { outline-color: var(--color-focus); }

/* Trạng thái rỗng sau khi lọc */
.tmt-gcol .tmt-empty { background: transparent; border: 1px solid var(--hv-line); border-radius: 2px; }

/* Phân trang */
.tmt-gcol .tmt-pager { margin-top: 56px; }
.tmt-gcol .tmt-pagination a, .tmt-gcol .tmt-pagination span { border-radius: 2px; border-color: rgba(20, 32, 58, 0.22); }
.tmt-gcol .tmt-pagination a { color: var(--hv-ink); }
.tmt-gcol .tmt-pagination a:hover { background: rgba(201, 169, 95, 0.14); }
.tmt-gcol .tmt-pagination [aria-current="page"], .tmt-gcol .tmt-pagination a[aria-current="page"] { background: var(--hv-navy-900); border-color: var(--hv-navy-900); color: var(--hv-ivory); }
.tmt-gcol .tmt-pagination .is-disabled { background: transparent; color: var(--color-text-disabled); border-color: rgba(20, 32, 58, 0.12); }
.tmt-gcol .tmt-pagination__status span { border: 0; color: var(--hv-ink); }

/* ---------- 4. Bộ lọc: nhẹ hơn, bớt cảm giác kỹ thuật ---------- */
.tmt-gcol .tmt-filter { background: var(--hv-ivory); }
.tmt-gcol .tmt-filter__head { border-bottom-color: var(--hv-line); }
.tmt-gcol .tmt-filter__title { color: var(--hv-ink); }
.tmt-gcol .tmt-filter__foot { background: var(--hv-ivory); border-top-color: var(--hv-line); }
.tmt-gcol .tmt-filter .aside-item { border-bottom-color: var(--hv-line); }
.tmt-gcol .tmt-filter .aside-title .title-head, .tmt-gcol .tmt-filter .aside-title h2 { font: 700 15px/1.3 var(--font-display); color: var(--hv-ink); }
.tmt-gcol .tmt-filter .aside-title [role="button"]::after { color: var(--hv-gold-deep); }
.tmt-gcol .tmt-filter .filter-item--check-box input[type="checkbox"] { accent-color: var(--hv-navy-900); }
.tmt-gcol .tmt-filter .filter-item label { color: var(--hv-ink); font-size: 15px; }
.tmt-gcol .tmt-filter .filter-container__selected-filter { border-bottom-color: var(--hv-line); }
.tmt-gcol .tmt-filter .filter-container__selected-filter-header-title { color: var(--hv-ink); }
.tmt-gcol .tmt-filter .filter-container__clear-all { color: var(--hv-gold-deep); }
.tmt-gcol .tmt-filter .filter-container__selected-filter-item a { background: var(--hv-navy-900); color: var(--hv-ivory); border-radius: 2px; }
.tmt-gcol .tmt-filter input[type="checkbox"]:focus-visible { outline-color: var(--color-focus); }
@media (min-width: 992px) {
  .tmt-gcol .tmt-collection__layout { grid-template-columns: 216px minmax(0, 1fr); gap: 40px; }
  .tmt-gcol .tmt-collection__side { top: calc(var(--header-h) + 20px); }
  .tmt-gcol .tmt-filter { background: transparent; border: 0; border-top: 1px solid var(--hv-line); border-radius: 0; }
  .tmt-gcol .tmt-filter .aside-item:first-child .aside-title [role="button"] { min-height: 52px; }
}
@media (min-width: 1200px) { .tmt-gcol .tmt-collection__layout { grid-template-columns: 232px minmax(0, 1fr); gap: 56px; } }

/* ---------- 5. Câu chuyện quà tặng (khối navy) ---------- */
.tmt-gcol .tmt-gs { padding-block: var(--gc-sec); color: var(--hv-ivory); background: radial-gradient(700px 420px at 86% 30%, rgba(201, 169, 95, 0.13), transparent 62%), linear-gradient(180deg, var(--hv-navy-950), var(--hv-navy-900)); }
.tmt-gcol .tmt-gs__inner { display: grid; gap: 32px; }
.tmt-gcol .tmt-gs__title { margin: 0 0 14px; font: 700 var(--gc-h2)/1.18 var(--font-display); letter-spacing: -0.005em; color: #fff; max-width: 20ch; text-wrap: balance; }
.tmt-gcol .tmt-gs__lede { margin: 0; max-width: 44ch; font-size: 16px; line-height: 1.7; color: rgba(248, 243, 231, 0.86); text-wrap: pretty; }
.tmt-gcol .tmt-gs__points { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(224, 201, 143, 0.28); counter-reset: none; }
.tmt-gcol .tmt-gs__points > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; margin: 0; padding: 18px 0; border-bottom: 1px solid rgba(224, 201, 143, 0.28); }
.tmt-gcol .tmt-gs__num { grid-row: 1 / span 2; padding-top: 3px; font: 700 13px/1.3 var(--font-sans); letter-spacing: 0.1em; color: var(--hv-gold); }
.tmt-gcol .tmt-gs__points h3 { margin: 0 0 6px; font: 700 18px/1.3 var(--font-display); color: #fff; }
.tmt-gcol .tmt-gs__points p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(248, 243, 231, 0.78); }
@media (min-width: 768px) {
  .tmt-gcol .tmt-gs__points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .tmt-gcol .tmt-gs__points > li { padding-block: 24px; }
}
@media (min-width: 992px) {
  .tmt-gcol .tmt-gs__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .tmt-gcol .tmt-gs__points h3 { font-size: 20px; }
  .tmt-gcol .tmt-gs__points p { font-size: 16px; }
}

/* ---------- 6. Dải tin cậy: đường kẻ + icon nét mảnh, không hộp ---------- */
.tmt-gcol .tmt-gt { padding-block: 26px; border-bottom: 1px solid var(--hv-line); }
.tmt-gcol .tmt-gt__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin: 0; padding: 0; list-style: none; }
.tmt-gcol .tmt-gt__list > li { display: flex; align-items: flex-start; gap: 10px; margin: 0; min-width: 0; }
.tmt-gcol .tmt-gt__list svg { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--hv-gold-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tmt-gcol .tmt-gt__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tmt-gcol .tmt-gt__txt strong { font: 700 14px/1.3 var(--font-sans); color: var(--hv-ink); text-wrap: balance; }
.tmt-gcol .tmt-gt__txt span { font-size: 13px; line-height: 1.45; color: var(--hv-ink-soft); }
@media (min-width: 992px) {
  .tmt-gcol .tmt-gt { padding-block: 36px; }
  .tmt-gcol .tmt-gt__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .tmt-gcol .tmt-gt__list > li { padding-inline: 24px; border-left: 1px solid var(--hv-line); }
  .tmt-gcol .tmt-gt__list > li:first-child { padding-left: 0; border-left: 0; }
  .tmt-gcol .tmt-gt__txt strong { font-size: 15px; }
  .tmt-gcol .tmt-gt__txt span { font-size: 14px; }
}

/* ---------- 7. Mô tả SEO (giữ nguyên nội dung, chỉ đổi chỗ đặt: sau câu chuyện + tin cậy) ---------- */
.tmt-gcol .tmt-gc-seo { padding-block: 44px var(--gc-sec); }
.tmt-gcol .tmt-gc-seo .tmt-seo { max-width: 860px; margin-top: 0; padding-top: 0; border-top: 0; }
.tmt-gcol .tmt-seo__body { color: var(--hv-ink); }
.tmt-gcol .tmt-seo__body h2, .tmt-gcol .tmt-seo__body h3, .tmt-gcol .tmt-seo__body h4 { color: var(--hv-ink); }
.tmt-gcol .tmt-seo__body a { color: var(--hv-gold-deep); }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  .tmt-gcol .tmt-gh__cta, .tmt-gcol .tmt-gi__chip, .tmt-gcol .tmt-product-card .tmt-card__media img { transition: none; }
  .tmt-gcol .tmt-product-card:hover .tmt-card__media img { transform: none; }
  .tmt-gcol .tmt-gi__list { scroll-behavior: auto; }
}

/* ==========================================================================
   Task 48: GIFT IA. /qua-tang (Gift Home, .tmt-gcol--home) và /qua-tang-doc-la (Tất cả quà tặng, hero thu gọn .tmt-gh--compact).
   ========================================================================== */

/* ---------- A. Hero: nút phụ (Gift Home) và bản thu gọn (Tất cả quà tặng) ---------- */
.tmt-gcol .tmt-gh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.tmt-gcol a.tmt-gh__link { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.3 var(--font-sans); color: var(--hv-gold-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(224, 201, 143, 0.6); }
.tmt-gcol a.tmt-gh__link:hover { color: #fff; }
.tmt-gcol a.tmt-gh__link:focus-visible { outline: 3px solid var(--hv-gold-soft); outline-offset: 3px; }
.tmt-gcol .tmt-gh--compact { background: linear-gradient(180deg, var(--hv-navy-900), var(--hv-navy-950)); }
.tmt-gcol .tmt-gh--compact .tmt-gh__inner { padding-bottom: 18px; }
.tmt-gcol .tmt-gh--compact .tmt-gh__title { margin-bottom: 8px; font-size: calc(var(--gc-h1) * 0.78); }
.tmt-gcol .tmt-gh--compact .tmt-gh__lede { margin-bottom: 2px; font-size: 15px; }
.tmt-gcol .tmt-gh--compact .tmt-gh__eyebrow { margin-bottom: 6px; }
@media (min-width: 992px) {
  .tmt-gcol .tmt-gh--compact { display: block; min-height: 0; }
  .tmt-gcol .tmt-gh--compact .tmt-gh__inner { display: block; padding-bottom: 30px; }
  .tmt-gcol .tmt-gh--compact .tmt-gh__copy { margin-block: 0; padding-top: 4px; max-width: 760px; }
}
.tmt-gcol .tmt-gi__label { margin: 0 0 10px; font: 700 12px/1.3 var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hv-gold-deep); }

/* ---------- B. Gift Home: 5 thẻ danh mục (key visual minh hoạ, cả thẻ là một liên kết) ---------- */
.tmt-gcol .tmt-gk { padding-block: 44px 28px; }
.tmt-gcol .tmt-gk__head { margin: 0 0 20px; }
.tmt-gcol .tmt-gk__eyebrow { color: var(--hv-gold-deep); }
.tmt-gcol .tmt-gk__title { margin: 0; font: 700 var(--gc-h2)/1.18 var(--font-display); letter-spacing: -0.005em; color: var(--hv-ink); text-wrap: balance; }
.tmt-gcol .tmt-gk__head::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 12px; background: var(--hv-gold); }
.tmt-gcol .tmt-gk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin: 0; padding: 0; list-style: none; }
.tmt-gcol .tmt-gk__item { margin: 0; min-width: 0; }
.tmt-gcol .tmt-gk__item:first-child { grid-column: 1 / -1; }
.tmt-gcol .tmt-gk__card { position: relative; display: flex; flex-direction: column; height: 100%; }
.tmt-gcol .tmt-gk__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--hv-navy-900); }
.tmt-gcol .tmt-gk__item:first-child .tmt-gk__media { aspect-ratio: 2 / 1; }
.tmt-gcol .tmt-gk__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.tmt-gcol .tmt-gk__card:hover .tmt-gk__media img { transform: scale(1.04); }
.tmt-gcol .tmt-gk__body { display: flex; flex: 1; flex-direction: column; padding: 12px 2px 0; }
.tmt-gcol h3.tmt-gk__name { margin: 0 0 4px; font: 700 17px/1.3 var(--font-display); color: var(--hv-ink); }
.tmt-gcol a.tmt-gk__link { color: var(--hv-ink); text-decoration: none; }
.tmt-gcol a.tmt-gk__link::after { content: ""; position: absolute; inset: 0; }
.tmt-gcol a.tmt-gk__link:focus-visible { outline: 0; }
.tmt-gcol a.tmt-gk__link:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.tmt-gcol .tmt-gk__desc { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--hv-ink-soft); }
.tmt-gcol .tmt-gk__cta { margin-top: auto; padding-top: 2px; font: 600 13px/1.3 var(--font-sans); color: var(--hv-gold-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hv-gold); }
.tmt-gcol .tmt-gk__card:hover .tmt-gk__cta { color: var(--hv-ink); }
@media (min-width: 768px) {
  .tmt-gcol .tmt-gk { padding-block: 64px 40px; }
  .tmt-gcol .tmt-gk__head { margin-bottom: 28px; }
  .tmt-gcol .tmt-gk__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 20px; }
  .tmt-gcol .tmt-gk__item { grid-column: span 2; }
  .tmt-gcol .tmt-gk__item:first-child, .tmt-gcol .tmt-gk__item:nth-child(2) { grid-column: span 3; }
  .tmt-gcol .tmt-gk__item:first-child .tmt-gk__media { aspect-ratio: 4 / 3; }
  .tmt-gcol h3.tmt-gk__name { font-size: 20px; }
  .tmt-gcol .tmt-gk__desc { font-size: 15px; }
}
@media (min-width: 992px) {
  .tmt-gcol .tmt-gk { padding-block: 80px 48px; }
  .tmt-gcol .tmt-gk__media, .tmt-gcol .tmt-gk__item:first-child .tmt-gk__media { aspect-ratio: 16 / 10; }
}

/* ---------- C. Gift Home: quà nổi bật (tối đa 8) + CTA ---------- */
.tmt-gcol .tmt-gf { padding-block: 36px var(--gc-sec); }
.tmt-gcol .tmt-gf .tmt-gk__head { margin-bottom: 22px; }
.tmt-gcol .tmt-gf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
@media (min-width: 768px) { .tmt-gcol .tmt-gf__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; } }
@media (min-width: 992px) { .tmt-gcol .tmt-gf__grid { gap: 44px 28px; } }
.tmt-gcol .tmt-gf__more { margin: 34px 0 0; text-align: center; }
.tmt-gcol a.tmt-gf__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; font: 600 14px/1.2 var(--font-sans); letter-spacing: 0.02em; text-decoration: none; color: var(--hv-navy-900); background: transparent; border: 1.5px solid var(--hv-navy-900); border-radius: 2px; transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease); }
.tmt-gcol a.tmt-gf__btn:hover { background: var(--hv-navy-900); color: var(--hv-ivory); }
.tmt-gcol a.tmt-gf__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 479.98px) { .tmt-gcol a.tmt-gf__btn { width: 100%; } }

/* ---------- D. Gift Home: CTA cuối ---------- */
.tmt-gcol .tmt-gz { padding-block: 48px; color: var(--hv-ivory); text-align: center; background: radial-gradient(640px 320px at 50% 0%, rgba(201, 169, 95, 0.16), transparent 62%), linear-gradient(180deg, var(--hv-navy-900), var(--hv-navy-950)); }
.tmt-gcol .tmt-gz__inner { display: flex; flex-direction: column; align-items: center; }
.tmt-gcol h2.tmt-gz__title { margin: 0 0 10px; font: 700 var(--gc-h2)/1.18 var(--font-display); color: #fff; text-wrap: balance; max-width: 22ch; }
.tmt-gcol .tmt-gz__text { margin: 0 0 22px; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(248, 243, 231, 0.86); }
.tmt-gcol a.tmt-gz__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 30px; font: 600 14px/1.2 var(--font-sans); letter-spacing: 0.02em; text-decoration: none; color: var(--hv-navy-950); background: var(--hv-gold); border: 1.5px solid var(--hv-gold); border-radius: 2px; }
.tmt-gcol a.tmt-gz__btn:hover { background: var(--hv-gold-soft); border-color: var(--hv-gold-soft); color: var(--hv-navy-950); }
.tmt-gcol a.tmt-gz__btn:focus-visible { outline: 3px solid var(--hv-gold-soft); outline-offset: 3px; }
@media (max-width: 479.98px) { .tmt-gcol a.tmt-gz__btn { width: 100%; } }
@media (min-width: 992px) { .tmt-gcol .tmt-gz { padding-block: 72px; } }

@media (prefers-reduced-motion: reduce) {
  .tmt-gcol .tmt-gk__media img, .tmt-gcol a.tmt-gf__btn { transition: none; }
  .tmt-gcol .tmt-gk__card:hover .tmt-gk__media img { transform: none; }
}

/* ---------- E. Gift Home trên mobile: rút gọn để trang không dài (khối đầy đủ giữ nguyên từ 768px) ---------- */
@media (max-width: 767.98px) {
  .tmt-gcol .tmt-gk { padding-block: 36px 20px; }
  .tmt-gcol .tmt-gk__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tmt-gcol .tmt-gf { padding-block: 24px 44px; }
  .tmt-gcol .tmt-gf__grid > :nth-child(n+7) { display: none; }
  .tmt-gcol--home .tmt-gs { padding-block: 40px; }
  .tmt-gcol--home .tmt-gs__inner { gap: 20px; }
  .tmt-gcol--home .tmt-gs__points > li { padding-block: 14px; }
  .tmt-gcol--home .tmt-gs__points p { display: none; }
  .tmt-gcol--home .tmt-gs__points h3 { margin: 0; }
  .tmt-gcol .tmt-gz { padding-block: 40px; }
}

/* Vùng chạm: liên kết tên danh mục cao tối thiểu 44px (cả thẻ vẫn là vùng bấm nhờ ::after) */
.tmt-gcol a.tmt-gk__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }