html,body {width: 100%; height:auto; max-width: 100%; min-height: 100%; font-family:Roboto, Arial, sans-serif; font-weight: 300; line-height:24px; text-shadow:none; font-size:16px; font-style:normal; color: #000; margin:0px; padding:0px;}

*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
*[contenteditable] { -webkit-user-select: text; user-select: text; }

img{max-width: 100%; object-fit:cover; object-position:center;}
a{text-decoration: none; color: #000;}
a:hover{color: #CC0000;}
input[type='text'], input[type='password'], textarea, select{position:relative; top: 0px; left: 0px; width: 100%; height: 35px; -webkit-appearance: none; background-color: #fff; border: 1px solid #ababab; border-radius: 5px; padding: 5px; resize:none; outline:0px; font-size:inherit; line-height:inherit; font-family:inherit;}
input:focus, textarea:focus, select:focus{border-color: #cc0000;}
textarea{height: 200px;}
input[type='checkbox']{position:relative; top: 0px; left: 0px; width: 18px; height: 18px; border: 1px solid #ababab; border-radius: 3px; padding: 0px; margin: 0px; display:inline-block; vertical-align:middle; -moz-appearance:none; -webkit-appearance:none;}
input[type='checkbox']:checked{ -moz-appearance:checkbox; -webkit-appearance:checkbox;}
select{-moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; background-color: var(--input-bg-color); background-image: url(../skins/default/images/select-down-icon.png); background-repeat: no-repeat; background-position: center right 5px; padding-right: 18px; background-size: 10px 10px;}

button{position:relative; top: 0px; left: 0px; width:max-content; height:auto; line-height: 20px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; padding: 6px 16px; background: #FAFBFC; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; color: #333; border: 0px; outline: 0px; border-radius: 4px; transition: 0.3s; font-family: inherit; font-size: 14px; cursor:pointer;}
button:hover, button.hot{background: linear-gradient(135deg, rgba(136,0,0,1) 0%, rgba(170,0,0,1) 50%, rgba(238,0,0,1) 100%); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: #fff;}
button:before{position:absolute; top: 50%; left: 5px; width:auto; height:auto; transform:translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 18px;}
button:disabled{background: #ddd; color: #ababab; cursor:default;}
button:disabled:hover{box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;}

.btn-ok, .btn-cancel, .btn-back, .btn-search, .btn-add-file, .btn-del, .btn-submit{padding-left: 25px;}
.btn-view{padding-left: 30px;}
.btn-ok:before{content: "\f00c"; color: #28a745;}
.btn-cancel:before{content: "\f00d"; color: #CC0000; font-size: 20px; left: 7px;}
.btn-search:before{content: "\f002"; font-size: 16px;}
.btn-view:before{content: "\f06e"; font-size: 16px;}
.btn-add-file:before{content: "\f319"; font-size: 16px; left: 7px;}
.btn-del:before{content: "\f2ed"; font-size: 16px;}
.btn-back:before{content: "\f053"; left: 8px; font-size: 16px;}
.btn-next{padding-right: 25px;}
.btn-next:after{content: "\f054"; position:absolute; top: 50%; left: auto; right: 8px; width:auto; height:auto; transform:translateY(-50%); font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px;}
.btn-submit:before{content: "\f00c";}

.required:after{content: "*"; position:relative; top: 0px; left: 0px; color: #ff0000; margin-left: 3px;}
.error{position:relative; top: 0px; left: 0px; width:auto; height:auto; color: #CC0000;}
input.error, textarea.error, select.error{border-color: #CC0000;}

.row{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:grid; grid-template-columns:repeat(12, 1fr); grid-column-gap: 10px; grid-row-gap: 10px;}
.row:not(:last-child){margin-bottom: 15px;}
.row .col{position:relative; grid-column:1 / -1;}
.row .col-2{position:relative;  grid-column:auto / span 2;}
.row .col-3{position:relative;  grid-column:auto / span 3;}
.row .col-4{position:relative;  grid-column:auto / span 4;}
.row .col-5{position:relative;  grid-column:auto / span 5;}
.row .col-6{position:relative;  grid-column:auto / span 6;}
.row .col-7{position:relative;  grid-column:auto / span 7;}
.row .col-8{position:relative;  grid-column:auto / span 8;}
.row .col-9{position:relative;  grid-column:auto / span 9;}
.row .col-10{position:relative;  grid-column:auto / span 10;}
.row .col-11{position:relative;  grid-column:auto / span 11;}
.row .col-12{position:relative;  grid-column: 1 / -1;}
.field{position:relative;}
.field i{position:absolute; top: auto; left: 8px; bottom: 9.5px; font-size: 16px;}
.field input, .field select{padding-left: 35px;}

.row-3{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px;}
.row-3 .col{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 0px;}



.item{overflow:hidden;}
.item .sub-item{position:absolute; top: 100%; left: 0px; width:auto; height:auto; overflow:hidden; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 5px; background-color: #f1f1f1; transition: 1s; filter: opacity(0); -webkit-filter: opacity(0); text-align:left; display:block;}
.item:hover {overflow:unset;}
.item:hover .sub-item{ filter:opacity(1); -webkit-filter: opacity(1);}

.simple{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: auto;}
.simple .content{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 52px; width:auto; height: auto; overflow: auto; padding: 5px;}
.simple .btn-list{ border-top: 1px solid #ababab; background: #dedede;}

.overlay{position:fixed; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: transparent; background-repeat:no-repeat; background-size:cover;}
.overlay.loading-overlay{background-color: transparent;}

.waiting{position:fixed; top:50%; left:50%; width:244px; height:76px; margin:-33px 0px 0px -122px; background-color: #f1f1f1; border: 1px solid #ababab; border-radius: 5px; z-index:999; overflow:hidden;}
.waiting *{pointer-events: none;}
.waiting img{position:absolute !important; top: 15px !important; left: 15px !important; width: 44px !important; height: 44px !important;}
.waiting .bigtext{position:absolute; top:18px; left:70px; font-weight:bold; color: #3b3b3b; font-size:13px;}
.waiting .smalltext{position:absolute; top:36px; left:70px; color: #3b3b3b; font-size:11px;}
.waiting .title{position:absolute; top:0px; left:0px; width:100%; height:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.popup{ position:absolute; top:0px; left:0px; width:auto; height:auto; max-width: 100%; max-height: 100%; background-color: #f1f1f1; border:1px solid rgba(136,0,0,1); outline: 0px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; overflow:hidden; transition: opacity 0.3s;}
.popup.hide{opacity:0;}
.popup .popup-header{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:32px; padding:0px; margin:0px; background: linear-gradient(135deg, rgba(136,0,0,1) 0%, rgba(170,0,0,1) 50%, rgba(238,0,0,1) 100%);}
.popup .popup-header .popup-title{position:absolute; top: 50%; left:0px; right:0px; width: 60%; height:auto; transform:translateY(-50%); padding: 0px 5px; text-align:left; text-transform: capitalize; color: #fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; pointer-events:none;}
.popup .popup-main{position:absolute; top:32px; left:0px; right:0px; bottom:0px; width:auto; height:auto; padding:0px; margin:0px; background-color: #f1f1f1;}
.popup .popup-main .btnlist, .popup .popup-main .btn-list{position:absolute; top: auto; left: 0px; bottom: 0px; right: 0px; padding: 10px; text-align: right;}
.popup .popup-main .btnlist button:not(:first-child), .popup .popup-main .btn-list button:not(:first-child){margin-left: 10px;}
.popup .control-box{position:absolute; top: 0px; left:auto; right: 0px; bottom:auto; width:auto; height: 32px;}
.popup .control-box .btn{position:relative; top: 0px; left: 0px; width: 32px; height: 100%; display:inline-block; vertical-align:top; padding: 0px; margin: 0px; color: #bbb;}
.popup .control-box .btn:hover{color: #fff;}
.popup .control-box .btn:before{content: ""; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro"; display: block;}
.popup .control-box .btn.close-button:before{content: "\f00d"; font-size: 20px;}
.popup .control-box .btn.maximize-button:before{content: "\f065"; font-size: 14px;}
.popup .control-box.full-screen .btn.maximize-button:before{content: "\f066"; font-size: 16px;}

.alert .message{position:absolute; top: 0px; left: 0px; right: 0px; bottom: 45px; width: 100%; height: auto; overflow:hidden;}
.alert .message table{position:relative; top: 0px; left: 0px; width: 100%; height: 100%;}
.alert .message table tr{position:relative; width: 100%; height: 100%;}
.alert .message table tr td:first-child{width: 60px; position:relative;}
.alert .message table tr td:first-child:before{content: "\f071"; position:absolute; top: 50%; left: 50%; width:auto; height:auto; transform:translate(-50%, -50%); font-size: 30px; font-weight: 300; font-family: "Font Awesome 5 Pro"; color: #880000;}
.alert .message span{display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden}
.alert .message table tr td.confirm:before{content: "\f059";}

.obj-data-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 100%; outline: 0px;}
.obj-data-list:focus{outline: 0px;}
.obj-data-list .item:focus{outline: 0px;}
.obj-data-list .item:focus:before{content: ""; position:absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; border: 1px dashed var(--border-color); border-radius: 5px;}
.obj-data-list .item .action-menu{position:absolute; top: 0px; left:auto; right:0px; width:auto; height:auto; padding: 0px 8px; cursor:pointer; background-color: rgba(171,171,171,0.65); color: rgba(0,0,0,0.65); display:none;}
.obj-data-list .item .action-menu:before{content: "\f141"; position:relative; font-weight:900; font-family: "Font Awesome 5 Pro";}
.obj-data-list .item .action-menu:hover{background-color: #fff; color: rgba(0,0,0,1);}
.obj-data-list .item:hover .action-menu{display:block;}
.obj-data-list .item.loading{pointer-events:none; animation: blinker 2s infinite; -webkit-animation: blinker 2s infinite;}

.box{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; padding: 0px; margin: 0px;}
.box .box-header{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 0px; color: #aa0000; font-weight: 400; text-transform: uppercase; margin-bottom: 15px;}
.box .box-header:after{content: ""; position:absolute; top:auto; left: 0px; bottom: 0px; width: 100%; height: 1px; background: linear-gradient(90deg, #aa0000 0%, transparent 70%, transparent 100%);}
.box .box-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.box .box-body a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border: 0px;}
.box .box-body a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block;}
.box .box-body a:not(:last-child){margin-bottom: 15px;}

.avatar{position:relative; top:0px; left:0px; width: 24px; height:24px; background-repeat:no-repeat; background-size:cover; background-position:top center; border-radius:50%; display:inline-block; vertical-align:middle; text-align:center;}
.avatar span{position:relative; top:2px; left:0px; width:auto; height:auto; margin:auto; font-size: 14px;}

.account-info .avatar{width: 150px; height:auto; aspect-ratio: 1; border: 2px solid #fff; cursor:pointer; margin: 0px auto; display:block;}
.account-info .avatar:after{content: "\f030"; position:absolute; top:auto; left:auto; bottom: 5px; right: 10px; width:30px; height:30px; border-radius: 50%; background-color: #dedede; font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro"; display:grid; align-content: center; }
.account-info h1{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; margin: 0px; text-align: center; font-size: 20px; font-weight: 500;}
.account-info .division-selector select{padding-left: 5px;}

.cus-login .row .des, .cus-login .row .other-signin{margin-bottom: 0px;}
.cus-login a{position:relative; top: 0px; left: 0px; width:max-content; height:auto; display:block; padding: 0px; margin: 0px 0px 0px auto; color: #00adef;}
.cus-login a:hover{font-style: italic; text-decoration: underline;}
.cus-login .row .other-signin{border-top: 1px solid #ababab; color: #cc0000;}
.cus-login .row .col-5 button{width: 100%;}

.slider{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9; overflow:hidden;}
.slider .slide{position:relative; top: 0px; left: 0px; width: 100%; height: 100%;}
.slider .slide .slide-item-list{position:relative; top: 0px; left:0px; width: 100%; height: 100%; padding: 0px; margin: 0px;}
.slider .slide .slide-item-list .item{position:relative; top: 0px; left: 0px; width: auto; height: 100%; max-width: 100vw; display:inline-block; vertical-align:middle;}
.slider .slide .slide-item-list .item img{position:absolute; top: 0px; left: 0px; height: 100%; width:100%; object-fit:cover; object-position:center;}
.slider .slide .slide-item-list .item .comment{position:absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.slider .slide .slide-item-list .slick-arrow{left: 0px; width: 40px; height: 40px; border-radius: 0px; box-shadow:none; z-index: 2;}
.slider .slide .slide-item-list .slick-arrow:before{font-size: 30px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.slider .slide .slide-item-list .slick-arrow.slick-next{left:auto; right: 0px;}
.slider .slide .slide-item-list .slick-dots{bottom: 10px;}
.slider .slide .slide-item-list .slick-dots:has(:only-child){display:none;}
.slider .slide .slide-item-list .slick-dots li{vertical-align:middle;}
.slider .slide .slide-item-list .slick-dots button{box-shadow: none; border: 0px; border-radius: 0px; padding: 0px;}
.slider .slide .slide-item-list .slick-dots button:before{content: "\f111"; font-size: 10px; font-weight: 900; font-family: "Font Awesome 5 Pro"; top: 50%; left: 50%; transform:translate(-50%, -50%);}

.division-selector{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; margin-bottom: 10px;}

.tabs, .tabs .tab-header, .tabs .tab-pages{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-size: 0px; text-align: left;}
.tabs .tab-header .tab-item{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 5px; margin: 0px; font-size: 16px; display:inline-block; vertical-align:top; text-align:center; background-color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; color: #999;}
.tabs .tab-header .tab-item:hover{background-color: #bbb; color: #333;}
.tabs .tab-header .tab-item.selected{background-color: #aaa; font-weight:bold; color: #000;}
.tabs .tab-header .tab-item > *{pointer-events:none;}
.tabs .tab-pages .tab-page-item{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:none; font-size: 16px;}
.tabs .tab-pages .tab-page-item.selected{display:block;}

.grid{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width: auto; height:auto; overflow:hidden; font-family:Helvetica, Arial, sans-serif; }
.grid .grid-header{position:absolute; top:0px; left:0px; right:auto; bottom:auto; width:100%; height:auto; max-width:100%; overflow-y:auto; overflow-x:hidden; background: var(--grid-grid-header-bg-color); border: 1px solid var(--grid-grid-header-border-color); border-bottom-width:0px;}
.grid .grid-header .grid-header-content{position:relative; top:0px; left:0px; width:auto; height:auto; float: left; min-width: 100%;}
.grid .grid-header table{position:relative; top:0px; left:0px; width:auto; height:auto; min-width: 100%; table-layout: auto; overflow:auto; background: var(--grid-grid-header-table-bg-color); border-spacing: 0px; border-collapse:separate; border: 0px;}
.grid .grid-header table tr th, .grid .grid-header table tr td{position:relative; padding: 2px 5px; text-align:center; background-color: var(--grid-grid-header-table-tr-th-bg-color); font-weight:500; color:var(--grid-grid-header-table-tr-th-font-color); border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);}
.grid .grid-header table tr th:last-child{border-right: 0px;}
.grid .grid-header table tr th[data-field='STT'], .grid .grid-header table tr th[data-field='Stt']{width: 40px; min-width: 40px;}
.grid .grid-header table tr th.sticky{position:sticky; z-index: 2;}
.grid .grid-header table tr th.sticky:first-child{left: 0px;}
.grid .grid-content{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width:auto; height:auto; background-color: var(--grid-grid-content-bg-color); border: 1px solid var(--border-color); border-top-width: 0px; overflow:auto; outline: 0px;}
.grid .grid-content img{position:relative; top: 0px; left: 0px; max-width: 100%; height: auto;}
.grid .tbl-grid{position:relative; top:0px; left:0px; width:auto; height:auto; table-layout: auto; overflow:auto;  background: var(--grid-tbl-grid-bg-color); border-spacing: 0px; border-collapse:separate; border: 0px;}
.grid .tbl-grid tr{position:relative; background-color: var(--grid-tbl-grid-tr-bg-color);}
.grid .tbl-grid tr:hover, .grid .tbl-grid tr:hover td.sticky{background-color: var(--grid-tbl-grid-tr-hover-bg-color);}
.grid .tbl-grid tr.selected, .grid .tbl-grid tr.selected td.sticky{background-color: var(--grid-tbl-grid-tr-selected-blur-bg-color);}
.grid .grid-content:focus .tbl-grid tr.selected, .grid .grid-content:focus .tbl-grid tr.selected td.sticky{background-color: var(--grid-tbl-grid-tr-selected-bg-color);}
.grid .tbl-grid tr td{position:relative; padding: 3px 6px 3px 5px; min-height: 25px !important; cursor:default; border-right: 0px; border-bottom: 1px solid var(--grid-tbl-grid-tr-td-border-color);  white-space:normal; word-break:break-word; word-wrap:break-word; overflow-x:hidden; overflow-y:visible; text-overflow:ellipsis; text-align: justify;
                      /*-webkit-touch-callout: initial; -webkit-user-select: text; -khtml-user-select: initial; -moz-user-select:text; -ms-user-select: text; user-select: text; cursor: initial;*/
}
.grid .tbl-grid tr:last-child td{border-bottom: 0px;}
.grid .tbl-grid tr td[data-field='STT'], .grid .tbl-grid tr td[data-field='Stt']{text-align: center; white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}
.grid .tbl-grid tr .action-menu{position:absolute; top: 50%; left:auto; right: 0px; width:auto; height:auto; transform:translateY(-50%); padding: 5px; line-height: 14px; font-size: 16px; color: var(--border-color); cursor:pointer; z-index: 2;}
.grid .tbl-grid tr .action-menu:hover{color: var(--default-font-color);}
.grid .tbl-grid tr .action-menu:before{content: "\f142"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-family: "Font Awesome 5 Pro"; font-weight: 900;}

.grid:not(.card) .tbl-grid tr td.sticky{position:sticky; background-color: #fff; z-index: 2;}
.grid:not(.card) .tbl-grid tr td.sticky:first-child{left: 0px;}

.grid .tbl-grid .tbl-group-header{pointer-events: none; font-weight: bold; background-color: #f1f1f1;}
.grid .tbl-grid:not(.card) tbody:not(:first-child) .tbl-group-header td{border-top: 1px solid var(--grid-tbl-grid-tr-td-border-color);}

.grid.card .grid-header{width: 0px; height: 0px; overflow:hidden; visibility:hidden;}
.grid.card .grid-content{top: 0px !important; border: 0px; background: transparent;}
.grid.card .tbl-grid{padding: 0px; display:grid; grid-column-gap: 10px; grid-row-gap: 10px; grid-template-rows:max-content; background-color: transparent;}
.grid.card .tbl-grid tr{position:relative; top: 0px; left: 0px; width: 100%; height:auto;  display:block; padding: 0px; background-color: transparent;}
.grid.card .tbl-grid tr:not(:last-child){margin-bottom: 15px;}
.grid.card .tbl-grid tr:before{content: ""; position:absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width:auto; height:auto;  background: radial-gradient(ellipse at center, #ffffff 51%,#d6d6d6 100%); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.grid.card .tbl-grid tr td{position:relative; top: 0px; left: 0px; padding: 5px; width: 100% !important; min-width:unset !important; max-width: unset !important; height:auto; text-align:left !important; border-bottom: 0px; display:block !important; z-index: 1;}
.grid.card .tbl-grid tr td:before{content: attr(data-title); position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline; margin-right: 5px; font-weight: bold;}
.grid.card .tbl-grid tr td[data-field='STT'], .grid.card .tbl-grid tr td[data-field='stt']{display:none !important;}
.grid.card .tbl-grid tr:hover{background-color: transparent;}
.grid.card .tbl-grid tr.selected{background-color: transparent;}
.grid.card .tbl-grid tr.selected .card-header{background-color: #3e6db6; border-top-left-radius: 8px; border-top-right-radius: 8px; color: #fff;}
.grid.card .tbl-grid tr.selected td.card-header{background-color: var(--grid-tbl-card-selected-tbl-card-header-bg-color); border-top-left-radius: 8px; border-top-right-radius: 8px;}
.grid.card .grid-content:focus .tbl-grid tr.selected{background-color: transparent;}
.grid.card .grid-content .tbl-grid tr.selected:before{border-color: var(--grid-tbl-card-selected-tbl-card-header-bg-color); box-shadow: var(--grid-tbl-card-selected-tbl-card-header-bg-color) 0px 1px 4px;}
.grid.card .tbl-grid tr .action-menu{position:absolute; top: 6px; right: 6px; width:auto; height:auto; padding: 5px 10px; transform:none; line-height: 14px; font-size: 16px; color: var(--border-color); cursor:pointer; z-index: 2;}
.grid.card .tbl-grid tr .action-menu:hover{color: var(--default-font-color);}
.grid.card .tbl-grid tr .action-menu:before{content: "\f141"; position:relative; top: 0px; left: 0px; width:auto; height:auto; font-family: "Font Awesome 5 Pro"; font-weight: 900;}
.grid.card .tbl-grid tr.selected .action-menu{color: #fff;}

.grid .pager{position:absolute; top:auto; left:0px; right: 0px; bottom: 0px; width: 100%; height: 35px; padding: 5px; border-top: 1px solid var(--border-color); display:none;}

.tree-view{position:absolute; top:0px; left:0px; right:0px; bottom:0px; width: 100%; height:auto; overflow:hidden; font-family:Helvetica, Arial, sans-serif; }
.tree-view .tree-view-search{position:absolute; top:0px; left:0px; right:0px; bottom:auto; width:auto; height:30px; padding:0px; background-color: var(--tree-view-tree-view-search-bg-color); border-bottom: 1px solid var(--tree-view-tree-view-search-border-color); } 
.tree-view .tree-view-search input{position:relative; top:0px; left:0px; width: 100%; height: 100%; padding: 3px 23px 3px 3px; background-repeat:no-repeat; background-position:right 4px center; background-size: 16px 16px; background-image:url(../images/search-icon-disabled.png); background-color: var(--input-bg-color); border: 0px; border-radius: 0px;}
.tree-view .tree-view-content{position:absolute; top: 0px; left:0px; right:0px; bottom:0px; width:100%; height:auto; overflow-x:hidden; overflow-y:hidden;}
.tree-view .tree-view-content:hover{overflow-y:auto;}
.tree-view .tree-view-content ul{position:relative; top:0px; left:0px; width:100%; height:auto; list-style:none; padding: 0px; margin: 0px;}
.tree-view .tree-view-content ul li{position:relative; top:0px; left:0px; width: 100%; height: auto; padding: 0px; margin:0px; cursor:default;}
.tree-view .tree-view-content ul li > div{padding: 5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.tree-view .tree-view-content ul li .selected{background-color: var(--tree-view-tree-view-content-ul-li-selected-bg-color) !important;}
.tree-view .tree-view-content ul li > div:hover{background-color: var(--tree-view-tree-view-content-ul-li-div-hover-bg-color);}
.tree-view .tree-view-content ul li > div input[type='checkbox']{vertical-align:middle; margin:0px 5px 0px 0px;}
.tree-view .tree-view-content ul li > div span:not(.btn-collapsed){vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; pointer-events:none;}
.tree-view .tree-view-content ul li > div .highlighted{vertical-align:bottom !important;}
.tree-view .tree-view-content ul li > div .btn-collapsed{position:absolute; top: 6px; left: 0px; display: inline-block; width: 20px; height: 20px; margin:0px; color: var(--tree-view-tree-view-content-ul-li-div-btn-collapsed-font-color); padding:3px 6px; transition: transform .1s linear; transform: rotate(90deg); background-repeat:no-repeat; overflow:hidden;}
.tree-view .tree-view-content ul li > div .btn-collapsed.fa-chevron-right:before{position:absolute;}
.tree-view .tree-view-content ul li > div .btn-collapsed:hover{color: var(--tree-view-tree-view-content-ul-li-div-btn-collapsed-hover-font-color);}
.tree-view .tree-view-content ul li > div .icon{position:relative; top:0px; left:0px; width: 16px; height: 16px; display:inline-block; padding:0px; margin: 0px 5px 0px 0px; background-repeat:no-repeat; background-position:center center; background-size:cover; pointer-events:none; color: var(--default-light-color);}
.tree-view .tree-view-content ul li > div .folder{background-image:url(../images/Folder-16x16.png);}
.tree-view .tree-view-content ul li > div .file{background-image:url(../images/file-16x16.png);}
.tree-view .tree-view-content ul li > div .checkbox{position:relative; top:0px; left:0px; width: 20px; height: 20px; display:inline-block; padding:0px; margin: 0px 5px 0px 0px;}
.tree-view .tree-view-content ul li > div .checkbox:before{content: "\f0c8"; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); color: #8f8f9d; font-size: 16px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.tree-view .tree-view-content ul li > div.selected .checkbox:before{content: "\f14a"; color: #0060df; font-weight: 900;}
.tree-view .tree-view-content ul li .disabled{color: var(--tree-view-tree-view-content-ul-li-disabled-font-color); background-color: var(--tree-view-tree-view-content-ul-li-disabled-bg-color); -webkit-filter: grayscale(100%); filter: grayscale(100%);}
.tree-view .tree-view-content ul li .disabled:hover{background-color: var(--tree-view-tree-view-content-ul-li-disabled-hover-bg-color) !important;}
.tree-view .tree-view-content ul li .disabled .icon{color: var(--tree-view-tree-view-content-ul-li-disabled-icon-font-color);}
.tree-view .tree-view-content ul li .disabled input{pointer-events:none;}

.verify .content p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align: justify; font-style: italic; padding: 0px; margin: 0px;}
.verify .content .verify-code{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px; display:grid; grid-template-columns: repeat(6, 1fr); grid-column-gap: 15px;}
.verify .content .verify-code input{text-align:center;}
.verify .content .count-down{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align:center; font-style: italic; color: #C00;}
.verify .content .resend-verify-code{position:relative; top: 0px; left: 0px; width:max-content; height:auto; display: none; padding: 0px 15px; margin: 0px 0px 0px auto; color: #00adef; cursor:pointer;}
.verify .content .resend-verify-code:hover{font-style: italic;}

.document-search{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.document-search .document-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.document-search .document-list .document-list-title{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border-bottom: 1px solid #ababab; margin-bottom: 15px;}
.document-search .document-list .document-list-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 1px solid #ababab; border-radius: 5px; overflow:hidden;}
.document-search .document-list .document-list-body .grid{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-bottom: 35px;}
.document-search .document-list .document-list-body .grid .grid-header{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 0px;}
.document-search .document-list .document-list-body .grid .grid-content{position:relative; top: 0px !important; left: 0px; width: 100%; height:auto; min-height: 100px; border: 0px;}
.document-search .document-list .document-list-body .grid .grid-header th[data-field='DocNo']{width: 150px; min-width: 150px; max-width: 150px;}
.document-search .document-list .document-list-body .grid .grid-header th[data-field='DocCompendium']{min-width: 200px;}
.document-search .document-list .document-list-body .grid .grid-header th[data-field='DocSignDate']{min-width: 120px; width: 120px; max-width: 120px;}
.document-search .document-list .document-list-body .grid .grid-header th[data-field='DocFile']{width: 100px; min-width: 100px; max-width: 100px;}
.document-search .document-list .document-list-body .grid .grid-content td{font-weight: 300;}
.document-search .document-list .document-list-body .grid .grid-content td[data-field='DocSignDate'],
.document-search .document-list .document-list-body .grid .grid-content td[data-field='DocFile']{text-align:center;}
.document-search .document-list .document-list-body .grid .grid-content td[data-field='DocFile'] img{position:relative; top: 0px; left: 0px; width: 32px; height:auto; display:block; margin: 0px auto; cursor:pointer;}
.document-search .document-list .document-list-body .grid .grid-content a{font-weight: 300; color: #337ab7;}
.document-search .document-list .document-list-body .grid .grid-content a:hover{color: #a00;}

.document-detail{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.document-detail .document-detail-title{position:relative; top: 0px; left:0px; width: 100%; height:auto; margin-bottom: 5px; border-bottom: 1px solid #ababab; font-weight: 400;}
.document-detail .document-detail-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 10px 0px;}
.document-detail .document-detail-body table{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 0px; border-collapse: collapse;}
.document-detail .document-detail-body table tr{border: 1px solid #ababab;}
.document-detail .document-detail-body table tr td:first-child{width: 150px;}
.document-detail .document-detail-body table tr td{padding: 5px; border-right: 1px solid #ababab;}
.document-detail .document-detail-body a {color: #337ab7;}
.document-detail .document-relate{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.document-detail .document-relate-body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px 15px 15px;}
.document-detail .document-relate-body a{position:relative; top: 0px; left: 0px; color: #337ab7; padding-left: 10px; display:block; margin-bottom: 5px;}
.document-detail .document-relate-body a:before{content: "\f105"; position:absolute; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.document-detail .document-relate-body a:hover{color: #a00;}

.document-view{position:relative; top: 0px; left: 0px; width:100%; height:auto; border: 1px solid #f1f1f1; border-radius: 5px; overflow:hidden;}
.document-view .body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 4/3; overflow:hidden; border-bottom: 1px solid #f1f1f1; overflow:hidden;}
.document-view .body iframe{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;}
.document-view .foot{position:relative; top: 0px; left: 0px; width: auto; height:auto; padding: 0px; margin: 0px;}
.document-view .foot .item{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 5px; margin: 0px; display:block; cursor:pointer;}
.document-view .foot .item *{position:relative; top: 0px; left: 0px; display:inline-block; vertical-align:middle; pointer-events:none;}
.document-view .foot .item img{width: 24px; aspect-ratio:1; margin-right: 5px;}
.document-view .foot .item span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: calc(100% - 30px);}
.document-view .foot .item.selected{background-color: #f1f1f1;}
.document-view .foot .item:hover{background-color: #f9f9f9;}

.pager{position:relative; top:0px; left:0px; width:auto; height: 25px; line-height: 16px; font-size: 13px; text-align:right;}
.pager > span{position:absolute; top: 50%; left: 5px; width:auto; max-width: 50%; height: auto; margin-top: -7.5px; white-space:nowrap; overflow:hidden; text-overflow: ellipsis; font-weight: normal;}
.pager > span > span{position:relative; top: 0px; left: 0px; width:auto; height:auto; display:inline-block; vertical-align:middle; margin-right: 5px;}
.pager > span > span:last-child{margin-right: 0px;}
.pager ul{position:relative; top:0px; left:0px; width:auto; height:100%; padding:0px; margin:0px; list-style:none; white-space:nowrap;}
.pager ul li{position:relative; width:auto; min-width: 25px; text-align:center; font-size:14px; font-weight:bold; height: 100%; display:inline-grid; align-items:center; padding: 3px; margin: 0px 0px 0px 5px; cursor:pointer; border: 1px solid var(--border-color); vertical-align: middle;}
.pager ul li:hover{background-color: var(--pager-ul-li-hover-bg-color);}
.pager ul li.selected{background-color: var(--pager-ul-li-selected-bg-color); cursor:default; font-weight:normal;}

.attach-item{position:relative; top: 0px; left:0px; width: 90px; height:auto; display:inline-block; vertical-align: top; padding: 5px; margin: 5px; border-radius: 5px; cursor:pointer; overflow:hidden;}
.attach-item:hover{background-color: #cce8ff;}
.attach-item img{width: 100%; height:auto; aspect-ratio: 4/3; object-fit:cover; border-radius: 5px; pointer-events:none; display:block; margin-bottom: 5px;}
.attach-item[data-type='file'] img{object-fit:none;}
.attach-item span{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; word-break:break-word; font-size: 12px; line-height: 16px; pointer-events:none;}
.attach-item .close{position:absolute; top: 0px; left: auto; right: 0px; width: 20px; height: 20px; background-color: #f1f1f1; border-radius: 50%; cursor:pointer; display:none;}
.attach-item .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-weight: 300; font-family: "Font Awesome 5 Pro";}
.attach-item:hover .close{display:block;}

.hot-news{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding-bottom: 15px; display:grid; grid-template-columns: 1fr 300px; grid-column-gap: 20px; border-bottom: 1px solid #DDD;}
.hot-news .view-port{position:relative; top: 0px; left: 0px; width: 100%; height: auto; overflow:hidden;}
.hot-news .view-port a{position:relative; top: 0px; left: 0px; width: auto; height: auto; overflow:hidden; display:block;}
.hot-news .view-port a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block !important; aspect-ratio: 16/9;}
.hot-news .view-port a h2{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; margin: 0px; font-weight: 500; font-size: 18px; line-height: 24px; text-align: justify;}
.hot-news .view-port a p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align: justify; margin: 0px; padding: 0px; color: #000; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; overflow:hidden;}
.hot-news .news-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; overflow:auto; display: block;}
.hot-news .news-list a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; line-height: 22px; display:inline-block; text-align:justify;}
.hot-news .news-list a:not(:last-child){padding-bottom: 10px; border-bottom: 1px solid #DDD; margin-bottom: 10px;}
.hot-news .news-list a img{position:relative; top: 0px; left: 0px; width: 100px; height:auto; aspect-ratio: 16/9; margin-right: 10px; margin-top: 3px; display:inline; float: left; vertical-align: baseline;}
.hot-news .news-list a h2{position:relative; top: 0px; left: 0px; width: auto; height:auto; font-weight: 400; text-align:justify; padding: 0px; margin: 0px; font-size: 16px; display:inline; vertical-align: baseline;}

.news-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.news-box .head{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; text-align: left; text-transform: uppercase; font-weight: 400; padding: 10px 0px;}
.news-box .head:before{content: ""; position:absolute; top: 1px; left: 0px; right: 0px; width: 100%; height: 1px; background-color: #DDD;}
.news-box .head:after{content: ""; position:absolute; top: 0px; left: 0px; width: 25px; height: 3px; background-color: #D71920;}
.news-box .body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px;}
.news-box .body a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; text-align:justify;}
.news-box .body a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9; display:block; padding: 0px; margin: 0px;}
.news-box .body a h2{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 48px; overflow:hidden; text-align: justify; font-weight: 500; font-size: 16px; padding: 0px; margin: 5px 0px; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical;}
.news-box .body a p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 72px; overflow:hidden; text-align: justify; padding: 0px; margin: 0px; display:-webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient:vertical; color: #000;}
.news-box .body a:not(:first-child){margin-top: 5px; padding-top: 5px; border-top: 1px dashed #DDD;}
.news-box .body a:not(:first-child) img, .news-box .body a:not(:first-child) p{display:none;}
.news-box .body a:not(:first-child) h2{padding-left: 15px;}
.news-box .body a:not(:first-child) h2:before{content: ""; position:absolute; top: 9px; left: 0px; width: 5px; height: 5px; background-color: currentColor;}
.news-box .body .news-list-style{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px 0px 0px 40px; margin: 15px 0px; }
.news-box .body .news-list-style li{padding: 5px 0px;}
.news-box .body .news-list-style li a{padding: 0px;}
.news-box .body .news-tatble-style{position:relative; top: 0px; left: 0px; width: 100%; border: 0px; border-collapse: collapse; overflow:hidden;}
.news-box .body .news-tatble-style tr th{background-color: #ddd; text-align: center; font-weight: 500; border: 1px solid #ddd; padding: 10px;}
.news-box .body .news-tatble-style tr td{border: 1px solid #ddd; padding: 10px;}
.news-box .body .news-tatble-style tr:nth-child(odd){background-color: #f1f1f1;}
.news-box .body .news-tatble-style tr td:first-child,
.news-box .body .news-tatble-style tr td:last-child{text-align:center;}
.news-box .body .news-tatble-style tr td a{padding: 0px;}


.news-box.news-relate{margin-top: 25px;}
.news-box.news-relate .body a{border-top: 0px; padding-top: 0px; padding-left: 15px;}
.news-box.news-relate .body a span:last-child{color: #999;}
.news-box.news-relate .body a:before{content: "\f105"; position:absolute; top: 0px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.news-list .hot-news{border-bottom: 0px;}
.news-list .news-box {margin: 15px 0px 30px;}
.news-list .news-box:first-child{margin-top: 0px;}
.news-list > .news-box:first-child .head a{color: #DA0000; font-weight: 500;}
.news-list .news-box .body a{display:inline-block; padding: 15px 0px; margin-top: 0px;}
.news-list .news-box .body a:first-child{padding-top: 0px;}
.news-list .news-box .body a img{width: 200px; display:block; float:left; margin-right: 8px; border-radius: 5px;}
.news-list .news-box .body a h2{display:inline; margin-top: 0px; padding: 0px;}
.news-list .news-box .body a h2:before{display:none;}
.news-list .news-box .body a h2:after{content: ""; position:relative; top: 0px; left: 0px; width: auto; height:auto; display:block;}
.news-list .news-box .body a p{display:inline;}
.news-list .news-box:not(:first-child) .body a:not(:first-child) {padding: 5px 0px;}
.news-list .news-box:not(:first-child) .body a:not(:first-child) h2{margin: 0px; padding-left: 15px; display:block;}
.news-list .news-box:not(:first-child) .body a:not(:first-child) h2:before{content: ""; position:absolute; top: 9px; left: 0px; width: 5px; height: 5px; background-color: currentColor; display:block;}
.news-list .news-box:not(:first-child) .body a:not(:first-child) img{display:none;}
.news-list .news-box:not(:first-child) .body a:not(:first-child) p{display:none;}

.news-search > h1{position:relative; top: 0px; left: 0px; width: 100%; height:auto; margin: 0px; padding: 0px 0px 15px; border-bottom: 1px solid #ababab; font-size:24px; font-weight: 400;}
.news-search .result-list{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px;}
.news-search .result-list a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:inline-block; padding: 15px 0px; margin: 0px; text-align:justify; border-bottom: 1px dashed #ababab;}
.news-search .result-list a:first-child{padding-top: 0px;}
.news-search .result-list a img{position:relative; top: 0px; left: 0px; height:auto; aspect-ratio: 16/9; padding: 0px; margin: 0px; width: 200px; display:block; float:left; margin-right: 8px; border-radius: 5px;}
.news-search .result-list a h2{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 48px; overflow:hidden; text-align: justify; font-weight: 400; font-size: 18px; padding: 0px; margin: 0px; display: inline;}
.news-search .result-list a h2:before{display:none;}
.news-search .result-list a h2:after{content: ""; position:relative; top: 0px; left: 0px; width: auto; height:auto; display:block;}
.news-search .result-list a p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; max-height: 72px; overflow:hidden; text-align: justify; padding: 0px; margin: 0px; display:inline; color: #000;}

.gallery-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto;}
.gallery-box .head{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; text-align: left; text-transform: uppercase; font-weight: 400; padding: 10px 0px;}
.gallery-box .head:before{content: ""; position:absolute; top: 1px; left: 0px; right: 0px; width: 100%; height: 1px; background-color: #DDD;}
.gallery-box .head:after{content: ""; position:absolute; top: 0px; left: 0px; width: 25px; height: 3px; background-color: #D71920;}
.gallery-box .body{position:relative; top: 0px; left: 0px; width: 100%; height: 85px; padding: 0px; margin: 0px; overflow:hidden;}
.gallery-box .body img{position:relative; top: 0px; left: 0px; width: 150px; height:auto; aspect-ratio: 16/9; display:inline-block; vertical-align:middle; margin: 0px; cursor:pointer;}


.banner-link{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; overflow:hidden;}
.banner-link a{position:relative; top: 0px; width: 100%; height:auto; display:block;}
.banner-link a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; pointer-events:none;}

.menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style: none; text-align:left;}
.menu > li{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align: top; margin-right: 5px; overflow:hidden;}
.menu > li a i{position:absolute; top: 50%; left: 5px; width:auto; height:auto; transform:translateY(-50%); color: inherit; font-size: 20px;}
.menu li a:has(i){padding-left: 32px !important;}
.menu > li:last-child{margin-right: 0px;}
.menu > li a{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px; display:block; line-height: 20px; text-align: justify;}
.menu > li > ul{position:absolute; top: 100%; left: 0px; width:auto; height:auto; min-width: 250px; transform:translateY(50%); transition: 0.3s; filter:opacity(0); -webkit-filter:opacity(0); display:block; padding: 0px; margin: 0px; list-style:none; overflow:hidden; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.menu > li:hover{overflow:unset;}
.menu > li:hover > ul{transform:translateY(0px); filter:opacity(1); -webkit-filter:opacity(1);}
.menu > li > ul > li{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border-bottom: 1px solid #ccc;}
.menu > li > ul > li:last-child{border-bottom: 0px;}
.menu > li > ul > li > a{padding: 10px 10px 10px 20px;}
.menu > li > ul > li > a:before{content: "\f105"; position:absolute; top: 10px; left: 5px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.top-menu{position:relative; top: 0px; left: 0px; width: 100%; height:auto; min-height: 40px; padding: 0px; border-bottom: 1px solid #ababab; /*background: rgb(158,0,1);
        background: linear-gradient(0deg, rgba(158,0,1,1) 0%, rgba(218,0,0,1) 100%);*/
        /*box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;*/
          background-color: #f1f1f1; z-index: 2;
}
.top-menu .container {min-height: 40px; display:grid; grid-template-columns: 1fr max-content; grid-column-gap: 10px; align-items: center;}
.top-menu .container > ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; list-style:none; text-align: left; z-index: 2;}
.top-menu .container > ul > li{position:relative; top: 0px; left: 0px; width: auto; height:auto; display:inline-block; vertical-align:middle; padding: 0px; margin: 0px;}
.top-menu .container > ul > li > a{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 0px 8px; margin: 0px; line-height: 48px; font-weight: 400; text-transform:uppercase; color: #444; display:block; transition: 0.3s;}
.top-menu .container > ul > li > a:hover{color: #D71920;}
.top-menu .container > ul > li:has(ul) > a{padding-right: 20px;}
.top-menu .container > ul > li:has(ul) > a:after{content: "\f107"; position:absolute; top: 0px; left: auto; right: 5px; font-size: 20px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
.top-menu .container > ul > li.active > a{color: #D71920;}
.top-menu .container > ul > li:before{content: ""; position:absolute; top: 5px; left: 50%; right: auto; bottom: 5px; width: 100%; height:auto; transform:translateX(-50%); border-radius: 5px; background: #AA0000; display:block; transition: 0.3s; filter:opacity(0); -webkit-filter: opacity(0);}
.top-menu .container > ul > li.active:before{filter:opacity(1); -webkit-filter: opacity(1);}
.top-menu .container > ul > li.active > a{color: #fff;}
.top-menu .container > ul > li:not(:last-child){margin-right: 20px;}
.top-menu .container > .mobile-menu-icon{position:absolute; top: 0px; left: 15px; width: auto; height: 100%; aspect-ratio: 1; display: none;}
.top-menu .container > .mobile-menu-icon:before{content: "\f0c9"; position:absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); font-size: 30px; font-weight: 300; font-family: "Font Awesome 5 Pro";}
  
.list-box{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px; display:grid; grid-template-columns: 1fr 100px; grid-column-gap: 10px; grid-row-gap: 10px; align-content:center; align-items:center;}
.list-box .head{position:relative; top: 0px; left: 0px; width: auto; padding: 5px 0px; margin: 0px; text-transform:uppercase; font-weight: 700; font-size: 17px; line-height: 22px;}
.list-box .link{position:relative; top: 0px; left: 0px; width:auto; height:auto;}
.list-box .link a{position:relative; top: 0px; left: 0px; width:auto; height:auto; padding: 5px; color: #0084F3;}
.list-box .link a:before{content: "\f0da"; position:relative; top: 0px; left: 0px; margin-right: 5px; font-weight: 900; font-family: "Font Awesome 5 Pro"; display:inline-block;}
.list-box .link a:hover{color: #a00;}
.list-box .body{position:relative; top: 0px; left: 0px; width: 100%; height:auto; grid-column-start: 1; grid-column-end: 3;}

article{position:relative; top: 0px; left: 0px; width: 100%; height:auto; text-align:justify;}
article h1{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-size: 20px; font-weight: 500; line-height: 28px; padding: 0px; margin: 10px 0px;}
article > h1:first-child{margin-top: 0px;}
article h2{position:relative; top: 0px; left: 0px; width: 100%; height:auto; font-size: 18px; font-weight: 400; line-height: 24px; padding: 0px; margin: 10px 0px;}
article p{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 0px; margin: 0px;}
article img{position:relative; top: 0px; left: 0px; max-width: 100%; padding: 0px; margin: 0px;}
article strong, article b{font-weight: 400;}
article .description{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 15px 0px; font-weight: 400; font-style: italic;}
article .publish-info{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:grid; grid-template-columns: 1fr max-content; grid-column-gap:10px;}
article .publish-info .date{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; font-size: 14px; color: #666;}
article .publish-info .date:before{content: "\f017"; position:relative; top: 0px; left: 0px; margin-right:5px; display:inline-block; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.m-gallery{position:fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.9);}
.m-gallery img{object-fit:contain; object-position:center; height: 100vh;}
.m-gallery .close{position:absolute; top: 20px; left: auto; right: 20px; width: 32px; height: 32px; font-size: 32px; background-color: rgba(0,0,0,0.25); color: #fff; cursor:pointer; text-align: center; border-radius: 5px; z-index: 2;}
.m-gallery .slick-arrow{z-index: 2; width: 40px; height: 40px;}
.m-gallery .slick-arrow:before{font-size:30px; top: 50%; left:50%; transform:translate(-50%, -50%);}
.m-gallery .slick-next{left:auto; right: 20px;}
.m-gallery .slick-prev{left: 20px;}
.m-gallery .slick-dots{z-index:2; bottom: 25px;}
.m-gallery .slick-dots li button{box-shadow:unset; border: 0px;}
.m-gallery .slick-dots li button:before{font-size: 20px; transform:unset;}

.video-box{grid-row-gap: 0px; border-radius: 5px; overflow:hidden;}
.video-box .head{grid-column-start: 1; grid-column-end: 3; font-weight: 400; background-color: #feeea9; padding-left: 10px;}
.video-box .head:before{content: ""; position:absolute; top: 50%; left: 0px; width: 2px; height: 50%; transform:translateY(-50%); background-color: #d71920;}
.video-box .player{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9;}
.video-box video{position:relative; top: 0px; left: 0px; width: 100%; height:auto; aspect-ratio: 16/9; display:block;}
.video-box video[poster]{width: 100%; height: 100%; object-fit:cover;}
.video-box .play-list{position:relative; top: 0px; left: 0px; width: 100%; height: 164px; overflow:auto; padding: 5px; background-color: #feeea9;}
.video-box .play-list ul{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 0px; margin: 0px;}
.video-box .play-list ul li{position:relative; top: 0px; left: 0px; width: 100%; height:auto; padding: 5px 5px 5px 15px; margin: 0px; text-align:justify; display:block; cursor:pointer;}
.video-box .play-list ul li:hover{color: #d71920;}
.video-box .play-list ul li:before{content: "\f105"; position:absolute; top: 5px; left: 0px; font-weight: 300; font-family: "Font Awesome 5 Pro";}

.web-link{grid-row-gap: 0px; border-radius: 5px; overflow:hidden;}
.web-link .head{grid-column-start: 1; grid-column-end: 3; padding-left: 10px; font-weight: 400; display:none;}
.web-link .head:before{content: ""; position:absolute; top: 50%; left: 0px; width: 2px; height: 50%; transform:translateY(-50%); background-color: #d71920;}
.web-link .body{display:grid; grid-template-columns: 1fr; grid-row-gap: 15px;}
.web-link .body a{position:relative; top: 0px;left: 0px; width: 100%; height:auto; display:block; padding: 0px; margin: 0px;}
.web-link .body a img{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; border-radius: 8px; border: 1px solid #ddd;}

.table-grid{position:relative; top: 0px; left: 0px; width: 100%; height:auto; border: 1px solid #ababab; border-radius: 5px; overflow:hidden; border-spacing: 0px; max-width: 100%; overflow:auto;}
.table-grid tr:hover{background-color: #f1f1f1;}
.table-grid tr th{text-align:center; font-weight:normal; padding: 10px 15px; background-color: #ababab; color: #fff;}
.table-grid tr th:not(:last-child), .table-grid tr td:not(:last-child){border-right: 1px solid #ababab;}
.table-grid tr:not(:last-child) th, .table-grid tr:not(:last-child) td{border-bottom: 1px solid #ababab;}
.table-grid tr td{padding: 8px;}
.table-grid tr th[data-field='stt'], .table-grid tr th[data-field='STT'], .table-grid tr th[data-field='Stt']{width: 70px; min-width: 70px;}
.table-grid tr td[data-field='stt'], .table-grid tr td[data-field='STT'], .table-grid tr td[data-field='Stt']{text-align: center;}
.table-grid + .pager{position:relative; top: 0px; left: 0px; width: 100%; height: auto; padding: 5px; margin: 15px 0px; border: 1px solid #ababab; border-radius: 5px;}
.table-grid + .pager:empty{display:none;}
.table-grid + .pager ul li{padding: 5px; font-size: 16px; min-width: 30px;}

.month-selector{position:relative; top: 0px; left: 0px; width: max-content; height:auto; padding: 0px; border: 1px solid var(--border-color); border-radius: 5px; overflow:hidden; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-gap: 5px;}
.month-selector select{border: 0px;}
.month-selector .prev, .month-selector .next{position:relative; top: 0px; left: 0px; width: 25px; height: 100%; background-color: transparent; cursor: pointer; color: var(--border-color);}
.month-selector .prev:before, .month-selector .next:before{content: "\f054"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 300; font-family: "Font Awesome 5 Pro"; color: inherit;}
.month-selector .prev:before{content: "\f053";}
.month-selector .prev:hover, .month-selector .next:hover{background-color: var(--border-color); color: var(--default-font-color);}

.calendar-view{position:relative; top: 0px; left: 0px; width: 100%; height: auto; aspect-ratio: 1; background-color: transparent; display: grid; grid-gap: 0px; overflow:hidden;}
.calendar-view[data-type='month']{grid-template-columns:repeat(7, 1fr); grid-template-rows: max-content repeat(6, 1fr);}
.calendar-view > div{position:relative; top: 0px; left: 0px; width: 100%; height: 100%; overflow:hidden; border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); padding: 5px;}
.calendar-view > div[data-row='0']{text-align: right; background-color: var(--grid-grid-header-table-tr-th-bg-color) !important; font-weight: 400;}
.calendar-view > div[data-row='0']:before{position:relative; top: 0px; left: 0px; right:auto; bottom: auto; width:auto; height:auto; display:inline;}
.calendar-view > div:before{content: attr(data-title); position:absolute; top: 5px; right: 5px; width: auto; height: auto; padding: 3px; border-radius: 5px;}
.calendar-view > div[data-row='6']{border-bottom: 0px;}
.calendar-view > div[data-col='6']{border-right: 0px; background-color: rgb(245, 245, 245);}
.calendar-view > div[data-col='5']{background-color: rgb(245, 245, 245);}
.calendar-view > div[data-this-month='0']{color: #ccc;}
.calendar-view > div[data-is-today='1']:before{background-color: rgb(235, 85, 69); height: 28px; aspect-ratio: 1; border-radius: 50%; color: #fff; text-align: center; padding: 0px; display: grid; grid-template-columns: 1fr; align-items: center;}

.simple-info{position:fixed; top: 50%; left: 50%; width: auto; height: auto; max-width: calc(100% - 10px); max-height: calc(100% - 10px); transform: translate(-50%, -50%); background-color: #f1f1f1; border: 1px solid var(--border-color); border-radius: 5px; overflow: hidden; box-shadow: var(--popup-shadow); transition: 0.3s;}
.simple-info.hide{filter: opacity(0); -webkit-filter: opacity(0);}
.simple-info .content{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 5px; overflow:auto;}
.simple-info .close{position: fixed; top: 0px; left: auto; right: 0px; width: 24px; height: 24px; border-radius: 0px 0px 0px 5px; background-color: var(--border-color); cursor: pointer; z-index: 2;}
.simple-info .close:before{content: "\f00d"; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 300; font-family: "Font Awesome 5 Pro"; display: block; transition: 0.3s;}
.simple-info .close:hover:before{font-weight: 900;}

.address-lookup{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display: grid; grid-template-columns: 1fr 35% 25%; grid-gap: 5px;}
.rtl.address-lookup{grid-template-columns: 25% 35% 1fr;}
.rtl.address-lookup .tinh-thanh{grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;}
.rtl.address-lookup .so-nha{grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;}

.chosen-container-single .chosen-single{height: 35px; background: none; box-shadow: none;}
.chosen-container-single .chosen-single span{line-height: 35px; font-size: 16px;}
.chosen-container-single .chosen-single div{display: grid; grid-template-columns: 1fr; align-content: center; align-items: center; text-align: center;}
.chosen-container-single .chosen-single div b{width: 10px; height: 25px;}
.chosen-container .chosen-results li{font-size: 16px; line-height: 20px;}
.chosen-container-single .chosen-search input[type="text"]{border-radius: 5px;}

@-webkit-keyframes blinker {
  50%{opacity: 0.1;}
}

@keyframes blinker {
  50%{opacity: 0.1;}
}

@media (max-width: 950px) {
    .row{grid-template-columns:repeat(8, 1fr);}
    .row .col-8, .row .col-9, .row .col-10,
    .row .col-11{position:relative;  grid-column:1 / -1;}

    .table-grid{border: 0px; border-collapse: collapse; display:grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
    .table-grid tr th, .table-grid td{border-right: 0px !important; border-bottom: 0px !important; padding: 5px !important;}
    .table-grid tr:first-child{display:none;}
    .table-grid tr{border : 1px solid #ababab; border-radius: 5px; display:block; padding: 5px;}
    .table-grid tr td{position:relative; top: 0px; left: 0px; width: 100%; height:auto; display:block; text-align: justify !important;}
    .table-grid td[data-field='stt'], .table-grid td[data-field='Stt'], .table-grid td[data-field='STT']{display:none;}
    .table-grid tr td[colspan]{display:block !important;}
    .table-grid tr td:before{content: attr(data-title); position:relative; display:inline; width: auto; height:auto; margin-right: 10px; font-weight: 400;}
}

@media (max-width: 768px) {
    
}

@media (max-width: 750px) {
    
}

@media (max-width: 600px) {
    .hot-news{grid-template-columns: 1fr; grid-row-gap: 15px;}
    .hot-news .news-list{grid-template-columns: 1fr 1fr;}
    .top-menu{position:relative; top: 0px; left: 0px; width:max-content; height:auto; display:inline-block; vertical-align:top;}
    .top-menu:before{content: "\f0c9"; position:relative; top: 0px; left: 0px; width: 40px; height: 40px; font-size: 30px; display:grid; align-content:center; align-items:center; text-align:center; font-weight: 300; font-family: "Font Awesome 5 Pro"; color: #fff;}
    .top-menu > ul, .top-menu .container > ul{position:fixed; top: 0px; left: 0px; right:auto; bottom: 0px; width: auto; height: 100%; max-width: 90%; min-width: 60%; background-color: #000; padding: 10px; margin: 0px; transform:translateX(-100vw); transition: 0.3s; display:block;}
    .top-menu > ul:before, .top-menu .container > ul:before{content: ""; position:fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.25); display:block;}
    .top-menu > ul li, .top-menu .container > ul li{display:block; margin: 0px; padding: 5px;}
    .top-menu:focus > ul, .top-menu:focus .container > ul{transform:translateX(0px);}
    .address-lookup{grid-template-columns: 1fr 40%;}
    .address-lookup .so-nha{grid-column-start: 1; grid-column-end: 3;}
    .rtl.address-lookup{grid-template-columns: 40% 1fr;}
    .rtl.address-lookup .tinh-thanh{grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;}
    .rtl.address-lookup .so-nha{grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 3;}
}

@media (max-width: 450px) {
    .row{grid-template-columns:1fr;}
    .row .col-2, .row .col-3, .row .col-4, .row .col-5,
    .row .col-6, .row .col-7, .row .col-8, .row .col-9,
    .row .col-10, .row .col-11{position:relative;  grid-column:1 / -1;}
    .hot-news .news-list{grid-template-columns: 1fr;}
    .table-grid{grid-template-columns: 1fr;}
}