article .description{margin-bottom: 10px}
details.tableindex{border:1px solid #ccc; background: #fff; padding:10px; border-radius: 5px; box-shadow: 0 0 2px #eee; margin-bottom:10px}
details.tableindex summary{font-weight: bold; cursor: pointer}
details.tableindex[open] summary{border-bottom: 1px solid #eee; margin-bottom: 10px}
details.tableindex a{display: block}
details.tableindex a[data-level='h3']{margin-left: 30px}
details.tableindex a[data-level='h4']{margin-left: 60px}

table{margin:10px 0}
table th, table td{border: 1px solid #ddd}
table td{vertical-align: top}
table thead{background: #eee}
table thead th{padding:0 5px}

.faq{background-color: #fff; padding:10px; border:1px solid #ccc; margin-top:10px; border-radius: 5px; box-shadow: 0 0 2px #ccc}
.faq details{}
.faq details summary{font-size: 15px; color: #0984e3; cursor: pointer}
.likeshare{margin-top:20px;}
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {max-width: 100% !important; width: 100% !important}

.flatbox.googlemap{position: relative; overflow: hidden; padding-top: 56.25%}
.flatbox.googlemap iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%}

.flatgrid{margin-top:10px}
.flatgrid .itemcol img{display: block}

.marquee{margin: 10px auto; width: 100%; height: 36px; white-space: nowrap; overflow: hidden; box-sizing: border-box; position: relative; background: #eee; border-bottom: 2px solid #112b48}
.marquee .wrapper{width: 300% !important; display: flex; line-height: 36px; animation: marquee 60s linear infinite forwards}
.marquee .wrapper:hover{animation-play-state: paused}
.marquee .wrapper ul{ display: flex; justify-content: space-around; position: relative}
.marquee .wrapper ul li{margin-right: 30px}
.marquee .wrapper ul li a{color:#112b48}
.marquee .wrapper ul li a:hover{color: #09f}
@keyframes marquee{0%{transform: translateX(0)}100%{transform: translateX(-66.6%)}}

.maxlead{position: fixed; bottom:0; right: 6%; z-index: 99; height: 60px}
.maxlead .item{width: 60px; height: 60px; padding:10px; float: left}
.maxlead .item a{display: block; width: 40px; height: 40px; border-radius: 50%; position: relative}
.maxlead .item.facebook a{background:#fff url(../images/maxlead_facebook.png) center no-repeat; background-size: 32px}
.maxlead .item.zalo a{background:url(../images/maxlead_iconzalo.png) center no-repeat; background-size: 40px}
.maxlead .item.hotline a{background:url(../images/maxlead_phone_1.gif) center no-repeat; background-size: 40px}
.maxlead .item a:after{content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; border: 10px solid rgba(10, 189, 227,0.5); opacity: 0; transform: scale(0.5); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; animation: faceoutcircle 2s infinite; z-index: -1}
@keyframes faceoutcircle{0%{opacity: 1;transform: scale(0.5)}80%{opacity: 0;transform: scale(1.2)}100%{opacity: 0;transform: scale(0.5)}}

div.leftmenu{border:1px solid #eee; margin-bottom: 20px}
div.leftmenu .titbox{height: 40px; line-height: 40px; background: #112b48; color: #fff; padding-left: 10px; text-transform: uppercase;}
div.leftmenu >ul{padding:5px}
div.leftmenu >ul ul{margin-left: 20px}
div.leftmenu ul a{color:#112b48; font-weight: bold; background: url(../images/background-grid.png); background-repeat: no-repeat; background-position: -100px -60px; padding-left: 22px; font-size: 18px}
div.leftmenu ul ul a{font-weight: normal; color:#666; font-size: 15px; background:url(../images/background-grid.png); background-repeat: no-repeat; background-position: -100px -140px; padding-left: 18px}

div.supportteam{border:1px solid #eee; margin-bottom: 20px}
div.supportteam .titbox{height: 40px; line-height: 40px; background: #112b48; color: #fff; padding-left: 10px; text-transform: uppercase;}
div.supportteam .person{padding:10px}
div.supportteam .person .avatar{width: 70px; aspect-ratio:1/1; float: left; margin-right: 10px; border-radius: 100%; overflow: hidden; border: 5px solid #eee}
div.supportteam .person .avatar img{width: 100%; height: 100%; object-fit: cover}

div.cloudtags a{display: inline-block; line-height: 30px; padding:0 10px; border-radius: 15px 3px 15px 3px; font-style: italic; font-size: 13px; border:1px solid #ccc; margin:0 10px 10px 0; color: #666; box-shadow: 0 0 2px #eee}
div.cloudtags a:hover{background: #f7f7f7; box-shadow: none}

div.hotproduct{border:1px solid #ccc; margin-bottom: 20px}
div.hotproduct:after{content:''; display: block; clear: both}
div.hotproduct .titbox{height: 40px; line-height: 40px; background: #112b48; color: #fff; padding-left: 10px; text-transform: uppercase;}
div.hotproduct a{display: block; width: 46%; float: left; padding:5px; color: #333; border:1px solid #eee; background: #f7f7f7; border-radius: 2px; margin:2%}
div.hotproduct .name{height: 56px; line-height: 28px; overflow: hidden}
div.hotproduct .thumb{width: 100%; aspect-ratio:4/3; overflow: hidden}
div.hotproduct .thumb img{width: 100%; height: 100%; object-fit: cover}
div.hotproduct .price{font-weight: bold; color: #e84118; height: 30px; line-height: 30px}

div.hotnews{border:1px solid #ccc; margin-bottom: 20px}
div.hotnews:after{content:''; display: block; clear: both}
div.hotnews .titbox{height: 40px; line-height: 40px; background: #112b48; color: #fff; padding-left: 10px; text-transform: uppercase;}
div.hotnews a{display: block; width: 100%; margin-bottom: 10px; padding:10px; border-bottom: 1px solid #eee}
div.hotnews a:last-child{border-bottom: 0; margin-bottom: 0}
div.hotnews .thumb{width: 50px; aspect-ratio:1/1; overflow: hidden; float: left; border-radius: 5px; margin-right: 10px}
div.hotnews .thumb img{width: 100%; height: 100%; object-fit: cover}

.productlist{display: grid; grid-template-columns:repeat(3,1fr); grid-gap:30px}
.productlist a{display:block; position:relative; border:1px solid #eee; background:#fffff0; color:#333; box-shadow:0 0 10px #eee; border-radius:5px}
.productlist a p{margin:0}
.productlist a p.name{background:#eee; color:#111; font-weight: bold; line-height:30px; height: 72px; text-align:center; padding:5px 10px; font-size: 18px; border-bottom: 2px solid #ffc000}
.productlist a .img{width:100%; display: flex; align-items: center; justify-content: center; aspect-ratio:1/1; overflow:hidden; background: #fff; position: relative; text-align: center}
.productlist a .img img{display:block; width: 100%; height: auto}
.productlist a .img .icontext{position: absolute; top:5px; left: 5px; height: 24px; line-height: 24px; font-size: 12px; color:#fff; border-radius: 2px; padding:0 5px}
.productlist a .img .icontext[data-bgi]{background-size: 15px; background-position: left 5px center; background-repeat: no-repeat; padding-left: 25px}
.productlist a .des{line-height:28px; padding:10px}
.productlist a .pricing{height:36px; line-height:36px; margin-bottom:10px; margin-left:10px}
.productlist a .pricing .sale{display:inline-block; height:20px; line-height:20px; font-size:20px; font-weight:bold; color:#fbc531; margin-right:5px}
.productlist a .pricing .price{display:inline-block; height:20px; line-height:20px; font-size:13px; color:#666; text-decoration:line-through}
.productlist a .pricing .percent{display:inline-block; height:20px; line-height:20px; margin-left:5px; font-size:13px; background:#112b48; color:#fff; padding:0 5px; border-radius:5px; margin-right:10px}
.productlist a span.viewdetail{display:block; height:36px; line-height:36px; position:absolute; bottom:10px; right:10px; padding:0 30px 0 20px; background:#ffc000 url(../images/nextblue.webp) right 10px center no-repeat; background-size:12px; color:#111; border-radius:2px; cursor:pointer}
.productlist a span.viewdetail:hover{background-color:#ccc}

.newslist{display: grid; grid-template-columns:repeat(3, 1fr); grid-gap: 30px}
.newslist a{display:block; background:#eee; border-radius: 10px}
.newslist a .img{width: 100%; float: none; aspect-ratio:3/2; overflow: hidden; margin-bottom: 10px}
.newslist a .img img{display:block; width: 100%; height: 100%; object-fit: cover}
.newslist a p.date{height:24px; line-height:24px; font-size: 13px; color: #666; margin:0; padding:0 10px}
.newslist a p.name{color: #112b48; font-weight: bold; padding:0 10px}

.filter{border:1px solid #eee; padding:10px; background: #f9f9f9; margin: 20px 0}
.filter .titfilter{height: 30px; line-height: 30px; font-weight: bold; border-bottom: 1px solid #112b48; color: #112b48}
.filter ul{margin:10px 20px}
.filter li{background: url(../images/check.png) left center no-repeat; background-size: 12px; padding-left: 20px; cursor: pointer}
.filter li:hover{color: #09f}
.filter li[selected]{background: url(../images/dacheck.png) left center no-repeat; background-size: 12px}

.paging{margin:10px 0 20px 0}
.paging a,.paging span{display: inline-block; height: 36px; line-height: 36px; padding:0 10px; border-radius: 2px; border:1px solid #ccc; margin-right: 5px; margin-bottom: 5px; color: #333}
.paging span{background: #112b48; color: #fff}

.rating{margin-top: 10px}
.rating:after{content: ''; display: block; clear: both}
.rating .star{width: 80px; height: 20px; float: left}
.rating .star[data-value='5']{ background-position:0 0}
.rating .star[data-value='4']{ background-position:0 -20px}
.rating .star[data-value='3']{ background-position:0 -40px}
.rating .star[data-value='2']{ background-position:0 -60px}
.rating .star[data-value='1']{ background-position:0 -80px}
.rating .star[data-value='4.5']{ background-position:0 -100px}
.rating .star[data-value='3.5']{ background-position:0 -120px}
.rating .star[data-value='2.5']{ background-position:0 -140px}
.rating .star[data-value='1.5']{ background-position:0 -160px}
.rating .count{height: 20px; line-height: 20px; padding:0 10px; float: left}
.rating .writing{height: 20px; line-height: 20px; float: right; cursor: pointer; font-size: 13px; color: #06f; background:url(../images/grey-pen.png) left center no-repeat; background-size: 12px; padding-left: 16px}

.gridimg{background-image: url(../images/background-grid.png); background-repeat: no-repeat; overflow: hidden}
::-webkit-scrollbar {width: 10px} ::-webkit-scrollbar-track {background-color: transparent}
::-webkit-scrollbar-thumb {background-color: #d6dee1; border-radius: 20px; border: 2px solid transparent; background-clip: content-box}
::-webkit-scrollbar-thumb:hover {background-color: #a8bbbf}