/* ══════════════════════════════════════════════════════════════════════════
   JIN HEALING — NỬA DƯỚI, hướng "spa khách sạn nghỉ dưỡng 5 sao"
   Tĩnh · sâu · tối · ít ồn. Vàng kim CHỈ dùng cho đường kẻ mảnh và con số.
   Tự chứa: mọi biến khai ở .ks nên file dùng được kể cả khi :root đổi.
   Mọi lớp bắt đầu bằng "ks-" để không đụng CSS nửa trên (.combo .le .gal .why .lh).
   ══════════════════════════════════════════════════════════════════════════ */

.ks{
  /* nền tối chia 3 độ sâu — có nhịp chứ không đều một màu */
  --ks-den:#080F05;      /* sâu nhất: câu trích + chân trang */
  --ks-toi:#0D1A09;      /* combo + dải ảnh */
  --ks-toi2:#101C0C;     /* liên hệ */
  --ks-kem:#F7F3EA;
  --ks-kem2:#EFE9DB;
  --ks-vang:#C0A062;
  --ks-vangs:#D8BD86;
  --ks-chu:#222C1E;
  --ks-chumo:#5A6350;
  --ks-sang:#EFE9DB;
  --ks-sangmo:rgba(239,233,219,.58);
  --ks-net:rgba(192,160,98,.32);    /* hairline gold — KHÔNG bao giờ tô mảng */
  --ks-netmo:rgba(192,160,98,.15);
  --ks-tit:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --ks-than:'Be Vietnam Pro',-apple-system,system-ui,sans-serif;
  --ks-mem:cubic-bezier(.16,.84,.24,1);   /* easing mềm, không nảy */
  --ks-le:clamp(22px,5vw,64px);
  position:relative;
  background:var(--ks-toi);
  font-family:var(--ks-than);
  /* KHÔNG đặt overflow ở đây: thanh gọi dùng position:sticky, ancestor
     có overflow là Safari iOS giết sticky ngay. */
}
.ks *{box-sizing:border-box}
.ks picture{display:contents}   /* để <img> thành con trực tiếp của grid/khối định vị */

/* ── khung trong: một chiều rộng duy nhất cho cả nửa dưới ── */
.ks-trong{max-width:1180px;margin:0 auto;padding-inline:var(--ks-le)}

/* ── mục: khoảng thở rộng gấp đôi web thường ── */
.ks-muc{padding-block:clamp(86px,13vw,192px);position:relative}
.ks-toi{background:var(--ks-toi);color:var(--ks-sang)}
.ks-kem{background:var(--ks-kem);color:var(--ks-chu)}

/* ── chữ nhỏ: RẤT nhỏ và giãn rất rộng, đây là chỗ "đắt tiền" nằm ── */
.ks-mi{display:block;font-size:10px;letter-spacing:.44em;text-transform:uppercase;
  color:var(--ks-vang);font-weight:400;margin-bottom:clamp(22px,3vw,34px)}
.ks-kem .ks-mi{color:#6E5A22}

/* ── tiêu đề: serif, to khác thường, mảnh ── */
.ks-h2{font-family:var(--ks-tit);font-weight:300;line-height:1.02;
  font-size:clamp(40px,6.6vw,84px);letter-spacing:.005em;margin:0}
.ks-toi .ks-h2{color:#fff}
.ks-kem .ks-h2{color:#16240F}
.ks-dan{margin-top:clamp(18px,2.4vw,26px);max-width:34em;font-size:14.5px;
  line-height:1.95;font-weight:300}
.ks-toi .ks-dan{color:var(--ks-sangmo)}
.ks-kem .ks-dan{color:var(--ks-chumo)}

/* đầu mục: một cột hẹp, lệch trái — trang nghỉ dưỡng không căn giữa tất cả */
.ks-dau{max-width:760px;margin-bottom:clamp(54px,7vw,104px)}
.ks-dau-giua{max-width:640px;margin-inline:auto;text-align:center}

/* đường kẻ mảnh 1px — hình thức "vàng kim tiết chế" duy nhất được dùng */
.ks-ke{display:block;height:1px;background:var(--ks-net);border:0;margin:0}

/* ══ 1 · COMBO GỘI ĐẦU VUA — mỗi gói một khối trọn chiều ngang ══ */
.ks-combo{position:relative;overflow:hidden;border-top:1px solid var(--ks-netmo)}
.ks-combo:last-of-type{border-bottom:1px solid var(--ks-netmo)}
.ks-combo-anh{position:absolute;inset:0;z-index:0}
.ks-combo-anh img{width:100%;height:100%;object-fit:cover;
  /* ảnh phòng chỉ là chất nền: hạ màu và ghìm sáng để chữ kem nổi hẳn lên */
  filter:saturate(.45) contrast(1.02) brightness(.46);
  transform:scale(1.04)}
.ks-combo-anh:after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,15,5,.95) 0%,rgba(8,15,5,.89) 42%,rgba(8,15,5,.72) 100%)}
.ks-combo-trong{position:relative;z-index:1;max-width:1180px;margin:0 auto;
  padding:clamp(52px,7vw,104px) var(--ks-le);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(34px,5vw,80px);align-items:start}

.ks-so{font-family:var(--ks-tit);font-size:13px;letter-spacing:.5em;
  color:var(--ks-vang);display:block;margin-bottom:18px}
.ks-gio{font-family:var(--ks-tit);font-weight:300;color:#fff;line-height:.92;
  font-size:clamp(52px,8vw,108px);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1}
.ks-gio em{font-style:normal;font-family:var(--ks-than);font-weight:300;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ks-sangmo);display:block;margin-top:14px}
.ks-gia-to{font-family:var(--ks-tit);font-weight:300;color:var(--ks-vangs);
  font-size:clamp(34px,4.6vw,58px);line-height:1;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;
  margin-top:clamp(22px,3vw,34px)}
.ks-gia-to small{font-family:var(--ks-than);font-size:.34em;letter-spacing:.06em;
  color:rgba(216,189,134,.7);margin-left:3px}
.ks-combo .ks-ke{margin-top:clamp(22px,3vw,32px);max-width:120px}

/* nhãn "được chọn nhiều nhất": chữ nhỏ + gạch chân mảnh, KHÔNG phải mảng vàng đặc */
.ks-nhan{display:inline-block;margin-top:22px;font-size:9.5px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--ks-vangs);padding-bottom:7px;
  border-bottom:1px solid var(--ks-net)}

/* các bước trong gói — chấm gold nhỏ, giãn dòng rộng */
.ks-buoc{list-style:none;margin:0;padding:0}
.ks-buoc li{position:relative;padding:clamp(11px,1.5vw,15px) 0 clamp(11px,1.5vw,15px) 30px;
  font-size:15px;font-weight:300;color:rgba(239,233,219,.86);line-height:1.6;
  border-bottom:1px solid rgba(192,160,98,.11)}
.ks-buoc li:last-child{border-bottom:0}
.ks-buoc li:before{content:"";position:absolute;left:0;top:50%;margin-top:-2.5px;
  width:5px;height:5px;background:var(--ks-vang);border-radius:50%}

/* hai dòng ghi chú giá — VAT đứng riêng một dòng cho khỏi lẫn */
.ks-ghi{margin-top:clamp(40px,5vw,66px);display:flex;flex-direction:column;
  gap:12px;align-items:flex-start}
.ks-ghi span{font-size:12.5px;letter-spacing:.1em;color:var(--ks-sangmo);font-weight:300}
.ks-ghi .ks-vat{color:var(--ks-vangs);letter-spacing:.2em;font-size:11px;
  text-transform:uppercase;padding-top:12px;border-top:1px solid var(--ks-netmo);
  align-self:stretch;max-width:520px}

/* ══ 2 · CÂU TRÍCH — một màn hình chỉ nói một ý ══ */
.ks-trich{background:var(--ks-den);color:#fff;text-align:center;
  padding-block:clamp(110px,18vw,250px)}
.ks-trich .ks-ke{max-width:64px;margin-inline:auto}
.ks-trich-chu{font-family:var(--ks-tit);font-style:italic;font-weight:300;
  font-size:clamp(38px,8.4vw,126px);line-height:1.04;letter-spacing:.005em;
  margin:clamp(42px,6vw,76px) 0;color:#fff}
.ks-trich-chu em{display:block;font-style:italic;color:var(--ks-vangs)}
.ks-trich-zh{font-family:var(--ks-tit);font-size:clamp(15px,2vw,22px);
  letter-spacing:.7em;text-indent:.7em;color:rgba(216,189,134,.62);
  margin-bottom:clamp(42px,6vw,76px);font-weight:300}

/* ══ 3 · BẢNG GIÁ LẺ — thực đơn nhà hàng fine-dining trong khung hairline ══ */
.ks-khung{border:1px solid rgba(192,160,98,.34);
  padding:clamp(30px,5vw,74px) clamp(24px,4.4vw,66px);background:rgba(255,255,255,.34)}
.ks-thuc-don{display:grid;grid-template-columns:1fr;column-gap:clamp(44px,6vw,90px);
  list-style:none;margin:0;padding:0}
.ks-mon{display:grid;grid-template-columns:auto minmax(18px,1fr) auto;
  align-items:baseline;column-gap:12px;row-gap:3px;
  padding-block:clamp(15px,2.2vw,25px)}
.ks-mon-ten{grid-column:1;font-family:var(--ks-tit);font-weight:500;
  font-size:clamp(17px,1.7vw,22px);color:#1C2A16;line-height:1.25}
/* dấu chấm THƯA nối — radial-gradient cho khoảng cách chấm kiểm soát được,
   border-dotted của trình duyệt dày và sít, nhìn rẻ */
.ks-mon-noi{grid-column:2;height:1px;transform:translateY(-4px);
  background-image:radial-gradient(circle,rgba(90,99,80,.55) 1px,transparent 1px);
  background-size:8px 1px;background-repeat:repeat-x;background-position:0 50%}
.ks-mon-gia{grid-column:3;font-family:var(--ks-tit);font-weight:500;
  font-size:clamp(20px,2.1vw,27px);color:#2F4A2A;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;
  white-space:nowrap}
.ks-mon-gia small{font-family:var(--ks-than);font-size:.5em;font-weight:300;
  color:var(--ks-chumo);letter-spacing:.04em}
.ks-mon-gio{grid-column:1/-1;grid-row:2;font-size:10px;letter-spacing:.32em;
  text-transform:uppercase;color:#6E5A22}
.ks-mon-gio em{font-style:normal}   /* <em> mặc định nghiêng — chữ nhỏ giãn rộng nghiêng nhìn rối */

/* ≥900px: 2 cột, đọc DỌC từng cột như thực đơn nhà hàng (không phải zig-zag ngang) */
@media(min-width:900px){
  /* 9 món chia 5 + 4: rows phải là 5, nếu để 4 thì món thứ 9 rơi sang cột thứ BA
     (grid tự đẻ cột ngầm) — cột đó chỉ có một dòng, nhìn như bị bỏ quên. */
  .ks-thuc-don{grid-auto-flow:column;grid-template-rows:repeat(5,auto);grid-template-columns:1fr 1fr}
  .ks-thuc-don .ks-mon:nth-child(n+6){padding-left:clamp(40px,5vw,72px);
    border-left:1px solid rgba(192,160,98,.24)}
}
.ks-chu-vat{margin-top:clamp(28px,4vw,44px);padding-top:clamp(20px,3vw,28px);
  border-top:1px solid rgba(192,160,98,.28);font-size:10.5px;letter-spacing:.28em;
  text-transform:uppercase;color:#6E5A22}

/* ══ 4 · DẢI ẢNH CHẠY CHẬM ══ */
.ks-kg{padding-bottom:clamp(86px,13vw,192px)}
.ks-bang{position:relative;overflow:hidden;margin-top:clamp(46px,6vw,80px)}
/* mép trái/phải tan vào nền — dải ảnh trông như dài vô tận, không bị cắt cụt */
.ks-bang:before,.ks-bang:after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(36px,9vw,150px);z-index:2;pointer-events:none}
.ks-bang:before{left:0;background:linear-gradient(90deg,var(--ks-toi),rgba(13,26,9,0))}
.ks-bang:after{right:0;background:linear-gradient(270deg,var(--ks-toi),rgba(13,26,9,0))}
.ks-ray{display:flex;width:max-content;will-change:transform;
  animation:none}   /* chậm: 84 giây một vòng */
/* khách rê chuột hoặc CHẠM vào là dừng — .ks-dung do JS bật khi chạm */
.ks-bang:hover .ks-ray,.ks-bang:active .ks-ray,.ks-bang.ks-dung .ks-ray{animation-play-state:paused}
@keyframes ks-chay{to{transform:translate3d(-50%,0,0)}}
.ks-anh{flex:none;margin-right:clamp(10px,1.6vw,22px);position:relative}
/* khoá sẵn kích thước: đường ray không đổi độ dài khi ảnh tải xong → không giật */
.ks-anh img{width:clamp(232px,32vw,440px);height:clamp(188px,25vw,330px);
  object-fit:cover;display:block}

/* ══ 5 · VÌ SAO — cột số, cream, rất thoáng ══ */
.ks-vs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.4vw,52px)}
.ks-vs-it{padding-top:26px;border-top:1px solid rgba(192,160,98,.4)}
.ks-vs-so{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;font-family:var(--ks-tit);font-weight:300;font-size:clamp(30px,3.4vw,44px);
  color:var(--ks-vang);line-height:1;display:block;margin-bottom:18px}
.ks-vs-it h3{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1;font-family:var(--ks-tit);font-weight:500;font-size:clamp(19px,2vw,24px);
  color:#16240F;margin:0 0 10px;line-height:1.25}
.ks-vs-it p{margin:0;font-size:13.5px;line-height:1.85;color:var(--ks-chumo);font-weight:300}

/* ══ 6 · LIÊN HỆ ══ */
.ks-lh{background:var(--ks-toi2)}
.ks-lh-luoi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(44px,6vw,96px);align-items:start}
.ks-tin{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0}
.ks-tin li{padding-block:clamp(18px,2.4vw,26px);border-top:1px solid var(--ks-netmo)}
.ks-tin li:last-child{border-bottom:1px solid var(--ks-netmo)}
.ks-tin .k{font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--ks-vang);display:block;margin-bottom:11px}
.ks-tin .v{font-size:16px;font-weight:300;color:#fff;line-height:1.7}
.ks-tin a{color:#fff;text-decoration:none;border-bottom:1px solid var(--ks-net);
  padding-bottom:2px;transition:color .28s var(--ks-mem),border-color .9s var(--ks-mem)}
.ks-tin a:hover{color:var(--ks-vangs);border-color:var(--ks-vangs)}
.ks-tin .cho{color:var(--ks-vangs)}
/* nút đặt lịch: một đường viền gold mảnh, KHÔNG phải nút đặc */
.ks-nut{display:inline-flex;align-items:center;justify-content:center;
  margin-top:clamp(36px,4.6vw,52px);padding:19px clamp(28px,4vw,48px);
  border:1px solid var(--ks-net);color:var(--ks-vangs);text-decoration:none;
  font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:400;
  background:transparent;transition:background .28s var(--ks-mem),
    border-color .9s var(--ks-mem),color .9s var(--ks-mem)}
.ks-nut:hover{background:rgba(192,160,98,.1);border-color:var(--ks-vangs);color:#fff}
.ks-ban-do{width:100%;height:clamp(300px,42vw,520px);border:1px solid var(--ks-netmo);
  display:block;
  /* xám trước rồi đảo màu: bản đồ thành tối, không bị lòe màu như invert thẳng */
  filter:grayscale(1) invert(.92) contrast(.95) brightness(.82)}

/* ══ CHÂN TRANG ══ */
.ks-chan{background:var(--ks-den);color:rgba(239,233,219,.5);text-align:center;
  padding:clamp(58px,7vw,88px) 0 calc(104px + env(safe-area-inset-bottom,0px));
  font-size:12.5px;font-weight:300;letter-spacing:.06em;line-height:2}
.ks-chan-ten{font-family:var(--ks-tit);font-size:clamp(22px,2.6vw,30px);
  letter-spacing:.42em;text-indent:.42em;color:var(--ks-vang);margin-bottom:20px;font-weight:300}
.ks-chan a{color:rgba(216,189,134,.7);text-decoration:none;font-size:11px;letter-spacing:.2em}
.ks-chan a:hover{color:var(--ks-vangs)}

/* ══ THANH GỌI DÍNH ĐÁY — chỉ sống trong nửa dưới ══
   position:sticky trong .ks nên nó KHÔNG đè lên cảnh 3D nửa trên (BS không chê nửa trên).
   Thuần CSS + thẻ <a>: JS chết vẫn còn nút gọi. Chừa 88px bên phải cho nút Zalo tròn có sẵn. */
.ks-neo{position:sticky;bottom:0;height:0;z-index:65;pointer-events:none}
.ks-goi{position:absolute;left:16px;right:88px;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));pointer-events:auto;
  display:flex;align-items:center;justify-content:center;height:50px;
  background:rgba(10,18,7,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--ks-net);color:var(--ks-vangs);text-decoration:none;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  transition:background .28s var(--ks-mem),color .9s var(--ks-mem),opacity .35s,transform .35s}
/* 24/09: máy tính — đang cuộn thì thanh lặn đi cho khỏi đè chữ, dừng tay 0,65s là hiện lại */
.ks-goi.ks-goi-lan{opacity:0;transform:translateY(10px);pointer-events:none}
.ks-goi:hover{background:rgba(192,160,98,.16);color:#fff}
@media(min-width:760px){ .ks-goi{right:auto;padding-inline:34px} }

/* ══ HIỆN DẦN KHI CUỘN — chậm (1,05s) và ít ══
   Mặc định KHÔNG ẩn gì. Chỉ khi JS sống và gắn .ks-js mới cho phép ẩn,
   nên JS chết là nội dung hiện đủ ngay từ đầu. */
.ks-js .ks-vao{opacity:1;transform:translateY(14px);
  transition:opacity 1.05s var(--ks-mem),transform 1.05s var(--ks-mem);
  transition-delay:var(--d,0s)}
.ks-js .ks-vao.ks-ra{opacity:1;transform:none}

/* ══════════ MÁY TÍNH VỪA / MÁY TÍNH BẢNG ══════════ */
@media(max-width:1024px){
  .ks-vs{grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,48px)}
}
@media(max-width:899px){
  .ks-combo-trong{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
  .ks-combo-anh:after{background:linear-gradient(180deg,rgba(8,15,5,.92) 0%,rgba(8,15,5,.87) 55%,rgba(8,15,5,.92) 100%)}
  .ks-lh-luoi{grid-template-columns:1fr;gap:clamp(40px,6vw,56px)}
}

/* ══════════ ĐIỆN THOẠI (≤759px) — khách bấm điện thoại là chính ══════════ */
@media(max-width:759px){
  .ks-h2{font-size:clamp(34px,10vw,50px)}
  .ks-mi{font-size:9.5px;letter-spacing:.36em;margin-bottom:18px}
  .ks-dau{margin-bottom:clamp(38px,9vw,54px)}
  .ks-combo-trong{padding-block:clamp(46px,11vw,64px)}
  .ks-gio{font-size:clamp(46px,14vw,64px)}
  .ks-gio em{font-size:12px;margin-top:11px}
  .ks-gia-to{font-size:clamp(30px,9vw,40px);margin-top:20px}
  .ks-buoc li{font-size:14px;padding-left:26px}
  .ks-trich-chu{font-size:clamp(34px,11vw,52px);margin-block:clamp(34px,9vw,46px)}
  .ks-trich-zh{letter-spacing:.5em;text-indent:.5em}
  .ks-khung{padding:clamp(22px,6vw,32px) clamp(18px,5vw,26px)}
  .ks-mon-ten{font-size:15.5px}
  .ks-mon-gia{font-size:19px}
  .ks-mon{column-gap:9px;padding-block:14px}
  /* 4 lý do xếp DỌC một cột: đọc dọc bằng ngón cái, không phải 2 cột chữ bé */
  .ks-vs{grid-template-columns:1fr;gap:0}
  .ks-vs-it{padding-block:26px 24px;border-top:1px solid rgba(192,160,98,.34)}
  .ks-vs-so{font-size:26px;margin-bottom:12px}
  .ks-tin .v{font-size:15.5px}
  .ks-nut{width:100%;padding-inline:16px;letter-spacing:.22em}
  .ks-ban-do{height:290px}
}
@media(max-width:400px){
  .ks-goi{font-size:11px;letter-spacing:.14em}   /* giữ right:88px — chừa chỗ nút Zalo tròn */
  .ks-mon-ten{font-size:14.5px}
  .ks-anh img{width:238px;height:190px}
}

/* ══ KHÁCH XIN ÍT CHUYỂN ĐỘNG: đứng yên hết, dải ảnh cho vuốt tay ══ */
@media(prefers-reduced-motion:reduce){
  .ks-ray{animation:none}
  .ks-bang{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ks-anh-lap{display:none}               /* bỏ bản sao, chỉ còn 6 ảnh thật */
  .ks-js .ks-vao{opacity:1;transform:none;transition:none}
  .ks-combo-anh img{transform:none}
}


/* điện thoại: màn câu trích phải đủ cao mới thành "một màn cho mắt nghỉ" */
@media(max-width:759px){ .ks-trich{min-height:82svh;display:flex;align-items:center} }
/* thanh gọi dính đáy chỉ có nghĩa trên điện thoại */
@media(min-width:760px){ .ks-goi-day{display:none} }

/* 24/09: điện thoại — cột giá chừa chỗ cho 2 nút tròn Zalo/Gọi nổi ở mép phải (trước đó che mất số tiền) */
@media(max-width:759px){ .ks-khung{padding-right:calc(clamp(18px,5vw,26px) + 34px)} }