/* @keyframe */
@keyframes spin {
	to { transform: rotate(360deg); }
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@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); }
}
@keyframes rotate {
	from { transform: rotate(0); }
	to { transform: rotate(360deg); }
}
@keyframes fadeup {
	from { opacity: 0; transform: translateX(-20px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-animation {
	0% { transform: scale3d(1, 1, 1); opacity: 0; }
	10% { transform: scale3d(1.1, 1.1, 1.1); opacity: 1; }
	100% { transform: scale3d(1.6, 1.6, 1.6); opacity: 0; }
}
@keyframes border-animation {
	0% { transform: scale3d(0.6, 0.6, 0.6); opacity: 0; }
	20% { transform: scale3d(1.2, 1.2, 1.2); opacity: 1; }
	100% { transform: scale3d(1.4, 1.4, 1.4); opacity: 0; }
}
:root { --color-main: #00983E; --color-hover: #F9ED0F; --color-text: #f00; --menu-border: rgb(255 255 255 / 20%); --menu-color: #fff; }
body { font-size: 14px; line-height: 1.5; font-family: "Montserrat"; }
.seo-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.w-clear:after { display: block; content: ""; clear: both; }
.max-width, .wrap-content { margin: 0px auto; max-width: 1200px; }
.container-custom { padding: 0px 10px; margin: 0px auto; }
img { max-width: 100%; display: inline-block; }
* { box-sizing: border-box; }
a { text-decoration: none; }
.social-plugin { display: flex; margin-top: 10px; }
.scale-img { overflow: hidden; }
.scale-img img, .scale-img picture { transition: all 0.5s; }
.scale-img:hover img, .scale-img:hover picture { transform: scale(1.1, 1.1); }
.hover-img { position: relative; overflow: hidden; display: block; }
.text-split { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }
.p-relative { position: relative; }

/* Transition All */
.transition, .btn-frame .kenit-alo-circle-fill, .control-owl button, .carousel-comment-media .carousel-control a span, .menu ul li a.has-child:after, .menu ul li ul, .menu ul li:hover > ul, .scale-img img, .scale-img:hover > img, .support-online .kenit-alo-circle-fill { transition: 0.3s all; }
.gutter-x-20 { --bs-gutter-x: 20px; }
.gutter-x-5 { --bs-gutter-x: 5px; }

/*   Header   */
.header { background: #fff; position: relative; z-index: 999; }
.flex-header { display: flex; justify-content: space-between; align-items: center; }
.header-cart { border: 1px solid var(--color-main); padding: 10px; border-radius: 5px; position: relative; color: var(--color-main); }
.header-cart:hover { color: #fed402; }
.header-cart i { font-size: 20px; }
.header-cart .count-cart { position: absolute; z-index: 999; color: #fff; background: #f00; border-radius: 50%; top: -10px; right: 20px; width: 20px; height: 20px; text-align: center; }
.menu-head { display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.menu-head a { color: #fff; }
.menu-head a:hover { color: #fed402; }
.line-head { background-color: #72b2fd; height: 32px; width: 1px; }

/* slideshow */
.slideshow { position: relative; }

/* Mmenu */
.offcanvas-body { flex-grow: 1; padding: 1rem 1rem; overflow: scroll; }
.offcanvas-body::-webkit-scrollbar { width: 4px; height: 4px; transition: all 1s; }
.offcanvas-body::-webkit-scrollbar-thumb { background-color: #0d6efd; border-radius: 5px; transition: all 1s; }
.offcanvas-body::-webkit-scrollbar-track { background: #fff; width: 4px; height: 4px; transition: all 1s; }
.btn-close-menu { position: absolute; right: 20px; top: 20px; }
.menu-mobile ul { padding: 0px; }
.menu-mobile ul li { position: relative; }
.menu-mobile ul li > span i { transition: transform 0.3s ease;    /* Adjust duration and easing as needed */ }

/* .menu-mobile ul li:last-child a{
border-bottom: none;
} */
.menu-mobile ul li a { display: block; padding-right: 30px; color: #333; font-size: 15px; padding: 10px 0px; border-bottom: 1px solid #f1f1f1; }
.menu-mobile ul li a i { margin-right: 10px; }
.menu-mobile ul li li a { font-weight: normal; }
.menu-mobile ul li a:hover { color: #f00; }
.menu-mobile ul li .scroll { position: absolute; right: 0px; top: 9px; background: #0253a4; font-size: 17px; line-height: 18px; height: 25px; color: #fff; width: 35px; border-radius: 5px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.menu-mobile ul li:hover { color: #f00; }
.menu-mobile ul ul li .scroll { background: none; color: #0253a4; }
.menu-mobile ul li ul { padding-left: 10px; }
.company { border-bottom: 1px solid #f1f1f1; padding-bottom: 10px; }
.company p { margin-bottom: 5px; font-size: 13px; }
.company p span { color: #333; font-weight: 700; }
.head-menu { display: flex; justify-content: center; flex-wrap: wrap; }
.head-menu img { max-width: 80px; }
.search-menu { width: 100%; position: relative; margin: 10px 0px; }
.search-menu input { width: 100%; background: #f5f5fa; border: 1px solid #f1f1f1; height: 40px !important; font-size: 13px; }
.search-menu p { position: absolute; right: 10px; bottom: 8px; }

/* Search */
.search { width: 50%; max-width: 293px; background: #fff; position: relative; border-radius: 25px; display: flex; justify-content: space-between; align-items: center; height: 40px; padding-left: 20px; }
.search input { width: calc(100% - 35px); border-radius: 10px; border: none; color: var(--noi_dung, #666); font-family: SVN-Poppins; font-size: 14px; font-style: normal; font-weight: 300; line-height: 20px;    /* 142.857% */ }
.search input:focus { border: none; box-shadow: none; }
.search label { height: 35px; cursor: pointer; text-align: center; font-size: 16px; background: rgb(15 30 54 / 10%); color: #fff; border-radius: 10px; margin-right: 3px; padding: 5px 10px; width: 35px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.search label i { font-weight: bold; color: #999; }
.box-search { padding: 10px; border-bottom: 1px solid #f1f1f1; display: flex; justify-content: space-between; align-items: center; }
.ds-item-search { width: calc(100% - 70px); }

/* Menu */
.search-res, .tab-menu { display: none; }
#hamburger { display: none; width: 35px; height: 23px; position: relative; cursor: pointer; }
#hamburger:before, #hamburger:after, #hamburger span { background: #f9ed0f; content: ''; display: block; width: 100%; height: 3px; 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.5s ease 0.5s; transition: none 0.5s ease 0.5s; -webkit-transition-property: transform, top, bottom, left, opacity; -webkit-transition-property: top, bottom, left, opacity, -webkit-transform; transition-property: top, bottom, left, opacity, -webkit-transform; transition-property: transform, top, bottom, left, opacity; transition-property: transform, top, bottom, left, opacity, -webkit-transform; }
.menu-mobile-opened #hamburger:before, .menu-mobile-opened #hamburger:after { top: 10px; }
.menu-mobile-opened #hamburger span { left: -50px; opacity: 0; }
.menu-mobile-opened #hamburger:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.menu-mobile-opened #hamburger:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.mm-menu_opened { display: block !important; }
.mm-slideout { z-index: unset; }
.menu-head-left { position: relative; }
.title-menu { color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; line-height: 40px; display: block; }
.menu-product-list { position: absolute; z-index: 99; top: 100%; width: 250px; background: #fff; border-radius: 2px; }
.menu-product-list ul { padding: 0px; margin-bottom: 0px; }
.menu-product-list ul ul { position: absolute; width: 750px; background: #fff; left: 100%; top: 0px; border: 1px solid #999; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; height: 100%; overflow-x: hidden; }
.menu-product-list ul ul ul { position: relative; left: 0px; top: 0px; width: 100%; border: none; display: block; height: auto; }
.menu-product-list ul li a { position: relative; display: block; color: #333; font-size: 14px; font-weight: 500; padding: 5px 10px 5px 10px; border-bottom: 1px solid #ddd; }
.menu-product-list ul li a .icon-down { position: absolute; right: 10px; top: 10px; }
.menu-product-list ul ul li a span { position: absolute; right: 10px; font-size: 13px; font-weight: 500; color: #00a3ff; }
.menu-product-list ul li a:hover { color: #f00; }
.menu-product-list ul ul li a { border-bottom: none; font-weight: bold; }
.menu-product-list ul ul ul li a { font-weight: normal; }

/*Search*/
.search-res { position: relative; }
.search-res .icon-search { width: 35px; height: 35px; cursor: pointer; text-align: center; line-height: 35px; color: var(--color-main); font-size: 15px; margin: 0px; border: 1px solid var(--color-main); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f9ed0f; }
.search-res .icon-search.active { color: var(--color-main); background: #ffffff; 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(--color-main); z-index: 2; opacity: 0; border-radius: 25px; line-height: normal; }
.search-res .search-grid p { float: left; width: 40px; height: 38px; cursor: pointer; outline: none; border: none; margin: 0px; font-size: 17px; display: block; color: var(--color-main); line-height: 40px; text-align: center; }
.search-res .search-grid input { width: calc(100% - 40px); float: right; outline: none; border: none; color: #333; box-shadow: none; height: 38px; font-weight: 400; }
.search-res .search-grid input::-webkit-input-placeholder { color: #313131; }
.search-res .search-grid input:-moz-placeholder { color: #313131; }
.search-res .search-grid input::-moz-placeholder { color: #313131; }
.search-res .search-grid input:-ms-input-placeholder { color: #313131; }

/*Menu*/
.menu { top: 0; width: 100%; font-family: 'SVN-Poppins'; background: var(--color-main); }
.menu .wrap-content { position: relative; }
.fix_menu { position: fixed !important; box-shadow: 0 0 1px #999; background: #fff; }
.menu ul { padding: 0px; margin: 0; list-style: none; }
.menu ul li { position: relative; z-index: 99; }
.menu ul.ulmn > li { flex: auto; }
.menu ul li.line { width: 2px; height: 19px; flex: none; background: linear-gradient(90deg, rgb(15 30 54 / 27%) 50%, rgba(255, 255, 255, 0.45) 49%); }
.menu ul li a {font-size: 16px;color: #fff;position: relative;z-index: 1;display: block;font-style: normal;font-weight: 600;padding: 13px 8px;white-space: nowrap;}
.menu ul li a img { vertical-align: middle; }
.menu > .wrap-content > ul > li > a {    /* color: #fff; */ }
.menu > .wrap-content > ul > li > a.active, .menu > .wrap-content > ul > li:hover > a { color: var(--color-main); border-radius: 0 0 5px 5px; background: var(--hover, #F9ED0F); }
.menu ul li ul { position: absolute; min-width: 250px; left: 0; background: #fff; box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.3); -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 0.5s; }
.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 0.7s; }
.menu ul li ul li { text-align: left; border-bottom: 1px solid rgb(173 173 173 / 32%); }
.menu ul li ul li:last-child { border-bottom: 0px; }
.menu ul li ul li a { font-size: 14px; padding: 10px; display: block; text-decoration: none !important; line-height: 20px; text-align: left; font-weight: 500; text-transform: capitalize; color: #333; }
.menu ul li ul li a:hover { color: var(--color-hover); }
.menu ul li ul li ul { top: 0px; left: 100%; }
.menu ul li ul li a:before { position: absolute; content: ''; top: 50%; left: 0; width: 0; height: 1px; background: #fed402; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; visibility: hidden; opacity: 0; }
a.cart-header { position: relative; }
a.cart-header span { position: absolute; top: 0px; right: 0px; color: #fff; font-size: 11px; width: 17px; height: 17px; text-align: center; border-radius: 50%; }

/*   SLider */
.control-owl { position: absolute; width: 100%; z-index: 2; left: 0px; top: calc(50% - 22.5px); }
.control-owl button { opacity: 0.5; top: 0px; position: absolute; outline: none; border: 2px solid #fff; padding: 0px; margin: 0px; display: block; cursor: pointer; color: #ffffff; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; text-align: center; font-size: 25px; margin: 0px; background-color: #00a3ff; display: flex; align-items: center; justify-content: center; }
.control-owl button:hover { opacity: 1; }
.control-owl button.owl-prev { left: 20px; }
.control-owl button.owl-next { right: 20px; }

/* DT */
.title-detail { position: relative; margin: 20px 0px; }
.title-detail h1 { font-size: 27px; color: #333; font-weight: 900; text-align: center; text-transform: uppercase; }
.title-main { position: relative; color: var(--color-main); text-align: justify; font-family: Montserrat; font-size: 40px; font-style: normal; font-weight: 800; text-transform: uppercase; text-align: center; }
.title-main span, .title-main h1 { font-size: 30px; font-weight: bold; text-transform: uppercase; }
.tt-week { font-size: 25px; text-align: center; margin: 20px 0px; color: #fff; font-weight: 700; text-transform: uppercase; }
.title-cat-main { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.title-cat-main span { display: block; color: #999; background: linear-gradient(64.85deg, #fca600 23.67%, #ffd41d 106.12%); background-color: #fff; padding: 10px; border-radius: 10px; cursor: pointer; }
.title-cat-main span:hover, .title-cat-main span.active { background: linear-gradient(64.85deg, #ffd41d 23.67%, #fca600 106.12%); color: #000; }

/* News */
.row-news { margin: 0px -12px; }
.col-news { padding: 0px 12px; margin-bottom: 25px; }
.news-box { }
.news-box .news-pic { display: block; border-radius: 10px; }
.news-box .news-info { padding-top: 15px; }
.news-box .news-name { margin-bottom: 10px; }
.news-box .news-name a {color: var(--color-main);font-size: 18px;text-transform: capitalize;line-height: 1.5;font-weight: 700;}
.news-box .news-name a.text-split { -webkit-line-clamp: 2; }
.news-box .news-name a:hover { color: var(--color-main); }
.news-box .news-date { color: #818181; font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-transform: capitalize; }
.news-box .news-date i { color: var(--color-main); font-size: 16px; }
.news-box .news-desc { color: #464646; font-size: 13px; line-height: 2; margin-bottom: 5px; text-align: justify; }
.news-box .news-desc.text-split { -webkit-line-clamp: 3; }
.news-box .news-view { text-align: right; }
.news-box .news-view a { color: #434343; font-size: 13px; display: inline-flex; align-items: center; gap: 10px; font-style: italic; }
.news-box .news-view a span { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; border-radius: 50%; color: #fff; background: var(--color-main); font-weight: 400; font-style: normal; }
.news-box .news-view a:hover { color: var(--color-hover); }
.item-news .ds-news { width: 100%; }
.ds-news span { display: block; line-height: 25px; color: #999; font-size: 13px; margin: 10px 0px 0px; font-style: italic; }
.ds-news h3 { font-size: 16px; margin: 0; color: #000; font-weight: 500; text-transform: uppercase; -webkit-line-clamp: 3 !important; }
.ds-news h3:hover { color: var(--color-main); }
.ds-news .desc { color: #333; margin-bottom: 0px; }
.item-news:hover h3 { color: #f00; }
.item-news-all a { display: flex; justify-content: space-between; gap: 8px; }
.item-news-all a .scale-img { max-width: 120px; }
.item-news-all a .ds-news h3 { text-transform: capitalize; font-size: 15px; }
.flex-news-detail { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; }
.share { padding: 17px 10px 10px 10px; line-height: normal; background: rgba(128, 128, 128, 0.15); margin-top: 15px; border-radius: 5px; }
.share b { display: block; margin-bottom: 5px; }
.a2a_kit .a2a_svg { width: 30px; height: 30px; line-height: 30px; }
.othernews b { margin-bottom: 10px; }
.list-news-other { padding-left: 17px; list-style: square; }
.list-news-other li { margin-bottom: 2px; }
.list-news-other li a { text-transform: none; color: #333333; }
.list-news-other li a:hover { color: #fed402; }

/* Toc */
.box-readmore { padding: 8px 15px; border: 1px solid #dedede; margin-bottom: 2rem; border-radius: 5px; background-color: #eeeeee; }
.tt-toc { position: relative; font-size: 18px; text-transform: uppercase; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.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; display: none; }
.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 span { color: #333333; cursor: pointer; font-weight: 600; }
.box-readmore ul li span:hover { color: #767676; }

/* Footer */
.footer-tags { padding: 40px 0px; }
.title-tags { color: var(--color-main); font-size: 30px; font-weight: 500; margin-bottom: 15px; text-transform: uppercase; }
.item-tags { display: inline-block; background: #F1F1F1; color: #525252; font-size: 15px; font-weight: 500; padding: 8px 15px 8px 12px; border-radius: 3px; margin: 0px 10px 10px 0px; }
.item-tags i { margin-right: 7px; color: var(--color-main); font-size: 18px; vertical-align: middle; }
.item-tags:hover { color: #fff; background: var(--color-main); }
.item-tags:hover i { color: #fff; }
.footer-article { padding: 35px 0px; border-top: 2px solid var(--color-main); }
.footer-title { text-transform: uppercase; font-size: 15px; margin-bottom: 10px; font-weight: 600; color: var(--color-main); }
.name-company { text-transform: uppercase; font-size: 14px; margin-bottom: 1rem; font-weight: 700; }
.footer-info { color: #333; font-size: 15px; }
.footer-news:nth-child(1) { width: 40%; }
.footer-news:nth-child(2) { width: 25%; }
.footer-news:nth-child(3) { width: 25%; }
.footer-ul { list-style: none; padding: 0px; margin: 0px; }
.footer-ul li { margin-bottom: 10px; }
.footer-ul li:last-child { margin-bottom: 0px; }
.footer-ul li a { color: #333; font-size: 14px; }
.footer-ul li a:hover { text-decoration: none; color: var(--color-main); }
.item-icon-footer img { max-height: 35px; margin: 0px 10px 10px 0px; }
.footer-powered { padding: 25px 0px; text-align: center; border-top: 1px solid #D7D7D7; transition: 0.7s; }
.footer-copyright { color: #1C1B19; font-size: 15px; }
.footer-copyright span { text-transform: uppercase; }
.footer-copyright a { color: #1C1B19; }
.footer-statistic { text-align: right; }
.footer-statistic span { padding-right: 10px; }
.footer-statistic span:last-child { padding-right: 0px; }
#footer-map { position: relative; height: 450px; margin-top: 0px; }
#footer-map iframe { position: absolute !important; width: 100% !important; height: 100% !important; top: 0px !important; left: 0px !important; }
.social-footer { margin-top: 15px; gap: 5px; }
#facebookComponent { height: 200px; }
#tiktokComponent { height: 403px; position: relative; }
#tiktokComponent .tiktok-embed { margin: 0px; height: 403px; position: relative; }
#tiktokComponent .tiktok-embed iframe { margin: 0px; position: absolute; inset: 0; width: 100% !important; height: 100% !important; }

/* Video */
.video-main { position: relative; }
.list-video { margin-top: 10px; width: 100%; border-radius: 5px; border: 1px solid #ddd; }
.img-video span { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; color: #f00; font-size: 27px; cursor: pointer; transition: all 1s; }
.wrap-video { margin-bottom: 60px; }
.row-video { margin: 0px -10px; }
.col-video { padding: 0px 10px; margin-bottom: 20px; }
.item-video { cursor: pointer; }
.item-video:hover span { transform: translateX(-50%) translateY(-50%) rotate(360deg); }
.item-video h3 { text-align: center; font-size: 16px; margin-top: 10px; }
.swiper-video { margin-top: 20px; }
.box-video-best { cursor: pointer; position: relative; }
.box-video-best::after { position: absolute; width: 90px; height: 90px; top: calc(50% - 90px / 2); left: calc(50% - 90px / 2); background: url(../images/video.webp) center center no-repeat; background-size: contain; content: ''; }
.box-video { cursor: pointer; position: relative; }
.box-video::after { position: absolute; width: 60px; height: 60px; top: calc(50% - 60px / 2); left: calc(50% - 60px / 2); background: url(../images/video.webp) center center no-repeat; background-size: contain; content: ''; }

/* Sort */
.sort-select { display: flex; justify-content: end; margin: 20px 0px; position: relative; }
.sort-select .click-sort { border: 1px solid #e0e0e0; border-radius: 4px; cursor: pointer; font-size: 14px; padding: 6px 10px 6px 8px; margin: 0px; }
.sort-select-main { display: grid; background-color: #fff; border-radius: 4px; box-shadow: 0 4px 6px rgb(0 0 0 / 20%); position: absolute; padding: 0 7px; top: 30px; right: 0; width: 160px; z-index: 2; }
.sort-select-main p { border-bottom: 1px solid #f1f1f1; margin: 0px; order: 2; }
.sort-select-main p:has(.check) { order: 1; }
.sort span { color: #000; font-size: 14px; line-height: 17px; padding: 11px 3px; display: block; cursor: pointer; }
.sort span.check i { box-sizing: border-box; position: relative; display: inline-block; transform: scale(var(--ggs, 1)); width: 22px; height: 16px; border: 2px solid transparent; border-radius: 100px; vertical-align: middle; }
.sort span.check i::after { content: ''; display: block; box-sizing: border-box; position: absolute; left: 3px; top: -4px; width: 6px; height: 10px; border-width: 0 2px 2px 0; border-style: solid; transform-origin: bottom left; transform: rotate(45deg); }
.sort-select .sort-show { padding-right: 12px; position: relative; }
.sort-select .sort-show::before { content: ''; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333; content: ''; height: 0; position: absolute; top: 6px; right: 0; width: 0; }

/* Product */
.filter { position: absolute; right: 0px; top: 0px; padding: 5px 10px; background: #f1f1f1; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; text-transform: uppercase; border-radius: 5px; cursor: pointer; border: 1px solid #ddd; display: none; }
.flex-product-main { display: flex; gap: 20px; }
.flex-product-main .left-product { width: 250px; border: 1px solid #f1f1f1; padding: 20px; border-radius: 5px; }
.flex-product-main .right-product { width: calc(100% - 250px); }
.wrap-product-sale { background-color: #ffa09e; border-radius: 10px; overflow: hidden; }
.wr-search p { font-weight: bold; text-transform: uppercase; }
.row-product { margin: 0px -10px; }
.col-product { padding: 0px 10px; margin-bottom: 20px; }
.product { display: block; position: relative; height: 100%; text-align: center; }
.product-pic { background: #fff; margin-bottom: 10px; display: block; position: relative; overflow: hidden; border-radius: 10px; }
.product-name { margin-bottom: 0px; font-weight: normal; }
.product-name a { font-size: 15px; color: #474747; line-height: 25px; font-weight: 500; height: 50px; }
.product-name a:hover { color: var(--color-hover); }
.product-name a.text-split { -webkit-line-clamp: 2; }
.product-info { padding-bottom: 5px; }
.product-info-left { width: calc(100% - 50px); }
.product-price { color: #555; }
.price-new { font-size: 17px; font-weight: 600; color: var(--color-main); display: inline-block; text-transform: uppercase; margin-right: 10px; background: var(--Linear, linear-gradient(90deg, #CCA139 0%, #F5D659 50%, #CCA139 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; leading-trim: both; text-edge: cap; font-family: SVN-Poppins; font-size: 16px; font-style: normal; font-weight: 700; line-height: 25px; text-transform: uppercase; }
.price-old { font-size: 13px; text-decoration: line-through; display: inline-block; color: #AEAEAE; font-weight: 300; text-transform: uppercase; }
.price-per { color: #FF2E00; font-size: 13px; text-align: center; font-weight: 700; }
.product-star-view { display: flex; align-items: center; flex-wrap: wrap; }
.product-star { font-size: 9px; position: relative; color: #999; margin-right: 15px; }
.product-star .star-active { position: absolute; left: 0px; top: 0px; width: var(--star-width); white-space: nowrap; overflow: hidden; color: #FFCD00; }
.product-view { color: #999; font-size: 13px; }
.product-cart { width: 45px; text-align: center; }
.product-cart span { display: inline-block; cursor: pointer; width: 38px; height: 38px; background: url(../images/add_cart.png) center center no-repeat, #FDBC0E; border-radius: 50%; }
.cart-add { margin-left: 10px; background-color: #00A5D9; width: 155px; }
.cart-add:hover { background-color: #1d1d1d; }
.cart-buy { background-color: #FF2E00; width: 93px; height: 33px; }
.cart-buy:hover { background-color: #5172fd; }

/* product detail */
.grid-pro-detail { display: flex; justify-content: space-between; }
.grid-pro-detail .left-pro-detail { width: 40%; }
.grid-pro-detail .right-pro-detail { width: 56.5%; }
.grid-pro-detail .right-pro-detail ul { list-style: none; padding: 0px; }
.grid-pro-detail .right-pro-detail ul li { margin-bottom: 20px; }
.grid-pro-detail .right-pro-detail ul li .attr-content-pro-detail { display: inline-block; margin-bottom: 0px; }
.grid-pro-detail .right-pro-detail ul li .attr-content-pro-detail .price-new-pro-detail { font-weight: 700; font-size: 20px; color: #f00; }
.grid-pro-detail .right-pro-detail .title-pro-detail { font-size: 25px; font-weight: 700; margin-bottom: 10px; }
.title-product-detail { background: #EEEEEE; color: #1C1B19; padding: 12px 18px; border-radius: 3px; font-size: 17px; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; }
.album-product { position: relative; max-width: 550px; margin: 10px auto 0px; }
.row-pro-detail { margin: 0px -5px; }
.col-pro-detail { padding: 0px 5px; }
.thumb-pro-detail { border: 1px solid #ddd; overflow: hidden; border-radius: 5px; }
.thumb-pro-detail.mz-thumb-selected { border-color: var(--color-hover); }
.swiper-button-next, .swiper-button-prev { padding: 7px; background: rgb(0 0 0 / 20%); color: #fff; border-radius: 5px; box-shadow: unset; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; }
.swiper-pro-detail .swiper-button-prev { left: 0px; }
.swiper-pro-detail .swiper-button-next { right: 0px; }
.swiper-pro-detail .swiper-button-prev, .swiper-pro-detail .swiper-button-next { top: calc(50% - 15px); width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: rgb(0 0 0 / 50%); border-radius: 5px; color: #fff; }
.swiper-pro-detail .swiper-button-next:after, .swiper-pro-detail .swiper-button-prev:after { font-size: 15px; }
.swiper-pro-detail .swiper-button-prev:hover, .swiper-pro-detail .swiper-button-next:hover { background: var(--color-main); color: #fff; }
.item-detail { color: #8E8E8E; font-size: 14px; padding: 0px 1rem; position: relative; }
.item-detail:first-child { padding-left: 0px; }
.item-detail::after { position: absolute; right: 0px; top: 3px; width: 1px; height: 14px; background: #8E8E8E; content: ""; }
.item-detail:last-child::after { display: none; }
.item-detail i { margin-right: 5px; }
.item-detail-comment-star { position: relative; font-size: 13px; margin-right: 19px; }
.item-detail-comment-star::after { position: absolute; right: -19px; top: 3px; width: 1px; height: 14px; background: #8E8E8E; content: ""; }
.item-detail-comment-star span { position: absolute; left: 0px; top: 0px; color: #FFCD00; white-space: nowrap; overflow: hidden; }
.product-sold-detail { color: #9F9F9F; font-size: 14px; }
.product-sold-detail span { color: #474747; font-weight: 600; }
.product-price-detail { background: #F5F5F5; padding: 12px 20px; border-radius: 6px; }
.product-price-detail strong { color: #474747; font-size: 16px; font-weight: 500; margin-right: 15px; }
.product-price-detail .attr-content-pro-detail { display: flex; align-items: center; }
.product-price-detail .price-new-pro-detail { color: var(--color-main); font-size: 20px; }
.product-price-detail .price-old-pro-detail { color: #9E9E9E; font-size: 15px; margin-right: 35px; }
.product-price-detail .percent-pro-detail { color: #fff; font-size: 13px; padding: 1px 10px; border-radius: 2px; background: var(--color-main); }
.attr-label-pro-detail { font-weight: 500; color: #474747; margin-bottom: 5px; }
.price-new-pro-detail { font-weight: 700; font-size: 20px; color: #ff2e00; }
.price-old-pro-detail { font-weight: 500; color: #666; text-decoration: line-through; padding-left: 10px; }
.wrap-show-content { position: relative; }
.wrap-show-content.max-height { max-height: 500px; overflow: hidden; }
.wrap-show-content.active { max-height: 100%; }
.wrap-show-content.active .btn-show-content { position: relative; padding: 20px; background: none; }
.btn-show-content { text-align: center; position: absolute; left: 0px; right: 0px; bottom: 0px; background: linear-gradient(180deg, transparent, #fff); padding-top: 100px; }
.btn-show-content span { background: var(--color-main); color: #fff; padding: 8px 20px; border-radius: 5px; cursor: pointer; display: inline-block; }
.btn-show-content span i { margin-left: 10px; }

/* modal-detail */
.modal-detail::-webkit-scrollbar { width: 10px; }
.modal-detail::-webkit-scrollbar-thumb { width: 10px; background: #4d90e0; border-radius: 10px; height: 50px; }
.modal-detail { position: fixed; z-index: 999; background: #000000c4; top: 0px; left: 0px; width: 100%; height: 100%; overflow-y: scroll; }
.content-modal-detail { background: #fff; max-width: 1200px; margin: 0px auto; min-height: 100vh; }
.content-modal-detail .tabs { display: flex; cursor: pointer; padding: 0; list-style: none; justify-content: center; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0px; background: #fff; z-index: 99; }
.content-modal-detail .tabs li { padding: 20px 20px; margin-right: 5px; font-weight: bold; position: relative; border-bottom: 4px solid #fff; }
.content-modal-detail .tabs li.active { color: #2d9cdb; border-bottom: 4px solid #2d9cdb; }
.content-modal-detail .tab-content { padding: 20px; max-width: 900px; margin: 0px auto; }
.content-modal-detail .tab-content.active { display: block; }
.close-tab { position: fixed; top: 15px; right: 20px; z-index: 10; }
.btn-closemenu { position: fixed; top: 10px; right: 20px; background-color: #fff; border: 1px solid #e0e0e0; border-radius: 4px; color: #333; cursor: pointer; line-height: 21px; padding: 7px; text-align: right; width: 72px; }
.btn-closemenu::before { transform: rotate(45deg); }
.btn-closemenu::after { transform: rotate(-45deg); }
.btn-closemenu::before, .btn-closemenu::after { background-color: #333; content: ''; left: 13px; height: 14px; position: absolute; top: 10px; width: 1px; }
.cursor-pointer { cursor: pointer; }

/* Contact */
.contact-detail { display: flex; justify-content: space-between; }
.left-contact-detail { width: 60%; }
.right-contact-detail { width: calc(100% - 60% - 60px); border-radius: 15px; padding: 15px; background: #fff; box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%); }
.contact-map { position: relative; height: 385px; border-radius: 10px; overflow: hidden; }
.contact-map iframe { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.row-contact { display: flex; justify-content: space-between; margin-top: 40px; flex-wrap: wrap; }
.social-contact { text-align: center; }
.social-contact > div { display: inline-flex; align-items: center; justify-content: center; background: var(--color-main); padding: 5px 30px; margin-top: 30px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
.social-contact > div a { display: inline-block; margin: 0 2px; }
.contact-item { width: calc((100% / 3) - 10px); text-align: center; font-size: 15px; }
.contact-item i { display: inline-block; margin-bottom: 10px; }
.contact-item img { width: 40px; height: 40px !important; }
.contact-item p { margin-bottom: 10px; font-weight: 700; }
.contact-item span { font-size: 14px; }
.row-contact-input { display: flex; justify-content: space-between; align-items: end; }
.row-contact-input .contact-input:nth-child(1) { width: 80%; }
.row-contact-input .contact-input:nth-child(2) { width: calc(100% - 80% - 8px); }
.row-contact-input .contact-input:nth-child(2) label { margin-bottom: 15px; }
.contact-input label { font-size: 12px; font-weight: 600; color: #22292f; transition: all 0.8s; }
.contact-input input { border-radius: 0; border: none; border-bottom: 1px solid #ccc; padding: 0; height: 45px; margin-bottom: 15px; overflow: hidden; }
.contact-input input::placeholder { font-size: 15px; color: #ced4da; transition: all 0.5s !important; }
.contact-input textarea { border-radius: 0; border: none; border-bottom: 1px solid #ccc; padding: 0; height: 70px; margin-bottom: 20px; }
.contact-input textarea::placeholder { font-size: 15px; color: #ced4da; transition: all 0.5s !important; }
.contact-form button { display: inline-flex; align-items: center; justify-content: center; max-width: 300px; width: 100%; height: 40px; background: var(--color-main); border-radius: 30px; margin: auto; font-size: 14px; font-weight: 500; text-transform: uppercase; color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; transition: all 0.3s; border: none; }
.contact-form button:hover { box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; background: #000; }
.contact-input { display: flex; flex-direction: column-reverse }
.contact-input .form-control { overflow: hidden; }
.contact-input .form-control:focus { color: #212529; border-color: var(--color-main); outline: 0; box-shadow: unset !important; }
.contact-input .form-control:focus::placeholder { transform: translateY(-200%); }
.contact-input .form-control:focus + label { color: var(--color-main); }
.contact-input input input[type=number]::-webkit-inner-spin-button, .contact-input input input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.contact-input input[type="file"] { display: none; }
.custom-file-upload { display: inline-block; padding: 10px; cursor: pointer; transition: all 0.4s; font-size: 20px; display: block; text-align: center; }
.file-input.has-file label { color: var(--color-main); }
.custom-file-upload i { font-size: 25px; }
.custom-file-upload:hover { color: var(--color-main); }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/*  breadCrumbs */
.breadCrumbs { padding: 10px 10px; background: #ddd; }
.breadCrumbs ol { margin: 0px; }
.breadCrumbs ol li a { color: #333; }
.breadCrumbs ol li a:hover { color: #f00; }

/* paging */
.paging-product { position: relative; }
.pagination { margin: 20px 0px; justify-content: center; flex-wrap: wrap; }
.pagination li span { cursor: pointer; }
.pagination .page-item .page-link { color: var(--color-main); }
.pagination .page-item.active .page-link { color: #fff; background-color: var(--color-main); border-color: var(--color-main); }
.btn-frame { display: block; width: 50px; height: 50px; position: fixed; z-index: 10; cursor: pointer; }
.btn-frame i { width: 50px; height: 50px; border-radius: 50%; background: #1182fc; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.btn-frame i img { vertical-align: middle; width: 70%; }
.btn-frame .animated.infinite { animation-iteration-count: infinite; }
.btn-frame .kenit-alo-circle { width: 60px; height: 60px; top: -5px; right: -5px; position: absolute; background-color: transparent; border-radius: 100%; border: 2px solid rgba(7, 41, 103, 0.8); opacity: 0.1; border-color: #1182fc; opacity: 0.5; }
.btn-frame .zoomIn { animation-name: zoomIn; }
.btn-frame .animated { animation-duration: 1s; animation-fill-mode: both; }
.btn-frame .kenit-alo-circle-fill { width: 70px; height: 70px; top: -10px; right: -10px; position: absolute; border-radius: 100%; border: 2px solid transparent; background-color: rgba(7, 41, 103, 0.35); opacity: 0.4; }
.btn-frame .pulse { animation-name: pulse; }
.grid-properties { display: flex; gap: 10px; }
.grid-properties span { position: relative; border: 1px solid #ddd; padding: 5px 15px; cursor: pointer; }
.grid-properties span:hover, .grid-properties span.active { border: 1px solid #f00; color: #f00; }
.grid-properties span:hover:after, .grid-properties span.active:after { content: ''; border: 0.9375rem solid transparent; border-bottom: 0.9375rem solid var(#d0011b, #ee4d2d); bottom: 0; position: absolute; right: -0.9375rem; }
.grid-properties span.outstock { pointer-events: none; background-color: #fafafa; color: rgba(0, 0, 0, 0.26); cursor: not-allowed; }
.item-properties { margin-bottom: 10px; }

/* scrollToTop */
.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; }

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

/* CSSS T */
a.views_dm { width: 140px; height: 38px; }
.effect_button { transform-style: preserve-3d; transform: translateZ(-25px); transition: transform 0.25s; position: relative; display: inline-flex; z-index: 1; }
.effect_button:before { color: #fff; background: #f00; transform: rotateY(0deg) translateZ(25px); }
.effect_button:after { color: #f00; transform: rotateX(90deg) translateZ(25px); }
.effect_button:hover { transform: translateZ(-25px) rotateX(-90deg); }

/* News */
.flex-news-detail { display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; }
.news-left { width: 68%; }
.news-right { position: sticky; top: 61px; width: 30%; background: #f1f1f1cc; padding: 20px; box-shadow: 0px 0px 5px #99999978; }
.news-right .title-main { margin-bottom: 15px; }
.news-right .title-main span { font-size: 25px; line-height: 30px; }
a.btn_link { position: relative; margin: 5px; height: 36px; width: 140px; }
.btn_link.effect_button:first-child:after, .btn_link.effect_button:first-child:before { content: 'facebook'; }
.btn_link.effect_button:first-child:after, .btn_link.effect_button:first-child:before, .btn_link.effect_button:nth-child(2):after, .btn_link.effect_button:nth-child(2):before { border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(0 165 217 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(0 165 217 / var(--tw-bg-opacity)); }
.btn_link.effect_button:nth-child(2):after, .btn_link.effect_button:nth-child(2):before { content: 'google map'; }
div.slick.in-page:not(.slick-initialized) { display: flex; gap: 10px; overflow: hidden; white-space: nowrap; }
.attr-pro-detail { margin: auto; padding: 0; }
.baonoidung table { display: table; border-collapse: separate; box-sizing: border-box; text-indent: initial; unicode-bidi: isolate; border-spacing: 2px; border-color: gray; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-width: 1px; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; }
.baonoidung tbody { display: table-row-group; vertical-align: middle; unicode-bidi: isolate; border-color: inherit; }
.baonoidung tr { display: table-row; vertical-align: inherit; unicode-bidi: isolate; border-color: inherit; }
.baonoidung td { display: table-cell; vertical-align: inherit; unicode-bidi: isolate; border-width: 1px; border-style: revert-layer; }
.baonoidung ul, .baonoidung ol { list-style: auto; padding-left: 2rem; }
.baonoidung ul li, .baonoidung ol li { margin-bottom: 0.75rem; list-style-type: auto; }
.baonoidung iframe { max-width: 100% !important; }
.baonoidung img { height: auto !important; max-width: 100% !important; }
.baonoidung * { max-width: 100% !important; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table { max-width: 100%; }
.table-responsive table.table-auto { min-width: 600px; }
div.desc-pro-detail ul li { margin-bottom: 0.75rem; list-style-type: circle; }
div.desc-pro-detail ul li:last-child { margin-bottom: 0 !important; }
div.baonoidung ul li { margin-bottom: 0.75rem; list-style-type: disc; }
div.baonoidung ol li { margin-bottom: 0.75rem; list-style-type: decimal; }

/* Swipper */
.swiper .swiper-wrapper { width: inherit; height: inherit; }
.swiper.swiper-initialized .swiper-wrapper { margin: 0; width: 100%; height: 100%; }
.swiper.swiper-initialized .swiper-slide { padding: 0; margin: 0px; overflow: hidden; }

/* Popup */
.modal-title { font-size: 20px; }

/* CSS cho loading */
.loading-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); justify-content: center; align-items: center; z-index: 999; }
.loading { width: 50px; height: 50px; border: 5px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 5px solid #3498db; animation: spin 1s linear infinite; }
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/*  */

/* Custom Header Styles */:root { --header-yellow: #F9ED0F; --header-green: #00983E; --header-red: #e30000; }
.header { background: linear-gradient(to bottom, #ffffff, #f0fbf4); }
.header-top { background-color: var(--header-yellow); color: var(--header-green); font-weight: bold; }
.header-top .slogan { display: flex; align-items: center; gap: 10px; color: var(--color-main); font-family: Montserrat; font-size: 19px; font-weight: 800; line-height: 20px;    /* 105.263% */ letter-spacing: 0.57px; }
.header-center .company-name { color: var(--header-red); font-family: 'Arial', sans-serif; font-weight: 900; font-size: 26px; text-transform: uppercase; margin: 0; text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; }
.header-center .company-slogan { color: var(--header-green); font-weight: bold; font-size: 18px; text-transform: uppercase; margin: 5px 0 0 0; }

/* Hotline Styles */
.header-hotline { display: flex; align-items: center; gap: 15px; }
.hotline-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; animation: pulse-ring 2s infinite; }
.hotline-info { display: flex; flex-direction: column; }
.hotline-label { color: var(--color-main); font-size: 15px; font-style: normal; font-weight: 600; line-height: 20px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; text-transform: uppercase; margin-bottom: 5px; }

/* .hotline-number { color: #E00A0D; font-family: SVN-Poppins; font-size: 26px; font-weight: 900; text-shadow: rgb(255, 255, 255) 5px 0px 0px, rgb(255, 255, 255) 4.90033px 0.993347px 0px, rgb(255, 255, 255) 4.60531px 1.94709px 0px, rgb(255, 255, 255) 4.12668px 2.82321px 0px, rgb(255, 255, 255) 3.48353px 3.58678px 0px, rgb(255, 255, 255) 2.70151px 4.20736px 0px, rgb(255, 255, 255) 1.81179px 4.6602px 0px, rgb(255, 255, 255) 0.849836px 4.92725px 0px, rgb(255, 255, 255) -0.145998px 4.99787px 0px, rgb(255, 255, 255) -1.13601px 4.86924px 0px, rgb(255, 255, 255) -2.08073px 4.54649px 0px, rgb(255, 255, 255) -2.94251px 4.04248px 0px, rgb(255, 255, 255) -3.68697px 3.37732px 0px, rgb(255, 255, 255) -4.28444px 2.57751px 0px, rgb(255, 255, 255) -4.71111px 1.67494px 0px, rgb(255, 255, 255) -4.94996px 0.7056px 0px, rgb(255, 255, 255) -4.99147px -0.291871px 0px, rgb(255, 255, 255) -4.83399px -1.27771px 0px, rgb(255, 255, 255) -4.48379px -2.2126px 0px, rgb(255, 255, 255) -3.95484px -3.05929px 0px, rgb(255, 255, 255) -3.26822px -3.78401px 0px, rgb(255, 255, 255) -2.4513px -4.35788px 0px, rgb(255, 255, 255) -1.53666px -4.75801px 0px, rgb(255, 255, 255) -0.560763px -4.96845px 0px, rgb(255, 255, 255) 0.437495px -4.98082px 0px, rgb(255, 255, 255) 1.41831px -4.79462px 0px, rgb(255, 255, 255) 2.34258px -4.41727px 0px, rgb(255, 255, 255) 3.17346px -3.86382px 0px, rgb(255, 255, 255) 3.87783px -3.15633px 0px, rgb(255, 255, 255) 4.4276px -2.32301px 0px, rgb(255, 255, 255) 4.80085px -1.39708px 0px, rgb(255, 255, 255) 4.98271px -0.415447px 0px, rgb(0, 0, 0) 7px 0px 0px, rgb(0, 0, 0) 6.92869px 0.996602px 0px, rgb(0, 0, 0) 6.71622px 1.9729px 0px, rgb(0, 0, 0) 6.36692px 2.909px 0px, rgb(0, 0, 0) 5.8879px 3.78584px 0px, rgb(0, 0, 0) 5.28893px 4.58555px 0px, rgb(0, 0, 0) 4.5822px 5.29183px 0px, rgb(0, 0, 0) 3.78212px 5.8903px 0px, rgb(0, 0, 0) 2.90498px 6.36876px 0px, rgb(0, 0, 0) 1.96865px 6.71747px 0px, rgb(0, 0, 0) 0.992221px 6.92932px 0px, rgb(0, 0, 0) -0.00442571px 7px 0px, rgb(0, 0, 0) -1.00098px 6.92806px 0px, rgb(0, 0, 0) -1.97715px 6.71498px 0px, rgb(0, 0, 0) -2.91303px 6.36508px 0px, rgb(0, 0, 0) -3.78956px 5.88551px 0px, rgb(0, 0, 0) -4.58889px 5.28603px 0px, rgb(0, 0, 0) -5.29472px 4.57885px 0px, rgb(0, 0, 0) -5.89269px 3.77839px 0px, rgb(0, 0, 0) -6.3706px 2.90095px 0px, rgb(0, 0, 0) -6.71871px 1.96441px 0px, rgb(0, 0, 0) -6.92995px 0.98784px 0px, rgb(0, 0, 0) -6.99999px -0.00885142px 0px, rgb(0, 0, 0) -6.92743px -1.00536px 0px, rgb(0, 0, 0) -6.71372px -1.98139px 0px, rgb(0, 0, 0) -6.36324px -2.91705px 0px, rgb(0, 0, 0) -5.88311px -3.79328px 0px, rgb(0, 0, 0) -5.28313px -4.59223px 0px, rgb(0, 0, 0) -4.57551px -5.29762px 0px, rgb(0, 0, 0) -3.77466px -5.89507px 0px, rgb(0, 0, 0) -2.89692px -6.37243px 0px, rgb(0, 0, 0) -1.96016px -6.71995px 0px, rgb(0, 0, 0) -0.983458px -6.93057px 0px, rgb(0, 0, 0) 0.0132771px -6.99999px 0px, rgb(0, 0, 0) 1.00974px -6.92679px 0px, rgb(0, 0, 0) 1.98564px -6.71247px 0px, rgb(0, 0, 0) 2.92107px -6.36139px 0px, rgb(0, 0, 0) 3.797px -5.88071px 0px, rgb(0, 0, 0) 4.59557px -5.28022px 0px, rgb(0, 0, 0) 5.30051px -4.57215px 0px, rgb(0, 0, 0) 5.89746px -3.77094px 0px, rgb(0, 0, 0) 6.37426px -2.89289px 0px, rgb(0, 0, 0) 6.72119px -1.95591px 0px, rgb(0, 0, 0) 6.93119px -0.979076px 0px; } */
.hotline-number { color: #E00A0D; font-family: SVN-Poppins; font-size: 26px; font-weight: 900; text-shadow: rgb(255, 255, 255) 4px 0px 0px, rgb(255, 255, 255) 3.87565px 0.989616px 0px, rgb(255, 255, 255) 3.51033px 1.9177px 0px, rgb(255, 255, 255) 2.92676px 2.72656px 0px, rgb(255, 255, 255) 2.16121px 3.36588px 0px, rgb(255, 255, 255) 1.26129px 3.79594px 0px, rgb(255, 255, 255) 0.282949px 3.98998px 0px, rgb(255, 255, 255) -0.712984px 3.93594px 0px, rgb(255, 255, 255) -1.66459px 3.63719px 0px, rgb(255, 255, 255) -2.51269px 3.11229px 0px, rgb(255, 255, 255) -3.20457px 2.39389px 0px, rgb(255, 255, 255) -3.69721px 1.52664px 0px, rgb(255, 255, 255) -3.95997px 0.56448px 0px, rgb(255, 255, 255) -3.97652px -0.432781px 0px, rgb(255, 255, 255) -3.74583px -1.40313px 0px, rgb(255, 255, 255) -3.28224px -2.28625px 0px, rgb(255, 255, 255) -2.61457px -3.02721px 0px, rgb(255, 255, 255) -1.78435px -3.57996px 0px, rgb(255, 255, 255) -0.843183px -3.91012px 0px, rgb(255, 255, 255) 0.150409px -3.99717px 0px, rgb(255, 255, 255) 1.13465px -3.8357px 0px, rgb(255, 255, 255) 2.04834px -3.43574px 0px, rgb(255, 255, 255) 2.83468px -2.82216px 0px, rgb(255, 255, 255) 3.44477px -2.03312px 0px, rgb(255, 255, 255) 3.84068px -1.11766px 0px, rgb(255, 255, 255) 3.9978px -0.132717px 0px; filter: drop-shadow(0px 0px 2px #0000004D); }
@keyframes pulse-ring {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 152, 74, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 152, 74, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 152, 74, 0); }
}

/* Service Home Section */
.service-home { padding: 60px 0 60px 0; background: url(../images/bg-dv.webp); overflow: hidden; background-size: cover; }
.service-home .wrap-content { max-width: 1138px; }
.service-list { margin-top: 30px; }
.service-item { max-width: 100%; margin-bottom: 30px; position: relative; text-align: center; transition: transform 0.3s ease; }
.service-item:hover { transform: translateY(-10px); }
.service-circle { display: inline-block; border-radius: 50%; padding: 20px; background: #fff; position: relative; overflow: hidden; background: url(../images/cricle-dv.png); aspect-ratio: 361/364; background-size: 100% 100%; }
.service-item:hover .service-circle { border-color: var(--color-main); }
.service-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform 0.5s ease; }
.service-item:hover .service-circle img { transform: scale(1.1); }
.service-name { position: relative; z-index: 10; background: url(../images/name-dv.png); background-size: 100% 100%; max-width: 264px; margin: 0 auto; color: #FFF; text-align: center; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 800;    /* 111.111% */ text-transform: uppercase; min-height: 62px; line-height: 62px; }
.service-name span {-webkit-line-clamp: 1;padding: 0 10px;color: var(--color-hover);}
.service-name span:hover {color: var(--color-hover);}
.slogan { font-family: Inter; font-size: 14px; background: url(../images/title-main.png) no-repeat center bottom; padding-bottom: 13px; }

/* Recruitment Section Styles */
.recruitment-home { padding: 60px 0; background-color: #ffffff; font-family: 'Montserrat', sans-serif; overflow: hidden; }
.recruit-wrap { align-items: center }

/* Left Column */
.recruit-banner-wrap { border-radius: 20px; position: relative; text-align: center; height: 100%; }
.recruit-badge { background: #1f5130; color: #fff; font-weight: 700; text-transform: uppercase; padding: 5px 20px; border-radius: 5px; font-size: 14px; margin-bottom: 10px; display: inline-block; }
.recruit-title-big { color: #215635; font-size: 32px; font-weight: 800; text-transform: uppercase; margin-bottom: 5px; line-height: 1.2; }
.recruit-subtitle { color: #d11d1d; font-weight: 700; font-size: 18px; margin-bottom: 25px; text-transform: uppercase; }
.recruit-main-img-wrap { position: relative; z-index: 2; margin-bottom: 20px; width: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }
.recruit-main-img-wrap img { width: 100%; height: auto; display: block; }
.recruit-thumbs { display: flex; gap: 10px; justify-content: center; width: 100%; }
.recruit-thumb-item { width: 80px; height: 60px; object-fit: cover; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

/* Right Column */
.recruit-content { padding-left: 20px; }
.recruit-hotline-row { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; width: 100%; }
.recruit-hl-text { display: flex; gap: 20px; }
.recruit-hl-num { color: var(--do, #E00A0D); font-family: Montserrat; font-size: 30px; font-style: normal; font-weight: 800; line-height: 40px;    /* 133.333% */ text-transform: uppercase; }
.recruit-hl-name { color: var(--chu-dao, #00983E); font-family: Montserrat; font-size: 30px; font-style: normal; font-weight: 600; line-height: 40px; }
.recruit-std-title { font-size: 22px; font-weight: 800; color: #1f5130; text-transform: uppercase; margin-bottom: 15px; border-bottom: 2px solid #eee; padding-bottom: 10px; display: inline-block; }
.recruit-desc-text {color: #555;text-align: justify;margin-bottom: 20px;line-height: 1.6;-webkit-line-clamp: 5;}
.recruit-contact-row { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.recruit-c-item { display: flex; align-items: center; gap: 8px; color: #1A1A1A; font-family: Inter; font-size: 15px; font-weight: 600; background: rgb(0 152 62 / 10%); border-radius: 25px; padding-right: 15px; }
.recruit-c-item i { color: #28a745; }

/* Stats */
.recruit-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 30px; }
.recruit-stat-box { border-radius: 5px; border: 1px solid #00983E; background: #FFF; box-shadow: -3px 0 0 0 #00983E; border-radius: 8px; padding: 15px; background: #fff; transition: 0.3s; padding-right: 0px; padding-left: 7px; }
.recruit-stat-box:hover { border-color: #28a745; box-shadow: 0 5px 15px rgba(40, 167, 69, 0.15); transform: translateY(-2px); }
.stat-val { font-weight: 800; display: block; color: #00983E; font-family: Inter; font-size: 40px; font-weight: 700; line-height: 1; }
.stat-lab { color: var(--chu-dao, #00983E); leading-trim: both; text-edge: cap; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 800; line-height: 25px;    /* 178.571% */ text-transform: uppercase; }
.stat-s-desc { color: #333; font-size: 14px; font-weight: 400; }
.recruit-btn-cta { display: inline-flex; align-items: center; gap: 10px; transition: 0.3s; color: var(--chu-dao, #00983E); leading-trim: both; text-edge: cap; font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: 25px;    /* 138.889% */ text-transform: uppercase; }
.recruit-btn-cta:hover { transform: translateX(5px); }

/* Responsive */
@media (max-width:575px) {
	.recruit-stats-grid { grid-template-columns: 1fr; }
	.recruit-title-big { font-size: 24px; }
}
.slogan-header { display: flex; align-items: center; gap: 15px; color: #00983E; font-family: Montserrat; font-size: 19px; font-weight: 800; line-height: 20px;    /* 105.263% */ letter-spacing: 0.57px; text-transform: uppercase; }
.blink-text { animation: blink 1s linear infinite; color: #ff0000; font-weight: bold; }
.profile-partners-section { padding: 50px 0; background: #fff url('../images/bg-hoso.webp') no-repeat; font-family: 'Montserrat', sans-serif; background-size: cover; }
.pp-title { color: #00983E; font-size: 34px; font-weight: 800; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; }
.pp-title i { font-size: 28px; }

/* Profile List */
.profile-list { padding-left: 10px; position: relative; margin-left: 15px; }
.profile-list::after { content: ''; position: absolute; width: 3px; height: 90%; background: var(--color-main); top: 13px; left: -3px; z-index: 0; }
.profile-item { margin-bottom: 25px; position: relative; padding-left: 25px; color: #333; font-weight: 600; font-family: Inter; font-size: 19px; }
.profile-item::before { content: ''; position: absolute; left: -23px; top: 4px; width: 23px; height: 23px; border-radius: 50%; background-image: url(../images/ellipse.png); z-index: 2; }
.profile-item:last-child { margin-bottom: 0; }

/* Partners Grid */
.wrap-partners { max-width: 424px; margin-left: auto; }
.partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.partner-box { border: 1px solid #eee; border-radius: 8px; padding: 10px; background: #fff; display: flex; align-items: center; justify-content: center; transition: 0.3s; aspect-ratio: 206/129; width: 100%; }
.partner-box:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border-color: #28a745; }
.partner-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Newsletter Section */
.section-newsletter { position: relative; padding: 60px 0; background: url('../images/bg-nhantin.webp') no-repeat center center; background-size: cover; background-color: #0c3b18; }
.section-newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 60, 25, 0.85); z-index: 1; }
.section-newsletter .container-custom { position: relative; z-index: 2; }
.newsletter-form-wrap { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 30px; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 40%; }
.newsletter-title { color: #FFF; text-align: center; font-size: 40px; font-weight: 700; }
.newsletter-form-wrap label { color: var(--white, #FFF); font-family: Inter; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: -0.6px; }
.newsletter-form-wrap .input-group { border-bottom: 1px solid #fff; margin-bottom: 15px; }
.newsletter-form-wrap .input-group-text { background: transparent; border: none; color: #70DA40; padding-left: 0; padding-right: 10px; }
.newsletter-form-wrap .form-control { background: transparent; border: none; border-radius: 0; color: #fff; padding-left: 0; font-size: 14px; padding: 10px 0; }
.newsletter-form-wrap .form-control:focus { box-shadow: none; background: transparent; }
.newsletter-form-wrap .form-control::placeholder { font-family: Inter; font-size: 15px; color: #fff; }
.btn-newsletter { background: linear-gradient(90deg, #00983E 0%, #FFD700 100%); border: none; padding: 12px; font-weight: 700; color: #fff; text-transform: uppercase; border-radius: 8px; width: 100%; margin-top: 10px; transition: 0.3s; }
.btn-newsletter:hover { background: linear-gradient(90deg, #FFD700 0%, #00983E 100%); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.newsletter-map { width: 55%; position: relative; }
.newsletter-map .start-animate { position: absolute; top: 46.3%; left: 41%; }

/* Footer Redesign */
footer {background: url(../images/bg-footer.webp);padding-top: 50px;padding-bottom: 20px;color: red;font-family: 'Inter', sans-serif;background-size: cover;background: #fff;}
.footer-company-name { color: #FFD700; font-size: 28px; font-weight: 800; text-transform: uppercase; margin: 10px 0 5px; }
.footer-slogan { font-size: 16px; font-weight: 600; }
.footer-contact-strip { margin: 30px 0; }
.contact-box { display: flex; align-items: center; gap: 15px; }
.contact-icon { flex-shrink: 0; }
.contact-info { font-size: 17px; line-height: 1.4; }

/* Map Box */
.map-box { border-radius: 15px; overflow: hidden; padding: 10px; position: relative; }
.map-box::after { content: ''; position: absolute; width: 100%; height: 80%; background: var(--color-main); top: 0; left: 0; border-radius: 20px; }
.map-header { color: #fff; padding: 10px 15px; font-weight: 700; font-size: 20px; text-align: center; border-top-left-radius: 15px; border-top-right-radius: 15px; text-transform: uppercase; font-family: 'Inter'; display: flex; justify-content: center; gap: 14px; position: relative; z-index: 3; }
.map-content { background: #fff; border-radius: 10px; overflow: hidden; height: 300px; position: relative; z-index: 2; }
.map-content iframe { width: 100% !important; height: 100% !important; border: none; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; font-size: 14px; color: #ccc; }
.footer-bottom span {color: #00;font-weight: 600;}
.footer-bottom a { color: #ccc; }

/* Process Section */
.noty-home { background: linear-gradient(90deg, #00983E 0%, #FECF1D 100%), #00983E; padding: 15px 0; overflow: hidden; }
.marquee-noty { display: flex; align-items: center; white-space: nowrap; animation: marquee 20s linear infinite; }
.marquee-noty span { color: #FFF; font-family: 'Montserrat'; font-size: 40px; font-style: normal; font-weight: 900; line-height: normal; text-transform: uppercase; margin: 0 15px; }
.marquee-noty img { width: 35px; height: 35px; object-fit: contain; }
@keyframes marquee {
	0% { transform: translateX(100vw); }
	100% { transform: translateX(-100%); }
}
.process-section { padding: 60px 0; position: relative; background-color: var(--color-main); color: #fff; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0db550 0%, #00983E 100%); }
.process-header { margin-bottom: 50px; text-align: left; }
.process-header .process-subtitle { color: #F9ED0F; font-family: 'Dancing Script', cursive; font-size: 32px; margin-bottom: 15px; font-weight: 500; text-align: left; line-height: 1; }
.process-header .process-main-title { color: #fff; font-weight: 800; text-transform: uppercase; line-height: 1.4; font-family: Inter; font-size: 35px; }
.process-steps {    /* display: flex; */
padding: 20px 0; }
.process-item { position: relative; width: 100%; padding: 0 10px; text-align: center; }
.process-icon-box { position: relative; width: 107px; margin: 0 auto 25px; }
.process-icon { display: flex; align-items: center; justify-content: center; }
.process-icon svg { width: 32px; height: 32px; stroke: #fff; fill: none; }
.process-num { position: absolute; right: -50px; top: 25px; font-size: 40px; font-weight: 900; color: #00983e; text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; font-family: SVN-Poppins; }
.process-arrow { position: absolute; top: 50%; right: -50px; transform: translateY(-50%); font-size: 24px; color: rgba(255, 255, 255, 0.4); font-weight: 300; }
.process-item:last-child .process-arrow { display: none; }
.process-step-title { color: #FFF; text-align: center; font-family: Inter; font-size: 14px; font-weight: 800; line-height: 20px; text-transform: uppercase; }
.process-step-desc { font-size: 14px; font-family: Inter; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, 0.6); }

/* Feedback Section */
.feedback-section { padding-top: 80px; position: relative; overflow: hidden; background: #fff; }
.feedback-bg-text { position: relative; top: 0; left: 50%; transform: translateX(-50%); font-size: 150px; font-weight: 900; text-transform: uppercase; font-family: 'Montserrat', sans-serif; line-height: 1; pointer-events: none; z-index: 0; white-space: nowrap; opacity: 0.2; background: linear-gradient(179deg, #00983E 0.92%, rgba(0, 152, 62, 0.00) 70.39%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: right; margin-bottom: -30px; }
.feedback-left { padding-right: 0px; position: relative; z-index: 1; }
.feedback-title { color: #00983E; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
.feedback-subtitle { color: #333; font-size: 14px; font-weight: 600; margin-bottom: 10px; font-family: 'Inter', sans-serif; }
.feedback-divider { width: 50px; height: 3px; background: #F9ED0F; margin-bottom: 30px; position: relative; }
.feedback-divider::after { content: ''; position: absolute; left: 10px; top: 5px; width: 3px; height: 3px; background: #00983E; box-shadow: 5px 0 0 #00983E, 10px 0 0 #00983E; }
.feedback-item { text-align: center; padding: 0 10px; }
.feedback-avatar-wrap { position: relative; width: 250px; height: 280px; margin: 40px auto 40px; display: flex; justify-content: center; align-items: center; left: -35px; }
.feedback-avatar-wrap::after { content: ''; position: absolute; background: url(../images/ovl-fb.png); width: 185px; height: 313px; background-size: 100% 100%; right: -20px; top: -12px; }
.feedback-avatar { border-radius: 50%; overflow: hidden;    /* border: 5px solid #fff; */    /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
position: relative; z-index: 2; mask-image: radial-gradient(#fff, #000);    /* Simple mask, likely need custom shape */ border-radius: 100px;    /* Oval shape approximation */ }
.feedback-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feedback-curve-text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; animation: rotate 20s linear infinite; pointer-events: none; }
.feedback-curve-text svg { width: 100%; height: 100%; transform: scale(1.4); }
.feedback-name { color: var(--chu-dao, #00983E); font-family: Inter; font-size: 20px; font-style: normal; font-weight: 600; line-height: normal; text-transform: capitalize; margin-bottom: 5px; }
.feedback-desc { color: var(--tile, #333); text-align: center; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px;    /* 157.143% */ }

/* Album Right */
.album-right { position: relative; z-index: 1; text-align: center; width: 100%; }
.album-image-box { position: relative; border-radius: 30px; overflow: hidden; margin-bottom: 15px; }
.album-image-box img { border-radius: 30px; display: block; }
.album-overlay-text { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 60px; font-weight: 900; color: rgba(255, 215, 0, 0.8);    /* Gold color */ text-transform: uppercase; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); z-index: 3; letter-spacing: 2px; }
.corner-decor { position: absolute; width: 40px; height: 40px; border: 2px solid #fff; border-radius: 10px; z-index: 4; opacity: 0.8; }
.corner-decor.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.corner-decor.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.corner-decor.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.corner-decor.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }
.album-footer-text { color: var(--chu-dao, #00983E); font-family: "1FTV Photograph Signature"; font-size: 35px; font-weight: 400; letter-spacing: 1.75px; }
.slide-album::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0000003D; background-size: 100% 100%; pointer-events: none; }
.slide-album::before { content: ''; position: absolute; top: 17px; left: 17px; right: 17px; bottom: 17px; background: url(../images/subtract.png); background-size: cover; background-position: center; z-index: 5; pointer-events: none; }

/* Response */
@media (max-width:991px) {
	.process-steps { flex-wrap: wrap; justify-content: center; gap: 30px; }
	.process-arrow { display: none; }
}
@media (max-width:575px) {
	.process-item { width: 100%; }
	.process-header .process-main-title { font-size: 20px; }
}
.process-section { background: url(../images/bg-qt.png); padding: 50px 0; }

/*  */
.start-animate { z-index: 99999999999999999 !important; position: absolute; animation: star linear 1.75s infinite; -moz-animation: star linear 1.75s infinite; -webkit-animation: star linear 1.75s infinite; -o-animation: star linear 1.75s infinite; }
@-webkit-keyframes star {
	0% { -webkit-transform: rotate(0) scale(0); }
	50% { -webkit-transform: rotate(180deg) scale(1.5); }
	100% { -webkit-transform: rotate(360deg) scale(0); }
}
@-o-keyframes star {
	0% { -o-transform: rotate(0deg) scale(0); }
	50% { -o-transform: rotate(180deg) scale(1.5); }
	100% { -o-transform: rotate(360deg) scale(0); }
}
@-moz-keyframes star {
	0% { -moz-transform: rotate(0deg) scale(0); }
	50% { -moz-transform: rotate(180deg) scale(1.5); }
	100% { -moz-transform: rotate(360deg) scale(0); }
}
@keyframes star {
	0% { transform: rotate(0deg) scale(0); }
	50% { transform: rotate(180deg) scale(1.5); }
	100% { transform: rotate(360deg) scale(0); }
}
.row-album { margin: 0 -5px; }
.row-album > * { padding: 0 5px; margin-bottom: 10px; }
.album-item { border-radius: 10px; overflow: hidden; }
.album-name a { color: #000; font-size: 16px; font-weight: 500; font-family: 'Inter', sans-serif; text-align: center; -webkit-line-clamp: 2; line-height: 1.5; margin-top: 15px; }
.album-name a:hover { color: var(--chu-dao, #00983E); }
.btn-customer { width: 250px; height: 47px; border-radius: 5px; background: linear-gradient(90deg, #00983E 0%, #FECF1D 100%); line-height: 47px; display: inline-flex; justify-content: center; align-items: center; color: #fff; font-family: Inter; font-size: 15px; font-style: normal; font-weight: 800; gap: 10px; transition: all .3s ease-in-out; }
.btn-customer:hover { color: #fff; letter-spacing: 2px; transition: all .3s ease-in-out; }
.album-home { background: url(../images/bg-hoso.webp); background-size: cover; background-position: center; }

/* Popup Modal Styles */
.vt-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 9999; align-items: center; justify-content: center; }
.vt-popup-overlay { display: flex; animation: fadeIn 0.3s; }
.vt-popup-container { background: #fff; width: 1200px; max-width: 95%; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); }
.vt-popup-close { position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 30px; line-height: 1; color: #333; cursor: pointer; z-index: 10; }
.vt-popup-body { display: flex; }
.vt-popup-left { width: 700px; background: #FFF5E6;    /* Fallback color */ flex-shrink: 0; }
.vt-popup-left img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-popup-right { width: 500px; padding: 24px; flex-grow: 1; }
.vt-popup-title { color: var(--color-main); font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.vt-popup-desc { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.4; }
.vt-popup-form .form-group { margin-bottom: 12px; }
.vt-popup-form .form-control { width: 100%; padding: 10px 15px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; outline: none; }
.vt-popup-form .form-control:focus { border-color: var(--color-main); }
.form-label-group { font-weight: 600; margin-bottom: 5px; color: #333; font-size: 14px; }
.vt-time-slots { margin-bottom: 20px; }
.time-row { display: flex; align-items: center; margin-bottom: 8px; font-size: 13px; }
.time-label { width: 50px; color: #666; }
.time-options { display: flex; gap: 5px; flex-wrap: wrap; }
.time-radio { cursor: pointer; user-select: none; }
.time-radio input { display: none; }
.time-radio span { display: inline-block; padding: 4px 10px; border: 1px solid #ddd; border-radius: 20px; font-size: 12px; color: #333; transition: all 0.2s; }
.time-radio input:checked + span { background: var(--color-main); color: #fff; border-color: var(--color-main); }
.time-radio:hover span { border-color: var(--color-main); }
.btn-popup-submit { width: 100%; background: var(--color-main); color: #fff; border: none; padding: 12px; border-radius: 5px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.3s; }
.btn-popup-submit:hover { background: #0275C1; }
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (max-width:768px) {
	.vt-popup-container { width: 95%; flex-direction: column; max-height: 90vh; overflow-y: auto; }
	.vt-popup-body { flex-direction: column; }
	.vt-popup-left { width: 100%; height: 150px; }
	.vt-popup-right { width: 100%; padding: 20px; }
}