.elementor-3019 .elementor-element.elementor-element-f5f1cd6{--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-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}.elementor-3019 .elementor-element.elementor-element-cd9f7ab{--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-3019 .elementor-element.elementor-element-5161483{--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-3019 .elementor-element.elementor-element-cca9254{--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-3019 .elementor-element.elementor-element-4cead0a{--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-3019 .elementor-element.elementor-element-cd6b574{--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(max-width:1024px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}}@media(max-width:767px){.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );word-spacing:var( --e-global-typography-text-word-spacing );}}/* Start custom CSS for html, class: .elementor-element-fb38fe4 *//* RESET – tránh xung đột Elementor */
.etopik-3cards, .etp-card, .etp-card * {
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}

/* ==========================
   WRAPPER 3 CARD
========================== */
.etopik-3cards {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  margin: 40px auto;
  flex-wrap: nowrap;
}

/* ==========================
   CARD
========================== */
.etp-card {
  width: 350px;
  min-height: 270px;
  background: #fff;
  border: 2px solid #8ac7ff;
  border-radius: 20px;
  padding: 26px 22px;
  text-align: center;
  text-decoration: none;

  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #0b63e6;

  box-shadow: 0 4px 12px rgba(0,80,160,0.08);
  transition: 0.28s ease;
}

/* Hover */
.etp-card:hover {
  transform: translateY(-6px);
  border-color: #0b63e6;
  box-shadow: 0 10px 20px rgba(0,80,160,0.18);
}

/* ==========================
   HÌNH NHÂN VẬT – BASE
========================== */
.etp-img {
  display: block;
  margin: 0 auto 14px;
  object-fit: contain;
}

/* ẢNH 1: VIDEO */
.img-video {
  width: 200px;
  height: 150px;
}

/* ẢNH 2: BÀI TẬP */
.img-baitap {
  width: 200px;
  height: 170px;
}

/* ẢNH 3: ĐỀ NGHE */
.img-denge {
  width: 150px;
  height: 140px;
}

/* TEXT */
.etp-card p {
  font-size: 22px;
  font-weight: 800;
  margin-top: 10px;
  color: #0b63e6;
}
/* ==========================
   MOBILE RESPONSIVE — FIX ĐẸP
========================== */
@media (max-width: 768px) {

  .etopik-3cards {
    flex-direction: column;
    gap: 18px;
    align-items: center;
    padding: 0 14px;
  }

  .etp-card {
    width: 100%;
    max-width: 380px;
    padding: 22px 16px;
    min-height: 200px;      /* giảm chiều cao để không bị quá dài */
    border-radius: 18px;
  }

  /* ICON – để đẹp tỉ lệ mobile */
  .img-video {
    width: 135px;
    height: 105px;
  }

  .img-baitap {
    width: 135px;
    height: 120px;
  }

  .img-denge {
    width: 120px;
    height: 110px;
  }

  /* TEXT */
  .etp-card p {
    font-size: 18px;
    margin-top: 6px;
  }
}
.etp-card,
.etp-card p,
.etp-card * {
    font-family: "Montserrat", sans-serif !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-721bec9 */@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&display=swap');

.etp-monitor {
  padding: 40px 60px;
  background: #f6f9ff;
  border-radius: 22px;
  font-family: 'Montserrat', sans-serif;
}

/* ===== TITLE (Bản A – phát sáng, gấp gáp) ===== */
.etp-title {
  text-align: center;
  font-size: 48px;
  font-weight: 900;
  color: #ff6a00;

  animation:
    urgencyPulse 1.15s infinite ease-in-out,
    glowPulse 1.45s infinite ease-in-out;

  margin-bottom: 35px;
}

@keyframes urgencyPulse {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.04); }
  40%  { transform: scale(0.97); }
  60%  { transform: scale(1.05); }
  80%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@keyframes glowPulse {
  0% {
    text-shadow:
      0 0 8px rgba(255,140,0,0.7),
      0 0 18px rgba(255,100,0,0.55);
  }
  50% {
    text-shadow:
      0 0 14px rgba(255,180,0,1),
      0 0 34px rgba(255,120,0,0.75);
  }
  100% {
    text-shadow:
      0 0 8px rgba(255,140,0,0.7),
      0 0 18px rgba(255,100,0,0.55);
  }
}

/* ===== LAYOUT ===== */
.etp-flex {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* ===== LEFT SIDE ===== */
.etp-left {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===== BUBBLE ===== */
.speech-bubble {
  background: #ffe680;
  padding: 18px 22px;
  border-radius: 20px;
  font-size: 22px;
  font-weight: 800;
  color: #222;
  position: relative;
  max-width: 260px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  margin-bottom: 12px;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 36px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 16px solid #ffe680;
}

/* GIRL IMG */
.girl-img {
  width: 200px;
  margin-top: 6px;
}

/* ===== CHATBOX ===== */
.etp-chatbox {
  flex: 1;
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  min-height: 380px;
  width: 100%;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Chat label */
.chat-label {
  font-size: 12px;
  opacity: .6;
  margin-bottom: -6px;
  margin-left: 4px;
}

/* Chat bubble */
.chat-bubble {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 14px;
  line-height: 1.45;
  font-size: 15px;
  animation: fadeInUp .4s ease;
}

.chat-etp {
  background: #0b63e6;
  color: white;
  align-self: flex-start;
}

.chat-stu {
  background: #e7f0ff;
  color: #06203a;
  align-self: flex-end;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .etp-flex { flex-direction: column; }

  .etp-left { width: 100%; }

  .girl-img { width: 170px; }

  .speech-bubble { max-width: 230px; }

  .etp-chatbox { margin-top: 20px; }
}
/* ==== ĐẨY TIÊU ĐỀ LÊN CAO HƠN ==== */
.etp-monitor {
  padding-top: 10px !important; /* trước là 40px → kéo lên cao */
}

/* Hoặc muốn cao nữa thì dùng: */
/* .etp-title { margin-top: 0px !important; } */


/* ===== MOBILE FIX FULL WIDTH + FIXED HEIGHT ===== */
@media (max-width: 768px) {

  /* Khung ngoài full width */
  .etp-chatbox {
    width: 100% !important;
    background: #ffffff;
    border-radius: 18px;

    /* KHUNG CỐ ĐỊNH KHÔNG NỞ */
    height: 480px !important;   /* bạn muốn cao hơn → đổi 500, 550 tùy ý */
    overflow: hidden !important;

    padding: 20px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  }

  /* Khung trong chạy scroll */
  .chat-messages {
    height: 100% !important;
    overflow-y: auto !important;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Bubble rộng hơn chút */
  .chat-bubble {
    max-width: 95% !important;
    font-size: 16px;
    line-height: 1.45;
  }
}/* End custom CSS */