/* ═══════════════════════════════════════
   Tour PRO – Main CSS
   Tailwind CDN handles utilities;
   this file holds custom component CSS.
═══════════════════════════════════════ */

/* ══ 1. TYPOGRAPHY SCALE ══════════════
   H1 hero:          2.5rem → 3rem → 3.4rem   (40/48/54px)
   H2 section major: 1.875rem → 2.25rem        (30/36px)
   H2 section minor: 1.5rem → 1.875rem         (24/30px)
   H3 card title:    1.125rem (18px)
   H4 sub-card:      1rem     (16px)
   Body lead:        1.125rem (18px)
   Body normal:      1rem     (16px)
   Body small:       0.875rem (14px)  ← buttons, nav, meta
   Caption/label:    0.75rem  (12px)  ← uppercase eyebrow
═══════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.font-display {
    font-family: "Be Vietnam Pro", system-ui, sans-serif;
    letter-spacing: -.015em; /* dấu chồng hai tầng (ắ, ề, ộ) cần lh/ls nới hơn bản gốc en */
    line-height: 1.2; /* tối thiểu 1.15 theo yêu cầu dấu tiếng Việt */
    color: #032D60;
}

/* ── Body base ── */
body { font-family: "Inter", system-ui, sans-serif; font-size: 1rem; line-height: 1.65; }

/* ── Card titles (blog, case-study, giá trị...) ── */
.card-title {
    font-family: "Be Vietnam Pro", system-ui, sans-serif;
    font-size: 1.25rem;  /* 20px — card-headline */
    font-weight: 700;
    line-height: 1.3;
    color: #032D60;
}

/* ── Card body text ── */
.card-body {
    font-size: 0.875rem; /* body-3 */
    line-height: 1.5;
    color: #747474;
}

/* ── Section description ── */
.section-desc {
    font-size: 1rem;   /* body-2 */
    line-height: 1.5;
    color: #747474;
}

/* ── Gradient text ── */
.text-gradient {
    background: linear-gradient(90deg, #0176D3, #9050E9, #2E844A, #0176D3);
    background-size: 250% auto;
    animation: shimmer-text 5s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-light {
    background: linear-gradient(135deg, #A8D3F9 0%, #D2B8F2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@keyframes shimmer-text {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── Navigation ── */
.glass-nav {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #f1f5f9;
    transition: box-shadow .2s ease;
}
.glass-nav.nav-scrolled {
    box-shadow: 0 2px 20px rgba(3,45,96,.08);
}
#mobile-menu summary::-webkit-details-marker { display: none; }
.nav-link.active {
    color: #0176D3 !important;
    font-weight: 700;
}

/* ── Hero ── */
.hero-mesh {
    background: linear-gradient(-45deg, #EAF5FE, #F5EFFC, #EAF4EE, #FFF4EA, #EAF5FE);
    background-size: 400% 400%;
    animation: mesh-shift 14s ease infinite;
}
@keyframes mesh-shift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.tech-grid {
    background-image:
        linear-gradient(rgba(3,45,96,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3,45,96,.045) 1px, transparent 1px);
    background-size: 48px 48px;
}
.dot-grid {
    background-image: radial-gradient(circle, #CFCFCF 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ── Floating tags ── */
@keyframes float-a { 0%,100%{transform:translateY(0) rotate(-1deg);opacity:.75} 50%{transform:translateY(-10px) rotate(1deg);opacity:1} }
@keyframes float-b { 0%,100%{transform:translateY(0) rotate(1deg);opacity:.65} 50%{transform:translateY(-14px) rotate(-1deg);opacity:.9} }
@keyframes float-c { 0%,100%{transform:translateY(-4px) rotate(0deg);opacity:.7} 50%{transform:translateY(6px) rotate(2deg);opacity:.95} }
.float-a { animation: float-a 5s ease-in-out infinite; }
.float-b { animation: float-b 7s ease-in-out infinite 1s; }
.float-c { animation: float-c 6s ease-in-out infinite 2s; }

/* ── CTA pulse glow ── */
@keyframes green-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(1,118,211,.45); }
    60%     { box-shadow: 0 0 0 10px rgba(1,118,211,0); }
}
.btn-pulse { animation: green-pulse 2.6s ease-out infinite; }

/* ── Ping badge ── */
@keyframes ping-slow {
    0%,100% { transform:scale(1); opacity:.6; }
    50%     { transform:scale(1.5); opacity:0; }
}
.animate-ping-slow { animation: ping-slow 2s ease-in-out infinite; }

/* ── Stat card tilt ── */
.stat-tilt {
    transition: transform .15s ease, box-shadow .15s ease;
    will-change: transform;
    transform-style: preserve-3d;
}

/* ── AI card glow ── */
@keyframes ai-glow {
    0%,100% { box-shadow: 0 0 20px rgba(144,80,233,.25), 0 8px 28px rgba(3,45,96,.3); }
    50%     { box-shadow: 0 0 40px rgba(144,80,233,.5),  0 8px 40px rgba(3,45,96,.35); }
}
.feat-ai { animation: ai-glow 3.5s ease-in-out infinite; }

/* ── Card elevation (card 16px, no border — shadow only) ── */
.card-elevated {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card-elevated:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

/* ── Feature cards ── */
.feat-card {
    background: #FFFFFF;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: background .22s, box-shadow .22s, transform .22s;
    min-height: 260px;
    display: flex;
    flex-direction: column;
}
.feat-card:hover            { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.feat-blue:hover            { background: #EAF5FE; }
.feat-orange:hover          { background: #FFF4EA; }
.feat-pink:hover            { background: #F5EFFC; }
.feat-green:hover           { background: #EAF4EE; }
.feat-amber:hover           { background: #FFF4EA; }
.feat-ai-card               { background: #032D60; }
.feat-ai-card:hover         { background: #023460; box-shadow: 0 8px 24px rgba(144,80,233,.3); }
.feat-card[data-reveal]     { transform: translateY(28px) scale(.98); }
.feat-card[data-reveal].visible { transform: translateY(0) scale(1); }

/* ── Scroll reveal ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .65s cubic-bezier(.2,.8,.3,1), transform .65s cubic-bezier(.2,.8,.3,1);
}
[data-reveal].visible { opacity: 1; transform: translateY(0); }
[data-reveal-delay="100"] { transition-delay: .1s; }
[data-reveal-delay="200"] { transition-delay: .2s; }
[data-reveal-delay="300"] { transition-delay: .3s; }
[data-reveal-delay="400"] { transition-delay: .4s; }

/* ── Marquee ── */
@keyframes marquee         { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
@keyframes marquee-reverse { from{transform:translateX(-50%)} to{transform:translateX(0)} }
.animate-marquee         { animation: marquee 60s linear infinite; width: max-content; display: flex; }
.animate-marquee-reverse { animation: marquee-reverse 60s linear infinite; width: max-content; display: flex; }
.animate-marquee-fast    { animation-duration: 18s; }
.animate-marquee:hover,
.animate-marquee-reverse:hover { animation-play-state: paused; }

/* ── Sticky CTA ── */
#sticky-cta {
    position: fixed; bottom: 28px; right: 24px; z-index: 40;
    opacity: 0; transform: translateY(14px) scale(.96);
    transition: opacity .35s cubic-bezier(.2,.8,.3,1), transform .35s cubic-bezier(.2,.8,.3,1);
    pointer-events: none;
}
#sticky-cta.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ── CTA banner (gradient hero spec) ── */
.cta-banner {
    background: linear-gradient(30deg, #2138CA 24%, #021D5B 72%);
}

/* ── Canvas particles ── */
#hero-particles { opacity: .65; mix-blend-mode: multiply; }

/* ── Case study card ── */
.cs-card {
    background: #FFFFFF;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: transform .22s ease, box-shadow .22s ease;
}
.cs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cs-card:hover .cs-thumb { transform: scale(1.04); }
.cs-thumb { transition: transform .5s ease; }

/* ── Case study meta table ── */
.cs-meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; font-size: .8rem; }
.cs-meta-key { color: #747474; font-weight: 600; white-space: nowrap; }
.cs-meta-val { color: #181818; text-align: right; }

/* ── Hover card ── */
.hover-card { background: #FFFFFF; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: transform .22s ease, box-shadow .22s ease; }
.hover-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* ── Article / Blog body ── */
.article-body p  { color: #4D4D4D; font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; text-align: justify; }
.article-body h2 { font-family: "Be Vietnam Pro",Roboto,sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1.3; color: #032D60; margin: 1.75rem 0 .65rem; }
.article-body h3 { font-family: "Be Vietnam Pro",Roboto,sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: #032D60; margin: 1.25rem 0 .5rem; }

/* H2/H3 đầu tiên trong box không cần top margin */
.article-body > h2:first-child,
.article-body > h3:first-child { margin-top: 0; }

/* Đoạn mở đầu bài viết in đậm */
.article-body > p:first-of-type { font-weight: 700; color: #181818; }

.article-body ul { margin-bottom: .875rem; }
.article-body ul li { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: .35rem; color: #4D4D4D; font-size: .9375rem; line-height: 1.6; }
.article-body ul li::before { content: "\2022"; color: #0176D3; font-weight: 700; flex-shrink: 0; margin-top: .15rem; }
.article-body blockquote { border-left: 3px solid #0176D3; padding: .65rem 1.1rem; background: #EAF5FE; border-radius: 0 8px 8px 0; margin: 1.25rem 0; color: #032D60; font-style: italic; font-size: 1rem; line-height: 1.6; }
.article-body strong { color: #181818; font-weight: 700; }

/* Ảnh minh hoạ căn giữa, mô tả in nghiêng */
.article-body figure.wp-block-image { text-align: center; margin: 1.5rem 0; }
.article-body figure.wp-block-image img { margin-left: auto; margin-right: auto; border-radius: 12px; }
.article-body figure.wp-block-image figcaption { font-style: italic; color: #6B7280; font-size: .8125rem; margin-top: .5rem; }

/* ── Comparison table ── */
.cmp-yes  { color: #2E844A; font-weight: 600; }
.cmp-no   { color: #EA001E; }
.cmp-part { color: #FE9339; }
.cmp-tourpro { background: #EAF5FE; }
.cmp-tourpro th { background: #0176D3; color: #fff; }

/* ── Scrollbar hide ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Responsive ── */
@media (max-width: 400px) { h1 { font-size: 2rem !important; } }
@media (max-width: 640px) { .hero-float-tags { display: none; } }
section { scroll-margin-top: 68px; }

/* ── WordPress content ── */
.entry-content img { max-width: 100%; height: auto; border-radius: 12px; }
.wp-post-image { width: 100%; height: auto; object-fit: cover; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft   { float: left; margin-right: 1.5rem; }
.alignright  { float: right; margin-left: 1.5rem; }

/* ════════════════════════════
   LIGHTBOX (case study gallery)
════════════════════════════ */
#tp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#tp-lightbox.tp-lb-hidden { display: none; }

.tp-lb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.tp-lb-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 92vh;
}

.tp-lb-image {
    max-width: 90vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    display: block;
}

/* Buttons */
.tp-lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tp-lb-btn:hover { background: rgba(255,255,255,.25); transform: scale(1.08); }

.tp-lb-close-btn {
    top: -16px;
    right: -16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 16px;
}

.tp-lb-prev-btn,
.tp-lb-next-btn {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
}
.tp-lb-prev-btn { left: -60px; }
.tp-lb-next-btn { right: -60px; }
.tp-lb-prev-btn:hover { transform: translateY(-50%) scale(1.08); }
.tp-lb-next-btn:hover { transform: translateY(-50%) scale(1.08); }

/* Mobile: prev/next inside */
@media (max-width: 640px) {
    .tp-lb-prev-btn { left: 8px; }
    .tp-lb-next-btn { right: 8px; }
    .tp-lb-image { border-radius: 8px; }
}

/* Counter */
.tp-lb-counter {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    font-family: Inter, sans-serif;
    white-space: nowrap;
}