.appcontainerfull {
    max-width: 100%;
    padding-left: 3rem;
    padding-right: 3rem;
    position: relative;
}

.appcontainermaxwidth1500px {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}



.cursorpointer {
    cursor: pointer;
}

.objectfitcover {
    object-fit: cover;
}

.invisible {
    visibility: hidden;
}

.userselectnone {
    user-select: none;
}

.textuppercase {
    text-transform: uppercase
}

.bdsolid {
    border: solid;
}

.hmaxcontent {
    height: max-content;
}

.imgsquare {
    aspect-ratio: 1 / 1; /* chiều cao = chiều rộng */
    object-fit: cover; /* cắt ảnh cho vừa khung mà không méo */
}

/* ====== TEXT ELLIOSIS ====== */
.text-1line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* Chỉ hiển thị 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Cho phép xuống dòng */
}
.text-2line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Chỉ hiển thị 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* Cho phép xuống dòng */
}

/* ====== FONT FAMILY ====== */
.fontcorinthia {
    font-family: 'Corinthia', cursive !important;
}

/* ====== BACKGROUND COLOR ====== */
.bgblue {
    background-color: var(--BLUE);
}
.bgred {
    background-color: var(--RED);
}
.bgredlight {
    background-color: var(--REDLIGHT);
}
.bggreenlight {
    background-color: var(--GREENLIGHT);
}
.bgbluelight {
    background-color: var(--BLUELIGHT);
}
.bgbluelight3 {
    background-color: var(--BLUELIGHT3);
}
.bgtransparent {
    background-color: var(--TRANSPARENT);
}
.bgorange {
    background-color: var(--ORANGE);
}
.bgwhite {
    background-color: var(--WHITE);
}
.bgwhiteopacity10percent {
    background-color: var(--WHITEOPACITY10);
}
.bgwhiteopacity20percent {
    background-color: var(--WHITEOPACITY20);
}
.bgwhiteopacity60percent {
    background-color: var(--WHITEOPACITY60);
}
.bgwhiteopacity80percent {
    background-color: var(--WHITEOPACITY80);
}
.bggreylight {
    background-color: var(--GREYLIGHT);
}
.bggrey {
    background-color: var(--GREY);
}
.bgblackopacity50percent {
    background-color: var(--BLACKOPACITY50);
}
.bgblackopacity60percent {
    background-color: var(--BLACKOPACITY60);
}
.bgblackopacity70percent {
    background-color: var(--BLACKOPACITY70);
}

/* ====== BORDER WIDTH ====== */
.bdw1px {
    border-width: 1px !important;
}
.bdw0a7rem {
    border-width: 0.7rem !important;
}
.bdw1rem {
    border-width: 1rem !important;
}

/* ====== BORDER COLOR ====== */
.bdblue {
    border-color: var(--BLUE) !important;
}
.bdbluelight {
    border-color: var(--BLUELIGHT) !important;
}
.bdblack {
    border-color: var(--BLACK);
}
.bdgrey {
    border-color: var(--GREY);
}
.bdtransparent {
    border-color: var(--TRANSPARENT);
}
.bdwhite {
    border-color: var(--WHITE) !important;
}
.bdorange {
    border-color: var(--ORANGE) !important;
}

/* ====== TEXT COLOR ====== */
.textblue {
    color: var(--BLUE) !important;
}
.textbluelight {
    color: var(--BLUELIGHT) !important;
}
.textred {
    color: var(--RED) !important;
}
.textgrey {
    color: var(--TEXTGREY);
}
.textgreylight {
    color: var(--TEXTGREYLIGHT);
}
.textwhite {
    color: var(--WHITE);
}
.textblack {
    color: var(--TEXTBLACK);
}

/* ====== SIZE ====== */
.h15vh {
    height: 15vh;
}
.h16vh {
    height: 16vh;
}
.h18vh {
    height: 18vh;
}
.h20vh {
    height: 20vh;
}
.h25vh {
    height: 25vh;
}
.h30vh {
    height: 30vh;
}
.h35vh {
    height: 35vh;
}
.h70vh {
    height: 70vh;
}
.h86vh {
    height: 86vh;
}
.h100vh {
    height: 100vh;
}
.w50vw {
    width: 50vw;
}
.w86vw {
    width: 86vw;
}
.w100vw {
    width: 100vw;
}

.h1rem {
    height: 1rem;
}
.h1a3rem {
    height: 1.3rem;
}
.h1a5rem {
    height: 1.5rem;
}
.h2rem {
    height: 2rem;
}
.h3rem {
    height: 3rem;
}
.h4rem {
    height: 4rem;
}
.h5rem {
    height: 5rem;
}
.h7rem {
    height: 7rem;
}
.h10rem {
    height: 10rem;
}
.h13rem {
    height: 13rem;
}
.h15rem {
    height: 15rem;
}
.h20rem {
    height: 20rem;
}
.h23rem {
    height: 23rem;
}
.h25rem {
    height: 25rem;
}
.h30rem {
    height: 30rem;
}
.h35rem {
    height: 35rem;
}
.h40rem {
    height: 40rem;
}
.h50rem {
    height: 50rem;
}
.h50vh {
    height: 50vh;
}

.w0a5rem {
    width: 0.5rem;
}
.w0a8rem {
    width: 0.8rem;
}
.w1rem {
    width: 1rem;
}
.w1a3rem {
    width: 1.3rem;
}
.w1a5rem {
    width: 1.5rem !important;
}
.w2rem {
    width: 2rem !important;
}
.w3rem {
    width: 3rem !important;
}
.w4rem {
    width: 4rem !important;
}
.w5rem {
    width: 5rem;
}
.w7rem {
    width: 7rem;
}
.w10rem {
    width: 10rem;
}
.w12rem {
    width: 12rem;
}
.w13rem {
    width: 13rem;
}
.w15rem {
    width: 15rem;
}
.w20rem {
    width: 20rem;
}
.w25rem {
    width: 25rem;
}
.w30rem {
    width: 30rem;
}
.w40rem {
    width: 40rem;
}

.w-15 {
    width: 15%;
}
.w-18 {
    width: 18%;
}
.w-20 {
    width: 20%;
}
.w-25 {
    width: 25% !important;
}
.w-30 {
    width: 30% !important;
}
.w-35 {
    width: 35%;
}
.w-40 {
    width: 40%;
}
.w-45 {
    width: 45%;
}
.w-60 {
    width: 60%;
}

.h-30 {
    height: 30%;
}

.h60percent {
    height: 60%;
}

.h70percent {
    height: 70%;
}

.h80percent {
    height: 80%;
}

.h100vh-sub-10rem {
    height: calc(100vh - 10rem);
}

/* ====== SIZE SQUARE ====== */
.square1rem {
    height: 1rem !important;
    width: 1rem !important;
}
.square1a2rem {
    height: 1.2rem !important;
    width: 1.2rem !important;
}
.square1a5rem {
    height: 1.5rem !important;
    width: 1.5rem !important;
}
.square2rem {
    height: 2rem !important;
    width: 2rem !important;
}
.square2a5rem {
    height: 2.5rem !important;
    width: 2.5rem !important;
}
.square3rem {
    height: 3rem !important;
    width: 3rem !important;
}
.square3a5rem {
    height: 3.5rem !important;
    width: 3.5rem !important;
}
.square4rem {
    height: 4rem !important;
    width: 4rem !important;
}
.square5rem {
    height: 5rem !important;
    width: 5rem !important;
}
.square20rem {
    height: 20rem !important;
    width: 20rem !important;
}
.square30rem {
    height: 30rem !important;
    width: 30rem !important;
}
.square80rem {
    height: 80rem !important;
    width: 80rem !important;
}

/* ====== TEXT SIZE ====== */
.fs-4a5 {
    font-size: 1.375rem !important;
}
.fs-5a5 {
    font-size: 1.125rem !important;
}
.fs-0a8rem {
    font-size: 0.8rem !important;
}

.fs-5rem {
    font-size: 5rem !important;
}
.fs-6rem {
    font-size: 6rem !important;
}
.fs-7rem {
    font-size: 7rem !important;
}
.fs-10rem {
    font-size: 10rem !important;
}

/* ====== PADDING ====== */
.py-0a75rem {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

.px-1rem {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
.px-3rem {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}
.pt-30vh {
    padding-top: 30vh !important;
}

/* ====== MARGIN ====== */
.mt0a4rem {
    margin-top: 0.4rem !important;
}
.mt-10rem {
    margin-top: 10rem !important;
}
.mt-18rem {
    margin-top: 18rem !important;
}
.mt-26rem {
    margin-top: 26rem !important;
}
.mt-30rem {
    margin-top: 30rem !important;
}
.mt-35rem {
    margin-top: 35rem !important;
}
.mt-38rem {
    margin-top: 38rem !important;
}
.mt-40rem {
    margin-top: 40rem !important;
}
.mt-60vh {
    margin-top: 60vh !important;
}

/* ====== FLEX ====== */
.flex-1 {
    flex: 1;
}
.flex-2 {
    flex: 2;
}
.flex-3 {
    flex: 3;
}
.flex-4 {
    flex: 4;
}
.flex-5 {
    flex: 5;
}
.flex-6 {
    flex: 6;
}
.flex-7 {
    flex: 7;
}

/* ====== ROUNDED ====== */
.rounded50percent {
    border-radius: 50vh !important;
}

.rounded0a5rem {
    border-radius: 0.5rem !important;
}
.rounded1rem {
    border-radius: 1rem !important;
}
.rounded1a5rem {
    border-radius: 1.5rem !important;
}
.rounded2rem {
    border-radius: 2rem !important;
}

/* ====== BUTTON HOVER ====== */
.bthv-bgblue-textwhite {
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

    .bthv-bgblue-textwhite:hover {
        background-color: var(--BLUE) !important;
        color: var(--WHITE) !important;
        border: solid !important;
        border-width: 1px !important;
        border-color: var(--BLUE) !important;
    }

.bthv-bgbluelight-textwhite {
    transition: all 0.4s ease;
}

    .bthv-bgbluelight-textwhite:hover {
        background-color: var(--BLUELIGHT) !important;
        color: var(--WHITE) !important;
    }

.bthv-bgwhite-textblack {
    border: 1px solid transparent;
    transition: all 0.4s ease;
}

    .bthv-bgwhite-textblack:hover {
        background-color: var(--WHITE);
        color: var(--TEXTBLACK);
        border: solid;
        border-width: 1px;
        border-color: var(--BLACK);
    }

.bthv-bgblue-textwhite {
    border: 1px solid transparent !important;
    transition: all 0.4s ease;
}

    .bthv-bgblue-textwhite:hover {
        background-color: var(--BLUE);
        color: var(--WHITE);
        border: solid;
        border-width: 1px;
        border-color: var(--WHITE) !important;
    }

.bthv-tfs-1a05 {
    transition: transform 0.4s ease;
}
    .bthv-tfs-1a05:hover {
        transform: scale(1.05);
        transition: transform 0.4s ease;
    }
.bthv-tfs-1a1 {
    transition: transform 0.4s ease;
}
    .bthv-tfs-1a1:hover {
        transform: scale(1.1);
        transition: transform 0.4s ease;
    }
.bthv-tfs-1a2 {
    transition: transform 0.4s ease;
}
    .bthv-tfs-1a2:hover {
        transform: scale(1.2);
        transition: transform 0.4s ease;
    }

.bthv-top2rem {
    transition: transform 0.4s ease;
}
    .bthv-top2rem:hover {
        transform: translateY(-2rem);
        transition: transform 0.4s ease;
    }

.bthv-tfs1a2rem-top2rem {
    transition: transform 0.4s ease;
}
    .bthv-tfs1a2rem-top2rem:hover {
        transform: scale(1.2) translateY(-2rem);
        transition: transform 0.4s ease;
    }

.bthv-bdbluelight {
    border: 1.5px solid transparent !important;
    transition: all 0.4s ease;
}

    .bthv-bdbluelight:hover {
        transition: all 0.4s ease;
        border-width: 1.5px;
        border-color: var(--BLUELIGHT) !important;
    }

/* ====== Z INDEX ====== */
.zindexsub2 {
    z-index: -2 !important;
}
.zindexsub1 {
    z-index: -1 !important;
}
.zindex1 {
    z-index: 1 !important;
}
.zindex2 {
    z-index: 2 !important;
}
.zindex3 {
    z-index: 3 !important;
}
.zindex4 {
    z-index: 4 !important;
}
.zindex5 {
    z-index: 5 !important;
}
.zindex6 {
    z-index: 6 !important;
}

/* ====== BACKGROUMD GRADIENT ====== */
.bggd-135deg-bluelight2-yellowlight {
    background: linear-gradient( 135deg, var(--BLUELIGHT2) 0%, var(--YELLOWLIGHT) 100% );
}
.bggd-135deg-transparent-yellowlight {
    background: linear-gradient( 40deg, var(--TRANSPARENT) 0%, var(--YELLOW) 100%);
}
.bggd-90deg-blue-transparen {
    background: linear-gradient( to bottom, var(--BLUE) 30%, rgba(0, 123, 255, 0));
}
.bggd-90deg-white-transparen {
    background: linear-gradient( to bottom, var(--WHITE) 30%, rgba(0, 123, 255, 0));
}


/* ====== Animation Show ====== */


/* ====== LEFT, RIGHT, TOP, BOTTOM ====== */
.left0 {
    left: 0;
}
.left0a5rem {
    left: 0.5rem;
}
.left2rem {
    left: 2rem;
}
.left4rem {
    left: 4rem;
}
.left6rem {
    left: 6rem;
}
.left8rem {
    left: 8rem;
}
.left14rem {
    left: 14rem;
}
.left26rem {
    left: 26rem;
}
.left30rem {
    left: 30rem;
}

.rightsub5rem {
    right: -5rem;
}
.rightsub3rem {
    right: -3rem;
}
.rightsub0a5rem {
    right: -0.5rem;
}
.right0a5rem {
    right: 0.5rem;
}

.top1rem {
    top: 1rem;
}
.top3rem {
    top: 3rem;
}
.top7rem {
    top: 7rem;
}
.top10rem {
    top: 10rem;
}
.top10a5rem {
    top: 10.5rem;
}
.top11rem {
    top: 11rem;
}
.top12rem {
    top: 12rem;
}
.top16rem {
    top: 16rem;
}
.top18rem {
    top: 18rem;
}

/* ====== SHADOW ====== */
.shadow-xl {
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.9) !important;
}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {

}

@media (max-width: 768px) {

}








.ant-select-selector,
.ant-select:not(.ant-select-customize-input) .ant-select-selector,
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
    border-radius: 100vh !important;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
    border-color: var(--BLACK) !important;
    height: 100% !important;
}

.ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
    font-size: 1.125rem !important;
    padding-right: 0px;
    transition: background 0.3s ease;
}

.ant-select-arrow {
    margin-right: 0.5rem;
    font-size: 1.125rem !important;
}

.ant-select-item-option-content {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 1.125rem !important;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: var(--BLUELIGHT2) !important;
    color: var(--BLUE) !important;
    font-weight: bold !important;
}

.ant-select-dropdown {
    padding: 0 !important;
    border-radius: 0.5rem !important;
}