body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f6f9fc;color:#14213d}
.page{max-width:1320px;margin:0 auto;padding:24px 16px 130px}
.hero{text-align:center;margin-bottom:18px}
.hero h1{margin:0;color:#1d66a6;font-size:38px;font-weight: bold;text-transform:uppercase}
.sub{color:#607080;margin-top:6px}
.layout{display:grid;grid-template-columns:330px 1fr;gap:18px}
.box,.right-panel{background:#fff;border:1px solid #dce7f2;border-radius:14px;padding:14px;margin-bottom:14px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.box-title{font-weight: bold;margin-bottom:12px}.month-title{display:flex;justify-content:space-between;align-items:center}
.month-btn{border:0;background:#1d66a6;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.input{width:100%;box-sizing:border-box;border:1px solid #dce7f2;border-radius:10px;padding:10px;margin-bottom:8px}
.calendar{width:100%;border-collapse:separate;border-spacing:4px}.calendar th{font-size:12px;color:#5c6c7c}
.calendar td{width:14.28%;height:58px;text-align:center}.calendar .day{width:100%;height:58px;border:1px solid #dbe4ee;border-radius:10px;background:#f3f6f9;color:#96a0aa;cursor:not-allowed}
.calendar .day.has-show{background:#fff100;color:#14213d;cursor:pointer;border-color:#e0c700}.calendar .day.active{outline:3px solid #1d66a6}
.calendar .day b{display:block;font-size:18px}.calendar .day span{display:block;font-size:11px}
.showtime-btn{width:100%;border:1px solid #dce7f2;background:#fff;border-radius:12px;padding:10px;margin-bottom:8px;text-align:left;cursor:pointer}
.showtime-btn b{display:block;font-size:18px;color:#b0122b}.showtime-btn span{font-size:12px;color:#5c6c7c}
.showtime-btn.active{background:#1d66a6;color:#fff}.showtime-btn.active b,.showtime-btn.active span{color:#fff}
.stage{width:380px;max-width:72%;margin:0 auto 18px;background:#fff100;color:#c82125;border:2px solid #f3d500;text-align:center;font-weight: bold;font-size:18px;padding:5px 12px}
.seat-map{overflow:auto;min-height:620px;padding:6px 0 22px}
.map-inner{min-width:1080px;width:1080px;margin:0 auto}
.ground-area{display:grid;grid-template-columns:250px 260px 260px 250px;gap:28px;align-items:start}
.side-block-wrap,.center-block-wrap{display:flex;flex-direction:column;gap:22px}
.block-row{display:flex;align-items:flex-start;gap:6px}
.row-labels{width:16px;display:grid;gap:2px;color:#b0122b;font-weight: bold;font-size:16px;line-height:1;text-align:center}
.row-labels span{height:18px;display:flex;align-items:center;justify-content:center}
.seat-block{display:grid;gap:2px}.seat-grid{display:grid;gap:2px}
.seat-grid.cols-8{grid-template-columns:repeat(8,24px)}.seat-grid.cols-9{grid-template-columns:repeat(9,24px)}.seat-grid.cols-10{grid-template-columns:repeat(10,24px)}.seat-grid.cols-18{grid-template-columns:repeat(18,24px)}
.seat{width:24px;height:18px;border:1px solid rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#11324d;cursor:pointer;user-select:none;position:relative;transition:transform .12s ease,box-shadow .12s ease,outline .12s ease,filter .12s ease}
.seat.available:hover{transform:scale(1.22);z-index:10;outline:2px solid #1a4f91;box-shadow:0 8px 18px rgba(0,0,0,.24);filter:brightness(1.05)}
.seat.locked{background:#f3f6f9!important;color:#96a0aa!important;cursor:not-allowed;opacity:.9}
.seat.locked:hover{transform:none;outline:none;box-shadow:none;filter:none}
.seat.selected{background:#ff8a00!important;color:#fff!important;border-color:#b95d00;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.seat.couple{box-shadow:inset 0 0 0 1px rgba(180,78,0,.75)}
.seat.couple-link-right:after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);z-index:30;width:10px;height:3px;border-radius:999px;background:#b0122b;box-shadow:0 1px 3px rgba(0,0,0,.22);pointer-events:none}
.seat.selected.couple-link-right:after{background:#ff8a00}
.zone-left{background:#fff235}.zone-center-left{background:#9ed8ef}.zone-center-right{background:#d7eb42}.zone-right{background:#ec85bd}.zone-balcony{background:#93d8c8}
.empty-seat{visibility:hidden;pointer-events:none}.column-seat{background:#ddd;color:#333;cursor:default;font-size:9px}.column-seat:hover{transform:none;outline:none;box-shadow:none}
.note-row{display:grid;grid-template-columns:250px 260px 260px 250px;gap:28px;margin:10px 0 8px;align-items:center;font-size:12px;color:#222}
.window-box,.audio-box{height:22px;width:92px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.window-box{background:#6bbbe6;color:#102b3f}.audio-box{background:#ff981f;color:#5a2100;width:128px}.caption{text-align:center;margin-top:2px;font-size:11px;color:#111}
.floor-label{width:250px;margin:12px auto 14px;background:#fff100;border:2px solid #f3d500;color:#c82125;text-align:center;font-weight: bold;font-size:18px;padding:3px 10px}
.balcony{margin-top:14px;position:relative}.balcony-top{display:grid;grid-template-columns:1fr 22px 22px 1fr;gap:3px;align-items:start;max-width:940px;margin:0 auto 22px}
.balcony-bottom{display:grid;grid-template-columns:1fr 22px 22px 1fr;gap:3px;align-items:end;max-width:520px;margin:0 auto}
.balcony .row-labels span{height:18px;font-size:12px}.black-area{background:#1f1f1f;min-height:132px;margin-top:-8px}
.balcony-bottom-wrap{display:grid;grid-template-columns:190px 1fr 190px;gap:0;max-width:940px;margin:0 auto;align-items:end}
.entrance{width:62px;height:36px;background:#62bce6;margin:8px auto 0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.booking-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(1080px,calc(100% - 24px));background:rgba(255,255,255,.98);border:1px solid #d8e2ec;border-radius:18px;box-shadow:0 14px 35px rgba(0,0,0,.14);padding:14px 16px;display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;z-index:200}
.muted{font-size:12px;color:#687887}.selected-text{font-weight: bold;color:#b0122b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:560px}.total{font-weight: bold;font-size:20px;color:#064b89;white-space:nowrap}
.btn{border:0;border-radius:999px;padding:11px 16px;font-weight: bold;cursor:pointer}.btn.primary,.primary{background:#1d66a6;color:#fff}.btn.danger,.danger{background:#c82125;color:#fff}.full{width:100%;margin-bottom:6px}
@media(max-width:900px){.layout{grid-template-columns:1fr}.booking-bar{grid-template-columns:1fr;position:sticky;bottom:0;transform:none;left:auto;width:100%;border-radius:14px 14px 0 0}}

.seat-tooltip{
    position:fixed;
    z-index:9999;
    pointer-events:none;
    background:#172033;
    color:#fff;
    padding:8px 10px;
    border-radius:8px;
    font-size:13px;
    line-height:1.35;
    box-shadow:0 10px 24px rgba(0,0,0,.25);
    opacity:0;
    transform:translateY(-100%);
    transition:opacity .08s ease;
    white-space:nowrap;
}
.seat-tooltip.show{opacity:1}
.seat-tooltip b{color:#ffe66d}
.selected-text{max-width:650px}

.calendar-note{margin-top:10px;padding:10px;border:1px dashed #ccd8e5;border-radius:10px;color:#667;font-size:13px;text-align:center;background:#fbfdff}


/* ===== Mobile seat zone chooser ===== */
.mobile-zone-tabs{
    position:sticky;
    top:0;
    z-index:80;
    background:rgba(255,255,255,.96);
    padding:8px 0 10px;
    margin-bottom:8px;
    overflow-x:auto;
    white-space:nowrap;
    border-bottom:1px solid #e1e8f0;
}
.mobile-zone-btn{
    border:1px solid #d2dfec;
    background:#fff;
    color:#1d4668;
    border-radius:999px;
    padding:8px 11px;
    margin:0 3px 4px 0;
    font-weight:800;
    font-size:12px;
    cursor:pointer;
}
.mobile-zone-btn.active{
    background:#1d66a6;
    border-color:#1d66a6;
    color:#fff;
}
.mobile-zone-title{
    display:none;
    font-weight: bold;
    color:#1d66a6;
    text-align:center;
    margin:0 0 8px;
    padding:6px 8px;
    border-radius:10px;
    background:#f2f7fc;
    border:1px solid #dce7f2;
}

@media(max-width:780px){
    .right-panel{
        padding:10px;
    }
    .seat-map{
        min-height:420px;
        overflow:auto;
        padding-bottom:90px;
        -webkit-overflow-scrolling:touch;
    }
    .map-inner{
        min-width:0;
        width:auto;
        margin:0 auto;
    }
    .ground-area{
        display:block;
    }
    .mobile-zone-section{
        width:max-content;
        max-width:none;
        margin:0 auto 16px;
        padding:8px;
        border:1px solid #e2ebf4;
        border-radius:14px;
        background:#fff;
        box-shadow:0 6px 16px rgba(0,0,0,.05);
    }
    .mobile-zone-title{
        display:block;
    }
    .side-block-wrap,.center-block-wrap{
        gap:14px;
    }
    .block-row{
        justify-content:center;
    }
    .note-row{
        display:none!important;
    }
    .floor-label{
        display:none!important;
    }
    .balcony{
        width:max-content;
        margin-left:auto;
        margin-right:auto;
    }
    .balcony-top{
        max-width:none;
        width:max-content;
    }
    .balcony-bottom-wrap{
        max-width:none;
        width:max-content;
        grid-template-columns:80px 1fr 80px;
    }
    .black-area{
        min-height:90px;
    }
    .booking-bar{
        width:100%;
        left:0;
        bottom:0;
        transform:none;
        border-radius:14px 14px 0 0;
    }
    .selected-text{
        max-width:100%;
        white-space:normal;
        line-height:1.35;
    }
}

/* Điện thoại rất nhỏ: thu nhẹ ghế để đỡ phải kéo ngang */
@media(max-width:420px){
    .seat{
        width:22px;
        height:17px;
        font-size:9px;
    }
    .seat-grid.cols-8{grid-template-columns:repeat(8,22px)}
    .seat-grid.cols-9{grid-template-columns:repeat(9,22px)}
    .seat-grid.cols-10{grid-template-columns:repeat(10,22px)}
    .seat-grid.cols-18{grid-template-columns:repeat(18,22px)}
    .row-labels span{
        height:17px;
    }
}


/* ===== Mobile CSS V2: gọn hơn, không che ghế, chia khu rõ hơn ===== */
@media(max-width:780px){
    html, body{
        overflow-x:hidden;
    }

    .ticket-booking-wrap,
    .booking-wrapper,
    .ticket-container,
    .booking-container{
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    .right-panel{
        padding:10px!important;
        overflow:hidden!important;
    }

    .stage{
        height:38px!important;
        line-height:38px!important;
        padding:0!important;
        margin:8px 0 10px!important;
        font-size:13px!important;
        border-radius:0!important;
        text-align:center!important;
    }

    .mobile-zone-tabs{
        display:block!important;
        position:sticky!important;
        top:0!important;
        z-index:120!important;
        background:#fff!important;
        padding:8px 4px 10px!important;
        margin:0 0 10px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        white-space:nowrap!important;
        border-bottom:1px solid #dde7f1!important;
        -webkit-overflow-scrolling:touch;
    }

    .mobile-zone-btn{
        display:inline-block!important;
        min-width:auto!important;
        height:34px!important;
        line-height:32px!important;
        padding:0 12px!important;
        margin:0 4px 0 0!important;
        border-radius:18px!important;
        font-size:12px!important;
        font-weight:700!important;
        vertical-align:top!important;
    }

    .seat-map{
        width:100%!important;
        max-width:100%!important;
        min-height:0!important;
        max-height:none!important;
        overflow:visible!important;
        padding:0!important;
        margin:0!important;
        background:#fff!important;
        border-radius:12px!important;
    }

    .map-inner{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        overflow:visible!important;
        margin:0!important;
        padding:0!important;
    }

    .ground-area{
        display:block!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        grid-template-columns:none!important;
        gap:0!important;
        overflow:visible!important;
    }

    .mobile-zone-section{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        margin:0 0 14px!important;
        padding:10px 8px 14px!important;
        border:1px solid #dfeaf4!important;
        border-radius:14px!important;
        background:#fff!important;
        box-sizing:border-box!important;
        box-shadow:0 5px 14px rgba(0,0,0,.05)!important;
        -webkit-overflow-scrolling:touch;
    }

    .mobile-zone-title{
        display:block!important;
        width:auto!important;
        max-width:none!important;
        margin:0 0 10px!important;
        padding:8px 10px!important;
        text-align:center!important;
        font-size:14px!important;
        font-weight:800!important;
        color:#1d66a6!important;
        background:#f3f8fd!important;
        border:1px solid #dae7f2!important;
        border-radius:10px!important;
        box-sizing:border-box!important;
    }

    .side-block-wrap,
    .center-block-wrap{
        display:block!important;
        width:max-content!important;
        min-width:0!important;
        max-width:none!important;
        margin:0 auto!important;
        padding:0!important;
        gap:0!important;
    }

    .side-block-wrap .seat-block,
    .center-block-wrap .seat-block{
        margin:0 auto 12px!important;
    }

    .seat-block{
        width:max-content!important;
        min-width:0!important;
        max-width:none!important;
    }

    .block-row{
        display:flex!important;
        align-items:flex-start!important;
        justify-content:center!important;
        width:max-content!important;
        margin:0 auto 3px!important;
        gap:4px!important;
    }

    .row-labels{
        flex:0 0 22px!important;
        width:22px!important;
        min-width:22px!important;
        max-width:22px!important;
    }

    .row-labels span{
        height:22px!important;
        line-height:22px!important;
        font-size:10px!important;
        font-weight:700!important;
        text-align:center!important;
    }

    .seat-grid{
        gap:3px!important;
        width:max-content!important;
    }

    .seat{
        width:24px!important;
        height:20px!important;
        line-height:20px!important;
        font-size:9px!important;
        border-radius:4px!important;
        box-sizing:border-box!important;
    }

    .seat-grid.cols-8{grid-template-columns:repeat(8,24px)!important;}
    .seat-grid.cols-9{grid-template-columns:repeat(9,24px)!important;}
    .seat-grid.cols-10{grid-template-columns:repeat(10,24px)!important;}
    .seat-grid.cols-18{grid-template-columns:repeat(18,24px)!important;}

    .balcony{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-x:auto!important;
        padding:10px 8px 14px!important;
        box-sizing:border-box!important;
    }

    .balcony-top,
    .balcony-bottom-wrap{
        width:max-content!important;
        max-width:none!important;
        min-width:0!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .balcony-bottom-wrap{
        display:grid!important;
        grid-template-columns:55px auto 55px!important;
        gap:8px!important;
    }

    .black-area{
        min-height:70px!important;
    }

    .entrance{
        font-size:12px!important;
        padding:6px!important;
    }

    .note-row,
    .floor-label{
        display:none!important;
    }

    /* Không cho thanh booking che sơ đồ ghế trên mobile */
    .booking-bar{
        position:static!important;
        left:auto!important;
        right:auto!important;
        bottom:auto!important;
        transform:none!important;
        width:100%!important;
        max-width:100%!important;
        margin:14px 0 0!important;
        padding:12px!important;
        border-radius:14px!important;
        box-sizing:border-box!important;
        background:rgba(255,255,255,.97)!important;
        box-shadow:0 5px 18px rgba(0,0,0,.12)!important;
    }

    .selected-text{
        max-width:100%!important;
        white-space:normal!important;
        line-height:1.4!important;
        font-size:13px!important;
    }

    .booking-actions{
        display:block!important;
    }

    .booking-actions .btn,
    .booking-actions button,
    .booking-bar button{
        width:100%!important;
        margin:8px 0 0!important;
        height:44px!important;
        border-radius:22px!important;
        font-size:14px!important;
        font-weight:800!important;
    }
}

@media(max-width:390px){
    .right-panel{
        padding:8px!important;
    }

    .mobile-zone-section{
        padding:8px 6px 12px!important;
    }

    .seat{
        width:22px!important;
        height:19px!important;
        line-height:19px!important;
        font-size:8px!important;
    }

    .seat-grid{
        gap:2px!important;
    }

    .seat-grid.cols-8{grid-template-columns:repeat(8,22px)!important;}
    .seat-grid.cols-9{grid-template-columns:repeat(9,22px)!important;}
    .seat-grid.cols-10{grid-template-columns:repeat(10,22px)!important;}
    .seat-grid.cols-18{grid-template-columns:repeat(18,22px)!important;}

    .row-labels{
        flex-basis:20px!important;
        width:20px!important;
        min-width:20px!important;
        max-width:20px!important;
    }

    .row-labels span{
        height:19px!important;
        line-height:19px!important;
        font-size:9px!important;
    }
}


/* Mobile: ẩn khu không còn ghế trống */
@media(max-width:780px){
    .mobile-zone-btn[style*="display: none"]{
        margin:0!important;
        padding:0!important;
        width:0!important;
        border:0!important;
        overflow:hidden!important;
    }
}


/* Popup chống chọn ghế lủng / chừa 1 ghế trống */
.seat-gap-popup-mask{
    position:fixed;
    z-index:999999;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    box-sizing:border-box;
}
.seat-gap-popup{
    width:100%;
    max-width:430px;
    background:#fff;
    border-radius:18px;
    padding:24px 22px 20px;
    box-shadow:0 18px 45px rgba(0,0,0,.25);
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
}
.seat-gap-popup-icon{
    width:54px;
    height:54px;
    border-radius:50%;
    margin:0 auto 12px;
    background:#fff3cd;
    color:#b77900;
    border:2px solid #ffd36a;
    line-height:54px;
    font-size:34px;
    font-weight:bold;
}
.seat-gap-popup-title{
    font-size:20px;
    font-weight:bold;
    color:#1f2d3d;
    margin-bottom:10px;
}
.seat-gap-popup-message{
    font-size:15px;
    line-height:1.5;
    color:#334155;
    margin-bottom:10px;
}
.seat-gap-popup-example{
    font-size:13px;
    color:#64748b;
    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:10px;
    padding:9px 10px;
    margin:10px 0 16px;
    min-height:18px;
}
.seat-gap-popup-ok{
    min-width:120px;
    height:38px;
    border:0;
    border-radius:9px;
    background:#1d6fb8;
    color:#fff;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}
.seat-gap-popup-ok:hover{
    background:#155d9d;
}
@media(max-width:640px){
    .seat-gap-popup{
        max-width:calc(100vw - 28px);
        padding:22px 16px 18px;
    }
    .seat-gap-popup-title{
        font-size:18px;
    }
    .seat-gap-popup-message{
        font-size:14px;
    }
}