/* An Lâm (khachsan3) — trang chủ y hệt mockup, cỡ đo theo mockup x1.84 (09-28) */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap");
:root { --al-green: #16362B; --al-gold: #A8874E; --al-gold2: #B08D57; --al-cream: #F7F3EC; --al-sand: #F2ECE1; --al-ink: #1F2622; --al-muted: #5C645F; }
body, p, li, a, input, select, button, .nav > li > a { font-family: "Be Vietnam Pro", sans-serif; }
.al-h2, .al-hero-title, .al-rcard h3, .al-mapcard h3, .al-ft-logo span { font-family: "Playfair Display", serif !important; }
#top-bar { background: var(--al-green) !important; min-height: 44px; }
#top-bar, #top-bar a, #top-bar p, #top-bar span { color: #fff !important; font-size: 14px !important; }
.al-tb { display: inline-flex; align-items: center; gap: 8px; margin-right: 30px; } .al-tb img { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.al-tb i { display: inline-block; width: 1px; height: 14px; background: rgba(255,255,255,.5); margin: 0 10px; }
#header .header-main { background: var(--al-cream) !important; }
#header #logo { width: 250px !important; }
#header #logo a { display: flex; align-items: center; gap: 12px; font-family: "Playfair Display", serif !important; font-size: 36px; font-weight: 500; color: var(--al-green) !important; letter-spacing: .06em; line-height: 1; position: relative; top: -6px; }
#header #logo a::before { content: ""; width: 58px; height: 58px; flex: 0 0 58px; background: url(icons/logo.png) center/contain no-repeat; margin-top: 10px; }
#header #logo a::after { content: "KHÁCH SẠN"; position: absolute; left: 96px; top: 50%; margin-top: 16px; font-family: "Be Vietnam Pro", sans-serif; font-size: 12px; letter-spacing: .3em; color: var(--al-gold); }
#header .header-nav-main > li > a { font-size: 15px !important; font-weight: 500 !important; color: var(--al-ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
#header .header-nav-main > li { margin: 0 16px !important; }
#header .header-nav-main > li.active > a { box-shadow: inset 0 -2px 0 var(--al-green); font-weight: 600 !important; }
#header .header-button-1 .button { background: var(--al-green) !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 15.5px !important; font-weight: 600 !important; min-height: 46px; line-height: 46px; padding: 0 32px !important; }
.al-hero .banner-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,24,18,.62) 0%, rgba(10,24,18,.25) 45%, rgba(10,24,18,0) 70%); }
.al-eyebrow { color: var(--al-gold) !important; font-size: 13.5px !important; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 12px !important; }
.al-eyebrow-w { color: rgba(255,255,255,.9) !important; }
.al-hero-title { color: #fff !important; font-size: 78px !important; line-height: 1.02 !important; font-weight: 500 !important; margin: 0 0 18px !important; }
.al-hero-lead { color: #fff !important; font-size: 17.5px !important; margin: 0 0 26px !important; max-width: 520px; }
.al-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 16px; padding: 0 28px; min-height: 50px; border-radius: 3px; text-decoration: none !important; }
.al-btn-line-w { border: 1.5px solid #fff; color: #fff !important; }
.al-btn-gold { background: var(--al-gold2); color: #fff !important; }
.al-btn-sm { min-height: 42px; font-size: 14.5px; padding: 0 22px; }
.al-book-sec { position: relative; z-index: 3; } .al-book-sec .col { padding-bottom: 0 !important; }
.al-book { display: flex; align-items: center; background: #fff; box-shadow: 0 14px 36px rgba(22,54,43,.12); padding: 20px 26px; margin: -56px 0 0 !important; border-radius: 4px; gap: 18px; }
.al-book label { flex: 1; display: flex; align-items: center; gap: 16px; margin: 0; }
.al-book label img { width: 30px; height: 30px; flex: 0 0 30px; }
.al-book label span { display: flex; flex-direction: column; flex: 1; }
.al-book small { font-size: 12.5px; color: var(--al-ink); margin-bottom: 4px; font-weight: 500; }
.al-book input, .al-book select { height: 44px !important; margin: 0 !important; border: 1px solid #DCD5C8 !important; box-shadow: none !important; font-size: 15px !important; }
.al-book button { background: var(--al-green); color: #fff; border: 0; min-height: 58px; padding: 0 44px; font-size: 16px; font-weight: 600; text-transform: none; margin: 0; border-radius: 3px; }
.al-h2 { color: var(--al-ink) !important; font-size: 40px !important; line-height: 1.18 !important; font-weight: 500 !important; margin: 0 0 8px !important; }
.al-h2-lg { font-size: 46px !important; margin-bottom: 18px !important; } .al-h2-w { color: #fff !important; }
.al-sub { color: var(--al-muted) !important; font-size: 17px !important; margin: 0 0 26px !important; }
.al-lead { font-size: 17px !important; line-height: 1.6 !important; color: #444C47 !important; margin: 0 0 16px !important; } .al-lead-w { color: rgba(255,255,255,.88) !important; }
.al-perks { display: flex; gap: 42px; margin: 22px 0 24px; } .al-perks p { display: flex; align-items: center; gap: 14px; margin: 0 !important; font-size: 15.5px; color: #3E4641; line-height: 1.35; }
.al-perks img { width: 46px; height: 46px; }
.al-link { color: var(--al-gold) !important; font-weight: 600; font-size: 16px; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.al-story-img { position: relative; } .al-story-img > img { width: 100%; height: 360px; object-fit: cover; display: block; }
.al-sign { position: absolute; right: -30px; bottom: -26px; width: 210px; height: 220px; background: #EFE6D6; border: 8px solid #fff; box-shadow: 0 12px 26px rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.al-sign img { width: 64px; height: 64px; } .al-sign b { font-family: "Playfair Display", serif; font-size: 22px; font-weight: 500; letter-spacing: .08em; color: var(--al-green); margin-top: 6px; } .al-sign small { font-size: 11px; color: var(--al-muted); margin-top: 4px; }
.al-head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; }
.al-rcard, .al-ecard { background: #fff; box-shadow: 0 8px 22px rgba(22,54,43,.08); height: 100%; }
.al-rimg { display: block; height: 216px; background-size: cover; background-position: center; }
.al-rbody { padding: 20px 20px 22px; }
.al-rcard h3 { font-size: 21px !important; font-weight: 600 !important; margin: 0 0 10px !important; } .al-rcard h3 a { color: var(--al-ink) !important; }
.al-rmeta { display: flex; gap: 26px; font-size: 14px !important; color: var(--al-muted) !important; margin: 0 0 12px !important; } .al-rmeta span { display: inline-flex; align-items: center; gap: 8px; } .al-rmeta img { width: 20px; height: 20px; }
.al-rdesc { font-size: 15px !important; color: #4B524E !important; line-height: 1.55 !important; margin: 0 0 18px !important; }
.al-rfoot { display: flex; justify-content: space-between; align-items: center; }
.al-price { color: var(--al-gold) !important; font-size: 21px; font-weight: 600; }
.al-lobby .row { max-width: none !important; } .al-lobby .col { padding-bottom: 0 !important; }
.al-cover { margin: 0 !important; } .al-cover img { display: block; width: 100%; height: 400px; object-fit: cover; }
.al-dine .al-cover img { height: 320px; }
.al-hours { display: flex; align-items: center; gap: 12px; color: #fff !important; font-size: 15px !important; margin: 0 0 22px !important; } .al-hours img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.al-exp .al-h2 { text-align: center; }
.al-eimg { display: block; height: 158px; background-size: cover; background-position: center; }
.al-ebody { padding: 14px 16px 16px; } .al-ecard h3 { font-size: 17px !important; font-weight: 700 !important; margin: 0 0 6px !important; } .al-ecard h3 a { color: var(--al-ink) !important; }
.al-ebody p { font-size: 14px !important; color: var(--al-muted) !important; margin: 0 0 8px !important; }
.al-read { color: var(--al-gold) !important; font-weight: 600; font-size: 14px; }
.al-mapwrap { position: relative; height: 340px; } .al-mapwrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.7); }
.al-mapcard { position: absolute; left: calc(50% - 600px); top: 30px; background: #fff; padding: 26px 30px; width: 380px; box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.al-mapcard h3 { font-size: 23px !important; font-weight: 500 !important; color: var(--al-ink) !important; margin: 0 0 16px !important; }
.al-mapcard ul { list-style: none; margin: 0 0 18px !important; padding: 0; } .al-mapcard li { display: flex; gap: 12px; font-size: 15px; margin: 0 0 12px !important; color: #3E4641; } .al-mapcard li img { width: 22px; height: 22px; }
.al-footer p, .al-footer li, .al-footer a, .al-footer span { color: rgba(255,255,255,.85) !important; font-size: 15px !important; }
.al-footer p.al-ft-logo { display: flex; align-items: center; gap: 16px; margin: 0 0 18px !important; } .al-ft-logo img { width: 70px; height: 70px; }
.al-footer p.al-ft-logo span { font-size: 38px !important; color: #fff !important; letter-spacing: .06em; display: flex; flex-direction: column; line-height: 1; }
.al-footer .al-ft-logo small { font-family: "Be Vietnam Pro", sans-serif; font-size: 12px; letter-spacing: .3em; color: var(--al-gold) !important; margin-top: 6px; text-transform: uppercase; }
.al-footer h3.al-ft-title { color: #fff !important; font-size: 18px !important; font-weight: 600 !important; margin: 0 0 16px !important; font-family: "Be Vietnam Pro", sans-serif !important; }
.al-ft-col ul { list-style: none; margin: 0; padding: 0; } .al-ft-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .al-ft-col li { margin: 0 !important; }
.al-ft-list li { display: flex; gap: 12px; margin: 0 0 12px !important; } .al-ft-list img { width: 20px; height: 20px; margin-top: 2px; }
.al-ft-contact { border-left: 1px solid rgba(255,255,255,.2); padding-left: 40px !important; }
.al-ft-bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; margin-top: 12px; gap: 20px; }
.al-ft-links a { margin-left: 26px; } .al-ft-soc { display: flex; gap: 16px; } .al-ft-soc img { width: 22px; height: 22px; }
.absolute-footer { display: none !important; }
@media (max-width: 849px) {
  .al-hero-title { font-size: 46px !important; } .al-h2 { font-size: 28px !important; } .al-h2-lg { font-size: 32px !important; }
  .al-book { flex-direction: column; align-items: stretch; margin-top: -30px !important; } .al-book button { margin-top: 6px; }
  .al-perks { gap: 18px; flex-wrap: wrap; } .al-sign { right: 10px; width: 150px; height: 160px; }
  .al-head-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .al-mapcard { position: relative; left: 0; top: 0; width: auto; } .al-mapwrap { height: auto; } .al-mapwrap iframe { height: 260px; }
  .al-ft-contact { border-left: 0; padding-left: 15px !important; } .al-ft-bar { flex-direction: column; align-items: flex-start; }
  #header #logo a::after { display: none; } #header #logo a { font-size: 26px; top: 0; } #header #logo a::before { width: 44px; height: 44px; flex-basis: 44px; margin-top: 0; }
}
/* r2 */
#header .header-button-1 .button { min-height: 46px !important; height: 46px !important; line-height: 46px !important; }
#header .header-button-1 { display: flex; align-items: center; }
.al-rooms .al-head-row { margin-bottom: 22px; } .al-rooms { padding-top: 44px !important; }
.al-mapwrap iframe { min-height: 340px; }
/* ruler:auto BEGIN — tools/astra-bridge/lab/ruler_fix.py, đừng sửa tay */
@media (min-width: 850px) {
  .al-ebody h3 { font-size: 19.9px !important; }
  .al-ltext h2.al-h2 { font-size: 69.0px !important; }
  .al-wtext h2.al-h2 { font-size: 69.0px !important; }
  .al-hours img[src*="/icons/clock.png"] { width: 30px !important; height: 30px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .al-perks img[src*="/icons/leaf.png"] { width: 54px !important; height: 54px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
  .al-tb img { width: 22px !important; height: 22px !important; max-width: none !important; flex: 0 0 auto !important; object-fit: contain; }
}
@media (max-width: 849px) {
  .al-hours img[src*="/icons/clock.png"] { width: 24px !important; height: 24px !important; }
  .al-perks img[src*="/icons/leaf.png"] { width: 46px !important; height: 46px !important; }
  .al-tb img { width: 16px !important; height: 16px !important; }
}
/* ruler:auto END */
/* ruler:manual 09-29 — auto 69px làm tiêu đề 2 dòng thành 4 dòng (đo nhầm tiêu đề nhiều dòng) */
@media (min-width: 850px) { .al-wtext h2.al-h2 { font-size: 44px !important; } .al-ltext h2.al-h2 { font-size: 54px !important; } }

/* 2026-10-04 (người dùng: 1920-2560 khối "Ấn tượng từ phút đầu gặp gỡ" dính mép trái): hàng full-width -> cột chữ canh
   theo mép container 1240 (lề trái = (100vw - 1240)/2), ảnh tràn hết bên phải */
@media (min-width: 1300px) {
  .al-lobby .row-full-width > .col.al-ltext { flex: 0 0 calc(50vw - 103px) !important; max-width: calc(50vw - 103px) !important; }
  .al-lobby .row-full-width > .col.al-ltext > .col-inner { padding-left: calc(50vw - 605px) !important; padding-right: 50px !important; }
  .al-lobby .row-full-width > .col.al-limg { flex: 1 1 0 !important; max-width: none !important; }
}
.al-link { white-space: nowrap; }
@media (min-width: 850px) and (max-width: 1299px) { .al-sign { right: 0; } } /* 2026-10-04: biển tên lệch -30px tràn ngang 15px ở 900-1024 */