:root {
    --card: #fff;
    --primary2: #875845;
}

* {
    margin: 0;
    padding: 0;
}

html {
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-family: "Be Vietnam Pro", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
    font-weight: 400;
}

.hero {
    padding: 80px 20px;
    color: #fff;
}

.container {
    max-width: 1400px;
    margin: auto;
    padding: 0px 50px 0px 50px;
}

.section-heading {
    padding-bottom: 20px;
}

.tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 30px 0;
}

.tab {
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: 17px;
}

.tab.active {
    background: var(--primary);
    color: #fff;
    font-size: 17px;
}

.page {
    display: none;
}

.page.active {
    display: block;
}

.calendar-wrap {
    overflow: auto;
}

.room-tabs {
    display: flex;
    overflow: auto;
    margin-bottom: 20px;
}

.room-tab {
    font-size: 16px;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
}

.calendar {
    min-width: 0;
}

.week-card {
    border: 1px solid #ddd;
    margin-bottom: 15px;
    border-radius: 16px;
    overflow: hidden;
}

.week-title {
    padding: 10px;
    background: #f1f1f1;
    font-weight: 700;
}

.grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
}

.head,
.time,
.slot {
    border: 1px solid #eee;
}

.head {
    padding: 8px;
    text-align: center;
    font-weight: 700;
}

.time {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.slot {
    height: 34px;
}

.booked {
    background: #cf7d7d;
}

@media (max-width:768px) {
    .calendar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .calendar-wrap {
        width: 100%;
    }

    .header-inner .main-menu a {
        font-size: 16px !important;
    }
}

.main-menu a {
    text-decoration: none;
    color: #555;
    font-weight: 600;
}

.main-menu a:hover {
    color: #c8a0a8;
}

.hero {
    background: linear-gradient(rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .35)),
        url("cover.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-logo {
    width: 180px;
    margin-bottom: 20px;
}

.hero h1 {
    color: white;
    font-size: 52px;
}

.hero p {
    color: white;
    font-size: 20px;
}

.hero-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 15px 35px;
    background: #c8a0a8;
    color: white;
    border-radius: 50px;
    text-decoration: none;
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, .3);
}

.floating-contact {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.floating-contact a {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
}

.phone-btn {
    font-size: 25px;
}

.messenger-btn {
    font-size: 30px;
}

.availability-grid {
    display: grid;
}

.sticky-corner {
    position: sticky;
    left: 0;
    top: 0;
}

.day-header {
    position: sticky;
    top: 0;
    text-align: center;
    z-index: 20;
}

.hour-cell {
    position: sticky;
    left: 0;
    z-index: 10;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.slot-cell {
    height: 42px;
}

.floating-contact a {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, .2);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@media (max-width:768px) {
    .room-grid {
        grid-template-columns: 1fr;
    }

    .main-menu {
        gap: 16px;
        flex-wrap: wrap;
    }
}

.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.room-card img {
    height: 260px;
    width: 100%;
    object-fit: cover;
}

.room-content h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.room-content p {
    line-height: 1.7;
    color: #666;
}

.footer p {
    opacity: .95;
}

.copyright {
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
}

@media (max-width:768px) {
    .container {
        padding: 14px;
    }

    .hero h1 {
        line-height: 1.3;
    }

    .header-inner {
        height: auto;
        padding: 12px 0;
        flex-wrap: wrap;
    }

    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
    }

    .tab {
        white-space: nowrap;
    }

    .room-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .room-tab {
        white-space: nowrap;
    }

    .calendar-wrap {
        border-radius: 18px;
    }

    body {
        overflow-x: auto;
    }

    .footer {
        border-radius: 24px 24px 0 0;
    }

    .footer h3 {
        margin-bottom: 10px;
    }

    .room-card img {
        height: 220px;
    }

    .floating-contact {
        right: 12px;
        bottom: 12px;
    }

    .floating-contact a {
        width: 54px;
        height: 54px;
    }
}

.footer {
    margin-top: 40px !important;
    border-radius: 24px 24px 0 0 !important;
}

.sticky-corner {
    width: 60px;
    min-width: 60px;
}

@media (max-width:768px) {
    .hero-logo {
        width: 110px !important;
    }

    .hero h1 {
        font-size: 28px !important;
    }

    .hero p {
        font-size: 15px !important;
    }

    .header-inner {
        gap: 12px !important;
    }

    .main-menu {
        width: 100%;
        justify-content: center;
        font-size: 14px;
    }

    .hour-cell {
        position: sticky;
        left: 0;
        z-index: 50;
        background: #fff;
    }

    .slot-cell {
        height: 30px !important;
    }

    .day-header {
        font-size: 10px !important;
        padding: 6px 2px !important;
    }

    .calendar-wrap {
        padding: 6px !important;
        overflow-x: auto;
    }

    .availability-grid {
        display: grid !important;
    }

    .room-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .room-tab {
        font-size: 14px !important;
    }
}

@media (max-width:768px) {
    .hour-cell {
        width: 45px;
    }

    .slot-cell {
        height: 30px;
    }
}

.footer-grid {
    padding: 16px 20px !important;
    gap: 12px !important;
}

.footer p {
    line-height: 1.55 !important;
    margin-bottom: 4px;
}

.copyright {
    padding: 12px !important;
    font-size: 13px;
}

@media (max-width:768px) {
    .footer-grid {
        padding: 14px !important;
    }

    .footer-logo {
        width: 75px !important;
    }

    .map-wrap iframe {
        height: 120px !important;
    }
}

.footer-social {
    padding: 0px 20px;
}

.footer-social a {
    backdrop-filter: blur(10px);
}

.footer-social a:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}

.footer-social a:nth-child(1):hover {
    color: #1877f2;
}

.footer-social a:nth-child(2):hover {
    color: #ff4f8b;
}

.footer-social a:nth-child(3):hover {
    color: black;
}

@media (max-width:768px) {
    .footer-social {
        gap: 14px;
        padding: 14px;
    }

    .footer-social a {
        font-size: 20px;
    }
}

.stats-bar {
    max-width: 1400px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat {
    text-align: center;
}

.stat strong {
    display: block;
    font-size: 28px;
    color: #875845;
}

.stat span {
    color: #666;
    font-size: 14px;
}

.footer-feature {
    margin-top: 18px;
}

.footer-feature div {
    margin-bottom: 10px;
}

.footer-social a {
    text-decoration: none;
}

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

    .footer-brand {
        max-width: none;
    }
}

.footer h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: white;
}

.footer p {
    color: rgba(255, 255, 255, .92);
    line-height: 1.8;
}

.footer {
    margin-top: 60px;
    border-radius: 36px 36px 0 0;
}

.footer-grid {
    max-width: 1400px;
    margin: auto;
    padding: 45px 30px;
}

.footer-social {
    justify-content: center;
}

.footer-social a {
    color: white;
    font-size: 22px;
}

.footer-social a:hover {
    color: #875845;
}

@media (max-width:768px) {
    .footer-grid {
        padding: 30px 18px;
    }

    .map-wrap iframe {
        width: 100%;
        border: none;
        border-radius: 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    }

    .footer-social a {
        width: 48px;
        height: 48px;
    }
}

@media (max-width:768px) {
    .footer-grid {
        gap: 18px !important;
    }

    .footer-info-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .footer-info-row>div {
        background: rgba(255, 255, 255, .08);
        padding: 14px;
        border-radius: 16px;
    }

    .footer-info-row h3 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .footer-info-row p {
        font-size: 13px;
        line-height: 1.5;
    }
}

.stats-bar {
    background: #fff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.footer-brand {
    max-width: 320px;
}

.footer-brand p {
    opacity: .9;
}

.footer-rating {
    margin-top: 16px;
    color: #FFD166;
}

.footer-rating span {
    display: block;
    color: white;
    font-size: 14px;
    margin-top: 6px;
}

.footer-card {
    background: rgba(255, 255, 255, .08);
    padding: 18px;
    border-radius: 18px;
    backdrop-filter: blur(10px);
}

.back-btn {
    display: inline-block;
}

.hero-image {
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
}

.home-header {
    margin-top: 18px;
}

.section {
    margin-top: 40px;
}

.gallery-detail {
    margin-top: 20px;
}

.gallery-detail img {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.home-header h1 {
    font-size: 42px;
    margin-bottom: 12px;
    color: #875845;
}

.price {
    margin-bottom: 10px;
}

.description {
    font-size: 18px;
    line-height: 1.9;
    color: #666;
}

.amenity {
    background: white;
    padding: 16px 18px;
    border-radius: 18px;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.back-btn {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.back-btn:hover {
    transform: translateY(-3px);
}

@media (max-width:768px) {
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: auto;
    }

    .footer-logo {
        margin: 0 auto 12px;
        display: block;
    }

    .footer-rating {
        text-align: center;
        width: 100%;
    }

    .gallery-detail {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gallery-detail img {
        height: 240px;
    }

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

.map-wrap iframe {
    height: 200px !important;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

@media (max-width:768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }

    .map-wrap iframe {
        height: 300px;
    }

    .tab.active {
        font-size: 16px;
    }
}

@media (max-width:768px) {
    .availability-grid {
        display: grid;
        grid-template-columns: 60px repeat(7, minmax(65px, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .sticky-corner,
    .hour-cell {
        width: 60px !important;
        min-width: 60px !important;
    }

    .hour-cell,
    .slot-cell {
        height: 44px !important;
        min-height: 44px !important;
    }

    .hour-cell {
        font-size: 11px;
    }

    .day-header {
        font-size: 11px;
        padding: 8px 4px;
    }
}

.floating-social {
    position: fixed;
    right: 20px;
    bottom: 90px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.floating-social a {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
    transition: all .25s ease;
}

.floating-social a:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .16),
        0 4px 12px rgba(0, 0, 0, .10);
}

.floating-social img,
.floating-social i {
    width: 28px;
    height: 28px;
    font-size: 28px;
}

.zalo-btn {
    background: linear-gradient(135deg, #0068ff, #3d8cff) !important;
}

.zalo-btn img {
    width: 55px;
    height: 55px;
}

.messenger-btn {
    background: linear-gradient(135deg, #0084ff, #6f7cff) !important;
    color: white;
}

.phone-btn {
    background: linear-gradient(135deg, #00b74a, #37d67a) !important;
    color: white;
}

.booking-btn {
    background: linear-gradient(135deg, #ff6b35, #ff9558) !important;
    color: white;
}

.phone-btn {
    animation: phonePulse 2s infinite;
}

@keyframes phonePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 183, 74, .5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(0, 183, 74, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 183, 74, 0);
    }
}

@media (max-width:768px) {
    .floating-social {
        right: 12px;
        bottom: 75px;
        gap: 8px;
    }

    .floating-social a {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .floating-social img,
    .floating-social i {
        width: 22px;
        height: 22px;
        font-size: 22px;
    }
}

@media screen and (min-width:380px) and (max-width:520px) {
    .calendar {
        width: 100%;
    }

    .container {
        padding: 14px;
    }

    .site-header {
        position: sticky;
    }

    .header-inner {
        height: auto !important;
        padding: 14px 0 !important;
        gap: 10px !important;
        flex-direction: column;
    }

    .logo-wrap {
        margin-right: 0 !important;
    }

    .logo-wrap img {
        height: 52px;
    }

    .main-menu {
        width: 100%;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 10px !important;
    }

    .header-inner .main-menu a {
        font-size: 14px !important;
        background: #f7f1ed;
        padding: 8px 12px;
        border-radius: 999px;
    }

    .hero-logo {
        width: 95px !important;
    }

    .hero h1 {
        font-size: 28px !important;
        line-height: 1.25;
    }

    .hero p {
        font-size: 14px !important;
        margin-top: 10px;
    }

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

    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 8px;
        scrollbar-width: none;
        margin-top: 0px !important;
    }

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

    .tab {
        white-space: nowrap;
        font-size: 13px !important;
        padding: 11px 16px;
    }

    .room-grid {
        grid-template-columns: 1fr !important;
        gap: 18px;
    }

    .room-card {
        border-radius: 22px;
    }

    .room-card img {
        height: 210px !important;
    }

    .room-content {
        padding: 18px;
    }

    .room-content h3 {
        font-size: 20px;
    }

    .room-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 8px;
    }

    .room-tab {
        flex: 0 0 auto;
    }

    .room-tabs::-webkit-scrollbar {
        display: none;
    }

    .room-tab {
        font-size: 13px !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .calendar-wrap {
        padding: 12px !important;
        border-radius: 24px;
    }

    .calendar {
        min-width: unset !important;
    }

    .floating-contact {
        right: 12px;
        bottom: 12px;
    }

    .floating-contact a {
        width: 40px;
        height: 40px;
        color: white;
    }

    .zalo-btn img {
        width: 40px;
        height: 40px;
    }

    .zalo-btn {
        background: #0068ff !important;
    }

    .messenger-btn {
        background: #0084ff !important;
        color: white !important;
        font-size: 24px;
    }

    .phone-btn {
        background: #25D366 !important;
        color: white !important;
        font-size: 20px;
    }

    .footer {
        border-radius: 28px 28px 0 0 !important;
        margin-top: 50px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        padding: 28px 18px !important;
        gap: 26px !important;
        text-align: center;
    }

    .footer-logo {
        width: 90px;
    }

    .footer h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .footer p {
        font-size: 14px;
        line-height: 1.7;
    }

    .map-wrap iframe {
        height: 200px !important;
        border-radius: 22px;
    }

    .copyright {
        padding: 18px;
        font-size: 13px;
    }

    #homeName {
        font-size: 28px;
    }

    .availability-grid {
        min-width: 100% !important;
    }

    .hour-cell {
        position: sticky;
        left: 0;
        z-index: 50;
        background: #fff;
        width: 50px;
    }

    .calendar-wrap {
        overflow-x: auto !important;
        overflow-y: visible;
    }

    .hour-cell {
        font-size: 9px;
    }

    .day-header {
        font-size: 9px;
        padding: 2px;
    }

    .sticky-corner {
        width: 60px;
        min-width: 0px;
        background: #fff;
    }

    .hour-cell,
    .slot-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px !important;
        min-height: 44px !important;
        box-sizing: border-box;
    }

    .availability-grid {
        display: grid;
        grid-template-columns: 50px repeat(7, minmax(42px, 1fr)) !important;
        width: 100% !important;
    }

    .sticky-corner,
    .hour-cell {
        width: 50px !important;
        min-width: 50px !important;
    }
}

.gallery-section,
.review-section {
    margin-top: 80px;
}

.blog-grid,
.review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.blog-card,
.review-card {
    overflow: hidden;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.blog-card:hover,
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

.blog-card img,
.review-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.blog-card:hover img,
.review-card:hover .review-image {
    transform: scale(1.03);
}

.blog-content {
    padding: 18px;
}

.blog-title {
    font-size: 18px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.4;
}

.blog-text {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

.review-content {
    padding: 18px;
}

.review-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.review-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-name {
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.review-phone {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

.review-rating {
    color: #ffb400;
    font-size: 15px;
    margin-top: 4px;
}

.review-text {
    color: #555;
    line-height: 1.7;
    font-size: 14px;
}

.section-header {
    text-align: center;
    margin-bottom: 32px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 15px;
    color: #777;
}

@media (max-width: 968px) {

    .blog-grid,
    .review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .blog-grid,
    .review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .section-header p {
        font-size: 14px;
    }

    .blog-content,
    .review-content {
        padding: 14px;
    }

    .blog-title {
        font-size: 16px;
    }

    .review-avatar {
        width: 48px;
        height: 48px;
    }
}

.review-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: .3s;
}

.review-image:hover {
    transform: scale(1.03);
}

.home-detail-container {
    font-family: "Be Vietnam Pro", sans-serif;
}

.back-btn {
    border: none;
    background: #f7f7f7;
    padding: 10px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 18px;
    transition: 0.2s;
}

.back-btn:hover {
    background: #ececec;
}

.hero-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    margin-bottom: 22px;
}

.home-header {
    margin-bottom: 28px;
}

.description,
.home-content {
    font-size: 17px;
    max-width: 900px;
}

.section {
    margin-bottom: 42px;
}

.section h2 {
    font-size: 24px;
    margin-bottom: 18px;
    color: #222;
}

.amenities {
    flex-wrap: wrap;
}

.price-table {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#pricingPreview {
    margin-top: 10px;
}

.gallery-detail {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.gallery-detail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.25s;
}

.gallery-detail img:hover {
    transform: scale(1.02);
}

@media (max-width: 992px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .hero-image {
        height: 320px;
    }
}

@media (max-width: 768px) {
    #homeName {
        font-size: 28px;
    }

    .price {
        font-size: 18px;
    }

    .hero-image {
        height: 260px;
    }

    .section h2 {
        font-size: 20px;
    }
}

@media (max-width: 520px) {
    .home-detail-container {
        padding: 12px;
    }

    .hero-image {
        height: 240px;
    }

    .description,
    .home-content {
        font-size: 15px;
    }

    .price-preview-value {
        font-size: 16px;
    }
}

.gallery-airbnb {
    border-radius: 18px;
}

.gallery-main img {
    cursor: pointer;
    transition: 0.3s;
}

.gallery-main img:hover {
    transform: scale(1.01);
}

.gallery-side img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.25s;
}

.gallery-side img:hover {
    transform: scale(1.03);
}

.gallery-last {
    position: relative;
    cursor: pointer;
}

.gallery-last img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    border-radius: 14px;
}

#pricingPreview {
    flex-wrap: wrap;
}

.price-preview-card {
    gap: 6px;
}

.price-section {
    margin-top: 12px;
}

.price-section-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.price-row {
    font-size: 14px;
}

.pricing-details summary {
    font-size: 14px;
}

@media (max-width:768px) {
    #pricingPreview {
        grid-template-columns: 1fr 1fr;
    }
}

.price-preview-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.price-preview-value {
    line-height: 1.2;
}

@media (max-width:768px) {
    .gallery-main img {
        border-radius: 16px;
    }
}

@media (max-width:768px) {
    .detail-main {
        width: 100%;
    }

    .detail-sidebar {
        display: flex;
        justify-content: center;
    }
}

@media (max-width:768px) {
    .hero-image {
        height: 220px;
        border-radius: 14px;
    }
}

#homeDetailPage {
    min-height: 100vh;
    padding-bottom: 60px;
}

.home-detail-container {
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.home-header {
    margin: 24px 0;
}

#homeName {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.price {
    color: #FF385C;
}

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

.detail-sidebar {
    display: flex;
    justify-content: center;
}

#pricingPreview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.price-preview-card {
    padding: 10px;
    text-align: center;
}

.price-preview-label {
    font-size: 11px;
    margin-bottom: 4px;
}

.price-preview-value {
    font-size: 18px;
    font-weight: 700;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f3f3;
}

.price-row:last-child {
    border-bottom: none;
}

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

.price-value {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}

.gallery-airbnb {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
}

.gallery-main img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 18px;
}

.gallery-side {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
}

.gallery-side img,
.gallery-last img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 14px;
}

@media (max-width:992px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 24px;
    }

    #homeName {
        font-size: 30px;
    }

    .gallery-main img {
        height: 400px;
    }
}

@media (max-width:768px) {
    .home-detail-container {
        padding: 16px;
    }

    #homeName {
        font-size: 26px;
    }

    .price {
        font-size: 18px;
    }

    .detail-main {
        order: 1;
    }

    .detail-sidebar {
        order: 2;
        width: 100%;
    }
}

@media (max-width:480px) {
    .home-detail-container {
        padding: 12px;
    }

    #homeName {
        font-size: 22px;
    }

    .gallery-main img {
        height: 200px;
    }

    .gallery-side img,
    .gallery-last img {
        height: 90px;
    }

    #pricingPreview {
        grid-template-columns: 1fr 1fr;
    }

    .price-preview-card {
        padding: 8px;
    }

    .price-preview-value {
        font-size: 16px;
    }
}

@media (max-width:768px) {
    .section {
        margin-bottom: 20px;
    }

    #galleryImages {
        margin-bottom: 0 !important;
    }
}

@media (max-width:768px) {
    #galleryImages {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .gallery-airbnb {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        height: auto !important;
        min-height: unset !important;
    }

    .gallery-main {
        height: auto !important;
        min-height: unset !important;
    }

    .gallery-main img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }

    .gallery-side {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto !important;
        gap: 8px !important;
        height: auto !important;
        min-height: unset !important;
    }

    .gallery-side img,
    .gallery-last img {
        width: 100% !important;
        height: 100px !important;
        object-fit: cover !important;
    }

    .gallery-last {
        height: auto !important;
    }

    .detail-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .detail-main {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .detail-sidebar {
        margin-top: 0 !important;
    }
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
}

.detail-sidebar {
    position: relative;
    align-self: start;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.highlights-section {
    padding: 0px 20px;
}

.section-heading {
    text-align: center;
    margin-bottom: 40px;
}

.section-heading h2 {
    font-size: 38px;
    font-weight: 800;
    color: #222;
    margin-bottom: 12px;
}

.section-heading p {
    color: #777;
    font-size: 16px;
}

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

.highlight-card {
    background: #fff;
    border-radius: 24px;
    padding: 15px 20px;
    text-align: center;
    transition: .3s;
    border: 1px solid #f1f1f1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.highlight-card i {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 50%;
    font-size: 22px;
    color: #875845;
    background: linear-gradient(135deg,
            #f7ebe6,
            #fff8f5);
}

.highlight-card h3 {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.highlight-card span {
    display: block;
    margin-top: 8px;
    color: #777;
    line-height: 1.6;
}

@media (max-width:768px) {
    .highlights-section {
        padding: 28px 14px;
    }

    .section-heading {
        margin-bottom: 24px;
    }

    .section-heading h2 {
        font-size: 24px;
    }

    .section-heading p {
        font-size: 14px;
    }

    .highlight-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .highlight-card {
        padding: 14px 8px;
        border-radius: 18px;
    }

    .highlight-card i {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .highlight-card h3 {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.4;
    }

    .highlight-card span {
        display: none;
    }
}

@media screen and (min-width:380px) and (max-width:520px) {
    .logo-text strong {
        font-size: 22px;
    }

    .highlights-section {
        padding: 15px 10px;
    }

    .section-heading {
        margin-bottom: 10px;
    }

    .section-heading h2 {
        font-size: 20px;
    }

    .section-heading p {
        display: none;
    }

    .highlight-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .highlight-card {
        padding: 10px 4px;
        border-radius: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
    }

    .highlight-card i {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .highlight-card h3 {
        margin-top: 6px;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.3;
    }

    .highlight-card span {
        display: none;
    }
}

.footer {
    background: linear-gradient(135deg,
            #8e756c 0%,
            #b99d9d 100%);
    color: #fff;
    padding: 30px 24px 24px;
    overflow: hidden;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.15fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(320px, 1.25fr);
    gap: 42px;
    align-items: flex-start;
}

.footer-col h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.3px;
}

.footer a {
    color: #fff;
    text-decoration: none;
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    width: 112px !important;
    height: 112px !important;
    border-radius: 28px;
    object-fit: cover;
    margin-bottom: 22px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.footer-brand h2 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.8px;
    max-width: 260px;
}

.footer-desc {
    font-size: 15px;
    line-height: 1.8;
    opacity: .92;
    margin-bottom: 24px;
    max-width: 300px;
}

.footer-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
}

.footer-mini-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-mini-info span {
    font-size: 14px;
    opacity: .95;
}

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

.footer-links li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 15px;
    line-height: 1.75;
    opacity: .96;
}

.footer-links i {
    width: 16px;
    margin-top: 5px;
    color: #ffe0b2;
    flex-shrink: 0;
}

.footer-map-col {
    display: flex;
    flex-direction: column;
}

.map-wrap {
    overflow: hidden;
    border-radius: 26px;
    margin-bottom: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

.map-wrap iframe {
    width: 100%;
    height: 200px;
    border: none;
    display: block;
}

.footer-map-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 18px;
    border-radius: 16px;
    background: #fff;
    color: #222 !important;
    font-size: 15px;
    font-weight: 600;
    transition: .25s;
}

.footer-map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

.footer-bottom {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: .25s;
}

.footer-social a:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.16);
}

.footer-social i {
    font-size: 17px;
}

.footer-bottom p {
    font-size: 14px;
    opacity: .84;
    text-align: center;
}

@media (max-width: 1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    .footer-brand h2 {
        font-size: 28px;
    }

    .map-wrap iframe {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 46px 16px 22px;
    }

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

    .footer-col {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        padding: 20px;
    }

    .footer-logo {
        width: 86px;
        height: 86px;
        border-radius: 22px;
    }

    .footer-brand h2 {
        font-size: 24px;
        max-width: 100%;
    }

    .footer-desc {
        font-size: 14px;
        line-height: 1.7;
        max-width: 100%;
    }

    .footer-col h3 {
        font-size: 19px;
        margin-bottom: 18px;
    }

    .footer-links {
        gap: 16px;
    }

    .footer-links li {
        font-size: 14px;
    }

    .footer-rating {
        font-size: 13px;
        padding: 10px 14px;
    }

    .footer-mini-info span {
        font-size: 13px;
    }

    .map-wrap {
        border-radius: 20px;
    }

    .map-wrap iframe {
        height: 220px;
    }

    .footer-map-btn {
        font-size: 14px;
        padding: 14px;
    }

    .footer-social a {
        width: 46px;
        height: 46px;
        border-radius: 14px;
    }

    .footer-bottom p {
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .footer {
        padding: 40px 14px 20px;
    }

    .footer-grid {
        gap: 20px;
    }

    .footer-col {
        padding: 18px;
    }

    .footer-logo {
        width: 74px;
        height: 74px;
        border-radius: 20px;
    }

    .footer-brand h2 {
        font-size: 22px;
    }

    .footer-desc {
        font-size: 13px;
    }

    .footer-links li {
        font-size: 13px;
        line-height: 1.65;
    }

    .map-wrap iframe {
        height: 200px;
    }

    .footer-social {
        gap: 10px;
    }

    .footer-social a {
        width: 42px;
        height: 42px;
    }

    .footer-social i {
        font-size: 15px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

.rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

.room-card {
    cursor: pointer;
}

.room-image {
    transition: transform .5s ease;
}

.room-card:hover .room-image {
    transform: scale(1.04);
}

.room-content {
    gap: 18px;
}

.room-top {
    gap: 16px;
}

.room-title {
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.room-location {
    font-size: 14px;
    line-height: 1.6;
}

.room-rating {
    font-weight: 600;
    white-space: nowrap;
}

.room-desc {
    margin: 0;
}

.room-bottom {
    gap: 16px;
}

.room-price {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.room-price .price {
    font-size: 28px;
    font-weight: 700;
    color: #222;
    letter-spacing: -1px;
}

.room-price .night {
    font-size: 13px;
    color: #777;
    margin-bottom: 4px;
}

.room-btn {
    border: none;
    outline: none;
    cursor: pointer;
}

.room-btn:hover {
    opacity: .92;
}

@media (max-width: 992px) {
    .rooms-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }

    .room-image {
        height: 240px;
    }

    .room-title {
        font-size: 22px;
    }

    .room-price .price {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .rooms-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .room-card {
        border-radius: 24px;
    }

    .room-content {
        padding: 18px;
        gap: 16px;
    }

    .room-title {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .room-location {
        font-size: 13px;
    }

    .room-rating {
        font-size: 13px;
    }

    .room-price .price {
        font-size: 24px;
    }

    .room-price .night {
        font-size: 12px;
    }

    .room-btn {
        border-radius: 14px;
    }

    .section-heading {
        padding-top: 20px;
        padding-bottom: 10px;
    }
}

@media (max-width: 520px) {
    .rooms-grid {
        gap: 18px;
    }

    .room-card {
        border-radius: 22px;
    }

    .room-badge {
        top: 14px;
        left: 14px;
    }

    .room-content {
        gap: 14px;
    }

    .room-top {
        gap: 10px;
    }

    .room-title {
        line-height: 1.35;
    }

    .room-location {
        font-size: 12px;
    }

    .room-rating {
        font-size: 12px;
    }

    .room-features span {
        font-size: 11px;
        padding: 7px 10px;
    }

    .room-desc {
        line-height: 1.7;
    }

    .room-price .price {
        font-size: 22px;
    }

    .room-price .night {
        font-size: 11px;
    }
}

.room-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 3;
    letter-spacing: 0.3px;
}

.room-badge::before {
    content: "★";
    color: #ffd54f;
    font-size: 13px;
}

.room-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease,
        background 0.2s ease;
}

.room-btn:hover {
    transform: translateY(-2px);
    background: #000;
}

@media (max-width: 768px) {
    .room-badge {
        top: 10px;
        left: 10px;
        font-size: 11px;
        padding: 7px 11px;
    }

    .room-btn {
        width: auto;
        min-width: 110px;
        padding: 11px 16px;
        font-size: 13px;
    }
}

@media (max-width: 520px) {
    .room-bottom {
        gap: 10px;
    }

    .room-btn {
        min-width: unset;
        border-radius: 10px;
    }

    .room-badge {
        font-size: 10px;
        padding: 6px 10px;
    }

    .story-section {
        margin: 20px 0px 0px 0px !important;
    }

    .story-header h2 {
        font-size: 18px !important;
    }

    .section-heading {
        padding-top: 0px !important;
    }

    .highlights-section {
        padding: 0px 14px !important;
    }

    .story-avatar {
        width: 60px !important;
        height: 60px !important;
    }
}

.story-section {
    position: relative;
    margin: 50px 50px 0px 100px;
    padding-bottom: 18px;
}

.story-header {
    padding: 0 28px;
    margin-bottom: 18px;
}

.story-header h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    color: #1f2937;
    margin: 0;
}

.story-bar {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 4px 28px 14px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.story-bar::-webkit-scrollbar {
    display: none;
}

.story-bar.is-story-loading {
    min-height: 112px;
}

.story-skeleton-item {
    flex: 0 0 92px;
    text-align: center;
    pointer-events: none;
}

.story-skeleton-avatar {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(90deg, #eee7df 25%, #f8f2ec 37%, #eee7df 63%);
    background-size: 400% 100%;
    animation: storySkeleton 1.15s ease-in-out infinite;
}

.story-skeleton-name {
    width: 58px;
    height: 10px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #eee7df 25%, #f8f2ec 37%, #eee7df 63%);
    background-size: 400% 100%;
    animation: storySkeleton 1.15s ease-in-out infinite;
}

@keyframes storySkeleton {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.story-empty {
    color: #8b7b72;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 2px;
}

.story-item {
    flex-shrink: 0;
    width: 92px;
    text-align: center;
    cursor: pointer;
    transition: .25s ease;
}

.story-item:hover {
    transform: translateY(-4px);
}

.story-avatar {
    width: 84px;
    height: 84px;
    margin: auto;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg,
            #f59e0b,
            #fb7185);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: .25s ease;
}

.story-avatar:hover {
    transform: scale(1.05);
}

.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid white;
}

.story-name {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 18px;
    background: rgba(15, 23, 42, .82);
    backdrop-filter: blur(14px);
}

.story-viewer {
    position: relative;
    width: 100%;
    max-width: 430px;
    height: min(88vh, 820px);
    overflow: hidden;
    border-radius: 34px;
    background: #111827;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .28);
}

.story-background {
    position: absolute;
    inset: -18px;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: blur(24px);
    transform: scale(1.08);
    opacity: .42;
}

.story-viewer.is-video .story-background {
    opacity: .28;
}

.story-image,
.story-video {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
}

.story-video {
    display: none;
    background: #000;
    opacity: 0;
    transition: opacity .18s ease;
}

.story-video.is-ready {
    opacity: 1;
}

.story-poster-fallback {
    opacity: .96;
    filter: saturate(1.02);
}

.story-media-loader {
    position: absolute;
    left: 50%;
    bottom: 84px;
    transform: translateX(-50%);
    z-index: 31;
    display: none;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 9px 14px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
    pointer-events: none;
}

.story-media-loader::before {
    content: "";
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .38);
    border-top-color: #fff;
    animation: storySpin .75s linear infinite;
}

.story-viewer.is-loading-media .story-media-loader {
    display: inline-flex;
}

@keyframes storySpin {
    to {
        transform: rotate(360deg);
    }
}

.story-video-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 28;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .46);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    backdrop-filter: blur(12px);
    pointer-events: none;
}

.story-viewer.is-video .story-video-badge {
    display: inline-flex;
}

.story-viewer.is-video .story-content:empty {
    display: none;
}

.story-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .72) 10%,
            rgba(0, 0, 0, .18) 45%,
            rgba(0, 0, 0, .42) 100%);
}

.story-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#storyAuthor {
    width: fit-content;
    max-width: 100%;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    color: white;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .18);
}

#storyTime {
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    font-weight: 500;
    padding-left: 6px;
}

.story-content {
    max-width: 100%;
    width: fit-content;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #f9fafb;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}

.story-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 20;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: .22s ease;
}

.story-close:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, .22);
}

@media (max-width: 768px) {
    .story-section {
        margin-top: 18px;
    }

    .story-header {
        padding: 0 18px;
    }

    .story-bar {
        padding: 4px 18px 14px;
    }
}

.story-next,
.story-prev {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 15;
}

.story-next {
    right: 0;
}

.story-prev {
    left: 0;
}

.story-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 30px;
    font-weight: 300;
    cursor: pointer;
    transition: .22s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.story-nav:hover {
    transform: translateY(-50%) scale(1.08);
    background: rgba(255, 255, 255, .24);
}

.story-prev-btn {
    left: 14px;
}

.story-next-btn {
    right: 14px;
}

#pageLoader {
    position: fixed;
    inset: 0;
    z-index: 999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            #fffaf5,
            #ffffff);
    transition: opacity .45s ease,
        visibility .45s ease;
}

#pageLoader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html:not(.home-route) #pageLoader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html:not(.home-route) body.is-loading #roomGrid {
    min-height: 0 !important;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.loader-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    animation: loaderFloat 2s ease-in-out infinite;
}

.loader-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid #f3f4f6;
    border-top: 3px solid #f59e0b;
    animation: spin .8s linear infinite;
}

.loader-content p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loaderFloat {

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

    50% {
        transform: translateY(-6px);
    }
}

#storyAudio {
    display: none;
}

@media (max-width: 768px) {
    .story-modal {
        padding: 0;
    }

    .story-viewer {
        width: 100%;
        height: 100vh;
        max-width: 100%;
        border-radius: 0;
    }

    .story-image,
    .story-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
        padding: 60px 10px 90px;
    }

    .story-overlay {
        padding: 16px;
    }

    .story-content {
        font-size: 14px;
    }

    .story-nav {
        background: rgba(0, 0, 0, .35);
        width: 44px;
        height: 44px;
        z-index: 99999;
    }

    .story-prev-btn {
        left: 8px;
    }

    .story-next-btn {
        right: 8px;
    }
}

@media (max-width: 768px) {
    .story-top {
        margin-top: 48px;
    }

    #storyAuthor {
        max-width: calc(100% - 80px);
        font-size: 13px;
        padding: 10px 14px;
    }

    #storyTime {
        padding-left: 2px;
    }
}

.story-image {
    transition: transform 0.25s ease;
}

.story-progress {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 999;
    padding: 0 4px;
}

.story-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.story-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ffffff, #ffe7d0);
    border-radius: inherit;
    transition: none;
    will-change: width;
}

.story-viewer.is-video .story-progress-bar {
    height: 5px;
    background: rgba(255, 255, 255, .24);
}

.story-sound-toggle {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 35;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .48);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.story-sound-toggle.is-muted {
    background: rgba(216, 157, 121, .92);
    border-color: rgba(255, 255, 255, .28);
}

.story-viewer.is-video .story-sound-toggle {
    display: inline-flex;
}

@media (max-width: 520px) {
    .story-modal {
        background: #050505;
    }

    .story-progress {
        top: max(10px, env(safe-area-inset-top));
        left: 8px;
        right: 8px;
        gap: 4px;
    }

    .story-progress-bar {
        height: 3.5px;
    }

    .story-video-badge {
        left: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        font-size: 11px;
        padding: 7px 10px;
    }

    .story-sound-toggle {
        right: 12px;
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 36px;
        padding: 8px 11px;
        font-size: 11px;
    }

    .story-media-loader {
        bottom: calc(58px + env(safe-area-inset-bottom));
        font-size: 11px;
        min-height: 34px;
        padding: 8px 11px;
        max-width: calc(100vw - 32px);
        white-space: nowrap;
    }
}

.footer-mini-stats {
    margin: 20px 0 18px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.mini-stat strong {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.2px;
}

.mini-stat small {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.mini-stat.live strong {
    color: #22c55e;
}

.mini-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 16px;
    flex-shrink: 0;
}

.mini-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    position: relative;
    flex-shrink: 0;
}

.mini-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(255, 56, 92, 0.55);
    animation: livePulse 1.8s infinite;
}

@keyframes livePulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }

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

.mini-divider {
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.12);
}

.mini-stat:hover {
    transform: translateY(-1px);
    transition: .2s ease;
}

@media (max-width: 768px) {
    .footer-mini-stats {
        gap: 16px;
        padding: 14px 16px;
    }

    .mini-stat strong {
        font-size: 16px;
    }

    .mini-stat small {
        font-size: 13px;
    }

    .mini-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 480px) {
    .footer-mini-stats {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 15px;
    }

    .mini-divider {
        display: none;
    }

    .mini-stat {
        justify-content: flex-start;
    }

    .mini-stat strong {
        font-size: 16px;
    }

    .mini-stat small {
        font-size: 13px;
    }
}

@media (max-width:768px) {
    .mobile-price-wrap strong {
        color: #222;
    }
}

@media (max-width:768px) {

    .btn-book-now,
    .btn-view-calendar {
        height: 46px;
        font-size: 13px;
    }

    .mobile-price-wrap {
        display: flex;
        flex-direction: column;
    }

    .mobile-price-wrap span {
        font-size: 11px;
        color: #888;
    }

    .mobile-price-wrap strong {
        font-weight: 700;
        line-height: 1.2;
    }

    .mobile-price-wrap small {
        font-size: 11px;
        color: #888;
    }

    .mobile-book-btn {
        background: #FF385C;
        color: #fff;
        text-decoration: none;
        border-radius: 10px;
        padding: 12px 18px;
        font-size: 13px;
        font-weight: 600;
    }
}

.room-cta {
    display: flex;
    margin-top: 16px;
}

.room-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.25s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.room-cta a * {
    position: relative;
    z-index: 1;
}

.mobile-book-btn {
    background: #ff4d6d;
    color: #fff;
}

.btn-view-calendar {
    background: #f1f3f5;
    color: #222;
    border: 1px solid #e5e7eb;
}

.room-cta a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.room-cta a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.room-cta a:hover::after {
    opacity: 1;
}

@media (max-width: 520px) {
    .section {
        margin-bottom: 0px !important;
        margin-top: 20px !important;
    }
}

.home-header {
    padding-bottom: 0px !important;
}

.room-cta {
    flex-direction: row;
    gap: 8px;
}

.room-cta a {
    font-size: 13px;
    padding: 10px 10px;
    min-height: 40px;
    border-radius: 12px;
}

.flash-social-proof {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #ff4d4f;
    font-weight: 600;
    animation: pulse 1.5s infinite;
}

@media (max-width: 360px) {
    .room-cta {
        flex-direction: row;
        gap: 6px;
    }

    .room-cta a {
        font-size: 12px;
        padding: 8px 8px;
        min-height: 38px;
    }
}

.live-activity {
    position: fixed;
    color: white;
    padding: 14px 16px;
    z-index: 99999;
    opacity: 0;
    transform: translateY(20px);
    transition: .4s;
    max-width: 300px;
    backdrop-filter: blur(10px);
}

.live-activity.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width:768px) {
    .live-activity {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: unset;
        font-size: 13px;
    }
}

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

.faq-close {
    cursor: pointer;
}

.faq-actions a {
    text-align: center;
}

.faq-actions a:first-child {
    color: white;
}

.faq-actions a:last-child {
    color: white;
}

.faq-answer-card {
    border-radius: 16px;
    margin-top: 12px;
}

.faq-answer-icon {
    font-size: 22px;
}

.ai-ping {
    position: absolute;
    border-radius: 50%;
    animation: ping 1.8s infinite;
}

@keyframes aiFloat {

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

    50% {
        transform: translateY(-5px);
    }
}

@keyframes ping {
    0% {
        box-shadow: 0 0 0 0 rgba(34,
                197,
                94,
                .7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(34,
                197,
                94,
                0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34,
                197,
                94,
                0);
    }
}

@media (max-width:768px) {
    .faq-floating {
        left: 12px;
        bottom: 12px;
    }

    .faq-toggle {
        width: 56px;
        height: 56px;
        font-size: 24px;
    }

    .faq-box {
        position: fixed;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        bottom: 82px;
        width: min(92vw,
                390px);
        border-radius: 26px;
    }

    .faq-box.show {
        transform: translateX(-50%) translateY(0);
    }

    .faq-header {
        padding: 18px;
    }

    .faq-header strong {
        font-size: 16px;
    }

    .faq-header p {
        font-size: 12px;
    }

    .faq-questions {
        padding: 16px;
        gap: 10px;
        overflow: visible;
    }

    .faq-questions button {
        font-size: 14px;
        line-height: 1.5;
        padding: 14px;
        border-radius: 16px;
    }

    .faq-answer {
        margin: 0 16px 16px;
        padding: 16px;
        font-size: 13px;
        line-height: 1.7;
        border-radius: 18px;
    }

    .faq-actions {
        padding: 0 16px 18px;
    }

    .faq-actions a {
        padding: 13px;
        font-size: 14px;
        border-radius: 14px;
    }

    .faq-questions {
        max-height: 320px;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .faq-questions::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 520px) {
    .faq-toggle {
        width: 45px;
        height: 45px;
        left: 14px;
        bottom: 75px;
    }

    .ai-icon {
        width: 22px;
        height: 22px;
    }

    .ai-ping {
        width: 8px;
        height: 8px;
    }

    .story-section {
        padding-bottom: 10px !important;
    }
}

.today-deal-box {
    margin: 20px 0;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg,
            #fff8e7,
            #fff3cd);
    border: 1px solid #ffe08a;
}

.today-deal-title {
    color: #b45309;
}

.deal-card {
    margin-top: 10px;
}

.deal-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 13px;
}

@media (max-width:520px) {
    .today-deal-box {
        padding: 14px;
    }

    .deal-time {
        font-size: 16px;
    }
}

.weekday-card {
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    margin-top: 12px;
    border: 1px solid #eee;
}

.weekday-room {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
}

.weekday-free {
    margin-bottom: 10px;
}

.combo-list {
    font-size: 14px;
    line-height: 1.8;
}

@media (max-width:520px) {
    .weekday-card {
        padding: 12px;
    }

    .combo-list {
        font-size: 13px;
    }
}

.today-deal-section {
    max-width: 1200px;
}

.deal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 700;
}

.deal-header span {
    font-size: 13px;
    color: #666;
}

.deal-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.deal-scroll::-webkit-scrollbar {
    display: none;
}

.deal-item {
    min-width: 260px;
    box-shadow: 0 8px 20px rgba(0,
            0,
            0,
            .06);
    border: 1px solid #eee;
}

.deal-time {
    font-weight: 700;
    color: #ef4444;
    margin-bottom: 10px;
}

.deal-combo {
    font-size: 14px;
    margin-bottom: 14px;
}

.deal-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    background: #111;
    color: white;
    font-weight: 600;
}

.deal-empty {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
}

.today-deal-section {
    margin: 24px auto;
    padding: 0 16px;
}

.today-deal-title {
    text-align: center;
}

.today-deal-title span {
    color: #ef4444;
}

.deal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.deal-card {
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
    border: 1px solid #eee;
}

.deal-room {
    margin-bottom: 12px;
}

.combo-row {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    margin-top: 8px;
}

.combo-label {
    font-weight: 600;
    color: #ef4444;
}

.combo-time {
    margin-top: 4px;
    font-size: 15px;
}

.deal-gift {
    margin-top: 12px;
    font-size: 13px;
    color: #16a34a;
    font-weight: 600;
}

#todayDealBox {
    padding: 10px;
}

.today-deal-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.deal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: #f6f6f6;
    font-size: 13px;
}

.deal-room {
    font-weight: 600;
    font-size: 13px;
}

.deal-time {
    font-size: 12px;
    opacity: 0.8;
}

@media (max-width: 520px) {
    .today-deal-title {
        font-size: 13px;
    }

    .deal-item {
        padding: 6px 8px;
        font-size: 12px;
    }

    .deal-room {
        font-size: 12px;
    }

    .deal-time {
        font-size: 11px;
    }
}

.deal-item.hot {
    border: 2px solid #ff4d4f;
    background: #fff5f5;
}

.deal-score {
    font-size: 11px;
    opacity: 0.7;
}

.hero {
    position: relative;
}

.flash-sale-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    width: 320px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .12),
        0 2px 8px rgba(0, 0, 0, .05);
    z-index: 99;
    display: none;
}

.flash-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #FFF1F4;
    color: #FF385C;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.flash-head {
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    color: #222;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.flash-sub {
    font-size: 14px;
    line-height: 1.5;
    color: #6A6A6A;
    margin-bottom: 14px;
}

.flash-info {
    background: #fafafa;
    padding: 14px;
    border-radius: 16px;
    margin-bottom: 14px;
}

.flash-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    color: #444;
}

.flash-row:last-child {
    margin-bottom: 0;
}

.flash-row b {
    font-size: 15px;
    color: #111;
}

.flash-btn {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    background: #FF385C;
    color: white;
    font-size: 15px;
    font-weight: 700;
    transition: all .25s ease;
}

.flash-btn:hover {
    background: #E43153;
    transform: translateY(-2px);
}

.flash-guide {
    background: #F7F7F7;
    padding: 12px;
    border-radius: 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 14px;
}

@media (max-width:768px) {
    .flash-sale-card {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 15px;
        border-radius: 18px;
    }

    .flash-head {
        font-size: 18px;
    }

    .flash-sub {
        font-size: 13px;
    }

    .flash-row {
        font-size: 13px;
    }

    .flash-row b {
        font-size: 14px;
    }

    .flash-btn {
        padding: 8px;
        font-size: 14px;
    }
}

.calendar-wrap {
    margin-bottom: 16px;
}

.package-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    background: #fafafa;
}

@media (max-width: 768px) {
    .package-card {
        padding: 12px;
    }
}

.day-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);
}

.package-option {
    flex-wrap: nowrap;
}

.group {
    flex-direction: column;
}

.package-block>div:first-child {
    font-size: 14px;
    font-weight: 700;
}

.suggest-card:hover {
    transform: none;
}

.calendar-hint {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 520px) {
    .section.suggested-section {
        margin-bottom: 20px !important;
    }

    .section.suggested-section h2 {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    #suggestedPackages {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px;
        width: 100%;
        overflow-x: hidden;
    }

    .suggest-card {
        display: flex;
        gap: 6px;
        padding: 10px !important;
        border-radius: 12px !important;
        margin-bottom: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .group {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .suggest-date {
        font-size: 13px !important;
        font-weight: 700;
    }

    .suggest-slot {
        font-size: 13px !important;
        margin-bottom: 8px;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .package-block {
        flex: 1;
        min-width: 0;
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .package-block>div:first-child {
        font-size: 10px !important;
        font-weight: 700;
    }

    .package-option {
        display: inline-flex;
        align-items: center;
        font-size: 10.5px !important;
        padding: 4px 6px;
        margin: 3px 2px 0 0;
        white-space: nowrap;
        max-width: 100%;
    }

    .calendar-hint {
        font-size: 12px;
        padding: 10px 12px;
        line-height: 1.4;
        border-radius: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #f9fafb, #ffffff);
        border: 1px solid #e5e7eb;
    }

    .suggest-card * {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .suggest-card:hover {
        transform: none;
    }
}

:root {
    --text: #111;
    --muted: #6b6b6b;
    --line: #eee;
    --chip: #f5f5f7;
    --primary: #ff385c;
    --accent: #ff9500;
}

* {
    box-sizing: border-box;
}

#roomGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
}

@media (max-width: 768px) {
    #roomGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 12px;
    }
}

@media (max-width: 520px) {
    #roomGrid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
    }
}

.room-card {
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.room-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.room-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
}

.room-content {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.room-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-title {
    font-size: 16px;
    font-weight: 700;
}

.room-rating {
    font-size: 12px;
    color: #777;
}

.room-features {
    margin-top: 8px;
}

.room-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.room-status-inline {
    white-space: nowrap;
}

.room-suggest-row {
    font-size: 12px;
    font-weight: 600;
}

.room-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.price {
    font-size: 16px;
    font-weight: 800;
}

.night {
    font-size: 12px;
    color: #777;
}

.room-btn {
    background: #ff385c;
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
}

.overnight-note {
    margin-left: 2px !important;
}

@media (max-width: 768px) {
    .room-image {
        height: 200px;
    }
}

@media (max-width: 520px) {
    .overnight-note {
        font-size: 7.5px !important;
        margin-left: 0px !important;
    }

    .room-image {
        height: 180px;
    }

    .room-content {
        padding: 12px;
    }

    .room-title {
        font-size: 15px;
    }

    .room-desc {
        font-size: 11.5px;
    }

    .room-slot-text {
        font-size: 12px;
    }

    .room-status-inline {
        font-size: 11px;
    }

    .room-suggest-row {
        font-size: 12px;
    }

    .room-btn {
        font-size: 13px;
        padding: 10px 13px;
    }
}

:root {
    --soft-shadow: 0 18px 45px rgba(45, 30, 20, .10);
    --soft-shadow-sm: 0 8px 22px rgba(45, 30, 20, .08);
}

.section-heading h2,
.section-header h2 {
    letter-spacing: -.02em;
}

.tab,
.room-tab,
.room-btn,
.mobile-book-btn,
.btn-view-calendar {
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.tab:hover,
.room-tab:hover,
.room-btn:hover,
.mobile-book-btn:hover,
.btn-view-calendar:hover {
    transform: translateY(-1px);
    box-shadow: var(--soft-shadow-sm);
}

.room-image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    background: #eee;
}

.room-image {
    display: block;
    transform: translateZ(0);
}

.package-option {
    margin-top: 6px;
}

.calendar-wrap {
    border: 1px solid rgba(135, 88, 69, .10);
    box-shadow: var(--soft-shadow-sm);
}

.day-header.selected {
    outline-offset: -2px;
}

@media (max-width: 520px) {
    .section.suggested-section {
        padding: 14px;
        border-radius: 20px;
    }

    #suggestedPackages {
        grid-template-columns: 1fr;
    }

    .room-card:hover {
        transform: none;
    }

    .floating-social a,
    .floating-contact a {
        animation: none !important;
    }
}

.room-features {
    flex-wrap: wrap;
    margin: 10px 0 6px;
}

.amenity-item {
    gap: 8px;
}

.calendar-wrap {
    justify-content: flex-start !important;
    scrollbar-width: thin;
}

.calendar-legend {
    left: 0;
    z-index: 3;
    backdrop-filter: blur(10px);
}

.calendar-hint {
    left: 0;
    z-index: 3;
    font-weight: 600;
}

.day-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 54px;
    border-radius: 0 !important;
    border-right: 1px solid rgba(135, 88, 69, .08);
}

.day-header.selected {
    outline: none !important;
}

.hour-cell,
.slot-cell {
    border-color: rgba(135, 88, 69, .075) !important;
}

.slot-cell {
    font-size: 11px;
}

.free-cell::after {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #58c985;
    opacity: .42;
}

.section.suggested-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggest-card-v2 {
    border: 1px solid rgba(135, 88, 69, .12);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 34px rgba(45, 30, 20, .08);
}

.suggest-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.suggest-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 7px 10px;
    background: #111827;
    color: white;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.suggest-slot-v2 {
    color: #6b4a3d;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
    line-height: 1.35;
}

.package-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.package-block-v2 {
    min-width: 0;
    border: 1px solid rgba(255, 56, 92, .10);
    background: linear-gradient(180deg, #ffffff, #fff8f4);
}

.package-title-v2 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
}

.package-title-v2 strong {
    color: #1f2937;
    font-weight: 900;
}

.package-title-v2 span {
    color: #ff385c;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.package-time-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    border: none;
    border-radius: 999px;
    margin-top: 6px;
    background: #fff;
    color: #7d5344;
    box-shadow: inset 0 0 0 1px rgba(125, 83, 68, .10);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}

.package-tag-night {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 6px;
    background: #1f2937;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.faq-box {
    gap: 0;
    overscroll-behavior: contain;
}

.faq-answer.has-answer {
    box-shadow: 0 10px 24px rgba(45, 30, 20, .08);
}

.faq-answer-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.faq-answer-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
}

.faq-close-btn {
    width: 100%;
    border: none;
    padding: 10px 12px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .faq-box.show {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 78px !important;
        width: auto !important;
        max-height: min(78vh, 680px) !important;
        border-radius: 28px !important;
        overflow: hidden auto !important;
        box-shadow: 0 24px 80px rgba(0, 0, 0, .28) !important;
    }

    .faq-box.show::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background: rgba(17, 24, 39, .34);
        backdrop-filter: blur(4px);
    }
}

@media (max-width: 430px) {

    .room-grid,
    #roomGrid {
        gap: 16px !important;
    }

    .room-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    .room-features span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding: 8px 7px !important;
        font-size: 11px !important;
        text-align: center;
        white-space: nowrap;
    }

    .amenities {
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
    }

    .amenity-item {
        padding: 11px 10px !important;
        border-radius: 14px !important;
        font-size: 12px;
    }

    #suggestedPackages {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .suggest-card-v2 {
        padding: 11px;
        border-radius: 22px;
    }

    .suggest-card-head {
        align-items: center;
        margin-bottom: 10px;
    }

    .suggest-date-pill {
        font-size: 11px;
        padding: 6px 8px;
    }

    .suggest-slot-v2 {
        font-size: 11px;
    }

    .package-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .package-block-v2 {
        padding: 9px 8px;
        border-radius: 17px;
    }

    .package-title-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 7px;
    }

    .package-title-v2 strong {
        font-size: 14px;
    }

    .package-title-v2 span {
        font-size: 11px;
    }

    .package-time-v2 {
        font-size: 10.5px;
        padding: 7px 5px;
        letter-spacing: -.02em;
    }

    .availability-grid {
        min-width: 548px !important;
        width: max-content !important;
        grid-template-columns: 52px repeat(7, 70px) !important;
    }

    .sticky-corner,
    .hour-cell {
        width: 52px !important;
        min-width: 52px !important;
    }

    .hour-cell,
    .slot-cell {
        height: 38px !important;
        min-height: 38px !important;
    }

    .day-header {
        min-height: 48px;
        font-size: 10px !important;
        padding: 6px 3px !important;
    }
}

.calendar-legend {
    position: static !important;
    min-width: 0 !important;
    border-radius: 16px !important;
}

.calendar-hint {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    line-height: 1.35 !important;
}

.section.suggested-section {
    border-radius: 22px !important;
}

.section.suggested-section h2 {
    font-size: 18px !important;
}

#suggestedPackages {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 10px !important;
}

.suggest-card-v2 {
    border-radius: 22px !important;
    padding: 12px !important;
}

.suggest-card-head {
    margin-bottom: 10px !important;
}

.package-grid-v2 {
    gap: 8px !important;
}

.package-block-v2 {
    border-radius: 18px !important;
    padding: 10px !important;
}

.package-title-v2 strong {
    font-size: 15px !important;
}

.package-time-v2 {
    font-size: 11px !important;
    padding: 6px 7px !important;
}

body.faq-open::after {
    position: fixed;
    inset: 0;
    z-index: 99990;
    background: rgba(17, 24, 39, .42);
    backdrop-filter: blur(6px);
}

.faq-header {
    flex-shrink: 0;
}

.faq-answer {
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}

.faq-questions {
    -webkit-overflow-scrolling: touch;
}

.faq-actions {
    flex-shrink: 0;
    padding-bottom: 14px !important;
}

@media (max-width: 768px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tabs {
        margin: 18px 0 14px !important;
        gap: 7px !important;
    }

    .tab,
    .tab.active,
    .room-tab {
        font-size: 12px !important;
        padding: 9px 12px !important;
    }

    .calendar-legend {
        padding: 7px !important;
    }

    .calendar-hint {
        text-align: center;
    }

    .availability-grid {
        border-radius: 18px !important;
    }

    .slot-cell {
        font-size: 0 !important;
    }

    .section.suggested-section {
        padding: 11px !important;
        border-radius: 20px !important;
    }

    .section.suggested-section h2 {
        margin-bottom: 8px !important;
    }

    #suggestedPackages {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .suggest-card-v2 {
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .suggest-date-pill {
        font-size: 10px !important;
        padding: 5px 7px !important;
    }

    .suggest-slot-v2 {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .package-grid-v2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .package-block-v2 {
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .package-title-v2 {
        gap: 3px !important;
        margin-bottom: 5px !important;
    }

    .package-title-v2 strong {
        font-size: 13px !important;
    }

    .package-title-v2 span {
        font-size: 10px !important;
    }

    .package-time-v2 {
        font-size: 9.5px !important;
        padding: 6px 4px !important;
        letter-spacing: -.03em;
    }

    .package-tag-night {
        font-size: 9px !important;
        padding: 1px 5px !important;
        margin-bottom: 4px;
    }

    .faq-header {
        border-radius: 0 !important;
    }

    .faq-answer {
        order: 1 !important;
    }

    .faq-answer-header {
        gap: 7px !important;
        margin-bottom: 7px !important;
    }

    .faq-answer-icon {
        font-size: 18px !important;
    }

    .faq-questions {
        order: 2 !important;
        display: grid !important;
    }

    .faq-actions {
        order: 3 !important;
        gap: 8px !important;
    }
}

@media (max-width: 380px) {
    .package-title-v2 strong {
        font-size: 12px !important;
    }

    .package-time-v2 {
        font-size: 9px !important;
    }
}

.section.suggested-section {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 12px !important;
    margin-bottom: 18px !important;
    overflow: visible !important;
}

.section.suggested-section h2 {
    color: #222 !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
}

#suggestedPackages {
    display: block !important;
}

.group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 8px 0 8px !important;
}

.suggest-date {
    margin-right: 0 !important;
    font-weight: 800 !important;
    color: #111827 !important;
    font-size: 15px !important;
    white-space: nowrap;
}

.suggest-slot {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
}

.suggest-card {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
    gap: 10px !important;
    justify-content: initial !important;
    align-items: stretch !important;
    border-radius: 22px !important;
    background: white !important;
    margin-bottom: 16px !important;
    padding: 12px !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .05) !important;
}

.package-block {
    margin-top: 0 !important;
    padding: 13px !important;
    border-radius: 16px !important;
    background: #f9fafb !important;
    border: 1px solid #f1f5f9 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.package-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: #111827 !important;
    margin-bottom: 8px !important;
}

.package-option {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #ECFDF5 !important;
    color: #047857 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 3px 0 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.overnight-note {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    padding: 1px 6px !important;
    margin: 0 2px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    background: #fff7ed !important;
    color: #c2410c !important;
    border: 1px solid #fed7aa !important;
    vertical-align: middle !important;
}

.calendar-wrap {
    width: 100% !important;
    display: block !important;
    padding: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

.calendar {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    overflow: visible !important;
}

.calendar-legend {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 0 15px !important;
    background: transparent !important;
    border: 0 !important;
    width: 100% !important;
}

.legend-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.legend {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
}

.calendar-hint {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    margin-bottom: 10px !important;
    border: 1px solid #eef2f7 !important;
    text-align: left !important;
}

.availability-grid {
    margin-inline: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}

.sticky-corner {
    background: #fff !important;
}

.day-header {
    background: #fff !important;
    color: #222 !important;
    cursor: pointer !important;
    transition: .2s !important;
}

.day-header.today {
    background: #d89d79 !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.day-header.selected {
    background: linear-gradient(135deg, #111827, #374151) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .2) !important;
}

.hour-cell {
    background: #fff !important;
    color: #4b5563 !important;
    font-weight: 700 !important;
    border-right: 1px solid #eee !important;
    border-bottom: 1px solid #eee !important;
}

.slot-cell {
    border-right: 1px solid #f2f2f2 !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

.free-cell::after {
    display: none !important;
    content: none !important;
}

.booked-cell {
    font-weight: 800 !important;
    line-height: 1 !important;
}

.room-features span,
.amenity-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center !important;
}

body.faq-open::after {
    content: none !important;
    display: none !important;
}

.faq-toggle {
    cursor: pointer !important;
    z-index: 9999 !important;
}

.faq-box,
.faq-box.show {
    top: auto !important;
    z-index: 99999 !important;
    transform-origin: initial !important;
}

.faq-box {
    overflow-y: auto !important;
}

.faq-box.show {
    display: block !important;
}

.faq-box.show::before {
    content: none !important;
    display: none !important;
}

.faq-header p {
    opacity: .9 !important;
}

.faq-questions {
    flex-direction: column !important;
}

.faq-questions button {
    cursor: pointer !important;
}

.faq-answer {
    overflow: visible !important;
}

.faq-actions a {
    padding: 14px !important;
}

@media (max-width: 768px) {
    .section.suggested-section h2 {
        line-height: 1.35 !important;
    }

    .group {
        gap: 8px !important;
        margin: 6px 0 7px !important;
    }

    .suggest-date,
    .suggest-slot {
        font-size: 12px !important;
    }

    .suggest-card {
        margin-bottom: 12px !important;
    }

    .package-option {
        width: 100% !important;
        margin: 2px 0 !important;
        letter-spacing: -.02em;
    }

    .overnight-note {
        font-size: 8.5px !important;
        padding: 1px 4px !important;
    }

    .calendar-wrap {
        padding: 10px !important;
        overflow-x: hidden !important;
    }

    .calendar {
        width: 100% !important;
    }

    .calendar-legend {
        justify-content: flex-start !important;
        gap: 14px !important;
        margin-bottom: 10px !important;
    }

    .legend-item {
        font-size: 11px !important;
    }

    .calendar-hint {
        font-size: 11px !important;
        padding: 8px 9px !important;
    }

    .availability-grid {
        margin-inline: auto !important;
    }

    .day-header {
        min-height: 38px !important;
        padding: 4px 1px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .day-header strong {
        font-size: 10px !important;
    }

    .hour-cell,
    .slot-cell {
        height: 31px !important;
        min-height: 31px !important;
    }

    .hour-cell {
        font-size: 8.5px !important;
        letter-spacing: -.04em !important;
    }

    .booked-cell {
        font-size: 11px !important;
    }

    .faq-toggle {
        width: 45px !important;
    }

    .faq-box {
        position: fixed !important;
        left: 50% !important;
        top: auto !important;
        right: auto !important;
        bottom: 82px !important;
        width: min(92vw, 390px) !important;
        max-height: 75vh !important;
        border-radius: 26px !important;
        overflow-y: auto !important;
    }

    .faq-header p {
        font-size: 12px !important;
    }

    .faq-answer {
        line-height: 1.7 !important;
    }

    .faq-actions a {
        padding: 13px !important;
    }
}

@media (max-width: 380px) {

    .suggest-date,
    .suggest-slot {
        font-size: 11px !important;
    }

    .package-title {
        font-size: 11px !important;
    }

    .package-option {
        font-size: 9.5px !important;
    }

    .availability-grid {
        grid-template-columns: 38px repeat(7, minmax(0, 1fr)) !important;
    }

    .sticky-corner,
    .hour-cell {
        width: 38px !important;
        min-width: 38px !important;
    }

    .hour-cell,
    .slot-cell {
        height: 29px !important;
        min-height: 29px !important;
    }

    .day-header {
        font-size: 8.5px !important;
    }

    .booked-cell {
        font-size: 10px !important;
    }
}

.room-features:empty,
.amenities:empty {
    display: none !important;
}

.room-features span,
.amenity-item {
    min-height: 42px !important;
    padding: 11px 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fffaf7, #ffffff) !important;
    border: 1px solid rgba(135, 88, 69, .14) !important;
    box-shadow: 0 8px 18px rgba(45, 30, 20, .055) !important;
    color: #4b3328 !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.package-title .overnight-note:empty {
    display: none !important;
}

body.faq-open {
    overflow: hidden !important;
    touch-action: none;
}

.faq-answer:not(.has-answer) {
    min-height: auto !important;
}

.faq-close-btn {
    cursor: pointer !important;
}

@media (max-width: 768px) {
    body.faq-open::after {
        content: "" !important;
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99990 !important;
        background: rgba(17, 24, 39, .28) !important;
        backdrop-filter: blur(2px) !important;
    }

    .faq-floating {
        position: fixed !important;
    }

    .faq-box,
    .faq-box.show {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 100001 !important;
        box-shadow: 0 28px 90px rgba(0, 0, 0, .30) !important;
    }

    .faq-box.show {
        display: block !important;
    }

    .faq-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
    }

    .faq-answer.has-answer {
        max-height: 28vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 380px) {

    .faq-box,
    .faq-box.show {
        width: calc(100vw - 22px) !important;
        max-height: 80vh !important;
    }
}

body.is-loading #roomGrid {
    min-height: 360px;
}

#roomGrid.loading-skeleton {
    align-items: stretch;
}

.room-skeleton-card {
    pointer-events: none;
    user-select: none;
}

.room-skeleton-media,
.room-skeleton-line,
.room-skeleton-pill,
.room-skeleton-button {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #f3eee9 0%, #faf7f4 45%, #f3eee9 100%);
    background-size: 220% 100%;
    animation: skeletonShimmer 1.25s ease-in-out infinite;
}

.room-skeleton-media {
    height: 270px;
    border-radius: 0;
}

.room-skeleton-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.room-skeleton-line {
    height: 14px;
    border-radius: 999px;
}

.room-skeleton-line.title {
    width: 62%;
    height: 20px;
}

.room-skeleton-line.desc {
    width: 92%;
}

.room-skeleton-line.short {
    width: 58%;
}

.room-skeleton-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.room-skeleton-pill {
    width: 76px;
    height: 28px;
    border-radius: 999px;
}

.room-skeleton-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.room-skeleton-button {
    width: 86px;
    height: 38px;
    border-radius: 10px;
}

.room-badge.today-available {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid rgba(4, 120, 87, .12);
}

@keyframes skeletonShimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

@media (max-width: 768px) {
    .room-skeleton-media {
        height: 200px;
    }
}

@media (max-width: 520px) {
    body.is-loading #roomGrid {
        min-height: 280px;
    }

    .room-skeleton-media {
        height: 180px;
    }

    .room-skeleton-body {
        padding: 12px;
        gap: 11px;
    }

    .room-skeleton-line.title {
        height: 17px;
    }

    .room-skeleton-pill {
        height: 24px;
        width: 66px;
    }

    .room-badge.today-available {
        font-size: 11px;
        padding: 8px 10px;
    }
}

.home-detail-container {
    max-width: 1180px !important;
}

#coverImage.hero-image {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: 520px;
    object-fit: cover;
    border-radius: 28px !important;
    box-shadow: 0 18px 45px rgba(82, 52, 40, .14) !important;
}

.home-header {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(216, 157, 121, .18);
    border-radius: 24px;
    padding: 20px 22px;
    box-shadow: 0 12px 32px rgba(82, 52, 40, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.home-header #homeName {
    letter-spacing: -.7px;
}

.home-header .price {
    color: #875845 !important;
}

.room-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px !important;
    padding: 10px 13px;
    background: #fff8f2;
    border: 1px solid rgba(216, 157, 121, .22);
    border-radius: 999px;
    color: #7d5344 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.detail-layout {
    align-items: start !important;
}

.detail-main .section {
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(0, 0, 0, .055) !important;
    border-radius: 24px !important;
    box-shadow: 0 12px 30px rgba(82, 52, 40, .07) !important;
    padding: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 22px !important;
}

.detail-main .section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px !important;
    color: #2b211d !important;
    font-size: 22px !important;
    letter-spacing: -.3px;
}

.description,
.home-content {
    color: #4b4541 !important;
    line-height: 1.85 !important;
}

.amenities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.amenity-item {
    min-height: 52px !important;
    padding: 13px 15px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(216, 157, 121, .18) !important;
    background: linear-gradient(180deg, #ffffff 0%, #fff8f2 100%) !important;
    color: #3b302b !important;
    box-shadow: 0 8px 18px rgba(82, 52, 40, .055) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}

#pricingPreview {
    gap: 10px !important;
}

.price-preview-card {
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fff 0%, #fff7f2 100%) !important;
    border: 1px solid rgba(216, 157, 121, .18) !important;
    box-shadow: 0 8px 18px rgba(82, 52, 40, .045) !important;
}

.price-preview-label {
    color: #7a6f69 !important;
    font-weight: 600 !important;
}

.price-preview-value {
    color: #875845 !important;
    letter-spacing: -.4px;
}

.pricing-details summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 14px !important;
    padding: 12px 14px;
    border-radius: 999px;
    background: #f7f1ed;
    color: #875845 !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.pricing-details summary::-webkit-details-marker {
    display: none;
}

.pricing-details summary::after {
    content: "⌄";
    margin-left: 8px;
    font-size: 14px;
}

.pricing-details[open] summary::after {
    content: "⌃";
}

.gallery-airbnb {
    margin-bottom: 0 !important;
}

.gallery-main img,
.gallery-side img,
.gallery-last img {
    box-shadow: 0 10px 24px rgba(82, 52, 40, .08) !important;
}

.gallery-overlay {
    background: rgba(0, 0, 0, .48) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 768px) {
    #homeDetailPage {
        padding-bottom: 94px !important;
    }

    .home-detail-container {
        width: 100% !important;
        padding: 12px 12px 20px !important;
    }

    .back-btn {
        position: sticky;
        top: 8px;
        z-index: 60;
        min-height: 38px;
        padding: 9px 14px !important;
        margin-bottom: 10px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .92) !important;
        border: 1px solid rgba(0, 0, 0, .06) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .08) !important;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: 13px !important;
    }

    #coverImage.hero-image {
        aspect-ratio: 4 / 3;
        max-height: none;
        border-radius: 22px !important;
        box-shadow: 0 12px 28px rgba(82, 52, 40, .12) !important;
    }

    .home-header {
        margin: -18px 8px 14px !important;
        position: relative;
        z-index: 2;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    .home-header #homeName,
    #homeName {
        font-size: 24px !important;
        line-height: 1.22 !important;
        margin-bottom: 8px !important;
    }

    .home-header .price,
    .price {
        font-size: 17px !important;
        line-height: 1.35 !important;
    }

    .room-cta {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        margin-top: 13px !important;
    }

    .room-cta a {
        min-height: 42px !important;
        padding: 10px 8px !important;
        border-radius: 14px !important;
        font-size: 12.5px !important;
        white-space: nowrap;
    }

    .room-trust {
        display: block !important;
        width: 100%;
        margin-top: 10px !important;
        padding: 10px 12px !important;
        border-radius: 16px !important;
        font-size: 12.5px !important;
        text-align: left;
    }

    .detail-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .detail-sidebar {
        order: 0 !important;
        width: 100% !important;
    }

    .detail-main {
        order: 1 !important;
        width: 100% !important;
    }

    #pricingPreview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin-bottom: 10px !important;
    }

    .price-preview-card {
        min-height: 74px;
        padding: 11px 10px !important;
        border-radius: 17px !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .price-preview-label {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .price-preview-value {
        font-size: 17px !important;
    }

    .pricing-details summary {
        min-height: 40px;
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    .price-row {
        padding: 11px 0 !important;
    }

    .price-label,
    .price-value {
        font-size: 13px !important;
    }

    .detail-main .section {
        padding: 17px !important;
        border-radius: 22px !important;
        margin-bottom: 12px !important;
    }

    .detail-main .section h2 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .description,
    .home-content {
        font-size: 14.5px !important;
        line-height: 1.78 !important;
    }

    .amenities {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .amenity-item {
        min-height: 50px !important;
        padding: 11px 10px !important;
        border-radius: 16px !important;
        font-size: 12.8px !important;
    }

    .gallery-airbnb {
        gap: 9px !important;
    }

    .gallery-main img {
        height: auto !important;
        aspect-ratio: 4 / 3;
        border-radius: 18px !important;
    }

    .gallery-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .gallery-side img,
    .gallery-last img {
        height: auto !important;
        aspect-ratio: 1 / 1;
        border-radius: 16px !important;
    }

    .gallery-overlay {
        border-radius: 16px !important;
        font-size: 15px !important;
    }

    .mobile-price-wrap strong {
        color: #875845 !important;
        font-size: 16px !important;
    }
}

@media (max-width: 390px) {
    .home-detail-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .home-header {
        margin-left: 5px !important;
        margin-right: 5px !important;
        padding: 14px !important;
    }

    .home-header #homeName,
    #homeName {
        font-size: 22px !important;
    }

    .room-cta a {
        font-size: 12px !important;
        letter-spacing: -.1px;
    }

    .detail-main .section {
        border-radius: 20px !important;
    }

    .amenity-item {
        min-height: 48px !important;
        font-size: 12.2px !important;
    }
}

.room-badge.today-available.combo4,
.room-badge.combo4 {
    background: linear-gradient(135deg, #ff385c, #d89d79) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(255, 56, 92, .28) !important;
}

.quick-combo-btn,
.best-deal-btn {
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.quick-combo-btn {
    margin-top: 10px;
    padding: 10px 12px;
    min-height: 38px;
    background: #fff;
    color: #875845;
    border: 1px solid rgba(135, 88, 69, .18);
    box-shadow: 0 8px 18px rgba(135, 88, 69, .08);
    font-size: 12px;
}

.quick-combo-btn.primary,
.best-deal-btn {
    background: linear-gradient(135deg, #ff385c, #d89d79) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 12px 26px rgba(255, 56, 92, .22) !important;
}

.quick-combo-btn:hover,
.best-deal-btn:hover {
    transform: translateY(-1px);
    opacity: .94;
}

.package-block.preferred-package {
    background: linear-gradient(180deg, #fff7f3 0%, #ffffff 100%) !important;
    border: 1px solid rgba(255, 56, 92, .22) !important;
    box-shadow: 0 12px 30px rgba(255, 56, 92, .10) !important;
    position: relative;
}

.package-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.preferred-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    background: #ff385c;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(255, 56, 92, .18);
}

.package-subcopy {
    margin: 0 0 8px;
    color: #7c5a4d;
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 600;
}

.best-today-deal {
    display: none;
    margin-top: 12px;
}

.best-today-deal.show {
    display: block;
}

.best-deal-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, #fff7f3, #ffffff);
    border: 1px solid rgba(216, 157, 121, .32);
    box-shadow: 0 12px 30px rgba(135, 88, 69, .10);
}

.best-deal-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ff385c;
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    margin-bottom: 8px;
}

.best-deal-title {
    font-size: 16px;
    font-weight: 900;
    color: #111827;
    line-height: 1.25;
}

.best-deal-meta {
    margin-top: 4px;
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.best-deal-btn {
    min-height: 42px;
    padding: 12px 15px;
    font-size: 12.5px;
}

.booking-mode-note {
    display: none;
}

@media (max-width: 768px) {
    .section.suggested-section h2 {
        font-size: 13px !important;
    }

    .suggest-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        padding: 10px !important;
        border-radius: 20px !important;
    }

    .package-block {
        padding: 11px !important;
        border-radius: 16px !important;
    }

    .package-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .package-title {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }

    .package-subcopy {
        font-size: 11px;
        margin-bottom: 7px;
    }

    .package-option {
        width: 100%;
        font-size: 11.5px !important;
        padding: 8px 8px !important;
    }

    .quick-combo-btn {
        width: 100%;
        min-height: 36px;
        padding: 9px 8px;
        font-size: 11.5px;
    }

    .room-suggest-row {
        align-items: flex-start !important;
    }

    .room-quick-book-btn {
        min-height: 29px;
        padding: 7px 9px;
        font-size: 10.5px;
    }

    .best-deal-card {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 13px;
        border-radius: 20px;
    }

    .best-deal-title {
        font-size: 15px;
    }

    .best-deal-meta {
        font-size: 12px;
    }

    .best-deal-btn {
        width: 100%;
        min-height: 42px;
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .suggest-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
        padding: 8px !important;
    }

    .package-block {
        padding: 10px 8px !important;
    }

    .preferred-label {
        font-size: 9.5px;
        padding: 3px 6px;
    }
}

.room-badge.tomorrow-available {
    background: linear-gradient(135deg, #384152, #111827) !important;
    color: #fff !important;
}

.suggest-fallback-note {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #fff7ed;
    color: #9a3412;
    font-weight: 700;
    line-height: 1.45;
    border: 1px solid #fed7aa;
}

#roomGrid,
#suggestedPackages,
.blog-grid,
.review-grid,
.gallery-detail {
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
}

.room-card,
.blog-card,
.review-card,
.suggest-card,
.suggest-card-v2 {
    contain: layout paint;
}

html,
body {
    overscroll-behavior-x: none;
}

.calendar-wrap,
.room-tabs,
.tabs {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

@media (max-width: 768px) {

    html,
    body {
        scroll-behavior: auto !important;
        overflow-x: hidden !important;
    }

    .room-card,
    .blog-card,
    .review-card,
    .gallery-detail img,
    .suggest-card,
    .suggest-card-v2 {
        transition-duration: .12s !important;
        will-change: auto !important;
    }

    .room-card:hover,
    .blog-card:hover,
    .review-card:hover,
    .gallery-detail img:hover,
    .suggest-card:hover,
    .suggest-card-v2:hover {
        transform: none !important;
    }

    .floating-contact a,
    .floating-social a,
    .phone-btn {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

#homeDetailPage {
    overflow-x: clip;
}

#homeDetailPage .home-detail-container,
#homeDetailPage .detail-layout,
#homeDetailPage .gallery-airbnb {
    contain: layout paint;
}

#pricingPreview {
    min-height: 76px;
}

#coverImage.hero-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(110deg, #f5eee8 8%, #fff7f1 18%, #f1e0d7 33%);
    background-size: 200% 100%;
    transition: opacity .2s ease, filter .2s ease;
    will-change: opacity;
}

#coverImage.is-loading {
    opacity: .45;
    filter: blur(8px);
    animation: detailImageShimmer 1.1s linear infinite;
}

#coverImage.is-loaded {
    opacity: 1;
    filter: none;
    animation: none;
}

@keyframes detailImageShimmer {
    to {
        background-position-x: -200%;
    }
}

.gallery-loading,
.price-preview-skeleton {
    min-height: 150px;
    border-radius: 22px;
    background: linear-gradient(110deg, #f7f1ed 8%, #fff 18%, #f2e5dd 33%);
    background-size: 200% 100%;
    animation: detailImageShimmer 1.1s linear infinite;
}

.price-preview-skeleton {
    min-height: 76px;
    border-radius: 18px;
}

.gallery-airbnb img {
    background: #f7f1ed;
}

.home-detail-open .live-activity {
    pointer-events: none;
    z-index: 100040 !important;
}

@media (max-width: 768px) {
    .home-detail-open .live-activity {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
        max-width: none !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        padding: 11px 13px !important;
        border-radius: 16px !important;
    }

    .home-detail-open .floating-contact {
        display: none !important;
    }

    #homeDetailPage .gallery-airbnb {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #homeDetailPage .gallery-main img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    #homeDetailPage .gallery-side {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        grid-template-rows: none !important;
        gap: 8px !important;
    }

    #homeDetailPage .gallery-side img,
    #homeDetailPage .gallery-last img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
    }

    #homeDetailPage .section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 220px;
    }
}

@media (max-width: 520px) {
    #homeDetailPage .gallery-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #pricingPreview {
        min-height: 128px;
    }
}

@media (hover: none) and (pointer: coarse) {

    .room-card:hover,
    .gallery-detail img:hover,
    .gallery-main img:hover,
    .gallery-side img:hover,
    .room-cta a:hover {
        transform: none !important;
    }
}

body.home-detail-open {
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
}

#homeDetailPage .detail-layout {
    align-items: start !important;
}

#homeDetailPage .gallery-airbnb {
    margin-bottom: 0 !important;
    transform: translateZ(0);
}

#homeDetailPage .gallery-airbnb img,
#coverImage.hero-image {
    backface-visibility: hidden;
    transform: translateZ(0);
}

.home-detail-open .room-card,
.home-detail-open .blog-card,
.home-detail-open .review-card,
.home-detail-open .story-section,
.home-detail-open .highlights-section {
    content-visibility: hidden;
    contain-intrinsic-size: 1px 1px;
}

@media (max-width: 768px) {
    body.home-detail-open #homeDetailPage .detail-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    body.home-detail-open #homeDetailPage .detail-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.home-detail-open #homeDetailPage .detail-main .section,
    body.home-detail-open #homeDetailPage .section {
        content-visibility: visible !important;
        contain-intrinsic-size: auto !important;
        contain: layout paint !important;
        margin-bottom: 18px !important;
    }

    body.home-detail-open #homeDetailPage .section:last-child {
        margin-bottom: 4px !important;
    }

    body.home-detail-open #homeDetailPage .gallery-airbnb {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 520px) {
    body.home-detail-open #homeDetailPage .home-detail-container {
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.home-detail-open #homeDetailPage .gallery-side {
        gap: 7px !important;
    }
}

body.home-detail-open .story-section,
body.home-detail-open .highlights-section,
body.home-detail-open .stats-bar,
body.home-detail-open #gallery.page,
body.home-detail-open #homes.page,
body.home-detail-open #calendarPage.page {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

body.home-detail-open #homeDetailPage {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(180deg, #fffaf6 0%, #ffffff 42%, #ffffff 100%) !important;
}

body.home-detail-open #homeDetailPage .home-detail-container {
    max-width: 1180px !important;
    width: min(1180px, calc(100% - 32px)) !important;
    padding: 22px 0 0 !important;
    margin: 0 auto !important;
}

body.home-detail-open .back-btn {
    margin: 0 0 14px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid rgba(135, 88, 69, .12) !important;
    box-shadow: 0 10px 26px rgba(135, 88, 69, .08) !important;
}

body.home-detail-open #coverImage.hero-image {
    height: clamp(360px, 42vw, 520px) !important;
    max-height: none !important;
    border-radius: 32px !important;
    margin: 0 !important;
    box-shadow: 0 18px 44px rgba(73, 45, 33, .16) !important;
}

body.home-detail-open .home-header {
    position: relative;
    z-index: 2;
    margin: -54px auto 24px !important;
    width: min(980px, calc(100% - 40px));
    padding: 24px 28px !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(73, 45, 33, .14) !important;
    border: 1px solid rgba(135, 88, 69, .10);
}

body.home-detail-open #homeName {
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.12 !important;
    color: #6f4635 !important;
    margin-bottom: 8px !important;
}

body.home-detail-open #price.price {
    font-size: clamp(18px, 2.1vw, 28px) !important;
    color: #d9655b !important;
    margin-bottom: 14px !important;
}

body.home-detail-open .room-cta {
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

body.home-detail-open .room-cta a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

body.home-detail-open .room-trust {
    margin-top: 12px !important;
    color: #7b675f !important;
    line-height: 1.55 !important;
}

body.home-detail-open #homeDetailPage .detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 24px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 0 0 !important;
}

body.home-detail-open #homeDetailPage .detail-main {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

body.home-detail-open #homeDetailPage .section {
    margin: 0 !important;
    padding: 22px !important;
    border-radius: 26px !important;
    background: #fff !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    box-shadow: 0 14px 36px rgba(73, 45, 33, .07) !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

body.home-detail-open #homeDetailPage .section h2 {
    margin: 0 0 14px !important;
    color: #6f4635 !important;
}

body.home-detail-open #homeDetailPage .description {
    max-width: none !important;
    color: #53443e !important;
}

body.home-detail-open #homeDetailPage .amenities {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.home-detail-open #homeDetailPage .amenity-item {
    border-radius: 16px !important;
    background: #fff8f4 !important;
    border-color: rgba(135, 88, 69, .12) !important;
}

body.home-detail-open #homeDetailPage .detail-sidebar {
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
}

body.home-detail-open #homeDetailPage #galleryImages,
body.home-detail-open #homeDetailPage .gallery-airbnb {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    body.home-detail-open #homeDetailPage .home-detail-container {
        width: min(100% - 24px, 900px) !important;
    }

    body.home-detail-open #homeDetailPage .detail-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    body.home-detail-open #homeDetailPage .detail-sidebar {
        position: static !important;
        order: -1 !important;
    }

    body.home-detail-open #homeDetailPage .amenities {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    body.home-detail-open {
        overscroll-behavior-y: none !important;
    }

    body.home-detail-open #homeDetailPage .home-detail-container {
        width: 100% !important;
        padding: 10px 10px 0 !important;
    }

    body.home-detail-open .back-btn {
        margin-left: 2px !important;
    }

    body.home-detail-open #coverImage.hero-image {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        border-radius: 24px !important;
    }

    body.home-detail-open .home-header {
        width: calc(100% - 16px) !important;
        margin: -32px auto 14px !important;
        padding: 18px !important;
        border-radius: 24px !important;
    }

    body.home-detail-open #homeName {
        font-size: 27px !important;
    }

    body.home-detail-open #price.price {
        font-size: 17px !important;
    }

    body.home-detail-open .room-cta {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    body.home-detail-open .room-cta a {
        width: 100% !important;
        padding: 11px 12px !important;
        font-size: 13px !important;
    }

    body.home-detail-open #homeDetailPage .detail-layout {
        gap: 12px !important;
    }

    body.home-detail-open #homeDetailPage .detail-main {
        gap: 12px !important;
    }

    body.home-detail-open #homeDetailPage .section {
        padding: 16px !important;
        border-radius: 22px !important;
    }

    body.home-detail-open #pricingPreview {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.home-detail-open #homeDetailPage .gallery-airbnb {
        gap: 8px !important;
    }

    body.home-detail-open #homeDetailPage .gallery-side {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.home-detail-open .footer {
        margin-top: 8px !important;
    }
}


@media (max-width: 768px) {
    body {
        touch-action: pan-y;
    }

    body.home-detail-open #homeDetailPage,
    body.home-detail-open #homeDetailPage * {
        scroll-margin-top: 0 !important;
    }
}

body.home-detail-open #homeDetailPage .home-detail-container {
    padding-bottom: 28px !important;
}

body.home-detail-open #homeDetailPage .detail-layout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body.home-detail-open #homeDetailPage .detail-main .section:last-child {
    margin-bottom: 0 !important;
}

body.home-detail-open .footer {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {
    body.home-detail-open #homeDetailPage .home-detail-container {
        padding-bottom: 22px !important;
    }
}

@media (max-width: 768px) {
    body.home-detail-open #homeDetailPage .home-detail-container {
        padding-bottom: 16px !important;
    }

    body.home-detail-open #homeDetailPage .detail-main .section:last-child {
        padding-bottom: 16px !important;
    }
}

html.calendar-route:not(.app-ready) #homes {
    display: none !important;
}

html.calendar-route:not(.app-ready) #calendarPage {
    display: block !important;
}

html.calendar-route:not(.app-ready) #homesTab {
    background: #fff !important;
    color: #59473e !important;
}

html.calendar-route:not(.app-ready) #calendarTab {
    background: linear-gradient(135deg, var(--brand-brown, #875845), var(--brand-terracotta, #d89d79)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(135, 88, 69, .18) !important;
}

html.calendar-route:not(.app-ready) #suggestedPackages,
html.calendar-route:not(.app-ready) #roomTabs,
html.calendar-route:not(.app-ready) #calendar {
    display: none !important;
}

.calendar-loading-panel {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    margin: 10px 0 18px;
    border-radius: 26px;
    background: radial-gradient(circle at top left, rgba(216, 157, 121, .16), transparent 34%),
        linear-gradient(135deg, rgba(255, 252, 248, .96), rgba(255, 255, 255, .90));
    border: 1px solid rgba(216, 157, 121, .18);
    box-shadow: 0 18px 48px rgba(84, 55, 38, .08);
    backdrop-filter: blur(12px);
}

html.calendar-route:not(.app-ready) .calendar-loading-panel,
body.calendar-loading .calendar-loading-panel {
    display: flex;
}

body.calendar-loading #calendarPage .suggested-section,
body.calendar-loading #calendarPage .room-tabs,
body.calendar-loading #calendarPage .calendar-wrap {
    display: none !important;
}

.calendar-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 26px;
    color: #6b5147;
}

.calendar-loading-icon {
    width: 68px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(216, 157, 121, .24), rgba(135, 88, 69, .14));
    color: #875845;
    font-size: 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    animation: calendarLoaderFloat 1.8s ease-in-out infinite;
}

.calendar-loading-title {
    font-size: 18px;
    font-weight: 800;
    color: #3f332e;
    letter-spacing: -.25px;
}

.calendar-loading-text {
    max-width: 360px;
    margin: 0;
    color: #8a766b;
    font-size: 14px;
    line-height: 1.55;
}

.calendar-loading-dots {
    display: flex;
    gap: 7px;
    margin-top: 2px;
}

.calendar-loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(216, 157, 121, .72);
    animation: calendarLoaderDot 1s ease-in-out infinite;
}

.calendar-loading-dots span:nth-child(2) {
    animation-delay: .13s;
}

.calendar-loading-dots span:nth-child(3) {
    animation-delay: .26s;
}

@keyframes calendarLoaderFloat {

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

    50% {
        transform: translateY(-5px);
    }
}

@keyframes calendarLoaderDot {

    0%,
    100% {
        transform: translateY(0);
        opacity: .45;
    }

    50% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .calendar-loading-panel {
        min-height: 280px;
        border-radius: 22px;
    }

    .calendar-loading-card {
        padding: 22px 18px;
    }

    .calendar-loading-icon {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        font-size: 24px;
    }

    .calendar-loading-title {
        font-size: 16px;
    }

    .calendar-loading-text {
        font-size: 13px;
    }
}

.calendar-wrap {
    overscroll-behavior: auto;
}

@media (min-width: 769px) {
    .calendar-wrap {
        overflow-x: auto !important;
        overflow-y: visible !important;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: auto;
    }

    .calendar-wrap:hover {
        cursor: default;
    }
}

.calendar-legend {
    display: flex;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(130, 104, 88, .10);
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(83, 58, 44, .035);
    backdrop-filter: blur(10px);
}

.legend {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .035);
}

.calendar-hint {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 250, 246, .96), rgba(255, 255, 255, .82));
    border: 1px solid rgba(216, 157, 121, .20);
    color: #6b5147;
    font-size: 14px;
    line-height: 1.6;
    box-shadow: 0 10px 26px rgba(90, 58, 40, .05);
}

.availability-grid {
    grid-template-columns: 74px repeat(var(--calendar-day-count, 7), minmax(0, 1fr));
    gap: 1px;
    background: rgba(227, 216, 207, .55);
    border: 1px solid rgba(222, 207, 195, .72);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(82, 55, 42, .045);
}

.sticky-corner,
.day-header,
.hour-cell,
.slot-cell {
    border: 0 !important;
}

.sticky-corner {
    background: #fffdfb;
    z-index: 35;
}

.day-header {
    background: #fffdfb;
    color: #57473f;
    padding: 12px 6px;
    border-bottom: 0 !important;
}

.day-header.today {
    background: linear-gradient(135deg, #d89d79, #875845);
    color: #fff;
    border-radius: 0;
}

.day-header.selected:not(.today) {
    background: #fff5ee;
    color: #875845;
}

.hour-cell {
    flex-direction: column;
    gap: 0;
    line-height: 1;
    color: #7a675d;
    background: #fffdfb;
    min-height: 42px;
    box-shadow: inset -1px 0 0 rgba(120, 90, 75, .06);
}

.hour-cell strong {
    font-size: 13px;
    color: #3f332e;
    letter-spacing: -.15px;
}

.hour-cell small {
    display: none;
}

.slot-cell {
    position: relative;
    min-height: 42px;
    padding: 4px 3px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.slot-cell::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    pointer-events: none;
    opacity: .98;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.booked-cell:hover::before {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(80, 48, 30, .08), inset 0 1px 0 rgba(255, 255, 255, .48);
}

@media (max-width: 768px) {
    .calendar-legend {
        gap: 8px;
        margin-bottom: 10px;
    }

    .legend-item {
        padding: 6px 8px;
        font-size: 11px;
    }

    .availability-grid {
        grid-template-columns: 56px repeat(var(--calendar-day-count, 7), minmax(42px, 1fr)) !important;
        min-width: 0 !important;
        width: 100% !important;
        border-radius: 16px;
    }

    .sticky-corner,
    .hour-cell {
        width: 56px !important;
        min-width: 56px !important;
    }

    .hour-cell strong {
        font-size: 10px;
    }

    .hour-cell small {
        display: none;
    }

    .slot-cell {
        min-height: 42px;
        padding: 3px 1px;
    }

    .slot-cell::before {
        inset: 3px;
        border-radius: 10px;
    }
}

@media (max-width: 420px) {
    .availability-grid {
        grid-template-columns: 50px repeat(var(--calendar-day-count, 7), minmax(38px, 1fr)) !important;
    }

    .sticky-corner,
    .hour-cell {
        width: 50px !important;
        min-width: 50px !important;
    }

    .slot-cell {
        padding: 2px 1px;
    }
}

:root {
    --calendar-free-bg: rgba(253, 255, 254, .30);
    --calendar-free-block: rgba(178, 232, 194, .075);
    --calendar-free-border: rgba(96, 178, 122, .045);
    --calendar-free-hover: rgba(241, 253, 245, .36);
    --calendar-booked-bg: rgba(255, 244, 243, .82);
    --calendar-booked-block: linear-gradient(135deg, rgba(248, 126, 118, .46), rgba(230, 78, 73, .40));
    --calendar-booked-border: rgba(205, 62, 58, .24);
}

.legend.free {
    background: var(--calendar-free-block) !important;
    border: 1px solid var(--calendar-free-border) !important;
}

.legend.booked {
    background: var(--calendar-booked-block) !important;
    border: 1px solid var(--calendar-booked-border) !important;
}

.free-cell {
    background: var(--calendar-free-bg) !important;
    color: transparent !important;
    font-size: 0 !important;
}

.free-cell::before {
    background: var(--calendar-free-block) !important;
    border: 1px solid var(--calendar-free-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .52) !important;
}

.free-cell:hover {
    background: var(--calendar-free-hover) !important;
}

.booked-cell {
    background: var(--calendar-booked-bg) !important;
    color: transparent !important;
    font-size: 0 !important;
}

.booked-cell::before {
    background: var(--calendar-booked-block) !important;
    border: 1px solid var(--calendar-booked-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .50) !important;
}

:root {
    --brand-brown: #875845;
    --brand-brown-dark: #6f4738;
    --brand-terracotta: #d89d79;
    --brand-cream: #fff8f1;
    --brand-soft: #f7efe9;
    --brand-rose: #c8a0a8;
    --brand-shadow: rgba(87, 53, 38, .12);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.header-inner {
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 22px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.logo-wrap {
    flex: 0 0 auto;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 7px 16px 7px 7px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: inherit !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 248, 241, .94)) !important;
    border: 1px solid rgba(135, 88, 69, .13) !important;
    box-shadow: 0 10px 26px rgba(87, 53, 38, .08) !important;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease !important;
}

.logo-wrap:hover {
    opacity: 1 !important;
    transform: translateY(-2px) !important;
    border-color: rgba(135, 88, 69, .22) !important;
    box-shadow: 0 14px 34px rgba(87, 53, 38, .13) !important;
}

.logo-mark {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(135, 88, 69, .10),
        0 8px 18px rgba(87, 53, 38, .08);
}

.logo-wrap img {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: transform .24s ease !important;
}

.logo-wrap:hover img {
    transform: rotate(-3deg) scale(1.045) !important;
}

.logo-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.05 !important;
    font-size: initial !important;
    min-width: 0;
}

.logo-text strong {
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -.65px !important;
    color: var(--brand-brown) !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.logo-text span {
    margin-top: 5px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .45px !important;
    color: #9a7566 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

.main-menu {
    flex: 1 1 auto;
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .62) !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
}

.header-inner .main-menu a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: #6b5148 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.15px !important;
    background: transparent !important;
    transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease !important;
}

.header-inner .main-menu a:hover {
    background: rgba(216, 157, 121, .17) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 18px rgba(87, 53, 38, .07) !important;
}

.header-inner .main-menu a .menu-ico {
    font-size: 16px;
    line-height: 1;
    filter: saturate(1.05);
}

.home-route:not(.contact-route) #menuHomes,
.calendar-route:not(.contact-route) #menuCalendar,
.about-route:not(.contact-route) #menuAbout,
.gift-basket-route:not(.contact-route) #menuGiftBasket,
.contact-route #menuContact,
.header-inner .main-menu a.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-brown), var(--brand-terracotta)) !important;
    box-shadow: 0 10px 22px rgba(135, 88, 69, .20) !important;
}

.call-btn {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0084ff, #6f7cff) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 26px rgba(0, 132, 255, .22) !important;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

.call-btn i {
    font-size: 18px;
    line-height: 1;
}

.call-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.03) !important;
    box-shadow: 0 16px 32px rgba(0, 132, 255, .28) !important;
}

.container>.tabs {
    width: fit-content;
    max-width: 100%;
    margin: 30px auto !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .72) !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    box-shadow: 0 12px 30px rgba(87, 53, 38, .07) !important;
}

.container>.tabs .tab {
    position: relative;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 20px !important;
    background: transparent !important;
    color: #6b5148 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.15px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease !important;
}

.container>.tabs .tab:hover {
    transform: translateY(-1px);
    background: rgba(216, 157, 121, .15) !important;
    color: var(--brand-brown) !important;
}

.container>.tabs .tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--brand-brown), var(--brand-terracotta)) !important;
    box-shadow: 0 10px 22px rgba(135, 88, 69, .18) !important;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .header-inner {
        height: 76px !important;
        gap: 14px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .logo-wrap {
        padding-right: 12px !important;
        gap: 10px !important;
    }

    .logo-mark {
        width: 48px;
        height: 48px;
    }

    .logo-wrap img {
        width: 40px !important;
        height: 40px !important;
    }

    .logo-text strong {
        font-size: 21px !important;
    }

    .logo-text span {
        font-size: 9.5px !important;
    }

    .main-menu {
        gap: 5px !important;
        padding: 6px !important;
    }

    .header-inner .main-menu a {
        min-height: 38px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
    }

    .call-btn {
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .site-header {
        background: rgba(255, 250, 245, .94) !important;
    }

    .header-inner {
        height: auto !important;
        padding: 10px 14px 11px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 10px !important;
    }

    .logo-wrap {
        align-self: center !important;
        padding: 6px 13px 6px 6px !important;
        gap: 10px !important;
    }

    .logo-mark {
        width: 44px;
        height: 44px;
    }

    .logo-wrap img {
        width: 37px !important;
        height: 37px !important;
    }

    .logo-text strong {
        font-size: 20px !important;
    }

    .logo-text span {
        font-size: 9.5px !important;
        margin-top: 4px !important;
    }

    .main-menu {
        width: 100% !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 8px !important;
        padding: 2px 2px 4px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .main-menu::-webkit-scrollbar {
        display: none;
    }

    .header-inner .main-menu a {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding: 0 13px !important;
        font-size: 13px !important;
        background: rgba(255, 255, 255, .82) !important;
        border: 1px solid rgba(135, 88, 69, .10) !important;
        box-shadow: 0 6px 16px rgba(87, 53, 38, .06) !important;
    }

    .home-route:not(.contact-route) #menuHomes,
    .calendar-route:not(.contact-route) #menuCalendar,
    .about-route:not(.contact-route) #menuAbout,
    .gift-basket-route:not(.contact-route) #menuGiftBasket,
    .contact-route #menuContact,
    .header-inner .main-menu a.is-active {
        border-color: transparent !important;
    }

    .call-btn {
        display: none !important;
    }

    .container>.tabs {
        width: 100%;
        margin: 20px 0 24px !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px !important;
        border-radius: 22px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .container>.tabs::-webkit-scrollbar {
        display: none;
    }

    .container>.tabs .tab {
        flex: 0 0 auto;
        padding: 11px 15px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 390px) {
    .logo-text span {
        display: none !important;
    }

    .logo-text strong {
        font-size: 20px !important;
    }

    .header-inner .main-menu a {
        padding: 0 11px !important;
        font-size: 12.5px !important;
    }

    .container>.tabs .tab {
        padding: 10px 13px !important;
    }
}

.header-inner .main-menu a {
    flex-direction: row !important;
    white-space: nowrap !important;
    text-align: center !important;
}

.header-inner .main-menu a span,
.header-inner .main-menu a .menu-ico {
    display: inline-flex !important;
}

.website-booking-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
}

.website-booking-modal.show {
    display: flex;
}

.website-booking-panel {
    position: relative;
}

.website-booking-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 20px 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
}

.website-booking-head h3 {
    margin: 0;
}

.website-booking-head p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.website-booking-close {
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff1e9 !important;
    color: var(--h3cn-brown) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.website-booking-close:hover {
    transform: rotate(5deg) scale(1.04);
    background: #ffe5d6 !important;
}

.website-booking-close:focus-visible {
    outline: 3px solid rgba(255, 56, 92, .24) !important;
    outline-offset: 2px !important;
}

.website-booking-close:active {
    transform: scale(.96);
}

.website-booking-body {
    padding: 18px 20px 22px;
}

.booking-summary-card,
.payment-result-card {
    border: 1px solid rgba(216, 157, 121, .25);
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 14px;
}

.booking-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(216, 157, 121, .16);
    font-size: 13px;
}

.booking-summary-row:last-child {
    border-bottom: 0;
}

.booking-summary-row strong {
    text-align: right;
}

.website-booking-form {
    display: grid;
    gap: 12px;
}

.website-booking-form label {
    display: grid;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.website-booking-form input,
.website-booking-form textarea {
    border: 1px solid #eaded7;
    padding: 13px 14px;
    font: inherit;
    outline: none;
}

.website-booking-form textarea {
    min-height: 78px;
    resize: vertical;
}

.website-booking-actions {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.website-booking-submit,
.website-booking-secondary {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.website-booking-submit {
    color: #fff;
}

.website-booking-submit:disabled {
    opacity: .65;
    cursor: wait;
}

.website-booking-secondary {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-booking-message {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b7280;
}

.website-booking-message.error {
    color: #b42318;
}

.payment-code-box {
    width: 100%;
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.payment-code-box code {
    display: block;
    padding: 12px;
    color: #fff;
    text-align: center;
    font-weight: 800;
    letter-spacing: .5px;
    user-select: all;
}

.payment-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.booking-copy-btn {
    border: 0;
    border-radius: 999px;
    min-height: 38px;
    padding: 8px 12px;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 520px) {
    .website-booking-modal {
        padding: 8px;
        align-items: flex-end;
    }

    .website-booking-panel {
        border-radius: 24px 24px 0 0;
        max-height: 94vh;
    }

    .website-booking-head {
        padding: 16px;
    }

    .website-booking-body {
        padding: 16px;
    }
}

.no-package {
    text-align: center;
}

@media (max-width: 768px) {
    .no-package {
        padding: 14px 12px;
        border-radius: 16px;
        font-size: 14px;
    }
}

.page,
.calendar-wrap,
.room-card {
    color-scheme: light;
}

.no-package {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #f9fafb !important;
    color: #6b7280 !important;
    border: 1px solid #eef2f7 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.website-booking-panel,
.booking-summary-card,
.payment-result-card {
    background: #fff !important;
}

.room-slot-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 11px 13px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #f2fff7 0%, #fffaf4 100%) !important;
    border: 1px solid rgba(34, 197, 94, .18) !important;
    box-shadow: 0 8px 22px rgba(45, 30, 20, .055) !important;
    overflow: hidden !important;
}

.room-slot-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #22c55e, #d89d79);
}

.room-slot-text {
    min-width: 0 !important;
    display: block !important;
    color: #24513a !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: -.15px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.room-status-inline {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 26px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    letter-spacing: -.1px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .045) !important;
}

.room-status-inline.warn {
    background: #fff7ed !important;
    color: #c05621 !important;
    border-color: #fed7aa !important;
}

.room-status-inline.full {
    background: #fff1f2 !important;
    color: #be123c !important;
    border-color: #fecdd3 !important;
}

.room-suggest-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    margin-top: 10px !important;
    padding: 12px 12px 12px 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fff1f2 0%, #fff8f1 55%, #ffffff 100%) !important;
    border: 1px solid rgba(255, 56, 92, .16) !important;
    box-shadow: 0 10px 24px rgba(255, 56, 92, .075) !important;
    color: #9f1239 !important;
    overflow: hidden !important;
}

.room-suggest-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #ff385c, #d89d79);
    border-radius: 999px;
}

.room-suggest-text {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: block !important;
    color: #9f1239 !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
    letter-spacing: -.15px !important;
    white-space: normal !important;
}

.room-quick-book-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 9px 13px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ff385c 0%, #d89d79 100%) !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.1px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 10px 22px rgba(255, 56, 92, .22) !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.room-quick-book-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 13px 26px rgba(255, 56, 92, .28) !important;
    opacity: .96 !important;
}

.room-quick-book-btn:active {
    transform: translateY(0) scale(.98) !important;
}

.room-suggest-row.tomorrow {
    background: linear-gradient(135deg, #f8fafc 0%, #fffaf4 100%) !important;
    border-color: rgba(17, 24, 39, .12) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .06) !important;
    color: #334155 !important;
}

.room-suggest-row.tomorrow::before {
    background: linear-gradient(180deg, #475569, #d89d79) !important;
}

.room-suggest-row.tomorrow .room-suggest-text {
    color: #334155 !important;
}

@media (max-width: 992px) {

    .room-slot-row,
    .room-suggest-row {
        border-radius: 16px !important;
        padding: 10px 11px 10px 13px !important;
    }

    .room-slot-text,
    .room-suggest-text {
        font-size: 12px !important;
    }

    .room-quick-book-btn {
        min-height: 33px !important;
        padding: 9px 12px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 520px) {
    .room-slot-row {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .room-status-inline {
        align-self: flex-start !important;
    }

    .room-suggest-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 9px !important;
        padding: 12px 12px 12px 14px !important;
    }

    .room-quick-book-btn {
        width: 100% !important;
        min-height: 38px !important;
        font-size: 12px !important;
    }
}

:root {
    --ui-brown: #875845;
    --ui-brown-dark: #6f4738;
    --ui-terracotta: #d89d79;
    --ui-cream: #fff8f1;
    --ui-paper: rgba(255, 255, 255, .92);
    --ui-line: rgba(135, 88, 69, .12);
    --ui-shadow: 0 18px 45px rgba(87, 53, 38, .10);
    --ui-soft-shadow: 0 10px 28px rgba(87, 53, 38, .075);
}

html {
    scroll-padding-top: 104px;
}

::selection {
    background: rgba(216, 157, 121, .34);
    color: #2f211b;
}

.section-heading,
.section-header,
.home-header {
    position: relative;
}

.section-heading h2,
.section-header h2,
.section h2,
.story-header h2 {
    color: #2f211b !important;
    letter-spacing: -.55px;
}

.section-heading h2::after,
.section-header h2::after,
.story-header h2::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-brown), var(--ui-terracotta));
}

.section-header h2::after {
    margin-left: auto;
    margin-right: auto;
}

.section-header p,
.section-heading p {
    color: #7b665d !important;
}

.room-card,
.blog-card,
.review-card,
.calendar-wrap,
.today-deal-box,
.deal-card,
.suggest-card-v2 {
    border: 1px solid var(--ui-line) !important;
    box-shadow: var(--ui-soft-shadow) !important;
}

.room-card {
    border-radius: 28px !important;
    overflow: hidden !important;
}

.room-card:hover {
    transform: translateY(-5px) !important;
}

.room-image-wrap::after,
.gallery-main::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .28), transparent);
    opacity: .7;
}

.room-image-wrap,
.gallery-main {
    position: relative;
}

.room-title {
    color: #251a16 !important;
}

.room-location {
    color: #7b665d !important;
}

.room-features span,
.amenity,
.amenity-item {
    background: linear-gradient(135deg, #fff, #fff8f1) !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    color: #60463d !important;
    box-shadow: 0 6px 16px rgba(87, 53, 38, .045) !important;
}

.room-btn,
.deal-btn {
    background: linear-gradient(135deg, #251a16, var(--ui-brown)) !important;
    box-shadow: 0 10px 22px rgba(87, 53, 38, .16) !important;
}

.room-btn:hover,
.deal-btn:hover {
    filter: brightness(1.04);
    box-shadow: 0 14px 30px rgba(87, 53, 38, .20) !important;
}

.calendar-wrap {
    background: rgba(255, 255, 255, .92) !important;
    border-radius: 26px !important;
    backdrop-filter: blur(12px);
}

.calendar-legend {
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 248, 241, .72);
    border: 1px solid rgba(135, 88, 69, .09);
}

.legend-item {
    color: #60463d !important;
    font-size: 13px;
}

.room-tabs {
    gap: 8px !important;
}

.room-tab {
    background: rgba(255, 255, 255, .86) !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    color: #6b5148 !important;
    box-shadow: 0 6px 16px rgba(87, 53, 38, .045) !important;
    font-weight: 800 !important;
}

.room-tab.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--ui-brown), var(--ui-terracotta)) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px rgba(135, 88, 69, .18) !important;
}

.blog-card,
.review-card {
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .94) !important;
}

.blog-title,
.review-name {
    color: #2f211b !important;
}

.blog-text,
.review-text {
    color: #6b5a52 !important;
}

.review-avatar {
    padding: 2px;
    background: linear-gradient(135deg, var(--ui-terracotta), #fb7185);
}

.floating-social a {
    border: 1px solid rgba(255, 255, 255, .58) !important;
    box-shadow: 0 12px 30px rgba(37, 26, 22, .15) !important;
}

.live-activity {
    left: 18px !important;
    bottom: 18px !important;
    border-radius: 20px !important;
    background: rgba(47, 33, 27, .92) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    box-shadow: 0 18px 45px rgba(37, 26, 22, .22) !important;
    font-size: 13px;
    line-height: 1.45;
}

.faq-floating {
    position: fixed !important;
}

.faq-toggle {
    position: fixed !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: aiFloat 3.2s ease-in-out infinite !important;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

.faq-toggle::after {
    line-height: 1;
}

.faq-toggle:hover {
    filter: brightness(1.03) !important;
}

.faq-toggle:active {
    transform: translateY(-1px) scale(.98) !important;
}

.ai-icon {
    flex: 0 0 auto;
}

.ai-ping {
    width: 10px !important;
    height: 10px !important;
}

.faq-box {
    position: fixed !important;
    left: 18px !important;
    bottom: 156px !important;
    width: min(390px, calc(100vw - 36px)) !important;
    max-height: min(76vh, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 250, 246, .96)) !important;
    border: 1px solid rgba(135, 88, 69, .14) !important;
    box-shadow: 0 28px 80px rgba(37, 26, 22, .24),
        inset 0 1px 0 rgba(255, 255, 255, .88) !important;
    backdrop-filter: blur(18px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform-origin: left bottom !important;
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease !important;
}

.faq-box.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.faq-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

.faq-header strong::before {
    font-size: 15px;
}

.faq-close {
    border: 1px solid rgba(255, 255, 255, .20) !important;
    font-size: 16px !important;
    transition: background .18s ease, transform .18s ease !important;
}

.faq-close:hover {
    background: rgba(255, 255, 255, .23) !important;
    transform: rotate(6deg) scale(1.04);
}

.faq-questions button {
    position: relative;
    text-align: left !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

.faq-questions button:active {
    transform: translateY(0) scale(.99) !important;
}

.faq-answer.has-answer {
    overflow: hidden !important;
}

.faq-actions a {
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.faq-actions a:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.03);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .15) !important;
}

@media (min-width: 769px) and (max-width: 1100px) {

    .room-card,
    .blog-card,
    .review-card {
        border-radius: 24px !important;
    }

    .faq-box {
        bottom: 146px !important;
        width: min(380px, calc(100vw - 32px)) !important;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 132px;
    }

    .section-heading h2::after,
    .section-header h2::after,
    .story-header h2::after {
        width: 42px;
        height: 3px;
        margin-top: 8px;
    }

    .calendar-wrap {
        border-radius: 22px !important;
    }

    .room-card,
    .blog-card,
    .review-card {
        border-radius: 22px !important;
    }

    .live-activity {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: none !important;
        border-radius: 18px !important;
    }

    .ai-ping {
        top: 7px !important;
        right: 10px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .faq-answer {
        padding: 14px !important;
    }
}

@media (max-width: 430px) {
    .ai-icon {
        width: 24px !important;
        height: 24px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .faq-toggle,
    .floating-social a,
    .room-card,
    .blog-card,
    .review-card,
    .story-item,
    .room-image,
    .blog-card img,
    .review-image {
        animation: none !important;
        transition: none !important;
    }
}

:root {
    --chat-blue: #0084ff;
    --chat-blue-2: #0068ff;
    --chat-cyan: #22c7ff;
    --chat-deep: #075ab8;
    --chat-soft: #eef7ff;
    --chat-line: rgba(0, 132, 255, .16);
    --chat-shadow: 0 22px 60px rgba(0, 104, 255, .24);
}

#roomTabs.room-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 20px !important;
    padding: 10px !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(255, 248, 241, .76)) !important;
    border: 1px solid rgba(135, 88, 69, .10) !important;
    box-shadow: 0 14px 34px rgba(87, 53, 38, .075) !important;
    overflow: visible !important;
}

#roomTabs .room-tab {
    position: relative !important;
    isolation: isolate !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 13px 12px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(135, 88, 69, .12) !important;
    background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .92), transparent 34%),
        linear-gradient(135deg, #ffffff, #fff8f1) !important;
    color: #694b41 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    box-shadow: 0 8px 18px rgba(87, 53, 38, .055),
        inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    transition: transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
}

#roomTabs .room-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgba(216, 157, 121, .14), rgba(135, 88, 69, .06));
    opacity: 0;
    transition: opacity .2s ease;
}

#roomTabs .room-tab::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(135, 88, 69, .22);
    box-shadow: 0 0 0 4px rgba(135, 88, 69, .045);
}

#roomTabs .room-tab:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(216, 157, 121, .34) !important;
    box-shadow: 0 14px 28px rgba(87, 53, 38, .10),
        inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

#roomTabs .room-tab:hover::before {
    opacity: 1;
}

#roomTabs .room-tab.active {
    color: #fff !important;
    border-color: transparent !important;
    background: radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .32), transparent 30%),
        linear-gradient(135deg, #875845 0%, #d89d79 100%) !important;
    box-shadow: 0 16px 30px rgba(135, 88, 69, .24),
        inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    transform: translateY(-1px) !important;
}

#roomTabs .room-tab.active::after {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .18);
}

@media (min-width: 769px) and (max-width: 1100px) {
    #roomTabs.room-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    #roomTabs .room-tab::after {
        top: 7px;
        right: 8px;
        width: 6px;
        height: 6px;
    }
}

.faq-floating {
    left: 18px !important;
    bottom: 86px !important;
    z-index: 100000 !important;
    pointer-events: none !important;
}

.faq-toggle,
.faq-box {
    pointer-events: auto !important;
}

.faq-toggle {
    left: 18px !important;
    bottom: 86px !important;
    min-width: 158px !important;
    height: 58px !important;
    padding: 0 18px 0 15px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .46) !important;
    color: #fff !important;
    background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, .38), transparent 28%),
        linear-gradient(135deg, var(--chat-blue-2) 0%, var(--chat-blue) 56%, var(--chat-cyan) 100%) !important;
    box-shadow: 0 18px 44px rgba(0, 104, 255, .34),
        inset 0 1px 0 rgba(255, 255, 255, .30) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.faq-toggle::after {
    content: "Hỏi nhanh" !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
}

.faq-toggle:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 22px 52px rgba(0, 104, 255, .42),
        inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.ai-icon {
    width: 27px !important;
    height: 27px !important;
    filter: drop-shadow(0 3px 8px rgba(0, 32, 80, .24)) !important;
}

.ai-ping {
    top: 8px !important;
    right: 12px !important;
    background: #54f7a5 !important;
    box-shadow: 0 0 0 0 rgba(84, 247, 165, .74) !important;
}

.faq-box,
.faq-box.show {
    left: 18px !important;
    right: auto !important;
    bottom: 156px !important;
    width: min(398px, calc(100vw - 36px)) !important;
    max-height: min(82dvh, 690px) !important;
    border-radius: 30px !important;
    border: 1px solid var(--chat-line) !important;
    background: linear-gradient(180deg, rgba(246, 251, 255, .98), rgba(232, 245, 255, .98)) !important;
    box-shadow: var(--chat-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .90) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.faq-box {
    transform: translateY(14px) scale(.985) !important;
}

.faq-box.show {
    transform: translateY(0) scale(1) !important;
}

.faq-header {
    flex: 0 0 auto !important;
    padding: 19px 19px 17px !important;
    color: #fff !important;
    background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, .30), transparent 28%),
        linear-gradient(135deg, #005bd8 0%, #0084ff 58%, #20c4ff 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .20) !important;
}

.faq-header strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.25px !important;
}

.faq-header strong::before {
    content: "💬";
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.faq-header p {
    margin-top: 7px !important;
    color: rgba(255, 255, 255, .88) !important;
    font-size: 12.8px !important;
    line-height: 1.35 !important;
}

.faq-close {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .16) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.faq-questions {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 15px 16px 10px !important;
    max-height: min(34dvh, 285px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 132, 255, .32) transparent !important;
}

.faq-questions::-webkit-scrollbar,
.faq-answer::-webkit-scrollbar,
.faq-answer-body::-webkit-scrollbar {
    width: 6px;
}

.faq-questions::-webkit-scrollbar-thumb,
.faq-answer::-webkit-scrollbar-thumb,
.faq-answer-body::-webkit-scrollbar-thumb {
    background: rgba(0, 132, 255, .30);
    border-radius: 999px;
}

.faq-questions button {
    min-height: 45px !important;
    padding: 11px 13px !important;
    border-radius: 17px !important;
    border: 1px solid rgba(0, 132, 255, .12) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(236, 247, 255, .96)) !important;
    color: #17456e !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.34 !important;
    box-shadow: 0 8px 18px rgba(0, 104, 255, .065) !important;
}

.faq-questions button:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0, 132, 255, .30) !important;
    background: linear-gradient(135deg, #ffffff, #e9f6ff) !important;
    box-shadow: 0 12px 26px rgba(0, 104, 255, .11) !important;
}

.faq-answer {
    flex: 0 1 auto !important;
    min-height: 76px !important;
    max-height: min(31dvh, 245px) !important;
    order: 3 !important;
    margin: 4px 16px 12px !important;
    padding: 15px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(0, 132, 255, .14) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(242, 249, 255, .98)) !important;
    color: #17324d !important;
    font-size: 13.5px !important;
    line-height: 1.68 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82),
        0 10px 24px rgba(0, 104, 255, .07) !important;
}

.faq-answer.has-answer {
    padding: 0 !important;
    overflow-y: auto !important;
}

.faq-answer-card {
    padding: 15px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.faq-answer-header {
    color: #093e7a !important;
    font-weight: 900 !important;
}

.faq-answer-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #e7f4ff, #ffffff) !important;
    box-shadow: 0 7px 18px rgba(0, 104, 255, .11) !important;
}

.faq-answer-body {
    max-height: none !important;
    overflow: visible !important;
    color: #24445f !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
}

.faq-close-btn {
    margin-top: 12px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #0068ff, #22c7ff) !important;
    box-shadow: 0 10px 22px rgba(0, 104, 255, .18) !important;
}

.faq-actions {
    flex: 0 0 auto !important;
    order: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 16px 16px !important;
    background: linear-gradient(180deg, rgba(232, 245, 255, 0), rgba(232, 245, 255, .98)) !important;
}

.faq-actions a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px rgba(0, 104, 255, .16) !important;
}

.faq-actions a:first-child {
    background: linear-gradient(135deg, #00a8ff, #0068ff) !important;
}

.faq-actions a:last-child {
    background: linear-gradient(135deg, #0084ff, #6f7cff) !important;
}

@media (min-width: 769px) and (max-width: 1100px) {
    .faq-floating {
        left: 16px !important;
        bottom: 82px !important;
    }

    .faq-toggle {
        left: 16px !important;
        bottom: 82px !important;
        min-width: 142px !important;
        height: 54px !important;
    }

    .faq-toggle::after {
        font-size: 13px !important;
    }

    .faq-box,
    .faq-box.show {
        left: 16px !important;
        bottom: 146px !important;
        width: min(384px, calc(100vw - 32px)) !important;
        max-height: min(80dvh, 660px) !important;
    }

    .faq-questions {
        max-height: min(31dvh, 250px) !important;
    }

    .faq-answer {
        max-height: min(31dvh, 235px) !important;
    }
}

@media (max-width: 768px) {
    .faq-toggle {
        min-width: 130px !important;
        height: 50px !important;
        padding: 0 14px 0 12px !important;
        gap: 8px !important;
    }

    .faq-toggle::after {
        content: "Hỏi nhanh" !important;
        font-size: 12.5px !important;
    }

    .ai-icon {
        width: 23px !important;
        height: 23px !important;
    }

    .faq-box,
    .faq-box.show {
        transform-origin: left bottom !important;
    }

    .faq-header {
        padding: 16px 16px 14px !important;
    }

    .faq-header strong {
        font-size: 16px !important;
    }

    .faq-header strong::before {
        width: 27px;
        height: 27px;
        border-radius: 11px;
    }

    .faq-questions {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        padding: 13px 13px 9px !important;
    }

    .faq-questions button {
        min-height: 47px !important;
        padding: 10px !important;
        border-radius: 15px !important;
        font-size: 11.8px !important;
        line-height: 1.28 !important;
    }

    .faq-answer {
        margin: 2px 13px 10px !important;
        border-radius: 19px !important;
        font-size: 13px !important;
    }

    .faq-answer-card {
        padding: 13px !important;
    }

    .faq-answer-body {
        font-size: 13px !important;
        line-height: 1.66 !important;
    }

    .faq-actions {
        padding: 0 13px 13px !important;
    }

    .faq-actions a {
        min-height: 42px !important;
        border-radius: 14px !important;
        font-size: 12.4px !important;
    }
}

@media (max-width: 430px) {
    .faq-toggle {
        min-width: 50px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 0 !important;
        border-radius: 18px !important;
    }

    .faq-toggle::after {
        content: "" !important;
        display: none !important;
    }

    .faq-box,
    .faq-box.show {
        left: 8px !important;
        right: 8px !important;
    }

    .faq-questions {
        grid-template-columns: 1fr !important;
    }

    .faq-answer {
        max-height: min(34dvh, 235px) !important;
        padding: 13px !important;
    }

    .faq-answer.has-answer {
        padding: 0 !important;
    }

    .faq-actions {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-height: 680px) and (max-width: 768px) {
    .faq-answer {
        max-height: 180px !important;
    }
}

.section-heading h2::after,
.section-header h2::after,
.story-header h2::after,
h2::after {
    content: none !important;
    display: none !important;
}

@media (min-width: 769px) and (max-width: 1100px) {
    #roomTabs.room-tabs {
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 22px !important;
    }

    #roomTabs .room-tab {
        min-height: 46px !important;
        padding: 10px 9px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    #roomTabs.room-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 6px !important;
        border-radius: 18px !important;
        margin-bottom: 12px !important;
        box-shadow: 0 8px 22px rgba(87, 53, 38, .055) !important;
    }

    #roomTabs .room-tab {
        min-height: 36px !important;
        padding: 7px 5px !important;
        border-radius: 12px !important;
        font-size: 10.8px !important;
        letter-spacing: 0 !important;
        box-shadow: 0 5px 12px rgba(87, 53, 38, .045) !important;
    }

    #roomTabs .room-tab::after {
        display: none !important;
    }

    #roomTabs .room-tab:hover {
        transform: translateY(-1px) !important;
    }

    #roomTabs .room-tab.active {
        transform: none !important;
        box-shadow: 0 8px 16px rgba(135, 88, 69, .18) !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        max-height: none !important;
    }

    .faq-answer.has-answer {
        display: block !important;
    }
}

@media (max-width: 430px) {
    #roomTabs.room-tabs {
        gap: 5px !important;
        padding: 5px !important;
        border-radius: 16px !important;
    }

    #roomTabs .room-tab {
        min-height: 33px !important;
        padding: 6px 4px !important;
        border-radius: 10px !important;
        font-size: 10.2px !important;
    }

    .faq-box,
    .faq-box.show {
        bottom: 128px !important;
        min-height: 410px !important;
    }

    .faq-header p {
        font-size: 11.5px !important;
        line-height: 1.35 !important;
    }

    .faq-questions {
        padding: 10px 10px 7px !important;
    }

    .faq-questions button {
        min-height: 38px !important;
        padding: 8px 9px !important;
        border-radius: 13px !important;
        font-size: 11.5px !important;
        line-height: 1.24 !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        min-height: 205px !important;
    }

    .faq-answer {
        margin: 2px 10px 8px !important;
        border-radius: 17px !important;
        font-size: 12.6px !important;
        line-height: 1.62 !important;
    }

    .faq-answer-card {
        padding: 11px !important;
    }

    .faq-answer-body {
        font-size: 12.6px !important;
        line-height: 1.62 !important;
    }

    .faq-actions {
        padding: 0 10px 10px !important;
        gap: 7px !important;
    }

    .faq-actions a {
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: 11.3px !important;
    }
}

@media (max-width: 360px) {
    #roomTabs.room-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #roomTabs .room-tab {
        min-height: 31px !important;
        font-size: 9.5px !important;
    }

    .faq-box,
    .faq-box.show {
        bottom: 120px !important;
        height: calc(100dvh - 128px) !important;
        min-height: 390px !important;
    }

    .faq-header p {
        display: none !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-questions {
        max-height: 92px !important;
    }
}

@media (max-height: 680px) and (max-width: 768px) {

    .faq-box,
    .faq-box.show {
        bottom: 112px !important;
        min-height: 0 !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        min-height: 170px !important;
    }
}

@supports not selector(:has(*)) {
    @media (max-width: 768px) {
        .faq-questions {
            max-height: min(18dvh, 128px) !important;
        }

        .faq-answer {
            min-height: 190px !important;
        }
    }
}

.room-card .room-btn,
.rooms-grid .room-btn,
a.room-btn {
    background: linear-gradient(135deg, #ff385c 0%, #ff6f91 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 56, 92, .18) !important;
    box-shadow: 0 10px 22px rgba(255, 56, 92, .22) !important;
}

.room-card .room-btn:hover,
.rooms-grid .room-btn:hover,
a.room-btn:hover {
    background: linear-gradient(135deg, #f72f55 0%, #ff7898 100%) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px rgba(255, 56, 92, .28) !important;
    opacity: 1 !important;
    filter: none !important;
}

.room-card .room-btn:active,
.rooms-grid .room-btn:active,
a.room-btn:active {
    transform: translateY(0) scale(.98) !important;
    box-shadow: 0 8px 18px rgba(255, 56, 92, .22) !important;
}

@media (max-width: 768px) {

    .room-card .room-btn,
    .rooms-grid .room-btn,
    a.room-btn {
        border-radius: 14px !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        min-height: 40px !important;
    }
}

@media (max-width: 768px) {
    .faq-floating {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 0 !important;
        z-index: 100000 !important;
        pointer-events: none !important;
    }

    .faq-toggle {
        position: fixed !important;
        left: 14px !important;
        right: auto !important;
        bottom: max(76px, calc(74px + env(safe-area-inset-bottom))) !important;
        z-index: 100002 !important;
        pointer-events: auto !important;
    }

    .faq-box,
    .faq-box.show {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(94vw, 420px) !important;
        height: min(86dvh, 660px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 26px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        pointer-events: auto !important;
    }

    .faq-box {
        transform: translate(-50%, -46%) scale(.96) !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .faq-box.show {
        transform: translate(-50%, -50%) scale(1) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .faq-header {
        flex: 0 0 auto !important;
    }

    .faq-questions {
        flex: 0 0 auto !important;
        max-height: min(31dvh, 230px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .faq-answer {
        flex: 1 1 auto !important;
        min-height: 150px !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-questions {
        max-height: min(18dvh, 128px) !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        min-height: 240px !important;
    }

    .faq-answer-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .faq-actions {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 430px) {

    .faq-box,
    .faq-box.show {
        width: calc(100vw - 20px) !important;
        height: calc(100dvh - 28px) !important;
        max-height: calc(100dvh - 28px) !important;
        border-radius: 22px !important;
    }

    .faq-header {
        padding: 13px 14px 11px !important;
    }

    .faq-questions {
        max-height: 178px !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-questions {
        max-height: 104px !important;
    }

    .faq-answer,
    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        min-height: 100px !important;
    }

    .faq-actions {
        padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-height: 680px) and (max-width: 768px) {

    .faq-box,
    .faq-box.show {
        height: calc(100dvh - 18px) !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 20px !important;
    }

    .faq-header p {
        display: none !important;
    }

    .faq-questions {
        max-height: 400px !important;
    }

    .faq-box:has(.faq-answer.has-answer) .faq-questions {
        max-height: 80px !important;
    }

    .faq-answer,
    .faq-box:has(.faq-answer.has-answer) .faq-answer {
        min-height: 180px !important;
    }
}

:root {
    --h3cn-peach: #f3c7ad;
    --h3cn-pink: #ff5a76;
    --h3cn-green: #16a34a;
}

.site-header {
    backdrop-filter: blur(16px);
}

.header-inner .main-menu a {
    border-radius: 999px;
    padding: 10px 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.header-inner .main-menu a:hover {
    background: #f7eee8;
    color: var(--h3cn-brown) !important;
    transform: translateY(-1px);
}

.room-card,
.blog-card,
.review-card,
.suggest-card,
.suggest-card-v2 {
    border: 1px solid rgba(135, 88, 69, .08) !important;
    box-shadow: var(--h3cn-shadow) !important;
}

.room-card img {
    filter: saturate(1.03) contrast(1.02);
}

#homeName {
    color: var(--h3cn-ink) !important;
    letter-spacing: -.02em;
}

.price,
.price-preview-value {
    color: var(--h3cn-pink) !important;
}

#pricingPreview .price-preview-card {
    background: linear-gradient(180deg, #fff, #fff7f1) !important;
    border-color: #f1ded3 !important;
    border-radius: 18px !important;
}

.price-row {
    border-bottom-color: #f4e8e0 !important;
}

.website-booking-head {
    backdrop-filter: blur(12px);
}

.website-booking-head h3 {
    font-size: 22px !important;
}

.booking-summary-card,
.payment-result-card {
    background: linear-gradient(135deg, #fff7ef, #fff) !important;
    border-color: #f0d8ca !important;
    box-shadow: 0 10px 25px rgba(135, 88, 69, .07);
}

.booking-summary-row {
    border-bottom-color: rgba(135, 88, 69, .10) !important;
}

.booking-summary-row span {
    color: var(--h3cn-muted) !important;
}

.booking-summary-row strong {
    color: var(--h3cn-ink) !important;
}

.website-booking-form input,
.website-booking-form textarea {
    background: #fffdfb !important;
    border-color: #ead7cc !important;
    border-radius: 18px !important;
}

.website-booking-submit {
    background: linear-gradient(135deg, #ff5a76, #d89d79) !important;
    box-shadow: 0 16px 28px rgba(255, 90, 118, .22) !important;
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.website-booking-submit:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(255, 90, 118, .28) !important;
}

.website-booking-secondary {
    transition: transform .2s ease, background .2s ease;
}

.website-booking-secondary:hover {
    background: #ffe5d6 !important;
    transform: translateY(-1px);
}

.payment-status-pill {
    background: #fff3df !important;
    color: #9a5b00 !important;
    box-shadow: inset 0 0 0 1px rgba(154, 91, 0, .10);
}

.payment-status-pill.paid {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.payment-status-pill.expired {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.payment-code-box code {
    border-radius: 16px !important;
}

.booking-copy-btn {
    background: linear-gradient(135deg, #875845, #b98367) !important;
}

.floating-social a,
.floating-contact a {
    box-shadow: 0 12px 28px rgba(47, 31, 24, .16) !important;
}

@media (max-width:520px) {

    .website-booking-head,
    .website-booking-body {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .website-booking-form>.website-booking-actions {
        gap: 8px;
        margin-top: 2px;
    }

    .website-booking-form>.website-booking-actions .website-booking-submit,
    .website-booking-form>.website-booking-actions .website-booking-secondary {
        min-height: 44px !important;
        padding: 9px 14px !important;
        font-size: 13px !important;
        line-height: 1.2;
    }
}

body {
    background: var(--bg, #f6f4ef) !important;
    color: #222 !important;
}

.page,
.container,
.calendar-wrap {
    background-color: transparent;
}





.website-booking-form input[readonly] {
    background: #faf7f3 !important;
    color: #5f463b;
    cursor: default;
}

.website-cccd-alert {
    display: none;
    padding: 12px 14px;
    border-radius: 18px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.55;
}

.website-cccd-alert strong {
    display: block;
    color: #7c2d12;
    margin-bottom: 3px;
}

.website-payment-countdown {
    margin: 12px 0;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid #fed7aa;
    box-shadow: 0 10px 24px rgba(154, 91, 18, .08);
}

.countdown-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.countdown-label {
    color: #7c2d12;
    font-size: 13px;
    font-weight: 800;
}

.countdown-time {
    font-size: 24px;
    font-weight: 900;
    color: #9a3412;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.countdown-bar {
    height: 10px;
    border-radius: 999px;
    background: #ffedd5;
    overflow: hidden;
}

.countdown-bar span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
    transition: width .4s ease;
}

.website-payment-countdown.expired {
    background: #fff1f2;
    border-color: #fecdd3;
}

.website-payment-countdown.expired .countdown-label,
.website-payment-countdown.expired .countdown-time {
    color: #be123c;
}

.website-payment-countdown.paid {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.website-payment-countdown.paid .countdown-label,
.website-payment-countdown.paid .countdown-time {
    color: #166534;
}

@media (max-width: 768px) {
    body {
        background: var(--bg, #f6f4ef) !important;
        overflow-x: hidden !important;
    }

    .website-booking-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .website-booking-panel {
        width: 100% !important;
        max-height: 94dvh !important;
        border-radius: 26px 26px 0 0 !important;
    }

    .website-booking-head {
        padding: 16px 16px 12px !important;
    }

    .website-booking-head h3 {
        font-size: 19px !important;
    }

    .website-booking-body {
        padding: 15px 16px 18px !important;
    }

    

    .booking-summary-row {
        align-items: flex-start;
        gap: 10px;
    }

    .booking-summary-row strong {
        max-width: 58%;
    }

    .countdown-time {
        font-size: 22px;
    }

    .website-booking-submit,
    .website-booking-secondary {
        min-height: 50px !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .website-booking-panel {
        width: min(620px, calc(100vw - 32px)) !important;
    }

    
}

.payment-result-card .website-payment-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.payment-result-card .website-payment-action-btn,
.payment-result-card .website-payment-actions .website-booking-submit,
.payment-result-card .website-payment-actions .website-booking-secondary {
    width: auto !important;
    min-width: 118px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.payment-result-card .website-payment-actions .website-booking-secondary {
    background: #fff4ed !important;
    color: #875845 !important;
    border: 1px solid rgba(135, 88, 69, .14) !important;
}

.payment-result-card .website-payment-actions .website-booking-submit {
    background: linear-gradient(135deg, #875845, #d89d79) !important;
    color: #fff !important;
    border: 1px solid rgba(135, 88, 69, .08) !important;
    box-shadow: 0 8px 18px rgba(135, 88, 69, .14) !important;
}

.payment-result-card .website-payment-actions .website-booking-secondary::before {
    content: "💬";
    font-size: 12px;
    line-height: 1;
}

.payment-result-card .website-payment-actions .website-booking-submit::before {
    content: "✓";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    font-size: 10px;
    line-height: 1;
}

.payment-result-card .website-payment-actions .website-booking-secondary:hover,
.payment-result-card .website-payment-actions .website-booking-submit:hover {
    transform: translateY(-1px) !important;
}

.website-booking-submit.is-loading {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    cursor: wait !important;
    opacity: .92 !important;
    overflow: hidden !important;
}

.website-booking-submit.is-loading::before {
    content: "" !important;
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, .48) !important;
    border-top-color: #fff !important;
    background: transparent !important;
    animation: h3cnBookingBtnSpin .72s linear infinite !important;
}

.website-booking-submit.is-loading::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .18) 45%, transparent 72%) !important;
    transform: translateX(-100%) !important;
    animation: h3cnBookingBtnShimmer 1.05s ease-in-out infinite !important;
}

.website-booking-message:not(.error) {
    border-radius: 14px;
    padding: 8px 10px;
    background: #fffaf5;
    border: 1px solid rgba(216, 157, 121, .18);
}

@keyframes h3cnBookingBtnSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes h3cnBookingBtnShimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (min-width: 769px) {
    .payment-result-card .website-payment-actions {
        gap: 10px !important;
    }

    .payment-result-card .website-payment-action-btn,
    .payment-result-card .website-payment-actions .website-booking-submit,
    .payment-result-card .website-payment-actions .website-booking-secondary {
        min-width: 124px !important;
        min-height: 36px !important;
    }
}

@media (max-width: 768px) {
    .payment-result-card .website-payment-actions {
        display: grid !important;
        grid-template-columns: 1fr 84px !important;
        gap: 8px !important;
    }

    .payment-result-card .website-payment-action-btn,
    .payment-result-card .website-payment-actions .website-booking-submit,
    .payment-result-card .website-payment-actions .website-booking-secondary {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    .payment-result-card .website-payment-actions .website-booking-secondary {
        justify-content: center !important;
    }

    .website-booking-submit.is-loading::before {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
    }
}

@media (max-width: 380px) {
    .payment-result-card .website-payment-actions {
        grid-template-columns: 1fr !important;
    }

    .payment-result-card .website-payment-action-btn,
    .payment-result-card .website-payment-actions .website-booking-submit,
    .payment-result-card .website-payment-actions .website-booking-secondary {
        min-height: 34px !important;
    }
}

.payment-result-card .website-payment-actions .website-booking-secondary[href*="zalo.me"]::before {
    content: "Z" !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0068ff, #34a7ff) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
    box-shadow: 0 5px 12px rgba(0, 104, 255, .24) !important;
}

.room-card {
    background: linear-gradient(180deg, #ffffff 0%, #fffdfb 100%) !important;
    border: 1px solid rgba(255, 255, 255, .86) !important;
    box-shadow: 0 12px 34px rgba(77, 54, 42, .075) !important;
}

.room-card:hover {
    box-shadow: 0 18px 44px rgba(77, 54, 42, .11) !important;
}

.room-desc {
    position: relative !important;
    margin-top: 8px !important;
    padding: 12px 13px 12px 15px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fffaf7 0%, #ffffff 68%) !important;
    border: 1px solid rgba(216, 157, 121, .14) !important;
    color: #5f4a41 !important;
    font-size: 13.5px !important;
    line-height: 1.68 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    box-shadow: 0 8px 20px rgba(135, 88, 69, .045) !important;
}

.room-desc::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 13px !important;
    bottom: 13px !important;
    width: 3px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #d89d79, #875845) !important;
}

.room-features span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid rgba(216, 157, 121, .18) !important;
    color: #644234 !important;
    box-shadow: 0 8px 18px rgba(135, 88, 69, .055) !important;
    font-weight: 800 !important;
}

@media (min-width: 1025px) {
    .room-features {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .room-features span {
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 8px 6px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .room-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .room-features span {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 11.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 768px) {
    .payment-result-card .website-payment-actions .website-booking-secondary[href*="zalo.me"]::before {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        border-radius: 6px !important;
        font-size: 10px !important;
    }

    .room-card {
        box-shadow: 0 9px 24px rgba(77, 54, 42, .075) !important;
    }

    .room-desc {
        margin-top: 7px !important;
        padding: 10px 11px 10px 13px !important;
        border-radius: 14px !important;
        font-size: 12.5px !important;
        line-height: 1.58 !important;
    }

    .room-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .room-features span {
        min-height: 32px !important;
        padding: 7px 6px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 380px) {
    .room-features span {
        font-size: 9.5px !important;
        padding-inline: 5px !important;
    }
}

.payos-checkout-wrap {
    margin-top: 14px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    text-align: center !important;
}

.payos-checkout-btn {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0068ff, #35a7ff) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 12px 26px rgba(0, 104, 255, .22) !important;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease !important;
}

.payos-checkout-btn::before {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .2) !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.payos-checkout-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 16px 32px rgba(0, 104, 255, .28) !important;
}

.payos-checkout-wrap small {
    display: block !important;
    margin-top: 9px !important;
    color: #5b6472 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    .payos-checkout-wrap {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .payos-checkout-btn {
        min-height: 42px !important;
        font-size: 13px !important;
    }

    .payos-checkout-wrap small {
        font-size: 11.5px !important;
    }
}

.room-card,
.blog-card,
.review-card,
.suggest-card,
.suggest-card-v2,
.calendar-wrap,
.booking-summary-card,
.payment-result-card {
    background: #ffffff !important;
    border-color: rgba(216, 157, 121, .13) !important;
    box-shadow: var(--h3cn-shadow) !important;
}

.website-booking-head p,
.website-booking-message,
.payos-checkout-wrap small {
    color: #6b7280 !important;
}

.payos-checkout-wrap {
    border-color: rgba(16, 185, 129, .18) !important;
}

.payos-checkout-btn::before {
    content: "↗" !important;
}

.payment-code-box code {
    background: linear-gradient(135deg, #2d1e14, #875845) !important;
}

.website-payment-countdown {
    background: linear-gradient(135deg, #fff7ed, #ffffff) !important;
}

#liveActivity {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(216, 157, 121, .18) !important;
    box-shadow: 0 16px 40px rgba(67, 42, 29, .12) !important;
}

@media (max-width:520px) {
    .website-booking-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .website-booking-panel {
        border-radius: 26px 26px 0 0 !important;
        max-height: 92dvh !important;
    }
}

html,
body {
    color: #1f2937 !important;
}

.story-section,
.highlights-section,
.calendar-wrap,
.room-card,
.blog-card,
.review-card,
.suggest-card,
.suggest-card-v2,
.booking-summary-card,
.payment-result-card {
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(31, 41, 55, .065) !important;
    border-color: rgba(148, 163, 184, .16) !important;
}

.payos-qr-wrap {
    margin: 14px 0 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    text-align: center !important;
}

.payos-qr-box {
    width: 238px !important;
    min-height: 238px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    border-radius: 22px !important;
}

.payos-qr-box canvas,
.payos-qr-box img {
    width: 214px !important;
    height: 214px !important;
    display: block !important;
}

.payos-qr-caption,
.payos-qr-fallback {
    margin-top: 10px !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

.website-paid-success {
    text-align: center !important;
    padding: 18px 14px !important;
    border-radius: 24px !important;
    border: 1px solid #bbf7d0 !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, .08) !important;
    margin-bottom: 14px !important;
}

.paid-success-icon {
    font-size: 38px !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.paid-success-title {
    color: #166534 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
}

.paid-success-sub {
    margin-top: 6px !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.paid-booking-card {
    background: #ffffff !important;
}

.website-payment-countdown.expired+.payment-code-box+.booking-summary-card+.payos-qr-wrap {
    opacity: .58 !important;
    filter: grayscale(.3) !important;
}

@media (max-width:520px) {
    .payos-qr-box {
        width: 218px !important;
        min-height: 218px !important;
    }

    .payos-qr-box canvas,
    .payos-qr-box img {
        width: 196px !important;
        height: 196px !important;
    }
}

:root {
    --bg: #ffffff !important;
    --h3cn-bg: #ffffff !important;
    --h3cn-card: #ffffff !important;
    --h3cn-ink: #111827 !important;
    --h3cn-muted: #64748b !important;
    --h3cn-brown: #7c4f3d !important;
    --h3cn-brown-2: #d89d79 !important;
    --h3cn-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
}

html,
body,
body.home-route,
body.calendar-route {
    background: #ffffff !important;
    background-image: radial-gradient(circle at 10% -5%, rgba(216, 157, 121, .055), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(96, 165, 250, .055), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 50%, #ffffff 100%) !important;
    color: #111827 !important;
}

main,
.page,
.container,
#homeDetailPage,
.calendar-page,
.detail-page,
.home-detail-container {
    background: transparent !important;
}

.site-header {
    background: rgba(255, 255, 255, .985) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
}

.room-card,
.blog-card,
.review-card,
.suggest-card,
.suggest-card-v2,
.best-deal-card,
.calendar-wrap,
.stats-bar,
.booking-summary-card,
.payment-result-card {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
}

.website-booking-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
}

.website-booking-panel {
    width: min(650px, calc(100vw - 28px)) !important;
    max-height: min(92dvh, 820px) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
}

.website-booking-body {
    max-height: calc(min(92dvh, 820px) - 94px) !important;
    overflow: auto !important;
    padding-bottom: 22px !important;
}

.website-booking-head {
    border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
}

.website-booking-head h3 {
    color: #111827 !important;
    letter-spacing: -.02em !important;
}

.website-booking-head p {
    color: #64748b !important;
}

.website-booking-form input,
.website-booking-form textarea,
.website-booking-form input[readonly] {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .22) !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02) !important;
}

.website-booking-form input:focus,
.website-booking-form textarea:focus {
    border-color: #d89d79 !important;
    box-shadow: 0 0 0 4px rgba(216, 157, 121, .14) !important;
}

.website-booking-submit,
.payos-checkout-btn,
.quick-combo-btn,
.best-deal-btn,
.mobile-book-btn {
    background: linear-gradient(135deg, #7c4f3d, #d89d79) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(124, 79, 61, .20) !important;
}

.website-booking-secondary {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
}

.website-payment-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.zalo-action-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
}






.payos-qr-box {
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    box-shadow: inset 0 0 0 8px #f8fafc !important;
}

.payos-qr-img {
    width: 214px !important;
    height: 214px !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 12px !important;
}

.payos-checkout-wrap {
    background: linear-gradient(180deg, #f0fdf4, #ffffff) !important;
    border: 1px solid rgba(34, 197, 94, .20) !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, .065) !important;
}

.website-paid-success {
    background: linear-gradient(135deg, #ecfdf5, #ffffff) !important;
}

@media (max-width: 640px) {
    .website-booking-modal {
        padding: 10px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .website-booking-panel {
        width: calc(100vw - 20px) !important;
        max-height: 94dvh !important;
        min-height: min(620px, 84dvh) !important;
        border-radius: 28px !important;
        margin: auto !important;
    }

    .website-booking-body {
        max-height: calc(94dvh - 88px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


    .payos-qr-box {
        width: 228px !important;
        min-height: 228px !important;
    }

    .payos-qr-img,
    .payos-qr-box canvas,
    .payos-qr-box img {
        width: 204px !important;
        height: 204px !important;
    }
}

@media (max-height: 700px) and (max-width: 640px) {
    .website-booking-panel {
        min-height: auto !important;
        max-height: 96dvh !important;
    }

    .website-booking-body {
        max-height: calc(96dvh - 84px) !important;
    }
}

html,
body {
    background: #ffffff !important;
    background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 58%, #f9fbff 100%) !important;
}

#homeDetailPage,
.page,
.page.active,
.container,
.calendar-page,
.home-detail-container,
.room-section,
.story-section,
.review-section,
.blog-section {
    background: transparent !important;
}

.highlight-card,
.highlights-section .highlight-card,
.highlight-grid .highlight-card {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .055) !important;
    background: #ffffff !important;
}

.website-booking-modal {
    background: rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

.website-booking-panel {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, .85) !important;
    box-shadow: 0 22px 74px rgba(15, 23, 42, .16) !important;
}

.website-booking-head {
    background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%) !important;
}




.payos-account-card {
    margin: 12px 0 !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;
}

.payos-account-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 7px 0 !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.payos-account-row+.payos-account-row {
    border-top: 1px dashed rgba(148, 163, 184, .24) !important;
}

.payos-account-row strong {
    color: #111827 !important;
    font-weight: 900 !important;
    text-align: right !important;
    word-break: break-all !important;
}

.payos-qr-wrap {
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .045) !important;
}

.room-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

.room-features span {
    min-width: 0 !important;
    width: 100% !important;
    padding: 7px 8px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.customer-toast {
    position: fixed !important;
    left: 50% !important;
    bottom: max(22px, env(safe-area-inset-bottom)) !important;
    z-index: 2147483647 !important;
    transform: translate(-50%, 18px) scale(.98) !important;
    max-width: min(520px, calc(100vw - 28px)) !important;
    padding: 13px 16px !important;
    border-radius: 18px !important;
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .24) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease, transform .22s ease !important;
}

.customer-toast.show {
    opacity: 1 !important;
    transform: translate(-50%, 0) scale(1) !important;
}

.customer-toast.error {
    background: #b42318 !important;
}

@media (max-width:768px) {
    .room-features {
        gap: 6px !important;
    }

    .room-features span {
        font-size: 9.5px !important;
        padding: 6px 6px !important;
    }
}

@media (max-width:430px) {
    .room-features span {
        font-size: 8.5px !important;
        padding: 5px 5px !important;
    }

}

html,
body {
    max-width: 100% !important;
}

html:not(.custom-booking-lock),
body:not(.custom-booking-lock) {
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
}

body.home-detail-open:not(.custom-booking-lock) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh !important;
    position: static !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: auto !important;
}

body.home-detail-open #homeDetailPage {
    overflow: visible !important;
    height: auto !important;
    min-height: 100dvh !important;
    -webkit-overflow-scrolling: touch !important;
}

body.home-detail-open #homeDetailPage .home-detail-container {
    overflow: visible !important;
}

#homeDetailPage {
    background: linear-gradient(180deg, #fffdfb 0%, #fff8f5 42%, #ffffff 100%) !important;
}

.home-header,
.detail-main .section {
    box-shadow: 0 10px 26px rgba(148, 90, 58, .06) !important;
    border-color: rgba(255, 188, 166, .22) !important;
}

.room-cta a,
.mobile-book-btn,
.btn-view-calendar,
.best-deal-btn,
.quick-combo-btn,
.custom-inline-btn,
.custom-booking-primary {
    -webkit-tap-highlight-color: transparent !important;
}

.quick-combo-btn,
.quick-combo-btn.primary,
.best-deal-btn {
    background: linear-gradient(135deg, #ff385c, #ff86a1) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 8px 18px rgba(255, 56, 92, .16) !important;
}

.quick-combo-btn:not(.primary) {
    background: #fff0f5 !important;
    color: #ff385c !important;
    border: 1px solid rgba(255, 56, 92, .16) !important;
    box-shadow: 0 6px 14px rgba(255, 56, 92, .08) !important;
}

.quick-combo-btn:hover,
.best-deal-btn:hover,
.room-cta a:hover {
    transform: none !important;
}

@media (max-width:1024px) {
    #coverImage.hero-image {
        border-radius: 22px !important;
        max-height: 420px !important;
    }

    #homeName {
        font-size: clamp(26px, 3.2vw, 34px) !important;
        line-height: 1.18 !important;
        letter-spacing: -.04em !important;
    }

    .home-header .price,
    #price.price {
        font-size: clamp(18px, 2.4vw, 23px) !important;
        line-height: 1.25 !important;
    }

    .room-trust {
        font-size: 12.5px !important;
        padding: 8px 11px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .room-cta {
        gap: 9px !important;
    }

    .room-cta a {
        min-height: 40px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
    }

    .best-deal-card {
        padding: 12px !important;
        border-radius: 20px !important;
        gap: 10px !important;
    }

    .best-deal-eyebrow,
    .custom-booking-kicker {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .best-deal-title {
        font-size: 14.5px !important;
        line-height: 1.22 !important;
    }

    .best-deal-meta {
        font-size: 11.5px !important;
        line-height: 1.38 !important;
    }

    .best-deal-btn {
        min-height: 36px !important;
        padding: 9px 12px !important;
        font-size: 11.5px !important;
    }

    .detail-custom-inline-card {
        padding: 16px !important;
        border-radius: 22px !important;
        gap: 12px !important;
    }

    .custom-inline-copy h3 {
        font-size: 18px !important;
        line-height: 1.18 !important;
    }

    .custom-inline-copy p {
        font-size: 12.4px !important;
        line-height: 1.45 !important;
    }

    .custom-inline-btn {
        min-height: 40px !important;
        padding: 10px 13px !important;
        font-size: 12.2px !important;
    }
}

@media (max-width:768px) {
    body.home-detail-open {
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.home-detail-open #homeDetailPage {
        padding-bottom: 72px !important;
    }

    body.home-detail-open #homeDetailPage .home-detail-container {
        padding: 10px 10px 12px !important;
    }

    .back-btn {
        min-height: 34px !important;
        padding: 7px 11px !important;
        font-size: 12px !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .07) !important;
    }

    #coverImage.hero-image {
        border-radius: 18px !important;
        aspect-ratio: 4/3 !important;
        max-height: none !important;
        box-shadow: 0 10px 22px rgba(82, 52, 40, .09) !important;
        margin-bottom: 12px !important;
    }

    .home-header {
        margin: 12px 0 14px !important;
        padding: 13px !important;
        border-radius: 20px !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    #homeName,
    .home-header #homeName {
        font-size: 22px !important;
        line-height: 1.16 !important;
        margin-bottom: 7px !important;
        letter-spacing: -.04em !important;
    }

    .home-header .price,
    #price.price {
        font-size: 16.5px !important;
        line-height: 1.25 !important;
        margin-bottom: 7px !important;
    }

    .room-trust {
        margin-top: 8px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        border-radius: 16px !important;
        font-size: 11.5px !important;
        line-height: 1.35 !important;
        display: block !important;
    }

    .room-cta {
        margin-top: 10px !important;
        gap: 7px !important;
        flex-direction: row !important;
    }

    .room-cta a {
        min-height: 36px !important;
        padding: 8px 9px !important;
        border-radius: 11px !important;
        font-size: 11.5px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
    }

    .best-today-deal {
        margin-top: 10px !important;
    }

    .best-deal-card {
        grid-template-columns: 1fr !important;
        padding: 11px !important;
        border-radius: 18px !important;
        gap: 9px !important;
        box-shadow: 0 8px 18px rgba(255, 56, 92, .07) !important;
    }

    .best-deal-eyebrow {
        font-size: 9px !important;
        padding: 3px 7px !important;
        margin-bottom: 6px !important;
        background: #ff385c !important;
    }

    .best-deal-title {
        font-size: 13.5px !important;
        line-height: 1.2 !important;
    }

    .best-deal-meta {
        font-size: 10.8px !important;
        line-height: 1.35 !important;
    }

    .best-deal-btn {
        width: 100% !important;
        min-height: 34px !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
    }

    .detail-custom-booking-inline {
        margin: 10px 0 2px !important;
    }

    .detail-custom-inline-card,
    .custom-inline-card {
        padding: 12px !important;
        border-radius: 18px !important;
        gap: 10px !important;
        box-shadow: 0 10px 24px rgba(255, 122, 69, .09) !important;
    }

    .custom-booking-kicker {
        font-size: 9.5px !important;
        padding: 4px 7px !important;
        margin-bottom: 6px !important;
    }

    .custom-inline-copy h3 {
        font-size: 15.5px !important;
        line-height: 1.18 !important;
    }

    .custom-inline-copy p {
        margin-top: 5px !important;
        font-size: 11.4px !important;
        line-height: 1.38 !important;
    }

    .custom-inline-btn {
        min-height: 36px !important;
        padding: 8px 10px !important;
        font-size: 11.3px !important;
        border-radius: 999px !important;
        box-shadow: 0 8px 18px rgba(255, 122, 69, .14) !important;
    }

    .section,
    body.home-detail-open #homeDetailPage .section {
        margin-top: 16px !important;
        margin-bottom: 14px !important;
    }

    .section h2 {
        font-size: 17px !important;
        margin-bottom: 10px !important;
    }

    .description,
    .home-content {
        font-size: 13.5px !important;
        line-height: 1.65 !important;
    }

    .amenity {
        font-size: 12px !important;
        padding: 10px 11px !important;
        border-radius: 14px !important;
    }

    .price-preview-card {
        padding: 9px !important;
        border-radius: 14px !important;
    }

    .price-preview-value {
        font-size: 15px !important;
    }

    .mobile-price-wrap span,
    .mobile-price-wrap small {
        font-size: 10px !important;
    }

    .mobile-price-wrap strong {
        font-size: 14.5px !important;
    }

    .section.suggested-section h2 {
        font-size: 12.2px !important;
        line-height: 1.35 !important;
        margin-bottom: 9px !important;
    }

    .suggest-card {
        gap: 7px !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .package-block {
        padding: 9px 8px !important;
        border-radius: 14px !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important;
    }

    .package-title {
        font-size: 11.8px !important;
        line-height: 1.2 !important;
    }

    .package-subcopy {
        font-size: 10.2px !important;
        line-height: 1.32 !important;
        margin-bottom: 6px !important;
    }

    .package-option {
        font-size: 10.4px !important;
        padding: 6px 7px !important;
        border-radius: 11px !important;
    }

    .quick-combo-btn {
        width: 100% !important;
        min-height: 31px !important;
        padding: 7px 8px !important;
        font-size: 10.5px !important;
        border-radius: 999px !important;
    }

    .quick-combo-btn.primary {
        background: linear-gradient(135deg, #ff385c, #ff86a1) !important;
        color: #fff !important;
    }
}

@media (max-width:390px) {

    #homeName,
    .home-header #homeName {
        font-size: 20px !important;
    }

    .home-header .price,
    #price.price {
        font-size: 15px !important;
    }

    .room-cta a {
        font-size: 10.8px !important;
        padding: 7px 8px !important;
    }

    .room-trust {
        font-size: 10.7px !important;
    }

    .best-deal-title {
        font-size: 12.8px !important;
    }

    .best-deal-meta,
    .custom-inline-copy p {
        font-size: 10.5px !important;
    }

    .custom-inline-copy h3 {
        font-size: 14.5px !important;
    }

    .quick-combo-btn,
    .best-deal-btn,
    .custom-inline-btn {
        font-size: 10.2px !important;
    }
}

@media (hover:none) and (pointer:coarse) {

    .home-header,
    .custom-booking-panel,
    .website-booking-panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .room-card,
    .best-deal-card,
    .custom-inline-card,
    .package-block {
        will-change: auto !important;
    }

    .room-card:hover,
    .room-cta a:hover,
    .quick-combo-btn:hover,
    .best-deal-btn:hover,
    .custom-inline-btn:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.room-suggest-row .room-quick-book-btn {
    min-height: 34px !important;
    padding: 8px 12px !important;
    font-size: 10.5px !important;
    line-height: 1.1 !important;
}

@media (max-width:768px) {
    .room-suggest-row .room-quick-book-btn {
        min-height: 31px !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
    }
}

@media (max-width:390px) {
    .room-suggest-row .room-quick-book-btn {
        min-height: 30px !important;
        padding: 7px 9px !important;
        font-size: 9.8px !important;
    }
}

#liveActivity.live-activity::before {
    content: "";
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    background: #34d399 !important;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .14),
        0 0 18px rgba(52, 211, 153, .58) !important;
    flex: 0 0 auto !important;
}

#liveActivity.live-activity::after {
    content: "";
    position: absolute !important;
    inset: -60% auto auto 22% !important;
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .08) !important;
    filter: blur(20px) !important;
    pointer-events: none !important;
}

#liveActivityText {
    position: relative !important;
    z-index: 1 !important;
}

#liveActivity.live-activity:not(.show) {
    opacity: 0 !important;
}

@media (max-width:768px) {
    #liveActivity.live-activity::before {
        width: 9px !important;
        height: 9px !important;
        box-shadow: 0 0 0 4px rgba(52, 211, 153, .13),
            0 0 14px rgba(52, 211, 153, .48) !important;
    }
}

@media (hover:none) and (pointer:coarse) {
    #liveActivity.live-activity {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

.main-menu {
    justify-content: center !important;
}

#liveActivity.live-activity {
    align-items: center !important;
}

#liveActivity.live-activity::before {
    display: none !important;
}

.live-activity-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    background: radial-gradient(circle at 25% 18%, rgba(255, 255, 255, .38), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    position: relative !important;
    z-index: 1 !important;
}

.live-activity-text {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 1 !important;
}

.live-proof-title {
    display: block !important;
    color: rgba(255, 255, 255, .78) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.live-proof-main {
    color: #ffffff !important;
}

.live-proof-badges {
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-top: 4px !important;
}

.live-proof-badges b {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    background: rgba(255, 255, 255, .14) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
}

#liveActivity[data-proof-type="payos"] .live-activity-icon,
#liveActivity[data-proof-type="paid"] .live-activity-icon {
    background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .42), transparent 34%),
        linear-gradient(135deg, rgba(52, 211, 153, .38), rgba(16, 185, 129, .16)) !important;
    box-shadow: 0 10px 24px rgba(16, 185, 129, .18),
        inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

#liveActivity[data-proof-type="tomorrow"] .live-activity-icon {
    background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .42), transparent 34%),
        linear-gradient(135deg, rgba(96, 165, 250, .38), rgba(59, 130, 246, .14)) !important;
}

#liveActivity[data-proof-type="premium"] .live-activity-icon {
    background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .42), transparent 34%),
        linear-gradient(135deg, rgba(251, 191, 36, .42), rgba(244, 114, 182, .16)) !important;
}

#liveActivity[data-proof-type="pending"] .live-activity-icon {
    background: radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .42), transparent 34%),
        linear-gradient(135deg, rgba(251, 146, 60, .40), rgba(251, 113, 133, .16)) !important;
}

@media (max-width:768px) {
    .live-proof-badges b {
        min-height: 18px !important;
        padding: 3px 6px !important;
        font-size: 9px !important;
    }
}

#liveActivity.live-activity {
    gap: 5px !important;
}

.live-activity-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

.live-activity-text {
    gap: 0 !important;
}

.live-proof-title {
    font-size: 6.4px !important;
    line-height: 1 !important;
    letter-spacing: .005em !important;
}

.live-proof-main {
    font-size: 7.8px !important;
    line-height: 1.08 !important;
    font-weight: 700 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.live-proof-badges {
    display: none !important;
}

#liveActivity.live-activity:not(.show) {
    transform: translateY(7px) scale(.98) !important;
}

@media (max-width:768px) {
    #liveActivity.live-activity {
        min-height: 19px !important;
        gap: 5px !important;
    }

    .live-activity-icon {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
        border-radius: 6px !important;
        font-size: 8.5px !important;
    }

    .live-proof-title {
        font-size: 6px !important;
    }

    .live-proof-main {
        font-size: 7.4px !important;
        line-height: 1.06 !important;
    }
}

@media (max-width:390px) {
    #liveActivity.live-activity {
        max-width: min(190px, calc(100vw - 18px)) !important;
    }

    .live-proof-main {
        font-size: 7.1px !important;
    }
}

#liveActivity.live-activity {
    position: fixed !important;
    left: 18px !important;
    bottom: 18px !important;
    background: rgba(20, 20, 20, .92) !important;
    color: white !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: .4s !important;
    max-width: 300px !important;
    min-height: 0 !important;
    width: auto !important;
    display: block !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
}

#liveActivity.live-activity.show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

#liveActivityText {
    color: white !important;
    text-shadow: none !important;
    display: inline !important;
}

#liveActivity.live-activity::before,
#liveActivity.live-activity::after,
#liveActivityIcon,
.live-activity-icon,
.live-proof-title,
.live-proof-main,
.live-proof-badges {
    display: none !important;
}

@media (max-width:768px) {
    #liveActivity.live-activity {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: unset !important;
        font-size: 13px !important;
        padding: 14px 16px !important;
        border-radius: 18px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width:768px) {
    body.home-detail-open #liveActivity.live-activity {
        bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width:430px) {
    body.home-detail-open #liveActivity.live-activity {
        bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width:768px) {

    .room-features span,
    .room-card .room-features span {
        font-size: 14px !important;
        line-height: 1.25 !important;
        padding: 8px 10px !important;
        min-height: 32px !important;
        border-radius: 999px !important;
    }
}

@media (max-width:430px) {

    .room-features span,
    .room-card .room-features span {
        font-size: 12.8px !important;
        line-height: 1.22 !important;
        padding: 7px 9px !important;
        min-height: 30px !important;
    }
}

@media (max-width:360px) {

    .room-features span,
    .room-card .room-features span {
        font-size: 12px !important;
        padding: 6px 8px !important;
        min-height: 28px !important;
    }
}

@media (min-width:769px) {

    .room-features span,
    .room-card .room-features span {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width:1024px) {

    .room-bottom-v32,
    .room-card .room-bottom-v32,
    .room-bottom {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .room-bottom-v32 .room-price,
    .room-card .room-bottom-v32 .room-price,
    .room-bottom .room-price {
        min-width: 0 !important;
        width: auto !important;
    }

    .room-bottom-v32 .room-btn,
    .room-card .room-bottom-v32 .room-btn,
    .room-bottom .room-btn {
        width: auto !important;
        min-width: 84px !important;
        justify-self: end !important;
        white-space: nowrap !important;
        text-align: center !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width:768px) {

    .room-bottom-v32,
    .room-card .room-bottom-v32,
    .room-bottom {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

    .room-bottom-v32 .room-price .price,
    .room-card .room-bottom-v32 .room-price .price,
    .room-bottom .room-price .price {
        font-size: 20px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .room-bottom-v32 .room-price .night,
    .room-card .room-bottom-v32 .room-price .night,
    .room-bottom .room-price .night {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    .room-bottom-v32 .room-btn,
    .room-card .room-bottom-v32 .room-btn,
    .room-bottom .room-btn {
        min-width: 78px !important;
        min-height: 33px !important;
        padding: 8px 10px !important;
        font-size: 10.8px !important;
        border-radius: 11px !important;
    }
}

@media (max-width:390px) {

    .room-bottom-v32,
    .room-card .room-bottom-v32,
    .room-bottom {
        gap: 6px !important;
    }

    .room-bottom-v32 .room-price .price,
    .room-card .room-bottom-v32 .room-price .price,
    .room-bottom .room-price .price {
        font-size: 18px !important;
    }

    .room-bottom-v32 .room-btn,
    .room-card .room-bottom-v32 .room-btn,
    .room-bottom .room-btn {
        min-width: 72px !important;
        padding: 7px 9px !important;
        font-size: 10px !important;
    }
}

img {
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
}

.room-image,
#coverImage,
#homeDetailPage .gallery-airbnb img,
.blog-card img,
.review-image,
.story-avatar img {
    background: linear-gradient(135deg, #eee8e3, #f8f5f2);
}

.room-image-wrap,
#coverImage,
#homeDetailPage .gallery-airbnb,
.blog-card,
.review-card {
    contain: layout paint;
}

.highlights-section,
#gallery,
#blogGallery,
#reviewGrid,
#homeDetailPage .section {
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

#homeDetailPage .section:has(#galleryImages) {
    contain-intrinsic-size: 720px;
}

.gallery-deferred-placeholder {
    min-height: 320px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 28px;
    border: 1px solid rgba(216, 157, 121, .16);
    border-radius: 22px;
    background: radial-gradient(circle at 100% 0, rgba(216, 157, 121, .14), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(248, 244, 240, .88));
    text-align: center;
    color: #6d625d;
}

.gallery-deferred-placeholder>span {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(90deg,
            rgba(216, 157, 121, .13) 20%,
            rgba(216, 157, 121, .27) 45%,
            rgba(216, 157, 121, .13) 70%);
    background-size: 220% 100%;
    animation: h3cnHdShimmer 1.25s linear infinite;
}

.gallery-deferred-placeholder strong {
    color: #302a27;
    font-size: 15px;
    font-weight: 800;
}

.gallery-deferred-placeholder small {
    max-width: 390px;
    font-size: 11px;
    line-height: 1.55;
}

body.home-detail-loading #coverImage {
    opacity: .45;
    filter: blur(4px);
}

#coverImage {
    transition: opacity .24s ease, filter .24s ease;
}

.booking-flow-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
    padding: 10px 12px;
    border: 1px solid rgba(216, 157, 121, .15);
    border-radius: 15px;
    background: rgba(255, 255, 255, .72);
    color: #625650;
    font-size: 10.5px;
    font-weight: 700;
}

.booking-flow-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.booking-flow-strip b {
    width: 21px;
    height: 21px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #d89d79, #875845);
    color: white;
    font-size: 9px;
}

.booking-flow-strip i {
    color: #bd9a85;
    font-style: normal;
    font-size: 16px;
}

@keyframes h3cnHdShimmer {
    to {
        background-position: -120% 0;
    }
}

@media (max-width: 768px) {
    .booking-flow-strip {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1.35fr;
        gap: 5px;
        padding: 9px;
        font-size: 8.7px;
    }

    .booking-flow-strip span {
        display: grid;
        justify-items: center;
        gap: 4px;
        text-align: center;
        line-height: 1.22;
    }

    .booking-flow-strip b {
        width: 19px;
        height: 19px;
        font-size: 8px;
    }

    .gallery-deferred-placeholder {
        min-height: 230px;
        padding: 20px 14px;
        border-radius: 17px;
    }

    .gallery-deferred-placeholder strong {
        font-size: 13px;
    }

    .gallery-deferred-placeholder small {
        font-size: 9.5px;
    }

    .room-card,
    .blog-card,
    .review-card,
    .gallery-deferred-placeholder {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-deferred-placeholder>span {
        animation: none;
    }

    #coverImage {
        transition: none;
    }
}

.secondary-content-loading {
    min-height: 260px;
}

.secondary-skeleton-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(216, 157, 121, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 28px rgba(52, 39, 32, .055);
    pointer-events: none;
    user-select: none;
}

.secondary-skeleton-media,
.secondary-skeleton-line,
.secondary-media-shell::before,
.live-activity-skeleton i,
.live-activity-skeleton em {
    background: linear-gradient(90deg, rgba(229, 220, 213, .72) 10%, rgba(250, 247, 244, .98) 43%, rgba(229, 220, 213, .72) 76%);
    background-size: 220% 100%;
    animation: secondarySkeletonShimmer 1.25s ease-in-out infinite;
}

.secondary-skeleton-media {
    width: 100%;
    aspect-ratio: 4 / 3;
}

.secondary-skeleton-body {
    display: grid;
    gap: 10px;
    padding: 15px;
}

.secondary-skeleton-line {
    display: block;
    width: 100%;
    height: 10px;
    border-radius: 999px;
}

.secondary-skeleton-line.short {
    width: 58%;
}

.secondary-skeleton-line.medium {
    width: 78%;
}

.secondary-content-state {
    min-height: 250px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 28px 20px;
    border: 1px dashed rgba(216, 157, 121, .26);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    text-align: center;
}

.secondary-content-state strong {
    color: #453832;
    font-size: 14px;
}

.secondary-content-state small {
    max-width: 310px;
    color: #81736c;
    font-size: 10px;
    line-height: 1.55;
}

.secondary-media-shell {
    position: relative;
    min-height: 180px;
    overflow: hidden;
    background: #f3efec;
}

.secondary-media-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transition: opacity .2s ease;
}

.secondary-media-shell.is-loaded::before {
    opacity: 0;
}

.secondary-media-shell img {
    position: relative;
    z-index: 1;
    min-height: 180px;
    opacity: 0;
    transition: opacity .24s ease;
}

.secondary-media-shell.is-loaded img {
    opacity: 1;
}

.live-activity-skeleton {
    min-width: 230px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.live-activity-skeleton i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.live-activity-skeleton span {
    display: grid;
    gap: 7px;
}

.live-activity-skeleton em {
    width: 100%;
    height: 8px;
    border-radius: 999px;
}

.live-activity-skeleton em:last-child {
    width: 62%;
}

@keyframes secondarySkeletonShimmer {
    to {
        background-position: -120% 0;
    }
}

@media (max-width: 640px) {
    .secondary-content-loading {
        min-height: 220px;
    }

    .secondary-skeleton-card {
        border-radius: 16px;
    }

    .secondary-skeleton-body {
        padding: 12px;
    }

    .secondary-content-state {
        min-height: 210px;
        padding: 22px 14px;
        border-radius: 17px;
    }

    .secondary-content-state strong {
        font-size: 13px;
    }

    .secondary-content-state small {
        font-size: 9.5px;
    }

    .secondary-media-shell,
    .secondary-media-shell img {
        min-height: 145px;
    }

    .live-activity.is-loading {
        min-width: 205px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .secondary-skeleton-media,
    .secondary-skeleton-line,
    .secondary-media-shell::before,
    .live-activity-skeleton i,
    .live-activity-skeleton em {
        animation: none;
    }

    .secondary-media-shell::before,
    .secondary-media-shell img {
        transition: none;
    }
}

:root {
    --about-ink: #222222;
    --about-muted: #626262;
    --about-soft: #f8f8f8;
    --about-line: #e8e8e8;
    --about-accent: #d17b5b;
    --about-accent-dark: #7a4a38;
    --about-peach: #fff3ed;
    --about-sage: #eef7ef;
    --about-sky: #eef6fb;
    --about-lilac: #f5f0fb;
    --about-sun: #fff8e8;
    --about-shadow: 0 10px 30px rgba(34, 34, 34, .065);
}

#about {
    display: none;
}

html.about-route #about,
body.customer-about-route #about {
    display: block;
}

html.about-route .highlights-section,
html.about-route .tabs,
html.about-route .stats-bar,
html.about-route #homes,
html.about-route #calendarPage,
html.about-route #gallery,
body.customer-about-route .highlights-section,
body.customer-about-route .tabs,
body.customer-about-route .stats-bar,
body.customer-about-route #homes,
body.customer-about-route #calendarPage,
body.customer-about-route #gallery {
    display: none !important;
}

html.about-route #hero .flash-sale-card,
body.customer-about-route #hero .flash-sale-card {
    display: none !important;
}

.main-menu a.is-active {
    position: relative;
    color: var(--about-accent-dark) !important;
    font-weight: 800 !important;
}

.main-menu a.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.about-editorial-section {
    padding: clamp(58px, 6vw, 82px) 0 clamp(72px, 8vw, 104px);
    background: radial-gradient(circle at 10% 8%, rgba(255, 232, 219, .5), transparent 28%),
        radial-gradient(circle at 92% 55%, rgba(226, 243, 232, .46), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #fffdfc 48%, #fbfdfc 100%);
    color: var(--about-ink);
    overflow: clip;
}

#about>.container {
    width: min(calc(100% - 48px), 1120px);
    max-width: none;
    margin-inline: auto;
    padding: 0;
}

.about-editorial-content {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease;
}

.about-editorial-section p,
.about-intro-quote blockquote,
.about-inspiration-main blockquote {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
    overflow-wrap: break-word;
}

.about-editorial-skeleton {
    display: none;
}

#about.about-page-loading .about-editorial-content {
    opacity: 0;
    visibility: hidden;
}

#about.about-page-loading .about-editorial-skeleton {
    min-height: 420px;
    display: grid;
    align-content: start;
    gap: 15px;
}

#about.about-page-loading .about-editorial-skeleton>span,
#about.about-page-loading .about-editorial-skeleton>b,
#about.about-page-loading .about-editorial-skeleton>i,
#about.about-page-loading .about-editorial-skeleton em {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, #f0ece9 20%, #faf8f6 48%, #f0ece9 76%);
    background-size: 220% 100%;
    animation: aboutSkeleton 1.15s ease-in-out infinite;
}

#about.about-page-loading .about-editorial-skeleton>span {
    width: 130px;
    height: 12px;
}

#about.about-page-loading .about-editorial-skeleton>b {
    width: min(640px, 90%);
    height: 48px;
}

#about.about-page-loading .about-editorial-skeleton>i {
    width: min(760px, 100%);
    height: 14px;
}

#about.about-page-loading .about-editorial-skeleton>i.short {
    width: min(520px, 72%);
}

#about.about-page-loading .about-editorial-skeleton>div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
}

#about.about-page-loading .about-editorial-skeleton em {
    height: 170px;
    border-radius: 22px;
}

@keyframes aboutSkeleton {
    to {
        background-position: -120% 0;
    }
}

.about-intro-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
    gap: clamp(34px, 5vw, 64px);
    align-items: center;
    padding-bottom: 58px;
    border-bottom: 1px solid var(--about-line);
}

.about-intro-copy {
    min-width: 0;
}

.about-intro-copy>span,
.about-belief-section>header>span {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--about-accent-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .11em;
}

.about-intro-copy h1 {
    max-width: 680px;
    margin: 0 0 22px;
    color: var(--about-ink);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.038em;
    text-wrap: balance;
}

.about-intro-copy p {
    max-width: 760px;
    margin: 0 0 17px;
    color: var(--about-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.78;
}

.about-intro-copy p:last-child {
    margin-bottom: 0;
}

.about-intro-copy .about-intro-lead {
    color: #484848;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
}

.about-intro-quote {
    position: relative;
    min-width: 0;
    padding: 30px;
    border: 1px solid var(--about-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--about-shadow);
}

.about-intro-quote>span {
    display: block;
    height: 42px;
    color: #d8a58a;
    font-family: Georgia, serif;
    font-size: 66px;
    line-height: .85;
}

.about-intro-quote blockquote {
    margin: 8px 0 20px;
    color: #343434;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.018em;
}

.about-intro-quote small {
    display: block;
    color: var(--about-muted);
    font-size: 13px;
    font-weight: 700;
}

.about-journey-section {
    padding-top: 54px;
}

.journey-v51-overview {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(34px, 5vw, 58px);
    align-items: start;
}

.journey-v51-heading {
    min-width: 0;
}

.journey-v51-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--about-accent-dark);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .11em;
}

.journey-v51-eyebrow>i {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #d89d79;
    box-shadow: 0 0 0 5px rgba(216, 157, 121, .14);
}

.journey-v51-heading h2 {
    margin: 0;
    color: var(--about-ink);
    font-size: clamp(35px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.042em;
    text-wrap: balance;
}

.journey-v51-heading>p {
    max-width: 560px;
    margin: 20px 0 0;
    color: var(--about-muted);
    font-size: 16px;
    line-height: 1.76;
}

.journey-v51-signature {
    display: grid;
    grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto;
    gap: 10px;
    align-items: center;
    margin-top: 27px;
}

.journey-v51-signature span {
    color: #3d3d3d;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
}

.journey-v51-signature i {
    height: 1px;
    background: var(--about-line);
}

.journey-v51-value-panel {
    padding: 24px;
    border: 1px solid #f0ded5;
    border-radius: 26px;
    background: linear-gradient(145deg, #ffffff 0%, #fff9f6 100%);
    box-shadow: 0 14px 34px rgba(122, 74, 56, .075);
}

.journey-v51-panel-title {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.journey-v51-heart,
.journey-v51-value-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, #e59a79, #b8664a);
}

.journey-v51-value-grid .journey-v51-value-icon {
    background: var(--value-icon);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--value-icon) 24%, transparent);
}

.journey-v51-heart {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 18px;
}

.journey-v51-panel-title>div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.journey-v51-panel-title small {
    color: var(--about-accent-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .075em;
}

.journey-v51-panel-title strong {
    color: #303030;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.journey-v51-value-grid {
    display: grid;
    gap: 10px;
}

.journey-v51-value-grid article {
    --value-bg: var(--about-peach);
    --value-icon: #d17b5b;
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding: 16px;
    border: 1px solid rgba(34, 34, 34, .06);
    border-radius: 18px;
    background: linear-gradient(145deg, #ffffff 0%, var(--value-bg) 100%);
}

.journey-v51-value-grid article:nth-child(2) {
    --value-bg: var(--about-sky);
    --value-icon: #5d8fa8;
}

.journey-v51-value-grid article:nth-child(3) {
    --value-bg: var(--about-sage);
    --value-icon: #5f8d67;
}

.journey-v51-value-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 16px;
}

.journey-v51-value-grid article>div {
    min-width: 0;
}

.journey-v51-value-grid strong {
    display: block;
    margin-bottom: 5px;
    color: #303030;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
}

.journey-v51-value-grid p {
    margin: 0;
    color: var(--about-muted);
    font-size: 14.5px;
    line-height: 1.65;
}

.journey-v51-divider {
    display: grid;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    gap: 20px;
    align-items: center;
    margin: 66px 0 38px;
}

.journey-v51-divider>span {
    height: 1px;
    background: var(--about-line);
}

.journey-v51-divider strong {
    color: #4b4b4b;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .105em;
    text-align: center;
}

.about-journey-timeline {
    position: relative;
    display: grid;
    gap: 28px;
}

.about-journey-timeline::before {
    content: "";
    position: absolute;
    top: 31px;
    bottom: 31px;
    left: 198px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #e59a79 0%, #7ba5bd 49%, #74a37a 100%);
    opacity: .66;
}

.about-journey-item {
    --stage-accent: #d77b59;
    --stage-dark: #8a4f38;
    --stage-soft: #fff2ec;
    --stage-border: #f2d2c5;
    position: relative;
    display: grid;
    grid-template-columns: 154px 88px minmax(0, 1fr);
    grid-template-areas: "meta marker card";
    align-items: start;
}

.about-journey-item:nth-child(2) {
    --stage-accent: #6394ad;
    --stage-dark: #426f86;
    --stage-soft: #edf7fc;
    --stage-border: #cfe4ee;
}

.about-journey-item:nth-child(3) {
    --stage-accent: #67966d;
    --stage-dark: #4f7d55;
    --stage-soft: #eef8ef;
    --stage-border: #d0e5d2;
}

.about-journey-meta {
    grid-area: meta;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 4px;
    align-self: start;
    margin: 0 18px 0 0;
    padding: 17px 18px;
    border: 1px solid var(--stage-border);
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, var(--stage-soft) 100%);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--stage-accent) 13%, transparent);
    text-align: left;
}

.about-journey-meta time {
    color: var(--stage-dark);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.about-journey-meta strong {
    color: #565656;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
}

.about-journey-marker {
    grid-area: marker;
    position: relative;
    z-index: 2;
    display: grid;
    place-items: start center;
    padding-top: 10px;
}

.about-journey-marker::after {
    content: "";
    position: absolute;
    top: 42px;
    right: -7px;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background: var(--stage-border);
}

.about-journey-marker>span {
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    border: 7px solid #fff;
    border-radius: 50%;
    background: var(--stage-accent);
    color: #fff;
    box-shadow: 0 0 0 1px var(--stage-border), 0 8px 20px color-mix(in srgb, var(--stage-accent) 24%, transparent);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.about-journey-card {
    grid-area: card;
    position: relative;
    min-width: 0;
    margin-left: 0;
    padding: 27px 28px 28px;
    border: 1px solid var(--stage-border);
    border-radius: 26px;
    background: linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--stage-soft) 52%, #fff) 100%);
    box-shadow: 0 10px 28px rgba(34, 34, 34, .06);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.about-journey-card::before {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin: 0 0 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--stage-accent), color-mix(in srgb, var(--stage-accent) 55%, #fff));
}

.about-journey-card-head {
    display: block;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(34, 34, 34, .08);
}

.about-journey-card-head>div {
    min-width: 0;
}

.about-journey-card-head small {
    display: block;
    margin-bottom: 7px;
    color: var(--stage-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: .1em;
}

.about-journey-card-head h3 {
    margin: 0;
    color: #292929;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.026em;
}

.about-journey-card-head p {
    margin: 8px 0 0;
    color: var(--about-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.about-journey-story {
    display: grid;
    gap: 12px;
    padding: 20px 0;
}

.about-journey-story p {
    margin: 0;
    color: var(--about-muted);
    font-size: 15.5px;
    line-height: 1.74;
}

.about-journey-impact {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.about-journey-impact span {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--stage-border);
    border-radius: 999px;
    background: var(--stage-soft);
    color: #4b4b4b;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.about-journey-impact i {
    color: var(--stage-accent);
}

.about-belief-section {
    margin-top: 78px;
    padding-top: 72px;
    border-top: 1px solid var(--about-line);
    content-visibility: auto;
    contain-intrinsic-size: 620px;
}

.about-belief-section>header {
    max-width: 720px;
    margin-bottom: 32px;
}

.about-belief-section>header h2 {
    margin: 0;
    color: var(--about-ink);
    font-size: clamp(31px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.about-belief-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.about-belief-grid article {
    --belief-accent: #d77b59;
    --belief-bg: #fff3ed;
    --belief-border: #f1d5c9;
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 17px;
    row-gap: 8px;
    align-items: start;
    padding: 25px;
    border: 1px solid var(--belief-border);
    border-radius: 24px;
    background: linear-gradient(150deg, #ffffff 0%, var(--belief-bg) 100%);
    box-shadow: 0 10px 28px rgba(34, 34, 34, .055);
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.about-belief-grid article:nth-child(2) {
    --belief-accent: #5f91aa;
    --belief-bg: #eef7fb;
    --belief-border: #d3e7f0;
}

.about-belief-grid article:nth-child(3) {
    --belief-accent: #8b73ac;
    --belief-bg: #f5f0fb;
    --belief-border: #e4d9f0;
}

.about-belief-grid article:nth-child(4) {
    --belief-accent: #5f8d67;
    --belief-bg: #eef7ef;
    --belief-border: #d3e6d6;
}

.about-belief-grid article:nth-child(5) {
    --belief-accent: #b18a43;
    --belief-bg: #fff8e8;
    --belief-border: #efe0b9;
    grid-column: 1 / -1;
    width: calc(50% - 9px);
    justify-self: center;
}

.about-belief-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--belief-accent), color-mix(in srgb, var(--belief-accent) 42%, #fff));
}

.about-belief-grid article>i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    grid-row: 1 / span 2;
    margin-bottom: 0;
    border-radius: 16px;
    background: var(--belief-accent);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--belief-accent) 22%, transparent);
    font-size: 19px;
}

.about-belief-grid strong {
    grid-column: 2;
    display: block;
    margin-bottom: 0;
    color: #303030;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.42;
}

.about-belief-grid p {
    grid-column: 2;
    margin: 0;
    color: var(--about-muted);
    font-size: 15px;
    line-height: 1.7;
}

.about-inspiration-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(250px, .88fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 72px;
    padding: 32px;
    border: 1px solid var(--about-line);
    border-radius: 28px;
    background: var(--about-soft);
    content-visibility: auto;
    contain-intrinsic-size: 250px;
}

.about-inspiration-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.about-inspiration-main>span {
    color: #d8a58a;
    font-family: Georgia, serif;
    font-size: 58px;
    line-height: .8;
}

.about-inspiration-main blockquote {
    margin: 0;
    color: #2f2f2f;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.028em;
}

.about-inspiration-lines {
    display: grid;
    gap: 8px;
}

.about-inspiration-lines p,
.about-inspiration-lines strong {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
}

.about-inspiration-lines p {
    color: var(--about-muted);
}

.about-inspiration-lines strong {
    color: #3b3b3b;
    font-weight: 700;
}

.about-inspiration-panel>a {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 12px;
    background: #222;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: transform .2s ease, background-color .2s ease;
}

@media (hover: hover) and (pointer: fine) {

    .about-journey-card:hover,
    .about-belief-grid article:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 36px rgba(34, 34, 34, .085);
    }

    .about-inspiration-panel>a:hover {
        transform: translateY(-2px);
        background: #000;
    }
}

@media (max-width: 900px) {
    #about>.container {
        width: min(calc(100% - 40px), 760px);
    }

    .about-editorial-section {
        padding: 56px 0 82px;
    }

    .about-intro-panel,
    .journey-v51-overview {
        grid-template-columns: 1fr;
    }

    .about-intro-panel {
        gap: 30px;
        padding-bottom: 48px;
    }

    .about-intro-quote {
        max-width: 620px;
    }

    .about-journey-section {
        padding-top: 46px;
    }

    .journey-v51-value-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .journey-v51-value-grid article {
        grid-template-columns: 1fr;
    }

    .about-journey-timeline::before {
        left: 163px;
    }

    .about-journey-item {
        grid-template-columns: 126px 74px minmax(0, 1fr);
    }

    .about-journey-meta {
        margin-right: 14px;
        padding: 15px 14px;
        border-radius: 18px;
    }

    .about-journey-meta time {
        font-size: 19.5px;
    }

    .about-journey-meta strong {
        font-size: 15.5px;
    }

    .about-journey-marker {
        padding-top: 9px;
    }

    .about-journey-marker::after {
        top: 38px;
        right: -6px;
        width: 21px;
    }

    .about-journey-marker>span {
        width: 58px;
        height: 58px;
        border-width: 6px;
        font-size: 17px;
    }

    .about-journey-card {
        padding: 23px 24px 24px;
    }

    .about-belief-grid article {
        padding: 22px;
    }

    .about-inspiration-panel {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .8fr);
    }

    .about-inspiration-panel>a {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

@media (max-width: 640px) {
    #about>.container {
        width: calc(100% - 28px);
    }

    .about-editorial-section {
        padding: 42px 0 64px;
    }

    #about.about-page-loading .about-editorial-skeleton>div {
        grid-template-columns: 1fr;
    }

    #about.about-page-loading .about-editorial-skeleton em {
        height: 126px;
    }

    .about-intro-panel {
        gap: 24px;
        padding-bottom: 40px;
    }

    .about-intro-copy>span,
    .about-belief-section>header>span {
        margin-bottom: 11px;
        font-size: 11px;
    }

    .about-intro-copy h1 {
        margin-bottom: 18px;
        font-size: clamp(29px, 8.6vw, 35px);
        line-height: 1.15;
    }

    .about-intro-copy .about-intro-lead {
        font-size: 16.5px;
        line-height: 1.68;
    }

    .about-intro-copy p {
        margin-bottom: 15px;
        font-size: 15.5px;
        line-height: 1.72;
    }

    .about-intro-quote {
        padding: 22px;
        border-radius: 21px;
    }

    .about-intro-quote>span {
        height: 34px;
        font-size: 54px;
    }

    .about-intro-quote blockquote {
        margin: 7px 0 16px;
        font-size: 18px;
        line-height: 1.52;
    }

    .about-journey-section {
        padding-top: 38px;
    }

    .journey-v51-eyebrow {
        margin-bottom: 13px;
        font-size: 12.5px;
    }

    .journey-v51-heading h2 {
        font-size: clamp(30px, 8.5vw, 35px);
    }

    .journey-v51-heading>p {
        margin-top: 16px;
        font-size: 15.5px;
        line-height: 1.7;
    }

    .journey-v51-signature {
        gap: 7px;
        margin-top: 22px;
    }

    .journey-v51-signature span {
        font-size: 13px;
    }

    .journey-v51-value-panel {
        padding: 18px;
        border-radius: 22px;
    }

    .journey-v51-panel-title {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
    }

    .journey-v51-heart {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .journey-v51-panel-title small {
        font-size: 10.5px;
    }

    .journey-v51-panel-title strong {
        font-size: 16px;
    }

    .journey-v51-value-grid {
        grid-template-columns: 1fr;
    }

    .journey-v51-value-grid article {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 14px;
    }

    .journey-v51-value-icon {
        width: 40px;
        height: 40px;
    }

    .journey-v51-value-grid strong {
        font-size: 15px;
    }

    .journey-v51-value-grid p {
        font-size: 14px;
    }

    .journey-v51-divider {
        gap: 10px;
        margin: 48px 0 28px;
    }

    .journey-v51-divider strong {
        font-size: 13px;
        letter-spacing: .075em;
    }

    .about-journey-timeline {
        gap: 22px;
    }

    .about-journey-timeline::before {
        display: none;
    }

    .about-journey-item {
        grid-template-columns: minmax(0, 1fr) 56px;
        grid-template-areas: "meta marker"
            "card card";
        row-gap: 14px;
    }

    .about-journey-meta {
        width: min(162px, 100%);
        justify-self: start;
        margin: 0;
        padding: 13px 15px;
        border-radius: 17px;
    }

    .about-journey-meta time {
        font-size: 19px;
    }

    .about-journey-meta strong {
        font-size: 15.5px;
    }

    .about-journey-marker {
        align-self: center;
        padding-top: 0;
    }

    .about-journey-marker::after {
        display: none;
    }

    .about-journey-marker>span {
        width: 52px;
        height: 52px;
        border-width: 6px;
        font-size: 16px;
    }

    .about-journey-card {
        padding: 20px;
        border-radius: 21px;
    }

    .about-journey-card-head {
        padding-bottom: 15px;
    }

    .about-journey-card-head small {
        font-size: 10.5px;
    }

    .about-journey-card-head h3 {
        font-size: 19.5px;
    }

    .about-journey-card-head p {
        font-size: 13.5px;
    }

    .about-journey-story {
        gap: 10px;
        padding: 16px 0;
    }

    .about-journey-story p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    .about-journey-impact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .about-journey-impact span {
        width: 100%;
        min-height: 46px;
        justify-content: center;
        padding: 8px 7px;
        border-radius: 13px;
        font-size: 12px;
        text-align: center;
    }

    .about-belief-section {
        margin-top: 58px;
        padding-top: 52px;
    }

    .about-belief-section>header {
        margin-bottom: 22px;
    }

    .about-belief-section>header h2 {
        font-size: clamp(28px, 8vw, 34px);
    }

    .about-belief-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-belief-grid article,
    .about-belief-grid article:nth-child(4),
    .about-belief-grid article:nth-child(5) {
        grid-column: 1;
        width: 100%;
        max-width: none;
        padding: 20px;
        border-radius: 20px;
    }

    .about-belief-grid article>i {
        width: 45px;
        height: 45px;
        margin-bottom: 0;
    }

    .about-belief-grid strong {
        font-size: 16px;
    }

    .about-belief-grid p {
        font-size: 14.5px;
    }

    .about-inspiration-panel {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 52px;
        padding: 22px;
        border-radius: 22px;
    }

    .about-inspiration-main {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 9px;
    }

    .about-inspiration-main>span {
        font-size: 48px;
    }

    .about-inspiration-main blockquote {
        font-size: 22px;
    }

    .about-inspiration-lines p,
    .about-inspiration-lines strong {
        font-size: 14px;
    }

    .about-inspiration-panel>a {
        width: 100%;
    }
}

@media (max-width: 390px) {
    #about>.container {
        width: calc(100% - 24px);
    }

    .about-intro-copy h1 {
        font-size: 28px;
    }

    .journey-v51-divider strong {
        max-width: 210px;
    }

    .about-journey-card {
        padding: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .about-editorial-content,
    .about-journey-card,
    .about-belief-grid article,
    .about-inspiration-panel>a {
        transition: none;
    }

    #about.about-page-loading .about-editorial-skeleton>span,
    #about.about-page-loading .about-editorial-skeleton>b,
    #about.about-page-loading .about-editorial-skeleton>i,
    #about.about-page-loading .about-editorial-skeleton em {
        animation: none;
    }
}

body.home-detail-open #pricingPreview {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    min-height: 0 !important;
    margin-bottom: 12px !important;
}

body.home-detail-open #homeDetailPage .price-preview-card {
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 9px 7px !important;
    border: 1px solid #ece7e3 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(44, 32, 27, .045) !important;
    text-align: center !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

body.home-detail-open #homeDetailPage .price-preview-label {
    margin: 0 0 3px !important;
    color: #7d746f !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

body.home-detail-open #homeDetailPage .price-preview-value {
    max-width: 100% !important;
    color: #e74c6b !important;
    font-size: clamp(13.5px, 1.2vw, 16px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.35px !important;
    white-space: nowrap !important;
}

body.home-detail-open #homeDetailPage .pricing-details summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #ece7e3;
    border-radius: 12px;
    background: #faf9f8;
    color: #65483b;
    font-size: 12.5px;
    font-weight: 700;
    transition: background .18s ease, transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    body.home-detail-open #homeDetailPage .pricing-details summary:hover {
        background: #f5f2f0;
        transform: translateY(-1px);
    }
}

@media (max-width: 768px) {
    body.home-detail-open #pricingPreview {
        gap: 5px !important;
        margin-bottom: 9px !important;
    }

    body.home-detail-open #homeDetailPage .price-preview-card {
        min-height: 54px !important;
        padding: 7px 4px !important;
        border-radius: 12px !important;
        box-shadow: 0 3px 9px rgba(47, 34, 29, .035) !important;
    }

    body.home-detail-open #homeDetailPage .price-preview-label {
        margin-bottom: 2px !important;
        font-size: 9.5px !important;
    }

    body.home-detail-open #homeDetailPage .price-preview-value {
        font-size: clamp(11.5px, 3.4vw, 13.5px) !important;
        letter-spacing: -.45px !important;
    }

    body.home-detail-open #homeDetailPage .pricing-details summary {
        min-height: 35px;
        padding: 7px 10px;
        border-radius: 11px;
        font-size: 11.5px;
    }
}

@media (max-width: 390px) {
    body.home-detail-open #homeDetailPage .price-preview-value {
        font-size: 11px !important;
    }
}

.footer-policy-block {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-policy-title {
    display: block;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.footer-policy-links {
    display: grid;
    gap: 10px;
}

.footer-policy-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.footer-policy-link i {
    width: 18px;
    margin: 0;
    color: #ffe0b2;
    font-size: 14px;
    text-align: center;
    flex: 0 0 18px;
}

.footer-policy-link:hover,
.footer-policy-link:focus-visible {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .22);
    outline: none;
}

@media (max-width: 768px) {
    .footer-policy-block {
        margin-top: 18px;
        padding-top: 18px;
    }

    .footer-policy-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-policy-link {
        justify-content: flex-start;
        min-height: 50px;
        padding: 11px 12px;
        font-size: 12.5px;
    }
}

@media (max-width: 520px) {
    .footer-policy-links {
        grid-template-columns: 1fr;
    }

    .footer-policy-link {
        min-height: 46px;
        font-size: 13px;
    }
}

:root {
    --booking-ink: #222222;
    --booking-primary: #ff385c;
    --booking-primary-dark: #e31c5f;
    --booking-green: #008a05;
}

.booking-search-shell {
    display: none;
    position: relative;
    z-index: 30;
    padding: 22px 0 8px;
    background: var(--bg);
}

html.home-route .booking-search-shell {
    display: block;
}

.booking-search-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 26px;
    padding: 24px;
    box-shadow: 0 12px 38px rgba(0, 0, 0, .08);
}

.booking-search-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.booking-search-eyebrow,
.booking-modal-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    color: var(--booking-primary-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.booking-search-copy h2 {
    margin: 0;
    color: var(--booking-ink);
    font-size: clamp(22px, 2.2vw, 31px);
    line-height: 1.2;
    letter-spacing: -.035em;
}

.booking-search-copy p {
    max-width: 680px;
    margin: 7px 0 0;
    color: var(--booking-muted);
    font-size: 14px;
    line-height: 1.55;
}

.booking-search-flow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f7f7f7;
    color: #4f4f4f;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.booking-search-flow i {
    color: #b0b0b0;
    font-style: normal;
}

.booking-search-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr auto;
    align-items: end;
    gap: 10px;
    padding: 9px;
    border: 1px solid var(--booking-line);
    border-radius: 20px;
    background: #ffffff;
}

.booking-search-field {
    position: relative;
    min-width: 0;
    padding: 8px 13px;
    border-radius: 14px;
    transition: background .18s ease, box-shadow .18s ease;
}

.booking-search-field:hover,
.booking-search-field:focus-within {
    background: var(--booking-soft);
}

.booking-search-field:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 15%;
    width: 1px;
    height: 70%;
    background: #ebebeb;
}

.booking-search-field span {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-ink);
    font-size: 11px;
    font-weight: 800;
}

.booking-search-field select,
.booking-search-field input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #484848;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.booking-time-hint {
    display: inline !important;
    margin-left: 4px !important;
    color: #8b8b8b !important;
    font-size: .86em !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

.booking-time-input {
    color-scheme: light;
    font-variant-numeric: tabular-nums;
}

.booking-search-field .booking-time-input {
    min-height: 22px;
}

.booking-time-input::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 3px;
    cursor: pointer;
    opacity: .68;
}

.booking-time-input:focus::-webkit-calendar-picker-indicator,
.booking-time-input:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

.booking-search-primary,
.booking-unified-cta {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--booking-primary), var(--booking-primary-dark));
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(227, 28, 95, .22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.booking-search-primary {
    min-height: 54px;
    padding: 0 20px;
    white-space: nowrap;
    font-size: 13px;
}

.booking-search-primary:hover,
.booking-unified-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 11px 25px rgba(227, 28, 95, .27);
}

.booking-search-price {
    display: grid;
    gap: 10px;
    margin-top: 13px;
}

.booking-price-item,
.booking-price-note {
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid #ebebeb;
    border-radius: 16px;
    background: #ffffff;
}

.booking-price-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--booking-muted);
    font-size: 10.5px;
    font-weight: 700;
}

.booking-price-item strong {
    display: block;
    color: var(--booking-ink);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.booking-price-item.deposit {
    background: #fff8f9;
    border-color: rgba(255, 56, 92, .18);
}

.booking-price-item.deposit strong {
    color: var(--booking-primary-dark);
}

.booking-price-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f7f7;
    color: #545454;
    font-size: 11px;
    line-height: 1.45;
}

.booking-price-note i {
    color: var(--booking-green);
    font-size: 15px;
}

.booking-search-loading {
    grid-column: 1 / -1;
    padding: 14px;
    border-radius: 15px;
    background: #f7f7f7;
    color: var(--booking-muted);
    font-size: 12px;
    text-align: center;
}

body.home-detail-open .room-cta {
    display: flex !important;
}

body.home-detail-open .room-cta .booking-unified-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 11px 19px !important;
}

.detail-custom-booking-inline {
    display: none !important;
}

.pricing-condition-list {
    display: grid;
    gap: 8px;
    margin-top: 15px;
    padding: 13px;
    border-radius: 16px;
    background: #f7f7f7;
}

.pricing-condition-list div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #4f4f4f;
    font-size: 11px;
    line-height: 1.45;
}

.pricing-condition-list i {
    width: 16px;
    margin-top: 2px;
    color: var(--booking-green);
    text-align: center;
}

.booking-summary-card .booking-summary-row.booking-summary-total,
.booking-summary-card .booking-summary-row.booking-summary-deposit {
    padding: 11px 0;
}

.booking-summary-card .booking-summary-row.booking-summary-total strong {
    color: var(--booking-ink);
    font-size: 17px;
}

.booking-summary-card .booking-summary-row.booking-summary-deposit strong {
    color: var(--booking-primary-dark);
    font-size: 18px;
}

.booking-summary-condition {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: #f7f7f7;
    color: #545454;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .booking-search-shell {
        padding: 18px 0 6px;
    }

    .booking-search-card {
        padding: 20px;
        border-radius: 23px;
    }

    .booking-search-top {
        align-items: flex-start;
    }

    .booking-search-flow {
        display: none;
    }

    .booking-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px;
    }

    .booking-search-field::before {
        display: none;
    }

    .booking-search-field {
        border: 1px solid #ebebeb;
        background: #ffffff;
    }

    .booking-search-primary {
        grid-column: 1 / -1;
        width: 100%;
    }

    .booking-price-note {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .booking-search-shell {
        padding: 12px 0 4px;
    }

    .booking-search-shell .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .booking-search-card {
        padding: 15px;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
    }

    .booking-search-top {
        margin-bottom: 13px;
    }

    .booking-search-copy h2 {
        font-size: 20px;
    }

    .booking-search-copy p {
        font-size: 12px;
        line-height: 1.5;
    }

    .booking-search-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0;
        border: 0;
        background: transparent;
    }

    .booking-search-field {
        padding: 10px 11px;
        border-radius: 14px;
    }

    .booking-search-field span {
        font-size: 10px;
    }

    .booking-search-field select,
    .booking-search-field input {
        font-size: 11.5px;
    }

    .booking-search-primary {
        min-height: 46px;
        border-radius: 13px;
        font-size: 12px;
    }

    .booking-search-price {
        gap: 7px;
        margin-top: 10px;
    }

    .booking-price-item {
        padding: 10px 8px;
        border-radius: 13px;
        text-align: center;
    }

    .booking-price-item span {
        font-size: 9px;
    }

    .booking-price-item strong {
        font-size: 14px;
    }

    .booking-price-note {
        padding: 10px 11px;
        border-radius: 13px;
        font-size: 10px;
    }

    body.home-detail-open .room-cta .booking-unified-cta {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .booking-search-card {
        padding: 13px;
    }

    .booking-search-grid {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .booking-search-field {
        padding: 9px;
    }

    .booking-search-price {
        grid-template-columns: 1fr 1fr;
    }

    .booking-price-item:first-child {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .booking-price-item:first-child span {
        margin: 0;
    }

    .booking-price-note {
        grid-column: 1 / -1;
    }
}

body.home-detail-open #homeDetailPage .detail-custom-booking-inline {
    display: block !important;
    margin: 22px 0 4px !important;
}

.custom-inline-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 22px !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 24px !important;
    background: radial-gradient(circle at 100% 0, rgba(255, 56, 92, .075), transparent 34%),
        #ffffff !important;
    box-shadow: 0 10px 32px rgba(34, 34, 34, .07) !important;
}

.custom-inline-main {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    gap: 15px;
}

.custom-inline-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff0f3;
    color: #e03155;
    font-size: 21px;
}

.custom-inline-copy {
    min-width: 0;
}

.custom-inline-copy .custom-booking-kicker {
    display: block;
    margin: 0 0 5px;
    color: #9f5d4d;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .11em;
}

.custom-inline-copy h3 {
    margin: 0 0 7px !important;
    color: #222222 !important;
    font-size: clamp(19px, 1.7vw, 24px) !important;
    line-height: 1.25 !important;
    letter-spacing: -.45px !important;
}

.custom-inline-copy p {
    max-width: 720px;
    margin: 0 !important;
    color: #6a6a6a !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}

.custom-inline-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 11px;
}

.custom-inline-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4f4f4f;
    font-size: 11.5px;
    font-weight: 700;
}

.custom-inline-benefits i {
    color: #16835d;
    font-size: 10px;
}

.custom-inline-btn,
.booking-search-primary,
body.home-detail-open .mobile-book-btn {
    border: 0 !important;
    background: linear-gradient(135deg, #ff385c 0%, #e61e4d 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(230, 30, 77, .21) !important;
    cursor: pointer;
}

.custom-inline-btn {
    min-width: 220px !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease !important;
}

.custom-inline-btn:hover,
.booking-search-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 26px rgba(230, 30, 77, .27) !important;
}

.booking-search-price {
    grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr) !important;
    align-items: stretch !important;
}

.booking-price-total {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 74px !important;
    border-color: rgba(255, 56, 92, .16) !important;
    background: #fff8fa !important;
}

.booking-price-total strong {
    color: #d91445 !important;
    font-size: clamp(21px, 2vw, 27px) !important;
}

.booking-price-note {
    min-height: 74px;
    padding: 14px 16px !important;
}

.booking-summary-card .booking-summary-payment {
    margin: 8px -4px 0;
    padding: 15px 14px !important;
    border: 1px solid rgba(255, 56, 92, .16);
    border-radius: 16px;
    background: #fff8fa;
}

.booking-summary-card .booking-summary-payment strong {
    color: #d91445 !important;
    font-size: 21px !important;
}

.best-deal-btn {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .custom-inline-card {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .custom-inline-btn {
        width: 100% !important;
        min-width: 0 !important;
    }

    .booking-search-price {
        grid-template-columns: minmax(170px, .8fr) minmax(0, 1.2fr) !important;
    }
}

@media (max-width: 768px) {
    body.home-detail-open #homeDetailPage .detail-custom-booking-inline {
        margin-top: 17px !important;
    }

    .custom-inline-card {
        gap: 14px !important;
        padding: 17px !important;
        border-radius: 20px !important;
    }

    .custom-inline-main {
        gap: 12px;
    }

    .custom-inline-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 18px;
    }

    .custom-inline-copy h3 {
        font-size: 19px !important;
    }

    .custom-inline-copy p {
        font-size: 12.5px !important;
    }

    .custom-inline-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .custom-inline-benefits span {
        font-size: 10.5px;
    }

    .custom-inline-btn {
        min-height: 47px !important;
        border-radius: 13px !important;
        font-size: 12.5px !important;
    }

    .booking-search-price {
        grid-template-columns: 1fr !important;
    }

    .booking-price-total,
    .booking-price-note {
        min-height: 0 !important;
    }

    .booking-price-total {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
}

@media (max-width: 430px) {
    .custom-inline-card {
        padding: 15px !important;
    }

    .custom-inline-main {
        align-items: flex-start;
    }

    .custom-inline-benefits {
        grid-template-columns: 1fr;
    }

    .booking-summary-card .booking-summary-payment {
        align-items: flex-start !important;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .custom-inline-btn,
    .booking-search-primary {
        transition: none !important;
    }
}

body.home-detail-open #homeDetailPage .detail-custom-booking-inline {
    margin-top: 20px !important;
}

body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-card {
    border-color: #e5e5e5 !important;
    background: linear-gradient(180deg, #fff 0%, #fffafa 100%) !important;
    box-shadow: 0 9px 26px rgba(34, 34, 34, .055) !important;
}

body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-icon {
    border: 1px solid #ffd7df;
    background: #fff0f3 !important;
    color: #d91445 !important;
}

body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-btn {
    background: linear-gradient(135deg, #ff385c, #e61e4d) !important;
    box-shadow: 0 8px 20px rgba(230, 30, 77, .2) !important;
}

:root {
    --booking-accent: #ff385c;
    --booking-accent-dark: #df1644;
    --booking-text: #222222;
    --booking-muted: #6a6a6a;
    --booking-line: #e7e7e7;
    --booking-soft: #fff7f8;
    --booking-success: #16835d;
    --booking-shadow: 0 18px 50px rgba(34, 34, 34, 0.10);
}

.custom-booking-head>div {
    min-width: 0 !important;
}

.custom-booking-head .custom-booking-kicker {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    color: #c3133d !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.09em !important;
}

.custom-booking-head p {
    max-width: 610px !important;
}

.custom-booking-close {
    cursor: pointer !important;
}

.custom-booking-grid label {
    min-width: 0 !important;
}

.custom-booking-grid input,
.custom-booking-grid select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 15px !important;
    outline: none !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.custom-booking-grid input:hover,
.custom-booking-grid select:hover {
    border-color: #bdbdbd !important;
}

.custom-booking-grid input:focus,
.custom-booking-grid select:focus {
    border-color: var(--booking-accent) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(255, 56, 92, 0.11) !important;
}

.custom-booking-grid input[aria-invalid="true"],
.custom-booking-grid select[aria-invalid="true"] {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.09) !important;
}

.custom-booking-actions {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.custom-booking-primary,
.custom-booking-secondary {
    padding: 11px 16px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
}

.custom-booking-primary {
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, var(--booking-accent), var(--booking-accent-dark)) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px rgba(223, 22, 68, 0.22) !important;
}

.custom-booking-secondary {
    border: 1px solid #dddddd !important;
    background: #ffffff !important;
    color: #333333 !important;
}

.custom-booking-primary:disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

.free-cell.booking-slot-selectable {
    cursor: pointer !important;
    touch-action: manipulation !important;
}

.free-cell.booking-slot-selectable:focus-visible {
    z-index: 4 !important;
    outline: 3px solid rgba(255, 56, 92, 0.28) !important;
    outline-offset: -3px !important;
}

@media (min-width: 641px) and (max-width: 980px) {
    .custom-booking-panel {
        width: min(720px, calc(100vw - 28px)) !important;
        max-height: 92dvh !important;
    }

    .custom-booking-head {
        padding: 21px 21px 16px !important;
    }

    .custom-booking-body {
        padding: 19px 21px 22px !important;
    }

    .custom-booking-actions {
        bottom: -22px !important;
        margin: 17px -21px -22px !important;
        padding-left: 21px !important;
        padding-right: 21px !important;
    }
}

@media (max-width: 640px) {
    .custom-booking-modal {
        align-items: flex-end !important;
        padding: 0 !important;
        background: rgba(15, 23, 42, 0.58) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .custom-booking-panel {
        width: 100% !important;
        max-width: none !important;
        max-height: 92dvh !important;
        border: 0 !important;
        border-radius: 25px 25px 0 0 !important;
        box-shadow: 0 -18px 58px rgba(15, 23, 42, 0.25) !important;
    }

    .custom-booking-head {
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        gap: 11px !important;
        padding: 17px 15px 13px !important;
    }

    .custom-booking-head h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
    }

    .custom-booking-head p {
        margin-top: 5px !important;
        font-size: 11.5px !important;
        line-height: 1.52 !important;
    }

    .custom-booking-close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .custom-booking-body {
        padding: 14px 14px 18px !important;
    }

    .custom-booking-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .custom-booking-grid label {
        gap: 6px !important;
        font-size: 11px !important;
    }

    .custom-booking-grid input,
    .custom-booking-grid select {
        min-height: 48px !important;
        padding: 0 13px !important;
        border-radius: 14px !important;
        font-size: 16px !important;
    }

    .custom-booking-actions {
        bottom: -18px !important;
        grid-template-columns: 0.72fr 1.28fr !important;
        gap: 8px !important;
        margin: 15px -14px -18px !important;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .custom-booking-primary,
    .custom-booking-secondary {
        min-height: 46px !important;
        padding: 10px 9px !important;
        border-radius: 13px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 380px) {
    .custom-booking-actions {
        grid-template-columns: 1fr !important;
    }
}

.free-cell.booking-slot-selectable {
    position: relative !important;
    -webkit-tap-highlight-color: rgba(22, 131, 93, 0.12) !important;
    transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.free-cell.booking-slot-selectable:hover,
.free-cell.booking-slot-selectable:focus-visible {
    background: #dff7e7 !important;
    box-shadow: inset 0 0 0 2px rgba(22, 131, 93, .34) !important;
    outline: none !important;
}

.free-cell.booking-slot-selectable:active {
    transform: scale(.96) !important;
}

:root {
    --v66-ink: #26211f;
    --v66-muted: #70665f;
    --v66-line: rgba(135, 88, 69, .15);
    --v66-soft: #fbf7f4;
    --v66-brand: #875845;
    --v66-accent: #d89d79;
    --v66-pink: #ff385c;
    --v66-green: #e8f8ee;
    --v66-shadow: 0 16px 42px rgba(75, 49, 39, .09);
}

.detail-route-skeleton {
    display: none;
}

html.detail-route:not(.app-ready) #homeDetailPage {
    display: block !important;
    min-height: 100vh !important;
    background: #fff !important;
}

html.detail-route:not(.app-ready) #homeDetailPage>.home-detail-container,
html.detail-route:not(.app-ready) .hero,
html.detail-route:not(.app-ready) .tabs,
html.detail-route:not(.app-ready) #homes,
html.detail-route:not(.app-ready) #calendarPage,
html.detail-route:not(.app-ready) #gallery,
html.detail-route:not(.app-ready) .stats-bar {
    display: none !important;
}

html.detail-route:not(.app-ready) .detail-route-skeleton {
    display: block !important;
}

.detail-route-skeleton-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 72px;
}

.detail-skeleton-back,
.detail-skeleton-cover,
.detail-skeleton-line,
.detail-skeleton-card,
.detail-skeleton-pills i {
    background: linear-gradient(90deg, #f1efed 20%, #faf9f8 40%, #f1efed 60%);
    background-size: 220% 100%;
    animation: v66Shimmer 1.15s ease-in-out infinite;
}

.detail-skeleton-back {
    width: 116px;
    height: 38px;
    border-radius: 999px;
    margin-bottom: 16px;
}

.detail-skeleton-cover {
    width: 100%;
    height: 430px;
    border-radius: 26px;
}

.detail-skeleton-line {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    margin-top: 12px;
}

.detail-skeleton-title {
    width: min(420px, 70%);
    height: 34px;
    margin-top: 22px;
}

.detail-skeleton-price {
    width: 190px;
    height: 20px;
}

.detail-skeleton-short {
    width: 62%;
}

.detail-skeleton-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 32px;
    margin-top: 28px;
}

.detail-skeleton-card {
    min-height: 310px;
    border-radius: 24px;
}

.detail-skeleton-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.detail-skeleton-pills i {
    width: 118px;
    height: 42px;
    border-radius: 14px;
}

@keyframes v66Shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

html.calendar-route #calendarPage {
    display: block !important;
}

.calendar-route #calendarPage {
    color: var(--v66-ink);
    padding-bottom: 28px;
}

.calendar-route #calendarPage .suggested-section {
    margin: 0 0 10px !important;
    padding: 22px !important;
    border: 1px solid var(--v66-line);
    border-radius: 25px;
    background: linear-gradient(145deg, #fff, var(--v66-soft));
    box-shadow: var(--v66-shadow);
}

.calendar-route .room-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px !important;
    margin: 18px 0 12px !important;
    overflow: visible !important;
}

.calendar-route .room-tab {
    min-width: 0 !important;
    min-height: 44px;
    padding: 9px 10px !important;
    border: 1px solid var(--v66-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #60493f !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 16px rgba(76, 51, 41, .045) !important;
}

.calendar-route .room-tab.active {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--v66-brand), var(--v66-accent)) !important;
    box-shadow: 0 11px 24px rgba(135, 88, 69, .20) !important;
}

.calendar-route .calendar-wrap {
    width: 100%;
    max-width: 100%;
    padding: 12px !important;
    border: 1px solid var(--v66-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--v66-shadow) !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.calendar-route .availability-grid {
    display: grid !important;
    grid-template-columns: 58px repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
}

.calendar-route .sticky-corner,
.calendar-route .hour-cell {
    position: sticky !important;
    left: 0 !important;
    z-index: 8 !important;
    width: 58px !important;
    min-width: 58px !important;
    background: #fff !important;
}

.calendar-route .sticky-corner {
    z-index: 18 !important;
}

.calendar-route .day-header {
    min-width: 0 !important;
    min-height: 52px;
    padding: 8px 4px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #59443b;
    font-size: 11.5px !important;
    line-height: 1.25;
    background: #fff !important;
}

.calendar-route .day-header.today {
    margin: 3px;
    min-height: 46px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--v66-brand), var(--v66-accent)) !important;
    border-radius: 12px !important;
}

.calendar-route .hour-cell,
.calendar-route .slot-cell {
    height: 42px !important;
    min-height: 42px !important;
}

.calendar-route .hour-cell {
    color: #77635a;
    font-size: 10.5px !important;
    font-weight: 800;
}

.calendar-route .free-cell {
    background: #f8fffa !important;
}

.calendar-route .free-cell.booking-slot-selectable {
    cursor: pointer;
    touch-action: manipulation;
}

.calendar-route .free-cell.booking-slot-selectable:hover,
.calendar-route .free-cell.booking-slot-selectable:focus-visible {
    background: var(--v66-green) !important;
    box-shadow: inset 0 0 0 2px rgba(31, 138, 91, .28) !important;
    outline: none !important;
}

.calendar-route .booked-cell {
    color: #a33d3d !important;
}

.calendar-route .calendar-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 14px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.calendar-route .calendar-page-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 5px;
    border: 1px solid rgba(255, 77, 125, .16);
    border-radius: 999px;
    background: #fff7fa;
    box-shadow: 0 8px 22px rgba(255, 56, 92, .08);
}

.calendar-route .calendar-page-button {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #b34c69;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.calendar-route .calendar-page-button:hover,
.calendar-route .calendar-page-button:focus-visible {
    background: #ffe5ed;
    color: #e72e62;
    outline: none;
}

.calendar-route .calendar-page-button.active {
    color: #fff;
    background: linear-gradient(135deg, #ff5b8a, #ff2f68);
    box-shadow: 0 8px 18px rgba(255, 47, 104, .28);
}

.calendar-route .calendar-page-button:active {
    transform: scale(.94);
}

#homeDetailPage .pricing-details {
    margin-top: 4px !important;
    border: 1px solid #ebe6e3 !important;
    border-radius: 15px !important;
    background: #fff !important;
    overflow: hidden !important;
}

#homeDetailPage .pricing-details summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    color: #3d3531 !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    list-style: none !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background .18s ease !important;
}

#homeDetailPage .pricing-details summary:hover {
    background: #fcfaf9 !important;
}

#homeDetailPage .pricing-details summary::-webkit-details-marker {
    display: none !important;
}

#homeDetailPage .pricing-details summary::before,
#homeDetailPage .pricing-details summary::after {
    content: none !important;
    display: none !important;
}

#homeDetailPage .pricing-details summary i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    border-radius: 50% !important;
    background: #f7f1ed !important;
    color: #875845 !important;
    font-size: 11px !important;
    transition: transform .22s ease !important;
}

#homeDetailPage .pricing-details[open] summary {
    border-bottom: 1px solid #eee8e5 !important;
}

#homeDetailPage .pricing-details[open] summary i {
    transform: rotate(180deg) !important;
}

#homeDetailPage .pricing-condition-list {
    display: grid !important;
    gap: 8px !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eee8e5 !important;
}

#homeDetailPage .pricing-condition-list div {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    color: #615751 !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

#homeDetailPage .pricing-condition-list i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #eaf7f0 !important;
    color: #16835d !important;
    font-size: 9px !important;
}

.custom-booking-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    padding: 18px !important;
    overflow: hidden !important;
    background: rgba(24, 31, 43, .52) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
}

.custom-booking-modal.show {
    display: flex !important;
}

.custom-booking-panel {
    display: flex !important;
    flex-direction: column !important;
    width: min(720px, calc(100vw - 36px)) !important;
    max-width: 720px !important;
    max-height: min(88dvh, 760px) !important;
    margin: 0 auto !important;
    border: 1px solid rgba(255, 255, 255, .86) !important;
    border-radius: 27px !important;
    background: #fff !important;
    box-shadow: 0 28px 90px rgba(17, 24, 39, .27) !important;
    overflow: hidden !important;
    transform: none !important;
}

.custom-booking-head {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 16px !important;
    align-items: start !important;
    flex: 0 0 auto !important;
    padding: 22px 24px 18px !important;
    border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
    background: linear-gradient(145deg, #fff, #fbf7f4) !important;
}

.custom-booking-head>div,
.custom-booking-grid label {
    min-width: 0 !important;
}

.custom-booking-head h3 {
    margin: 5px 0 7px !important;
    color: var(--v66-ink) !important;
    font-size: 25px !important;
    line-height: 1.2 !important;
    letter-spacing: -.035em !important;
}

.custom-booking-head p {
    max-width: 570px;
    margin: 0 !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

.custom-booking-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #475467 !important;
    font-size: 25px !important;
    line-height: 1 !important;
}

.custom-booking-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    padding: 21px 24px 24px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
}

.custom-booking-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    max-width: 100% !important;
}

.custom-booking-grid label {
    display: grid !important;
    gap: 7px !important;
    color: #475467 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.custom-booking-grid select,
.custom-booking-grid input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 51px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(148, 163, 184, .28) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: var(--v66-ink) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    outline: none !important;
}

.custom-booking-grid select:focus,
.custom-booking-grid input:focus {
    border-color: var(--v66-accent) !important;
    box-shadow: 0 0 0 4px rgba(216, 157, 121, .15) !important;
}

.custom-booking-actions {
    position: sticky !important;
    bottom: -24px !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: minmax(120px, .42fr) minmax(190px, 1fr) !important;
    gap: 10px !important;
    margin: 18px -24px -24px !important;
    padding: 15px 24px calc(15px + env(safe-area-inset-bottom)) !important;
    border-top: 1px solid #eee !important;
    background: rgba(255, 255, 255, .97) !important;
}

.custom-booking-primary,
.custom-booking-secondary {
    width: 100% !important;
    min-height: 49px !important;
    border-radius: 14px !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

html.custom-booking-lock,
body.custom-booking-lock {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

@media (max-width: 768px) {
    body.home-detail-open {
        padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    }

    .calendar-route .container {
        padding-inline: 12px !important;
    }

    .calendar-route .room-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px !important;
    }

    .calendar-route .room-tab {
        min-height: 40px;
        padding: 7px 5px !important;
        font-size: 11.5px !important;
        border-radius: 12px !important;
    }

    .calendar-route .calendar-wrap {
        padding: 6px !important;
        border-radius: 18px !important;
        overflow-x: hidden !important;
    }

    .calendar-route .availability-grid {
        grid-template-columns: 42px repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .calendar-route .sticky-corner,
    .calendar-route .hour-cell {
        width: 42px !important;
        min-width: 42px !important;
    }

    .calendar-route .day-header {
        min-height: 44px;
        padding: 5px 1px !important;
        font-size: 9px !important;
        letter-spacing: -.02em !important;
    }

    .calendar-route .day-header.today {
        margin: 2px !important;
        min-height: 40px !important;
        border-radius: 9px !important;
    }

    .calendar-route .hour-cell,
    .calendar-route .slot-cell {
        height: 37px !important;
        min-height: 37px !important;
    }

    .calendar-route .hour-cell {
        font-size: 8.5px !important;
    }

    .custom-booking-modal {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    .custom-booking-panel {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(86dvh, 680px) !important;
        margin: auto !important;
        border-radius: 24px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .86) !important;
    }

    .custom-booking-head {
        grid-template-columns: minmax(0, 1fr) 38px !important;
        gap: 10px !important;
        padding: 16px 16px 13px !important;
    }

    .custom-booking-head h3 {
        font-size: 21px !important;
    }

    .custom-booking-head p {
        font-size: 11.5px !important;
        line-height: 1.48 !important;
    }

    .custom-booking-close {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        font-size: 22px !important;
    }

    .custom-booking-body {
        padding: 14px 16px 16px !important;
        overflow-x: hidden !important;
    }

    .custom-booking-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .custom-booking-grid select,
    .custom-booking-grid input {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .custom-booking-actions {
        bottom: -16px !important;
        grid-template-columns: 102px minmax(0, 1fr) !important;
        margin: 14px -16px -16px !important;
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom)) !important;
    }

    .detail-route-skeleton-inner {
        padding: 16px 14px 56px;
    }

    .detail-skeleton-cover {
        height: 250px;
        border-radius: 20px;
    }

    .detail-skeleton-layout {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 22px;
    }

    .detail-skeleton-card {
        min-height: 220px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .calendar-route .calendar-wrap {
        overflow-x: hidden !important;
    }

    .calendar-route .availability-grid {
        grid-template-columns: 52px repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .calendar-route .sticky-corner,
    .calendar-route .hour-cell {
        width: 52px !important;
        min-width: 52px !important;
    }

    .calendar-route .day-header {
        font-size: 10px !important;
    }

    .detail-skeleton-cover {
        height: 350px;
    }

    .detail-skeleton-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
        gap: 22px;
    }
}

@media (max-width: 390px) {
    .custom-booking-actions {
        grid-template-columns: 90px minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .detail-skeleton-back,
    .detail-skeleton-cover,
    .detail-skeleton-line,
    .detail-skeleton-card,
    .detail-skeleton-pills i {
        animation: none !important;
    }
}

.booking-search-calendar-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-top: 12px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 56, 92, .18);
    border-radius: 999px;
    background: linear-gradient(135deg, #fff5f8 0%, #fff 100%);
    color: #d92e55;
    box-shadow: 0 7px 18px rgba(255, 56, 92, .08);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.booking-search-calendar-pill>i:first-child {
    font-size: 13px;
}

.booking-search-calendar-pill-arrow {
    margin-left: 1px;
    font-size: 9px;
    transition: transform .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .booking-search-calendar-pill:hover {
        transform: translateY(-1px);
        border-color: rgba(255, 56, 92, .30);
        background: #fff0f5;
        box-shadow: 0 10px 24px rgba(255, 56, 92, .13);
    }

    .booking-search-calendar-pill:hover .booking-search-calendar-pill-arrow {
        transform: translateX(2px);
    }
}

.detail-gallery-section {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.detail-gallery-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 56, 92, .12);
    border-radius: 22px;
    background: radial-gradient(circle at 92% 14%, rgba(255, 178, 198, .24), transparent 34%),
        linear-gradient(135deg, #fff8fa 0%, #ffffff 72%);
    box-shadow: 0 12px 30px rgba(91, 47, 58, .07);
}

.detail-gallery-heading-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: linear-gradient(135deg, #ff4f78, #ff8cab);
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 79, 120, .22);
    font-size: 20px;
}

.detail-gallery-heading-copy {
    min-width: 0;
}

.detail-gallery-kicker {
    display: block;
    margin-bottom: 4px;
    color: #d92e55;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
}

.detail-gallery-heading h2 {
    margin: 0;
    color: #2a2023;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.15;
}

.detail-gallery-heading p {
    margin: 5px 0 0;
    color: #75666b;
    font-size: 13px;
    line-height: 1.5;
}

.detail-gallery-heading-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(44, 32, 36, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: #5f5055;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.detail-gallery-heading-action i {
    color: #ec4d72;
    font-size: 10px;
}

@media (max-width: 1024px) {
    .detail-gallery-heading {
        gap: 12px;
        padding: 16px 17px;
        border-radius: 19px;
    }

    .detail-gallery-heading-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 18px;
    }

    .detail-gallery-heading h2 {
        font-size: 22px;
    }

    .detail-gallery-heading-action {
        padding: 7px 9px;
        font-size: 10.5px;
    }
}

@media (max-width: 768px) {
    .booking-search-calendar-pill {
        margin-top: 9px;
        padding: 8px 11px;
        font-size: 11px;
    }

    .detail-gallery-heading {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 11px;
        margin-bottom: 13px;
        padding: 14px;
        border-radius: 17px;
    }

    .detail-gallery-heading-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 16px;
    }

    .detail-gallery-kicker {
        margin-bottom: 3px;
        font-size: 8.5px;
        letter-spacing: .10em;
    }

    .detail-gallery-heading h2 {
        font-size: 19px;
    }

    .detail-gallery-heading p {
        margin-top: 4px;
        font-size: 11.5px;
        line-height: 1.45;
    }

    .detail-gallery-heading-action {
        display: none;
    }
}

@media (max-width: 430px) {
    .detail-gallery-heading {
        align-items: start;
        gap: 10px;
        padding: 12px;
        border-radius: 15px;
    }

    .detail-gallery-heading-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
        font-size: 15px;
    }

    .detail-gallery-heading h2 {
        font-size: 18px;
    }

    .detail-gallery-heading p {
        font-size: 11px;
    }
}

.booking-process-section {
    --process-pink: #ff385c;
    --process-pink-dark: #df1644;
    position: relative;
    overflow: hidden;
    margin-top: 42px;
    padding: 28px;
    border: 1px solid #ece7e5;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(74, 47, 38, .07);
}

.booking-process-section::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--process-pink), #ff7890 58%, #ffdbe2);
}

.booking-process-heading {
    max-width: 820px;
    margin-bottom: 20px;
}

.booking-process-kicker {
    display: inline-flex;
    margin-bottom: 7px;
    color: #a14f61;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.booking-process-heading h2 {
    margin: 0 0 8px;
    color: #27211f;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.22;
    letter-spacing: -.035em;
}

.booking-process-heading p {
    margin: 0;
    color: #6f6661;
    font-size: 13.5px;
    line-height: 1.65;
}

.booking-process-calendar-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 3px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 56, 92, .22);
    border-radius: 999px;
    background: #fff3f6;
    color: #d91f4c;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.booking-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.booking-step-card {
    --step-color: #a66b58;
    display: flex;
    min-width: 0;
    min-height: 218px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid #eee9e7;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #fdfbf9 100%);
}

.booking-step-payment {
    --step-color: #238362;
}

.booking-step-info {
    --step-color: #6a6fb0;
}

.booking-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.booking-step-number {
    color: #9a918d;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
}

.booking-step-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: color-mix(in srgb, var(--step-color) 12%, white);
    color: var(--step-color);
    font-size: 17px;
}

.booking-step-card h3 {
    margin: 16px 0 0;
    color: #2c2725;
    font-size: 17px;
    line-height: 1.35;
}

.booking-step-card p {
    margin: 8px 0 0;
    color: #706762;
    font-size: 12.5px;
    line-height: 1.58;
}

.booking-step-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
}

.booking-step-link,
.booking-step-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 12px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.booking-step-link-primary {
    border: 1px solid transparent;
    background: linear-gradient(135deg, #ff5270, #e82650);
    color: #fff;
}

.booking-step-button-secondary {
    border: 1px solid #e3dcd9;
    background: #fff;
    color: #554b47;
}

.booking-process-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #f0ecea;
}

.booking-process-assurance span {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 12px;
    background: #f8f6f5;
    color: #554c48;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.booking-process-assurance i {
    color: #1c8a63;
}

.custom-booking-preview {
    margin-top: 14px;
}

.custom-preview-empty {
    padding: 16px;
    border: 1px dashed #ddd4d0;
    border-radius: 16px;
    background: #faf8f7;
    color: #746a65;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.custom-preview-empty.custom-error-box {
    border-color: #f1b8c5;
    background: #fff4f6;
    color: #b42346;
}

.custom-price-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 56, 92, .16);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff8fa 0%, #fff 72%);
}

.custom-price-breakdown {
    min-width: 0;
}

.custom-price-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
}

.custom-price-total span {
    color: #766b66;
    font-size: 11px;
    font-weight: 700;
}

.custom-price-total strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: #d91445;
    font-size: clamp(23px, 2.3vw, 29px);
    line-height: 1.1;
    white-space: nowrap;
}

.custom-price-total small {
    color: #8a7f79;
    font-size: 10px;
    line-height: 1.35;
}

.custom-status-pill {
    display: inline-flex;
    max-width: 190px;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.custom-status-pill.idle {
    background: #f2efed;
    color: #675e59;
}

.custom-status-pill.checking {
    background: #fff4d8;
    color: #8b6200;
}

.custom-status-pill.available {
    background: #e8f8ef;
    color: #187653;
}

.custom-status-pill.unavailable {
    background: #fff0f3;
    color: #bd2144;
}

.custom-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.custom-detail-grid>div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #eee9e7;
    border-radius: 14px;
    background: #fff;
}

.custom-detail-grid span {
    display: block;
    margin-bottom: 4px;
    color: #968c87;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
}

.custom-detail-grid b {
    display: block;
    overflow-wrap: anywhere;
    color: #39322f;
    font-size: 12px;
    line-height: 1.35;
}

.custom-booking-note {
    margin-top: 10px;
    padding: 11px 13px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.5;
}

.custom-booking-note.checking,
.custom-booking-note.idle {
    background: #f8f6f4;
    color: #6d635e;
}

.custom-booking-note.available {
    background: #eaf8f0;
    color: #176d4e;
}

.custom-booking-note.unavailable {
    border: 1px solid #f4c4ce;
    background: #fff2f5;
    color: #ad1e40;
}

.image-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(56px, 7vh, 82px) clamp(58px, 6vw, 96px) clamp(72px, 9vh, 98px);
    overflow: hidden;
    overscroll-behavior: contain;
    background: rgba(8, 9, 12, .965);
    backdrop-filter: blur(14px) saturate(.82);
    -webkit-backdrop-filter: blur(14px) saturate(.82);
}

body.image-modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.image-zoom-stage {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.image-zoom-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: inherit;
}

.image-zoom-stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .52);
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    transition: transform .22s cubic-bezier(.2, .72, .25, 1);
    cursor: zoom-in;
    will-change: transform;
    -webkit-user-drag: none;
}

.image-zoom-stage.is-zoomed img {
    cursor: grab;
    transition: none;
}

.image-zoom-stage.is-dragging img {
    cursor: grabbing;
}

.image-zoom-stage.is-gesturing img {
    transition: none;
}

.image-modal-close,
.modal-prev,
.modal-next {
    position: absolute;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(22, 23, 28, .68);
    color: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease, opacity .18s ease;
    -webkit-tap-highlight-color: transparent;
}

.image-modal-close:hover,
.modal-prev:hover,
.modal-next:hover {
    background: rgba(255, 255, 255, .18);
}

.image-modal-close:active,
.modal-prev:active,
.modal-next:active {
    transform: scale(.94);
}

.image-modal-close {
    top: max(16px, env(safe-area-inset-top));
    right: max(18px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 21px;
}

.modal-prev,
.modal-next {
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}

.modal-prev:active,
.modal-next:active {
    transform: translateY(-50%) scale(.94);
}

.modal-prev {
    left: 16px;
}

.modal-next {
    right: 16px;
}

.image-modal.is-image-zoomed .modal-prev,
.image-modal.is-image-zoomed .modal-next {
    opacity: .28;
    pointer-events: none;
}

.image-zoom-toolbar {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 42px 72px 42px;
    gap: 3px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(20, 21, 25, .76);
    box-shadow: 0 12px 38px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

.image-zoom-toolbar button {
    min-width: 0;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .16s ease, transform .16s ease;
}

.image-zoom-toolbar button:hover {
    background: rgba(255, 255, 255, .12);
}

.image-zoom-toolbar button:active {
    background: rgba(255, 255, 255, .18);
    transform: scale(.94);
}

.image-zoom-toolbar .image-zoom-level {
    font-size: 11px;
    letter-spacing: .02em;
}

.image-zoom-mobile-hint {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: max(18px, env(safe-area-inset-top));
    display: none;
    max-width: calc(100vw - 130px);
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(20, 21, 25, .58);
    color: rgba(255, 255, 255, .86);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-50%);
    pointer-events: none;
}

@media (max-width:1024px) {
    .booking-process-section {
        padding: 23px;
    }

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

    .booking-step-card {
        display: grid;
        min-height: 0;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "number number" "icon title" "copy copy" "actions actions";
        column-gap: 10px;
        padding: 16px;
    }

    .booking-step-top {
        display: contents;
    }

    .booking-step-number {
        grid-area: number;
        justify-self: start;
        margin-bottom: 9px;
    }

    .booking-step-icon {
        grid-area: icon;
        align-self: center;
    }

    .booking-step-card h3 {
        grid-area: title;
        align-self: center;
        margin: 0;
    }

    .booking-step-card p {
        grid-area: copy;
        margin-top: 10px;
    }

    .booking-step-actions {
        grid-area: actions;
        margin-top: 0;
    }

    .custom-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.image-zoom-mobile-hint.is-hidden {
    opacity: 0;
    transition: opacity .28s ease;
}

@media (min-width:641px) and (max-width:1024px) {
    .image-modal {
        padding: 68px 54px 82px;
    }

    .image-zoom-stage {
        border-radius: 18px;
    }

    .image-modal-close {
        width: 42px;
        height: 42px;
    }

    .modal-prev,
    .modal-next {
        width: 42px;
        height: 42px;
    }

    .image-zoom-toolbar {
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .image-zoom-mobile-hint {
        display: block;
        top: max(16px, env(safe-area-inset-top));
    }
}

@media (max-width:640px) {
    .booking-process-section {
        margin-top: 30px;
        padding: 19px 14px 15px;
        border-radius: 21px;
    }

    .booking-process-heading {
        margin-bottom: 15px;
    }

    .booking-process-heading h2 {
        font-size: 22px;
    }

    .booking-process-heading p {
        font-size: 12px;
    }

    .booking-process-calendar-hint {
        margin: 3px 1px;
        padding: 4px 8px;
        font-size: 10.5px;
    }

    .booking-step-card {
        padding: 14px;
        border-radius: 16px;
    }

    .booking-step-icon {
        width: 37px;
        height: 37px;
        flex-basis: 37px;
        border-radius: 11px;
        font-size: 14px;
    }

    .booking-step-card h3 {
        font-size: 15px;
        line-height: 1.3;
    }

    .booking-step-card p {
        font-size: 11.5px;
        line-height: 1.52;
    }

    .booking-step-link,
    .booking-step-button {
        min-height: 40px;
        padding: 8px;
        font-size: 10.5px;
    }

    .booking-process-assurance {
        gap: 5px;
        margin-top: 12px;
        padding-top: 12px;
    }

    .booking-process-assurance span {
        min-height: 48px;
        flex-direction: column;
        gap: 3px;
        padding: 7px 3px;
        border-radius: 11px;
        font-size: 9px;
    }

    .custom-price-card {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 12px;
        border-radius: 16px;
    }

    .custom-status-pill {
        max-width: none;
        justify-self: start;
    }

    .custom-price-total strong {
        font-size: 24px;
    }

    .custom-detail-grid>div {
        padding: 10px;
    }

    .custom-detail-grid b {
        font-size: 11px;
    }

    .image-modal {
        padding: calc(52px + env(safe-area-inset-top)) 0 calc(70px + env(safe-area-inset-bottom));
        background: rgba(6, 7, 10, .985);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .image-zoom-stage {
        border-radius: 0;
    }

    .image-zoom-stage::after {
        display: none;
    }

    .image-zoom-stage img {
        max-width: 100vw;
        max-height: calc(100dvh - 122px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 0;
        box-shadow: none;
    }

    .image-modal-close {
        top: max(10px, env(safe-area-inset-top));
        right: max(10px, env(safe-area-inset-right));
        width: 40px;
        height: 40px;
        background: rgba(18, 19, 23, .76);
    }

    .modal-prev,
    .modal-next {
        width: 34px;
        height: 42px;
        border-radius: 12px;
        font-size: 15px;
        background: rgba(18, 19, 23, .48);
    }

    .modal-prev {
        left: max(5px, env(safe-area-inset-left));
    }

    .modal-next {
        right: max(5px, env(safe-area-inset-right));
    }

    .image-zoom-toolbar {
        bottom: max(10px, env(safe-area-inset-bottom));
        grid-template-columns: 38px 64px 38px;
        padding: 4px;
        background: rgba(18, 19, 23, .82);
    }

    .image-zoom-toolbar button {
        min-height: 34px;
        font-size: 17px;
    }

    .image-zoom-toolbar .image-zoom-level {
        font-size: 10px;
    }

    .image-zoom-mobile-hint {
        display: block;
    }
}

@media (max-width:360px) {
    .booking-process-assurance span {
        font-size: 8.3px;
    }

    .booking-step-actions {
        grid-template-columns: 1fr;
    }

    .custom-detail-grid {
        grid-template-columns: 1fr;
    }
}

.hero-image {
    cursor: zoom-in;
}

@media (prefers-reduced-motion:reduce) {
    .image-zoom-stage img {
        transition: none;
    }
}

html.calendar-route {
    --calendar-space-xl: 24px;
    --calendar-space-lg: 20px;
    --calendar-space-md: 16px;
    --calendar-space-sm: 12px;
}

html.calendar-route #bookingSearch,
html.calendar-route .about-editorial-section,
html.calendar-route .about-section,
html.calendar-route .why-section,
html.calendar-route .highlights-section,
html.calendar-route #homes,
html.calendar-route #gallery,
html.calendar-route .stats-bar {
    display: none !important;
}

html.calendar-route .container>.tabs {
    margin: 10px 0 18px;
}

html.calendar-route #calendarPage.page.active {
    display: block;
    padding: 0 0 34px;
}

html.calendar-route #calendarPage .suggested-section {
    margin: 0 0 var(--calendar-space-lg) !important;
    padding: 20px;
    border-radius: 24px;
}

html.calendar-route #calendarPage .suggested-section h2 {
    margin: 0 0 12px;
    line-height: 1.4;
}

html.calendar-route #customBookingInline {
    display: block;
    margin: 0 0 var(--calendar-space-xl) !important;
}

html.calendar-route #roomTabs.room-tabs {
    margin: 0 0 var(--calendar-space-md) !important;
    padding: 2px 0;
}

html.calendar-route .calendar-wrap {
    margin: 0 !important;
    padding: 12px;
    border-radius: 22px;
}

html.calendar-route .calendar-legend {
    margin: 0 0 12px !important;
}

html.calendar-route .calendar-pagination {
    margin-top: 16px !important;
}

html.calendar-route .day-header.selected,
html.calendar-route .day-header.selected:not(.today),
html.calendar-route .day-header.today.selected {
    color: #fff !important;
    background: linear-gradient(135deg, #ff8fb0 0%, #ff5b8b 55%, #ef3e72 100%) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32),
        0 7px 18px rgba(239, 62, 114, .23) !important;
}

html.calendar-route .day-header.selected strong,
html.calendar-route .day-header.selected div {
    color: inherit !important;
}

html.calendar-route .no-package {
    width: 100%;
    line-height: 1.5;
}

html.calendar-route .no-package::before {
    display: none !important;
    content: none !important;
}

html.calendar-route .no-package-loading {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 18px;
    border: 1px solid rgba(216, 157, 121, .24);
    border-radius: 18px;
    color: #71594e;
    text-align: center;
    background: linear-gradient(135deg, #fffaf6, #fff);
    box-shadow: 0 8px 22px rgba(92, 60, 44, .06);
}

html.calendar-route .no-package-empty {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    width: 100%;
    margin-top: 4px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid rgba(236, 183, 54, .58);
    border-radius: 20px;
    text-align: center;
    background: radial-gradient(circle at 50% -38%, rgba(255, 210, 74, .35), transparent 48%),
        linear-gradient(145deg, #fff0a8 0%, #fff7d4 48%, #fffdf4 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82),
        0 12px 28px rgba(185, 130, 15, .12);
}

html.calendar-route .no-package-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, rgba(255, 255, 255, .28), transparent 38%, rgba(255, 255, 255, .16));
    pointer-events: none;
}

html.calendar-route .no-package-empty strong {
    position: relative;
    z-index: 1;
    color: #d93670;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
}

html.calendar-route .no-package-empty span {
    position: relative;
    z-index: 1;
    max-width: 660px;
    color: #7b5a52;
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.55;
}

@media (min-width: 641px) and (max-width: 1100px) {
    html.calendar-route {
        --calendar-space-xl: 20px;
        --calendar-space-lg: 17px;
        --calendar-space-md: 14px;
    }

    html.calendar-route .container>.tabs {
        margin: 8px 0 15px;
    }

    html.calendar-route #calendarPage.page.active {
        padding-bottom: 28px;
    }

    html.calendar-route #calendarPage .suggested-section {
        padding: 17px;
        border-radius: 21px;
    }

    html.calendar-route .calendar-wrap {
        padding: 10px;
        border-radius: 20px;
    }

    html.calendar-route .no-package-empty {
        gap: 6px;
        padding: 17px 18px;
        border-radius: 18px;
    }

    html.calendar-route .custom-inline-card {
        grid-template-columns: minmax(0, 1fr) 142px !important;
        gap: 13px !important;
        padding: 14px 15px !important;
        border-radius: 18px !important;
    }

    html.calendar-route .custom-inline-main {
        gap: 10px;
    }

    html.calendar-route .custom-inline-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
        font-size: 16px;
    }

    html.calendar-route .custom-inline-copy .custom-booking-kicker {
        margin-bottom: 2px;
        font-size: 9px;
    }

    html.calendar-route .custom-inline-copy h3 {
        margin-bottom: 3px !important;
        font-size: 16px !important;
    }

    html.calendar-route .custom-inline-copy p {
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    html.calendar-route .custom-inline-benefits {
        gap: 5px 9px;
        margin-top: 6px;
    }

    html.calendar-route .custom-inline-benefits span {
        font-size: 9px;
    }

    html.calendar-route .custom-inline-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 39px !important;
        padding: 8px 11px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 768px) {
    html.calendar-route {
        --calendar-space-xl: 18px;
        --calendar-space-lg: 14px;
        --calendar-space-md: 12px;
    }

    html.calendar-route .container>.tabs {
        margin: 7px 0 12px !important;
        padding-bottom: 1px;
    }

    html.calendar-route #calendarPage.page.active {
        padding-bottom: 22px;
    }

    html.calendar-route #calendarPage .suggested-section {
        padding: 14px;
        border-radius: 18px;
    }

    html.calendar-route #calendarPage .suggested-section h2 {
        margin-bottom: 9px;
        font-size: 16px;
        line-height: 1.38;
    }

    html.calendar-route #customBookingInline {
        margin-bottom: 18px !important;
    }

    html.calendar-route #roomTabs.room-tabs {
        margin-bottom: 12px !important;
    }

    html.calendar-route .calendar-wrap {
        padding: 7px !important;
        border-radius: 17px !important;
    }

    html.calendar-route .calendar-legend {
        margin-bottom: 9px !important;
    }

    html.calendar-route .day-header.selected,
    html.calendar-route .day-header.selected:not(.today),
    html.calendar-route .day-header.today.selected {
        border-radius: 10px !important;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25),
            0 5px 12px rgba(201, 78, 114, .19) !important;
    }

    html.calendar-route .no-package-empty {
        gap: 5px;
        margin-top: 2px;
        padding: 14px 12px;
        border-radius: 16px;
    }

    html.calendar-route .no-package-empty strong {
        font-size: 13.5px;
    }

    html.calendar-route .no-package-empty span {
        max-width: 34rem;
        font-size: 11.5px;
        line-height: 1.5;
    }
}

@media (max-width: 640px) {
    html.calendar-route .custom-inline-card {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 11px 12px !important;
        border-radius: 15px !important;
    }

    html.calendar-route .custom-inline-main {
        gap: 8px;
    }

    html.calendar-route .custom-inline-icon {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
        border-radius: 10px;
        font-size: 14px;
    }

    html.calendar-route .custom-inline-copy .custom-booking-kicker {
        margin-bottom: 1px;
        font-size: 7.5px;
        letter-spacing: .08em;
    }

    html.calendar-route .custom-inline-copy h3 {
        margin-bottom: 2px !important;
        font-size: 14px !important;
        line-height: 1.22 !important;
    }

    html.calendar-route .custom-inline-copy p {
        font-size: 10.5px !important;
        line-height: 1.42 !important;
    }

    html.calendar-route .custom-inline-benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 7px;
        margin-top: 6px;
    }

    html.calendar-route .custom-inline-benefits span {
        min-width: 0;
        font-size: 8.5px;
        line-height: 1.3;
    }

    html.calendar-route .custom-inline-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 10px !important;
        border-radius: 10px !important;
        font-size: 10.5px !important;
        box-shadow: 0 6px 14px rgba(230, 30, 77, .18) !important;
    }
}

@media (max-width: 520px) {
    html.calendar-route #calendarPage .suggested-section {
        padding: 12px;
    }

    html.calendar-route #calendarPage .suggested-section h2 {
        font-size: 14.5px;
    }

    html.calendar-route #customBookingInline {
        margin-bottom: 16px !important;
    }

    html.calendar-route .calendar-wrap {
        padding: 6px !important;
    }
}

@media (max-width: 380px) {
    html.calendar-route .custom-inline-card {
        padding: 10px !important;
    }

    html.calendar-route .custom-inline-benefits {
        grid-template-columns: 1fr 1fr;
    }

    html.calendar-route .custom-inline-copy h3 {
        font-size: 13.5px !important;
    }

    .calendar-route #calendarPage .suggested-section {
        padding-bottom: 0px !important;
    }
}

html.calendar-route #suggestedPackages .no-package-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin: 4px 0 0;
    padding: 20px 22px;
    border: 1px solid #f0bd3e;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(135deg, #fff0a6 0%, #ffe6a8 48%, #ffd9e5 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 12px 28px rgba(185, 130, 15, .14);
    background: #FFE4ED !important;
}

html.calendar-route #suggestedPackages .no-package-empty::before,
html.calendar-route #suggestedPackages .no-package-empty::after {
    display: none;
    content: none
}

html.calendar-route #suggestedPackages .no-package-empty strong {
    color: #d92f6b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4
}

html.calendar-route #suggestedPackages .no-package-empty span {
    max-width: 650px;
    color: #76514c;
    font-size: 12.8px;
    font-weight: 500;
    line-height: 1.55
}

.booking-step-calendar .booking-step-actions {
    display: none
}

.mobile-book-bar {
    display: none
}

@media(max-width:768px) {
    body.home-detail-open {
        padding-bottom: calc(78px + env(safe-area-inset-bottom))
    }

    body.home-detail-open .mobile-book-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 100050;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(116px, auto);
        align-items: center;
        gap: 10px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #ece7e4;
        border-radius: 18px 18px 0 0;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -10px 28px rgba(30, 20, 16, .1);
        backdrop-filter: blur(16px);
        transform: translateZ(0);
        justify-content: space-between;
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap {
        min-width: 0
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap span {
        display: block;
        margin: 0 0 2px;
        color: #777;
        font-size: 10px;
        font-weight: 700
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap strong {
        display: block;
        color: #222;
        font-size: 15px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap
    }

    body.home-detail-open .mobile-book-bar .mobile-book-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 116px;
        min-height: 44px;
        padding: 10px 16px;
        border: 0;
        border-radius: 13px;
        background: linear-gradient(135deg, #ff668e, #ed3d70);
        color: #fff;
        font-size: 12.5px;
        font-weight: 800;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(237, 61, 112, .24)
    }

    .calendar-route #calendarPage .suggested-section {
        padding-bottom: 0px !important;
    }
}

@media(max-width:390px) {
    body.home-detail-open .mobile-book-bar {
        grid-template-columns: minmax(0, 1fr) 102px;
        gap: 7px;
        padding-inline: 11px
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap strong {
        font-size: 13.5px
    }

    body.home-detail-open .mobile-book-bar .mobile-book-btn {
        min-width: 102px;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 10.5px
    }
}

#homeDetailPage .pricing-card {
    position: sticky;
    top: 104px;
    width: 100%;
    max-width: 390px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(135, 88, 69, .14);
    border-radius: 24px;
    background: radial-gradient(circle at 100% 0, rgba(216, 157, 121, .17), transparent 34%), #fff;
    box-shadow: 0 18px 50px rgba(74, 48, 37, .1);
    align-self: start
}

#homeDetailPage .pricing-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 13px
}

#homeDetailPage .pricing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, #fff1f3, #fce2e7);
    color: #d92b50;
    font-size: 17px
}

#homeDetailPage .pricing-card-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #9b6c59;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: .11em
}

#homeDetailPage .pricing-card .pricing-card-title {
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    color: #24211f;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em
}

#homeDetailPage .pricing-card-subtitle {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid #f0e5df;
    border-radius: 16px;
    background: rgba(255, 250, 247, .94);
    color: #655952;
    font-size: 12.5px;
    line-height: 1.58
}

#homeDetailPage .pricing-card-subtitle>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #fff;
    color: #d92b50;
    box-shadow: 0 4px 12px rgba(89, 57, 44, .08)
}

#homeDetailPage .pricing-card #pricingPreview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 13px
}

#homeDetailPage .pricing-card .price-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 76px;
    padding: 10px 7px;
    border: 1px solid #ece7e4;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(73, 48, 38, .055);
    text-align: center
}

#homeDetailPage .pricing-card .price-preview-label {
    margin-bottom: 5px;
    color: #766a64;
    font-size: 10.5px;
    font-weight: 800
}

#homeDetailPage .pricing-card .price-preview-value {
    color: #e2274f;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap
}

#homeDetailPage .pricing-card .pricing-details {
    margin-top: 2px;
    border: 1px solid #eee6e1;
    border-radius: 14px;
    background: #fff
}

#homeDetailPage .pricing-card .pricing-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 13px;
    color: #704b3c;
    font-size: 12px;
    font-weight: 800;
    list-style: none;
    cursor: pointer
}

#homeDetailPage .pricing-card .pricing-details summary::-webkit-details-marker {
    display: none
}

#homeDetailPage .pricing-card .pricing-details summary i {
    transition: transform .22s ease
}

#homeDetailPage .pricing-card .pricing-details[open] summary i {
    transform: rotate(180deg)
}

#homeDetailPage .pricing-card #pricingTable {
    padding: 2px 13px 10px
}

#homeDetailPage .pricing-card .pricing-condition-list {
    display: grid;
    gap: 8px;
    margin-top: 13px
}

#homeDetailPage .pricing-card .pricing-condition-list>div {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    color: #665d58;
    font-size: 11px;
    line-height: 1.5
}

#homeDetailPage .pricing-card .pricing-condition-list i {
    color: #d92b50;
    margin-top: 2px
}

@media(max-width:1100px) {
    #homeDetailPage .pricing-card {
        position: static;
        max-width: none
    }
}

@media(max-width:768px) {
    html.calendar-route #suggestedPackages .no-package-empty {
        gap: 5px;
        padding: 14px 12px;
        border-radius: 16px
    }

    html.calendar-route #suggestedPackages .no-package-empty strong {
        font-size: 13.5px
    }

    html.calendar-route #suggestedPackages .no-package-empty span {
        font-size: 11.5px
    }

    #homeDetailPage .pricing-card {
        padding: 16px;
        border-radius: 21px
    }

    #homeDetailPage .pricing-card #pricingPreview {
        gap: 6px
    }

    #homeDetailPage .pricing-card .price-preview-card {
        min-height: 68px;
        padding: 8px 4px;
        border-radius: 13px
    }

    #homeDetailPage .pricing-card .price-preview-label {
        font-size: 9.5px
    }

    #homeDetailPage .pricing-card .price-preview-value {
        font-size: 13px
    }
}

html.calendar-route #hero,
html.calendar-route .story-section {
    display: flex !important;
}

html.calendar-route .story-section {
    display: block !important;
}

#hero.site-hero-media,
html.home-route #hero.site-hero-media,
html.calendar-route #hero.site-hero-media,
html.gallery-route #hero.site-hero-media {
    box-sizing: border-box !important;
    width: 100% !important;
    height: clamp(420px, 43.75vw, 620px) !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 32px 20px !important;
    flex: 0 0 auto !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

html.calendar-route #calendarTab.tab,
html.calendar-route #calendarTab.tab.active {
    background: linear-gradient(135deg, var(--brand-brown, #875845), var(--brand-terracotta, #d89d79)) !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(135, 88, 69, .18) !important;
}

@media (max-width: 992px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(340px, 50vw, 430px) !important;
        padding: 24px 18px !important;
    }
}

@media (max-width: 520px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(300px, 78vw, 350px) !important;
        padding: 18px 14px !important;
        background-position: center center !important;
    }
}

#hero.site-hero-media {
    position: relative !important;
    justify-content: flex-start !important;
    align-items: center !important;
    isolation: isolate;
    overflow: hidden;
}

#hero.site-hero-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,
            rgba(24, 17, 14, .68) 0%,
            rgba(24, 17, 14, .34) 44%,
            rgba(24, 17, 14, .08) 72%,
            rgba(24, 17, 14, .18) 100%);
    pointer-events: none;
}

#hero .hero-value-card {
    position: relative;
    z-index: 4;
    width: min(620px, calc(100% - 390px));
    margin-left: clamp(10px, 4vw, 54px);
    padding: clamp(22px, 2.6vw, 34px);
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 28px;
    background: rgba(35, 25, 21, .52);
    color: #fff;
    text-align: left;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .24);
}

#hero .hero-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff4ec;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1px;
}

#hero .hero-value-card h1 {
    max-width: 570px;
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -1.8px;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .24);
}

#hero .hero-value-card>p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .91);
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.68;
}

#hero .hero-audience {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

#hero .hero-audience span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 244, 235, .14);
    color: #fff8f2;
    font-size: 11px;
    font-weight: 750;
}

#hero .hero-conversion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

#hero .hero-starting-price {
    min-width: 0;
}

#hero .hero-starting-price small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 700;
}

#hero .hero-starting-price strong {
    display: block;
    color: #ffe0a8;
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 900;
    white-space: nowrap;
}

#hero .hero-primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient(135deg, #ff759a, #e84272);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(232, 66, 114, .28);
    transition: transform .2s ease, box-shadow .2s ease;
}

#hero .hero-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(232, 66, 114, .34);
}

#hero .flash-sale-card {
    right: clamp(18px, 3vw, 46px) !important;
    left: auto !important;
    bottom: clamp(18px, 3vw, 38px) !important;
}

#sharedCustomerReviews {
    width: min(calc(100% - 100px), 1400px);
    margin: clamp(36px, 5vw, 66px) auto 0;
}

#sharedCustomerReviews.route-hidden {
    display: none !important;
}

html.home-route #sharedCustomerReviews,
html.gallery-route #sharedCustomerReviews {
    display: block;
}

html.calendar-route #sharedCustomerReviews,
html.about-route #sharedCustomerReviews,
html.detail-route #sharedCustomerReviews {
    display: none !important;
}

html.home-route #bookingSearch {
    margin-top: clamp(24px, 4vw, 48px);
}

html.home-route body>.container:has(#roomGrid) {
    /* margin-top: clamp(26px, 3vw, 42px); */
}

html.home-route body>.container:has(#roomGrid)>.tabs {
    margin-top: 0;
}

html.home-route .story-section {
    margin-top: clamp(34px, 5vw, 62px) !important;
}

@media (max-width: 992px) {
    #hero .hero-value-card {
        width: min(610px, calc(100% - 300px));
        margin-left: 4px;
        padding: 22px;
        border-radius: 23px;
    }

    #hero .hero-value-card h1 {
        font-size: clamp(28px, 4.6vw, 40px);
    }

    #hero .flash-sale-card {
        right: 14px !important;
        bottom: 14px !important;
        width: 260px;
    }

    #sharedCustomerReviews {
        width: min(calc(100% - 36px), 1400px);
    }
}

@media (max-width: 768px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(380px, 103vw, 430px) !important;
        padding: 16px 14px !important;
        align-items: flex-end !important;
    }

    #hero.site-hero-media::before {
        background: linear-gradient(180deg,
                rgba(24, 17, 14, .08) 0%,
                rgba(24, 17, 14, .24) 34%,
                rgba(24, 17, 14, .76) 100%);
    }

    #hero .hero-value-card {
        width: 100%;
        margin: 0;
        padding: 17px;
        border-radius: 21px;
        background: rgba(35, 25, 21, .58);
    }

    #hero .hero-location-chip {
        margin-bottom: 9px;
        padding: 6px 9px;
        font-size: 9.5px;
    }

    #hero .hero-value-card h1 {
        margin-bottom: 8px;
        font-size: clamp(25px, 7.6vw, 31px) !important;
        line-height: 1.12;
        letter-spacing: -1px;
    }

    #hero .hero-value-card>p {
        font-size: 12px !important;
        line-height: 1.55;
    }

    #hero .hero-audience {
        gap: 6px;
        margin-top: 10px;
    }

    #hero .hero-audience span {
        padding: 5px 8px;
        font-size: 9px;
    }

    #hero .hero-conversion-row {
        gap: 10px;
        margin-top: 13px;
    }

    #hero .hero-starting-price small {
        font-size: 9px;
    }

    #hero .hero-starting-price strong {
        font-size: 15px;
    }

    #hero .hero-primary-cta {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 12px;
        font-size: 10.5px;
    }

    #hero .flash-sale-card {
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        width: auto !important;
        max-width: 165px;
        padding: 9px !important;
        border-radius: 14px !important;
    }

    #hero .flash-sale-card .flash-sub,
    #hero .flash-sale-card .flash-info,
    #hero .flash-sale-card .flash-guide,
    #hero .flash-sale-card .flash-social-proof {
        display: none !important;
    }

    #hero .flash-sale-card .flash-badge {
        margin-bottom: 4px;
        padding: 4px 7px;
        font-size: 8.5px;
    }

    #hero .flash-sale-card .flash-head {
        margin-bottom: 5px;
        font-size: 11px;
    }

    #hero .flash-sale-card .flash-btn {
        padding: 6px 8px;
        border-radius: 9px;
        font-size: 9px;
    }

    #sharedCustomerReviews {
        width: calc(100% - 28px);
        margin-top: 30px;
    }

    #sharedCustomerReviews .section-header {
        margin-bottom: 18px;
    }

    #sharedCustomerReviews .section-header h2 {
        font-size: 22px;
    }

    #sharedCustomerReviews .section-header p {
        font-size: 12px;
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap strong {
        font-size: 14px;
    }
}

@media (max-width: 390px) {
    #hero .hero-audience span:nth-child(2) {
        display: none;
    }

    #hero .hero-primary-cta {
        padding-inline: 10px;
    }
}

#hero .hero-value-card {
    width: min(500px, calc(100% - 410px)) !important;
    margin-left: clamp(8px, 3vw, 38px) !important;
    padding: clamp(16px, 1.8vw, 22px) !important;
    border-radius: 22px !important;
    background: rgba(38, 27, 23, .38) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    backdrop-filter: blur(9px) !important;
    -webkit-backdrop-filter: blur(9px) !important;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .18) !important;
}

#hero .hero-location-chip {
    margin-bottom: 10px !important;
    padding: 6px 10px !important;
    font-size: 10.5px !important;
    background: rgba(255, 255, 255, .10) !important;
}

#hero .hero-value-card h1 {
    max-width: 460px !important;
    margin-bottom: 8px !important;
    font-size: clamp(27px, 3.1vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px !important;
}

#hero .hero-value-card>p {
    max-width: 450px !important;
    font-size: clamp(12px, 1.05vw, 14px) !important;
    line-height: 1.5 !important;
}

#hero .hero-audience {
    gap: 6px !important;
    margin-top: 11px !important;
}

#hero .hero-audience span {
    padding: 5px 8px !important;
    font-size: 9.5px !important;
    background: rgba(255, 244, 235, .11) !important;
}

#hero .hero-conversion-row {
    gap: 12px !important;
    margin-top: 14px !important;
}

#hero .hero-starting-price small {
    font-size: 9.5px !important;
}

#hero .hero-starting-price strong {
    font-size: clamp(15px, 1.45vw, 19px) !important;
}

#hero .hero-primary-cta {
    min-height: 42px !important;
    padding: 10px 14px !important;
    border-radius: 13px !important;
    font-size: 11.5px !important;
    box-shadow: 0 9px 20px rgba(232, 66, 114, .22) !important;
}

@media (max-width: 1100px) {
    #hero .hero-value-card {
        width: min(470px, calc(100% - 300px)) !important;
        margin-left: 0 !important;
        padding: 17px !important;
    }

    #hero .hero-value-card h1 {
        font-size: clamp(25px, 3.8vw, 34px) !important;
    }
}

@media (max-width: 768px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(330px, 88vw, 380px) !important;
        padding: 12px !important;
    }

    #hero .hero-value-card {
        width: min(100%, 430px) !important;
        margin: 0 auto !important;
        padding: 13px 14px !important;
        border-radius: 17px !important;
        background: rgba(38, 27, 23, .46) !important;
        backdrop-filter: blur(7px) !important;
        -webkit-backdrop-filter: blur(7px) !important;
    }

    #hero .hero-location-chip {
        margin-bottom: 6px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    #hero .hero-value-card h1 {
        margin-bottom: 5px !important;
        font-size: clamp(20px, 6vw, 25px) !important;
        letter-spacing: -.7px !important;
    }

    #hero .hero-value-card>p {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    #hero .hero-audience {
        margin-top: 7px !important;
        gap: 4px !important;
    }

    #hero .hero-audience span {
        padding: 4px 6px !important;
        font-size: 7.8px !important;
    }

    #hero .hero-conversion-row {
        margin-top: 9px !important;
        gap: 8px !important;
    }

    #hero .hero-starting-price small {
        font-size: 7.8px !important;
    }

    #hero .hero-starting-price strong {
        font-size: 13px !important;
    }

    #hero .hero-primary-cta {
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 10px !important;
        font-size: 8.8px !important;
        gap: 5px !important;
    }
}

@media (max-width: 390px) {
    #hero .hero-value-card>p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #hero .hero-audience span:last-child {
        display: none !important;
    }
}

#hero .hero-value-card {
    width: min(430px, calc(100% - 430px)) !important;
    margin-left: clamp(8px, 2.6vw, 34px) !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255, 255, 255, .17) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, rgba(32, 23, 20, .38), rgba(32, 23, 20, .22)) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
}

#hero .hero-location-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
}

#hero .hero-location-chip i {
    color: #ffd4df !important;
    font-size: 9px !important;
}

#hero .hero-value-card h1 {
    max-width: 390px !important;
    margin: 0 0 5px !important;
    font-size: clamp(25px, 2.7vw, 37px) !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
}

#hero .hero-value-card>p {
    max-width: 390px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, .87) !important;
    font-size: clamp(11px, .96vw, 13px) !important;
    line-height: 1.42 !important;
}

#hero .hero-audience {
    display: none !important;
}

#hero .hero-conversion-row {
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

#hero .hero-starting-price {
    display: none !important;
    flex: 0 0 auto;
}

#hero .hero-starting-price.is-ready {
    display: block !important;
}

#hero .hero-starting-price small {
    margin-bottom: 1px !important;
    font-size: 8px !important;
}

#hero .hero-starting-price strong {
    font-size: clamp(13px, 1.2vw, 16px) !important;
}

#hero .hero-primary-cta {
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 11px !important;
    font-size: 10px !important;
    gap: 6px !important;
    box-shadow: 0 8px 18px rgba(232, 66, 114, .2) !important;
}

@media (max-width: 1100px) {
    #hero .hero-value-card {
        width: min(400px, calc(100% - 300px)) !important;
        margin-left: 0 !important;
        padding: 13px 15px !important;
    }

    #hero .hero-value-card h1 {
        font-size: clamp(23px, 3.3vw, 31px) !important;
    }
}

@media (max-width: 768px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(300px, 80vw, 350px) !important;
        padding: 10px !important;
    }

    #hero .hero-value-card {
        width: min(100%, 355px) !important;
        margin: 0 auto !important;
        padding: 10px 11px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, rgba(32, 23, 20, .45), rgba(32, 23, 20, .28)) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    #hero .hero-location-chip {
        margin-bottom: 4px !important;
        font-size: 7.4px !important;
        gap: 4px !important;
    }

    #hero .hero-location-chip i {
        font-size: 7px !important;
    }

    #hero .hero-value-card h1 {
        margin-bottom: 4px !important;
        font-size: clamp(18px, 5.4vw, 22px) !important;
        letter-spacing: -.55px !important;
    }

    #hero .hero-value-card>p {
        font-size: 8.8px !important;
        line-height: 1.34 !important;
    }

    #hero .hero-conversion-row {
        gap: 7px !important;
        margin-top: 7px !important;
    }

    #hero .hero-starting-price small {
        font-size: 6.8px !important;
    }

    #hero .hero-starting-price strong {
        font-size: 11px !important;
    }

    #hero .hero-primary-cta {
        min-height: 30px !important;
        padding: 6px 9px !important;
        border-radius: 9px !important;
        font-size: 8px !important;
        gap: 4px !important;
    }
}

@media (max-width: 390px) {
    #hero .hero-value-card {
        width: min(100%, 330px) !important;
    }

    #hero .hero-value-card>p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#hero.site-hero-media,
html.home-route #hero.site-hero-media,
html.calendar-route #hero.site-hero-media,
html.gallery-route #hero.site-hero-media {
    height: clamp(360px, 34vw, 480px) !important;
    padding: 22px 20px !important;
}

#hero .hero-value-card {
    width: min(500px, calc(100% - 430px)) !important;
    margin-left: clamp(8px, 2.4vw, 32px) !important;
    padding: 12px 14px 13px !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg,
            rgba(31, 22, 19, .32),
            rgba(31, 22, 19, .16)) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14) !important;
}

#hero .hero-location-chip {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 0 7px !important;
    padding: 6px 10px !important;
    border: 1px solid rgba(255, 224, 232, .34) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,
            rgba(255, 239, 229, .18),
            rgba(255, 219, 231, .16)) !important;
    color: #fff8f5 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

#hero .hero-location-chip i {
    color: #ffd5df !important;
    font-size: 9px !important;
}

#hero .hero-value-card h1 {
    max-width: none !important;
    margin: 0 0 7px !important;
    color: #fff !important;
    font-size: clamp(23px, 2.15vw, 29px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.85px !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
}

#hero .hero-feature-pill,
#hero .hero-value-card>p.hero-feature-pill {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .11) !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

#hero .hero-conversion-row {
    gap: 9px !important;
    margin-top: 9px !important;
}

#hero .hero-primary-cta {
    min-height: 34px !important;
    padding: 7px 11px !important;
    border-radius: 10px !important;
    font-size: 9.5px !important;
}

#hero .hero-starting-price small {
    font-size: 7.5px !important;
}

#hero .hero-starting-price strong {
    font-size: 13px !important;
}

@media (max-width: 1100px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(330px, 43vw, 400px) !important;
        padding: 18px 16px !important;
    }

    #hero .hero-value-card {
        width: min(450px, calc(100% - 285px)) !important;
        margin-left: 0 !important;
        padding: 11px 12px 12px !important;
    }

    #hero .hero-value-card h1 {
        font-size: clamp(20px, 2.65vw, 25px) !important;
    }

    #hero .hero-feature-pill,
    #hero .hero-value-card>p.hero-feature-pill {
        font-size: 9.5px !important;
    }
}

@media (max-width: 768px) {

    #hero.site-hero-media,
    html.home-route #hero.site-hero-media,
    html.calendar-route #hero.site-hero-media,
    html.gallery-route #hero.site-hero-media {
        height: clamp(285px, 76vw, 330px) !important;
        padding: 9px !important;
    }

    #hero .hero-value-card {
        width: min(100%, 355px) !important;
        margin: 0 auto !important;
        padding: 9px 10px 10px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg,
                rgba(31, 22, 19, .42),
                rgba(31, 22, 19, .24)) !important;
    }

    #hero .hero-location-chip {
        margin-bottom: 5px !important;
        padding: 4px 7px !important;
        font-size: 7.6px !important;
        gap: 4px !important;
    }

    #hero .hero-location-chip i {
        font-size: 7px !important;
    }

    #hero .hero-value-card h1 {
        margin-bottom: 5px !important;
        font-size: clamp(17px, 5vw, 20px) !important;
        letter-spacing: -.45px !important;
    }

    #hero .hero-feature-pill,
    #hero .hero-value-card>p.hero-feature-pill {
        padding: 5px 7px !important;
        border-radius: 9px !important;
        font-size: 7.8px !important;
        line-height: 1.3 !important;
    }

    #hero .hero-conversion-row {
        gap: 6px !important;
        margin-top: 6px !important;
    }

    #hero .hero-primary-cta {
        min-height: 29px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 7.7px !important;
    }

    #hero .hero-starting-price small {
        font-size: 6.4px !important;
    }

    #hero .hero-starting-price strong {
        font-size: 10.5px !important;
    }
}

@media (max-width: 390px) {
    #hero .hero-value-card {
        width: min(100%, 330px) !important;
    }

    #hero .hero-value-card h1 {
        font-size: clamp(15.5px, 4.75vw, 18px) !important;
    }

    #hero .hero-feature-pill,
    #hero .hero-value-card>p.hero-feature-pill {
        display: -webkit-box !important;
        width: 100% !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}

#hero .hero-starting-price.is-loading,
#hero .hero-starting-price.is-ready,
#hero .hero-starting-price.is-unavailable {
    display: block !important;
}

#hero .hero-starting-price strong {
    min-height: 1.2em;
}

#hero .hero-price-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffe0a8;
    white-space: nowrap;
}

#hero .hero-price-spinner {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 2px solid rgba(255, 224, 168, .34);
    border-top-color: #ffe0a8;
    border-radius: 50%;
    animation: heroPriceSpin .72s linear infinite;
}

#hero .hero-starting-price.is-unavailable strong {
    color: rgba(255, 255, 255, .82);
}

@keyframes heroPriceSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    #hero .hero-price-loading {
        gap: 4px;
    }

    #hero .hero-price-spinner {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
        border-width: 1.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-price-spinner {
        animation: none;
    }
}

html.detail-route:not(.app-ready) body {
    background: #fff !important;
}

html.detail-route:not(.app-ready) #pageLoader,
html.detail-route:not(.app-ready) #hero.site-hero-media,
html.detail-route:not(.app-ready) #bookingSearch,
html.detail-route:not(.app-ready) .story-section,
html.detail-route:not(.app-ready) #about,
html.detail-route:not(.app-ready) .highlights-section,
html.detail-route:not(.app-ready) body>.container,
html.detail-route:not(.app-ready) #sharedCustomerReviews,
html.detail-route:not(.app-ready) .stats-bar,
html.detail-route:not(.app-ready) .footer,
html.detail-route:not(.app-ready) .floating-social,
html.detail-route:not(.app-ready) .floating-contact,
html.detail-route:not(.app-ready) #faqToggle,
html.detail-route:not(.app-ready) #faqBox {
    display: none !important;
}

html.detail-route:not(.app-ready) #homeDetailPage {
    display: block !important;
    min-height: calc(100vh - 76px) !important;
}

html.gallery-route:not(.app-ready) #bookingSearch,
html.gallery-route:not(.app-ready) .story-section,
html.gallery-route:not(.app-ready) #about,
html.gallery-route:not(.app-ready) .highlights-section,
html.gallery-route:not(.app-ready) #homes,
html.gallery-route:not(.app-ready) #calendarPage,
html.gallery-route:not(.app-ready) #sharedCustomerReviews,
html.gallery-route:not(.app-ready) .stats-bar {
    display: none !important;
}

html.gallery-route:not(.app-ready) #gallery {
    display: block !important;
}

html.about-route:not(.app-ready) #bookingSearch,
html.about-route:not(.app-ready) body>.container,
html.about-route:not(.app-ready) #sharedCustomerReviews,
html.about-route:not(.app-ready) .stats-bar {
    display: none !important;
}

html.about-route:not(.app-ready) #about {
    display: block !important;
}

@media (max-width: 768px) {
    .detail-route-skeleton-inner {
        padding: 18px 14px 48px !important;
    }

    .detail-skeleton-cover {
        height: 240px !important;
        border-radius: 18px !important;
    }

    .detail-skeleton-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .detail-skeleton-card {
        min-height: 210px !important;
    }
}

html.detail-route #hero,
html.detail-route #bookingSearch,
html.detail-route .story-section,
html.detail-route #about,
html.detail-route .highlights-section,
html.detail-route body>.container,
html.detail-route #sharedCustomerReviews,
html.detail-route .stats-bar {
    display: none !important;
}

html.detail-route #homeDetailPage {
    display: block !important;
}

html.detail-route:not(.app-ready) #homeDetailPage>.home-detail-container {
    display: none !important;
}

html.detail-route:not(.app-ready) #homeDetailPage .detail-route-skeleton {
    display: block !important;
}

html.detail-route.app-ready #homeDetailPage>.home-detail-container {
    display: block !important;
}

html.detail-route.app-ready #homeDetailPage .detail-route-skeleton {
    display: none !important;
}

#routeRestoreLoader {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

html.is-restoring-route-scroll #routeRestoreLoader {
    display: flex;
}

.route-restore-card {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border: 1px solid rgba(135, 88, 69, .14);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #4b3b34;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 14px 40px rgba(75, 49, 39, .14);
}

.route-restore-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 2px solid rgba(135, 88, 69, .20);
    border-top-color: #875845;
    border-radius: 50%;
    animation: routeRestoreSpin .72s linear infinite;
}

@keyframes routeRestoreSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-restore-spinner {
        animation: none;
    }
}

.ttlock-confirmation-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid rgba(135, 88, 69, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(255, 226, 208, .52), transparent 34%),
        linear-gradient(145deg, #fffdfb 0%, #fff8f4 100%);
    box-shadow: 0 16px 42px rgba(91, 58, 45, .08);
    overflow: hidden;
}

.ttlock-confirmation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.ttlock-confirmation-title-wrap {
    min-width: 0;
}

.ttlock-confirmation-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 27px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, .11);
    color: #17763b;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
}

.ttlock-confirmation-title {
    margin: 9px 0 5px;
    color: #30241f;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -.35px;
}

.ttlock-confirmation-sub {
    margin: 0;
    color: #74645d;
    font-size: 12px;
    line-height: 1.65;
}

.ttlock-confirmation-security {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid rgba(135, 88, 69, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    color: #6d5146;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.ttlock-keypad-warning {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
    padding: 12px 13px;
    border: 1px solid rgba(180, 83, 9, .18);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 247, 237, .98), rgba(255, 251, 235, .98));
    color: #7c3f12;
    box-shadow: 0 9px 24px rgba(146, 64, 14, .07);
}

.ttlock-keypad-warning-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff;
    color: #b45309;
    font-size: 16px;
    line-height: 1;
    box-shadow: 0 6px 15px rgba(146, 64, 14, .10);
}

.ttlock-keypad-warning-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ttlock-keypad-warning-copy strong {
    color: #78350f;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.ttlock-keypad-warning-copy span {
    color: #8a4b20;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.5;
}

.ttlock-keypad-warning-copy kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    min-height: 21px;
    padding: 1px 6px;
    border: 1px solid rgba(180, 83, 9, .24);
    border-bottom-width: 2px;
    border-radius: 7px;
    background: #fff;
    color: #9a4407;
    font: inherit;
    font-weight: 900;
    line-height: 1;
    vertical-align: middle;
}

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

.ttlock-passcode-card {
    position: relative;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(135, 88, 69, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 25px rgba(80, 49, 37, .06);
}

.ttlock-passcode-card.checkin {
    background:
        linear-gradient(180deg, rgba(239, 250, 244, .97), rgba(255, 255, 255, .96));
}

.ttlock-passcode-card.checkout {
    background:
        linear-gradient(180deg, rgba(255, 246, 234, .97), rgba(255, 255, 255, .96));
}

.ttlock-passcode-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.ttlock-passcode-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #fff;
    color: #875845;
    font-size: 17px;
    box-shadow: 0 7px 18px rgba(74, 47, 37, .08);
}

.ttlock-passcode-meta {
    min-width: 0;
}

.ttlock-passcode-label {
    display: block;
    color: #30241f;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
}

.ttlock-passcode-door {
    display: block;
    margin-top: 2px;
    color: #89766e;
    font-size: 10px;
    font-weight: 700;
}

.ttlock-passcode-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
}

.ttlock-passcode-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 51px;
    padding: 10px 12px;
    border: 1px dashed rgba(135, 88, 69, .28);
    border-radius: 15px;
    background: #fff;
    color: #3f2b23;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .13em;
    user-select: all;
    overflow-wrap: anywhere;
}

.ttlock-passcode-submit-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: .04em;
    color: #b45309;
    font-weight: 950;
    transform: translateY(-.02em);
}

.ttlock-passcode-copy {
    min-width: 46px;
    min-height: 46px;
    padding: 0 11px;
    border: 0;
    border-radius: 14px;
    background: #875845;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ttlock-passcode-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgba(135, 88, 69, .24);
}

.ttlock-passcode-validity {
    display: grid;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(135, 88, 69, .10);
}

.ttlock-passcode-validity span {
    color: #8a7770;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ttlock-passcode-validity strong {
    color: #49372f;
    font-size: 11px;
    line-height: 1.55;
}

.ttlock-confirmation-rule {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 12px;
    border-radius: 15px;
    background: rgba(135, 88, 69, .07);
    color: #6b554c;
    font-size: 11px;
    line-height: 1.6;
}

.ttlock-confirmation-rule i {
    margin-top: 2px;
    color: #875845;
}

.ttlock-confirmation-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    margin-top: 12px;
}

.ttlock-confirmation-copy-all,
.ttlock-confirmation-retry {
    min-height: 43px;
    border: 0;
    border-radius: 14px;
    padding: 10px 14px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
}

.ttlock-confirmation-copy-all {
    background: linear-gradient(135deg, #875845, #ab7661);
    color: #fff;
}

.ttlock-confirmation-retry {
    border: 1px solid rgba(135, 88, 69, .16);
    background: #fff;
    color: #6f4b3d;
}

.ttlock-confirmation-loading,
.ttlock-confirmation-error {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    border-radius: 17px;
    background: rgba(255, 255, 255, .84);
    color: #6c5a52;
    font-size: 12px;
    line-height: 1.65;
}

.ttlock-confirmation-error {
    border: 1px solid rgba(220, 38, 38, .12);
    background: rgba(254, 242, 242, .92);
    color: #9f2929;
}

.ttlock-confirmation-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    border: 2px solid rgba(135, 88, 69, .18);
    border-top-color: #875845;
    border-radius: 50%;
    animation: ttlockConfirmationSpin .75s linear infinite;
}

@keyframes ttlockConfirmationSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 820px) {
    .ttlock-confirmation-card {
        padding: 16px;
        border-radius: 21px;
    }

    .ttlock-confirmation-head {
        gap: 12px;
    }

    .ttlock-confirmation-title {
        font-size: 17px;
    }

    .ttlock-confirmation-security {
        display: none;
    }

    .ttlock-passcode-grid {
        gap: 10px;
    }

    .ttlock-passcode-card {
        padding: 13px;
    }

    .ttlock-passcode-code {
        font-size: 20px;
        letter-spacing: .10em;
    }
}

@media (max-width: 620px) {
    .ttlock-confirmation-card {
        margin-top: 12px;
        padding: 14px;
        border-radius: 20px;
    }

    .ttlock-confirmation-head {
        margin-bottom: 12px;
    }

    .ttlock-confirmation-title {
        font-size: 16px;
    }

    .ttlock-confirmation-sub {
        font-size: 11px;
    }

    .ttlock-keypad-warning {
        align-items: flex-start;
        gap: 9px;
        margin-bottom: 10px;
        padding: 10px 11px;
        border-radius: 15px;
    }

    .ttlock-keypad-warning-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 11px;
        font-size: 14px;
    }

    .ttlock-keypad-warning-copy strong {
        font-size: 12px;
    }

    .ttlock-keypad-warning-copy span {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .ttlock-passcode-grid {
        grid-template-columns: 1fr;
    }

    .ttlock-passcode-card {
        border-radius: 18px;
    }

    .ttlock-passcode-code {
        min-height: 48px;
        font-size: 23px;
    }

    .ttlock-confirmation-actions {
        grid-template-columns: 1fr;
    }

    .ttlock-confirmation-copy-all,
    .ttlock-confirmation-retry {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ttlock-confirmation-spinner {
        animation: none;
    }

    .ttlock-passcode-copy {
        transition: none;
    }
}

.booking-guide-card {
    margin-top: 16px;
    padding: 22px;
    border: 1px solid rgba(34, 34, 34, .09);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff 0%, #fffaf8 100%);
    box-shadow: 0 14px 40px rgba(34, 34, 34, .08);
    color: #222;
    overflow: hidden;
}

.booking-guide-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.booking-guide-title-wrap {
    min-width: 0;
}

.booking-guide-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #e31c5f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.booking-guide-title {
    margin: 0;
    font-size: clamp(20px, 2.5vw, 27px);
    line-height: 1.2;
    letter-spacing: -.025em;
    color: #222;
}

.booking-guide-sub {
    margin: 7px 0 0;
    max-width: 620px;
    color: #6a6a6a;
    font-size: 14px;
    line-height: 1.55;
}

.booking-guide-paid-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border-radius: 999px;
    background: #eaf8ef;
    color: #18794e;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.booking-guide-loading,
.booking-guide-error,
.booking-guide-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    background: #f7f7f7;
    color: #595959;
    font-size: 14px;
    line-height: 1.5;
}

.booking-guide-error {
    align-items: flex-start;
    background: #fff1f3;
    color: #9f1239;
}

.booking-guide-spinner {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    border: 3px solid rgba(227, 28, 95, .16);
    border-top-color: #e31c5f;
    border-radius: 50%;
    animation: bookingGuideSpin .75s linear infinite;
}

@keyframes bookingGuideSpin {
    to {
        transform: rotate(360deg);
    }
}

.booking-guide-direction {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
    gap: 18px;
    padding: 14px;
    border: 1px solid rgba(34, 34, 34, .08);
    border-radius: 20px;
    background: #fff;
}

.booking-guide-direction-media {
    min-height: 250px;
    border-radius: 16px;
    overflow: hidden;
    background: #f2f2f2;
}

.booking-guide-direction-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 250px;
    max-height: 430px;
    object-fit: cover;
}

.booking-guide-direction-placeholder {
    display: grid;
    place-items: center;
    min-height: 250px;
    padding: 24px;
    color: #717171;
    text-align: center;
}

.booking-guide-direction-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 8px 8px 8px 2px;
}

.booking-guide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #e31c5f;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.booking-guide-branch-name {
    margin: 9px 0 6px;
    color: #222;
    font-size: 20px;
    line-height: 1.3;
}

.booking-guide-address {
    margin: 0;
    color: #5e5e5e;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.booking-guide-map-btn,
.booking-guide-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 44px;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid #222;
    border-radius: 12px;
    background: #222;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.booking-guide-map-btn:hover,
.booking-guide-retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 34, 34, .15);
}

.booking-guide-video-section {
    margin-top: 18px;
}

.booking-guide-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    color: #222;
    font-size: 16px;
    font-weight: 800;
}

.booking-guide-section-title small {
    color: #717171;
    font-size: 12px;
    font-weight: 600;
}

.booking-guide-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.booking-guide-video-card {
    min-width: 0;
    padding: 10px;
    border: 1px solid rgba(34, 34, 34, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(34, 34, 34, .05);
}

.booking-guide-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 13px;
    background: #111;
}

.booking-guide-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #111;
}

.booking-guide-video-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 4px 4px;
}

.booking-guide-video-label i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    background: #fff0f3;
    color: #e31c5f;
}

.booking-guide-video-label strong,
.booking-guide-video-label span {
    display: block;
}

.booking-guide-video-label strong {
    color: #222;
    font-size: 14px;
}

.booking-guide-video-label span {
    margin-top: 3px;
    color: #717171;
    font-size: 12px;
    line-height: 1.4;
}

.booking-guide-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f7f7f7;
    color: #5b5b5b;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .booking-guide-card {
        padding: 18px;
        border-radius: 21px;
    }

    .booking-guide-direction {
        grid-template-columns: 1fr;
    }

    .booking-guide-direction-info {
        padding: 4px 4px 6px;
    }

    .booking-guide-direction-media,
    .booking-guide-direction-media img,
    .booking-guide-direction-placeholder {
        min-height: 220px;
    }
}

@media (max-width: 620px) {
    .booking-guide-card {
        margin-top: 13px;
        padding: 14px;
        border-radius: 18px;
        box-shadow: 0 10px 28px rgba(34, 34, 34, .07);
    }

    .booking-guide-head {
        display: block;
        margin-bottom: 14px;
    }

    .booking-guide-paid-badge {
        margin-top: 11px;
    }

    .booking-guide-title {
        font-size: 20px;
    }

    .booking-guide-sub {
        font-size: 13px;
    }

    .booking-guide-direction {
        gap: 12px;
        padding: 9px;
        border-radius: 16px;
    }

    .booking-guide-direction-media,
    .booking-guide-direction-media img,
    .booking-guide-direction-placeholder {
        min-height: 190px;
    }

    .booking-guide-direction-media img {
        max-height: 300px;
    }

    .booking-guide-branch-name {
        font-size: 18px;
    }

    .booking-guide-map-btn,
    .booking-guide-retry-btn {
        width: 100%;
    }

    .booking-guide-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .booking-guide-video-grid {
        grid-template-columns: 1fr;
    }

    .booking-guide-video-card {
        padding: 8px;
        border-radius: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .booking-guide-spinner {
        animation: none;
    }

    .booking-guide-map-btn,
    .booking-guide-retry-btn {
        transition: none;
    }
}

html.website-booking-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

html.website-booking-lock body.website-booking-lock {
    position: fixed !important;
    top: var(--website-booking-scroll-offset, 0) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.website-booking-modal,
.website-booking-panel,
.website-booking-head,
.website-booking-body,
.payment-result-card,
.website-payment-actions {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.website-booking-modal {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.website-booking-panel {
    width: min(650px, calc(100vw - 28px)) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable;
}

.website-booking-head {
    position: sticky !important;
    top: 0 !important;
    flex: none !important;
}

.website-booking-body {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-y !important;
}

.website-booking-form input,
.website-booking-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.payment-result-card .website-payment-actions {
    display: grid !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 10px !important;
}

.payment-result-card .website-payment-actions.is-paid {
    grid-template-columns: minmax(0, 1.45fr) repeat(2, minmax(0, 1fr)) !important;
}

.payment-result-card .website-payment-actions.is-pending {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
}

.payment-result-card .website-payment-action-btn,
.payment-result-card .website-payment-actions .website-booking-submit,
.payment-result-card .website-payment-actions .website-booking-secondary {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
}

.payment-result-card .website-payment-actions .website-booking-secondary::before,
.payment-result-card .website-payment-actions .website-booking-secondary[href*="zalo.me"]::before {
    content: none !important;
    display: none !important;
}

.zalo-action-icon {
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
}

.ttlock-confirmation-loading {
    align-items: flex-start !important;
}

.ttlock-loading-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.ttlock-wait-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 9px 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(135, 88, 69, .10);
    color: #6b7280;
    font-size: 11.5px;
    line-height: 1.35;
}

.ttlock-wait-meta strong {
    flex: 0 0 auto;
    color: #875845;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {

    .website-booking-form input,
    .website-booking-form textarea {
        font-size: 16px !important;
        line-height: 1.35 !important;
    }
}

@media (max-width: 768px) {
    .website-booking-modal {
        padding:
            max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    }

    .website-booking-panel {
        width: 100% !important;
        max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 24px !important;
    }

    .website-booking-body {
        max-height: none !important;
        padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    }

    .payment-result-card .website-payment-actions.is-paid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .payment-result-card .website-payment-actions.is-paid>a[href*="zalo.me"] {
        grid-column: 1 / -1 !important;
    }

    .payment-result-card .website-payment-actions.is-pending {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .payment-result-card .website-payment-action-btn,
    .payment-result-card .website-payment-actions .website-booking-submit,
    .payment-result-card .website-payment-actions .website-booking-secondary {
        min-height: 46px !important;
        padding: 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 420px) {
    .website-booking-modal {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .website-booking-panel {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: 0 !important;
    }

    .website-booking-body {
        max-height: none !important;
    }

    .payment-result-card .website-payment-actions.is-paid,
    .payment-result-card .website-payment-actions.is-pending {
        grid-template-columns: 1fr !important;
    }

    .payment-result-card .website-payment-actions.is-paid>a[href*="zalo.me"] {
        grid-column: auto !important;
    }

    .ttlock-wait-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

:root {
    --booking-confirmation-ink: #222222;
    --booking-confirmation-muted: #6a6a6a;
    --booking-confirmation-line: #dddddd;
    --booking-confirmation-surface: #ffffff;
    --booking-confirmation-canvas: #f7f7f7;
    --booking-confirmation-accent: #ff385c;
    --booking-confirmation-accent-dark: #d90b3e;
    --booking-confirmation-success: #008a05;
    --booking-confirmation-shadow: 0 18px 55px rgba(0, 0, 0, .09);
}

html.booking-confirmation-route-pending,
html.booking-confirmation-route-pending body,
body.booking-confirmation-open {
    min-height: 100%;
    background: #f7f7f7 !important;
}

html.booking-confirmation-route-pending body {
    margin: 0;
}

html.booking-confirmation-route-pending body>*:not(#bookingConfirmationPage):not(script):not(style),
body.booking-confirmation-open>*:not(#bookingConfirmationPage):not(#customerToast):not(script):not(style) {
    display: none !important;
}

html.booking-confirmation-route-pending #bookingConfirmationPage {
    display: block !important;
}

body.booking-confirmation-open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

.booking-confirmation-page[hidden],
.booking-confirmation-reopen[hidden] {
    display: none !important;
}

.booking-confirmation-page {
    position: relative;
    z-index: auto;
    display: none;
    width: 100%;
    min-height: 100dvh;
    color: var(--booking-confirmation-ink);
    background: #f7f7f7 !important;
    overflow-x: hidden;
    overflow-y: visible;
    font-family: inherit;
    isolation: isolate;
    box-sizing: border-box;
}

.booking-confirmation-page.show {
    display: block;
}

.booking-confirmation-shell {
    min-height: 100dvh;
    background: #f7f7f7;
}

.booking-confirmation-route-loading {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: 24px;
    color: #6a6a6a;
    background: #f7f7f7;
    box-sizing: border-box;
    text-align: center;
}

.booking-confirmation-route-loading-card {
    display: grid;
    justify-items: center;
    gap: 13px;
}

.booking-confirmation-route-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid #e4e4e4;
    border-top-color: var(--booking-confirmation-accent);
    border-radius: 50%;
    animation: booking-confirmation-route-spin .8s linear infinite;
}

.booking-confirmation-route-loading strong {
    color: #222222;
    font-size: 14px;
}

@keyframes booking-confirmation-route-spin {
    to {
        transform: rotate(360deg);
    }
}

.booking-confirmation-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding:
        max(12px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 12px max(28px, env(safe-area-inset-left));
    border-bottom: 1px solid #dddddd;
    background: #ffffff;
    box-sizing: border-box;
}

.booking-confirmation-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: var(--booking-confirmation-ink);
    text-decoration: none;
}

.booking-confirmation-brand img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.booking-confirmation-brand-copy {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.booking-confirmation-brand-copy strong {
    color: var(--booking-confirmation-ink);
    font-size: 15px;
    line-height: 1.25;
}

.booking-confirmation-brand-copy span {
    color: var(--booking-confirmation-muted);
    font-size: 12px;
    line-height: 1.25;
}

.booking-confirmation-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.booking-confirmation-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 999px;
    color: #006c04;
    background: #ebfaec;
    border: 1px solid #c8ebca;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.booking-confirmation-status i {
    font-size: 14px;
}

.booking-confirmation-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--booking-confirmation-ink);
    border-radius: 12px;
    color: var(--booking-confirmation-ink);
    background: var(--booking-confirmation-surface);
    font: inherit;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.booking-confirmation-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .08);
}

.booking-confirmation-btn.primary {
    color: #ffffff;
    border-color: var(--booking-confirmation-accent);
    background: linear-gradient(135deg, var(--booking-confirmation-accent), var(--booking-confirmation-accent-dark));
}

.booking-confirmation-btn.soft {
    border-color: var(--booking-confirmation-line);
    background: #ffffff;
}

.booking-confirmation-content {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 38px 0 calc(54px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.booking-confirmation-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
    margin-bottom: 24px;
}

.booking-confirmation-hero-copy {
    min-width: 0;
}

.booking-confirmation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--booking-confirmation-success);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .02em;
}

.booking-confirmation-kicker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #ffffff;
    background: var(--booking-confirmation-success);
}

.booking-confirmation-title {
    max-width: 720px;
    margin: 0;
    color: var(--booking-confirmation-ink);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.booking-confirmation-lead {
    max-width: 680px;
    margin: 16px 0 0;
    color: var(--booking-confirmation-muted);
    font-size: 16px;
    line-height: 1.65;
}

.booking-confirmation-order {
    min-width: 218px;
    padding: 17px 19px;
    border: 1px solid var(--booking-confirmation-line);
    border-radius: 18px;
    background: var(--booking-confirmation-surface);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .045);
    box-sizing: border-box;
}

.booking-confirmation-order span {
    display: block;
    margin-bottom: 6px;
    color: var(--booking-confirmation-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.booking-confirmation-order strong {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--booking-confirmation-ink);
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.booking-confirmation-summary {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.booking-confirmation-summary-item {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--booking-confirmation-line);
    border-radius: 18px;
    background: var(--booking-confirmation-surface);
    box-sizing: border-box;
}

.booking-confirmation-summary-item span {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--booking-confirmation-muted);
    font-size: 12px;
    font-weight: 750;
}

.booking-confirmation-summary-item span i {
    color: var(--booking-confirmation-accent);
}

.booking-confirmation-summary-item strong {
    display: block;
    min-width: 0;
    color: var(--booking-confirmation-ink);
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.booking-confirmation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr);
    align-items: start;
    gap: 18px;
}

.booking-confirmation-main,
.booking-confirmation-side {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.booking-confirmation-page .ttlock-confirmation-card,
.booking-confirmation-page .booking-guide-card,
.booking-confirmation-help-card,
.booking-confirmation-note-card {
    margin: 0;
    border: 1px solid var(--booking-confirmation-line);
    border-radius: 22px;
    background: var(--booking-confirmation-surface);
    box-shadow: none;
    box-sizing: border-box;
}

.booking-confirmation-page .ttlock-confirmation-card,
.booking-confirmation-page .booking-guide-card {
    padding: 24px;
}

.booking-confirmation-help-card,
.booking-confirmation-note-card {
    padding: 22px;
}

.booking-confirmation-help-card h3,
.booking-confirmation-note-card h3 {
    margin: 0 0 9px;
    color: var(--booking-confirmation-ink);
    font-size: 18px;
    line-height: 1.3;
}

.booking-confirmation-help-card p,
.booking-confirmation-note-card p {
    margin: 0;
    color: var(--booking-confirmation-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.booking-confirmation-help-actions {
    display: grid;
    gap: 10px;
    margin-top: 17px;
}

.booking-confirmation-help-actions .booking-confirmation-btn {
    width: 100%;
}

.booking-confirmation-note-list {
    display: grid;
    gap: 13px;
    margin-top: 17px;
}

.booking-confirmation-note {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
}

.booking-confirmation-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--booking-confirmation-accent);
    background: #fff0f3;
}

.booking-confirmation-note strong {
    display: block;
    margin: 1px 0 3px;
    color: var(--booking-confirmation-ink);
    font-size: 13px;
    line-height: 1.35;
}

.booking-confirmation-note>span:last-child>span {
    display: block;
    color: var(--booking-confirmation-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.booking-confirmation-note>span:last-child>span a {
    color: var(--booking-confirmation-ink);
    font-weight: 800;
    text-decoration: underline;
    text-decoration-color: rgba(255, 56, 92, .45);
    text-underline-offset: 2px;
}

.booking-confirmation-full {
    grid-column: 1 / -1;
}

.booking-confirmation-mobile-bar {
    display: none;
}

.booking-confirmation-reopen {
    position: fixed;
    z-index: 999990;
    right: auto;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 18px;
    color: #ffffff;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--booking-confirmation-accent), var(--booking-confirmation-accent-dark));
    box-shadow: 0 15px 38px rgba(217, 11, 62, .3);
    font: inherit;
    font-size: 13.5px;
    font-weight: 850;
    max-width: calc(100vw - 92px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.booking-confirmation-unavailable {
    display: grid;
    place-items: center;
    min-height: calc(100dvh - 76px);
    padding: 32px 20px calc(48px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.booking-confirmation-unavailable-card {
    width: min(520px, 100%);
    padding: clamp(28px, 6vw, 48px);
    border: 1px solid var(--booking-confirmation-line);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: var(--booking-confirmation-shadow);
    text-align: center;
    box-sizing: border-box;
}

.booking-confirmation-unavailable-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 22px;
    color: var(--booking-confirmation-accent);
    background: #fff0f3;
    font-size: 25px;
}

.booking-confirmation-unavailable-card h1 {
    margin: 0 0 10px;
    color: var(--booking-confirmation-ink);
    font-size: clamp(26px, 5vw, 36px);
    line-height: 1.14;
    letter-spacing: -.025em;
}

.booking-confirmation-unavailable-card p {
    margin: 0;
    color: var(--booking-confirmation-muted);
    font-size: 14px;
    line-height: 1.65;
}

.booking-confirmation-unavailable-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 23px;
}

@media (max-width: 1024px) {
    .booking-confirmation-content {
        width: min(100% - 36px, 920px);
        padding-top: 30px;
    }

    .booking-confirmation-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-confirmation-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .booking-confirmation-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-confirmation-page .booking-guide-card {
        grid-column: auto;
    }
}

@media (max-width: 767px) {
    .booking-confirmation-header {
        min-height: 66px;
        padding:
            max(9px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left));
    }

    .booking-confirmation-brand {
        gap: 9px;
    }

    .booking-confirmation-brand img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 12px;
    }

    .booking-confirmation-brand-copy span,
    .booking-confirmation-status {
        display: none;
    }

    .booking-confirmation-header .booking-confirmation-btn {
        min-height: 42px;
        padding: 0 13px;
        border-radius: 11px;
        font-size: 12px;
    }

    .booking-confirmation-content {
        width: min(100% - 24px, 620px);
        padding: 24px 0 calc(92px + env(safe-area-inset-bottom));
    }

    .booking-confirmation-hero {
        grid-template-columns: 1fr;
        gap: 17px;
        margin-bottom: 18px;
    }

    .booking-confirmation-title {
        font-size: clamp(27px, 8.5vw, 36px);
    }

    .booking-confirmation-lead {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.6;
    }

    .booking-confirmation-order {
        min-width: 0;
        width: 100%;
        padding: 14px 16px;
    }

    .booking-confirmation-summary {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .booking-confirmation-summary-item {
        display: grid;
        grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr);
        align-items: center;
        gap: 12px;
        padding: 14px 15px;
        border-radius: 15px;
    }

    .booking-confirmation-summary-item span {
        margin: 0;
    }

    .booking-confirmation-summary-item strong {
        text-align: right;
        font-size: 13.5px;
    }

    .booking-confirmation-layout,
    .booking-confirmation-main,
    .booking-confirmation-side {
        gap: 12px;
    }

    .booking-confirmation-side {
        grid-template-columns: 1fr;
    }

    .booking-confirmation-page .ttlock-confirmation-card,
    .booking-confirmation-page .booking-guide-card,
    .booking-confirmation-help-card,
    .booking-confirmation-note-card {
        padding: 17px;
        border-radius: 18px;
    }

    .booking-confirmation-page .ttlock-confirmation-head,
    .booking-confirmation-page .booking-guide-head {
        gap: 11px;
    }

    .booking-confirmation-page .ttlock-confirmation-security,
    .booking-confirmation-page .booking-guide-paid-badge {
        align-self: flex-start;
    }

    .booking-confirmation-help-card .booking-confirmation-help-actions {
        display: none;
    }

    .booking-confirmation-mobile-bar {
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 9px;
        padding:
            10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border-top: 1px solid #dddddd;
        background: #ffffff;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
    }

    .booking-confirmation-mobile-bar .booking-confirmation-btn {
        min-width: 0;
        min-height: 48px;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .booking-confirmation-reopen {
        right: auto;
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
        min-height: 48px;
        padding: 0 15px;
        font-size: 12.5px;
    }
}

@media (max-width: 390px) {
    .booking-confirmation-brand-copy strong {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .booking-confirmation-header .booking-confirmation-btn span {
        display: none;
    }

    .booking-confirmation-header .booking-confirmation-btn {
        width: 42px;
        padding: 0;
    }

    .booking-confirmation-unavailable-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    .booking-confirmation-btn,
    .booking-confirmation-route-loading-spinner {
        transition: none;
        animation: none;
    }
}

.website-cccd-section {
    display: none;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e6e2df;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(34, 34, 34, .05);
}

.website-cccd-section.is-visible {
    display: grid;
}

.website-cccd-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.website-cccd-heading-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.website-cccd-heading-copy strong {
    color: #222;
    font-size: 15px;
    line-height: 1.35;
}

.website-cccd-heading-copy span {
    color: #6a6a6a;
    font-size: 13px;
    line-height: 1.5;
}

.website-cccd-optional-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f7f7f7;
    color: #5d5d5d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.website-cccd-legal-note {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: #f7f7f7;
    color: #484848;
}

.website-cccd-legal-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #fff;
    color: #ff385c;
    box-shadow: 0 4px 14px rgba(34, 34, 34, .08);
}

.website-cccd-legal-note p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
}

.website-cccd-dropzone {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 14px;
    border: 1.5px dashed #b0b0b0;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.website-cccd-dropzone:hover,
.website-cccd-dropzone.is-dragging {
    border-color: #222;
    background: #fafafa;
    transform: translateY(-1px);
}

.website-cccd-dropzone.is-busy {
    cursor: wait;
    opacity: .72;
    pointer-events: none;
}

.website-cccd-dropzone-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff0f3;
    color: #e31c5f;
    font-size: 17px;
}

.website-cccd-dropzone-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.website-cccd-dropzone-copy strong {
    color: #222;
    font-size: 13.5px;
    line-height: 1.35;
}

.website-cccd-dropzone-copy span {
    color: #717171;
    font-size: 12px;
    line-height: 1.45;
}

.website-cccd-choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid #222;
    border-radius: 12px;
    background: #fff;
    color: #222;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.website-cccd-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

.website-cccd-preview-wrap {
    display: none;
    gap: 10px;
}

.website-cccd-preview-wrap.has-images {
    display: grid;
}

.website-cccd-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #484848;
    font-size: 12px;
    font-weight: 700;
}

.website-cccd-clear {
    border: 0;
    padding: 0;
    background: transparent;
    color: #717171;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.website-cccd-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.website-cccd-preview-item {
    position: relative;
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    border-radius: 14px;
    background: #f7f7f7;
}

.website-cccd-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-cccd-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 999px;
    background: rgba(34, 34, 34, .84);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
}

.website-cccd-preview-size {
    position: absolute;
    left: 6px;
    bottom: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #484848;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.website-cccd-status {
    min-height: 18px;
    color: #717171;
    font-size: 12px;
    line-height: 1.45;
}

.website-cccd-status.is-error {
    color: #b32525;
}

.website-cccd-payment-notice {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    margin: 10px 0 12px;
    padding: 11px 12px;
    border: 1px solid #d8eee3;
    border-radius: 15px;
    background: #f2fbf6;
    color: #22543d;
    font-size: 12px;
    line-height: 1.45;
}

.website-cccd-payment-notice.is-warning {
    border-color: #f4d6a3;
    background: #fff9ef;
    color: #7a4b11;
}

.website-cccd-payment-notice i {
    font-size: 16px;
    text-align: center;
}

@media (max-width: 900px) {
    .website-cccd-preview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .website-cccd-section {
        padding: 14px;
        border-radius: 18px;
    }

    .website-cccd-heading {
        align-items: flex-start;
    }

    .website-cccd-dropzone {
        grid-template-columns: 40px minmax(0, 1fr);
        min-height: 88px;
        padding: 13px;
    }

    .website-cccd-choose-btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .website-cccd-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .website-cccd-heading {
        display: grid;
    }

    .website-cccd-optional-pill {
        justify-self: start;
    }
}

.website-guest-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid #ead7cc;
    border-radius: 20px;
    background: linear-gradient(145deg, #fffdfb, #fff7f1);
    box-shadow: 0 10px 24px rgba(135, 88, 69, .06);
}

.website-guest-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.website-guest-copy strong {
    color: #2f1f18;
    font-size: 14px;
}

.website-guest-copy span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
}

.website-guest-controls {
    display: grid;
    grid-template-columns: 42px 58px 42px;
    align-items: center;
    gap: 7px;
}

.website-guest-step {
    width: 42px;
    height: 42px;
    border: 1px solid #e6cfc1;
    border-radius: 50%;
    background: #fff;
    color: #875845;
    font: inherit;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.website-guest-step:hover {
    transform: translateY(-1px);
    background: #fff3eb;
    border-color: #d89d79;
}

.website-guest-count-label {
    display: block !important;
}

.website-guest-count-label input {
    width: 58px !important;
    height: 42px;
    padding: 0 4px !important;
    text-align: center;
    font-weight: 800 !important;
    color: #2f1f18 !important;
    appearance: textfield;
}

.website-guest-count-label input::-webkit-inner-spin-button,
.website-guest-count-label input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.website-guest-pricing {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(135, 88, 69, .10);
}

.website-guest-pricing span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
    color: #6b7280;
    font-size: 11.5px;
}

.website-guest-pricing strong {
    color: #2f1f18;
    white-space: nowrap;
}

.website-guest-pricing .website-guest-total {
    background: #fff0ea;
    color: #875845;
    font-weight: 700;
}

.booking-summary-surcharge strong {
    color: #b45309 !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 768px) {
    .website-guest-card {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 14px;
    }

    .website-guest-pricing {
        grid-template-columns: 1fr 1fr;
    }

    .website-guest-pricing .website-guest-total {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .website-guest-card {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 13px;
    }

    .website-guest-controls {
        justify-self: stretch;
        grid-template-columns: 38px minmax(56px, 1fr) 38px;
        gap: 6px;
    }

    .website-guest-step {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }

    .website-guest-count-label input {
        width: 100% !important;
        height: 38px;
        min-height: 38px !important;
        padding: 0 3px !important;
        font-size: 14px !important;
        border-radius: 14px !important;
    }

    .website-guest-pricing {
        grid-template-columns: 1fr;
    }

    .website-guest-pricing .website-guest-total {
        grid-column: auto;
    }
}

.website-cccd-optional-pill {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
    box-shadow: 0 4px 12px rgba(190, 24, 93, .08)
}

@media (max-width: 767px) {
    .website-booking-close {
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        font-size: 23px !important;
    }

    .booking-time-hint {
        font-size: .8em !important;
    }
}


/* V7 — Chỉ cho phép giờ bắt đầu theo mốc :00 hoặc :30 */
.booking-time-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    width: 100%;
    margin-top: 7px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff7f7;
    color: #b42318;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.42;
    text-align: left;
}

.booking-time-warning[hidden] {
    display: none !important;
}

.booking-time-warning i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 12px;
}

.booking-time-warning span {
    display: inline !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
}

.booking-time-input.booking-time-invalid {
    color: #b42318 !important;
}

.booking-search-field.has-time-warning {
    border-color: #f04438 !important;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, .10) !important;
}

.custom-booking-grid label.has-time-warning .booking-time-input {
    border-color: #f04438 !important;
    box-shadow: 0 0 0 3px rgba(240, 68, 56, .10) !important;
}

@media (max-width: 767px) {
    .booking-time-warning {
        padding: 8px 9px;
        border-radius: 9px;
        font-size: 10.5px;
    }
}

/* V8 — Mobile compact controls + Firebase contact states */
.footer-links a[aria-disabled="true"],
.floating-contact a[aria-disabled="true"],
.website-booking-secondary[aria-disabled="true"] {
    cursor: default;
    opacity: .72;
}

@media (max-width: 480px) {
    .website-guest-controls {
        justify-self: center;
        grid-template-columns: 34px 50px 34px;
        gap: 5px;
        width: auto;
    }

    .website-guest-step {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        font-size: 18px;
        line-height: 1;
    }

    .website-guest-count-label input {
        width: 50px !important;
        height: 34px;
        min-height: 34px !important;
        padding: 0 2px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
    }

    .website-booking-form>.website-booking-actions {
        gap: 7px;
        margin-top: 0;
    }

    .website-booking-form>.website-booking-actions .website-booking-submit,
    .website-booking-form>.website-booking-actions .website-booking-secondary {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        line-height: 1.15;
    }
}


/* =========================================================
   GIFT BASKET CUSTOMER PAGE · V343
   Dynamic route from businessProfile/giftBasketPage.path
========================================================= */
:root {
    --gift-ink: #3f2d28;
    --gift-brown: #875845;
    --gift-brown-deep: #654237;
    --gift-coral: #d89d79;
    --gift-rose: #e6b8be;
    --gift-blush: #fff3f0;
    --gift-cream: #fffaf5;
    --gift-sage: #8ca68e;
    --gift-line: rgba(108, 72, 57, .12);
    --gift-shadow: 0 24px 70px rgba(92, 57, 42, .13);
}

#menuGiftBasket[hidden],
#giftBasketCustomerPage[hidden],
#giftCustomerGallerySection[hidden],
#giftCustomerProductEmpty[hidden],
#giftCustomerLightbox[hidden],
.gift-market-cover-empty[hidden],
#giftCustomerCover[hidden] {
    display: none !important;
}

body.customer-gift-route {
    background:
        radial-gradient(circle at 12% 8%, rgba(230, 184, 190, .17), transparent 27%),
        radial-gradient(circle at 88% 20%, rgba(216, 157, 121, .17), transparent 30%),
        #fffdfb;
}

body.customer-gift-route .hero,
body.customer-gift-route .story-section,
body.customer-gift-route .about-editorial-section,
body.customer-gift-route .highlights-section,
body.customer-gift-route .container>.tabs,
body.customer-gift-route #homes,
body.customer-gift-route #calendarPage,
body.customer-gift-route #gallery,
body.customer-gift-route #sharedCustomerReviews,
body.customer-gift-route .stats-bar,
body.customer-gift-route #homeDetailPage,
body.customer-gift-route #mobileBookBar {
    display: none !important;
}

.gift-basket-route #menuGiftBasket,
.header-inner .main-menu #menuGiftBasket.is-active {
    color: #fff !important;
    background: linear-gradient(135deg, #8a5848 0%, #d8927e 56%, #c98793 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(153, 91, 82, .24) !important;
}

.gift-basket-menu-link .menu-ico {
    transform: translateY(-1px);
}

.gift-market-page {
    position: relative;
    overflow: clip;
    color: var(--gift-ink);
    min-height: 65vh;
}

.gift-market-page * {
    box-sizing: border-box;
}

.gift-market-hero {
    position: relative;
    min-height: min(760px, calc(100vh - 80px));
    padding: clamp(58px, 7vw, 104px) 0 clamp(66px, 8vw, 112px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(118deg, rgba(255, 250, 245, .98), rgba(255, 245, 242, .92) 52%, rgba(248, 235, 231, .90)),
        repeating-linear-gradient(135deg, rgba(135, 88, 69, .024) 0 1px, transparent 1px 12px);
    border-bottom: 1px solid rgba(135, 88, 69, .08);
}

.gift-market-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -170px;
    top: -185px;
    border-radius: 50%;
    border: 80px solid rgba(255, 255, 255, .45);
    box-shadow: 0 0 0 1px rgba(135, 88, 69, .04);
}

.gift-market-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.gift-market-orb-one {
    width: 260px;
    height: 260px;
    left: -140px;
    bottom: 5%;
    background: rgba(230, 184, 190, .20);
}

.gift-market-orb-two {
    width: 180px;
    height: 180px;
    right: 42%;
    top: -80px;
    background: rgba(140, 166, 142, .11);
}

.gift-market-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
    gap: clamp(44px, 6vw, 86px);
    align-items: center;
}

.gift-market-copy {
    max-width: 720px;
}

.gift-market-kicker-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.gift-market-kicker,
.gift-market-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.15px;
    text-transform: uppercase;
}

.gift-market-kicker {
    padding: 0 14px;
    color: var(--gift-brown);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(135, 88, 69, .12);
    box-shadow: 0 8px 22px rgba(100, 63, 47, .06);
}

.gift-market-status-pill {
    gap: 7px;
    padding: 0 13px;
    color: #5d775f;
    background: rgba(237, 247, 238, .84);
    border: 1px solid rgba(93, 119, 95, .12);
    letter-spacing: .2px;
    text-transform: none;
}

.gift-market-copy h1 {
    margin: 0;
    max-width: 760px;
    color: #3d2a25;
    font-size: clamp(42px, 5.25vw, 76px);
    line-height: .99;
    letter-spacing: -3.1px;
    font-weight: 900;
    text-wrap: balance;
}

.gift-market-copy>p {
    margin: 24px 0 0;
    max-width: 680px;
    color: #765d54;
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.72;
    font-weight: 500;
}

.gift-market-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.gift-market-pills span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    color: #5d4740;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(135, 88, 69, .10);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(81, 50, 38, .045);
}

.gift-market-pills i {
    color: #b8796f;
}

.gift-market-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.gift-market-primary,
.gift-market-secondary {
    min-height: 52px;
    border-radius: 17px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.gift-market-primary {
    color: #fff;
    background: linear-gradient(135deg, #80503f, #d08f78 62%, #d1979f);
    box-shadow: 0 16px 34px rgba(129, 79, 64, .22);
}

.gift-market-secondary {
    color: #6a4d43;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(135, 88, 69, .13);
    box-shadow: 0 12px 28px rgba(93, 58, 44, .07);
}

.gift-market-primary:hover,
.gift-market-secondary:hover {
    transform: translateY(-2px);
}

.gift-market-primary:hover {
    box-shadow: 0 20px 42px rgba(129, 79, 64, .28);
}

.gift-market-trust-row {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #786058;
}

.gift-market-trust-row>div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.gift-market-trust-row strong {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(135, 88, 69, .1);
    font-size: 10px;
    color: #9b6957;
    box-shadow: 0 6px 15px rgba(87, 53, 38, .05);
}

.gift-market-trust-row span {
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.gift-market-trust-row>i {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(135, 88, 69, .12), rgba(135, 88, 69, .34), rgba(135, 88, 69, .12));
}

.gift-market-cover-shell {
    position: relative;
    width: min(100%, 580px);
    justify-self: end;
    padding: 24px;
}

.gift-market-cover-shell::before {
    content: "";
    position: absolute;
    inset: 5% 4% 3% 8%;
    border-radius: 46% 54% 44% 56% / 54% 42% 58% 46%;
    background: linear-gradient(145deg, rgba(225, 175, 162, .25), rgba(230, 184, 190, .42));
    transform: rotate(5deg);
}

.gift-market-cover-card {
    position: relative;
    z-index: 2;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 40px 40px 110px 40px;
    background: linear-gradient(145deg, #f2dfd8, #ecd3d0);
    border: 1px solid rgba(255, 255, 255, .74);
    box-shadow: 0 38px 80px rgba(91, 55, 42, .20), inset 0 0 0 1px rgba(135, 88, 69, .05);
}

.gift-market-cover-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(54, 33, 27, .16));
    pointer-events: none;
}

.gift-market-cover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.gift-market-cover-card:hover img {
    transform: scale(1.035);
}

.gift-market-cover-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 42px;
    color: #7a5a50;
}

.gift-market-cover-empty span {
    font-size: 64px;
    filter: drop-shadow(0 12px 18px rgba(99, 59, 45, .12));
}

.gift-market-cover-empty b {
    margin-top: 18px;
    font-size: 19px;
}

.gift-market-cover-empty small {
    margin-top: 7px;
    max-width: 260px;
    line-height: 1.5;
    font-size: 12px;
}

.gift-market-float-note {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 14px 12px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .91);
    border: 1px solid rgba(135, 88, 69, .09);
    box-shadow: 0 18px 42px rgba(83, 50, 38, .13);
    backdrop-filter: blur(12px);
}

.gift-market-float-note>span {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: #fff4ef;
    font-size: 20px;
}

.gift-market-float-note div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gift-market-float-note b {
    color: #60463d;
    font-size: 12px;
}

.gift-market-float-note small {
    color: #97766b;
    font-size: 9.5px;
}

.gift-market-float-note.note-one {
    left: -9px;
    bottom: 20%;
}

.gift-market-float-note.note-two {
    right: -4px;
    top: 19%;
}

.gift-market-gallery-section,
.gift-market-products-section,
.gift-market-note-section {
    padding: clamp(70px, 8vw, 116px) 0;
}

.gift-market-gallery-section {
    background: linear-gradient(180deg, #fffdfb, #fff8f4);
}

.gift-market-products-section {
    position: relative;
    background: #fffdfb;
}

.gift-market-products-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(135, 88, 69, .14), transparent);
}

.gift-market-section-heading>span {
    color: #b27767;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.gift-market-section-heading h2 {
    margin: 10px 0 0;
    color: #46302a;
    font-size: clamp(30px, 3.6vw, 50px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    font-weight: 900;
    text-wrap: balance;
}

.gift-market-section-heading p {
    margin: 15px 0 0;
    color: #82685e;
    line-height: 1.7;
    font-size: 14px;
}

.gift-market-heading-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
    gap: 52px;
    align-items: end;
    margin-bottom: 34px;
}

.gift-market-heading-split p {
    max-width: 440px;
    justify-self: end;
}

.gift-market-section-heading.centered {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.gift-market-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 125px;
    gap: 12px;
}

.gift-market-gallery-item {
    position: relative;
    overflow: hidden;
    border: 0;
    padding: 0;
    border-radius: 24px;
    background: #f3e5df;
    cursor: zoom-in;
    box-shadow: 0 14px 36px rgba(91, 55, 42, .08);
}

.gift-market-gallery-item:nth-child(5n+1) {
    grid-column: span 5;
    grid-row: span 3;
}

.gift-market-gallery-item:nth-child(5n+2) {
    grid-column: span 4;
    grid-row: span 2;
}

.gift-market-gallery-item:nth-child(5n+3) {
    grid-column: span 3;
    grid-row: span 2;
}

.gift-market-gallery-item:nth-child(5n+4) {
    grid-column: span 4;
    grid-row: span 2;
}

.gift-market-gallery-item:nth-child(5n+5) {
    grid-column: span 3;
    grid-row: span 2;
}

.gift-market-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, filter .4s ease;
}

.gift-market-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 58%, rgba(45, 29, 24, .28));
    opacity: .7;
    transition: opacity .3s;
}

.gift-market-gallery-item:hover img {
    transform: scale(1.055);
    filter: saturate(1.05);
}

.gift-market-gallery-item:hover::after {
    opacity: 1;
}

.gift-market-gallery-item>span {
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}

.gift-market-gallery-item>span b {
    font-size: 11px;
    letter-spacing: 1px;
}

.gift-market-gallery-item>span i {
    font-size: 11px;
}

.gift-market-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.gift-market-product-card {
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(135, 88, 69, .10);
    box-shadow: 0 18px 48px rgba(87, 53, 38, .08);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    animation: giftCardRise .5s both;
    animation-delay: calc(var(--gift-card-index, 0) * 55ms);
}

.gift-market-product-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 62px rgba(87, 53, 38, .14);
    border-color: rgba(135, 88, 69, .18);
}

@keyframes giftCardRise {
    from {
        opacity: 0;
        transform: translateY(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.gift-market-product-media {
    position: relative;
    aspect-ratio: 1.08/1;
    overflow: hidden;
    background: linear-gradient(145deg, #f7ebe5, #f3ddda);
}

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

.gift-market-product-card:hover .gift-market-product-media img {
    transform: scale(1.045);
}

.gift-market-product-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(55, 34, 28, .15));
    pointer-events: none;
}

.gift-market-product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9b7467;
}

.gift-market-product-placeholder span {
    font-size: 48px;
}

.gift-market-product-placeholder small {
    font-weight: 800;
    font-size: 11px;
}

.gift-market-product-badges {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.gift-market-badge {
    max-width: 78%;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    box-shadow: 0 7px 18px rgba(75, 43, 32, .09);
}

.gift-market-badge.editorial {
    color: #724b40;
    background: rgba(255, 250, 245, .92);
    border: 1px solid rgba(135, 88, 69, .08);
}

.gift-market-badge.discount {
    margin-left: auto;
    color: #fff;
    background: #b95f66;
}

.gift-market-product-number {
    position: absolute;
    z-index: 2;
    right: 14px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .88);
    color: #825d50;
    font-size: 10px;
    font-weight: 900;
    backdrop-filter: blur(9px);
}

.gift-market-product-body {
    padding: 20px 20px 19px;
}

.gift-market-product-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #b48677;
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 1px;
}

.gift-market-product-top i {
    font-size: 15px;
    color: #c99396;
}

.gift-market-product-body h3 {
    margin: 10px 0 0;
    color: #4d352e;
    font-size: 20px;
    line-height: 1.23;
    letter-spacing: -.55px;
    font-weight: 900;
}

.gift-market-product-body p {
    margin: 10px 0 0;
    min-height: 66px;
    color: #80685e;
    font-size: 12.5px;
    line-height: 1.65;
}

.gift-market-product-footer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(135, 88, 69, .09);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}

.gift-market-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gift-market-price del {
    color: #aa948b;
    font-size: 11px;
    font-weight: 700;
}

.gift-market-price strong {
    color: #7e4f40;
    font-size: 20px;
    letter-spacing: -.45px;
}

.gift-market-product-footer button {
    flex: 0 0 auto;
    min-height: 39px;
    padding: 0 13px;
    border-radius: 13px;
    border: 0;
    background: #f7ebe5;
    color: #784f42;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: .2s ease;
}

.gift-market-product-footer button:hover {
    color: #fff;
    background: linear-gradient(135deg, #875845, #d89d79);
    transform: translateY(-1px);
}

.gift-market-empty-products {
    max-width: 620px;
    margin: 0 auto;
    padding: 50px 28px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(145deg, #fff8f4, #f9ece8);
    border: 1px dashed rgba(135, 88, 69, .18);
}

.gift-market-empty-products>span {
    font-size: 52px;
}

.gift-market-empty-products h3 {
    margin: 12px 0 0;
    color: #563c34;
    font-size: 24px;
}

.gift-market-empty-products p {
    margin: 9px auto 18px;
    max-width: 470px;
    color: #816960;
    font-size: 13px;
    line-height: 1.65;
}

.gift-market-empty-products a {
    display: inline-flex;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    border-radius: 14px;
    background: #875845;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.gift-market-note-section {
    padding-top: 22px;
    background: linear-gradient(180deg, #fffdfb, #fff8f4);
}

.gift-market-note-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    padding: 30px 32px;
    border-radius: 30px;
    background: linear-gradient(135deg, #5f4138, #875845 45%, #c88579);
    color: #fff;
    box-shadow: 0 24px 60px rgba(88, 54, 42, .18);
    overflow: hidden;
    position: relative;
}

.gift-market-note-card::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    right: -100px;
    top: -120px;
    background: rgba(255, 255, 255, .08);
}

.gift-market-note-icon {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 29px;
}

.gift-market-note-card span {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.3px;
    opacity: .72;
}

.gift-market-note-card h2 {
    margin: 4px 0 0;
    font-size: 23px;
    letter-spacing: -.5px;
}

.gift-market-note-card p {
    margin: 6px 0 0;
    max-width: 730px;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .78);
}

.gift-market-note-card a {
    position: relative;
    z-index: 2;
    min-height: 44px;
    padding: 0 17px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    color: #69483e;
    text-decoration: none;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.gift-market-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000002;
    background: rgba(31, 20, 17, .88);
    backdrop-filter: blur(16px);
    padding: 32px;
    align-items: center;
    justify-content: center;
}

.gift-market-lightbox:not([hidden]) {
    display: flex;
}

.gift-market-lightbox figure {
    margin: 0;
    max-width: min(1050px, 82vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gift-market-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.gift-market-lightbox figcaption {
    color: rgba(255, 255, 255, .7);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
}

.gift-market-lightbox-close,
.gift-market-lightbox-nav {
    position: absolute;
    border: 0;
    color: #fff;
    background: rgba(255, 255, 255, .11);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.gift-market-lightbox-close {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    right: 24px;
    top: 24px;
    font-size: 28px;
}

.gift-market-lightbox-nav {
    width: 48px;
    height: 62px;
    border-radius: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 36px;
}

.gift-market-lightbox-nav.prev {
    left: 24px;
}

.gift-market-lightbox-nav.next {
    right: 24px;
}

body.gift-market-lightbox-open {
    overflow: hidden;
}

@media (max-width: 1100px) {
    .gift-market-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr);
        gap: 38px;
    }

    .gift-market-copy h1 {
        font-size: clamp(40px, 5.4vw, 60px);
        letter-spacing: -2.2px;
    }

    .gift-market-cover-shell {
        padding: 16px;
    }

    .gift-market-float-note.note-one {
        left: -16px;
    }

    .gift-market-float-note.note-two {
        right: -14px;
    }

    .gift-market-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gift-market-gallery {
        grid-auto-rows: 105px;
    }

    .gift-market-note-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .gift-market-note-card a {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 768px) {
    body.customer-gift-route {
        padding-bottom: 76px;
    }

    .gift-market-hero {
        min-height: 0;
        padding: 34px 0 62px;
    }

    .gift-market-hero-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .gift-market-copy {
        text-align: left;
    }

    .gift-market-kicker-row {
        gap: 7px;
        margin-bottom: 15px;
    }

    .gift-market-kicker,
    .gift-market-status-pill {
        min-height: 30px;
        font-size: 9px;
        padding: 0 10px;
    }

    .gift-market-copy h1 {
        font-size: clamp(36px, 11.2vw, 54px);
        line-height: 1.02;
        letter-spacing: -2px;
    }

    .gift-market-copy>p {
        margin-top: 17px;
        font-size: 14px;
        line-height: 1.65;
    }

    .gift-market-pills {
        margin-top: 20px;
        gap: 7px;
    }

    .gift-market-pills span {
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }

    .gift-market-actions {
        margin-top: 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gift-market-primary,
    .gift-market-secondary {
        min-height: 47px;
        padding: 0 12px;
        border-radius: 15px;
        font-size: 12px;
    }

    .gift-market-trust-row {
        margin-top: 24px;
        gap: 7px;
        justify-content: space-between;
    }

    .gift-market-trust-row>i {
        flex: 1;
        min-width: 8px;
    }

    .gift-market-trust-row span {
        font-size: 9px;
    }

    .gift-market-trust-row strong {
        width: 27px;
        height: 27px;
        font-size: 9px;
    }

    .gift-market-cover-shell {
        width: min(94%, 520px);
        justify-self: center;
        padding: 10px;
    }

    .gift-market-cover-card {
        border-radius: 30px 30px 82px 30px;
    }

    .gift-market-float-note {
        padding: 9px 10px;
        border-radius: 15px;
        gap: 8px;
    }

    .gift-market-float-note>span {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 17px;
    }

    .gift-market-float-note b {
        font-size: 10px;
    }

    .gift-market-float-note small {
        font-size: 8px;
    }

    .gift-market-float-note.note-one {
        left: -8px;
        bottom: 14%;
    }

    .gift-market-float-note.note-two {
        right: -8px;
        top: 15%;
    }

    .gift-market-gallery-section,
    .gift-market-products-section,
    .gift-market-note-section {
        padding: 62px 0;
    }

    .gift-market-heading-split {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 24px;
    }

    .gift-market-heading-split p {
        justify-self: start;
    }

    .gift-market-section-heading h2 {
        font-size: 33px;
        letter-spacing: -1.1px;
    }

    .gift-market-section-heading p {
        font-size: 12.5px;
        margin-top: 10px;
    }

    .gift-market-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
        gap: 9px;
    }

    .gift-market-gallery-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 1/1.08;
        border-radius: 18px;
    }

    .gift-market-gallery-item:first-child {
        grid-column: 1/-1;
        aspect-ratio: 1.75/1;
    }

    .gift-market-product-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gift-market-product-card {
        border-radius: 22px;
    }

    .gift-market-product-media {
        aspect-ratio: 1.22/1;
    }

    .gift-market-product-body {
        padding: 17px;
    }

    .gift-market-product-body h3 {
        font-size: 19px;
    }

    .gift-market-product-body p {
        min-height: 0;
        font-size: 12px;
    }

    .gift-market-product-footer {
        align-items: center;
    }

    .gift-market-note-section {
        padding-top: 10px;
    }

    .gift-market-note-card {
        grid-template-columns: 1fr;
        padding: 25px 22px;
        border-radius: 24px;
        gap: 12px;
    }

    .gift-market-note-icon {
        width: 48px;
        height: 48px;
        border-radius: 16px;
    }

    .gift-market-note-card a {
        grid-column: auto;
        justify-self: stretch;
        justify-content: center;
        margin-top: 4px;
    }

    .gift-market-lightbox {
        padding: 18px;
    }

    .gift-market-lightbox figure {
        max-width: 92vw;
    }

    .gift-market-lightbox-nav {
        width: 40px;
        height: 54px;
        border-radius: 14px;
        font-size: 30px;
    }

    .gift-market-lightbox-nav.prev {
        left: 8px
    }

    .gift-market-lightbox-nav.next {
        right: 8px
    }

    .gift-market-lightbox-close {
        right: 10px;
        top: 10px;
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 420px) {
    .gift-market-hero {
        padding-top: 27px;
    }

    .gift-market-status-pill {
        display: none;
    }

    .gift-market-copy h1 {
        font-size: 38px;
        letter-spacing: -1.7px;
    }

    .gift-market-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gift-market-secondary {
        display: none;
    }

    .gift-market-trust-row span {
        display: none;
    }

    .gift-market-trust-row>div {
        gap: 0;
    }

    .gift-market-cover-shell {
        width: 100%;
    }

    .gift-market-float-note.note-two {
        display: none;
    }

    .gift-market-float-note.note-one {
        left: -3px;
        bottom: 10%;
    }

    .gift-market-section-heading h2 {
        font-size: 30px;
    }

    .gift-market-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .gift-market-product-footer {
        gap: 9px;
    }

    .gift-market-price strong {
        font-size: 18px;
    }

    .gift-market-product-footer button {
        padding: 0 11px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .gift-market-page *,
    .gift-market-page *::before,
    .gift-market-page *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   GIFT BASKET CUSTOMER · V344 POLISH + PERFORMANCE
   - stronger discount badge
   - calmer typography hierarchy
   - one-line compact mobile header
   - defer below-the-fold rendering where supported
   ========================================================= */

.gift-market-copy h1 {
    max-width: 690px;
    font-size: clamp(38px, 4.55vw, 62px);
    line-height: 1.035;
    letter-spacing: -2.35px;
}

.gift-market-copy>p {
    max-width: 620px;
    margin-top: 19px;
    font-size: clamp(14px, 1.25vw, 17px);
    line-height: 1.66;
    font-weight: 500;
}

.gift-market-kicker-row {
    margin-bottom: 17px;
}

.gift-market-kicker,
.gift-market-status-pill {
    font-size: 10px;
}

.gift-market-pills {
    margin-top: 23px;
}

.gift-market-actions {
    margin-top: 28px;
}

.gift-market-trust-row {
    margin-top: 29px;
}

.gift-market-product-card {
    contain: layout paint style;
}

.gift-market-product-top {
    gap: 10px;
    color: #a87a6b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15px;
    text-transform: none;
}

.gift-market-product-top>span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-market-product-body h3 {
    margin-top: 8px;
    font-size: 19px;
    line-height: 1.26;
    letter-spacing: -.42px;
}

.gift-market-product-body p {
    margin-top: 8px;
    color: #806a61;
    font-size: 12px;
    line-height: 1.62;
}

.gift-market-product-badges {
    top: 13px;
    left: 13px;
    right: 13px;
    gap: 9px;
}

.gift-market-badge.discount {
    min-height: 40px;
    margin-left: auto;
    padding: 5px 13px 5px 12px;
    gap: 4px;
    border: 2px solid rgba(255, 255, 255, .84);
    background: linear-gradient(135deg, #ad4e5b 0%, #cf6d76 60%, #d98a83 100%);
    color: #fff;
    box-shadow: 0 13px 28px rgba(145, 65, 75, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
    transform: rotate(1.5deg);
    text-shadow: 0 1px 1px rgba(91, 34, 43, .18);
}

.gift-market-badge.discount span {
    font-size: 8px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .8px;
}

.gift-market-badge.discount strong {
    font-size: 14px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.25px;
}

.gift-market-price strong {
    font-size: 22px;
    line-height: 1.08;
}

.gift-market-price del {
    margin-bottom: 1px;
    font-size: 10.5px;
}

/* Defer heavier below-the-fold sections until near viewport. */
@supports (content-visibility: auto) {

    .gift-market-gallery-section,
    .gift-market-products-section,
    .gift-market-note-section {
        content-visibility: auto;
        contain-intrinsic-size: 1px 760px;
    }
}

.gift-market-gallery-item {
    contain: layout paint style;
}

.gift-market-gallery-item img,
.gift-market-product-media img {
    backface-visibility: hidden;
}

@media (max-width: 1100px) {
    .gift-market-copy h1 {
        font-size: clamp(36px, 5vw, 52px);
        letter-spacing: -1.85px;
    }

    .gift-market-copy>p {
        font-size: 14.5px;
    }
}

@media (max-width: 768px) {

    /* One compact header row: logo + horizontally scrollable menu. */
    .site-header {
        background: rgba(255, 250, 245, .965) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
        backdrop-filter: blur(10px) saturate(1.08) !important;
        border-bottom: 1px solid rgba(135, 88, 69, .07);
    }

    .header-inner {
        height: 58px !important;
        min-height: 58px !important;
        padding: 6px 9px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        overflow: hidden;
    }

    .logo-wrap {
        flex: 0 0 auto !important;
        align-self: auto !important;
        min-width: 0;
        padding: 3px 7px 3px 3px !important;
        gap: 6px !important;
        box-shadow: 0 5px 14px rgba(87, 53, 38, .06) !important;
    }

    .logo-mark {
        width: 34px;
        height: 34px;
    }

    .logo-wrap img {
        width: 29px !important;
        height: 29px !important;
    }

    .logo-text strong {
        font-size: 15px !important;
        letter-spacing: -.35px !important;
    }

    .logo-text span {
        display: none !important;
    }

    .main-menu {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px;
        padding: 3px 1px 4px !important;
        gap: 5px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 14px), transparent 100%);
    }

    .header-inner .main-menu a {
        flex: 0 0 auto !important;
        min-height: 33px !important;
        height: 33px !important;
        padding: 0 9px !important;
        gap: 4px !important;
        border-radius: 999px !important;
        font-size: 11.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        scroll-snap-align: center;
        box-shadow: 0 4px 11px rgba(87, 53, 38, .045) !important;
    }

    .header-inner .main-menu a .menu-ico {
        font-size: 13px;
    }

    .gift-market-hero {
        padding-top: 28px;
        padding-bottom: 54px;
    }

    .gift-market-hero::before {
        width: 300px;
        height: 300px;
        right: -155px;
        top: -125px;
        border-width: 46px;
    }

    .gift-market-orb {
        filter: none;
    }

    .gift-market-orb-two {
        display: none;
    }

    .gift-market-kicker-row {
        margin-bottom: 12px;
    }

    .gift-market-kicker,
    .gift-market-status-pill {
        min-height: 27px;
        padding: 0 9px;
        font-size: 8.5px;
    }

    .gift-market-copy h1 {
        max-width: 540px;
        font-size: clamp(30px, 8.9vw, 42px);
        line-height: 1.055;
        letter-spacing: -1.45px;
    }

    .gift-market-copy>p {
        max-width: 520px;
        margin-top: 13px;
        font-size: 12.8px;
        line-height: 1.62;
    }

    .gift-market-pills {
        margin-top: 17px;
    }

    .gift-market-pills span {
        min-height: 31px;
        padding: 0 9px;
        gap: 6px;
        font-size: 10px;
    }

    .gift-market-actions {
        margin-top: 20px;
    }

    .gift-market-trust-row {
        margin-top: 20px;
    }

    .gift-market-product-badges {
        top: 11px;
        left: 11px;
        right: 11px;
    }

    .gift-market-badge.discount {
        min-height: 38px;
        padding: 5px 12px;
    }

    .gift-market-badge.discount strong {
        font-size: 13.5px;
    }

    .gift-market-product-body h3 {
        font-size: 18px;
    }

    .gift-market-product-body p {
        font-size: 11.5px;
        line-height: 1.58;
    }

    .gift-market-price strong {
        font-size: 20px;
    }
}

@media (max-width: 430px) {
    .header-inner {
        height: 54px !important;
        min-height: 54px !important;
        padding: 5px 7px !important;
        gap: 5px !important;
    }

    .logo-wrap {
        padding: 3px !important;
        border-radius: 50% !important;
    }

    .logo-mark {
        width: 33px;
        height: 33px;
    }

    .logo-text {
        display: none !important;
    }

    .main-menu {
        height: 39px;
        gap: 4px !important;
    }

    .header-inner .main-menu a {
        min-height: 31px !important;
        height: 31px !important;
        padding: 0 8px !important;
        font-size: 10.8px !important;
    }

    .header-inner .main-menu .gift-basket-menu-link .menu-ico {
        display: none !important;
    }

    .gift-market-hero {
        padding-top: 23px;
    }

    .gift-market-copy h1 {
        font-size: clamp(29px, 9.4vw, 35px);
        line-height: 1.07;
        letter-spacing: -1.15px;
    }

    .gift-market-copy>p {
        margin-top: 11px;
        font-size: 12.2px;
        line-height: 1.58;
    }

    .gift-market-status-pill {
        display: none;
    }

    .gift-market-product-body {
        padding: 16px;
    }

    .gift-market-product-top {
        font-size: 8.5px;
    }

    .gift-market-badge.discount {
        min-height: 37px;
        padding: 5px 11px;
        transform: rotate(1deg);
    }

    .gift-market-badge.discount span {
        font-size: 7.5px;
    }

    .gift-market-badge.discount strong {
        font-size: 13px;
    }
}


/* =========================================================
   GIFT BASKET CUSTOMER · V345 MOBILE HEADER + POLISH
   - keep logo + "3 Cây Non" visible on small screens
   - hide Contact nav on mobile to preserve a true one-row header
   - remove mobile fixed CTA spacing
   - calmer mobile typography + lighter rendering cost
   ========================================================= */

/* Fixed mobile CTA was removed from DOM in V345. */
body.customer-gift-route {
    padding-bottom: 0 !important;
}

/* Slightly calmer visual rhythm and cheaper card painting. */
.gift-market-product-card {
    contain: layout paint style;
}

.gift-market-product-media {
    overflow: hidden;
    background: linear-gradient(145deg, #fbf4ef, #f7ece7);
}

.gift-market-section-heading h2 {
    text-wrap: balance;
}

.gift-market-copy h1,
.gift-market-copy>p {
    text-wrap: pretty;
}

@media (max-width: 768px) {

    /* True one-line header. Keep brand logo + name; remove only low-priority Contact. */
    .site-header {
        background: rgba(255, 250, 245, .98) !important;
        -webkit-backdrop-filter: blur(8px) saturate(1.04) !important;
        backdrop-filter: blur(8px) saturate(1.04) !important;
        border-bottom-color: rgba(135, 88, 69, .08) !important;
    }

    .header-inner {
        height: 56px !important;
        min-height: 56px !important;
        padding: 5px 8px !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .logo-wrap {
        flex: 0 0 auto !important;
        align-self: center !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 3px 8px 3px 3px !important;
        gap: 5px !important;
        border-radius: 999px !important;
        box-shadow: 0 4px 12px rgba(87, 53, 38, .055) !important;
    }

    .logo-mark {
        flex: 0 0 auto !important;
        width: 34px !important;
        height: 34px !important;
        box-shadow: inset 0 0 0 1px rgba(135, 88, 69, .08) !important;
    }

    .logo-wrap img {
        width: 30px !important;
        height: 30px !important;
    }

    .logo-text {
        display: flex !important;
        min-width: 0 !important;
    }

    .logo-text strong {
        display: block !important;
        font-size: 13.5px !important;
        line-height: 1 !important;
        letter-spacing: -.35px !important;
        white-space: nowrap !important;
    }

    .logo-text span {
        display: none !important;
    }

    .main-menu {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 3px 0 !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 10px), transparent 100%);
    }

    .main-menu::-webkit-scrollbar {
        display: none !important;
    }

    .header-inner .main-menu a {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 7px !important;
        gap: 3px !important;
        border-radius: 999px !important;
        font-size: 10.5px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, .74) !important;
        border: 1px solid rgba(135, 88, 69, .075) !important;
        box-shadow: none !important;
        scroll-snap-align: start;
    }

    .header-inner .main-menu a .menu-ico {
        font-size: 11px !important;
    }

    #menuContact {
        display: none !important;
    }

    .call-btn {
        display: none !important;
    }

    /* Smaller hero type on phones/tablets, as requested. */
    .gift-market-hero {
        padding: 24px 0 46px !important;
    }

    .gift-market-hero-grid {
        gap: 27px !important;
    }

    .gift-market-kicker-row {
        margin-bottom: 10px !important;
        gap: 6px !important;
    }

    .gift-market-kicker,
    .gift-market-status-pill {
        min-height: 25px !important;
        padding: 0 8px !important;
        font-size: 8px !important;
    }

    .gift-market-copy h1 {
        max-width: 480px !important;
        font-size: clamp(27px, 7.8vw, 34px) !important;
        line-height: 1.075 !important;
        letter-spacing: -.95px !important;
    }

    .gift-market-copy>p {
        max-width: 470px !important;
        margin-top: 10px !important;
        font-size: 11.8px !important;
        line-height: 1.55 !important;
    }

    .gift-market-pills {
        margin-top: 14px !important;
        gap: 6px !important;
    }

    .gift-market-pills span {
        min-height: 29px !important;
        padding: 0 8px !important;
        font-size: 9.3px !important;
    }

    .gift-market-actions {
        margin-top: 17px !important;
    }

    .gift-market-primary,
    .gift-market-secondary {
        min-height: 43px !important;
        border-radius: 14px !important;
        font-size: 11px !important;
    }

    .gift-market-trust-row {
        margin-top: 17px !important;
    }

    /* More balanced lower sections on small screens. */
    .gift-market-gallery-section,
    .gift-market-products-section,
    .gift-market-note-section {
        padding: 48px 0 !important;
    }

    .gift-market-section-heading h2 {
        font-size: clamp(25px, 7.4vw, 29px) !important;
        line-height: 1.1 !important;
        letter-spacing: -.75px !important;
    }

    .gift-market-section-heading p {
        margin-top: 8px !important;
        font-size: 11.4px !important;
        line-height: 1.58 !important;
    }

    .gift-market-product-grid {
        gap: 14px !important;
    }

    .gift-market-product-card {
        border-radius: 20px !important;
        box-shadow: 0 10px 28px rgba(87, 53, 38, .065) !important;
        animation: none !important;
        transition: none !important;
    }

    .gift-market-product-body {
        padding: 15px !important;
    }

    .gift-market-product-body h3 {
        font-size: 17px !important;
    }

    .gift-market-product-body p {
        margin-top: 7px !important;
        font-size: 11.2px !important;
        line-height: 1.55 !important;
    }

    .gift-market-product-footer {
        margin-top: 14px !important;
        padding-top: 13px !important;
    }

    .gift-market-price strong {
        font-size: 19px !important;
    }

    .gift-market-note-card {
        padding: 22px 19px !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 36px rgba(88, 54, 42, .14) !important;
    }

    .gift-market-note-card h2 {
        font-size: 20px !important;
    }

    .gift-market-note-card p {
        font-size: 11.2px !important;
    }

    /* Avoid GPU-heavy filters in the normal mobile page. */
    .gift-market-float-note,
    .gift-market-product-number {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 430px) {
    .header-inner {
        height: 54px !important;
        min-height: 54px !important;
        padding: 5px 6px !important;
        gap: 4px !important;
    }

    .logo-wrap {
        height: 42px !important;
        padding: 3px 6px 3px 3px !important;
        gap: 4px !important;
        border-radius: 999px !important;
    }

    .logo-mark {
        width: 32px !important;
        height: 32px !important;
    }

    .logo-wrap img {
        width: 28px !important;
        height: 28px !important;
    }

    .logo-text {
        display: flex !important;
    }

    .logo-text strong {
        display: block !important;
        font-size: 12px !important;
        letter-spacing: -.3px !important;
    }

    .main-menu {
        height: 39px !important;
        gap: 3px !important;
    }

    .header-inner .main-menu a {
        min-height: 30px !important;
        height: 30px !important;
        padding: 0 6px !important;
        font-size: 9.7px !important;
    }

    .header-inner .main-menu .gift-basket-menu-link .menu-ico {
        display: none !important;
    }

    .gift-market-hero {
        padding-top: 20px !important;
    }

    .gift-market-status-pill {
        display: none !important;
    }

    .gift-market-copy h1 {
        font-size: clamp(26px, 7.5vw, 30px) !important;
        line-height: 1.08 !important;
        letter-spacing: -.8px !important;
    }

    .gift-market-copy>p {
        margin-top: 9px !important;
        font-size: 11.2px !important;
        line-height: 1.52 !important;
    }

    .gift-market-pills span {
        font-size: 8.8px !important;
    }

    .gift-market-section-heading h2 {
        font-size: 25px !important;
    }

    .gift-market-section-heading p {
        font-size: 11px !important;
    }
}

@media (max-width: 360px) {

    /* Keep logo, but make the brand label ultra-compact instead of deleting it. */
    .logo-text strong {
        font-size: 10.5px !important;
    }

    .logo-wrap {
        padding-right: 5px !important;
    }

    .header-inner .main-menu a {
        padding: 0 5px !important;
        font-size: 9.2px !important;
    }
}


/* =========================================================
   V350 · SAFE TWO-ROW MOBILE HEADER
   Visual baseline = V345. Only mobile header geometry changes.
   ========================================================= */
@media (max-width: 768px) {
    .site-header {
        background: rgba(255, 250, 245, .98) !important;
    }

    .header-inner {
        height: auto !important;
        min-height: 94px !important;
        padding: 6px 8px 7px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        overflow: visible !important;
    }

    .logo-wrap {
        align-self: center !important;
        flex: 0 0 46px !important;
        height: 46px !important;
        min-width: 0 !important;
        padding: 3px 9px 3px 4px !important;
        gap: 6px !important;
    }

    .logo-mark {
        width: 36px !important;
        height: 36px !important;
    }

    .logo-wrap img {
        width: 32px !important;
        height: 32px !important;
    }

    .logo-text {
        display: flex !important;
    }

    .logo-text strong {
        display: block !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    .logo-text span {
        display: block !important;
        margin-top: 2px !important;
        font-size: 7px !important;
        white-space: nowrap !important;
    }

    .main-menu {
        width: 100% !important;
        min-width: 0 !important;
        height: 35px !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 4px !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .header-inner .main-menu a {
        width: auto !important;
        min-width: 0 !important;
        height: 35px !important;
        min-height: 35px !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        overflow: hidden !important;
        border-radius: 11px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .header-inner .main-menu a>span:not(.menu-ico),
    #menuGiftBasketLabel {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #menuContact,
    .call-btn {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .header-inner {
        min-height: 90px !important;
        padding: 5px 6px 6px !important;
        gap: 4px !important;
    }

    .logo-wrap {
        flex-basis: 44px !important;
        height: 44px !important;
    }

    .logo-mark {
        width: 34px !important;
        height: 34px !important;
    }

    .logo-wrap img {
        width: 30px !important;
        height: 30px !important;
    }

    .logo-text strong {
        font-size: 14px !important;
    }

    .logo-text span {
        font-size: 6.7px !important;
    }

    .main-menu {
        height: 33px !important;
        gap: 3px !important;
    }

    .header-inner .main-menu a {
        height: 33px !important;
        min-height: 33px !important;
        padding: 0 3px !important;
        font-size: 9.3px !important;
    }

    .header-inner .main-menu .gift-basket-menu-link .menu-ico {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .header-inner .main-menu a {
        font-size: 8.7px !important;
        padding: 0 2px !important;
    }

    .logo-text strong {
        font-size: 13.5px !important;
    }
}

.website-gift-upsell {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 17px;
    border: 1px solid rgba(208, 98, 125, .18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 213, 224, .36), transparent 35%),
        linear-gradient(145deg, #fffdfc 0%, #fff8f9 58%, #fffaf3 100%);
    box-shadow: 0 12px 32px rgba(108, 61, 71, .06);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 420px;
}

.website-gift-upsell[hidden] {
    display: none !important;
}

.website-gift-upsell::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -70px;
    top: -76px;
    border-radius: 50%;
    background: rgba(255, 182, 198, .18);
    pointer-events: none;
}

.website-gift-upsell-head,
.website-gift-upsell-foot,
.website-gift-upsell-selected {
    position: relative;
    z-index: 1;
}

.website-gift-upsell-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.website-gift-upsell-copy {
    min-width: 0;
}

.website-gift-upsell-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    color: #a24d63;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: .075em;
}

.website-gift-upsell-copy h4 {
    margin: 0;
    color: #2f2527;
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.website-gift-upsell-copy p {
    margin: 5px 0 0;
    max-width: 620px;
    color: #75696b;
    font-size: 12px;
    line-height: 1.5;
}

.website-gift-upsell-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid rgba(197, 87, 114, .18);
    border-radius: 999px;
    color: #99445a;
    background: rgba(255, 255, 255, .82);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.website-gift-upsell-products {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.website-gift-upsell-card {
    appearance: none;
    min-width: 0;
    padding: 0;
    border: 1px solid rgba(91, 68, 73, .11);
    border-radius: 17px;
    background: rgba(255, 255, 255, .92);
    color: inherit;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    contain: layout paint style;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.website-gift-upsell-card:hover {
    transform: translateY(-2px);
    border-color: rgba(197, 87, 114, .32);
    box-shadow: 0 10px 24px rgba(92, 55, 64, .09);
}

.website-gift-upsell-card.is-selected {
    border-color: rgba(190, 65, 97, .65);
    box-shadow: 0 0 0 2px rgba(224, 106, 135, .12), 0 12px 28px rgba(104, 53, 66, .09);
}

.website-gift-upsell-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: #f7efed;
    overflow: hidden;
}

.website-gift-upsell-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.website-gift-upsell-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 32px;
}

.website-gift-upsell-discount,
.website-gift-upsell-badge {
    position: absolute;
    top: 8px;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 5px 13px rgba(48, 27, 31, .11);
}

.website-gift-upsell-discount {
    left: 8px;
    color: #fff;
    background: linear-gradient(135deg, #e74268, #bd294e);
}

.website-gift-upsell-badge {
    right: 8px;
    max-width: 48%;
    color: #583f37;
    background: rgba(255, 255, 255, .9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-gift-upsell-card-body {
    display: grid;
    gap: 8px;
    padding: 11px;
}

.website-gift-upsell-card-body>strong {
    display: -webkit-box;
    min-height: 2.55em;
    overflow: hidden;
    color: #33282a;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.28;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.website-gift-upsell-card-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
}

.website-gift-upsell-card-price del {
    color: #a09698;
    font-size: 9.5px;
}

.website-gift-upsell-card-price b {
    color: #bc3155;
    font-size: 13px;
    font-weight: 950;
}

.website-gift-upsell-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 10px;
    border-radius: 10px;
    color: #774657;
    background: #fff0f4;
    font-size: 10.5px;
    font-weight: 900;
}

.website-gift-upsell-card.is-selected .website-gift-upsell-action {
    color: #fff;
    background: linear-gradient(135deg, #c43d60, #a72b4d);
}

.website-gift-upsell-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 12px;
    border: 1px solid rgba(72, 124, 93, .16);
    border-radius: 15px;
    background: rgba(242, 250, 245, .92);
}

.website-gift-upsell-selected[hidden] {
    display: none !important;
}

.website-gift-upsell-selected-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.website-gift-upsell-selected-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    color: #397653;
    background: #fff;
}

.website-gift-upsell-selected-copy div {
    min-width: 0;
}

.website-gift-upsell-selected-copy small,
.website-gift-upsell-selected-copy strong {
    display: block;
}

.website-gift-upsell-selected-copy small {
    margin-bottom: 2px;
    color: #658171;
    font-size: 9.5px;
    font-weight: 800;
}

.website-gift-upsell-selected-copy strong {
    overflow: hidden;
    color: #345442;
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-gift-upsell-selected-price {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
}

.website-gift-upsell-selected-price strong {
    color: #397653;
    font-size: 12.5px;
}

.website-gift-upsell-selected-price button {
    appearance: none;
    min-height: 29px;
    padding: 0 9px;
    border: 1px solid rgba(65, 96, 75, .16);
    border-radius: 9px;
    background: #fff;
    color: #5c6e62;
    font: inherit;
    font-size: 9.5px;
    font-weight: 850;
    cursor: pointer;
}

.website-gift-upsell-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #817578;
    font-size: 10.5px;
    line-height: 1.4;
}

.website-gift-upsell-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.website-gift-upsell-foot i {
    color: #4f8c68;
}

.website-gift-upsell-foot a {
    flex: 0 0 auto;
    color: #9c4159;
    font-weight: 900;
    text-underline-offset: 3px;
}

.booking-summary-gift {
    color: #9c4159;
    background: linear-gradient(90deg, rgba(255, 242, 246, .78), transparent);
}

.booking-summary-gift span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.booking-summary-gift strong {
    color: #b53759;
}

.booking-confirmation-summary.has-gift {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.booking-confirmation-gift-summary {
    border-color: rgba(203, 86, 116, .2);
    background: linear-gradient(145deg, #fffafb, #fff5f7);
}

.booking-confirmation-gift-summary span i {
    color: #c44667;
}

.booking-confirmation-gift-summary strong {
    color: #6f3446;
}

@media (max-width: 1024px) {
    .website-gift-upsell-products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-confirmation-summary.has-gift {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .website-gift-upsell {
        gap: 11px;
        padding: 13px;
        border-radius: 18px;
        box-shadow: none;
        contain-intrinsic-size: 340px;
    }

    .website-gift-upsell-head {
        gap: 9px;
    }

    .website-gift-upsell-kicker {
        font-size: 9px;
    }

    .website-gift-upsell-copy h4 {
        font-size: 14px;
    }

    .website-gift-upsell-copy p {
        font-size: 10.5px;
        line-height: 1.45;
    }

    .website-gift-upsell-pill {
        min-height: 25px;
        padding: 0 8px;
        font-size: 9px;
    }

    .website-gift-upsell-products {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin-inline: -2px;
        padding: 2px 2px 6px;
    }

    .website-gift-upsell-products::-webkit-scrollbar {
        display: none;
    }

    .website-gift-upsell-card {
        flex: 0 0 clamp(142px, 45vw, 176px);
        scroll-snap-align: start;
        border-radius: 15px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .website-gift-upsell-card:hover {
        transform: none;
    }

    .website-gift-upsell-card-body {
        gap: 6px;
        padding: 9px;
    }

    .website-gift-upsell-card-body>strong {
        font-size: 10.8px;
    }

    .website-gift-upsell-card-price b {
        font-size: 11.5px;
    }

    .website-gift-upsell-card-price del {
        font-size: 8.5px;
    }

    .website-gift-upsell-action {
        min-height: 28px;
        font-size: 9.5px;
    }

    .website-gift-upsell-discount,
    .website-gift-upsell-badge {
        top: 6px;
        min-height: 21px;
        font-size: 8px;
    }

    .website-gift-upsell-discount {
        left: 6px;
    }

    .website-gift-upsell-badge {
        right: 6px;
    }

    .website-gift-upsell-selected {
        gap: 8px;
        padding: 9px 10px;
    }

    .website-gift-upsell-selected-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .website-gift-upsell-selected-copy small {
        font-size: 8.5px;
    }

    .website-gift-upsell-selected-copy strong {
        font-size: 10.5px;
        max-width: 36vw;
    }

    .website-gift-upsell-selected-price {
        gap: 6px;
    }

    .website-gift-upsell-selected-price strong {
        font-size: 11px;
    }

    .website-gift-upsell-selected-price button {
        min-height: 27px;
        font-size: 9px;
    }

    .website-gift-upsell-foot {
        font-size: 9.5px;
    }

    .website-gift-upsell-foot>span {
        min-width: 0;
    }

    /* Requested: confirmation headline two visual steps smaller on mobile. */
    .booking-confirmation-title {
        max-width: 100%;
        font-size: clamp(22px, 6.4vw, 28px);
        line-height: 1.08;
        letter-spacing: -.032em;
    }

    .booking-confirmation-lead {
        margin-top: 9px;
        font-size: 12.5px;
        line-height: 1.55;
    }

    .booking-confirmation-kicker {
        margin-bottom: 9px;
        font-size: 11px;
    }

    .booking-confirmation-kicker-icon {
        width: 25px;
        height: 25px;
    }

    .booking-confirmation-hero {
        gap: 12px;
        padding: 15px;
        border: 1px solid #eee4e6;
        border-radius: 18px;
        background: linear-gradient(145deg, #fff, #fff9fa);
    }

    .booking-confirmation-order {
        padding: 11px 13px;
        border-radius: 13px;
        box-shadow: none;
        background: rgba(255, 255, 255, .8);
    }

    .booking-confirmation-order span {
        margin-bottom: 3px;
        font-size: 9px;
    }

    .booking-confirmation-order strong {
        font-size: 13px;
    }

    .booking-confirmation-summary.has-gift {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .website-gift-upsell-copy h4 {
        font-size: 13px;
    }

    .website-gift-upsell-copy p {
        font-size: 10px;
    }

    .website-gift-upsell-pill {
        display: none;
    }

    .website-gift-upsell-card {
        flex-basis: 145px;
    }

    .website-gift-upsell-foot a {
        font-size: 9px;
    }

    .booking-confirmation-title {
        font-size: 21px;
    }

    .booking-confirmation-lead {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .website-gift-upsell-card {
        transition: none;
    }
}


/* =========================================================
   V348 · GIFT UPSELL CONFIRM + RESPONSIVE POLISH + PERF
   Keeps original image URLs/quality; optimizes presentation only.
========================================================= */
.website-gift-confirm-modal[hidden] {
    display: none !important;
}

.website-gift-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 1000015;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}

.website-gift-confirm-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.website-gift-confirm-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(38, 27, 30, .48);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    cursor: default;
}

.website-gift-confirm-sheet {
    position: relative;
    width: min(470px, 100%);
    max-height: min(720px, calc(100dvh - 40px));
    overflow: auto;
    padding: 22px;
    border: 1px solid rgba(180, 88, 112, .17);
    border-radius: 25px;
    background:
        radial-gradient(circle at 100% 0, rgba(255, 226, 233, .8), transparent 32%),
        linear-gradient(160deg, #fffdfd, #fff8fa 54%, #fffdf9);
    box-shadow: 0 26px 70px rgba(73, 38, 48, .22);
    transform: translateY(10px) scale(.985);
    transition: transform .18s ease;
    contain: layout paint style;
}

.website-gift-confirm-modal.is-open .website-gift-confirm-sheet {
    transform: translateY(0) scale(1);
}

.website-gift-confirm-accent {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, #d95073, #e7a25e, #7ba287);
}

.website-gift-confirm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(95, 67, 74, .10);
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    color: #725963;
    font: inherit;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.website-gift-confirm-top {
    display: grid;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 12px;
    padding-right: 30px;
}

.website-gift-confirm-icon {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 14px;
    color: #b7395b;
    background: #fff;
    box-shadow: 0 8px 20px rgba(151, 65, 88, .10);
}

.website-gift-confirm-kicker {
    display: block;
    margin-bottom: 4px;
    color: #a3445e;
    font-size: 9.5px;
    font-weight: 950;
    letter-spacing: .10em;
}

.website-gift-confirm-top h3 {
    margin: 0;
    color: #392b2f;
    font-size: 19px;
    font-weight: 950;
    line-height: 1.22;
    letter-spacing: -.025em;
}

.website-gift-confirm-top p {
    margin: 7px 0 0;
    color: #806f74;
    font-size: 11.5px;
    line-height: 1.55;
}

.website-gift-confirm-product {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-top: 17px;
    padding: 11px;
    border: 1px solid rgba(178, 90, 113, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .83);
}

.website-gift-confirm-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 14px;
    background: #f8eff1;
}

.website-gift-confirm-media[hidden] {
    display: none !important;
}

.website-gift-confirm-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.website-gift-confirm-discount {
    position: absolute;
    left: 6px;
    bottom: 6px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #d53e62, #b52c4d);
    box-shadow: 0 5px 13px rgba(181, 44, 77, .22);
    font-size: 8px;
    font-weight: 950;
}

.website-gift-confirm-discount[hidden] {
    display: none !important;
}

.website-gift-confirm-product-copy {
    min-width: 0;
}

.website-gift-confirm-product-copy>strong {
    display: block;
    color: #3d2d32;
    font-size: 13px;
    font-weight: 950;
    line-height: 1.35;
}

.website-gift-confirm-prices {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 7px;
}

.website-gift-confirm-prices del {
    color: #a18f94;
    font-size: 10px;
}

.website-gift-confirm-prices del[hidden] {
    display: none !important;
}

.website-gift-confirm-prices b {
    color: #bd3558;
    font-size: 16px;
    font-weight: 950;
}

.website-gift-confirm-product-copy>span {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    color: #68796d;
    font-size: 9.5px;
    font-weight: 750;
    line-height: 1.45;
}

.website-gift-confirm-product-copy>span i {
    margin-top: 2px;
    color: #4f8b67;
}

.website-gift-confirm-actions {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 9px;
    margin-top: 16px;
}

.website-gift-confirm-actions button {
    min-height: 43px;
    border-radius: 13px;
    padding: 0 13px;
    font: inherit;
    font-size: 10.5px;
    font-weight: 900;
    cursor: pointer;
}

.website-gift-confirm-cancel {
    border: 1px solid rgba(95, 72, 78, .14);
    color: #74646a;
    background: #fff;
}

.website-gift-confirm-accept {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #ca3d61, #a92c4e);
    box-shadow: 0 9px 20px rgba(169, 44, 78, .18);
}

.website-gift-confirm-accept i {
    margin-right: 5px;
}

/* Polish the quick upsell hierarchy without adding heavier effects. */
.website-gift-upsell {
    border-color: rgba(201, 86, 116, .15);
    background:
        radial-gradient(circle at 100% 0, rgba(255, 229, 235, .66), transparent 31%),
        linear-gradient(145deg, #fffdfd, #fff8fa);
}

.website-gift-upsell-copy h4 {
    letter-spacing: -.018em;
}

.website-gift-upsell-card {
    contain: layout paint style;
}

.website-gift-upsell-card:focus-visible,
.website-gift-confirm-actions button:focus-visible,
.website-gift-confirm-close:focus-visible {
    outline: 3px solid rgba(196, 61, 96, .22);
    outline-offset: 2px;
}

/* Confirmation page: softer hierarchy and less paint below the fold. */
.booking-confirmation-summary-item,
.booking-confirmation-page .ttlock-confirmation-card,
.booking-confirmation-page .booking-guide-card,
.booking-confirmation-help-card,
.booking-confirmation-note-card {
    contain: layout paint style;
}

@supports (content-visibility: auto) {
    .booking-confirmation-layout {
        content-visibility: auto;
        contain-intrinsic-size: 900px;
    }
}

@media (max-width: 1024px) {
    .website-gift-confirm-sheet {
        width: min(500px, calc(100vw - 42px));
    }

    .website-gift-upsell {
        padding: 16px;
    }
}

@media (max-width: 767px) {
    .website-gift-confirm-modal {
        place-items: end center;
        padding: 0;
    }

    .website-gift-confirm-backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(38, 27, 30, .43);
    }

    .website-gift-confirm-sheet {
        width: 100%;
        max-height: min(82dvh, 620px);
        padding: 17px 15px calc(15px + env(safe-area-inset-bottom));
        border-width: 1px 0 0;
        border-radius: 23px 23px 0 0;
        box-shadow: 0 -14px 40px rgba(61, 36, 43, .18);
        transform: translateY(24px);
    }

    .website-gift-confirm-modal.is-open .website-gift-confirm-sheet {
        transform: translateY(0);
    }

    .website-gift-confirm-accent {
        inset: 0 50% auto;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        transform: translateX(-50%);
        background: #e2c3cb;
    }

    .website-gift-confirm-close {
        top: 11px;
        right: 11px;
        width: 31px;
        height: 31px;
        font-size: 19px;
    }

    .website-gift-confirm-top {
        grid-template-columns: 37px minmax(0, 1fr);
        gap: 10px;
        padding-right: 27px;
    }

    .website-gift-confirm-icon {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }

    .website-gift-confirm-kicker {
        font-size: 8.5px;
    }

    .website-gift-confirm-top h3 {
        font-size: 15.5px;
    }

    .website-gift-confirm-top p {
        margin-top: 5px;
        font-size: 10.2px;
        line-height: 1.45;
    }

    .website-gift-confirm-product {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        margin-top: 13px;
        padding: 9px;
        border-radius: 15px;
    }

    .website-gift-confirm-media {
        border-radius: 12px;
    }

    .website-gift-confirm-product-copy>strong {
        font-size: 11.2px;
    }

    .website-gift-confirm-prices {
        margin-top: 5px;
    }

    .website-gift-confirm-prices del {
        font-size: 8.8px;
    }

    .website-gift-confirm-prices b {
        font-size: 13.5px;
    }

    .website-gift-confirm-product-copy>span {
        margin-top: 6px;
        font-size: 8.6px;
    }

    .website-gift-confirm-actions {
        gap: 8px;
        margin-top: 13px;
    }

    .website-gift-confirm-actions button {
        min-height: 41px;
        padding: 0 9px;
        font-size: 9.6px;
    }

    .website-gift-upsell-head {
        align-items: flex-start;
    }

    .website-gift-upsell-selected {
        border-radius: 13px;
    }

    .booking-confirmation-title {
        font-size: clamp(20px, 5.7vw, 24px);
    }

    .booking-confirmation-lead {
        max-width: 34em;
        font-size: 11.5px;
        line-height: 1.5;
    }

    .booking-confirmation-hero {
        padding: 14px;
    }
}

@media (max-width: 390px) {
    .website-gift-confirm-sheet {
        padding-inline: 13px;
    }

    .website-gift-confirm-top h3 {
        font-size: 15px;
    }

    .website-gift-confirm-product {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .website-gift-confirm-actions {
        grid-template-columns: .75fr 1.25fr;
    }

    .booking-confirmation-title {
        font-size: 19px;
    }

    .booking-confirmation-lead {
        font-size: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .website-gift-confirm-modal,
    .website-gift-confirm-sheet {
        transition: none;
    }
}


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


/* =========================================================
   V350 · SAFE DYNAMIC ROUTE LOADER
   Overlay only: never mutates/hides the V345 page layout.
   ========================================================= */
#dynamicRouteLoader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    overflow: auto;
    background: #fffdfb;
    color: #4b342d;
}

html.dynamic-route-pending:not(.app-ready) #dynamicRouteLoader {
    display: block;
}

html.dynamic-route-pending:not(.app-ready),
html.dynamic-route-pending:not(.app-ready) body {
    overflow: hidden;
}

.dynamic-route-loader-inner {
    min-height: 100svh;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(112px, 13vw, 150px) 20px 64px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
    gap: clamp(34px, 6vw, 76px);
    align-items: center;
}

.dynamic-route-loader-copy {
    min-width: 0;
}

.dynamic-route-loader-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 6px 11px;
    border: 1px solid rgba(135, 88, 69, .10);
    border-radius: 999px;
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    color: #875845;
    margin-bottom: 20px;
}

.dynamic-route-skeleton-line,
.dynamic-route-loader-pills span,
.dynamic-route-loader-media,
.dynamic-route-loader-products span {
    background: linear-gradient(100deg, #f1e7e1 18%, #fff8f4 40%, #f1e7e1 62%);
    background-size: 220% 100%;
    animation: v350Skeleton 1.25s ease-in-out infinite;
}

.dynamic-route-skeleton-line {
    display: block;
    height: 12px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.dynamic-route-skeleton-line.line-title {
    width: 92%;
    height: 46px;
}

.dynamic-route-skeleton-line.line-title.short {
    width: 68%;
}

.dynamic-route-skeleton-line.line-copy {
    width: 88%;
    margin-top: 20px;
}

.dynamic-route-skeleton-line.line-copy.medium {
    width: 72%;
    margin-top: 0;
}

.dynamic-route-loader-pills {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.dynamic-route-loader-pills span {
    width: 90px;
    height: 28px;
    border-radius: 999px;
}

.dynamic-route-loader-pills span:nth-child(2) {
    width: 106px
}

.dynamic-route-loader-pills span:nth-child(3) {
    width: 80px
}

.dynamic-route-loader-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #765043;
}

.dynamic-route-loader-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(135, 88, 69, .14);
    border-top-color: #c98793;
    animation: v350Spin .8s linear infinite;
}

.dynamic-route-loader-media {
    min-height: 500px;
    border-radius: 30px 86px 30px 30px;
    position: relative;
    overflow: hidden;
}

.dynamic-route-loader-media-mark {
    position: absolute;
    inset: auto 24px 24px auto;
    width: 58px;
    height: 58px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    display: grid;
    place-items: center;
    font-size: 24px;
}

.dynamic-route-loader-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.dynamic-route-loader-products span {
    height: 9px;
    border-radius: 999px;
}

@keyframes v350Skeleton {
    0% {
        background-position: 100% 0
    }

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

@keyframes v350Spin {
    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 900px) {
    .dynamic-route-loader-inner {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding-top: 128px;
    }

    .dynamic-route-loader-media {
        min-height: 390px;
    }
}

@media (max-width: 640px) {
    .dynamic-route-loader-inner {
        min-height: 100svh;
        grid-template-columns: 1fr;
        padding: 118px 16px 34px;
        gap: 22px;
        align-content: center;
    }

    .dynamic-route-loader-kicker {
        margin-bottom: 14px;
        font-size: 8.5px;
        min-height: 24px;
    }

    .dynamic-route-skeleton-line.line-title {
        height: 29px;
    }

    .dynamic-route-skeleton-line.line-copy {
        margin-top: 16px;
        height: 9px;
    }

    .dynamic-route-loader-pills {
        margin-top: 15px;
        gap: 6px;
    }

    .dynamic-route-loader-pills span {
        height: 24px;
        width: 76px;
    }

    .dynamic-route-loader-pills span:nth-child(2) {
        width: 90px
    }

    .dynamic-route-loader-pills span:nth-child(3) {
        width: 68px
    }

    .dynamic-route-loader-status {
        margin-top: 18px;
        font-size: 10px;
    }

    .dynamic-route-loader-media {
        min-height: 240px;
        border-radius: 22px 56px 22px 22px;
    }

    .dynamic-route-loader-media-mark {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        right: 16px;
        bottom: 16px;
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .dynamic-route-skeleton-line,
    .dynamic-route-loader-pills span,
    .dynamic-route-loader-media,
    .dynamic-route-loader-products span,
    .dynamic-route-loader-spinner {
        animation: none !important;
    }
}

/* =========================================================
   V351 · HEADER SCALE REFERENCE = CUSTOMER V342
   - Preserve V350/V345 two-row geometry
   - Restore V342 logo/menu typography on mobile + tablet
   - One consistent pill radius for every header category
   - Mobile GPU polish: opaque header => no expensive backdrop blur
   ========================================================= */

/* Every header destination uses the same pill silhouette, including active routes. */
.header-inner .main-menu a,
.header-inner .main-menu a.is-active,
.home-route #menuHomes,
.calendar-route #menuCalendar,
.about-route #menuAbout,
.gift-basket-route #menuGiftBasket,
.header-inner .main-menu #menuGiftBasket.is-active {
    border-radius: 999px !important;
}

.header-inner .main-menu a.is-active::after {
    display: none !important;
    content: none !important;
}

/* Tablet sizing mirrors V342. Keep current desktop layout and dynamic Gift link. */
@media (min-width: 769px) and (max-width: 1100px) {
    .site-header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(255, 250, 245, .98) !important;
    }

    .header-inner {
        height: 76px !important;
        gap: 14px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .logo-wrap {
        padding: 6px 12px 6px 6px !important;
        gap: 10px !important;
    }

    .logo-mark {
        width: 48px !important;
        height: 48px !important;
    }

    .logo-wrap img {
        width: 40px !important;
        height: 40px !important;
    }

    .logo-text strong {
        font-size: 21px !important;
    }

    .logo-text span {
        font-size: 9.5px !important;
    }

    .main-menu {
        gap: 5px !important;
        padding: 6px !important;
    }

    .header-inner .main-menu a {
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 10px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
    }
}

/* Mobile remains two rows, but visual scale comes directly from V342. */
@media (max-width: 768px) {
    .site-header {
        background: rgba(255, 250, 245, .985) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .header-inner {
        min-height: 112px !important;
        padding: 8px 10px 9px !important;
        gap: 8px !important;
    }

    .logo-wrap {
        align-self: center !important;
        flex: 0 0 auto !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 6px 13px 6px 6px !important;
        gap: 10px !important;
        border-radius: 999px !important;
    }

    .logo-mark {
        width: 44px !important;
        height: 44px !important;
    }

    .logo-wrap img {
        width: 37px !important;
        height: 37px !important;
    }

    .logo-text {
        display: flex !important;
    }

    .logo-text strong {
        display: block !important;
        font-size: 20px !important;
        line-height: 1 !important;
        letter-spacing: -.45px !important;
    }

    .logo-text span {
        display: block !important;
        margin-top: 4px !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
    }

    .main-menu {
        width: 100% !important;
        height: 38px !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 6px !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .header-inner .main-menu a {
        width: 100% !important;
        min-width: 0 !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 5px !important;
        gap: 3px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        background: rgba(255, 255, 255, .84) !important;
        border: 1px solid rgba(135, 88, 69, .10) !important;
        box-shadow: 0 5px 14px rgba(87, 53, 38, .05) !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .header-inner .main-menu a>span:not(.menu-ico),
    #menuGiftBasketLabel {
        min-width: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    .header-inner .main-menu a .menu-ico {
        font-size: 12px !important;
    }

    .home-route:not(.contact-route) #menuHomes,
    .calendar-route:not(.contact-route) #menuCalendar,
    .about-route:not(.contact-route) #menuAbout,
    .gift-basket-route:not(.contact-route) #menuGiftBasket,
    .contact-route #menuContact,
    .header-inner .main-menu a.is-active {
        border-color: transparent !important;
    }

    #menuContact,
    .call-btn {
        display: none !important;
    }

    /* No hover transforms on coarse pointers: avoids needless compositing/repaint. */
    .logo-wrap:hover,
    .header-inner .main-menu a:hover {
        transform: none !important;
    }
}

/* V342 phone typography: 20px brand; 12.5px navigation on narrow phones. */
@media (max-width: 430px) {
    .header-inner {
        min-height: 108px !important;
        padding: 7px 8px 8px !important;
        gap: 7px !important;
    }

    .logo-wrap {
        height: 54px !important;
        min-height: 54px !important;
    }

    .logo-mark {
        width: 44px !important;
        height: 44px !important;
    }

    .logo-wrap img {
        width: 37px !important;
        height: 37px !important;
    }

    .logo-text strong {
        font-size: 20px !important;
    }

    .logo-text span {
        font-size: 9.5px !important;
    }

    .main-menu {
        height: 38px !important;
        gap: 4px !important;
    }

    .header-inner .main-menu a {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 3px !important;
        font-size: 12.5px !important;
        border-radius: 999px !important;
    }

    .header-inner .main-menu .gift-basket-menu-link .menu-ico {
        display: none !important;
    }
}

@media (max-width: 390px) {
    .logo-text span {
        display: none !important;
    }

    .logo-text strong {
        font-size: 20px !important;
    }

    .header-inner .main-menu a {
        font-size: 12.5px !important;
        padding: 0 2px !important;
    }
}

@media (max-width: 350px) {
    .header-inner {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .main-menu {
        gap: 3px !important;
    }

    .header-inner .main-menu a {
        font-size: 11.8px !important;
        letter-spacing: -.2px !important;
    }
}

/* Emotional cue for the booking upsell: persuasive but still calm / optional. */
.website-gift-upsell-emotion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    margin-top: 9px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #9b5365;
    background: linear-gradient(135deg, rgba(255, 235, 240, .92), rgba(255, 247, 238, .92));
    border: 1px solid rgba(190, 92, 116, .13);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
}

.website-gift-upsell-emotion i {
    flex: 0 0 auto;
    color: #c6677d;
    font-size: 10px;
}

@media (max-width: 768px) {
    .website-gift-upsell-emotion {
        margin-top: 8px;
        padding: 7px 9px;
        border-radius: 14px;
        font-size: 10.5px;
    }
}



/* =========================================================
 * V356 · Customer check-in / checkout code presentation
 * Backend can share one passcode; UI keeps two clear moments.
 * ======================================================= */
.customer-door-code-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.customer-door-code-grid .ttlock-passcode-card {
    min-height: 100%;
}

.customer-door-code-grid .ttlock-passcode-card.checkin {
    border-color: rgba(34, 197, 94, .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, .08), transparent 34%),
        linear-gradient(180deg, rgba(245, 253, 248, .99), rgba(255, 255, 255, .98));
}

.customer-door-code-grid .ttlock-passcode-card.checkout {
    border-color: rgba(217, 119, 6, .16);
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 158, 11, .08), transparent 34%),
        linear-gradient(180deg, rgba(255, 249, 239, .99), rgba(255, 255, 255, .98));
}

.customer-door-code-grid .ttlock-passcode-label {
    font-size: 13.5px;
}

.customer-door-code-grid .ttlock-passcode-validity strong {
    font-size: 11.5px;
}

.ttlock-loading-copy .ttlock-wait-meta {
    margin-top: 7px;
}

@media (max-width: 820px) {
    .customer-door-code-grid {
        gap: 10px;
    }

    .customer-door-code-grid .ttlock-passcode-card {
        padding: 13px;
    }
}

@media (max-width: 620px) {
    .customer-door-code-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .customer-door-code-grid .ttlock-passcode-card {
        padding: 12px;
    }

    .customer-door-code-grid .ttlock-passcode-top {
        margin-bottom: 9px;
    }

    .customer-door-code-grid .ttlock-passcode-code-row {
        margin-bottom: 9px;
    }

    .customer-door-code-grid .ttlock-passcode-code {
        min-height: 46px;
    }
}

/* V358 · Booking confirmation: room access + Wi-Fi after door codes */
.booking-confirmation-page .booking-room-access-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border: 1px solid #e4e4e4;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 138, 5, .07), transparent 34%),
        #ffffff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .055);
}

.booking-room-access-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.booking-room-access-title-wrap {
    min-width: 0;
}

.booking-room-access-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #008a05;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .11em;
}

.booking-room-access-title {
    margin: 6px 0 0;
    color: #222222;
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.booking-room-access-home-pill {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 29px;
    padding: 5px 10px;
    border: 1px solid rgba(0, 138, 5, .16);
    border-radius: 999px;
    background: #eefaf0;
    color: #087b0d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
}

.booking-room-access-content {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(245px, .85fr);
    gap: 12px;
    align-items: stretch;
}

.booking-room-access-content.wifi-only {
    grid-template-columns: minmax(0, 1fr);
}

.booking-room-access-route,
.booking-room-access-wifi {
    min-width: 0;
    border: 1px solid #ededed;
    border-radius: 17px;
    background: #fafafa;
}

.booking-room-access-route {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px 15px;
}

.booking-room-access-route-icon,
.booking-room-access-wifi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #ffffff;
    color: #e31c5f;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .07);
}

.booking-room-access-route-copy p {
    margin: 0;
    color: #666666;
    font-size: 13px;
    line-height: 1.5;
}

.booking-room-access-route-copy .booking-room-access-direction {
    margin-top: 5px;
    color: #292929;
    font-weight: 760;
}

.booking-room-access-direction>span {
    color: #e31c5f;
    font-weight: 950;
}

.booking-room-access-wifi {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px 12px;
    align-content: center;
    padding: 13px 14px;
    background: linear-gradient(135deg, #f7fbff, #ffffff);
}

.booking-room-access-wifi-icon {
    grid-row: 1 / span 2;
    color: #2463eb;
    background: #ffffff;
}

.booking-room-access-wifi-name,
.booking-room-access-wifi-pass {
    min-width: 0;
}

.booking-room-access-wifi-name>span,
.booking-room-access-wifi-pass>span {
    display: block;
    margin-bottom: 2px;
    color: #7a7a7a;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.booking-room-access-wifi-name strong {
    display: block;
    overflow: hidden;
    color: #222222;
    font-size: 12.5px;
    font-weight: 850;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-room-access-wifi-pass {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    column-gap: 6px;
    align-items: center;
}

.booking-room-access-wifi-pass>span {
    grid-column: 1 / -1;
}

.booking-room-access-wifi-pass code {
    overflow: hidden;
    color: #1649a7;
    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.booking-room-access-wifi-pass button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #dce5f6;
    border-radius: 10px;
    background: #ffffff;
    color: #2463eb;
    cursor: pointer;
}

.booking-room-access-wifi-pass button:hover {
    background: #f0f5ff;
}

@media (max-width: 1024px) {
    .booking-room-access-content {
        grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr);
    }
}

@media (max-width: 720px) {
    .booking-confirmation-page .booking-room-access-card {
        padding: 16px;
        border-radius: 18px;
    }

    .booking-room-access-head {
        align-items: center;
        gap: 10px;
        margin-bottom: 11px;
    }

    .booking-room-access-eyebrow {
        font-size: 9.5px;
    }

    .booking-room-access-title {
        margin-top: 4px;
        font-size: 17px;
    }

    .booking-room-access-home-pill {
        min-height: 26px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .booking-room-access-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .booking-room-access-route {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
        border-radius: 14px;
    }

    .booking-room-access-route-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 13px;
    }

    .booking-room-access-route-copy p {
        font-size: 12.25px;
        line-height: 1.45;
    }

    .booking-room-access-route-copy .booking-room-access-direction {
        margin-top: 3px;
    }

    .booking-room-access-wifi {
        grid-template-columns: 32px minmax(0, 1.2fr) minmax(92px, .8fr);
        gap: 8px 10px;
        align-items: center;
        padding: 10px 11px;
        border-radius: 14px;
    }

    .booking-room-access-wifi-icon {
        grid-row: auto;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 12px;
    }

    .booking-room-access-wifi-name>span,
    .booking-room-access-wifi-pass>span {
        font-size: 9px;
    }

    .booking-room-access-wifi-name strong,
    .booking-room-access-wifi-pass code {
        font-size: 11.5px;
    }

    .booking-room-access-wifi-pass {
        grid-template-columns: minmax(0, 1fr) 28px;
        column-gap: 4px;
    }

    .booking-room-access-wifi-pass button {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        font-size: 11px;
    }
}

@media (max-width: 390px) {
    .booking-room-access-wifi {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 7px;
        padding: 9px 10px;
    }

    .booking-room-access-wifi-icon {
        width: 30px;
        height: 30px;
    }

    .booking-room-access-wifi-name strong {
        max-width: 138px;
    }
}

/* V364 · Crawlable footer navigation: useful to guests and search crawlers without changing page layout owners. */
.h3cn-seo-links-v364 {
    width: min(1180px, calc(100% - 32px));
    margin: 18px auto 4px;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.h3cn-seo-links-v364>span {
    margin-right: 4px;
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.h3cn-seo-links-v364 a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 255, 255, .045);
    transition: background .16s ease, border-color .16s ease, transform .16s ease
}

.h3cn-seo-links-v364 a:hover,
.h3cn-seo-links-v364 a:focus-visible {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-1px);
    outline: none
}

@media(max-width:640px) {
    .h3cn-seo-links-v364 {
        width: min(100% - 20px, 1180px);
        justify-content: flex-start;
        padding: 12px 2px
    }

    .h3cn-seo-links-v364>span {
        width: 100%;
        margin: 0 0 2px
    }

    .h3cn-seo-links-v364 a {
        min-height: 32px;
        padding: 6px 9px;
        font-size: 11px
    }
}

@media(prefers-reduced-motion:reduce) {
    .h3cn-seo-links-v364 a {
        transition: none
    }

    .h3cn-seo-links-v364 a:hover,
    .h3cn-seo-links-v364 a:focus-visible {
        transform: none
    }
}

/* V365 · Customer utility and low-risk rendering performance. */
.detail-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}

.detail-top-actions .back-btn {
    margin: 0
}

.detail-top-tools {
    display: flex;
    align-items: center;
    gap: 8px
}

.detail-share-btn,
.detail-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid #eadbd2;
    border-radius: 14px;
    background: #fff;
    color: #6f4937;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(91, 57, 40, .08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease
}

.detail-share-btn:hover,
.detail-share-btn:focus-visible,
.detail-save-btn:hover,
.detail-save-btn:focus-visible {
    transform: translateY(-1px);
    border-color: #d9b7a4;
    box-shadow: 0 12px 26px rgba(91, 57, 40, .12);
    outline: none
}

.detail-save-btn.is-saved {
    border-color: #e9a8b7;
    background: #fff1f4;
    color: #d92b50
}

.recently-viewed-homes,
.favorite-homes {
    margin: 32px 0 8px;
    padding: 22px;
    border: 1px solid #eee0d8;
    border-radius: 24px;
    background: linear-gradient(145deg, #fffaf7, #fff);
    box-shadow: 0 16px 40px rgba(95, 61, 43, .07)
}

.favorite-homes {
    border-color: #f0d5dc;
    background: linear-gradient(145deg, #fff5f7, #fff)
}

.recently-viewed-homes[hidden],
.favorite-homes[hidden] {
    display: none !important
}

.recently-viewed-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px
}

.recently-viewed-head span {
    display: block;
    margin-bottom: 3px;
    color: #ba6f55;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em
}

.recently-viewed-head h2 {
    margin: 0;
    color: #3c302a;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.18
}

.recently-viewed-head button {
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #8b776d;
    font: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px
}

.recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.recent-home-card {
    min-width: 0
}

.recent-home-card>a {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 7px;
    border: 1px solid #eee2db;
    border-radius: 17px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease
}

.recent-home-card>a:hover,
.recent-home-card>a:focus-visible {
    transform: translateY(-2px);
    border-color: #dcbda9;
    box-shadow: 0 12px 24px rgba(90, 57, 40, .09);
    outline: none
}

.recent-home-card img,
.recent-home-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 13px;
    object-fit: cover;
    background: #f5e9e2
}

.recent-home-placeholder {
    display: grid;
    place-items: center;
    font-size: 24px
}

.recent-home-copy {
    min-width: 0
}

.recent-home-copy strong,
.recent-home-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.recent-home-copy strong {
    color: #47362f;
    font-size: 13px;
    font-weight: 850
}

.recent-home-copy small {
    margin-top: 4px;
    color: #8a7870;
    font-size: 10.5px
}

.recent-home-card>a>i {
    color: #c27e60;
    font-size: 11px
}

html.home-route .story-section,
html.home-route #sharedCustomerReviews,
html.home-route .stats-bar,
.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px
}

@media(max-width:820px) {
    .recently-viewed-grid {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {
    .detail-top-actions {
        align-items: center
    }

    .detail-top-tools {
        gap: 6px
    }

    .detail-share-btn,
    .detail-save-btn {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 11px
    }

    .recently-viewed-homes,
    .favorite-homes {
        margin-top: 24px;
        padding: 16px;
        border-radius: 20px
    }

    .recently-viewed-head {
        align-items: center
    }

    .recently-viewed-head h2 {
        font-size: 20px
    }
}

@media(prefers-reduced-motion:reduce) {

    .detail-share-btn,
    .detail-save-btn,
    .recent-home-card>a {
        transition: none
    }

    .detail-share-btn:hover,
    .detail-share-btn:focus-visible,
    .detail-save-btn:hover,
    .detail-save-btn:focus-visible,
    .recent-home-card>a:hover,
    .recent-home-card>a:focus-visible {
        transform: none
    }
}

/* V366 · Immediate gallery shell, calmer HOME typography and consistent customer controls. */
body>.container>.tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 560px);
    min-height: 54px;
    margin: 24px auto;
    padding: 5px;
    border: 1px solid #eadfd9;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(77, 49, 36, .07)
}

body>.container>.tabs .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 42px;
    padding: 9px 14px;
    border-radius: 13px;
    background: transparent;
    color: #75655e;
    font-size: 13px !important;
    font-weight: 650;
    line-height: 1.2;
    box-shadow: none
}

body>.container>.tabs .tab.active {
    background: linear-gradient(135deg, #6f4937, #a96e55);
    color: #fff;
    font-size: 13px !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(111, 73, 55, .2)
}

html.gallery-route:not(.app-ready) body>.container>.tabs {
    display: grid !important
}

html.gallery-route:not(.app-ready) body>.container>.tabs #homesTab {
    background: transparent;
    color: #75655e;
    box-shadow: none
}

html.gallery-route:not(.app-ready) body>.container>.tabs #galleryTab {
    background: linear-gradient(135deg, #6f4937, #a96e55);
    color: #fff;
    box-shadow: 0 8px 18px rgba(111, 73, 55, .2)
}

body.home-detail-open #homeDetailPage {
    color: #433a36;
    font-weight: 450;
    font-kerning: normal
}

body.home-detail-open #homeDetailPage .home-header {
    padding: clamp(18px, 2.4vw, 28px) !important;
    border: 1px solid #eee3dc !important;
    border-radius: 26px !important;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(83, 53, 40, .07) !important
}

body.home-detail-open #homeDetailPage #homeName {
    color: #302824 !important;
    font-weight: 750 !important;
    letter-spacing: -.032em !important
}

body.home-detail-open #homeDetailPage #price.price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: #64554e !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important
}

body.home-detail-open #homeDetailPage #price.price>span {
    font-size: .62em;
    font-weight: 600
}

body.home-detail-open #homeDetailPage #price.price>strong {
    color: #d92b50;
    font-size: 1em;
    font-weight: 750
}

body.home-detail-open #homeDetailPage #price.price>small {
    font-size: .62em;
    font-weight: 500
}

body.home-detail-open #homeDetailPage .room-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    margin-top: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #655750 !important
}

body.home-detail-open #homeDetailPage .room-trust>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 7px 10px;
    border: 1px solid #eee2db;
    border-radius: 999px;
    background: #fffaf7;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.25
}

body.home-detail-open #homeDetailPage .room-trust i {
    color: #c76d50
}

body.home-detail-open #homeDetailPage .detail-main>.section {
    border: 1px solid #eee5df !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(83, 53, 40, .055) !important
}

body.home-detail-open #homeDetailPage .detail-main>.section>h2,
body.home-detail-open #homeDetailPage .detail-gallery-heading-copy h2,
body.home-detail-open #homeDetailPage .booking-process-heading h2 {
    color: #332b27 !important;
    font-weight: 700 !important;
    letter-spacing: -.022em !important
}

body.home-detail-open #homeDetailPage .description,
body.home-detail-open #homeDetailPage .detail-gallery-heading-copy p,
body.home-detail-open #homeDetailPage .booking-process-heading p,
body.home-detail-open #homeDetailPage .booking-step-card p,
body.home-detail-open #homeDetailPage .pricing-card-subtitle {
    color: #675c56 !important;
    font-weight: 450 !important;
    line-height: 1.68 !important
}

body.home-detail-open #homeDetailPage .amenity-item {
    border-color: #eadfd9 !important;
    background: #fffaf7 !important;
    color: #514640 !important;
    font-weight: 600 !important
}

body.home-detail-open #homeDetailPage .booking-step-card h3,
body.home-detail-open #homeDetailPage .pricing-card-title {
    font-weight: 700 !important
}

body.home-detail-open #homeDetailPage .booking-step-number,
body.home-detail-open #homeDetailPage .pricing-card-eyebrow,
body.home-detail-open #homeDetailPage .price-preview-label,
body.home-detail-open #homeDetailPage .price-preview-value,
body.home-detail-open #homeDetailPage .pricing-details summary {
    font-weight: 700 !important
}

@media(max-width:640px) {
    body>.container>.tabs {
        width: 100%;
        min-height: 50px;
        margin: 16px auto 14px !important;
        padding: 4px;
        border-radius: 16px;
        overflow: visible
    }

    body>.container>.tabs .tab,
    body>.container>.tabs .tab.active {
        min-height: 40px;
        padding: 8px 7px !important;
        font-size: 11.5px !important
    }

    body.home-detail-open #homeDetailPage .home-header {
        padding: 15px !important;
        border-radius: 21px !important
    }

    body.home-detail-open #homeDetailPage .room-trust>span {
        min-height: 29px;
        padding: 6px 8px;
        font-size: 10.5px
    }

    body.home-detail-open #homeDetailPage .detail-main>.section {
        border-radius: 20px !important
    }
}

@media(max-width:420px) {
    .detail-top-actions {
        gap: 8px
    }

    .detail-top-tools {
        flex: 1;
        justify-content: flex-end
    }

    .detail-share-btn,
    .detail-save-btn {
        padding: 8px 9px;
        font-size: 10.5px
    }

    body>.container>.tabs .tab,
    body>.container>.tabs .tab.active {
        gap: 4px;
        padding-inline: 5px !important;
        font-size: 10.8px !important
    }
}

/* V367 · payOS conversion assist: explain the value before checkout and keep a pending booking resumable. */
.payos-express-note {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    border: 1px solid #cde9df;
    border-radius: 17px;
    background: linear-gradient(135deg, #f2fbf8, #fff);
    box-shadow: 0 8px 22px rgba(16, 105, 82, .06)
}

.payos-express-note-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0b9b78, #17b991);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 9px 19px rgba(11, 155, 120, .2)
}

.payos-express-note-copy {
    min-width: 0
}

.payos-express-note-copy strong,
.payos-express-note-copy small {
    display: block
}

.payos-express-note-copy strong {
    color: #164f42;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35
}

.payos-express-note-copy small {
    margin-top: 3px;
    color: #56756d;
    font-size: 10.5px;
    font-weight: 550;
    line-height: 1.45
}

.payos-express-note-badge {
    padding: 6px 8px;
    border: 1px solid #b8e0d3;
    border-radius: 999px;
    background: #e7f8f2;
    color: #08775c;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .08em;
    white-space: nowrap
}

.website-payos-resume[hidden] {
    display: none !important
}

.website-payos-resume {
    position: fixed;
    z-index: 100049;
    left: 50%;
    bottom: max(16px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 9px;
    width: min(720px, calc(100vw - 36px));
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 22px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 52px rgba(29, 72, 59, .22), 0 0 0 1px rgba(8, 119, 92, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: payosResumeEnter .2s ease-out
}

.website-payos-resume-info {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 5px 7px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer
}

.website-payos-resume-info:hover,
.website-payos-resume-info:focus-visible {
    background: #f0faf6;
    outline: none
}

.website-payos-resume-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #e8f8f2;
    color: #07805f;
    font-size: 15px
}

.website-payos-resume-copy {
    display: block;
    min-width: 0
}

.website-payos-resume-copy small,
.website-payos-resume-copy strong,
.website-payos-resume-copy>span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.website-payos-resume-copy small {
    color: #0a8766;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .1em
}

.website-payos-resume-copy strong {
    margin-top: 2px;
    color: #263b35;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35
}

.website-payos-resume-copy>span {
    margin-top: 2px;
    color: #6b7f79;
    font-size: 10.5px;
    font-weight: 600
}

.website-payos-resume-copy b {
    color: #08775c;
    font-variant-numeric: tabular-nums;
    font-weight: 900
}

.website-payos-resume-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 154px;
    padding: 0 17px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #07805f, #0aa77c);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(7, 128, 95, .24);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease
}

.website-payos-resume-pay:hover,
.website-payos-resume-pay:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 14px 28px rgba(7, 128, 95, .29);
    outline: none
}

body.has-payos-resume-bar .mobile-book-bar {
    display: none !important
}

@keyframes payosResumeEnter {
    from {
        opacity: 0;
        transform: translate(-50%, 12px)
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0)
    }
}

.website-payos-resume {
    transform: translateX(-50%)
}

@media(max-width:640px) {
    .payos-express-note {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 9px;
        padding: 11px
    }

    .payos-express-note-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 14px
    }

    .payos-express-note-badge {
        display: none
    }

    .payos-express-note-copy strong {
        font-size: 11.5px
    }

    .payos-express-note-copy small {
        font-size: 9.8px
    }

    body.has-payos-resume-bar {
        padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important
    }

    .website-payos-resume {
        bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100vw - 16px);
        gap: 6px;
        padding: 7px;
        border-radius: 19px
    }

    .website-payos-resume-info {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding: 4px 5px
    }

    .website-payos-resume-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 13px
    }

    .website-payos-resume-copy small {
        font-size: 7.8px
    }

    .website-payos-resume-copy strong {
        font-size: 11.5px
    }

    .website-payos-resume-copy>span {
        font-size: 9.3px
    }

    .website-payos-resume-pay {
        min-width: 125px;
        padding: 0 11px;
        border-radius: 14px;
        font-size: 11px
    }

    body.has-payos-resume-bar .faq-toggle {
        bottom: max(104px, calc(102px + env(safe-area-inset-bottom))) !important
    }

    body.has-payos-resume-bar .floating-contact,
    body.has-payos-resume-bar .floating-social {
        bottom: max(104px, calc(102px + env(safe-area-inset-bottom))) !important
    }
}

@media(max-width:380px) {
    .website-payos-resume-pay {
        min-width: 105px;
        padding-inline: 9px;
        font-size: 10.5px
    }

    .website-payos-resume-copy>span {
        max-width: 178px
    }
}

@media(prefers-reduced-motion:reduce) {
    .website-payos-resume {
        animation: none
    }

    .website-payos-resume-pay {
        transition: none
    }

    .website-payos-resume-pay:hover,
    .website-payos-resume-pay:focus-visible {
        transform: none
    }
}

/* V368 · Mobile booking emphasis, compact trust row and clearer detail pricing. */
.mobile-book-bar {
    display: none !important
}

body.home-detail-open #homeDetailPage #price.price {
    display: inline-grid !important;
    grid-template-columns: max-content max-content;
    align-items: end;
    gap: 3px 8px !important;
    width: max-content;
    max-width: 100%;
    min-width: 190px;
    margin: 5px 0 0 !important;
    padding: 10px 13px 11px;
    border: 1px solid #f0dfe0;
    border-radius: 17px;
    background: linear-gradient(135deg, #fff8f7, #fff);
    box-shadow: 0 8px 22px rgba(115, 58, 53, .06);
    line-height: 1 !important;
}

body.home-detail-open #homeDetailPage #price.price>.detail-price-label {
    grid-column: 1/-1;
    color: #7d6b65;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.25;
}

body.home-detail-open #homeDetailPage #price.price>.detail-price-value {
    color: #d62952 !important;
    font-size: clamp(25px, 2.5vw, 32px) !important;
    font-weight: 820 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.035em;
    line-height: 1 !important;
}

body.home-detail-open #homeDetailPage #price.price>.detail-price-duration {
    padding-bottom: 2px;
    color: #74625b;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.15;
    white-space: nowrap;
}

@media(max-width:768px) {
    body.home-detail-open {
        padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important
    }

    body.home-detail-open:not(.has-payos-resume-bar) .mobile-book-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 100050;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(128px, 36vw);
        align-items: center;
        gap: 12px;
        /* min-height: 88px; */
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(105, 72, 61, .12);
        border-radius: 22px 22px 0 0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -14px 36px rgba(48, 29, 22, .13);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap {
        display: block;
        min-width: 0
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap span {
        display: block;
        margin: 0 0 3px;
        color: #776862;
        font-size: 11.5px !important;
        font-weight: 700;
        line-height: 1.15;
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap strong {
        display: block;
        overflow: hidden;
        color: #d62952 !important;
        font-size: 21px !important;
        font-weight: 800 !important;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.04em;
        line-height: 1 !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.home-detail-open .mobile-book-bar .mobile-book-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-width: 128px;
        min-height: 52px;
        padding: 12px 16px;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(135deg, #f04469, #d92b50);
        color: #fff;
        font-size: 15px !important;
        font-weight: 820 !important;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 10px 24px rgba(217, 43, 80, .25);
    }

    body.home-detail-open #homeDetailPage #price.price {
        min-width: 178px;
        padding: 9px 12px 10px;
        border-radius: 15px
    }

    body.home-detail-open #homeDetailPage #price.price>.detail-price-value {
        font-size: 25px !important
    }
}

@media(max-width:768px) {
    body.home-detail-open #homeDetailPage .room-trust {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100%;
    }

    body.home-detail-open #homeDetailPage .room-trust>span {
        display: flex;
        justify-content: center;
        min-width: 0;
        min-height: 31px;
        padding: 6px 4px;
        gap: 4px;
        overflow: hidden;
        border-radius: 11px;
        font-size: clamp(8.6px, 2.55vw, 10px) !important;
        line-height: 1 !important;
        text-overflow: clip;
        white-space: nowrap;
    }

    body.home-detail-open #homeDetailPage .room-trust i {
        flex: 0 0 auto;
        font-size: .95em
    }
}

@media(max-width:380px) {
    body.home-detail-open:not(.has-payos-resume-bar) .mobile-book-bar {
        grid-template-columns: minmax(0, 1fr) 118px;
        gap: 9px;
        padding-inline: 12px;
    }

    body.home-detail-open .mobile-book-bar .mobile-price-wrap strong {
        font-size: 21px !important
    }

    body.home-detail-open .mobile-book-bar .mobile-book-btn {
        min-width: 118px;
        min-height: 50px;
        padding-inline: 12px;
        font-size: 14px !important
    }
}

/* V369 · HOME detail polish, compact mobile density and quick-duration conversion. */
body.home-detail-open #homeDetailPage .detail-top-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px !important;
    padding: 5px 6px;
    border: 1px solid rgba(111, 73, 55, .12);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 248, 245, .94));
    box-shadow: 0 10px 28px rgba(81, 48, 35, .075);
}

body.home-detail-open #homeDetailPage .detail-top-actions .back-btn,
body.home-detail-open #homeDetailPage .detail-share-btn,
body.home-detail-open #homeDetailPage .detail-save-btn {
    min-height: 40px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
    color: #61483e;
    font-weight: 750;
}

body.home-detail-open #homeDetailPage .detail-top-actions .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px !important;
}

body.home-detail-open #homeDetailPage .detail-top-actions .back-btn i {
    font-size: 12px;
    transition: transform .18s ease;
}

body.home-detail-open #homeDetailPage .detail-top-tools {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-left: 5px;
    border-left: 1px solid rgba(111, 73, 55, .11);
}

body.home-detail-open #homeDetailPage .detail-share-btn,
body.home-detail-open #homeDetailPage .detail-save-btn {
    gap: 7px;
    padding: 8px 11px;
    font-size: 11.5px;
}

body.home-detail-open #homeDetailPage .detail-share-btn i,
body.home-detail-open #homeDetailPage .detail-save-btn i {
    width: 16px;
    color: #9a6753;
    text-align: center;
}

body.home-detail-open #homeDetailPage .detail-save-btn.is-saved {
    background: #fff0f3 !important;
    color: #c9254d;
}

body.home-detail-open #homeDetailPage .detail-save-btn.is-saved i {
    color: #d92b50;
}

@media (hover:hover) and (pointer:fine) {
    body.home-detail-open #homeDetailPage .detail-top-actions .back-btn:hover,
    body.home-detail-open #homeDetailPage .detail-share-btn:hover,
    body.home-detail-open #homeDetailPage .detail-save-btn:hover {
        transform: none !important;
        background: rgba(135, 88, 69, .07) !important;
    }

    body.home-detail-open #homeDetailPage .detail-top-actions .back-btn:hover i {
        transform: translateX(-2px);
    }
}

body.home-detail-open #homeDetailPage .detail-top-actions .back-btn:focus-visible,
body.home-detail-open #homeDetailPage .detail-share-btn:focus-visible,
body.home-detail-open #homeDetailPage .detail-save-btn:focus-visible,
body.home-detail-open #homeDetailPage .detail-booking-intent-option:focus-visible {
    outline: 3px solid rgba(217, 43, 80, .18) !important;
    outline-offset: 2px;
}

.detail-booking-intent[hidden] {
    display: none !important;
}

body.home-detail-open #homeDetailPage .detail-booking-intent:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 13px;
    margin-top: 13px;
    padding: 12px;
    border: 1px solid rgba(217, 43, 80, .12);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff8fa, #fff 58%);
    box-shadow: 0 8px 22px rgba(110, 48, 62, .055);
}

.detail-booking-intent-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.detail-booking-intent-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff476c, #df1948);
    color: #fff;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(217, 43, 80, .18);
}

.detail-booking-intent-heading h2 {
    margin: 0 !important;
    color: #382d29 !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1.25;
    letter-spacing: -.015em !important;
}

.detail-booking-intent-heading p {
    margin: 3px 0 0 !important;
    color: #7b6b65;
    font-size: 9.5px !important;
    font-weight: 550;
    line-height: 1.4 !important;
}

.detail-booking-intent-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    min-width: 0;
}

.detail-booking-intent-option {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 51px;
    padding: 7px 8px;
    border: 1px solid #eddfda;
    border-radius: 13px;
    background: #fff;
    color: #443732;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 14px rgba(83, 48, 35, .045);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.detail-booking-intent-option-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff0f3;
    color: #d52a51;
    font-size: 11px;
}

.detail-booking-intent-option-copy {
    min-width: 0;
}

.detail-booking-intent-option-copy strong,
.detail-booking-intent-option-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-booking-intent-option-copy strong {
    font-size: 10.5px;
    font-weight: 800;
}

.detail-booking-intent-option-copy small {
    margin-top: 2px;
    color: #d12950;
    font-size: 10px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.detail-booking-intent-option-arrow {
    color: #b49b90;
    font-size: 8px;
}

@media (hover:hover) and (pointer:fine) {
    .detail-booking-intent-option:hover {
        transform: translateY(-1px);
        border-color: rgba(217, 43, 80, .25);
        background: #fffafb;
        box-shadow: 0 9px 20px rgba(110, 48, 62, .09);
    }
}

@media(max-width:768px) {
    body.home-detail-open #homeDetailPage .home-detail-container {
        padding: 8px 8px 14px !important;
    }

    body.home-detail-open #homeDetailPage .detail-top-actions {
        gap: 5px;
        margin-bottom: 8px !important;
        padding: 4px;
        border-radius: 14px;
        box-shadow: 0 7px 20px rgba(81, 48, 35, .065);
    }

    body.home-detail-open #homeDetailPage .detail-top-actions .back-btn {
        min-height: 38px;
        padding: 8px 10px !important;
        border-radius: 10px;
        font-size: 11.5px !important;
    }

    body.home-detail-open #homeDetailPage .detail-top-tools {
        gap: 2px;
        padding-left: 3px;
    }

    body.home-detail-open #homeDetailPage .detail-share-btn,
    body.home-detail-open #homeDetailPage .detail-save-btn {
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0 !important;
        border-radius: 10px;
        font-size: 12px;
    }

    body.home-detail-open #homeDetailPage .detail-share-btn>span,
    body.home-detail-open #homeDetailPage .detail-save-btn>span {
        display: none;
    }

    body.home-detail-open #homeDetailPage #coverImage.hero-image {
        aspect-ratio: 16 / 11 !important;
        border-radius: 18px !important;
        box-shadow: 0 9px 22px rgba(73, 45, 33, .12) !important;
    }

    body.home-detail-open #homeDetailPage .home-header {
        width: calc(100% - 10px) !important;
        margin: -20px auto 10px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        box-shadow: 0 11px 30px rgba(73, 45, 33, .105) !important;
    }

    body.home-detail-open #homeDetailPage #homeName {
        margin-bottom: 6px !important;
        font-size: 20px !important;
        line-height: 1.14 !important;
    }

    body.home-detail-open #homeDetailPage #price.price {
        min-width: 0;
        margin-top: 3px !important;
        padding: 8px 10px 9px;
        border-radius: 13px;
    }

    body.home-detail-open #homeDetailPage #price.price>.detail-price-label {
        font-size: 9.5px !important;
    }

    body.home-detail-open #homeDetailPage #price.price>.detail-price-value {
        font-size: 24px !important;
    }

    body.home-detail-open #homeDetailPage #price.price>.detail-price-duration {
        font-size: 10.5px !important;
    }

    body.home-detail-open #homeDetailPage .room-trust {
        margin-top: 8px !important;
    }

    body.home-detail-open #homeDetailPage .room-trust>span {
        min-height: 28px;
        padding: 5px 3px;
        border-radius: 9px;
    }

    body.home-detail-open #homeDetailPage .detail-booking-intent:not([hidden]) {
        display: block;
        margin-top: 9px;
        padding: 9px;
        border-radius: 14px;
    }

    .detail-booking-intent-heading {
        gap: 8px;
        margin-bottom: 8px;
    }

    .detail-booking-intent-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 10px;
        font-size: 11px;
        box-shadow: 0 6px 14px rgba(217, 43, 80, .14);
    }

    .detail-booking-intent-heading h2 {
        font-size: 12.5px !important;
    }

    .detail-booking-intent-heading p {
        font-size: 8.8px !important;
    }

    .detail-booking-intent-options {
        gap: 5px;
    }

    .detail-booking-intent-option {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 2px;
        min-height: 53px;
        padding: 6px 4px;
        border-radius: 11px;
        text-align: center;
    }

    .detail-booking-intent-option-icon,
    .detail-booking-intent-option-arrow {
        display: none;
    }

    .detail-booking-intent-option-copy strong {
        font-size: clamp(8.8px, 2.55vw, 10px);
    }

    .detail-booking-intent-option-copy small {
        font-size: clamp(9px, 2.65vw, 10.2px);
    }

    body.home-detail-open #homeDetailPage .best-deal-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 15px !important;
    }

    body.home-detail-open #homeDetailPage .best-deal-btn {
        width: auto !important;
        min-width: 96px;
        max-width: 112px;
        min-height: 34px !important;
        padding: 7px 9px !important;
        border-radius: 11px !important;
        line-height: 1.2;
        white-space: normal;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline {
        margin-top: 9px !important;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px !important;
        border-radius: 15px !important;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-main {
        align-items: center;
        gap: 8px;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 10px;
        font-size: 14px;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-booking-kicker,
    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-copy p,
    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-benefits {
        display: none !important;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-copy h3 {
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.28 !important;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-btn {
        width: auto !important;
        min-width: 92px !important;
        min-height: 36px !important;
        padding: 8px 11px !important;
        border-radius: 11px !important;
    }

    body.home-detail-open #homeDetailPage .detail-layout,
    body.home-detail-open #homeDetailPage .detail-main {
        gap: 9px !important;
    }

    body.home-detail-open #homeDetailPage .section {
        padding: 12px !important;
        border-radius: 18px !important;
    }

    body.home-detail-open #homeDetailPage .section h2 {
        margin-bottom: 8px !important;
        font-size: 16px !important;
        line-height: 1.25 !important;
    }

    body.home-detail-open #homeDetailPage .description {
        font-size: 12.5px !important;
        line-height: 1.58 !important;
    }

    body.home-detail-open #homeDetailPage .amenities {
        gap: 6px !important;
    }

    body.home-detail-open #homeDetailPage .amenity-item {
        min-height: 36px;
        padding: 8px 9px !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    body.home-detail-open #homeDetailPage .detail-gallery-heading {
        gap: 8px;
        margin-bottom: 9px;
        padding: 9px;
        border-radius: 13px;
    }

    body.home-detail-open #homeDetailPage .detail-gallery-heading-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 13px;
    }

    body.home-detail-open #homeDetailPage .detail-gallery-kicker {
        font-size: 8px;
    }

    body.home-detail-open #homeDetailPage .detail-gallery-heading h2 {
        font-size: 16px !important;
    }

    body.home-detail-open #homeDetailPage .detail-gallery-heading p {
        margin-top: 2px;
        font-size: 10.2px !important;
        line-height: 1.35 !important;
    }

    body.home-detail-open #homeDetailPage .booking-process-section {
        padding: 13px 11px 11px !important;
        border-radius: 18px !important;
    }

    body.home-detail-open #homeDetailPage .booking-process-heading {
        margin-bottom: 11px;
    }

    body.home-detail-open #homeDetailPage .booking-process-heading h2 {
        margin-bottom: 6px !important;
        font-size: 18px !important;
    }

    body.home-detail-open #homeDetailPage .booking-process-heading p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    body.home-detail-open #homeDetailPage .booking-process-grid {
        gap: 7px;
    }

    body.home-detail-open #homeDetailPage .booking-step-card {
        column-gap: 8px;
        padding: 10px;
        border-radius: 13px;
    }

    body.home-detail-open #homeDetailPage .booking-step-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 10px;
        font-size: 12px;
    }

    body.home-detail-open #homeDetailPage .booking-step-card h3 {
        font-size: 13.2px;
    }

    body.home-detail-open #homeDetailPage .booking-step-card p {
        margin-top: 7px;
        font-size: 10.7px !important;
        line-height: 1.48 !important;
    }

    body.home-detail-open #homeDetailPage .booking-process-assurance {
        display: none;
    }

    body.home-detail-open #homeDetailPage #pricingPreview {
        gap: 6px !important;
    }

    body.home-detail-open #homeDetailPage .price-preview-card {
        padding: 8px !important;
        border-radius: 12px !important;
    }

    body.home-detail-open #homeDetailPage .pricing-details summary {
        min-height: 38px;
        padding: 9px 10px !important;
        font-size: 11px !important;
    }
}

@media(max-width:390px) {
    .detail-booking-intent-heading p {
        display: none;
    }

    .detail-booking-intent-heading {
        margin-bottom: 7px;
    }

    body.home-detail-open #homeDetailPage .best-deal-btn {
        min-width: 86px;
        max-width: 96px;
        padding-inline: 7px !important;
        font-size: 10px !important;
    }

    body.home-detail-open #homeDetailPage .detail-custom-booking-inline .custom-inline-btn {
        min-width: 82px !important;
        padding-inline: 9px !important;
    }
}

@media(prefers-reduced-motion:reduce) {
    body.home-detail-open #homeDetailPage .detail-top-actions .back-btn i,
    .detail-booking-intent-option {
        transition: none !important;
    }
}

/* =========================================================
   V375 · Footer business identity polish
   Lightweight CSS only: no new font, library or animation.
========================================================= */
.footer-business-identity {
    position: relative;
    display: grid;
    gap: 7px;
    max-width: 340px;
    margin: 0 0 17px;
    padding-left: 13px;
}

.footer-business-identity::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
}

.footer-brand .footer-business-identity h2 {
    margin: 0 !important;
    max-width: 100%;
    color: #fff;
    font-size: 19px !important;
    font-weight: 720;
    line-height: 1.35;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.footer-business-tax {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .86);
    font-size: 12px;
    line-height: 1.4;
}

.footer-business-tax span {
    font-weight: 500;
    opacity: .82;
}

.footer-business-tax strong {
    color: #fff;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
    font-weight: 720;
    letter-spacing: .015em;
}

.footer-business-tax.is-empty strong {
    opacity: .72;
    font-weight: 650;
}

.booking-search-confidence {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 11px;
}

.booking-search-confidence span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(22, 131, 93, .12);
    border-radius: 12px;
    background: #f7fcf9;
    color: #48645b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
}

.booking-search-confidence i {
    flex: 0 0 auto;
    color: #16835d;
    font-size: 11px;
}

@media (max-width: 1100px) {
    .footer-brand .footer-business-identity h2 {
        font-size: 18.5px !important;
    }
}

@media (max-width: 768px) {
    .footer-business-identity {
        gap: 6px;
        max-width: 100%;
        margin-bottom: 15px;
        padding-left: 12px;
    }

    .footer-brand .footer-business-identity h2 {
        font-size: 18px !important;
        line-height: 1.34;
    }

    .footer-business-tax {
        font-size: 11.75px;
    }

    .booking-search-confidence {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 9px;
    }

    .booking-search-confidence span {
        justify-content: flex-start;
        min-height: 34px;
        padding: 7px 10px;
        font-size: 10.5px;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .footer-business-identity {
        padding-left: 11px;
    }

    .footer-brand .footer-business-identity h2 {
        font-size: 17px !important;
    }

    .footer-business-tax {
        gap: 4px;
        font-size: 11.5px;
    }
}



/* V377 · Center the HOME / calendar / gallery switcher on every route. */
body > .container > .tabs {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body > .container > .tabs .tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

html.calendar-route body > .container > .tabs,
html.home-route body > .container > .tabs,
html.gallery-route body > .container > .tabs {
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 641px) and (max-width: 1100px) {
    body > .container > .tabs {
        width: fit-content !important;
        max-width: calc(100% - 24px) !important;
    }
}

@media (max-width: 640px) {
    body > .container > .tabs {
        display: flex !important;
        width: 100% !important;
        max-width: 560px !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body > .container > .tabs .tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }
}


/* =========================================================
   V378 · Footer tablet/mobile alignment polish
   Keep desktop identity accent, center business/tax on <= 768px,
   and reduce contact indentation on smaller screens.
========================================================= */
@media (max-width: 768px) {
    .footer-business-identity {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
        text-align: center;
    }

    .footer-business-identity::before {
        display: none;
    }

    .footer-brand .footer-business-identity h2 {
        width: 100%;
        max-width: 420px;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .footer-business-tax {
        width: 100%;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .footer-links li {
        gap: 9px;
    }

    .footer-links i {
        width: 14px;
        margin-top: 4px;
    }

    .footer-address {
        margin: 0;
        padding: 0;
        text-indent: 0;
    }
}

@media (max-width: 520px) {
    .footer-links li {
        gap: 7px;
    }
}

/* =========================================================
   v380 · Giá dịp đặc biệt + coupon cứu đơn checkout
========================================================= */
.website-price-campaign-tag {
    display:inline-flex;
    margin-left:6px;
    padding:2px 6px;
    border-radius:999px;
    background:rgba(245,158,11,.12);
    color:#b45309;
    font-size:9px;
    font-weight:850;
    vertical-align:middle;
}
.booking-summary-campaign {
    display:block;
    margin-top:3px;
    color:#b45309;
    font-size:9px;
    font-weight:800;
}
.booking-summary-coupon,
.website-coupon-discount-line { color:#047857 !important; }
.booking-summary-coupon strong,
.website-coupon-discount-line strong { color:#059669 !important; }

.website-exit-offer-modal {
    position:fixed;
    inset:0;
    z-index:2147483000;
    display:grid;
    place-items:center;
    padding:18px;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s ease, visibility .18s ease;
}
.website-exit-offer-modal[hidden] { display:none !important; }
.website-exit-offer-modal.show { opacity:1; visibility:visible; }
.website-exit-offer-backdrop {
    position:absolute;
    inset:0;
    border:0;
    background:rgba(15,23,42,.64);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
}
.website-exit-offer-sheet {
    position:relative;
    width:min(100%, 448px);
    padding:26px 24px 22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.68);
    border-radius:28px;
    background:
        radial-gradient(circle at 92% 0, rgba(16,185,129,.18), transparent 31%),
        radial-gradient(circle at 4% 100%, rgba(245,158,11,.12), transparent 34%),
        #fff;
    box-shadow:0 30px 90px rgba(15,23,42,.32);
    text-align:center;
    transform:translateY(12px) scale(.985);
    transition:transform .2s ease;
}
.website-exit-offer-modal.show .website-exit-offer-sheet { transform:translateY(0) scale(1); }
.website-exit-offer-close {
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid rgba(148,163,184,.22);
    border-radius:50%;
    background:rgba(255,255,255,.82);
    color:#64748b;
    font-size:20px;
    cursor:pointer;
}
.website-exit-offer-badge {
    width:max-content;
    max-width:calc(100% - 54px);
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(5,150,105,.09);
    color:#047857;
    font-size:9px;
    font-weight:950;
    letter-spacing:.07em;
}
.website-exit-offer-icon {
    width:62px;
    height:62px;
    margin:0 auto 10px;
    display:grid;
    place-items:center;
    border-radius:20px;
    background:linear-gradient(145deg,#ecfdf5,#fef3c7);
    box-shadow:inset 0 0 0 1px rgba(16,185,129,.1);
    font-size:31px;
    transform:rotate(-3deg);
}
.website-exit-offer-sheet h3 {
    margin:0;
    color:#0f172a;
    font-size:22px;
    line-height:1.18;
    letter-spacing:-.02em;
}
.website-exit-offer-sheet > p {
    margin:8px auto 15px;
    max-width:360px;
    color:#64748b;
    font-size:12.5px;
    line-height:1.5;
}
.website-exit-offer-value {
    display:grid;
    gap:2px;
    padding:14px;
    border:1px solid rgba(16,185,129,.16);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(236,253,245,.95),rgba(240,253,250,.92));
}
.website-exit-offer-value small { color:#64748b; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.website-exit-offer-value strong { color:#047857; font-size:26px; line-height:1.1; }
.website-exit-offer-value span { color:#059669; font-size:11px; font-weight:850; }
.website-exit-offer-price-row {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin:12px 0;
    padding:0 3px;
    text-align:left;
}
.website-exit-offer-price-row span { display:grid; gap:2px; color:#64748b; font-size:10px; }
.website-exit-offer-price-row del { color:#94a3b8; font-size:12px; }
.website-exit-offer-price-row b { color:#0f172a; font-size:22px; }
.website-exit-offer-apply,
.website-exit-offer-leave {
    width:100%;
    min-height:48px;
    border-radius:15px;
    font-weight:900;
    cursor:pointer;
}
.website-exit-offer-apply {
    border:0;
    background:linear-gradient(135deg,#059669,#0f766e);
    color:#fff;
    box-shadow:0 12px 24px rgba(5,150,105,.23);
    font-size:13px;
}
.website-exit-offer-apply:disabled { opacity:.65; cursor:wait; }
.website-exit-offer-leave {
    min-height:38px;
    margin-top:6px;
    border:0;
    background:transparent;
    color:#94a3b8;
    font-size:10.5px;
}
.website-exit-offer-fineprint { display:block; margin-top:4px; color:#94a3b8; font-size:9px; line-height:1.4; }
@media (max-width: 600px) {
    .website-exit-offer-modal { align-items:end; padding:10px; }
    .website-exit-offer-sheet {
        width:100%;
        padding:23px 18px calc(18px + env(safe-area-inset-bottom));
        border-radius:25px 25px 18px 18px;
    }
    .website-exit-offer-sheet h3 { font-size:20px; }
    .website-exit-offer-icon { width:56px; height:56px; font-size:28px; }
    .website-exit-offer-value strong { font-size:24px; }
}
@media (max-width: 380px) {
    .website-exit-offer-modal { padding:6px; }
    .website-exit-offer-sheet { padding-inline:14px; }
    .website-exit-offer-sheet h3 { font-size:18px; }
    .website-exit-offer-sheet > p { font-size:11.5px; }
}

/* =========================================================
   v383 · Campaign clarity + polished savings voucher
========================================================= */
.website-price-line {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px 9px;
}
.website-price-line-main {
    display:inline-flex;
    align-items:baseline;
    gap:4px;
}
.website-price-campaign-tag {
    display:inline-flex;
    align-items:center;
    gap:5px;
    width:max-content;
    max-width:100%;
    margin:0;
    padding:5px 8px;
    border:1px solid rgba(245,158,11,.2);
    border-radius:999px;
    background:linear-gradient(135deg,rgba(255,251,235,.98),rgba(255,247,237,.94));
    color:#92400e;
    box-shadow:0 4px 12px rgba(146,64,14,.07);
    font-size:9.5px;
    font-weight:800;
    line-height:1;
    vertical-align:middle;
}
.website-price-campaign-tag i {
    flex:0 0 auto;
    color:#d97706;
    font-size:9px;
}
.website-price-campaign-tag b {
    flex:0 0 auto;
    padding:3px 5px;
    border-radius:999px;
    background:rgba(245,158,11,.13);
    color:#b45309;
    font-size:9px;
    font-weight:950;
}
.website-price-campaign-tag span {
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.website-price-campaign-tag.decrease {
    border-color:rgba(16,185,129,.2);
    background:linear-gradient(135deg,rgba(236,253,245,.98),rgba(240,253,250,.94));
    color:#047857;
    box-shadow:0 4px 12px rgba(4,120,87,.06);
}
.website-price-campaign-tag.decrease i { color:#059669; }
.website-price-campaign-tag.decrease b {
    background:rgba(16,185,129,.12);
    color:#047857;
}
.website-price-campaign-tag.compact {
    display:flex;
    margin-top:5px;
    padding:4px 7px;
    font-size:8.8px;
}
.booking-summary-price-label {
    display:block;
    min-width:0;
}
.booking-summary-campaign { display:none; }

.custom-campaign-notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:10px;
    padding:11px 12px;
    border:1px solid rgba(245,158,11,.2);
    border-radius:15px;
    background:linear-gradient(135deg,rgba(255,251,235,.96),rgba(255,247,237,.9));
    color:#78350f;
}
.custom-campaign-notice.decrease {
    border-color:rgba(16,185,129,.18);
    background:linear-gradient(135deg,rgba(236,253,245,.97),rgba(240,253,250,.9));
    color:#065f46;
}
.custom-campaign-icon {
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(245,158,11,.12);
    color:#d97706;
    font-size:13px;
}
.custom-campaign-notice.decrease .custom-campaign-icon {
    background:rgba(16,185,129,.11);
    color:#059669;
}
.custom-campaign-copy {
    min-width:0;
    display:grid;
    gap:4px;
}
.custom-campaign-title-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    line-height:1.2;
}
.custom-campaign-title-row strong {
    padding:3px 6px;
    border-radius:999px;
    background:rgba(245,158,11,.13);
    color:#b45309;
    font-size:10px;
    font-weight:950;
}
.custom-campaign-notice.decrease .custom-campaign-title-row strong {
    background:rgba(16,185,129,.12);
    color:#047857;
}
.custom-campaign-title-row span {
    color:inherit;
    font-size:11px;
    font-weight:900;
}
.custom-campaign-copy small {
    color:#8a5a16;
    font-size:9.5px;
    font-weight:650;
    line-height:1.45;
}
.custom-campaign-notice.decrease .custom-campaign-copy small { color:#477a68; }

.website-exit-offer-upsell {
    margin:-7px auto 14px !important;
    max-width:372px !important;
    padding:9px 11px;
    border:1px solid rgba(16,185,129,.12);
    border-radius:12px;
    background:rgba(236,253,245,.62);
    color:#487166 !important;
    font-size:10.5px !important;
    font-weight:700;
    line-height:1.5 !important;
}

@media (max-width:600px) {
    .website-price-campaign-tag { max-width:230px; }
    .website-price-campaign-tag.compact { max-width:190px; }
    .custom-campaign-notice { padding:10px; border-radius:13px; }
    .custom-campaign-copy small { font-size:9px; }
    .website-exit-offer-upsell { font-size:10px !important; }
}

/* V391 · Website paid booking → Guest Stay Journey */
.booking-stay-portal-card{
    display:grid;
    gap:10px;
    padding:20px;
    border:1px solid rgba(217,47,98,.18);
    border-radius:20px;
    background:linear-gradient(145deg,#fff 0%,#fff7fa 100%);
    box-shadow:0 12px 34px rgba(74,45,38,.06);
}
.booking-stay-portal-kicker{
    color:#d92f62;
    font-size:10px;
    line-height:1;
    font-weight:900;
    letter-spacing:.14em;
}
.booking-stay-portal-card h3{margin:0;font-size:18px;line-height:1.25;letter-spacing:-.02em;color:#241d1a}
.booking-stay-portal-card p{margin:0;color:#756965;font-size:12px;line-height:1.55}
.booking-stay-portal-card small{display:block;color:#8a7c76;font-size:10.5px;line-height:1.45}
.booking-stay-portal-link{width:100%;justify-content:center;text-align:center}
.booking-stay-portal-link.is-disabled{pointer-events:none;opacity:.62;filter:saturate(.7)}
.booking-stay-portal-card.is-ready{border-color:rgba(25,134,95,.18);background:linear-gradient(145deg,#fff 0%,#f4fbf7 100%)}
.booking-stay-portal-card.is-ready .booking-stay-portal-kicker{color:#19865f}
.booking-stay-portal-card.is-error{border-color:rgba(150,80,55,.16);background:#fffaf7}
@media(max-width:900px){.booking-stay-portal-card{padding:18px}}
@media(max-width:560px){.booking-stay-portal-card{padding:16px;border-radius:18px;gap:9px}.booking-stay-portal-card h3{font-size:16px}.booking-stay-portal-link{min-height:44px}}


/* V438 · Journey Growth preview */
.booking-summary-growth-hint{display:flex;align-items:flex-start;gap:8px;margin:8px 0;padding:10px 12px;border:1px solid #dcebe1;border-radius:13px;background:#f4fbf6;color:#416552;font-size:12px;line-height:1.5}.booking-summary-growth-hint i{margin-top:2px;color:#2f7655}.booking-summary-growth-hint.is-ineligible{border-color:#eee1ce;background:#fff9f0;color:#715d3d}.website-growth-preview.is-applied{color:#2f7655}.website-growth-preview.is-applied strong{color:#28704f}@media(max-width:760px){.booking-summary-growth-hint{font-size:11.5px;padding:9px 10px}.website-growth-preview span{font-size:11.5px}}


/* v442 · dedicated Member entry (kept out of mobile horizontal nav) */
.member-header-entry{flex:0 0 auto;display:inline-flex!important;align-items:center;gap:9px;min-height:44px;padding:5px 13px 5px 7px;border-radius:999px;text-decoration:none!important;background:linear-gradient(135deg,#f1f8f3,#fff);border:1px solid rgba(47,114,84,.16);color:#285f46!important;box-shadow:0 10px 24px rgba(47,114,84,.09);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.member-header-entry:hover{transform:translateY(-2px);border-color:rgba(47,114,84,.28);box-shadow:0 14px 30px rgba(47,114,84,.14)}.member-header-entry-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,#2f7254,#20553e);color:#fff;font-size:12px;box-shadow:0 7px 16px rgba(47,114,84,.19)}.member-header-entry-copy{display:flex;flex-direction:column;line-height:1.05}.member-header-entry-copy b{font-size:11px;font-weight:900}.member-header-entry-copy small{margin-top:3px;font-size:8px;font-weight:700;color:#718078}.member-mobile-entry{display:none}
@media(min-width:769px) and (max-width:1180px){.member-header-entry{padding-right:9px}.member-header-entry-copy small{display:none}.member-header-entry-copy b{font-size:10px}.member-header-entry-icon{width:32px;height:32px}.header-inner{gap:10px!important}}
@media(max-width:768px){.member-header-entry{display:none!important}.member-mobile-entry{display:flex;align-items:center;gap:11px;width:calc(100% - 20px);margin:8px auto 10px;padding:10px 11px;border:1px solid rgba(47,114,84,.14);border-radius:16px;background:linear-gradient(135deg,rgba(239,248,242,.98),rgba(255,255,255,.98));color:#285f46;text-decoration:none;box-shadow:0 8px 22px rgba(47,114,84,.08)}.member-mobile-entry-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#2f7254,#20553e);color:#fff;font-size:12px}.member-mobile-entry-copy{display:flex;flex:1 1 auto;min-width:0;flex-direction:column}.member-mobile-entry-copy b{font-size:11px;font-weight:900;line-height:1.15}.member-mobile-entry-copy small{margin-top:3px;color:#728079;font-size:8px;font-weight:700;line-height:1.2}.member-mobile-entry-arrow{flex:0 0 auto;font-size:10px;color:#6b8f7a}}

/* V503 · Customer member entry polish + guarded centered loaders */
.member-header-entry,.member-mobile-entry{--mh-ink:#171a18;--mh-line:#d8d0c8;--mh-forest:#183f30;--mh-forest2:#0f3024;--mh-gold:#9a7430;--mh-gold-soft:#f4ead3;--mh-burgundy:#8e2341;background-image:none!important}
.member-header-entry{min-height:44px!important;padding:6px 11px 6px 7px!important;gap:9px!important;border:1px solid #c9d1cc!important;border-radius:10px!important;background:#fff!important;color:var(--mh-ink)!important;box-shadow:none!important;transition:border-color .16s ease,box-shadow .16s ease!important}.member-header-entry:hover{transform:none!important;border-color:#aebdb4!important;box-shadow:0 8px 22px rgba(30,42,35,.06)!important}
.member-header-entry-icon,.member-mobile-entry-icon{display:grid!important;place-items:center!important;border:1px solid #d2c5aa!important;background:var(--mh-gold-soft)!important;color:var(--mh-gold)!important;box-shadow:none!important}.member-header-entry-icon{width:32px!important;height:32px!important;border-radius:8px!important}.member-header-entry-icon::before,.member-mobile-entry-icon::before{display:none!important;content:none!important}.member-header-entry-icon>i,.member-mobile-entry-icon>i{display:inline-block!important;font-size:13px!important}.member-header-entry-copy,.member-mobile-entry-copy{min-width:0!important}.member-header-entry-copy b,.member-mobile-entry-copy b{display:block!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800!important}.member-header-entry-copy b{max-width:165px;font-size:11px!important}.member-mobile-entry-copy b{font-size:12px!important}.member-header-entry-copy small,.member-mobile-entry-copy small{display:block!important;margin-top:3px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600!important}.member-header-entry-copy small{font-size:8px!important}.member-mobile-entry-copy small{font-size:8.5px!important}.member-header-entry-copy small::before,.member-mobile-entry-copy small::before{display:none!important}
.member-header-entry.is-member-active{border-color:#b8c9c0!important}.member-header-entry.is-member-active .member-header-entry-icon{background:var(--mh-forest)!important;border-color:var(--mh-forest)!important;color:#fff!important}.member-header-entry.is-member-active .member-header-entry-copy b{color:var(--mh-forest2)!important}.member-header-entry.is-member-active .member-header-entry-copy small{color:#4b6256!important}
.member-mobile-entry.is-member-active{border:1px solid #2f5948!important;background:var(--mh-forest)!important;color:#fff!important;box-shadow:0 12px 28px rgba(24,63,48,.16)!important}.member-mobile-entry.is-member-active .member-mobile-entry-icon{background:var(--mh-gold-soft)!important;border-color:#d6c195!important;color:var(--mh-gold)!important}.member-mobile-entry.is-member-active .member-mobile-entry-copy b{color:#fff!important}.member-mobile-entry.is-member-active .member-mobile-entry-copy small{color:#d9cfb8!important}.member-mobile-entry.is-member-active .member-mobile-entry-arrow{color:#d8c38f!important}
.member-header-entry.is-member-loading .member-header-entry-icon,.member-mobile-entry.is-member-loading .member-mobile-entry-icon{background:#f4ead3!important;border-color:#d7c39e!important;color:var(--mh-gold)!important}.member-header-entry.is-member-error .member-header-entry-icon,.member-mobile-entry.is-member-error .member-mobile-entry-icon{background:#f4e2e7!important;border-color:#c893a2!important;color:var(--mh-burgundy)!important}.member-mobile-entry-arrow{color:#565c57!important;font-size:9px!important}
@media(max-width:768px){.member-header-entry{display:none!important}.member-mobile-entry{display:flex!important;align-items:center!important;gap:10px!important;width:calc(100% - 24px)!important;margin:8px auto 11px!important;padding:10px 11px!important;border-radius:11px!important}.member-mobile-entry-icon{flex:0 0 38px!important;width:38px!important;height:38px!important;border-radius:9px!important}.member-mobile-entry-icon>i{font-size:14px!important}}
/* Center route/page loading only when each loader is actually active. Never force hidden loaders visible. */
html body #pageLoader,html body #routeRestoreLoader,html body .dynamic-route-loader,html body .page-loader,html body .route-loader{position:fixed!important;inset:0!important;align-items:center!important;justify-content:center!important;align-content:center!important;min-height:100dvh!important;margin:0!important}
html:not(.dynamic-route-pending) body .dynamic-route-loader{display:none!important}
html.dynamic-route-pending body .dynamic-route-loader{display:flex!important}

/* Booking discount helper remains hidden when it is the only option. */
#websiteDiscountOptions > .website-member-voucher-status:only-child{display:none!important}


/* V596 · Checkout: a compact, readable booking summary with a visible add-on. */
#websiteBookingModal .website-booking-head {
    background:linear-gradient(140deg,#ffffff 0%,#f8fbf9 100%)!important;
    border-bottom:1px solid #e9eee9!important;
}
#websiteBookingModal .booking-summary-card {
    background:#ffffff!important;border:1px solid #e7eee9!important;
    border-radius:18px!important;box-shadow:0 8px 22px rgba(28,69,45,.035)!important;
}
#websiteBookingModal .booking-summary-gift {
    background:#f4faf6!important;border-radius:10px!important;
    padding:10px 9px!important;color:#285a3a!important
}
#websiteBookingModal .booking-summary-gift strong {color:#225537!important}
#websiteBookingModal .website-single-discount-summary {
    background:#f7fbf8!important;border-radius:10px!important;padding:9px!important
}
#websiteBookingModal .booking-summary-payment {
    border-top:1px solid #dce9df!important;padding-top:13px!important;
    margin-top:6px!important
}
#websiteBookingModal .payos-brief-confirmation {
    margin:12px 0!important;padding:10px 12px!important;
    background:#f5faf7!important;border:1px solid #e1eee5!important;
    border-radius:12px!important;color:#38634a!important;
    font-size:12px!important;line-height:1.5!important
}
@media(max-width:530px) {
    #websiteBookingModal .booking-summary-gift {padding:9px 7px!important}
    #websiteBookingModal .payos-brief-confirmation {font-size:11px!important}
}


/* V681: keep the 30-minute payOS booking modal centered and isolate page scrolling. */
html.website-booking-lock,
html.website-booking-lock body.website-booking-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.website-booking-modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    touch-action: none;
}

.website-booking-modal.show .website-booking-panel {
    margin: auto !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    overflow: hidden !important;
    touch-action: pan-y;
}

.website-booking-modal.show .website-booking-body {
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 768px) {
    .website-booking-modal.show {
        align-items: center !important;
        justify-content: center !important;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
    }

    .website-booking-modal.show .website-booking-panel {
        width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
        border-radius: 26px !important;
    }
}


/* V682: desktop checkout scroll recovery.
   Keep the page behind the modal locked, but establish a real constrained
   flex scroll container inside the centered booking panel. */
.website-booking-modal.show {
    touch-action: pan-y !important;
}

.website-booking-modal.show .website-booking-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))) !important;
    overflow: hidden !important;
}

.website-booking-modal.show .website-booking-head {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
}

.website-booking-modal.show .website-booking-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-gutter: stable;
}

@media (min-width: 769px) {
    .website-booking-modal.show .website-booking-panel {
        max-height: min(92dvh, 820px) !important;
    }

    .website-booking-modal.show .website-booking-body {
        scrollbar-gutter: stable both-edges;
    }
}