/* ============================================================
   Trâm Anh Hotel - Stylesheet
   Phong cách: Sang trọng, tinh tế - Gold trên nền trắng & than
   ============================================================ */
:root {
    --gold: #C9A227;
    --gold-dark: #A8861D;
    --gold-light: #E8CD7F;
    --dark: #1C1C1C;
    --dark-2: #2A2A2A;
    --gray: #6B6B6B;
    --gray-light: #F5F3EE;
    --white: #FFFFFF;
    --border: #E8E2D5;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-body: 'Be Vietnam Pro', 'Montserrat', 'Segoe UI', sans-serif;
    --font-script: 'Great Vibes', cursive;
    --shadow: 0 10px 40px rgba(28, 28, 28, 0.08);
    --shadow-lg: 0 20px 60px rgba(28, 28, 28, 0.14);
}

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

html { scroll-behavior: smooth; }

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #F5F3EE;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    border-radius: 10px;
    border: 2px solid #F5F3EE;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
::-webkit-scrollbar-corner { background: #F5F3EE; }
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) #F5F3EE;
}

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--gray);
    background: var(--white);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all .3s ease; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all .3s ease;
    cursor: pointer;
    line-height: 1.4;
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    color: #fff;
    border-color: var(--gold);
    box-shadow: 0 6px 18px rgba(201, 162, 39, 0.35);
}
.btn-gold:hover {
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(201, 162, 39, 0.45);
}
.btn-outline {
    background: transparent;
    color: var(--dark);
    border-color: var(--gold);
}
.btn-outline:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-2px);
}
.btn-outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.6);
}
.btn-outline-light:hover {
    background: #fff;
    color: var(--dark);
    border-color: #fff;
}
.btn-block { width: 100%; margin-top: 18px; }
.btn-lg { padding: 16px 42px; font-size: 14px; }
.btn-sm { padding: 9px 18px; font-size: 11px; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--dark);
    color: rgba(255,255,255,.75);
    font-size: 12px;
    letter-spacing: .4px;
    padding: 8px 0;
}
.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar-left i { color: var(--gold); margin-right: 6px; }
.topbar-left a { color: inherit; }
.topbar-left a:hover { color: var(--gold-light); }
.topbar-sep { opacity: .3; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right a { color: rgba(255,255,255,.75); }
.topbar-right a:hover { color: var(--gold-light); }
.topbar-right i { font-size: 13px; }
.topbar-admin { font-size: 12px; }
.topbar-user-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--gold-light) !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.topbar-user-link:hover { text-decoration: underline; }
.topbar-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    transition: all .3s;
    border: 1px solid transparent;
}
.topbar-auth-btn i { font-size: 11px; }
.topbar-auth-btn.login {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.25);
}
.topbar-auth-btn.login:hover {
    background: #fff;
    color: var(--dark);
    transform: translateY(-1px);
}
.topbar-auth-btn.register {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    box-shadow: 0 3px 10px rgba(201,162,39,.35);
}
.topbar-auth-btn.register:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(201,162,39,.45);
}
.topbar-auth-btn.admin-link {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(255,255,255,.25);
}
.topbar-auth-btn.admin-link:hover {
    background: var(--gold);
    color: #fff;
    border-color: var(--gold);
    transform: translateY(-1px);
}
.topbar-auth-btn.logout-link {
    background: transparent;
    color: rgba(255,255,255,.85);
    border-color: rgba(255,255,255,.35);
}
.topbar-auth-btn.logout-link:hover {
    background: #C0392B;
    color: #fff;
    border-color: #C0392B;
    transform: translateY(-1px);
}
.topbar-socials {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.topbar-social {
    font-size: 14px;
    transition: transform .3s ease;
    display: inline-flex;
}
.topbar-social img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    border-radius: 3px;
}
.topbar-social:hover { transform: translateY(-2px) scale(1.1); }
/* Màu thương hiệu hiển thị sẵn */
.topbar-social.ic-facebook, .topbar-social.ic-facebook-f { color: #1877F2; }
.topbar-social.ic-instagram { color: #E4405F; }
.topbar-social.ic-youtube { color: #FF0000; }
.topbar-social.ic-tiktok { color: #69C9D0; }
.topbar-social.ic-twitter { color: #1DA1F2; }
.topbar-social.ic-linkedin-in { color: #0A66C2; }
.topbar-social.ic-pinterest-p { color: #E60023; }
.topbar-social.ic-whatsapp { color: #25D366; }
.topbar-social.ic-telegram { color: #26A5E4; }
.topbar-social.ic-weixin { color: #07C160; }
.topbar-social.ic-google { color: #EA4335; }
.topbar-social.ic-globe, .topbar-social.ic-link { color: var(--gold-light); }
/* Dark topbar: tăng độ sáng cho icon màu */
.topbar-social img { filter: brightness(1.1); }

/* ---------- Language Switch ---------- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    padding: 3px 4px;
}
.lang-btn {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 16px;
    color: rgba(255,255,255,.7);
    transition: all .3s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    box-shadow: 0 2px 8px rgba(201,162,39,.4);
}
.lang-sep { color: rgba(255,255,255,.4); font-size: 11px; }

/* ---------- Header ---------- */
.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(28,28,28,.05);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.brand-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid var(--border);
    padding: 3px;
    background: #fff;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--dark);
}
.brand-sub {
    font-size: 10px;
    letter-spacing: 8px;
    color: var(--gold);
    font-weight: 600;
    margin-top: 2px;
}
.main-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}
.main-nav a {
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--dark-2);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.main-nav a:hover { color: var(--gold-dark); }
.main-nav a::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.main-nav a:hover, .main-nav a.active { color: var(--gold-dark); }
.main-nav a:hover::after, .main-nav a.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.btn-book { padding: 11px 22px; font-size: 12px; }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--dark);
}

/* ---------- Hero Slider ---------- */
.hero {
    position: relative;
    height: 88vh;
    min-height: 560px;
    max-height: 820px;
    overflow: hidden;
    background: #141414;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.35s ease, visibility 1.35s;
    overflow: hidden;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide-bg {
    position: absolute;
    inset: -4%;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.04);
    will-change: transform;
}
.hero-slide.active .hero-slide-bg {
    animation: heroKenBurns 7.5s ease-out forwards;
}
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 42%, transparent 18%, rgba(8,8,8,.55) 100%),
        linear-gradient(to bottom, rgba(12,12,12,.55), rgba(12,12,12,.12) 42%, rgba(12,12,12,.72));
    pointer-events: none;
}
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(201,162,39,.12), transparent 28%, transparent 72%, rgba(201,162,39,.1)),
        linear-gradient(to top, rgba(201,162,39,.18), transparent 32%);
    mix-blend-mode: soft-light;
    pointer-events: none;
    opacity: .85;
}
@keyframes heroKenBurns {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to { transform: scale(1.14) translate3d(-1.2%, -0.6%, 0); }
}
.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 24px;
}
.hero-slide.active .hero-script,
.hero-slide.active .hero-title,
.hero-slide.active .hero-subtitle,
.hero-slide.active .hero-btns {
    animation: heroFadeUp .9s ease both;
}
.hero-slide.active .hero-title { animation-delay: .12s; }
.hero-slide.active .hero-subtitle { animation-delay: .22s; }
.hero-slide.active .hero-btns { animation-delay: .34s; }
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-script {
    font-family: var(--font-script);
    font-size: 44px;
    color: var(--gold-light);
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(38px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
    line-height: 1.15;
    margin-bottom: 18px;
}
.hero-subtitle {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: 36px;
    max-width: 640px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}
.hero-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: transparent;
    transition: all .3s;
}
.hero-dots button.active { background: var(--gold); border-color: var(--gold); transform: scale(1.25); }
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 16px;
    transition: all .3s;
}
.hero-arrow:hover { background: var(--gold); border-color: var(--gold); }
.hero-arrow.prev { left: 24px; }
.hero-arrow.next { right: 24px; }

/* ---------- Section common ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--gray-light); }
.section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 56px;
}
.section-script {
    font-family: var(--font-script);
    font-size: 34px;
    color: var(--gold);
    margin-bottom: 4px;
}
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--dark);
    letter-spacing: 1px;
    margin-bottom: 14px;
}
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}
.section-divider::before, .section-divider::after {
    content: '';
    width: 60px;
    height: 1px;
    background: var(--gold);
}
.section-divider i { color: var(--gold); font-size: 14px; }
.section-desc { color: var(--gray); font-size: 15px; }

/* ---------- Booking widget ---------- */
.booking-widget {
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    border-radius: 6px;
    padding: 28px 32px;
    margin-top: -52px;
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 18px;
    align-items: end;
}
.booking-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 8px;
}
.booking-field input, .booking-field select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--dark);
    background: #fff;
    outline: none;
    transition: border .3s;
}
.booking-field input:focus, .booking-field select:focus { border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,39,.15); }

/* ---------- Welcome / About ---------- */
.welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.welcome-images { position: relative; }
.welcome-img-main,
.welcome-img-small,
.welcome-extra-img {
    transition: transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, filter .45s ease;
}
.welcome-img-main {
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    height: 520px;
    width: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}
.welcome-images:hover .welcome-img-main {
    transform: scale(1.025);
    filter: saturate(1.12) brightness(1.03);
    box-shadow: 0 28px 60px rgba(20,20,20,.22);
}
.welcome-img-small {
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 46%;
    border-radius: 6px;
    box-shadow: var(--shadow);
    height: 240px;
    object-fit: cover;
    z-index: 2;
}
.welcome-images:hover .welcome-img-small {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 18px 40px rgba(20,20,20,.2);
}
/* Hình dạng ảnh welcome: vuông / bo góc / tròn */
.welcome-img-main.shape-square, .welcome-img-small.shape-square, .welcome-extra-img.shape-square { border-radius: 0; }
.welcome-img-main.shape-circle, .welcome-extra-img.shape-circle { border-radius: 50%; }
.welcome-img-small.shape-circle { border-radius: 50%; }
.welcome-img-main.shape-circle, .welcome-img-small.shape-circle { overflow: hidden; }
/* Ảnh bổ sung welcome */
.welcome-extras {
    position: absolute;
    left: -18px;
    bottom: -14px;
    display: flex;
    gap: 10px;
    z-index: 2;
}
.welcome-extra-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow);
}
.welcome-badge {
    position: absolute;
    top: -26px;
    left: -26px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    text-align: center;
}
.welcome-badge strong {
    font-family: var(--font-serif);
    font-size: 34px;
    line-height: 1;
}
.welcome-badge span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.welcome-content .section-script, .welcome-content .section-title { text-align: left; }
.welcome-content .section-divider { justify-content: flex-start; }
.welcome-text { margin-bottom: 18px; }
.welcome-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 26px 0 34px;
}
.welcome-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-2);
}
.welcome-features i { color: var(--gold); }

/* ---------- Rooms ---------- */
.rooms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.rooms-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 980px;
    margin: 0 auto;
}
.rooms-grid-2 .room-card-img { height: 320px; }
.rooms-grid-2 .room-card-body { padding: 28px; }
.room-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(20,18,12,.07);
    transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .35s ease;
    border: 1px solid rgba(201,162,39,.14);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.room-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 48px rgba(20,18,12,.14);
    border-color: rgba(201,162,39,.35);
}
.room-card--featured {
    border-color: rgba(201,162,39,.42);
    box-shadow:
        0 14px 36px rgba(201,162,39,.16),
        0 0 0 1px rgba(232,205,127,.25);
    background: linear-gradient(180deg, #FFFEF8 0%, #fff 42%);
}
.room-card--featured:hover {
    box-shadow:
        0 26px 56px rgba(201,162,39,.22),
        0 0 0 1px rgba(232,205,127,.4);
}
.room-card--featured::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
}
.room-card-img { position: relative; overflow: hidden; height: 260px; }
.room-card-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(12,10,8,.55) 0%, rgba(12,10,8,.08) 42%, transparent 68%);
}
.room-card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .85s ease;
    pointer-events: none;
    z-index: 1;
}
.room-card:hover .room-card-img::after { transform: translateX(120%); }
.room-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .5s ease;
    filter: saturate(1.04);
}
.room-card:hover .room-card-img img {
    transform: scale(1.1);
    filter: saturate(1.12) brightness(1.04);
}
.room-card-type {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    background: rgba(255,255,255,.94);
    color: var(--gold-dark);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(201,162,39,.2);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.room-card-featured {
    position: absolute;
    top: 16px;
    right: 16px;
    left: auto;
    z-index: 2;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 8px 18px rgba(201,162,39,.45);
    animation: featuredPulse 2.8s ease-in-out infinite;
}
@keyframes featuredPulse {
    0%, 100% { box-shadow: 0 8px 18px rgba(201,162,39,.4); }
    50% { box-shadow: 0 8px 24px rgba(201,162,39,.65); }
}
.room-card-featured i { font-size: 10px; }
.room-card-price {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: auto;
    z-index: 2;
    background: linear-gradient(135deg, rgba(28,28,28,.92), rgba(42,36,24,.92));
    color: #FFE9A0;
    font-size: 16px;
    font-weight: 700;
    font-family: var(--font-serif);
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(232,205,127,.35);
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.room-card-price small {
    font-size: 11px;
    font-weight: 500;
    font-family: var(--font-body);
    color: rgba(255,233,160,.75);
    margin-left: 2px;
}
.room-card--featured .room-card-price {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(201,162,39,.45);
}
.room-card--featured .room-card-price small { color: rgba(255,255,255,.85); }
.room-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.room-card-body h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
}
.room-card-body h3 a {
    transition: color .25s;
}
.room-card-body h3 a:hover { color: var(--gold-dark); }
.room-card-desc {
    font-size: 13.5px;
    color: var(--gray);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.65;
}
.room-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    margin-top: auto;
    border-top: 1px solid rgba(201,162,39,.15);
    font-size: 12px;
    color: #6f685c;
}
.room-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(201,162,39,.07);
    border: 1px solid rgba(201,162,39,.14);
}
.room-card-meta i { color: var(--gold-dark); font-size: 11px; }
.room-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.room-card-actions .btn {
    flex: 1;
    justify-content: center;
}
.room-card--featured .room-card-actions .btn-outline {
    border-color: rgba(201,162,39,.4);
    color: var(--gold-dark);
}
.room-card--featured .room-card-actions .btn-outline:hover {
    background: var(--dark);
    border-color: var(--dark);
    color: #fff;
}

/* ---------- Services (image cards) ---------- */
.services-grid-img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.service-img-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    height: 320px;
    display: block;
    box-shadow: var(--shadow);
}
.service-img-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(125deg, transparent 35%, rgba(255,255,255,.25) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .9s ease;
    pointer-events: none;
}
.service-img-card:hover::after { transform: translateX(120%); }
.service-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .5s ease;
    filter: saturate(1.04);
}
.service-img-card:hover img {
    transform: scale(1.12);
    filter: saturate(1.14) brightness(1.04);
}
.service-img-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(20,20,20,.88) 0%, rgba(20,20,20,.35) 45%, rgba(20,20,20,.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    color: #fff;
    transition: background .4s ease;
}
.service-img-card:hover .service-img-overlay { background: linear-gradient(to top, rgba(168,134,29,.92) 0%, rgba(201,162,39,.55) 55%, rgba(20,20,20,.15) 100%); }
.service-img-overlay h3 {
    font-family: var(--font-serif);
    font-size: 23px;
    margin-bottom: 6px;
}
.service-img-overlay p {
    font-size: 13px;
    opacity: .9;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.service-img-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-light);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .3s;
}
.service-img-card:hover .service-img-link { color: #fff; transform: translateX(4px); }

/* ---------- Services detail page ---------- */
.services-detail {
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.service-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.service-row-reverse .service-row-img { order: 2; }
.service-row-img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 420px;
}
.service-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.service-row-img:hover img { transform: scale(1.05); }
.service-row-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(20,20,20,.85), transparent);
    color: #fff;
}
.service-row-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-light);
    background: rgba(20,20,20,.5);
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.service-row-overlay h3 {
    font-family: var(--font-serif);
    font-size: 28px;
}
.service-row-number {
    font-family: var(--font-serif);
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--gold);
    margin-bottom: 10px;
}
.service-row-title {
    font-family: var(--font-serif);
    font-size: 30px;
    color: var(--dark);
    margin-bottom: 6px;
}
.service-row-desc {
    margin-bottom: 16px;
    font-size: 14.5px;
}

/* ---------- Services (icon cards, legacy) ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.service-card {
    background: #fff;
    border-radius: 6px;
    padding: 40px 30px;
    text-align: center;
    border: 1px solid var(--border);
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--gold-light), var(--gold) 60%, var(--gold-dark));
    opacity: 0;
    transition: opacity .4s ease;
    z-index: 0;
}
.service-card:hover::before { opacity: 1; }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.service-card > * { position: relative; z-index: 1; }
.service-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--gray-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    transition: all .4s;
}
.service-card:hover .service-icon { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.service-card h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--dark);
    margin-bottom: 10px;
}
.service-card p { font-size: 13.5px; }
.service-card .service-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-dark);
}
.service-card:hover h3, .service-card:hover p, .service-card:hover .service-link { color: #fff; }
.service-card:hover .service-icon { color: #fff; }

/* ---------- Stats ---------- */
.stats {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 80px 0;
    background: #1a1a1a;
}
.stats::before {
    content: '';
    position: absolute;
    inset: -8%;
    background: url('../images/lobby.jpg') center/cover;
    filter: saturate(1.1) contrast(1.05);
    animation: bgDrift 24s ease-in-out infinite alternate;
    will-change: transform;
}
.stats::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(201,162,39,.14), transparent 55%),
        linear-gradient(rgba(18,18,18,.82), rgba(18,18,18,.88));
}
.stats .container { position: relative; z-index: 1; }
@keyframes bgDrift {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to { transform: scale(1.16) translate3d(-2%, -1%, 0); }
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}
.stat-number {
    font-family: var(--font-serif);
    font-size: 52px;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1.2;
}
.stat-number sup { font-size: 26px; }
.stat-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .85;
    margin-top: 6px;
}

/* ---------- Gallery ---------- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.gallery-masonry {
    grid-auto-rows: 120px;
    grid-auto-flow: dense;
}
.gallery-masonry .gallery-item { height: auto; grid-row: span 2; }
.gallery-masonry .gallery-item.tall { grid-row: span 3; }
.gallery-masonry .gallery-item.wide { grid-column: span 2; grid-row: span 2; }
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 240px;
    cursor: zoom-in;
    display: block;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(20,20,20,.08);
    transform: translateY(18px);
    opacity: 0;
    transition: transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease, box-shadow .4s ease;
}
.gallery-item.is-inview {
    transform: translateY(0);
    opacity: 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .85s cubic-bezier(.22,.61,.36,1), filter .5s ease;
    filter: saturate(1.05) brightness(.97);
}
.gallery-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(125deg, transparent 30%, rgba(255,248,220,.35) 48%, transparent 65%);
    transform: translateX(-130%) skewX(-12deg);
    transition: transform .9s ease;
    pointer-events: none;
}
.gallery-item:hover {
    box-shadow: 0 18px 40px rgba(20,20,20,.2);
}
.gallery-item:hover img {
    transform: scale(1.14);
    filter: saturate(1.15) brightness(1.05);
}
.gallery-item:hover::before { transform: translateX(130%) skewX(-12deg); }
.gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to top, rgba(14,14,14,.78) 0%, rgba(14,14,14,.35) 45%, rgba(201,162,39,.18) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .4s ease;
    color: #fff;
    backdrop-filter: blur(0);
}
.gallery-item:hover .gallery-overlay {
    opacity: 1;
    backdrop-filter: blur(1px);
}
.gallery-overlay i {
    font-size: 26px;
    color: var(--gold-light);
    margin-bottom: 8px;
    transform: translateY(10px) scale(.85);
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.gallery-overlay span {
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: translateY(10px);
    transition: transform .45s cubic-bezier(.22,.61,.36,1) .05s;
    text-align: center;
    padding: 0 12px;
}
.gallery-item:hover .gallery-overlay i,
.gallery-item:hover .gallery-overlay span {
    transform: translateY(0) scale(1);
}

/* ---------- Testimonials ---------- */
.testimonials-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(201,162,39,.06), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(201,162,39,.06), transparent 40%),
        var(--gray-light);
}
.testimonial-slider {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 56px;
}
.testi-track { position: relative; }
.testi-slide {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 52px 56px 44px;
    text-align: center;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    inset: 0;
    transition: opacity .6s ease, visibility .6s, transform .6s ease;
    transform: translateY(14px) scale(.98);
}
.testi-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0) scale(1);
}
.testi-quote-mark {
    width: 64px;
    height: 64px;
    margin: -84px auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(201,162,39,.4);
    border: 4px solid var(--gray-light);
}
.testimonial-stars { color: var(--gold); margin-bottom: 16px; letter-spacing: 4px; font-size: 15px; }
.testimonial-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.8;
    color: var(--dark-2);
    margin-bottom: 26px;
}
.testi-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.testi-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(201,162,39,.35);
}
.testi-author-info { text-align: left; }
.testimonial-name {
    font-weight: 700;
    color: var(--dark);
    font-size: 15px;
}
.testimonial-position { font-size: 12.5px; color: var(--gold-dark); margin-top: 2px; }
.testi-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--dark-2);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all .3s;
    z-index: 3;
}
.testi-nav:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    border-color: var(--gold);
}
.testi-prev { left: 0; }
.testi-next { right: 0; }
.testi-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}
.testi-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: transparent;
    cursor: pointer;
    transition: all .3s;
    padding: 0;
}
.testi-dots button:hover { background: var(--gold-light); }
.testi-dots button.active {
    background: var(--gold);
    width: 28px;
    border-radius: 10px;
}

/* ---------- Page editor columns ---------- */
.pe-columns {
    display: grid;
    gap: 28px;
    align-items: start;
}
.pe-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pe-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pe-col { min-width: 0; }
.pe-col-media { margin-bottom: 16px; }
.pe-col-media img { width: 100%; border-radius: 10px; box-shadow: var(--shadow); object-fit: cover; max-height: 240px; }
.pe-col-title { font-family: var(--font-serif); font-size: 20px; color: var(--dark); margin-bottom: 10px; }
.pe-col-text { color: var(--gray); font-size: 14.5px; line-height: 1.8; }
.pe-col-text p { margin-bottom: 10px; }
.pe-col-text ul, .pe-col-text ol { margin: 0 0 10px 20px; }
.pe-col-text a { color: var(--gold-dark); }
@media (max-width: 768px) {
    .pe-cols-2, .pe-cols-3 { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.cta {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: #1a1a1a;
}
.cta::before {
    content: '';
    position: absolute;
    inset: -8%;
    background: url('../images/pool.jpg') center/cover;
    filter: saturate(1.08);
    animation: bgDrift 26s ease-in-out infinite alternate;
}
.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(201,162,39,.16), transparent 50%),
        linear-gradient(rgba(18,18,18,.78), rgba(18,18,18,.84));
}
.cta > * { position: relative; z-index: 1; }
.cta-script { font-family: var(--font-script); font-size: 40px; color: var(--gold-light); }
.cta-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    margin: 10px 0 18px;
}
.cta-desc { max-width: 560px; margin: 0 auto 34px; opacity: .9; }

/* ---------- Promo banner ---------- */
.promo-banner {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding: 96px 0;
    text-align: center;
    color: #fff;
}
.promo-banner::before {
    content: '';
    position: absolute;
    inset: -8%;
    background: inherit;
    background-size: cover;
    background-position: center;
    animation: bgDrift 22s ease-in-out infinite alternate;
    filter: saturate(1.1);
}
.promo-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(201,162,39,.18), transparent 55%),
        linear-gradient(rgba(14,14,14,.72), rgba(14,14,14,.62));
}
.promo-content { position: relative; z-index: 1; }
.promo-script {
    font-family: var(--font-script);
    font-size: 30px;
    color: var(--gold-light);
    margin-bottom: 8px;
}
.promo-title {
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    margin: 10px 0 18px;
}
.promo-desc { max-width: 560px; margin: 0 auto 34px; opacity: .92; }
.promo-content .btn i { margin-left: 8px; }
@media (max-width: 640px) {
    .promo-banner { padding: 64px 0; }
    .promo-banner::before,
    .page-hero::before,
    .stats::before,
    .cta::before { animation-duration: 16s; }
}

/* ---------- Page hero ---------- */
.page-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: -8%;
    background: inherit;
    background-size: cover;
    background-position: center;
    animation: bgDrift 20s ease-in-out infinite alternate;
    filter: saturate(1.1) contrast(1.04);
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, transparent 10%, rgba(8,8,8,.45) 100%),
        linear-gradient(to bottom, rgba(12,12,12,.62), rgba(12,12,12,.42) 50%, rgba(12,12,12,.7)),
        linear-gradient(90deg, rgba(201,162,39,.12), transparent 30%, transparent 70%, rgba(201,162,39,.1));
}
.page-hero-content {
    position: relative;
    z-index: 2;
    padding: 100px 24px 70px;
    animation: heroFadeUp .85s ease both;
}
.page-hero-title {
    font-family: var(--font-serif);
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: 3px;
    text-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.page-hero-crumb { margin-top: 14px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.page-hero-crumb a { color: var(--gold-light); }
.page-hero-crumb a:hover { color: #fff; }
.page-hero-crumb span { opacity: .7; margin: 0 8px; }

/* Gallery page hero — elevated */
.page-hero--gallery {
    min-height: 52vh;
    min-height: clamp(380px, 52vh, 620px);
    background: #12110f;
}
.page-hero--gallery .page-hero-bg {
    position: absolute;
    inset: -6%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(1.12) contrast(1.06) brightness(.92);
    animation: galleryHeroKen 18s ease-in-out infinite alternate;
    will-change: transform;
}
.page-hero--gallery::before { display: none; }
.page-hero--gallery::after {
    z-index: 1;
    background:
        radial-gradient(ellipse at 50% 38%, transparent 8%, rgba(8,8,8,.5) 100%),
        linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.28) 45%, rgba(10,10,10,.78)),
        linear-gradient(90deg, rgba(201,162,39,.16), transparent 28%, transparent 72%, rgba(201,162,39,.14));
}
@keyframes galleryHeroKen {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to { transform: scale(1.14) translate3d(-1.5%, -0.8%, 0); }
}
.page-hero--gallery .page-hero-content {
    padding: 120px 24px 88px;
    max-width: 780px;
    margin: 0 auto;
}
.page-hero-script {
    font-family: var(--font-script);
    font-size: clamp(32px, 4.5vw, 48px);
    color: var(--gold-light);
    margin-bottom: 6px;
    text-shadow: 0 2px 16px rgba(0,0,0,.45);
    animation: heroFadeUp .85s ease both;
}
.page-hero--gallery .page-hero-title {
    font-size: clamp(36px, 5.5vw, 58px);
    letter-spacing: 4px;
    margin-bottom: 0;
    animation: heroFadeUp .9s ease .1s both;
}
.page-hero-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0 16px;
    color: var(--gold);
    animation: heroFadeUp .9s ease .18s both;
}
.page-hero-divider::before,
.page-hero-divider::after {
    content: '';
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,205,127,.75));
}
.page-hero-divider::after {
    background: linear-gradient(90deg, rgba(232,205,127,.75), transparent);
}
.page-hero-divider i { font-size: 12px; opacity: .9; }
.page-hero--gallery .page-hero-crumb {
    animation: heroFadeUp .9s ease .26s both;
    opacity: .92;
}
@media (prefers-reduced-motion: reduce) {
    .page-hero--gallery .page-hero-bg { animation: none !important; }
}

/* ---------- About page ---------- */
.about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-story img { border-radius: 6px; box-shadow: var(--shadow-lg); height: 460px; width: 100%; object-fit: cover; }
.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 60px;
}
.value-card {
    text-align: center;
    padding: 36px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    transition: all .3s;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.value-card i {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.value-card h4 { font-family: var(--font-serif); font-size: 19px; color: var(--dark); margin-bottom: 8px; }
.value-card p { font-size: 13.5px; }

/* ---------- Room detail ---------- */
.room-detail { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
.room-detail-gallery { position: relative; }
.room-detail-gallery img { border-radius: 6px; box-shadow: var(--shadow); width: 100%; height: 480px; object-fit: cover; }
.room-detail-info h1 {
    font-family: var(--font-serif);
    font-size: 34px;
    color: var(--dark);
    margin-bottom: 6px;
}
.room-detail-price {
    font-size: 26px;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 18px;
}
.room-detail-price small { font-size: 13px; color: var(--gray); font-weight: 400; }
.room-detail-desc { margin-bottom: 24px; line-height: 1.9; }
.room-detail-desc p { margin-bottom: 8px; }
.room-desc-list {
    list-style: none;
    margin: 8px 0 14px;
}
.room-desc-list li {
    position: relative;
    padding: 5px 0 5px 26px;
    font-size: 14px;
    color: var(--dark-2);
}
.room-desc-list li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 14px;
}
.room-detail-facts {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.room-detail-facts li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dark-2); }
.room-detail-facts i { color: var(--gold); }
.amenities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.amenities-list span {
    background: var(--gray-light);
    border: 1px solid var(--border);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12.5px;
    color: var(--dark-2);
}
.amenities-list i { color: var(--gold); margin-right: 6px; }
.booking-sidebar {
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 30px;
    position: sticky;
    top: 110px;
}
.booking-sidebar h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    color: var(--dark);
    margin-bottom: 20px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 7px;
}
.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 14px;
    background: #fff;
    color: var(--dark);
    outline: none;
    transition: border .3s;
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,39,.15); }

/* ---------- Forms ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }
.contact-info-card {
    background: var(--dark);
    color: #fff;
    border-radius: 6px;
    padding: 40px;
}
.contact-info-card h3 { font-family: var(--font-serif); font-size: 26px; margin-bottom: 24px; }
.contact-info-list li {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
    align-items: flex-start;
}
.contact-info-list i {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.contact-info-list strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; margin-bottom: 2px; }
.contact-form-wrap { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 40px; box-shadow: var(--shadow); }
/* Honeypot — ẩn khỏi người dùng thật */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
textarea.form-control { resize: vertical; min-height: 130px; }

/* ---------- Alert ---------- */
.alert {
    padding: 16px 20px;
    border-radius: 4px;
    margin-bottom: 22px;
    font-size: 14px;
    border: 1px solid transparent;
}
.alert-success { background: #F0F9EB; color: #3C7A1E; border-color: #CDE8BC; }
.alert-error { background: #FDECEC; color: #B3261E; border-color: #F5C6C2; }
.alert-info { background: #EFF6FD; color: #1C5D99; border-color: #C7E0F5; }

/* ---------- Filter tabs (gallery) ---------- */
.filter-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.filter-tab {
    padding: 9px 22px;
    border: 2px solid var(--border);
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark-2);
    border-radius: 2px;
    transition: all .3s;
}
.filter-tab:hover { border-color: var(--gold); color: var(--gold-dark); }
.filter-tab.active { background: var(--gold); color: #fff; border-color: var(--gold-dark); box-shadow: 0 4px 12px rgba(201,162,39,.25); }

/* ---------- Footer ---------- */
.site-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255,255,255,.78);
    background: #12110f;
}
.footer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.04);
    pointer-events: none;
}
.footer-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 12% 18%, rgba(201,162,39,.22), transparent 55%),
        radial-gradient(ellipse 70% 50% at 88% 78%, rgba(168,134,29,.14), transparent 50%),
        linear-gradient(165deg, rgba(14,12,10,.68) 0%, rgba(20,18,16,.62) 42%, rgba(12,11,10,.78) 100%);
}
.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .28;
    background-image:
        linear-gradient(rgba(232,205,127,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,205,127,.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.site-footer::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: min(720px, 90%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(232,205,127,.55), var(--gold), rgba(232,205,127,.55), transparent);
    pointer-events: none;
    z-index: 1;
}
.site-footer > *:not(.footer-bg) { position: relative; z-index: 2; }

/* Newsletter bar */
.footer-newsletter {
    position: relative;
    background:
        linear-gradient(120deg, rgba(28,28,28,.12), transparent 40%),
        linear-gradient(135deg, #E8CD7F 0%, #C9A227 48%, #A8861D 100%);
    padding: 40px 0;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.12), 0 18px 40px rgba(0,0,0,.18);
}
.footer-newsletter::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,.22), transparent 42%),
        radial-gradient(circle at 82% 70%, rgba(0,0,0,.12), transparent 45%);
}
.footer-newsletter-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.fn-script {
    font-family: var(--font-script);
    font-size: 28px;
    color: rgba(255,255,255,.9);
    line-height: 1.2;
}
.fn-title {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-top: 2px;
}
.fn-form {
    display: flex;
    gap: 0;
    background: #fff;
    border-radius: 40px;
    padding: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    min-width: 380px;
}
.fn-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    background: transparent;
    color: var(--dark-2);
    border-radius: 40px;
}
.fn-btn {
    border-radius: 40px;
    padding: 10px 26px;
    font-size: 12px;
    box-shadow: none;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
}
.fn-btn:hover { transform: none; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 44px;
    padding: 74px 24px 54px;
}
.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    text-decoration: none;
}
.footer-logo-mark {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(145deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.footer-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    display: block;
    padding: 3px;
}
.footer-logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.footer-logo-name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #fff;
    line-height: 1.05;
    text-wrap: balance;
}
.footer-logo-rule {
    display: block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold), transparent);
}
.footer-logo-sub {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .42em;
    color: var(--gold-light);
    text-transform: uppercase;
    line-height: 1;
    padding-left: 1px;
}
.footer-logo:hover .footer-logo-name { color: var(--gold-light); }
.footer-logo:hover .footer-logo-rule {
    width: 48px;
    transition: width .35s ease;
}
.footer-logo-rule { transition: width .35s ease; }
.footer-desc { font-size: 13.5px; margin-bottom: 20px; line-height: 1.8; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(232,205,127,.55);
    background: rgba(201,162,39,.08);
    box-shadow: 0 0 0 1px rgba(201,162,39,.12), inset 0 0 12px rgba(232,205,127,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F3E6C0;
    transition: all .35s ease;
}
.footer-social a:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    border-color: #FFE9A0;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(201,162,39,.4), 0 0 0 1px rgba(255,233,160,.35);
}
.social-icon-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.footer-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap;
}
.footer-rating i { color: var(--gold-light); font-size: 13px; }
.footer-rating span { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: #fff; }
.footer-rating small { font-size: 12px; color: rgba(255,255,255,.55); }
.footer-ota { margin-top: 18px; }
.footer-ota-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 8px;
}
.footer-ota-list { display: flex; gap: 8px; flex-wrap: wrap; }
/* Layout 1: hàng ngang */
.footer-ota-list.layout-row .ota-badge { flex: 0 0 auto; }
/* Layout 2: lưới */
.footer-ota-list.layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.footer-ota-list.layout-grid .ota-badge { width: 100%; }
.ota-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 4px 10px;
    border-radius: 6px;
    background: #fff;
    transition: all .3s;
    box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
.ota-badge-img {
    height: 22px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
}
.ota-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark-2);
    white-space: nowrap;
}
.ota-badge:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.footer-title {
    font-family: var(--font-serif);
    color: #fff;
    font-size: 19px;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}
.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background: var(--gold);
}
.footer-contact li, .footer-links li, .footer-hours li { margin-bottom: 13px; font-size: 13.5px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact i { color: var(--gold); margin-top: 4px; }
.footer-links a {
    position: relative;
    padding-left: 18px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}
.footer-links a::before {
    content: '\f105';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 12px;
}
.footer-links a:hover { color: var(--gold-light); padding-left: 22px; }
.footer-hours li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255,248,230,.08);
    border: 1px solid rgba(232,205,127,.22);
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    transition: all .3s;
}
.footer-hours li:hover {
    background: rgba(201,162,39,.16);
    border-color: rgba(232,205,127,.5);
}
.footer-hours span {
    color: #F3E6C0;
    font-weight: 500;
    letter-spacing: .3px;
}
.footer-hours strong {
    color: #FFE9A0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.footer-bottom {
    border-top: 1px solid rgba(201,162,39,.18);
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
    padding: 22px 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.5);
    backdrop-filter: blur(2px);
}
.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* ---------- Zalo float button ---------- */
.zalo-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0,104,255,.4);
    z-index: 999;
    transition: all .3s;
}
.zalo-float img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0,104,255,.45);
    border: 3px solid #fff;
}
.zalo-float:hover { transform: scale(1.08); }
.zalo-float:hover img { box-shadow: 0 10px 28px rgba(0,104,255,.55); }
.zalo-float-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00C853;
    border: 2px solid #fff;
    z-index: 2;
}
.zalo-float-tip {
    position: absolute;
    right: 72px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: #fff;
    color: #0068FF;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}
.zalo-float-tip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #fff;
}
.zalo-float:hover .zalo-float-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}
@keyframes zaloPulse {
    0% { box-shadow: 0 0 0 0 rgba(0,104,255,.5); }
    70% { box-shadow: 0 0 0 16px rgba(0,104,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,104,255,0); }
}
.zalo-float { animation: zaloPulse 2.5s infinite; }

/* ---------- Payment page ---------- */
.pay-page-block {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 34px 36px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    transition: all .3s;
}
.pay-page-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pay-page-icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 16px;
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
}
.pay-page-content { flex: 1; }
.pay-page-content h3 {
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--dark);
    margin-bottom: 10px;
}
.pay-page-content p { font-size: 14px; color: var(--gray); line-height: 1.8; margin-bottom: 14px; }
.pay-page-content ul { list-style: none; }
.pay-page-content ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--dark-2);
    margin-bottom: 8px;
}
.pay-page-content ul li i { color: var(--gold); }
.pay-cards { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark);
    background: var(--gray-light);
}
.pay-badge i { font-size: 22px; color: var(--gold-dark); }
.pay-bank-info {
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 18px;
    margin-bottom: 12px;
    max-width: 480px;
}
.pay-bank-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
}
.pay-bank-row:last-child { border-bottom: none; }
.pay-bank-row span { color: var(--gray); }
.pay-bank-row strong { color: var(--dark); }
@media (max-width: 640px) {
    .pay-page-block { flex-direction: column; padding: 26px 22px; }
}

/* ---------- Booking page ---------- */
.booking-page-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }

/* Payment methods */
.payment-section { margin-bottom: 24px; }
.payment-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 12px;
}
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.payment-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    cursor: pointer;
    background: #fff;
    transition: all .3s;
}
.payment-card:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.payment-card.selected {
    border-color: var(--gold);
    background: #FFFDF5;
    box-shadow: 0 6px 18px rgba(201,162,39,.18);
    outline: 2px solid rgba(201,162,39,.35);
    outline-offset: 2px;
}
.payment-card input { position: absolute; opacity: 0; pointer-events: none; }
.payment-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--gray-light);
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gold-dark);
    transition: all .3s;
}
.payment-card.selected .payment-icon {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    border-color: var(--gold);
}
.payment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.payment-name { font-weight: 700; color: var(--dark); font-size: 13.5px; line-height: 1.3; }
.payment-desc { font-size: 11.5px; color: var(--gray); line-height: 1.4; }
.payment-check {
    margin-left: auto;
    color: var(--gold-dark);
    font-size: 22px;
    opacity: 0;
    transform: scale(.5);
    transition: all .3s;
}
.payment-card.selected .payment-check { opacity: 1; transform: scale(1); }

/* Live VietQR block on booking form */
.vietqr-live {
    background: #fff !important;
    border: 2px solid var(--gold) !important;
    box-shadow: 0 6px 20px rgba(201,162,39,.15);
    text-align: center;
}
.vietqr-live h4 { font-size: 18px; }
.vietqr-live p { max-width: 460px; margin-left: auto; margin-right: auto; }
.vqr-frame {
    background: #fff;
    padding: 14px;
    border-radius: 16px;
    border: 2px solid rgba(201,162,39,.35);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.vqr-frame:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(201,162,39,.2);
}
.vietqr-live .bs-bank-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13.5px; }
.vietqr-live .bs-bank-row:last-child { border-bottom: none; }
.vietqr-live .bs-bank-row span { color: var(--gray); font-weight: 600; }
.vietqr-live .bs-bank-row strong { color: var(--dark); font-weight: 700; }

/* Booking summary sidebar */
.booking-summary {
    position: sticky;
    top: 110px;
    background:
        linear-gradient(180deg, #FFFEF8 0%, #fff 28%),
        #fff;
    border: 1px solid rgba(201,162,39,.28);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 18px 48px rgba(20,18,12,.1),
        0 0 0 1px rgba(255,255,255,.6) inset;
}
.booking-summary::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
}
.booking-summary > .bs-title,
.booking-summary > .bs-room,
.booking-summary > .bs-row,
.booking-summary > .bs-subtotal,
.booking-summary > .bs-total,
.booking-summary > .bs-paypal-usd,
.booking-summary > .bs-note,
.booking-summary > .bs-badges,
.booking-summary > .btn {
    margin-left: 26px;
    margin-right: 26px;
}
.booking-summary > .bs-title { margin-top: 22px; }
.booking-summary > .btn { margin-bottom: 26px; }
.bs-title {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--dark);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(201,162,39,.22);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bs-title i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    box-shadow: 0 6px 14px rgba(201,162,39,.35);
}
.bs-room {
    display: flex;
    gap: 14px;
    align-items: center;
    background: linear-gradient(135deg, rgba(201,162,39,.08), rgba(255,248,230,.55));
    border: 1px solid rgba(201,162,39,.22);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
    transition: box-shadow .3s, border-color .3s;
}
.bs-room:hover {
    border-color: rgba(201,162,39,.4);
    box-shadow: 0 8px 20px rgba(201,162,39,.12);
}
.bs-room-img {
    width: 88px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid rgba(201,162,39,.3);
    box-shadow: 0 4px 12px rgba(20,20,20,.1);
}
.bs-room-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.bs-room:hover .bs-room-img img { transform: scale(1.08); }
.bs-room-name { font-weight: 700; color: var(--dark); font-size: 14.5px; line-height: 1.35; }
.bs-room-price { color: var(--gold-dark); font-size: 14px; font-weight: 700; margin-top: 4px; }
.bs-room-price small { font-size: 11px; font-weight: 400; color: var(--gray); }
.bs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    font-size: 13.5px;
    color: #7a7468;
}
.bs-row span:last-child { color: var(--dark-2); font-weight: 600; }
.bs-subtotal {
    border: 1px dashed rgba(201,162,39,.35);
    border-radius: 8px;
    background: rgba(201,162,39,.04);
    margin-top: 10px;
    padding: 8px 12px;
}
.bs-subtotal .bs-row { border-bottom: none; padding: 7px 0; }
.bs-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1C1C1C 0%, #2A2418 100%);
    box-shadow: 0 10px 24px rgba(20,20,20,.18);
}
.bs-total span {
    font-weight: 700;
    color: rgba(255,255,255,.88);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.bs-total strong {
    color: #FFE9A0;
    font-size: 24px;
    font-family: var(--font-serif);
    font-weight: 700;
}
.bs-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: linear-gradient(135deg, #F7F1DF, #FFFDF5);
    border: 1px solid rgba(201,162,39,.28);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    color: #6B5A2A;
    margin: 16px 0;
    line-height: 1.55;
}
.bs-note i { color: var(--gold-dark); margin-top: 2px; }
.bs-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.bs-badge {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(201,162,39,.2);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--dark-2);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    transition: transform .25s, border-color .25s;
}
.bs-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(201,162,39,.45);
}
.bs-badge.momo, .bs-badge.vietqr { background: var(--dark); }
.momo-logo {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
    color: #fff;
    background: linear-gradient(135deg, #e1357d, #b1205f);
    padding: 4px 5px;
    border-radius: 3px;
    line-height: 1;
}
.vietqr-logo {
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1;
}
.bs-badge.vietqr { background: #0066B3; }
.booking-summary > .btn.btn-outline {
    border-color: rgba(201,162,39,.4);
    color: var(--gold-dark);
}
.booking-summary > .btn.btn-outline:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    border-color: transparent;
    color: #fff;
}

/* Booking success */
.booking-success-card {
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 56px 40px;
    text-align: center;
}
.bs-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(201,162,39,.4);
}
.bs-code {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 700;
    color: var(--gold-dark);
    letter-spacing: 4px;
    margin: 16px 0 22px;
}
.bs-summary {
    max-width: 460px;
    margin: 0 auto 26px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 22px;
}
.bs-row.total { font-size: 16px; }
.bs-row.total span:last-child { color: var(--gold-dark); font-size: 22px; font-family: var(--font-serif); font-weight: 700; }
.bs-next {
    max-width: 560px;
    margin: 0 auto 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 26px 30px;
    text-align: left;
}
.bs-next h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--dark);
    margin-bottom: 10px;
}
.bs-next h4 i { color: var(--gold-dark); margin-right: 8px; }
.bs-next p { font-size: 13.5px; color: var(--gray); margin-bottom: 18px; line-height: 1.7; }
.bs-bank {
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 18px;
    margin-bottom: 18px;
}
.bs-bank-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13.5px;
}
.bs-bank-row:last-child { border-bottom: none; }
.bs-bank-row span { color: var(--gray); }
.bs-bank-row strong { color: var(--dark); }

@media (max-width: 992px) {
    .payment-grid { grid-template-columns: 1fr; }
    .booking-page-grid { gap: 28px; }
    .booking-summary { position: static; top: auto; }
}
.room-select-card {
    border: 1.5px solid rgba(201,162,39,.18);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all .3s ease;
    background: #fff;
    box-shadow: 0 2px 10px rgba(20,20,20,.04);
}
.room-select-card:hover {
    border-color: rgba(201,162,39,.45);
    background: #FFFEF8;
    box-shadow: 0 8px 22px rgba(201,162,39,.12);
    transform: translateY(-2px);
}
.room-select-card.selected {
    border-color: var(--gold);
    background: linear-gradient(135deg, #FFFDF5, #FBF6E8);
    box-shadow: 0 10px 26px rgba(201,162,39,.18);
    outline: 2px solid rgba(201,162,39,.28);
    outline-offset: 2px;
}
.room-select-card input { accent-color: var(--gold); width: 18px; height: 18px; flex-shrink: 0; }
.room-select-card img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(201,162,39,.2);
    transition: transform .4s ease;
}
.room-select-card:hover img,
.room-select-card.selected img { transform: scale(1.04); }
.room-select-card .rs-name { font-weight: 700; color: var(--dark); font-size: 14.5px; }
.room-select-card .rs-price { color: var(--gold-dark); font-size: 13.5px; font-weight: 800; margin-top: 2px; }
.room-select-card.selected .rs-name { color: #5C4A1A; }

@media (max-width: 640px) {
    .booking-page-grid { gap: 22px; }
    .payment-card { padding: 12px 14px; }
    .payment-icon { width: 38px; height: 38px; font-size: 18px; }
    .payment-name { font-size: 13px; }
    .booking-success-card { padding: 38px 22px; }
    .bs-code { font-size: 26px; letter-spacing: 2px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(8,8,8,.94);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
    opacity: 0;
    transition: opacity .35s ease;
}
.lightbox.open {
    display: flex;
    opacity: 1;
    animation: lightboxIn .35s ease;
}
@keyframes lightboxIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.lightbox img {
    max-width: 92vw;
    max-height: 85vh;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(201,162,39,.25);
    animation: lightboxImgIn .45s cubic-bezier(.22,.61,.36,1);
}
@keyframes lightboxImgIn {
    from { opacity: 0; transform: scale(.94) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 30px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 20px;
}
.lightbox-close:hover { background: var(--gold); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    transition: background .2s;
}
.lightbox-nav:hover { background: var(--gold); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.lightbox-caption { color: rgba(255,255,255,.9); font-size: 14px; margin-top: 12px; text-align: center; }
.lightbox-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
}
.lightbox-count { color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; }
.lightbox-close-btn {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}
.lightbox-close-btn:hover { background: var(--gold); }
@media (max-width: 640px) {
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
}

/* ---------- Auth pages ---------- */
.auth-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 40px 38px;
    box-shadow: var(--shadow-lg);
}
.auth-header {
    text-align: center;
    margin-bottom: 28px;
}
.auth-header i {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.auth-header h2 {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--dark);
    margin-bottom: 6px;
}
.auth-header p { font-size: 13.5px; color: var(--gray); }
.auth-footer {
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 14px;
    color: var(--gray);
}
.auth-footer a { color: var(--gold-dark); font-weight: 700; }
.auth-footer a:hover { text-decoration: underline; }
.auth-tabs {
    display: flex;
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 24px;
    gap: 5px;
}
.auth-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .5px;
    background: transparent;
    color: var(--gray);
    cursor: pointer;
    transition: all .3s;
}
.auth-tab i { font-size: 14px; }
.auth-tab:hover { color: var(--gold-dark); }
.auth-tab.active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    color: #fff;
    box-shadow: 0 6px 16px rgba(201,162,39,.35);
}
.forgot-link { font-size: 13px; color: var(--gold-dark); font-weight: 600; }
.forgot-link:hover { text-decoration: underline; }
.auth-success {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.auth-success > i {
    font-size: 64px;
    color: var(--gold);
    margin-bottom: 16px;
}
.auth-success h2 { font-family: var(--font-serif); font-size: 28px; color: var(--dark); margin-bottom: 10px; }

/* ---------- User menu (header) ---------- */
.user-menu { position: relative; }
.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-light);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 5px 12px 5px 5px;
    cursor: pointer;
    transition: all .3s;
}
.user-menu-btn:hover { border-color: var(--gold); }
.user-menu-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-menu-name { font-size: 13px; font-weight: 600; color: var(--dark); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-caret { font-size: 10px; color: var(--gray); }
.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 52px;
    width: 230px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(28,28,28,.15);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .25s;
    z-index: 1000;
}
.user-menu.open .user-menu-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.user-menu-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--dark-2);
    transition: all .2s;
}
.user-menu-dropdown a:hover { background: var(--gray-light); color: var(--gold-dark); }
.user-menu-dropdown a i { width: 18px; text-align: center; color: var(--gold); }
.user-menu-divider { border-top: 1px solid var(--border); margin: 6px 0; }
.user-menu-dropdown a.user-menu-logout { color: var(--red); }
.user-menu-dropdown a.user-menu-logout:hover { background: #FDECEC; }
.user-menu-dropdown a.user-menu-logout i { color: var(--red); }

/* ---------- Account page ---------- */
.account-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}
.account-sidebar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    position: sticky;
    top: 110px;
    box-shadow: var(--shadow);
}
.account-user { text-align: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.account-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    box-shadow: 0 10px 24px rgba(201,162,39,.3);
}
.account-user-name { font-family: var(--font-serif); font-size: 19px; font-weight: 700; color: var(--dark); }
.account-user-email { font-size: 12.5px; color: var(--gray); margin-top: 3px; word-break: break-all; }
.profile-avatar-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold-light);
    box-shadow: 0 8px 20px rgba(201,162,39,.3);
    margin: 0 auto;
}
.account-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.account-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-2);
    transition: all .25s;
}
.account-nav a:hover { background: var(--gray-light); color: var(--gold-dark); }
.account-nav a.active {
    background: linear-gradient(90deg, rgba(201,162,39,.15), transparent);
    color: var(--gold-dark);
    font-weight: 700;
    border-left: 3px solid var(--gold);
}
.account-nav a i { width: 20px; text-align: center; color: var(--gold); }
.account-content { min-width: 0; }
.card-account {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    box-shadow: var(--shadow);
    margin-bottom: 24px;
}
.card-account-title {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--dark);
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gold);
}
.card-account-title i { color: var(--gold-dark); margin-right: 8px; }
.account-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.account-stat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
.as-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    margin: 0 auto 10px;
}
.as-icon.gold { background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark)); }
.as-icon.green { background: linear-gradient(135deg, #5cb85c, #2E8B57); }
.as-icon.purple { background: linear-gradient(135deg, #9b59b6, #6c3483); }
.as-num { font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--dark); }
.as-label { font-size: 12px; color: var(--gray); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.loyalty-card .loyalty-hero {
    text-align: center;
    padding: 18px 0 8px;
}
.loyalty-hero i { font-size: 44px; color: var(--gold); }
.loyalty-hero h3 { font-family: var(--font-serif); font-size: 24px; color: var(--dark); margin-top: 8px; }
.loyalty-hero p { font-size: 13.5px; color: var(--gray); margin-top: 4px; }
.loyalty-points-box {
    text-align: center;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    border-radius: 12px;
    padding: 28px;
    margin: 20px 0;
    color: #fff;
}
.lp-num { font-family: var(--font-serif); font-size: 52px; font-weight: 700; line-height: 1; }
.lp-label { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; opacity: .9; margin-top: 6px; }
.lp-value { font-size: 14px; font-weight: 600; margin-top: 8px; }
.loyalty-rules h4 { font-size: 15px; color: var(--dark); margin-bottom: 12px; }
.loyalty-rules h4 i { color: var(--gold); margin-right: 6px; }
.loyalty-rules ul { list-style: none; }
.loyalty-rules ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--dark-2);
    border-bottom: 1px dashed var(--border);
}
.loyalty-rules ul li:last-child { border-bottom: none; }
.loyalty-rules ul li i { color: var(--gold); }

@media (max-width: 992px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
    .account-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Error pages ---------- */
.error-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 20% 30%, rgba(201,162,39,.07), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(201,162,39,.07), transparent 40%),
        var(--gray-light);
    padding: 80px 0;
}
.error-wrap { text-align: center; max-width: 640px; }
.error-code {
    font-family: var(--font-serif);
    font-size: clamp(100px, 18vw, 180px);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(201,162,39,.25));
}
.error-icon {
    width: 68px;
    height: 68px;
    margin: -20px auto 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px rgba(201,162,39,.4);
}
.error-title {
    font-family: var(--font-serif);
    font-size: clamp(24px, 4vw, 34px);
    color: var(--dark);
    margin-bottom: 8px;
}
.error-desc {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 14px;
}
.error-hint { font-size: 14px; color: var(--gray); margin-bottom: 30px; line-height: 1.7; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Room media gallery ---------- */
.room-media-main {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #111;
}
.room-media-slide {
    display: none;
    width: 100%;
    height: 480px;
    object-fit: cover;
}
.room-media-slide.active { display: block; }
.room-media-main video.room-media-slide { height: 480px; object-fit: contain; background: #000; }
.room-media-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.85);
    color: var(--dark);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
    transition: all .25s;
    z-index: 3;
}
.room-media-nav:hover { background: var(--gold); color: #fff; }
.room-media-nav.prev { left: 14px; }
.room-media-nav.next { right: 14px; }
.room-media-count {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    z-index: 3;
}
.room-media-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
}
.rm-thumb {
    width: 90px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: .7;
    transition: all .25s;
    position: relative;
}
.rm-thumb img, .rm-thumb video { width: 100%; height: 100%; object-fit: cover; }
.rm-thumb:hover { opacity: 1; }
.rm-thumb.active { border-color: var(--gold); opacity: 1; }
.rm-thumb-vid {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 18px;
}

/* ---------- Policy pages ---------- */
.policy-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: start;
}
.policy-sidebar {
    position: sticky;
    top: 110px;
}
.policy-nav {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    box-shadow: var(--shadow);
}
.policy-nav-title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gray);
    padding: 10px 12px 6px;
}
.policy-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--dark-2);
    transition: all .25s;
}
.policy-nav a:hover { background: var(--gray-light); color: var(--gold-dark); }
.policy-nav a.active {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 45%, var(--gold-dark));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(201,162,39,.3);
}
.policy-nav a i { width: 20px; text-align: center; color: var(--gold); }
.policy-nav a.active i { color: #fff; }
.policy-content { min-width: 0; }
.policy-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 2px solid var(--gold);
}
.policy-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(201,162,39,.3);
    flex-shrink: 0;
}
.policy-title {
    font-family: var(--font-serif);
    font-size: 28px;
    color: var(--dark);
}
.policy-updated {
    font-size: 12.5px;
    color: var(--gray);
    margin-top: 4px;
}
.policy-updated i { color: var(--gold); margin-right: 5px; }
.policy-body {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 34px;
    box-shadow: var(--shadow);
}
.policy-section {
    padding: 18px 0;
    border-bottom: 1px dashed var(--border);
}
.policy-section:last-child { border-bottom: none; }
.policy-section h3 {
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--dark);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ps-num {
    font-size: 12px;
    color: var(--gold-dark);
    background: var(--gray-light);
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 1px;
}
.policy-section p {
    font-size: 14px;
    color: var(--gray);
    line-height: 1.9;
    padding-left: 34px;
}
.policy-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--dark);
    color: #fff;
    border-radius: 14px;
    padding: 26px 30px;
    margin-top: 24px;
}
.policy-contact h4 {
    font-family: var(--font-serif);
    font-size: 20px;
    margin-bottom: 4px;
}
.policy-contact p { font-size: 13px; color: rgba(255,255,255,.7); }
/* Nút Zalo trong support (màu brand Zalo) */
.btn-zalo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0068FF;
    color: #fff !important;
    border: 1px solid #0068FF;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
}
.btn-zalo:hover {
    background: #0052CC;
    border-color: #0052CC;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,104,255,.35);
}
.auth-social-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--gray);
    font-size: 12.5px;
}
.auth-social-divider::before,
.auth-social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-social-btns {
    display: grid;
    gap: 10px;
}
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #fff;
    color: #3c4043 !important;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s;
}
.btn-google i { color: #ea4335; }
.btn-google:hover {
    background: #f8f9fa;
    border-color: #c6c9cc;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(60,64,67,.15);
}
.auth-card .btn-zalo.btn-block,
.auth-card .btn-google.btn-block {
    width: 100%;
    justify-content: center;
}
.auth-2fa-input {
    letter-spacing: .35em;
    font-size: 22px;
    text-align: center;
    font-weight: 600;
}
@media (max-width: 900px) {
    .policy-layout { grid-template-columns: 1fr; }
    .policy-sidebar { position: static; }
    .policy-nav { display: flex; flex-wrap: wrap; gap: 4px; }
    .policy-nav-title { width: 100%; }
    .policy-nav a { flex: 1; min-width: 130px; justify-content: center; }
    .policy-body { padding: 24px; }
}

.room-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 26px;
    box-shadow: var(--shadow);
}
.room-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--gray);
}
.room-count i { color: var(--gold); }
.room-count strong { color: var(--gold-dark); font-size: 16px; }
.room-count-type {
    background: var(--gray-light);
    border: 1px solid var(--border);
    color: var(--gold-dark);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.room-sort { display: inline-flex; align-items: center; gap: 8px; }
.sort-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-2);
}
.sort-label i { color: var(--gold); margin-right: 2px; }
.sort-select {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--dark-2);
    background: var(--gray-light);
    cursor: pointer;
    outline: none;
    transition: all .3s;
}
.sort-select:hover, .sort-select:focus { border-color: var(--gold); background: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .rooms-grid, .services-grid, .services-grid-img { grid-template-columns: repeat(2, 1fr); }
    .rooms-grid-2 .room-card-img { height: 260px; }
    .rooms-grid-2 .room-card-body { padding: 22px; }
    .service-row { grid-template-columns: 1fr; gap: 36px; }
    .service-row-reverse .service-row-img { order: 0; }
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    .welcome-grid { grid-template-columns: 1fr; gap: 48px; }
    .about-story { grid-template-columns: 1fr; gap: 40px; }
    .about-values { grid-template-columns: repeat(2, 1fr); }
    .contact-grid, .booking-page-grid, .room-detail { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .booking-widget { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
    .fn-form { min-width: 0; width: 100%; max-width: 420px; }
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: flex-start;
        padding: 90px 30px 30px;
        box-shadow: var(--shadow-lg);
        transform: translateX(110%);
        transition: transform .4s ease;
        z-index: 999;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav a { width: 100%; text-align: left; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .main-nav a::after { display: none; }
    .nav-toggle { display: block; }
}
@media (max-width: 640px) {
    .rooms-grid, .services-grid, .services-grid-img, .gallery-grid, .stats-grid, .rooms-grid-2 { grid-template-columns: 1fr; }
    .rooms-grid-2 { max-width: none; }
    .rooms-grid-2 .room-card-img { height: 240px; }
    .about-values { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .booking-widget { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .hero { height: 74vh; min-height: 480px; }
    .hero-arrow { display: none; }
    .section { padding: 64px 0; }
    .welcome-img-main { height: 380px; }
    .welcome-img-small { display: none; }
    .welcome-badge { width: 104px; height: 104px; left: -12px; top: -16px; }
    .brand-name { font-size: 19px; }
    .brand-logo { width: 46px; height: 46px; }
    .btn-book { padding: 10px 16px; font-size: 11px; }
    .contact-form-wrap, .contact-info-card, .booking-sidebar { padding: 24px; }
    .booking-summary > .bs-title,
    .booking-summary > .bs-room,
    .booking-summary > .bs-row,
    .booking-summary > .bs-subtotal,
    .booking-summary > .bs-total,
    .booking-summary > .bs-paypal-usd,
    .booking-summary > .bs-note,
    .booking-summary > .bs-badges,
    .booking-summary > .btn {
        margin-left: 20px;
        margin-right: 20px;
    }
    .service-img-card { height: 260px; }
    .service-row-img { height: 300px; }
    .footer-newsletter-inner { flex-direction: column; text-align: center; }
    .zalo-float { bottom: 18px; right: 18px; width: 54px; height: 54px; }
    .zalo-float img { width: 46px; height: 46px; }
    .testimonial-slider { padding: 0 40px; }
    .testi-slide { padding: 44px 24px 36px; }
    .testi-quote-mark { margin-top: -72px; width: 56px; height: 56px; font-size: 20px; }
    .testimonial-text { font-size: 15.5px; }
    .testi-nav { width: 38px; height: 38px; font-size: 13px; }
}

/* ---------- Mobile improvements ---------- */
@media (max-width: 480px) {
    .topbar { padding: 7px 0; }
    .topbar-inner { gap: 8px; }
    .topbar-contact span { display: none; }
    .topbar-contact a i { font-size: 16px; }
    .topbar-right .topbar-link { font-size: 11px; padding: 4px 8px; }
    .hero { height: 62vh; min-height: 420px; }
    .hero-title { font-size: 30px; line-height: 1.25; }
    .hero-subtitle { font-size: 14px; padding: 0 12px; }
    .hero-cta .btn { padding: 12px 22px; font-size: 13px; }
    .section-title { font-size: 26px; }
    .section-subtitle { font-size: 13.5px; }
    .booking-widget { padding: 20px 18px; }
    .booking-widget h3 { font-size: 18px; }
    .booking-widget .btn { width: 100%; justify-content: center; }
    .room-card { border-radius: 12px; }
    .room-card-img { height: 210px; }
    .room-card-body { padding: 18px 16px; }
    .room-price { font-size: 19px; }
    .room-card .btn { width: 100%; justify-content: center; }
    .service-card { border-radius: 12px; }
    .service-card-img { height: 190px; }
    .service-card-body { padding: 18px 16px; }
    .gallery-grid { gap: 8px; }
    .gallery-item { border-radius: 8px; }
    .testimonial-slider { padding: 0 26px; }
    .testi-slide { padding: 40px 18px 32px; }
    .testi-quote-mark { width: 48px; height: 48px; font-size: 17px; margin-top: -64px; }
    .testimonial-text { font-size: 14.5px; }
    .testi-nav { width: 34px; height: 34px; font-size: 12px; }
    .section { padding: 52px 0; }
    .page-banner h1 { font-size: 26px; }
    .page-banner { padding: 70px 16px 40px; }
    .booking-page-grid, .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .payment-grid { grid-template-columns: 1fr; }
    .room-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .room-sort { justify-content: space-between; }
    .room-filter-chip { font-size: 11.5px; padding: 5px 10px; }
    .about-stats-row, .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .policy-body { padding: 20px 16px; }
    .breadcrumb { font-size: 12px; }
    .btn { font-size: 13px; }
    .btn-lg { padding: 13px 20px; }
    .cta-section .btn { font-size: 13px; padding: 12px 24px; }
    .footer-grid { gap: 26px; }
    .footer-title { font-size: 15px; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
    .auth-box { padding: 28px 20px; }
    .auth-tabs .auth-tab { font-size: 14px; padding: 12px 16px; }
    .zalo-float { bottom: 14px; right: 14px; width: 50px; height: 50px; }
    .zalo-float img { width: 42px; height: 42px; }
}

/* ---------- Phòng chi tiết mobile ---------- */
@media (max-width: 640px) {
    .room-detail-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
    .room-detail-gallery .rdg-main { grid-column: 1 / -1; }
    .room-detail-hero { padding: 60px 20px 30px; }
    .room-detail-hero h1 { font-size: 24px; }
    .room-detail-info { grid-template-columns: 1fr 1fr; gap: 10px; }
    .room-amenities-list { grid-template-columns: 1fr 1fr; }
    .room-detail-actions { flex-direction: column; align-items: stretch; }
    .room-detail-actions .btn { justify-content: center; }
    .booking-sidebar { position: static; }
    .invoice-actions { flex-wrap: wrap; }
    .invoice-actions .btn { flex: 1; min-width: 120px; justify-content: center; }
}

/* ---------- Đảm bảo không tràn ngang trên mobile ---------- */
html, body {
    overflow-x: hidden;
}
img, video, iframe, table, svg {
    max-width: 100%;
}

/* ---------- Image reveal + reduced motion ---------- */
.media-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.media-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 992px) {
    .gallery-masonry .gallery-item.wide { grid-column: span 1; }
}
@media (max-width: 768px) {
    .gallery-masonry {
        grid-auto-rows: 100px;
    }
    .gallery-grid { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide.active .hero-slide-bg,
    .page-hero::before,
    .promo-banner::before,
    .stats::before,
    .cta::before,
    .page-hero--gallery .page-hero-bg,
    .room-card-featured {
        animation: none !important;
    }
    .hero-slide.active .hero-script,
    .hero-slide.active .hero-title,
    .hero-slide.active .hero-subtitle,
    .hero-slide.active .hero-btns,
    .page-hero-content,
    .lightbox.open,
    .lightbox img {
        animation: none !important;
    }
    .gallery-item,
    .media-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .gallery-item:hover img,
    .room-card:hover .room-card-img img,
    .service-img-card:hover img,
    .welcome-images:hover .welcome-img-main,
    .welcome-images:hover .welcome-img-small {
        transform: none;
    }
    .gallery-item::before,
    .room-card-img::after,
    .service-img-card::after {
        display: none;
    }
}