/**
 * Custom Styles for Hai An Construction Theme
 * Author: Gemini
 * Version: 1.0.1
 * * NOTE: This file contains custom CSS for elements not easily styled by Tailwind,
 * such as font imports, complex custom classes (line-bottom), and specific 
 * Swiper/WordPress element overrides.
 */

/* ===============================================
   1. FONT IMPORTS 
   =============================================== */

/* Import Google Fonts: Montserrat (Heading) and Open Sans (Body) 
 * Các font này được định nghĩa trong header.php qua Tailwind config.
 * Cần import ở đây để đảm bảo chúng có sẵn. 
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Open+Sans:wght@300;400;600;700&display=swap');

/* ===============================================
   2. CUSTOM UTILITIES & TYPOGRAPHY
   =============================================== */

/* Định nghĩa màu sắc chủ đạo để dùng trong các ngữ cảnh CSS thuần */
:root {
    --color-haian-primary: #ffbf00; /* Vàng chủ đạo */
    --color-haian-dark: #333333;    /* Màu chữ chính */
    --color-haian-light-gray: #f2f2f2; /* Màu nền footer */
}

/* Áp dụng font Open Sans làm font cơ sở nếu Tailwind không load (fallback) */
body {
    font-family: 'Open Sans', sans-serif;
    color: var(--color-haian-dark);
}

/* Ghi đè lên font chữ cho các tiêu đề lớn nếu cần thiết */
h1, h2, h3, h4, .font-heading {
    font-family: 'Montserrat', sans-serif;
}

/* Class cho đường gạch chân tiêu đề (Line Bottom) */
.line-bottom {
    position: relative;
    /* Dùng padding-bottom để tạo khoảng cách cho đường kẻ */
    padding-bottom: 1rem; 
    margin-bottom: 2rem; 
}
.line-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--color-haian-primary);
}

/* ===============================================
   3. SWIPER OVERRIDES (Cho Banner và Partners)
   =============================================== */

/* Swiper Pagination cho Banner */
.swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5); /* Màu trắng mờ */
    opacity: 1;
    width: 10px;
    height: 10px;
    transition: background-color 0.3s;
}
.swiper-pagination-bullet-active {
    background-color: var(--color-haian-primary); /* Màu vàng khi active */
}

/* Swiper Navigation (mũi tên) cho Banner */
.banner-nav {
    color: var(--color-haian-primary);
    --swiper-navigation-size: 30px; 
    transition: color 0.3s;
}
.banner-nav:hover {
    color: #ffcc50; /* Sáng hơn khi hover */
}

/* Swiper Pagination cho Partners/Projects */
.projects-pagination .swiper-pagination-bullet,
.partners-pagination .swiper-pagination-bullet {
    background-color: #ccc; 
}
.projects-pagination .swiper-pagination-bullet-active,
.partners-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-haian-primary);
}

/* ===============================================
   4. STATS CIRCULAR BAR (Tạo hiệu ứng vòng tròn)
   =============================================== */

/* Container cho khối stats */
.circular-stat-container {
    width: 14rem; /* 56 tương đương 224px */
    height: 14rem;
}

/* Vòng tròn nền */
.circular-stat-track {
    stroke: #eeeeee;
}

/* Vòng tròn tiến độ */
.circular-stat-progress {
    stroke: var(--color-haian-primary);
    stroke-linecap: round;
    /* transition: stroke-dashoffset 2s ease-out; -- Animation sẽ dùng JS để điều khiển */
}

/* ===============================================
   5. WORDPRESS OVERRIDES
   =============================================== */

/* Style cho các widget titles (được định nghĩa trong functions.php) */
.widget-title {
    font-family: 'Montserrat', sans-serif;
}

/* Style cho pagination của WordPress */
.pagination {
    /* Đảm bảo style của Tailwind không bị xung đột với mặc định của WP */
}