/* =========================================================
 *  Trang "Về chúng tôi" — about1_items (mobile)
 *  Không dùng slider nữa: nội dung nằm dọc xuống theo DOM gốc.
 *  Web dùng 1rem = 20px.
 * ========================================================= */
@media (max-width: 849px) {
    .about1_item > span {
        display: none;
    }
    .about1 .about1_item {
        padding-bottom: 0;
    }
}

/* =========================================================
 *  Section 3 — điểm trên ảnh (.cac_diem .diem)
 *  Thay thẻ <title> (không render <br>) bằng .diem-tip.
 *  Desktop: hover hiện tooltip. Mobile: ẩn tooltip, click mở Fancybox.
 * ========================================================= */
.cac_diem .diem .diem-tip {
    display: block;
    position: absolute;
    left: 1rem;
    background: #09AEEA;
    color: #fff;
    width: 8rem;
    font-size: .8rem;
    padding: .5rem;
    border-radius: .5rem;
    line-height: 1.2;
    opacity: 0;
    transition: .5s all;
    pointer-events: none;
    z-index: 2;
}
.cac_diem .diem:hover .diem-tip {
    opacity: 1;
}
section.about2 {
    padding-top: 3rem;
}
@media (max-width: 849px) {
    .cac_diem .diem {
        cursor: pointer;
    }
    /* mobile: không dùng tooltip hover, dùng Fancybox khi click */
    .cac_diem .diem .diem-tip {
        display: none;
    }
}

/* nội dung trong Fancybox (mobile) */
.diem-fancybox {
    background: #09AEEA;
    color: #fff;
    padding: 1.5rem 2rem;
    border-radius: .8rem;
    font-size: 1rem;
    line-height: 1.3;
    text-align: center;
    max-width: 80vw;
}

/* =========================================================
 *  Section 1 (.about1) — hiệu ứng vào trang:
 *  giọt sữa rơi từ trên xuống (nảy nhẹ khi đáp), rồi
 *  tiêu đề + mô tả hiện dần lên theo thứ tự.
 * ========================================================= */
.about1 .giot_sua img {
    opacity: 0;
    transform: translateY(-4rem) scale(.4);
    transition: transform 1.5s cubic-bezier(.34, 1.56, .64, 1), opacity .45s ease;
    transition-delay: .5s;
}
.about1 .about1_box h2.font2,
.about1 .about1_box .content {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: transform .6s ease, opacity .6s ease;
}

/* khi section vào viewport (JS thêm class .about1-inview) */
.about1.about1-inview .giot_sua img {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.about1.about1-inview .about1_box h2.font2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .7s;
}
.about1.about1-inview .about1_box .content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .9s;
}

/* 3 box thống kê (.about1_item) — hiện lần lượt fade-up từng cái */
.about1 .about1_item {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity .6s ease, transform .6s ease;
}
.about1.about1-inview .about1_item {
    opacity: 1;
    transform: translateY(0);
}
.about1.about1-inview .about1_item:nth-child(1) {
    transition-delay: .5s;
}
.about1.about1-inview .about1_item:nth-child(2) {
    transition-delay: .6s;
}
.about1.about1-inview .about1_item:nth-child(3) {
    transition-delay: .7s;
}

/* =========================================================
 *  Section 8 (.about8_slider) — dots + arrow mobile, nằm dưới slider
 *  (không lồng trong .about8_slider để tránh bị overflow:hidden cắt).
 * ========================================================= */
.about8-nav-mobile {
    margin-top: 1.25rem;
}

.about8-pagi.swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.417rem;
}

@media (max-width: 849px) {
    .about8-pagi.swiper-pagination {
        position: unset !important;
        transform: unset !important;
    }
}

.about8-pagi .swiper-pagination-bullet {
    width: .5rem;
    height: .5rem;
    opacity: .3;
    margin: 0 !important;
    border-radius: 5rem;
    border: 1px solid var(--main-cl);
    background: transparent;
    transition: all .4s;
}

.about8-pagi .swiper-pagination-bullet:hover,
.about8-pagi .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--main-cl);
}

/* =========================================================
 *  Section 12 (.about12) — nút slider dùng style theme (.arrow-slide)
 *  Trên màn nhỏ kéo mũi tên vào trong cho khỏi tràn.
 * ========================================================= */
@media (max-width: 1280px) {
    .about12 .arrow-absolute > .arrow-slide.prev {
        left: 0;
    }
    .about12 .arrow-absolute > .arrow-slide.next {
        right: 0;
    }
}

/* =========================================================
 *  Banner "Về chúng tôi" (Option 2 — s1_banner_enable)
 *  Tái dùng khung .item-banner-hero/.cont-absolute của banner
 *  trang chủ, chỉ đổi thành căn giữa + nới rộng khối nội dung
 *  cho vừa tiêu đề phụ + mô tả.
 * ========================================================= */
.about-banner .cont-absolute {
    text-align: center;
}

.about-banner .cont-absolute > .inner {
    max-width: 36rem;
    margin: 0 auto;
}

.about-banner .banner-subtitle {
    font-family: Momo Trust Display;
    font-size: 1.6rem;
    font-weight: 700;
    margin: .5rem 0 0;
}

.about-banner .content {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.4;
}

.about-banner .btn {
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 849px) {
    .about-banner .cont-absolute > .inner {
        max-width: 90%;
    }
    .about-banner .banner-subtitle {
        font-size: 1.1rem;
    }
}

/* =========================================================
 *  Section 3 (.about3_item .title) — tắt hiệu ứng đếm số (đã bỏ
 *  class "counter" trong template). Mặc định giữ nguyên màu chữ gốc
 *  (luôn nhìn thấy được); khi HOVER vào .title mới hiện lớp phủ
 *  gradient (giống màu h1.title_page), fill từ từ từ dưới lên bằng
 *  clip-path trên 1 lớp overlay (::after, nội dung nhân đôi qua
 *  data-text) — không đụng tới lớp chữ gốc nên không bao giờ mất chữ.
 * ========================================================= */
.about3_item .number-gradient,
.about3_item .don_vi {
    position: relative;
    display: inline-block;
}

.about3_item .number-gradient::after,
.about3_item .don_vi::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    white-space: nowrap;
    background: linear-gradient(180deg, #09AEEA 29.33%, #0C81B2 55.58%, #103E60 84.51%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.about3_item .title:hover .number-gradient::after,
.about3_item .title:hover .don_vi::after {
    clip-path: inset(0 0 0 0);
}

.about3_wrap {
    position: relative;
    z-index: 2;
}

.about3_lists {
    position: relative;
    z-index: 2;
}

/* =========================================================
 *  Section 8 (.about8_slider) — override chiều cao cố định của
 *  bản slider dọc 1 item cũ (frontend.css), chuyển sang ngang
 *  3 item/màn hình (desktop), tự co giãn theo nội dung.
 * ========================================================= */
.about8 .about8_slider {
    height: auto;
}

.about8 .about8_slider .swiper-slide {
    height: auto;
    display: block;
}

/* Section 8 (.about8_item b) — phần đơn vị trong [] (tt_bracket_to_span,
   functions/functions.php) hiện nhỏ hơn số chính. */
.about8_item b span {
    font-size: 1.2rem;
}

/* .about8_item .content (frontend.css dòng ~7427, max-width: 15rem) — tăng lên 18rem. */
.about8_item .content {
    max-width: 18rem;
    margin: auto;
}

/* =========================================================
 *  Section 11 (.about11_wrap) — mỗi tab (.about11_nav li) có ảnh
 *  riêng, hover đổi tab cũng đổi ảnh theo (assets/js/about.js).
 *  .about11_img giữ nguyên size/flex-center cũ (frontend.css),
 *  giờ chứa nhiều .about11_img_item, chỉ 1 hiện tại 1 thời điểm.
 * ========================================================= */
.about11_img_item {
    height: 100%;
}

.about11_img_item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}

/* about1_item: giữ khoảng trắng người dùng nhập ở đơn vị (flex làm co khoảng trắng đầu) */
.about1_item .number .don_vi {
    white-space: pre;
}

@media only screen and (max-width: 767px) {
    section.about2 {
        padding-top: 1rem;
    }
}

/* Ảnh trang trí .about10 nhập từ admin (s10_deco_img) — trống thì giữ ảnh mặc định trong frontend.css */
section.about10[style*="--about10-deco"]:before {
    background-image: var(--about10-deco);
}