/**
 * VCA API Tracking - Stylesheet tổng hợp (v3.2.5)
 * Màu chủ đạo: #1e5ba8
 *
 * Toàn bộ CSS của plugin nằm tại đây (trước v3.2.5 nằm inline trong các file
 * template PHP - đã tách ra để trình duyệt cache được và giảm dung lượng
 * HTML/AJAX response). File này được enqueue CHỈ trên trang có shortcode.
 *
 * Bố cục file:
 *  1. Loading overlay
 *  2. Form tra cứu (tracking-form.php)
 *  3. Hộp thông báo lỗi (tracking-error.php + AJAX)
 *  4. Kết quả: thông tin vận đơn (tracking-result.php)
 *  5. Timeline + Bằng chứng giao hàng (POD)
 *  6. Lightbox xem ảnh
 *  7. Responsive / A11y / Print
 */

/* ============ 1. Loading overlay ============ */
.vca-loading { position: fixed; z-index: 999999; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; }
.vca-loading::after { content: ""; width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #1e5ba8; border-radius: 50%; animation: vca-spin 1s linear infinite; }

@keyframes vca-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============ 2. Form tra cứu ============ */
.vca-tracking-container {
    --vca-blue: #1e5ba8;
    --vca-blue-dark: #16457f;
    --vca-blue-tint: #e8f0fa;
    --vca-blue-tint-2: #d5e4f5;
    --vca-ink: #22303f;
    --vca-ink-soft: #5b6b7d;
    --vca-line: #dde5ee;
    --vca-surface: #ffffff;
    --vca-surface-2: #f4f7fb;
    --vca-green: #1a9c4b;
    --vca-green-tint: #e5f6ec;
    --vca-amber: #b97a0a;
    --vca-amber-tint: #fdf3e0;
    --vca-red: #c0392b;
    --vca-red-tint: #fdecea;
    --vca-shadow: 0 3px 12px rgba(15, 50, 96, 0.10);

    max-width: 920px;
    margin: 0 auto;
    padding: 14px 12px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--vca-ink);
    line-height: 1.45;
    box-sizing: border-box;
}

.vca-tracking-container *,
.vca-tracking-container *::before,
.vca-tracking-container *::after { box-sizing: border-box; }

.vca-panel {
    background: var(--vca-surface);
    border-radius: 10px;
    box-shadow: var(--vca-shadow);
    overflow: hidden;
}

.vca-tabs {
    display: flex;
    background: var(--vca-surface-2);
    border-bottom: 1px solid var(--vca-line);
}

.vca-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* Chỉ có 1 tính năng tra cứu nên tab trải rộng bằng form */
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vca-ink-soft);
}

.vca-tab svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.vca-tab.active {
    background: var(--vca-surface);
    color: var(--vca-blue);
    border-top: 3px solid var(--vca-blue);
    margin-top: -1px;
}

.vca-form-body { padding: 14px 20px 16px; }

.vca-track-form { margin: 0; }

.vca-form-row { display: flex; gap: 10px; align-items: center; }

.vca-input-track {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--vca-ink);
    background: var(--vca-surface);
    border: 1.5px solid var(--vca-line);
    border-radius: 7px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vca-input-track:focus {
    border-color: var(--vca-blue);
    box-shadow: 0 0 0 3px var(--vca-blue-tint-2);
}

.vca-input-track::placeholder { color: var(--vca-ink-soft); font-weight: 400; letter-spacing: 0; }

.vca-input-track.error { border-color: var(--vca-red); box-shadow: 0 0 0 3px var(--vca-red-tint); }
.vca-input-track.success { border-color: var(--vca-green); box-shadow: 0 0 0 3px var(--vca-green-tint); }

.vca-track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 22px;
    background: var(--vca-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
    position: relative;
}

.vca-track-btn:hover { background: var(--vca-blue-dark); color: #fff; }
.vca-track-btn .vca-arrow-icon { width: 20px; height: 13px; }

.vca-track-btn.loading { pointer-events: none; opacity: 0.75; }
.vca-track-btn.loading span,
.vca-track-btn.loading .vca-arrow-icon { opacity: 0; }
.vca-track-btn.loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vca-spin 1s linear infinite;
}

.vca-example-text {
    color: var(--vca-ink-soft);
    font-size: 12.5px;
    margin: 8px 0 0;
}

.vca-example-text strong { color: var(--vca-red); font-weight: 700; }

.vca-tracking-result { width: 100%; }
.vca-tracking-result:empty { display: none; }

/* ============ 3. Hộp thông báo lỗi (dùng chung AJAX + server-side) ============ */
.vca-error-box {
    margin-top: 12px;
    background: var(--vca-surface, #ffffff);
    border: 1px solid var(--vca-line, #dde5ee);
    border-left: 4px solid var(--vca-red, #c0392b);
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 24px;
}

.vca-error-box h3 { margin: 0; font-size: 15px; color: var(--vca-red, #c0392b); font-weight: 700; }
.vca-error-box p { margin: 0; font-size: 13.5px; color: var(--vca-ink, #22303f); }
.vca-error-box .vca-error-code { font-weight: 700; color: var(--vca-blue, #1e5ba8); letter-spacing: 0.04em; }

.vca-error-hotline {
    background: var(--vca-blue-tint, #e8f0fa);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 13.5px;
    white-space: nowrap;
    color: var(--vca-ink, #22303f);
}

.vca-error-hotline a { color: var(--vca-blue, #1e5ba8); font-weight: 800; text-decoration: none; }
.vca-error-hotline a:hover { text-decoration: underline; }

/* Lời cảm ơn cuối thông báo vận đơn quá hạn tra cứu - chiếm trọn 1 dòng */
.vca-error-thanks {
    flex-basis: 100%;
    font-style: italic;
    color: var(--vca-ink-soft, #5b6b7d) !important;
    margin: 2px 0 0 !important;
}

/* Tương thích ngược: .vca-error-message là markup lỗi của các bản JS cũ
   (trước 3.2.0) còn nằm trong cache trình duyệt khách. Cơ chế cứu hộ JS sẽ
   thay bản cũ ngay sau đó, nhưng trong lúc chờ thì hộp lỗi cũ vẫn phải nhìn
   tử tế thay vì chữ trần không style. */
.vca-error-message {
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #dde5ee;
    border-left: 4px solid #c0392b;
    border-radius: 10px;
    padding: 14px 20px;
    text-align: left;
}

.vca-error-message h3 { margin: 0 0 4px; font-size: 15px; color: #c0392b; font-weight: 700; }
.vca-error-message p { margin: 0; font-size: 13.5px; color: #22303f; }

/* ============ 4. Kết quả: thông tin vận đơn ============ */
.vca-result-wrapper {
    --vca-blue: #1e5ba8;
    --vca-blue-dark: #16457f;
    --vca-blue-tint: #e8f0fa;
    --vca-blue-tint-2: #d5e4f5;
    --vca-ink: #22303f;
    --vca-ink-soft: #5b6b7d;
    --vca-line: #dde5ee;
    --vca-surface: #ffffff;
    --vca-surface-2: #f4f7fb;
    --vca-green: #1a9c4b;
    --vca-green-tint: #e5f6ec;
    --vca-amber: #b97a0a;
    --vca-amber-tint: #fdf3e0;
    --vca-red: #c0392b;
    --vca-red-tint: #fdecea;

    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.45;
    color: var(--vca-ink);
}

.vca-result-wrapper *,
.vca-result-wrapper *::before,
.vca-result-wrapper *::after { box-sizing: border-box; }

.vca-info-box {
    margin-top: 12px;
    background: var(--vca-surface);
    border: 1px solid var(--vca-line);
    border-radius: 10px;
    overflow: hidden;
}

.vca-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 20px;
    background: var(--vca-blue-tint);
    border-bottom: 1px solid var(--vca-line);
}

.vca-result-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.03em;
    margin: 0;
    color: var(--vca-blue);
}

.vca-bill-code { letter-spacing: 0.05em; }

.vca-badge-status {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--vca-surface-2);
    color: var(--vca-ink-soft);
}

.vca-badge-status.status-delivered { background: var(--vca-green-tint); color: var(--vca-green); }
.vca-badge-status.status-processing { background: var(--vca-amber-tint); color: var(--vca-amber); }
.vca-badge-status.status-pending { background: var(--vca-blue-tint-2); color: var(--vca-blue); }
.vca-badge-status.status-cancelled { background: var(--vca-red-tint); color: var(--vca-red); }

.vca-info-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0 24px;
    padding: 12px 20px;
}

.vca-info-col { display: flex; flex-direction: column; gap: 6px; }
.vca-info-col + .vca-info-col { border-left: 1px solid var(--vca-line); padding-left: 24px; }

.vca-field { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.vca-field-k { color: var(--vca-ink-soft); white-space: nowrap; }
.vca-field-v { font-weight: 700; text-align: right; color: var(--vca-ink); }

/* ============ 5. Timeline + Bằng chứng giao hàng ============ */
.vca-detail {
    margin-top: 12px;
    background: var(--vca-surface);
    border: 1px solid var(--vca-line);
    border-radius: 10px;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 10px 28px;
}

.vca-detail.vca-no-pod { grid-template-columns: 1fr; }

.vca-block-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vca-blue);
    margin: 0 0 8px;
}

.vca-timeline { list-style: none; margin: 0; padding: 0; position: relative; }

.vca-timeline::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 10px;
    width: 2px;
    background: var(--vca-line);
}

.vca-step { position: relative; padding: 0 0 12px 28px; margin: 0; }
.vca-step:last-child { padding-bottom: 0; }

.vca-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--vca-surface);
    border: 2px solid var(--vca-ink-soft);
}

.vca-step.current::before {
    border-color: var(--vca-blue);
    background: var(--vca-blue);
    box-shadow: 0 0 0 3px var(--vca-blue-tint-2);
}

.vca-step-line1 { font-size: 13.5px; margin: 0; }
.vca-step-t { font-weight: 700; }
.vca-step.current .vca-step-t { color: var(--vca-blue); }
.vca-step-d { color: var(--vca-ink-soft); font-weight: 400; }

.vca-step-note { font-size: 12.5px; color: var(--vca-ink-soft); margin: 1px 0 0; }
.vca-step.current .vca-step-note { color: var(--vca-green); font-weight: 600; }

/* --- POD thumbnails: hover hiện huy hiệu kính lúp tròn, ảnh phóng nhẹ --- */
.vca-pod-images { display: flex; gap: 8px; flex-wrap: wrap; }

.vca-pod-image-item {
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    width: 84px;
    height: 84px;
    border: 1px solid var(--vca-line);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.vca-pod-image-item:hover {
    border-color: var(--vca-blue);
    box-shadow: 0 4px 14px rgba(15, 50, 96, 0.22);
}

/* !important: theme WordPress hay có rule img { height:auto!important } đè
   mất height:100% khiến ảnh dọc bị cắt đáy, ảnh ngang hụt khoảng trắng */
.vca-pod-image-item img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
    transition: transform 0.25s ease;
}

.vca-pod-image-item:hover img { transform: scale(1.08); }

.vca-pod-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 50, 96, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.vca-pod-image-item:hover .vca-pod-overlay { background: rgba(15, 50, 96, 0.42); }

.vca-pod-zoom-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #1e5ba8;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.vca-pod-image-item:hover .vca-pod-zoom-badge { opacity: 1; transform: scale(1); }

.vca-pod-zoom-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.vca-pod-sub { font-size: 12px; color: var(--vca-ink-soft); margin: 6px 0 0; }

/* ============ 6. Lightbox - frosted glass toàn màn hình ============ */
.vca-lightbox {
    display: none;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    /* Khóa cứng theo viewport - kể cả khi theme can thiệp, lightbox vẫn
       đúng bằng màn hình, không tràn, không bị đẩy toolbar xuống dưới */
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999;
    flex-direction: column; /* JS bật bằng display:flex */
    box-sizing: border-box;
}

@supports (height: 100dvh) {
    .vca-lightbox { height: 100dvh !important; max-height: 100dvh !important; }
}

.vca-lightbox *,
.vca-lightbox *::before,
.vca-lightbox *::after { box-sizing: border-box; }

.vca-lightbox-topbar,
.vca-lightbox-bottombar { flex: 0 0 auto; }

.vca-lightbox-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(8, 12, 18, 0.93);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.vca-lb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #e8edf4;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.vca-lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vca-lb-btn:hover { background: rgba(255, 255, 255, 0.20); transform: translateY(-1px); }
.vca-lb-btn:active { transform: translateY(0); }

.vca-lightbox-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
    flex-shrink: 0;
}

.vca-lightbox-counter {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #e8edf4;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
}

.vca-lb-close:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

.vca-lightbox-content {
    position: relative;
    z-index: 1;
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden;
    /* KHÔNG đặt touch-action:none - chụm 2 ngón để trình duyệt zoom tự nhiên
       (hành vi bản 3.2.7); lỗi nhảy ảnh khi chụm đã xử lý trong JS bằng cách
       hủy swipe khi cử chỉ có >= 2 ngón */
}

.vca-image-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    min-width: 0;
    padding: 8px 76px;
    overflow: hidden;
    position: relative;
}

#vca-lightbox-image {
    /* !important: theme WordPress hay có rule img { height:auto!important;
       max-height:none } phá giới hạn kích thước - ảnh dọc khổ lớn sẽ tràn
       khung và đẩy toolbar xuống dưới màn hình. Chốt thêm mức trần theo
       viewport (trừ chỗ cho topbar + toolbar + thumbnail) để dù chuỗi chiều
       cao flex có bị phá thì ảnh vẫn không bao giờ vượt quá màn hình. */
    max-width: 100% !important;
    max-height: calc(100vh - 230px) !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.15s ease-out, opacity 0.3s ease;
    user-select: none;
    will-change: transform;
}

@supports (height: 100dvh) {
    #vca-lightbox-image { max-height: calc(100dvh - 230px) !important; }
}

.vca-lightbox-loading { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vca-spinner { width: 44px; height: 44px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: #5d96d8; border-radius: 50%; animation: vca-spin 0.8s linear infinite; }

.vca-lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #e8edf4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.vca-lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vca-lb-nav:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-50%) scale(1.06); }
.vca-prev-btn { left: 16px; }
.vca-next-btn { right: 16px; }

.vca-lightbox-bottombar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    flex-shrink: 0;
}

.vca-lb-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(18, 24, 32, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.vca-zoom-display {
    color: #9ec3ee;
    font-weight: 700;
    font-size: 13px;
    min-width: 50px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.vca-lb-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.12); margin: 0 5px; }

/* !important cho màu chữ: link trong theme WordPress thường đè màu <a>,
   khiến chữ "Tải xuống" không còn màu trắng */
.vca-lb-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 10px;
    background: #1e5ba8;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.vca-lb-download svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vca-lb-download span { color: #fff !important; }
.vca-lb-download:hover,
.vca-lb-download:focus,
.vca-lb-download:visited { background: #2a6fc4; transform: translateY(-1px); color: #fff !important; text-decoration: none !important; }

.vca-thumbnails {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.vca-thumb {
    width: 54px;
    height: 54px;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
    opacity: 0.5;
}

.vca-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.vca-thumb.active { border-color: #5d96d8; opacity: 1; box-shadow: 0 0 14px rgba(93, 150, 216, 0.45); }
.vca-thumb img { width: 100% !important; height: 100% !important; max-height: 100% !important; object-fit: cover; display: block; margin: 0 !important; }

/* ============ 7. Responsive / A11y / Print ============ */
@media only screen and (max-width: 760px) {
    .vca-tracking-container { padding: 10px 8px 18px; }
    .vca-form-body { padding: 12px 14px 14px; }
    .vca-form-row { flex-direction: column; align-items: stretch; }
    /* PHẢI trả flex về none: .vca-input-track khai `flex: 1` (= flex: 1 1 0%) cho
       layout hàng ngang. Khi hàng đổi sang column, trục chính thành DỌC nên
       flex-basis:0% đè mất `height: 44px` — ô nhập tụt còn 19px, gần như không
       bấm trúng. Kèm theo: font 16px vì Safari iOS tự phóng to trang khi focus
       vào input có font dưới 16px. */
    .vca-input-track { flex: none; height: 48px; font-size: 16px; }
    .vca-track-btn { width: 100%; height: 48px; }

    .vca-result-head { padding: 8px 14px; }
    .vca-info-grid { grid-template-columns: 1fr; gap: 6px; padding: 10px 14px; }
    .vca-info-col + .vca-info-col { border-left: none; padding-left: 0; border-top: 1px solid var(--vca-line); padding-top: 6px; }
    .vca-detail { grid-template-columns: 1fr; padding: 12px 14px; }
    .vca-pod-image-item { width: 76px; height: 76px; }

    .vca-lightbox-topbar { padding: 10px 12px; }
    .vca-lightbox-counter { font-size: 12.5px; padding: 6px 12px; }
    .vca-lb-btn { width: 34px; height: 34px; border-radius: 9px; }
    .vca-lb-btn svg { width: 16px; height: 16px; }
    .vca-lb-nav { width: 40px; height: 40px; }
    .vca-lb-nav svg { width: 19px; height: 19px; }
    .vca-prev-btn { left: 8px; }
    .vca-next-btn { right: 8px; }
    .vca-image-wrapper { padding: 6px 54px; }
    .vca-zoom-display { font-size: 12px; min-width: 42px; }
    .vca-lb-download { height: 34px; padding: 0 14px; font-size: 12.5px; }
    .vca-thumb { width: 46px; height: 46px; }
    .vca-lightbox-bottombar { padding: 8px 10px 12px; gap: 8px; }
}

@media (max-width: 480px) {
    .vca-result-title { font-size: 14px; }
    /* Giữ nhãn trái - giá trị phải trên cùng 1 hàng cho gọn gàng,
       giá trị dài tự xuống dòng nhưng vẫn canh phải */
    .vca-field { font-size: 13px; align-items: baseline; }
    .vca-field-v { overflow-wrap: break-word; min-width: 0; }
    .vca-pod-image-item { width: calc(25% - 6px); height: auto; aspect-ratio: 1; }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .vca-input-track { border-color: #000; }
    .vca-track-btn { background: #000; border: 2px solid #000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .vca-input-track,
    .vca-track-btn,
    .vca-pod-image-item img,
    .vca-pod-zoom-badge,
    .vca-lb-btn,
    .vca-lb-nav,
    .vca-thumb { transition: none; }
    .vca-track-btn.loading::after { animation: none; }
}

/* Focus visible */
.vca-input-track:focus-visible,
.vca-track-btn:focus-visible,
.vca-lb-btn:focus-visible,
.vca-lb-nav:focus-visible {
    outline: 2px solid #5d96d8;
    outline-offset: 2px;
}

@media print {
    .vca-lightbox { display: none !important; }
    .vca-info-box, .vca-detail { box-shadow: none; border: 1px solid #ccc; }
}