@font-face { font-family: "SVN-Avo"; src: url("../fonts/custom/SVN-Avobold.woff2") format("woff2"), url("../fonts/custom/SVN-Avobold.woff") format("woff"); font-weight: bold; font-style: normal; font-display: swap}

@font-face { font-family: "SVN-Avo"; src: url("../fonts/custom/SVN-Avoitalic.woff2") format("woff2"), url("../fonts/custom/SVN-Avoitalic.woff") format("woff"); font-weight: normal; font-style: italic; font-display: swap}

@font-face { font-family: "SVN-Avo"; src: url("../fonts/custom/SVN-Avo.woff2") format("woff2"), url("../fonts/custom/SVN-Avo.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap}

@font-face { font-family: "SVN-Avo"; src: url("../fonts/custom/SVN-Avobolditalic.woff2") format("woff2"), url("../fonts/custom/SVN-Avobolditalic.woff") format("woff"); font-weight: bold; font-style: italic; font-display: swap}

@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} 
 }

@keyframes skeleton {
 0%,
 100% { opacity: 1}

 50% { opacity: .1} 
 }

.loader { --cell-size: 52px; --cell-spacing: 1px; --cells: 3; --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing))); display: flex; flex-wrap: wrap; width: var(--total-size); height: var(--total-size)}

.cell { flex: 0 0 var(--cell-size); margin: var(--cell-spacing); background-color: rgba(0, 0, 0, 0); box-sizing: border-box; border-radius: 4px; animation: 1.5s ripple ease infinite}

.cell.d-1 { animation-delay: 100ms}

.cell.d-2 { animation-delay: 200ms}

.cell.d-3 { animation-delay: 300ms}

.cell.d-4 { animation-delay: 400ms}

.footer-listview::-webkit-scrollbar { width: 3px !important; padding-left: 10px; } 

.cell:nth-child(1) { --cell-color: #00FF87}

.cell:nth-child(2) { --cell-color: #0CFD95}

.cell:nth-child(3) { --cell-color: #17FBA2}

.cell:nth-child(4) { --cell-color: #23F9B2}

.cell:nth-child(5) { --cell-color: #30F7C3}

.cell:nth-child(6) { --cell-color: #3DF5D4}

.cell:nth-child(7) { --cell-color: #45F4DE}

.cell:nth-child(8) { --cell-color: #53F1F0}

.cell:nth-child(9) { --cell-color: #60EFFF}

@keyframes ripple { 
 0% { background-color: rgba(0, 0, 0, 0)}

 30% { background-color: var(--cell-color)}

 60% { background-color: rgba(0, 0, 0, 0)}

 100% { background-color: rgba(0, 0, 0, 0)} 
 }

@keyframes zoomIn { 
 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3)}

 50% { opacity: 1} 
 }

@keyframes pulse { 
 0% { transform: scaleX(1)}

 50% { transform: scale3d(1.05, 1.05, 1.05)}

 to { transform: scaleX(1)} 
 }

.inset-0 { inset: 0}

.pointer { cursor: pointer}

.z--1 { z-index: -1}

.z-1 { z-index: 1}

.z-2 { z-index: 2}

.z-3 { z-index: 3}

.isolate { isolation: isolate}

.ovf-hidden { overflow: hidden}

.square { aspect-ratio: 1/1}

:root { --max-width: min(1200px, calc(100% - 30px)); --max-padding: 1fr; --primary-color: #064894; --dark-primary-color: #17315b; --secondary-color: #f9cb53; --gradient: #e9a51f 0%, #f9cb53 55.73%, #ecb831 100%; --font-family: "Roboto", sans-serif; --font-secondary: "Inter", sans-serif; --font-third: "SVN-Avo", sans-serif; --line: 3}

::-webkit-scrollbar { width: 7px; height: 7px; position: fixed; right: 0; top: 0; bottom: 0; opacity: .5}

::-webkit-scrollbar-track { background: #fff}

::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 5px}

body { top: 0 !important; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-family: var(--font-family); font-size: 14px}

button { all: unset; box-sizing: border-box}

picture { display: flex}

picture:has(>img.w-100) { width: 100%; height: auto}

img { max-width: 100%; -o-object-fit: cover; object-fit: cover; display: inline-block; height: auto}

img.lazy { display: flex; opacity: 0}

img:not(.initial) { transition: opacity 1s}

img:not([src]) { visibility: hidden}

img:is(.loaded, .error) { opacity: 1}

a,
input,
textarea { outline: none; padding: 0}

input[type=number] { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield}

input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0}

input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0}

.wrap-content { display: grid; width: 100% !important; grid-column: main; grid-template-columns: [main-start] var(--max-padding) [content-start] var(--max-width) [content-end] var(--max-padding) [main-end]}

.wrap-content>*:not(.fw, .wrap-content) { grid-column: content}

.wrap-content>.fw { grid-column: main}

.pagination { --bs-pagination-color: var(--primary-color); --bs-pagination-hover-color: var(--primary-color); --bs-pagination-active-bg: var(--primary-color); --bs-pagination-active-border-color: var(--primary-color); margin: 20px 0 0 0 !important}

.pagination .page-item .page-link { display: flex; align-items: center; justify-content: center; height: 100%}

:is(.title-main, .title-detail) { text-align: center; margin-bottom: clamp(15px, 1.6260162602vw, 20px); position: relative}

:is(.title-main, .title-detail)::after { content: ""; display: block; width: 100px; height: 2px; margin: 0 auto; background: var(--secondary-color); margin-top: clamp(8px, 1.3008130081vw, 16px)}

:is(.title-main, .title-detail) :is(span, h1, h2, h3, h4, h5) { color: #0f1c30; text-align: center; font-family: var(--font-third); font-weight: bold; font-size: clamp(16px, 1.9512195122vw, 24px); line-height: 1.25; letter-spacing: -0.72px; text-transform: uppercase; margin-bottom: 0}

.time-main { color: #999; margin-bottom: .75rem}

.time-main i { margin: 3px 7px 0 0; vertical-align: top}

.time-main span { display: inline-block; vertical-align: top}

.share { background: rgba(128, 128, 128, .15); border-radius: 5px; line-height: normal; margin-top: 15px; padding: 17px 15px 10px}

.share b { display: block; margin-bottom: 5px}

footer { background: var(--dark-primary-color)}

.footer-top { padding: clamp(20px, 2.5203252033vw, 31px) 0 clamp(20px, 3.9024390244vw, 48px); display: grid; --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px); gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(max(230px, (100% - var(--gap) * 1) / 2), 1fr))}

@media(min-width: 768px){
 .footer-top { display: flex; justify-content: space-between}

 .footer-top>* { flex: 0 1 172px; } 

 .footer-top>:nth-child(1) { flex: 0 1 385px} 
 }

.footer-content .footer-title { margin-top: 11px; margin-bottom: 7px; color: #fff; font-family: var(--font-family); font-weight: bold; font-size: clamp(16px, 1.5447154472vw, 19px); line-height: 1.5789473684; letter-spacing: -0.19px; text-transform: capitalize}

.footer-title { margin-top: clamp(16px, 2.6016260163vw, 32px); margin-bottom: clamp(16px, 2.6016260163vw, 32px); color: #fff; font-family: var(--font-family); font-weight: bold; font-size: clamp(14px, 1.3008130081vw, 15px); line-height: 1.5; text-transform: uppercase}

.footer-title svg { display: block; margin-top: clamp(5px, .8943089431vw, 11px)}

.footer-listview { color: #fff; font-size: 14px; font-family: var(--font-family); font-weight: 400; overflow: auto; max-height: calc(7lh + 6 * clamp(7px, 1.2195121951vw, 15px)); } 

.footer-listview_item { color: #fff; font-size: 14px; font-family: var(--font-family); font-weight: 400; } 

.footer-listview_item:not(:last-child) { margin-bottom: clamp(7px, 1.2195121951vw, 15px)}

.footer-listview_item:hover { color: var(--secondary-color)}


.footer-powered { font-size: 15px; color: #fff; padding: clamp(8px, 1.3008130081vw, 16px); border-color: rgba(255, 255, 255, .2)}

#footer-map { height: 500px; position: relative}

#footer-map iframe { height: 100% !important; left: 0 !important; position: absolute !important; top: 0 !important; width: 100% !important}

.text-split { -webkit-box-orient: vertical; -webkit-line-clamp: var(--line); box-orient: vertical; line-clamp: var(--line); display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; height: calc(var(--line)*1lh)}

.scale-img { display: block; overflow: hidden}

.scale-img img { transition: all .3s; transform: scale(1)}

:is([class*=_item]:hover .scale-img, .scale-img:hover)>img,
:is([class*=_item]:hover .scale-img, .scale-img:hover) picture>img { transition: all .3s; transform: scale(1.1)}

[class*=-xemthem] { transition: all .6s; position: relative; overflow: hidden}

[class*=-xemthem]::before { transition: all .6s; content: ""; z-index: -1; position: absolute; inset: 0; background-image: linear-gradient(20deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%); background-size: 600%}

[class*=-xemthem]:hover { color: #fff; transform: translateX(0.5rem)}

[class*=-xemthem]:hover::before { background-position: 100%}

.transition { transition: all .3s}

.cart-fixed { color: #fff !important; z-index: 10}

.cart-fixed i { font-size: 20px}

.cart-fixed span { background: var(--primary-color); border-radius: 100%; color: #fff; font-size: 11px; height: 25px; line-height: 25px; position: absolute; right: -5px; text-align: center; top: 0; width: 25px}

.a2a_kit .a2a_svg { height: 30px; line-height: 30px; width: 30px}

.qty-pro { flex: 0 0 100px !important}

.skeleton :is([class*="-pic "], [class*="-title "], [class*="-desc "], [class*="-content "], [class*="-price "]) { background: #e4e4e4; border-radius: 5px; animation: skeleton 2s ease-in-out infinite; color: rgba(0, 0, 0, 0); -webkit-text-fill-color: rgba(0, 0, 0, 0)}

.skeleton .pagination-ajax { filter: grayscale(1); position: relative}

.skeleton .pagination-ajax::after { content: ""; position: absolute; inset: 0; z-index: 3}

.skeleton img { opacity: 0}

.htmx-indicator:not(.htmx-request) { display: none !important}

.aos-overflow { overflow: hidden !important; overflow: clip visible !important}

.search-form { width: 37.5%}

.search-form input:is(:focus, :focus-visible, :focus-within) { border: unset !important; outline: unset; box-shadow: unset}

.search-form button { border-radius: 100%; width: 42px; color: #fff; font-size: 16px}

.menu-res { background: var(--primary-color); z-index: 100; display: none}

.menu-res .header-cart img { filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(8%) hue-rotate(353deg) brightness(104%) contrast(104%)}

.menu-res .lang-header button { background: #fff; color: #333}

.menu-res .lang-header button.active { background: var(--secondary-color)}

.search-res { position: relative}

.search-res input[type=checkbox]:checked+label { border-radius: 50%; background-color: #fff; color: var(--primary-color)}

.search-res input[type=checkbox]:checked+label+.search-grid { opacity: 1; grid-template-columns: 1fr}

.search-res .search-grid { display: grid; grid-template-columns: 0fr; opacity: 0; position: absolute; right: 0; top: 50px; z-index: 2; width: -moz-max-content; width: max-content}

.grid-sp { display: grid; --gap: clamp(8px, calc(20 / 1230 * 100vw), 20px); gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - var(--gap) * 3) / 4), 1fr))}

header { background: var(--dark-primary-color)}

header .lang-header button { background: #fff; color: #333}

header .lang-header button.active { background: var(--primary-color); color: #fff}

.skiptranslate { display: none !important}

.wrap-tintuc-slide { --max-width: min(1366px, calc(100% - 30px))}

.slide-slide .content_slideshow { position: absolute; inset: clamp(10px, 2.6829268293vw, 33px) clamp(10px, 1.6260162602vw, 20px); width: 90%; left: 0; right: 0; text-align: center; margin: auto; } 

.slide-slide .content_slideshow .name_slideshow,
.slide-slide .content_slideshow .name_slideshow_2 { display: block; text-align: center; font: 700 clamp(16px, 1.6260162602vw, 18px)/1.5 var(--font-secondary); text-transform: uppercase; background: linear-gradient(180deg, var(--gradient)); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0); margin-bottom: clamp(5px, .8130081301vw, 10px)}

.slide-slide .content_slideshow .desc_slideshow { color: #fff; text-align: center; font: 400 14px/27px var(--font-family); letter-spacing: -0.21px; margin-bottom: clamp(10px, 7.5609756098vw, 93px)}

.tintucnb1-title-main { font-family: var(--font-family); font-weight: 900; font-size: clamp(14px, 1.3008130081vw, 16px); line-height: 2.5; letter-spacing: -0.16px; width: min(253px, 100%); background: #064894; color: #fff; text-transform: uppercase; text-align: center; margin-top: clamp(0px, 2.4390243902vw, 30px); margin-bottom: 7px}

.tintucnb1-slide { height: clamp(258px, 21.9512195122vw, 270px)}

.tintucnb1-slide.vertical .embla__slide { position: relative}

.tintucnb1-slide.vertical .embla__slide::after { position: absolute; content: ""; display: block; width: 100%; height: 0; left: 0; top: calc(100% + var(--gap__calc)/2); border-bottom: 1px dashed #6c757f}

.tintucnb1-title { font-family: var(--primary-color); font-weight: 900; font-size: clamp(14px, 1.3008130081vw, 16px); line-height: 1.875; letter-spacing: -0.16px; color: #000; margin-bottom: 2px}

.tintucnb1-title:hover { color: var(--primary-color)}

.tintucnb1-desc { color: #000; font-family: var(--font-family); font-weight: 400; font-size: 14px; letter-spacing: -0.14px}

.wrap-duan { padding: clamp(20px, 6.0975609756vw, 75px) 0 clamp(20px, 3.2520325203vw, 40px)}

.duan-trangcon-info { background: linear-gradient(270deg, #064894 24.98%, rgba(6, 72, 148, 0) 80.97%); width: min(400px, 100%); padding: clamp(16px, 3.7398373984vw, 46px) 16px}

.duan-trangcon-title { color: #fff; font-family: var(--font-secondary); font-weight: bold; font-size: clamp(16px, 1.9512195122vw, 22px); line-height: 1.25; text-transform: uppercase; margin-bottom: clamp(7px, 1.2195121951vw, 15px)}

.duan-trangcon-address { color: #fff; font-family: var(--font-family); font-weight: 400; font-size: 13px; line-height: 22px; letter-spacing: -0.26px; margin-bottom: clamp(7px, 1.2195121951vw, 15px)}

.duan-trangcon-btn { color: #fff; font-family: var(--font-family); font-weight: 900; font-size: 13px; line-height: 2.7692307692; letter-spacing: -0.13px; display: flex; justify-content: center; align-items: center; width: 136px; transition: .4s}

.duan-trangcon-btn:hover { box-shadow: 0 0 0 18px #fff inset; color: #064894}

.duan-contact { width: -moz-fit-content; width: fit-content; margin: 0 auto}

.duan-contact>a { font-family: var(--font-secondary); font-weight: bold; font-size: clamp(16px, 1.9512195122vw, 24px); line-height: 1.25; letter-spacing: -0.72px; text-transform: uppercase; background: linear-gradient(180deg, var(--gradient)); -webkit-background-clip: text; -webkit-text-fill-color: rgba(0, 0, 0, 0)}

.duan-info { background: #f6f7f7; padding: clamp(10px, 1.4634146341vw, 18px)}

.duan-title { color: #0f1c30; text-align: center; min-height: 60px; font-family: var(--font-family); font-weight: 700; font-size: clamp(14px, 1.3821138211vw, 17px); line-height: 1.7647058824; letter-spacing: -0.17px; text-transform: uppercase; margin-bottom: 5px}

.duan-title:hover { color: var(--primary-color)}

.duan-address { color: #5b5b5b; font-family: var(--font-family); font-weight: 400; font-size: 13px; line-height: 22px; letter-spacing: -0.26px; margin-bottom: clamp(10px, 1.6260162602vw, 20px)}

.duan-zalo { color: #b89436; font-family: var(--font-third); font-weight: bold; font-size: clamp(14px, 1.6260162602vw, 20px); line-height: 1.5; letter-spacing: -0.6px; text-transform: uppercase; margin-right: clamp(5px, .8130081301vw, 10px)}

.duan-btn { color: #fff; font-family: var(--font-family); font-weight: 500; font-size: 14px; line-height: 46px; letter-spacing: -0.14px; display: flex; align-items: center; justify-content: center; height: 46px; background: #064894; transition: .4s}

.duan-btn:hover { box-shadow: 0 0 0 24px #f9cb53 inset; color: #000}

.wrap-tamnhin { --max-width: min(860px, calc(100% - 30px)); padding: clamp(20px, 4.0650406504vw, 50px) 0 clamp(20px, 5.6910569106vw, 70px)}

.tamnhin-slide .embla__slide { padding: 5px 12px}

.tamnhin-slide .embla__slide:hover .tamnhin_item { translate: 0 -5px}

.tamnhin-slide .embla__slide:hover .tamnhin_item::before { box-shadow: 0 0 clamp(5px, .8130081301vw, 10px) -2px #f9cb53}

.tamnhin_item { position: relative; isolation: isolate; transition: .4s}

.tamnhin_item::before { content: ""; display: block; position: absolute; inset: 35px 0 0 0; z-index: -1; padding: 59px 20px 41px 20px; border: 1px solid #b89436; border-radius: 10px; background: #fff; transition: .4s}

.tamnhin-info { padding: clamp(10px, 1.6260162602vw, 20px); padding-top: 0}

.tamnhin-title { color: #2a2a29; text-align: center; font-family: var(--font-third); font-weight: 700; font-size: clamp(16px, 1.9512195122vw, 24px); line-height: 1.25; letter-spacing: .48px; text-transform: uppercase; margin-bottom: clamp(8px, 1.3821138211vw, 17px)}

.tamnhin-desc { color: #2f2f2f; text-align: center; font-family: var(--font-family); font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: -0.14px; margin-top: clamp(8px, 1.3821138211vw, 17px)}

.tintuc-video-title-main { color: #fff; font-family: var(--font-family); font-weight: bold; font-size: 16px; line-height: 30px; letter-spacing: -0.16px; background: var(--primary-color); margin-bottom: clamp(15px, 2.4390243902vw, 30px); width: min(100%, 196px); padding: 5px 0; -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%)}

.video-title { color: #0f1c30; text-align: center; font-family: var(--font-family); font-weight: bold; font-size: clamp(16px, 1.6260162602vw, 20px); line-height: 1.5; letter-spacing: -0.2px; margin: 9px 0}

.tintucnb2-title { color: #0f1c30; font-family: var(--font-family); font-weight: bold; font-size: 16px; line-height: 30px; letter-spacing: -0.16px; margin-bottom: 3px}

.tintucnb2-desc { color: #000; font-family: var(--font-family); font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: -0.14px}

.tintucnb2-slide { height: 480px}

.wrap-album { margin: clamp(20px, 5.6910569106vw, 70px) 0}