/* ============================================================
   GAZANO BRAND FONTS — font-family 'Gazano' (dựng từ bộ font logo
   Helvetica Neue, subset hỗ trợ tiếng Việt đầy đủ)
   Dùng cho: logo wordmark + heading + nav + button (brand display).
   Body text giữ Be Vietnam Pro / Montserrat cho dễ đọc tiếng Việt dài.
   @font-face url resolve tương đối theo file CSS này → ổn định mọi trang.
   ============================================================ */
@font-face{font-family:'Gazano';src:url('fonts/gazano-thin.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Gazano';src:url('fonts/gazano-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gazano';src:url('fonts/gazano-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gazano';src:url('fonts/gazano-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gazano';src:url('fonts/gazano-heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Gazano';src:url('fonts/gazano-heavy.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ── LOGO WORDMARK — mảnh, thanh thoát như badge logo ── */
.logo,.topbar-logo,.login-box .logo,.footer-brand .logo{
  font-family:'Gazano','Montserrat','Be Vietnam Pro',Arial,sans-serif !important;
  font-weight:300 !important;
}

/* ── HEADINGS + BRAND DISPLAY (cả gazano_vn lẫn shop) ── */
.hero-title,.hero-expert,.sec-title,.sec-label,
.title,.subtitle,.section-title h1,.section-title h2,.banner h2,.trust b,.eyebrow,
.card h3,.product-card h3,.detail-info h1,.detail-info h2,
.pd-section h2,#pdName,.pd-name,
.hot-head h2,.shop-banner-title,.shop-banner-eyebrow,.shop-hot-label,
.article-hero h1,.article-cat,.article-content h2,.article-content h3,
.nav-links,.nav-cta,.btn,.ai-tldr-tag,
.gz-gsrch-grouphead,.cat-body h3,.svc-card h3,.ach-card h3,.post-card h3,
h1,h2,h3,h4{
  font-family:'Gazano','Montserrat','Be Vietnam Pro','Segoe UI',Arial,sans-serif !important;
}

/* ── Mobile safety net: nút CTA "Đặt lịch" không tràn ngang ở ≤520px
   (font Helvetica Neue rộng hơn → 2 nút side-by-side vượt 375px) ── */
@media(max-width:520px){
  .booking-cta-btns{width:100%;flex-direction:column;gap:10px}
  .booking-cta-btns .btn{width:100%}
}

/* ── FIX hiển thị tiếng Việt trên Windows (A37) ──
   Chữ UI nhỏ (nav · nút · nhãn eyebrow · badge · nhãn giá) đổi sang 'Be Vietnam Pro' —
   font thiết kế chuẩn cho tiếng Việt, hiển thị dấu sắc nét trên mọi nền tảng.
   Font 'Gazano' (Helvetica Neue) hiển thị dấu tiếng Việt bị "méo" ở cỡ nhỏ +
   letter-spacing trên Windows. Heading lớn (h1/h2, hero-title, sec-title, tên SP)
   VẪN giữ font thương hiệu. ── */
.nav-links,.nav-cta,.home-shortcut,.cart-link,.btn,.buy,
.eyebrow,.sec-label,.shop-banner-eyebrow,.shop-hot-label,.ai-tldr-tag,.article-cat,.art-cat,.gz-gsrch-grouphead,
.badge,.badge-hot,.ach-tag,.stat-pill,.loc-badge,.post-cat,.post-card .post-cat,.media-tag,.cat-num,.tl-year,
.svc-price-lbl,.coso-lbl,.binfo-lbl,.partner-card h4{
  font-family:'Be Vietnam Pro','Montserrat','Segoe UI',Arial,sans-serif !important;
}

/* ── BỎ hết "eyebrow / kicker labels" theo yêu cầu (Câu chuyện thương hiệu, Triết lý, Con người, Cơ sở, Mua lẻ nhanh, …)
   Hide toàn cục (KHÔNG phải sửa 30+ HTML). Ảnh hưởng cả .sec-label & .eyebrow ở mọi trang. ── */
.sec-label, .eyebrow { display: none !important; }

/* ── E-E-A-T DATA BLOCK — số liệu thực Gazano (Phase 11.3) ── */
.gz-stats{background:linear-gradient(135deg,#fff8ec,#fef0d6);border:1px solid #e8c79d;border-radius:14px;padding:20px 22px;margin:22px 0 28px}
.gz-stats-head{font-size:11px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:#7d4d1e;margin-bottom:14px}
.gz-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:12px}
.gz-stat{background:#fff;border:1px solid #f0e3cb;border-radius:10px;padding:14px;text-align:center}
.gz-stat-num{font-size:24px;font-weight:900;color:#a5692a;line-height:1;margin-bottom:4px;font-family:'Gazano','Montserrat','Be Vietnam Pro',Arial,sans-serif}
.gz-stat-lbl{font-size:12px;color:#786f66;line-height:1.35}
.gz-stats-note{margin:0;font-size:13.5px;color:#3b2722;line-height:1.65}
.gz-stats-note b{color:#7d4d1e}
@media(max-width:640px){.gz-stats-grid{grid-template-columns:1fr 1fr;gap:10px}.gz-stat-num{font-size:20px}}

/* ── BÀI LIÊN QUAN — internal linking ── */
.gz-related{background:#fffaf4;border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:32px 0 8px}
.gz-related-head{font-size:13px;font-weight:900;letter-spacing:2.5px;text-transform:uppercase;color:#a5692a;margin-bottom:14px}
.gz-related-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:10px}
.gz-related-item{display:block;padding:12px 14px;border:1px solid #f0e3cb;border-radius:10px;background:#fff;text-decoration:none;color:#2e2c29;transition:border-color .15s,transform .15s}
.gz-related-item:hover{border-color:#a5692a;transform:translateX(3px)}
.gz-related-cat{font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:#9b5f29;margin-bottom:3px}
.gz-related-ttl{font-size:15px;font-weight:700;color:#2e2c29;margin-bottom:2px;line-height:1.3}
.gz-related-desc{font-size:13px;color:#786f66;line-height:1.5}
@media(min-width:640px){.gz-related-list{grid-template-columns:1fr 1fr 1fr;gap:12px}}


/* ── Inline "Tư vấn" button trong bài kiến thức (thay link "Mua tại Gazano Shop →") ── */
.art-tuvan{display:inline;background:transparent;border:0;padding:0;color:var(--brown,#a5692a);font-weight:700;font-family:inherit;font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.art-tuvan:hover{color:var(--brown2,#7d4d1e)}


/* ── CTA bar dính đáy màn hình (mobile — trang dịch vụ) ── */
.gz-cta-bar{display:none}
@media(max-width:640px){
  .gz-cta-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:1px;background:#e8ded1;border-top:1px solid #d9c7b5;box-shadow:0 -6px 20px rgba(63,42,20,.12)}
  .gz-cta-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 4px;font-size:13px;font-weight:900;letter-spacing:.5px;text-decoration:none}
  .gz-cta-call{background:#fff;color:#7d4d1e}
  .gz-cta-zalo{background:#0068ff;color:#fff}
  .gz-cta-book{background:#a5692a;color:#fff}
  body:has(.gz-cta-bar){padding-bottom:52px}
  body:has(.gz-cta-bar) .zalo-float,body:has(.gz-cta-bar) .float-zalo{display:none!important}
}

/* ── Sản phẩm liên quan (cuối trang chi tiết SP) ── */
.gz-relprod{max-width:1180px;margin:34px auto 40px;padding:0 20px}
.gz-relprod h2{font-size:20px;letter-spacing:1px;color:#3b2a1c;margin:0 0 14px;text-transform:uppercase}
.gz-relprod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gz-relprod-card{display:block;background:#fff;border:1px solid #e8ded1;border-radius:12px;overflow:hidden;text-decoration:none;color:#2e2c29;transition:transform .15s,box-shadow .15s}
.gz-relprod-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(63,42,20,.12)}
.gz-relprod-card img{width:100%;height:130px;object-fit:cover;display:block;background:#f3eadf}
.gz-relprod-name{display:block;font-size:13.5px;font-weight:700;line-height:1.25;padding:9px 10px 2px;min-height:36px}
.gz-relprod-price{display:block;font-size:14px;font-weight:900;color:#8e3741;padding:0 10px 10px}
@media(max-width:640px){.gz-relprod-grid{grid-template-columns:1fr 1fr;gap:8px}.gz-relprod-card img{height:100px}}

/* ── Direct-answer box (GEO — trang dịch vụ, ngay dưới hero desc) ── */
.gz-answer{background:#fff;border:1px solid #e6c17a;border-left:4px solid #d6a52e;border-radius:12px;padding:14px 18px;margin:0 0 26px;font-size:15px;line-height:1.7;color:#3b2a1c;max-width:560px;box-shadow:0 8px 22px rgba(63,42,20,.06)}
.gz-answer b{color:#7d4d1e}
.gz-answer a{color:#a5692a;font-weight:800;text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.gz-answer{font-size:14px;padding:12px 14px}}

/* ── Mô tả danh mục (GEO/SEO text block cuối trang danh mục) ── */
.gz-cat-desc{max-width:860px;margin:14px auto 46px;padding:26px 28px;background:#fffaf4;border:1px solid #e8ded1;border-radius:16px}
.gz-cat-desc h2{font-size:22px;letter-spacing:.5px;margin:0 0 12px;color:#3b2a1c;line-height:1.3}
.gz-cat-desc p{color:#4a4038;font-size:15px;line-height:1.75;margin:0 0 12px}
.gz-cat-desc a{color:#a5692a;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.gz-cat-desc b{color:#3b2a1c}
.gz-cat-consult{background:#fff;border:1px dashed #d9c7b5;border-radius:12px;padding:14px 16px!important;font-size:14px!important;margin-bottom:0!important}
@media(max-width:640px){.gz-cat-desc{padding:18px 16px;margin:10px auto 30px}.gz-cat-desc h2{font-size:18px}.gz-cat-desc p{font-size:14px}}


/* ══════════════════════════════════════════════════════════════
   TỐI ƯU MOBILE — Thẻ sản phẩm SIÊU GỌN, 2 cột (6–8 SP/màn hình)
   Áp cho cả 2 hệ thẻ: .products (tat-ca-san-pham) + .product-grid (categories)
   Mobile chỉ hiện: ảnh + tên + giá + nút (mô tả ẩn — xem ở trang chi tiết SP)
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* 2 cột cho mọi lưới sản phẩm shop */
  .product-grid,.products{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}

  /* Thẻ gọn: bỏ chiều cao tối thiểu 520px, viền mềm */
  .product-card{min-height:0!important;border-radius:12px!important}

  /* Ảnh thấp (~96px) — cả ảnh trực tiếp lẫn ảnh trong .product-img */
  .product-card img{height:96px!important}
  .product-grid .product-img,.product-grid .product-card img{height:96px!important;aspect-ratio:auto!important}

  /* Padding thân thẻ tối giản */
  .products .product-card{padding:7px!important}
  .product-grid .product-body{padding:8px!important;gap:2px!important}

  /* Tiêu đề gọn: 13px, tối đa 2 dòng */
  .product-card h3,.product-body h3{font-size:13px!important;line-height:1.2!important;margin:5px 0 2px!important;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:0!important}

  /* Mô tả ẨN trên mobile — khách xem chi tiết trong trang SP */
  .product-card p,.product-body p{display:none!important}

  /* Giá + nút Tư vấn gọn */
  .product-card .price,.product-body .price{font-size:15px!important;margin:3px 0 2px!important;letter-spacing:.3px!important}
  .product-card .old{font-size:11px!important}
  .product-card .buy,.product-card .btn-tuvan{padding:7px 8px!important;font-size:11px!important;margin-top:3px!important;letter-spacing:.5px!important;border-radius:8px!important}

  /* Nhãn badge / step-tag nhỏ lại để không che thẻ */
  .badge{top:6px!important;left:6px!important;font-size:9px!important;padding:3px 7px!important}
  .step-tag{top:6px!important;right:6px!important;font-size:9px!important;padding:3px 7px!important}
}