/*
 * tracking-page.css — component riêng trang Tra cứu vận đơn (/tra-van-don/),
 * nạp SAU front-page.css (inline) nên dùng chung token + .wrap/.eyebrow/
 * .center/.pat/.endcta/.rv. Chỉ định nghĩa class tv-* và .crumbs.
 * KHÔNG đè style form/kết quả của plugin vca-api-tracking (giữ nguyên).
 * Viết mobile-first.
 */

/* ===== breadcrumb trên nền hero tối (đồng bộ các trang trong) ===== */
.crumbs { font-size: 13px; margin-bottom: 16px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .78); }
.crumbs li + li::before { content: "›"; color: #ff8d96; font-weight: 800; }
.crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: #fff; } }
.crumbs [aria-current="page"] { color: #fff; font-weight: 700; }

/* ===== hero gọn: gradient navy + lưới chấm (đồng bộ trang Liên hệ) ===== */
.tv-hero { position: relative; isolation: isolate; color: #fff; padding-block: 56px 52px; background: linear-gradient(120deg, var(--navy-ink) 0%, var(--primary-deep) 62%, var(--primary) 130%); }
.tv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, .10) 1.1px, transparent 1.4px); background-size: 32px 32px; }
.tv-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; line-height: 1.18; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.tv-hero h1 em { font-style: normal; color: #ff6b76; }
.tv-hero .lead { color: rgba(255, 255, 255, .86); font-size: 16.5px; line-height: 1.65; max-width: 66ch; margin: 14px 0 0; }

/* ===== khung tra cứu: căn giữa, KHÔNG đụng style bên trong của plugin ===== */
.tv-box { max-width: 900px; margin-inline: auto; }

/* ===== 3 thẻ hướng dẫn (band + lưới chấm nhạt) ===== */
.tv-help-sec { background: var(--band); border-block: 1px solid var(--line); position: relative; isolation: isolate; }
.tv-help-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(color-mix(in srgb, var(--primary) 7%, transparent) 1.1px, transparent 1.4px); background-size: 26px 26px; }
.tv-help { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 860px) { .tv-help { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 24px 24px 22px; display: grid; gap: 8px; align-content: start; justify-items: start; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .tv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15, 47, 87, .22); } }
.tv-ic { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, transparent); margin-bottom: 4px; }
.tv-card h3 { color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -0.012em; margin: 0; }
.tv-card p { font-size: 14.5px; color: var(--text-2); line-height: 1.62; margin: 0; }
.tv-card p a { color: var(--primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tv-card p a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.tv-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 44px; font-size: 13.5px; font-weight: 800; color: var(--accent); text-decoration: none; }
.tv-more .arr { transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .tv-more:hover .arr { transform: translateX(4px); } }
.tv-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* khối dưới màn hình đầu */
#huong-dan { content-visibility: auto; contain-intrinsic-size: auto 500px; }

@media (prefers-reduced-motion: reduce) {
  .tv-card, .tv-more .arr, .crumbs a { transition: none; }
}