/* =============================================
   VARIABLES & RESET
   ============================================= */
:root {
    --red: #d11212;
    --dark: #111111;
    --white: #ffffff;
    --text: #333333;
    --gray: #666666;
    --bg: #f5f6f8;
    --shadow: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.1);
    --radius: 10px;
    --font: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--white);
    line-height: 1.5;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 80px);
}

.page-bg {
    background: var(--bg);
    padding-bottom: 10px;
}

/* =============================================
   SECTION TITLES
   ============================================= */
.section-title {
    padding-top: 20px;
    margin-bottom: 15px;
}
.section-title h2 {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 800;
    text-transform: uppercase;
}
.red-line-center {
    width: 40px;
    height: 3px;
    background: var(--red);
    margin: 8px auto 15px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-primary {
    background: var(--red);
    color: var(--white);
    border: 2px solid var(--red);
}
.btn-primary:hover { background: #a80e0e; border-color: #a80e0e; }
.btn-outline {
    background: transparent;
    color: var(--white);
    border: 2px solid #555;
}
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; text-transform: uppercase; }

.btn-view-all {
    display: inline-block;
    padding: 12px 30px;
    background: var(--white);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-view-all:hover { background: #f0f0f0; border-color: #aaa; }

.view-all-container { text-align: center; margin-top: 18px; }

/* =============================================
   HEADER
   ============================================= */
.header {
    background: var(--dark);
    color: var(--white);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo { display: flex; align-items: center; }
.logo-small { font-size: 0.5rem; letter-spacing: 1px; color: #999; }
.logo-large { font-size: 1.5rem; font-weight: 800; letter-spacing: 1px; }

.nav-menu ul { list-style: none; display: flex; gap: 20px; }
.nav-menu a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
}
.nav-menu a:hover { color: var(--red); }

.header-actions { display: flex; align-items: center; gap: 15px; }
.phone { color: var(--white); text-decoration: none; font-weight: 700; font-size: 1rem; }
.phone i { margin-right: 5px; }

/* =============================================
   HERO
   ============================================= */
.hero {
    background-size: cover;
    background-position: center;
    color: var(--white);
    height: 900px;
    position: relative;
    display: block;
    text-align: left;
}
.hero-content{
    position: absolute;
    left: 120px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 760px !important;
    margin: 0 !important;
    text-align: left !important;
}
.red-line { width: 50px; height: 4px; background: var(--red); margin-bottom: 20px; }
.hero h1 { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; text-align: left; }
.hero .subtitle { font-size: 1.2rem; margin-bottom: 40px; text-align: left; }

.features { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 40px; }
.feature-item { font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.feature-item i { font-size: 1.2rem; opacity: 0.9; }
.hero-buttons { display: flex; gap: 15px; justify-content: flex-start; }

/* =============================================
   PRODUCTS (top icon row)
   ============================================= */
.products { padding: 20px 0; background: var(--white); }
.product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; text-align: center; }
.product-card { transition: transform 0.3s; cursor: pointer; }
.product-card:hover { transform: translateY(-5px); }
.product-card img { width: 100%; max-width: 180px; height: auto; object-fit: contain; margin-bottom: 15px; }
.product-card h3 { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; }

/* =============================================
   STATS / COUNTER
   ============================================= */
.stats-section { padding: 0; }
.stats-container {
    background: var(--white);
    border-radius: var(--radius);
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 250px;
    padding: 0 40px;
    box-shadow: var(--shadow);
}
.stat-item { display: flex; align-items: center; gap: 18px; }
.stat-icon { font-size: 3rem; color: var(--red); }
.stat-text h3 { font-size: 2rem; font-weight: 800; }
.stat-text p { font-size: 0.8rem; font-weight: 600; color: var(--gray); line-height: 1.3; text-transform: uppercase; }

/* =============================================
   CARD BASE (shared by category & featured)
   ============================================= */
.category-card,
.featured-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 20px 12px 16px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.category-card:hover,
.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* =============================================
   CATEGORIES
   ============================================= */
.categories-section { padding: 10px 0 20px; }
.category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.category-card img { width: 100%; height: 220px; object-fit: contain; margin-bottom: 14px; }
.category-card h3 { font-size: 0.9rem; font-weight: 800; margin-bottom: 4px; }
.category-card p { font-size: 0.8rem; color: #777; margin-bottom: 10px; }
.view-link { font-size: 0.75rem; font-weight: 700; color: var(--text); text-decoration: none; transition: color 0.3s; }
.view-link:hover { color: var(--red); }

/* =============================================
   FEATURED PRODUCTS
   ============================================= */
.featured-products-section { padding: 10px 0 20px; }
.product-tabs { margin-bottom: 20px; }
.product-tabs ul { list-style: none; display: flex; justify-content: center; gap: 30px; border-bottom: 1px solid #ddd; }
.product-tabs li { font-weight: 700; font-size: 0.9rem; color: #555; padding: 10px 0; cursor: pointer; position: relative; text-transform: uppercase; }
.product-tabs li.active { color: var(--red); }
.product-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%; height: 2px;
    background: var(--red);
}
.featured-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
}

.featured-card{
    min-width:0;
}

.featured-card img{
    width:100%;
    height:170px;
    object-fit:contain;
    margin-bottom:12px;
}

.featured-card h4{
    font-size:0.9rem;
    font-weight:800;
    margin-bottom:6px;
    word-break:normal;
}

.featured-card p{
    font-size:0.82rem;
    color:var(--gray);
    margin-bottom:12px;
    min-height:38px;
    flex-grow:1;
}
.quick-view { font-size: 0.8rem; font-weight: 600; color: var(--text); text-decoration: none; transition: color 0.3s; }
.quick-view:hover { color: var(--red); }

/* =============================================
   WHY ALLY
   ============================================= */
.why-choose-section { padding: 20px 0 25px; }
.why-choose-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.why-card { background: var(--white); border-radius: var(--radius); padding: 30px 18px; text-align: center; box-shadow: var(--shadow); }
.why-icon { font-size: 2.8rem; color: var(--red); margin-bottom: 18px; }
.why-text h4 { font-size: 0.9rem; font-weight: 800; margin-bottom: 10px; text-transform: uppercase; }
.why-text p { font-size: 0.82rem; color: var(--gray); line-height: 1.5; }

/* =============================================
   PRODUCTION PROCESS
   ============================================= */
.production-process-section {
    padding: 34px 0 42px;
    background: #ffffff;
}

.process-heading,
.clients-heading {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.process-heading p,
.clients-heading p {
    margin: 10px auto 0;
    color: var(--gray);
    font-size: 0.96rem;
    line-height: 1.65;
}

.production-process-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.production-process-grid::before {
    content: '';
    position: absolute;
    top: 48px;
    left: 7%;
    right: 7%;
    height: 2px;
    background: linear-gradient(90deg, rgba(209,18,18,.15), rgba(209,18,18,.75), rgba(209,18,18,.15));
    z-index: 0;
}

.process-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 22px 14px 20px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.process-step:hover {
    transform: translateY(-5px);
    border-color: rgba(209,18,18,.35);
    box-shadow: var(--shadow-hover);
}

.process-number {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #d5d5d5;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.process-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff2f2;
    color: var(--red);
    font-size: 1.35rem;
    border: 1px solid #f4caca;
}

.process-step h3 {
    margin: 0 0 9px;
    color: #222;
    font-size: 0.82rem;
    line-height: 1.35;
    font-weight: 800;
}

.process-step p {
    margin: 0;
    color: var(--gray);
    font-size: 0.76rem;
    line-height: 1.55;
}

.process-cta {
    margin-top: 24px;
    text-align: center;
}

/* =============================================
   FEATURED CLIENTS
   ============================================= */
.featured-clients-section {
    padding: 34px 0 44px;
    background: var(--bg);
}

.featured-client-logos {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.featured-client-logo {
    min-width: 0;
    height: 104px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.featured-client-logo:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.featured-client-logo img {
    display: block;
    max-width: 100%;
    max-height: 58px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .78;
    transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.featured-client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.03);
}

.client-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.client-trust-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    color: #444;
    font-size: .82rem;
    font-weight: 700;
    text-align: center;
}

.client-trust-item i {
    color: var(--red);
    font-size: 1rem;
}

@media (max-width: 1200px) {
    .production-process-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .production-process-grid::before {
        display: none;
    }

    .featured-client-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .production-process-section,
    .featured-clients-section {
        padding: 28px 0 34px;
    }

    .process-heading p,
    .clients-heading p {
        padding: 0 4px;
        font-size: .9rem;
    }

    .production-process-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 20px;
    }

    .process-step {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon text";
        column-gap: 14px;
        padding: 16px 42px 16px 14px;
        text-align: left;
    }

    .process-number {
        top: 12px;
        right: 12px;
    }

    .process-icon {
        grid-area: icon;
        width: 48px;
        height: 48px;
        margin: 0;
        align-self: center;
    }

    .process-step h3 {
        grid-area: title;
        align-self: end;
        margin: 0 0 4px;
        font-size: .88rem;
    }

    .process-step p {
        grid-area: text;
        font-size: .8rem;
    }

    .process-cta .btn {
        width: 100%;
        max-width: 360px;
    }

    .featured-client-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 20px;
    }

    .featured-client-logo {
        height: 88px;
        padding: 16px;
    }

    .featured-client-logo img {
        max-height: 48px;
    }

    .client-trust-strip {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .client-trust-item {
        min-height: 62px;
        flex-direction: column;
        gap: 5px;
        padding: 10px 8px;
        font-size: .76rem;
    }
}

@media (max-width: 420px) {
    .client-trust-strip {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   TESTIMONIALS
   ============================================= */
.testimonials-section { padding: 20px 0 25px; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testimonial-card { background: var(--white); border-radius: var(--radius); padding: 30px 20px; box-shadow: var(--shadow); }
.quote-icon { font-size: 1.5rem; color: var(--red); margin-bottom: 15px; }
.feedback { font-size: 0.9rem; color: #444; line-height: 1.5; margin-bottom: 20px; font-style: italic; }
.customer-info { display: flex; align-items: center; gap: 15px; }
.customer-info img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.info-text h5 { font-size: 0.9rem; font-weight: 800; }
.info-text span { font-size: 0.75rem; color: #777; }

/* =============================================
   FOOTER CTA
   ============================================= */
.footer-cta { background: var(--red); color: var(--white); padding: 50px 0; }
.footer-cta-container { display: flex; justify-content: space-between; align-items: center; gap: 50px; }
.cta-info { flex: 1; }
.cta-info h2 { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 10px; text-transform: uppercase; }
.cta-info p { font-size: 1rem; margin-bottom: 30px; }
.cta-contacts { display: flex; gap: 30px; }
.contact-item { display: flex; align-items: center; gap: 10px; }
.contact-item i { font-size: 1.5rem; }
.contact-item strong { font-size: 1rem; font-weight: 800; }
.contact-item span { font-size: 0.75rem; opacity: 0.8; }

.cta-form { flex: 1; background: var(--white); border-radius: 8px; padding: 30px; color: var(--text); }
.form-row { display: flex; gap: 20px; margin-bottom: 15px; }
.form-group { flex: 1; margin-bottom: 15px; }
.form-row .form-group { margin-bottom: 0; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 5px; }
.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: var(--font);
    font-size: 0.9rem;
}
.btn-submit {
    width: 100%; padding: 15px;
    background: var(--dark); color: var(--white);
    border: none; border-radius: 4px;
    font-weight: 800; font-size: 1rem;
    cursor: pointer; text-transform: uppercase;
    transition: background 0.3s; margin-top: 10px;
}
.btn-submit:hover { background: #333; }

/* =============================================
   RESPONSIVE — TABLET 1024px
   ============================================= */
@media (max-width: 1024px) {
    .nav-menu { display: none; }
    .product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .category-grid, .featured-grid { grid-template-columns: repeat(3, 1fr); }
    .category-card img { height: 180px; }
    .featured-card img { height: 160px; }
    .why-choose-grid { grid-template-columns: repeat(3, 1fr); }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cta-container { flex-direction: column; }
    .cta-contacts { flex-direction: column; gap: 15px; }
    .stats-container { height: auto; padding: 30px 20px; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .stat-item { flex: 1 1 140px; }
}

/* =============================================
   RESPONSIVE — MOBILE 768px
   ============================================= */
@media (max-width: 768px) {
    .header-actions { display: none; }
    .hero { height: 600px; }
    .hero h1 { font-size: 2rem; }
    .hero .subtitle { font-size: 1rem; }
    .features { grid-template-columns: 1fr; gap: 10px; }
    .hero-buttons { flex-direction: column; gap: 10px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    .category-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .category-card img { height: 150px; }
    .featured-card img { height: 140px; }
    .section-title h2 { font-size: 1.4rem; }
    .stats-container { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; height: auto; }
    .why-choose-grid { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; gap: 0; }
    .cta-info h2 { font-size: 1.4rem; }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE 480px
   ============================================= */
@media (max-width: 480px) {
    .hero { height: auto; min-height: 500px; padding: 50px 0; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .category-grid, .featured-grid { grid-template-columns: 1fr 1fr; }
    .why-choose-grid { grid-template-columns: 1fr; }
}

/* =============================================
   PRODUCT MODAL - CLEAN FINAL
   ============================================= */
body.pmodal-open{
    overflow:hidden !important;
}

.pmodal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.70);
    z-index:2147483646;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
}
.pmodal-overlay.show{
    opacity:1;
    pointer-events:auto;
}

.pmodal{
    position:fixed;
    top:50%;
    left:50%;
    width:min(1120px, calc(100vw - 32px));
    height:min(90vh, 880px);
    max-width:1120px;
    transform:translate(-50%,-50%) scale(.98);
    background:#fff;
    border-radius:14px;
    box-shadow:0 24px 70px rgba(0,0,0,.35);
    z-index:2147483647;
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:opacity .22s ease, transform .22s ease;
}
.pmodal.open{
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}

.pmodal-close{
    position:absolute;
    top:10px;
    right:12px;
    z-index:40;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#555;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 2px 12px rgba(0,0,0,.16);
}
.pmodal-close:hover{color:var(--red);}

.pmodal-body{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
    gap:26px;
    padding:20px 28px 14px;
    flex:0 0 auto;
    min-height:0;
}
.pmodal-gallery,
.pmodal-info{
    min-width:0;
}

.gallery-inner{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.gallery-thumbs{
    width:80px;
    max-height:410px;
    overflow-y:auto;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:0 0 80px;
}
.gallery-thumbs img{
    width:80px;
    height:80px;
    object-fit:contain;
    border:2px solid #e2e2e2;
    border-radius:8px;
    background:#f7f7f7;
    cursor:pointer;
    flex-shrink:0;
}
.gallery-thumbs img.active,
.gallery-thumbs img:hover{
    border-color:var(--red);
}
.gallery-main{
    position:relative;
    flex:1;
    min-width:0;
    height:410px;
    border:1px solid #e5e5e5;
    border-radius:10px;
    background:#fafafa;
    overflow:hidden;
}
.gallery-main img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.gallery-zoom{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    padding:6px 16px;
    border-radius:20px;
    background:rgba(0,0,0,.48);
    color:#fff;
    font-size:12px;
    white-space:nowrap;
}

.pmodal-info{
    max-height:410px;
    overflow-y:auto;
    padding-right:6px;
}
.pmodal-info h2{
    margin:0 42px 4px 0;
    font-size:23px;
    line-height:1.25;
    font-weight:800;
    text-transform:uppercase;
    color:#333;
}
.pm-model{
    margin:0 0 10px;
    font-size:14px;
    color:var(--gray);
}
.pm-model strong{
    color:var(--red);
    font-size:16px;
}
.pm-meta{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.pm-stars{
    color:#f5a623;
    font-size:15px;
}
.pm-stars span{
    color:var(--gray);
    font-size:12px;
    margin-left:5px;
}
.pm-origin{
    display:flex;
    align-items:center;
    gap:5px;
    padding:4px 12px;
    border-radius:20px;
    background:#e8f5e9;
    color:#1a6b2a;
    font-size:12px;
    font-weight:700;
}
.pm-origin img{width:16px;}

.pm-features{
    list-style:none;
    margin:0 0 10px;
    border-top:1px solid #eee;
}
.pm-features li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    border-bottom:1px solid #f1f1f1;
    color:#333;
    font-size:14px;
}
.pm-features li i{
    width:20px;
    text-align:center;
    color:#555;
    flex-shrink:0;
}
.pm-specs{
    width:100%;
    border-collapse:collapse;
    margin:0;
    font-size:13px;
    border-top:1px solid #eee;
}
.pm-specs tr{border-bottom:1px solid #eee;}
.pm-specs td{padding:8px 6px;}
.pm-specs td:first-child{
    width:48%;
    color:var(--gray);
}
.pm-specs td:last-child{font-weight:700;}

.pm-tabs{
    display:flex;
    flex-shrink:0;
    overflow-x:auto;
    padding:0 28px;
    background:#fff;
    border-top:2px solid #eee;
}
.pm-tabs::-webkit-scrollbar{height:0;}
.pm-tab{
    display:flex;
    align-items:center;
    gap:6px;
    padding:11px 18px;
    margin-bottom:-2px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#888;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
}
.pm-tab:hover,
.pm-tab.active{color:var(--red);}
.pm-tab.active{border-bottom-color:var(--red);}

.pm-tab-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:16px 28px 20px;
}
.pm-tab-panel{display:none;}
.pm-tab-panel.active{display:block;}
#tabDetail,
#tabUse{
    margin:0;
    color:#555;
    font-size:15px;
    line-height:1.7;
}
.tab-img-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
    gap:12px;
}
.tab-img-grid img{
    width:100%;
    height:130px;
    object-fit:contain;
    border:1px solid #eee;
    border-radius:8px;
    background:#fafafa;
}
.pm-specs-full{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.pm-specs-full tr{border-bottom:1px solid #eee;}
.pm-specs-full tr:nth-child(even){background:#fafafa;}
.pm-specs-full td{padding:10px 14px;}
.pm-specs-full td:first-child{
    width:38%;
    color:var(--gray);
}
.pm-specs-full td:last-child{font-weight:700;}
.pm-video-empty{
    text-align:center;
    padding:30px 0;
    color:#999;
}
.pm-video-empty i{
    display:block;
    margin-bottom:10px;
    font-size:46px;
}

.pm-cta-fixed{
    flex:0 0 auto;
    width:100%;
    margin:0;
    padding:12px 28px 16px;
    display:grid;
    grid-template-columns:1.15fr 1fr;
    gap:10px;
    background:#fff;
    border-top:1px solid #e5e5e5;
    box-shadow:0 -4px 14px rgba(0,0,0,.06);
}
.pm-btn-primary{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 14px;
    margin:0;
    border:0;
    border-radius:6px;
    background:var(--red);
    color:#fff;
    font-size:15px;
    font-weight:800;
    text-transform:uppercase;
    cursor:pointer;
    text-decoration:none;
}
.pm-btn-primary:hover{background:#a80e0e;}
.pm-cta-secondary{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}
.pm-btn-detail,
.pm-btn-call,
.pm-btn-catalogue{
    min-height:46px;
    padding:9px 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:6px;
    text-align:center;
    text-decoration:none;
    font-size:12px;
    line-height:1.2;
    font-weight:700;
}
.pm-btn-detail{
    color:var(--red);
    background:#fff;
    border:1px solid var(--red);
}
.pm-btn-detail:hover{
    color:#fff;
    background:var(--red);
}
.pm-btn-call{
    color:#137333;
    background:#edf8f0;
    border:1px solid #b9e2c3;
}
.pm-btn-call:hover{
    color:#fff;
    background:#137333;
}
.pm-btn-catalogue{
    color:#1a56db;
    background:#f0f4ff;
    border:1px solid #c3d4fb;
}
.pm-btn-catalogue:hover{
    color:#fff;
    background:#1a56db;
}

@media (max-width:768px){
    body.pmodal-open .mobile-menu-box,
    body.pmodal-open .header{
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .pmodal-overlay{
        z-index:2147483646 !important;
    }

    .pmodal{
        position:fixed !important;
        inset:0 !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;
        width:100vw !important;
        height:100dvh !important;
        max-width:none !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 0 150px !important;
        border-radius:0 !important;
        transform:none !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        display:block !important;
        z-index:2147483647 !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }
    .pmodal.open{
        transform:none !important;
    }

    .pmodal-close{
        position:fixed !important;
        top:10px !important;
        right:10px !important;
        z-index:2147483647 !important;
    }

    .pmodal-body{
        display:flex !important;
        flex-direction:column !important;
        gap:14px !important;
        width:100% !important;
        padding:58px 14px 12px !important;
        overflow:visible !important;
    }

    .pmodal-gallery,
    .pmodal-info{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        max-height:none !important;
        overflow:visible !important;
        padding-right:0 !important;
    }

    .gallery-inner{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        max-width:100% !important;
        gap:10px !important;
    }

    .gallery-main{
        order:1 !important;
        width:100% !important;
        max-width:100% !important;
        height:250px !important;
        flex:none !important;
    }
    .gallery-main img{
        width:100% !important;
        max-width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    .gallery-thumbs{
        order:2 !important;
        width:100% !important;
        max-width:100% !important;
        max-height:none !important;
        flex:0 0 auto !important;
        display:flex !important;
        flex-direction:row !important;
        gap:8px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding-bottom:2px !important;
    }
    .gallery-thumbs img{
        width:64px !important;
        height:64px !important;
        flex:0 0 64px !important;
    }

    .pmodal-info{
        padding:4px 0 0 !important;
    }
    .pmodal-info h2{
        margin:0 42px 4px 0 !important;
        font-size:20px !important;
        line-height:1.3 !important;
    }
    .pm-model{font-size:14px !important;}
    .pm-meta{
        gap:8px !important;
        align-items:flex-start !important;
    }
    .pm-origin{
        white-space:nowrap !important;
    }
    .pm-features li{
        padding:9px 0 !important;
        font-size:13px !important;
    }
    .pm-specs{
        width:100% !important;
        table-layout:fixed !important;
    }
    .pm-specs td{
        padding:9px 5px !important;
        font-size:13px !important;
        overflow-wrap:anywhere !important;
    }

    .pm-tabs{
        width:100% !important;
        padding:0 14px !important;
        overflow-x:auto !important;
    }
    .pm-tab{
        flex:0 0 auto !important;
        padding:10px 12px !important;
        font-size:12px !important;
    }

    .pm-tab-content{
        width:100% !important;
        max-height:none !important;
        overflow:visible !important;
        padding:14px !important;
    }
    .tab-img-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .tab-img-grid img{
        height:120px !important;
    }

    .pm-cta-fixed{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        z-index:2147483647 !important;
        width:100% !important;
        padding:9px 12px calc(10px + env(safe-area-inset-bottom)) !important;
        display:block !important;
        background:#fff !important;
        border-top:1px solid #ddd !important;
        box-shadow:0 -5px 18px rgba(0,0,0,.16) !important;
    }
    .pm-cta-fixed .pm-btn-primary{
        min-height:44px !important;
        margin:0 0 7px !important;
        font-size:14px !important;
    }
    .pm-cta-fixed .pm-cta-secondary{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:7px !important;
    }
    .pm-cta-fixed .pm-btn-catalogue{
        grid-column:1 / -1 !important;
    }
    .pm-btn-detail,
    .pm-btn-call,
    .pm-btn-catalogue{
        min-height:39px !important;
        font-size:12px !important;
    }
}

/* =========================
   LOGO
========================= */

.logo{
    display:flex;
    align-items:center;
}

.site-logo{
    height:55px;
    width:auto;
    display:block;
}

@media(max-width:768px){
    .site-logo{
        height:50px;
    }
}/* =========================
   HERO TITLE - CHỈNH TIÊU ĐỀ HERO
========================= */

/* =========================
   HERO - FINAL CLEAN
========================= */

.hero{
    position:relative !important;
    display:block !important;
    height:900px !important;
    text-align:left !important;
}

.hero-content{
    position:absolute !important;
    left:80px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    max-width:760px !important;
    margin:0 !important;
    text-align:left !important;
}

.hero-content h1,
.hero-title{
    font-size:clamp(42px, 4vw, 58px) !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    letter-spacing:-0.8px !important;
    max-width:760px !important;
    margin-bottom:22px !important;
    text-align:left !important;
}

.hero-content p,
.hero .subtitle{
    font-size:20px !important;
    line-height:1.55 !important;
    max-width:760px !important;
    text-align:left !important;
}

.hero-buttons{
    justify-content:flex-start !important;
}

/* Mobile Hero */
@media(max-width:768px){
    .hero{
        height:auto !important;
        min-height:auto !important;
        display:block !important;
        padding:0 !important;
        text-align:left !important;
    }

    .hero-content{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        transform:none !important;
        width:100% !important;
        max-width:100% !important;
        padding:28px 22px 34px !important;
        margin:0 !important;
        text-align:left !important;
        box-sizing:border-box !important;
    }

    .hero-content h1,
    .hero-title{
        font-size:30px !important;
        line-height:1.15 !important;
        max-width:100% !important;
        text-align:left !important;
        margin-bottom:18px !important;
    }

    .hero-content p,
    .hero .subtitle{
        font-size:16px !important;
        line-height:1.5 !important;
        max-width:100% !important;
        text-align:left !important;
        margin-bottom:22px !important;
    }

    .features{
        grid-template-columns:1fr !important;
        gap:10px !important;
        margin-bottom:24px !important;
    }

    .hero-buttons{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        width:100% !important;
    }

    .hero-buttons .btn{
        width:100% !important;
        text-align:center !important;
    }
}
/* =========================
   FIX HERO TITLE 2 DÒNG
========================= */

.hero-title,
.hero-content h1{
    max-width: 1050px !important;
    font-size: clamp(34px, 3.8vw, 52px) !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px;
}

.hero-title span{
    display: block;
}

/* =====================================================
   HERO TITLE - DESKTOP + MOBILE
===================================================== */

/* DESKTOP */
@media (min-width: 1024px){

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

    .hero-title,
    .hero-content h1{
        max-width: 900px !important;
        font-size: clamp(34px, 3.8vw, 52px) !important;
        line-height: 1.12 !important;
        font-weight: 800 !important;
        letter-spacing: -0.8px;
    }

    .hero-title span{
        display: block;
    }

    .hero-line-nowrap{
        white-space: nowrap !important;
    }
}


/* MOBILE */
@media (max-width: 768px){

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

    .hero-title,
    .hero-content h1{
        font-size: 32px !important;
        line-height: 1.12 !important;
        max-width: 100% !important;
    }

    .hero-title span{
        display: block;
    }

    .hero-line-nowrap{
        white-space: normal !important;
    }
}
}
font-size: clamp(32px, 3.5vw, 48px) !important;
/* =========================
   FIX HERO MOBILE
========================= */

@media(max-width: 768px){

    .hero-content{
        max-width: 100% !important;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-content h1,
    .hero-title{
        font-size: 34px !important;
        line-height: 1.18 !important;
        max-width: 100% !important;
        letter-spacing: -0.4px !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .hero-content h1 span,
    .hero-title span{
        display: block !important;
        white-space: normal !important;
    }

    .hero-content p{
        font-size: 16px !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    .hero-actions{
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hero-actions .btn{
        width: 100%;
        text-align: center;
    }
}

@media(max-width: 420px){
  .category-subtitle{
    max-width:820px;
    margin:10px auto 0;
    color:#555;
    font-size:15px;
    line-height:1.65;
    font-style:italic;
    text-align:center;
}

@media(max-width:768px){
    .category-subtitle{
        padding:0 14px;
        font-size:14px;
    }
}  .hero-content h1,
    .hero-title{
        font-size: 31px !important;
    }
}
/* =========================
   MOBILE HEADER MENU
========================= */

@media(max-width: 768px){

    .header{
        background:#070707 !important;
        padding:12px 0 !important;
    }

    .header-container{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:12px !important;
    }

    .logo{
        width:100% !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    .site-logo{
        height:62px !important;
        width:auto !important;
    }

    .nav-menu{
        display:block !important;
        width:100% !important;
        overflow-x:auto !important;
        padding:0 12px !important;
    }

    .nav-menu ul{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        align-items:center !important;
        gap:10px !important;
        padding:0 0 8px 0 !important;
        margin:0 !important;
        list-style:none !important;
        white-space:nowrap !important;
    }

    .nav-menu li{
        flex:0 0
    }

    .nav-menu a{
        display:block !important;
        color:#fff !important;
        font-size:12px !important;
        font-weight:700 !important;
        text-decoration:none !important;
        padding:8px 10px !important;
        border:1px solid rgba(255,255,255,0.18) !important;
        border-radius:6px !important;
        background:rgba(255,255,255,0.04) !important;
    }

    .header-actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:10px !important;
        width:100% !important;
        padding:0 16px !important;
    }

    .header-actions .btn{
        width:100% !important;
        max-width:360px !important;
        text-align:center !important;
    }

    .header-actions .phone{
        color:#fff !important;
        font-size:16px !important;
    }
}
/* Link trong danh mục nhanh */
.product-card a{
    text-decoration:none !important;
    color:inherit !important;
    display:block;
}

.product-card h3{
    color:#222;
}
/* =========================
   QUICK PRODUCT GRID - 4 SẢN PHẨM
========================= */

.quick-product-grid{
    display:grid !important;
    grid-template-columns:repeat(5, 1fr) !important;
    gap:20px !important;
    padding:30px 0 !important;
}

.quick-product-grid .product-card{
    background:#fff !important;
    border-radius:12px !important;
    padding:18px !important;
    text-align:center !important;
    box-shadow:0 4px 18px rgba(0,0,0,0.06) !important;
}

.product-card-link{
    display:block !important;
    text-decoration:none !important;
    color:#222 !important;
}

.product-card-link img{
    width:100% !important;
    height:160px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto 14px !important;
}

.product-card-link h3{
    color:#222 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    text-align:center !important;
    margin:0 !important;
    text-decoration:none !important;
}

.product-card-link:hover h3{
    color:#d11212 !important;
}

@media(max-width:768px){
    .quick-product-grid{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:14px !important;
        padding:22px 12px !important;
    }

    .product-card-link img{
        height:110px !important;
    }

    .product-card-link h3{
        font-size:13px !important;
    }
}
/* =========================
   FIX DANH MỤC NHANH 4 SẢN PHẨM
========================= */

.quick-products{
    background:#fff !important;
    padding:8px 0 8px !important;
}

.quick-products .container{
    max-width:1480px !important;
    margin:0 auto !important;
    padding:0 32px !important;
}

.quick-product-grid{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:24px !important;
    max-width:1480px !important;
    margin:0 auto !important;
    align-items:stretch !important;
}

.quick-product-grid .product-card{
    height:190px !important;
    background:#fff !important;
    border:none !important;
    border-radius:14px !important;
    padding:14px 12px !important;
    text-align:center !important;
    box-shadow:0 6px 24px rgba(0,0,0,0.06) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.quick-product-grid .product-card-link{
    width:100% !important;
    height:100% !important;
    display:grid !important;
    grid-template-rows:110px 38px !important;
    align-items:center !important;
    justify-items:center !important;
    gap:10px !important;
    text-decoration:none !important;
    color:#222 !important;
}

.quick-product-grid .product-card img{
    width:100% !important;
    height:110px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto !important;
}

.quick-product-grid .product-card h3{
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#222 !important;
    font-size:15px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    text-align:center !important;
    text-transform:uppercase !important;
    margin:0 !important;
    text-decoration:none !important;
}
/* =========================
   FIX QUICK PRODUCT CARD - ĐỀU 4 CARD
========================= */

.quick-products{
    background:#fff !important;
    padding:42px 0 46px !important;
}

.quick-product-grid{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:26px !important;
    max-width:1180px !important;
    margin:0 auto !important;
}

.quick-product-grid .product-card{
    height:250px !important;
    background:#fff !important;
    border-radius:14px !important;
    padding:22px 16px !important;
    text-align:center !important;
    box-shadow:0 6px 24px rgba(0,0,0,0.06) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:all .25s ease !important;
}

.quick-product-grid .product-card:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 12px 30px rgba(0,0,0,0.1) !important;
}

.quick-product-grid .product-card-link{
    height:100% !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:space-between !important;
    text-decoration:none !important;
    color:#222 !important;
}

.quick-product-grid .product-card-link img{
    height:150px !important;
    width:100% !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto !important;
}

.quick-product-grid .product-card-link h3{
    min-height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#222 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
    text-align:center !important;
    text-transform:uppercase !important;
    margin:0 !important;
    text-decoration:none !important;
}

.quick-product-grid .product-card-link:hover h3{
    color:#d11212 !important;
}

/* Mobile */
@media(max-width:768px){
    .quick-products{
        padding:26px 0 !important;
    }

    .quick-product-grid{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:14px !important;
        padding:0 14px !important;
    }

    .quick-product-grid .product-card{
        height:210px !important;
        padding:16px 10px !important;
    }

    .quick-product-grid .product-card-link img{
        height:120px !important;
    }

    .quick-product-grid .product-card-link h3{
        font-size:13px !important;
        min-height:38px !important;
    }
}
/* =========================
   FIX ALIGN TEXT CARD DANH MỤC
========================= */

.quick-product-grid .product-card{
    height:250px !important;
}

.quick-product-grid .product-card-link{
    width:100% !important;
    height:100% !important;
    display:grid !important;
    grid-template-rows:150px 48px !important;
    align-items:center !important;
    justify-items:center !important;
    gap:14px !important;
    text-decoration:none !important;
    color:#222 !important;
}

.quick-product-grid .product-card img{
    width:100% !important;
    height:150px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto !important;
}

.quick-product-grid .product-card h3{
    height:48px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    margin:0 !important;
    padding:0 !important;
    font-size:15px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    color:#222 !important;
    text-decoration:none !important;
}

/* Mobile */
@media(max-width:768px){
    .quick-product-grid .product-card{
        height:210px !important;
    }

    .quick-product-grid .product-card-link{
        grid-template-rows:120px 46px !important;
        gap:10px !important;
    }

    .quick-product-grid .product-card img{
        height:120px !important;
    }

    .quick-product-grid .product-card h3{
        height:46px !important;
        font-size:13px !important;
    }
}
/* =========================
   SECTION WIDTH STANDARD
   Căn đều 2 bên cho các section chính
========================= */

.quick-products .container,
.stats-section .container{
    max-width:1220px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

/* =========================
   STATS SECTION - 4 CAM KẾT
========================= */

.stats-section{
    background:#f5f6f8 !important;
    padding:34px 0 44px !important;
}

.stats-container{
    background:#fff !important;
    border-radius:16px !important;
    padding:34px 28px !important;
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:24px !important;
    box-shadow:0 8px 28px rgba(0,0,0,0.05) !important;
}

.stat-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:16px !important;
    text-align:left !important;
}

.stat-item i{
    font-size:34px !important;
    color:#d11212 !important;
    width:42px !important;
    text-align:center !important;
}

.stat-item h3{
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 4px !important;
    font-weight:800 !important;
    color:#222 !important;
}

.stat-item p{
    font-size:14px !important;
    line-height:1.35 !important;
    margin:0 !important;
    color:#555 !important;
    text-transform:uppercase !important;
    font-weight:700 !important;
}

/* Mobile */
@media(max-width:768px){
    .quick-products .container,
    .stats-section .container{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .stats-section{
        padding:24px 0 30px !important;
    }

    .stats-container{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:16px !important;
        padding:22px 16px !important;
    }

    .stat-item{
        flex-direction:column !important;
        text-align:center !important;
        gap:10px !important;
    }

    .stat-item i{
        font-size:30px !important;
    }

    .stat-item h3{
        font-size:18px !important;
    }

    .stat-item p{
        font-size:12px !important;
    }
}
/* =========================
   FIX STATS SECTION - GỌN LẠI
========================= */

.stats-section{
    background:#f5f6f8 !important;
    padding:28px 0 34px !important;
    margin:0 !important;
}

.stats-section .container{
    max-width:1220px !important;
    margin:0 auto !important;
    padding:0 24px !important;
}

.stats-container{
    background:#fff !important;
    border-radius:16px !important;
    padding:26px 34px !important;
    min-height:auto !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:24px !important;
    align-items:center !important;
    box-shadow:0 8px 28px rgba(0,0,0,0.05) !important;
}

.stats-container .stat-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    text-align:left !important;
    min-height:70px !important;
}

.stats-container .stat-item i{
    font-size:30px !important;
    color:#d11212 !important;
    width:36px !important;
    min-width:36px !important;
    text-align:center !important;
}

.stats-container .stat-item h3{
    font-size:20px !important;
    line-height:1.2 !important;
    margin:0 0 3px !important;
    font-weight:800 !important;
    color:#222 !important;
}

.stats-container .stat-item p{
    font-size:14px !important;
    line-height:1.35 !important;
    margin:0 !important;
    color:#555 !important;
}

/* Mobile */
@media(max-width:768px){
    .stats-section{
        padding:22px 0 28px !important;
    }

    .stats-section .container{
        padding:0 14px !important;
    }

    .stats-container{
        grid-template-columns:repeat(2, 1fr) !important;
        gap:14px !important;
        padding:20px 14px !important;
    }

    .stats-container .stat-item{
        flex-direction:column !important;
        text-align:center !important;
        gap:8px !important;
        min-height:110px !important;
    }

    .stats-container .stat-item i{
        font-size:28px !important;
    }

    .stats-container .stat-item h3{
        font-size:17px !important;
    }

    .stats-container .stat-item p{
        font-size:13px !important;
    }
}
.product-tab{
    display:none;
}

.product-tab.active{
    display:grid;
}
.product-group{display:none;}
.product-group.active{display:grid;}
.featured-products-section .featured-grid{
    width:100% !important;
    max-width:1200px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:repeat(6, 1fr) !important;
    gap:16px !important;
}

.featured-products-section .featured-card{
    width:auto !important;
    min-width:0 !important;
    padding:18px 12px !important;
}

.featured-products-section .featured-card img{
    height:170px !important;
}
.featured-products-section .featured-card{
    flex:initial !important;
    width:auto !important;
}
.product-group{display:none;}
.product-group.active{display:grid;}

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

.featured-products-section .featured-card{
    width:100%;
}.featured-products-section .product-group{
    display:none !important;
}

.featured-products-section .product-group.active{
    display:grid !important;
}
html{
    scroll-behavior:smooth;
}
#danh-muc-san-pham,
#nang-luc-san-xuat,
#du-an,
#quote-form{
    scroll-margin-top:90px;
}
.product-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}

.detail-link,
.quote-link{
    font-size:0.82rem;
    font-weight:700;
    text-decoration:none;
}

.detail-link{
    color:#222;
}

.quote-link{
    color:var(--red);
}
.product-actions a{
    display:block;
    text-align:center;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.detail-link{
    color:#111 !important;
}

.quote-link{
    color:var(--red) !important;
}
@media screen and (max-width:768px){

    #featuredGrid{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:12px !important;
        width:100% !important;
    }

    #featuredGrid .featured-card{
        width:auto !important;
        min-width:0 !important;
        padding:14px 10px !important;
    }

    #featuredGrid .featured-card img{
        width:100% !important;
        height:130px !important;
        object-fit:contain !important;
    }

    #featuredGrid .featured-card h4{
        font-size:14px !important;
        line-height:1.35 !important;
        white-space:normal !important;
        word-break:normal !important;
    }

    #featuredGrid .featured-card p{
        font-size:13px !important;
        line-height:1.4 !important;
        min-height:54px !important;
    }

    #featuredGrid .product-actions a{
        font-size:12px !important;
        line-height:1.4 !important;
    }

    .product-tabs ul{
        display:flex !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        gap:20px !important;
        white-space:nowrap !important;
        padding-bottom:4px !important;
    }

    .product-tabs li{
        flex:0 0 auto !important;
        font-size:13px !important;
        padding:10px 2px !important;
    }
}
/* FIX MÀU TIÊU ĐỀ SECTION */
.section-title h2,
.featured-products-section .section-title h2,
.why-choose-section .section-title h2,
.production-process-section .section-title h2,
.featured-clients-section .section-title h2{
    color:#222 !important;
    opacity:1 !important;
}
/* FIX RIÊNG SẢN PHẨM NỔI BẬT TRÊN PC */
@media (min-width:1025px){

    .featured-products-section{
        width:100% !important;
        max-width:none !important;
    }

    .featured-products-section > .container{
        width:calc(100% - 48px) !important;
        max-width:1400px !important;
        margin:0 auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .featured-products-section #featuredGrid{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        display:grid !important;
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
        gap:16px !important;
    }

    .featured-products-section #featuredGrid .featured-card{
        width:auto !important;
        min-width:0 !important;
    }
}
/* ==================================================
   FIX POPUP MOBILE ANDROID - KHÔNG CHE NỘI DUNG
   ================================================== */
@media screen and (max-width:768px){

    /* Popup cuộn toàn bộ trên Android */
    .pmodal{
        position:fixed !important;
        inset:0 !important;
        width:100% !important;
        height:100vh !important;
        height:100dvh !important;
        max-width:none !important;
        max-height:none !important;
        border-radius:0 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch !important;
    }

    /* Không để phần body cuộn riêng */
    .pmodal-body{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:auto !important;
        max-height:none !important;
        overflow:visible !important;
        padding:12px 14px 20px !important;
    }

    .pmodal-left,
    .pmodal-info{
        width:100% !important;
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    /* CTA không còn fixed đè nội dung */
    .pm-cta-fixed{
        position:relative !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        width:100% !important;
        margin:0 !important;
        padding:12px 14px calc(18px + env(safe-area-inset-bottom)) !important;
        background:#fff !important;
        box-shadow:0 -3px 12px rgba(0,0,0,.08) !important;
        z-index:10 !important;
    }

    /* Nội dung tab hiển thị đầy đủ */
    .pm-tab-content,
    .pm-tab-panel{
        height:auto !important;
        max-height:none !important;
        overflow:visible !important;
    }

    /* Nút đóng giữ trên góc phải */
    .pmodal-close{
        position:fixed !important;
        top:calc(12px + env(safe-area-inset-top)) !important;
        right:12px !important;
        z-index:999999 !important;
    }
}
/* =========================
   PRODUCT IMAGE ZOOM
========================= */

.gallery-zoom{
    border:none;
    font-family:inherit;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

.image-zoom-overlay{
    position:fixed;
    inset:0;
    z-index:1000000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(0,0,0,0.88);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility .2s ease;
}

.image-zoom-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.image-zoom-overlay img{
    display:block;
    width:auto;
    height:auto;
    max-width:94vw;
    max-height:92vh;
    object-fit:contain;
    background:#fff;
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.image-zoom-close{
    position:fixed;
    top:16px;
    right:20px;
    z-index:2;

    width:44px;
    height:44px;
    border:none;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    color:#222;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,.25);
}

body.image-zoom-open{
    overflow:hidden !important;
}

@media(max-width:768px){
    .image-zoom-overlay{
        padding:12px;
    }

    .image-zoom-overlay img{
        max-width:100%;
        max-height:88dvh;
        border-radius:6px;
    }

    .image-zoom-close{
        top:10px;
        right:10px;
        width:40px;
        height:40px;
    }
}

/* ==================================================
   FORM BÁO GIÁ AJAX + MOBILE CONTACT BAR
   ================================================== */
.cta-info strong a{
    color:inherit;
    text-decoration:none;
}

.cta-form textarea{
    width:100%;
    min-height:110px;
    resize:vertical;
    padding:11px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    font-family:var(--font);
    font-size:.9rem;
    line-height:1.5;
}

.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus{
    outline:none;
    border-color:var(--red);
    box-shadow:0 0 0 3px rgba(209,18,18,.12);
}

.qt-form-note{
    margin:12px 0 0;
    color:#777;
    font-size:12px;
    line-height:1.5;
    text-align:center;
}

.qt-form-message{
    margin:0 0 16px;
    padding:13px 15px;
    border-radius:7px;
    font-size:14px;
    font-weight:700;
    line-height:1.5;
}

.qt-form-message.is-success{
    color:#17682b;
    background:#edf8f0;
    border:1px solid #b9e2c3;
}

.qt-form-message.is-error{
    color:#a10e0e;
    background:#fff1f1;
    border:1px solid #efbaba;
}

.qt-selected-product{
    margin:0 0 15px;
    padding:11px 12px;
    color:#174e2a;
    background:#edf8f0;
    border:1px solid #b9e2c3;
    border-radius:6px;
    font-size:13px;
    line-height:1.45;
}

.qt-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.btn-submit:disabled{
    cursor:not-allowed;
    opacity:.72;
}

.mobile-contact-bar{display:none;}

@media(max-width:768px){
    body{padding-bottom:calc(68px + env(safe-area-inset-bottom));}

    .mobile-contact-bar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:2147483000;
        display:grid;
        grid-template-columns:1.15fr 1fr .9fr;
        min-height:64px;
        padding-bottom:env(safe-area-inset-bottom);
        background:#fff;
        border-top:1px solid rgba(0,0,0,.08);
        box-shadow:0 -5px 22px rgba(0,0,0,.16);
    }

    .mobile-contact-item{
        min-width:0;
        min-height:64px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        padding:8px 4px;
        color:#fff;
        text-decoration:none;
    }

    .mobile-contact-item i{font-size:18px;flex:0 0 auto;}
    .mobile-contact-text{min-width:0;display:flex;flex-direction:column;line-height:1.15;}
    .mobile-contact-text strong{font-size:12px;font-weight:800;text-transform:uppercase;white-space:nowrap;}
    .mobile-contact-text small{margin-top:3px;font-size:10px;font-weight:600;white-space:nowrap;}
    .mobile-contact-call{background:#d11212;}
    .mobile-contact-zalo{background:#0068ff;}
    .mobile-contact-quote{background:#222;}

    body.pmodal-open .mobile-contact-bar{display:none !important;}
    body.pmodal-open{padding-bottom:0 !important;}
    .footer-cta{padding-bottom:38px;}
}

@media(max-width:380px){
    .mobile-contact-bar{grid-template-columns:1fr 1fr .82fr;}
    .mobile-contact-item{gap:4px;padding-left:2px;padding-right:2px;}
    .mobile-contact-item i{font-size:16px;}
    .mobile-contact-text strong{font-size:10px;}
    .mobile-contact-text small{font-size:8.5px;}
}

/* ==================================================
   FORM + MOBILE CONTACT BAR — FINAL
   ================================================== */
.qt-honeypot{
    display:none !important;
}

.cta-contacts a{
    color:inherit;
    text-decoration:none;
}

.cta-form textarea{
    display:block;
    width:100%;
    min-height:110px;
    padding:11px 12px;
    border:1px solid #ddd;
    border-radius:4px;
    resize:vertical;
    font-family:var(--font);
    font-size:.9rem;
    line-height:1.5;
}

.mobile-contact-bar{
    display:none !important;
}

@media screen and (max-width:768px){
    body{
        padding-bottom:calc(68px + env(safe-area-inset-bottom));
    }

    .mobile-contact-bar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:2147483000;
        display:grid !important;
        grid-template-columns:1.15fr 1fr .9fr;
        min-height:64px;
        padding-bottom:env(safe-area-inset-bottom);
        background:#fff;
        border-top:1px solid rgba(0,0,0,.1);
        box-shadow:0 -4px 18px rgba(0,0,0,.18);
    }

    .mobile-contact-item{
        min-width:0;
        min-height:64px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
        padding:7px 4px;
        color:#fff !important;
        text-decoration:none !important;
    }

    .mobile-contact-item i{
        flex-shrink:0;
        font-size:18px;
    }

    .mobile-contact-text{
        min-width:0;
        display:flex;
        flex-direction:column;
        line-height:1.15;
    }

    .mobile-contact-text strong{
        font-size:11px;
        font-weight:800;
        text-transform:uppercase;
        white-space:nowrap;
    }

    .mobile-contact-text small{
        margin-top:3px;
        font-size:9px;
        font-weight:600;
        white-space:nowrap;
    }

    .mobile-contact-call{background:#d11212;}
    .mobile-contact-zalo{background:#0068ff;}
    .mobile-contact-quote{background:#222;}

    body.pmodal-open .mobile-contact-bar{
        display:none !important;
    }

    body.pmodal-open{
        padding-bottom:0 !important;
    }
}

@media screen and (max-width:380px){
    .mobile-contact-bar{
        grid-template-columns:1fr 1fr .82fr;
    }
    .mobile-contact-item{
        gap:4px;
        padding-left:2px;
        padding-right:2px;
    }
    .mobile-contact-item i{font-size:16px;}
    .mobile-contact-text strong{font-size:10px;}
    .mobile-contact-text small{font-size:8.5px;}
}
/* CĂN GIỮA TIÊU ĐỀ PHẢN HỒI KHÁCH HÀNG */
.testimonials-section .section-title{
    text-align:center !important;
    max-width:900px !important;
    margin:0 auto 24px !important;
}

.testimonials-section .section-title h2{
    text-align:center !important;
    margin:0 !important;
}

.testimonials-section .section-title p{
    max-width:850px !important;
    margin:10px auto 0 !important;
    padding:0 15px !important;
    text-align:center !important;
    color:#555 !important;
    line-height:1.6 !important;
}
@media(max-width:768px){
    .testimonials-section .section-title{
        margin-bottom:20px !important;
    }

    .testimonials-section .section-title h2{
        font-size:1.45rem !important;
        line-height:1.3 !important;
    }

    .testimonials-section .section-title p{
        padding:0 8px !important;
        font-size:14px !important;
    }
}
#san-pham-noi-bat.highlight-section{
    animation: highlightSection 1.2s ease;
}

@keyframes highlightSection{
    0%{
        box-shadow: 0 0 0 0 rgba(220, 0, 0, 0);
    }

    40%{
        box-shadow: 0 0 0 4px rgba(220, 0, 0, 0.35);
    }

    100%{
        box-shadow: 0 0 0 0 rgba(220, 0, 0, 0);
    }
}