/* =======================================================
   Elite24 Unified Responsive Stylesheet
   All breakpoints & responsive UI behaviors
   ======================================================= */

/* =======================================================
   1. Breakpoint: Desktop Small / Tablet Landscape (max-width: 1200px)
   ======================================================= */
@media (max-width: 1200px) {

    .container,
    .container-md,
    .container-m,
    .container-l,
    .container-lg,
    .container-c,
    .container-exact {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* About Us: Hero */
    .hero-section {
        aspect-ratio: auto;
        min-height: 520px;
        padding: 120px 0 60px;
    }

    .hero-container {
        padding: 0 20px;
    }

    /* About Us: Pillars Section */
    .pillar-box-grid,
    .pillar-box-grid.reverse-mode {
        grid-template-columns: 1fr 1fr;
        height: auto;
        max-width: 100%;
        gap: 20px;
        padding: 0;
    }

    .pillar-stacked-col,
    .pillar-tall-col,
    .pillar-wide-img-box {
        width: 100%;
        height: auto;
    }

    .pillar-tall-col {
        aspect-ratio: auto;
        min-height: 440px;
    }

    /* About Us: Story Section */
    .danang-story-section {
        height: auto;
        padding: 60px 0;
    }

    .danang-story-container {
        grid-template-columns: 280px 1fr 280px;
        gap: 24px;
        height: auto;
    }

    .danang-photo-card {
        display: block;
        width: 100%;
        aspect-ratio: 442 / 658;
        border-radius: var(--radius-15);
        overflow: hidden;
    }

    /* About Us: Experience Layout */
    .exp-inner-container,
    .exp-inner-container.reverse-order {
        grid-template-columns: 1fr 1fr;
        height: auto;
        min-height: auto;
        gap: 20px;
    }

    .exp-big-card-box,
    .exp-stacked-subcards {
        width: 100%;
        min-height: auto;
    }

    /* Newsletter Box */
    .newsletter-box-exact {
        max-width: calc(100% - 32px);
    }
}

/* =======================================================
   2. Breakpoint: Tablet Large / Medium (max-width: 1024px)
   ======================================================= */
@media (max-width: 1024px) {

    /* Accommodations Listing Page */
    .map-slider-row-grid,
    .listing-main-grid-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mini-map-preview-card {
        height: 220px;
    }

    .pure-photo-slider-card {
        height: 230px;
    }

    /* Accommodations Listing Page - Mobile/Tablet Off-Canvas Filter Drawer */
    .sidebar-filter-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .sidebar-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    body.sidebar-filter-open {
        overflow: hidden;
    }

    .listing-filter-sidebar-exact {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 340px;
        height: 100vh;
        height: 100dvh;
        background: #FFFFFF;
        z-index: 9999;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
        display: flex;
        flex-direction: column;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25);
        padding: 0;
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .listing-filter-sidebar-exact.open {
        transform: translateX(0);
        visibility: visible;
    }

    /* Fixed Left Arrow / Tab Button */
    .sidebar-filter-toggle-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        position: absolute;
        left: 100%;
        top: 25%;
        transform: translateY(-50%);
        background: var(--color-forest);
        color: #FFFFFF;
        border: none;
        border-radius: 0 10px 10px 0;
        padding: 12px 14px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
        z-index: 10;
        transition: all 0.3s ease;
        white-space: nowrap;
        visibility: visible;
    }

    .sidebar-filter-toggle-tab:hover {
        background: #00534A;
    }

    .tab-label-group {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .tab-arrow-icon {
        font-size: 12px;
        transition: transform 0.35s ease;
    }

    .listing-filter-sidebar-exact.open .tab-arrow-icon {
        transform: rotate(180deg);
    }

    /* Mobile Drawer Header */
    .sidebar-filter-header-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        background: var(--color-forest);
        color: #FFFFFF;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        flex-shrink: 0;
    }

    .mobile-filter-heading {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
    }

    .sidebar-filter-close-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        border: none;
        color: #FFFFFF;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .sidebar-filter-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    /* Scrollable Body */
    .listing-filter-sidebar-exact .sidebar-filter-wrapper {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 20px;
        gap: 18px;
        overscroll-behavior: contain;
    }

    .filter-group-accordion {
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 14px;
    }

    .filter-group-accordion:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* Mobile Drawer Footer */
    .sidebar-filter-footer-mobile {
        display: block;
        padding: 14px 20px;
        border-top: 1px solid #E2E8F0;
        background: #F8FAFC;
        flex-shrink: 0;
    }

    .btn-sidebar-apply-filter {
        width: 100%;
        height: 42px;
        background: var(--color-forest);
        color: #FFFFFF;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
    }

    .btn-sidebar-apply-filter:hover {
        background: #00534A;
    }

    .detail-content-columns {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .detail-sidebar-map-card {
        max-width: 100%;
    }

    .room-card-horizontal {
        grid-template-columns: 220px 1fr 140px;
        gap: 18px;
    }

    .why-choose-card-box {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }

    /* Blogs Page */
    .blog-layout-two-col {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blog-cards-grid-six {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .blog-detail-two-col-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Contact Page */
    .contact-info-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .contact-hero-grid,
    .contact-two-col-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* =======================================================
   3. Breakpoint: Tablet Portrait / Mobile Menu (max-width: 991px)
   ======================================================= */
@media (max-width: 991px) {

    /* Header & Navigation */
    .header-nav {
        display: none !important;
    }

    .header-cta-btn {
        margin-left: auto;
        gap: 8px;
    }

    .header-lang-switcher {
        padding: 2px;
        gap: 2px;
    }

    .lang-switcher-item {
        padding: 3px 6px;
        font-size: 11px;
    }

    .mobile-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: var(--color-white);
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-toggle-btn:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Overlay Backdrop */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Dedicated Right-side Drawer */
    .mobile-menu-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 370px;
        height: 100vh;
        height: 100dvh;
        background: rgba(11, 60, 51, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: -5px 0 35px rgba(0, 0, 0, 0.5);
        z-index: 9999;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
        overflow: hidden;
    }

    .mobile-menu-drawer.open {
        transform: translateX(0);
        visibility: visible;
    }

    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-logo img {
        height: 40px;
        width: auto;
        object-fit: contain;
    }

    .mobile-menu-close {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: var(--color-white);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
    }

    .mobile-menu-close:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: rotate(90deg);
    }

    .mobile-menu-body {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
    }

    .mobile-nav-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-link {
        display: block;
        padding: 12px 16px;
        font-size: 15.5px;
        font-weight: 500;
        color: #D1D5DB;
        border-radius: 8px;
        text-decoration: none;
        transition: var(--transition);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        color: var(--color-white);
        font-weight: 700;
        background: rgba(255, 255, 255, 0.08);
        padding-left: 20px;
    }

    .mobile-menu-footer {
        padding: 18px 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.15);
    }

    .mobile-booking-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 46px;
        background-color: var(--color-primary);
        color: var(--color-white);
        font-size: 14px;
        font-weight: 700;
        border-radius: 12px;
        text-decoration: none;
        transition: var(--transition);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    body.mobile-menu-open {
        overflow: hidden;
    }

    /* Home Search Booking Bar */
    .home-search-card {
        height: auto;
        flex-wrap: wrap;
        padding: 14px;
        gap: 10px;
    }

    .search-divider-line {
        display: none;
    }

    .search-field-item {
        flex: 1 1 calc(50% - 10px);
        min-width: 130px;
        padding: 8px 12px;
        background-color: #F8FAFC;
    }

    .btn-home-search-submit {
        width: 100%;
        height: 44px;
        margin-top: 4px;
    }

    /* Section 5: Featured Accommodation */
    .featured-section-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .featured-col-left {
        width: 100%;
        gap: 16px;
    }

    .featured-type-sidebar {
        flex-direction: row;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    .featured-type-btn {
        width: 150px;
        height: 120px;
        aspect-ratio: auto;
    }

    .featured-col-right {
        width: 100%;
        gap: 20px;
    }

    .featured-grid-content {
        width: 100%;
        max-width: 100%;
    }

    .featured-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        width: 100%;
    }

    /* Section 6: Video */
    .home-video-grid-box {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Section 7: Blogs Grid */
    .blogs-grid-four {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Section 8A: Member Brands */
    .brands-flex-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .brands-vertical-line {
        display: none;
    }

    .brands-partner-swiper {
        width: 100%;
    }

    /* Section 10: Footer */
    .footer-four-columns {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* About Us Page */
    .hero-section {
        aspect-ratio: auto;
        min-height: 480px;
        padding: 110px 0 50px;
    }

    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 28px;
        padding: 0 16px;
    }

    .hero-text-box {
        max-width: 100%;
        text-align: center;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 12px;
    }

    .hero-desc {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 24px;
    }

    .hero-play-circle {
        position: static;
        transform: none;
        width: 76px;
        height: 76px;
        font-size: 28px;
        margin: 0 auto;
    }

    .hero-play-circle:hover {
        transform: scale(1.08);
    }

    .sub-intro-bar {
        height: auto;
        padding: 20px 0;
    }

    .sub-intro-title {
        font-size: 20px;
        line-height: 1.4;
    }

    .pillar-box-grid,
    .pillar-box-grid.reverse-mode {
        grid-template-columns: 1fr;
        height: auto;
        gap: 24px;
    }

    .pillar-stacked-col {
        height: auto;
        width: 100%;
    }

    .pillar-tall-col {
        width: 100%;
        height: 320px;
        aspect-ratio: auto;
    }

    .pillar-tall-col img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .video-stats-section {
        padding: 36px 0 44px 0;
    }

    .video-section-title {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .video-frame-box {
        aspect-ratio: 16 / 9;
        margin-bottom: 24px;
    }

    .stats-six-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 16px;
        padding: 10px 0;
    }

    .danang-story-section {
        height: auto;
        padding: 50px 0;
    }

    .danang-story-container {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
    }

    .danang-photo-card {
        display: block;
        width: 100%;
        max-width: 480px;
        aspect-ratio: 16 / 10;
        margin: 0 auto;
        border-radius: 12px;
    }

    .danang-quote-text {
        font-size: 18px;
        line-height: 32px;
        margin-bottom: 28px;
    }

    .exp-grid-row.bg-white {
        padding: 40px 0 20px 0;
    }

    .exp-grid-row.bg-warm {
        padding: 24px 0;
    }

    .exp-inner-container,
    .exp-inner-container.reverse-order {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-height: auto;
        height: auto;
    }

    .exp-inner-container.reverse-order {
        flex-direction: column-reverse;
    }

    .exp-big-card-box {
        width: 100%;
        height: auto;
        min-height: 360px;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .exp-stacked-subcards {
        width: 100%;
        min-height: auto;
        gap: 20px;
    }

    .exp-sub-card-box {
        height: auto;
        min-height: 220px;
        border-radius: 12px;
        overflow: hidden;
    }

    .brands-ecosystem-section {
        padding: 32px 0 44px 0;
    }

    .brands-title-heading {
        text-align: center;
        font-size: 18px;
        margin-bottom: 18px;
    }

    /* Blogs Page */
    .blog-featured-video-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .blog-layout-two-col {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .blog-cards-grid-six {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

/* =======================================================
   4. Breakpoint: Mobile Landscape & Tablet Small (max-width: 768px)
   ======================================================= */
@media (max-width: 768px) {

    /* Hero Section */
    .home-hero-section {
        height: 70vh;
        min-height: 460px;
    }

    .btn-home-hero-discover {
        width: 130px;
        height: 40px;
        font-size: 13px;
    }

    /* Section 4: Destinations Swiper */
    .destinations-swiper {
        padding-bottom: 35px !important;
    }

    /* Section 5: Featured Accommodation */
    .featured-col-left {
        gap: 14px;
    }

    .featured-col-left .featured-type-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }

    .featured-col-right .district-filter-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .district-tab-btn {
        flex-shrink: 0;
    }

    .featured-type-btn {
        width: 100%;
        height: 100px;
        aspect-ratio: auto;
        padding: 10px;
    }

    .type-icon-box {
        font-size: 30px;
    }

    .type-title-text {
        font-size: 13px;
    }

    .hotel-card-box {
        width: 100%;
    }

    .hotel-card-img-wrap {
        aspect-ratio: 16 / 10;
        width: 100%;
    }

    .hotel-card-info {
        padding: 14px 16px;
    }

    .hotel-card-name {
        font-size: 18px;
    }

    /* Section 7: Blogs Grid */
    .blogs-grid-four {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Section 9: Newsletter */
    .newsletter-box-exact {
        height: auto;
        flex-direction: column;
        padding: 24px 20px;
        gap: 16px;
    }

    .newsletter-form-exact {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .newsletter-input-box,
    .newsletter-submit-btn {
        width: 100%;
    }

    /* Section 10: Footer */
    .footer-four-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-bottom-credits {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* About Us Page */
    .hero-section {
        aspect-ratio: auto;
        min-height: 420px;
        padding: 95px 0 45px;
    }

    .hero-title {
        font-size: 25px;
        line-height: 1.32;
        margin-bottom: 10px;
    }

    .hero-desc {
        font-size: 13.5px;
        line-height: 21px;
        margin-bottom: 20px;
    }

    .btn-figma-hero {
        padding: 10px 22px;
        font-size: 14px;
    }

    .hero-play-circle {
        position: static;
        transform: none;
        width: 64px;
        height: 64px;
        font-size: 22px;
        margin: 0 auto;
    }

    .sub-intro-bar {
        height: auto;
        padding: 16px 0;
    }

    .sub-intro-title {
        font-size: 17px;
        line-height: 1.4;
    }

    .pillar-row-item {
        padding: 24px 0;
    }

    .pillar-box-grid,
    .pillar-box-grid.reverse-mode {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 0;
        height: auto;
    }

    .pillar-stacked-col {
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: auto;
        width: 100%;
    }

    .pillar-tall-col {
        height: 220px;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
    }

    .pillar-tall-col img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .pillar-wide-img-box {
        border-radius: 12px;
        aspect-ratio: 16 / 10;
        width: 100%;
    }

    .pillar-title-text {
        font-size: 19px;
    }

    .pillar-badge-icon {
        width: 42px;
        height: 42px;
    }

    .pillar-desc-text {
        font-size: 13.5px;
        line-height: 22px;
        margin-bottom: 12px;
    }

    .video-stats-section {
        padding: 24px 0 32px 0;
    }

    .video-section-title {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .video-frame-box {
        aspect-ratio: 16 / 9;
        border-radius: 10px;
        margin-bottom: 18px;
    }

    .video-play-center-btn {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .stats-six-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 10px;
        padding: 8px 0;
    }

    .stat-box-item {
        padding: 10px 6px;
        background: #F8FAFC;
        border: 1px solid #F1F5F9;
        border-radius: 8px;
    }

    .stat-number-big {
        font-size: 22px;
        line-height: 1.2;
    }

    .stat-label-bold {
        font-size: 12px;
        line-height: 15px;
        margin-top: 4px;
    }

    .stat-sub-text {
        font-size: 11px;
        line-height: 14px;
        margin-top: 2px;
    }

    .danang-story-section {
        height: auto;
        padding: 36px 0;
    }

    .danang-story-container {
        display: flex;
        flex-direction: column;
        gap: 18px;
        text-align: center;
    }

    .danang-photo-card {
        display: block;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 10px;
    }

    .danang-section-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .danang-quote-text {
        font-size: 15px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    .danang-detail-btn {
        width: auto;
        min-width: 135px;
        padding: 9px 20px;
        font-size: 14px;
    }

    .exp-grid-row.bg-white {
        padding: 24px 0 16px 0;
    }

    .exp-grid-row.bg-warm {
        padding: 20px 0;
    }

    .exp-inner-container,
    .exp-inner-container.reverse-order {
        gap: 18px;
        min-height: auto;
        height: auto;
    }

    .exp-big-card-box {
        height: auto;
        min-height: 260px;
        aspect-ratio: 16 / 10;
        border-radius: 12px;
    }

    .exp-big-overlay-text {
        padding: 20px 16px;
    }

    .exp-big-head-title {
        font-size: 18px;
        line-height: 1.35;
        margin-bottom: 6px;
    }

    .exp-big-body-desc {
        font-size: 13px;
        line-height: 20px;
    }

    .exp-stacked-subcards {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
        min-height: auto;
    }

    .exp-sub-card-box {
        display: flex;
        flex-direction: column !important;
        height: auto;
        border-radius: 12px;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }

    .exp-stacked-subcards .exp-sub-card-box:nth-child(odd) {
        flex-direction: column-reverse !important;
    }

    .bg-warm .exp-sub-card-box {
        background: var(--color-bg-warm);
    }

    .exp-sub-img-half {
        width: 100%;
        flex: 0 0 auto;
        height: 175px;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .exp-sub-img-half img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .exp-sub-content {
        width: 100%;
        flex: 0 0 auto;
        height: auto;
        padding: 18px 16px;
    }

    .exp-sub-content.arrow-right::after,
    .exp-sub-content.arrow-left::after {
        display: none !important;
    }

    .exp-sub-head {
        font-size: 17px;
        line-height: 1.35;
        margin-bottom: 6px;
    }

    .exp-sub-para {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 12px;
    }

    .brands-ecosystem-section {
        padding: 24px 0 32px 0;
    }

    .brands-title-heading {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .brands-main-logo {
        max-width: 180px;
        height: 65px;
    }

    .brand-slide-item {
        height: 65px;
    }

    /* Accommodation Listing Page */
    .top-filter-bar-card {
        flex-direction: column;
        padding: 14px;
        gap: 8px;
        border-radius: 0px 0px 8px 8px;
    }

    .filter-bar-divider {
        display: none;
    }

    .filter-bar-col {
        width: 100%;
        padding: 8px 12px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 6px;
    }

    .filter-bar-col.location-col {
        padding-left: 12px;
    }

    .filter-bar-action {
        width: 100%;
        padding-left: 0;
        margin-top: 4px;
    }

    .btn-top-filter-submit {
        width: 100%;
        height: 40px;
    }

    .acc-card-horizontal {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
        border-radius: 8px;
    }

    .acc-card-media {
        width: 100%;
        height: 210px;
        border-radius: 6px;
    }

    .acc-card-action {
        width: 100%;
        margin-top: 10px;
        padding-top: 12px;
        border-top: 1px dashed #e2e8f0;
    }

    .acc-card-price-block {
        width: 100%;
        margin-bottom: 12px;
    }

    .btn-select-room {
        width: 100%;
        height: 42px;
    }

    /* Accommodation Detail Page */
    .detail-breadcrumb-bar {
        padding-top: 76px;
        padding-bottom: 10px;
    }


    .detail-sticky-tabs-wrap {
        top: 60px;
        margin-bottom: 20px;
    }

    .detail-nav-tabs {
        gap: 16px;
        overflow-x: auto;
        padding: 0 4px;
        -webkit-overflow-scrolling: touch;
    }

    .detail-tab-btn {
        padding: 12px 2px 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    .detail-hotel-name {
        font-size: 22px;
    }

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

    .detail-room-filter-box {
        flex-direction: column;
        align-items: stretch;
        padding: 14px;
        gap: 12px;
    }

    .room-filter-divider {
        display: none;
    }

    .room-filter-col {
        padding-bottom: 8px;
        border-bottom: 1px solid #F1F5F9;
    }

    .btn-room-filter-update {
        width: 100%;
    }

    .room-card-horizontal {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }

    .room-card-thumb {
        width: 100%;
        height: 190px;
    }

    .room-card-action-box {
        align-items: stretch;
        width: 100%;
    }

    .btn-book-room-exact {
        width: 100%;
    }

    .why-location-row {
        grid-template-columns: 1fr auto auto;
        font-size: 12.5px;
    }

    /* Room Detail Modal */
    .room-modal-two-col-body {
        grid-template-columns: 1fr;
        height: auto;
        max-height: calc(90vh - 60px);
        overflow-y: auto;
    }

    .room-main-swiper-new {
        height: 260px;
        flex: none;
    }

    .room-thumbs-container-dark {
        padding: 10px 12px;
    }

    .room-thumbs-swiper-new {
        height: 60px;
    }

    .room-modal-right-info {
        height: auto;
        max-height: none;
        overflow: visible;
        padding: 20px;
    }

    .room-modal-right-scroll-content {
        overflow-y: visible;
        padding-right: 0;
        height: auto;
        flex: none;
    }

    .room-modal-booking-block {
        position: sticky;
        bottom: 0;
        padding-bottom: 8px;
    }

    /* Modal dialog widths */
    .map-modal-dialog,
    .video-modal-dialog {
        width: 95vw;
        max-width: 95vw;
    }

    /* Blogs Page */
    .blog-hero-banner-card {
        height: 200px;
        min-height: 180px;
    }

    .blog-hero-main-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .blog-featured-video-section {
        padding: 28px 0 16px;
    }

    .blog-featured-video-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-layout-two-col {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .blog-cards-grid-six {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .blog-filter-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .blog-category-filter-tabs {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
    }

    .blog-cat-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .blog-sort-dropdown-wrap {
        align-self: flex-start;
    }

    .blog-bottom-search-card,
    .bottom-search-fields-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-bottom-search-submit {
        width: 100%;
    }

    .blog-article-main-title {
        font-size: 20px;
    }

    .article-features-grid-box {
        grid-template-columns: 1fr;
    }

    .article-cta-banner-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .partner-logo-item {
        height: 54px;
    }

    .partner-logo-item img {
        max-height: 40px;
        max-width: 110px;
    }

    /* Contact Page */
    .contact-info-cards-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-row-two {
        grid-template-columns: 1fr;
    }

    .contact-mini-newsletter-form {
        flex-direction: column;
    }

    .btn-contact-mini-subscribe {
        width: 100%;
    }

    /* Accommodation Listing Page 768px */
    .listing-header-toolbar {
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
    }

    .toolbar-choice-text {
        order: 1;
        font-size: 13px;
    }

    .toolbar-sort-box {
        order: 2;
        margin-left: auto;
    }

    .toolbar-type-filter-tabs {
        order: 3;
        width: 100%;
        display: flex;
    }

    .toolbar-type-filter-tabs .tab-btn {
        flex: 1;
        min-width: 0;
        height: 38px;
        font-size: 13px;
    }

    .mini-map-preview-card {
        height: 200px;
    }

    .pure-photo-slider-card {
        height: 200px;
    }

    .group-booking-banner-card {
        padding: 12px 14px;
        gap: 10px;
        font-size: 13px;
    }

    .detail-gallery-collage {
        flex-direction: column;
    }

    .gallery-main-col,
    .gallery-sub-grid {
        width: 100%;
        aspect-ratio: 4/3;
    }
}

/* =======================================================
   5. Breakpoint: Mobile Portrait (max-width: 480px)
   ======================================================= */
@media (max-width: 480px) {

    /* Flatpickr Popup Size Fix */
    .flatpickr-calendar {
        max-width: calc(100vw - 24px) !important;
        width: 100% !important;
        left: 12px !important;
    }

    /* Home Search Card */
    .home-search-card {
        padding: 12px;
    }

    .search-field-item {
        flex: 1 1 100%;
        max-width: 100% !important;
    }

    /* Featured sidebar */
    .featured-type-sidebar {
        grid-template-columns: 1fr 1fr;
    }

    .hotel-card-info .btn-figma-pill {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .mobile-menu-drawer {
        max-width: 100vw;
        width: 100vw;
    }

    /* About Us Page */
    .hero-title {
        font-size: 22px;
    }

    .btn-figma-hero {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* About Us Page (480px) */
    .hero-section {
        min-height: 380px;
        padding: 85px 0 35px;
    }

    .hero-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .hero-desc {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 18px;
    }

    .hero-play-circle {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .sub-intro-title {
        font-size: 15px;
    }

    .pillar-title-text {
        font-size: 17px;
    }

    .pillar-tall-col {
        height: 190px;
    }

    .video-section-title {
        font-size: 18px;
    }

    .stats-six-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px 8px;
    }

    .stat-box-item {
        padding: 8px 4px;
        background: #F8FAFC;
        border-radius: 8px;
    }

    .stat-number-big {
        font-size: 20px;
    }

    .stat-label-bold {
        font-size: 11.5px;
    }

    .stat-sub-text {
        font-size: 10.5px;
    }

    .danang-section-title {
        font-size: 18px;
    }

    .danang-quote-text {
        font-size: 14px;
        line-height: 24px;
    }

    .exp-big-card-box {
        min-height: 240px;
    }

    .exp-big-head-title {
        font-size: 16px;
    }

    .exp-big-body-desc {
        font-size: 12px;
        line-height: 18px;
    }

    .exp-sub-img-half {
        height: 155px;
    }

    .exp-sub-head {
        font-size: 16px;
    }

    .exp-sub-para {
        font-size: 12.5px;
    }


    .featured-cards-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        width: 100%;
    }

    /* Accommodations Listing Page 480px */
    .mini-map-preview-card {
        height: 175px;
    }

    .pure-photo-slider-card {
        height: 185px;
    }

    .btn-open-full-map {
        height: 34px;
        font-size: 12px;
    }

    .map-pin .pin-bubble {
        font-size: 10px;
        padding: 2px 6px;
    }

    .acc-card-horizontal {
        padding: 12px;
        gap: 12px;
    }

    .acc-card-media {
        height: 165px;
    }

    .acc-hotel-title {
        font-size: 15px;
    }

    .acc-card-title-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .acc-hotel-address {
        font-size: 12px;
    }

    .acc-hotel-specs {
        flex-wrap: wrap;
        gap: 8px 12px;
        font-size: 12px;
    }

    .amenities-line {
        gap: 6px 10px;
        font-size: 12px;
    }

    .acc-detail-link {
        font-size: 12px;
        margin-top: 4px;
    }

    .btn-select-room {
        height: 40px;
        font-size: 13px;
    }

    .group-booking-banner-card {
        padding: 10px 12px;
        font-size: 12px;
    }

    .group-pin-icon {
        font-size: 16px;
        margin-top: 0;
    }

    .pagination-bar {
        gap: 4px;
        margin-top: 20px;
    }

    .page-number-btn {
        min-width: 36px;
        height: 34px;
        font-size: 13px;
    }

    .page-arrow-btn {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .blog-hero-main-title {
        font-size: 19px;
    }

    .blog-cards-grid-six {
        grid-template-columns: 1fr;
    }

    /* General typography scaling */
    h1,
    .h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h2,
    .h2 {
        font-size: 20px !important;
        line-height: 1.35 !important;
    }

    /* Brand Page Mobile */
    .brand-hero-section {
        padding: 90px 0 50px;
    }

    .brand-hero-title {
        font-size: 20px;
    }

    .brand-section-title {
        font-size: 17px;
    }

    .brand-info-subtitle {
        font-size: 20px;
    }

    .brand-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .brand-partner-cta-box {
        padding: 20px;
    }

    .brand-partner-cta-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* =======================================================
   RESPONSIVE: BRAND ECOSYSTEM PAGE (max-width: 991px)
   ======================================================= */
@media (max-width: 991px) {
    .brand-hero-section {
        padding: 105px 0 60px;
    }

    .brand-hero-title {
        font-size: 26px;
    }

    .brand-z-row {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 30px;
    }

    .brand-z-right-img .brand-z-media {
        order: -1;
    }

    .brand-info-subtitle {
        font-size: 23px;
    }

    .brand-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .brand-partner-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .brand-partner-btn {
        width: 100%;
        justify-content: center;
    }
}