/* ================= THIẾT LẬP CHUNG ================= */
html, body {
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #f4f5f7;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

/* ================= HEADER & BANNER ================= */
.header-banner {
    background: linear-gradient(to right, #7f0000, #b71c1c, #d32f2f);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.banner-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 5px solid #ffc107;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
    margin-right: 30px;
    z-index: 2;
}

.banner-content {
    z-index: 2;
    text-align: center;
    flex: 1;
}

.banner-title {
    color: #ffda75;
    font-size: 42px;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    margin-bottom: 5px;
}

.banner-hotline {
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
}

.banner-slogan {
    color: #ffc107;
    font-size: 18px;
    font-style: italic;
}

/* ================= MENU NAVBAR ================= */
.main-nav {
    background-color: #7f0000;
    display: flex;
    border-bottom: 3px solid #ffc107;
}

.main-nav a {
    color: white;
    padding: 15px 25px;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    border-right: 1px solid #b71c1c;
    transition: 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
    background-color: #b71c1c;
    color: #ffc107;
}

/* ================= BỐ CỤC 3 CỘT ================= */
.main-wrapper {
    display: flex;
    padding: 15px;
    gap: 15px;
}

.col-left { width: 20%; }
.col-main { width: 60%; }
.col-right { width: 20%; }

/* ================= BOX SIDEBAR ================= */
.sidebar-box {
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.box-title {
    background-color: #b71c1c;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
}

.box-content, .sidebar-list {
    padding: 10px;
    background: #fff;
}

.menu-list li a, .sidebar-list li a {
    display: block;
    padding: 8px 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 14px;
    transition: 0.2s;
    color: #333;
}

.menu-list li a:hover, .sidebar-list li a:hover {
    color: #d32f2f;
    background: #ffebee;
    padding-left: 15px;
    font-weight: bold;
}

/* ================= KHU VỰC TÌM KIẾM ================= */
.search-section {
    background-color: #d32f2f;
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.search-group {
    display: flex;
    margin-bottom: 0;
}

.search-group input {
    flex: 1;
    padding: 12px 15px;
    font-size: 16px;
    border: 2px solid #fff;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-group button {
    background-color: #ffc107;
    color: #333;
    border: 2px solid #ffc107;
    padding: 0 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    transition: 0.3s;
}

.search-group button:hover {
    background-color: #ffca28;
    transform: scale(1.02);
}

/* ================= HỘP HƯỚNG DẪN TÌM KIẾM (DROPDOWN NHỎ XINH) ================= */
.search-guide-box {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 20px;
    width: calc(100% - 40px);
    max-width: 450px;
    background: #ffffff;
    color: #333333;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 10px 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    z-index: 999;
}

.search-guide-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-guide-box li {
    font-size: 12.5px;
    color: #444;
    line-height: 1.5;
    margin-bottom: 4px;
}

.search-guide-box li:last-child {
    margin-bottom: 0;
}

/* ================= BỘ LỌC SIM (Đã di chuyển lên trên phần @media để chuẩn luồng) ================= */
.sim-filter-box {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
    border-top: 4px solid #b71c1c;
}

.filter-dropdown {
    flex: 1;
    min-width: 150px;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background-color: #f8f9fa;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b71c1c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    transition: all 0.2s ease-in-out;
}

.filter-dropdown:hover {
    background-color: #ffffff;
    border-color: #b71c1c;
    box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.15);
}

/* ================= BẢNG SIM ================= */
.sim-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.sim-table th {
    background-color: #b71c1c;
    color: white;
    padding: 14px 10px;
    font-size: 14px;
    border: 1px solid #e0e0e0;
    text-transform: uppercase;
}

.sim-table td {
    padding: 12px 10px;
    border: 1px solid #e0e0e0;
    font-size: 14px;
    vertical-align: middle;
}

.sim-table tr:nth-child(even) { background-color: #fafafa; }
.sim-table tr:hover { background-color: #ffebee; }

/* TÔ MÀU SỐ SIM TRÊN DESKTOP (Nửa đầu xanh, nửa đuôi đỏ) */
.sim-number {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.sim-prefix { color: #16835b; } /* Xanh lá đậm */
.sim-tail { color: #d32f2f; } /* Đỏ nổi bật */

.sim-price { font-weight: bold; color: #2e7d32; }

/* MÀU SẮC NHÀ MẠNG TRÊN DESKTOP */
.sim-network { font-weight: 700; }
.sim-network.net-viettel, .sim-network:has(.net-viettel) { color: #d71920; }
.sim-network.net-mobi { color: #1565a8; }
.sim-network.net-vina { color: #03a9f4; }
.sim-network.net-vnm { color: #f58220; }
.sim-network.net-gmobile { color: #d4a017; }
.sim-network.net-itelecom { color: #702082; }

/* Desktop giữ nguyên tên nhà mạng; badge chỉ hiện trên mobile. */
.network-badge { display: none; }
.network-label { display: inline; }

.btn-buy {
    color: #fff;
    background: #d32f2f;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 4px;
    transition: 0.2s;
}

.btn-buy:hover {
    background: #b71c1c;
    transform: translateY(-2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.table-message { padding: 30px !important; text-align: center; color: #666; }
.table-error { color: #b71c1c; white-space: normal; word-break: break-word; font-weight: bold; }
#loading { display: none; text-align: center; padding: 20px; color: #d32f2f; font-weight: bold; }


#duLieuSim tr.sim-message-row {
    background: transparent !important;
}

.message-cell {
    padding: 20px 15px !important;
    text-align: center !important;
    font-size: 16px !important;
    border: none !important;
}

.loading-message {
    color: #555;
}

.error-message {
    color: #d9534f;
    font-weight: bold;
}
/* ================= FLOATING BUTTONS ================= */
.floating-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
}

.float-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.float-btn:hover { transform: scale(1.1); color: white;}
.btn-phone { background-color: #d32f2f; }
.btn-zalo { background-color: #0084ff; }

/* ================= PHÂN TRANG ================= */
.pagination-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.pagination-summary { width: 100%; text-align: center; font-weight: 700; margin-bottom: 10px; }
.pagination-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.page-btn {
    padding: 8px 15px;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: 0.2s;
    font-weight: bold;
}

.page-btn:hover { background: #ffebee; color: #b71c1c; border-color: #ffc107; }
.page-btn.active { background: #ffc107; color: #333; border-color: #ffc107; }
.page-btn:disabled { opacity: .45; cursor: not-allowed; }
.page-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }

/* ================= ẢNH SIM CARD ================= */
.sim-card-area { width: 100%; }

.sim-card-preview {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #f4f5f7; 
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
    line-height: 0;
}

.sim-card-preview[hidden] { display: none !important; }
.sim-card-preview img { display: block; width: 100%; height: auto; }

.sim-card-number {
    position: absolute;
    left: 50%;
    width: 72%;
    transform: translate(-50%, -50%);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.45);
}


/* ================= RESPONSIVE VÀ MOBILE (Đặt dưới cùng để không bị lỗi ghi đè) ================= */
@media (max-width: 900px) {
    .main-wrapper { flex-wrap: wrap; }
    .col-main { width: 100%; order: 1; }
    .col-left, .col-right { width: calc(50% - 8px); order: 2; }
}

@media (max-width: 768px) {
    .search-section { padding: 10px !important; margin-bottom: 10px !important; }
    .search-group { margin-bottom: 5px !important; }
    .search-group input { padding: 6px 8px !important; font-size: 14px !important; min-width: 0 !important; }
    .search-group button { padding: 0 12px !important; font-size: 14px !important; }
    .search-guide-box { left: 10px; width: calc(100% - 20px); }

    /* BỘ LỌC 2 CỘT CHUẨN XÁC CHO MỌI ĐIỆN THOẠI */
    .sim-filter-box {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        background-color: #ffffff !important;
        padding: 10px !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        border-top: 4px solid #b71c1c !important;
        border-radius: 8px !important;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
    }

    .sim-filter-box .filter-dropdown {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 7px 25px 7px 9px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #444 !important;
        background-color: #f8f9fa !important;
        border: 1px solid #e1e4e8 !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23b71c1c%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 8px top 50% !important;
        background-size: 10px auto !important;
    }

    #btn-clear-filter {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        padding: 8px !important;
        background-image: none !important;
        text-align: center !important;
    }

    /* BẢNG SIM TRÊN MOBILE THÀNH 2 CỘT */
    .sim-table, .sim-table tbody {
        display: flex !important; 
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        width: 100% !important; 
        background: transparent !important; 
        border: none !important;
    }
    .sim-table thead { display: none !important; }
    
    #duLieuSim { width: 100% !important; }

    /* Đã gộp 2 khối khai báo #duLieuSim tr bị trùng. Giữ layout hiển thị 2 cột, nhưng cập nhật kích thước chuẩn (sau) */
    #duLieuSim tr {
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: center !important; 
        width: calc(50% - 4px) !important;
        margin-bottom: 10px !important;
        position: relative !important; 
        background: #fff !important; 
        border: 1px solid #ddd !important; 
        border-radius: 8px !important; 
        padding: 8px 4px !important; /* Lấy giá trị của khối dưới (chuẩn hơn) */
        min-height: 65px !important; /* Lấy giá trị của khối dưới (chuẩn hơn) */
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    }

    /* TẮT ĐỔI MÀU KHI CHẠM VÀO DÒNG SIM ĐỂ IPHONE KHÔNG BỊ LÚ BẮT ẤN 2 LẦN */
    #duLieuSim tr:hover {
        background: #fff !important; 
    }

        /* Ép dòng thông báo lỗi/loading tràn 100% màn hình thay vì bị chia 50% như các sim khác */
        #duLieuSim tr.sim-message-row {
            width: 100% !important;
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }
    
        #duLieuSim tr.sim-message-row td {
            display: block !important;
            width: 100% !important;
            text-align: center !important;
        }

    #duLieuSim td { display: block !important; padding: 0 !important; border: none !important; line-height: 1.4 !important; }
    #duLieuSim td:nth-child(1), #duLieuSim td:nth-child(4) { display: none !important; }

    #duLieuSim td:nth-child(5) {
        position: absolute !important;
        left: 5px !important;
        top: 50% !important;
        width: 48px !important;
        height: 48px !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        transform: translateY(-50%) !important;
    }

    .network-label { display: none !important; }

    .network-badge {
        --network-dark: #607d8b;
        --network-light: #cfd8dc;
        display: flex !important;
        width: 48px;
        height: 48px;
        padding: 1.5px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: conic-gradient(
            from 0deg,
            var(--network-light) 0deg 180deg,
            var(--network-dark) 180deg 360deg
        );
        border-radius: 50%;
    }

    .network-badge-inner {
        display: flex;
        width: 100%;
        height: 100%;
        padding: 3px;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #fff;
        border-radius: 50%;
        color: var(--network-dark);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: -0.45px;
        line-height: 1;
        text-transform: lowercase;
        white-space: nowrap;
    }

    .network-badge.net-viettel { --network-dark: #d71920; --network-light: #f3a0a4; }
    .network-badge.net-mobi { --network-dark: #1565a8; --network-light: #83b9de; }
    .network-badge .brand-mobi { color: #1565a8; }
    .network-badge .brand-fone { color: #d71920; }
    .network-badge.net-vina { --network-dark: #087cc1; --network-light: #8dcce9; }
    .network-badge.net-vnm { --network-dark: #f58220; --network-light: #ffd199; }
    .network-badge.net-vnm .network-badge-inner { font-size: 6px; }
    .network-badge.net-gmobile { --network-dark: #ef9b0f; --network-light: #ffe09a; }
    .network-badge.net-itelecom { --network-dark: #702082; --network-light: #caa3d3; }

    #duLieuSim td:nth-child(2) {
        display: block !important;
        width: 100% !important;
        padding-left: 52px !important;
        padding-right: 4px !important;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        letter-spacing: -0.35px !important;
        font-weight: 900 !important;
        line-height: 1.25 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    #duLieuSim td:nth-child(3) {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        padding-left: 52px !important;
        padding-right: 4px !important;
        margin-top: 2px !important;
        overflow: hidden;
        color: #333 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* Đã ưu tiên giữ lại logic xóa opacity: 0 để sửa lỗi iPhone liệt phím. Khối khai báo opacity: 0 trùng phía sau đã được xóa bỏ */
    #duLieuSim td:nth-child(6) {
        position: absolute !important; 
        top: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        height: 100% !important; 
        z-index: 10 !important; 
        /* Không set opacity: 0 ở đây để iPhone khỏi liệt nút bấm */
    }

    #duLieuSim td:nth-child(6) button,
    #duLieuSim td:nth-child(6) a { 
        width: 100% !important; 
        height: 100% !important; 
        background: transparent !important; 
        border: none !important; 
        display: block !important;
        color: transparent !important; /* Ẩn chữ "Mua ngay" đi thay cho opacity */
        cursor: pointer !important; /* Bắt buộc phải có cái này thì iOS mới hiểu đây là nút bấm */
        -webkit-tap-highlight-color: transparent !important; /* Chống nháy đen nháy xám bẩn bẩn khi ấn trên màn hình */
    }
}

@media (max-width: 600px) {
    .header-banner { padding: 12px; }
    .banner-avatar { width: 70px; height: 70px; margin-right: 10px; }
    .banner-title { font-size: 20px; }
    .banner-hotline { font-size: 18px; }
    .banner-slogan { font-size: 11px; }
    .main-nav { overflow-x: auto; }
    .main-nav a { white-space: nowrap; padding: 10px 12px; font-size: 13px;}
    .main-wrapper { padding: 5px; }
    .col-left, .col-right { width: 100%; }
}

/* ===== ĐỒNG ĐỀU CHỮ SIM TRÊN IPHONE VÀ ANDROID ===== */
/* Khối html, body bị trùng ở đây đã được xóa vì đã khai báo chuẩn ở trên cùng file */

@media (max-width: 768px) {
    /* Số SIM */
    #duLieuSim td:nth-child(2),
    #duLieuSim td:nth-child(2) .sim-prefix,
    #duLieuSim td:nth-child(2) .sim-tail {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 19px !important;
        letter-spacing: -0.35px !important;

        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;

        white-space: nowrap !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }

    /* Giá SIM */
    #duLieuSim td:nth-child(3) {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 17px !important;
        letter-spacing: 0 !important;

        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1;

        white-space: nowrap !important;
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* ===== CỠ SỐ SIM RIÊNG CHO IPHONE VÀ ANDROID ===== */
@media screen and (max-width: 768px) {

    #duLieuSim {
        -webkit-text-size-adjust: none !important;
        text-size-adjust: none !important;
    }

    /* iPhone */
    html.device-ios #duLieuSim td:nth-child(2),
    html.device-ios #duLieuSim td:nth-child(2) .sim-prefix,
    html.device-ios #duLieuSim td:nth-child(2) .sim-tail {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        line-height: 19px !important;
        font-weight: 800 !important;
        letter-spacing: -0.35px !important;
    }

    /* Android */
    html.device-android #duLieuSim td:nth-child(2),
    html.device-android #duLieuSim td:nth-child(2) .sim-prefix,
    html.device-android #duLieuSim td:nth-child(2) .sim-tail {
        font-family: Roboto, Arial, sans-serif !important;
        font-size: 14px !important;
        line-height: 18px !important;
        font-weight: 800 !important;
        letter-spacing: -0.45px !important;
    }
}



/* Khung ngoài giới hạn chiều cao (tùy b chỉnh cao thấp) */
.don-hang-wrapper {
    height: 350px; 
    overflow: hidden;
    position: relative;
}

/* Khối bên trong trượt lên */
.don-hang-scroll {
    animation: cuonLen 15s linear infinite; 
}

/* Đưa chuột vào thì dừng lại */
.don-hang-wrapper:hover .don-hang-scroll {
    animation-play-state: paused;
}

@keyframes cuonLen {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } 
}