/* SÉLUNA LIVING | QUIET LUXURY — V2
   Hoàn thiện theo nhận diện xanh đêm / kem ấm / champagne.
   Các ảnh căn hộ đều lấy từ tệp Séluna đã cung cấp.
*/
:root{
  --navy:#102536;
  --navy2:#1c3948;
  --navy3:#0c1a29;
  --cream:#f3ede3;
  --ivory:#fbf8f2;
  --gold:#d0b98e;
  --gold2:#ad9064;
  --ink:#193143;
  --muted:#697681;
  --border:#dfd8cc;
  --font-display:"Iowan Old Style","Baskerville","Palatino Linotype","Times New Roman",Georgia,serif
}
html{scroll-padding-top:104px}
body{background:var(--ivory);color:var(--ink);letter-spacing:.005em}
::selection{background:#cbb58b;color:#142d3c}
.wrap{width:min(1250px,calc(100% - 112px))}
.section-pad{padding-block:122px}
.eyebrow{font-size:10px;letter-spacing:.32em;color:#9b7d51;font-weight:650}
.eyebrow::first-letter{letter-spacing:.33em}
.topline{height:29px;letter-spacing:.32em;background:#0c1b29;color:#cfb994;font-size:9px}
.topline span{color:#9e8258;font-size:8px}
.site-header{
  min-height:94px;
  padding-inline:max(56px,calc((100vw - 1250px)/2));
  background:rgba(251,248,242,.97);
  border-bottom:1px solid #dfd6c8;
  box-shadow:0 9px 32px rgba(16,35,49,.035);
}
.brand{gap:17px}
.brand img{width:54px;height:54px;filter:saturate(.84)}
.brand-word strong{font-size:27px;letter-spacing:.19em;font-weight:400}
.brand-word small{font-size:7px;letter-spacing:.35em;color:#998366}
.site-header nav{gap:38px}
.site-header nav>a{font-weight:520;letter-spacing:.05em;color:#344b5a;font-size:11px}
.site-header nav>a:hover{color:#96754b}
.site-header nav .nav-cta{
  padding:16px 21px;
  background:#102536;
  color:#f7f0e4;
  border:1px solid #102536;
  letter-spacing:.08em;
}
.site-header nav .nav-cta:hover{background:#213e50;color:#f8eacc}
.hero{height:min(815px,calc(100svh - 123px));min-height:670px;background:var(--navy3)}
.hero-visual{background-position:center 48%;filter:saturate(.78) contrast(1.06)}
.hero-shade{
 background:linear-gradient(90deg,rgba(6,22,35,.96) 0%,rgba(8,28,43,.87) 34%,rgba(13,29,40,.3) 72%,rgba(7,21,33,.25) 100%),linear-gradient(0deg,rgba(6,23,37,.70),transparent 42%);
}
.hero-content{padding-top:0}
.hero-issue{display:flex;align-items:center;gap:13px;margin-bottom:31px;color:#ead9b6;font-size:10px;letter-spacing:.22em}
.hero-issue span{width:30px;height:1px;background:#d0ba93;display:inline-block}
.hero h1{font-size:clamp(56px,6vw,92px);letter-spacing:-.042em;line-height:1.13;max-width:970px;margin-bottom:30px;text-shadow:0 5px 30px #091d2c22}
.hero h1 em{color:#dfc499}
.hero-content>p:not(.eyebrow){max-width:500px;color:#d7dedf;font-size:15px;font-weight:350;line-height:2.07}
.hero-actions{gap:16px;margin-top:43px}
.button{font-weight:600;min-height:55px;padding:17px 27px;letter-spacing:.08em;font-size:11px;border-radius:0}
.button span{font-family:var(--font-display);font-size:19px}
.button-champagne{background:#ccb386;color:#1c3241;border-color:#ccb386}
.button-champagne:hover{background:#e5d3ad}
.button-outline-light{border-color:#f6eee28a;color:#f6eee2;backdrop-filter:blur(2px)}
.button-navy{background:#102536}
.hero-credit{font-size:9px;letter-spacing:.18em;color:#e1d6c3}
.hero-scroll{letter-spacing:.25em}
.intro{gap:10vw;padding-block:143px 150px}
.intro .eyebrow{margin-bottom:33px}
.intro h2{font-size:clamp(44px,4.6vw,69px);line-height:1.2}
.intro h2 em{color:#b59769}
.intro-side{position:relative;padding-left:30px}
.intro-side:before{content:"";width:1px;height:84%;position:absolute;left:0;top:0;background:#d5c6ac}
.intro-side p{line-height:2.2;color:#526472;font-size:15px}
.fine-rule{background:#ad9064}
.stay-section{background:#f1ece3;border-top:1px solid #e8e0d2}
.section-heading{margin-bottom:55px;align-items:end}
.section-heading h2{font-size:clamp(43px,4.8vw,69px)}
.section-heading>p{color:#667581;line-height:2.1}
.collection-tabs{margin-bottom:46px;border-color:#d9cfbd}
.collection-tab{padding:30px 32px 28px;color:#687782;transition:background .23s,color .23s}
.collection-tab:first-child{padding-left:0}
.collection-tab:hover{background:#e9dfd1}
.collection-tab.active{color:#0e283b}
.collection-tab.active::after{height:2px;background:#ad9064}
.collection-tab strong{font-size:clamp(30px,3.1vw,44px);letter-spacing:-.043em}
.collection-tab small{color:#7d8588;letter-spacing:.06em;font-size:11px}
.tab-num{font-family:var(--font-display);font-size:13px;color:#a18155}
.search-panel{background:#fbf8f3;border:1px solid #e3d9cb;padding:36px 38px 0;box-shadow:none}
.search-top h3{font-size:29px}
.search-note{color:#70818c;font-size:10px}
.filters label{font-size:10px;letter-spacing:.04em;color:#5c6d78}
.filters select{height:52px;border-color:#ddd5c9;background:#fffefa;font-size:12px;padding-inline:13px}
.filter-reset{height:52px;border-color:#d7cbbb;color:#657681}
.results-head{border-color:#e5ddcf}
#result-count{letter-spacing:.06em}
.listing-grid{gap:26px;margin-top:32px}
.listing-card{border:1px solid #e2d8cb;background:#fffcf8;box-shadow:0 17px 30px rgba(14,35,49,.025);transition:transform .3s,box-shadow .3s}
.listing-card:hover{transform:translateY(-3px);box-shadow:0 24px 45px rgba(15,35,47,.07)}
.listing-photo{aspect-ratio:1.21;background:#d6d3c9;cursor:zoom-in}
.listing-photo img{filter:saturate(.92);transition:transform .7s cubic-bezier(.18,.7,.2,1),filter .6s}
.listing-photo:hover img{transform:scale(1.065);filter:saturate(1.02)}
.image-index{
 background:rgba(9,29,42,.91);border:1px solid #dec59e77;
 right:17px;bottom:17px;padding:11px 14px;
 font-size:9px;letter-spacing:.2em;color:#f4e4c3;
 box-shadow:0 9px 22px #06121b36;
}
.listing-thumbnails{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 4px 0;background:#fcf9f3}
.listing-thumbnails a{aspect-ratio:1.65;overflow:hidden;display:block;background:#d8d3c8;position:relative}
.listing-thumbnails img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .2s,transform .3s}
.listing-thumbnails a:hover img{filter:saturate(1.08);transform:scale(1.07)}
.listing-thumbnails a:focus-visible{outline:2px solid #9a8055;outline-offset:-2px}
.listing-content{padding:29px 27px 28px;gap:11px}
.listing-kicker{color:#998057;letter-spacing:.15em;font-size:9px}
.listing-card h3{font-size:31px;letter-spacing:-.042em}
.listing-subtitle{font-size:12px;letter-spacing:.035em;color:#647480}
.listing-summary{font-size:12px;line-height:2;color:#5f6f7b}
.listing-features span{border-color:#e4dbce;background:#faf6ef;color:#64737b;padding:7px 10px}
.listing-bottom{border-color:#e7dfd3}
.listing-status{border-radius:0;background:transparent;color:#7d7569;border-color:#d9ccbb;letter-spacing:.08em;font-weight:550}
.listing-price{font-size:22px}
.listing-cta{font-weight:600;letter-spacing:.04em;text-decoration:none;border-top:1px solid #e7dfd3;padding-top:12px;align-items:center}
.listing-cta:hover{color:#9c7b4c}
.signature-grid{min-height:720px}
.signature-image{background:#d6cfc4;min-height:640px;overflow:hidden}
.signature-image img{max-height:none;filter:saturate(.85)}
.signature-text{background:#faf7f0;padding:85px min(8vw,125px);border-bottom:1px solid #ded8cc}
.signature-text h2{font-size:clamp(53px,5.2vw,84px)}
.signature-location{color:#a1845a}
.signature-text>p:not(.eyebrow):not(.signature-location){color:#60717c;line-height:2.2}
.signature-tags{margin-block:25px 36px}
.signature-tags span{border-color:#dbcfbf;color:#68747a;padding:8px 11px}
.service-section{background:radial-gradient(circle at 75% 12%,rgba(51,81,95,.36),transparent 34%),linear-gradient(125deg,#0c1e2e 0%,#122c3e 100%);border-top:1px solid #9c825644}
.service-lead h2{font-size:clamp(47px,5.2vw,73px)}
.service-lead>p:not(.eyebrow){font-size:14px;color:#b7c4ca;max-width:600px}
.service-grid{border-top-color:#c5b58f55;gap:42px}
.service-grid article{padding-top:38px}
.service-no{color:#d8bd8d;font-size:28px}
.service-grid h3{font-size:28px}
.service-grid p{color:#abbac3;line-height:2.12}
.forms-section{padding-block:135px 140px}
.forms-header{margin-bottom:48px}
.forms-header h2{font-size:clamp(45px,4.5vw,65px)}
.forms-header p:not(.eyebrow){line-height:2.14}
.forms-grid{gap:28px}
.contact-panel{background:#fffdfa;border:1px solid #e6dccc;padding:44px 44px 48px;box-shadow:0 20px 50px rgba(18,38,52,.04)}
.contact-panel.owner-panel{background:#f1ebe0}
.contact-icon{font-size:35px;color:#ad8a58}
.contact-panel h3{font-size:36px}
.contact-panel>p:not(.eyebrow){line-height:2;color:#64737e}
.contact-panel input,.contact-panel select,.contact-panel textarea{border:1px solid #ded5c7;background:#fffefa;border-radius:0;padding:13px 15px}
.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus{border-color:#ab8f65}
.founder-section{background:#e9e1d5}
.founder-inner{padding-block:110px}
.founder-inner h2{font-size:clamp(37px,3.8vw,57px)}
.founder-inner>div:nth-child(2)>p:first-child{line-height:2.2}
.footer{background:#0c1c2a}
.footer-grid{padding-block:78px 73px}
.footer-brand strong{font-size:43px;color:#d8bf93}
.footer-brand small{letter-spacing:.23em;color:#ccb58f}
.footer-brand p{color:#a9b9c2}
.footer-label{color:#d9bd8f}
.footer-grid a,.footer-grid>div>span{color:#a7b6c1}
.footer-bottom{color:#8296a0;border-top-color:#d4c29e25}
/* Thư viện ảnh: dùng liên kết # và :target, có thể mở ngay cả khi JavaScript bị hạn chế. */
.gallery-anchor{height:0;scroll-margin-top:130px}
.gallery-stack{position:relative}
.gallery-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(5,16,26,.97);align-items:center;justify-content:center;padding:22px;overflow:auto;isolation:isolate}
.gallery-overlay:target{display:flex}
body:has(.gallery-overlay:target){overflow:hidden}
.gallery-backdrop{position:absolute;inset:0;z-index:0;cursor:zoom-out}
.gallery-window{position:relative;z-index:1;width:min(1140px,100%);max-height:calc(100svh - 24px);display:flex;flex-direction:column;color:#f4eee3;border:1px solid #ad966751;background:#0b1d2b;box-shadow:0 22px 90px #0006}
.gallery-topbar,.gallery-bottombar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 27px;font-size:11px;color:#e1d1b6;letter-spacing:.13em}
.gallery-topbar{border-bottom:1px solid #b6a38232}
.gallery-brand{font:400 26px var(--font-display);letter-spacing:.16em;color:#e0c695;white-space:nowrap}
.gallery-brand i{font-size:15px;letter-spacing:0;color:#bfcbd0}
.gallery-counter{font:400 21px var(--font-display);color:#f1e7d3;letter-spacing:.1em}
.gallery-counter span{color:#9c895f}
.gallery-exit{font-size:10px;color:#eadac1;display:flex;align-items:center;gap:12px;letter-spacing:.2em}
.gallery-exit span{font-size:18px;color:#d4bd91}
.gallery-exit:hover,.gallery-arrow:hover{color:#fff}
.gallery-canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#081620}
.gallery-canvas img{width:100%;height:min(71svh,800px);max-height:calc(100svh - 178px);object-fit:contain}
.gallery-arrow{z-index:2;position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:54px;height:54px;background:#081c2cdf;border:1px solid #c9b38a77;color:#e7d2ab;font:400 27px var(--font-display);backdrop-filter:blur(5px)}
.gallery-arrow.prev{left:14px}
.gallery-arrow.next{right:14px}
.gallery-arrow:hover{background:#c8ad7e;color:#09202e}
.gallery-bottombar{color:#bfcbd0;font-size:10px}
.gallery-bottombar span:last-child{color:#a58e6a}
@media(max-width:1120px){
  .site-header{padding-inline:26px}
  .site-header nav{gap:19px}
  .gallery-canvas img{height:65svh}
}
@media(max-width:800px){
  .wrap{width:min(100% - 40px,660px)}
  .section-pad{padding-block:80px}
  .site-header{min-height:78px;padding:9px 22px}
  .brand img{height:43px;width:43px}
  .brand-word strong{font-size:22px}
  .site-header nav{gap:0}
  .site-header nav>a{font-size:13px}
  .hero{height:720px;min-height:620px}
  .hero-shade{background:linear-gradient(90deg,#081b2ce9 0%,#0f2437cf 56%,#122b4090 100%),linear-gradient(0deg,#0a1d2bcc,transparent 46%)}
  .hero h1{font-size:clamp(49px,8vw,71px)}
  .hero-content{padding-bottom:20px}
  .intro{padding-block:90px}
  .intro-side{padding-left:22px}
  .collection-tab{padding:21px 16px}
  .collection-tab:first-child{padding-left:7px}
  .collection-tab strong{font-size:29px}
  .search-panel{padding:29px 24px 0}
  .listing-grid{gap:18px}
  .listing-content{padding:23px}
  .listing-card h3{font-size:27px}
  .signature-grid{min-height:0}
  .signature-image{min-height:0;height:560px}
  .signature-text{padding:65px max(25px,calc((100vw - 660px)/2))}
  .service-grid{gap:20px}
  .forms-section{padding-block:86px 95px}
  .contact-panel{padding:35px 31px}
  .founder-inner{padding-block:76px}
  .gallery-overlay{padding:12px}
  .gallery-topbar,.gallery-bottombar{padding:17px 16px}
  .gallery-canvas img{height:min(72svh,680px)}
  .gallery-bottombar span:last-child{display:none}
}
@media(max-width:590px){
  .topline{font-size:7px;letter-spacing:.1em}
  .hero{height:675px;min-height:580px}
  .hero-issue{font-size:8px;letter-spacing:.14em}
  .hero-issue span{width:14px}
  .hero h1{font-size:clamp(42px,10vw,56px)}
  .hero-actions{margin-top:32px}
  .intro h2{font-size:43px}
  .section-heading h2{font-size:47px}
  .collection-tab{padding:17px 8px}
  .collection-tab strong{font-size:25px}
  .collection-tab small{font-size:9px}
  .search-panel{padding:25px 17px 0}
  .listing-grid{gap:22px}
  .listing-card{box-shadow:none}
  .listing-photo{aspect-ratio:1.22}
  .listing-thumbnails a{aspect-ratio:1.35}
  .listing-content{padding:26px 23px}
  .listing-card h3{font-size:32px}
  .signature-image{height:410px}
  .signature-text{padding:51px 24px}
  .service-lead h2{font-size:45px}
  .forms-header h2{font-size:47px}
  .contact-panel{padding:29px 22px}
  .gallery-overlay{padding:0}
  .gallery-window{max-height:100svh;min-height:100svh;border:0;justify-content:space-between}
  .gallery-topbar{padding:19px 17px 16px}
  .gallery-brand{font-size:21px}
  .gallery-brand i{font-size:12px}
  .gallery-counter{font-size:16px}
  .gallery-exit{font-size:9px;gap:5px}
  .gallery-canvas img{max-height:calc(100svh - 150px);height:66svh}
  .gallery-arrow{height:43px;width:43px;font-size:24px}
  .gallery-arrow.prev{left:6px}
  .gallery-arrow.next{right:6px}
  .gallery-bottombar{padding:16px 18px}
}
@media(prefers-reduced-motion:reduce){.listing-card,.listing-photo img,.listing-thumbnails img{transition:none}}