/* ==================================================================================================
   Sửa giao diện MOBILE cho trang khách.

   File này CỐ Ý được nạp SAU CÙNG (sau cả /Upload/style-footer.css — file sửa được từ admincp),
   vì phần lớn lỗi mobile đến từ các rule cũ trong style-footer.css. Nạp trước là không đè được.

   Bối cảnh: điện thoại đang nhận giao diện DESKTOP (isMobile bị hardcode false, nhánh chọn view
   mobile đã bị comment từ bản cũ), nên toàn bộ trải nghiệm mobile phụ thuộc vào CSS responsive.
   ================================================================================================== */

/* --------------------------------------------------------------------------------------------
   1) SỐ ĐIỆN THOẠI BỊ RỚT DÒNG / BỊ CẮT trên thanh đỏ trên cùng

   style-footer.css đặt CHIỀU CAO CỨNG cho thanh này:
        .mb-top    { height: 30px; }
        .mb-top li { height: 25px; width: 49%; }
   Ô bên trái (69%) chứa HAI số (hotline + CSKH) và dấu gạch nối. Trên máy hẹp, tổng chiều rộng
   vượt chỗ trống -> số xuống dòng, mà height cứng thì dòng thứ hai BỊ CẮT MẤT.

   Cách sửa: bỏ chiều cao cứng, cho thanh tự giãn, và cấm số điện thoại xuống dòng giữa chừng.
   -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .mb-top {
        height: auto !important;
        min-height: 30px;
        padding: 5px 8px !important;
    }

    .mb-top ul {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
    }

    .mb-top li {
        height: auto !important;
        width: auto !important;
        padding: 0 !important;
        white-space: nowrap;   /* không cho ngắt dòng trong ô */
    }

    .mb-top li.text-left {
        flex: 1 1 auto;
        min-width: 0;          /* cho phép co lại thay vì đẩy tràn */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mb-top li:last-child {
        flex: 0 0 auto;        /* cụm cờ ngôn ngữ giữ nguyên bề rộng */
        margin-left: auto;
    }

    /* máy rất hẹp (iPhone SE ~320px): thu nhỏ chữ thay vì để số bị cắt */
    .mb-top li a {
        font-size: 13px;
    }
}

@media only screen and (max-width: 360px) {
    .mb-top li a {
        font-size: 12px;
    }
}

/* Số điện thoại KHÔNG BAO GIỜ được ngắt giữa chừng, ở bất kỳ đâu.
   PhoneInfo render số dạng "0909.783.098" — nếu ngắt dòng ở dấu chấm thì khách đọc ra số sai. */
a[href^="tel:"],
.phone,
.hotline,
.second-phone,
.box-right-footer .bf-phone-body b {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------------------------
   2) iOS TỰ PHÓNG TO TRANG khi bấm vào ô nhập

   Safari trên iPhone tự zoom khi ô input có font-size < 16px (đang có 21 chỗ như vậy).
   Zoom xong trang lệch hẳn, khách phải tự thu lại — cảm giác rất hỏng.
   Đặt 16px cho ô nhập trên mobile là cách duy nhất chặn hành vi này.
   -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------------------------
   3) TRÀN NGANG (khách phải vuốt ngang mới đọc hết)
   Nội dung bài viết nhập từ admincp thường có ảnh/iframe/bảng đặt chiều rộng cứng (600px, 768px…).
   -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    img,
    iframe,
    video,
    embed,
    object {
        max-width: 100% !important;
        height: auto;
    }

    /* iframe (bản đồ, YouTube) giữ tỉ lệ thay vì bị bóp méo */
    iframe {
        max-width: 100%;
    }

    /* bảng trong nội dung bài viết: cho cuộn ngang RIÊNG BẢNG, không đẩy cả trang tràn */
    #post-detail table,
    #landing-page table,
    .main-post table,
    .description table {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* nội dung dán từ Word hay có width cứng inline */
    .main-post [style*="width"],
    .description [style*="width"] {
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------------------------
   4) VÙNG BẤM QUÁ NHỎ
   Khuyến nghị tối thiểu 44x44px (Apple) / 48x48px (Google). Link trong menu/footer đang nhỏ hơn.
   -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .mobile-menu a,
    .footer-menu-mobile a,
    .box-right-footer .bf-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* NGOẠI LỆ: thanh đỏ số điện thoại (.mb-top) nằm BÊN TRONG .mobile-menu, nên rule ngay trên
       trúng luôn 2 link tel — display:flex làm chúng hết nằm ngang, min-height:44px đẩy thanh từ
       30px lên 44-88px, cả trang bên dưới tụt xuống. Đây là link đọc số, không phải vùng bấm menu.
       Specificity (0,1,2) > (0,1,1) nên thắng mà KHÔNG cần !important. */
    .mb-top li a {
        display: inline-block;
        min-height: 0;
        align-items: normal;
        color: #fff;
    }

    /* nút gửi form đủ to để bấm bằng ngón cái */
    .btn,
    button[type="submit"],
    input[type="submit"] {
        min-height: 44px;
    }
}

/* --------------------------------------------------------------------------------------------
   5) CỤM NÚT NỔI che mất nội dung cuối trang
   Nút nổi position:fixed nằm đè lên phần cuối bài viết / nút "Gửi" của form liên hệ.
   Chừa khoảng trống ở cuối trang đúng bằng chiều cao cụm nút.
   -------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    body {
        padding-bottom: 90px;
    }
}