/*
 * Saigon Bảo Tín – Global Responsive Override
 * Mục đích: Chuẩn hoá layout mobile + tablet toàn site
 * Breakpoints:
 *   Tablet  : max-width: 1024px
 *   Mobile  : max-width: 768px
 *   Mobile S: max-width: 480px
 */

/* =========================================================
   BASE – Fix overflow & box-model toàn cục
   ========================================================= */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

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

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   SITE-WRAPPER – Offset cho fixed header
   ========================================================= */
.site-wrapper {
    padding-top: 100px;
}

@media (min-width: 1025px) {
    .site-wrapper {
        padding-top: 128px;
    }
}

/* =========================================================
   CONTAINER
   ========================================================= */
.max-container,
.home-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .max-container,
    .home-container {
        padding: 0 12px;
    }
}

/* =========================================================
   TYPOGRAPHY – Đảm bảo không bị tràn text
   ========================================================= */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* =========================================================
   HEADER – Fixed header mobile
   ========================================================= */
.site-header {
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .site-header {
        height: 100px;
    }
    .site-wrapper {
        padding-top: 100px;
    }
    /* Mobile menu panel */
    .main-nav {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        height: calc(100vh - 100px);
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    /* Shrunk sticky header */
    .site-header.is-sticky + .site-wrapper,
    body.sticky-active .site-wrapper {
        padding-top: 80px;
    }
}

/* =========================================================
   HOME PAGE
   ========================================================= */

/* Hero */
@media (max-width: 1024px) {
    .hero-section {
        height: 600px;
    }
    .hero-title {
        font-size: var(--fs-h1);
    }
    .hero-content {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: 520px;
    }
    .hero-overlay {
        background: linear-gradient(to bottom, rgba(15,23,42,0.75) 0%, rgba(15,23,42,0.55) 100%);
        align-items: flex-end;
        padding-bottom: 3rem;
    }
    .hero-content {
        max-width: 100%;
        text-align: left;
    }
    .hero-btns {
        flex-direction: column;
        width: 100%;
    }
    .hero-btns .btn {
        width: 100%;
        justify-content: center;
        font-size: 1rem;
        padding: 0.85rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 520px; /* Restoring fixed-ish height for mobile slider feel */
    }
}

/* About intro section */
@media (max-width: 1024px) {
    .h-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .h-intro-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
    .h-intro-images .img-large {
        width: 100%;
        height: 260px;
    }
    .h-intro-images .img-small {
        display: none;
    }
}

/* Services grid */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* Network section */
@media (max-width: 1024px) {
    .network-grid,
    .info-section {
        grid-template-columns: 1fr;
    }
    .network-route {
        height: 350px;
    }
    .hubs-column,
    .form-column {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .route-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .route-line {
        display: none;
    }
    .form-row {
        grid-template-columns: 1fr;
    }
    .network-route {
        height: 280px;
    }
}

/* Blog grid */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-thumb {
        height: 200px;
    }
    .blog-card-content {
        padding: 1.25rem;
    }
}

/* Highlights */
@media (max-width: 1024px) {
    .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 640px) {
    .highlights-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
@media (max-width: 1024px) {
    .a-hero {
        height: 350px;
    }
    .a-about-grid,
    .a-mission-grid,
    .a-hub-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }
    .a-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .a-hero {
        height: 280px;
    }
    .a-about-images .img-main {
        width: 100%;
        height: 260px;
    }
    .a-about-images .img-accent {
        display: none;
    }
    .a-team-grid {
        grid-template-columns: 1fr;
    }
    .a-value-list {
        grid-template-columns: 1fr;
    }
    .a-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .a-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SERVICE PAGE
   ========================================================= */
@media (max-width: 1024px) {
    .s-hero {
        height: 350px;
    }
    .s-main-grid {
        grid-template-columns: 1fr;
    }
    .s-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .s-form-grid {
        grid-template-columns: 1fr;
    }
    .s-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .s-hero {
        height: 280px;
    }
    .s-cards-grid {
        grid-template-columns: 1fr;
    }
    .s-steps {
        grid-template-columns: 1fr;
    }
    .s-form-box {
        padding: 30px 20px;
        border-radius: 24px;
    }
    .s-card {
        padding: 1.5rem;
    }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .st-banner {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .st-banner {
        height: 240px;
    }
    .map-container {
        height: 300px;
        border-radius: 20px;
    }
    .branch-grid {
        grid-template-columns: 1fr;
    }
    .branch-card {
        flex-direction: column;
        padding: 1.25rem;
    }
    .contact-form-box {
        padding: 1.5rem;
        border-radius: 20px;
    }
    .contact-header {
        margin-bottom: 2rem;
    }
}

/* =========================================================
   NEWS / ARCHIVE PAGE
   ========================================================= */
@media (max-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .news-newsletter {
        padding: 2.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .news-newsletter {
        padding: 2rem 1.25rem;
        flex-direction: column;
        text-align: center;
    }
    .news-newsletter .newsletter-form {
        max-width: 100%;
    }
    .category-filters {
        gap: 8px;
    }
    .cat-filter-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* =========================================================
   SINGLE / BLOG POST PAGE
   ========================================================= */
@media (max-width: 1024px) {
    .single-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .single-content-area,
    .sidebar {
        grid-column: auto !important;
    }
}

@media (max-width: 768px) {
    .entry-meta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
    .featured-image-container {
        border-radius: 16px;
        aspect-ratio: 4/3;
    }
    .entry-content {
        font-size: 1rem;
        line-height: 1.75;
    }
    .entry-content blockquote {
        padding: 1.25rem;
        font-size: 1.1rem;
    }
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        display: block;
        margin: 1rem auto;
        max-width: 100%;
    }
    .widget {
        padding: 1.25rem;
    }
    .sidebar {
        margin-top: 2rem;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: auto;
    }
    .footer-socials {
        justify-content: flex-start;
    }
    .footer-bottom {
        text-align: center;
        padding: 1.25rem 0;
    }
}

/* =========================================================
   FLOATING BUTTONS – Mobile adjustments
   ========================================================= */
@media (max-width: 768px) {
    .floating-contact {
        bottom: 90px;
        right: 1rem;
        gap: 10px;
    }
    .f-btn {
        width: 44px;
        height: 44px;
    }
    .scroll-to-top {
        bottom: 1.5rem;
        right: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* =========================================================
   UTILITIES – Helpers cho responsive
   ========================================================= */
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* Section padding nhỏ hơn mobile */
@media (max-width: 768px) {
    section,
    .section-padding {
        padding-top: var(--section-pad-y);
        padding-bottom: var(--section-pad-y);
    }
}

/* =========================================================
   PREMIUM MOBILE OVERHAUL (All Screens <= 768px)
   ========================================================= */
@media (max-width: 768px) {
    /* Side Gaps Reduction */
    .max-container, .home-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Typography Refinement */
    :root {
        --fs-h1: 1.75rem;
        --fs-h2: 1.4rem;
        --fs-h3: 1.15rem;
        --section-pad-y: 40px;
    }

    h1, h2, h3 { line-height: 1.25 !important; margin-bottom: 0.75rem !important; }
    p { line-height: 1.6 !important; margin-bottom: 1rem !important; }

    /* Hero Sections - Softened to allow better slider feel */
    .hero-section {
        height: 520px !important;
        min-height: auto !important;
        padding: 0 !important; /* Let overlay handle spacing */
        display: block !important;
    }

    .a-hero, .s-hero, .st-banner {
        height: auto !important;
        min-height: 280px !important;
        padding: 60px 0 30px !important;
        display: flex;
        align-items: center;
    }

    .hero-overlay {
        padding-top: 100px; /* Offset for header */
        align-items: center !important;
        background: linear-gradient(to bottom, rgba(15,23,42,0.85) 0%, rgba(15,23,42,0.4) 100%) !important;
    }

    .hero-title { font-size: 1.85rem !important; }
    .hero-description { font-size: 0.95rem !important; }

    /* Floating Buttons - Modernized */
    .floating-contact {
        bottom: 80px !important;
        right: 12px !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .f-btn {
        width: 48px !important;
        height: 48px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    }

    .scroll-to-top {
        bottom: 20px !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
        background: rgba(255,255,255,0.9) !important;
        color: var(--primary) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }

    /* Header & Menu */
    .site-header { height: 70px !important; }
    .site-logo img { height: 35px !important; }
    .main-nav { top: 70px !important; height: calc(100vh - 70px) !important; padding: 20px 15px 100px !important; }
    .nav-list li a { font-size: 1.2rem !important; padding: 15px 0 !important; }
    .sub-menu li a { font-size: 0.95rem !important; padding: 10px 15px !important; }

    /* Buttons - Refined for small screens */
    .btn { 
        padding: 10px 20px !important; 
        font-size: 0.9rem !important; 
        border-radius: 10px !important; 
        width: 100% !important; 
        text-align: center;
        min-height: 48px;
    }
    .hero-btns { gap: 10px !important; }
    .btn-track { width: 100% !important; }

    /* Forms */
    input, textarea, select { font-size: 16px !important; border-radius: 10px !important; padding: 12px 15px !important; }
    .ff-btn-submit { width: 100% !important; border-radius: 10px !important; }

    /* Footer Fixes */
    .footer-contact-item { white-space: normal !important; overflow-wrap: anywhere !important; }
    .footer-grid { gap: 1.5rem !important; }
    .footer-bottom { padding: 20px 0 !important; }

    /* News/Archive Fixes */
    .news-hero { margin: 20px 0 !important; }
    .category-filters { margin-bottom: 20px !important; padding-bottom: 10px !important; }
    .st-pagination { padding: 30px 0 !important; }
}

/* Extra Small Devices (iPhone SE, etc) */
@media (max-width: 320px) {
    .hero-title { font-size: 1.35rem !important; }
    .hero-section { height: 480px !important; }
    .badge { font-size: 0.65rem !important; padding: 0.3rem 0.8rem !important; margin-bottom: 1rem !important; }
    .f-btn { width: 40px !important; height: 40px !important; }
    .site-logo img { height: 28px !important; }
}

/* =========================================================
   HOME HERO SLIDER – MOBILE STABILITY FIX
   ========================================================= */
@media (max-width: 768px) {
    /* Keep header offset consistent to avoid gray gap above hero */
    .site-wrapper {
        padding-top: 70px !important;
    }

    .site-header.is-sticky {
        height: 70px !important;
    }

    .main-nav {
        top: 70px !important;
        height: calc(100vh - 70px) !important;
    }

    /* Override generic section rule specifically for home hero slider */
    .hero-section {
        height: 520px !important;
        min-height: 520px !important;
        padding: 0 !important;
        display: block !important;
    }

    .hero-overlay {
        align-items: flex-end !important;
        padding: 0 0 72px !important;
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.74) 0%, rgba(15, 23, 42, 0.56) 100%) !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 2.6rem) !important;
        line-height: 1.12 !important;
    }

    .hero-description {
        font-size: 1.05rem !important;
        margin-bottom: 1.25rem !important;
    }

    .hero-btns {
        gap: 0.75rem !important;
    }

    .hero-btns .btn {
        width: 100% !important;
        padding: 0.85rem 1rem !important;
        font-size: 1rem !important;
    }

    .hero-dots {
        bottom: 28px !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        height: 470px !important;
        min-height: 470px !important;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }
}