:root { --theme-color: #2e3092; --theme-opc80-color: rgba(23, 70, 158, 0.8); --theme2-color: #fff101; --header-top-bg: #ffffff; --header-bg: #ffffff; --menu-bg: #2e3092; --valak-bg: #2e3092; --menu-link-hover-color: #fe0000; --menu-item-hover-bg: #885f1d; --footer-bg: #e8e8e8; --copyright-bg: #17469e; --title-font: "Roboto", sans-serif; --text-font: "Roboto", sans-serif; --menu-font: "Roboto", sans-serif; } /* ======================== FONTS ======================== */ /* roboto-300 - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 300; src: url("../fonts/Roboto-Regular.ttf"); } /* roboto-300italic - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: italic; font-weight: 300; src: url("../fonts/roboto-v20-latin_vietnamese-300italic.eot"); /* IE9 Compat Modes */ src: local("Roboto Light Italic"), local("Roboto-LightItalic"), url("../fonts/roboto-v20-latin_vietnamese-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-300italic.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-300italic.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-300italic.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-300italic.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-regular - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 400; src: url("../fonts/roboto-v20-latin_vietnamese-regular.eot"); /* IE9 Compat Modes */ src: local("Roboto"), local("Roboto-Regular"), url("../fonts/roboto-v20-latin_vietnamese-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-regular.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-regular.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-regular.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-regular.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-italic - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: italic; font-weight: 400; src: url("../fonts/roboto-v20-latin_vietnamese-italic.eot"); /* IE9 Compat Modes */ src: local("Roboto Italic"), local("Roboto-Italic"), url("../fonts/roboto-v20-latin_vietnamese-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-italic.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-italic.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-italic.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-italic.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-500 - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 500; src: url("../fonts/roboto-v20-latin_vietnamese-500.eot"); /* IE9 Compat Modes */ src: local("Roboto Medium"), local("Roboto-Medium"), url("../fonts/roboto-v20-latin_vietnamese-500.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-500.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-500.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-500.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-500.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-500italic - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: italic; font-weight: 500; src: url("../fonts/roboto-v20-latin_vietnamese-500italic.eot"); /* IE9 Compat Modes */ src: local("Roboto Medium Italic"), local("Roboto-MediumItalic"), url("../fonts/roboto-v20-latin_vietnamese-500italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-500italic.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-500italic.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-500italic.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-500italic.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-700 - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 700; src: url("../fonts/Roboto-Bold.ttf"); /* IE9 Compat Modes */ /* src: local("Roboto Bold"), local("Roboto-Bold"), url("../fonts/roboto-v20-latin_vietnamese-700.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-700.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-700.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-700.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-700.svg#Roboto") format("svg");*/ /* Legacy iOS */ } /* roboto-700italic - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: italic; font-weight: 700; src: url("../fonts/Roboto-BoldItalic.ttf"); /* IE9 Compat Modes */ /* src: local("Roboto Bold Italic"), local("Roboto-BoldItalic"), url("../fonts/roboto-v20-latin_vietnamese-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-700italic.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-700italic.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-700italic.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-700italic.svg#Roboto") format("svg");*/ /* Legacy iOS */ } /* roboto-900 - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 900; src: url("../fonts/roboto-v20-latin_vietnamese-900.eot"); /* IE9 Compat Modes */ src: local("Roboto Black"), local("Roboto-Black"), url("../fonts/roboto-v20-latin_vietnamese-900.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-900.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-900.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-900.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-900.svg#Roboto") format("svg"); /* Legacy iOS */ } /* roboto-900italic - latin_vietnamese */ @font-face { font-family: 'Roboto'; font-display: swap; font-style: italic; font-weight: 900; src: url("../fonts/roboto-v20-latin_vietnamese-900italic.eot"); /* IE9 Compat Modes */ src: local("Roboto Black Italic"), local("Roboto-BlackItalic"), url("../fonts/roboto-v20-latin_vietnamese-900italic.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto-v20-latin_vietnamese-900italic.woff2") format("woff2"), url("../fonts/roboto-v20-latin_vietnamese-900italic.woff") format("woff"), url("../fonts/roboto-v20-latin_vietnamese-900italic.ttf") format("truetype"), url("../fonts/roboto-v20-latin_vietnamese-900italic.svg#Roboto") format("svg"); /* Legacy iOS */ } /* ==================== BORDER RADIUS ==================== */ /* Ref: http://www.w3schools.com/css/css3_borders.asp http://border-radius.com/ border-radius: tl tr br bl: */ /* ==================== BOX SHADOW ==================== */ /* Ref: http://www.cssmatic.com/box-shadow */ /* ==================== Set Font ==================== */ /* ==================== HOVER A ==================== */ /* Ref: */ /* @include transition(all .3s ease); @mixin transition($args...) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args; } */ /* @include background-opacity(#000, $opacity: 0.3); */ @keyframes marquee { 0% { right: 0; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 100% { right: 0; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes spin1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin1 { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin2 { 0% { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); } } @-moz-keyframes spin2 { 0% { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); } } @-ms-keyframes spin2 { 0% { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); } } @-o-keyframes spin2 { 0% { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); } } @keyframes spin2 { 0% { -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } 100% { -webkit-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); } } @-webkit-keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } } @-moz-keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } } @-ms-keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } } @-o-keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } } @keyframes spin3 { 0% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } 100% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } } @-webkit-keyframes spin4 { 0% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } } @-moz-keyframes spin4 { 0% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } } @-ms-keyframes spin4 { 0% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } } @-o-keyframes spin4 { 0% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } } @keyframes spin4 { 0% { -webkit-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } 100% { -webkit-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); } } @-webkit-keyframes hvr-bob { 0% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } 50% { -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-moz-keyframes hvr-bob { 0% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } 50% { -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-ms-keyframes hvr-bob { 0% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } 50% { -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-o-keyframes hvr-bob { 0% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } 50% { -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @keyframes hvr-bob { 0% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } 50% { -webkit-transform: translate(0, -4px); -ms-transform: translate(0, -4px); -o-transform: translate(0, -4px); transform: translate(0, -4px); } 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-webkit-keyframes hvr-bob-float { 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-moz-keyframes hvr-bob-float { 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-ms-keyframes hvr-bob-float { 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-o-keyframes hvr-bob-float { 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @keyframes hvr-bob-float { 100% { -webkit-transform: translate(0, -8px); -ms-transform: translate(0, -8px); -o-transform: translate(0, -8px); transform: translate(0, -8px); } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-ms-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-o-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } .banner img, .menu-slider .slideshow-verticle__img, .slideshow .owl-item a img, .quangcao__img, .videohome__img, .pro-detail-tieuchi__img, .product__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: fill; } .pdlisthome__img, .tieuchi__img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down; object-position: center center; z-index: 2; } .hover_sang1:before, .hover_sang3:before, .hover_sang3:after, .fixed-shadow:after, .dmspbox .dmspbox-wrap ul li a:before, .menu-left-subitem__link:before, .menu-left-item__link:before, .thongke li + li:before, .footer__baiviet ul li a:before, .footer__baiviet ul li span:before, .header-right__col .user-header a + a:before, .main-title__line:before, .btn-more2:before, .btn-more2:after, .videohome__image:after, .video__image:before { content: ''; position: absolute; } .reset-list, .menu--left, .menu .submenu, .menu .submenu li ul, .dmspbox .dmspbox-wrap ul, .menu-left-list, .menu-left-sublist, .thongke, .footer__baiviet ul { list-style-type: none; margin-bottom: 0; padding-left: 0; } [class^="hvr-"] { margin: .4em; padding: 1em; cursor: pointer; background: #e1e1e1; text-decoration: none; color: #666; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hvr-bob { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); } .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { -webkit-animation-name: hvr-bob-float,hvr-bob; animation-name: hvr-bob-float,hvr-bob; -webkit-animation-duration: .3s,1.5s; animation-duration: .3s,1.5s; -webkit-animation-delay: 0s,.3s; animation-delay: 0s,.3s; -webkit-animation-timing-function: ease-out,ease-in-out; animation-timing-function: ease-out,ease-in-out; -webkit-animation-iteration-count: 1,infinite; animation-iteration-count: 1,infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-direction: normal,alternate; animation-direction: normal,alternate; } .blink_me { -webkit-animation: blinker 1s linear infinite; -moz-animation: blinker 1s linear infinite; -ms-animation: blinker 1s linear infinite; -o-animation: blinker 1s linear infinite; animation: blinker 1s linear infinite; } .hover_sang1 { z-index: 40; position: absolute; top: 0px; left: 0px; -webkit-transition: transform 0.6s; -moz-transition: transform 0.6s; -ms-transition: transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -moz-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); -ms-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); overflow: hidden; border: 1px solid #e8e4e4; box-shadow: 4px 6px 0 0 #f5f5f5; background: rgba(255, 255, 255, 0.5); } @media screen and (prefers-reduced-motion: reduce) { .hover_sang1 { transition: none; } } .hover_sang1:before { width: 100%; height: 100%; } .hover_sang1:hover::before { -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); -moz-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); -ms-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); } .hover_sang3 { overflow: hidden; position: relative; } .hover_sang3:hover::before { right: 50%; left: 50%; width: 0; background: rgba(255, 255, 255, 0.5); } .hover_sang3:hover::after { height: 0; top: 50%; bottom: 50%; background: rgba(255, 255, 255, 0.5); } .hover_sang3:before { width: 100%; height: 100%; z-index: 40; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media screen and (prefers-reduced-motion: reduce) { .hover_sang3:before { transition: none; } } .hover_sang3:after { width: 100%; height: 100%; z-index: 40; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } @media screen and (prefers-reduced-motion: reduce) { .hover_sang3:after { transition: none; } } .xoay_hinh {overflow: hidden; } .xoay_hinh:hover img {transform: rotate(360deg); } .xoay_hinh img {transition: all 1s ease 0s; } .marquee { -webkit-animation: marquee 10s linear infinite; -moz-animation: marquee 10s linear infinite; -ms-animation: marquee 10s linear infinite; -o-animation: marquee 10s linear infinite; animation: marquee 10s linear infinite; } .text-theme { color: var(--theme-color) !important; } .overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; background-color: rgba(0, 0, 0, 0.3); } @media screen and (prefers-reduced-motion: reduce) { .overlay { transition: none; } } .overlay__box { position: absolute; top: 20px; left: 30px; width: calc(100% - 60px); height: calc(100% - 40px); border: 3px solid #fff; } .fixed { -webkit-animation: slideInDown 0.8s ease; -moz-animation: slideInDown 0.8s ease; -ms-animation: slideInDown 0.8s ease; -o-animation: slideInDown 0.8s ease; animation: slideInDown 0.8s ease; } .fixed-shadow:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -ms-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; z-index: -1; box-shadow: 0 0.0625em 0.5em rgba(0, 0, 0, 0.3); opacity: 0; } @media screen and (prefers-reduced-motion: reduce) { .fixed-shadow:after { transition: none; } } .fixed-shadow.fixed::after { opacity: 1; } .scrollstyle-4::-webkit-scrollbar { width: 2px; height: 2px; } .scrollstyle-4::-webkit-scrollbar-thumb { background: #17469e; } .scrollstyle-4::-webkit-scrollbar-track { background: #8ba3cf; } .scrollstyle-4 { scrollbar-face-color: #17469e; scrollbar-track-color: #8ba3cf; } body { font-size: 16px; font-size: 1rem; font-family: var(--text-font); } .section, .footer-box { padding: 20px 0; } .container { max-width: 1230px; position: relative; } .wrap-main { z-index: 40; position: relative; padding: 30px 0; } .wrap-main.wrap-home { padding: 0; } .wrap-main-container:after { content: ""; display: table; clear: both; } a:hover { text-decoration: none; } .slick-slider .slick-prev, .slick-slider .slick-next { width: 26px; height: 40px; border-radius: 3px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; background-color: #eee; padding-top: 4px; } @media screen and (prefers-reduced-motion: reduce) { .slick-slider .slick-prev, .slick-slider .slick-next { transition: none; } } .slick-slider .slick-prev:hover, .slick-slider .slick-next:hover { background-color: #17469e; } .slick-slider .slick-prev::before, .slick-slider .slick-next::before { font-size: 24px; color: #333; } .slick-slider .slick-prev:hover::before, .slick-slider .slick-next:hover::before { color: #fff; } .slick-slider .slick-prev { left: 20px; } .slick-slider .slick-next { right: 20px; } .btn-frame i { background: var(--theme-color); } .btn-frame .kenit-alo-circle { border: 2px solid var(--theme-opc80-color); background: var(--theme-color); } .js-facebook-messenger-box { background: var(--theme-color); } .js-facebook-messenger-top-heade { background: var(--theme-color); } /*banner head top*/ .banner-head{ background-color: var(--menu-bg); color: #ffffff; font-size: 14px; } .menubar { z-index: 89; position: relative; top: 0px; left: 0px; background-color: var(--menu-bg); } .menubar-container { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .menu { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .menu__item { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; box-sizing: border-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; } @media screen and (prefers-reduced-motion: reduce) { .menu__item { transition: none; } } .menu__item:hover .menu__link { color: var(--menu-link-hover-color); } .menu__item:hover .submenu { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); visibility: visible; opacity: 1; } .menu__item > .submenu { top: calc(100% + 10px); } .menu__link { font-size: 14px; color: #fff; font-weight: 700; font-family: var(--menu-font); box-sizing: border-box; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; min-height: 50px; text-transform: uppercase; padding: 0; position: relative; width: 100%; text-align: center; } .menu__link i { margin-right: 10px; font-size: 20px; } .menu__link.active { color: var(--menu-link-hover-color); } .menu__line { width: 9px; height: 9px; background-image: url("../images/line.png"); background-repeat: repeat-y; background-position: 0 0; } .menu--left { z-index: 50; box-sizing: border-box; display: flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; } .menu .submenu { -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); position: absolute; top: 100%; left: 0; visibility: hidden; opacity: 0; min-width: 200px; } @media screen and (prefers-reduced-motion: reduce) { .menu .submenu { transition: none; } } .menu .submenu li { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; background-color: #17469e; } @media screen and (prefers-reduced-motion: reduce) { .menu .submenu li { transition: none; } } .menu .submenu li:hover { background-color: #1d5acb; } .menu .submenu li:hover > a { color: var(--menu-link-hover-color); } .menu .submenu li:hover > ul { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); visibility: visible; opacity: 1; } .menu .submenu li + li { border-top: 1px solid rgba(255, 255, 255, 0.4); } .menu .submenu li a { font-size: 14px; color: #fff; font-weight: 400; font-family: "Arial"; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: block; padding: 6px 10px; } @media screen and (prefers-reduced-motion: reduce) { .menu .submenu li a { transition: none; } } .menu .submenu li ul { -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); position: absolute; top: 0; left: 100%; visibility: hidden; opacity: 0; min-width: 200px; } @media screen and (prefers-reduced-motion: reduce) { .menu .submenu li ul { transition: none; } } .menu_mobi, .menu_mobi_add { display: none; } .menu-res { z-index: 100; } .dmspbox { width: 22.5%; position: relative; margin-right: 40px; } .dmspbox:hover .dmspbox-wrap { transform: scaleY(1); visibility: visible; opacity: 1; } .dmspbox__title { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; top: 0px; left: 0px; background-color: #d21b1b; cursor: pointer; } .dmspbox__title-icon { width: 50px; height: 50px; box-sizing: border-box; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .dmspbox__title-icon i { font-size: 18px; color: #fff; } .dmspbox__title-text { font-size: 18px; color: #fff; font-weight: 700; font-family: "Roboto", sans-serif; line-height: 1; text-transform: uppercase; } .dmspbox .dmspbox-wrap { transform: scaleY(0); visibility: hidden; opacity: 0; position: relative; top: 0px; } .dmspbox .dmspbox-wrap ul { -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); position: absolute; visibility: hidden; opacity: 0; min-width: 230px; background-color: #fff; min-width: 100%; } @media screen and (prefers-reduced-motion: reduce) { .dmspbox .dmspbox-wrap ul { transition: none; } } .dmspbox .dmspbox-wrap ul li { position: relative; } .dmspbox .dmspbox-wrap ul li a { font-size: 14px; color: #333; box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-transition: padding-left 0.2s linear; -moz-transition: padding-left 0.2s linear; -ms-transition: padding-left 0.2s linear; -o-transition: padding-left 0.2s linear; transition: padding-left 0.2s linear; text-decoration: none; padding: 3px 3px 3px 30px; white-space: nowrap; } @media screen and (prefers-reduced-motion: reduce) { .dmspbox .dmspbox-wrap ul li a { transition: none; } } .dmspbox .dmspbox-wrap ul li a:hover, .dmspbox .dmspbox-wrap ul li a:active, .dmspbox .dmspbox-wrap ul li a:focus { padding-left: 35px; color: var(--theme-color); } .dmspbox .dmspbox-wrap ul li a:before { font-size: 7px; color: inherit; font-weight: 700; font-family: "Font Awesome 5 Free"; position: absolute; left: 15px; content: "\f009"; } .dmspbox .dmspbox-wrap ul li ul { left: 100%; top: 0; } .dmspbox .dmspbox-wrap ul li:hover > ul { transform: scaleY(1); visibility: visible; opacity: 1; } .dmspbox .dmspbox-wrap ul li + li { border-top: 1px dashed #bebebe; } .dmspbox .dmspbox-wrap > ul { transform: scaleY(1); visibility: visible; opacity: 1; } .p-index .dmspbox .dmspbox-wrap > ul { display: none; } .fixed .dmspbox .dmspbox-wrap > ul { height: 300px; overflow-y: auto; display: block; } .menu-left { z-index: 41; float: left; display: inline; position: relative; width: 22.5%; } .menu-left-list { max-height: 462px; min-height: 462px; overflow-y: auto; background-color: #f2f2f2; } .menu-left-sublist { -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2); -webkit-transform-origin: 0 0 0; -moz-transform-origin: 0 0 0; -ms-transform-origin: 0 0 0; transform-origin: 0 0 0; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; -webkit-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); position: absolute; visibility: hidden; opacity: 0; min-width: 230px; background-color: #f2f2f2; left: 100%; top: 0; } @media screen and (prefers-reduced-motion: reduce) { .menu-left-sublist { transition: none; } } .menu-left-subitem__link { font-size: 14px; color: #636363; line-height: 1; text-transform: uppercase; display: block; padding: 13px 1em 13px 2em; position: relative; } .menu-left-subitem__link:before { width: 5px; height: 5px; position: absolute; top: 17px; left: 10px; border-radius: 100%; background-color: #17469e; } .menu-left-subitem + .menu-left-subitem { border-top: 1px dotted #c2c2c2; } @media (max-width: 992px) { .menu-left { display: none; } } .menu-left-item__link { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; position: relative; padding: 13px 1em 13px 2em; } .menu-left-item__link:before { width: 5px; height: 5px; position: absolute; top: 17px; left: 1em; background-color: #636363; border-radius: 100%; } .menu-left-item__left { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .menu-left-item__name { font-size: 14px; color: #636363; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: block; line-height: 1; } @media screen and (prefers-reduced-motion: reduce) { .menu-left-item__name { transition: none; } } .menu-left-item + .menu-left-item .menu-left-item__link::after { width: calc(100% - 2em); height: 1px; position: absolute; top: 0px; left: 0px; content: ""; left: 1em; border-top: 1px dotted #c2c2c2; } .menu-left-item:hover > ul { -webkit-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); visibility: visible; opacity: 1; } .menu-left-item:hover .menu-left-item__name { color: #f00; } .copyright { z-index: 41; background-color: var(--copyright-bg); } .copyright-wrap { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; min-height: 50px; width: 100%; position: relative; } .copyright__text { font-size: 13px; color: #fff; font-weight: 500; } .copyright__text span { display: inline-block; color: #ff0; } .thongke { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; position: relative; } .thongke li { font-size: 13px; color: #fff; font-weight: 500; box-sizing: border-box; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; } .thongke li + li { margin-left: 20px; } .thongke li + li:before { width: 1px; height: 10px; background-color: #fff; left: -10px; } .footer__baiviet { width: 23.3333333333%; } .footer__baiviet ul li + li { margin-top: 10px; } .footer__baiviet ul li a, .footer__baiviet ul li span { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; font-size: 14px; color: #4c4c4c; font-weight: 400; position: relative; display: block; } @media screen and (prefers-reduced-motion: reduce) { .footer__baiviet ul li a, .footer__baiviet ul li span { transition: none; } } .footer__baiviet ul li a[href]:hover, .footer__baiviet ul li span[href]:hover { color: #f00; } .footer__baiviet ul li a:before, .footer__baiviet ul li span:before { content: "- "; position: relative; } .header { position: relative; top: 0px; left: 0px; z-index: 90; background-color: var(--header-bg); } .header-wrap { padding: 10px 0px; box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .header-right { box-sizing: border-box; display: flex; justify-content: space-between; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: center; -moz-align-items: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .header-right__col { position: relative; } .header-right__col img {} .header-right__col .right__col-img { position:relative; } .header-right__col .right__col-img { position:relative; } .header-right__col .right__col-img a span.user-header{ position:absolute; left: 7px; color:#fff; } .header-right__col .user-header a { font-size: 14px; color: var(--theme-color); font-weight: 500; box-sizing: border-box; display: inline-flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; text-transform: capitalize; } .header-right__col .user-header a:hover { color: #fe0000; } .header-right__col .user-header a + a { margin-left: 1em; } .header-right__col .user-header a + a:before { left: -1em; content: "/"; } .header-right__col .user-header span { font-size: 14px; color: #fff; font-weight: 400; } .fixed .hotline { margin-bottom: 2px; } .hotline { font-size: 16px; color: #fff; font-weight: 700; box-sizing: border-box; display: flex; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; position: relative; padding-left: 60px; margin-left: 40px; margin-bottom: 4px; } .hotline p { position: absolute; top: 2px; left: 0px; line-height: 1; margin-bottom: 0; } .hotline span { display: block; line-height: 1; font-size: 18px; } .logo-footer { margin-bottom: 1em; } .logo { width: 24.1666666667%; margin-right: 20px; } .banner { position: relative; display: none !important; } .banner:before { display: block; content: ""; width: 100%; padding-top: 5.1244509517%; } .footer { z-index: 1; position: relative; } .footer-top { background-color: #f2f2f2; padding: 30px 0; } .footer-top-wrap { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .footer-top__chinhanh { width: 25%; } .footer-top__baiviet { width: 21.6666666667%; } .footer-top__menu { width: 13.3333333333%; } .footer-top__social { width: 13.3333333333%; } .footer-top__newsletter { width: 20%; } .footer .chinhanhs .chinhanh { margin-bottom: 10px; } .footer .chinhanhs .chinhanh p { font-size: 14px; color: #000; font-weight: 400; margin-bottom: 5px; } .footer-wrap { background-color: var(--footer-bg); position: relative; } .footer-box { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .footer__title { font-size: 16px; color: #1a1a1a; font-weight: 700; font-family: "Tahoma"; position: relative; text-transform: uppercase; margin-bottom: 1em; } .footer__payment { width: 33.3333333333%; } .footer__info { width: 50%; } .footer__info-body { font-size: 14px; color: #4d4d4d; font-weight: 400; } .footer__info-body p { margin-bottom: 10px; } #footer-map, #footer-map iframe { overflow: hidden; width: 100%; height: 400px; } .codebando, .codebando iframe { overflow: hidden; width: 100%; height: 400px; } .main-title { position: relative; margin-bottom: 20px; overflow: hidden; } .main-title__name { font-size: 30px; color: var(--theme-color); font-weight: 700; font-family: var(--title-font); box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; text-transform: uppercase; margin-bottom: 10px; } .main-title__more { font-size: 14px; color: #f00; font-weight: 700; text-transform: uppercase; } .main-title__link { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: inline-block; position: relative; color: inherit; } @media screen and (prefers-reduced-motion: reduce) { .main-title__link { transition: none; } } .main-title__link[href] { cursor: pointer; } .main-title__link[href]:hover { color: var(--theme-color); } .main-title__line { width: 100%; height: 2px; background-image: url("../images/idx-tit.png"); background-repeat: repeat-x; background-position: 0 0; border: 0; margin: 0; position: relative; } .main-title__line:before { width: 60px; height: 2px; background-color: #111; } .main-title--white .main-title__name { color: #fff; } .main-title--white .main-title__desc { color: #fff; } .title-main span { font-size: 1.5em; color: var(--color-title-main); font-weight: 400; } .text-main img { max-width: 100% !important; height: auto !important; } .menu-slider .slideshow-box { float: right; display: inline; width: 76.6666666667%; margin-top: 10px; } .menu-slider .slideshow-verticle-slick { float: right; display: inline; width: 29.347826087%; } .menu-slider .slideshow-verticle__item { margin-bottom: 10px; } .menu-slider .slideshow-verticle__link { position: relative; display: block; } .menu-slider .slideshow-verticle__link:before { display: block; content: ""; width: 100%; padding-top: 66.6666666667%; } .slideshow { z-index: 1; display: inline; position: relative; } .slideshow .owl-item a { position: relative; } .slideshow .owl-item a::before { display: block; content: ""; width: 100%; padding-top: 57.8125%; } .slideshow .owl-item a img { background-color: #fff; } @-webkit-keyframes fadeInUpSD { 0% { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); opacity: 0; } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; transform: none; opacity: 1; } } .ndbox { background: #fff; padding: 10px; border-radius: 6px; border: 1px solid #ccc; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); } .action_tab { position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; margin: 5px; } .action_tab a { background: #80cc28; color: #fff; font-weight: bold; padding: 10px; display: flex; justify-content: center; align-items: center; border-radius: 6px; transition: 0.5s; } .action_tab a + a { margin-left: 5px; } .action_tab a:hover { background: #f44814; } .flex_product { display: flex; flex-wrap: wrap; margin-right: -27px; } .flex_product .item_spnb { width: 25%; } .app_order-food { display: flex; align-items: center; margin: 20px 0 0; } .app_order-food a { display: flex; align-items: center; } .app_order-food a + a { margin-left: 13px; } .app_order-food a img { height: 40px; overflow: hidden; transition: 0.5s; } .app_order-food a:hover img { border-radius: 0; } div#tabs3, div#tabs2, div#tabs { margin: 0; background: #fff; } div.content_tabs { border-top: none; padding: 0; } .fs-dtrtcmti21 { font-size: 20px; border-bottom: 1px solid #ddd; padding-bottom: 5px; margin-bottom: 10px; } .box_content_rates { border: none; } .box_content_rates { display: table; width: 100%; } .item_rates { display: table-cell; vertical-align: middle; padding: 15px; text-align: center; } .item_rates:nth-child(1) { width: 30%; } .item_rates:nth-child(2) { width: 40%; border-left: 1px solid #eee; border-right: 1px solid #eee; } .item_rates:nth-child(3) { width: 30%; } .pointer_rates { font-size: 25px; color: #3d3d3d; margin-bottom: 8px; font-weight: bold; } .star_rates { margin-bottom: 5px; } .count_rates { font-size: 14px; } .num_of_rate { font-size: 12px; margin-bottom: 10px; } .num_of_rate span { float: left; text-align: left; } .num_of_rate span:nth-child(1) { width: 45px; } .num_of_rate span:nth-child(2) { width: calc(100% - 80px); height: 5px; background: #e4e4e4; margin-top: 7px; } .num_of_rate span:nth-child(3) { width: 35px; padding-left: 4px; color: #9a9a9a; } .dadungsp { font-size: 14px; text-align: center; margin-bottom: 15px; font-style: italic; } .guidanhgia { border: none; cursor: pointer; font-size: 14px; height: 34px; padding: 9px 35px; color: #fff; background: var(--theme-color); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; outline: none !important; } div.comment { border: 0; margin: 0; padding: 0; background: #fff; } div.item_comment { margin-bottom: 18px; } .fs-dtrtcmti2 { font-weight: bold; font-size: 15px; color: #333; margin-bottom: 5px; } .detail { padding-bottom: 0; } #rate { width: auto !important; float: left; margin-right: 10px; } .score img { width: 20px; } .small { display: inline-block; color: #f44814; font-size: 14px !important; margin-bottom: 0; font-weight: bold; } .frm_nhanxet { display: flex; flex-wrap: wrap; justify-content: space-between; } div.comment #ten_commnet, div.comment #dienthoai_commnet, div.comment #email_commnet { padding: 9px; width: calc(33.33% - 8px); height: 40px; overflow: auto; line-height: 1.57; border: solid 1px #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff; display: block; margin-bottom: 14px; font-size: 14px; float: left; } div.comment #noidung_comment { padding: 9px; width: 100%; height: 122px; overflow: auto; line-height: 1.57; border: solid 1px #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fff; display: block; margin-bottom: 14px; font-size: 14px; } div.comment .line_comment { text-align: right; width: 100%; } div.comment .line_comment p { float: left; font-size: 13px; color: #f44814; font-style: italic; margin: 0; } div.comment .line_comment p:before { content: '* '; } div.comment .line_comment ul { float: right; list-style: none; margin: 0; } div.comment input[type='button'], div.comment input[type='submit'] { display: inline-block; height: 34px; line-height: 34px; padding: 0 35px; border: none; color: #fff; background: #fd6e1d; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd6e1d), to(#f59000)); background: -webkit-linear-gradient(top, #f59000, #fd6e1d); background: -moz-linear-gradient(top, #f59000, #fd6e1d); background: -ms-linear-gradient(top, #f59000, #fd6e1d); background: -o-linear-gradient(top, #f59000, #fd6e1d); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-width: 184px; } .title_comment_cap { font-size: 18px; border-bottom: 1px solid #ddd; padding-top: 5px; margin-bottom: 0px; } .right_title_comment_cap { float: right; } .sort_cm { display: block; color: #4a4a4a; padding: 5px 9px; border-bottom: 3px solid transparent; float: left; cursor: pointer; font-size: 14px; } .sort_active { color: #f44814; border-bottom: 3px solid #f44814; } div.comment_old { color: #6d6d6d; overflow-x: hidden; } div.box_commnet { margin-bottom: 0; } .box_commnet:last-child { margin-bottom: 0px !important; } div.item_comment { margin-bottom: 0; } .box_commnet div.item_comment { border: 0; margin-bottom: 0; margin: 0; padding: 0; } .box_commnet div.item_comment .alert.alert-light { margin: 0; margin-top: 10px; border-color: #ddd; color: #333; font-size: 13px; } .box_commnet div.item_comment:first-child { display: block; } .star_cm { display: inline-block; } .star_cm img { height: 15px !important; margin-right: 3px; vertical-align: middle; } .td_comment { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; line-height: 25px; font-size: 13px; margin-bottom: 0; } .td_comment b { font-weight: bold; font-size: 14px; color: #333; margin-right: 10px; } div.ngaytao_comment { display: inline-block; vertical-align: top; font-size: 12px; } div.ngaytao_comment span { color: #858383; } div.tl_comment { margin-left: 0px; font-size: 14px; margin-top: 3px; line-height: 1.43; color: #2d2d2d; } .fs-dttrlike { width: auto; margin-top: 5px; margin-bottom: 0; display: inline-block; vertical-align: top; } .fs-dttrlike span { cursor: pointer; display: inline-block; padding: 3px 10px; background-color: #fff; border: solid 1px #bfbfbf; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; text-align: center; } .irtlike { display: inline-block; vertical-align: middle; margin-right: 5px; width: 16px; height: 16px; background: url("../images/like.png") no-repeat center; } .like_tmp { font-weight: normal; } .show_nhanxet::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; } .show_nhanxet::-webkit-scrollbar { width: 6px; background-color: #F5F5F5; } .show_nhanxet::-webkit-scrollbar-thumb { background-color: #f9810e; } .fs-dttrlike:hover span { background: #f1f1f1; } /*.snowflake { color: #fff; font-size: 1em; text-shadow: 0 0 1px #000; } @-webkit-keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } } @-webkit-keyframes snowflakes-shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(80px); transform: translateX(80px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } } @keyframes snowflakes-shake { 0% { transform: translateX(0px); } 50% { transform: translateX(80px); } 100% { transform: translateX(0px); } } .snowflake { position: fixed; top: -10%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-animation-name: snowflakes-fall,snowflakes-shake; -webkit-animation-duration: 10s,3s; -webkit-animation-timing-function: linear,ease-in-out; -webkit-animation-iteration-count: infinite,infinite; -webkit-animation-play-state: running,running; animation-name: snowflakes-fall,snowflakes-shake; animation-duration: 10s,3s; animation-timing-function: linear,ease-in-out; animation-iteration-count: infinite,infinite; animation-play-state: running,running; } .snowflake:nth-of-type(0) { left: 1%; -webkit-animation-delay: 0s,0s; animation-delay: 0s,0s; } .snowflake:nth-of-type(1) { left: 10%; -webkit-animation-delay: 1s,1s; animation-delay: 1s,1s; } .snowflake:nth-of-type(2) { left: 20%; -webkit-animation-delay: 6s,.5s; animation-delay: 6s,.5s; } .snowflake:nth-of-type(3) { left: 30%; -webkit-animation-delay: 4s,2s; animation-delay: 4s,2s; } .snowflake:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s,2s; animation-delay: 2s,2s; } .snowflake:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s,3s; animation-delay: 8s,3s; } .snowflake:nth-of-type(6) { left: 60%; -webkit-animation-delay: 6s,2s; animation-delay: 6s,2s; } .snowflake:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s,1s; animation-delay: 2.5s,1s; } .snowflake:nth-of-type(8) { left: 80%; -webkit-animation-delay: 1s,0s; animation-delay: 1s,0s; } .snowflake:nth-of-type(9) { left: 90%; -webkit-animation-delay: 3s,1.5s; animation-delay: 3s,1.5s; }*/ .product__box .label-promos { display: flex; align-items: center; justify-content: flex-start;padding:0 10px; gap: 4px; } .product__info{ padding:5px 10px; } .product__box .label-promo { display: inline-block; border-radius: 15px; font-size: 10px; color: #fff; margin-right: 5px; position: relative; } .product__box .label-promo:before { position: absolute; left: 6px; top: 48%; transform: translateY(-50%); content: ''; width: 12px; height: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; } .product__box .label-promo.tl { color: #2659f3; background: #e0ebff; font-weight: bold; padding: 5px 8px; padding-left: 22px; } .product__box .label-promo.tl:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cg data-name='Layer 2'%3E%3Ccircle cx='256' cy='256' r='256' fill='%232659f3' opacity='1' data-original='%23ff2147' class=''%3E%3C/circle%3E%3Cpath fill='%23ffffff' d='M384.9 159.33a37.9 37.9 0 0 0-53.61 0L218.35 272.26l-37.64-37.64a37.9 37.9 0 0 0-53.61 0 37.9 37.9 0 0 0 0 53.6l64.45 64.45a37.9 37.9 0 0 0 53.61 0L384.9 212.93a37.9 37.9 0 0 0 0-53.6z' opacity='1' data-original='%23ffffff' class=''%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .product__box .label-promo.new { color: #ed1c24; font-weight: bold; padding: 5px 8px; padding-left: 20px; background: #ffe0e2; } .product__box .label-promo.new:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 32 32' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath d='M2.332 13.299h5.65V30h-5.65zM20.233 8.109h.02c.009-.582.016-1.414-.12-1.97h-.01c-.35-1.34-1.35-2.51-2.24-3.42-.88-.89-2.2-.96-3.15-.17-.9.75-.9 1.81-.9 2.65 0 .23 0 .46-.02.7l-.07 1.02c-.76 1.73-1.64 2.59-2.75 3.67-.31.31-.65.64-1.01 1.01V30h14.18l5.31-11.82c.38-1.13.2-2.38-.5-3.351a3.614 3.614 0 0 0-2.97-1.53h-7.14l.04-.1c.75-1.76 1.22-2.91 1.33-5.09z' fill='%23ed1c24' opacity='1' data-original='%23000000' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .product__box .label-promo.mottangmot { margin-left: 15px; color: #06b50b; background: #e5ffe0; font-weight: bold; padding: 5px 8px; padding-left: 24px; } .product__box .label-promo.mottangmot:before { width: 36px; height: 36px; left: -15px; background-color: #fff; border: 2px solid; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 64 64' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath fill='%2306b50b' d='M32 3C16.01 3 3 16.01 3 32s13.01 29 29 29 29-13.01 29-29S47.99 3 32 3zm3 31h-6v6h-4v-6h-6v-4h6v-6h4v6h6zm10 7h-4V24.236l-5.105 2.553-1.79-3.578 8-4A1.999 1.999 0 0 1 45 21z' opacity='1' data-original='%23ffb24d' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .product__box .label-promo.preorder { margin-left: 15px; color: #06b50b; background: #e5ffe0; font-weight: bold; padding: 5px 8px; padding-left: 24px; } .product__box .label-promo.preorder:before { width: 36px; height: 36px; left: -15px; background-color: #c4ffb8; border-radius: 50%; background-size: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cpath fill='%2306b50b' d='M383.2 293.37c-4.44 0-8.03 3.59-8.03 8.03v73.83H331.2c-4.44 0-8.03 3.59-8.03 8.029 0 4.44 3.59 8.03 8.03 8.03h52c4.439 0 8.03-3.59 8.03-8.03V301.4c0-4.44-3.59-8.03-8.03-8.03zm0 0c-4.44 0-8.03 3.59-8.03 8.03v73.83H331.2c-4.44 0-8.03 3.59-8.03 8.029 0 4.44 3.59 8.03 8.03 8.03h52c4.439 0 8.03-3.59 8.03-8.03V301.4c0-4.44-3.59-8.03-8.03-8.03zm58.12-18.05V135.05a8.03 8.03 0 0 0-4.011-6.96L227.77 7.08a8.001 8.001 0 0 0-8.029 0L10.19 128.09a8.05 8.05 0 0 0-4.011 6.96v241.91c0 2.86 1.53 5.521 4.011 6.95l209.55 121.01c1.24.72 2.63 1.08 4.01 1.08 1.39 0 2.77-.36 4.01-1.08l65.91-37.99c22.4 23.94 54.23 38.95 89.53 38.95 67.609 0 122.62-55.01 122.62-122.62 0-46.6-26.13-87.2-64.5-107.94zM346.85 94.41l-197.439 114a8.037 8.037 0 0 0-4.01 6.96v43.67l-53.19-30.7v-48.32l201.5-116.31zM223.76 488.7 22.24 372.32V139.69L223.75 23.31l53.9 31.131L80.17 168.43a8.038 8.038 0 0 0-4.02 6.96v57.591a8.03 8.03 0 0 0 4.01 6.949l69.25 39.98c1.25.72 2.64 1.07 4.02 1.07 1.391 0 2.78-.351 4.021-1.07a8.035 8.035 0 0 0 4.01-6.95V220l201.45-116.32 62.35 36.011v128.38c-13.12-4.801-27.29-7.431-42.06-7.431-67.62 0-122.62 55.011-122.62 122.62 0 26.48 8.47 51 22.79 71.061zm159.44 1.12c-58.76 0-106.561-47.801-106.561-106.561S324.44 276.7 383.2 276.7c58.75 0 106.56 47.8 106.56 106.56S441.95 489.82 383.2 489.82zm0-196.45c-4.44 0-8.03 3.59-8.03 8.03v73.83H331.2c-4.44 0-8.03 3.59-8.03 8.029 0 4.44 3.59 8.03 8.03 8.03h52c4.439 0 8.03-3.59 8.03-8.03V301.4c0-4.44-3.59-8.03-8.03-8.03zm0 0c-4.44 0-8.03 3.59-8.03 8.03v73.83H331.2c-4.44 0-8.03 3.59-8.03 8.029 0 4.44 3.59 8.03 8.03 8.03h52c4.439 0 8.03-3.59 8.03-8.03V301.4c0-4.44-3.59-8.03-8.03-8.03zm0 0c-4.44 0-8.03 3.59-8.03 8.03v73.83H331.2c-4.44 0-8.03 3.59-8.03 8.029 0 4.44 3.59 8.03 8.03 8.03h52c4.439 0 8.03-3.59 8.03-8.03V301.4c0-4.44-3.59-8.03-8.03-8.03z' opacity='1' data-original='%23003673' class=''%3E%3C/path%3E%3Cpath fill='%23e5ffe0' d='M425.26 139.69v128.38c-13.12-4.801-27.29-7.431-42.06-7.431-67.62 0-122.62 55.011-122.62 122.62 0 26.48 8.47 51 22.79 71.061l-59.61 34.38L22.24 372.32V139.69L223.75 23.31l53.9 31.131L80.17 168.43a8.038 8.038 0 0 0-4.02 6.96v57.591a8.03 8.03 0 0 0 4.01 6.949l69.25 39.98c1.25.72 2.64 1.07 4.02 1.07 1.391 0 2.78-.351 4.021-1.07a8.035 8.035 0 0 0 4.01-6.95V220l201.45-116.32z' opacity='1' data-original='%2373d8ff' class=''%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .product__box .product-action.custom { margin-top: 10px; display: flex; align-items: center; border-top: 1px solid #ebebf0; padding-top: 8px; } .product__box .product-action.custom .group_action { padding-top: 0; opacity: 1; width: calc(100% - 50px); margin: 0; justify-content: flex-end; text-align: center; } .product__box .product-action.custom .group_action .btn-views { transition: all .8s; padding: 0 !important; color: #fff; font-size: 0; flex: none; width: 35px; height: 35px; border-radius: 50%; position: relative; } .product__box .product-action.custom .group_action .btn-views.btn-first { background-color: #da1f26; border-color: #da1f26; } .product__box .product-action.custom .group_action .btn-views.btn-last { background-color: #2659f3; border-color: #2659f3; margin-right: 10px; } .product__box .product-action.custom .group_action .btn-views.btn-last:before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-eye' viewBox='0 0 16 16'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E"); } .product__box .product-action.custom .group_action .btn-views:hover { transform: scale(1.2); } .product__box .product-action.custom .group_action .btn-views:before { width: 65%; height: 65%; transform: translate(-50%, -50%); left: 50%; top: 50%; position: absolute; content: ''; background-size: cover; background-position: center; background-repeat: no-repeat; } .product__box .product-action.custom .label_product { margin-right: 10px; position: static; width: 50px; height: 32px; background-position: center; background-size: contain; background-repeat: no-repeat; background-color: transparent; background-image: url("../images/tag-percent_b0f205ed1ad446b3adcf3087f5961d68.png"); } .product__box .product-action.custom .label_product:after { display: none; } .learn-more { width: 70%; margin: auto; height: auto; position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: .75rem; font-family: inherit; } .learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 1.5rem; height: 1.5rem; background: #ed1c24; border-radius: 1.625rem; } .learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } .learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.25rem; width: 0.65rem; height: 0.05rem; background: none; } .learn-more .circle .icon.arrow::before { position: absolute; content: ''; top: -0.2rem; right: 0.0625rem; width: 0.425rem; height: 0.425rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } .learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.15rem 0; margin: 0 0 0 1.45rem; color: #ed1c24; font-weight: 500; line-height: 1.6; text-align: center; text-transform: uppercase; } .learn-more:hover .circle { width: 100%; } .learn-more:hover .circle .icon.arrow { background: #fff; transform: translate(0.5rem, 0); } .learn-more:hover .button-text { color: #fff; } /*start quick view*/ #quick-view-product { bottom: 0; left: 0; overflow-x: auto; overflow-y: auto; position: fixed; right: 0; top: 0 !important; z-index: 9999; } #quick-view-product .fancybox-overlay { display: block !important; height: 100vh; background: none; z-index: 100; } #quick-view-product .quick-view-product { position: absolute; width: 950px; top: 5%; height: auto; margin: 0 auto; left: 0; right: 0; padding: 30px; background-color: #fff; z-index: 8011; border-radius: 0px; } #quick-view-product .details-product { width: 100%; float: left; } @media screen and (max-width: 1024px) { #quick-view-product .quick-view-product { width: calc(100vw - 30px); } #quick-view-product a.quickview-close.close-window { top: 5px; right: 5px; } #quick-view-product .title-product { margin-top: 15px; } #quick-view-product .more-view-wrapper { display: none; } } #thumblist_quickview { margin-top: 20px; margin-bottom: 0px; padding: 0px; /**.item.slick-slide.slick-current.slick-active{ border-color: #2659f3; }**/ } #thumblist_quickview:not(.slick-slider) { display: flex; align-items: center; overflow: hidden; } #thumblist_quickview .slick-slide.slick-slide { margin: 0 5px; border-radius: 4px; overflow: hidden; border: 1px solid #eee; } #thumblist_quickview .slick-slide.active { border-color: #2659f3; } #thumblist_quickview .slick-slide { position: relative; height: 80px; } #thumblist_quickview .slick-slide img { width: auto; max-height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; padding: 2px; } a.quickview-close.close-window { position: absolute; top: 0; right: -55px; background: #fff; padding: 10px; width: 40px; height: 40px; display: flex; align-items: center; border-radius: 100%; color: #000; justify-content: center; opacity: 0.7; } a.quickview-close.close-window:hover { opacity: 1; } #quick-view-product .quick-view-product { border-radius: 8px; padding: 15px; } .head-qv.group-status a:hover { color: #2659f3; } /* End popupcart */ .quickview-more { display: block; margin-top: 15px; font-weight: 700; color: #ed1c24; } .quickview-preorder:not(.d-none) { background: #06b52c; color: #fff; padding: 5px 8px; display: inline-block; border-radius: 6px; margin-top: 15px; } #quick-view-product .fancybox-overlay { display: block !important; height: 100vh; background: none; z-index: 100; } #quick-view-product .quick-view-product { position: absolute; width: 950px; top: 5%; height: auto; margin: 0 auto; left: 0; right: 0; background-color: #fff; z-index: 8011; border-radius: 8px; padding: 15px; } #quick-view-product .input_number_product,#quick-view-product .custom-btn-number { border: none; display: flex; height: 30px; margin-bottom: 20px; margin-top: 10px; align-items: center; } #quick-view-product .btn.btn_num { padding: 4px; width: 30px; border: 1px solid #ced4da; height: 30px; display: flex; align-items: center; justify-content: center; } #quick-view-product .prd_quantity { width: 75px !important; text-align: center; border-radius: 0; height: 30px; } #quick-view-product .btn.btn_num.num_1 { border-radius: 4px 0px 0px 4px; border-right: 0; } #quick-view-product .btn.btn_num.num_2 { border-radius: 0px 4px 4px 0px; border-left: 0; } #quick-view-product .button_actions .btn_base { height: 48px; line-height: 45px; color: #2659f3; font-weight: 400; text-decoration: none; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-weight: bold; font-size: 14px; line-height: 45px; padding: 0px 35px; border-radius: 5px; margin-top: 0px; border: solid 1px #2659f3; background: #fff; font-weight: 600; flex: 0 0 auto; width: calc((100% - 15px) / 2); } #quick-view-product .button_actions { display: -webkit-flex; display: flex; justify-content: space-between; } #quick-view-product .button_actions i{margin-right: 10px;} #quick-view-product .button_actions .btn_base.buy_now { background: #2659f3; color: #fff; border: 1px solid #2659f3; } #quick-view-product .details-pro .price-box { position: relative; margin: 15px 0 10px; padding: 10px 16px; background: #f1f1f1; border-radius: 4px; display: block; } #quick-view-product .group-status { font-size: 14px; } #quick-view-product .details-pro .product-price { font-size: 30px; color: #2659f3; font-weight: 500; line-height: 30px; font-family: inherit; } #quick-view-product .price-box .old-price { margin-left: 10px; } #quick-view-product .price-box .product-discount { float: right; width: 68px; height: 68px; background: url(../images/icon-product-discount_large.png) center no-repeat; text-align: center; color: #fff; font-size: 11px; } #quick-view-product .price-box .product-discount span { margin-top: 20px; display: block; line-height: 15px; } #quick-view-product .price-box .product-discount strong { font-weight: bold; font-size: 14px; display: block; } #quick-view-product .price-box .col-9 { display: flex; align-items: center; } .status_name { color: #2659f3; } /*end quick view*/ @media (max-width: 995px) { .item_rates { width: 100% !important; display: block; border: 0 !important; } .fs-dtrtcmti21 { font-size: 18px; } } @media (max-width: 500px) { div.comment #ten_commnet, div.comment #dienthoai_commnet, div.comment #email_commnet { width: 100%; } } .comment_old.custom { height: 446px; } .box_ngbinhluan { display: flex; align-items: center; margin-bottom: 20px; } .box_ngbinhluan > img { width: 67px; margin-right: 1em; } .layout-text { display: grid; grid-template-columns: 164px 1fr; grid-gap: 15px; width: 100%; } .click_taianh { border: solid 1px #ddd; border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; height: 122px; cursor: pointer; } .click_taianh span { color: #999; position: relative; z-index: 1; } .click_taianh input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; } .ngdabinhluan { text-align: left; } .ngdabinhluan > div > img { width: 93px; margin: auto; border: 1px solid #fff; margin-bottom: 3px; } .boxngdabinhluan section { position: relative; } .box_commnet div.item_comment .alert { border-color: #caf1fc; background-color: #caf1fc; color: #000; font-size: 13px; } .click_taianh img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; object-fit: contain; background: #fff; } .click_taianh img[src=''] { opacity: 0; visibility: hidden; } .anh_binh_luan { position: absolute; right: 0; top: 0; width: 9em; height: 100%; background: #000; } .anh_binh_luan img { height: 100%; width: 100%; object-fit: cover; display: block; margin-left: auto; } .anh_binh_luan span { position: absolute; bottom: 0; color: #fff; font-size: 11px; padding: 3px; left: 0; width: 100%; text-align: center; } .search { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; max-width: 430px; } .search .search-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; overflow: hidden; background-color: #fff; border-radius: 0; border: 1px solid #000066; } .search .search-grid i { margin-left: 10px; color: #333; } .search .search-grid input { width: calc(100% - 100px); height: 40px; font-size: 14px; color: #333; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; font-style: italic; padding: 0 10px; border: 0; line-height: 40px; outline: none; background-color: transparent; } .search .search-grid input::-moz-placeholder { color: rgba(51, 51, 51, 0.7); opacity: 1; } .search .search-grid input:-ms-input-placeholder { color: rgba(51, 51, 51, 0.7); } .search .search-grid input::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7); } .search .search-grid p { font-size: 16px; color: #fff; font-weight: 500; box-sizing: border-box; display: inline-flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; width: 100px; height: 40px; background-color: var(--theme-color); padding: 0; margin: 0; text-transform: capitalize; cursor: pointer; } .search { position: relative; } .mxh { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .mxh a { box-sizing: border-box; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; font-size: 14px; color: #000; font-weight: 400; width: 100%; } .mxh a img { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; max-height: 35px; object-fit: scale-down; margin-right: 5px; } @media screen and (prefers-reduced-motion: reduce) { .mxh a img { transition: none; } } .mxh a + a { margin-top: 5px; } .mxh--ft span { font-size: 13px; color: #4d4d4d; font-weight: 500; font-style: italic; width: 100%; margin-bottom: 10px; } .mxh--ft a { width: auto; } .mxh--ft a img { max-height: 34px; margin-right: 0; } .mxh--ft a + a { margin-left: 10px; } .newsletter form .form-group-flex { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .newsletter form .form-group-flex .form-group { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; } .newsletter form .form-group-flex .form-group + .form-group { margin-left: 10px; } .newsletter form .form-group { position: relative; border: 0; margin-bottom: 10px; } .newsletter form .form-group .invalid-feedback { visibility: hidden; height: 0; margin: 0; } .newsletter form .form-group .form-control { font-size: 13px; color: #000; font-weight: 400; font-family: "Arial"; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; height: 40px; padding: 10px; background-color: #fff; border: 1px solid #d9d9d9; border-radius: 0; outline: none; box-shadow: none; } .newsletter form .form-group .form-control::-moz-placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; } .newsletter form .form-group .form-control:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); } .newsletter form .form-group .form-control::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); } .newsletter form .form-group textarea.form-control { height: 106px; } .newsletter form .newsletter-button { text-align: center; margin-left: 10px; } .newsletter form .newsletter-button input[type="submit"], .newsletter form .newsletter-button input[type="reset"] { font-size: 13px; color: #fff; font-weight: 700; background-color: var(--theme-color); border-radius: 0; line-height: 40px; text-align: center; border: 0; text-transform: uppercase; box-shadow: none; padding: 0; width: 40px; } .btn-more { box-sizing: border-box; display: inline-flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; height: 45px; cursor: pointer; position: relative; color: #fff; background-color: var(--theme-color); text-transform: uppercase; border: 1px solid var(--theme-color); padding: 0 35px; } @media screen and (prefers-reduced-motion: reduce) { .btn-more { transition: none; } } .btn-more span { font-size: 14px; color: inherit; font-weight: 400; } .btn-more:hover { background-color: #fff; color: var(--theme-color); } .btn-more2 { box-sizing: border-box; display: inline-flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; background-color: #17469e; color: #fff; } @media screen and (prefers-reduced-motion: reduce) { .btn-more2 { transition: none; } } .btn-more2:before { width: 0; height: 0; position: absolute; top: 0px; left: 0px; border-top: 20px solid transparent; border-left: 10px solid #fff; border-bottom: 20px solid transparent; } .btn-more2:after { width: 0; height: 0; position: absolute; top: 0px; right: 0px; border-top: 20px solid transparent; border-right: 10px solid #fff; border-bottom: 20px solid transparent; } .btn-more2:hover { background-color: #ffb933; color: #000; } .btn-more2 span { font-size: 14px; color: inherit; font-weight: 400; display: inline-block; line-height: 1; position: relative; text-transform: capitalize; padding: 13px 30px; } .btn-more2 span[href] { cursor: pointer; } .btn-more2 span[href]:hover { color: #17469e; } /*section-pdlist*/ .pdlisthome-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .pdlisthome__item { border: 1px solid #e6e6e6; padding: .5em 1em; margin-left: -1px; margin-top: -1px; } .pdlisthome__link { display: block; text-align: center; } .pdlisthome__image { position: relative; margin-bottom: 5px; } .pdlisthome__image:before { display: block; content: ""; width: 100%; padding-top: 100%; } .pdlisthome__name { font-size: 14px; color: #000; font-weight: 400; display: block; display: -webkit-box; height: 42px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /*section-quangcao*/ .quangcao__link { position: relative; display: block; } .quangcao__link:before { display: block; content: ""; width: 100%; padding-top: 25%; } /*section-video*/ .videohome-slick { margin: 0 -1em; } .videohome__item { padding: 0 1em; } .videohome__link { display: block; } .videohome__image { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; position: relative; } .videohome__image:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .videohome__image:after { width: 80px; height: 80px; background-image: url("../images/play.png"); background-repeat: no-repeat; background-position: 0 0; background-size: cover; } /*section-tieuchi*/ .section-tieuchi { padding: 30px 0; background-color: var(--theme-color); } .tieuchi-slick { margin: 0 -1em; } .tieuchi__item { padding: 0 1em; } .tieuchi__link { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .tieuchi__image { position: relative; background-image: url("../images/tieuchi.png"); background-repeat: no-repeat; background-position: 0 0; background-size: cover; width: 114px; } .tieuchi__image:after { background: var(--theme2-color); width: 80px; height: 80px; content: ""; position: absolute; top: 17px; transform: rotate(45deg); left: 17px; z-index: 1; } .tieuchi__image:before { display: block; content: ""; width: 100%; padding-top: 100%; } .tieuchi__body { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; margin-left: 10px; } .tieuchi__name { font-size: 15px; color: var(--theme2-color); font-weight: 700; } .tieuchi__desc { font-size: 15px; color: #fff; font-weight: 400; } /*pro-detail-info*/ .pro-detail-info-wrap { box-sizing: border-box; display: flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .pro-detail-info__left { width: 60%; } .pro-detail-info__right { width: 40%; padding-left: 1em; } .pro-detail-tieuchi__item { margin-bottom: 5px; } .pro-detail-tieuchi__link { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; padding: 0.5em; border: 1px solid #eee; border-radius: 5px; } .pro-detail-tieuchi__image { position: relative; width: 50px; } .pro-detail-tieuchi__image:before { display: block; content: ""; width: 100%; padding-top: 100%; } .pro-detail-tieuchi__body { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; margin-left: 1em; } .pro-detail-tieuchi__name { font-size: 15px; color: #000; font-weight: 400; } .cart-pro-detail a.addnow:hover{color:#fff} .cart-pro-detail a.addnow { background-color: var(--theme-color); } .cart-pro-detail a.buynow:hover, .cart-pro-detail a.buynow { background-color: var(--theme2-color); color: #111; } /* Album */ .video-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -1%; margin-right: -1%; } .video__item { box-sizing: border-box; flex: 0 0 23%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; cursor: pointer; } .video__image { position: relative; margin-bottom: 10px; } .video__image:before { width: 40px; height: 28px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 41; background-image: url("../images/playin.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; } .video__img { width: 100%; } .video__name { font-size: 1em; color: #000; font-weight: 400; text-align: center; } @media (max-width: 425px) { .video__item { box-sizing: border-box; flex: 0 0 48%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } } .news-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -1%; margin-right: -1%; } .news__item { box-sizing: border-box; flex: 0 0 48%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .news__link { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; background-color: #fff; } .news__link:hover .news__name { color: #f00; } .news__image { width: 36%; margin-bottom: 10px; } .news__img { background-color: #eee; width: 100%; } .news__body { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; margin-left: 1em; } .news__name { font-size: 16px; color: var(--color-title-main); font-weight: 700; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (prefers-reduced-motion: reduce) { .news__name { transition: none; } } .news__desc { font-size: 14px; color: #333; font-weight: 400; display: block; display: -webkit-box; height: 63px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .news__date { font-size: 14px; color: #807f7f; font-weight: 400; } @media (max-width: 440px) { .news__image { width: 100%; } .news__body { margin-left: 0; text-align: center; } } @media (max-width: 850px) { .news__item { box-sizing: border-box; flex: 0 0 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } .news--verticle .news__item { box-sizing: border-box; flex: 0 0 48%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } } @media (max-width: 425px) { .news--verticle .news__item { box-sizing: border-box; flex: 0 0 98%; margin-left: 1%; margin-right: 1%; margin-bottom: 2%; } } .product-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.8333333333%; margin-right: -0.8333333333%; } .product { box-sizing: border-box; flex: 0 0 18.3333333333%; margin-left: 0.8333333333%; margin-right: 0.8333333333%; margin-bottom: 1.6666666667%; border: 1px solid #ededed; transition: border-color .2s; border-radius: 8px; } .slick-box-item .product { width: 100%; margin: 0; } .product__hethang { position: absolute; top: 10px; left: 10px; font-size: 12px; color: #fff; font-weight: 400; background-color: var(--theme-color); text-transform: capitalize; padding: 5px; border-radius: 3px; } .product__box { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; position: relative; height: 100%; background-color: #fff; } @media screen and (prefers-reduced-motion: reduce) { .product__box { transition: none; } } .product__box:hover .product__name { color: var(--theme-color); } .product__link { position: relative; display: block; margin-bottom: 10px; } .product__image { position: relative; margin-bottom: 0; overflow: hidden; } .product__image::before { display: block; content: ""; width: 100%; padding-top: 100%; } .product__img { background-color: #fff; } .product__name { font-size: 15px; color: #262626; font-weight: 500; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: block; display: -webkit-box; max-height: 45px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 5px; } @media screen and (prefers-reduced-motion: reduce) { .product__name { transition: none; } } .product__name a { color: inherit; } .product__rating .rating-star { color: #ffa800; font-size: 14px; } .product__rating .rating-star i + i { margin-left: 5px; } .product__rating .comment-total { font-size: 13px; color: #4d4d4d; font-weight: 400; } .product__bottom { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; justify-content: space-between; } .product__price { box-sizing: border-box; display: contents; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 14px; color: #b9b9b9; font-weight: 400; width: 100%; margin-bottom: 0px; } .img_sp_hot img{position: absolute; left: 10px; max-width: 50px; top: 0;} .product__price-new { font-weight: 700; color: #ff2626; } .product__price-old { text-decoration: line-through; position: relative; } .product__price-per { position: absolute; top: 15px; right: 15px; font-size: 11px; color: #fff; font-weight: 400; width: 45px; height: 25px; border-radius: 2px; z-index: 100; background: var(--color-red); text-align: center; line-height: 25px; } .product__cart { box-sizing: border-box; display: flex; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: none; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; font-size: 15px; color: #333; font-weight: 500; position: absolute; bottom: 0px; left: 0px; width: 100%; min-height: 40px; background-color: #f5f5f5; border-top: 1px solid #e7e7e7; text-transform: uppercase; margin: 0; } .product__cart span { cursor: pointer; } .product__cart i { margin-right: 10px; } .product__cart-add { cursor: pointer; } .product__cart-buy { cursor: pointer; padding-left: 10px; color: #3a1b08; } .slick-box-item { padding: 0 0.75em; } .spnoibat2-main, .spnoibat-main { margin: 0 -0.75em; } /* ================================================================================ MIXIN DEVICES ================================================================================ */ /*========= SLIDER ===============*/ /*========= HEADER ===============*/ /*========= FOOTER ===============*/ /*========= MENU ===============*/ /*========= PRODUCT ===============*/ /*========= NEW ===============*/ /* ================================================================================ LARGE DEVICES Large Desktops 1200px and Up (>1200) ================================================================================ */ /* ================================================================================ MEDIUM DEVICES Desktops 992px and Up (>992px & <1200px) ================================================================================ */ /* ================================================================================ SMALL DEVICES Tablets 768px and Up (>768px & <992px) ================================================================================ */ @media screen and (min-width: 768px) and (max-width: 992px) { .section, .footer-box { padding: 20px 0; } .wrap-page { overflow: hidden; } } @media screen and (min-width: 768px) and (max-width: 992px) and (max-width: 425px) { .main-title__name { font-size: 20px; } } @media screen and (min-width: 768px) and (max-width: 992px) { .header { display: none; } .banner { display: none !important; } .logo-mobile { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); display: block; } .logo-mobile img { max-height: 65px; } .menu-bar-res .m-btn-cart { color: var(--menu-bg); margin-right: 1em; } .menu-bar-res--right { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .menu-bar-res--right .lang-header { margin: 0 1rem 0; } .hero-image { display: none; } .menubar { display: none; } .menu_mobi { display: flex; } .menu-res { background-color: var(--header-bg); } .toolbar { background-color: #17469e; } .menu-slider .slideshow-box { float: none; display: block; width: 100%; } .footer-top__chinhanh { width: 100%; margin-bottom: 1em; } .footer-top__social { width: 49%; margin-bottom: 1em; } .footer-top__newsletter { width: 49%; margin-bottom: 1em; } .footer__payment { width: 49%; margin-bottom: 1em; } .footer__info { width: 100%; margin-bottom: 1em; } .footer__fanpage { width: 49%; margin-bottom: 1em; } .footer__baiviet { width: 49%; margin-bottom: 1em; } } @media screen and (min-width: 768px) and (max-width: 992px) and (max-width: 425px) { .footer-top__social { width: 30%; } .footer-top__newsletter { width: 60%; } .footer__payment { width: 100%; } .footer__fanpage { width: 100%; } .footer__baiviet { width: 100%; } } @media screen and (min-width: 768px) and (max-width: 992px) { .copyright-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; text-align: center; padding: 7px; height: auto; } .copyright__text { width: 100%; } #footer-map, #footer-map iframe { height: 300px; } .pdlisthome__item { box-sizing: border-box; flex: 0 0 25%; } .pdlisthome__item { padding: .5em 5px; } .product-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.8333333333%; margin-right: -0.8333333333%; } .product { box-sizing: border-box; flex: 0 0 48.3333333333%; margin-left: 0.8333333333%; margin-right: 0.8333333333%; margin-bottom: 1.6666666667%; } } /* ================================================================================ EXTRA SMALL (>425px & <768px) ================================================================================ */ @media screen and (min-width: 425px) and (max-width: 768px) { .section, .footer-box { padding: 20px 0; } .wrap-page { overflow: hidden; } } @media screen and (min-width: 425px) and (max-width: 768px) and (max-width: 425px) { .main-title__name { font-size: 20px; } } @media screen and (min-width: 425px) and (max-width: 768px) { .header { display: none; } .banner { display: none !important; } .logo-mobile { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); display: block; } .logo-mobile img { max-height: 65px; } .menu-bar-res .m-btn-cart { color: var(--menu-bg); margin-right: 1em; } .menu-bar-res--right { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .menu-bar-res--right .lang-header { margin: 0 1rem 0; } .hero-image { display: none; } .menubar { display: none; } .menu_mobi { display: flex; } .menu-res { background-color: var(--header-bg); } .toolbar { background-color: #17469e; } .menu-slider .slideshow-box { float: none; display: block; width: 100%; } .footer-top__chinhanh { /* width: 100%;*/ margin-bottom: 1em; } .footer-top__social { width: 49%; margin-bottom: 1em; } .footer-top__newsletter { width: 49%; margin-bottom: 1em; } .footer__payment { width: 49%; margin-bottom: 1em; } .footer__info { width: 100%; margin-bottom: 1em; } .footer__fanpage { width: 49%; margin-bottom: 1em; } .footer__baiviet { width: 49%; margin-bottom: 1em; } } @media screen and (min-width: 425px) and (max-width: 768px) and (max-width: 425px) { .footer-top__social { width: 30%; } .footer-top__newsletter { width: 60%; } .footer__payment { width: 100%; } .footer__fanpage { width: 100%; } .footer__baiviet { width: 100%; } } @media screen and (min-width: 425px) and (max-width: 768px) { .copyright-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; text-align: center; padding: 7px; height: auto; } .copyright__text { width: 100%; } #footer-map, #footer-map iframe { height: 300px; } .pdlisthome__item { box-sizing: border-box; flex: 0 0 25%; } .pdlisthome__item { padding: .5em 5px; } .product-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.8333333333%; margin-right: -0.8333333333%; } .product { box-sizing: border-box; flex: 0 0 48.3333333333%; margin-left: 0.8333333333%; margin-right: 0.8333333333%; margin-bottom: 1.6666666667%; } } /* ================================================================================ MOBILE SIZE Phones Less than 425px (<425px) ================================================================================ */ @media screen and (max-width: 425px) { .section, .footer-box { padding: 20px 0; } .wrap-page { overflow: hidden; } } @media screen and (max-width: 425px) and (max-width: 425px) { .main-title__name { font-size: 20px; } } @media screen and (max-width: 425px) { .header { display: none; } .banner { display: none !important; } .logo-mobile { position: absolute; top: 0px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); display: block; } .logo-mobile img { max-height: 65px; } .menu-bar-res .m-btn-cart { color: var(--theme-color); margin-right: 1em; } .menu-bar-res--right { -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; -moz-align-items: center; align-items: center; } .menu-bar-res--right .lang-header { margin: 0 1rem 0; } .hero-image { display: none; } .menubar { display: none; } .menu_mobi { display: flex; } .menu-res { background-color: var(--header-bg); } .toolbar { background-color: #17469e; } .menu-slider .slideshow-box { float: none; display: block; width: 100%; } .footer-top__chinhanh { /* width: 100%;*/ margin-bottom: 1em; } .footer-top__social { width: 49%; margin-bottom: 1em; } .footer-top__newsletter { width: 49%; margin-bottom: 1em; } .footer__payment { width: 49%; margin-bottom: 1em; } .footer__info { width: 100%; margin-bottom: 1em; } .footer__fanpage { width: 49%; margin-bottom: 1em; } .footer__baiviet { width: 49%; margin-bottom: 1em; } } @media screen and (max-width: 425px) and (max-width: 425px) { .footer-top__social { width: 30%; } .footer-top__newsletter { width: 60%; } .footer__payment { width: 100%; } .footer__fanpage { width: 100%; } .footer__baiviet { width: 100%; } } @media screen and (max-width: 425px) { .copyright-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; -moz-justify-content: center; justify-content: center; text-align: center; padding: 7px; height: auto; } .copyright__text { width: 100%; } #footer-map, #footer-map iframe { height: 300px; } .pdlisthome__item { box-sizing: border-box; flex: 0 0 25%; } .pdlisthome__item { padding: .5em 5px; } .product-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.8333333333%; margin-right: -0.8333333333%; } .product { box-sizing: border-box; flex: 0 0 48.3333333333%; margin-left: 0.8333333333%; margin-right: 0.8333333333%; margin-bottom: 1.6666666667%; } } @media screen and (max-width: 425px) and (max-width: 330px) { .product-grid { box-sizing: border-box; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: 0; margin-right: 0; } .product { box-sizing: border-box; flex: 0 0 100%; } } @media screen and (max-width: 425px) { .logo-mobile { position: relative; top: 0px; left: 0px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); margin-left: 10px; } .logo-mobile img { max-width: 150px; } .pdlisthome__item { box-sizing: border-box; flex: 0 0 50%; } .pdlisthome__name { font-size: 12px; color: #000; font-weight: 400; display: block; display: -webkit-box; max-height: 54px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .videohome__image:after { width: 40px; height: 40px; } .main-title__more { display: none; } .pro-detail-info__left { width: 100%; } .pro-detail-info__right { display: none; } } .pagination.d-block{ text-align: center; } .pagination.d-block li.active{ background: red; } .pagination.d-block li:hover a,.pagination.d-block li.active a{ background: #17469e; color: #fff; border-color: transparent; } .pagination.d-block li{ display: inline-block; }