:root{
    --bg:#07101f;
    --bg2:#091426;
    --bg3:#0d192c;

    --card:#0b1729;

    --gold:#e6bd5d;
    --gold2:#c9902f;

    --text:#ffffff;
    --muted:#99a4b6;

    --line:rgba(255,255,255,.09);

    --green:#2dc566;
    --blue:#1486ff;
    --red:#d74040;

    --shadow:0 20px 55px rgba(0,0,0,.38);
}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



html{
    scroll-behavior:smooth;
}



body{
    font-family:'Inter',sans-serif;

    background:
        radial-gradient(
            circle at top,
            #0c1930 0,
            #07101f 38%,
            #050c18 100%
        );

    color:var(--text);

    line-height:1.6;
}



body::-webkit-scrollbar{
    width:8px;
}



body::-webkit-scrollbar-track{
    background:#040b14;
}



body::-webkit-scrollbar-thumb{
    background:#26344a;
    border-radius:20px;
}



img{
    max-width:100%;
    display:block;
}



a{
    text-decoration:none;
    color:inherit;
}



button,
input,
select{
    font:inherit;
}



.container{
    width:min(1240px,calc(100% - 36px));
    margin:auto;
}



/* HEADER */

.main-header{

    height:72px;

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(5,12,24,.95);

    backdrop-filter:blur(16px);

    border-bottom:1px solid var(--line);
}



.header-inner{

    height:72px;

    display:flex;

    align-items:center;

    gap:35px;
}



.logo{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:175px;
}



.logo-icon{

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    color:var(--gold);

    font-size:28px;
}



.logo-text{

    line-height:1.03;
}



.logo-text span{

    display:block;

    font-family:'Montserrat';

    font-weight:700;

    font-size:15px;

    color:#fff;
}



.logo-text strong{

    font-family:'Montserrat';

    font-size:17px;

    color:var(--gold);
}



.main-menu{

    display:flex;

    align-items:center;

    gap:3px;

    flex:1;
}



.main-menu>a,
.menu-dropdown>button{

    border:0;

    background:none;

    color:#f1f3f7;

    font-size:11px;

    font-weight:700;

    padding:27px 13px;

    cursor:pointer;

    transition:.25s;
}



.main-menu>a:hover,
.menu-dropdown>button:hover{

    color:var(--gold);
}



.menu-dropdown{

    position:relative;
}



.menu-dropdown-box{

    position:absolute;

    top:65px;

    left:0;

    width:210px;

    padding:8px;

    background:#0c1729;

    border:1px solid var(--line);

    border-radius:10px;

    box-shadow:var(--shadow);

    opacity:0;

    visibility:hidden;

    transform:translateY(8px);

    transition:.22s;
}



.menu-dropdown:hover .menu-dropdown-box{

    opacity:1;

    visibility:visible;

    transform:none;
}



.menu-dropdown-box a{

    display:block;

    padding:10px 12px;

    border-radius:7px;

    color:#c9d0dc;

    font-size:12px;
}



.menu-dropdown-box a:hover{

    background:#111f35;

    color:var(--gold);
}



.header-right{

    display:flex;

    align-items:center;

    gap:14px;
}



.header-phone{

    display:flex;

    align-items:center;

    gap:7px;

    color:#ffe1a0;

    font-size:11px;

    font-weight:700;

    white-space:nowrap;
}



.header-book-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:112px;

    height:38px;

    border-radius:5px;

    background:linear-gradient(
        135deg,
        #f0ca70,
        #c9902f
    );

    color:#131313;

    font-size:11px;

    font-weight:800;

    transition:.2s;
}



.header-book-btn:hover{

    transform:translateY(-1px);

    filter:brightness(1.06);
}



.mobile-menu-btn{

    display:none;

    margin-left:auto;

    width:42px;
    height:42px;

    border:1px solid var(--line);

    border-radius:8px;

    color:#fff;

    background:#0c1728;
}



/* HERO */

.home-hero{

    min-height:540px;

    position:relative;

    background:
        linear-gradient(
            rgba(3,9,20,.54),
            rgba(3,9,20,.94)
        ),
        radial-gradient(
            circle at center,
            #162b4e,
            #07101f
        );

    background-size:cover;

    background-position:center;

    border-bottom:1px solid var(--line);
}



.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(5,10,23,.55),
            transparent 50%,
            rgba(5,10,23,.55)
        );
}



.home-hero-inner{

    min-height:540px;

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:center;
}



.hero-content{

    width:100%;

    max-width:920px;

    text-align:center;
}



.hero-script{

    font-family:Georgia,serif;

    font-style:italic;

    font-size:31px;

    color:var(--gold);

    margin-bottom:6px;
}



.hero-content h1{

    font-family:'Montserrat';

    font-size:49px;

    line-height:1.06;

    letter-spacing:-1px;

    font-weight:800;
}



.hero-content h1 span{

    display:block;
}



.hero-content>p{

    margin:13px auto 25px;

    max-width:510px;

    color:#e5e9f0;

    font-size:13px;
}



.home-search{

    width:100%;

    max-width:800px;

    margin:auto;

    display:grid;

    grid-template-columns:180px 1fr 155px;

    padding:6px;

    background:#f8fafc;

    border-radius:7px;

    box-shadow:
        0 17px 50px rgba(0,0,0,.35);
}



.home-search select,
.home-search input{

    height:46px;

    border:0;

    outline:0;

    color:#555;

    padding:0 13px;

    background:#fff;
}



.home-search select{

    border-right:1px solid #e4e6e9;
}



.home-search button{

    border:0;

    border-radius:4px;

    background:linear-gradient(
        135deg,
        #f2cc75,
        #c99334
    );

    font-size:12px;

    font-weight:800;

    color:#171717;

    cursor:pointer;
}



.hero-benefits{

    margin-top:35px;

    padding-top:24px;

    border-top:1px solid rgba(255,255,255,.12);

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;
}



.benefit-item{

    display:flex;

    align-items:center;

    gap:12px;

    text-align:left;
}



.benefit-icon{

    width:38px;
    height:38px;

    flex:0 0 auto;

    display:grid;

    place-items:center;

    border:1px solid var(--gold);

    border-radius:50%;

    color:var(--gold);

    font-size:17px;
}



.benefit-item strong{

    display:block;

    font-size:11px;

    margin-bottom:2px;
}



.benefit-item span{

    display:block;

    color:#9ca7b9;

    font-size:9px;
}



/* HOME SECTION */

.home-section{

    padding:62px 0;
}



.section-title-center{

    text-align:center;

    margin-bottom:27px;
}



.section-title-center h2{

    color:var(--gold);

    font-family:'Montserrat';

    font-size:22px;

    font-weight:800;
}



.section-title-center p{

    margin-top:5px;

    font-size:11px;

    color:#a5afbf;
}



/* AREA */

.area-scroll{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:16px;
}



.area-image-card{

    position:relative;

    height:205px;

    border-radius:5px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.13);

    background:#101b2d;

    transition:.3s;
}



.area-image-card:hover{

    transform:translateY(-6px);

    border-color:rgba(230,189,93,.48);

    box-shadow:0 22px 45px rgba(0,0,0,.32);
}



.area-image{

    position:absolute;

    inset:0;
}



.area-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;
}



.area-image-card:hover img{

    transform:scale(1.07);
}



.area-image-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(3,8,18,.97),
            rgba(3,8,18,.07) 65%
        );
}



.area-placeholder{

    width:100%;

    height:100%;

    display:grid;

    place-items:center;

    background:
        radial-gradient(
            circle,
            rgba(228,183,85,.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #14213a,
            #091221
        );
}



.area-placeholder span{

    font-size:54px;

    color:rgba(230,189,93,.25);
}



.area-card-name{

    position:absolute;

    left:0;
    right:0;
    bottom:15px;

    text-align:center;

    z-index:3;
}



.area-card-name strong{

    display:block;

    font-size:13px;
}



.area-card-name span{

    color:var(--gold);

    font-size:9px;
}



/* VENUE */

.venue-home-section{

    border-top:1px solid rgba(255,255,255,.04);
}



.home-tabs{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    margin-bottom:23px;
}



.home-tabs button{

    padding:8px 17px;

    border-radius:99px;

    border:1px solid rgba(255,255,255,.08);

    background:#0a1424;

    color:#b3bdcb;

    font-size:10px;
}



.home-tabs button.active{

    background:var(--gold);

    color:#161616;

    font-weight:800;
}



.karaoke-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:14px;
}



.karaoke-card{

    overflow:hidden;

    border-radius:5px;

    background:#0a1526;

    border:1px solid rgba(255,255,255,.09);

    transition:.28s;
}



.karaoke-card:hover{

    transform:translateY(-5px);

    border-color:rgba(230,189,93,.37);

    box-shadow:0 20px 40px rgba(0,0,0,.32);
}



.karaoke-card-image{

    position:relative;

    display:block;

    height:155px;

    overflow:hidden;

    background:#142033;
}



.karaoke-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;
}



.karaoke-card:hover img{

    transform:scale(1.06);
}



.card-label{

    position:absolute;

    top:7px;
    left:7px;

    padding:5px 7px;

    border-radius:4px;

    background:#e8bd58;

    color:#171717;

    font-size:8px;

    font-weight:800;
}



.venue-image-placeholder{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:
        radial-gradient(
            circle,
            rgba(216,171,77,.18),
            transparent 35%
        ),
        #101c30;
}



.venue-image-placeholder span{

    color:#9ca8ba;

    font-size:9px;

    letter-spacing:2px;
}



.venue-image-placeholder strong{

    color:var(--gold);

    font-size:19px;
}



.karaoke-card-body{

    padding:12px;
}



.karaoke-title-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;
}



.karaoke-title-row h3{

    min-width:0;

    font-size:12px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}



.rating{

    color:#f2c75f;

    font-size:9px;

    white-space:nowrap;
}



.karaoke-location{

    margin-top:5px;

    color:#929dae;

    font-size:9px;
}



.karaoke-price{

    margin-top:8px;

    color:var(--gold);

    font-size:14px;

    font-weight:800;
}



.karaoke-price span{

    color:#c4cad2;

    font-size:9px;

    font-weight:400;
}



.center-button{

    text-align:center;

    margin-top:27px;
}



.gold-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:285px;

    height:43px;

    background:linear-gradient(
        135deg,
        #f0ca72,
        #c99335
    );

    border-radius:4px;

    color:#151515;

    font-size:10px;

    font-weight:800;

    transition:.2s;
}



.gold-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(193,139,44,.2);
}



/* AREA PAGE */

.area-page-header,
.search-page,
.venue-page{

    min-height:700px;

    padding:24px 0 70px;
}



.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    color:#7f8a9e;

    font-size:9px;

    margin-bottom:22px;
}



.breadcrumb a:hover{

    color:var(--gold);
}



.breadcrumb strong{

    color:#d3d7df;
}



.area-page-header h1,
.search-heading h1{

    font-family:'Montserrat';

    font-size:29px;

    margin-bottom:4px;
}



.area-page-header> .container > p,
.search-heading p{

    color:#a0aaba;

    font-size:11px;
}



.area-banner{

    margin-top:26px;

    height:175px;

    overflow:hidden;

    border-radius:5px;

    border:1px solid var(--line);
}



.area-banner img{

    width:100%;

    height:100%;

    object-fit:cover;
}



.area-banner-empty{

    display:grid;

    place-items:center;

    background:
        radial-gradient(
            circle,
            rgba(216,171,77,.18),
            transparent 35%
        ),
        #101c30;
}



.area-banner-empty strong{

    font-size:34px;

    color:var(--gold);
}



.area-filter{

    margin:17px 0;

    display:grid;

    grid-template-columns:
        180px
        180px
        1fr
        85px;

    gap:8px;
}



.area-filter select,
.area-filter input{

    height:39px;

    padding:0 12px;

    border:1px solid rgba(255,255,255,.09);

    outline:none;

    border-radius:4px;

    background:#0b1628;

    color:#cbd2dc;

    font-size:10px;
}



.area-filter input::placeholder{

    color:#647084;
}



.area-filter button{

    border:0;

    border-radius:4px;

    background:var(--gold);

    color:#141414;

    font-size:10px;

    font-weight:800;

    cursor:pointer;
}



.area-karaoke-grid{

    grid-template-columns:repeat(4,1fr);
}



/* VENUE DETAIL */

.venue-top-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:22px;
}



.venue-gallery{

    display:grid;

    grid-template-columns:1fr 92px;

    gap:8px;
}



.venue-main-image{

    height:380px;

    overflow:hidden;

    border-radius:5px;

    border:1px solid var(--line);

    background:#111a2b;
}



.venue-main-image img{

    width:100%;

    height:100%;

    object-fit:cover;
}



.venue-big-placeholder{

    min-height:380px;
}



.venue-thumb-list{

    display:flex;

    flex-direction:column;

    gap:8px;

    overflow:hidden;
}



.venue-thumb{

    position:relative;

    width:100%;

    height:88px;

    padding:0;

    border:1px solid var(--line);

    border-radius:4px;

    overflow:hidden;

    cursor:pointer;

    background:#111827;
}



.venue-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;
}



.venue-thumb span{

    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    color:white;

    background:rgba(4,10,22,.55);

    font-weight:800;
}



.venue-information{

    padding:5px 0;
}



.venue-title-line{

    display:flex;

    align-items:center;

    gap:12px;
}



.venue-title-line h1{

    font-family:'Montserrat';

    font-size:28px;
}



.venue-popular{

    padding:4px 8px;

    border-radius:4px;

    background:var(--gold);

    color:#161616;

    font-size:8px;

    font-weight:800;
}



.venue-rating-row{

    margin:7px 0 18px;

    display:flex;

    align-items:center;

    gap:5px;

    font-size:10px;

    color:#9fa9b9;
}



.stars{

    color:#f2bf48;

    font-size:14px;
}



.venue-info-list{

    border-top:1px solid var(--line);
}



.venue-info-list>div{

    min-height:52px;

    display:grid;

    grid-template-columns:
        28px
        1fr
        auto;

    align-items:center;

    gap:8px;

    border-bottom:1px solid var(--line);
}



.venue-info-icon{

    color:var(--gold);

    font-size:15px;
}



.venue-info-list p{

    font-size:10px;
}



.venue-info-list a,
.open-label{

    color:var(--gold);

    font-size:9px;
}



.venue-book-price{

    margin-top:17px;

    padding:17px;

    text-align:center;

    border:1px solid rgba(230,189,93,.28);

    background:#091426;
}



.venue-book-price>span{

    display:block;

    color:#9aa4b3;

    font-size:9px;
}



.venue-book-price strong{

    display:block;

    margin:2px 0 10px;

    font-size:22px;
}



.venue-book-price strong small{

    font-size:11px;
}



.venue-book-price>a{

    display:inline-flex;

    height:37px;

    min-width:160px;

    align-items:center;

    justify-content:center;

    border-radius:4px;

    background:var(--gold);

    color:#171717;

    font-size:9px;

    font-weight:800;
}



.venue-help{

    display:block;

    margin-top:7px;

    color:#d2ab56;
}



.venue-mini-info{

    width:64%;

    margin-top:13px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;
}



.venue-mini-info div{

    min-height:67px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    background:#111c2e;

    border:1px solid rgba(255,255,255,.05);

    border-radius:4px;
}



.venue-mini-info strong{

    font-size:13px;
}



.venue-mini-info span{

    color:#8893a4;

    font-size:9px;
}



.venue-tabs{

    margin-top:25px;

    display:flex;

    align-items:center;

    gap:3px;

    border-bottom:1px solid var(--line);
}



.venue-tabs a{

    padding:13px 18px;

    font-size:9px;

    font-weight:700;

    color:#c4cbd7;

    border-bottom:2px solid transparent;
}



.venue-tabs a:first-child{

    border-bottom-color:var(--gold);

    color:var(--gold);
}



.venue-tabs a:hover{

    color:var(--gold);
}



.venue-content-grid{

    margin-top:15px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:28px;
}



.venue-description section{

    padding:0 0 22px;

    margin-bottom:20px;

    border-bottom:1px solid var(--line);
}



.venue-description h2{

    color:var(--gold);

    font-size:13px;

    margin-bottom:8px;
}



.venue-description p{

    color:#c0c7d2;

    font-size:10px;

    line-height:1.8;
}



.venue-check-list{

    list-style:none;

    display:grid;

    gap:6px;
}



.venue-check-list li{

    color:#c3cad5;

    font-size:10px;
}



.venue-check-list li::before{

    content:'✓';

    margin-right:7px;

    color:var(--gold);
}



.venue-map{

    overflow:hidden;

    height:280px;

    border:1px solid var(--line);

    border-radius:4px;
}



.venue-map iframe{

    width:100% !important;

    height:100% !important;

    border:0 !important;
}



/* SEARCH */

.search-heading{

    margin-bottom:20px;
}



.search-filter{

    grid-template-columns:
        220px
        1fr
        130px;
}



/* FOOTER */

.main-footer{

    background:#030914;

    border-top:1px solid var(--line);

    padding:48px 0 20px;
}



.footer-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr;

    gap:50px;
}



.footer-logo{

    margin-bottom:15px;
}



.footer-grid p{

    max-width:430px;

    color:#7f899a;

    font-size:11px;
}



.footer-grid h4{

    color:var(--gold);

    font-size:11px;

    margin-bottom:12px;
}



.footer-grid>div>a:not(.logo){

    display:block;

    color:#919bad;

    font-size:10px;

    margin:7px 0;
}



.footer-grid>div>a:hover{

    color:var(--gold);
}



.footer-bottom{

    margin-top:32px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.06);

    color:#5f6b7d;

    font-size:9px;
}



/* FLOAT BUTTON */

.floating-contact{

    position:fixed;

    right:20px;

    bottom:25px;

    z-index:999;

    display:flex;

    flex-direction:column;

    gap:9px;
}



.floating-contact a,
.floating-contact button{

    width:43px;
    height:43px;

    border-radius:50%;

    display:grid;

    place-items:center;

    border:0;

    color:white;

    cursor:pointer;

    box-shadow:
        0 7px 20px rgba(0,0,0,.3);

    transition:.25s;
}



.floating-contact a:hover,
.floating-contact button:hover{

    transform:scale(1.08);
}



.floating-zalo{

    background:var(--blue);
}



.floating-zalo span{

    font-size:9px;

    font-weight:800;
}



.floating-phone{

    background:var(--green);

    font-size:17px;
}



.floating-top{

    background:var(--red);

    font-size:18px;
}



/* RESPONSIVE */

@media(max-width:1100px){

    .main-menu{
        gap:0;
    }

    .main-menu>a,
    .menu-dropdown>button{
        padding-left:8px;
        padding-right:8px;
    }

    .header-phone{
        display:none;
    }

    .area-scroll{
        grid-template-columns:repeat(3,1fr);
    }

    .karaoke-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .venue-top-grid{
        grid-template-columns:1fr;
    }

    .venue-mini-info{
        width:100%;
    }

}



@media(max-width:800px){

    .main-header{
        height:64px;
    }

    .header-inner{
        height:64px;
    }

    .main-menu{
        display:none;

        position:absolute;

        top:64px;

        left:15px;
        right:15px;

        background:#091426;

        border:1px solid var(--line);

        border-radius:9px;

        padding:10px;

        box-shadow:var(--shadow);

        flex-direction:column;

        align-items:stretch;
    }

    .main-menu.open{
        display:flex;
    }

    .main-menu>a,
    .menu-dropdown>button{
        width:100%;
        padding:12px;

        text-align:left;
    }

    .menu-dropdown-box{
        position:static;

        display:none;

        opacity:1;
        visibility:visible;

        transform:none;

        width:100%;

        box-shadow:none;
    }

    .menu-dropdown:hover .menu-dropdown-box{
        display:block;
    }

    .mobile-menu-btn{
        display:block;
    }

    .header-book-btn{
        display:none;
    }

    .logo{
        min-width:auto;
    }

    .home-hero,
    .home-hero-inner{
        min-height:500px;
    }

    .hero-script{
        font-size:24px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .home-search{
        grid-template-columns:1fr;
    }

    .home-search select{
        border-right:0;

        border-bottom:1px solid #e5e5e5;
    }

    .home-search button{
        height:44px;
    }

    .hero-benefits{
        grid-template-columns:repeat(2,1fr);
    }

    .area-scroll{
        grid-template-columns:repeat(2,1fr);
    }

    .karaoke-grid,
    .area-karaoke-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .area-filter,
    .search-filter{
        grid-template-columns:1fr;
    }

    .venue-gallery{
        grid-template-columns:1fr;
    }

    .venue-thumb-list{
        flex-direction:row;
        overflow:auto;
    }

    .venue-thumb{
        width:80px;
        min-width:80px;
    }

    .venue-mini-info{
        grid-template-columns:repeat(2,1fr);
    }

    .venue-tabs{
        overflow:auto;
    }

    .venue-tabs a{
        white-space:nowrap;
    }

    .venue-content-grid{
        grid-template-columns:1fr;
    }

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

}



@media(max-width:520px){

    .container{
        width:min(100% - 24px,1240px);
    }

    .logo-icon{
        width:34px;
        height:34px;
    }

    .logo-text span{
        font-size:12px;
    }

    .logo-text strong{
        font-size:14px;
    }

    .home-hero,
    .home-hero-inner{
        min-height:520px;
    }

    .hero-content h1{
        font-size:32px;
    }

    .hero-content>p{
        font-size:11px;
    }

    .hero-benefits{
        grid-template-columns:1fr 1fr;

        gap:14px;
    }

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

    .area-scroll{
        display:flex;

        overflow-x:auto;

        padding-bottom:10px;
    }

    .area-image-card{
        min-width:140px;

        height:185px;
    }

    .karaoke-grid,
    .area-karaoke-grid{
        grid-template-columns:1fr 1fr;

        gap:9px;
    }

    .karaoke-card-image{
        height:125px;
    }

    .karaoke-card-body{
        padding:9px;
    }

    .karaoke-title-row h3{
        font-size:10px;
    }

    .karaoke-price{
        font-size:12px;
    }

    .area-page-header h1,
    .search-heading h1{
        font-size:24px;
    }

    .area-banner{
        height:130px;
    }

    .venue-title-line h1{
        font-size:23px;
    }

    .venue-main-image{
        height:270px;
    }

    .venue-mini-info div{
        min-height:58px;
    }

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

}

/* =========================================
   VENUE DETAIL TABS
========================================= */

.venue-tabs-new{
    margin-top:28px;

    display:flex;

    align-items:center;

    gap:6px;

    border-bottom:1px solid rgba(255,255,255,.09);

    overflow-x:auto;

    scrollbar-width:none;
}


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


.venue-tab-btn{
    position:relative;

    flex:0 0 auto;

    height:52px;

    padding:0 24px;

    border:0;

    background:transparent;

    color:#aab4c3;

    font-size:10px;

    font-weight:800;

    letter-spacing:.3px;

    cursor:pointer;

    transition:
        color .25s ease,
        background .25s ease;
}


.venue-tab-btn:hover{
    color:#e7bd5d;
}


.venue-tab-btn::after{
    content:"";

    position:absolute;

    height:2px;

    left:50%;
    right:50%;
    bottom:-1px;

    background:#e7bd5d;

    transition:.28s ease;
}


.venue-tab-btn.active{
    color:#e7bd5d;
}


.venue-tab-btn.active::after{
    left:0;
    right:0;
}



/* CONTENT */

.venue-tabs-content{
    min-height:280px;
}


.venue-tab-panel{
    display:none;

    padding:29px 0 34px;

    animation:
        venueTabShow .35s ease;
}


.venue-tab-panel.active{
    display:block;
}


@keyframes venueTabShow{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }

}


.tab-panel-head{
    max-width:850px;

    margin-bottom:24px;
}


.tab-small-title{
    display:block;

    margin-bottom:7px;

    color:#dba947;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;
}


.tab-panel-head h2{
    color:#e7bd5d;

    font-size:17px;

    line-height:1.4;

    margin-bottom:9px;
}


.tab-panel-head p{
    color:#8d99aa;

    font-size:11px;

    line-height:1.75;
}



/* INTRO */

.intro-content{
    max-width:950px;
}


.intro-content>p{
    color:#c2cad6;

    font-size:11px;

    line-height:1.9;
}


.intro-info-grid{
    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:25px;
}


.intro-info-item{
    min-height:88px;

    padding:16px;

    border-radius:6px;

    background:#0b1728;

    border:1px solid rgba(255,255,255,.07);
}


.intro-info-item span{
    display:block;

    margin-bottom:7px;

    color:#667387;

    font-size:8px;

    font-weight:700;

    letter-spacing:.7px;
}


.intro-info-item strong{
    color:#e7ebf1;

    font-size:11px;
}



/* PRICE */

.price-box-main{
    max-width:720px;

    display:flex;

    align-items:center;

    gap:20px;

    padding:23px;

    border-radius:8px;

    border:1px solid rgba(230,189,93,.20);

    background:
        linear-gradient(
            135deg,
            #0d192b,
            #091321
        );
}


.price-box-left{
    flex:1;
}


.price-box-left span{
    display:block;

    color:#748095;

    font-size:8px;

    letter-spacing:1px;

    margin-bottom:5px;
}


.price-box-left strong{
    color:#e8bd5a;

    font-size:26px;
}


.price-box-left small{
    color:#929dad;

    font-size:10px;
}


.price-arrow{
    color:#566174;

    font-size:22px;
}


.price-note{
    max-width:720px;

    margin-top:18px;

    display:grid;

    gap:9px;
}


.price-note>div{
    display:flex;

    align-items:center;

    gap:9px;
}


.price-note span{
    color:#e4b958;
}


.price-note p{
    color:#9ca6b5;

    font-size:10px;
}


.tab-contact-btn{
    margin-top:23px;

    display:inline-flex;

    min-height:40px;

    align-items:center;

    justify-content:center;

    padding:0 18px;

    border-radius:5px;

    background:
        linear-gradient(
            135deg,
            #e9c66f,
            #c58c32
        );

    color:#151515;

    font-size:9px;

    font-weight:800;

    transition:.2s;
}


.tab-contact-btn:hover{
    transform:translateY(-2px);
}



/* ROOM */

.room-info-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;
}


.room-info-card{
    padding:22px;

    min-height:175px;

    border:1px solid rgba(255,255,255,.07);

    border-radius:8px;

    background:
        linear-gradient(
            145deg,
            #0c182a,
            #091321
        );
}


.room-icon{
    width:38px;
    height:38px;

    margin-bottom:20px;

    display:grid;

    place-items:center;

    border:1px solid rgba(229,187,92,.25);

    border-radius:50%;

    color:#e5bb5c;
}


.room-info-card>span{
    color:#68758a;

    font-size:8px;

    font-weight:700;
}


.room-info-card strong{
    display:block;

    margin:5px 0;

    color:#fff;

    font-size:19px;
}


.room-info-card p{
    color:#778396;

    font-size:9px;
}


.room-gallery-title{
    margin:28px 0 13px;
}


.room-gallery-title h3{
    color:#e4b958;

    font-size:13px;
}


.room-gallery-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;
}


.room-gallery-item{
    height:170px;

    overflow:hidden;

    border-radius:6px;

    border:1px solid rgba(255,255,255,.08);
}


.room-gallery-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s;
}


.room-gallery-item:hover img{
    transform:scale(1.05);
}



/* PROMOTION */

.promotion-grid{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:10px;

    max-width:900px;
}


.promotion-card{
    display:grid;

    grid-template-columns:43px 1fr;

    gap:13px;

    align-items:start;

    padding:17px;

    border-radius:7px;

    border:1px solid rgba(229,187,92,.13);

    background:#0c1727;
}


.promotion-number{
    width:39px;
    height:39px;

    border-radius:7px;

    display:grid;

    place-items:center;

    color:#e5bb5c;

    background:rgba(229,187,92,.08);

    font-size:10px;

    font-weight:800;
}


.promotion-card strong{
    color:#e7bd5d;

    font-size:10px;
}


.promotion-card p{
    margin-top:3px;

    color:#a3adbb;

    font-size:10px;

    line-height:1.6;
}



/* AMENITIES */

.amenities-new-grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:10px;
}


.amenity-new-card{
    min-height:78px;

    display:grid;

    grid-template-columns:34px 1fr;

    gap:11px;

    align-items:center;

    padding:14px;

    border-radius:7px;

    background:#0b1728;

    border:1px solid rgba(255,255,255,.07);
}


.amenity-check{
    width:31px;
    height:31px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:rgba(229,187,92,.08);

    color:#e5bb5c;
}


.amenity-new-card strong{
    display:block;

    color:#e3e7ed;

    font-size:10px;
}


.amenity-new-card p{
    margin-top:2px;

    color:#657287;

    font-size:8px;
}



/* EMPTY */

.tab-empty{
    max-width:600px;

    padding:35px;

    text-align:center;

    border-radius:8px;

    border:1px dashed rgba(255,255,255,.10);

    background:#091422;
}


.tab-empty>span{
    color:#e7bd5d;

    font-size:22px;
}


.tab-empty h3{
    margin:8px 0 4px;

    font-size:13px;
}


.tab-empty p{
    color:#748095;

    font-size:10px;
}



/* MAP */

.venue-location-bottom{
    padding:30px 0;

    border-top:1px solid rgba(255,255,255,.08);
}


.venue-location-head{
    margin-bottom:14px;
}


.venue-location-head span{
    color:#d8aa4d;

    font-size:8px;

    font-weight:800;

    letter-spacing:1px;
}


.venue-location-head h2{
    margin:5px 0;

    font-size:17px;

    color:#fff;
}


.venue-location-head p{
    color:#778396;

    font-size:10px;
}


.venue-map-new{
    height:330px;

    overflow:hidden;

    border-radius:7px;

    border:1px solid rgba(255,255,255,.08);
}


.venue-map-new iframe{
    width:100% !important;
    height:100% !important;

    border:0 !important;
}



/* MOBILE */

@media(max-width:800px){

    .venue-tab-btn{
        height:47px;

        padding:0 15px;
    }


    .intro-info-grid{
        grid-template-columns:repeat(2,1fr);
    }


    .room-info-grid{
        grid-template-columns:1fr;
    }


    .room-gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }


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


    .amenities-new-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:520px){

    .venue-tabs-new{
        margin-left:-12px;
        margin-right:-12px;

        padding-left:12px;
    }


    .venue-tab-btn{
        padding:0 13px;

        font-size:9px;
    }


    .venue-tab-panel{
        padding-top:22px;
    }


    .intro-info-grid{
        grid-template-columns:1fr 1fr;
    }


    .intro-info-item{
        padding:12px;
    }


    .price-box-main{
        display:grid;

        gap:12px;
    }


    .price-arrow{
        transform:rotate(90deg);

        font-size:16px;
    }


    .room-gallery-grid{
        grid-template-columns:1fr 1fr;
    }


    .room-gallery-item{
        height:120px;
    }


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


    .venue-map-new{
        height:250px;
    }

}



/* =========================================================
   BOOKINGKARAOKE MOBILE V3
   FIX: khu vực cuộn ngang không giật, search mobile gọn
   Giữ nguyên HTML + toàn bộ cấu trúc cũ
========================================================= */

/* Chỉ chặn phần tử con làm rộng viewport */
body{
    overflow-x:clip;
}

/* =========================================================
   KHU VỰC NỔI BẬT
========================================================= */

.area-scroll{
    display:flex !important;
    flex-wrap:nowrap !important;
    grid-template-columns:none !important;

    width:100% !important;
    max-width:100% !important;

    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    margin:0 !important;
    padding:4px 0 12px !important;

    /* bỏ snap để không tự giật vị trí sau khi vuốt */
    scroll-snap-type:none !important;
    scroll-behavior:auto !important;

    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;

    scrollbar-width:none;
}

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

/* Desktop: card giữ đúng hàng, nếu nhiều thì kéo ngang */
.area-image-card{
    flex:0 0 186px !important;

    width:186px !important;
    min-width:186px !important;
    max-width:186px !important;

    height:205px !important;

    margin:0 !important;

    transform:none !important;

    transition:
        border-color .25s ease,
        box-shadow .25s ease !important;
}

.area-image-card:hover{
    transform:none !important;

    border-color:rgba(230,189,93,.42) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.24) !important;
}

/* chỉ zoom ảnh, card không di chuyển */
.area-image img{
    transform:scale(1) !important;

    transition:
        transform .35s ease,
        filter .35s ease !important;
}

.area-image-card:hover .area-image img{
    transform:scale(1.025) !important;
    filter:brightness(1.03);
}


/* =========================================================
   SEARCH TRANG CHỦ
========================================================= */

.home-search{
    background:#e8ecf1 !important;

    border:1px solid rgba(255,255,255,.48) !important;

    border-radius:9px !important;

    padding:6px !important;

    box-shadow:
        0 14px 34px rgba(0,0,0,.24) !important;
}

.home-search select,
.home-search input{
    background:#f2f4f7 !important;

    color:#344054 !important;

    min-width:0 !important;

    border:0 !important;
    outline:0 !important;
}

.home-search select{
    border-right:1px solid #d4dae2 !important;
}

.home-search input::placeholder{
    color:#8c96a5 !important;
    opacity:1;
}

.home-search select:focus,
.home-search input:focus{
    background:#f8fafc !important;
}

.home-search button{
    border-radius:6px !important;

    background:
        linear-gradient(
            135deg,
            #ecc66e,
            #c99034
        ) !important;

    color:#161616 !important;

    box-shadow:none !important;
}


/* =========================================================
   SEARCH TRANG KHU VỰC + TÌM QUÁN
========================================================= */

.area-filter,
.search-filter{
    width:100% !important;
    max-width:100% !important;

    box-sizing:border-box !important;

    align-items:center !important;

    padding:7px !important;

    gap:7px !important;

    border-radius:9px !important;

    border:1px solid rgba(255,255,255,.07) !important;

    background:#0b1627 !important;
}

.area-filter select,
.area-filter input,
.search-filter select,
.search-filter input{
    min-width:0 !important;

    height:40px !important;

    padding:0 12px !important;

    border-radius:6px !important;

    border:1px solid rgba(255,255,255,.08) !important;

    background:#101d30 !important;

    color:#d6dde7 !important;

    outline:none !important;

    box-shadow:none !important;
}

.area-filter input::placeholder,
.search-filter input::placeholder{
    color:#758196 !important;
}

.area-filter select:focus,
.area-filter input:focus,
.search-filter select:focus,
.search-filter input:focus{
    border-color:rgba(230,189,93,.30) !important;

    background:#122137 !important;
}

.area-filter button,
.search-filter button{
    min-width:80px !important;

    height:40px !important;

    padding:0 15px !important;

    border:0 !important;

    border-radius:6px !important;

    background:
        linear-gradient(
            135deg,
            #e8c268,
            #c88f33
        ) !important;

    color:#151515 !important;

    font-size:9px !important;
    font-weight:800 !important;

    cursor:pointer !important;

    white-space:nowrap !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .area-image-card{
        flex-basis:178px !important;

        width:178px !important;
        min-width:178px !important;
        max-width:178px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    /* container không vượt màn hình */
    .container{
        width:calc(100% - 24px) !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* khu vực vuốt ngang */
    .area-scroll{
        display:flex !important;

        width:100% !important;

        gap:10px !important;

        padding:
            3px 0
            10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        scroll-snap-type:none !important;

        touch-action:pan-x pan-y;
    }

    .area-image-card{
        flex:0 0 158px !important;

        width:158px !important;
        min-width:158px !important;
        max-width:158px !important;

        height:188px !important;
    }

    /* search trang chủ */
    .home-search{
        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        max-width:100% !important;

        gap:5px !important;

        padding:5px !important;
    }

    .home-search select,
    .home-search input,
    .home-search button{
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        height:42px !important;

        border-radius:6px !important;
    }

    .home-search select{
        border-right:0 !important;
        border-bottom:0 !important;
    }

    /* filter trang con */
    .area-filter,
    .search-filter{
        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        gap:6px !important;

        padding:7px !important;
    }

    .area-filter select,
    .area-filter input,
    .area-filter button,
    .search-filter select,
    .search-filter input,
    .search-filter button{
        display:block !important;

        width:100% !important;

        max-width:100% !important;

        justify-self:stretch !important;

        height:40px !important;
    }

    /* tránh các khối con ép ngang */
    .venue-top-grid,
    .venue-gallery,
    .venue-information,
    .venue-content-grid,
    .venue-description,
    .karaoke-grid,
    .area-karaoke-grid{
        min-width:0 !important;
        max-width:100% !important;
    }

}


/* =========================================================
   MOBILE <= 520
========================================================= */

@media(max-width:520px){

    .container{
        width:calc(100% - 20px) !important;
    }

    /* chỉ khối này được cuộn ngang */
    .home-section{
        max-width:100%;
    }

    .area-scroll{
        width:100% !important;

        margin:0 !important;

        padding:
            2px 0
            9px !important;

        gap:9px !important;
    }

    .area-image-card{
        flex:0 0 143px !important;

        width:143px !important;
        min-width:143px !important;
        max-width:143px !important;

        height:180px !important;
    }

    .area-card-name{
        left:5px !important;
        right:5px !important;

        bottom:11px !important;
    }

    .area-card-name strong{
        font-size:12px !important;
    }

    .area-card-name span{
        font-size:8px !important;
    }

    .home-search{
        padding:5px !important;
    }

    .home-search select,
    .home-search input,
    .home-search button{
        height:40px !important;

        font-size:10px !important;
    }

    .area-filter,
    .search-filter{
        margin-left:0 !important;
        margin-right:0 !important;

        padding:6px !important;
    }

    .area-filter select,
    .area-filter input,
    .area-filter button,
    .search-filter select,
    .search-filter input,
    .search-filter button{
        height:39px !important;

        font-size:9px !important;
    }

    /* floating không gây tràn viewport */
    .floating-contact,
    .floating-contact-new,
    .bk-floating{
        right:10px !important;

        max-width:calc(100vw - 20px) !important;
    }

}


/* =========================================================
   360 / 375 / 390px
========================================================= */

@media(max-width:390px){

    .container{
        width:calc(100% - 16px) !important;
    }

    .area-image-card{
        flex:0 0 136px !important;

        width:136px !important;
        min-width:136px !important;
        max-width:136px !important;

        height:174px !important;
    }

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

    .hero-script{
        font-size:21px !important;
    }

}