/* ============================================================
   ทรัพย์คุ้มค่า — Premium UI System (v3)
   Designed for: dark green + gold luxury real-estate platform
   Inspired by: Sarabun typography + Material Design elevation
   ============================================================ */

/* ============ Design Tokens ============ */
:root{
  /* Colors — primary palette */
  --green-950:#041f19;
  --green-900:#062b22;
  --green-850:#083026;
  --green-800:#0b3b2e;
  --green-700:#176b50;
  --green-600:#1f7a4d;
  --green-500:#2a9163;

  --gold-600:#b88a3a;
  --gold-500:#d6a84f;
  --gold-400:#f0c76a;
  --gold-300:#f4d889;

  --cream-50:#fbf9f3;
  --cream-100:#f7f3ea;
  --cream-200:#ece5d3;
  --cream:#f7f3ea;          /* alias */

  --ink:#10231c;
  --ink-soft:#3a4a44;
  --muted:#66756f;
  --text:#10231c;           /* alias = ink */

  /* Semantic */
  --bg:#f7f3ea;
  --bg-soft:#fbf9f3;
  --card:#ffffff;
  --border:rgba(16,35,28,.10);
  --border-soft:rgba(16,35,28,.05);

  --good:#1f7a4d;
  --bad:#a02020;
  --warn:#a96820;
  --info:#1c4f8b;

  /* Radius */
  --radius:18px;
  --radius-lg:22px;
  --radius-xl:24px;
  --radius-sm:10px;
  --radius-xs:8px;

  /* Shadow */
  --shadow-xs:0 2px 6px rgba(15,23,42,.04);
  --shadow-sm:0 8px 24px rgba(15,23,42,.08);
  --shadow-md:0 18px 50px rgba(15,23,42,.14);
  --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  --shadow-hero:0 28px 70px rgba(6,43,34,.30);
}

/* ============ Reset / Base ============ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Sarabun","Noto Sans Thai",-apple-system,Segoe UI,Roboto,system-ui,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.005em;
}
img{ max-width:100%; display:block; }
hr{ border:0; border-top:1px solid var(--border); margin:20px 0; }
a{ color:var(--green-700); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--gold-500); }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.02em; line-height:1.25; color:var(--green-900); }
h1{ font-size:32px; }
h2{ font-size:24px; }
h3{ font-size:18px; }
h4{ font-size:15px; }
.text-muted{ color:var(--muted); }
.text-good{ color:var(--good); }
.text-bad{ color:var(--bad); }
.text-warn{ color:var(--warn); }

/* ============ Container ============ */
.container{
  width:min(1280px, calc(100% - 36px));
  margin:0 auto;
  padding:0;
}
.container-narrow{ width:min(960px, calc(100% - 36px)); margin:0 auto; }

/* ============ Topbar ============ */
.topbar{
  background:linear-gradient(180deg, #062b22 0%, #0b3b2e 100%);
  border-bottom:1px solid rgba(214,168,79,.18);
  color:#f3ead3;
  position:sticky; top:0; z-index:50;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.topbar .container{
  display:flex; align-items:center; gap:16px;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; color:var(--gold-400); font-size:20px;
  letter-spacing:-0.02em;
}
.brand .logo{
  width:42px; height:42px;
  display:grid; place-items:center;
  background:rgba(214,168,79,.12);
  border:1.5px solid var(--gold-500);
  border-radius:10px;
  color:var(--gold-400);
}
.brand span{ color:var(--gold-400); }
.brand span:last-child{ color:#fff; }

.nav{ display:flex; gap:4px; margin-left:24px; flex:1; flex-wrap:wrap; }
.nav a{
  color:#d4c9a8; padding:9px 16px;
  border-radius:9px; font-size:14px; font-weight:500;
  position:relative;
  transition:.15s;
}
.nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav a.active{
  color:var(--gold-400);
  background:rgba(214,168,79,.08);
}
.nav a.active::after{
  content:""; position:absolute; left:18%; right:18%; bottom:-1px; height:3px;
  background:var(--gold-500); border-radius:3px;
}

.top-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:50%; color:#d4c9a8; border:1px solid transparent;
  transition:.15s;
}
.icon-btn:hover{ background:rgba(255,255,255,.07); color:#fff; }
.login-pill{
  border:1px solid var(--gold-500); color:var(--gold-400);
  padding:9px 18px; border-radius:30px; font-size:14px; font-weight:500;
  display:flex; gap:8px; align-items:center;
  transition:.18s;
}
.login-pill:hover{
  background:var(--gold-500); color:var(--green-950);
  box-shadow:0 4px 14px rgba(214,168,79,.4);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:10px; cursor:pointer;
  font-weight:600; font-size:14px; border:1px solid transparent;
  transition:.18s; font-family:inherit;
  letter-spacing:-0.005em;
}
.btn-primary{
  background:var(--green-900); color:#fff;
  box-shadow:0 4px 14px rgba(11,59,46,.22);
}
.btn-primary:hover{ background:var(--green-800); color:#fff; box-shadow:0 6px 18px rgba(11,59,46,.32); transform:translateY(-1px); }
.btn-gold{
  background:linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color:var(--green-950);
  box-shadow:0 4px 14px rgba(214,168,79,.32);
  font-weight:700;
}
.btn-gold:hover{ filter:brightness(1.06); color:var(--green-950); box-shadow:0 6px 20px rgba(214,168,79,.45); transform:translateY(-1px); }
.btn-ghost{ background:#fff; color:var(--green-900); border:1px solid var(--border); }
.btn-ghost:hover{ border-color:var(--gold-500); color:var(--green-800); }
.btn-danger{ background:#a02020; color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 14px; font-size:13px; }
.btn-lg{ padding:14px 28px; font-size:16px; }

/* ============ Cards ============ */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  transition:.2s;
}
.card-pad{ padding:24px; }
.card h3{ margin:0 0 12px; color:var(--green-900); }

.section-title{
  font-weight:700; color:var(--green-900); font-size:22px;
  display:flex; align-items:center; justify-content:space-between;
  margin:24px 0 16px;
  letter-spacing:-0.02em;
}
.section-title small{ color:var(--muted); font-weight:400; font-size:13px; }
.section-title .gold-dot{
  width:10px; height:10px; background:var(--gold-500); border-radius:50%;
  margin-left:8px; box-shadow:0 0 0 4px rgba(214,168,79,.18);
}

/* ============ Hero — image background ============ */
.hero{
  min-height:420px;
  border-radius:var(--radius-lg);
  overflow:hidden; position:relative;
  background:
    linear-gradient(95deg, rgba(6,43,34,.94) 0%, rgba(6,43,34,.72) 35%, rgba(6,43,34,.25) 65%, rgba(6,43,34,.05) 100%),
    url('../img/hero-bg.jpg') center right/cover no-repeat,
    url('../img/hero-bg.svg') center/cover no-repeat;
  padding:64px 54px 140px;
  color:#fff;
  box-shadow:var(--shadow-hero);
  border:1px solid rgba(214,168,79,.18);
  margin-top:20px;
}
.hero::before{
  content:""; position:absolute;
  left:-100px; bottom:-50px;
  width:400px; height:300px;
  background:radial-gradient(ellipse, rgba(214,168,79,.10) 0%, transparent 70%);
  pointer-events:none;
}
.hero > *{ position:relative; z-index:2; }
.hero h1{
  font-size:clamp(28px,3.8vw,46px);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-0.025em;
  margin:0 0 12px;
  color:#fff;
  text-shadow:0 3px 24px rgba(0,0,0,.55);
  max-width:55%;
}
.hero h1 .gold{ color:var(--gold-400); }
.hero p{
  color:#e5dcc0; margin:0;
  max-width:52%;
  font-size:16px; line-height:1.6;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* Hero search panel — overlapping */
.hero-search{
  position:relative; z-index:3;
  margin-top:-78px;
  background:rgba(255,255,255,.98);
  border-radius:16px;
  padding:18px 22px;
  box-shadow:var(--shadow-md);
  border:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(5,1fr) 160px;
  gap:14px;
  align-items:end;
  backdrop-filter:blur(8px);
}
.field label{
  display:block; font-size:12px; font-weight:500;
  color:var(--ink-soft); margin-bottom:6px;
  letter-spacing:0.01em;
}
.field select, .field input, .form-control{
  width:100%; padding:10px 14px;
  border:1px solid var(--border); border-radius:9px;
  font-size:14px; background:#fff; color:var(--ink);
  font-family:inherit;
  transition:.15s;
}
.field select:focus, .field input:focus, textarea:focus, .form-control:focus{
  outline:none;
  border-color:var(--green-700);
  box-shadow:0 0 0 3px rgba(31,122,77,.12);
}
.btn-search{ height:46px; font-weight:700; }

/* ============ Category Tiles ============ */
.cat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-top:28px;
}
.cat-tile{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  display:flex; align-items:center; gap:16px;
  box-shadow:var(--shadow-xs);
  transition:.22s;
  cursor:pointer;
  color:inherit;
}
.cat-tile:hover{
  border-color:var(--gold-500);
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.cat-tile .ico{
  width:56px; height:56px; flex-shrink:0;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(214,168,79,.22), rgba(214,168,79,.06));
  color:var(--gold-600);
  border:1px solid rgba(214,168,79,.28);
  border-radius:12px;
}
.cat-tile .label{
  font-weight:700; color:var(--green-900);
  font-size:16px; letter-spacing:-0.01em;
  margin-bottom:2px;
}
.cat-tile .desc{
  font-size:12px; color:var(--muted);
  line-height:1.4;
}

/* ============ Property Cards — Photo style ============ */
.prop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:20px;
}
.prop-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.prop-grid.cols-5{ grid-template-columns:repeat(5,1fr); }

.prop-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:.25s;
  display:flex; flex-direction:column;
}
.prop-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-5px);
}
.prop-img{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f0e8d8;
}
.prop-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.prop-card:hover .prop-img img{ transform:scale(1.04); }
.prop-tag{
  position:absolute; top:12px; left:12px;
  padding:5px 12px;
  font-size:12px; font-weight:700; color:#fff;
  border-radius:7px;
  background:var(--green-700);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  letter-spacing:0.01em;
}
.prop-tag.npa{ background:var(--info); }
.prop-tag.auction{ background:var(--warn); }
.prop-tag.land{ background:#7a5a48; }
.prop-tag.below{ background:#147d4a; }
.heart{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.96);
  border-radius:50%;
  cursor:pointer;
  color:#888;
  border:1px solid var(--border);
  font-size:16px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  transition:.18s;
}
.heart:hover{ color:#d33b5a; transform:scale(1.08); }
.heart.active{ color:#d33b5a; }

.prop-body{
  padding:16px 18px;
  display:flex; flex-direction:column; gap:6px;
  flex:1;
}
.prop-title{
  font-weight:700;
  color:var(--green-900);
  font-size:15px;
  line-height:1.4;
  margin:0;
  letter-spacing:-0.01em;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.prop-loc{
  color:var(--muted); font-size:12px;
  display:flex; align-items:center; gap:4px;
}
.prop-spec{
  color:var(--ink-soft); font-size:12px;
}
.prop-spec span + span:before{ content:" | "; color:var(--border); }
.prop-price{
  color:var(--good);
  font-weight:800;
  font-size:20px;
  margin-top:6px;
  letter-spacing:-0.02em;
}
.prop-meta{
  display:flex; justify-content:space-between;
  padding-top:10px;
  border-top:1px dashed var(--border);
  margin-top:8px;
  font-size:12px; color:var(--muted);
}
.prop-meta b{ display:block; color:var(--green-900); font-size:13px; }

/* ============ Search page filter bar ============ */
.filter-bar{
  background:#fff;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
  margin-bottom:18px;
}
.filter-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(6,1fr);
}
.filter-row2{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr) auto auto;
  align-items:end;
  margin-top:12px;
}

.type-tabs{
  display:flex; gap:10px;
  margin-bottom:16px; flex-wrap:wrap;
}
.type-tab{
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:9px 18px;
  font-size:13px; font-weight:500;
  color:var(--ink-soft);
  cursor:pointer;
  display:flex; align-items:center; gap:8px;
  transition:.15s;
}
.type-tab:hover{ border-color:var(--gold-500); color:var(--green-800); }
.type-tab.active{
  background:rgba(31,122,77,.08);
  border-color:var(--green-600);
  color:var(--green-700);
  font-weight:700;
}
.type-tab .count{
  background:rgba(0,0,0,.06);
  padding:2px 9px; border-radius:30px;
  font-size:11px; font-weight:600;
}
.type-tab.active .count{ background:var(--green-600); color:#fff; }

/* ============ Detail page ============ */
.detail-grid{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:24px;
  margin-top:18px;
}
.gallery{
  display:grid; grid-template-columns:4fr 1fr;
  gap:10px;
}
.gallery .main{
  aspect-ratio:16/10;
  background:#ddd;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.gallery .main img{ width:100%; height:100%; object-fit:cover; }
.gallery .thumbs{
  display:grid; gap:8px;
  grid-template-rows:repeat(4,1fr);
}
.gallery .thumbs img{
  width:100%; height:100%; object-fit:cover;
  border-radius:9px; cursor:pointer;
  transition:.15s;
}
.gallery .thumbs img:hover{ transform:scale(1.04); box-shadow:var(--shadow-sm); }

.detail-tabs{
  display:flex; gap:24px;
  border-bottom:1px solid var(--border);
  margin:22px 0;
  overflow-x:auto;
}
.detail-tabs a{
  padding:12px 4px;
  color:var(--ink-soft);
  border-bottom:2px solid transparent;
  font-weight:500;
  white-space:nowrap;
  font-size:14px;
}
.detail-tabs a.active{
  color:var(--green-900);
  border-color:var(--gold-500);
  font-weight:700;
}

.spec-row{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:8px;
  padding:18px 20px;
  background:var(--bg-soft);
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.spec-row .item{ text-align:center; }
.spec-row .item .v{
  font-weight:800;
  color:var(--green-900);
  font-size:18px;
  letter-spacing:-0.02em;
}
.spec-row .item .l{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.kvp{
  display:flex; justify-content:space-between;
  padding:9px 0;
  border-bottom:1px dashed var(--border);
  font-size:14px;
}
.kvp .k{ color:var(--ink-soft); }
.kvp .v{ font-weight:600; color:var(--green-900); }
.kvp:last-child{ border-bottom:none; }

.invest-card{
  background:linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
  border:1.5px solid var(--gold-500);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 8px 24px rgba(214,168,79,.16);
}
.score-big{
  font-size:48px;
  font-weight:800;
  color:var(--good);
  text-align:center;
  line-height:1;
  letter-spacing:-0.03em;
}
.score-stars{
  color:var(--gold-500);
  text-align:center;
  margin-top:6px;
  font-size:22px;
  letter-spacing:2px;
}
.score-label{
  display:inline-block;
  background:var(--good); color:#fff;
  padding:5px 14px; border-radius:8px;
  font-size:13px; font-weight:700;
  letter-spacing:0.01em;
}
.score-card{ text-align:center; padding:16px; }

/* ============ Analyze page ============ */
.analyze-grid{
  display:grid; grid-template-columns:1fr 1.3fr 1fr;
  gap:18px;
}
.input-row{
  display:grid;
  grid-template-columns:1fr 110px 60px;
  align-items:center; gap:8px;
  margin-bottom:10px;
}
.input-row label{ color:var(--ink-soft); font-size:13px; }
.input-row input{
  padding:8px 12px;
  border:1px solid var(--border); border-radius:8px;
  font-size:13px; text-align:right;
  font-family:inherit;
  background:#fff;
}
.input-row .unit{ color:var(--muted); font-size:12px; }

.result-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:3px;
  min-height:76px;
  transition:.18s;
}
.result-box:hover{ box-shadow:var(--shadow-sm); }
.result-box .l{ font-size:12px; color:var(--ink-soft); }
.result-box .v{
  font-weight:800;
  font-size:22px;
  color:var(--green-900);
  margin-top:2px;
  letter-spacing:-0.02em;
}
.result-box .sub{ font-size:11px; color:var(--muted); }

.score-gauge{
  background:linear-gradient(180deg, var(--bg-soft), #fff);
  border:1.5px solid var(--gold-500);
  border-radius:14px;
  padding:18px;
  text-align:center;
  box-shadow:0 8px 24px rgba(214,168,79,.18);
}

/* ============ Tables ============ */
.table{
  width:100%; border-collapse:collapse;
  background:#fff;
  border-radius:12px; overflow:hidden;
}
.table th, .table td{
  padding:13px 16px;
  text-align:left; font-size:14px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
}
.table th{
  background:var(--bg-soft);
  color:var(--ink-soft);
  font-weight:600; font-size:13px;
}
.table tr:hover td{ background:#fbfaf6; }

.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:7px;
  font-size:12px; font-weight:600;
  color:#fff;
  letter-spacing:0.01em;
}
.badge-good{ background:var(--good); }
.badge-warn{ background:var(--warn); }
.badge-bad{ background:var(--bad); }
.badge-info{ background:var(--info); }
.badge-muted{ background:#888; }

/* ============ Forms ============ */
.form-group{ margin-bottom:16px; }
.form-group label{
  display:block;
  color:var(--ink-soft);
  font-size:13px; font-weight:500;
  margin-bottom:6px;
}
.form-row{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px;
}

/* ============ Alerts ============ */
.alert{
  padding:14px 18px;
  border-radius:12px;
  margin-bottom:14px;
  border-left:4px solid;
  font-size:14px;
}
.alert.success{ background:#ebf6f0; color:#145536; border-color:var(--good); }
.alert.error{ background:#fbebeb; color:#7a1818; border-color:var(--bad); }
.alert.warn{ background:#fbf3e6; color:#6b4214; border-color:var(--warn); }
.alert.info{ background:#ebf1fa; color:#143a6c; border-color:var(--info); }

/* ============ Features strip ============ */
.features-strip{
  background:linear-gradient(135deg, var(--green-950), var(--green-900) 60%, var(--green-850));
  color:#e4dfd0;
  padding:36px;
  border-radius:var(--radius);
  margin-top:32px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(214,168,79,.18);
}
.features-strip::before{
  content:""; position:absolute;
  top:-50%; right:-10%; width:300px; height:300px;
  background:radial-gradient(circle, rgba(214,168,79,.08), transparent 70%);
  pointer-events:none;
}
.fstrip-item{
  display:flex; gap:16px;
  position:relative; z-index:2;
}
.fstrip-item .ico{
  width:48px; height:48px;
  flex-shrink:0;
  background:rgba(214,168,79,.12);
  color:var(--gold-400);
  border:1px solid var(--gold-500);
  border-radius:10px;
  display:grid; place-items:center;
  font-size:20px;
  box-shadow:0 4px 12px rgba(214,168,79,.18);
}
.fstrip-item h4{ color:var(--gold-400); margin:0 0 6px; font-size:16px; }
.fstrip-item p{ margin:0; font-size:13px; color:#c4bea5; line-height:1.55; }

/* ============ Footer ============ */
footer{
  margin-top:60px;
  padding:32px 0;
  background:var(--green-950);
  color:#a89e7d;
  font-size:13px;
}
footer .container{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
footer a{ color:#d4caa6; }
footer a:hover{ color:var(--gold-400); }

/* ============ Helpers ============ */
.flex{ display:flex; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.flex-center{ display:flex; align-items:center; justify-content:center; gap:10px; }
.gap-4{ gap:4px; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-20{ gap:20px; }
.mt-4{margin-top:4px;}  .mt-8{margin-top:8px;}  .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-20{margin-top:20px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-4{margin-bottom:4px;} .mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.text-center{ text-align:center; }
.text-right{ text-align:right; }
.no-pad{ padding:0 !important; }
.full{ width:100%; }

/* ============ Sidebar (admin) ============ */
.admin-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:0;
  min-height:80vh;
  margin-top:18px;
}
.admin-side{
  background:linear-gradient(180deg, var(--green-950), var(--green-900));
  color:#e3dcc3;
  padding:18px 14px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(214,168,79,.12);
}
.admin-side .menu{ display:flex; flex-direction:column; gap:2px; }
.admin-side .menu a{
  display:flex; gap:10px; align-items:center;
  padding:10px 14px;
  color:#bdb592; font-size:13.5px;
  border-radius:8px;
  font-weight:500;
  transition:.15s;
}
.admin-side .menu a.active{
  background:rgba(214,168,79,.14);
  color:#fff;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--gold-500);
}
.admin-side .menu a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-main{ padding:0 0 0 24px; }

.shortcuts{
  margin-top:24px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.shortcuts .heading{
  font-size:11px; letter-spacing:1.2px; color:#9b9272;
  padding:4px 14px; margin-bottom:6px;
  text-transform:uppercase;
}

.stat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  box-shadow:var(--shadow-xs);
  transition:.2s;
}
.stat-card:hover{ box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.stat-card .l{ font-size:13px; color:var(--ink-soft); }
.stat-card .v{
  font-size:30px; font-weight:800;
  color:var(--green-900);
  margin-top:4px;
  letter-spacing:-0.025em;
}
.stat-card .d{ font-size:12px; color:var(--good); margin-top:2px; }

/* ============ Dashboard Greeting Card ============ */
.dash-greeting{
  background:linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 50%, var(--green-850) 100%);
  color:#fff;
  border-radius:var(--radius-lg);
  padding:28px 36px;
  display:grid;
  grid-template-columns:auto 1.2fr 2fr;
  gap:28px;
  align-items:center;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(214,168,79,.18);
}
.dash-greeting::before{
  content:""; position:absolute;
  right:-100px; top:-100px; width:300px; height:300px;
  background:radial-gradient(circle, rgba(214,168,79,.12), transparent 70%);
}
.dash-greeting .av{
  width:90px; height:90px; border-radius:50%;
  background:rgba(214,168,79,.12);
  display:grid; place-items:center;
  border:2px solid var(--gold-500);
  position:relative; z-index:2;
}
.dash-greeting h2{ color:#fff; margin:0 0 4px; font-size:26px; letter-spacing:-0.025em; }
.dash-greeting p{ color:#bdb592; margin:0; font-size:14px; }
.dash-greeting .stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  background:rgba(255,255,255,.05);
  border-radius:14px;
  padding:16px 22px;
  position:relative; z-index:2;
  border:1px solid rgba(214,168,79,.12);
}
.dash-greeting .st-item{ text-align:center; }
.dash-greeting .st-item .l{ font-size:12px; color:#bdb592; }
.dash-greeting .st-item .v{ font-size:22px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.dash-greeting .st-item .v .u{ font-size:12px; font-weight:400; color:#bdb592; }

/* ============ Step bar (sell page) ============ */
.step-bar{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  margin-bottom:24px;
  background:#fff;
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
.step-bar .step{
  display:flex; align-items:center; gap:9px;
  padding:9px 8px;
  border-radius:9px;
  color:var(--muted); font-size:13px;
  transition:.18s;
}
.step-bar .step span{
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:#eee; color:#777; font-weight:700;
  font-size:13px;
}
.step-bar .step.active{ background:rgba(31,122,77,.08); color:var(--green-900); }
.step-bar .step.active span{ background:var(--green-700); color:#fff; }
.step-bar .step.done span{ background:var(--good); color:#fff; }
.step-panel{ display:none; }
.step-panel.active{ display:block; }

.feat-chip{
  background:#fff;
  border:1px solid var(--border); border-radius:8px;
  padding:10px 13px;
  font-size:13px; cursor:pointer; user-select:none;
  display:flex; gap:8px; align-items:center;
  transition:.15s;
}
.feat-chip input{ display:none; }
.feat-chip:hover{ border-color:var(--gold-500); }
.feat-chip.sel{
  background:rgba(31,122,77,.08);
  border-color:var(--good); color:var(--good);
  font-weight:600;
}
.feat-chip.sel:before{ content:"✓ "; }

/* ============ Role card (register) ============ */
.role-card{
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:16px 12px;
  text-align:center;
  cursor:pointer;
  transition:.18s;
  display:flex; flex-direction:column; gap:4px;
}
.role-card input{ display:none; }
.role-card:hover{ border-color:var(--green-700); }
.role-card.active{
  border-color:var(--gold-500);
  background:rgba(214,168,79,.06);
  box-shadow:0 0 0 3px rgba(214,168,79,.18);
}
.role-card .ico{ font-size:32px; }
.role-card .t{ font-weight:700; color:var(--green-900); font-size:14px; }
.role-card .d{ font-size:12px; color:var(--muted); }

/* ============ Responsive ============ */
@media (max-width:1100px){
  .prop-grid.cols-5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:980px){
  .hero{ padding:32px 24px 110px; min-height:auto; }
  .hero h1, .hero p{ max-width:100%; }
  .hero-search{ grid-template-columns:1fr 1fr; }
  .btn-search{ grid-column:1 / -1; }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .prop-grid.cols-4, .prop-grid.cols-5{ grid-template-columns:repeat(2,1fr); }
  .detail-grid{ grid-template-columns:1fr; }
  .analyze-grid{ grid-template-columns:1fr; }
  .features-strip{ grid-template-columns:1fr 1fr; padding:24px; }
  .filter-grid{ grid-template-columns:1fr 1fr; }
  .filter-row2{ grid-template-columns:1fr 1fr; }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-main{ padding:18px 0 0; }
  .nav{ order:99; flex-basis:100%; gap:2px; }
  .nav a{ padding:6px 10px; font-size:13px; }
  .spec-row{ grid-template-columns:repeat(3,1fr); }
  .dash-greeting{ grid-template-columns:1fr; padding:22px; }
  .dash-greeting .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:580px){
  body{ font-size:14px; }
  .prop-grid{ grid-template-columns:1fr !important; }
  .hero h1{ font-size:24px; }
  .features-strip{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ============================================================
   v4 — Dashboard-style Home (mockup match)
   ============================================================ */

/* === Hero Split Layout === */
.hero-split{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px;
  margin-top:20px;
  align-items:stretch;
}
.hero-left{
  background:linear-gradient(135deg, var(--green-950) 0%, var(--green-900) 60%, var(--green-850) 100%);
  border-radius:var(--radius-lg);
  padding:36px 36px 32px;
  color:#fff;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(214,168,79,.18);
  display:flex; flex-direction:column;
  justify-content:center;
  min-height:440px;
  position:relative;
  overflow:hidden;
}
.hero-left::before{
  content:""; position:absolute;
  right:-50px; top:-50px; width:300px; height:300px;
  background:radial-gradient(circle, rgba(214,168,79,.10) 0%, transparent 70%);
  pointer-events:none;
}
.hero-left h1{
  font-size:clamp(26px, 3vw, 38px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.025em;
  margin:0 0 10px;
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
  position:relative; z-index:2;
}
.hero-left h1 .gold{ color:var(--gold-400); }
.hero-left p{
  color:#dfd5b8; margin:0 0 24px;
  font-size:15px; line-height:1.55;
  position:relative; z-index:2;
}

/* Search card inside hero-left */
.search-card{
  background:rgba(255,255,255,.97);
  border-radius:14px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  position:relative; z-index:2;
  box-shadow:0 14px 35px rgba(0,0,0,.22);
  border:1px solid rgba(214,168,79,.15);
}
.search-card .field label{ color:var(--ink-soft); font-size:12px; }
.search-card .field select, .search-card .field input{
  padding:9px 12px; font-size:13.5px;
  border:1px solid var(--border);
  background:#fff;
}
.search-card .btn-search{
  grid-column:1 / -1;
  height:42px;
  font-weight:700; font-size:14px;
}

/* === Hero Right: Map === */
.hero-right{ display:flex; }
.map-card{
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
  padding:18px;
  display:flex; flex-direction:column;
  flex:1;
  min-height:440px;
  position:relative;
}
.map-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.map-header h3{ color:var(--green-900); font-size:15px; margin:0; }
.map-expand{ font-size:11px; color:var(--green-700); font-weight:600; }
.thailand-map{
  flex:1;
  position:relative;
  background:linear-gradient(135deg,#e8f0e8,#f6f3ea);
  border-radius:12px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:340px;
}
.thailand-map .map-canvas{
  position:relative;
  height:100%;
  aspect-ratio:400/600;
  max-width:100%;
}
.thailand-map img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
.map-marker{
  position:absolute;
  min-width:34px; height:34px;
  background:var(--green-700);
  color:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px;
  border:2px solid #fff;
  box-shadow:0 4px 10px rgba(0,0,0,.28);
  transition:.18s;
  cursor:pointer;
  transform:translate(-50%, -50%);
  z-index:2;
  padding:0 6px;
}
.map-marker:hover{
  transform:translate(-50%, -50%) scale(1.18);
  background:var(--gold-500);
  color:var(--green-950);
  box-shadow:0 6px 16px rgba(214,168,79,.45);
  z-index:5;
}
.map-marker-sm{ min-width:28px; height:28px; font-size:11px; }
.map-marker-lg{ min-width:42px; height:42px; font-size:14px; background:var(--gold-500); color:var(--green-950); }

.map-legend{
  display:flex; gap:14px;
  margin-top:10px;
  font-size:11px;
  color:var(--ink-soft);
  flex-wrap:wrap;
}
.map-legend .dot{
  display:inline-block;
  width:10px; height:10px; border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
}

/* === Category Pills === */
.cat-pills{
  display:flex; gap:10px;
  margin:24px 0 18px;
  flex-wrap:wrap;
}
.cat-pill{
  display:flex; align-items:center; gap:8px;
  padding:11px 22px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  color:var(--ink-soft);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:.15s;
  box-shadow:var(--shadow-xs);
}
.cat-pill:hover{ border-color:var(--gold-500); color:var(--green-800); }
.cat-pill.active{
  background:var(--green-700);
  border-color:var(--green-700);
  color:#fff;
  box-shadow:0 4px 14px rgba(31,122,77,.32);
}
.cat-pill .pill-count{
  background:rgba(0,0,0,.06);
  padding:2px 10px; border-radius:30px;
  font-size:11px; font-weight:700;
  color:inherit;
}
.cat-pill.active .pill-count{
  background:rgba(255,255,255,.22);
  color:#fff;
}

/* === 3-column property grid === */
.prop-grid.cols-3{
  grid-template-columns:repeat(3, 1fr);
}

/* === Analyze Drawer === */
.analyze-drawer{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
}
.analyze-drawer.open{ pointer-events:auto; }
.ad-overlay{
  position:absolute;
  inset:0;
  background:rgba(6,43,34,.55);
  backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity .28s;
}
.analyze-drawer.open .ad-overlay{ opacity:1; }
.ad-panel{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(540px, 100vw);
  background:#fff;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:-20px 0 50px rgba(0,0,0,.25);
}
.analyze-drawer.open .ad-panel{ transform:translateX(0); }
.ad-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-soft), #fff);
}
.ad-close{
  background:transparent;
  border:1px solid var(--border);
  width:34px; height:34px;
  border-radius:50%;
  font-size:22px;
  cursor:pointer;
  color:var(--ink-soft);
  display:grid; place-items:center;
  line-height:1;
}
.ad-close:hover{ background:#f6f3ea; color:var(--green-900); }
.ad-stat{
  background:#fbf9f3;
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  text-align:center;
}
.ad-stat .l{ font-size:11px; color:var(--muted); }
.ad-stat .v{
  font-size:18px; font-weight:800;
  color:var(--green-900);
  letter-spacing:-0.02em;
  line-height:1.2;
}
.ad-stat .u{ font-size:10px; color:var(--muted); }

/* === Responsive for new layout === */
@media (max-width:1100px){
  .prop-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .hero-split{ grid-template-columns:1fr; }
  .hero-left{ min-height:auto; padding:28px; }
  .map-card{ min-height:360px; }
  .ad-panel{ width:100%; }
}
@media (max-width:680px){
  .prop-grid.cols-3{ grid-template-columns:1fr; }
  .cat-pills{ gap:6px; }
  .cat-pill{ padding:9px 16px; font-size:13px; }
  .hero-left h1{ font-size:24px; }
  .search-card{ grid-template-columns:1fr; gap:10px; }
}

/* ============================================================
   Property Map (Google Maps / Leaflet)
   ============================================================ */
.prop-map{
  flex:1;
  width:100%;
  min-height:380px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#e8f0e8;
  position:relative;
  z-index:1;
}

/* Leaflet popup styling override */
.leaflet-popup-content-wrapper{
  border-radius:12px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
  padding:6px !important;
}
.leaflet-popup-content{
  margin:8px !important;
  font-family:"Sarabun",sans-serif !important;
}
.leaflet-container{
  font-family:"Sarabun",sans-serif !important;
}

/* Custom property marker pin (teardrop shape with house icon) */
.leaflet-prop-marker .lpm{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  border:2px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.32);
  position:relative;
  top:-4px;
  transition:.18s;
}
.leaflet-prop-marker .lpm svg{
  transform:rotate(45deg);
}
.leaflet-prop-marker:hover .lpm{
  transform:rotate(-45deg) scale(1.15);
  z-index:1000;
}

/* Leaflet attribution toned down */
.leaflet-control-attribution{
  font-size:10px !important;
  background:rgba(255,255,255,.8) !important;
}

/* ============================================================
   Account Dropdown Menu (header)
   ============================================================ */
.account-menu{ position:relative; }
.account-toggle{
  background:transparent;
  font-family:inherit;
  cursor:pointer;
}
.account-caret{ transition:transform .2s; opacity:.8; }
.account-menu.open .account-caret{ transform:rotate(180deg); }

.account-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:248px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-lg);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px);
  transition:.2s;
  z-index:60;
}
.account-menu.open .account-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.account-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px 12px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.account-avatar{
  width:42px; height:42px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg, var(--green-700), var(--green-900));
  color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:18px;
}
.account-name{ font-weight:700; color:var(--green-900); font-size:14px; line-height:1.2; }
.account-role{ font-size:12px; color:var(--muted); margin-top:2px; }

.account-dropdown a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:9px;
  color:var(--ink);
  font-size:14px;
  font-weight:500;
  transition:.12s;
}
.account-dropdown a:hover{ background:var(--bg-soft); color:var(--green-800); }
.account-dropdown a svg{ color:var(--muted); flex-shrink:0; }
.account-dropdown a:hover svg{ color:var(--green-700); }

.account-divider{
  height:1px; background:var(--border);
  margin:6px 8px;
}
.account-logout{ color:var(--bad) !important; }
.account-logout svg{ color:var(--bad) !important; }
.account-logout:hover{ background:#fbebeb !important; color:var(--bad) !important; }

@media (max-width:980px){
  .account-dropdown{ right:0; min-width:220px; }
}

/* ปุ่มเลือกแบบการ์ด (role-card) ไฮไลต์อัตโนมัติเมื่อ radio ถูกเลือก — ไม่ต้องพึ่ง JS */
.role-card:has(input:checked){
  border-color:var(--gold-500);
  background:rgba(214,168,79,.06);
  box-shadow:0 0 0 3px rgba(214,168,79,.18);
}
.role-card:has(input:checked) .t{ color:var(--gold-600, #b8860b); }

/* ===== Hero CTA buttons ===== */
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.hero-cta .btn{ flex:1 1 auto; min-width:200px; justify-content:center; }
.hero-owner-cta{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--border);
  font-size:14px; color:var(--muted);
}
.hero-owner-cta span{ font-weight:500; }
@media (max-width:640px){
  .hero-cta .btn{ flex:1 1 100%; }
}

/* ===== เมนู CTA ลงประกาศฟรี (เด่นแบบปุ่มทอง) ===== */
.nav .nav-cta{
  background:var(--gold-500,#d6a84f);
  color:var(--green-950,#0d2b22) !important;
  font-weight:700;
  padding:7px 16px !important;
  border-radius:8px;
  margin-left:4px;
  transition:.18s;
}
.nav .nav-cta:hover{ filter:brightness(1.06); box-shadow:0 4px 14px rgba(214,168,79,.4); transform:translateY(-1px); }
.nav .nav-cta.active{ box-shadow:0 0 0 2px rgba(214,168,79,.4); }

/* ===== Beta banner (หน้าแรก) ===== */
.beta-banner{
  background:linear-gradient(90deg,rgba(214,168,79,.16),rgba(31,122,77,.10));
  border:1px solid rgba(214,168,79,.35);
  border-radius:10px;
  padding:11px 16px;
  margin:8px 0 14px;
  font-size:14px;
  color:var(--green-900,#143d2e);
  text-align:center;
}
.beta-banner a{ color:var(--green-800,#1f4d3a); font-weight:700; white-space:nowrap; }
.beta-banner a:hover{ text-decoration:underline; }

/* ===== Property Card component (ยกระดับสู้เว็บใหญ่) ===== */
.prop-badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:4px; align-items:flex-start; z-index:2; max-width:80%; }
.pc-badge{ color:#fff; font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:5px; box-shadow:0 1px 3px rgba(0,0,0,.25); line-height:1.5; }
.pc-specs{ font-size:12.5px; color:var(--ink-soft); margin:4px 0 6px; }
.pc-metrics{ display:flex; gap:8px; margin:8px 0; padding:8px 0; border-top:1px solid var(--line,#eceae3); border-bottom:1px solid var(--line,#eceae3); }
.pc-metrics > div{ flex:1; text-align:center; }
.pc-metrics span{ display:block; font-size:10.5px; color:var(--muted); margin-bottom:2px; }
.pc-metrics b{ font-size:15px; }
.pc-actions{ display:flex; gap:6px; margin-top:10px; }
.pc-actions .btn{ flex:1; justify-content:center; }

/* ===== Map Search layout (หน้าค้นหา) ===== */
.search-split{ display:grid; grid-template-columns:1fr 400px; gap:16px; align-items:start; }
.search-list{ min-width:0; }
.search-map-wrap{ position:sticky; top:76px; }
.search-map{ height:calc(100vh - 120px); min-height:440px; border-radius:12px; overflow:hidden; border:1px solid var(--line,#e6e2d8); z-index:1; }
.search-map-empty{ text-align:center; color:var(--muted); padding:18px; font-size:13px; }
.prop-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){
  .search-split{ grid-template-columns:1fr; }
  .search-map-wrap{ position:static; }
  .search-map{ height:340px; }
  .prop-grid.cols-2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .prop-grid.cols-2{ grid-template-columns:1fr; }
}

/* ============================================================
   PREMIUM POLISH — ยกระดับให้ดูแพงขึ้น (ปรับ class ให้ตรงเว็บจริง)
   ============================================================ */
body{
  background:
    radial-gradient(circle at top left, rgba(214,168,79,.08), transparent 28%),
    linear-gradient(180deg, #f8f5ee 0%, #ffffff 45%, #f7f3ea 100%) !important;
  background-attachment: fixed;
}
.topbar{
  background: rgba(4,31,25,.96) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(214,168,79,.24);
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
}
.search-card{
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.16) !important;
  border: 1px solid rgba(16,35,28,.08) !important;
}
.prop-card{
  border-radius: 18px;
  border: 1px solid rgba(16,35,28,.08);
  box-shadow: 0 14px 38px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.prop-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(15,23,42,.16);
}
.prop-price{
  color: var(--green-900,#062b22);
  font-weight: 800;
}
.btn-primary{
  background: linear-gradient(135deg, var(--green-800,#0b3b2e), var(--green-950,#041f19)) !important;
  border: none;
  box-shadow: 0 12px 30px rgba(6,43,34,.26);
}
.btn-primary:hover{
  filter: brightness(1.08);
  box-shadow: 0 16px 36px rgba(6,43,34,.34);
  transform: translateY(-1px);
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold-400,#f0c76a), var(--gold-500,#d6a84f)) !important;
  color: var(--green-950,#041f19) !important;
  border: none;
  box-shadow: 0 12px 30px rgba(214,168,79,.28);
}
.btn-gold:hover{
  filter: brightness(1.06);
  box-shadow: 0 16px 36px rgba(214,168,79,.4);
  transform: translateY(-1px);
}

/* Hero — เปิดพื้นหลังภาพ SVG พรีเมียม (ซ้อนใต้เฉดเขียวโปร่งแสง ให้ตัวอักษรอ่านชัด) */
.hero-left{
  background:
    linear-gradient(135deg, rgba(4,31,25,.88) 0%, rgba(6,43,34,.74) 55%, rgba(11,59,46,.58) 100%),
    url("../img/hero-bg.svg") center/cover no-repeat !important;
}

/* ป้าย Beta ข้างโลโก้ */
.beta-badge{
  display:inline-block; margin-left:7px; padding:2px 8px;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  color:var(--green-950,#041f19);
  background:linear-gradient(135deg,var(--gold-400,#f0c76a),var(--gold-500,#d6a84f));
  border-radius:999px; vertical-align:middle; text-transform:uppercase;
}

/* ปุ่มสลับภาษา TH/EN */
.lang-switch{ display:flex; gap:2px; align-items:center; margin-right:4px; }
.lang-switch a{ font-size:12px; font-weight:700; color:#bdb592; padding:3px 7px; border-radius:6px; line-height:1; }
.lang-switch a.on{ background:rgba(214,168,79,.18); color:var(--gold-400,#e0bb6a); }
.lang-switch a:hover{ color:#fff; }