@charset "UTF-8"; :root { --c1:#1278C9; --c2:#CF0A0A; --c3:#FCD955; --c4:#000; --title:#111; --text:#333; --desc:#333; --border:#CACACA; --btn:#D10000; --bg1:#fff; --bg2:#fff; --bg3:#fff; --fsize:14px; } 

body { font-size:var(--fsize); font-family: 'font1'; color: var(--text); background: var(--bg1); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-width: 1215px !important; overflow: scroll !important; width: 100% !important; top: 0 !important; } 
img { max-width:100%; height:auto; vertical-align:top; object-fit: cover; } 
a,input,textarea { outline:none; padding:0px; } 
input,button,select,textarea { font-family: 'font1', sans-serif; } 
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } 
.w-clear:after { display:block; content:""; clear:both; } 
.hidden { display:none; } 
.clear { clear:both; } 
.none { display:none; } 
.hidden-seoh { visibility:hidden; height:0px; margin:0px; overflow:hidden; } 
.wrap-main,.wrap-content { max-width:1330px; margin: 20px auto; padding:0px 15px; } 
.wrap-home { max-width:100%; padding:0px !important; margin: 0 !important; overflow: hidden; } 
.wrap-content { margin:auto; } 
p { margin-bottom: 0.5rem; } 
a:hover { text-decoration: none; } 

.c1 { color: var(--c1) !important; } 
.c2 { color: var(--c2) !important; } 
.c3 { color: var(--c3) !important; } 
.bg1 { background-color: var(--bg) !important; } 
.bg2 { background-color: var(--bg2) !important; } 
.bg3 { background-color: var(--bg3) !important; } 

::-webkit-scrollbar { width: 6px; height: 0px; } 
::-webkit-scrollbar-button { width: 0px; height: 0px; } 
::-webkit-scrollbar-track { background-color: var(--c1); } 
::-webkit-scrollbar-track-piece { background-color: #ffffff; } 
::-webkit-scrollbar-thumb { height: 50px; background-color: var(--c1); border-radius: 0px; } 
::-webkit-scrollbar-corner { background-color: #ffffff; } 
::-webkit-resizer { background-color: #666; } 

/* General */
.title-main { margin-bottom: 1.5rem; text-align:center; position: relative; } 
.title-main span {text-transform: uppercase;color: var(--c1);font-size: clamp(16px, 4vw, 36px);font-weight: normal;font-family: 'font2';} 
.time-main { margin-bottom:0.75rem; color:#999999; font-size: clamp(12px, 4vw, 13px); display: flex; flex-direction: row; flex-wrap: nowrap; } 
.time-main i { vertical-align:top; margin:3px 7px 0px 0px; } 
.time-main span { vertical-align:top; display:inline-block; } 
.share { padding:17px 15px 10px 15px; line-height:normal; background:rgba(128,128,128,0.15); margin-top:15px; border-radius:5px; } 
.share b { display:block; margin-bottom:5px; } 
.control-owl { position:absolute; width:100%; z-index:2; left:0px; top:calc(50% - 45px/2); } 
.control-owl .button { opacity:0.3; top:0px; position:absolute; outline:none; border:0px; padding:0px; margin:0px; display:block; cursor:pointer; color:#ffffff; width: 42px; height: 42px; text-align:center; display:flex; align-items:center; justify-content:center; font-size:25px; margin:0px; background-color: var(--c1); border-radius: 50px; -webkit-transition:0.3s ease-out; -moz-transition:0.3s ease-out; -o-transition:0.3s ease-out; transition:0.3s ease-out; } 
.control-owl .button:hover { opacity:1; } 
.control-owl .button.owl-prev { left: 0; } 
.control-owl .button.owl-next { right: 0; } 
.slideshow .control-owl .button.owl-prev { left: 85px; } 
.slideshow .control-owl .button.owl-next { right: 85px; } 
.form-control,.form-control-plaintext:not(textarea),.custom-select { height:calc(1em + 1.25rem + 8px); } 
.text-sm { font-size:.875rem!important; } 
.content-responsive { position: relative; max-width: 100%; overflow: hidden; } 
.content-responsive figure { width: max-content; max-width: 100%; } 
.content-responsive figure figcaption { font-size: clamp(10px, 3vw, 14px); background: #3333330d; padding: 6px 10px 5px; text-align: center; border-radius: 0 0 2.5px 2.5px; } 

/* Lazyload */
img.lazy { opacity:0; } 
img.lazy:not(.initial) { transition:opacity 1s; } 
img.initial,img.loaded,img.error { opacity:1; } 
img:not([src]) { visibility:hidden; } 

/* WRAP DRMENU */
.DRMenu_top { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 10px; gap: 10px; } 
.DRMenu_nav {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;align-items: center;padding: 5px 15px;background: var(--c1);position: sticky;top: 0;z-index: 1050;display: none;box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;} 
.DRMenu_let { width: 40px; } 
.DRMenu_center { width: calc( 100% - 80px); } 
.DRMenu_right { width: 40px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } 
.DRMenu_logo { display: block; text-align: center; } 
.DRMenu_logo img { height: 50px; width: auto; } 
.DRMenu_fixwidth { top: 0 !important; height: 100%; position: fixed; float: left; background: #fff; width: 80vw; max-width: 500px; position: fixed; z-index: 99999999999; left: 0; top: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; -webkit-transform: translateX(-101%); -ms-transform: translateX(-101%); -o-transform: translateX(-101%); transform: translateX(-101%); } 
.DRMenu_opacity.DRMenu_open { content: " "; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: fixed; top: 0px !important; left: 0px; z-index: 99999; } 
.DRMenu_fixwidth.open-sidebar-menu { visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); z-index: 99999999999; opacity: 1; } 
.DRMenu_header { display: block; padding: 10px 10px; position: sticky; top: 0; z-index: 1000; background: #fff; box-sha; box-shadow: rgba(0, 0, 0, 0.11) 0px 0px 8px; } 
.DRMenu_fixwidth.open-sidebar-menu::before { position: absolute; font-family: 'Font Awesome 6 Pro'; content: '\f060'; left: 100%; top: 0; width: 20vw; height: 80px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 300; font-size: 25px; user-select: none; pointer-events: none; } 
.DRMenu_header__logo { display: block; width: 100%; text-align: center; } 
.DRMenu_header__logo img { width: auto; height: 70px; } 
.DRMenu_body ul { list-style: none; padding: 0; ,animation: 0; margin: 0; } 
.DRMenu_body ul a { font-size: 14.5px; padding: 10px 10px; position: relative; line-height: 1.5; display: flex; align-items: baseline; flex-direction: row; flex-wrap: nowrap; background: #fff; font-weight: 500; color: #000; } 
.DRMenu_body ul li { position: relative; border-top: 1px solid #F0F0F0; overflow: hidden; } 
.DRMenu_body ul li a:hover { background-color: #F0F0F0; } 
.DRMenu_body ul li span.btn-dropdown-menu { position: absolute; right: 0px; font-size: 25px; display: flex; width: 42px; height: 42px; background: transparent; top: 0px; justify-content: center; flex-wrap: wrap; align-items: center; color: #8a8987; z-index: 1000; cursor: pointer; transition: all 0.6s; border-left: 1px solid #F0F0F0; /* border-right: 1px solid #F0F0F0; */ } 
.DRMenu_body ul ul li span.btn-dropdown-menu { border: none; } 
.DRMenu_body ul li span.btn-dropdown-menu i { transition: all 0.6s; } 
.DRMenu_body ul li span.btn-dropdown-menu.active i { transform: rotate(90deg); color: var(--color-key); } 
.DRMenu_body ul li span.btn-dropdown-menu:before { position: absolute; content: ''; width: 16px; height: 2px; background: #333; right: 12px; top: 20px; opacity: .8; } 
.DRMenu_body ul li span.btn-dropdown-menu:after { position: absolute; content: ''; width: 2px; height: 16px; background: #333; right: 19px; top: 13px; transition: all 0.3s; } 
.DRMenu_body ul li span.btn-dropdown-menu.active:after { transform: scale(0); } 
.DRMenu_body ul li a i { display: inline; } 
.DRMenu_body ul.sub-menu a { padding: 10px 5px 10px 20px; font-weight: 400; font-size: 13.5px; opacity: .9; } 
.DRMenu_body ul.sub-menu ul.sub-menu a { padding: 10px 30px; } 
.DRMenu_body ul.sub-menu.none { display: none; } 
.DRMenu_body ul.sub-menu.block { display: block; } 
.DRMenu_body ul.sub-menu.level1 li:has(.btn-dropdown-menu) > a { padding-bottom: 0; padding-top: 0; padding-left: 20px; margin-right: 41px; border-right: 1px solid #F0F0F0; min-height: 42px; display: flex; align-items: center; justify-content: flex-start; flex-direction: row; flex-wrap: nowrap; } 
.DRMenu_body ul.sub-menu.level2 li:has(.btn-dropdown-menu) > a { padding-left: 30px; padding-right: 5px; } 
.DRMenu_body ul.sub-menu.level3 li:has(.btn-dropdown-menu) > a { padding-left: 40px; padding-right: 5px; padding-top: 8px; padding-bottom: 8px; } 
.DRMenu_body ul.sub-menu li:has(.btn-dropdown-menu) a span { padding: 8px 0; } 
.DRMenu_body ul.sub-menu.level4 li > a { padding-left: 50px; padding-right: 10px; } 
section.DRMenu_content::-webkit-scrollbar { width: 0; height: 0; } 
section.DRMenu_content { overflow-y: scroll; height: 100%; width: 100%; background: #fff; float: left; position: relative; z-index: 12; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; } 
.DRMenu_footer { display: flex; background: #fff; padding: 10px; position: sticky; bottom: 0; z-index: 1000; margin-top: auto; box-shadow: rgba(0, 0, 0, 0.11) 0px 0px 8px; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; } 
.mm_lang { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; } 
.mm_lang a { display: block; border: 1px solid #F0F0F0; border-radius: 5px; overflow: hidden; } 
.mm_couter { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 15px; font-size: 12px; } 
#hamburger { display:block; width:45px; height:23px; position:relative; } 
#hamburger:before,#hamburger:after,#hamburger span {background: #fff;content:'';display:block;width:100%;height: 2px;position:absolute;left:0px;} 
#hamburger:before { top:0px; } 
#hamburger span { top:10px; } 
#hamburger:after { top:20px; } 
#hamburger:before,#hamburger:after,#hamburger span { -webkit-transition:none 0.25s ease 0.25s; transition:none 0.25s ease 0.25s; -webkit-transition-property:transform,top,bottom,left,opacity; transition-property:transform,top,bottom,left,opacity; } 

/* Search Responsive */
.search-res { position:relative; text-align: right; } 
.search-res .icon-search {width:40px;height:40px;cursor:pointer;text-align:center;line-height:42px;color: #fff;font-size: 16px;margin:0px;border: 1px solid #fff;border-radius: 100%;} 
.search-res .icon-search.active {color: var(--c1);background: #fff;border-radius:100%;} 
.search-res .search-grid { position: absolute; top: 50px; right: 0px; width: 0px; height: 40px; overflow: hidden; background: #ffffff; border: 1px solid var(--c1); z-index: 2; opacity: 0; border-radius: 25px; line-height: normal; } 
.search-res .search-grid p { float:left; width:35px; height:38px; cursor:pointer; outline:none; border:none; margin:0px; font-size:17px; display:block; color:var(--color-red); line-height:40px; text-align:center; } 
.search-res .search-grid input { width:calc(100% - 35px); float:right; line-height:38px; outline:none; border:none; color: #000; font-size: 13px; } 
.search-res .search-grid input::-webkit-input-placeholder { color:#ccc; } 
.search-res .search-grid input:-moz-placeholder { color:#ccc; } 
.search-res .search-grid input::-moz-placeholder { color:#ccc; } 
.search-res .search-grid input:-ms-input-placeholder { color:#ccc; } 

/* Slideshow */
.slideshow { position:relative; display: block; } 
.slideshow-item { display:block; cursor:pointer; } 
.slideshow:hover .control-slideshow { opacity:1; } 
.control-slideshow { opacity:0; } 

/* Breadcrumb */
.breadCrumbs { background-color: #eaedf080; margin-top: 0; width: 100%; overflow: hidden; } 
.breadCrumbs .wrap-content { padding: 0.5rem 15px; font-size: 14px; } 
.breadCrumbs .wrap-content .breadcrumb { padding:0; margin-bottom:0; background-color: transparent; border-radius:0; } 
.breadCrumbs .wrap-content .breadcrumb-item a { color: var(--title); font-size: clamp(10px, 3vw, 14px); transition: all 0.2s linear; } 
.breadCrumbs .wrap-content .breadcrumb-item.active a { font-weight: 500; } 
.breadCrumbs .wrap-content .breadcrumb-item:hover a { color: #000; transition: all 0.2s linear; } 

/* Video */
.video { cursor:pointer; margin-bottom:1rem; } 
.video-image { position:relative; margin-bottom:0.75rem; } 
.video-image img { object-fit: cover !important; } 
.video-image:before { content:""; position:absolute; width:50px; height:35px; top:calc(50% - 50px/2); left:calc(50% - 35px/2); z-index:1; background-repeat:no-repeat; background-image:url(../images/play.png); } 
.video-name { text-align:center; font-size:16px; color: var(--c1); margin-bottom:0px; } 

/* Album */
.album { cursor:pointer; margin-bottom:1rem; } 
.album-image { margin-bottom:0.75rem; border: 1px solid rgb(51 51 51 / 5%); border-radius: 10px; cursor: zoom-in; } 
.album-name { margin-bottom:0px; text-align:center; } 
.album-name a { display:block; font-size:16px; color:var(--color-black); margin-bottom:0px; } 

/* Product Detail */
.grid-pro-detail { margin-bottom:3rem; } 
.left-pro-detail { position:relative; text-align:center; } 
.gallery-thumb-pro { position:relative; margin-top: 8px; z-index: 1; width: 100%; display: grid; grid-template-columns: repeat(5, calc((100% + 10px) / 5 - 10px)); grid-gap: 10px; } 
.owl-pro-detail { padding:0px 30px; } 
.control-pro-detail button { background-color:transparent; color:#222222; opacity:1; width:25px; font-size:23px; } 
.control-pro-detail button:hover { opacity:0.7; } 
.control-pro-detail button.owl-prev { left:0px; } 
.control-pro-detail button.owl-next { right:0px; } 
.thumb-pro-detail { display:block!important; border:1px solid #eee; padding: 3px; border-radius: 5px; cursor:pointer; background-color:#ffffff; } 
.thumb-pro-detail img { border-radius: 5px; } 
.thumb-pro-detail.mz-thumb.mz-thumb-selected { border-color: var(--c1); } 
.thumb-pro-detail img { box-shadow:none!important; filter:brightness(100%)!important; border-bottom:0px!important; padding-bottom:0px!important; } 
.title-pro-detail { text-transform:capitalize; font-size: clamp(18px, 4vw, 25px); display:block; font-weight: bold; color: var(--title); } 
.comment-pro-detail { display:flex; align-items:center; justify-content:flex-start; } 
.social-plugin-pro-detail { margin-bottom:1rem; margin-top:0px!important; } 
.desc-pro-detail { margin:1rem 0; } 
.attr-pro-detail { list-style:none; padding:0px; font-size: 13px; } 
.attr-pro-detail li { margin-bottom:0.5rem; } 
.attr-label-pro-detail { margin:0px 5px 0px 0px; } 
.attr-label-pro-detail.d-block { display:block; margin:0px 0px 5px 0px; } 
.attr-content-pro-detail { display:inline-block; margin-bottom:0px; } 
.price-new-pro-detail { font-weight: 900; font-size: 22px; color: #f50000; } 
.price-save-pro-detail { display: block; font-size: 14px; font-weight: 400; line-height: normal; margin-top: 2px; margin-bottom: 10px; } 
.price-save-pro-detail span { font-weight: 500; } 
.price-save-pro-detail i { color: red; } 
.price-old-pro-detail { font-weight:500; color: #333; text-decoration:line-through; padding-left:10px; } 
.color-pro-detail { cursor:pointer; display:inline-block; vertical-align:top; position:relative; width:35px; height:30px; margin:0px 0px 3px 0px; border:1px solid transparent; background-repeat:no-repeat; background-size:contain; background-position:center center; } 
.size-pro-detail { cursor:pointer; border:1px solid #ccc; padding:3px 10px 4px 10px; display:inline-block; position:relative; } 
.size-pro-detail.active,.color-pro-detail.active { border-color:#e5101d; color:#e5101d; } 
.size-pro-detail.active:after,.color-pro-detail.active:after { content:''; position:absolute; bottom:0px; right:0px; width:13px; height:13px; background-repeat:no-repeat; background-image:url(../images/check-cart.png); } 
.color-pro-detail input[type=radio],.size-pro-detail input[type=radio] { display:none; } 
.quantity-pro-detail { width: 100%; max-width: 120px; line-height: normal; display: flex; align-items: center; justify-content: space-between; text-align: center; height: 45px; user-select: none; } 
.quantity-pro-detail span { line-height: 25px; padding: 0px; width: 45px; height: 45px; color: #5f5f5f; cursor: pointer; font-size: 22px; border: 2px solid #cccccc; display: flex; align-items: center; justify-content: center; } 
.quantity-pro-detail span.quantity-plus-pro-detail { border-left: 0px; border-radius: 0 10px 10px 0; } 
.quantity-pro-detail span.quantity-minus-pro-detail { border-right: 0px; border-radius: 10px 0 0 10px; } 
.quantity-pro-detail input { height: 45px; border: 2px solid #cccccc; width: calc(100% - 60px); text-align: center; font-size: 16px; padding: 5px; font-weight: bold; } 
.cart-pro-detail { margin-top: 1rem; margin-bottom: 0.25rem; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 8px; max-width: 500px; width: 100%; } 
.cart-pro-detail a { font-size:14px; color:#ffffff!important; text-transform:uppercase; border-radius: 10px !important; overflow: hidden; } 
.tags-pro-detail a i { font-size:11px; margin:5px 5px 0px 0px; } 
.cart-pro-detail .addnow { background-color: transparent; background-color: initial; border: 2px solid #ff0004; flex-direction: column; height: 45px; width: 70px; display: flex; align-items: center; justify-content: center; transition: all .3s ease; } 
.cart-pro-detail .addnow i { font-size: 20px; color: #e04040; margin-bottom: 2px; transition: all .3s ease; } 
.cart-pro-detail .addnow span { color: #e04040; font-size: 8px; font-weight: 600; margin: 0; padding: 0; text-transform: capitalize; transition: all .3s ease; line-height: normal; } 
.cart-pro-detail .addnow:hover { cursor: pointer; background: #ff0004; transition: all .3s ease; } 
.cart-pro-detail .addnow:hover i, .cart-pro-detail .addnow:hover span { color: #fff; transition: all .3s ease; } 
.cart-pro-detail .buynow { flex: 1; background: linear-gradient(#f52f32,#e11b1e); border: none; color: #fff; flex-direction: row; height: 45px; outline: none; width: calc(100% - 80px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .3s ease; background-size: 300% 100%; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; background-image: linear-gradient(to right, #ff1418, #b80104, #b80104, #ff0004); } 
.cart-pro-detail .buynow i { font-size: 22px; color: #fff; margin-right: 12px; transition: all .3s ease; } 
.cart-pro-detail .buynow span { color: #fff; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-transform: capitalize; transition: all .3s ease; } 
.cart-pro-detail .buynow:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; transition: all .3s ease; } 
.cart-pro-detail .buynow:hover i, .cart-pro-detail .buynow:hover span { color: rgb(235, 235, 7); transition: all .3s ease; } 
.tabs-pro-detail { margin-top:2rem; } 
.tabs-pro-detail .nav-tabs .nav-link { border-top-width:3px; font-size: 14px; color: #333; font-weight: bold; } 
.tabs-pro-detail .nav-tabs .nav-link.active,.tabs-pro-detail .nav-tabs .nav-item.show .nav-link { border-top-color: var(--c1); color: var(--c1); } 
.title-main.detail { text-align: left; margin-bottom: 1.5rem; padding-bottom: 0.5rem; } 
.title-main.detail::before { position: absolute; content: ''; left: 0; bottom: -5px; width: 100px; height: 2px; background: var(--c1); } 
#content_limit { position: relative; padding-bottom: 20px; } 
#content_limit .content_showore { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); padding: 6px 20px; align-items: center; background: #fff; border: none; border-radius: 0 0 10px 10px; box-shadow: 0 5px 2px 0 rgba(60,64,67,.1), 0 4px 6px 2px rgba(60,64,67,.05); color: #212529; cursor: pointer; display: flex; font-size: 14px; height: 40px; justify-content: center; margin-bottom: 15px; margin-left: auto; margin-right: auto; max-width: 335px; -webkit-text-decoration: none; text-decoration: none; width: 100%; transition: all .3s ease; } 
.limit-content::before { content: ''; height: 123px; background: linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.91) 50%,#fff 55%); border-radius: 0; bottom: -0px; display: block; left: 0; margin-bottom: 0; padding-top: 68px; position: absolute; right: 0; text-align: center; width: 100%; } 
#content_limit .content_showore:hover { font-weight: bold; color: red; transition: all .3s ease; } 
.product_galerry .f-thumbs__slide__button { opacity: .8 !important; border: 1px solid #33333315 !important; transition: all .2s ease; } 
.product_galerry .f-thumbs__slide.is-nav-selected .f-thumbs__slide__button { opacity: 1 !important; border: 1px solid var(--c1) !important; transition: all .2s ease; } 

/* Comment */
.comment-title { font-size: 18px; } 
.comment-show { display: block !important; } 
.comment-point { font-size: 47px; color: #fe302e; } 
.comment-star { font-size: 0; position: relative; display: inline-block; vertical-align: top; margin-bottom: 0.5rem; } 
.comment-star span { display: block; position: absolute; top: 0; left: 0px; bottom: 0; z-index: 1; overflow: hidden; text-align: left; white-space: nowrap; } 
.comment-star i { display: inline-block; margin: 0.1rem; color: #b8b8b8; text-rendering: auto; font-size: 20px; } 
.comment-star i:nth-child(1) { margin-left: 0; } 
.comment-star span i { color: #ffc120; } 
.comment-progress { width: 100%; margin-bottom: 0.375rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } 
.comment-progress:last-child { margin-bottom: 0px; } 
.comment-progress .progress { height: 12px; margin-right: 10px; margin-left: 5px; width: calc(100% - 90px); border-radius: 10px; } 
.comment-progress .progress-bar#has-rate { background-color: #23b445; } 
.comment-progress .progress-num { font-size: 15px; width: 25px; text-align: center; color: #787878; } 
.comment-progress .progress-total { font-weight: 600; text-align: left; color: #787878; width: 50px; } 
.comment-write { display: none; } 
.review-rating-star { font-size: 0; } 
.review-rating-star-icon .fa { font-weight: 400; font-style: normal; display: inline-block; margin: 0.1rem; font-size: 21px; cursor: pointer; color: #f0c808; } 
.review-rating-star-icon .fa.star-empty { color: #dedddc; } 
.review-rating-star-icon .fa.star-not-empty { color: #f0c808; } 
.review-rating-star-icon .fa:nth-child(1) { margin-left: 0; } 
.review-fileuploader { padding: 20px 15px; text-align: center; background-color: #ffffff; cursor: pointer; border: 2px dashed #c2cdda; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
.review-fileuploader .review-fileuploader-text { color: #90a0bc; } 
.review-file-uploader .fileuploader { padding: 0px; margin: 0px; background: transparent; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list { margin: 1rem -5px 0 -5px; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list:after { display: block; content: ""; clear: both; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item { padding: 0px; width: calc(100% / 7 - 10px); float: left; margin: 0 5px 5px 5px; border-bottom: 0px; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .columns { display: block; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail { width: auto; height: auto; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail .fileuploader-item-image { height: auto; padding: 50% 0; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail .fileuploader-item-image img { position: absolute; top: 0px; left: 0px; max-width: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: none; transform: none; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-title { padding: 0px; margin-top: 0.5rem; text-align: center; display: none; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-actions { margin: 0px; position: absolute; top: 0px; right: -5px; } 
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-infos input { border: 1px solid #dddddd; border-radius: 0.25rem; } 
.review-poster-video-avatar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
.review-poster-video-avatar .avatar-detail { width: 95px; height: 95px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
.review-poster-video-avatar .avatar-detail img { max-width: 95px; max-height: 95px; } 
#review-content { height: 350px; } 
.carousel-comment-media .carousel-control a { opacity: 1; width: 45px; height: 45px; top: calc(50% - 45px / 2); bottom: inherit; } 
.carousel-comment-media .carousel-control a span { display: block; cursor: pointer; color: #222222; width: 45px; height: 45px; padding: 5px; text-align: center; background-color: #ffffff; -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } 
.carousel-comment-media .carousel-control a.carousel-control-prev { left: 20px; } 
.carousel-comment-media .carousel-control a.carousel-control-prev span { padding-right: 9px; } 
.carousel-comment-media .carousel-control a.carousel-control-next { right: 20px; } 
.carousel-comment-media .carousel-control a.carousel-control-next span { padding-left: 8px; } 
.carousel-comment-media .carousel-indicators { position: static; margin: 0px 0px 0.75rem 0px; text-align: left; display: block; } 
.carousel-comment-media .carousel-indicators li { width: auto; max-width: 60px; height: auto; text-indent: inherit; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 0px 0px 3px 0px; border: 2px solid transparent; opacity: 1; cursor: -webkit-zoom-in; cursor: zoom-in; } 
.carousel-comment-media .carousel-indicators li.active { border-color: #ffc120; cursor: -webkit-zoom-out; cursor: zoom-out; -webkit-transform: scale(1.05); transform: scale(1.05); } 
.carousel-comment-media .carousel-inner { max-width: 550px; -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.12); } 
.carousel-comment-media .carousel-inner .carousel-lists .carousel-comment-media-item-video #file-video { max-width: 100%; width: 100%; height: 500px; vertical-align: top; display: inline-block; background-color: #000000; } 
#form-reply { display: none; } 
.comment-item { margin-bottom: 3rem; } 

@media only screen and (min-width: 992px){
 .comment-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
 }
.comment-item-poster { width: 200px; margin-right: 30px; text-align: center; } 
@media only screen and (max-width: 991px){
 .comment-item-poster { width: auto; margin-right: 0px; margin-bottom: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
 }
.comment-item-letter { border-radius: 50%; background-color: #d3d2d3; color: #919090; width: 65px; height: 65px; text-transform: uppercase; display: inline-block; vertical-align: top; line-height: 67px; font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; } 
@media only screen and (max-width: 991px){
 .comment-item-letter { width: 40px; height: 40px; line-height: 40px; font-size: 13px; margin-bottom: 0; } 
 }
.comment-item-name { margin-bottom: 0.25rem; text-transform: capitalize; } 
@media only screen and (max-width: 991px){
 .comment-item-name { margin-bottom: 0px; margin-left: 10px; margin-right: 10px; } 
 }
.comment-item-posttime { font-size: 12px; color: #999999; } 
.comment-item-information { width: calc(100% - 230px); } 
@media only screen and (max-width: 991px){
 .comment-item-information { width: 100%; } 
 }
.comment-item-star { float: left; margin-right: 10px; } 
.comment-item-star i { font-size: 17px; } 
.comment-item-title { font-size: 15px; font-weight: 500; } 
.comment-replies { position: relative; background: #f8f9fa; border: 1px solid #dfdfdf; padding: 1.75rem 1.5rem; } 
.comment-replies:after { content: ""; position: absolute; } 
.comment-replies:before { content: ""; position: absolute; z-index: 1; top: -13px; left: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 13px solid #f8f9fa; } 
.comment-replies:after { top: -14px; left: 9px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 14px solid #dfdfdf; } 
.comment-replies-item { margin-bottom: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } 
.comment-replies-item:last-child { margin-bottom: 0px; } 
.comment-replies-letter { width: 45px; height: 45px; margin-right: 10px; line-height: 45px; padding-left: 1px; font-size: 14px; border-radius: 50%; background-color: #e5e3e5; color: #919090; text-transform: uppercase; display: inline-block; vertical-align: top; font-weight: 500; text-align: center; margin-top: 0.125rem; } 
.comment-replies-letter.admin { position: relative; background-color: #189eff; text-indent: 9999px; overflow: hidden; } 
.comment-replies-letter.admin:before { content: "QTV"; text-indent: 0px; color: #ffffff; font-weight: 500; text-transform: uppercase; font-size: 13px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } 
.comment-replies-info { width: calc(100% - 55px); } 
.comment-replies-name { font-weight: 500; margin-bottom: 0.125rem; } 
.comment-replies [class*="btn-load-more-"] { border: 0px; outline: none; padding: 0px; background: transparent; } 
.comment-media-play { z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } 
.comment-media-play svg { -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3); border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); } 
.comment-media-play svg .comment-media-play-stroke-dotted { opacity: 0; stroke-dasharray: 4, 5; stroke-width: 1px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: spin 4s infinite linear; animation: spin 4s infinite linear; -webkit-transition: opacity 1s ease, stroke-width 1s ease; transition: opacity 1s ease, stroke-width 1s ease; } 
.comment-media-play svg .comment-media-play-stroke-solid { stroke-dashoffset: 0; stroke-dasharray: 300; stroke-width: 4px; -webkit-transition: stroke-dashoffset 1s ease, opacity 1s ease; transition: stroke-dashoffset 1s ease, opacity 1s ease; } 
.comment-media-play svg .comment-media-play-icon { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform 200ms ease-out; transition: -webkit-transform 200ms ease-out; transition: transform 200ms ease-out; transition: transform 200ms ease-out, -webkit-transform 200ms ease-out; } 
.comment-media-play:hover svg .comment-media-play-stroke-dotted { stroke-width: 4px; opacity: 1; } 
.comment-media-play:hover svg .comment-media-play-stroke-solid { opacity: 0; stroke-dashoffset: 300; } 
.comment-media-play:hover svg .comment-media-play-icon { -webkit-transform: scale(1.05); transform: scale(1.05); } 

/* News */
.news { margin-bottom:2rem; } 
.news-name { margin-bottom:0.5rem; } 
.news-name a {color: #333;font-size: 16px;font-weight: bold;text-transform: uppercase;line-height: 1.5;font-family: 'font4';} 
.news-name a.text-split { -webkit-line-clamp:2; } 
.news-name a:hover { color: var(--c1); } 
.news-time { color:#84878a; margin-bottom:0.25rem; } 
.news-desc { color:#333333; margin-top:5px; line-height: 1.8; } 
.othernews b { margin-bottom:10px; } 
.list-news-other { padding-left:17px; list-style:square; } 
.list-news-other li { margin-bottom: 5px; } 
.list-news-other li a { text-transform:none; color:#333333; } 
.list-news-other li a:hover { color:var(--color-red); } 

/* Contact */
.contact-article { margin-bottom:3rem; } 
.contact-input { position:relative; margin-bottom:15px; } 
.contact-input textarea { resize:none; height:150px; } 
.contact-input .custom-file-label::after { content:attr(title); } 
.contact-map { position:relative; height:500px; border-radius: 20px; overflow: hidden; box-shadow: 0 0 5px #33333324; } 
.contact-map iframe { position:absolute; top:0px; left:0px; width:100%!important; height:100%!important; } 

/* Like Share */
.social-plugin { display:flex; justify-content:flex-start; margin-top: 0; margin-bottom: 0rem !important; transform: scale(0.9); transform-origin: left; min-height: 25px; } 
.social-plugin .at-share-btn { margin-bottom:0px!important; } 
.social-plugin .zalo-share-button { margin-left: 3px; width: 30px; height: 30px; line-height: 30px; border-radius: 3px; background: var(--c1) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; } 
.social-plugin .zalo-share-button:hover { opacity: 0.7; } 
.social-plugin .zalo-share-button img { width:25px; height:25px; } 

/* Paging */
.pagination-home .pagination .page-item .page-link { color:#555555; font-size:.875rem; } 
.pagination-home .pagination .page-item.active .page-link { color:#ffffff; background-color:#555555; border-color:#555555; } 

/* Paging Ajax */
.pagination-ajax { text-align:center; } 
.pagination-ajax a { display:inline-block; vertical-align:top; margin:0px 3px 3px 3px; width:35px; height:35px; line-height:33px; color:#666!important; border: 1px solid #e6e6e6bd; font-size:13px; cursor:pointer; text-decoration:none!important; background-color:#ffffff; border-radius: 0.5rem; transition: all 0.2s linear; font-weight: bold; border: 1px solid #A5A5A5; background: linear-gradient(180deg, #FFF 0%, #EDEDED 100%); } 
.pagination-ajax a.current, .pagination-ajax a:hover { color: #fff!important; border-color: var(--c2); background: var(--c2); } 
.pagination-ajax a.first,.pagination-ajax a.last,.pagination-ajax a.prev,.pagination-ajax a.next { text-indent:-9999px; position:relative; background-color:#ffffff!important; } 
.pagination-ajax a.first:before,.pagination-ajax a.last:before,.pagination-ajax a.prev:before,.pagination-ajax a.next:before { content:''; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2; background-color:transparent; background-repeat:no-repeat; background-position:center; } 
.pagination-ajax a.first:before { background-image:url(../images/page-first.png); } 
.pagination-ajax a.last:before { background-image:url(../images/page-last.png); } 
.pagination-ajax a.prev:before { background-image:url(../images/page-prev.png); } 
.pagination-ajax a.next:before { background-image:url(../images/page-next.png); } 

/* Popup */
#popup .modal-body { padding:0px; } 

/* Hidden Google Captcha */
.grecaptcha-badge { display:none!important; width:0px!important; height:0px!important; visibility:hidden!important; overflow:hidden; } 

/* Hidden Check Grammar Coccoc */
coccocgrammar { display:none; } 

/* Scroll Top */
.scrollToTop { width:41px; height:41px; text-align:center; font-weight:bold; color:#444; text-decoration:none; position:fixed; bottom:65px; right:25px; display:none; z-index:10; cursor:pointer; } 

/* Text Hide */
.text-split-1 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:1 !important; } 
.text-split-2 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:2 !important; } 
.text-split { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; } 
.text-split-4 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:4 !important; } 
.text-split-5 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:5 !important; } 
.text-split-6 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:6 !important; } 
.text-split-7 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:7 !important; } 
.text-split-8 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:8 !important; } 
.text-split-9 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:9 !important; } 
.text-split-10 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:10 !important; } 
.text-split-11 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:11 !important; } 
.text-split-12 { overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important; -webkit-box-orient:vertical !important; display:-webkit-box !important; -webkit-line-clamp:12 !important; } 

/* Transition All */
.transition { -webkit-transition:0.2s ease-out; -moz-transition:0.2s ease-out; -o-transition:0.2s ease-out; transition:0.2s ease-out; } 
 
/* Images Hover */
.scale-img { overflow:hidden; display:block; } 
.scale-img img { -webkit-transition: all 0.3s ease-out !important; -moz-transition: all 0.3s ease-out !important; -o-transition: all 0.3s ease-out !important; transition: all 0.3s ease-out !important; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); } 
.scale-img:hover > img { -webkit-transition: all 0.3s ease-out !important; -moz-transition: all 0.3s ease-out !important; -o-transition: all 0.3s ease-out !important; transition: all 0.3s ease-out !important; -moz-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); transform:scale(1.1,1.1); } 
.img_hover { overflow: hidden; position: relative; padding: 0; z-index: 0; } 
.img_hover:after { position: absolute; top: 0; left: 0; bottom: 0; right:0; z-index: 22; display: block; /* content: ''; */-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=0, Color=#000000)"; -moz-box-shadow: 0 0 15px rgba(0,0,0,0.2) inset; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2) inset; box-shadow: 0 0 15px rgba(0,0,0,0.2) inset; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=15, Direction=135, Color=#000000); } 
.img_hover:before { position: absolute; top: 0; left: -95%; z-index: 22; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); } 
.img_hover:hover:before { -webkit-animation: shine .6s; animation: shine .6s; } 
@-webkit-keyframes shine { 100% { left: 125%; } 
 }
@keyframes shine { 100% { left: 125%; } 
 }
 
/* Animation Css */
.blink { -webkit-animation-name:blink; -webkit-animation-duration:1s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name:blink; -moz-animation-duration:1s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; animation-name:blink; animation-duration:1s; animation-timing-function:linear; animation-iteration-count:infinite; } 
@-moz-keyframes blink { 
 0% { opacity:1.0; } 
50% { opacity:0.0; } 
100% { opacity:1.0; } 
 }
@-webkit-keyframes blink { 
 0% { opacity:1.0; } 
50% { opacity:0.0; } 
100% { opacity:1.0; } 
 }
@keyframes blink { 
 0% { opacity:1.0; } 
50% { opacity:0.0; } 
100% { opacity:1.0; } 
 }
.shake-anim { -webkit-animation:shake-anim 1s infinite ease-in-out; -moz-animation:shake-anim 1s infinite ease-in-out; -ms-animation:shake-anim 1s infinite ease-in-out; -o-animation:shake-anim 1s infinite ease-in-out; animation:shake-anim 1s infinite ease-in-out; -webkit-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -o-transform-origin:50% 50%; transform-origin:50% 50% } 
@-moz-keyframes shake-anim { 
 0% { transform:rotate(0) scale(1) skew(1deg) } 
10%,30% { -moz-transform:rotate(-25deg) scale(1) skew(1deg) } 
20%,40% { -moz-transform:rotate(25deg) scale(1) skew(1deg) } 
100%,50% { -moz-transform:rotate(0) scale(1) skew(1deg) } 
 }
@-webkit-keyframes shake-anim { 0%,100%,50% { -webkit-transform:rotate(0) scale(1) skew(1deg) } 
10%,30% { -webkit-transform:rotate(-25deg) scale(1) skew(1deg) } 
20%,40% { -webkit-transform:rotate(25deg) scale(1) skew(1deg) } 
 }
@-o-keyframes shake-anim { 0%,100%,50% { -o-transform:rotate(0) scale(1) skew(1deg) } 
10%,30% { -o-transform:rotate(-25deg) scale(1) skew(1deg) } 
20%,40% { -o-transform:rotate(25deg) scale(1) skew(1deg) } 
 }
 
/* Button Frame */ 
.tool-desktop { display: flex; position: fixed; bottom: 155px; right: 20px; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; align-items: center; z-index: 1000; gap: 25px; } 
.btn-frame { display:block; width: 40px; height: 40px; position: relative; z-index: 1000; cursor:pointer; } 
.btn-frame i { display:flex; display:-ms-flex; justify-content:center; align-items:center; -ms-flex-align:center; width: 40px; height: 40px; border-radius:50%; background: transparent; position:relative; z-index: 1001; } 
.btn-frame i img { vertical-align: middle; width: 100%; overflow: hidden; border-radius: 100%; } 
.btn-frame .animated.infinite { animation-iteration-count:infinite; } 
.btn-frame .kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position:absolute; background-color:transparent; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; border:2px solid rgba(7,41,103,0.8); opacity:.1; border-color:var(--btn); opacity:.5; } 
.btn-frame .zoomIn { animation-name:zoomIn; } 
.btn-frame .animated { animation-duration:1s; animation-fill-mode:both; } 
.btn-frame .kenit-alo-circle-fill { width: 50px; height: 50px; top: -5px; right: -5px; position:absolute; -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; border:2px solid transparent; -webkit-transition:all .5s; -moz-transition:all .5s; -o-transition:all .5s; transition:all .5s; background-color:rgba(7,41,103,0.35); opacity:.4; } 
.btn-frame .pulse { animation-name:pulse; } 
.btn-frame span { display: block; width: max-content; position: absolute; right: calc( 100% - 20px ); background: var(--c1); top: 50%; transform: translateY(-50%); line-height: normal; padding: 6px 30px 7px 15px; border-radius: 100px 0 0 100px; color: #fff; font-weight: bold; font-size: 14px; opacity: 0; visibility: hidden; transition: all .2s ease; } 
.btn-frame:hover span { opacity: 1; visibility: visible; transition: all .2s ease; } 
.btn-mess.btn-frame i img { overflow: visible !important; } 

/* WRAP Giao Hàng */
#wrap_delivery { position: fixed; left: 15px; top: 50%; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; transform: translateY(-50%); } 
.delivery_items { margin-top: 0; border-radius: 100%; overflow: hidden; transition: all .3s ease; } 
.delivery_items img { width: 100%; text-align: center; filter: drop-shadow(0px 0px 3px rgb(0 0 0 / 20%)); } 
.delivery_items:hover { transform: translateX(10px) scale(1.1); transition: all .3s ease; } 

/* Messenger */
.js-facebook-messenger-container.closed,.js-facebook-messenger-tooltip.closed { display:none!important } 
.js-facebook-messenger-tooltip { bottom:97px; right:97px } 
.js-facebook-messenger-tooltip { color:#404040; background:#fff } 
.js-facebook-messenger-box,.js-facebook-messenger-button,.js-facebook-messenger-tooltip { z-index:999 } 
.js-facebook-messenger-tooltip { display:none; position:fixed; text-align:center; border-radius:10px; overflow:hidden; font-size:12px; line-height:1; padding:10px; border:1px solid rgba(0,0,0,0.1); box-shadow:rgba(0,0,0,0.15) 0 2pt 10pt; z-index:1.0E+30 } 
.js-facebook-messenger-close-tooltip { width:10px; height:10px; display:inline-block; cursor:pointer; margin-left:10px } 
.js-facebook-messenger-box.rubberBand { -webkit-animation-name:rubberBand; animation-name:rubberBand } 
.js-facebook-messenger-box.animated { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both } 
.js-facebook-messenger-box,.js-facebook-messenger-button,.js-facebook-messenger-tooltip { z-index:999 } 
.js-facebook-messenger-box { display:block; position:fixed; cursor:pointer; bottom: 153px; right: 23px; width: 50px; height: 50px; text-align:center; background:var(--btn); border-radius:100%; overflow:hidden; z-index:99; -webkit-box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3); -moz-box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3); box-shadow:1px 1px 4px 0 rgba(0,0,0,0.3); background: rgb(6,147,252); background: -moz-linear-gradient(23deg, rgba(6,147,252,1) 0%, rgba(141,64,254,1) 50%, rgba(253,102,106,1) 100%); background: -webkit-linear-gradient(23deg, rgba(6,147,252,1) 0%, rgba(141,64,254,1) 50%, rgba(253,102,106,1) 100%); background: linear-gradient(23deg, rgba(6,147,252,1) 0%, rgba(141,64,254,1) 50%, rgba(253,102,106,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0693fc",endColorstr="#fd666a",GradientType=1); } 
.js-facebook-messenger-box.rotate svg#fb-msng-icon { transform:rotate(0deg) } 
.js-facebook-messenger-box svg#fb-msng-icon { width:32px; height:33px; position:absolute; top: 10px; left: 9px; opacity:1; overflow:hidden; -webkit-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; -moz-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; -o-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; } 
.js-facebook-messenger-box.rotate svg#close-icon { transform:rotate(-45deg) } 
.js-facebook-messenger-box svg#close-icon { opacity:0; width:19px; height:20px; position:absolute; top: 15px; left: 16px; -webkit-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; -moz-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; -o-transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; transition:opacity 160ms ease-in-out,transform 160ms ease-in-out; } 
.js-facebook-messenger-container,.js-facebook-messenger-container-button { z-index:1000 } 
.js-facebook-messenger-container { position:fixed; opacity:0; transform:translateY(50px); bottom:110px; right:90px; border-radius:10px; pointer-events:none; box-shadow:0 1px 6px rgba(0,0,0,0.06),0 2px 32px rgba(0,0,0,0.16); -webkit-transition:transform 160ms ease-in-out,opacity 160ms ease-in-out; -moz-transition:transform 160ms ease-in-out,opacity 160ms ease-in-out; -o-transition:transform 160ms ease-in-out,opacity 160ms ease-in-out; transition:transform 160ms ease-in-out,opacity 160ms ease-in-out } 
.js-facebook-messenger-top-header { width:220px } 
.js-facebook-messenger-top-header { color:#ffffff; background:var(--btn) } 
.js-facebook-messenger-top-header { display:block; position:relative; width:220px; background:var(--btn); color:#ffffff; text-align:center; line-height:1; padding:10px; font-size:14px; border-top-left-radius:10px; border-top-right-radius:10px } 
.js-facebook-messenger-container iframe,.js-facebook-messenger-container-button iframe { border-bottom-left-radius:10px; border-bottom-right-radius:10px } 
.js-facebook-messenger-box,.js-facebook-messenger-button,.js-facebook-messenger-tooltip { z-index:999 } 
.js-facebook-messenger-container,.js-facebook-messenger-container-button { z-index:1000 } 
.js-facebook-messenger-top-header { color:#ffffff; background:var(--btn) } 
.js-facebook-messenger-top-header { width:220px } 
.js-facebook-messenger-tooltip { color:#404040; background:#fff } 
.js-facebook-messenger-container.open { transform:translateY(0px); opacity:1; pointer-events:all } 
.js-facebook-messenger-tooltip { bottom:97px; right:97px } 
.js-facebook-messenger-box.open svg#fb-msng-icon { opacity:0 } 
.js-facebook-messenger-box.rotate.open svg#close-icon { transform:rotate(0deg) } 
.js-facebook-messenger-box.open svg#close-icon { opacity:1 } 
.js-facebook-messenger-box svg path { fill: #fff !important; } 

/* Cart Fix */
.cart-fixed { position: relative; z-index:10; background: transparent; } 
.cart-fixed i { font-size: 20px; } 
.cart-fixed b { position: absolute; top: 0px; right: -5px; color: #fff; width: 22px; height: 22px; background: darkred; text-align: center; line-height: 22px; font-size: 13px; border-radius: 100%; z-index: 1001; font-weight: bold; } 

/* Toolbar */
.toolbar { background: var(--c1); width: calc( 100% - 16px); padding: .5rem 0 .3rem; position: fixed; z-index: 500; height: auto; left: 8px; bottom: 8px; border-radius: 1.2rem; backdrop-filter: saturate(100%) blur(10px) opacity(1) !important; } 
.toolbar ul { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:0px; margin:0px; } 
.toolbar ul li { text-align:center; width: 20%; } 
.toolbar ul li a { display:block; width:100%; cursor:pointer; } 
.toolbar ul li a img { height: 8vw; width:auto; /* border-radius: 100%; *//* overflow: hidden; */ } 
.toolbar ul li a span { font-weight:400; color:#ffffff; font-size: 2vw; margin-top: 3px; display: block; } 
.toolbar ul li a#giohang .count-cart { display: inline-block; width: max-content; } 

/* Fixbar */
.fixbar { bottom:0; display:block; background:#f0eff4; border-top:1px solid #ddd; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; position:fixed; margin:0; z-index:500; -webkit-backface-visibility:hidden; backface-visibility:hidden; height:50px; } 
.fixbar ul { margin:0px; padding:0px; list-style:none; } 
.fixbar ul li { display:inline-block; margin:0 auto 10px; text-align:center; width:25%; float:left; } 
.fixbar .icon-cart-mobile,.fixbar .icon-cart-new,.fixbar .icon-home-new,.fixbar .icon-hotdeal-new { width:20px; height:20px; display:block; margin:8px auto 0; } 
.fixbar .icon-cart-mobile { background:url(../images/cart-mobile.png) no-repeat; } 
.cart-total-header-mobile { font-size:10px; position:absolute; background:red; color:#fff!important; border-radius:50%; height:15px; width:15px; line-height:15px; top:5px; margin-left:5px; } 
.fixbar ul li a { font-size:11px; text-decoration:none; color:#333; } 
.fixbar ul li a i { font-size:20px; } 

/* Toc */
.box-readmore { padding:8px 15px; border:1px solid #dedede; margin-bottom:2rem; border-radius:5px; background-color:#eeeeee; } 
.box-readmore li ul>li { margin:0; margin-bottom:8px } 
.box-readmore li ul>li:before { content:counters(item,".") " " } 
.box-readmore ul { list-style-type:none; counter-reset:item; margin-bottom:0px; padding-left:0px!important; margin-top:8px; } 
.box-readmore ul li { display:table; counter-increment:item; margin-bottom:5px } 
.box-readmore ul li:before { content:counters(item,".") ". "; display:table-cell; padding-right:5px } 
.box-readmore ul li a { color:#333333; cursor:pointer; font-weight:600; } 
.box-readmore ul li a:hover { color:#767676; } 

/* WRAP BOOKING */
#popup-booking { max-width: 650px; background: #fff; padding: 25px; border-radius: 8px; overflow: hidden; } 
.border_form { display: block; position: relative; } 
.booking_title { font-size: 30px; color: var(--c1); line-height: 1; margin-bottom: 24px; margin-top: 12px; text-align: center; text-transform: uppercase; font-weight: 900; } 
.booking_desc { font-size: 14px; color: #f2ecdc; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px; } 
.form_booking { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; gap: 16px; } 
.form_booking input { width: calc( 50% - 8px ); height: 50px; background: #fff; border: 1px solid var(--c1); color: #000; border-radius: 5px; padding: 0 12px; font-size: 14px; text-transform: capitalize; } 
.form_booking textarea { width: 100%; height: 70px; background: transparent; border: 1px solid var(--c1); color: #000; border-radius: 5px; padding: 10px; resize: none; font-size: 14px; } 
.form_booking input::-webkit-input-placeholder { color:var(--text); } 
.form_booking input:-moz-placeholder { color:var(--text); } 
.form_booking input::-moz-placeholder { color:var(--text); } 
.form_booking input:-ms-input-placeholder { color:var(--text); } 
.form_booking input[type="datetime-local"] { width: 100%; position: relative; text-transform: uppercase; } 
.form_booking input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: brightness(0); width: 22px; height: 22px; } 
.form_booking input[type="datetime-local"]::-webkit-calendar-picker-indicator { color-scheme: dark; cursor: pointer; } 
.form_booking input[type="submit"] { display: inline-block; width: max-content; border: none; background: var(--c1); color: #fff; font-size: 18px; text-transform: uppercase; height: unset; line-height: 1; padding: 12px 20px 10px; border-radius: 5px; margin: 0px auto; transition: all 0.2s linear; font-weight: bold; } 
.form_booking input[type="submit"]:hover { background: darkred; color: #fff !important; transition: all 0.2s linear; } 
.form-control.is-invalid, .was-validated .form-control:invalid { background-color: rgba(139, 0, 0, 0.08); } 

/* GRID PRODUCT */
.grid_product { width: 100%; display: grid; grid-template-columns: repeat(4, calc((100% + 20px) / 4 - 20px)); grid-gap: 20px; } 

/* Search */ 
li.li_search { flex: unset !important; width: 215px !important; margin-left: 0; } 
.search { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; background: #fff; overflow: hidden; border: none; border-radius: 100px; } 
.search input { width: calc( 100% - 35px ); height: 35px; outline: none; background: transparent; font-size: 13px; color: #000; border-radius: 0; padding: 0 0 0 12px; border: none; border-right: none; } 
.search p { border: none; float: left; width: 35px; height: 35px; cursor: pointer; margin: 0px; color: #000; display: flex; align-items: center; justify-content: center; background: transparent; transition: all .3s ease; } 
.search p:hover { background: var(--color-dark-red); transition: all .3s ease; } 
.search input::-webkit-input-placeholder { color: #B2B0B0; } 
.search input:-moz-placeholder { color: #B2B0B0; } 
.search input::-moz-placeholder { color: #B2B0B0; } 
.search input:-ms-input-placeholder { color: #B2B0B0; } 

/* WRAP CATEGORY TABS */
.category_tabs { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 20px; margin-bottom: 25px; } 
.tabs__item { display: block; line-height: normal; padding: 12px 20px; font-size: 15px; user-select: none; font-family: 'font4'; font-weight: bold; cursor: pointer; text-transform: uppercase; transition: all .3s ease; border-radius: 8px; border: 1px solid #A5A5A5; background: linear-gradient(180deg, #FFF 0%, #EDEDED 100%); } 
.tabs__item:hover, .tabs__item.active { background: var(--c2); border-color: var(--c2); color: #fff; transition: all .3s ease; } 
.show_category { display: block; position: relative; } 
.wrap_splistnb { display: block; position: relative; margin: 60px 0; } 

/* PRODUCT ITEM */
.sp__item { display: block; border: 1px solid #CACACA; background: #FFF; transition: all .2s ease; } 
.sp__images { position: relative; border-radius: 0; overflow: hidden; margin: -1px; } 
.sp__img { transition: all 0.2s linear; display: block; } 
.sp__discount { font-size: clamp(10px, 1vw, 13px); background: var(--c1); line-height: normal; color: #fff; display: inline-block; position: absolute; right: 5px; top: 5px; z-index: 1; border-radius: 5px; padding: 2.5px 4px; } 
.sp__addcart { display: block; width: 100%; position: absolute; left: 0; bottom: 0; text-align: center; background: var(--c1); color: #fff; padding: 0.5rem; font-weight: bold; text-transform: uppercase; transform: translateY(100%); transition: all .3s ease; cursor: pointer; font-size: clamp(9px, 4vw, 13px); line-height: normal; } 
.sp__txt { display: block; width: 100%; text-align: left; padding: 18px 15px; } 
.sp__name { display: block; } 
.sp__name h3 { font-weight: bold; font-size: 16px; color: #000000; text-transform: uppercase; margin-bottom: 15px; transition: all 0.2s linear; line-height: normal; font-family: 'font4'; } 
.sp__name:hover h3 { color: var(--c1); transition: all 0.2s linear; } 
.sp__price { font-size: 14px; color: #4D4D4D; text-transform: inherit; line-height: normal; } 
.sp__price_old { font-weight: 400; text-decoration: line-through; margin-left: 5px; font-size: 13px; color: #333; } 
.sp__price span { font-weight: bold; color: var(--c1); } 
.sp__price_new span { vertical-align: super; font-size: 12px; margin-left: 6px; } 
.sp__item:hover .sp__addcart { transform: translateY(0); transition: all .3s ease; } 
.sp__cart { display: block; margin-top: 12px; } 
.sp__bottom { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 12px; } 
.sp__info { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 6px; } 
.sp__info b { font-weight: bold; font-family: 'font4'; color: var(--c2); } 
.sp__info span { color: #444; } 
.sp__item:hover { border-color: var(--c2); transition: all .2s ease; } 
 
/* WRAP TOP */
.top { display: block; width: 100%; position: relative; background: var(--c1); } 
.flex_top { width: 100%; display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; align-items: center; height: 40px; z-index: 1000; border-radius: 0; position: relative; } 
.top__item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } 
.top__icon { flex-shrink: 0; margin-right: 8px; display: flex; align-items: center; } 
.top__txt { line-height: normal; font-size: 14px; color: #4D4D4D; font-family: 'font3'; } 
.top__slogan { display: block; width: 100%; height: 40px; line-height: 42px; color: #fff; text-transform: inherit; font-size: 15px; text-align: center; font-weight: 300; } 

/* WRAP HEADER */
.header { width: 100%; position: relative; z-index: 999; background-color: #fff; background-image: url(../imgs/bg_header.jpg); background-size: contain; background-position: right bottom; background-repeat: no-repeat; } 
.flex_header { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 140px; } 
.h_right { flex-shrink: 0; } 
.box_hotline { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } 
.hl__icon { flex-shrink: 0; margin-right: 12px; font-size: 40px; color: var(--c1); } 
.hl__txt { display: block; } 
.hl__txt span {font-size: 16px;color: #111;line-height: normal;margin-bottom: 0;display: block;font-weight: normal;} 
.hl__txt p {margin: 0;font-size: 24px;color: #E30000;line-height: normal;font-family: 'font6';} 
.h_banner { flex-shrink: 0; } 
.h_banner a { display: block; } 
.h_logo { display: block; width: 145px; } 
 
/* Menu */
.menu { position: sticky; width: 100%; top: 0; z-index: 1000; transition: all 0.2s linear; background: var(--c1); } 
.flex_menu { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: auto; transition: all 0.2s linear; } 
.horizontal_menu { position: relative; background: var(--c1); display: block; max-width: 100%; flex: 1; } 
.horizontal_menu ul { width:100%; padding:0px; margin:auto; list-style:none; } 
.horizontal_menu ul.bg_menu { position: relative; margin: 0 !important; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; width: 100% !important; transition: all .3s ease; } 
.horizontal_menu ul li { position: relative; z-index: 99; width: auto; flex: none; } 
.horizontal_menu ul li a { display:block; position:relative; z-index:1; text-align:center; text-decoration:none!important; } 
.horizontal_menu ul li ul { position: absolute; min-width: 200px; max-width: 230px; width: max-content; background: var(--c1); box-shadow: 0 3px 11px 0 rgba(0,0,0,0.1); -webkit-transform: perspective(600px) rotateX(-90deg); transform: perspective(600px) rotateX(-90deg); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; opacity: 0; visibility: hidden; transition: all .3s; } 
.horizontal_menu ul li:hover > ul { -webkit-transform:perspective(600px) rotateX(0); transform: perspective(600px) rotateX(0); -webkit-transform-origin:0 0 0; opacity:1; visibility:visible; transition: all .4s; } 
.horizontal_menu ul li ul li a { text-align:left; border-bottom:1px solid rgba(255,255,255,0.2); } 
.horizontal_menu ul li ul li:last-child > a { border-bottom:0px; } 
.horizontal_menu ul li ul li a .h2 { font-size: 14px; padding: 8px 12px; position: relative; height: unset !important; line-height: unset !important; color: #fff; font-weight: 600; margin: 0; } 
.horizontal_menu .h2 svg { width: 25px; height: 25px; margin-top: -6px; } 
.horizontal_menu ul li ul li a .h2::before { position: absolute; content: ''; width: 3px; height: 0; background-color: yellow; left: 0; top: 0; transition: height .3s ease; background-image: none; } 
.horizontal_menu ul li a .h2 { position: relative; font-size: 15px; color: #fff; margin: 0; padding: 0; height: 45px; line-height: 47px; text-transform: uppercase; font-weight: bold; transition: all .3s ease; font-family: Tahoma; } 
.horizontal_menu ul li:hover a .h2::after {height: 2px;transition: all .2s ease;} 
.horizontal_menu ul li a .h2::after {position: absolute;content: '';left: 0;bottom: 0;width: 0;height: 2px;transition: all .2s ease;z-index: 1;border-radius: 0;background: var(--c3);} 
.horizontal_menu ul li a.active .h2, .horizontal_menu ul li:hover > a .h2 { transition: all .3s ease; color: var(--c3); } 
.horizontal_menu ul ul li a.active .h2, .horizontal_menu ul ul li:hover > a .h2 { transition: all .3s ease; color: #fff; background: #fff !important; } 
.horizontal_menu ul ul li:hover > a .h2 { background: #fff; color: #000; } 
.horizontal_menu ul li a.active .h2::after, .horizontal_menu ul li a.active .h2::before {width: 100%;transition: all .3s ease;} 
.horizontal_menu ul li:hover a .h2::after, .horizontal_menu ul li:hover a .h2::before { width: 100%; transition: all .3s ease; } 
.horizontal_menu ul li a.active .h2::before,
.horizontal_menu ul li a:hover .h2::before,
.horizontal_menu ul li a.active .h2::after,
.horizontal_menu ul li a:hover .h2::after { transition: all .3s ease; opacity: 1; } 
.horizontal_menu ul li ul li a .h2::after { display: none; } 
.horizontal_menu ul li ul ul { left: 100%; top: 0; } 
.horizontal_menu ul ul li { margin-left: 0; } 

.vertical_menu { width: 280px; background: #000; color: #fff; height: 45px; display: flex; align-items: center; justify-content: center; position: relative; margin-right: 10px; } 
.vmenu_scroll { height: 355px; width: 100%; position: absolute; left: 0; top: calc( 100% + 0px); z-index: 10; background: #ffffff; padding: 0; transition: all .2s ease; opacity: 1; visibility: visible; border: 1px solid #cccccc; border-top: none; } 
.vmenu_list { max-height: 355px; width: 100%; padding: 0; position: unset !important; height: max-content; overflow: unset; margin: 0; } 
.vmenu_title { display: flex; width: 100%; height: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0 20px; gap: 10px; color: #fff; transition: all .2s ease; } 
.vmenu_title:hover { color: var(--c2); transition: all .2s ease; } 
.vmenu_title span { font-size: 15px; line-height: normal; font-weight: bold; text-transform: uppercase; } 
.vmenu_title i { font-size: 16px; } 
.vertical_menu.unactive .vmenu_scroll, .vertical_menu.page .vmenu_scroll { opacity: 0; visibility: hidden; } 
.vertical_menu:hover .vmenu_scroll, .vertical_menu.unactive:hover .vmenu_scroll { opacity: 1; visibility: visible; transition: all .1s ease; } 
.vmenu_list li { list-style: none; position: unset !important; width: 100%; padding: 0; margin: 0; } 
.vmenu_list li a { font-size: 15px; color: #333333; line-height: normal; padding: 12px 18px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px dashed #cccccc; } 
.vmenu_list ul { position: absolute; width: 100%; left: 100% !important; height: calc( 100% + 2px ); top: -1px !important; border-radius: 0; background: #fff; margin: 0; list-style: none; padding: 0; border: 1px solid #cccccc; display: none; } 
.vmenu_list ul { height: auto; min-height: calc( 100% + 2px ); } 
.vm__item { display: flex !important; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 10px; } 
.vm__item i { margin-right: -5px; } 
.vm__item > span { flex: 1; } 
.vm__icon { width: 20px; } 
.vm_active { background: #33333311; color: var(--c1) !important; } 
.vmenu_list.isScroll { overflow: scroll !important; } 
.vmenu_list::-webkit-scrollbar { width: 2px; height: 0; } 

/* FOOTER */
.footer { width: 100%; position: relative; background: #f1f3f4; } 
.footer_main { width: 100%; padding: 60px 0 60px; background: var(--c1); } 
.flex_footer { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; } 
.footer_title { font-size: 16px; color: #fff; line-height: normal; font-family: 'font4'; font-weight: bold; text-transform: uppercase; margin-bottom: 15px; } 
.ft_line { width: 45px; height: 3px; background: #fff; margin-bottom: 25px; display: block; } 
.ft_name { font-size: clamp(16px, 4vw, 24px); color: #fff; line-height: normal; text-transform: uppercase; font-family: 'font3'; font-weight: bold; margin-bottom: 15px; } 
.ft_desc { font-size: 35px; color: #FED700; margin-bottom: 5px; line-height: normal; text-transform: uppercase; font-weight: bold; font-family: 'font3'; } 
.ft_txt { width: 100%; font-size: clamp(14px, 4vw, 15px); color: #fff; line-height: 1.8; font-weight: normal; margin-bottom: 0; } 
.ft_txt p a { color: 000; } 
.fcol1 { width: 45%; } 
.fcol2 { width: 20%; } 
.fcol3 { width: 29%; } 
.footer-ul { list-style: none; padding: 0px; margin: 0px; padding-left: 0; padding-top: 0; } 
.footer-ul li a:hover { color: yellow !important; transition: all .3s ease; } 
.footer-ul li { margin-bottom: 15px; list-style: none; color: #fff; list-style-position: inside; } 
.footer-ul li a { transition: all .5s ease; color: #ffffff; font-size: 14px; } 
.footer-ul li a:hover { color: rgb(233, 0, 0); transition: all .5s ease; } 
.footer-ul li:last-of-type { border: none; } 
#bottom { width: 100%; background: var(--c1); } 
.flex_bottom { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; align-items: center; font-size: clamp(8px, 3vw, 14px); color: #fff; height: 70px; border-top: 1px solid rgba(255, 255, 255, 0.50); font-weight: 300; } 
.copyright span { font-weight: 400; color: #fff; } 
.ft_mxh { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 20px; } 
.ft_mxh a { display: block; margin: 0; transition: all .5s ease; overflow: hidden; } 
.ft_mxh a:hover { transform: rotate(10deg); transition: all .5s ease; } 
.fmaps { width: 100%; height: 500px; } 
.fmaps #footer-map { width: 100%; height: 100%; } 
.fmaps #footer-map iframe { width: 100%; height: 100%; } 

/* WRAP TITLE */
.wrap_title { width: 100%; text-align: center; margin-bottom: 25px; position: relative; padding-bottom: 20px; } 
.title_main { font-size: clamp(22px, 4vw, 36px); color: var(--c1); margin: 0; font-weight: normal; text-transform: uppercase; line-height: normal; font-family: 'font2'; } 
.title_img { display: block; margin: 2px 0; } 
.title_desc { font-size: clamp(12px, 4vw, 14px); color: var(--text); padding-bottom: 0; margin-top: 8px; font-family: 'font1'; } 
.wrap_title::before { position: absolute; content: ''; left: 50%; bottom: 0; width: 70px; height: 2px; background: var(--c1); transform: translateX(-50%); } 
.wrap_title.text-white::before { background: #fff; } 

/* WRAP SPNB */
.wrap_spnb { width: 100%; margin: 60px 0; } 
.btn_viewmore { display: block; margin: 25px auto 0; width: max-content; background: var(--c1); line-height: normal; padding: 10px 20px; color: #fff; border-radius: 3px; font-size: 15px; transition: all .3s ease; } 
.btn_viewmore:hover { background: #000; color: #fff; transition: all .3s ease; } 

/* WRAP ALBUM */
.wrap_album { width: 100%; margin: 60px 0; } 
.grid_album { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 9px; } 
.ab__item.ab1 { grid-column: 1 / 2; grid-row: 1 / 4; } 
.ab__item.ab2 { grid-column: 1 / 2; grid-row: 4 / 8; } 
.ab__item.ab3 { grid-column: 2 / 3; grid-row: 1 / 8; } 
.ab__item.ab4 { grid-column: 3 / 4; grid-row: 1 / 5; } 
.ab__item.ab5 { grid-column: 3 / 4; grid-row: 5 / 8; } 
.ab__item { display: block; border-radius: 10px; overflow: hidden; } 
.ab__img { display: block; width: 100%; height: 100%; } 
.ab__img img { display: block; width: 100%; height: 100%; object-fit: cover; } 

/* WRAP TEMPLATE */
.wrap_tempalte { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } 
.col_category { width: 260px; position: sticky; top: 80px; } 
.col_content { width: calc( 100% - 260px - 20px ); position: sticky; top: 80px; } 
.col_full { width: 100%; } 
.col_content .grid_product { grid-template-columns: repeat(3, calc((100% + 20px) / 3 - 20px)); grid-gap: 20px; } 
.box_category { display: block; } 
.category_title { display: block; text-align: center; background: var(--c1); line-height: normal; color: #fff; font-weight: bold; text-transform: uppercase; padding: 10px 20px; font-size: 15px; } 
ul.category_list { display: block; position: relative; padding: 0; list-style: none; border: 1px solid #3333; border-top: none; margin: 0; } 
ul.category_list li { padding: 10px; border-bottom: 1px solid #33333314; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 5px; position: relative; } 
ul.category_list li li { padding-right: 0; } 
ul.category_list li::before { position: absolute; content: ''; left: -1px; top: 0; width: 0.1rem; height: 0; background: var(--c1); transition: all .3s ease; } 
ul.category_list ul li::before { display: none; } 
ul.category_list li.active::before { height: 100%; transition: all .2s ease; } 
ul.category_list li.active { background: #33333308; padding-bottom: 10px; } 
ul.category_list ul li:last-of-type { padding-bottom: 0; } 
ul.category_list ul li.active { background: transparent; } 
ul.category_list li span { width: 15px; height: 15px; line-height: 15px; background: #3333; cursor: pointer; user-select: none; font-size: 10px; border-radius: 3px; text-align: center; transition: all .3s ease; display: none; } 
ul.category_list li a { display: block; font-size: 15px; font-weight: normal; color: #333; flex: 1; transition: all .3s ease; } 
ul.category_list ul a { font-weight: 400; } 
ul.category_list li a:hover { transform: translateX(3px); color: var(--c1); transition: all .3s ease; } 
ul.category_list li.active > a { color: var(--c1); font-weight: bold; transition: all .2s ease; } 
ul.category_list li.active > span { background: var(--c1); transition: all .3s ease; } 
ul.category_list li.active > span i { color: #fff; } 
ul.category_list li.active > span i.fa-plus:before { content: "\f068"; transition: all .3s ease; } 
ul.category_list li ul { width: 100%; display: none; padding: 0; } 
ul.category_list li:last-of-type { border-bottom: none; } 

/* WRAP DỰ ÁN NEW */
.wrap_spnew { display: block; margin: 60px 0; } 

/* WRAP ABOUT */
.wrap_about { width: 100%; padding: 110px 0 80px; background-image: url(../imgs/bg_about.jpg); background-position: top center; background-size: cover; } 
.flex_about { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: center; } 
.about_content { width: 47.7%; position: relative; } 
.about_images { width: 46%; position: relative; z-index: 10; padding-left: 70px; } 
.about_slogan { display: block; position: absolute; top: 48%; transform: translateY(-50%); left: -15px; z-index: 10; color: #fff; width: max-content; height: max-content; writing-mode: vertical-rl; text-orientation: mixed; font-size: 40px; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: 5.6px; text-transform: uppercase; font-family: 'font5'; } 
.about__wc { color: #FFF; font-family: tahoma; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 15px; } 
.about__name { font-size: 40px; color: var(--c3); font-family: 'font2'; font-weight: normal; text-transform: uppercase; line-height: normal; margin-bottom: 25px; } 
.about__desc { color: #FFF; font-family: 'font4'; font-size: 16px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 30px; } 
.about__content { color: #FFF; font-family: Tahoma; font-size: 15px; font-style: normal; font-weight: 400; line-height: 2; margin-bottom: 50px; } 
.about__img { display: block; max-width: 470px; position: relative; } 
.about__img::before { position: absolute; content: ''; left: 40px; top: -40px; width: 100%; height: 100%; border: 6px solid var(--c3); z-index: 10; pointer-events: none; } 
.about__img::after { position: absolute; content: ''; right: -80px; top: -80px; width: 143px; height: 143px; background-image: url(../imgs/bg_about2.svg); background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; } 
.about__link { display: inline-flex; padding: 14px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 8px; background: var(--c1); color: #fff; text-align: center; font-family: 'font4'; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; transition: all .2s ease; position: relative; } 
.about__link::before { position: absolute; content: ''; left: calc( 100% + 25px ); top: 0px; width: 57px; height: 39px; background-image: url(../imgs/bg_about3.svg); -webkit-animation: moveleftbounce 3s linear infinite; animation: moveleftbounce 3s linear infinite; } 
.about__link:hover { background: var(--c3); color: #000; transition: all .2s ease; } 
@keyframes moveleftbounce { 
 0% { -webkit-transform: translateX(0px); transform: translateX(0px) translateY(0) rotate(10deg) } 
 50% { -webkit-transform: translateX(30px); transform: translateX(20px) translateY(-5px) rotate(-10deg) } 
 100% { -webkit-transform: translateX(0px); transform: translateX(0px) translateY(0) rotate(10deg) } 
 }

/* WRAP POST */
.wrap_post { width: 100%; padding: 60px 0; } 
.flex_post { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-between; align-items: flex-start; position: relative; } 
.post_left { width: calc( ( 100% - 40px ) / 2 ); } 
.post_right { width: calc( ( 100% - 40px ) / 2 ); } 
.post_title_left { color: var(--c1); font-family: 'font2'; font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; position: relative; padding-bottom: 20px; margin-bottom: 20px; } 
.post_title_left::before { position: absolute; content: ''; left: 0; bottom: 0; width: 70px; height: 2px; background: var(--c1); } 
.post_title_right { color: var(--c1); font-family: 'font2'; font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; position: relative; padding-bottom: 20px; margin-bottom: 20px; text-align: right; } 
.post_title_right::before { position: absolute; content: ''; right: 0; bottom: 0; width: 70px; height: 2px; background: var(--c1); } 
.flex_post::before { position: absolute; content: ''; left: 50%; top: 0; width: 1px; height: 100%; background: #CACACA; } 

.slick_newsnb .slick-slide { margin-bottom: 40px; } 
.n__items { display: flex; width: 100%; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 20px; } 
.n__img { flex-shrink: 0; margin-right: 0; } 
.n__txt { flex: 1; } 
.n__name { color: #111; font-family: 'font4'; font-size: 16px; font-style: normal; font-weight: 700; line-height: 26px; margin-bottom: 10px; } 
.n__name:hover { color: var(--c1); transition: all .3s ease; } 
.n__time { color: #808080; font-family: Tahoma; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; margin-bottom: 10px; } 
.n__desc { color: #444; font-family: Tahoma; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.8; margin-bottom: 12px; } 
.n__items.even .n__img { order: 5; margin-left: 0; margin-right: 0; } 
.n__link { color: var(--c1); font-family: 'font4'; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; transition: all .2s ease; } 
.n__link:hover { color: var(--c2); transition: all .2s ease; } 

/* WRAP NEWSLETTER */
.wrap_newsletter { display: block; padding: 60px 0; background-image: url(../imgs/bg_nlt.jpg); background-size: cover; background-position: center; } 
.nlt_desc { color: #fff; text-align: center; font-family: Tahoma; font-size: 14px; font-style: normal; font-weight: 400; line-height: 26px; max-width: 615px; margin: 0px auto; } 

.nlt_form {display: block;margin-top: 20px;} 

.grid_nlt {width: 100%;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 15px;margin-bottom: 25px;} 
.grid_nlt input { height: 50px; border: none; padding: 0 10px 0 50px; } 
.grid_nlt input:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 2; background: url(../imgs/name.svg) 15px center no-repeat, #fff; } 
.grid_nlt input:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; background: url(../imgs/email.svg) 15px center no-repeat, #fff; } 
.grid_nlt input:nth-child(3) { grid-column: 1 / 2; grid-row: 2 / 3; background: url(../imgs/phone.svg) 15px center no-repeat, #fff; } 
.grid_nlt input:nth-child(4) { grid-column: 2 / 3; grid-row: 2 / 3; background: url(../imgs/address.svg) 15px center no-repeat, #fff; } 
.grid_nlt textarea {grid-column: 3 / 5;grid-row: 1 / 3;background: url(../imgs/content.svg) 15px 15px no-repeat, #fff;padding: 15px 10px 10px 50px;border: none;resize: none;} 
.btn_form_sm { width: max-content; margin: 0px auto; display: block; padding: 15px 30px; border-radius: 8px; background: var(--c1); color: #fff; text-align: center; font-family: 'font4'; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; border: none; transition: all .2s ease; } 
.btn_form_sm:hover { background: var(--c2); color: var(--c3); transition: all .2s ease; }