@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Light.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Light.woff") format("woff");

    font-weight: 300;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Italic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Italic.woff") format("woff");

    font-weight: normal;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-LightItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-LightItalic.woff") format("woff");

    font-weight: 300;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Italic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Italic.woff") format("woff");

    font-weight: normal;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Light.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Light.woff") format("woff");

    font-weight: 300;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-LightItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-LightItalic.woff") format("woff");

    font-weight: 300;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Medium.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Medium.woff") format("woff");

    font-weight: 500;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-UltraLight.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-UltraLight.woff") format("woff");

    font-weight: 100;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue.woff") format("woff");

    font-weight: normal;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Medium.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Medium.woff") format("woff");

    font-weight: 500;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-UltraLight.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-UltraLight.woff") format("woff");

    font-weight: 100;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue.woff") format("woff");

    font-weight: normal;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Bold.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Bold.woff") format("woff");

    font-weight: bold;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-UltraLightItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-UltraLightItalic.woff") format("woff");

    font-weight: 100;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-UltraLightItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-UltraLightItalic.woff") format("woff");

    font-weight: 100;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-Bold.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-Bold.woff") format("woff");

    font-weight: bold;

    font-style: normal;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-BoldItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-BoldItalic.woff") format("woff");

    font-weight: bold;

    font-style: italic;

    font-display: swap

}



@font-face {

    font-family: "Helvetica Neue";

    src: url("../fonts/custom/HelveticaNeue-BoldItalic.woff2") format("woff2"), url("../fonts/custom/HelveticaNeue-BoldItalic.woff") format("woff");

    font-weight: bold;

    font-style: italic;

    font-display: swap

}



@-webkit-keyframes zoomIn {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    50% {

        opacity: 1

    }

}



@keyframes zoomIn {

    0% {

        opacity: 0;

        -webkit-transform: scale3d(.3, .3, .3);

        transform: scale3d(.3, .3, .3)

    }



    50% {

        opacity: 1

    }

}



@-webkit-keyframes pulse {

    0% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1)

    }



    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05)

    }



    to {

        -webkit-transform: scaleX(1);

        transform: scaleX(1)

    }

}



@keyframes pulse {

    0% {

        -webkit-transform: scaleX(1);

        transform: scaleX(1)

    }



    50% {

        -webkit-transform: scale3d(1.05, 1.05, 1.05);

        transform: scale3d(1.05, 1.05, 1.05)

    }



    to {

        -webkit-transform: scaleX(1);

        transform: scaleX(1)

    }

}



@keyframes spin {

    to {

        transform: rotate(360deg)

    }

}



@keyframes blink {

    0% {

        opacity: 1

    }



    50% {

        opacity: 0

    }



    100% {

        opacity: 1

    }

}



@keyframes shake-anim {

    0% {

        transform: rotate(0) scale(1) skew(1deg)

    }



    10%,

    30% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)

    }



    20%,

    40% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)

    }



    100%,

    50% {

        -moz-transform: rotate(0) scale(1) skew(1deg)

    }

}



@keyframes rotate {

    from {

        transform: rotate(0)

    }



    to {

        transform: rotate(360deg)

    }

}



@keyframes fadeup {

    from {

        opacity: 0;

        transform: translateX(-20px)

    }



    to {

        opacity: 1;

        transform: translateX(0)

    }

}



@keyframes pulse-animation {

    0% {

        transform: scale3d(1, 1, 1);

        opacity: 0

    }



    10% {

        transform: scale3d(1.1, 1.1, 1.1);

        opacity: 1

    }



    100% {

        transform: scale3d(1.6, 1.6, 1.6);

        opacity: 0

    }

}



@keyframes border-animation {

    0% {

        transform: scale3d(0.6, 0.6, 0.6);

        opacity: 0

    }



    20% {

        transform: scale3d(1.2, 1.2, 1.2);

        opacity: 1

    }



    100% {

        transform: scale3d(1.4, 1.4, 1.4);

        opacity: 0

    }

}



@keyframes skeleton {



    0%,

    100% {

        opacity: 1

    }



    50% {

        opacity: .1

    }

}



.loader {

    --cell-size: 52px;

    --cell-spacing: 1px;

    --cells: 3;

    --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));

    display: flex;

    flex-wrap: wrap;

    width: var(--total-size);

    height: var(--total-size)

}



.cell {

    flex: 0 0 var(--cell-size);

    margin: var(--cell-spacing);

    background-color: rgba(0, 0, 0, 0);

    box-sizing: border-box;

    border-radius: 4px;

    animation: 1.5s ripple ease infinite

}



.cell.d-1 {

    animation-delay: 100ms

}



.cell.d-2 {

    animation-delay: 200ms

}



.cell.d-3 {

    animation-delay: 300ms

}



.cell.d-4 {

    animation-delay: 400ms

}



.cell:nth-child(1) {

    --cell-color: #00FF87

}



.cell:nth-child(2) {

    --cell-color: #0CFD95

}



.cell:nth-child(3) {

    --cell-color: #17FBA2

}



.cell:nth-child(4) {

    --cell-color: #23F9B2

}



.cell:nth-child(5) {

    --cell-color: #30F7C3

}



.cell:nth-child(6) {

    --cell-color: #3DF5D4

}



.cell:nth-child(7) {

    --cell-color: #45F4DE

}



.cell:nth-child(8) {

    --cell-color: #53F1F0

}



.cell:nth-child(9) {

    --cell-color: #60EFFF

}



@keyframes ripple {

    0% {

        background-color: rgba(0, 0, 0, 0)

    }



    30% {

        background-color: var(--cell-color)

    }



    60% {

        background-color: rgba(0, 0, 0, 0)

    }



    100% {

        background-color: rgba(0, 0, 0, 0)

    }

}



.inset-0 {

    inset: 0

}



.pointer {

    cursor: pointer

}



.z--1 {

    z-index: -1

}



.z-1 {

    z-index: 1

}



.z-2 {

    z-index: 2

}



.z-3 {

    z-index: 3

}



.isolate {

    isolation: isolate

}



.ovf-hidden {

    overflow: hidden

}



.square {

    aspect-ratio: 1/1

}



:root {

    --max-width: min(1300px, calc(100% - 30px));

    --max-padding: 1fr;

    --line: 3;

    --primary-color: #0047ab;

    --secondary-color: #f8891b;

    --1: #fff;

    --2: #f5f5f5;

    --3: #e2e2e2;

    --4: #c3c3c3;

    --5: #8e8e8e;

    --6: #2f2f2f;

    --7: #151515;

    --8: #000;

    --font-family: "Helvetica Neue"

}



::-webkit-scrollbar {

    width: 7px;
    height: 7px;

    position: fixed;

    right: 0;

    top: 0;

    bottom: 0;

    opacity: .5

}



::-webkit-scrollbar-track {

    background: #fff

}



::-webkit-scrollbar-thumb {

    background-color: var(--primary-color);

    border-radius: 5px

}



template {

    display: none !important

}



body {

    top: 0 !important;

    margin: 0;

    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

    font-family: var(--font-family);

    font-size: 14px;

    background: #f5f6fa

}



button {

    all: unset;

    box-sizing: border-box

}



img {

    height: auto;

    max-width: 100%;

    -o-object-fit: cover;

    object-fit: cover;

    display: inline-block;

}



img.lazy {

    display: block !important;

    opacity: 0

}



img:not(.initial) {

    transition: opacity 1s

}



img:not([src]) {

    visibility: hidden

}



img:is(.loaded, .error) {

    opacity: 1

}



a,

input,

textarea {

    outline: none;

    padding: 0

}



input[type=number] {

    -webkit-appearance: textfield;

    -moz-appearance: textfield;

    appearance: textfield

}



input[type=number]::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0

}



input[type=number]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0

}



.wrap-content {

    display: grid;

    width: 100% !important;

    grid-column: main;

    grid-template-columns: [main-start] var(--max-padding) [content-start] var(--max-width) [content-end] var(--max-padding) [main-end]

}



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

    grid-column: content

}



.wrap-content>.fw {

    grid-column: main

}



.pagination {

    --bs-pagination-color: var(--primary-color);

    --bs-pagination-hover-color: var(--primary-color);

    --bs-pagination-active-bg: var(--primary-color);

    --bs-pagination-active-border-color: var(--primary-color);

    margin: 20px 0 0 0 !important

}



.pagination .page-item .page-link {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%

}



:is(.title-main, .title-detail) {

    text-align: center;

    margin-bottom: clamp(15px, 2.4390243902vw, 30px)

}



:is(.title-main, .title-detail) :is(span, h1, h2, h3, h4, h5) {

    font: 500 clamp(16px, 2.0325203252vw, 25px)/1.24 var(--font-family);

    letter-spacing: -0.01em;

    text-transform: uppercase;

    color: var(--7);

    margin-bottom: 0;

    display: flex;

    align-items: center;

    gap: 11px

}



:is(.title-main, .title-detail) :is(span, h1, h2, h3, h4, h5)::before {

    content: "";

    display: block;

    width: 3px;

    height: 22px;

    background: var(--secondary-color)

}



.time-main {

    color: #999;

    margin-bottom: .75rem

}



.time-main i {

    margin: 3px 7px 0 0;

    vertical-align: top

}



.time-main span {

    display: inline-block;

    vertical-align: top

}



.share {

    background: rgba(128, 128, 128, .15);

    border-radius: 5px;

    line-height: normal;

    margin-top: 15px;

    padding: 17px 15px 10px

}



.share b {

    display: block;

    margin-bottom: 5px

}



.footer-top {

    padding-top: clamp(20px, 4.8780487805vw, 60px);

    padding-bottom: clamp(20px, 3.2520325203vw, 40px)

}



.footer-top .footer-content {

    flex: 1 1 min(100%, 300px)

}



.footer-top .footer-menu {

    flex: 1 1 min(100%, 100px)

}



.footer-top .footer-chinhsach {

    flex: 1 1 min(100%, 185px)

}



.footer-top .footer-hotro {

    flex: 1 1 min(100%, 150px)

}



.footer-top .footer-follow {

    flex: 1 1 min(100%, 235px)

}



.footer-title {

    font: 500 16px/1.375 var(--font-family);

    color: var(--6);

    margin-bottom: 10px

}



.footer-listview_item {

    font: 400 15px/2 var(--font-family);

    color: var(--6)

}



.footer-powered {

    padding: 22px 0 32px

}



.footer-powered p:last-child {

    margin-bottom: 0

}



#footer-map {

    height: 500px;

    position: relative

}



#footer-map iframe {

    height: 100% !important;

    left: 0 !important;

    position: absolute !important;

    top: 0 !important;

    width: 100% !important

}



.text-split {

    -webkit-box-orient: vertical;

    -webkit-line-clamp: var(--line);

    box-orient: vertical;

    line-clamp: var(--line);

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    height: calc(var(--line)*1lh)

}



.scale-img {

    display: block;

    overflow: hidden

}



.scale-img img {

    transition: all .3s;

    transform: scale(1)

}



:is([class*=_item]:hover .scale-img, .scale-img:hover)>img,

:is([class*=_item]:hover .scale-img, .scale-img:hover) picture>img {

    transition: all .3s;

    transform: scale(1.1)

}



[class*=-xemthem] {

    transition: all .6s;

    position: relative;

    overflow: hidden

}



[class*=-xemthem]::before {

    transition: all .6s;

    content: "";

    z-index: -1;

    position: absolute;

    inset: 0;

    background-image: linear-gradient(20deg, var(--bg, transparent) 50%, var(--xemthem-color, var(--primary-color)) 50%);

    background-size: 600%

}



[class*=-xemthem]:hover {

    color: #fff;

    transform: translateX(0.5rem)

}



[class*=-xemthem]:hover::before {

    background-position: 100%

}



.transition {

    transition: all .3s

}



.cart-fixed {

    color: #fff !important;

    z-index: 10

}



.cart-fixed i {

    font-size: 20px

}



.cart-fixed span {

    background: var(--primary-color);

    border-radius: 100%;

    color: #fff;

    font-size: 11px;

    height: 25px;

    line-height: 25px;

    position: absolute;

    right: -5px;

    text-align: center;

    top: 0;

    width: 25px

}



.a2a_kit .a2a_svg {

    height: 30px;

    line-height: 30px;

    width: 30px

}



.qty-pro {

    flex: 0 0 100px !important

}



.skeleton :is([class*="-pic "], [class*="-title "], [class*="-desc "], [class*="-content "], [class*="-price "]) {

    background: #e4e4e4;

    border-radius: 5px;

    animation: skeleton 2s ease-in-out infinite;

    color: rgba(0, 0, 0, 0);

    -webkit-text-fill-color: rgba(0, 0, 0, 0)

}



.skeleton .pagination-ajax {

    filter: grayscale(1);

    position: relative

}



.skeleton .pagination-ajax::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 3

}



.skeleton img {

    opacity: 0

}



.htmx-indicator:not(.htmx-request) {

    display: none !important

}



.aos-overflow {

    overflow: hidden !important;

    overflow: clip visible !important

}



.search-form {

    background-color: #f5f6fa !important

}



@media(min-width: 992px) {

    .search-form {

        width: 37.5%

    }

}



.search-form input:is(:focus, :focus-visible, :focus-within) {

    border: unset !important;

    outline: unset;

    box-shadow: unset

}



.search-form button {

    border-radius: 100%;

    width: 42px;

    color: #fff;

    font-size: 16px

}



.menu-res {

    background: var(--primary-color);

    z-index: 100;

    display: none

}



.menu-res .header-cart img {

    filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(8%) hue-rotate(353deg) brightness(104%) contrast(104%)

}



.search-res {

    position: relative

}



.search-res input[type=checkbox]:checked+label {

    border-radius: 50%;

    background-color: #fff;

    color: var(--primary-color)

}



.search-res input[type=checkbox]:checked+label+.search-grid {

    opacity: 1;

    grid-template-columns: 1fr

}



.search-res .search-grid {

    display: grid;

    grid-template-columns: 0fr;

    opacity: 0;

    position: absolute;

    right: 0;

    top: 50px;

    z-index: 2;

    width: -moz-max-content;

    width: max-content

}



.grid-sp {

    display: grid;

    --gap: clamp(8px, calc(12 / 1230 * 100vw), 12px);

    gap: var(--gap);

    grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - var(--gap) * 4) / 5), 1fr));

    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.15))

}



.sp_item {

    padding: 6px;

    border-radius: 10px;

    background: var(--1)

}



.sp_item:hover .sp-btn {

    translate: 0 0

}



.sp-pic {

    padding: clamp(8px, 1.3008130081vw, 16px);

    margin-bottom: clamp(4px, .6504065041vw, 8px)

}



.sp-pic .scale-img {

    border-radius: 10px

}



.sp-info {

    border-radius: 0 0 10px 10px;

    padding: 0 clamp(5px, .8130081301vw, 10px)

}



.sp-title {

    font: 500 14px/1.57143 var(--font-family);

    color: var(--6);

    margin-bottom: clamp(6px, .9756097561vw, 12px)

}



.sp-props {

    height: 28px;

    margin-bottom: clamp(6px, .9756097561vw, 12px)

}



.sp-props span {

    display: block;

    white-space: nowrap;

    border-radius: 10px;

    font: 400 14px/2 var(--font-family);

    color: var(--1);

    padding: 0 6px;

    background: var(--secondary-color)

}



.sp-price {

    margin-bottom: clamp(7px, 1.1382113821vw, 14px)

}



.sp-price .text-danger {

    font: 500 clamp(14px, 1.3821138211vw, 17px)/1.2941176471 var(--font-family);

    color: #d21414

}



.sp-price .text-secondary {

    font: 400 clamp(12px, 1.2195121951vw, 15px)/1.4666666667 var(--font-family);

    text-decoration: line-through;

    color: var(--5)

}



.sp-btn {

    font: 400 15px/1.46667 var(--font-family);

    text-transform: uppercase;

    color: var(--1);

    translate: 120% 0;

    background-color: var(--primary-color);

    padding: clamp(4px, .6504065041vw, 8px) clamp(8px, 1.3008130081vw, 16px)

}



header {

    z-index: 101

}



.header-top {

    position: relative;

    z-index: 2;

    padding: clamp(6px, .9756097561vw, 12px)

}



.header-top marquee {

    font: 500 15px var(--font-family);

    color: var(--primary-color)

}



.header-top-menu>div>a {

    font: 400 14px var(--font-family);

    color: var(--6)

}



.header-top-menu>div>a:hover {

    color: var(--primary-color)

}



.header-top-menu .list-group {

    transform: perspective(600px) rotateX(-90deg);

    transform-origin: 0 0 0;

    visibility: hidden;

    opacity: 0;

    transition: all .3s;

    width: 250px

}



.header-top-menu>div:hover>.list-group {

    transform: perspective(600px) rotateX(0deg);

    visibility: visible;

    opacity: 1

}



.header-bottom {

    padding: 6px 0

}





.header-bottom-group span.text-dark {

    font: 400 clamp(12px, 1.1382113821vw, 14px)/1.2142857143 var(--font-family);

    color: var(--6)

}



.header-bottom-group span.jj-text-secondary {

    font: 700 clamp(16px, 1.6260162602vw, 20px)/1.2 var(--font-family);

    color: var(--secondary-color)

}



.header-cart {

    font: 400 14px var(--font-family);

    color: var(--6)

}



.wrap-slide {

    padding: 11px 0 0 0

}



@media(min-width: 1200px) {

    .slide-slide {

        width: 76.9230769231%;

        margin: 0 0 0 auto

    }





    .header-bottom .logo {

        width: 22.3076923077%;

        display: flex;

        align-items: center;

        justify-content: center;

    }

}



.wrap-tieuchi {

    margin: clamp(11px, 1.8699186992vw, 23px) 0 clamp(22px, 3.5772357724vw, 44px)

}



.tieuchi-slide .embla__slide {

    gap: 2px;

    border-radius: 10px;

    overflow: hidden

}



.tieuchi-slide .embla__slide:hover .tieuchi-title {

    translate: 0 -5px;

}



.tieuchi-pic {

    flex: 0 0 min(70px, 22.5080385852%);

    background: var(--secondary-color)

}



.tieuchi-info {

    flex: 1 1 auto;

    background: var(--primary-color)

}



.tieuchi-title {

    font: 500 clamp(14px, 1.3821138211vw, 17px)/1.2352941176 var(--font-family);

    letter-spacing: -0.01em;

    text-transform: uppercase;

    color: var(--1);

    translate: 0 0;

    transition: all .3s;

}



.wrap-sp_paging {

    margin: clamp(22px, 3.5772357724vw, 44px) 0

}



.sp_paging-title-main {

    margin-bottom: 20px

}



.sp_paging-title-main h2 {

    font: 500 clamp(16px, 2.0325203252vw, 25px)/1.24 var(--font-family);

    letter-spacing: -0.01em;

    text-transform: uppercase;

    color: var(--7);

    margin-bottom: 0;

    display: flex;

    align-items: center;

    gap: 10px

}



.sp_paging-title-main h2::before {

    content: "";

    display: block;

    width: 3px;

    height: 22px;

    background: var(--secondary-color)

}



.wrap-slide_banner {

    margin: clamp(22px, 3.5772357724vw, 44px) 0

}



.wrap-brandnb {

    margin: clamp(20px, 3.6585365854vw, 45px) 0 clamp(20px, 4.6341463415vw, 57px)

}



.brandnb-title-main {

    font: 700 clamp(16px, 2.0325203252vw, 25px)/1.24 var(--font-family);

    text-transform: uppercase;

    text-align: center;

    color: var(--1);

    padding: clamp(7px, 1.1382113821vw, 14px) clamp(27px, 4.3902439024vw, 54px);

    background: var(--primary-color);

    border-radius: 0 0 10px 10px;

    margin-bottom: clamp(17px, 2.7642276423vw, 34px)

}



.wrap-brandnb-slide {

    padding: clamp(22px, 3.5772357724vw, 44px) clamp(15px, 2.1951219512vw, 27px);

    padding-top: 0;

    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.1))

}



.brandnb_item {

    padding-bottom: 33px

}



.brandnb-icon {

    width: min(90%, 235px)

}



.wrap-doitac {

    margin: clamp(20px, 4.6341463415vw, 57px) 0 clamp(20px, 4.3902439024vw, 54px)

}



.doitac-banner {

    flex: 0 0 min(285px, 21.9230769231%)

}



.wrap-doitac-slide {

    flex: 1 1 auto;

    padding: clamp(14px, 2.0325203252vw, 25px);

    display: flex;

    flex-direction: column;

    justify-content: center

}



.tintuc-pic {

    margin-bottom: clamp(9px, 1.4634146341vw, 18px)

}



.tintuc-title {

    font: 500 17px var(--font-family);

    text-transform: uppercase;

    color: var(--7)

}



.tintuc-desc {

    font: 400 14px/1.71429 var(--font-family);

    color: var(--6);

    margin-top: clamp(8px, 1.3008130081vw, 16px)

}



.wrap-ttlistnb {

    margin: clamp(20px, 4.3902439024vw, 54px) 0 clamp(20px, 6.5040650407vw, 80px)

}



.grid-ttlistnb {

    display: grid;

    --gap: clamp(8px, calc(22 / 1230 * 100vw), 22px);

    gap: var(--gap);

    grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - var(--gap) * 1) / 2), 1fr))

}



.grid-ttlistnb .tintuc-title {

    text-transform: none;

    --line: 2

}



.grid-ttlistnb .tintuc-desc {

    display: none

}



.grid-ttlistnb .tintuc-pic img {

    aspect-ratio: 310/210 !important;

    width: 100%;

    height: auto;

    -o-object-fit: cover;

    object-fit: cover

}



.ttlistnb-slide {

    width: 100%;

    margin-bottom: clamp(10px, 1.6260162602vw, 20px)

}



.ttlistnb-slide .embla__slide {

    flex: 0 0 auto

}



.ttlistnb-btn {

    font: 500 15px var(--font-family);

    text-transform: uppercase;

    text-align: center;

    color: var(--1);

    border-radius: 7px;

    padding: clamp(5px, .8130081301vw, 10px) clamp(10px, 1.6260162602vw, 20px);

    background-color: var(--primary-color)

}



input[type=radio]:checked+.ttlistnb-btn {

    background: var(--secondary-color)

}

.nav.nav-tabs {
    flex-wrap: nowrap;
    overflow: auto clip;
    white-space: nowrap;
}