/* ===== BIẾN CSS VARIABLES ================================================ */
.vnlotto2 {
    /* Màu sắc */
    --color-bg-dark: #360404;
    --color-bg-white: #ffffff;
    --color-border-light: #f1f1f1;
    --color-bg-item: #FFEDEE;
    --color-badge-bg: #8F1616;
    --color-badge-shadow: rgba(143, 22, 22, .25);
    --color-badge-shadow2: rgba(0, 0, 0, .05);
    --color-value: #8e1515;
    --color-unit: #a16a6a;
    --color-banner-caption: #FFD166;
    --color-card-bg: #FFECEC;
    --color-card-border: #F6C8C8;
    --color-note-bg: #FFDADA;
    --color-note: #571414;
    --color-note-bold: #AC0B0B;
    --color-title: #1e1e1f;
    
    /* Font size */
    --font-size-badge: 14px;
    --font-size-value: 14px;
    --font-size-unit: 14px;
    --font-size-cap1: 22px;
    --font-size-cap2: 32px;
    --font-size-cap3: 22px;
    --font-size-note: 14px;
    --font-size-title-mobile: 18px;
    --font-size-cap2-mobile: 36px;

    /* Border radius */
    --border-radius: 8px;
    --border-radius-item: 4px;
    
    /* Box shadows */
    --box-shadow-card: 0 2px 12px rgba(0, 0, 0, .08);
    --box-shadow-banner: 0 2px 12px rgba(0, 0, 0, .2);
    --box-shadow-badge: 0 4px 10px var(--color-badge-shadow) inset, 0 2px 6px var(--color-badge-shadow2);
    
    /* Gradients */
    --banner-gradient: linear-gradient(180deg, rgba(54, 4, 4, 0.10) 0%, rgba(54, 4, 4, 0.65) 55%, rgba(54, 4, 4, 0.90) 100%);
}

/* ===== NỀN & CONTAINER ==================================================== */
.vnlotto2 {
    background: var(--color-bg-dark);
    /* nền đỏ sậm toàn block */
}

.vnlotto2__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 424px 294px 522px;
    padding: 16px 0px;
}

.vnlotto2__col {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
}

/* ===== CỘT TRÁI: BẢNG VIÊN SỐ ============================================ */
.vnlotto2__left {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--box-shadow-card);
}

.vnlotto2 .vnlotto__card-body {
    padding: 16px;
}

/* Lưới item 3 cột */
.vnlotto2 .vnlotto__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.vnlotto__item-special{
   display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: #FFEFEF;
  border-radius: 4px;
  max-width: 128px;
}

/* Viên item */
.vnlotto2 .vnlotto__item {
    display: flex;
    align-items: center;
    background: var(--color-bg-item);
    border-radius: var(--border-radius-item);
}

/* Vòng tròn số */
.vnlotto2 .vnlotto__badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: var(--font-size-badge);
    color: #fff;
    background: var(--color-badge-bg);
    box-shadow: var(--box-shadow-badge);
}

.vnlotto2 .bg-orange {
    background: var(--color-badge-bg);
}

/* giữ màu đỏ sẫm */

/* Giá trị + đơn vị */
.vnlotto2 .vnlotto__value {
    font-size: var(--font-size-value);
    font-weight: 700;
    color: var(--color-value);
    margin-left: 14px;
}

.vnlotto2 .vnlotto__unit {
    font-size: var(--font-size-unit);
    color: var(--color-unit);
    margin-left: 4px;
}

/* ===== CỘT GIỮA: BANNER ẢNH + CHỮ ======================================== */

.vnlotto2__banner {
    position: relative;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--box-shadow-banner);
}

.vnlotto2__banner>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.vnlotto2__banner::after {
    content: "";
    position: absolute;
    background: var(--banner-gradient);
}

.vnlotto2__banner-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    text-align: center;
    padding: 0 16px;
    color: var(--color-banner-caption);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}

.vnlotto2__banner-caption .cap-1 {
    color: #fff;
    opacity: .95;
    font-size: var(--font-size-cap1);
    font-weight: 700;
    margin-bottom: 4px;
}

.vnlotto2__banner-caption .cap-2 {
    font-size: var(--font-size-cap2);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-banner-caption);
}

.vnlotto2__banner-caption .cap-3 {
    color: var(--color-banner-caption);
    font-size: var(--font-size-cap3);
    font-weight: 700;
    margin-top: 4px;
}

/* ===== CỘT PHẢI: 2 CARD BIỂU ĐỒ ========================================== */
.vnlotto2__right {
    display: grid;
    gap: 8px;
    margin-left: 8px;
}

.vnlotto2__card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    overflow: hidden;
    border-radius: var(--border-radius);
    height: fit-content;
}

.vnlotto2__card-title {
    text-align: center;
    font-weight: 800;
    color: var(--color-title);
    padding-top: 16px;
}

.vnlotto2__chart {
    height: 154px;
}

.vnlotto2__chart canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.vnlotto2__note {
    background: var(--color-note-bg);
    color: var(--color-note);
    padding: 6px 14px;
    font-size: var(--font-size-note);
    line-height: normal;
}
.vnlotto2__note > b{
    color: var(--color-note-bold);
}
/* ===== RESPONSIVE ========================================================= */
@media (max-width: 1200px) {
    .vnlotto2__inner {
        grid-template-columns: 1fr;
    }

    .vnlotto2__banner {
        min-height: 420px;
    }

    .vnlotto2 .vnlotto__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .vnlotto2 .vnlotto__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .vnlotto2__banner-caption .cap-2 {
        font-size: var(--font-size-cap2-mobile);
    }

    .vnlotto2__banner-caption .cap-1,
    .vnlotto2__banner-caption .cap-3 {
        font-size: var(--font-size-title-mobile);
    }
}


@media (max-width: 640px) {
    .vnlotto__card {
        flex: 1 1 100%;
    }

    .vnlotto__list {
        grid-template-columns: repeat(3, 1fr);
    }
    .vnlotto2 .vnlotto__card-body {
        padding: 8px;
    }
    .vnlotto2 .vnlotto__badge {
        width: 30px;
        height: 30px;
    }
    .vnlotto2 .vnlotto__value {
        font-size: 12px;
        margin-left: 8px;
    }
}


@media (max-width: 640px) {
    .vnlotto2 .vnlotto__value {
        margin-left: 4px;
    }
}