/* ─── VARIABLES ─── */
:root {
  --navy: #162447;
  --navy-light: #1F3366;
  --gold: #C8963E;
  --gold-light: #E8C878;
  --gold-pale: #FBF5E8;
  --green: #27A844;
  --green-pale: #E8F8ED;
  --bg: #F5F7FA;
  --white: #FFFFFF;
  --text: #1A1A2E;
  --text-light: #5A6178;
  --border: #E2E6EE;
  --shadow: 0 2px 16px rgba(22,36,71,0.08);
  --shadow-hover: 0 8px 32px rgba(22,36,71,0.14);
  --radius: 12px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Sarabun',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; }
button { -webkit-appearance:none; appearance:none; }
input,select,textarea { -webkit-appearance:none; appearance:none; }
h1,h2,h3,h4,h5 { font-family:'Prompt',sans-serif; line-height:1.3; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ─── NAV ─── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(22,36,71,0.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,0.08); }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:64px; }
.nav-logo { font-family:'Prompt',sans-serif; font-weight:700; font-size:22px; color:#fff; display:flex; align-items:center; gap:8px; }
.nav-logo .dot,.footer-logo .dot { width:10px; height:10px; border-radius:50%; background:var(--gold); display:inline-block; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:rgba(255,255,255,0.75); font-size:15px; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(--gold-light); }
.nav-cta { background:var(--gold)!important; color:var(--navy)!important; font-weight:600; padding:8px 20px; border-radius:8px; font-size:14px; transition:all 0.2s; }
.nav-cta:hover { background:var(--gold-light)!important; }
.hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; padding:4px; }
.hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:0.3s; }
.mobile-menu { display:none; flex-direction:column; background:var(--navy); padding:0 24px 16px; }
.mobile-menu a { color:rgba(255,255,255,0.8); padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08); font-size:15px; }
.mobile-menu.open { display:flex; }

/* ─── HERO ─── */
.hero { padding:120px 24px 80px; background:linear-gradient(160deg,var(--navy) 0%,var(--navy-light) 50%,#1a3a6a 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-40%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,rgba(200,150,62,0.12) 0%,transparent 70%); border-radius:50%; }
.hero-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.hero-text h1 { font-size:44px; font-weight:800; color:#fff; margin-bottom:16px; }
.hero-text h1 .highlight { color:var(--gold-light); }
.hero-text p { font-size:18px; color:rgba(255,255,255,0.75); margin-bottom:32px; max-width:480px; }
.hero-badges { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.hero-badge { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:999px; padding:6px 16px; font-size:14px; color:rgba(255,255,255,0.9); }
.hero-badge .icon { color:var(--gold-light); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
/* ─── BUTTONS ─── */
.btn-primary { background:var(--gold); color:var(--navy); font-weight:700; padding:14px 32px; border-radius:10px; font-size:16px; font-family:'Prompt',sans-serif; border:none; cursor:pointer; transition:all 0.25s; display:inline-flex; align-items:center; gap:8px; }
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(200,150,62,0.3); }
.btn-secondary { background:transparent; color:#fff; font-weight:600; padding:14px 32px; border-radius:10px; font-size:16px; font-family:'Prompt',sans-serif; border:1px solid rgba(255,255,255,0.3); cursor:pointer; transition:all 0.25s; }
.btn-secondary:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }

/* ─── HERO CARD ─── */
.hero-card { background:#fff; border-radius:16px; padding:32px; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.hero-card h3 { font-size:16px; font-weight:600; color:var(--navy); margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.stat-item { background:var(--bg); border-radius:10px; padding:16px; text-align:center; }
.stat-item .number { font-family:'Prompt',sans-serif; font-size:28px; font-weight:700; color:var(--navy); }
.stat-item .label { font-size:13px; color:var(--text-light); margin-top:2px; }
.trust-row { display:flex; align-items:center; gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.trust-row p { font-size:13px; color:var(--text-light); line-height:1.4; }

/* ─── SECTIONS ─── */
.section { padding:80px 24px; max-width:1200px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:48px; }
.section-header .eyebrow { font-size:13px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:2px; margin-bottom:8px; }
.section-header h2 { font-size:32px; font-weight:700; color:var(--navy); margin-bottom:12px; }
.section-header p { font-size:16px; color:var(--text-light); max-width:560px; margin:0 auto; }
/* ─── LOAN CARDS ─── */
.loan-filters { display:flex; justify-content:center; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn { padding:8px 20px; border:1px solid var(--border); border-radius:999px; background:#fff; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:500; color:var(--text-light); cursor:pointer; transition:all 0.2s; }
.filter-btn:hover { border-color:var(--gold); color:var(--gold); }
.filter-btn.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.loan-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:24px; }
.loan-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:all 0.3s; position:relative; }
.loan-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); border-color:var(--gold); }
.loan-card-badge { position:absolute; top:16px; right:16px; background:var(--green-pale); color:var(--green); font-size:12px; font-weight:600; padding:4px 10px; border-radius:6px; }
.loan-card-header { padding:24px 24px 16px; display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); }
.bank-logo { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Prompt',sans-serif; font-weight:700; font-size:14px; color:#fff; flex-shrink:0; }
.loan-card-header .info h4 { font-size:16px; font-weight:600; }
.loan-card-header .info p { font-size:13px; color:var(--text-light); }
.loan-card-body { padding:20px 24px; }
.loan-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.loan-detail { background:var(--bg); padding:12px; border-radius:8px; }
.loan-detail .label { font-size:12px; color:var(--text-light); margin-bottom:2px; }
.loan-detail .value { font-family:'Prompt',sans-serif; font-size:18px; font-weight:700; color:var(--navy); }
.loan-detail .value.rate { color:var(--green); }
.loan-detail .value small { font-size:12px; font-weight:400; color:var(--text-light); }
.loan-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.loan-tag { font-size:12px; padding:3px 10px; border-radius:6px; background:var(--gold-pale); color:var(--gold); font-weight:500; }
.loan-card-footer { padding:0 24px 24px; }
.btn-apply { width:100%; padding:12px; background:var(--navy); color:#fff; border:none; border-radius:10px; font-family:'Prompt',sans-serif; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-apply:hover { background:var(--gold); color:var(--navy); }
/* ─── HOW IT WORKS ─── */
.how-section { background:#fff; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:860px; margin:0 auto; align-items:start; }
.how-step { text-align:center; position:relative; background:var(--bg); border-radius:20px; padding:36px 24px 32px; border:1px solid var(--border); }
.how-step::after { content:'›'; position:absolute; right:-15px; top:36px; font-size:28px; font-weight:300; color:var(--gold); line-height:1; z-index:1; }
.how-step:last-child::after { display:none; }
.step-num { width:40px; height:40px; background:var(--gold); color:#fff; border-radius:50%; font-family:'Prompt',sans-serif; font-size:18px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 4px 12px rgba(200,150,62,0.35); }
.step-icon { font-size:42px; line-height:1; margin-bottom:14px; display:block; }
.how-step h4 { font-size:17px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.how-step p { font-size:14px; color:var(--text-light); line-height:1.7; }

/* ─── WHY US ─── */
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card { background:#fff; border-radius:var(--radius); padding:32px; border:1px solid var(--border); transition:all 0.3s; }
.why-card:hover { box-shadow:var(--shadow); border-color:var(--gold); }
.why-card .icon { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.why-card h4 { font-size:17px; font-weight:600; color:var(--navy); margin-bottom:8px; }
.why-card p { font-size:14px; color:var(--text-light); line-height:1.7; }

/* ─── LEAD FORM ─── */
.form-section { background:linear-gradient(160deg,var(--navy) 0%,var(--navy-light) 100%); padding:80px 24px; }
.form-wrapper { max-width:640px; margin:0 auto; text-align:center; }
.form-wrapper h2 { font-size:32px; font-weight:700; color:#fff; margin-bottom:8px; }
.form-wrapper > p { color:rgba(255,255,255,0.7); font-size:16px; margin-bottom:32px; }
.lead-form { background:#fff; border-radius:16px; padding:32px; text-align:left; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-group { display:flex; flex-direction:column; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-size:14px; font-weight:500; color:var(--text); margin-bottom:6px; font-family:'Prompt',sans-serif; }
.form-group input,.form-group select,.form-group textarea { padding:12px 14px; border:1px solid var(--border); border-radius:8px; font-family:'Sarabun',sans-serif; font-size:15px; transition:border-color 0.2s; background:var(--bg); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--gold); background:#fff; }
.form-note { font-size:12px; color:var(--text-light); margin-bottom:20px; line-height:1.6; }
.form-note a { color:var(--gold); text-decoration:underline; }
.btn-submit { width:100%; padding:14px; background:var(--gold); color:var(--navy); border:none; border-radius:10px; font-family:'Prompt',sans-serif; font-size:16px; font-weight:700; cursor:pointer; transition:all 0.25s; }
.btn-submit:hover { background:var(--gold-light); transform:translateY(-1px); }
.btn-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.form-success { text-align:center; padding:40px 20px; }
.form-success .check { font-size:56px; margin-bottom:16px; }
.form-success h3 { color:var(--green); font-size:22px; margin-bottom:8px; }
.form-success p { color:var(--text-light); }

/* ─── ARTICLES ─── */
.articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card { background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); transition:all 0.3s; display:block; }
.article-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.article-img { height:180px; display:flex; align-items:center; justify-content:center; font-size:48px; }
.article-body { padding:20px; }
.article-body .cat { font-size:12px; font-weight:600; color:var(--gold); margin-bottom:6px; }
.article-body h4 { font-size:16px; font-weight:600; color:var(--navy); margin-bottom:8px; line-height:1.5; }
.article-body p { font-size:14px; color:var(--text-light); line-height:1.6; }
.article-body .read-more { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--gold); margin-top:12px; }

/* ─── ARTICLE PAGE ─── */
.article-page { padding:100px 24px 60px; max-width:800px; margin:0 auto; }
.article-page h1 { font-size:32px; font-weight:700; color:var(--navy); margin-bottom:16px; }
.article-page .meta { font-size:14px; color:var(--text-light); margin-bottom:32px; display:flex; gap:16px; }
.article-page .content { font-size:16px; line-height:2; color:var(--text); }
.article-page .content h2 { font-size:22px; color:var(--navy); margin:32px 0 12px; }
.article-page .content h3 { font-size:18px; color:var(--navy); margin:24px 0 8px; }
.article-page .content p { margin-bottom:16px; }
.article-page .content ul,.article-page .content ol { margin:0 0 16px 24px; }
.article-page .content li { margin-bottom:8px; }
/* ─── FOOTER ─── */
.footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:60px 24px 24px; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px; }
.footer-logo { font-size:20px; display:flex; align-items:center; gap:8px; }
.footer h5 { color:#fff; font-size:15px; margin-bottom:16px; }
.footer p { font-size:14px; line-height:1.7; }
.footer a { color:rgba(255,255,255,0.6); font-size:14px; display:block; margin-bottom:8px; }
.footer a:hover { color:var(--gold-light); }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:24px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:13px; }
.footer-disclaimer { max-width:1200px; margin:20px auto 0; font-size:12px; line-height:1.6; color:rgba(255,255,255,0.4); border-top:1px solid rgba(255,255,255,0.06); padding-top:20px; }

/* ─── CALCULATOR ─── */
.calc-page { padding:100px 24px 60px; max-width:900px; margin:0 auto; }
.calc-card { background:#fff; border-radius:16px; padding:40px; box-shadow:var(--shadow); }
.calc-card h1 { text-align:center; font-size:28px; color:var(--navy); margin-bottom:8px; }
.calc-card > p { text-align:center; color:var(--text-light); margin-bottom:32px; }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.calc-inputs { display:flex; flex-direction:column; gap:16px; }
.calc-results { background:var(--bg); border-radius:12px; padding:24px; }
.calc-results h3 { font-size:16px; color:var(--navy); margin-bottom:20px; }
.result-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--border); }
.result-item:last-child { border-bottom:none; }
.result-item .label { font-size:14px; color:var(--text-light); }
.result-item .value { font-family:'Prompt',sans-serif; font-size:20px; font-weight:700; color:var(--navy); }
.result-item .value.highlight { color:var(--gold); font-size:24px; }
.range-value { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.range-value span { font-family:'Prompt',sans-serif; font-size:20px; font-weight:700; color:var(--navy); }
input[type="range"] { width:100%; accent-color:var(--gold); height:8px; }
/* ─── ADMIN ─── */
.admin-page { padding:100px 24px 60px; max-width:1100px; margin:0 auto; }
.admin-login { max-width:400px; margin:120px auto; background:#fff; padding:40px; border-radius:16px; box-shadow:var(--shadow); }
.admin-login h2 { text-align:center; color:var(--navy); margin-bottom:24px; }
.admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.admin-table th { background:var(--navy); color:#fff; padding:14px 16px; text-align:left; font-family:'Prompt',sans-serif; font-size:14px; font-weight:600; }
.admin-table td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; }
.admin-table tr:hover td { background:var(--gold-pale); }
.status-badge { padding:3px 10px; border-radius:6px; font-size:12px; font-weight:600; }
.status-new { background:var(--green-pale); color:var(--green); }
.status-contacted { background:#E3F2FD; color:#1565C0; }
.status-closed { background:#F3E5F5; color:#7B1FA2; }
.admin-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.admin-stat { background:#fff; border-radius:12px; padding:20px; text-align:center; box-shadow:var(--shadow); }
.admin-stat .number { font-family:'Prompt',sans-serif; font-size:32px; font-weight:700; color:var(--navy); }
.admin-stat .label { font-size:13px; color:var(--text-light); }

/* ─── TOAST ─── */
.toast { position:fixed; top:80px; right:24px; background:var(--green); color:#fff; padding:16px 24px; border-radius:10px; font-weight:500; z-index:1000; transform:translateX(120%); transition:transform 0.3s; }
.toast.show { transform:translateX(0); }
.toast.error { background:#E53935; }

/* ─── PRIVACY / TERMS PAGE ─── */
.legal-page { padding:100px 24px 60px; max-width:800px; margin:0 auto; }
.legal-page h1 { font-size:32px; color:var(--navy); margin-bottom:24px; }
.legal-page h2 { font-size:20px; color:var(--navy); margin:28px 0 12px; }
.legal-page p,.legal-page li { font-size:15px; line-height:1.9; color:var(--text); margin-bottom:12px; }
.legal-page ul { margin:0 0 16px 24px; }
/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:40px;}
  .hero-text h1{font-size:32px;}
  .how-grid{grid-template-columns:1fr 1fr;gap:20px;}
  .how-step::after{display:none;}
  .why-grid{grid-template-columns:1fr 1fr;}
  .articles-grid{grid-template-columns:1fr 1fr;}
  .footer-inner{grid-template-columns:1fr 1fr;}
  .loan-grid{grid-template-columns:1fr;}
  .ins-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .calc-grid{grid-template-columns:1fr;}
  .admin-stats{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
}
@media(max-width:640px){
  .quiz-options{-webkit-flex-wrap:wrap;flex-wrap:wrap;}
  .quiz-opt{-webkit-flex:0 0 calc(50% - 6px);flex:0 0 calc(50% - 6px);max-width:none;}
  .compare-tabs{gap:6px;}
  .compare-tab{padding:8px 16px;font-size:13px;}
  .faq-list{gap:8px;}
  .why-grid{grid-template-columns:1fr;}
  .articles-grid{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .hero{padding:100px 16px 60px;}
  .section{padding:60px 16px;}
  .how-grid{grid-template-columns:1fr;}
  .hero-text h1{font-size:28px;}
  .hero-text p{font-size:16px;}
  .section-header h2{font-size:24px;}
  .section-header p{font-size:15px;}
  .footer-inner{grid-template-columns:1fr;}
  .admin-stats{grid-template-columns:1fr;}
  .admin-table{font-size:13px;}
  .admin-table th,.admin-table td{padding:8px 10px;}
  .calc-card{padding:24px;}
  .loan-card-header{flex-wrap:wrap;gap:10px;}
  .hero-card{padding:24px;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .stat-item .number{font-size:22px;}
  .how-grid{gap:16px;}
  .quiz-section{padding:48px 0;}
  .quiz-box{padding:24px 16px;}
  .quiz-opt{padding:14px 10px;font-size:13px;}
  .quiz-opt .q-icon{font-size:24px;}
  .compare-table{font-size:13px;}
  .compare-table th,.compare-table td{padding:10px 12px;}
  .share-bar{flex-wrap:wrap;gap:8px;}
  .breadcrumb{font-size:13px;}
}

/* ─── INSURANCE ─── */
.ins-tabs { display:flex; justify-content:center; gap:8px; margin-bottom:40px; flex-wrap:wrap; }
.ins-tab { padding:10px 24px; border:1px solid var(--border); border-radius:999px; background:#fff; font-family:'Sarabun',sans-serif; font-size:14px; font-weight:500; color:var(--text-light); cursor:pointer; transition:all 0.2s; }
.ins-tab:hover { border-color:var(--gold); color:var(--gold); }
.ins-tab.active { background:var(--navy); color:#fff; border-color:var(--navy); }
.ins-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; }
.ins-card { background:#fff; border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; transition:all 0.3s; position:relative; }
.ins-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.ins-type-badge { display:inline-block; font-size:12px; font-weight:600; padding:4px 12px; border-radius:6px; margin-bottom:12px; }
.ins-highlight { background:var(--bg); border-radius:8px; padding:14px 16px; margin-bottom:4px; }
.ins-highlight-text { font-family:'Prompt',sans-serif; font-size:15px; font-weight:600; color:var(--navy); line-height:1.4; }
.ins-sub { font-size:13px; color:var(--text-light); margin-top:4px; }
.ins-card .loan-card-body { padding:20px 24px; }
.ins-disclaimer { text-align:center; font-size:13px; color:var(--text-light); margin-top:32px; padding:12px; background:var(--bg); border-radius:8px; }
.ins-card.hidden, .loan-card.hidden { display:none; }

/* ─── ANIMATIONS ─── */
@media(prefers-reduced-motion:no-preference){
  .loan-card,.why-card,.article-card{opacity:0;transform:translateY(20px);animation:fadeUp 0.5s ease forwards;}
  .loan-card:nth-child(1){animation-delay:0.1s;}
  .loan-card:nth-child(2){animation-delay:0.2s;}
  .loan-card:nth-child(3){animation-delay:0.3s;}
  @keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
}

/* ─── BREADCRUMB ─── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-light);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a{color:var(--text-light)}
.breadcrumb a:hover{color:var(--navy);text-decoration:underline}
.breadcrumb .sep{color:var(--border)}

/* ─── SHARE BAR ─── */
.share-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:32px 0;padding:20px 24px;background:var(--bg);border-radius:12px}
.share-bar>span{font-size:14px;color:var(--text-light);font-weight:500;white-space:nowrap}
.share-btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:'Sarabun',sans-serif;transition:all .2s;text-decoration:none;display:inline-block}
.share-fb{background:#1877F2;color:#fff!important}
.share-fb:hover{background:#166FE5}
.share-tw{background:#000;color:#fff!important}
.share-tw:hover{background:#333}
.share-copy{background:var(--border);color:var(--text)!important}
.share-copy:hover{background:var(--navy);color:#fff!important}

/* ─── RELATED ARTICLES ─── */
.related-section{margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
.related-section h3{font-size:20px;color:var(--navy);margin-bottom:20px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}

/* ─── ARTICLE SEARCH ─── */
.search-form{display:flex;gap:8px;max-width:500px;margin:0 auto 28px}
.search-input{flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:8px;font-family:'Sarabun',sans-serif;font-size:15px;background:#fff;color:var(--text)}
.search-input:focus{outline:none;border-color:var(--navy)}
.search-btn{padding:10px 20px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-family:'Prompt',sans-serif;font-weight:600;cursor:pointer;font-size:14px;white-space:nowrap}
.search-btn:hover{background:var(--navy-light)}
.no-results{text-align:center;padding:60px;color:var(--text-light)}

/* ─── FAQ ─── */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{background:#fff;border-radius:var(--radius);border:1px solid var(--border);margin-bottom:12px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:none;border:none;cursor:pointer;font-family:'Prompt',sans-serif;font-size:15px;font-weight:600;color:var(--navy);text-align:left;gap:12px}
.faq-q:hover{background:var(--bg)}
.faq-icon{font-size:22px;color:var(--gold);flex-shrink:0;transition:transform .3s;line-height:1}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a.open{max-height:500px}
.faq-a p{padding:0 24px 18px;color:var(--text-light);line-height:1.85;font-size:15px}
.faq-item.active .faq-icon{transform:rotate(45deg)}

/* ─── QUIZ ─── */
.quiz-section{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-light) 100%);padding:64px 0}
.quiz-section .section-header .eyebrow{color:var(--gold-light)}
.quiz-section .section-header h2{color:#fff}
.quiz-section .section-header p{color:rgba(255,255,255,.7)}
.quiz-box{max-width:720px;margin:0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:36px}
.quiz-label{font-size:18px;font-weight:600;color:#fff;margin-bottom:24px;font-family:'Prompt',sans-serif;text-align:center}
.quiz-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.quiz-opt{flex:1 1 130px;max-width:180px}
.quiz-opt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.15);border-radius:12px;font-weight:600;color:rgba(255,255,255,.9);font-size:14px;transition:all .2s;text-decoration:none;font-family:'Prompt',sans-serif;text-align:center}
.quiz-opt:hover{border-color:var(--gold);background:rgba(200,150,62,.15);transform:translateY(-2px);color:#fff}
.quiz-opt .q-icon{font-size:30px}

/* ─── COMPARE TABLE ─── */
.compare-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.compare-tab{padding:10px 24px;border-radius:999px;background:#fff;font-family:'Prompt',sans-serif;font-size:14px;font-weight:600;color:var(--text-light);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;box-shadow:0 0 0 1.5px var(--border)}
.compare-tab:hover{color:var(--navy);box-shadow:0 0 0 1.5px var(--navy)}
.compare-tab.active{background:var(--navy);color:#fff;box-shadow:0 0 0 1.5px var(--navy)}
.compare-panel{display:none}
.compare-panel.active{display:block}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow)}
.compare-table{width:100%;border-collapse:collapse;background:#fff;font-size:14px;min-width:600px}
.compare-table th{background:var(--navy);color:#fff;padding:12px 16px;text-align:left;font-family:'Prompt',sans-serif;font-size:13px;font-weight:600;white-space:nowrap}
.compare-table td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:hover td{background:var(--bg)}
.rate-badge{display:inline-block;background:var(--green-pale);color:var(--green);font-weight:700;padding:3px 10px;border-radius:6px;font-size:13px;white-space:nowrap}
.apply-sm{display:inline-block;padding:6px 14px;background:var(--gold);color:var(--navy)!important;border-radius:6px;font-weight:700;font-size:12px;font-family:'Prompt',sans-serif;white-space:nowrap}
.apply-sm:hover{background:var(--gold-light)}
.compare-logo{width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;vertical-align:middle;margin-right:8px}

/* ─── ABOUT PAGE ─── */
.about-hero{background:linear-gradient(135deg,var(--navy),#1a3a6a);color:#fff;border-radius:16px;padding:52px 40px;text-align:center;margin-bottom:48px}
.about-hero h1{color:#fff;font-size:32px;margin-bottom:12px}
.about-hero p{color:rgba(255,255,255,.8);font-size:18px;max-width:500px;margin:0 auto}
.about-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin:32px 0}
.about-val{background:var(--bg);border-radius:12px;padding:24px;text-align:center}
.about-val .aval-icon{font-size:36px;margin-bottom:12px}
.about-val h4{color:var(--navy);margin-bottom:8px;font-size:15px}
.about-val p{font-size:13px;color:var(--text-light);line-height:1.7}
.about-promise{background:var(--gold-pale);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:20px 24px;margin:32px 0}

/* ─── 404 PAGE ─── */
.page-404{padding:120px 24px 80px;text-align:center;min-height:65vh;display:flex;align-items:center;justify-content:center}
.page-404-inner{max-width:440px}
.page-404 .big-num{font-family:'Prompt',sans-serif;font-size:96px;font-weight:800;color:var(--border);line-height:1}
.page-404 h1{font-size:26px;color:var(--navy);margin:12px 0}
.page-404 p{color:var(--text-light);margin-bottom:32px;line-height:1.8}
.page-404-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.page-404-actions .btn-secondary{color:var(--navy);border-color:var(--border)}

/* ─── SCROLL TO TOP ─── */
#scrollTop{position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:var(--gold);color:#fff;font-size:22px;line-height:1;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:999}
#scrollTop.visible{opacity:1;visibility:visible;transform:translateY(0)}
#scrollTop:hover{background:var(--gold-dark,#c9982b)}

@media(max-width:640px){
  .quiz-options{grid-template-columns:1fr 1fr}
  .about-values{grid-template-columns:1fr 1fr}
  .about-hero{padding:36px 20px}
  .share-bar{flex-direction:column;align-items:flex-start}
  .faq-q{font-size:14px;padding:14px 16px}
  .faq-a p{padding:0 16px 14px}
}