/* Bảo An Travel – Luxury: ngà / trắng, điểm nhấn vàng champagne, chữ serif thanh lịch */
:root {
  --ivory: #faf7f0;
  --cream: #f3ede1;
  --paper: #ffffff;
  --ink: #2a241b;
  --ink-2: #6b6254;
  --line: #e6dccb;
  --gold: #b8955a;
  --gold-2: #d8bf8f;
  --gold-dark: #8c6c37;
  --deep: #1f1b15;
  --danger: #a5432f;
  --serif: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --r: 14px;
  --shadow: 0 10px 30px rgba(60, 45, 20, .08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 300 16px/1.65 var(--sans); }
a { color: var(--gold-dark); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .4em; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.center { text-align: center; }
.w100 { width: 100%; }
.eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); font-weight: 500; margin-bottom: .5em; }
.eyebrow.light { color: var(--gold-2); }
.lead { font-size: 1.12rem; max-width: 620px; }
.lead.dark { font-family: var(--serif); font-size: 1.5rem; font-style: italic; color: var(--ink); }
.stars { color: var(--gold); letter-spacing: .15em; font-size: .85rem; }
.price { font-family: var(--serif); font-size: 1.45rem; color: var(--gold-dark); font-weight: 600; }
.price.big { font-size: 2rem; }
.old { color: var(--ink-2); font-size: .9rem; }
.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

/* nút */
.btn { display: inline-block; border: 1px solid transparent; border-radius: 999px; padding: 12px 26px; font: 500 .9rem var(--sans); letter-spacing: .04em; cursor: pointer; text-align: center; transition: .2s; }
.btn.small { padding: 7px 16px; font-size: .8rem; }
.btn-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, var(--gold-dark)); color: #fff; box-shadow: 0 6px 18px rgba(140, 108, 55, .25); }
.btn-gold:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.btn-line { border-color: var(--gold); color: var(--gold-dark); background: transparent; }
.btn-line:hover { background: var(--gold); color: #fff; }
.btn-danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.link { font-size: .9rem; letter-spacing: .03em; }

/* đầu trang */
.site-head { position: sticky; top: 0; z-index: 20; background: rgba(250, 247, 240, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav nav { display: flex; gap: 26px; align-items: center; }
.nav nav a { color: var(--ink); font-size: .92rem; letter-spacing: .03em; }
.nav nav a.on { color: var(--gold-dark); border-bottom: 1px solid var(--gold); }
.nav-hot { color: var(--gold-dark) !important; font-weight: 500; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--serif); font-size: 1.35rem; }
.logo b { font-weight: 600; }
.logo-mark { width: 38px; height: 38px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; font-size: .9rem; color: var(--gold-dark); letter-spacing: .05em; }

/* hero */
.hero { background:
    radial-gradient(1200px 500px at 85% -10%, rgba(216, 191, 143, .45), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(184, 149, 90, .35), transparent 60%),
    linear-gradient(160deg, #2b251c, #1a1712 70%);
  color: #f7f1e4; padding: 90px 0 70px; }
.hero h1 em { color: var(--gold-2); font-weight: 500; }
.hero .lead { color: #e6dccb; }
.search-box { margin-top: 36px; background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 8px 22px 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, .25); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab { background: none; border: 0; padding: 14px 18px; font: 500 .9rem var(--sans); color: var(--ink-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--gold-dark); border-color: var(--gold); }
.search-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.search-form > label, .search-form > .field { flex: 1 1 150px; }
.search-form > .field { flex-basis: 230px; }
.search-form > .btn { flex: 0 0 auto; height: 46px; }
.search-form .trip { flex: 1 1 100%; display: flex; gap: 22px; }
.search-form.bar { margin-top: 22px; background: var(--paper); padding: 18px; border-radius: var(--r); box-shadow: var(--shadow); }

/* form chung */
label { display: flex; flex-direction: column; gap: 6px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
input, select, textarea { font: 400 .95rem var(--sans); color: var(--ink); background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; text-transform: none; letter-spacing: 0; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184, 149, 90, .15); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* các khối */
.section { padding: 70px 20px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 26px; gap: 16px; }
.band { background: var(--cream); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--paper); border-radius: var(--r); overflow: hidden; color: var(--ink); box-shadow: var(--shadow); transition: .25s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); color: var(--ink); box-shadow: 0 18px 40px rgba(60, 45, 20, .14); }
.card-img { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, #d9c6a0, #a8875a 60%, #6f5733) center/cover; display: grid; place-items: center; }
.card-img .ph { font-family: var(--serif); font-size: 1.9rem; color: rgba(255, 255, 255, .85); font-style: italic; }
.badge { position: absolute; top: 14px; left: 14px; background: var(--deep); color: var(--gold-2); font-size: .75rem; padding: 4px 10px; border-radius: 999px; letter-spacing: .05em; }
.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body .price-row { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.fcard { background: var(--paper); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.route { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.route i { color: var(--gold); font-style: normal; font-size: 1rem; }
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why .num { font-family: var(--serif); font-size: 2.6rem; color: var(--gold-2); }
.cta-band { background: var(--deep); color: #f3ead8; text-align: center; padding: 60px 0; }
.cta-band a:not(.btn) { color: var(--gold-2); }

/* trang danh sách / chi tiết */
.page-head { background: var(--cream); padding: 46px 0 34px; border-bottom: 1px solid var(--line); }
.layout { display: grid; grid-template-columns: 270px 1fr; gap: 34px; padding-top: 34px; padding-bottom: 60px; align-items: start; }
.layout.detail, .page-head + .layout:has(.book) { grid-template-columns: 1fr 380px; }
.filters form, .book { background: var(--paper); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.filters, aside:has(.book) { position: sticky; top: 90px; }
.empty { background: var(--paper); border: 1px dashed var(--line); padding: 30px; border-radius: var(--r); text-align: center; }
.detail-hero { min-height: 420px; display: flex; align-items: flex-end; padding: 40px 0; color: #fff; background: linear-gradient(160deg, #6f5733, #2b251c) center/cover; }
.detail-hero h1 { margin: .1em 0; }
.crumb { color: var(--gold-2); font-size: .85rem; letter-spacing: .05em; }
.h-sm { font-size: 1.5rem; margin-top: 1.4em; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--gold-2); color: var(--gold-dark); padding: 5px 14px; border-radius: 999px; font-size: .85rem; }
.rooms { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.room { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; background: var(--paper); padding: 16px 20px; border-radius: 12px; border: 1px solid var(--line); }
.room .right { text-align: right; }

/* thông báo */
.msg { min-height: 60vh; display: grid; place-items: center; padding: 60px 20px; }
.msg-card { max-width: 520px; background: var(--paper); padding: 40px; border-radius: var(--r); box-shadow: var(--shadow); text-align: center; }
.msg-card .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.msg-card.book { text-align: left; width: 100%; max-width: 400px; }
.err { color: var(--danger); }
.ok { color: #3d7a46; }

/* chân trang */
.site-foot { background: var(--deep); color: #d9cfbd; padding: 50px 0 20px; border-top: 1px solid #3a3227; }
.site-foot .logo { color: #f3ead8; }
.site-foot h4 { font-family: var(--serif); color: var(--gold-2); font-size: 1.15rem; margin: 0 0 10px; font-weight: 600; }
.site-foot a { color: #efe5d2; }
.site-foot .muted { color: #a99c86; }
.foot-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 30px; }
.copy { margin-top: 30px; padding-top: 16px; border-top: 1px solid #3a3227; font-size: .8rem; }

/* nút Zalo / gọi nổi */
.float-contact { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; z-index: 30; }
.float-contact a { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: .8rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.fc-zalo { background: #0068ff; }
.fc-call { background: linear-gradient(135deg, var(--gold-2), var(--gold-dark)); font-size: 1.3rem !important; }

/* quản trị */
.admin { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.admin-side { background: var(--deep); padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; }
.admin-side .logo { color: #f3ead8; margin-bottom: 20px; }
.admin-side a { color: #e3d8c4; padding: 10px 12px; border-radius: 8px; font-size: .92rem; }
.admin-side a.on, .admin-side a:hover { background: #3a3227; color: var(--gold-2); }
.admin-main { padding: 30px 36px; max-width: 1100px; }
.admin-main h1 { font-size: 2.2rem; }
.admin-form { background: var(--paper); padding: 24px; border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.checks { display: flex; gap: 24px; }
label.check { flex-direction: row; align-items: center; text-transform: none; letter-spacing: 0; font-size: .92rem; color: var(--ink); }
label.check input { width: auto; }
.tbl { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.tbl th, .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: .92rem; }
.tbl th { background: var(--cream); font-weight: 500; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.nowrap { white-space: nowrap; }
form.inline { display: inline; }
.thumb { width: 72px; height: 54px; border-radius: 8px; background: linear-gradient(135deg, #d9c6a0, #6f5733) center/cover; }
.thumb.big { width: 220px; height: 150px; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pills a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .85rem; background: var(--paper); }
.pills a.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.req-list { display: flex; flex-direction: column; gap: 14px; }
.req { background: var(--paper); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); border-left: 4px solid var(--gold); display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; }
.req.st-da-chot { border-color: #3d7a46; }
.req.st-huy { border-color: #bbb; opacity: .7; }
.req.st-dang-xu-ly { border-color: #c98a2b; }
.req-top { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tag { background: var(--cream); padding: 3px 10px; border-radius: 999px; font-size: .78rem; }
.req-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.req-body pre { margin: 0; font: 400 .88rem/1.6 var(--sans); white-space: pre-wrap; color: var(--ink-2); }
.big-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.note { grid-column: 1 / -1; font-style: italic; color: var(--ink-2); margin: 0; }
.req-st select { width: auto; }
.req-tools { margin: 10px 0 0; }

/* điện thoại */
@media (max-width: 900px) {
  .search-form, .search-form.inline { grid-template-columns: 1fr 1fr; }
  .search-form .btn { grid-column: 1 / -1; }
  .grid, .grid-2, .grid-3, .why, .foot-grid { grid-template-columns: 1fr; }
  .layout, .layout.detail, .page-head + .layout:has(.book) { grid-template-columns: 1fr; }
  .filters, aside:has(.book) { position: static; }
  .nav nav { gap: 14px; }
  .nav-hot { display: none; }
  .hero { padding: 50px 0 40px; }
  .admin { grid-template-columns: 1fr; }
  .admin-side { flex-direction: row; flex-wrap: wrap; }
  .admin-side .logo { margin: 0 10px 0 0; }
  .admin-main { padding: 20px 16px; }
  .three, .req-body { grid-template-columns: 1fr; }
  .tbl { display: block; overflow-x: auto; }
}
@media (max-width: 480px) {
  .two { grid-template-columns: 1fr; }
  .logo span:last-child { display: none; }
  .room { grid-template-columns: 1fr auto; }
  .room .btn { grid-column: 1 / -1; }
}

/* ===== bố cục kiểu trang đặt phòng: thanh trên, dịch vụ, điểm đến, ưu đãi ===== */
.topbar { background: var(--deep); color: #d9cfbd; font-size: .8rem; }
.topbar-in { display: flex; gap: 22px; align-items: center; height: 34px; }
.topbar a { color: #efe5d2; }
.topbar-right { margin-left: auto; color: var(--gold-2); letter-spacing: .04em; }
.nav nav .btn { color: #fff; }

.field { display: flex; flex-direction: column; gap: 6px; }
.flabel { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
details.guests { position: relative; }
details.guests summary { list-style: none; cursor: pointer; background: var(--ivory); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: .95rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.guests summary::-webkit-details-marker { display: none; }
details.guests summary::after { content: '▾'; float: right; color: var(--gold); }
.guests-pop { position: absolute; z-index: 10; top: calc(100% + 6px); left: 0; right: 0; min-width: 220px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.book details.guests .guests-pop { position: static; box-shadow: none; margin-top: 6px; grid-template-columns: repeat(3, 1fr); min-width: 0; }

.chips-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chips-quick a { color: #f3ead8; border: 1px solid rgba(216, 191, 143, .45); padding: 5px 14px; border-radius: 999px; font-size: .82rem; }
.chips-quick a:hover { background: rgba(216, 191, 143, .15); color: #fff; }

.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -28px; position: relative; }
.services a { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 500; font-size: .92rem; }
.services a span { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-2); display: grid; place-items: center; color: var(--gold-dark); flex: none; }
.services a:hover { transform: translateY(-2px); }

.card-img .loc { position: absolute; bottom: 12px; left: 12px; background: rgba(250, 247, 240, .92); color: var(--ink); font-size: .75rem; padding: 3px 10px; border-radius: 999px; }
.badge { left: auto !important; right: 14px; }
.tags { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--cream); color: var(--ink-2); font-size: .75rem; padding: 3px 10px; border-radius: 999px; }
.card-body .price-row { justify-content: space-between; align-items: flex-end; flex-wrap: nowrap; }
.card-body .price-row .old { display: block; }

.dest-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 170px; gap: 16px; }
.dest { border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(160deg, #c9ae7c, #6f5733); position: relative; overflow: hidden; }
.dest.d0 { grid-row: span 2; background: linear-gradient(160deg, #b99a64, #3b3122); }
.dest.d1 { background: linear-gradient(160deg, #a8b5a0, #4f5b47); }
.dest.d2 { background: linear-gradient(160deg, #9fb3bd, #3f5560); }
.dest.d3 { background: linear-gradient(160deg, #d2b58f, #7a5a3a); }
.dest.d4 { background: linear-gradient(160deg, #b7a6c0, #54465e); }
.dest.d5 { background: linear-gradient(160deg, #c7b38f, #5a4a33); }
.dest b { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.dest.d0 b { font-size: 2.4rem; }
.dest span { font-size: .85rem; opacity: .9; }
.dest:hover { color: #fff; filter: brightness(1.06); }

.why { grid-template-columns: repeat(4, 1fr); gap: 30px; }

.news-band { background: linear-gradient(135deg, #2b251c, #1a1712); color: #f3ead8; padding: 46px 0; }
.news-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; }
.news-in h2 { color: #f7f1e4; }
.muted-light { color: #b9ac95; margin: 0; }
.news-form { display: flex; gap: 10px; }
.news-form input { background: #fff; }

.modal { border: 0; padding: 0; border-radius: var(--r); width: min(440px, calc(100% - 32px)); background: transparent; }
.modal::backdrop { background: rgba(20, 17, 12, .55); }
.modal .book { position: relative; }
.modal-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.6rem; color: var(--ink-2); cursor: pointer; }

.sort-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sort-bar .pills { margin: 0; }
.by-city { margin-top: 18px; background: var(--paper); border-radius: var(--r); padding: 18px 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.by-city a { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .92rem; }
.by-city a:last-child { border: 0; }
.by-city a.on { color: var(--gold-dark); font-weight: 500; }

.detail-hero-in { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; width: 100%; }
.hero-price { background: rgba(250, 247, 240, .95); color: var(--ink); padding: 18px 22px; border-radius: var(--r); display: flex; flex-direction: column; gap: 4px; min-width: 230px; }
.hero-price s { color: var(--ink-2); font-size: .9rem; }
.hero-price b { font-family: var(--serif); font-size: 2rem; color: var(--gold-dark); }
.room { grid-template-columns: 1fr auto; }
.room .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.room-name { font-family: var(--serif); font-size: 1.3rem; }
.ok.small { color: #3d7a46; margin-top: 4px; }
.policy { width: 100%; border-collapse: collapse; background: var(--paper); border-radius: var(--r); overflow: hidden; }
.policy th, .policy td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .92rem; }
.policy th { width: 32%; background: var(--cream); font-weight: 500; }

.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-cards .fcard { color: var(--ink); }
.narrow { max-width: 860px; }

@media (max-width: 900px) {
  .hide-sm { display: none !important; }
  .services { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .dest-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .dest.d0 { grid-column: span 2; grid-row: auto; }
  .why { grid-template-columns: 1fr 1fr; }
  .news-in, .contact-cards { grid-template-columns: 1fr; }
  .detail-hero-in { flex-direction: column; align-items: stretch; }
  .search-form > .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .why { grid-template-columns: 1fr; }
  .nav nav { gap: 12px; }
  .nav nav a, .nav nav .btn { white-space: nowrap; font-size: .82rem !important; }
  .nav nav .btn { padding: 7px 12px; }
  .topbar-right { display: none; }
  .room { grid-template-columns: 1fr; }
  .room .right { align-items: flex-start; }
}

/* thông tin pháp lý ở chân trang */
.legal { margin-top: 26px; padding-top: 16px; border-top: 1px solid #3a3227; font-size: .8rem; line-height: 1.7; color: #b9ac95; }
.legal b { color: #e3d8c4; font-weight: 500; }
.site-foot .legal .muted { color: #8f846f; }

/* phân trang danh sách khách sạn */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 30px; }
.pager a, .pager span { min-width: 40px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: center; font-size: .9rem; }
.pager a.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.pager span { border: 0; background: none; }

/* logo Bảo An Travel (file gốc LOGO BẢO AN.pdf) */
.logo-img { display: block; height: 54px; width: auto; }
.site-foot .logo-img, .admin-side .logo-img { height: 64px; background: var(--ivory); padding: 8px 12px; border-radius: 12px; box-sizing: content-box; }
.admin-side .logo-img { height: 46px; }
.admin-side .logo { margin-bottom: 4px; padding: 0; }
.admin-label { color: var(--gold-2); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin: 4px 12px 16px; }
.msg-card .logo-img { height: 72px; margin: 0 auto 12px; }
@media (max-width: 480px) { .logo-img { height: 40px; } }
.site-head .nav { height: 88px; }
.site-head .logo-img { height: 72px; }
@media (max-width: 480px) { .site-head .nav { height: 70px; } .site-head .logo-img { height: 50px; } }
.foot-grid { grid-template-columns: 1.5fr 1.5fr 1fr 1fr; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .site-head .nav nav .btn { display: none; } .site-head .logo-img { height: 46px; } }

/* kết quả tìm chuyến bay */
.sample-note { background: #fff6e0; border: 1px solid #f0d58c; color: #6b5313; padding: 10px 14px; border-radius: 10px; font-size: .88rem; }
.leg { margin-bottom: 26px; }
.leg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.route-title { margin: 0; }
.route-title i { color: var(--gold); font-style: normal; font-size: 1rem; }
.leg-tools { display: flex; gap: 8px; }
.leg-tools select { width: auto; padding: 8px 10px; font-size: .85rem; }
.flist { display: flex; flex-direction: column; gap: 10px; }
.frow { display: grid; grid-template-columns: 150px 1fr 170px auto; grid-template-areas: "air time price btn" "air info price btn"; gap: 4px 18px; align-items: center;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.frow[hidden] { display: none !important; }
.fr-air { grid-area: air; display: flex; flex-direction: column; }
.fr-time { grid-area: time; display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.fr-line { flex: 1; text-align: center; border-bottom: 1px dashed var(--line); line-height: 1.2; padding-bottom: 2px; }
.fr-info { grid-area: info; }
.fr-info .hot { color: var(--danger); font-weight: 500; }
.fr-price { grid-area: price; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.frow .pick-flight { grid-area: btn; white-space: nowrap; }
.chosen { background: var(--cream); border-radius: 10px; padding: 10px 12px; font-size: .88rem; }
.chosen p { margin: 0 0 4px; }
@media (max-width: 700px) {
  .frow { grid-template-columns: 1fr auto; grid-template-areas: "air price" "time time" "info info" "btn btn"; }
  .frow .pick-flight { width: 100%; }
}
.frow { grid-template-columns: 130px 1fr 150px; grid-template-areas: "air time price" "info info btn"; }
.frow .pick-flight { justify-self: end; }
@media (max-width: 700px) {
  .frow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "air price" "time time" "info info" "btn btn"; padding: 12px 14px; }
  .frow .pick-flight { width: 100%; justify-self: stretch; }
  .leg-head .eyebrow { white-space: normal; }
  .leg-tools { width: 100%; }
  .leg-tools select { flex: 1; }
}

/* ===== vé máy bay theo luồng: thanh tìm · dải ngày · bộ lọc trái · danh sách · popup liên hệ ===== */
.flight-head { padding-bottom: 22px; }
.search-form .od { flex: 2 1 340px; display: flex; align-items: flex-end; gap: 8px; }
.search-form .od label { flex: 1; }
.swap { flex: none; width: 40px; height: 46px; border-radius: 50%; border: 1px solid var(--gold-2); background: var(--paper); color: var(--gold-dark); font-size: 1.1rem; cursor: pointer; }
.swap:hover { background: var(--gold); color: #fff; }
details.pax .guests-pop { min-width: 260px; }
.date-strip { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 4px; }
.date-strip a { flex: 1 0 84px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; color: var(--ink); display: flex; flex-direction: column; }
.date-strip a span { font-size: .75rem; color: var(--ink-2); letter-spacing: .06em; }
.date-strip a.on { background: var(--gold); border-color: var(--gold); color: #fff; }
.date-strip a.on span { color: #fff; }
.flight-results { grid-template-columns: 250px 1fr !important; }
.filters fieldset { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 6px; }
.filters legend { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; margin-bottom: 4px; }
.filters label.check { font-size: .9rem; gap: 8px; }
#fclear { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--gold-dark); }
.leg-count { white-space: nowrap; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.perks > div { background: var(--paper); border-radius: var(--r); padding: 22px; box-shadow: var(--shadow); }
.perks .num { color: var(--gold); font-size: 1.4rem; }
.airline-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.airline-chips li { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-weight: 500; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 500; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); }
.book-bar { position: sticky; bottom: 0; z-index: 25; background: var(--deep); color: #f3ead8; display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 16px; }
.book-bar[hidden] { display: none !important; }
#book-flight { width: min(480px, calc(100% - 32px)); }
@media (max-width: 900px) {
  .flight-results { grid-template-columns: 1fr !important; }
  .perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .perks { grid-template-columns: 1fr; } .search-form .od { flex-basis: 100%; } }

.fdetails summary { cursor: pointer; list-style: none; margin-bottom: 8px; }
.fdetails summary::-webkit-details-marker { display: none; }
.fdetails > fieldset, .fdetails > button { margin-top: 10px; }
@media (max-width: 900px) { .fdetails summary::after { content: ' ▾'; } }
.notify-st { grid-column: 1 / -1; margin: 0; }
.admin-form code, .admin-main code { background: var(--cream); padding: 1px 6px; border-radius: 6px; font-size: .85em; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.steps li { line-height: 1.6; }
#gs-script { font: 400 .78rem/1.5 Consolas, monospace; white-space: pre; }

/* danh sách khách trong Quản trị – chữ to, nút gọi / Zalo dễ bấm */
.req-top-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.req-top-bar .pills { margin: 0; }
#req-search { max-width: 340px; font-size: 1rem; }
.new-badge { background: #fff1e0; border: 1px solid #f2c48a; color: #7a4a10; padding: 10px 14px; border-radius: 10px; font-size: 1rem; }
.req { display: block; padding: 18px 22px; font-size: 1.02rem; }
.req[hidden] { display: none !important; }
.req-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.tag-new { background: var(--danger); color: #fff; font-weight: 600; letter-spacing: .05em; }
.req-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.req-who .big-name { font-size: 1.6rem; line-height: 1.2; }
.req-phone { font-size: 1.35rem; font-weight: 600; letter-spacing: .03em; color: var(--ink); }
.req-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.req-actions .btn { font-size: 1rem; padding: 12px 22px; }
.zalo-btn { background: #0068ff; color: #fff; }
.zalo-btn:hover { color: #fff; filter: brightness(1.08); }
.req-subject { margin-top: 12px; font-size: 1.05rem; }
.req-details { margin: 6px 0 0; font: 400 .98rem/1.65 var(--sans); white-space: pre-wrap; color: var(--ink); background: var(--cream); padding: 10px 14px; border-radius: 10px; }
.req .note { margin: 8px 0 0; }
.req-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 12px; }
.inline-label { flex-direction: row; align-items: center; gap: 8px; }
@media (max-width: 600px) { .req-actions { width: 100%; } .req-actions .btn { flex: 1; } }

/* tour trọn gói */
.scope-tabs { margin-top: 16px; }
.tour-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.detail-hero .tour-meta { font-size: .95rem; }
.sample-badge { background: #b8742a !important; color: #fff !important; }
.tour-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 18px; }
.tour-tabs a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .9rem; }
.tour-tabs a:hover { border-color: var(--gold); color: var(--gold-dark); }
.hl-list, .notes-list, .inc-exc ul { padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hl-list li::marker { content: '✦  '; color: var(--gold); }
.itinerary details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.itinerary summary { cursor: pointer; font-weight: 500; font-size: 1.02rem; }
.itinerary .day-no { display: inline-block; background: var(--gold); color: #fff; border-radius: 999px; padding: 2px 12px; margin-right: 8px; font-size: .85rem; }
.itinerary details p { margin: 10px 0 0; color: var(--ink-2); }
.inc-exc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.inc-exc > div { background: var(--paper); border-radius: var(--r); padding: 4px 20px 18px; border: 1px solid var(--line); }
.dep-table td, .dep-table th { vertical-align: middle; }
.dep-table .hot { color: var(--danger); font-weight: 500; }
.tour-side { gap: 10px; }
.tour-side .zalo-btn { color: #fff; }
@media (max-width: 700px) { .inc-exc { grid-template-columns: 1fr; } .dep-table th:nth-child(3), .dep-table td:nth-child(3) { display: none; } }

@media (max-width: 480px) { .hide-xs { display: none; } .site-head .logo-img { height: 42px; } .nav nav { gap: 10px; } }
.tour-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 120px; gap: 8px; margin: 6px 0 18px; }
.tour-gallery a { border-radius: 12px; background: var(--cream) center/cover; }
.tour-gallery .g0 { grid-row: span 2; }
@media (max-width: 600px) { .tour-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; } .tour-gallery .g0 { grid-column: span 2; grid-row: auto; height: 180px; } }

/* ---------- Kính lúp tìm kiếm ---------- */
.search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; flex: none; }
.search-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
.search-btn svg, .search-line .ico, .search-page-form .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.search-modal { width: min(640px, calc(100% - 24px)); margin-top: 8vh; max-height: 84vh; }
.search-pop { background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: 84vh; }
.search-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--gold-dark); }
.search-line input { flex: 1; min-width: 0; border: 0; outline: 0; font: 400 1.05rem var(--sans); color: var(--ink); background: none; padding: 8px 0; }
.search-line .modal-x { position: static; padding: 0 4px; }
.search-live { overflow-y: auto; padding: 8px 14px 14px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; }
.search-chips a { border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px; font-size: .86rem; color: var(--ink); }
.search-chips a:hover { border-color: var(--gold); color: var(--gold-dark); }
.s-head { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); margin: 12px 0 4px; font-weight: 500; }
.s-head span { color: var(--ink-2); letter-spacing: 0; }
.s-row { display: flex; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 10px; color: var(--ink); }
.s-row:hover, .s-row:focus { background: var(--cream); }
.s-img { width: 54px; height: 42px; border-radius: 8px; background: var(--cream) center/cover; flex: none; }
.s-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.s-txt b { font-weight: 500; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-txt small { color: var(--ink-2); font-size: .78rem; }
.s-price { font-size: .82rem; color: var(--gold-dark); font-weight: 500; white-space: nowrap; }
.s-all { margin-top: 10px; }
.s-empty { text-align: center; padding: 14px 4px; }
.s-empty .btn { margin: 4px; }
.s-empty.big { padding: 30px 10px; }
.search-page-form { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 6px 6px 6px 18px; max-width: 640px; margin: 10px 0 12px; color: var(--gold-dark); }
.search-page-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 1.05rem var(--sans); color: var(--ink); padding: 8px 0; }
.search-page-form .btn { border-radius: 99px; }
.search-results .h-sm { margin-top: 28px; }
.place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.place-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.place-img { height: 120px; background: var(--cream) center/cover; display: flex; align-items: flex-end; padding: 12px 14px; }
.place-img b { font: 500 1.5rem var(--serif); color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.place-links { display: flex; flex-direction: column; padding: 10px 14px; gap: 4px; font-size: .9rem; }
.place-links a { color: var(--ink); }
.place-links a:hover { color: var(--gold-dark); }
.search-help { margin-top: 30px; }
@media (max-width: 860px) { .place-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .search-btn { width: 34px; height: 34px; }
  .search-modal { margin-top: 10px; max-height: calc(100vh - 20px); }
  .search-pop { max-height: calc(100vh - 20px); }
  .s-price { font-size: .74rem; }
  .s-img { width: 46px; height: 38px; }
  .place-grid { grid-template-columns: 1fr; }
}

/* ---------- Menu: 6 mục; màn hình hẹp gom vào nút ☰ ---------- */
.nav nav { gap: 22px; }
.nav nav .nav-link { font-size: .9rem; white-space: nowrap; }
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); cursor: pointer; flex: none; }
.menu-btn span { display: block; height: 1.6px; background: var(--ink); border-radius: 2px; }
.menu-sheet { border: 0; padding: 0; margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(340px, 88vw); background: var(--paper); }
.menu-sheet::backdrop { background: rgba(20, 17, 12, .5); }
.menu-sheet-in { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 26px 22px; }
.menu-sheet-in > a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.02rem; }
.menu-sheet-in > a.on { color: var(--gold-dark); font-weight: 500; }
.menu-sheet-in .btn { margin-top: 10px; }
.menu-sheet-in .zalo-btn { color: #fff; }
.link-pair .link + .link { margin-left: 14px; }
.group-pills { margin-top: 10px; }
@media (max-width: 1240px) { .nav nav { gap: 16px; } .nav nav .nav-link { font-size: .84rem; } }
@media (max-width: 1100px) {
  .nav nav .nav-link { display: none; }
  .menu-btn { display: inline-flex; }
  .nav nav { gap: 10px; }
}

/* ---------- Vé vui chơi ---------- */
.services { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(6, 1fr); } .services a { padding: 16px 14px; font-size: .86rem; } }
.park-img, .park-hero { background-color: #8c6c37; background-image: linear-gradient(135deg, #b8955a, #6e5229); }
.park-img.brand-vinwonders, .park-hero.brand-vinwonders { background-image: linear-gradient(135deg, #c9a466, #7a5a2a); }
.park-img.brand-sunworld, .park-hero.brand-sunworld { background-image: linear-gradient(135deg, #d8b26a, #8a5a1e); }
.park-img.brand-showdin, .park-hero.brand-showdin { background-image: linear-gradient(135deg, #8d6a52, #3b2b22); }
.park-img[style], .park-hero[style] { background-size: cover; background-position: center; }
.park-card .eyebrow.small { font-size: .66rem; margin-bottom: 2px; }
.price-groups { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 20px; }
.price-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 14px; }
.price-group summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; list-style: none; }
.price-group summary::-webkit-details-marker { display: none; }
.price-group summary::after { content: '▾'; color: var(--gold-dark); }
.price-group[open] summary::after { content: '▴'; }
.price-group summary b { font-weight: 500; }
.ticket-table { margin: 0 0 12px; }
.ticket-table td:nth-child(3) { white-space: nowrap; }
@media (max-width: 700px) {
  .services { grid-template-columns: 1fr 1fr; }
  .ticket-table thead { display: none; }
  .ticket-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ticket-table td { border: 0 !important; padding: 0 !important; }
  .ticket-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .ticket-table td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; }
  .ticket-table td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink-2); font-size: .86rem; }
  .ticket-table td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .price-group summary { flex-direction: column; align-items: flex-start; gap: 2px; }
}
/* ghi nguồn ảnh (giấy phép CC) */
.img-credit { display: inline-block; margin-top: 8px; font-size: .68rem; color: rgba(255, 255, 255, .78); text-decoration: none; letter-spacing: .01em; }
.img-credit:hover { color: #fff; text-decoration: underline; }
.card-img { position: relative; }
.card-credit { position: absolute; right: 8px; bottom: 6px; margin: 0; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .6rem; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ---------- Vé máy bay đoàn ---------- */
.gf-teaser { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gf-teaser .fcard { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.gf-route { margin-bottom: 34px; }
.gf-route .route-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.gf-list { display: flex; flex-direction: column; gap: 10px; }
.gf-card { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; }
.gf-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gf-legs > div { display: flex; flex-direction: column; line-height: 1.35; }
.gf-legs .eyebrow { font-size: .62rem; margin: 0; }
.gf-legs b { font-weight: 500; font-size: 1.02rem; }
.gf-info { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .86rem; color: var(--ink-2); }
.gf-info .hot { color: var(--danger); font-weight: 500; }
.gf-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.gf-terms { margin-top: 20px; }
@media (max-width: 760px) {
  .gf-card { grid-template-columns: 1fr; gap: 10px; }
  .gf-price { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
}

/* bảng vé đoàn dễ nhìn */
.gf-sum, .gf-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 8px 0 18px; font-size: .92rem; }
.gf-sum th, .gf-table th { background: var(--cream); text-align: left; font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dark); padding: 10px 14px; }
.gf-sum td, .gf-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.gf-sum tr:hover td, .gf-table tr:hover td { background: #fcf9f2; }
.gf-sum-route a { color: var(--ink); font-size: 1.02rem; }
.gf-sum-route .muted { display: block; }
.gf-sum-price .price, .gf-p .price { font-size: 1.15rem; white-space: nowrap; }
.gf-sum-go, .gf-b { text-align: right; white-space: nowrap; }
.gf-month { font: 500 1.05rem var(--sans); margin: 18px 0 4px; color: var(--ink); }
.gf-s.hot { color: var(--danger); font-weight: 500; }
.gf-tabs { margin-bottom: 8px; }
.gf-route { scroll-margin-top: 100px; }
@media (max-width: 760px) {
  .gf-sum thead, .gf-table thead { display: none; }
  .gf-sum tr, .gf-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .gf-sum tr:first-child, .gf-table tr:first-child { border-top: 0; }
  .gf-sum td, .gf-table td { padding: 0; border: 0; }
  .gf-sum-route { grid-column: 1; }
  .gf-sum-price { grid-column: 2; grid-row: 1; text-align: right; }
  .gf-sum-air, .gf-sum-date, .gf-sum-seat { grid-column: 1; font-size: .84rem; color: var(--ink-2); }
  .gf-sum-date::before { content: '🗓 '; } .gf-sum-seat::before { content: '💺 '; }
  .gf-sum-go { grid-column: 2; grid-row: 2 / span 3; align-self: end; }
  .gf-d { grid-column: 1; } .gf-p { grid-column: 2; grid-row: 1; text-align: right; }
  .gf-t, .gf-a, .gf-s { grid-column: 1; font-size: .84rem; color: var(--ink-2); }
  .gf-s::before { content: '💺 '; }
  .gf-b { grid-column: 2; grid-row: 2 / span 3; align-self: end; }
}
.gf-sum-group td { background: var(--cream); color: var(--gold-dark); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: 8px 14px !important; }
.gf-s.ask { color: var(--gold-dark); }
@media (max-width: 760px) { .gf-sum-group { display: block !important; } .gf-sum-group td { display: block; } }

/* ---------- Banner chạy đầu trang chủ ---------- */
.hero-slider { position: relative; overflow: hidden; padding: 70px 0 60px; background: #1a1712; }
.hero-slider .slides { position: absolute; inset: 0; }
.slide-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 7s ease-out; }
.slide-bg.on { opacity: 1; transform: scale(1); }
.hero-slider .slides::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 17, 12, .78) 0%, rgba(20, 17, 12, .45) 45%, rgba(20, 17, 12, .1) 75%), linear-gradient(180deg, rgba(20, 17, 12, .25), rgba(20, 17, 12, .55)); }
.hero-slider .hero-in { position: relative; z-index: 1; }
.hero-brand { font: 500 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); margin: 0 0 14px; }
.captions { position: relative; min-height: 290px; max-width: 640px; }
.caption { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; pointer-events: none; }
.caption.on { opacity: 1; transform: none; pointer-events: auto; position: relative; }
.caption h2 { font: 500 clamp(2rem, 4.4vw, 3.4rem)/1.08 var(--serif); color: #fff; margin: 6px 0 12px; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.caption .lead { color: #efe6d4; max-width: 520px; margin: 0 0 18px; }
.caption-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.caption-price { display: flex; flex-direction: column; line-height: 1.1; color: #f7f1e4; }
.caption-price small { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); }
.caption-price b { font: 600 2rem var(--serif); color: #fff; }
.caption .img-credit { position: absolute; left: 0; bottom: -26px; }
.slider-nav { display: flex; align-items: center; gap: 8px; margin-top: 34px; }
.sl-dot { width: 26px; height: 3px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .35); cursor: pointer; transition: background .3s, width .3s; }
.sl-dot.on { background: var(--gold-2); width: 44px; }
.sl-prev, .sl-next { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(20, 17, 12, .25); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sl-prev:hover, .sl-next:hover { border-color: var(--gold-2); color: var(--gold-2); }
.hero-slider .search-box { margin-top: 44px; }
@media (max-width: 760px) {
  .hero-slider { padding: 34px 0 34px; }
  .hero-slider .slides { bottom: auto; height: 470px; }
  .hero-slider .slides::after { background: linear-gradient(180deg, rgba(20, 17, 12, .35), rgba(20, 17, 12, .75) 80%, #1a1712); }
  .captions { min-height: 330px; }
  .caption-price b { font-size: 1.6rem; }
  .slider-nav { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .slide-bg, .caption { transition: none; } }
@media (max-width: 760px) { .hero-brand { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* mũi tên banner ở sát 2 cạnh ngoài, giữa phần ảnh */
.hero-slider .sl-prev, .hero-slider .sl-next { position: absolute; top: 200px; z-index: 2; width: 46px; height: 46px; font-size: 1.6rem;
  background: rgba(20, 17, 12, .3); backdrop-filter: blur(4px); transition: background .2s, border-color .2s, color .2s; }
.hero-slider .sl-prev { left: 18px; }
.hero-slider .sl-next { right: 18px; }
.hero-slider .sl-prev:hover, .hero-slider .sl-next:hover { background: rgba(20, 17, 12, .55); }
.slider-nav { gap: 10px; }
@media (max-width: 760px) { .hero-slider .sl-prev, .hero-slider .sl-next { display: none; } }

/* Điểm đến yêu thích: ảnh địa danh + lớp tối để chữ dễ đọc; ô thứ 6 trải ngang hết hàng (không để trống) */
.dest.has-img { background-size: cover; background-position: center; transition: transform .4s ease; }
.dest.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 17, 12, 0) 35%, rgba(20, 17, 12, .72)); transition: background .3s; }
.dest.has-img:hover::before { background: linear-gradient(180deg, rgba(20, 17, 12, .05) 25%, rgba(20, 17, 12, .8)); }
.dest > b, .dest > span { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.dest-credit { position: absolute; top: 8px; right: 10px; font-size: .58rem; color: rgba(255, 255, 255, .78); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.dest-grid .dest.d5 { grid-column: 1 / -1; }
@media (max-width: 900px) { .dest-grid .dest.d5 { grid-column: span 2; } }

/* ---------- Album ảnh Bảo An Travel ---------- */
.album-hero { background-size: cover; background-position: center; }
.album-hero .lead { color: #efe6d4; max-width: 560px; }
.album-nav { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.album-nav a { border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: .86rem; color: var(--ink); background: var(--paper); }
.album-nav a:hover { border-color: var(--gold); color: var(--gold-dark); }
.album .h-sm { scroll-margin-top: 100px; margin-top: 30px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.album-grid a { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: var(--cream); }
.album-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.album-grid a:hover img { transform: scale(1.05); }
.album-foot { margin-top: 30px; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15, 12, 9, .93); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 92vw; max-height: 88vh; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox figcaption { color: #e6dccb; font-size: .88rem; margin-top: 10px; }
.lb-x, .lb-prev, .lb-next { position: absolute; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 50%; width: 48px; height: 48px; font-size: 1.7rem; cursor: pointer; }
.lb-x { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .album-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .lb-prev, .lb-next { display: none; } }
/* dải ảnh album trên trang khách sạn */
.hotel-strip { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 120px; gap: 8px; margin: 6px 0 20px; }
.hotel-strip a { border-radius: 10px; background: var(--cream) center / cover; }
.hotel-strip .hs0 { grid-column: span 2; grid-row: span 2; }
.hotel-strip .hs-more { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--deep); color: #f7f1e4; text-align: center; }
.hotel-strip .hs-more b { font: 600 1.8rem var(--serif); color: var(--gold-2); }
.hotel-strip .hs-more span { font-size: .82rem; }
@media (max-width: 600px) { .hotel-strip { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; } .hotel-strip .hs5, .hotel-strip .hs6 { display: none; } }

/* ---------- Ưu đãi / Flash Sale khách sạn ---------- */
.promo-box { border: 1px solid var(--gold-2); background: linear-gradient(135deg, #fffaf0, #f6ecd8); border-radius: var(--r); padding: 16px 20px; margin: 10px 0 22px; scroll-margin-top: 100px; }
.promo-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.promo-tag { background: #b5442b; color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; }
.promo-main { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.promo-room { font: 600 1.3rem var(--serif); }
.promo-perks { margin: 8px 0 0; padding-left: 18px; font-size: .9rem; }
.promo-perks li { margin: 3px 0; }
.promo-perks li::marker { content: '✓  '; color: var(--gold-dark); }
.promo-price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.promo-price s { color: var(--ink-2); }
.promo-price b { font: 600 2rem var(--serif); color: #b5442b; line-height: 1; }
.badge.promo-badge { background: #b5442b; }
@media (max-width: 640px) { .promo-main { grid-template-columns: 1fr; } .promo-price { align-items: flex-start; text-align: left; } }