/* ==========================================================
   CSS: About Us (Hardcoded Layout)
========================================================== */

.custom-about-page { font-family: inherit; }

/* 1. Hero Zone */
.about-hero-zone {
    background: linear-gradient(rgba(18, 87, 50, 0.8), rgba(18, 87, 50, 0.9)), url('https://tnhthanat.com/wp-content/uploads/2026/03/เกี่ยวกับธนัทเฮิร์บ-พาณิชย์.jpeg') center/cover;
    padding: 120px 20px;
    color: #fff;
    border-radius: 0 0 40px 40px;
    margin-bottom: 60px;
}
.hero-title { font-size: 3em; font-weight: 800; margin-bottom: 20px; color: #fff;}
.hero-subtitle { font-size: 1.2em; font-weight: 300; opacity: 0.9; }

/* 2. Summary & Stats */
.about-summary-zone { margin-bottom: 80px; }
.section-heading { color: #125732; font-weight: bold; font-size: 2.2em; margin-bottom: 20px; }
.admin-content { color: #555; line-height: 1.8; font-size: 1.05em; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.stat-box {
    background: #f8fcf9; border: 1px solid #e8f3ec; padding: 30px 20px;
    border-radius: 16px; text-align: center; transition: 0.3s;
}
.stat-box:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(18,87,50,0.1); }
.stat-icon { font-size: 40px; color: #125732; margin-bottom: 15px; }
.stat-number { display: inline-block; font-size: 2.5em; font-weight: 800; color: #111; }
.stat-box .plus { font-size: 2em; font-weight: 800; color: #125732; }
.stat-label { font-size: 0.9em; color: #666; font-weight: 600; margin-top: 5px;}

/* 3. Vision & Mission */
.about-vmi-zone { margin-bottom: 60px; }
.vmi-card {
    background: #fff; padding: 40px; border-radius: 20px; height: 100%;
    box-shadow: 0 5px 30px rgba(0,0,0,0.04); border-top: 5px solid #125732;
}
.vmi-icon { font-size: 50px; color: #125732; margin-bottom: 20px; }
.vmi-card h3 { color: #222; font-weight: 700; margin-bottom: 15px; }
.vmi-card p, .vmi-card ul { color: #555; line-height: 1.7; }
.vmi-card ul { padding-left: 20px; }
.vmi-card ul li { margin-bottom: 10px; }

/* 4. Certifications */
.about-cert-zone { border-radius: 30px; margin-bottom: 60px; }
.cert-badge {
    background: #fff; padding: 15px 30px; border-radius: 50px;
    font-weight: bold; color: #444; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 10px; font-size: 1.1em;
}
.cert-badge i { color: #125732; font-size: 24px; }

/* Responsive */
@media (max-width: 768px) {
    .hero-title { font-size: 2em; }
    .stats-grid { grid-template-columns: 1fr; }
    .about-hero-zone { padding: 80px 20px; border-radius: 0 0 20px 20px; }
}