:root{--main-font: 'Roboto', sans-serif; --primary:#d0021b;--primary-dark:#b00217;--bg:#f4f6f9;--white:#fff; --color-white: #fff; --primary-color: #FF2C54; --border:#e2e8f0;--text-main:#0f172a;--text-sub:#0f172a;--text-muted:#94a3b8;--yellow-light:#fef3c7;--fs-xs:11px;--fs-sm:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-xxl:22px;--fs-xxxl:25px;--fs-big:28px;--fw-normal:400;--fw-medium:500;--fw-bold:600;--fw-xbold:800}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family: var(--main-font);background:var(--bg);color:var(--text-main);font-size:var(--fs-md);line-height:1.5}
.container{max-width:1180px;margin:0 auto;padding:0 10px}
.mb-15{margin-bottom:15px}
.mt-15{margin-top:15px}
.mt-25{margin-top:25px}
.p-0{padding:0}
.alert{width: 100%; color: red; font-size: 13px; font-style: italic;}
.shadow{box-shadow:0 4px 6px #0000000d}
.red-text{color:var(--primary)}
a{text-decoration:none;transition:all .2s ease}
a:hover{text-decoration: none;}
.site-header{background:var(--white);border-bottom:3px solid var(--primary);padding:12px 0}
.header-top{display:flex;justify-content:space-between;align-items:center}
.main-logo{font-size:var(--fs-big);font-weight:var(--fw-xbold);color:var(--text-main)}
.main-logo span{color:#f59e0b}
.live-tag{color:var(--primary);font-weight:var(--fw-bold)}
.auth-btn{margin-left:10px;font-weight:var(--fw-medium);color:var(--primary)}
.main-nav{background:var(--primary);position:sticky;top:0;z-index:1000}
.nav-list{list-style:none;display:flex}
.nav-list li{position:relative; list-style: none;}
.nav-list > li > a{display:block;padding:14px 18px;color:#fff;font-size:var(--fs-md);font-weight:var(--fw-bold); text-transform: uppercase;}
.nav-list > li:hover,.nav-list > li.active{background:var(--primary-dark)}
.submenu{position:absolute;top:100%;left:0;background:var(--white);min-width:180px;display:none;border:1px solid var(--border);box-shadow:0 8px 16px #00000014}
.submenu li a{display:block;padding:10px 15px;color:var(--text-main);font-size:var(--fs-md);border-bottom:1px solid #f1f5f9}
.submenu li a:hover{background:#fdf2f2}
body:not(.is-mobile) .has-drop:hover .submenu{display:block}
.main-layout{display:flex;gap:15px;margin-top:20px}
.col-side-left{width:220px}
.col-main-center{flex:1}
.col-side-right{width:260px}
.panel-side{background:var(--white);border:1px solid var(--border);border-radius:4px;overflow:hidden;}
.panel-h{padding:12px 12px;font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:.3px; text-transform: uppercase;}
.panel-b{padding: 5px 0 3px 0;}
.yellow-h{background:#fef3c7;color:#92400e}
.blue-h{background:#dbeafe;color:#1e40af}
.gray-h{background:#fdf2f2;color:#007bff; text-align: center;}
.side-link{display:block;padding:6px 12px;color:var(--text-main);border-bottom:1px solid #f1f5f9}
.side-link:last-child{border-bottom: 0;}
.side-link.active{background:#fdf2f2;color:var(--primary);font-weight:var(--fw-bold)}
.side-link i{font-size: 12px; margin: 0 5px 0 0;}
.city-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:10px}
.city-grid a{font-size:var(--fs-sm);color:#3b82f6}
.res-h{text-align:center;padding:15px;background:var(--yellow-light)}
.res-h-new{text-align: left; padding: 12px 15px;}
.res-h h1, .res-h h2{font-size:var(--fs-xxxl);font-weight:var(--fw-bold);color:var(--primary)}
.res-h-new h1, .res-h-new h2{font-size:var(--fs-md);font-weight:var(--fw-bold);color:#92400e; text-transform: uppercase;}
.res-h p{margin: 0 0 5px 0;}
.res-site-link a {
    font-family: sans-serif;
    display: initial;
    text-decoration: underline;
    color: #0042d7;
}
.res-site-link a+a:before {
    font-family: sans-serif;
    padding: 0 3px;
    color: #555;
    content: "/\00a0";
    display: inline-block;
}
.content-news{padding: 12px 15px;}
/* Container bao quanh để hỗ trợ cuộn ngang trên thiết bị nhỏ */
.content-news {
    overflow-x: auto;
}

.content-news table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.content-news table th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 10px;
    border: 1px solid #dee2e6;
    text-align: center;
}

.content-news table td {
    padding: 10px;
    border: 1px solid #dee2e6;
    text-align: center;
    color: #444;
    line-height: 1.5;
}

/* Hiệu ứng dòng kẻ sọc cho dễ nhìn (Zebra striping) */
.content-news table tr:nth-child(even) {
    background-color: #fcfcfc;
}

/* Hiệu ứng khi di chuột qua dòng */
.content-news table tr:hover {
    background-color: #f1f4f9;
    transition: background-color 0.2s ease;
}

/* Tối ưu riêng cho các con số loto hoặc kết quả */
.content-news table td strong,
.content-news table td b {
    color: #d32f2f; /* Màu đỏ đặc trưng của kết quả xổ số */
    font-size: 1.1em;
}
/* ==========================================================================
   Typography & Cấu trúc cơ bản trong bài viết
   ========================================================================== */
.content-news {
    line-height: 1.6;
    word-wrap: break-word;
}

/*.content-news * {*/
/*    font-family: inherit !important;*/
/*    font-size: inherit !important;*/
/*    line-height: inherit !important;*/
/*}*/

.content-news [style*="font-size"] {
    font-size: inherit !important;
}

.content-news [style*="font-family"] {
    font-family: inherit !important;
}
.content-news [style*="line-height"] {
    line-height: inherit !important;
}

/* Khoảng cách cho các đoạn văn */
.content-news p {
    margin-top: 0;
    margin-bottom: 15px;
    text-align: justify; /* Giúp bài viết thẳng lề, chuyên nghiệp hơn */
}

/* Định dạng các thẻ tiêu đề trong bài viết (Từ H2 đến H6) */
.content-news h2,
.content-news h3,
.content-news h4,
.content-news h5,
.content-news h6 {
    color: #111111;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 25px;
    margin-bottom: 12px;
}

.content-news h2 { font-size: 1.5rem; border-left: 4px solid #d32f2f; padding-left: 10px; }
.content-news h3 { font-size: 1.3rem; }
.content-news h4 { font-size: 1.15rem; }
.content-news h5, .content-news h6 { font-size: 1rem; }

/* Các định dạng nhấn mạnh text */
.content-news strong,
.content-news b {
    color: #111;
    font-weight: 600;
}

/* Thường dùng làm nổi bật số loto, mã giải thưởng */
.content-news .highlight-text,
.content-news p strong:only-child {
    color: #d32f2f;
}

/* ==========================================================================
   Danh sách (Lists)
   ========================================================================== */
.content-news ul,
.content-news ol {
    margin-top: 0;
    margin-bottom: 20px;
    padding-left: 25px;
}

.content-news ul li {
    list-style-type: disc;
    margin-bottom: 6px;
}

.content-news ol li {
    list-style-type: decimal;
    margin-bottom: 6px;
}

/* ==========================================================================
   Hình ảnh & Video (Media)
   ========================================================================== */
.content-news img,
.content-news video {
    max-width: 85% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 20px auto;
    border-radius: 4px;
}

/* Dành cho thẻ em (thường dùng làm chú thích ảnh ngay dưới hình) */
.content-news img + em,
.content-news figcaption {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #666666;
    margin-top: -10px;
    margin-bottom: 20px;
    font-style: italic;
}

/* ==========================================================================
   Bảng biểu (Tables) - Đã tối ưu cuộn và loto
   ========================================================================== */
/* Bọc class này ngoài table nếu có thể, hoặc dùng cơ chế overflow trực tiếp */
.content-news .table-responsive,
.content-news {
    overflow-x: auto;
}

.content-news table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 20px 0;
    background-color: #ffffff;
    min-width: 100%; /* Hoặc cụ thể 500px nếu bảng quá nhiều cột */
    border: 1px solid #dee2e6;
}

.content-news table th {
    background-color: #f8f9fa;
    color: #333333;
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 10px;
    border: 1px solid #dee2e6;
    text-align: center;
    white-space: nowrap; /* Giữ tiêu đề cột không bị xuống dòng vụn vặt */
}

.content-news table td {
    padding: 10px;
    border: 1px solid #dee2e6;
    text-align: center;
    color: #444444;
}

.content-news table tr:nth-child(even) {
    background-color: #fcfcfc;
}

.content-news table tr:hover {
    background-color: #f1f4f9;
    transition: background-color 0.15s ease;
}
.content-news blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    background-color: #fdf6f6;
    border-left: 4px solid #db5252;
    font-style: italic;
    color: #555555;
    border-radius: 0 4px 4px 0;
}

.content-news blockquote p:last-child {
    margin-bottom: 0;
}

.content-news a {
    color: #0056b3;
    text-decoration: none;
    transition: all 0.2s;
}

.content-news a:hover {
    color: #d32f2f;
    border-bottom-color: #d32f2f;
}

/* ==========================================================================
   Iframe (Nhúng bản đồ, Video Youtube, v.v...)
   ========================================================================== */
.content-news iframe {
    max-width: 100%;
    margin: 20px auto;
    display: block;
    border: none;
    border-radius: 4px;
}
/* Container bao bọc toàn bộ danh sách */
.lnews-container {
    padding: 15px;
}
.lnews-container-f{padding-top: 0;}

/* Khung bọc từng bài viết */
.lnews-item {
    display: flex;
    gap: 20px; /* Khoảng cách giữa ảnh bên trái và chữ bên phải */
    padding: 20px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.lnews-item:last-child {
    border-bottom: none; /* Bỏ gạch chân cho item cuối cùng */
}

/* Khối xử lý ảnh bên trái */
.lnews-thumb-box {
    flex: 0 0 220px; /* Giữ cố định chiều rộng của ảnh trên desktop là 220px */
}

.lnews-thumb-link {
    display: block;
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 3 / 2; /* Ép ảnh luôn theo tỷ lệ 3:2 tránh méo hình */
    background-color: #f1f5f9;
}

.lnews-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cắt cúp ảnh tự nhiên không bị co giãn */
    transition: transform 0.3s ease;
    display: block;
}

/* Hiệu ứng zoom nhẹ ảnh khi hover vào bài viết */
.lnews-item:hover .lnews-thumb-img {
    transform: scale(1.05);
}

/* Khối chữ bên phải */
.lnews-content-box {
    flex: 1; /* Tự động lấp đầy khoảng trống còn lại */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Căn giữa nội dung text theo chiều dọc */
}

/* Thẻ Category (Danh mục) */
.lnews-category {
    display: inline-block;
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #d32f2f; /* Tông đỏ đồng bộ với ngành xổ số */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Tiêu đề bài viết (Title) */
.lnews-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.lnews-title-link {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.lnews-title-link:hover {
    color: #d32f2f; /* Đổi sang màu đỏ khi hover giống báo điện tử */
}

/* Đoạn mô tả (Description) */
.lnews-description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #64748b;
    /* Giới hạn text tối đa 3 dòng, nếu dài quá tự động thêm dấu ... */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Khung bọc ngoài tiện ích */
.quick-nav-quaythu {
    margin: 15px auto 25px auto;
    padding: 0 15px;
    max-width: 600px; /* Giới hạn độ rộng vừa mắt */
    text-align: center;
}

/* Dòng chữ tiêu đề nhỏ */
.quick-nav-title {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Danh sách các link */
.quick-nav-list {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap; /* Tự xuống dòng trên màn hình vừa */
}

/* Định dạng chung cho từng nút */
.nav-item {
    display: inline-block;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    background-color: #f0f2f5;
    border: 1px solid #e4e6eb;
    border-radius: 20px; /* Bo tròn dạng viên thuốc hiện đại */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* Hiệu ứng khi rê chuột vào */
.nav-item:hover {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgb(208, 4, 27, 0.3);
}

/* Thẻ của trang hiện tại người dùng đang đứng (Ví dụ đang ở Miền Bắc) */
.nav-item.active {
    background-color: var(--primary); /* Màu cam tiệp với tone màu thông báo của bạn */
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgb(208, 4, 27, 0.3);
}

/* Nhấn mạnh nhẹ cho Vietlott và Sổ Mơ nếu muốn tạo điểm nhấn riêng */
.nav-item.vietlott:hover {
    background-color: #e61e26;
    color: #fff;
    border-color: #e61e26;
}
.nav-item.somo:hover {
    background-color: #2196f3;
    color: #fff;
    border-color: #2196f3;
}
.quick-nav-title{font-weight: bold; font-size: 17px; color: var(--primary); text-transform: uppercase;}

/* --- Tối ưu riêng cho ĐIỆN THOẠI (Mobile) --- */
@media (max-width: 576px) {
    .quick-nav-list {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto; /* Cho phép vuốt trượt ngang mượt mà trên đt */
        padding-bottom: 8px;
        /* Giấu thanh scrollbar thô kệch trên mobile */
        -webkit-overflow-scrolling: touch;
        gap: 6px;
    }
    .quick-nav-list::-webkit-scrollbar {
        display: none;
    }
    .nav-item {
        white-space: nowrap; /* Không cho chữ bị xuống dòng */
        flex-shrink: 0;
    }
    .quick-nav-title {
        text-align: left;
    }
}
/* ==========================================================================
   Responsive cho các thiết bị di động (Mobile)
   ========================================================================== */
@media screen and (max-width: 640px) {
    .lnews-item {
        flex-direction: column; /* Chuyển thành hàng dọc trên điện thoại */
        gap: 12px;
        padding: 15px 0;
    }

    .lnews-thumb-box {
        flex: 0 0 auto; /* Trả lại auto rộng full màn hình mobile */
        width: 100%;
    }

    .lnews-title {
        font-size: 16px; /* Giảm size chữ tiêu đề một chút trên màn hình nhỏ */
    }

    .lnews-description {
        -webkit-line-clamp: 2; /* Mobile chỉ cần hiển thị 2 dòng mô tả cho gọn */
    }
}
/* Responsive cho Mobile */
@media screen and (max-width: 768px) {
    .submenu li a:hover, .submenu li a:active{background:var(--primary-dark) !important;}
    .menu-mobile .submenu{border:0px !important;}
    .menu-mobile .submenu li a:hover, .menu-mobile .submenu li a:active{ackground:var(--primary-dark) !important;}
    .menu-mobile .submenu li a{color: #fff !important; border-bottom:1px solid #d23030 !important;}

    .nav-item{padding:6px 13px; }
    .content-news {
        font-size: 15px; /* Giảm nhẹ size chữ trên mobile đọc cho vừa mắt */
    }
    .content-news h2 { font-size: 1.35rem; }
    .content-news h3 { font-size: 1.2rem; }
    .content-news table th,
    .content-news table td {
        padding: 8px 6px;
        font-size: 15px;
    }
}
/* Responsive cho Mobile */
@media screen and (max-width: 600px) {
    .content-news table td,
    .content-news table th {
        padding: 8px 5px;
        font-size: 15px;
    }
}
.res-sub-info{padding:8px;text-align:center;font-size:var(--fs-xxl);color:var(--text-sub);border-bottom:1px solid #eee}
.res-sub-info b{color: var(--primary)}
.lottery-content .lottery-row:nth-child(2n+1){background: #f0f8ff;}
.lottery-row{display:flex;border-bottom:1px solid #ddd}
.lottery-lbl{width:55px;color:var(--text-sub);border-right:1px solid #ddd;font-size:var(--fs-lg);font-weight:var(--fw-normal);display:flex;align-items:center;justify-content:center}
.lottery-val{flex:1;padding:5px;text-align:center;font-size:var(--fs-xxxl);font-weight:var(--fw-bold)}
.row-db .lottery-val{font-size:var(--fs-big);font-weight:var(--fw-xbold); color: var(--primary);}
.val-split{display:flex;justify-content:space-around}
.val-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0px}
.val-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:0px}
.hl-row{background:var(--yellow-light)}
.gan-row{display:flex;justify-content:space-between;padding:8px 12px;font-size:var(--fs-sm);color:var(--text-sub)}
.gan-row.head{font-weight:var(--fw-bold);background:#f8fafc}
.quick-stats{padding:12px;font-size:var(--fs-sm);color:var(--text-sub)}
.main-footer{background:#0f172a;color:var(--text-muted);padding:40px 0 20px;margin-top:30px}
.footer-grid{display:flex;gap:20px}
.f-logo{font-size:var(--fs-xl);font-weight:var(--fw-xbold);color:#fff}
.f-logo span{color:#f59e0b}
.f-col h3{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#fff}
.f-col a{display:block;font-size:var(--fs-xs);color:var(--text-muted);margin-bottom:8px}
.f-bottom{text-align:center;font-size:var(--fs-xs);margin-top:20px}
.mobile-toggle{display:none;border:1px solid var(--border);padding:2px 8px;font-size:22px;color: var(--primary); position: absolute; top: 22px; right: 16px;}

.hdxs-lottery-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* KHỐI TRÁI: Logo & Live */
.hdxs-lottery-left {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* KHÔNG cho phép khối này bị bóp nhỏ */
}
.hdxs-lottery-label-gold{font-size: 14px;}
.hdxs-lottery-img {
    height: 48px;
    width: auto;
    display: block;
    margin: 0 15px 0 0;
}
.hdxs-lottery-icon{margin: 0 2px 0 0;}
.hdxs-lottery-live-badge {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background: #fff0f0;
    border-radius: 15px;
    border: 1px solid #ffebeb;
    margin: 0 0 0 15px;
}

.hdxs-lottery-live-text, .hdxs-lottery-dot {
    color: #ff0000;
    font-weight: 800;
    font-size: 12px;
    -webkit-animation: hdxs-blink-red 0.8s infinite alternate;
    animation: hdxs-blink-red 0.8s infinite alternate;
}

.hdxs-lottery-dot {
    width: 7px;
    height: 7px;
    background-color: #ff0000;
    border-radius: 50%;
    margin-right: 5px;
}

@-webkit-keyframes hdxs-blink-red {
    from { opacity: 1; filter: drop-shadow(0 0 2px rgba(255,0,0,0.5)); }
    to { opacity: 0.3; }
}
@keyframes hdxs-blink-red {
    from { opacity: 1; filter: drop-shadow(0 0 2px rgba(255,0,0,0.5)); }
    to { opacity: 0.3; }
}

/* KHỐI GIỮA: Jackpot - Đây thường là nơi gây vỡ khung */
.hdxs-lottery-jackpot-container {
    display: flex;
    align-items: center;
    background: #fffef2;
    border: 1px solid #ffecb3;
    padding: 5px 15px;
    border-radius: 40px;
    gap: 9px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0; /* QUAN TRỌNG: Cho phép item co lại nhỏ hơn nội dung của nó */
    justify-content: center;
    margin: 0 5px;
}

.hdxs-lottery-prize-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap; /* Buộc text không xuống dòng */
}

.hdxs-lottery-prize-value {
    color: #d32f2f;
    font-weight: bold;
}

/* KHỐI PHẢI: DateTime */
.hdxs-lottery-datetime-container {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* KHÔNG cho phép bị bóp nhỏ */
    background: #f5f5f5;
    padding: 5px 15px;
    border-radius: 40px;
    gap: 8px;
    font-size: 13px;
}

/* PHÂN TÁCH */
.hdxs-lottery-divider-v, .hdxs-lottery-divider-inner {
    width: 1px;
    background: #e0e0e0;
    height: 20px;
}

/* RESPONSIVE THIẾT YẾU */
@media (max-width: 1100px) {
    /* Ẩn chữ Jackpot để ưu tiên con số */
    .hdxs-lottery-jackpot-title { display: none; }
}

@media (max-width: 950px) {
    .hdxs-lottery-header {
        flex-wrap: wrap; /* Cho phép rớt dòng */
        justify-content: center;
    }
    .hdxs-lottery-jackpot-container {
        order: 3; /* Đưa Jackpot xuống hàng riêng */
        flex-basis: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 500px) {
    .hdxs-lottery-dt-text { font-size: 13px; }
    .hdxs-lottery-prize-value { font-size: 13px; }
    .hdxs-lottery-datetime-container { padding: 5px 10px; }
}

@media (max-width: 414px) {
    .hdxs-lottery-jackpot-container{padding: 5px 6px; gap: 2px; margin: 5px 0 0 0;}
    .hdxs-lottery-jackpot-container .hdxs-lottery-divider-inner{width: 0;}
}

@media (max-width: 390px) {
    .hdxs-lottery-jackpot-container{padding: 5px 6px; gap: 2px; margin: 5px 0 0 0;}
    .hdxs-lottery-jackpot-container .hdxs-lottery-divider-inner{width: 0;}
    .hdxs-lottery-game-name{font-size: 13px;}
    .hdxs-lottery-prize-item {width: 100%;}
    .hdxs-lottery-prize-value {
        font-size: 13px;
    }
}

/* Đảm bảo reset box-sizing để không vỡ layout khi tính padding/border */
.xsdt-today-wrapper,
.xsdt-today-wrapper *,
.xsdt-today-wrapper *::before,
.xsdt-today-wrapper *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.xsdt-today-wrapper {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

/* Tiêu đề vàng */
.xsdt-today-header h1 {
    background-color: var(--yellow-light); /* Màu vàng nhạt giống ảnh */
    color: #000;
    text-align: center;
    padding: 12px 15px;
    font-weight: bold;
    font-size: var(--fs-xl);
    border-bottom: 1px solid #ddd;
}

/* Grid layout 3 cột */
.xsdt-today-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: repeat(3, 1fr);
}

/* Các ô item */
.xsdt-today-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    min-height: 40px;
    padding: 8px;
    text-decoration: none;
    color: #003399; /* Màu xanh đặc trưng của link xổ số */
    font-size: 15px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    -webkit-transition: background 0.2s;
    transition: background 0.2s;
}

/* Loại bỏ border-right ở cột cuối cùng mỗi hàng */
.xsdt-today-item:nth-child(3n) {
    border-right: none;
}

/* Loại bỏ border-bottom ở hàng cuối cùng */
.xsdt-today-item:nth-last-child(-n+3) {
    border-bottom: none;
}

.xsdt-today-item:hover {
    background-color: #f9f9f9;
    text-decoration: underline;
}

.xsdt-today-item.empty {
    cursor: default;
}

/* RESPONSIVE */

/* Tablet: Vẫn giữ 3 cột nhưng chữ nhỏ lại */
@media (max-width: 768px) {
    .xsdt-today-header h1 {
        font-size: var(--fs-xl);
    }
    .xsdt-today-item {
        font-size: 15px;
    }
}

/* Mobile: Chuyển về 2 cột để dễ đọc, tránh chữ bị đè nhau */
@media (max-width: 480px) {
    .xsdt-today-grid {
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: repeat(2, 1fr);
    }

    /* Reset lại border cho mobile 2 cột */
    .xsdt-today-item {
        border-right: 1px solid #eee !important;
    }
    .xsdt-today-item:nth-child(2n) {
        border-right: none !important;
    }

    /* Ẩn các ô trống dư thừa trên mobile nếu cần */
    .xsdt-today-item.empty {
        display: none;
    }
}

.lottery-container{max-width:600px;margin:0 auto;background:#fff;border:1px solid #ddd}
.lottery-header{background-color:#fff9c4;text-align:center;padding:10px;border-bottom:1px solid #ddd}
.lottery-header h1{color:#d32f2f;font-size:18px;margin:0 0 5px;text-transform:uppercase}
.breadcrumb a{font-size:12px;color:#1976d2;text-decoration:none}
.row-xs{display:flex;border-bottom:1px solid #ddd;align-items:center}
.col-xs{padding:5px;text-align:center;font-weight:400}
.col-xs:last-child{border-right:none}
.label-col{
    width: 55px;
    color: var(--text-sub);
    font-size: var(--fs-lg);
    font-weight: var(--fw-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-kqxs a{font-size: var(--fs-lg); font-weight: var(--fw-normal)}
.data-col{flex:1;font-size: var(--fs-xxxl);
    font-weight: var(--fw-bold);border-left:1px solid #ddd}
.header-row{background-color:#e3f2fd}
.highlight-blue{text-decoration:none}
.prize-red{
    font-size: var(--fs-big);
    font-weight: var(--fw-xbold);
    color: var(--primary);
}
.bg-gray{background-color:#fafafa}
.data-col div{margin-bottom:2px}
.data-col-gird-2{
    display: flex;
    justify-content: space-around;
}
.data-col-gird-3{
    display: flex;
    justify-content: space-around;
}
.data-col-gird-4{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0px;
}
.data-col-gird-4 > :last-child:nth-child(3n + 1) {
    grid-column: 2 / 3; /* nằm giữa */
}

.counter-container {
    display: inline-flex;
    gap: 2px;
}

.digit-box {
    padding: 1px 0 0 0;
    width: 19px;
    height: 24px;
    background-color: #333;
    color: white;
    font-weight: var(--fw-bold);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    transition: background-color 0.05s ease, color 0.1s ease;
    font-size: 22px;
}

.loto-container {
    display: flex;
    gap: 0px;
}

.panel-loto{border-radius: 0;border-top: 1px solid #ddd;}
.loto-box {
    flex: 1;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.loto-box:first-child{border-right: 0;}

.loto-header {
    display: flex;
    font-weight: normal;
    background: #f0f8ff;
}

.loto-header div:nth-child(2) {
    font-size: var(--fs-md);
    padding: 6px 8px;
    flex: 1;
    text-align: center;
}

.loto-header div:first-child {
    width: 60px;
    font-weight: normal;
    border-right: 1px solid #ddd;
    text-align: center;
    padding: 6px 8px;
}

.loto-box-duoi .loto-col.head{border-left: 1px solid #ddd;}
.loto-box-duoi .loto-header div:first-child{border-left: 1px solid #ddd;}

.loto-row {
    display: flex;
    border-top: 1px solid #ddd;
    align-items: center;
}

.loto-row:nth-child(2n+1){background: #f0f8ff;}

.loto-col.head {
    width: 60px;
    font-weight: normal;
    border-right: 1px solid #ddd;
    text-align: center;
}

.loto-col {
    padding: 6px 8px;
    font-size: 15px;
}

.loto-col.values {
    flex: 1;
}

.loto-col.values span {
    margin-right: 0px;
    font-weight: var(--fw-bold);
}

.hl-row {
    background: #fff;
}

.red-text {
    color: red;
    font-weight: bold;
}

.tabs {
    display: flex;
    border-bottom: 0px solid #ddd;
}

.tab {
    padding: 8px 20px;
    cursor: pointer;
    background: #f5f5f5;
    margin-right: 4px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: #007bff;
}

.tab.active {
    background: #007bff;
    color: #fff;
    font-weight: var(--fw-bold);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


.schedule-start .block-schedule {
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    margin-bottom: 15px;
}

.schedule-start .block-title {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 15px;
}
.schedule-start .block-title span{font-size: 16px; margin: 0 5px 0 0;}

.schedule-start .traditional {
    background: #fff7e6;
    border: 1px solid #ffd591;
}

.schedule-start .vietlott {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
}

/* ITEM */
.schedule-start .item-schedule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 4px;
    border-top: 1px solid rgba(0,0,0,0.1);
    position: relative;
    font-weight: var(--fw-bold);
}

.schedule-start .item-schedule:first-of-type {
    border-top: none;
}

.schedule-start .item-schedule.live {
    background: #fff1f0;
}

/* BADGE */
.schedule-start .badge-schedule {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #ccc;
    color: #fff;
    position: absolute;
    right: 0;
    top: 3px;
}

.schedule-start .badge-schedule.live {
    background: red;
    animation: blink 1s infinite;
    top: 12px;
}

.schedule-start .badge-schedule.wait {
    background: #1890ff;
}

/* COUNTDOWN */
.schedule-start .cd {
    position: absolute;
    right: 0;
    bottom: 3px;
    font-size: 10px;
    color: #000;
    font-weight: normal;
}

/* ANIMATION */
@keyframes blink {
    50% { opacity: 0.5; }
}

/* WRAPPER */
.breadcrumb-wrapper {
    background: #f2f0f0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

/* CONTAINER */
.breadcrumb-wrapper {
    padding: 12px 0;
}

/* LIST */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ITEM */
.breadcrumb-item {
    color: #666;
}

/* LINK */
.breadcrumb-item a {
    color: #1890ff;
    text-decoration: none;
    transition: 0.2s;
    font-size: 14px;
}

.breadcrumb-item a:hover {
    color: #ff4d4f;
    text-decoration: underline;
}

/* SEPARATOR */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    margin: 0 8px;
    color: #999;
}

/* ACTIVE */
.breadcrumb-item.active {
    color: #333;
    font-weight: 500;
}

.pagination-wrap .pagination {
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    display: flex;
}
.pagination-wrap .pagination li{list-style: none;}
.pagination-wrap .pagination .page-link {
    margin-left: 0;
    padding: 0 0;
    color: #111;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CFCFCF;
    border-radius: 3px;
    transition: .3s linear;
}
.pagination-wrap .pagination .page-item.active .page-link,
.pagination-wrap .pagination .page-link:hover {
    color: var(--color-white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.pagination-wrap .pagination .page-link:focus {
    color: var(--color-white);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: none;
}


.live-box {
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    font-family: Arial;
}

.live-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.live-title span {
    font-weight: bold;
}

/* Tabs */
.live-tabs {
    display: flex;
    margin-bottom: 10px;
}

.live-tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #eee;
    cursor: pointer;
    border-right: 1px solid #ddd;
}

.live-tab a{color: #000;}
.live-tab:hover{background: #e11;
    color: #fff;
    font-weight: bold;}
.live-tab:hover a{color: #fff;}

.live-tab.active-live {
    background: #e11;
    color: #fff;
    font-weight: bold;
}

.live-tab.active-live a{color: #fff;}

/* Countdown */
.live-countdown {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
}

.time-box-live {
    background: #d70000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
}

/* Description */
.live-desc {
    font-size: 15px;
    color: #333;
}

.live-desc a {
    color: #666;
    text-decoration: none;
}

/* Sub tabs */
.live-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;
    border-top: 1px solid #eee;
}

.live-sub {
    padding: 8px 12px;
    border: 1px solid #ddd;
    margin-right: 5px;
    margin-top: 5px;
    cursor: pointer;
    background: #f9f9f9;
}

.live-sub a{color: #000;}
.live-sub:hover a{color: #fff;}
.live-sub:hover {
    background: #e11;
    color: #fff;
}

.live-sub.active-live {
    background: #e11;
    color: #fff;
}

/* Status */
.live-status {
    margin-top: 10px;
    padding: 10px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-loading {
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top: 2px solid orange;
    border-radius: 50%;
    animation: live-spin 1s linear infinite;
}

.live-text {
    color: green;
    font-weight: bold;
}

.live-dropdown {
    margin-left: auto;
    cursor: pointer;
}

.live-status-text {
    font-weight: bold;
    color: red;
}

.live-blink {
    animation: liveBlink 1s infinite;
}

/* BOX ĐANG QUAY */
.live-running {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #ff0000, #ff4d4f);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(255,0,0,0.5);
}

/* DOT LIVE */
.live-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    animation: livePulse 1s infinite;
}

/* TEXT */
.live-running-text {
    animation: liveBlink 1.2s infinite;
}

/* ANIMATION */
@keyframes livePulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes liveBlink {
    0%,100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes live-spin {
    to {
        transform: rotate(360deg);
    }
}


.mega-live-jackpot {
    text-align: center;
    padding: 0px;
}

.mega-live-label {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.mega-live-value {
    display: inline-block;
    background: #e53935;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.mega-live-box {
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--border);
}

/* HEADER */
.mega-live-header {
    background: #e8d28b;
    color: red;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    font-size: 18px;
}

/* BODY */
.mega-live-body {
    text-align: center;
    padding: 15px 10px;
}

.mega-live-round {
    margin-bottom: 15px;
    font-size: 15px;
}

/* BALL */
.mega-live-numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mega-live-ball {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: red;
    font-size: 18px;
    background: #fff;
}

/* TABLE */
.mega-live-table {
    width: 100%;
}

.mega-live-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
    border-top: 1px solid #ddd;
}

.mega-live-row div {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #ddd;
    font-size: 15px;
}

.mega-live-row div:last-child {
    border-right: none;
}

/* HEADER ROW */
.mega-live-head {
    background: #f0f0f0;
    font-weight: bold;
}

.power-live-box {
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--border);
}

/* HEADER */
.power-live-header {
    background: #e8d28b;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    padding: 10px;
}

/* SUB */
.power-live-sub {
    text-align: center;
    padding: 8px;
    font-size: 14px;
    background: #f7f7f7;
}

/* JACKPOT */
.power-live-jackpot {
    text-align: center;
    padding: 0 0 15px 0;
}

.power-live-label {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.power-live-value {
    display: inline-block;
    background: #e53935;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

.lv-value a[href^="tel"] {
    color: inherit !important;
    text-decoration: none !important;
}
.lv-value{color: #fff !important; -webkit-text-fill-color: #fff;}

/* BODY */
.power-live-body {
    text-align: center;
    padding: 15px;
}

.power-live-round {
    margin-bottom: 15px;
    font-size: 15px;
}

/* BALL */
.power-live-numbers {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.power-live-ball {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: red;
    font-size: 18px;
    background: #fff;
}

/* SPECIAL BALL */
.power-live-special {
    background: gold;
    color: red;
    border-color: orange;
}

/* TABLE */
.power-live-table {
    width: 100%;
}

.power-live-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.5fr;
    border-top: 1px solid #ddd;
}

.power-live-row div {
    padding: 10px;
    text-align: center;
    border-right: 1px solid #ddd;
    font-size: 15px;
}

.power-live-row span.red{color: red;}

.power-live-row div:last-child {
    border-right: none;
}

.power-live-head {
    background: #f0f0f0;
    font-weight: bold;
}

.m3d-container {
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--border);
}

/* Header */
.m3d-header {
    background-color: #ffeb84;
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
.m3d-title { font-size: 18px; margin: 0 0 5px; }
.m3d-subtitle a { color: #0056b3; font-weight: bold; text-decoration: none; }

/* Bảng kết quả chính */
.m3d-res-row:nth-child(2n+1) {background: #f0f8ff;}
.m3d-res-row {
    display: flex;
    border-bottom: 1px solid #eee;
}
.m3d-res-label {
    width: 55px;
    color: var(--text-sub);
    border-right: 1px solid #ddd;
    font-size: var(--fs-lg);
    font-weight: var(--fw-normal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.m3d-res-content {
    flex-grow: 1;
    padding: 5px;
    font-size: var(--fs-xxxl);
    font-weight: bold;
}
.m3d-flex-center {
    display: flex;
    justify-content: space-around;
}
.m3d-txt-red { color: #d30000; font-size: var(--fs-big); font-weight: var(--fw-xbold);}

/* Grid cho các bộ số */
.m3d-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 0px; }
.m3d-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; gap: 0px; }

/* Bảng thông tin chi tiết */
.m3d-section-bar {
    background: #f1f1f1;
    text-align: center;
    padding: 8px;
    font-weight: bold;
    font-size: 15px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.m3d-info-header, .m3d-info-row {
    display: flex;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    text-align: center;
}
.m3d-info-header { font-weight: bold; background: #fff; font-size: 15px;}

.m3d-col-1 { width: 80px; padding: 10px 5px; border-right: 1px solid #eee; flex-shrink: 0;}
.m3d-col-2 { flex: 1; padding: 10px 5px; border-right: 1px solid #eee; }
.m3d-col-22{padding-top: 22px;}
.m3d-col-3 { width: 80px; padding: 10px 5px; border-right: 1px solid #eee; flex-shrink: 0; }
.m3d-col-4 { width: 100px; padding: 10px 5px; flex-shrink: 0; }

/* Container và Header giữ nguyên từ trước, thêm phần history bên dưới */
.kn-res-container {
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--border);
}

.kn-res-header { background: #ffec85; padding: 15px; text-align: center; }
.kn-res-title { margin: 0 0 10px; font-size: 20px; }
.kn-res-breadcrumb a { color: #0056b3; font-weight: bold; text-decoration: none; }
.kn-res-time-box { background: #d30000; display: inline !important; color: #fff; padding: 3px 8px; border-radius: 4px; font-weight: bold; margin: 0 5px 0 0;}
.kn-res-countdown, .kn-res-countdown-stop{padding: 15px 0 0 0;}

/* Main Board */
.kn-res-main-board { background: #ffefb2; display: flex; flex-wrap: wrap; padding: 15px; gap: 10px; }
.kn-res-stats-container { display: flex; gap: 2px; }
.kn-res-stat-box { background: #fff; border: 1px solid #d30000; padding: 5px 5px; min-width: 95px; border-radius: 4px; }
.kn-res-stat-item { display: flex; justify-content: space-between; font-size: 13px; margin: 3px 0; }
.kn-res-stat-item strong{min-width: 40px; text-align: left;}
.kn-res-stat-item .kn-res-val{min-width: 17px; text-align: left;}
.kn-res-circle { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; margin-right: 5px; }
.kn-res-blue { background: #007bff; }
.kn-res-orange { background: #fd7e14; }
.kn-res-divider { border-top: 1px solid #eee; margin: 5px 0; }
.kn-res-red-text { color: #d30000; font-weight: bold; }

.kn-res-ball-grid { flex: 1; display: flex; flex-wrap: wrap; gap: 3px; padding: 3px 0 0 0;}
.kn-res-ball { width: 38px; height: 38px; background: #fff; border: 1px solid #d30000; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #d30000; font-weight: bold; font-size: 20px; }
.kn-res-ball img{max-width: 60%;}

/* CSS MỚI CHO PHẦN LỊCH SỬ */
.kn-res-history-list { padding: 10px 0; }
.kn-res-history-row {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #eee;
    align-items: center;
    gap: 10px;
}
.kn-res-history-row:last-child{border: 0; padding-bottom: 0;}
.kn-res-history-info { width: 105px; flex-shrink: 0; }
.kn-res-ky-id { color: #0056b3; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.kn-res-ky-time { font-size: 13px; color: #666; }

.kn-res-history-balls {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-start;
}

.kn-res-ball-sm {
    width: 32px;
    height: 30px;
    border: 1px solid #d30000;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    background: #fff;
}

.kn-res-history-tags {
    width: 132px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    flex-shrink: 0;
}

.kn-res-tag {
    background: #f1f1f1;
    font-size: 13px;
    padding: 6px 2px;
    text-align: center;
    border-radius: 4px;
    color: #333;
    font-weight: bold;
}

.kn-res-tag-red { background: #d30000; color: #fff; }


/* Prefix: lotto-stats- để tránh trùng lặp */

/* Container chung */
.lotto-stats-container {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 15px;
}

/* --- Phần Form Tìm Kiếm --- */
.lotto-search-box {
    margin-bottom: 10px;
    border-radius: 4px;
}

.lotto-search-header {
    padding: 12px;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.lotto-search-body {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.lotto-search-group {
    flex: 1;
    min-width: 200px;
}

.lotto-search-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #333;
}

.lotto-search-input, .lotto-search-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 40px;
}

.lotto-search-action {
    flex: 0 0 auto;
    margin-left: auto; /* Đẩy nút sang phải */
}

.lotto-search-btn {
    background-color: #e53935; /* Màu đỏ */
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    height: 40px;
}

.lotto-search-btn:hover {
    background-color: #c62828;
}

/* --- Phần Bảng Thống Kê (Giữ nguyên và tinh chỉnh) --- */
.lotto-stats-title {
    font-size: 1.4rem;
    margin: 15px 0;
}

.lotto-stats-title span { color: #1a237e; }

.lotto-stats-wrapper {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

.lotto-stats-row {
    display: flex;
    border-bottom: 1px solid #ddd;
    /*border-top: 1px solid #ddd;*/
}

.lotto-stats-row:last-child { border-bottom: none; }

.lotto-stats-header {
    background-color: #f5fafd;
    font-weight: bold;
    border-top: 1px solid #ddd;
}

.lotto-stats-col {
    flex: 1;
    padding: 12px;
    text-align: center;
    border-right: 1px solid #ddd;
}

.lotto-stats-col:last-child { border-right: none; }

.lotto-stats-number { font-weight: bold; color: #000; }
.lotto-stats-date { color: #1565c0; }

.head-tail-wrapper {
    border: 1px solid #ddd;
    border-left: 0;
    border-right: 0;
}

.head-tail-row {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    background-color: #ffffff;
}

.head-tail-row:last-child {
    border-bottom: none;
}

.head-tail-header {
    background-color: #f3f4f6;
    font-weight: bold;
    color: #374151;
}

.head-tail-col {
    padding: 12px 10px;
    display: flex;
    align-items: center;
    border-right: 1px solid #e5e7eb;
}

.head-tail-col:last-child {
    border-right: none;
}

/* Kích thước cột */
.head-tail-size-s {
    width: 15%;
    justify-content: center;
}

.head-tail-size-l {
    width: 35%;
}

/* Màu sắc và font */
.head-tail-red {
    color: #dc2626;
}

.head-tail-stat-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.head-tail-val {
    font-size: 14px;
    color: #111827;
    white-space: nowrap;
}

/* Thanh biểu đồ */
.head-tail-progress-bg {
    width: 50px;
    height: 12px;
    background-color: transparent; /* Hoặc để màu xám nhạt nếu muốn */
}

.head-tail-progress-fill {
    height: 100%;
    background-color: #3b82f6;
    border-radius: 2px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .head-tail-header {
        display: none; /* Ẩn tiêu đề trên mobile */
    }

    .head-tail-row {
        flex-wrap: wrap;
        padding: 5px 0;
    }

    .head-tail-size-s {
        width: 20%;
        border-bottom: 1px solid #f3f4f6;
    }

    .head-tail-size-l {
        width: 80%;
        border-right: none;
        border-bottom: 1px solid #f3f4f6;
    }

    .head-tail-col:nth-child(even) {
        border-right: none;
    }
}

.tx-main-wrapper {
    border-top: 1px solid var(--border);
    font-family: sans-serif;
}

/* Tạo dòng dưới dạng Grid có 6 cột */
.tx-grid-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.tx-cell {
    padding: 10px 5px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Header style */
.tx-head .tx-cell {
    font-weight: bold;
    color: #333;
}

.tx-cell:last-child{border-right: 0;}

/* Số màu đỏ */
.tx-num {
    font-weight: bold;
    font-size: 16px;
}

/* Hover effect */
.tx-grid-row:not(.tx-head):hover {
    background-color: #f1f1f1;
}

.tx-grid-wrapper {
    display: grid;
    /* Chia 3 cột bằng nhau trên Desktop */
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    border-top: 1px solid var(--border);
    background-color: #fff;
}

.tx-item {
    display: flex;
    flex-direction: column;
    /* Đây là mấu chốt: Cột sẽ luôn chiếm hết chiều cao của hàng */
    height: 100%;
}

.tx-title {
    background-color: #f0f7ff;
    color: #333;
    padding: 12px;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.tx-item:last-child .tx-title{border-right: 0;}

.tx-data {
    padding: 15px;
    flex-grow: 1; /* Đẩy phần nền trắng phủ hết chiều cao còn lại */
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    line-height: 1.8;
    word-break: break-word;
}

.tx-item:last-child .tx-data{border-right: 0;}

.xs-container {
    border-top: 1px solid var(--border);
    border-left: 0px solid var(--border);
}

.xs-row {
    display: flex;
}

.xs-cell {
    flex: 1;
    padding: 10px 5px;
    text-align: center;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xs-cell:first-child{min-width: 105px;}
.xs-cell:last-child{border-right: 0;}

.xs-header {
    background-color: #f0f7ff;
    font-weight: bold;
}

.xs-date {
    color: #0056b3;
    font-weight: bold;
    flex: 1.5; /* Ngày rộng hơn một chút */
}

/* Container tổng */
.tk0009-container {
    border: 1px solid var(--border);
    border-left: 0;
    border-right: 0;
}

/* Header */
.tk0009-header {
    display: grid;
    grid-template-columns: 60px 1fr; /* Cố định cột số 60px, còn lại cho biểu đồ */
    background: #f3f4f6;
    border-bottom: 1px solid var(--border);
    font-weight: bold;
}

.tk0009-col-1{border-right: 1px solid var(--border); text-align: center;}

.tk0009-col-1, .tk0009-col-2 {
    padding: 10px 10px;
}

/* Mỗi dòng dữ liệu */
.tk0009-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    border-bottom: 1px solid var(--border);
    align-items: center;
}

.tk0009-row:last-child {
    border-bottom: none;
}

/* Số (Màu đỏ) */
.tk0009-num {
    color: #ff0000;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid var(--border);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Phần chứa biểu đồ và chữ */
.tk0009-data {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 10px;
    min-width: 0; /* Chống tràn Flexbox */
}

/* Thanh bar nền xám nhạt (nếu muốn) hoặc để trống */
.tk0009-progress {
    flex: 1; /* Chiếm tối đa diện tích */
    height: 14px;
    background: transparent; /* Hoặc #f0f0f0 nếu muốn hiện khung */
    min-width: 50px;
    display: flex;
}

/* Thanh bar màu xanh chính */
.tk0009-bar {
    height: 100%;
    background-color: #4169e1;
    border-radius: 2px;
}

/* Chữ hiển thị số liệu */
.tk0009-info {
    font-size: 13px;
    color: #333;
    white-space: nowrap; /* Không cho chữ xuống dòng */
    flex-shrink: 0; /* Không cho phép chữ bị co lại */
    margin: -2px 0 0 10px;
}

.special-cal-container { max-width: 1000px; margin: 20px auto; border: 1px solid var(--border); }
.special-cal-title { background: #555; color: #fff; text-align: center; padding: 15px; font-weight: bold; font-size: 1.2rem; }
.special-grid { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--border); gap: 1px; border-bottom: 1px solid var(--border);}
.special-th { background: #f4f4f4; text-align: center; padding: 10px; font-weight: bold; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.special-td { background: #fff; min-height: 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; }
.special-empty { background: #f9f9f9; }
.special-loto { font-size: 20px; font-weight: bold; }
.special-red { color: #e74c3c; }
.special-date { font-size: 12px; color: #888; margin-top: 0px; }
/* Màu nền cho Thứ 7 & CN */
.special-grid > div:nth-child(7n), .special-grid > div:nth-child(7n-1) { background-color: #f6fff6; }

.hdxs-lottery-footer {
    background: #0f172a; /* Xanh đen sâu hiện đại */
    color: #94a3b8;
    padding: 45px 0 20px;
    margin: 30px 0 0 0;
    border-top: 1px solid #1e293b;
}

.hdxs-lottery-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 5%;
}

.hdxs-lottery-footer-col {
    flex: 1;
    min-width: 15%;
}

.hdxs-lottery-footer-col:first-child{min-width: 40%;}

.hdxs-lottery-footer-logo {
    height: 38px;
    margin-bottom: 15px;
    filter: brightness(0) invert(1);
}

.hdxs-lottery-footer-title {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hdxs-lottery-footer-links {
    list-style: none;
    padding: 0;
}

.hdxs-lottery-footer-links li { margin-bottom: 9px; }

.hdxs-lottery-footer-links a {
    color: #64748b;
    text-decoration: none;
    transition: 0.2s;
    font-size: 13.5px;
}

.hdxs-lottery-footer-links a:hover {
    color: #ef4444; /* Đỏ giống logo */
}

.hdxs-lottery-btn-mini {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    margin-right: 8px;
    margin-top: 10px;
    border: 1px solid #334155;
    color: #fff;
}

.hdxs-lottery-btn-mini.tele { background: #0284c7; border-color: #0284c7; }

.hdxs-lottery-footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #1e293b;
    text-align: center;
}

.hdxs-lottery-source-note {
    font-size: 11px;
    color: #475569;
    max-width: 700px;
    margin: 10px auto 0;
    line-height: 1.5;
}
.error-page{min-height:600px; text-align: center; color:var(--primary-white)}.error-page img{max-height:400px}.error-page a{color:var(--primary-white)}
/* Khung bọc tổng thể */
.tryspin-guide-wrapper {
    background: #fff9e6; /* Màu nền vàng nhạt nhẹ nhàng tạo sự chú ý */
    border: 1px dashed #ffb84d;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin: 15px;
}

/* Dòng chữ hướng dẫn */
.tryspin-guide-wrapper .guide-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 12px;
    line-height: 1.4;
}
.tryspin-guide-wrapper .guide-text i {
    color: #ff9800;
    margin-right: 5px;
}

/* Định dạng lại nút bấm chính */
.btn-spin-style {
    position: relative;
    overflow: hidden; /* Bắt buộc để chạy hiệu ứng vệt sáng lấp lánh */
    background: linear-gradient(135deg, #e43b23 0%, #0017ec 100%); /* Gradient đỏ rực rỡ */
    color: #fff;
    border: none;
    padding: 8px 35px;
    font-weight: bold;
    font-size: 15px;
    letter-spacing: 0.5px;
    border-radius: 30px; /* Bo tròn viền dạng kẹo cho hiện đại */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(228, 59, 35, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;

    /* Kích hoạt hiệu ứng phóng to thu nhỏ nhịp thở (Pulse) */
    animation: tryspinPulse 2s infinite;
}

/* Hiệu ứng Hover chuột vào */
.btn-spin-style:hover {
    background: linear-gradient(135deg, #e43b23 0%, #0017ec 100%);
    box-shadow: 0 6px 20px rgba(228, 59, 35, 0.6);
    transform: translateY(-1px);
}

/* Trạng thái khi nút bị Disable (Đang quay số) */
.btn-spin-style:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    animation: none !important; /* Tắt hiệu ứng nhấp nháy khi đang quay */
}

/* Hiệu ứng xoay tròn icon khi đang hoạt động */
.btn-spin-style.is-loading .icon-spin i {
    animation: fa-spin 1s infinite linear;
}

/* Tạo vệt sáng lấp lánh (Shine Effect) lướt qua sau mỗi 3 giây */
.btn-spin-style::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: tryspinShine 3s infinite ease-in-out;
}
.search-dream-container {
    background: #ffffff;
    padding: 35px 40px 20px 40px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.search-dream-container:hover {
    transform: translateY(-2px);
}

/* Tiêu đề chính */
.search-dream-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Tiêu đề phụ/Mô tả ngắn */
.search-dream-sub {
    font-size: 14px;
    color: #636e72;
    margin-bottom: 25px;
}

/* Form và thanh input wrap */
.search-form-group {
    position: relative;
    display: flex;
    align-items: center;
    background: #f1f3f6;
    border: 2px solid transparent;
    border-radius: 50px; /* Bo tròn hoàn toàn tạo cảm giác hiện đại */
    padding: 6px 6px 6px 20px;
    transition: all 0.3s ease;
}

/* Hiệu ứng khi người dùng click vào ô tìm kiếm */
.search-form-group:focus-within {
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(43, 90, 158, 0.15);
}

/* Icon kính lúp nằm trong ô input */
.search-icon-left {
    color: #b2bec3;
    font-size: 18px;
    margin-right: 12px;
}

/* Ô nhập liệu */
.search-dream-input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.search-dream-input::placeholder {
    color: #b2bec3;
}

/* Nút Tìm kiếm */
.search-dream-btn {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    width: 130px;
}

.search-dream-btn:hover {
    background: #1e4375;
    box-shadow: 0 4px 12px rgba(43, 90, 158, 0.3);
}

/* Phần gợi ý từ khóa (Tags nhanh) */
.suggested-tags {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #636e72;
}

.tag-link {
    color: var(--primary);
    text-decoration: none;
    background: #f1f3f6;
    padding: 4px 12px;
    border-radius: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tag-link:hover {
    background: #e1e5eb;
    color: #1e4375;
}



/* Khung bọc ngoài màu sáng kem dịu mắt */
.extension-fast-wrapper {
    background: #fdfbf7;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #f0f0f0;
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    -webkit-overflow-scrolling: touch;
}

/* Ẩn thanh cuộn mặc định */
.extension-fast-wrapper::-webkit-scrollbar { display: none; }
.extension-fast-wrapper { scrollbar-width: none; -ms-overflow-style: none; }

.extension-fast-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px;
    width: max-content;
    margin: 0 auto;
}

.extension-fast-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.extension-fast-group-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.extension-fast-icon-flash {
    color: #ff9800;
}

/* Thiết kế nút bấm viên thuốc */
.extension-fast-item {
    font-size: 13px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease-in-out;
}

.extension-fast-item-dream {
    color: #444444;
}

/* HIỆU ỨNG HOVER */
.extension-fast-item:hover {
    border-color: #960018;
    background-color: #fff5f6;
    color: #960018;
}
.extension-fast-item-dream:hover {
    border-color: #ff9800;
    background-color: #fff9f0;
    color: #ff9800;
}

/* Trạng thái Badge ẩn mặc định */
.extension-fast-status-badge {
    display: none;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* 1. TRẠNG THÁI: SẮP QUAY */
.extension-fast-item.extension-fast-state-upcoming {
    border-color: #ff9800 !important;
}
.extension-fast-item.extension-fast-state-upcoming .extension-fast-status-badge {
    display: inline-block;
    background-color: #fff3e0;
    color: #e65100;
}

/* 2. TRẠNG THÁI: TRỰC TIẾP */
.extension-fast-item.extension-fast-state-live {
    border-color: #d32f2f !important;
    background-color: #fff5f5 !important;
}
.extension-fast-item.extension-fast-state-live .extension-fast-status-badge {
    display: inline-block;
    background-color: #d32f2f;
    color: #ffffff;
    position: relative;
    padding-left: 14px;
    animation: extensionFastSmoothPulse 1.4s infinite ease-in-out;
}
.extension-fast-item.extension-fast-state-live .extension-fast-status-badge::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background-color: #ffffff;
    border-radius: 50%;
}

/* Các thành phần phụ */
.extension-fast-group-divider {
    width: 1px;
    height: 16px;
    background-color: #e0e0e0;
}
.extension-fast-hot-dot {
    width: 5px;
    height: 5px;
    background: #ff3b30;
    border-radius: 50%;
    display: inline-block;
}

/* Hiệu ứng nhấp nháy êm ái */
@keyframes extensionFastSmoothPulse {
    0% { opacity: 0.6; transform: scale(0.98); }
    50% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0.6; transform: scale(0.98); }
}

/* Responsive Mobile */
@media (max-width: 992px) {
    .extension-fast-container { justify-content: flex-start; margin: 0; }
    .extension-fast-wrapper { padding: 12px 0; }
}







/* Responsive cho thiết bị di động nhỏ */
@media (max-width: 480px) {
    .search-dream-container {
        padding: 25px 20px;
    }
    .search-form-group {
        flex-direction: column;
        border-radius: 15px;
        padding: 15px;
        gap: 12px;
        background: #f1f3f6;
    }
    .search-icon-left {
        display: none; /* Ẩn icon bên trái trên mobile cho gọn */
    }
    .search-dream-input {
        text-align: center;
        padding: 5px 0;
    }
    .search-dream-btn {
        width: 100%;
        justify-content: center;
        border-radius: 10px;
    }
}
/* Khai báo Keyframes cho hiệu ứng */
@keyframes tryspinPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.04); box-shadow: 0 4px 20px rgba(228, 59, 35, 0.6); }
    100% { transform: scale(1); }
}

@keyframes tryspinShine {
    0% { left: -50%; }
    30% { left: 150%; }
    100% { left: 150%; }
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spinning-effect { color: #1a73e8; font-weight: bold; } /* Hiệu ứng chữ đổi màu lúc đang quay */
/* FIX MOBILE CỰC NHỎ (Dưới 350px) */
@media (max-width: 350px) {
    .tk0009-data {
        flex-direction: column; /* Chuyển sang xếp dọc */
        align-items: flex-start;
        gap: 4px;
    }
    .tk0009-progress {
        width: 100%;
        flex: none;
    }
}

/* RESPONSIVE CHO MOBILE */
@media screen and (max-width: 768px) {
    .xs-header {
        display: none; /* Ẩn header gốc */
    }

    .xs-row {
        flex-wrap: wrap; /* Cho phép các ô rớt dòng */
        border-bottom: 1px solid var(--border); /* Tách biệt từng ngày */
        background: #fff;
    }

    .xs-cell {
        flex: 0 0 50%; /* Mỗi ô chiếm 1/2 chiều rộng màn hình */
        justify-content: space-between;
        padding: 12px 15px;
        box-sizing: border-box;
    }

    /* Ô ngày tháng chiếm full 100% chiều rộng để làm tiêu đề khối */
    .xs-cell.xs-date {
        flex: 0 0 100%;
        background-color: #f0f7ff;
        justify-content: center;
        border-bottom: 1px solid var(--border);
    }

    /* Hiển thị nhãn (0, 1, 2...) bên trái số dữ liệu */
    .xs-cell[data-label]::before {
        content: attr(data-label);
        font-weight: bold;
        color: #666;
        font-size: 14px;
    }

    .hdxs-lottery-footer-col{width: 100%; min-width: auto; flex: auto; margin: 0 0 30px 0;}
    .hdxs-lottery-footer-col:last-child{margin-bottom: 0;}
    .hdxs-lottery-footer-bottom{margin-top: 20px;}
    .hdxs-lottery-footer{padding: 20px 0;}
}

@media screen and (max-width: 400px) {
    .nav-item{padding:6px 9px; }
    .xs-cell {
        flex: 0 0 100%; /* Màn hình quá nhỏ thì xếp 1 cột dọc luôn */
    }
}

@media screen and (max-width: 375px) {
    .quick-nav-list{gap: 7px;}
    .nav-item{padding:6px 9px; font-size: 13px;}
    .xs-cell {
        flex: 0 0 100%; /* Màn hình quá nhỏ thì xếp 1 cột dọc luôn */
    }
}

/* RESPONSIVE CHO MOBILE */
@media (max-width: 768px) {
    .tx-grid-wrapper {
        /* Chuyển thành 1 cột duy nhất, chiều cao lúc này tự theo nội dung */
        grid-template-columns: 1fr;
        border-right: 1px solid var(--border);
    }

    .tx-item {
        height: auto;
    }
}

/* RESPONSIVE CHUẨN */
@media (max-width: 768px) {
    /* Trên màn hình nhỏ, ép cuộn ngang để không bị nhảy dòng số */
    .tx-main-wrapper {
        overflow-x: auto;
        display: block;
    }

    .tx-grid-row {
        min-width: 600px; /* Độ rộng tối thiểu để bảng không bị nát */
    }
}

@media (max-width: 480px) {
    .tx-cell {
        padding: 8px 2px;
        font-size: 12px;
    }
    .tx-num {
        font-size: 14px;
    }
}

/* Responsive cho mobile */
@media (max-width: 600px) {
    .lotto-search-body {
        flex-direction: column;
        align-items: stretch;
    }
    .lotto-search-action {
        margin-left: 0;
    }
    .lotto-stats-col {
        padding: 8px 4px;
        font-size: 0.85rem;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .kn-res-history-row { flex-direction: column; align-items: flex-start; }
    .kn-res-history-info, .kn-res-history-tags { width: 100%; }
    .kn-res-history-tags { grid-template-columns: repeat(4, 1fr); }

    .content-news img,
    .content-news video {
        max-width: 100% !important;
        width: 85% !important;
        height: auto !important;
    }
}

/* Responsive */
@media (max-width: 500px) {
    .m3d-res-content { font-size: 18px; padding: 10px; }
    .m3d-info-header, .m3d-info-row { font-size: 14px; word-break: break-all;
        overflow-wrap: break-word;}
    .m3d-col-1 { width: 50px; }
    .m3d-col-3 { width: 60px; }
    .m3d-col-4 { width: 80px; }

    .content-news img,
    .content-news video {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}