@font-face {
    font-family: 'SVN-Avo';
    src: url('./SVN-Avo.ttf') format('truetype'); /* Kiểm tra đúng đường dẫn và định dạng file */
    font-weight: normal;
    font-style: normal;
}

/* Nếu có bản In đậm (Bold) */
@font-face {
    font-family: 'SVN-Avo';
    src: url('./SVN-Avo-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
#homepage{
    font-family: 'Montserrat', sans-serif;
}
.input-row {
    display: flex;
    flex-wrap: wrap; /* Cho phép rớt dòng trên mobile */
    margin: 0 -10px; /* Bù trừ cho padding của item */
}

.input-item {
    /* Chia đều 25% cho mỗi ô trên desktop */
    flex: 0 0 25%;
    padding: 0 10px; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Đẩy text báo lỗi xuống dưới input */
    margin-right: 4px !important;
    margin-bottom: 5px !important;
}

/* Style cho các ô input/select (giống ảnh 100%) */
.field-blue {
    width: 100%;
    height: 48px;
    background: linear-gradient(to right, #004ecc, #0084ff) !important;
    border: 2px solid #ffffff;
    border-radius: 25px;
    color: white;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
    font-family: 'SVN-Avo', sans-serif; 
}
/* Cho các trình duyệt hiện đại */
.field-blue::placeholder {
    text-align: center;
}

/* Hỗ trợ thêm cho IE/Edge cũ nếu cần */
.field-blue:-ms-input-placeholder {
    text-align: center;
}
.blue-select option {
    background-color: #2161ce; /* Nền xanh cho list xuống */
    color: #ffffff;            /* Chữ trắng cho list xuống */
    padding: 10px;
}
/* Container chứa select và mũi tên */
.input-item {
    position: relative;
    width: 100%;
    max-width: 300px; /* Bạn có thể điều chỉnh độ rộng tùy ý */
    margin-bottom: 20px;
}

/* Tùy chỉnh thẻ select */
.field-blue.form-select {
    /* Màu nền Gradient từ xanh đậm sang xanh nhạt */
    background: linear-gradient(to right, #004ecc, #0084ff) !important;
    color: white !important;

    /* Font chữ và định dạng chữ */
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    text-align-last: center; /* Căn giữa chữ trên một số trình duyệt */

    /* Bo tròn hoàn toàn và viền */
    border-radius: 50px !important;
    border: 2px solid #0056b3 !important;
    padding: 12px 40px 12px 20px !important;

    /* Xóa mũi tên mặc định */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    height: 3rem;
    min-width: 170px;
}

/* Vẽ mũi tên tam giác màu vàng */
.yellow-triangle {
    position: absolute;
    right: 15px;
    top: 22px; /* Căn chỉnh tùy theo chiều cao của select */
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #fff200; /* Màu vàng rực */
    pointer-events: none; /* Quan trọng: để click xuyên qua vào select */
    z-index: 10;
}
/* Text báo lỗi bên dưới */
.error-msg {
    color: #ff0000;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 15px;
    font-weight: bold;
    /* Mặc định ẩn, khi có lỗi thì cho hiển thị */
    display: block; 
}

/* Xử lý riêng cho Captcha để input và ảnh nằm cùng 1 ô */
.captcha-inner {
    position: relative;
    width: 100%;
}

.captcha-box {
    position: absolute;
    right: 2px;
    top: 39%;
    transform: translateY(-50%);
    background: white;
    height: 40px;
    border-radius: 17px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    display: flex;
    align-items: center;
    width: 138px;
}

/* --- Responsive cho Mobile --- */
@media (max-width: 992px) {
    .input-item {
        flex: 0 0 50%; /* Tablet hiện 2 cột */
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .input-item {
        flex: 0 0 100%; /* Mobile hiện 1 cột */
    }
    .action-row {
        flex-direction: column;
        text-align: center;
    }
}

/* CSS cho nút đỏ và text điều khoản (như cũ) */
.action-row { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.btn-spin { 
    background: linear-gradient(to bottom, #ff3b3b, #bf0000);
    border: 2px solid #ffdf3a; border-radius: 35px; color: #fff;
    padding: 15px 40px; font-size: 20px; font-weight: 900; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: SVN-Avo; 
}
.terms-text { font-size: 13px; color: #333; max-width: 500px;font-weight: 600; }
/* 3 ô đầu tiên chiếm 22% */
.input-item:nth-child(1),
.input-item:nth-child(2),
.input-item:nth-child(3) {
    flex: 0 0 21%;
    padding: 0 5px; /* Giảm padding một chút để hàng cân đối hơn */
}

/* Ô thứ tư (Captcha) chiếm 34% */
.input-item:nth-child(4) {
    flex: 0 0 34%;
    padding: 0 5px;
}
.captcha-inner input {
    flex: 0 0 80%;
    text-align: left !important; 
    padding-left: 20px;
    background: linear-gradient(to right, #004ecc, #0084ff) !important;
}
.captcha-inner input {
    flex: 0 0 80%;
    text-align: left !important; /* Canh lề trái */
    padding-left: 15px !important; /* Tạo khoảng trống 20px so với lề trái */
    box-sizing: border-box; /* Đảm bảo padding không làm tăng chiều rộng ô */
}
.captcha-inner input::-webkit-input-placeholder { text-align: left !important; }
.captcha-inner input::-moz-placeholder { text-align: left !important; }
.captcha-inner input:-ms-input-placeholder { text-align: left !important; }
.lucky-width {
    margin-top: -130px !important;
    width: 90% !important;
}
.leftms{
    margin-left:-100px !important;
}
.container3{
    width: 100% !important;
    padding-left: 7% !important;
    padding-right: 7% !important;
    display: flex;
    position: relative;}
.line-thele-new {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0%, -20%);
}
.line-thele-cttg {
    width: 30%;
    transform: translate(15%, 0%);
}
.box-thele-ct-c2 {
    transform: translate(0, 21%);
}
.mgbt40{margin-bottom:15% !important;}
.form-giaithuong-3{transform: translate(0%, 0%);}
.form-giaithuong-2{transform: translate(0%, 0%);}
.form-giaithuong{width:100% !important;}
.box-ct {
    display: flex !important;
    align-items: center;
    position: relative;

    background: linear-gradient(to right, #1a3ab2, #4d7bf6);
    border: 5px solid #f9d423;

    /* Bo góc bên phải cực đại */
    border-radius: 100px;

    /* Đẩy box sang phải nhường chỗ cho ảnh 350px */
    margin-left: 180px; 
    margin-bottom: 50px;
    height: auto !important;
    min-height: auto;

    /* CHIẾN THUẬT MỚI: Dùng filter thay vì box-shadow */
    /* drop-shadow này chỉ tạo bóng sang phải và xuống dưới, không tỏa sang trái */
    filter: drop-shadow(15px 12px 10px rgba(0, 0, 0, 0));
    margin-bottom:20px !important;
}
.box-tb {
    display: flex !important;
    align-items: center;
    position: relative;

    background: linear-gradient(to right, #921010, #e61919); 
    border: 5px solid #f9d423;

    /* Bo góc bên phải cực đại */
    border-radius: 100px;

    /* Đẩy box sang phải nhường chỗ cho ảnh 350px */
    margin-left: 180px; 
    margin-bottom: 50px;
    height: auto !important;
    min-height: auto;

    /* CHIẾN THUẬT MỚI: Dùng filter thay vì box-shadow */
    /* drop-shadow này chỉ tạo bóng sang phải và xuống dưới, không tỏa sang trái */
    filter: drop-shadow(15px 12px 10px rgba(0, 0, 0, 0));
    margin-bottom:20px !important;
}


/* 1. Thiết lập khung chứa chung */

/* 3. Xử lý Icon để đè lên thanh vàng (Không bị rớt) */
.form-giaithuong {
    position: absolute;
    /* Đẩy icon về phía trái để đè lên thanh vàng */
    top: 50%;
    transform: translate(-20%, -53%);
    width: 100% !important; /* Điều chỉnh kích thước icon vừa vặn */
    z-index: 10;
}

.form-giaithuong img {
    display: block;

}

/* 4. Style cho phần text bên phải (col-9) */
.col-9.padding-form {
    color: #0054a6;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.4;
    padding-left: 140px; /* Tạo khoảng trống để không bị icon đè mất chữ */
}
.padding-formcss {
    color: #0054a6 !important;
}

/* 5. Xử lý riêng cho phần footer (Khách hàng ngẫu nhiên...) */
.col-6.row {
    margin-top: 20px;
    background: transparent; /* Không có nền vàng */
    border: none;
}

.col-6 .col-9 {
    padding-left: 140px; /* Căn lề thẳng hàng với nội dung bên trên */
    color: #0054a6;
    font-size: 18px;
}
.padding-form {
    font-size: 100%;
    line-height:120%;
    color: white;
}
.line-bottom-dt{
    width: 30% !important;
    transform: translate(0%, -30%);position: absolute;}
.font-footer{
    font-size: 20px;
    font-weight: 700;
    color: white;
}
.mt-auto-height {
    padding: 2% 2% 7px 2% !important;
}
.xengaytrungliencss{transform: translate(2%, 70%);}
div.anhthongbao img{width: 50%;margin: 0 auto;display:block}
.mt-1body img {
    width: 110% !important;
}
.body-center img {
    width: 110% !important;
}
.body-center img {
    width: 110% !important;
}
.mt-2body {
    margin-top: 16% !important;
    transform: translate(-30%, 0);
}
.mt-3body {
    margin-top: 30% !important;
    transform: translate(-40%, 0);
}
.line-left {
    position: absolute;
    left: 0;
    top: -37%;
    width: 45% !important;
}
.line-left-dt{width: 10% !important;}
/* Dành cho Chrome, Safari, Edge và Opera */
.input-item input[name="phone"]::-webkit-outer-spin-button,
.input-item input[name="phone"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    text-align:center;
}

/* Dành cho Firefox */
.input-item input[name="phone"] {
    -moz-appearance: textfield;
}
.input-item input[name="code"]::-webkit-outer-spin-button,
.input-item input[name="code"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    text-align:center;
}

/* Dành cho Firefox */
.input-item input[name="code"] {
    -moz-appearance: textfield;
}