.content-contain {
    font-family: "Roboto", sans-serif !important;
    margin-bottom: 70px
}

.containerlogins {
    border: 1px #c0c0c0 solid;
    border-radius: 30px;
    margin: auto;
    background: #ECACB3;
}

.login-leftct {
    padding: 20px;
    background: #FFF;
    border-radius: 30px;
}

.content-cos {
    display: flex;
    align-items: center;
}

.grtitlessd {
    display: flex;
    align-content: center;
    align-items: center;
}

.sogdtitle {
    font-size: 18px;
    color: #DC3546;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 20px;
    width: 100%;
}

.subtitlesgd {
    text-align: center;
    margin: 12px 0px;
    margin-top: 20px;
}

.subnamhoc {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #DC3546;
    margin-bottom: 16px;
}

.input-g1eew {
    position: relative;
}

    .input-g1eew input, .input-g1eew select {
        padding-left: 40px;
    }

    .input-g1eew svg {
        position: absolute;
        top: 8px;
        left: 12px;
    }

.btnlogins {
    min-width: 160px;
}

.grsausi02 {
    text-align: center;
}

.uisad90 {
    font-size: 18px;
    margin-top: 30px;
    color: #fff;
    font-weight: 600;
}

.uisad30 {
    font-size: 14px;
    margin-top: 10px;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.bor-boldbig {
    height: 40px;
    background: #2090FF;
    margin-bottom: 8px;
}

.bor-boldsmall {
    height: 20px;
    background: #2090FF;
    margin-bottom: 4px;
}

.iconhsinffo {
    border-radius: 50%;
    padding: 10px;
    top: 43px;
    left: 32%;
}

.item-infihs {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #C7C7C7;
    padding: 21px 0;
}

.card-dky h5 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 0px;
    color: #202020;
    line-height: 30px
}

.lable-iteminfihs {
    min-width: 184px;
    width: 184px;
    color: #65676B
}

.text-iteminfihs {
    font-weight: 500;
    color: #1E1E1E
}

.warning-contact {
    border: 1px dashed #D02F44;
    background-color: #FFF3CD;
    padding: 14px 8px;
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    margin-top: 8px
}

.titlelefftinfo {
    text-align: center;
}

    .titlelefftinfo label {
        font-size: 20px;
        font-weight: 600;
        background: #fff;
        padding: 0px 12px;
    }

.col-form-label {
    font-weight: 500;
    width: 100px;
    min-width: 100px;
    font-size: 15px;
    color: #202020
}

.item-gripform {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px
}

.form-dang-ky > .card-dky {
    padding: 16px 0
}

.form-dang-ky h5, .form-dang-ky .nguyenvong {
    padding: 0 24px
}

select.input-contact {
    cursor: pointer
}

.input-contact {
    border-color: #D1D5DB;
    padding: 6px 12px !important;
    height: 40px;
}

    .input-contact:focus {
        box-shadow: none !important;
        border-color: #86b7fe
    }

.input-kdsd {
    width: 100%;
}

.text-chuyen {
    font-weight: 700;
    font-size: 18px;
    color: #1E1E1E;
}

.content-right-dasdasi {
    border-left: 3px #2090FF solid;
}

.grrightitem {
    position: relative;
}

.col-sso9 {
    color: #111827;
    font-weight: 600;
    margin-right: 16px
}

.text-nguyenvong {
    color: #2764E7;
    font-weight: 600;
    line-height: 20px;
    font-size: 18px;
    margin-bottom: 20px
}

input[type="radio"], input[type="checkbox"] {
    margin-right: 8px;
    border-color: #4B5563;
    cursor: pointer
}

    input[type="radio"]:checked, input[type="checkbox"]:checked {
        border-color: #487FFF
    }

.form-check-input:focus {
    box-shadow: none;
    border-color: #4B5563
}

.form-check-label {
    font-size: 15px;
}

.select-huyen {
    width: 190px;
}

.select-truong {
    width: calc(100% - 590px);
    max-width: 340px
}

.select-mon {
    max-width: 340px
}

.select-truong-nv {
    width: calc(100% - 508px);
    max-width: 340px
}

.select-truong-thuong {
    width: calc(100% - 468px);
    max-width: 340px
}

.truong-batky select {
    padding: 6px 32px 6px 10px
}

.btn-submit {
    display: flex;
    gap: 8px;
    height: 68px;
    width: 423px;
    font-size: 24px;
    font-weight: 700;
    border-radius: 8px
}

.luu-y {
    gap: 8px;
    margin-top: 36px;
    color: #65676B;
    font-size: 15px
}

.content-warning {
    font-size: 15px;
    color: #1E1E1E
}

.form-check-input:checked[type=radio] {
    background-image: url('/img/dot-blue.svg');
    background-color: white
}

.confirm-thi {
    padding: 20px 24px;
    border-bottom: 1px dashed #C7C7C7
}

/* ===== COMBO DANGKY - BASE (desktop) ===== */
.combo-dangky {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    .combo-dangky > div {
        margin-right: 12px;
    }

    .combo-dangky .text-nowrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 14px;
    }

    .combo-dangky .form-select:not(:disabled) {
        border-color: #D1D5DB;
        background-color: #fff;
        color: #1E1E1E;
        cursor: pointer
    }

    .combo-dangky .form-select:disabled {
        border-color: #D1D5DB;
        background-color: #ECECEC;
        color: #858585;
    }

    .combo-dangky .form-select:focus {
        box-shadow: none;
    }

/* ===== COMBO DANGKY ROW ===== */
.combo-dangky-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex-wrap: nowrap;
}

.combo-dangky-errors {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 134px;
    margin-top: 4px;
}

    .combo-dangky-errors .text-danger:empty {
        display: none;
    }

/* ===== CHECK KO CHON TRUONG ===== */
.check_ko_chon_truong {
    margin-top: 6px;
    min-width: 0;
    flex-shrink: 1;
}

    .check_ko_chon_truong .form-check {
        white-space: normal;
        word-break: break-word;
    }

    .check_ko_chon_truong .field-validation-error {
        display: none;
    }

/* ===== FORM SECTIONS ===== */
.form-chuyen {
    padding: 16px 40px
}

    .form-chuyen .col-sso9 {
        width: 165px;
        min-width: 165px;
        justify-content: start;
        margin-right: 20px;
    }

    .form-chuyen .select-truong, .form-chuyen .select-mon {
        width: calc(100% - 508px);
        margin-right: 20px;
    }

.label-duthi {
    color: #000000;
    font-weight: 700;
    font-size: 18px
}

.form-tichhop {
    padding: 20px 40px;
}

.text-chonnhom {
    color: #2764E7;
    font-weight: 600;
    font-size: 18px
}

.colorred-s0 {
    color: #DC3546;
}

.lable-iteminfih {
    margin-right: 8px;
}

.text-iteminfih {
    font-weight: 700;
}

.disable-link {
    pointer-events: none;
    opacity: 0.5;
    border-radius: 8px
}

.card-daychuyen {
    background-color: #F3F9FF;
    padding: 20px 24px;
    border-radius: 8px
}

.form-check-input {
    width: 24px;
    min-width: 24px;
    height: 24px;
    min-height: 24px;
}

/* ===== CSS HEADER ===== */
.topbar-f {
    width: 100%;
    z-index: 100;
    padding: 12px;
    border-bottom: 1px #c2c2c2 solid;
}

.header-top {
    height: 80px;
    border-bottom: 1px #c2c2c2 solid;
}

    .header-top .medium.fz-15 {
        margin-bottom: 0px;
        font-size: 15px;
        font-weight: 500;
    }

    .header-top .nav-title-bot.medium {
        margin-bottom: 0px;
        font-weight: 600;
        color: #1060BB;
    }

.list-inline .nav-item a {
    text-decoration: none;
    padding-right: 12px;
    color: #2C2C2C;
    font-weight: 500;
}

.nav-item.active a {
    color: #1060BB;
}

.footer-2 {
    margin-top: 15px;
    color: rgb(255, 255, 255);
    background-image: linear-gradient(to right, #653EDA 100%, #024FCC 100%);
}

.text-start-top {
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
}

.text-start-bot {
    font-weight: 400;
    font-size: 13px;
    color: #FFFFFF;
}

/* ===== TRANG DANG KY THANH CONG ===== */
#contentexportpdf .item-infihs {
    display: block;
    border-bottom: 1px #bdbdbd solid;
}

    #contentexportpdf .item-infihs .lable-iteminfih {
        color: #616161;
        font-size: 15px;
    }

    #contentexportpdf .item-infihs .text-iteminfih {
        font-size: 17px;
    }

.item-gripform label span {
    margin-left: 2px;
    position: relative;
    bottom: 3px
}

#contentexportpdf .input-g1eew select {
    padding-left: 20px;
}

.card-dky {
    margin-bottom: 20px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 1px 4px rgba(12, 12, 13, 0.05);
    border: 1px solid #ebedf0;
}

header {
    background: #fff;
}

/* ===== SELECT2 - GLOBAL ===== */
.select2-container {
    width: 190px !important;
    min-width: 190px;
    flex-shrink: 0;
}

    /* Bỏ display:flex - đây là nguyên nhân gây vỡ layout nội bộ */
    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #D1D5DB !important;
        border-radius: 6px !important;
        background-color: #fff;
        position: relative; /* dùng position thay vì flex */
    }

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
    padding-left: 10px !important;
    padding-right: 40px !important; /* chừa chỗ cho arrow + clear button */
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Clear button (dấu x) - nằm bên phải, trước arrow */
.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 38px;
    line-height: 38px;
    position: absolute;
    right: 0px; /* nhường chỗ cho arrow */
    top: 0;
    padding: 0 4px;
    color: #000000;
    font-size: 16px;
    z-index: 1;
}

/* Mũi tên dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    opacity: 1 !important;
    height: 36px !important;
    width: 24px !important;
    right: 4px !important;
    top: 1px !important;
    display: block !important;
    position: absolute;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        opacity: 1 !important;
        border-color: #6B7280 transparent transparent transparent !important;
        border-width: 6px 5px 0 5px !important;
        margin-top: -3px !important;
        display: block !important;
    }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #6B7280 transparent !important;
    border-width: 0 5px 6px 5px !important;
}

.select2-dropdown {
    border-color: #D1D5DB;
    z-index: 9999;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #000000;
}

/* Mobile: full width */
@media (max-width: 1024px) {
    .select2-container {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex-shrink: 1;
    }
}

/* ===== MISC ===== */
.disabled-checkbox {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.readonly-look {
    pointer-events: none;
    opacity: 0.5;
    background-color: #e9ecef;
}

#IconUserLogin:hover {
    cursor: pointer;
}

/* ===== KHẢO SÁT CHỌN MÔN - section 3 - DESKTOP ===== */
.truong-batky .combo-dangky {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

    .truong-batky .combo-dangky .col-sso9 {
        width: auto;
        min-width: fit-content;
        white-space: nowrap;
        margin-right: 8px;
        margin-bottom: 0;
    }

    .truong-batky .combo-dangky > div {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        margin-right: 0;
    }

    .truong-batky .combo-dangky .form-select {
        width: 100%;
    }

/* ===== RESPONSIVE: max-width 1024px ===== */
@media (max-width: 1024px) {
    .confirm-thi {
        flex-direction: column;
        margin-top: 8px;
        gap: 8px;
        padding: 12px 24px;
    }

    .combo-dangky {
        flex-direction: column;
        align-items: start;
        gap: 6px;
    }

    .combo-dangky-row {
        flex-wrap: wrap;
        gap: 8px;
    }

        .combo-dangky-row > div {
            width: 100% !important;
            max-width: 100% !important;
            margin-right: 0 !important;
        }

    /* Select2 full width trên tablet/mobile */
    .select2-container {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        flex-shrink: 1;
    }

    .select-huyen,
    .select-truong,
    .select-truong-nv,
    .select-truong-thuong {
        width: 100% !important;
        max-width: 100% !important;
    }

    .col-sso9.text-nowrap {
        width: 100%;
        justify-content: flex-start;
        white-space: normal !important;
    }

    .combo-dangky-errors {
        padding-left: 0;
    }

    .check_ko_chon_truong {
        width: 100%;
        margin-top: 0;
    }

    .combo-dangky.mt-2 {
        margin-top: 12px !important
    }

    .text-mon-chuyen {
        width: 120px
    }

    .text-mon-chuyen-2 {
        padding: 0 12px
    }

    .form-tichhop {
        padding: 20px 24px
    }

        .form-tichhop > div:last-child {
            margin-top: 16px !important
        }

    .form-chuyen .col-sso9 {
        width: fit-content
    }

    .form-chuyen select {
        width: 280px !important;
    }

    .notemonthi-chon {
        margin-left: 0px !important
    }

    .truong-batky select {
        width: 140px
    }

    /* Chọn môn tablet: label full width, select 2 cột */
    .truong-batky .combo-dangky {
        flex-wrap: wrap !important;
        gap: 8px;
    }

        .truong-batky .combo-dangky .col-sso9 {
            width: 100% !important;
            white-space: normal;
            margin-bottom: 4px;
            min-width: unset;
        }

        .truong-batky .combo-dangky > div {
            flex: 1 1 calc(50% - 8px);
            max-width: calc(50% - 8px);
            min-width: 0;
        }
}

/* ===== RESPONSIVE: 768px - 1024px ===== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .text-mon-chuyen {
        width: 140px
    }

    .text-mon-chuyen-2 {
        width: 152px
    }

    .combo-dangky {
        gap: 8px;
    }

    .basic-info, .form-dang-ky {
        width: 100%
    }
}

/* ===== RESPONSIVE: max-width 600px ===== */
@media (max-width: 600px) {
    .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .navbar-brand img {
        width: 56px;
    }

    .navbar {
        flex-wrap: initial;
    }

    .navbar-collapse {
        position: absolute;
        top: 80px;
        left: 0px;
        width: 100%;
        background: #fff;
        z-index: 999;
        border-bottom: 1px #c2c2c2 solid;
    }

    .text-nowrap {
        white-space: normal !important;
    }

    .haysic9e {
        padding-right: 0px;
    }

    .grrightitem-title {
        font-size: 17px;
        padding-left: 46px;
    }

    .combo-dangky .text-nowrap {
        text-align: left !important;
        justify-content: initial;
    }

    .text-truong-thuong {
        display: contents
    }

    .form-select {
        margin-top: 4px;
        margin-bottom: 8px;
    }

    .combo-dangky > div {
        margin-right: 0px;
    }

    .pe-0 {
        padding-right: 12px;
    }

    .grbuttom {
        display: contents !important;
    }

        .grbuttom a {
            width: 100%;
            margin-bottom: 8px
        }

    /* Chọn môn mobile: select full width từng cái */
    .truong-batky .combo-dangky > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

/* ===== RESPONSIVE: min-width 1800px ===== */
@media (min-width: 1800px) {
    .form-chuyen {
        padding: 16px 58px;
    }

    .form-tichhop {
        padding: 20px 58px;
    }
}