/* ============================================================
   รักธรรม อินเตอร์เนชั่นแนล ลอว์ — Black & Gold Theme
   Font: Kanit (Google Fonts)
   ============================================================ */

:root{
  --bg:#0b0b0d;
  --bg-2:#101014;
  --surface:#15151a;
  --surface-2:#1b1b21;
  --line:rgba(212,175,55,.22);
  --line-strong:rgba(212,175,55,.45);
  --gold:#d4af37;
  --gold-2:#f0d97c;
  --gold-deep:#a8842c;
  --text:#efece3;
  --muted:#a8a295;
  --shadow:0 18px 45px rgba(0,0,0,.55);
  --radius:4px;
  --grad-gold:linear-gradient(135deg,#f5e07e 0%,#d4af37 45%,#b8860b 100%);
  --maxw:1180px;
}


*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-weight:300;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:color .25s}
a:hover{color:var(--gold-2)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}

::selection{background:var(--gold);color:#0b0b0d}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(11,11,13,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:54px;height:54px;object-fit:contain;border-radius:4px;
  border:1.5px solid var(--line-strong);background:#0c0c10;padding:4px}
.brand-text{line-height:1.25;min-width:0}
.brand-name{font-weight:600;font-size:1.02rem;color:var(--gold);letter-spacing:.02em;white-space:nowrap}
.brand-sub{font-size:.72rem;color:var(--muted);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav a{
  color:var(--text);font-weight:400;font-size:.95rem;
  padding:9px 16px;border-radius:4px;position:relative;
}
.main-nav a:hover{color:var(--gold-2)}
.main-nav a.active{color:var(--gold)}
.main-nav a.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;
  background:var(--grad-gold);border-radius:2px;
}
.nav-cta{
  background:var(--grad-gold);color:#141005 !important;font-weight:600 !important;
  border-radius:4px !important;padding:9px 20px !important;margin-left:8px;
  box-shadow:0 6px 18px rgba(212,175,55,.25);
}
.nav-cta:hover{filter:brightness(1.07)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);color:var(--gold);
  font-size:1.25rem;border-radius:4px;width:44px;height:44px;cursor:pointer;
}

/* ---------- Footer ---------- */
.site-footer{
  margin-top:90px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),#08080a);
}
.footer-grid{
  max-width:var(--maxw);margin:0 auto;padding:56px 22px 30px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.footer-grid h4{
  color:var(--gold);font-weight:500;font-size:1rem;margin-bottom:16px;
  letter-spacing:.04em;text-transform:uppercase;
}
.footer-grid p,.footer-grid li{font-size:.92rem;color:var(--muted)}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:10px}
.footer-grid li a{color:var(--muted)}
.footer-grid li a:hover{color:var(--gold-2)}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-brand img{width:56px;height:56px;object-fit:contain;border-radius:4px;
  border:1.5px solid var(--line-strong);background:#0c0c10;padding:4px}
.footer-brand strong{color:var(--text);font-weight:500;display:block;line-height:1.4}
.footer-warning{
  max-width:var(--maxw);margin:0 auto;padding:0 22px 26px;
}
.footer-warning p{
  font-size:.8rem;color:#c9b98a;background:rgba(212,175,55,.07);
  border:1px dashed var(--line-strong);border-radius:4px;padding:12px 18px;
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px 22px;text-align:center;font-size:.8rem;color:#6f6a5e;
}
.footer-bottom a{color:#8d8778}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:110px 0 90px;
  background:
    radial-gradient(900px 420px at 78% -10%,rgba(212,175,55,.16),transparent 60%),
    radial-gradient(700px 380px at 8% 110%,rgba(212,175,55,.08),transparent 60%),
    linear-gradient(180deg,#0d0d10,#0b0b0d);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 0v120M0 60h120' stroke='%23d4af37' stroke-opacity='.04' stroke-width='1'/%3E%3C/svg%3E");
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--gold);font-size:.85rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:18px;
}
.hero-kicker::before{content:"";width:36px;height:1px;background:var(--grad-gold)}
.hero h1{
  font-size:clamp(1.9rem,4vw,3rem);font-weight:600;line-height:1.3;
  margin-bottom:8px;
}
.hero h1 .gold{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .hero-sub{font-size:1.05rem;color:var(--muted);max-width:560px;margin:14px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
/* ---------- Hero Top Portrait (Crisp Executive Frame) ---------- */
.hero-portrait-box{
  width:210px;height:260px;margin:0 auto 24px;
  border-radius:4px;padding:4px;
  background:linear-gradient(135deg,#fce074 0%,#d4af37 50%,#9e761d 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.8), 0 10px 30px rgba(212,175,55,.35);
  position:relative;
}
.hero-portrait-box img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  border-radius:2px;background:#101014;border:2px solid #000;
  display:block;
}

.hero-services-box{
  background:linear-gradient(135deg,rgba(25,25,32,.85),rgba(16,16,20,.95));
  border:1px solid var(--line-strong);
  border-left:4px solid var(--gold);
  border-radius:4px;
  padding:22px 28px;
  margin:0 auto 24px;
  max-width:760px;
  backdrop-filter:blur(10px);
  text-align:left;
  box-shadow:0 12px 35px rgba(0,0,0,.4);
}

/* ---------- Credibility Stats Bar ---------- */
.stats-bar{
  background:linear-gradient(180deg,rgba(21,21,27,.9),rgba(13,13,17,.95));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  margin-top:20px;
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.stat-item{padding:10px 14px}
.stat-num{
  font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;font-family:inherit;
}
.stat-label{font-size:.88rem;color:var(--text);font-weight:400}

/* ---------- Step Number Badges ---------- */
.step-badge{
  font-size:2rem;font-weight:700;line-height:1;color:var(--gold);
  opacity:.4;margin-bottom:10px;font-family:inherit;display:block;
}
.service-card:hover .step-badge{opacity:1;color:var(--gold-2)}

/* ---------- Sticky Mobile Contact Bar ---------- */
.mobile-sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:999;
  background:rgba(11,11,13,.96);border-top:1px solid var(--line-strong);
  backdrop-filter:blur(12px);padding:10px 14px;
  display:none;gap:10px;box-shadow:0 -10px 30px rgba(0,0,0,.8);
}
.mobile-sticky-bar .btn{flex:1;padding:12px 14px;font-size:.9rem;border-radius:4px}
@media (max-width:640px){
  .mobile-sticky-bar{display:flex}
  body{padding-bottom:65px}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}

/* ---------- Buttons (Crisp Executive Rectangles) ---------- */


.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 32px;border-radius:4px;font-family:inherit;
  font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);
  border:1px solid var(--line-strong);position:relative;overflow:hidden;
  letter-spacing:.04em;text-decoration:none!important;
}
.btn-gold{
  background:linear-gradient(135deg,#fce074 0%,#d4af37 50%,#9e761d 100%);
  color:#100d04!important;
  box-shadow:0 10px 30px rgba(212,175,55,.3), inset 0 1px 1px rgba(255,255,255,.6);
  border-color:#fce074;
}
.btn-gold::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transition:left .6s ease;
}
.btn-gold:hover::before{left:100%}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(212,175,55,.45), inset 0 1px 1px rgba(255,255,255,.8);
  color:#000!important;
}
.btn-gold:active{transform:translateY(0)}

.btn-call-hero{
  white-space:nowrap;
  font-size:clamp(0.86rem,3.8vw,1.08rem);
  padding:14px 28px;
  max-width:100%;
  line-height:1.2;
}
.btn-call-hero .btn-subtext{
  font-size:.84em;
  opacity:.88;
  font-weight:400;
  margin-left:2px;
}

.btn-gold-sm{
  padding:8px 20px;font-size:.9rem;border-radius:4px;
  background:linear-gradient(135deg,#fce074 0%,#d4af37 50%,#9e761d 100%);
  color:#100d04!important;font-weight:600;
  box-shadow:0 6px 20px rgba(212,175,55,.3);
}
.btn-gold-sm:hover{filter:brightness(1.08);transform:translateY(-2px)}

.btn-outline{
  border-color:rgba(212,175,55,.45);color:var(--gold);
  background:rgba(21,21,26,.6);
  backdrop-filter:blur(8px);
  border-radius:4px;
}
.btn-outline:hover{
  background:rgba(212,175,55,.14);
  border-color:var(--gold);color:var(--gold-2);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(212,175,55,.18);
}
.btn-outline:active{transform:translateY(0)}

.text-gold{color:var(--gold)!important}
.text-gold-2{color:var(--gold-2)!important}
.text-gold-sm{font-size:.78rem;color:var(--gold)!important}

/* ---------- Sections ---------- */
.section{padding:76px 0}
.section-alt{background:var(--bg-2)}
.section-head{margin-bottom:44px}
.section-head.center{text-align:center}
.section-kicker{
  color:var(--gold);font-size:.8rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;display:block;margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;line-height:1.35}
.section-head p{color:var(--muted);margin-top:10px;max-width:640px}
.section-head.center p{margin-left:auto;margin-right:auto}
.gold-rule{
  width:64px;height:3px;background:var(--grad-gold);border-radius:2px;margin-top:16px;
}
.center .gold-rule{margin-left:auto;margin-right:auto}

/* ---------- Tap Hint & Card Badges ---------- */
.card-badge-row{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.tap-hint{
  font-size:.76rem;color:var(--gold);background:rgba(212,175,55,.1);
  border:1px solid var(--line);padding:3px 10px;border-radius:2px;
  display:inline-flex;align-items:center;gap:5px;transition:all .25s;
}
.appointment-card:hover .tap-hint{
  background:var(--gold);color:#100d04;border-color:var(--gold);
}

/* ---------- Text Content Modal Popup ---------- */
.app-modal{
  position:fixed;inset:0;z-index:1300;display:none;
  align-items:center;justify-content:center;padding:20px;
}
.app-modal.open{display:flex}
.app-modal-overlay{
  position:fixed;inset:0;background:rgba(5,5,8,.88);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.app-modal-content{
  position:relative;z-index:1310;width:100%;max-width:620px;
  max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#181820,#101015);
  border:1px solid var(--line-strong);border-top:3px solid var(--gold);
  border-radius:6px;padding:34px 28px 30px;
  box-shadow:0 25px 70px rgba(0,0,0,.85);
  animation:modalSlide .3s cubic-bezier(.16,1,.3,1);
}
@keyframes modalSlide{
  from{opacity:0;transform:translateY(20px) scale(0.97)}
  to{opacity:1;transform:none}
}
.app-modal-close{
  position:absolute;top:16px;right:16px;width:38px;height:38px;
  border-radius:4px;border:1px solid var(--line-strong);
  background:rgba(212,175,55,.1);color:var(--gold-2);
  font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .25s;
}
.app-modal-close:hover{background:var(--gold);color:#100d04}
.app-modal-step{
  font-size:.8rem;color:var(--gold);font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;display:block;margin-bottom:8px;
}
.app-modal-icon{
  width:58px;height:58px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(212,175,55,.2),rgba(212,175,55,.05));
  border:1px solid var(--line-strong);font-size:1.7rem;color:var(--gold);margin-bottom:16px;
}
.app-modal-title{font-size:1.3rem;font-weight:600;line-height:1.4;margin-bottom:16px;color:var(--gold-2)}
.app-modal-body{font-size:.98rem;color:#e5e0d3;line-height:1.8;margin-bottom:24px}
.app-modal-body p{margin-bottom:12px}
.app-modal-body ul{margin:10px 0 14px 20px}
.app-modal-body li{margin-bottom:6px}
.app-modal-footer{display:flex;flex-wrap:wrap;gap:12px;padding-top:18px;border-top:1px solid var(--line)}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.service-card{
  background:linear-gradient(180deg,rgba(27,27,33,.85),rgba(16,16,20,.95));
  border:1px solid var(--line);border-radius:4px;
  padding:34px 28px;transition:transform .3s,border-color .3s,box-shadow .3s;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
  position:relative;overflow:hidden;
}
.service-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--grad-gold);opacity:0;transition:opacity .3s;
}
.service-card:hover::before{opacity:1}
.service-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.service-icon{
  width:56px;height:56px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(212,175,55,.16),rgba(212,175,55,.04));
  border:1px solid var(--line-strong);
  font-size:1.6rem;margin-bottom:20px;color:var(--gold);
}
.service-card h3{font-weight:500;font-size:1.12rem;margin-bottom:12px;color:var(--gold-2)}
.service-card p{font-size:.94rem;color:var(--muted);line-height:1.7}


/* ---------- Articles ---------- */
.articles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.article-card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.article-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)}
.article-card .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0d0d10}
.article-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.article-card:hover .thumb img{transform:scale(1.05)}
.article-card .thumb .tag{
  position:absolute;top:12px;left:12px;background:rgba(11,11,13,.88);
  border:1px solid var(--line-strong);color:var(--gold);
  font-size:.72rem;font-weight:500;padding:4px 12px;border-radius:2px;
  backdrop-filter:blur(6px);
}

.article-card .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.article-card time{font-size:.76rem;color:var(--muted);letter-spacing:.05em;margin-bottom:8px;display:block}
.article-card h3{font-size:1rem;font-weight:500;line-height:1.5;margin-bottom:10px}
.article-card h3 a{color:var(--text)}
.article-card h3 a:hover{color:var(--gold-2)}
.article-card p{font-size:.86rem;color:var(--muted);flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-card .more{margin-top:14px;font-size:.86rem;font-weight:500;color:var(--gold)}
.article-card .more:hover{color:var(--gold-2)}

/* Articles page list */
.articles-grid.cols-2{grid-template-columns:repeat(2,1fr)}

/* ---------- Gallery ---------- */
.gallery-grid{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
}
.gallery-item{
  flex:0 0 calc(25% - 14px);max-width:calc(25% - 14px);
  position:relative;border-radius:4px;overflow:hidden;cursor:zoom-in;
  border:1px solid var(--line);aspect-ratio:4/3.4;background:#101014;
  display:block;
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;object-position:center 15%;
  transition:transform .5s,filter .4s;display:block
}

.gallery-item:hover img{transform:scale(1.06);filter:brightness(1.06)}
.gallery-item::after{
  content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:14px;bottom:12px;color:var(--gold-2);font-size:1.1rem;
  opacity:0;transition:opacity .3s;text-shadow:0 2px 8px rgba(0,0,0,.9);
  z-index:2;
}
.gallery-item:hover::after{opacity:1}
.gallery-item figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:30px 14px 12px;font-size:.82rem;color:#e9e4d6;font-weight:400;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.88) 100%);
  opacity:0;transition:opacity .3s;z-index:1;pointer-events:none;display:none;
}
.gallery-item:hover figcaption{opacity:0;display:none}

/* ---------- Gallery Pagination ---------- */
.gallery-pagination{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:36px;flex-wrap:wrap;
}
.gallery-pagination .page-info{
  font-size:.95rem;color:var(--gold-2);font-weight:500;
  padding:8px 18px;background:rgba(21,21,26,.8);
  border:1px solid var(--line);border-radius:4px;
}


/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;
  background:rgba(5,5,7,.94);backdrop-filter:blur(6px);
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:min(92vw,1100px);max-height:86vh;object-fit:contain;
  border-radius:10px;border:1px solid var(--line-strong);
  box-shadow:0 30px 80px rgba(0,0,0,.8);
}
.lightbox-close{
  position:fixed;top:22px;right:26px;z-index:1210;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  background:rgba(212,175,55,.14);border:1px solid var(--line-strong);
  color:var(--gold-2);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .25s;
}
.lightbox-close:hover{background:var(--gold);color:#141005;transform:rotate(90deg)}
.lightbox-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:1210;
  width:50px;height:50px;border-radius:50%;cursor:pointer;
  background:rgba(21,21,26,.75);border:1px solid var(--line-strong);
  color:var(--gold);font-size:1.35rem;
  display:flex;align-items:center;justify-content:center;transition:all .25s;
}
.lightbox-nav:hover{background:var(--gold);color:#141005}
.lightbox-prev{left:26px}
.lightbox-next{right:26px}
.lightbox-caption{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:1210;
  color:#d8d2c2;font-size:.9rem;text-align:center;max-width:80vw;display:none;
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 50% -40%,rgba(212,175,55,.18),transparent 65%),
    var(--bg-2);
  padding:70px 22px;
}
.cta-band h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:600;margin-bottom:12px}
.cta-band p{color:var(--muted);max-width:620px;margin:0 auto 28px}
.cta-band .btn{margin:0 8px 8px}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  padding:72px 0 54px;text-align:center;
  background:
    radial-gradient(700px 300px at 50% -30%,rgba(212,175,55,.14),transparent 60%),
    linear-gradient(180deg,#0d0d10,var(--bg));
  border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:600}
.page-hero p{color:var(--muted);max-width:660px;margin:12px auto 0}
.breadcrumb{
  font-size:.82rem;color:var(--muted);margin-bottom:14px;
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{color:#5b564c}
.breadcrumb .current{color:var(--gold)}

/* ---------- Article detail ---------- */
.article-layout{max-width:820px;margin:0 auto;padding:0 22px}
.article-detail{padding:56px 0 30px}
.article-detail .meta{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:.84rem;color:var(--muted);margin-bottom:18px;
}
.article-detail .meta .tag{
  background:rgba(212,175,55,.1);border:1px solid var(--line);color:var(--gold);
  padding:3px 14px;border-radius:999px;font-size:.76rem;font-weight:500;
}
.article-detail h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;line-height:1.45;margin-bottom:24px}
.article-detail .cover{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  margin:8px 0 34px;cursor:zoom-in;
}
.article-body h2{
  font-size:1.25rem;font-weight:500;color:var(--gold-2);
  margin:36px 0 14px;padding-left:16px;border-left:3px solid var(--gold);
}
.article-body p{margin-bottom:16px;color:#ddd8cb}
.article-body ul,.article-body ol{margin:0 0 18px 24px;color:#ddd8cb}
.article-body li{margin-bottom:8px}
.article-body strong{font-weight:500;color:var(--gold-2)}
.law-quote{
  background:rgba(212,175,55,.06);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:4px;
  padding:20px 24px;margin:22px 0;font-size:.94rem;color:#d9d3c4;
}
.law-quote cite{display:block;margin-top:10px;font-style:normal;font-size:.8rem;color:var(--gold)}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 10px}
.article-tags span{
  font-size:.78rem;color:var(--gold);background:rgba(212,175,55,.08);
  border:1px solid var(--line);border-radius:2px;padding:4px 14px;
}
.article-cta{
  margin-top:34px;text-align:center;background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:4px;padding:32px 26px;
}
.article-cta h3{font-weight:500;color:var(--gold-2);margin-bottom:8px}
.article-cta p{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.related{padding:50px 0 10px}
.related h2{font-size:1.3rem;font-weight:500;margin-bottom:24px;color:var(--gold-2)}

/* ---------- Contact Hero & Linktree Social UI ---------- */
.contact-hero-wrap{
  position:relative;min-height:86vh;padding:60px 20px 80px;
  background:#0b0b0d url("../images/lawyer-portrait.jpg") center top / cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.contact-hero-wrap::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.84) 0%,rgba(11,11,13,.92) 50%,rgba(11,11,13,.97) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.contact-stack-container{
  position:relative;z-index:10;width:100%;max-width:580px;margin:0 auto;text-align:center;
}
.contact-header-icon{
  width:72px;height:72px;margin:0 auto 16px;border-radius:50%;
  background:rgba(212,175,55,.14);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;color:var(--gold);box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.contact-stack-container h1{
  font-size:clamp(1.8rem,4vw,2.4rem);font-weight:600;margin-bottom:6px;color:#fff;
}
.contact-stack-container p.sub{
  color:var(--gold-2);font-size:1.02rem;margin-bottom:32px;
}
.social-link-stack{
  display:flex;flex-direction:column;gap:18px;margin-bottom:36px;
}
.social-link-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:18px 22px;background:rgba(21,21,26,.88);
  border:1px solid var(--line-strong);border-radius:4px;
  color:#f0ecdf;text-decoration:none;font-size:1rem;font-weight:500;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:all .35s cubic-bezier(.16,1,.3,1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.social-link-card:hover{
  transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 12px 35px rgba(212,175,55,.25);color:#fff;
}
.social-link-card i{font-size:2.4rem}
.social-link-card.fb-card i{color:#1877f2}
.social-link-card.line-card i{color:#06c755}
.social-link-card.mail-card i{color:var(--gold)}
.social-link-card.address-card i{color:var(--gold)}
.social-link-card.call-btn-card{
  background:var(--grad-gold);border:none;color:#120e04!important;
  font-weight:700;padding:22px 24px;box-shadow:0 12px 35px rgba(212,175,55,.4);
}
.social-link-card.call-btn-card i{color:#120e04;font-size:2.6rem}
.social-link-card.call-btn-card span.big-num{
  font-size:1.65rem;font-weight:700;letter-spacing:.02em;line-height:1.2;
}

/* ---------- Contact Standard ---------- */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:stretch}
.contact-card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);border-radius:4px;padding:30px 28px;
  height:100%;display:flex;flex-direction:column;
}
.contact-grid .contact-card .qr-box{flex:1;display:flex;flex-direction:column;justify-content:center}
.contact-card h3{font-weight:500;color:var(--gold-2);margin-bottom:18px;font-size:1.1rem}
.contact-row{display:flex;gap:16px;margin-bottom:20px}
.contact-row .ico{
  flex:0 0 46px;width:46px;height:46px;border-radius:4px;
  background:rgba(212,175,55,.1);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--gold);
}
.contact-row strong{display:block;font-weight:500;font-size:.95rem}
.contact-row p,.contact-row a{font-size:.9rem;color:var(--muted)}
.contact-row a:hover{color:var(--gold-2)}
.qr-box{text-align:center;padding:10px 0 4px}

.qr-box img{width:190px;height:190px;object-fit:contain;margin:0 auto 12px;
  border-radius:4px;border:1px solid var(--line-strong);background:#fff;padding:8px}

.qr-box p{font-size:.85rem;color:var(--muted)}
.steps{counter-reset:step;list-style:none}
.steps li{
  position:relative;padding:0 0 22px 58px;counter-increment:step;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:2px;
  width:40px;height:40px;border-radius:50%;
  background:var(--grad-gold);color:#141005;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.steps li::after{
  content:"";position:absolute;left:19px;top:46px;bottom:4px;width:1px;
  background:var(--line-strong);
}
.steps li:last-child::after{display:none}
.steps strong{display:block;font-weight:500;margin-bottom:4px}
.steps p{font-size:.9rem;color:var(--muted)}

/* ---------- Error pages ---------- */
.error-wrap{
  min-height:62vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:80px 22px;
}
.error-code{
  font-size:clamp(5rem,15vw,9rem);font-weight:700;line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.error-wrap h1{font-size:1.4rem;font-weight:500;margin:14px 0 10px}
.error-wrap p{color:var(--muted);max-width:480px;margin:0 auto 28px}

/* ---------- Privacy ---------- */
.legal-body{max-width:820px;margin:0 auto;padding:50px 22px}
.legal-body h2{font-size:1.2rem;font-weight:500;color:var(--gold-2);margin:32px 0 12px}
.legal-body p,.legal-body li{color:#d5cfc1;font-size:.95rem;margin-bottom:12px}
.legal-body ul{margin-left:24px}

/* ---------- Micro-Animations & Smooth Transitions ---------- */

/* 1. Continuous Metallic Shimmer Ray on Gold Buttons */
@keyframes buttonShimmer {
  0% { left: -120%; }
  25%, 100% { left: 220%; }
}
.btn-gold::before {
  animation: buttonShimmer 4.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Continuous Smooth Fade-In / Fade-Out Pulse on Lawyer Portrait Frame */
@keyframes portraitFadeSmooth {
  0% {
    opacity: 0.82;
    transform: scale(0.97) translateY(0);
    box-shadow: 0 14px 40px rgba(0,0,0,.8), 0 0 15px rgba(212,175,55,.25);
  }
  50% {
    opacity: 1;
    transform: scale(1.02) translateY(-6px);
    box-shadow: 0 24px 65px rgba(0,0,0,.92), 0 0 45px rgba(212,175,55,.75);
  }
  100% {
    opacity: 0.82;
    transform: scale(0.97) translateY(0);
    box-shadow: 0 14px 40px rgba(0,0,0,.8), 0 0 15px rgba(212,175,55,.25);
  }
}
.hero-portrait-box {
  animation: portraitFadeSmooth 4s infinite ease-in-out !important;
  will-change: opacity, transform, box-shadow;
}


/* 3. Floating Breathing Motion on Header Icons & Badges */
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.contact-header-icon {
  animation: iconFloat 3.8s infinite ease-in-out;
}

/* 4. High-Response Card Hover Lift & Glow */
.service-card, .article-card, .social-link-card, .contact-card, .stat-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease !important;
}
.service-card:hover, .article-card:hover, .social-link-card:hover, .contact-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 20px 45px rgba(0,0,0,0.6), 0 10px 25px rgba(212,175,55,0.25) !important;
  border-color: var(--gold) !important;
}

.service-card:hover .service-icon i,
.contact-row:hover .ico i,
.social-link-card:hover i {
  transform: scale(1.18) translateY(-3px);
}
.service-icon i, .contact-row .ico i, .social-link-card i {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

/* ---------- Hover Animate Pulse (animate__pulse) ---------- */
@keyframes animate__pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.04, 1.04, 1.04);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

.service-card:hover,
.article-card:hover,
.social-link-card:hover,
.appointment-card:hover,
.btn:hover,
.btn-gold:hover,
.btn-outline:hover,
.hero-portrait-box:hover {
  animation: animate__pulse 0.8s ease-in-out;
}

/* ---------- Motionless / Prefers-Reduced-Motion Banner (Black & Gold Theme) ---------- */
.motionless__banner {
  display: none;
  margin-bottom: 1.5rem;
  width: 100%;
  padding: .75rem 1.25rem;
  background: linear-gradient(180deg, #181820, #101015);
  color: var(--gold-2);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  text-align: center;
  font-size: .92rem;
  border-radius: 4px;
}
.motionless__paragraph {
  margin-bottom: 0;
  color: #e9e4d6;
  font-weight: 500;
}

@media (print), (prefers-reduced-motion: reduce) {
  .motionless__banner {
    display: block;
  }
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal.stagger-in > * {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}


/* 5. Scroll Reveal Animation (Slide-in from left + fade, staggered) */
.reveal {
  opacity: 0;
  transform: translateX(-42px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s) !important;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* ทยอยเข้าทีละชิ้นสำหรับข้อความภายในบล็อกเดียวกัน (หัวข้อ -> คำอธิบาย -> ปุ่ม) */
.reveal.stagger-in > * {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.stagger-in.visible > * {
  opacity: 1;
  transform: translateX(0);
}
.reveal.stagger-in.visible > *:nth-child(1){transition-delay:.05s}
.reveal.stagger-in.visible > *:nth-child(2){transition-delay:.17s}
.reveal.stagger-in.visible > *:nth-child(3){transition-delay:.29s}
.reveal.stagger-in.visible > *:nth-child(4){transition-delay:.41s}
.reveal.stagger-in.visible > *:nth-child(n+5){transition-delay:.5s}

/* หมายเหตุ: html,body มี overflow-x:hidden อยู่แล้วท้ายไฟล์ จึงไม่เกิดแถบเลื่อนแนวนอน */

@media (max-width:700px){
  .reveal { transform: translateX(-22px); }
  .reveal.stagger-in > * { transform: translateX(-14px); }
}




/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-kicker{justify-content:center}
  .hero .hero-sub{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-badge{display:block;margin:32px auto 0;width:100%;max-width:340px}
  .articles-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .appointment-grid{grid-template-columns:1fr!important}
  .gallery-item{flex:0 0 calc(33.333% - 12px);max-width:calc(33.333% - 12px)}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .main-nav{
    position:fixed;top:76px;left:0;right:0;z-index:890;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(11,11,13,.98);border-bottom:1px solid var(--line);
    padding:16px 20px 22px;display:none;
    box-shadow:0 20px 40px rgba(0,0,0,.9);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 16px;font-size:1.02rem}
  .main-nav a.active::after{left:16px;right:auto;width:28px}
  .nav-cta{margin-left:0;text-align:center;justify-content:center;display:flex;margin-top:6px}
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .articles-grid,.articles-grid.cols-2{grid-template-columns:1fr!important}
  .services-grid,.services-grid.cols-2{grid-template-columns:1fr!important}
  .gallery-grid{gap:10px}

  .gallery-item{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px);aspect-ratio:4/3.4;min-height:170px}

  .gallery-item img{min-height:160px}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:46px 0}
  .hero{padding:54px 0 44px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  .lightbox-nav{width:42px;height:42px}
  .lightbox-prev{left:10px}
  .lightbox-next{right:10px}
  .lightbox-close{top:14px;right:14px}

  /* Contact Linktree Mobile Responsive */
  .contact-hero-wrap{padding:40px 14px 60px;min-height:75vh}
  .contact-stack-container{width:100%;max-width:100%}
  .contact-header-icon{width:62px;height:62px;font-size:1.8rem}
  .social-link-card{padding:14px 16px;font-size:.92rem;word-break:break-word}
  .social-link-card i{font-size:2rem}
  .social-link-card.call-btn-card{padding:16px 18px}
  .social-link-card.call-btn-card span.big-num{font-size:clamp(1.2rem,5vw,1.5rem)}
  .app-modal-content{padding:24px 18px 22px;max-width:min(94vw,620px)}
}

@media (max-width:380px){
  .gallery-item{flex:0 0 100%;max-width:100%}
  .hero h1{font-size:1.75rem}
  .brand-name{font-size:.92rem}
  .btn-call-hero{font-size:.8rem;padding:12px 14px}
  .contact-hero-wrap{padding:30px 10px 50px}
  .social-link-card{padding:12px 14px;font-size:.88rem}
  .social-link-card.call-btn-card span.big-num{font-size:1.15rem}
  .stats-grid{grid-template-columns:1fr;gap:12px}
}



/* ============================================================
   แก้ไขครั้งที่ 1 (ตาม PDF) — แบนเนอร์, โลโก้วงกลม, โปรไฟล์โค้งมน,
   หน้าติดต่อไร้กรอบ+พื้นหลังชัด, แก้ตัวอักษรล้นทุกขนาดจอ
   ============================================================ */

/* --- โลโก้ครอบวงกลมพื้นขาว --- */
.brand img,.footer-brand img{border-radius:50%;background:#fff;padding:4px;object-fit:contain}

/* --- แบนเนอร์สำนักงาน (กรอบบน ภาพ bg-pattern) --- */
.hero-banner{
  position:relative;overflow:hidden;max-width:760px;margin:0 auto 28px;
  border-radius:18px;border:1px solid var(--line-strong);
  padding:clamp(26px,6vw,44px) 20px;text-align:center;
  background:
    linear-gradient(180deg,rgba(9,9,12,.68) 0%,rgba(9,9,12,.8) 100%),
    url('../images/bg-pattern.jpg') center 60%/cover no-repeat;
  box-shadow:0 18px 45px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,175,55,.12);
}
.hero-banner .hb-title{
  font-size:clamp(2rem,7vw,3rem);font-weight:700;line-height:1.25;
  background:linear-gradient(135deg,#f6e389 0%,#d4af37 55%,#b8860b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.hero-banner .hb-sub{
  color:#f3ecd9;font-weight:500;font-size:clamp(.98rem,3vw,1.3rem);
  letter-spacing:.04em;margin-top:6px;text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.hero-banner .hb-tag{color:#cdc6b4;font-size:clamp(.8rem,2.4vw,.95rem);margin-top:6px;letter-spacing:.12em}

/* --- รูปโปรไฟล์: ใหญ่ขึ้น มุมโค้งมน --- */
.hero-portrait-box{
  width:min(330px,82vw);height:auto;aspect-ratio:4/5;
  border-radius:28px;padding:5px;
}
.hero-portrait-box img{border-radius:24px;border:2px solid #0b0b0d}

/* --- กล่องบริการ (กรอบล่าง ภาพ bg-hero) --- */
.hero-services-box.photo-bg{
  background:
    linear-gradient(135deg,rgba(17,17,23,.86),rgba(10,10,14,.93)),
    url('../images/bg-hero.jpg') center 45%/cover no-repeat;
  border-radius:14px;
}

/* --- หน้าติดต่อ: พื้นหลังภาพชัด (ลด overlay, ไม่เบลอ) --- */
.contact-hero-wrap{
  background:#0b0b0d url('../images/bg-contact.jpg') center 12%/cover no-repeat;
}
.contact-hero-wrap::before{
  background:linear-gradient(180deg,rgba(11,11,13,.3) 0%,rgba(11,11,13,.45) 55%,rgba(11,11,13,.75) 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.contact-stack-container{text-shadow:0 2px 10px rgba(0,0,0,.9)}
.contact-header-logo{width:104px;height:104px;margin:0 auto 14px;border-radius:50%;
  background:#fff;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.6);overflow:hidden}
.contact-header-logo img{width:100%;height:100%;object-fit:contain;border-radius:50%}

/* --- หน้าติดต่อ: เอากรอบออก เหลือไอคอน + ตัวหนังสือกดลิงก์ได้ --- */
.social-link-stack{gap:6px;display:flex;flex-direction:column}
.social-link-card{
  background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:12px 10px;gap:8px;border-radius:12px;
}
.social-link-card:hover{background:rgba(255,255,255,.05);transform:scale(1.03);box-shadow:none}
.social-link-card i{font-size:2.7rem;filter:drop-shadow(0 3px 8px rgba(0,0,0,.75))}
.social-link-card.call-btn-card{background:none;border:0;padding:12px 10px}
.social-link-card.call-btn-card i{color:var(--gold);font-size:2.7rem}
.social-link-card.call-btn-card span.big-num{
  color:#fff;font-weight:700;font-size:clamp(1.5rem,6.5vw,2.1rem);
  text-shadow:0 3px 10px rgba(0,0,0,.9);
}
/* กล่อง QR + คำเตือน: โปร่ง ไม่มีเส้นกรอบ */
.contact-hero-wrap .contact-card{
  background:rgba(8,8,10,.55);border:0;box-shadow:none;backdrop-filter:blur(3px);
}

/* --- แก้ตัวอักษรล้น/ขาดตอน ทุกขนาดจอ --- */
html,body{overflow-x:hidden}
.container,.contact-stack-container{min-width:0}
h1,h2,h3,p,figcaption,.stat-label{overflow-wrap:break-word}
a[href^="mailto:"],.footer-grid li a,.footer-grid li span{overflow-wrap:anywhere}
.social-link-card span{max-width:100%;overflow-wrap:break-word}
img,svg,video{max-width:100%}
@media (max-width:420px){
  .hero h1{font-size:1.65rem}
  .btn{padding:12px 20px;font-size:.9rem;white-space:normal}
  .btn-call-hero{width:100%;justify-content:center}
  .hero-services-box{padding:18px 16px}
  .articles-grid,.articles-grid.cols-2{grid-template-columns:1fr}
}
/* ปรับโลโก้วงกลมพื้นหลังขาวเต็ม 100% (Solid White Circle Fill) */
.brand img, .footer-brand img {
  border-radius: 50% !important;
  background: #ffffff !important;
  padding: 3px !important;
  object-fit: contain !important;
  border: 1.5px solid var(--gold) !important;
}

.contact-header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 50% !important;
  background: #ffffff !important;
  padding: 6px !important;
  border: 2px solid var(--gold) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  overflow: hidden;
}

.contact-header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}

.contact-hero-wrap .sub,
.social-link-card span {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 20px rgba(0,0,0,.7);
}
.social-link-card span[style*="color:var(--muted)"] {
  color: #e6e2d8 !important;
}

/* ============================================================
   หน้าติดต่อ — ปรับรอบวันที่ 25 ก.ค. 2569
   1) ภาพพื้นหลังเต็มแผ่น ไม่มีแถบดำด้านบน
      (background-position หน่วย px จะทำให้เกิดแถบดำเมื่อใช้ cover — ใช้ % แทน)
   2) วงกลมหัวเพจ = รูปทนาย พื้นขาวเต็มวง ขอบทอง
   ============================================================ */
.contact-hero-wrap {
  background-position: center 38% !important;
  background-size: cover !important;
}
.contact-hero-wrap::before {
  background: linear-gradient(180deg, rgba(11,11,13,.72) 0%, rgba(11,11,13,.76) 45%, rgba(11,11,13,.90) 100%) !important;
}

/* ข้อความใต้หัวเรื่อง: จำกัดความกว้างให้ตัดบรรทัดสวย ไม่มีคำโดดเดี่ยว */
.contact-hero-wrap .sub {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(.8rem, 3.3vw, 1rem);
  line-height: 1.75;
}

/* วงกลมหัวหน้าติดต่อ: รูปทนายอยู่ในวงกลม พื้นขาวเต็มวง ขอบทอง */
.contact-header-logo {
  width: 126px !important;
  height: 126px !important;
  padding: 4px !important;
}
.contact-header-logo img {
  object-fit: cover !important;
  object-position: center 20% !important;
}

/* จอแท็บเล็ต/มือถือ: ภาพพื้นหลังถูกครอบเต็มความสูง ใบหน้าในภาพจะมาอยู่ใกล้วงกลม
   จึงเพิ่มความเข้มด้านบน ให้รูปในวงกลมเป็นจุดเด่นเพียงจุดเดียว */
@media (max-width:1024px) {
  .contact-hero-wrap::before {
    background: linear-gradient(180deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.80) 34%, rgba(11,11,13,.90) 100%) !important;
  }
}
@media (max-width:640px) {
  .contact-hero-wrap { background-position: center 32% !important; }
  .contact-header-logo { width: 112px !important; height: 112px !important; }
}

/* ============================================================
   แก้ตัวหนังสือล้น/ตกบรรทัดบนจอแท็บเล็ต (641–900px)
   ช่วงนี้เมนูยังเป็นแบบเดสก์ท็อป จึงบีบให้พอดีและไม่ตัดคำ
   ============================================================ */
@media (min-width:641px) and (max-width:900px){
  .header-inner{gap:10px}
  .brand-sub{display:none}
  .brand-name{font-size:.98rem;white-space:nowrap}
  .main-nav{gap:4px}
  .main-nav a{font-size:.88rem;padding:8px 7px;white-space:nowrap}
  .nav-cta.btn-gold-sm{white-space:nowrap;font-size:.85rem;padding:9px 12px;margin-left:4px}
}

/* ============================================================
   แก้ไขครั้งที่ 2 — กรอบรูปโปรไฟล์หน้าแรก
   เปลี่ยนเป็น "สี่เหลี่ยมมุมโค้งมน" กรอบขาวหนา ตามภาพตัวอย่าง
   ============================================================ */
.hero-portrait-box{
  width:min(360px,88vw) !important;
  aspect-ratio:4/5;
  border-radius:34px !important;
  padding:9px !important;
  background:#ffffff !important;
  box-shadow:
    0 0 0 1.5px rgba(212,175,55,.65),
    0 22px 50px rgba(0,0,0,.78),
    0 8px 30px rgba(212,175,55,.16) !important;
}
.hero-portrait-box img{
  border-radius:26px !important;
  border:0 !important;
  background:#f2f2f2 !important;
}
@media (max-width:640px){
  .hero-portrait-box{
    border-radius:30px !important;
    padding:8px !important;
  }
  .hero-portrait-box img{ border-radius:23px !important; }
}

/* ============================================================
   แก้ไขครั้งที่ 2 (ต่อ) — ขยายชื่อบริษัทใต้ชื่อทนาย ตามภาพตัวอย่าง
   .nb = ไม่ให้ตัดคำกลางคำ (ภาษาไทยเบราว์เซอร์จะตัดคำเอง ทำให้คำขาด)
   ============================================================ */
.nb{ white-space:nowrap; display:inline-block; }

.hero-company{
  font-size:clamp(1.02rem,4.1vw,1.62rem) !important;
  letter-spacing:.01em;
}
.hero-company .nb{ margin:0 .12em; }
.hero-company-name{
  color:var(--gold-2);
  font-weight:700;
}
.hero-banner .hb-sub{
  font-size:clamp(1rem,3.6vw,1.42rem) !important;
  font-weight:600;
}
@media (max-width:400px){
  .hero-company{ font-size:1rem !important; }
  .hero-banner .hb-sub{ font-size:.98rem !important; }
}

/* ============================================================
   แก้ไขครั้งที่ 3 — หน้าติดต่อ: เลื่อนภาพพื้นหลังลง
   ให้ใบหน้าในภาพพื้นหลังอยู่ "ใต้" วงกลมรูปหน้า ไม่ทับกัน (จอมือถือ/แท็บเล็ต)
   ใช้ไฟล์ bg-contact-v2.jpg (ต่อพื้นสีขาวด้านบนแบบไร้รอยต่อ)
   ============================================================ */
@media (max-width:1024px){
  .contact-hero-wrap{
    background-image: url('../images/bg-contact-v2.jpg') !important;
    background-color: #e9ecef !important;
    background-position: center 20% !important;
    background-size: cover !important;
  }
}
@media (max-width:640px){
  .contact-hero-wrap{ background-position: center 14% !important; }
}
@media (min-width:1025px){
  .contact-hero-wrap{ background-position: center 52% !important; }
}

/* --- จอแคบมาก (<=400px): กันชื่อบริษัทชนปุ่มเมนู --- */
@media (max-width:400px){
  .header-inner{ gap:8px; }
  .brand{ min-width:0; }
  .brand-name{ font-size:.95rem; line-height:1.3; }
  .brand-sub{ font-size:.6rem; line-height:1.35; }
}


/* ============================================================
   แก้ไขครั้งที่ 4 — แบนเนอร์ + แผงพื้นหลังภาพ เป็นสี่เหลี่ยมผืนผ้าชนกัน
   แบนเนอร์ (hero-banner) อยู่บน แล้วแผง (hero-panel) ต่อชนลงมาทันที
   ภายในแผงมี: รูปโปรไฟล์ / ชื่อทนาย / ชื่อบริษัท / กล่องบริการด้านกฎหมาย
   ============================================================ */

/* แบนเนอร์: มุมเหลี่ยมคม และตัดระยะห่างด้านล่างเพื่อให้ชนกับแผงพอดี */
.hero-banner{
  border-radius:0 !important;
  margin-bottom:0 !important;
  border-bottom:0 !important;
}

/* แผงสี่เหลี่ยมผืนผ้า พื้นหลังภาพเดียวกับกล่องบริการเดิม */
.hero-panel{
  max-width:760px;
  margin:0 auto 28px;
  padding:30px 22px 26px;
  text-align:center;
  border-radius:0;
  border:1px solid var(--line-strong);
  border-top:0;
  background:
    linear-gradient(180deg,rgba(12,12,17,.80) 0%,rgba(9,9,13,.90) 100%),
    url('../images/bg-hero.jpg') center 45%/cover no-repeat;
  box-shadow:0 18px 45px rgba(0,0,0,.55), inset 0 0 0 1px rgba(212,175,55,.10);
}

/* รูปโปรไฟล์อยู่ในแผง: คงขนาดเดิม ไม่ขยายใหญ่ขึ้น */
.hero-panel .hero-portrait-box{
  margin:0 auto 20px;
}

/* กล่องบริการเมื่ออยู่ในแผง: ไม่ต้องมีพื้นหลังภาพซ้อนอีกชั้น ใช้พื้นโปร่งแทน */
.hero-services-box.in-panel{
  background:linear-gradient(135deg,rgba(0,0,0,.42),rgba(0,0,0,.55));
  border:1px solid rgba(212,175,55,.22);
  border-left:4px solid var(--gold);
  border-radius:0;
  backdrop-filter:blur(3px);
  margin:0 auto;
  max-width:100%;
  box-shadow:none;
}

@media (max-width:640px){
  .hero-panel{ padding:24px 14px 20px; }
  .hero-services-box.in-panel{ padding:18px 16px; }
}

/* ลดขนาดกรอบรูปโปรไฟล์ในแผงให้เล็กลง */
.hero-panel .hero-portrait-box{
  width:min(280px,66vw) !important;
  padding:7px !important;
  border-radius:26px !important;
}
.hero-panel .hero-portrait-box img{ border-radius:20px !important; }
@media (max-width:640px){
  .hero-panel .hero-portrait-box{
    width:min(230px,62vw) !important;
    padding:6px !important;
    border-radius:22px !important;
  }
  .hero-panel .hero-portrait-box img{ border-radius:17px !important; }
}

/* ---------- รูปโปรไฟล์: ชี้เมาส์แล้วซูม / กดแล้วเปิดภาพใหญ่ ---------- */
.hero-portrait-box.zoomable{
  overflow:hidden;
  cursor:zoom-in;
}
.hero-portrait-box.zoomable img{
  transition:transform .55s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.hero-portrait-box.zoomable:hover img{
  transform:scale(1.12);
  filter:brightness(1.06);
}
/* ไอคอนแว่นขยายบอกใบ้ว่ากดดูภาพใหญ่ได้ */
.hero-portrait-box.zoomable::after{
  content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;right:16px;bottom:14px;z-index:3;
  color:var(--gold-2);font-size:1.15rem;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
  text-shadow:0 2px 10px rgba(0,0,0,.95);pointer-events:none;
}
.hero-portrait-box.zoomable:hover::after{opacity:1;transform:translateY(0)}

/* จอสัมผัส: ไม่มีการชี้เมาส์ จึงแสดงไอคอนไว้ตลอดให้รู้ว่ากดได้ */
@media (hover:none){
  .hero-portrait-box.zoomable::after{opacity:.9;transform:none}
  .hero-portrait-box.zoomable:hover img{transform:none;filter:none}
}


/* ============================================================
   แก้ไขครั้งที่ 5 — หน้าติดต่อ
   1) เอารูปโปรไฟล์วงกลมออก (ลบใน contact/index.html แล้ว)
   2) เลื่อนภาพพื้นหลังลงมาให้เห็นใบหน้า และแสดงเต็มตัวตามความสูง
   3) ด้านข้างที่ภาพไม่เต็มจอ เติมสีขาวอมเทาให้กลืนกับพื้นหลังในภาพ
   ============================================================ */
.contact-hero-wrap{
  background-image:
    url('../images/bg-contact.jpg'),
    linear-gradient(180deg,#d9e0e9 0%,#e7ecf2 55%,#f6f8fa 100%) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:center top, center top !important;
  background-size:auto 100%, cover !important;
  background-color:#e7ecf2 !important;
}
/* ม่านมืด: บางด้านบนเพื่อให้เห็นใบหน้า แล้วค่อยเข้มลงด้านล่างให้ตัวหนังสืออ่านง่าย */
.contact-hero-wrap::before{
  background:linear-gradient(180deg,
    rgba(11,11,13,.28) 0%,
    rgba(11,11,13,.42) 26%,
    rgba(11,11,13,.72) 52%,
    rgba(11,11,13,.90) 100%) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
.contact-header-logo{ display:none !important; }

@media (max-width:1024px){
  .contact-hero-wrap{
    background-image:
      url('../images/bg-contact.jpg'),
      linear-gradient(180deg,#d9e0e9 0%,#e7ecf2 55%,#f6f8fa 100%) !important;
    background-position:center top, center top !important;
    background-size:auto 100%, cover !important;
  }
  .contact-hero-wrap::before{
    background:linear-gradient(180deg,
      rgba(11,11,13,.30) 0%,
      rgba(11,11,13,.46) 24%,
      rgba(11,11,13,.76) 50%,
      rgba(11,11,13,.92) 100%) !important;
  }
}

/* เว้นที่ด้านบนให้ใบหน้าในภาพพื้นหลังโชว์เต็ม ไม่ถูกตัวหนังสือทับ */
.contact-hero-wrap{ padding-top:330px !important; }
@media (max-width:1024px){ .contact-hero-wrap{ padding-top:250px !important; } }
@media (max-width:640px){ .contact-hero-wrap{ padding-top:220px !important; } }

/* ============================================================
   แก้ไขครั้งที่ 6 — ข้อความในแบนเนอร์ ให้ตรงตามแผ่นข้อความที่ลูกค้าส่งมา
   บรรทัดที่ 1 ยาวขึ้น จึงลดขนาดตัวอักษรลงให้พอดีกรอบทุกขนาดจอ
   ============================================================ */
.hero-banner .hb-title{
  font-size:clamp(1.45rem,5.2vw,2.45rem) !important;
  line-height:1.35;
}
.hero-banner .hb-title .nb{ margin:0 .1em; }
.hero-banner .hb-sub{
  font-size:clamp(.95rem,3.3vw,1.32rem) !important;
  margin-top:10px;
}

/* ============================================================
   แก้ไขครั้งที่ 7 — วรรณยุกต์ไทยหาย (เช่น ไม้เอกใน "ซื่อสัตย์")
   สาเหตุ: ตัวอักษรที่ไล่สีทองใช้ background-clip:text ซึ่งจะระบายสี
   เฉพาะในกรอบบรรทัด พอ line-height:1 วรรณยุกต์ที่ลอยสูงจะหลุดกรอบ
   จึงไม่มีสีมาระบาย = มองเห็นเป็นตัวอักษรหายไป
   วิธีแก้: เพิ่มความสูงบรรทัดและระยะขอบบน-ล่างให้ครอบคลุมสระ/วรรณยุกต์
   ============================================================ */
.stat-num{
  line-height:1.35 !important;
  padding-top:.16em;
  padding-bottom:.06em;
}
.hero-banner .hb-title{
  line-height:1.42 !important;
  padding-top:.1em;
  padding-bottom:.06em;
}

/* ---------- ข้อความแจ้งเตือนลอย (ใช้ตอนคัดลอกเบอร์แอดไลน์) ---------- */
.site-toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,14px);
  z-index:2000;max-width:min(92vw,460px);
  background:rgba(12,12,16,.96);color:#f3ecd9;
  border:1px solid rgba(212,175,55,.45);border-radius:10px;
  padding:14px 18px;font-size:.95rem;line-height:1.6;text-align:center;
  box-shadow:0 18px 45px rgba(0,0,0,.65);
  opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;
}
.site-toast.show{opacity:1;transform:translate(-50%,0)}
.site-toast{ width:calc(100% - 32px); max-width:460px; }


/* ---------- ปุ่ม "เพิ่มเพื่อนทางไลน์" ---------- */
.line-add-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  background:#06c755;color:#fff !important;font-weight:700;font-size:1rem;
  text-decoration:none;line-height:1.2;
  box-shadow:0 4px 14px rgba(6,199,85,.35);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.line-add-btn:hover,.line-add-btn:focus{background:#05b34c;transform:translateY(-2px);box-shadow:0 8px 20px rgba(6,199,85,.45)}
.line-add-btn i{font-size:1.15em}
@media (max-width:640px){
  .line-add-btn{width:100%;max-width:340px;padding:13px 18px;font-size:1.02rem}
}