/*
Theme Name: Gia dụng thông minh
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
   .udhv-babyfun, .udhv-babyfun * {
      all: unset;
      display: revert;
      box-sizing: border-box;
    }

    /* Toàn bộ layout */
    .udhv-babyfun {
      font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
      background: linear-gradient(180deg, #eef8ff 0%, #f8fffb 100%);
      padding: 80px 20px;
      text-align: center;
      color: #0f172a;
    }

    .udhv-babyfun__container {
      max-width: 1180px;
      margin: 0 auto;
    }

    .udhv-babyfun__title {
      font-size: 32px;
      font-weight: 800;
      color: #0b2447;
      margin-bottom: 10px;
    }

    .udhv-babyfun__sub {
      color: #475569;
      font-size: 15px;
      margin-bottom: 50px;
    }

    /* Timeline */
    .udhv-babyfun__steps {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      margin-bottom: 60px;
    }

    .udhv-step {
      flex: 0 1 180px;
      text-align: center;
    }

    .udhv-step__icon {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #e0f4ff;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: #0ea5e9;
    }

    .udhv-step__number {
      font-weight: 700;
      font-size: 13px;
      color: #64748b;
      margin-bottom: 4px;
    }

    .udhv-step__title {
      font-weight: 700;
      font-size: 16px;
      color: #0b2447;
      margin-bottom: 6px;
    }

    .udhv-step__desc {
      font-size: 13px;
      color: #475569;
      line-height: 1.45;
    }

    /* CTA */
    .udhv-babyfun__cta {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      padding: 30px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      max-width: 700px;
      margin: 0 auto;
    }

    .udhv-cta__title {
      font-weight: 800;
      font-size: 20px;
      color: #0b2447;
    }

    .udhv-cta__sub {
      color: #475569;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .udhv-cta__btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .udhv-btn {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      transition: 0.25s ease;
    }

    .udhv-btn--primary {
      background: linear-gradient(90deg, #ff66b8, #ff8a80);
      color: #fff;
    }

    .udhv-btn--primary:hover {
      opacity: 0.9;
    }

    .udhv-btn--ghost {
      background: #fff;
      color: #0b2447;
      border: 1px solid #e2e8f0;
    }

    .udhv-btn--ghost:hover {
      background: #f8fafc;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .udhv-babyfun__steps {
        gap: 20px;
      }
      .udhv-step {
        flex: 1 1 45%;
      }
      .udhv-babyfun__cta {
        padding: 24px;
      }
    }

    @media (max-width: 480px) {
      .udhv-step {
        flex: 1 1 100%;
      }
    }