/* =====================================================================
   Bangkok99 — Modern UI Theme v1 (International Business Blue)
   อ้างอิงทิศทางดีไซน์ 16 ต.ค. 2569: Primary #155EEF · Navy #0B1736
   Accent #1288A6 · Surface #F5F7FB · White #FFFFFF
   ฟอนต์: Kanit (หัวข้อ) · Sarabun (เนื้อหา) · Inter (อังกฤษ/ตัวเลข)
   ระยะ 8px · มุมโค้ง 12px · Container 1280px · Mobile-first
   ===================================================================== */
:root{
  --b99-primary:#155EEF; --b99-navy:#0B1736; --b99-accent:#1288A6;
  --b99-surface:#F5F7FB; --b99-white:#FFFFFF;
  --b99-text:#0B1736; --b99-text2:#475467; --b99-muted:#98A2B3;
  --b99-border:#E4E7EC; --b99-soft:#EEF4FF; --b99-soft-border:#D8E4FF;
  --b99-radius:12px; --b99-radius-lg:16px; --b99-radius-sm:8px;
  --b99-shadow:0 1px 2px rgba(16,24,40,.06);
  --b99-shadow-md:0 6px 16px rgba(16,24,40,.09);
  --b99-container:1280px;
}
.b99,.b99 *{box-sizing:border-box}
body.b99{margin:0;background:var(--b99-surface);color:var(--b99-text);font-family:'Sarabun',Tahoma,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.b99 h1,.b99 h2,.b99 h3,.b99 h4{margin:0;font-family:'Kanit',Tahoma,sans-serif;font-weight:600;line-height:1.25;color:var(--b99-navy)}
.b99 a:not(.b99-btn):not(.mz-more){color:var(--b99-primary)}
.b99-container{max-width:var(--b99-container);margin:0 auto;padding:0 24px}
.b99-num{font-family:'Inter',sans-serif}
/* ---------- header ---------- */
.b99-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--b99-border)}
.b99-header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.b99-logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:'Kanit',sans-serif;font-weight:700;font-size:21px;color:var(--b99-navy)}
.b99-logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--b99-primary),var(--b99-accent));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.5px}
.b99-logo-img{height:40px;width:auto;display:block}
.b99-header-actions{display:flex;align-items:center;gap:14px}
@media (max-width:640px){.b99-logo-img{height:30px}.b99-lang{display:none}.b99-header-actions{gap:10px}.b99-header .b99-btn{padding:9px 14px;font-size:14px}.b99-header .mz-more{font-size:12.5px}}
@media (max-width:400px){.b99-logo-img{height:26px}.b99-header .b99-btn{padding:9px 10px}}
.b99-lang{font-family:'Inter',sans-serif;font-size:13px;color:var(--b99-muted)}
.b99-lang b{color:var(--b99-primary);font-weight:600}
/* ---------- buttons ---------- */
.b99-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--b99-radius);padding:12px 20px;font-family:'Kanit',sans-serif;font-weight:600;font-size:15px;line-height:1;cursor:pointer;text-decoration:none;transition:filter .15s,border-color .15s,color .15s;white-space:nowrap}
.b99-btn svg{width:18px;height:18px}
.b99-btn-primary{background:var(--b99-primary);color:#fff}
.b99-btn-primary:hover{filter:brightness(.94)}
.b99-btn-secondary{background:#fff;color:var(--b99-navy);border-color:var(--b99-border)}
.b99-btn-secondary:hover{border-color:var(--b99-primary);color:var(--b99-primary)}
.b99-btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
.b99-btn-block{width:100%}
/* ---------- hero ---------- */
.b99-hero{padding:54px 0 34px;background:linear-gradient(180deg,#F7F9FF 0%,var(--b99-surface) 100%);border-bottom:1px solid #EEF1F6}
.b99-badge{display:inline-flex;align-items:center;gap:8px;background:var(--b99-soft);color:var(--b99-primary);border:1px solid var(--b99-soft-border);border-radius:999px;padding:6px 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600}
.b99-hero h1{font-size:clamp(28px,4vw,44px);margin:18px 0 10px;max-width:760px}
.b99-hero .lead{color:var(--b99-text2);font-size:17px;max-width:640px;margin:0 0 24px}
.b99-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--b99-border);border-radius:14px;padding:10px 14px;max-width:720px;box-shadow:var(--b99-shadow)}
.b99-search input{flex:1;border:0;outline:0;background:transparent;font-family:'Sarabun',sans-serif;font-size:15px;color:var(--b99-text)}
.b99-search button{border:0;background:transparent;cursor:pointer;color:var(--b99-text2);display:flex;align-items:center}
.b99-hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px;margin-top:16px}
/* ---------- sections ---------- */
.b99-section{padding:34px 0 6px}
.b99-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.b99-section-head h2{font-size:22px}
.b99-more{font-family:'Kanit',sans-serif;font-size:14px;font-weight:600;text-decoration:none}
/* ---------- cards ---------- */
.b99-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.b99-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.b99-card{display:block;background:#fff;border:1px solid var(--b99-border);border-radius:var(--b99-radius-lg);overflow:hidden;box-shadow:var(--b99-shadow);text-decoration:none;color:inherit;transition:box-shadow .15s}
.b99-card:hover{box-shadow:var(--b99-shadow-md)}
.b99-card-media{aspect-ratio:4/3;background:linear-gradient(135deg,#EEF1F6,#E3E8F0);display:flex;align-items:center;justify-content:center;color:#B6BECB;font-family:'Inter',sans-serif;font-size:13px;overflow:hidden}
.b99-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.b99-card-body{padding:16px 18px 18px}
.b99-chip{display:inline-flex;align-items:center;gap:6px;color:var(--b99-accent);font-family:'Kanit',sans-serif;font-size:12.5px;font-weight:600}
.b99-chip svg{width:14px;height:14px}
.b99-card-title{font-family:'Kanit',sans-serif;font-weight:600;font-size:17px;color:var(--b99-navy);margin:6px 0 4px}
.b99-card-sub{color:var(--b99-muted);font-size:13px}
/* ---------- band ---------- */
.b99-band{background:var(--b99-soft);border:1px solid var(--b99-soft-border);border-radius:20px;padding:26px 30px;margin:40px 0 8px}
.b99-band h3{font-size:22px;margin-bottom:6px}
.b99-band p{color:var(--b99-text2);margin:0 0 16px}
/* ---------- footer ---------- */
.b99-footer{margin-top:44px;background:var(--b99-navy);color:#C7CFE0;padding:34px 0 26px;font-size:14px}
.b99-footer a{color:#fff;text-decoration:none;margin-right:18px;font-family:'Kanit',sans-serif;font-size:14px}
.b99-footer small{display:block;color:#8A94AB;margin-top:14px;font-family:'Inter',sans-serif;font-size:12px}
/* ---------- misc ---------- */
.b99-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:46px 16px;color:var(--b99-muted);font-family:'Kanit',sans-serif}
.b99-previewbar{background:var(--b99-navy);color:#fff;text-align:center;font-family:'Inter',sans-serif;font-size:12px;padding:5px 10px;letter-spacing:.3px}
@media (max-width:920px){.b99-grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.b99-grid-2,.b99-grid-3{grid-template-columns:1fr}.b99-hero-cta{grid-template-columns:1fr}.b99-hero{padding:34px 0 22px}.b99-container{padding:0 16px}}