footer {
    background: #29231E;
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}

.menu-component {
    background: rgba(31, 31, 31, 0.80);
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

@media (min-width: 1200px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1560px;
    }
}

/* ==========================================================================
   Hero Slider Styling (Artora Custom)
   ========================================================================== */
.slider-hero-artora.swiper-slider-main {
    height: 96.4rem;
    position: relative;
}

.slider-hero-artora .swiper-slide {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.slider-hero-artora .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.slider-hero-artora .slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.slider-hero-artora .slider-ellipse-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 109.5rem;
    height: 11.4rem;
    background-color: #29231E;
    filter: blur(150px);
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
}

.slider-hero-artora .swiper-slide .swiper-slide--wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 120rem;
    width: 100%;
    padding: 0 4rem;
    z-index: 4;
}

.slider-hero-artora .swiper-slide--pre-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.3;
    color: #CFA261;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.slider-hero-artora .swiper-slide--tile {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 6rem;
    line-height: 1.3;
    color: #FFFFFF;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    margin-bottom: 2.4rem;
}

.slider-hero-artora .swiper-slide--description {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 3.2rem;
    white-space: pre-line;
}

.slider-hero-artora .swiper-slide--link {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.7rem;
    line-height: 5.6rem;
    height: 5.6rem;
    padding: 0 3.2rem;
    background-color: #CFA261;
    color: #090915;
    border-radius: 8px;
    border: none;
    text-transform: none;
    display: inline-block;
    transition: all 0.3s ease;
    text-decoration: none;
}

.slider-hero-artora .swiper-slide--link:hover {
    background-color: #e2b472;
    color: #090915;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(207, 162, 97, 0.3);
}

/* Swiper Arrows */
.slider-hero-artora .swiper-button-next,
.slider-hero-artora .swiper-button-prev {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-hero-artora .swiper-button-next:hover,
.slider-hero-artora .swiper-button-prev:hover {
    background-color: #CFA261;
    border-color: #CFA261;
    color: #090915;
}

.slider-hero-artora .swiper-button-next::after,
.slider-hero-artora .swiper-button-prev::after {
    display: none;
}

.slider-hero-artora .swiper-button-next i,
.slider-hero-artora .swiper-button-prev i {
    font-size: 2rem;
}

/* Swiper Pagination */
.slider-hero-artora .swiper-pagination-bullet {
    background: #FFFFFF;
    opacity: 0.5;
    width: 1rem;
    height: 1rem;
    transition: all 0.3s ease;
}

.slider-hero-artora .swiper-pagination-bullet-active {
    background: #CFA261;
    opacity: 1;
    width: 2.4rem;
    border-radius: 0.5rem;
}

/* Media Queries */
@media (max-width: 1024px) {
    .slider-hero-artora.swiper-slider-main {
        height: 68rem;
    }

    .slider-hero-artora .swiper-slide--tile {
        font-size: 5rem;
        margin-bottom: 2rem;
    }

    .slider-hero-artora .swiper-slide--pre-title {
        font-size: 2rem;
    }

    .slider-hero-artora .swiper-slide--description {
        font-size: 1.6rem;
        margin-bottom: 2.8rem;
    }

    .slider-hero-artora .slider-ellipse-glow {
        width: 80rem;
        height: 10rem;
    }
}

@media (max-width: 767px) {
    .slider-hero-artora.swiper-slider-main {
        height: 50rem;
    }

    .slider-hero-artora .swiper-slide .swiper-slide--wrap {
        padding: 0 2.4rem;
    }

    .slider-hero-artora .swiper-slide--pre-title {
        font-size: 1.6rem;
        margin-bottom: 0.6rem;
    }

    .slider-hero-artora .swiper-slide--tile {
        font-size: 3.2rem;
        margin-bottom: 1.8rem;
    }

    .slider-hero-artora .swiper-slide--description {
        font-size: 1.4rem;
        margin-bottom: 2.4rem;
    }

    .slider-hero-artora .slider-ellipse-glow {
        width: 100%;
        height: 15rem;
        filter: blur(100px);
    }

    .slider-hero-artora .swiper-slide--link {
        height: 4.8rem;
        line-height: 4.8rem;
        padding: 0 2.4rem;
        font-size: 1.5rem;
    }

    .slider-hero-artora .swiper-button-next,
    .slider-hero-artora .swiper-button-prev {
        width: 4rem;
        height: 4rem;
    }

    .slider-hero-artora .swiper-button-next i,
    .slider-hero-artora .swiper-button-prev i {
        font-size: 1.6rem;
    }
}

/* ==========================================================================
   Achievements Section Styling (Artora Custom Flex Layout)
   ========================================================================== */
.section-achievements {
    background-color: #F9F0EB;
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

@media (min-width: 768px) {
    .section-achievements {
        padding: 9.6rem 0;
    }
}

.achievement-flex-container {
    width: 100%;
    gap: 4.8rem;
    justify-content: center;
}

.achievement-left-part {
    flex: 1 1 60rem;
    max-width: 60rem;
    gap: 5.6rem;
}

.achievement-years-block {
    flex: 0 0 auto;
}

.achievement-years {
    font-family: 'Cormorant Infant', 'Playfair Display', serif;
    font-weight: 700;
    font-size: 18.5rem;
    line-height: 1.1;
    letter-spacing: -0.08em;
    color: #CF9F5F;
    margin-bottom: 0.8rem;
}

.achievement-years-label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.3;
    color: #090915;
    text-transform: uppercase;
    text-align: center;
}

.achievement-info-block {
    flex: 1 1 auto;
    max-width: 39.8rem;
}

.achievement-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.3;
    color: #090915;
    margin-bottom: 1.6rem;
}

.achievement-description {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.35;
    color: #090915;
    margin-bottom: 1.6rem;
}

.achievement-more-link {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 1.3;
    color: #8D5535;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.achievement-more-link:hover {
    color: #CF9F5F;
    transform: translateX(4px);
    text-decoration: none;
}

.vertical-separator {
    width: 1.55px;
    align-self: stretch;
    background-color: #CFCFCF;
    flex: 0 0 1.55px;
}

.achievement-right-part {
    flex: 1 1 86.4rem;
    max-width: 86.4rem;
}

.benefit-flex-wrap {
    gap: 3.2rem;
}

/* Benefit Cards */
.benefit-card {
    flex: 1 1 0;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.8rem;
    transition: all 0.3s ease;
}

.benefit-icon {
    width: 4.8rem;
    height: 4.8rem;
    font-size: 4rem;
    color: #CF9F5F;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.8rem;
}

.benefit-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.benefit-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.8rem;
    line-height: 1.3;
    color: #090915;
    text-transform: uppercase;
    margin: 0;
}

.benefit-desc {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.35;
    color: #939393;
    margin: 0;
}

.benefit-card:hover {
    transform: translateY(-5px);
}

/* Responsive Custom Flex Layout */
@media (max-width: 1199px) {
    .achievement-flex-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4.8rem;
    }

    .achievement-left-part {
        max-width: 100% !important;
        justify-content: center;
    }

    .achievement-right-part {
        max-width: 100% !important;
    }

    .benefit-flex-wrap {
        gap: 2rem;
    }
}

@media (max-width: 767px) {
    .achievement-left-part {
        flex-direction: column !important;
        gap: 2.4rem;
        text-align: center;
    }

    .achievement-years-block {
        padding-right: 0 !important;
        margin-bottom: 1rem;
    }

    .achievement-years {
        font-size: 12rem;
    }

    .achievement-years-label {
        font-size: 1.8rem;
    }

    .achievement-info-block {
        max-width: 100%;
        text-align: center;
    }

    .achievement-title {
        font-size: 2.6rem;
    }

    .benefit-flex-wrap {
        flex-direction: column !important;
        gap: 2.4rem;
    }

    .benefit-card {
        align-items: center;
        text-align: center;
        padding: 2rem 1.6rem;
    }

    .benefit-icon {
        justify-content: center;
        margin-bottom: 0.4rem;
    }
}

/* ==========================================================================
   Collections Section Styling (Artora Custom Alternating Layouts)
   ========================================================================== */
.section-collection-wrap {
    width: 100%;
    position: relative;
}

.collection-header-section {
    background-color: #FFFFFF;
    padding: 9.6rem 0;
}

.collection-header-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #CF9F5F;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.collection-header-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 1.85;
    color: #1E232D;
}

.collection-header-desc {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.4;
    color: #1E232D;
    max-width: 94rem;
}

/* Base Collection Item */
.collection-item-section {
    width: 100%;
    height: 97.6rem;
    position: relative;
    overflow: hidden;
}

.collection-panel-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 3.2rem;
    line-height: 1.3;
    color: #090915;
    margin-bottom: 2rem;
}

.collection-giant-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16.8rem;
    line-height: 0.7;
    color: #CF9F5F;
    margin-bottom: 4rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.collection-subheading {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.3;
    color: #090915;
    margin-bottom: 1.6rem;
}

.collection-description {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.35;
    color: #090915;
    margin-bottom: 3rem;
}

/* Buttons */
.collection-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24rem;
    height: 5.6rem;
    border-radius: 0.8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 510;
    font-size: 1.7rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-gold {
    background-color: transparent;
    color: #090915;
    border: 1px solid #CFA261;
}

.btn-gold:hover {
    background-color: #CF9F5F;
    color: #FFFFFF;
    border-color: #CF9F5F;
}

.btn-outline-gold {
    background-color: transparent;
    color: #CFA261;
    border: 1px solid #CFA261;
}

.btn-outline-gold:hover {
    background-color: #CF9F5F;
    color: #FFFFFF;
    border-color: #CF9F5F;
}

.btn-outline-white {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.btn-outline-white:hover {
    background-color: #FFFFFF;
    color: #090915;
}

/* Layout 1: Italiano */
.layout-italiano {
    position: relative;
}

.layout-italiano .italiano-image-part {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.layout-italiano .italiano-white-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 67.9rem;
    height: 100%;
    background-color: #FFFFFF;
    display: flex;
    align-items: flex-end;
    padding-left: calc((100vw - 156rem) / 2 + 1.5rem);
    padding-right: 8rem;
    padding-bottom: 12.8rem;
    z-index: 2;
}

/* When container width is not maxed */
@media (max-width: 1599px) {
    .layout-italiano .italiano-white-panel {
        padding-left: 8rem;
    }
}

.layout-italiano .italiano-panel-content {
    max-width: 44.8rem;
}

.layout-italiano .italiano-title-group {
    position: absolute;
    top: 12.8rem;
    left: calc((100vw - 156rem) / 2 + 1.5rem);
    z-index: 10;
    width: calc(156rem - 3rem);
}

.layout-italiano .italiano-title-group .collection-panel-subtitle {
    margin-bottom: 1.5rem;
}

.layout-italiano .italiano-title-group .collection-giant-title {
    margin-bottom: 0;
}

@media (max-width: 1599px) {
    .layout-italiano .italiano-title-group {
        left: 8rem;
    }
}

.layout-italiano .collection-details-box {
    max-width: 39.8rem;
}

/* Layout 2: Minimal */
.layout-minimal {
    display: flex;
}

.layout-minimal .minimal-image-part {
    flex: 1 1 auto;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.layout-minimal .minimal-dark-panel {
    width: 67.9rem;
    height: 100%;
    background-color: #3E301D;
    display: flex;
    align-items: flex-end;
    padding-left: 8rem;
    padding-right: calc((100vw - 156rem) / 2 + 1.5rem);
    padding-bottom: 16rem;
    flex: 0 0 67.9rem;
}

@media (max-width: 1599px) {
    .layout-minimal .minimal-dark-panel {
        padding-right: 8rem;
        padding-left: 6rem;
    }
}

.layout-minimal .minimal-panel-content {
    max-width: 44.8rem;
}

.layout-minimal .minimal-title-group {
    position: absolute;
    top: 16rem;
    left: calc((100vw - 156rem) / 2 + 1.5rem);
    z-index: 10;
    width: calc(156rem - 3rem);
}

.layout-minimal .minimal-title-group .collection-panel-subtitle {
    margin-bottom: 1.5rem;
}

.layout-minimal .minimal-title-group .collection-giant-title {
    color: #FFFFFF;
    font-family: 'Inter', 'Playfair Display', sans-serif;
    font-weight: 800;
    font-size: 15rem;
    margin-bottom: 0;
    line-height: 0.7;
}

@media (max-width: 1599px) {
    .layout-minimal .minimal-title-group {
        left: 8rem;
    }
}

/* Layout 3: Indochine */
.layout-indochine {
    display: flex;
    align-items: flex-end;
    padding-bottom: 9.6rem;
    padding-left: calc((100vw - 156rem) / 2 + 1.5rem);
    padding-right: calc((100vw - 156rem) / 2 + 1.5rem);
}

@media (max-width: 1599px) {
    .layout-indochine {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

.indochine-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(172deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.72) 80%, rgba(0, 0, 0, 0.9) 100%);
    z-index: 1;
}

.indochine-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.indochine-left {
    flex: 1 1 auto;
}

.indochine-left .collection-giant-title {
    margin-bottom: 0;
    font-size: 13.3rem;
    font-family: 'Instrument Sans', 'Playfair Display', sans-serif;
    font-weight: 500;
}

.indochine-right {
    width: 44.8rem;
    flex: 0 0 44.8rem;
}

/* Responsive for Collections */
@media (max-width: 1199px) {
    .collection-header-title {
        font-size: 3.6rem;
    }

    .collection-item-section {
        height: auto;
        min-height: auto;
        max-height: none;
        display: flex;
        flex-direction: column;
    }

    .collection-giant-title {
        font-size: 8rem !important;
        margin-bottom: 2rem;
    }

    .collection-subheading {
        font-size: 2.6rem;
    }

    /* Layout 1: Italiano */
    .layout-italiano .italiano-image-part {
        position: relative;
        width: 100%;
        height: 40rem;
    }

    .layout-italiano .italiano-title-group {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        padding: 4rem 2rem 0 2rem;
        z-index: 2;
    }

    .layout-italiano .italiano-white-panel {
        position: relative;
        width: 100%;
        height: auto;
        padding: 2rem 2rem 4rem 2rem;
        z-index: 2;
        display: block;
    }

    /* Layout 2: Minimal */
    .layout-minimal {
        flex-direction: column;
    }

    .layout-minimal .minimal-image-part {
        width: 100%;
        height: 40rem;
        flex: 0 0 40rem;
    }

    .layout-minimal .minimal-dark-panel {
        width: 100%;
        height: auto;
        padding: 4rem 2rem;
        flex: 1 1 auto;
    }

    .layout-minimal .minimal-title-group {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 2rem;
    }

    /* Layout 3: Indochine */
    .layout-indochine {
        padding: 4rem 2rem;
        min-height: 60rem;
    }

    .indochine-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 3rem;
    }

    .indochine-right {
        width: 100%;
        flex: 0 0 auto;
    }
}

@media (max-width: 767px) {
    .collection-header-title {
        font-size: 2.8rem;
    }

    .collection-header-desc {
        font-size: 1.6rem;
    }

    .collection-giant-title {
        font-size: 5.4rem !important;
    }

    .collection-subheading {
        font-size: 2.2rem;
    }

    .collection-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Product Home Section Styling
   ========================================================================== */
.section-product-home-wrap {
    background-color: #29231E;
    padding: 12.8rem 0;
}

.product-home-header {
    margin-bottom: 4rem;
}

.product-home-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #CF9F5F;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}

.product-home-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.product-home-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 1.25;
    color: #FFFFFF;
    flex: 0 0 83rem;
    max-width: 83rem;
    margin: 0;
}

.product-home-desc {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.8rem;
    line-height: 1.35;
    color: #FFFFFF;
    opacity: 0.85;
    flex: 1 1 auto;
    margin: 0;
}

.product-home-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 4rem;
    padding-bottom: 1.6rem;
}

.product-home-tabs {
    gap: 2.4rem;
}

.product-home-tabs .nav-link {
    font-family: 'Playfair Display', serif;
    font-weight: 510;
    font-size: 2rem;
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 1.6rem 0 !important;
    position: relative;
    transition: color 0.3s ease;
}

.product-home-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: -1.7rem;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #CF9F5F;
    transition: width 0.3s ease;
}

.product-home-tabs .nav-link.active {
    color: #CF9F5F !important;
}

.product-home-tabs .nav-link.active::after {
    width: 100%;
}

.product-home-nav-buttons {
    display: flex;
    gap: 1.6rem;
}

.product-home-nav-buttons .nav-btn {
    width: 5.6rem;
    height: 5.6rem;
    border: 1px solid #CF9F5F;
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05);
}

.product-home-nav-buttons .nav-btn:hover {
    background-color: #CF9F5F;
    color: #FFFFFF;
}

/* Product Grid & Swiper (Flexbox/Grid style that is easily converted to Swiper if user configures it) */
.product-home-grid,
.product-home-swiper {
    width: 100%;
    overflow: hidden;
}

.product-home-grid {
    display: flex;
    gap: 3.2rem;
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.product-home-grid::-webkit-scrollbar {
    height: 6px;
}

.product-home-grid::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.product-home-card {
    flex: 0 0 49.9rem;
    width: 49.9rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.product-home-img-wrap {
    width: 100%;
    height: 34.2rem;
    border-radius: 0.4rem;
    overflow: hidden;
}

.product-home-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.product-home-category {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #939393;
    text-transform: uppercase;
}

.product-home-item-title {
    font-family: 'Playfair Display', serif;
    font-weight: 590;
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0;
}

.product-home-item-title a {
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.3s ease;
}

.product-home-item-title a:hover {
    color: #CF9F5F;
}

.product-home-item-desc {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.35;
    color: #FFFFFF;
    opacity: 0.7;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 4.6rem;
}

.product-home-link-wrap {
    padding: 0.8rem 0;
}

.product-home-detail-link {
    color: #FFFFFF;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.product-home-detail-link:hover {
    color: #CF9F5F;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-product-home-wrap {
        padding: 6rem 0;
    }

    .product-home-header-row {
        flex-direction: column;
        gap: 1.6rem;
    }

    .product-home-title {
        max-width: 100%;
        font-size: 3.6rem;
    }

    .product-home-desc {
        font-size: 1.6rem;
    }

    .product-home-card {
        flex: 0 0 38rem;
        width: 38rem;
    }
}

@media (max-width: 767px) {
    .product-home-title {
        font-size: 2.8rem;
    }

    .section-product-home-wrap .product-home-img-wrap {
        height: 24.2rem;
    }

    .product-home-tabs {
        gap: 1.6rem;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        scrollbar-width: none;
    }

    .product-home-tabs::-webkit-scrollbar {
        display: none;
    }

    .product-home-tabs .nav-link {
        font-size: 1.7rem;
    }

    .product-home-nav-buttons {
        display: none !important;
    }

    .product-home-card {
        flex: 0 0 28rem;
        width: 28rem;
    }
}

/* ==========================================================================
   Strength Section (Gia tri khac biet - hmgtkb1) Styling
   ========================================================================== */
.section-gia-tri-khac-biet {
    background-color: #FFFFFF;
    padding: 6rem 0;
}

@media (min-width: 1200px) {
    .section-gia-tri-khac-biet {
        padding: 12.8rem 0 8rem;
    }
}

.strength-header {
    margin-bottom: 4rem;
}

@media (min-width: 992px) {
    .strength-header {
        margin-bottom: 8rem;
    }
}

.strength-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #CFA261;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.strength-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 2rem;
}

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

.strength-desc {
    font-size: 1.6rem;
    line-height: 1.45;
    color: #090915;
    max-width: 100rem;
    opacity: 0.8;
}

@media (min-width: 992px) {
    .strength-desc {
        font-size: 1.8rem;
    }
}

.strength-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem 3.2rem;
    width: 100%;
}

@media (min-width: 768px) {
    .strength-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .strength-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.strength-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.4rem;
    border-radius: 8px;
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

.strength-card:hover {
    background-color: #FFFFFF;
    box-shadow: 0px 0px 30px 0px rgba(207, 159, 95, 0.25);
    transform: translateY(-5px);
}

.strength-card-icon-wrap {
    width: 10.4rem;
    height: 10.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 2.4rem;
}

.strength-card-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.strength-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #CFA261;
    margin-bottom: 1.6rem;
}

@media (min-width: 992px) {
    .strength-card-title {
        font-size: 2.2rem;
    }
}

.strength-card-desc {
    font-size: 1.5rem;
    line-height: 1.45;
    color: #090915;
    opacity: 0.85;
}

@media (min-width: 992px) {
    .strength-card-desc {
        font-size: 1.7rem;
    }
}

/* ==========================================================================
   CTA Block Section (hmctac1) Styling
   ========================================================================== */
.section-block-cta {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 0;
    color: #FFFFFF;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .section-block-cta {
        padding: 28.8rem 0;
    }
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.cta-top-gradient {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 23.7rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(255, 255, 255, 0.84) 43%, rgba(255, 255, 255, 0.64) 55%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.cta-decor-container {
    position: absolute;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 125rem;
    aspect-ratio: 1560 / 376;
    z-index: 2;
    pointer-events: none;
}

.cta-decor-by {
    position: absolute;
    left: 0.77%;
    top: 4%;
    width: 35.5%;
    height: auto;
    opacity: 0.85;
}

.cta-decor-artora {
    position: absolute;
    left: 0;
    top: 18.6%;
    width: 100%;
    height: auto;
    opacity: 0.85;
}

.cta-container {
    position: relative;
    z-index: 3;
}

.cta-content {
    max-width: 110rem;
    margin: 0 auto;
}

.cta-title {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1.15;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 2.4rem;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
}

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

.cta-desc {
    font-size: 1.6rem;
    line-height: 1.45;
    color: #FFFFFF;
    max-width: 100rem;
    margin-bottom: 4rem;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);
    opacity: 0.95;
}

@media (min-width: 992px) {
    .cta-desc {
        font-size: 2rem;
    }
}

.cta-buttons-wrap {
    gap: 2.4rem;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    padding: 0 3.2rem;
    font-size: 1.7rem;
    font-weight: 510;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
}

.cta-btn-solid {
    background-color: #CFA261;
    color: #090915;
    border: 1px solid #CFA261;
}

.cta-btn-solid:hover {
    background-color: transparent;
    color: #CFA261;
}

.cta-btn-outline {
    background-color: transparent;
    color: #CFA261;
    border: 1px solid #CFA261;
}

.cta-btn-outline:hover {
    background-color: #CFA261;
    color: #090915;
}

/* ==========================================================================
   Projects Section (Du an - view_du_an_home.tpl) Styling
   ========================================================================== */
.section-du-an-home {
    background-color: #F9F0EB;
    padding: 6rem 0;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .section-du-an-home {
        padding: 6rem 0;
    }
}

.project-header-container {
    margin-bottom: 4rem;
}

@media (min-width: 1200px) {
    .project-header-container {
        margin-bottom: 8rem;
    }
}

.project-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #CFA261;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.project-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 2rem;
}

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

.project-desc {
    font-size: 1.6rem;
    line-height: 1.45;
    color: #090915;
    max-width: 103rem;
    opacity: 0.8;
}

@media (min-width: 992px) {
    .project-desc {
        font-size: 1.8rem;
    }
}

.project-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    padding: 0 3.2rem;
    font-size: 1.7rem;
    font-weight: 510;
    border-radius: 8px;
    background-color: #CFA261;
    color: #090915;
    border: 1px solid #CFA261;
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
}

.project-more-btn:hover {
    background-color: transparent;
    color: #CFA261;
}

.project-slider-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 8rem;
}

.project-swiper {
    width: 100%;
    overflow: visible !important;
}

.project-slide {
    width: 85% !important;
    transform: scale(0.81);
    opacity: 0.6;
    transition: all 0.4s ease-in-out;
}

@media (min-width: 992px) {
    .project-slide {
        width: 58% !important;
    }
}

.project-slide.swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

.project-card {
    width: 100%;
    height: auto;
}

.project-image-part {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 2.4rem;
}

.project-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.project-slide.swiper-slide-active .project-card:hover .project-img {
    transform: scale(1.05);
}

.project-text-part {
    max-width: 85%;
    transition: all 0.4s ease-in-out;
}

@media (min-width: 992px) {
    .project-text-part {
        max-width: 58.5rem;
    }
}

.project-card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1.6rem;
}

@media (min-width: 992px) {
    .project-card-title {
        font-size: 2.4rem;
    }
}

.project-card-title a {
    color: #CFA261;
    text-decoration: none !important;
}

.project-card-desc {
    font-size: 1.4rem;
    line-height: 1.45;
    color: #090915;
    opacity: 0.85;
}

@media (min-width: 992px) {
    .project-card-desc {
        font-size: 1.7rem;
    }
}

.project-slider-nav {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 86.4rem;
    height: 5.6rem;
    z-index: 10;
    padding: 0 2rem;
    pointer-events: none;
}

@media (max-width: 991px) {
    .project-slider-nav {
        max-width: 25rem;
    }
}

.project-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border: 1px solid #CF9F5F;
    background-color: transparent;
    color: #CF9F5F;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    pointer-events: auto;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
}

.project-nav-btn:hover {
    background-color: #CF9F5F;
    color: #FFFFFF;
}

.project-nav-btn i {
    font-size: 2rem;
}

/* ==========================================================================
   News Section (Tin tuc - view_tin_tuc.tpl) Styling
   ========================================================================== */
.section-tin-tuc-home {
    background-color: #F5F5F7;
    padding: 6rem 0;
    overflow: hidden;
}

.news-header-container {
    margin-bottom: 4rem;
}

@media (min-width: 1200px) {
    .news-header-container {
        margin-bottom: 9.6rem;
    }
}

.news-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #CFA261;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.news-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 2rem;
}

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

.news-desc {
    font-size: 1.6rem;
    line-height: 1.45;
    color: #090915;
    max-width: 63.1rem;
    opacity: 0.8;
}

@media (min-width: 992px) {
    .news-desc {
        font-size: 1.8rem;
    }
}

.news-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    padding: 0 3.2rem;
    font-size: 1.7rem;
    font-weight: 510;
    border-radius: 8px;
    background-color: #CFA261;
    color: #090915;
    border: 1px solid #CFA261;
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
}

.news-more-btn:hover {
    background-color: transparent;
    color: #CFA261;
}

.news-slider-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 8rem;
}

.news-swiper {
    width: 100%;
}

.news-card {
    background: transparent;
    border: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.news-image-part {
    width: 100%;
    height: 30rem;
    border-radius: 8px;
    overflow: hidden;
}

.news-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-card:hover .project-img,
.news-card:hover .news-img {
    transform: scale(1.05);
}

.news-content-part {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
}

.news-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 590;
    line-height: 1.3;
    margin: 0;
}

.news-card-title a {
    color: #1D1D1F;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.news-card-title a:hover {
    color: #CFA261;
}

.news-card-desc {
    font-size: 1.7rem;
    line-height: 1.35;
    color: #64748B;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-footer {
    margin-top: 0.8rem;
    border-top: none;
    padding: 0;
    background: transparent;
}

.news-detail-link {
    font-size: 1.7rem;
    font-weight: 510;
    line-height: 1.35;
    color: #1D1D1F;
    text-decoration: none !important;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid #1D1D1F;
    transition: all 0.3s ease;
}

.news-detail-link:hover {
    color: #CFA261;
    border-bottom-color: #CFA261;
}

.news-date {
    font-size: 1.5rem;
    line-height: 1.35;
    color: #1D1D1F;
}

.news-slider-nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 86.4rem;
    height: 5.6rem;
    z-index: 10;
    padding: 0 2rem;
    pointer-events: none;
}

@media (max-width: 991px) {
    .news-slider-nav {
        max-width: 25rem;
    }
}

.news-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 50%;
    border: 1px solid #CF9F5F;
    background-color: transparent;
    color: #CF9F5F;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    pointer-events: auto;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
}

.news-nav-btn:hover {
    background-color: #CF9F5F;
    color: #FFFFFF;
}

.news-nav-btn i {
    font-size: 2rem;
}

/* ==========================================================================
   Customers Section (Khach hang - view_home_khach_hang.tpl) Styling
   ========================================================================== */
.section-khach-hang-home {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    min-height: 52.2rem;
}

@media (min-width: 1200px) {
    .section-khach-hang-home {
        padding: 12.8rem 0;
    }
}

.customer-bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(7.5px) brightness(0.95);
    transform: scale(1.05);
    z-index: 1;
}

.customer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 2;
}

.customer-header-container {
    position: relative;
    z-index: 3;
    margin-bottom: 4rem;
}

@media (min-width: 1200px) {
    .customer-header-container {
        margin-bottom: 0rem;
    }
}

.customer-subtitle {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
    color: #CFA261;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.customer-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 2rem;
}

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

.customer-desc {
    font-size: 1.6rem;
    line-height: 1.45;
    color: #090915;
    max-width: 100rem;
    opacity: 0.8;
}

@media (min-width: 992px) {
    .customer-desc {
        font-size: 1.8rem;
    }
}

.customer-slider-wrapper {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: 6rem;
}

.customer-card {
    width: 100%;
    padding: 2.4rem;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .customer-card {
        padding: 4rem;
    }
}

.customer-card-header {
    margin-bottom: 2.4rem;
}

.customer-name {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 2.4rem;
    line-height: 1.3;
    color: #1D1D1F;
    margin-bottom: 0.4rem;
}

@media (min-width: 992px) {
    .customer-name {
        font-size: 3.2rem;
    }
}

.customer-role {
    font-size: 1.5rem;
    font-weight: 510;
    line-height: 1.35;
    color: #CFA261;
}

@media (min-width: 992px) {
    .customer-role {
        font-size: 1.7rem;
    }
}

.customer-quote-icon {
    width: 4.8rem;
    height: 4.8rem;
}

@media (min-width: 992px) {
    .customer-quote-icon {
        width: 7.1rem;
        height: 7.1rem;
    }
}

.customer-quote-icon .quote-svg {
    width: 100%;
    height: auto;
}

.customer-quote {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #1D1D1F;
    margin: 0;
}

@media (min-width: 992px) {
    .customer-quote {
        font-size: 1.8rem;
    }
}

/* Dots pagination styling */
.section-khach-hang-home .swiper-pagination-bullet {
    background-color: #090915;
    opacity: 0.2;
    width: 8px;
    height: 8px;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

.section-khach-hang-home .swiper-pagination-bullet-active {
    background-color: #CFA261;
    opacity: 1;
    transform: scale(1.2);
}

/* Hide standard navigation buttons on mobile, show on desktop */
.section-khach-hang-home .swiper-button-next,
.section-khach-hang-home .swiper-button-prev {
    color: #CFA261;
    display: none !important;
}

@media (min-width: 1200px) {

    .section-khach-hang-home .swiper-button-next,
    .section-khach-hang-home .swiper-button-prev {
        display: flex !important;
    }
}

/* ==========================================================================
   Extracted Footer Styles
   ========================================================================== */
/* Footer Contact Section */
.footer-contact-section {
    position: relative;
    background: url('../img/bg_contact.png') no-repeat center center / cover;
    padding: 96px 0;
    z-index: 1;
    overflow: hidden;
}

.footer-contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.contact-box {
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.04), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.contact-info-panel {
    background-color: #111111;
    padding: 64px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.contact-info-panel .blur-overlay-bg {
    position: absolute;
    right: -64px;
    top: -64px;
    width: 256px;
    height: 256px;
    background-color: rgba(1, 22, 115, 0.5);
    filter: blur(32px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.info-content-wrap {
    position: relative;
    z-index: 2;
}

.contact-info-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 16px;
    text-transform: none;
}

.contact-info-desc {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.35;
    color: #DBEAFE;
    margin-bottom: 48px;
}

.contact-details-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-detail-item {
    gap: 16px;
}

.detail-icon-box {
    width: 32px;
    height: 32px;
    background-color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D1D1F;
    font-size: 14px;
    flex-shrink: 0;
}

.detail-text {
    font-weight: 510;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
}

.contact-info-panel .info-bottom {
    margin-top: 64px;
}

.contact-info-panel .divider-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

.satisfied-customers {
    gap: 16px;
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #0F2B5C;
    overflow: hidden;
    margin-right: -12px;
    position: relative;
    background: #FFFFFF;
    flex-shrink: 0;
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.count-circle {
    background-color: #011673;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 10px;
    border: 2px solid #0F2B5C;
}

.count-circle span {
    margin-right: 0;
}

.satisfied-text {
    display: flex;
    flex-direction: column;
}

.satisfied-title {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    color: #FFFFFF;
}

.satisfied-subtitle {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.3;
    color: #BFDBFE;
}

.contact-form-panel {
    padding: 64px;
    background-color: #FFFFFF;
}

.contact-ajax-form .form-label {
    font-weight: 400;
    font-size: 17px;
    color: #1D1D1F;
    margin-bottom: 8px;
    display: inline-block;
}

.contact-ajax-form .required-star {
    color: #E9272C;
    margin-left: 2px;
}

.contact-ajax-form .form-control {
    background-color: #F5F5F7;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    height: 48px;
    padding: 12px 16px;
    font-weight: 510;
    font-size: 17px;
    color: #1D1D1F;
    transition: all 0.3s ease;
}

.contact-ajax-form .form-control:focus {
    background-color: #FFFFFF;
    border-color: #011673;
    box-shadow: 0 0 0 3px rgba(1, 22, 115, 0.1);
    outline: none;
}

.contact-ajax-form .text-area-requirement {
    height: 120px !important;
    resize: none;
}

.btn-submit-contact {
    background-color: #E9272C;
    color: #FFFFFF;
    font-weight: 510;
    font-size: 16px;
    height: 48px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-submit-contact:hover {
    background-color: #c92024;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.btn-submit-contact:active {
    transform: translateY(0);
}

.form-policy-note {
    font-weight: 400;
    font-size: 16px;
    color: #64748B;
    margin-top: 16px;
    line-height: 1.35;
}

/* Responsive adjustments for Footer Contact Section */
@media (max-width: 1199px) {
    .footer-contact-section {
        padding: 80px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 48px;
    }

    .contact-info-title {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    .footer-contact-section {
        padding: 60px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 40px;
    }

    .contact-info-desc {
        margin-bottom: 32px;
    }

    .contact-info-panel .info-bottom {
        margin-top: 48px;
    }
}

@media (max-width: 767px) {
    .footer-contact-section {
        padding: 40px 0;
    }

    .contact-info-panel,
    .contact-form-panel {
        padding: 24px;
    }

    .contact-info-title {
        font-size: 24px;
    }

    .contact-info-desc {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .detail-text {
        font-size: 15px;
    }

    .btn-submit-contact {
        font-size: 16px;
    }

    .form-policy-note {
        font-size: 13px;
    }

    .satisfied-customers {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .avatar-stack {
        margin-bottom: 8px;
    }
}

/* Footer Main Section */
.footer-main-section {
    position: relative;
    background-repeat: no-repeat;
    background-position: -18% 45%;
    /* background-size: contain; */
    padding: 96px 0 48px;
    overflow: hidden;
    z-index: 1;
}

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

@media (min-width: 1400px) {
    .footer-main-section .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .footer-main-section .container {
        max-width: 1520px;
    }
}

@media (min-width: 1800px) {
    .footer-main-section .container {
        max-width: 1700px;
    }
}

.footer-bg-logo-deco {
    position: absolute;
    right: 5%;
    bottom: 5%;
    width: 515px;
    height: 446px;
    background: url('../img/logo.png') no-repeat center center / contain;
    opacity: 0.02;
    pointer-events: none;
    z-index: -1;
}

.footer-logo-img {
    height: 78px;
    max-width: 272px;
    object-fit: contain;
    flex-shrink: 0;
    margin-right: 24px;
}

.footer-title-slogan-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-company-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: white;
    margin: 0 0 6px 0;
    text-transform: uppercase;
}

.footer-company-slogan {
    font-weight: 590;
    font-size: 18px;
    line-height: 1.3;
    color: #1E232D;
    margin: 0;
}

.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-contact-detail-item {
    gap: 12px;
    color: white;
}

.footer-contact-detail-item .detail-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.footer-contact-detail-item .detail-content {
    font-weight: 510;
    font-size: 16px;
    line-height: 1.5;
    color: white;
}

.footer-left-panel .footer-newsletter-wrap {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 32px;
    border-radius: 24px;
    max-width: 608px;
    overflow: hidden;
    z-index: 1;
}

.footer-left-panel .footer-newsletter-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 19, 19, 0.6);
    z-index: -1;
}

.footer-left-panel .newsletter-headline {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #FFFFFF;
    margin-bottom: 16px;
    text-transform: none;
    display: inline-block;
}

.footer-newsletter-form {
    background-color: #F5F5F7;
    border: 1px solid #0223B5;
    border-radius: 40px;
    padding: 4px 4px 4px 24px;
    height: 54px;
    width: 100%;
    box-sizing: border-box;
}

.footer-newsletter-form .form-control {
    border: none;
    background: transparent;
    height: 100%;
    padding: 0;
    font-weight: 400;
    font-size: 15px;
    color: #1E232D;
    flex: 1;
}

.footer-newsletter-form .form-control:focus {
    box-shadow: none;
    outline: none;
    border: none;
    background: transparent;
}

.btn-newsletter-submit {
    background-color: #E9272C;
    color: #FFFFFF;
    font-weight: 510;
    font-size: 17px;
    height: 46px;
    padding: 0 24px;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.btn-newsletter-submit:hover {
    background-color: #c92024;
    color: #FFFFFF;
}

.footer-right-panel {
    padding-left: 48px;
}

.footer-menus-grid {
    gap: 40px 16px;
}

.footer-menu-column {
    flex: 1;
    min-width: 140px;
}

.footer-menu-headline {
    font-weight: 700;
    font-size: 18px;
    color: white;
    margin-bottom: 24px;
    text-transform: none;
    display: inline-block;
}

.footer-menu-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-menu-items-list a {
    font-weight: 510;
    font-size: 14px;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu-items-list a:hover {
    color: var(--color-highlight);
}

.footer-map-container {
    margin-top: 32px;
}

.footer-map-frame-wrap {
    border: 2px solid #DBDBDB;
    border-radius: 8px;
    overflow: hidden;
    height: 230px;
}

.footer-map-frame-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.footer-bottom-divider {
    height: 1px;
    background-color: #64748B;
    opacity: 0.2;
    margin: 48px 0 24px;
}

.footer-bottom-row {
    gap: 20px;
}

.copyright-text {
    font-weight: 700;
    font-size: 20px;
    color: white;
    margin: 0;
}

.footer-bottom-actions {
    gap: 24px;
}

.footer-compliance-badges {
    gap: 16px;
}

.compliance-badge-img {
    height: 57px;
    object-fit: contain;
}

.footer-social-group {
    gap: 16px;
}

.social-icon-btn {
    width: 56px;
    height: 56px;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.08);
    color: #1D1D1F;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icon-btn:hover {
    background-color: #011673;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Responsive adjustments for Footer Main */
@media (max-width: 1199px) {
    .footer-main-section {
        padding: 80px 0 40px;
    }

    .footer-company-title {
        font-size: 28px;
    }

    .footer-right-panel {
        padding-left: 1.5rem;
        margin-top: 40px;
    }

    .footer-bg-logo-deco {
        width: 400px;
        height: 346px;
    }
}

@media (max-width: 991px) {
    .footer-main-section {
        padding: 60px 0 30px;
    }

    .footer-company-title {
        font-size: 24px;
    }

    .footer-company-slogan {
        font-size: 16px;
    }

    .footer-logo-img {
        height: 60px;
        margin-right: 16px;
    }
}

@media (max-width: 767px) {
    .footer-main-section {
        padding: 40px 0 20px;
    }

    .footer-identity-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .footer-company-title {
        font-size: 20px;
    }

    .footer-contact-detail-item .detail-content {
        font-size: 15px;
    }

    .footer-left-panel .footer-newsletter-wrap {
        padding: 20px;
        border-radius: 16px;
    }

    .footer-left-panel .newsletter-headline {
        font-size: 18px;
    }

    .footer-newsletter-form {
        padding: 4px 4px 4px 16px;
        height: 48px;
    }

    .btn-newsletter-submit {
        height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }

    .footer-menu-column {
        min-width: 120px;
    }

    .footer-menu-headline {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .footer-menu-items-list a {
        font-size: 15px;
    }

    .copyright-text {
        font-size: 16px;
    }

    .social-icon-btn {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .compliance-badge-img {
        height: 45px;
    }

    .footer-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .footer-bottom-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ============================================= */

/* ==========================================================================
   Section: Đối tác & Xuất khẩu (Partner & Export)
   ========================================================================== */
.section-partner-export {
    background-color: #29231E;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
}

/* Background overlay tạo chiều sâu */
.partner-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(207, 162, 97, 0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

.partner-container {
    position: relative;
    z-index: 2;
}

/* Cột trái: Giới thiệu */
.partner-intro-col {
    z-index: 5;
}

.partner-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.partner-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.partner-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    font-weight: 400;
}

.partner-btn-wrap {
    margin-bottom: 30px;
}

.partner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 56px;
    background-color: #CFA261;
    color: #090915 !important;
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 14px rgba(207, 162, 97, 0.2);
}

.partner-btn:hover {
    background-color: #FFFFFF;
    color: #29231E !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15);
}

/* Cột phải: Bản đồ và Ảnh xếp chồng */
.partner-visual-col {
    position: relative;
}

.partner-map-wrapper {
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.partner-map-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.65;
    filter: drop-shadow(5px 12px 10px rgba(0, 0, 0, 0.3));
    transition: all 0.5s ease;
}


.marker-dot {
    width: 10px;
    height: 10px;
    background-color: #FF3B30;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}

.marker-pulse {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 59, 48, 0.5);
    border-radius: 50%;
    animation: markerPulse 2s infinite ease-out;
    z-index: 1;
    pointer-events: none;
}

.marker-label {
    margin-left: 12px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(9, 9, 21, 0.6);
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes markerPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Ảnh đè tạo chiều sâu */
.partner-overlay-img-wrap {
    position: absolute;
    left: 0%;
    bottom: 25px;
    width: 100%;
    z-index: 10;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.partner-overlay-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider logo đối tác */
.partner-slider-row {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.partner-swiper .swiper-wrapper,
.dtqt-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.partner-logo-slide {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;
    padding: 10px 20px;
}

.partner-logo-img {
    max-height: 50px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.3s ease;
}

.partner-logo-item:hover .partner-logo-img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

.partner-logo-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.partner-logo-item:hover .partner-logo-text {
    color: #CFA261;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-partner-export {
        padding: 80px 0 60px;
    }

    .partner-title {
        font-size: 38px;
    }

    .partner-overlay-img-wrap {
        bottom: -20px;
    }

    .partner-slider-row {
        margin-top: 80px;
    }
}

@media (max-width: 991px) {
    .section-partner-export {
        padding: 60px 0;
    }

    .partner-intro-col {
        text-align: center;
        margin-bottom: 40px;
    }

    .partner-btn-wrap {
        display: flex;
        justify-content: center;
    }

    .partner-title {
        font-size: 34px;
    }

    .partner-visual-col {
        display: flex;
        justify-content: center;
    }

    .partner-map-wrapper {
        max-width: 600px;
        margin-top: 0;
    }

    .partner-overlay-img-wrap {
        bottom: -15px;
    }

    .partner-slider-row {
        margin-top: 60px;
        padding-top: 30px;
    }
}

@media (max-width: 767px) {
    .partner-title {
        font-size: 28px;
    }

    .partner-desc {
        font-size: 15px;
    }

    .partner-overlay-img-wrap {
        bottom: -10px;
        width: 80%;
        left: 10%;
    }

    .partner-marker-vietnam {
        left: 74%;
        /* dịch chuyển nhẹ trên mobile */
        top: 48%;
    }

    .marker-label {
        font-size: 12px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Section: Header Menu & Sub-Mega Menu (Custom Styles)
   ========================================================================== */
/* Header background & Navigation */
.menu-section {
    transition: all 0.3s ease;
}

@media (min-width: 992px) {

    /* Đặt relative cho .setting-menu (ancestor full-width) để làm mốc định vị */
    .setting-menu {
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 99;
    }

    /* Đặt static cho tất cả phần tử trung gian để mega menu thoát khỏi col-md-6 */
    .setting-menu .container,
    .setting-menu .container .row,
    .setting-menu .container .row>div,
    .menu-container {
        position: static !important;
    }

    /* Container header gần full màn hình, tối ưu theo kích thước */
    .setting-menu .container {
        max-width: calc(100% - 40px);
    }

    /* Đặt static cho li cấp 1 để mega menu absolute căn theo .setting-menu */
    .menu-section>ul>li {
        position: static !important;
    }
}

.menu-section>ul>li>a {
    font-family: 'SF Pro', sans-serif;
    font-size: 15px;
    display: inline-block;
    font-weight: 510;
    color: #FFFFFF !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding: 0 5px;
    transition: all 0.3s ease;
}

.menu-section>ul>li:hover>a {
    color: #CFA261 !important;
}

/* Hover line dưới menu cấp 1 */
.menu-section>ul>li>a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    /* Đưa xuống sát đáy (2px) để không bị đè lên chữ */
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: calc(100% - 20px);
    height: 2px;
    background-color: #CFA261;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.menu-section>ul>li:hover>a::after,
.menu-section>ul>li.active>a::after {
    transform: translateX(-50%) scaleX(1);
}

.menu-section>ul>li.has-child>a span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    margin-left: 6px;
    transition: all 0.3s ease;
}

.menu-section>ul>li:hover.has-child>a span {
    color: #CFA261;
    transform: rotate(180deg);
}

/* Sub-Mega Menu Wrapper (Desktop) */
@media (min-width: 992px) {
    .menu-section .entry-menu.full-width.mega-menu-wrapper {
        background-color: #1A1A1A;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 3px solid #CFA261;
        padding: 40px 60px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* 100% của .setting-menu (full viewport width) */
        margin-left: 0 !important;
        transform: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        display: block !important;
    }

    .menu-section>ul>li:hover>.entry-menu.mega-menu-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        margin-top: 0;
    }

    /* Lưới chia cột */
    .mega-container-menu {
        max-width: 1560px;
        margin: 0 auto;
    }

    /* Cột logo trái */
    .mega-logo-col {
        padding-right: 40px;
    }

    .mega-logo-wrapper {
        text-align: center;
    }

    .mega-logo-img {
        max-width: 160px;
        height: auto;
        opacity: 0.9;
        filter: brightness(0) invert(1);
        /* Chuyển logo sang màu trắng */
    }

    /* Cột nội dung phải */
    .mega-content-col {
        padding-left: 40px;
    }

    .mega-columns-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 30px;
    }

    /* Từng cột danh mục con */
    .mega-column-item {
        display: flex;
        flex-direction: column;
    }

    /* Tiêu đề cột (Cấp 1) */
    .mega-column-item .menu-title {
        font-family: 'Playfair Display', serif;
        font-size: 16px;
        font-weight: 700;
        color: #CFA261 !important;
        margin-bottom: 20px;
        text-transform: capitalize;
        letter-spacing: 0.02em;
        border-bottom: 1px solid rgba(207, 162, 97, 0.15);
        padding-bottom: 8px;
        display: block;
    }

    .mega-column-item .menu-title:hover {
        color: #FFFFFF !important;
    }

    /* Danh sách liên kết con */
    .mega-column-item .sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .mega-column-item .sub-menu li {
        margin-bottom: 12px;
        border: none !important;
    }

    /* Liên kết con (Cấp 2) */
    .mega-column-item .menu-link {
        font-family: 'SF Pro', sans-serif;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.65) !important;
        padding: 0 !important;
        display: inline-block;
        position: relative;
        transition: all 0.25s ease;
    }

    /* Tạo vạch dọc màu vàng bên trái khi hover hoặc active */
    .mega-column-item .menu-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 2px;
        height: 12px;
        background-color: #CFA261;
        transition: all 0.25s ease;
        opacity: 0;
    }

    .mega-column-item .menu-link:hover,
    .mega-column-item .sub-menu li.active>.menu-link {
        color: #CFA261 !important;
        padding-left: 12px !important;
    }

    .mega-column-item .menu-link:hover::before,
    .mega-column-item .sub-menu li.active>.menu-link::before {
        transform: translateY(-50%) scaleY(1);
        opacity: 1;
    }
}

/* Mobile & Tablet Styles (Ghi đè để quay lại dạng sidebar dọc) */
@media (max-width: 991px) {
    .menu-section .entry-menu.full-width.mega-menu-wrapper {
        padding: 0 !important;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .mega-logo-col {
        display: none !important;
    }

    .mega-content-col {
        padding: 0 !important;
    }

    .mega-columns-grid {
        display: block;
    }

    .mega-column-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .mega-column-item .menu-title {
        font-family: 'Playfair Display', serif;
        font-size: 15px !important;
        color: #090915 !important;
        padding: 12px 20px;
        margin-bottom: 0;
        font-weight: 600;
        display: block;
        border-bottom: none !important;
    }

    .mega-column-item.has-child {
        position: relative;
    }

    .mega-column-item .grower {
        display: block !important;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: rgba(9, 9, 21, 0.6) !important;
        cursor: pointer;
        z-index: 5;
        border-left: none !important;
    }

    .mega-column-item .sub-menu {
        padding-left: 20px !important;
        background-color: rgba(9, 9, 21, 0.02) !important;
        display: none;
        list-style: none;
        margin: 0;
        border-top: none !important;
    }

    .mega-column-item .sub-menu li {
        border-bottom: none !important;
        margin: 0 !important;
    }

    .mega-column-item .sub-menu li a {
        font-family: 'SF Pro', sans-serif;
        font-size: 14px !important;
        color: rgba(9, 9, 21, 0.7) !important;
        padding: 8px 20px !important;
        display: block;
        transition: all 0.2s ease;
    }

    .mega-column-item .sub-menu li a:hover,
    .mega-column-item .sub-menu li.active>a {
        color: #CFA261 !important;
        padding-left: 25px !important;
    }

    .menu-section>ul>li>a::after {
        content: none !important;
    }
}

/* ==========================================================================
   Section: Đối Tác Đại Lý (Dealer Partner)
   ========================================================================== */
.section-partner-highlight .section-gia-tri-khac-biet {
    padding: 1rem 0 1rem;
}

.section-doi-tac-dai-ly {
    background-color: #F9F0EB;
    padding: 96px 0 128px;
    position: relative;
    overflow: hidden;
}

.dtdl-bg-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 743px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
}

.dtdl-deco-ellipse {
    position: absolute;
    opacity: 0.8;
}

.dtdl-deco-ellipse-1 {
    right: 0;
    top: 17%;
    width: 244px;
    height: 531px;
}

.dtdl-deco-ellipse-2 {
    right: 30px;
    top: 20%;
    width: 169px;
    height: 665px;
}

.dtdl-deco-diamond {
    position: absolute;
    opacity: 0.8;
}

.dtdl-deco-diamond-1 {
    right: 320px;
    bottom: 10%;
    width: 40px;
    height: 58px;
}

.dtdl-deco-diamond-2 {
    right: 120px;
    bottom: 25%;
    width: 28px;
    height: 41px;
}

.dtdl-deco-diamond-3 {
    right: 280px;
    top: 18%;
    width: 18px;
    height: 26px;
}

.dtdl-deco-diamond-4 {
    right: 170px;
    top: 48%;
    width: 18px;
    height: 26px;
}

.dtdl-container {
    position: relative;
    z-index: 2;
    max-width: 1560px;
}

/* Header */
.dtdl-header {
    margin-bottom: 80px;
}

.dtdl-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.dtdl-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #1E232D;
    margin-bottom: 16px;
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
}

.dtdl-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #1E232D;
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/* Content Row: Image + Accordion */
.dtdl-content-row {
    display: flex;
    align-items: center;
    gap: 48px;
}

.dtdl-image-col {
    flex: 0 0 49%;
    max-width: 49%;
}

.dtdl-image-wrap {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.dtdl-image {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.dtdl-image-placeholder {
    width: 100%;
    height: 600px;
    background: linear-gradient(135deg, rgba(207, 162, 97, 0.08), rgba(207, 162, 97, 0.15));
    border: 2px dashed rgba(207, 162, 97, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtdl-list-col {
    flex: 1;
}

/* Accordion */
.dtdl-accordion-item {
    border-bottom: 1px solid #8D5535;
    padding: 16px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dtdl-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.dtdl-accordion-title {
    font-family: 'SF Pro', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #090915;
    margin: 0;
    transition: color 0.3s ease;
}

.dtdl-accordion-item.active .dtdl-accordion-title {
    font-size: 28px;
    color: #CFA261;
}

.dtdl-accordion-body {
    display: none;
    padding-top: 16px;
    animation: dtdlFadeIn 0.35s ease;
}

@keyframes dtdlFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dtdl-accordion-text {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    font-weight: 510;
    line-height: 1.3;
    color: #090915;
    margin: 0;
}

/* Hover */
.dtdl-accordion-item:hover .dtdl-accordion-title {
    color: #CFA261;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-doi-tac-dai-ly {
        padding: 80px 0 100px;
    }

    .dtdl-title {
        font-size: 40px;
    }

    .dtdl-header {
        margin-bottom: 60px;
    }

    .dtdl-image {
        height: 500px;
    }

    .dtdl-image-placeholder {
        height: 500px;
    }
}

@media (max-width: 991px) {
    .section-doi-tac-dai-ly {
        padding: 60px 0 80px;
    }

    .dtdl-content-row {
        flex-direction: column;
        gap: 40px;
    }

    .dtdl-image-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .dtdl-image {
        height: 400px;
    }

    .dtdl-image-placeholder {
        height: 400px;
    }

    .dtdl-title {
        font-size: 34px;
    }

    .dtdl-bg-decoration {
        display: none;
    }
}

@media (max-width: 767px) {
    .section-doi-tac-dai-ly {
        padding: 48px 0 64px;
    }

    .dtdl-title {
        font-size: 28px;
    }

    .dtdl-desc {
        font-size: 16px;
    }

    .dtdl-header {
        margin-bottom: 40px;
    }

    .dtdl-accordion-title {
        font-size: 18px;
    }

    .dtdl-accordion-item.active .dtdl-accordion-title {
        font-size: 20px;
    }

    .dtdl-accordion-text {
        font-size: 15px;
    }

    .dtdl-image {
        height: 280px;
    }

    .dtdl-image-placeholder {
        height: 280px;
    }
}

/* ==========================================================================
   Section: FAQ - Câu hỏi thường gặp
   ========================================================================== */
.section-faq {
    background-color: #FFFFFF;
    padding: 96px 0;
    position: relative;
}

.faq-container {
    max-width: 1440px;
}

/* Header */
.faq-header {
    margin-bottom: 80px;
}

.faq-header-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.faq-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.faq-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin: 0;
}

/* FAQ List */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    border-bottom: 1px solid #939393;
    transition: border-color 0.3s ease;
}

.faq-item.active {
    border-color: #090915;
}

/* Question */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-question:hover {
    opacity: 0.85;
}

.faq-question-content {
    flex: 1;
}

.faq-question-text {
    font-family: 'SF Pro', sans-serif;
    font-size: 24px;
    font-weight: 510;
    line-height: 1.3;
    color: #090915;
    margin: 0;
}

/* Toggle Icon */
.faq-toggle-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #090915;
    transition: all 0.3s ease;
}

.faq-icon-minus {
    display: none;
}

.faq-icon-plus {
    display: block;
}

.faq-item.active .faq-icon-minus {
    display: block;
}

.faq-item.active .faq-icon-plus {
    display: none;
}

/* Answer */
.faq-answer {
    display: none;
    padding: 0 16px 16px;
    animation: faqFadeIn 0.35s ease;
}

@keyframes faqFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.faq-answer-text {
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    color: #090915;
    margin: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-faq {
        padding: 80px 0;
    }

    .faq-title {
        font-size: 40px;
    }

    .faq-header {
        margin-bottom: 60px;
    }
}

@media (max-width: 991px) {
    .section-faq {
        padding: 60px 0;
    }

    .faq-title {
        font-size: 34px;
    }

    .faq-header {
        margin-bottom: 48px;
    }
}

@media (max-width: 767px) {
    .section-faq {
        padding: 48px 0;
    }

    .faq-title {
        font-size: 28px;
    }

    .faq-question-text {
        font-size: 18px;
    }

    .faq-answer-text {
        font-size: 15px;
    }

    .faq-question {
        padding: 20px 8px;
    }

    .faq-answer {
        padding: 0 8px 16px;
    }
}

/* ==========================================================================
   Section: Form Liên Hệ Chung (General Contact Form)
   ========================================================================== */
.section-form-lien-he-chung {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.flhc-container-fluid {
    width: 100%;
}

.flhc-main-row {
    display: flex;
    flex-wrap: wrap;
    min-height: 800px;
}

/* Cột trái: Form */
.flhc-left-col {
    background-color: #403B35;
    padding: 96px 10% 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flhc-form-wrap {
    width: 100%;
    max-width: 715px;
}

.flhc-header {
    margin-bottom: 48px;
}

.flhc-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3em;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 16px;
}

.flhc-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15em;
    color: #FFFFFF;
    margin: 0 0 16px 0;
}

.flhc-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
    color: #FFFFFF;
    margin: 0;
}

/* Form Styles */
.flhc-contact-form {
    width: 100%;
}

.flhc-form-row {
    margin-left: -12px;
    margin-right: -12px;
}

.flhc-form-group {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

.flhc-label {
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35em;
    color: #C6985B;
    margin-bottom: 8px;
    display: block;
}

.flhc-input,
.flhc-textarea,
.flhc-select {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #82643C !important;
    border-radius: 0 !important;
    color: #FFFFFF !important;
    font-family: 'SF Pro', sans-serif !important;
    font-size: 17px !important;
    font-weight: 510 !important;
    line-height: 1.35em !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    height: 41px;
}

.flhc-textarea {
    height: auto;
    resize: none;
}

/* Custom Select */
.flhc-select-wrapper {
    position: relative;
    width: 100%;
}

.flhc-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 30px !important;
}

.flhc-select option {
    background-color: #403B35;
    color: #FFFFFF;
}

.flhc-select-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #FFFFFF;
    pointer-events: none;
}

.flhc-input::placeholder,
.flhc-textarea::placeholder {
    color: #939393 !important;
    opacity: 1;
}

/* Submit Button */
.flhc-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    height: 56px;
    background-color: #CFA261 !important;
    color: #090915 !important;
    font-family: 'SF Pro', sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-transform: none;
    border: 1px solid #CFA261 !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.flhc-btn-submit:hover {
    background-color: transparent !important;
    color: #CFA261 !important;
    border-color: #CFA261 !important;
}

/* Cột phải: Image & Info */
.flhc-right-col {
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 96px 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.flhc-right-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 9, 21, 0.4);
    z-index: 1;
}

.flhc-info-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 841px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.flhc-logo-info {
    width: 100%;
    display: flex;
    justify-content: center;
}

.flhc-logo-banner {
    max-width: 100%;
    height: auto;
    max-height: 165px;
    object-fit: contain;
}

.flhc-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    width: 100%;
}

.flhc-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 300px;
    height: 56px;
    background-color: #DBDBDB;
    color: #29231E !important;
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 510;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.flhc-info-btn:hover {
    background-color: #FFFFFF;
    color: #090915 !important;
    transform: translateY(-2px);
}

.flhc-info-btn-icon {
    display: flex;
    align-items: center;
}

/* Responsive */
@media (max-width: 1199px) {
    .flhc-left-col {
        padding: 80px 5%;
    }

    .flhc-title {
        font-size: 40px;
    }

    .flhc-right-col {
        padding: 80px 5%;
        min-height: 500px;
    }
}

@media (max-width: 991px) {
    .flhc-title {
        font-size: 34px;
    }

    .flhc-info-container {
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .flhc-left-col {
        padding: 60px 16px;
    }

    .flhc-title {
        font-size: 28px;
    }

    .flhc-desc {
        font-size: 16px;
    }

    .flhc-right-col {
        padding: 60px 16px;
        min-height: 400px;
    }

    .flhc-info-btn {
        width: 100%;
        max-width: 320px;
    }

    .flhc-btn-submit {
        max-width: 100%;
    }
}

/* ==========================================================================
   Section: Đối Tác Quốc Tế (International Partner & Export)
   ========================================================================== */
.section-doi-tac-quoc-te {
    background-color: #29231E;
    padding: 96px 0 80px;
    position: relative;
    overflow: hidden;
    color: #FFFFFF;
}

.dtqt-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(207, 162, 97, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.dtqt-container {
    position: relative;
    z-index: 2;
    max-width: 1560px;
}

/* Header */
.dtqt-header {
    margin-bottom: 64px;
}

.dtqt-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
}

.dtqt-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.dtqt-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 1000px;
    font-weight: 400;
}

/* Visual Wrap: Map & Overlay Image */
.dtqt-visual-wrap {
    width: 100%;
    position: relative;
    margin-bottom: 80px;
}

.dtqt-map-wrapper {
    position: relative;
    width: 100%;
    max-width: 1424px;
    display: block;
}

.dtqt-map-img {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.65;
    filter: drop-shadow(5px 12px 10px rgba(0, 0, 0, 0.3));
    transition: all 0.5s ease;
}

/* Marker định vị Việt Nam */
.dtqt-marker-vietnam {
    position: absolute;
    left: 75.8%;
    display: none !important;
    top: 49.3%;
    transform: translate(-50%, -50%);
    z-index: 8;
    display: flex;
    align-items: center;
}

.dtqt-marker-dot {
    width: 10px;
    height: 10px;
    background-color: #FF3B30;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}

.dtqt-marker-pulse {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 59, 48, 0.5);
    border-radius: 50%;
    animation: dtqtMarkerPulse 2s infinite ease-out;
    z-index: 1;
    pointer-events: none;
}

.dtqt-marker-label {
    margin-left: 12px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background-color: rgba(9, 9, 21, 0.6);
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

@keyframes dtqtMarkerPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Ảnh sản phẩm đè tạo chiều sâu */
.dtqt-overlay-img-wrap {
    position: absolute;
    left: 0%;
    bottom: 25px;
    width: 100%;
    z-index: 10;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.dtqt-overlay-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Slider logo đối tác */
.dtqt-slider-row {
    margin-top: 120px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dtqt-logo-slide {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dtqt-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;
    padding: 10px 20px;
}

.dtqt-logo-img {
    max-height: 50px;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.3s ease;
}

.dtqt-logo-item:hover .dtqt-logo-img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

.dtqt-logo-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.dtqt-logo-item:hover .dtqt-logo-text {
    color: #CFA261;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-doi-tac-quoc-te {
        padding: 80px 0 60px;
    }

    .dtqt-title {
        font-size: 38px;
    }

    .dtqt-overlay-img-wrap {
        bottom: -30px;
    }

    .dtqt-slider-row {
        margin-top: 100px;
    }
}

@media (max-width: 991px) {
    .section-doi-tac-quoc-te {
        padding: 60px 0;
    }

    .dtqt-title {
        font-size: 34px;
    }

    .dtqt-overlay-img-wrap {
        bottom: -20px;
        width: 80%;
        left: 10%;
    }

    .dtqt-slider-row {
        margin-top: 80px;
    }
}

@media (max-width: 767px) {
    .dtqt-title {
        font-size: 28px;
    }

    .dtqt-desc {
        font-size: 15px;
    }

    .dtqt-overlay-img-wrap {
        bottom: -10px;
        width: 86%;
        left: 7%;
    }

    .dtqt-marker-vietnam {
        left: 74%;
        top: 48%;
    }

    .dtqt-marker-label {
        font-size: 12px;
        padding: 2px 6px;
    }

    .dtqt-slider-row {
        margin-top: 60px;
        padding-top: 30px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Giới thiệu (About Us Intro)
   ========================================================================== */
.section-about-us-intro {
    background-color: #F9F0EB;
    padding: 128px 0;
    position: relative;
    overflow: hidden;
}

.au-intro-container {
    max-width: 1100px;
    position: relative;
    z-index: 2;
}

.au-intro-quote-mark {
    position: absolute;
    top: -60px;
    left: -40px;
    font-family: 'Playfair Display', serif;
    font-size: 180px;
    font-weight: 700;
    line-height: 1;
    color: #CFA261;
    opacity: 0.15;
    pointer-events: none;
}

.au-intro-content-wrap {
    width: 100%;
}

.au-intro-item {
    text-align: center;
}

.au-intro-quote {
    font-family: 'SF Pro', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #090915;
    margin: 0;
}

.au-intro-author {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #090915;
    margin-bottom: 32px;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-about-us-intro {
        padding: 96px 0;
    }

    .au-intro-quote {
        font-size: 22px;
    }

    .au-intro-author {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .section-about-us-intro {
        padding: 64px 16px;
    }

    .au-intro-quote-mark {
        font-size: 120px;
        top: -40px;
        left: 0;
    }

    .au-intro-quote {
        font-size: 18px;
        line-height: 1.4;
    }

    .au-intro-author {
        font-size: 22px;
        margin-top: 24px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Thành tựu (About Us Achievements)
   ========================================================================== */
.section-about-us-thanh-tuu {
    background-color: #29231E;
    padding: 72px 0;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.au-thanh-tuu-container {
    max-width: 1560px;
}

.au-thanh-tuu-row {
    margin-left: -12px;
    margin-right: -12px;
}

.au-thanh-tuu-col {
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 24px;
}

.au-thanh-tuu-item {
    padding: 24px;
    height: 100%;
    transition: all 0.3s ease;
}

.au-thanh-tuu-number {
    font-family: 'Rozha One', serif;
    font-size: 88px;
    font-weight: 400;
    line-height: 1;
    color: #CF9F5F;
    margin-bottom: 16px;
}

.au-thanh-tuu-text {
    font-family: 'SF Pro', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #CFA261;
}

/* Responsive */
@media (max-width: 1199px) {
    .au-thanh-tuu-number {
        font-size: 72px;
    }

    .au-thanh-tuu-text {
        font-size: 18px;
    }
}

@media (max-width: 991px) {
    .section-about-us-thanh-tuu {
        padding: 48px 0 24px;
    }

    .au-thanh-tuu-col {
        margin-bottom: 32px;
    }
}

@media (max-width: 575px) {
    .au-thanh-tuu-number {
        font-size: 64px;
    }

    .au-thanh-tuu-text {
        font-size: 16px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Tâm huyết (About Us Dedication)
   ========================================================================== */
.section-about-us-tam-huyet {
    background-color: #F9F0EB;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.au-tam-huyet-container {
    max-width: 1560px;
}

.au-tam-huyet-row {
    gap: 48px;
}

.au-tam-huyet-img-col {
    flex: 0 0 60%;
    max-width: 60%;
}

.au-tam-huyet-img-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.au-tam-huyet-img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.au-tam-huyet-text-col {
    flex: 1;
}

.au-tam-huyet-content {
    width: 100%;
    max-width: 448px;
}

.au-tam-huyet-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 24px;
}

.au-tam-huyet-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #090915;
    margin: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .section-about-us-tam-huyet {
        padding: 80px 0;
    }

    .au-tam-huyet-title {
        font-size: 38px;
    }

    .au-tam-huyet-img {
        max-height: 500px;
    }
}

@media (max-width: 991px) {
    .section-about-us-tam-huyet {
        padding: 60px 0;
    }

    .au-tam-huyet-row {
        flex-direction: column;
        gap: 40px;
    }

    .au-tam-huyet-img-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .au-tam-huyet-img {
        max-height: 400px;
    }

    .au-tam-huyet-content {
        max-width: 100%;
    }

    .au-tam-huyet-title {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .section-about-us-tam-huyet {
        padding: 48px 16px;
    }

    .au-tam-huyet-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .au-tam-huyet-desc {
        font-size: 15px;
    }

    .au-tam-huyet-img {
        max-height: 280px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Tầm nhìn (About Us Vision)
   ========================================================================== */
.section-about-us-tam-nhin {
    background-color: #F5F5F7;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.au-tam-nhin-container {
    max-width: 1560px;
}

.au-tam-nhin-row {
    gap: 48px;
}

.au-tam-nhin-text-col {
    flex: 1;
}

.au-tam-nhin-content {
    width: 100%;
    max-width: 650px;
}

.au-tam-nhin-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 24px;
}

.au-tam-nhin-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    color: #090915;
    margin: 0;
}

.au-tam-nhin-img-col {
    flex: 0 0 50%;
    max-width: 50%;
}

.au-tam-nhin-img-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.au-tam-nhin-img {
    width: 100%;
    height: 490px;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 1199px) {
    .au-tam-nhin-title {
        font-size: 38px;
    }

    .au-tam-nhin-img {
        height: 400px;
    }
}

@media (max-width: 991px) {
    .section-about-us-tam-nhin {
        padding: 60px 0;
    }

    .au-tam-nhin-row {
        flex-direction: column;
        gap: 40px;
    }

    .au-tam-nhin-img-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .au-tam-nhin-img {
        height: 350px;
    }

    .au-tam-nhin-content {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .section-about-us-tam-nhin {
        padding: 48px 16px;
    }

    .au-tam-nhin-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .au-tam-nhin-desc {
        font-size: 15px;
    }

    .au-tam-nhin-img {
        height: 280px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Sứ mệnh (About Us Mission)
   ========================================================================== */
.section-about-us-su-menh {
    background-color: #403B35;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.au-su-menh-container {
    max-width: 1560px;
}

.au-su-menh-main-row {
    gap: 32px;
}

.au-su-menh-left-col {
    flex: 0 0 45%;
    max-width: 45%;
}

.au-su-menh-banner-wrap {
    width: 100%;
    height: 702px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.au-su-menh-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(9, 9, 21, 0.45);
    z-index: 1;
}

.au-su-menh-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.au-su-menh-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    text-transform: uppercase;
}

.au-su-menh-right-col {
    flex: 1;
}

.au-su-menh-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.au-su-menh-bento-card {
    height: 335px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    transition: all 0.4s ease-in-out;
}

.au-su-menh-bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(207, 162, 97, 0.25);
    background-image: none !important;
    background-color: #CFA261 !important;
}

.au-su-menh-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
    transition: opacity 0.4s ease-in-out;
}

.au-su-menh-bento-card:hover .au-su-menh-card-overlay {
    opacity: 0;
}

.au-su-menh-card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.au-su-menh-card-title {
    font-family: 'SF Pro', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 8px;
    transition: color 0.4s ease-in-out;
}

.au-su-menh-bento-card:hover .au-su-menh-card-title {
    color: #090915;
}

.au-su-menh-card-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: max-height 0.4s ease-in-out, color 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.au-su-menh-bento-card:hover .au-su-menh-card-desc {
    color: #090915;
    max-height: 250px;
    -webkit-line-clamp: unset;
    overflow: visible;
}

@media (min-width: 1200px) {
    .block-about--us-diffient .strength-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Responsive */
@media (max-width: 1199px) {
    .au-su-menh-banner-wrap {
        height: 600px;
    }

    .au-su-menh-main-title {
        font-size: 38px;
    }

    .au-su-menh-bento-card {
        height: 284px;
        padding: 20px;
    }

    .au-su-menh-card-title {
        font-size: 18px;
    }

    .au-su-menh-card-desc {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
    .section-about-us-su-menh {
        padding: 60px 0;
    }

    .au-su-menh-main-row {
        flex-direction: column;
        gap: 32px;
    }

    .au-su-menh-left-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .au-su-menh-banner-wrap {
        height: 300px;
    }

    .au-su-menh-right-col {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .section-about-us-su-menh {
        padding: 48px 16px;
    }

    .au-su-menh-bento-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .au-su-menh-bento-card {
        height: 240px;
    }

    .au-su-menh-main-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Năng lực sản xuất (About Us Production Capacity)
   ========================================================================== */
.section-about-us-nang-luc {
    background-color: #F9F0EB;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
}

.au-nang-luc-container {
    max-width: 1560px;
}

/* Intro Row */
.au-nl-intro-row {
    gap: 48px;
    margin-bottom: 80px;
}

.au-nl-intro-text-col {
    flex: 1;
}

.au-nl-intro-content {
    width: 100%;
    max-width: 830px;
}

.au-nl-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 16px;
}

.au-nl-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 24px;
}

.au-nl-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #090915;
    margin: 0;
}

.au-nl-intro-img-col {
    flex: 0 0 50%;
    max-width: 50%;
}

.au-nl-intro-img-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.au-nl-intro-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

/* Bento Row */
.au-nl-bento-row {
    gap: 32px;
    margin-left: 0;
    margin-right: 0;
}

.au-nl-bento-col {
    padding-left: 0;
    padding-right: 0;
    flex: 1;
}

.au-nl-bento-img-wrap {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.au-nl-bento-img-wrap:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.au-nl-bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.au-nl-bento-img-wrap.bento-tall {
    height: 360px;
}

.au-nl-bento-stack {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
}

.au-nl-bento-img-wrap.bento-short {
    height: 164px;
}

/* Responsive */
@media (max-width: 1199px) {
    .au-nl-title {
        font-size: 38px;
    }

    .au-nl-intro-img {
        height: 350px;
    }

    .au-nl-bento-img-wrap.bento-tall {
        height: 300px;
    }

    .au-nl-bento-img-wrap.bento-short {
        height: 134px;
    }
}

@media (max-width: 991px) {
    .section-about-us-nang-luc {
        padding: 60px 0;
    }

    .au-nl-intro-row {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }

    .au-nl-intro-img-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .au-nl-intro-img {
        height: 300px;
    }

    .au-nl-intro-content {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .section-about-us-nang-luc {
        padding: 48px 16px;
    }

    .au-nl-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .au-nl-desc {
        font-size: 15px;
    }

    .au-nl-bento-row {
        flex-direction: column;
        gap: 20px;
    }

    .au-nl-bento-img-wrap.bento-tall {
        height: 220px;
    }

    .au-nl-bento-img-wrap.bento-short {
        height: 140px;
    }

    .au-nl-bento-stack {
        gap: 20px;
    }
}

/* ==========================================================================
   Section: [Về chúng tôi] Lịch sử hình thành (About Us History Timeline)
   ========================================================================== */
.section-about-us-history {
    background-color: #FFFFFF;
    padding: 96px 0 0;
    position: relative;
    overflow: hidden;
}

.au-history-container {
    max-width: 1560px;
    position: relative;
    z-index: 3;
}

/* Header */
.au-history-header {
    max-width: 940px;
    margin: 0 auto 60px;
}

.au-history-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #CFA261;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 16px;
}

.au-history-title {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
    color: #090915;
    margin-bottom: 24px;
}

.au-history-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #090915;
    margin: 0;
}

/* Outer wrapper for horizontal scroll on desktop if needed */
.au-history-timeline-outer {
    width: 100%;
    margin-bottom: 60px;
}

.au-history-timeline-wrap {
    position: relative;
    width: 1440px;
    height: 953px;
    margin: 0 auto;
}

.au-history-timeline-items {
    position: relative;
    height: 791px;
    z-index: 3;
}

/* Item */
.au-history-timeline-item {
    position: absolute;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    z-index: 3;
}

/* Định vị ngang và dọc của từng mốc thời gian theo Figma */
.au-history-timeline-item:nth-child(1) {
    left: 0px;
    top: 0px;
    width: 441px;
}

.au-history-timeline-item:nth-child(2) {
    left: 181px;
    top: 0px;
    width: 443px;
}

.au-history-timeline-item:nth-child(3) {
    left: 479px;
    top: 0px;
    width: 462px;
}

.au-history-timeline-item:nth-child(4) {
    left: 662px;
    top: 0px;
    width: 463px;
}

.au-history-timeline-item:nth-child(5) {
    left: 979px;
    top: 0px;
    width: 461px;
}

/* Khối nội dung */
.au-history-item-content {
    max-width: 400px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.item-bottom .au-history-item-content {
    margin-top: 204px;
}

.au-history-timeline-item:hover .au-history-item-year {
    color: #CFA261;
}

.au-history-item-year {
    font-family: 'Playfair Display', serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.1;
    color: #CE9E5E;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.au-history-item-title {
    font-family: 'SF Pro', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #090915;
    margin-bottom: 8px;
}

.au-history-item-desc {
    font-family: 'SF Pro', sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #090915;
    margin: 0;
}

/* Connector */
.au-history-item-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 43px;
}

.au-history-vertical-line {
    width: 1px;
    background-color: #939393;
    opacity: 1;
}

/* Chiều cao đường thẳng dọc của từng mốc */
.au-history-timeline-item:nth-child(1) .au-history-vertical-line {
    height: 748px;
}

.au-history-timeline-item:nth-child(2) .au-history-vertical-line {
    height: 559px;
}

.au-history-timeline-item:nth-child(3) .au-history-vertical-line {
    height: 588px;
}

.au-history-timeline-item:nth-child(4) .au-history-vertical-line {
    height: 495px;
}

.au-history-timeline-item:nth-child(5) .au-history-vertical-line {
    height: 492px;
}

.au-history-node {
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 4px solid #CFA261;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* Background image panorama ở cuối */
.au-history-bg-image-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 571px;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.au-history-bg-image-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 1440px) {
    .au-history-timeline-outer {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }
}

@media (max-width: 991px) {
    .section-about-us-history {
        padding: 60px 0 0;
    }

    .au-history-title {
        font-size: 38px;
    }

    .au-history-bg-image-wrap {
        height: 380px;
    }
}

/* Mobile: Chuyển hoàn toàn sang timeline dọc */
@media (max-width: 767px) {
    .section-about-us-history {
        padding: 48px 16px 0;
    }

    .au-history-title {
        font-size: 28px;
        margin-bottom: 16px;
    }

    .au-history-desc {
        font-size: 15px;
    }

    .au-history-timeline-outer {
        overflow-x: visible;
    }

    .au-history-timeline-wrap {
        width: 100%;
        height: auto;
        margin: 0;
    }

    /* Trục dọc chạy suốt */
    .au-history-timeline-items {
        display: flex;
        flex-direction: column;
        gap: 32px;
        height: auto;
        position: relative;
        padding-left: 0;
    }

    .au-history-timeline-items::before {
        content: '';
        position: absolute;
        left: 11px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background-color: #CFA261;
        opacity: 0.3;
        z-index: 1;
    }

    .au-history-timeline-item {
        position: relative;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        padding-left: 40px;
        display: block;
        box-sizing: border-box;
    }

    /* Ẩn trục đứng thừa của từng item trên mobile */
    .au-history-vertical-line {
        display: none;
    }

    .au-history-item-connector {
        position: absolute;
        left: 0;
        top: 8px;
        width: 24px;
        display: flex;
        justify-content: center;
        z-index: 5;
    }

    .au-history-node {
        width: 24px;
        height: 24px;
        border-width: 3px;
    }

    .au-history-item-content {
        max-width: 100%;
        padding: 0;
        margin-top: 0 !important;
    }

    .au-history-item-year {
        font-size: 36px;
        margin-bottom: 4px;
    }

    .au-history-item-title {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .au-history-bg-image-wrap {
        position: relative;
        height: 260px;
        margin-top: 30px;
        bottom: auto;
        width: 100%;
    }
}

.section-about-us-project>section {
    background: #403B35;
}

.section-about-us-project .project-title,
.section-about-us-project .project-desc,
.section-about-us-project .project-card-desc,
.section-about-us-project .project-more-btn {
    color: white;
}

/* ==========================================================================
   Section: Footer Logo
   ========================================================================== */
.section-footer-logo {
    background-color: #F9F0EB;
    padding: 72px 0;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-logo-wrap {
    max-width: 774px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-logo-img {
    max-width: 100%;
    height: auto;
    max-height: 152px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.footer-logo-img:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.block-cta-footer .cta-top-gradient {
    background: none;
}

/* Responsive */
@media (max-width: 767px) {
    .section-footer-logo {
        padding: 48px 16px;
    }

    .footer-logo-img {
        max-height: 80px;
    }
}

/* ==========================================================================
   Section: Category Article view list header (Figma)
   ========================================================================== */
body.article {
    background-color: #FAF6F2 !important;
}

.section-category-header {
    background-color: #FAF6F2;
    padding: 8rem 0 0rem;
    color: #29231E;
}

.category-subtitle {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #939393;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.6rem;
}

.category-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #939393;
}

.category-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.25;
    color: #29231E;
    margin-bottom: 2rem;
    text-transform: none;
}

.category-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    line-height: 1.45;
    color: #66625E;
    max-width: 900px;
    margin-bottom: 3.2rem;
}

/* Category Tabs navigation */
.category-tabs-wrap {
    border-bottom: 1px solid #EAE5E0;
}

.category-tabs {
    display: flex;
    flex-direction: row;
    gap: 3.2rem;
}

.category-tab-item {
    position: relative;
    padding-bottom: 1.6rem;
}

.category-tab-item a {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #939393;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.category-tab-item a:hover,
.category-tab-item.active a {
    color: #29231E;
}

.category-tab-item::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #CFA261;
    transition: width 0.3s ease;
}

.category-tab-item.active::after,
.category-tab-item a.active::after {
    width: 100%;
}

/* Override active from JS */
.category-tab-item a.active {
    color: #29231E;
}

/* ==========================================================================
   Section: Article List Items & Grid (Figma)
   ========================================================================== */
/* If the list block isn't directly inside a background section, make it look clean */
.row.article-list-grid {
    row-gap: 5.6rem;
    column-gap: 0;
    background-color: #FAF6F2;
    padding: 6rem 0;
}

.premium-article-card {
    background: transparent;
    border: none;
    width: 100%;
}

.premium-article-card .article-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.premium-article-card .article-image-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #F3F4F6;
}

.premium-article-card .article-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.premium-article-card:hover .article-image-wrap img {
    transform: scale(1.04);
}

.premium-article-card .article-info-wrap {
    display: flex;
    flex-direction: column;
}

.premium-article-card .article-meta {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 500;
}

.premium-article-card .article-meta-category {
    color: #8D5535;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-transform: uppercase;
}

.premium-article-card .article-meta-date {
    color: #939393;
    font-weight: 400;
}

.premium-article-card .article-card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.35;
    margin-top: 0.4rem;
    margin-bottom: 1.2rem;
}

.premium-article-card .article-card-title a {
    color: #29231E;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.premium-article-card .article-card-title a:hover {
    color: #CF9F5F;
}

.premium-article-card .article-card-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #66625E;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .category-title {
        font-size: 4rem;
    }

    .category-desc {
        font-size: 1.7rem;
    }

    .premium-article-card .article-card-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 767px) {
    .section-category-header {
        padding: 5rem 0 0rem;
    }

    .category-title {
        font-size: 3.2rem;
        margin-bottom: 1.6rem;
    }

    .category-desc {
        font-size: 1.6rem;
        margin-bottom: 2.4rem;
    }

    .category-tabs {
        gap: 2rem;
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: 1rem;
    }

    .category-tabs::-webkit-scrollbar {
        display: none;
    }

    .category-tab-item {
        padding-bottom: 1rem;
    }

    .category-tab-item a {
        font-size: 1.5rem;
    }

    .row.article-list-grid {
        row-gap: 4rem;
    }

    .premium-article-card .article-card-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Section: Recruitment Banner (Figma)
   ========================================================================== */
.section-tuyen-dung-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 52rem;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding: 8rem 0;
}

.td-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.td-banner-container {
    position: relative;
    z-index: 2;
}

.td-banner-content {
    max-width: 1100px;
    margin-left: 0;
    text-align: left;
}

.td-banner-subtitle {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #CFA261;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
}

.td-banner-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #CFA261;
}

.td-banner-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 5.6rem;
    line-height: 1.3;
    color: #FFFFFF;
    margin-bottom: 2.4rem;
}

.td-banner-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 800px;
    margin: 0;
}

/* ==========================================================================
   Section: Recruitment Highlight / Culture (Figma)
   ========================================================================== */
.section-tuyen-dung-highlight {
    background-color: #FAF6F2;
    padding-top: 6rem;
    color: #29231E;
}

.td-highlight-container {
    max-width: 1200px;
    margin: 0 auto;
}

.td-highlight-header {
    margin-bottom: 6.4rem;
    text-align: left;
}

.td-highlight-subtitle {
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #CF9F5F;
    margin-bottom: 1.6rem;
}

.td-highlight-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.25;
    color: #29231E;
    margin: 0;
}

.td-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5.6rem;
    column-gap: 8rem;
}

.td-highlight-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-bottom: 4rem;
}

.td-highlight-card-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #CF9F5F;
    margin-bottom: 1.2rem;
}

.td-highlight-card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.35;
    color: #29231E;
    margin-bottom: 1.2rem;
}

.td-highlight-card-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #66625E;
    margin: 0;
}

/* Separation lines for desktop (2 columns) */
@media (min-width: 768px) {

    .td-highlight-card:nth-child(1),
    .td-highlight-card:nth-child(2) {
        border-bottom: 1px solid #EAE5E0;
    }
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .td-banner-title {
        font-size: 4.2rem;
    }

    .td-banner-desc {
        font-size: 1.7rem;
    }

    .td-highlight-title {
        font-size: 4rem;
    }

    .td-highlight-card-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 767px) {
    .section-tuyen-dung-banner {
        min-height: 25rem;
        padding: 6rem 0;
    }

    .td-banner-title {
        font-size: 3.2rem;
        margin-bottom: 1.8rem;
    }

    .td-banner-desc {
        font-size: 1.6rem;
    }

    .section-tuyen-dung-highlight {
        padding: 4rem 0 0rem 0rem;
    }

    .td-highlight-header {
        margin-bottom: 4rem;
    }

    .td-highlight-title {
        font-size: 2.8rem;
    }

    .td-highlight-grid {
        grid-template-columns: 1fr;
        row-gap: 3.2rem;
        column-gap: 0;
    }

    .td-highlight-card {
        padding-bottom: 2.4rem;
    }

    .td-highlight-card:not(:last-child) {
        border-bottom: 1px solid #EAE5E0;
    }
}

/* ==========================================================================
   Section: Recruitment Jobs List (Figma)
   ========================================================================== */
.section-tuyen-dung-jobs {
    background-color: #FAF6F2;
    padding: 6rem 0;
    color: #29231E;
}

.td-jobs-container {
    max-width: 1200px;
    margin: 0 auto;
}

.td-jobs-header {
    margin-bottom: 4.8rem;
    text-align: left;
}

.td-jobs-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #CFA261;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
}

.td-jobs-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #CFA261;
}

.td-jobs-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.25;
    color: #29231E;
    margin: 0;
}

.td-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.td-job-row {
    display: grid;
    grid-template-columns: 1.3fr 3.2fr 2fr 2fr 1.8fr 1.2fr;
    align-items: center;
    padding: 2.4rem 3.2rem;
    border-bottom: 1px solid #EAE5E0;
    text-decoration: none !important;
    color: #66625E;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 4px;
}

.td-job-row:hover {
    background-color: #FFFFFF;
    box-shadow: 0 12px 32px rgba(41, 35, 30, 0.05);
    border-bottom-color: transparent;
    color: #29231E;
    transform: translateY(-2px);
}

.td-job-col {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
}

.td-job-col.col-dept {
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #CFA261;
}

.td-job-col.col-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #29231E;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.td-job-row:hover .col-title {
    color: #B08B57;
}

.td-job-col i {
    font-size: 1.8rem;
    color: #9E9893;
}

.td-job-col.col-action {
    justify-content: flex-end;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #B08B57;
}

.td-job-col.col-action .action-text {
    color: #B08B57;
}

.td-job-col.col-action .action-arrow {
    font-size: 1.6rem;
    color: #29231E;
    transition: transform 0.3s ease;
}

.td-job-row:hover .action-arrow {
    transform: translateX(6px);
}

/* Responsive for Jobs List */
@media (max-width: 1024px) {
    .td-jobs-title {
        font-size: 4rem;
    }

    .td-job-row {
        grid-template-columns: 1.5fr 3fr 2fr 2fr 1.5fr;
        padding: 2rem;
    }

    .col-date {
        display: none;
        /* Hide date on tablet to save space */
    }

    .td-job-col.col-title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .menu-component {
        background: rgb(31 31 31);
    }

    .section-tuyen-dung-jobs {
        padding: 1rem 0 3rem 0rem;
    }

    .td-jobs-header {
        margin-bottom: 0.2rem;
    }

    .td-jobs-title {
        font-size: 2.8rem;
    }

    .td-job-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        padding: 2.4rem 2rem;
    }

    .td-job-col {
        width: 100%;
        justify-content: flex-start;
    }

    .td-job-col.col-dept {
        margin-bottom: -0.4rem;
    }

    .td-job-col.col-title {
        font-size: 2.2rem;
        margin-bottom: 0.4rem;
    }

    .td-job-col.col-action {
        margin-top: 0.8rem;
        justify-content: flex-start;
        border-top: 1px solid #EAE5E0;
        padding-top: 1.2rem;
    }
}

/* ==========================================================================
   Section: Recruitment Form (Figma)
   ========================================================================== */
.section-form-tuyen-dung {
    background-color: #211C18;
    color: #FFFFFF;
    padding: 9.6rem 0;
}

.td-form-container {
    max-width: 1200px;
    margin: 0 auto;
}

.td-form-left {
    display: flex;
    align-items: center;
}

.td-form-left-inner {
    text-align: left;
    max-width: 480px;
}

.td-form-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #9E9893;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2.4rem;
}

.td-form-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #9E9893;
}

.td-form-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.35;
    color: #FFFFFF;
    margin-bottom: 2.4rem;
}

.td-form-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #B5AFA9;
    margin-bottom: 4rem;
}

.td-form-email {
    font-size: 1.6rem;
    margin-top: 2.4rem;
}

.td-form-email a {
    color: #FFFFFF;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

.td-form-email a:hover {
    color: #CFA261;
    border-bottom-color: #CFA261;
}

.td-form-right {
    padding-left: 4.8rem;
}

.td-form-element {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.td-form-row {
    margin-left: -15px;
    margin-right: -15px;
}

.td-form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 0;
}

.td-form-label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    color: #9E9893;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.td-form-input,
.td-form-textarea {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #4E4742 !important;
    color: #FFFFFF !important;
    font-size: 1.6rem !important;
    padding: 0.8rem 0 1.2rem 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    transition: border-color 0.3s ease !important;
}

.td-form-input:focus,
.td-form-textarea:focus {
    border-bottom-color: #CFA261 !important;
    outline: none !important;
}

.td-form-input::placeholder,
.td-form-textarea::placeholder {
    color: #4E4742;
}

.td-btn-submit {
    background-color: #8A6431;
    color: #FFFFFF;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 1.8rem 4.8rem;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin-right: auto;
}

.td-btn-submit:hover {
    background-color: #A2763D;
    color: #FFFFFF;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .td-form-title {
        font-size: 4rem;
    }

    .td-form-right {
        padding-left: 15px;
        margin-top: 6rem;
    }
}

@media (max-width: 767px) {
    .section-form-tuyen-dung {
        padding: 6rem 0;
    }

    .td-form-title {
        font-size: 3.2rem;
    }

    .td-form-element {
        gap: 2.4rem;
    }

    .td-btn-submit {
        width: 100%;
        text-align: center;
        padding: 1.6rem 2.4rem;
    }
}

/* ==========================================================================
   Section: Contact Page Form (Figma Green Style)
   ========================================================================== */
.contact-form-card {
    background-color: #FFFFFF;
    border-radius: 12px;
    padding: 4rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #F0ECE7;
    margin-bottom: 3rem;
}

.contact-form-title {
    font-size: 3.2rem;
    color: #0A0908;
    margin-top: 0;
    margin-bottom: 3.2rem;
    text-align: left;
}

.contact-form-title span {
    position: relative;
    padding-bottom: 8px;
}

.contact-form-title span::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #CFA261;
}

.contact-form-element {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-label {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #111111;
    margin-bottom: 0.8rem;
    display: block;
    text-align: left;
}

.contact-label .required {
    color: #D93838;
    margin-left: 2px;
}

.contact-input,
.contact-textarea {
    background-color: #F4F5F6 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #111111 !important;
    font-size: 1.5rem !important;
    padding: 1.2rem 1.6rem !important;
    height: auto !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.contact-textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-input:focus,
.contact-textarea:focus {
    background-color: #FFFFFF !important;
    border-color: #CFA261 !important;
    box-shadow: 0 0 0 3px rgba(45, 138, 78, 0.1) !important;
    outline: none !important;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: #9E9893 !important;
    opacity: 0.8;
}

.contact-btn-submit {
    background-color: #CFA261 !important;
    color: #FFFFFF !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    padding: 1.2rem 2.8rem !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin-right: auto;
}

.contact-btn-submit:hover {
    background-color: #226B3C !important;
    color: #FFFFFF !important;
}

@media (max-width: 767px) {
    .contact-form-card {
        padding: 2.4rem 2rem;
    }

    .contact-form-title {
        font-size: 2.6rem;
        margin-bottom: 2.4rem;
    }

    .contact-btn-submit {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   Section: Showroom Map & Export
   ========================================================================== */
.section-showroom-map {
    background-color: #211C18;
    color: #FFFFFF;
    padding: 9.6rem 0;
}

.sr-map-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sr-map-left {
    padding-right: 4rem;
}

.sr-map-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #A2763D;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2.4rem;
}

.sr-map-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #A2763D;
}

.sr-map-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.35;
    color: #FFFFFF;
    margin-bottom: 2.4rem;
}

.sr-map-desc {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1.6;
    color: #B5AFA9;
    margin-bottom: 4rem;
}

.sr-map-action {
    margin-top: 2.4rem;
}

.sr-map-btn {
    color: #A2763D;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(162, 118, 61, 0.4);
    padding-bottom: 6px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sr-map-btn:hover {
    color: #CFA261;
    border-bottom-color: #CFA261;
}

.sr-map-btn .arrow {
    transition: transform 0.3s ease;
}

.sr-map-btn:hover .arrow {
    transform: translateX(4px);
}

.sr-map-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sr-map-image-wrapper {
    width: 100%;
}

.sr-map-img {
    max-height: 480px;
    object-fit: contain;
    width: 100%;
}

/* ==========================================================================
   Section: Showroom Experience
   ========================================================================== */
.section-showroom-experience {
    background-color: #FAF6F2;
    color: #29231E;
    padding: 9.6rem 0;
}

.sr-exp-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sr-exp-left {
    padding-right: 4rem;
}

.sr-exp-subtitle {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #A2763D;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2.4rem;
}

.sr-exp-subtitle::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: #A2763D;
}

.sr-exp-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 4.8rem;
    line-height: 1.35;
    color: #29231E;
    margin-bottom: 0;
}

.sr-exp-right {
    border-top: 1px solid #EAE5E0;
}

.sr-exp-list {
    display: flex;
    flex-direction: column;
}

.sr-exp-item {
    display: flex;
    align-items: center;
    padding: 3.2rem 0;
    border-bottom: 1px solid #EAE5E0;
    transition: all 0.3s ease;
}

.sr-exp-item-num {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: #A2763D;
    width: 6rem;
    flex-shrink: 0;
}

.sr-exp-item-text {
    font-family: 'Playfair Display', serif;
    font-size: 2.4rem;
    color: #29231E;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.sr-exp-item:hover .sr-exp-item-text {
    color: #A2763D;
}

/* Responsive styles */
@media (max-width: 1024px) {

    .sr-map-title,
    .sr-exp-title {
        font-size: 4rem;
    }

    .sr-map-left,
    .sr-exp-left {
        padding-right: 15px;
        margin-bottom: 4rem;
    }

    .sr-map-right,
    .sr-exp-right {
        padding-left: 15px;
    }
}

@media (max-width: 767px) {

    .section-showroom-map,
    .section-showroom-experience {
        padding: 6rem 0;
    }

    .sr-map-title,
    .sr-exp-title {
        font-size: 3.2rem;
    }

    .sr-exp-item {
        padding: 2.4rem 0;
        align-items: flex-start;
    }

    .sr-exp-item-text {
        font-size: 2rem;
    }
}

/* ==========================================================================
   Showroom Locator Section (Artora Custom)
   ========================================================================== */
.section-he-thong-showroom {
    background-color: #F9F0EB;
    padding: 8rem 0;
    color: #29231E;
}

.showroom-locator-container {
    max-width: 1560px;
    margin: 0 auto;
}

.showroom-sidebar {
    display: flex;
    flex-direction: column;
    padding-right: 4rem !important;
}

.showroom-header {
    margin-bottom: 3.2rem;
}

.showroom-subtitle {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: #A2763D;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 1.2rem;
}

.showroom-title {
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #29231E;
    margin: 0;
}

/* Tabs */
.showroom-tabs-wrap {
    margin-bottom: 2.4rem;
    border-bottom: 1px solid rgba(41, 35, 30, 0.1);
}

.showroom-tabs {
    border-bottom: none !important;
    gap: 2.4rem;
}

.showroom-tabs .nav-item {
    margin-bottom: -1px;
}

.showroom-tabs .nav-link {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: #29231E !important;
    background: transparent !important;
    border: none !important;
    padding: 0 0 1.2rem 0 !important;
    position: relative;
    transition: color 0.3s ease;
}

.showroom-tabs .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #A2763D;
    transition: width 0.3s ease;
}

.showroom-tabs .nav-link.active {
    color: #A2763D !important;
}

.showroom-tabs .nav-link.active::after {
    width: 100%;
}

/* Search Box */
.showroom-search-box {
    position: relative;
    margin-bottom: 2.4rem;
}

.showroom-search-box .search-icon {
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    color: #8A817C;
}

.showroom-search-input {
    height: 5.2rem;
    padding: 0 1.6rem 0 4.8rem !important;
    background-color: #FFFFFF;
    border: 1px solid rgba(41, 35, 30, 0.15);
    border-radius: 8px !important;
    font-size: 1.6rem;
    color: #29231E;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

.showroom-search-input:focus {
    border-color: #A2763D;
}

/* Count Indicator */
.showroom-count-indicator {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    color: #8A817C;
    margin-bottom: 2rem;
}

.showroom-count-indicator .count-num {
    color: #A2763D;
}

/* Scrollable list */
.showroom-list-container {
    flex: 1;
    position: relative;
}

.showroom-list {
    max-height: 52rem;
    overflow-y: auto;
    padding-right: 1.6rem;
}

/* Custom Scrollbar */
.showroom-list::-webkit-scrollbar {
    width: 6px;
}

.showroom-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.showroom-list::-webkit-scrollbar-thumb {
    background: rgba(41, 35, 30, 0.2);
    border-radius: 3px;
}

.showroom-list::-webkit-scrollbar-thumb:hover {
    background: rgba(41, 35, 30, 0.4);
}

/* Showroom item */
.showroom-item {
    position: relative;
    padding: 2.4rem;
    border-radius: 8px;
    background-color: transparent;
    cursor: pointer;
    border-bottom: 1px solid rgba(41, 35, 30, 0.08);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-bottom: 0.8rem;
}

.showroom-item:last-child {
    border-bottom: none;
}

.showroom-item:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

.showroom-item.active {
    background-color: #FFFFFF;
    box-shadow: 0px 4px 20px rgba(41, 35, 30, 0.08);
    border-bottom-color: transparent;
}

/* Active indicator dot */
.showroom-item .active-dot {
    position: absolute;
    left: 0;
    top: 3.2rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #8A817C;
    transition: background-color 0.3s ease;
}

.showroom-item.active .active-dot {
    background-color: #A2763D;
}

.showroom-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.6rem;
    margin-bottom: 0.6rem;
    padding-left: 1.6rem;
}

.showroom-item-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #29231E;
    margin: 0;
    transition: color 0.3s ease;
}

.showroom-item.active .showroom-item-title {
    color: #A2763D;
}

.showroom-item-type {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: #8A817C;
    text-transform: uppercase;
    white-space: nowrap;
    padding-top: 0.4rem;
}

.showroom-item-city {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: #A2763D;
    margin-bottom: 1.6rem;
    padding-left: 1.6rem;
}

.showroom-item-details {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2rem;
    padding-left: 1.6rem;
}

.showroom-item-details .detail-row {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
}

.showroom-item-details .detail-icon {
    font-size: 1.6rem;
    color: #A2763D;
    width: 2rem;
    text-align: center;
    padding-top: 0.3rem;
}

.showroom-item-details .detail-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1.45;
    color: #5C5552;
}

.showroom-item-actions {
    padding-left: 1.6rem;
}

.showroom-item-actions .action-btn {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
    color: #29231E;
    text-decoration: underline !important;
    transition: color 0.3s ease;
    display: inline-block;
}

.showroom-item-actions .action-btn:hover {
    color: #A2763D;
}

.showroom-item.active .showroom-item-actions .action-btn {
    text-decoration: none !important;
    color: #8A817C;
    cursor: default;
    pointer-events: none;
}

.showroom-item.active .showroom-item-actions .action-btn::before {
    content: 'ĐANG XEM';
    text-decoration: none !important;
}

.showroom-item.active .showroom-item-actions .action-btn {
    font-size: 0;
    /* Hide original text */
}

.showroom-item.active .showroom-item-actions .action-btn::before {
    font-size: 1.3rem;
}

.showroom-empty {
    font-size: 1.6rem;
    color: #8A817C;
    padding: 3rem 0;
    text-align: center;
}

/* Map area */
.showroom-map-panel {
    padding-left: 2rem !important;
}

.showroom-map-wrapper {
    width: 100%;
    height: 100%;
    min-height: 60rem;
    background-color: #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.05);
}

.showroom-map-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 60rem;
    border: none;
}

/* Responsive adjustment */
@media (max-width: 991px) {
    .menu-section>ul>li>a {
        color: var(--color-main) !important;
    }

    .showroom-sidebar {
        padding-right: 1.5rem !important;
        margin-bottom: 4rem;
    }

    .showroom-map-panel {
        padding-left: 1.5rem !important;
    }

    .showroom-map-wrapper,
    .showroom-map-wrapper iframe {
        min-height: 45rem;
    }

    .showroom-title {
        font-size: 3.2rem;
    }
}

/* ==========================================================================
   Header Search & Language Styling (Artora Custom)
   ========================================================================== */
.header-actions-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2.4rem;
}

.header-action-btn {
    color: #FFFFFF !important;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none !important;
    cursor: pointer;
}

.header-action-btn:hover {
    color: #CFA261 !important;
}

/* Search Dropdown Styles */
.header-search-item {
    padding: 1rem 0;
}

.header-search-dropdown-box {
    position: absolute;
    top: calc(100% - 0.5rem);
    right: 0;
    width: 32rem;
    background: rgba(41, 35, 30, 0.98);
    border: 1px solid rgba(207, 162, 97, 0.25);
    border-radius: 8px;
    padding: 1.6rem;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.header-search-item.open .header-search-dropdown-box,
.header-search-item:hover .header-search-dropdown-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.header-search-dropdown-box .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    align-items: center;
    transition: all 0.3s ease;
}

.header-search-dropdown-box .input-group:focus-within {
    border-color: #CFA261;
    box-shadow: 0 0 8px rgba(207, 162, 97, 0.2);
}

.header-search-dropdown-box .form-control {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    font-size: 1.4rem;
    height: 4.2rem;
    padding: 0 1.2rem;
    width: 1% !important;
    flex: 1 1 auto !important;
}

.header-search-dropdown-box .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.header-search-dropdown-box .btn-submit {
    background: transparent;
    border: none;
    color: #FFFFFF;
    height: 4.2rem;
    padding: 0 1.6rem;
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.header-search-dropdown-box .btn-submit:hover {
    color: #CFA261;
}

/* Language Switcher Styles */
.header-lang-item {
    padding: 1rem 0;
}

.lang-toggle-btn {
    gap: 0.8rem;
    font-family: 'SF Pro', sans-serif;
    font-size: 1.4rem;
    font-weight: 510;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.current-lang-flag {
    width: 2.2rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lang-chevron {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.header-lang-item.open .lang-chevron {
    transform: rotate(180deg);
}

.header-lang-dropdown-box {
    position: absolute;
    top: calc(100% - 0.5rem);
    right: 0;
    width: 16rem;
    background: rgba(41, 35, 30, 0.98);
    border: 1px solid rgba(207, 162, 97, 0.25);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

.header-lang-item.open .header-lang-dropdown-box,
.header-lang-item:hover .header-lang-dropdown-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.header-lang-dropdown-box .language-switch__list {
    display: flex;
    flex-direction: column;
}

.header-lang-dropdown-box .language-switch__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-lang-dropdown-box .language-switch__item:last-child {
    border-bottom: none;
}

.header-lang-dropdown-box .language-switch__link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    color: #FFFFFF !important;
    font-family: 'SF Pro', sans-serif;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.header-lang-dropdown-box .language-switch__link:hover,
.header-lang-dropdown-box .language-switch__item.is-active .language-switch__link {
    background-color: rgba(207, 162, 97, 0.15);
    color: #CFA261 !important;
}

.header-lang-dropdown-box .language-switch__flag {
    width: 2.2rem;
    height: 1.5rem;
    object-fit: cover;
    border-radius: 2px;
}

.header-lang-dropdown-box .language-switch__name {
    font-weight: 500;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .header-actions-container {
        gap: 1.6rem;
    }

    .header-search-dropdown-box {
        position: fixed;
        top: 6.8rem;
        left: 0;
        right: 0;
        width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
    }
}

/* ==========================================================================
   Google Translate Styling (Artora Custom)
   ========================================================================== */
.header-translate-item {
    display: inline-block;
    vertical-align: middle;
}

#google_translate_element {
    display: inline-block;
}

.goog-te-gadget {
    font-family: 'SF Pro', sans-serif !important;
    font-size: 0 !important;
    /* Hide "Powered by Google" text */
    color: transparent !important;
}

.goog-te-gadget .goog-te-combo {
    background: rgb(255 255 255) !important;
    border: 1px solid rgba(207, 162, 97, 0.25) !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 6px !important;
    font-size: 1.3rem !important;
    outline: none !important;
    cursor: pointer;
    font-family: 'SF Pro', sans-serif !important;
    transition: all 0.3s ease;
    height: auto !important;
    margin: 0 !important;
    max-width: 12rem !important;
}

/* Hide Google branding & iframe top bar */
.goog-te-gadget span {
    display: none !important;
}

.goog-logo-link,
.goog-logo-link:link,
.goog-logo-link:visited,
.goog-logo-link:hover,
.goog-logo-link:active {
    display: none !important;
}

iframe.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0px !important;
}

/* ==========================================================================
   Mobile & Tablet Responsive Optimizations (Achievements, Collections, Product Home)
   ========================================================================== */

/* --- Tablet & Mobile general fixes (max-width: 1199px) --- */
@media (max-width: 1199px) {

    /* Tránh stretch chiều cao do flex-basis trên layout cột dọc */
    .achievement-left-part,
    .achievement-right-part {
        flex: none !important;
    }

    /* Khống chế chiều rộng tiêu đề Minimal tránh tràn viền ngang */
    .layout-minimal .minimal-title-group {
        width: 100% !important;
    }
}

/* --- Mobile specific fixes (max-width: 767px) --- */
@media (max-width: 767px) {
    .project-slider-nav {
        bottom: -65px;
    }

    /* 1. Achievements Block Optimizations */
    .section-achievements {
        padding: 4.8rem 0 !important;
    }

    .achievement-flex-container {
        gap: 3.2rem !important;
    }

    .achievement-years {
        font-size: 10rem !important;
        margin-bottom: 0.4rem !important;
    }

    .achievement-years-label {
        font-size: 1.6rem !important;
        letter-spacing: 0.05em !important;
    }

    .achievement-info-block {
        gap: 1.2rem !important;
    }

    .achievement-title {
        font-size: 2.4rem !important;
        line-height: 1.25 !important;
        margin-bottom: 1.2rem !important;
    }

    .achievement-description {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 1.2rem !important;
    }

    .achievement-more-link {
        font-size: 1.6rem !important;
    }

    /* Đổi các benefit cards thành hàng ngang (icon trái, text phải) để hiển thị chuyên nghiệp */
    .benefit-flex-wrap {
        flex-direction: column !important;
        gap: 1.6rem !important;
    }

    .benefit-card {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 1.2rem 0 !important;
        gap: 1.6rem !important;
    }

    .benefit-icon {
        flex: 0 0 4.8rem !important;
        width: 4.8rem !important;
        height: 4.8rem !important;
        margin-bottom: 0 !important;
        justify-content: flex-start !important;
    }

    .benefit-title {
        font-size: 1.6rem !important;
        margin-bottom: 0.4rem !important;
    }

    .benefit-desc {
        font-size: 1.4rem !important;
        line-height: 1.35 !important;
    }

    /* 2. Collections Block Optimizations */
    .collection-header-section {
        padding: 4.8rem 0 !important;
    }

    .collection-header-title {
        font-size: 2.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.2rem !important;
    }

    .collection-header-desc {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .collection-panel-subtitle {
        font-size: 1.6rem !important;
        margin-bottom: 1rem !important;
    }

    .collection-giant-title {
        font-size: 4rem !important;
        line-height: 1.1 !important;
        margin-bottom: 1.6rem !important;
        letter-spacing: -0.01em !important;
    }

    .collection-subheading {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1.2rem !important;
    }

    .collection-description {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 2rem !important;
    }

    /* Giảm chiều cao ảnh để bố cục gọn gàng, giảm cuộn trang */
    .layout-italiano .italiano-image-part,
    .layout-minimal .minimal-image-part {
        height: 28rem !important;
    }

    .layout-italiano .italiano-white-panel {
        padding: 3.2rem 2rem 4rem 2rem !important;
    }

    .layout-italiano .italiano-title-group {
        padding: 3.2rem 2rem 0 2rem !important;
        width: calc(100% - 4rem) !important;
    }

    .layout-minimal .minimal-dark-panel {
        padding: 3.2rem 2rem !important;
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .layout-minimal .minimal-title-group .collection-giant-title {
        font-size: 4rem !important;
        line-height: 1.1 !important;
    }

    .layout-indochine {
        min-height: 42rem !important;
        padding: 4rem 2rem !important;
    }

    .layout-indochine .indochine-left .collection-giant-title {
        font-size: 4rem !important;
        line-height: 1.1 !important;
    }

    .indochine-container {
        gap: 2rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .indochine-right {
        width: 100% !important;
        flex: none !important;
    }

    /* 3. Product Home Block Optimizations */
    .section-product-home-wrap {
        padding: 4.8rem 0 !important;
    }

    .product-home-header {
        margin-bottom: 2.4rem !important;
    }

    .product-home-subtitle {
        font-size: 1.6rem !important;
        margin-bottom: 1rem !important;
    }

    .product-home-title {
        font-size: 2.6rem !important;
        line-height: 1.3 !important;
        flex: 0;
    }

    .product-home-desc {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    .product-home-controls-row {
        margin-bottom: 2.4rem !important;
        padding-bottom: 1.2rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.6rem !important;
    }

    .product-home-tabs {
        gap: 1.6rem !important;
        width: 100% !important;
    }

    .product-home-tabs .nav-link {
        font-size: 1.6rem !important;
        padding-bottom: 1.2rem !important;
    }

    .product-home-tabs .nav-link::after {
        bottom: -1.3rem !important;
    }

    /* Tối ưu hóa khoảng cách và kích thước card để cuộn ngang mượt mà, đầy đặn */
    .product-home-grid {
        gap: 1.6rem !important;
        padding-bottom: 1.2rem !important;
    }

    .product-home-card {
        flex: 0 0 29rem !important;
        width: 29rem !important;
        gap: 1.2rem !important;
    }

    .product-home-category {
        font-size: 1.3rem !important;
    }

    .product-home-item-title {
        font-size: 1.7rem !important;
    }

    .product-home-item-desc {
        font-size: 1.4rem !important;
        line-height: 1.35 !important;
        height: 3.8rem !important;
    }

    .product-home-detail-link {
        font-size: 1.5rem !important;
    }
}