.elementor-1809 .elementor-element.elementor-element-3a28ac8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1809 .elementor-element.elementor-element-3a28ac8:not(.elementor-motion-effects-element-type-background), .elementor-1809 .elementor-element.elementor-element-3a28ac8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1809 .elementor-element.elementor-element-efcf5eb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:18px 18px 18px 18px;}.elementor-1809 .elementor-element.elementor-element-efcf5eb:not(.elementor-motion-effects-element-type-background), .elementor-1809 .elementor-element.elementor-element-efcf5eb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#4C91FF;}.elementor-1809 .elementor-element.elementor-element-a1c07ba{width:100%;max-width:100%;}.elementor-1809 .elementor-element.elementor-element-9fd9871{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1809 .elementor-element.elementor-element-4925574{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1809 .elementor-element.elementor-element-b33e250{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1809 .elementor-element.elementor-element-b0d6c9b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1809 .elementor-element.elementor-element-3e04f67{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:23px 23px 23px 23px;}.elementor-1809 .elementor-element.elementor-element-3e04f67:not(.elementor-motion-effects-element-type-background), .elementor-1809 .elementor-element.elementor-element-3e04f67 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E8F5FF;}.elementor-widget-fluent-form-widget .fluentform-widget-description{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );font-style:var( --e-global-typography-accent-font-style );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}.elementor-1809 .elementor-element.elementor-element-8533a38 .fluentform-widget-wrapper .ff-el-group .ff-btn-submit{background-color:#1a7efb !important;color:#ffffff !important;}.elementor-1809 .elementor-element.elementor-element-93a6a9d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-1809 .elementor-element.elementor-element-93a6a9d:not(.elementor-motion-effects-element-type-background), .elementor-1809 .elementor-element.elementor-element-93a6a9d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1809 .elementor-element.elementor-element-b465fcf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:768px){.elementor-1809 .elementor-element.elementor-element-b0d6c9b{--width:50%;}.elementor-1809 .elementor-element.elementor-element-3e04f67{--width:50%;}}@media(max-width:1024px){.elementor-widget-fluent-form-widget .fluentform-widget-description{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}@media(max-width:767px){.elementor-widget-fluent-form-widget .fluentform-widget-description{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );word-spacing:var( --e-global-typography-accent-word-spacing );}}/* Start custom CSS for html, class: .elementor-element-a1c07ba *//* ================== WRAPPER ================== */
.topik-desktop .topik-wrap {
    max-width: 1180px;
    margin: 20px auto;
    padding: 32px;
    background: linear-gradient(to bottom, #0b63e6, #0a52c4);
    border-radius: 18px;
    color: #fff;
    font-family: "montserrat", sans-serif;
}

/* ================== HEADER ================== */
.topik-desktop .header h2 {
    font-size: 34px;
    font-weight: 900;
    margin: 0 0 8px;
      font-family: "montserrat", sans-serif;
      color: #fff;
}

.topik-desktop .header p {
    color: #e4ecff;
    margin: 0 0 22px;
}

/* ================== SELECTOR (LEVEL + GOAL) ================== */
.topik-desktop .etopik-select {
    display: flex;
    gap: 28px;
    margin-bottom: 24px;
}

.topik-desktop .select-col { flex: 1; }

.topik-desktop .select-title {
    background: rgba(255,255,255,0.12);
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 16px;
}

.topik-desktop .select-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.topik-desktop .option {
    background: #082b63;
    padding: 14px 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: 0.2s ease;
}
.topik-desktop .option:hover { transform: translateY(-3px); }
.topik-desktop .option.active {
    background: #fff;
    color: #0A2140;
}
.topik-desktop .option.disabled {
    opacity: .3;
    pointer-events: none;
}

/* ================== EXTRA ROW (TEST ĐẦU VÀO) ================== */
.topik-desktop .extra-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px;
    margin: 12px 0 18px;
    width: 100%;
}

.topik-desktop .test-btn {
    background: #ffd24d;
    color: #0A2140;
    font-weight: 900;
    border-radius: 999px;
    padding: 12px 26px;
    text-decoration: none;
}

.topik-desktop .view-detail {
    color: #fff;
    text-decoration: underline;
    font-size: 14px;
}

/* ================== RESULT TITLE ================== */
.topik-desktop .path-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
    margin: 4px 0;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.topik-desktop .path-desc {
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #f2f6ff;
    margin: 0 0 18px;
}

/* ================== 3 CỘT GIÁ ================== */
.topik-desktop .price-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.topik-desktop .price-card {
    flex: 1 0 0;  
    background: #fff;
    color: #0A2140;
    border-radius: 20px;
    padding: 24px 26px;
    border: 1px solid #dfe8ff;
    box-shadow: 0 6px 20px rgba(10,33,64,0.12);

    display: flex !important;
    flex-direction: column !important;
}
.topik-desktop .price-card.highlight {
    border: 3px solid #FFD24D;
}

/* TITLE + SUBTAG */
.topik-desktop .price-title {
    font-size: 20px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.topik-desktop .plan-sub-inline {
    background: #eaf1ff;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
}

/* DESC (CĂN CHIỀU CAO ĐỂ NÚT THẲNG HÀNG) */
.topik-desktop .price-desc {
    font-size: 13px;
    color: #636b7b;
    line-height: 1.5;
    margin: 4px 0 6px;
    min-height: 44px; /* cùng chiều cao cho 3 cột */
}

/* OWN-TAG (THỜI HẠN SỞ HỮU / HỌC TỚI KHI ĐỖ) */
.topik-desktop .own-tag {
    background: #fff8d7;
    border-left: 5px solid #ffcc3c;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;

    min-height: 32px;              /* FIX cao đều giữa 3 cột */
    display: flex;
    align-items: center;
}

/* PRICE LINE */
.topik-desktop .price-values {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    white-space: nowrap;

    min-height: 28px;              /* FIX cao đều giữa 3 cột */
}
.topik-desktop .price-old {
    text-decoration: line-through;
    color: #a3a9bb;
}
.topik-desktop .price-val {
    font-size: 19px;
    font-weight: 900;
}
.topik-desktop .discount-tag {
    background: #ffe4c0;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}

/* BUTTON – luôn thẳng hàng vì phía trên đã cố định cao */
.topik-desktop .register-btn {
    background: #0b63e6;
    padding: 14px 0;
    color: #fff;
    border-radius: 12px;
    text-align: center;
    font-weight: 800;
    margin-top: 10px;
    text-decoration: none;
}

/* BENEFITS */
.topik-desktop .benefits {
    margin-top: 14px;
}
.topik-desktop .benefits ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.topik-desktop .benefits li {
    display: flex;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.55;
}
.topik-desktop .bullet {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFD24D;
    color: #0A2140;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

/* ITEM KHÔNG ÁP DỤNG (mờ đi) */
.muted {
    opacity: 0.38;
    filter: grayscale(100%);
}
.muted .bullet {
    background: #e1e1e1 !important;
    color: #9fa5b3 !important;
}

/* NOTE BOX PRO */
.note-pro {
    background: #f3f7ff;
    border: 1px solid #dbe5ff;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.58;
    font-weight: 600;
    margin-top: 10px;
}
#cardTeacher {
    position: relative !important;
    overflow: visible !important; /* quan trọng để badge không bị cắt */
}

#cardTeacher::after {
    content: "8–10\Angười";   /* xuống dòng */
    white-space: pre-line;   /* bắt buộc để \A hoạt động */

    position: absolute;
    top: -18px;
    right: -18px;

    width: 64px;
    height: 64px;

    background: #FFD24D;
    color: #0A2140;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;

    border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.12);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);

    display: flex;               /* bắt buộc để canh giữa */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* ================== MOBILE ================== */
@media (max-width: 900px){
    .topik-desktop .etopik-select { flex-direction: column; }
    .topik-desktop .option { font-size: 16px; padding: 12px 16px; }

    .topik-desktop .price-row { flex-direction: column; }
    #cardTeacher::after {
        top: -12px;
        right: -10px;
        width: 56px;
        height: 56px;
        font-size: 11px;
    }
}
/* ==== FIX 3 CỘT LỆCH SAU KHI CHỌN TỔ HỢP ==== */
.topik-desktop .price-row {
    display: flex;
    gap: 20px;
}

.topik-desktop .price-card {
    flex: 1 1 33.33% !important;   /* Mỗi cột đúng 1/3 */
    min-width: 0 !important;       /* Ngăn flex co giãn kỳ dị */
}

/* Cố định chiều cao các phần trên để nút luôn thẳng hàng */
.topik-desktop .price-desc { min-height: 44px !important; }
.topik-desktop .own-tag { min-height: 32px !important; display:flex;align-items:center; }
.topik-desktop .price-values { min-height: 48px !important; display:flex;align-items:center; }
.discount-tag {
   display: inline-block;
    background: #ffe066; /* vàng pastel sáng */
    color: #222;         /* chữ đen đậm */
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(255, 215, 70, 0.4);
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: -0.3px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1ee71b6 *//* ⭐ FOMO CHỈ ÁP DỤNG TRONG TRANG LOTRINH */
.lotrinh-page .etopik-fomo-box {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #003c9d;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);

    /* KHÔNG dùng transform global để tránh xung đột */
    opacity: 0;
    translate: 0 20px; /* dùng translate: KHÔNG đụng transform countdown */
    transition: opacity .45s ease, translate .45s ease;

    z-index: 999999;
    pointer-events: none;
}

.lotrinh-page .etopik-fomo-box.etopik-show {
    opacity: 1;
    translate: 0 0;
}

.lotrinh-page .etopik-fomo-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #148CFF;
    animation: etopikFomoBlink 1.3s infinite;
}

@keyframes etopikFomoBlink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

/* ⭐ TỰ ĐỘNG THU NHỎ FOMO TRÊN ĐIỆN THOẠI */
@media (max-width: 480px){

    .lotrinh-page .etopik-fomo-box {
        padding: 7px 10px;
        font-size: 12.5px;
        bottom: 10px;
        left: 10px;
        border-radius: 10px;
        gap: 6px;

        /* Thu hẹp tổng thể */
        max-width: 75%;          /* không tràn màn hình */
        line-height: 1.25;
        white-space: normal;     /* cho phép xuống dòng */
        
        /* Giảm độ nổi để không chắn UI */
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    }

    .lotrinh-page .etopik-fomo-dot {
        width: 9px;
        height: 9px;
    }

    /* Thu nhỏ chữ phần thời gian minh họa */
    .lotrinh-page #etopikFomoText {
        font-size: 12.5px;
        display: block;
    }
}

/* ⭐ TỐI ƯU CỰC NHỎ (điện thoại 360px trở xuống) */
@media (max-width: 360px){

    .lotrinh-page .etopik-fomo-box {
        padding: 6px 8px;
        font-size: 11.5px;
        bottom: 8px;
        left: 8px;
        max-width: 78%;
        gap: 5px;
    }

    .lotrinh-page .etopik-fomo-dot {
        width: 8px;
        height: 8px;
    }

    .lotrinh-page #etopikFomoText {
        font-size: 11.5px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dc9fbde *//* Ẩn mặc định, chỉ hiện trên màn <= 768px */
  .etopik-mobile-wrap {
    display: none;
  }

  @media (max-width: 768px) {
    .etopik-mobile-wrap {
      display: block;
      font-family: "montserrat", sans-serif;
      padding: 18px;
      background: linear-gradient(180deg, #0b63e6 0%, #0a52c4 100%);
      color: #fff;
      border-radius: 16px;
      margin-top: 18px;
    }

    .etopik-mobile-wrap h2 {
      font-size: 22px !important;
      font-weight: 900;
      color: #fff;
      text-align: center;
      margin: 6px 0 10px;
      line-height: 1.4;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
      display: inline-block;
      white-space: pre-line;
      font-family: "montserrat", sans-serif;
    }

    .etopik-mobile-wrap p {
      font-size: 13px;
      color: #d9ebff;
      text-align: center;
      margin: 0 0 14px;
    }

    .etopik-mobile-wrap .select-box {
      background: #fff;
      border-radius: 14px;
      padding: 10px 14px;
      margin-bottom: 12px;
      position: relative;
    }

    .etopik-mobile-wrap .select-box select {
      width: 100%;
      border: none;
      background: transparent;
      font-weight: 700;
      font-size: 17px;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      color: #111;
    }

    .etopik-mobile-wrap .select-box::after {
      content: "▾";
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: #6b7280;
    }

    .etopik-mobile-wrap .view-btn {
      display: block;
      background: #ffd400;
      color: #000;
      text-align: center;
      font-weight: 900;
      padding: 14px 0;
      border-radius: 999px;
      margin-bottom: 14px;
      text-decoration: none;
      font-size: 15px;
      box-shadow: 0 4px 12px rgba(255, 212, 0, 0.45);
    }

    /* KẾT QUẢ */
    #m_result {
      display: none;
      background: #fff;
      color: #06203a;
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 10px 22px rgba(2, 10, 40, 0.12);
      margin-top: 12px;
    }

    #m_result .result-header {
      text-align: center;
      margin-bottom: 8px;
    }

    #m_result .path-title {
      font-weight: 900;
      font-size: 16px;
      color: #06203a;
      margin-bottom: 4px;
    }

    #m_result .path-desc {
      font-size: 13px;
      color: #546071;
      margin-bottom: 8px;
      line-height: 1.8;
      white-space: pre-line;
    }

    .pkg-toggle {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 10px;
    }

    .pkg-toggle button {
      flex: 1;
      padding: 8px 6px;
      border-radius: 999px;
      border: 1px solid transparent;
      background: #f1f5f9;
      color: #081a2b;
      font-weight: 800;
      font-size: 13px;
    }

    .pkg-toggle button.active {
      background: #0045b8;
      color: #fff;
      border-color: rgba(0, 0, 0, 0.05);
      box-shadow: 0 6px 12px rgba(4, 50, 120, 0.18);
    }

    .price-card {
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 10px;
      background: #f8fafc;
      text-align: left;
    }

    .price-card.highlight {
      border: 2px solid #ffd24d;
    }

    .price-title {
      font-weight: 900;
      font-size: 15px;
      color: #06203a;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }

    .price-sub {
      font-size: 12px !important;
      line-height: 1.4;
      color: #4b5563;
      margin-bottom: 8px;
    }

    .price-row {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 6px;
      margin-bottom: 12px;
    }

    .price-val {
      font-size: 15px !important;
      font-weight: 900;
      color: #06203a;
      line-height: 1;
    }

    .price-old {
      font-size: 12px !important;
      color: #9aa3ad;
      text-decoration: line-through;
      line-height: 1;
    }

    #m_result .discount-tag {
      background: #ffd24d !important;
      color: #0a2140 !important;
      font-weight: 900 !important;
      font-size: 13px !important;
      padding: 4px 10px !important;
      border-radius: 12px !important;
      border: 1.5px solid rgba(0, 0, 0, 0.1);
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }

    .register-btn {
      width: 100%;
      background: #0045b8;
      color: #fff;
      padding: 11px 0;
      font-weight: 900;
      border-radius: 999px;
      border: none;
      margin-bottom: 8px;
      font-size: 13px;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      display: inline-block;
    }

    #m_reg_month {
      font-size: 14px !important;
      padding: 13px 0 !important;
    }
/* DÙNG FLEX + ICON BÊN TRÁI */
.benefits li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding-left: 0 !important;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}

.benefits li .icon-left {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0b63e6;
  margin-top: 2px;
}
    .small-note {
      font-size: 11px !important;
      opacity: 0.7;
      margin-top: 10px;
      text-align: center;
    }
  }
  @media (max-width: 768px) {
  .price-row {
    white-space: nowrap;
    flex-wrap: nowrap; /* tránh tự xuống dòng */
  }

  .price-val,
  .price-old,
  #m_result .discount-tag {
    white-space: nowrap;
  }
}
/* ===== BADGE 8–10 NGƯỜI — MOBILE ===== */
@media (max-width: 768px) {

  #m_card_pro {
    position: relative;
    overflow: visible !important;
  }

  #m_card_pro::after {
    content: "8–10\Angười";
white-space: pre-line;

    position: absolute;
    top: -16px;
    right: -16px;

    width: 58px;
    height: 58px;

    background: #FFD24D;
    color: #0A2140;
    font-weight: 900;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;

    border-radius: 50%;
    border: 2.5px solid rgba(0,0,0,0.12);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 999;
  }
}
/* ===== NOTE PRO — MOBILE ===== */
@media (max-width: 768px) {
  .note-pro-mobile {
    background: #f3f7ff;
    border: 1px solid #dbe5ff;
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #0A2140;
    font-weight: 600;
  }

  .note-pro-mobile b {
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
  }
}
/* =========================
   LIST BENEFITS – MOBILE
   Icon sát trái, text thẳng hàng
========================= */
.benefits {
  padding-left: 0 !important;
  margin: 0;
}

.benefits li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 6px;                     /* khoảng cách icon – chữ */
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
  font-size: 14px;
  line-height: 1.45;
  color: #223047;
}

/* Icon ✓ mặc định */
.benefits .icon-left {
  flex-shrink: 0;
  width: 14px;                 /* nhỏ gọn – sát lề trái */
  text-align: left;
  font-weight: 900;
  font-size: 15px;
  color: #0b63e6;
  line-height: 1;
  margin-top: 2px;             /* canh cho icon nằm giữa dòng */
}

/* Icon ✕ cho mục muted */
.benefits li.muted .icon-left {
  color: #c4c4c4 !important;
}
/* Giảm size & cho text nằm 1 dòng */
#tab_pro ~ #m_card_pro .register-btn {
  font-size: 12px !important;
  padding: 10px 0 !important;
  white-space: nowrap !important; 
  line-height: 1 !important;
}
/* FORCE HIỆN KẾT QUẢ MOBILE */
#m_result.m-result-show {
  display: block !important;
}
/* =========================
   MOBILE TAB — SHOW / HIDE
========================= */
@media (max-width: 768px) {
  /* Ẩn hết mặc định */
  #m_card_month,
  #m_card_self,
  #m_card_pro {
    display: none;
  }

  /* Khi tab active thì hiển thị */
  .show-month #m_card_month {
    display: block;
  }

  .show-self #m_card_self {
    display: block;
  }

  .show-pro #m_card_pro {
    display: block;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-31d6659 *//* ================================
   CARD NGOÀI – pastel xanh & cao hơn
================================ */
.etopik-comic {
  background: #EAF6FF;        /* pastel xanh dương rất nhẹ */
  border-radius: 32px;
  padding: 50px 24px 60px;    /* tăng chiều cao */
  min-height: 110%;           /* card cao hơn */
  
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ép widget full height */
.elementor-column .elementor-widget-wrap,
.elementor-widget-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ================================
   COMIC BUBBLE – CANH GIỮA + GỌN
================================ */
.etopik-comic .comic-wrap {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

.etopik-comic .comic-bubble {
  background: #ffffff;
  border: 3px solid #000;
  padding: 32px 28px 40px;
  border-radius: 26px;
  display: inline-flex;              /* ⚡ dùng flex để căn giữa mọi thứ */
  flex-direction: column;
  align-items: center;               /* căn giữa ngang */
  justify-content: center;           /* căn giữa dọc nội dung */

  max-width: 520px;
  width: 90%;
  text-align: center;                /* căn giữa text */
  line-height: 1.55;

  box-shadow: 8px 14px 0px #ffcedb;
  position: relative;
}

/* Đuôi bong bóng */
.etopik-comic .comic-bubble::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 22px solid #ffffff;
  filter: drop-shadow(0px 3px 0px #000);
}

/* ================================
   CTA PINK + ANIMATION
================================ */
.etopik-comic .comic-cta {
  display: inline-block;
  margin-top: 16px;
  background: #ffc9e2;
  padding: 10px 26px;
  border-radius: 18px;
  color: #d91672;
  font-weight: 800;
  font-size: 17px;

  animation: ctaBlinkPink 1.25s infinite ease-in-out;
  text-decoration: none;
}

@keyframes ctaBlinkPink {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.08); opacity: .6; }
  100% { transform: scale(1); opacity: 1; }
}

/* ================================
   PERSON IMAGE – sát đáy
================================ */
.etopik-comic .comic-person {
  width: 220px;
  margin-top: 38px;
  margin-bottom: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ================================
   MOBILE
================================ */
@media (max-width: 767px) {

  .etopik-comic {
    padding: 28px 16px 40px;
    min-height: auto;
  }

  .etopik-comic .comic-bubble {
    padding: 26px 18px 34px;
    max-width: 100%;
    border-radius: 22px;
  }

  .etopik-comic .comic-cta {
    font-size: 15px;
    padding: 8px 18px;
  }

  .etopik-comic .comic-person {
    width: 150px;
    margin-top: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-66b25c8 *//* ==== FAQ WRAPPER ==== */
.etp-faq-wrapper {
    max-width: 880px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Montserrat", sans-serif;
}

/* ==== TITLE ==== */
.etp-faq-title {
    text-align: center;
    font-size: 26px !important; /* bạn quên px — mình bổ sung */
    color: #1875FF;
    font-weight: 800;
    margin-bottom: 25px;
}

/* ==== ITEM ==== */
.etp-faq-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #d9e9ff;
    transition: 0.3s ease;
}

/* ==== QUESTION BAR ==== */
.etp-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #0c4cc9;
}

.etp-faq-icon {
    font-size: 24px;
    font-weight: 700;
    color: #0c4cc9;
    transition: 0.3s;
}

/* ==== ANSWER ==== */
.etp-faq-answer {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 10px;
    display: none;
    color: #333;
}

/* ==== OPEN STATE ==== */
.etp-faq-item.active .etp-faq-answer {
    display: block;
}

.etp-faq-item.active .etp-faq-icon {
    transform: rotate(45deg);
}

/* ==== RESPONSIVE ==== */
@media(max-width: 768px) {
    .etp-faq-title {
        font-size: 22px;
    }

    .etp-faq-question {
        font-size: 15px;
    }

    .etp-faq-answer {
        font-size: 14px;
    }
}/* End custom CSS */