/* ==========================================================================
   ENGUP — TỐI ƯU ĐIỆN THOẠI (dùng chung cho toàn bộ trang)
   Nạp SAU cùng để đè lên CSS có sẵn. Không đổi giao diện trên máy tính.
   Cập nhật: 27/07/2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NỀN TẢNG — chặn tràn ngang & khóa cỡ chữ
   Trên iPhone, khi xoay ngang màn hình Safari tự phóng to chữ. Dòng dưới khóa lại.
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
    max-width: 100%;
    /* Cuộn mượt như ứng dụng gốc trên iOS */
    -webkit-overflow-scrolling: touch;
}

/* Không cho phần tử nào đẩy trang rộng ra gây kéo ngang */
img, video, iframe, canvas, svg, table, pre, code {
    max-width: 100%;
}

/* Từ tiếng Anh dài (ví dụ "pronunciation") không làm vỡ khung trên màn hình hẹp */
h1, h2, h3, h4, p, li, td, th, span, div, label, button, a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   2. CẢM ỨNG — bỏ ô xám khi chạm & bỏ độ trễ 300ms
   -------------------------------------------------------------------------- */
* {
    -webkit-tap-highlight-color: transparent;
}
a, button, [role="button"], input[type="submit"], input[type="button"],
label, select, summary, .btn, .chip, .tab, .card-clickable {
    touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   3. Ô NHẬP LIỆU — chống iPhone tự phóng to trang
   iOS Safari tự zoom khi chạm vào ô có cỡ chữ dưới 16px, và KHÔNG tự thu lại.
   Đây là lỗi khó chịu nhất trên form đăng ký.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    input[type="text"], input[type="tel"], input[type="email"],
    input[type="password"], input[type="number"], input[type="search"],
    input[type="date"], input:not([type]), textarea, select {
        font-size: 16px !important;
    }
}

/* Ô nhập cao đủ để ngón tay bấm trúng */
@media (max-width: 760px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea, select {
        min-height: 46px;
    }
    textarea { min-height: 88px; }
}

/* Ô tích to hơn cho dễ bấm */
input[type="checkbox"], input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
}

/* --------------------------------------------------------------------------
   4. VÙNG BẤM — tối thiểu 44px theo chuẩn Apple
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    button, .btn, a.btn, input[type="submit"], input[type="button"],
    .btn-submit, .arrow-btn, .scramble-btn, .btn-reset {
        min-height: 44px;
    }
    /* Nút tròn nhỏ (mũi tên, đóng) — nới vùng bấm mà không đổi kích thước nhìn thấy */
    .arrow-btn, .close-btn, .icon-btn {
        min-width: 44px;
    }
}

/* --------------------------------------------------------------------------
   5. iPHONE TAI THỎ — chừa lề an toàn cho thanh cố định
   Không có phần này, nút cố định ở đáy bị thanh vuốt của iPhone che mất.
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
    .sticky-bottom, .fixed-bottom, .bottom-bar, .cta-fixed, #sticky-footer {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .header-chat-btn, .chat-fab, .fab {
        bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
    }
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* --------------------------------------------------------------------------
   6. HIỆU ỨNG DI CHUỘT — tắt trên màn hình cảm ứng
   Trên điện thoại, hiệu ứng hover bị "dính" lại sau khi chạm, trông như lỗi.
   -------------------------------------------------------------------------- */
@media (hover: none) {
    a:hover, button:hover, .btn:hover, .card:hover, .chip:hover {
        transform: none !important;
    }
    /* Vẫn giữ phản hồi khi ngón tay đang nhấn xuống */
    a:active, button:active, .btn:active {
        opacity: .85;
        transform: scale(.98);
    }
}

/* --------------------------------------------------------------------------
   7. BẢNG BIỂU — cuộn ngang thay vì vỡ khung
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .table-wrap, .scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   8. HỘP THOẠI / MODAL — vừa màn hình, cuộn được, không bị bàn phím che
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .modal-content, .modal-box, .popup-content, .chat-box {
        max-height: 88vh;
        max-height: 88dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   9. GIẢM CHUYỂN ĐỘNG — tôn trọng cài đặt của người dùng, đỡ tốn pin
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   10. MÀN HÌNH RẤT NHỎ (iPhone SE, máy Android giá rẻ — 320-360px)
   Nhóm phụ huynh ở tỉnh dùng nhiều máy loại này.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    body { font-size: 15px; }
    h1 { font-size: clamp(22px, 6.5vw, 28px) !important; }
    h2 { font-size: clamp(19px, 5.5vw, 23px) !important; }
    .wrap, .container, .sec { padding-left: 14px !important; padding-right: 14px !important; }
    .flex-row { flex-direction: column !important; gap: 0 !important; }
}

/* --------------------------------------------------------------------------
   11. IN ẤN — phụ huynh in Học bạ / giấy khen cho con
   -------------------------------------------------------------------------- */
@media print {
    .no-print, nav, .site-nav, .header-chat-btn, .fab, button, .btn { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   PHẦN 12 — BỔ SUNG 08/2026
   Sửa: trang chủ bể trên di động, Học bạ không đọc được số điểm,
        bảng biểu 4 cột bị bóp nát trên màn hình hẹp.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 TRANG CHỦ — chặn tràn ngang khi CHƯA ĐĂNG NHẬP
   Nguyên nhân bể: lưới 4 cột (.usp-grid, .footer-grid, .pricing-grid) và
   khối hero 2 cột không co lại dưới 380px vì các ô con có chiều rộng tối thiểu.
   min-width:0 cho phép ô con thu nhỏ hơn nội dung -> hết tràn.
   -------------------------------------------------------------------------- */
.container, .hero, .sec, .footer, .free-section, .faq-card { max-width: 100%; }

.hero > *, .usp-grid > *, .footer-grid > *, .pricing-grid > *,
.free-cards > *, .testi-grid > *, .class-shelf > *, .trust-strip > * {
    min-width: 0;
}

@media (max-width: 900px) {
    .container { padding-left: 0; padding-right: 0; }
    .hero { gap: 18px; }
    .hero-visual { width: 100%; overflow: hidden; }
    .hv-panel { padding: 18px 14px 22px; }
}

@media (max-width: 600px) {
    body { padding: 10px !important; }
    .header { flex-direction: column; align-items: stretch; gap: 12px; }
    .header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .header-actions .btn, .header-actions a.btn { flex: 1 1 auto; justify-content: center; }
    .hero { padding: 20px 16px !important; }
    .hero h1, .hero-title { font-size: clamp(21px, 6.4vw, 30px) !important; line-height: 1.25; }
    .sec-head-center h2 { font-size: clamp(19px, 5.6vw, 26px) !important; }
    .trust-strip { flex-wrap: wrap; gap: 12px; justify-content: center; }
    .footer { padding: 24px 18px 16px !important; }
    /* Nút nổi không đè lên nội dung cuối trang */
    .footer { margin-bottom: 76px; }
}

@media (max-width: 380px) {
    .brand-tag { display: none; }           /* dòng phụ dài làm vỡ hàng logo */
    .hv-panel::before { display: none; }    /* vòng tròn trang trí tràn mép */
}

/* --------------------------------------------------------------------------
   12.2 HỌC BẠ — hiện rõ số điểm của bé trên điện thoại
   Trước đây bảng 4 cột bị ép nhỏ, cột "Kết Quả" bị đẩy khuất khỏi màn hình.
   Dưới 760px bảng đổi sang dạng THẺ: mỗi dòng là một khối, có nhãn phía trước,
   điểm số in to ở dưới cùng -> phụ huynh nhìn phát thấy ngay.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    /* Ghi đè quy tắc mục 7 (table{white-space:nowrap}) vốn làm bảng Học bạ bị cắt */
    .hocba-table { display: block; white-space: normal; overflow: visible; }
    .hocba-table thead { display: none; }
    .hocba-table tbody { display: block; }

    .hocba-table tr {
        display: block;
        background: #fff;
        border: 1.5px solid #E2E8F0;
        border-radius: 14px;
        padding: 12px 14px;
        margin: 10px;
        box-shadow: 0 2px 0 #E2E8F0;
    }

    .hocba-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: none;
        padding: 5px 0;
        text-align: left !important;
        white-space: normal;
        font-size: 14px;
    }

    /* Nhãn cột sinh tự động bằng CSS (bảng đã bỏ thead trên di động) */
    .hocba-table td:nth-of-type(1)::before { content: "Unit"; }
    .hocba-table td:nth-of-type(2)::before { content: "Bài học"; }
    .hocba-table td:nth-of-type(3)::before { content: "Thời gian"; }
    .hocba-table td:nth-of-type(4)::before { content: "Kết quả"; }
    .hocba-table td::before {
        flex-shrink: 0;
        font-size: 11.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #64748B;
    }

    /* Dòng điểm: tách riêng, chữ to, dễ thấy nhất trong thẻ */
    .hocba-table td:nth-of-type(4) {
        border-top: 1px dashed #CBD5E1;
        margin-top: 6px;
        padding-top: 10px;
    }
    .hocba-table td:nth-of-type(4) .score-badge-high,
    .hocba-table td:nth-of-type(4) .score-badge-mid,
    .hocba-table td:nth-of-type(4) .score-badge-low {
        font-size: 15px;
        padding: 7px 15px;
    }

    .class-header-title { font-size: 15px; padding: 12px 14px; }
    .unit-count { margin-left: 0; width: 100%; text-align: center; }
    .hocba-class-section { border-radius: 14px; }
}

/* Hộp thoại Học bạ chiếm gần trọn màn hình để xem được nhiều dòng */
@media (max-width: 760px) {
    #hocBaModal .modal-card,
    .modal-overlay .modal-card {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 18px;
        padding: 18px 14px;
    }
    .modal-overlay { padding: 8px; align-items: flex-start; }
    .modal-header h2 { font-size: 19px; }
}

/* --------------------------------------------------------------------------
   12.3 NÚT ĐÓNG HỘP THOẠI — luôn thấy được, không phải cuộn xuống đáy mới tắt
   -------------------------------------------------------------------------- */
.modal-x {
    position: absolute; top: 10px; right: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    background: #F1F5F9; border: 1.5px solid #E2E8F0; color: #334155;
    font-size: 22px; line-height: 1; cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: #E2E8F0; }
.modal-card { position: relative; }