/* ==========================================================================
   Хулгайн кино — харанхуй / улаан минимал загвар
   Бие даасан stylesheet (гуравдагч CSS framework ашиглахгүй).
   ========================================================================== */

:root {
    --kh-bg: #0b0c0e;
    --kh-bg-deep: #08090b;
    --kh-panel: #131518;
    --kh-panel-2: #1b1d21;
    --kh-line: #26282c;
    --kh-line-2: #34373e;
    --kh-text: #f5f5f6;
    --kh-soft: #b8b7bc;
    --kh-muted: #898d96;
    --kh-dim: #60656e;
    --kh-red: #fa233b;
    --kh-red-hover: #ff4055;
    --kh-gutter: 5%;
    --kh-header-h: 80px;
    color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

body.kh {
    min-height: 100vh;
    background-color: var(--kh-bg);
    color: var(--kh-text);
    font-family: Manrope, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.kh-main { display: block; min-height: 60vh; }

body.kh ::selection { background: var(--kh-red); color: #fff; }

body.kh a:focus-visible,
body.kh button:focus-visible,
body.kh input:focus-visible {
    outline: 2px solid var(--kh-red);
    outline-offset: 4px;
}

body.kh ::placeholder { color: #6f737c; }

/* ---------- Shared bits ---------- */
.kh-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 22px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.1px;
}
body.kh .kh-eyebrow { color: var(--kh-red); }
body.kh .kh-eyebrow--muted { color: #81858d; }
.kh-eyebrow i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kh-red);
}

.kh-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    transition: background-color .2s, border-color .2s;
}
.kh-btn--primary { background: var(--kh-red); }
.kh-btn--primary:hover { background: var(--kh-red-hover); }
.kh-btn--ghost {
    background: #ffffff12;
    border: 1px solid #ffffff28;
    backdrop-filter: blur(10px);
}
.kh-btn--ghost:hover { background: #ffffff20; }
body.kh .kh-btn { color: #fff; }

.kh-round {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0 0 3px;
    border: 1px solid var(--kh-line-2);
    border-radius: 50%;
    background: #181a1f;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.kh-round:hover { border-color: var(--kh-red); background: #22161a; }
body.kh .kh-round { color: var(--kh-text); }

/* ==========================================================================
   Header
   ========================================================================== */
body.kh .kh-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--kh-header-h);
    z-index: 99;
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 var(--kh-gutter);
    background: #08090bf2;
    border-bottom: 1px solid #ffffff0d;
    backdrop-filter: blur(12px);
    transition: box-shadow .25s;
}
.kh-header.is-scrolled { box-shadow: 0 10px 30px #00000066; }

.kh-brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    width: 200px;
    height: 64px;
}
.kh-brand img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.kh-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%;
}
.kh-nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s;
}
body.kh .kh-nav a { color: #92959d; }
body.kh .kh-nav a:hover,
body.kh .kh-nav a.is-current { color: #fff; }
.kh-nav a.is-current:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 22px;
    width: 15px;
    height: 2px;
    background: var(--kh-red);
}

.kh-header__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.kh-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.kh-icon svg { width: 20px; height: 20px; fill: #d9dadd; transition: fill .2s; }
.kh-icon:hover svg { fill: #fff; }

.kh-header__search {
    position: fixed;
    top: var(--kh-header-h);
    left: 0;
    right: 0;
    padding: 14px var(--kh-gutter);
    background: var(--kh-bg-deep);
    border-bottom: 1px solid var(--kh-line);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.kh-header.is-search-open .kh-header__search {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
body.kh .kh-header__search input {
    width: 100%;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--kh-line);
    border-radius: 7px;
    background: var(--kh-panel);
    font-size: 14px;
    outline: none;
}
.kh-header__search input:focus { border-color: #4a4d55; }

.kh-header__logout { margin: 0; }

.kh-login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid #303237;
    border-radius: 7px;
    background: var(--kh-panel-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s;
}
.kh-login:hover { border-color: #4a4d55; }
body.kh .kh-login { color: #fff; }
body.kh .kh-login__arrow { color: #aaa; margin-left: 6px; }
body.kh .kh-login__user {
    color: var(--kh-muted);
    padding-right: 10px;
    border-right: 1px solid #303237;
}
body.kh .kh-header__signup { color: #92959d; font-size: 12px; font-weight: 600; }
body.kh .kh-header__signup:hover { color: #fff; }

.kh-header__burger,
.kh-header__back {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.kh-header__burger {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 36px;
}
.kh-header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .2s, opacity .2s;
}
.kh-header.is-menu-open .kh-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kh-header.is-menu-open .kh-header__burger span:nth-child(2) { opacity: 0; }
.kh-header.is-menu-open .kh-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.kh .kh-header__back { color: #fff; }


/* ==========================================================================
   Hero
   ========================================================================== */
.kh-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: clamp(540px, 78vh, 680px);
    margin-top: var(--kh-header-h);
}

.kh-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}
.kh-hero__slide.is-current { opacity: 1; visibility: visible; }

.kh-hero__image {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: #2a2622 center 30% / cover no-repeat;
    transform: scale(1.04);
    transition: transform 7s ease-out;
}
.kh-hero__slide.is-current .kh-hero__image { transform: scale(1); }

.kh-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, #0b0c0ef5 0%, #0b0c0eaa 38%, #0b0c0e0a 78%),
        linear-gradient(0deg, #0b0c0e 0%, transparent 45%);
}

.kh-hero__copy {
    max-width: 710px;
    padding: 70px var(--kh-gutter) 0;
}
.kh-hero h1 {
    margin: 0 0 22px;
    font-family: Manrope, Arial, sans-serif;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2.4px;
}
.kh-hero h1 span {
    display: block;
    margin-top: 7px;
    font-size: 33px;
    font-weight: 500;
    letter-spacing: -1px;
}

.kh-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    font-size: 11px;
}
body.kh .kh-meta,
body.kh .kh-meta span { color: #bebec2; }
.kh-meta em {
    padding: 2px 6px;
    border: 1px solid #727274;
    border-radius: 3px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

body.kh .kh-hero__synopsis {
    max-width: 440px;
    margin: 20px 0 28px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--kh-soft);
}
.kh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kh-hero__synopsis + .kh-hero__actions { margin-top: 0; }

.kh-hero__bottom {
    position: absolute;
    left: var(--kh-gutter);
    right: var(--kh-gutter);
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
}
body.kh .kh-hero__bottom span { color: #85858d; }
.kh-hero__pager { display: flex; align-items: center; gap: 14px; }
.kh-hero__pager[hidden] { display: none !important; }
.kh-hero__progress {
    position: relative;
    display: block;
    width: 94px;
    height: 2px;
    background: #ffffff25;
}
.kh-hero__progress span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--kh-red);
    transition: width .4s;
}

/* ==========================================================================
   Mobile coupon strip
   ========================================================================== */
.kh-coupon-strip { display: none; }

/* ==========================================================================
   Library + rows
   ========================================================================== */
.kh-library { padding: 0 var(--kh-gutter) 50px; }

.kh-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0 28px;
    border-bottom: 1px solid var(--kh-line);
}
.kh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-chip {
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .2s, color .2s;
}
body.kh .kh-chip { color: #9598a0; }
body.kh .kh-chip:hover { background: #24262b; color: #fff; }
body.kh .kh-chip.is-current { background: #f2f2f4; color: #151619; font-weight: 800; }

.kh-search {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--kh-line);
    border-radius: 6px;
    background: var(--kh-panel);
}
.kh-search svg { width: 16px; height: 16px; fill: #9a9ea6; }
body.kh .kh-search input {
    width: 190px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 12px;
}
body.kh .kh-search kbd {
    padding: 1px 6px;
    border: 1px solid #37393e;
    border-radius: 3px;
    background: none;
    font-size: 10px;
    color: #888;
}

.kh-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 38px 0 18px;
}
.kh-section-heading .kh-eyebrow { margin: 0 0 10px; font-size: 9px; letter-spacing: 2px; }
.kh-section-heading h2,
.kh-editorial h2 {
    margin: 0;
    font-family: Manrope, Arial, sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.7px;
}
body.kh .kh-section-heading > span,
body.kh .kh-section-heading > p {
    margin: 0 0 4px;
    font-size: 11px;
    color: var(--kh-muted);
}

/* ---------- Хэвтээ тавиур (нүүр, төстэй бүтээл) ---------- */
.kh-shelf { margin: 0 0 30px; }
.kh-shelf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}
.kh-shelf__head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.4px;
}
body.kh .kh-shelf__head h3 a:hover { color: var(--kh-red); }
body.kh .kh-shelf__head small {
    margin-left: 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--kh-muted);
}
.kh-shelf__tools { display: flex; align-items: center; gap: 8px; }
.kh-shelf__all { margin-right: 10px; font-size: 11px; font-weight: 700; }
body.kh .kh-shelf__all span { margin-left: 4px; color: var(--kh-red); }
.kh-round:disabled { opacity: .3; cursor: default; }

.kh-shelf__track {
    --kh-card-w: clamp(140px, 15vw, 196px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--kh-card-w);
    gap: 16px;
    padding: 4px 2px 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: #34373e transparent;
}
.kh-shelf__track > * { scroll-snap-align: start; }
.kh-shelf__track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.kh-shelf__track.is-dragging .kh-card { pointer-events: none; }

/* ---------- Карт ---------- */
.kh-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kh-card__art {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #1a1c20;
    isolation: isolate;
}
.kh-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.kh-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, #0b0c0ed9 100%);
    opacity: .7;
    transition: opacity .3s;
}
.kh-card:hover .kh-card__art img { transform: scale(1.06); }
.kh-card:hover .kh-card__art::after { opacity: 1; }
.kh-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding-left: 3px;
    border-radius: 50%;
    background: #fa233bf0;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.8);
    transition: opacity .25s, transform .25s;
}
.kh-card:hover .kh-card__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kh-card__kind,
.kh-card__price {
    position: absolute;
    z-index: 2;
    padding: 4px 7px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}
.kh-card__kind { top: 9px; left: 9px; background: var(--kh-red); font-size: 9px; letter-spacing: .3px; }
.kh-card__price { left: 9px; bottom: 9px; background: #0a0c10c7; }
.kh-card__title {
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .2s;
}
.kh-card:hover .kh-card__title { color: var(--kh-red); }

.kh-card--more .kh-card__art {
    display: grid;
    place-items: center;
    border: 1px dashed var(--kh-line-2);
    background: var(--kh-panel);
}
.kh-card--more .kh-card__art::after { display: none; }
.kh-card--more:hover .kh-card__art { border-color: var(--kh-red); background: #1a1215; }
.kh-card__more { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.kh-card__more b { font-size: 34px; font-weight: 800; letter-spacing: -1px; }
body.kh .kh-card__more small { font-size: 11px; color: var(--kh-muted); }
body.kh .kh-card__more em { margin-top: 12px; font-size: 11px; font-style: normal; font-weight: 800; color: var(--kh-red); }

/* ---------- Торон жагсаалт (ангилал, хайлт) ---------- */
.kh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 26px 16px;
}

/* ==========================================================================
   Editorial
   ========================================================================== */
.kh-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    margin: 10px var(--kh-gutter) 70px;
    padding: 44px;
    overflow: hidden;
    border: 1px solid #23262b;
    border-radius: 10px;
    background: #121417;
}
.kh-editorial h2 { font-size: 34px; line-height: 1.3; }
body.kh .kh-editorial h2 span { color: #8c919a; }
body.kh .kh-editorial p:not(.kh-eyebrow) {
    margin: 20px 0;
    font-size: 12px;
    line-height: 1.9;
    color: #8c919a;
}
.kh-editorial a { font-size: 12px; font-weight: 700; }
body.kh .kh-editorial a span { margin-left: 30px; color: var(--kh-red); }

.kh-editorial__art {
    position: relative;
    justify-self: end;
    align-self: center;
    width: 100%;
    max-width: 420px;
    padding: 22px 30px;
    background: #dc2437;
    transform: rotate(-3deg);
}
body.kh .kh-editorial__art,
body.kh .kh-editorial__art * { color: #0e1014; }
.kh-editorial__art > span,
.kh-editorial__art small { font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.kh-editorial__art strong {
    display: block;
    margin: 17px 0;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
}
.kh-editorial__art strong span {
    position: absolute;
    right: 24px;
    bottom: 32px;
    font-size: 80px;
}

/* ==========================================================================
   Багцын тасалбар (нүүр + pricing)
   Тасалбарын үндсэн загвар нь доорх "Тасалбарын касс" хэсэгт.
   ========================================================================== */
.kh-tickets--home { margin-bottom: 70px; }
.kh-tickets__row.kh-tickets__row--packages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.kh .kh-tickets__foot { margin: 18px 0 0; font-size: 12px; color: var(--kh-muted); }
body.kh .kh-tickets__foot a { color: #fff; font-weight: 700; border-bottom: 1px solid var(--kh-red); }

/* ---------- Pricing хуудас ---------- */
.kh-pricing-hero {
    position: relative;
    isolation: isolate;
    margin-top: var(--kh-header-h);
    padding: 70px var(--kh-gutter) 44px;
    overflow: hidden;
}
.kh-pricing-hero:before {
    content: '';
    position: absolute;
    top: -260px;
    right: -120px;
    z-index: -1;
    width: 720px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fa233b33, transparent);
    filter: blur(20px);
}
.kh-pricing-hero h1 {
    margin: 0 0 18px;
    font-family: Manrope, Arial, sans-serif;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2.2px;
}
body.kh .kh-pricing-hero h1 span { color: #8c919a; }
body.kh .kh-pricing-hero__lede { max-width: 520px; margin: 0; font-size: 14px; line-height: 1.85; color: var(--kh-soft); }
.kh-tickets--page { border-top: 0; padding-top: 0; margin-bottom: 64px; }

.kh-perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 var(--kh-gutter) 70px;
    border-top: 1px solid var(--kh-line);
}
.kh-perk { padding: 26px 24px 0 0; }
.kh-perk + .kh-perk { padding-left: 24px; border-left: 1px solid var(--kh-line); }
body.kh .kh-perk span { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--kh-red); }
.kh-perk h3 { margin: 12px 0 8px; font-family: Manrope, Arial, sans-serif; font-size: 16px; font-weight: 800; }
body.kh .kh-perk p { margin: 0; font-size: 12px; line-height: 1.75; color: var(--kh-muted); }

.kh-faq {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 40px;
    margin: 0 var(--kh-gutter) 80px;
}
.kh-faq__head .kh-eyebrow { margin-bottom: 10px; font-size: 9px; }
.kh-faq__head h2 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.6px; }
.kh-faq__list details { border-bottom: 1px solid var(--kh-line); }
.kh-faq__list details:first-child { border-top: 1px solid var(--kh-line); }
.kh-faq__list summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}
.kh-faq__list summary::-webkit-details-marker { display: none; }
body.kh .kh-faq__list summary span { color: var(--kh-red); font-size: 18px; line-height: 1; transition: transform .2s; }
.kh-faq__list details[open] summary span { transform: rotate(45deg); }
body.kh .kh-faq__list p { margin: 0 0 18px; font-size: 13px; line-height: 1.8; color: var(--kh-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */
.kh-footer {
    padding: 44px var(--kh-gutter) 28px;
    border-top: 1px solid var(--kh-line);
    background: var(--kh-bg-deep);
}
.kh-footer__top {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1.6fr;
    gap: 40px;
    padding-bottom: 34px;
}
.kh-footer__logo { font-size: 22px; font-weight: 800; letter-spacing: -1px; }
body.kh .kh-footer__logo span { padding-left: 5px; font-size: 9px; color: var(--kh-red); }
body.kh .kh-footer__brand p {
    max-width: 300px;
    margin: 14px 0 18px;
    font-size: 12px;
    line-height: 1.8;
    color: #696d76;
}
.kh-footer__social { display: flex; gap: 18px; }
.kh-footer__social a,
.kh-footer__col a { font-size: 12px; font-weight: 600; transition: color .2s; }
body.kh .kh-footer__social a span { color: var(--kh-red); }
.kh-footer__col { display: flex; flex-direction: column; gap: 11px; }
.kh-footer__col .kh-eyebrow { margin-bottom: 6px; font-size: 9px; }
body.kh .kh-footer__col a { color: #a2a5ad; }
body.kh .kh-footer__col a:hover { color: #fff; }
.kh-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 24px; }
.kh-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--kh-line);
    font-size: 10px;
}
body.kh .kh-footer__bottom span { color: #696d76; }

/* ==========================================================================
   Dialog (купон, нөхцөл, нууцлал, төлбөр) — native <dialog>
   ========================================================================== */
.kh-dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    padding: 30px 28px 26px;
    overflow-y: auto;
    border: 1px solid #2f3238;
    border-top: 3px solid var(--kh-red);
    border-radius: 6px 6px 12px 12px;
    background: #121417;
    color: var(--kh-text);
    box-shadow: 0 30px 80px #000000b3;
}
.kh-dialog--small { width: min(430px, calc(100vw - 32px)); }
.kh-dialog::backdrop { background: #000000b8; backdrop-filter: blur(6px); }
.kh-dialog[open] { animation: kh-dialog-in .25s ease; }
@keyframes kh-dialog-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kh-dialog__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #9b9da5;
}
.kh-dialog__close:hover { background: #ffffff12; color: #fff; }
.kh-dialog .kh-eyebrow { margin-bottom: 12px; font-size: 9px; }
.kh-dialog h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }
body.kh .kh-dialog__lede,
body.kh .kh-dialog__meta { margin: 0 0 20px; font-size: 12px; color: var(--kh-muted); }
body.kh .kh-dialog__note { margin: 16px 0 0; font-size: 12px; color: #8ee8b6; }

.kh-coupon { display: flex; gap: 8px; }
.kh-coupon input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #3b3e48;
    border-radius: 6px;
    outline: none;
    background: #0b0c0e;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.kh-coupon input:focus { border-color: var(--kh-red); }
.kh-coupon button {
    flex: 0 0 auto;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--kh-red);
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}
.kh-coupon button:hover { background: var(--kh-red-hover); }

.kh-doc h4 { margin: 22px 0 6px; font-size: 13px; font-weight: 800; }
body.kh .kh-doc p,
body.kh .kh-doc li { font-size: 12px; line-height: 1.8; color: #a5a9b2; }
.kh-doc ul { margin: 6px 0 0 18px; }
body.kh .kh-doc a { color: #fff; border-bottom: 1px solid var(--kh-red); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1500px) {
    :root { --kh-gutter: 8%; }
    .kh-hero { height: 700px; }
}

@media (max-width: 1199px) {
    body.kh .kh-header { gap: 20px; }
    .kh-header__burger { display: flex; }
    .kh-nav {
        position: fixed;
        top: var(--kh-header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        padding: 8px var(--kh-gutter) 18px;
        background: var(--kh-bg-deep);
        border-bottom: 1px solid var(--kh-line);
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: opacity .2s, transform .2s;
    }
    .kh-header.is-menu-open .kh-nav { opacity: 1; transform: none; pointer-events: auto; }
    .kh-nav a { height: 48px; font-size: 15px; border-bottom: 1px solid #ffffff0a; }
    .kh-nav a.is-current:after { bottom: 10px; }

    .kh-toolbar { flex-direction: column; align-items: stretch; }
    body.kh .kh-search input { width: 100%; }
    .kh-perks { grid-template-columns: repeat(2, 1fr); }
    .kh-perk:nth-child(3) { padding-left: 0; border-left: 0; }
    .kh-faq { grid-template-columns: 1fr; gap: 20px; }
    .kh-editorial { padding: 32px; gap: 24px; }
    .kh-editorial__art strong { font-size: 32px; }
    .kh-footer__top { grid-template-columns: 1fr 1fr; }
    .kh-footer__brand { grid-column: 1 / -1; }

    .kh-coupon-strip { display: block; padding: 18px var(--kh-gutter) 0; }
    .kh-coupon-strip__form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 14px;
        border: 1px solid #8b2935;
        border-radius: 8px;
        background: linear-gradient(145deg, #281519, #121315);
    }
    .kh-coupon-strip__form label { flex: 1 0 100%; margin: 0; font-size: 12px; font-weight: 700; }
    .kh-coupon-strip__form input {
        flex: 1;
        min-width: 0;
        height: 42px;
        padding: 0 12px;
        border: 1px solid #3b3e48;
        border-radius: 6px;
        background: #0b0c0e;
        font-size: 13px;
        outline: none;
    }
    .kh-coupon-strip__form button {
        height: 42px;
        padding: 0 16px;
        border: 0;
        border-radius: 6px;
        background: var(--kh-red);
        font-size: 12px;
        font-weight: 700;
    }
}

@media (max-width: 767px) {
    :root { --kh-header-h: 64px; }
    body.kh .kh-header { gap: 12px; }
    .kh-header__back { display: inline-flex; }
    .kh-home .kh-header__back { display: none; }
    .kh-brand { width: 150px; height: 48px; }
    .kh-header__signup,
    .kh-login__user { display: none; }
    .kh-header__right { gap: 8px; }
    .kh-login { padding: 8px 12px; }

    .kh-hero { height: 560px; }
    .kh-hero__image { background-position: 60% center; }
    .kh-hero__shade {
        background:
            linear-gradient(90deg, #0b0c0ed9, #0b0c0e36),
            linear-gradient(0deg, #0b0c0e, transparent 80%);
    }
    .kh-hero__copy { padding-top: 56px; }
    .kh-hero h1 { font-size: 40px; letter-spacing: -1.6px; }
    .kh-hero h1 span { font-size: 26px; }
    .kh-hero__synopsis { max-width: 330px; }
    .kh-hero__tagline { display: none; }

    .kh-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 calc(var(--kh-gutter) * -1);
        padding: 0 var(--kh-gutter);
        scrollbar-width: none;
    }
    .kh-chips::-webkit-scrollbar { display: none; }
    .kh-chip { padding: 9px 12px; font-size: 11px; }
    .kh-search kbd { display: none; }

    .kh-section-heading h2 { font-size: 22px; }
    .kh-shelf__head h3 { font-size: 16px; }
    .kh-shelf__head small { display: none; }
    .kh-shelf .kh-round { display: none; }
    .kh-shelf__all { margin-right: 0; }
    .kh-shelf__track { --kh-card-w: 38vw; gap: 12px; }

    .kh-editorial { grid-template-columns: 1fr; margin-bottom: 44px; padding: 26px; }
    .kh-editorial__art { display: none; }
    .kh-editorial h2 { font-size: 28px; }

    .kh-section-heading > p { display: none; }

    .kh-footer__top { grid-template-columns: 1fr; gap: 30px; }
    .kh-footer__bottom { flex-direction: column; gap: 6px; }
}

@media (max-width: 420px) {
    .kh-perks { grid-template-columns: 1fr; }
    .kh-perk, .kh-perk + .kh-perk { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--kh-line); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kh-hero__slide,
    .kh-hero__image { transition: none; }
}

/* ==========================================================================
   Toast мэдэгдэл (alert-ын оронд)
   ========================================================================== */
.kh-toasts {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.kh-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 14px 40px 16px 14px;
    overflow: hidden;
    border: 1px solid #2c2f35;
    border-radius: 8px;
    background: #15171bf5;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px #00000080;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: auto;
}
.kh-toast.is-in { opacity: 1; transform: none; }
.kh-toast.is-leaving { opacity: 0; transform: translateX(24px); }
.kh-toast__icon {
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}
.kh-toast__icon svg { width: 15px; height: 15px; }
body.kh .kh-toast--ok .kh-toast__icon { background: #2fd17a1f; color: #2fd17a; }
body.kh .kh-toast--warn .kh-toast__icon { background: #ffb02e1f; color: #ffb02e; }
body.kh .kh-toast--err .kh-toast__icon { background: #fa233b1f; color: var(--kh-red); }
body.kh .kh-toast--info .kh-toast__icon { background: #ffffff14; color: #d9dadd; }
.kh-toast__body { flex: 1; min-width: 0; padding-top: 1px; }
.kh-toast__body b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 800; }
body.kh .kh-toast__body p { margin: 0; font-size: 12px; line-height: 1.55; color: #b8bbc2; }
.kh-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
body.kh .kh-toast__close { color: #6f737c; }
body.kh .kh-toast__close:hover { color: #fff; }
.kh-toast__timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    animation: kh-toast-timer 5.2s linear forwards;
}
.kh-toast--ok .kh-toast__timer { background: #2fd17a; }
.kh-toast--warn .kh-toast__timer { background: #ffb02e; }
.kh-toast--err .kh-toast__timer { background: var(--kh-red); }
.kh-toast--info .kh-toast__timer { background: #6f737c; }
@keyframes kh-toast-timer { to { transform: scaleX(0); } }

@media (max-width: 767px) {
    .kh-toasts { left: 16px; right: 16px; bottom: 16px; width: auto; align-items: stretch; }
    .kh-toast { transform: translateY(16px); }
    .kh-toast.is-leaving { transform: translateY(16px); }
}


/* ==========================================================================
   Киноны дэлгэрэнгүй хуудас
   ========================================================================== */
.kh-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: var(--kh-header-h);
    padding: 64px var(--kh-gutter) 56px;
}
.kh-title__backdrop {
    position: absolute;
    inset: -30px;
    z-index: -2;
    background: #1a1c20 center 25% / cover no-repeat;
    filter: blur(3px) saturate(1.1);
    transform: scale(1.05);
}
.kh-title__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, #0b0c0ef7 0%, #0b0c0ed9 45%, #0b0c0e73 100%),
        linear-gradient(0deg, #0b0c0e 0%, transparent 55%);
}
.kh-title__inner {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 48px;
    align-items: end;
    max-width: 1180px;
}
.kh-title__poster {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #1a1c20;
    box-shadow: 0 30px 60px #000000b3, 0 0 0 1px #ffffff14;
    transform: rotate(-2deg);
}
.kh-title__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }

.kh-crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-size: 11px; font-weight: 700; }
body.kh .kh-crumbs a { color: #92959d; }
body.kh .kh-crumbs a:hover { color: #fff; }
body.kh .kh-crumbs span { color: #4a4d55; }

.kh-title h1 {
    margin: 0 0 18px;
    font-family: Manrope, Arial, sans-serif;
    font-size: clamp(34px, 4.6vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
}
body.kh .kh-meta__open { border-color: #2fd17a; color: #2fd17a; }

.kh-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.kh-tags span {
    padding: 5px 10px;
    border-radius: 20px;
    background: #ffffff12;
    font-size: 11px;
    font-weight: 700;
}
body.kh .kh-tags span { color: #d0d2d7; }

body.kh .kh-title__lede {
    max-width: 560px;
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.85;
    color: var(--kh-soft);
}

.kh-title__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.kh-btn { gap: 2px; border: 0; cursor: pointer; }
.kh-btn.is-disabled { opacity: .5; cursor: default; }

.kh-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #ffffff28;
    border-radius: 6px;
    background: #ffffff0d;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.kh-pill:hover { border-color: #ffffff55; }
body.kh .kh-pill,
body.kh .kh-pill span { color: #fff; }
.kh-pill.is-on { border-color: var(--kh-red); background: #fa233b1a; }
body.kh .kh-pill.is-on svg { color: var(--kh-red); fill: var(--kh-red); }

/* ---------- Theater ---------- */
.kh-theater {
    margin: 0 var(--kh-gutter) 40px;
    overflow: hidden;
    border: 1px solid var(--kh-line);
    border-radius: 10px;
    background: #000;
}
.kh-theater__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--kh-line);
    background: var(--kh-panel);
}
.kh-theater__bar .kh-eyebrow { flex: 0 0 auto; margin: 0; }
.kh-theater__bar b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.kh-theater__frame { position: relative; aspect-ratio: 16 / 9; max-height: 78vh; margin: 0 auto; }
.kh-theater__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Body: main + access ---------- */
.kh-title-body {
    max-width: calc(980px + 2 * var(--kh-gutter));
    padding: 10px var(--kh-gutter) 40px;
}
.kh-block { margin-bottom: 40px; }
.kh-block__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--kh-line);
}
.kh-block__head h2 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
body.kh .kh-block__head span { font-size: 11px; color: var(--kh-muted); }

.kh-episodes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kh-episode {
    display: grid;
    grid-template-columns: 34px 112px minmax(0, 1fr) 36px;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 8px 10px 8px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    text-align: left;
    cursor: pointer;
    transition: background-color .2s, border-color .2s;
}
.kh-episode:hover { background: var(--kh-panel); border-color: var(--kh-line); }
.kh-episode.is-playing { background: #1a1215; border-color: #8b2935; }
body.kh .kh-episode__num { font-size: 15px; font-weight: 800; text-align: center; color: #5f636b; }
body.kh .kh-episode.is-playing .kh-episode__num { color: var(--kh-red); }
.kh-episode__thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; background: #1a1c20; }
.kh-episode__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-episode__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kh-episode__text b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
body.kh .kh-episode__text small { font-size: 11px; color: var(--kh-muted); }
.kh-episode__state {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--kh-line-2);
    border-radius: 50%;
}
.kh-episode:hover .kh-episode__state { border-color: var(--kh-red); background: var(--kh-red); }
.kh-episode.is-locked { opacity: .72; }
.kh-episode.is-locked:hover .kh-episode__state { background: none; }

body.kh .kh-about { margin: 0 0 22px; font-size: 14px; line-height: 1.9; white-space: pre-line; color: #c5c7cc; }
body.kh .kh-about--empty { color: var(--kh-muted); }

.kh-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--kh-line);
    border-radius: 8px;
    background: var(--kh-line);
}
.kh-facts div { padding: 14px 16px; background: #0f1113; }
body.kh .kh-facts dt { margin-bottom: 6px; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #6f737c; }
.kh-facts dd { margin: 0; font-size: 13px; font-weight: 700; }

/* ---------- Эрх нээлттэй шошго (hero) ---------- */
.kh-pass {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 7px 12px;
    border: 1px solid #2fd17a55;
    border-radius: 20px;
    background: #2fd17a14;
    font-size: 12px;
    font-weight: 700;
}
body.kh .kh-pass,
body.kh .kh-pass svg { color: #2fd17a; }
body.kh .kh-pass span { color: #8ee8b6; font-weight: 500; }

/* ---------- Тасалбарын касс ---------- */
.kh-tickets {
    margin: 0 var(--kh-gutter) 48px;
    padding: 30px 0 0;
    border-top: 1px solid var(--kh-line);
}
.kh-tickets.is-pulse .kh-ticket { animation: kh-ticket-nudge .9s ease; }
@keyframes kh-ticket-nudge { 30% { transform: translateY(-6px); } 60% { transform: translateY(0); } }

.kh-tickets__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.kh-tickets__head .kh-eyebrow { margin-bottom: 10px; font-size: 9px; }
.kh-tickets__head h2 { margin: 0; font-family: Manrope, Arial, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -.8px; }
body.kh .kh-tickets__head p { max-width: 320px; margin: 0; font-size: 12px; line-height: 1.7; text-align: right; color: var(--kh-muted); }
body.kh .kh-tickets__head p a { color: #fff; font-weight: 700; border-bottom: 1px solid var(--kh-red); }

.kh-tickets__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
}

/* Нэг тасалбар: үндсэн хэсэг + цоолтуураар тасардаг хэсэг. Хоёр талын хагас дугуй ховилыг mask-аар гаргана. */
.kh-ticket {
    --notch: 11px;
    --stub: 118px;
    --paper: #16181c;
    --edge: #2b2e34;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stub);
    min-height: 168px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
    -webkit-mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
            mask:
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
    transition: transform .25s ease, filter .25s ease;
}
.kh-ticket:hover { transform: translateY(-4px) rotate(-.4deg); filter: brightness(1.12); }
.kh-ticket:focus-visible { outline: 2px solid var(--kh-red); outline-offset: 4px; }

.kh-ticket__main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 20px 22px 18px;
    border-right: 2px dashed var(--edge);
}
body.kh .kh-ticket__kicker { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; color: #8c919a; }
.kh-ticket__name {
    overflow: hidden;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body.kh .kh-ticket__note { font-size: 12px; color: #a2a5ad; }
.kh-ticket__seat {
    display: flex;
    gap: 16px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #ffffff10;
}
body.kh .kh-ticket__seat span { font-size: 9px; font-weight: 800; letter-spacing: 1.4px; color: #6f737c; }
body.kh .kh-ticket__seat i { margin-left: 4px; font-style: normal; color: #e9eaec; }

.kh-ticket__stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 10px;
    background: repeating-linear-gradient(135deg, #ffffff05 0 6px, transparent 6px 12px);
}
.kh-ticket__stub b {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.kh-ticket__stub sup { font-size: 12px; margin-top: 2px; }
.kh-ticket__tear {
    padding: 6px 10px;
    border-radius: 20px;
    background: #ffffff14;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.kh-ticket:hover .kh-ticket__tear { background: var(--kh-red); }

.kh-ticket--hot { --paper: #d81f35; --edge: #ffffff66; }
body.kh .kh-ticket--hot .kh-ticket__kicker,
body.kh .kh-ticket--hot .kh-ticket__note,
body.kh .kh-ticket--hot .kh-ticket__seat span { color: #ffffffc2; }
.kh-ticket--hot .kh-ticket__seat { border-top-color: #ffffff2e; }
.kh-ticket--hot .kh-ticket__stub { background: repeating-linear-gradient(135deg, #00000014 0 6px, transparent 6px 12px); }
.kh-ticket--hot .kh-ticket__tear { background: #0b0c0e; }
.kh-ticket--hot:hover .kh-ticket__tear { background: #0b0c0e; }

.kh-related { padding-top: 10px; }

@media (max-width: 1023px) {
    .kh-title__inner { grid-template-columns: 190px 1fr; gap: 32px; }
}
@media (max-width: 767px) {
    .kh-title { padding-top: 36px; padding-bottom: 36px; }
    .kh-title__inner { grid-template-columns: 1fr; gap: 26px; }
    .kh-title__poster { width: 150px; }
    .kh-title h1 { letter-spacing: -1.2px; }
    .kh-title__actions .kh-btn--primary { flex: 1 0 100%; justify-content: center; }
    .kh-theater { margin-left: 0; margin-right: 0; border-right: 0; border-left: 0; border-radius: 0; }
    .kh-theater__bar .kh-eyebrow { display: none; }
    .kh-episode { grid-template-columns: 26px 88px minmax(0, 1fr) 32px; gap: 10px; }

    .kh-tickets__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    body.kh .kh-tickets__head p { text-align: left; }
    .kh-tickets__head h2 { font-size: 22px; }
    .kh-tickets__row,
    .kh-tickets__row.kh-tickets__row--packages { grid-template-columns: 1fr; gap: 14px; }
    .kh-ticket { --stub: 96px; min-height: 150px; }
    .kh-ticket__main { padding: 16px 16px 14px; }
    .kh-ticket__name { font-size: 17px; }
    .kh-ticket__stub b { font-size: 19px; }
}

/* ==========================================================================
   Хуудасны толгой, ангилал, хайлт
   ========================================================================== */
.kh-pagehead {
    position: relative;
    isolation: isolate;
    margin-top: var(--kh-header-h);
    padding: 56px var(--kh-gutter) 30px;
    border-bottom: 1px solid var(--kh-line);
}
.kh-pagehead:before {
    content: '';
    position: absolute;
    top: -200px;
    left: -100px;
    z-index: -1;
    width: 620px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fa233b26, transparent);
    filter: blur(20px);
}
.kh-pagehead h1 {
    margin: 0;
    font-size: clamp(32px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1.8px;
}
body.kh .kh-pagehead__meta { margin: 12px 0 0; font-size: 12px; color: var(--kh-muted); }
.kh-chips--sort { margin-top: 22px; }

.kh-catalog { padding: 30px var(--kh-gutter) 70px; }

.kh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 80px 20px;
    text-align: center;
}
.kh-empty b { font-size: 18px; font-weight: 800; }
body.kh .kh-empty p { margin-bottom: 14px; font-size: 13px; color: var(--kh-muted); }

.kh-bigsearch {
    display: flex;
    max-width: 720px;
    margin: 6px 0 0;
    border-bottom: 2px solid var(--kh-line-2);
    transition: border-color .2s;
}
.kh-bigsearch:focus-within { border-color: var(--kh-red); }
.kh-bigsearch input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    outline: none;
    background: none;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
}
body.kh .kh-bigsearch input:focus-visible { outline: none; }
.kh-bigsearch input::-webkit-search-cancel-button { display: none; }
.kh-bigsearch button {
    padding: 0 6px 0 16px;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 800;
    color: var(--kh-red);
}

.kh-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 44px;
    padding-top: 22px;
    border-top: 1px solid var(--kh-line);
}
body.kh .kh-pages__info { font-size: 12px; color: var(--kh-muted); }
.kh-pages__list { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-pages__btn {
    display: grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--kh-line);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}
a.kh-pages__btn:hover { border-color: #4a4d55; }
.kh-pages__btn.is-on { border-color: var(--kh-red); background: var(--kh-red); color: #fff; }
.kh-pages__btn.is-off { opacity: .3; }

/* ==========================================================================
   Миний булан — үзэгчийн карт + табууд
   ========================================================================== */
.kh-den {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    margin-top: var(--kh-header-h);
    padding: 44px var(--kh-gutter) 80px;
}
.kh-den__side { position: sticky; top: calc(var(--kh-header-h) + 20px); display: grid; gap: 14px; }

.kh-member {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.586;
    padding: 18px 20px;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(115deg, transparent 52%, #fa233b26 52% 64%, transparent 64%),
        radial-gradient(120% 90% at 100% 0%, #fa233b40, transparent 60%),
        #15171b;
    border: 1px solid #ffffff17;
    box-shadow: 0 18px 40px #00000073;
}
.kh-member::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 7px);
    pointer-events: none;
}
.kh-member__top { display: flex; align-items: center; justify-content: space-between; }
.kh-member__top img { width: 34px; height: 34px; border-radius: 8px; }
body.kh .kh-member__top span { font-size: 9px; font-weight: 800; letter-spacing: 2.4px; color: #ffffff8c; }
body.kh .kh-member__no {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 4px;
    font-variant-numeric: tabular-nums;
    color: #f5f5f6;
    text-shadow: 0 1px 0 #000;
}
.kh-member__foot { display: flex; justify-content: space-between; gap: 12px; }
.kh-member__foot span { display: flex; flex-direction: column; min-width: 0; }
body.kh .kh-member__foot small { font-size: 8px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #ffffff73; }
.kh-member__foot b { overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

.kh-access { padding: 18px; border: 1px solid var(--kh-line); border-radius: 14px; background: var(--kh-panel); }
body.kh .kh-access__state { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 800; color: var(--kh-muted); }
.kh-access__state i { width: 8px; height: 8px; border-radius: 50%; background: #5d616a; }
.kh-access.is-open .kh-access__state { color: #2fd17a; }
.kh-access.is-open .kh-access__state i { background: #2fd17a; box-shadow: 0 0 0 4px #2fd17a26; }
body.kh .kh-access__days { margin: 14px 0 10px; font-size: 13px; color: var(--kh-soft); }
.kh-access__days b { margin-right: 4px; font-size: 40px; font-weight: 800; letter-spacing: -1.6px; color: #fff; }
.kh-access__bar { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.kh-access__bar span { height: 8px; border-radius: 2px; background: #ffffff14; }
.kh-access__bar span.on { background: var(--kh-red); }
body.kh .kh-access__until { margin: 10px 0 0; font-size: 11px; color: var(--kh-muted); font-variant-numeric: tabular-nums; }
body.kh .kh-access__hint { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--kh-soft); }
.kh-access__cta {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    padding: 11px;
    border-radius: 9px;
    background: var(--kh-red);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.kh-access__cta:hover { background: var(--kh-red-hover); }
.kh-den__out button {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--kh-line-2);
    border-radius: 9px;
    background: none;
    color: var(--kh-muted);
    font-size: 12px;
    font-weight: 700;
}
.kh-den__out button:hover { border-color: var(--kh-muted); color: #fff; }

.kh-den__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 22px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--kh-line);
    border-radius: 12px;
    background: var(--kh-bg-deep);
    scrollbar-width: none;
}
.kh-den__tabs a {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 9px;
    color: var(--kh-muted);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.kh-den__tabs a:hover { color: #fff; }
.kh-den__tabs a.is-current { background: var(--kh-panel-2); color: #fff; }
.kh-den__tabs em { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: #ffffff12; font-size: 10px; font-style: normal; }
.kh-den__tabs a.is-current em { background: var(--kh-red); color: #fff; }

/* Тасалбарын тасархай хэсэг */
.kh-stub {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 96px;
    gap: 16px;
    align-items: center;
    margin-bottom: 10px;
    padding: 12px 0 12px 12px;
    border: 1px solid var(--kh-line);
    border-radius: 12px;
    background: var(--kh-panel);
    transition: border-color .15s;
}
.kh-stub:hover { border-color: var(--kh-line-2); }
.kh-stub img { width: 64px; height: 92px; object-fit: cover; border-radius: 6px; }
.kh-stub__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kh-stub__body b { overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
body.kh .kh-stub__body small { font-size: 12px; color: var(--kh-muted); }
.kh-stub__when { margin-top: 6px; font-size: 11px; color: var(--kh-soft); font-variant-numeric: tabular-nums; }
.kh-stub__tear {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: -12px 0;
    border-left: 2px dotted #ffffff2e;
}
.kh-stub__tear::before, .kh-stub__tear::after {
    content: "";
    position: absolute;
    left: -9px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kh-bg);
}
.kh-stub__tear::before { top: -9px; }
.kh-stub__tear::after { bottom: -9px; }
.kh-stub__tear b { font-size: 26px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
body.kh .kh-stub__tear small { margin-top: 4px; font-size: 10px; font-weight: 700; color: var(--kh-muted); }
.kh-stub--on .kh-stub__tear b { color: #2fd17a; }
.kh-stub--soon .kh-stub__tear b { color: #ffb02e; }
.kh-stub--off { opacity: .5; }

.kh-den__shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; }
.kh-den__poster b { display: block; margin-top: 8px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.kh-den__img {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 9px;
    background: var(--kh-panel-2) center / cover no-repeat;
}
.kh-den__img i {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #0b0c0ed9;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .15s, transform .15s;
}
.kh-den__poster:hover .kh-den__img i, .kh-den__poster:focus-visible .kh-den__img i { opacity: 1; transform: none; }

.kh-receipt {
    max-width: 560px;
    padding: 24px 24px 18px;
    border-radius: 4px;
    background:
        radial-gradient(circle at 8px -2px, var(--kh-bg) 6px, transparent 7px) 0 0 / 16px 10px repeat-x,
        #f2efe8;
    color: #1b1b1b;
    font-variant-numeric: tabular-nums;
}
body.kh .kh-receipt__head { margin: 6px 0 16px; padding-bottom: 12px; border-bottom: 1px dashed #0000004d; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: #555; text-align: center; }
.kh-receipt__row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dotted #00000026; }
.kh-receipt__row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kh-receipt__row b { font-size: 13px; }
body.kh .kh-receipt__row small { font-size: 11px; color: #6b6b6b; }
.kh-receipt__row em, .kh-receipt__total em { font-style: normal; font-weight: 800; white-space: nowrap; }
.kh-receipt__total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 2px solid #1b1b1b; font-size: 14px; font-weight: 800; }

.kh-den__empty { padding: 48px 24px; border: 1px dashed var(--kh-line-2); border-radius: 14px; text-align: center; }
.kh-den__empty b { font-size: 16px; }
body.kh .kh-den__empty p { max-width: 360px; margin: 8px auto 18px; font-size: 13px; color: var(--kh-muted); }
.kh-den__empty a { display: inline-block; padding: 9px 16px; border: 1px solid var(--kh-line-2); border-radius: 9px; font-size: 12px; font-weight: 800; }
.kh-den__empty a:hover { border-color: #fff; }

@media (max-width: 960px) {
    .kh-den { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 24px; }
    .kh-den__side { position: static; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .kh-den__out { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .kh-den__side { grid-template-columns: minmax(0, 1fr); }
    body.kh .kh-member__no { font-size: 22px; }
    .kh-stub { grid-template-columns: 52px minmax(0, 1fr) 72px; gap: 12px; }
    .kh-stub img { width: 52px; height: 76px; }
    .kh-den__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kh-den__tabs a { flex: 0 0 auto; }
}

/* ==========================================================================
   Төлбөрийн цонх
   ========================================================================== */
.kh-pay { width: min(400px, calc(100vw - 32px)); padding: 0; text-align: center; }
.kh-pay__ticket {
    padding: 26px 24px 22px;
    border-bottom: 2px dashed #2f3238;
    background: linear-gradient(160deg, #1d1216, #121417 70%);
}
.kh-pay__ticket .kh-eyebrow { justify-content: center; }
.kh-pay__sum { margin: 4px 0 6px; }
.kh-pay__sum b { font-size: 40px; font-weight: 800; letter-spacing: -1.5px; }
.kh-pay__sum sup { margin-left: 2px; font-size: 16px; font-weight: 800; }
body.kh .kh-pay__what { font-size: 12px; color: var(--kh-muted); }

.kh-pay__state { padding: 24px; }
.kh-spinner {
    display: block;
    width: 34px;
    height: 34px;
    margin: 6px auto 14px;
    border: 3px solid #ffffff1f;
    border-top-color: var(--kh-red);
    border-radius: 50%;
    animation: kh-spin .8s linear infinite;
}
@keyframes kh-spin { to { transform: rotate(360deg); } }
body.kh .kh-pay__state > p { font-size: 13px; color: var(--kh-muted); }
body.kh .kh-pay__err { margin-bottom: 14px; color: #ff98a4; }
.kh-pay__retry {
    padding: 10px 16px;
    border: 1px solid var(--kh-line-2);
    border-radius: 6px;
    background: none;
    font-size: 12px;
    font-weight: 700;
}
.kh-pay__qr {
    display: inline-block;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
}
.kh-pay__qr img { width: 190px; height: 190px; }
body.kh .kh-pay__hint { margin: 12px 0 0; font-size: 12px; color: var(--kh-muted); }
.kh-pay__apps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 6px;
    margin-top: 18px;
    max-height: 220px;
    overflow-y: auto;
}
.kh-pay__app { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; }
.kh-pay__app img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.kh-pay__check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    margin-top: 20px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    background: var(--kh-red);
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}
.kh-pay__check:hover { background: var(--kh-red-hover); }
.kh-pay__check:disabled { opacity: .7; cursor: wait; }
.kh-pay__check.is-done { justify-content: center; background: #1f9d5a; }
body.kh .kh-pay__note { min-height: 18px; margin: 10px 0 0; font-size: 11px; color: var(--kh-muted); }

@media (max-width: 767px) {
    .kh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
    .kh-pagehead { padding-top: 36px; }
}