/* =====================================================================
   TOKENS — biến thiết kế, reset, primitives
   Khách Sạn Lý Sơn
   ===================================================================== */

:root{
  /* Brand colors */
  --navy:#082B63;
  --ocean:#0B3D91;
  --turq:#14B8C4;
  --turq-soft:#7fe3ec;
  --gold:#D4A017;
  --gold-dark:#C38E11;
  --sand:#F5F1EA;
  --white:#fff;

  /* Neutrals / text */
  --ink:#082B63;
  --muted:#6B7280;
  --muted-2:#9aa3b2;
  --body:#374151;
  --line:#eef1f6;
  --line-2:#e3e7ef;
  --page:#fff;
  --page-alt:#F2F4F7;

  /* States */
  --success:#1F8A5B;   --success-bg:#e7f6ee;
  --danger:#d14056;    --danger-bg:#fdeaec;
  --warn:#b7791f;      --warn-bg:#fdf3e2;

  /* Typography */
  --f-head:'Playfair Display',Georgia,serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Radius */
  --r-card:20px;
  --r-lg:16px;
  --r-md:14px;
  --r-sm:11px;
  --r-pill:999px;

  /* Shadow */
  --sh-card:0 10px 30px rgba(8,43,99,.08);
  --sh-elev:0 14px 40px rgba(8,43,99,.13);
  --sh-hover:0 24px 50px rgba(8,43,99,.18);
  --sh-pop:0 18px 50px rgba(8,43,99,.22);
  --sh-gold:0 12px 30px rgba(212,160,23,.4);

  /* Layout */
  --maxw:1280px;
  --maxw-narrow:1120px;
  --pad:32px;
  --header-h:77px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  background:var(--page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-head);font-weight:700;color:var(--ink);line-height:1.15}
p{margin:0}
a{color:var(--ocean);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}
svg{display:inline-block;vertical-align:middle}
:focus-visible{outline:2px solid var(--turq);outline-offset:2px}

/* ---------- Animations ---------- */
@keyframes ksFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ksFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes ksFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ksSpin{to{transform:rotate(360deg)}}
.kls-reveal{animation:ksFadeUp .8s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Primitives ---------- */
.kls-ic{flex-shrink:0}
.kls-stars{display:inline-flex;gap:3px;line-height:0}
.kls-star.is-on{color:var(--gold)}
.kls-star.is-off{color:#d9dee8}

.kls-img{width:100%;height:100%;object-fit:cover;display:block}
.kls-img-ph{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(135deg,var(--sand),#e6edf7 60%,#dbe4f2);
  position:relative;overflow:hidden;
}
.kls-img-ph::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 70% 30%,rgba(20,184,196,.18),transparent 60%);
}
.kls-img-ph::before{
  content:"";position:relative;z-index:1;width:34%;max-width:64px;aspect-ratio:1;opacity:.42;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082B63' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 20h20'/%3E%3Cpath d='M3 20l6-10 4 6 2.5-4L22 20'/%3E%3Ccircle cx='17.5' cy='7' r='2'/%3E%3C/svg%3E");
}
.kls-img-ph__cap{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;
  font-size:11px;font-weight:600;color:var(--ocean);letter-spacing:.2px;
  background:rgba(255,255,255,.72);padding:3px 11px;border-radius:999px;
}
/* placeholder nhỏ (thumb tìm kiếm / phòng / cột tóm tắt): chỉ icon nhỏ, ẩn nhãn */
.kls-search-card__media .kls-img-ph__cap,
.kls-roomrow__img .kls-img-ph__cap,
.kls-co-sumimg .kls-img-ph__cap{display:none}
.kls-search-card__media .kls-img-ph::before,
.kls-roomrow__img .kls-img-ph::before{max-width:40px}
/* avatar + nền trang trí: gradient trơn, KHÔNG icon/nhãn */
.kls-testi__av .kls-img-ph__cap,.kls-rv-card__av .kls-img-ph__cap,
.kls-hero__slide .kls-img-ph__cap,.kls-offer__bg .kls-img-ph__cap,
.kls-explore__bg .kls-img-ph__cap,.kls-cta__bg .kls-img-ph__cap{display:none}
.kls-testi__av .kls-img-ph::before,.kls-rv-card__av .kls-img-ph::before,
.kls-hero__slide .kls-img-ph::before,.kls-offer__bg .kls-img-ph::before,
.kls-explore__bg .kls-img-ph::before,.kls-cta__bg .kls-img-ph::before{display:none}

/* Container + section */
.kls-container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.kls-container--narrow{max-width:var(--maxw-narrow)}
.kls-section{padding:80px 0}
.kls-section--lg{padding:90px 0}
.kls-section--sand{background:var(--sand)}
.kls-section--navy{background:var(--navy);color:#fff}

/* Brand wordmark */
.kls-brand{display:inline-flex;align-items:center;gap:13px;text-decoration:none}
.kls-brand-txt{line-height:1}
.kls-brand-name{display:block;font-family:var(--f-head);font-weight:700;font-size:21px;letter-spacing:.5px;color:var(--ocean)}
.kls-brand--light .kls-brand-name{color:#fff;font-size:18px}
.kls-brand-dot{color:var(--gold)}
.kls-brand-tag{display:block;font-size:9.5px;letter-spacing:2.5px;color:var(--muted);margin-top:3px;text-transform:uppercase}

/* Screen-reader only */
.kls-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Visibility helpers */
[hidden]{display:none!important}