:root { --color-m-blue: #f0f8fc; --color-blue: #2C5BAA; --color-min-blue: #0086CD; --color-tra-blue: #d7eaf5; --color-min: #24e9e2; --color-red: #c31829; --color-medium-red: #cc2c32; --color-dark-red: #c31829; --color-green: #28a745; --color-dark-green: #207d36; --color-black: #212529; --color-gray: #6c757d; --background-static: #2C5BAA; --background-hover: #eceb1b; --color-static: #000; --color-hover: #0086CD }
@keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@-webkit-keyframes spin {
	to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes blink {
	0% { opacity: 1 }
	50% { opacity: 0 }
	100% { opacity: 1 }
}
@-webkit-keyframes blink {
	0% { opacity: 1 }
	50% { opacity: 0 }
	100% { opacity: 1 }
}
@keyframes shake-anim {
	0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg) }
	10%, 30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg) }
	20%, 40% { -moz-transform: rotate(25deg) scale(1) skew(1deg) }
	100%, 50% { -moz-transform: rotate(0) scale(1) skew(1deg) }
}
@-webkit-keyframes shake-anim {
	0%, 100%, 50% { -webkit-transform: rotate(0) scale(1) skew(1deg) }
	10%, 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg) }
	20%, 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg) }
}
.popup-custom .modal-content { border-radius: 0; border: 0 }
.popup-custom .modal-content .modal-body { padding: 10px }
.popup-custom .close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; z-index: 2; color: #888; cursor: pointer; border: 1px solid #eee; background-color: #fff; opacity: 1 !important }
#popup-quickview .modal-dialog { max-width: 1140px }
.opacity-0 { opacity: 0 }
@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 100px, 0) }
	100% { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown {
	0% { opacity: 0; transform: translate3d(0, -100px, 0) }
	100% { opacity: 1; transform: translate3d(0, 0, 0) }
}
@keyframes scaleLarge {
	0% { opacity: 0; transform: scale(2) }
	100% { opacity: 1; transform: scale(1) }
}

/*
a.mucluc-dropdown-list_button:before { content: "03a"; font-family: FontAwesome; font-style: normal; font-weight: 400; background: #fff; color: var(--color-static) !important; font-size: 20px; width: 35px; height: 35px; display: inline-block; line-height: 38px; text-align: center; border: 1px solid var(--color-static) }
.meta-toc.fiedx { position: fixed; left: 5px; top: 200px; z-index: 111 }
.meta-toc .mucluc-dropdown-list_button { display: none }
.meta-toc.fiedx .mucluc-dropdown-list_button { display: block }
.meta-toc:not(.fiedx) .box-readmore { display: block !important }
.box-readmore { padding: 10px; background-color: #f5f5f5; width: 100%; margin-top: 2px; border: 1px solid #ddd; font-size: 13px; margin-bottom: 10px }
.meta-toc.fiedx .box-readmore { width: 350px; display: none }
.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: 0; padding-left: 0 !important; margin-top: 8px }
.box-readmore ul li { display: table; counter-increment: item; margin: 0 0 5px 0 }
.box-readmore ul li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 5px }
.box-readmore ul li a { color: #000 !important; cursor: pointer; font-weight: 500; font-size: 14px }
.box-readmore ul li li a { font-weight: 400 }
.box-readmore ul li a:hover { color: #767676 } */

/* Toc */
.meta-toc { padding: 8px 15px; border: 1px solid #1d86f352; margin-bottom: 2rem; border-radius: 5px; background-color: #fcfeff; box-shadow: 0 1px 1px rgb(0 0 0 / 10%); }
.box-readmore { display: none; max-height: 250px; padding-right: 10px; overflow-y: overlay; }
.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; }
.meta-toc.fixed .box-readmore ul { padding: 15px !important; }
.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; font-size: 13px; font-weight: 600; }
.box-readmore ul li a { color: #333333; cursor: pointer; font-weight: 600; font-size: 14px; }
.box-readmore ul li a:hover { color: var(--color-blue); }
.box-readmore ul li ul li a { font-weight: 400; }
.mucluc-dropdown-list_button { display: flex; justify-content: space-between; font-size: 15px; cursor: pointer; }
.mucluc-dropdown-list_button svg { border: solid 1px var(--color-blue); width: 35px; border-radius: 3px; }
.mucluc-dropdown-list_button svg path { fill: var(--color-blue); }
p.ez-toc-title { font-weight: 700; color: var(--color-blue); text-transform: capitalize; }
.meta-toc.fixed { position: fixed; top: 120px; left: 6px; z-index: 11; max-width: 350px; padding: 0;    /* border: none; */    /* box-shadow: none; */ }
.meta-toc.fixed p { display: none; }
.meta-toc.fixed .mucluc-dropdown-list_button { justify-content: end; background: #d2f0ff; padding: 5px; border-radius: 5px; }
.meta-toc.fixed .mucluc-dropdown-list_button svg { color: #000 !important; border-color: #000 !important; }
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; pointer-events: none }
#loader-wrapper #wrap { background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; text-align: center; width: 100%; height: 100%; z-index: 999999 }
#loader-wrapper.show1 #wrap { background: 0 0 }
#loader-wrapper:after { -webkit-mask: url(../images/mask-01.png); mask: url(../images/mask-01.png); -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(255, 255, 255, 1); z-index: 99999 }
#loader-wrapper.show1::after { -webkit-animation: MaskPlay 1s steps(22) forwards; animation: MaskPlay 1s steps(22) forwards }
#loader-wrapper.show1 #wrap { opacity: 0 }
.loading-text ul { margin-top: 1.875rem }
.loading-text ul li { -webkit-animation: anime 1.5s infinite linear; animation: anime 1.5s infinite linear; display: inline-block; font-family: var(--bs-font-monospace); font-size: 1.875rem; letter-spacing: 1px }
.loading-text ul li:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s }
.loading-text ul li:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s }
.loading-text ul li:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s }
.loading-text ul li:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s }
.loading-text ul li:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s }
.loading-text ul li:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s }
.loading-text ul li:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s }
.loader { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: center; left: 0; padding-bottom: 3.125rem; position: fixed; top: 0; width: 100%; z-index: 100001 }
@-webkit-keyframes anime {
	0% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0) }
	50% { color: #ffc107; letter-spacing: 5px; text-shadow: 5px 10px 1px #000; transform: translateY(-10px) }
	100% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0) }
}
@keyframes anime {
	0% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0) }
	50% { color: #ffc107; letter-spacing: 5px; text-shadow: 5px 10px 1px #000; transform: translateY(-10px) }
	100% { color: grey; letter-spacing: 1px; text-shadow: 1px 1px 0 #000; transform: translateY(0) }
}
@-webkit-keyframes MaskPlay {
	from { -webkit-mask-position: 0 0; mask-position: 0 0 }
	to { -webkit-mask-position: 100% 0; mask-position: 100% 0 }
}
@keyframes MaskPlay {
	from { -webkit-mask-position: 0 0; mask-position: 0 0 }
	to { -webkit-mask-position: 100% 0; mask-position: 100% 0 }
}
.open-sans { font-family: "Open Sans", sans-serif }
.alex-brush-regular { font-family: "Alex Brush", cursive }
.roboto { font-family: Roboto, sans-serif }
.crimson-pro { font-family: "Crimson Pro", serif }
.national-park { font-family: "National Park", sans-serif }
.playfair-display { font-family: "Playfair Display", serif }
.dancing-script { font-family: "Dancing Script", cursive }
.great-vibes-regular { font-family: "Great Vibes", cursive }
body { font-size: 15px; font-family: "Open Sans", sans-serif; font-weight: 400 }
blockquote { font-style: italic; font-family: Georgia, Times, "Times New Roman", serif; padding: 2px 0; border-style: solid; border-color: #ccc; border-width: 0; padding-left: 20px; padding-right: 8px; border-left-width: 5px }
blockquote p { margin-bottom: 0 }
.row-10 { margin-left: -5px; margin-right: -5px }
.row-20 { margin-left: -10px; margin-right: -10px }
.row-30 { margin-left: -15px; margin-right: -15px }
.col-30 { padding-left: 15px }
.col-20 { padding-left: 10px; padding-right: 10px }
.mg-col-10 { padding-left: 5px; padding-right: 5px }
.padding-top-bottom { padding: 2.5rem 0 }
.pad-top { padding-top: 2.5rem }
.pad-bottom { padding-bottom: 2.5rem }
.mg-top { margin-top: 2.5rem }
.mg-bottom { margin-bottom: 2.5rem }
.hover_xemthem { transition: .4s }
.hover_xemthem:hover { letter-spacing: 2px }
img { max-width: 100%; height: auto; vertical-align: top }
a, input, textarea { outline: 0; padding: 0; text-decoration: none }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.w-clear:after { display: block; content: ""; clear: both }
.hidden { display: none }
.clear { clear: both }
.none { display: none }
.hidden-seoh { visibility: hidden; height: 0; margin: 0; overflow: hidden }
.wrap-content { max-width: 1320px; margin: auto; width: calc(100% - 20px) }
.blue-content { max-width: 1320px; margin: auto; width: calc(100% - 20px) }
.blue-content1 { max-width: 1920px; margin: auto; width: calc(100% - 20px) }
.blue-content2 { max-width: 1920px; margin: auto }
.content-main { max-width: 1320px; margin: 0 auto 1rem }
.fix_head { position: fixed !important; top: 0; width: 100%; z-index: 999 !important }
.mg-l-10 { margin-left: -10px }
.mg-r-10 { margin-right: -10px }
.mg-b-20 { margin-bottom: 20px }
.time-main { margin-bottom: .75rem; color: #666; font-size: 13px; font-weight: 600 }
.time-main i { vertical-align: baseline; font-size: 16px; color: var(--color-min-blue); margin-right: 5px }
.time-main span { margin-right: 1rem }
.share { padding: 17px 15px 10px 15px; line-height: normal; background: rgba(128, 128, 128, .15); margin-bottom: 1rem; border-radius: 5px }
.share b { display: block; margin-bottom: 5px }
.control-owl { position: absolute; width: 100%; z-index: 2; left: 0; top: calc(50% - 45px / 2) }
.control-owl button { opacity: .5; top: 0; position: absolute; outline: 0; border: 0; padding: 0; margin: 0; display: block; cursor: pointer; color: #fff; width: 45px; height: 45px; text-align: center; font-size: 25px; margin: 0; background-color: #000; border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.control-owl button:hover { opacity: 1 }
.control-owl button.owl-prev { left: 20px }
.control-owl button.owl-next { right: 20px }
.custom-form-row { margin-right: -10px; margin-left: -10px }
.custom-form-row>.col, .custom-form-row>[class*=col-] { padding-right: 10px; padding-left: 10px }
.text-sm { font-size: .875rem !important }
img.lazy { opacity: 0 }
img:not(.initial) { -webkit-transition: opacity 1s; transition: opacity 1s }
img.error, img.initial, img.loaded { opacity: 1 }
img:not([src]) { visibility: hidden }
.wrap-user { width: 100%; max-width: 550px; margin: auto; border: 1px solid #bce8f1; border-radius: 5px }
.title-user { background-color: #d9edf7; padding: 12px 15px; border-radius: 5px 5px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.title-user span { color: #31708f }
.title-user a { color: #0056b3; font-size: 12px }
.form-user { padding: 20px 15px }
.input-user { margin-bottom: .75rem }
.input-user input { font-size: 14px }
.button-user { margin-bottom: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.button-user input { font-size: 14px }
.checkbox-user, .radio-user { cursor: pointer }
.checkbox-user input { top: calc(50% - 1.25rem / 2); height: auto }
.checkbox-user label { font-size: 14px; cursor: pointer }
.checkbox-user label::after, .checkbox-user label::before { top: calc(50% - 1rem / 2) }
.radio-user { margin-right: 1rem }
.radio-user:last-child { margin-right: 0 }
.radio-user label::after, .radio-user label::before { top: calc(50% - 1rem / 2) }
.note-user { font-size: 14px; border-top: 1px solid #ddd; padding-top: .5rem }
.blue-content .alert-warning { color: var(--color-blue); background-color: var(--color-m-blue); border-color: var(--color-min-blue) }
.blue-content .alert-warning strong { font-size: 14px; font-weight: 500 }
.ContactUs { position: fixed; bottom: 1.125em; right: 1.125em; z-index: 999997 }
.ContactUs__chatBotOnly { position: fixed; bottom: 1.5em; right: 1.5em; padding: 0; z-index: 999997; background: 0 0 }
.ContactUs__chatBotOnly .ContactUs__icon { width: 4.5em; height: 4.5em; border-radius: 50%; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, .3); box-shadow: 0 3px 10px rgba(0, 0, 0, .3) }
.ContactUs__button { all: unset; position: relative; padding: 6px 6px; font-weight: 600; color: #000; background: var(--background-static); transition: all .35s; display: flex; justify-content: space-between; align-items: center; border-radius: 10px; border: 2px solid var(--background-static) }
.ContactUs__button span { position: relative; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.ContactUs__button::after, .ContactUs__button::before { content: ""; top: 0; right: 0; bottom: 0; left: 0; position: absolute; border-radius: 8px; -webkit-transition: all .35s; transition: all .35s; border-radius: 0 }
.ContactUs__button::before { background: #fff; opacity: 1 }
.ContactUs__button::after { background: #fff; opacity: 0 }
.ContactUs__button.active { color: var(--background-static) }
.ContactUs__button.active .ContactUs__button--icon__wrap img { filter: brightness(0) saturate(100%) invert(34%) sepia(11%) saturate(3975%) hue-rotate(182deg) brightness(94%) contrast(95%) }
.ContactUs__button.active::before { opacity: 0 }
.ContactUs__button.active::after { opacity: 1 }
.ContactUs__button.box { display: grid; place-content: center; color: #fff; text-shadow: 0 1px 0 var(--color-min-blue); --border-angle: 0turn; --main-bg: conic-gradient(from var(--border-angle), var(--color-min-blue), #9dc0fa 5%, var(--color-min-blue) 60%, #051d29 95%); border: solid 4px transparent; border-radius: 5px; --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #3782cc, #1352ab 99%, transparent); background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box; background-position: center center; animation: bg-spin 3s linear infinite }
@keyframes bg-spin {
	to { --border-angle: 1turn }
}
.ContactUs__button.box:hover { animation-play-state: paused }
@property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn }
.ContactUs__button--icon { width: 2.5em; height: 2.5em; position: relative; z-index: 2; fill: #fff !important; -webkit-transition: fill .35s; transition: fill .35s }
.ContactUs__button--icon__wrap { width: 40px; position: relative; z-index: 1 }
.ContactUs__button--icon__wrap img { filter: brightness(0) saturate(100%) invert(36%) sepia(80%) saturate(2148%) hue-rotate(177deg) brightness(90%) contrast(101%) }
.ContactUs__button--icon__wrap::after { content: ""; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; position: absolute; background: rgba(255, 255, 255, 0); -webkit-transition: all .35s; transition: all .35s }
.ContactUs__form { position: fixed; bottom: 1.125em; left: 50%; z-index: 999998; padding: 1.5em; background-color: #fff; border-radius: 1rem; -webkit-box-shadow: 0 .25em 1.375em rgba(0, 0, 0, .12); box-shadow: 0 .25em 1.375em rgba(0, 0, 0, .12); -webkit-transform: translate(-50%, calc(100% + 1.125em)); -ms-transform: translate(-50%, calc(100% + 1.125em)); transform: translate(-50%, calc(100% + 1.125em)); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; width: 100% }
.ContactUs__form.visible { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0) }
.ContactUs__form iframe { width: 100% !important; min-height: 35em }
.ContactUs__form .ContactUs__menu--close { opacity: 1; position: absolute; top: .75em; right: .75em }
.ContactUs__menu { min-width: 205px; overflow: hidden; padding: 0; margin: 0; list-style: none }
.ContactUs__menu--wrap { position: absolute; border-radius: 12px; bottom: calc(100% + 5px); right: 0; text-align: right; padding: 10px; background-color: #fff; filter: drop-shadow(0 .25em 1.375em rgba(0, 0, 0, .12)); overflow: hidden; transition: max-height .4s ease-out, visibility .4s ease-out, opacity .2s ease-out; visibility: hidden; opacity: 0; display: unset !important; box-shadow: rgba(0, 0, 0, .15) 0 3px 3px 0 }
.ContactUs__menu--wrap::after, .ContactUs__menu--wrap::before { content: ""; position: absolute; background-color: #fff }
.ContactUs__menu--wrap.visible { max-height: 800px; visibility: visible; opacity: 1 }
.ContactUs__menu--wrap.visible .ContactUs__menu--close, .ContactUs__menu--wrap.visible .ContactUs__menu--text { opacity: 1 }
.ContactUs__menu--wrap.visible .ContactUs__menu--link { opacity: 1 }
.ContactUs__menu--item { margin-bottom: 5px; overflow: hidden }
.ContactUs__menu--item.top { position: relative; z-index: 2 }
.ContactUs__menu--link[class] { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; height: auto; padding: 7px 10px; border-radius: 1rem; font-size: 1rem; font-weight: 600; color: #000; text-decoration: none; opacity: 0; -webkit-transform: translateZ(10px); transform: translateZ(10px); -webkit-transition: all .25s .15s; transition: all .25s .15s; z-index: 1; cursor: pointer }
.ContactUs__menu--link[class]::after { content: ""; top: 0; right: 0; bottom: 0; left: 0; right: 0; position: absolute; -webkit-transform: translateX(calc(100% + .75em)); -ms-transform: translateX(calc(100% + .75em)); transform: translateX(calc(100% + .75em)); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; border-radius: 1rem; z-index: -1 }
.ContactUs__menu--link[class]:hover { text-decoration: none !important; color: #000 !important }
.ContactUs__menu--link[class]:hover::after { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) }
.ContactUs__menu--link[class].green::after { background-color: #daf4e7 }
.ContactUs__menu--link[class].red::after { background-color: #fee0e4 }
.ContactUs__menu--link[class].violet::after { background-color: #efe6f8 }
.ContactUs__menu--link[class].orange::after { background-color: #feefe0 }
.ContactUs__menu--link[class].blue::after { background-color: #dfeafd }
.ContactUs__menu--link[class].chat[class]>div[id]>div { width: 3.5em; height: 3.5em; position: static !important }
.ContactUs__menu--link[class] .fakeChatButton__msg { width: 19.94625em }
.ContactUs__menu--link[class] .ContactUs__icon, .ContactUs__menu--link[class]>div:not(.fakeChatButton) { width: 2.5em; height: 2.5em; margin-left: 1em }
.ContactUs__menu--close { all: unset; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; margin-bottom: 10px; cursor: pointer }
.ContactUs__menu--close svg { width: 1em; height: 1em }
.ContactUs__menu--close { opacity: 0; -webkit-transition-delay: 0s; transition-delay: 0s }
#popup-cart .modal-title { text-transform: uppercase }
#popup-cart .modal-body .wrap-cart { padding: 0; -webkit-box-shadow: none; box-shadow: none; border: 0 }
#popup-cart .modal-footer { padding: .75rem 0 0 0; border-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.buymore-cart { color: #ec2d3f; cursor: pointer; margin: 0 }
.buymore-cart i { margin-right: 2px; margin-top: 5px; vertical-align: top; font-size: 12px }
.wrap-cart { padding: 20px 15px; background: #fff; border: 1px solid #d8d8d8; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .15); box-shadow: 0 0 20px rgba(0, 0, 0, .15) }
.top-cart { border-right: 1px solid #eee }
.procart { padding: 20px 10px; border: 1px solid #eee; border-top: 0 }
.pic-procart { text-align: center }
.pic-procart img { max-height: 100px; height: inherit }
.pic-procart .del-procart { color: #999; font-size: 12px; display: block; margin-top: 5px; cursor: pointer }
.pic-procart .del-procart:hover { color: red }
.name-procart a { font-size: 14px; color: #000; display: block }
.name-procart a:hover { color: #ec2d3f }
.properties-procart { display: block }
.properties-procart p { display: inline-block; margin-bottom: 0 }
.properties-procart p:first-child { margin-right: 10px }
.properties-procart p strong { font-weight: 600 }
.quantity-procart p { margin-bottom: 0 }
.quantity-counter-procart { border: 1px solid #dfdfdf; width: 100%; height: 30px; line-height: normal; text-align: center; border-radius: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.counter-procart { background-color: transparent; border: 0; width: 30%; color: #333; outline: 0; cursor: pointer; font-size: 23px }
.counter-procart:focus, .counter-procart:hover { color: #ec2d3f }
.counter-procart:disabled { color: #ccc; cursor: not-allowed }
.counter-procart:disabled:hover { color: #ccc; cursor: not-allowed }
.counter-procart-minus { line-height: 26px }
.counter-procart-plus { line-height: 24px }
.quantity-counter-procart .quantity-procart { width: 40%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 0; border-right: 1px solid #dfdfdf; border-left: 1px solid #dfdfdf; outline: 0; -webkit-box-shadow: none; box-shadow: none; padding: 0; color: #333; text-align: center }
.price-procart { width: 20%; text-align: right }
.price-procart-rp { display: none; width: 100%; margin-bottom: 10px; font-size: 13.5px }
.price-new-cart { color: #ec2d3f; margin-bottom: 0 }
.price-old-cart { color: #999; text-decoration: line-through }
.procart-label { border: 0; background: #eee; padding: 10px; margin: 0; text-transform: capitalize }
.money-procart { margin-top: 15px }
.total-procart { background: #eee; padding: 7px 10px; border: 1px solid #dddfe2; margin-bottom: -1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.total-procart p { margin-bottom: 0; font-size: 15px }
.total-procart p:last-child { color: #ec2d3f }
.section-cart { position: -webkit-sticky; position: sticky; top: 15px }
.title-cart { font-size: 15px; text-transform: uppercase; color: #000; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 15px }
.information-cart { margin-bottom: 1.5rem }
.input-cart { margin-bottom: .5rem; position: relative }
.input-cart textarea { resize: none; height: 100px }
.input-cart select { cursor: pointer }
.payments-cart { text-align: left; margin-bottom: 5px; min-height: auto; padding-left: 0; margin-left: 20px; position: relative }
.payments-cart:last-child { margin-bottom: 0 }
.payments-cart input { top: 10px; position: absolute }
.payments-label { cursor: pointer; background: #eee; display: block; padding: 10px 15px; border-radius: 3px; margin-bottom: 0; color: #313131 !important }
.payments-label::after, .payments-label::before { top: calc(50% - 1rem / 2) }
.payments-label.active { background: var(--background-static); color: #fff !important }
.payments-info { opacity: 0; visibility: hidden; height: 0; overflow: hidden; background: #f5efef; border-radius: 5px }
.payments-info p { margin-bottom: 1em }
.payments-info.active { padding: 10px 15px; margin-top: 5px; opacity: 1; visibility: visible; height: auto }
.btn-cart { text-transform: capitalize }
.empty-cart { padding: 25px 30px; text-align: center }
.empty-cart i { color: red; font-size: 70px }
.empty-cart p { margin: 15px 0; color: #333; font-size: 18px }
.comment-title { font-size: 18px }
.comment-show { display: block !important }
.comment-point { font-size: 47px; color: #fe302e }
.comment-star { font-size: 0; position: relative; display: inline-block; vertical-align: top; margin-bottom: .5rem }
.comment-star span { display: block; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; overflow: hidden; text-align: left; white-space: nowrap }
.comment-star i { display: inline-block; margin: .1rem; color: #b8b8b8; text-rendering: auto; font-size: 20px }
.comment-star i:nth-child(1) { margin-left: 0 }
.comment-star span i { color: #ffc120 }
.comment-progress { width: 100%; margin-bottom: .375rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.comment-progress:last-child { margin-bottom: 0 }
.comment-progress .progress { height: 12px; margin-right: 10px; margin-left: 5px; width: calc(100% - 90px); border-radius: 10px; margin-bottom: 0 !important; }
.comment-progress .progress-bar#has-rate { background-color: #23b445 }
.comment-progress .progress-num { font-size: 15px; width: 25px; text-align: center; color: #787878 }
.comment-progress .progress-total { font-weight: 600; text-align: left; color: #787878; width: 50px }
.comment-write { display: none }
.review-rating-star { font-size: 0 }
.review-rating-star-icon .fa { font-weight: 400; font-style: normal; display: inline-block; margin: .1rem; font-size: 21px; cursor: pointer; color: #f0c808 }
.review-rating-star-icon .fa.star-empty { color: #dedddc }
.review-rating-star-icon .fa.star-not-empty { color: #f0c808 }
.review-rating-star-icon .fa:nth-child(1) { margin-left: 0 }
.review-fileuploader { padding: 20px 15px; text-align: center; background-color: #fff; cursor: pointer; border: 2px dashed #c2cdda; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.review-fileuploader .review-fileuploader-text { color: #90a0bc }
.review-file-uploader .fileuploader { padding: 0; margin: 0; background: 0 0 }
.review-file-uploader .fileuploader-items .fileuploader-items-list { margin: 1rem -5px 0 -5px }
.review-file-uploader .fileuploader-items .fileuploader-items-list:after { display: block; content: ""; clear: both }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item { padding: 0; width: calc(100% / 7 - 10px); float: left; margin: 0 5px 5px 5px; border-bottom: 0 }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .columns { display: block }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail { width: auto; height: auto }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail .fileuploader-item-image { height: auto; padding: 50% 0 }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-thumbnail .fileuploader-item-image img { position: absolute; top: 0; left: 0; max-width: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transform: none; transform: none }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-title { padding: 0; margin-top: .5rem; text-align: center; display: none }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-actions { margin: 0; position: absolute; top: 0; right: -5px }
.review-file-uploader .fileuploader-items .fileuploader-items-list .fileuploader-item .column-infos input { border: 1px solid #ddd; border-radius: .25rem }
.review-poster-video-avatar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
.review-poster-video-avatar .avatar-detail { width: 95px; height: 95px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.review-poster-video-avatar .avatar-detail img { max-width: 95px; max-height: 95px }
#review-content { height: 100px }
.carousel-comment-media .carousel-control a { opacity: 1; width: 45px; height: 45px; top: calc(50% - 45px / 2); bottom: inherit }
.carousel-comment-media .carousel-control a span { display: block; cursor: pointer; color: #222; width: 45px; height: 45px; padding: 5px; text-align: center; background-color: #fff; -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .12); box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .12); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.carousel-comment-media .carousel-control a.carousel-control-prev { left: 20px }
.carousel-comment-media .carousel-control a.carousel-control-prev span { padding-right: 9px }
.carousel-comment-media .carousel-control a.carousel-control-next { right: 20px }
.carousel-comment-media .carousel-control a.carousel-control-next span { padding-left: 8px }
.carousel-comment-media .carousel-indicators { position: static; margin: 0 0 1rem 0 }
.carousel-comment-media .carousel-indicators li { width: auto; max-width: 60px; height: auto; text-indent: inherit; -webkit-box-flex: 0; -ms-flex: none; flex: none; margin: 0 0 3px 0; border: 2px solid transparent; opacity: 1; cursor: -webkit-zoom-in; cursor: zoom-in }
.carousel-comment-media .carousel-indicators li.active { border-color: #ffc120; cursor: -webkit-zoom-out; cursor: zoom-out; -webkit-transform: scale(1.05); transform: scale(1.05) }
.carousel-comment-media .carousel-inner { max-width: 550px; -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .12); box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .12); margin: auto }
.carousel-comment-media .carousel-inner .carousel-lists .carousel-comment-media-item-video #file-video { max-width: 100%; width: 100%; height: 500px; vertical-align: top; display: inline-block; background-color: #000 }
#form-reply { display: none }
.comment-item { margin-bottom: 3rem }
.comment-item-poster { width: 200px; margin-right: 30px; text-align: center }
.comment-item-letter { border-radius: 50%; background-color: #d3d2d3; color: #919090; width: 65px; height: 65px; text-transform: uppercase; display: inline-block; vertical-align: top; line-height: 67px; font-size: 18px; font-weight: 700; margin-bottom: .5rem }
.comment-item-name { margin-bottom: .25rem; text-transform: capitalize }
.comment-item-posttime { font-size: 12px; color: #999 }
.comment-item-information { width: calc(100% - 230px) }
.comment-item-star { float: left; margin-right: 10px }
.comment-item-star i { font-size: 17px }
.comment-item-title { font-size: 15px; font-weight: 500 }
.comment-replies { position: relative; background: #f8f9fa; border: 1px solid #dfdfdf; padding: 1.75rem 1.5rem }
.comment-replies:after { content: ""; position: absolute }
.comment-replies:before { content: ""; position: absolute; z-index: 1; top: -13px; left: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 13px solid #f8f9fa }
.comment-replies:after { top: -14px; left: 9px; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 14px solid #dfdfdf }
.comment-replies-item { margin-bottom: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
.comment-replies-item:last-child { margin-bottom: 0 }
.comment-replies-letter { width: 45px; height: 45px; margin-right: 10px; line-height: 45px; padding-left: 1px; font-size: 14px; border-radius: 50%; background-color: #e5e3e5; color: #919090; text-transform: uppercase; display: inline-block; vertical-align: top; font-weight: 500; text-align: center; margin-top: .125rem }
.comment-replies-letter.admin { position: relative; background-color: #189eff; text-indent: 9999px; overflow: hidden }
.comment-replies-letter.admin:before { content: "QTV"; text-indent: 0; color: #fff; font-weight: 500; text-transform: uppercase; font-size: 13px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
.comment-replies-info { width: calc(100% - 55px) }
.comment-replies-name { font-weight: 500; margin-bottom: .125rem }
.comment-replies [class*=btn-load-more-] { border: 0; outline: 0; padding: 0; background: 0 0 }
.comment-media-play { z-index: 1; position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%) }
.comment-media-play svg { -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, .3); box-shadow: 1px 1px 15px rgba(0, 0, 0, .3); border-radius: 50%; background-color: rgba(255, 255, 255, .15) }
.comment-media-play svg .comment-media-play-stroke-dotted { opacity: 0; stroke-dasharray: 4, 5; stroke-width: 1px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: spin 4s infinite linear; animation: spin 4s infinite linear; -webkit-transition: opacity 1s ease, stroke-width 1s ease; transition: opacity 1s ease, stroke-width 1s ease }
.comment-media-play svg .comment-media-play-stroke-solid { stroke-dashoffset: 0; stroke-dasharray: 300; stroke-width: 4px; -webkit-transition: stroke-dashoffset 1s ease, opacity 1s ease; transition: stroke-dashoffset 1s ease, opacity 1s ease }
.comment-media-play svg .comment-media-play-icon { -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out }
.comment-media-play:hover svg .comment-media-play-stroke-dotted { stroke-width: 4px; opacity: 1 }
.comment-media-play:hover svg .comment-media-play-stroke-solid { opacity: 0; stroke-dashoffset: 300 }
.comment-media-play:hover svg .comment-media-play-icon { -webkit-transform: scale(1.05); transform: scale(1.05) }
.head { background-color: #fff }
.head .head-top { color: #fff; background-color: var(--background-static) }
.slogan-head { height: 40px; display: flex; align-items: center; width: 40% }
.info-head { margin-bottom: 0 }
.info-head i { vertical-align: top; margin: 3px 5px 0 0; font-size: 16px }
.head .head-bottom .wrap-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.social-head li { width: 30px }
.head-bottom .wrap-content { padding: 10px 0 }
.user-head a { color: #333; padding-right: 9px; margin-right: 7px; position: relative; display: inline-block; vertical-align: top; text-decoration: none; font-size: 16px; font-weight: 600; }
.user-head a:last-child { padding-right: 0; margin-right: 0 }
.user-head a:last-child:after { display: none }
.menu { background: 0 0; position: relative; z-index: 10 }
.menu ul { width: 100%; padding: 0; margin: auto; list-style: none }
.menu ul.menu-main { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-end; gap: 12px }
.menu ul li { position: relative; z-index: 1 }
.menu ul li.menu-line { width: 1px; height: 15px; background-color: rgba(0, 0, 0, .1) }
.menu ul li a { display: block; position: relative; font-size: 15px; color: #333; padding: 12px 10px; font-weight: 600; text-transform: capitalize; text-decoration: none; cursor: pointer }
.menu ul li a svg, .menu ul li a img { max-height: 20px; max-width: 20px; vertical-align: middle }
.menu ul li a:before { content: ''; width: 100%; height: 100%; background: #fff; position: absolute; bottom: 0; left: 0; border-radius: 5px; transition: all .5s; z-index: -1; opacity: 0 }
.menu ul li a.bg-1:before { background: #eee2f7 }
.menu ul li a.bg-2:before { background: #ffe3f2 }
.menu ul li a.bg-3:before { background: #d2e8ff }
.menu ul li a.bg-4:before { background: #f2e9f9 }
.menu ul li a.bg-5:before { background: #ffeedf }
.menu ul li a.bg-6:before { background: #dcf7ff }
.menu ul li a.bg-7:before { background: #ffe3f2 }
.menu ul li a.bg-8:before { background: #d2e8ff }
.menu ul li a.bg-9:before { background: #ffeedf }
.menu ul li a.active:before, .menu ul li:hover>a:before { opacity: .8 }
.menu ul li a.has-child { padding-right: 16px; margin-right: 0 }
.menu ul li a.has-child:after { content: ""; position: absolute; bottom: calc(50% - 4px / 2); right: 5px; width: 5px; height: 5px; border: 1px solid #333; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) }
.menu ul li ul { position: absolute; min-width: 250px; background-color: #fafafa; border-radius: .25rem; -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, .15); box-shadow: 1px 1px 15px rgba(0, 0, 0, .15); -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 }
.menu ul li:hover>ul { -webkit-transform: perspective(600px) rotateX(0); transform: perspective(600px) rotateX(0); transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; opacity: 1; visibility: visible }
.menu ul li ul li { padding-left: 0; padding-right: 0 }
.menu ul li ul li a { font-size: 14px; color: #313131; border-bottom: 1px solid #ececec; padding: 10px 10px 9px 10px; text-transform: capitalize; font-weight: 600 }
.menu ul li ul li a.has-child { margin-right: 0 }
.menu ul li ul li a.has-child:after { border-color: #313131; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.menu ul li ul li a.active { color: #ec2d3f }
.menu ul li ul li a.active.has-child:after { border-color: #ec2d3f }
.menu ul li ul li:last-child>a { border-bottom: 0 }
.menu ul li ul li:hover>a { color: var(--color-blue) }
.menu ul li ul li:hover>a.has-child:after { border-color: #ec2d3f }
.menu ul li ul li ul { top: 0; left: 100%; margin-top: 0 }
.menu ul li ul li a:before { content: ''; width: 0%; height: 2px; position: absolute; z-index: -1; background: var(--color-min-blue); border-radius: 0; transition: all .5s }
.menu ul li ul li:hover>a:before { width: 100% }
.menu-res { z-index: 100; background: 0 0; position: relative; display: none }
.menu-bar-res { height: 50px; padding: 0 10px; background: var(--color-min-blue); background: linear-gradient(45deg, #003899 0, rgba(110, 204, 255, 1) 50%, #003899 100%) }
#menu { display: none }
#menu:before { content: ''; width: 80%; height: 100%; left: -10px; position: absolute; top: 0; left: -10px; z-index: -10 }
#menu:after { content: ''; width: 80%; height: 100%; left: -10px; background: #75c2eb38; position: absolute; top: 0; left: -20px }
#menu .blue-content { width: 100%; height: 100vh; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1rem; padding: 0 !important; z-index: 1; opacity: 1 }
.blue-web-logo-mb { width: 100%; text-align: center; padding: 10px; position: absolute; top: 20%; left: 50%; transform: translate(-50%, -20%); z-index: -6; opacity: .1 }
.blue-web-logo-mb img { max-height: 270px }
.mm-navbar.mm-navbar_sticky { width: 100% }
.mm-listview { width: 100% }
.nav_info_bottom ul { padding: 0; margin: 0; list-style: none; text-transform: none }
.nav_info_bottom span { font-weight: 500; display: block }
.nav_info_bottom ul li { margin-bottom: 10px; font-size: 15px }
.nav_info_bottom ul li i { color: var(--background-static); font-size: 17px; vertical-align: bottom; margin-right: 5px }
.nav_info_bottom { width: 100%; text-align: center }
.blue-web-nav-mobile { width: 40px; height: 40px; cursor: pointer; text-align: center; line-height: 38px; color: #fff; font-size: 17px; margin: 0; background: 0 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; align-content: center }
#hamburger { display: block; width: 30px; height: 23px; position: relative }
#hamburger span, #hamburger:after, #hamburger:before { background: var(--color-m-blue); content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0 }
#hamburger:before { top: 2px }
#hamburger span { top: 10px }
#hamburger:after { top: 18px }
#hamburger span, #hamburger:after, #hamburger:before { -webkit-transition: none .5s ease .5s; transition: none .5s ease .5s; -webkit-transition-property: transform, top, bottom, left, opacity; transition-property: transform, top, bottom, left, opacity }
.mm-wrapper_opening #hamburger:after, .mm-wrapper_opening #hamburger:before { top: 10px }
.mm-wrapper_opening #hamburger span { left: -50px; opacity: 0 }
.mm-wrapper_opening #hamburger:before { transform: rotate(45deg) }
.mm-wrapper_opening #hamburger:after { transform: rotate(-45deg) }
.mm-menu_opened { display: block !important }
.mm-listview li:last-child { border-color: #fff !important }
.mm-listview li a { font-weight: 600; text-transform: capitalize }
.mm-listview li a svg, .mm-listview li a img { max-height: 20px; max-width: 20px; vertical-align: middle }
.mm-menu, .mm-navbar, .mm-panel, .mm-panels { background: #fff !important; opacity: 1; z-index: 2 }
.title-call-mn { color: var(--color-blue); font-weight: 700; font-size: 25px; font-family: "Dancing Script", cursive; margin-bottom: 1rem; display: block; padding: 15px 10px; background: linear-gradient(90deg, #2c5baa00 0, #daf2ff 50%, #2c5baa00 100%) }
.call-hotline { display: flex; justify-content: center; align-items: stretch; gap: 2rem }
.call-hotline a span { color: #333; font-size: 14px; font-style: italic }
.call-hotline a span b { font-size: 20px; font-weight: 700; color: var(--color-blue); font-style: normal; display: block; margin: 0 }
.call-hotline a img { display: block; margin: 0 auto 10px }
.call-hotline a { text-align: center }
.trin-trin { animation-name: trin; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear }
@keyframes trin {
	from { transform: rotate3d(0, 0, 1, 0deg) }
	20%, 32%, 44%, 56%, 68% { transform: rotate3d(0, 0, 1, 0deg) }
	23%, 35%, 47%, 59%, 71% { transform: rotate3d(0, 0, 1, 15deg) }
	26%, 38%, 50%, 62%, 74% { transform: rotate3d(0, 0, 1, 0deg) }
	29%, 41%, 53%, 65%, 77% { transform: rotate3d(0, 0, 1, -15deg) }
	80% { transform: rotate3d(0, 0, 1, 0deg) }
}
.search-res { position: relative }
.search-res .icon-search { width: 40px; height: 40px; cursor: pointer; text-align: center; line-height: 38px; color: #fff; font-size: 17px; margin: 0; background: 0 0; border-radius: 5px }
.search-res .search-grid { position: absolute; top: 50px; right: 0; width: 0; height: 40px; overflow: hidden; background: #fff; border: 2px solid var(--color-min-blue); z-index: 2; opacity: 0; border-radius: 10px; line-height: normal }
.search-res .search-grid p { float: left; width: 35px; height: 38px; cursor: pointer; outline: 0; border: none; margin: 0; font-size: 17px; display: block; color: var(--color-blue); line-height: 40px; text-align: center }
.search-res .search-grid input { width: calc(100% - 35px); float: right; line-height: 38px; outline: 0; border: none; color: #333; font-size: 14px }
.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 }
.slideshow { position: relative }
.slideshow-item { display: block; cursor: pointer }
.slideshow:hover .control-slideshow { opacity: 1 }
.control-slideshow { opacity: 0 }
.info-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center }
.name-slide { font-size: 30px; text-transform: uppercase; color: #fff }
.desc-slide { font-size: 15px; color: #fff; width: 500px; margin: 20px 0 }
.views-more-slide { background-color: var(--background-static); width: 120px; height: 40px; color: #fff; font-size: 15px }
.box-slide.slick-current.slick-active .name-slide { animation: fadeInUp; animation-duration: 1s; animation-delay: .5s; animation-fill-mode: forwards }
.box-slide.slick-current.slick-active .desc-slide { animation: fadeInUp; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards }
.box-slide.slick-current.slick-active .views-more-slide { animation: scaleLarge; animation-duration: 1s; animation-delay: 1.5s; animation-fill-mode: forwards }
.slide-text .slick-next, .slide-text .slick-prev { width: 40px; height: 50px; border-radius: 5px; background: rgba(0, 0, 0, .3) }
.slide-text .slick-prev { left: 5px }
.slide-text .slick-next { right: 5px }
.slide-text .slick-prev:before { font-family: FontAwesome; font-weight: 400; content: "\f053" }
.slide-text .slick-next:before { font-family: FontAwesome; font-weight: 400; content: "\f054" }
.slide-text .slick-dots { bottom: 20px }
.slide-text .slick-dots li { margin: 0 }
.slide-text .slick-dots li button:before { color: #fff; font-size: 15px }
.breadCrumbs { background-color: #eee }
.breadCrumbs .wrap-content { padding: .75rem 0 }
.breadCrumbs .wrap-content .breadcrumb { padding: 0; margin-bottom: 0; background-color: transparent; border-radius: 0 }
.breadCrumbs .wrap-content .breadcrumb-item a { color: #212529 }
.breadCrumbs .wrap-content .breadcrumb-item.active a { color: #6c757d }
.video { cursor: pointer; margin-bottom: 1rem }
.video .video-image { position: relative; margin-bottom: .75rem }
.video .video-image:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background-repeat: no-repeat; background-image: url(../images/play.png) }
.video .video-name { text-align: center; font-size: 16px; color: #212529; margin-bottom: 0 }
.album { cursor: pointer }
.album .album-image { margin-bottom: .75rem }
.album .album-name { margin-bottom: 0; text-align: center }
.album .album-name a { display: block; font-size: 16px; color: #212529; margin-bottom: 0 }
.wrap-brand .wrap-content { position: relative }
.brand { display: block; border: 1px solid #eee; max-width: 160px; margin: 0 auto }
.wrap-product { margin-bottom: 50px }
.cart-product { margin-bottom: 0 }
.cart-product span { cursor: pointer; color: #fff; text-transform: capitalize; text-align: center }
.grid-pro-detail { margin-bottom: 3rem }
.left-pro-detail { position: relative; text-align: center; width: 45% }
.right-pro-detail { width: calc(55% - 40px) }
.left-pro-detail .MagicZoom { border: 1px solid #eee; padding: 7px; border-radius: 5px; background-color: #fff }
.gallery-thumb-pro { position: relative; margin-top: 10px }
.owl-pro-detail { padding: 0 }
.control-pro-detail button { background-color: transparent; color: #222; opacity: 1; width: 25px; font-size: 23px }
.control-pro-detail button:hover { opacity: .7 }
.control-pro-detail button.owl-prev { left: 0 }
.control-pro-detail button.owl-next { right: 0 }
.thumb-pro-detail { display: block !important; border: 1px solid #eee; padding: 5px; border-radius: 3px; cursor: pointer; background-color: #fff }
.thumb-pro-detail.mz-thumb.mz-thumb-selected { border-color: #cecfd2 }
.thumb-pro-detail img { -webkit-box-shadow: none !important; box-shadow: none !important; -webkit-filter: brightness(100%) !important; filter: brightness(100%) !important; border-bottom: 0 !important; padding-bottom: 0 !important }
.title-pro-detail { text-transform: capitalize; font-size: 20px; display: block; font-weight: 700 }
.comment-pro-detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
.social-plugin-pro-detail { margin-bottom: 1rem; margin-top: 0 !important }
.desc-pro-detail { margin-bottom: 1rem }
.attr-pro-detail { list-style: none; padding: 0 }
.attr-pro-detail li { margin-bottom: .5rem }
.attr-label-pro-detail { margin: 0 5px 0 0 }
.attr-content-pro-detail { display: inline-block; margin-bottom: 0 }
.brand-pro-detail a { background: var(--color-red); color: #fff; border-radius: 2px; padding: 2px 5px }
.price-new-pro-detail { font-weight: 700; font-size: 23px; color: var(--color-black) }
.price-old-pro-detail { font-weight: 400; color: var(--color-gray); text-decoration: line-through; padding-left: 10px }
.color-pro-detail { cursor: pointer; vertical-align: top; position: relative; width: 48px; height: 32px; margin: 0 8px 5px 0; background-repeat: no-repeat; background-size: contain; background-position: center center; border: 1px solid #dadada; transition: .3s; border-radius: 2px }
.size-pro-detail { cursor: pointer; display: flex; align-items: center; justify-content: center; height: 32px; width: 48px; position: relative; margin: 0 8px 0 0; border: 1px solid #dadada; border-radius: 2px; font-size: 12px; transition: .3s }
.color-pro-detail.active, .size-pro-detail.active { border-color: var(--color-dark-red) }
.color-pro-detail.active:after, .size-pro-detail.active:after { content: ""; position: absolute; bottom: 0; right: 0; width: 13px; height: 13px; background-repeat: no-repeat; background-image: url(../images/check-cart.png) }
.color-pro-detail input[type=radio], .size-pro-detail input[type=radio] { display: none }
.quantity-pro-detail { width: 150px; display: flex; align-items: center; justify-content: space-between; text-align: center; height: 45px; border-radius: 30px; overflow: hidden; border: 1px solid #dfdfdf }
.quantity-pro-detail span { line-height: 25px; padding: 0; width: 45px; height: 100%; color: #000; cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; font-weight: 500 }
.quantity-pro-detail span.quantity-plus-pro-detail { border-left: 0 }
.quantity-pro-detail span.quantity-minus-pro-detail { border-right: 0 }
.quantity-pro-detail input { height: 100%; border: none; width: calc(100% - 90px); text-align: center; font-size: 15px }
.cart-pro-detail { max-width: 400px }
.cart-pro-detail a { text-align: center; color: #fff; text-transform: uppercase; cursor: pointer; width: calc(100% / 2 - 5px); height: 45px; border-radius: 5px }
.cart-pro-detail a.addnow { background: #fff; color: var(--color-red) }
.cart-pro-detail a.addnow:hover { color: #fff; background: var(--color-red) }
.cart-pro-detail a.buynow { background-color: #333 }
.cart-pro-detail a.buynow:hover { background-color: var(--color-dark-red); color: #fff }
.cart-pro-detail a i { vertical-align: top; margin-right: 8px; font-size: 24px; position: relative; top: -2px }
.tags-pro-detail a { float: left; font-size: 13px; padding-bottom: .375rem; margin: 0 5px 5px 0 }
.tags-pro-detail a i { font-size: 11px; margin: 5px 5px 0 0 }
.tabs-pro-detail { margin-top: 2rem }
.tabs-pro-detail .nav-tabs .nav-link { border-top-width: 3px; font-size: 13px; color: #333; text-transform: uppercase; font-weight: 500 }
.tabs-pro-detail .nav-tabs .nav-item.show .nav-link, .tabs-pro-detail .nav-tabs .nav-link.active { border-top-color: #555 }
.form-floating-cus>select, .form-floating.form-floating-cus>input { height: 45px }
.form-floating.form-floating-cus>textarea { height: 100px }
.form-floating.form-floating-cus>label { padding: 10px 10px; color: var(--color-gray) }
.contact-article { margin-bottom: 3rem }
.contact-input { position: relative; margin-bottom: 15px; border: 2px solid #afcfe0; border-radius: 7px; overflow: hidden; box-shadow: #ccdbe8 3px 3px 6px 0 inset, rgba(255, 255, 255, .5) -3px -3px 6px 1px inset }
.contact-input input, .contact-input textarea { border-radius: 0; border-top: none; border-left: none; border-right: none }
.contact-input input:focus, .contact-input textarea:focus { box-shadow: none; outline: 0 }
.contact-input textarea { resize: none; height: 150px }
.contact-button { text-align: right }
.contact-form .btn-primary:hover { background: var(--color-min-blue) !important; border: 1px solid var(--color-min-blue) !important }
.contact-form .btn-primary { background: var(--background-static) !important; border: 1px solid var(--background-static) !important }
.contact-input .custom-file-label::after { content: attr(title) }
.contact-input .form-floating input, .contact-input .form-floating textarea { background: 0 0 !important }
.social-plugin { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
.social-plugin .at-share-btn { margin-bottom: 0 !important }
.social-plugin .zalo-share-button { margin-left: 3px }
.social-plugin.social-plugin-pro-detail .a2a_svg svg { height: 30px }
.social-plugin.social-plugin-pro-detail .a2a_svg { height: 30px; line-height: 30px }
.pagination-home .pagination .page-item .page-link { color: var(--color-blue); font-size: 14px; margin: 0 2px; font-weight: 600; border-color: #d3ebf8; border-radius: 5px; }
.pagination-home .pagination .page-item.active .page-link { color: #fff; background-color: var(--color-min-blue); border-color: var(--color-min-blue); }
.pagination-ajax { text-align: center }
.pagination-ajax a { display: inline-block; vertical-align: top; margin: 0 3px 3px 3px; width: 35px; height: 35px; line-height: 33px; color: #666 !important; border: 1px solid #e6e6e6; font-size: 13px; cursor: pointer; text-decoration: none !important; background-color: #fff }
.pagination-ajax a.current, .pagination-ajax a:hover { color: #fff !important; border-color: #ec2d3f; background-color: #ec2d3f }
.pagination-ajax a.first, .pagination-ajax a.last, .pagination-ajax a.next, .pagination-ajax a.prev { text-indent: -9999px; position: relative; background-color: #fff !important }
.pagination-ajax a.first:before, .pagination-ajax a.last:before, .pagination-ajax a.next:before, .pagination-ajax a.prev:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: transparent; background-repeat: no-repeat; background-position: center }
.pagination-ajax a.first:before { background-image: url(../images/page-first.png) }
.pagination-ajax a.last:before { background-image: url(../images/page-last.png) }
.pagination-ajax a.prev:before { background-image: url(../images/page-prev.png) }
.pagination-ajax a.next:before { background-image: url(../images/page-next.png) }
#popup .modal-body { padding: 0 }
.grecaptcha-badge { display: none !important; width: 0 !important; height: 0 !important; visibility: hidden !important; overflow: hidden }
coccocgrammar { display: none }
.scrollToTop { width: 41px; height: 41px; text-align: center; font-weight: 700; color: #444; text-decoration: none; position: fixed; bottom: 95px; right: 25px; display: none; z-index: 10; cursor: pointer }
.text-split { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3 }
.btn-frame .kenit-alo-circle-fill, .carousel-comment-media .carousel-control a span, .control-owl button, .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 { -webkit-transition: .3s all; transition: .3s all }
.scale-img { overflow: hidden; display: block }
.scale-img img { -webkit-transform: scale(1, 1); transform: scale(1, 1) }
.scale-img:hover>img { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1) }
.blink { -webkit-animation-name: blink; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blink; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite }
.btn-frame { display: block; width: 50px; height: 50px; position: fixed; right: 20px; z-index: 10; cursor: pointer }
.btn-frame i { width: 50px; height: 50px; border-radius: 50%; background: #1182fc; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.btn-frame i img { vertical-align: middle; width: 70% }
.btn-frame .animated.infinite { -webkit-animation-iteration-count: 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, .8); opacity: .1; border-color: #1182fc; opacity: .5 }
.btn-frame .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn }
.btn-frame .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; 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, .35); opacity: .4 }
.btn-frame .pulse { -webkit-animation-name: pulse; animation-name: pulse }
.btn-zalo { bottom: 315px }
.btn-phone { bottom: 230px }
.js-facebook-messenger-top-header { background: #487dfc; color: #fff; height: 35px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 5px 5px 0 0 }
.js-facebook-messenger-container.closed { display: none !important }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px; color: #404040; background: #fff }
.js-facebook-messenger-tooltip.closed { display: none !important }
.js-facebook-messenger-box, .js-facebook-messenger-button { z-index: 999 }
.js-facebook-messenger-tooltip { z-index: 999; display: none; position: fixed; text-align: center; border-radius: 10px; overflow: hidden; font-size: 12px; line-height: 1; padding: 10px; border: 1px solid rgba(0, 0, 0, .1); -webkit-box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt; box-shadow: rgba(0, 0, 0, .15) 0 2pt 10pt; z-index: 1000000000000000019884624838656 }
.js-facebook-messenger-close-tooltip { width: 10px; height: 10px; display: inline-block; cursor: pointer; margin-left: 10px }
.js-facebook-messenger-box { z-index: 999 }
.js-facebook-messenger-box.rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand }
.js-facebook-messenger-box.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999 }
.js-facebook-messenger-box { display: block; position: fixed; cursor: pointer; bottom: 150px; right: 17px; width: 56px; height: 56px; text-align: center; background: #1182fc; border-radius: 100%; overflow: hidden; z-index: 99; -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3); box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .3) }
.js-facebook-messenger-box.rotate svg#fb-msng-icon { -webkit-transform: rotate(0); transform: rotate(0) }
.js-facebook-messenger-box svg#fb-msng-icon { width: 32px; height: 33px; position: absolute; top: 13px; left: 12px; opacity: 1; overflow: hidden; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out }
.js-facebook-messenger-box.rotate svg#close-icon { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
.js-facebook-messenger-box svg#close-icon { opacity: 0; width: 19px; height: 20px; position: absolute; top: 19px; left: 19px; -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000 }
.js-facebook-messenger-container { width: 250px; position: fixed; opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); bottom: 110px; right: 90px; border-radius: 10px; pointer-events: none; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out; transition: transform 160ms ease-in-out, opacity 160ms ease-in-out; transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out }
.js-facebook-messenger-top-head { width: 220px; color: #fff; background: #1182fc; display: block; position: relative; width: 220px; background: #1182fc; color: #fff; text-align: center; line-height: 1; padding: 10px; font-size: 14px; border-top-left-radius: 10px; border-top-right-radius: 10px }
.js-facebook-messenger-container iframe, .js-facebook-messenger-container-button iframe { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip { z-index: 999 }
.js-facebook-messenger-container, .js-facebook-messenger-container-button { z-index: 1000 }
.js-facebook-messenger-top-head { color: #fff; background: #1182fc; width: 220px }
.js-facebook-messenger-tooltip { color: #404040; background: #fff }
.js-facebook-messenger-container.open { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; pointer-events: all }
.js-facebook-messenger-tooltip { bottom: 97px; right: 97px }
.js-facebook-messenger-box.open svg#fb-msng-icon { opacity: 0 }
.js-facebook-messenger-box.rotate.open svg#close-icon { -webkit-transform: rotate(0); transform: rotate(0) }
.js-facebook-messenger-box.open svg#close-icon { opacity: 1 }
.cart-fixed { position: fixed; right: 20px; bottom: 390px; z-index: 10; background: #4b4f56; width: 50px; height: 50px; text-align: center; color: #fff !important; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.cart-fixed i { font-size: 20px }
.cart-fixed span { position: absolute; top: 0; right: -5px; color: #fff; width: 25px; height: 25px; background: #ec2d3f; text-align: center; line-height: 25px; font-size: 11px; border-radius: 100% }
@keyframes tada {
	0% { transform: scaleX(1) }
	10%, 20% { transform: scale3d(.9, .9, .9) rotate(-3deg) }
	30%, 50%, 70%, 90% { transform: scale3d(1.3, 1.3, 1.3) rotate(3deg) }
	40%, 60%, 80% { transform: scale3d(1.3, 1.3, 1.3) rotate(-3deg) }
	to { transform: scaleX(1) }
}
.toolbar { background: var(--background-static); width: 100%; padding: 3vw; bottom: 0; position: fixed; z-index: 500; height: auto; left: 0; max-height: 65px }
.toolbar ul { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0; margin: 0 }
.toolbar ul li { text-align: center; width: 25% }
.toolbar ul li a { display: block; width: 100%; cursor: pointer }
.toolbar ul li a img { height: 20px; width: 20px; animation: tada 1.2s infinite }
.toolbar ul li a span { color: #fff; font-size: 10px }
.fixbar { bottom: 0; display: block; background: #f0eff4; border-top: 1px solid #ddd; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: fixed; margin: 0; z-index: 500; -webkit-backface-visibility: hidden; backface-visibility: hidden; height: 50px }
.fixbar ul { margin: 0; padding: 0; list-style: none }
.fixbar ul li { margin: 0 auto 10px; text-align: center; width: 25%; float: left }
.fixbar .icon-cart-mobile, .fixbar .icon-cart-new, .fixbar .icon-home-new, .fixbar .icon-hotdeal-new { width: 20px; height: 20px; display: block; margin: 8px auto 0 }
.fixbar .icon-cart-mobile { background: url(../images/cart-mobile.png) no-repeat }
.cart-total-head-mobile { font-size: 10px; position: absolute; background: red; color: #fff !important; border-radius: 50%; height: 15px; width: 15px; line-height: 15px; top: 5px; margin-left: 5px }
.fixbar ul li a { font-size: 11px; text-decoration: none; color: #333 }
.fixbar ul li a i { font-size: 20px }
.plugbar { position: fixed; bottom: 0; left: 0; border-top: 1px solid #eae6e6; width: 100%; right: 0; max-width: 767px; margin: 0 auto; background: #fff; padding: 9px 10px 10px 7px; z-index: 10 }
.plugbar ul { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
.plugbar ul li { width: 20%; float: left }
.plugbar ul li a { display: block; color: #696969; font-size: 12px; text-align: center; position: relative }
.plugbar ul li a i { font-size: 20px; color: #696969 }
.plugbar ul li a span { position: absolute; width: 50px; height: 50px; top: -40px; left: calc(50% - 50px / 2); font-size: 14px; display: block; border: 1px solid rgba(234, 230, 230, .5); border-radius: 100% }
.support-online { position: fixed; z-index: 999; left: 10px; bottom: 0 }
.support-online a { position: relative; margin: 20px 10px; text-align: left; width: 40px; height: 40px }
.support-online i { width: 40px; height: 40px; background: #43a1f3; color: #fff; border-radius: 100%; font-size: 20px; text-align: center; line-height: 1.9; position: relative; z-index: 999 }
.support-online a { display: block }
.support-online a span { border-radius: 2px; text-align: center; background: #67b634; padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; color: #fff; z-index: 999; top: 0; left: 40px; -webkit-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s; -webkit-animation: headAnimation .7s 1; animation: headAnimation .7s 1 }
.support-online a:hover span { display: block }
.support-online a span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #67b634 transparent transparent; position: absolute; left: -10px; top: 10px }
.support-online .kenit-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; border-radius: 100%; border: 2px solid transparent; background-color: rgba(0, 175, 242, .5); opacity: .75; right: -10px }
.support-online .kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; border-radius: 100%; border: 2px solid rgba(30, 30, 30, .4); opacity: .1; border-color: #0089b9; opacity: .5 }
.support-online .support-online .btn-support { cursor: pointer }
.support-online .mes i { background: orange }
.support-online .sms i { background: red }
.support-online .call-now i { background: green }
.widget-mobile { position: fixed; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 10px; z-index: 9999999 }
#my-phone-circle { position: relative; width: 50px !important; height: 50px !important }
.wcircle-open .wcircle-icon i:before { content: "\f00d" }
.wcircle-icon { background: #1282fc; border-radius: 50%; position: relative !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.wcircle-icon:before { position: absolute; content: ""; width: 60px; height: 60px; background: rgba(18, 130, 252, .5); border: 1px solid #fff; border-radius: 50%; left: -5px; top: -5px; -webkit-animation: pulse 1s infinite ease-in-out; animation: pulse 1s infinite ease-in-out }
.wcircle-icon:after { position: absolute; content: ""; width: 80px; height: 80px; background: rgba(18, 130, 252, .5); border-radius: 50%; left: -15px; top: -15px; -webkit-animation: zoomIn 2s infinite ease-in-out; animation: zoomIn 2s infinite ease-in-out }
.wcircle-menu { position: absolute !important; left: 0; top: 0; display: none }
.wcircle-menu-item { width: 50px; height: 50px; background: #1282fc; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
.wcircle-menu-item img { width: 50px; height: 50px; display: block; border-radius: 50% }
.wcircle-menu-item i { font-size: 25px; color: #fff; position: relative; z-index: 9999 }
.wcircle-icon i { font-size: 25px; color: #fff; position: relative; z-index: 9999 }
.shake-anim { -webkit-animation: shake-anim 1s infinite ease-in-out; animation: shake-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% }
.wrap-newsnb .wrap-content { position: relative }
a.name-newsnb { color: #000; font-size: 14px; margin: 0 0 10px 0; line-height: normal }
a.name-newsnb.text-split { -webkit-line-clamp: 2 }
a.name-newsnb:hover { color: var(--color-dark-red) }
.desc-newsnb { color: #333 }
.video-main { position: relative; height: 400px }
.video-main iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0 }
.listvideos { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc; color: var(--color-black); margin-top: 10px; cursor: pointer }
.item-video1 img { max-height: 292px }
.item-video2 img { height: 102px }
.pic-video { position: relative; cursor: pointer }
.pic-video:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background: url(../images/play.png) no-repeat center center; cursor: pointer; background-size: cover }
.pic-video img { width: 100% }
.pic-video-2 { position: relative; cursor: pointer }
.pic-video-2:before { content: ""; position: absolute; width: 50px; height: 35px; top: calc(50% - 50px / 2); left: calc(50% - 35px / 2); z-index: 1; background: url(../images/play.png) no-repeat center center; cursor: pointer; background-size: cover }
.pic-video-2 img { width: 100% }
.name-video { font-size: 16px; color: var(--color-black); margin-bottom: 0 }
.owl-video { margin-top: 10px }
.newshome-intro .name-newshome { margin: 10px 0 }
.newshome-intro .view-newshome { margin-top: 10px }
.newshome-scroll { width: 50%; overflow: hidden; max-height: 406px }
.news-slick { display: flex; margin-bottom: 20px }
.news-slick h3 { margin: 0 }
.news-slick h3 a.name-newshome { margin-bottom: 10px }
.news-slick .img { width: 150px }
.news-slick .info { width: calc(100% - 150px); padding-left: 15px }
.flex_ttnb { display: flex; flex-flow: row wrap; justify-content: space-between }
.newshome-intro { width: calc(50% - 20px) }
.pic-newshome-normal { float: left; width: 34%; margin-right: 3%; margin-bottom: 0 }
.pic-newshome-normal img { width: 100% }
.info-newshome-normal { float: left; width: calc(100% - 37%) }
.name-newshome { color: var(--color-black); font-size: 14px; line-height: normal }
.name-newshome.text-split { -webkit-line-clamp: 2 }
.name-newshome.text-split a { color: #000 }
.time-newshome { color: var(--color-gray); margin-bottom: 10px }
.desc-newshome { color: var(--color-black); margin-bottom: 0; text-align: justify }
.desc-home-cl.text-split { -webkit-line-clamp: 2 }
.view-newshome { width: 140px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; color: #000 }
.view-newshome:hover { color: #000 }
.box-product { position: relative; margin-bottom: 20px }
.pic-product { background: #fff; position: relative; margin-bottom: 1rem }
.pic-product img { width: 100% }
.product-tool { opacity: 0; visibility: hidden; position: absolute; width: 100%; left: 0; bottom: 0; z-index: 1 }
.product-tool a { cursor: pointer; width: 50%; padding: 10px; text-align: center; color: #fff; background-color: rgb(0 0 0 / .6) }
.product-tool a:hover { background-color: rgb(0 0 0 / .8) }
.product-tool a svg { margin-right: 5px }
.product-tool a span { text-transform: capitalize; font-size: 12px; font-weight: 300 }
.box-product:hover .product-tool { opacity: 1; visibility: visible }
.name-product { font-size: 14px; color: var(--color-black); margin-bottom: 10px }
.name-product.text-split { -webkit-line-clamp: 2 }
.price-product { margin-bottom: 10px }
.price-new { font-size: 15px; color: var(--color-red); font-weight: 700 }
.price-old { padding-left: 10px; color: var(--color-gray); text-decoration: line-through }
.price-per { position: absolute; top: 15px; right: 15px; color: #fff; background: var(--color-red); font-size: 11px; border-radius: 2px; width: 45px; height: 25px; text-align: center; line-height: 25px }
.cart-product { margin-bottom: 0 }
.cart-product span { cursor: pointer; width: calc(50% - 3px); color: #fff; text-transform: capitalize; text-align: center; padding: 7px 5px; border-radius: 3px }
.cart-add { background-color: var(--color-red) }
.cart-add:hover { background-color: var(--color-dark-red) }
.cart-buy { background-color: var(--color-green) }
.cart-buy:hover { background-color: var(--color-dark-green) }
.dm-noibat { max-width: 1000px; position: relative; margin: auto; margin-bottom: 40px }
.dm-noibat a { cursor: pointer; color: #333; transition: .4s; text-transform: capitalize; font-weight: 400; font-size: 16px; text-align: center; position: relative; display: block; background: #f7f7f7; border-radius: 5px; border: 1px solid #eaeaea; height: 100%; padding: 10px }
.dm-noibat a.active, .dm-noibat a:hover { background: var(--background-static); color: #fff }
.cats-bar { width: 50px; padding-top: 3px; position: relative }
.cats-bar-icon { width: 30px; cursor: pointer }
.cats-bar-icon span { display: block; width: 100%; height: 2px; background: #505050; transition: all .3s; position: relative }
.cats-bar-icon span+span { margin-top: 5px }
.cats-bar-icon.active span:nth-child(1) { animation: ease .7s top forwards }
.cats-bar-icon.not-active span:nth-child(1) { animation: ease .7s top-2 forwards }
.cats-bar-icon.active span:nth-child(2) { animation: ease .7s scaled forwards }
.cats-bar-icon.not-active span:nth-child(2) { animation: ease .7s scaled-2 forwards }
.cats-bar-icon.active span:nth-child(3) { animation: ease .7s bottom forwards }
.cats-bar-icon.not-active span:nth-child(3) { animation: ease .7s bottom-2 forwards }
@keyframes top {
	0% { top: 0; transform: rotate(0) }
	50% { top: 6px; transform: rotate(0) }
	100% { top: 6px; transform: rotate(45deg) }
}
@keyframes top-2 {
	0% { top: 6px; transform: rotate(45deg) }
	50% { top: 6px; transform: rotate(0) }
	100% { top: 0; transform: rotate(0) }
}
@keyframes bottom {
	0% { bottom: 0; transform: rotate(0) }
	50% { bottom: 8px; transform: rotate(0) }
	100% { bottom: 8px; transform: rotate(135deg) }
}
@keyframes bottom-2 {
	0% { bottom: 8px; transform: rotate(135deg) }
	50% { bottom: 8px; transform: rotate(0) }
	100% { bottom: 0; transform: rotate(0) }
}
@keyframes scaled {
	50% { transform: scale(0) }
	100% { transform: scale(0) }
}
@keyframes scaled-2 {
	0% { transform: scale(0) }
	50% { transform: scale(0) }
	100% { transform: scale(1) }
}
.cats-owl.list-hot { width: calc(100% - 50px) }
@-webkit-keyframes rotating {
	from { -webkit-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) }
	to { -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) }
}
@keyframes rotating {
	from { -ms-transform: rotate(0); -moz-transform: rotate(0); -webkit-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0) }
	to { -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg) }
}
.choose_list span { text-transform: capitalize; cursor: pointer; display: inline-block; position: relative; padding: 0 10px }
.choose_list span:last-child:after { display: none }
.choose_list span:after { content: ''; width: 1px; height: 10px; background: #ddd; position: absolute; right: 0; top: 6px }
.choose_list span.choosed { color: red }
.btn_sp a { color: #000; text-transform: uppercase; background: #e6e6e6; width: 100px; display: flex; align-items: center; justify-content: center; height: 40px }
.btn_sp a:hover { color: red }
.d-title-choose-list { margin-bottom: 20px; border: 1px solid #ddd; padding: 5px }
.div-datlich { width: 46% }
.newsletter-booking { margin-bottom: 10px }

/* .newsletter-booking input { border-radius: 0; border: none; border-bottom: 1px solid var(--background-static); background: 0 0; padding: 0 }
.newsletter-booking textarea { border-radius: 0; border: none; border-bottom: 1px solid var(--background-static); background: 0 0; margin-bottom: 10px; padding: 0 } */
.newsletter-checkbox input { outline: 0; width: 15px; height: 15px }
.label-checkbox { color: #7e7e7e; position: relative; top: 1px; margin-left: 10px }
.booking-button input { width: 86px; height: 37px; font-weight: 600; color: #fff; text-transform: capitalize }
.khung-datlich { background: rgba(255, 255, 255, .8); padding: 40px; border: 1px solid var(--background-static); border-radius: 20px }
.desc-dongy { color: #7e7e7e; font-size: 13px; font-style: italic; margin-top: 5px }
.btn-datlich { position: fixed; bottom: 155px; right: 15px; padding: 10px; border-radius: 5px; z-index: 99; background: var(--background-static); color: #fff; font-size: 14px; text-align: center; text-decoration: none !important }
.btn-datlich i { font-size: 20px }
.liquid-glass { background: rgba(255, 255, 255, 0.15);    /* hoặc màu khác có độ trong suốt */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); color: #000; }
.btn-datlich:hover {    /* hoặc màu khác có độ trong suốt */
background: rgb(0 68 207 / 33%); color: #fff; }
.BoxAlbum { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 10px; margin-bottom: 1rem }
.box-album { width: calc((100% - 30px)/ 4); border: 1px solid #eee; padding: 5px; transition: all .3s; text-align: center }
.box-album:hover { box-shadow: rgba(0, 0, 0, .15) 2.4px 2.4px 3.2px; border-radius: 5px }
.name-album { margin: 0 }
.name-album a { color: #333; -webkit-line-clamp: 2; text-transform: capitalize; font-size: 18px; font-weight: 600 }
.name-album a:hover { color: var(--color-hover) }
.BoxHinhanh { column-count: 3; column-gap: 10px; row-gap: 10px; margin-bottom: 2rem }
.picHa { break-inside: avoid; margin-bottom: 10px; transition: all .6s; cursor: pointer }
.boxFile { border: 1px solid #ddd; border-radius: 10px; margin-bottom: 1rem }
.item_File { margin: 0; border-bottom: 1px solid #ddd; padding: 10px }
.item_File:last-child { border-bottom: none }
.item_File a { color: #333; display: flex; justify-content: space-between; align-items: center; font-size: 16px; text-transform: capitalize; font-weight: 600 }
.item_File b { display: inline-block; background: var(--background-static); color: #fff; padding: 5px 20px; border-radius: 5px }
.item_File b i { font-size: 20px; margin-right: 5px }
.item_File b:hover { background: var(--background-hover) }
.blue-web-header-full { background: url(../images/bg1.png) no-repeat top left; background-size: 100% 100%; position: relative; z-index: 99; }

/*khach hang vip*/
.blue-head-vip { background: url(../images/img/bg_xanh.png) no-repeat center; background-size: cover; text-align: center; padding: 5px 0; }
.blue-head-vip .text_kh { position: relative; }
.blue-head-vip .text_kh img { max-height: 45px; }
.blue-head-vip .text_kh:before { position: absolute; width: 49px; height: 49px; background: url(../images/img/saolaplanh.png) no-repeat center; 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; content: ''; z-index: 9999; top: 5px; right: 33px; }
.blue-head-vip .text_kh:after { position: absolute; width: 49px; height: 49px; background: url(../images/img/saolaplanh.png) no-repeat center; 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; content: ''; z-index: 9999; top: 0px; left: 0px; }
@keyframes star {
	0% { transform: rotate(0) scale(0); }
	50% { transform: rotate(180deg) scale(1.5); }
	100% { transform: rotate(360deg) scale(0); }
}
.openBtn { background: none; border: none; cursor: pointer; color: #fff; transition: all 0.5s; width: 100%; height: 100%; padding: 0; }
.openBtn:hover { background: var(--color-ye); border-radius: 5px; }
.vip-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #0c3476d6; pointer-events: none; visibility: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; opacity: 0; }
.vip-popup-overlay.active { visibility: visible; pointer-events: all; opacity: 1; }
.vip-popup-overlay-content { position: relative; width: 100%; text-align: center; margin: auto; }
.vip-popup-overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 40px; cursor: pointer; color: white; transition: all 1.0s; }
.vip-popup-overlay .closebtn:hover { transform: rotate(360deg); }
.vip-popup { width: 100%; max-width: 650px; text-align: center; padding: 2rem; border-radius: 1rem; background: rgb(255 255 255 / 21%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; }
.vip-popup h3 { font-size: 38px; font-weight: 700; font-family: "Crimson Pro", serif; margin-bottom: 2rem; }
.vip-popup input { width: 100%; padding: 10px; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; max-width: 500px; }
.vip-popup button { width: 100%; padding: 10px; background: var(--color-min-blue); color: #fff; border: none; border-radius: 4px; cursor: pointer; max-width: 200px; font-weight: 600; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.3); }
.vip-popup button:hover { background: #1565c0; }

/*khach hang vip*/
.blue-web-header-top { padding: 5px 0; background: #fff }
.blue-web-header-top .blue-content2 { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; max-width: 1720px }

/*.blue-web-header-top.fix_head { background: #fff; box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px }*/
.blue-web-header-top.fix_head {    /* background: #fff; */

	/* box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgba(0, 0, 0, .23) 0 3px 6px; */
background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); }

/*.blue-web-header-top.fix_head .blue-web-logo img {
filter: brightness(0) saturate(100%) invert(100%) sepia(7%) saturate(0%) hue-rotate(347deg) brightness(101%) contrast(107%);
}
*/
.blue-web-logo { width: 200px; }
.blue-web-address-header { display: none }
.blue-web-menu { width: calc(100% - 200px - 1rem); display: flex; justify-content: flex-end; align-items: center; gap: 1rem }
.blue-web-menu-head { width: 100% }
.blue-web-icon-login { width: 38px; height: 38px; text-align: center }
.blue-web-icon-login a { border: 1px solid #fff; color: #fff; display: flex; font-size: 27px; border-radius: 50%; text-transform: capitalize; width: 100%; height: 100%; text-align: center; justify-content: center; align-items: center }
.blue-web-header-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center }
.slider-left { width: 45%; padding-left: 10% }
.blue-web-info-slide { width: 100% }
.blue-web-name-sli { font-size: 72px; line-height: 72px; color: #fff; font-weight: 700; font-family: "Crimson Pro", serif; margin-bottom: 1.5rem; position: relative }
.blue-web-name-sli:before { content: ''; width: 150px; height: 8px; background: var(--color-red); position: absolute; top: 3.6rem; z-index: -1 }
.blue-web-desc-sli { font-size: 19px; color: #fff; font-weight: 400 }
.blue-web-view-sli { margin: 0; border: none; position: relative; display: inline-block }
.blue-web-view-sli::before { transition: all .8s cubic-bezier(.68, -.55, .265, 1.55); content: ""; width: 46px; height: 100%; background: var(--color-min-blue); position: absolute; top: 0; left: 0; border-radius: 50% }
.blue-web-view-sli:hover::before { background: #fff; width: 100%; border-radius: 2rem }
.blue-web-view-sli .rounded { color: #fff; position: relative; display: inline-block; padding: 12px 20px; font-weight: 500; text-transform: capitalize; transition: all .5s }
.blue-web-view-sli:hover .rounded { color: var(--color-blue) }
.slider-right { width: 50% }
.blue-web-img-slide { overflow: hidden }
.blue-web-img-slide img { transition: all 1.5s; position: relative; top: 0; right: 0; -webkit-animation: RightReverseAni 7s linear infinite; animation: RightReverseAni 7s linear infinite; max-height: 738px; }
@-webkit-keyframes RightReverseAni {
	0% { -webkit-transform: translateX(0); transform: translateX(0) }
	50% { -webkit-transform: translateX(30px); transform: translateX(30px) }
	100% { -webkit-transform: translateX(0); transform: translateX(0) }
}
@keyframes RightReverseAni {
	0% { -webkit-transform: translateX(0); transform: translateX(0) }
	50% { -webkit-transform: translateX(30px); transform: translateX(30px) }
	100% { -webkit-transform: translateX(0); transform: translateX(0) }
}
.blue-web-header-inside { background: url(../images/bg_head_in.png) no-repeat top left; background-size: 100% 100% }

/*.blue-web-header-inside .blue-web-header-top { background: #e5f4fb; padding: 1rem 0 }*/
.blue-web-header-services { position: relative }
.blue-web-header-services .blue-content1 { position: relative; margin-left: 130px; width: calc(100% - 130px); margin-bottom: 5rem }
.blue-web-header-services .blue-content1:before { position: absolute; content: ''; left: -25px; top: 50px; bottom: 50px; width: 250px; border-radius: 20px; background-color: rgb(248 250 253); z-index: 3 }
.blue-web-header-services .blue-content1:after { position: absolute; content: ''; left: -50px; top: 70px; bottom: 70px; width: 250px; border-radius: 20px; background-color: rgb(229 238 248); z-index: 2 }
.big-title { position: absolute; left: 5%; bottom: -4rem; font-size: 130px; line-height: 1em; font-weight: 700; color: #0086cd0f; font-family: "Playfair Display", serif }
.owl-dichvu { position: relative; z-index: 9 }
.itemService { margin: 25px 15px; position: relative; z-index: 9 }
.itemService a { display: inline-block; height: 100%; width: 100%; overflow: hidden; position: relative; text-align: center; border-radius: 22px; padding: 3rem 3rem 3rem; color: #333; background-color: #fff; box-shadow: 5px 10px 15px rgba(0, 0, 0, .15); transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -moz-transition: all .3s ease }
.inner-box { position: relative; z-index: 9 }
.icon-box { height: 75px; margin-bottom: 1rem }
.icon-box img { max-height: 75px }
.inner-box h5 { font-family: "Crimson Pro", serif; font-size: 26px; font-weight: 700; line-height: 28px; color: var(--color-blue); text-transform: capitalize; min-height: 56px }
.inner-box p { margin-bottom: 0; -webkit-line-clamp: 2 }
.itemService a:before { position: absolute; content: ''; right: 0; top: 0; width: 0; height: 100%; border-radius: 15px; transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; z-index: 1; background: var(--color-min-blue); background: linear-gradient(to left, var(--color-blue), #42bdff) }
.itemService:hover a:before { width: 100% }
.itemService:hover .icon-box img { filter: brightness(0) saturate(100%) invert(100%) sepia(0) saturate(1628%) hue-rotate(200deg) brightness(119%) contrast(100%) }
.itemService:hover .inner-box h5, .itemService:hover a { color: #fff }
.control-services { top: auto; bottom: 0 }
.control-services button { width: 60px; height: 60px; opacity: 1; border-radius: 50%; background: #f0f8fc; transition: all .5s }
.control-services button.owl-prev { left: auto; right: calc(8% + 60px) }
.control-services button.owl-next { right: 7% }
.control-services button svg { stroke: var(--color-blue) }
.control-services button:hover { box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; background: var(--color-blue) }
.control-services button:hover svg { stroke: #fff }
.blue-web-about-us { background: url(../images/bg4.png) no-repeat center right; background-size: 100% 100%; position: relative }
.blue-web-about-us:before { position: absolute; content: ''; z-index: 1; left: -50px; top: 15%; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
@keyframes Rotate {
	0% { transform: rotate(0) }
	100% { transform: rotate(360deg) }
}
.title-desk { text-align: center; margin: 0 auto 1rem; position: relative }
.title-desk small { color: var(--color-red); text-transform: uppercase; font-size: 13px; font-weight: 700; margin-bottom: 0; display: block; position: relative; z-index: 9 }
.an_tit { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 110px; line-height: 1em; font-weight: 700; color: #0086cd0f; font-family: "Playfair Display", serif }
.title-desk h2, .title-desk h3, .title-desk h4 { max-width: 600px; margin: 0 auto; font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 48px; line-height: 48px; position: relative; z-index: 9 }
.title-desk h2 b, .title-desk h3 b, .title-desk h4 b { font-family: "Dancing Script", cursive; font-size: 56px; color: var(--color-min-blue); font-weight: 900 }
.tabs-about { margin-bottom: 1rem }
.ul-tabs-about { padding: 0; list-style: none; display: flex; justify-content: center; align-items: stretch; gap: 0; width: 100%; margin-bottom: 2rem; position: relative; z-index: 2 }
.ul-tabs-about li { cursor: pointer; padding: 10px 20px; color: #898989; font-size: 15px; text-transform: capitalize; font-weight: 600; border-bottom: 1px solid #dadada; border-radius: 5px 5px 0 0; display: flex; align-items: center; justify-content: center }
.ul-tabs-about li.active { background: var(--color-blue); color: #fff }
.ul-tabs-about li:hover { background: #f0f8fc; color: var(--color-blue) }
.blue-box-about { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch }
.blue-about-left { width: 50% }
.blue-about-right { width: 46% }
.blue-about-right img{max-height: 450px;}
.content-tabs-about { display: none }
.content-tabs-about.active { display: block }
.question__container { margin-bottom: 1.5rem }
.i-box-question h3 span, .i-box-question h4 span { width: 100%; font-size: 21px; color: #333; font-weight: 600; font-style: italic; font-family: "Crimson Pro", serif; padding: 5px 40px 5px 0; position: relative }
.question__item .i-box-question h3, .question__item .i-box-question h4 { background: #fff; padding: 0 0; border-radius: 10px; display: flex; justify-content: flex-start; align-items: center; margin: 0; text-align: left; gap: 10px }
.question__item .i-box-question h3.active, .question__item .i-box-question h4.active { color: var(--color-red) }
.question__item .i-box-question h3.active span, .question__item .i-box-question h4.active span { color: var(--color-red) }
.question__item .i-box-question h3.active i, .question__item .i-box-question h4.active i { transform: rotate(90deg); color: var(--color-red) }
.i-box-question h3 span:after, .i-box-question h4 span:after { font-family: var(--fa-style-family, "Font Awesome 6 Pro"); content: '+'; width: 30px; height: 30px; line-height: 32px; background: var(--color-blue); position: absolute; top: 0; right: 0; text-align: center; font-style: normal; color: #fff; border-radius: 50%; font-size: 17px; text-align: center }
.i-box-question h3.active span:after, .i-box-question h4.active span:after { content: '-'; font-style: normal }
.i-desc-question { padding: 10px 0; color: #333; font-size: 14px; line-height: 25px; font-weight: 400; text-align: justify }
.question__item { cursor: pointer; margin-bottom: 10px; overflow: hidden }
.i-box-question { border-radius: 0; background: #fff; padding: 0 }
.i-desc-question { display: none }
.i-box-question.active .i-desc-question { display: block }
.question__item:last-child { border-bottom: none }
.viewAll { margin: 0; border: none; position: relative; display: inline-block }
.viewAll::before { transition: all .8s cubic-bezier(.68, -.55, .265, 1.55); content: ""; width: 46px; height: 100%; background: #fddde0; position: absolute; top: 0; left: 0; border-radius: 50% }
.viewAll:hover::before { background: var(--color-red); width: 100%; border-radius: 2rem }
.viewAll .rounded { color: var(--color-blue); position: relative; display: inline-block; padding: 12px 20px; font-weight: 600; text-transform: capitalize; transition: all .5s }
.viewAll:hover .rounded { color: #fff }
.blue-web-process { padding: 2rem 0 1rem; position: relative; overflow: hidden; background: url(../images/bg4a.png) no-repeat center right; background-size: 100% 100% }
.blue-web-process:before { position: absolute; content: ''; right: -50px; top: 15%; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.ProcessFull { position: relative; width: 100%; padding-top: 0rem; margin-top: 3rem }
.blue-web-line-process { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center }
.blue-web-line-process svg g g path { stroke-width: 2; stroke: #c7e3f1; fill: none }
.animate-stroke { animation: stroke 10s linear infinite }
@keyframes stroke {
	0% { stroke-dasharray: 15.0406, 15.0406; stroke-dashoffset: 600 }
	100% { stroke-dasharray: 15.0406, 15.0406; stroke-dashoffset: 0 }
}
.BoxProcess { max-width: 1420px; margin: 0rem auto 0; display: flex; justify-content: space-between; align-items: flex-start; position: relative; gap: 1rem; padding-top: 0rem }
.itemProcess { width: calc((100% - 4rem)/ 5); position: relative; z-index: 9; text-align: center; cursor: pointer }
.pic-process { position: relative; display: inline-block; margin-bottom: 1rem }
.process-numb { position: absolute; left: -45px; top: -30px; line-height: 1em; color: #b2ddf3; font-size: 100px; font-weight: 700; text-align: center; background-color: #b2ddf3; color: transparent; text-shadow: 2px 2px 3px rgba(255, 255, 255, .5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; transition: all .6s ease; -moz-transition: all .6s ease; -webkit-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease }
.icon-process { position: relative; width: 135px; height: 135px; color: #fff; text-align: center; border-radius: 10px; line-height: 138px; background-color: var(--color-blue); transition: all .5s; display: flex; justify-content: center; align-items: center }
.icon-process img { filter: brightness(0) saturate(100%) invert(100%) sepia(0) saturate(1628%) hue-rotate(200deg) brightness(119%) contrast(100%) }
.info-process { font-size: 15px; color: #333 }
.info-process h5 { font-family: "Crimson Pro", serif; text-transform: capitalize; font-weight: 800; font-size: 22px; margin-bottom: 1rem }
.info-process p { margin-bottom: 0 }
.itemProcess:nth-child(1) { margin-top: 3rem }
.itemProcess:nth-child(2) { margin-top: 0rem }
.itemProcess:nth-child(3) { margin-top: 6rem }
.itemProcess:nth-child(4) { margin-top: 12rem }
.itemProcess:nth-child(5) { margin-top: 9rem }
.itemProcess:hover .process-numb { color: var(--color-red) }
.itemProcess:hover .icon-process { box-shadow: rgba(0, 0, 0, .19) 0 10px 20px, rgba(0, 0, 0, .23) 0 6px 6px }
.blue-web-projects { background: url(../images/bg2.png) no-repeat center right; background-size: 58% 100%; padding: 6rem 0 12rem; position: relative }
.title-desk2 { text-align: left; margin: 0 auto 2rem; position: relative }
.title-desk2 small { color: var(--color-red); text-transform: uppercase; font-size: 13px; font-weight: 700; margin-bottom: 10px; display: block; position: relative; z-index: 9 }
.title-desk2 h2 { max-width: 450px; font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 42px; line-height: 42px; position: relative; z-index: 9; margin: 0 }
.title-desk2 h2 b { font-family: "Dancing Script", cursive; font-size: 56px; color: var(--color-min-blue); font-weight: 900; display: block }
.blue-boxthietke-full { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative }
.blue-web-projects:before { content: ''; width: 186px; height: 270px; background: url(../images/icon3.png) no-repeat; background-size: 100% 100%; position: absolute; top: 5%; right: 0; z-index: 1 }
.blue-boxthietke-left { width: 50%; position: relative }
.itemThietke { width: calc(100% - 30px); height: 440px; overflow: hidden; position: relative; margin: 15px auto 2rem; box-shadow: 0 0 15px rgba(0, 0, 0, .3) }
.itemThietke img { width: 100%; height: auto; display: block; margin: 0 0 8px; -webkit-transition: all ease-in-out 5s; transition: all ease-in-out 5s; position: absolute; left: 0; top: 0 }
.itemThietke:hover img { top: 100%; transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%) }
.owl-thietke { position: relative }
.control-thietke { top: auto; bottom: 0 }
.control-thietke button { width: 60px; height: 60px; opacity: 1; border-radius: 50%; background: #f0f8fc; transition: all .5s }
.control-thietke button.owl-prev { left: auto; right: calc(8% + 60px) }
.control-thietke button.owl-next { right: 7% }
.control-thietke button svg { stroke: var(--color-min-blue) }
.control-thietke button:hover { box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; background: var(--color-min-blue) }
.control-thietke button:hover svg { stroke: #fff }
.blue-boxthietke-right { width: 50%; padding: 0 7rem 0 3rem }
.blue-web-icon-video { position: relative; padding-left: 4rem; margin-bottom: 3rem }
.blue-web-icon-video .ripple, .blue-web-icon-video .ripple:after, .blue-web-icon-video .ripple:before { background: #fff; position: absolute; top: 50%; left: 50%; height: 70px; width: 70px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); -webkit-animation: ripple 3s infinite; -moz-animation: ripple 3s infinite; -ms-animation: ripple 3s infinite; -o-animation: ripple 3s infinite; animation: ripple 3s infinite; display: flex; align-items: center; justify-content: center }
.blue-web-icon-video .ripple:before { -webkit-animation-delay: .9s; -moz-animation-delay: .9s; -ms-animation-delay: .9s; -o-animation-delay: .9s; animation-delay: .9s; content: ""; position: absolute }
.blue-web-icon-video .ripple:after { -webkit-animation-delay: .6s; -moz-animation-delay: .6s; -ms-animation-delay: .6s; -o-animation-delay: .6s; animation-delay: .6s; content: ""; position: absolute }
@-webkit-keyframes ripple {
	70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0) }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) }
}
@keyframes ripple {
	70% { box-shadow: 0 0 0 70px rgba(255, 255, 255, 0) }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) }
}
.blue-web-icon-video a { display: inline-block; position: relative; width: 80px; height: 80px }
.blue-web-icon-video .ripple i { font-size: 30px; color: var(--color-blue); position: relative; z-index: 9 }
.blue-pic-video { position: relative; min-height: 270px }
.blue-pic-video img { position: absolute; bottom: -7rem; left: 0rem }
.blue-title-video p { font-weight: 700; color: #f0f8fc; font-family: "Crimson Pro", serif; font-size: 48px; line-height: 48px }
.blue-title-video p b { font-family: "Dancing Script", cursive; font-size: 56px; color: #fff; font-weight: 900 }
.blue-title-video span { color: #fff; font-family: "Alex Brush", cursive; font-size: 32px; line-height: 32px }
.blue-web-hosting { background: url(../images/bg5.png) no-repeat left top; padding: 2rem 0 3rem; background-size: auto 100% }
.tabs-hosting { margin-bottom: 3rem }
.tabs-hosting .ul-tabs-hosting { list-style: none; margin-bottom: 2rem; text-align: center; display: flex; justify-content: center; align-items: stretch; gap: 10px; padding: 15px 0 7px; overflow: hidden; }
.tabs-hosting .ul-tabs-hosting li { cursor: pointer; position: relative; margin: 0; background: #fff; padding: 12px 2rem; font-size: 17px; display: inline-block; color: var(--color-blue); font-weight: 600; border-radius: 10px; box-shadow: rgb(0 92 197 / 50%) 0 4px 6px -1px, rgb(0 90 194 / 50%) 0 2px 4px -1px; text-transform: capitalize; }
.tabs-hosting .ul-tabs-hosting li.active, .tabs-hosting .ul-tabs-hosting li:hover { background: var(--color-blue); color: #fff; box-shadow: rgb(0 92 197 / 50%) 0 4px 6px -1px, rgb(0 90 194 / 50%) 0 2px 4px -1px }
.tabs-hosting .ul-tabs-hosting li:last-child { margin-right: 0 }
.tabs-hosting .ul-tabs-hosting li:nth-child(3):before { content: ''; width: 30px; height: 30px; background: url(../images/vip.png) no-repeat; background-size: 100% 100%; position: absolute; top: -10px; right: -10px; z-index: 9; transform: rotate(45deg) }
.flag-vn { position: relative; display: inline-block !important; padding-right: 35px }
.flag-vn:before { content: ''; width: 25px; height: 30px; background: url(../images/vn.gif) no-repeat; position: absolute; top: 3px; right: 0; z-index: 9; background-size: 100% auto }
.tabs-hosting .content-tabs-hosting { display: none }
.tabs-hosting .content-tabs-hosting.active { display: block }
.item_hosting_price { width: calc(100% - 30px); margin: 1rem auto; padding: 1rem 0rem 0; border-radius: 10px; overflow: hidden; transition: all .5s; cursor: pointer; background: #f2fbff; box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px }
.item_hosting_price:hover { box-shadow: 0 0 15px #0086cd91 }
.name_hosting_price { text-align: center; margin-bottom: 1rem; color: var(--color-blue); font-weight: 700; font-size: 26px; text-transform: uppercase; font-family: "Crimson Pro", serif }
.content_hosting_price { padding: 0 1rem; margin-bottom: 1rem }
.content_hosting_price ul { padding: 0; margin: 0; list-style: none }
.content_hosting_price ul li { margin-top: 7px; padding-top: 7px; border-top: 1px solid #e3ebf9; display: block }
.content_hosting_price ul li:first-child { border-top: 1px solid #e3ebf900 }
.info_hosting_price { margin-bottom: 0 }
.info_hosting_price ul { padding: 0; margin: 0; list-style: none }
.info_hosting_price ul li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 0; padding: 10px 10px }
.info_hosting_price ul li b { text-transform: capitalize; font-weight: 600; font-size: 15px }
.info_hosting_price ul li:last-child { margin-bottom: 0 }
.info_hosting_price ul li:first-child { background: var(--color-blue); color: #fff }
.info_hosting_price ul li:first-child span { color: #fff; font-size: 20px }
.info_hosting_price ul li:nth-child(3) { background: #c3eaff }
.info_hosting_price ul li:nth-child(4) { background: #8dd7ff }
.info_hosting_price ul li span { color: var(--color-red); font-weight: 700; font-size: 16px }
.info_hosting_price ul li p { margin: 0; width: 100%; text-align: right; color: #6c757d; font-weight: 500; font-size: 13px; font-style: italic }
.info_hosting_price ul li p a { color: #555 !important; text-decoration: line-through !important; display: inline-block; margin-right: 1rem }
.icon-call-dk { text-align: center; margin: 10px auto; position: relative; display: inline-block; transition: all .4s; transform: translate(-50%, 0); border-radius: 5px; left: 50%; background: var(--color-blue) }
.icon-call-dk a { display: inline-block; width: 100%; height: 100%; color: #fff; border-radius: 5px; position: relative; z-index: 2; transition: .5s; padding: 10px 25px; text-transform: capitalize; font-weight: 600 }
.icon-call-dk a:before { content: '\e224'; font-family: var(--fa-style-family, "Font Awesome 6 Pro"); position: absolute; opacity: 0; top: calc(50% - 9px); right: -20px; transition: .4s }
.icon-call-dk:hover a:before { opacity: 1; right: 0 }
.icon-call-dk:hover { background: var(--color-min-blue); padding-right: 20px }
.hotspot { position: relative; background-color: #fff; border-radius: 0; width: 6px; height: 6px; top: 0; cursor: pointer; opacity: .5; z-index: 998; display: inline-block; margin: 0 15px 0 0 }
.hotspot:after, .hotspot:before { position: absolute }
.hotspot:before { content: ''; border-radius: 0; width: 8px; height: 8px; top: calc(-2px/2); left: calc(-2px/2); border: 1px solid #fff; transform-origin: 50%; transition: all .5s; -webkit-animation: ringPulse 1s infinite; -moz-animation: ringPulse 4s infinite; -ms-animation: ringPulse 4s infinite; -o-animation: ringPulse 4s infinite; animation: ringPulse 1s infinite }
.hotspot:after { background-color: #000 }
.hotspot.active { opacity: 1; background-color: var(--color-blue) }
.hotspot.active:before { border-color: var(--color-blue) }
.hotspot.visited { opacity: 1 }
@-webkit-keyframes ringPulse {
	0% { opacity: 0; transform: scale(1) }
	50% { opacity: 1 }
	100% { opacity: 0; transform: scale(1.8) }
}
@-moz-keyframes ringPulse {
	0% { opacity: 0; transform: scale(1) }
	50% { opacity: 1 }
	100% { opacity: 0; transform: scale(1.8) }
}
@-ms-keyframes ringPulse {
	0% { opacity: 0; transform: scale(1) }
	50% { opacity: 1 }
	100% { opacity: 0; transform: scale(1.8) }
}
@-o-keyframes ringPulse {
	0% { opacity: 0; transform: scale(1) }
	50% { opacity: 1 }
	100% { opacity: 0; transform: scale(1.8) }
}
@keyframes ringPulse {
	0% { opacity: 0; transform: scale(1) }
	50% { opacity: 1 }
	100% { opacity: 0; transform: scale(1.8) }
}
.blue-web-news { padding: 3rem 0 2rem; background-size: 100% 100%; position: relative; background: url(../images/bg4.png) no-repeat right top, linear-gradient(180deg, rgb(224 244 255) 0, rgba(255, 255, 255, 1) 100%) }
.itemBlog { width: calc(100% - 20px); margin: 10px auto; box-shadow: rgba(0, 0, 0, .24) 0 3px 8px; border-radius: 10px; overflow: hidden; background: #fff; position: relative; top: 0; transition: all .5s }
.itemBlog a { color: #333 }
.infoBlog { padding: 1rem 1rem }
.nameBlog { font-family: "Crimson Pro", serif; text-transform: capitalize; font-weight: 700; font-size: 20px; line-height: 25px; min-height: 50px; margin-bottom: 1rem; -webkit-line-clamp: 2 }
.descBlog { display: flex; justify-content: space-between; align-items: center }
.descBlog span { display: flex; justify-content: flex-start; align-items: center; gap: 5px; font-size: 13px; font-weight: 600 }
.descBlog span img { width: 20px }
.descBlog b { font-size: 13px; color: var(--color-blue); font-weight: 500; font-style: italic }
.itemBlog:hover { top: -5px; box-shadow: rgb(44 91 170 / 46%) 0 3px 8px }
.cont_tin { padding-bottom: 4rem }
.cont_tin .slick-next, .cont_tin .slick-prev { bottom: 0; top: auto; transform: translate(0, 0); width: 46px; height: 46px; opacity: 1; border-radius: 50%; background: #f0f8fc; transition: all .5s }
.cont_tin .slick-prev { left: calc(50% - 50px) }
.cont_tin .slick-next { right: calc(50% - 50px) }
.cont_tin .slick-next:before, .cont_tin .slick-prev:before { font-family: var(--fa-style-family, "Font Awesome 6 Pro"); color: var(--color-blue) }
.cont_tin .slick-next:hover, .cont_tin .slick-prev:hover { box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; background: var(--color-blue) }
.cont_tin .slick-next:hover:before, .cont_tin .slick-prev:hover:before { color: #fff }
.blue-web-feedback { position: relative; padding: 3rem 0 2rem; background: url(../images/icon4.png) no-repeat left center, linear-gradient(360deg, rgb(224 244 255) 0, rgba(255, 255, 255, 1) 100%); overflow: hidden }
.blue-web-feedback:before { position: absolute; content: ''; right: -50px; top: 0; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.itemFeedback { position: relative; width: 100%; padding: 2rem 1rem 1rem; transition: all .5s; top: 0; cursor: pointer }
.Feedback-inner-box { position: relative; text-align: center; padding: 4rem 2rem 3rem; background-color: #fff; -webkit-transition: all 1s ease; -moz-transition: all .1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; box-shadow: 0 0 15px rgba(0, 0, 0, .15) }
.itemFeedback .circle-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden }
.itemFeedback .circle-box:before { position: absolute; content: ''; left: 0; top: -140px; width: 150px; height: 250px; border-radius: 30px; background-color: #f3f4fa; transform: rotate(45deg); transition: all .3s ease; -moz-transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease }
.itemFeedback .circle-box:after { content: ''; position: absolute; right: 0; bottom: -10rem; width: 150px; height: 250px; opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all .1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; background: #f3f4fa; z-index: 1; transform: rotate(45deg); border-radius: 30px }
.quote-icon { position: absolute; content: ''; left: 25px; top: -32px; font-weight: 700; font-size: 75px; line-height: 1em; color: #fff; text-shadow: 0 0 5px rgb(44 91 170) }
.quote-icon:before { content: '\f10d'; font-family: var(--fa-style-family, "Font Awesome 6 Pro") }
.picFeedback { display: inline-block; position: relative; width: 108px; height: 108px; margin: 0 auto 1rem; padding: 6px; overflow: hidden; border-radius: 50%; background-color: #fff; box-shadow: 2px 5px 15px 4px rgb(44 91 170 / 40%) }
.picFeedback img { border-radius: 50% }
.descFeedback { font-size: 16px; margin-bottom: 1rem; position: relative; z-index: 2; -webkit-line-clamp: 7; }
.nameFeedback { color: var(--color-min-blue); font-weight: 700; text-transform: capitalize; font-size: 20px; margin-bottom: 5px; position: relative; z-index: 2 }
.designation { font-style: italic; position: relative; z-index: 2 }
.itemFeedback:hover { top: -10px }
.itemFeedback:hover .Feedback-inner-box { background-color: #ffffffbd; box-shadow: 0 0 15px rgb(0 132 202 / 38%) }
.itemFeedback:hover .circle-box::after, .itemFeedback:hover .circle-box::before { background-color: var(--color-min-blue) }
.blue-web-partner { padding: 2rem 0 0 }
.blue-web-partner .blue-content { position: relative }
.partner { display: block; max-width: calc(100% - 30px); margin: 15px auto; background: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, .15); border-radius: 9px; text-align: center }
.partner img { opacity: .4; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -webkit-filter: grayscale(100%); filter: grayscale(100%) }
.partner:hover img { opacity: 1; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -webkit-filter: grayscale(0); filter: grayscale(0) }
.control-partner button { background-color: transparent; color: #222; opacity: 1; width: 25px; font-size: 23px }
.control-partner button:hover { opacity: .7 }
.control-partner button.owl-prev { left: 0 }
.control-partner button.owl-next { right: 0 }
.blue-web-footer-top { position: relative; padding: 1rem 0 1rem; background: url(../images/bg6.png) no-repeat bottom center #fff; background-size: 100% auto; overflow: hidden }
.blue-web-footer-top .blue-content { background: var(--color-blue); background: linear-gradient(45deg, var(--color-blue) 0, rgba(110, 204, 255, 1) 50%, rgba(0, 56, 153, 1) 100%); padding: 3rem; border-radius: 1rem; position: relative }
.blue-web-footer-top .blue-content:after { content: ''; width: 227px; height: 294px; background: url(../images/form-icon.png) no-repeat; background-size: 100% 100%; position: absolute; bottom: -2rem; right: -2rem }
.title-desk3 { text-align: center; margin: 0 auto 2rem; position: relative }
.title-desk3 small { color: #fff; text-transform: uppercase; font-size: 13px; font-weight: 700; margin-bottom: 0; display: block; position: relative; z-index: 9 }
.an_tit2 { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 110px; line-height: 1em; font-weight: 700; color: #ffffff2b; font-family: "Playfair Display", serif }
.title-desk3 h2, .title-desk3 h3, .title-desk3 h4 { max-width: 600px; margin: 0 auto; font-weight: 700; color: #fff; font-family: "Crimson Pro", serif; font-size: 48px; line-height: 48px; position: relative; z-index: 9 }
.title-desk3 h2 b, .title-desk3 h3 b, .title-desk3 h4 b { font-family: "Dancing Script", cursive; font-size: 56px; color: var(--color-min-blue); font-weight: 900 }
.newsletter-slogan { margin-bottom: .5rem; color: var(--color-gray) }
.form-newsletter { height: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem; position: relative; z-index: 9; max-width: 800px; margin: 0 auto }
.newsletter-input { position: relative; height: 100%; width: calc((100% - 1rem)/ 2); border-radius: 5px; overflow: hidden }
.newsletter-input input { border-radius: 0; height: 100%; width: 100% }
.newsletter-input:nth-child(5) { width: 100% }
.newsletter-input input, .newsletter-input textarea { height: auto !important; padding: 15px 10px !important; border: none !important; box-shadow: none !important; font-size: 15px }
.newsletter-button { width: 100%; text-align: center; max-width: 280px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 2rem; background: 0 0; width: 100%; border: 2px solid #fff; transition: all .5s }
.newsletter-button input[type=submit] { border: 0; color: #fff; text-transform: uppercase; background: 0 0 !important; height: auto; padding: 15px 10px; border-radius: 2rem; transition: all .5s; position: relative; z-index: 9; font-weight: 600; font-size: 15px; width: 100% }
.newsletter-button:before { content: ''; width: 100%; height: 0%; background: linear-gradient(45deg, rgb(229 246 255) 0, rgba(44, 91, 170, 1) 50%, rgb(14 144 214) 100%); transition: all .5s; position: absolute; bottom: 0; left: 0; border-radius: 2rem; z-index: 1 }
.newsletter-button:hover:before { height: 100% }
.note-form { margin: 0; text-align: center; width: 100%; color: #00558e; font-weight: 600; background: #ffffffa8; background: linear-gradient(90deg, rgb(0 0 0 / 0) 0, rgb(255 255 255) 50%, rgb(0 0 0 / 0) 100%); padding: 10px 10px }
.note-form2 { margin: 0; text-align: center; width: 100%; color: #fff; font-weight: 500; background: var(--color-min-blue); background: linear-gradient(90deg, #2c5baa 0, rgb(62 209 255) 100%); padding: 10px 10px; border-radius: 10px; margin-bottom: 2rem }
.blue-web-footer-bottom { background: #f4f4f4; font-size: 14px; padding: 2rem 0 }
.blue-web-footer-att { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap }
.footer-news:nth-child(2) { width: 15% }
.footer-news:nth-child(1) { width: 36% }
.footer-news:nth-child(3) { width: 20% }
.footer-news:nth-child(4) { width: 22% }
.blue-bct { margin: 10px 0; }
.blue-bct img { height: 70px; }
.name-company { background: -webkit-linear-gradient(45deg, var(--color-blue), var(--color-min-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-size: 28px; font-weight: 700; font-family: "Crimson Pro", serif }
.footer-info { margin-bottom: 0rem }
.footer-info ul { list-style: none; padding: 0; margin: 0 }
.footer-info ul li { margin-bottom: 10px }
.footer-info ul li:last-child { margin-bottom: 0 }
.footer-info ul li i { color: var(--color-min-blue); margin-right: 5px; font-size: 17px; vertical-align: baseline }
.footer-title { color: var(--color-blue); font-size: 18px; font-weight: 700; text-transform: uppercase }
.footer-ul { margin: 0; padding: 0; list-style: none }
.footer-ul li { margin-bottom: 10px }
.footer-ul li a { color: #333; text-transform: capitalize; font-weight: 500; transition: all .5s }
.footer-ul li a svg { max-height: 20px; width: 20px; vertical-align: middle }
.footer-ul li a i { font-size: 5px; vertical-align: middle }
.footer-ul li a:hover { color: var(--color-min-blue); padding-left: 5px }
.footer-ul li:last-child { margin-bottom: 0 }
.social-footer { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; align-items: stretch; gap: 10px }
.social-footer li { border: 1px solid var(--color-min-blue); height: 36px; width: 36px; display: flex; justify-content: center; align-items: center; border-radius: 5px; transition: all .5s }
.social-footer li img { max-height: 25px; filter: brightness(0) saturate(100%) invert(29%) sepia(23%) saturate(3418%) hue-rotate(194deg) brightness(95%) contrast(86%) }
.social-footer li:hover { transform: rotate(45deg); background: var(--color-min-blue) }
.social-footer li:hover img { transform: rotate(-45deg); filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(170deg) brightness(104%) contrast(101%) }
.item_call_ft { margin-bottom: 1.5rem; border: 2px solid var(--color-blue); border-radius: 10px; padding: 8px 5px; max-width: 250px; }
.item_call_ft a { color: var(--color-blue); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 10px }
.item_call_ft a span { width: 50px; height: 50px; background: var(--color-blue); display: flex; justify-content: center; align-items: center; border-radius: 50% }
.item_call_ft:nth-child(2) a span { background: var(--color-min-blue) }
.item_call_ft a span svg { max-height: 25px }
.item_call_ft a p { margin: 0 }
.item_call_ft p b { display: block; color: var(--color-red); font-size: 22px; line-height: 22px }
.item_call_ft p small { font-size: 12px; font-weight: 700; text-transform: uppercase }
.blue-web-copyright { background: var(--color-blue); color: #fff; font-size: 14px; font-weight: 500; padding: 1.5rem 0; text-align: center }
.blue-web-copyright .blue-content { position: relative }
.blue-web-copyright .blue-content:before { content: ''; width: 100%; height: 1px; position: absolute; top: 50%; left: 0; background: #ffffff38; z-index: 1 }
.blue-web-copyright span { position: relative; z-index: 9; background: var(--color-blue); padding: 0 1.5rem }
.blue-web-copyright span a { color: #fff }
.blue-web-slogan { margin-top: 1rem; padding: 2rem 0 0; font-weight: 600; font-style: italic; background: url(../images/title.png) no-repeat top center }
.blue-qr { margin-top: 1rem; display: flex; justify-content: flex-start; align-items: center; gap: 1rem }
.blue-qr img { max-height: 85px }
.blue-qr span { font-size: 17px; text-transform: uppercase; color: var(--color-blue); font-weight: 700; line-height: 20px }
.title-main { text-align: center; position: relative; margin-bottom: 1.5rem }
.title-main h2 { font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 36px; line-height: 36px; position: relative; z-index: 9; text-transform: uppercase; margin: 0 }
.title-main span { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -62%); font-size: 65px; line-height: 1em; font-weight: 700; color: #f0f8fc; font-family: "Playfair Display", serif; z-index: 1 }
.title-main p { position: relative; z-index: 2; margin: 0; font-weight: 500; font-size: 16px }
.title-main h3 { font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 36px; line-height: 36px; position: relative; z-index: 9; text-transform: uppercase; margin: 0; padding-bottom: 1rem }
.title-main h3:before { content: ''; width: 115px; height: 3px; background: var(--color-blue); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0) }
.title-main h3:after { position: absolute; content: ""; width: 36px; height: 3px; left: calc(50% - 55px); bottom: 0; border-left: 10px solid #fff; border-right: 10px solid #fff; -webkit-animation: animborder 2s linear infinite; animation: animborder 2s linear infinite }
@-webkit-keyframes animborder {
	0% { -webkit-transform: translateX(0); transform: translateX(0) }
	100% { -webkit-transform: translateX(113px); transform: translateX(113px) }
}
@keyframes animborder {
	0% { -webkit-transform: translateX(0); transform: translateX(0) }
	100% { -webkit-transform: translateX(113px); transform: translateX(113px) }
}
.blue-web-thongso { position: relative; padding: 5rem 0 5rem; background: url(../images/icon4.png) no-repeat left center, linear-gradient(360deg, #fff 0, rgb(224 244 255) 50%, rgba(255, 255, 255, 1) 100%); overflow: hidden }
.blue-web-thongso:before { position: absolute; content: ''; right: -50px; bottom: 0; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.blue-web-thongso .blue-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 2rem }
.namchay { width: calc((100% - 6rem)/ 4); text-align: center; border-radius: 10px; box-shadow: rgb(0 92 197 / 50%) 0 4px 6px -1px, rgb(0 90 194 / 50%) 0 2px 4px -1px; cursor: pointer; transition: all .5s }
.so-cs { margin: 0; padding: 1rem 1rem }
.so-cs b { font-weight: 700; color: var(--color-blue); font-size: 65px; display: inline-block; line-height: 1 }
.so-cs b:after { content: '+' }
.so-cs span { display: block; font-family: "Crimson Pro", serif; font-size: 20px; text-transform: capitalize; font-weight: 600; line-height: 1 }
.namchay:hover { background: var(--color-blue); color: #fff }
.namchay:hover b { color: #fff }
.title-main-detail { margin-bottom: 2rem }
.title-main-detail h2 { margin: 0; font-size: 27px; font-weight: 700; color: var(--color-blue); text-transform: uppercase; font-family: "Crimson Pro", serif }
.title-main-detail img { margin-right: 7px; vertical-align: sub; max-height: 30px }
.domain_dichvu, .domain_qt, .domain_transfer, .domain_vn { margin-bottom: 2rem }
.domain-table { width: 100%; margin: 0 auto; border-collapse: collapse; font-size: 15px; box-shadow: 0 2px 6px rgba(0, 0, 0, .05); table-layout: fixed; background: #fff; border: 10px solid #a1d5f0 }
.domain-table thead { background-color: #0086cd; color: #fff; text-align: left }
.domain-table thead th { padding: 16px; font-weight: 700; text-align: center; text-transform: uppercase }
.domain-table thead th p { margin-bottom: 0 }
.domain-table thead th p:nth-child(1) { text-transform: uppercase }
.domain-table thead th p:nth-child(2) { font-size: 12px; font-weight: 500; font-style: italic; text-transform: none }
.domain-table tbody td, .domain-table thead th { border-width: 0 5px }
.col-full-row { text-align: center; background: #fff; text-transform: capitalize; font-weight: 600 }
.domain-table tbody td:nth-child(1), .domain-table thead th:nth-child(1) { width: 40% }
.domain-table tbody td:nth-child(n+2), .domain-table thead th:nth-child(n+2) { width: 20% }
.domain-table tbody tr:nth-child(even) { background-color: #e5f4fb }
.domain-table tbody td { padding: 12px 14px; color: #333; word-wrap: break-word; text-align: center }
.domain-table tbody td:nth-child(1) { text-align: left }
.content-hosting { margin-bottom: 2rem }
.blue-box-hosting { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2rem }
.item_hosting_price_detail { width: calc((100% - 4rem)/ 3); padding: 1rem 0rem 0; border-radius: 10px; overflow: hidden; transition: all .5s; cursor: pointer; background: #f2fbff; box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px }
.item_hosting_price_detail:hover { box-shadow: 0 0 15px #2c5baa82 }
.blue-web-loiich-hosting { position: relative; padding: 5rem 0 1rem; background: url(../images/icon4.png) no-repeat left center, linear-gradient(360deg, #fff 0, rgb(224 244 255) 50%, rgba(255, 255, 255, 1) 100%); overflow: hidden }
.blue-web-loiich-hosting:before { position: absolute; content: ''; right: -50px; top: 0; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.Box_loiich { display: flex; flex-wrap: wrap; align-items: stretch; gap: 2rem; justify-content: center; padding-top: 2rem }
.iLoiich { width: calc((100% - 4rem)/ 3); box-shadow: 0 0 10px #ccc; padding: 1rem; text-align: center; border-radius: 1rem; background: #fff; transition: all .5s; position: relative; top: 0; cursor: pointer }
.iconLi { margin-bottom: 1rem }
.nameLi { color: var(--color-blue); text-transform: capitalize; font-size: 20px; font-weight: 700 }
.iLoiich p { margin: 0 }
.iLoiich:hover { box-shadow: 0 0 10px #2c5baa; top: -5px }
.blue-web-tieuchi-tk { padding: 2rem 0 0 }
.blue-web-tieuchi-tk .blue-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center }
.tieuchi-tk-left { width: 45% }
.tieuchi-tk-right { width: 50% }
.title-tk { margin-bottom: 2rem }
.title-tk h3 { font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 36px; line-height: 40px; margin-bottom: 1rem }
.title-tk p { margin: 0; font-size: 15px }
.pic-tk { overflow: hidden }
.pic-tk img { transition: all 1.5s; position: relative; top: 0; right: 0; -webkit-animation: RightReverseAni 7s linear infinite; animation: RightReverseAni 7s linear infinite }
.container_tc { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; gap: 20px 20px; grid-auto-flow: row dense; grid-template-areas: ". itc2" "itc0 itc2" "itc0 itc3" "itc1 itc3" "itc1 itc4" ". itc4" }
.itc0 { grid-area: itc0 }
.itc1 { grid-area: itc1 }
.itc2 { grid-area: itc2 }
.itc3 { grid-area: itc3 }
.itc4 { grid-area: itc4 }
.itemTc_tk { position: relative; text-align: center; padding: 2rem 1.5rem; background-color: #fff; box-shadow: inset 2px 0 15px rgba(0, 0, 0, .15); border-radius: 10px; cursor: pointer; border-radius: 12px; overflow: hidden }
.icon_tk { margin-bottom: 1rem }
.icon_tk img { filter: brightness(0) saturate(100%) invert(36%) sepia(70%) saturate(2378%) hue-rotate(177deg) brightness(90%) contrast(101%) }
.itemTc_tk h4 { color: var(--color-blue); font-size: 18px; font-weight: 700; text-transform: capitalize; margin-bottom: 10px }
.itemTc_tk>p { font-size: 14px; font-style: italic; margin: 0 }
.overlay-tc { padding: 1.5rem; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; color: #fff; text-align: center; -webkit-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; -moz-transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); background-image: -ms-linear-gradient(top, var(--color-blue) 0, var(--color-min-blue) 100%); background-image: -moz-linear-gradient(top, var(--color-blue) 0, var(--color-min-blue) 100%); background-image: -o-linear-gradient(top, var(--color-blue) 0, var(--color-min-blue) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-blue)), color-stop(100, var(--color-min-blue))); background-image: -webkit-linear-gradient(top, var(--color-blue) 0, var(--color-min-blue) 100%); background-image: linear-gradient(to bottom, var(--color-blue) 0, var(--color-min-blue) 100%); display: flex; flex-wrap: wrap; align-content: center; justify-content: center }
.itemTc_tk:hover .overlay-tc { -moz-transform: rotateX(0); -webkit-transform: rotateX(0); -ms-transform: rotateX(0); -o-transform: rotateX(0); transform: rotateX(0); opacity: 1; visibility: visible }
.overlay-tc b { display: block; margin-bottom: 10px; text-transform: capitalize; font-size: 17px }
.overlay-tc p { margin-bottom: 0; font-size: 14px }
.blue-web-all-template { position: relative; padding: 5rem 0 2rem; background: url(../images/icon4.png) no-repeat left center, linear-gradient(360deg, #fff 0, rgb(224 244 255) 50%, rgba(255, 255, 255, 1) 100%); overflow: hidden }
.blue-web-all-template:before { position: absolute; content: ''; right: -50px; top: 0; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.blue-web-boxTk { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem }
.itemThietke_detail { width: calc((100% - 4.5rem)/ 4); height: 440px; overflow: hidden; border-radius: 10px; position: relative; box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; cursor: pointer }
.itemThietke_detail img { width: 100%; height: auto; display: block; margin: 0 0 8px; -webkit-transition: all ease-in-out 5s; transition: all ease-in-out 5s; position: absolute; left: 0; top: 0 }
.itemThietke_detail:hover img { top: 100%; transform: translateY(-100%); -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -ms-transform: translateY(-100%) }
.blue-contact-full { background: linear-gradient(360deg, #fff 0, rgb(224 244 255) 50%, rgba(255, 255, 255, 1) 100%) }
.blue-web-boxContact-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem }
.blue-web-left { width: 650px; height: 650px; position: relative; text-align: center; overflow: hidden; display: flex; justify-content: center; align-items: center }
.blue-web-right { width: calc(100% - 650px - 2rem); background: #fff; padding: 3rem 2rem; border-radius: 2rem; box-shadow: #ccdbe8 3px 3px 15px 0 inset, rgba(255, 255, 255, .5) -3px -3px 20px 10px inset; text-align: center }
.pic_contact { width: 80%; height: 80%; overflow: hidden; margin: 0 auto; border-radius: 50% }
.circles-box { position: absolute; top: 10%; left: 10%; width: 80%; height: 80% }
.animate-rotateme { animation: rotateme 20s linear infinite }
@keyframes rotateme {
	0% { transform: rotate(0) }
	100% { transform: rotate(360deg) }
}
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); transition-duration: 150ms }
.rounded-full { border-radius: 9999px }
.animate-rotateme { animation: rotateme 20s linear infinite }
.circle-one { background: 0 0; width: 120px; height: 120px; display: inline-block; z-index: 1; position: absolute; right: 5%; top: 5%; border: 15px solid var(--color-blue); border-radius: 50% }
.circle-two { background: #b0dbf2; width: 100px; height: 100px; display: inline-block; z-index: 1; position: absolute; left: 5%; bottom: 5%; border-radius: 50% }
.title-contact { text-transform: uppercase; font-weight: 700; font-family: "Crimson Pro", serif; font-size: 38px; line-height: 40px; color: var(--color-blue) }
.blue-web-right p { font-size: 20px; font-style: italic; font-family: "Playfair Display", serif; padding-bottom: 1rem; position: relative; background: url(../images/title.png) no-repeat center bottom }
.blue-web-info-contact { list-style: none; padding: 0; margin: 0 }
.blue-web-info-contact li { margin-bottom: 5px; font-weight: 500 }
.blue-web-info-contact li b { color: var(--color-min-blue); margin-right: 5px }
.blue-web-boxContact-bottom { position: relative; display: flex; justify-content: flex-start; align-items: center; margin: 5rem 0 6rem }
.BoxFormContact { position: absolute; width: 40%; top: 50%; right: 0; background: #fff; transform: translate(0, -50%); padding: 2rem; box-shadow: rgb(44 91 170 / 80%) 0 2px 5px 0, rgb(0 134 205 / 15%) 0 2px 7px 4px; border-radius: 0 2rem 2rem 0 }
.contact-map { width: 75%; border-radius: 2rem 0 0 2rem; overflow: hidden; line-height: 0; border: 5px solid var(--color-min-blue) }
.contact-map iframe { width: 100%; min-height: 550px }
.BoxFormContact b { text-align: center; display: block; font-size: 24px; color: var(--color-blue); position: relative; padding-bottom: 10px; margin-bottom: 1.5rem }
.BoxFormContact b:before { content: ''; width: 115px; height: 3px; background: var(--color-blue); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0) }
.BoxFormContact b:after { position: absolute; content: ""; width: 36px; height: 3px; left: calc(50% - 55px); bottom: 0; border-left: 10px solid #fff; border-right: 10px solid #fff; -webkit-animation: animborder 2s linear infinite; animation: animborder 2s linear infinite }
.blue-web-news-template { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2rem; margin-bottom: 2rem; }
.item_news { width: calc((100% - 4rem)/ 3); box-shadow: rgba(50, 50, 93, .25) 0 6px 12px -2px, rgba(0, 0, 0, .3) 0 3px 7px -3px; border-radius: 10px; overflow: hidden; transition: all .5s; position: relative; top: 0 }
.item_news a { color: #333 }
.pic_news { position: relative; overflow: hidden }
.pic_news img { transition: all .5s }
.item_news:hover { top: -5px; box-shadow: rgb(5 121 220 / 50%) 0 6px 12px -2px, rgb(44 91 170 / 65%) 0 3px 7px -3px }
.item_news:hover .pic_news>img { transform: scale(1.2) }
.admin_news { position: absolute; bottom: 0; left: 0; background: #fff; display: flex; justify-content: center; align-items: center; padding: 10px 20px; border-radius: 10px 10px 0 0; gap: 1rem }
.admin_news span img { height: 20px; vertical-align: bottom }
.admin_news:after { content: ""; width: 40px; height: 100%; display: inline-block; background-color: transparent; border-radius: 100px; box-shadow: -20px 20px 0 #fff; position: absolute; bottom: 0; left: 100%; z-index: 0 }
.admin_news span { font-size: 13px; font-weight: 600 }
.admin_news b { font-weight: 600; font-size: 13px }
.admin_news b i { color: var(--color-min-blue); font-size: 20px; font-weight: 500; vertical-align: bottom }
.info_news { padding: 1rem 1.5rem }
.name_news { font-size: 18px; font-weight: 600; text-transform: capitalize; color: var(--color-blue); -webkit-line-clamp: 2 }
.desc_news { margin: 0 }
.title-orther-news { margin-bottom: 2rem; color: var(--color-blue); font-size: 32px; font-weight: 600; text-transform: capitalize; padding-bottom: 7px; position: relative; font-family: "Crimson Pro", serif }
.title-orther-news:before { content: ''; width: 50px; height: 3px; background: var(--color-blue); position: absolute; bottom: 0; left: 0 }
.title-orther-news:after { content: ''; width: 5px; height: 3px; background: #fff; position: absolute; bottom: 0; left: 10px }
.blue-web-news-orther { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem }
.iNews_or { width: calc((100% - 1rem)/ 2); transition: all .5s; position: relative; top: 0; box-shadow: rgba(50, 50, 93, .25) 0 2px 5px -1px, rgba(0, 0, 0, .3) 0 1px 3px -1px; padding: 5px }
.iNews_or:hover { top: -5px; box-shadow: rgb(99 169 217) 0 2px 5px -1px, rgb(44 91 170) 0 1px 3px -1px }
.iNews_or a { color: #333; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap }
.picNews_or { width: 40% }
.picNews_or img { width: 100%; height: 100%; object-fit: cover }
.infoNews_or { width: 60%; padding-left: 10px }
.nameNews_or { -webkit-line-clamp: 2; font-size: 16px; font-weight: 600; text-transform: capitalize; color: var(--color-blue); margin-bottom: 7px }
.infoNews_or p { margin: 0; font-size: 13px; -webkit-line-clamp: 3 }
.nameNews_or:hover { color: var(--color-min-blue) }
.blue-web-news-detail { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start }
.blue-web-news-detail-left { width: calc(100% - 20rem); }
.blue-web-news-detail-right { width: 18rem; position: sticky; top: 90px; right: 0 }
.title-detail-main { margin-bottom: 1.5rem }
.title-detail-main h2 { color: var(--color-blue); font-size: 32px; line-height: 32px; text-transform: capitalize; font-family: "Crimson Pro", serif; position: relative; padding-bottom: 10px }
.title-detail-main h2:before { content: ''; width: 70px; height: 3px; background: var(--color-blue); position: absolute; bottom: 0; left: 0 }
.title-detail-main h2:after { content: ''; width: 8px; height: 3px; background: #fff; position: absolute; bottom: 0; left: 10px }
.search_right { border: 1px solid #e1dfdf; display: flex; justify-content: space-between; border-radius: 5px; overflow: hidden; margin-bottom: 1rem; align-items: stretch }
.search_right input { width: calc(100% - 70px); padding: 10px; border: none }
.search_right p { margin: 0; width: 70px; text-align: center; display: inline-flex; justify-content: center; align-items: center; background: var(--color-blue); color: #fff; transition: all .3s; cursor: pointer; font-size: 18px }
.search_right p:hover { background: var(--color-min-blue) }
.BoxRight { margin-bottom: 2rem }
.title-news-right { margin-bottom: 1rem; color: #333; font-size: 20px; font-weight: 600; text-transform: capitalize; padding-bottom: 7px; position: relative }
.title-news-right:before { content: ''; width: 50px; height: 3px; background: var(--color-blue); position: absolute; bottom: 0; left: 0 }
.title-news-right:after { content: ''; width: 5px; height: 3px; background: #fff; position: absolute; bottom: 0; left: 10px }
.menu-right { padding: 0; margin: 0; list-style: none }
.menu-right li { margin-bottom: 5px; padding: 0 0 0 1rem }
.menu-right li a { color: #333; font-weight: 600; text-transform: capitalize; transition: all .4s; cursor: pointer; display: block; padding-bottom: 10px }
.menu-right li a i { color: #005ab8; font-size: 12px; margin-right: 6px; vertical-align: baseline }
.menu-right li ul { padding: 0; margin: 0; list-style: none }
.menu-right li ul li { padding: 0 0 0 1.5rem }
.menu-right li ul li a { font-size: 14px; font-weight: 500 }
.menu-right li ul li a i { font-size: 5px }
.menu-right li a:hover { color: var(--color-min-blue); padding-left: 5px }
.list-news-right { padding: 0; margin: 0; list-style: none }
.item-news-right { margin-bottom: 10px }
.item-news-right a { display: flex; color: var(--color-blue); justify-content: space-between; align-items: center }
.pic-news-right { width: 75px; border-radius: 5px; border: 2px solid var(--color-min-blue) }
.info-news-right { width: calc(100% - 85px) }
.name-news-right { font-size: 15px; text-transform: capitalize; margin: 0; -webkit-line-clamp: 2; line-height: 20px }
.name-news-right:hover { color: var(--color-min-blue) }
.domain-search { max-width: 700px; margin: 0 auto 2rem }
.blue-web-form-domain { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; border: 5px solid #a1d5f0; border-radius: 7px; overflow: hidden }
.blue-web-form-domain input#i-domain-check { width: calc(100% - 150px); height: auto; padding: 15px 10px; font-size: 15px; border: none; box-shadow: none }
.blue-web-form-domain button#i-domain-button { width: 150px; border-radius: 0; background: var(--color-min-blue); border: none; text-transform: uppercase; font-size: 17px; font-weight: 600 }
.blue-web-form-domain button#i-domain-button:hover { background: var(--color-blue) }
.result-top-domain { text-align: center; background: linear-gradient(360deg, rgb(224 244 255) 0, rgba(255, 255, 255, 1) 100%); box-shadow: rgb(161 213 240) 0 6px 12px -2px, rgb(0 134 205) 0 3px 7px -3px; padding: 2rem; border-radius: 1rem; margin-bottom: 2rem }
.title-dk-domain span { font-weight: 700; color: var(--color-min-blue); font-family: "Crimson Pro", serif; font-size: 40px; line-height: 45px; position: relative; z-index: 9; text-transform: uppercase; margin: 0 }
.title-dk-domain p { font-size: 16px; max-width: 850px; margin: 0 auto 2rem }
.result-top-domain p { font-size: 17px }
.result-top-domain p span { font-size: 30px; font-weight: 700 }
.result-top-domain p span:nth-child(2) { color: var(--color-min-blue) }
.form-domain .newsletter-input { box-shadow: rgba(50, 50, 93, .25) 0 2px 5px -1px, rgba(0, 0, 0, .3) 0 1px 3px -1px }
.site-title { border: 2px solid var(--color-min-blue) }
.site-title input[type=submit] { color: var(--color-min-blue); opacity: 1 }
.site-title:hover input[type=submit] { color: #fff }
.load-domain-result { margin-bottom: 2rem }
#list-domain-result { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; align-content: space-between; gap: 1rem; flex-direction: unset }
#list-domain-result li { border: 1px solid #e2f5ff; width: calc((100% - 1rem)/ 2); padding: 10px; display: flex; justify-content: space-between; align-items: center; border-radius: 5px; transition: all .3s; cursor: pointer }
#list-domain-result li:hover { box-shadow: rgb(0 76 117 / 19%) 0 3px 3px 0 }
#list-domain-result li h2 { font-size: 16px; color: var(--color-blue); margin: 0; width: 50% }
#list-domain-result li button { background: var(--color-min-blue); border: 1px solid var(--color-min-blue); color: #fff; font-size: 13px; text-transform: capitalize; font-style: italic; padding: 5px 7px; border-radius: 5px }
.info-right-check-domain { width: calc(50% - 10px); display: flex; justify-content: flex-end; align-items: center; gap: 10px }
.price-domain { text-align: right; font-size: 13px }
.price-domain span { display: block; font-style: italic }
.price-domain .price { color: var(--color-red); font-weight: 600 }
.price-domain-out { background: #e5f4fb; padding: 5px 10px; font-size: 13px; color: var(--color-blue); border-radius: 7px; font-weight: 600 }
.result-top-domain p span.big-price { color: var(--color-red) }
.call-cskh a { display: inline-block; border: 2px solid var(--color-min-blue); padding: 10px 2rem; color: #fff; background: var(--color-min-blue); border-radius: 2rem; font-weight: 600; transition: all .5s; position: relative; overflow: hidden }
.call-cskh a i { transition: all .5s; position: absolute; top: calc(50% - 7px); left: 105% }
.call-cskh a:hover { padding: 10px 2.5rem; box-shadow: rgba(0, 0, 0, .4) 0 2px 4px, rgba(0, 0, 0, .3) 0 7px 13px -3px, rgba(0, 0, 0, .2) 0 -3px 0 inset }
.call-cskh a:hover i { left: 80% }
.slogan-blue { text-align: center; margin-bottom: 2rem; font-size: 20px; font-weight: 600; color: #000 }
.txt-bg-ani::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 100%; transition: .5s ease-in-out; background-color: #7c0fd1; border-radius: .8rem }
.txt-bg-ani.active::before { width: 100% }
.txt-bg-ani { background: 0 0 !important; box-shadow: unset; position: relative }
.txt-bg { display: block; width: 100%; max-width: max-content; padding: .8rem 1.6rem; color: #fff; border-radius: .8rem; margin: .4rem auto 0; font-weight: 700 }
.blue-web-projects .slogan-blue { text-align: left }
.blue-web-projects .slogan-blue .txt-bg { margin: .4rem 0 0 }
.txt-bg-ani .txt { position: relative; z-index: 2 }
.txt-bg-ani.color-1::before { background-color: #f41e92 }
.txt-bg-ani.color-2::before { background-color: #a943f9 }
.txt-bg-ani.color-3::before { background-color: #f5851e; }
.txt-bg-ani.color-4::before { background-color: #f41e92 }
.txt-bg-ani.color-5::before { background-color: #a943f9 }
.txt-bg-ani.color-6::before { background-color: #f5851e }
.tinhnang-ai-content { position: relative; padding: 5rem 0 5rem; background: url(../images/icon4.png) no-repeat left center, linear-gradient(360deg, #fff 0, rgb(224 244 255) 50%, rgba(255, 255, 255, 1) 100%); overflow: hidden }
.tinhnang-ai-content:before { position: absolute; content: ''; right: -50px; bottom: 0; width: 335px; height: 384px; display: inline-block; background: url(../images/icon2.png) no-repeat; animation: Rotate 20s infinite linear }
.title-main h4 { font-weight: 700; color: var(--color-blue); font-family: "Crimson Pro", serif; font-size: 36px; line-height: 36px; position: relative; z-index: 9; text-transform: uppercase; margin: 0 }
.Box-tinhnang { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 2rem }
.i-tinhnang { width: calc((100% - 4rem)/ 3); text-align: center }
.feature-icon { width: 80px; height: 80px; box-shadow: 0 0 8px var(--color-min-blue); border-radius: 50%; margin: 0 auto; font-size: 30px; display: flex; justify-content: center; align-items: center; color: var(--color-min-blue); background: #e4f5ff; position: relative; z-index: 2 }
.feature-info { box-shadow: 0 0 5px #0086cd; padding: 4rem 1rem 2rem; position: relative; z-index: 1; margin-top: -40px; border-radius: 1rem; background: #fff }
.feature-info h5 { text-transform: uppercase; font-weight: 700; font-size: 18px }
.feature-info p { margin: 0 }
.BoxHdsd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: stretch; margin-bottom: 2rem }
.step-box { box-shadow: rgba(0, 0, 0, .16) 0 3px 6px, rgb(0 134 205 / 37%) 0 3px 6px !important; width: calc((100% - 4rem)/ 3); padding: 1rem }
.step-box h6 { color: #333; font-weight: 600 }
.step-box p { margin-bottom: 0 }
.must-try-ai-content a { color: #fff; padding: 12px 20px; font-size: 16px; font-weight: 600; border-radius: 10px; display: inline-block; background: var(--color-blue); background: linear-gradient(45deg, var(--color-blue) 0, rgba(110, 204, 255, 1) 50%, rgba(0, 56, 153, 1) 100%); cursor: pointer; position: relative; }
.must-try-ai-content a:hover { background: var(--color-min-blue); background: linear-gradient(45deg, var(--color-min-blue) 0, rgb(17 79 169) 50%, var(--color-min-blue) 100%) }
.must-try-ai-content { position: relative; max-width: 1920px; margin: 0px auto; overflow: hidden; }
.must-try-ai-content a span { position: absolute; }
.ar-left { width: 65px; top: 50%; left: -100px; transform: translate(0%, -50%); }
.must-try-ai-content a span img { max-width: 100%; height: 100%; }
.ar-right { width: 65px; top: 50%; right: -100px; transform: translate(0%, -50%); }
.ar-right img { transform: rotateZ(-180deg); }
.contentAiRequestContent .modal-dialog { max-width: 1200px; width: 100%; }
.ai-write-content { border: 2px solid var(--color-blue); padding: 5px; background: var(--color-tra-blue) }
.ai-write-content .modal-header { background: linear-gradient(to right, var(--color-blue), var(--color-min-blue)) !important; border: none; font-weight: 700 }
.ai-write-content .modal-header .modal-title { width: 100%; text-align: center; font-weight: 700 }
.ai-write-content .modal-header button.close { opacity: 1; box-shadow: none; border: none }
.content__requestAi label { color: var(--color-min-blue); text-transform: capitalize; font-size: 16px; font-weight: 600; margin-bottom: 7px; width: 100% }
.content__requestAi label i { color: var(--color-main) !important }
.content__requestAi input { height: auto; padding: 10px 10px }
.content__requestAi select { padding: 11px 10px; height: auto }
.modal-content { border-radius: 1rem; overflow: hidden }
#outline__content { font-size: .95rem; line-height: 1.6; background-color: #f8f9fa; border-radius: .75rem; padding: 10px; box-shadow: rgba(50, 50, 93, .25) 0 2px 5px -1px, rgba(0, 0, 0, .3) 0 1px 3px -1px }
#contentTextArea textarea { width: 100%; height: 300px; padding: 1rem; border-radius: .5rem; border: 1px solid #ced4da; resize: vertical; font-size: 1rem }
.btn-apply-contentAi { background-color: #007bff; border: none; border-radius: .5rem; transition: background .3s ease }
.btn-apply-contentAi:hover { background-color: #0056b3 }
.ai-write-content .modal-footer button { font-size: 15px !important; text-transform: capitalize; background: var(--color-blue); background: linear-gradient(45deg, var(--color-blue) 0, rgba(110, 204, 255, 1) 50%, rgba(0, 56, 153, 1) 100%); border: none; padding: 13px 2rem !important; font-weight: 600 }
.ai-write-content .modal-footer button:hover { background: var(--color-min-blue); background: linear-gradient(45deg, var(--color-min-blue) 0, var(--color-blue) 50%, var(--color-min-blue) 100%) }
.ai-write-content .border-right { border-right: 1px solid #a2bcef !important }
.contentAiRequestContent .modal-content { border: 4px solid var(--color-main); padding: 5px }
#contentAiRequestContentLabel { color: var(--color-blue); text-transform: capitalize; font-weight: 600; font-size: 18px }
.contentAiRequestContent .modal-content .modal-body { padding: 10px; max-height: 80vh;
    overflow-y: scroll; }
#outline__content h5 { font-weight: 600; color: var(--color-main); font-size: 17px }
.content__requestAi__title--text { margin: 0 }
.content__requestAi__title--text { font-weight: 600; color: var(--color-main); font-size: 17px; text-transform: uppercase }
#outline__content button { text-transform: capitalize }
.btn-apply-contentAi { text-transform: capitalize }
.content__requestAi__title--input { color: #333 }
.content__requestAi__title--input h2 { font-size: 20px; font-weight: 700; color: var(--color-blue) }
.content__requestAi__title--input h3 { font-size: 16px; font-weight: 600; color: var(--color-min-blue) }
.content__requestAi__title--input p { font-size: 14px; text-transform: none; font-weight: 400 }
.icon_try { text-align: center; margin-bottom: 1rem; }
.icon_try img { max-height: 100px; }

/*search full*/
.icon-search-header { width: 45px; height: 45px; cursor: pointer; text-align: center; color: #ffffff; font-size: 20px; margin: 0px; border-radius: 5px; background: var(--color-min-blue); background: linear-gradient(45deg, rgba(110, 204, 255, 1) 0%, #003899 100%); }
.icon-search-header:hover { background: linear-gradient(90deg, rgba(110, 204, 255, 1) 0%, #003899 100%); }
.icon-search-header-mobi { background: none; }
.openBtn { background: none; border: none; cursor: pointer; color: #fff; transition: all 0.5s; width: 100%; height: 100%; padding: 0; }
.openBtn:hover { background: var(--color-ye); border-radius: 5px; }
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9999; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #0c3476d6; pointer-events: none; visibility: hidden; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; opacity: 0; }
.overlay.active { visibility: visible; pointer-events: all; opacity: 1; }
.overlay-content { position: relative; width: 100%; text-align: center; margin: auto; }
.overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 40px; cursor: pointer; color: white; transition: all 1.0s; }
.overlay .closebtn:hover { transform: rotate(360deg); }
.search { width: 100%; max-width: 600px; margin: 0px auto; background: #ffffff00; position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ffffff5e; }
.search input { padding: 15px; font-size: 17px; border: none; width: calc(100% - 50px); background: #ffffff00; color: #fff; }
.search input::placeholder { color: #fff; }
.search input:hover { }
.search p { width: 50px; padding: 15px; background: #ddd0; font-size: 20px; border: none; cursor: pointer; margin: 0; color: #fff; }
.search p:hover { background: var(--color-ye); }
#notification-container { position: fixed; bottom: 100px; left: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; transition: transform 0.3s ease; }
.notification { background-color: #2c2c2e; color: white; padding: 10px 14px; border-radius: 12px; max-width: 280px; font-size: 14px; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
.notification.show { opacity: 1; transform: translateY(0); }
.notification_hidden { transform: translateY(100%);    /* ẩn xuống dưới */ }
.blue-web-chamngon { position: relative; bottom: 1rem; left: 10px; z-index: 99; overflow: hidden; }
.icon-chamngon { width: 50px; height: 50px; background: var(--color-min-blue); padding: 5px; border-radius: 5px; border: 3px solid var(--color-blue); position: fixed; bottom: 10px; left: 10px; }
.icon-chamngon img { animation-name: trin; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; }
.text-chamngon { display: flex; flex-direction: column; padding: 10px; height: 250px; position: fixed; bottom: 70px; left: 0; }
.chamngon-wrapper { display: flex; flex-direction: column; gap: 6px; transition: transform 2s ease-out; }
.chamngon-item { opacity: 0; transform: translateY(100%); animation: slideUp 2s ease-out forwards; transition: opacity 2s ease-out, transform 2s ease-out;    /* Đảm bảo mọi thay đổi mượt mà */ padding: 10px;    /* background: #f0f0f0; */ border-radius: 5px; text-align: center; }
@keyframes slideUp {
	0% { opacity: 0; transform: translateY(100%); }
	100% { opacity: 1; transform: translateY(0); }
}
.chamngon-item.fade-out { animation: fadeOut 2s ease-out forwards; }
@keyframes fadeOut {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-30px);        /* Di chuyển lên nhẹ khi mờ dần */ }
}
.chamngon-item { max-width: 270px; margin-bottom: 10px;    /* background: #00000078; */ padding: 8px; border-radius: 10px; color:; font-size: 13px; position: relative; box-shadow: rgb(77 160 225) 0px 3px 8px; transition: all 0.5s; }

/* template media */
.blue-web-media-full { background: #000; position: relative; overflow: hidden; }
.blue-web-media-full:before { border-radius: 500px; background: #0083c7a3; filter: blur(75px); width: 250px; height: 250px; flex-shrink: 0; content: ''; position: absolute; top: 10%; left: 6%; }
.blue-web-media-full .blue-content1 { display: flex; width: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.blue-media-left { width: 13rem; background: #000; height: 100svh; position: fixed; left: 0; top: 0; z-index: 2; border-right: 1px solid #1f1f1f; }
.blue-media-center { padding-top: 24px; min-height: 100vh; width: 100%; max-width: 1130px; padding-left: 15px; padding-right: 15px; }
.blue-media-right { width: 20rem; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; height: 100svh; position: fixed; right: 0;    /* top: 0; */ padding: 10px 10px 0 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.bluehome { border-bottom: 1px solid #1f1f1f; padding: 5px 10px 5px 24px; }
.bluehome a { color: #a5a5a5; text-decoration: none; font-weight: 500; }
.bluehome a:hover { color: #0083c7; }
.logo-blue { padding: 10px 10px; margin-bottom: 2rem; }
.main-nav-media { width: 100%; }
.main-nav-media ul { padding: 0; margin: 0; list-style: none; }
.main-nav-media ul li { margin-bottom: 10px; }
.main-nav-media ul li a { padding: 12px 12px 12px 20px; display: flex; justify-content: flex-start; align-items: center; gap: 5px; text-decoration: none; color: #bdbdbd; font-size: 16px; font-weight: 500; border-left: 5px solid #0077be00; background: #000; transition: all 0.5s; }
.main-nav-media ul li a svg { height: 27px; }
.main-nav-media ul li:hover a, .main-nav-media ul li a.active { border-left: 5px solid #0077be; background: #1d1b1b; color: #e5e5e5; }
.box-short-video { height: calc(100vh - 48px); overflow: hidden; }
.item_video_short { height: 100%; max-width: 510px; margin: 0px auto; border-radius: 10px; overflow: hidden; }
.item_video_short video { height: 100%; max-height: 905px; }
.short_slick { max-width: 768px; margin: 0px auto; position: relative; }
.short_slick button { width: 44px; height: 44px; border-radius: 50%; background: #2B2A29 !important; cursor: pointer; transition: all 0.3s; }
.short_slick button:before { content: ''; font-family: var(--fa-style-family, "Font Awesome 6 Pro"); color: #fff; }
.short_slick .slick-next:before { content: '\f078'; }
.short_slick .slick-prev:before { content: '\f077'; }
.short_slick button:hover { background: hsl(0deg 0% 100% / 31%) !important; }
.short_slick button.slick-prev { left: auto; right: 0; top: calc(50% - 30px); }
.short_slick button.slick-next { top: calc(50% + 30px); right: 0; }

/* ===== Livefeed CTA ===== */
.livefeed-cta { background: linear-gradient(135deg, #2C5BAA, #0086CD); padding: 24px; border-radius: 8px; margin-top: 32px; color: #fff; text-align: center; }
.livefeed-cta p { font-size: 16px; margin-bottom: 16px; }
.livefeed-cta-buttons { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.livefeed-cta a { background: #fff; color: #2C5BAA; padding: 10px 20px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 16px; transition: all 0.3s ease; }
.livefeed-cta a:hover { background: #f2f6ff; transform: translateY(-2px); }

/*Responsive*/
@media (max-width:1600px) {
	.slider-left { padding-left: 5% }
	.blue-web-name-sli { font-size: 65px; line-height: 65px }
	.blue-web-name-sli:before { top: 3.2rem }
	.blue-web-desc-sli { font-size: 17px }
	.itemService a { padding: 3rem 2rem 3rem }
}
@media (max-width:1590px) {
	.menu ul.menu-main { gap: 7px; }
	.menu ul li a { padding: 12px 7px }
}
@media (max-width:1500px) {
	.blue-web-header-services .blue-content1 { margin-left: 40px; width: calc(100% - 40px) }
	.blue-web-header-services .blue-content1:before { left: -5px }
	.blue-web-header-services .blue-content1:after { left: -15px }
	.menu ul li a { font-size: 14px; }
}
@media (max-width:1450px) {
	.blue-web-header-top .blue-content2 { padding: 0 10px }
}
@media (max-width:1420px) {
	.blue-web-line-process { top: 3rem }
	.blue-web-logo { width: 170px; }
	.blue-web-menu { width: calc(100% - 170px - 1rem); }
}
@media (max-width:1400px) {
	.blue-web-name-sli { font-size: 55px; line-height: 55px }
	.blue-web-name-sli:before { top: 2.8rem }
	.slider-left { padding-left: 2rem }
}
@media (max-width:1386px) {
	.menu ul.menu-main { gap: 5px; }
	.itemService a { padding: 2rem 1rem 2rem }
	.inner-box h5 { font-size: 22px; line-height: 25px; min-height: 50px }
	.blue-web-projects { background-size: 50% 100% }
	.blue-boxthietke-right { width: 45%; padding: 0 3rem 0 3rem }
	.blue-boxthietke-left { width: 55% }
	.title-desk2 { margin: 0 auto 2rem }
	.blue-web-icon-video .ripple, .blue-web-icon-video .ripple:after, .blue-web-icon-video .ripple:before { height: 60px; width: 60px }
	.blue-web-icon-video .ripple i { font-size: 25px }
	.itemThietke { height: 380px }
	.content-main { padding: 0 10px }
	.blue-web-thongso { padding: 2rem 0 2rem }
	.menu ul li a { padding: 12px 5px; font-size: 14px }
	.blue-web-logo { width: 120px; }
	.blue-web-menu { width: calc(100% - 120px - 1rem); }
}
@media (max-width:1300px) {
	.menu ul li a svg { max-height: 15px; max-width: 15px }
	.icon-search-header { width: 36px; height: 36px; }
}
@media (max-width:1250px) {
	.menu ul.menu-main { gap: 5px; }
	.blue-web-header-top { padding: 0; }
	.blue-web-header-top .blue-content2 { flex-wrap: wrap }
	.blue-web-address-header { display: block; width: 100%; padding: 8px 10px 20px; text-align: center; color: var(--color-min-blue); font-size: 16px; font-weight: 600 }
	.menu { display: none }
	.menu-res { display: block }
	.blue-web-menu { width: 90px }
	.blue-web-logo { width: calc(100% - 150px) }
	.blue-web-logo img { max-height: 60px }
	.blue-web-logo { display: none }
	.blue-web-menu { width: 100% }
	.blue-web-logo-menu { background: #fff; border: 3px solid var(--color-min-blue); border-radius: 5px; box-shadow: 0 0 14px #fff }
	.blue-web-logo-menu img { max-height: 70px; transition: all 0.5s; }
	.blue-web-header-top .blue-content2 { padding: 0 0; }
	.blue-web-menu-head { padding: 0; }
	.blue-web-header-top.fix_head .blue-web-logo-menu img { max-height: 40px; }
	.blue-web-header-top.fix_head .blue-web-address-header { display: none; }
	.blue-web-header-top.fix_head .blue-web-logo-menu { box-shadow: 0 0 0px #fff; border: 2px solid var(--color-min-blue); }
}
@media (max-width:1200px) {
	.big-title { font-size: 110px; bottom: -3rem }
	.title-desk h2, .title-desk h3, .title-desk h4 { font-size: 42px; line-height: 42px }
	.title-desk h2 b, .title-desk h3 b, .title-desk h4 b { font-size: 48px }
	.process-numb { font-size: 75px; left: -30px; font-weight: 800 }
	.icon-process { width: 100px; height: 100px }
	.blue-web-line-process { top: 1rem }
	.itemProcess:nth-child(1) { margin-top: 5rem }
	.itemProcess:nth-child(3) { margin-top: 4rem }
	.itemProcess:nth-child(4) { margin-top: 9rem }
	.itemProcess:nth-child(5) { margin-top: 4rem }
	.so-cs b { font-size: 55px }
	.title-dk-domain span { font-size: 35px; line-height: 40px }
	.result-top-domain p { font-size: 15px; margin-bottom: 0 }
	.title-dk-domain { margin: 1rem 0 }
	.tieuchi-tk-left { width: 40% }
	.title-tk { margin-bottom: 1rem }
	.title-tk h3 { font-size: 32px; line-height: 1 }
	.pic-tk img { max-height: 300px }
	.tieuchi-tk-right { width: calc(60% - 2rem) }
	.itemTc_tk { padding: 1rem 1rem }
	.itemTc_tk h4 { font-size: 16px }
	.blue-web-all-template { padding: 2rem 0 1rem }
	.blue-web-left { width: 500px; height: 500px; }
	.blue-web-right { width: calc(100% - 500px - 2rem); }
	.blue-web-boxContact-top { margin-bottom: 7rem }
	.blue-web-name-sli { font-size: 50px; line-height: 50px; }
}
@media (max-width:1024px) {

	/*	.blue-web-header-inside .blue-web-header-top { padding: 10px 0 }*/
	.itemService { margin: 15px 8px }
	.itemService a { box-shadow: 2px 7px 7px rgba(0, 0, 0, .15) }
	.blue-web-header-services .blue-content1:before { width: 100px }
	.blue-web-header-services .blue-content1:after { width: 100px }
	.blue-web-name-sli { font-size: 45px; line-height: 40px }
	.blue-web-name-sli:before { top: 2.2rem; height: 5px }
	.contact-input { margin-bottom: 15px }
	.flex-cus, .row-20, .row-video { margin-left: -5px; margin-right: -5px }
	.col-20, .mg-cus, .mg-video { padding-left: 5px; padding-right: 5px }
	.content-text img { height: auto !important }
	.padding-top-bottom { padding: 2rem 0 }
	.pad-top { padding-top: 2rem }
	.pad-bottom { padding-bottom: 2rem }
	.mg-top { margin-top: 2rem }
	.mg-bottom { margin-bottom: 2rem }
	.title-detail-main { font-size: 20px }
	.cart-fixed { bottom: 220px }
	.btn-frame { display: none }
	.cart-pro-detail { width: 100%; margin-top: 10px }
	.pad-bottom { padding-bottom: 2rem !important }
	.pad-top { padding-top: 2rem !important }
	.padding-top-bottom { padding: 2rem 0 !important }
	.product-tool { opacity: 1; visibility: visible; position: initial }
	.product-tool a span { display: none }
	.title-desk h2, .title-desk h3, .title-desk h4 { font-size: 38px; line-height: 38px }
	.title-desk h2 b, .title-desk h3 b, .title-desk h4 b { font-size: 44px }
	.an_tit { font-size: 72px }
	.blue-web-projects { background-size: 60% 100%; padding: 3rem 0 7rem }
	.blue-boxthietke-right { padding: 0 1rem 0 1rem }
	.blue-title-video p b { font-size: 48px }
	.blue-title-video p { font-size: 42px; line-height: 42px }
	.blue-title-video span { font-size: 28px; line-height: 28px }
	.name_news { font-size: 16px; line-height: 20px }
	.blue-web-news-template { gap: 1rem }
	.item_news { width: calc((100% - 2rem)/ 3) }
	.blue-web-news-detail-left { width: calc(100% - 18rem) }
	.blue-web-news-detail-right { width: 17rem }
	.blue-box-hosting { gap: 1rem }
	.item_hosting_price_detail { width: calc((100% - 2rem)/ 3) }
	.Box_loiich { gap: 1rem }
	.iLoiich { width: calc((100% - 2rem)/ 3) }
	.title-main h4 { font-size: 30px; line-height: 30px }
	.feature-icon { font-size: 27px }
	.Box-tinhnang { gap: 1rem }
	.i-tinhnang { width: calc((100% - 2rem)/ 3) }
}
@media only screen and (min-width:992px) {
	.comment-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
}
@media only screen and (max-width:991px) {
	.comment-item-poster { width: auto; margin-right: 0; margin-bottom: .5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start }
	.comment-item-letter { width: 40px; height: 40px; line-height: 40px; font-size: 13px; margin-bottom: 0 }
	.comment-item-name { margin-bottom: 0; margin-left: 10px; margin-right: 10px }
	.comment-item-information { width: 100% }
	.top-cart { margin-bottom: 2rem }
	.othernews { position: initial }
	.footer-title:after { width: 100% }
	#fanpage-facebook { width: 300px; overflow: hidden; margin: auto }
	.footer-news:nth-child(4) { width: 30% }
	.footer-news:nth-child(3) { width: 32% }
	.footer-news:nth-child(2) { width: 32% }
	.footer-news:nth-child(1) { width: 100%; text-align: left; margin-bottom: 1rem }
	.time-news { display: none }
	.copyright, .statistic { width: 100%; text-align: center }
	.blue-web-header-services .blue-content1 { margin-bottom: 4rem }
	.itemProcess:nth-child(4) { margin-top: 7rem }
	.itemProcess:nth-child(5) { margin-top: 2rem }
	.partner { max-width: calc(100% - 10px); margin: 10px auto; box-shadow: 0 0 10px rgba(0, 0, 0, .15) }
	.blue-web-partner { padding: 1rem 0 0 }
	.blue-web-feedback { padding: 1rem 0 2rem }
	.blue-web-hosting { padding: 2rem 0 0rem }
	.tabs-hosting { margin-bottom: 2rem }
	.blue-web-thongso .blue-content { gap: 1rem }
	.namchay { width: calc((100% - 3rem)/ 4) }
	.so-cs b { font-size: 50px }
	#list-domain-result li { flex-wrap: wrap }
	#list-domain-result li h2 { width: 100%; margin-bottom: 5px }
	.info-right-check-domain { width: 100% }
	.title-news-right { font-size: 17px }
	.menu-right li a { padding-bottom: 6px }
	.BoxRight { margin-bottom: 1rem }
	.blue-web-boxTk { gap: 1rem }
	.itemThietke_detail { width: calc((100% - 2rem)/ 3); height: 350px }
	.title-contact { font-size: 32px; line-height: 32px }
	.blue-web-right p { font-size: 17px }
	.blue-web-right { padding: 3rem 1rem }
}
@media (max-width:930px) {
	.item_hosting_price_detail { width: calc((100% - 1rem)/ 2) }
}
@media (max-width:870px) {
	.BoxProcess { overflow-x: scroll; padding-bottom: 2rem }
	.ProcessFull { margin-top: 1rem; }
	.itemProcess { min-width: 200px; margin-top: 2rem !important }
	.BoxFormContact { position: relative; top: 0; right: 0; width: 100%; transform: translate(0, 0); border-radius: 0 2rem 0 2rem; margin-bottom: 1rem }
	.blue-web-boxContact-bottom { flex-wrap: wrap; margin: 0 auto }
	.blue-web-boxContact-top { margin-bottom: 2rem; }
	.contact-map { width: 100%; border-radius: 0rem 2rem 0 2rem }
	.contact-form { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; gap: 1rem }
	.contact-input { width: calc((100% - 1rem)/ 2); margin: 0 }
	.contact-input:nth-child(5), .contact-input:nth-child(6) { width: 100% }
	.note-form2 { margin-bottom: 0 }
	.contact-button { width: 100%; text-align: center }
	.blue-web-left { margin: 0 auto 0rem; }
	.blue-web-right { width: 100%; padding: 2rem 1rem }
	.blue-web-boxContact-top { flex-wrap: wrap }
}
@media (max-width:769px) {
	.item-video1 img { height: 250px }
	.right-intro { width: 100% }
	.left-intro { width: 100%; margin-bottom: 20px; padding-right: 0 }
	.left-pro-detail, .right-pro-detail { width: 100%; margin: 0 }
	.left-pro-detail, .top-contact .article-contact { margin-bottom: 30px }
	.pic-news { width: 40% }
	.info-news { width: 60%; padding-left: 10px }
	.name-news { font-size: 15px }
	.desc-news.text-split { -webkit-line-clamp: 2 }
	.procart-label .quantity-procart p:first-child { display: block }
	.procart-label .quantity-procart p:last-child { display: none }
}
@media (max-width:768px) {
	.procart-label .quantity-procart p:first-child { display: none }
	.procart-label .quantity-procart p:last-child { display: block }
	.quantity-procart { text-align: right }
	.price-procart { display: none }
	.price-procart-rp { display: block }
	.blue-web-header-full { background: url(../images/bg_head_in.png) no-repeat top center; background-size: cover; background-attachment: fixed }
	.blue-web-header-bottom { flex-direction: column-reverse }
	.slider-left { width: 100%; padding: 1rem 10px }
	.slider-right { width: 100% }
	.big-title { color: #f0f8fc; font-size: 85px; bottom: -2rem; z-index: 2 }
	.blue-web-img-slide img { right: 0; max-height: 100% }
	.blue-web-img-slide { text-align: center; margin: 0 auto; max-width: 550px }
	.blue-web-header-services:after { content: ''; width: 100%; height: 50%; background: #fff; position: absolute; bottom: 0; left: 0; z-index: 1 }
	.blue-web-header-services .blue-content1 { margin-left: 15px; width: calc(100% - 15px) }
	.blue-web-header-services .blue-content1:before { left: 0 }
	.blue-web-header-services .blue-content1:after { left: -8px }
	.control-services button { width: 50px; height: 50px }
	.control-services button.owl-prev { right: calc(8% + 50px) }
	.control-services button svg { width: 35px }
	.title-desk h2, .title-desk h3, .title-desk h4 { font-size: 32px; line-height: 32px }
	.title-desk h2 b, .title-desk h3 b, .title-desk h4 b { font-size: 40px }
	.blue-box-about { flex-direction: column-reverse }
	.blue-about-left { width: 100% }
	.blue-about-right { width: 100%; text-align: center }
	.blue-about-right img { max-height: 350px }
	.slogan-blue { font-size: 17px; margin-bottom: 1rem }
	.title-desk2 h2 b { font-size: 42px }
	.title-desk2 h2 { font-size: 32px; line-height: 32px }
	.title-desk2 { margin: 0 auto 1rem }
	.title-desk2 h2 b { font-size: 42px }
	.title-desk2 h2 { font-size: 32px; line-height: 32px }
	.title-desk2 { margin: 0 auto 1rem }
	.title-detail-main h2 { font-size: 28px; line-height: 28px }
	.blue-boxthietke-left { width: 100%; margin-bottom: 2rem }
	.blue-boxthietke-right { width: calc(100% - 20px); background: var(--color-blue); background: linear-gradient(45deg, var(--color-blue) 0, rgba(110, 204, 255, 1) 50%, rgba(0, 56, 153, 1) 100%); padding: 3rem; border-radius: 1rem; position: relative; margin: 0 auto }
	.blue-web-projects { background: 0 0; padding: 2rem 0 3rem }
	.title-desk2 { text-align: center }
	.title-desk2 h2 { margin: 0 auto }
	.blue-web-projects .slogan-blue { text-align: center }
	.blue-web-projects .slogan-blue .txt-bg { margin: .4rem auto 0 }
	.itemThietke { height: 440px; width: calc(100% - 14px); box-shadow: 0 0 10px rgba(0, 0, 0, .3) }
	.control-thietke button { width: 50px; height: 50px }
	.control-thietke button:hover svg { max-height: 35px }
	.blue-web-icon-video { text-align: center; padding-left: 0; margin: 1rem auto 2rem }
	.blue-title-video { text-align: center }
	.tabs-hosting .ul-tabs-hosting li { padding: 10px 1rem; font-size: 15px }
	.tabs-hosting .ul-tabs-hosting { margin-bottom: 1rem }
	.item_hosting_price { width: calc(100% - 20px) }
	.tabs-hosting { margin-bottom: 1rem }
	.blue-web-hosting { padding: 2rem 0 1rem }
	.title-desk3 h2, .title-desk3 h3, .title-desk3 h4 { font-size: 32px; line-height: 32px }
	.title-main h2, .title-main h3 { font-size: 32px; line-height: 32px }
	.title-main span { font-size: 55px }
	.namchay:nth-child(1), .namchay:nth-child(4) { width: 40% }
	.namchay:nth-child(2), .namchay:nth-child(3) { width: calc(60% - 1rem) }
	.domain-table { border: 5px solid #a1d5f0 }
	.domain-table tbody td:nth-child(1), .domain-table thead th:nth-child(1) { width: 30% }
	.title-main-detail h2 { font-size: 25px }
	.item_news { width: calc((100% - 1rem)/ 2) }
	.blue-web-news-detail-left { width: 100% }
	.blue-web-news-detail-right { width: 100%; display: none }
	.iLoiich-large { width: calc(60% - 1rem) }
	.iLoiich-small { width: 40% }
	.nameLi { font-size: 18px }
	.blue-web-loiich-hosting { padding: 2rem 0 1rem }
	.Box_loiich { padding-top: 1rem }
	.tieuchi-tk-left { width: 100%; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 2rem }
	.tieuchi-tk-right { width: 100% }
	.title-tk { width: 53% }
	.pic-tk { width: 45% }
	.title-tk h3 { font-size: 28px }
	.circle-one { width: 100px; height: 100px; }
	.circle-two { width: 80px; height: 80px; }
	.BoxHdsd { gap: 1rem; }
	.step-box { width: calc((100% - 2rem) / 3); }
}
@media (max-width:700px) {
	.blue-web-img-slide img { right: -10% }
	.ul-tabs-about li { text-align: center }
	.footer-news:nth-child(2), .footer-news:nth-child(3) { width: calc((100% - 1rem)/ 2) }
	.blue-web-footer-att { gap: 1rem }
	.footer-news:nth-child(4) { width: 100%; display: flex; justify-content: center; align-items: stretch; gap: 1rem; flex-wrap: wrap }
	.item_call_ft { width: calc((100% - 1rem)/ 2); margin: 0 }
	.social-footer { width: 100%; justify-content: center }
	.i-tinhnang { width: calc((100% - 1rem)/ 2) }
	.i-tinhnang:nth-child(3) { width: 100% }
	.step-box { width: calc((100% - 1rem) / 2); text-align: center; }
	.step-box:nth-child(3), .step-box:nth-child(6) { width: 100%; }
	.vip-popup { max-width: 420px; padding: 1rem; }
	.vip-popup h3 { font-size: 32px; margin-bottom: 1rem; }
}
@media (max-width:600px) {
	.blue-web-line-process { top: 3rem }
	.process-numb { font-size: 65px }
	.icon-process { width: 80px; height: 80px }
	.icon-process img { max-height: 45px }
	.info-process h5 { font-size: 18px; margin-bottom: 5px }
	.info_news { padding: 10px 10px }
	.desc_news { font-size: 14px }
	.result-top-domain p span { font-size: 25px }
	.title-dk-domain span { font-size: 30px; line-height: 35px }
	.must-try-ai-content { padding: 0 60px; }
	.must-try-ai-content a span { width: 40px; }
	.ar-left { left: -60px; }
	.ar-right { right: -60px; }
	.blue-web-chamngon { display: none; }
}
@media (max-width:575px) {
	.modal-dialog { width: 90% !important; max-width: 100% !important; margin: 0 !important; }
	.toast-cus { left: 5px; width: calc(100% - 10px) }
	.box-readmore { width: calc(100% - 5px) }
	.newshome-scroll { width: 100% }
	.newshome-intro { width: 100%; margin-bottom: 20px }
	.top-contact .form-contact .button-contact .file-contact span b { max-width: 105px }
	.cart-pro-detail { flex-wrap: wrap }
	.cart-pro-detail a { width: 100%; text-align: center; margin: 0 !important }
	.cart-pro-detail a:first-child { margin-bottom: 5px !important }
	.name-procart a { font-size: 13px }
	.procart-label { font-size: 13px }
	.blue-pic-video { min-height: 140px }
	.blue-web-footer-top .blue-content { padding: 2rem 1rem }
	#list-domain-result li { width: 100% }
	.container_tc { gap: 10px 10px }
	.itemThietke_detail { width: calc((100% - 1rem)/ 2) }
	.iNews_or { width: 100% }
	.title-orther-news { margin-bottom: 1rem; font-size: 28px }
	.BoxFormContact { padding: 1rem }
	.blue-web-img-slide img { right: 0 }
	.blue-web-name-sli { font-size: 37px; line-height: 35px }
	.blue-web-desc-sli { font-size: 15px }
	.blue-web-address-header { font-size: 14px }
	.blue-web-left { width: 100%; height: auto; }
	.pic_contact { width: 70%; height: 70%; margin: 2rem auto; }
	.pic_contact img { width: 100%; height: 100%; object-fit: cover; }
	.circles-box { top: 15%; left: 15%; width: 70%; height: 70%; }
	.circle-one { width: 70px; height: 70px; border: 9px solid var(--color-blue); right: 0%; top: 0; }
	.circle-two { width: 40px; height: 40px; }
	.an_tit { font-size: 60px; }

/*	.item_call_ft:nth-child(3) { width: 100%; max-width: 270px; }*/ }
@media (max-width:525px) {
	.item_hosting_price { max-width: 420px }
	.itemFeedback { padding: 1rem 6px 1rem }
	.Feedback-inner-box { padding: 1rem 1rem 1rem; box-shadow: 0 0 6px rgba(0, 0, 0, .15) }
	.quote-icon.flaticon-left-quote { font-size: 40px; top: -15px; left: 12px }
	.itemFeedback .circle-box:before { top: -90px; width: 90px; height: 155px }
	.itemFeedback .circle-box:after { width: 90px; height: 155px; bottom: -6.5rem }
	.so-cs b { font-size: 45px; margin-bottom: 5px }
	.so-cs span { font-size: 18px }
	.so-cs { padding: 1rem 10px }
	.domain-table thead { font-size: 13px }
	.domain-table tbody td { padding: 10px 10px; font-size: 14px }
	.blue-web-form-domain input#i-domain-check { width: calc(100% - 100px); font-size: 14px }
	.blue-web-form-domain button#i-domain-button { width: 100px; font-size: 15px }
	.admin_news { padding: 7px 10px 0 }
	.admin_news b, .admin_news span { font-size: 11px }
	.admin_news b i { font-size: 15px }
	.info_news { padding: 10px 10px }
	.name_news { font-size: 15px }
	.item_hosting_price_detail { width: 100%; max-width: 420px; margin: 0 auto }
	.iLoiich-large { width: calc(55% - 1rem) }
	.iLoiich-small { width: 45% }
	.iconLi { margin-bottom: 10px }
	.iconLi img { max-height: 45px }
	.nameLi { font-size: 16px }
	.iLoiich p { font-size: 14px }
	.iLoiich { padding: 10px }
	.title-tk { width: 100%; text-align: center }
	.pic-tk { width: 100%; text-align: center }
	.picFeedback { width: 88px; height: 88px; padding: 4px }
	.descFeedback { font-size: 14px; margin-bottom: 10px }
	.nameFeedback { font-size: 16px }
	.designation { font-size: 13px }
}
@media (max-width:475px) {
	.big-title { font-size: 50px }
	.blue-web-name-sli { font-size: 35px; line-height: 30px }
	.blue-web-name-sli:before { top: 1.5rem }
	.blue-web-desc-sli { font-size: 15px }
	.newsletter-input { width: 100% }
	.blue-web-footer-top .blue-content { padding: 2rem 1rem }
	.an_tit2 { font-size: 65px }
	.blue-web-footer-top .blue-content:after { width: 170px; height: 165px; background: url(../images/form-icon.png) no-repeat bottom right; background-size: contain }
	.blue-web-footer-top { padding: 1rem 0 4rem }
	.blue-web-footer-bottom { padding: 1rem 0 }
	.title-main h2, .title-main h3 { font-size: 28px; line-height: 28px }
	.admin_news { position: relative; padding: 5px 10px; justify-content: flex-start }
	.contact-input { width: 100% }
	.note-form, .note-form2 { font-size: 12px }
	.tabs-hosting .ul-tabs-hosting li { font-size: 14px; padding: 8px 5px; }
	.tabs-hosting .ul-tabs-hosting { gap: 6px; }
	.tabs-hosting .ul-tabs-hosting li:nth-child(3):before { width: 20px; height: 20px; top: -10px; right: -8px; }
	.item_call_ft a span { margin: 0 auto }
	.item_call_ft a p { width: 100% }
	.item_call_ft a { flex-wrap: wrap; text-align: center; gap: 5px }
	.vip-popup { width: calc(100% - 20px); }
}
@media (max-width:425px) {
	.slogan-blue { font-size: 15px }
	.txt-bg { padding: 10px 10px }
	.blue-web-line-process { opacity: 0 }
	.icon-process { border-radius: 50% }
	.icon-process img { max-height: 35px }
	.process-numb { font-size: 50px; left: -20px; top: 3px }
	.info-process { box-shadow: 0 0 5px #cce6f4; padding: 50px 10px 10px; margin-top: -40px; border-radius: 7px }
	.pic-process { margin: 0 }
	.icon-box img { max-height: 55px }
	.icon-box { height: 55px }
	.inner-box h5 { font-size: 20px; line-height: 22px; min-height: 44px }
	.ul-tabs-about li { padding: 7px 10px; font-size: 13px }
	.item_call_ft p b { font-size: 20px; }
	.footer-news:nth-child(2), .footer-news:nth-child(3) { width: 100%; text-align: center }
	.blue-qr { justify-content: center }
	.blue-web-news { padding: 1rem 0 1rem }
	.name_hosting_price { font-size: 24px }
	.content_hosting_price ul li { margin-top: 5px; padding-top: 5px }
	.info_hosting_price ul li { padding: 8px 10px }
}

/* recruitment */
:root { --primary-color: #2563eb; --secondary-color: #3b82f6; --success-color: #059669; --background-color: #f8fafc; --text-color: #1e293b; --border-radius: 16px; }
body { background: var(--background-color); color: var(--text-color); font-family: system-ui, -apple-system, sans-serif; }
.form-container { max-width: 800px; margin: 3rem auto; padding: 2.5rem; background: white; border-radius: var(--border-radius); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.form-header { text-align: center; margin-bottom: 2.5rem; }
.form-header { margin-bottom: 2rem; }
.form-step { display: none; animation: fadeIn 0.5s ease-in-out; }
.form-step.active { display: block; }
.progress { height: 6px; background-color: #e2e8f0; border-radius: 100px; margin-bottom: 3rem; overflow: hidden; }
.progress-bar { background-color: var(--primary-color); transition: width 0.4s ease-in-out; }
.step-indicator { display: flex; justify-content: space-between; margin-bottom: 3rem; position: relative; }
.step-circle { width: 40px; height: 40px; border-radius: 50%; background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; color: #64748b; position: relative; z-index: 1; transition: all 0.3s ease; }
.step-circle.active { background-color: var(--primary-color); color: white; transform: scale(1.1); }
.step-circle.completed { background-color: var(--success-color); color: white; }
.step-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background-color: #e2e8f0; transform: translateY(-50%); z-index: 0; }
.step-line.completed { background-color: var(--success-color); }
.form-label { font-weight: 500; color: #475569; margin-bottom: 0.5rem; }
.form-control { border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.75rem 1rem; transition: all 0.2s ease; }
.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1); }
.form-control.is-invalid { border-color: #ef4444; box-shadow: none; }
.btn { padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 600; transition: all 0.2s ease; }
.btn-primary { background-color: var(--primary-color); border: none; }
.btn-primary:hover { background-color: var(--secondary-color); transform: translateY(-1px); }
.btn-secondary { background-color: #e2e8f0; border: none; color: #475569; }
.btn-secondary:hover { background-color: #cbd5e1; color: #1e293b; }
.btn-success { background-color: var(--success-color); border: none; }
.btn-success:hover { background-color: #047857; transform: translateY(-1px); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.skill-tag { background-color: #e2e8f0; color: #475569; padding: 0.5rem 1rem; border-radius: 100px; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; }
.skill-tag.selected { background-color: var(--primary-color); color: white; }
.file-upload { border: 2px dashed #e2e8f0; border-radius: var(--border-radius); padding: 2rem; text-align: center; cursor: pointer; transition: all 0.2s ease; }
.file-upload:hover { border-color: var(--primary-color); background-color: rgb(37 99 235 / 0.05); }
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
#mobileMenu { transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out; transform: translateY(0); opacity: 1; will-change: transform, opacity;    /* Tối ưu GPU */ }

/* Khi ẩn menu */
#mobileMenu.hide { transform: translateY(-100%) !important; opacity: 0 !important; }
.time-option .box { display: block; padding: 15px; border: 2px solid #ddd; border-radius: 10px; text-align: center; cursor: pointer; font-weight: 500; background: #f8f9fa; transition: all 0.3s ease; }
.time-option input:checked + .box { border-color: #0d6efd; background: #0d6efd; color: white; box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3); }
label.time-option { width: calc(25% - 1rem); }
input[type="date"] { appearance: none !important; -webkit-appearance: none !important; padding-right: 35px !important; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer !important; opacity: 0.6 !important; transition: opacity 0.3s !important; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1 !important; }
.modal-desc { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: calc(.3rem - 1px); border-top-right-radius: calc(.3rem - 1px); color: #666666; }
#popup-booking { }
#popup-booking .modal-content { padding: 1.5rem 1rem 1rem; }
#popup-booking .modal-dialog.modal-md { margin: 0 auto; }
#popup-booking .modal-header { padding: 0; }
#popup-booking .modal-desc { padding: 0; text-align: center; margin-bottom: 1rem; border-bottom: none; }
#popup-booking .modal-body { padding: 0; }
#popup-booking .modal-title { text-transform: uppercase; text-align: center; color: var(--color-blue); font-size: 22px !important; line-height: 26px; font-weight: 700; margin-bottom: 10px; width: 100%; }
.plR5qb::before { content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; position: absolute; background: #ffffff14; border: 1px solid #fff; opacity: 0.4; transition: opacity 400ms linear, background-color 400ms linear; }
.plR5qb { align-self: center; background: inherit; border-radius: 100px; cursor: pointer; flex-shrink: 0; font-optical-sizing: none; font-size: 14px; font-weight: 500; line-height: 20px; padding: 2px; position: relative; height: 36px; display: flex; align-items: center; justify-content: center; background: #d0e1ff; }
.minidiv .plR5qb { height: 24px }
.plR5qb::before { content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; position: absolute; background: #ffffff14; border: 1px solid #fff; opacity: 0.4; transition: opacity 400ms linear, background-color 400ms linear }
.plR5qb::before { animation: ae-fb 2000ms linear infinite }
@keyframes ae-fb {
	0% { opacity: 0.4; }
	30% { opacity: 0 }
	50% { opacity: 0 }
	100% { opacity: 0.4; }
}
.plR5qb:hover::before { opacity: 0 }
.xL0qi, .mTurwe { overflow: hidden; border-radius: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none }
.xL0qi { opacity: 0.35; filter: blur(3px); }
.iydNQb { background: conic-gradient(#3186ff00 0deg, #34a853 43deg, #ffd314 65deg, #ff4641 105deg, #3186ff 144deg, #3186ff 180deg, #3186ff00 324deg, #3186ff00 360deg); height: 200%; top: -50%; right: 0; bottom: 0; left: 0; position: absolute; scale: 2 1; opacity: 0; transform: rotate(180deg); transition: opacity 400ms linear }
.plR5qb:hover .mTurwe .iydNQb { opacity: 1 }
.iydNQb { animation: ae-fg 2000ms linear infinite, ae-rg 2000ms cubic-bezier(0.20, 0.00, 0.00, 1.00) infinite }
@keyframes ae-fg {
	0% { opacity: 0 }
	30% { opacity: 1 }
	50% { opacity: 1 }
	100% { opacity: 0 }
}
@keyframes ae-rg {
	from { transform: rotate(0deg) }
	to { transform: rotate(180deg) }
}
.bvUkz { position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; border-radius: 100px; clip-path: inset(0 0 0 0 round 100px); background: inherit; transition: filter 1000ms cubic-bezier(0.00, 0.00, 0.00, 1.00); }
.plR5qb:hover .bvUkz { filter: blur(3px); }
.plR5qb .bvUkz::after { content: ''; top: -10px; right: -10px; bottom: -10px; left: -10px; border-radius: 100px; position: absolute; background: inherit; opacity: .5 }
.u4Uk3c { align-items: center; display: flex; justify-content: center; position: relative; z-index: 1 }
.PD3zdc { padding-right: 4px }
.MTa47b { display: block; position: absolute; top: 42px; left: -190px; overflow: visible }
.newsfeed { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--c1); text-align: right; font-size: 15px; font-style: normal; font-weight: 600; line-height: normal; background: #fff; z-index: 999; position: relative; width: 100%; padding: 7px; height: 100%; border-radius: 100px; }