/*
Theme Name: TOTO Paint Premium Theme
Theme URI: https://haomkt.com/
Description: Theme WordPress custom cao cấp, chuẩn SEO và tối ưu Mobile dành cho thương hiệu sơn TOTO Paint.
Version: 1.0.0
Author: HaoMKT & AI Collaborator
Author URI: https://haomkt.com/
License: GNU General Public License v2 or later
Text Domain: totopaint
*/

:root {
    --primary-color: #0E2E8A;
    --accent-color: #00A651;
    --text-color: #333333;
    --light-bg: #F8FAFD;
    --white: #ffffff;
}

/* ====================================================
   1. RESET & GLOBAL STYLES
==================================================== */
img { 
    max-width: 100%; 
    height: auto; 
    display: block; 
}

/* ==========================================================================
   CSS RESPONSIVE CHO TRANG CHI TIẾT SẢN PHẨM (MOBILE & TABLET)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Ép cái thẻ bọc ngoài (chứa cả sp-gallery và sp-info) xếp dọc */
    /* Lưu ý: Nếu bro dùng class bọc ngoài khác (ví dụ .row của Bootstrap), hãy thêm d-flex flex-column hoặc chỉnh class ở đây */
    .sp-gallery {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 25px; /* Tạo khoảng cách giữa ảnh và nội dung */
    }
    .sp-info {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 0 10px; /* Thụt lề một chút cho chữ đỡ sát mép đt */
    }

    /* 2. Thu nhỏ Tiêu đề và Padding ảnh cho vừa màn hình */
    .sp-title {
        font-size: 24px !important;
        text-align: center;
    }
    .sp-main-img {
        padding: 20px !important; /* Mobile thì bỏ bớt khoảng trắng thừa */
    }
    .sp-main-img img {
        max-height: 250px !important; /* Ảnh to vừa phải trên đt */
    }

    /* 3. Khối Nút bấm (Tải bảng màu, Mua ngay...) -> Ép tràn viền 100% bấm cho sướng */
    .sp-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .sp-actions .btn {
        width: 100% !important;
        text-align: center;
    }

    /* 4. Khối Nút dung tích thu nhỏ lại một xíu */
    .capacity-options {
        flex-wrap: wrap; 
    }
    .cap-btn {
        padding: 6px 15px !important;
        font-size: 13px !important;
    }
    
    /* 5. Căn giữa các ảnh Thumbnail */
    .sp-thumbnails {
        justify-content: center !important;
    }
    
    /* (Mẹo) Nếu cái div bọc ngoài cùng 2 cột đang dùng display: flex thì ép nó xuống dòng */
    div[style*="display: flex"]:not(.sp-actions):not(.capacity-options):not(.sp-thumbnails) {
        flex-wrap: wrap !important;
    }
	
	/* =======================================================
       BIẾN SẢN PHẨM LIÊN QUAN THÀNH SLIDER TRƯỢT NGANG (MOBILE) 
       ======================================================= */
    .related-grid {
        display: flex !important;         
        flex-wrap: nowrap !important;     
        overflow-x: auto !important;      
        scroll-snap-type: x mandatory;    
        -webkit-overflow-scrolling: touch;
        gap: 15px !important;
        padding-bottom: 20px;             
        margin-left: -15px;               
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .related-grid .product-card {
        flex: 0 0 70% !important;         
        max-width: 280px;                 
        scroll-snap-align: start;         
    }

    .product-info {
        padding: 15px !important;
    }
    .product-name {
        font-size: 15px !important;
    }

    .related-grid::-webkit-scrollbar {
        height: 4px;
    }
    .related-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    .related-grid::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 4px;
    }
}