/* Reserve space สำหรับ carousel — ลด CLS */
#carouselHeaderSlide {
    aspect-ratio: 1920 / 720;
    overflow: hidden;
}
#carouselHeaderSlide .carousel-inner {
    aspect-ratio: 1920 / 720;
}
@media (max-width: 768px) {
    #carouselHeaderSlide,
    #carouselHeaderSlide .carousel-inner {
        aspect-ratio: 768 / 500;
    }
}

.btn-gold {
    background-color: #ECC19B;
    color: white;
}

.btn-silver {
    background-color: #EBEBEB;
    color: black;
}

.btn-bronze {
    background-color: #D19571;
    color: white;
}

.btn-gold:hover {
    background-color: #ECC19B;
    opacity: .8;
    color: white;
}

.btn-silver:hover {
    background-color: #EBEBEB;
    opacity: .8;
    color: black;
}

.btn-bronze:hover {
    background-color: #D19571;
    opacity: .8;
    color: white;
}
/* @media (max-width:992px) {
    .container-main {
        top: 105px !important;
    }
} */

@media (max-width:992px) {
    .frontend-header-link,
    #frontend-header .frontend-header-search {
        display: none !important;
    }
    #frontend-header .frontend-header-menu {
        display: flex !important;
    }
}
@media (max-width:820px) {

    .frontend-header-link,
    #frontend-header .frontend-header-search {
        display: none !important;
    }
    #frontend-header .frontend-header-menu {
        display: flex !important;
    }
}

@media (max-width:769px) {

    .frontend-header-link,
    #frontend-header .frontend-header-search {
        display: none !important;
    }

    #frontend-header .frontend-header-menu {
        display: flex !important;
    }
/* 
    .frontend-header-image-silde {
        height: 250px !important;
    } */

    .carousel-caption {
        bottom: 20% !important;
    }

    .template-text {
        font-size: 10px;
    }

    .btn-product-category {
        margin: auto !important;
    }
}

@media (max-width:431px) {

    .template-text {
        font-size: 8px;
    }

    .btn-product-category {
        margin: auto !important;
    }


    /* .frontend-header-image-silde {
        max-height: 250px !important;
        min-height: 250px !important;
    } */

    .home-category {
        max-height: 350px !important;
        min-height: 350px !important;
    }

    .img-knowledge {
        height: 500px;
        object-fit: cover;
        object-position: left;
    }

    .box-knowledge {
        display: none !important;
        background-color: #617685 !important;
    }

    .data-knowledge {
        top: -1000px !important;
    }

    .title-knowledge {
        display: flex !important;
    }

    .container-content {
        /* top: -900px !important; */
    }

    .container-main {
        /* margin-bottom: -900px !important; */
    }

    .kt_app_footer_first {
        margin-top: 550px !important;
    }
}

/* ============================================================
 * Product Detail — Responsive
 * ============================================================ */
.pd-section-title { font-size: 28px; }
.pd-hl-img { width: 75%; max-width: 100%; margin: 10px auto; display: block; }
.pd-hl-title { font-size: 26px; }
.pd-hl-desc { font-size: 16px; line-height: 1.7; }
.pd-spec-tabs { font-size: 16px; overflow-x: auto; flex-wrap: nowrap; }
.pd-spec-tab-item { min-width: 120px; white-space: nowrap; }
.pd-spec-table { font-size: 14px; }

@media (max-width: 991px) {
    .pd-section-title { font-size: 24px; }
    .pd-hl-title { font-size: 22px; }
    .pd-hl-desc { font-size: 15px; }
    .pd-hl-img { width: 85%; }
}

@media (max-width: 768px) {
    .pd-section-title { font-size: 20px; }
    .pd-hl-title { font-size: 18px; }
    .pd-hl-desc { font-size: 14px; }
    .pd-hl-img { width: 70%; margin: 8px auto; }
    .pd-spec-tabs { font-size: 14px; }
    .pd-spec-tab-item { min-width: 100px; }
    .pd-spec-table { font-size: 12px; }
    .pd-spec-table td { padding: 6px 8px !important; }
}

@media (max-width: 991px) {
    #carouselHeaderSlide { margin-bottom: 0 !important; }
    #carouselHeaderSlide .carousel-indicators { bottom: 5px !important; margin-bottom: 0 !important; }
    #carouselHeaderSlide .carousel-item img { width: 100%; height: auto !important; }
    .menu-product-web { top: 0 !important; font-size: 12px; }
    .menu-product-web .h-50px { height: auto !important; }
    .menu-product-web .grid-gap-20 { gap: 8px !important; }
    .menu-product-web .fs-5 { font-size: 11px !important; }
    .menu-product-mobile { font-size: 13px; }
    .menu-product-mobile .p-5 { padding: 8px !important; }
    .menu-product-mobile .mb-3 { margin-bottom: 4px !important; }
    .menu-product-mobile .fs-5 { font-size: 12px !important; }
    .container-breadcrumb { padding: 8px 16px !important; }
    .container-breadcrumb .fs-3 { font-size: 12px !important; }
    #carouselHeaderSlide { max-height: 220px; overflow: hidden; }
    #carouselHeaderSlide .carousel-item img { width: 100%; height: 220px !important; object-fit: cover !important; }
    #carouselHeaderSlide .carousel-indicators { bottom: 5px !important; margin-bottom: 0 !important; }
    #infoDetail .product-image-main { height: auto !important; max-height: 250px; }
    #infoDetail .col-12.col-md-6 .tns { width: 90% !important; }
    #infoDetail .p-10 { padding: 16px !important; }
    .product-name { font-size: 20px !important; }
}

@media (max-width: 576px) {
    .pd-section-title { font-size: 18px; }
    .pd-hl-title { font-size: 16px; }
    .pd-hl-desc { font-size: 13px; }
    .pd-hl-img { width: 80%; }
    .pd-spec-tab-item { min-width: 80px; font-size: 12px; }
    .pd-spec-table { font-size: 11px; }
    #infoDetail .product-image-main { max-height: 200px; }
    .product-name { font-size: 18px !important; }
}