/* ==== Global / Utilities ==== */
:root { --lek-primary:#2e6f40; }

body {
  font-family: "Prompt", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* โลโก้ */
.navbar-brand img { max-height:60px; height:auto; }

/* ==== Topbar ==== */
.topbar { background: var(--lek-primary); color:#fff; }
.topbar a { color:#fff; text-decoration:none; }
.topbar a:hover { opacity:.85; }

/* ==== Navbar (เหมือนภาพ) ==== */
.navbar-lek { background:#fff; }
.navbar-lek .container { position:relative; } /* ให้โลโก้แบบ absolute อ้างอิงได้ */
.navbar-lek .navbar-nav .nav-link { padding:.75rem 1rem; font-weight:500; }
.navbar-lek .nav-link.active,
.navbar-lek .nav-link:focus,
.navbar-lek .nav-link:hover { color: var(--lek-primary); }

.navbar-lek .dropdown-menu { border-radius:.6rem; border:1px solid #e9ecef; }
.navbar-lek .dropdown-item:hover { background:#f6f8f7; }

/* จัดโลโก้กึ่งกลางบนจอใหญ่ */
@media (min-width: 992px){
  .navbar-brand-centered{
    position:absolute; left:50%; transform:translateX(-50%); z-index:2;
  }
}

/* ค้นหาเป็นเม็ดยา (ขวา) */
.search-wrap { max-width:420px; width:100%; }
.search-pill .form-control{
  border-radius:999px; padding-left:1rem; padding-right:2.75rem;
}
.search-pill .btn{
  position:absolute; right:.35rem; top:50%; transform:translateY(-50%);
  border-radius:999px; padding:.45rem .65rem;
  border: none;
}

/* เงาล่างบาง ๆ */
.navbar-shadow { box-shadow: 0 10px 15px -15px rgba(0,0,0,.35); }

/* ==== Blocks อื่น ๆ ที่คุณมี (ปรับให้ใช้ตัวแปรเดียวกัน) ==== */
.hero-card { position: relative; overflow: hidden; border-radius: .5rem; }
.hero-card .meta-badge { position: absolute; left: 1rem; top: 1rem; z-index: 2; }
.hero-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.6)); }
.hero-card .title { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; color: #fff; }

.card-img-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.7)); }

.category-title {
  border-left: 4px solid var(--lek-primary);
  padding-left: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}

.section-cta .btn { text-transform: uppercase; }

.footer-dark { background: #214d2f; color: #e7f0ea; }
.footer-dark a { color: #e7f0ea; text-decoration: none; }
.footer-dark a:hover { text-decoration: underline; }

.widget .list-unstyled li { margin-bottom: .5rem; }
.badge-soft { background-color: rgba(33,77,47,.12); color: #214d2f; }

/* ==== (ออปชัน) กันเมนูยาวชนโลโก้บนจอใหญ่ ==== */
@media (min-width: 1200px){
  .navbar-lek .navbar-nav { margin-right: auto; } /* เมนูดันไปซ้ายสุด */
  .search-wrap { margin-left: auto; }            /* ค้นหาดันไปขวาสุด */
}

@media (min-width: 992px){
    .navbar-brand-centered{ position:absolute; left:50%; transform:translateX(-50%); z-index:2; }
  }
  .search-wrap{ max-width:420px; width:100%; } /* กล่องค้นหาเป็นเม็ดยา */
  

  /* dropdown ลอยเหนือโลโก้ */
.navbar .dropdown-menu{ z-index:1050; }

/* โลโก้กลางอย่าทับปุ่มและเมนู */
@media (min-width: 992px){
  .navbar-brand-centered{ z-index:1; }
}

/* กันโดนัทถูกโลโก้ทับ */
.navbar-toggler{ z-index:3; }



/* HOT NEWS */
.hotnews-item{
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 12px;
  align-items: center;
}
.hotnews .hotnews-underline{
  width:42px; 
  height:4px; 
  background:var(--lek-primary);
  border-radius:2px; 
  margin-top:.25rem;
}
  .hotnews .badge-soft{ background-color: rgba(33,77,47,.12); color:#214d2f; }
  .hotnews .hotnews-thumb{
    /*width:88px; 
    height:88px;*/
    object-fit:cover; 
    border-radius:.5rem;
  }
  .hotnews .hero-card .title h2{ color:#fff; }
  .hotnews .hero-card .title .small{ color:#e9f3ee; }
  

/* ====== Single Post Styling ====== */
.single-wrap .section-title {
    font-weight: 800;
    color: var(--lek-primary, #2e6f40);
}

/* Featured image */
.single-wrap .ratio img {
    object-fit: cover;
    border-radius: 12px;
}

/* Article card */
.single-wrap article.card {
    border-radius: 14px;
    overflow: hidden;
}

/* Meta info */
.single-wrap .text-muted.small {
    font-size: 0.85rem;
    color: #888 !important;
}

/* Entry content */
.single-wrap .entry-content {
    font-size: 1rem;
    /* line-height: 1.75; */
    color: #333;
}

.single-wrap .entry-content p {
    margin-bottom: 1.2rem;
}

.single-wrap .entry-content h2,
.single-wrap .entry-content h3,
.single-wrap .entry-content h4 {
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.single-wrap .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 1.5rem 0;
    display: block;
}

.single-wrap .entry-content ul,
.single-wrap .entry-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1.2rem;
}

.single-wrap .entry-content blockquote {
    background: #f8f6fa;
    border-left: 4px solid var(--lek-primary, #2e6f40);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    border-radius: 8px;
}

/* Tags */
.single-wrap .tags a {
    background: #f2f2f2;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    color: #555;
    font-size: 0.85rem;
    text-decoration: none;
}

.single-wrap .tags a:hover {
    background: var(--lek-primary, #2e6f40);
    color: #fff;
}

/* Share links */
.single-wrap .share a {
    font-size: 0.85rem;
    color: var(--lek-primary, #2e6f40);
}

.single-wrap .share a:hover {
    text-decoration: underline;
}

/* Related posts */
.single-wrap .section-head h3 {
    font-weight: 800;
    color: var(--lek-primary, #2e6f40);
}

.single-wrap .related .card {
    border: 0;
}

.single-wrap .related .ratio img {
    object-fit: cover;
    border-radius: 10px;
}

.single-wrap .related h6 {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
}

.single-wrap .related time {
    font-size: 0.8rem;
    color: #888;
}

/* Responsive */
@media (max-width: 767.98px) {
    .single-wrap .entry-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}



/* ===== Sidebar (ขวา) ===== */
.sidebar.widget-area {
    padding-left: 1rem;
    /* เว้นจากคอนเทนต์ซ้าย */
}

.sidebar .widget {
    margin-bottom: 1.25rem;
}

/* หัวข้อ widget */
.sidebar .widget-title {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--lek-primary);
    margin: 0 0 .35rem;
}

/* เส้นบางใต้หัวข้อ (จางๆ แบบในภาพ) */
.sidebar .widget-title+* {
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding-top: .5rem;
}

/* ลิสต์ภายใน */
.sidebar .widget ul {
    margin: 0;
    padding-left: 1.2rem;
    /* ให้มีจุดนำหน้า */
    list-style: disc;
}

.sidebar .widget ul li {
    margin: .35rem 0;
    line-height: 1.45;
}

.sidebar .widget ul li a {
    color: #1d1d1f;
    text-decoration: none;
}

.sidebar .widget ul li a:hover {
    color: var(--lek-primary, #2e6f40);
    text-decoration: underline;
}

/* Search form เหมือนภาพ (ช่องเล็ก + ปุ่มค้นหา) */
.sidebar .widget_search .search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .4rem;
}

.sidebar .widget_search .search-field {
    height: 36px;
    padding: .35rem .6rem;
    border: 1px solid #cfcfd4;
    border-radius: 6px;
    font-size: .95rem;
}

.sidebar .widget_search .search-submit {
    height: 36px;
    padding: 0 .75rem;
    border: 1px solid var(--lek-primary, #2e6f40);
    background: var(--white, #fff);
    color: var(--lek-primary, #2e6f40);
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

.sidebar .widget_search .search-submit:hover {
    background: var(--lek-primary, #2e6f40);
    color: #fff;
}

/* ขนาดตัวอักษรของรายการ/นับจำนวน (…(6)) ให้เล็กลงนิด */
.sidebar .widget ul li,
.sidebar .widget time {
    font-size: .95rem;
}

/* ระยะชิดขอบภาพเด่นด้านซ้าย (ให้ sidebar ไม่ชน) */
@media (max-width: 991.98px) {
    .sidebar.widget-area {
        padding-left: 0;
        margin-top: 1.25rem;
    }
}


/* ===== Sidebar: เรื่องที่คุณอาจสนใจ ===== */
.widget-suggest .widget-title {
    font-weight: 800;
    color: var(--lek-primary);
    margin: 0 0 .4rem;
    position: relative;
    padding-bottom: .35rem;
}

.widget-suggest .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 4px;
    background: var(--lek-primary);
    border-radius: 3px;
}

/* การ์ดเด่น */
.sb-feature {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
    margin-bottom: .9rem;
}

.sb-feature-link {
    display: block;
    color: #fff;
    text-decoration: none;
    position: relative;
}

.sb-feature-img {
    width: 100%;
    /*height: 180px;*/
    object-fit: cover;
    display: block;
}

.sb-dim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .70) 100%);
}

.sb-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .5rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: saturate(130%) blur(2px);
}

.sb-feature-title {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 34px;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.35;
    margin: 0;
}

.sb-meta {
    position: absolute;
    left: 10px;
    bottom: 10px;
    font-size: .82rem;
    opacity: .95;
    display: flex;
    gap: .4rem;
    align-items: center;
}

.sb-meta .dot {
    opacity: .9;
}

/* รายการย่อย */
.sb-mini-list {
    display: grid;
    gap: 12px;
}

.sb-mini {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: center;
}

.sb-mini-thumb .img {
    /*width: 72px;
    height: 72px;*/
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.sb-mini-body {
    min-width: 0;
}

.sb-chip {
    display: inline-block;
    font-size: .7rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    background: #f1eef6;
    color: var(--lek-primary);
    font-weight: 700;
    margin-bottom: 4px;
}

.sb-mini-title {
    margin: 0;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1.35;
}

.sb-mini-title a {
    color: #1d1d1f;
    text-decoration: none;
}

.sb-mini-title a:hover {
    color: var(--lek-primary);
    text-decoration: underline;
}

.sb-mini .tiny {
    font-size: .82rem;
    color: #6b7280;
}

/* responsive */
@media (max-width: 991.98px) {
    .sb-feature-img {
        height: 200px;
    }
}

/* Post pager */
.thumb-72{ width:72px; height:72px; }
.obj-cover{ object-fit:cover; width:72px; height:72px; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hover-lift{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hover-lift:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.06); border-color:#e6ece9; }


/* Section Category */
.hotlist-item{
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 12px;
  align-items: center;
}
.section-cat .hotnews-underline{ width:42px; height:4px; background:var(--lek-primary); border-radius:2px; margin-top:.25rem; }
.badge-soft{ background-color:rgba(33,77,47,.12); color:#214d2f; }

.section-cat .hotlist-thumb{ 
  /*width:74px; height:74px;*/ 
  object-fit:cover; 
}
.section-cat .hotlist-item + .hotlist-item{ border-top:1px dashed rgba(0,0,0,.08); padding-top:.6rem; }

@media (max-width: 991.98px){
    .section-cat .mid-col{ margin-top:40px; }
  }

/* Banner fixed */
.banner-fixed .banner-img{ width:132px; height:auto; object-fit:cover; }


/* จูนระยะ Title + View all ให้ชิดพอดี */
.section-cat .section-head-left{ gap:.75rem; margin-bottom:.35rem; }
.section-cat .section-title{ line-height:1.1; }
.section-cat .title-underline::after{ width:48px; height:3px; margin-top:.4rem; }

/* ให้หัว "ยอดฮิต" สูงเสมอ Title ฝั่งซ้าย */
@media (min-width:992px){
  .section-cat .col-lg-3:first-of-type .card{ margin-top:.25rem; } /* กลาง 2 ใบ drop ลงเล็กน้อย */
}

/* ปรับระยะลิสต์ขวาให้โปร่ง */
.section-cat .hotlist-item + .hotlist-item{ padding-top:.75rem; border-top:1px dashed rgba(0,0,0,.08); }

/* ปุ่มบนจอเล็กให้ยังอยู่บรรทัดเดียว */
@media (max-width:576.98px){
  .section-cat .section-head-left .btn{ padding:.25rem .6rem; font-size:.75rem; }
}

/* เส้นใต้หัวข้อ (ใช้กับทั้งซ้ายและขวา) */
.section-cat .section-title{
    letter-spacing:.02em;
    line-height:1.1;
    display:inline-block;
    position:relative;
    padding-bottom:.1rem;
  }
  .section-cat .title-underline::after{
    content:"";
    position:absolute;
    left:0; bottom:-.2rem;
    width:48px; height:4px;
    background:var(--lek-primary);
    border-radius:2px;
  }
  
  /* ยอดฮิต: ให้เส้นแคบลงเล็กน้อย */
  .section-cat .popular-title.title-underline::after{
    width:36px; height:3px;
  }
  @media (max-width:576.98px){
    .section-cat .popular-title.title-underline::after{ width:32px; height:3px; }
  }
  

/* ===== Featured Dark Grid: พื้นหลังเต็ม section ===== */
.section-darkgrid{
    --dark-bg:#1e4a2e;       /* สีเขียวเข้ม */
    position: relative;
  }
  .section-darkgrid::before{
    content:"";
    position:absolute;
    inset:0;                 /* full-bleed ครอบทั้ง section */
    background:var(--dark-bg);
  }
  .section-darkgrid > .container{ position:relative; z-index:1; }
  
  /* หัวข้อ + เส้นใต้ */
  .section-darkgrid .section-title{ letter-spacing:.02em; line-height:1.1; display:inline-block; position:relative; }
  .section-darkgrid .title-underline-dark::after{
    content:""; position:absolute; left:0; bottom:-.25rem;
    width:48px; height:4px; background:var(--lek-primary); border-radius:2px;
  }
  
  /* การ์ดรูปแบบทับไล่เฉด + ตัวหนังสือขาว */
  .card-media{ position:relative; border-radius:.75rem; overflow:hidden; display:block; color:#fff; }
  .card-media .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.6) 100%); }
  .card-media .media-body{ position:absolute; left:1rem; right:1rem; bottom:1rem; }
  .card-media .meta{ opacity:.9; }
  
  /* แถวล่าง 3 ใบ: ให้เตี้ย โปร่งขึ้น และตัวหนังสือเล็กลง */
  .card-media.bottom-media .media-body{ bottom:.6rem; }
  .card-media.bottom-media .media-body .h6{ font-size:.95rem; }
  @media (max-width: 575.98px){
    .card-media.bottom-media .media-body .h6{ font-size:.9rem; }
  }

  /* ===== Dark section: ลิสต์แนวนอน (รูปซ้าย/ข้อความขวา) ===== */
.darklist{
    background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .75rem;
    padding: .7rem;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    height: 100%;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    align-items: center;
  }
  .darklist:hover{
    background: rgba(0,0,0,.24);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,.18);
  }
  
  .darklist-thumb{
    /*flex: 0 0 108px;*/              /* ความกว้างรูปคงที่ */
    /*width: 108px;*/  
    object-fit: cover;
    border-radius: .5rem;
  }
  
  .darklist-body{ min-width: 0; } /* ให้ line-clamp ทำงาน */
  .line-clamp-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  @media (max-width: 575.98px){
    .darklist{ padding: .55rem .6rem; gap: .6rem; }
    .darklist-thumb{ flex-basis: 92px; width: 92px; }
  }
  
  

  /* ===== Grid + List Section ===== */
.section-gridlist .section-title{ letter-spacing:.02em; line-height:1.1; position:relative; display:inline-block; }
.section-gridlist .title-underline::after{
  content:""; position:absolute; left:0; bottom:-.25rem;
  width:42px; height:4px; background:var(--lek-primary); border-radius:2px;
}
.section-gridlist .popular-title.title-underline::after{ width:36px; height:3px; }

/* ซ้าย: กริด 3x2 */
.griditem .grid-thumb{ box-shadow: 0 6px 14px rgba(0,0,0,.06); }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ขวา: ลิสต์รูปเล็ก */
.list-thumb{ /*width:64px; height:64px;*/ object-fit:cover; }
.rightitem + .rightitem{ padding-top:.6rem; border-top:1px dashed rgba(0,0,0,.08); }

/* จอเล็ก: ให้กริดเป็น 2 คอลัมน์ */
@media (max-width: 991.98px){
  .section-gridlist .col-lg-8 .col-md-4{ width:50%; }
}
@media (max-width: 575.98px){
  .list-thumb{ width:60px; height:60px; }
}


/* footer เดิม */
.footer-dark { background:#214d2f; color:#e7f0ea; }
.footer-dark a { color:#e7f0ea; text-decoration:none; }
.footer-dark a:hover { text-decoration:underline; }

/* จัดเมนู + ซับเมนูให้สะอาด ไม่มีจุดนำหน้า */
.footer-menu, .footer-menu ul { list-style:none; margin:0; padding-left:0; }
.footer-menu > li { margin-bottom:.45rem; }
.footer-menu a { text-decoration:none; opacity:.95; }
.footer-menu a:hover { opacity:1; }

.footer-menu li ul{
  margin-top:.35rem;
  padding-left:1rem;            /* ย่อหน้าเล็กน้อย */
  border-left:1px solid rgba(255,255,255,.18);
}
.footer-menu li ul li{ margin:.25rem 0; }
/* ล้างจุด/สัญลักษณ์ที่เคยใส่ไว้ก่อนหน้า */
.footer-menu li ul li::before{ content:none !important; }

/* มือถือ: กึ่งกลางทุกคอลัมน์ แต่รายการเมนูยังจัดชิดซ้ายเพื่ออ่านง่าย */
@media (max-width: 767.98px){
  .footer-dark .row > [class*="col-"]{ text-align:center; }
  .footer-menu{ display:inline-block; text-align:left; }
}


/* Search page tweaks */
.search-result mark{
    background: rgba(46,111,64,.18);  /* เขียวอ่อนตามธีม */
    color: #214d2f;
    padding: .05rem .25rem;
    border-radius: .2rem;
  }
  .line-clamp-3{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  
  /* ===== Mobile Bottom Bar ===== */
  .mobile-nav { display:none; }
  
  /* แสดงเฉพาะบนมือถือ */
  @media (max-width: 767px) {
    /* ซ่อน footer เดิมบนมือถือ เพื่อไม่ให้ซ้ำกับแถบล่าง */
	/* .site-footer { display:none; } */
  
    .mobile-nav{
      position:fixed; left:0; right:0; bottom:0;
      display:flex; justify-content:space-around; align-items:flex-end;
      padding:8px 10px calc(8px + env(safe-area-inset-bottom));
      background:#ffffff; border-top:1px solid #e5e5e5;
      z-index:9999;
      font-size:12px; line-height:1.1;
    }
  
    .mobile-nav a{
      text-decoration:none; color:#333; text-align:center;
      display:flex; flex-direction:column; align-items:center; gap:4px;
      min-width:56px;
    }
  
    .mobile-nav .mnav-item svg{ display:block; }
  
    /* ปุ่ม Home ตรงกลาง—ลอยขึ้นและใหญ่กว่า */
    .mobile-nav .mnav-home{
      position:relative; transform:translateY(-18px);
      display:flex; flex-direction:column; align-items:center; gap:4px;
    }
    .mobile-nav .mnav-home .mnav-home-btn{
      width:64px; height:64px; border-radius:50%;
      background:#111; color:#fff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 6px 16px rgba(0,0,0,.2);
    }
    .mobile-nav .mnav-home span{ margin-top:2px; }
  }
  
  /* กันเนื้อหาถูกบังด้วยแถบล่างบนมือถือ */
  @media (max-width: 767px) {
    body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
    .mobile-nav i { font-size: 18px; line-height: 1; display: block; }
    .mobile-nav .mnav-home .mnav-home-btn i { font-size: 24px; }
  }
  
  /* เผื่อกรณีมี WP Admin Bar บนมือถือ */
  @media (max-width: 782px) {
    body.admin-bar .mobile-nav { bottom:0; }
  }
  
/* Scroll Up Button */
.scrollup{
    position: fixed;
    right: 16px;
    bottom: 24px; /* desktop */
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #111;      /* โทนเดียวกับ footer */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.2);
    cursor: pointer;
    z-index: 10000;        /* อยู่เหนือ mobile bar */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .scrollup i{ font-size: 18px; line-height: 1; }
  
  .scrollup.is-visible{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  
  /* มือถือ: ขยับขึ้นให้พ้น mobile-nav และรองรับ iPhone safe area */
  @media (max-width: 767px){
    .scrollup{
      right: 12px;
      bottom: calc(90px + env(safe-area-inset-bottom)); /* 90px ≈ ความสูง mobile bar */
      width: 48px;
      height: 48px;
    }
  }

  /* ===== Mobile layout spacing (แก้ชนกัน) ===== */
@media (max-width: 767px){
  :root{
    --nav-h: 72px;              /* ความสูง mobile-nav โดยรวม (ประมาณ) */
    --home-bump: 22px;          /* ปุ่ม Home โผล่ขึ้นเหนือ nav กี่ px */
    --legal-h: 28px;            /* ความสูงบรรทัดลิขสิทธิ์ */
    --gap: 12px;                /* ระยะห่างเล็กน้อยเพื่อหายใจ */
  }

  /* บรรทัดลิขสิทธิ์: อยู่เหนือ nav + ส่วนที่ปุ่ม Home โผล่ขึ้น */
  .mobile-legal{
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--nav-h) + var(--home-bump) + env(safe-area-inset-bottom));
    height: var(--legal-h);
    line-height: var(--legal-h);
    padding: 0 10px;
    background: #fff;
    color: #666;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-size: 12px;
    z-index: 9998; /* ต่ำกว่า mobile-nav (9999) และต่ำกว่าปุ่มขึ้นบน */
  }

  /* ปุ่มเลื่อนขึ้น: วางเหนือบรรทัดลิขสิทธิ์อีกนิด เพื่อไม่ทับกัน */
  #scrollTop.scrollup{
    right: 12px;
    bottom: calc(var(--nav-h) + var(--home-bump) + var(--legal-h) + var(--gap) + env(safe-area-inset-bottom));
    z-index: 10000;
  }

  /* กันคอนเทนต์ถูกบัง: เว้นพื้นที่รวม nav + bump + legal */
  body{
    padding-bottom: calc(var(--nav-h) + var(--home-bump) + var(--legal-h) + 16px + env(safe-area-inset-bottom));
  }
}

/* === Mobile Bottom Bar: ใช้ FA แทน svg และใช้ตัวแปรเดียวกัน === */
@media (max-width: 767px){
  :root{
    --nav-h: 72px;     /* ความสูงจริงของ .mobile-nav (วัดจาก DevTools แล้วปรับได้) */
    --home-bump: 18px; /* ปุ่ม Home โผล่พ้นแถบกี่ px */
    --legal-h: 28px;   /* สูงของบรรทัดลิขสิทธิ์ */
    --gap: 12px;       /* เว้นหายใจเล็กน้อย */
  }

  /* ใช้ i (Font Awesome) แทน svg */
  .mobile-nav .mnav-item i{ display:block; }
  /* ดึงขึ้นด้วยตัวแปรเดียวกัน (แทน -18px เดิม) */
  .mobile-nav .mnav-home{ transform: translateY(calc(var(--home-bump) * -1)); }
  .mobile-nav .mnav-home .mnav-home-btn i{ font-size:24px; }

  /* ซ่อนสูตร padding-bottom เก่า (ถ้ามีอยู่ก่อนหน้า ให้ลบทิ้ง) */
  /* body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } */

  /* บรรทัดลิขสิทธิ์: วางเหนือแถบ + ระยะโผล่ของ Home */
  .mobile-legal{
	display: none;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--nav-h) + var(--home-bump) + env(safe-area-inset-bottom));
    height: var(--legal-h);
    line-height: var(--legal-h);
    padding: 0 10px;
    background: #fff;
    color: #666;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    font-size: 12px;
    z-index: 9998;
  }

  /* ปุ่มขึ้นบน: วางเหนือบรรทัดลิขสิทธิ์อีกนิด */
  #scrollTop.scrollup{
    right: 12px;
    bottom: calc(var(--nav-h) + var(--home-bump) + var(--legal-h) + var(--gap) + env(safe-area-inset-bottom));
    z-index: 10000;
  }

  /* กันคอนเทนต์ถูกบัง: เว้นรวม nav + bump + legal */
  body{
    padding-bottom: calc(var(--nav-h) + var(--home-bump) + var(--legal-h) + 16px + env(safe-area-inset-bottom));
  }
}


  
  /* (ทางเลือก) ถ้าอยากให้กดที่คีย์บอร์ดเห็นโฟกัสชัดขึ้น */
  .scrollup:focus-visible{
    outline: 2px solid #4ade80; /* เขียวแบบ success */
    outline-offset: 2px;
  }