/* ═══ Fonts ════════════════════════════════════════════════════ */
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-Thin-01.ttf') format('truetype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-Light-02.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-Text-03.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-Medium-04.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-SemiBold-05.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'SukhumvitSet'; src: url('../fonts/SukhumvitSet-Bold-06.ttf') format('truetype'); font-weight: 700; font-display: swap; }

/* ═══ Base ══════════════════════════════════════════════════════ */
*, *::before, *::after { font-family: 'SukhumvitSet', sans-serif; }
html { scroll-behavior: smooth; }

/* ═══ Theme variables ═══════════════════════════════════════════ */
:root {
  --bg-base:      #050400;
  --bg-sec:       #0d0900;
  --bg-card:      rgba(255,255,255,0.03);
  --text-primary: #ffffff;
  --text-muted:   #9ca3af;
  --text-dim:     #6b7280;
  --border-gold:  rgba(200,151,31,0.2);
  --nav-bg:       rgba(5,4,0,0.85);
  --footer-bg:    #000000;
  --input-bg:     rgba(255,255,255,0.04);
}
[data-theme="light"] {
  --bg-base:      #FFFDF0;
  --bg-sec:       #FFF8DC;
  --bg-card:      rgba(255,248,220,0.85);
  --text-primary: #1a1200;
  --text-muted:   #5C4200;
  --text-dim:     #7A5A00;
  --border-gold:  rgba(139,105,20,0.28);
  --nav-bg:       rgba(255,253,240,0.92);
  --footer-bg:    #FFF8DC;
  --input-bg:     rgba(255,248,220,0.7);
}

/* ═══ Apply theme ═══════════════════════════════════════════════ */
body { background-color: var(--bg-base); color: var(--text-primary); transition: background-color .3s, color .3s; }
/* header uses longbg gold band; scrim keeps nav text readable per theme */
nav#navbar {
  background:
    linear-gradient(rgba(5,4,0,.66), rgba(5,4,0,.66)),
    #0d0900 url('../images/longbg.jpg') center center / cover no-repeat !important;
}
[data-theme="light"] nav#navbar {
  background:
    linear-gradient(rgba(255,250,232,.5), rgba(255,250,232,.5)),
    #FFF8DC url('../images/longbg.jpg') center center / cover no-repeat !important;
}

[data-theme="light"] .bg-gray-950 { background-color: var(--bg-base) !important; }
[data-theme="light"] .bg-gray-900 { background-color: var(--bg-sec)  !important; }
[data-theme="light"] .bg-black    { background-color: var(--footer-bg) !important; }
[data-theme="light"] .bg-gray-950.hero-section,
[data-theme="light"] .hero-section { background-color: transparent !important; }

[data-theme="light"] .text-white   { color: var(--text-primary) !important; }
[data-theme="light"] .text-gray-400 { color: var(--text-muted)   !important; }
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-gray-600 { color: var(--text-dim)     !important; }
[data-theme="light"] .text-gray-700,
[data-theme="light"] .text-gray-800 { color: var(--text-dim) !important; }
[data-theme="light"] .border-gray-900 { border-color: rgba(139,105,20,.15) !important; }

/* text on a solid #830710 block stays white — beats the light-theme .text-white override */
html .gold-gradient,
html .gold-gradient.text-white,
html .gold-gradient .text-white,
html .brand-band .text-white { color: #fff !important; }

/* ═══ Gold ══════════════════════════════════════════════════════ */
.gold-gradient { background: #830710; color: #fff; }
.gold-text {
  background: linear-gradient(135deg,#C8971F 0%,#FFD700 40%,#FFEC80 60%,#C8971F 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gold-text-shimmer {
  background: linear-gradient(90deg,#8B6914,#C8971F,#FFD700,#FFEC80,#FFD700,#C8971F,#8B6914);
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.glow-gold    { box-shadow: 0 0 30px rgba(200,151,31,.4); }
.glow-gold-sm { box-shadow: 0 0 15px rgba(200,151,31,.3); }

/* ═══ Shared UI ════════════════════════════════════════════════ */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  backdrop-filter: blur(10px);
}
.section-title-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(200,151,31,.1); border: 1px solid rgba(200,151,31,.3);
  border-radius: 100px; padding: 6px 16px;
  font-size: 13px; font-weight: 600; color: #C8971F;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px;
}
.nav-underline { position: relative; }
.nav-underline::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px;
  background: linear-gradient(90deg,#C8971F,#FFD700);
  transition: width .3s ease;
}
.nav-underline:hover::after { width:100%; }
.card-3d { transition: transform .35s ease, box-shadow .35s ease; }
.card-3d:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(200,151,31,.12); }

/* ═══ Page hero (longbg gold band) ══════════════════════════════ */
.page-hero-bg {
  position: relative;
  background: #0d0900 url('../images/longbg.jpg') center center / cover no-repeat;
}
/* longbg is a bright gold shimmer band — darken for white/gold-text contrast */
.page-hero-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,4,0,.74) 0%, rgba(5,4,0,.55) 55%, rgba(5,4,0,.8) 100%);
  transition: background .3s;
}
/* hero stays a dark gold band in both themes so white/gold-text always reads */
[data-theme="light"] .page-hero-bg::before {
  background: linear-gradient(180deg, rgba(15,10,0,.66) 0%, rgba(15,10,0,.5) 55%, rgba(15,10,0,.72) 100%);
}
.page-hero-bg > .relative-z { position: relative; z-index: 1; }

/* ═══ Text on light buttons / pills (readable, darker than the fill) ═ */
.tag-pill { color:#FACC15; }
[data-theme="light"] .tag-pill { color:#5C3D00; }
[data-theme="light"] .glass-card.text-yellow-400 { color:#830710 !important; }
[data-theme="light"] .hq-badge { color:#830710; }
[data-theme="light"] .province-badge { color:#6B4E00; }

/* ═══ Icons (solid glyphs, single brand tone) ════════════ */
.material-symbols-rounded {
  font-family:'Material Symbols Rounded' !important;
  font-size:inherit;   /* Google's own CSS pins 24px — the wrapper's size must win */
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap;
  word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
}
[data-icon] { display:inline-flex; align-items:center; justify-content:center; }
.brand-ico { color:#830710; }

/* ═══ Language dropdown (native <details>, no JS to open) ═════ */
.lang-dd { position: relative; }
.lang-dd > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-gold); border-radius: 100px;
  padding: 5px 12px; font-size: 13px; font-weight: 600; color: #C8971F;
  transition: border-color .3s, color .3s;
}
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary:hover { border-color: rgba(200,151,31,.55); color: #FFD700; }
.lang-dd[open] > summary .lang-caret { transform: rotate(180deg); }
.lang-caret { transition: transform .25s ease; }
.flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; flex-shrink: 0; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 168px; padding: 6px;
  background: var(--nav-bg); backdrop-filter: blur(20px);
  border: 1px solid var(--border-gold); border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.lang-opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer;
  padding: 9px 12px; border-radius: 10px;
  font-family: 'SukhumvitSet', sans-serif; font-size: 14px; text-align: left;
  color: var(--text-muted); transition: background .2s, color .2s;
}
.lang-opt:hover { background: rgba(200,151,31,.12); color: #FFD700; }
.lang-opt.active { background: rgba(200,151,31,.18); color: #FFD700; font-weight: 700; }
/* mobile menu: dropdown would clip inside the panel, so open it upward-safe */
.lang-dd.lang-dd-up .lang-menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }

/* ═══ Branch page ══════════════════════════════════════════════ */
.branch-card {
  background: var(--bg-card); border:1px solid var(--border-gold); border-radius:24px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease;
}
.branch-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(200,151,31,.15); border-color:rgba(200,151,31,.5); }
.province-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(200,151,31,.1); border:1px solid rgba(200,151,31,.3);
  border-radius:100px; padding:4px 12px; font-size:12px; font-weight:600; color:#C8971F;
}
.hq-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(200,151,31,.2); border:1px solid rgba(200,151,31,.5);
  border-radius:100px; padding:4px 14px; font-size:12px; font-weight:700; color:#FFD700;
}
.map-frame { border-radius:16px; overflow:hidden; border:1px solid rgba(200,151,31,.25); }
.map-frame iframe { width:100%; height:100%; border:0; filter:invert(92%) hue-rotate(180deg) brightness(.75) contrast(.88) saturate(.55); }
[data-theme="light"] .map-frame iframe { filter: none; }

/* ═══ Animations ════════════════════════════════════════════════ */
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes float   { 0%,100%{transform:translateY(0)}     50%{transform:translateY(-10px)} }
.float-anim { animation: float 4s ease-in-out infinite; }

/* ═══ Timeline (about) ══════════════════════════════════════════ */
.timeline-line { position:absolute; left:23px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,#C8971F,#8B6914); }

/* ═══ Scrollbar ════════════════════════════════════════════════ */
::-webkit-scrollbar       { width:6px; }
::-webkit-scrollbar-track { background:var(--bg-base); }
::-webkit-scrollbar-thumb { background:#8B6914; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#C8971F; }

/* ═══ Price change (Draft 1): green rising, red falling ═══════ */
.price-diff      { font-size:.75rem; font-weight:700; min-height:1rem; }
.price-diff.up   { color:#16a34a; }
.price-diff.down { color:#dc2626; }