/* Little Riverside Hoi An banner slider + booking + OTA ratings. Based on Little Oasis standard. */
.hero,
.hero-slider{
    position:relative;
    width:100%;
    height:100vh;
    min-height:680px;
    overflow:hidden;
    color:#fff;
    background:#111;
    isolation:isolate;
}

.hero *{
    box-sizing:border-box;
}

.hero-slides,
.hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.hero-slide{
    opacity:0;
    transform:scale(1.03);
    transition:opacity 1.25s ease, transform 6.4s ease;
    z-index:0;
}

.hero-slide.is-active{
    opacity:1;
    transform:scale(1);
    z-index:1;
}

.hero-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.hero-slider::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.03) 50%, rgba(0,0,0,.23) 100%),
        linear-gradient(90deg, rgba(84,34,10,.28) 0%, rgba(136,78,28,.16) 52%, rgba(75,34,12,.26) 100%);
}

.hero-slider::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    background:rgba(92,42,18,.14);
    mix-blend-mode:multiply;
}

.hero-nav{
    position:absolute;
    top:50%;
    z-index:10;
    width:42px;
    height:42px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    transform:translateY(-50%);
    transition:opacity .25s ease, transform .25s ease;
    -webkit-appearance:none;
    appearance:none;
}

.hero-nav:hover{
    opacity:1;
    transform:translateY(-50%) scale(1.06);
}

.hero-nav-prev{left:18px;}
.hero-nav-next{right:18px;}

.hero-nav span{
    position:absolute;
    top:50%;
    left:50%;
    width:16px;
    height:16px;
    border-top:1.2px solid rgba(255,255,255,.94);
    border-left:1.2px solid rgba(255,255,255,.94);
}

.hero-nav-prev span{transform:translate(-34%,-50%) rotate(-45deg);}
.hero-nav-next span{transform:translate(-66%,-50%) rotate(135deg);}

.hero-booking{
    position:absolute;
    left:50%;
    bottom:calc(12vh + 28px);
    z-index:50;
    width:min(780px, calc(100% - 94px));
    display:grid;
    grid-template-columns:minmax(290px, 1.05fr) minmax(270px, 1fr) 168px;
    align-items:end;
    gap:10px;
    color:#fff;
    transform:translateX(-50%);
    animation:bookingFadeUp 1s ease .22s both;
    overflow:visible;
}

@keyframes bookingFadeUp{
    0%{opacity:0; transform:translate(-50%, 16px);}
    100%{opacity:1; transform:translate(-50%, 0);}
}

.booking-field{
    position:relative;
    min-height:54px;
    border-bottom:1px solid rgba(255,255,255,.52);
    transition:border-color .25s ease, transform .25s ease;
    overflow:visible;
    z-index:1;
}

.booking-field.is-open{
    z-index:80;
}

.booking-field:hover,
.booking-field.is-open,
.booking-field:focus-within{
    border-bottom-color:rgba(255,255,255,.96);
    transform:translateY(-1px);
}

.booking-trigger{
    position:relative;
    width:100%;
    min-height:54px;
    padding:0 28px 10px 0;
    border:0;
    background:transparent;
    color:#fff;
    text-align:left;
    font-family:Montserrat, Arial, sans-serif;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}

.booking-trigger::after{
    content:"";
    position:absolute;
    right:6px;
    top:23px;
    width:9px;
    height:9px;
    border-right:1px solid rgba(255,255,255,.9);
    border-bottom:1px solid rgba(255,255,255,.9);
    transform:rotate(45deg);
    transition:transform .25s ease;
}

.booking-field.is-open .booking-trigger::after{
    transform:rotate(225deg);
}

.booking-label{
    display:block;
    margin-bottom:6px;
    font-family:Montserrat, Arial, sans-serif;
    font-size:12px;
    font-weight:400;
    letter-spacing:.06em;
    line-height:1;
    text-transform:uppercase;
    color:rgba(255,255,255,.95);
}

.booking-value{
    display:block;
    font-family:Montserrat, Arial, sans-serif;
    font-size:15px;
    font-weight:400;
    letter-spacing:.02em;
    line-height:1.2;
    text-transform:uppercase;
    color:#fff;
    white-space:nowrap;
}

.booking-submit{
    height:36px;
    border:1px solid rgba(255,255,255,.58);
    background:transparent;
    color:#fff;
    font-family:Montserrat, Arial, sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:.12em;
    line-height:1;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
    -webkit-appearance:none;
    appearance:none;
}

.booking-submit:hover{
    background:rgba(255,255,255,.96);
    border-color:rgba(255,255,255,.96);
    color:#613817;
    transform:translateY(-1px);
}

.booking-panel{
    position:absolute;
    left:0;
    bottom:calc(100% + 16px);
    padding:18px;
    background:rgba(252,247,240,.985);
    color:#2a211d;
    border:1px solid rgba(130,88,54,.14);
    box-shadow:0 24px 64px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
    z-index:999;
    max-height:min(78vh, 560px);
    overflow:auto;
}

.booking-field.is-open .booking-panel{
    display:block;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

.booking-panel::after{
    content:"";
    position:absolute;
    left:26px;
    bottom:-8px;
    width:16px;
    height:16px;
    background:rgba(252,247,240,.985);
    border-right:1px solid rgba(130,88,54,.14);
    border-bottom:1px solid rgba(130,88,54,.14);
    transform:rotate(45deg);
}

.booking-date-panel{
    width:360px;
}

.booking-guests-panel{
    width:330px;
}

.booking-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    font-family:Montserrat, Arial, sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:#714a2e;
}

.booking-panel-close{
    position:relative;
    width:22px;
    height:22px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
}

.booking-panel-close::before,
.booking-panel-close::after{
    content:"";
    position:absolute;
    top:10px;
    left:4px;
    width:14px;
    height:1px;
    background:#714a2e;
}

.booking-panel-close::before{transform:rotate(45deg);}
.booking-panel-close::after{transform:rotate(-45deg);}

.date-range-pill,
.booking-date-summary,
.booking-guest-summary{
    display:grid;
    gap:12px;
    padding:12px 14px;
    background:rgba(111,76,47,.05);
    border:1px solid rgba(111,76,47,.09);
}

.date-range-pill,
.booking-date-summary{
    grid-template-columns:1fr 1fr;
}

.date-range-pill{
    margin-bottom:14px;
    padding:0;
    background:transparent;
    border:0;
}

.date-range-box{
    display:block;
    width:100%;
    padding:11px 12px;
    border:1px solid rgba(111,76,47,.10);
    background:rgba(111,76,47,.04);
    text-align:left;
    cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
    -webkit-appearance:none;
    appearance:none;
}

.date-range-box.is-active,
.date-range-box:hover{
    background:#fff;
    border-color:rgba(111,76,47,.26);
}

.date-range-box small,
.booking-date-summary small,
.booking-guest-summary small,
.guest-row small{
    display:block;
    margin-bottom:4px;
    font-family:Montserrat, Arial, sans-serif;
    font-size:10px;
    font-weight:500;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8f837b;
}

.date-range-box strong,
.booking-date-summary strong,
.booking-guest-summary strong{
    display:block;
    font-family:Montserrat, Arial, sans-serif;
    font-size:13px;
    font-weight:500;
    line-height:1.4;
    color:#2a211d;
}

.calendar-shell{
    margin-bottom:14px;
}

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

.calendar-title{
    font-family:Montserrat, Arial, sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.03em;
    color:#5f3f28;
}

.calendar-nav{
    position:relative;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid rgba(111,76,47,.16);
    background:#fff;
    cursor:pointer;
    transition:background .22s ease, border-color .22s ease;
    -webkit-appearance:none;
    appearance:none;
}

.calendar-nav:hover{
    background:#f5efe8;
    border-color:rgba(111,76,47,.28);
}

.calendar-nav::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:8px;
    height:8px;
    border-top:1px solid #6b452a;
    border-left:1px solid #6b452a;
}

.calendar-prev::before{
    transform:translate(-30%,-50%) rotate(-45deg);
}

.calendar-next::before{
    transform:translate(-70%,-50%) rotate(135deg);
}

.calendar-weekdays,
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:6px;
}

.calendar-weekdays{
    margin-bottom:8px;
}

.calendar-weekdays span{
    text-align:center;
    font-family:Montserrat, Arial, sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#998d84;
}

.calendar-day{
    width:100%;
    height:36px;
    padding:0;
    border:1px solid rgba(111,76,47,.10);
    background:#fff;
    color:#3d2b22;
    font-family:Montserrat, Arial, sans-serif;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    -webkit-appearance:none;
    appearance:none;
}

.calendar-day:hover:not(:disabled){
    border-color:rgba(111,76,47,.35);
    background:#f5eee7;
    transform:translateY(-1px);
}

.calendar-day.is-muted{
    opacity:.48;
}

.calendar-day.is-disabled{
    cursor:not-allowed;
    opacity:.3;
}

.calendar-day.is-in-range{
    background:rgba(111,76,47,.12);
    border-color:rgba(111,76,47,.14);
}

.calendar-day.is-start,
.calendar-day.is-end{
    background:#7b4d2a;
    border-color:#7b4d2a;
    color:#fff;
}

.guest-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 0;
    border-bottom:1px solid rgba(111,76,47,.10);
}

.guest-row:first-of-type{
    padding-top:0;
}

.guest-row strong{
    display:block;
    margin-bottom:4px;
    font-family:Montserrat, Arial, sans-serif;
    font-size:14px;
    font-weight:500;
    color:#2a211d;
}

.guest-stepper{
    display:flex;
    align-items:center;
    gap:10px;
}

.guest-stepper button{
    width:30px;
    height:30px;
    padding:0;
    border:1px solid rgba(111,76,47,.18);
    background:#fff;
    color:#6a4327;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
    -webkit-appearance:none;
    appearance:none;
}

.guest-stepper button:hover{
    background:#7b4d2a;
    border-color:#7b4d2a;
    color:#fff;
}

.guest-stepper span{
    min-width:18px;
    text-align:center;
    font-family:Montserrat, Arial, sans-serif;
    font-size:14px;
    color:#2a211d;
}

.booking-guest-summary{
    grid-template-columns:1fr;
    margin-top:14px;
}

.booking-apply{
    width:100%;
    height:40px;
    margin-top:14px;
    border:1px solid #7b4d2a;
    background:#7b4d2a;
    color:#fff;
    font-family:Montserrat, Arial, sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .22s ease, color .22s ease, border-color .22s ease;
    -webkit-appearance:none;
    appearance:none;
}

.booking-apply:hover{
    background:#fff;
    color:#7b4d2a;
}

.hero-dots{
    position:absolute;
    left:50%;
    bottom:42px;
    z-index:8;
    display:flex;
    align-items:center;
    gap:7px;
    transform:translateX(-50%);
}

.hero-dot{
    width:58px;
    height:2px;
    padding:0;
    border:0;
    background:rgba(255,255,255,.28);
    cursor:pointer;
    transition:background .28s ease;
    -webkit-appearance:none;
    appearance:none;
}

.hero-dot.is-active{
    background:rgba(255,255,255,.96);
}

@media (max-width: 827px){
    .hero-booking{
        width:min(720px, calc(100% - 52px));
        grid-template-columns:1fr 1fr;
        gap:16px 18px;
    }

    .booking-submit{
        grid-column:1 / -1;
        width:210px;
        justify-self:center;
    }
}

@media (max-width: 767px){
    .hero,
    .hero-slider{
        min-height:650px;
        height:100svh;
    }

    .hero-nav{
        top:43%;
        width:36px;
        height:36px;
    }

    .hero-nav-prev{left:8px;}
    .hero-nav-next{right:8px;}

    .hero-booking{
        bottom:92px;
        width:calc(100% - 34px);
        grid-template-columns:1fr;
        gap:14px;
    }

    .booking-trigger{
        min-height:56px;
    }

    .booking-value{
        font-size:14px;
        white-space:normal;
    }

    .booking-panel,
    .booking-date-panel,
    .booking-guests-panel{
        left:0;
        right:0;
        bottom:calc(100% + 14px);
        width:100%;
        max-width:none;
    }

    .date-range-pill,
    .booking-date-summary{
        grid-template-columns:1fr;
    }

    .calendar-weekdays,
    .calendar-grid{
        gap:4px;
    }

    .calendar-day{
        height:34px;
        font-size:12px;
    }

    .hero-dots{
        bottom:34px;
        gap:6px;
    }

    .hero-dot{
        width:34px;
    }

    .booking-submit{
        width:100%;
        height:44px;
        font-size:13px;
    }
}


/* =========================================================
   LHAG BOOKING FORM - FINAL STABLE FIX
   - Add Date opens calendar immediately
   - Rooms and Guests opens panel immediately
   - no hover movement, no text/arrow overlap
   - compact refined panels, no internal scrollbar
========================================================= */
.hero,
.hero-slider{
    overflow:hidden !important;
}

.hero-booking,
.hero-booking *{
    letter-spacing:1px !important;
}

.hero-booking{
    width:min(810px, calc(100% - 24px)) !important;
    grid-template-columns:270px 320px 180px !important;
    align-items:end !important;
    gap:16px !important;
    z-index:1000 !important;
    overflow:visible !important;
}

.hero-booking .booking-field{
    min-height:54px !important;
    border-bottom:1px solid rgba(255,255,255,.55) !important;
    transform:none !important;
    transition:none !important;
    overflow:visible !important;
    z-index:1 !important;
}
.hero-booking .booking-field.is-open,
.hero-booking .booking-field[data-panel-open="true"]{
    z-index:10001 !important;
    border-bottom-color:rgba(255,255,255,.9) !important;
}
.hero-booking .booking-field:hover,
.hero-booking .booking-field:focus-within{
    transform:none !important;
}

.hero-booking .booking-trigger{
    min-height:54px !important;
    padding:11px 38px 2px 0 !important;
    cursor:pointer !important;
    transform:none !important;
}
.hero-booking .booking-trigger::after{
    right:0 !important;
    left:auto !important;
    top:36px !important;
    width:8px !important;
    height:8px !important;
    border-right:1px solid rgba(255,255,255,.85) !important;
    border-bottom:1px solid rgba(255,255,255,.85) !important;
    transform:rotate(45deg) !important;
    transition:none !important;
}
.hero-booking .booking-field.is-open .booking-trigger::after,
.hero-booking .booking-field[data-panel-open="true"] .booking-trigger::after{
    transform:rotate(225deg) !important;
}
.hero-booking .booking-label{
    margin-bottom:7px !important;
    font-size:13px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    text-align:left !important;
}
.hero-booking .booking-value{
    display:block !important;
    padding-right:0 !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:600 !important;
    white-space:nowrap !important;
    text-transform:uppercase !important;
    text-align:left !important;
}
.hero-booking .booking-guests-field .booking-trigger{
    padding-left:0 !important;
    padding-right:44px !important;
}
.hero-booking .booking-guests-field .booking-value{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:clip !important;
}
.hero-booking .booking-submit{
    height:37px !important;
    align-self:end !important;
    margin:0 !important;
    padding:0 22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:transparent !important;
    box-shadow:inset 0 0 0 0 rgba(196,143,58,.92) !important;
    border:1px solid rgba(255,255,255,.72) !important;
    color:#fff !important;
    transform:none !important;
    transition:box-shadow .42s ease, color .35s ease, border-color .35s ease !important;
}
.hero-booking .booking-submit:hover{
    background:transparent !important;
    box-shadow:inset 180px 0 0 0 rgba(196,143,58,.92) !important;
    border-color:rgba(255,255,255,.95) !important;
    color:#fff !important;
    transform:none !important;
}
.hero-booking .booking-submit:not(:hover),
.hero-booking .booking-submit:focus:not(:hover),
.hero-booking .booking-submit:active:not(:hover){
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}

.hero-booking .booking-panel{
    display:none !important;
    position:absolute !important;
    left:0 !important;
    right:auto !important;
    bottom:calc(100% + 14px) !important;
    z-index:10002 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    background:rgba(252,248,242,.97) !important;
    color:#2c221d !important;
    border:1px solid rgba(92,66,47,.10) !important;
    box-shadow:0 20px 54px rgba(0,0,0,.2) !important;
    overflow:visible !important;
    max-height:none !important;
    scrollbar-width:none !important;
}
.hero-booking .booking-panel::-webkit-scrollbar{ display:none !important; }
.hero-booking .booking-field.is-open > .booking-panel,
.hero-booking .booking-field[data-panel-open="true"] > .booking-panel,
.hero-booking .booking-panel.is-open{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}
.hero-booking .booking-panel[hidden]{
    display:none !important;
}
.hero-booking .booking-field.is-open > .booking-panel:not([hidden]),
.hero-booking .booking-field[data-panel-open="true"] > .booking-panel:not([hidden]){
    display:block !important;
}
.hero-booking .booking-panel::after{ display:none !important; }

/* Date panel: only calendar block, compact as screenshot */
.hero-booking .booking-date-panel{
    width:390px !important;
    padding:8px 14px 14px !important;
}
.hero-booking .booking-date-panel .booking-panel-head,
.hero-booking .booking-date-panel .date-range-pill,
.hero-booking .booking-date-panel .booking-date-summary,
.hero-booking .booking-date-panel .booking-apply{
    display:none !important;
}
.hero-booking .calendar-shell{ margin:0 !important; }
.hero-booking .calendar-head{
    margin-bottom:8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
}
.hero-booking .calendar-title{
    font-size:15px !important;
    font-weight:600 !important;
    color:#5c4332 !important;
}
.hero-booking .calendar-nav{
    width:28px !important;
    height:28px !important;
    background:rgba(255,255,255,.9) !important;
    border:1px solid rgba(80,56,40,.12) !important;
    transform:none !important;
}
.hero-booking .calendar-weekdays,
.hero-booking .calendar-grid{
    display:grid !important;
    grid-template-columns:repeat(7, minmax(0, 1fr)) !important;
    gap:6px !important;
}
.hero-booking .calendar-weekdays{ margin-bottom:6px !important; }
.hero-booking .calendar-weekdays span{
    font-size:10px !important;
    font-weight:500 !important;
    color:#94877f !important;
    text-align:center !important;
}
.hero-booking .calendar-day{
    height:36px !important;
    border:0 !important;
    background:rgba(255,255,255,.58) !important;
    color:#4b403a !important;
    font-size:13px !important;
    font-weight:500 !important;
    transform:none !important;
    transition:none !important;
}
.hero-booking .calendar-day:hover:not(:disabled){
    transform:none !important;
    background:rgba(255,255,255,.8) !important;
}
.hero-booking .calendar-day.is-muted{ opacity:.38 !important; }
.hero-booking .calendar-day.is-disabled{ opacity:.28 !important; cursor:not-allowed !important; }
.hero-booking .calendar-day.is-in-range{ background:rgba(162,126,86,.16) !important; }
.hero-booking .calendar-day.is-start,
.hero-booking .calendar-day.is-end{
    background:#b08a54 !important;
    color:#fff !important;
}

/* Guests panel: only title + three rows */
.hero-booking .booking-guests-panel{
    width:350px !important;
    padding:18px 18px 16px !important;
}
.hero-booking .booking-guests-panel .booking-guest-summary,
.hero-booking .booking-guests-panel .booking-apply{
    display:none !important;
}
.hero-booking .booking-panel-head{
    margin-bottom:18px !important;
    font-size:13px !important;
    font-weight:600 !important;
    color:#6b432b !important;
}
.hero-booking .booking-panel-close{
    width:24px !important;
    height:24px !important;
}
.hero-booking .guest-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    padding:12px 0 !important;
    border-bottom:1px solid rgba(95,73,58,.10) !important;
}
.hero-booking .guest-row:first-of-type{ padding-top:0 !important; }
.hero-booking .guest-row:last-of-type{ border-bottom:0 !important; padding-bottom:0 !important; }
.hero-booking .guest-row strong{
    margin:0 0 5px !important;
    font-size:16px !important;
    font-weight:400 !important;
    color:#2f2622 !important;
}
.hero-booking .guest-row small{
    margin:0 !important;
    font-size:10px !important;
    color:#8b7c72 !important;
}
.hero-booking .guest-stepper{
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
}
.hero-booking .guest-stepper button{
    width:28px !important;
    height:28px !important;
    border:1px solid rgba(85,65,50,.14) !important;
    background:rgba(255,255,255,.72) !important;
    color:#6d4a33 !important;
    font-size:16px !important;
    transform:none !important;
    transition:none !important;
}
.hero-booking .guest-stepper button:hover{
    background:rgba(255,255,255,.72) !important;
    color:#6d4a33 !important;
}
.hero-booking .guest-stepper span{
    min-width:18px !important;
    font-size:14px !important;
    color:#332823 !important;
}

/* smoother deeper slider zoom */
.hero-slide{
    opacity:0 !important;
    transform:none !important;
    transition:opacity 1.45s ease-in-out !important;
}
.hero-slide.is-active{ opacity:1 !important; }
.hero-slide img{
    transform:scale(1.13) !important;
    transition:transform 8.6s ease-in-out !important;
}
.hero-slide.is-active img{ transform:scale(1) !important; }

@media (max-width: 827px){
    .hero-booking{
        width:min(720px, calc(100% - 56px)) !important;
        grid-template-columns:1fr 1fr !important;
    }
    .hero-booking .booking-submit{
        grid-column:1 / -1 !important;
        width:220px !important;
        justify-self:center !important;
    }
}

@media (max-width: 767px){
    .hero-booking{
        width:calc(100% - 32px) !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
        bottom:88px !important;
    }
    .hero-booking .booking-value{ white-space:normal !important; }
    .hero-booking .booking-panel{
        position:fixed !important;
        left:16px !important;
        right:16px !important;
        bottom:auto !important;
        top:50% !important;
        width:auto !important;
        max-width:none !important;
        transform:translateY(-50%) !important;
        z-index:10002 !important;
    }
    .hero-booking .booking-date-panel,
    .hero-booking .booking-guests-panel{
        width:auto !important;
    }
    .hero-booking .calendar-weekdays,
    .hero-booking .calendar-grid{ gap:4px !important; }
    .hero-booking .calendar-day{ height:34px !important; font-size:12px !important; }
    .hero-booking .booking-submit{ width:100% !important; height:44px !important; }
}

/* Final booking button default state override */
.hero-booking .booking-submit{
    background-color:transparent !important;
    background-image:none !important;
}
.hero-booking .booking-submit:not(:hover),
.hero-booking .booking-submit:focus:not(:hover),
.hero-booking .booking-submit:active:not(:hover){
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
}


/* =========================================================
   LHAG BANNER BOOKING + OTA RATINGS - SCREENSHOT MATCH
   - booking form aligned like reference image
   - dots placed between form and rating bar
   - OTA score bar added at bottom
   - scoped to banner only, does not affect other sections
========================================================= */
.hero-slider{
    min-height:720px !important;
}

.hero-slider::before{
    background:
        linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.04) 46%, rgba(0,0,0,.46) 100%),
        linear-gradient(90deg, rgba(96,54,20,.30) 0%, rgba(104,72,38,.10) 48%, rgba(96,54,20,.24) 100%) !important;
}

.hero-slider::after{
    background:linear-gradient(180deg, rgba(80,45,18,.10) 0%, rgba(80,45,18,.14) 68%, rgba(32,24,18,.38) 100%) !important;
    mix-blend-mode:multiply !important;
}

.hero-booking{
    bottom:154px !important;
    width:min(840px, calc(100% - 120px)) !important;
    grid-template-columns:300px 330px 190px !important;
    gap:26px !important;
    align-items:end !important;
}

.hero-booking .booking-field{
    min-height:58px !important;
    border-bottom:1px solid rgba(255,255,255,.54) !important;
}

.hero-booking .booking-trigger{
    min-height:58px !important;
    padding:8px 38px 8px 0 !important;
}

.hero-booking .booking-label{
    margin-bottom:10px !important;
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:2px !important;
    color:rgba(255,255,255,.90) !important;
}

.hero-booking .booking-value{
    font-size:13px !important;
    font-weight:600 !important;
    letter-spacing:2px !important;
    line-height:1.2 !important;
    color:rgba(255,255,255,.96) !important;
}

.hero-booking .booking-trigger::after{
    top:33px !important;
    right:4px !important;
    width:9px !important;
    height:9px !important;
    border-color:rgba(255,255,255,.78) !important;
}

.hero-booking .booking-submit{
    height:43px !important;
    margin-bottom:7px !important;
    border:1px solid rgba(255,255,255,.60) !important;
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:4px !important;
    background:rgba(255,255,255,.02) !important;
}

.hero-booking .booking-submit:hover{
    box-shadow:inset 210px 0 0 0 rgba(176,138,84,.95) !important;
    border-color:rgba(255,255,255,.9) !important;
}

.hero-dots{
    bottom:86px !important;
    z-index:60 !important;
    gap:22px !important;
}

.hero-dot{
    width:10px !important;
    height:10px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.58) !important;
}

.hero-dot.is-active{
    background:#fff !important;
}

.hero-ota-ratings{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:55;
    height:56px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    border-top:1px solid rgba(255,255,255,.24);
    background:rgba(39,34,28,.18);
    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);
    color:#fff;
    font-family:Montserrat, Arial, sans-serif;
    pointer-events:none;
}

.ota-rating-item{
    min-width:0;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-left:1px solid rgba(255,255,255,.23);
}

.ota-rating-item:first-child{
    border-left:0;
}

.ota-rating-item strong{
    display:block;
    margin:0 0 2px;
    font-family:Georgia, 'Times New Roman', serif;
    font-size:24px;
    font-weight:400;
    line-height:1;
    letter-spacing:3px;
    color:rgba(255,255,255,.95);
    white-space:nowrap;
}

.ota-rating-item span{
    display:block;
    font-size:11px;
    font-weight:600;
    line-height:1;
    letter-spacing:2px;
    text-transform:uppercase;
    color:rgba(255,255,255,.88);
    white-space:nowrap;
}

.ota-rating-google strong{
    font-size:23px;
    letter-spacing:2.5px;
}

@media (max-width: 1024px){
    .hero-booking{
        width:min(780px, calc(100% - 72px)) !important;
        grid-template-columns:1fr 1fr 180px !important;
        gap:20px !important;
    }
    .ota-rating-item strong,
    .ota-rating-google strong{
        font-size:20px;
        letter-spacing:2px;
    }
    .ota-rating-item span{
        font-size:10px;
        letter-spacing:1.5px;
    }
}

@media (max-width: 827px){
    .hero-booking{
        bottom:150px !important;
        width:calc(100% - 44px) !important;
        grid-template-columns:1fr 1fr !important;
        gap:18px !important;
    }
    .hero-booking .booking-submit{
        grid-column:1 / -1 !important;
        width:220px !important;
        justify-self:center !important;
        margin-bottom:0 !important;
    }
    .hero-dots{
        bottom:82px !important;
    }
}

@media (max-width: 767px){
    .hero,
    .hero-slider{
        min-height:760px !important;
        height:100svh !important;
    }
    .hero-booking{
        bottom:150px !important;
        width:calc(100% - 34px) !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }
    .hero-booking .booking-field{
        min-height:54px !important;
    }
    .hero-booking .booking-trigger{
        min-height:54px !important;
        padding-top:6px !important;
    }
    .hero-booking .booking-label{
        font-size:12px !important;
        letter-spacing:1.5px !important;
    }
    .hero-booking .booking-value{
        font-size:12px !important;
        letter-spacing:1.2px !important;
        white-space:normal !important;
    }
    .hero-booking .booking-submit{
        width:100% !important;
        height:44px !important;
        letter-spacing:3px !important;
    }
    .hero-dots{
        bottom:78px !important;
        gap:14px !important;
    }
    .hero-dot{
        width:8px !important;
        height:8px !important;
    }
    .hero-ota-ratings{
        height:66px;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .ota-rating-item{
        border-top:1px solid rgba(255,255,255,.16);
    }
    .ota-rating-item:nth-child(1),
    .ota-rating-item:nth-child(2){
        border-top:0;
    }
    .ota-rating-item:nth-child(odd){
        border-left:0;
    }
    .ota-rating-item strong,
    .ota-rating-google strong{
        font-size:15px;
        letter-spacing:1.5px;
    }
    .ota-rating-item span{
        font-size:8px;
        letter-spacing:1.1px;
    }
}

/* =========================================================
   MOBILE BOOKING VISIBILITY + AMERICANA OTA + SOFT MOVE-UP
   - ensures booking form remains visible on phone
   - OTA score numbers use Americana
   - booking fields / OTA blocks lift subtly on hover
========================================================= */
.hero-booking{
    display:grid !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.hero-booking .booking-field,
.hero-booking .booking-submit,
.ota-rating-item{
    transition:transform .32s ease, border-color .32s ease, background .32s ease, box-shadow .32s ease, opacity .32s ease !important;
    will-change:transform;
}

.hero-booking .booking-field:hover,
.hero-booking .booking-field:focus-within{
    transform:translateY(-3px) !important;
}

.hero-booking .booking-submit:hover{
    transform:translateY(-3px) !important;
}

.hero-ota-ratings{
    pointer-events:auto !important;
}

.ota-rating-item:hover{
    transform:translateY(-3px) !important;
    background:rgba(255,255,255,.045) !important;
}

.ota-rating-item strong,
.ota-rating-google strong{
    font-family:"Americana", Georgia, 'Times New Roman', serif !important;
    font-weight:400 !important;
    letter-spacing:2px !important;
}

@media (max-width: 767px){
    .hero,
    .hero-slider{
        min-height:820px !important;
        height:max(820px, 100svh) !important;
        overflow:hidden !important;
    }

    .hero-booking{
        display:grid !important;
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        top:auto !important;
        bottom:128px !important;
        width:calc(100% - 30px) !important;
        max-width:430px !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
        transform:translateX(-50%) !important;
        z-index:1000 !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .hero-booking .booking-field{
        display:block !important;
        min-height:50px !important;
    }

    .hero-booking .booking-trigger{
        display:block !important;
        min-height:50px !important;
        padding:5px 34px 7px 0 !important;
    }

    .hero-booking .booking-label{
        margin-bottom:7px !important;
        font-size:11px !important;
        letter-spacing:1.3px !important;
    }

    .hero-booking .booking-value{
        font-size:11px !important;
        letter-spacing:.9px !important;
        line-height:1.25 !important;
        white-space:normal !important;
    }

    .hero-booking .booking-trigger::after{
        top:30px !important;
        right:3px !important;
    }

    .hero-booking .booking-submit{
        display:flex !important;
        width:100% !important;
        height:42px !important;
        margin:0 !important;
    }

    .hero-dots{
        bottom:88px !important;
        z-index:70 !important;
    }

    .hero-ota-ratings{
        height:76px !important;
        z-index:65 !important;
    }

    .ota-rating-item strong,
    .ota-rating-google strong{
        font-family:"Americana", Georgia, 'Times New Roman', serif !important;
        font-size:16px !important;
        letter-spacing:1.3px !important;
        line-height:1 !important;
    }

    .ota-rating-google strong{
        font-size:14px !important;
    }

    .ota-rating-item span{
        font-size:8px !important;
        letter-spacing:1px !important;
        line-height:1.15 !important;
    }
}

@media (max-width: 390px){
    .hero,
    .hero-slider{
        min-height:800px !important;
        height:max(800px, 100svh) !important;
    }

    .hero-booking{
        bottom:124px !important;
        gap:10px !important;
    }

    .hero-booking .booking-field,
    .hero-booking .booking-trigger{
        min-height:48px !important;
    }

    .hero-booking .booking-submit{
        height:40px !important;
    }
}

/* =========================================================
   MOBILE ONLY - HIDE BOOKING FORM COMPLETELY
   Request: trên điện thoại ẩn hoàn toàn booking form
========================================================= */
@media (max-width: 767px){
    .hero-booking{
        display:none !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .hero,
    .hero-slider{
        min-height:650px !important;
        height:100svh !important;
    }

    .hero-dots{
        bottom:96px !important;
        z-index:70 !important;
    }

    .hero-ota-ratings{
        height:76px !important;
        z-index:65 !important;
    }
}

@media (max-width: 390px){
    .hero,
    .hero-slider{
        min-height:620px !important;
        height:100svh !important;
    }
}

/* =========================================================
   BOOK NOW BUTTON - TRANSPARENT DEFAULT / BACKGROUND ON HOVER
   - Default: fully transparent background
   - Hover: visible brand-gold background only on hover
========================================================= */
.hero-booking .booking-submit,
.hero-booking .booking-submit:link,
.hero-booking .booking-submit:visited,
.hero-booking .booking-submit:not(:hover),
.hero-booking .booking-submit:focus:not(:hover),
.hero-booking .booking-submit:active:not(:hover){
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    border:1px solid rgba(255,255,255,.72) !important;
    color:#fff !important;
}

.hero-booking .booking-submit:hover,
.hero-booking .booking-submit:focus-visible{
    background:rgba(196,143,58,.92) !important;
    background-color:rgba(196,143,58,.92) !important;
    background-image:none !important;
    box-shadow:none !important;
    border-color:rgba(196,143,58,.92) !important;
    color:#fff !important;
    transform:translateY(-3px) !important;
}