/* Ciao Saigon Hotel & Spa — style.css
   Bảng màu lấy từ logo đỏ. Sửa màu ở khối :root là đổi cả trang.

   Bố cục file
   -----------
   1. Biến màu, biến chuyển động
   2. Nền chung, nút, tiêu điểm bàn phím
   3. Từng mục của trang, theo đúng thứ tự trên trang
   4. Cơ chế chuyển động dùng chung ([data-hien], mở màn ảnh bìa)
   5. Máy tính bảng và điện thoại
   6. Khối tôn trọng "giảm chuyển động" — luôn ở CUỐI file

   Nguyên tắc chuyển động: chỉ động vào transform và opacity (hai thứ trình duyệt
   xử lý trên card đồ hoạ), không bao giờ động vào width/height/top/left/max-height
   (những thứ bắt trình duyệt tính lại bố cục 60 lần mỗi giây). */

/* ============================ 1. BIẾN ============================ */
:root{
  --do:#C40252;
  --do-dam:#8E0139;
  --vang:#C9A227;
  --nau:#34252C;
  --kem:#FBF7F3;
  --nga:#FDFAF7;
  --vien:#EFE4DA;
  --chu:#34252C;
  --chu-phu:#6E5A62;
  --chu-nhat:#A08894;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --ngang:100px;
  --cao-header:96px;

  /* Thời lượng */
  --nhanh:.18s;        /* phản hồi ngay khi khách chạm: nút, ô lọc, gạch chân */
  --vua:.32s;          /* đổi trạng thái: header, thẻ phòng, menu, khung ảnh lớn */
  --cham:.62s;         /* nội dung hiện lên khi cuộn tới */
  --rat-cham:1.1s;     /* khối lớn choán màn hình */
  --kenburns:14s;      /* ảnh bìa thu rất chậm, chạy một lần */

  /* Đường cong. Mọi giá trị y nằm trong 0..1 nên không bao giờ nảy */
  --duong:cubic-bezier(.22,.61,.36,1);
  --duong-man:cubic-bezier(.16,1,.3,1);
  --duong-vao-ra:cubic-bezier(.4,0,.2,1);

  /* Biên độ */
  --dich:14px;
  --dich-nho:6px;
  --dich-ngang:18px;
  --nang:-3px;
  --tre:90ms;
  --tre-anh:34ms;

  /* Mức phóng */
  --phong-the:1.04;
  --phong-bst:1.04;
  --phong-bia:1.055;
  --phong-lb:.985;

  /* Bóng đổ cùng tông nâu, không dùng bóng đen (bị xám bẩn) */
  --treo:0 12px 32px rgba(52,37,44,.13);
  --bong-header:0 4px 18px rgba(52,37,44,.09);

  /* Tiêu điểm bàn phím */
  --vien-focus:2px;
  --lech-focus:3px;
}
@media(max-width:1180px){ :root{--dich:12px} }

/* ============================ 2. NỀN CHUNG ============================ */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--cao-header);
  /* Chừa sẵn chỗ thanh cuộn: khi mở khung xem ảnh lớn, trang không nhích ngang */
  scrollbar-gutter:stable;
}
/* Ép cả trang dùng chữ số kiểu hiện đại (lining). Phông tiêu đề cũ là
   Cormorant Garamond mặc định dùng chữ số kiểu cổ — số 1 chỉ cao ngang chữ
   thường nên nhìn hệt số La Mã I. Nay đã đổi sang Playfair Display vốn không
   mắc lỗi đó, nhưng giữ dòng này làm chốt phòng khi lại đổi phông.
   Thuộc tính này di truyền nên đặt một lần ở body là đủ cho mọi chỗ. */
body{margin:0;background:var(--kem);color:var(--chu);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
/* Ô nhập và nút không tự thừa hưởng kiểu chữ số từ body trên mọi trình duyệt */
input,select,textarea,button{font-variant-numeric:lining-nums}
/* Những chỗ số phải thẳng cột hoặc sắp quay: thêm chữ số đều bề ngang để
   con số đổi mà cột không nhảy. */
.solieu b,.diem b,.hangmuc b,.kg-so,.gio b,.dp-o input{font-variant-numeric:lining-nums tabular-nums}
img{max-width:100%;display:block}
picture{display:block}
/* .btn đặt display:inline-flex nên phải ghi đè, nếu không thuộc tính hidden
   của nút "Xem thêm ảnh" sẽ không có tác dụng */
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
a{color:var(--do);text-decoration:none}
/* Playfair Display dày dặn hơn Cormorant nhiều nên tiêu đề dùng nét 400 —
   cũng đúng nét mà bản canvas thiết kế đang dùng. */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.2px}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
/* Chỉ cần scroll-padding-top ở html là đủ cho mọi đường dẫn #…; thêm
   scroll-margin-top cho từng mục nữa là dư ra đúng hai lần chiều cao header. */

/* Liên kết bỏ qua điều hướng — chỉ hiện khi đi bằng bàn phím.
   Dùng transform chứ không dùng left:-9999px để trình duyệt khỏi cuộn ngang. */
.bo-qua{position:absolute;left:var(--ngang);top:0;z-index:1000;padding:11px 18px;background:#fff;color:var(--do);font-size:14px;font-weight:600;box-shadow:var(--treo);transform:translateY(-130%);transition:transform var(--nhanh) var(--duong)}
.bo-qua:focus{transform:none}

.eyebrow{font-size:12px;letter-spacing:2.6px;text-transform:uppercase;font-weight:500;color:var(--do)}
.rule{width:46px;height:2px;border:0;margin:0;background:var(--do);transform-origin:left center}
.sec{padding:84px var(--ngang)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec-title{font-size:42px;line-height:1.2;margin-top:16px}
.tag{display:flex;align-items:center;gap:14px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 28px;
  border-radius:2px;font-size:14.5px;font-weight:600;letter-spacing:.4px;border:1px solid transparent;
  cursor:pointer;font-family:var(--sans);
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--nhanh) linear,color var(--nhanh) linear,border-color var(--nhanh) linear,transform .1s var(--duong);
}
.btn:active{transform:translate3d(0,1px,0)}
.btn-chinh{background:var(--do);color:#fff}
.btn-vien{border-color:rgba(255,255,255,.55);color:#fff}
.btn-toi{border-color:var(--nau);color:var(--nau);background:transparent}

/* Tiêu điểm bàn phím — phải thấy rõ trên cả nền sáng lẫn nền tối */
:focus-visible{outline:var(--vien-focus) solid var(--do);outline-offset:var(--lech-focus)}
.bosuutap :focus-visible,.footer :focus-visible,.lb :focus-visible,.topbar :focus-visible,.cta-day .dat:focus-visible,.hero :focus-visible{outline-color:var(--vang)}
/* Trình duyệt cũ chưa biết :focus-visible thì rơi về :focus — thà thừa viền còn hơn thiếu */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,textarea:focus,select:focus{outline:var(--vien-focus) solid var(--do);outline-offset:var(--lech-focus)}
}

/* Mọi hiệu ứng rê chuột gom vào một chỗ. Ngoài khối này thì máy cảm ứng sẽ
   "dính" trạng thái hover sau khi chạm — ảnh kẹt phóng to, nút kẹt màu đậm. */
@media(hover:hover) and (pointer:fine){
  a:hover{color:var(--do-dam)}
  .btn:hover{transform:translate3d(0,-1px,0)}
  .btn-chinh:hover{background:var(--do-dam);color:#fff}
  .btn-vien:hover{background:rgba(255,255,255,.12);color:#fff}
  .btn-toi:hover{background:var(--nau);color:#fff}
  .topbar a:hover{color:#fff}
  .nav a:hover{color:var(--do)}
  .nav a:hover::after{transform:scaleX(1)}
  .footer a:hover{color:#fff}
  .lien:hover::after{transform:scaleX(1)}
  .lien:hover svg{transform:translate3d(var(--dich-nho),0,0)}
  .tt a:hover::after{transform:scaleX(1)}
  .the:hover{transform:translate3d(0,var(--nang),0)}
  .the:hover>picture img{transform:scale(var(--phong-the))}
  .the:hover::after{opacity:1}
  .yk:hover{transform:translate3d(0,var(--nang),0)}
  .yk:hover::after{opacity:1}
  .bst a:hover img{transform:scale(var(--phong-bst))}
  .bst a:hover .bst-nhan{opacity:1}
  .bst-loc button:hover{border-color:var(--vang);color:#fff}
  .bst-them .btn-toi:hover{background:var(--vang);border-color:var(--vang);color:var(--nau)}
  .lb .lb-truoc:hover,.lb .lb-sau:hover,.lb .lb-dong:hover{border-color:var(--vang);color:var(--vang)}
  .fab a:hover{transform:translate3d(0,-2px,0)}
  .map-cho:hover{border-color:var(--do)}
  .map-cho:hover .map-phu{color:var(--do)}
}

/* ============================ 3. CÁC MỤC ============================ */

/* Thanh trên cùng */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--ngang);min-height:40px;background:var(--nau);color:#E8DDD5;font-size:12.5px}
.topbar a{color:#E8DDD5;transition:color var(--nhanh) linear}
.topbar-trai{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:6px 0}
.topbar span.i{display:inline-flex;align-items:center;gap:7px}
.lang{display:flex;align-items:center;gap:12px}
.lang .on{font-weight:600;color:#fff}
/* Trên điện thoại thanh trên cùng bị ẩn, nên nút đổi ngôn ngữ nằm trong menu mở ra. */
.lang-menu{display:none}
@media(max-width:1090px){
  .lang-menu{display:flex;gap:16px;padding:15px 18px;border-bottom:1px solid var(--vien);font-size:14.5px}
}

/* Header — chiều cao KHÔNG bao giờ đổi khi cuộn, chỉ thêm bóng và thu nhẹ logo */
.header{
  position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:0 var(--ngang);height:var(--cao-header);background:#fff;border-bottom:1px solid var(--vien);
  transition:box-shadow var(--vua) var(--duong-vao-ra),border-bottom-color var(--vua) linear;
}
.header.dinh{box-shadow:var(--bong-header);border-bottom-color:transparent}
.header img.logo{height:58px;width:auto;transform-origin:left center;transition:transform var(--vua) var(--duong-vao-ra)}
.header.dinh img.logo{transform:scale(.93)}
.nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav a{position:relative;color:#55434B;transition:color var(--nhanh) linear}
.nav a.on{color:var(--do)}
/* Gạch chân vẽ bằng lớp giả nên KHÔNG chiếm chỗ: đổi mục đang xem lúc cuộn
   không còn làm cả thanh menu nhích lên xuống như bản cũ. */
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--do);transform:scaleX(0);transform-origin:left center;transition:transform var(--nhanh) var(--duong)}
.nav a.on::after{transform:scaleX(1)}
.menu-nut{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;background:none;border:0;cursor:pointer}
.menu-nut span{display:block;width:22px;height:2px;background:var(--nau);transition:transform var(--vua) var(--duong),opacity var(--nhanh) linear}
.menu-nut[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-nut[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-nut[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{position:relative;height:578px;overflow:hidden}
.hero picture{position:absolute;inset:0}
.hero img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,14,20,.84) 0%,rgba(26,14,20,.54) 48%,rgba(26,14,20,.2) 100%)}
.hero-noi{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:0 var(--ngang)}
.hero h1{font-size:62px;line-height:1.08;color:#fff;max-width:780px;text-wrap:pretty}
.h1-chao{display:block;font-size:.52em;letter-spacing:1.2px;color:#EFE2D6;margin-top:12px}
.hero p{font-size:17px;line-height:1.7;color:#EADFD8;max-width:540px;font-weight:300}
.hero .eyebrow{color:#E6C97A}
.hero .rule{background:var(--vang)}
.hero-nut{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.hero-nut .btn{min-height:54px;padding:0 32px;font-size:15px}
.hero-diem{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#EADFD8;font-weight:300}
.hero-diem b{font-weight:600;color:#fff}

/* Thanh kiểm tra phòng trống */
.dp-boc{position:relative;z-index:5;margin:-38px var(--ngang) 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.dp{display:flex;align-items:stretch;width:100%;max-width:1080px;background:#fff;box-shadow:0 18px 44px rgba(52,37,44,.16)}
.dp-o{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;flex:1 1 0;padding:14px 22px;border-right:1px solid var(--vien);min-width:0;transition:background-color var(--nhanh) linear}
.dp-o:focus-within{background:#FDF6F9}
.dp-o span{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:var(--chu-nhat);font-weight:500;transition:color var(--nhanh) linear}
.dp-o:focus-within>span{color:var(--do)}
.dp-o input,.dp-o select{border:0;background:none;font-family:var(--serif);font-size:21px;color:var(--chu);padding:0;width:100%;min-width:0;max-width:100%;min-height:30px}
.dp-o input:focus,.dp-o select:focus{outline:var(--vien-focus) solid var(--do);outline-offset:-2px}
/* Vạch vàng chạy dưới ô đang nhập — trên thanh bốn ô sát nhau, đây là cách
   duy nhất để khách biết mình đang sửa ngày nào. */
.dp-o::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vang);transform:scaleX(0);transform-origin:left center;transition:transform var(--vua) var(--duong)}
.dp-o:focus-within::after{transform:scaleX(1)}
.dp-nut{flex:0 0 250px;min-height:auto;border-radius:0;position:relative}
/* Chiều cao cố định để dòng chữ đổi nội dung không đẩy dải số liệu bên dưới */
.dp-ghi{min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;font-size:12.5px;color:var(--chu-nhat)}
.dp-ghi.nhac{color:var(--do)}
.dp-ghi a,.dp-ghi button{font-size:12.5px;font-weight:600;color:var(--do);background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);text-decoration:underline}
/* Vòng quay lúc đang mở trình thư — sống vài trăm mili-giây rồi tắt */
@keyframes ciao-xoay{to{transform:rotate(360deg)}}
[data-trangthai="dang-gui"]{pointer-events:none;opacity:.85}
[data-trangthai="dang-gui"]::before{content:"";width:15px;height:15px;margin-right:9px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:ciao-xoay .7s linear infinite}
.btn-toi[data-trangthai="dang-gui"]::before{border-color:rgba(52,37,44,.3);border-top-color:var(--nau)}

/* Dải số liệu */
.solieu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-bottom:1px solid var(--vien)}
.solieu div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;border-right:1px solid #F1E7DE;text-align:center}
.solieu div:last-child{border-right:0}
.solieu b{font-family:var(--serif);font-size:34px;line-height:1;color:var(--do);font-weight:400}
.solieu small{font-size:13px;color:var(--chu-phu)}

/* Giới thiệu */
.gioithieu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.gioithieu p{font-size:15.5px;line-height:1.85;color:#5C4A52;font-weight:300;margin-bottom:18px}
.gt-anh{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.gt-anh img{width:100%;height:190px;object-fit:cover}
.gt-anh picture:first-child{grid-column:span 2}
.gt-anh picture:first-child img{height:300px}
.lien{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--do)}
.lien::after{content:"";position:absolute;left:0;right:28px;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform var(--nhanh) var(--duong)}
.lien:focus-visible::after{transform:scaleX(1)}
.lien svg{transition:transform var(--nhanh) var(--duong)}

/* Phòng */
.phong{background:#fff}
.phong-luoi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin-top:44px}
/* overflow:hidden phải nằm ở khung ẢNH chứ không ở cả thẻ. Đặt ở .the thì
   vùng cắt trùng khít mép ngoài của lớp bóng ::after, mà bóng đổ luôn được vẽ
   BÊN NGOÀI mép đó — cắt sạch, rê chuột không thấy gì. */
.the{position:relative;display:flex;flex-direction:column;background:var(--nga);border:1px solid var(--vien);transition:transform var(--vua) var(--duong)}
.the>picture{overflow:hidden}
/* Bóng dựng sẵn ở lớp giả, khi rê chuột chỉ đổi độ mờ — trình duyệt không
   phải vẽ lại vùng bóng nhoè 32px mỗi khung hình. */
.the::after{content:"";position:absolute;inset:0;box-shadow:var(--treo);opacity:0;pointer-events:none;transition:opacity var(--vua) var(--duong)}
.the:focus-within::after{opacity:1}
.the>picture img{width:100%;height:208px;object-fit:cover;transition:transform var(--rat-cham) var(--duong)}
.the-noi{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;padding:24px 22px 26px;flex-grow:1}
.the h3{font-size:25px;line-height:1.25}
.the-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#7A6670}
.the-meta span{display:inline-flex;align-items:center;gap:6px}
.the p{font-size:13.5px;line-height:1.75;color:var(--chu-phu);font-weight:300}
.the-gia{margin-top:auto;padding-top:16px;border-top:1px solid var(--vien);font-size:13px;color:var(--do);font-weight:600}
.the .btn{width:100%;min-height:44px;font-size:13.5px;margin-top:12px}

/* Không gian — kể chuyện theo khu vực */
.dv-giua{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
/* Neo phụ cho đường dẫn #khong-gian. Trước đây phải tự đẩy lên 96px để không
   bị header dính che; nay html đã có scroll-padding-top nên chỉ cần đứng yên,
   đẩy thêm lần nữa là dư ra đúng một chiều cao header. */
.neo{display:block;height:0}
.kg{background:var(--nga)}
.kg-mo{font-size:15px;line-height:1.8;color:var(--chu-phu);font-weight:300;max-width:560px;margin-top:16px}
.kg-khoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch;margin-top:56px;background:#fff}
.kg-khoi.kg-dao .kg-anh{order:2}
.kg-anh{position:relative;overflow:hidden}
.kg-anh picture{height:100%;min-height:400px}
.kg-anh img{width:100%;height:100%;min-height:400px;object-fit:cover}
/* Khối nhà hàng: đặt cạnh nhau một ảnh khu trong nhà và một ảnh khu ngoài trời */
.kg-anh-doi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
.kg-anh-doi figure{position:relative;margin:0;overflow:hidden}
.kg-anh-doi picture,.kg-anh-doi img{height:100%;min-height:400px}
.kg-nhan{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,rgba(26,14,20,0) 0%,rgba(26,14,20,.78) 72%);
  color:#fff;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;font-weight:500
}
.kg-so{position:absolute;left:28px;top:20px;font-family:var(--serif);font-size:66px;line-height:1;color:rgba(255,255,255,.85)}
.kg-khoi.kg-dao .kg-so{left:auto;right:28px}
.kg-chu{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:48px 56px}
.kg-chu h3{font-size:34px;line-height:1.2}
.kg-chu p{font-size:15.5px;line-height:1.85;color:#5C4A52;font-weight:300}
.kg-that{color:var(--chu-nhat)!important;font-size:14px!important}
.kg-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:6px;padding-top:16px;border-top:1px solid var(--vien);font-size:13px;color:var(--chu-nhat)}
.kg-bang{position:relative;margin-top:56px;overflow:hidden}
.kg-bang img{width:100%;height:430px;object-fit:cover}
.kg-bang::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,14,20,.88) 0%,rgba(26,14,20,.55) 58%,rgba(26,14,20,.22) 100%)}
.kg-bang-chu{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 56px;max-width:640px}
.kg-bang-chu .kg-so{position:static;color:rgba(255,255,255,.55)}
.kg-bang-chu .eyebrow{color:#E6C97A}
.kg-bang-chu h3{font-size:34px;line-height:1.2;color:#fff}
.kg-bang-chu p{font-size:15.5px;line-height:1.85;color:#E3D5CE;font-weight:300}

/* Video khách sạn */
.video-tour{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.5fr);gap:64px;align-items:center;background:#fff}
.video-noi p{font-size:15.5px;line-height:1.85;color:#5C4A52;font-weight:300;margin:22px 0}
.video-luoi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.video-the{margin:0;padding:10px;background:var(--nau);box-shadow:var(--treo)}
.video-the video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#1A0E14}
.video-the figcaption{padding:14px 8px 7px;color:#E8DDD5;font-size:13.5px;line-height:1.5;text-align:center}

/* Bộ sưu tập */
.bosuutap{background:var(--nau)}
.bosuutap .sec-title{color:var(--kem)}
.bosuutap .eyebrow{color:#E6C97A}
.bosuutap .rule{background:var(--vang)}
.bst-mo{font-size:14.5px;line-height:1.8;color:#C9B7BF;font-weight:300;max-width:420px}
.bst-loc{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.bst-loc button{min-height:44px;padding:0 18px;background:none;border:1px solid #57424B;color:#D8C8CF;font-family:var(--sans);font-size:13.5px;cursor:pointer;border-radius:2px;-webkit-tap-highlight-color:transparent;transition:background-color var(--nhanh) var(--duong),border-color var(--nhanh) var(--duong),color var(--nhanh) var(--duong)}
.bst-loc button[aria-pressed="true"]{background:var(--vang);border-color:var(--vang);color:var(--nau);font-weight:600}
.bst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px;transition:opacity var(--nhanh) var(--duong-vao-ra)}
.bst.dang-loc{opacity:.25}
.bst a{display:block;overflow:hidden;position:relative;background:#412F37}
.bst img{width:100%;height:196px;object-fit:cover;transition:transform .45s var(--duong)}
.bst-nhan{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;font-size:12px;color:#fff;background:linear-gradient(180deg,rgba(26,14,20,0) 0%,rgba(26,14,20,.78) 100%);opacity:0;transition:opacity var(--nhanh) var(--duong)}
.bst a:focus-visible img{transform:scale(var(--phong-bst))}
.bst a:focus-visible .bst-nhan{opacity:1}
.bst-them{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.bst-them .btn-toi{border-color:#7A626C;color:#E8DDD5}
.bst-dem{font-size:13px;color:#A3909A}
.bst-trong{grid-column:1/-1;padding:34px 0;text-align:center;color:#A3909A;font-size:14px}

/* Nhận xét */
.nhanxet{background:#fff}
.diem-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px}
.diem{display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 26px;background:var(--nga);border:1px solid var(--vien);text-align:center}
.diem .kenh{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--chu-nhat);font-weight:500}
.diem b{font-family:var(--serif);font-size:52px;line-height:1;color:var(--do);font-weight:400}
.diem b i{font-style:normal;font-size:24px;color:var(--chu-nhat)}
.diem small{font-size:13px;color:var(--chu-phu)}
.diem b{position:relative}
/* Gạch vàng vẽ ra dưới điểm số, sau khi con số đã dừng quay */
.diem b::after{content:"";position:absolute;left:22%;right:22%;bottom:-7px;height:2px;background:var(--vang);transform:scaleX(1);transform-origin:center}
.hangmuc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--vien);margin-top:20px}
.hangmuc div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:22px 12px;border-right:1px solid #F1E7DE}
.hangmuc div:last-child{border-right:0}
.hangmuc b{font-size:22px;font-weight:600}
.hangmuc small{font-size:12.5px;color:#7A6670}
/* Thanh điểm chạy: biến bốn con số trần thành một phép so sánh nhìn được ngay.
   Bề ngang chạy bằng scaleX của lớp giả nên không đụng tới bố cục. */
.thanh{display:block;position:relative;width:100%;max-width:104px;height:3px;margin-top:7px;background:#EFE4DA;overflow:hidden}
.thanh::after{content:"";position:absolute;inset:0;background:var(--vang);transform:scaleX(var(--muc,1));transform-origin:left center}
.yk-luoi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.yk{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 26px;background:var(--nga);border:1px solid var(--vien);transition:transform var(--vua) var(--duong)}
/* Dấu ngoặc kép lớn nằm sau chữ, cho khối nhận xét có dáng một trang tạp chí */
.yk::before{content:"”";position:absolute;right:16px;top:0;z-index:0;font-family:var(--serif);font-size:96px;line-height:1;color:#F1E5DC;pointer-events:none}
/* Bóng dựng sẵn ở lớp giả, rê chuột chỉ đổi độ mờ — xem ghi chú ở .the */
.yk::after{content:"";position:absolute;inset:0;z-index:0;box-shadow:var(--treo);opacity:0;pointer-events:none;transition:opacity var(--vua) var(--duong)}
.yk>*{position:relative;z-index:1}
.yk:focus-within::after{opacity:1}
.sao{display:flex;gap:4px}
.sao svg{display:block}
.yk p{font-size:14px;line-height:1.8;color:var(--chu-phu);font-weight:300}
.yk .ai{margin-top:auto;font-size:12.5px;color:var(--chu-nhat)}
.nx-ghi{max-width:760px;margin:24px auto 0;text-align:center;font-size:13px;line-height:1.75;color:var(--chu-nhat)}

/* Vị trí */
.vitri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.khoangcach{border-top:1px solid #E7DAD1;margin:8px 0}
.khoangcach li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid #E7DAD1;font-size:14.5px;color:#5C4A52}
.khoangcach b{color:var(--chu);font-weight:600;text-align:right}
.map{width:100%;height:420px;border:1px solid #DFD2C7;background:#E9E0D6}
/* Nút chờ có đúng kích thước của bản đồ nên khi đổi sang iframe không lệch một pixel */
.map-cho{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;font-family:var(--sans);transition:border-color var(--nhanh) linear,background-color var(--nhanh) linear;-webkit-tap-highlight-color:transparent}
.map-tieu{font-family:var(--serif);font-size:23px;color:var(--chu);max-width:320px;text-align:center;line-height:1.3}
.map-phu{font-size:13px;color:var(--chu-phu);transition:color var(--nhanh) linear}

/* Liên hệ */
.lienhe{background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.gio{display:flex;align-items:center;gap:34px;flex-wrap:wrap;padding:16px 20px;background:var(--nga);border:1px solid var(--vien);margin:4px 0 8px}
.gio small{display:block;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--chu-nhat);font-weight:500;margin-bottom:3px}
.gio b{font-family:var(--serif);font-size:28px;line-height:1.1;font-weight:400}
.gio i{width:1px;height:38px;background:#E7DAD1;display:block}
.tt{display:flex;flex-direction:column;gap:16px;margin:6px 0}
.tt a,.tt span{position:relative;display:flex;align-items:center;gap:13px;font-size:15.5px;color:var(--chu);font-weight:500;overflow-wrap:anywhere}
.tt a::after{content:"";position:absolute;left:32px;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform var(--nhanh) var(--duong)}
.tt a:focus-visible::after{transform:scaleX(1)}
.chat{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.chat a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:2px;color:#fff;font-size:14px;font-weight:600;transition:transform var(--nhanh) var(--duong),filter var(--nhanh) linear}
.chat a:hover{color:#fff;filter:brightness(1.08)}
.chat .zalo{background:#0068FF}
.chat .mes{background:#0084FF}
.form{display:flex;flex-direction:column;gap:16px;padding:34px 32px;background:var(--nga);border:1px solid var(--vien)}
.form h3{font-size:26px;margin-bottom:4px}
.doi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form input,.form textarea{width:100%;min-height:48px;padding:12px 14px;background:#fff;border:1px solid #E4D6CC;border-radius:2px;font-family:var(--sans);font-size:14px;color:var(--chu);transition:border-color var(--nhanh) linear}
.form textarea{min-height:118px;resize:vertical}
.form input:focus,.form textarea:focus{outline:var(--vien-focus) solid var(--do);outline-offset:-2px;border-color:var(--do)}
.form .ghi{display:flex;flex-wrap:wrap;align-items:center;gap:9px;min-height:56px;font-size:12px;line-height:1.7;color:var(--chu-nhat);transition:opacity var(--nhanh) var(--duong)}
.form .ghi.nhac{color:var(--do)}
.form .ghi a,.form .ghi button{font-size:12px;font-weight:600;color:var(--do);background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);text-decoration:underline}

/* Tuyển dụng */
.tuyendung{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:64px;align-items:center;background:var(--kem)}
.tuyendung p{font-size:15px;line-height:1.85;color:#5C4A52;font-weight:300;margin-bottom:18px}
.td-anh img{width:100%;height:340px;object-fit:cover}

/* Footer */
.footer{background:#2A1D23;padding:56px var(--ngang) 30px;color:#B5A2AB}
.footer a{color:#B5A2AB;transition:color var(--nhanh) linear}
.ft-luoi{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:48px}
.footer img.logo{height:62px;width:auto;filter:brightness(1.25);margin-bottom:16px}
.footer h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#E6C97A;font-weight:500;margin:0 0 13px}
.footer li{margin-bottom:11px;font-size:13.5px;overflow-wrap:anywhere}
.footer p{font-size:13.5px;line-height:1.8;font-weight:300}
.ft-duoi{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid #43333A;font-size:12.5px;color:#8C7A83}
.ft-duoi a{color:#6F5F67;font-size:12.5px}

/* Nút nổi + CTA đáy */
.fab{position:fixed;right:14px;bottom:16px;z-index:950;display:flex;flex-direction:column;gap:10px;transition:bottom var(--vua) var(--duong-vao-ra)}
.fab a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:700 14px/1 var(--sans);box-shadow:0 3px 12px rgba(0,0,0,.3);transition:transform var(--nhanh) var(--duong)}
.fab .zalo{background:#0068FF}
.fab .mes{background:#0084FF}
/* Nút gọi điện dùng màu xanh lá để khách phân biệt ngay với nút đặt phòng màu đỏ */
.fab .goi{background:#1FA855}
.fab .fb{background:#1877F2}
.cta-day{display:none;position:fixed;left:0;right:0;bottom:0;z-index:940;grid-template-columns:1fr 1.25fr;gap:1px;background:#E4D6CC;box-shadow:0 -4px 18px rgba(52,37,44,.16)}
.cta-day a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:62px;font-size:15px;font-weight:600}
.cta-day .goi{background:#fff;color:var(--nau)}
.cta-day .dat{background:var(--do);color:#fff}

/* Khung xem ảnh lớn */
/* Hộp thoại luôn nằm trong trang, chỉ đổi độ mờ. visibility được tách thành
   một class riêng do JS bật/tắt thay vì cho nó chạy transition: như vậy nút
   Đóng nhận được tiêu điểm bàn phím ngay ở dòng lệnh tiếp theo, không phải
   chờ một khung hình. Thiếu visibility thì tấm nền phủ kín màn hình vẫn nằm
   trong luồng tiêu điểm dù đang vô hình. */
.lb{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;gap:14px;
  background:rgba(26,14,20,.92);padding:24px;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--vua) var(--duong);
}
.lb.dung-duoc{visibility:visible}
.lb.mo{opacity:1;pointer-events:auto}
/* Bề ngang khung ảnh phải TRỪ ĐI phần cứng hai bên: 24px đệm × 2 + nút 52px × 2
   + khe 14px × 2 = 180px. Để 88vw như cũ thì ở cửa sổ hẹp hơn ~1500px, hai nút
   mũi tên bị đẩy ra ngoài mép màn hình. min-width:0 để khung chịu co lại. */
.lb-khung{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw, calc(100vw - 190px));transform:scale(var(--phong-lb));transition:transform var(--vua) var(--duong)}
.lb.mo .lb-khung{transform:none}
.lb-khung img{max-width:100%;max-height:78vh;object-fit:contain;transition:opacity var(--nhanh) var(--duong)}
.lb-khung.dang-doi img{opacity:0}
.lb-khung figcaption{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:#D8C8CF}
.lb-dem{color:#A3909A}
.lb-phim{color:#8C7A83;font-size:12.5px}
.lb .lb-truoc,.lb .lb-sau{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid rgba(255,255,255,.34);color:#fff;background:none;cursor:pointer;transition:border-color var(--nhanh) linear,color var(--nhanh) linear,transform var(--nhanh) var(--duong)}
.lb .lb-truoc:active,.lb .lb-sau:active{transform:scale(.94)}
.lb .lb-dong{position:absolute;top:18px;right:18px;width:48px;height:48px;background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:color var(--nhanh) linear,transform var(--nhanh) var(--duong)}

/* ================== 4. CƠ CHẾ CHUYỂN ĐỘNG DÙNG CHUNG ==================
   Mọi luật ẩn nội dung đều nằm dưới html.js. Nếu tệp JS bị chặn thì class
   .js được main.js gỡ đi (và nếu cả main.js không chạy, vẫn còn chốt hẹn giờ
   3 giây bên trong nó) — trang không bao giờ trắng vì chuyển động. */

@keyframes ciao-len{from{opacity:0;transform:translate3d(0,var(--dich),0)}to{opacity:1;transform:none}}
@keyframes ciao-nang-h1{from{transform:translate3d(0,var(--dich-nho),0)}to{transform:none}}
@keyframes ciao-ke{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ciao-bia{from{transform:scale(var(--phong-bia))}to{transform:scale(1)}}

/* Hiện khi cuộn tới */
html.js [data-hien]{
  opacity:0;transform:translate3d(0,var(--dich),0);
  transition:opacity var(--cham) var(--duong-man),transform var(--cham) var(--duong-man);
  transition-delay:calc(var(--i,0) * var(--tre));
}
html.js [data-hien].hien{opacity:1;transform:none}
html.js [data-hien].hien .rule{animation:ciao-ke .7s var(--duong) both}
/* Thẻ phòng chỉ mờ dần chứ không trượt lên: transform của nó đã dành cho cú
   nhấc khi rê chuột, hai thứ dùng chung một thuộc tính thì phải dùng chung
   một thời lượng, mà nhấc 3px trong 0,62 giây thì nặng nề. */
html.js .the[data-hien]{transform:none;transition:opacity var(--cham) var(--duong-man),transform var(--vua) var(--duong)}
.dv-giua .tag .rule:last-of-type{transform-origin:right center}

/* Khối Không gian: ảnh và chữ vào từ hai phía */
html.js .kg-khoi .kg-anh[data-hien]{transform:translate3d(calc(var(--dich-ngang) * -1),0,0);transition-duration:var(--rat-cham)}
html.js .kg-khoi .kg-chu[data-hien]{transform:translate3d(var(--dich-ngang),0,0);transition-duration:var(--rat-cham)}
html.js .kg-khoi.kg-dao .kg-anh[data-hien]{transform:translate3d(var(--dich-ngang),0,0)}
html.js .kg-khoi.kg-dao .kg-chu[data-hien]{transform:translate3d(calc(var(--dich-ngang) * -1),0,0)}
html.js .kg-khoi .kg-anh[data-hien].hien,html.js .kg-khoi .kg-chu[data-hien].hien{transform:none}
/* Con số khu vực lắng xuống sau khi ảnh đã yên vị */
html.js [data-hien] .kg-so{opacity:0;transform:translate3d(0,10px,0);transition:opacity var(--cham) var(--duong-man) .24s,transform var(--cham) var(--duong-man) .24s}
html.js [data-hien].hien .kg-so{opacity:1;transform:none}

/* --- Số quay rồi dừng lại ---------------------------------------------
   Mỗi chữ số được thay bằng một ô nhỏ che khuất, bên trong là cột 0–9 lặp hai
   vòng rồi tới con số thật. Cột trượt lên đúng hai vòng rồi dừng, mỗi chữ số
   dừng trễ hơn chữ số trước một nhịp — giống mặt đồng hồ cây xăng.
   Mọi mảnh (kể cả dấu phẩy, chữ "m", "sao") đều là ô cùng chiều cao căn theo
   mép trên, nhờ vậy không phải tính toán đường chân chữ. */
.quay,.quay-yen{display:inline-block;height:1em;line-height:1em;vertical-align:top}
.quay{overflow:hidden}
.quay-cot{display:block;transform:translate3d(0,0,0)}
.quay-cot>span{display:block;height:1em;line-height:1em}
html.js .quay.chay .quay-cot{
  transform:translate3d(0,-20em,0);
  transition:transform 1.25s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
/* Bản chữ dành cho trình đọc màn hình: có mặt trong trang nhưng không chiếm chỗ */
.an-mat{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- Màn che trượt qua để lộ ảnh ---------------------------------------
   Một tấm màn cùng màu nền trượt ngang khỏi khung, ảnh bên dưới đồng thời
   trôi ngược lại một đoạn ngắn — cảm giác ảnh vừa trượt vào đúng chỗ. */
html.js [data-lo]{position:relative;overflow:hidden}
html.js [data-lo]::after{
  content:"";position:absolute;inset:0;z-index:3;background:var(--man,var(--kem));
  transform:translate3d(0,0,0);
  transition:transform var(--rat-cham) var(--duong-man);
}
html.js [data-lo].hien::after{transform:translate3d(101%,0,0)}
html.js [data-lo] img{transform:scale(1.06) translate3d(-2.5%,0,0);transition:transform calc(var(--rat-cham) * 1.5) var(--duong-man)}
html.js [data-lo].hien img{transform:none}
/* Khối ảnh nằm bên phải thì màn trượt ngược lại cho cân */
html.js .kg-dao [data-lo]::after,html.js [data-lo].lo-trai::after{transform-origin:right center}
html.js .kg-dao [data-lo].hien::after,html.js [data-lo].lo-trai.hien::after{transform:translate3d(-101%,0,0)}
html.js .kg-dao [data-lo] img{transform:scale(1.06) translate3d(2.5%,0,0)}
/* Khối có màn che thì thôi kiểu trôi lên của [data-hien], hai thứ đá nhau */
html.js [data-hien][data-lo]{opacity:1;transform:none}
html.js .kg-khoi .kg-anh[data-hien][data-lo]{transform:none}
.gt-anh{--man:var(--kem)}
.kg-khoi .kg-anh{--man:#fff}
.kg-bang picture{--man:var(--nga)}
.td-anh{--man:var(--kem)}

/* --- Mục Nhận xét: bốn nhịp nối nhau ---------------------------------- */
/* 1. Gạch vàng vẽ ra dưới ba điểm số lớn, chờ con số dừng quay mới vẽ */
html.js .diem[data-hien] b::after{transform:scaleX(0);transition:transform .75s var(--duong-man) 1s}
html.js .diem[data-hien].hien b::after{transform:scaleX(1)}
/* 2. Bốn thanh điểm chạy lần lượt từ trái sang */
html.js [data-hien] .thanh::after{transform:scaleX(0);transition:transform 1.15s var(--duong-man);transition-delay:calc(var(--i,0) * 130ms + .2s)}
html.js [data-hien].hien .thanh::after{transform:scaleX(var(--muc,1))}
/* 3. Dấu ngoặc kép lớn dâng lên sau khi ô nhận xét đã hiện */
html.js .yk[data-hien]::before{opacity:0;transform:translate3d(0,8px,0) scale(.92);transition:opacity .85s var(--duong-man) .3s,transform .85s var(--duong-man) .3s}
html.js .yk[data-hien].hien::before{opacity:1;transform:none}
/* Ô nhận xét chỉ mờ dần chứ không trôi lên: transform của nó để dành cho cú
   nhấc khi rê chuột, hai thứ dùng chung một thuộc tính thì phải chung thời lượng */
html.js .yk[data-hien]{transform:none;transition:opacity var(--cham) var(--duong-man),transform var(--vua) var(--duong)}

/* 4. Năm ngôi sao sáng lần lượt */
html.js .yk[data-hien] .sao svg{opacity:0;transform:scale(.8);transition:opacity var(--vua) var(--duong),transform var(--vua) var(--duong)}
html.js .yk[data-hien].hien .sao svg{opacity:1;transform:none}
html.js .yk[data-hien].hien .sao svg:nth-child(1){transition-delay:.06s}
html.js .yk[data-hien].hien .sao svg:nth-child(2){transition-delay:.13s}
html.js .yk[data-hien].hien .sao svg:nth-child(3){transition-delay:.2s}
html.js .yk[data-hien].hien .sao svg:nth-child(4){transition-delay:.27s}
html.js .yk[data-hien].hien .sao svg:nth-child(5){transition-delay:.34s}

/* Mở màn ảnh bìa — thuần CSS, không chờ JS.
   Riêng h1 chỉ dịch chứ KHÔNG mờ: trên màn hình hẹp nó có thể chính là phần tử
   lớn nhất màn đầu, cho nó mờ dần là tự làm chậm điểm đo tốc độ của mình. */
.hero-noi>.tag,.hero-noi>p,.hero-noi>.hero-nut{animation:ciao-len var(--cham) var(--duong-man) both}
.hero-noi>h1{animation:ciao-nang-h1 var(--cham) var(--duong-man) both}
.hero-noi>.tag{animation-delay:.26s}
.hero-noi>h1{animation-delay:.35s}
.hero-noi>p:not(.hero-diem){animation-delay:.44s}
.hero-noi>.hero-diem{animation-delay:.53s}
.hero-noi>.hero-nut{animation-delay:.62s}
.dp-boc{animation:ciao-len var(--cham) var(--duong-man) both;animation-delay:.30s}

/* Ken Burns rất nhẹ cho ảnh bìa: chạy MỘT lần, chỉ trên máy tính, và chỉ sau
   khi JS xác nhận ảnh đã vẽ xong — để không tranh tài nguyên đúng lúc đo LCP. */
@media(min-width:861px){
  html.js .hero img.chay{animation:ciao-bia var(--kenburns) var(--duong-man) forwards}
}

/* Ảnh bộ sưu tập hiện dần đúng lúc giải mã xong, thay vì bật ra từng cái */
html.js .bst a>picture img{opacity:0;transition:opacity var(--cham) var(--duong)}
html.js .bst a>picture img.xong{opacity:1}
html.js .bst a{animation:ciao-len .34s var(--duong) both;animation-delay:calc(var(--i,0) * var(--tre-anh))}

/* Nút nổi và thanh CTA đáy chỉ xuất hiện sau khi khách rời ảnh bìa */
html.js .fab{opacity:0;transform:translate3d(10px,0,0);pointer-events:none;transition:opacity var(--vua) var(--duong),transform var(--vua) var(--duong),bottom var(--vua) var(--duong-vao-ra)}
html.js .fab.hien{opacity:1;transform:none;pointer-events:auto}
html.js body.mo-anh .fab{opacity:0;pointer-events:none}
html.js .cta-day{transform:translate3d(0,100%,0);transition:transform var(--vua) var(--duong-vao-ra)}
html.js body.qua-hero .cta-day{transform:none}
html.js body.o-form .cta-day{transform:translate3d(0,100%,0)}

/* ============================ 5. MÀN HÌNH NHỎ ============================ */

/* Máy tính bảng */
@media(max-width:1180px){
  :root{--ngang:48px}
  .hero h1{font-size:50px;max-width:620px}
  .phong-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-tour{gap:44px}
  .ft-luoi{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
}

/* Menu thu về nút ba gạch từ 1090px trở xuống — KHÔNG phải 860px.
   Tám mục menu cộng logo và nút Đặt phòng cần khoảng 1090px; dưới ngưỡng đó
   chữ trong mục bị bẻ xuống hai dòng (iPad nằm ngang, laptop 1024, cửa sổ chia
   đôi màn hình). Từ 861 đến 1090px vẫn giữ nút "Đặt phòng" trên header. */
@media(max-width:1090px){
  .menu-nut{display:flex}
  /* Mở/đóng bằng opacity + visibility + transform.
     Bản cũ dùng max-height:0 — vừa bắt trình duyệt tính lại bố cục mỗi khung
     hình, vừa để lọt tiêu điểm bàn phím vào 8 mục đang ẩn. */
  .nav{
    position:fixed;top:var(--cao-header);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--vien);box-shadow:0 10px 24px rgba(52,37,44,.12);
    opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
    transition:opacity var(--vua) var(--duong-vao-ra),transform var(--vua) var(--duong-vao-ra),visibility 0s var(--vua);
    /* Máy xoay ngang thì tám mục cao hơn cả màn hình: phải cho cuộn trong menu,
       nếu không ba mục cuối nằm ngoài màn hình và không cách nào tới được. */
    max-height:calc(100vh - var(--cao-header));
    max-height:calc(100dvh - var(--cao-header));
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav.mo{opacity:1;visibility:visible;transform:none;transition:opacity var(--vua) var(--duong-vao-ra),transform var(--vua) var(--duong-vao-ra),visibility 0s 0s}
  .nav a{padding:15px 18px;border-bottom:1px solid var(--vien);font-size:15px}
  .nav a::after{display:none}
  .nav a.on{border-bottom:1px solid var(--vien)}
}

/* Điện thoại */
@media(max-width:860px){
  :root{
    --ngang:18px;
    --cao-header:64px;
    --dich:10px;
    --dich-ngang:0px;   /* khối Không gian về một cột, trượt ngang mất nghĩa */
  }
  body{padding-bottom:62px}
  .topbar{display:none}
  .header img.logo{height:42px}
  .header .btn-chinh{display:none}
  .sec{padding:44px var(--ngang)}
  /* Trên điện thoại, nội dung ảnh bìa cao hơn 440 px nên nếu khoá cứng chiều
     cao thì dòng đầu của tiêu đề bị cắt mất. Để khối tự cao theo chữ. */
  .hero{height:auto;min-height:520px}
  .hero::after{background:linear-gradient(180deg,rgba(26,14,20,.32) 0%,rgba(26,14,20,.74) 62%,rgba(26,14,20,.9) 100%)}
  .hero-noi{position:relative;inset:auto;justify-content:flex-end;padding:26px var(--ngang) 28px;gap:14px}
  .hero h1{font-size:31px;max-width:none;line-height:1.14}
  .h1-chao{font-size:.6em;margin-top:7px;letter-spacing:.6px}
  .hero p{font-size:14px}
  .hero-nut .btn{min-height:50px;padding:0 24px;font-size:14px}
  .sec-title{font-size:30px}
  .solieu{grid-template-columns:repeat(3,minmax(0,1fr))}
  .solieu div:nth-child(4){display:none}
  .solieu b{font-size:26px}
  .dp-boc{margin-top:-10px}
  .dp{flex-direction:column}
  .dp-o{border-right:0;border-bottom:1px solid var(--vien);padding:12px 18px}
  .dp-nut{flex:0 0 auto;min-height:52px}
  .dp-ghi{min-height:60px}
  /* minmax(0,1fr) chu khong phai 1fr: voi 1fr, be ngang toi thieu cua cot la
     min-content, nen mot chuoi dai khong ngat duoc (dia chi email) se noi rong
     ca cot va lam trang tran ngang tren may man hinh 320px. */
  .gioithieu,.vitri,.lienhe,.tuyendung,.video-tour{grid-template-columns:minmax(0,1fr);gap:32px}
  .gt-anh img{height:150px}
  .gt-anh picture:first-child img{height:220px}
  .phong-luoi{grid-template-columns:1fr;gap:18px;margin-top:28px}
  .kg-khoi{grid-template-columns:1fr;margin-top:30px}
  .kg-khoi.kg-dao .kg-anh{order:0}
  .kg-anh picture{min-height:0;height:230px}
  .kg-anh img{min-height:0;height:230px}
  /* Trên điện thoại, hai ảnh nhà hàng xếp trên dưới cho khỏi bị cắt chật */
  .kg-anh-doi{grid-template-columns:1fr}
  .kg-anh-doi figure,.kg-anh-doi picture,.kg-anh-doi img{height:210px;min-height:0}
  .kg-so{font-size:48px;left:18px;top:12px}
  .kg-khoi.kg-dao .kg-so{right:auto;left:18px}
  .kg-chu{padding:26px 20px;gap:12px}
  .kg-chu h3{font-size:25px}
  .kg-meta{gap:14px;font-size:12px}
  .kg-bang{margin-top:30px}
  .kg-bang img{height:460px}
  .kg-bang::after{background:linear-gradient(180deg,rgba(26,14,20,.3) 0%,rgba(26,14,20,.82) 60%,rgba(26,14,20,.92) 100%)}
  .kg-bang-chu{padding:0 20px 24px;justify-content:flex-end}
  .kg-bang-chu h3{font-size:25px}
  .video-noi p{font-size:14.5px;margin:18px 0}
  .video-luoi{gap:12px}
  .video-the{padding:7px}
  .video-the figcaption{padding:11px 4px 5px;font-size:12px}
  .bst{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
  .bst img{height:132px}
  .bst-nhan{opacity:1;font-size:11px;padding:20px 8px 7px}
  .bst-loc{gap:7px;margin-top:22px}
  .bst-loc button{padding:0 14px;font-size:12.5px}
  .diem-luoi,.yk-luoi{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .hangmuc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hangmuc div:nth-child(2){border-right:0}
  .map{height:300px}
  .map-tieu{font-size:20px}
  .form{padding:24px 20px}
  .doi{grid-template-columns:1fr}
  .td-anh img{height:260px}
  .ft-luoi{grid-template-columns:1fr;gap:28px}
  .fab{bottom:76px}
  html.js body.o-form .fab,html.js body:not(.qua-hero) .fab{bottom:16px}
  .cta-day{display:grid}
  /* Trên điện thoại hai nút mũi tên xuống hàng dưới, không còn chiếm chỗ hai
     bên ảnh nữa, nên khung ảnh lấy lại trọn bề ngang. */
  .lb{padding:12px;flex-wrap:wrap}
  .lb-khung{order:-1;width:100%;max-width:100%}
  .lb-khung img{max-width:94vw;max-height:66vh}
  .lb-phim{display:none}
  .bo-qua{left:8px}
}

@media(max-width:520px){
  .video-luoi{grid-template-columns:1fr;max-width:360px;margin:0 auto}
}

/* ================= 6. TÔN TRỌNG "GIẢM CHUYỂN ĐỘNG" =================
   Khối này phải nằm CUỐI file để thắng mọi khai báo phía trên.
   Dùng .01ms chứ không phải 0s là có chủ ý: sự kiện transitionend vẫn bắn nên
   đoạn JS đổi bộ lọc bộ sưu tập không treo chờ mãi mãi. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0s!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
  }
  html.js [data-hien]{opacity:1!important;transform:none!important}
  html.js [data-hien] .kg-so,html.js .yk[data-hien] .sao svg{opacity:1!important;transform:none!important}
  html.js [data-lo]::after{display:none!important}
  html.js [data-lo] img{transform:none!important}
  html.js [data-hien] .thanh::after{transform:scaleX(var(--muc,1))!important}
  html.js .diem[data-hien] b::after{transform:scaleX(1)!important}
  html.js .yk[data-hien]::before{opacity:1!important;transform:none!important}
  .yk:hover{transform:none!important}
  html.js .bst a>picture img{opacity:1!important}
  html.js .bst a{animation:none!important}
  .hero-noi>*,.hero img{animation:none!important;transform:none!important}
  .the:hover,.btn:hover,.fab a:hover{transform:none!important}
  .btn:active{transform:translate3d(0,1px,0)!important}
}