@font-face {
    font-family: "Khen Display";
    src: url("/booking/khennuong/fonts/1FTV-HF-Gesco.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SVN Gilroy";
    src: url("/booking/khennuong/fonts/SVN-Gilroy Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro Local";
    src: url("/booking/khennuong/fonts/BeVietnamPro-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro Local";
    src: url("/booking/khennuong/fonts/BeVietnamPro-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Be Vietnam Pro Local";
    src: url("/booking/khennuong/fonts/BeVietnam-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Khèn_FORM WEB — màu lấy từ file thiết kế gốc */
.bf-page--khen {
    --khen-navy: #002868;
    --khen-navy-deep: #001f4f;
    --khen-blue: #1a3a6e;
    --khen-label: #16325c;
    --khen-orange: #f87000;
    --khen-orange-deep: #e06000;
    --khen-cream: #f0d8c0;
    --khen-cream-soft: #f5e4d0;
    --khen-line: #2a4068;
    --khen-mute: #7a8498;
    --khen-hint: #c47848;

    font-family: "Be Vietnam Pro Local", "Be Vietnam Pro", "SVN Gilroy", system-ui, sans-serif;
    color: var(--khen-label);
    background: var(--khen-navy) url("/booking/khennuong/bg.jpg") center / cover no-repeat fixed;
}

.bf-page--khen .bf-shell {
    padding: 36px 14px 48px;
}

.bf-page--khen .bf-hero {
    margin-bottom: 20px;
}

.bf-page--khen .bf-hero__logo {
    max-height: 78px;
    width: auto;
    max-width: min(380px, 90vw);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .28));
}

.bf-page--khen .bf-done__logo {
    max-height: 56px;
}

.bf-page--khen .bf-card {
    width: min(680px, 100%);
    background: var(--khen-cream);
    border: 0;
    border-radius: 0;
    box-shadow: 0 16px 40px rgba(0, 16, 48, .38);
    overflow: hidden;
}

.bf-page--khen .bf-card__body {
    background: transparent;
    padding: 30px 34px 22px;
}

.bf-page--khen .bf-watermark {
    top: 10%;
    width: min(480px, 82%);
    opacity: .7;
    mix-blend-mode: multiply;
}

.bf-page--khen .bf-intro {
    margin-bottom: 22px;
}

.bf-page--khen .bf-intro__eyebrow {
    margin: 0 0 8px;
    color: var(--khen-blue);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

.bf-page--khen .bf-intro__title {
    margin: 0 0 10px;
    font-family: "Khen Display", "Be Vietnam Pro Local", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--khen-orange);
    font-size: clamp(1.55rem, 5vw, 2.05rem);
    letter-spacing: .03em;
    line-height: 1.1;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}

.bf-page--khen .bf-intro__note {
    margin: 0 auto;
    max-width: 36em;
    color: var(--khen-blue);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.bf-page--khen .bf-form {
    gap: 14px 16px;
    position: relative;
    z-index: 1;
}

.bf-page--khen .bf-label {
    color: var(--khen-label);
    font-size: 13.5px;
    font-weight: 600;
}

.bf-page--khen .bf-label em {
    color: var(--khen-blue);
    font-style: normal;
}

.bf-page--khen .bf-input {
    height: 46px;
    background: rgba(245, 228, 208, .55);
    border: 1.25px solid var(--khen-line);
    border-radius: 0;
    color: var(--khen-label);
    font-size: 14.5px;
    padding: 0 12px;
}

.bf-page--khen .bf-input::placeholder {
    color: #9aa3b4;
}

.bf-page--khen .bf-input:focus {
    border-color: var(--khen-navy);
    box-shadow: 0 0 0 2px rgba(0, 40, 104, .14);
    background: #fffaf2;
}

.bf-page--khen .bf-input:disabled {
    background: rgba(230, 214, 190, .7);
    color: #8a9588;
}

.bf-page--khen .bf-input[aria-invalid="true"] {
    border-color: var(--khen-orange-deep);
    background: #fff6ef;
}

.bf-page--khen textarea.bf-input {
    min-height: 92px;
    padding: 12px;
}

.bf-page--khen .bf-hint {
    color: var(--khen-hint);
    font-size: 12px;
}

.bf-page--khen .bf-err {
    color: var(--khen-orange-deep);
}

.bf-page--khen .bf-err::before {
    background: var(--khen-orange-deep);
}

.bf-page--khen .bf-check {
    color: var(--khen-label);
    font-size: 13px;
    line-height: 1.55;
    margin-top: 4px;
}

.bf-page--khen .bf-check a {
    color: var(--khen-orange);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bf-page--khen .bf-check input {
    accent-color: var(--khen-navy);
    width: 16px;
    height: 16px;
    margin-top: 3px;
}

.bf-page--khen .bf-summary {
    background: #fff0e4;
    color: #8c3018;
}

.bf-page--khen .bf-btn {
    height: 52px;
    background: var(--khen-navy);
    color: var(--khen-orange);
    border-radius: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    gap: 12px;
}

.bf-page--khen .bf-btn:hover {
    background: var(--khen-navy-deep);
}

.bf-page--khen .bf-btn__icon {
    width: 28px;
    height: 28px;
}

.bf-page--khen .bf-btn .bf-spin {
    border-color: rgba(248, 112, 0, .35);
    border-top-color: var(--khen-orange);
}

.bf-page--khen .bf-btn--ghost {
    border-color: var(--khen-navy);
    color: var(--khen-navy);
    background: transparent;
}

.bf-page--khen .bf-btn--ghost:hover {
    background: var(--khen-navy);
    color: #fff;
}

.bf-page--khen .bf-recap {
    background: #fff;
    box-shadow: 0 0 0 1px #e0d4c4;
}

.bf-page--khen .bf-recap dt {
    color: var(--khen-mute);
}

.bf-page--khen select.bf-input {
    color: var(--khen-label);
}

.bf-page--khen .bf-done h2 {
    font-family: "Khen Display", "Be Vietnam Pro Local", sans-serif;
    color: var(--khen-orange);
    text-transform: uppercase;
}

.bf-page--khen .bf-done .bf-intro__eyebrow {
    color: var(--khen-blue);
}

/* Dải chân mây cam từ file thiết kế */
.bf-page--khen .bf-card__foot {
    background: var(--khen-cream);
}

.bf-page--khen .bf-card__foot-swirl {
    height: 34px;
    background-image: url("/booking/khennuong/footer-swirl.png");
    background-color: var(--khen-cream);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
}

@media (max-width: 560px) {
    .bf-page--khen .bf-shell {
        padding: 24px 10px 36px;
    }

    .bf-page--khen .bf-card__body {
        padding: 22px 16px 18px;
    }

    .bf-page--khen .bf-hero__logo {
        max-height: 64px;
    }

    .bf-page--khen .bf-intro__title {
        font-size: 1.45rem;
    }

    .bf-page--khen .bf-watermark {
        width: 90%;
        top: 8%;
    }

    .bf-page--khen .bf-card__foot-swirl {
        height: 28px;
    }
}