/* ==================== RESPONSIVE ==================== */

/* ==================== COMBO 1 — AUTO TEXT ADJUST ==================== */
html {
    -webkit-text-size-adjust: none;  /* Tắt zoom tự động chữ trên mobile */
    text-size-adjust: none;
}

/* ==================== COMBO 2 — FLUID FONT SIZE ==================== */
.intro-hero-left h1 {
    font-size: clamp(2rem, 6vw, 3.2rem); /* To hơn, fluid */
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ≤ 360px — MOBILE SIÊU NHỎ */
@media (max-width: 360px) {
    .page-title {
        font-size: clamp(1.8rem, 5.5vw, 2.4rem);
        margin: 30px 0 20px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .nav ul li a,
    .footer-products ul li a {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .btn-primary {
        font-size: clamp(1rem, 2.8vw, 1.2rem);
        padding: 10px 20px;
    }

    h2 {
        font-size: clamp(1.6rem, 5vw, 2.2rem);
        margin-bottom: 20px;
    }

    h3 {
        font-size: clamp(1.3rem, 4vw, 1.8rem);
    }

    section {
        padding: 30px 0 !important;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .swiper-button-next,
    .swiper-button-prev {
        width: 36px !important;
        height: 36px !important;
    }
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 0.9rem !important;
    }

    .page-title {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }

    .legal-intro,
    .cert-item p,
    .transparency-card p {
        font-size: clamp(1.1rem, 3.2vw, 1.4rem);
    }

    .section-badge {
        font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    }

    .cert-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cert-img-wrapper {
        height: auto;
        max-height: 350px;
    }
    
    .nav ul {
        gap: 10px;
    }

    .featured-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    h2 {
        font-size: clamp(1.8rem, 5.5vw, 2.5rem);
        margin-bottom: 25px;
    }

    h3 {
        font-size: clamp(1.3rem, 4.5vw, 1.8rem);
    }

    p {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
        line-height: 1.6;
    }
}

/* ≤ 576px — MOBILE */
@media (max-width: 576px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 14px;
    }

    /* HEADER */
    .header {
        padding: 12px 0;
    }

    .header .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    .logo {
        font-size: clamp(1.6rem, 6vw, 2.2rem);
    }

    .nav ul {
        flex-direction: column;
        gap: 12px;
        margin-top: 5px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .nav ul li a,
    .footer-products ul li a {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
        padding: 8px 0;
    }

    /* PAGE TITLE */
    .page-title {
        font-size: clamp(2rem, 6.5vw, 2.8rem);
        text-align: center;
        margin: 30px 0 20px;
    }

    /* TEXT */
    .legal-intro,
    .intro-hero-left p {
        font-size: clamp(1.1rem, 3.5vw, 1.4rem);
        line-height: 1.6;
        text-align: left;
    }

    .intro-hero-left h1 {
        font-size: clamp(1.6rem, 6vw, 2.6rem);
        line-height: 1.3;
    }

    /* HERO */
    .intro-hero-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .intro-hero-right img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .btn-primary {
        margin-top: 20px;
        font-size: clamp(1.1rem, 3.5vw, 1.3rem);
        padding: 11px 22px;
    }

    /* GRID SECTIONS */
    .philosophy-grid,
    .cert-grid,
    .featured-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }

    .cert-item p {
        font-size: clamp(1rem, 3.2vw, 1.3rem);
    }

    .featured-products {
        padding: 40px 0;
    }

    .feature-desc {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    /* TRANSPARENCY */
    .transparency-card {
        padding: 20px 15px;
        margin-top: 30px;
    }

    /* FOOTER */
    .footer-grid {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }

    .footer-logo {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }

    .contact-list li,
    .footer-products ul li {
        font-size: clamp(1rem, 3.2vw, 1.2rem);
    }

    .footer-heading {
        font-size: clamp(1.2rem, 3.8vw, 1.5rem);
    }

    /* SPACING */
    section {
        padding: 40px 0 !important;
    }

    .intro {
        padding: 40px 0;
    }
}

/* ≤ 768px — TABLET NHỎ */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.1rem, 3.2vw, 1.4rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: clamp(2rem, 6vw, 2.8rem);
    }

    .hero p {
        font-size: clamp(1rem, 3.2vw, 1.3rem);
    }

    .page-title {
        font-size: clamp(2rem, 6vw, 2.8rem);
        margin: 30px 0 20px;
    }

    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin: 20px 0;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }

    .commitment-grid,
    .philosophy-grid,
    .cert-detailed-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .cert-feature-grid {
        gap: 25px;
    }

    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .cert-img-wrapper {
        height: clamp(250px, 50vw, 320px);
    }
    
    .footer-products-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .footer-product-item img {
        height: 70px;
    }

    .intro {
        padding: 50px 0;
    }

    .intro-grid {
        gap: 40px;
    }

    .intro-text h2 {
        font-size: clamp(1.8rem, 5.5vw, 2.4rem);
        margin-bottom: 20px;
    }

    .intro-text p {
        font-size: clamp(1rem, 3.2vw, 1.3rem);
    }
}

/* 577px – 992px — TABLET */
@media (min-width: 577px) and (max-width: 992px) {
    .container {
        width: 90%;
        padding: 0 18px;
    }

    .logo {
        font-size: clamp(1.9rem, 5.5vw, 2.6rem);
    }

    .nav ul {
        gap: 20px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.2rem, 3.2vw, 1.4rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .header {
        padding: 13px 0;
    }

    .page-title {
        font-size: clamp(2.4rem, 6.5vw, 3.2rem);
        margin: 40px 0 25px;
    }

    .intro-hero-content {
        flex-direction: row;
        gap: 30px;
        align-items: center;
    }

    .intro-hero-left h1 {
        font-size: clamp(2.2rem, 6vw, 3rem);
    }

    .intro-hero-left p {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
        line-height: 1.7;
    }

    .carousel-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .featured-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .philosophy-grid,
    .cert-grid,
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .intro {
        padding: 70px 0;
    }

    .intro-grid {
        gap: 60px;
    }

    .intro-text h2 {
        font-size: clamp(2.2rem, 5.5vw, 2.8rem);
    }

    .featured-products {
        padding: 50px 0;
    }

    section {
        padding: 50px 0;
    }
}

/* 993px – 1200px — LAPTOP NHỎ */
@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        width: 85%;
        padding: 0 20px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.3rem, 3.2vw, 1.5rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .carousel-grid-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .philosophy-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .featured-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .page-title {
        font-size: clamp(2.6rem, 6vw, 3.2rem);
    }

    section {
        padding: 60px 0;
    }
}

/* > 1200px — DESKTOP LỚN */
@media (min-width: 1201px) {
    .container {
        width: 90%;
        max-width: 1400px;
        padding: 0 20px;
    }
    
    .nav ul {
        gap: 35px;
    }

    .nav a {
        text-decoration: none;
        color: var(--text-color);
        font-weight: 600;
        transition: color 0.3s;
        font-size: clamp(1.3rem, 3.2vw, 1.5rem);
    }

    .nav a:hover,
    .nav a.active {
        color: var(--primary-color);
    }

    .page-title {
        font-size: clamp(2.8rem, 6vw, 3.6rem);
    }

    section {
        padding: 80px 0;
    }

    .featured-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .carousel-grid-container {
        grid-template-columns: repeat(5, 1fr);
        gap: 25px;
    }
}

/* ≤ 992px — INTRO GRID */
@media (max-width: 992px) {
    .intro-grid {
        flex-direction: column;
    }
}

/* FOOTER DEFAULT */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: start;
}