/* ==========================================================================
   TTHN4.2 — Skin theo bản demo thiết kế (navy #102d56 + xanh logo #00569a; vàng #f2bd3d chỉ trên nền tối; font Arial hệ thống).
   Nạp SAU `thacotaihanoi.css`: token màu nằm ở `:root` của file đó; file này chỉ restyle thành phần
   (header · hero · tab · thẻ xe · tin tức · form báo giá · footer). Số đo lấy từ `thacotaihanoi-static/styles.css`.
   ========================================================================== */

body { font-size: 15px; color: var(--tthn-text); }

/* ---------- Header (nền TRẮNG, chữ navy — Tùng chốt 2026-10-09) ---------- */
.tthn-header {
  background: #fff;
  border-bottom: 1px solid var(--tthn-line);
  box-shadow: 0 2px 12px rgba(23, 43, 77, .06);
  color: var(--tthn-text);
}
.tthn-header .tthn-container { min-height: 72px; gap: 28px; }
/* Logo chữ (khi chưa có ảnh logo): mặc định chữ TRẮNG cho footer navy; header trắng đặt lại bên dưới */
.tthn-logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: none; border: 1px solid #fff; color: #fff;
  font-size: 8px; font-weight: 800; line-height: 10px; letter-spacing: 0; text-align: center;
}
.tthn-logo-mark small { font-size: 6px; }
.tthn-logo-text b { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.tthn-logo-text span { font-size: 8px; letter-spacing: 1px; color: #a9c8ee; margin-top: 4px; }
.tthn-header .tthn-logo-mark { border-color: var(--tthn-navy); color: var(--tthn-navy); }
.tthn-header .tthn-logo-text b { color: var(--tthn-navy); }
.tthn-header .tthn-logo-text span { color: var(--tthn-muted); }
.tthn-nav a {
  color: var(--tthn-navy); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
/* Hover/hiện tại: xanh đậm; gạch chân dưới là xanh logo */
.tthn-nav > ul > li > a:hover,
.tthn-nav a.is-active,
.tthn-nav .current-menu-item > a,
.tthn-nav .current_page_item > a { color: var(--tthn-primary-dark); }
/* Menu con (nền trắng) giữ chữ tối, không in hoa */
.tthn-nav .sub-menu a { color: var(--tthn-text); text-transform: none; font-size: 14px; letter-spacing: 0; }
.tthn-nav .sub-menu .current-menu-item > a,
.tthn-nav .sub-menu a:hover { color: var(--tthn-primary-dark); }
.tthn-hotline { background: var(--tthn-primary); color: #fff; padding: 0 16px 0 6px; border-radius: 999px; min-height: 40px; }
.tthn-hotline .ic { background: transparent; color: #fff; width: 30px; height: 30px; }
.tthn-hotline small { display: none; }
.tthn-hotline b { font-size: 12px; font-weight: 800; color: #fff; }
.tthn-hotline:hover { background: var(--tthn-primary-dark); }
.tthn-burger span { background: var(--tthn-navy); }
.tthn-search-toggle, .tthn-cart-link { background: var(--tthn-surface); color: var(--tthn-navy); }
.tthn-search-toggle:hover, .tthn-cart-link:hover { background: var(--tthn-primary); color: var(--tthn-on-primary); }

/* ---------- Hero ---------- */
.tthn-hero {
  background: linear-gradient(110deg, #0b2850 0%, #123760 55%, #1e4b82 100%);
  color: #fff;
  min-height: 560px;
  display: flex; align-items: flex-end;
}
.tthn-hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* Lớp phủ navy đủ đậm để chữ trắng ĐỌC ĐƯỢC trên ảnh sáng (đo: đoạn mô tả hero mờ trên ảnh xe) */
.tthn-hero.has-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0b2850e6 0%, #0b2850a6 50%, #0b285040 100%); }
@media (max-width: 900px) { .tthn-hero.has-img::before { background: linear-gradient(180deg, #0b2850cc, #0b2850f2); } }
.tthn-hero .tthn-container.tthn-hero-grid {
  position: relative; z-index: 2;
  grid-template-columns: 1fr 390px; gap: 40px; align-items: end;
  padding-top: 80px; padding-bottom: 90px;
}
.tthn-hero-badge {
  background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 16px; border-radius: 0;
  color: var(--tthn-gold); font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
}
.tthn-hero h1 { font-size: clamp(40px, 6vw, 78px); line-height: 1.03; text-transform: uppercase; margin: 0 0 16px; letter-spacing: 0; }
.tthn-hero h1 em { color: var(--tthn-gold); }
.tthn-hero p { color: #dce8f5; line-height: 1.8; font-size: 15px; max-width: 500px; }
.tthn-hero .tthn-btn { text-transform: uppercase; font-size: 11px; font-weight: 800; padding: 14px 22px; }
/* Nút trên nền tối giữ VÀNG để đủ tương phản (xanh logo trên navy/ảnh tối sẽ chìm) */
.tthn-hero .tthn-btn-primary, .tthn-finder .tthn-btn-primary { background: var(--tthn-gold); color: var(--tthn-on-gold); }
.tthn-hero .tthn-btn-primary:hover, .tthn-finder .tthn-btn-primary:hover { background: #fff; }
.tthn .tthn-hero a.tthn-btn-primary { color: #000; } /* 2026-10-10 (Tùng): chữ nút "Xem dòng xe" màu đen */
.tthn-hero .tthn-btn-ghost { color: #fff; border-color: #ffffff66; }
.tthn-hero .tthn-btn-ghost:hover { border-color: var(--tthn-gold); color: var(--tthn-gold); }

/* Ô "Bạn cần chở gì?" */
.tthn-finder {
  padding: 26px; border: 1px solid #ffffff33; background: #ffffff1a; backdrop-filter: blur(12px); border-radius: 5px;
}
.tthn-finder h2 { margin: 8px 0 20px; font-size: 27px; color: #fff; }
.tthn-finder select {
  width: 100%; padding: 14px; border: 0; border-radius: 5px; background: #fff; color: #4a5568; font: inherit;
}
.tthn-finder-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tthn-finder-quick a {
  padding: 15px 8px; text-align: center; color: #fff; border: 1px solid #ffffff44; border-radius: 5px; font-size: 13px;
}
.tthn-finder-quick a:hover { border-color: var(--tthn-gold); color: var(--tthn-gold); }
.tthn-finder .tthn-btn { width: 100%; justify-content: center; margin-top: 16px; text-transform: uppercase; font-size: 11px; font-weight: 800; }

/* ---------- Dải 4 cụm tin cậy ---------- */
.tthn-features { margin-top: -38px; gap: 12px; }
.tthn-feature { border: 0; border-radius: 5px; box-shadow: 0 12px 30px #172b4d18; align-items: center; padding: 20px; }
.tthn-feature .ic { border-radius: 50%; background: var(--tthn-primary-tint); color: var(--tthn-primary); }
.tthn-feature b { font-size: 13px; text-transform: uppercase; }
.tthn-feature span { font-size: 11px; }

/* ---------- Khối + tiêu đề ---------- */
.tthn-section { padding: 70px 0; }
.tthn-section.alt { background: var(--tthn-surface); }
.tthn-section-head { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 769px) { .tthn-section-head { align-items: flex-end; } }
.tthn-section-head h2 { font-size: clamp(26px, 3vw, 38px); text-transform: uppercase; letter-spacing: 0; }
.tthn-section-head h2::after { display: none; }
.tthn-section-head .tthn-eyebrow {
  background: none; padding: 0; border-radius: 0; color: var(--tthn-primary); font-size: 11px; font-weight: 800; letter-spacing: 3px; margin-bottom: 8px;
}
.tthn a.tthn-link-more { color: var(--tthn-primary); font-size: 12px; font-weight: 800; text-transform: uppercase; }
/* Khối sản phẩm theo danh mục (Xe tải van, Tải trung…): tiêu đề giữa trang như demo */
.tthn-cat-block:has(.tthn-products) > .tthn-container > .tthn-section-head { justify-content: center; text-align: center; position: relative; margin-bottom: 35px; }
.tthn-cat-block:has(.tthn-products) > .tthn-container > .tthn-section-head .tthn-link-more { position: absolute; right: 0; bottom: 6px; }

/* ---------- Thẻ danh mục (ảnh + lớp phủ navy) ---------- */
/* Nền thẻ SÁNG + ảnh 100% để thấy rõ xe; lớp phủ navy chỉ nằm ~45% phía dưới để chữ trắng đọc được. */
.tthn-cat { aspect-ratio: auto; min-height: 285px; border-radius: 5px; background: linear-gradient(180deg, #f3f6fa, #dfe7f0); box-shadow: none; }
.tthn-cat-overlay { background: linear-gradient(180deg, transparent 50%, rgba(7, 27, 54, .92) 100%); padding: 24px; }
.tthn-cat-overlay b { font-size: 20px; text-transform: uppercase; margin: 7px 0; }
.tthn-cat-overlay span { font-size: 12px; opacity: .8; }
.tthn-cat-overlay .tthn-cat-count {
  align-self: flex-start; background: var(--tthn-gold); color: var(--tthn-on-gold); opacity: 1;
  padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; text-transform: uppercase;
}
/* Ảnh trống (chưa có ảnh danh mục): nền gradient thay ảnh vỡ */
.tthn-cat:not(:has(img[src])) { background: linear-gradient(135deg, #123760, #0b2850); }

/* ---------- Tab sản phẩm (pill vàng) ---------- */
.tthn-tabs-block { background: #fff; }
.tthn-tablist { gap: 14px; margin-bottom: 42px; }
.tthn-tablist__btn { padding: 0 24px; min-height: 50px; font-size: 14px; font-weight: 800; border-radius: 999px; }
.tthn-tablist__btn:hover { background: var(--tthn-primary-tint); border-color: var(--tthn-primary); color: var(--tthn-primary-dark); }
.tthn-tablist__btn.is-active { background: var(--tthn-primary); border-color: var(--tthn-primary); color: #fff; }

/* ⚠️ Link màu riêng phải dùng `.tthn a.xxx` (0,2,1): rule nền `.tthn a { color: inherit }` của theme đè mất `.xxx` đơn. */
/* ---------- Thẻ sản phẩm ---------- */
.tthn-products { gap: 20px; }
.tthn-card { border-radius: 5px; border-color: #e4e9f0; box-shadow: 0 8px 20px #172b4d0a; }
.tthn-card-media { aspect-ratio: 220 / 160; background: linear-gradient(135deg, #eaf0f8, #dfe8f4); }
.tthn-card-media img { object-fit: cover; }
.tthn-card-body { padding: 20px; gap: 0; }
.tthn-card-title { font-size: 16px; font-weight: 800; text-transform: uppercase; color: var(--tthn-navy); margin-bottom: 20px; }
.tthn-card-spec {
  display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #edf0f3; padding: 12px 0; font-size: 13px; color: #70809a;
}
.tthn-card-spec strong { color: var(--tthn-navy); text-align: right; }
.tthn-card-spec > span { display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap; }
.tthn-card-spec svg { flex: none; width: 16px; height: 16px; color: var(--tthn-gold); }
.tthn-card .tthn-price { margin-top: 8px; }
.tthn a.tthn-card-quote {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid #edf0f3;
  color: var(--tthn-primary); font-size: 12px; font-weight: 800; text-transform: uppercase;
}
.tthn a.tthn-card-quote:hover { color: var(--tthn-navy); }

/* ---------- Tin tức ---------- */
.tthn-news-feature__main, .tthn-news-row, .tthn-news-mini { border-radius: 5px; border-color: #e4e9f0; background: #fff; }
.tthn-news-feature__title, .tthn-news-row__title, .tthn-news-mini__title { color: var(--tthn-navy); }
.tthn-news-feature__date, .tthn-news-row__date, .tthn-news-mini__date { color: var(--tthn-primary); font-weight: 800; }

/* ---------- Khối liên hệ + form báo giá ---------- */
.tthn-lead { background: var(--tthn-navy); color: #fff; padding: 80px 0; }
.tthn-lead-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 60px; align-items: center; }
.tthn-lead .tthn-eyebrow { color: var(--tthn-gold); font-size: 11px; font-weight: 800; letter-spacing: 3px; }
.tthn-lead h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; text-transform: uppercase; margin: 0 0 16px; }
.tthn-lead h2 em { color: var(--tthn-gold); font-style: normal; }
.tthn-lead p { color: #bed1e9; line-height: 1.7; max-width: 520px; }
.tthn a.tthn-lead-tel { display: inline-block; margin-top: 8px; color: var(--tthn-gold); font-weight: 800; }
.tthn-quote { background: #fff; padding: 24px; border-radius: 5px; color: var(--tthn-navy); }
.tthn-quote input, .tthn-quote select, .tthn-quote textarea {
  display: block; width: 100%; border: 1px solid #e4e8ed; border-radius: 5px; padding: 13px; margin-bottom: 12px; font: inherit; color: var(--tthn-navy); background: #fff;
}
.tthn-quote textarea { resize: vertical; }
.tthn-quote .tthn-btn { width: 100%; justify-content: center; text-transform: uppercase; font-size: 11px; font-weight: 800; padding: 14px 22px; }
.tthn-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tthn-quote-msg { margin: 12px 0 0; font-weight: 800; color: var(--tthn-primary); }
.tthn-quote-msg.is-err { color: #c0392b; }

/* ---------- Footer (navy đậm) ---------- */
.tthn-footer { border-top: 0; font-size: 13px; }
.tthn-footer .tthn-logo-text b { color: #fff; }
.tthn-footer h4 { text-transform: uppercase; color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tthn-hero .tthn-container.tthn-hero-grid { grid-template-columns: 1fr; padding-bottom: 55px; }
  .tthn-finder { display: none; }
  .tthn-lead-grid { grid-template-columns: 1fr; gap: 30px; }
  .tthn-section { padding: 48px 0; }
}
@media (max-width: 768px) {
  /* Thẻ danh mục ("Dòng xe nổi bật"): 1 HÀNG, thấy 2 thẻ/lần, phần còn lại cuộn ngang + nút ‹ › (TTHN2.8).
     Dải flex + `contain: paint` + ẩn thanh cuộn do `thacotaihanoi.css` (≤768px) lo; skin chỉ đổi gap + bề rộng thẻ
     (2 thẻ = trừ 1 khe gap 12px). Nút ‹ › KHÔNG ẩn nữa. */
  .tthn-cats, .tthn-cats--cols-6, .tthn-cats--cols-4, .tthn-cats--cols-3, .tthn-cats--horizontal { gap: 12px; }
  .tthn-cats .tthn-cat, .tthn-cats--horizontal .tthn-cat { flex: 0 0 calc((100% - 12px) / 2); min-height: 190px; }
  .tthn-cat-overlay { padding: 16px; }
  .tthn-cat-overlay b { font-size: 16px; }
  /* Thông số trong thẻ hẹp: nhãn trên, giá trị dưới (tránh xuống dòng lộn xộn) */
  .tthn-card-spec { flex-direction: column; gap: 2px; padding: 9px 0; }
  .tthn-card-spec strong { text-align: left; }
  /* Tải trọng: nhãn + giá trị cùng 1 dòng; Thùng xe giữ xếp dọc vì chuỗi kích thước dài */
  /* flex-wrap: giá trị quá dài (VD "1.490/1.990 (kg)") tự rớt xuống dòng dưới, canh trái như Thùng xe */
  .tthn-card-spec--inline { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 6px; }
  .tthn-card-spec--inline strong { text-align: right; }
  /* Thẻ sản phẩm mobile: thu padding thân thẻ cho gọn */
  .tthn-card-body { padding: 10px; gap: 0; }
}
@media (max-width: 560px) {
  /* Bỏ min-height 520px (hero căn đáy ⇒ để khoảng trống lớn phía trên chữ) + giảm padding-top 80→36px */
  .tthn-hero { min-height: 0; }
  .tthn-hero .tthn-container.tthn-hero-grid { padding-top: 36px; }
  .tthn-hero h1 { font-size: 40px; }
  .tthn-features { margin-top: -25px; }
  .tthn-cat-block:has(.tthn-products) > .tthn-container > .tthn-section-head .tthn-link-more { position: static; }
}

/* Mobile: nút pill "Xem thêm →" — rule skin `.tthn a.tthn-link-more` (0,2,1) đè rule mobile (0,2,0) làm chữ xanh trùng nền xanh (không thấy chữ).
   Specificity (0,3,1) để thắng, đưa chữ về `--tthn-on-primary` + cỡ 14px. */
@media (max-width: 768px) {
  .tthn .tthn-section-head a.tthn-link-more { color: var(--tthn-on-primary); font-size: 14px; }
}

/* Ô chọn (select): mũi tên tự vẽ, cách mép phải 16px (mũi tên gốc của trình duyệt dính sát cạnh phải) */
.tthn-finder select,
.tthn-quote select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23102d56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Tiêu đề form báo giá (icon + chữ) — dùng cho cả form trang chủ lẫn popup #popup-tu-van; nút "Hoặc gọi ngay" nằm ở cột trái khối tư vấn trang chủ */
.tthn-quote__title { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 16px; font-weight: 800; letter-spacing: .3px; color: var(--tthn-navy); }
.tthn-quote__title-ic { flex: none; width: 22px; height: 22px; color: var(--tthn-gold); }
.tthn-lead .tthn-lead-call { margin-top: 12px; }

/* Trang chi tiết SP: `.tthn-section { padding: 70px 0 }` ở trên đè `.tthn-single-section { padding: 28px 0 0 }` của thacotaihanoi.css
   → khoảng trống ~70px phía trên breadcrumb. Chỉ trả lại phần ĐỈNH (đáy giữ nguyên để không đổi khoảng cách tới khối "Sản phẩm tương tự"). */
.tthn-section.tthn-single-section { padding-top: 20px; }