/* ============================================================
   a_style_fix2.css — Fix รอบ 2
   โหลดหลัง a_style_fix.css
   ============================================================ */

/* ----------------------------------------------------------
   STATS — ติดกับ hero โดยตรง ไม่มีช่องว่าง
---------------------------------------------------------- */
.hd-stats-outer {
    position: relative;
    z-index: 5;
    padding: 0 0 50px;
    background: #fff;
}
.hd-stats-inner {
    background: #fff !important;
    border-radius: 20px !important;
    border: 1px solid #f0f0f0 !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.07) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 36px 24px !important;
    gap: 0 !important;
    margin: -30px 0 0 !important; /* ดึงขึ้นทับ hero เล็กน้อย */
}
.hd-stat-item {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hd-stat-icon { font-size: 22px; color: #FC3737; margin-bottom: 10px; }
.hd-stat-row  { display: flex; align-items: flex-start; line-height: 1; }
.hd-stat-number {
    font-family: 'Kanit', sans-serif !important;
    font-size: clamp(30px, 3.5vw, 44px) !important;
    font-weight: 700 !important;
    color: #111 !important;
    line-height: 1 !important;
}
.hd-stat-plus {
    font-family: 'Kanit', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #FC3737 !important;
    margin-top: 4px;
    line-height: 1;
}
.hd-stat-label {
    font-size: 13px !important;
    color: #888 !important;
    margin-top: 6px;
}
.hd-stat-divider {
    width: 1px; height: 56px;
    background: #eee; flex-shrink: 0;
}
@media (max-width: 768px) {
    .hd-stat-divider { display: none; }
    .hd-stat-item { min-width: 44%; }
    .hd-stats-inner { margin: 0 !important; }
}

/* ----------------------------------------------------------
   ABOUT — รูปซ้าย + checklist + skill bars
---------------------------------------------------------- */
.hd-about-img-box {
    position: relative;
    border-radius: 20px;
    overflow: visible;
}
.hd-about-photo {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #111 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hd-about-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.hd-about-placeholder {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(252,55,55,0.4);
    font-size: 60px;
}
.hd-about-placeholder span {
    font-size: 16px;
    color: rgba(255,255,255,0.3);
}

/* Experience badge */
.hd-exp-badge-new {
    position: absolute;
    top: -16px; left: -16px;
    width: 88px; height: 88px;
    background: #FC3737;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 24px rgba(252,55,55,0.4);
    z-index: 5;
    animation: hd-float 3s ease-in-out infinite alternate;
}
.hd-exp-num {
    font-size: 22px; font-weight: 800; line-height: 1;
}
.hd-exp-text { font-size: 11px; opacity: 0.85; text-align: center; line-height: 1.2; }

/* Float card */
.hd-about-float-card {
    position: absolute !important;
    bottom: 20px; right: -16px;
    background: #fff;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 5;
    animation: hd-float 4s ease-in-out infinite alternate-reverse;
    min-width: 180px;
}
.hd-about-float-card .text-theme { color: #FC3737; font-size: 22px; }

/* Deco */
.hd-about-deco-1 {
    position: absolute; top: -18px; right: -18px;
    width: 72px; height: 72px;
    border: 3px solid rgba(252,55,55,0.2);
    border-radius: 18px;
    animation: hd-spin-slow 12s linear infinite;
}
.hd-about-deco-2 {
    position: absolute; bottom: 60px; left: -14px;
    width: 44px; height: 44px;
    background: rgba(252,55,55,0.12);
    border-radius: 10px;
    animation: hd-spin-slow 8s linear infinite reverse;
}
@media (max-width: 991px) {
    .hd-about-float-card { right: 10px; }
    .hd-exp-badge-new { top: -10px; left: -10px; width: 76px; height: 76px; }
}

/* Checklist 2 col */
.hd-about-checklist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 24px;
}
.hd-check-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; color: #444;
}
.hd-check-item i { color: #FC3737; font-size: 16px; flex-shrink: 0; }

/* Skill bars */
.hd-skill-bars { display: flex; flex-direction: column; gap: 14px; }
.hd-skill-item {}
.hd-skill-header {
    display: flex; justify-content: space-between;
    margin-bottom: 6px; font-size: 14px;
}
.hd-skill-pct { color: #FC3737; font-weight: 700; }
.hd-skill-track {
    height: 6px; background: #f0f0f0;
    border-radius: 3px; overflow: hidden;
}
.hd-skill-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #FC3737, #ff6b6b);
    border-radius: 3px;
    transition: width 1.4s cubic-bezier(0.4,0,0.2,1);
}

/* ----------------------------------------------------------
   PRICING — ออกแบบใหม่ทั้งหมด ลบทับ theme เก่า
---------------------------------------------------------- */
.hd-pkg-card {
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.hd-pkg-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
/* Featured */
.hd-pkg-featured {
    background: linear-gradient(160deg, #111 0%, #1a0a1a 100%);
    border-color: rgba(252,55,55,0.35);
    box-shadow: 0 10px 40px rgba(252,55,55,0.15);
}
.hd-pkg-featured:hover {
    box-shadow: 0 20px 60px rgba(252,55,55,0.25);
}

/* Badge */
.hd-pkg-badge {
    background: linear-gradient(90deg, #FC3737, #ff6b6b);
    color: #fff; text-align: center;
    padding: 7px 12px; font-size: 13px; font-weight: 600;
}

/* Top */
.hd-pkg-top { padding: 28px 24px 20px; }
.hd-pkg-icon {
    width: 52px; height: 52px;
    background: rgba(252,55,55,0.08);
    color: #FC3737;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px;
}
.hd-pkg-icon-feat { background: rgba(252,55,55,0.2) !important; }
.hd-pkg-name { font-size: 20px; color: #111; margin-bottom: 6px; }
.hd-pkg-featured .hd-pkg-name { color: #fff; }
.hd-pkg-desc { font-size: 14px; color: #888; margin: 0 0 16px; line-height: 1.5; }
.hd-pkg-featured .hd-pkg-desc { color: rgba(255,255,255,0.6); }
.hd-pkg-price { display: flex; align-items: flex-start; gap: 4px; }
.hd-pkg-currency { font-size: 20px; color: #FC3737; font-weight: 700; margin-top: 6px; }
.hd-pkg-amount { font-size: 40px; color: #111; font-weight: 800; line-height: 1; }
.hd-pkg-featured .hd-pkg-amount { color: #fff; }

/* Divider */
.hd-pkg-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 0 24px;
}
.hd-pkg-featured .hd-pkg-divider { background: rgba(255,255,255,0.1); }

/* Features */
.hd-pkg-features { padding: 20px 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.hd-pkg-feature-item {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #444; line-height: 1.5;
}
.hd-pkg-feature-item i { color: #FC3737; margin-top: 3px; flex-shrink: 0; }
.hd-pkg-featured .hd-pkg-feature-item { color: rgba(255,255,255,0.8); }

/* CTA */
.hd-pkg-cta { padding: 0 24px 28px; }
.hd-pkg-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%; padding: 13px 20px;
    border-radius: 10px; font-size: 15px;
    text-decoration: none; transition: all 0.3s ease;
    border: none; cursor: pointer;
}
.hd-pkg-btn-red {
    background: #FC3737; color: #fff;
    box-shadow: 0 4px 16px rgba(252,55,55,0.3);
}
.hd-pkg-btn-red:hover { background: #d42020; color: #fff; box-shadow: 0 6px 20px rgba(252,55,55,0.4); }
.hd-pkg-btn-light {
    background: rgba(255,255,255,0.12); color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
}
.hd-pkg-btn-light:hover { background: rgba(255,255,255,0.22); color: #fff; }

/* ----------------------------------------------------------
   PROCESS — step cards ใหม่
---------------------------------------------------------- */
.hd-step-card {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 36px 24px 28px;
    text-align: center;
    position: relative;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: visible;
}
.hd-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(252,55,55,0.1);
    border-color: rgba(252,55,55,0.25);
}

/* Step number badge */
.hd-step-num {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 36px;
    background: #FC3737;
    color: #fff;
    border-radius: 50%;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(252,55,55,0.4);
    border: 3px solid #fff;
}

/* Icon */
.hd-step-icon {
    width: 64px; height: 64px;
    background: rgba(252,55,55,0.08);
    color: #FC3737;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    margin: 0 auto 18px;
    transition: background 0.3s ease;
}
.hd-step-card:hover .hd-step-icon {
    background: rgba(252,55,55,0.15);
}
.hd-step-icon-launch { background: rgba(252,55,55,0.12) !important; }

.hd-step-title { font-size: 18px; color: #111; margin-bottom: 12px; }
.hd-step-desc { font-size: 14px; color: #777; line-height: 1.75; margin-bottom: 16px; }

/* Tags */
.hd-step-tag {
    display: inline-block;
    padding: 4px 14px; border-radius: 50px;
    font-size: 12px; font-weight: 600;
    background: rgba(252,55,55,0.07);
    color: #FC3737;
    border: 1px solid rgba(252,55,55,0.18);
}
.hd-step-tag-free {
    background: rgba(34,197,94,0.08) !important;
    color: #16a34a !important;
    border-color: rgba(34,197,94,0.2) !important;
}
.hd-step-tag-launch {
    background: rgba(252,55,55,0.12) !important;
    color: #FC3737 !important;
}

/* ----------------------------------------------------------
   TESTIMONIAL — review card ใหม่
---------------------------------------------------------- */
.hd-review-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}
.hd-review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}
.hd-review-stars { display: flex; gap: 3px; color: #FBBF24; font-size: 14px; }
.hd-review-msg {
    font-size: 15px; color: #444; line-height: 1.75;
    flex: 1; margin: 0;
    font-style: italic;
}
.hd-review-profile {
    display: flex; align-items: center; gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f5;
    margin-top: auto;
}
/* Avatar */
.hd-review-avatar {
    width: 46px; height: 46px;
    border-radius: 50%; overflow: hidden;
    flex-shrink: 0; background: #f0f0f0;
}
.hd-review-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.hd-review-initial {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #FC3737, #ff6b6b);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
    font-family: 'Kanit', sans-serif;
    border-radius: 50%;
}
.hd-review-info { flex: 1; }
.hd-review-name { font-size: 15px; color: #111; margin-bottom: 2px; }
.hd-review-role { font-size: 12px; color: #999; }
.hd-review-quote { font-size: 20px; color: rgba(252,55,55,0.2); margin-left: auto; }

/* Aggregate stars bar */
.hd-testi-aggregate {
    display: flex; align-items: center;
    justify-content: center; gap: 8px;
    margin-top: 12px; flex-wrap: wrap;
}
.hd-agg-stars { color: #FBBF24; font-size: 16px; display: flex; gap: 2px; }