/* =============================================================================
   public.css — the PUBLIC site (landing, listings, booking). Deliberately separate from
   site.css: the internal app keeps its own palette. Mobile first; every media query is
   min-width. Class prefix `pub-`.

   Palette: the brand blue of the logo on white (light) or navy (dark). The header and the
   landing hero are white and search-first; cards are flat and rounded 16px; type is Be Vietnam Pro,
   self-hosted under /fonts because the CSP allows no third-party origin.
   Theme: light tokens on :root; dark tokens under prefers-color-scheme (when the visitor has
   not chosen) and under [data-theme=dark] (when they have). The toggle always wins over the OS.
   ============================================================================= */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --pub-bg:            #ffffff;
    --pub-bg-2:          #eef4fb;
    --pub-surface:       #ffffff;
    --pub-surface-2:     #eef4fb;
    --pub-border:        rgba(37, 121, 181, 0.18);
    --pub-text:          #14213a;
    --pub-muted:         #5b6b80;
    /* Brand blue from the logo (#2579b5), darkened a step for contrast on white. */
    --pub-accent:        #1e6ba8;
    --pub-accent-strong: #185a8f;
    --pub-accent-soft:   rgba(37, 121, 181, 0.12);
    --pub-on-accent:     #ffffff;
    --pub-green:         #1f8a5b;
    --pub-green-soft:    rgba(31, 138, 91, 0.12);
    --pub-danger:        #c0392b;
    --pub-hot:           #d9480f;
    /* The header is white on the light theme (navy text); the dark theme gives it its own surface. */
    --pub-header-bg:     #ffffff;
    --pub-on-header:     #14213a;
    --pub-header-hover:  rgba(37, 121, 181, 0.12);
    --pub-shadow:        0 10px 30px rgba(20, 50, 90, 0.08);
    /* Landing hero backdrop: a brand-blue wash, deep at the top and fading down, under a glow and a 32px grid. */
    --pub-hero-top:      #cfe2f5;
    /* The hero logo sits straight on the backdrop on the light theme; the dark theme gives it a plate. */
    --pub-hero-logo-plate:  transparent;
    --pub-hero-logo-shadow: none;
    --pub-hero-glow:     rgba(37, 121, 181, 0.22);
    --pub-hero-grid:     rgba(30, 107, 168, 0.11);
    --pub-header-h:      64px;
    --pub-bottom-nav-h:  64px;
    --pub-radius:        16px;
    --pub-radius-sm:     12px;
    /* Headings share the sans face; the serif token is kept so nothing breaks, aliased to it. */
    --pub-font-sans:     "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pub-font-serif:    var(--pub-font-sans);
    color-scheme: light;
}
/* Be Vietnam Pro, four weights × two subsets: the browser fetches only the ranges a page uses. OFL — see /fonts/LICENSE-be-vietnam-pro.txt. */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-400-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/be-vietnam-pro-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-600-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/be-vietnam-pro-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-700-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/be-vietnam-pro-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/be-vietnam-pro-800-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/be-vietnam-pro-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Dark tokens: the OS preference when the visitor has not chosen, and the explicit choice. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --pub-bg:            #0b1526;
        --pub-bg-2:          #0f1c31;
        --pub-surface:       #14243c;
        --pub-surface-2:     #1a2d49;
        --pub-border:        rgba(120, 180, 235, 0.22);
        --pub-text:          #eaf2fb;
        --pub-muted:         #9fb3c9;
        --pub-accent:        #58a9e8;
        --pub-accent-strong: #7fc0f2;
        --pub-accent-soft:   rgba(88, 169, 232, 0.16);
        --pub-on-accent:     #0b1526;
        --pub-green:         #2ea36f;
        --pub-green-soft:    rgba(46, 163, 111, 0.16);
        --pub-danger:        #e06c5c;
        --pub-hot:           #e8590c;
        --pub-header-bg:     #0f1c31;
        --pub-on-header:     #eaf2fb;
        --pub-header-hover:  rgba(88, 169, 232, 0.16);
        --pub-shadow:        0 10px 30px rgba(0, 0, 0, 0.35);
        --pub-hero-top:      #17375f;
        --pub-hero-logo-plate:  #ffffff;
        --pub-hero-logo-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        --pub-hero-glow:     rgba(88, 169, 232, 0.22);
        --pub-hero-grid:     rgba(120, 180, 235, 0.10);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --pub-bg:        #0b1526;
    --pub-bg-2:      #0f1c31;
    --pub-surface:       #14243c;
    --pub-surface-2:     #1a2d49;
    --pub-border:    rgba(120, 180, 235, 0.22);
    --pub-text:      #eaf2fb;
    --pub-muted:     #9fb3c9;
    --pub-accent:    #58a9e8;
    --pub-accent-strong: #7fc0f2;
    --pub-accent-soft:   rgba(88, 169, 232, 0.16);
    --pub-on-accent:     #0b1526;
    --pub-green:     #2ea36f;
    --pub-green-soft:    rgba(46, 163, 111, 0.16);
    --pub-danger:    #e06c5c;
    --pub-hot:       #e8590c;
    --pub-header-bg:     #0f1c31;
    --pub-on-header:     #eaf2fb;
    --pub-header-hover:  rgba(88, 169, 232, 0.16);
    --pub-shadow:    0 10px 30px rgba(0, 0, 0, 0.35);
    --pub-hero-top:      #17375f;
    --pub-hero-logo-plate:  #ffffff;
    --pub-hero-logo-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --pub-hero-glow:     rgba(88, 169, 232, 0.22);
    --pub-hero-grid:     rgba(120, 180, 235, 0.10);
    color-scheme: dark;
}

/* ── 2. Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
/* Anchored sections (#about, #assistant, #faq) land below the sticky header. */
.pub-body [id] { scroll-margin-top: calc(var(--pub-header-h) + 12px); }

.pub-body {
    margin: 0;
    background: var(--pub-bg);
    color: var(--pub-text);
    font-family: var(--pub-font-sans);
    font-size: 16px;
    line-height: 1.55;
    /* Room for the bottom nav on phones. NEVER overflow-x: hidden here — it would mask the
       very overflow the mobile test exists to catch. */
    padding-bottom: calc(var(--pub-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    -webkit-font-smoothing: antialiased;
}

.pub-body a { color: inherit; text-decoration: none; }
.pub-body a:hover { color: var(--pub-accent); }
.pub-body img { max-width: 100%; height: auto; display: block; }
.pub-body h1, .pub-body h2, .pub-body h3 { font-family: var(--pub-font-sans); font-weight: 800; letter-spacing: -0.02em; }
.pub-body svg { flex-shrink: 0; }

.pub-container { width: 100%; max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.pub-main { min-height: 60vh; }
.pub-section { padding-top: 24px; padding-bottom: 24px; }
.pub-section--tight { padding-top: 24px; padding-bottom: 24px; }

.pub-h1 { font-size: 2.1rem; line-height: 1.1; margin: 0 0 16px; }
.pub-h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 8px; }
.pub-h3 { font-size: 1.1rem; margin: 0 0 6px; }
.pub-accent { color: var(--pub-accent); }
.pub-muted { color: var(--pub-muted); }
.pub-center { text-align: center; }
.pub-section__intro { max-width: 640px; margin: 0 auto 28px; text-align: center; color: var(--pub-muted); }
.pub-caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; }

/* Eyebrow badge: "PHÒNG TRỌ SINH VIÊN UY TÍN", "GỢI Ý HÔM NAY"... */
.pub-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--pub-border); background: var(--pub-accent-soft);
    color: var(--pub-accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    margin: 0 0 16px;
}

/* ── 3. Buttons, chips, form controls ─────────────────────────────────────── */
.pub-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 22px; border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-text);
    font-weight: 700; font-size: 0.95rem;
    cursor: pointer; transition: transform .15s ease, background .15s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.pub-btn:hover { transform: translateY(-1px); color: var(--pub-text); }
.pub-btn--primary { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
.pub-btn--primary:hover { background: var(--pub-accent-strong); color: var(--pub-on-accent); }
.pub-btn--ghost { background: transparent; }
.pub-btn--ghost:hover { border-color: var(--pub-accent); color: var(--pub-accent); }
.pub-btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.85rem; }
.pub-btn--block { width: 100%; border-radius: var(--pub-radius-sm); }
/* Soft pill: tinted, for the secondary action in a card ("Xem"). */
.pub-btn--soft { background: var(--pub-accent-soft); border-color: transparent; color: var(--pub-accent); }
.pub-btn--soft:hover { background: var(--pub-accent); color: var(--pub-on-accent); }
.pub-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.pub-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-text);
    font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.pub-chip:hover, .pub-chip.is-active { border-color: var(--pub-accent); color: var(--pub-accent); background: var(--pub-accent-soft); }
.pub-chip--primary { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
.pub-chip--primary:hover { background: var(--pub-accent-strong); color: var(--pub-on-accent); }

/* Horizontal scroller for chip rows that do not fit a phone width. */
.pub-scroll-x { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pub-scroll-x::-webkit-scrollbar { display: none; }

.pub-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pub-muted); margin-bottom: 6px; }
.pub-input, .pub-select, .pub-textarea {
    display: block; width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm);
    background: var(--pub-surface); color: var(--pub-text);
    font-size: 16px; /* under 16px iOS zooms on focus */
    font-family: inherit; line-height: 1.4;
}
.pub-textarea { min-height: 96px; resize: vertical; }
.pub-input:focus, .pub-select:focus, .pub-textarea:focus { outline: 2px solid var(--pub-accent); outline-offset: 1px; border-color: var(--pub-accent); }
.pub-input::placeholder, .pub-textarea::placeholder { color: var(--pub-muted); opacity: .8; }
.pub-select { appearance: none; -webkit-appearance: none; padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.pub-field { margin-bottom: 16px; }
.pub-field .field-validation-error, .pub-error { display: block; color: var(--pub-danger); font-size: 0.85rem; margin-top: 4px; }
.pub-input.input-validation-error, .pub-textarea.input-validation-error { border-color: var(--pub-danger); }
/* Form-level errors (a stale antiforgery token). The tag helper renders an empty <ul> when
   there is nothing to say; hide that so the layout does not jump. */
.pub-form-summary.validation-summary-valid { display: none; }
.pub-form-summary.validation-summary-errors { margin-bottom: 16px; padding: 12px 14px; border-radius: var(--pub-radius-sm);
    border: 1px solid var(--pub-danger); background: color-mix(in srgb, var(--pub-danger) 10%, transparent); color: var(--pub-text); font-size: 0.95rem; }
.pub-form-summary ul { margin: 0; padding: 0; list-style: none; }
/* Pill radios/checkboxes: the input stays in the tab order (1px, not display:none), the label is the target. */
.pub-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-pill { position: relative; display: inline-flex; cursor: pointer; }
.pub-pill__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
/* The painted part is the span after the input: `:checked + span` works everywhere, no :has() needed. */
.pub-pill > span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-text); font-size: 0.85rem; font-weight: 600; }
.pub-pill:hover > span { border-color: var(--pub-accent); color: var(--pub-accent); }
.pub-pill__input:checked + span { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
.pub-pill__input:focus-visible + span { outline: 2px solid var(--pub-accent); outline-offset: 2px; }
/* A row of buttons: stacked on phones, side by side from 576px (done pages, the error page). */
.pub-hero__cta { display: flex; flex-direction: column; gap: 10px; }
.pub-hero__cta .pub-btn { width: 100%; }
.pub-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Range slider (assistant) */
.pub-range { width: 100%; accent-color: var(--pub-accent); min-height: 44px; }
.pub-range-ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--pub-muted); margin-top: -8px; }

/* ── 4. Header ─────────────────────────────────────────────────────────────── */
.pub-header {
    position: sticky; top: 0; z-index: 1030;
    background: var(--pub-header-bg); color: var(--pub-on-header); border-bottom: 1px solid var(--pub-border);
}
.pub-header a:hover { color: var(--pub-accent); }
.pub-header__row { display: flex; align-items: center; gap: 8px; min-height: var(--pub-header-h); }
.pub-brand { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; }
.pub-brand:hover { color: inherit; }
/* The logo carries the wordmark; on the dark theme its navy letters sit on a light plate. */
.pub-logo { display: inline-flex; align-items: center; height: 46px; padding: 3px 10px; border-radius: 14px; background: #fff; flex-shrink: 0; }
.pub-logo img { height: 40px; width: auto; }
.pub-brand__text { display: none; flex-direction: column; line-height: 1.1; }
.pub-brand__name { font-weight: 800; font-size: 1.1rem; color: var(--pub-on-header); letter-spacing: 0.02em; }
.pub-brand__tagline { display: none; font-size: 0.55rem; letter-spacing: 0.16em; color: var(--pub-on-header); opacity: .8; font-weight: 700; }
.pub-nav { display: none; }
.pub-header__icons { display: flex; align-items: center; gap: 2px; }
.pub-icon-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: var(--pub-on-header);
    cursor: pointer;
}
.pub-icon-btn:hover { background: var(--pub-header-hover); color: var(--pub-accent); }
.pub-header__desktop-only { display: none; }
/* The "Đặt lịch xem" pill: white on the blue header, shown from 1200px where there is room. */
.pub-header__cta { display: none; }
.pub-badge-count {
    position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--pub-accent); color: var(--pub-on-accent);
    font-size: 0.68rem; font-weight: 800; line-height: 18px; text-align: center;
}
/* Theme toggle shows the icon of the OTHER theme: moon on light, sun on dark. */
.pub-icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pub-icon-sun { display: block; }
    :root:not([data-theme="light"]) .pub-icon-moon { display: none; }
}
:root[data-theme="dark"] .pub-icon-sun { display: block; }
:root[data-theme="dark"] .pub-icon-moon { display: none; }

.pub-offcanvas { background: var(--pub-surface); color: var(--pub-text); width: min(320px, 85vw); }
.pub-offcanvas .pub-brand__name { color: var(--pub-accent); }
.pub-offcanvas .pub-icon-btn { color: var(--pub-text); }
.pub-offcanvas .pub-icon-btn:hover { background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-offcanvas__body { display: flex; flex-direction: column; gap: 2px; }
.pub-offcanvas__link { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px; font-weight: 600; }
.pub-offcanvas__link.is-active, .pub-offcanvas__link:hover { background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-offcanvas__rule { border-color: var(--pub-border); margin: 10px 0; }

/* ── 5. Bottom nav (phones) & Zalo FAB (desktop) ───────────────────────────── */
.pub-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--pub-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--pub-surface); border-top: 1px solid var(--pub-border);
}
.pub-bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; font-size: 0.68rem; font-weight: 600; color: var(--pub-muted);
}
.pub-bottom-nav__item.is-active { color: var(--pub-accent); }
.pub-bottom-nav__item--zalo { color: #2f7be5; }
.pub-bottom-nav__item--ai { color: var(--pub-accent); }
.pub-bottom-nav__ai {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-top: -22px; border-radius: 50%;
    background: var(--pub-surface); border: 2px solid var(--pub-accent); color: var(--pub-accent);
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.pub-zalo-fab { display: none; }

/* ── 6. Footer ─────────────────────────────────────────────────────────────── */
/* Two rows: brand line, then the links. The four-column footer is gone with the restyle. */
/* Footer: navy ground in both schemes, an accent hairline on top. Two bands — brand + social
   and the "reach us" card, then three link columns — and the legal line. Every link is 44px. */
.pub-footer { --pub-footer-text: rgba(234, 242, 251, 0.74); --pub-footer-line: rgba(234, 242, 251, 0.14); --pub-footer-link: #8fc9f5;
    position: relative; background: #14213a; color: var(--pub-footer-text); padding: 32px 0 20px; margin-top: 40px; font-size: 0.92rem; }
.pub-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--pub-accent), #8fc9f5 60%, transparent); }
.pub-footer a { color: inherit; }
.pub-footer__main { display: flex; flex-direction: column; gap: 24px; }
.pub-footer__brand-block { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.pub-footer__brand { display: flex; align-items: center; gap: 12px; }
.pub-footer__logo { display: inline-flex; padding: 6px 10px; border-radius: 12px; background: #ffffff; }
.pub-footer__logo img { height: 40px; width: auto; }
.pub-footer__brand-text { display: flex; flex-direction: column; gap: 2px; }
.pub-footer__brand-text strong { color: #ffffff; font-size: 1.15rem; }
.pub-footer__brand-text small { font-size: 0.78rem; }
.pub-footer__social { display: flex; gap: 8px; }
.pub-footer__social-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pub-footer-line); color: #ffffff; }
.pub-footer__social-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: var(--pub-footer-link); color: var(--pub-footer-link); }
/* The "reach us" card: a rounded panel that reads as the footer's one call to action. */
.pub-footer__reach { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; padding: 18px; border-radius: var(--pub-radius); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--pub-footer-line); }
.pub-footer__reach-title { grid-column: 1 / -1; color: #ffffff; font-weight: 700; }
.pub-footer .pub-footer__call { background: #ffffff; border-color: #ffffff; color: #14213a; min-height: 46px; white-space: nowrap; }
.pub-footer .pub-footer__call:hover { background: var(--pub-footer-link); border-color: var(--pub-footer-link); }
.pub-footer .pub-footer__zalo { background: transparent; border-color: var(--pub-footer-link); color: var(--pub-footer-link); min-height: 46px; }
.pub-footer .pub-footer__zalo:hover { background: var(--pub-footer-link); color: #14213a; }
.pub-footer__hours { grid-column: 1 / -1; font-size: 0.82rem; overflow-wrap: anywhere; }
.pub-footer__hours a { min-height: 44px; display: inline-flex; align-items: center; }
.pub-footer__grid { display: grid; gap: 16px 28px; }
.pub-footer__col { display: flex; flex-direction: column; min-width: 0; }
.pub-footer__col > a { min-height: 44px; display: flex; align-items: center; }
.pub-footer__col > a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.pub-footer__heading { margin-bottom: 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pub-footer-link); }
.pub-footer__address { padding: 10px 0; line-height: 1.5; overflow-wrap: anywhere; }
.pub-footer__bottom { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--pub-footer-line); margin-top: 20px; padding-top: 14px; font-size: 0.78rem; }
.pub-footer__bottom p { margin: 0; overflow-wrap: anywhere; }

/* ── 7. Cards & grids ──────────────────────────────────────────────────────── */
.pub-card {
    background: var(--pub-surface); border: 1px solid var(--pub-border); border-radius: var(--pub-radius);
    box-shadow: var(--pub-shadow); padding: 20px; min-width: 0;
}
/* Tinted panel without a shadow: the bento tiles on the landing page and grouped content. */
.pub-card--soft { background: var(--pub-surface-2); border-color: transparent; box-shadow: none; }
.pub-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pub-grid--2 { grid-template-columns: 1fr 1fr; }


/* ── 9. Landing page ───────────────────────────────────────────────────────── */
/* Hero: the company (logo, name, tagline) over the ask box, centred. The band is full width (it
   sits outside .pub-container, so nothing has to reach past the viewport) and carries the
   backdrop: a brand-blue wash that is deep at the top and fades to the page background, a glow
   from the top centre and a hairline 32px grid; a last layer fades the grid out at the bottom so
   the room rows below start without a seam. No image, no animation. */
.pub-hero-band {
    background:
        linear-gradient(to bottom, transparent 60%, var(--pub-bg) 100%),
        radial-gradient(ellipse 80% 70% at 50% 0%, var(--pub-hero-glow), transparent 70%),
        linear-gradient(var(--pub-hero-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--pub-hero-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(to bottom, var(--pub-hero-top) 0%, var(--pub-bg) 100%);
}
.pub-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-top: 32px; padding-bottom: 24px; }
.pub-hero__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* The logo is a transparent PNG: on the light theme it blends into the backdrop; its navy
   lettering needs a light plate on the dark theme, like the header's. */
.pub-hero__logo { width: 168px; height: auto; padding: 8px 14px; border-radius: 20px; background: var(--pub-hero-logo-plate); box-shadow: var(--pub-hero-logo-shadow); }
.pub-hero__title { margin: 4px 0 0; max-width: 820px; text-wrap: balance; letter-spacing: 0.06em; color: var(--pub-accent); }
.pub-hero__lead { margin: 0; max-width: 620px; font-size: 1.05rem; line-height: 1.5; color: var(--pub-muted); }
/* The ask box: one chat-style card. Phone: the two pills side by side and the street box across
   the grid under them, with the button below; desktop (≥992): pills and button on one row. A pill is a label
   drawn as a chip around a bare select, so the select stays a real, 16px control. */
.pub-ask { width: 100%; max-width: 840px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 14px; border-radius: 20px; background: var(--pub-surface); border: 1px solid var(--pub-border); box-shadow: 0 16px 40px rgba(20, 50, 90, 0.14); text-align: left; }
/* Chat-style head: who answers and that it is live, so the box reads as an assistant, not a search field. */
.pub-ask__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pub-ask__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pub-accent); color: var(--pub-on-accent); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pub-ask__who { font-weight: 700; font-size: 0.95rem; }
.pub-ask__status { display: inline-flex; align-items: center; gap: 6px; color: var(--pub-muted); font-size: 0.8rem; }
.pub-ask__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pub-success, #1f8a5b); box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.18); }
.pub-ask__btn svg { flex-shrink: 0; }

/* Thinking state (public.js adds .is-thinking on submit, until the 303 lands): a band of accent
   light sweeps along the border, the spark on the button spins, the status dot breathes and
   the text turns into "Đang đọc…". The border is drawn by a second background layer so the
   sweep needs no extra element; the first layer keeps the card's own surface. */
.pub-ask.is-thinking { border-color: transparent;
    background: linear-gradient(var(--pub-surface), var(--pub-surface)) padding-box,
                linear-gradient(90deg, var(--pub-border) 0%, var(--pub-accent) 35%, #7cc4ff 50%, var(--pub-accent) 65%, var(--pub-border) 100%) border-box;
    background-size: 100% 100%, 250% 100%; background-repeat: no-repeat;
    box-shadow: 0 16px 40px rgba(20, 50, 90, 0.10), 0 0 0 4px var(--pub-accent-soft);
    animation: pub-ask-sweep 1.6s linear infinite; }
.pub-ask.is-thinking .pub-ask__text { opacity: .65; }
.pub-ask.is-thinking .pub-ask__spark { animation: pub-ask-spark 1.2s ease-in-out infinite; }
.pub-ask.is-thinking .pub-ask__dot { background: var(--pub-accent); box-shadow: 0 0 0 3px var(--pub-accent-soft); animation: pub-ask-breathe 1s ease-in-out infinite; }
.pub-ask.is-thinking [data-pub-ai-status] { color: var(--pub-accent); }
@keyframes pub-ask-sweep { from { background-position: 0 0, 125% 0; } to { background-position: 0 0, -125% 0; } }
@keyframes pub-ask-spark { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } }
@keyframes pub-ask-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
/* The answer rises into place once the page comes back. */
.pub-assistant-results { animation: pub-rise .45s ease-out both; }
@keyframes pub-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .pub-ask.is-thinking, .pub-ask.is-thinking .pub-ask__spark, .pub-ask.is-thinking .pub-ask__dot, .pub-assistant-results { animation: none; }
}
/* The sentence box is drawn as a field — tinted, bordered, a focus ring — so it reads as "type
   here", not as a paragraph to read. */
.pub-ask__text { width: 100%; min-height: 92px; padding: 12px 14px; border: 1.5px solid var(--pub-border); border-radius: var(--pub-radius-sm); outline: none; resize: none; background: var(--pub-surface-2); color: var(--pub-text); font-size: 16px; line-height: 1.5; font-family: inherit; cursor: text; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.pub-ask__text:hover { border-color: var(--pub-accent); }
.pub-ask__text:focus { border-color: var(--pub-accent); background: var(--pub-surface); box-shadow: 0 0 0 3px var(--pub-accent-soft); }
.pub-ask__text::placeholder { color: var(--pub-muted); opacity: .8; }
.pub-ask__note { margin: 0; color: var(--pub-muted); line-height: 1.5; }
.pub-ask__error { margin: 0; color: var(--pub-danger); font-size: 0.88rem; }
.pub-ask__bar { display: flex; flex-direction: column; gap: 12px; }
.pub-ask__pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pub-ask__pill { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px 0 10px; border-radius: var(--pub-radius-sm); border: 1px solid var(--pub-border); background: var(--pub-surface-2); color: var(--pub-accent); min-width: 0; cursor: pointer; }
.pub-ask__pill:focus-within { outline: 2px solid var(--pub-accent); outline-offset: 1px; }
.pub-ask__pill--wide { grid-column: 1 / -1; }
/* Half-width pills on a phone have no room for the icon next to a 16px select. */
.pub-ask__pill:not(.pub-ask__pill--wide) > svg { display: none; }
.pub-ask__pill-select { flex: 1 1 0; min-width: 0; min-height: 40px; border: 0; outline: none; background: transparent; color: var(--pub-text); font-size: 16px; font-weight: 600; font-family: inherit; padding: 0 22px 0 0; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 2px center; background-size: 16px; }
/* The street box looks like a pill but is a typed field: no chevron, a normal cursor. */
.pub-ask__pill--street { cursor: text; }
.pub-ask__pill-input { flex: 1 1 0; min-width: 0; min-height: 40px; border: 0; outline: none; background: transparent; color: var(--pub-text); font-size: 16px; font-weight: 600; font-family: inherit; padding: 0; }
.pub-ask__pill-input::placeholder { color: var(--pub-muted); font-weight: 500; }
.pub-ask__btn { width: 100%; min-height: 50px; border-radius: 999px; }
.pub-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* "Phòng mới cập nhật": one row per price band. Below 992px a row is a sideways strip that
   scrolls inside its own box (the page never gets wider); from 992px a 4-column grid. */
.pub-featured__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 20px; }
.pub-featured__head .pub-h2 { margin: 0 0 2px; }
.pub-featured__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--pub-accent); }
/* Each band is its own tinted panel with the price as a solid brand pill, so two rows read as two
   price segments at a glance instead of one long run of cards. */
.pub-price-row { padding: 14px 12px 12px; border-radius: var(--pub-radius); background: var(--pub-bg-2); border: 1px solid var(--pub-border); }
.pub-price-row + .pub-price-row { margin-top: 24px; }
.pub-price-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pub-price-row__title { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--pub-accent); color: var(--pub-on-accent); font-size: 1rem; line-height: 1.3; }
.pub-price-row__cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.pub-price-row__cards::-webkit-scrollbar { display: none; }
.pub-price-row__cards > .pub-room-card { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }

/* Room card — shared by landing, listing, assistant and shortlist. */
.pub-room-card {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: transparent; border: 0; border-radius: var(--pub-radius);
}
.pub-room-card:hover .pub-room-card__media { box-shadow: var(--pub-shadow); }
.pub-room-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--pub-surface-2); overflow: hidden; border-radius: var(--pub-radius); transition: box-shadow .15s ease; }
/* Absolutely positioned so a tall photo cannot stretch the box past its 4:3 ratio. */
.pub-room-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The default illustration is the whole tile; the slight zoom keeps its white frame off the edges. */
.pub-room-card__media img.pub-room-card__default { transform: scale(1.04); }
.pub-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.pub-tag--verified { background: var(--pub-green); color: #fff; }
/* A pinned room's badge ("Phòng hot", "Bán chạy"…): warm, so it reads as a promotion, not a check. */
.pub-tag--hot { background: var(--pub-hot); color: #fff; }
.pub-tag--available { background: var(--pub-surface); color: var(--pub-green); border: 1px solid var(--pub-green); }
.pub-tag--type { background: var(--pub-accent-soft); color: var(--pub-accent); border: 1px solid var(--pub-border); }
.pub-room-card__tag-left { position: absolute; top: 10px; left: 10px; }
.pub-room-card__tag-bottom { position: absolute; bottom: 10px; left: 10px; }
.pub-heart {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pub-border);
    background: var(--pub-surface); color: var(--pub-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.pub-heart[aria-pressed="true"] { color: #e0485a; }
.pub-heart[aria-pressed="true"] svg { fill: currentColor; }
.pub-room-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; flex: 1; min-width: 0; }
.pub-room-card__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 0.8rem; }
.pub-room-card__meta > * { white-space: nowrap; }
.pub-room-card__verified { display: none; align-items: center; gap: 4px; color: var(--pub-green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; }
.pub-room-card__hot { display: none; align-items: center; color: var(--pub-hot); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
/* Narrow rows keep only the check; the words come back as soon as there is room. */
.pub-room-card__verified-text { display: none; }
.pub-body .pub-room-card__title { font-family: var(--pub-font-sans); font-size: 0.98rem; font-weight: 700; line-height: 1.35; margin: 0; }
/* The title is a thumb target too: at least 44px tall, clamped to two lines. */
.pub-room-card__title a { display: flex; align-items: center; min-height: 44px; }
.pub-room-card__title a > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-room-card__line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.85rem; min-width: 0; }
.pub-room-card__headline { color: var(--pub-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pub-room-card__line > svg { flex-shrink: 0; }
/* Price left, "Xem" right, on every width: a phone card is full-width, so the row always fits. */
.pub-room-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--pub-border); }
.pub-room-card__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pub-room-card__price strong { font-size: 1.3rem; font-weight: 800; color: var(--pub-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-room-card__price small { font-size: 0.72rem; color: var(--pub-muted); font-weight: 600; margin-left: 2px; }
.pub-room-card__foot .pub-btn { flex-shrink: 0; }

/* Assistant */
.pub-assistant__fields { display: flex; flex-direction: column; gap: 4px; }
.pub-assistant__result { display: flex; flex-direction: column; min-width: 0; }
.pub-assistant__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px 12px; border: 1px dashed var(--pub-border); border-radius: 14px; }
.pub-assistant__empty-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-accent-soft); color: var(--pub-accent); font-size: 1.4rem; }
.pub-assistant__title { margin: 0 0 10px; }
.pub-assistant__cards { display: grid; gap: 14px; }
/* A suggestion is the flat card plus a tinted score box under it (the card has no frame to attach to). */
.pub-suggestion { display: flex; flex-direction: column; }
.pub-suggestion__score { margin: 12px 4px 0; padding: 10px 14px; border-radius: var(--pub-radius-sm); background: var(--pub-accent-soft); }
.pub-match { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.85rem; }
.pub-match li { display: flex; gap: 6px; }
.pub-match__ok { color: var(--pub-green); }
.pub-match__near { color: var(--pub-accent); }
.pub-match__miss { color: var(--pub-muted); }

/* Assistant results section (under the hero, only when something was asked). */
.pub-assistant-results__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.pub-refine { border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm); background: var(--pub-surface); }
.pub-refine__summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; list-style: none; }
.pub-refine__summary::-webkit-details-marker { display: none; }
.pub-refine__summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--pub-muted); }
.pub-refine[open] .pub-refine__summary::after { content: "−"; }
.pub-refine .pub-assistant__fields { padding: 4px 16px 16px; }
.pub-assistant__cards { grid-template-columns: 1fr; }

/* Searchable ward select */
.pub-combo { position: relative; }
.pub-combo__native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pub-combo__input { padding-right: 44px; }
.pub-combo__clear { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--pub-muted); font-size: 1.4rem; cursor: pointer; }
.pub-combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 240px; overflow-y: auto; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--pub-surface); border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm); box-shadow: var(--pub-shadow); }
.pub-combo__item { padding: 10px 12px; min-height: 44px; border-radius: 8px; cursor: pointer; }
.pub-combo__item:hover, .pub-combo__item--active { background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-combo__item[aria-selected="true"] { font-weight: 700; }
.pub-combo__empty { padding: 10px 12px; color: var(--pub-muted); }

/* About: one soft band — a line and the three promises in a row. */
.pub-about { padding: 24px 20px; display: flex; flex-direction: column; gap: 20px; }
.pub-about__line { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.pub-values { gap: 16px; }
.pub-value { display: flex; gap: 14px; align-items: flex-start; }
.pub-value__icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-accent-soft); color: var(--pub-accent); flex-shrink: 0; }
.pub-value strong { display: block; font-size: 1rem; }
.pub-value p { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.45; }

/* The assistant section: copy on the left, the ask card on the right. */

/* Careers band: soft, with the primary button. */
.pub-careers-cta { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--pub-radius); background: var(--pub-surface-2); border: 1px solid var(--pub-border); }
.pub-careers-cta__text { display: flex; flex-direction: column; gap: 6px; }
.pub-careers-cta__text .pub-h2 { margin: 0; }
.pub-careers-cta__text p { margin: 0; color: var(--pub-muted); }
.pub-careers-cta__eyebrow { color: var(--pub-accent); }
.pub-body .pub-careers-cta__btn { width: 100%; background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
.pub-body .pub-careers-cta__btn:hover { background: var(--pub-accent-strong); color: var(--pub-on-accent); }

/* FAQ (Bootstrap accordion, restyled) */
.pub-faq { max-width: 860px; margin: 0 auto; }
.pub-faq__item { background: var(--pub-surface); border: 1px solid var(--pub-border) !important; border-radius: 12px !important; margin-bottom: 8px; overflow: hidden; }
.pub-faq__btn { background: transparent; color: var(--pub-text); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: none !important; min-height: 56px; }
.pub-faq__btn:not(.collapsed) { color: var(--pub-accent); background: var(--pub-accent-soft); }
.pub-faq__btn::after { filter: none; opacity: .7; }
.pub-faq__body { color: var(--pub-muted); font-size: 0.95rem; }

/* ── 10. Listing (/rooms) ──────────────────────────────────────────────────── */
/* Listing head: one line, the count under it — the page is the list, not the title. */
.pub-rooms__head { margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.pub-rooms__title { margin: 0; }
.pub-rooms__count { font-size: 0.88rem; }

/* The bar. Phone: a search button and a tools row. Desktop: the filter form itself, sticky. */
.pub-rooms__bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pub-rooms__search-btn { justify-content: flex-start; gap: 10px; width: 100%; color: var(--pub-muted); font-weight: 600; overflow: hidden; }
.pub-rooms__search-btn svg { flex-shrink: 0; color: var(--pub-accent); }
.pub-rooms__tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pub-rooms__filter-btn { flex-shrink: 0; }
.pub-rooms__empty { padding: 32px 20px; }

/* ── About page ────────────────────────────────────────────────────────────
   A page of real photos: a cover, a stat strip, vision/mission/values, a picture/text split,
   the events cards and the culture wall. Every photo has a fixed ratio so nothing jumps. */
.pub-about__more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--pub-accent); }
.pub-about-hero { position: relative; margin-bottom: 8px; }
.pub-about-hero__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pub-about-hero__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; background: linear-gradient(180deg, rgba(20, 33, 58, 0.15) 0%, rgba(20, 33, 58, 0.85) 70%); }
.pub-about-hero__text { padding-bottom: 24px; color: #ffffff; }
.pub-about-hero__text .pub-h1 { margin: 6px 0 10px; color: #ffffff; max-width: 760px; text-wrap: balance; }
.pub-about-hero__text p { margin: 0; max-width: 620px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.pub-about-hero__eyebrow { color: #8fc9f5; letter-spacing: 0.14em; }

/* Numbers as an editorial row: hairlines instead of filled boxes, so they read as facts. */
.pub-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; padding: 0; }
/* The accent fades out of the top-right corner, so the card reads as branded without a filled block. */
.pub-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 14px 18px; min-width: 0; border: 1px solid var(--pub-border); border-radius: var(--pub-radius); background: radial-gradient(circle at top right, var(--pub-accent-soft), transparent 62%), var(--pub-surface); }
.pub-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-stat__icon svg { width: 20px; height: 20px; }
.pub-stat__value { margin: 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; color: var(--pub-text); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pub-stat__label { margin: 0; color: var(--pub-muted); font-size: 0.82rem; line-height: 1.35; }

.pub-about-split { display: grid; gap: 24px; }
.pub-about-split__text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pub-about-split__text .pub-h2 { margin: 0; }
.pub-about-split__text p { margin: 0; line-height: 1.6; }
.pub-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pub-about-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.pub-about-list svg { color: var(--pub-accent); flex-shrink: 0; margin-top: 2px; }
.pub-about-split__media { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-about-split__media img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--pub-radius); }

.pub-section__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 720px; }
.pub-section__head .pub-h2 { margin: 0; }
.pub-section__head p { margin: 0; line-height: 1.6; }

.pub-gallery-grid { display: grid; grid-auto-flow: dense; grid-template-columns: 1fr 1fr; gap: 10px; }
.pub-gallery-grid__item { margin: 0; border-radius: var(--pub-radius); overflow: hidden; background: var(--pub-surface-2); }
.pub-gallery-grid__item img { display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s ease; }
.pub-gallery-grid__item:hover img { transform: scale(1.04); }
/* Folded: the wall is cropped to a couple of rows and fades out, so the cut never lands on a
   ragged edge whatever the photo ratios are. public.js adds the class; no script = no crop. */
.pub-gallery-wrap.is-folded { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
.pub-gallery-more { display: flex; justify-content: center; margin-top: 16px; }

/* "Sự kiện tiêu biểu": captioned photo cards, 1 column on a phone, 2 from 576px, 3 from 992px. */
.pub-events { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pub-event { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.pub-event img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--pub-radius); }
.pub-event figcaption { font-weight: 700; }

/* "Định hướng": vision, mission, values side by side from 768px, stacked below. */
.pub-vision { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pub-vision__item { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--pub-radius); background: var(--pub-surface-2); }
.pub-vision__item p { margin: 0; line-height: 1.6; }
.pub-vision__title { margin: 0; font-size: 1.15rem; font-weight: 800; }
.pub-about-hero__text .pub-about-hero__motto { margin-top: 8px; font-weight: 700; color: #ffffff; }
.pub-about-hero__text p + p { margin-top: 6px; }

.pub-about-contact { display: grid; gap: 16px; padding: 20px; border-radius: var(--pub-radius); border: 1px solid var(--pub-border); }
.pub-about-contact p { margin: 4px 0 0; line-height: 1.5; }
.pub-about-contact a { font-weight: 600; }

/* Pager: prev / page count / next on a phone, numbered pages from 576px. Every target is 44px. */
.pub-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pub-border); }
.pub-pager__step { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-text); font-size: 0.88rem; font-weight: 700; }
.pub-pager__step:hover { border-color: var(--pub-accent); color: var(--pub-accent); }
.pub-pager__step.is-disabled { opacity: .45; }
.pub-pager__count { flex: 1 1 auto; text-align: center; color: var(--pub-muted); font-size: 0.85rem; }
.pub-pager__pages { display: none; align-items: center; gap: 4px; }
.pub-pager__page { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: var(--pub-radius-sm); color: var(--pub-text); font-weight: 700; font-size: 0.9rem; }
.pub-pager__page:hover { background: var(--pub-surface-2); color: var(--pub-accent); }
.pub-pager__page.is-active { background: var(--pub-accent); color: var(--pub-on-accent); }
.pub-pager__gap { min-width: 24px; text-align: center; color: var(--pub-muted); }

/* Active filters, one chip each; the ✕ drops that one filter. */
.pub-rooms__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pub-chip--remove { gap: 8px; min-height: 44px; padding: 0 14px; background: var(--pub-accent-soft); border-color: transparent; color: var(--pub-accent); }
.pub-chip--remove:hover { background: var(--pub-accent); color: var(--pub-on-accent); }
.pub-rooms__chips-clear { font-size: 0.82rem; font-weight: 700; color: var(--pub-muted); min-height: 44px; display: inline-flex; align-items: center; }
.pub-rooms__chips-clear:hover { color: var(--pub-accent); }

/* Grid / list switch. List is the phone default: more rooms per screen. */
.pub-view { display: flex; margin-left: auto; flex-shrink: 0; border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm); overflow: hidden; }
.pub-view__btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--pub-surface); color: var(--pub-muted); }
.pub-view__btn.is-active { background: var(--pub-accent-soft); color: var(--pub-accent); }

/* Two ways to draw the same card. .is-list = a row (square thumbnail left, essentials right),
   .is-grid = the picture card of the landing page. public.js sets one of the two classes; the
   defaults below (list on a phone) are what a visitor without JavaScript gets. */
.pub-rooms__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.pub-rooms__grid.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.pub-rooms__grid .pub-room-card,
.pub-rooms__grid.is-list .pub-room-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; }
.pub-rooms__grid .pub-room-card__media,
.pub-rooms__grid.is-list .pub-room-card__media { aspect-ratio: 1 / 1; border-radius: var(--pub-radius-sm); }
/* A 116px thumbnail has no room for tags: the ✓ moves into the meta line instead. */
.pub-rooms__grid .pub-room-card__media .pub-tag,
.pub-rooms__grid.is-list .pub-room-card__media .pub-tag { display: none; }
.pub-rooms__grid .pub-heart,
.pub-rooms__grid.is-list .pub-heart { top: 0; right: 0; width: 44px; height: 44px; background: transparent; border: 0; box-shadow: none; }
/* The ♥ floats over the card's top-right corner, so a row keeps that corner clear of text. */
.pub-rooms__grid .pub-room-card__body,
.pub-rooms__grid.is-list .pub-room-card__body { padding: 0 40px 0 0; gap: 4px; }
.pub-rooms__grid .pub-room-card__foot,
.pub-rooms__grid.is-list .pub-room-card__foot { margin-right: -40px; }
.pub-rooms__grid .pub-room-card__headline,
.pub-rooms__grid.is-list .pub-room-card__headline { display: none; }
.pub-rooms__grid .pub-room-card__verified,
.pub-rooms__grid.is-list .pub-room-card__verified,
.pub-rooms__grid .pub-room-card__hot,
.pub-rooms__grid.is-list .pub-room-card__hot { display: inline-flex; }
.pub-rooms__grid .pub-room-card__foot,
.pub-rooms__grid.is-list .pub-room-card__foot { padding-top: 6px; border-top: 0; }
.pub-sort { min-width: 0; }
.pub-sort .pub-drop__value { min-width: 0; }

.pub-rooms__grid.is-grid .pub-room-card { display: flex; flex-direction: column; align-items: stretch; }
.pub-rooms__grid.is-grid .pub-room-card__media { aspect-ratio: 4 / 3; border-radius: var(--pub-radius); }
.pub-rooms__grid.is-grid .pub-room-card__media .pub-tag { display: inline-flex; font-size: 0.62rem; padding: 0 10px; }
.pub-rooms__grid.is-grid .pub-room-card__verified,
.pub-rooms__grid.is-grid .pub-room-card__hot { display: none; }
.pub-rooms__grid.is-grid .pub-room-card__tag-bottom { display: inline-flex; }
.pub-rooms__grid.is-grid .pub-room-card__body { padding: 12px 4px 0; }
.pub-rooms__grid.is-grid .pub-room-card__headline { display: -webkit-box; }
.pub-rooms__grid.is-grid .pub-room-card__foot { padding-top: 10px; margin-right: 0; border-top: 1px dashed var(--pub-border); }
.pub-rooms__grid.is-grid .pub-heart { top: 10px; right: 10px; width: 44px; height: 44px; background: var(--pub-surface); border: 1px solid var(--pub-border); }

/* The filter form: search row, then one <details> per group. */
.pub-filter { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pub-filter__search { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--pub-border); border-radius: 999px; background: var(--pub-surface); min-width: 0; }
.pub-filter__search:focus-within { border-color: var(--pub-accent); }
.pub-filter__search-icon { display: inline-flex; color: var(--pub-accent); flex-shrink: 0; }
.pub-filter__input { flex: 1 1 0; min-width: 0; min-height: 44px; border: 0; outline: none; background: transparent; color: var(--pub-text); font-size: 16px; font-family: inherit; }
.pub-filter__submit { flex-shrink: 0; min-height: 44px; padding: 0 20px; border-radius: 999px; }
.pub-filter__ai { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-filter__ai:hover { background: var(--pub-accent); color: var(--pub-on-accent); }
.pub-filter__groups { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* A dropdown group: summary is the button, the panel floats over the page on a desktop. */
.pub-drop { position: relative; min-width: 0; }
.pub-drop__summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm); background: var(--pub-surface); color: var(--pub-text); font-size: 0.9rem; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
.pub-drop__summary::-webkit-details-marker { display: none; }
.pub-drop__summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--pub-muted); border-bottom: 2px solid var(--pub-muted); transform: rotate(45deg) translate(-2px, -2px); flex-shrink: 0; }
.pub-drop[open] > .pub-drop__summary { border-color: var(--pub-accent); color: var(--pub-accent); }
.pub-drop[open] > .pub-drop__summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--pub-accent); }
.pub-drop__summary:focus-visible { outline: 2px solid var(--pub-accent); outline-offset: 2px; }
.pub-drop__value { color: var(--pub-accent); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pub-drop__panel { padding: 12px 0 4px; }
.pub-drop__option { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--pub-radius-sm); color: var(--pub-text); font-weight: 600; }
.pub-drop__option:hover { background: var(--pub-surface-2); }
.pub-drop__option.is-active { color: var(--pub-accent); background: var(--pub-accent-soft); }
.pub-sort { flex: 1 1 auto; min-width: 0; }
.pub-sort .pub-drop__summary { width: 100%; }
.pub-sort__label { display: none; color: var(--pub-muted); font-weight: 600; }
.pub-sort .pub-drop__summary { padding: 0 10px; }
.pub-sort .pub-drop__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 180px; padding: 8px; border: 1px solid var(--pub-border); border-radius: var(--pub-radius); background: var(--pub-surface); box-shadow: var(--pub-shadow); }

.pub-rooms__aside-head { border-bottom: 1px solid var(--pub-border); }
.pub-rooms__aside-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--pub-border); background: var(--pub-surface); }

/* ── 11. Detail (/rooms/{slug}-{id}) ───────────────────────────────────────── */
.pub-detail__back { display: inline-flex; align-items: center; min-height: 44px; color: var(--pub-muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pub-detail__head { margin: 4px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.pub-detail__title { margin: 0; letter-spacing: -0.02em; }
.pub-detail__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pub-detail__area { display: inline-flex; align-items: center; gap: 6px; color: var(--pub-muted); margin: 0 4px 0 0; }
.pub-detail__layout { display: grid; gap: 20px; grid-template-areas: "gallery" "aside" "main"; }
.pub-detail__gallery { grid-area: gallery; min-width: 0; }
.pub-detail__main { grid-area: main; min-width: 0; }
.pub-detail__aside { grid-area: aside; min-width: 0; }
.pub-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: 12px; }
.pub-fact { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; min-width: 0; border-radius: 12px; border: 1px solid var(--pub-border); background: var(--pub-surface); }
.pub-fact strong { color: var(--pub-accent); font-size: 0.95rem; overflow-wrap: anywhere; }
.pub-fact .pub-caps { font-size: 0.6rem; }
.pub-detail__block { margin-bottom: 24px; }
.pub-detail__h { color: var(--pub-text); font-size: 0.8rem; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--pub-border); }
.pub-detail__desc { white-space: pre-line; color: var(--pub-muted); margin: 0; overflow-wrap: anywhere; }
.pub-detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pub-detail__list li { display: flex; align-items: center; gap: 8px; }
.pub-detail__list svg { color: var(--pub-accent); flex-shrink: 0; }
.pub-amenities { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pub-amenity { display: flex; align-items: flex-start; gap: 10px; padding: 10px; min-width: 0; border-radius: 12px; border: 1px solid var(--pub-border); background: var(--pub-surface); }
.pub-amenity__icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-accent-soft); color: var(--pub-accent); font-weight: 800; flex-shrink: 0; }
.pub-amenity > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pub-amenity strong { font-size: 0.88rem; }
.pub-amenity small { color: var(--pub-muted); font-size: 0.72rem; }

.pub-gallery__large { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: var(--pub-surface-2); border: 1px solid var(--pub-border); }
.pub-gallery__large img, .pub-gallery__large video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pub-gallery__large video { object-fit: contain; background: #000; cursor: default; }
/* Video watermark overlay: logo top-left and tiled "STAR HOUSE" text over the player, click-through.
   Videos are stored unmarked; site.css carries the same rule for the internal pages. */
.sh-wm { position: relative; display: block; line-height: 0; }
.sh-wm:has(> video[hidden]) { display: none; }
.sh-wm::before, .sh-wm::after { content: ""; position: absolute; pointer-events: none; }
.sh-wm::before { top: 3%; left: 3%; width: 14%; aspect-ratio: 705 / 370; background: url("/img/logo.png") center / contain no-repeat; opacity: 0.85; }
.sh-wm::after { inset: 0; background: url("/img/watermark-tile.svg") center / 180px 120px repeat; }
.pub-gallery__large .sh-wm { position: absolute; inset: 0; }
.pub-gallery__default { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-gallery__noimg-note { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 33, 58, 0.72); color: #ffffff; font-size: 0.8rem; font-weight: 600; }
.pub-gallery__thumbs { margin-top: 10px; }
.pub-gallery__thumb { position: relative; flex: 0 0 auto; width: 88px; height: 66px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--pub-surface-2); cursor: pointer; }
.pub-gallery__thumb.is-active { border-color: var(--pub-accent); }
.pub-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pub-gallery__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--pub-accent); font-size: 1.4rem; }
.pub-lightbox { background: #000; border: 0; border-radius: 12px; }
.pub-lightbox img { width: 100%; max-height: 85vh; object-fit: contain; }
.pub-lightbox__close { position: absolute; top: 8px; right: 8px; z-index: 2; color: #fff; }

.pub-detail__price-card { display: flex; flex-direction: column; gap: 10px; }
.pub-detail__price { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pub-accent); line-height: 1.1; }
.pub-detail__deposit { font-size: 0.9rem; color: var(--pub-muted); }
.pub-fees { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--pub-surface-2); border: 1px solid var(--pub-border); }
.pub-fees__list { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 8px 0 0; font-size: 0.9rem; }
.pub-fees__list dt { color: var(--pub-muted); font-weight: 500; }
.pub-fees__list dd { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; overflow-wrap: anywhere; }
.pub-deposit { font-size: 0.85rem; color: var(--pub-muted); }
.pub-deposit p { margin: 4px 0 0; }
/* Every cell is the same height, so the price row and the booking button line up across the row. */
.pub-shortlist__item { display: flex; flex-direction: column; }
.pub-shortlist__item > .pub-room-card { flex: 1; }
.pub-shortlist__head { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.pub-shortlist__titles { display: flex; flex-direction: column; gap: 2px; }
.pub-shortlist__title { margin: 0; }
/* An empty basket is one short message, so the card stays narrow instead of stretching the page. */
.pub-shortlist__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 32px 24px; }
.pub-shortlist__empty p { margin: 0; }
.pub-shortlist__empty .pub-btn { margin-top: 6px; }
.pub-shortlist__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pub-accent-soft); color: var(--pub-accent); }
.pub-shortlist__cta { max-width: 520px; margin: 24px auto 0; padding: 28px 20px; }

/* ── 12. Booking (/booking) ────────────────────────────────────────────────── */
/* Booking: one column around the phone field; the steps are a strip under the card. */
.pub-booking { max-width: 720px; margin: 0 auto; }
.pub-booking__head { text-align: center; margin-bottom: 16px; }
.pub-booking__head .pub-h2 { margin: 0 0 8px; text-wrap: balance; }
.pub-booking__lead { margin: 0; color: var(--pub-muted); line-height: 1.5; }
.pub-booking__phone { margin-bottom: 12px; }
.pub-booking__phone-input { min-height: 56px; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em; }
.pub-booking__submit { min-height: 54px; font-size: 1rem; }
.pub-booking__promise { margin: 10px 0 0; text-align: center; color: var(--pub-muted); font-size: 0.82rem; }
/* The privacy link sits in a 44px-tall box so it is a comfortable tap target on a phone. */
.pub-booking__promise-link, .pub-prose__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--pub-accent); text-decoration: underline; text-underline-offset: 3px; }
/* Static text page (privacy policy): readable line length, normal list spacing. */
.pub-prose { max-width: 760px; }
.pub-prose h2 { margin-top: 24px; }
.pub-prose ul { padding-left: 20px; margin: 8px 0; }
.pub-prose li { margin-bottom: 8px; line-height: 1.55; }
.pub-prose p { line-height: 1.55; }
/* The three steps read as one strip under the card, not a list of paragraphs. */
.pub-booking__steps { margin-top: 20px; padding: 16px; border-radius: var(--pub-radius); background: var(--pub-surface-2); }
.pub-booking__steps .pub-steps { gap: 12px; }
.pub-booking__call { margin: 16px 0 0; text-align: center; color: var(--pub-muted); font-size: 0.9rem; }
.pub-booking__call a { font-weight: 700; }
.pub-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pub-step { display: flex; gap: 12px; align-items: flex-start; }
.pub-step__num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-accent); color: var(--pub-on-accent); font-weight: 800; flex-shrink: 0; }
.pub-step > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pub-step small { color: var(--pub-muted); }
.pub-booking__form { display: flex; flex-direction: column; }
.pub-booking__room { display: flex; flex-direction: column; gap: 4px; padding: 12px; margin-bottom: 16px; border-radius: 12px; background: var(--pub-surface-2); border: 1px dashed var(--pub-border); }
.pub-booking__room-link { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; font-weight: 600; }
/* The rooms of the one appointment, each removable. */
.pub-booking__rooms { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pub-booking__room-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pub-booking__room-item .pub-booking__room-link { min-width: 0; overflow-wrap: anywhere; }
.pub-booking__room-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pub-border); background: var(--pub-surface); color: var(--pub-muted); font-weight: 700; }
.pub-booking__room-remove:hover { color: var(--pub-danger); border-color: var(--pub-danger); }
/* Two blocks: "bắt buộc" and "không bắt buộc", both open. */
.pub-booking__block { margin: 0 0 16px; padding: 16px 14px 4px; border: 1px solid var(--pub-border); border-radius: var(--pub-radius-sm); min-width: 0; }
.pub-booking__block-title { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: 1rem; font-weight: 800; }
.pub-booking__block-title + * { clear: both; }
.pub-booking__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* The shortlist: which saved rooms go into the one appointment. */
.pub-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; }
.pub-check__input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--pub-accent); }
.pub-shortlist__pick { margin-top: 6px; }
.pub-detail__cart-hint { margin: 8px 0 0; font-size: 0.85rem; text-align: center; }
.pub-detail__cart-hint a { font-weight: 700; color: var(--pub-accent); }
.pub-booking__done { max-width: 560px; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pub-booking__done-icon { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-green-soft); color: var(--pub-green); font-size: 2rem; font-weight: 800; }
.pub-booking__done-cta { justify-content: center; width: 100%; }

/* ── 12b. Careers ─────────────────────────────────────────────────────────── */
/* The four perks sit in a full-width band above the two columns, so the requirements column
   and the form below it stay close in height. */
.pub-careers__perks-title { margin: 0 0 14px; text-align: center; }
.pub-perks { list-style: none; display: grid; gap: 12px; max-width: 980px; margin: 0 auto 28px; padding: 0; }
.pub-perk { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 18px; border: 1px solid var(--pub-border); border-radius: var(--pub-radius); background: radial-gradient(circle at top right, var(--pub-accent-soft), transparent 62%), var(--pub-surface); }
.pub-perk strong { line-height: 1.3; }
.pub-perk small { color: var(--pub-muted); line-height: 1.45; }
.pub-careers__layout { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.pub-careers__info { display: flex; flex-direction: column; gap: 12px; }
.pub-careers__form { display: flex; flex-direction: column; }
.pub-careers__form > .pub-caps { margin-bottom: 12px; }
.pub-careers__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pub-careers__list li { display: flex; gap: 12px; align-items: flex-start; }
.pub-careers__list li > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.pub-careers__list small { color: var(--pub-muted); }
.pub-careers__list--compact { gap: 8px; }
.pub-careers__icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--pub-accent); color: var(--pub-on-accent); flex-shrink: 0; }
.pub-careers__list--compact .pub-careers__icon { width: 28px; height: 28px; border-radius: 50%; color: var(--pub-green); background: var(--pub-green-soft); }

/* ── 13. Breakpoints ───────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .pub-price-row__cards > .pub-room-card { flex-basis: 44%; }
    .pub-events { grid-template-columns: repeat(2, 1fr); }
    .pub-pager__pages { display: flex; }
    .pub-pager__count { display: none; }
    .pub-room-card__verified-text { display: inline; }
    .pub-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .pub-h1 { font-size: 2.6rem; }
    .pub-brand__tagline { display: block; }
    .pub-hero__cta { flex-direction: row; }
    .pub-hero__cta .pub-btn { width: auto; }
    .pub-assistant__cards { grid-template-columns: 1fr 1fr; }
    .pub-careers__layout { grid-template-columns: 1fr 1.2fr; align-items: start; }
    .pub-shortlist__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .pub-perks { grid-template-columns: 1fr 1fr; }
    .pub-grid--sm-2 { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .pub-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .pub-stat { padding: 20px 20px 22px; }
    .pub-stat__value { font-size: 2.4rem; }
    .pub-gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .pub-vision { grid-template-columns: repeat(3, 1fr); }
    .pub-about-contact { grid-template-columns: repeat(3, 1fr); }
    .pub-booking__steps .pub-steps { flex-direction: row; gap: 20px; }
    .pub-booking__steps .pub-step { flex: 1 1 0; }
    .pub-body { padding-bottom: 0; }
    .pub-bottom-nav { display: none; }
    .pub-zalo-fab {
        position: fixed; right: 20px; bottom: 20px; z-index: 1030;
        display: inline-flex; align-items: center; justify-content: center;
        width: 56px; height: 56px; border-radius: 50%; background: #2f7be5; color: #fff;
        box-shadow: 0 8px 24px rgba(47,123,229,.4);
    }
    .pub-zalo-fab:hover { color: #fff; transform: translateY(-2px); }
    .pub-header__mobile-only { display: none; }
    .pub-header__desktop-only { display: inline-flex; }
    .pub-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
    /* Five links have to fit beside the logo and two icons in 736px at 768px: tight here, roomier
       from 1200px where the "Đặt lịch xem" pill also appears. */
    .pub-nav__link {
        display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; border-radius: 10px;
        font-weight: 600; font-size: 0.82rem; color: var(--pub-on-header); white-space: nowrap;
    }
    .pub-nav__link:hover { background: var(--pub-header-hover); color: var(--pub-accent); }
    .pub-nav__link.is-active { background: var(--pub-accent-soft); color: var(--pub-accent); }
    /* Tablets: the logo already links home, so the "Trang Chủ" link waits until 992px. */
    .pub-nav__link--home { display: none; }
    .pub-section { padding-top: 32px; padding-bottom: 32px; }
    .pub-h1 { font-size: 3rem; }
    .pub-h2 { font-size: 1.9rem; }
    .pub-grid--md-3 { grid-template-columns: repeat(3, 1fr); }
    .pub-grid--md-2 { grid-template-columns: repeat(2, 1fr); }
    .pub-hero { padding-top: 56px; padding-bottom: 32px; gap: 20px; }
    .pub-hero__logo { width: 220px; }
    .pub-hero__lead { font-size: 1.15rem; }
    .pub-ask { padding: 20px 20px 16px; border-radius: 24px; }
    .pub-ask__text { font-size: 1.1rem; min-height: 84px; }
    .pub-ask__bar { flex-direction: row; align-items: center; justify-content: space-between; }
    .pub-ask__pills { display: flex; flex-wrap: wrap; }
    .pub-ask__pill { min-height: 40px; gap: 8px; padding: 0 10px 0 12px; border-radius: 999px; }
    .pub-ask__pill:not(.pub-ask__pill--wide) > svg { display: inline; }
    .pub-ask__pill-select, .pub-ask__pill-input { min-height: 38px; }
    .pub-ask__pill--street { flex: 1 1 270px; min-width: 270px; }
    .pub-ask__btn { width: auto; flex-shrink: 0; min-width: 168px; min-height: 48px; padding: 0 22px; }
    .pub-featured__head { flex-direction: row; justify-content: space-between; align-items: flex-end; }
    .pub-assistant__cards { grid-template-columns: repeat(3, 1fr); }
    .pub-about { padding: 32px; }
    .pub-careers-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 36px; }
    .pub-body .pub-careers-cta__btn { width: auto; flex-shrink: 0; }
    .pub-detail__layout { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "gallery aside" "main aside"; align-items: start; gap: 24px 28px; }
    .pub-detail__aside { position: sticky; top: calc(var(--pub-header-h) + 16px); }
    .pub-amenities { grid-template-columns: repeat(3, 1fr); }
    /* A 4:3 gallery would be 600px tall in this column; 3:2 keeps the price card in view. */
    .pub-detail__gallery .pub-gallery__large { aspect-ratio: 3 / 2; }
    .pub-container { padding-left: 24px; padding-right: 24px; }
}


@media (min-width: 992px) {
    .pub-price-row { padding: 20px 20px 16px; }
    .pub-price-row + .pub-price-row { margin-top: 32px; }
    .pub-price-row__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
    .pub-price-row__cards > .pub-room-card { flex: initial; }
    .pub-events { grid-template-columns: repeat(3, 1fr); }
    .pub-about-hero__img { aspect-ratio: 21 / 9; }
    .pub-perks { grid-template-columns: repeat(4, 1fr); }
    .pub-about-hero__text { padding-bottom: 40px; }
    .pub-about-split { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
    .pub-about-split--reverse .pub-about-split__text { order: 2; }
    .pub-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .pub-gallery-wrap.is-folded { max-height: 560px; }
    .pub-gallery-grid__item--tall { grid-row: span 2; }
    .pub-gallery-grid__item--tall img { aspect-ratio: 1 / 2.06; }
    .pub-brand { margin-right: 0; }
    .pub-nav__link--home { display: inline-flex; }
    /* Filter sidebar: the offcanvas markup stays, but it is pinned open here. */
    /* The drawer becomes the bar: search row and groups side by side, sticky under the header. */
    .pub-rooms__bar { position: sticky; top: var(--pub-header-h); z-index: 3; flex-direction: row; align-items: center; gap: 12px; padding: 10px 0; background: var(--pub-bg); }
    .pub-rooms__aside.offcanvas { position: static; visibility: visible !important; transform: none !important; width: auto; height: auto; flex: 1 1 auto; min-width: 0; border: 0; background: transparent; display: block; z-index: auto; }
    .pub-rooms__aside-head, .pub-rooms__aside-foot, .pub-rooms__search-btn, .pub-rooms__filter-btn { display: none; }
    .pub-rooms__aside-body { padding: 0; overflow: visible; }
    .pub-filter { flex-direction: row; align-items: center; gap: 10px; }
    .pub-filter__search { flex: 1 1 300px; max-width: 460px; }
    .pub-filter__groups { flex-direction: row; align-items: center; gap: 8px; }
    .pub-drop__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 260px; padding: 14px; border: 1px solid var(--pub-border); border-radius: var(--pub-radius); background: var(--pub-surface); box-shadow: var(--pub-shadow); }
    .pub-drop__panel--wide { min-width: 320px; }
    .pub-drop__panel--right { left: auto; right: 0; }
    .pub-rooms__tools { flex: 0 0 auto; }
    .pub-sort { flex: 0 0 auto; }
    .pub-sort__label { display: inline; }
    /* Desktop default is the picture grid; rows stay available through the switch. */
    .pub-rooms__grid, .pub-rooms__grid.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .pub-rooms__grid .pub-room-card { display: flex; flex-direction: column; align-items: stretch; }
    .pub-rooms__grid .pub-room-card__media, .pub-rooms__grid.is-grid .pub-room-card__media { aspect-ratio: 3 / 2; border-radius: var(--pub-radius); }
    .pub-rooms__grid .pub-room-card__media .pub-tag, .pub-rooms__grid.is-grid .pub-room-card__media .pub-tag { display: inline-flex; }
    .pub-rooms__grid .pub-room-card__verified, .pub-rooms__grid.is-grid .pub-room-card__verified,
.pub-rooms__grid.is-grid .pub-room-card__hot { display: none; }
    .pub-rooms__grid .pub-room-card__body, .pub-rooms__grid.is-grid .pub-room-card__body { padding: 12px 4px 0; }
    .pub-rooms__grid .pub-room-card__headline, .pub-rooms__grid.is-grid .pub-room-card__headline { display: -webkit-box; }
    .pub-rooms__grid .pub-room-card__foot, .pub-rooms__grid.is-grid .pub-room-card__foot { padding-top: 10px; margin-right: 0; border-top: 1px dashed var(--pub-border); }
    .pub-rooms__grid .pub-heart, .pub-rooms__grid.is-grid .pub-heart { top: 10px; right: 10px; width: 44px; height: 44px; background: var(--pub-surface); border: 1px solid var(--pub-border); }
    .pub-rooms__grid.is-list { grid-template-columns: 1fr; gap: 12px; }
    .pub-rooms__grid.is-list .pub-room-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
    .pub-rooms__grid.is-list .pub-room-card__media { aspect-ratio: 4 / 3; }
    /* A wide row: what the room is on the left, price and the button on the right. */
    .pub-rooms__grid.is-list .pub-room-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 180px; align-items: center; column-gap: 20px; padding: 0 44px 0 0; }
    .pub-rooms__grid.is-list .pub-room-card__body > * { grid-column: 1; }
    .pub-rooms__grid.is-list .pub-room-card__foot { grid-column: 2; grid-row: 1 / -1; align-self: center; flex-direction: column; align-items: flex-end; gap: 10px; margin: 0; padding: 0; }
    .pub-rooms__grid.is-list .pub-room-card__price { align-items: flex-end; }
    .pub-rooms__grid.is-list .pub-room-card__headline { display: -webkit-box; }
    .pub-rooms__grid.is-list .pub-room-card__foot { border-top: 0; }
    .pub-h1 { font-size: 3.5rem; }
    .pub-grid--lg-4 { grid-template-columns: repeat(4, 1fr); }
    .pub-grid--lg-3 { grid-template-columns: repeat(3, 1fr); }
    .pub-footer__main { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
    .pub-footer__col > a { white-space: nowrap; }
    .pub-footer__brand-block { order: 1; }
    .pub-footer__grid { order: 2; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 24px; }
    .pub-footer__reach { order: 3; }
    .pub-footer__bottom { flex-direction: row; justify-content: space-between; padding-right: 88px; }   /* clear of the Zalo FAB */
    .pub-container { padding-left: 32px; padding-right: 32px; }
}

@media (min-width: 1200px) {
    .pub-rooms__grid, .pub-rooms__grid.is-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pub-logo { height: 52px; }
    .pub-logo img { height: 46px; }
    .pub-nav__link { padding: 0 14px; font-size: 0.92rem; }
    /* .pub-header a:hover (two classes) would otherwise win over the pill's own colour. */
    .pub-header .pub-header__cta { display: inline-flex; min-height: 44px; padding: 0 18px; margin-right: 6px; background: transparent; border-color: var(--pub-border); color: var(--pub-on-header); font-size: 0.9rem; }
    .pub-header .pub-header__cta:hover { border-color: var(--pub-accent); color: var(--pub-accent); }
}

/* ── Date-time picker (flatpickr on /booking) ──────────────────────────────
   flatpickr ships hard-coded greys and its own blue; these overrides map it onto the site
   tokens so the calendar follows the light/dark switch like everything else. Its stylesheet is
   linked from the page's Head section, i.e. AFTER this file, so every selector is prefixed with
   .pub-body (the calendar is appended to <body>) to outrank it. */
.pub-body .flatpickr-calendar { background: var(--pub-surface); color: var(--pub-text); border: 1px solid var(--pub-border);
    border-radius: var(--pub-radius-sm); box-shadow: var(--pub-shadow); font-family: var(--pub-font-sans);
    scroll-margin-top: calc(var(--pub-header-h) + 12px); scroll-margin-bottom: calc(var(--pub-bottom-nav-h) + 12px); }
.pub-body .flatpickr-calendar.arrowTop:before, .pub-body .flatpickr-calendar.arrowBottom:before { border-bottom-color: var(--pub-border); border-top-color: var(--pub-border); }
.pub-body .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--pub-surface); }
.pub-body .flatpickr-calendar.arrowBottom:after { border-top-color: var(--pub-surface); }
/* 135% pushes the year onto a clipped second line next to "Tháng mười một". */
.pub-body .flatpickr-current-month { font-size: 115%; }
.pub-body .flatpickr-months .flatpickr-month, .pub-body .flatpickr-current-month .flatpickr-monthDropdown-months, .pub-body .flatpickr-current-month input.cur-year { color: var(--pub-text); fill: var(--pub-text); }
.pub-body .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--pub-surface); color: var(--pub-text); }
.pub-body .flatpickr-months .flatpickr-prev-month, .pub-body .flatpickr-months .flatpickr-next-month { color: var(--pub-muted); fill: var(--pub-muted); }
.pub-body .flatpickr-months .flatpickr-prev-month:hover svg, .pub-body .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--pub-accent); }
.pub-body span.flatpickr-weekday { color: var(--pub-muted); font-weight: 700; }
.pub-body .flatpickr-day { color: var(--pub-text); }
.pub-body .flatpickr-day:hover, .pub-body .flatpickr-day:focus, .pub-body .flatpickr-day.prevMonthDay:hover, .pub-body .flatpickr-day.nextMonthDay:hover { background: var(--pub-accent-soft); border-color: var(--pub-accent-soft); color: var(--pub-text); }
.pub-body .flatpickr-day.today { border-color: var(--pub-accent); }
.pub-body .flatpickr-day.today:hover, .pub-body .flatpickr-day.today:focus { background: var(--pub-accent-soft); color: var(--pub-text); }
.pub-body .flatpickr-day.selected, .pub-body .flatpickr-day.selected:hover, .pub-body .flatpickr-day.selected:focus { background: var(--pub-accent); border-color: var(--pub-accent); color: var(--pub-on-accent); }
.pub-body .flatpickr-day.flatpickr-disabled, .pub-body .flatpickr-day.flatpickr-disabled:hover, .pub-body .flatpickr-day.prevMonthDay, .pub-body .flatpickr-day.nextMonthDay { color: var(--pub-muted); opacity: .45; }
.pub-body .flatpickr-time { border-top: 1px solid var(--pub-border); }
.pub-body .flatpickr-calendar.hasTime .flatpickr-time { border-top-color: var(--pub-border); }
.pub-body .flatpickr-time input, .pub-body .flatpickr-time .flatpickr-time-separator { color: var(--pub-text); font-size: 16px; }
.pub-body .flatpickr-time input:hover, .pub-body .flatpickr-time input:focus, .pub-body .flatpickr-time .numInputWrapper:hover { background: var(--pub-accent-soft); }
.pub-body .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--pub-muted); }
.pub-body .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--pub-muted); }
.pub-body .numInputWrapper span:hover, .pub-body .numInputWrapper span:active { background: var(--pub-accent-soft); }
/* The visible (alt) input is a read-only text box flatpickr creates with the original's
   classes; it must look clickable. The original becomes type=hidden, which the UA sheet hides. */
.pub-body .pub-input--picker { cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }

/* AI assistant: the chip line and the note under the suggestions. Colours are the theme
   tokens, so light and dark both work without extra rules. */
.pub-ai-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.pub-ai-chip {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--pub-accent); color: var(--pub-accent); background: var(--pub-accent-soft);
    font-size: 0.8rem; font-weight: 600;
}
.pub-ai-chip--muted { border-style: dashed; border-color: var(--pub-border); color: var(--pub-muted); background: transparent; }

.pub-ai-note { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--pub-accent); background: var(--pub-accent-soft); border-radius: 0 12px 12px 0; }
.pub-ai-note__text { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--pub-text); }