@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Regular.ttf') format('truetype');
    font-weight: 400; /* Normal */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-Black.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}

@font-face {
    font-family: 'Lexend';
    src: url('/assets/fonts/Lexend-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* ExtraLight */
    font-style: normal;
}

:root {
    /* Màu chữ */
    --text-primary: black; /* Màu Đen xám: Dành cho nội dung chính, văn bản dài */
    --text-highlight: #4CAF50; /* Màu Xanh lá cây: Dành cho tiêu đề chính, điểm nhấn */
    --text-secondary: #80CBC4; /* Màu Xanh ngọc lam nhạt: Dành cho tiêu đề phụ, mô tả ngắn */
    --text-muted: #757575; /* Màu Xám nhạt: Dành cho chú thích, thông tin phụ */
    --text-error: #C20000;
    /* Màu nền */
    --background-main: #FFFFFF; /* Màu Trắng: Nền chính tạo cảm giác thoáng */
    --background-secondary: #F5F5F5; /* Màu Xám nhạt: Nền phụ, làm dịu mắt */
    --background-grey: #F7F8F9; /*Nên xám*/
    /* Màu chủ đạo */
    --primary-color: #003366; /* Màu Xanh dương đậm:  */
    --secondary-color: #4CAF50; /* Màu Xanh lá cây đậm:*/
    --sub-btn-color: #009BA1; /* Màu xanh lục lam */

    --color-orange: #F2711C; /* Màu cam */
    /* Màu phụ trợ */

    --sub-color: #4CAF50; /* Màu Xanh ngọc đậm */
    --accent-color: #80CBC4; /* Màu Xanh ngọc lam nhạt */
    --alert-error: #FF5252; /* Màu Đỏ: Cảnh báo lỗi quan trọng */
    --alert-warning: #FFC107; /* Màu Vàng cam: Cảnh báo bình thường */

    --btn-hover-color: #F0F8FF;
}

html, body {
    font-size: 14px;
    color: var(--text-primary);
}

.tvnd-name {
    font-family: 'Times New Roman' !important;
    white-space: nowrap;
    font-style: normal;
}


.introduction {
    font-family: 'Times New Roman';
    margin: 10px 0px;
    font-size: 1.1rem;
    color: #5F5F5F;
    font-weight: bold;
}

a.cmlink {
    color: var(--text-primary) !important;
}

.header a.cmlink {
    font-weight: 600 !important;
}

.font-12 {
    font-size: 12px !important;
}


.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.mg-top-10 {
    margin-top: 10px !important;
}

.mg-bottom-10 {
    margin-bottom: 10px !important;
}

.pd-left-10 {
    padding-left: 10px !important;
}

.mg-right-10 {
    margin-right: 10px !important;
}

.bg-default {
    background: var(--background-grey);
}

.bg-white {
    background: #FFF;
}

.title-box {
    border-bottom: solid 3px var(--accent-color);
    color: var(--primary-color);
    font-weight: bold;
    padding-bottom: 3px;
    text-transform: uppercase;
}


.pr-color {
    color: #00436b !important;
}

.gray-color {
    color: #ddd !important;
}

.grey-color {
    color: #767676 !important;
}

.line-hg-cm {
    line-height: 1.4285em
}

#main-content img {
    width: 100%;
    border: solid 1px #f5f5f5;
}


.ui.tabular.menu .active.item {
    background: none #FFFFFF;
    color: var(--primary-color);
    border-top-width: 1px;
    font-weight: bold;
    margin-bottom: unset !important;
    box-shadow: none;
    border-radius: unset !important;
    border: none;
    /* border-bottom: solid 3px #00436b;*/
}


.ui.tabular.menu .item {
    padding: 5px 20px !important;
    /* border-bottom: solid 3px var(--primary-color);*/
    font-weight: bold;
}



#main-content {
    text-align: justify;
}

    #main-content blockquote {
        color: black;
        padding-left: 12px;
        border-left: 4px solid;
        border-color: #00436b;
        margin: 0;
        font-style: italic;
    }


        #main-content blockquote + p, p + blockquote {
            margin-top: 1em !important;
        }


/*#main-content p:has(img) + p {
        margin-top: -16px;
        padding: 10px;
        text-align: center !important;
        background-color: #f5f5f5;
        font-size: 14px;
    }*/
#table-of-contents {
    background-color: #f6fbff;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 0.5rem;
}

    #table-of-contents h3 {
        font-size: 1em;
        text-align: center
    }

    #table-of-contents ul {
        margin: unset;
        list-style-type: none;
        padding-left: 0px;
    }

    #table-of-contents li {
        margin: 5px 0px;
        font-weight: bold;
        font-size: 14px;
    }

        #table-of-contents li a {
            color: #00436b;
        }


.ul-more-news {
    list-style: none;
    padding: 0;
}

    .ul-more-news li {
        position: relative;
        margin-bottom: 10px;
        padding-left: 12px;
        text-indent: 0;
    }

        .ul-more-news li::before {
            content: "-";
            position: absolute;
            left: 0;
        }


.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-11 {
    display: -webkit-box;
    -webkit-line-clamp: 11;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-13 {
    display: -webkit-box;
    -webkit-line-clamp: 13;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-column {
    width: 100%;
    padding: 5px;
    /* border-radius:50%; */
}

.menu-top {
    display: flex !important;
}

.menu-left {
    display: none !important;
}

    .menu-left.login-bar {
        display: none !important;
    }

.login-bar {
    display: block !important;
}

.login-bar-header {
    /* width: 45% !important;*/
    text-align: right !important;
}

.user-sign-in {
    text-align: right !important;
}


@media only screen and (max-width: 991px) {
    .menu-top {
        display: none !important;
    }

    .menu-left {
        display: block !important;
        width: 100%;
        margin-bottom: 10px;
    }

    #dv-logo-mobile {
        display: block !important;
    }

    .menu-left.login-bar {
        display: block !important;
        /*margin-top: 10px !important;*/
        padding-left: 1px !important;
        margin-bottom: 14px !important;
        text-align: center !important;
    }


    .login-bar-header {
        width: 100% !important;
        text-align: center !important;
    }

    .menu-right {
        display: block !important;
    }

    .news-time {
        margin-top: -20px !important;
    }

    #hd-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

        #hd-main .column {
            width: 100% !important;
        }

            #hd-main .column:first-child {
                width: 50% !important;
                padding-bottom: -30px !important;
                padding-bottom: 0 !important;
            }

            #hd-main .column:nth-child(2) {
                width: 50% !important;
                padding-top: 33px !important;
                float: right !important;
                text-align: right;
                padding-right: 5px !important;
                padding-bottom: 0 !important;
            }

            #hd-main .column:nth-child(3) {
                width: 100% !important;
            }

    .ui.menu-button {
        width: auto;
        /*   width: 20% !important;*/
        /*padding-top: 15px !important;*/
    }

    .menu-button.menu-bar {
        margin-bottom: 10px !important;
        background-color: #00436b !important;
        color: white !important;
        width: 100% !important;
    }

    .menu-button.menu-login {
        margin-bottom: 10px !important;
        background-color: #00436b !important;
        color: white !important;
        width: 100% !important;
    }

    .login-bar {
        display: none !important;
    }

    .search-column {
        width: 70% !important;
        /*        float: inline-end !important;
        padding: revert;*/
        padding-top: 15px !important;
    }

    .ui.items:not(.unstackable) > .item > .image, .ui.items:not(.unstackable) > .item > .image > img {
        max-width: 100% !important;
        width: auto !important;
        max-height: none !important;
    }

    .ui.items:not(.unstackable) > .item > .image {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }



    /*#dv-menu-mucluc {
        max-width: 300px !important;
        min-width: 300px !important;
    }*/
    /*#dvToolVanBan {
        width: 322px !important;
        left: auto !important;
    }*/


    #dvToolVanBanSearch {
        max-width: 100% !important;
        left: auto !important;
    }

    .user-sign-in {
        text-align: unset !important;
        margin-bottom: 0 !important;
    }

    .flex-center {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 10px;
    scrollbar-width: none;
    width: auto;
}

    .scroll-container::-webkit-scrollbar {
        display: none;
    }

.scroll-item {
    display: inline-block;
    padding: 5px !important;
    background-color: #80cbc433;
    border-radius: 10px;
    text-decoration: none;
    color: #ff5722;
    font-size: 14px;
    white-space: nowrap;
}

    .scroll-item:hover {
        text-decoration: underline;
    }

.button-sign {
    margin-bottom: 16px !important;
}

    .button-sign img {
        padding-right: 5px;
    }

    .button-sign span {
        text-align: center;
        justify-items: center;
    }

.align-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal-login .close {
    top: 0.5rem !important;
    right: 0.5rem !important;
    color: rgba(0, 0, 0, 0.87) !important;
}

.login-out {
    padding-right: 5px;
}

    .login-out button {
        background-color: #00436b !important;
        color: white !important;
    }

.search-column input {
    border-radius: 30px !important;
}

.declare-legal {
    background-color: #80cbc41f;
    padding: 1px 8px;
    border-radius: 5px;
    margin-top: 10px;
    font-size: 12px;
    font-style: italic;
    color: #545454;
}

    .declare-legal div {
        padding-bottom: 8px;
    }

    .declare-legal .brand-name {
        font-style: normal;
    }

.label .green {
    background: var(--secondary-color) !important;
}

button .primary {
    background: var(--primary-color) !important;
}

.hidden {
    display: none !important;
}


/* Firefox */
.custom-scroll {
    scrollbar-width: thin; /* Làm thanh cuộn mỏng hơn */
    scrollbar-color: #ccc rgba(0, 0, 0, 0.01); /* Màu thumb và track */
}

    /* Webkit Browsers (Chrome, Edge, etc.) */
    .custom-scroll::-webkit-scrollbar {
        width: 4px; /* Độ rộng của thanh cuộn */
        height: 4px; /* Độ cao của thanh cuộn ngang */
    }

    .custom-scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #ccc, #aaa); /* Gradient nhẹ */
        border-radius: 9999px; /* Bo tròn mạnh để đảm bảo luôn tròn */
        border: 2px solid transparent; /* Thêm viền trong suốt để tạo khoảng cách */
        background-clip: padding-box; /* Đảm bảo viền trong suốt không bị che */
        box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); /* Hiệu ứng bóng bên trong */
    }

        .custom-scroll::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(to bottom, #aaa, #888); /* Đậm hơn khi hover */
        }

    .custom-scroll::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.05); /* Nền track nhạt */
        border-radius: 9999px; /* Bo góc track */
    }

    .custom-scroll::-webkit-scrollbar-button {
        display: none;
    }

.btn-opacity {
    opacity: 1 !important;
}

    .btn-opacity:hover {
        opacity: 0.8 !important;
    }

.black {
    font-size: 14px !important;
    color: var(--text-primary);
}

div:where(.swal2-icon) {
    margin: 1.8em auto .6em;
}

/*div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--text-highlight);
    border-radius: 4px;
}*/

    div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus,
    div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm):focus-visible {
        box-shadow: none;
    }

.p-10 {
    padding: 10px !important;
}

.highlight {
    font-size: 16px;
    font-weight: 600;
    color: #026fb0;
    cursor: pointer;
}

.margin-0 {
    margin: 0 !important;
}

.padding-bottom-0 {
    padding-bottom: 0 !important;
}

.padding-service {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.ui.pagination.menu .active.item {
    background-color: #00436b !important;
    font-weight: 600 !important;
    color: white !important;
}

/*Mobile mode*/
@media screen and (max-width:480px) {
    .ui.grid > * {
        padding-left: 0rem;
        padding-right: 0rem;
    }
}

.btn-sub-secondary {
    background-color: var(--background-main) !important;
    color: #009BA1 !important;
    border: 1px solid #009BA1 !important;
}

    .btn-sub-secondary:hover {
        opacity: 0.8;
    }

.w-100 {
    width: 100%;
}

.w-90 {
    width: 90%;
}

.w-80 {
    width: 80%;
}

.w-70 {
    width: 70%;
}

.w-60 {
    width: 60%;
}

.w-50 {
    width: 50%;
}

.w-40 {
    width: 40%;
}

.w-30 {
    width: 30%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}

.w-auto {
    width: auto;
}

.h-100 {
    height: 100%;
}

.h-90 {
    height: 90%;
}

.h-80 {
    height: 80%;
}

.h-70 {
    height: 70%;
}

.h-60 {
    height: 60%;
}

.h-50 {
    height: 50%;
}

.h-40 {
    height: 40%;
}

.h-30 {
    height: 30%;
}

.h-20 {
    height: 20%;
}

.h-10 {
    height: 10%;
}

.h-auto {
    height: auto;
}

.d-flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-direction-column {
    flex-direction: column;
}

.text-center {
    text-align: center;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-end {
    justify-content: end;
}

.justify-content-space-between {
    justify-content: space-between;
}

.align-items-start {
    align-items: start;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: end;
}

.gap-x1 {
    gap: 4px;
}

.gap-x2 {
    gap: 8px;
}

.gap-x3 {
    gap: 12px;
}

.gap-x4 {
    gap: 16px;
}

.gap-x5 {
    gap: 20px;
}

.gap-r05 {
    gap: .5rem;
}

.gap-r1 {
    gap: 1rem;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.ui-header {
    font-weight: 600;
    color: black;
    margin: 0em 0em 1rem 0em;
}

.font-16 {
    font-size: 16px;
}

.cursor-pointer {
    cursor: pointer;
}

    .cursor-pointer:hover {
        text-decoration: underline;
    }

/*target các thiết bị có cảm ứng (touch), như smartphone/tablet.*/
@media (pointer: coarse) {
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
    }
}

.header-modal-color {
    border-bottom: 0px;
    background: linear-gradient(3deg, #37A1D5 -19.67%, #1D546F 97.94%) !important;
    color: white !important;
}

.border-radius-modal {
    border-radius: 20px !important;
}

.close-modal-color {
    color: white !important;
}

.ui.breadcrumb .right.menu .item {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600;
}

.line-hg-14 {
    line-height: 1.4;
}
.btn-radius-2rem {
    border-radius: 2rem !important;
}
.btn-radius-1rem {
    border-radius: 1rem !important;
}
.border-radius-left-1rem {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}