.container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}
/* @media (min-width: 767px) {
    .container {
        width: 87.5vw;
        max-width: 1680px;
        padding: 0;
    }
} */

/* #wrapper{
    position: relative;
    right: 0;
    -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility;
    -ms-transition: right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -webkit-transition: right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: right 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wrapper-open{right:480px !important;} */
.wrapper-fixed{
    background: rgba(244 245 247 / .8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms linear;
}
.wrapper-fixed.open{
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(10px);
}


body.index main {
    background: #fafafa;
}


/* Top Bar */
.topbar{
    margin: 0 auto;
	position: relative;
	width: 100%;
}
.topbar-icon{
    cursor: pointer;
    position: absolute;
    content: "";
    background: #eee;
    width: 20px;
    height: 20px;
    right: 0;
    top: calc(50% - 10px);
    z-index: 10;
    border-radius: 50%;
}
.topbar-icon:hover{
    background: #ddd;
}
.topbar-icon::before{
    position: absolute;
    width: 12px;
    height: 2px;
    content: '';
    background: #999;
    display: block;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    top: calc(50% - 1px);
    left: calc(50% - 6px);
}
.topbar-icon::after{
    position: absolute;
    width: 12px;
    height: 2px;
    content: '';
    background: #999;
    display: block;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    top: calc(50% - 1px);
    left: calc(50% - 6px);
}
/* end Top Bar */

/* Header */
#header {
	width: 100%;
	height: 50px;
	padding:0;
	background: #041954;
    position: relative;
    z-index: 18;
}
#header.small{
    /* background-color: rgba(255, 255, 255,.95);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px); */
    background: #041954 !important;
    transition: all .5s;
    -webkit-transition: all .5s;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    box-shadow: 0px 10px 10px rgb(0 0 0 / 5%) !important;
}
#header .container{
    max-width: 1300px;
}
/* #header.active {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
} */
.logo{
    display: block;
	width: 250px;
	height: 60px;
    -webkit-transition: all 0.35s;
    -moz-transition: all 0.35s;
    transition: all 0.35s;
}
.logo.small{
    width: 120px;
    height: 50px;
}
.logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*.yeucau-baogia{
	float:right;
	max-width:227px;
	position:relative;
	top:4px;
	margin-right: 10px;
}
.yeucau-baogia::before{
	position:absolute;
	content:"";
	background: url('../images/icon-money.svg') no-repeat 0 center / 24px;
	width:24px;
	height:24px;
	top:calc(50% - 12px);
}
.yeucau-baogia:hover::before{animation: 1s ease-in-out 0s normal none infinite running bounce;}
@keyframes bounce {
    0%{transform: translateY(0);}
    10%{
    	transform: translateY(-4px);
    	transform: rotate(-25deg) scale(1) skew(1deg);
    }
    20%{
    	transform: translateY(-6px);
    	transform: rotate(25deg) scale(1) skew(1deg);
    }
    40% {transform: translateY(-8px);}
    60% {transform: translateY(-10px);}
    100%{transform: translateY(0);}
}
.yeucau-baogia .text{
	display:block;
	text-transform:uppercase;
	font-weight: 600;
	font-size: 13px;
	margin:10px 0 0 30px;
	letter-spacing:1px;
	color:#111;
}*/
.hotline{
	position:relative;
	color:var(--white);
}
.hotline .ic-phone{
    width:32px;
    height:24px;
    position:absolute;
    top: calc(50% - 12px);
}
.hotline.animation:hover .ic-phone{
    float: left;
    text-align: center;
    animation: 1s ease-in-out 0s normal none infinite running quick-alo-circle-img-anim;
}
/* .hotline::before{
	position:absolute;
	content:"";
	background: url('../images/icon-phone1.svg') no-repeat 0 0 / 24px;
	width:32px;
	height:24px;
	top: calc(50% - 12px);
}
.hotline.animation:hover::before{
    float: left;
    text-align: center;
	animation: 1s ease-in-out 0s normal none infinite running quick-alo-circle-img-anim;
} */
.text-normal{display:block;font-size:10px;margin-left:40px;}
.text-email{font-size:14px;margin-left:40px;}
.phone-number{display:block;margin-left:40px; font-weight: 700; font-size: 22px;line-height: 1;}
.phone-number a{color:var(--white);}

@media (min-width: 992px){
    #wrapper.index #header{
        position: fixed;
        top: 0;
        left: 0;
        background: linear-gradient(180deg, #041954 50%, transparent);
    }
    #header{
        height: 80px;
        transition: height 0.35s;
        -webkit-transition: height 0.35s ease-out;
        -moz-transition: height:  0.35s ease-out;
        /* box-shadow: 0px 10px 10px rgb(0 0 0 / 5%); */
    }
    
    .header-top{
        height: 80px;
    }
    .header-top.small{height: 50px;}
    /* #header.active {
      position: fixed;
      z-index: 4;
      top: 0;
      left: 0;
    } */
    /* #header.active .container .logo {
        height: 0px;
        opacity: 0;
    } */
}

/* Search */
.search-top.active #formSearch{
    opacity: 1;
    visibility: visible;
    width: 100%;
    background: linear-gradient(180deg, #041954 30%, transparent);
    height: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 2rem 0 5rem 0;
    transition: height .35s cubic-bezier(0.000, 0.795, 0.000, 1.000);
}
.btn-search svg,
.btn-search use {
  pointer-events: none;
}
.btn-search{color:#fff;width: 50px;text-align: center; cursor: pointer;}
.close-menu .ic-close,
.btn-search .ic-search,
.btn-search .ic-close{
    width: 24px;
    height: 24px;
}
.close-menu .ic-close,
.btn-search .ic-close{
    stroke-width:1.7;
}


#formSearch {
    display: flex;
    align-items: center;
    position: relative;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
}
/* #formSearch.open{
    position: absolute;
    width: calc(100% - 200px);
    height: 48px;
    top: calc(50% - 24px);
    left: 100px;
    z-index: 1;
    margin: 0;
    box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
    border-color: rgba(223,225,229,0);
    
} */
#input-search {
    height: 50px;
    display: inline-block;
    border: none;
    outline: none;
    color:var(--color-primary);
    width: 100%;
    cursor: pointer;
    background:var(--light);
    z-index: 3;
    border-radius:.5rem 0 0 .5rem;
    padding: 1rem;
}
/* #formSearch.open #input-search{
    width: 100%;
    order: 1;
    background: unset;
} */
/* #input-search:focus{
	color: #333;
    width: 500px;
    padding: 0 60px 0 10px;
    right: 50px;
    background: #fff;
} */
#button-search{
	width: calc(38px + 1rem);
	height: 50px;
	border:0;
	cursor: pointer;
	padding: 0 .5rem;
    color: var(--white);
    background: var(--color-second);
    border-radius: 0 .5rem .5rem 0;
}
.icon-search{
	width: 24px;
	height: 24px;
	display: block;
}
#remove-keyword{
    position: relative;
    content: "";
	background: #eee;
    width: 20px;
    height: 20px;
    right: 40px;
    top: 8px;
    z-index: 10;
    display: none;
    cursor: pointer;
    border-radius: 50%;
}
#remove-keyword:hover{background: #ddd;}
#remove-keyword::after{
	position: absolute;
    width: 12px;
    height: 2px;
    content: '';
    background: #999;
    display: block;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    top: calc(50% - 1px);
    left: calc(50% - 6px);
}
#remove-keyword::before{
	position: absolute;
    width: 12px;
    height: 2px;
    content: '';
    background: #999;
    display: block;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    top: calc(50% - 1px);
    left: calc(50% - 6px);
}
/* search ajax */
#search-result{
	background: #eee;
	position: absolute;
	top: 38px;
	left: 0;
	width: 100%;
}
#search-result ul li{
	display: block;
	border-bottom: 1px solid #dfdfdf;
	padding: 5px;
}
#search-result ul  li:hover{background:#dfdfdf;}
#search-result li a{display: block;color:#333;}
#search-result ul li img{
	width: 50px;
	height: auto;
	float: left;
	margin: 0 10px 0 0;
}
#search-result ul li h3{
	font-size: 13px;
}
#search-result ul li span{
	font-size: 13px;
	color: #e10531;
}

@media (min-width: 992px){
   
}
/* end Search */
/* end header */

/* Main Nav */
@media (max-width: 991px){    
    .header-mobile{
        position: absolute;
        top: 0;
        left: 0;
    }
    .logo {  
      width: 120px;
      height: 50px;
      display: block;
      transition: .1s;
      margin-left: calc(50% - 60px);
    }
    .logo img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    #mainnav{
        height: 100%;
        width: 280px;
        position: fixed;
        z-index: 20;
        top: 0px;
        bottom: 0px;
        left: -280px;
        background: var(--white);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 10px;
        border-top-right-radius: 24px;
        border-bottom-right-radius: 24px
    }
    #mainnav.open{
        -moz-transition: -moz-transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
        -o-transition: -o-transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
        -o-transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
        -webkit-transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
        transition: -webkit-transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;
        transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 300ms;

        -webkit-transform: translate(280px, 0);
        -ms-transform: translate(280px, 0);
        transform: translate(280px, 0);
    }
    #mainnav.open .close-menu{
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        cursor: pointer;
    }
    .toggle-menu {
        width: 50px;
        height: 50px;
        position: relative;
        z-index: 2;
    }
    .toggle-menu i {
        position: absolute;
        display: block;
        height: 3px;
        background: #fff;
        width: 30px;
        left: 10px;
        -webkit-transition: all .2s;
        -moz-transition: all .2s;
        transition: all .2s;
    }
    .toggle-menu i:nth-child(1) {top: 16px;}
    .toggle-menu i:nth-child(2) {top: 24px;}
    .toggle-menu i:nth-child(3) {top: 32px;}
    .open-menu i:nth-child(1) {
        top: 25px;
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    .open-menu i:nth-child(2) {background: transparent;}
    .open-menu i:nth-child(3) {
        top: 25px;
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
    }
    .toggle-menu > span{
        color: #fff;
        position: absolute;
        bottom: -5px;
        left: 19%;
        font-size: 12px;
    }
    .toggle-menu > span::before{content:'Menu';}
    .toggle-menu.open-menu > span::before{content: 'Close';}

    .wrapper-fixed{
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
    }
    .wrapper-fixed.open{
        display: block;
        position: fixed;
        z-index: 5;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(3px);
    }

    /* MenuTop */
    ul#menutop {
        margin-top: 2rem;
    }
    #menutop li{
      width: 100%;
      position: relative;
      padding: 0;
    }
    #menutop li.havechild::after{
      border-top: 1px solid var(--color-primary);
      border-right: 1px solid var(--color-primary);
      width: 6px;
      height: 6px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 1px 2px 5px;
      transform: rotate(45deg);
      transition: all 0.1s ease-out 0s;
      position: absolute;
      content: '';
      top: calc(50% - 3px);
      right: 10px;
    }
    
    #menutop li.open::after{
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      transform: rotate(135deg);
      top: 16px;
    }
    #menutop .has-image{background-image: none !important;}
    #menutop ul a {
      padding: 5px 0;
      display: block;
      color: var(--color-primary);
    }
    #menutop > li > a{
      line-height: 40px;
      display: block;
      font-size: 18px;
      color: var(--color-primary);
      font-weight: 500;
      padding: 0 15px;
      text-transform: uppercase;
    }
    
    #menutop .cols,
    #menutop .cols1,
    #menutop .cols2,
    #menutop .cols3,
    #menutop .cols4,
    #menutop .cols5{
      display: none;
      padding-left: 1rem;
      width: 100%;
      margin-left: 1rem;
      border-left: 1px solid var(--gray);
      background: none;
    }
    .havesubchild.open>a{font-weight: bold;}
}

@media (min-width: 992px){    
    #mainnav {
    	/* height:80px; */
    	width:100%;
    }
    #mainnav.active{
        position: fixed;
        z-index: 4;
        top: 0;
        left: 0;
    }
    /* .fixed{
        background-color: rgba(255, 255, 255,.9) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 3;
        display: block !important;
        transition: all .5s;
        -webkit-transition: all .5s;
        box-shadow: inset 0 -1px 0 #eee, 0 4px 8px 0 rgba(0,0,0,.03);
    }
    .fixed #menutop > li > a {color: #333;} */

    /* menu top */
    #menutop{
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        overflow-x: auto;
    }
    #menutop::-webkit-scrollbar {display: none;}
    #menutop li{cursor: pointer;}
    #menutop > li:hover{
       background-image: radial-gradient(70.75% 137.88% at 50% 187.88%, rgb(40 138 214 /50%) 0, rgb(40 138 214 / 50%) 20.76%, rgba(250, 169, 29, 0) 100%); 
    }
    #menutop > li> ul{
        background: var(--white);
        -webkit-box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
        border-radius: 0 0 7px 7px;
        transform: scaleY(0);    
        transform-origin: top;
        transition: transform 0.26s ease;
    }
    #menutop ul a {
      padding: 5px 0;
      display: block;
      color: #333;
      font-size: 15px;
    }
    #menutop ul a:hover {color: var(--color-link);}
    
    /* cols */
    #menutop > li.havechild > .cols{
        position: absolute;
        z-index: 4;
        left: inherit;
        padding: 10px 20px;
        display: grid;
        grid-template-columns: repeat(var(--cols), auto);
        grid-template-rows: minmax(min-content, max-content);
        gap: 0 2rem;
        width: max-content;
        max-width: 1200px;
    }
    #menutop > li > .cols{
      position: absolute;
      z-index: 4;
      left: inherit; 
      padding: 10px 20px;
      /* display: grid;
      grid-template-columns: repeat(var(--cols), auto);
      grid-template-rows: minmax(min-content, max-content);
      gap: 0 2rem; */
      column-count: var(--cols);
      width: max-content;
      max-width: 1200px;

    }
    /* cols5 */
    /* #menutop .cols5{
      position: absolute;
      z-index:5;
      left: 0; 
      width: 100%;
      padding: 10px -webkit-calc((100vw - 1170px) / 2);
      padding: 10px calc((100vw - 1170px) / 2); 
      box-sizing: border-box;
    }
    #menutop .cols5 > li{
        margin: 0 10px;
        width: calc(20% - 20px);
        float: left;
    } */
    /* level0 */
    #menutop > li:hover ul{
        transform: scaleY(1);
    }
    #menutop > li > strong,
    #menutop > li > a {
      padding: 0 15px;
      display: block;
      line-height: 80px;
      height: 80px; 
      font-size: 16px;
      font-weight: 700;
      color: #fffc;
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
    }
    #menutop.small > li > a {
        text-transform: capitalize;
        line-height: 50px;
        height: 50px; 
    }
    /* #menutop > li > a::before,
    #menutop > li:hover > a::before{
    	content: "";
        display: block;
        position: absolute;
        height: 4px;
        width: 60%;
        left: 20%;
        bottom: -4px;
        background: #fff;
        -webkit-transition: bottom .3s cubic-bezier(.25,.46,.45,.94);
        transition: bottom .3s cubic-bezier(.25,.46,.45,.94);
        border-top-right-radius: 3px;
        border-top-left-radius: 3px; 
    } */
    #menutop > li:hover > a::before{
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 100%;
        background: linear-gradient(90deg, #fa881d00 0, #288ad6 20%, #0070c9 80%, #fa881d00);
    }

    #menutop > li > a:hover::before, 
    #menutop > li:hover > a::before{bottom: 0;} 

    #menutop > li.first-item{text-indent: -9999px;}
    #menutop > li > a:hover, #menutop > li:hover > a {color: #fff;}
    .first-item .has-image{
      background-position: center calc(50% - 3px);
      background-repeat: no-repeat;
      background-size: 100%;
      width: 20px;
      display: block;
    }

    /* havechild */
    .havechild > .cols1 {
      position: absolute; 
     /*  display: none; */
      z-index: 2;
      height: auto;
      padding: 10px 20px;
      min-width: 150px;
    }

    .havesubchild > a{
        font-weight: 600;
    }    
    .havesubchild .cols {
         -moz-column-count: var(--cols);
        -webkit-column-count: var(--cols);
        -ms-column-count: var(--cols);
        -o-column-count: var(--cols);
        column-count: var(--cols);     
    }
    .havesubchild .cols > li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
    }
    .havesubchild .cols > li a{
        position: relative;
        padding-left: 1rem !important;
    }
    .havesubchild .cols > li a::after{
        position: absolute;
        display: block;
        bottom: 50%;
        left: 2px;
        width: 10px;
        height: 32px;
        content: "";
        border-left: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .havesubchild .cols > li:first-child a::after{
            height: 16px;
    }
    
    .havesubchild2{
        position: relative;
    }
    .havesubchild2::before{
        position: absolute;
        width: 20px;
        height: calc(100% - 50px);
        top: 30px;
        left: 0;
        content: '';
        border-left: 1px solid var(--light-gray);
    }
    /* .havesubchild2 > .cols{
        opacity: 0;
        visibility: hidden;
        display: none;
    }
    .havesubchild2:hover > .cols{
        display: block;
        opacity: 1;
        visibility: visible;
    } */
    .havesubchild2 > .cols > li,
    .havesubchild3 > .cols > li{
        position: relative;
        padding-left: 1rem;
    }
    .havesubchild2 > .cols > li::before,
    .havesubchild3 > .cols > li::before{
        position: absolute;
        width: 10px;
        height: 20px;
        top: 0;
        left: 0;
        content: '';
        border-bottom: 1px solid var(--light-gray);
        border-left: 1px solid var(--light-gray);
    }


    .sale-off{margin-left: auto;}
    .sale-off a{
        background: var(--white);
        color: var(--color-primary) !important;
        border-radius: 50px;
        height: 30px !important;
        line-height: 30px !important;
    }
    .sale-off a:hover{
        color: var(--color-link);
        -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
    }
    .sale-off .has-image{
        background-size: 25px;
        background-repeat: no-repeat;
        background-position: 0 2px;
        padding: 5px 0;
    }
    .sale-off .menu-title{margin-left: 30px;position: relative;}
}
/* end menu top */



/* slider */
#slider .container{
    width: 100%;
}
#slider .container video{
    width: 100%;
    object-fit: cover;
}
/* topsl1 */
#topsl1{margin: 1rem 0;}
#topsl1 .box-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}
#topsl1 .box-title a{
    color: var(--color-primary);
    font-size: 14px;
    text-transform: uppercase;
    display: block;
}
#topsl1 .box-title a.title-link{
    text-transform:inherit;
    position: relative;
    padding: 0 20px 0 10px;
}
#topsl1 .box-title a.title-link:hover{
    background: var(--light);
    border-radius: 20px;
}

#topsl1 .box-title a.title-link::after{
	border-color: transparent var(--color-second);
    border-style: solid;
    border-width: 4px 0 4px 5px;
    content: "";
    position: absolute;
    right: 10px;
    top: calc(50% - 4px);
}
#topsl1 .twobanner a{
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}
#topsl1 .twobanner img{
    width: 100%;
    display: block;
}
/* end topsl1 */

/* content bottom */
#content-bottom > div{margin-bottom: 40px;}

/* .content-bottom .box-title{padding:10px;}
.content-bottom .box-title h2 a{
	color:var(--color-primary);
	font-size: 20px;
    font-weight: bold;
	text-transform:uppercase;
	letter-spacing: -0.5px;
}
.content-bottom .sub-title{margin-left: 10px;}*/
#content-bottom .viewall{display: flex;overflow-x: auto;}
#content-bottom .viewall a{
    color: var(--color-primary);
    border: 1px solid var(--light);
    margin-right: 10px;
    padding: 0 15px;
    border-radius: 15px;
    letter-spacing: -0.5px;
    flex-shrink: 0;
}
#content-bottom .viewall a:hover{background: var(--light);font-weight: 600;}
/* end content bottom */

/* content */
.items-list .item:not(:last-child) {
    width: 100%; 
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
/* end content */

/* left - sidebar */
.col-left{padding-right: 20px;box-sizing: border-box;}
.col-left .box-title{margin-top: 10px;}
.col-left .box-title h2 span{
	font-size: 24px;
	font-weight: 700;
	position: relative;
	padding-left: 20px;
}
.col-left .box-title h2 span::before{
	content: '';
    position: absolute;
    width: 5px;
    height: 20px;
    left: 5px;
    top: 4px;
    -webkit-transform: skew(-20deg);
    -khtml-transform: skew(-20deg);
    transform: skew(-20deg);
    background-color: #ff3a39;
}
/* end left */


/* bot-news */
#bot-news{
    padding: 3rem 0;
    position: relative;
}
#bot-news h3.box-heading{
	text-align: center;
	text-transform: uppercase;
	font-size: clamp(22px, 4vw + 1rem, 48px);
	font-weight: 600;
	font-family: 'SFU Eurostile Extended';
    position: relative;
	margin-bottom: 1rem;
    background: linear-gradient(39deg,#041954 10%, #1789FF 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* end bot-news */

/* botsl */
#botsl{
    margin: 30px 0;
    font-size: 14px;
}
#botsl h3{
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    text-transform: uppercase;
}
#botsl .box-content{
    padding: 0 100px;
}
#botsl .box-content p{margin-bottom: 20px;}
#botsl .title_link{
    position: absolute;
    content: '';
    font-size: 60px;
    color: #000;
    opacity: 0.08;
    top: calc(50% - 40px);
    left: calc(50% - 150px);
}
/* botsl end */

/* Footer */
#footer {
    background:var(--bg-footer);
    font-size:14px; 
    color:var(--light);
    clear: both;
    padding: 3rem 0;
}
.footer-top{padding-bottom: 3rem;}
.footer-top > section{flex:1 0 100%;margin-bottom: 1rem;}

.footer-top h3{color: var(--white);}
.footer-top h3 span{position: relative;padding-right: 1rem;}
.footer-top .box-header.open h3{color:var(--color-link)}

.footer-top .menu a{display:block;color:var(--light-gray);padding-bottom: 8px;}
.footer-top .menu a:hover{color:var(--white)}
.footer-top .box-header::before{
  background: #fff;
  content: "";
  display: block;
  height: 1px;
  width: 10px;
  position: absolute;
  right: 11px;
  top: 8px;
  transition: all 0.1s ease-out 0s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 1;
}
.footer-top .box-header::after{
  background: #fff;
  content: "";
  display: block;
  height: 10px;
  width: 1px;
  position: absolute;
  right: 15px;
  top: 10px;
  transition: all 0.1s ease-out 0s;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
.footer-top .box-header.open::before{
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
  top: 20px;
  background: var(--color-link);
}
.footer-top .box-header.open::after{
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
  right: 21px;
  top: 16px;
  background: var(--color-link);
}
.footer-top .box-content{display: none;margin-left: 1rem;}
.footer-bottom{
    color: var(--light-gray);
}
@media (min-width: 768px){
    .footer-top > section{flex-basis: auto;}
    .footer-top > section:first-child .box-header{display: none;}
    .footer-top div{flex: 1 0 auto;}
    .footer-top .box-header::after,
    .footer-top .box-header::before{display: none;}
    /* .footer-top h3 span::before{
        position:absolute;
        content:"";
        border-left:5px solid var(--color-link);
        border-top:5px solid transparent;
        border-bottom:5px solid transparent;
        right:0;top:calc(50% - 4px);
    } */
    .footer-top ul.menu li a {
      display: block;
      padding: 5px 0;
      color: var(--light);
    }
    .footer-top ul.menu li a:hover{color: #fff;}
    .footer-top .box-content{display: block !important;margin: 0;}
}
/* end footer */

/* mod_social_footer */
#mod-support div{
    display: block;
    width: 250px;
}
#mod-support div img {
    width: 100%;
}
.socials .copyright {
  line-height: 1.2;
  font-size: 12px;
  text-align: center;
  padding: 1rem 0;
}
.socials svg{
    height: 32px;
    width: 32px;
}
.socials .ic-tiktok{
    height: 24px;
    width: 24px;
}
.socials .item a{
    display: block;
    position: relative;
    color: var(--color-primary);
}
.socials .item a:hover .ic-facebook{fill: #039be5;}
.socials .item a:hover .ic-youtube{fill: #c00;}
.socials .item a:hover .ic-instagram{fill: #FF543E;}
.socials .item a:hover .ic-tiktok{fill: #2100C4;}
@media (min-width: 768px){
    .socials .copyright{text-align: left;}
}
/* end Social */

/* contact us */
ul.contactus li {display: block;margin-bottom: 1rem;padding-left: 35px !important;position:relative;}
ul.contactus li a{color: var(--white);}
ul.contactus li a:hover{color: var(--color-link);text-decoration: underline;}
ul.contactus li::before{
    position:absolute;content:"";background: url(../images/icon.png) no-repeat -312px 0px;width:20px;height:20px;left:0;top: 1px;}
ul.contactus li.diachi::before {background-position:-312px -60px;}
ul.contactus li.email::before { background-position:-312px -146px;}
ul.contactus li.phone::before { background-position:-312px -5px;}
ul.contactus li.dienthoai::before { background-position:-312px -33px;}
ul.contactus li.website::before { background-position:-285px -115px;width: 32px;height: 32px;}
ul.contactus li.fax::before { background-position:-312px -90px;}
ul.contactus li.diachi .chiduong{text-decoration: underline;}
/* end contact us */

/* Table */
table td{border:1px solid #ddd;padding: 6px;box-sizing: border-box;}
.table-gia{width:500px;margin:0 auto;border:1px solid #ddd;}
.table-gia td{border:1px solid #ddd;padding:5px;}
.table-tskt td{border-width: 0 0 1px 0;border-color: #eee;border-style: solid;}
.table-tskt p{margin: 0 !important;}

.table-2cot td{width:50%;padding:10px 15px;box-sizing:border-box;vertical-align:top;}
.table-4cot td{width:25%;padding:10px 15px;box-sizing:border-box;vertical-align:top;}
.table-banggia td{border:1px solid #ddd;padding:5px;}
.table-banggia td:nth-child(1){width:30%;}
.table-banggia td:nth-child(2){width:40%;font-weight:700;font-style:italic;}
.table-banggia td:nth-child(3){color:#ed1c24;}
.table-banggia td.first-child:nth-child(3){color:#fff;}
.table-banggia img{width:100%;height:auto;}
.table-sp td{
    box-sizing: border-box;
    padding: 5px;
    vertical-align: top;
    width: 50%;
}
/* end Table */


/* Category list content */
.list-category > h1{
    position: relative;
    font-size: 24px;
    margin-left: 15px;
}
.list-category > h1::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 20px;
    left: -10px;
    top: calc(50% - 10px);
    -webkit-transform: skew(-20deg);
    -khtml-transform: skew(-20deg);
    transform: skew(-20deg);
    background-color: #ff3a39;
}
.newlist li{display: block;overflow: hidden;float: left;padding-bottom: 30px;}
.newlist li:nth-child(3){clear: both;}
.newlist li:nth-child(6){border-top: 1px solid #be1128;padding-top: 30px;}
.newlist li a{display: block;overflow: hidden;color: #333;}
.newlist li a:hover{color:#e10531;}
.newlist li .article-introtext{color: #333;font-size: 14px;line-height: 1.5;}
.left-one{width: calc(68% - 30px);margin-right: 30px;}
.left-one h3{font-size: 26px;padding: 20px 0px 5px 0px;}
.left-one .article-image{width: 540px;height: 350px;display: block;}
.right-one{width: 32%;background-image: linear-gradient(#999,var(--color-main-background));}
.right-one .article-image{width: 270px;height: 350px;display: block;}
.right-one h3{font-size: 19px;padding: 20px;}
.top3-list{width: calc(33.33% - 20px);}
.top3-list:nth-child(3){padding-right: 20px;}
.top3-list:nth-child(4){padding-left:10px;padding-right: 10px;}
.top3-list:nth-child(5){padding-right:0px; padding-left: 20px;}
.top3-list .article-image{width: 258px;height: 160px;}
.top3-list h3{padding: 5px 0;}
.bottom-list .article-image{
    float: left;
    width: 250px;
    height: auto;
    margin-right: 15px;
    overflow: hidden;
    border-radius: 7px;
}
/* Category list content end */

/* Category Blog Content */
.blog-category{
    margin: 10px 0;
    width: 100%;
}
.blog-category h1{
	position:relative;
    font-weight: 800;
    text-transform: uppercase;
}
.blog-category h1 span{
	position:relative;
	padding-left:20px;
}
.blog-category h1 span::before{
	content: '';
    position: absolute;
    width: 5px;
    left: 5px;
    top: 10px;
    bottom: 10px;
    -webkit-transform: skew(-20deg);
    -khtml-transform: skew(-20deg);
    transform: skew(-20deg);
    background-color: #ff3a39;
}
.blog-category span.number-items{color: #555;margin-top: 3px;margin-left: 5px;font-size: 15px;}
.blog-category h2{
	color:#2292da;
}
.article-image a > img{
	width: 100%;
	height: 100%;
	display: block;
	transform:scale(1,1);
	-webkit-transition: transform 300ms ease-out 0ms;                
	 -moz-transition: transform 300ms ease-out 0ms;                
	 -o-transition: transform 300ms ease-out 0ms;                
	 transition: transform 300ms ease-out 0ms;   
}
.article-image a:hover > img{transform:scale(1.2,1.2);}
.article-image a .img-overlay{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 16, 62, 0.5);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    opacity: 0;
    filter: alpha(opacity=0);
}
.article-image a .img-overlay .icon-plus{
	top: 50%;
	left: 50%;
    opacity: 0;
    position: absolute;
    background:rgba(0, 0, 0, 0.65) url("../images/icon.png") no-repeat -35px -144px;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    margin-top: -16px;
    margin-left: -16px;
    display: inline-block;
    border-radius: 50%;
    -webkit-transition: all 0.25s cubic-bezier(.63,.08,.35,.92);
    -moz-transition: all 0.25s cubic-bezier(.63,.08,.35,.92);
    -o-transition: all 0.25s cubic-bezier(.63,.08,.35,.92);
    -ms-transition: all 0.25s cubic-bezier(.63,.08,.35,.92);
    transition: all 0.25s cubic-bezier(.63,.08,.35,.92);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transition: opacity 0.2s, transform 0.3s;
    -moz-transition: opacity 0.2s, transform 0.3s;
    -o-transition: opacity 0.2s, transform 0.3s;
    -ms-transition: opacity 0.2s, transform 0.3s;
    transition: opacity 0.2s, transform 0.3s;
}
.article-image a:hover .img-overlay{
	opacity: 1;
}
.article-image a:hover .img-overlay .icon-plus{
	transform: scale(1);
	opacity: 1;
}
.article-image a .caption{
    height: 100%;width: 100%;
    left: 0;top: 0;
    position: absolute;
	z-index:2;
}
.article-image a .caption h5{
	left:0;
	top:50%;
	transform:translate3d(0px, -10%, 0px);
	transition:all 400ms ease 0s;
	width:100%;
	position:absolute;
	opacity:0;
}
.article-image a:hover .caption h5{
	opacity:1;
	transform:translate3d(0px, -50%, 0px);
	margin-top:-20px;
}
.article-image a .caption h5::before{
	background: #e10531 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 40%;
    position: absolute;
    right: 40%;
    transition-duration: 0.3s;
    transition-property: left, right;
    transition-timing-function: ease-out;
    z-index: -1;
}
/*.cols-2 .article-image{width:100%;height:auto;}
.cols-1 .article-image{
     width:30%;
    height:auto;
    float:left;
    margin-right:2%;
}*/
/*.cols-1 .article-image img{width:100%;height:100%;object-fit:cover;}*/
.article-image a{border-radius: .5rem;}
.article-title{font-size: 18px;font-weight: 500;}
.intro-text{color: #333;font-size: 14px;line-height: 1.5;}
.intro-text a:hover{color: inherit;}
.readmore{
    padding: 2px 5px;
    text-align: center;
    border-radius: .5rem;
    width: 150px;
    margin: 10px auto;
    /* background-color: var(--light);
    border: 1px solid var(--light-gray); */
    clear: both;
}
/* .readmore:hover{box-shadow: 0 3px 8px rgba(0,0,0,.2);background-color: var(--light-gray);} */
.readmore a{color: var(--color-primary);position: relative;font-size: 13px;padding:8px 0;}
.readmore a::after{
	border-bottom: 1px solid var(--color-primary);
    border-left: 1px solid var(--color-primary);
    top: calc(50% - 3.5px);
    display: block;
    height: 5px;
	width: 5px;
    right: 0;
    margin: 0;
    position: absolute;
	content:"";
    transform: rotate(-135deg);
    -webkit-transition: all 0.16s ease;
    -moz-transition: all 0.16s ease;
    -ms-transition: all 0.16s ease;
    -o-transition: all 0.16s ease;
    transition: all 0.16s ease;
	opacity: 0; 
}
.readmore a:hover::after{
	opacity: 1;
	margin-right: -10px;
}
.create, .modified, .hits, .comment-count, .timepost, .article-category, .createdby{
    font-size: 13px;
    color: var(--gray);
    margin-right: 10px;
    font-weight: normal;
}
.article-category::after{
    position: relative;
    content: '//';
    padding-left:5px;
}
.hits::before{
    width: 18px;
    height: 11px;
    margin-right: 3px;
    background-image: url(../images/icon.png);
    background-position: -51px -5px;
    background-repeat: no-repeat;
    background-size: 500px 251px;
    display: inline-block;
    vertical-align: middle;
    content: '';
}
.comment-count{cursor: pointer;}
.comment-count a{color: #076DB6;font-size: 13px;}
.comment-count svg{
    width: 12px;
    height: 12px;
    fill:#bdbdbd;
    vertical-align: middle;
}
#show-more{
	padding: 5px 10px;
    border: 1px solid #bbddfd;
    text-align: center;
    border-radius: .5rem;
    cursor: pointer;
    width: 200px;
    margin: 10px auto;
    background-color: #f1f8fe;
    color: #2a83e9;
    clear: both;
    transition: .3s;
}
#show-more:hover{
    background-color: #bbddfd;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
}
/* end blog category content */

/* items leading */
.items-leading { 
    margin-bottom:20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
    border-bottom: 1px solid #eee;
}
.leading .article-image img{border-radius: .5rem;}
.leading h3{padding: .5rem 0;}
.leading-0{
	position: relative;
    padding: 0;
    grid-column: span 2;
}

.leading-0 .article-image{width: 100%;}
.leading-0 .article-image a::before{
	content: "";
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    background: linear-gradient(to bottom,rgba(50,50,50,0) 0%,rgba(16,15,15,0.91) 89%,rgba(16,15,15,0.93) 93%);
    z-index: 1;
    border-radius: 7px;
}
.leading-0 h3{
	position: absolute;
	bottom: 10px;
	left: 20px;
	right: 20px;
	z-index: 3;
    font-size: 24px;
}
.leading-0 h3 a{color: #fff;}


@media (min-width: 992px){
    .items-leading {
        grid-template-columns: repeat(3, 1fr);
    }
    .leading-0{
        grid-column: span 2;
    }
    .leading-1{
        grid-column: span 1;
    }
    
}
/* end item leading */

/* Category Children  */
.cate-children h2{
    margin-bottom: 1rem;
    font-size: 20px;
    font-weight: 700;
}
.cate-children .items-list-child:first-child{width: 100%;}
/* End Category Children  */

/* Article Content detail */
.page-detail .container{
    padding:1rem;
    box-sizing: border-box;
    background-color: #FFF;
    border-radius: 6px;
    /* -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 10%);
    box-shadow: 0 1px 5px rgb(0 0 0 / 10%); */
}
.page-detail .sidebar{
    position: sticky;
    top: 1rem;
}
.page-detail .main :is(h1, h2, h3, h4, h5, h6 ){
    font-weight: 700;
    margin-bottom: 1rem;
}
.page-detail .main figure,
.article-meta{
    margin-bottom: 1rem;
}
.content-links{
	border-bottom:1px dotted #d9d9d9;
	padding:10px 0;
	margin-bottom:15px;
}
ul.content-links-ul{list-style:inside none disc;margin-left:5px;color:#ff6a00;}
ul.content-links-ul li a:hover{text-decoration:underline;}
hr { border-top: 1px solid #e5e6e7; }

.wf_caption{margin:0 auto;max-width:640px !important;position: relative;}
.caption-text{
    line-height: 20px;
    margin: 0 auto 10px;
    max-width: 100% !important;
    padding: 10px;
    text-align: left;
}
.caption-bottom{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	padding: 20px;
    margin: 0;
	text-align: left;
	max-width: 100% !important;
	font-weight: 500;
}
.caption-top{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	color: #fff;
	padding: 20px;
	text-align: left;
	max-width: 100% !important;
	margin: 0;
	font-weight: 600;
}

.content-article h2{
    margin-bottom: 1rem;
}
.content-article p{
    margin-bottom: 1rem;
    line-height: 28px;
}
.content-article ul:not(.rating){
    list-style: disc;
    padding: 0;
    margin-left: 20px;
    margin-bottom: 0;
}
.content-article ul:not(.rating) li{
    position: relative;
    list-style: none;
    vertical-align: middle;
    background: none;
    padding-left: 20px;
    margin-bottom: 1rem;
    line-height: 28px;
}
.content-article ul:not(.rating) li::before {
    position: absolute;
    top: 10px;
    left: 0;
    content: "" !important;
    display: inline-block;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    background: var(--color-link);
}

.bgcover{
    position: relative;
    /* margin-left: -683px;
    left: 50%; */
    width: 100%;
    height: 450px;
    display: block;
    overflow: hidden;
    background: no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.bgcover .bgtrans {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    overflow: hidden;
    height: 310px;
    background: rgba(0,0,0,.8);
    background: -webkit-gradient(linear,0% 0%,0% 100%,from(rgba(0,0,0,.8)),to (rgba(0,0,0,.6)),to(rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.6),rgba(0,0,0,.8));
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.6),rgba(0,0,0,.8));
    background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.6),rgba(0,0,0,.8));
    background: -o-linear-gradient(top,rgba(255,255,255,0),rgba(0,0,0,.6),rgba(0,0,0,.8));
}
.bgcover .bgtrans h1 {
    display: block;
    overflow: hidden;
    font-size: 45px;
    line-height: 55px;
    color: #fff;
    width: 800px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    font-family: 'Roboto Condensed',sans-serif;
    font-weight: 600;
}
.bgcover .bgtrans .article-meta{
    width: 800px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: block;
    overflow: hidden;
}
/* end Article Content */


/* Menu-tabs */
.menu-tabs{
    height: 50px;
    width: 100%;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow-x: auto;
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 19;
    scrollbar-width: none;
}
.menu-tabs li{margin: 0 10px;flex-shrink: 0;}
.menu-tabs li.active a{border-bottom: 2px solid var(--color-second);color:var(--color-second);}
.menu-tabs li a{
    padding: 13px 0;
    cursor: pointer;
    color: #333;
    font-weight: 600;
}
.menu-tabs li a:hover{
    border-bottom: 2px solid var(--color-link);
    color: var(--color-link);
}
.fixeds{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    transition: all .5s;
    -webkit-transition: all .5s;
}
/* End Menu-tabs */

/* plugin Extranews - tin lien quan */
.extranews{
    margin-bottom: 1rem;
}
.extranews_related{
    background: #eee;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 5px;
    box-sizing: border-box;
}
.extranews .article-item:not(:last-child){
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.extranews .title-box-category{
    margin-bottom: .5rem;
}
.extranews .title-box-category span{
    position: relative;
    font-size: 20px;
    font-weight: bold;
}
.extranews .title-box-category span::before{
    content: "";
    width: 100%;
    height: 1px;
    background: var(--color-link);
    position: absolute;
    left: 0;
    bottom: 0;
}
.extranews .article-title{
    margin: 0 !important;
    padding-bottom: 6px !important;
    line-height: 22px;
}
.extranews .article-desc{
    font-size: 14px;
    line-height: 24px;
}
.extranews .article-desc a:hover{color: inherit;}
.extranews .article-meta span{
    font-size: 13px;
    color: var(--gray);
}

/* end related article */

/* Mod ja side new */
/* article - layout */

.article-items{
   --column-bot-news: 2;
   --gap-bot-news: 1rem 1rem;
    display: grid;
    gap: var(--gap-bot-news);
    grid-template-columns: repeat(var(--column-bot-news), 1fr);
}
.article-items .article-item img{border-radius: .5rem;}
.article-items .article-item:nth-child(1){
    grid-column: span 2;
}
.article-items :is(.article-item:nth-child(4),.article-item:nth-child(5),.article-item:nth-child(6),.article-item:nth-child(7))
{
    grid-column: span 2;
    border-left: 1px solid #eee;
    padding-left: 1rem;
}   
.article-items .article-item .thumb-art:hover+h3 a{color:var(--color-link)}
.item-image{
    position: relative;
    border-radius: 1rem;
}
.article-items .article-item h3{font-size: 16px;flex-grow: 1;}
.article-item_title{
    font-weight: 600;
    font-size: var(--font-size);
    display: block;
    padding: 1rem 0;
}
.article-item_desc{line-height: 1.5;}

/* News - layout */
.newslist-item{
    margin-bottom: 1rem;
}
.newslist-item .thumb-art{
    width: 100px;
    overflow: hidden;
    border-radius: .5rem;
}
.newslist-item h3{
    font-size: 16px;
}
@media (min-width: 768px){
    .article-items{    
    --column-bot-news: 7;
    --gap-bot-news: 0 1rem;
    }
    .article-items .article-item:nth-child(1){
        grid-column: span 3;
        grid-row: span 4;
    }
    .article-items .article-item:nth-child(2){
        grid-column:  4 / span 2;
        grid-row: 1 / span 2;
    }
    .article-items .article-item:nth-child(3){
        grid-column: 4 / span 2;
        grid-row: 3 / span 2;
    }
}
/*
.newslist {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem;
}

.newslist .item:nth-child(1),
.newslist .item:nth-child(2) {
  grid-column: span 3;
}

.newslist .item:nth-child(3),
.newslist .item:nth-child(4),
.newslist .item:nth-child(5) {
  grid-column: span 2;
}

@media (min-width: 992px){
     .newslist {
        display: grid;
        grid-template:
        "prm1 snd1"
        "prm1 snd2"
        "prm1 snd3"
        "prm1 snd4"/1fr 1fr;
        gap: 1rem;
    }
    .newslist li:nth-child(1){grid-area: prm1;}
    .newslist li:nth-child(2){grid-area: snd1;}
    .newslist li:nth-child(3){grid-area: snd2;}
    .newslist li:nth-child(4){grid-area: snd3;}
    .newslist li:nth-child(5){grid-area: snd4;} 
    .newslist{
        grid-template-columns: repeat(7, 1fr);
    }
    .newslist .item:nth-child(1){
        grid-column: span 3;
        grid-row: span 4;
    }
    .newslist .item:nth-child(2){
        grid-column: 4 /span 2;
        grid-row: 1 / span 2;
    }
    .newslist .item:nth-child(3){
        grid-column: 4 /span 2;
        grid-row: 3 / span 2;
    }
    .newslist .item:nth-child(4),
    .newslist .item:nth-child(5),
    .newslist .item:nth-child(6),
    .newslist .item:nth-child(7) {
      grid-column: span 2;
    }
}
.newslist li a{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}
.newslist li:not(li:nth-child(1),li:nth-child(2),li:nth-child(3)) a{
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    align-items: flex-start;
}
.newslist li a:hover h4{color: var(--color-link);}
.newslist .item-image{width: calc(40% - 1rem);}
.newslist li:nth-child(1) .item-image,
.newslist li:nth-child(2) .item-image,
.newslist li:nth-child(3) .item-image{width: 100%;height: 100%;}

.newslist .item-image img{
    width: 100%;
    height: 100%;
    border-radius: 16px;
}
.newslist .item-content{width: 100%;}
.newslist .item-content h4{color:var(--color-primary);font-weight: 600;font-size: 18px;}
.newslist li:nth-child(1) h4{font-size: 24px;}
.newslist li:nth-child(1) .item-content{width: 100%;}
*/

/* end mode ja side new */

/* Debug mod_social */
.box-contact__content{
  width: 60px;
  height: auto;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  text-align: center;
}
.box-contact__content a{position: relative;display: block;width: 40px;height: 40px;margin-bottom: 16px;}
.box-contact__content.right .tooltip{right: 60px;}
.box-contact__content.left .tooltip{left: 60px;}
.box-contact__content.right .tooltip::before{
  right: -5px;background: #fff;
}
.box-contact__content.left .tooltip::before{
  left: -5px;background: #fff;
}
.icon-phones, .icon-mail, .icon-sms, .icon-zalo, .zalo, .icon-fb, .show-contact{
    width: 40px;
    height: 40px;
    display: inline-block;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin-bottom: 8px;
    position: relative;
    background-image: linear-gradient(-180deg,#f53d2d,#f63);
}
.icon-phones{
    background: linear-gradient(39deg,#041954 10%, #1789FF 80%);
    animation: phone 1.5s 0s ease-out infinite;
}
.zalo{
    background: linear-gradient(39deg,#041954 10%, #1789FF 80%);
    color: var(--white);
}
.zalo .ic-zalo{
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.icon-mail::before, .icon-sms::before, .icon-sms::before, .icon-zalo::before,.icon-fb::before{
    position: absolute;
    content: '';
    width: 24px;
    height: 24px;
    left: calc(50% - 12px);
    top: calc(50% - 12px);
}
.icon-phones svg{
    animation: 1s ease-in-out 0s normal none infinite running quick-alo-circle-img-anim;
    color: #fff;
    width: 100%;
    height: 100%;
    padding: .5rem;
    box-sizing: border-box;
    
}
.icon-mail::before{background: url('../images/icon.png') no-repeat -286px -144px;}
.icon-sms::before{background: url('../images/icon.png') no-repeat -285px -168px;}
.icon-fb::before{background: url('../images/icon.png') no-repeat -285px -217px;}
.tooltip{
    position: absolute;
    top: 0;
    padding: 5px 10px;
    box-shadow: 0 2px 8px rgba(76,76,76,0.15);
    color: var(--color-primary);
    display: none;
    font-weight: 600;
    border-radius: 5px 10px 10px 5px;
    width: fit-content;
    background: #fff;
    white-space: nowrap;
}
.tooltip::before{
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    top: calc(50% - 5px);
}
.phones:hover .tooltip, 
.mail:hover .tooltip, 
.sms:hover .tooltip,
.zalo:hover .tooltip,
.fb:hover .tooltip{
    display: block;
}

/* contact */
#contact-form dl dt {float: left;text-align:left;width: 100%;}
#contact-form dl dd {margin-left: 0 !important;}
#contact-form dl dd input.required,
#contact-form dl dd textarea.required {width: 95% !important;}
/* end contact */

/* mod_social in Debug  */
/*
#box-contact{
  position: fixed;
  bottom: 8px;
  z-index: 4;
}
.box-contact__header{
  width: 48px;
  height: 48px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  position: relative;
  background-image: -webkit-gradient(linear,left top,right top,from(#0596e7),to( #015cd0));
  background-image: linear-gradient(to right, #0596e7 0%, #015cd0 100%);
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  box-sizing: border-box;
  color: var(--white);
}
.box-contact__header .ic-chat{width: 24px;height: 24px;}
 
 .box-contact__content{
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 3;
  color: var(--white);
  width: 100%;
  height: 0;
  bottom: 0;
  background: var(--color-primary);
  transition: height ease 250ms;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.box-contact__content a{
  position: relative;
  flex: 1 0 max(25%, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.icon-phones, .icon-mail, .icon-sms, .icon-zalo, .icon-fb{
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid #000;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  position: relative;
  background-image: -webkit-gradient(linear,left top,right top,from(#0596e7),to( #015cd0));
  background-image: linear-gradient(to right, #0596e7 0%, #015cd0 100%);
}
.icon-phones::before, .icon-mail::before, .icon-sms::before, .icon-sms::before, .icon-zalo::before,.icon-fb::before{
  position: absolute;
  content: '';
  width: 24px;
  height: 24px;
  left: calc(50% - 12px);
  top: calc(50% - 12px);
}
.icon-phones::before{background: url('../images/icon.png') no-repeat -285px -3px;animation: 1s ease-in-out 0s normal none infinite running quick-alo-circle-img-anim;}
.icon-mail::before{background: url('../images/icon.png') no-repeat -286px -144px;}
.icon-sms::before{background: url('../images/icon.png') no-repeat -285px -168px;}
.icon-zalo::before{background: url('../images/icon.png') no-repeat -285px -190px;}
.icon-fb::before{background: url('../images/icon.png') no-repeat -285px -217px;}
.tooltip{
  color: var(--white);
  display: block;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
#box-contact.open .box-contact__header{
  background: none;
  margin: 0;
  bottom: 140px;
  transition: bottom .35s;
  z-index: 5;
}
#box-contact.open svg{display: none;}

#box-contact.open .box-contact__header::before{
  position: absolute;
  width: 16px;
  height: 2px;
  content: '';
  background: #fff;
  display: block;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  top: calc(50% - 1px);
  left: calc(50% - 8px);
}
#box-contact.open .box-contact__header::after{
  position: absolute;
  width: 16px;
  height: 2px;
  content: '';
  background: #fff;
  display: block;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  top: calc(50% - 1px);
  left: calc(50% - 8px);
}
#box-contact.open .box-contact__content{
  height : 200px;
  transition: height ease 350ms;
}
*/
/* end mod_social */