/* Css Common */
    /* Custom Font */
        /* Regular */
        @font-face {
          font-family: 'Roboto-Regular';
          font-style: normal;
          font-weight: 400; 
          src: 
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Regular.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
          font-display: swap; 
        }
        /* Italic */
        @font-face {
          font-family: 'Roboto-Italic';
          font-style: italic;
          font-weight: 400; 
          src: 
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Italic.ttf') format('truetype'), /* Safari, Android, iOS */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Italic.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
          font-display: swap;
        }
        /* Medium */
        @font-face {
          font-family: 'Roboto-Medium';
          font-style: normal;
          font-weight: 500;
          src:
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Medium.ttf') format('truetype'), /* Safari, Android, iOS */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Medium.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
          font-display: swap;
        }
        /* Bold */
        @font-face {
          font-family: 'Roboto-Bold';
          font-style: normal;
          font-weight: 700; 
          src: 
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
               url('https://cdn.24h.com.vn/css/fonts/Roboto-Bold.woff') format('woff');/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
          font-display: swap;
        }
    /* End Custom Font */

    /* Reset */
        /* Css Varibles */
        :root{
          scroll-behavior: initial; /* Custom Boostrap */
          --color-main:#252525;
          --color-white: #fff;
          --color-red: red;
          --color-yellow: #F59A23;
          --color-24hc: #78b43d;
          --color-24hc-2: #626366;
          --color-link-24hc: #78b43d;
          --hover-color-24hc: #78b43d;
          --hover-color-24hc-2: #626366;
          --hover-all-24hc: #78b43d;
          --hover-bg-scroll-top: #626366;
          --hover-bg-24hc-main: #626366;
          --border-circle: 999px;
          --bg-white: #fff;
          --bg-body: #f0f0f5;
          --bg-24hc-main: #78b43d;
          --bg-scroll-top: #78b43d;
          --bg-popup-24hc: rgba(0, 0, 0, 0.55);
          --prm-w-p-sidebar: 227px;
          --prm-h-header-trans-top: 50px;
        }
        /* End Css Varibles */
        html {
          text-rendering: optimizeLegibility !important; /* Làm cho text rõ nét hơn */
          -webkit-text-size-adjust: 100%; /* Resize Text on Screen Mobile */
          -webkit-tap-highlight-color: transparent;
        }
        *, *:before,*:after {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* Reset xác định width,height của thành phần */
           -webkit-box-sizing: border-box;
        }
        body {
          --bs-body-line-height: initial; /* Custom Boostrap */
          font-size: 15px;
          color:var(--color-main);
          font-family: 'Roboto-Regular';
        }
        ul,ol,li,p,figure,.badge {
            margin: 0; /* Custom Boostrap */
            padding: 0;
            list-style: none;
            font-weight: inherit;
        }
        a { 
            color: var(--color-link-24hc);
            text-decoration: none;
            transition: all ease .3s;
        }
        h1,h2,h3,h4,h5,h6{
            margin: 0; /* Custom Boostrap */
            line-height: inherit; /* Custom Boostrap */
            font-weight: inherit;
        }
        textarea,
        input:matches(
        [type="email"],
        [type="number"],
        [type="password"],
        [type="search"],
        [type="tel"],
        [type="text"],
        [type="url"]
        ) {
            -webkit-appearance: none;
        }
        select,input,button,textarea{
            outline: none;
        }
        textarea{
          overflow: auto;
          resize: vertical;
          margin: 0;
        }
        .img-fluid {
          max-width: 100%;
          height: auto;
          vertical-align: middle; /* Xóa khoảng trắng thừa ở ảnh */
        } 
        .img-cover{
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
          object-fit: cover
        }
        .img-scale-down {
          width: 100%;
          height: 100%;
          -o-object-fit: scale-down;
          object-fit: scale-down;
        }
        .pos-rel{
          position: relative;
        }
        .pos-ab{
          position: absolute;
        }
        .pos-fixed{
          position: fixed;
        }
        .pos-sticky{
          position: sticky;
          top: 0;
          z-index: 1;
        }
        .pointer-events-none{
          pointer-events: none;
        }
        .user-select-none{
          user-select: none;
        }
        .flex-dir-col {
          flex-direction: column;
        }
        .overflow-h{ 
            overflow: hidden;
        }
        .overflow-x{ 
            overflow-x: auto;
        }
        .overflow-y{ 
            overflow-y: auto;
        }
        .cursor-pointer{ 
            cursor: pointer;
        }
        .vertical-mid{
            vertical-align: middle;
        }
        .z-index-1{
            z-index: 1;
        }
        .z-index-99{
            z-index: 99;
        }
        .z-index-9999{
            z-index: 9999;
        }
        .color-white {
            color:var(--color-white);
        }
        .color-red{
            color: var(--color-red);
        }
        .color-yellow{
            color: var(--color-yellow);
        }
        .color-main{
            color:var(--color-main); 
        }
        .color-24hc{
            color:var(--color-24hc); 
        }
        .color-24hc-2{
            color:var(--color-24hc-2); 
        }
        .hover-color-24hc:hover{ /* Hover Color Main  */
            color:var(--hover-color-24hc) !important;
        }
        .hover-color-24hc-2:hover{ /* Hover Color Main 2 */
            color:var(--hover-color-24hc-2) !important;
        }
        .bor-radius-3{
            border-radius: 3px;
        }
        .bor-radius-5{
            border-radius: 5px;
        }
        .bg-white-c{
            background: var(--bg-white);
        }
        .text-left {
            text-align: left !important;
        }
        .text-right {
            text-align: right !important;
        }
        .text-justify {
            text-align: justify !important;
        }
        .text-decor-under{
            text-decoration: underline;
        }
        .fw-bold,strong{
            font-family: 'Roboto-Bold' !important;
        }
        .fw-regu{
            font-family: 'Roboto-Regular' !important;
        }
        .fw-medium{
            font-family: 'Roboto-Medium' !important;
        }
        .fw-italic,em{
            font-family: 'Roboto-Italic' !important;
        }
        .w-50px{
            width: 50px;
        }
        .h-50px{
            height: 50px;
        }
        .h-100vh{
            height: 100vh;
        }
        .h-600px{
            height: 600px;
        }
        .lh-100{
            line-height: 100%;
        }
        .flex-1{
            flex: 1;
        }
        .flex-auto{
            flex: 0 0 auto;
        }
        .mw-0{
            min-width: 0;
        }
        .mar-auto{
            margin: 0 auto !important;
        }
        .no-bg{
            background: none !important;
        }
        .no-border{
            border: none !important;
        }
        .no-border-t{
            border-top: none !important;
        }
        .no-border-b{
            border-bottom: none !important;
        }
        .no-mar {
            margin: 0px !important;
        }
        .no-mar-t{
            margin-top: 0 !important;
        }
        .no-mar-r{
            margin-right: 0 !important;
        }
        .no-mar-b{
            margin-bottom: 0 !important;
        }
        .no-mar-l{
            margin-left: 0 !important;
        }
        .mar-t-5{
            margin-top: 5px !important;
        }
        .mar-t-10 {
            margin-top: 10px !important;
        }
        .mar-t-15 {
            margin-top: 15px !important;
        }
        .mar-t-20 {
            margin-top: 20px !important;
        }
        .mar-t-25 {
            margin-top: 25px !important;
        }
        .mar-t-30 {
            margin-top: 30px !important;
        }
        .mar-t-40 {
            margin-top: 40px !important;
        }
        .mar-t-50 {
            margin-top: 50px !important;
        }
        .mar-r-5 {
            margin-right: 5px !important;
        }
        .mar-r-10 {
            margin-right: 10px !important;
        }
        .mar-r-15 {
            margin-right: 15px !important;
        }
        .mar-r-20 {
            margin-right: 20px !important;
        }
        .mar-r-25 {
            margin-right: 25px !important;
        }
        .mar-r-30 {
            margin-right: 30px !important;
        }
        .mar-r-40 {
            margin-right: 40px !important;
        }
        .mar-b-5 {
            margin-bottom: 5px !important;
        }
        .mar-b-10 {
            margin-bottom: 10px !important;
        }
        .mar-b-15 {
            margin-bottom: 15px !important;
        }
        .mar-b-20{
            margin-bottom: 20px !important;
        }
        .mar-b-25 {
            margin-bottom: 25px !important;
        }
        .mar-b-30{
            margin-bottom: 30px !important;
        }
        .mar-b-40 {
            margin-bottom: 40px !important;
        }
        .mar-b-50 {
            margin-bottom: 50px !important;
        }
        .mar-l-3{
            margin-left: 3px !important;
        }
        .mar-l-5 {
            margin-left: 5px !important;
        }
        .mar-l-10 {
            margin-left: 10px !important;
        }
        .mar-l-15 {
            margin-left: 15px !important;
        }
        .mar-l-20 {
            margin-left: 20px !important;
        }
        .mar-l-25 {
            margin-left: 25px !important;
        }
        .mar-l-30 {
            margin-left: 30px !important;
        }
        .mar-l-40 {
            margin-left: 40px !important;
        }
        .no-padd {
            padding: 0px !important;
        }
        .no-padd-t{
            padding-top: 0 !important;
        }
        .no-padd-r{
            padding-right: 0 !important;
        }
        .no-padd-b{
            padding-bottom: 0 !important;
        }
        .no-padd-l{
            padding-left: 0 !important;
        }
        .padd-t-10{
            padding-top: 10px !important;
        }
        .padd-t-15{
            padding-top: 15px !important;
        }
        .padd-t-20{
            padding-top: 20px !important;
        }
        .padd-t-25{
            padding-top: 25px !important;
        }
        .padd-t-30{
            padding-top: 30px !important;
        }
        .padd-t-40{
            padding-top: 40px !important;
        }
        .padd-r-10{
            padding-right: 10px !important;
        }
        .padd-r-15{
            padding-right: 15px !important;
        }
        .padd-r-20{
            padding-right: 20px !important;
        }
        .padd-r-25{
            padding-right: 25px !important;
        }
        .padd-r-30{
            padding-right: 30px !important;
        }
        .padd-r-40{
            padding-right: 40px !important;
        }
        .padd-b-10{
            padding-bottom: 10px !important;
        }
        .padd-b-15{
            padding-bottom: 15px !important;
        }
        .padd-b-20{
            padding-bottom: 20px !important;
        }
        .padd-b-25{
            padding-bottom: 25px !important;
        }
        .padd-b-30{
            padding-bottom: 30px !important;
        }
        .padd-b-40{
            padding-bottom: 40px !important;
        }
        .padd-l-10{
            padding-left: 10px !important;
        }
        .padd-l-15{
            padding-left: 15px !important;
        }
        .padd-l-20{
            padding-left: 20px !important;
        }
        .padd-l-25{
            padding-left: 25px !important;
        }
        .padd-l-30{
            padding-left: 30px !important;
        }
        .padd-l-40{
            padding-left: 40px !important;
        }
    /* End Reset */

    /* Custom Container/Row */
        .container {
            padding: 0 20px;
            max-width: 100%;
        }
        .row {
          --gap: 10px;
          margin: 0 calc(-1 * var(--gap));
        }
        .row.gap-5px{ /* Custom 2 ben 10px */
           --gap: 5px;
        }
        .row.gap-5px>[class*=col], /* Custom 2 ben 10px */
        .row [class*=col-] {
          padding: 0 var(--gap);
        }
        .col-20{
          flex: 0 0 20%;
          max-width: 20%;
        }
    /* End Custom Container/Row */

    /* Custom Btn */
        .btn-24hc,
        .btn-outline-24hc{
            --bg-default: #78b43d;
            --bg-second: #e4e4e4;
            --color-second: #616161;
            --hover-bg-default: #8cce4b;
            --hover-bg-second: #dadada;
            padding: 0 15px;
            height: 40px;
            font-size: 15px;
            border-radius: 5px;
            border: none;
            transition: all ease .3s;
        }
        .btn-24hc{
            padding: 0 30px;
            background: var(--bg-default);
            color:var(--color-white);
        }
        .btn-outline-24hc{
            border: none;
            background: var(--bg-second);
            color: var(--color-second);
        }
        /* Hover Btn */
            .btn-24hc:hover{
                background: var(--hover-bg-default);
            }
            .btn-outline-24hc:hover{
                background: var(--hover-bg-second);
            }
        /* End Hover Btn */
    /* End Custom Btn */

    /* Custom ScrollBar */
        .scroll-24hc::-webkit-scrollbar,/* Default */
        .header-noti-24hc .list-noti::-webkit-scrollbar,
        .sidebar-24hc::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }
        .scroll-24hc::-webkit-scrollbar-track, /* Default */
        .header-noti-24hc .list-noti::-webkit-scrollbar-track,
        .sidebar-24hc::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 10px;
        }
        .scroll-24hc::-webkit-scrollbar-thumb, /* Default */
        .header-noti-24hc .list-noti::-webkit-scrollbar-thumb,
        .sidebar-24hc::-webkit-scrollbar-thumb {
            background:  #dadada;
            border-radius: 10px;
        }
    /* End Custom ScrollBar */

    /* Title Main & Info Header */
        .tit-24hc-main {
            padding: 10px;
        }
        .tit-24hc-main * {
            font-size: 20px;
        }
        .tit-24hc-main i {
            font-size: 25px;
        }
        .tit-24hc-main .btn-run {
            padding: 5px 10px;
            font-size: 14px;
            border: 1px solid currentColor;
            border-radius: var(--border-circle);
        }
        .tit-24hc-main .btn-pause,
        .tit-24hc-main .btn-pause * {
            font-size: 15px;
        }
        .tit-24hc-main .btn-menu .fa-ellipsis-vertical{
            font-size: 20px;
        }
        .info-24hc-main *{
            font-size: 15px;
        }
    /* End Title Main & Info Header */

    /* According Main */
        .accor-24hc {
            border: 1px solid #e4e4e4;
        }
        .accor-t-24hc {
            padding: 10px;
            background: #f7faf3;
            border-bottom: 1px solid #e4e4e4;
        }
        .accor-tit-24hc .num {
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: var(--bg-24hc-main);
            border-radius: var(--border-circle);
        }
        .accor-tit-24hc .txt {
            font-size: 16px;
        }
        .accor-t-24hc .accor-click-24hc * {
            font-size: 19px;
            color: #616161;
        }
        .accor-t-24hc .accor-click-24hc {
            position: relative;
        }
        .accor-t-24hc .accor-click-24hc .fa-chevron-down:after,
        .accor-t-24hc .accor-click-24hc .fa-chevron-up:after{
            content: "Thu gọn";
            position: absolute;
            width: 70px;
            top: -28px;
            right: 0;
            padding: 7px;
            background: #555;
            border-radius: 6px;
            font-family: 'Roboto-Regular';
            font-size: 13px;
            color: #fff;
            text-align: center;
            opacity: 0;
            visibility: hidden;
            transition: all ease .3s;
        }
        .accor-t-24hc .accor-click-24hc .fa-chevron-down:after{
            content:"Mở rộng"
        }
        .accor-t-24hc .accor-click-24hc:hover .fa-chevron-down:after,
        .accor-t-24hc .accor-click-24hc:hover .fa-chevron-up:after{
            opacity: 1;
            visibility: visible;
        }
        .accor-cont-24hc {
            padding: 15px 10px;
        }
        .accor-label-24hc{
            font-size: 15px;
            color: #333;
        }
        .accor-ins-24hc{
            color: #969696;
        }
        .accor-gr-input-24hc,
        .accor-gr-quickly-24hc .accor-input-24hc, /* Box Tim Kiem Muc Nhanh */
        .accor-gr-search-24hc, /* Box Search */
        .accor-gr-select-24hc, /* Box Select */
        .accor-calen-24hc .lib-calen-gr { /* Box Lib Calen */
            border: 1px solid #d1dfc3;
            border-radius: 3px;
            height: 40px;
        }
        [readonly] {
            background-color: #f7faf3; /* Fix Bg Ko Cho Actions(Hanh Dong) */
        }
        .accor-gr-quickly-24hc .accor-input-24hc, /* Box Tim Kiem Muc Nhanh */
        .accor-gr-search-24hc .accor-search-24hc, /* Box Search */
        .accor-select-24hc, /* Box Select */
        .accor-calen-24hc .accor-input-24hc, /* Box Lib Calen */
        .accor-gr-input-24hc .accor-input-24hc {
            font-size: 15px;
            padding: 0 10px;
        }
        .accor-gr-search-24hc i{ /* Box Search */
            font-size: 17px;
        }
        .accor-calen-24hc .lib-calen-icon , /* Box Lib Calen */
        .accor-gr-input-24hc .accor-count-24hc {
            padding: 0 10px;
            background: #d1dfc3;
            font-size: 14px;
            color: #333;
        }
        .accor-gr-input-24hc .btn-chosse{
            background: var(--bg-24hc-main);
            padding: 0 10px;
        }
        .accor-gr-input-24hc .btn-chosse:hover{
            background: var(--hover-bg-24hc-main);
        }
        .accor-gr-quickly-24hc .accor-input-24hc{ /* Box Tim Kiem Muc Nhanh */
            border-radius: 3px 3px 0 0;
        }
        .accor-gr-quickly-24hc .box-quickly{  /* Box Tim Kiem Muc Nhanh */
            max-height: 150px;
            border-radius: 0 0 3px 3px;
            border: 1px solid #d1dfc3;
            border-top: none;
        }
        .accor-gr-quickly-24hc .box-quickly select *,
        .accor-gr-quickly-24hc .box-quickly ul li *{ /* Box Tim Kiem Muc Nhanh Select */
            padding: 4px 10px;
            color: var(--color-main);
        }
        .accor-gr-quickly-24hc .box-quickly select option:checked,
        .accor-gr-quickly-24hc .box-quickly ul li:hover, 
        .accor-gr-quickly-24hc .box-quickly ul li.act{ /* Box Tim Kiem Muc Nhanh Select */
            background: #eef7e1;
        }
        .accor-cap-24hc{
            font-size: 13px;
        }
        .accor-radio-24hc .radio-gr *,
        .accor-checkbox-24hc .checkbox-gr *{
            font-size: 15px;
        }
        .accor-btn-outline-24hc {
            padding: 5px 15px;
            font-size: 14px;
            border-radius: var(--border-circle);
            border: 1px solid currentColor;
        }
        .accor-btn-outline-24hc:hover{
            background: var(--hover-all-24hc);
            color: var(--color-white);
        }
        .accor-spectit-24hc {
            --prm-h-top: 10px;
            border: 1px solid #d1dfc3;
            padding: 10px 20px;
            height: calc(100% - var(--prm-h-top));
        }
        .accor-spectit-24hc.no-h{
            height: auto;
        }
        .accor-spectit-24hc__tit {
            top: calc(-1 * var(--prm-h-top));
            padding: 0 10px;
            margin: 0 -10px;
        }
        .accor-spectit-24hc__tit .box-tit {
            font-size: 16px;
            color: #333;
        }
        .accor-spectit-24hc .link-choose-all {
            top: -20px;
            right: 0;
            font-size: 13px;
        }
        .accor-calen-24hc .txt {
            min-width: 40px;
        }
        .nameLineItemErr{
            border-color: red; /* Fix Bao Loi Thong Tin Chua Nhap */
        }
    /* End According Main */

    /* Pagination Main */
        .pagi-24hc * {
            --bg-act-pagi-main: #77b43d;
            --bor-pagi-main: #dee2e6;
            font-size: 14px;
        }
        .pagi-24hc .box-show .textbox {
            border: 1px solid var(--bor-pagi-main);
            padding: 2px 10px;
            border-radius: 3px;
        }
        .pagi-24hc .box-pagi {
            border: 1px solid var(--bor-pagi-main);
            background: var(--bg-white);
            border-radius: 5px;
            overflow: hidden;
        }
        .pagi-24hc .box-pagi .current,
        .pagi-24hc .box-pagi a {
            display: inline-block;
            padding: 10px 15px;
            color: var(--color-main);
            font-weight: inherit;
        }
        .pagi-24hc .box-pagi .current{
            background: var(--bg-act-pagi-main);
            color: var(--color-white);
        }
        .pagi-24hc .box-pagi a:hover{
            background: #f6f6f6;
        }
    /* End Pagination Main */

    /* PopUp Main */
        .popup-24hc {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-popup-24hc);
        }
        .popup-cont-24hc{
            min-width: inherit;
            max-width: 550px;
            margin: 0 20px;
            padding: 20px;
            border-radius: 5px;
        }
        .popup-cont-24hc.w-1024{
            min-width: 1024px;
        }
        .popup-tit2-24hc {
            border-bottom: 1px solid #e4e4e4;
        }
        .popup-tit2-24hc * {
            font-size: 16px;
        }
        .popup-tit-24hc,
        .popup-tit-24hc *{
            font-size: 20px;
        }
        .popup-des-24hc,
        .popup-des-24hc *{
            font-size: 13px;
            color: #7F7F7F;
        }
        .popup-tit-24hc *,
        .popup-des-24hc{
            line-height: 1.2;
        }
        .popup-caption-24hc .text{
            line-height: 1.3;
        }
        .popup-close-24hc {
            top: -12px;
            font-size: 18px;
            right: -12px;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: var(--bg-24hc-main);
            border-radius: var(--border-circle);
        }
        .popup-close-24hc:hover{
            background: var(--hover-bg-24hc-main);
        }
    /* End PopUp Main */

    /* Table Main */
        .table-24hc{
            --bg-table-default: #f7faf3;
            --bg-table-2: #eef7e1;
            --bg-table-3: rgb(254 255 128 / 30%);
        }
        .table-layout-fixed{
            table-layout: fixed;
        }
        .table-24hc .hover-icon:hover .opacity-0{
            opacity: 1 !important;
        }
        .table-24hc .accor-gr-input-24hc input, /* Custom Input */
        .table-24hc *{
            font-size: 14px;
            line-height: 1.3;
        }
        .table-24hc .pkLineItemName{
            font-size: 12px;
        }
        .table-default-24hc,
        .table-default-24hc th,
        .table-default-24hc td{
            background: var(--bg-table-default);
        }
        .table-bg2-24hc,
        .table-bg2-24hc th,
        .table-bg2-24hc td{
            background: var(--bg-table-2); /* Bg Table 2 */
        }
        .table-bg3-24hc,
        .table-bg3-24hc th,
        .table-bg3-24hc td{
            background: var(--bg-table-3); /* Bg Table 3 */
        }
        .table-24hc th,
        .table-24hc td{
            font-weight: inherit;
            vertical-align: middle;
        }
        .table-24hc.table>:not(caption)>*>*{ /* Custom Boostrap */
            padding: 10px 8px;
            color: var(--color-main);
        }
        .table-24hc.table-hover>tbody>tr:not(.table-bg2-24hc):hover>* { /* Custom Boostrap */
            --bs-table-bg-state: #f6f6f6;
        }
        .table-24hc.table-striped>tbody>tr:nth-of-type(even)>* { /* Custom Boostrap */
            --bs-table-color-type: var(--bs-table-striped-color);
            --bs-table-bg-type: var(--bs-table-striped-bg);
        }
        .table-24hc.table-striped>tbody>tr:nth-of-type(odd)>* { /* Custom Boostrap */
            --bs-table-bg-type: var(--bg-white);
        }
        .table-24hc .badge{ /* Custom Boostrap */
            padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
            font-size: 12px;
            border-radius: 5px !important;
        }
        .table-24hc .badge.text-bg-success {
            color: #77b43d!important;
            background-color: #77b43d1a!important;
        }
        .table-24hc .badge.text-bg-warning {
            color: #f7b731!important;
            background-color: #ffa22b1a!important;
        }
        .table-24hc .badge.text-bg-danger {
            color: #e82646!important;
            background-color: #ff382b1a!important;
        }
        .table-24hc .badge.text-bg-primary {
            color: #1170e4!important;
            background-color: #c7e0fd!important;
        }
        .table-24hc .badge.text-bg-secondary {
            color: #6c757d!important;
            background-color: #6c757d1a!important;
        }
        .table-24hc .badge.text-bg-light {
            color: #50D5FC!important;
            background-color: #50d5fc33!important;
        }
        .table-24hc .icon-actions * {
            font-size: 15px;
        }
        .table-24hc .icon-actions a {
            margin: 0 3px;
            padding: 5px 7px;
            border-radius: 5px;
            background: #e4e4e4;
            color: #616161 !important;
        }
        .table-24hc .icon-actions a:hover {
            background: var(--hover-color-24hc);
            color: var(--color-white) !important;
        }
        .table-24hc .switch {
          --bg-switch-act: #77b43d;
          --bg-switch: #ccc;
          width: 40px;
          height: 20px;
        }
        .table-24hc .switch input { 
          opacity: 0;
          width: 0;
          height: 0;
        }
        .table-24hc .switch .slider {
          inset: 0;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: var(--bg-switch);
          border-radius: var(--border-circle);
          -webkit-transition: .4s;
          transition: .4s;
        }
        .table-24hc .switch .slider:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 3px;
          bottom: 2px;
          background-color: var(--bg-white);
          border-radius: var(--border-circle);
          -webkit-transition: .4s;
          transition: .4s;
        }
        .table-24hc .switch:not(.no-act) input:checked + .slider {
          background-color: var(--bg-switch-act);
        }
        .table-24hc .switch input:focus + .slider {
          box-shadow: 0 0 1px var(--bg-switch-act);
        }
        .table-24hc .switch:not(.no-act) input:checked + .slider:before {
          -webkit-transform: translateX(18px);
          -ms-transform: translateX(18px);
          transform: translateX(18px);
        }
        .table-24hc .accor-gr-select-24hc, /* Custom Select */
        .table-24hc .btn-24hc,  /* Custom Btn */
        .table-24hc .btn-outline-24hc{ /* Custom Btn */
            height: 30px;
        }
    /* End Table Main */

    /* Alert Main */
        .alert-24hc{
            border-radius: 0;
        }
        .alert-t-24hc {
            font-size: 16px;
            border-bottom: 1px solid var(--bs-danger-border-subtle);
        }
        .alert-warning .alert-t-24hc{
            border-color: var(--bs-warning-border-subtle);
        }
        .alert-b-24hc *{
            font-size: 14px;
            line-height: 1.3;
        }
        .alert.alert-success { /* Minhdt 24/11/2023 */
            --bs-success-bg-subtle: #f0fdf4;
            --bs-success-text-emphasis: rgb(21 128 61 / 1);
            --bs-success-title: #166534;
        }
    /* End Alert Main */

    /* Custom Breadcrumb */
        .breadcrumb .badge{ /* Custom Boostrap */
            padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
            font-size: 12px;
            border-radius: 5px !important;
            line-height: 1.3;
        }
        .breadcrumb .badge.text-bg-success {
            color: #77b43d!important;
            background-color: #77b43d1a!important;
        }
        .breadcrumb .badge.text-bg-warning {
            color: #f7b731!important;
            background-color: #ffa22b1a!important;
        }
        .breadcrumb .badge.text-bg-danger {
            color: #e82646!important;
            background-color: #ff382b1a!important;
        }
        .breadcrumb .badge.text-bg-primary {
            color: #1170e4!important;
            background-color: #c7e0fd!important;
        }
        .breadcrumb .badge.text-bg-secondary {
            color: #6c757d!important;
            background-color: #6c757d1a!important;
        }
    /* End Custom Breadcrumb */

    /* Custom Dropdown Menu */
        ul.dropdown-menu.show {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        ul.dropdown-menu.show li a:not(:last-child) {
            border-bottom: 1px solid #f2f2f2;
        }
        ul.dropdown-menu.show li a {
            padding: 10px;
            font-size: 14px;
            color: var(--color-24hc-2);
        }
        ul.dropdown-menu.show li a i {
            margin-right: 5px;
        }
        ul.dropdown-menu.show li a:hover{
            background: var(--hover-all-24hc);
            color: var(--color-white);
        }
    /* End Custom Dropdown Menu */

    /* Custom Daterangepicker */
        .daterangepicker {
            --bg-default: #78b43d;
            --bg-default-blur: #f7faf3;
            --bg-second: #e4e4e4;
            --color-second: #616161;
            --hover-bg-default: #8cce4b;
            --hover-bg-second: #dadada;
            font-family: 'Roboto-Regular';
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        }
        .daterangepicker td.in-range{
            background: var(--bg-default-blur);
        }
        .daterangepicker .drp-buttons .btn.btn-primary,
        .daterangepicker td.active, 
        .daterangepicker td.active:hover,
        .daterangepicker .ranges li.active{
            background-color: var(--bg-default);
        }
        .daterangepicker .drp-buttons .btn.btn-primary{
            border: none;
        }
        .daterangepicker .drp-buttons .btn.btn-default{
            background: var(--bg-second);
            color: var(--color-second);
        }
        .daterangepicker .calendar-table th{
            font-family: 'Roboto-Medium';
            font-weight: inherit;
        }
        .daterangepicker select.monthselect, 
        .daterangepicker select.yearselect,
        .daterangepicker .ranges li,
        .daterangepicker .drp-buttons .btn,
        .daterangepicker .drp-selected,
        .daterangepicker .calendar-table th,
        .daterangepicker .calendar-table td{
            font-size: 14px;
        }
        .daterangepicker .calendar-table th,
        .daterangepicker .calendar-table td {
            height: 26px;
            line-height: 26px;
        }
        .daterangepicker .drp-buttons .btn{
            height: 35px;
            padding: 0 10px;
            font-weight: 400;
        }
        .daterangepicker .drp-buttons .btn.btn-default:hover{
            background: var(--hover-bg-second);
        }
        .daterangepicker .drp-buttons .btn.btn-primary:hover{
            background: var(--hover-bg-default);
        }
    /* End Custom Daterangepicker */

    /* Custom jQuery UI CSS Framework 1.8.22 */
        .ui-menu {
            font-family: 'Roboto-Regular';
        }
        .ui-menu .ui-menu-item {
            padding: 5px;
        }
        .ui-menu .ui-menu-item {
            font-size: 15px;
        }
        .ui-menu .ui-menu-item .ui-state-hover,
        .ui-menu .ui-menu-item .ui-state-active {
            margin: 0;
            font-weight: normal;
            cursor:pointer;
            border:none;
            background:none;
        }
    /* End Custom jQuery UI CSS Framework 1.8.22 */

    /* Header */
        .header-24hc{
            top: 0;
            left: 0;
            right: 0;
            height: var(--prm-h-header-trans-top);
            box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
        }
        .header-24hc .col-l{
            border-right: 1px solid #f2f2f2;
        }
        /* Logo 24h */
            .logo-24h {
                max-width: 70px;
                height: 42px;
            }
            .logo-24h *{
                font-size: inherit;
                height: 100%;
            }
        /* End Logo 24h */

        /* Text Project */
            .header-txt-24hc{
                font-size: 24px;
                color: var(--color-24hc-2);
            }
        /* End Text Project */

        /* Icon Menu narrow/ open wide */
            .header-24hc .icon-menu-sidebar{
                font-size: 20px;
                color: var(--color-24hc-2);
            }
        /* End Icon Menu narrow/ open wide */

        /* Link Tao Nhanh Chien Dich/Quang Cao */
            .header-quickly-24hc li a {
                padding: 5px;
                font-size: 14px;
                border-radius: 3px;
            }
            .header-quickly-24hc li a.btn-camp{
                background: #f7b831;
            }
            .header-quickly-24hc li a.btn-adv{
                background: #11bfa6;
            }
            .header-quickly-24hc li a:hover{
                background: var(--hover-all-24hc);
            }
        /* End Link Tao Nhanh Chien Dich/Quang Cao */

        /* Recharge */
            .header-rech-24hc .remain-amount {
                font-size: 14px;
                color: var(--color-24hc-2);
            }
            .header-rech-24hc .recharge {
                padding: 5px;
                font-size: 14px;
                border-radius: 3px;
                background: #ff6600;
            }
            .header-rech-24hc .recharge i{
                font-size: 17px;
            }
            .header-rech-24hc .recharge:hover{
                background: var(--hover-all-24hc);
            }
        /* End Recharge */

        /* Notification */
            .header-noti-24hc{
                border-left: 1px solid #f2f2f2;
            }
            .header-noti-24hc .icon-noti {
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                color: #616161;
                background: #e4e4e4;
                border-radius: var(--border-circle);
                display: none;
            }
            .header-noti-24hc .icon-noti i{
                line-height: 40px;
            }
            .header-noti-24hc .icon-noti .badge {
                top: 0;
                right: -10px;
                width: 20px;
                height: 20px;
                line-height: 20px;
                font-size: 11px;
                background: red;
                border-radius: var(--border-circle);
            }
            .header-noti-24hc .box-sub-noti {
                right: 0;
                min-width: 300px;
                padding: 10px;
            }
            .header-noti-24hc .box-sub-noti .tit-noti {
                font-size: 16px;
            }
            .header-noti-24hc .box-sub-noti .not-noti {
                font-size: 14px;
                color: var(--color-24hc-2);
            }
            .header-noti-24hc .box-sub-noti .list-noti {
                max-height: 336px;
                margin: 0 -5px;
                padding: 0 5px;
            }
            .header-noti-24hc .box-sub-noti .list-noti li:not(:last-child){
                margin: 0 0 10px;
            }
            .header-noti-24hc .box-sub-noti .list-noti li a {
                --color-read-list-noti: #65676B;
                --hover-bg-list-noti: #f4faee;
                padding: 10px;
                display: block;
                background: #fbfbfb;
                border-radius: 5px;
                border: 1px solid #ededed;
            }
            .header-noti-24hc .box-sub-noti .list-noti li.unread a,
            .header-noti-24hc .box-sub-noti .list-noti li a:hover {
                background: var(--hover-bg-list-noti);
            }
            .header-noti-24hc .box-sub-noti .list-noti li:not(.unread) a *{
                color: var(--color-read-list-noti);
            }
            .header-noti-24hc .box-sub-noti .list-noti li .txt,
            .header-noti-24hc .box-sub-noti .list-noti li .txt * {
                font-size: 14px;
                line-height: 1.5;
            }
            .header-noti-24hc .box-sub-noti .list-noti li .time {
                font-size: 13px;
            }
            .header-noti-24hc .box-sub-noti .view-all-noti {
                padding: 7px 10px;
                font-size: 14px;
                background: var(--bg-24hc-main);
                border-radius: 5px;
            }
            .header-noti-24hc .box-sub-noti .view-all-noti:hover{
                background: var(--hover-bg-24hc-main);         
            }
        /* End Notification */ 
        
        /* User Info */
            .header-user-24hc .box-info .ava-user {
                flex: 0 0 40px;
                max-width: 40px;
                height: 40px;
            }
            .header-user-24hc .box-info .des-user {
                font-size: 14px;
                color: var(--color-24hc-2);
            }
            .header-user-24hc .box-sub-info {
                right: 0;
                padding: 0 10px;
                min-width: 200px;
            }
            .header-noti-24hc .box-sub-noti, /* Notification */ 
            .header-user-24hc .box-sub-info {
                top: 45px;
                border: 1px solid #f2f2f2;
            }
            .header-user-24hc .box-sub-info li a {
                font-size: 14px;
                padding: 10px 0;
                color: var(--color-24hc-2);
            }
            .header-user-24hc .box-sub-info li:not(:last-child) a {
                border-bottom: 1px solid #f2f2f2;
            }
        /* End User Info */
    /* End Header */

    /* SideBar Left */
        .sidebar-24hc {
            --color-sidebar-main: #626366;
            border-top: 1px solid #f2f2f2;
            width: var(--prm-w-p-sidebar);
        }
        .sidebar-24hc-list>ul>li {
            padding: 0 0 20px;
        }
        .sidebar-24hc-list ul li a {
            font-size: 16px;
            color: var(--color-sidebar-main);
        }
        .sidebar-24hc-list ul li.act-menu {
            position: relative;
            background: #f0f0f5;
            padding: 10px 0;
            margin: 0 0 20px;
        }
        .sidebar-24hc-list ul li.act-menu:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20px;
            right: -10px;
            background: #f0f0f5;
            z-index: -1;
        }
        .sidebar-24hc-list ul li.has-sub .icon-click-menu{
            top: 0;
            right: 0;
            width: 64px;
        }
        .sidebar-24hc-list ul li.has-sub .icon-click-menu:after {
            content: "";
            display: inline-block;
            border: solid #9e9e9e;
            margin: -4px 2px 0 0;
            border-width: 0 2px 2px 0;
            padding: 3px;
            vertical-align: middle;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transition: all ease .3s;
        }
        .sidebar-24hc-list ul li.has-sub .sub-menu li.act *, /* Act Menu Sub */
        .sidebar-24hc-list ul li.has-sub:hover .link-menu *{
            color: var(--color-24hc);
        }
        .sidebar-24hc-list ul li.has-sub:hover .icon-click-menu:after{
            border-color: var(--hover-all-24hc);
        }
        .sidebar-24hc-list ul li.has-sub.act-menu .icon-click-menu:after {
            margin: 2px 2px 0 0;
            transform: rotate(224deg);
            -webkit-transform: rotate(224deg);
        }
        .sidebar-24hc-list ul li.has-sub:not(.act-menu) .sub-menu{
            /*display: none;*/
        }
        .sidebar-24hc-list ul li.has-sub .sub-menu {
            margin: 0 0 0 27px;
        }
        .sidebar-24hc-list ul li.has-sub .sub-menu li {
            border-top: 1px solid #dfdfdf;
            padding: 10px 0;
        }
        .sidebar-24hc-list ul li.has-sub .sub-menu li:last-child{
            padding-bottom: 0;
        }
        .sidebar-24hc-list ul li.has-sub .sub-menu li a{
            font-size: 15px;
        }
        /* Xử lý thu/gọn menu */
            .sidebar-toogle{
                --prm-w-p-sidebar: 58px;
            }
            .sidebar-toogle .text-menu, 
            .sidebar-toogle .sidebar-24hc-list ul li.has-sub .sub-menu,
            .sidebar-toogle .sidebar-24hc-list ul li.has-sub .icon-click-menu {
                display: none !important;
            }
        /* End Xử lý thu/gọn menu */
    /* End SideBar Left */

    /* Main Content */
        .bg-body-24hc{
            background-color: var(--bg-body);
        }
        .sidebar-24hc, /* SideBar Left */
        .cont-24hc{
            top: var(--prm-h-header-trans-top);
            height: calc(100vh - var(--prm-h-header-trans-top));
            transition: all ease .3s;
        }
        .cont-24hc{
            margin-left: var(--prm-w-p-sidebar);
        }
    /* End Main Content */

    /* Footer */
        .footer-24hc{
            border-top: 1px solid #dfdfdf;
        }
        .footer-24hc .row{
            margin: 0 -20px;
        }
        .footer-24hc .row [class*=col-]{
            padding: 0 20px;
        }
        .footer-24hc .col-6:first-child{
            border-right: 1px solid #dfdfdf;
        }
        .footer-24hc .icon-dmca{
            width: 110px;
            height: 42px;
        }
        .footer-24hc .icon-vh-24h{
            width: 88px;
            height: 42px;
        }
        .footer-24hc-info,
        .footer-24hc-info *{
            font-size: 13px;
            line-height: 19px;
            color: #333;
        }
        .footer-24hc-info i{
            color: #959595;
         }
        .footer-24hc-info .tit-add{
            font-size: 14px;
        }
        .footer-24hc-info .tit-comp{
            font-size: 15px;
        }
        .footer-24hc-link a {
            padding: 0 15px;
            font-size: 14px;
            line-height: 20px;
            color: #363636;
        }
        .footer-24hc-link .link-adv {
            padding: 6px 15px;
            margin: 0 15px 0 0;
            color: var(--color-24hc);
            border-radius: 8px;
            border: 1px solid #e1e1e1;
        }
        .footer-24hc-link .link-adv:hover{
            border-color:currentcolor;
        }
    /* End Footer */

    /* Scroll To Div */
        .scroll-top-24hc{
            bottom: 20px;
            right: 20px;
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
            -webkit-transition: all ease .5s;
            transition: all ease .5s;
        }
        .scroll-top-24hc.show{
            opacity: 1;
            -webkit-transform: scale(1) rotate(360deg);
            transform: scale(1) rotate(360deg);
        }
        .scroll-top-24hc a {
            width: 40px;
            height: 40px;
            border-radius: var(--border-circle);
            background: var(--bg-scroll-top);
        }
        .scroll-top-24hc a:hover{
            background: var(--hover-bg-scroll-top);
        }
    /* End Scroll To Div */

    /* Css Dif */
        .iframe-form,
        .iframe_debug {
            width: 0px;
            height: 0px;
            visibility:hidden;
        }
        .iframe_debug1 {
            width: 700px;
            height: 500px;
            visibility:display;
        }
        label.error { /* Trungcq Add Css */
            font-size: 12px;
            font-style: italic;
            color:#FF0000;
        }
    /* End Css Dif */

    /* Page Thong Tin Tai Khoan */
        .user-upload-24hc .box-ava{
            width: 160px;
            height: 160px;
        }
        .user-upload-24hc .cropper-container.cropper-bg {
            margin: auto;
        }
        .user-upload-24hc #errorAvatar{
            font-size: 12px;
            line-height: 1.2;
        }
    /* End Page Thong Tin Tai Khoan */

    /* Page Chinh Sua Thong Tin Tai Khoan */
        .accor-gr-quickly-24hc .box-quickly.box-acc-per{
            border-radius: 3px;
            border-top: 1px solid #d1dfc3;
        }
    /* End Page Chinh Sua Thong Tin Tai Khoan */

    /* Page Dieu Khoan Su Dung */
        .rules-24hc .accor-cont-24hc .fa-circle {
            top: 8px;
            font-size: 5px;
        }
    /* End Page Dieu Khoan Su Dung */

    /* Loading Custom */
        .loading-overlay {
            display: table;
            position: fixed;
            top: 0; right: 0; bottom: 0; left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 999999999;
        }
        .loading-overlay .inner {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .loading-overlay .inner img {
            display: block;
            width: 252px;
            height: auto;
            margin: 0 auto 25px;
        }
        .loading-overlay p {
            color: #fff;
            font-size: 18px;
        }
    /* End Loading Custom */

    /* Page Nap Tien(Recharge) */
        /* Box So Tien Can Nap */
            .rech-amount-24hc li {
                border: 1px solid #d1dfc3;
            }
            .rech-amount-24hc li.act,
            .rech-amount-24hc li:hover{
                background: var(--bg-24hc-main) !important;
                border-color: var(--bg-24hc-main) !important;
                color: var(--color-white);
            }
        /* End Box So Tien Can Nap */
            
        /* Box Chon Hinh Thuc Thanh Toan */
            .rech-depo-24hc .box-items{
                padding: 15px 0;
            }
            .rech-depo-24hc .box-items.act-items .fa-chevron-right{
                transform: rotate(90deg);
            }
            .rech-depo-24hc .box-items:not(:first-child){
                border-top: 1px solid #ebebeb;
            }
            .rech-depo-24hc .box-items .box-ava{
                width: 30px;
                height: 30px;
                padding: 2px;
            }
            /* Box Sub */
                .rech-depo-24hc .box-sub .box-items {
                    height: 50px;
                    padding: 13px 10px;
                    border: 1px solid #ebebeb;
                }
                .rech-depo-24hc .box-sub .box-items.act,
                .rech-depo-24hc .box-sub .box-items:hover {
                    border-color: var(--hover-all-24hc);
                }
            /* End Box Sub */
        /* End Box Chon Hinh Thuc Thanh Toan */

        /* Box Chi Tiet Nap Tien */
            .rech-details-24hc .box-items:not(:last-of-type) {
                border-bottom: 1px solid #ebebeb;;
                padding: 0 0 15px;
            }
        /* End Box Chi Tiet Nap Tien */
    /* End Page Nap Tien(Recharge) */
	.bg-transact {
		padding: 10px;
		background: #B0D78A;
		border-bottom: 1px solid #e4e4e4;
	}
/* End Css Common */