.title-list { background: var(--color-main); border-radius: 0 50px 50px 0; padding: 6px 20px; } 
.title-list span { font-family: "Impact"; font-size: 25px; color: #fff; } 
.title-product-cat li a { font-family: var(--font-regular); font-size: 15px; color: #000; padding: 10px 30px; text-transform: capitalize; } 
.title-product-cat li a:hover { color: var(--color-main); font-family: var(--font-bold);  cursor: pointer;} 
.title-product-cat li .active { border-left: 1px solid #8A8A8A; border-right: 1px solid #8A8A8A; color: #056C37; font-family: var(--font-bold); } 
.title-product-cat li{margin-bottom: 7px;}
.title-product-list li a { font-family: var(--font-regular); font-size: 15px; color: #000; padding: 10px 30px; text-transform: capitalize; } 
.title-product-list li a:hover { color: var(--color-main); font-family: var(--font-bold); cursor: pointer;} 
.title-product-list li{margin-bottom: 7px;}
.title-product-list li .active { position: relative; color: #056C37; font-family: var(--font-bold); border-left: 1px solid #8A8A8A; border-right: 1px solid #8A8A8A;} 
/* .title-product-list li .active::after{position: absolute;content: ""; border-left: 1px solid #8A8A8A; left: 0;bottom: 10px;height: 37px;} */
.br-bottom{border-bottom: 1px solid #757474;}


/* Standing */
.name-standing { font-size: 16px; } 
.desc-standing { font-size: 14px; color: #4D4D4D; line-height: 24px; margin: 10px 0 20px 0; } 
.box-standing { background: #ECE7E8; padding: 10px; border: 1px solid #3E1415; border-radius: 10px; margin-bottom: 30px; } 
.main-outstanding .slick-slide { margin-right: 30px; } 
/* */
.line-bottom { position: relative; margin-bottom: 10px !important; padding-bottom: 5px; } 
.line-bottom::after { position: absolute; content: ""; border-bottom: 1px solid #fff; width: 30px; left: 0; bottom: 0; } 
/* Process */
.wrap-process { background: background-size: 100% 100%; } 
.main-process { position: relative; z-index: 1; } 
.items-process { padding: 0 15px 15px 15px; position: relative; } 
.items-process::after { position: absolute; content: ""; border-left: 1px dashed #7a6416; border-right: 1px dashed #7a6416; border-bottom: 1px dashed #7a6416; height: 155px; left: 0; right: 0; bottom: 0; } 
.name-process { font-family: var(--font-bold); font-size: 16px; color: var(--color-main); margin: 15px 0 5px 0; } 
.desc-process .text-split { font-family: var(--font-regular); font-size: 14px; line-height: 25px; -webkit-line-clamp: 2; } 
.image-process { width: 100px; height: 100px; text-align: center; background: var(--bg-gradient); display: flex; flex-direction: column; justify-content: center; margin: auto; text-align: center; border-radius: 50%; align-items: center; position: relative; } 
.image-process::after { animation: rotation 10s infinite linear; position: absolute; content: ""; border: 1px dashed #fff; border-radius: 50%; width: 90%; height: 90%; left: 0; right: 0; bottom: 0; top: 0; text-align: center; margin: auto; } 
@keyframes rotation { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(359deg); } 
 }
/* App */
.wrap-app { background: var(--color-main); background-size: cover; height: 340px; margin-bottom: 140px; } 
.wrap-app .line-text img { filter: brightness(0) saturate(100%) invert(94%) sepia(100%) saturate(25%) hue-rotate(329deg) brightness(107%) contrast(107%); } 
/*Feedback*/
.items-feedback { background-size: 100% 100%; padding: 0 30px 40px 30px; } 
.wrap-feedback { background-size: 100% 100%; } 
.image-feedback { text-align: center; } 
.filter-white img { filter: brightness(0) saturate(100%) invert(96%) sepia(52%) saturate(5%) hue-rotate(336deg) brightness(106%) contrast(100%); } 
.wrap-feedback .owl-stage { padding-top: 50px; } 
.image-feedback { margin-top: -50px; } 
.name-feedback { margin-top: 15px; } 
.name-feedback .text-split:hover { color: var(--color-hover); } 
.name-news-R .text-split:hover { color: var(--color-hover); } 
.name-feedback .text-split { -webkit-line-clamp:1; font-size: 17px; text-align: center; } 
.desc-feedback .text-split { -webkit-line-clamp: 4; font-size: 15px; line-height: 24px; text-align: center; margin-bottom: 20px; } 
.content-feedback { list-style: 27px; } 
#video-select { height: 87%; position: relative; } 
.video-main { height: 100%; } 
.listvideos { width: 100%; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; } 
/* certificate */
.main-certi{background: url(../images/set/bg-certi.png) no-repeat;background-position: left -70px;}
.certi-R {max-width: 60%; width: 60%;margin-right: -10%;max-height: 400px !important;}
.certi-R .slick-slide{ text-align: end !important;}
.certi-R .slick-track{max-height: 400px !important;}
.image-certi{border-radius: 15px;}
.image-certi img{border-radius: 15px; border: 5px solid var(--color-main);}

/*  */
.wrap-argency{background: url(../images/set/bg-agency.png) no-repeat; background-size: 100% 100%; height: 565px;display: flex;}
.box-argency{max-width: 450px;    margin: auto 100px auto auto;}
.items-argency{background: var(--color-main);width: 190px;height: 140px; display: flex; flex-direction: column;justify-content: center;align-items: center;margin: auto;padding: 10px;}
.content-argency{border: 1px solid #fff;padding: 10px;}
.name-argency{font-family: "Impact";font-size: 26px;}
.desc-argency{font-family: var(--font-regular);font-size: 14px; line-height: 20px;color: #fff;text-align: center;}

/* News */
.wrap-news-index { background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 100%); } 
.items-news { padding: 0 15px; } 
.name-news-R .text-split { -webkit-line-clamp: 2; font-size: 15px; color: #000; margin-top: 15px; } 
.name-news-L { margin: 20px 0; } 
.desc-news-R .text-split { font-size: 14px; line-height: 22px; color: #333333; } 
.read-news {margin: auto; text-align: center;} 
.read-news a { font-size: 14px; color: var(--color-main); font-style: italic; text-transform: capitalize;} 
.read-news a:hover { color: var(--color-hover); } 

.news--time { margin: 5px 0; text-align: justify; font-family: var(--font-regular); font-size: 13px; font-style: italic; font-weight: 400; line-height: 22px; } 
.news--time svg { margin-right: 5px; } 
.items-col-L .read-more { margin-top: 15px; } 
/* .news-index-L .slick-track .slick-slide:nth-child(2n) .row { flex-direction: row-reverse !important; } */
/* Video */
.name-video-index { left: 0; right: 0; bottom: 0; margin: auto; background: #00000082; padding: 15px; } 
.name-video-index .text-split { -webkit-line-clamp: 1; font-family: var(--font-regular); font-size: 15px; color: var(--color-defaut); } 
.wrap-video-index { background: #f2f2f2; } 
/* Album */
.wrap-album { } 
.main-album { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(9, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } 
.image-album:nth-child(1) { grid-area: 1 / 1 / 4 / 4; } 
.image-album:nth-child(2) { grid-area: 1 / 4 / 4 / 6; } 
.image-album:nth-child(3) { grid-area: 1 / 6 / 4 / 8; } 
.image-album:nth-child(4) { grid-area: 4 / 5 / 7 / 8; } 
.image-album:nth-child(5) { grid-area: 4 / 3 / 7 / 5; } 
.image-album:nth-child(6) { grid-area: 4 / 1 / 7 / 3; } 
.image-album:nth-child(7) { grid-area: 7 / 1 / 10 / 4; } 
.image-album:nth-child(8) { grid-area: 7 / 4 / 10 / 6; } 
.image-album:nth-child(9) { grid-area: 7 / 6 / 10 / 8; } 

/* Intro */
/* .wrap-intro { background: url(../images/set/bg-intro.png) repeat; } */
.items-intro { position: relative; z-index: 1; } 
.title-intro { font-family: var(--font-regular); font-size: 20px; color: var(--color-desc); font-weight: 400; letter-spacing: 2.5px; text-align: left; } 
.name-intro p { font-family: var(--font-regular); font-size: 39px; color:#2E9A28; margin-bottom: 0; } 
.name-intro span { font-family: var(--font-regular); font-size: 55px; margin-top: -15px !important; display: block; } 
.desc-intro { font-family: var(--font-regular); text-align: justify; font-size: 15px; font-style: normal; font-weight: 400; line-height: 27px; /* 180% */
 -webkit-line-clamp: 8; margin-top: 10px; } 
 .title-R-intro span { font-size: 30px; } 
.intro-L { padding-right: 25px; } 

/* Read more */
.read-more { width: 135px;
    border-radius: 30px;
    height: 42px;
    line-height: 42px;
    border: solid 1px #A7A6A6;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s;
    text-align: center;
    margin: 20px auto 0 auto; 
} 
.read-more:hover { border: none; }
/* .read-more a { font-size: 15px; color: var(--color-defaut); font-family: var(--font-regular); } 
.read-more:hover a { color: var(--color-main2) !important; } 
  */
/* Critial */
.wrap-crit { background: url(../images/set/bg-vct.png) no-repeat; background-size: 100% 100%; } 
.box-crit { width: 35%; margin: 30px 0; } 
.content-crit{width: 255px;}
.items-crit { position: absolute; left: 0; right: 0; bottom: 0; } 
.box-crit:nth-child(2) { justify-content: end !important; flex-direction: row-reverse !important; } 
.box-crit:nth-child(2) .image-crit{margin-left: 0 !important; margin-right: 15px;}
.box-crit:nth-child(4) { justify-content: end !important; flex-direction: row-reverse !important;} 
.box-crit:nth-child(4) .image-crit{margin-left: 0 !important; margin-right: 15px;}

.image-crit { width: 105px; height: 105px; background: var(--color-main); border-radius: 50%; display: flex; justify-content: center; } 
.name-crit .text-split { font-size: 20px; -webkit-line-clamp: 1; } 
.desc-crit .text-split { font-size: 14px; -webkit-line-clamp: 2; color: #111111; line-height: 22px; } 
/* Service */
.wrap-service {background-size: cover; } 
.name-service { margin-top: 15px; } 
.name-service a { font-size: 17px; -webkit-line-clamp: 1; } 
.desc-service { margin: 10px 0; } 
.desc-service a { font-size: 14px; line-height: 23px;color: #333333; } 
/* Project */
.items-project { left: 0; right: 0; bottom: 0; background: #00000038; opacity: 0; padding: 60px 40px; text-align: center; border: 10px solid #919191b0; height: 100%; width: 100%; } 
.image-project:hover .items-project { opacity: 1; transition: 0.5s all ease; animation: totop 0.8s; } 
.name-project .text-split { -webkit-line-clamp: 1; font-size: 24px; } 
.desc-project .text-split { -webkit-line-clamp: 6; text-align: justify; line-height: 24px; font-size: 15px; } 
.desc-project { margin-top: 15px; } 
/* Question */
.wrap-question { background: var(--color-main); background-size: cover; } 
.main-faqs { padding-top: 30px; } 
.title-question { width: 265px; height: 50px; line-height: 50px; text-align: center; color: var(--color-defaut); font-size: 16px; margin: 25px auto; border-radius: 20px; background: #0cb3f5; } 
.box-faqs { background-color: var(--color-defaut); border:none; outline: none; padding: 15px 20px 15px 20px; font-size: 18px; color: #333; cursor: pointer; transition: background-color 0.2s linear; margin-bottom: 10px; border-radius: 15px; } 
button.accordion { font-family: var(--font-medium); width: 100%; border: none; text-align: left; background: var(--color-defaut); } 
button.accordion:after { content: ""; background: var(--color-main) no-repeat; float: right; width: 25px; height: 1px; margin-top: 10px; } 
button.accordion.is-open:after { background: var(--color-main) no-repeat; width: 25px; height: 25px; } 
button.accordion:hover,
button.accordion.is-open { color: var(--color-main); margin-bottom: 0 !important; } 
.accordion-content { background-color: white; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; font-family: "Mont_Regular"; color: #535353; font-size: 14px; font-style: italic; } 
.accordion-content { line-height: 25px; } 
/* Newsletter */
.form-contact { background-size: 100% 100%; } 
.form-contact .wrap-content { padding: 20px; } 
.main-form ::placeholder { color: #8f8f8f !important; font-family: var(--font-regular) !important; font-size: 13px !important; } 
.title-form div { font-size: 18px; } 
.title-form span { font-size: 13px; } 
.name--ft { font-size: 27px; font-family: var(--font-bold); line-height: 38px; } 
.name-ft { font-size: 40px; font-family: "Impact"; margin: 10px 0 15px 0;} 
.form-L { text-align: center; background: var(--color-defaut); padding: 30px; position: relative; z-index: 11; } 
.form-L::after { position: absolute; content: ""; background: var(--color-main); left: 0; right: 0; top: 0; bottom: 0; background-size: 100% 100%; width: 100%; height: 100%; } 
.form-title { font-family: var(--font-bold); font-size: 24px; } 
.validation-newsletter label { font-size: 15px; } 
.newsletter-slogan { color: #000; font-size: 13px; margin: auto auto 15px auto; font-family: var(--font-regular);; } 
.newsletter-input { position: relative; height: 42px; } 
.newsletter-input input { background: #fcfcfc; border: none !important; border-radius: 0 !important; } 
.col-content { padding: 0 5px !important; } 
.col-content textarea { height: 60px; background: #fcfcfc; border: 1px solid #cacaca; border-radius: 10px } 
/* .col-input { margin-bottom: 10px; } */
.newsletter-button { height: 42px; line-height: 42px; background: var(--color-main2); color: var(--color-defaut); } 
.newsletter-button:hover { background: var(--color-defaut); border: 1px solid var(--color-main); } 
.newsletter-button:hover input[type="submit"] { color: #000 !important; } 
.newsletter-button input[type="submit"] { text-transform: uppercase; font-weight: 500; color: var(--color-defaut); font-family: "Mont_Bold"; font-size: 14px; } 
.wrap-form .wrap-content::after { position: absolute; content: ""; background: var(--color-main); background-size: cover; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } 
.wrap-form .wrap-content::before { position: absolute; content: ""; background: var(--color-main); width: 300px; height: 100%; left: 0; top: 0; } 

.map_items { width: 100%;  padding: 15px; background: #f7f7f7; color: #000; border: 1px solid #ccc;} 
.map_items span { font-family: var(--font-regular); font-size: 14px; color: var(--color-desc); } 
.flex_map .active { background: var(--color-main) !important;  color: #fff; border: none;} 
.singletext { font-family: "Mont_Medium"; font-size: 16px; text-transform: capitalize; } 
 .hdanhmucdrops { position:relative; width: 270px; z-index:19; background-color: var(--color-main2); } 
 .fixed .hdanhmucdrops > .nicescl, .hdanhmucdrops.ver1 > .nicescl { display:none; top:100% } 
 .fixed .hdanhmucdrops:hover .nicescl { display: block; } 
 .hdanhmucdrops.ver1 > .nicescl { display:none; top:100% } 
 .hdanhmucdrops .title { display: block; line-height: 35px; height: 100%; cursor:pointer; font-size: 20px; text-transform:uppercase; text-align:center; color: #fff; font-family: 'UTMFacebook'; } 
 .click-icon-menu { height: 100%; margin-bottom: 0px; } 
 ::-webkit-scrollbar { width: 5px; height: 2px; } ::-webkit-scrollbar-track { background: #f1f1f1; } 
 ::-webkit-scrollbar-thumb { background: #888; } 
 ::-webkit-scrollbar-thumb:hover { background: #555; } 
 .click-icon-menu > span i:nth-child(1) { position: unset; } 
 .click-icon-menu span { height: 100%; width: 100%; padding: 7.5px 5px; font-family: "Mont_Bold"; font-size: 16px; color: #fff; } 
 .click-icon-menu span i { margin-right: 10px; margin-top: 0px; position: relative; color: #000000; } 
 .hdanhmucdrops ul { padding:0; margin:0; list-style:none; text-align:left; } 
 .hdanhmucdrops ul > li { padding:0 0% 0% 0%; } 
 .hdanhmucdrops ul > li.line { border-bottom: dashed 1px #D9D9D9!important; width: 100%; margin: 0 auto; } 
 .hdanhmucdrops .nicescl { box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25); position:absolute; box-sizing:border-box; width: 100%; height: auto; left: 0px; top: 100%; scrollbar-width: thin; background: #fff; margin: auto; margin-top: 0px; padding-top: 0px; border-top: none; } 
 .hdanhmucdrops ul.content { overflow:unset; font-size:13px; min-height: auto; padding: 5px 20px; } 
 .hdanhmucdrops ul li a { padding: 10px 0; line-height: 33px; transition: all 0s; position: relative; border-left: 4px solid transparent; display: -webkit-box; width: 100%; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } 
 .hdanhmucdrops li a i { margin-right: 10px; } 
 .hdanhmucdrops ul ul { top:0!important; -webkit-transform:scaleX(0); transform:scaleX(0); width:100%; display:none; position: absolute; left:calc(100% - 7px); left:-moz-calc(100% - 7px); left:-webkit-calc(100% - 7px); z-index: 9999; background: #DDBE9F; border-right: solid 1px #a7a4a4 !important } 
 .hdanhmucdrops ul ul li { position: relative; border-bottom: dashed 1px #6666; padding-left: 30px !important; } 
 .hdanhmucdrops ul > li:hover > ul { padding: 3px 0 !important; box-shadow: none !important; display:block; -webkit-animation:scale-up-hor-left .4s cubic-bezier(0.390,0.575,0.565,1.000) both; animation:scale-up-hor-left .4s cubic-bezier(0.390,0.575,0.565,1.000) both } 
 .hdanhmucdrops ul > li:last-child { border-bottom:none } 
 .hdanhmucdrops ul ul ul { left:100%; top:0!important } 
 .hdanhmucdrops i.right { position: absolute; right: 0px; top: 15px; font-size: 16px; } 
 .hdanhmucdrops i.left { font-size: 6px; margin-right: 10px; } 
 .hdanhmucdrops li:hover > a { color: #ff0000 !important; background: none !important; } 
 .hdanhmucdrops .fa-angle-right:before { font-size: 15px; } 
 .hdanhmucdrops li a img { margin-right: 10px; } 
 @-webkit-keyframes scale-up-hor-left { 
 0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 
 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 
 }
 @keyframes scale-up-hor-left { 
 0% { -webkit-transform: scaleX(0.4); transform: scaleX(0.4); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 
 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } 
 }
 .thanh-cuon { height: 100%; overflow-y: auto; } 
 .thanh-cuon::-webkit-scrollbar { width: 5px; } 
 .thanh-cuon::-webkit-scrollbar-track { background: #d2d0d0; } 
 .thanh-cuon { overflow-y: scroll; overflow-x: hidden; } 
 .thanh-cuon::-webkit-scrollbar { width: 5px; background: #d2d0d0; } 
 .thanh-cuon::-webkit-scrollbar-thumb { width : 5px; background: #6b6b6b; } 
 .thanh-cuon::-webkit-scrollbar-thumb:hover,
 .thanh-cuon::-webkit-scrollbar-thumb:active { width: 2px; } 
 .list-icon ul { list-style: none; padding-left: 0; margin-bottom: 0 !important; } 
 .list-icon ul li { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-size: 100% 100%; margin-right: 5px; }  /* .list-icon ul li img { filter: brightness(0) saturate(100%) invert(96%) sepia(52%) saturate(5%) hue-rotate(336deg) brightness(106%) contrast(100%); }  */
.box-product .i_left { position: absolute; height: 0; border-radius: 0 50px; width: 1px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.box-product .i_right { position: absolute; height: 0; width: 1px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.box-product .i_top { position: absolute; height: 1px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.box-product .i_bottom { position: absolute; height: 1px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.box-product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.box-product:hover .i_top { width: 100%; left: 0 } 
.box-product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.box-product:hover .i_bottom { width: 100%; right: 0; left: inherit } 
.title_search { font-family: var(--font-regular); text-transform: uppercase; font-size: 18px; background: var(--color-primary); color: #fff; padding: 5px; } 
.product { position: relative; padding: 10px 10px 0 10px; border: 1px solid #CFCFCF; border-radius: 10px; } 
.product:hover { border-radius: 0; } 
/* .product .i_left { position: absolute; height: 0; border-radius: 0 50px; width: 1px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 1px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 1px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 1px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease }  */
.product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.product:hover .i_top { width: 100%; left: 0 } 
.product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.product:hover .i_bottom { width: 100%; right: 0; left: inherit } 


.product .i_left { position: absolute; height: 0; border-radius: 0 50px; width: 1px; left: 0; top: 0; background: var(--color-main); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 1px; right: 0; bottom: 0; background: var(--color-main); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 1px; width: 0; right: 0; top: 0; background: var(--color-main); background: var(--color-main); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 1px; width: 0; left: 0; bottom: 0;  -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background: var(--color-main); }  


/* CSS cơ bản cho bảng */
.table-search { overflow: auto; } 
table { min-width: 1200px; border-collapse: collapse; max-width: 100%; margin: auto; } 
 .table_search tbody { overflow-x: auto; } 
 tr:nth-child(even) { background-color: #f2f2f2; } 
 th { background-color: #333; color: white; font-family: "Roboto_Bold"; } 
 th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } 
 tr:hover { background-color: #e0e0e0; }