@charset "UTF-8";
/**
 * Voffice 2.0 Common theme
 * @author TruongTX5
 * @license Viettel Group
 */
/*****************************Mix-ins**************************** */
/**
 * Voffice 2.0 Mix-ins
 * @author TruongTX5
 * @license Viettel Group
 */
/**
 * Voffice 2.0 Variables
 * @author TruongTX5
 * @license Viettel Group
 */
/*****************************Variables**************************** */
/*****************************Mix-ins**************************** */
/*****************************Common**************************** */
.position-top {
  position: absolute;
  top: 0; }

.position-bottom {
  position: absolute;
  bottom: 0; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis; }

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis; }
  .ellipsis:before {
    content: "";
    float: left;
    width: 5px;
    height: 200px; }
  .ellipsis:after {
    content: "…";
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    float: right;
    position: relative;
    top: -24px;
    left: 100%;
    width: 3em;
    margin-left: -3em;
    padding-right: 5px;
    text-align: right;
    background-size: 100% 100%;
    /* 512x1 image, gradient for IE9. Transparent at 0% -> white at 50% -> white at 100%. */
    background-image: url(data:image/pngbase64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }
  .ellipsis > .ellipsis-child:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }

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

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

.row-scroll-10 {
  line-height: 18px;
  max-height: calc(10*18px);;
  overflow: auto;
}

.font-icon:before {
  display: inline-block;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: normal; }

.gray-scale {
  filter: "gray";
  filter: grayscale(1);
  -webkit-filter: grayscale(1); }

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

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

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

.align-middle {
  vertical-align: middle; }

.align-top {
  vertical-align: top; }

.align-bottom {
  vertical-align: bottom; }

.text-danger, .z-label.text-danger {
  color: #b94a48 !important; }

.text-warning, .z-label.text-warning {
  color: #d50000 !important; }

.no-margin {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0; }

.no-margin-top {
  margin-top: 0; }

.no-margin-bottom {
  margin-bottom: 0; }

.no-margin-right {
  margin-right: 0; }

.no-margin-left {
  margin-left: 0; }

.display-table-cell {
  display: table; }
  .display-table-cell > div {
    display: table-cell;
    vertical-align: middle; }

/*-----------------------------------Width-------------------------------------- */
.w400 {
  width: 400px; }

.w800 {
  width: 800px; }

/*-----------------------------------Background Color-------------------------------------- */
.bg-red {
  background-color: #fc8675; }
  
.bg-red2 {
  background-color: #ff0000; }

.bg-red3 {
  border-color: #EE0033 !important; }

.bg-red3 .z-label {
  color: #EE0033 !important; }

.bg-blue {
  background-color: #5ab6df; }

.bg-blue2 {
  background-color: #3c989e; }

.bg-green {
  background-color: #65cea7; }

.bg-green2 {
  background-color: #9ec789; }
  
.bg-green3 {
  background-color: #05afb5; }

.bg-yellow {
  background-color: #ebc85e; }

.bg-yellow2 {
  background-color: #eae696; }

.bg-purple {
  background-color: #6a8abe; }

.bg-pink {
  background-color: #f56f6c; }

.bg-brown {
  background-color: #f4cda5; }
  
.bg-brown2 {
  background-color: #8a420d; }

.bg-white {
  background-color: #FFFFFF; border-color: #00000020; }
  

/*-----------------------------------Left Arrow-------------------------------------- */
.left-arrow:after, .left-arrow:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }
.left-arrow:after {
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #88b7d5;
  border-width: 30px;
  margin-top: -30px; }
.left-arrow:before {
  border-color: rgba(194, 225, 245, 0);
  border-right-color: #c2e1f5;
  border-width: 36px;
  margin-top: -36px; }

/*-----------------------------------Top Arrow-------------------------------------- */
.top-arrow:after, .top-arrow:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }
.top-arrow:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #88b7d5;
  border-width: 30px;
  margin-left: -30px; }
.top-arrow:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #c2e1f5;
  border-width: 36px;
  margin-left: -36px; }

/*-----------------------------------Bandroll-------------------------------------- */
.bandroll.arrowed, .bandroll.arrowed-in {
  position: relative;
  z-index: 1; }
.bandroll.arrowed:before, .bandroll.arrowed-in:before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-right-color: #abbac3;
  -moz-border-right-colors: #abbac3; }
.bandroll.arrowed-in:before {
  border-color: #abbac3;
  border-left-color: transparent;
  -moz-border-left-colors: none; }
.bandroll.arrowed-right, .bandroll.arrowed-in-right {
  position: relative;
  z-index: 1; }
.bandroll.arrowed-right:after, .bandroll.arrowed-in-right:after {
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  border: 1px solid transparent;
  border-left-color: #abbac3;
  -moz-border-left-colors: #abbac3; }
.bandroll.arrowed-in-right:after {
  border-color: #abbac3;
  border-right-color: transparent;
  -moz-border-right-colors: none; }
.bandroll.arrowed-in {
  margin-left: 5px; }
.bandroll.arrowed-in:before {
  left: -5px;
  border-width: 10px 5px; }
.bandroll.arrowed-right {
  margin-right: 5px; }
.bandroll.arrowed-right:after {
  right: -10px;
  border-width: 10px 5px; }
.bandroll.arrowed-in-right {
  margin-right: 5px; }
.bandroll.arrowed-in-right:after {
  right: -5px;
  border-width: 10px 5px; }

/*-----------------------------------Snippets-------------------------------------- */
.vertical-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateX(0) translateY(-50%);
  -moz-transform: translateX(0) translateY(-50%);
  -ms-transform: translateX(0) translateY(-50%);
  -o-transform: translateX(0) translateY(-50%);
  transform: translateX(0) translateY(-50%); }

.clear-fix {
  clear: both; }

/* Smartphones (portrait and landscape) ----------- */
/* Styles */
/* Smartphones (landscape) ----------- */
/* Styles */
/* Smartphones (portrait) ----------- */
/* Styles */
/* iPads (portrait and landscape) ----------- */
/* Styles */
/* iPads (landscape) ----------- */
/* Styles */
/* iPads (portrait) ----------- */
/* Styles */
/* Desktops and laptops ----------- */
/* Styles */
/* Large screens ----------- */
/* Styles */
/* iPhone 4 ----------- */
/* Styles */
/* Styles */
/*------------- Text selection ----------- */
/* ::selection  background: #e2eae2 } */
/* ::-moz-selection  background: #e2eae2 } */
/* ::-webkit-selection  background: #e2eae2 } */
/*------------- Fullscreen background ----------- */
/* html   */
/*     background: url('images/bg.jpg') no-repeat center center fixed  */
/*     -webkit-background-size: cover */
/*     -moz-background-size: cover */
/*     -o-background-size: cover */
/*     background-size: cover */
/* } */
/*------------- Tooltip ----------- */
/* a[data-tooltip]:link, a[data-tooltip]:visited  */
/*     position: relative */
/*     text-decoration: none */
/*     border-bottom: solid 1px */
/* } */
/* a[data-tooltip]:before  */
/*   content: "" */
/*   position: absolute */
/*   border-top: 20px solid #0090ff */
/*   border-left: 30px solid transparent */
/*   border-right: 30px solid transparent */
/*   visibility: hidden */
/*   top: -18px */
/*   left: -26px */
/* } */
/* a[data-tooltip]:after  */
/*   content: attr(data-tooltip) */
/*   position: absolute */
/*   color: white */
/*   top: -35px */
/*   left: -26px */
/*   background: #0090ff */
/*   padding: 5px 15px */
/*   -webkit-border-radius: 10px */
/*   -moz-border-radius: 10px */
/*   border-radius: 10px */
/*   white-space: nowrap */
/*   visibility: hidden */
/* } */
/* a[data-tooltip]:hover:before, a[data-tooltip]:hover:after  */
/*   visibility: visible */
/*   -webkit-transition: visibility 0s linear .3s */
/*   -moz-transition: visibility 0s linear .3s */
/*   -o-transition: visibility 0s linear .3s */
/*   transition: visibility 0s linear .3s */
/* } */

/*-----------------------------------modaless window--------------------------------------*/
.z-window-overlapped-shadow {
    box-shadow: 0 0 0px rgba(0,0,0,0.5) !important;
}

/*-----------------------------------pdf viewer window------------------------------------*/
.pdf-viewer-top-window { 
    z-index: 2147418112 !important 
}

.pdf-viewer-float-window, .z-window-embedded-cnt {
    margin: 0;
    padding: 0;
}

.pdf-viewer-float-window, .z-window-popup-cnt {
    margin: 0;
    padding: 0;
}

.pdf-viewer-float-window, .z-window-overlapped-cnt {
    margin: 0;
    padding: 0;
}
tr.z-listitem,tr.z-listitem a,tr.z-listitem a:visited {
   font-size: 14px;
}

.tab-container {
  margin: 5px 0;
  background-color: #E6E6E6;
  border-radius: 4px;
  padding-right: 0px;
  height: 34px;
}

.tab-container button {
  background-color: #E6E6E6;
  color: #4B5563;
  border: 0 !important;
  height: 28px;
  min-height: 28px;
  margin: 3px;
}

.tab-container button.active {
  background-color: #fff;
  color: #EE0033;
  font-weight: 600;
}

.fa-chu-tri {
  font-size: 20px !important;
  border: solid 1px #3C66A0;
  border-radius: 0 !important;
  padding: 0 5px;
}

.fa-chu-tri:before{
  color: #3C66A0;
  content: 'CT';
}

.fa-chu-tri:hover {
  background: #3C66A0 !important;
}

.fa-chu-tri:hover:before {
  color: white;
}

.fa-chu-tri-background {
  font-size: 20px !important;
  border: solid 1px #3C66A0;
  border-radius: 0 !important;
  padding: 0 5px;
  background: #3C66A0 !important;
}

.fa-chu-tri-background:before {
  color: white;
  content: 'CT';
}

.fa-phoi-hop {
  font-size: 20px !important;
  border: solid 1px #3C66A0;
  border-radius: 0 !important;
  padding: 0 5px;
}

.fa-phoi-hop:before{
  color: #3C66A0;
  content: 'PH';
}

.fa-phoi-hop:hover {
  background: #3C66A0 !important;
}

.fa-phoi-hop:hover:before {
  color: white;
}

.fa-phoi-hop-background {
  font-size: 20px !important;
  border: solid 1px #3C66A0;
  border-radius: 0 !important;
  padding: 0 5px;
  background: #3C66A0 !important;
}

.fa-phoi-hop-background:before {
  color: white;
  content: 'PH';
}

/*.tabbox-container .z-tabs .z-tabs-cnt {*/
/*   background-color: #E6E6E6; */
/*  padding: 4px;*/
/*  border-radius: 4px;*/
/*  color: #0a0a0a;*/
/*}*/
/*.tabbox-container .z-tab {*/
/*  background-color: #E6E6E6;*/
/*  border-radius: 4px;*/
/*}*/

/*.tabbox-container .z-tab-seld {*/
/*  background-color: #fff;*/
/*}*/

/*.tabbox-container .z-tabs-cnt li.z-tab-seld .z-tab-text {*/
/*  font-weight: 600;*/
/*  color: #EE0033;*/
/*}*/

/*.tabbox-container .z-tabs-cnt li .z-tab-text {*/
/*  color: #1f1f1f;*/
/*}*/

/*.tabbox-container.z-center {*/
/*  z-index: 17;*/
/*}*/

/*.tabbox-container .toolbarButton {*/
/*  position: fixed;*/
/*  top: 132px;*/
/*  right: 10px;*/
/*  !* width: 100%; *!*/
/*  !* height: 100%; *!*/
/*}*/

/*.tabbox-container .z-tabs {*/
/*  border: 0px solid #cccccc;*/
/*}*/

.tabbox-container .z-tab-hl {
  padding-left: 20px;
  padding-right: 20px;
}

/*.tabbox-container .z-tabs .z-tabs-cnt {*/
/*  */
/*  width: fit-content;*/
/*}*/

/*.tabbox-container .z-tabs-cnt .z-tabs-edge {*/
/*  display: none;*/
/*}*/

.d-flex {
  display: flex !important;
}

.z-hlayout.whitespace-normal {
  white-space: normal;
}

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

.w-100 {
  width: 100%;
}

.gap-3 {
  gap: 16px;
}

.mt-1 {
  margin-top: 4px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 16px;
}

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


.font-icon.fa-to-doc-label:before {
  content: "CT";
}



.font-icon.fa-to-doc-label:before, .font-icon.fa-cc-doc-label:before {
  background-color: #3C66A0;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  font-family: Inter, serif;
  padding: 0 4px;
  border-radius: 4px;
  line-height: 14px;
}

.font-icon.fa-cc-doc-label:before {

  content: "PH";
  background-color: #939393 !important;
}

.v-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px
}

.v-icon svg {
  width: 20px;
  height: 20px;
  fill: #4B5563;
}

.v-icon:hover svg {
  fill: #B9000E;
}

.v-icon:active svg {
  fill: #B9000E;
}

.v-icon:active {
  background-color: #F0E8E8;
}

.v-icon.disabled svg {
  fill: #9CA3AF;
}

.grid-attach div.z-grid-body {
  overflow: hidden !important;
}