/* =====================================================================
   Used Car Dealer Management System  -  Theme
   โทนสี: ขาว / เทาอ่อน / น้ำเงินเข้ม / เขียว(สำเร็จ) / ส้ม(รอ) / แดง(ปัญหา)
   ===================================================================== */
:root{
  --navy:#0f2c54;
  --navy-2:#16396b;
  --navy-soft:#1d4e89;
  --blue:#2f6fed;
  --green:#1aa260;
  --orange:#f59016;
  --red:#e23b3b;
  --gray-bg:#f4f6fa;
  --gray-line:#e6eaf0;
  --text:#243042;
  --muted:#7a869a;
  --sidebar-w:256px;
  --header-h:62px;
  /* สีเน้นเฉพาะโซน Pricing (ม่วง) */
  --price-primary:#785B9B;
  --price-primary-dk:#5f4580;
  --price-soft:#f3eefa;
}

*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;max-width:100%}
/* กัน Bootstrap .row negative-margin ทำให้หน้าล้นขวาบนมือถือ */
.row{margin-left:0;margin-right:0}
.row > *{padding-left:calc(var(--bs-gutter-x,1.5rem) * .5);padding-right:calc(var(--bs-gutter-x,1.5rem) * .5)}
body{
  margin:0;font-family:"Sarabun","Segoe UI",Tahoma,sans-serif;
  background:var(--gray-bg);color:var(--text);font-size:14.5px;
}
a{text-decoration:none;color:inherit}
.text-muted2{color:var(--muted)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);padding:20px}
.login-card{background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:100%;max-width:410px;padding:38px 34px}
.login-logo{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:30px;margin:0 auto 14px}
.login-accounts{font-size:12.5px;background:var(--gray-bg);border-radius:10px;padding:10px 12px;margin-top:16px;color:var(--muted)}
.login-accounts code{cursor:pointer;color:var(--blue)}

/* ---------- Layout ---------- */
.app-shell{display:flex;min-height:100vh;max-width:100vw;overflow-x:hidden}
.main,.content{overflow-x:hidden}
.sidebar{
  width:var(--sidebar-w);background:var(--navy);color:#cdd7e6;position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;z-index:1040;transition:transform .25s ease,width .2s ease;overflow:hidden}
.sidebar-brand{height:var(--header-h);display:flex;align-items:center;gap:10px;padding:0 16px;flex-shrink:0;
  color:#fff;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08);background:var(--navy);position:relative}
.sidebar-brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),#5b9bff);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.brand-text{line-height:1.15}
.collapse-btn{margin-left:auto;background:rgba(255,255,255,.08);border:none;color:#cdd7e6;width:26px;height:26px;
  border-radius:7px;align-items:center;justify-content:center;cursor:pointer;font-size:11px;flex-shrink:0}
.collapse-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}
.sidebar-nav::-webkit-scrollbar{width:6px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.sidebar-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}

.nav-group-title{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#6f81a0;padding:14px 18px 6px}
.nav-link2{display:flex;align-items:center;gap:11px;padding:9px 18px;color:#cdd7e6;cursor:pointer;
  border-left:3px solid transparent;font-size:14px;white-space:nowrap}
.nav-link2 i{width:20px;text-align:center;font-size:15px}
.nav-link2:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-link2.active{background:var(--navy-2);color:#fff;border-left-color:var(--blue)}

/* accordion group */
.nav-group-head{display:flex;align-items:center;gap:11px;padding:11px 18px;color:#b6c1d4;cursor:pointer;
  font-size:13.5px;font-weight:600;user-select:none;white-space:nowrap;border-left:3px solid transparent}
.nav-group-head:hover{color:#fff;background:rgba(255,255,255,.04)}
.nav-group-head.active{color:#fff;background:var(--navy-2);border-left-color:var(--blue)}
.nav-group-head .grp-ico{width:20px;text-align:center;font-size:15px;flex-shrink:0}
.nav-group-head .grp-name{flex:1;overflow:hidden;text-overflow:ellipsis}
.nav-group-head .chev{font-size:11px;transition:transform .2s;color:#7e8ba6}
.nav-group-head .chev.open{transform:rotate(180deg)}
.nav-sub{padding-bottom:5px}
.nav-link2.sub{padding:8px 18px 8px 28px;font-size:13.3px;gap:9px;color:#c2cce0}
.nav-link2.sub .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);flex-shrink:0}
.nav-link2.sub i{font-size:14px;width:17px}
.nav-link2.sub.active{background:var(--navy-2);color:#fff;border-left-color:var(--blue);padding-left:25px}
.nav-link2.sub.active .dot{background:var(--blue)}
.logout-btn{border-radius:9px;background:rgba(255,255,255,.06)}

/* super admin tone */
.sidebar-super .nav-group-head.active,.sidebar-super .nav-link2.sub.active{background:#23263a;border-left-color:#7d54d1}

/* mini (icon-only) mode */
.sidebar.mini{width:74px;overflow:visible}
.sidebar.mini .sidebar-brand{justify-content:center;padding:0}
.sidebar.mini .collapse-btn{position:absolute;right:-12px;top:18px;background:var(--blue);color:#fff;z-index:6;box-shadow:0 2px 7px rgba(0,0,0,.35)}
.sidebar.mini .sidebar-nav{overflow:visible}
.nav-link2.mini-item{justify-content:center;padding:13px 0;margin:4px 9px;border-radius:11px;border-left:none}
.nav-link2.mini-item i{font-size:18px;width:auto}
.nav-link2.mini-item.active{background:var(--navy-2);color:#fff}
.sidebar-super .nav-link2.mini-item.active{background:#23263a}
.sidebar.mini .logout-btn{justify-content:center;padding:12px 0}

.main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-width:0;transition:margin-left .2s ease}
.shell-mini .main{margin-left:74px}
.topbar{height:var(--header-h);background:#fff;border-bottom:1px solid var(--gray-line);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:1030}
.topbar h1{font-size:17px;margin:0;font-weight:700}
.content{padding:22px;flex:1}

.btn-burger{display:none;background:none;border:none;font-size:20px;color:var(--navy)}
.user-chip{display:flex;align-items:center;gap:9px;cursor:pointer}
.sub-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;font-size:13px;
  font-weight:600;margin-right:14px;white-space:nowrap;border:1px solid transparent}
.sub-chip.sub-green{background:#e4f7ee;color:#0c7a44;border-color:#bfe8d3}
.sub-chip.sub-orange{background:#fdeccf;color:#a35e00;border-color:#f6d9a6}
.sub-chip.sub-red{background:#fbe2e2;color:#b21f1f;border-color:#f3c4c4}
@media (max-width:575px){ .sub-chip{display:none} }
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:600}

/* ---------- Cards ---------- */
.stat-card{background:#fff;border-radius:14px;padding:16px 18px;border:1px solid var(--gray-line);
  display:flex;align-items:center;gap:14px;height:100%;transition:.15s}
.stat-card:hover{box-shadow:0 6px 18px rgba(15,44,84,.08);transform:translateY(-2px)}
.stat-card > div:last-child{flex:1;min-width:0}   /* กันข้อความไทยตกบรรทัดทีละตัว */
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0}
.stat-value{font-size:22px;font-weight:700;line-height:1.1;word-break:break-word}
.stat-label{font-size:12.5px;color:var(--muted)}
.bg-navy{background:var(--navy)!important}.bg-blue{background:var(--blue)!important}
.bg-green{background:var(--green)!important}.bg-orange{background:var(--orange)!important}
.bg-red{background:var(--red)!important}.bg-purple{background:#7d54d1!important}
.bg-teal{background:#12a4a4!important}.bg-gray{background:#64748b!important}
.text-navy{color:var(--navy)!important}.text-green{color:var(--green)!important}
.text-orange{color:var(--orange)!important}.text-red{color:var(--red)!important}

.panel{background:#fff;border-radius:14px;border:1px solid var(--gray-line);padding:18px}
.panel-title{font-weight:700;font-size:15px;margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ---------- Table ---------- */
.table-wrap{background:#fff;border-radius:14px;border:1px solid var(--gray-line);overflow:hidden}
.table-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 16px;border-bottom:1px solid var(--gray-line)}
.table-toolbar .form-control,.table-toolbar .form-select{height:38px}
table.data{width:100%;border-collapse:collapse;font-size:13.8px}
table.data th{background:#fafbfd;text-align:left;padding:11px 14px;color:var(--muted);
  font-weight:600;white-space:nowrap;border-bottom:1px solid var(--gray-line);font-size:12.5px}
table.data td{padding:10px 14px;border-bottom:1px solid #f1f3f7;vertical-align:middle}
table.data tr:hover td{background:#fafcff}
table.data tr:last-child td{border-bottom:none}
.table-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;flex-wrap:wrap;gap:10px}

/* ---------- Badge ---------- */
.badge2{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.badge-green{background:#e4f7ee;color:#0c7a44}
.badge-orange{background:#fdeccf;color:#a35e00}
.badge-red{background:#fbe2e2;color:#b21f1f}
.badge-blue{background:#e3edfd;color:#1b50b8}
.badge-gray{background:#eceff4;color:#516079}
.badge-purple{background:#efe7fb;color:#5a31a8}

/* ---------- Misc ---------- */
.btn-navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff}
.icon-btn{border:none;background:none;color:var(--muted);padding:4px 7px;border-radius:7px;cursor:pointer}
.icon-btn:hover{background:var(--gray-bg);color:var(--navy)}
.icon-btn.danger:hover{color:var(--red)}
.form-label{font-weight:600;font-size:13px;margin-bottom:4px}
.required:after{content:" *";color:var(--red)}
.modal-content{border:none;border-radius:16px}
.spinner-page{display:flex;justify-content:center;align-items:center;padding:60px;color:var(--muted)}
.empty-state{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-state i{font-size:40px;opacity:.4;margin-bottom:10px}
.toast-box{position:fixed;top:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:10px}
.toast-item{background:#fff;border-radius:11px;padding:13px 16px;box-shadow:0 8px 26px rgba(0,0,0,.16);
  display:flex;align-items:center;gap:11px;min-width:260px;border-left:4px solid var(--blue);animation:slidein .2s}
.toast-item.ok{border-left-color:var(--green)}.toast-item.err{border-left-color:var(--red)}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
.kpi-mini{font-size:12.5px;color:var(--muted)}
.chip-link{cursor:pointer;color:var(--blue)}
/* marketing */
.chip-check{padding:6px 13px;border-radius:20px;border:1px solid var(--gray-line);font-size:13px;cursor:pointer;user-select:none;background:#fff}
.chip-check.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.coupon-code{font-family:'Courier New',monospace;font-weight:700;letter-spacing:1px;background:repeating-linear-gradient(90deg,#eef2f8,#eef2f8 2px,#fff 2px,#fff 4px);
  border:1px dashed var(--navy);color:var(--navy);padding:3px 10px;border-radius:6px;display:inline-block}

/* ---------- Super Admin sidebar (โทนต่าง) ---------- */
.sidebar-super{background:#13151f}
.sidebar-super .sidebar-brand{background:#13151f}
.sidebar-super .nav-link2.active{background:#23263a;border-left-color:#7d54d1}

/* ---------- Public pages ---------- */
.pub-nav{height:64px;background:#fff;border-bottom:1px solid var(--gray-line);display:flex;align-items:center;
  justify-content:space-between;padding:0 26px;position:sticky;top:0;z-index:100}
.pub-brand{font-weight:800;font-size:19px;color:var(--navy);display:flex;align-items:center;gap:9px}
.pub-brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--navy),var(--blue));
  color:#fff;display:flex;align-items:center;justify-content:center}
.pub-menu{display:flex;align-items:center;gap:18px}
.pub-menu a:not(.btn){color:var(--text);font-weight:500;font-size:14.5px}
.pub-menu a:not(.btn).router-link-active{color:var(--blue)}
.pub-menu a.btn-navy{color:#fff}
.pub-menu a.btn-light{color:var(--text)}
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 60%,var(--blue) 130%);color:#fff;padding:80px 20px;text-align:center}
.hero-inner{max-width:760px;margin:0 auto}
.hero h1{font-size:42px;font-weight:800;line-height:1.15;margin:10px 0 16px}
.hero p{font-size:17px;opacity:.9;margin-bottom:26px}
.feature-card{background:#fff;border:1px solid var(--gray-line);border-radius:14px;padding:22px 16px;text-align:center;height:100%;position:relative;overflow:hidden}
.feature-card i{font-size:30px;color:var(--blue)}
.feature-clickable{cursor:pointer;transition:.15s}
.feature-clickable:hover{box-shadow:0 10px 26px rgba(15,44,84,.12);transform:translateY(-3px);border-color:var(--blue)}
.feature-peek{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:#fff;font-size:12px;
  padding:6px;transform:translateY(100%);transition:.18s}
.feature-clickable:hover .feature-peek{transform:translateY(0)}
/* แกลเลอรีตัวอย่างหน้าจอ */
.screen-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:18px}
.screen-tabs button{border:1px solid var(--gray-line);background:#fff;color:var(--text);font-size:13.5px;
  padding:7px 15px;border-radius:20px;cursor:pointer;font-weight:500}
.screen-tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.screen-stage{max-width:980px;margin:0 auto}
.screen-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--gray-line);
  box-shadow:0 16px 50px rgba(15,44,84,.18);cursor:zoom-in;background:#fff}
.screen-frame img{width:100%;display:block}
.screen-zoom{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:10px;background:rgba(15,44,84,.65);
  color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:.15s}
.screen-frame:hover .screen-zoom{opacity:1}
.lightbox{position:fixed;inset:0;background:rgba(8,16,30,.88);z-index:3000;display:flex;align-items:center;justify-content:center;padding:30px;cursor:zoom-out}
.lightbox img{max-width:96%;max-height:92%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:none;background:#fff;color:var(--navy);font-size:18px;cursor:pointer}
.price-card{background:#fff;border:1px solid var(--gray-line);border-radius:16px;padding:26px 22px;height:100%;position:relative}
.price-card.featured{border:2px solid var(--blue);box-shadow:0 12px 34px rgba(47,111,237,.16);transform:scale(1.02)}
.price-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;
  font-size:12px;font-weight:600;padding:3px 14px;border-radius:20px}
.price-amount{font-size:30px;font-weight:800;color:var(--navy)}
.price-amount span{font-size:14px;font-weight:400;color:var(--muted)}
.price-feats{list-style:none;padding:0;margin:14px 0;font-size:14px}
.price-feats li{padding:5px 0;border-bottom:1px dashed var(--gray-line)}
.cta-band{background:var(--navy);color:#fff;text-align:center;padding:50px 20px}
.car-card{background:#fff;border:1px solid var(--gray-line);border-radius:14px;overflow:hidden;cursor:pointer;transition:.15s;height:100%}
.car-card:hover{box-shadow:0 10px 26px rgba(15,44,84,.12);transform:translateY(-3px)}
.car-img{height:140px;background:linear-gradient(135deg,#dbe4f0,#eef2f8);display:flex;align-items:center;justify-content:center;color:#9fb2cc;font-size:46px;overflow:hidden}
.car-img img{width:100%;height:100%;object-fit:cover}
.car-img-lg{height:230px;background:linear-gradient(135deg,#dbe4f0,#eef2f8);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#9fb2cc;font-size:72px}

/* ---------- Marketplace detail modal ---------- */
.gallery-main{position:relative;height:300px;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#dbe4f0,#eef2f8);display:flex;align-items:center;justify-content:center}
.gallery-main img{width:100%;height:100%;object-fit:cover}
/* วิดีโอหลัก: auto fit ในกรอบ ไม่ล้น (contain = เห็นทั้งเฟรม พื้นหลังดำ) */
.gallery-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.gallery-ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:#9fb2cc}
.gallery-ph i{font-size:74px}
.gallery-ph span{font-size:13px}
/* ปุ่ม Play ใหญ่ตรงกลาง (โชว์ก่อนเริ่มเล่น) */
.gallery-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;border:none;background:rgba(15,44,84,.78);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .15s,background .15s;z-index:2}
.gallery-play:hover{background:var(--blue,#2563eb);transform:translate(-50%,-50%) scale(1.08)}
.gallery-play i{margin-left:3px}
/* Badge "มีวิดีโอ" มุมบนกรอบใหญ่ */
.gallery-vbadge{position:absolute;top:10px;left:10px;background:rgba(220,38,38,.95);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:3;pointer-events:none}
.gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{position:relative;width:72px;height:56px;border-radius:9px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:linear-gradient(135deg,#dbe4f0,#eef2f8);display:flex;align-items:center;justify-content:center;color:#aebccf}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{border-color:var(--blue)}
.thumb-ph{cursor:default;font-size:18px}
/* Thumbnail วิดีโอ: ไอคอน Play ทับกลาง + label VIDEO */
.thumb-vbg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f2937,#374151);color:#cbd5e1;font-size:20px}
.thumb-video::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.18)}
.thumb-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;z-index:2}
.thumb-play i{margin-left:1px}
.thumb-vlabel{position:absolute;bottom:2px;left:2px;background:rgba(220,38,38,.95);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.5px;padding:1px 4px;border-radius:4px;z-index:2}
.hl-wrap{display:flex;flex-wrap:wrap;gap:8px}
.hl-chip{display:inline-flex;align-items:center;gap:5px;background:#e4f7ee;color:#0c7a44;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:20px}
.spec-card{border:1px solid var(--gray-line);border-radius:13px;padding:14px 16px;margin-bottom:14px}
.spec-head{font-weight:700;font-size:14px;color:var(--navy);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.spec-grid > div{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;border-bottom:1px dashed var(--gray-line);padding-bottom:7px}
.spec-grid span{color:var(--muted)}
.calc-card{background:#f7faff}
.calc-result{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border-radius:10px;padding:11px 14px}
.calc-monthly{margin-left:auto;text-align:right}
.calc-monthly span{color:var(--muted)}
.calc-monthly div{font-size:24px;font-weight:800;color:var(--green);line-height:1.1}
.calc-monthly small{font-size:13px;color:var(--muted);font-weight:400}
.contact-card{background:var(--gray-bg);border:none}
@media (max-width:575px){ .gallery-main{height:220px} .spec-grid{grid-template-columns:1fr} }
.car-body{padding:13px 15px}
.car-price{font-weight:800;color:var(--green);font-size:18px;margin:5px 0}
.pub-footer{background:#0d1b30;color:#9fb2cc;text-align:center;padding:26px 20px;font-size:13.5px}
.stepper{display:flex;justify-content:center;gap:8px}
.stepper .step{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13.5px;font-weight:500}
.stepper .step span{width:26px;height:26px;border-radius:50%;background:var(--gray-line);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px}
.stepper .step.active{color:var(--navy)}
.stepper .step.active span{background:var(--blue)}
.stepper .step.done span{background:var(--green)}
.stepper .step:not(:last-child):after{content:'';width:34px;height:2px;background:var(--gray-line);margin-left:6px}
.pub-brand{white-space:nowrap}
@media (max-width:600px){
  .hero{padding:48px 16px}
  .hero h1{font-size:28px}
  .hero p{font-size:15px}
  .pub-nav{padding:0 12px}
  .pub-brand{font-size:16px;gap:6px}
  .pub-brand .logo{width:30px;height:30px;font-size:16px}
  .pub-menu{gap:6px}
  .pub-menu a:not(.btn){display:none}        /* ซ่อนลิงก์ข้อความ เหลือปุ่ม */
  .pub-menu a.btn{padding:7px 11px;font-size:12.5px;white-space:nowrap}
  .price-card.featured{transform:none}        /* กันการ์ดราคาล้นจอ */
}

/* ---------- Responsive ---------- */
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1035}
@media (max-width:991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .btn-burger{display:block}
  .backdrop.show{display:block}
}
@media (max-width:575px){
  .content{padding:14px}
  .topbar{padding:0 14px}
  .topbar h1{font-size:15px}
  .login-wrap{padding:14px}
  .login-card{padding:26px 20px}
  .stat-card{padding:13px;gap:11px}
  .stat-icon{width:42px;height:42px;font-size:18px}
  .stat-value{font-size:19px}
  .stat-label{font-size:12px}
  .panel{padding:14px}
}

/* =====================================================================
   PRICING (Enterprise SaaS redesign) — โซนราคาเน้นสีม่วง --price-primary
   ===================================================================== */
.pricing-wrap{background:linear-gradient(180deg,#faf8fd 0%,#fff 320px);padding:54px 0 24px}
.pricing-title{font-size:30px;color:var(--navy);letter-spacing:-.4px}
.pricing-wrap .badge2{background:var(--price-soft);color:var(--price-primary);border:none;font-weight:600;padding:6px 14px;border-radius:30px;display:inline-block;font-size:13px}

/* Toggle รายเดือน/รายปี */
.bill-toggle{display:flex;width:-moz-fit-content;width:fit-content;gap:4px;background:#eee8f4;border-radius:40px;padding:5px;margin:0 auto 34px}
.bill-toggle button{border:none;background:transparent;color:#6b6477;font-weight:600;font-size:14px;padding:9px 22px;border-radius:30px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:8px}
.bill-toggle button.on{background:#fff;color:var(--price-primary);box-shadow:0 3px 12px rgba(120,91,155,.2)}
.save-pill{background:var(--green);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}

/* Grid — การ์ดสูงเท่ากันทุกใบ */
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:stretch}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--gray-line);border-radius:20px;
  padding:26px 20px 22px;position:relative;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(15,44,84,.05)}
.pcard:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(15,44,84,.13)}
.pcard.pop{border:2px solid var(--price-primary);box-shadow:0 22px 54px rgba(120,91,155,.26);transform:scale(1.045);z-index:2;
  background:linear-gradient(180deg,#fbf9ff 0%,#fff 130px)}
.pcard.pop:hover{transform:scale(1.045) translateY(-6px)}
.pcard.onprem{border-color:#cfe8da}
.pcard-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,var(--price-primary),var(--price-primary-dk));color:#fff;font-size:12.5px;font-weight:700;
  padding:5px 16px;border-radius:30px;box-shadow:0 6px 16px rgba(120,91,155,.4);display:flex;align-items:center;gap:6px}
.pcard-badge.alt{background:linear-gradient(135deg,#1aa260,#0c7a44);box-shadow:0 6px 16px rgba(12,122,68,.35)}
.pcard-head{min-height:74px}
.pcard-name{font-size:20px;font-weight:800;color:var(--navy);margin:6px 0 4px}
.pcard-desc{font-size:12.5px;color:var(--muted);margin:0;line-height:1.45}
.pcard-price{padding:8px 0 14px;border-bottom:1px dashed var(--gray-line);margin-bottom:14px;min-height:86px}
.pcard-price .amt{font-size:30px;font-weight:800;color:var(--navy);line-height:1.1}
.pcard.pop .pcard-price .amt{color:var(--price-primary)}
.pcard-price .amt span{font-size:13px;font-weight:500;color:var(--muted)}
.pcard-price .sub{font-size:12px;color:var(--muted);margin-top:5px}
.pcard-price .save-i{color:var(--green);font-weight:700}

/* mini stats */
.pcard-stats{display:flex;gap:6px;margin-bottom:16px}
.pcard-stats > div{flex:1;background:var(--gray-bg);border-radius:11px;padding:9px 4px;text-align:center}
.pcard.pop .pcard-stats > div{background:var(--price-soft)}
.pcard-stats i{font-size:15px;color:var(--price-primary);display:block}
.pcard-stats b{font-size:13.5px;color:var(--navy);display:block;line-height:1.3;margin-top:2px}
.pcard-stats span{font-size:10.5px;color:var(--muted)}

/* feature groups — ดันให้ปุ่มไปอยู่ล่างสุด */
.pcard-feats{flex:1 1 auto}
.fgroup{margin-bottom:13px}
.fgroup-h{font-size:11.5px;font-weight:700;color:var(--price-primary);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fgroup-h i{font-size:13px}
.fitem{display:flex;align-items:flex-start;gap:7px;font-size:13px;color:var(--text);padding:2.5px 0}
.fitem i{color:var(--green);font-size:15px;flex-shrink:0}

/* CTA — ปุ่มเด่น อยู่ล่างสุดเท่ากันทุกใบ */
.pcard-cta{margin-top:14px;display:block;text-align:center;font-weight:700;font-size:14.5px;padding:12px;border-radius:12px;
  background:linear-gradient(135deg,var(--price-primary),var(--price-primary-dk));color:#fff;transition:.18s;border:1.5px solid transparent}
.pcard-cta:hover{color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(120,91,155,.4)}
.pcard-cta.ghost{background:#fff;color:var(--price-primary);border-color:var(--price-primary)}
.pcard-cta.ghost:hover{background:var(--price-primary);color:#fff;box-shadow:0 10px 24px rgba(120,91,155,.3)}
.pcard-note{text-align:center;font-size:11.5px;color:var(--muted);margin-top:9px;min-height:16px}
.pcard-note i{color:var(--green)}

/* ---------- Comparison table ---------- */
.compare-scroll{overflow-x:auto;border-radius:16px;border:1px solid var(--gray-line);box-shadow:0 6px 22px rgba(15,44,84,.06)}
.compare-tbl{width:100%;border-collapse:collapse;min-width:780px;background:#fff;font-size:13.5px}
.compare-tbl th,.compare-tbl td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--gray-line)}
.compare-tbl thead th{position:sticky;top:0;background:#fff;z-index:1}
.compare-tbl th.lbl-col,.compare-tbl td.lbl{text-align:left;font-weight:600;color:var(--navy);background:#fafbfd;min-width:170px;position:sticky;left:0;z-index:1}
.compare-tbl .ct-name{font-weight:800;color:var(--navy);font-size:15px}
.compare-tbl .ct-price{font-size:12px;color:var(--muted);margin-top:2px}
.compare-tbl th.pop,.compare-tbl td.pop{background:var(--price-soft)}
.compare-tbl th.pop .ct-name{color:var(--price-primary)}
.compare-tbl .ct-val{font-weight:700;color:var(--navy)}
.compare-tbl i.yes{color:var(--green);font-size:18px}
.compare-tbl i.no{color:#cdd3de;font-size:16px}
.compare-tbl tr:hover td{background:#fbfaff}
.compare-tbl tr:hover td.lbl{background:#f4f1fb}
.compare-tbl .ct-cta td{border-bottom:none;padding-top:16px;padding-bottom:18px}
.compare-btn{background:#fff;border:1.5px solid var(--price-primary);color:var(--price-primary);font-weight:700;border-radius:9px;padding:6px 18px}
.compare-btn:hover{background:var(--price-primary);color:#fff}
.compare-btn.pop{background:var(--price-primary);color:#fff}
.compare-btn.pop:hover{background:var(--price-primary-dk)}

/* ---------- Social proof ---------- */
.social-proof{background:linear-gradient(135deg,var(--navy) 0%,var(--price-primary-dk) 120%);color:#fff;padding:52px 20px}
.sp-title{color:#fff;font-size:26px}
.sp-sub{color:rgba(255,255,255,.72);margin-bottom:30px}
.sp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:880px;margin:0 auto 28px}
.sp-stats > div{text-align:center}
.sp-n{font-size:38px;font-weight:800;line-height:1;background:linear-gradient(120deg,#fff,#e0d3f2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sp-l{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:8px}
.sp-logos{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;align-items:center;opacity:.62}
.sp-logos span{font-weight:800;letter-spacing:1px;font-size:15px;color:#fff}

/* ---------- FAQ ---------- */
.faq-list{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--gray-line);border-radius:13px;margin-bottom:12px;overflow:hidden;transition:.2s;background:#fff}
.faq-item.open{border-color:var(--price-primary);box-shadow:0 8px 24px rgba(120,91,155,.12)}
.faq-q{width:100%;border:none;background:transparent;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:17px 20px;font-size:15px;font-weight:600;color:var(--navy);cursor:pointer;text-align:left}
.faq-q i{color:var(--price-primary);font-size:18px;flex-shrink:0;transition:.2s}
.faq-a{padding:0 20px 18px;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- Sticky compare bar ---------- */
.pricing-sticky{position:fixed;top:0;left:0;right:0;z-index:1200;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gray-line);box-shadow:0 6px 20px rgba(15,44,84,.1)}
.ps-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 20px}
.ps-brand{font-weight:800;color:var(--navy);font-size:14.5px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.ps-brand i{color:var(--price-primary)}
.ps-plans{display:flex;gap:8px;flex:1;overflow-x:auto}
.ps-chip{display:flex;flex-direction:column;border:1px solid var(--gray-line);border-radius:10px;padding:6px 13px;min-width:104px;transition:.15s}
.ps-chip:hover{border-color:var(--price-primary);background:var(--price-soft)}
.ps-chip.pop{border-color:var(--price-primary);background:var(--price-soft)}
.ps-name{font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap}
.ps-price{font-size:11.5px;color:var(--muted)}
.ps-cta{background:linear-gradient(135deg,var(--price-primary),var(--price-primary-dk));color:#fff;font-weight:700;
  border-radius:11px;padding:10px 22px;white-space:nowrap;border:none}
.ps-cta:hover{color:#fff;box-shadow:0 8px 20px rgba(120,91,155,.4)}
.slidedown-enter-active,.slidedown-leave-active{transition:transform .28s ease,opacity .28s}
.slidedown-enter-from,.slidedown-leave-to{transform:translateY(-100%);opacity:0}

/* ---------- Pricing responsive ---------- */
@media (max-width:1199px){
  .pricing-grid{grid-template-columns:repeat(3,1fr)}
  .pcard.pop{transform:none}
  .pcard.pop:hover{transform:translateY(-6px)}
}
@media (max-width:991px){
  .sp-stats{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .ps-brand{display:none}
}
@media (max-width:767px){
  .pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .pricing-title{font-size:24px}
  .pricing-sticky{display:none}        /* มือถือไม่ต้องมี sticky bar เพื่อพื้นที่อ่าน */
}

/* ---------- Contact Sales page ---------- */
.cs-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--price-primary-dk) 130%);color:#fff;padding:54px 20px;text-align:center}
.cs-hero .badge2{background:rgba(255,255,255,.16);color:#fff;border:none;padding:6px 14px;border-radius:30px;font-size:13px}
.cs-hero h1{font-size:34px;margin:0 0 10px}
.cs-hero p{color:rgba(255,255,255,.85);max-width:620px;margin:0 auto;font-size:15.5px}
.cs-body{padding:40px 16px 56px}
.cs-form{padding:26px 24px}
.cs-submit{background:linear-gradient(135deg,var(--price-primary),var(--price-primary-dk));color:#fff;font-weight:700;padding:12px;border-radius:12px;border:none}
.cs-submit:hover{color:#fff;box-shadow:0 10px 24px rgba(120,91,155,.4)}
.cs-contact,.cs-why{padding:22px 22px}
.cs-channel{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid var(--gray-line);border-radius:13px;margin-bottom:11px;transition:.15s}
.cs-channel:hover{border-color:var(--price-primary);background:var(--price-soft);transform:translateX(3px)}
.cs-channel .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.cs-channel b{display:block;color:var(--navy);font-size:14.5px}
.cs-channel small{color:var(--muted)}
.cs-pt{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text);padding:6px 0}
.cs-pt i{color:var(--green);font-size:17px;flex-shrink:0}
@media (max-width:575px){ .cs-hero h1{font-size:26px} }

/* =====================================================================
   Marketplace  -  Modern Automotive theme
   ===================================================================== */
.mk-page{
  --mk-dark:#0F172A; --mk-blue:#1E40AF; --mk-blue2:#2563EB;
  --mk-green:#10B981; --mk-red:#EF4444; --mk-ink:#0f172a; --mk-mut:#64748b;
  --mk-wrap:1700px; --mk-pad:40px;   /* ความกว้างเนื้อหา + ระยะขอบซ้าย-ขวา */
  background:#f1f5f9;color:var(--mk-ink);
}
.mk-container{max-width:var(--mk-wrap);margin:0 auto;padding:0 var(--mk-pad)}

/* ---------- Hero ---------- */
.mk-hero{position:relative;padding:20px 16px 24px;text-align:center;color:#fff;overflow:hidden;
  background:radial-gradient(1100px 480px at 78% -10%,rgba(37,99,235,.55),transparent 60%),
             radial-gradient(900px 500px at 8% 10%,rgba(16,185,129,.22),transparent 55%),
             linear-gradient(135deg,#0b1220 0%,#0F172A 45%,#15275a 120%)}
.mk-hero-overlay{position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px);pointer-events:none}
/* รถจางๆ เป็นฉากหลังด้านขวา (ดูพรีเมียมแบบ One2Car/Carro) */
.mk-hero-art{position:absolute;right:-40px;bottom:-10px;width:min(46%,720px);z-index:1;pointer-events:none;
  opacity:.13;color:#fff;filter:drop-shadow(0 12px 40px rgba(0,0,0,.4))}
.mk-hero-art svg{width:100%;height:auto;display:block}
@media (max-width:991px){ .mk-hero-art{display:none} }
.mk-hero-inner{position:relative;max-width:880px;margin:0 auto;z-index:2}
.mk-hero-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);padding:6px 15px;border-radius:30px;font-size:13px;font-weight:600;backdrop-filter:blur(6px)}
.mk-hero h1{font-size:27px;font-weight:800;line-height:1.18;margin:10px 0 6px}
.mk-hero p{font-size:14.5px;color:rgba(255,255,255,.86);margin-bottom:14px}
.mk-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mk-cta-primary{background:linear-gradient(135deg,var(--mk-blue2),#3b82f6);color:#fff;border:none;
  font-weight:700;padding:10px 22px;border-radius:12px;font-size:14.5px;cursor:pointer;box-shadow:0 10px 26px rgba(37,99,235,.42);transition:.18s}
.mk-cta-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,99,235,.55);color:#fff}
.mk-cta-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.mk-cta-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.28);
  font-weight:700;padding:10px 22px;border-radius:12px;font-size:14.5px;backdrop-filter:blur(6px);transition:.18s;display:inline-flex;align-items:center;gap:8px}
.mk-cta-ghost:hover{background:rgba(255,255,255,.2);color:#fff}
/* stats card — search bar sits BELOW with a clear breathing gap (no overlap) */
.mk-hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:640px;margin:14px auto 0}
.mk-hero-stats div{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:13px;padding:9px 8px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(15,23,42,.18)}
.mk-hero-stats .mk-stat-ic{font-size:17px;line-height:1;color:#fff;opacity:.92}
.mk-hero-stats b{display:block;font-size:18px;font-weight:800;color:#fff;line-height:1.1}
.mk-hero-stats span{font-size:11.5px;color:rgba(255,255,255,.78)}

/* ---------- Floating search ---------- */
.mk-search{position:relative;z-index:3;max-width:1280px;margin:28px auto 0;background:#fff;border-radius:16px;
  box-shadow:0 16px 40px rgba(15,23,42,.22);border:1px solid #e6ebf3;padding:12px}
.mk-search-main{display:flex;gap:10px;flex-wrap:wrap}
.mk-field{display:flex;align-items:center;gap:9px;background:#f4f7fb;border:1px solid #e6ebf3;border-radius:12px;padding:0 14px;height:46px}
.mk-field.grow{flex:1;min-width:200px}
.mk-field i{color:#94a3b8;font-size:18px}
.mk-field input{border:none;background:none;outline:none;width:100%;font-size:15px;color:var(--mk-ink)}
.mk-search-main>select{height:46px;border:1px solid #e6ebf3;background:#f4f7fb;border-radius:12px;padding:0 14px;font-size:14.5px;color:var(--mk-ink);min-width:150px;cursor:pointer}
.mk-search-btn{height:46px;padding:0 26px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--mk-blue2),#3b82f6);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.15s}
.mk-search-btn:hover{box-shadow:0 8px 20px rgba(37,99,235,.4)}
.mk-adv-toggle{height:46px;padding:0 18px;border:1px solid #e6ebf3;border-radius:12px;background:#fff;color:var(--mk-blue);font-weight:600;font-size:14px;cursor:pointer}
.mk-adv-toggle:hover{background:#eff4ff}
.mk-search-adv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed #e6ebf3}
.mk-search-adv input,.mk-search-adv select{height:44px;border:1px solid #e6ebf3;background:#f4f7fb;border-radius:11px;padding:0 13px;font-size:14px;color:var(--mk-ink);width:100%}
.mk-reset{height:44px;border:1px solid #fdd;background:#fff5f5;color:var(--mk-red);border-radius:11px;font-weight:600;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}

/* ---------- Quick chips ---------- */
.mk-chips{max-width:var(--mk-wrap);margin:16px auto 0;padding:0 var(--mk-pad);display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
.mk-chips::-webkit-scrollbar{display:none}
.mk-chip{border:1px solid #d8e0ec;background:#fff;color:#334155;border-radius:30px;padding:8px 16px;font-size:13.5px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap}
.mk-chip:hover{border-color:var(--mk-blue2);color:var(--mk-blue)}
.mk-chip.on{background:var(--mk-dark);color:#fff;border-color:var(--mk-dark)}
.mk-chip.calc{border-color:var(--mk-green);color:#0a7f5b}
.mk-chip.calc:hover{background:#ecfdf5}

/* ---------- Promo marquee ---------- */
.mk-promo-wrap{overflow:hidden;margin:14px 0 6px;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mk-promo-track{display:flex;gap:14px;width:max-content;animation:mk-marquee 26s linear infinite}
.mk-promo-wrap:hover .mk-promo-track{animation-play-state:paused}
.mk-promo{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e6ebf3;border-left:4px solid var(--mk-red);
  border-radius:11px;padding:7px 15px;box-shadow:0 4px 14px rgba(15,23,42,.05);height:48px}
.mk-promo-ic{font-size:19px}
.mk-promo b{display:block;font-size:13.5px;color:var(--mk-ink);line-height:1.25}
.mk-promo small{color:var(--mk-mut);font-size:11.5px;line-height:1.2}
@keyframes mk-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.mk-section{margin:28px 0}
.mk-container>.mk-section:first-child{margin-top:16px}
.mk-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.mk-sec-head h2{font-size:22px;font-weight:800;margin:0;display:flex;align-items:center;gap:9px;color:var(--mk-ink)}
.mk-sec-sub{font-size:13.5px;color:var(--mk-mut)}
.mk-sort{display:flex;align-items:center;gap:12px}
.mk-sort select{height:40px;border:1px solid #d8e0ec;background:#fff;border-radius:10px;padding:0 12px;font-size:14px;color:var(--mk-ink);cursor:pointer}

/* rail (horizontal scroll) + grid */
.mk-rail{display:flex;gap:20px;overflow-x:auto;padding:4px 2px 16px;scroll-snap-type:x mandatory;align-items:stretch}
.mk-rail::-webkit-scrollbar{height:8px}
.mk-rail::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
.mk-rail .mk-card{flex:0 0 auto;width:286px;scroll-snap-align:start}
.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:24px;align-items:stretch}

/* ---------- Car card (premium) ---------- */
.mk-card{background:#fff;border:1px solid #e6ebf3;border-radius:16px;overflow:hidden;cursor:pointer;height:100%;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;display:flex;flex-direction:column}
.mk-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(15,23,42,.2);border-color:#d3deee}
/* รูปใหญ่ขึ้น (สัดส่วน ~65% ของการ์ด) */
.mk-card-media{position:relative;height:212px;background:linear-gradient(135deg,#dbe4f0,#eef2f8);overflow:hidden}
.mk-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mk-card:hover .mk-card-media img{transform:scale(1.05)}
.mk-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#9fb2cc;font-size:48px}
.mk-badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mk-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#fff;padding:3px 9px;border-radius:7px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mk-tag.tag-new{background:var(--mk-green)}
.mk-tag.tag-hot{background:linear-gradient(135deg,#f97316,var(--mk-red))}
.mk-tag.tag-deal{background:linear-gradient(135deg,#059669,#10b981)}
.mk-tag.tag-rec{background:linear-gradient(135deg,#6366f1,var(--mk-blue2))}
.mk-fav{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:#475569;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mk-fav:hover{transform:scale(1.1)}
.mk-fav.on{color:var(--mk-red)}
.mk-gift{position:absolute;bottom:10px;left:10px;background:rgba(15,23,42,.82);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:4px}
.mk-gift i{color:#fbbf24}
/* Badge "วิดีโอรีวิว" บนรูปการ์ดรถ (มุมล่างขวา) */
.mk-video-badge{position:absolute;bottom:10px;right:10px;z-index:2;background:rgba(220,38,38,.95);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:7px;display:inline-flex;align-items:center;gap:4px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.mk-video-badge i{font-size:13px}
.mk-card-body{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1}
.mk-card-title{font-weight:700;font-size:15.5px;color:var(--mk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-spec{display:flex;flex-wrap:wrap;gap:5px 12px;margin:8px 0;font-size:12px;color:var(--mk-mut);min-height:34px}
.mk-spec i{margin-right:3px;color:#94a3b8}
.mk-price{font-weight:800;font-size:21px;color:var(--mk-blue);margin:2px 0}
.mk-install{font-size:12.5px;color:var(--mk-mut)}
.mk-install b{color:var(--mk-green)}
.mk-loc{font-size:12px;color:var(--mk-mut);margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-loc i{color:#94a3b8}
.mk-card-actions{display:flex;gap:7px;margin-top:12px}
.mk-btn{border:1px solid #e2e8f0;background:#fff;border-radius:10px;height:38px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;color:#334155;transition:.15s}
.mk-btn.primary{flex:1;background:var(--mk-dark);color:#fff;border-color:var(--mk-dark)}
.mk-btn.primary:hover{background:#1e293b}
.mk-btn.ghost{width:42px}
.mk-btn.ghost:hover{border-color:var(--mk-blue2);color:var(--mk-blue)}
.mk-btn.ghost.on{background:var(--mk-blue2);color:#fff;border-color:var(--mk-blue2)}

/* ---------- Skeleton ---------- */
.mk-skel{background:#fff;border:1px solid #e6ebf3;border-radius:16px;padding:0 0 14px;overflow:hidden}
.sk-media{height:212px;background:#eef2f7}
.sk-line{height:13px;border-radius:6px;background:#eef2f7;margin:12px 14px 0}
.sk-line.w70{width:70%}.sk-line.w40{width:40%}.sk-line.w55{width:55%}
.mk-skel .sk-media,.mk-skel .sk-line{background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%);background-size:400% 100%;animation:mk-shimmer 1.4s ease infinite}
@keyframes mk-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
.mk-empty{text-align:center;padding:50px 20px;color:var(--mk-mut)}
.mk-empty i{font-size:46px;opacity:.4;display:block;margin-bottom:10px}

/* ---------- Reviews ---------- */
.mk-reviews{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mk-review{background:#fff;border:1px solid #e6ebf3;border-radius:15px;padding:18px 18px 16px;box-shadow:0 4px 14px rgba(15,23,42,.04)}
.mk-rv-stars{color:#f59e0b;font-size:14px;display:flex;gap:2px}
.mk-review p{font-size:14px;color:#334155;margin:10px 0 14px;line-height:1.55}
.mk-rv-who{display:flex;align-items:center;gap:10px}
.mk-rv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--mk-blue),var(--mk-blue2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.mk-rv-who b{display:block;font-size:14px;color:var(--mk-ink)}
.mk-rv-who small{color:var(--mk-mut);font-size:12.5px}

/* ---------- Trust band ---------- */
.mk-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:#fff;border:1px solid #e6ebf3;border-radius:18px;padding:24px;margin-bottom:8px}
.mk-trust>div{text-align:center}
.mk-trust i{font-size:30px;color:var(--mk-blue2)}
.mk-trust b{display:block;margin:8px 0 3px;font-size:15px;color:var(--mk-ink)}
.mk-trust span{font-size:12.5px;color:var(--mk-mut)}

/* ---------- Footer ---------- */
.mk-footer{background:var(--mk-dark);color:#cbd5e1;margin-top:40px;padding:44px 16px 0}
.mk-foot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px}
.mk-foot-logo{font-size:20px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px}
.mk-foot-brand p{font-size:13.5px;color:#94a3b8;margin:12px 0 16px;max-width:340px;line-height:1.6}
.mk-social{display:flex;gap:10px}
.mk-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);color:#cbd5e1;display:flex;align-items:center;justify-content:center;font-size:17px;transition:.15s}
.mk-social a:hover{background:var(--mk-blue2);color:#fff}
.mk-footer h6{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px}
.mk-footer a:not(.mk-social a):not(.mk-foot-logo){display:block;color:#94a3b8;font-size:13.5px;padding:5px 0;transition:.15s}
.mk-footer a:hover{color:#fff}
.mk-foot-copy{max-width:1240px;margin:0 auto;border-top:1px solid rgba(255,255,255,.08);padding:18px 0;text-align:center;font-size:12.5px;color:#64748b}

/* ---------- Compare sticky bar ---------- */
.mk-compare-bar{position:fixed;left:0;right:0;bottom:0;z-index:1040;background:#fff;border-top:3px solid var(--mk-blue2);
  box-shadow:0 -10px 36px rgba(15,23,42,.2);padding:16px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.mk-cb-title{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--mk-ink);white-space:nowrap}
.mk-cb-title i{font-size:20px;color:var(--mk-blue2)}
.mk-cb-items{display:flex;align-items:center;gap:10px;flex:1;flex-wrap:wrap;min-width:0}
.mk-cb-item{display:flex;align-items:center;gap:8px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:11px;padding:8px 9px 8px 14px;font-size:14px;font-weight:600;max-width:240px}
.mk-cb-item button{border:none;background:none;color:#94a3b8;cursor:pointer;font-size:17px;line-height:1}
.mk-cb-item button:hover{color:var(--mk-red)}
.mk-cb-hint{font-size:13px;color:var(--mk-mut)}
.mk-cb-actions{display:flex;gap:11px;align-items:center}
.mk-cb-actions .mk-cta-primary{padding:13px 26px;font-size:15.5px}
.mk-cb-actions .mk-btn{height:46px;width:auto;padding:0 18px;font-size:14px}
.mk-slideup-enter-active,.mk-slideup-leave-active{transition:transform .25s ease}
.mk-slideup-enter-from,.mk-slideup-leave-to{transform:translateY(110%)}

/* ---------- Floating action buttons (คำนวณค่างวด / LINE) ---------- */
.mk-fab-stack{position:fixed;right:22px;bottom:24px;z-index:1035;display:flex;flex-direction:column;gap:12px;
  transition:bottom .25s ease}
.mk-fab-stack.lifted{bottom:96px}
.mk-fab{position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;color:#fff;
  font-size:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(15,23,42,.28);
  transition:transform .16s ease,box-shadow .16s ease}
.mk-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 34px rgba(15,23,42,.36);color:#fff}
.mk-fab.line{background:#06c755}
.mk-fab.calc{background:linear-gradient(135deg,var(--mk-blue2),#3b82f6)}
.mk-fab.top{background:#475569;width:46px;height:46px;font-size:19px;align-self:center}
/* ป้ายชื่อโผล่เมื่อ hover (ฝั่งซ้ายของปุ่ม) */
.mk-fab-lbl{position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(8px);white-space:nowrap;
  background:var(--mk-dark);color:#fff;font-size:13px;font-weight:600;padding:7px 12px;border-radius:9px;
  opacity:0;pointer-events:none;transition:.16s;box-shadow:0 6px 18px rgba(15,23,42,.22)}
.mk-fab:hover .mk-fab-lbl{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:767px){
  .mk-fab-stack{right:14px;bottom:16px;gap:10px}
  .mk-fab-stack.lifted{bottom:104px}
  .mk-fab{width:50px;height:50px;font-size:21px}
}

/* ---------- Compare table ---------- */
.mk-compare-scroll{overflow-x:auto}
.mk-compare-tbl{width:100%;border-collapse:collapse;min-width:480px}
.mk-compare-tbl th,.mk-compare-tbl td{border:1px solid #eef2f7;padding:11px 13px;text-align:center;font-size:14px}
.mk-compare-tbl td.lbl,.mk-compare-tbl th.lbl{text-align:left;background:#f8fafc;font-weight:600;color:#475569;font-size:13px;white-space:nowrap}
.mk-compare-tbl td.best{background:#ecfdf5;color:#047857;font-weight:700}
.mk-cmp-media{height:78px;border-radius:9px;overflow:hidden;background:#eef2f8;display:flex;align-items:center;justify-content:center;color:#9fb2cc;font-size:28px}
.mk-cmp-media img{width:100%;height:100%;object-fit:cover}
.mk-cmp-name{font-weight:700;font-size:13.5px;margin-top:7px;color:var(--mk-ink)}

/* ---------- Calculator out ---------- */
.mk-calc-out{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.mk-calc-out>div{background:#f8fafc;border:1px solid #eef2f7;border-radius:12px;padding:13px 15px}
.mk-calc-out span{font-size:13px;color:var(--mk-mut);display:block}
.mk-calc-out b{font-size:19px;font-weight:800;color:var(--mk-ink)}
.mk-calc-out .big{grid-column:1/-1;background:linear-gradient(135deg,var(--mk-dark),#1e293b);border:none}
.mk-calc-out .big span{color:rgba(255,255,255,.7)}
.mk-calc-out .big b{color:#fff;font-size:26px}

/* ---------- Dealer trust (detail) ---------- */
.mk-dealer{margin-top:14px;border:1px solid #e6ebf3;border-radius:14px;padding:15px;background:#fafcff}
.mk-dealer-head{display:flex;gap:12px;align-items:center}
.mk-dealer-av{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--mk-dark),#1e293b);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.mk-vbadge{background:#ecfdf5;color:#047857;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.mk-dealer-rate{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:13px}
.mk-dealer-rate b{color:var(--mk-ink)}
.mk-dealer-rate small{color:var(--mk-mut)}
.mk-dealer-stats{display:flex;gap:10px;margin-top:13px}
.mk-dealer-stats div{flex:1;text-align:center;background:#fff;border:1px solid #eef2f7;border-radius:10px;padding:9px 6px}
.mk-dealer-stats b{display:block;font-size:16px;color:var(--mk-ink)}
.mk-dealer-stats span{font-size:11.5px;color:var(--mk-mut)}
.mk-notify{border:1px solid #d8e0ec;background:#fff;color:#475569;border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.15s}
.mk-notify:hover{border-color:var(--mk-blue2);color:var(--mk-blue)}
.mk-notify.on{background:#eff6ff;border-color:var(--mk-blue2);color:var(--mk-blue)}

/* รีวิวในหน้ารถ */
.mk-drv-list{margin-top:13px;border-top:1px dashed #e6ebf3;padding-top:11px;max-height:220px;overflow-y:auto}
.mk-drv{padding:9px 0;border-bottom:1px solid #f1f5f9}
.mk-drv:last-child{border-bottom:none}
.mk-drv-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mk-drv-top b{font-size:13.5px;color:var(--mk-ink)}
.mk-drv-top .mk-rv-stars{font-size:12px}
.mk-drv p{margin:4px 0 2px;font-size:13px;color:#475569;line-height:1.5}
.mk-drv small{font-size:11.5px}
.mk-drv-add{margin-top:12px}
.mk-review-form{background:#f8fafc;border:1px solid #eef2f7;border-radius:11px;padding:12px}
.mk-rate-pick{color:#f59e0b;font-size:19px;cursor:pointer;display:inline-flex;gap:3px}
.mk-rate-pick i{cursor:pointer}

/* ---------- Gifts (detail) ---------- */
.mk-gift-list{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;margin-top:4px}
.mk-gift-list span{font-size:13px;color:#334155;display:flex;align-items:center;gap:7px}
.mk-gift-list i{color:var(--mk-green)}

/* ---------- Responsive ---------- */
@media (max-width:1400px){ .mk-page{--mk-pad:28px} }
@media (max-width:991px){
  .mk-page{--mk-pad:20px}
  .mk-foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .mk-search-adv{grid-template-columns:repeat(2,1fr)}
  .mk-hero-stats{grid-template-columns:repeat(2,1fr);max-width:440px;margin:12px auto 0}
}
@media (max-width:767px){
  .mk-page{--mk-pad:14px}
  .mk-hero{padding:20px 14px 22px}
  .mk-hero h1{font-size:23px}
  .mk-hero p{font-size:13.5px;margin-bottom:12px}
  .mk-hero-stats{grid-template-columns:repeat(2,1fr);max-width:360px;gap:10px;margin:12px auto 0}
  .mk-hero-stats b{font-size:18px}
  .mk-search{margin-top:18px}
  .mk-search-main>select{flex:1}
  .mk-trust{grid-template-columns:1fr 1fr}
  .mk-foot-grid{grid-template-columns:1fr;gap:18px}
  .mk-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
  .mk-card-media{height:170px}
  .mk-price{font-size:18px}
  .mk-sec-head h2{font-size:18px}
}
@media (max-width:430px){
  .mk-search-adv{grid-template-columns:1fr 1fr}
  .mk-gift-list{grid-template-columns:1fr}
  .mk-card-actions .mk-btn.primary span{display:none}
}