/* Theme Header */
/* --- Inlined: assets/css/about-bundle.css --- */
/* ==========================================
   ABOUT-BUNDLE
   ========================================== */

/* --- about.css --- */
.about-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 40px;
}

.about-subtitle {
    color: var(--color-highlight);
    /* Vàng */
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 12px 0;
}

.about-title {
    color: var(--color-primary);
    /* Xanh lá đậm */
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.about-desc {
    color: var(--color-text-light);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 32px 0;
}

.about-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.about-section .btn-primary:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.about-image-wrapper {
    position: relative;
    border-radius: 12px;
}

.about-img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    aspect-ratio: 1/1;
    /* Đã đổi từ 4/5 thành 1/1 để giảm chiều cao */
    max-height: 550px;
}

.about-stats-container {
    position: absolute;
    bottom: 15px;
    /* Đẩy lên cách đáy ảnh 15px */
    left: -130px;
    /* Cắt đều bởi cạnh trái ảnh (vì box đầu rông 260px, nửa là 130px) */
    display: flex;
    gap: 20px;
    z-index: 2;
}

.about-section .stat-box {
    padding: 20px 24px;
    /* Giảm padding trên dưới để giảm chiều cao (h) */
    border-radius: 12px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Căn trái */
    text-align: left;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    /* Ghi đè lại position absolute từ partnership.css nếu có */
}

.stat-box-yellow {
    background-color: #fef3c7;
    /* Vàng nhạt */
}

.stat-box-pink {
    background-color: #fae8e8;
    /* Hồng nhạt */
}

.about-section .stat-subtitle {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text);
}

.about-section .stat-number {
    font-size: 42px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin: 4px 0;
}

.about-section .stat-desc {
    font-size: 14px;
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-content {
        padding-right: 0;
    }

    .about-stats-container {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: -50px;
        /* Overlap image bottom instead of left side */
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .about-section .stat-box {
        width: calc(50% - 10px);
    }
}

@media (max-width: 575px) {
    .about-stats-container {
        margin-top: 20px;
        /* Move below image on very small screens */
    }

    .about-section .stat-box {
        width: 100%;
    }
}

/* --- about-discover.css --- */
/* About Discover Section */
.about-discover-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.about-discover-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Cột ảnh */
.about-discover-image-col {
    flex: 1;
}

.about-discover-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.about-discover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-discover-image-wrapper:hover .about-discover-img {
    transform: scale(1.03);
}

/* Cột nội dung */
.about-discover-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-discover-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.about-discover-title {
    color: var(--color-primary);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: 24px;
}

.about-discover-desc {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.about-discover-desc:last-of-type {
    margin-bottom: 30px;
}

/* 2 Box tròn features */
.about-discover-features {
    display: flex;
    align-items: center;
    gap: 36px;
    margin-bottom: 36px;
}

.about-discover-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.about-discover-icon-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #fceee8;
    color: #2b5c77;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-discover-feature-item:last-child .about-discover-icon-circle {
    color: #1e3a5f;
}

.about-discover-feature-text h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 2px 0;
}

.about-discover-feature-text span {
    font-size: 13px;
    color: var(--color-text-muted);
    display: block;
}

/* Nút CTA */
.about-discover-cta-wrapper {
    margin-top: 5px;
}

.about-discover-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-cta);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.about-discover-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 90, 36, 0.25);
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 991px) {
    .about-discover-container {
        flex-direction: column;
        gap: 40px;
    }

    .about-discover-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .about-discover-features {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* --- about-values.css --- */
/* About Values Section */
.about-values-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.about-values-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header căn giữa */
.about-values-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-values-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.about-values-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Lưới 2x2 (2 hàng, 2 cột) */
.about-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Mỗi card có border nhạt bo nhẹ góc */
.about-value-card {
    display: flex;
    align-items: center;
    padding: 24px 30px;
    border: 1px solid #e2e8f0;
    border-radius: 0;
    background-color: var(--color-white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    cursor: default;
}

.about-value-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.about-value-plus {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-right: 18px;
    line-height: 1;
}

.about-value-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    letter-spacing: -0.2px;
}

/* Responsive */
@media (max-width: 768px) {
    .about-values-title {
        font-size: 32px;
    }

    .about-values-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-value-card {
        padding: 20px 24px;
    }
}

/* --- about-why.css --- */
/* About Why Section */
.about-why-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.about-why-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Cột trái: Nội dung */
.about-why-content-col {
    flex: 0 0 38%;
    max-width: 38%;
}

.about-why-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.about-why-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
}

.about-why-desc {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* 2 Box tính năng xếp hàng dọc */
.about-why-features {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-why-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.about-why-icon-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #fef0eb;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-why-feature-item:last-child .about-why-icon-circle {
    color: var(--color-cta);
}

.about-why-feature-text h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 6px 0;
}

.about-why-feature-text p {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Cột phải: 2 ảnh có radius */
.about-why-images-col {
    flex: 1;
    display: flex;
    gap: 24px;
}

.about-why-image-card {
    flex: 1;
    aspect-ratio: 3.2 / 4;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.about-why-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-why-image-card:hover .about-why-img {
    transform: scale(1.04);
}

/* Responsive */
@media (max-width: 991px) {
    .about-why-container {
        flex-direction: column;
        gap: 50px;
    }

    .about-why-content-col {
        flex: 100%;
        max-width: 100%;
    }

    .about-why-title {
        font-size: 34px;
    }

    .about-why-images-col {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .about-why-images-col {
        flex-direction: column;
        gap: 20px;
    }

    .about-why-image-card {
        aspect-ratio: 4 / 3;
    }
}

/* --- about-team.css --- */
/* About Team / Founders Section */
.about-team-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.about-team-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header căn giữa */
.about-team-header {
    text-align: center;
    margin-bottom: 50px;
}

.about-team-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.about-team-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

/* Lưới 2 box */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 580px;
    margin: 0 auto;
}

/* Mỗi box có border nhạt, bo góc 12px */
.about-team-card {
    background-color: var(--color-white);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Phần ảnh chiếm 8 phần chiều cao (aspect-ratio 1 / 1 hoặc 4 / 5) */
.about-team-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #f1f5f9;
}

.about-team-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-team-card:hover .about-team-img {
    transform: scale(1.03);
}

/* Phần text chiếm 2 phần chiều cao (padding vừa vặn) */
.about-team-info {
    padding: 14px 18px 18px 18px;
    background-color: var(--color-white);
    text-decoration: none;
}

.about-team-card {
    text-decoration: none;
}

.about-team-role {
    display: block;
    font-size: 12px;
    color: var(--color-text-lighter);
    font-weight: 500;
    margin-bottom: 4px;
}

.about-team-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .about-team-title {
        font-size: 32px;
    }

    .about-team-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
        gap: 24px;
    }
}


/* --- Inlined: assets/css/services-bundle.css --- */
/* ==========================================
   SERVICES-BUNDLE
   ========================================== */

/* --- services.css --- */
/* =========================================
   SERVICES SECTION
   ========================================= */

.services-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

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

.services-subtitle {
    color: #DED931;
    /* Yellow */
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 10px 0;
}

.services-title {
    color: var(--color-primary);
    /* Dark green */
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
    /* So boxes start from top */
}

.services-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    object-fit: cover;
    aspect-ratio: 5/4;
}

.services-list-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.service-box {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 30px;
    border-radius: 12px;
    width: 100%;
}

.service-box-green {
    background-color: #f1f6f4;
    /* Nền xanh mint nhạt */
}

.service-box-yellow {
    background-color: #fffde7;
    /* Nền vàng nhạt */
}

.service-box-pink {
    background-color: #fce8e6;
    /* Nền hồng nhạt */
}

.service-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Border mờ */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    color: var(--color-text);
}

.service-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.service-desc {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin: 0;
    line-height: 1.5;
}

.btn-small {
    padding: 10px 20px;
    font-size: var(--fs-sm);
    margin-top: 10px;
}

/* --- services-why.css --- */
/* ===================================================
   SERVICES - WHY CHOOSE US & CORE PILLARS SECTION
   =================================================== */

.services-why-section {
    background-color: var(--color-white);
    padding-top: 40px;
}

/* PHẦN TRÊN: 1 - 7 - 4 */
.services-why-top {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 110px;
}

/* Cột 1: Text dọc in hoa + border right */
.services-why-col-vertical {
    flex: 0 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e2e8f0;
    padding-right: 25px;
    min-height: 280px;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--color-cta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* Cột 2: Content */
.services-why-col-content {
    flex: 6;
    padding-right: 20px;
}

.services-why-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
}

.services-why-desc {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 32px;
}

.services-why-action {
    display: flex;
    align-items: center;
    gap: 28px;
}

.services-why-btn {
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.services-why-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227, 90, 36, 0.25);
    color: var(--color-white);
}

.services-why-phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-dark);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.services-why-phone:hover {
    color: var(--color-cta);
}

.phone-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
}

/* Cột 3: 2 ảnh lớn hơn, cắt bởi line trắng dày + logo Gr tròn */
.services-why-col-media {
    flex: 5.5;
}

.services-media-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.services-media-img-left {
    flex: 6;
    height: 100%;
    overflow: hidden;
}

.services-media-img-right {
    flex: 4;
    height: 100%;
    overflow: hidden;
}

.media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.services-media-wrapper:hover .media-img {
    transform: scale(1.04);
}

/* Đường phân cách trắng dày hơn (5px) */
.services-media-divider {
    width: 5px;
    background-color: var(--color-white);
    height: 100%;
    z-index: 2;
}

/* Logo tròn gr cắt giữa đường line */
.services-media-badge {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    background-color: var(--color-primary);
    border: 5px solid var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.badge-gr {
    color: var(--color-white);
    font-size: 34px;
    font-weight: 800;
    font-family: var(--font-primary);
    line-height: 1;
    letter-spacing: -2px;
}

/* PHẦN DƯỚI: Nền be nhạt, FULL WIDTH từ mép */
.services-why-bottom-bar {
    width: 100%;
    background-color: #f6f3ee;
    padding: 70px 40px 80px 40px;
    margin-top: 40px;
    position: relative;
    box-sizing: border-box;
}

.services-features-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.services-feature-box {
    text-align: left;
}

.feature-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #faede6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.feature-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 8px 0;
}

.feature-desc {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .services-why-top {
        flex-direction: column;
        gap: 40px;
    }

    .services-why-col-vertical {
        display: none;
        /* Ẩn text dọc trên tablet/mobile hoặc chuyển thành dạng ngang */
    }

    .services-why-col-content,
    .services-why-col-media {
        flex: 100%;
        width: 100%;
        padding-right: 0;
    }

    .services-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .services-why-title {
        font-size: 28px;
    }

    .services-why-action {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .services-features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* --- services-packages.css --- */
/* ===================================================
   SERVICES - TRAVEL PACKAGES SECTION (3 CARDS)
   =================================================== */

.services-packages-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.services-packages-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header căn giữa */
.services-packages-header {
    text-align: center;
    margin-bottom: 50px;
}

.services-packages-subtitle {
    display: inline-block;
    color: #DED931;
    /* Màu vàng theo ảnh tham khảo */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.services-packages-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.22;
    margin: 0;
}

/* Lưới 3 Cards */
.services-packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card item */
.services-package-card {
    background-color: var(--color-white);
    border: 1px solid #eef2f6;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services-package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Khối ảnh trên */
.services-package-img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.services-package-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.services-package-card:hover .services-package-img {
    transform: scale(1.04);
}

/* Khối nội dung dưới */
.services-package-content {
    padding: 24px 26px 28px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.services-package-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 16px 0;
}

/* Danh sách gạch đầu dòng */
.services-package-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.services-package-list li {
    position: relative;
    padding-left: 14px;
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

.services-package-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Nút CTA cam */
.services-package-btn-wrap {
    margin-top: auto;
}

.services-package-btn {
    display: inline-block;
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.services-package-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 90, 36, 0.25);
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 991px) {
    .services-packages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .services-packages-title {
        font-size: 30px;
    }

    .services-packages-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* --- services-contact.css --- */
/* ===================================================
   SERVICES - CONTACT / FORM SECTION
   =================================================== */

.services-contact-section {
    padding: 40px 0;
    background-color: #f6f3ee;
    /* Nền be nhạt y hệt ảnh */
}

.services-contact-container {
    display: flex;
    align-items: center;
    gap: 70px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Cột trái: Khung Form màu trắng có bo góc */
.services-contact-form-col {
    flex: 1.1;
}

.services-contact-card {
    background-color: var(--color-white);
    border-radius: 28px;
    /* Radius chuẩn như ảnh */
    padding: 40px 45px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
}

.services-form-heading {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 24px 0;
}

.services-contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.services-form-row {
    display: flex;
    gap: 20px;
}

.services-form-row .services-form-group {
    flex: 1;
}

.services-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.services-form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.services-form-group label .required {
    color: var(--color-cta);
}

.services-form-group input,
.services-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #f1f5f9;
    background-color: var(--color-white);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-dark);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid #e2e8f0;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.services-form-group input:focus,
.services-form-group textarea:focus {
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px rgba(227, 90, 36, 0.1);
}

.services-form-group input::placeholder,
.services-form-group textarea::placeholder {
    color: var(--color-text-lighter);
    font-size: 13.5px;
}

.services-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.services-form-checkbox {
    margin-top: 4px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input {
    accent-color: var(--color-cta);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-text {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.services-form-submit {
    margin-top: 8px;
}

.services-submit-btn {
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.services-submit-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227, 90, 36, 0.25);
}

/* Cột phải: Thông tin liên hệ */
.services-contact-info-col {
    flex: 1;
}

.services-contact-badge-wrap {
    margin-bottom: 16px;
}

.services-contact-badge {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid #fed7aa;
    border-radius: 20px;
    color: var(--color-cta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    background-color: #fffaf5;
}

.services-contact-title {
    color: var(--color-primary);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 18px 0;
}

.services-contact-desc {
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 32px 0;
    max-width: 480px;
}

/* 3 Hàng thông tin liên hệ */
.services-contact-items {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.services-contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.services-contact-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.services-contact-text h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 3px 0;
}

.services-contact-text p {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 991px) {
    .services-contact-container {
        flex-direction: column-reverse;
        gap: 50px;
    }

    .services-contact-form-col,
    .services-contact-info-col {
        width: 100%;
    }

    .services-contact-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .services-contact-card {
        padding: 30px 20px;
    }

    .services-form-row {
        flex-direction: column;
        gap: 16px;
    }
}

/* --- other-services.css --- */
/* ===================================================
   OTHER SERVICES - CONTENT & RENTAL ACTION CARDS
   =================================================== */

.other-services-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.other-services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================================
   PHẦN 1: BỐ CỤC 2 CỘT TRÊN
   =================================================== */

.other-services-top-row {
    display: flex;
    gap: 60px;
    align-items: stretch;
    margin-bottom: 70px;
}

/* CỘT TRÁI */
.other-services-left-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.other-services-info-card {
    background-color: var(--color-bg-beige);
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 32px 36px;
    margin-bottom: 28px;
}

.other-services-tag {
    display: inline-block;
    color: var(--color-cta);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 24px;
    /* Cách 1 khoảng với đoạn desc bên dưới */
}

.other-services-lead-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.55;
    margin: 0;
}

.other-services-photo-wrapper {
    width: 100%;
    aspect-ratio: 16 / 11;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.other-services-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.other-services-photo-wrapper:hover .other-services-photo {
    transform: scale(1.03);
}

/* CỘT PHẢI */
.other-services-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.other-services-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.other-services-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.other-services-desc {
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 36px 0;
}

/* 3 Row Box Icon + Text */
.other-services-feature-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
}

.other-feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
}

.feature-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-info {
    display: flex;
    flex-direction: column;
}

.feature-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 2px 0 4px 0;
}

.feature-sub {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ===================================================
   PHẦN 2: 2 ẢNH ACTION CARD CÓ TITLE & NÚT BOOKING NOW
   =================================================== */

.other-services-bottom-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    /* Cách 1 khoảng nhỏ giữa 2 ảnh */
}

.rental-action-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.rental-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rental-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.rental-action-card:hover .rental-img {
    transform: scale(1.05);
}

.rental-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
}

.rental-card-content {
    position: absolute;
    left: 36px;
    bottom: 32px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.rental-card-title {
    color: var(--color-white);
    font-size: 34px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.rental-cta-btn {
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
}

.rental-cta-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(227, 90, 36, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .other-services-top-row {
        flex-direction: column;
        gap: 40px;
    }

    .other-services-left-col,
    .other-services-right-col {
        width: 100%;
    }

    .other-services-title {
        font-size: 32px;
    }

    .other-services-bottom-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* --- Inlined: assets/css/tours-bundle.css --- */
/* ==========================================
   TOURS-BUNDLE
   ========================================== */

/* --- tours.css --- */
/* =========================================
   FEATURED TOURS SECTION
   ========================================= */

.tours-section {
    padding: 40px 0px 40px 0px;
    background-color: #fcfcfc;
    /* Nền xám rất nhẹ hoặc trắng */
}

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

.tours-subtitle {
    color: var(--color-highlight);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 10px 0;
}

.tours-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.tours-carousel {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 30px;
    /* Cho bóng đổ không bị cắt */
    padding-top: 10px;
    margin: 0 -20px;
    /* Bù padding của container */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
}

.tours-carousel::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.tours-carousel .search-tour-card {
    flex: 0 0 calc(25% - 18px);
    /* 4 cột trên desktop */
    min-width: 280px;
    /* Thu nhỏ chiều rộng tối thiểu để vừa 4 thẻ */
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: transform 0.3s ease;
}

.tours-carousel .search-tour-card:hover {
    transform: translateY(-5px);
}

.tour-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}



.tour-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--color-cta);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.tour-content {
    padding: 16px;
    /* Ép nhỏ padding để thẻ lùn xuống */
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tour-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 8px 0;
    /* Giảm margin */
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tour-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Giảm gap */
    margin-bottom: 12px;
    /* Giảm khoảng cách để giảm h */
}

.tour-location {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-light);
    font-size: 13px;
    /* Nhỏ hơn var(--fs-sm) */
}

.tour-location i {
    color: var(--color-cta);
    font-size: 14px;
}

.tour-details {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--color-text-light);
    font-size: 12px;
    /* Scale nhỏ lại */
}

.tour-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tour-details i {
    color: var(--color-cta);
    font-size: 14px;
}

.tour-divider {
    height: 1px;
    background-color: #f0f0f0;
    margin: auto 0 12px 0;
    /* Giảm margin */
}

.tour-line {
    height: 1px;
    background-color: #f0f0f0;
    margin: auto 0 20px 0;
    /* Tự động đẩy xuống dưới cùng nếu card cao hơn */
}

.tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tour-price {
    display: flex;
    flex-direction: column;
}

.price-old {
    font-size: 12px;
    color: var(--color-text-light);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.price-current {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-current strong {
    color: var(--color-cta);
    font-size: var(--fs-lg);
    /* Scale nhỏ lại từ xl */
    font-weight: 700;
}

.price-unit {
    font-size: 11px;
    /* Nhỏ hơn */
    color: var(--color-text-light);
}

.btn-outline-primary {
    border: 1px solid var(--color-cta);
    background: transparent;
    color: var(--color-cta);
    font-size: 12px;
    /* Button scale nhỏ */
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background: var(--color-cta);
    color: var(--color-white);
}

.tours-action {
    text-align: center;
    margin-top: 20px;
}

/* --- tours-hero.css --- */
/* =========================================
   TOURS HERO SECTION (Detail Tours Page)
   ========================================= */

.tours-hero {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 70vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.tours-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient to make bottom text readable while keeping top clear */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 1;
}

/* Top Right Actions (Heart, Share) */
.tours-hero-top-actions {
    position: absolute;
    top: 30px;
    right: 5%;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.tours-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #0b5ed7;
    /* Bright blue as per reference */
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tours-action-btn:hover {
    background-color: #0a58ca;
    transform: translateY(-2px);
}

/* Container and Bottom Content */
.tours-hero-container {
    position: relative;
    z-index: 2;
    padding-bottom: 48px;
    width: 100%;
}

.tours-hero-content-wrapper {
    padding-bottom: 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: 30px;
}

/* Left Info (Title & Location) */
.tours-hero-info {
    flex: 1;
    max-width: 800px;
}

.tours-hero-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #ffffff;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.tours-hero-location {
    font-size: 18px;
    font-weight: 500;
    color: #f8f9fa;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Right Media Actions (Video, Gallery) */
.tours-hero-media-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

.tours-media-btn {
    width: 140px;
    height: 90px;
    background-color: rgba(30, 30, 30, 0.85);
    /* Dark background */
    border: 4px solid rgba(0, 0, 0, 0.8);
    /* Big black border */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.tours-media-btn:hover {
    background-color: rgba(10, 10, 10, 0.95);
    border-color: #000;
}

/* Responsive */
@media (max-width: 991px) {
    .tours-hero-title {
        font-size: 40px;
    }

    .tours-media-btn {
        width: 120px;
        height: 80px;
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .tours-hero {
        height: 60vh;
        min-height: 450px;
    }

    .tours-hero-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .tours-hero-title {
        font-size: 32px;
    }

    .tours-hero-location {
        font-size: 15px;
    }

    .tours-hero-top-actions {
        top: 20px;
        right: 20px;
    }

    .tours-media-btn {
        width: 100px;
        height: 70px;
        font-size: 24px;
    }
}

/* --- tour-detail-content.css --- */
/* =========================================
   TOUR DETAIL CONTENT SECTION
   ========================================= */
.tour-detail-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.tour-detail-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* LEFT MAIN CONTENT */
.tour-detail-main {
    flex: 1;
    min-width: 0;
}

/* Tabs */
.tour-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #eaeaea;
    background-color: #FAF6F2;
    padding: 15px 20px 0 20px;
}

.tour-tabs li {
    padding-bottom: 15px;
    font-weight: 600;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tour-tabs li a {
    color: inherit;
    text-decoration: none;
}

.tour-tabs li.active,
.tour-tabs li:hover {
    color: var(--color-cta);
    border-bottom-color: var(--color-cta);
}

/* Overview */
.tour-overview p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 30px;
}

.tour-overview .see-more {
    color: var(--color-cta);
    font-weight: 600;
    text-decoration: none;
}

/* Info Boxes */
.tour-info-boxes {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.tour-info-boxes .info-box {
    flex: 1;
    background-color: #FAF6F2;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tour-info-boxes .info-box i {
    font-size: 28px;
    color: var(--color-cta);
}

.tour-info-boxes .info-text h4 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.tour-info-boxes .info-text span {
    font-size: 14px;
    color: #666;
}

/* Highlights */
.tour-highlights-box {
    display: flex;
    background-color: #FAF6F2;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
}

.highlight-image {
    width: 320px;
    flex-shrink: 0;
}

.highlight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.highlight-content {
    padding: 30px;
}

.highlight-content h3 {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: 700;
}

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

.highlight-content ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #444;
}

.highlight-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #666;
    font-size: 16px;
}

/* Include / Exclude */
.tour-inc-exc {
    margin-bottom: 40px;
}

.tour-inc-exc h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.inc-exc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.inc-list,
.exc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inc-list li,
.exc-list li {
    margin-bottom: 12px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.inc-list li i {
    color: #2ecc71;
    /* green */
    font-size: 18px;
    font-weight: bold;
}

.exc-list li i {
    color: #e74c3c;
    /* red */
    font-size: 18px;
    font-weight: bold;
}

/* Travel Itinerary */
.tour-itinerary {
    margin-bottom: 40px;
}

.tour-itinerary h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.itinerary-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.itinerary-item {
    border-radius: 8px;
    overflow: hidden;
}

.itinerary-header {
    background-color: #FAF6F2;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.itinerary-time {
    background-color: #EBE6DF;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    margin-right: 20px;
    color: #444;
}

.itinerary-title {
    font-weight: 600;
    font-size: 16px;
    flex: 1;
}

.itinerary-icon {
    font-size: 18px;
    color: #666;
    transition: transform 0.3s ease;
}

.itinerary-item.active .itinerary-icon {
    transform: rotate(180deg);
}

.itinerary-body {
    display: none;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #FAF6F2;
    border-top: none;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* Tour Map */
.tour-map {
    margin-bottom: 40px;
}

.tour-map h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.map-wrapper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FAF6F2;
}

/* FAQs */
.tour-faqs-box {
    margin-bottom: 40px;
    padding: 40px;
    border-radius: 8px;
}

.tour-faqs-box h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 30px 0;
    color: var(--color-primary);
}

.faqs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #e0dcd7;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    cursor: pointer;
}

.faq-title {
    font-weight: 700;
    font-size: 16px;
    color: #444;
}

.faq-icon {
    font-size: 18px;
    color: #666;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-body {
    display: none;
    padding-bottom: 15px;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* Policies */
.tour-policies-box {
    margin-bottom: 40px;
    padding: 40px;
    border-radius: 8px;
}

.tour-policies-box h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: var(--color-primary);
}

.tour-policies-box ul {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.8;
}

/* RIGHT SIDEBAR */
.tour-detail-sidebar {
    width: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-widget {
    padding: 30px;
    border-radius: 8px;
}

.bg-light-beige {
    background-color: #FAF6F2;
}

.widget-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* Book Widget */
.book-date-picker {
    background-color: #fff;
    padding: 12px 15px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.book-date-picker i {
    color: #666;
    font-size: 18px;
}

.book-date-picker input {
    border: none;
    outline: none;
    font-size: 15px;
    color: #444;
    width: 100%;
}

.person-info-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.person-type-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.person-label {
    font-size: 14px;
    color: #555;
}

.person-label strong {
    font-weight: 700;
    color: #222;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.qty-btn:hover {
    background-color: #f0f0f0;
}

.qty-control input {
    width: 20px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
}

.btn-book-now {
    width: 100%;
    background-color: var(--color-cta);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.btn-book-now:hover {
    background-color: var(--color-cta-hover);
}

/* Contact Widget */
.contact-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-widget-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #444;
}

.text-orange {
    color: var(--color-cta) !important;
}

.contact-widget-list li a {
    color: var(--color-cta);
    text-decoration: none;
}

/* Leave Review Btn */
.btn-leave-review {
    width: 100%;
    background-color: var(--color-cta);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-leave-review:hover {
    background-color: var(--color-cta-hover);
}

/* Question Widget */
.question-widget {
    padding-top: 40px;
}

.question-icon {
    width: 60px;
    height: 60px;
    background-color: #EBE6DF;
    color: #333;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    border-radius: 50%;
}

.question-widget p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.btn-ask-question {
    background-color: var(--color-cta);
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-ask-question:hover {
    background-color: var(--color-cta-hover);
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .tour-detail-container {
        flex-direction: column;
    }

    .tour-detail-sidebar {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .tour-info-boxes {
        flex-direction: column;
    }

    .tour-highlights-box {
        flex-direction: column;
    }

    .highlight-image {
        width: 100%;
        height: 200px;
    }

    .inc-exc-grid {
        grid-template-columns: 1fr;
    }

    .tour-tabs {
        flex-wrap: wrap;
        gap: 15px;
        padding: 15px 15px 0 15px;
    }
}

/* =========================================
   TOUR HERO SECTION
   ========================================= */
.tour-hero-section {
    position: relative;
    height: 70vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 0;
    color: #fff;
    background-size: cover;
    background-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.tour-hero-section .container {
    position: relative;
    z-index: 1;
}

.top-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0056b3;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
}

.hero-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: auto;
}

.hero-info {
    flex: 1;
    min-width: 300px;
    padding-bottom: 20px;
}

.tour-hero-section .hero-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.hero-location {
    font-size: 15px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.9;
}

.hero-media-btns {
    display: flex;
    gap: 10px;
    padding-bottom: 20px;
}

.btn-media {
    background: rgba(50, 50, 50, 0.8);
    border: none;
    color: #fff;
    padding: 12px 25px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: background 0.3s;
}

.btn-media:hover {
    background: rgba(50, 50, 50, 1);
}

/* Section Titles */
.tour-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--color-primary);
}

/* Tour Map Box */
.tour-map-box {
    margin-bottom: 40px;
}

.map-iframe-container {
    border-radius: 12px;
    overflow: hidden;
}

.map-iframe-container iframe {
    border: 0;
}

.map-iframe-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Book Widget */
.tour-date-picker {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
}

/* Related Tours */
.related-tours-section {
    padding: 0 0 60px 0;
    background: #fff;
}

.related-title {
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
}

.related-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.related-tour-card {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

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

.related-tour-card .tour-image {
    position: relative;
    padding-top: 66%;
}

.related-tour-card .tour-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-tour-card .tour-content {
    padding: 24px;
}

.related-tour-card .tour-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.related-tour-card .tour-title a {
    color: inherit;
    text-decoration: none;
}

.related-tour-card .tour-meta {
    display: flex;
    gap: 15px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.related-tour-card .tour-location,
.related-tour-card .tour-details {
    display: flex;
    align-items: center;
    gap: 5px;
}

.related-tour-card .tour-location i,
.related-tour-card .tour-details i {
    color: var(--color-cta, #ea580c);
}

.related-tour-card .tour-divider {
    height: 1px;
    background: #eee;
    margin-bottom: 20px;
}

.related-tour-card .tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.related-tour-card .price-current {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-cta, #ea580c);
}

.related-tour-card .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

/* Hero Gallery Grid */
.tour-hero-grid-layout {
    background-image: none !important;
    background: transparent;
    overflow: hidden;
    padding: 0 !important;
}

.hero-top-right-btns {
    position: absolute;
    top: 40px;
    right: 30px;
    z-index: 10;
    display: flex;
    gap: 20px;
}

.hero-btn-gallery,
.hero-btn-video {
    background-color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.hero-btn-gallery i,
.hero-btn-video i {
    color: #554A41;
    /* Brownish color for icons */
    font-size: 18px;
}

.hero-btn-gallery span,
.hero-btn-video span {
    color: #554A41;
    /* Match icon color */
}

.hero-btn-gallery:hover,
.hero-btn-video:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hero-gallery-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
    z-index: 0;
}

.hero-img-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.hero-img-2 {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
}

.hero-img-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.hero-img-4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.hero-gallery-container div {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.hero-gallery-container div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.hero-gallery-container div:hover img {
    transform: scale(1.05);
}

.tour-hero-grid-layout .hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.tour-hero-grid-layout .container {
    padding-top: 50px;
    padding-bottom: 30px;
}

.missing-img-placeholder {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 16px;
}

/* Gallery Modal */
.tour-gallery-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: none;
    /* hidden by default */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tour-gallery-modal.active {
    display: flex;
}

.tour-gallery-modal .modal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 2;
    transition: color 0.3s;
}

.tour-gallery-modal .modal-close:hover {
    color: #ccc;
}

.tour-gallery-modal .modal-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    position: relative;
}

.tour-gallery-modal .modal-image-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.tour-gallery-modal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    user-select: none;
}

.tour-gallery-modal .modal-prev,
.tour-gallery-modal .modal-next {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    padding: 20px;
    transition: color 0.3s;
}

.tour-gallery-modal .modal-prev:hover,
.tour-gallery-modal .modal-next:hover {
    color: #ccc;
}

.tour-gallery-modal .modal-counter {
    color: #fff;
    font-size: 16px;
    margin-top: 15px;
    letter-spacing: 2px;
}

/* =========================================
   MOBILE RESPONSIVENESS FOR HERO BANNER
   ========================================= */
@media (max-width: 767px) {

    /* Standard Hero Banner */
    .tour-hero-section {
        height: 60vh;
        min-height: 400px;
        padding: 20px 0;
    }

    .tour-hero-section .hero-title {
        font-size: 28px;
        line-height: 1.3;
    }

    .hero-location {
        font-size: 14px;
    }

    /* Grid Gallery Hero Banner (Hide small images to avoid squishing) */
    .hero-gallery-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        padding: 5px;
    }

    .hero-img-1 {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

    .hero-gallery-container .hero-img-2,
    .hero-gallery-container .hero-img-3,
    .hero-gallery-container .hero-img-4 {
        display: none !important;
    }

    .hero-gallery-container div {
        border-radius: 8px;
    }
}

/* --- tours-basic-info.css --- */
/* =========================================
   TOURS BASIC INFO SECTION
   ========================================= */

.tours-basic-info {
    padding: 80px 0;
    background-color: var(--color-white);
}

.tours-basic-info .section-header {
    margin-bottom: 60px;
    text-align: center;
}

.tours-basic-info .section-line {
    width: 40px;
    height: 3px;
    background-color: var(--color-primary);
    /* #3B774B */
    margin: 0 auto 16px auto;
}

.tours-basic-info .section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    /* #3B774B */
    margin: 0 0 12px 0;
}

.tours-basic-info .section-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-text-light);
    margin: 0;
}

.basic-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 100px;
    width: 100%;
}

.info-item {
    padding-top: 15px;
    padding-bottom: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid #E5E5E5;
}

/* Bỏ border-bottom của phần tử cuối cùng trong mỗi cột */
.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 14px;
    font-weight: 700;
    color: #3B774B;
    /* Green color per screenshot */
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

.info-desc {
    font-size: 15px;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
}

.text-highlight {
    color: #FF5A36;
    /* Orange/Red text highlight */
}

/* Responsive */
@media (max-width: 991px) {
    .basic-info-grid {
        gap: 30px;
    }
}

@media (max-width: 767px) {
    .basic-info-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .tours-basic-info .section-title {
        font-size: 32px;
    }

    /* Khôi phục lại border-bottom cho phần tử cuối của cột 1 khi xếp dọc */
    .info-col:first-child .info-item:last-child {
        border-bottom: 1px solid #E5E5E5;
    }
}

/* --- tours-trip-overview.css --- */
/* =========================================
   TOURS TRIP OVERVIEW SECTION
   ========================================= */

.tours-trip-overview {
    padding: 40px 0 80px;
    background-color: var(--color-white);
}

.overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 20px;
}

.overview-title {
    font-size: 32px;
    font-weight: 700;
    color: #3B774B;
    /* Green color from screenshot */
    margin: 0;
}

.overview-toggle {
    font-size: 24px;
    color: var(--color-text);
    cursor: pointer;
}

.overview-desc p,
.overview-desc-bottom p {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.overview-desc p:last-child {
    margin-bottom: 40px;
}

.overview-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.overview-img-wrap {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 4px;
}

.overview-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overview-desc-bottom {
    margin-bottom: 40px;
}

.overview-map-wrap {
    width: 100%;
}

.overview-map-wrap iframe {
    border-radius: 8px;
    background-color: #e5e3df;
    /* Placeholder map background */
}

.overview-map-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.overview-map-caption {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 16px 0 0 0;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 767px) {
    .overview-images {
        grid-template-columns: 1fr;
    }

    .overview-img-wrap {
        height: 300px;
    }

    .overview-title {
        font-size: 24px;
    }
}


/* --- Inlined: assets/css/custom-tours-bundle.css --- */
/* ==========================================
   CUSTOM-TOURS-BUNDLE
   ========================================== */

/* --- custom-tours.css --- */
/* Custom Tours Section */
.custom-tours-section {
    padding: 40px 0;
    overflow: hidden;
}

.custom-tours-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* Left Content */
.custom-tours-content {
    /* Use min(100vw, 1920px) so it doesn't break alignment when capped */
    --wrapper-width: min(100vw, 1920px);
    width: calc(max(20px, (var(--wrapper-width) - var(--container-width, 1440px)) / 2 + 20px) + 500px);
    padding-left: max(20px, calc((var(--wrapper-width) - var(--container-width, 1440px)) / 2 + 20px));
    padding-right: 40px;
    flex-shrink: 0;
}

.custom-tours-subtitle {
    color: var(--color-highlight);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 15px;
}

.custom-tours-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    line-height: 1.1;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
}

.custom-tours-desc {
    color: var(--color-text-light);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 35px;
}

.custom-tours-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    color: var(--color-cta);
    border: 1px solid var(--color-cta);
    border-radius: 4px;
    background: transparent;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.custom-tours-btn:hover {
    background: var(--color-cta);
    color: var(--color-white);
}

/* Right Content */
.custom-tours-slider-area {
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 40px 0;
    /* Gives the pink bg height and centers content */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.custom-tours-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10%;
    right: -20px;
    /* Bleed precisely 20px to hit the right edge of screen */
    background-color: #FFF3F0;
    /* Light pink background */
    z-index: 1;
    border-radius: 20px 0 0 20px;
}

.custom-tours-nav {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 24px;
    padding-right: 20px;
}

.custom-tours-nav .nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-white);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #333;
    transition: all 0.3s ease;
}

.custom-tours-nav .nav-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.custom-tours-slider {
    display: flex;
    gap: 24px;
    position: relative;
    z-index: 2;
    overflow-x: auto;
    scrollbar-width: none;
    /* Firefox */
}

.custom-tours-slider::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.custom-tour-slide {
    flex: 0 0 calc(33.333% - 16px);
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.custom-tour-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.custom-tour-slide:hover img {
    transform: scale(1.05);
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    color: var(--color-white);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.slide-info h3 {
    margin: 0 0 5px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}

.slide-info p {
    margin: 0;
    font-size: 15px;
    opacity: 0.9;
}

.slide-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    text-decoration: none;
    transition: all 0.3s ease;
}

.slide-link:hover {
    background: var(--color-white);
    color: var(--color-primary);
}

/* Responsive */
@media (max-width: 1199px) {
    .custom-tours-title {
        font-size: var(--fs-h2);
    }
}

@media (max-width: 991px) {
    .custom-tours-wrapper {
        flex-direction: column;
    }

    .custom-tours-content,
    .custom-tours-slider-area {
        width: 100%;
        padding-right: 0;
    }

    .custom-tours-bg {
        left: -20px;
        right: -20px;
        border-radius: 0;
    }

    .custom-tours-title br {
        display: none;
    }

    .custom-tour-slide {
        flex: 0 0 calc(50% - 12px);
        /* Show 2 slides on tablet */
    }
}

@media (max-width: 768px) {
    .custom-tour-slide {
        flex: 0 0 calc(75% - 12px);
        /* Show 1.3 slides on smaller tablet */
    }
}

@media (max-width: 575px) {
    .custom-tour-slide {
        flex: 0 0 85%;
        /* Show 1 slide with a peek of the next on mobile */
    }
}

/* --- custom-tour-hero.css --- */
/* =========================================
   CUSTOM TOUR HERO SECTION
   ========================================= */

.custom-tour-hero {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 700px;
    /* Or 80vh for responsiveness */
    height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.custom-tour-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.custom-tour-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient overlay: Dark on the left to read text, fading out to the right */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0) 80%);
    z-index: 1;
}

.custom-tour-hero .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.custom-tour-hero-content {
    max-width: 800px;
    /* Limits the width of the text block */
    color: var(--color-white);
}

.custom-tour-hero-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 24px 0;
    color: var(--color-white);
    white-space: nowrap;
}

.custom-tour-hero-desc {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 32px 0;
    color: var(--color-white);
    opacity: 0.9;
}

.btn-start-planning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.btn-start-planning:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    .custom-tour-hero-title {
        font-size: 48px;
    }

    .custom-tour-hero-overlay {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.2) 100%);
    }
}

@media (max-width: 767px) {
    .custom-tour-hero {
        min-height: 500px;
        height: auto;
        padding: 100px 0;
    }

    .custom-tour-hero-title {
        font-size: 36px;
        white-space: normal;
    }

    .custom-tour-hero-overlay {
        background: rgba(0, 0, 0, 0.6);
        /* Solid dark overlay for mobile to ensure readability */
    }
}

/* --- custom-tour-process.css --- */
/* =========================================
   CUSTOM TOUR PROCESS SECTION
   ========================================= */

.custom-tour-process {
    padding: 40px 0;
    background-color: var(--color-white);
}

/* Heading */
.custom-tour-process .section-heading {
    max-width: 700px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.custom-tour-process .section-subtitle {
    color: #D8DC2A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    /* Reduced to bring it closer to the title */
    text-transform: capitalize;
}

.custom-tour-process .section-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.custom-tour-process .section-desc {
    color: var(--color-text-light, #666);
    font-size: 16px;
    line-height: 1.6;
}

/* Grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Card */
.process-card {
    background-color: #F4F3EE;
    /* Light beige/off-white */
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.process-number {
    width: 56px;
    height: 56px;
    background-color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 30px;
    line-height: 1;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.process-card-title {
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.process-card-desc {
    color: var(--color-text, #444);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }
}

@media (max-width: 767px) {
    .custom-tour-process {
        padding: 40px 0;
    }

    .custom-tour-process .section-title {
        font-size: 32px;
    }

    .process-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- custom-tour-features.css --- */
/* =========================================
   CUSTOM TOUR FEATURES SECTION
   ========================================= */

.custom-tour-features {
    padding: 40px 0;
    background-color: var(--color-white);
}

/* Heading */
.custom-tour-features .section-heading {
    max-width: 800px;
    margin-bottom: 50px;
    text-align: left;
    /* Căn trái theo yêu cầu */
}

.custom-tour-features .section-subtitle {
    color: #D8DC2A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.custom-tour-features .section-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.custom-tour-features .section-desc {
    color: var(--color-text-light, #666);
    font-size: 16px;
    line-height: 1.6;
}

/* Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Card */
.feature-card {
    background-color: var(--color-white);
    border: 1px solid #e5e7eb;
    /* Viền mỏng màu xám nhạt */
    border-radius: 8px;
    padding: 40px 40px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: #d1d5db;
}

.feature-card-title {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.feature-card-desc {
    color: var(--color-text, #555);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .custom-tour-features .section-title {
        font-size: 36px;
    }

    .features-grid {
        gap: 20px;
    }

    .feature-card {
        padding: 30px 24px;
    }
}

@media (max-width: 767px) {
    .custom-tour-features {
        padding: 40px 0;
    }

    .custom-tour-features .section-title {
        font-size: 32px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --- custom-tour-routes.css --- */
/* =========================================
   CUSTOM TOUR ROUTES SECTION
   ========================================= */

.custom-tour-routes {
    padding: 40px 0;
    background-color: var(--color-white);
}

/* Heading */
.custom-tour-routes .section-heading {
    max-width: 700px;
    margin: 0 auto 60px auto;
    text-align: center;
}

.custom-tour-routes .section-subtitle {
    color: #D8DC2A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.custom-tour-routes .section-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.custom-tour-routes .section-desc {
    color: var(--color-text-light, #666);
    font-size: 16px;
    line-height: 1.6;
}

/* Grid */
.routes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* Card */
.route-card {
    background-color: var(--color-white);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.route-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.route-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.route-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.route-card:hover .route-card-img img {
    transform: scale(1.05);
}

.route-card-content {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.route-card-title {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.route-card-desc {
    color: var(--color-text, #555);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.route-card-btn {
    display: inline-block;
    color: var(--color-cta);
    border: 1px solid var(--color-cta);
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.3s ease;
}

.route-card-btn:hover {
    background-color: var(--color-cta);
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 991px) {
    .custom-tour-routes .section-title {
        font-size: 36px;
    }

    .routes-grid {
        gap: 30px;
    }

    .route-card-content {
        padding: 30px;
    }

    .route-card-title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .custom-tour-routes {
        padding: 40px 0;
    }

    .custom-tour-routes .section-title {
        font-size: 32px;
    }

    .routes-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .route-card-content {
        padding: 24px;
    }
}

/* --- custom-tour-corporate.css --- */
/* =========================================
   CUSTOM TOUR CORPORATE SECTION
   ========================================= */

.custom-tour-corporate {
    padding: 40px 0;
    background-color: var(--color-white);
}

/* Heading */
.custom-tour-corporate .section-heading {
    max-width: 800px;
    margin-bottom: 50px;
    text-align: left;
}

.custom-tour-corporate .section-subtitle {
    color: #D8DC2A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.custom-tour-corporate .section-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.custom-tour-corporate .section-desc {
    color: var(--color-text-light, #666);
    font-size: 16px;
    line-height: 1.6;
}

/* Table */
.corporate-table-wrapper {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow-x: auto;
    /* For mobile responsiveness */
}

.corporate-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    /* Ensures table doesn't get too squished on mobile before scrolling */
}

.corporate-table th {
    background-color: #F4F3EE;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 16px;
    padding: 24px 30px;
    text-align: left;
}

.corporate-table td {
    padding: 24px 30px;
    border-bottom: 1px solid #e5e7eb;
    color: var(--color-text, #555);
    font-size: 15px;
    line-height: 1.6;
    vertical-align: top;
}

.corporate-table tbody tr:last-child td {
    border-bottom: none;
}

.corporate-table tbody tr {
    transition: background-color 0.2s ease;
}

.corporate-table tbody tr:hover {
    background-color: #f9f9f9;
}

.corporate-table .program-name {
    color: var(--color-primary);
    font-weight: 700;
    width: 20%;
}

.corporate-table th:nth-child(2),
.corporate-table td:nth-child(2) {
    width: 15%;
}

.corporate-table th:nth-child(3),
.corporate-table td:nth-child(3) {
    width: 20%;
}

.corporate-table th:nth-child(4),
.corporate-table td:nth-child(4) {
    width: 45%;
}

/* Responsive */
@media (max-width: 991px) {
    .custom-tour-corporate .section-title {
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .custom-tour-corporate {
        padding: 40px 0;
    }

    .custom-tour-corporate .section-title {
        font-size: 32px;
    }

    .corporate-table th,
    .corporate-table td {
        padding: 16px 20px;
    }
}

/* --- custom-tour-contact.css --- */
/* =========================================
   CUSTOM TOUR CONTACT SECTION
   ========================================= */

.custom-tour-contact {
    padding: 40px 0;
    background-color: #F4F3EE;
}

/* Heading */
.custom-tour-contact .section-heading {
    max-width: 800px;
    margin: 0 auto 50px auto;
    text-align: center;
}

.custom-tour-contact .section-subtitle {
    color: #D8DC2A;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: capitalize;
}

.custom-tour-contact .section-title {
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.custom-tour-contact .section-desc {
    color: var(--color-text-light, #666);
    font-size: 16px;
    line-height: 1.6;
}

/* Form Box */
.contact-form-box {
    background-color: var(--color-white);
    border-radius: 12px;
    padding: 50px 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    max-width: 900px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.form-control {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #fdfdfd;
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--color-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control::placeholder {
    color: #a0aec0;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 110px;
}

/* Custom Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 16px top 50%;
    background-size: 10px auto;
}

/* Checkboxes */
.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    margin-top: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text);
}

.checkbox-label input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Submit Button */
.form-submit {
    margin-top: 40px;
    text-align: center;
}

.btn-submit-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
    cursor: pointer;
}

.btn-submit-form:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    .contact-form-box {
        padding: 40px;
    }

    .form-row {
        gap: 30px;
    }
}

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

    .contact-form-box {
        padding: 30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .form-submit {
        margin-top: 20px;
    }
}

/* Custom Calendar Mockup */
.custom-calendar-mockup {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    background-color: var(--color-white);
    font-family: var(--font-primary);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.calendar-nav-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-selects {
    display: flex;
    gap: 12px;
}

.calendar-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 30px 8px 12px;
    font-size: 15px;
    color: #333;
    background-color: var(--color-white);
    cursor: pointer;
}

.calendar-grid {
    display: block;
}

.calendar-day-names {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 16px;
}

.calendar-day-names span {
    font-size: 13px;
    color: #888;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    row-gap: 8px;
    column-gap: 4px;
}

.calendar-days span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 15px;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

.calendar-days span.other-month {
    color: #ccc;
}

.calendar-days span.selected-start,
.calendar-days span.selected-end {
    background-color: #2D2D2D;
    color: var(--color-white);
}

.calendar-days span.selected-in-range {
    background-color: #f3f4f6;
    color: #333;
}

/* --- custom-tour-cta.css --- */
/* =========================================
   CUSTOM TOUR CTA SECTION
   ========================================= */

.custom-tour-cta {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.custom-tour-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.custom-tour-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    /* Dark overlay */
    z-index: 1;
}

.custom-tour-cta .container {
    position: relative;
    z-index: 2;
}

.custom-tour-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.custom-tour-cta-title {
    color: var(--color-white);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 36px;
}

.btn-contact-us {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: var(--color-cta);
    color: var(--color-white);
    padding: 16px 40px;
    border-radius: 50px;
    /* Pill shape */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-contact-us:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.btn-contact-us i {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 991px) {
    .custom-tour-cta-title {
        font-size: 42px;
    }
}

@media (max-width: 767px) {
    .custom-tour-cta {
        padding: 40px 0;
    }

    .custom-tour-cta-title {
        font-size: 32px;
    }

    .btn-contact-us {
        padding: 14px 32px;
    }
}


/* --- Inlined: assets/css/destination-bundle.css --- */
/* ==========================================
   DESTINATION-BUNDLE
   ========================================== */

/* --- destination-list.css --- */
/* ===================================================
   DESTINATION - LIST & GRID SECTION
   =================================================== */

.destination-list-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.destination-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Phần trên: Header Title & Dropdown space-between */
.destination-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.destination-main-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Custom Dropdown select */
.destination-sort-wrap {
    display: flex;
    align-items: center;
}

.destination-custom-select {
    position: relative;
    display: inline-block;
}

.destination-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-white);
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 34px 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
}

.destination-select:hover,
.destination-select:focus {
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
}

/* Phần dưới: Lưới 4 cột các box ảnh */
.destination-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Card item */
.destination-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    /* Radius chuẩn như ảnh mẫu */
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.destination-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.destination-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.destination-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.destination-card:hover .destination-img {
    transform: scale(1.06);
}

/* Lớp phủ chuyển màu đen nhẹ dưới đáy để nổi bật text */
.destination-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 70%);
}

/* Nội dung Text & Trips nằm ở góc dưới */
.destination-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    color: var(--color-white);
}

.destination-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.destination-trips {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

/* Responsive */
@media (max-width: 1024px) {
    .destination-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .destination-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .destination-main-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .destination-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .destination-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* --- destination-detail.css --- */
/* ===================================================
   DESTINATION DETAIL & RELATED DESTINATIONS SECTION
   =================================================== */

.destination-detail-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.destination-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.destination-info-block {
    margin-bottom: 40px;
}

.destination-info-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 22px 0;
    letter-spacing: -0.5px;
}

.destination-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 20px 0;
}

/* 2 Ảnh nằm ngang cạnh nhau */
.destination-gallery-two-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin: 36px 0 0px 0;
}

.destination-gallery-card {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.gallery-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.destination-gallery-card:hover .gallery-photo {
    transform: scale(1.03);
}

/* ===================================================
   RELATED DESTINATION (3 BOX TOURS)
   =================================================== */

.destination-related-block {
    margin-top: 0;
}

.related-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    margin: 0 0 35px 0;
    letter-spacing: -0.5px;
}

.related-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.related-tour-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f5f9;
}

.related-tour-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
}

.related-tour-card .tour-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.related-tour-card .tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.related-tour-card:hover .tour-image img {
    transform: scale(1.04);
}

.related-tour-card .tour-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: var(--color-cta);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.related-tour-card .tour-content {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.related-tour-card .tour-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.related-tour-card .tour-meta {
    margin-bottom: 16px;
}

.related-tour-card .tour-location {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-tour-card .tour-details {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.related-tour-card .tour-details span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-tour-card .tour-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin-bottom: 16px;
}

.related-tour-card .tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.related-tour-card .price-old {
    display: block;
    font-size: 11px;
    color: var(--color-text-lighter);
    text-decoration: line-through;
}

.related-tour-card .price-current {
    font-size: 20px;
    color: var(--color-cta);
    line-height: 1;
}

.related-tour-card .price-unit {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: normal;
}

.related-tour-card .btn-outline-primary {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #fed7aa;
    color: var(--color-cta);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.related-tour-card .btn-outline-primary:hover {
    background-color: var(--color-cta);
    color: var(--color-white);
    border-color: var(--color-cta);
}

/* Responsive */
@media (max-width: 991px) {
    .related-tours-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .destination-gallery-two-cols {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .related-tours-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .destination-info-title,
    .related-title {
        font-size: 30px;
    }
}


/* --- Inlined: assets/css/blog-bundle.css --- */
/* ==========================================
   BLOG-BUNDLE
   ========================================== */

/* --- blog.css --- */
/* =========================================
   LATEST MEDIA (BLOG) SECTION
   ========================================= */

.blog-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.blog-header {
    text-align: center;
    margin-bottom: 50px;
}

.blog-subtitle {
    color: #DED931;
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 10px 0;
}

.blog-main-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    /* Trái to hơn một chút */
    gap: 40px;
    align-items: stretch;
}

/* --- Featured Post (Trái) --- */
.blog-featured {
    display: flex;
    flex-direction: column;
}

.blog-featured .blog-image {
    width: 100%;
    aspect-ratio: 16/10;
    /* Ảnh chữ nhật nằm ngang */
    overflow: hidden;
    margin-bottom: 24px;
    /* User yêu cầu không bo góc cho ảnh trái */
    border-radius: 0;
}

.blog-featured .blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-featured:hover .blog-image img {
    transform: scale(1.05);
}

.blog-date {
    color: var(--color-text-light);
    font-size: 13px;
    margin-bottom: 12px;
}

.blog-featured .blog-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.blog-featured .blog-desc {
    color: var(--color-text-light);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* --- List Posts (Phải) --- */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Khoảng cách giữa các bài nhỏ */
}

.blog-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    /* Cột ảnh cố định, cột chữ tự giãn */
    gap: 24px;
    align-items: center;
    /* Căn giữa dọc */
}

.blog-item-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 6px;
    /* Ảnh nhỏ bo góc nhẹ */
    overflow: hidden;
}

.blog-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-item:hover .blog-item-image img {
    transform: scale(1.05);
}

.blog-item-content {
    display: flex;
    flex-direction: column;
}

.blog-item-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    margin: 0 0 10px 0;
    line-height: 1.3;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-item-desc {
    color: var(--color-text-light);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px 0;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Global Link --- */
.blog-link {
    color: var(--color-black);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
}

.blog-link i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.blog-link:hover {
    color: var(--color-primary);
}

.blog-link:hover i {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .blog-item {
        grid-template-columns: 150px 1fr;
    }
}

@media (max-width: 575px) {
    .blog-item {
        grid-template-columns: 1fr;
    }

    .blog-item-image {
        aspect-ratio: 16/9;
    }
}

/* --- blog-articles.css --- */
/* ===================================================
   BLOG - ARTICLES ARCHIVE & PAGINATION SECTION
   =================================================== */

.blog-articles-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.blog-articles-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header căn giữa */
.blog-articles-header {
    text-align: center;
    margin-bottom: 50px;
}

.blog-articles-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 10px 0;
}

.blog-articles-desc {
    color: var(--color-text-muted);
    font-size: 15px;
    margin: 0;
}

/* Lưới 6 bài viết (3 cột x 2 hàng) */
.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 28px;
    margin-bottom: 60px;
}

/* Card bài viết */
.blog-article-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.article-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #f1f5f9;
}

.article-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.blog-article-card:hover .article-img {
    transform: scale(1.04);
}

.article-content {
    padding: 22px 24px 26px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-date {
    font-size: 12.5px;
    color: var(--color-text-lighter);
    margin-bottom: 10px;
    display: block;
}

.article-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.article-title a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-title a:hover {
    color: var(--color-cta);
}

/* ===================================================
   PHÂN TRANG TRÒN
   =================================================== */

.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.page-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background-color: var(--color-white);
    transition: all 0.2s ease;
}

.page-number:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
}

/* Trang active màu cam tròn */
.page-number.active {
    background-color: var(--color-cta);
    color: var(--color-white);
    border-color: var(--color-cta);
    box-shadow: 0 4px 10px rgba(227, 90, 36, 0.25);
}

.page-number.next-page {
    color: #475569;
}

.page-number.next-page:hover {
    background-color: var(--color-bg-beige);
    color: var(--color-cta);
}

/* Responsive */
@media (max-width: 991px) {
    .blog-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .blog-articles-title {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .blog-articles-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto 50px auto;
    }
}


/* --- Inlined: assets/css/global-bundle.css --- */
/* ==========================================
   GLOBAL-BUNDLE
   ========================================== */

/* --- header.css --- */
.site-header {
    background: var(--color-white);
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Header Top */
.header-top {
    border-bottom: 1px solid var(--border-color);
    /* Đường line nhạt */
    padding: 10px 0;
}

.header-top-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    /* icon cách nhau vừa phải */
}

.header-socials a,
.header-socials .language-switcher {
    color: var(--color-text-light);
    font-size: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.header-socials a:hover,
.header-socials .language-switcher:hover {
    color: var(--color-primary);
}

.language-switcher {
    font-size: var(--fs-sm);
}

/* Header Main */
.header-main {
    position: relative;
    padding: 10px 0;
}

.header-main-inner {
    display: flex;
    justify-content: space-between;
    /* Cách đều 3 phần */
    align-items: center;
}

/* 1. Logo (Left) */
.header-logo {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.header-logo img {
    max-height: 52px;
    width: auto;
    display: block;
}

/* 2. Menu (Center) */
.header-nav {
    flex: 2;
    display: flex;
    justify-content: center;
}

.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-menu li {
    position: relative;
}

.main-menu a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 500;
    font-size: var(--fs-menu);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.main-menu a:hover {
    opacity: 0.8;
}

.main-menu a i {
    font-size: var(--fs-xs);
    margin-top: 2px;
}

/* 3. CTA (Right) */
.header-cta {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.btn-primary i {
    font-size: var(--fs-base);
}

.btn-primary:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Responsive basics */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-primary);
    cursor: pointer;
    padding: 5px;
}

@media (max-width: 991px) {
    .header-main-inner {
        justify-content: space-between;
    }

    .header-top {
        display: none;
        /* Hide topbar on mobile to save space */
    }

    .header-logo {
        flex: 0 0 auto;
        order: 1;
    }

    .header-cta {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        order: 2;
        margin-right: 15px;
    }

    .header-cta .btn-primary {
        padding: 8px 16px;
        font-size: 14px;
    }

    .mobile-menu-toggle {
        display: block;
        order: 3;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        padding: 20px;
        z-index: 1000;
    }

    .header-nav.active {
        display: block;
    }

    .main-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .main-menu>li>a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #f1f5f9;
    }
}

/* Mega Menu Styles */
.has-mega-menu {
    position: relative !important;
}

/* Active state for menu item (5px underline) */
.main-menu li.has-mega-menu:hover>a {
    position: relative;
    color: var(--color-primary);
    opacity: 1;
}

.main-menu li.has-mega-menu:hover>a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    /* Closer to the text */
    left: 0;
    width: 100%;
    height: 2px;
    /* Thinner line */
    background-color: var(--color-primary);
    /* Green color instead of orange */
}

/* The Panel */
.mega-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 23px);
    /* Exact calculation to touch the hero banner */
    left: 50%;
    transform: translateX(-50%);
    width: 850px;
    max-width: 90vw;
    background-color: var(--color-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    border-radius: 0 0 8px 8px;
    /* subtle rounding */
}

.main-menu li.has-mega-menu:hover .mega-menu-panel {
    display: flex;
}

/* Sidebar */
.mega-menu-sidebar {
    width: 280px;
    background-color: #f8f9fa;
    padding: 20px;
    border-right: 1px solid var(--border-color);
}

.mega-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-tabs li {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--color-text-dark);
    border-radius: 4px;
    border-left: 3px solid transparent;
    /* default transparent border */
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.mega-tabs li i {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.mega-tabs li:hover,
.mega-tabs li.active {
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-left: 3px solid var(--color-primary);
}

.mega-tabs li:hover i,
.mega-tabs li.active i {
    opacity: 1;
}

/* Content Area */
.mega-menu-content {
    flex: 1;
    padding: 30px 40px;
}

.mega-pane {
    display: none;
}

.mega-pane.active {
    display: block;
}

.mega-pane-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 20px;
}

/* The trick for flowing top-to-bottom then left-to-right safely */
.mega-pane-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 3;
    column-gap: 30px;
}

.mega-pane-list li {
    break-inside: avoid;
    margin-bottom: 15px;
}

.mega-pane-list a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.2s;
}

.mega-pane-list a:hover {
    color: var(--color-cta);
}

@media (max-width: 991px) {
    .main-menu li.has-mega-menu:hover .mega-menu-panel {
        position: static;
        flex-direction: column;
        box-shadow: none;
        border: none;
    }

    .mega-menu-sidebar {
        width: 100%;
        border-right: none;
        padding: 10px;
    }

    .mega-menu-content {
        padding: 15px;
    }

    .mega-pane-list {
        max-height: none;
        /* Let it grow tall on mobile */
        flex-wrap: nowrap;
    }

    .mega-pane-list li {
        width: 100%;
    }
}

/* All destinations specific style */
.mega-tabs li.mega-all-destinations {
    margin-top: 15px;
    padding: 0;
}

.mega-tabs li.mega-all-destinations a {
    display: block;
    padding: 12px 15px;
    color: var(--color-text-dark);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.mega-tabs li.mega-all-destinations:hover,
.mega-tabs li.mega-all-destinations.active {
    background-color: var(--color-white);
}

.mega-tabs li.mega-all-destinations:hover a,
.mega-tabs li.mega-all-destinations.active a {
    color: var(--color-primary);
}

/* Standard WordPress Sub-Menu Styling */
.main-menu .menu-item-has-children {
    position: relative;
}

.main-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-white);
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px 0;
    list-style: none;
    margin: 0;
    z-index: 1000;
}

.main-menu .menu-item-has-children:hover>.sub-menu {
    display: block;
}

.main-menu .sub-menu li {
    padding: 0;
}

.main-menu .sub-menu a {
    padding: 10px 20px;
    color: var(--color-text-dark);
    font-size: 14px;
    display: block;
    border-bottom: 1px solid #f1f5f9;
}

.main-menu .sub-menu li:last-child a {
    border-bottom: none;
}

.main-menu .sub-menu a:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
    opacity: 1;
}

/* Add dropdown arrow icon via pseudo-element */
.main-menu .menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-top: -3px;
    opacity: 0.7;
}

/* --- hero.css --- */
.hero-banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 80vh;
    /* Adjust based on exact design */
    max-height: 850px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 40px 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.hero-bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-slider-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 3;
    pointer-events: none;
}

.hero-nav-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.hero-nav-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero-content {
    max-width: 800px;
    /* Limit width as requested */
}

.hero-title {
    color: var(--color-white);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.hero-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--fs-lg);
    font-weight: 400;
    margin: 0 0 40px 0;
}

.hero-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    /* Glassmorphism effect */
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* Border trắng vừa */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    /* Bo góc */
    padding: 8px;
    max-width: 500px;
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.search-icon {
    color: var(--color-white);
    font-size: var(--fs-xl);
    margin-right: 12px;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: var(--fs-base);
    outline: none;
    width: 100%;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.85);
    /* Placeholder trắng mờ */
}

.btn-search {
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: var(--fs-btn);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-search:hover {
    background-color: var(--color-cta-hover);
}

/* Search Dropdown Panel */
.search-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 15px);
    left: 20px;
    width: calc(100% - 40px);
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 100;
    padding: 30px;
    color: var(--color-text);
}

.search-dropdown-panel.active {
    display: flex;
}

.search-dropdown-col {
    flex: 1;
}

.popular-searches {
    flex: 0 0 300px;
    padding-right: 30px;
    border-right: 1px solid #eee;
}

.trending-tours {
    padding-left: 30px;
}

.sd-title {
    font-size: var(--fs-lg);
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0;
}

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

.sd-list li {
    margin-bottom: 0;
}

.sd-list a {
    display: flex;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--fs-base);
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    transition: color 0.3s;
}

.sd-list li:last-child a {
    border-bottom: none;
}

.sd-list a i {
    margin-right: 10px;
    font-size: 1.2rem;
    color: var(--color-text-light);
}

.sd-list a:hover,
.sd-list a.active {
    color: var(--color-primary);
}

.sd-list a.active i {
    color: var(--color-primary);
}

.sd-tours-wrapper {
    max-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px;
}

.sd-tours-wrapper::-webkit-scrollbar {
    width: 5px;
}

.sd-tours-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.sd-tours-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.sd-tours-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.sd-tours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.sd-tour-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.sd-tour-card {
    display: flex;
    background: var(--color-white);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    height: 125px;
}

.sd-tour-img {
    width: 130px;
    flex-shrink: 0;
}

.sd-tour-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-tour-info {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sd-tour-loc {
    font-size: 12px;
    color: var(--color-text-light);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.sd-tour-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--color-heading);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-tour-meta {
    font-size: 13px;
    color: var(--color-text);
    line-height: 1.5;
}

.sd-tour-meta strong {
    font-weight: 700;
    color: var(--color-heading);
}

.sd-view-all {
    text-align: right;
}

.sd-view-all a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    font-size: var(--fs-base);
}

.sd-view-all a:hover {
    text-decoration: none;
}

@media (max-width: 768px) {
    .search-dropdown-panel {
        flex-direction: column;
        padding: 20px;
    }

    .popular-searches {
        flex: none;
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .trending-tours {
        padding-left: 0;
    }

    .sd-tours-grid {
        grid-template-columns: 1fr;
    }
}


/* FIX: Prevent text and button overlap on scaled down/smaller screens */
@media (max-width: 1500px) {
    .hero-content {
        padding-left: 80px;
        /* Avoid overlap with the left navigation arrow */
        padding-right: 80px;
        /* Keep it balanced on the right if needed */
    }
}

@media (max-width: 991px) {
    .hero-content {
        padding-left: 60px;
        padding-right: 60px;
    }

    .hero-slider-nav {
        padding: 0 20px;
        /* Reduce arrow spacing from edges */
    }
}

@media (max-width: 767px) {
    .hero-content {
        padding-left: 0;
        padding-right: 0;
    }

    .hero-slider-nav {
        display: none;
        /* Hide arrows on mobile to save space */
    }
}

/* --- prep.css --- */
/* =========================================
   TRIP PREPARATION SECTION
   ========================================= */

.prep-section {
    position: relative;
    padding: 40px 0;
    /* Giảm padding để ảnh to ra chiếm ~80% chiều cao */
    background-color: var(--color-white);
    overflow: hidden;
}

/* Pseudo-element tạo nền tràn 50% màn hình, full chiều cao */
.prep-section::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 0;
    width: 50%;
    background-color: #f5f4ef;
    z-index: 0;
}

.prep-grid {
    position: relative;
    z-index: 1;
    /* Nổi lên trên nền be */
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

.prep-content-box {
    --wrapper-width: min(100vw, 1920px);
    width: calc(max(20px, (var(--wrapper-width) - var(--container-width, 1440px)) / 2 + 20px) + 520px);
    padding-left: max(20px, calc((var(--wrapper-width) - var(--container-width, 1440px)) / 2 + 20px));
    padding-right: 80px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.prep-subtitle {
    color: var(--color-highlight);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 16px 0;
}

.prep-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px 0;
}

.prep-desc {
    color: var(--color-text);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 40px 0;
}

.prep-images-col {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 40px 0px;
}

.prep-image {
    flex: 1;
    min-width: 0;
    /* Phóng to bề ngang ảnh */
    aspect-ratio: 3/4;
    border-radius: 4px;
    /* Giảm độ bo góc để trông sắc nét hơn */
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.prep-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive */
@media (max-width: 1399px) {
    .prep-content-box {
        padding-right: 180px;
    }

    .prep-images-col {
        margin-left: -150px;
    }

    .prep-image {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 1199px) {
    .prep-content-box {
        padding-right: 80px;
    }

    .prep-images-col {
        margin-left: -60px;
    }

    .prep-image {
        flex: 1;
        min-width: 0;
    }
}

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

    .prep-section::before {
        width: 100%;
    }

    .prep-grid {
        flex-direction: column;
        gap: 60px;
    }

    .prep-content-box {
        width: 100%;
        padding-right: 20px;
        padding-top: 20px;
    }

    .prep-images-col {
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .prep-image {
        flex: 0 0 calc(33.333% - 20px);
        min-width: 150px;
    }
}

/* --- cta.css --- */
/* =========================================
   CALL TO ACTION (CTA) SECTION
   ========================================= */

.cta-banner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 600px;
    /* Tăng chiều cao banner lên đáng kể */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.cta-banner .container {
    width: 100%;
}

/* Lớp phủ gradient đen từ trái sang để làm nổi bật chữ trắng */
.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
}

.cta-content {
    position: relative;
    z-index: 1;
    /* Nổi lên trên lớp gradient */
    max-width: 750px;
    /* Đã nằm trong container nên không cần padding-left thủ công nữa */
    color: var(--color-white);
}

.cta-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 16px 0;
    line-height: 1.2;
}

.cta-desc {
    font-size: var(--fs-base);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0 0 32px 0;
}

/* Responsive */
@media (max-width: 767px) {
    .cta-banner {
        min-height: 400px;
    }

    .cta-title {
        font-size: 32px;
    }

    .cta-banner::before {
        /* Trên mobile phủ đen nhiều hơn để dễ đọc */
        background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 100%);
    }
}

/* --- partnership.css --- */
/* =========================================
   PARTNERSHIP SECTION
   ========================================= */

.partnership-section {
    padding: 40px 0;
    background-color: var(--color-white);
    overflow: hidden;
    /* Tránh thanh cuộn ngang nếu box tràn ra ngoài trên màn nhỏ */
}

.partnership-grid {
    display: grid;
    grid-template-columns: 4fr 6fr;
    /* Trái 4, Phải 6 theo đúng yêu cầu */
    align-items: stretch;
    /* Đổi thành stretch để cột phải vươn cao bằng cột trái */
}

.partnership-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.partnership-subtitle {
    color: var(--color-highlight);
    font-size: var(--fs-lg);
    font-weight: 700;
    margin: 0 0 10px 0;
}

.partnership-title {
    color: var(--color-primary);
    font-size: var(--fs-h2);
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.partnership-desc {
    color: var(--color-text-light);
    font-size: var(--fs-base);
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.partnership-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
    width: 100%;
}

.partnership-list li {
    display: flex;
    align-items: flex-start;
    /* Icon luôn nằm trên cùng với dòng chữ nếu rớt hàng */
    gap: 12px;
    margin-bottom: 16px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 500;
}

.partnership-list li i {
    color: var(--color-primary);
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Nút bấm */
.partnership-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.partnership-section .btn-primary:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Cột Ảnh */
.partnership-image-col {
    position: relative;
    width: 100%;
    display: flex;
}

.partnership-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    /* Căng hết chiều cao của wrapper */
    border-radius: 12px;
    overflow: hidden;
    /* Cắt xén hoàn hảo mọi thứ tràn ra ngoài (bao gồm góc nhọn của box) */
}

.partnership-image-wrapper img {
    width: 100%;
    height: 100%;
    /* Ép ảnh bằng đúng với chiều cao cột trái */
    object-fit: cover;
    border-radius: 12px;
    /* Ảnh có bo góc */
    display: block;
}

/* Các box nổi */
.partnership-section .stat-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 16px 24px;
    /* Giảm padding một chút cho vừa vặn */
    border-radius: 16px;
    border: 16px solid var(--color-white);
    /* Viền dày thêm một xíu nữa */
    color: var(--color-white);
    z-index: 2;
}

.partnership-section .stat-box.top-right {
    top: 0;
    right: 0;
    border-top-right-radius: 0;
    /* Vuông góc để bám sát viền, wrapper sẽ lo việc bo tròn */
}

.partnership-section .stat-box.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom-left-radius: 0;
    /* Vuông góc để bám sát viền, wrapper sẽ lo việc bo tròn */
}

.partnership-section .stat-box.green-box {
    background-color: #3B774B;
    /* Màu xanh lá nhạt hơn primary xíu */
}

.partnership-section .stat-box.orange-box {
    background-color: var(--color-cta);
}

.partnership-section .stat-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1;
    color: var(--color-white);
}

.partnership-section .stat-desc {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 991px) {
    .partnership-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .partnership-section .stat-box {
        padding: 16px 20px;
        border-width: 8px;
    }

    .partnership-section .stat-box.top-right {
        top: 0;
        right: 0;
    }

    .partnership-section .stat-box.bottom-left {
        bottom: 0;
        left: 0;
    }
}

@media (max-width: 575px) {
    .partnership-image-wrapper img {
        aspect-ratio: 1/1;
    }

    .partnership-section .stat-title {
        font-size: 20px;
    }

    .partnership-section .stat-desc {
        font-size: 12px;
    }
}

/* --- home-video.css --- */
/* Home Video Section */
:root {
    --color-video-bg: #33583E;
}

.home-video-section {
    position: relative;
    /* margin-top: 40px; Optional */
}

.home-video-top {
    /* 50% white, 50% green */
    background: linear-gradient(to bottom, var(--color-white) 50%, var(--color-video-bg) 50%);
    padding: 40px 0;
    /* Reduced padding to decrease section height */
}

.home-video-box {
    width: 100%;
    aspect-ratio: 21/9;
    background-color: #7A7F82;
    /* Grey color from the screenshot */
    border-radius: 6px;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.video-play-btn i {
    font-size: 28px;
    color: var(--color-black);
    margin-left: 4px;
    /* Adjust slightly for visual centering */
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.home-video-bottom {
    background-color: var(--color-video-bg);
    padding-bottom: 40px;
}

.home-video-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.home-video-title {
    color: var(--color-white);
    font-size: 40px;
    font-weight: 700;
    margin: 0;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.btn-read-more i {
    font-size: 18px;
}

.btn-read-more:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.home-video-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
    .home-video-top {
        padding: 40px 0;
    }

    .home-video-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    .home-video-box {
        aspect-ratio: 16/9;
    }

    .home-video-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-bottom: 30px;
    }

    .home-video-bottom {
        padding-bottom: 40px;
    }
}

/* --- footer.css --- */
/* =========================================
   FOOTER GALLERY SECTION
   ========================================= */

.footer-gallery-section {
    background-color: #111111;
    /* Nền màu be nhạt */
    padding: 40px 0;
    overflow: hidden;
    width: 100%;
}

.footer-gallery-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollGallery 25s linear infinite;
}

.footer-gallery-track:hover {
    animation-play-state: paused;
}

.footer-gallery-item {
    width: 280px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.footer-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes scrollGallery {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 10px));
    }

    /* 10px là 1 nửa gap */
}

/* =========================================
   FOOTER SECTION
   ========================================= */

.site-footer {
    background-color: #111111;
    color: var(--color-white);
    padding: 80px 0 40px;
    font-size: 14px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr 0.8fr;
    /* Chia 5 cột với tỷ lệ phù hợp nội dung */
    gap: 40px;
    margin-bottom: 80px;
}

.footer-logo {
    display: inline-block;
}

.footer-logo img {
    max-width: 120px;
    height: auto;
    display: block;
}

.footer-address {
    color: #a0a0a0;
    line-height: 1.8;
    margin: 0;
    max-width: 280px;
}

.footer-heading {
    color: var(--color-white);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 24px 0;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 16px;
}

.footer-links a {
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-cta);
}

.footer-socials {
    display: flex;
    gap: 20px;
}

.footer-socials a {
    color: var(--color-white);
    font-size: 20px;
    transition: color 0.3s ease;
}

.footer-socials a:hover {
    color: var(--color-cta);
}

.footer-bottom {
    text-align: center;
    color: #a0a0a0;
}

.footer-bottom p {
    margin: 0;
}

/* Newsletter Section */
.footer-newsletter {
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.footer-newsletter-text p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.footer-newsletter-form {
    flex: 0 0 450px;
    max-width: 100%;
}

.footer-newsletter-form h4 {
    color: #111;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.newsletter-form {
    position: relative;
    width: 100%;
}

.newsletter-form input {
    width: 100%;
    padding: 16px 60px 16px 24px;
    border: none;
    border-radius: 30px;
    background-color: #F8F9FA;
    color: #333;
    font-size: 15px;
    outline: none;
}

.newsletter-form button {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    width: 38px;
    height: 38px;
    border: none;
    background-color: var(--color-cta);
    /* Orange */
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.newsletter-form button:hover {
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px 40px;
    }

    .footer-grid>div:first-child {
        grid-column: span 3;
    }
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid>div:first-child {
        grid-column: span 1;
    }

    .footer-newsletter {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
        text-align: center;
    }

    .footer-newsletter-form {
        width: 100%;
        flex: unset;
    }
}

/* Scroll to Top Button */
.scroll-to-top-btn {
    position: fixed;
    bottom: -60px;
    /* Hidden initially below the viewport */
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color-cta, #DED931);
    color: #111;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: bottom 0.4s ease, opacity 0.4s ease, background-color 0.3s;
    opacity: 0;
    pointer-events: none;
}

.scroll-to-top-btn.visible {
    bottom: 30px;
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-top-btn:hover {
    background-color: #c7c22a;
}

/* --- page-hero.css --- */
/* =========================================
   PAGE HERO SECTION (About, Contact, etc.)
   ========================================= */

.page-hero {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    height: 450px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* Lớp phủ đen nhẹ cho dễ đọc chữ */
    z-index: 1;
}

.page-hero-container {
    position: relative;
    z-index: 2;
    color: var(--color-white);
}

.page-hero-title {
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--color-white);
    line-height: 1.2;
}

.page-breadcrumbs {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.page-breadcrumbs a {
    color: var(--color-white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.page-breadcrumbs a:hover {
    opacity: 0.8;
}

.page-breadcrumbs .separator {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.page-breadcrumbs .current {
    color: var(--color-white);
}

/* Responsive */
@media (max-width: 767px) {
    .page-hero {
        height: 350px;
    }

    .page-hero-title {
        font-size: 40px;
    }

    .page-breadcrumbs {
        font-size: 14px;
    }
}

/* --- search-results.css --- */
/* ===================================================
   SEARCH RESULTS & FILTER SECTION
   =================================================== */

.search-results-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.search-results-container {
    display: flex;
    gap: 48px;
    align-items: flex-start;
}

/* ===================================================
   CỘT TRÁI: SIDEBAR FILTER
   =================================================== */

.search-filter-sidebar {
    flex: 0 0 280px;
    width: 280px;
}

.filter-main-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 24px 0;
}

.filter-group {
    border-bottom: 1px solid #eef2f6;
    padding: 20px 0;
}

.filter-group:first-of-type {
    padding-top: 0;
}

.filter-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 16px;
}

.filter-group-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.filter-toggle-icon {
    font-size: 11px;
    color: var(--color-text-lighter);
}

/* Checkbox option list */
.filter-options-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-options-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
}

.filter-checkbox-label input {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.option-count {
    font-size: 13px;
    color: var(--color-text-lighter);
}

.filter-show-more {
    display: inline-block;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

/* Range Sliders */
.filter-range-wrapper {
    padding: 10px 4px 6px 4px;
}

.filter-range-track {
    position: relative;
    height: 5px;
    background-color: var(--color-primary);
    border-radius: 4px;
    margin-bottom: 16px;
}

.filter-range-progress {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary);
}

.range-thumb {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-color: var(--color-white);
    border: 2.5px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
}

.thumb-left {
    left: 0;
}

.thumb-right {
    right: 0;
}

.range-values {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
}

/* ===================================================
   CỘT PHẢI: SEARCH TOOLBAR + TOURS LIST
   =================================================== */

.search-results-main {
    flex: 1;
    min-width: 0;
}

/* Toolbar phía trên */
.search-top-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.search-input-box {
    position: relative;
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
}

.search-input-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}

.search-input-box input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 40px;
    background-color: var(--color-white);
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    font-size: 14px;
    color: var(--color-text-dark);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.search-input-box input:focus {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(38, 90, 61, 0.1);
}

.search-actions-box {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-sort-select {
    display: flex;
    align-items: center;
}

.search-sort-select select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    height: 42px;
    padding: 0 36px 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    outline: none;
    box-sizing: border-box;
}

.view-switch-btns {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 4px;
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 8px;
    box-sizing: border-box;
}

.view-btn {
    border: none;
    background: transparent;
    height: 100%;
    width: 34px;
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.view-btn:hover {
    color: var(--color-text-dark);
}

.view-btn.active {
    background-color: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ===================================================
   TOURS GRID & LIST MODES
   =================================================== */

/* DẠNG GRID (Tối đa 2 cột) */
.search-tours-container.view-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.search-tour-card {
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f5f9;
}

.search-tour-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

.search-tour-card .tour-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.search-tour-card .tour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.search-tour-card:hover .tour-image img {
    transform: scale(1.04);
}

.search-tour-card .tour-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: var(--color-cta);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

.search-tour-card .tour-content {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.search-tour-card .tour-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.search-tour-card .tour-meta {
    margin-bottom: 16px;
}

.search-tour-card .tour-location {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-tour-card .tour-details {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.search-tour-card .tour-details span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-tour-card .tour-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin-bottom: 16px;
}

.search-tour-card .tour-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.search-tour-card .price-old {
    display: block;
    font-size: 11px;
    color: var(--color-text-lighter);
    text-decoration: line-through;
}

.search-tour-card .price-current {
    font-size: 20px;
    color: var(--color-cta);
    line-height: 1;
}

.search-tour-card .price-unit {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: normal;
}

.search-tour-card .btn-outline-primary {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #fed7aa;
    color: var(--color-cta);
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-tour-card .btn-outline-primary:hover {
    background-color: var(--color-cta);
    color: var(--color-white);
    border-color: var(--color-cta);
}

/* DẠNG LIST (1 Box ngang dài, chiều cao giữ nguyên không tăng) */
.search-tours-container.view-mode-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.search-tours-container.view-mode-list .search-tour-card {
    flex-direction: row;
    align-items: stretch;
    height: 210px;
    /* Cố định chiều cao, chỉ tăng width theo chiều ngang */
}

.search-tours-container.view-mode-list .search-tour-card .tour-image {
    width: 280px;
    height: 100%;
    aspect-ratio: auto;
    flex-shrink: 0;
}

.search-tours-container.view-mode-list .search-tour-card .tour-content {
    padding: 18px 24px;
    justify-content: space-between;
}

.search-tours-container.view-mode-list .search-tour-card .tour-meta {
    margin-bottom: 8px;
}

.search-tours-container.view-mode-list .search-tour-card .tour-divider {
    margin-bottom: 12px;
}

/* Pagination Styling */
.search-load-more-wrap {
    text-align: center;
    margin-top: 50px;
}

.search-load-more-wrap .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    margin: 0 4px;
    border-radius: 6px;
    background-color: var(--color-white);
    border: 1px solid #eee;
    color: var(--color-heading);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.search-load-more-wrap .page-numbers:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
}

.search-load-more-wrap .page-numbers.current {
    background-color: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-white);
}

.search-load-more-wrap .page-numbers.dots {
    border: none;
    background: transparent;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
    cursor: pointer;
}

.btn-load-more:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

.filter-options-list.is-expanded {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

.filter-options-list.is-expanded::-webkit-scrollbar {
    width: 4px;
}

.filter-options-list.is-expanded::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 991px) {
    .search-results-container {
        flex-direction: column;
    }

    .search-filter-sidebar {
        width: 100%;
        flex: 100%;
    }

    .search-tours-container.view-mode-list .search-tour-card {
        flex-direction: column;
    }

    .search-tours-container.view-mode-list .search-tour-card .tour-image {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 640px) {
    .search-tours-container.view-mode-grid {
        grid-template-columns: 1fr;
    }

    .search-top-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-actions-box {
        justify-content: space-between;
    }
}

/* --- contact-details.css --- */
/* ===================================================
   CONTACT US - DETAILS & FORM SECTION
   =================================================== */

.contact-details-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.contact-details-container {
    display: flex;
    gap: 70px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================================
   CỘT TRÁI: THÔNG TIN LIÊN HỆ & ĐỘI NGŨ
   =================================================== */

.contact-info-col {
    flex: 1;
}

.contact-subtitle {
    display: inline-block;
    color: var(--color-cta);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.contact-title {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 18px 0;
}

.contact-desc {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 24px 0;
    max-width: 480px;
}

/* Đường phân cách nhạt giữa 3 phần */
.contact-divider {
    height: 1px;
    background-color: #f1f5f9;
    margin: 28px 0;
}

/* Phần 1: Team Avatars */
.contact-team-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.team-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.team-avatars {
    display: flex;
    align-items: center;
}

.avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    object-fit: cover;
    margin-right: -10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Phần 2: Channels Grid 2x2 */
.contact-channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
    margin-bottom: 20px;
}

.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.channel-icon-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fef0eb;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.channel-label {
    font-size: 12px;
    color: var(--color-text-lighter);
    margin-bottom: 2px;
}

.channel-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
    text-decoration: none;
    line-height: 1.3;
}

.channel-val.chat-link {
    color: var(--color-text-dark);
    font-size: 15px;
}

.channel-val:hover {
    color: var(--color-cta);
}

.contact-policy-link {
    margin-top: 10px;
}

.contact-policy-link a {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: underline;
}

.contact-policy-link a:hover {
    color: var(--color-cta);
}

/* Phần 3: Social Follow */
.contact-social-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.social-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.social-icons-list {
    display: flex;
    gap: 12px;
}

.social-circle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-dark);
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: var(--color-white);
}

.social-circle-btn:hover {
    border-color: var(--color-cta);
    color: var(--color-cta);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* ===================================================
   CỘT PHẢI: FORM LIÊN HỆ
   =================================================== */

.contact-form-col {
    flex: 1;
}

.contact-message-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.contact-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-field-group label {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
}

.contact-field-group label .required {
    color: var(--color-cta);
}

.contact-field-group input,
.contact-field-group textarea {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-text-dark);
    background-color: var(--color-white);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field-group input:focus,
.contact-field-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(38, 90, 61, 0.1);
}

.contact-field-group input::placeholder,
.contact-field-group textarea::placeholder {
    color: var(--color-text-lighter);
    font-size: 13.5px;
}

.contact-field-group textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-submit-wrap {
    margin-top: 6px;
}

.contact-submit-btn {
    width: 100%;
    background-color: var(--color-cta);
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-submit-btn:hover {
    background-color: var(--color-cta-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(227, 90, 36, 0.25);
}

/* Responsive */
@media (max-width: 991px) {
    .contact-details-container {
        flex-direction: column;
        gap: 60px;
    }

    .contact-info-col,
    .contact-form-col {
        width: 100%;
    }

    .contact-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .contact-channels-grid {
        grid-template-columns: 1fr;
    }
}

/* --- video-gallery.css --- */
/* ===================================================
   VIDEO - GALLERY & BOTTOM CTA BAR SECTION
   =================================================== */

.video-gallery-section {
    padding-top: 40px;
    padding-bottom: 40px;
    /* Đệm dưới đáy không dính footer */
    background-color: var(--color-white);
}

.video-gallery-container {
    max-width: 1200px;
    margin: 0 auto 70px auto !important;
    /* Tách biệt rõ ràng với thanh xanh bên dưới */
    padding: 0 20px;
}

/* Lưới 4 box video lớn (2 hàng x 2 cột) */
.video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 32px;
}

.video-card {
    background: var(--color-white);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.video-thumbnail-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-black);
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.video-card:hover .video-thumb {
    transform: scale(1.03);
    opacity: 0.9;
}

/* Nút Play video hình tròn */
.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--color-cta);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.video-play-btn svg {
    margin-left: 3px;
}

.video-card:hover .video-play-btn {
    background-color: var(--color-cta);
    color: var(--color-white);
    transform: translate(-50%, -50%) scale(1.1);
}

/* ===================================================
   THANH NGANG LỚN MÀU XANH RÊU (CTA BAR)
   =================================================== */

.video-cta-bar {
    width: 100%;
    background-color: var(--color-primary);
    /* Màu xanh lá cây đậm sang trọng theo ảnh */
    padding: 48px 45px;
    /* Tăng chiều cao thanh ngang lên rộng rãi hơn */
    border-radius: 0;
    /* Không bo góc theo yêu cầu */
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(56, 112, 76, 0.12);
    margin-top: 70px !important;
    /* Cách 4 video trên 70px */
}

.video-cta-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.video-cta-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0;
    text-transform: uppercase;
}

.video-cta-btn {
    background-color: var(--color-white);
    color: var(--color-text-dark);
    padding: 9px 22px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.video-cta-btn:hover {
    background-color: #f1f5f9;
    color: var(--color-cta);
    transform: translateX(3px);
}

/* Đường line giữa nhạt */
.video-cta-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Line trắng nhạt */
}

/* Responsive */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .video-cta-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .video-cta-title {
        font-size: 16px;
    }
}

/* --- banner-contact-cta.css --- */
/* ===================================================
   BANNER CONTACT CTA SECTION
   =================================================== */

.banner-contact-cta-section {
    position: relative;
    width: 100%;
    min-height: 480px;
    background-image: url('https://images.unsplash.com/photo-1552832230-c0197dd311b5?q=80&w=1600&auto=format&fit=crop');
    background-size: cover;
    background-position: center 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner-contact-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    /* Lớp phủ đen làm nổi bật text trắng */
    z-index: 1;
}

.banner-contact-cta-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.banner-contact-cta-title {
    color: var(--color-white);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 28px 0;
    letter-spacing: -0.5px;
}

.banner-contact-cta-btn-wrap {
    display: flex;
    justify-content: center;
}

.banner-contact-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background-color: var(--color-cta);
    color: var(--color-white);
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 8px;
}

.banner-contact-cta-btn:hover {
    background-color: var(--color-cta-hover);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .banner-contact-cta-section {
        min-height: 380px;
    }

    .banner-contact-cta-title {
        font-size: 32px;
    }
}

/* --- founder-detail.css --- */
/* ===================================================
   FOUNDER DETAIL SECTION
   =================================================== */

.founder-detail-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.founder-detail-container {
    display: flex;
    gap: 70px;
    align-items: stretch;
    /* Co giãn 2 cột bằng chiều cao của nhau */
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===================================================
   CỘT TRÁI: ẢNH BO GÓC LỚN
   =================================================== */

.founder-photo-col {
    flex: 0 0 380px;
    width: 380px;
    display: flex;
}

.founder-photo-wrapper {
    width: 100%;
    height: 100%;
    /* Chiều cao scale 100% theo nội dung bên phải */
    min-height: 420px;
    border-radius: 20px;
    /* Bo góc mềm mại như ảnh */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
}

.founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===================================================
   CỘT PHẢI: THÔNG TIN CHI TIẾT
   =================================================== */

.founder-info-col {
    flex: 1;
    min-width: 0;
}

.founder-role-tag {
    display: inline-block;
    color: var(--color-text-lighter);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.founder-name {
    color: var(--color-primary);
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
}

.founder-bio {
    color: var(--color-text-muted);
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 36px 0;
    max-width: 620px;
}

/* More details header */
.details-heading {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

/* Details Table */
.details-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 36px;
}

.detail-row {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.detail-label {
    width: 120px;
    color: var(--color-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

.detail-val {
    color: var(--color-text-dark);
    font-weight: 600;
}

.detail-val a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.detail-val a:hover {
    color: var(--color-cta);
}

/* Thanh liên hệ chân với đường kẻ nhạt phía trên */
.founder-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 24px;
    margin-top: 20px;
}

.founder-contact-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.founder-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.founder-contact-link:hover {
    color: var(--color-cta);
}

.founder-social-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-text-link {
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.2s ease;
}

.social-text-link:hover {
    color: var(--color-cta);
}

/* Responsive */
@media (max-width: 991px) {
    .founder-detail-container {
        flex-direction: column;
        gap: 40px;
    }

    .founder-photo-col {
        width: 100%;
        max-width: 320px;
    }

    .founder-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* --- essentials.css --- */
.essentials-content-section {
    padding: 40px 0;
    background-color: var(--color-white);
}

.essentials-layout {
    display: flex;
    gap: 60px;
}

/* Sidebar */
.essentials-sidebar {
    width: 350px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    /* Adjust this value if you have a fixed header */
    align-self: flex-start;
}

.essentials-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.tab-item {
    margin-bottom: 5px;
}

.tab-item a {
    display: flex;
    align-items: flex-start;
    padding: 15px 20px;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 0 12px 12px 0;
    border-left: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.tab-item:hover a {
    background-color: #f9f9f9;
}

.tab-item.active a {
    background-color: var(--color-bg-beige);
    /* Light warm beige */
    border-left-color: var(--color-primary);
}

.tab-icon {
    font-size: 20px;
    margin-right: 15px;
    color: var(--color-text-light);
    margin-top: 2px;
}

.tab-item.active .tab-icon {
    color: var(--color-primary);
}

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

.tab-num {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 2px;
    font-weight: 500;
}

.tab-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.4;
    white-space: nowrap;
}

.essentials-sidebar-desc {
    padding-top: 30px;
    border-top: 1px dashed #e0e0e0;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Main Content */
.essentials-main {
    flex: 1;
    position: relative;
}

.essentials-intro {
    max-width: 800px;
}

.essentials-intro .section-subtitle {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.essentials-intro .section-subtitle .dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.essentials-intro .section-title {
    font-size: 48px;
    line-height: 1.2;
    color: #111;
    margin-bottom: 30px;
    font-weight: 700;
}

.highlight-italic {
    font-style: italic;
    color: var(--color-cta);
    font-family: serif;
    /* Gives it that elegant editorial look */
}

.essentials-intro .section-desc {
    font-size: 18px;
    color: var(--color-text);
    line-height: 1.7;
    margin-bottom: 50px;
    max-width: 700px;
}

.intro-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 40px;
    border-top: 1px dashed #e0e0e0;
}

.pill-item {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    background-color: var(--color-white);
}

.pill-item i {
    font-size: 18px;
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 991px) {
    .essentials-layout {
        flex-direction: column;
    }

    .essentials-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }

    .essentials-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    .tab-item {
        flex: 0 0 auto;
        margin-bottom: 0;
        margin-right: 10px;
        min-width: 280px;
        /* Force tab items to be wide enough so content fits on one line */
    }

    .tab-item a {
        border-radius: 8px;
        border-left: none;
        border-bottom: 2px solid transparent;
    }

    .tab-item.active a {
        border-bottom-color: var(--color-primary);
        border-left-color: transparent;
    }

    .essentials-intro .section-title {
        font-size: 36px;
    }
}

/* Chapter Block */
.chapter-block {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #e0e0e0;
}

.chapter-header-wrap {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
}

.chapter-icon-wrap {
    background-color: var(--color-bg-beige);
    /* Light orange bg */
    color: var(--color-cta);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 20px;
    flex-shrink: 0;
}

.chapter-header-main {
    flex: 1;
}

.chapter-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.chapter-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-cta);
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.chapter-title {
    font-size: 32px;
    font-family: serif;
    font-weight: 700;
    color: var(--color-text);
    /* Ensure it uses text var if needed, or leave #111 */
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .chapter-title {
        font-size: 22px;
    }
}

.btn-collapse-all {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-collapse-all:hover {
    background-color: #f9f9f9;
    color: var(--color-text);
}

.chapter-subtitle {
    font-size: 15px;
    color: var(--color-text-light);
    margin: 0;
}

/* Accordion */
.accordion-item {
    border-bottom: 1px solid #eee;
    padding: 25px 0;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.accordion-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-cta);
    margin: 0;
}

.accordion-toggle {
    font-size: 20px;
    color: var(--color-text-light);
    transition: transform 0.3s;
}

.accordion-content {
    margin-top: 20px;
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.7;
}

.accordion-item:not(.open) .accordion-content {
    display: none;
}

/* Region Grid */
.region-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}

.region-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 10px 0;
}

.region-col p {
    margin: 0;
    font-size: 14px;
}

@media (max-width: 768px) {
    .region-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Alert Box */
.essential-alert {
    display: flex;
    background-color: var(--color-bg-beige);
    /* Light warm bg */
    border-left: 3px solid var(--color-highlight);
    /* Yellow/gold border */
    border-radius: 4px;
    padding: 20px;
    margin-top: 25px;
}

.essential-alert .alert-icon {
    color: #928330;
    /* Darker yellow/gold for icon */
    font-size: 20px;
    margin-right: 15px;
    margin-top: 2px;
}

.essential-alert .alert-content {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
}

.essential-alert .alert-content strong {
    color: #333;
}

/* Table styling */
.table-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 40px 0 15px 0;
}

.table-responsive {
    overflow-x: auto;
    border: 1px solid #eee;
    border-radius: 6px;
    border-bottom: none;
    /* Let the last row handle it or just keep it */
}

.essential-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.essential-table th {
    background-color: var(--color-bg-beige);
    color: #111;
    font-weight: 700;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

.essential-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    color: var(--color-text);
}

.essential-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-beige);
}

.table-note {
    font-size: 12px;
    color: var(--color-text-light);
    margin-top: 15px;
}

/* Sub Headings */
.sub-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-heading);
    margin: 30px 0 15px 0;
}

/* Checklist */
.essential-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.essential-checklist li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
}

.essential-checklist li i {
    color: #d0d0d0;
    /* Light gray outline checkbox */
    font-size: 18px;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Chapter Themes */
/* Theme Green */
.chapter-theme-green .chapter-icon-wrap {
    background-color: #ebf1eb;
    /* Light green */
    color: var(--color-primary);
}

.chapter-theme-green .chapter-label {
    color: var(--color-primary);
}

.chapter-theme-green .accordion-title {
    color: var(--color-primary);
}

/* Tipping List */
.tipping-list {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.tipping-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.6;
}

.tipping-list i {
    color: #d0d0d0;
    font-size: 18px;
    margin-right: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.tipping-content {
    display: flex;
    flex-direction: column;
}

.tipping-label {
    font-weight: 700;
    color: #333;
    margin-bottom: 3px;
}

@media (min-width: 768px) {
    .tipping-content {
        flex-direction: row;
        width: 100%;
    }

    .tipping-label {
        width: 140px;
        flex-shrink: 0;
        margin-bottom: 0;
        margin-right: 10px;
    }
}

/* Essentials CTA Section */
.essentials-cta-section {
    background-color: var(--color-bg-beige);
    /* Light beige */
    padding: 40px 0;
}

.essentials-cta-box {
    background-color: #24221f;
    /* Dark brownish black */
    border-radius: 12px;
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.essentials-cta-title {
    color: var(--color-white);
    font-size: 24px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px;
}

.essentials-cta-desc {
    color: #a0a0a0;
    font-size: 15px;
    margin: 0;
}

.essentials-cta-btn .btn-primary {
    box-shadow: 0 4px 20px rgba(232, 92, 51, 0.25);
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

.essentials-cta-btn .btn-primary i {
    margin-left: 8px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .essentials-cta-box {
        flex-direction: column;
        text-align: center;
        padding: 35px 25px;
    }

    .essentials-cta-text {
        margin-bottom: 25px;
    }
}





/* */
@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Switzer';
    src: url('./assets/fonts/Switzer-VariableItalic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --color-primary: #3B774B;
    /* Dark green */
    --color-text: #2c3e50;
    --color-text-light: #6c757d;
    --color-cta: #EB5F29;
    /* Orange */
    --color-cta-hover: #cb4c19;
    --color-bg-beige: #F0EDE5;
    /* Beige */
    --color-highlight: #DED931;
    /* Yellow */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-text-dark: #1e293b;
    --color-text-muted: #64748b;
    --color-text-lighter: #94a3b8;
    --border-color: #e5e7eb;
    /* Đường line nhạt */
    --font-primary: 'Switzer', sans-serif;

    /* Font Sizes */
    --fs-h1: 48px;
    --fs-h2: 44px;
    --fs-h3: 32px;
    --fs-xl: 22px;
    --fs-lg: 20px;
    --fs-base: 16px;
    --fs-menu: 18px;
    --fs-btn: 15px;
    --fs-sm: 14px;
    --fs-xs: 12px;

    --container-width: 1440px;
}

@media (max-width: 991px) {
    :root {
        --fs-h1: 40px;
        --fs-h2: 36px;
        --fs-h3: 28px;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 34px;
        --fs-h2: 30px;
        --fs-h3: 24px;
    }
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   Destinations Section
   ========================================== */
.destinations-section {
    padding: 40px 0;
    text-align: center;
}

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

.destinations-subtitle {
    color: var(--color-highlight);
    /* Yellow */
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.destinations-title {
    color: var(--color-primary);
    /* Dark green */
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
}

.destinations-carousel {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.dest-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    color: var(--color-text);
    transition: all 0.3s ease;
}

.dest-slider-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.dest-slider-btn.prev-btn {
    left: 16px;
}

.dest-slider-btn.next-btn {
    right: 16px;
}

.destinations-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    padding-bottom: 10px;
}

.destinations-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.destination-card {
    flex: 0 0 calc(25% - 15px);
    min-width: 250px;
    scroll-snap-align: start;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 1 / 1;
}

.destination-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.destinations-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.destinations-pagination .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: transparent;
    cursor: pointer;
}

.destinations-pagination .dot.active {
    background-color: var(--color-cta);
    /* Orange/Red */
    border-color: var(--color-cta);
}

.destinations-action {
    margin-top: 30px;
}

.btn-view-more {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid var(--color-cta);
    color: var(--color-cta);
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-view-more:hover {
    background-color: var(--color-cta);
    color: #fff;
}

@media (max-width: 992px) {
    .destination-card {
        flex: 0 0 calc(33.333% - 14px);
    }
}

@media (max-width: 768px) {
    .destination-card {
        flex: 0 0 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .destination-card {
        flex: 0 0 100%;
    }
}

/* Utility Classes added during Refactoring */
.mt-20 {
    margin-top: 20px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mb-25 {
    margin-bottom: 25px !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.color-cta {
    color: var(--color-cta) !important;
}

.color-primary {
    color: var(--color-primary) !important;
}

.color-text {
    color: var(--color-text) !important;
}

.hidden-chapter {
    display: none;
}

.alert-primary {
    border-left-color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 25px;
}

/* Hero Slider Background Image Fix */
.hero-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-bg-slide.active {
    opacity: 1;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tour Wrapper Fixes */
.active-dest-wrapper {
    display: block !important;
}

.hidden-dest-wrapper {
    display: none !important;
}

/* Tour Card Fixes */
.tour-title a,
.sd-tour-title a {
    color: inherit;
    text-decoration: none;
}

.tour-title a:hover,
.sd-tour-title a:hover {
    color: var(--color-primary);
}

.overview-map-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Blog Pagination Fix */
.pagination-wrap-centered {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.no-articles-msg {
    text-align: center;
    width: 100%;
    grid-column: 1 / -1;
}

/* cta banner fix */
.cta-banner {
    position: relative;
}

.cta-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

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

/* Search filter form fix */
.search-filter-form {
    display: contents;
}

.hidden-item {
    display: none !important;
}

.apply-filters-btn {
    width: 100%;
    margin-top: 20px;
}

.search-submit-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #666;
}

.search-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-sort-select {
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    cursor: pointer;
    color: #555;
}

.search-no-results {
    width: 100%;
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
}

/* Home video fix */
.home-video-box {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.home-video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.inline-flex-btn {
    display: inline-flex !important;
}

/* =========================================
   MOBILE FIXES (Added via Request)
   ========================================= */
@media (max-width: 768px) {

    /* 1. Add breathing room to container */
    .container,
    .container-fluid {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* 2. Scale down massive titles */
    .hero-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    .destinations-title,
    .tours-title,
    .custom-tours-title,
    .about-title,
    .prep-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    /* 3. Stop carousels from bleeding to the exact screen edge */
    .tours-carousel,
    .destinations-carousel,
    .custom-tours-slider {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* 4. Pull in the background so it doesn't touch the edges */
    .custom-tours-bg {
        left: 10px !important;
        right: 10px !important;
        border-radius: 16px !important;
    }

    .custom-tours-slider {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Reduce search placeholder text on mobile */
    .search-input {
        font-size: 14px !important;
    }

    .search-input::placeholder {
        font-size: 14px !important;
    }

    /* Ensure hero content doesn't crash into slider buttons on mobile */
    .hero-content {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

/* =========================================
   HIDE BROWSER SCROLLBAR
   ========================================= */
/* Ẩn thanh cuộn cho Chrome, Safari và Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
}

/* Ẩn thanh cuộn cho Firefox, IE và Edge */
html,
body {
    -ms-overflow-style: none !important;
    /* IE và Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

/* =========================================
   FIX HERO CONTENT OVERLAPPING BUTTONS
   ========================================= */
@media (max-width: 1650px) {
    .hero-slider-nav {
        padding: 0 20px !important;
    }
}

@media (max-width: 768px) {
    .hero-slider-nav {
        padding: 0 10px !important;
    }

    .hero-content {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .hero-nav-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* WooCommerce Custom Styles for Greenrice Theme */

/* General Form Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.woocommerce form .form-row label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Checkout Page Layout */
.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.woocommerce-checkout #customer_details {
    flex: 1 1 50%;
    min-width: 320px;
}

.woocommerce-checkout #order_review_heading {
    display: none;
    /* Hide since it's obvious */
}

.woocommerce-checkout #order_review {
    flex: 1 1 40%;
    min-width: 320px;
    background: var(--color-bg-beige, #F0EDE5);
    padding: 40px;
    border-radius: 12px;
}

/* Order Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    font-weight: 700;
    color: #222;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary, #3B774B);
}

/* Cart Item Meta / Variation Info */
.woocommerce dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 5px;
    font-size: 0.9em;
    color: #555;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 15px;
    /* Add margin so it doesn't touch the next column */
}

.woocommerce dl.variation dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.woocommerce dl.variation dd {
    margin: 0;
}

.woocommerce dl.variation p {
    margin: 0;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 15px;
}

.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
    /* Hide default arrow */
}

.woocommerce-checkout #payment .place-order {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
    flex: 1 1 50%;
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
    background: var(--color-cta, #EB5F29);
    color: #fff;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover, #cb4c19);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #fff;
    border-top: 3px solid var(--color-primary);
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 20px;
    top: 20px;
}

.woocommerce-error {
    border-top-color: #dc3545;
}

.woocommerce-error li {
    color: #dc3545;
}

/* ── Checkout Page Enhancements ── */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 24px;
    color: #222;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

/* ── Order Received (Thank You) Page ── */
.woocommerce-order {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.woocommerce-thankyou-order-received {
    font-size: 1.6em;
    color: var(--color-primary, #3B774B);
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(59, 119, 75, 0.08);
    border-radius: 12px;
    font-weight: 600;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce-order-overview li {
    flex: 1 1 auto;
    border-right: 1px solid #eee;
    padding: 25px 35px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.25rem;
    color: #222;
    text-transform: none;
    margin-top: 8px;
    font-weight: 700;
}

.woocommerce-order-details {
    margin-bottom: 40px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--customer-details th,
.woocommerce-table--customer-details td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #444;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--customer-details thead th {
    background: #f9f9f9;
    font-weight: 600;
    color: #222;
    border-top: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    border-top: 2px solid #eee;
    font-weight: 600;
    background: #fdfdfd;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.2em;
    color: var(--color-primary, #3B774B);
}

.woocommerce-customer-details address {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    font-style: normal;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
    color: #333;
    font-size: 1.2rem;
    margin: 20px 0 15px;
}

.wc-bacs-bank-details {
    background: #f0f8ff;
    border-left: 4px solid #4a90e2;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    list-style: none;
}

.wc-bacs-bank-details li {
    margin-bottom: 10px;
    color: #444;
}

.wc-bacs-bank-details li strong {
    color: #222;
}

/* WooCommerce Custom Styles for Greenrice Theme */

/* General Form Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.woocommerce form .form-row label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Checkout Page Layout */
.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.woocommerce-checkout #customer_details {
    flex: 1 1 50%;
    min-width: 320px;
}

.woocommerce-checkout #order_review_heading {
    display: none;
    /* Hide since it's obvious */
}

.woocommerce-checkout #order_review {
    flex: 1 1 40%;
    min-width: 320px;
    background: var(--color-bg-beige, #F0EDE5);
    padding: 40px;
    border-radius: 12px;
}

/* Order Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    font-weight: 700;
    color: #222;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary, #3B774B);
}

/* Cart Item Meta / Variation Info */
.woocommerce dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 5px;
    font-size: 0.9em;
    color: #555;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 15px;
    /* Add margin so it doesn't touch the next column */
}

.woocommerce dl.variation dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.woocommerce dl.variation dd {
    margin: 0;
}

.woocommerce dl.variation p {
    margin: 0;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 15px;
}

.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
    /* Hide default arrow */
}

.woocommerce-checkout #payment .place-order {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
    flex: 1 1 50%;
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
    background: var(--color-cta, #EB5F29);
    color: #fff;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover, #cb4c19);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #fff;
    border-top: 3px solid var(--color-primary);
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 20px;
    top: 20px;
}

.woocommerce-error {
    border-top-color: #dc3545;
}

.woocommerce-error li {
    color: #dc3545;
}

/* ── Checkout Page Enhancements ── */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 24px;
    color: #222;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

/* ── Order Received (Thank You) Page ── */
.woocommerce-order {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.woocommerce-thankyou-order-received {
    font-size: 1.6em;
    color: var(--color-primary, #3B774B);
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(59, 119, 75, 0.08);
    border-radius: 12px;
    font-weight: 600;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce-order-overview li {
    flex: 1 1 auto;
    border-right: 1px solid #eee;
    padding: 25px 35px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.25rem;
    color: #222;
    text-transform: none;
    margin-top: 8px;
    font-weight: 700;
}

.woocommerce-order-details {
    margin-bottom: 40px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--customer-details th,
.woocommerce-table--customer-details td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #444;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--customer-details thead th {
    background: #f9f9f9;
    font-weight: 600;
    color: #222;
    border-top: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    border-top: 2px solid #eee;
    font-weight: 600;
    background: #fdfdfd;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.2em;
    color: var(--color-primary, #3B774B);
}

.woocommerce-customer-details address {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    font-style: normal;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
    color: #333;
    font-size: 1.2rem;
    margin: 20px 0 15px;
}

.wc-bacs-bank-details {
    background: #f0f8ff;
    border-left: 4px solid #4a90e2;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    list-style: none;
}

.wc-bacs-bank-details li {
    margin-bottom: 10px;
    color: #444;
}

.wc-bacs-bank-details li strong {
    color: #222;
}

/* WooCommerce Custom Styles for Greenrice Theme */

/* General Form Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.woocommerce form .form-row label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Checkout Page Layout */
.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.woocommerce-checkout #customer_details {
    flex: 1 1 50%;
    min-width: 320px;
}

.woocommerce-checkout #order_review_heading {
    display: none;
    /* Hide since it's obvious */
}

.woocommerce-checkout #order_review {
    flex: 1 1 40%;
    min-width: 320px;
    background: var(--color-bg-beige, #F0EDE5);
    padding: 40px;
    border-radius: 12px;
}

/* Order Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    font-weight: 700;
    color: #222;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary, #3B774B);
}

/* Cart Item Meta / Variation Info */
.woocommerce dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 5px;
    font-size: 0.9em;
    color: #555;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 15px;
    /* Add margin so it doesn't touch the next column */
}

.woocommerce dl.variation dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.woocommerce dl.variation dd {
    margin: 0;
}

.woocommerce dl.variation p {
    margin: 0;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 15px;
}

.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
    /* Hide default arrow */
}

.woocommerce-checkout #payment .place-order {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
    flex: 1 1 50%;
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
    background: var(--color-cta, #EB5F29);
    color: #fff;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover, #cb4c19);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #fff;
    border-top: 3px solid var(--color-primary);
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 20px;
    top: 20px;
}

.woocommerce-error {
    border-top-color: #dc3545;
}

.woocommerce-error li {
    color: #dc3545;
}

/* ── Checkout Page Enhancements ── */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 24px;
    color: #222;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

/* ── Order Received (Thank You) Page ── */
.woocommerce-order {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.woocommerce-thankyou-order-received {
    font-size: 1.6em;
    color: var(--color-primary, #3B774B);
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(59, 119, 75, 0.08);
    border-radius: 12px;
    font-weight: 600;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce-order-overview li {
    flex: 1 1 auto;
    border-right: 1px solid #eee;
    padding: 25px 35px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.25rem;
    color: #222;
    text-transform: none;
    margin-top: 8px;
    font-weight: 700;
}

.woocommerce-order-details {
    margin-bottom: 40px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--customer-details th,
.woocommerce-table--customer-details td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #444;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--customer-details thead th {
    background: #f9f9f9;
    font-weight: 600;
    color: #222;
    border-top: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    border-top: 2px solid #eee;
    font-weight: 600;
    background: #fdfdfd;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.2em;
    color: var(--color-primary, #3B774B);
}

.woocommerce-customer-details address {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    font-style: normal;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
    color: #333;
    font-size: 1.2rem;
    margin: 20px 0 15px;
}

.wc-bacs-bank-details {
    background: #f0f8ff;
    border-left: 4px solid #4a90e2;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    list-style: none;
}

.wc-bacs-bank-details li {
    margin-bottom: 10px;
    color: #444;
}

.wc-bacs-bank-details li strong {
    color: #222;
}

/* WooCommerce Custom Styles for Greenrice Theme */

/* General Form Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.woocommerce form .form-row label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Checkout Page Layout */
.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.woocommerce-checkout #customer_details {
    flex: 1 1 50%;
    min-width: 320px;
}

.woocommerce-checkout #order_review_heading {
    display: none;
    /* Hide since it's obvious */
}

.woocommerce-checkout #order_review {
    flex: 1 1 40%;
    min-width: 320px;
    background: var(--color-bg-beige, #F0EDE5);
    padding: 40px;
    border-radius: 12px;
}

/* Order Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    font-weight: 700;
    color: #222;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary, #3B774B);
}

/* Cart Item Meta / Variation Info */
.woocommerce dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 5px;
    font-size: 0.9em;
    color: #555;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 15px;
    /* Add margin so it doesn't touch the next column */
}

.woocommerce dl.variation dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.woocommerce dl.variation dd {
    margin: 0;
}

.woocommerce dl.variation p {
    margin: 0;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 15px;
}

.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
    /* Hide default arrow */
}

.woocommerce-checkout #payment .place-order {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
    flex: 1 1 50%;
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
    background: var(--color-cta, #EB5F29);
    color: #fff;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover, #cb4c19);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #fff;
    border-top: 3px solid var(--color-primary);
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 20px;
    top: 20px;
}

.woocommerce-error {
    border-top-color: #dc3545;
}

.woocommerce-error li {
    color: #dc3545;
}

/* ── Checkout Page Enhancements ── */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 24px;
    color: #222;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

/* ── Order Received (Thank You) Page ── */
.woocommerce-order {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.woocommerce-thankyou-order-received {
    font-size: 1.6em;
    color: var(--color-primary, #3B774B);
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(59, 119, 75, 0.08);
    border-radius: 12px;
    font-weight: 600;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce-order-overview li {
    flex: 1 1 auto;
    border-right: 1px solid #eee;
    padding: 25px 35px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.25rem;
    color: #222;
    text-transform: none;
    margin-top: 8px;
    font-weight: 700;
}

.woocommerce-order-details {
    margin-bottom: 40px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--customer-details th,
.woocommerce-table--customer-details td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #444;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--customer-details thead th {
    background: #f9f9f9;
    font-weight: 600;
    color: #222;
    border-top: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    border-top: 2px solid #eee;
    font-weight: 600;
    background: #fdfdfd;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.2em;
    color: var(--color-primary, #3B774B);
}

.woocommerce-customer-details address {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    font-style: normal;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
    color: #333;
    font-size: 1.2rem;
    margin: 20px 0 15px;
}

.wc-bacs-bank-details {
    background: #f0f8ff;
    border-left: 4px solid #4a90e2;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    list-style: none;
}

.wc-bacs-bank-details li {
    margin-bottom: 10px;
    color: #444;
}

.wc-bacs-bank-details li strong {
    color: #222;
}

/* WooCommerce Custom Styles for Greenrice Theme */

/* General Form Styles */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    box-sizing: border-box;
}

.woocommerce form .form-row label {
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    color: #333;
}

/* Checkout Page Layout */
.woocommerce-checkout form.checkout {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
}

.woocommerce-checkout #customer_details {
    flex: 1 1 50%;
    min-width: 320px;
}

.woocommerce-checkout #order_review_heading {
    display: none;
    /* Hide since it's obvious */
}

.woocommerce-checkout #order_review {
    flex: 1 1 40%;
    min-width: 320px;
    background: var(--color-bg-beige, #F0EDE5);
    padding: 40px;
    border-radius: 12px;
}

/* Order Table */
.woocommerce table.shop_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 15px 10px;
    vertical-align: middle;
}

.woocommerce table.shop_table th {
    font-weight: 700;
    color: #222;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
    border-bottom: none;
    padding-top: 20px;
}

.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-primary, #3B774B);
}

/* Cart Item Meta / Variation Info */
.woocommerce dl.variation {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 10px;
    row-gap: 5px;
    font-size: 0.9em;
    color: #555;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    margin-top: 10px;
    margin-right: 15px;
    /* Add margin so it doesn't touch the next column */
}

.woocommerce dl.variation dt {
    font-weight: 600;
    color: #333;
    margin: 0;
}

.woocommerce dl.variation dd {
    margin: 0;
}

.woocommerce dl.variation p {
    margin: 0;
}

/* Payment Methods */
.woocommerce-checkout #payment {
    background: transparent;
    padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0 0 20px 0;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 15px;
}

.woocommerce-checkout #payment div.payment_box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
    /* Hide default arrow */
}

.woocommerce-checkout #payment .place-order {
    padding: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.woocommerce-checkout #payment .place-order .woocommerce-terms-and-conditions-wrapper {
    flex: 1 1 50%;
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
    background: var(--color-cta, #EB5F29);
    color: #fff;
    padding: 14px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: unset !important;
    flex: 0 0 auto;
    white-space: nowrap;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce button.button.alt:hover {
    background: var(--color-cta-hover, #cb4c19);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background: #fff;
    border-top: 3px solid var(--color-primary);
    padding: 20px 20px 20px 50px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    position: absolute;
    left: 20px;
    top: 20px;
}

.woocommerce-error {
    border-top-color: #dc3545;
}

.woocommerce-error li {
    color: #dc3545;
}

/* ── Checkout Page Enhancements ── */
.woocommerce-checkout form.checkout h3,
.woocommerce-checkout #order_review_heading {
    font-size: 24px;
    color: #222;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    margin-bottom: 30px;
}

/* ── Order Received (Thank You) Page ── */
.woocommerce-order {
    max-width: 1000px;
    margin: 50px auto;
    background: #fff;
    padding: 50px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.woocommerce-thankyou-order-received {
    font-size: 1.6em;
    color: var(--color-primary, #3B774B);
    text-align: center;
    margin-bottom: 40px;
    padding: 25px;
    background: rgba(59, 119, 75, 0.08);
    border-radius: 12px;
    font-weight: 600;
}

.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    padding: 0;
    background: #fdfdfd;
    border-radius: 12px;
    border: 1px solid #eee;
    margin-bottom: 40px;
    overflow: hidden;
}

.woocommerce-order-overview li {
    flex: 1 1 auto;
    border-right: 1px solid #eee;
    padding: 25px 35px;
    font-size: 0.9em;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    text-align: left;
}

.woocommerce-order-overview li:last-child {
    border-right: none;
}

.woocommerce-order-overview li strong {
    display: block;
    font-size: 1.25rem;
    color: #222;
    text-transform: none;
    margin-top: 8px;
    font-weight: 700;
}

.woocommerce-order-details {
    margin-bottom: 40px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    font-size: 1.7rem;
    margin-bottom: 25px;
    color: #333;
    padding-bottom: 12px;
    border-bottom: 2px solid #eaeaea;
}

.woocommerce-table--order-details,
.woocommerce-table--customer-details {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background: #fff;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td,
.woocommerce-table--customer-details th,
.woocommerce-table--customer-details td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    color: #444;
}

.woocommerce-table--order-details thead th,
.woocommerce-table--customer-details thead th {
    background: #f9f9f9;
    font-weight: 600;
    color: #222;
    border-top: 1px solid #eee;
    border-bottom: 2px solid #eee;
}

.woocommerce-table--order-details tbody tr:last-child td {
    border-bottom: none;
}

.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
    border-top: 2px solid #eee;
    font-weight: 600;
    background: #fdfdfd;
}

.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 1.2em;
    color: var(--color-primary, #3B774B);
}

.woocommerce-customer-details address {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #eee;
    font-style: normal;
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

.woocommerce-bacs-bank-details h2,
.woocommerce-bacs-bank-details h3 {
    color: #333;
    font-size: 1.2rem;
    margin: 20px 0 15px;
}

.wc-bacs-bank-details {
    background: #f0f8ff;
    border-left: 4px solid #4a90e2;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 30px;
    list-style: none;
}

.wc-bacs-bank-details li {
    margin-bottom: 10px;
    color: #444;
}

.wc-bacs-bank-details li strong {
    color: #222;
}

/* =========================================================
   Custom Booking Summary Popup
   ========================================================= */

/* Validation error toast */
#gr-booking-error {
    background: #fff3f3;
    border: 1.5px solid #e53935;
    color: #c62828;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* Field highlight on error */
.gr-field-error {
    outline: 2px solid #e53935 !important;
    border-color: #e53935 !important;
}

/* Hide static Tourfic "From" price block */
.tf-booking-price,
.tf-single-tour-pricing {
    display: none !important;
}

#gr-booking-popup {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#gr-booking-popup.active {
    opacity: 1;
    visibility: visible;
}

#gr-booking-popup-inner {
    background: #fff;
    border-radius: 16px;
    max-width: 950px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#gr-booking-popup.active #gr-booking-popup-inner {
    transform: scale(1) translateY(0);
}

#gr-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #555;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background .2s;
    z-index: 2;
}

#gr-popup-close:hover {
    background: #f0f0f0;
    color: #111;
}

#gr-popup-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

@media (max-width: 600px) {
    #gr-popup-body {
        grid-template-columns: 1fr;
    }

    #gr-popup-image {
        min-height: 220px;
    }
}

#gr-popup-image {
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    background: #f5f5f5;
}

#gr-popup-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#gr-popup-summary {
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gr-popup-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary, #4a7c59);
    margin: 0;
}

#gr-popup-tour-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin: 0;
}

#gr-popup-date {
    font-size: 14px;
    color: #555;
    margin: 0;
}

#gr-popup-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 6px;
    flex: 1;
}

#gr-popup-price-table thead th {
    text-align: left;
    font-weight: 700;
    padding: 6px 0;
    border-bottom: 2px solid #eee;
    color: #333;
}

#gr-popup-price-table thead th:last-child {
    text-align: right;
}

#gr-popup-price-table tbody td {
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #444;
}

#gr-popup-price-table tbody td:last-child,
.gr-td-right {
    text-align: right !important;
}

.gr-td-indent {
    color: #888;
    font-size: 13px;
    padding-left: 12px !important;
}

.gr-td-sub {
    color: var(--color-primary, #4a7c59) !important;
    font-size: 13px;
}

#gr-popup-price-table tfoot td {
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

#gr-popup-price-table tfoot td:last-child {
    text-align: right;
    color: var(--color-primary, #4a7c59);
}

#gr-popup-continue {
    margin-top: auto;
    padding: 14px 24px;
    background: var(--color-primary, #4a7c59);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: background .2s, transform .1s;
    letter-spacing: .03em;
}

#gr-popup-continue:hover {
    background: var(--color-primary-dark, #3a6248);
    transform: translateY(-1px);
}

#gr-popup-continue:active {
    transform: none;
}

/* Fix Tourfic Booking Form Styles to match Greenrice Theme */
.greenrice-tf-booking-wrapper .tf-single-template__one {
    padding: 0 !important;
}

.greenrice-tf-booking-wrapper .tf-tour-booking-box {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.greenrice-tf-booking-wrapper .tf-booking-form-inner {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.greenrice-tf-booking-wrapper .tf-booking-form-inner h3 {
    display: none !important;
    /* Hide Tourfic's h3 since we have our own widget-title */
}

.greenrice-tf-booking-wrapper .tf-booking-price {
    margin-bottom: 20px;
}

.greenrice-tf-booking-wrapper .tf-booking-price p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.greenrice-tf-booking-wrapper .tf-booking-price p span {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    display: block;
    margin-top: 5px;
}

/* Fix inputs to match Greenrice transparent style */
.greenrice-tf-booking-wrapper .tf_booking-dates,
.greenrice-tf-booking-wrapper .tf_person-selection-inner,
.greenrice-tf-booking-wrapper .tf-single-person {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.greenrice-tf-booking-wrapper .tf-single-person {
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

.greenrice-tf-booking-wrapper input[type="date"],
.greenrice-tf-booking-wrapper .tf_booking-dates input[type="text"],
.greenrice-tf-booking-wrapper .tf-field-group input[type="text"],
.greenrice-tf-booking-wrapper input.tours-check-in-out,
.greenrice-tf-booking-wrapper .flatpickr-input {
    width: 100% !important;
    padding: 12px 15px 12px 45px !important;
    /* Increased left padding for icon */
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
}

/* Fix person quantity inputs layout */
.greenrice-tf-booking-wrapper .tf_person-selection-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    margin-bottom: 5px;
}

.greenrice-tf-booking-wrapper .tf_person-selection-inner input[type="text"] {
    width: 40px !important;
    text-align: center;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 5px !important;
    margin: 0 10px !important;
}

.greenrice-tf-booking-wrapper .tf_person-selection-inner .qty-dec,
.greenrice-tf-booking-wrapper .tf_person-selection-inner .qty-inc {
    cursor: pointer;
    background: #eee;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: bold;
}

.greenrice-tf-booking-wrapper .tf_btn {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    background: var(--color-cta) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

.greenrice-tf-booking-wrapper .tf_btn:hover {
    background: var(--color-cta-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(235, 95, 41, 0.3);
}

/* --------------------------------- */
/* FIX POPUP: Empty "Tour extra" Tab and Fixed Overlay */
/* --------------------------------- */

/* Force all Tourfic popups to act as fixed modals, hidden by default */
.tf-car-booking-popup,
.tf-tour-booking-popup,
.tf-withoutpayment-booking-confirm,
.tf-withoutpayment-booking,
.tf-popup-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 999999 !important;
    display: none !important;
    /* Hide by default */
    align-items: center;
    justify-content: center;
}

/* Show only when active */
.tf-car-booking-popup.show,
.tf-tour-booking-popup.show,
.tf-withoutpayment-booking-confirm.show,
.tf-withoutpayment-booking.show,
.tf-popup-wrapper.show {
    display: flex !important;
}

/* Reset inner popup warp so it behaves properly inside the fixed overlay */
.tf-booking-popup-warp,
.tf-confirm-popup {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: row;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.tf-booking-content-2.show:empty,
.tf-booking-content-2.show .tf-booking-content-extra:empty {
    display: none !important;
}

/* Ensure left side doesn't look broken */
.tf-booking-content-2 {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
}

.tf-booking-step-2 {
    display: none !important;
}

.tf-booking-content-2.show {
    display: block !important;
    min-height: 200px;
    position: relative;
}

.tf-booking-content-2.show::before {
    content: "No additional extras available for this tour.";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #888;
    font-style: italic;
    width: 100%;
    text-align: center;
}

.tf-booking-content-2.has-bg-image::before {
    display: none !important;
}

.tf-booking-content-2 .tf-booking-content-extra:not(:empty)~ ::before {
    display: none !important;
}

/* Fix excessively tall Book Now button in the sticky bottom bar */
.tf-bottom-booking-bar a.tf_btn,
.tf-bottom-booking-bar button.tf-submit-btn,
.tf-bottom-booking-bar .tf-btn,
.tf-bottom-booking-bar button {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 30px !important;
    margin: auto 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.tf-bottom-booking-bar a.tf_btn.tf-booking-mobile-btn {
    display: none !important;
}

.tf-bottom-booking-bar {
    align-items: center !important;
}

.tf-bottom-booking-bar .tf-btn-wrap {
    display: flex;
    align-items: center;
}