/* ============================================================
   a_style_stats.css — Stats section fix (standalone, no dependencies)
   อัพโหลดไฟล์นี้ขึ้น server แล้วเพิ่ม <link> ใน a_header.php
   ============================================================ */

/* ----------------------------------------------------------
   Container — วางใต้ hero section
---------------------------------------------------------- */
.hd-stats-outer {
    position: relative;
    z-index: 10;
    background: #ffffff;
    padding: 0 0 60px;
}

.hd-stats-inner {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1.5px solid #f0f0f0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    align-items: center !important;
    padding: 40px 20px !important;
    margin-top: -10px !important;
    gap: 0 !important;
    /* สำคัญ: ป้องกัน AOS ซ่อน */
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* ----------------------------------------------------------
   Stat item
---------------------------------------------------------- */
.hd-stat-item {
    flex: 1;
    min-width: 130px;
    text-align: center;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    /* ป้องกัน AOS ซ่อน child */
    opacity: 1 !important;
    transform: none !important;
}

/* ----------------------------------------------------------
   Icon
---------------------------------------------------------- */
.hd-stat-icon {
    font-size: 24px !important;
    color: #FC3737 !important;
    margin-bottom: 8px !important;
    display: block !important;
    opacity: 1 !important;
}
.hd-stat-icon i {
    color: #FC3737 !important;
    font-size: 24px !important;
}

/* ----------------------------------------------------------
   Number row (number + plus/percent)
---------------------------------------------------------- */
.hd-stat-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    line-height: 1 !important;
    opacity: 1 !important;
}

.hd-stat-number {
    font-family: 'Kanit', sans-serif !important;
    font-size: 44px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    line-height: 1 !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hd-stat-plus {
    font-family: 'Kanit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #FC3737 !important;
    margin-top: 6px !important;
    margin-left: 2px !important;
    display: inline-block !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Label
---------------------------------------------------------- */
.hd-stat-label {
    font-family: 'Sarabun', sans-serif !important;
    font-size: 14px !important;
    color: #888888 !important;
    margin-top: 4px !important;
    display: block !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Divider
---------------------------------------------------------- */
.hd-stat-divider {
    width: 1px !important;
    height: 60px !important;
    background: #eeeeee !important;
    flex-shrink: 0 !important;
    display: block !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 991px) {
    .hd-stat-number { font-size: 36px !important; }
}
@media (max-width: 768px) {
    .hd-stat-divider { display: none !important; }
    .hd-stat-item { min-width: 44%; }
    .hd-stats-inner { padding: 30px 12px !important; }
}
@media (max-width: 480px) {
    .hd-stat-number { font-size: 30px !important; }
    .hd-stat-item { min-width: 100%; padding: 10px; }
}