/* =========================
   1. BASE
   ========================= */
:root {
    --bs-white: #fff;
    --bs-primary: #222222;
    --bs-secondary: #767676;
    --bs-light: #e4e4e4;
    --bs-dark: #222222;
    --bs-beige: #b9a16b;
    --bs-lighter: #faf9f8;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    color: #222222;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7143;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
    color: #222222;
    text-decoration: none;
}

img {
    vertical-align: middle;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1, .h1 {
    font-size: calc(1.5625rem + 3.75vw);
}

h2, .h2 {
    font-size: calc(1.3rem + 0.6vw);
}

h6, .h6 {
    font-size: 1rem;
}

@media (min-width: 1200px) {
    h1, .h1 { font-size: 4.375rem; }
    h2, .h2 { font-size: 1.75rem; }
}

.fs-base {
    font-size: 0.875rem !important;
}

.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }

.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-secondary { color: #767676 !important; }
.text-dark { color: #222222 !important; }
.text-muted { color: #6c757d !important; }
.text-decoration-none { text-decoration: none !important; }

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.overflow-hidden { overflow: hidden !important; }

.bg-white { background-color: #fff !important; }

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.flex-column { flex-direction: column !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

.top-0 { top: 0 !important; }
.top-50 { top: 50% !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.start-50 { left: 50% !important; }

.translate-middle {
    transform: translate(-50%, -50%) !important;
}

.h-100 { height: 100% !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }

.pt-1 { padding-top: 0.25rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

@media (min-width: 1200px) {
    .mb-xl-4 { margin-bottom: 1.5rem !important; }
    .mb-xl-5 { margin-bottom: 3rem !important; }
    .pb-xl-2 { padding-bottom: 0.5rem !important; }
    .pb-xl-3 { padding-bottom: 1rem !important; }
}

/* =========================
   2. CONTAINER / GRID
   ========================= */
.container {
    width: 100%;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (min-width: 1500px) {
    .container { max-width: 1440px; }
}

.mw-1620 {
    width: 1620px !important;
    max-width: 100% !important;
    margin: 0 auto;
}

.border-radius-10 {
    border-radius: 10px !important;
}

.row {
    --bs-gutter-x: 1.875rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

@media (min-width: 576px) {
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .products-grid .row {
        --bs-gutter-x: 1.5rem;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6666666667%;
    }

    .products-grid .row {
        --bs-gutter-x: 1.875rem;
    }
}

@media (min-width: 1200px) {
    .col-xl-20per {
        flex: 0 0 auto;
        width: 20%;
    }

    .col-xl-80per {
        flex: 0 0 auto;
        width: 80%;
    }
}

/* =========================
   3. HEADER
   ========================= */
.header {
    display: none;
    position: relative;
    background-color: #fff;
    z-index: 2;
}

.header-fullwidth {
    padding: 0 1.75rem;
    width: 100%;
}

@media (min-width: 1500px) {
    .header-fullwidth {
        padding: 0 3.75rem;
    }
}

.header-desk {
    display: flex;
    align-items: center;
}

.header-desk_type_1 {
    padding: 1.875rem 0 1.5rem 0;
}

.header-desk_type_1 .logo {
    margin-right: 2.1875rem;
}

.header-desk_type_1 .header-tools {
    margin-left: auto;
    margin-right: -0.5rem;
}

.header-fullwidth .header-desk_type_1 {
    padding: 1.25rem 0;
}

.logo__image {
    max-width: 100%;
    max-height: 120px;
}

.header-tools {
    margin-right: -0.5rem;
}

.header-tools__item {
    display: flex;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
    color: #222222;
}

.header-tools__item:last-child {
    margin-right: 0;
}

@media (min-width: 1200px) {
    .header-tools__item {
        margin-right: 1rem;
    }
}

.header-tools__cart {
    position: relative;
}

.header-tools__cart .cart-amount {
    top: calc(0.25rem + 1em);
    left: calc(0.5rem + 1.4em);
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background: #b9a16b;
    color: #fff;
    font-size: 0.625rem;
    line-height: 1rem;
    text-align: center;
}

.navigation__list {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .navigation__item {
        margin: 0 5px;
    }
}

.navigation__link {
    display: inline-block;
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #222222;
    font-weight: 500;
    line-height: 1.5rem;
    text-decoration: none;
    text-transform: uppercase;
}

.navigation__link::after {
    content: '';
    display: block;
    position: absolute;
    top: 100%;
    left: 0.7rem;
    width: 0;
    height: 2px;
    transition: width 0.28s cubic-bezier(0.47, 0, 0.745, 0.715);
    background-color: currentColor;
}

.navigation__link:hover::after {
    width: 2em;
}

@media (min-width: 992px) {
    .navigation__link {
        padding-right: 0.7rem;
        padding-left: 0.7rem;
    }
}

.header_sticky {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    z-index: 9;
    transition: all .3s ease;
}

.header-mobile {
    height: 3.75rem;
    min-height: 3.75rem;
    background-color: #fff;
    z-index: 1030;
}

.header-mobile .logo {
    margin: 0 auto;
}

.header-mobile .logo__image {
    max-height: 3rem;
}

@media (min-width: 992px) {
    .header {
        display: block;
    }

    .header-mobile {
        display: none;
    }
}

/* =========================
   4. HERO / SLIDESHOW
   ========================= */
.slideshow {
    height: 37.5rem;
}

@media (min-width: 992px) {
    .slideshow {
        height: 50rem;
    }
}

.swiper-slide {
    overflow: hidden;
}

.slideshow-character__img {
    max-height: 555px;
}

@media (min-width: 992px) {
    .slideshow-character__img {
        max-height: 733px;
    }
}

.pos_right-center {
    left: 50%;
}

@media (min-width: 992px) {
    .pos_right-center {
        left: 60%;
    }
}

.text_dash {
    position: relative;
    padding-left: 3.25rem;
}

.text_dash::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 2.5rem;
    height: 2px;
    margin-top: -1px;
    background-color: currentColor;
}

.character_markup {
    display: none;
}

@media (min-width: 1500px) {
    .character_markup.type2 {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        font-size: 15.625rem;
        line-height: 1;
        transform: none;
        -webkit-text-stroke-width: 3px;
        -webkit-text-stroke-color: #767676;
        color: transparent;
        font-weight: 700;
        opacity: 0.3;
        letter-spacing: 0.05em;
        z-index: -1;
    }
}

/* Hero text animation used by homepage */
.animate {
    transition: all ease-in .5s;
    transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s;
}

.animate_fade {
    opacity: 0;
    visibility: hidden;
}

.animate_btt {
    position: relative;
    bottom: -2.5rem;
}

.animate_delay-3 { transition-delay: 0.3s; }
.animate_delay-5 { transition-delay: 0.5s; }
.animate_delay-7 { transition-delay: 0.7s; }
.animate_delay-9 { transition-delay: 0.9s; }
.animate_delay-10 { transition-delay: 1s; }

.swiper-slide-active .animate_fade {
    opacity: 1;
    visibility: visible;
}

.swiper-slide-active .animate_btt {
    bottom: 0;
}

/* =========================
   5. SECTION TITLES / CATEGORY
   ========================= */
.section-title {
    font-size: 1.625rem;
}

@media (min-width: 992px) {
    .section-title {
        font-size: 2.1875rem;
    }
}

/* =========================
   6. PRODUCT CARD
   ========================= */
.product-card {
    position: relative;
    overflow: hidden;
}

.product-card:hover .pc__img-second {
    opacity: 1;
}

.pc__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc__img-wrapper {
    display: block;
    position: relative;
    height: 0;
    padding-top: 121.212122%;
    overflow: hidden;
}

.pc__img-second {
    opacity: 0;
    transition: opacity 0.3s linear;
}

.pc__info {
    margin-top: 1rem;
}

.pc__category {
    margin: 0 0 .25rem;
    color: #767676;
    font-weight: 400;
    line-height: 1.7143;
}

.pc__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
}

.price {
    font-size: 1rem;
}

.product-card_style3 .pc__img-wrapper {
    border-radius: 0.625rem;
}

.product-card__price {
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.contact-price {
    color: red;
    font-weight: 700;
}

/* =========================
   7. CATEGORY CAROUSEL
   ========================= */
.category-carousel {
    position: relative;
}

.category-carousel .swiper-slide {
    text-align: center;
}

/* =========================
   8. HOT DEALS
   ========================= */
.hot-deals {
    --countdown-space: 0.875rem;
}

.hot-deals .countdown-unit {
    position: relative;
    padding-right: calc(var(--countdown-space) * 2);
    line-height: 1;
    font-size: 1.125rem;
}

.hot-deals .countdown-word {
    font-size: 0.875rem;
}

.hot-deals .day::after,
.hot-deals .hour::after,
.hot-deals .min::after {
    content: ':';
    display: block;
    position: absolute;
    top: 0;
    right: var(--countdown-space);
}

.swiper-slide.product-card {
    width: 50%;
}

@media (min-width: 768px) {
    .swiper-slide.product-card {
        width: 33.33333%;
    }
}

@media (min-width: 992px) {
    .swiper-slide.product-card {
        width: 25%;
    }
}

.products-carousel__prev,
.products-carousel__next {
    width: 35px;
    height: 35px;
    margin-top: -2.2rem;
    transform: translateY(-50%);
    border: 1px solid #e4e4e4;
    border-radius: 100%;
    background-color: #fff;
    z-index: 1;
    outline: none;
}

.products-carousel__prev svg,
.products-carousel__next svg {
    color: #767676;
    width: 10px;
    height: auto;
}

.products-carousel__prev {
    left: -0.625rem;
}

.products-carousel__next {
    right: -0.625rem;
}

@media (min-width: 1530px) {
    .products-carousel__prev:not(.navigation-sm),
    .products-carousel__next:not(.navigation-sm) {
        width: 25px;
        height: 25px;
        margin-top: -0.875rem;
        border: 0;
        opacity: 0.5;
    }

    .products-carousel__prev:not(.navigation-sm) svg,
    .products-carousel__next:not(.navigation-sm) svg {
        width: 25px;
    }

    .products-carousel__prev:not(.navigation-sm):hover,
    .products-carousel__next:not(.navigation-sm):hover {
        opacity: 1;
    }

    .products-carousel__prev {
        left: -3rem;
    }

    .products-carousel__next {
        right: -3rem;
    }
}

/* =========================
   9. FEATURED PRODUCT GRID
   ========================= */
.products-grid .row {
    --bs-gutter-x: 0.875rem;
}

@media (min-width: 768px) {
    .products-grid .row {
        --bs-gutter-x: 1.5rem;
    }
}

@media (min-width: 992px) {
    .products-grid .row {
        --bs-gutter-x: 1.875rem;
    }
}

/* =========================
   10. HOMEPAGE SPACING
   ========================= */
main > .mb-3.mb-xl-5.pt-1.pb-4 {
    min-height: 1px;
}

/* =========================
   11. MOBILE HEADER BASICS
   ========================= */
.mobile-nav-activator {
    display: block;
    position: relative;
}

.mobile-nav-activator .nav-icon,
.mobile-nav-activator .btn-close-lg {
    transition: all .24s;
}

.mobile-nav-activator .btn-close-lg {
    transform: rotate(-90deg);
    opacity: 0;
    visibility: hidden;
}

@media (min-width: 992px) {
    .header-mobile {
        display: none !important;
    }
}

/* Trước khi Swiper init: cho ảnh slide đầu hiện ngay (không chờ JS) */
.slideshow:not(.swiper-initialized):not(.swiper-container-initialized)
  .swiper-slide:first-child .slideshow-character__img {
    opacity: 1;
    visibility: visible;
    bottom: 0;
    transition: none;
}