/* =====================================================================
   K-HOMEY Serviced Apartment — stylesheet
   ---------------------------------------------------------------------
   Bảng màu: HỒNG (lấy từ logo) + TRẮNG.
   Toàn bộ biến thiết kế nằm trong :root bên dưới.
   Muốn đổi sắc hồng → sửa --pink-500 và --pink-600, mọi thứ khác tự theo.
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* --- màu thương hiệu: hồng --- */
  --pink-50:#FFF8FA;
  --pink-100:#FFEEF3;
  --pink-150:#FDE3EB;
  --pink-200:#FBD4E0;
  --pink-300:#F5B2C6;
  --pink-400:#EF8FAA;
  --pink-500:#E8759A;   /* hồng chủ đạo — trùng màu logo */
  --pink-600:#D9567F;   /* trạng thái hover / nhấn */
  --pink-700:#B93E64;   /* chữ trên nền hồng nhạt */

  /* --- trung tính ấm (ngả hồng) --- */
  --ink:#2E1F26;
  --ink2:#4B3640;
  --body:#6D5A63;
  --mut:#9B8791;
  --line:#F6E2EA;
  --line2:#FBF1F5;
  --white:#fff;
  --blush:#FFF8FA;      /* nền section xen kẽ */

  /* --- màu chức năng --- */
  --ok:#4E9E58; --ok-s:#EDF7EC;          /* xanh lá lấy từ trái tim trong logo */
  --warn:#B5761C; --warn-s:#FDF4E4;
  --dan:#C0446A; --dan-s:#FDEEF2;
  --gold:#E5A83C;

  /* --- bo góc --- */
  --r:22px; --rs:14px; --rxs:10px; --pill:999px;
  --arch:180px 180px 22px 22px;   /* mô-típ cửa vòm của logo */

  /* --- đổ bóng (ám hồng, không dùng xám xỉn) --- */
  --sh-1:0 1px 2px rgba(185,62,100,.05), 0 6px 18px rgba(185,62,100,.06);
  --sh-2:0 2px 4px rgba(185,62,100,.05), 0 18px 44px rgba(185,62,100,.12);
  --sh-3:0 30px 70px rgba(185,62,100,.20);
  --glow:0 8px 22px rgba(232,117,154,.36);

  /* --- chữ --- */
  --display:'Playfair Display','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --brand:'Baloo 2','Nunito','Be Vietnam Pro','Segoe UI',sans-serif;

  --max:1220px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:132px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--body);background:var(--white);
  font-size:15.5px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:600;letter-spacing:-.015em;line-height:1.2}
/* Lề ngang và lề dọc phải khai riêng: nhiều khối vừa mang class .wrap vừa có
   class riêng (vd. .hero-in). Nếu cả hai dùng padding viết tắt thì cái sau sẽ
   xoá sạch giá trị của cái trước — đó là lý do hero từng mất lề trái ở tầm
   481-1200px và mất lề trên/dưới ở ≤480px. */
.wrap{max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px}
.hide{display:none !important}
::selection{background:var(--pink-200);color:var(--ink)}

/* thanh cuộn mảnh, ám hồng */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:var(--pink-50)}
*::-webkit-scrollbar-thumb{background:var(--pink-200);border-radius:99px;border:3px solid var(--pink-50)}
*::-webkit-scrollbar-thumb:hover{background:var(--pink-300)}

/* viền focus cho người dùng bàn phím */
:focus-visible{outline:3px solid var(--pink-300);outline-offset:2px;border-radius:6px}

/* ============ 2. HIỆU ỨNG XUẤT HIỆN KHI CUỘN ============ */
[data-rv]{opacity:0;transform:translateY(26px)}
[data-rv].in{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0s)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-rv]{opacity:1;transform:none}
}

/* ============ 3. NÚT ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-500) 55%,var(--pink-600));
  color:#fff;border:1px solid transparent;padding:13px 26px;border-radius:var(--pill);
  font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;position:relative;
  box-shadow:var(--glow);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(217,86,127,.42)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

.btn.gh{background:#fff;color:var(--pink-700);border-color:var(--pink-200);box-shadow:var(--sh-1)}
.btn.gh:hover{background:var(--pink-50);border-color:var(--pink-300);box-shadow:var(--sh-2)}
.btn.dk{background:var(--ink);box-shadow:0 8px 22px rgba(46,31,38,.28)}
.btn.dk:hover{background:#1d1218}
.btn.wt{background:#fff;color:var(--pink-700);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.btn.wt:hover{background:var(--pink-50)}
.btn.sm{padding:9px 18px;font-size:13.5px}
.btn.lg{padding:16px 34px;font-size:16px}
.btn.blk{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ============ 4. THANH TRÊN CÙNG ============ */
.topbar{background:linear-gradient(100deg,var(--pink-600),var(--pink-500) 55%,var(--pink-400));
  color:#fff;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a{color:rgba(255,255,255,.94);transition:color .15s}
.topbar a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.tb-l{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.tb-l svg{width:14px;height:14px;flex:0 0 14px;opacity:.9}
.tb-i{display:inline-flex;align-items:center;gap:6px}
.langsw{display:flex;background:rgba(255,255,255,.18);border-radius:var(--pill);padding:2px;gap:2px}
.langsw button{background:none;border:0;color:rgba(255,255,255,.82);padding:3px 12px;font-size:11.5px;
  font-weight:700;cursor:pointer;letter-spacing:.6px;border-radius:var(--pill);transition:.18s}
.langsw button:hover{color:#fff}
.langsw button.on{background:#fff;color:var(--pink-600)}
/* bản sao đặt trên topbar — chỉ bật ở ≤760px (xem media query bên dưới) */
/* nút Zalo trên header có hai nhãn: bản đầy đủ cho màn rộng, bản ngắn cho
   điện thoại (xem @media ≤480px) — nếu để nhãn dài, nút sẽ đè lên logo */
.lbl-sm{display:none}
.langsw.tbl{display:none;padding:2px;flex:0 0 auto}
.langsw.tbl button{padding:3px 11px;font-size:11px;font-weight:700}
.langsw.tbl button.on{background:#fff;color:var(--pink-600)}
.langsw.hd{background:var(--pink-100)}
.langsw.hd button{color:var(--pink-700)}
.langsw.hd button:hover{color:var(--pink-600)}
.langsw.hd button.on{background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff}

/* ============ 5. HEADER ============ */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line2);transition:box-shadow .25s,background .25s}
header.scr{box-shadow:0 6px 28px rgba(185,62,100,.09);background:rgba(255,255,255,.94)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-top:13px;padding-bottom:13px}

.brand{display:flex;align-items:center;gap:11px;cursor:pointer}
.brand .mk{width:42px;height:42px;flex:0 0 42px;display:block;object-fit:contain;
  transition:transform .35s var(--ease)}
.brand:hover .mk{transform:translateY(-2px) rotate(-3deg)}
.brand>span{display:flex;flex-direction:column;justify-content:center}
.brand .nm{display:block;font-family:var(--brand);font-size:25px;font-weight:700;color:var(--pink-500);
  letter-spacing:-.6px;line-height:1.05;white-space:nowrap}
.brand .tg{display:block;font-size:9px;letter-spacing:2.7px;color:var(--ink2);text-transform:uppercase;
  font-weight:700;margin-top:3px;line-height:1;white-space:nowrap}

.menu{display:flex;gap:20px;align-items:center;font-size:13px;font-weight:500}
.menu a{color:var(--ink2);padding:7px 0;position:relative;cursor:pointer;transition:color .18s;white-space:nowrap}
.menu a:hover{color:var(--pink-600)}
.menu a:after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink-400),var(--pink-600));transition:right .28s var(--ease)}
.menu a:hover:after,.menu a.on:after{right:0}
.menu a.on{color:var(--pink-600);font-weight:600}
.navact{display:flex;gap:10px;align-items:center}

/* nút hamburger + lớp phủ menu mobile */
.burger{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;
  width:42px;height:42px;cursor:pointer;position:relative;box-shadow:var(--sh-1)}
.burger i{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--pink-600);
  transition:.28s var(--ease)}
.burger i:nth-child(1){top:14px}
.burger i:nth-child(2){top:20px}
.burger i:nth-child(3){top:26px}
.burger.on i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){top:20px;transform:rotate(-45deg)}
.scrim{position:fixed;inset:0;background:rgba(46,31,38,.42);backdrop-filter:blur(2px);
  z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}

/* ============ 6. HERO ============ */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 520px at 84% 6%,rgba(232,117,154,.26),transparent 62%),
    radial-gradient(720px 460px at 6% 92%,rgba(245,178,198,.34),transparent 60%),
    linear-gradient(168deg,#fff 0%,var(--pink-50) 46%,var(--pink-100) 100%)}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(232,117,154,.13) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;
  align-items:center;padding-top:76px;padding-bottom:84px}

.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--pink-200);padding:7px 17px 7px 12px;border-radius:var(--pill);
  font-size:12.5px;font-weight:700;letter-spacing:.6px;color:var(--pink-700);
  margin-bottom:22px;box-shadow:var(--sh-1)}
.eyebrow i{width:8px;height:8px;border-radius:99px;background:var(--ok);display:block;
  box-shadow:0 0 0 4px var(--ok-s);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.hero h1{font-size:clamp(28px,3.9vw,48px);max-width:28ch;margin-bottom:20px;line-height:1.15}
.hero h1 em{font-style:normal;color:var(--pink-500);position:relative;white-space:nowrap}
.hero h1 em:after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.26em;
  background:var(--pink-150);border-radius:99px;z-index:-1}
.hero .sub{font-size:clamp(15.5px,1.6vw,18.5px);max-width:50ch;color:var(--ink2);margin-bottom:36px}
.hero-trust{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.hero-trust b{display:block;font-family:var(--display);font-size:26px;color:var(--pink-600);line-height:1}
.hero-trust span{color:var(--mut);font-size:13px}

/* khối ảnh hero — mô-típ cửa vòm lấy từ logo */
.hero-art{position:relative;height:466px}
.ph{position:absolute;background:linear-gradient(150deg,var(--pink-150),var(--pink-300));
  box-shadow:var(--sh-2);overflow:hidden}
.ph:after{content:attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:16px;font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.92);
  text-shadow:0 1px 6px rgba(185,62,100,.4)}
.ph-main{inset:0 22% 12% 0;border-radius:var(--arch);border:9px solid #fff}
.ph-sub{right:0;bottom:0;width:46%;height:47%;border-radius:20px;border:8px solid #fff;
  background:linear-gradient(150deg,var(--pink-200),var(--pink-400))}
/* Khung nao da co anh that thi bo nhan placeholder di */
.ph:has(img):after{content:none}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* ============ 7. TRƯỜNG NHẬP LIỆU ============ */
.fld label{display:block;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;
  font-weight:700;color:var(--mut);margin-bottom:7px}
.fld select,.fld input,.fld textarea{width:100%;border:1.5px solid var(--line);border-radius:var(--rxs);
  padding:12px 14px;font-size:14.5px;color:var(--ink);background:#fff;outline:none;transition:.18s}
.fld select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9567F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px}
.fld select:hover,.fld input:hover{border-color:var(--pink-200)}
.fld select:focus,.fld input:focus,.fld textarea:focus{border-color:var(--pink-400);
  box-shadow:0 0 0 4px var(--pink-100)}
.fld input::placeholder,.fld textarea::placeholder{color:#c3b2ba}

/* ============ 8. SECTION & TIÊU ĐỀ ============ */
section{padding:88px 0;position:relative}
section.alt{background:var(--blush)}
section.alt:before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(620px 320px at 92% 0,rgba(232,117,154,.10),transparent 65%)}
section.alt>.wrap{position:relative}
.shead{max-width:660px;margin-bottom:42px}
.shead.ctr{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--pink-700);font-weight:800;margin-bottom:14px;
  background:var(--pink-100);border:1px solid var(--pink-150);padding:5px 14px;border-radius:var(--pill)}
.kicker:before{content:'';width:6px;height:6px;border-radius:99px;background:var(--pink-500)}
.shead h2{font-size:clamp(27px,3.5vw,42px);margin-bottom:14px}
.shead p{font-size:16.5px}

/* ============ 9. DẢI SỐ LIỆU ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1)}
.stat{background:#fff;padding:26px 24px;text-align:center;transition:background .25s}
.stat:hover{background:var(--pink-50)}
.stat b{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,38px);
  color:var(--pink-600);line-height:1;margin-bottom:6px}
.stat span{font-size:13.5px;color:var(--mut)}

/* ============ 10. USP ============ */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.usp{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;position:relative;overflow:hidden}
.usp:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink-300),var(--pink-500));transform:scaleX(0);
  transform-origin:left;transition:transform .38s var(--ease)}
.usp:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--pink-150)}
.usp:hover:before{transform:scaleX(1)}
.usp .ic{width:52px;height:52px;border-radius:16px;background:var(--pink-100);color:var(--pink-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:.3s var(--ease)}
.usp:hover .ic{background:var(--pink-500);color:#fff;transform:rotate(-6deg)}
.usp .ic svg{width:25px;height:25px}
.usp b{display:block;font-family:var(--display);font-size:19px;color:var(--ink);margin-bottom:7px}
.usp span{font-size:13.8px;color:var(--mut);line-height:1.6}

/* ============ 11. THẺ PHÒNG ============ */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:30px;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:var(--pill);padding:8px 18px;
  font-size:13.5px;cursor:pointer;color:var(--ink2);transition:.2s var(--ease);font-weight:500}
.chip:hover{border-color:var(--pink-300);color:var(--pink-700);transform:translateY(-1px)}
.chip.on{background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;
  border-color:transparent;box-shadow:var(--glow)}
.chip-select{border:1.5px solid var(--line);background:#fff;border-radius:var(--pill);
  padding:8px 34px 8px 18px;font-size:13.5px;cursor:pointer;color:var(--ink2);
  transition:.2s var(--ease);font-weight:500;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9567F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:13px}
.chip-select:hover{border-color:var(--pink-300);color:var(--pink-700)}
.chip-select:focus{border-color:var(--pink-400);box-shadow:0 0 0 4px var(--pink-100);outline:none}
.chip-select.on{background-color:var(--pink-100);border-color:var(--pink-200);color:var(--pink-700);font-weight:600}
.fcount{margin-left:auto;font-size:13.5px;color:var(--mut)}

.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(328px,1fr));gap:28px}
.rcard{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.rcard:hover{transform:translateY(-8px);box-shadow:var(--sh-2);border-color:var(--pink-150)}
.rmedia{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(150deg,var(--pink-150),var(--pink-400))}
.rmedia.v2{background:linear-gradient(150deg,#FDE7EE,#E9799E)}
.rmedia.v3{background:linear-gradient(150deg,#FBE2EC,#DE6C97)}
.rmedia.v4{background:linear-gradient(150deg,#FFEAF0,#F09CB4)}
.rmedia.v5{background:linear-gradient(150deg,#E3C3CE,#9C4F6F)}
.rmedia.v6{background:linear-gradient(150deg,#FCE4EC,#D9628E)}
.rmedia:after{content:attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;letter-spacing:1.5px;color:rgba(255,255,255,.94);
  text-transform:uppercase;font-weight:700;text-align:center;padding:16px;
  text-shadow:0 1px 6px rgba(185,62,100,.45);transition:transform .5s var(--ease)}
.rcard:hover .rmedia:after{transform:scale(1.06)}
/* Anh that cua phong — giu hieu ung phong to nhe khi ro chuot nhu ban nhap */
.rmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .5s var(--ease)}
.rcard:hover .rmedia img{transform:scale(1.06)}
.rcount{position:absolute;bottom:14px;right:14px;z-index:2;background:rgba(46,31,38,.62);
  backdrop-filter:blur(6px);color:#fff;border-radius:var(--pill);padding:5px 12px;
  font-size:11.5px;font-weight:600}
/* Nhãn tình trạng phòng, góc trên trái ảnh (đối xứng với .rcount góc dưới
   phải). Xanh lá = còn trống ngay; nền tối + chấm vàng = đang có khách, kèm
   ngày hợp đồng kết thúc. Dữ liệu lấy từ cột "ngày kết thúc hợp đồng". */
.ravail{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;align-items:center;
  gap:6px;background:rgba(46,31,38,.62);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);color:#fff;border-radius:var(--pill);padding:5px 12px;
  font-size:11.5px;font-weight:600;max-width:calc(100% - 28px)}
.ravail:before{content:"";width:7px;height:7px;border-radius:50%;background:#FFC13D;flex:0 0 7px}
.ravail.free{background:rgba(21,133,82,.88)}
.ravail.free:before{background:#8CE8B0}
.spec .v.av{font-size:16px;line-height:1.3}
.spec .v.av.free{color:#15854F}
.rbody{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.rbody h3{font-size:21px;margin-bottom:5px}
.rmeta{font-size:13.5px;color:var(--mut);margin-bottom:14px}
.rams{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.am{font-size:11.5px;background:var(--pink-100);color:var(--pink-700);padding:4px 11px;
  border-radius:var(--pill);font-weight:600}
.rfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding-top:16px;border-top:1px solid var(--line2)}
.price{font-family:var(--display);font-size:25px;font-weight:700;color:var(--pink-600);line-height:1.1}
.price small{font-family:var(--sans);font-size:12.5px;color:var(--mut);font-weight:400}
.pnote{font-size:11.5px;color:var(--mut)}

/* ============ 13. TRANG CHI TIẾT PHÒNG ============ */
#detail{display:none;padding-top:34px}
.dback{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--mut);
  cursor:pointer;margin-bottom:22px;transition:.18s;background:none;border:0}
.dback:hover{color:var(--pink-600);gap:12px}
/* Bo cuc gallery thay doi theo so anh cua tung phong (lop n4/n5/n6 do app.js gan).
   Mac dinh la luoi deu 3 cot, dung cho so anh bat ky ngoai 4-6. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:140px;gap:10px;
  margin-bottom:34px}
.gal.n4{grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,1fr);
  grid-auto-rows:auto;height:430px}
.gal.n5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-auto-rows:auto;height:430px}
.gal.n6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  grid-auto-rows:auto;height:470px}
.gal .g{background:linear-gradient(150deg,var(--pink-150),var(--pink-300));position:relative;
  cursor:pointer;transition:.25s var(--ease);border-radius:var(--rs);overflow:hidden}
.gal .g.v2{background:linear-gradient(150deg,#FDE7EE,#E9799E)}
.gal .g.v3{background:linear-gradient(150deg,#FBE2EC,#DE6C97)}
.gal .g.v4{background:linear-gradient(150deg,#FFEAF0,#F09CB4)}
.gal .g.v5{background:linear-gradient(150deg,#E3C3CE,#9C4F6F)}
.gal .g:hover{filter:brightness(1.05);transform:scale(.985)}
.gal .g:first-child{border-radius:var(--arch)}
.gal.n4 .g:first-child{grid-row:span 3}
.gal.n5 .g:first-child{grid-row:span 2}
.gal.n6 .g:first-child{grid-column:span 2;grid-row:span 2}
.gal .g:after{content:attr(data-slot);position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10px;letter-spacing:1.3px;color:rgba(255,255,255,.94);
  text-transform:uppercase;font-weight:700;text-align:center;padding:10px;
  text-shadow:0 1px 6px rgba(185,62,100,.45)}
/* Anh that trong gallery + nhan ten khu vuc o goc duoi */
.gal .g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal .gcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 12px 9px;
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:#fff;
  text-shadow:0 1px 6px rgba(35,17,24,.6);
  background:linear-gradient(to top,rgba(35,17,24,.55),transparent)}
.dgrid{display:grid;grid-template-columns:1fr 386px;gap:48px;align-items:start}
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rs);overflow:hidden;margin:24px 0 32px}
.spec div{background:#fff;padding:16px 18px}
.spec .k{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);
  font-weight:700;margin-bottom:4px}
.spec .v{font-family:var(--display);font-size:19px;color:var(--ink);font-weight:600}
h3.blk{font-size:23px;margin:36px 0 16px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.amgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.amgrid div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.amgrid i{color:var(--pink-500);font-style:normal;flex:0 0 auto;font-weight:700}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;
  border:1px solid var(--line);border-radius:var(--rs);overflow:hidden}
table.t td{padding:13px 16px;border-bottom:1px solid var(--line2);background:#fff}
table.t tr:nth-child(odd) td{background:var(--pink-50)}
table.t tr:last-child td{border-bottom:0}
table.t td.r{text-align:right;font-weight:700;color:var(--pink-700);white-space:nowrap}

/* hộp đặt phòng */
.bbox{position:sticky;top:120px;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-2);overflow:hidden;background:#fff}
.bbox .hd{background:linear-gradient(135deg,var(--pink-500),var(--pink-600));color:#fff;padding:20px 22px}
.bbox .hd .p{font-family:var(--display);font-size:28px;font-weight:700}
.bbox .hd .p small{font-family:var(--sans);font-size:13px;opacity:.85;font-weight:400}
.bbox .hd .s{font-size:12.5px;opacity:.85;margin-top:2px}
.bbox .bd{padding:20px 22px 22px}

/* ============ 14. VỊ TRÍ ============ */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.maph{border-radius:var(--r);overflow:hidden;border:8px solid #fff;box-shadow:var(--sh-2);
  height:410px;background:var(--pink-100)}
.maph iframe{width:100%;height:100%;border:0;display:block}
.dist{list-style:none}
.dist li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.dist li:last-child{border-bottom:0}
.dist li b{color:var(--ink);font-weight:600}
.dist li>span{color:var(--pink-700);white-space:nowrap;font-size:13px;font-weight:600;
  background:var(--pink-100);padding:3px 12px;border-radius:var(--pill)}

/* tab tiện ích quanh đây */
/* tiêu đề giữ trên một dòng, nhưng chỉ ở màn rộng — trên điện thoại tiêu đề
   tiếng Việt dài hơn hẳn bản tiếng Anh nên bắt buộc phải cho xuống dòng */
h2.nw{white-space:nowrap}
@media(max-width:860px){ h2.nw{white-space:normal} }
.tabs{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);padding:5px;
  border-radius:var(--pill);margin-bottom:28px;flex-wrap:wrap;box-shadow:var(--sh-1)}
.tabs button{background:none;border:0;padding:9px 20px;font-size:14.5px;color:var(--ink2);
  cursor:pointer;font-weight:500;border-radius:var(--pill);transition:.22s var(--ease)}
.tabs button:hover{color:var(--pink-600)}
.tabs button.on{background:linear-gradient(135deg,var(--pink-400),var(--pink-600));color:#fff;
  font-weight:600;box-shadow:var(--glow)}
.nbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.nb{display:block;border:1px solid var(--line);border-radius:var(--rs);padding:20px;background:#fff;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.nb:hover{transform:translateY(-4px);box-shadow:var(--sh-1);border-color:var(--pink-300)}
.nb .h{transition:color .2s var(--ease)}
.nb:hover .h{color:var(--pink-600)}
.nb .ic{width:42px;height:42px;border-radius:13px;background:var(--pink-100);display:flex;
  align-items:center;justify-content:center;font-size:20px;margin-bottom:11px}
.nb b{display:block;font-family:var(--display);font-size:17.5px;color:var(--ink);margin-bottom:4px}
.nb .d{font-size:13.5px;color:var(--body);margin-bottom:8px}
.nb .h{font-size:12.5px;color:var(--mut);display:flex;gap:6px;align-items:center}

/* ============ 14b. DỊCH VỤ & PHÍ ============ */
.svgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px}

/* ============ 16. ĐÁNH GIÁ (kéo ngang) ============ */
.tsts{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;
  cursor:grab;-webkit-overflow-scrolling:touch}
.tsts.drag{cursor:grabbing;user-select:none}
.tst{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;
  position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  flex:0 0 min(340px,84vw);scroll-snap-align:start}
.tst:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.tst .q{font-family:var(--display);font-size:64px;color:var(--pink-100);line-height:1;
  position:absolute;top:16px;right:22px}
.stars{color:var(--gold);font-size:14.5px;letter-spacing:2px;margin-bottom:13px}
.tst p{font-size:15px;color:var(--ink2);margin-bottom:18px;position:relative;z-index:1}
.tst .who{display:flex;gap:12px;align-items:center}
.tst .av{width:42px;height:42px;border-radius:99px;display:flex;align-items:center;
  justify-content:center;font-weight:700;color:#fff;font-size:14px;flex:0 0 42px;
  background:linear-gradient(135deg,var(--pink-400),var(--pink-600))}
.tst .who b{display:block;font-size:14.5px;color:var(--ink)}
.tst .who span{font-size:12.5px;color:var(--mut)}

/* ============ 17. FAQ ============ */
.faq{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px 24px}
.qa{border:1px solid var(--line);border-radius:var(--rs);background:#fff;
  overflow:hidden;transition:box-shadow .25s,border-color .25s}
.qa.open{border-color:var(--pink-200);box-shadow:var(--sh-1)}
.qa button{width:100%;text-align:left;background:none;border:0;padding:19px 56px 19px 22px;
  font-size:16.5px;font-family:var(--display);color:var(--ink);cursor:pointer;position:relative;font-weight:600}
.qa button:hover{color:var(--pink-600)}
.qa button:after{content:'';position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--pink-500);border-bottom:2.4px solid var(--pink-500);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.qa.open button:after{transform:translateY(-30%) rotate(-135deg)}
.qa .a{max-height:0;overflow:hidden;transition:max-height .38s var(--ease)}
.qa .a>div{padding:0 26px 20px 22px;font-size:15px}

/* ============ 18b. THANH TOÁN (pop-up) ============ */
/* Lop phu toan man hinh, chua 2 buoc: nhap thong tin -> xem phieu thu */
.pm{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px;animation:fadein .2s ease;
  height:100vh;height:100dvh}
.pm[hidden]{display:none}
.pm-back{position:absolute;inset:0;background:rgba(35,17,24,.62);backdrop-filter:blur(3px)}
/* min-width:0 de panel co lai duoc tren man hinh hep — khong co dong nay,
   bang phieu thu se day panel rong hon man hinh va bi cat mat cot tien.
   Chieu cao dung dvh: tren dien thoai, 100vh tinh ca phan bi thanh dia chi
   va thanh dieu huong cua trinh duyet che, lam pop-up trao ra ngoai man hinh. */
.pm-panel{position:relative;z-index:1;width:min(520px,100%);min-width:0;
  max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);
  display:flex;flex-direction:column;background:#fff;border-radius:var(--rs);
  box-shadow:0 30px 80px rgba(46,31,38,.35);animation:pmin .25s var(--ease)}
.pm-panel[hidden]{display:none}
.pm-wide{width:min(720px,100%)}
@keyframes pmin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.pm-head{padding:26px 26px 0;flex:none}
.pm-head h2{font-family:var(--display);font-size:25px;color:var(--ink);margin:8px 0 8px}
.pm-head p{font-size:13.5px;color:var(--body);line-height:1.6}
.pm-body{padding:22px 26px 26px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pm-foot{margin-top:18px;display:flex;justify-content:center}
.pm-x{position:absolute;top:14px;right:14px;z-index:2;width:36px;height:36px;border:0;
  border-radius:99px;background:var(--pink-50);color:var(--pink-700);font-size:21px;
  line-height:1;cursor:pointer;transition:.2s var(--ease)}
.pm-x:hover{background:var(--pink-150);transform:rotate(90deg)}
/* Khoa cuon trang nen khi pop-up dang mo */
body.noscroll{overflow:hidden}
/* Trong pop-up, phieu thu khong can vien/bong rieng nua */
.pm .receipt{border:0;box-shadow:none;padding:0}
/* Chua cho nut dong o goc phai, tranh de len chu "PHIEU THU / RECEIPT" */
.pm .rc-top{padding-right:44px}

.payform{display:flex;flex-direction:column;gap:16px}
.payform label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.payform select,.payform input{border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;transition:.2s var(--ease)}
.payform select:focus,.payform input:focus{border-color:var(--pink-400);box-shadow:0 0 0 4px var(--pink-100);outline:none}
.paynote{font-size:12px;color:var(--mut);line-height:1.55;margin-top:-4px}
.payerr{font-size:13px;color:#B4232C;background:#FDECEC;border:1px solid #F5C2C2;
  border-radius:10px;padding:12px 14px;line-height:1.5;margin-top:-4px}

/* --- Phiếu thu (dựng theo mẫu phiếu thu trong Google Sheet) --- */
.receipt{background:#fff;border:1px solid var(--line);border-radius:var(--rs);
  padding:26px;box-shadow:var(--sh-1);--rc-ink:var(--pink-700)}
.rc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.rc-brand{font-family:var(--display);font-size:27px;font-weight:700;color:var(--rc-ink);line-height:1}
.rc-kind{font-size:14px;font-weight:700;color:var(--rc-ink);text-align:right;line-height:1.3;letter-spacing:.02em}
.rc-kind span{font-weight:600;font-size:13px}
.rc-org{font-size:11.5px;font-style:italic;color:var(--body);line-height:1.5;
  margin:8px 0 0;padding-bottom:12px;border-bottom:2px solid var(--pink-500)}
.rc-meta{display:grid;grid-template-columns:1fr 1.15fr;gap:16px 20px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.rc-cap{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mut);margin-bottom:8px}
.rc-to{font-size:15px;font-weight:700;color:var(--rc-ink)}
.rc-kv{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
  color:var(--body);padding:2px 0}
.rc-kv b{color:var(--ink);font-weight:700;text-align:right}
.rc-kv i{font-style:italic;color:var(--rc-ink);text-align:right}
.rc-tablewrap{overflow-x:auto;margin-top:14px}
.rc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.rc-table th{background:var(--pink-500);color:#fff;text-align:left;font-size:10.5px;
  font-weight:700;letter-spacing:.04em;padding:8px 10px;vertical-align:bottom}
.rc-table th span{font-weight:500;opacity:.92}
.rc-table td{padding:10px;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.rc-desc{font-weight:700;color:var(--ink);white-space:nowrap}
.rc-per{white-space:nowrap}
.rc-det{color:var(--mut)}
.rc-table th.rc-amt{text-align:right}
.rc-table td.rc-amt{text-align:right;white-space:nowrap;font-weight:700;color:var(--ink)}
.rc-en{display:block;font-weight:500;font-size:11.5px;color:var(--mut)}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 10px;border-top:2px solid var(--pink-500)}
.rc-total span{font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--rc-ink)}
.rc-total b{font-family:var(--display);font-size:24px;font-weight:700;color:var(--pink-600)}
.rc-words{background:var(--pink-50);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.rc-words .rc-kv span{font-weight:600;color:var(--ink2);white-space:nowrap}
.inv-qr{display:flex;flex-direction:column;align-items:center;gap:10px;margin:20px 0;
  padding:18px;background:var(--pink-50);border-radius:var(--rs)}
.inv-qr img{width:200px;height:200px;object-fit:contain;border-radius:10px;background:#fff}
.inv-qr-note{font-size:12px;color:var(--mut);text-align:center;max-width:26ch}
.inv-bank{font-size:12.5px;color:var(--mut);text-align:center}

/* ============ 19. LIÊN HỆ ============ */
.cgrid{display:grid;max-width:900px}
.cinfo{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.cinfo li{list-style:none;display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cinfo li:nth-last-child(-n+2){border-bottom:0}
.cinfo .ic{width:44px;height:44px;border-radius:14px;background:var(--pink-100);color:var(--pink-600);
  display:flex;align-items:center;justify-content:center;flex:0 0 44px}
.cinfo .ic svg{width:20px;height:20px}
.cinfo .k{font-size:10.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--mut);font-weight:700}
.cinfo .v{font-size:16px;color:var(--ink);font-weight:600}
.cinfo .v a:hover{color:var(--pink-600)}
.cinfo .v small{display:block;font-size:13px;color:var(--mut);font-weight:400;margin-top:1px}

/* ============ 20. FOOTER ============ */
footer{background:linear-gradient(165deg,#3B2028,#2A161C);color:#c8b3bb;padding:64px 0 26px;font-size:14px;
  position:relative;overflow:hidden}
footer:before{content:'';position:absolute;top:-140px;right:-90px;width:420px;height:420px;
  border-radius:99px;background:radial-gradient(circle,rgba(232,117,154,.24),transparent 68%)}
footer .wrap{position:relative}
.fgrid{display:grid;grid-template-columns:1fr;padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.1)}
footer h4{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
  font-family:var(--sans);font-weight:700;margin-bottom:16px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{transition:.18s}
footer a:hover{color:var(--pink-300)}
.fbrand{text-align:center}
.fbrand .lock{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:14px}
.fbrand .mk{width:40px;height:40px;flex:0 0 40px;object-fit:contain}
.fbrand .lock>span{display:flex;flex-direction:column;justify-content:center}
.fbrand .nm{display:block;font-family:var(--brand);color:#fff;font-size:24px;font-weight:700;
  line-height:1.05;letter-spacing:-.6px}
.fbrand .tg{display:block;font-size:8.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--pink-300);font-weight:700;margin-top:3px;line-height:1;white-space:nowrap}
.fsoc{display:flex;gap:10px;margin-top:18px;justify-content:center}
.fsoc a{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;color:#fff;transition:.22s var(--ease)}
.fsoc a:hover{background:var(--pink-500);transform:translateY(-3px)}
.fsoc svg{width:17px;height:17px}
.fbot{display:flex;justify-content:space-between;gap:16px;padding-top:22px;font-size:12.5px;
  color:#8f7a81;flex-wrap:wrap}

/* ============ 21. NÚT NỔI ============ */
.float{position:fixed;right:20px;bottom:22px;z-index:70;display:flex;flex-direction:column;gap:11px}
.fbtn{width:52px;height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:18px;font-weight:700;box-shadow:0 8px 22px rgba(46,31,38,.26);cursor:pointer;
  border:0;transition:transform .25s var(--ease),box-shadow .25s;position:relative}
.fbtn:hover{transform:scale(1.09) translateY(-2px)}
.fbtn svg{width:23px;height:23px}
.fbtn.zalo{background:#0068ff;font-size:13.5px;letter-spacing:-.3px;font-family:var(--sans)}
.fbtn.wa{background:#25d366}
.fbtn.call{background:linear-gradient(135deg,var(--pink-400),var(--pink-600))}
.fbtn.call:before{content:'';position:absolute;inset:0;border-radius:99px;border:2px solid var(--pink-400);
  animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.totop{position:fixed;left:20px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--pink-600);display:flex;align-items:center;
  justify-content:center;cursor:pointer;box-shadow:var(--sh-2);opacity:0;pointer-events:none;
  transform:translateY(14px);transition:.3s var(--ease)}
.totop.on{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--pink-500);color:#fff;border-color:transparent}

@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ============ 23. LIGHTBOX ============ */
.lb{position:fixed;inset:0;background:rgba(35,17,24,.94);z-index:110;display:none;
  align-items:center;justify-content:center;padding:40px}
.lb.on{display:flex;animation:fadein .2s ease}
.lb .box{position:relative;width:min(1100px,100%);max-height:calc(100vh - 80px);
  border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lb .box img{max-width:100%;max-height:calc(100vh - 80px);width:auto;height:auto;
  object-fit:contain;display:block;border-radius:var(--r)}
.lb .lbcap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;text-align:center;
  color:#fff;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  background:linear-gradient(to top,rgba(35,17,24,.65),transparent)}
.lb .x{position:absolute;top:22px;right:26px;color:#fff;font-size:24px;cursor:pointer;
  background:rgba(255,255,255,.16);border:0;width:44px;height:44px;border-radius:99px;transition:.2s}
.lb .x:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}

/* ============ 24. GHI CHÚ ============ */
.note{background:var(--warn-s);border:1px solid #F2E2C3;border-left:4px solid var(--warn);
  border-radius:var(--rxs);padding:15px 18px;font-size:14px;color:#79541A;margin-top:18px}
.note b{color:#5A3D0D}

/* ============ 25. RESPONSIVE ============ */
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:60px}
  .hero h1{max-width:none}
  .hero-art{height:380px;max-width:560px}
  .usps{grid-template-columns:1fr 1fr}
}
/* điểm gãy riêng cho tablet: menu chữ không đủ chỗ trước khi bố cục lưới cần đổi,
   nên chuyển sang hamburger sớm hơn để tránh menu bị tràn/xô trên iPad, Android tablet */
@media(max-width:1024px){
  /* header dùng backdrop-filter, thứ sẽ biến header thành "containing block" cho
     menu position:fixed bên trong nó — khiến menu định vị theo khung header nhỏ
     xíu thay vì toàn màn hình, và đè lên nút "Đặt phòng" cạnh nó (không bấm được).
     Tắt backdrop-filter + đặt nền đặc ở tầm rộng này để menu fixed neo đúng theo viewport. */
  header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  header.scr{background:#fff}
  /* đưa navact vào một ngữ cảnh xếp lớp riêng, cao hơn menu, để phòng khi vẫn
     chồng hình học lên nhau thì nút bấm không bao giờ bị menu che mất */
  /* cho phép xuống dòng thay vì tràn ra ngoài (bị cắt bởi overflow-x:hidden của
     body) trên các màn hình rất hẹp, khi langsw + nút Zalo + hamburger không
     đủ chỗ trên một hàng */
  .navact{position:relative;z-index:59;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}
  /* padding-top đủ lớn để chừa chỗ cho topbar+header — trên tablet (761-1024px)
     topbar chưa bị rút gọn (.hidem chỉ ẩn ≤760px) nên có thể cao tới ~148px
     khi xuống dòng; ≤760px sẽ override lại giá trị nhỏ hơn bên dưới */
  .menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);background:#fff;
    flex-direction:column;gap:0;padding:168px 26px 26px;align-items:stretch;z-index:58;
    box-shadow:-14px 0 40px rgba(185,62,100,.16);transform:translateX(102%);
    transition:transform .34s var(--ease);display:flex}
  .menu.open{transform:none}
  .menu a{padding:15px 0;border-bottom:1px solid var(--line2);font-size:16.5px;white-space:normal}
  .menu a:after{display:none}
  .burger{display:block;z-index:59}
  .navact .btn{display:none}
  .navact .btn.keep{display:inline-flex}
}
@media(max-width:980px){
  .stats{grid-template-columns:1fr 1fr}
  .dgrid{grid-template-columns:1fr;gap:30px}
  .bbox{position:static}
  .loc{grid-template-columns:1fr;gap:30px}
  .svgrid{grid-template-columns:1fr;gap:34px}
  .faq{grid-template-columns:1fr}
  .cinfo{grid-template-columns:1fr}
  .cinfo li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .cinfo li:last-child{border-bottom:0}
  .gal,.gal.n4,.gal.n5,.gal.n6{grid-template-columns:1fr 1fr;height:auto;
    grid-template-rows:240px;grid-auto-rows:180px}
  .gal .g:first-child,.gal.n4 .g:first-child,.gal.n5 .g:first-child,.gal.n6 .g:first-child{
    grid-row:span 1;grid-column:span 2;height:240px;border-radius:var(--rs)}
}
@media(max-width:760px){
  html{scroll-padding-top:96px}
  /* HEADER MỘT HÀNG: trên điện thoại, logo + VI/EN + nút Zalo + hamburger
     không đủ chỗ nên cụm bên phải bị rớt xuống hàng hai, làm logo lệch hẳn so
     với các nút. Chuyển VI/EN lên topbar (chỗ đó đang trống vì .hidem đã ẩn
     địa chỉ và email) rồi khoá không cho xuống hàng nữa. */
  .langsw.tbl{display:flex}
  .navact .langsw.hd{display:none}
  .nav{flex-wrap:nowrap;gap:12px}
  .navact{flex-wrap:nowrap;row-gap:0}
  .brand{flex:0 0 auto}
  .topbar .wrap{gap:10px}
  /* topbar rút gọn (.hidem ẩn bớt mục) nên header thấp hơn hẳn so với tablet —
     dùng lại khoảng đệm nhỏ để menu không bị hở khoảng trắng quá to phía trên */
  .menu{padding-top:108px}
  section{padding:60px 0}
  .usps{grid-template-columns:1fr}
  .float{right:14px;bottom:14px}
  .totop{left:14px;bottom:14px;width:42px;height:42px}
  .fbtn{width:48px;height:48px}
  .hero-art{height:330px}
  .brand .nm{font-size:22px}
  .brand .mk{width:38px;height:38px;flex:0 0 38px}
}
@media(max-width:520px){
  .stats{grid-template-columns:1fr 1fr}
  .rooms{grid-template-columns:1fr}
  .hero-trust{gap:18px}
  /* Pop-up thanh toán trên điện thoại: chiếm gần trọn màn hình để phiếu thu
     không bị thanh trình duyệt che mất đầu và cuối. */
  .pm{padding:8px}
  .pm-panel{width:100%;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .pm-head{padding:22px 18px 0}
  .pm-body{padding:18px}
  .rc-meta{grid-template-columns:1fr;gap:14px}
  .rc-top{align-items:center}
  .rc-brand{font-size:22px}
  .gal,.gal.n4,.gal.n5,.gal.n6{grid-template-columns:1fr;grid-template-rows:220px;
    grid-auto-rows:180px}
  .gal .g:first-child,.gal.n4 .g:first-child,.gal.n5 .g:first-child,.gal.n6 .g:first-child{
    grid-column:span 1;height:220px}
}
/* điện thoại nhỏ (≤480px, vd. 360-414px): logo + tagline + nút + hamburger
   không đủ chỗ trên một hàng — thu gọn để nút hamburger không bị đẩy ra
   ngoài khung hình (không mở được menu) */
@media(max-width:480px){
  .wrap{padding-left:18px;padding-right:18px}
  .lbl-lg{display:none}
  .lbl-sm{display:inline}
  .nav{gap:10px}
  .brand{gap:8px}
  .brand .tg{display:none}
  .brand .mk{width:34px;height:34px;flex:0 0 34px}
  .brand .nm{font-size:20px}
  .navact{gap:6px}
  .navact .btn.keep{padding:9px 14px;font-size:13px;white-space:nowrap}
  .burger{width:38px;height:38px;flex:0 0 38px}
  .burger i{left:9px;right:9px}
  .burger i:nth-child(1){top:12px}
  .burger i:nth-child(2){top:18px}
  .burger i:nth-child(3){top:24px}
  .burger.on i:nth-child(1){top:18px;transform:rotate(45deg)}
  .burger.on i:nth-child(3){top:18px;transform:rotate(-45deg)}
}

/* điện thoại rất hẹp (≤360px, vd. Galaxy S8/iPhone SE): thu nút Zalo thêm
   một nấc để logo, nút và hamburger cùng nằm gọn trên một hàng */
@media(max-width:360px){
  .wrap{padding-left:14px;padding-right:14px}
  .nav{gap:8px}
  .navact{gap:5px}
  .navact .btn.keep{padding:8px 11px;font-size:12.5px}
  .brand .nm{font-size:19px}
  .brand .mk{width:32px;height:32px;flex:0 0 32px}
}

/* Nhóm nút lọc tiện ích: trên điện thoại ba nhãn không đủ chỗ trên một hàng
   nên nhãn thứ ba rớt xuống, chừa một khoảng trống lớn bên phải. Chuyển thành
   lưới 3 cột bằng nhau, chiếm trọn bề ngang. */
@media(max-width:560px){
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;gap:3px}
  .tabs button{padding:9px 6px;font-size:13px;text-align:center}
}
@media(max-width:360px){
  .tabs button{padding:9px 3px;font-size:12px}
}

/* Bảng "Chi phí phát sinh": cột giá trị để nowrap cho đẹp trên màn rộng,
   nhưng chuỗi dài nhất ("100.000đ / người / tháng") khiến độ rộng tối thiểu
   của bảng lên tới 337px — rộng hơn khung nội dung của điện thoại nhỏ và kéo
   cả khối dịch vụ tràn ngang. Dưới 420px cho phép xuống dòng. */
@media(max-width:420px){
  table.t td.r{white-space:normal}
}

/* Topbar: địa chỉ + email + dòng "Zalo · WhatsApp · Viber" cộng lại rộng hơn
   màn tablet nên bị dồn thành 3 dòng, tạo một mảng hồng cao bất thường.
   Dưới 980px chỉ giữ số điện thoại — đúng thông tin cần nhất. */
@media(max-width:1100px){
  /* dòng bên phải chỉ nhắc lại số điện thoại đã có bên trái — bỏ trước tiên */
  .topbar .hidem2{display:none}
}
@media(max-width:980px){
  .topbar .hidem{display:none}
}