* {
    box-sizing: border-box; }

html {
    scroll-behavior: smooth; }

@keyframes fl-scale {
    50% {
        opacity: .3;
        transform: scale(1.3); } }
@keyframes scroll {
    0% {
        top: -100px; }
    50% {
        top: -50px; }
    100% {
        top: 0px; } }
@keyframes pulse-blue {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 143, 227, 0.7);
        transform: scale(0.95); }
    70% {
        box-shadow: 0 0 0 10px rgba(2, 143, 227, 0);
        transform: scale(1); }
    100% {
        box-shadow: 0 0 0 0 rgba(2, 143, 227, 0);
        transform: scale(0.95); } }
@keyframes phonering-alo-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.5) skew(1deg);
        -webkit-opacity: .1; }
    30% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        -webkit-opacity: .5; }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -webkit-opacity: .1; } }
@keyframes phonering-alo-circle-fill-anim {
    0% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: .6; }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        opacity: .6; }
    100% {
        -webkit-transform: rotate(0) scale(0.7) skew(1deg);
        opacity: .6; } }
@keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg); }
    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg); }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg); } }
:root {
    --red:red;
    --red-cl: #fecda5;
    --white-cl: #fff;
    --primary-cl: #ffd401;
    --red-d: #8a0505;
    --black-cl: #000;
    --gray-cl: #e1e1e1;
    --xanhnuocbien: #3d8dc9;
    --mauhong: #ffbebe; }

.scroll_none {
    display: none !important; }

.open_menu {
    display: block !important; }

.az-col {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 15px;
    padding-left: 15px; }

.other-box {
    --red: pink;
    background-color: var(--red); }

.bg_black {
    background-color: var(--black-cl); }

.bg_blue {
    background-color: var(--xanhnuocbien); }

.bg_red {
    background-color: var(--red-d); }

.pd_12 {
    padding: 0px 12px; }

.none {
    opacity: 0.6;
    background-color: #000; }

.body-overlay {
    background-color: rgba(0, 0, 0, 0.3);
    bottom: 0;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: visibility .3s, opacity .3s ease-in-out;
    visibility: hidden;
    width: 100%;
    z-index: 29; }

.none {
    opacity: 1;
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.7); }

.bg_primary {
    background-color: var(--xanhnuocbien); }

header {
    height: 64px;
    transition: .3s ease;
    background-position: 50% 0;
    background-size: cover;
    position: relative;
    width: 100%;
    z-index: 9999;
    opacity: 1; }
header .box_header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    position: relative;
    z-index: 9999; }
header .box_header .logo {
    width: 10%;
    max-width: 10%;
    flex: 10% 10% 10%;
    position: relative;
    height: 100%; }
header .box_header .logo a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; }
header .box_header .logo img {
    width: 100%; }
header .box_header .flex_center {
    width: 50%;
    max-width: 50%;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
header .box_header .flex_center .box_category {
    border: 1px solid #fff;
    border-radius: 5px;
    padding: 10px 5px;
    width: 18%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
header .box_header .flex_center .box_category i {
    padding-right: 5px;
    color: var(--white-cl); }
header .box_header .flex_center .box_category span {
    font-size: 12px;
    color: var(--white-cl); }
header .box_header .flex_center .box_category .category {
    flex: 0 0 auto;
    width: 220px;
    position: absolute;
    left: 12px;
    top: 22px;
    border-radius: 10px;
    z-index: 99;
    padding-top: 63px;
    display: none; }
header .box_header .flex_center .box_category .category ul {
    border-radius: 10px;
    box-shadow: 0px 1px 8px #9b9797;
    padding: 5px 8px;
    position: relative;
    background-color: #fff; }
header .box_header .flex_center .box_category .category ul li {
    line-height: 28.5px; }
header .box_header .flex_center .box_category .category ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--black-cl);
    padding: 3px 0px; }
header .box_header .flex_center .box_category .category ul li a .box {
    display: flex;
    align-items: center; }
header .box_header .flex_center .box_category .category ul li a .box img {
    width: 25px;
    height: 100%; }
header .box_header .flex_center .box_category .category ul li a .box p {
    font-size: 13px;
    font-weight: 500;
    padding-left: 5px; }
header .box_header .flex_center .box_category .category ul li a i {
    font-size: 16px;
    color: #343a40; }
header .box_header .flex_center .box_category .category ul li .sub-menu {
    display: none;
    position: absolute;
    left: 97%;
    top: 0px;
    width: calc(1268px - 222px) !important;
    z-index: 9999999;
    padding: 0px 30px; }
header .box_header .flex_center .box_category .category ul li .sub-menu .row {
    background: #fff;
    box-shadow: 1px 0px 4px #ccc;
    border-radius: 10px; }
header .box_header .flex_center .box_category .category ul li .sub-menu ul {
    box-shadow: 0px 0px 0px;
    margin-top: 10px; }
header .box_header .flex_center .box_category .category ul li .sub-menu ul li {
    height: 25px; }
header .box_header .flex_center .box_category .category ul li .sub-menu ul li a {
    font-size: 12px; }
header .box_header .flex_center .box_category .category ul li .sub-menu ul li a:hover {
    color: #8a0505; }
header .box_header .flex_center .box_category .category ul li .sub-menu .menu_item {
    padding: 10px 20px; }
header .box_header .flex_center .box_category .category ul li .sub-menu .menu_item h3 {
    font-size: 14px; }
header .box_header .flex_center .box_category .category ul li .sub-menu .row .border_r:nth-child(1), header .box_header .flex_center .box_category .category ul li .sub-menu .row .border_r:nth-child(2) {
    border-right: 1px solid #eee; }
header .box_header .flex_center .box_category .category ul .category_item:hover p, header .box_header .flex_center .box_category .category ul .category_item:hover i {
    color: var(--xanhnuocbien); }
header .box_header .flex_center .box_category .category .open .sub-menu {
    display: block; }
header .box_header .flex_center .search {
    width: 80%;
    position: relative; }
header .box_header .flex_center .search .load-data {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    padding: 15px 5px;
    max-height: 400px;
    overflow-y: scroll; }
header .box_header .flex_center .search .load-data li {
    margin-bottom: 10px; }
header .box_header .flex_center .search .load-data .box_pr {
    background-color: #fff;
    display: flex; }
header .box_header .flex_center .search .load-data .box_pr .img {
    width: 16%;
    padding: 0px 10px; }
header .box_header .flex_center .search .load-data .box_pr .content {
    width: 83%; }
header .box_header .flex_center .search .load-data .box_pr .content .title h2 {
    font-size: 14px;
    color: #333; }
header .box_header .flex_center .search .load-data .box_pr .content .title b {
    font-size: 14px;
    color: #333;
    font-weight: bold; }
header .box_header .flex_center .search .load-data .box_pr .content .title:hover b {
    color: var(--xanhnuocbien); }
header .box_header .flex_center .search .load-data .box_pr .content .price {
    display: flex;
    align-items: center;
    margin-top: 5px; }
header .box_header .flex_center .search .load-data .box_pr .content .price p {
    font-size: 13px;
    color: var(--red);
    font-weight: bold; }
header .box_header .flex_center .search .load-data .box_pr .content .price span {
    color: #858584;
    padding-left: 5px;
    text-decoration: line-through;
    font-size: 12px; }
header .box_header .flex_center .search .load-data::-webkit-scrollbar {
    width: 0px;
    background-color: var(--xanhnuocbien); }
header .box_header .flex_center form {
    display: flex;
    align-items: center;
    border: 1px solid var(--xanhnuocbien);
    border-radius: 5px; }
header .box_header .flex_center form input {
    font-size: 12px;
    height: 40px;
    width: 100%;
    border: 0px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-left: 10px; }
header .box_header .flex_center form input:focus-visible {
    outline: none; }
header .box_header .flex_center form button {
    border: 0px solid #ccc;
    height: 40px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 48px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px; }
header .box_header .flex_center form button i {
    display: block;
    font-size: 20px; }
header .box_header .flex_center form button:hover {
    background-color: #ccc; }
header .box_header .flex_right {
    width: 40%;
    max-width: 40%; }
header .box_header .flex_right ul {
    display: flex;
    align-items: center;
    justify-content: space-between; }
header .box_header .flex_right ul li a {
    display: flex;
    align-items: center;
    color: var(--white-cl);
    font-weight: 400;
    font-size: 12px; }
header .box_header .flex_right ul li a img {
    width: 23px; }
header .box_header .flex_right ul li a i {
    font-size: 20px;
    color: var(--white-cl); }
header .box_header .flex_right ul li a p {
    padding-left: 5px;
    line-height: 16px; }
header .box_header .flex_right ul .tracuu img {
    width: 35px; }
header .box_header .flex_right ul .contact {
    border-radius: 5px; }
header .box_header .flex_right ul .contact a {
    padding: 3px 5px; }
header .box_header .flex_right ul .contact a img {
    width: 20px;
    height: 20px; }
header .box_header .flex_right ul .contact a p {
    font-size: 12px;
    line-height: 12px; }
header div, header span, header applet, header object, header iframe,
header h1, header h2, header h3, header h4, header h5, header h6, header p, header blockquote, header pre,
header a, header abbr, header acronym, header address, header big, header cite, header code,
header del, header dfn, header em, header img, header ins, header kbd, header q, header s, header samp,
header small, header strike, header strong, header sub, header sup, header tt, header var,
header b, header u, header i, header center,
header dl, header dt, header dd, header ol, header ul, header li,
header fieldset, header form, header label, header legend,
header table, header caption, header tbody, header tfoot, header thead, header tr, header th, header td,
header article, header aside, header canvas, header details, header embed,
header figure, header figcaption, header footer, header header, header hgroup,
header menu, header nav, header output, header ruby, header section, header summary,
header time, header mark, header audio, header video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: "Roboto", sans-serif; }
header ol, header ul {
    list-style: none; }
header blockquote, header q {
    quotes: none; }
header blockquote:before, header blockquote:after,
header q:before, header q:after {
    content: '';
    content: none; }
header table {
    border-collapse: collapse;
    border-spacing: 0; }
header img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
    width: auto;
    max-width: 100%;
    height: auto; }
header a {
    text-decoration: none; }
header .cf:after {
    content: "";
    clear: both;
    display: block; }
header h1, header h2, header h3, header h4, header h5, header h6 {
    font-weight: 700; }

.scroll {
    position: fixed;
    z-index: 9999999999999999999999999999999;
    left: 0px;
    width: 100%;
    animation-name: scroll;
    animation-duration: 0.5s; }

@media (max-width: 1024px) {
    header .box_header .flex_right {
        width: 10%; }
    header .box_header .flex_right .phone, header .box_header .flex_right .maps, header .box_header .flex_right .tracuu, header .box_header .flex_right .login {
        display: none; }
    header .box_header .flex_right ul {
        justify-content: flex-end; }
    header .box_header .flex_right ul li p {
        display: none; }
    header .box_header .flex_center {
        width: 70%;
        max-width: 70%; }
    header .box_header .flex_center .box_category {
        display: none; }
    header .box_header .flex_center .search {
        width: 100%; }
    header .box_header .logo {
        width: 15%;
        max-width: 15%; } }
@media (max-width: 500px) {
    header .box_header .logo {
        width: 25%;
        max-width: 25%; }
    header .box_header .flex_center {
        padding: 0px 5px 0px 10px;
        width: 65%;
        max-width: 65%; }
    header .box_header .flex_center .search .load-data {
        padding: 15px 10px; }
    header .box_header .flex_center .search .load-data .box_pr .img {
        width: 35%;
        padding: 0px 10px 0px 0px;
        margin-bottom: 10px; }
    header .box_header .flex_center .search .load-data .box_pr .content {
        width: 63%; }
    header .box_header .flex_center .search .load-data .box_pr .content .price {
        flex-direction: column;
        align-items: flex-start; }
    header .box_header .flex_center .search .load-data .box_pr .content .price p {
        font-weight: bold; }
    header .box_header .flex_center .search .load-data .box_pr .content .title h2 {
        font-size: 12px;
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden; }
    header .box_header .flex_center .search .load-data .box_pr .content .title b {
        font-size: 12px;
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden; }
    header .box_header .flex_right ul li a img {
        width: 30px; } }

/*# sourceMappingURL=header.css.map */