/* =====================================================
   QTN GLOBAL
   PRODUCT DETAIL LAYOUT
   VERSION CLEAN 3.0
===================================================== */


/* =====================================================
   01. PAGE LAYOUT
   KHUNG TỔNG:
   SIDEBAR + DETAIL CONTENT
===================================================== */


.detail-page{

    display:grid;

    grid-template-columns:240px minmax(0,1fr);

    gap:20px;

    width:100%;

    align-items:start;

    overflow:visible;

}



/* =====================================================
   02. SIDEBAR
   DANH MỤC SẢN PHẨM BÊN TRÁI
===================================================== */


.sidebar{

    background:#fff;

    border-radius:12px;

    padding:18px;

    box-shadow:
    0 2px 10px rgba(0,0,0,.08);

    position:sticky;

    top:130px;

    height:fit-content;

    align-self:start;

}



.sidebar h2{

    font-size:18px;

    color:#1565c0;

    margin:0 0 15px;

}



.sidebar ul{

    list-style:none;

    padding:0;

    margin:0;

}



.sidebar li{

    padding:10px 5px;

    border-bottom:1px solid #eee;

    cursor:pointer;

    transition:.2s;

}



.sidebar li:hover{

    color:#1565c0;

    padding-left:10px;

}



/* =====================================================
   03. DETAIL CONTENT
   HAI CỘT:
   LEFT  : HÌNH ẢNH
   RIGHT : THÔNG TIN
===================================================== */


.detail-content{

    display:grid;

    grid-template-columns:460px minmax(0,1fr);

    gap:25px;

    width:100%;

    min-width:0;

    align-items:start;

}



/* =====================================================
   04. LEFT COLUMN
   ẢNH + NÚT MUA
===================================================== */


.detail-left{

    background:#fff;

    border-radius:14px;

    padding:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    overflow:hidden;

}



/* =====================================================
   05. PRODUCT IMAGE
   ẢNH CHÍNH
===================================================== */


#mainImage{

    display:block;

    width:100%;

    max-width:420px;

    height:320px;

    object-fit:contain;

    background:#fff;

    border-radius:10px;

}



/* =====================================================
   06. THUMBNAIL
   ẢNH NHỎ
===================================================== */


#thumbList{

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:15px;

    width:100%;

    overflow:hidden;

}



#thumbList img{

    flex:none;

    width:75px;

    height:75px;

    object-fit:contain;

    border:1px solid #ddd;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

}



#thumbList img:hover,
#thumbList img.active{

    border-color:#1565c0;

}



/* =====================================================
   07. ACTION BUTTONS
   THÊM GIỎ HÀNG + MUA NGAY
===================================================== */


.detail-buttons{

    display:flex;

    gap:15px;

    width:100%;

    margin-top:20px;

}



.btn-addcart,
.btn-buynow{

    flex:1;

    padding:12px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

}



.btn-addcart{

    background:#1565c0;

    color:#fff;

}



.btn-buynow{

    background:#e53935;

    color:#fff;

}
/* =====================================================
   08. RIGHT COLUMN
   THÔNG TIN SẢN PHẨM
===================================================== */


.detail-right{

    background:#fff;

    border-radius:14px;

    padding:20px;

    min-width:0;

}



.detail-right h1{

    font-size:38px;

    line-height:1.25;

    color:#1565c0;

    margin:0 0 20px;

}



.detail-right p{

    line-height:1.7;

    margin-bottom:10px;

}



.detail-right h3{

    color:#1565c0;

    margin-top:25px;

    margin-bottom:15px;

}





/* =====================================================
   09. RELATED PRODUCTS
   SẢN PHẨM CÙNG LOẠI
   FULL CHIỀU RỘNG CỘT 2 + 3
===================================================== */

.related-products{

    grid-column:1 / 3;

    width:100%;

    overflow:hidden;

    margin-top:25px;

}


.related-products h3{

    text-align:center;

    color:#1565c0;

    margin-bottom:15px;

}





/* KHUNG CẮT SLIDER */


.related-slider-window{

    width:100%;

    overflow:hidden;

}





/* THANH PHIM */


.related-track{

    display:flex;

    gap:15px;

    width:max-content;

    transition:transform .8s linear;

    will-change:transform;

}





/* CARD SẢN PHẨM */


.related-card{

    flex:0 0 220px;

    background:#fff;

    border:1px solid #eee;

    border-radius:10px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

}



.related-card:hover{

    transform:translateY(-3px);

    box-shadow:

    0 4px 12px rgba(0,0,0,.12);

}



.related-card img{

    width:100%;

    height:130px;

    object-fit:contain;

    background:#fff;

}



.related-card p{

    text-align:center;

    padding:10px;

    font-size:14px;

    line-height:1.4;

    min-height:55px;

}





/* =====================================================
   10. PRODUCT TABS
   NẰM DƯỚI PHẦN SẢN PHẨM
===================================================== */


.product-tabs{

    grid-column:1 / 3;

    width:100%;

    margin-top:25px;

}





/* MENU TAB */


.tab-buttons{

    display:flex;

    justify-content:center;

    gap:10px;

    border-bottom:1px solid #ddd;

}



.tab-buttons button{

    padding:12px 25px;

    border:none;

    background:#eee;

    cursor:pointer;

    border-radius:8px 8px 0 0;

    font-weight:600;

}



.tab-buttons button.active{

    background:#1565c0;

    color:#fff;

}





/* NỘI DUNG TAB */


.tab-content{

    display:none;

    background:#fff;

    padding:20px;

    border-radius:0 0 10px 10px;

}



.tab-content.active{

    display:block;

}
/* =====================================================
   11. SPECIFICATION TAB
   BẢNG + TEXT CHUNG 1 KHỐI
===================================================== */


/* KHUNG CHUNG */

.spec-combine-box{

    width:100%;

    background:#fff;

}



/* =====================================================
   BẢNG THÔNG SỐ
===================================================== */


.spec-combine-box table{

    width:100%;

    border-collapse:collapse;

    font-size:15px;

}



.spec-combine-box th{

    background:#1565c0;

    color:#fff;

    padding:12px;

    border:1px solid #ddd;

    text-align:center;

}



.spec-combine-box td{

    padding:12px;

    border:1px solid #ddd;

    vertical-align:top;

}



/* =====================================================
   PHẦN TEXT THÔNG SỐ
   CHIA 2 CỘT TRONG CÙNG BẢNG
===================================================== */


#productTextSpecs{

    width:100%;

    margin-top:0;

}



.spec-text-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    width:100%;

}



.spec-text-grid p{

    margin:0;

    padding:10px 15px;

    border:1px solid #ddd;

    line-height:1.7;

    min-height:45px;

}



/* ẨN TIÊU ĐỀ CŨ */

#productTextSpecs h3{

    display:none;

}
/* =====================================================
   FIX SPEC COMBINE FULL WIDTH
   KHÔNG CẮT BẢNG
===================================================== */

/* =====================================================
   BẢNG THÔNG SỐ CHUNG
===================================================== */


.spec-combine-box{

    width:100%;

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

}



.spec-combine-box table{

    width:100%;

    border-collapse:collapse;

    font-size:15px;

}



.spec-combine-box th{

    background:#1565c0;

    color:white;

    padding:12px;

    border:1px solid #ddd;

    text-align:center;

}



.spec-combine-box td{

    padding:12px;

    border:1px solid #ddd;

    vertical-align:top;

    line-height:1.6;

}



/* BẢNG TEXT NỐI TIẾP */

.spec-full-table td{

    width:50%;

}



/* bỏ tiêu đề cũ */

#productTextSpecs h3{

    display:none;

}



/* MOBILE */

@media(max-width:768px){

    .spec-text-grid{

        grid-template-columns:1fr;

    }


}





/* =====================================================
   14. AMWAY BUTTON
===================================================== */


.amway-action-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:20px;

}



.contact-btn,
.amway-btn{

    padding:12px 22px;

    border-radius:8px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}



.contact-btn{

    background:#2c7be5;

}



.amway-btn{

    background:#009933;

}





/* =====================================================
   FOOTER FULL WIDTH FIX
   KHÔNG THUỘC DETAIL GRID
===================================================== */

footer.footer{

    width:100%;

    clear:both;

    position:relative;

    display:block;

    margin-left:0;

    left:auto;

}





/* =====================================================
   16. RESPONSIVE
   MOBILE / TABLET
===================================================== */


@media(max-width:1100px){


    .detail-page{

        grid-template-columns:1fr;

    }


    .sidebar{

        position:relative;

        top:0;

    }


    .detail-content{

        grid-template-columns:1fr;

    }


    .product-tabs{

        grid-column:1;

    }


    .related-products{

        grid-column:1;

    }


    .spec-layout{

        grid-template-columns:1fr;

    }


}



@media(max-width:600px){


    .detail-left,
    .detail-right{

        padding:15px;

    }



    #mainImage{

        height:260px;

    }



    .tab-buttons{

        flex-direction:column;

    }



    .tab-buttons button{

        width:100%;

    }



    .related-card{

        flex-basis:180px;

    }


}
/* =====================================================
   PRODUCT MANUAL PDF
===================================================== */


.manual-box{

    padding:20px;

    text-align:center;

}



.manual-box h3{

    margin-bottom:20px;

}



.btn-manual{

    display:inline-block;

    margin:10px;

    padding:12px 25px;

    background:#1565c0;

    color:white;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

}



.btn-manual:hover{

    opacity:.85;

}



.btn-manual.download{

    background:#2e7d32;

}