/* ============================================================
   MONA — Tinh chỉnh UI/UX responsive
   Ngày: 29/08/2026
   Cập nhật: 02/09/2026
   Lý do: theme education-zone đặt .box-* height:305px + overflow:hidden
          ở MỌI khổ màn, nên trên mobile ảnh 359px đẩy tiêu đề và mô tả
          ra ngoài vùng cắt -> chỉ còn thấy ảnh. Kèm theo cỡ chữ desktop
          giữ nguyên ở mobile làm trang dài gấp đôi.
   ============================================================ */

/* --- Desktop/tablet polish: giữ theme, giảm cảm giác template --- */
.banner .banner-text .text {
  max-width: 720px;
}

.featured-courses .image-holder,
.thumb-text li > div,
.choose-us .row > .col,
.welcome-note .row > .col {
  border-radius: 8px;
}

.featured-courses .container > ul,
.thumb-text {
  list-style: none;
}

.latest-events .learn-more,
.featured-courses ul li .image-holder .description .learn-more {
  border-radius: 6px;
}

@media only screen and (max-width: 767px) {

  html { -webkit-text-size-adjust: 100%; }

  /* --- 1. Khối "Chương trình" (#info): 4 hàng dọc -> lưới 2x2, hiện lại chữ --- */
  .thumb-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0 15px;
  }
  .thumb-text li {
    width: auto;
    margin-left: 0;
    display: block;
  }
  .thumb-text li .box-1,
  .thumb-text li .box-2,
  .thumb-text li .box-3,
  .thumb-text li .box-4 {
    height: auto;          /* bỏ 305px cứng -> hết cắt chữ */
    min-height: 100%;
    overflow: visible;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(10, 44, 94, .08);
  }
  .thumb-text li span { margin-bottom: 12px; }
  .thumb-text li img {
    width: 100%;
    height: 104px;
    object-fit: cover;
    border-radius: 6px;
  }
  .thumb-text li h3 { margin-bottom: 8px; }
  .thumb-text li h3 a { font-size: 16px; line-height: 1.3; }
  .thumb-text li p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
  }

  /* --- 2. Cỡ chữ hợp khổ điện thoại --- */
  body { font-size: 16px; line-height: 1.55; }
  .section-title {
    font-size: 25px;
    line-height: 1.25;
    margin-bottom: 12px;
  }
  .banner .banner-text .text .title {
    font-size: 23px;
    line-height: 1.24;
    margin-bottom: 14px;
  }
  .banner .banner-text .text span { font-size: 17px; }
  .banner .banner-text .text p {
    font-size: 15px;
    line-height: 1.55;
  }

  /* --- 3. Header: đã có logo thì không lặp lại tên bằng chữ --- */
  /* Ẩn theo kiểu screen-reader: vẫn còn cho SEO và trình đọc màn hình */
  .site-branding .site-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .mobile-header {
    padding: 8px 0 !important;
    box-shadow: 0 6px 18px rgba(10, 44, 94, .08);
  }

  .mobile-header .container {
    min-height: 58px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mobile-header .site-branding {
    align-items: center;
    height: auto;
    max-width: calc(100% - 46px);
  }

  .mobile-header .img-logo,
  .mobile-header .custom-logo-link {
    display: block;
    line-height: 0;
    max-width: 168px;
    width: 168px;
  }

  .mobile-header .custom-logo {
    display: block;
    height: auto;
    max-height: 52px;
    max-width: 168px;
    width: auto;
  }

  .mobile-header .text-logo {
    display: none !important;
  }

  .mobile-header .menu-opener {
    top: 19px;
    right: 15px;
  }

  /* --- 3b. Hero: giảm chiều cao, giữ CTA trên màn đầu --- */
  .banner,
  .banner.static-banner {
    min-height: 0;
  }

  .banner .wp-custom-header img {
    height: 236px;
    object-fit: cover;
  }

  .banner .banner-text {
    padding: 24px 15px 88px;
  }

  .banner .banner-text .container {
    padding-left: 0;
    padding-right: 0;
  }

  .banner .banner-text .btn-holder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .banner .banner-text .btn-holder a {
    flex: 1 1 136px;
    min-height: 44px;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 12px !important;
    text-align: center;
    white-space: normal;
    border-radius: 6px;
  }

  /* --- 4. Thanh nút Gọi / Zalo: gọn 1 dòng, không che nội dung --- */
  .mona-floating {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    gap: 8px !important;
    padding: 0;
  }
  .mona-floating a {
    min-height: 42px;
    padding: 10px 8px;
    font-size: 13px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(10, 44, 94, .16);
  }
  body { padding-bottom: 68px; }
  body.home { padding-bottom: 0; }
  body.home .mona-floating { display: none !important; }

  /* --- 5. "Chương trình nổi bật": 4 ảnh vuông xếp dọc -> lưới 2 cột --- */
  .featured-courses .container > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
    padding: 0;
  }
  .featured-courses .container > ul > li {
    width: auto;
    margin: 0;
    float: none;
    display: block;
  }
  .featured-courses .image-holder {
    height: 100%;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 24px rgba(10, 44, 94, .08);
  }
  .featured-courses .image-holder img {
    width: 100%;
    height: 116px;
    object-fit: cover;
    display: block;
  }
  .featured-courses .image-holder .text {
    display: none !important;
  }
  .featured-courses ul li .image-holder .description {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
    min-height: 178px;
    padding: 12px !important;
    background: #fff !important;
    color: #5B6472 !important;
    text-align: left;
  }
  .featured-courses ul li .image-holder .description h2 {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.3;
  }
  .featured-courses ul li .image-holder .description h2 a {
    color: #0A2C5E !important;
  }
  .featured-courses ul li .image-holder .description p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 10px;
    color: #5B6472;
    font-size: 13px;
    line-height: 1.45;
  }
  .featured-courses ul li .image-holder .description .learn-more {
    padding: 8px 10px !important;
    font-size: 12px;
    line-height: 1.2;
  }

  /* --- 6. "Vì sao phụ huynh chọn Mona": 4 cột dọc -> lưới 2 cột --- */
  .choose-us .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
  .choose-us .row > .col {
    width: auto;
    margin: 0;
    float: none;
  }
  .choose-us .row > .col img { width: 84px; height: 84px; }
  .choose-us .row > .col h3 a { font-size: 15px; line-height: 1.3; }
  .choose-us .row > .col p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
  }

  /* --- 7. Bốn ô số liệu -> lưới 2 cột --- */
  .welcome-note .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .welcome-note .row > .col {
    width: auto;
    margin: 0;
    float: none;
  }

  /* --- 8. Đoạn văn dài: siết khoảng cách giữa các đoạn --- */
  .welcome-note .header-part p { margin-bottom: 16px; }

  /* --- 9. Tin tức: bớt kéo dài trên mobile, ưu tiên bài chính + danh sách gọn --- */
  .latest-events .post {
    border-radius: 8px;
    overflow: hidden;
  }

  .latest-events .right .post,
  .latest-events .right ul li {
    padding-top: 12px;
    padding-bottom: 12px;
  }

}

@media only screen and (max-width: 420px) {
  .thumb-text,
  .featured-courses .container > ul,
  .choose-us .row,
  .welcome-note .row {
    gap: 10px;
  }

  .mobile-header .img-logo,
  .mobile-header .custom-logo-link,
  .mobile-header .custom-logo {
    max-width: 148px;
  }

  .banner .wp-custom-header img {
    height: 220px;
  }

  .featured-courses ul li .image-holder .description {
    min-height: 190px;
  }

  .mona-floating a {
    font-size: 12px;
  }

}