:root {
    --color-main: #F17135;
    --color-sub: #446C27;
    --color-text: #756A61;
    --font-main: "Be Vietnam Pro";
    --font-f1: "Anton";
    --font-f2: "1FTV-VIP-Brigast";
    --font-f3: "1FTV-HF-Gesco";
    --font-f4: "1FTV-VIP-Briquete"
}

body {
    font-family: var(--font-main);
    font-size: 14px;
    color: var(--color-text);
    position: relative;
    margin: auto;
    top: 0 !important
}

[x-cloak] {
    display: none !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.5
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px
}

::-webkit-scrollbar-track {
    box-shadow: rgba(0, 0, 0, .1) 0 0 6px inset
}

::-webkit-scrollbar-thumb {
    background: var(--color-main)
}

img {
    max-width: 100%;
    vertical-align: top;
    display: inline-block;
    height: auto !important
}

* {
    box-sizing: border-box
}

a {
    text-decoration: none !important
}

.info-main {
    padding: 30px 0
}

.hidden {
    display: none
}

.h-card,
.hidden-seo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

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

.scale-img img {
    transition: .8s
}

.scale-img:hover img.w-100 {
    transform: scale(1.1)
}

.text-split {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 3
}

.transition {
    transition: .3s
}

.p-relative {
    position: relative
}

.share {
    padding: clamp(6px, .9230769231vw, 12px);
    line-height: normal;
    background: rgba(128, 128, 128, .15);
    margin-top: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 10px
}

.pagination {
    margin: 30px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.pagination li a,
.pagination li button,
.pagination li span {
    outline: 0 !important;
    cursor: pointer;
    border-radius: 5px !important;
    border: 1px solid #cacaca;
    background: #fff;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4d4d4d;
    font-size: 14px;
    padding: 5px;
    box-shadow: none !important;
    line-height: 1
}

.pagination li a:hover,
.pagination li button:hover,
.pagination li span:hover {
    color: var(--color-main);
    border-color: var(--color-main)
}

.pagination li.page-item.active>* {
    background: var(--color-main);
    border-color: var(--color-main);
    color: #fff
}

.myPaging>[class*=load-] {
    min-height: 1px
}

.myPaging.is-loading {
    position: relative
}

.wrap-main {
    margin-block: clamp(30px, 4.6153846154vw, 60px)
}

.wrap-content {
    max-width: 1230px;
    padding: 0 15px;
    margin: 0 auto
}

.social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0 10px
}

.social li {
    display: inline-block
}

.social li:hover img,
.social li:hover svg {
    transform: rotateY(360deg);
    transition: .5s linear
}

.notify-phone {
    animation: 1s ease-in-out 0s infinite normal none running notifyPhone
}

@keyframes notifyPhone {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

.search-inline {
    display: flex;
    align-items: center;
    gap: 5px;
    max-width: 275px;
    width: 100%;
    border-radius: 50px;
    border: none;
    background: #fff;
    padding: 5px
}

.search-inline p {
    width: 30px;
    height: 30px;
    cursor: pointer;
    text-align: center;
    margin: 0;
    color: var(--color-main);
    display: flex;
    align-items: center;
    justify-content: center
}

.search-inline input {
    outline: 0;
    padding: 0;
    border: 0;
    background: 0 center;
    text-indent: 12px;
    font-size: 14px;
    flex: 1 1 0%;
    min-width: 0;
    height: 100%
}

.search-inline input::-webkit-input-placeholder {
    color: #7d7d7d
}

#google_translate_element {
    clear: both;
    text-align: right;
    display: none;
    width: auto !important
}

.skiptranslate {
    display: none !important
}

.ggdich-box {
    position: relative;
    z-index: 101
}

.ggdich-box__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    padding: 5px;
    border: solid 1px;
    border-radius: 6px
}

.ggdich-box__flag-wrap {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.ggdich-box__flag-wrap img {
    width: 100%;
    height: 100% !important;
    object-fit: cover
}

.ggdich-box__cur {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px
}

.ggdich-box__arrow {
    opacity: .75;
    transition: transform .22s;
    flex-shrink: 0
}

.ggdich-box__arrow.open {
    transform: rotate(180deg)
}

.ggdich-box__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
    overflow: hidden;
    min-width: 160px;
    z-index: 99999
}

.ggdich-box__item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #1a1a2e;
    transition: background .15s
}

.ggdich-box__item.active {
    background: #eef2ff;
    font-weight: 500;
    color: var(--color-main)
}

.ggdich-box__item.active .ggdich-box__dot {
    opacity: 1
}

.ggdich-box__flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0
}

.ggdich-box__flag img {
    width: 100%;
    height: 100% !important;
    object-fit: cover
}

.ggdich-box__label {
    flex: 1
}

.ggdich-box__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-main);
    opacity: 0;
    flex-shrink: 0
}

.flex-menu {
    display: flex;
    justify-content: space-between
}

.menu-res {
    display: none
}

.menu {
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: .3s
}

.menu_sticky {
    position: sticky
}

.menu_fixed {
    position: fixed
}

.menu_hide {
    transform: translateY(-100%)
}

.menu_show {
    transform: translateY(0)
}

.menu_bg {
    background: var(--color-main)
}

.menu-box {
    position: relative;
    isolation: isolate;
    padding-block: clamp(5px, calc(8/1200*100vw), 8px);
    padding-inline: clamp(10px, calc(13/1200*100vw), 13px);
    padding-left: clamp(20px, calc(30/1200*100vw), 30px);
    display: flex;
    align-items: center;
    gap: clamp(15px, calc(45/1200*100vw), 45px)
}

.menu-box:after {
    content: '';
    mask-image: url(../images/custom/menu-mask-ng.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    background: var(--color-main);
    position: absolute;
    inset: 0;
    z-index: -1
}

.menu-box__bg {
    inset: -6px;
    z-index: -1;
    position: absolute;
    background: rgba(212, 0, 0, .1);
    padding-block: clamp(5px, calc(8/1200*100vw), 8px);
    padding-inline: clamp(10px, calc(13/1200*100vw), 13px);
    mask-image: url(../images/custom/menu-mask-ng.png);
    mask-repeat: no-repeat;
    mask-size: 100% 100%
}

.menu ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.menu-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 0%;
    justify-content: space-between;
    position: relative
}

.menu ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    text-transform: uppercase;
    padding: 5px;
    position: relative;
    isolation: isolate
}

.menu-main>li>a:after {
    content: '';
    border-radius: 50px;
    background: #ffb204;
    width: 20px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px / 2);
    opacity: 0;
    transition: .2s
}

.menu ul li a.active:after,
.menu ul li:hover>a:after {
    opacity: 1
}

.menu_dmsp .menu_lvl {
    position: absolute;
    width: 270px;
    opacity: 0;
    visibility: hidden;
    top: 100%;
    background: var(--color-main);
    border-radius: 0;
    box-shadow: rgba(0, 0, 0, .08) 0 4px 20px;
    transform: translateY(12px);
    padding: 0;
    z-index: 110
}

.menu_dmsp .menu_lvl ul {
    max-height: 450px;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    list-style: none
}

.menu_dmsp .menu_lvl ul li {
    position: static
}

.menu_dmsp .menu_lvl ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: none;
    font-weight: 500;
    color: #fff;
    font-size: clamp(14px, calc(15/1200*100vw), 15px);
    text-align: left;
    padding: 10px;
    border-left: 3px solid transparent;
    transition: .15s;
    gap: 8px
}

.menu_dmsp .menu_lvl ul li a::after {
    display: none
}

.menu_dmsp .menu_lvl ul li a .menu-arrow {
    transition: transform .2s;
    opacity: .6;
    color: #fff;
    flex-shrink: 0
}

.menu_dmsp .menu_lvl ul li a.active,
.menu_dmsp .menu_lvl ul li a:hover {
    border-left-color: #ffb204;
    text-decoration: none !important
}

.menu_dmsp .menu_lvl ul li a.active .menu-arrow,
.menu_dmsp .menu_lvl ul li a:hover .menu-arrow {
    transform: translateX(3px);
    opacity: 1
}

.menu_dmsp .menu_lvl ul li:hover>a {
    border-left-color: #ffb204;
    text-decoration: none !important
}

.menu_dmsp .menu_lvl ul li:hover>a .menu-arrow {
    transform: translateX(3px);
    opacity: 1
}

.menu_dmsp .menu_lvl3,
.menu_dmsp .menu_lvl4 {
    left: calc(100% + 0px);
    top: 0
}

.menu_dmsp .menu_lvl2 ul li:hover>.menu_lvl3 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0) !important
}

.menu_dmsp .menu_lvl3 ul li:hover>.menu_lvl4 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0) !important
}

.menu_dmsp:hover>.menu_lvl2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0)
}

.spacer {
    margin-block: clamp(40px, calc(80/1200*100vw), 80px);
}

.title-main-product h2 {
    margin-bottom: 40px;
    font-size: 44px;
    text-transform: uppercase;
    background: linear-gradient(#fff3b0, #f2d36b, #caa43b) text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #e0c15a;
    text-align: center
}

.title-album h2 {
    font-size: 55px;
    color: #fce26c;
    text-transform: uppercase
}

.title-album p {
    text-transform: uppercase;
    font-size: 17px;
    color: #fff
}

.title-bottom {
    border-bottom: 1px solid #0051c6;
    margin-bottom: 20px
}

.title-bottom span {
    font-size: 18px;
    color: #069e34;
    text-transform: uppercase
}

.title-detail {
    margin-bottom: 20px
}

.title-detail h1 {
    font-size: clamp(22px, 2.30769vw, 30px);
    font-weight: 700;
    color: var(--color-main);
    margin-bottom: 0
}

.product-list {
    position: relative;
    overflow: hidden
}

.product-list a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .455)
}

.ds-list {
    position: absolute;
    z-index: 99;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    color: #fff
}

.ds-list h3 {
    font-size: 32px;
    color: #fff
}

.splide.procategory:not(.is-overflow) .splide__list {
    justify-content: center
}

.notify-phone {
    animation: 1s ease-in-out 0s infinite normal none running notifyPhone
}

@keyframes notifyPhone {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

.category-nav {
    margin-bottom: 30px
}

.category-nav__item {
    text-transform: uppercase;
    display: inline-block;
    vertical-align: top;
    padding-block: 7px;
    padding-inline: clamp(10px, 1.53846vw, 20px);
    transition: .2s;
    border: 1px solid #195138;
    background-color: #fff;
    border-radius: 40px;
    color: #195138;
    font-size: 16px
}

.category-nav__item.active {
    background: #195138;
    color: #fff
}

.scroll {
    cursor: pointer
}

.scrollToTop {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 98;
    top: auto;
    width: 40px;
    height: 40px;
    display: flex;
    background-image: initial;
    background-position: 0 0;
    background-size: initial;
    background-repeat: initial;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    text-decoration: none;
    transition: .3s ease-out;
    transform: translateY(-20px);
    background-color: color-mix(in srgb, var(--color-main) 10%, #fff);
    border-radius: 7px;
    cursor: pointer
}

.scrollToTop svg {
    width: 100%;
    height: 100%;
    transform: rotate(270deg)
}

.scrollToTop svg path {
    stroke: var(--color-main)
}

.scrollToTop:hover {
    background: var(--color-main)
}

.scrollToTop:hover svg path {
    stroke: color-mix(in srgb, var(--color-main) 10%, #fff)
}

.footer-infos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 30px;
}

.finfo-item {
    max-width: 350px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.finfo-item__pic {
    width: clamp(50px, calc(70/1200*100vw), 70px);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: solid 1px #F6E2C0;
    color: #F6E2C0;
}

.finfo-item__info {
    flex: 1 1 0%;
}

.finfo-item__info p {
    margin-bottom: 0;
    font-size: clamp(14px, calc(15/1200*100vw), 15px);
}

.finfo-item__info p:first-child {}

.finfo-item__info p:last-child {
    font-weight: 700;
}

.footer-map {
    overflow: hidden;
    border-radius: 8px;
    border: solid 1px #F6F3D7;
    padding: 10px;
}

.footer-map__inner {
    border-radius: 4px;
    overflow: hidden;
}

.footer-map iframe {

    display: block;
    width: 100%;
    height: 350px
}

.form-group,
.form-group-select {
    position: relative;
    margin-bottom: 15px
}

.statistic {
    display: flex;
    justify-content: center;
    gap: 10px
}

.form-group input,
.form-group textarea {
    width: 100%;
    transition: .1s;
    resize: vertical;
    border-radius: 5px;
    border: 1px solid #cacaca;
    background: #fff !important;
    box-shadow: none !important
}

.form-group.novalidate input,
.form-group.novalidate textarea {
    border: 1px solid #e2e2e2 !important
}

.form-group input {
    height: 50px
}

.form-group input.date-picker {
    padding-right: 35px
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: #7799d0 !important
}

.form-group label,
.form-group-select>label {
    position: absolute;
    left: 12px;
    top: 12px;
    color: #777;
    transition: .1s;
    pointer-events: none;
    background-color: transparent;
    margin: 0;
    line-height: 1.5
}

.form-group>span {
    position: absolute;
    right: 12px;
    top: 12px;
    transition: .1s;
    pointer-events: none;
    display: inline-block;
    max-width: 20px
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--main-color);
    outline: 0
}

.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:focus+label,
.form-group textarea:not(:placeholder-shown)+label,
.form-group-select>label {
    top: -10px;
    font-size: 12px;
    background: #fff;
    padding: 0 5px;
    left: 8px;
    transform: none
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 2px + .75rem);
    margin-bottom: 0
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 2px + .75rem);
    margin: 0;
    overflow: hidden;
    opacity: 0
}

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 2px + .75rem);
    padding: .375rem .75rem;
    overflow: hidden;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem
}

.custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + .75rem);
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 .25rem .25rem 0
}

.modal {
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, .7)
}

.modal-header {
    border-bottom: 1px solid #d1d5db;
    background: rgba(249, 250, 251, .6)
}

.modal-title {
    font-weight: 600;
    letter-spacing: .05em;
    color: #111827
}

.modal-footer {
    border-top: 1px solid #d1d5db;
    background: rgba(249, 250, 251, .6)
}

.modal-btn--close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: #fff;
    background: red;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 1;
    overflow: hidden;
    border-radius: 50%
}

.invalid-feedback {
    font-size: 13px
}

.invalid-feedback svg {
    width: 20px
}

.form-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px
}

.form-btn--submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-main);
    color: #fff;
    border-radius: 40px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 17px
}

.breadCrumbs {
    background: color-mix(in srgb, var(--color-main) 5%, #fff)
}

.breadcrumb {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0 !important;
    margin: 0
}

.breadcrumb li {
    display: flex;
    align-items: center;
    gap: 15px
}

.breadcrumb li a {
    flex: 1 1 0%;
    color: #666;
    transition: .2s
}

.breadcrumb li a:hover {
    color: var(--color-main)
}

.breadcrumb li.active a {
    font-weight: 500;
    color: var(--color-main)
}

.breadcrumb li svg {
    width: 7px;
    color: #666;
    margin-top: 2px
}

.box-toc {
    background: color-mix(in srgb, currentColor 3%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: clamp(6px, calc(12/1200*100vw), 12px);
    margin-bottom: clamp(15px, calc(20/1200*100vw), 20px);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)
}

.box-toc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: clamp(6px, calc(12/1200*100vw), 12px);
    padding-inline: clamp(10px, calc(20/1200*100vw), 20px);
    background: color-mix(in srgb, currentColor 6%, transparent);
    cursor: pointer;
    border-bottom: 1px solid transparent;
    user-select: none
}

.box-toc__header:hover {
    background: color-mix(in srgb, currentColor 9%, transparent)
}

.box-toc__title {
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px
}

.box-toc__title i {
    font-size: 20px
}

.box-toc__toggle-icon {
    color: color-mix(in srgb, currentColor 55%, transparent);
    transition: transform .28s
}

.box-toc__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .28s, opacity .2s
}

.box-toc--open .box-toc__body {
    max-height: 1000px;
    opacity: 1;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent)
}

.box-toc--open .box-toc__toggle-icon {
    transform: rotate(180deg)
}

.box-toc__list {
    list-style: none;
    padding: 14px 0;
    margin: 0;
    transform: translateY(-6px);
    transition: transform .28s
}

.box-toc--open .box-toc__list {
    transform: translateY(0)
}

.box-toc__item {
    margin: 0;
    position: relative
}

.box-toc__link {
    display: block;
    padding: 10px 22px;
    color: color-mix(in srgb, currentColor 60%, transparent);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.5;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s
}

.box-toc__link:hover {
    color: var(--color-main) !important;
    background: color-mix(in srgb, var(--color-main) 8%, transparent) !important
}

.box-toc__link--active {
    color: var(--color-main);
    font-weight: 600;
    background: color-mix(in srgb, var(--color-main) 8%, transparent);
    border-left-color: var(--color-main)
}

.box-toc__item--h2 .box-toc__link {
    padding-left: 12px;
    font-weight: 600;
    color: color-mix(in srgb, currentColor 82%, transparent);
    font-size: 15px
}

.box-toc__item--h3 .box-toc__link {
    padding-left: clamp(12px, 1.6923076923vw, 22px);
    font-size: 14px
}

.box-toc__item--h4 .box-toc__link {
    padding-left: 32px;
    font-style: italic
}

.news-detail-layout {
    display: grid;
    grid-template-columns: 1fr 25.3846153846%;
    gap: clamp(15px, 1.5384615385vw, 20px);
    align-items: start
}

.news-detail-main {
    min-width: 0
}

.news-detail-title h1 {
    margin: 0;
    color: #333;
    font-size: clamp(20px, calc(30/1200*100vw), 30px);
    font-weight: 700;
    line-height: 1.25
}

.news-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 8px 0 16px;
    color: #888
}

.news-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.news-detail-sidebar {
    display: grid;
    gap: 30px
}

.news-detail-share {
    margin-top: 20px
}

.content-main p {
    margin-top: 0;
    margin-bottom: clamp(14px, 1.3846153846vw, 20px);
    color: color-mix(in srgb, currentColor 78%, transparent);
    text-align: left
}

.content-main p:first-of-type {
    font-size: 1.1em;
    color: color-mix(in srgb, currentColor 92%, transparent)
}

.content-main h1,
.content-main h2,
.content-main h3,
.content-main h4,
.content-main h5,
.content-main h6 {
    color: currentColor;
    font-weight: 700;
    line-height: 1.35;
    margin-top: clamp(28px, 2.7692307692vw, 36px);
    margin-bottom: clamp(12px, 1.2307692308vw, 16px)
}

.content-main h1:first-child,
.content-main h2:first-child,
.content-main h3:first-child,
.content-main h4:first-child,
.content-main h5:first-child,
.content-main h6:first-child {
    margin-top: 0
}

.content-main h1 {
    font-size: clamp(23px, 2.3076923077vw, 30px);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    padding-bottom: clamp(12px, 1.0769230769vw, 14px);
    margin-bottom: clamp(28px, 2.7692307692vw, 36px)
}

.content-main h2 {
    font-size: clamp(19px, 1.8461538462vw, 24px);
    position: relative;
    padding-left: 14px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    padding-bottom: 8px
}

.content-main h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 3px;
    background: var(--color-main);
    border-radius: 2px
}

.content-main h3 {
    font-size: clamp(17px, 1.5384615385vw, 20px);
    margin-top: clamp(24px, 2.4615384615vw, 32px)
}

.content-main h4 {
    font-size: clamp(15px, 1.2307692308vw, 16px);
    margin-top: clamp(18px, 1.8461538462vw, 24px);
    color: color-mix(in srgb, currentColor 55%, transparent);
    font-weight: 600
}

.content-main strong {
    color: currentColor;
    font-weight: 700
}

.content-main em {
    color: color-mix(in srgb, currentColor 70%, transparent)
}

.content-main mark {
    background: rgba(var(--color-main-rgb), .12);
    color: currentColor;
    padding: 1px 5px;
    border-radius: 3px
}

.content-main hr {
    border: none;
    border-top: 1px dashed color-mix(in srgb, currentColor 18%, transparent);
    margin: clamp(32px, 3.6923076923vw, 40px) 0
}

.content-main ol,
.content-main ul {
    margin-top: 0;
    margin-bottom: clamp(20px, 2.1538461538vw, 28px);
    padding-left: 20px
}

.content-main ul {
    list-style: none
}

.content-main ul li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 18px;
    line-height: 1.75
}

.content-main ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .7em;
    width: 5px;
    height: 5px;
    background: var(--color-main);
    border-radius: 50%
}

.content-main ol {
    list-style-type: decimal
}

.content-main ol li {
    margin-bottom: 8px;
    padding-left: 4px;
    line-height: 1.75
}

.content-main ol li::marker {
    color: var(--color-main);
    font-weight: 600
}

.content-main li>ol,
.content-main li>ul {
    margin-top: 8px;
    margin-bottom: 8px
}

.content-main a {
    color: var(--color-main);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-main-rgb), .25);
    transition: border-color .15s
}

.content-main a:hover {
    border-bottom-color: var(--color-main)
}

.content-main a img {
    max-width: 100%;
    height: auto !important;
    border-radius: 6px
}

.content-main img {
    max-width: 100%;
    height: auto !important;
    display: block;
    margin: clamp(24px, 2.7692307692vw, 32px) auto;
    border-radius: 6px
}

.content-main figure {
    margin: clamp(24px, 2.7692307692vw, 32px) 0
}

.content-main figcaption {
    font-size: clamp(12.5px, 1.0769230769vw, 13.5px);
    color: color-mix(in srgb, currentColor 42%, transparent);
    font-style: italic;
    text-align: center;
    margin-top: 8px
}

.content-main blockquote {
    border-left: 3px solid var(--color-main);
    background: color-mix(in srgb, currentColor 5%, transparent);
    padding: 16px 20px;
    margin: clamp(24px, 2.7692307692vw, 32px) 0;
    font-style: italic;
    color: color-mix(in srgb, currentColor 68%, transparent);
    border-radius: 0 6px 6px 0
}

.content-main blockquote p {
    margin-bottom: 0
}

.content-main blockquote p+p {
    margin-top: 12px
}

.content-main code {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: color-mix(in srgb, currentColor 35%, #f43f5e 65%);
    font-family: Consolas, Monaco, monospace;
    font-size: .875em;
    padding: 2px 6px;
    border-radius: 3px;
    word-break: break-word
}

.content-main pre {
    background: #111827;
    color: #f9fafb;
    padding: 20px 24px;
    border-radius: 6px;
    overflow-x: auto;
    margin: clamp(24px, 2.7692307692vw, 32px) 0;
    line-height: 1.6
}

.content-main pre code {
    background: 0 0;
    color: inherit;
    padding: 0;
    font-size: clamp(12px, 1.0769230769vw, 13px)
}

.content-main table {
    width: 100%;
    margin: clamp(28px, 3.0769230769vw, 36px) 0;
    font-size: clamp(13px, 1.1538461538vw, 14.5px);
    border-collapse: collapse;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 6px;
    overflow-x: auto;
    display: block
}

.content-main table th {
    background: color-mix(in srgb, currentColor 6%, transparent);
    color: color-mix(in srgb, currentColor 78%, transparent);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid color-mix(in srgb, currentColor 18%, transparent);
    font-size: .8125em;
    letter-spacing: .04em;
    text-transform: uppercase
}

.content-main table td {
    padding: 12px 16px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    color: color-mix(in srgb, currentColor 68%, transparent);
    line-height: 1.6
}

.content-main table tr:last-child td {
    border-bottom: none
}

.content-main table tr:nth-child(even) td {
    background: color-mix(in srgb, currentColor 4%, transparent)
}

.content-main table tr:hover td {
    background: color-mix(in srgb, currentColor 6%, transparent)
}

.content-main iframe {
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 6px;
    margin: clamp(24px, 2.7692307692vw, 32px) auto
}

.sidebox-list {
    display: grid;
    gap: 14px
}

.sidebox-item {
    display: grid;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #ececec;
    color: var(--color-text)
}

.sidebox-photo {
    display: block;
    overflow: hidden;
    aspect-ratio: 1/1
}

.sidebox-photo img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform .25s
}

.sidebox-item:hover .sidebox-photo img {
    transform: scale(1.06)
}

.sidebox-info {
    min-width: 0
}

.sidebox-name {
    color: var(--color-text);
    font-size: clamp(14px, 1.1538461538vw, 15px)
}

.sidebox-item:hover .sidebox-name {
    color: var(--color-main);
    text-decoration: underline
}

.sidebox-date {
    display: block;
    margin-top: 6px;
    font-size: clamp(12px, 1vw, 13px);
    color: #999;
    font-style: italic
}

.sidebox-group {
    padding: 10px;
    border: 1px solid #d8dee5;
    background: #fff
}

.sidebox-group__title {
    font-weight: 700;
    color: var(--color-main);
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 0
}

.sidebox-group__header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #ddd;
    margin: 0 0 14px
}

.sidebox-group__list {
    margin: 0;
    padding: 0;
    list-style: none
}

.sidebox-group__item {
    position: relative;
    margin-bottom: 5px
}

.sidebox-group__item:last-child {
    margin-bottom: 0
}

.sidebox-group__item--has-child>.sidebox-group__link {
    padding-right: 30px
}

.sidebox-group__item--has-child>.sidebox-group__link .sidebox-group__toggle {
    display: block
}

.sidebox-group__item.opened>.sidebox-group__link>.sidebox-group__toggle {
    background: var(--color-main);
    border-color: var(--color-main)
}

.sidebox-group__item.opened>.sidebox-group__link>.sidebox-group__toggle::after,
.sidebox-group__item.opened>.sidebox-group__link>.sidebox-group__toggle::before {
    background: #fff
}

.sidebox-group__item.opened>.sidebox-group__link>.sidebox-group__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg) scale(0)
}

.sidebox-group__link {
    color: var(--color-text);
    position: relative;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-transform: capitalize;
    transition: all .2s ease;
    text-decoration: none;
    padding: 6px 12px
}

.sidebox-group__link:hover {
    color: var(--color-main)
}

.sidebox-group__link--active,
.sidebox-group__link.sidebox-group__link--active {
    background: color-mix(in srgb, var(--color-main) 6%, #fff);
    color: var(--color-main) !important
}

.sidebox-group__link--active::before,
.sidebox-group__link.sidebox-group__link--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: var(--color-main);
    border-radius: 0 4px 4px 0
}

.sidebox-group__toggle {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    transition: all .2s ease;
    display: none;
    z-index: 2
}

.sidebox-group__toggle:hover {
    background: #f8fafc;
    border-color: #cbd5e1
}

.sidebox-group__toggle::after,
.sidebox-group__toggle::before {
    background: #64748b;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all .25s ease
}

.sidebox-group__toggle::before {
    width: 8px;
    height: 2px
}

.sidebox-group__toggle::after {
    width: 2px;
    height: 8px
}

.sidebox-group__sublist {
    margin: 4px 0 8px 12px;
    padding: 0;
    list-style: none;
    border-left: 1px solid #e2e8f0;
    display: none
}

.sidebox-group__sublist .sidebox-group__link {
    font-size: 13.5px;
    font-weight: 500;
    padding: 6px 30px 6px 12px
}

.sidebox-group__sublist--level3 {
    border-left: 1px dashed #cbd5e1
}

.sidebox-group__sublist--level3 .sidebox-group__link {
    font-size: 13px;
    font-weight: 400
}

.info-contact {
    background: url(../images/bg_contact.webp) 0 0/cover no-repeat
}

.ds-contact {
    width: 43%;
    color: #fff;
    text-align: center
}

.ds-contact h2 {
    text-transform: uppercase;
    font-size: 48px
}

.ds-contact p {
    font-size: 22px
}

.company {
    margin-top: 20px
}

.hotline-setting {
    background: #1a5236;
    padding: 10px 0;
    border-radius: 30px;
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .737)
}

.hotline-setting i {
    font-size: 20px
}

.hotline-setting span {
    font-size: 18px
}

.wr-letter {
    width: 54%;
    background: #000;
    padding: 40px 30px
}

.title-letter {
    color: #fff;
    text-align: center
}

.title-letter span {
    text-transform: uppercase;
    font-size: 48px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .63);
    color: rgba(255, 255, 255, 0)
}

.title-letter h2 {
    position: relative;
    z-index: 999;
    text-transform: uppercase;
    font-size: 32px;
    margin-top: -16px;
    box-shadow: #000 0 -10px 30px;
    background: rgba(0, 0, 0, .47)
}

.contact-flex {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 20px
}

.contact-map {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100% !important
}

.contact-map iframe {
    width: 100%;
    height: 100%
}

.contact-form {
    margin-top: 20px;
    background: #f5f5f5;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px
}

.contact-inputs {
    display: flex;
    gap: clamp(10px, 1.1538461538vw, 15px);
    margin-bottom: clamp(10px, 1.1538461538vw, 15px)
}

.contact-inputs>* {
    flex: 1 1 0%;
    min-width: 0
}

.sort-select {
    display: flex;
    justify-content: end;
    margin: 20px 0;
    position: relative
}

.sort-select .click-sort {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    padding: 6px 10px 6px 8px;
    margin: 0
}

.sort-select-main {
    display: grid;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, .2) 0 4px 6px;
    position: absolute;
    padding: 0 7px;
    top: 30px;
    right: 0;
    width: 160px;
    z-index: 2
}

.sort-select-main p {
    border-bottom: 1px solid #f1f1f1;
    margin: 0;
    order: 2
}

.sort-select-main p:has(.check) {
    order: 1
}

.sort a {
    color: #000;
    line-height: 17px;
    padding: 11px 3px;
    display: block;
    cursor: pointer
}

.sort a.check i {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    transform: scale(var(--ggs, 1));
    width: 22px;
    height: 16px;
    border: 2px solid transparent;
    border-radius: 100px;
    vertical-align: middle
}

.sort a.check i::after {
    content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    left: 3px;
    top: -4px;
    width: 6px;
    height: 10px;
    border-width: 0 2px 2px 0;
    border-style: solid;
    transform-origin: left bottom;
    transform: rotate(45deg)
}

.sort-select .sort-show {
    padding-right: 12px;
    position: relative
}

.wr-album-about {
    margin: 0 0 0 auto
}

.ds-about {
    position: relative
}

.tt-ds {
    position: absolute;
    line-height: 50px;
    background: #fce26c;
    text-align: center;
    width: 200px;
    font-size: 30px;
    color: var(--color-main);
    transform: rotate(-90deg);
    left: -75px;
    top: 50px
}

.title-about span {
    font-size: 24px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block
}

.title-about h2 {
    font-size: 30px;
    color: var(--color-main);
    text-transform: uppercase;
    margin: 0
}

.album-about {
    border-radius: 10px;
    overflow: hidden;
    display: block
}

.view-all {
    display: block;
    width: 150px;
    line-height: 40px;
    border: 1px solid #f18130;
    background: #f18130;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase
}

.view-all:hover {
    background: #d1600f;
    color: #fff
}

.view-all a,
.view-all:hover a {
    color: #fff
}

.wr-statistical {
    margin-top: 22px;
    padding: 2px
}

.wr-statistical .splide__track {
    padding: 2px
}

.statistical-card {
    text-align: center;
    background: #fff8df;
    padding: 10px;
    border-radius: 10px;
    overflow: hidden
}

.statistical-card__icon {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff8df;
    border-radius: 50%;
    margin: 0 auto 10px
}

.statistical-card__img {
    border-radius: 50%
}

.statistical-card__body {
    min-width: 0
}

.statistical-card__number {
    display: block;
    color: var(--color-main);
    font-size: 28px;
    line-height: 1.1
}

.statistical-card__name {
    display: block;
    margin-top: 6px;
    color: #444;
    line-height: 1.35
}

.slogan-about {
    font-size: 24px;
    max-width: 590px;
    margin-top: 20px
}

.bg-about {
    position: relative;
    bottom: 20px
}

.welcome {
    position: absolute;
    right: 20px;
    top: 10%;
    font-size: 48px;
    -webkit-text-stroke: 1px #fce26c;
    text-transform: uppercase;
    width: 70px;
    text-align: center
}

.info-tc {
    margin-top: -80px
}

.info-criteria {
    padding: 24px 0
}

.info-criteria .wrap-content {
    overflow: hidden
}

.slider-tc .splide__track {
    overflow: visible
}

.criteria-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 112px;
    height: 100%;
    padding: 18px;
    border: 1px solid rgba(109, 2, 1, .08);
    border-radius: 8px;
    background: #fff;
    transition: background-color .2s, border-color .2s, box-shadow .2s
}

.criteria-card:hover {
    border-color: rgba(109, 2, 1, .22);
    background: #fffdf4;
    box-shadow: rgba(49, 15, 8, .13) 0 16px 34px
}

.criteria-card__icon {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    padding: 10px;
    border-radius: 8px;
    background: #fce26c;
    transition: background-color .2s, box-shadow .2s
}

.criteria-card:hover .criteria-card__icon {
    background: #6d0201;
    box-shadow: rgba(255, 255, 255, .22) 0 0 0 1px inset
}

.criteria-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.criteria-card__body {
    min-width: 0
}

.criteria-card__body h3 {
    margin-bottom: 6px;
    color: #6d0201;
    font-size: 16px;
    line-height: 1.3;
    transition: color .2s
}

.criteria-card:hover .criteria-card__body h3 {
    color: #9a0301
}

.criteria-card__body p {
    -webkit-line-clamp: 2;
    margin-bottom: 0;
    color: #555;
    line-height: 1.5
}

.tc-item {
    position: relative;
    margin-left: 40px
}

.tc-item__info {
    background: url(../images/item-tc.png) 0 0/100% 100% no-repeat;
    padding: 40px 20px 40px 60px;
    color: #fff
}

.tc-item__info h3 {
    font-size: 16px
}

.tc-item__info:hover h3 {
    color: #ff0
}

.tc-item__info p {
    margin-bottom: 0
}

.img-item-tc {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-30px);
    background: linear-gradient(to right, #f5e7a3 0, #f3dc82 25%, #f2cf5c 50%, #f3dc82 75%, #f5e7a3 100%);
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0
}

.info-dt {
    padding: 50px 0;
    background: url(../images/bg_dt.png) 0 0/cover no-repeat
}

.wr-qt {
    position: relative;
    padding: 100px 0 50px
}

.flex-qt {
    display: flex;
    justify-content: space-between;
    gap: 20px
}

.item-dt {
    box-shadow: rgba(0, 0, 0, .15) 0 0 4px;
    background: #fff;
    margin: 2px;
    padding: 10px
}

.box-qt {
    background: url(../images/item_qt.png) 0 0/100% 100% no-repeat;
    width: 184px;
    height: 184px;
    position: relative;
    padding: 30px;
    text-align: center;
    border-radius: 50%;
    z-index: 1
}

.box-qt::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #b89933;
    border-radius: 100%;
    transition-property: all;
    transition-timing-function: cubic-bezier(.8, 0, .2, 1);
    transition-duration: .3s
}

.box-qt:hover::before {
    width: 100%;
    height: 100%
}

.box-qt h3 {
    color: #fff;
    font-size: 16px
}

.qt-item__pic {
    margin-bottom: 10px
}

.box-qt:nth-child(1) {
    top: 60px
}

.box-qt:nth-child(2) {
    top: 50px
}

.box-qt:nth-child(3) {
    top: -30px
}

.box-qt:nth-child(4) {
    top: -90px
}

.box-qt:nth-child(5) {
    top: -70px
}

.numb-qt {
    position: absolute;
    width: 72px;
    height: 72px;
    background: url(../images/numb.png) 0 0/100% 100% no-repeat;
    color: #0051c6;
    font-size: 25px;
    line-height: 60px;
    right: -30px;
    top: -20px
}

.info-product {
    background: #fff;
    padding: 20px 0
}

.title-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border: 1px solid rgba(159, 4, 6, .12);
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(159, 4, 6, .06), rgba(252, 226, 108, .16), #fff)
}

.title-list h2 {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    font-size: 35px;
    color: var(--color-main);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1.1
}

.title-list h2::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 999px;
    background: #fce26c
}

.home-product-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.home-product-cats__item {
    display: flex
}

.home-product-cats__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid rgba(159, 4, 6, .18);
    border-radius: 999px;
    color: var(--color-main);
    background: rgba(255, 255, 255, .86);
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s
}

.home-product-cats__link.active,
.home-product-cats__link:hover {
    color: #fff;
    border-color: var(--color-main);
    background: var(--color-main);
    box-shadow: rgba(159, 4, 6, .18) 0 8px 18px
}

.home-product-result {
    min-height: 260px
}

.home-product-ajax-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px
}

.menu-showcase {
    position: relative
}

.menu-showcase__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 34px
}

.menu-showcase__summary {
    max-width: 490px;
    margin-left: auto
}

.menu-showcase__summary p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #3f332d
}

.menu-showcase__body {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch
}

.menu-showcase__feature {
    position: relative;
    min-height: 100%;
    border-radius: 28px;
    overflow: hidden;
    display: block;
    background: #3d120e;
    color: #fff;
    box-shadow: rgba(77, 18, 11, .16) 0 22px 45px
}

.menu-showcase__feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(28, 13, 7, .05) 0, rgba(28, 13, 7, .82) 100%);
    z-index: 1
}

.menu-showcase__feature-media {
    height: 100%
}

.menu-showcase__feature-media img {
    width: 100%;
    object-fit: cover;
    min-height: 560px;
    height: 100% !important
}

.menu-showcase__feature-content {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2
}

.menu-showcase__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    text-transform: uppercase;
    letter-spacing: .14em
}

.menu-showcase__feature-content h3 {
    margin: 14px 0 10px;
    font-size: 34px;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase
}

.menu-showcase__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 146px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #fce26c;
    color: var(--color-main);
    font-size: 15px;
    text-transform: uppercase
}

.menu-showcase__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px
}

.menu-showcase__card {
    position: relative;
    min-height: 260px;
    padding: 26px;
    border-radius: 28px;
    overflow: hidden;
    background: url(../images/item-pro.png) center center/100% 100% no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    isolation: isolate;
    transform: translateY(0);
    transition: transform .3s, box-shadow .3s
}

.menu-showcase__card:hover {
    transform: translateY(-6px);
    box-shadow: rgba(73, 15, 11, .18) 0 20px 32px
}

.menu-showcase__card:nth-child(2n) {
    top: 30px
}

.menu-showcase__card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 193, 52, .18) 0, rgba(255, 255, 255, .03) 100%);
    z-index: -1
}

.menu-showcase__card-numb {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 44px;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .45)
}

.menu-showcase__card-media {
    width: 132px;
    height: 132px;
    flex: 0 0 132px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid rgba(255, 255, 255, .16)
}

.menu-showcase__card-media img {
    width: 100%;
    object-fit: cover;
    height: 100% !important
}

.menu-showcase__card-content {
    position: relative;
    z-index: 1
}

.menu-showcase__card-content h3 {
    margin: 0 0 10px;
    font-size: 26px;
    line-height: 1.2;
    color: #fff;
    text-transform: uppercase
}

.menu-showcase__card-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84)
}

.info-pro {
    background: url(../images/bg_pro.webp) 0 0/cover no-repeat;
    padding: 50px 0
}

.grid-pro {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px 10px;
    position: relative
}

.box-product {
    position: relative
}

.box-product:nth-child(2n) {
    display: flex;
    justify-content: end
}

.box-product-in {
    background: url(../images/item-pro.png) 0 0/100% 100% no-repeat;
    max-width: 285px;
    padding: 30px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    transform: scale(.95);
    transition: 1s
}

.box-product-in:hover {
    transform: scale(1)
}

.box-product-in h3 {
    font-size: 20px;
    color: #fff
}

.box-product-in span {
    font-size: 40px;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .565);
    color: rgba(255, 255, 255, 0)
}

.pro {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.box-product:nth-child(1)::after {
    content: "";
    position: absolute;
    left: 285px;
    top: 50%;
    background: url(../images/pro1.png) no-repeat;
    width: 119px;
    height: 64px
}

.box-product:nth-child(2)::after {
    content: "";
    position: absolute;
    right: 285px;
    top: 50%;
    background: url(../images/pro2.png) no-repeat;
    width: 119px;
    height: 64px
}

.box-product:nth-child(3)::after {
    content: "";
    position: absolute;
    left: 285px;
    bottom: 30%;
    background: url(../images/pro3.png) no-repeat;
    width: 119px;
    height: 64px
}

.box-product:nth-child(4)::after {
    content: "";
    position: absolute;
    right: 285px;
    bottom: 30%;
    background: url(../images/pro4.png) no-repeat;
    width: 119px;
    height: 64px
}

.wr-qt .line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    animation: 10s linear 0s infinite normal none running stroke
}

@keyframes stroke {
    0% {
        stroke-dasharray: 4, 4;
        stroke-dashoffset: 600
    }

    100% {
        stroke-dasharray: 4, 4;
        stroke-dashoffset: 0
    }
}

@keyframes bgSwing {
    0% {
        background-position: left center
    }

    50% {
        background-position: 10px center
    }

    100% {
        background-position: left center
    }
}

.ring-ring {
    animation: 1s ease-in-out 0s infinite normal none running ringring
}

.ring-ring-hover:hover {
    animation: 1s ease-in-out 0s infinite normal none running ringring
}

.criteria-img:hover img {
    transform: rotateY(360deg);
    transition: .5s linear
}

@keyframes star {
    0% {
        transform: rotate(0) scale(0)
    }

    50% {
        transform: rotate(180deg) scale(1.5)
    }

    100% {
        transform: rotate(360deg) scale(0)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes ringring {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

.floating-box {
    display: inline-block;
    animation: 2s ease-in-out 0s infinite normal none running floatUpDown
}

@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20px)
    }
}

.splide.slideshow {
    aspect-ratio: 1920/770;
    overflow: hidden;
    position: relative;
    background: #f1f1f1
}

.splide.slideshow img {
    width: 100%;
    height: auto
}

.splide:not(.is-initialized) .splide__list {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap
}

.splide:not(.is-initialized) .splide__slide {
    flex-shrink: 0;
    width: 100%
}

.ds-slider {
    position: absolute;
    z-index: 99;
    left: calc(50% - 600px);
    top: 50%;
    transform: translateY(-50%);
    max-width: 660px
}

.ds-slider h3 {
    color: #fff;
    font-size: 48px;
    text-transform: uppercase
}

.ds-slider p {
    font-size: 21px;
    color: #fff
}

.sl-contact {
    background: #069e34;
    line-height: 58px;
    border-radius: 30px;
    padding: 0 10px;
    max-width: 360px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.sl-contact:hover {
    background: #0051c6
}

.sl-contact a {
    background: linear-gradient(#fff3b0, #f2d36b, #caa43b) text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    text-transform: uppercase
}

.start-animate {
    animation: 1.75s linear 0s infinite normal none running star;
    position: absolute;
    width: 50px
}

@keyframes star {
    0% {
        transform: rotate(0) scale(0)
    }

    50% {
        transform: rotate(180deg) scale(1.5)
    }

    100% {
        transform: rotate(360deg) scale(0)
    }
}

.logo-footer {
    position: relative
}

.start-animate1 {
    top: -8px;
    left: calc(50% - 27px)
}

.start-animate2 {
    bottom: 33px;
    left: calc(50% + 4px)
}

.start-animate3 {
    bottom: 33px;
    right: calc(50% + 4px)
}

.blog-item {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .29) 0 0 5px;
    margin: 2px
}

.grid-service {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    position: relative
}

.service-item {
    overflow: hidden
}

.service-item__info {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.service-item__info h3 {
    font-size: 45px;
    color: #fff;
    margin: 0
}

.service-item__info:hover {
    background: rgba(241, 129, 48, .18)
}

.info-kh {
    padding: 540px 0 40px;
    background: url(../images/bg_kh.webp) 0 0/cover no-repeat;
    margin-top: -500px
}

.kh-item {
    text-align: center;
    color: #fff
}

.kh-item__pic {
    border: 5px solid #f18130;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    margin: 0 auto 20px;
    max-width: 150px
}

.kh-item__info h3 {
    font-size: 20px;
    background: url(../images/ds.png) center top no-repeat;
    padding-top: 50px
}

.kh-item__info p {
    font-size: 15px
}

.kh-item__info p.address {
    color: #dbdbdb
}

.splide__pagination.splide__pagination--ltr {
    gap: 8px;
    padding: 0
}

.splide__pagination.splide__pagination--ltr .splide__pagination__page {
    width: 9px;
    height: 9px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(109, 2, 1, .24);
    opacity: 1;
    transform: none;
    transition: width .25s, background-color .25s, box-shadow .25s
}

.splide__pagination.splide__pagination--ltr .splide__pagination__page.is-active {
    width: 28px;
    background: #6d0201;
    box-shadow: rgba(109, 2, 1, .22) 0 4px 10px;
    transform: none
}

.splide__pagination.splide__pagination--ltr .splide__pagination__page:hover {
    background: var(--color-main)
}

.info-custommer {
    padding: 52px 0;
    background: #fff
}

.home-customer-contact {
    --home-customer-slider-height: 450px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: stretch
}

.home-customer-contact__col {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.home-customer-contact .title-main {
    margin-bottom: 18px
}

.home-customer-contact .slider-kh {
    flex: 1 1 0%;
    min-width: 0;
    height: var(--home-customer-slider-height)
}

.home-customer-contact .splide__track {
    height: 100%;
    overflow: hidden;
    border-radius: 8px
}

.home-customer-contact .splide__list {
    height: 100%
}

.home-customer-contact .splide__slide {
    height: 100%
}

.home-customer-contact .splide__pagination {
    bottom: 0;
    justify-content: flex-start
}

.home-contact-form {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding: 24px;
    border: 1px solid rgba(109, 2, 1, .1);
    border-radius: 8px;
    background: #fffdf4;
    box-shadow: rgba(49, 15, 8, .08) 0 12px 28px
}

.home-contact-form .contact-input {
    margin-bottom: 12px
}

.home-contact-form .contact-input input,
.home-contact-form .contact-input textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid rgba(109, 2, 1, .14);
    border-radius: 8px;
    background: #fff;
    color: #222;
    line-height: 1.4;
    transition: border-color .2s, box-shadow .2s, background-color .2s
}

.home-contact-form .contact-input textarea {
    min-height: 116px;
    resize: vertical
}

.home-contact-form .contact-input input:focus,
.home-contact-form .contact-input textarea:focus {
    border-color: rgba(109, 2, 1, .45);
    background: #fff;
    box-shadow: rgba(109, 2, 1, .08) 0 0 0 3px;
    outline: 0
}

.home-contact-form .btn {
    border-radius: 8px;
    transition: transform .2s, box-shadow .2s, background-color .2s
}

.home-contact-form .btn:hover {
    transform: translateY(-2px);
    box-shadow: rgba(49, 15, 8, .14) 0 8px 18px
}

.customer-card {
    position: relative;
    height: 100%;
    padding: 28px 24px;
    border: 1px solid rgba(109, 2, 1, .1);
    border-radius: 8px;
    background: #fffdf4;
    box-shadow: rgba(49, 15, 8, .08) 0 12px 28px;
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s
}

.customer-card:hover {
    border-color: rgba(109, 2, 1, .24);
    background: #fff8df;
    box-shadow: rgba(49, 15, 8, .13) 0 18px 38px;
    transform: translateY(-3px)
}

.customer-card__quote {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
    border-radius: 8px;
    color: #6d0201;
    background: #fce26c
}

.customer-card__text {
    -webkit-line-clamp: 3;
    margin-bottom: 10px;
    color: #444;
    font-size: 15px;
    line-height: 1.55
}

.customer-card__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(109, 2, 1, .08)
}

.customer-card__avatar {
    flex: 0 0 74px;
    width: 74px;
    height: 74px;
    overflow: hidden;
    border: 3px solid #fce26c;
    border-radius: 50%;
    background: #fff
}

.customer-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.customer-card__user h3 {
    margin-bottom: 0;
    color: #6d0201;
    font-size: 16px;
    line-height: 1.35
}

.info-social {
    padding: 40px 0;
    background: var(--color-main)
}

.info-album {
    padding: 40px 0 0;
    background: url(../images/bg_album.png) left bottom no-repeat
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative
}

.album-grid__item {
    position: relative;
    display: block;
    overflow: hidden
}

.album-grid__item .scale-img {
    border-radius: 5px
}

.album-grid__item h3 {
    text-align: center;
    color: #333;
    font-size: 15px;
    font-weight: 700;
    margin-top: 10px
}

.album-grid__item h3:hover {
    color: red
}

.news-detail-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    margin: 20px 0
}

.news-detail-gallery a {
    border: 1px solid #f1f1f1;
    padding: 10px;
    border-radius: 8px
}

.album-item__name {
    color: #333;
    font-size: 16px;
    text-align: center;
    margin-top: 10px
}

.floating-actions {
    position: fixed;
    right: 18px;
    bottom: 60%;
    z-index: 999;
    display: grid;
    justify-items: end;
    gap: 10px
}

.floating-actions .cart {
    position: relative;
    right: auto;
    bottom: auto
}

.booking-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--color-main);
    box-shadow: rgba(159, 4, 6, .28) 0 8px 22px;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s, background-color .2s
}

.booking-trigger:hover {
    color: var(--color-main);
    background: #fce26c;
    transform: translateY(-2px)
}

.booking-trigger i {
    font-size: 17px
}

#booking .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, .2) 0 24px 70px
}

#booking .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee
}

#booking .modal-title {
    color: var(--color-main);
    text-transform: uppercase
}

#booking .modal-body {
    padding: 20px
}

#booking .title-dl h2 {
    display: none
}

#booking .title-dl p {
    margin: 0 0 18px;
    color: #64748b;
    line-height: 1.6
}

#booking .contact-input {
    margin-bottom: 12px
}

#booking .form-control {
    min-height: 44px;
    border-color: #e1e5ea;
    border-radius: 8px
}

#booking textarea.form-control {
    min-height: 90px
}

.btn-booking {
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 40%;
    border-radius: 50%
}

.btn-booking .icon {
    position: absolute;
    width: 100%;
    height: 100%
}

.btn-booking .icon::after {
    content: "";
    display: block;
    position: absolute;
    inset: -10px;
    background-color: rgba(241, 128, 48, .682);
    animation: 1s cubic-bezier(.24, 0, .38, 1) 0s infinite normal none running pulse-animation;
    z-index: -1;
    border-radius: 50%
}

.btn-booking button {
    position: relative;
    z-index: 99;
    border-radius: 50%;
    font-size: 20px;
    background: #ff0002;
    border-color: #ff0002
}

.btn-booking button:active,
.btn-booking button:focus,
.btn-booking button:hover {
    background: #ff0002;
    border-color: #ff0002;
    outline: 0;
    box-shadow: none
}

.title-dl {
    text-align: center
}

.title-dl h2 {
    color: #f0914b;
    text-transform: uppercase;
    font-size: 40px;
    box-shadow: none
}

.menu-feature-section {
    width: 100%;
    padding: 0;
    background: #fff
}

.menu-feature-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px
}

.menu-card {
    width: 100%;
    text-align: center
}

.menu-card__image {
    width: 100%;
    aspect-ratio: 1/1;
    display: block;
    object-fit: cover;
    border-radius: 10px
}

.menu-card__title {
    margin: 20px 0 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-main);
    text-align: center;
    text-transform: uppercase
}

.menu-card__desc {
    max-width: 380px;
    margin: 0 auto;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    text-align: center
}

.menu-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 144px;
    min-height: 43px;
    margin-top: 14px;
    padding: 10px 30px;
    border-radius: 43px;
    background: #fce26c;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-main);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform .25s, background-color .25s
}

.menu-card__button:hover {
    background: #ffc233;
    transform: translateY(-2px)
}

.social-section {
    width: 100%
}

.social-section__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center
}

.social-section__title {
    margin: 0;
    font-size: 55px;
    font-weight: 400;
    line-height: 1.1;
    color: #fce26c;
    text-align: center;
    text-transform: uppercase
}

.social-section__subtitle {
    margin: 24px 0 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    text-transform: uppercase
}

.social-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 100px;
    margin: 22px auto 0
}

.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.social-item__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-align: center;
    text-transform: capitalize;
    white-space: nowrap
}

.social-item__icon-link {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .25s, opacity .25s
}

.social-item__icon-link:hover {
    transform: translateY(-4px);
    opacity: .9
}

.social-item__icon {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 10px
}

.social-item__icon--tiktok {
    object-fit: cover
}

.social-item__icon--youtube {
    object-fit: cover
}

.social-item__button {
    margin: 20px auto;
    padding: 10px;
    display: block;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fce26c;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    transition: transform .25s, background-color .25s
}

.social-item__button h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-main)
}

.social-item__button:hover {
    background: #ffc233;
    transform: translateY(-3px)
}

.social-item__arrow {
    width: 14px;
    height: 8px;
    display: block;
    background-image: url(../images/down_link.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 auto;
    cursor: pointer
}

.social-item__arrow--up {
    margin-top: 13px
}

.social-item__arrow--down {
    margin-top: 8px;
    transform: rotate(180deg)
}

.name-link a {
    display: none
}

.name-link a:first-child {
    display: block
}

.social-item__button.active {
    display: block
}

.info-news {
    width: 100%;
    padding: 40px 0;
    background: #fff8df
}

.info-video {
    padding: 30px 0
}

.video-showcase {
    position: relative
}

.video-showcase__grid {
    position: relative;
    max-width: 1010px;
    margin: 40px auto 0;
    z-index: 1
}

.video-showcase__grid::after {
    content: "";
    position: absolute;
    left: -40px;
    right: -40px;
    top: -70px;
    height: 50%;
    border: 2px solid var(--color-main);
    border-radius: 20px;
    z-index: -1
}

.video-card {
    position: relative;
    z-index: 99;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    color: #fff;
    background: #2f2017
}

.video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .04) 25%, rgba(0, 0, 0, .72) 100%);
    z-index: 1;
    pointer-events: none
}

.video-card img {
    width: 100%;
    min-height: 100px;
    object-fit: cover;
    height: 100% !important
}

.video-card--featured {
    min-height: 300px;
    border-radius: 16px
}

.video-card--small {
    border-radius: 14px
}

.video-card__content {
    position: absolute;
    right: 14px;
    bottom: 12px;
    left: 14px;
    z-index: 2
}

.video-card__content_name {
    font-size: 15px;
    color: #333;
    text-align: center
}

.video-card__title {
    display: block;
    font-size: 18px;
    color: #fff;
    text-shadow: rgba(0, 0, 0, .4) 0 2px 10px
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .88);
    color: #b31b17;
    transform: translate(-50%, -50%);
    transition: transform .25s, background-color .25s
}

.video-card__play i {
    font-size: 16px;
    transform: translateX(1px)
}

.video-card__play--featured {
    width: 58px;
    height: 58px;
    background: #ef3340;
    color: #fff
}

.video-card__play--featured i {
    font-size: 18px
}

.video-card:hover .video-card__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fce26c;
    color: var(--color-main)
}

.info-news .wrap-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

.home-news-video {
    --home-news-panel-height: 420px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch
}

.home-news-video__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%
}

.title-main--left {
    text-align: left
}

.title-main--left h2,
.title-main--left p {
    text-align: left
}

.newsnb--vertical {
    flex: 1 1 0%;
    min-height: 0;
    padding: 2px
}

.newsnb--vertical .splide__track {
    height: var(--home-news-panel-height) !important
}

.home-news-card {
    padding: 10px;
    border: 1px solid rgba(109, 2, 1, .08);
    border-radius: 8px;
    background: #fff
}

.home-news-card.news-side-item {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    border-bottom: 0
}

.home-news-card .news-side-photo {
    border-radius: 8px
}

.home-video-player {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: var(--home-news-panel-height);
    padding: 14px;
    border: 1px solid rgba(109, 2, 1, .08);
    border-radius: 8px;
    background: #fff;
    box-shadow: rgba(49, 15, 8, .08) 0 10px 24px
}

.home-video-player__frame {
    position: relative;
    display: block;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-text)
}

.home-video-player__thumb {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    transition: transform .35s
}

.home-video-player__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .18);
    transition: background .25s
}

.home-video-player__play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: #fff;
    background: rgba(109, 2, 1, .88);
    transform: translate(-50%, -50%);
    box-shadow: rgba(0, 0, 0, .28) 0 12px 28px
}

.home-video-player__play i {
    margin-left: 4px;
    font-size: 24px
}

.home-video-player__frame:hover .home-video-player__thumb {
    transform: scale(1.05)
}

.home-video-player__frame:hover::after {
    background: rgba(0, 0, 0, .28)
}

.home-video-player__title {
    margin: 14px 0 12px;
    color: #6d0201;
    font-size: 18px;
    line-height: 1.4
}

.home-video-select {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(109, 2, 1, .18);
    border-radius: 8px;
    color: #333;
    background: #fff;
    outline: 0
}

.home-video-select:focus {
    border-color: rgba(109, 2, 1, .42);
    box-shadow: rgba(109, 2, 1, .08) 0 0 0 3px
}

.newsnb .splide__track {
    overflow: hidden
}

.newsnb .splide__list {
    align-items: stretch
}

.newsnb .splide__slide {
    height: auto
}

.info-menu-main {
    padding: 30px 0;
    background: 0 0/cover #ffb200;
    position: relative
}

.f-flipbook {
    display: block;
    position: relative;
    background: url(../images/bg_book.png) center center/100% 100% no-repeat;
    max-width: 1083px;
    padding: 4% 5% 2%;
    margin: 0 auto
}

.f-flipbook .shadow {
    box-shadow: none !important
}

.flipbook {
    max-width: 100%;
    overflow: hidden;
    margin: auto !important
}

.f-flipbook button {
    position: absolute;
    top: 50%;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    background: 0 0;
    width: 55px;
    height: 35px;
    z-index: 0
}

.f-flipbook .turn-next {
    right: -60px
}

.f-flipbook .turn-prev {
    left: -60px;
    transform: rotate(180deg)
}

.flipbook-viewport .page {
    width: 420px;
    height: 645px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 95%
}

.page-wrapper {
    max-width: 420px;
    transition: .5s
}

.flipbook-viewport .page img {
    user-select: none;
    margin: 0
}

.flipbook-viewport .shadow {
    transition: -webkit-box-shadow .5s;
    box-shadow: #ccc 0 0 20px
}

.home-hero {
    position: relative;
    overflow: hidden;
    min-height: 899px;
    background: radial-gradient(circle at 55% 38%, rgba(255, 239, 214, .28) 0, rgba(255, 239, 214, .06) 18%, rgba(0, 0, 0, 0) 38%), linear-gradient(rgba(15, 10, 8, .55) 0, rgba(15, 10, 8, .72) 100%), url(../images/bg_album.png) center center/cover no-repeat
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, .18) 0, rgba(0, 0, 0, .45) 100%);
    pointer-events: none
}

.home-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.home-hero__overlay--dark {
    background: rgba(18, 10, 8, .34)
}

.home-hero__overlay--warm {
    background: radial-gradient(circle at 50% 55%, rgba(245, 201, 150, .32) 0, rgba(245, 201, 150, .08) 20%, rgba(0, 0, 0, 0) 50%);
    mix-blend-mode: screen
}

.home-hero__wrap {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    align-items: center;
    gap: 28px;
    padding-top: 78px;
    padding-bottom: 64px
}

.home-hero__content {
    max-width: 560px;
    color: #fef0df;
    text-shadow: rgba(0, 0, 0, .25) 0 3px 14px
}

.home-hero__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    font-size: clamp(70px, 7vw, 115px);
    line-height: .9;
    background: linear-gradient(90deg, #fff0cb 0, #d8a066 55%, #915633 100%) text;
    -webkit-text-fill-color: transparent;
    transform: translateX(-8px)
}

.home-hero__title {
    margin: 0;
    font-size: clamp(66px, 5.7vw, 96px);
    line-height: .96;
    color: #f4d0a4;
    text-transform: none;
    letter-spacing: .01em
}

.home-hero__subtitle {
    margin: 14px 0 0;
    max-width: 460px;
    font-size: clamp(22px, 2.6vw, 38px);
    line-height: 1.12;
    color: #d9a57a;
    background: linear-gradient(90deg, #ffd59f 0, #9b664d 100%) text;
    -webkit-text-fill-color: transparent
}

.home-hero__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    flex-wrap: wrap
}

.home-hero__button,
.home-hero__link {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-transform: uppercase;
    transition: transform .2s, background-color .2s, color .2s
}

.home-hero__button {
    background: #fce26c;
    color: var(--color-main);
    box-shadow: rgba(0, 0, 0, .18) 0 10px 24px
}

.home-hero__button:hover {
    background: #ffd233;
    transform: translateY(-2px);
    color: #8d0305
}

.home-hero__link {
    border: 1px solid rgba(252, 226, 108, .55);
    color: #fff0cc;
    background: rgba(0, 0, 0, .16);
    backdrop-filter: blur(4px)
}

.home-hero__link:hover {
    background: rgba(252, 226, 108, .14);
    transform: translateY(-2px);
    color: #fff
}

.home-hero__visual {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    justify-content: center
}

.home-hero__frame {
    position: relative;
    z-index: 2;
    width: min(100%, 620px);
    aspect-ratio: .95/1;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .32) 0 24px 60px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .12)
}

.home-hero__fallback,
.home-hero__image {
    width: 100%;
    object-fit: cover;
    display: block;
    height: 100% !important
}

.home-hero__fallback {
    background: radial-gradient(circle at 30% 30%, rgba(252, 226, 108, .35) 0, rgba(252, 226, 108, .35) 10%, transparent 28%), radial-gradient(circle at 60% 40%, rgba(255, 210, 176, .28) 0, rgba(255, 210, 176, .28) 12%, transparent 34%), linear-gradient(135deg, #6b3a22 0, #2c1610 100%)
}

.home-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(0);
    pointer-events: none
}

.home-hero__orb--one {
    width: 340px;
    height: 340px;
    left: 8%;
    top: 12%;
    background: radial-gradient(circle, rgba(236, 225, 201, .22) 0, rgba(236, 225, 201, .08) 55%, rgba(236, 225, 201, 0) 72%);
    opacity: .7
}

.home-hero__orb--two {
    width: 260px;
    height: 260px;
    right: 3%;
    bottom: 10%;
    background: radial-gradient(circle, rgba(255, 220, 177, .24) 0, rgba(255, 220, 177, .08) 48%, rgba(255, 220, 177, 0) 72%);
    opacity: .75
}

.home-hero__content,
.home-hero__frame,
.home-hero__visual,
.home-hero__wrap {
    min-width: 0
}

.home-hero+.info-about {
    margin-top: 0
}

.video-page {
    padding: 12px 0 34px
}

.video-page .title-main {
    margin-bottom: 26px
}

.video-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.video-list-card {
    display: block;
    height: 100%;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, .06) 0 10px 26px;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.video-list-card:hover {
    color: inherit;
    border-color: rgba(184, 32, 37, .24);
    box-shadow: rgba(0, 0, 0, .1) 0 16px 34px;
    transform: translateY(-4px)
}

.video-list-card__media {
    position: relative;
    aspect-ratio: 16/9;
    background: #f3f3f3;
    overflow: hidden
}

.video-list-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s
}

.video-list-card:hover .video-list-card__media img {
    transform: scale(1.055)
}

.video-list-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .46) 100%);
    pointer-events: none
}

.video-list-card__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-list-card__play span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: #b82025;
    box-shadow: rgba(184, 32, 37, .34) 0 10px 22px;
    transition: transform .25s, background .25s
}

.video-list-card:hover .video-list-card__play span {
    background: #94171b;
    transform: scale(1.08)
}

.video-list-card__body {
    padding: 14px 16px 16px
}

.video-list-card__title {
    min-height: 48px;
    margin: 0;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5
}

.video-list-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: #777
}

.video-empty {
    padding: 26px 20px;
    border: 1px dashed rgba(0, 0, 0, .16);
    border-radius: 8px;
    color: #555;
    text-align: center;
    background: #fafafa
}

.menu-page__sort {
    position: relative;
    flex: 0 0 auto
}

.menu-page__sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(159, 4, 6, .18);
    border-radius: 8px;
    color: #2c2c2c;
    background: #fff;
    box-shadow: rgba(0, 0, 0, .05) 0 8px 22px;
    cursor: pointer
}

.menu-page__sort-toggle strong {
    color: var(--color-main);
    font-weight: 700
}

.menu-page__sort-toggle i {
    color: var(--color-main);
    font-size: 11px
}

.menu-page__sort-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 20;
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(159, 4, 6, .12);
    border-radius: 8px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, .12) 0 16px 32px
}

.menu-page__sort-panel p {
    margin: 0
}

.menu-page__sort-panel a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    color: #333;
    cursor: pointer
}

.menu-page__sort-panel a.check,
.menu-page__sort-panel a:hover {
    color: var(--color-main);
    background: #fff4d0
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(10px, calc(15/1200*100vw), 15px);
    margin-bottom: 30px;
}

.gallery-grid>* {
    min-width: 0
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.product-grid>* {
    min-width: 0
}

.product-item {
    border-radius: clamp(13px, calc(26/1200*100vw), 26px);
    border: 1px solid rgba(129, 73, 38, .1);
    background: #fff;
    box-shadow: 0 10px 30px 0 rgba(76, 35, 20, .1);
    display: grid;
    grid-template-columns: 50% 1fr;
    gap: clamp(15px, calc(20/1200*100vw), 20px);
    padding: 10px;
    transition: 0.2s;
}

.product-item>* {
    min-width: 0
}

.product-item:hover {
    border-color: rgba(159, 4, 6, .24);
    box-shadow: rgba(0, 0, 0, .1) 0 16px 34px;
    transform: translateY(-4px)
}

.product-item a {
    color: inherit !important;
}

.product-item__photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    border-radius: clamp(10px, calc(20/1200*100vw), 20px);
}

.product-item__photo img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s
}

.product-item__info {
    padding-top: clamp(10px, calc(40/1920*100vw), 40px);
}

.product-item__name {
    -webkit-line-clamp: 1;
    color: #261d18;
    font-family: var(--font-f1);
    font-size: clamp(15px, calc(29/1200*100vw), 29px);
    text-transform: uppercase;
    margin-bottom: 0;
    transition: 0.2s;
}

.product-item__name:hover {
    color: var(--color-sub);
    text-decoration: underline !important;
}

.product-item__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 13px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--color-main);
    background: #fce26c;
    text-transform: uppercase;
    transition: color .2s, background .2s
}

.product-item a:hover .product-item__action {
    color: #fff;
    background: var(--color-main)
}

.product-item__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(4px, .5384615385vw, 7px);
    margin-block: 2px;
}

.product-item__price-new {
    color: var(--color-main);
    font-size: clamp(14px, calc(25/1200*100vw), 25px);
    font-weight: 900
}

.product-item__price-old {
    font-size: clamp(12px, 1.0769230769vw, 14px);
    color: #777;
    text-decoration: line-through
}

.product-item__desc {
    -webkit-line-clamp: 2;
    color: #756a61;
    font-size: clamp(13px, calc(14/1200*100vw), 14px);
    font-weight: 700;
    line-height: clamp(23px, calc(25/1200*100vw), 25px);
}

.product-item__discount {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--color-main);
    font-size: clamp(10px, .9230769231vw, 12px);
    font-weight: 600;
    padding-inline: 8px;
    padding-block: 3px
}

.product-item__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 12px 12px
}

.product-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 40px;
    padding: 7px 9px;
    border: 1px solid var(--color-main);
    border-radius: 7px;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s
}

.product-item__btn--cart {
    color: var(--color-main);
    background: #fff
}

.product-item__btn--buy {
    color: #fff;
    background: var(--color-main)
}

.product-item__btn:hover {
    transform: translateY(-1px)
}

.product-item__btn--cart:hover {
    color: #fff;
    background: var(--color-main)
}

.product-item__btn--buy:hover {
    border-color: #fce26c;
    color: var(--color-main);
    background: #fce26c
}

.product-item__apps {
    position: relative;
    margin-top: 10px;
}

.product-item__order-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: clamp(35px, calc(40/1200*100vw), 40px);
    padding-inline: clamp(10px, calc(12/1200*100vw), 12px);
    padding-block: 0;
    border: 1px solid var(--color-main);
    border-radius: clamp(10px, calc(14/1200*100vw), 14px);
    background: var(--color-main);
    color: #fff;
    font-size: clamp(13px, calc(14/1200*100vw), 14px);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.product-item__order-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.product-item__order-caret {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.product-item__order-caret--open {
    transform: rotate(180deg);
}

.product-item__dropdown {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 150px;
    background: #fff;
    border: 1px solid rgba(129, 73, 38, 0.15);
    border-radius: 8px;
    box-shadow: 0 0.625rem 1.875rem rgba(76, 35, 20, 0.12);
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-0.5rem) scale(0.96);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 50;
}

.product-item__dropdown--open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.product-item__dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-item__dropdown-item+.product-item__dropdown-item {
    margin-top: 0.125rem;
}

.product-item__dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 6px;
    text-decoration: none;
    color: #261d18;
    transition: background 0.15s;
}

.product-item__dropdown-link:hover {
    background: color-mix(in srgb, var(--color-main) 10%, white);
}

.product-item__dropdown-img {
    width: 30px;
    object-fit: cover;
    flex-shrink: 0;
    aspect-ratio: 1/1;
}

.product-item__dropdown-placeholder {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: rgba(159, 4, 6, 0.08);
    color: var(--color-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-item__dropdown-placeholder svg {
    width: 1.125rem;
    height: 1.125rem;
}

.product-item__dropdown-name {
    font-size: 13px;
    font-weight: 500;
}

.product-item__photo-ph {
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
    background-size: 200% 100%;
    animation: nn-skeleton-shine 1.4s infinite;
    border-radius: clamp(10px, calc(20/1200*100vw), 20px)
}

.product-item__name-ph,
.product-item__price-ph,
.product-item__desc-ph {
    display: inline-block;
    background: #eee;
    border-radius: 4px;
    margin-bottom: 2px;
}

.product-item__name-ph {
    height: 40px;
    width: 80%
}

.product-item__price-ph {
    height: 37px;
    width: 40%;
}

.product-item__desc-ph {
    height: 50px;
    width: 100%;
}

@keyframes nn-skeleton-shine {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.menu-page__empty {
    padding: 26px 20px;
    border: 1px dashed rgba(0, 0, 0, .16);
    border-radius: 8px;
    color: #555;
    text-align: center;
    background: #fafafa
}

.info-partner {
    padding: 30px 0;
    background: #fff
}

.partner-slider {
    margin-top: 24px
}

.partner-slider__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    padding: 16px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s, background-color .2s
}

.partner-slider__item:hover {
    border-color: rgba(143, 3, 5, .22);
    background-color: #fffaf0;
    box-shadow: rgba(143, 3, 5, .12) 0 0 0 1px inset
}

.partner-slider__image {
    width: 100%;
    max-width: 220px;
    max-height: 110px;
    object-fit: contain
}

.info-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 15px
}

.info-tags a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: .25s
}

.info-tags a i {
    font-size: 13px;
    color: #f24c3e;
    transition: .25s
}

.info-tags a:hover {
    background: #f24c3e;
    border-color: #f24c3e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: rgba(242, 76, 62, .22) 0 6px 14px
}

.info-tags a:hover i {
    color: #fff
}

@media (max-width:575px) {
    .info-tags {
        gap: 6px
    }

    .info-tags a {
        padding: 6px 10px;
        font-size: 13px
    }
}

.product-layout {
    display: flex;
    gap: 30px;
    margin-top: 20px
}

.left-product {
    width: 260px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, .03) 0 10px 25px;
    align-self: start
}

.right-product {
    flex: 1 1 auto;
    min-width: 0
}

.sidebar-filter__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-main);
    border-bottom: 2px solid var(--color-main);
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase
}

.sidebar-filter__mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee
}

.sidebar-filter__mobile-header strong {
    font-size: 18px;
    color: #333
}

.filter-close-btn {
    background: 0 0;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.filter-group {
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding-bottom: 15px
}

.filter-group:last-child {
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor;
    padding-bottom: 0;
    margin-bottom: 0
}

.filter-group__title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px
}

.filter-group__content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.filter-item {
    display: flex;
    align-items: center
}

.filter-item__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #555;
    cursor: pointer;
    width: 100%;
    user-select: none
}

.filter-item__label input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-main);
    cursor: pointer;
    flex-shrink: 0
}

.filter-item__label span {
    transition: color .2s, font-weight .2s
}

.filter-item__label input:checked+span {
    color: var(--color-main);
    font-weight: 700
}

.filter-mobile-btn-wrap {
    display: none;
    margin-bottom: 20px
}

.filter-mobile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-main);
    color: #fff;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: rgba(159, 4, 6, .2) 0 6px 16px;
    transition: transform .2s, background .2s
}

.filter-mobile-btn:hover {
    background: #850305;
    transform: translateY(-1px)
}

@media (max-width:991px) {
    .product-layout {
        flex-direction: column;
        gap: 20px
    }

    .left-product {
        position: fixed;
        left: -320px;
        top: 0;
        bottom: 0;
        width: 300px;
        z-index: 9999;
        margin: 0;
        border-radius: 0;
        border-width: medium;
        border-style: none;
        border-color: currentcolor;
        border-image: initial;
        box-shadow: rgba(0, 0, 0, .15) 10px 0 30px;
        overflow-y: auto;
        transition: left .35s cubic-bezier(.4, 0, .2, 1)
    }

    .left-product.show {
        left: 0
    }

    .sidebar-filter__mobile-header {
        display: flex
    }

    .filter-mobile-btn-wrap {
        display: block
    }
}

.show-search {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(159, 4, 6, .15);
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, .12) 0 12px 36px;
    z-index: 1000;
    padding: 8px 0;
    display: none
}

.box-search {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 16px;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color .25s
}

.box-search:last-child {
    border-bottom-width: medium;
    border-bottom-style: none;
    border-bottom-color: currentcolor
}

.box-search:hover {
    background-color: #fff8f8
}

.pic-search {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid #eee
}

.pic-search img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ds-item-search {
    flex: 1 1 auto;
    min-width: 0
}

.ds-item-search .name-product {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35
}

.ds-item-search .name-product a {
    color: #333;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ds-item-search .name-product a:hover {
    color: var(--color-main)
}

.price-product {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px
}

.price-product .price-new {
    color: var(--color-main);
    font-weight: 700
}

.price-product .price-old {
    color: #888;
    text-decoration: line-through
}

.price-product .price-per {
    color: #069e34;
    font-weight: 700
}

.swiper-button-next,
.swiper-button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: .5px solid rgba(0, 0, 0, .25);
    background: #fff;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .18s;
    cursor: pointer
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #f5f5f5;
    border-color: rgba(0, 0, 0, .4)
}

.swiper-button-next:active,
.swiper-button-prev:active {
    transform: scale(.95)
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .3;
    pointer-events: none
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 18px;
    height: 18px;
    stroke: currentcolor;
    stroke-width: 1.5;
    fill: none;
    flex-shrink: 0
}

.search-popup {
    position: relative
}

.search-popup .icon-search {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0
}

.search-popup .icon-search .search-svg {
    display: block
}

.search-popup .icon-search .close-svg {
    display: none
}

.search-popup .icon-search.active {
    background: var(--color-sub);
    color: #fff;
    border: solid 1px var(--color-sub)
}

.search-popup .icon-search.active .search-svg {
    display: none
}

.search-popup .icon-search.active .close-svg {
    display: block
}

.search-popup .search-grid {
    position: absolute;
    top: 60px;
    right: 0;
    width: 0;
    height: 40px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-main);
    z-index: 2;
    opacity: 0;
    border-radius: 40px;
    display: flex;
    align-items: center
}

.search-popup .search-grid p {
    width: 35px;
    height: 35px;
    cursor: pointer;
    outline: 0;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    margin: 0;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-main)
}

.search-popup .search-grid input {
    width: calc(100% - 35px);
    float: right;
    line-height: 35px;
    outline: 0;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    color: #000;
    font-size: 14px
}

.search-popup .search-grid input::placeholder {
    color: #ccc
}


.title-main {
    margin-bottom: 30px;
    text-align: center;
    overflow: hidden;
}

.title-main span {
    color: var(--color-sub);
    font-family: "Be Vietnam Pro";
    font-size: clamp(13px, calc(14/1200*100vw), 14px);
    font-weight: 800;
    letter-spacing: 1.92px;
    text-transform: uppercase;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.title-main span:before,
.title-main span:after {
    content: '';
    width: 30px;
    height: 3px;
    background: var(--color-sub);
    flex: 1 1 0%;
    min-width: 0;
}


.title-main h1,
.title-main h2 {
    margin-bottom: 0;
    color: var(--color-main);
    font-family: var(--font-f1);
    font-size: clamp(30px, calc(55/1200*100vw), 55px);
    letter-spacing: clamp(0.11px, calc(0.66/1200*100vw), 0.66px);
    text-transform: uppercase;
}

.title-main p {
    margin-bottom: 0;
    color: #75685D;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    font-weight: 700;
    margin-top: 5px;
}

.swiper-dvnb-paginate .swiper-pagination-progressbar-fill {
    background: #618db0 !important
}

.videomp4-item {
    display: block;
    position: relative;
    isolation: isolate;
    aspect-ratio: 9/16;
    border-radius: clamp(6px, .923077vw, 12px);
    overflow: hidden
}

.videomp4-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.album-item {
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    border-radius: clamp(12px, calc(24/1200*100vw), 24px);
    border: 1px solid rgba(185, 25, 31, .08);
    background: #fff;
    box-shadow: 0 clamp(10px, calc(20/1200*100vw), 20px) clamp(25px, calc(50/1200*100vw), 50px) 0 rgba(77, 35, 20, .18)
}

.album-item__image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f8fafc
}

.album-item__image img {
    width: 100%;
    object-fit: cover;
    transition: transform .5s;
    height: 100% !important
}

.album-item__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    color: #fff;
    backdrop-filter: blur(4px);
    z-index: 10
}

.album-item__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(15, 23, 42, .75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .5px;
    z-index: 11
}

.album-item__info {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: #fff
}

.album-item__name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    transition: color .2s;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.album-item:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, .08) 0 12px 30px;
    border-color: rgba(0, 0, 0, .08)
}

.album-item:hover .album-item__image img {
    transform: scale(1.1)
}

.album-item:hover .album-item__overlay {
    opacity: 1;
    visibility: visible
}

.album-item:hover .album-item__name {
    color: var(--color-main)
}

.socialh {
    gap: 6px
}

.socialh li a {
    display: block;
    max-width: 25px
}

.footer-wrap {
    position: relative;
    z-index: 5;
    background: url(../images/custom/footer-bg.png) no-repeat top center / cover;
    padding-top: 1px;
    color: #fff;
}

.footer-flex {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-block: 30px;
}

.footer-news:nth-child(1) {
    width: 40%;
}

.footer-news:nth-child(2) {
    width: 20%;
}

.footer-news:nth-child(3) {
    width: 35%;
}

.footer-top {
    display: grid;
    align-items: center;
    grid-template-columns: 95px 1fr;
    gap: clamp(10px, 1.5384615385vw, 20px)
}

.footer-logo {
    max-width: 170px;
    margin: calc(-1 * clamp(25px, calc(50/1200*100vw), 50px)) auto 20px auto;
}

.footer-name {
    margin-bottom: 30px;
    text-align: center;
}

.footer-desc {
    margin-block: clamp(15px, 1.5384615385vw, 20px);
    line-height: clamp(24px, 2.1538461538vw, 28px)
}

.socialf {
    margin-top: 30px;
}

.socialf li a {
    display: block;
    max-width: 35px
}

.footer-title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.footer-title__name {
    font-family: var(--font-f1);
    color: var(--color-main);
    text-shadow: rgb(255, 240, 162) 1px 0px 0px, rgb(255, 240, 162) 0.540302px 0.841471px 0px, rgb(255, 240, 162) -0.416147px 0.909297px 0px, rgb(255, 240, 162) -0.989992px 0.14112px 0px, rgb(255, 240, 162) -0.653644px -0.756802px 0px, rgb(255, 240, 162) 0.283662px -0.958924px 0px, rgb(255, 240, 162) 0.96017px -0.279415px 0px, 0 0 6px #7B3311;
    font-size: clamp(30px, calc(70/1200*100vw), 70px);
    text-transform: uppercase;
    margin-bottom: 0;
}

.footer-title__desc {
    color: #F6E2C0;
    font-size: clamp(14px, calc(24/1200*100vw), 24px);
    font-weight: 700;
    letter-spacing: clamp(0.2px, calc(1.2/1200*100vw), 1.2px);
    margin-bottom: 0;
}

.footer-info p,
.footer-info ul {
    margin-bottom: 7px
}

.footer-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.footer-ul li a {
    display: block;
    color: #fff
}

.footer-ul li a:hover {
    text-decoration: underline !important
}

.footer-powered {
    border-top: solid 1px #ff7170;
    padding-block: clamp(10px, 1.5384615385vw, 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

.footer-copyright {
    text-align: center;
    padding-block: clamp(10px, calc(20/1200*100vw), 20px);
}

.footer-copyright b {
    font-weight: 700;
}

.footer-statistic {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center
}

.footer-statistic li {
    position: relative;
    color: #ffaead
}

.footer-statistic li:not(:last-child) {
    padding-right: 15px;
    margin-right: 10px
}

.footer-statistic li:not(:last-child):after {
    content: "";
    height: 11px;
    width: 2px;
    background: #ffaead;
    position: absolute;
    right: 0;
    top: calc(50% - 5.5px)
}

.footer-statistic li b {
    font-weight: 700;
    color: #fff
}

.nn-field-group {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative
}

.nn-field-group--readonly {
    opacity: .5 !important;
    pointer-events: none !important
}

.nn-field-group--horizontal {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap
}

.nn-field-group__label {
    font-weight: 600;
    text-transform: capitalize;
    color: #212529;
    margin-bottom: 0
}

.nn-field-group__label small {
    color: #9b9b9b;
    font-weight: 400;
    font-size: 15px;
    display: block;
    margin-top: -4px
}

.nn-field-group__label--required {
    font-size: 14px;
    color: #ff6b6b
}

.nn-field-group__error-msg {
    color: #ff6b6b;
    font-size: 12.5px;
    margin-top: 4px;
    min-height: 18px
}

.nn-field-group.has-error .nn-input-wrapper,
.nn-field-group.has-error .ts-control {
    border-color: #dc3545;
    background-color: color-mix(in srgb, #dc3545 6%, #fff);
    box-shadow: 0 0 0 4px rgba(201, 5, 0, .15)
}

.nn-field-group.has-error .nn-field-group__error-msg {
    display: block
}

.nn-input-wrapper {
    display: flex;
    align-items: stretch;
    position: relative;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.nn-input-wrapper:focus-within {
    border-color: var(--color-main);
    box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .15)
}

.nn-input-wrapper .cke {
    width: 100% !important;
    border: none !important
}

.nn-field-input {
    width: 100%;
    border: none;
    background: 0 0;
    min-height: clamp(35px, 3.4615384615vw, 45px);
    padding-block: clamp(6px, .6666666667vw, 8px);
    padding-inline: clamp(12px, 1.3333333333vw, 16px);
    color: #212529
}

.nn-field-input::placeholder {
    color: #8e8e8e
}

.nn-field-input:focus {
    outline: 0
}

.nn-field-input--readonly {
    background-color: #e9ecef
}

.nn-field-textarea {
    resize: vertical;
    min-height: 80px
}

.nn-input-append,
.nn-input-prepend {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    background: #f8f9fa;
    color: #495057;
    border-right: 1px solid #ced4da;
    font-size: 14px
}

.nn-input-append {
    border-right: none;
    border-left: 1px solid #ced4da
}

.ts-wrapper.plugin-dropdown_input .ts-control {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #212529;
    box-shadow: none
}

.ts-wrapper.plugin-dropdown_input.focus .ts-control {
    border-color: var(--color-main);
    box-shadow: 0 0 0 .2rem rgba(204, 0, 0, .15)
}

.ts-wrapper.plugin-dropdown_input.dropdown-active .ts-control::after {
    transform: rotate(-135deg);
    margin-top: 1px
}

.ts-wrapper .ts-dropdown {
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
    background: #fff;
    margin-top: 4px
}

.ts-wrapper .ts-dropdown .option {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer
}

.ts-wrapper .ts-dropdown .option.active,
.ts-wrapper .ts-dropdown .option:hover {
    background: #f8f9fa;
    color: var(--color-main)
}

.form-check-input,
input[type=checkbox],
input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    background-color: #fff;
    margin: 0;
    padding: 0;
    cursor: pointer;
    outline: 0;
    vertical-align: middle;
    position: relative;
    transition: all .2s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0
}

.form-check-input:hover,
input[type=checkbox]:hover,
input[type=radio]:hover {
    border-color: #94a3b8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05)
}

.form-check-input:focus,
.form-check-input:focus-visible,
input[type=checkbox]:focus,
input[type=checkbox]:focus-visible,
input[type=radio]:focus,
input[type=radio]:focus-visible {
    border-color: var(--color-main);
    box-shadow: 0 0 0 3px rgba(var(--color-main), .15)
}

.form-check-input:active,
input[type=checkbox]:active,
input[type=radio]:active {
    transform: scale(.95)
}

.form-check-input:disabled,
input[type=checkbox]:disabled,
input[type=radio]:disabled {
    cursor: not-allowed;
    background-color: #f1f5f9;
    border-color: #e2e8f0;
    opacity: .6
}

input[type=checkbox] {
    border-radius: 5px
}

input[type=checkbox]:checked {
    background-color: var(--color-main);
    border-color: var(--color-main);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 11px 11px;
    background-position: center;
    background-repeat: no-repeat;
    animation: checkbox-pop .25s cubic-bezier(.4, 0, .2, 1)
}

input[type=radio] {
    border-radius: 50%
}

input[type=radio]:checked {
    border-color: var(--color-main);
    background-color: #fff;
    background-image: radial-gradient(circle, var(--color-main) 42%, transparent 48%) !important;
    animation: radio-pop .25s cubic-bezier(.4, 0, .2, 1)
}

@keyframes checkbox-pop {
    0% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes radio-pop {
    0% {
        transform: scale(.9);
        background-image: radial-gradient(circle, var(--color-main) 0, transparent 0)
    }

    100% {
        transform: scale(1);
        background-image: radial-gradient(circle, var(--color-main) 42%, transparent 48%)
    }
}

.newsletter-form {
    border-radius: 15px;
    border: 2px solid #fff;
    box-shadow: 0 4px 20px 0 rgba(255, 255, 255, .25) inset;
    padding-block: clamp(20px, 3.0769230769vw, 40px);
    padding-inline: clamp(15px, 2.3076923077vw, 30px)
}

.newsletter-form__title {
    text-align: center;
    margin-bottom: 20px
}

.newsletter-form__title h2 {
    font-size: clamp(25px, 2.6923076923vw, 35px);
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 0
}

.newsletter-inputs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.newsletter-inputs>* {
    min-width: 0
}

.newsletter-submit {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    background: var(--color-main);
    color: #fff;
    font-size: clamp(14px, 1.3076923077vw, 17px);
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding-block: clamp(10px, 1.1538461538vw, 15px);
    transition: .2s
}

.newsletter-submit:hover {
    background: var(--color-sub)
}

.slideinner-wrap {
    position: relative;
    isolation: isolate
}

.slideinner-info {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .5) 100%);
    color: #fff
}

.slideinner-info p {
    font-size: clamp(13px, 1.9230769231vw, 25px);
    font-weight: 500;
    letter-spacing: clamp(1px, .2884615385vw, 3.75px);
    text-transform: uppercase;
    margin-bottom: 5px
}

.slideinner-info b {
    font-size: clamp(25px, 5vw, 65px);
    font-weight: 800;
    text-transform: uppercase
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

.news-grid>* {
    min-width: 0
}

.news-item {
    border-radius: clamp(12px, calc(24/1200*100vw), 24px);
    border: 1px solid rgba(125, 78, 47, 0.12);
    background: #FFF;
    box-shadow: 0 10px 28px 0 rgba(77, 35, 20, 0.05);
    transition: 0.2s;
}

.news-item:hover {
    border-color: var(--color-main);
    transform: translateY(-4px);
    box-shadow: 0 10px 28px 0 rgba(77, 35, 20, 0.2);
}

.news-item__pic {
    overflow: hidden;
}

.news-item__info {
    padding: clamp(10px, calc(20/1200*100vw), 20px);
    padding-bottom: clamp(15px, calc(30/1200*100vw), 30px);
}

.news-item__date {
    color: var(--color-main);
    font-size: clamp(11px, calc(13/1200*100vw), 13px);
    font-weight: 600;
    letter-spacing: 1.21px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.news-item__name {
    -webkit-line-clamp: 2;
    color: #261D18;
    font-size: clamp(15px, calc(22/1200*100vw), 22px);
    font-weight: 600;
    margin-bottom: 5px;
}

.news-item__desc {
    color: #756A61;
    font-size: 14px;
    font-weight: 700;
    line-height: 27px;
}

.prodetail-layout {
    display: flex;
    gap: clamp(15px, calc(20/1200*100vw), 20px);
    align-items: start
}

.prodetail-main {
    flex: 1 1 0%;
    min-width: 0
}

.prodetail-sidebar {
    min-width: 0;
    width: 24%
}

.prodetail {
    display: block;
    width: 100%
}

.prodetail__header {
    margin-bottom: clamp(20px, 2.3076923077vw, 30px);
    display: grid;
    grid-template-columns: 45% 1fr;
    gap: clamp(20px, 2.3076923077vw, 30px)
}

.prodetail__header>* {
    min-width: 0
}

.prodetail__gallery {
    position: relative
}

.prodetail__info {
    position: relative
}

.prodetail__thumb {
    margin-bottom: 15px;
    border: 1px solid rgba(0, 0, 0, .05);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.prodetail__thumb .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.prodetail__thumb .swiper-slide a {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    position: relative
}

.prodetail__thumb .swiper-slide a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .02);
    opacity: 0;
    transition: opacity .3s
}

.prodetail__thumb .swiper-slide a:hover::after {
    opacity: 1
}

.prodetail__thumb .swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1)
}

.prodetail__thumb .swiper-slide a:hover img {
    transform: scale(1.04)
}

.prodetail__nav {
    margin-top: 15px;
    position: relative
}

.prodetail__nav .swiper-slide {
    opacity: .5;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer
}

.prodetail__nav .swiper-slide.is-active,
.prodetail__nav .swiper-slide.swiper-slide-thumb-active {
    opacity: 1;
    border-color: var(--color-main);
    box-shadow: 0 4px 10px rgba(var(--color-main), .15)
}

.prodetail__title {
    font-size: clamp(20px, 2.3076923077vw, 30px);
    font-weight: 600;
    color: #111;
    margin-bottom: 15px
}

.prodetail__option {
    margin-top: clamp(5px, .7692307692vw, 10px);
    margin-bottom: clamp(10px, 1.5384615385vw, 20px);
    list-style: none;
    padding-left: 0;
    padding-bottom: clamp(5px, .7692307692vw, 10px);
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #f0f0f0
}

.prodetail__option li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666
}

.prodetail__option li svg {
    color: #94a3b8
}

.prodetail__option li label {
    font-weight: 500
}

.prodetail__option li span {
    color: #111;
    font-weight: 600
}

.prodetail__option li.line {
    width: 1px;
    height: 12px;
    background: #e2e8f0;
    padding: 0
}

.prodetail__social {
    margin: 25px 0 0 0;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0
}

.prodetail__social-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap
}

.prodetail__social-title svg {
    color: #94a3b8
}

.a2a_kit .a2a_svg {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    background: var(--color-main) !important
}

.prodetail__price {
    margin-block: clamp(10px, 1.5384615385vw, 20px);
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, .02);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px
}

.prodetail__price-new {
    font-size: clamp(18px, 1.9230769231vw, 25px);
    font-weight: 700;
    color: var(--color-main)
}

.prodetail__price-old {
    font-size: clamp(13px, 1.3076923077vw, 17px);
    text-decoration: line-through;
    color: #94a3b8;
    margin: 0;
    font-weight: 500
}

.prodetail__price-discount {
    background: var(--color-main);
    color: #fff;
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(var(--color-main), .2);
    display: inline-flex;
    align-items: center
}

.prodetail__qty-group {
    margin: 25px 0;
    display: flex;
    align-items: center;
    gap: 15px
}

.prodetail__qty-group label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569
}

.prodetail__qty-control {
    display: flex;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 100px;
    overflow: hidden;
    background: #f8fafc;
    height: 38px;
    padding: 2px
}

.prodetail__qty-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: 0 0;
    color: #64748b;
    transition: all .2s
}

.prodetail__qty-btn:hover {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .05)
}

.prodetail__qty-btn svg {
    width: 12px;
    height: 12px
}

.prodetail__qty-input {
    width: 45px;
    height: 34px;
    border: none;
    background: 0 0;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    outline: 0;
    -moz-appearance: textfield
}

.prodetail__qty-input::-webkit-inner-spin-button,
.prodetail__qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.prodetail__desc {
    color: #475569;
    margin-top: clamp(7px, .7692307692vw, 10px);
    padding-bottom: clamp(10px, 1.1538461538vw, 15px);
    border-left: clamp(1px, .2307692308vw, 3px) solid #e2e8f0;
    padding-left: clamp(7px, 1.1538461538vw, 15px);
    padding-bottom: 0
}

.prodetail__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-block: clamp(10px, 1.5384615385vw, 20px)
}

.prodetail__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 10px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
    min-height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05)
}

.prodetail__btn:hover {
    transform: translateY(-2px)
}

.prodetail__btn--add {
    color: var(--color-main);
    background: #fff;
    border: 2px solid var(--color-main);
    box-shadow: 0 4px 12px rgba(var(--color-main), .08)
}

.prodetail__btn--add:hover {
    background: color-mix(in srgb, var(--color-main) 6%, #fff);
    box-shadow: 0 6px 16px rgba(var(--color-main), .15)
}

.prodetail__btn--buy {
    color: #fff;
    background: linear-gradient(135deg, var(--color-main), var(--color-main) -dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .2)
}

.prodetail__btn--buy:hover {
    box-shadow: 0 6px 20px rgba(var(--color-main), .3);
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-main) 90%, #000), color-mix(in srgb, var(--color-main) -dark 90%, #000))
}

.prodetail__btn--hotline {
    color: #fff !important;
    background: #1e293b
}

.prodetail__btn--hotline:hover {
    background: #0f172a;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .2)
}

.prodetail__btn--zalo {
    color: #fff !important;
    background: #0068ff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px
}

.prodetail__btn--zalo:hover {
    background: #0056d6;
    box-shadow: 0 6px 16px rgba(0, 104, 255, .2)
}

.prodetail__zalo-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center
}

.prodetail__zalo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.prodetail__zalo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left
}

.prodetail__btn-text {
    font-weight: 700
}

.prodetail__btn-subtext {
    display: block;
    font-size: 11px;
    opacity: .85;
    font-weight: 400
}

.prodetail__tab-header {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 30px;
    padding: 0;
    list-style: none
}

.prodetail__tab-header li {
    padding-block: clamp(6px, .9230769231vw, 12px);
    font-size: clamp(14px, 1.2307692308vw, 16px);
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    color: #94a3b8;
    transition: all .3s
}

.prodetail__tab-header li::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-main);
    transition: width .3s cubic-bezier(.4, 0, .2, 1)
}

.prodetail__tab-header li.active {
    color: var(--color-main)
}

.prodetail__tab-header li.active::after {
    width: 100%
}

.prodetail__tab-header li:hover {
    color: var(--color-main)
}

.prodetail__tab-body {
    display: none
}

.prodetail__tab-body[x-show] {
    display: block
}

.prodetail__related {
    margin-top: 30px
}

.prodetail__related-title h2 {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
    border-left: 4px solid var(--color-main);
    padding-left: 15px;
    color: #111;
    letter-spacing: -.01em
}

.prodetail__related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px
}

.prodetail__attribute {
    margin-bottom: 25px
}

.prodetail__attribute-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #475569;
    margin-bottom: 12px
}

.prodetail__attribute-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px
}

.prodetail__attribute-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
    overflow: hidden;
    gap: 6px
}

.prodetail__attribute-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #0f172a
}

.prodetail__attribute-btn.active {
    border-color: var(--color-main);
    background: color-mix(in srgb, var(--color-main) 6%, #fff);
    color: var(--color-main);
    box-shadow: 0 0 0 2px rgba(var(--color-main), .1)
}

.prodetail__attribute-btn.active .prodetail__attribute-check {
    display: inline-flex
}

.prodetail__attribute-check {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-main);
    margin-left: 2px
}

.proshow-layout {
    display: flex;
    gap: clamp(20px, calc(30/1200*100vw), 30px)
}

.proshow-sidebar {
    width: 280px
}

.proshow-main {
    flex: 1 1 0%;
    min-width: 0
}

.page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(15px, calc(30/1200*100vw), 30px);
    width: 100%
}

.page-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px
}

.page-empty__icon svg {
    width: 64px;
    height: 64px
}

.page-empty__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px
}

.page-empty__desc {
    font-size: 14px;
    margin: 0
}

.swiper.category .swiper-slide {
    width: fit-content;
    max-width: 100%
}

.swiper.category .swiper-wrapper {
    max-width: 100%;
    width: fit-content;
    margin: 0 auto
}


.swiper.category .swiper-slide {
    width: fit-content;
    max-width: 100%
}

.swiper.category .swiper-wrapper {
    max-width: 100%;
    width: fit-content;
    margin: 0 auto
}

.header-wrap {
    position: relative;
    z-index: 101
}

.header-wrap__bg {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    z-index: -1;
    background: linear-gradient(0deg, #fffae8 0, #fffae8 100%), linear-gradient(0deg, var(--be_dam, #f5e7d2) 0, var(--be_dam, #f5e7d2) 100%), linear-gradient(92deg, #efa013 0, #f5b424 100%)
}

.header-wrap>.wrap-content {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    isolation: isolate
}

.header-banner1 {
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc(150/1200*100%);
    width: calc(400/1200*100%)
}

.header-logo {
    width: calc(156/1200*100%);
    position: relative;
    z-index: 2
}

.header-title {
    width: calc(500/1200*100%);
    position: relative;
    z-index: 2
}

.header-hotline {
    width: calc(190/1200*100%);
    position: relative;
    z-index: 2;
    margin-left: auto;
    padding: 5px;
    margin-top: 5px
}

.header-hotline__border {
    position: absolute;
    inset: 0;
    bottom: 15px;
    z-index: 0
}

.header-hotline__box {
    position: relative;
    isolation: isolate;
    z-index: 1;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: clamp(5px, calc(8/1200*100vw), 8px);
    padding-bottom: clamp(6px, calc(12/1200*100vw), 12px);
    padding-inline: 5px;
    color: #fff
}

.header-hotline__box:after {
    content: '';
    inset: 0;
    background: var(--color-main);
    mask-image: url(../images/custom/header-hotline-box.png);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    position: absolute;
    z-index: -1
}

.header-hotline__box span {
    display: block;
    font-family: var(--font-f3);
    font-size: clamp(13px, calc(15/1200*100vw), 15px);
    margin-block: clamp(2px, calc(4/1200*100vw), 4px)
}

.header-hotline__box a {
    display: inline-block;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    font-family: var(--font-f1);
    font-size: clamp(15px, calc(20/1200*100vw), 20px);
    letter-spacing: .6px;
    transition: .2s
}

.header-hotline__box a:hover {
    color: var(--color-sub);
    text-decoration: underline
}

.header-hotline__box p {
    -webkit-line-clamp: 2;
    margin-bottom: 0;
    margin-top: 5px;
    font-weight: 600;
    font-size: clamp(12px, calc(13/1200*100vw), 13px)
}

.header-title__desc {
    font-family: var(--font-f3);
    color: var(--color-sub);
    font-size: clamp(22px, calc(42/1200*100vw), 42px);
    margin-bottom: 0;
    line-height: 1
}

.header-title__name {
    margin-bottom: 0;
    color: var(--color-main);
    text-shadow: #fff 1px 0 0, #fff .540302px .841471px 0, #fff -.416147px .909297px 0, #fff -.989992px .14112px 0, #fff -.653644px -.756802px 0, #fff .283662px -.958924px 0, #fff .96017px -.279415px 0, rgba(174, 37, 16, .8) 2px 0 0, rgba(174, 37, 16, .8) 1.75517px .958851px 0, rgba(174, 37, 16, .8) 1.0806px 1.68294px 0, rgba(174, 37, 16, .8) .141474px 1.99499px 0, rgba(174, 37, 16, .8) -.832294px 1.81859px 0, rgba(174, 37, 16, .8) -1.60229px 1.19694px 0, rgba(174, 37, 16, .8) -1.97998px .28224px 0, rgba(174, 37, 16, .8) -1.87291px -.701566px 0, rgba(174, 37, 16, .8) -1.30729px -1.5136px 0, rgba(174, 37, 16, .8) -.421592px -1.95506px 0, rgba(174, 37, 16, .8) .567324px -1.91785px 0, rgba(174, 37, 16, .8) 1.41734px -1.41108px 0, rgba(174, 37, 16, .8) 1.92034px -.558831px 0;
    font-family: var(--font-f2);
    font-size: clamp(25px, calc(65/1200*100vw), 65px);
    letter-spacing: clamp(1.5px, calc(6.5/1200*100vw), 6.5px);
    text-transform: uppercase
}

.slide-wrap {
    margin-top: calc(-1 * clamp(0px, calc(30/1200*100vw), 30px))
}

.about-wrap {
    background: url(../images/custom/about-bg.png) no-repeat top center, url(../images/custom/about-bg-2.jpg) repeat-x bottom left/auto calc(370/1125*100%), linear-gradient(180deg, #f7f2ea 0, #fffaf2 100%);
    padding-block: clamp(35px, calc(70/1200*100vw), 70px)
}

.about-wrap .wrap-content {
    max-width: 1330px
}

.about-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px
}

.about-left {
    flex: 1 1 0%
}

.about-right {
    width: calc(660/1300*100%);
    max-width: 660px;
    margin: auto;
    position: relative;
    isolation: isolate
}

.about-pic__leaf {
    position: absolute;
    z-index: 1;
    bottom: calc(18/535*100%);
    right: calc(28/660*100%)
}

.about-pic {
    aspect-ratio: 660/535;
    border-radius: 660px;
    overflow: hidden;
    mask-image: url(../images/custom/about-pic-mask.png);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    display: inline-block
}

.about-pic img {
    height: 100% !important;
    object-fit: cover
}

.swiper.aboutPhoto {
    filter: drop-shadow(0 clamp(10px, calc(20/1200*100vw), 20px) clamp(25px, calc(50/1200*100vw), 50px) rgba(77, 35, 20, .18));
    margin: -7.5px
}

.swiper.aboutPhoto .swiper-slide {
    padding: 7.5px
}

.swiper.aboutPhoto .album-item {
    box-shadow: none
}

.about-text {
    color: #2c211a;
    font-family: var(--font-f4);
    font-size: clamp(18px, calc(36/1200*100vw), 36px);
    margin-bottom: 0
}

.about-name {
    color: var(--color-main);
    font-family: var(--font-f1);
    font-size: clamp(35px, calc(76/1200*100vw), 76px);
    text-transform: uppercase;
    margin-bottom: 5px
}

.about-desc {
    color: #544940;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    font-weight: 700;
    line-height: clamp(24px, calc(30/1200*100vw), 30px);
    margin-bottom: clamp(20px, calc(30/1200*100vw), 30px)
}

.about-next {
    overflow: hidden;
    border-radius: 999px;
    color: #fff !important;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    font-weight: 800;
    letter-spacing: .16px;
    background: var(--color-main);
    box-shadow: 0 14px 30px 0 rgba(136, 16, 16, .18);
    padding-block: clamp(10px, calc(15/1200*100vw), 15px);
    padding-inline: clamp(20px, calc(30/1200*100vw), 30px)
}

.about-next:before {
    background: var(--color-sub)
}

.swiper.thongke {
    filter: drop-shadow(0 16px 40px rgba(19, 20, 28, .1));
    margin-inline: calc(-1 * clamp(7.5px, calc(12/1200*100vw), 12px));
    margin-top: clamp(30px, calc(40/1200*100vw), 40px)
}

.swiper.thongke .swiper-slide {
    padding-inline: clamp(7.5px, calc(12/1200*100vw), 12px)
}

.thongke-item {
    border-radius: 100px;
    background: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
    aspect-ratio: 280/140;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(10px, calc(20/1200*100vw), 20px)
}

.thongke-item__counter {
    color: var(--color-main);
    font-family: var(--font-f1);
    font-size: clamp(25px, calc(45/1200*100vw), 45px);
    text-transform: uppercase;
    margin-bottom: 0
}

.thongke-item__name {
    color: #111217;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    font-weight: 700;
    letter-spacing: 1.6px;
    margin-bottom: 0
}

.pronb-wrap {
    background: url(../images/custom/thucdon_bg.jpg);
    padding-top: clamp(25px, calc(50/1200*100vw), 50px);
    padding-bottom: clamp(50px, calc(100/1200*100vw), 100px);
}

.swiper.feedback {
    filter: drop-shadow(0 20px 42px rgba(82, 4, 4, 0.15));
}

.feedback-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(10px, calc(20/1200*100vw), 20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: #FFF;
}

.feedback-item__pic {
    margin-bottom: clamp(20px, calc(30/1200*100vw), 30px);
}

.feedback-item__img {
    max-width: 155px;
    aspect-ratio: 155/150;
    position: relative;
    isolation: isolate;
    padding: 2px;
}

.feedback-item__img-border {
    position: absolute;
    z-index: 1;
    top: calc(25/150*100%);
    left: calc(-1 * (5/155*100%));
}

.feedback-item__img:after {
    content: '';
    z-index: -1;
    position: absolute;
    background: linear-gradient(90deg, rgba(226, 163, 49, 1) 0%, rgba(255, 237, 120, 1) 45%, rgba(208, 146, 35, 1) 100%);
    mask-image: url(../images/custom/mask2.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    inset: 0;
}

.feedback-item__img-mask {
    mask-image: url(../images/custom/mask2.png);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    aspect-ratio: 300/288;
}

.feedback-item__name {
    color: #342313;
    font-size: clamp(15px, calc(25/1200*100vw), 25px);
    font-weight: 700;
    margin-bottom: clamp(5px, calc(10/1200*100vw), 10px);
}

.feedback-item__desc {
    -webkit-line-clamp: 4;
    color: #342313;
    font-size: clamp(14px, calc(16/1200*100vw), 16px);
    line-height: 28px;
}

.feedback-item__line {
    opacity: 1;
    width: 50px;
    height: 3px !important;
    margin-block: clamp(5px, calc(10/1200*100vw), 10px);
    background: var(--color-main);
    margin-inline: auto;
}

.feedback-item__opt {
    font-weight: 700;
    color: var(--color-sub);
    font-size: clamp(13px, calc(15/1200*100vw), 15px);
    margin-bottom: 0;
}

.feedback-wrap {
    background: url(../images/custom/feedback_bg.jpg) no-repeat top center / cover;
    padding-block: clamp(35px, calc(70/1200*100vw), 70px);
}

.feedback-wrap .title-main span,
.feedback-wrap .title-main h2,
.feedback-wrap .title-main p {
    color: #fff;
}

.feedback-wrap .title-main span:before,
.feedback-wrap .title-main span:after {
    background: #fff;
}

.swiper.newsnb {
    filter: drop-shadow(0 10px 28px rgba(77, 35, 20, 0.05));
}


.swiper.newsnb .swiper-slide {
    padding-top: 5px;
}

.swiper.newsnb .news-item {
    box-shadow: none;
}

.newsnb-wrap {
    background: #FFFDF9;
    padding-block: clamp(35px, calc(70/1200*100vw), 70px);
}

.albumphoto-grid {
    display: grid;
    grid-template-columns: calc(680/1200*100%) 1fr;
    grid-template-rows: repeat(2, clamp(100px, calc(285/1200*100vw), 285px));
    gap: clamp(10px, calc(20/1200*100vw), 20px);
    grid-template-areas:
        "albumphoto-item1 albumphoto-item2"
        "albumphoto-item1 albumphoto-item3";
}

.albumphoto-item {
    display: none;
}


.albumphoto-item1 {
    grid-area: albumphoto-item1;
    display: block;
}

.albumphoto-item2 {
    grid-area: albumphoto-item2;
    display: block;
}

.albumphoto-item3 {
    grid-area: albumphoto-item3;
    display: block;
}

.albumphoto-wrap {
    background: linear-gradient(180deg, #FFFAF2 0%, #F7EFE2 100%);
    padding-block: clamp(35px, calc(70/1200*100vw), 70px);
    padding-bottom: clamp(100px, calc(200/1200*100vw), 200px);
    margin-bottom: -80px;
}

.swiper.ketnoi {
    filter: drop-shadow(0 18px 42px rgba(75, 0, 0, 0.1));
    margin-inline: calc(-1 * clamp(7.5px, calc(40/1200*100vw), 40px));
}

.swiper.ketnoi .swiper-slide {
    padding-inline: clamp(7.5px, calc(40/1200*100vw), 40px);
}

.ketnoi-item {
    border-radius: clamp(12px, calc(24/1200*100vw), 24px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    padding-block: clamp(15px, calc(25/1200*100vw), 25px);
    padding-inline: clamp(10px, calc(20/1200*100vw), 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(10px, calc(20/1200*100vw), 20px);
}

.ketnoi-item__pic {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 26px 0 rgba(0, 0, 0, 0.16);
}

.ketnoi-item__info {
    border-radius: 13px;
    background: #FFF;
    color: var(--color-main);
    box-shadow: 0 12px 18px 0 rgba(87, 10, 0, 0.14);
    padding: clamp(10px, calc(12/1200*100vw), 12px);
    text-align: center;
    width: 100%;
    transition: 0.2s;
}

.ketnoi-item__name {
    -webkit-line-clamp: 1;
    color: inherit;
    font-family: var(--font-f1);
    font-size: clamp(15px, calc(20/1200*100vw), 20px);
    letter-spacing: clamp(0.5px, calc(2/1200*100vw), 2px);
    text-transform: uppercase;
    margin-bottom: 0;
}

.ketnoi-item:hover .ketnoi-item__info {
    background: var(--color-sub);
    color: #fff;
}

.ketnoi-wrap {
    overflow: hidden;
    background: url(../images/custom/tienich_bg.jpg) no-repeat top center / cover;
    padding-top: clamp(40px, calc(80/1200*100vw), 80px);
    padding-bottom: clamp(120px, calc(240/1200*100vw), 240px);
    margin-bottom: calc(-1 * clamp(85px, calc(170/1200*100vw), 170px));
}

.ketnoi-wrap .title-main h2 {
    color: #fff;
}

.videomp4-item {
    aspect-ratio: 12/5;
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.videomp4-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0px;
}

.swiper.slidevideo {
    border-radius: clamp(15px, calc(30/1200*100vw), 30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 clamp(15px, calc(30/1200*100vw), 30px) clamp(30px, calc(60/1200*100vw), 60px) 0 rgba(0, 0, 0, 0.34);
    overflow: hidden;
}

.slidevideo-wrap {
    margin-bottom: clamp(55px, calc(110/1200*100vw), 110px);
}

.hethong-layout {
    display: flex;
    gap: 30px;
}

.hethong-left {
    width: calc(520/1200*100%);
}

.hethong-right {
    flex: 1 1 0%;
    min-width: 0;
}

.swiper.hethong {}

.hethong-grid {
    filter: drop-shadow(0 7px 20px rgba(77, 35, 20, 0.1));
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    max-height: 400px;
    overflow-y: scroll;
    padding-right: 10px;
}

.hethong-grid>* {
    min-width: 0;
}

.hethong-item {
    border-radius: clamp(10px, calc(18/1200*100vw), 18px);
    border: 1px solid rgba(131, 85, 52, 0.14);
    background: #FFF;
    padding: clamp(10px, calc(20/1200*100vw), 20px);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.hethong-item__pic {
    width: 45px;
    aspect-ratio: 1/1;
    border-radius: 12px;
    box-shadow: 0 0 0 1px #F0D8BD inset;
    background: #FFF0DF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hethong-item__info {
    flex: 1 1 0%;
    min-width: 0;
}

.hethong-item__name {
    -webkit-line-clamp: 2;
    color: var(--color-main);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.hethong-item__desc {
    color: #756A61;
    font-size: 14px;
    font-weight: 700;
}

.hethong-item__desc p,
.hethong-item__desc ul {
    margin-bottom: 5px;
}

.hethong-item--active {
    background: var(--color-main);
    color: #fff;
}

.hethong-item--active .hethong-item__name,
.hethong-item--active .hethong-item__desc {
    color: inherit;
}

.hethong-link {
    display: block;
    background: var(--color-main);
    border-radius: clamp(8px, calc(14/1200*100vw), 14px);
    box-shadow: 0 12px 26px 0 rgba(181, 18, 27, 0.19);
    padding: clamp(10px, calc(14/1200*100vw), 14px);
    color: #FFF !important;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.14px;
    margin-top: 15px;
    overflow: hidden;
}

.hethong-link:before {
    background: var(--color-sub);
}

.hethong-map {
    border-radius: clamp(15px, calc(30/1200*100vw), 30px);
    box-shadow: 0 0 0 1px #DED2C3 inset, 0 18px 40px 0 rgba(74, 45, 24, 0.1);
    aspect-ratio: 660/465;
    overflow: hidden;
}

.hethong-map iframe {
    width: 100% !important;
    height: 100% !important;
}

.datban-wrap {
    background: url(../images/custom/datban-bg.jpg);
    position: relative;
    isolation: isolate;
    padding-bottom: clamp(40px, calc(80/1200*100vw), 80px);
    overflow: hidden;
}

.datban-wrap__decor1 {
    position: absolute;
    bottom: -35px;
    right: 0;
    z-index: 1;
    pointer-events: none;
    width: calc(498/1920*100%);
}

.datban-wrap .wrap-content {
    max-width: 1330px;
}

.datban-layout {
    display: flex;
    gap: clamp(30px, calc(50/1200*100vw), 50px);
}

.datban-left {
    width: calc(780/1300*100%);
}

.datban-right {
    flex: 1 1 0%;
    min-width: 0;
    color: #fff;
    margin-top: clamp(30px, calc(80/1200*100vw), 80px);
}

.datban-title {
    display: flex;
    align-items: center;
    gap: clamp(10px, calc(15/1200*100vw), 15px);
    margin-bottom: clamp(10px, calc(20/1200*100vw), 20px);
}

.datban-title__pic {
    width: clamp(54px, calc(64/1200*100vw), 64px);
}

.datban-title__name {
    font-family: var(--font-f1);
    font-size: clamp(25px, calc(55/1200*100vw), 55px);
    margin-bottom: 0;
    flex: 1 1 0%;
    min-width: 0;
}

.datban-title__desc {
    color: #F6E2C0;
    font-size: clamp(13px, calc(15/1200*100vw), 15px);
    margin-bottom: clamp(20px, calc(30/1200*100vw), 30px);
}

.datban-inputs .nn-input-wrapper {
    background: url(../images/custom/input-border.png) no-repeat top left / 100% 100% !important;
    border-radius: 0;
    border: none !important;
    min-height: clamp(50px, calc(60/1200*100vw), 60px);
    box-shadow: none !important;
}

.datban-inputs .nn-field-input {
    color: #F6E2C0 !important;
    font-size: clamp(14px, calc(15/1200*100vw), 15px);
}

.datban-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.datban-inputs .nn-field-input::-webkit-input-placeholder {
    color: #F6E2C0
}

.datban-submit {
    mask: url(../images/custom/datban-submit.png) no-repeat top center / 100% 100%;
    background: var(--color-sub);
    padding: clamp(5px, calc(10/1200*100vw), 10px);
    text-align: center;
    color: #fff;
    font-family: var(--font-f1);
    font-size: clamp(15px, calc(25/1200*100vw), 25px);
    letter-spacing: clamp(0.25px, calc(1.25/1200*100vw), 1.25px);
    transition: 0.2s;
    border: none;
    margin-top: 10px;
}

.datban-submit:hover {
    background: var(--color-main);
}

.datban-inputs .nn-field-group__error-msg {
    color: #fff;
}

.hethong-nav {
    display: inline-block;
    cursor: pointer;
    transition: .3s;
    font-family: var(--font-f1);
    font-size: clamp(20px,calc(25/1300*100vw),25px);
    color: #fff;
    background-color: var(--color-main);
    border-radius: 10px;
    padding: 7px 20px;
    margin: 0 10px 10px 10px;
    filter: drop-shadow(-3px 3px 0 var(--color-sub));
}

.hethong-nav.active {
    background: var(--color-sub);
    filter: none;
}