@layer base {
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }

    :root {
        --main: #D9C07E;
        --white: #fff;
        --grey: #D5DDE1;
        --black: #2D3641;
        --main__second: #9EACB9;
        --fontcolor: #454F58;
        --background: rgba(162, 191, 209, 0.445);
        --background__content: rgba(240, 240, 240, 0.5);
        --space: 10px;
        --counter:5;
    }

    html, body {
        font-family: 'Roboto', 'Noto Sans JP', sans-serif;
        max-width: 100vw;
    }

    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 1px grey;
        border-radius: 5px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--background);
        border-radius: 5px;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b30000;
    }

    @media screen and (max-width: 600px) {
        html {
            max-width: 600px;
        }

        :root {
            --space: 5px;
        }
    }
}

/* ═══ Phiếu xác nhận gửi hàng — chỉ hiện khi in ═══ */
.print-sheet { display: none; }
@media print {
  body * { visibility: hidden; }
  .print-sheet, .print-sheet * { visibility: visible; }
  .print-sheet { display: block !important; position: absolute; left: 0; top: 0; width: 100%; background: #fff; }
}

/* ═══ Trang nội dung từ DB (ContentPage) ═══ */
.content-page h3 { color: #fff; font-weight: 900; font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.content-page h3:first-child { margin-top: 0; }
.content-page p { margin: .5rem 0; }
.content-page ul, .content-page ol { margin: .5rem 0 .75rem 1.25rem; display: grid; gap: .35rem; }
.content-page ul { list-style: disc; }
.content-page ol { list-style: decimal; }
.content-page b, .content-page strong { color: #fff; }
.content-page a { color: #f4b400; text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════
   VẬN CHUYỂN XE JAPAN — Design upgrade (desktop + mobile)
   ═══════════════════════════════════════════════════════════════ */

/* ── Nút vàng thương hiệu: gradient + đổ bóng + nhún khi bấm ── */
.btn-gold {
    background: linear-gradient(135deg, #ffd452 0%, #f4b400 55%, #e6a800 100%);
    color: #003366;
    box-shadow: 0 6px 18px -6px rgba(244, 180, 0, .55);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-gold:hover { filter: brightness(1.06); box-shadow: 0 10px 24px -6px rgba(244, 180, 0, .65); transform: translateY(-1px); }
.btn-gold:active { transform: translateY(0) scale(.98); box-shadow: 0 4px 10px -4px rgba(244, 180, 0, .5); }

/* ── Card kính mờ dùng trên nền tối ── */
.card-glass {
    /* Nền azure sáng — kính đậm hơn chút để tách khối */
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .30);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card-glass:hover { border-color: rgba(244, 180, 0, .35); }

.card-lift { transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(0, 20, 60, .45); }

/* ── Hiệu ứng xuất hiện khi cuộn tới (IntersectionObserver gắn .is-visible) ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ── Hero: blob trôi + tuyến đường Nhật→Việt ── */
@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(18px, -14px) scale(1.06); }
}
.hero-blob { animation: floatBlob 9s ease-in-out infinite; }
.hero-blob-slow { animation: floatBlob 13s ease-in-out infinite reverse; }

@keyframes dashMove { to { stroke-dashoffset: -26; } }
.route-dash { stroke-dasharray: 5 8; animation: dashMove 1.6s linear infinite; }

@keyframes shipSail {
    0%   { offset-distance: 0%; }
    100% { offset-distance: 100%; }
}
.route-ship {
    offset-path: path('M 30 78 C 150 148, 330 148, 470 58');
    offset-rotate: 0deg;
    animation: shipSail 9s linear infinite;
}
.route-plane {
    offset-path: path('M 30 78 C 160 -18, 330 -18, 470 58');
    offset-rotate: auto;
    animation: shipSail 7s linear infinite;
}

/* ── Nhịp đập cho trạng thái đang vận chuyển / bước hiện tại ── */
@keyframes pingSoft {
    0% { box-shadow: 0 0 0 0 rgba(244, 180, 0, .55); }
    80%, 100% { box-shadow: 0 0 0 12px rgba(244, 180, 0, 0); }
}
.pulse-gold { animation: pingSoft 1.8s cubic-bezier(.4, 0, .6, 1) infinite; }

/* ── Thanh tiến độ form gửi hàng ── */
.progress-track { background: rgba(255, 255, 255, .25); }
.progress-fill {
    background: linear-gradient(90deg, #22c55e, #f4b400);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* ── Focus rõ ràng cho bàn phím (accessibility) ── */
.focus-gold:focus-visible {
    outline: 2px solid #f4b400;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ── Nút liên hệ nổi: chừa vùng an toàn iPhone ── */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── Số liệu tin cậy dưới hero ── */
.stat-chip {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
}

/* Tôn trọng người dùng tắt animation */
@media (prefers-reduced-motion: reduce) {
    .hero-blob, .hero-blob-slow, .route-dash, .route-ship, .route-plane, .pulse-gold { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .card-lift:hover, .btn-gold:hover { transform: none; }
}