/* V118 Mobile + Header + Page Polish
   ทำต่อจาก V117 เป็นฐานหลัก
   เป้าหมาย: header หรูขึ้น, mobile ไม่ล้น, หน้า articles/category/area/about อ่านง่ายขึ้น
   ไม่มี JS / ไม่แตะฐานข้อมูล
*/

:root{
  --v118-navy:#061a32;
  --v118-navy2:#102b48;
  --v118-blue:#1598f2;
  --v118-sky:#36bdff;
  --v118-text:#071b35;
  --v118-muted:#4f667e;
  --v118-line:#dce8f4;
  --v118-bg:#f4f8fc;
}

/* ===== Global polish ===== */
html,body{
  overflow-x:hidden;
}
body{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
main{
  position:relative;
  z-index:1;
}
img{
  max-width:100%;
}

/* ===== Header polish: V117 home ===== */
.v117-top{
  letter-spacing:.01em;
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.v117-header{
  position:relative;
  z-index:20;
}
.v117-head-inner{
  min-height:94px!important;
  padding:12px 0!important;
}
.v117-brand{
  gap:12px!important;
}
.v117-logo{
  width:58px!important;
  height:58px!important;
  border-radius:16px!important;
}
.v117-brand-text strong{
  font-size:clamp(30px,3vw,44px)!important;
  letter-spacing:-.05em!important;
}
.v117-brand-text small{
  font-size:12.5px!important;
  line-height:1.3!important;
}
.v117-nav{
  gap:7px!important;
  align-items:center!important;
}
.v117-nav a{
  min-height:40px!important;
  padding:0 13px!important;
  border-radius:13px!important;
  font-size:13.5px!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.v117-nav a.cta{
  padding-inline:18px!important;
}

/* ปุ่มคีย์หลัก ชลบุรี/ระยอง ลดความเด่นนิดหนึ่ง */
.v117-nav a[href*="rot-hiab-chonburi"],
.v117-nav a[href*="rot-hiab-rayong"]{
  min-height:38px!important;
  font-size:13px!important;
  opacity:.94;
}

/* ===== Header polish: old V71/V100 pages ===== */
.v71-site-top,
.site-top,
.topbar{
  min-height:32px;
}
.v71-header,
.site-header,
.header-main{
  position:relative;
  z-index:20;
}
.v71-header-inner,
.header-inner,
.site-header-inner{
  min-height:92px!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
}
.v71-brand-title,
.site-title,
.logo-title{
  letter-spacing:-.05em!important;
}
.v71-nav,
.site-nav,
.main-nav{
  gap:7px!important;
}
.v71-nav a,
.site-nav a,
.main-nav a{
  min-height:40px!important;
  border-radius:13px!important;
  padding:0 13px!important;
  font-size:13.5px!important;
}

/* ===== Home hero polish ===== */
.v117-hero{
  min-height:590px!important;
}
.v117-hero-inner{
  padding:62px 0!important;
  gap:34px!important;
}
.v117-hero-copy{
  border-radius:28px!important;
  padding:34px!important;
}
.v117-hero h1{
  font-size:clamp(42px,4.9vw,68px)!important;
  line-height:1.08!important;
}
.v117-hero-copy p{
  font-size:17px!important;
  line-height:1.78!important;
}
.v117-info{
  border-radius:26px!important;
}
.v117-info h2{
  font-size:clamp(26px,2.5vw,32px)!important;
}

/* ===== Sections/cards polish ===== */
.v117-section{
  padding:60px 0!important;
}
.v117-section h2{
  font-size:clamp(30px,2.9vw,42px)!important;
}
.v117-grid3{
  gap:16px!important;
}
.v117-card{
  border-radius:24px!important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.v117-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(7,27,53,.13);
}
.v117-card h3{
  font-size:23px!important;
}
.v117-card p{
  font-size:15.5px!important;
}

/* ===== Articles page polish ===== */
.article-grid,
.articles-grid,
.post-grid,
.v71-post-grid,
.v71-archive-grid{
  gap:22px!important;
}
.article-card,
.post-card,
.v71-post-card,
.v71-archive-card{
  border-radius:24px!important;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(7,27,53,.10)!important;
}
.article-card img,
.post-card img,
.v71-post-card img,
.v71-archive-card img{
  object-fit:cover!important;
}
.article-card h2,
.article-card h3,
.post-card h2,
.post-card h3,
.v71-post-card h2,
.v71-post-card h3,
.v71-archive-card h2,
.v71-archive-card h3{
  color:var(--v118-text)!important;
  -webkit-text-fill-color:var(--v118-text)!important;
  text-shadow:none!important;
  line-height:1.28!important;
}
.article-card p,
.post-card p,
.v71-post-card p,
.v71-archive-card p{
  color:#445b73!important;
  -webkit-text-fill-color:#445b73!important;
  line-height:1.72!important;
}

/* Category chips */
.category-filter,
.category-chips,
.v71-category-filter,
.v71-chip-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  align-items:center!important;
}
.category-filter a,
.category-chips a,
.v71-category-filter a,
.v71-chip-row a,
.chip,
.badge-link{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  padding:0 14px!important;
  border:1px solid var(--v118-line)!important;
  background:#fff!important;
  color:#156cc4!important;
  -webkit-text-fill-color:#156cc4!important;
  font-weight:900!important;
  text-shadow:none!important;
}

/* ===== Area page polish ===== */
.area-toolbar,
.v71-area-toolbar,
.area-search,
.v71-search-box{
  border-radius:22px!important;
  box-shadow:0 18px 50px rgba(7,27,53,.10)!important;
}
.area-grid,
.v71-area-grid,
.area-list-grid{
  gap:18px!important;
}
.area-card,
.v71-area-card,
.location-card{
  border-radius:22px!important;
  background:#fff!important;
  border:1px solid var(--v118-line)!important;
  box-shadow:0 18px 48px rgba(7,27,53,.08)!important;
}
.area-card h2,
.area-card h3,
.v71-area-card h2,
.v71-area-card h3,
.location-card h2,
.location-card h3{
  color:var(--v118-text)!important;
  -webkit-text-fill-color:var(--v118-text)!important;
  text-shadow:none!important;
}
.area-card p,
.v71-area-card p,
.location-card p{
  color:#445b73!important;
  -webkit-text-fill-color:#445b73!important;
  text-shadow:none!important;
}

/* ทำแถบประเภทพื้นที่ให้อ่านง่าย */
.area-tabs,
.v71-area-tabs,
.area-type-tabs{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
  margin:18px 0!important;
}
.area-tabs a,
.v71-area-tabs a,
.area-type-tabs a{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:999px!important;
  padding:0 14px!important;
  background:#fff!important;
  border:1px solid var(--v118-line)!important;
  color:#156cc4!important;
  -webkit-text-fill-color:#156cc4!important;
  font-weight:900!important;
}

/* ===== Category/About/Page hero card polish ===== */
.v71-page-hero,
.page-hero,
.category-hero,
.area-hero{
  min-height:360px!important;
}
.v71-page-hero-card,
.page-hero-card,
.category-hero-card,
.area-hero-card{
  border-radius:26px!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.v71-page-hero-card h1,
.page-hero-card h1,
.category-hero-card h1,
.area-hero-card h1{
  line-height:1.15!important;
}
.page-content,
.v71-page-content,
.content-card{
  border-radius:24px!important;
  box-shadow:0 20px 60px rgba(7,27,53,.10)!important;
}

/* ===== Footer polish ===== */
.v117-footer,
.v71-footer,
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
}

/* ===== Mobile: 1024 and below ===== */
@media(max-width:1024px){
  .v117-head-inner,
  .v71-header-inner,
  .header-inner,
  .site-header-inner{
    width:min(100% - 24px, 900px)!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
    gap:12px!important;
  }
  .v117-brand,
  .v71-brand,
  .site-brand{
    justify-content:center!important;
  }
  .v117-nav,
  .v71-nav,
  .site-nav,
  .main-nav{
    width:100%!important;
    justify-content:center!important;
  }
  .v117-hero-inner{
    grid-template-columns:1fr!important;
  }
  .v117-info{
    max-width:760px;
    margin:0 auto;
  }
}

/* ===== Mobile: phones/tablets ===== */
@media(max-width:760px){
  body{
    background:#f5f9fd!important;
  }

  .v117-top{
    padding:8px 12px!important;
    font-size:12px!important;
    line-height:1.5!important;
  }

  .v117-head-inner,
  .v71-header-inner,
  .header-inner,
  .site-header-inner{
    width:calc(100% - 20px)!important;
    min-height:auto!important;
    padding:12px 0 14px!important;
  }

  .v117-brand{
    width:100%!important;
    justify-content:flex-start!important;
    text-align:left!important;
  }
  .v117-logo{
    width:50px!important;
    height:50px!important;
    border-radius:14px!important;
  }
  .v117-brand-text strong{
    font-size:26px!important;
    line-height:1!important;
    white-space:normal!important;
  }
  .v117-brand-text small{
    font-size:11.5px!important;
    margin-top:4px!important;
  }

  /* เมนูมือถือ: เป็นแถบเลื่อนแนวนอน ไม่ล้น ไม่กินหลายบรรทัด */
  .v117-nav,
  .v71-nav,
  .site-nav,
  .main-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    justify-content:flex-start!important;
    gap:8px!important;
    padding:4px 0 7px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .v117-nav::-webkit-scrollbar,
  .v71-nav::-webkit-scrollbar,
  .site-nav::-webkit-scrollbar,
  .main-nav::-webkit-scrollbar{
    display:none;
  }
  .v117-nav a,
  .v71-nav a,
  .site-nav a,
  .main-nav a{
    flex:0 0 auto!important;
    min-height:40px!important;
    padding:0 13px!important;
    font-size:13px!important;
    border-radius:13px!important;
    white-space:nowrap!important;
  }

  .v117-hero{
    min-height:auto!important;
  }
  .v117-hero-inner{
    width:calc(100% - 20px)!important;
    padding:28px 0 34px!important;
    gap:18px!important;
  }
  .v117-hero-copy{
    border-radius:22px!important;
    padding:22px!important;
    border-left-width:5px!important;
  }
  .v117-kicker{
    font-size:12px!important;
    padding:8px 11px!important;
    margin-bottom:14px!important;
  }
  .v117-hero h1{
    font-size:34px!important;
    line-height:1.13!important;
    letter-spacing:-.045em!important;
  }
  .v117-hero-copy p{
    font-size:15px!important;
    line-height:1.75!important;
  }
  .v117-actions{
    gap:10px!important;
    margin-top:18px!important;
  }
  .v117-btn{
    min-height:46px!important;
    padding:0 15px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }

  .v117-info{
    border-radius:22px!important;
    padding:22px!important;
  }
  .v117-info h2{
    font-size:24px!important;
    line-height:1.3!important;
  }
  .v117-info p,
  .v117-info li{
    font-size:14.5px!important;
  }

  .v117-section{
    padding:40px 0!important;
  }
  .v117-wrap{
    width:calc(100% - 20px)!important;
  }
  .v117-section h2{
    font-size:28px!important;
    line-height:1.24!important;
  }
  .v117-lead{
    font-size:15px!important;
    line-height:1.75!important;
  }
  .v117-grid3,
  .v117-grid2,
  .article-grid,
  .articles-grid,
  .post-grid,
  .v71-post-grid,
  .v71-archive-grid,
  .area-grid,
  .v71-area-grid,
  .area-list-grid{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .v117-card,
  .article-card,
  .post-card,
  .v71-post-card,
  .v71-archive-card,
  .area-card,
  .v71-area-card,
  .location-card{
    border-radius:20px!important;
    padding:18px!important;
  }
  .v117-card h3,
  .article-card h2,
  .article-card h3,
  .post-card h2,
  .post-card h3,
  .v71-post-card h2,
  .v71-post-card h3{
    font-size:22px!important;
    line-height:1.3!important;
  }
  .v117-card p,
  .article-card p,
  .post-card p,
  .v71-post-card p,
  .v71-archive-card p{
    font-size:14.5px!important;
    line-height:1.7!important;
  }
  .v117-post-img,
  .article-card img,
  .post-card img,
  .v71-post-card img,
  .v71-archive-card img{
    height:210px!important;
  }

  .v117-keyword{
    border-radius:22px!important;
    padding:22px!important;
  }
  .v117-keyword h2{
    font-size:25px!important;
    line-height:1.25!important;
  }
  .v117-keyword p{
    font-size:14.5px!important;
  }

  /* chips/tabs บนมือถือ: เลื่อนแนวนอน */
  .category-filter,
  .category-chips,
  .v71-category-filter,
  .v71-chip-row,
  .area-tabs,
  .v71-area-tabs,
  .area-type-tabs{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding-bottom:8px!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .category-filter::-webkit-scrollbar,
  .category-chips::-webkit-scrollbar,
  .v71-category-filter::-webkit-scrollbar,
  .v71-chip-row::-webkit-scrollbar,
  .area-tabs::-webkit-scrollbar,
  .v71-area-tabs::-webkit-scrollbar,
  .area-type-tabs::-webkit-scrollbar{
    display:none;
  }
  .category-filter a,
  .category-chips a,
  .v71-category-filter a,
  .v71-chip-row a,
  .area-tabs a,
  .v71-area-tabs a,
  .area-type-tabs a,
  .chip,
  .badge-link{
    flex:0 0 auto!important;
    min-height:36px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  .v71-page-hero,
  .page-hero,
  .category-hero,
  .area-hero{
    min-height:300px!important;
  }
  .v71-page-hero-card,
  .page-hero-card,
  .category-hero-card,
  .area-hero-card{
    width:calc(100% - 20px)!important;
    margin:auto!important;
    padding:22px!important;
    border-radius:22px!important;
  }
}

/* ===== small phones ===== */
@media(max-width:430px){
  .v117-brand-text strong{
    font-size:24px!important;
  }
  .v117-hero h1{
    font-size:31px!important;
  }
  .v117-info h2{
    font-size:22px!important;
  }
  .v117-section h2{
    font-size:25px!important;
  }
  .v117-btn{
    width:auto!important;
  }
}