/*
Theme Name: Wootech Hamigo
Theme URI: https://wootech.vn/
Description: Giao diện độc quyền được thiết kế và tối ưu hóa cho Đồ gốm Hamigo (Wootech Core).
Author: Wootech Team
Author URI: https://wootech.vn/
Template: wootech-theme
Version: 1.0.1
Text Domain: wootech-hamigo
*/

/* ==========================================================================
   FONT FACE CẤU HÌNH THEO FIGMA
   ========================================================================== */

/* 1. Roboto (Load từ Google Fonts cho lẹ) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* 2. SVN-Gilroy (Font Tiêu Đề) */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('assets/fonts/SVN-Gilroy.woff2') format('woff2'),
         url('assets/fonts/SVN-Gilroy.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('assets/fonts/SVN-GilroyBold.woff2') format('woff2'),
         url('assets/fonts/SVN-GilroyBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 3. LNTH-Daybreaker (Font Nghệ Thuật / Banner) */
@font-face {
    font-family: 'LNTH-Daybreaker';
    src: url('assets/fonts/LNTH-Daybreaker.woff2') format('woff2'),
         url('assets/fonts/LNTH-Daybreaker.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   CSS VARIABLES CHO GIAO DIỆN & TAILWIND
   ========================================================================== */
:root {
    --font-primary: 'Roboto', sans-serif;
    --font-heading: 'SVN-Gilroy', sans-serif;
    --font-display: 'LNTH-Daybreaker', cursive;
}

.font-primary {
    font-family: var(--font-primary), sans-serif !important;
}

.font-heading {
    font-family: var(--font-heading), sans-serif !important;
}

.font-display {
    font-family: var(--font-display), cursive !important;
}

/* ==========================================================================
   SWIPER PAGINATION DOTS (GLOBAL)
   ========================================================================== */

/* Style cho Banner Pagination Dots (Trang chủ & Trang chi tiết) */
.hero-pagination {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 1.5rem !important;
}

/* Tùy chỉnh Nút Next/Prev cho Slider */
.swiper-button-next, .swiper-button-prev {
    color: #ffffff !important;
    text-shadow: 0px 2px 5px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #ffdcb5 !important;
    transform: scale(1.1);
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 28px !important;
    font-weight: bold;
}

.hero-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #9f9389;
    opacity: 1;
    border-radius: 9999px;
    transition: all 0.3s ease;
    margin: 0 6px !important;
    cursor: pointer;
}
.hero-pagination .swiper-pagination-bullet-active {
    width: 32px;
    background-color: #432817;
}

/* Style cho Product Gallery Pagination Dots */
.product-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.2);
    opacity: 1;
    margin: 0 4px !important;
    transition: all 0.3s ease;
    border-radius: 10px;
}
.product-pagination .swiper-pagination-bullet-active {
    width: 24px;
    background-color: #ffffff;
}

/* Ép buộc căn trái cho toàn bộ nội dung trong khối Chi tiết sản phẩm */
.prose, .prose * {
    text-align: left !important;
}

/* CSS cho Thumbnail Slider */
.product-thumbs-slider .swiper-slide-thumb-active {
    opacity: 1 !important;
    border: 2px solid #432817;
}