/* ============================================================
   D2 FULL BUILD 2026-05-15:
   SmartWeb main.css
   Scope:
   - Main theme for public + backend
   - Uses CSS variables from template settings
   ============================================================ */

:root {
  --primary: #0f766e;
  --bg: #f5f7fb;
  --text: #15202b;
  --muted: #64748b;
  --card: rgba(255,255,255,.92);
  --border: rgba(15,23,42,.12);
  --shadow: 0 18px 50px rgba(15,23,42,.12);
  --radius: 22px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body, "Sarabun"), system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.82);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  gap: 16px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 210px;
}

.logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--primary), #1d4ed8);
  box-shadow: var(--shadow);
}

.brand-title {
  font-family: var(--font-heading, "Prompt"), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
}

.brand-subtitle {
  color: var(--muted);
  font-size: .88rem;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.menu a,
.btn {
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: white;
  border-color: transparent;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 46px;
  background:
    linear-gradient(135deg, var(--gradient-from, #0f766e), var(--gradient-to, #1d4ed8));
  color: white;
}

.hero.has-bg {
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--overlay,.25));
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-family: var(--font-heading, "Prompt"), system-ui, sans-serif;
  margin: 0 0 10px;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1.05;
}

.hero p {
  max-width: 760px;
  margin: 0;
  font-size: 1.15rem;
  opacity: .94;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  margin: 28px 0;
}

.card {
  grid-column: span 4;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  overflow: hidden;
}

.card.big { grid-column: span 8; }
.card.full { grid-column: 1 / -1; }

.card h2, .card h3 {
  font-family: var(--font-heading, "Prompt"), system-ui, sans-serif;
  margin: 0 0 10px;
}

.muted { color: var(--muted); }

.banner-wrap {
  display: grid;
  gap: 14px;
}

.banner {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: white;
}

.banner img {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
}

.section-title {
  font-size: 1.7rem;
  font-family: var(--font-heading, "Prompt"), system-ui, sans-serif;
  margin: 32px 0 12px;
}

.footer {
  margin-top: 40px;
  padding: 32px 0;
  background: #0f172a;
  color: white;
}

.admin-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #0f172a;
  color: white;
  padding: 22px;
}

.sidebar a {
  display: block;
  padding: 12px 14px;
  margin: 6px 0;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}

.admin-main {
  padding: 26px;
  background: #f8fafc;
}

.form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

label {
  display: block;
  font-weight: 700;
  margin: 12px 0 6px;
}

input, select, textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
}

textarea { min-height: 120px; }

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 16px;
  overflow: hidden;
}

th, td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.flash {
  padding: 12px 14px;
  border-radius: 14px;
  margin: 10px 0;
  background: #ecfeff;
  border: 1px solid #67e8f9;
}

.chatbot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
}

.chatbot-panel {
  display: none;
  width: min(360px, calc(100vw - 36px));
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.chatbot-panel.active { display: block; }
.chatbot-head {
  padding: 14px;
  background: var(--primary);
  color: white;
  font-weight: 800;
}
.chatbot-body {
  padding: 14px;
  max-height: 260px;
  overflow: auto;
}
.chatbot-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
}

@media (max-width: 860px) {
  .nav { align-items: flex-start; flex-direction: column; padding: 12px 0; }
  .menu { justify-content: flex-start; }
  .card, .card.big { grid-column: 1 / -1; }
  .admin-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   SmartWeb Public Home V1
   Front website decoration: hero, services, banner, radio, pages.
   ============================================================ */

.public-hero{
  position:relative;
  overflow:hidden;
  color:#ffffff;
  min-height:560px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.24), transparent 26rem),
    linear-gradient(135deg,var(--gradient-from, #0f766e),var(--gradient-to, #1d4ed8));
}

.public-hero.has-bg{
  background-size:cover;
  background-position:center;
}

.public-hero__shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(15,23,42,.76),rgba(15,23,42,.28)),
    rgba(0,0,0,var(--overlay,.25));
}

.public-hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:28px;
  align-items:center;
  padding:70px 0;
}

.public-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  font-weight:800;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.public-kicker--dark{
  color:#0f766e;
  background:rgba(15,118,110,.10);
  border-color:rgba(15,118,110,.16);
}

.public-hero h1{
  font-size:clamp(2.4rem, 6vw, 5.2rem);
  line-height:.98;
  margin:0 0 18px;
  letter-spacing:-.06em;
}

.public-hero__lead{
  font-size:1.25rem;
  max-width:760px;
  margin:0;
  opacity:.92;
}

.public-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.public-btn-light{
  color:#ffffff;
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.24);
}

.public-hero__panel{
  display:grid;
  gap:14px;
}

.public-status-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(12px);
}

.public-status-card__icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  font-size:1.8rem;
}

.public-status-card__label{
  opacity:.78;
  font-size:.92rem;
}

.public-status-card__value{
  font-weight:900;
  font-size:1.25rem;
}

.public-mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.public-mini{
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);
  transition:transform .16s ease, background .16s ease;
}

.public-mini:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.20);
}

.public-mini span{
  display:block;
  font-size:1.5rem;
  margin-bottom:7px;
}

.public-mini b,
.public-mini small{
  display:block;
}

.public-mini small{
  opacity:.78;
  margin-top:3px;
}

.public-main{
  margin-top:34px;
}

.public-section{
  margin:34px 0;
}

.public-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  margin-bottom:18px;
}

.public-section-head h2{
  margin:0;
  font-size:2rem;
  letter-spacing:-.04em;
}

.public-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:#ecfeff;
  color:#155e75;
  font-weight:800;
  font-size:.88rem;
}

.public-banner-grid{
  display:grid;
  gap:16px;
}

.public-banner{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:#ffffff;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

.public-banner img{
  width:100%;
  max-height:460px;
  object-fit:cover;
}

.public-banner__caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:12px 14px;
  border-radius:18px;
  color:#ffffff;
  background:rgba(15,23,42,.58);
  backdrop-filter:blur(10px);
  font-weight:800;
}

.public-service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.public-service-card,
.public-radio-card,
.public-contact-card,
.public-page-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:26px;
  box-shadow:var(--shadow);
}

.public-service-card{
  padding:22px;
  transition:transform .16s ease, box-shadow .16s ease;
}

.public-service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(15,23,42,.15);
}

.public-service-card__icon{
  width:54px;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(15,118,110,.14),rgba(29,78,216,.12));
  font-size:1.6rem;
  margin-bottom:12px;
}

.public-service-card h3{
  margin:0 0 8px;
  font-size:1.25rem;
}

.public-service-card p{
  color:var(--muted);
  margin:0;
}

.public-split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

.public-radio-card,
.public-contact-card{
  padding:24px;
}

.public-radio-card h2,
.public-contact-card h2{
  margin:0 0 10px;
  font-size:1.8rem;
  letter-spacing:-.03em;
}

.public-radio-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.public-contact-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.public-contact-list div{
  padding:12px 14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.public-page-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.public-page-card{
  overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease;
}

.public-page-card:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(15,23,42,.15);
}

.public-page-card img,
.public-page-card__placeholder{
  width:100%;
  height:190px;
  object-fit:cover;
}

.public-page-card__placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  background:linear-gradient(135deg,#e0f2fe,#ecfdf5);
}

.public-page-card__body{
  padding:18px;
}

.public-page-card__body h3{
  margin:0 0 8px;
}

.public-page-card__body p{
  margin:0;
  color:var(--muted);
}

@media (max-width: 980px){
  .public-hero__inner,
  .public-split{
    grid-template-columns:1fr;
  }

  .public-service-grid,
  .public-page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 620px){
  .public-hero{
    min-height:auto;
  }

  .public-hero__inner{
    padding:46px 0;
  }

  .public-mini-grid,
  .public-service-grid,
  .public-page-grid{
    grid-template-columns:1fr;
  }

  .public-section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .public-hero__actions .btn{
    width:100%;
    text-align:center;
  }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Public top menu dropdown/submenu.
   ============================================================ */

.public-top-menu{
  align-items:center;
}

.public-top-menu .menu-item{
  position:relative;
}

.public-top-menu .menu-item > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--border);
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
}

.public-top-menu .menu-caret{
  font-size:.75rem;
  opacity:.72;
}

.public-top-menu .submenu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:220px;
  display:none;
  padding:8px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 20px 55px rgba(15,23,42,.16);
  z-index:80;
}

.public-top-menu .menu-item:hover .submenu{
  display:grid;
  gap:6px;
}

.public-top-menu .submenu a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  background:transparent;
  border:none;
  white-space:nowrap;
}

.public-top-menu .submenu a:hover{
  background:#f1f5f9;
}

@media (max-width:860px){
  .public-top-menu{
    width:100%;
    align-items:flex-start;
    justify-content:flex-start;
  }

  .public-top-menu .menu-item{
    width:100%;
  }

  .public-top-menu .menu-item > a{
    width:100%;
    justify-content:space-between;
  }

  .public-top-menu .submenu{
    position:static;
    display:grid;
    margin-top:6px;
    box-shadow:none;
    width:100%;
  }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Page content types: image/pdf.
   ============================================================ */

.page-content-wrap{
  margin-top:34px;
  margin-bottom:48px;
}

.page-content-card{
  padding:26px;
}

.page-cover{
  width:100%;
  max-height:460px;
  object-fit:cover;
  border-radius:24px;
  margin-bottom:22px;
}

.page-body-text{
  white-space:pre-wrap;
  color:#334155;
  line-height:1.85;
  font-size:1.04rem;
  margin-bottom:22px;
}

.page-image-viewer{
  margin-top:22px;
  border-radius:28px;
  overflow:hidden;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 20px 50px rgba(15,23,42,.10);
}

.page-image-viewer img{
  display:block;
  width:100%;
  height:auto;
}

.page-pdf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0;
}

.page-pdf-viewer{
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.12);
  background:#0f172a;
  box-shadow:0 20px 50px rgba(15,23,42,.14);
}

.page-pdf-viewer iframe{
  width:100%;
  min-height:780px;
  border:0;
  display:block;
  background:#ffffff;
}

@media(max-width:720px){
  .page-content-card{
    padding:16px;
  }

  .page-pdf-viewer iframe{
    min-height:560px;
  }

  .page-pdf-actions .btn{
    width:100%;
    text-align:center;
  }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   PDF page as table rows.
   ============================================================ */

.page-doc-table-wrap{
  margin-top:24px;
}

.page-doc-table-wrap h2{
  margin:0 0 14px;
  font-size:1.6rem;
  letter-spacing:-.03em;
}

.page-doc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.page-doc-table th{
  text-align:left;
  background:#f1f5f9;
  color:#334155;
  padding:14px 16px;
  font-size:.92rem;
}

.page-doc-table td{
  padding:16px;
  border-top:1px solid rgba(15,23,42,.08);
  vertical-align:top;
  background:#ffffff;
}

.page-doc-table tr:hover td{
  background:#f8fafc;
}

.page-doc-table td:last-child{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

@media(max-width:760px){
  .page-doc-table,
  .page-doc-table thead,
  .page-doc-table tbody,
  .page-doc-table tr,
  .page-doc-table th,
  .page-doc-table td{
    display:block;
    width:100%;
  }

  .page-doc-table thead{
    display:none;
  }

  .page-doc-table tr{
    border-bottom:1px solid rgba(15,23,42,.10);
  }

  .page-doc-table td{
    border-top:none;
  }

  .page-doc-table td:first-child::before{
    content:"ลำดับ: ";
    font-weight:800;
  }

  .page-doc-table td:nth-child(2)::before{
    content:"ชื่อเอกสาร: ";
    font-weight:800;
    display:block;
    margin-bottom:4px;
  }

  .page-doc-table td:nth-child(3)::before{
    content:"รายละเอียด: ";
    font-weight:800;
    display:block;
    margin-bottom:4px;
  }

  .page-doc-table td:last-child .btn{
    width:100%;
    text-align:center;
  }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   SmartWeb Editor Login.
   ============================================================ */

.editor-login-page{
  min-height:calc(100vh - 90px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 18px;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.16), transparent 28rem),
    radial-gradient(circle at bottom right, rgba(37,99,235,.14), transparent 26rem),
    linear-gradient(180deg,#f8fafc,#eef2ff);
}

.editor-login-card{
  width:min(100%,460px);
  padding:28px;
  border-radius:28px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 24px 70px rgba(15,23,42,.16);
}

.editor-login-logo{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff;
  font-size:2rem;
  margin-bottom:16px;
}

.editor-login-card h1{
  margin:0 0 8px;
  letter-spacing:-.04em;
}

.editor-login-card form{
  margin-top:20px;
}

.editor-login-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.editor-login-actions .btn{
  flex:1;
  text-align:center;
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Editor users + assigned page editor.
   ============================================================ */

.editor-content-form textarea{
  width:100%;
}

.editor-content-form input[type="file"]{
  padding:12px;
  background:#f8fafc;
}


/* ============================================================
   D2 PATCH 2026-05-15:
   Inline SmartWeb Editor Login on public page.
   ============================================================ */

.editor-inline-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.editor-inline-modal.is-open{
  display:flex;
}

.editor-inline-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.62);
  backdrop-filter:blur(7px);
}

.editor-inline-modal__card{
  position:relative;
  z-index:1;
  width:min(100%,460px);
  padding:28px;
  border-radius:28px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 30px 90px rgba(15,23,42,.30);
}

.editor-inline-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  cursor:pointer;
  font-size:1.4rem;
}

.editor-inline-modal__icon{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:20px;
  background:linear-gradient(135deg,#7c3aed,#2563eb);
  color:#fff;
  font-size:1.8rem;
  margin-bottom:14px;
}

.editor-inline-modal__card h2{
  margin:0 0 8px;
  letter-spacing:-.04em;
}

.editor-inline-modal__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.editor-inline-modal__actions .btn{
  flex:1;
  text-align:center;
}

.page-editor-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:16px;
}

.page-editor-note{
  display:inline-flex;
  padding:10px 13px;
  border-radius:999px;
  background:#fff7ed;
  color:#9a3412;
  font-weight:800;
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Editor toolbar on public page after Login Web.
   ============================================================ */

.editor-page-toolbar-wrap{
  margin-top:18px;
}

.editor-page-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(255,255,255,.94);
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}

.editor-page-toolbar.can-edit{
  border-color:rgba(16,185,129,.28);
  background:linear-gradient(135deg,rgba(236,253,245,.96),rgba(255,255,255,.96));
}

.editor-page-toolbar.cannot-edit{
  border-color:rgba(251,146,60,.35);
  background:linear-gradient(135deg,rgba(255,247,237,.96),rgba(255,255,255,.96));
}

.editor-page-toolbar.guest{
  border-color:rgba(124,58,237,.22);
  background:linear-gradient(135deg,rgba(245,243,255,.96),rgba(255,255,255,.96));
}

.editor-page-toolbar__left{
  display:flex;
  align-items:center;
  gap:12px;
}

.editor-page-toolbar__icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#0f172a;
  color:#fff;
  font-size:1.45rem;
}

.editor-page-toolbar__title{
  font-weight:900;
  color:#0f172a;
  letter-spacing:-.02em;
}

.editor-page-toolbar__meta{
  color:#64748b;
  font-size:.94rem;
  margin-top:2px;
}

.editor-page-toolbar__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media(max-width:760px){
  .editor-page-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }

  .editor-page-toolbar__actions,
  .editor-page-toolbar__actions .btn{
    width:100%;
  }

  .editor-page-toolbar__actions .btn{
    text-align:center;
  }
}

/* D2 PATCH: top menu login/logout state */
.editor-menu-user{
  background:linear-gradient(135deg,#0f766e,#2563eb) !important;
  color:#fff !important;
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Fix top menu SmartCity/Login Web button contrast.
   Make text readable on all themes.
   ============================================================ */

.public-top-menu > a.btn-primary,
.menu > a.btn-primary,
.topbar a.btn-primary{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0f172a,#2563eb) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  font-weight:900 !important;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(37,99,235,.22);
}

.public-top-menu > a.btn-primary:hover,
.menu > a.btn-primary:hover,
.topbar a.btn-primary:hover{
  color:#ffffff !important;
  background:linear-gradient(135deg,#1e293b,#1d4ed8) !important;
  transform:translateY(-1px);
}

.public-top-menu .editor-menu-user,
.menu .editor-menu-user,
.topbar .editor-menu-user{
  color:#ffffff !important;
  background:linear-gradient(135deg,#0f766e,#0ea5e9) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  font-weight:900 !important;
}

/* Login Web normal button in menu */
.public-top-menu [data-open-editor-login],
.menu [data-open-editor-login],
.topbar [data-open-editor-login]{
  color:#ffffff !important;
  background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
  font-weight:900 !important;
}


/* ============================================================
   D2 PATCH 2026-05-15:
   Quick Blocks V2
   ============================================================ */

.quick-blocks-section{
  display:grid;
  gap:28px;
}

.quick-block-group{
  display:grid;
  gap:16px;
}

.quick-block-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.quick-block-card{
  min-height:180px;
}

.quick-block-marquee,
.quick-block-pdf,
.quick-block-image-banner,
.quick-block-news,
.quick-block-coming,
.quick-block-custom{
  grid-column:1 / -1;
}

.quick-block-marquee{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  align-items:center;
  overflow:hidden;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.10);
  background:linear-gradient(135deg,#0f172a,#1d4ed8);
  color:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.12);
}

.quick-block-marquee__label{
  padding:14px 18px;
  font-weight:900;
  background:rgba(255,255,255,.12);
  white-space:nowrap;
}

.quick-block-marquee__track{
  overflow:hidden;
  white-space:nowrap;
}

.quick-block-marquee__track span{
  display:inline-block;
  padding:14px 0;
  animation:quickMarquee 24s linear infinite;
}

@keyframes quickMarquee{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}

.quick-block-pdf{
  padding:22px;
}

.quick-block-pdf__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.quick-block-pdf__head h3,
.quick-block-news h3,
.quick-block-coming h3{
  margin:0 0 6px;
  font-size:1.45rem;
  letter-spacing:-.03em;
}

.quick-pdf-table{
  box-shadow:none;
}

.quick-block-image-banner{
  position:relative;
  overflow:hidden;
  display:block;
  min-height:260px;
  border-radius:30px;
  background:#0f172a;
  box-shadow:0 22px 58px rgba(15,23,42,.14);
}

.quick-block-image-banner img{
  width:100%;
  height:100%;
  min-height:260px;
  object-fit:cover;
  display:block;
  opacity:.88;
  transition:transform .22s ease, opacity .22s ease;
}

.quick-block-image-banner:hover img{
  transform:scale(1.025);
  opacity:.95;
}

.quick-block-image-banner__caption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  display:grid;
  gap:4px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(15,23,42,.62);
  color:#fff;
  backdrop-filter:blur(10px);
}

.quick-block-image-banner__caption b{
  font-size:1.25rem;
}

.quick-block-image-banner__caption span{
  opacity:.86;
}

.quick-block-news{
  padding:22px;
}

.quick-block-news__list{
  display:grid;
  gap:10px;
}

.quick-block-news__list a{
  display:grid;
  gap:4px;
  padding:14px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.quick-block-news__list span{
  color:#64748b;
}

.quick-block-coming{
  padding:22px;
}

.quick-block-coming img{
  width:100%;
  max-height:360px;
  object-fit:cover;
  border-radius:22px;
  margin-bottom:12px;
}

.quick-block-custom{
  padding:22px;
}

@media(max-width:980px){
  .quick-block-list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .quick-block-list{
    grid-template-columns:1fr;
  }

  .quick-block-marquee{
    grid-template-columns:1fr;
  }

  .quick-block-pdf__head{
    flex-direction:column;
  }
}

/* ============================================================
   D2 PATCH 2026-05-15:
   Quick Block Slider/Gallery
   ============================================================ */

.quick-admin-image-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
}

.quick-admin-image-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}

.quick-admin-image-card img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
}

.quick-admin-image-card > div{
  padding:12px;
}

.quick-block-slider{
  padding:20px;
  overflow:hidden;
}

.quick-block-slider__head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}

.quick-block-slider__head h3{
  margin:0 0 6px;
  font-size:1.45rem;
  letter-spacing:-.03em;
}

.quick-block-slider__controls{
  display:flex;
  gap:8px;
}

.quick-block-slider__controls button{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  font-size:1.6rem;
  cursor:pointer;
}

.quick-block-slider__viewport{
  overflow:hidden;
  border-radius:24px;
  background:#0f172a;
}

.quick-block-slider__track{
  display:flex;
  transition:transform .36s ease;
  will-change:transform;
}

.quick-block-slider__slide{
  min-width:100%;
  margin:0;
  position:relative;
}

.quick-block-slider__slide img{
  width:100%;
  height:430px;
  object-fit:cover;
  display:block;
}

.quick-block-slider__slide figcaption{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(15,23,42,.62);
  color:#fff;
  backdrop-filter:blur(8px);
  font-weight:800;
}

.quick-block-gallery{
  padding:20px;
}

.quick-block-gallery h3{
  margin:0 0 8px;
  font-size:1.45rem;
  letter-spacing:-.03em;
}

.quick-block-gallery__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}

.quick-block-gallery__grid figure{
  margin:0;
  overflow:hidden;
  border-radius:20px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

.quick-block-gallery__grid img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

.quick-block-gallery__grid figcaption{
  padding:10px 12px;
  color:#334155;
  font-weight:700;
}

@media(max-width:860px){
  .quick-admin-image-grid,
  .quick-block-gallery__grid{
    grid-template-columns:1fr;
  }

  .quick-block-slider__slide img{
    height:280px;
  }
}

/* D2 PATCH: empty state for slider/gallery image blocks */
.quick-block-slider__empty{
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  color:#64748b;
  font-weight:900;
}

.quick-block-gallery__empty{
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#f8fafc,#e2e8f0);
  color:#64748b;
  font-weight:900;
}

/* D2 FIX: force page hero background visible */
.hero.has-bg{
  min-height:360px;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  color:#ffffff !important;
}

.hero.has-bg h1,
.hero.has-bg p{
  color:#ffffff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.42);
}

/* D2 FIX: force page background image visible */
.hero.has-bg,
.page-hero-bg.has-bg{
  min-height:420px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  color:#ffffff !important;
  position:relative;
  overflow:hidden;
}

.hero.has-bg > *,
.page-hero-bg.has-bg > *{
  position:relative;
  z-index:2;
}

.hero.has-bg h1,
.hero.has-bg p,
.page-hero-bg.has-bg h1,
.page-hero-bg.has-bg p{
  color:#ffffff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}


/* ============================================================
   D2 PATCH:
   Full page background image for web pages.
   Background covers the whole page, not only hero.
   ============================================================ */

.page-full-background{
  position:relative;
  min-height:100vh;
}

.page-full-background.has-bg{
  background:
    linear-gradient(180deg, rgba(15,23,42,.64), rgba(15,23,42,.34)),
    var(--page-bg) center center / cover fixed no-repeat !important;
  padding-bottom:42px;
}

.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg{
  background:transparent !important;
  color:#ffffff !important;
}

.page-full-background.has-bg .hero h1,
.page-full-background.has-bg .hero p,
.page-full-background.has-bg .page-hero-on-bg h1,
.page-full-background.has-bg .page-hero-on-bg p{
  color:#ffffff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}

.page-full-background.has-bg .page-content-wrap,
.page-full-background.has-bg main.container{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.45);
  border-radius:28px;
  padding:24px;
  box-shadow:0 24px 70px rgba(15,23,42,.18);
}

.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table{
  background:rgba(255,255,255,.94);
}

@media(max-width:760px){
  .page-full-background.has-bg{
    background-attachment:scroll !important;
  }

  .page-full-background.has-bg .page-content-wrap,
  .page-full-background.has-bg main.container{
    border-radius:20px;
    padding:16px;
  }
}

/* ============================================================
   D2 PATCH:
   Global SmartWeb background for every public page.
   - Site background applies to all pages.
   - Page-specific background can override via --smartweb-bg.
   ============================================================ */

body.smartweb-global-bg,
body.smartweb-global-bg .page-full-background.has-bg{
  background:
    linear-gradient(180deg, rgba(15,23,42,.66), rgba(15,23,42,.34)),
    var(--smartweb-bg) center center / cover fixed no-repeat !important;
  min-height:100vh;
}

body.smartweb-global-bg .public-main,
body.smartweb-global-bg main.container,
body.smartweb-global-bg .page-content-wrap{
  position:relative;
}

body.smartweb-global-bg .public-section,
body.smartweb-global-bg .page-content-wrap,
body.smartweb-global-bg main.container{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  border-radius:28px;
  padding:24px;
  box-shadow:0 24px 70px rgba(15,23,42,.16);
}

body.smartweb-global-bg .public-hero,
body.smartweb-global-bg .hero,
body.smartweb-global-bg .page-hero-on-bg{
  background:transparent !important;
  color:#ffffff !important;
}

body.smartweb-global-bg .public-hero h1,
body.smartweb-global-bg .public-hero p,
body.smartweb-global-bg .hero h1,
body.smartweb-global-bg .hero p{
  color:#ffffff !important;
  text-shadow:0 2px 16px rgba(0,0,0,.48);
}

body.smartweb-global-bg .card,
body.smartweb-global-bg table,
body.smartweb-global-bg .page-doc-table{
  background:rgba(255,255,255,.94);
}

@media(max-width:760px){
  body.smartweb-global-bg,
  body.smartweb-global-bg .page-full-background.has-bg{
    background-attachment:scroll !important;
  }

  body.smartweb-global-bg .public-section,
  body.smartweb-global-bg .page-content-wrap,
  body.smartweb-global-bg main.container{
    border-radius:18px;
    padding:16px;
  }
}

/* ============================================================
   D2 FIX:
   Lighten full-page background overlay.
   Make saved background images brighter and clearer.
   ============================================================ */

.page-full-background.has-bg,
.site-full-background.has-bg{
  background:
    linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.08)),
    var(--page-bg) center center / cover fixed no-repeat !important;
}

.page-full-background.has-bg .hero h1,
.page-full-background.has-bg .hero p,
.page-full-background.has-bg .page-hero-on-bg h1,
.page-full-background.has-bg .page-hero-on-bg p,
.site-full-background.has-bg .hero h1,
.site-full-background.has-bg .hero p,
.site-full-background.has-bg .public-hero h1,
.site-full-background.has-bg .public-hero p{
  text-shadow:0 2px 10px rgba(0,0,0,.34);
}

.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  background:rgba(255,255,255,.78);
}

.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.86);
}


/* D2 FIX: extra light background overlay */
.page-full-background.has-bg,
.site-full-background.has-bg{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    var(--page-bg) center center / cover fixed no-repeat !important;
}


/* ============================================================
   D2 FIX:
   Make full-page background more vivid.
   Use real image layer with saturation/contrast instead of dark overlay.
   ============================================================ */

.page-full-background.has-bg,
.site-full-background.has-bg{
  background:none !important;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.page-full-background.has-bg::before,
.site-full-background.has-bg::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:var(--page-bg) center center / cover no-repeat !important;
  filter:saturate(1.45) contrast(1.10) brightness(1.08);
  transform:scale(1.02);
}

.page-full-background.has-bg::after,
.site-full-background.has-bg::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:rgba(255,255,255,.03);
  pointer-events:none;
}

.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg,
.site-full-background.has-bg .hero,
.site-full-background.has-bg .public-hero{
  background:transparent !important;
}

.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  background:rgba(255,255,255,.72) !important;
}

.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.82) !important;
}


/* D2 FIX: extra vivid background */
.page-full-background.has-bg::before,
.site-full-background.has-bg::before{
  filter:saturate(1.75) contrast(1.16) brightness(1.10) !important;
}

.page-full-background.has-bg::after,
.site-full-background.has-bg::after{
  background:rgba(255,255,255,.00) !important;
}


/* ============================================================
   D2 FIX:
   Show raw background image.
   Remove dark/white overlay that makes background look covered.
   ============================================================ */

.page-full-background.has-bg,
.site-full-background.has-bg{
  background:none !important;
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}

/* ภาพพื้นหลังจริง */
.page-full-background.has-bg::before,
.site-full-background.has-bg::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  background:var(--page-bg) center center / cover no-repeat !important;

  /* เอาฟิลเตอร์ออก ให้ภาพเหมือนต้นฉบับ */
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* ปิดชั้นฟิล์มที่บังภาพ */
.page-full-background.has-bg::after,
.site-full-background.has-bg::after{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* ไม่ให้ hero ทับ background */
.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg,
.site-full-background.has-bg .hero,
.site-full-background.has-bg .public-hero{
  background:transparent !important;
}

/* ลดความขาวของกล่องเนื้อหา ไม่ให้บังภาพเยอะ */
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  background:rgba(255,255,255,.58) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* card โปร่งขึ้น */
.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.68) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}


/* D2 FIX: maximum background visibility */
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  background:rgba(255,255,255,.35) !important;
}

.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.48) !important;
}


/* ============================================================
   D2 HARD FIX:
   Background image must show as image, not black overlay.
   Remove pseudo negative layer issue.
   ============================================================ */

.page-full-background.has-bg,
.site-full-background.has-bg{
  background:var(--page-bg) center center / cover fixed no-repeat !important;
  background-color:transparent !important;
  position:relative !important;
  isolation:auto !important;
  overflow:visible !important;
  min-height:100vh !important;
}

/* ปิด pseudo layers เดิมทั้งหมด */
.page-full-background.has-bg::before,
.page-full-background.has-bg::after,
.site-full-background.has-bg::before,
.site-full-background.has-bg::after{
  content:none !important;
  display:none !important;
  background:none !important;
  opacity:0 !important;
  filter:none !important;
}

/* ปิดพื้นหลังดำของ hero/public hero */
.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg,
.site-full-background.has-bg .hero,
.site-full-background.has-bg .public-hero{
  background:transparent !important;
  background-color:transparent !important;
}

/* กล่องเนื้อหาโปร่ง แต่ไม่ดำ */
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap,
.site-full-background.has-bg main.container{
  background:rgba(255,255,255,.62) !important;
  color:#0f172a !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* card ต้องไม่ดำ */
.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.72) !important;
  color:#0f172a !important;
}

@media(max-width:760px){
  .page-full-background.has-bg,
  .site-full-background.has-bg{
    background-attachment:scroll !important;
  }
}


/* ============================================================
   D2 FIX:
   HTML uses --smartweb-bg, so CSS must read --smartweb-bg.
   ============================================================ */

.page-full-background.has-bg,
.site-full-background.has-bg{
  background:var(--smartweb-bg) center center / cover fixed no-repeat !important;
  background-color:transparent !important;
}

.page-full-background.has-bg::before,
.page-full-background.has-bg::after,
.site-full-background.has-bg::before,
.site-full-background.has-bg::after{
  content:none !important;
  display:none !important;
}

@media(max-width:760px){
  .page-full-background.has-bg,
  .site-full-background.has-bg{
    background:var(--smartweb-bg) center center / cover scroll no-repeat !important;
  }
}


/* ============================================================
   D2 FINAL FIX:
   Force raw SmartWeb background image to show.
   No overlay, no pseudo layer, no black fallback.
   ============================================================ */

html,
body{
  background:transparent !important;
}

body{
  background-color:#ffffff !important;
}

.page-full-background.has-bg,
.site-full-background.has-bg{
  min-height:100vh !important;
  background-image:var(--smartweb-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  background-color:#ffffff !important;
  isolation:auto !important;
  overflow:visible !important;
}

/* kill old overlay layers */
.page-full-background.has-bg::before,
.page-full-background.has-bg::after,
.site-full-background.has-bg::before,
.site-full-background.has-bg::after{
  content:none !important;
  display:none !important;
}

/* prevent hero/main from painting black over background */
.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg,
.site-full-background.has-bg .hero,
.site-full-background.has-bg .public-hero,
.page-full-background.has-bg main,
.site-full-background.has-bg main{
  background:transparent !important;
  background-color:transparent !important;
}

/* content boxes readable but not black */
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap,
.site-full-background.has-bg main.container{
  background:rgba(255,255,255,.60) !important;
  color:#0f172a !important;
}

@media(max-width:760px){
  .page-full-background.has-bg,
  .site-full-background.has-bg{
    background-attachment:scroll !important;
  }
}


/* ============================================================
   D2 FINAL VISUAL FIX:
   Super bright full-page background.
   Show image clearly, remove dark feeling.
   ============================================================ */

html,
body{
  background:#ffffff !important;
}

.page-full-background.has-bg,
.site-full-background.has-bg{
  min-height:100vh !important;

  background-image:var(--smartweb-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  background-color:#ffffff !important;

  filter:none !important;
  opacity:1 !important;
  isolation:auto !important;
  overflow:visible !important;
}

/* ปิด overlay/pseudo layer ทุกตัว */
.page-full-background.has-bg::before,
.page-full-background.has-bg::after,
.site-full-background.has-bg::before,
.site-full-background.has-bg::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  background:none !important;
  filter:none !important;
}

/* ปิดพื้นหลัง hero ที่อาจทับภาพ */
.page-full-background.has-bg .hero,
.page-full-background.has-bg .page-hero-on-bg,
.site-full-background.has-bg .hero,
.site-full-background.has-bg .public-hero{
  background:transparent !important;
  background-color:transparent !important;
}

/* กล่องเนื้อหาให้ใสขึ้น ไม่บังภาพ */
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap,
.site-full-background.has-bg main.container{
  background:rgba(255,255,255,.28) !important;
  color:#0f172a !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
}

/* การ์ดให้โปร่งขึ้น */
.page-full-background.has-bg .card,
.page-full-background.has-bg .page-doc-table,
.site-full-background.has-bg .card,
.site-full-background.has-bg .quick-block-pdf,
.site-full-background.has-bg .quick-block-news{
  background:rgba(255,255,255,.42) !important;
  color:#0f172a !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ถ้ารูปยังดูหม่น ให้ใช้ pseudo image layer แบบสว่างแทน background ปกติ */
.page-full-background.has-bg.bg-vivid::before,
.site-full-background.has-bg.bg-vivid::before{
  content:"" !important;
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  background-image:var(--smartweb-bg) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  filter:brightness(1.22) saturate(1.35) contrast(1.04) !important;
  opacity:1 !important;
}

@media(max-width:760px){
  .page-full-background.has-bg,
  .site-full-background.has-bg{
    background-attachment:scroll !important;
  }
}


/* ============================================================
   D2 PATCH:
   Hero motion image.
   Uses cover_image/image_file as moving hero artwork.
   Background page remains separate.
   ============================================================ */

.hero.hero-motion,
.public-hero.public-hero-motion{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  min-height:420px;
  background:transparent !important;
}

.hero.hero-motion::before,
.public-hero.public-hero-motion::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:-2;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  animation:smartwebHeroMotion 18s ease-in-out infinite alternate;
  transform-origin:center;
}

/* เบาๆ เพื่อให้อ่านตัวอักษรได้ ไม่กดสีภาพมาก */
.hero.hero-motion::after,
.public-hero.public-hero-motion::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(15,23,42,.18),rgba(15,23,42,.04));
  pointer-events:none;
}

@keyframes smartwebHeroMotion{
  0%{
    transform:scale(1.02) translate3d(-1.8%, -1.2%, 0);
    background-position:45% 45%;
  }
  50%{
    transform:scale(1.10) translate3d(1.4%, .8%, 0);
    background-position:55% 50%;
  }
  100%{
    transform:scale(1.16) translate3d(-.8%, 1.6%, 0);
    background-position:50% 58%;
  }
}

.hero.hero-motion h1,
.hero.hero-motion p,
.public-hero.public-hero-motion h1,
.public-hero.public-hero-motion p{
  color:#ffffff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.36);
}

@media(max-width:760px){
  .hero.hero-motion,
  .public-hero.public-hero-motion{
    min-height:340px;
  }

  .hero.hero-motion::before,
  .public-hero.public-hero-motion::before{
    animation-duration:22s;
  }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero.hero-motion::before,
  .public-hero.public-hero-motion::before{
    animation:none !important;
    transform:none !important;
  }
}


/* ============================================================
   D2 PATCH:
   Managed Hero
   Background / motion / mayor profile / widgets.
   ============================================================ */

.hero-managed{
  position:relative;
  overflow:hidden;
  min-height:560px;
  border-radius:0 0 42px 42px;
  isolation:isolate;
  background:#0f172a;
}

.hero-managed__bg{
  position:absolute;
  inset:-8%;
  z-index:-3;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.03);
}

.hero-managed.hero-motion .hero-managed__bg{
  animation:smartwebHeroManagedMotion 22s ease-in-out infinite alternate;
}

.hero-managed::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.hero-managed.hero-overlay-none::after{
  background:transparent;
}

.hero-managed.hero-overlay-light::after{
  background:linear-gradient(135deg,rgba(15,23,42,.18),rgba(15,23,42,.04));
}

.hero-managed.hero-overlay-medium::after{
  background:linear-gradient(135deg,rgba(15,23,42,.42),rgba(15,23,42,.16));
}

.hero-managed.hero-overlay-dark::after{
  background:linear-gradient(135deg,rgba(15,23,42,.68),rgba(15,23,42,.28));
}

.hero-managed__inner{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  min-height:560px;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);
  gap:28px;
  align-items:center;
  padding:54px 0;
}

.hero-layout-center .hero-managed__inner{
  grid-template-columns:1fr;
  text-align:center;
}

.hero-layout-center .hero-person-card{
  max-width:380px;
  margin:0 auto;
}

.hero-layout-profile_left .hero-managed__copy{
  order:2;
}

.hero-layout-profile_left .hero-person-card{
  order:1;
}

.hero-managed__copy h1{
  margin:10px 0 14px;
  font-size:clamp(2.4rem,6vw,5.6rem);
  line-height:.95;
  letter-spacing:-.07em;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.34);
}

.hero-managed__copy p{
  color:rgba(255,255,255,.92);
  font-size:1.13rem;
  line-height:1.7;
  max-width:720px;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.hero-managed__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

.hero-managed__actions .btn{
  font-weight:900;
}

.hero-person-card{
  overflow:hidden;
  border-radius:32px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.56);
  box-shadow:0 28px 80px rgba(15,23,42,.22);
  backdrop-filter:blur(10px);
}

.hero-person-card img{
  width:100%;
  height:390px;
  object-fit:cover;
  display:block;
  object-position:center top;
}

.hero-person-card__body{
  padding:20px;
}

.hero-person-card h3{
  margin:0 0 5px;
  font-size:1.35rem;
  color:#0f172a;
}

.hero-person-card p{
  margin:0 0 10px;
  color:#475569;
  font-weight:800;
}

.hero-person-card blockquote{
  margin:0;
  padding:12px 14px;
  border-radius:18px;
  background:#f8fafc;
  color:#334155;
  line-height:1.6;
}

.hero-widget-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:28px;
}

.hero-widget-card{
  display:grid;
  gap:5px;
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 14px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(8px);
  color:#0f172a;
}

.hero-widget-card span{
  font-size:1.45rem;
}

.hero-widget-card b{
  font-size:.98rem;
}

.hero-widget-card small{
  color:#64748b;
  line-height:1.45;
}

@keyframes smartwebHeroManagedMotion{
  0%{
    transform:scale(1.03) translate3d(-1.4%,-1%,0);
    background-position:45% 48%;
  }
  50%{
    transform:scale(1.10) translate3d(1.2%,.8%,0);
    background-position:54% 52%;
  }
  100%{
    transform:scale(1.16) translate3d(-.7%,1.4%,0);
    background-position:50% 58%;
  }
}

@media(max-width:900px){
  .hero-managed__inner{
    grid-template-columns:1fr;
  }

  .hero-widget-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-person-card img{
    height:320px;
  }
}

@media(max-width:560px){
  .hero-managed{
    border-radius:0 0 28px 28px;
  }

  .hero-managed__inner{
    width:min(100% - 24px,1180px);
    padding:36px 0;
  }

  .hero-widget-grid{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-managed.hero-motion .hero-managed__bg{
    animation:none !important;
  }
}

/* ============================================================
   D2 FIX:
   Hero person / mayor image auto fit.
   Show full image without stretching or cutting head.
   ============================================================ */

.hero-person-card{
  display:grid;
  background:rgba(255,255,255,.88) !important;
}

.hero-person-card img{
  width:100% !important;
  height:420px !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(241,245,249,.92)) !important;
  padding:10px !important;
  border-radius:28px 28px 0 0 !important;
}

/* ถ้ารูปแนวตั้งยาวมาก ให้ยังอยู่ในกรอบ */
.hero-person-card__body{
  position:relative;
  z-index:2;
}

/* มือถือ */
@media(max-width:900px){
  .hero-person-card img{
    height:360px !important;
  }
}

@media(max-width:560px){
  .hero-person-card img{
    height:300px !important;
  }
}


/* ============================================================
   D2 PATCH:
   Toggle mayor/person image frame.
   hero_person_frame = 0 => no background, no card frame.
   ============================================================ */

.hero-person-card.hero-person-card--no-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
}

.hero-person-card.hero-person-card--no-frame img{
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  object-position:center bottom !important;
  filter:drop-shadow(0 22px 36px rgba(15,23,42,.28));
}

.hero-person-card.hero-person-card--no-frame .hero-person-card__body{
  margin-top:12px;
  border-radius:24px;
  padding:16px 18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 16px 38px rgba(15,23,42,.16);
}

.hero-person-card.hero-person-card--no-frame .hero-person-card__body:empty{
  display:none;
}


/* ============================================================
   D2 PATCH:
   Hero mayor/person name + position layout.
   Center text, match image width, toggle info background.
   ============================================================ */

.hero-person-card{
  width:min(100%, 420px) !important;
  justify-self:center !important;
}

.hero-person-card img{
  width:100% !important;
  height:clamp(300px, 38vw, 460px) !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* กล่องชื่อ/ตำแหน่งให้กว้างพอดีกับรูป */
.hero-person-card__body{
  width:100% !important;
  box-sizing:border-box !important;
  text-align:center !important;
  display:grid !important;
  justify-items:center !important;
  gap:6px !important;
  padding:16px 18px !important;
}

/* ชื่อนายก */
.hero-person-card__body h3{
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(1.15rem, 2.4vw, 1.55rem) !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  color:#0f172a !important;
}

/* ตำแหน่งนายก */
.hero-person-card__body p{
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  font-size:clamp(.92rem, 1.7vw, 1.08rem) !important;
  line-height:1.45 !important;
  font-weight:800 !important;
  color:#475569 !important;
}

/* คำกล่าว */
.hero-person-card__body blockquote{
  width:100% !important;
  box-sizing:border-box !important;
  margin:8px 0 0 !important;
  text-align:center !important;
  font-size:clamp(.88rem, 1.5vw, 1rem) !important;
  line-height:1.6 !important;
}

/* ปิดพื้นหลังชื่อ/ตำแหน่ง */
.hero-person-card__body.hero-person-card__body--no-bg{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:10px 4px !important;
}

/* ตอนปิดพื้นหลัง ให้อ่านบน hero ได้ */
.hero-person-card__body.hero-person-card__body--no-bg h3,
.hero-person-card__body.hero-person-card__body--no-bg p{
  color:#ffffff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.48) !important;
}

.hero-person-card__body.hero-person-card__body--no-bg blockquote{
  background:rgba(255,255,255,.24) !important;
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.35) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* ถ้าปิดกรอบรูปนายก ให้ชื่อ/ตำแหน่งยังอยู่กึ่งกลางใต้รูป */
.hero-person-card.hero-person-card--no-frame{
  width:min(100%, 420px) !important;
  justify-self:center !important;
  text-align:center !important;
}

.hero-person-card.hero-person-card--no-frame img{
  width:100% !important;
  height:clamp(300px, 38vw, 460px) !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}

/* มือถือ */
@media(max-width:700px){
  .hero-person-card,
  .hero-person-card.hero-person-card--no-frame{
    width:min(100%, 340px) !important;
  }

  .hero-person-card img,
  .hero-person-card.hero-person-card--no-frame img{
    height:320px !important;
  }
}


/* ============================================================
   D2 PATCH:
   Hero text slides, PowerPoint-like effects.
   ============================================================ */

.hero-text-slider{
  position:relative;
  min-height:clamp(250px, 35vw, 390px);
}

.hero-text-slide{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  opacity:0;
  pointer-events:none;
  transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}

.hero-text-slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  z-index:2;
}

.hero-text-slide--slide_left{
  transform:translateX(32px);
}

.hero-text-slide--slide_left.is-active{
  transform:translateX(0);
}

.hero-text-slide--zoom_in{
  transform:scale(.96);
}

.hero-text-slide--zoom_in.is-active{
  transform:scale(1);
}

.hero-text-slide h1{
  margin:10px 0 14px;
}

.hero-text-slide p{
  margin:0;
}

@media(max-width:760px){
  .hero-text-slider{
    min-height:360px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-text-slide{
    transition:none !important;
    transform:none !important;
  }
}


/* ============================================================
   D2 PATCH:
   Hero text slide font-size controls.
   Per slide:
   --hero-title-size
   --hero-subtitle-size
   ============================================================ */

.hero-text-slide h1{
  font-size:clamp(2rem, calc(var(--hero-title-size, 64px) * .95), 7.5rem) !important;
  line-height:.95 !important;
  letter-spacing:-.06em !important;
}

.hero-text-slide p{
  font-size:clamp(1rem, var(--hero-subtitle-size, 20px), 2.6rem) !important;
  line-height:1.65 !important;
}

/* มือถือ: ลดขนาดอัตโนมัติ ไม่ให้ล้นจอ */
@media(max-width:760px){
  .hero-text-slide h1{
    font-size:clamp(2rem, calc(var(--hero-title-size, 64px) * .58), 4.2rem) !important;
  }

  .hero-text-slide p{
    font-size:clamp(.98rem, calc(var(--hero-subtitle-size, 20px) * .9), 1.55rem) !important;
  }
}


/* ============================================================
   D2 FIX:
   Hero text line spacing.
   Make multi-line title/subtitle more readable.
   ============================================================ */

.hero-text-slide h1,
.hero-managed__copy h1{
  line-height:1.14 !important;
  letter-spacing:-.045em !important;
  margin-bottom:18px !important;
}

.hero-text-slide p,
.hero-managed__copy p{
  line-height:1.9 !important;
  margin-top:8px !important;
  margin-bottom:18px !important;
}

.hero-managed__actions{
  margin-top:24px !important;
}

/* มือถือ ให้โปร่งแต่ไม่กินพื้นที่เกิน */
@media(max-width:760px){
  .hero-text-slide h1,
  .hero-managed__copy h1{
    line-height:1.18 !important;
    margin-bottom:14px !important;
  }

  .hero-text-slide p,
  .hero-managed__copy p{
    line-height:1.75 !important;
    margin-bottom:14px !important;
  }
}


/* ============================================================
   D2 PATCH:
   Hero text line-height and letter-spacing controls.
   Values come from per-slide CSS variables.
   ============================================================ */

.hero-text-slide h1{
  line-height:var(--hero-title-line-height, 1.14) !important;
  letter-spacing:var(--hero-title-letter-spacing, -0.045em) !important;
}

.hero-text-slide p{
  line-height:var(--hero-subtitle-line-height, 1.9) !important;
  letter-spacing:var(--hero-subtitle-letter-spacing, 0em) !important;
}


/* ============================================================
   D2 PATCH:
   Hero title multiline control.
   Use manual line breaks, avoid ugly word breaking.
   ============================================================ */

.hero-text-slide h1,
.hero-managed__copy h1{
  word-break:normal !important;
  overflow-wrap:normal !important;
  white-space:normal !important;
}

.hero-text-slide h1 br,
.hero-managed__copy h1 br{
  display:block;
  content:"";
}


/* ============================================================
   D2 PATCH:
   More Hero Text Slide Effects.
   Effects:
   fade_down, slide_right, zoom_out, flip_soft,
   blur_reveal, rotate_soft, typewriter
   ============================================================ */

.hero-text-slide{
  will-change:opacity, transform, filter;
}

/* Fade down */
.hero-text-slide--fade_down{
  transform:translateY(-24px);
}
.hero-text-slide--fade_down.is-active{
  transform:translateY(0);
}

/* Slide right */
.hero-text-slide--slide_right{
  transform:translateX(-42px);
}
.hero-text-slide--slide_right.is-active{
  transform:translateX(0);
}

/* Zoom out */
.hero-text-slide--zoom_out{
  transform:scale(1.08);
}
.hero-text-slide--zoom_out.is-active{
  transform:scale(1);
}

/* Flip soft */
.hero-text-slide--flip_soft{
  transform:perspective(900px) rotateX(12deg) translateY(16px);
  transform-origin:center top;
}
.hero-text-slide--flip_soft.is-active{
  transform:perspective(900px) rotateX(0deg) translateY(0);
}

/* Blur reveal */
.hero-text-slide--blur_reveal{
  filter:blur(14px);
  transform:translateY(12px) scale(.985);
}
.hero-text-slide--blur_reveal.is-active{
  filter:blur(0);
  transform:translateY(0) scale(1);
}

/* Rotate soft */
.hero-text-slide--rotate_soft{
  transform:rotate(-2.5deg) scale(.97);
}
.hero-text-slide--rotate_soft.is-active{
  transform:rotate(0deg) scale(1);
}

/* Typewriter */
.hero-text-slide--typewriter h1,
.hero-text-slide--typewriter p{
  overflow:hidden;
}

.hero-text-slide--typewriter.is-active h1{
  animation:smartwebTypewriterTitle 1.1s steps(26,end) both;
  white-space:nowrap;
  max-width:100%;
}

.hero-text-slide--typewriter.is-active p{
  animation:smartwebTypewriterSub .9s steps(34,end) .25s both;
  white-space:nowrap;
  max-width:100%;
}

@keyframes smartwebTypewriterTitle{
  0%{
    width:0;
    opacity:1;
  }
  100%{
    width:100%;
    opacity:1;
  }
}

@keyframes smartwebTypewriterSub{
  0%{
    width:0;
    opacity:1;
  }
  100%{
    width:100%;
    opacity:1;
  }
}

/* Cursor sparkle for typewriter */
.hero-text-slide--typewriter.is-active h1::after{
  content:"";
  display:inline-block;
  width:.08em;
  height:.86em;
  margin-left:.08em;
  background:currentColor;
  vertical-align:-.05em;
  animation:smartwebCaretBlink .75s steps(1,end) infinite;
}

@keyframes smartwebCaretBlink{
  50%{
    opacity:0;
  }
}

/* On small screens, allow typewriter lines to wrap instead of breaking layout */
@media(max-width:760px){
  .hero-text-slide--typewriter.is-active h1,
  .hero-text-slide--typewriter.is-active p{
    white-space:normal;
    animation:none;
  }

  .hero-text-slide--typewriter.is-active h1::after{
    display:none;
  }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .hero-text-slide,
  .hero-text-slide.is-active,
  .hero-text-slide--fade_down,
  .hero-text-slide--slide_right,
  .hero-text-slide--zoom_out,
  .hero-text-slide--flip_soft,
  .hero-text-slide--blur_reveal,
  .hero-text-slide--rotate_soft{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }

  .hero-text-slide--typewriter.is-active h1,
  .hero-text-slide--typewriter.is-active p{
    animation:none !important;
    white-space:normal !important;
  }
}


/* ============================================================
   D2 FIX:
   Admin Hero form input sizing.
   Make number/text controls larger and easier to use.
   ============================================================ */

.admin-content input,
.admin-content select,
.admin-content textarea,
.form-card input,
.form-card select,
.form-card textarea{
  min-height:48px !important;
  font-size:16px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}

.form-card textarea{
  min-height:96px !important;
  line-height:1.65 !important;
}

/* ช่องตัวเลขใน Hero ให้กว้างพอ */
.form-card input[type="number"]{
  width:100% !important;
  min-width:160px !important;
  max-width:260px !important;
  font-size:17px !important;
  font-weight:800 !important;
  text-align:center !important;
}

/* ช่องค่าระยะห่าง เช่น 1.14, -0.045em ให้เห็นเต็ม */
.form-card input[name="title_line_height"],
.form-card input[name="subtitle_line_height"],
.form-card input[name="title_letter_spacing"],
.form-card input[name="subtitle_letter_spacing"]{
  width:100% !important;
  min-width:220px !important;
  max-width:340px !important;
  font-size:17px !important;
  font-weight:800 !important;
  text-align:center !important;
}

/* ช่องขนาดตัวหนังสือ */
.form-card input[name="title_size"],
.form-card input[name="subtitle_size"],
.form-card input[name="duration_ms"],
.form-card input[name="sort_order"]{
  width:100% !important;
  min-width:180px !important;
  max-width:300px !important;
}

/* label ให้อ่านง่ายขึ้น */
.form-card label{
  font-size:15px !important;
  font-weight:900 !important;
  margin-top:14px !important;
  margin-bottom:7px !important;
  display:block !important;
}

/* ข้อความช่วยใต้ช่อง */
.form-card .muted{
  font-size:13.5px !important;
  line-height:1.55 !important;
  margin-top:6px !important;
}

/* grid ในฟอร์มให้มีพื้นที่มากขึ้น */
.form-card .grid.two{
  grid-template-columns:repeat(2,minmax(240px,1fr)) !important;
  gap:18px !important;
  align-items:start !important;
}

/* ปุ่มให้กดง่าย */
.form-card .btn,
.admin-content .btn{
  min-height:42px !important;
  padding:10px 16px !important;
  font-size:15px !important;
  border-radius:14px !important;
}

/* มือถือให้เรียงลงมา */
@media(max-width:760px){
  .form-card .grid.two{
    grid-template-columns:1fr !important;
  }

  .form-card input[type="number"],
  .form-card input[name="title_line_height"],
  .form-card input[name="subtitle_line_height"],
  .form-card input[name="title_letter_spacing"],
  .form-card input[name="subtitle_letter_spacing"]{
    max-width:100% !important;
  }
}


/* ============================================================
   D2 PATCH:
   Hero left side collapsible menu.
   ============================================================ */

.hero-managed{
  position:relative;
}

.hero-side-menu{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:8;
  display:flex;
  align-items:center;
  gap:8px;
}

.hero-side-menu__toggle{
  width:46px;
  height:46px;
  border:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  cursor:pointer;
  background:rgba(255,255,255,.9);
  color:#0f172a;
  box-shadow:0 14px 36px rgba(15,23,42,.22);
  font-size:20px;
  font-weight:900;
}

.hero-side-menu__panel{
  width:260px;
  max-height:min(460px, calc(100vh - 160px));
  overflow:auto;
  border-radius:26px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.56);
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding:14px;
  transition:width .28s ease, opacity .22s ease, transform .28s ease;
}

.hero-side-menu__head{
  padding:10px 12px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
  margin-bottom:8px;
}

.hero-side-menu__head b{
  display:block;
  font-size:1rem;
  color:#0f172a;
}

.hero-side-menu__head small{
  color:#64748b;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-side-menu__list{
  display:grid;
  gap:8px;
}

.hero-side-menu__item{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:18px;
  color:#0f172a;
  background:rgba(248,250,252,.86);
  border:1px solid rgba(15,23,42,.06);
  transition:transform .16s ease, background .16s ease;
}

.hero-side-menu__item:hover{
  transform:translateX(3px);
  background:#ffffff;
}

.hero-side-menu__icon{
  width:38px;
  height:38px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:#eef2ff;
  font-size:1.2rem;
}

.hero-side-menu__text b{
  display:block;
  font-size:.94rem;
  line-height:1.25;
}

.hero-side-menu__text small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:.78rem;
  line-height:1.35;
}

/* collapsed */
.hero-side-menu.is-collapsed .hero-side-menu__panel{
  width:0;
  opacity:0;
  transform:translateX(-10px);
  padding-left:0;
  padding-right:0;
  border-width:0;
  pointer-events:none;
}

.hero-side-menu.is-collapsed .hero-side-menu__toggle-icon{
  transform:rotate(0deg);
}

.hero-side-menu:not(.is-collapsed) .hero-side-menu__toggle-icon{
  display:inline-block;
  transform:rotate(90deg);
}

/* avoid covering main hero text too much */
.hero-managed__inner{
  padding-left:72px;
}

@media(max-width:980px){
  .hero-side-menu{
    top:auto;
    bottom:18px;
    left:14px;
    transform:none;
    align-items:flex-end;
  }

  .hero-side-menu__panel{
    width:min(270px, calc(100vw - 86px));
    max-height:320px;
  }

  .hero-managed__inner{
    padding-left:0;
    padding-bottom:96px;
  }
}

@media(max-width:560px){
  .hero-side-menu__panel{
    width:calc(100vw - 86px);
  }
}


/* ============================================================
   D2 PATCH:
   Hero side menu style controls + optional icon.
   Admin controls:
   --hero-menu-bg
   --hero-menu-opacity
   --hero-menu-text
   --hero-menu-item-bg
   --hero-menu-item-opacity
   ============================================================ */

.hero-side-menu__panel{
  background:color-mix(in srgb, var(--hero-menu-bg, #ffffff) calc(var(--hero-menu-opacity, .88) * 100%), transparent) !important;
  color:var(--hero-menu-text, #0f172a) !important;
}

.hero-side-menu__head b,
.hero-side-menu__item,
.hero-side-menu__item b{
  color:var(--hero-menu-text, #0f172a) !important;
}

.hero-side-menu__head small,
.hero-side-menu__text small{
  color:color-mix(in srgb, var(--hero-menu-text, #0f172a) 68%, transparent) !important;
}

.hero-side-menu__item{
  background:color-mix(in srgb, var(--hero-menu-item-bg, #f8fafc) calc(var(--hero-menu-item-opacity, .86) * 100%), transparent) !important;
}

.hero-side-menu__item:hover{
  background:color-mix(in srgb, var(--hero-menu-item-bg, #f8fafc) 96%, #ffffff) !important;
}

/* Optional icon: if no icon, text takes full width */
.hero-side-menu__item--no-icon{
  grid-template-columns:1fr !important;
}

.hero-side-menu__item--no-icon .hero-side-menu__text{
  padding-left:2px;
}

.hero-side-menu__item--no-icon b{
  font-size:1rem;
}


/* ============================================================
   D2 PATCH:
   Hero mayor/person frame style controls.
   Supports:
   - background color
   - opacity
   - background image
   - border radius
   ============================================================ */

.hero-person-card{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--person-frame-bg, #ffffff) calc(var(--person-frame-opacity, .88) * 100%), transparent),
      color-mix(in srgb, var(--person-frame-bg, #ffffff) calc(var(--person-frame-opacity, .88) * 100%), transparent)
    ) !important;
  border-radius:var(--person-frame-radius, 32px) !important;
  overflow:hidden !important;
}

.hero-person-card.hero-person-card--has-bg-image{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--person-frame-bg, #ffffff) calc(var(--person-frame-opacity, .72) * 100%), transparent),
      color-mix(in srgb, var(--person-frame-bg, #ffffff) calc(var(--person-frame-opacity, .72) * 100%), transparent)
    ),
    var(--person-frame-bg-image) center center / cover no-repeat !important;
}

/* รูปนายกต้องยัง fit อยู่บนพื้นหลังกรอบ */
.hero-person-card img{
  background:transparent !important;
}

/* ปิดกรอบ = ไม่มีสี ไม่มีรูปพื้นหลัง ไม่มีแผ่นรอง */
.hero-person-card.hero-person-card--no-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-person-card.hero-person-card--no-frame.hero-person-card--has-bg-image{
  background:transparent !important;
}


/* ============================================================
   D2 FIX:
   Widen SmartWeb public content area.
   Makes website content slightly wider on desktop.
   ============================================================ */

/* container หลักของหน้าเว็บ */
.container,
.public-main,
main.container{
  width:min(100% - 32px, 1320px) !important;
  max-width:1320px !important;
}

/* พื้นที่ section หน้าแรก */
.public-section{
  width:100% !important;
}

/* Hero ให้กว้างขึ้นตาม container */
.hero-managed__inner{
  width:min(100% - 36px, 1320px) !important;
  max-width:1320px !important;
}

/* หน้าเนื้อหา / หน้ารายละเอียด */
.page-content-wrap,
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  max-width:1280px !important;
  width:min(100% - 32px, 1280px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Quick Blocks / Cards ให้กระจายพื้นที่ดีขึ้น */
.quick-blocks-section,
.quick-block-group,
.quick-block-list{
  max-width:1320px !important;
}

/* ตารางเอกสาร PDF ให้หายอึดอัด */
.page-doc-table,
.quick-block-pdf,
.public-table,
table{
  width:100% !important;
}

/* จอใหญ่พิเศษ ขยายได้อีกนิด */
@media(min-width:1500px){
  .container,
  .public-main,
  main.container,
  .hero-managed__inner{
    max-width:1440px !important;
  }

  .page-content-wrap,
  .page-full-background.has-bg main.container,
  .page-full-background.has-bg .page-content-wrap{
    max-width:1380px !important;
  }
}

/* มือถือยังไม่ล้น */
@media(max-width:760px){
  .container,
  .public-main,
  main.container,
  .hero-managed__inner,
  .page-content-wrap,
  .page-full-background.has-bg main.container,
  .page-full-background.has-bg .page-content-wrap{
    width:min(100% - 20px, 100%) !important;
    max-width:100% !important;
  }
}


/* ============================================================
   D2 PATCH:
   Admin-adjustable website width.
   Values from:
   --smartweb-layout-width
   --smartweb-content-width
   --smartweb-hero-width
   ============================================================ */

.container,
.public-main,
main.container{
  width:min(100% - 32px, var(--smartweb-layout-width, 1320px)) !important;
  max-width:var(--smartweb-layout-width, 1320px) !important;
}

.hero-managed__inner{
  width:min(100% - 36px, var(--smartweb-hero-width, 1320px)) !important;
  max-width:var(--smartweb-hero-width, 1320px) !important;
}

.page-content-wrap,
.page-full-background.has-bg main.container,
.page-full-background.has-bg .page-content-wrap{
  width:min(100% - 32px, var(--smartweb-content-width, 1280px)) !important;
  max-width:var(--smartweb-content-width, 1280px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.quick-blocks-section,
.quick-block-group,
.quick-block-list{
  max-width:var(--smartweb-layout-width, 1320px) !important;
}

@media(max-width:760px){
  .container,
  .public-main,
  main.container,
  .hero-managed__inner,
  .page-content-wrap,
  .page-full-background.has-bg main.container,
  .page-full-background.has-bg .page-content-wrap{
    width:min(100% - 20px, 100%) !important;
    max-width:100% !important;
  }
}


/* D2 Side Layout: left / center / right */
.smartweb-layout-shell{
  width:min(100% - 32px, var(--smartweb-layout-width, 1320px));
  max-width:var(--smartweb-layout-width, 1320px);
  margin:0 auto;
  display:grid;
  grid-template-columns:
    var(--smartweb-side-left-width, 260px)
    minmax(0, 1fr)
    var(--smartweb-side-right-width, 280px);
  gap:18px;
  align-items:start;
}

.smartweb-layout-shell.no-left{
  grid-template-columns:minmax(0,1fr) var(--smartweb-side-right-width, 280px);
}

.smartweb-layout-shell.no-right{
  grid-template-columns:var(--smartweb-side-left-width, 260px) minmax(0,1fr);
}

.smartweb-layout-shell.no-left.no-right{
  grid-template-columns:minmax(0,1fr);
}

.smartweb-layout-shell > main.container,
.smartweb-layout-shell > .container,
.smartweb-layout-shell > .public-main{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

.smartweb-side{
  position:sticky;
  top:88px;
  display:grid;
  gap:12px;
}

.smartweb-side__head{
  padding:12px 14px;
  border-radius:18px;
  background:rgba(15,23,42,.88);
  color:#ffffff;
  font-weight:900;
  box-shadow:0 14px 30px rgba(15,23,42,.14);
}

.smartweb-side__list{
  display:grid;
  gap:10px;
}

.smartweb-side-item{
  display:block;
  overflow:hidden;
  border-radius:20px;
  color:var(--side-item-text, #0f172a) !important;
  background:color-mix(in srgb, var(--side-item-bg, #ffffff) calc(var(--side-item-opacity, .9) * 100%), transparent) !important;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 16px 34px rgba(15,23,42,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.smartweb-side-item__banner{
  width:100%;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
}

.smartweb-side-item__body{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
}

.smartweb-side-item--no-icon .smartweb-side-item__body{
  grid-template-columns:1fr;
}

.smartweb-side-item__icon{
  width:38px;
  height:38px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.56);
  font-size:1.15rem;
}

.smartweb-side-item__text b{
  display:block;
  color:var(--side-item-text, #0f172a);
  font-size:.98rem;
  line-height:1.3;
}

.smartweb-side-item__text small{
  display:block;
  margin-top:3px;
  color:color-mix(in srgb, var(--side-item-text, #0f172a) 70%, transparent);
  font-size:.8rem;
  line-height:1.45;
}

@media(max-width:1100px){
  .smartweb-layout-shell,
  .smartweb-layout-shell.no-left,
  .smartweb-layout-shell.no-right{
    grid-template-columns:1fr;
  }

  .smartweb-side{
    position:relative;
    top:auto;
  }

  .smartweb-side__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .smartweb-layout-shell{
    width:min(100% - 20px, 100%);
  }

  .smartweb-side__list{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   D2 PATCH:
   Hero Weather Widget
   ============================================================ */

.hero-weather-widget{
  width:min(100%, 360px);
  margin-top:22px;
  padding:16px;
  border-radius:26px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.52);
  color:#0f172a;
  box-shadow:0 20px 48px rgba(15,23,42,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.hero-weather-widget__top{
  display:flex;
  gap:12px;
  align-items:center;
}

.hero-weather-widget__icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#eef2ff;
  font-size:1.45rem;
}

.hero-weather-widget__top b{
  display:block;
  font-size:1.02rem;
  color:#0f172a;
}

.hero-weather-widget__top small{
  color:#64748b;
  font-weight:800;
}

.hero-weather-widget__main{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}

.hero-weather-widget__main strong{
  font-size:clamp(2.2rem, 5vw, 3.5rem);
  line-height:.9;
  letter-spacing:-.06em;
}

.hero-weather-widget__main span{
  margin-bottom:4px;
  font-weight:900;
  color:#334155;
  text-align:right;
}

.hero-weather-widget__meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.hero-weather-widget__meta span{
  padding:9px 10px;
  border-radius:16px;
  background:rgba(248,250,252,.9);
  font-size:.9rem;
  color:#475569;
  font-weight:800;
}

.hero-weather-widget.is-error{
  background:rgba(254,242,242,.9);
}

.hero-weather-widget.is-loaded{
  animation:smartwebWeatherPop .38s ease both;
}

@keyframes smartwebWeatherPop{
  from{
    opacity:.72;
    transform:translateY(8px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:760px){
  .hero-weather-widget{
    width:100%;
  }
}


/* ============================================================
   D2 PATCH:
   Hero Weather Mini Widget.
   Compact weather display with selectable metrics.
   ============================================================ */

.hero-weather-widget.hero-weather-widget--mini{
  width:min(100%, 310px) !important;
  margin-top:16px !important;
  padding:11px 12px !important;
  border-radius:20px !important;
}

.hero-weather-widget--mini .hero-weather-widget__top{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  gap:9px !important;
  align-items:center !important;
}

.hero-weather-widget--mini .hero-weather-widget__icon{
  width:36px !important;
  height:36px !important;
  border-radius:14px !important;
  font-size:1.22rem !important;
}

.hero-weather-widget--mini .hero-weather-widget__title b{
  font-size:.92rem !important;
  line-height:1.15 !important;
}

.hero-weather-widget--mini .hero-weather-widget__title small{
  font-size:.72rem !important;
  line-height:1.2 !important;
}

.hero-weather-widget--mini .hero-weather-widget__temp{
  font-size:1.85rem !important;
  line-height:.95 !important;
  letter-spacing:-.06em !important;
  color:#0f172a;
}

.hero-weather-widget__condition{
  margin-top:6px;
  font-size:.82rem;
  font-weight:900;
  color:#334155;
}

.hero-weather-widget__chips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}

.hero-weather-widget__chips span{
  padding:7px 8px;
  border-radius:13px;
  background:rgba(248,250,252,.92);
  color:#475569;
  font-size:.78rem;
  font-weight:900;
  line-height:1.15;
}

.hero-weather-widget__chips b{
  color:#0f172a;
}

.hero-weather-widget--mini .hero-weather-widget__chips{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.hero-weather-widget--normal{
  width:min(100%, 360px);
}

/* ถ้าซ่อน temp แล้ว title กินพื้นที่ */
.hero-weather-widget__top:not(:has(.hero-weather-widget__temp)){
  grid-template-columns:auto 1fr !important;
}

@media(max-width:760px){
  .hero-weather-widget.hero-weather-widget--mini{
    width:100% !important;
  }
}


/* D2 FIX: weather icon visibility */
.hero-weather-widget__icon{
  font-size:1.45rem !important;
  background:rgba(238,242,255,.95) !important;
  color:#0f172a !important;
}

.hero-weather-widget--mini .hero-weather-widget__icon{
  width:42px !important;
  height:42px !important;
  font-size:1.55rem !important;
}


/* ============================================================
   D2 PATCH:
   Fixed Hero Widgets: Live Radio + Contact
   These are real webpage widgets, toggleable from admin/hero.
   ============================================================ */

.hero-fixed-widget-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:min(100%, 520px);
  margin-top:16px;
}

.hero-fixed-widget{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:20px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.52);
  color:#0f172a !important;
  box-shadow:0 18px 42px rgba(15,23,42,.16);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.hero-fixed-widget:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 54px rgba(15,23,42,.22);
  background:rgba(255,255,255,.94);
}

.hero-fixed-widget__icon{
  width:42px;
  height:42px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  background:#eef2ff;
}

.hero-fixed-widget--radio .hero-fixed-widget__icon{
  background:#fff7ed;
}

.hero-fixed-widget--contact .hero-fixed-widget__icon{
  background:#ecfeff;
}

.hero-fixed-widget__text b{
  display:block;
  font-size:.96rem;
  line-height:1.2;
  font-weight:900;
  color:#0f172a;
}

.hero-fixed-widget__text small{
  display:block;
  margin-top:3px;
  font-size:.78rem;
  line-height:1.35;
  font-weight:800;
  color:#64748b;
}

.hero-fixed-widget__arrow{
  font-size:1.5rem;
  font-weight:900;
  color:#64748b;
}

@media(max-width:760px){
  .hero-fixed-widget-grid{
    grid-template-columns:1fr;
    width:100%;
  }
}


/* ============================================================
   D2 PATCH:
   Content Widgets in center content area.
   ============================================================ */

.content-widget-section{
  width:min(100% - 32px, var(--smartweb-content-width, 1280px));
  max-width:var(--smartweb-content-width, 1280px);
  margin:28px auto;
}

.content-widget-section__head h2{
  margin:0 0 14px;
  font-size:clamp(1.25rem, 2vw, 1.75rem);
  color:#0f172a;
}

.content-widget-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.content-widget-card{
  display:block;
  overflow:hidden;
  border-radius:24px;
  color:var(--cw-text, #0f172a) !important;
  background:color-mix(in srgb, var(--cw-bg, #ffffff) calc(var(--cw-opacity, .9) * 100%), transparent) !important;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 18px 44px rgba(15,23,42,.13);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .18s ease, box-shadow .18s ease;
}

.content-widget-card:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 58px rgba(15,23,42,.18);
}

.content-widget-card__image{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
  display:block;
}

.content-widget-card__body{
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
}

.content-widget-card--no-icon .content-widget-card__body{
  grid-template-columns:1fr auto;
}

.content-widget-card__icon{
  width:46px;
  height:46px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.45rem;
  background:rgba(255,255,255,.62);
}

.content-widget-card__text b{
  display:block;
  font-size:1.04rem;
  font-weight:900;
  line-height:1.25;
  color:var(--cw-text, #0f172a);
}

.content-widget-card__text small{
  display:block;
  margin-top:4px;
  font-size:.86rem;
  font-weight:800;
  line-height:1.45;
  color:color-mix(in srgb, var(--cw-text, #0f172a) 68%, transparent);
}

.content-widget-card__arrow{
  font-size:1.8rem;
  font-weight:900;
  opacity:.72;
}

.content-widget-card--radio .content-widget-card__icon{
  background:#fff7ed;
}

.content-widget-card--contact .content-widget-card__icon{
  background:#ecfeff;
}

@media(max-width:760px){
  .content-widget-section{
    width:min(100% - 20px, 100%);
  }

  .content-widget-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   D2 PATCH:
   Universal Widget System
   Works in Hero / QC / Content / Side areas.
   ============================================================ */

.universal-widget-section{
  width:100%;
  margin:18px auto;
}

.universal-widget-head h2{
  margin:0 0 14px;
  font-size:clamp(1.2rem,2vw,1.7rem);
  color:#0f172a;
}

.universal-widget-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.universal-widget-card{
  display:block;
  overflow:hidden;
  border-radius:24px;
  color:var(--uw-text,#0f172a) !important;
  background:color-mix(in srgb, var(--uw-bg,#ffffff) calc(var(--uw-opacity,.9) * 100%), transparent) !important;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:0 18px 44px rgba(15,23,42,.13);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.universal-widget-card__image{
  width:100%;
  aspect-ratio:16/7;
  object-fit:cover;
  display:block;
}

.universal-widget-card__body{
  display:grid;
  grid-template-columns:46px 1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
}

.universal-widget-card--no-icon .universal-widget-card__body{
  grid-template-columns:1fr auto;
}

.universal-widget-card__icon{
  width:46px;
  height:46px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:1.45rem;
  background:rgba(255,255,255,.62);
}

.universal-widget-card__text b,
.universal-widget-mayor__text b{
  display:block;
  font-size:1.04rem;
  font-weight:900;
  line-height:1.25;
  color:var(--uw-text,#0f172a);
}

.universal-widget-card__text small,
.universal-widget-mayor__text small{
  display:block;
  margin-top:4px;
  font-size:.86rem;
  font-weight:800;
  line-height:1.45;
  color:color-mix(in srgb, var(--uw-text,#0f172a) 68%, transparent);
}

.universal-widget-card__arrow{
  font-size:1.8rem;
  font-weight:900;
  opacity:.72;
}

.universal-widget-card--mayor{
  padding:14px;
  text-align:center;
}

.universal-widget-mayor__image{
  width:100%;
  max-height:260px;
  object-fit:contain;
  display:block;
  margin:0 auto 10px;
}

.universal-widget-card--weather{
  width:100% !important;
  margin:0 !important;
}

/* Hero area uses compact cards */
.hero-managed .universal-widget-section{
  margin-top:16px;
  max-width:520px;
}

.hero-managed .universal-widget-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Side columns should be one column */
.smartweb-side .universal-widget-grid{
  grid-template-columns:1fr;
}

.smartweb-side .universal-widget-section{
  margin:0;
}

/* Mobile */
@media(max-width:760px){
  .universal-widget-grid,
  .hero-managed .universal-widget-grid{
    grid-template-columns:1fr;
  }
}


/* D2 Universal Widget direct sidebar slot */
.smartweb-side--widget-only{
  margin-bottom:14px;
}

.smartweb-side--widget-only .universal-widget-section{
  margin:0 !important;
}

.smartweb-side--widget-only .universal-widget-grid{
  grid-template-columns:1fr !important;
}


/* D2 Universal Widget sidebar stack */
.smartweb-side-stack{
  display:grid;
  gap:14px;
  align-items:start;
}

.smartweb-side-stack .smartweb-side{
  position:sticky;
  top:88px;
}

.smartweb-side--widget-only{
  margin-bottom:0;
}

.smartweb-side--widget-only .universal-widget-section{
  margin:0 !important;
}

.smartweb-side--widget-only .universal-widget-grid{
  grid-template-columns:1fr !important;
}


/* ============================================================
   D2 FIX:
   Universal mayor widget in Hero Right should be large.
   ============================================================ */

/* ให้ widget ใน Hero ฝั่งขวาไม่โดนบีบเป็น 2 คอลัมน์ */
.hero-managed__inner > .universal-widget-section,
.hero-managed .universal-widget-section{
  width:100% !important;
  max-width:520px !important;
  margin:0 !important;
}

/* ใน Hero ให้ widget เป็น 1 คอลัมน์ */
.hero-managed .universal-widget-grid{
  grid-template-columns:1fr !important;
  width:100% !important;
}

/* กล่องนายกใน Hero ให้ใหญ่ขึ้น */
.hero-managed .universal-widget-card--mayor{
  width:100% !important;
  max-width:520px !important;
  padding:18px !important;
  border-radius:32px !important;
}

/* รูปนายกให้ใหญ่และพอดี */
.hero-managed .universal-widget-mayor__image{
  width:100% !important;
  max-width:420px !important;
  max-height:520px !important;
  object-fit:contain !important;
  margin:0 auto 12px !important;
}

/* ชื่อ/ตำแหน่ง จัดกลาง */
.hero-managed .universal-widget-mayor__text{
  text-align:center !important;
}

.hero-managed .universal-widget-mayor__text b{
  font-size:1.25rem !important;
  line-height:1.35 !important;
}

.hero-managed .universal-widget-mayor__text small{
  font-size:1rem !important;
  line-height:1.45 !important;
}

/* มือถือไม่ให้ล้น */
@media(max-width:760px){
  .hero-managed .universal-widget-card--mayor{
    max-width:100% !important;
  }

  .hero-managed .universal-widget-mayor__image{
    max-width:320px !important;
    max-height:420px !important;
  }
}


/* D2 FIX: widen hero content area */
.hero-managed__inner{
  width:min(100% - 32px, 1480px) !important;
  max-width:1480px !important;
  grid-template-columns:minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  gap:clamp(22px, 4vw, 64px) !important;
}

@media(max-width:960px){
  .hero-managed__inner{
    grid-template-columns:1fr !important;
  }
}


/* ============================================================
   D2 Universal Widget Size Controls
   Values come from /admin/widgets.
   ============================================================ */

.universal-widget-card{
  width:var(--uw-width, auto) !important;
  max-width:100% !important;
  padding:var(--uw-padding, initial);
  border-radius:var(--uw-radius, 24px) !important;
}

.universal-widget-card__body{
  padding:var(--uw-padding, 14px) !important;
}

.universal-widget-mayor__image{
  max-height:var(--uw-image-height, 520px) !important;
}

.universal-widget-card__image{
  max-height:var(--uw-image-height, none) !important;
}

.universal-widget-card__text b,
.universal-widget-mayor__text b{
  font-size:var(--uw-title-size, 1.04rem) !important;
}

.universal-widget-card__text small,
.universal-widget-mayor__text small{
  font-size:var(--uw-subtitle-size, .86rem) !important;
}

/* Hero right mayor default */
.hero-managed .universal-widget-card--mayor{
  width:var(--uw-width, 520px) !important;
  max-width:100% !important;
}

.hero-managed .universal-widget-mayor__image{
  max-height:var(--uw-image-height, 560px) !important;
}


/* ============================================================
   D2 More Universal Widget Types
   ============================================================ */

.universal-widget-card--banner{
  padding:0 !important;
  position:relative;
}

.universal-widget-banner__image{
  width:100%;
  max-height:var(--uw-image-height, 240px);
  object-fit:cover;
  display:block;
}

.universal-widget-banner__text{
  padding:var(--uw-padding, 14px);
}

.universal-widget-banner__text b,
.universal-widget-card--announcement b,
.universal-widget-card--emergency b,
.universal-widget-card--contact-full b,
.universal-widget-card--map b,
.universal-widget-card--video b,
.universal-widget-card--gallery b,
.universal-widget-card--service-status b{
  display:block;
  font-size:var(--uw-title-size, 1.05rem);
  line-height:1.3;
  color:var(--uw-text, #0f172a);
}

.universal-widget-banner__text small,
.universal-widget-card--announcement small,
.universal-widget-card--emergency small,
.universal-widget-card--contact-full small,
.universal-widget-card--map small,
.universal-widget-card--video small,
.universal-widget-card--gallery small,
.universal-widget-card--service-status small{
  display:block;
  margin-top:4px;
  font-size:var(--uw-subtitle-size, .88rem);
  line-height:1.45;
  color:color-mix(in srgb, var(--uw-text, #0f172a) 70%, transparent);
}

.universal-widget-card--announcement,
.universal-widget-card--emergency,
.universal-widget-card--service-status{
  display:flex;
  align-items:center;
  gap:12px;
  padding:var(--uw-padding, 16px) !important;
}

.universal-widget-ribbon,
.universal-widget-alert-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.68);
  font-size:1.35rem;
  flex:0 0 auto;
}

.universal-widget-card--sensor{
  padding:var(--uw-padding, 16px) !important;
  text-align:center;
}

.universal-widget-sensor__top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.universal-widget-card--sensor strong{
  display:block;
  font-size:clamp(1.6rem, 3vw, 2.3rem);
  line-height:1.05;
  color:var(--uw-text, #0f172a);
}

.universal-widget-card--sensor small{
  display:block;
  margin-top:4px;
  color:color-mix(in srgb, var(--uw-text, #0f172a) 68%, transparent);
}

.universal-widget-contact-list{
  display:grid;
  gap:6px;
  margin-top:10px;
}

.universal-widget-contact-list span{
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  font-weight:800;
}

.universal-widget-embed{
  margin-top:12px;
  overflow:hidden;
  border-radius:18px;
}

.universal-widget-embed iframe{
  width:100%;
  min-height:var(--uw-image-height, 260px);
  border:0;
  display:block;
}

.universal-widget-embed--video iframe{
  aspect-ratio:16/9;
  min-height:auto;
}

.universal-widget-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.universal-widget-gallery img{
  width:100%;
  height:var(--uw-image-height, 120px);
  object-fit:cover;
  border-radius:14px;
}

.universal-widget-status-dot{
  width:14px;
  height:14px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 0 0 6px color-mix(in srgb, currentColor 18%, transparent);
  flex:0 0 auto;
}

@media(max-width:760px){
  .universal-widget-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* ============================================================
   D2 Admin Widget Dynamic UI
   ============================================================ */

.widget-type-help{
  margin:12px 0 18px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(219,234,254,.9), rgba(240,249,255,.92));
  border:1px solid rgba(147,197,253,.7);
}

.widget-type-help b{
  display:block;
  color:#1e3a8a;
  font-size:1.02rem;
}

.widget-type-help p{
  margin:4px 0 0;
}

.widget-admin-section{
  margin:18px 0;
  padding:16px;
  border-radius:20px;
  background:rgba(248,250,252,.92);
  border:1px solid rgba(226,232,240,.95);
}

.widget-admin-section h3{
  margin:0 0 8px;
}

.admin-table td small{
  color:#64748b;
}

.admin-table .btn-sm{
  margin:2px;
}


/* D2: Universal widgets inside QC section */
.quick-blocks-section .universal-widget-section{
  width:100%;
  max-width:100%;
  margin:0 0 18px;
}

.quick-blocks-section .universal-widget-grid{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}


/* ============================================================
   D2 Admin Media Manager
   ============================================================ */

.media-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:16px 0;
}

.media-summary-card{
  padding:18px;
  border-radius:22px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 12px 32px rgba(15,23,42,.06);
}

.media-summary-card b{
  display:block;
  font-size:2rem;
  line-height:1;
  color:#0f172a;
}

.media-summary-card span{
  display:block;
  margin-top:6px;
  color:#64748b;
}

.media-summary-card--used b{ color:#166534; }
.media-summary-card--unused b{ color:#b45309; }

.media-category-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.media-category-chip{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  color:#0f172a;
  text-decoration:none;
}

.media-category-chip small{
  color:#64748b;
}

.media-category-chip.is-active{
  background:#dbeafe;
  border-color:#93c5fd;
}

.media-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.admin-page-head--compact{
  margin-bottom:14px;
}

.media-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}

.media-card{
  overflow:hidden;
  border-radius:20px;
  border:1px solid #e2e8f0;
  background:#ffffff;
}

.media-card.is-unused{
  border-color:#fed7aa;
}

.media-thumb{
  height:150px;
  background:#f8fafc;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.media-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.media-card-body{
  padding:12px;
}

.media-card-title{
  font-weight:900;
  color:#0f172a;
  word-break:break-all;
}

.media-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:6px 0;
  color:#64748b;
  font-size:.82rem;
}

.media-card code{
  display:block;
  padding:8px;
  border-radius:10px;
  background:#f8fafc;
  color:#334155;
  font-size:.76rem;
  word-break:break-all;
}

.media-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
}

.media-select{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:800;
}

.pill.warn{
  background:#fef3c7;
  color:#92400e;
}

@media(max-width:760px){
  .media-summary-grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   D2 FINAL: Mayor PNG floats cleanly in Hero
   Remove card background / overlay / pattern / shadow.
   ============================================================ */

.hero-managed .universal-widget-card--mayor,
.universal-widget-card--mayor{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
  padding:0 !important;
  border-radius:0 !important;
}

.hero-managed .universal-widget-card--mayor::before,
.hero-managed .universal-widget-card--mayor::after,
.universal-widget-card--mayor::before,
.universal-widget-card--mayor::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  border:none !important;
}

.hero-managed .universal-widget-mayor__image,
.universal-widget-mayor__image{
  position:relative !important;
  z-index:5 !important;
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:var(--uw-image-height, 560px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.hero-managed .universal-widget-mayor__text,
.universal-widget-mayor__text{
  position:relative !important;
  z-index:6 !important;
  text-align:center !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  margin-top:8px !important;
}


/* ============================================================
   D2 FIX: Mayor widget background is configurable again.
   Admin controls bg_color / opacity / padding / radius.
   ============================================================ */

.hero-managed .universal-widget-card--mayor,
.universal-widget-card--mayor{
  background:var(--uw-bg, transparent) !important;
  background-color:var(--uw-bg, transparent) !important;
  background-image:none !important;
  opacity:1 !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
  padding:var(--uw-padding, 0px) !important;
  border-radius:var(--uw-radius, 0px) !important;
}

/* ถ้าเลือก opacity ให้พื้นหลังโปร่งเฉพาะกล่อง ไม่ทำให้รูปนายกจาง */
.hero-managed .universal-widget-card--mayor::before,
.universal-widget-card--mayor::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  background:var(--uw-bg, transparent) !important;
  opacity:var(--uw-opacity, 1) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}

.hero-managed .universal-widget-card--mayor::after,
.universal-widget-card--mayor::after{
  content:none !important;
  display:none !important;
}

.hero-managed .universal-widget-mayor__image,
.universal-widget-mayor__image{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:var(--uw-image-height, 560px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.hero-managed .universal-widget-mayor__text,
.universal-widget-mayor__text{
  position:relative !important;
  z-index:3 !important;
  text-align:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  margin-top:8px !important;
}


/* D2 FINAL FIX: Mayor background opacity layer only */
.hero-managed .universal-widget-card--mayor,
.universal-widget-card--mayor{
  position:relative !important;
  isolation:isolate !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  opacity:1 !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
  padding:var(--uw-padding, 0px) !important;
  border-radius:var(--uw-radius, 0px) !important;
}

.hero-managed .universal-widget-card--mayor::before,
.universal-widget-card--mayor::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  display:block !important;
  background:var(--uw-bg, transparent) !important;
  opacity:var(--uw-opacity, 1) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
}

.hero-managed .universal-widget-card--mayor::after,
.universal-widget-card--mayor::after{
  content:none !important;
  display:none !important;
}

.hero-managed .universal-widget-mayor__image,
.universal-widget-mayor__image{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:var(--uw-image-height, 560px) !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

.hero-managed .universal-widget-mayor__text,
.universal-widget-mayor__text{
  position:relative !important;
  z-index:3 !important;
  text-align:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  margin-top:8px !important;
}


/* D2 Admin sidebar grouping */
.sidebar .admin-nav-group{
  display:block;
  margin:16px 10px 6px;
  padding-top:12px;
  border-top:1px solid rgba(148,163,184,.24);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
  color:#94a3b8;
}

.sidebar .admin-nav-group:first-of-type{
  margin-top:18px;
}

.sidebar a{
  display:block;
}


/* ============================================================
   D2 Admin Visual Builder / Widget Board
   ============================================================ */

.builder-layout{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
  align-items:start;
}

.builder-zone{
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#ffffff;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.builder-zone__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:#f8fafc;
  border-bottom:1px solid #e2e8f0;
}

.builder-zone__head h2{
  margin:0;
  font-size:1.05rem;
}

.builder-zone__head small{
  color:#64748b;
  font-weight:800;
}

.builder-zone__head span{
  padding:6px 10px;
  border-radius:999px;
  background:#e0f2fe;
  color:#075985;
  font-weight:900;
  font-size:.8rem;
}

.builder-zone__body{
  display:grid;
  gap:10px;
  padding:12px;
  min-height:76px;
}

.builder-empty{
  padding:16px;
  border:1px dashed #cbd5e1;
  border-radius:18px;
  color:#94a3b8;
  text-align:center;
  font-weight:800;
}

.builder-widget{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid #dbeafe;
  background:#eff6ff;
}

.builder-widget.is-off{
  opacity:.58;
  filter:grayscale(.25);
  background:#f8fafc;
  border-color:#e2e8f0;
}

.builder-widget__drag{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#ffffff;
  color:#64748b;
  font-weight:900;
  box-shadow:0 6px 18px rgba(15,23,42,.08);
}

.builder-widget__main{
  min-width:0;
}

.builder-widget__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.builder-widget__title b{
  color:#0f172a;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.builder-widget__title span{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:#ffffff;
  color:#1d4ed8;
  font-weight:900;
  font-size:.76rem;
}

.builder-widget p{
  margin:6px 0 0;
  color:#64748b;
  font-size:.9rem;
}

.builder-widget__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.builder-widget__meta small{
  padding:4px 8px;
  border-radius:999px;
  background:#ffffff;
  color:#64748b;
  font-weight:800;
}

.builder-widget__meta .ok{
  color:#166534;
  background:#dcfce7;
}

.builder-widget__actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.builder-widget__actions form{
  display:flex;
  gap:6px;
  align-items:center;
  margin:0;
}

  min-height:34px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  padding:4px 8px;
}

.btn.btn-xs{
  padding:6px 10px;
  min-height:auto;
  border-radius:10px;
  font-size:.8rem;
}

.builder-zone--other{
  margin-top:18px;
}

@media(max-width:760px){
  .builder-layout{
    grid-template-columns:1fr;
  }

  .builder-widget__actions{
    flex-direction:column;
    align-items:stretch;
  }

  .builder-widget__actions form,
  .builder-widget__actions a,
    width:100%;
  }
}


/* D2 Builder Drag & Drop */
.builder-widget{
  cursor:grab;
}

.builder-widget:active{
  cursor:grabbing;
}

.builder-widget.is-dragging{
  opacity:.45;
  transform:scale(.98);
}

.builder-zone__body.is-drag-over{
  outline:2px dashed #2563eb;
  outline-offset:-6px;
  background:#eff6ff;
}

.builder-zone__body.is-empty-zone{
  min-height:92px;
}

.builder-widget__drag{
  cursor:grab;
  user-select:none;
}


/* D2 Builder: real drag & drop UI */
.builder-widget{
  cursor:default;
  touch-action:none;
}

.builder-widget__drag{
  cursor:grab;
  user-select:none;
  touch-action:none;
  background:#dbeafe !important;
  color:#1d4ed8 !important;
}

.builder-widget__drag::after{
  content:" ลาก";
  font-size:.72rem;
  font-weight:900;
  margin-left:4px;
}

.builder-widget.is-chosen{
  outline:2px solid #2563eb;
  outline-offset:2px;
}

.builder-widget.is-dragging,
.builder-widget.is-drag-active{
  opacity:.45;
  transform:scale(.98);
}

.builder-is-dragging .builder-zone__body{
  outline:2px dashed rgba(37,99,235,.35);
  outline-offset:-6px;
}

.builder-zone__body.is-empty-zone{
  min-height:110px;
}

/* ซ่อน dropdown ย้ายตำแหน่ง เพราะใช้ลากวางเป็นหลักแล้ว */
.builder-move-form{
  display:none !important;
}


/* ============================================================
   D2 Live Builder on real frontend
   ============================================================ */

.live-builder-toolbar{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 14px;
  border-radius:20px;
  background:rgba(15,23,42,.92);
  color:#fff;
  box-shadow:0 18px 48px rgba(15,23,42,.35);
  backdrop-filter:blur(14px);
}

.live-builder-toolbar b{
  font-weight:950;
}

.live-builder-toolbar span{
  color:#cbd5e1;
  font-size:.9rem;
}

.live-builder-toolbar a{
  color:#fff;
  text-decoration:none;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.14);
  font-weight:900;
}

.is-live-builder .live-builder-area{
  position:relative;
  min-height:72px;
  outline:2px dashed rgba(37,99,235,.45);
  outline-offset:4px;
  border-radius:18px;
  margin:10px 0;
}

.live-builder-label{
  position:absolute;
  top:-14px;
  left:12px;
  z-index:50;
  padding:4px 8px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  pointer-events:none;
}

.live-builder-widget{
  position:relative !important;
}

.live-builder-handle{
  position:absolute;
  top:8px;
  right:8px;
  z-index:100;
  padding:6px 9px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:.78rem;
  font-weight:950;
  cursor:grab;
  box-shadow:0 8px 22px rgba(37,99,235,.32);
  user-select:none;
}

.live-builder-handle:active{
  cursor:grabbing;
}

.live-builder-chosen{
  outline:3px solid #2563eb !important;
  outline-offset:4px;
}

.live-builder-ghost{
  opacity:.45;
}

.is-live-builder .universal-widget-card{
  cursor:default;
}

@media(max-width:760px){
  .live-builder-toolbar{
    left:10px;
    right:10px;
    bottom:10px;
    font-size:.86rem;
  }

  .live-builder-toolbar a{
    flex:1 1 auto;
    text-align:center;
  }
}


/* D2 Live Builder grid target fix */
.is-live-builder [data-live-builder-grid]{
  min-height:90px;
  outline:2px dashed rgba(37,99,235,.25);
  outline-offset:6px;
  border-radius:18px;
}

.is-live-builder .live-builder-empty-grid{
  display:grid;
  place-items:center;
  min-height:120px;
}

.is-live-builder .live-builder-empty-grid::before{
  content:"ลาก Widget มาวางตรงนี้";
  color:#2563eb;
  font-weight:900;
  opacity:.8;
}

.live-builder-handle{
  cursor:grab !important;
  touch-action:none;
}

.live-builder-handle:active{
  cursor:grabbing !important;
}


/* ============================================================
   D2 Quick Cards as Universal Widget
   ============================================================ */
.universal-widget-card--quick-cards{
  width:var(--uw-width, 100%) !important;
  max-width:100% !important;
  padding:var(--uw-padding, 0px) !important;
  border-radius:var(--uw-radius, 24px) !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

.universal-widget-card--quick-cards::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--uw-bg, transparent);
  opacity:var(--uw-opacity, 0);
  border-radius:inherit;
  pointer-events:none;
}

.universal-widget-quick-cards__head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(226,232,240,.9);
}

.universal-widget-quick-cards__head span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:1.35rem;
}

.universal-widget-quick-cards__head b{
  display:block;
  color:var(--uw-text,#0f172a);
  font-size:var(--uw-title-size,1.15rem);
  font-weight:950;
}

.universal-widget-quick-cards__head small{
  display:block;
  color:#64748b;
  font-size:var(--uw-subtitle-size,.9rem);
  font-weight:800;
  margin-top:2px;
}

.quick-card-widget-wrap{
  position:relative;
  z-index:1;
  display:grid;
  gap:16px;
}

.quick-card-widget-group{
  padding:0;
}

.quick-card-widget-group__head{
  margin-bottom:10px;
}

.quick-card-widget-group__head h3{
  margin:0;
  color:#0f172a;
}

.quick-card-widget-group__head p{
  margin:4px 0 0;
  color:#64748b;
}

.quick-card-widget-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.quick-card-widget-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:82px;
  padding:12px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.95);
  text-decoration:none;
  color:#0f172a;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.quick-card-widget-item:hover{
  transform:translateY(-1px);
}

.quick-card-widget-item img{
  width:56px;
  height:56px;
  border-radius:16px;
  object-fit:cover;
  background:#f8fafc;
  flex:0 0 auto;
}

.quick-card-widget-item__icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#eff6ff;
  font-size:1.6rem;
  flex:0 0 auto;
}

.quick-card-widget-item__text b{
  display:block;
  font-size:.98rem;
  font-weight:950;
  line-height:1.3;
}

.quick-card-widget-item__text small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:.82rem;
  font-weight:800;
  line-height:1.35;
}

.quick-card-widget-empty{
  padding:18px;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  font-weight:900;
  text-align:center;
}

@media(max-width:760px){
  .quick-card-widget-grid{
    grid-template-columns:1fr;
  }
}


/* D2 QC Widget: restore legacy visual style */
.universal-widget-card--quick-cards.quick-blocks-section{
  width:var(--uw-width, 100%) !important;
  max-width:100% !important;
  padding:var(--uw-padding, 0px) !important;
  border-radius:var(--uw-radius, 0px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.universal-widget-card--quick-cards .quick-block-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}

.universal-widget-card--quick-cards .quick-block-card{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:82px;
  padding:12px;
  border-radius:20px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.95);
  text-decoration:none;
  color:#0f172a;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.universal-widget-card--quick-cards .quick-block-card img{
  width:56px;
  height:56px;
  border-radius:16px;
  object-fit:cover;
  background:#f8fafc;
  flex:0 0 auto;
}

.universal-widget-card--quick-cards .quick-block-card__icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#eff6ff;
  font-size:1.55rem;
  flex:0 0 auto;
}

.universal-widget-card--quick-cards .quick-block-card__text b{
  display:block;
  font-weight:950;
  line-height:1.3;
}

.universal-widget-card--quick-cards .quick-block-card__text small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:.82rem;
  font-weight:800;
  line-height:1.35;
}

@media(max-width:760px){
  .universal-widget-card--quick-cards .quick-block-grid{
    grid-template-columns:1fr;
  }
}


/* D2 FIX: QC widget needs center card background */
.content-before-zone{
  margin:18px 0 24px;
}

.content-before-zone .universal-widget-card--quick-cards{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  padding:clamp(16px, 2.2vw, 28px) !important;
  border-radius:28px !important;
  background:#ffffff !important;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.08) !important;
  overflow:hidden !important;
}

.content-before-zone .universal-widget-card--quick-cards::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:var(--uw-bg, #ffffff) !important;
  opacity:var(--uw-opacity, 1) !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.content-before-zone .universal-widget-card--quick-cards > *{
  position:relative;
  z-index:1;
}

.content-before-zone .quick-block-group{
  margin-top:14px;
}


/* D2 QC Group as Widget */
.universal-widget-card--quick-card-group{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}

.content-before-zone .universal-widget-card--quick-card-group{
  margin:18px 0;
}

.universal-widget-card--quick-card-group .quick-block-group{
  padding:clamp(16px, 2.2vw, 28px);
  border-radius:28px;
  background:#ffffff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 18px 44px rgba(15,23,42,.08);
}


/* D2 FIX: QC group widget should keep original QC look */
.universal-widget-card--quick-card-group{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.universal-widget-card--quick-card-group .quick-block-group{
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.universal-widget-card--quick-card-group .public-section-head{
  margin-bottom:14px;
}


/* D2 FIX: content_before widgets should stack vertically, especially QC groups */
.content-before-zone .universal-widget-section{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

.content-before-zone .universal-widget-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  width:100% !important;
}

.content-before-zone .universal-widget-card,
.content-before-zone .universal-widget-card--quick-card-group{
  width:100% !important;
  max-width:100% !important;
}

.content-before-zone .quick-blocks-section{
  margin:0 !important;
}

.content-before-zone .quick-block-group{
  width:100% !important;
}


/* D2 QC group widget: keep original inner renderer, light outer wrapper */
.content-before-zone .quick-block-widget-group{
  width:100% !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 0 20px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.content-before-zone .quick-block-widget-group .quick-block-group{
  margin:0 !important;
}

.content-before-zone .quick-block-widget-group .content-widget-section{
  margin:0 !important;
}


/* D2 QC original block drag handle */
.qc-group-draggable{
  position:relative;
}

.qc-group-drag-handle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  padding:7px 10px;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:.82rem;
  font-weight:950;
  cursor:grab;
  user-select:none;
  box-shadow:0 8px 22px rgba(37,99,235,.28);
}

.qc-group-drag-handle:active{
  cursor:grabbing;
}


/* ============================================================
   D2 FIX: Admin widget form fields bigger / easier to use
   ============================================================ */

.admin-main form input[type="text"],
.admin-main form input[type="url"],
.admin-main form input[type="number"],
.admin-main form input[type="file"],
.admin-main form input[type="color"],
.admin-main form input[type="date"],
.admin-main form input[type="datetime-local"],
.admin-main form select,
.admin-main form textarea{
  width:100% !important;
  min-height:46px !important;
  padding:11px 13px !important;
  border-radius:14px !important;
  border:1px solid #cbd5e1 !important;
  background:#ffffff !important;
  color:#0f172a !important;
  font-size:1rem !important;
  line-height:1.45 !important;
  box-sizing:border-box !important;
}

.admin-main form textarea{
  min-height:112px !important;
  resize:vertical !important;
}

.admin-main form select{
  cursor:pointer !important;
  padding-right:36px !important;
}

.admin-main form label{
  display:block !important;
  margin-bottom:7px !important;
  font-size:.94rem !important;
  font-weight:900 !important;
  color:#334155 !important;
}

.admin-main form .grid,
.admin-main form .grid.two,
.admin-main form .grid.three{
  gap:18px !important;
  align-items:start !important;
}

/* ช่องเลือกประเภท Widget สำคัญมาก ให้ใหญ่พิเศษ */
.admin-main form select[name="widget_type"],
.admin-main form select[name="display_area"],
.admin-main form select[name="widget_size"]{
  min-height:52px !important;
  font-size:1.05rem !important;
  font-weight:900 !important;
}

/* ช่อง config / html ให้สูงขึ้น */
.admin-main form textarea[name="html_content"],
.admin-main form textarea[name="config_json"]{
  min-height:150px !important;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size:.95rem !important;
}

/* มือถือให้ฟอร์มไม่เบียด */
@media(max-width:760px){
  .admin-main form input,
  .admin-main form select,
  .admin-main form textarea{
    min-height:50px !important;
    font-size:1rem !important;
  }
}


/* ============================================================
   D2 Visitor Stats Widget
   ============================================================ */
.universal-widget-card--visitor-stats{
  padding:var(--uw-padding, 18px) !important;
  border-radius:var(--uw-radius, 24px) !important;
  background:var(--uw-bg, #ffffff) !important;
  color:var(--uw-text, #0f172a) !important;
  border:1px solid rgba(226,232,240,.95) !important;
  box-shadow:0 16px 40px rgba(15,23,42,.08) !important;
}

.visitor-stats-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.visitor-stats-head > span{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#eff6ff;
  font-size:1.5rem;
}

.visitor-stats-head b{
  display:block;
  font-size:var(--uw-title-size, 1.08rem);
  font-weight:950;
  line-height:1.25;
}

.visitor-stats-head small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:var(--uw-subtitle-size, .86rem);
  font-weight:800;
}

.visitor-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.visitor-stats-grid > div{
  padding:12px 10px;
  border-radius:18px;
  background:#f8fafc;
  text-align:center;
  border:1px solid rgba(226,232,240,.9);
}

.visitor-stats-grid b{
  display:block;
  font-size:1.45rem;
  font-weight:950;
  color:#0f172a;
}

.visitor-stats-grid small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:.78rem;
  font-weight:900;
}

.visitor-stats-foot{
  margin-top:12px;
  padding-top:10px;
  border-top:1px dashed rgba(148,163,184,.65);
  color:#64748b;
  font-size:.82rem;
  font-weight:800;
  text-align:center;
}

@media(max-width:760px){
  .visitor-stats-grid{
    grid-template-columns:1fr;
  }
}


/* D2 Admin sticky save bar */
.admin-save-bar{
  position:sticky;
  bottom:16px;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:22px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(203,213,225,.95);
  box-shadow:0 18px 48px rgba(15,23,42,.16);
  backdrop-filter:blur(14px);
}

.admin-save-bar b{
  display:block;
  font-size:1rem;
  color:#0f172a;
}

.admin-save-bar small{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-weight:800;
}

.admin-save-bar .btn{
  white-space:nowrap;
}

@media(max-width:760px){
  .admin-save-bar{
    flex-direction:column;
    align-items:stretch;
  }

  .admin-save-bar .btn{
    width:100%;
  }
}


/* D2 FIX: Hero save bar align left */
.admin-save-bar{
  width:max-content !important;
  max-width:min(520px, calc(100vw - 32px)) !important;
  margin-left:0 !important;
  margin-right:auto !important;
  justify-content:flex-start !important;
}

.admin-save-bar .btn{
  margin-left:auto !important;
}

@media(max-width:760px){
  .admin-save-bar{
    width:100% !important;
    max-width:100% !important;
  }
}


/* D2 FIX: remove card wrapper style from Hero save button */
.admin-save-bar{
  position:relative !important;
  bottom:auto !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
  margin:18px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-radius:0 !important;
}

.admin-save-bar > div{
  display:none !important;
}

.admin-save-bar .btn{
  margin-left:0 !important;
}


/* D2 FIX: activity slider image background */
.quick-block-slider,
.quick-block-slider.card,
.quick-block-slider__viewport,
.quick-block-slider__track,
.quick-block-slider__slide,
.quick-block-slider__slide figure{
  background:#ffffff !important;
}

.quick-block-slider__slide img{
  display:block !important;
  background:#ffffff !important;
}


/* D2 selected upload file list */
.selected-file-list{
  margin:10px 0 8px;
  padding:12px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(226,232,240,.95);
}

.selected-file-list b{
  display:block;
  margin-bottom:8px;
  color:#0f172a;
  font-weight:950;
}

.selected-file-list ol{
  margin:0;
  padding-left:22px;
}

.selected-file-list li{
  margin:6px 0;
  color:#334155;
  font-weight:800;
}

.selected-file-list li small{
  margin-left:8px;
  color:#64748b;
  font-weight:700;
}


/* ============================================================
   D2 FIX: use existing SmartWeb width settings
   base.html already defines:
   --smartweb-layout-width
   --smartweb-content-width
   --smartweb-hero-width
   ============================================================ */

.container,
.public-main{
  width:min(100% - 32px, var(--smartweb-content-width, 1280px)) !important;
  max-width:var(--smartweb-content-width, 1280px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero-managed__inner{
  width:min(100% - 32px, var(--smartweb-hero-width, 1320px)) !important;
  max-width:var(--smartweb-hero-width, 1320px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.smartweb-layout-shell{
  width:min(100% - 32px, var(--smartweb-layout-width, 1560px)) !important;
  max-width:var(--smartweb-layout-width, 1560px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:760px){
  .container,
  .public-main,
  .hero-managed__inner,
  .smartweb-layout-shell{
    width:min(100% - 20px, 100%) !important;
    max-width:100% !important;
  }
}


/* ============================================================
   D2 FINAL CLEAN: Width follows existing SmartWeb settings
   ============================================================ */

/* Hero width from hero_width */
body .public-hero.hero-managed .hero-managed__inner,
body .hero-managed__inner{
  width:min(100% - 32px, var(--smartweb-hero-width, 1320px)) !important;
  max-width:var(--smartweb-hero-width, 1320px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Content width from content_width */
body main.container,
body .container.public-main,
body main.public-main,
body .public-main{
  width:min(100% - 32px, var(--smartweb-content-width, 1280px)) !important;
  max-width:var(--smartweb-content-width, 1280px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Layout shell width from layout_width */
body .smartweb-layout-shell{
  width:min(100% - 32px, var(--smartweb-layout-width, 1560px)) !important;
  max-width:var(--smartweb-layout-width, 1560px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Drop zones must follow parent, not lock width */
body .live-builder-area{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Universal widget wrapper must not cap page width */
body .live-builder-area > .universal-widget-section,
body .universal-widget-section,
body .hero-managed .universal-widget-section,
body .hero-managed__inner > .universal-widget-section{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Widget grid follows parent */
body .universal-widget-grid,
body .hero-managed .universal-widget-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Actual widget card still uses its own per-widget width */
body .hero-managed .universal-widget-card{
  max-width:100% !important;
}

body .hero-managed .universal-widget-card--mayor{
  width:var(--uw-width, 520px) !important;
  max-width:100% !important;
}

/* Mobile */
@media(max-width:760px){
  body .public-hero.hero-managed .hero-managed__inner,
  body .hero-managed__inner,
  body main.container,
  body .container.public-main,
  body main.public-main,
  body .public-main,
  body .smartweb-layout-shell{
    width:min(100% - 20px, 100%) !important;
    max-width:100% !important;
  }
}


/* ============================================================
   D2 Banner Widget: settings per item
   Default image = auto size, no crop
   ============================================================ */
.universal-widget-card--banner{
  display:block !important;
  width:var(--uw-width, 100%) !important;
  max-width:100% !important;
  padding:var(--uw-padding, 0px) !important;
  border-radius:var(--uw-radius, 24px) !important;
  overflow:hidden !important;
  color:var(--uw-text, #0f172a) !important;
  background:color-mix(in srgb, var(--uw-bg, #ffffff) calc(var(--uw-opacity, 0) * 100%), transparent) !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

.universal-widget-card--banner .universal-widget-banner__image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:calc(var(--uw-radius, 24px) - 2px) !important;
}

/* ถ้าตั้ง image_max_height ไว้ ให้จำกัดสูงสุด แต่ยังไม่ตัดรูป */
.universal-widget-card--banner[style*="--uw-image-height"] .universal-widget-banner__image{
  max-height:var(--uw-image-height, none) !important;
}

/* caption */
.universal-widget-card--banner .universal-widget-banner__text{
  padding:12px 4px 0 !important;
  color:var(--uw-text, #0f172a) !important;
}

.universal-widget-card--banner .universal-widget-banner__text b{
  display:block !important;
  font-size:var(--uw-title-size, 1rem) !important;
  font-weight:950 !important;
  line-height:1.3 !important;
}

.universal-widget-card--banner .universal-widget-banner__text small{
  display:block !important;
  margin-top:4px !important;
  font-size:var(--uw-subtitle-size, .88rem) !important;
  line-height:1.45 !important;
  opacity:.72 !important;
}


/* ============================================================
   D2 Drop Zone Widget Spacing
   ============================================================ */
.live-builder-area .universal-widget-section{
  margin:6px 0 !important;
}

.live-builder-area .universal-widget-grid{
  gap:8px !important;
}

.hero-managed .live-builder-area .universal-widget-section,
.smartweb-side .live-builder-area .universal-widget-section,
.smartweb-side-stack .live-builder-area .universal-widget-section{
  margin:4px 0 !important;
}

.hero-managed .live-builder-area .universal-widget-grid,
.smartweb-side .live-builder-area .universal-widget-grid,
.smartweb-side-stack .live-builder-area .universal-widget-grid{
  gap:6px !important;
}

.content-before-zone .universal-widget-section,
.content-after-zone .universal-widget-section{
  margin:8px 0 !important;
}

.content-before-zone .universal-widget-grid,
.content-after-zone .universal-widget-grid{
  gap:8px !important;
}


/* ============================================================
   D2 Drop Zone Compact
   ลดช่องไฟเฉพาะ widget ที่อยู่ใน live-builder/drop zone
   ============================================================ */

/* ตัด margin ซ้อนของ wrapper */
.live-builder-area{
  margin:0 !important;
  padding:0 !important;
}

.live-builder-area .universal-widget-section{
  margin:2px 0 !important;
  padding:0 !important;
}

.live-builder-area .universal-widget-grid{
  gap:4px !important;
  margin:0 !important;
  padding:0 !important;
}

/* ถ้าแต่ละ widget มี section แยก ให้ชิดกัน */
.live-builder-area .universal-widget-section + .universal-widget-section{
  margin-top:4px !important;
}

/* ลด padding default ของ card เฉพาะใน drop zone */
.live-builder-area .universal-widget-card{
  margin:0 !important;
}

/* พื้นที่ hero/side ให้ชิดกว่า */
.hero-managed .live-builder-area .universal-widget-section,
.smartweb-side .live-builder-area .universal-widget-section,
.smartweb-side-stack .live-builder-area .universal-widget-section{
  margin:2px 0 !important;
}

.hero-managed .live-builder-area .universal-widget-grid,
.smartweb-side .live-builder-area .universal-widget-grid,
.smartweb-side-stack .live-builder-area .universal-widget-grid{
  gap:4px !important;
}

/* content before/after ก็ลด แต่ยังไม่ชิดติดกันเกิน */
.content-before-zone .universal-widget-section,
.content-after-zone .universal-widget-section{
  margin:4px 0 !important;
}

.content-before-zone .universal-widget-grid,
.content-after-zone .universal-widget-grid{
  gap:6px !important;
}


/* D2 Drop Zone Compact Final */
.live-builder-area{margin:0!important;padding:0!important}
.live-builder-area>.universal-widget-section{margin:0!important;padding:0!important}
.live-builder-area .universal-widget-section{margin:0!important;padding:0!important}
.live-builder-area .universal-widget-grid{gap:2px!important;margin:0!important;padding:0!important}
.live-builder-area .universal-widget-card{margin:0!important}
.live-builder-area .universal-widget-section+.universal-widget-section{margin-top:2px!important}


/* D2 Flexible Drop Zone Layout */
.live-builder-area .universal-widget-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr))!important;
  gap:8px!important;
  align-items:start!important;
}

/* Widget ที่ควรเต็มแถว */
.live-builder-area .universal-widget-card--banner,
.live-builder-area .universal-widget-card--quick-card-group,
.live-builder-area .universal-widget-card--quick-cards,
.live-builder-area .universal-widget-card--gallery,
.live-builder-area .universal-widget-card--video,
.live-builder-area .universal-widget-card--map{
  grid-column:1 / -1!important;
}

/* Widget ขนาดเล็กให้เรียงข้างกันได้ */
.live-builder-area .universal-widget-card--visitor-stats,
.live-builder-area .universal-widget-card--weather,
.live-builder-area .universal-widget-card--sensor,
.live-builder-area .universal-widget-card--service-status,
.live-builder-area .universal-widget-card--contact{
  grid-column:auto!important;
}

/* ถ้า widget ตั้ง width_px ไว้ ให้การ์ดไม่ล้น */
.live-builder-area .universal-widget-card{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* Hero right ควรเป็นคอลัมน์เดียว เพราะพื้นที่แคบกว่า */
.live-builder-area[data-live-builder-area="hero_right"] .universal-widget-grid,
.live-builder-area[data-live-builder-area="hero"] .universal-widget-grid{
  grid-template-columns:1fr!important;
  gap:8px!important;
}

/* Side zones เป็นคอลัมน์เดียว */
.live-builder-area[data-live-builder-area="side_left"] .universal-widget-grid,
.live-builder-area[data-live-builder-area="side_right"] .universal-widget-grid{
  grid-template-columns:1fr!important;
  gap:6px!important;
}

/* Mobile ทุกอย่างเป็น 1 คอลัมน์ */
@media(max-width:760px){
  .live-builder-area .universal-widget-grid{
    grid-template-columns:1fr!important;
  }
}


/* D2 Migrated Widget Types Ready */
.universal-widget-card--activity-slider,
.universal-widget-card--activity-gallery,
.universal-widget-card--pdf-list,
.universal-widget-card--news-list,
.universal-widget-card--text-marquee,
.universal-widget-card--image-banner,
.universal-widget-card--custom-html{
  grid-column:1 / -1!important;
  width:var(--uw-width,100%)!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

.universal-widget-card--activity-gallery,
.universal-widget-card--pdf-list,
.universal-widget-card--news-list,
.universal-widget-card--custom-html{
  padding:var(--uw-padding,18px)!important;
  border-radius:var(--uw-radius,24px)!important;
}

.quick-block-image-banner img,
.universal-widget-card--image-banner img{
  width:100%!important;
  height:auto!important;
  max-height:var(--uw-image-height, none)!important;
  object-fit:contain!important;
  display:block!important;
}


/* D2 Admin helper */
.grid.four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

@media(max-width:900px){
  .grid.four{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .grid.four{
    grid-template-columns:1fr;
  }
}


/* D2 Widget Image Manager */
.widget-images-manager{
  margin:18px 0 !important;
  padding:18px !important;
  border-radius:22px !important;
  background:#f8fafc !important;
  border:1px solid #e2e8f0 !important;
}

.widget-image-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
  margin-top:14px;
}

.widget-image-card{
  display:grid;
  gap:8px;
  padding:10px;
  border-radius:16px;
  background:#ffffff;
  border:1px solid #e2e8f0;
}

.widget-image-card img{
  width:100%;
  height:120px;
  object-fit:contain;
  background:#f8fafc;
  border-radius:12px;
}

.widget-image-card small{
  display:block;
  color:#64748b;
}


/* ============================================================
   D2 PATCH 2026-05-18:
   Dynamic Layout Zones: hero separated, body grid supports
   top/full, left/center/right, middle/bottom zones.
   ============================================================ */

.smartweb-dynamic-layout {
  margin: 24px auto;
}

.smartweb-layout-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.6fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: start;
}

.smartweb-layout-zone {
  min-height: 80px;
}

.smartweb-layout-zone__title {
  font-size: 13px;
  font-weight: 700;
  opacity: .55;
  margin: 0 0 8px;
}

/* Full width rows */
.smartweb-layout-zone--top_full,
.smartweb-layout-zone--bottom_full,
.smartweb-layout-zone--hero,
.smartweb-layout-zone--hero_main,
.smartweb-layout-zone--hero_bottom {
  grid-column: 1 / -1;
}

/* Left column */
.smartweb-layout-zone--left_top,
.smartweb-layout-zone--left_middle,
.smartweb-layout-zone--left_bottom,
.smartweb-layout-zone--hero_left {
  grid-column: 1;
}

/* Center column */
.smartweb-layout-zone--center_top,
.smartweb-layout-zone--center_middle,
.smartweb-layout-zone--center_bottom {
  grid-column: 2;
}

/* Right column */
.smartweb-layout-zone--right_top,
.smartweb-layout-zone--right_middle,
.smartweb-layout-zone--right_bottom,
.smartweb-layout-zone--hero_right {
  grid-column: 3;
}

@media (max-width: 900px) {
  .smartweb-layout-grid {
    grid-template-columns: 1fr;
  }

  .smartweb-layout-zone,
  .smartweb-layout-zone--top_full,
  .smartweb-layout-zone--bottom_full,
  .smartweb-layout-zone--hero,
  .smartweb-layout-zone--hero_main,
  .smartweb-layout-zone--hero_left,
  .smartweb-layout-zone--hero_right,
  .smartweb-layout-zone--hero_bottom,
  .smartweb-layout-zone--left_top,
  .smartweb-layout-zone--left_middle,
  .smartweb-layout-zone--left_bottom,
  .smartweb-layout-zone--center_top,
  .smartweb-layout-zone--center_middle,
  .smartweb-layout-zone--center_bottom,
  .smartweb-layout-zone--right_top,
  .smartweb-layout-zone--right_middle,
  .smartweb-layout-zone--right_bottom {
    grid-column: 1 / -1;
  }
}

/* D2 FIX 2026-05-18:
   Preserve official 3-column positions without showing empty zones. */
body:not(.is-live-builder) .smartweb-layout-zone--empty{
  visibility: hidden !important;
  min-height: 1px !important;
}

/* D2 FIX 2026-05-18:
   Official layout zones must be independent fixed positions.
   Empty zones must not visually show, but occupied zones stay in their named column. */
.smartweb-official-layout .smartweb-layout-grid--3{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.smartweb-official-layout [data-live-builder-area="left_top"],
.smartweb-official-layout [data-live-builder-area="left_middle"],
.smartweb-official-layout [data-live-builder-area="left_bottom"]{
  grid-column: 1 !important;
}

.smartweb-official-layout [data-live-builder-area="center_top"],
.smartweb-official-layout [data-live-builder-area="center_middle"],
.smartweb-official-layout [data-live-builder-area="center_bottom"]{
  grid-column: 2 !important;
}

.smartweb-official-layout [data-live-builder-area="right_top"],
.smartweb-official-layout [data-live-builder-area="right_middle"],
.smartweb-official-layout [data-live-builder-area="right_bottom"]{
  grid-column: 3 !important;
}

body:not(.is-live-builder) .smartweb-layout-zone--empty{
  visibility: hidden !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* D2 FIX 2026-05-18:
   Single fixed 3x3 layout grid.
   Zones are independent positions, not row-flow based. */
.smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-areas:
    "left_top center_top right_top"
    "left_middle center_middle right_middle"
    "left_bottom center_bottom right_bottom" !important;
  gap: 18px !important;
  align-items: start !important;
}

.smartweb-zone-left_top{ grid-area:left_top !important; }
.smartweb-zone-center_top{ grid-area:center_top !important; }
.smartweb-zone-right_top{ grid-area:right_top !important; }

.smartweb-zone-left_middle{ grid-area:left_middle !important; }
.smartweb-zone-center_middle{ grid-area:center_middle !important; }
.smartweb-zone-right_middle{ grid-area:right_middle !important; }

.smartweb-zone-left_bottom{ grid-area:left_bottom !important; }
.smartweb-zone-center_bottom{ grid-area:center_bottom !important; }
.smartweb-zone-right_bottom{ grid-area:right_bottom !important; }

body:not(.is-live-builder) .smartweb-layout-zone--empty{
  visibility: hidden !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 860px){
  .smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left_top"
      "center_top"
      "right_top"
      "left_middle"
      "center_middle"
      "right_middle"
      "left_bottom"
      "center_bottom"
      "right_bottom" !important;
  }
}

/* D2 FIX 2026-05-18:
   Single fixed 3x3 official layout.
   Each named zone stays independent. */
.smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  grid-template-areas:
    "left_top center_top right_top"
    "left_middle center_middle right_middle"
    "left_bottom center_bottom right_bottom" !important;
  gap: 18px !important;
  align-items: start !important;
}

.smartweb-zone-left_top{ grid-area:left_top !important; }
.smartweb-zone-center_top{ grid-area:center_top !important; }
.smartweb-zone-right_top{ grid-area:right_top !important; }
.smartweb-zone-left_middle{ grid-area:left_middle !important; }
.smartweb-zone-center_middle{ grid-area:center_middle !important; }
.smartweb-zone-right_middle{ grid-area:right_middle !important; }
.smartweb-zone-left_bottom{ grid-area:left_bottom !important; }
.smartweb-zone-center_bottom{ grid-area:center_bottom !important; }
.smartweb-zone-right_bottom{ grid-area:right_bottom !important; }

body:not(.is-live-builder) .smartweb-layout-zone--empty{
  visibility: hidden !important;
  min-height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

@media (max-width: 860px){
  .smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "left_top"
      "center_top"
      "right_top"
      "left_middle"
      "center_middle"
      "right_middle"
      "left_bottom"
      "center_bottom"
      "right_bottom" !important;
  }
}

/* D2 FIX 2026-05-18:
   Independent absolute official zones.
   Each zone position does not move when another zone grows. */
.smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
  position: relative !important;
  display: block !important;
  min-height: 980px !important;
}

.smartweb-official-layout .smartweb-layout-grid--fixed-3x3 > .smartweb-layout-zone{
  position: absolute !important;
  width: calc((100% - 36px) / 3) !important;
  min-height: 120px !important;
}

.smartweb-zone-left_top{ left:0 !important; top:0 !important; }
.smartweb-zone-center_top{ left:calc((100% + 18px) / 3) !important; top:0 !important; }
.smartweb-zone-right_top{ right:0 !important; top:0 !important; }

.smartweb-zone-left_middle{ left:0 !important; top:360px !important; }
.smartweb-zone-center_middle{ left:calc((100% + 18px) / 3) !important; top:360px !important; }
.smartweb-zone-right_middle{ right:0 !important; top:360px !important; }

.smartweb-zone-left_bottom{ left:0 !important; top:720px !important; }
.smartweb-zone-center_bottom{ left:calc((100% + 18px) / 3) !important; top:720px !important; }
.smartweb-zone-right_bottom{ right:0 !important; top:720px !important; }

body:not(.is-live-builder) .smartweb-layout-zone--empty{
  visibility: hidden !important;
}

@media (max-width: 860px){
  .smartweb-official-layout .smartweb-layout-grid--fixed-3x3{
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .smartweb-official-layout .smartweb-layout-grid--fixed-3x3 > .smartweb-layout-zone{
    position: static !important;
    width: auto !important;
  }
}

/* D2 FIX 2026-05-18:
   Masonry 3-column official layout.
   Columns stay side-by-side and each column grows independently by its own widgets. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.smartweb-official-layout .smartweb-layout-column{
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.smartweb-official-layout .smartweb-layout-column .smartweb-layout-zone{
  width: 100% !important;
}

@media (max-width: 860px){
  .smartweb-official-layout .smartweb-layout-grid--masonry-3{
    grid-template-columns: 1fr !important;
  }
}

/* D2 FIX 2026-05-18:
   Disable old absolute 3x3 rules when using masonry layout. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  min-height: 0 !important;
}

.smartweb-official-layout .smartweb-layout-grid--masonry-3 > .smartweb-layout-column{
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  min-width: 0 !important;
}

.smartweb-official-layout .smartweb-layout-grid--masonry-3 .smartweb-layout-zone{
  position: static !important;
  width: 100% !important;
  min-height: 0 !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
}

@media (max-width: 860px){
  .smartweb-official-layout .smartweb-layout-grid--masonry-3{
    grid-template-columns: 1fr !important;
  }
}

/* D2 FIX 2026-05-18:
   Show real dropzone size in Live Builder even when empty. */
body.is-live-builder .smartweb-layout-zone{
  display: block !important;
  min-height: 120px;
  outline: 2px dashed #38bdf8 !important;
  background: rgba(56,189,248,0.08) !important;
  border-radius: 16px;
  padding: 10px;
  box-sizing: border-box;
}

body.is-live-builder .builder-empty{
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0369a1;
  font-weight: 700;
  font-size: 14px;
}

/* D2 FIX 2026-05-18:
   Make official masonry layout center column larger than side columns. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr) !important;
  gap: 18px !important;
}

/* D2 FIX 2026-05-18:
   Force masonry columns to real visual width.
   Side columns narrow, center column wide. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
  align-items: start !important;
}

.smartweb-official-layout .smartweb-layout-column{
  width: 100% !important;
}

.smartweb-official-layout .smartweb-layout-zone{
  max-width: 100% !important;
}

/* D2 FIX 2026-05-18:
   Adjust masonry columns: side 130px, center 520px. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-18:
   Layout ratio 180 | 520 | 180 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-18:
   Layout ratio 180 | 680 | 180 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-18:
   Layout ratio 180 | 620 | 180 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-18:
   Layout ratio 180 | 600 | 180 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-19:
   Basic Link Menu widget. */
.link-menu-widget{
  width:100%;
}

.link-menu-widget__head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
}

.link-menu-widget__head small{
  opacity:.72;
}

.link-menu-widget__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.link-menu-widget__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.92);
  color:inherit;
  text-decoration:none;
}

.link-menu-widget__item b{
  display:block;
  line-height:1.15;
}

.link-menu-widget__item small{
  display:block;
  opacity:.68;
  margin-top:2px;
}

.link-menu-widget__icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(15,23,42,.08);
  flex:0 0 auto;
}

/* D2 FIX 2026-05-19:
   Basic Link Menu widget. */
.link-menu-widget{ width:100%; }
.link-menu-widget__head{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:10px;
}
.link-menu-widget__head small{ opacity:.72; }
.link-menu-widget__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.link-menu-widget__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(248,250,252,.92);
  color:inherit;
  text-decoration:none;
}
.link-menu-widget__item b{
  display:block;
  line-height:1.15;
}
.link-menu-widget__item small{
  display:block;
  opacity:.68;
  margin-top:2px;
}
.link-menu-widget__icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(15,23,42,.08);
  flex:0 0 auto;
}

/* D2 FIX 2026-05-19:
   Dropzone layout for content width 1560px.
   260 + 40 + 960 + 40 + 260 = 1560 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  gap: 40px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-19:
   Dropzone layout adjusted to avoid overflow.
   250 + 30 + 940 + 30 + 250 = 1500 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  gap: 30px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-19:
   Dropzone layout adjusted smaller.
   240 + 25 + 930 + 25 + 240 = 1460 */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  grid-template-columns: 240px minmax(0,1fr) 240px !important;
  gap: 25px !important;
  justify-content: center !important;
}

/* D2 FIX 2026-05-19:
   Keep Live Builder label inside each real dropzone.
   Prevent labels like right_bottom from floating over other zones. */
body.is-live-builder .smartweb-layout-zone.live-builder-area{
  position: relative !important;
  overflow: visible !important;
}

body.is-live-builder .smartweb-layout-zone .live-builder-label{
  position: absolute !important;
  top: -14px !important;
  left: 14px !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

body.is-live-builder .smartweb-layout-column{
  position: relative !important;
}

/* D2 FIX 2026-05-19:
   Responsive dropzone layout by screen size. */
.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  width: 100% !important;
  max-width: min(1560px, calc(100vw - 48px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(180px, 240px) !important;
  gap: clamp(14px, 2vw, 28px) !important;
  align-items: start !important;
}

.smartweb-official-layout .smartweb-layout-column,
.smartweb-official-layout .smartweb-layout-zone{
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

@media (max-width: 1100px){
  .smartweb-official-layout .smartweb-layout-grid--masonry-3{
    grid-template-columns: minmax(150px, 200px) minmax(0, 1fr) minmax(150px, 200px) !important;
  }
}

@media (max-width: 820px){
  .smartweb-official-layout .smartweb-layout-grid--masonry-3{
    grid-template-columns: 1fr !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* D2 FIX 2026-05-19:
   Link Menu widget: submenu + collapsible parent + colored header. */
.link-menu-widget__head{
  padding:12px 14px;
  border-radius:16px;
  margin-bottom:10px;
}

.link-menu-widget__head b{
  display:block;
  line-height:1.2;
}

.link-menu-widget__group{
  display:block;
}

.link-menu-widget__group summary{
  list-style:none;
  cursor:pointer;
}

.link-menu-widget__group summary::-webkit-details-marker{
  display:none;
}

.link-menu-widget__item--parent{
  font-weight:800;
}

.link-menu-widget__chev{
  margin-left:auto;
  transition:transform .18s ease;
}

.link-menu-widget__group[open] .link-menu-widget__chev{
  transform:rotate(180deg);
}

.link-menu-widget__children{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:6px 0 8px 18px;
  padding-left:10px;
  border-left:2px solid rgba(15,23,42,.12);
}

.link-menu-widget__item--child{
  padding:9px 10px;
  font-size:.94em;
  background:rgba(255,255,255,.78);
}

/* D2 FIX 2026-05-19:
   Allow submenu inline style to win. */
.link-menu-widget .link-menu-widget__item[style]{
  background: var(--dummy, initial);
}

.link-menu-widget__item--child{
  background: inherit;
}

.link-menu-widget__item--child[style]{
  background: unset;
}

/* D2 DISABLED: old public-only layout overrides removed because public must match builder/admin layout. */

/* D2 PATCH: show builder controls clearly for large graphic widgets */
.builder-widget{
  position:relative !important;
  overflow:visible !important;
}

.builder-widget__drag{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:74px !important;
  min-height:38px !important;
  position:relative !important;
  z-index:999 !important;
  background:#2563eb !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:900 !important;
  box-shadow:0 8px 20px rgba(37,99,235,.28) !important;
  cursor:grab !important;
}

.builder-widget__actions,
.builder-move-form,
.builder-move-form select{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:999 !important;
}

.builder-move-form select{
  min-width:170px !important;
  min-height:38px !important;
  background:#fff !important;
  color:#0f172a !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  padding:6px 10px !important;
}

.live-builder-widget .water-ngim-widget{
  pointer-events:none !important;
}

.water-ngim-widget{
  isolation:isolate;
}


/* D2 PATCH: make live builder drag handle always visible above graphic widgets */
.live-builder-widget{
  position:relative !important;
  overflow:visible !important;
}
.live-builder-handle{
  display:inline-flex !important;
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  z-index:99999 !important;
  min-width:86px !important;
  min-height:38px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#2563eb !important;
  color:#fff !important;
  border-radius:999px !important;
  font-weight:900 !important;
  box-shadow:0 10px 25px rgba(15,23,42,.28) !important;
  cursor:grab !important;
  pointer-events:auto !important;
}
.live-builder-widget .water-ngim-widget{
  pointer-events:none !important;
}

/* D2 PATCH: water widget own live-builder handle */
.water-ngim-widget{
  position:relative !important;
}
.water-ngim-widget .water-ngim-live-handle{
  position:absolute !important;
  top:10px !important;
  right:10px !important;
  z-index:999999 !important;
  display:inline-flex !important;
  pointer-events:auto !important;
}
.live-builder-widget .water-ngim-widget .water-ngim-live-handle{
  pointer-events:auto !important;
}

/* D2 FIX: allow water widget drag handle to work */
.live-builder-widget .water-ngim-widget{
  pointer-events:auto !important;
}



.live-builder-widget .live-builder-handle,
.live-builder-widget .water-ngim-live-handle{
  pointer-events:auto !important;
  cursor:grab !important;
  z-index:999999 !important;
}

/* D2 FIX: water widget drag uses outer wrapper handle, same as other widgets */
.live-builder-widget--water{
  position:relative !important;
  overflow:visible !important;
}

.live-builder-widget--water > .live-builder-handle{
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  z-index:2147483647 !important;
  pointer-events:auto !important;
  cursor:grab !important;
  touch-action:none !important;
  user-select:none !important;
}

.live-builder-widget--water .water-ngim-widget{
  pointer-events:none !important;
}

.live-builder-widget--water > .live-builder-handle *{
  pointer-events:none !important;
}

/* D2 FIX: make water widget compact like other SmartWeb widgets */
.universal-widget-card--water-level{
  width:100% !important;
  padding:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
}

.universal-widget-card--water-level .water-ngim-widget{
  min-height:220px !important;
  height:220px !important;
  border-radius:24px !important;
}

.universal-widget-card--water-level .water-ngim-content{
  min-height:220px !important;
  padding:16px !important;
}

.universal-widget-card--water-level .water-ngim-title{
  font-size:1.05rem !important;
}

.universal-widget-card--water-level .water-ngim-value{
  font-size:2.6rem !important;
}

.universal-widget-card--water-level .water-ngim-gauge{
  height:150px !important;
}

.universal-widget-card--water-level .water-ngim-bar{
  height:150px !important;
}

.universal-widget-card--water-level .water-ngim-cards{
  display:none !important;
}

/* D2 WATER ANIMATED SCENE: no photo background */
.water-ngim-bg{display:none !important;}

.water-ngim-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,#93c5fd 0%,#dbeafe 42%,#bae6fd 100%);
}

.water-ngim-scene:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.72),rgba(15,23,42,.18),rgba(15,23,42,.68));
  z-index:8;
}

.water-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.88) 0 42px,transparent 44px),
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.65) 0 35px,transparent 38px);
  animation:waterSkyFloat 12s ease-in-out infinite alternate;
}

.water-mountain{
  position:absolute;
  bottom:105px;
  width:55%;
  height:135px;
  background:linear-gradient(135deg,#4ade80,#15803d);
  clip-path:polygon(0 100%,35% 20%,55% 62%,75% 30%,100% 100%);
  opacity:.75;
}

.water-mountain-a{left:-8%;}
.water-mountain-b{right:-10%;transform:scaleX(-1);opacity:.58;}

.water-bridge{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:118px;
  height:38px;
  background:linear-gradient(180deg,#64748b,#334155);
  transform:skewY(-2deg);
  box-shadow:0 12px 22px rgba(15,23,42,.28);
  z-index:4;
}

.water-bridge:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:12px;
  background:repeating-linear-gradient(90deg,#475569 0 38px,#94a3b8 38px 44px);
}

.water-bridge span{
  position:absolute;
  top:-32px;
  width:4px;
  height:42px;
  background:#334155;
}

.water-bridge span:nth-child(1){left:18%;}
.water-bridge span:nth-child(2){left:38%;}
.water-bridge span:nth-child(3){left:58%;}
.water-bridge span:nth-child(4){left:78%;}

.water-piers{
  position:absolute;
  left:0;
  right:0;
  bottom:42px;
  height:105px;
  z-index:3;
}

.water-piers span{
  position:absolute;
  bottom:0;
  width:18px;
  height:110px;
  background:linear-gradient(90deg,#475569,#94a3b8,#334155);
  border-radius:8px 8px 0 0;
}

.water-piers span:nth-child(1){left:28%;}
.water-piers span:nth-child(2){left:50%;}
.water-piers span:nth-child(3){left:72%;}





.water-ngim-content{z-index:10 !important;}

@keyframes waterSkyFloat{
  from{transform:translateX(-12px);}
  to{transform:translateX(12px);}
}

@keyframes waterLevelBreath{
  from{filter:saturate(1) brightness(1);}
  to{filter:saturate(1.15) brightness(1.08);}
}

/* D2 WATER ANIMATED SCENE: no photo background */
.water-ngim-bg{display:none !important;}

.water-ngim-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:linear-gradient(180deg,#93c5fd 0%,#dbeafe 42%,#bae6fd 100%);
}

.water-ngim-scene:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.72),rgba(15,23,42,.18),rgba(15,23,42,.68));
  z-index:8;
}

.water-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.88) 0 42px,transparent 44px),
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.65) 0 35px,transparent 38px);
  animation:waterSkyFloat 12s ease-in-out infinite alternate;
}

.water-mountain{
  position:absolute;
  bottom:105px;
  width:55%;
  height:135px;
  background:linear-gradient(135deg,#4ade80,#15803d);
  clip-path:polygon(0 100%,35% 20%,55% 62%,75% 30%,100% 100%);
  opacity:.75;
}

.water-mountain-a{left:-8%;}
.water-mountain-b{right:-10%;transform:scaleX(-1);opacity:.58;}

.water-bridge{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:118px;
  height:38px;
  background:linear-gradient(180deg,#64748b,#334155);
  transform:skewY(-2deg);
  box-shadow:0 12px 22px rgba(15,23,42,.28);
  z-index:4;
}

.water-bridge:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-18px;
  height:12px;
  background:repeating-linear-gradient(90deg,#475569 0 38px,#94a3b8 38px 44px);
}

.water-bridge span{
  position:absolute;
  top:-32px;
  width:4px;
  height:42px;
  background:#334155;
}

.water-bridge span:nth-child(1){left:18%;}
.water-bridge span:nth-child(2){left:38%;}
.water-bridge span:nth-child(3){left:58%;}
.water-bridge span:nth-child(4){left:78%;}

.water-piers{
  position:absolute;
  left:0;
  right:0;
  bottom:42px;
  height:105px;
  z-index:3;
}

.water-piers span{
  position:absolute;
  bottom:0;
  width:18px;
  height:110px;
  background:linear-gradient(90deg,#475569,#94a3b8,#334155);
  border-radius:8px 8px 0 0;
}

.water-piers span:nth-child(1){left:28%;}
.water-piers span:nth-child(2){left:50%;}
.water-piers span:nth-child(3){left:72%;}





.water-ngim-content{z-index:10 !important;}

@keyframes waterSkyFloat{
  from{transform:translateX(-12px);}
  to{transform:translateX(12px);}
}

@keyframes waterLevelBreath{
  from{filter:saturate(1) brightness(1);}
  to{filter:saturate(1.15) brightness(1.08);}
}

/* D2 WATER ANIMATED SCENE FINAL */
.universal-widget-card--water-level{
  padding:0 !important;
  overflow:hidden !important;
  background:#0f172a !important;
  border-radius:24px !important;
}

.water-ngim-bg{
  display:none !important;
}

.water-ngim-widget{
  position:relative !important;
  overflow:hidden !important;
  min-height:260px !important;
  height:260px !important;
  border-radius:24px !important;
  background:#0f172a !important;
}

.water-ngim-scene{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  overflow:hidden !important;
  z-index:0 !important;
  background:linear-gradient(180deg,#93c5fd 0%,#dbeafe 45%,#bae6fd 100%) !important;
}

.water-ngim-scene:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  background:linear-gradient(90deg,rgba(15,23,42,.78),rgba(15,23,42,.16),rgba(15,23,42,.68));
}

.water-sky{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 76% 18%,rgba(255,255,255,.9) 0 34px,transparent 36px),
    radial-gradient(circle at 30% 22%,rgba(255,255,255,.62) 0 30px,transparent 33px);
  animation:waterSkyFloat 12s ease-in-out infinite alternate;
}

.water-mountain{
  position:absolute;
  bottom:88px;
  width:58%;
  height:110px;
  background:linear-gradient(135deg,#4ade80,#15803d);
  clip-path:polygon(0 100%,35% 20%,55% 62%,75% 30%,100% 100%);
  opacity:.72;
  z-index:2;
}

.water-mountain-a{left:-8%;}
.water-mountain-b{right:-10%;transform:scaleX(-1);opacity:.56;}

.water-bridge{
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:102px;
  height:30px;
  background:linear-gradient(180deg,#64748b,#334155);
  transform:skewY(-2deg);
  box-shadow:0 12px 22px rgba(15,23,42,.28);
  z-index:4;
}

.water-bridge:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-16px;
  height:10px;
  background:repeating-linear-gradient(90deg,#475569 0 34px,#94a3b8 34px 40px);
}

.water-bridge span{
  position:absolute;
  top:-28px;
  width:4px;
  height:38px;
  background:#334155;
}

.water-bridge span:nth-child(1){left:18%;}
.water-bridge span:nth-child(2){left:38%;}
.water-bridge span:nth-child(3){left:58%;}
.water-bridge span:nth-child(4){left:78%;}

.water-piers{
  position:absolute;
  left:0;
  right:0;
  bottom:38px;
  height:100px;
  z-index:3;
}

.water-piers span{
  position:absolute;
  bottom:0;
  width:16px;
  height:96px;
  background:linear-gradient(90deg,#475569,#94a3b8,#334155);
  border-radius:8px 8px 0 0;
}

.water-piers span:nth-child(1){left:28%;}
.water-piers span:nth-child(2){left:50%;}
.water-piers span:nth-child(3){left:72%;}





.water-ngim-content{
  position:relative !important;
  z-index:10 !important;
  min-height:260px !important;
  padding:16px !important;
}

@keyframes waterSkyFloat{
  from{transform:translateX(-12px);}
  to{transform:translateX(12px);}
}

@keyframes waterLevelBreath{
  from{filter:saturate(1) brightness(1);}
  to{filter:saturate(1.15) brightness(1.08);}
}

/* D2 FIX: use real bridge photo, keep only transparent water animation */
.water-ngim-scene,
.water-sky,
.water-mountain,
.water-bridge,
.water-piers{
  display:none !important;
}

.water-ngim-bg{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:
    linear-gradient(90deg,rgba(15,23,42,.72),rgba(15,23,42,.12),rgba(15,23,42,.62)),
    var(--water-bg) center/cover no-repeat !important;
  transform:scale(1.02);
}



.water-ngim-content{
  z-index:5 !important;
}

/* D2 DISABLED: old public-main / center-full overrides removed. */

/* D2 FIX: Drop zone is the real size boundary. Widgets must not overflow their zone. */
.smartweb-layout-zone,
.live-builder-area{
  box-sizing:border-box !important;
  max-width:100% !important;
  overflow:hidden !important;
}

/* Every direct widget inside a drop zone must stay inside the zone */
.smartweb-layout-zone > .universal-widget-section,
.smartweb-layout-zone > .universal-widget-card,
.live-builder-area > .universal-widget-section,
.live-builder-area > .universal-widget-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Universal grid inside zone must not create wider columns */
.smartweb-layout-zone .universal-widget-grid,
.live-builder-area .universal-widget-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Widget cards may request --uw-width, but never exceed drop zone */
.smartweb-layout-zone .universal-widget-card,
.live-builder-area .universal-widget-card{
  width:min(100%, var(--uw-width, 100%)) !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Inner content must not stretch outside cards */
.smartweb-layout-zone .universal-widget-card *,
.live-builder-area .universal-widget-card *{
  max-width:100%;
  box-sizing:border-box;
}

/* Media must stay inside card */
.smartweb-layout-zone img,
.smartweb-layout-zone video,
.smartweb-layout-zone iframe,
.live-builder-area img,
.live-builder-area video,
.live-builder-area iframe{
  max-width:100% !important;
  height:auto;
  box-sizing:border-box;
}

/* D2 FINAL OFFICIAL LAYOUT RULE
   Use the same layout rule for public and builder.
   Drop zone is the boundary. Widget width may be set, but cannot overflow zone. */

.smartweb-official-layout .smartweb-layout-grid--masonry-3{
  display:grid !important;
  width:100% !important;
  max-width:1560px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:240px minmax(0, 1fr) 240px !important;
  gap:25px !important;
  align-items:start !important;
  box-sizing:border-box !important;
}

.smartweb-official-layout .smartweb-layout-column{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:18px !important;
  box-sizing:border-box !important;
}

.smartweb-official-layout .smartweb-layout-zone{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Widgets obey their own width_px, but never exceed their drop zone. */
.smartweb-official-layout .smartweb-layout-zone .universal-widget-section,
.smartweb-official-layout .smartweb-layout-zone .universal-widget-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.smartweb-official-layout .smartweb-layout-zone .universal-widget-card{
  width:min(100%, var(--uw-width, 100%)) !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media(max-width:820px){
  .smartweb-official-layout .smartweb-layout-grid--masonry-3{
    grid-template-columns:1fr !important;
    max-width:calc(100vw - 24px) !important;
    gap:14px !important;
  }
}

/* D2 FIX: widgets inside the same drop zone can sit side-by-side.
   Widget width_px is respected, but never overflows drop zone. */

.smartweb-official-layout .smartweb-layout-zone .universal-widget-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.smartweb-official-layout .smartweb-layout-zone .universal-widget-card{
  grid-column:auto !important;
  flex:0 1 min(100%, var(--uw-width, 100%)) !important;
  width:min(100%, var(--uw-width, 100%)) !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* If widget is intentionally set to 100%, it remains full row */
.smartweb-official-layout .smartweb-layout-zone .universal-widget-card[style*="--uw-width:100%"],
.smartweb-official-layout .smartweb-layout-zone .universal-widget-card[style*="--uw-width: 100%"]{
  flex-basis:100% !important;
}

/* D2 FIX: allow widgets inside HERO drop zone to sit side-by-side.
   Example: water widget + PM/weather widget.
   Keep hero_right as one-column from old rule. */

.live-builder-area[data-live-builder-area="hero"] .universal-widget-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  gap:10px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.live-builder-area[data-live-builder-area="hero"] .universal-widget-card{
  grid-column:auto !important;
  flex:0 1 min(100%, var(--uw-width, 100%)) !important;
  width:min(100%, var(--uw-width, 100%)) !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* D2 FIX: compact solar energy widget */
.solar-energy-widget{
  max-width:440px !important;
}

.solar-energy-widget .solar-energy-head{
  margin-bottom:10px !important;
}

.solar-energy-widget .solar-energy-title{
  font-size:.96rem !important;
}

.solar-energy-widget .solar-energy-sub{
  font-size:.76rem !important;
}

.solar-energy-widget .solar-energy-main{
  grid-template-columns:92px minmax(0,1fr) !important;
  gap:10px !important;
}

.solar-energy-widget .solar-energy-sun{
  min-height:86px !important;
  border-radius:18px !important;
}

.solar-energy-widget .solar-sun-core{
  width:34px !important;
  height:34px !important;
  top:10px !important;
  right:12px !important;
}

.solar-energy-widget .solar-panel-grid{
  width:66px !important;
  height:42px !important;
  left:12px !important;
  bottom:12px !important;
}

.solar-energy-widget .solar-energy-power strong{
  font-size:1.9rem !important;
}

.solar-energy-widget .solar-energy-stats{
  margin-top:10px !important;
  gap:6px !important;
}

.solar-energy-widget .solar-energy-stats div{
  padding:8px !important;
  border-radius:14px !important;
}

.solar-energy-widget .solar-energy-stats strong{
  font-size:.95rem !important;
}

.solar-energy-widget .solar-energy-foot{
  margin-top:9px !important;
  font-size:.78rem !important;
}