:root{--navy:#03162f;--navy2:#062b58;--blue:#0c55c8;--gold:#d8a52c;--gold2:#ffe49a;--white:#f8fbff;--muted:#b7c7dc;--max:1380px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% 0,#0a3568 0,#03162f 34%,#020b18 100%);color:var(--white);font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;line-height:1.7;overflow-x:hidden}.wrap{width:min(calc(100% - 56px),var(--max));margin:auto}.narrow{max-width:1040px}.topbar{border-bottom:1px solid rgba(216,165,44,.45);background:#020b18;color:#dbe8f8;font-size:14px}.topbar-inner{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:20px}.clock{display:flex;align-items:center;gap:10px}.clock i{height:15px;width:1px;background:var(--gold)}.header{position:sticky;top:0;z-index:50;background:rgba(3,22,47,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,210,92,.45);box-shadow:0 12px 35px rgba(0,0,0,.28)}.header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#ffd75c,#39a9ff,#d95cff,#ffd75c,transparent);background-size:200% 100%;animation:flow 6s linear infinite}.header-inner{height:104px;display:flex;align-items:center;justify-content:space-between;gap:32px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{display:block;width:285px;height:auto;max-height:78px;object-fit:contain}.nav{display:flex;align-items:center;gap:6px}.nav a{color:#edf5ff;text-decoration:none;font-weight:700;padding:12px 15px;border-radius:9px;transition:.25s}.nav a:hover,.nav a.active{color:#ffe08a;background:rgba(216,165,44,.09);text-shadow:0 0 14px rgba(255,214,88,.45)}.menu-toggle{display:none;background:none;border:0;padding:8px}.menu-toggle span{display:block;width:27px;height:2px;background:#ffd75c;margin:6px}.hero{position:relative;background:#020b18;overflow:hidden;border-bottom:1px solid rgba(216,165,44,.55)}.slides{position:relative;aspect-ratio:2.5/1}.slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.025);transition:opacity 1s ease,transform 6s ease;pointer-events:none}.slide.active{opacity:1;transform:scale(1);pointer-events:auto}.slide img{width:100%;height:100%;display:block;object-fit:cover}.slider-btn{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:48px;height:70px;border:1px solid rgba(255,215,92,.7);border-radius:12px;background:rgba(3,22,47,.55);color:#fff;font-size:42px;cursor:pointer;backdrop-filter:blur(8px)}.slider-btn:hover{background:rgba(216,165,44,.78);color:#03162f}.prev{left:20px}.next{right:20px}.dots{position:absolute;z-index:5;left:50%;bottom:15px;transform:translateX(-50%);display:flex;gap:9px}.dot{width:10px;height:10px;border-radius:50%;border:1px solid #ffe49a;background:rgba(255,255,255,.25);padding:0;cursor:pointer}.dot.active{width:32px;border-radius:20px;background:#ffd75c}.contact-strip{position:relative;padding:24px 0 30px;background:linear-gradient(180deg,#061d3a,#03162f);border-bottom:1px solid rgba(216,165,44,.4)}.contact-title{text-align:center;letter-spacing:.22em;font-size:15px;color:#b9cce4;margin-bottom:15px}.contact-title b{color:#ffd75c}.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.contact-grid a{position:relative;overflow:hidden;text-align:center;text-decoration:none;color:#fff;padding:17px;border:1px solid rgba(216,165,44,.55);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:.3s}.contact-grid a:before{content:"";position:absolute;inset:-2px;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,224,130,.2),transparent);transition:.5s}.contact-grid a:hover{transform:translateY(-3px);border-color:#ffd75c;box-shadow:0 8px 25px rgba(0,0,0,.25),0 0 20px rgba(216,165,44,.12)}.contact-grid a:hover:before{transform:translateX(110%)}.contact-grid strong,.contact-grid span{display:block}.contact-grid strong{color:#ffe08a;font-size:18px}.contact-grid span{font-size:13px;color:#b9cce4}.section{padding:86px 0}.intro{text-align:center}.kicker{margin:0 0 8px;color:#e7bd51;font-size:13px;font-weight:700;letter-spacing:.22em}.section h1,.section h2{font-size:clamp(30px,4vw,52px);line-height:1.2;margin:0 0 22px;background:linear-gradient(180deg,#fff,#e7edf7 50%,#c89a2c);-webkit-background-clip:text;color:transparent}.section h3{color:#ffe29a}.lead{font-size:19px;color:#cad8e9}.gold-rule{width:120px;height:2px;margin:32px auto;background:linear-gradient(90deg,transparent,#ffd75c,transparent);box-shadow:0 0 14px #d8a52c}.services{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12));border-block:1px solid rgba(255,255,255,.05)}.heading{text-align:center;margin-bottom:35px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.cards article{position:relative;min-height:230px;padding:28px;border:1px solid rgba(216,165,44,.4);border-radius:18px;background:linear-gradient(145deg,rgba(11,49,94,.78),rgba(2,13,29,.92));box-shadow:0 18px 45px rgba(0,0,0,.2);transition:.3s}.cards article:hover{transform:translateY(-7px);border-color:#ffd75c;box-shadow:0 20px 55px rgba(0,0,0,.35),0 0 24px rgba(40,126,255,.15)}.cards em{font-style:normal;font-size:38px;font-weight:900;color:rgba(255,216,99,.22)}.cards h3{font-size:23px;margin:10px 0}.cards p,.article p,.faq p{color:#bdcde1}.article h3{margin-top:36px;font-size:25px}.faq{background:rgba(0,0,0,.1)}details{border:1px solid rgba(216,165,44,.35);border-radius:12px;margin:13px 0;background:rgba(255,255,255,.025);overflow:hidden}summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;color:#f7f9fd;display:flex;justify-content:space-between;gap:20px}summary::-webkit-details-marker{display:none}summary span{color:#ffd75c;font-size:23px;line-height:1}details[open] summary span{transform:rotate(45deg)}details p{padding:0 20px 20px;margin:0}.footer{position:relative;padding-top:64px;background:#010812;border-top:1px solid rgba(216,165,44,.55)}.footer:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#ffd75c,#249cff,#ffd75c,transparent)}.footer-grid{display:grid;grid-template-columns:1.55fr .8fr .9fr 1fr;gap:48px;padding-bottom:48px}.footer h3{color:#ffe08a;margin-top:0}.footer a{display:block;color:#b9c9dd;text-decoration:none;margin:5px 0}.footer a:hover{color:#ffd75c}.footer p{color:#9eb1c8}.footer-brand img{width:min(330px,100%);height:auto}.footer-brand .phone{font-size:23px;color:#ffe08a;font-weight:800}.copyright{text-align:center;border-top:1px solid rgba(216,165,44,.24);padding:17px;color:#7890ab;font-size:13px}.edge{position:fixed;z-index:100;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#ffd75c,#23a8ff,#d55cff,#ff6c6c,#ffd75c);background-size:100% 300%;animation:edgeGlow 5s linear infinite;box-shadow:0 0 9px currentColor,0 0 18px rgba(49,154,255,.5);pointer-events:none}.edge-left{left:max(0px,calc((100vw - var(--site-max)) / 2 - 7px))}
.edge-right{right:max(0px,calc((100vw - var(--site-max)) / 2 - 7px));animation-direction:reverse}.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}.reveal.visible{opacity:1;transform:none}@keyframes edgeGlow{0%{background-position:0 0}100%{background-position:0 300%}}@keyframes flow{to{background-position:200% 0}}@media(max-width:980px){.header-inner{height:86px}.brand img{width:230px}.menu-toggle{display:block;cursor:pointer}.nav{position:absolute;top:86px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;padding:14px 24px 24px;background:rgba(3,22,47,.98);border-bottom:1px solid #8b6a20}.nav.open{display:flex}.nav a{text-align:center}.cards{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}.slides{aspect-ratio:16/7}}@media(max-width:640px){.wrap{width:min(calc(100% - 28px),var(--max))}.topbar-inner{min-height:48px;flex-direction:column;justify-content:center;gap:0;text-align:center;font-size:11px}.header{top:0}.header-inner{height:74px}.brand img{width:190px;max-height:56px}.nav{top:74px}.slides{aspect-ratio:16/9}.slider-btn{width:35px;height:52px;font-size:30px}.prev{left:8px}.next{right:8px}.contact-grid{grid-template-columns:1fr 1fr}.section{padding:62px 0}.cards{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr;gap:25px}.footer-brand img{width:270px}.clock i{display:none}.clock{gap:4px;flex-direction:column}.edge{width:2px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   FINAL RESPONSIVE DESKTOP REFINEMENT - 2026-09-23
   Constrain large screens, brighten navigation/footer,
   and increase logo contrast while preserving copyright.
========================================================= */
:root{--site-max:1480px}
body{background:#010914}
.topbar,.header,main,.footer{width:min(100%,var(--site-max));margin-left:auto;margin-right:auto}
@media(min-width:1481px){
  .topbar,.header,main,.footer{box-shadow:-22px 0 55px rgba(0,0,0,.32),22px 0 55px rgba(0,0,0,.32)}
}
.header{
  background:linear-gradient(105deg,rgba(7,42,82,.98) 0%,rgba(9,62,119,.97) 48%,rgba(4,31,66,.98) 100%);
  border-bottom:1px solid rgba(255,214,88,.72);
}
.header-inner{height:112px}
.brand{
  padding:10px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025));
  border:1px solid rgba(255,217,102,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 26px rgba(40,139,255,.10);
}
.brand img{width:315px;max-height:82px;filter:drop-shadow(0 2px 7px rgba(0,0,0,.24))}
.nav{gap:8px}
.nav a{color:#f6f9ff;padding:12px 16px;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.nav a:hover,.nav a.active{color:#ffe69b;background:linear-gradient(180deg,rgba(255,217,94,.17),rgba(255,217,94,.08));box-shadow:inset 0 0 0 1px rgba(255,220,115,.12),0 0 18px rgba(255,210,74,.08)}
.hero{border-left:1px solid rgba(216,165,44,.30);border-right:1px solid rgba(216,165,44,.30)}
.footer{
  background:linear-gradient(135deg,#082e59 0%,#061f40 45%,#031329 100%);
  border-left:1px solid rgba(216,165,44,.20);
  border-right:1px solid rgba(216,165,44,.20);
}
.footer-brand img{
  width:min(350px,100%);
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025));
  border:1px solid rgba(255,215,95,.18);
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.24));
}
.footer h3{color:#ffe59a}.footer a{color:#d6e3f3}.footer p{color:#bdcee2}
@media(max-width:1100px){
  .header-inner{height:96px;gap:18px}.brand img{width:255px}.brand{padding:8px 12px}.nav a{padding:10px 11px;font-size:14px}
}
@media(max-width:980px){
  .header-inner{height:86px}.brand img{width:230px}.brand{padding:6px 10px}.nav{top:86px;background:linear-gradient(180deg,rgba(7,45,88,.99),rgba(3,22,47,.99))}
}
@media(max-width:640px){
  .header-inner{height:74px}.brand{padding:5px 8px;border-radius:10px}.brand img{width:190px;max-height:56px}.nav{top:74px}.footer-brand img{width:270px;padding:9px 12px}
}
.seo-article{
  position:relative;
  overflow:hidden;
  padding:78px 0 88px;
  background:
    radial-gradient(circle at 12% 10%,
      rgba(19,102,211,.16),
      transparent 34%),
    radial-gradient(circle at 88% 45%,
      rgba(216,165,44,.09),
      transparent 30%),
    linear-gradient(180deg,
      #04152c 0%,
      #061d3b 48%,
      #03142b 100%);
  color:#eef6ff;
}


/* subtle background light */

.seo-article::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.025),
      transparent
    );
}


/* top gold line */

.seo-article::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(92%,1100px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(216,165,44,.8),
    transparent
  );
  box-shadow:0 0 18px rgba(216,165,44,.25);
}


/* ----------------------------------------------------------
   ARTICLE HEADER
   ---------------------------------------------------------- */

.seo-article__header{
  position:relative;
  max-width:1050px;
  margin:0 auto 42px;
  text-align:center;
  z-index:1;
}


.seo-eyebrow{
  display:inline-block;
  margin-bottom:15px;
  font-size:13px;
  font-weight:800;
  letter-spacing:2.3px;
  color:#f0c95c;
  text-transform:uppercase;
}


.seo-article__header h1{
  margin:0;
  color:#ffffff;
  font-size:clamp(34px,4vw,58px);
  line-height:1.18;
  font-weight:900;
  letter-spacing:-1px;
  text-shadow:
    0 4px 18px rgba(0,0,0,.28),
    0 0 24px rgba(30,119,255,.10);
}


.seo-article__header h1 span{
  display:block;
  margin-top:8px;
  color:#f0c95c;
}


.seo-lead{
  max-width:920px;
  margin:25px auto 0;
  color:#cbd9eb;
  font-size:18px;
  line-height:1.95;
}


.seo-lead strong{
  color:#ffffff;
  font-weight:800;
}


/* ----------------------------------------------------------
   HIGHLIGHT BAR
   ---------------------------------------------------------- */

.seo-highlight{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:0 0 58px;
  overflow:hidden;
  border:1px solid rgba(216,165,44,.42);
  border-radius:18px;
  background:
    linear-gradient(
      135deg,
      rgba(12,54,105,.92),
      rgba(4,28,61,.95)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.05);
}


.seo-highlight__item{
  position:relative;
  padding:23px 18px;
  text-align:center;
}


.seo-highlight__item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:22%;
  width:1px;
  height:56%;
  background:linear-gradient(
    transparent,
    rgba(216,165,44,.52),
    transparent
  );
}


.seo-highlight__item strong{
  display:block;
  margin-bottom:6px;
  color:#f5d36f;
  font-size:18px;
  font-weight:900;
}


.seo-highlight__item span{
  display:block;
  color:#b9cbe1;
  font-size:13px;
  line-height:1.55;
}


/* ----------------------------------------------------------
   MAIN CONTENT TYPOGRAPHY
   ---------------------------------------------------------- */

.seo-content{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
}


.seo-content > h2{
  position:relative;
  margin:62px 0 20px;
  padding-left:20px;
  color:#ffffff;
  font-size:clamp(25px,2.7vw,36px);
  line-height:1.35;
  font-weight:900;
}


.seo-content > h2::before{
  content:"";
  position:absolute;
  top:7px;
  bottom:7px;
  left:0;
  width:4px;
  border-radius:20px;
  background:linear-gradient(
    180deg,
    #ffe28a,
    #d8a52c
  );
  box-shadow:0 0 14px rgba(216,165,44,.42);
}


.seo-content > p{
  margin:0 0 19px;
  color:#c4d2e4;
  font-size:17px;
  line-height:1.95;
}


.seo-content > p strong{
  color:#f6d46d;
  font-weight:800;
}


/* ----------------------------------------------------------
   SERVICE CARDS
   ---------------------------------------------------------- */

.seo-service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin:38px 0 65px;
}


.seo-service-card{
  position:relative;
  min-height:260px;
  padding:31px 30px 29px;
  overflow:hidden;
  border:1px solid rgba(91,153,232,.26);
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(10,48,94,.94),
      rgba(4,27,57,.97)
    );
  box-shadow:
    0 16px 36px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.045);
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}


.seo-service-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  opacity:.72;
  background:linear-gradient(
    90deg,
    #1d7fff,
    #f1c34c,
    transparent
  );
}


.seo-service-card::after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-75px;
  top:-80px;
  border-radius:50%;
  background:rgba(26,112,225,.10);
  filter:blur(4px);
  transition:transform .4s ease;
}


.seo-service-card:hover{
  transform:translateY(-6px);
  border-color:rgba(216,165,44,.60);
  box-shadow:
    0 22px 48px rgba(0,0,0,.30),
    0 0 22px rgba(22,109,223,.11);
}


.seo-service-card:hover::after{
  transform:scale(1.25);
}


.seo-service-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin-bottom:20px;
  border:1px solid rgba(216,165,44,.48);
  border-radius:13px;
  background:
    linear-gradient(
      145deg,
      rgba(216,165,44,.20),
      rgba(216,165,44,.05)
    );
  color:#f4ce62;
  font-size:16px;
  font-weight:900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}


.seo-service-card h3{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  color:#ffffff;
  font-size:22px;
  line-height:1.4;
  font-weight:900;
}


.seo-service-card p{
  position:relative;
  z-index:1;
  margin:0;
  color:#b9c9dc;
  font-size:15.5px;
  line-height:1.85;
}


/* ----------------------------------------------------------
   NATIONWIDE FEATURE
   ---------------------------------------------------------- */

.seo-nationwide{
  position:relative;
  margin:64px 0;
  overflow:hidden;
  border:1px solid rgba(216,165,44,.55);
  border-radius:24px;
  background:
    radial-gradient(
      circle at 85% 30%,
      rgba(24,120,255,.25),
      transparent 36%
    ),
    linear-gradient(
      120deg,
      #071e3e,
      #0a3c78 55%,
      #062650
    );
  box-shadow:
    0 22px 55px rgba(0,0,0,.28),
    0 0 35px rgba(12,85,200,.10);
}


.seo-nationwide::before{
  content:"THAILAND";
  position:absolute;
  right:30px;
  bottom:-28px;
  color:rgba(255,255,255,.035);
  font-size:105px;
  line-height:1;
  font-weight:900;
  letter-spacing:-5px;
  pointer-events:none;
}


.seo-nationwide::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:5px;
  height:100%;
  background:linear-gradient(
    180deg,
    #ffe187,
    #d8a52c,
    #ffe187
  );
  box-shadow:0 0 18px rgba(216,165,44,.38);
}


.seo-nationwide__content{
  position:relative;
  z-index:1;
  max-width:850px;
  padding:48px 50px;
}


.seo-nationwide h2{
  margin:0 0 21px;
  color:#ffffff;
  font-size:clamp(28px,3.2vw,43px);
  line-height:1.25;
  font-weight:900;
}


.seo-nationwide h2 span{
  display:block;
  margin-top:6px;
  color:#f3ce65;
}


.seo-nationwide p{
  margin:0 0 16px;
  color:#d2dfef;
  font-size:16.5px;
  line-height:1.9;
}


.seo-nationwide p strong{
  color:#ffffff;
}


/* ----------------------------------------------------------
   MOVING PROCESS
   ---------------------------------------------------------- */

.seo-process{
  position:relative;
  margin:70px 0 55px;
  padding:45px 36px 38px;
  border:1px solid rgba(70,139,222,.25);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      rgba(5,34,70,.94),
      rgba(3,23,49,.97)
    );
  box-shadow:0 20px 50px rgba(0,0,0,.22);
}


.seo-section-title{
  margin-bottom:32px;
  text-align:center;
}


.seo-section-title h2{
  margin:0;
  color:#ffffff;
  font-size:clamp(26px,3vw,38px);
  line-height:1.35;
  font-weight:900;
}


.seo-process-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}


.seo-process-grid::before{
  content:"";
  position:absolute;
  top:28px;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(216,165,44,.55),
    rgba(46,133,241,.55),
    rgba(216,165,44,.55),
    transparent
  );
}


.seo-process-item{
  position:relative;
  z-index:1;
  padding:5px 15px 10px;
  text-align:center;
}


.seo-process-item > span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 auto 17px;
  border:2px solid rgba(236,194,76,.72);
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      #0d4c96,
      #072d5e
    );
  color:#ffe189;
  font-size:18px;
  font-weight:900;
  box-shadow:
    0 0 0 6px rgba(4,30,62,.95),
    0 0 22px rgba(28,112,218,.22);
}


.seo-process-item h3{
  margin:0 0 8px;
  color:#ffffff;
  font-size:18px;
  font-weight:900;
}


.seo-process-item p{
  margin:0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.7;
}


/* ----------------------------------------------------------
   FINAL CTA
   ---------------------------------------------------------- */

.seo-final-cta{
  position:relative;
  margin-top:70px;
  padding:52px 45px;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(216,165,44,.58);
  border-radius:25px;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(28,120,242,.25),
      transparent 47%
    ),
    linear-gradient(
      135deg,
      #092b57,
      #051b39 65%,
      #031329
    );
  box-shadow:
    0 25px 60px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.06);
}


.seo-final-cta::before{
  content:"";
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    #f5d16b,
    transparent
  );
  box-shadow:0 0 20px rgba(216,165,44,.40);
}


.seo-final-cta h2{
  margin:2px 0 17px;
  color:#ffffff;
  font-size:clamp(27px,3vw,40px);
  line-height:1.3;
  font-weight:900;
}


.seo-final-cta p{
  max-width:760px;
  margin:0 auto 27px;
  color:#c7d6e8;
  font-size:16.5px;
  line-height:1.85;
}


.seo-final-cta small{
  display:block;
  margin-top:22px;
  color:#8fa7c4;
  font-size:13px;
  line-height:1.6;
}


/* ----------------------------------------------------------
   CTA BUTTONS
   ---------------------------------------------------------- */

.seo-cta-buttons{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}


.seo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:190px;
  min-height:50px;
  padding:13px 25px;
  border-radius:11px;
  text-decoration:none;
  font-size:15px;
  font-weight:900;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}


.seo-btn:hover{
  transform:translateY(-3px);
}


.seo-btn--gold{
  border:1px solid #f3d06c;
  background:
    linear-gradient(
      135deg,
      #f7d975,
      #d8a52c
    );
  color:#07172e;
  box-shadow:
    0 10px 25px rgba(216,165,44,.20);
}


.seo-btn--gold:hover{
  box-shadow:
    0 14px 32px rgba(216,165,44,.32),
    0 0 18px rgba(216,165,44,.15);
}


.seo-btn--outline{
  border:1px solid rgba(109,172,249,.60);
  background:rgba(10,61,119,.38);
  color:#ffffff;
}


.seo-btn--outline:hover{
  border-color:#f0ca60;
  background:rgba(15,77,149,.60);
  box-shadow:0 12px 28px rgba(0,0,0,.20);
}


/* ----------------------------------------------------------
   TEXT SELECTION
   ---------------------------------------------------------- */

.seo-article ::selection{
  background:#d8a52c;
  color:#04152c;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */


/* TABLET / SMALL LAPTOP */

@media (max-width:1100px){

  .seo-article{
    padding:68px 0 76px;
  }

  .seo-highlight{
    grid-template-columns:repeat(2,1fr);
  }

  .seo-highlight__item:nth-child(2)::after{
    display:none;
  }

  .seo-highlight__item:nth-child(-n+2){
    border-bottom:1px solid rgba(216,165,44,.18);
  }

  .seo-process-grid{
    grid-template-columns:repeat(2,1fr);
    gap:30px 18px;
  }

  .seo-process-grid::before{
    display:none;
  }

}


/* TABLET */

@media (max-width:820px){

  .seo-article{
    padding:58px 0 65px;
  }

  .seo-article__header{
    margin-bottom:34px;
  }

  .seo-lead{
    font-size:16.5px;
  }

  .seo-service-grid{
    grid-template-columns:1fr;
  }

  .seo-service-card{
    min-height:0;
  }

  .seo-nationwide__content{
    padding:40px 35px;
  }

  .seo-nationwide::before{
    right:15px;
    font-size:75px;
  }

}


/* MOBILE */

@media (max-width:640px){

  .seo-article{
    padding:48px 0 55px;
  }

  .seo-article__header{
    text-align:left;
  }

  .seo-eyebrow{
    margin-bottom:11px;
    font-size:11px;
    letter-spacing:1.5px;
  }

  .seo-article__header h1{
    font-size:30px;
    line-height:1.25;
    letter-spacing:-.5px;
  }

  .seo-article__header h1 span{
    margin-top:5px;
  }

  .seo-lead{
    margin-top:19px;
    font-size:15.5px;
    line-height:1.85;
  }


  /* highlights */

  .seo-highlight{
    grid-template-columns:1fr;
    margin-bottom:44px;
    border-radius:15px;
  }

  .seo-highlight__item{
    padding:18px 15px;
  }

  .seo-highlight__item:not(:last-child){
    border-bottom:1px solid rgba(216,165,44,.18);
  }

  .seo-highlight__item::after{
    display:none;
  }

  .seo-highlight__item strong{
    font-size:17px;
  }


  /* headings */

  .seo-content > h2{
    margin-top:45px;
    padding-left:15px;
    font-size:25px;
  }

  .seo-content > h2::before{
    width:3px;
  }

  .seo-content > p{
    font-size:15.5px;
    line-height:1.85;
  }


  /* cards */

  .seo-service-grid{
    gap:15px;
    margin:29px 0 48px;
  }

  .seo-service-card{
    padding:25px 22px;
    border-radius:16px;
  }

  .seo-service-number{
    width:43px;
    height:43px;
    margin-bottom:16px;
  }

  .seo-service-card h3{
    font-size:20px;
  }

  .seo-service-card p{
    font-size:14.5px;
    line-height:1.8;
  }


  /* nationwide */

  .seo-nationwide{
    margin:48px 0;
    border-radius:18px;
  }

  .seo-nationwide__content{
    padding:35px 24px 37px 28px;
  }

  .seo-nationwide h2{
    font-size:28px;
  }

  .seo-nationwide p{
    font-size:15px;
    line-height:1.82;
  }

  .seo-nationwide::before{
    right:5px;
    bottom:-12px;
    font-size:48px;
    letter-spacing:-2px;
  }


  /* process */

  .seo-process{
    margin:50px 0 42px;
    padding:34px 18px 25px;
    border-radius:18px;
  }

  .seo-section-title{
    margin-bottom:28px;
  }

  .seo-process-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .seo-process-item{
    display:grid;
    grid-template-columns:50px 1fr;
    column-gap:15px;
    padding:12px 8px;
    text-align:left;
  }

  .seo-process-item > span{
    grid-row:1 / 3;
    width:48px;
    height:48px;
    margin:0;
  }

  .seo-process-item h3{
    margin:2px 0 5px;
  }

  .seo-process-item p{
    font-size:13.5px;
  }


  /* final CTA */

  .seo-final-cta{
    margin-top:50px;
    padding:39px 20px;
    border-radius:18px;
  }

  .seo-final-cta h2{
    font-size:27px;
  }

  .seo-final-cta p{
    font-size:15px;
  }

  .seo-cta-buttons{
    flex-direction:column;
  }

  .seo-btn{
    width:100%;
    min-width:0;
  }

}


/* ----------------------------------------------------------
   ACCESSIBILITY / REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){

  .seo-service-card,
  .seo-service-card::after,
  .seo-btn{
    transition:none;
  }

  .seo-service-card:hover,
  .seo-btn:hover{
    transform:none;
  }

}
.faq-section{
  position:relative;
  padding:78px 0 88px;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(19,105,220,.14),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #03142b 0%,
      #061d3b 50%,
      #031329 100%
    );
  color:#ffffff;
}


/* GOLD DIVIDER */

.faq-section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(92%,1100px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(216,165,44,.85),
    transparent
  );
  box-shadow:0 0 18px rgba(216,165,44,.25);
}


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.faq-header{
  max-width:900px;
  margin:0 auto 40px;
  text-align:center;
}


.faq-eyebrow{
  display:inline-block;
  margin-bottom:12px;
  color:#f1c95c;
  font-size:12px;
  font-weight:900;
  letter-spacing:2.3px;
}


.faq-header h2{
  margin:0;
  color:#ffffff;
  font-size:clamp(29px,3.5vw,44px);
  line-height:1.3;
  font-weight:900;
}


.faq-header h2 span{
  color:#f0ca61;
}


.faq-header p{
  max-width:720px;
  margin:17px auto 0;
  color:#aebfd4;
  font-size:16px;
  line-height:1.8;
}


/* ----------------------------------------------------------
   FAQ LIST
   ---------------------------------------------------------- */

.faq-list{
  max-width:1050px;
  margin:0 auto;
}


.faq-item{
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid rgba(85,146,220,.27);
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      rgba(8,46,91,.96),
      rgba(4,27,57,.98)
    );
  box-shadow:
    0 12px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}


.faq-item:hover{
  border-color:rgba(216,165,44,.50);
}


.faq-item[open]{
  border-color:rgba(216,165,44,.60);
  box-shadow:
    0 18px 38px rgba(0,0,0,.25),
    0 0 20px rgba(216,165,44,.05);
}


/* ----------------------------------------------------------
   QUESTION
   ---------------------------------------------------------- */

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:82px;
  padding:18px 23px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}


.faq-item summary::-webkit-details-marker{
  display:none;
}


.faq-item summary::marker{
  display:none;
  content:"";
}


.faq-question{
  display:flex;
  align-items:center;
  gap:17px;
}


.faq-number{
  display:flex;
  flex:0 0 45px;
  align-items:center;
  justify-content:center;
  width:45px;
  height:45px;
  border:1px solid rgba(216,165,44,.42);
  border-radius:11px;
  background:rgba(216,165,44,.08);
  color:#e8bf52;
  font-size:13px;
  font-weight:900;
}


.faq-question h3{
  margin:0;
  color:#f4f8ff;
  font-size:18px;
  line-height:1.55;
  font-weight:800;
  transition:color .25s ease;
}


.faq-item[open] .faq-question h3{
  color:#f5d16a;
}


/* ----------------------------------------------------------
   GOLD + / -
   ---------------------------------------------------------- */

.faq-toggle{
  position:relative;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border:1px solid rgba(216,165,44,.60);
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      rgba(216,165,44,.14),
      rgba(216,165,44,.035)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 14px rgba(216,165,44,.07);
  transition:
    background .25s ease,
    box-shadow .25s ease,
    transform .3s ease;
}


/* horizontal line */

.faq-toggle::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:2px;
  border-radius:5px;
  background:#f3cc60;
  transform:translate(-50%,-50%);
  box-shadow:0 0 7px rgba(243,204,96,.35);
}


/* vertical line = + */

.faq-toggle::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:2px;
  height:16px;
  border-radius:5px;
  background:#f3cc60;
  transform:
    translate(-50%,-50%)
    scaleY(1);
  transition:
    transform .25s ease,
    opacity .25s ease;
  box-shadow:0 0 7px rgba(243,204,96,.35);
}


/* OPEN = REMOVE VERTICAL LINE = MINUS */

.faq-item[open] .faq-toggle::after{
  opacity:0;
  transform:
    translate(-50%,-50%)
    scaleY(0);
}


.faq-item[open] .faq-toggle{
  background:rgba(216,165,44,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 17px rgba(216,165,44,.15);
}


/* ----------------------------------------------------------
   ANSWER
   ---------------------------------------------------------- */

.faq-answer{
  position:relative;
  margin:0 23px 0 85px;
  padding:3px 55px 25px 0;
  border-top:1px solid rgba(216,165,44,.15);
}


.faq-answer p{
  margin:17px 0 0;
  color:#b9c9dc;
  font-size:15.5px;
  line-height:1.9;
}


.faq-answer strong{
  color:#f0cc69;
  font-weight:800;
}


/* ----------------------------------------------------------
   CONTACT BOX
   ---------------------------------------------------------- */

.faq-contact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  max-width:1050px;
  margin:35px auto 0;
  padding:24px 27px;
  border:1px solid rgba(216,165,44,.38);
  border-radius:16px;
  background:
    linear-gradient(
      110deg,
      rgba(11,60,117,.90),
      rgba(5,31,65,.96)
    );
}


.faq-contact__text span{
  display:block;
  margin-bottom:5px;
  color:#9fb4ce;
  font-size:13px;
}


.faq-contact__text strong{
  color:#ffffff;
  font-size:17px;
}


.faq-contact__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-height:48px;
  padding:12px 22px;
  border:1px solid #f1cf6b;
  border-radius:10px;
  background:
    linear-gradient(
      135deg,
      #f6d873,
      #d8a52c
    );
  color:#07172e;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
  box-shadow:0 10px 25px rgba(216,165,44,.17);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.faq-contact__button:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 30px rgba(216,165,44,.28);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:700px){

  .faq-section{
    padding:55px 0 62px;
  }


  .faq-header{
    text-align:left;
    margin-bottom:30px;
  }


  .faq-header h2{
    font-size:28px;
  }


  .faq-header p{
    font-size:15px;
  }


  .faq-item summary{
    min-height:74px;
    gap:12px;
    padding:15px;
  }


  .faq-question{
    gap:12px;
  }


  .faq-number{
    flex-basis:38px;
    width:38px;
    height:38px;
    border-radius:9px;
    font-size:11px;
  }


  .faq-question h3{
    font-size:15px;
    line-height:1.5;
  }


  .faq-toggle{
    flex-basis:36px;
    width:36px;
    height:36px;
  }


  .faq-toggle::before{
    width:14px;
  }


  .faq-toggle::after{
    height:14px;
  }


  .faq-answer{
    margin:0 15px 0 65px;
    padding:2px 5px 21px 0;
  }


  .faq-answer p{
    margin-top:14px;
    font-size:14px;
    line-height:1.8;
  }


  .faq-contact{
    flex-direction:column;
    align-items:stretch;
    padding:21px;
  }


  .faq-contact__button{
    width:100%;
  }

}


/* ACCESSIBILITY */

@media(prefers-reduced-motion:reduce){

  .faq-item,
  .faq-toggle,
  .faq-toggle::after,
  .faq-contact__button{
    transition:none;
  }

}
/* ==========================================================
   FOOTER : OFFICE & BRANCHES
   ========================================================== */

.footer-branches h3{
  margin-bottom:20px;
  color:#ffffff;
}

.footer-branch{
  position:relative;
  margin-bottom:18px;
  padding:0 0 17px 16px;
  border-bottom:1px solid rgba(216,165,44,.15);
}

.footer-branch:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}

.footer-branch::before{
  content:"";
  position:absolute;
  top:5px;
  left:0;
  width:3px;
  height:18px;
  border-radius:10px;
  background:linear-gradient(
    180deg,
    #ffe28a,
    #d8a52c
  );
  box-shadow:0 0 8px rgba(216,165,44,.30);
}

.footer-branch strong{
  display:block;
  margin-bottom:6px;
  color:#f2cb62;
  font-size:15px;
  font-weight:800;
}

.footer-branch p{
  margin:0;
  color:#b7c7dc;
  font-size:13px;
  line-height:1.75;
}

@media(max-width:640px){

  .footer-branch{
    margin-bottom:16px;
  }

  .footer-branch p{
    font-size:12.5px;
    line-height:1.7;
  }

}
.about-content{
  --about-navy:#03162f;
  --about-navy-2:#061f43;
  --about-blue:#0b5fbd;
  --about-electric:#22a8ff;
  --about-gold:#e3b63f;
  --about-gold-light:#ffe28a;
  --about-text:#eaf3ff;
  --about-muted:#afc3dc;

  position:relative;
  overflow:hidden;
  padding:70px 24px 80px;
  color:var(--about-text);
  background:
    radial-gradient(circle at 15% 8%,rgba(34,168,255,.15),transparent 28%),
    radial-gradient(circle at 88% 35%,rgba(227,182,63,.09),transparent 25%),
    linear-gradient(180deg,#03162f 0%,#061d3b 48%,#020e20 100%);
}

/* แสงพื้นหลัง */
.about-content::before{
  content:"";
  position:absolute;
  top:-180px;
  left:50%;
  width:650px;
  height:650px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(34,168,255,.12) 0%,
    rgba(34,168,255,.04) 35%,
    transparent 70%
  );
  pointer-events:none;
}

/* =========================
   HEADER
   ========================= */

.about-content .about-header{
  position:relative;
  z-index:1;
  width:min(100%,1050px);
  margin:0 auto 45px;
  padding:42px 35px;
  text-align:center;
  border:1px solid rgba(227,182,63,.32);
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(10,45,88,.88),
      rgba(3,22,47,.96)
    );
  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    0 0 25px rgba(34,168,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* เส้นทองบน Hero */
.about-content .about-header::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:150px;
  height:3px;
  transform:translateX(-50%);
  border-radius:0 0 10px 10px;
  background:linear-gradient(
    90deg,
    transparent,
    var(--about-gold),
    var(--about-gold-light),
    var(--about-gold),
    transparent
  );
  box-shadow:0 0 14px rgba(227,182,63,.50);
}

.about-content .about-eyebrow{
  display:inline-block;
  margin-bottom:16px;
  padding:7px 15px;
  color:var(--about-gold-light);
  font-size:12px;
  font-weight:800;
  letter-spacing:2.5px;
  border:1px solid rgba(227,182,63,.32);
  border-radius:999px;
  background:rgba(227,182,63,.06);
}

.about-content .about-header h1{
  max-width:850px;
  margin:0 auto;
  color:#fff;
  font-size:clamp(29px,4vw,46px);
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.4px;
  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 20px rgba(34,168,255,.08);
}

/* =========================
   MAIN BODY
   ========================= */

.about-content .about-body{
  position:relative;
  z-index:1;
  width:min(100%,1050px);
  margin:0 auto;
}

/* ย่อหน้าเปิดเรื่อง */
.about-content .about-body > p{
  max-width:930px;
  margin:0 auto 20px;
  color:#c7d8ea;
  font-size:17px;
  line-height:1.95;
}

.about-content .about-body > p strong{
  color:#fff;
  font-weight:700;
}

/* ย่อหน้าแรกให้เด่นขึ้น */
.about-content .about-body > p:first-child{
  padding-top:25px;
  border-top:1px solid rgba(227,182,63,.25);
  color:#e6f0fb;
  font-size:18px;
}

/* =========================
   CONTENT CARDS
   ========================= */

.about-content .about-section{
  position:relative;
  margin:42px 0 0;
  padding:32px 34px;
  overflow:hidden;
  border:1px solid rgba(82,157,238,.22);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(9,42,82,.90),
      rgba(3,22,47,.94)
    );
  box-shadow:
    0 15px 35px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

/* แถบทองซ้าย */
.about-content .about-section::before{
  content:"";
  position:absolute;
  top:25px;
  bottom:25px;
  left:0;
  width:3px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(
    180deg,
    var(--about-gold-light),
    var(--about-gold),
    var(--about-electric)
  );
  box-shadow:0 0 12px rgba(227,182,63,.28);
}

.about-content .about-section:hover{
  transform:translateY(-3px);
  border-color:rgba(227,182,63,.38);
  box-shadow:
    0 20px 42px rgba(0,0,0,.30),
    0 0 22px rgba(34,168,255,.06);
}

/* =========================
   H2
   ========================= */

.about-content .about-section h2,
.about-content .about-closing h2{
  position:relative;
  margin:0 0 22px;
  padding-bottom:14px;
  color:#fff;
  font-size:clamp(23px,3vw,30px);
  font-weight:800;
  line-height:1.4;
}

.about-content .about-section h2::after,
.about-content .about-closing h2::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:72px;
  height:2px;
  border-radius:4px;
  background:linear-gradient(
    90deg,
    var(--about-gold-light),
    var(--about-gold),
    var(--about-electric)
  );
  box-shadow:0 0 8px rgba(227,182,63,.25);
}

/* =========================
   H3
   ========================= */

.about-content .about-section h3{
  margin:30px 0 18px;
  color:var(--about-gold-light);
  font-size:20px;
  font-weight:800;
  line-height:1.5;
}

/* =========================
   PARAGRAPHS
   ========================= */

.about-content .about-section p{
  margin:0 0 17px;
  color:var(--about-muted);
  font-size:16px;
  line-height:1.9;
}

.about-content .about-section p:last-child{
  margin-bottom:0;
}

.about-content .about-section strong{
  color:#fff;
}

/* =========================
   SERVICE LIST
   เปลี่ยน UL ธรรมดาเป็น Grid
   ========================= */

.about-content .about-section ul{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.about-content .about-section li{
  position:relative;
  min-height:64px;
  padding:18px 17px 18px 48px;
  display:flex;
  align-items:center;
  color:#dce9f7;
  font-size:14px;
  font-weight:600;
  line-height:1.55;
  border:1px solid rgba(34,168,255,.18);
  border-radius:12px;
  background:
    linear-gradient(
      145deg,
      rgba(11,67,127,.38),
      rgba(3,24,52,.65)
    );
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.about-content .about-section li::before{
  content:"✓";
  position:absolute;
  left:16px;
  top:50%;
  width:23px;
  height:23px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#07182d;
  font-size:13px;
  font-weight:900;
  border-radius:50%;
  background:linear-gradient(
    135deg,
    var(--about-gold-light),
    var(--about-gold)
  );
  box-shadow:0 0 10px rgba(227,182,63,.22);
}

.about-content .about-section li:hover{
  transform:translateY(-2px);
  border-color:rgba(227,182,63,.38);
  background:
    linear-gradient(
      145deg,
      rgba(12,77,146,.46),
      rgba(3,24,52,.72)
    );
}

/* =========================
   ส่วน "จากจุดเริ่มต้น..."
   ทำให้เด่นกว่ากล่องอื่น
   ========================= */

.about-content .about-section:nth-last-of-type(1){
  border-color:rgba(227,182,63,.28);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(227,182,63,.08),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(8,44,88,.92),
      rgba(3,20,43,.96)
    );
}

/* =========================
   CLOSING / CTA
   ========================= */

.about-content .about-closing{
  position:relative;
  margin-top:45px;
  padding:38px 38px;
  overflow:hidden;
  border:1px solid rgba(227,182,63,.42);
  border-radius:20px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(227,182,63,.12),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0a376c 0%,
      #06254d 48%,
      #03162f 100%
    );
  box-shadow:
    0 18px 42px rgba(0,0,0,.30),
    0 0 25px rgba(227,182,63,.06);
}

/* แสงมุม CTA */
.about-content .about-closing::before{
  content:"";
  position:absolute;
  top:-70px;
  right:-70px;
  width:190px;
  height:190px;
  border-radius:50%;
  background:rgba(34,168,255,.10);
  filter:blur(10px);
}

.about-content .about-closing h2{
  position:relative;
  z-index:1;
  color:var(--about-gold-light);
}

.about-content .about-closing p{
  position:relative;
  z-index:1;
  margin:0 0 15px;
  color:#c7d9ec;
  font-size:16px;
  line-height:1.9;
}

.about-content .about-closing p:last-child{
  margin-bottom:0;
  padding-top:7px;
}

.about-content .about-closing strong{
  color:#fff;
  font-size:17px;
}

/* =========================
   TEXT SELECTION
   ========================= */

.about-content ::selection{
  color:#06162d;
  background:var(--about-gold-light);
}

/* =========================
   TABLET
   ========================= */

@media (max-width:900px){

  .about-content{
    padding:55px 20px 65px;
  }

  .about-content .about-header{
    margin-bottom:36px;
    padding:35px 25px;
  }

  .about-content .about-body > p{
    font-size:16px;
  }

  .about-content .about-section{
    margin-top:32px;
    padding:28px 27px;
  }

  .about-content .about-closing{
    padding:32px 28px;
  }
}

/* =========================
   MOBILE
   ========================= */

@media (max-width:640px){

  .about-content{
    padding:40px 14px 50px;
  }

  .about-content .about-header{
    margin-bottom:30px;
    padding:30px 17px;
    border-radius:15px;
  }

  .about-content .about-eyebrow{
    margin-bottom:13px;
    padding:6px 11px;
    font-size:10px;
    letter-spacing:1.6px;
  }

  .about-content .about-header h1{
    font-size:27px;
    line-height:1.4;
  }

  .about-content .about-body > p{
    margin-bottom:17px;
    font-size:15px;
    line-height:1.85;
  }

  .about-content .about-body > p:first-child{
    padding-top:20px;
    font-size:16px;
  }

  .about-content .about-section{
    margin-top:27px;
    padding:25px 19px 25px 22px;
    border-radius:14px;
  }

  .about-content .about-section::before{
    top:20px;
    bottom:20px;
    width:2px;
  }

  .about-content .about-section h2,
  .about-content .about-closing h2{
    margin-bottom:18px;
    font-size:22px;
  }

  .about-content .about-section h3{
    margin-top:25px;
    font-size:18px;
  }

  .about-content .about-section p{
    font-size:15px;
    line-height:1.85;
  }

  .about-content .about-section ul{
    grid-template-columns:1fr;
    gap:9px;
  }

  .about-content .about-section li{
    min-height:58px;
    padding:15px 13px 15px 44px;
    font-size:13px;
  }

  .about-content .about-closing{
    margin-top:30px;
    padding:27px 20px;
    border-radius:15px;
  }

  .about-content .about-closing p{
    font-size:15px;
    line-height:1.85;
  }

  .about-content .about-closing strong{
    font-size:16px;
  }
}

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion:reduce){

  .about-content .about-section,
  .about-content .about-section li{
    transition:none;
  }

  .about-content .about-section:hover,
  .about-content .about-section li:hover{
    transform:none;
  }
}
.services-content{
  --svc-navy:#03162f;
  --svc-navy-2:#061f43;
  --svc-blue:#0b5fbd;
  --svc-electric:#22a8ff;
  --svc-gold:#e3b63f;
  --svc-gold-light:#ffe28a;
  --svc-text:#eaf3ff;
  --svc-muted:#afc3dc;

  position:relative;
  overflow:hidden;
  padding:70px 24px 85px;
  color:var(--svc-text);
  background:
    radial-gradient(circle at 12% 5%,rgba(34,168,255,.15),transparent 28%),
    radial-gradient(circle at 90% 28%,rgba(227,182,63,.08),transparent 25%),
    linear-gradient(180deg,#03162f 0%,#061d3b 48%,#020e20 100%);
}

/* แสงพื้นหลัง */
.services-content::before{
  content:"";
  position:absolute;
  top:-250px;
  left:50%;
  width:850px;
  height:850px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(34,168,255,.12) 0%,
      rgba(34,168,255,.035) 40%,
      transparent 70%
    );
  pointer-events:none;
}


/* =========================================================
   HERO / HEADER
   ========================================================= */

.services-content .services-header{
  position:relative;
  z-index:1;
  width:min(100%,1100px);
  margin:0 auto 45px;
  padding:48px 40px 44px;
  text-align:center;
  overflow:hidden;
  border:1px solid rgba(227,182,63,.34);
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(34,168,255,.10),transparent 45%),
    linear-gradient(
      145deg,
      rgba(10,48,94,.92),
      rgba(3,22,47,.97)
    );
  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 28px rgba(34,168,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* เส้นทองด้านบน */
.services-content .services-header::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:190px;
  height:3px;
  transform:translateX(-50%);
  border-radius:0 0 10px 10px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--svc-gold),
      var(--svc-gold-light),
      var(--svc-gold),
      transparent
    );
  box-shadow:0 0 16px rgba(227,182,63,.55);
}

/* แสงด้านหลัง */
.services-content .services-header::after{
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  right:-100px;
  bottom:-130px;
  border-radius:50%;
  background:rgba(34,168,255,.07);
  filter:blur(8px);
  pointer-events:none;
}

.services-content .services-eyebrow{
  position:relative;
  z-index:1;
  display:inline-block;
  margin-bottom:17px;
  padding:7px 16px;
  color:var(--svc-gold-light);
  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;
  border:1px solid rgba(227,182,63,.32);
  border-radius:999px;
  background:rgba(227,182,63,.06);
}

.services-content .services-header h1{
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto 22px;
  color:#fff;
  font-size:clamp(30px,4vw,47px);
  font-weight:800;
  line-height:1.32;
  letter-spacing:-.4px;
  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 22px rgba(34,168,255,.08);
}

.services-content .services-header h1 span{
  display:block;
  margin-top:8px;
  color:var(--svc-gold-light);
  font-size:.68em;
  font-weight:700;
  line-height:1.45;
}

.services-content .services-intro{
  position:relative;
  z-index:1;
  max-width:850px;
  margin:0 auto;
  color:#c6d8eb;
  font-size:17px;
  line-height:1.9;
}

.services-content .services-intro strong{
  color:#fff;
}


/* =========================================================
   MAIN BODY
   ========================================================= */

.services-content .services-body{
  position:relative;
  z-index:1;
  width:min(100%,1100px);
  margin:0 auto;
}


/* =========================================================
   SERVICE BLOCKS
   ========================================================= */

.services-content .service-block{
  position:relative;
  margin-top:25px;
  padding:32px 35px;
  overflow:hidden;
  border:1px solid rgba(68,151,239,.20);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(8,42,83,.90),
      rgba(3,22,47,.95)
    );
  box-shadow:
    0 14px 35px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.035);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.services-content .service-block::before{
  content:"";
  position:absolute;
  top:24px;
  bottom:24px;
  left:0;
  width:3px;
  border-radius:0 5px 5px 0;
  background:
    linear-gradient(
      180deg,
      var(--svc-gold-light),
      var(--svc-gold),
      var(--svc-electric)
    );
  box-shadow:0 0 12px rgba(227,182,63,.25);
}

.services-content .service-block:hover{
  transform:translateY(-3px);
  border-color:rgba(227,182,63,.38);
  box-shadow:
    0 20px 42px rgba(0,0,0,.30),
    0 0 22px rgba(34,168,255,.055);
}


/* =========================================================
   HEADINGS
   ========================================================= */

.services-content .service-block h2,
.services-content .services-cta h2{
  position:relative;
  margin:0 0 21px;
  padding-bottom:14px;
  color:#fff;
  font-size:clamp(23px,3vw,30px);
  font-weight:800;
  line-height:1.4;
}

.services-content .service-block h2::after,
.services-content .services-cta h2::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:75px;
  height:2px;
  border-radius:4px;
  background:
    linear-gradient(
      90deg,
      var(--svc-gold-light),
      var(--svc-gold),
      var(--svc-electric)
    );
  box-shadow:0 0 8px rgba(227,182,63,.25);
}

.services-content .service-block h3{
  margin:28px 0 13px;
  color:var(--svc-gold-light);
  font-size:20px;
  font-weight:800;
  line-height:1.5;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

.services-content .service-block p{
  margin:0 0 17px;
  color:var(--svc-muted);
  font-size:16px;
  line-height:1.9;
}

.services-content .service-block p:last-child{
  margin-bottom:0;
}

.services-content .service-block strong{
  color:#fff;
}


/* =========================================================
   NATIONWIDE HIGHLIGHT
   ========================================================= */

.services-content .service-nationwide{
  border-color:rgba(227,182,63,.36);
  background:
    radial-gradient(
      circle at 92% 15%,
      rgba(227,182,63,.10),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(34,168,255,.09),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(9,53,104,.95),
      rgba(3,22,47,.98)
    );
}

.services-content .service-nationwide::after{
  content:"THAILAND";
  position:absolute;
  right:25px;
  bottom:7px;
  color:rgba(255,255,255,.025);
  font-size:70px;
  font-weight:900;
  letter-spacing:4px;
  pointer-events:none;
}


/* =========================================================
   SERVICE STEPS
   ========================================================= */

.services-content .service-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
  counter-reset:serviceStep;
}

.services-content .service-steps li{
  counter-increment:serviceStep;
  position:relative;
  min-height:180px;
  padding:58px 18px 20px;
  color:#afc3dc;
  font-size:14px;
  line-height:1.7;
  border:1px solid rgba(34,168,255,.18);
  border-radius:15px;
  background:
    linear-gradient(
      145deg,
      rgba(12,67,126,.38),
      rgba(3,24,52,.68)
    );
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.services-content .service-steps li::before{
  content:counter(serviceStep, decimal-leading-zero);
  position:absolute;
  top:16px;
  left:18px;
  color:var(--svc-gold-light);
  font-size:27px;
  font-weight:900;
  line-height:1;
  text-shadow:0 0 12px rgba(227,182,63,.20);
}

.services-content .service-steps li::after{
  content:"";
  position:absolute;
  top:48px;
  left:18px;
  width:35px;
  height:2px;
  border-radius:5px;
  background:linear-gradient(
    90deg,
    var(--svc-gold),
    var(--svc-electric)
  );
}

.services-content .service-steps li strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:15px;
}

.services-content .service-steps li:hover{
  transform:translateY(-4px);
  border-color:rgba(227,182,63,.40);
  box-shadow:
    0 12px 25px rgba(0,0,0,.20),
    0 0 15px rgba(34,168,255,.05);
}


/* =========================================================
   BENEFITS GRID
   ========================================================= */

.services-content .service-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:27px;
}

.services-content .benefit-item{
  position:relative;
  padding:23px 22px 22px 58px;
  overflow:hidden;
  border:1px solid rgba(34,168,255,.18);
  border-radius:14px;
  background:
    linear-gradient(
      145deg,
      rgba(11,68,130,.36),
      rgba(3,24,52,.65)
    );
  transition:
    transform .25s ease,
    border-color .25s ease;
}

/* จุดทอง */
.services-content .benefit-item::before{
  content:"✓";
  position:absolute;
  top:23px;
  left:20px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#07182d;
  font-size:14px;
  font-weight:900;
  border-radius:50%;
  background:
    linear-gradient(
      135deg,
      var(--svc-gold-light),
      var(--svc-gold)
    );
  box-shadow:0 0 12px rgba(227,182,63,.22);
}

.services-content .benefit-item:hover{
  transform:translateY(-3px);
  border-color:rgba(227,182,63,.38);
}

.services-content .benefit-item h3{
  margin:0 0 7px;
  color:#fff;
  font-size:17px;
}

.services-content .benefit-item p{
  margin:0;
  color:#9fb6cf;
  font-size:14px;
  line-height:1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.services-content .services-cta{
  position:relative;
  margin-top:42px;
  padding:43px 38px;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(227,182,63,.46);
  border-radius:21px;
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(227,182,63,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 12% 90%,
      rgba(34,168,255,.13),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #0a3b75 0%,
      #062851 48%,
      #03162f 100%
    );
  box-shadow:
    0 20px 45px rgba(0,0,0,.30),
    0 0 28px rgba(227,182,63,.055);
}

.services-content .services-cta::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:150px;
  height:3px;
  transform:translateX(-50%);
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--svc-gold),
      var(--svc-gold-light),
      var(--svc-gold),
      transparent
    );
  box-shadow:0 0 14px rgba(227,182,63,.50);
}

.services-content .cta-small{
  display:inline-block;
  margin-bottom:12px;
  color:var(--svc-gold-light);
  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
}

.services-content .services-cta h2{
  max-width:700px;
  margin:0 auto 19px;
  color:#fff;
  font-size:clamp(27px,4vw,36px);
}

.services-content .services-cta h2::after{
  left:50%;
  transform:translateX(-50%);
}

.services-content .services-cta p{
  max-width:760px;
  margin:0 auto;
  color:#bed1e5;
  font-size:16px;
  line-height:1.85;
}


/* =========================================================
   CTA BUTTONS
   ========================================================= */

.services-content .services-contact{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:13px;
  margin-top:27px;
}

.services-content .service-btn{
  min-width:180px;
  padding:13px 22px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  text-align:center;
  border:1px solid rgba(227,182,63,.52);
  border-radius:10px;
  background:rgba(3,22,47,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.services-content .service-btn:hover{
  transform:translateY(-3px);
  color:#fff;
  background:rgba(13,75,140,.70);
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    0 0 15px rgba(34,168,255,.10);
}

.services-content .service-btn-primary{
  color:#07182d;
  border-color:var(--svc-gold-light);
  background:
    linear-gradient(
      135deg,
      var(--svc-gold-light),
      var(--svc-gold)
    );
  box-shadow:0 6px 18px rgba(227,182,63,.16);
}

.services-content .service-btn-primary:hover{
  color:#07182d;
  background:
    linear-gradient(
      135deg,
      #fff0ae,
      #e7b936
    );
  box-shadow:
    0 10px 25px rgba(0,0,0,.24),
    0 0 18px rgba(227,182,63,.20);
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

.services-content ::selection{
  color:#06162d;
  background:var(--svc-gold-light);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:900px){

  .services-content{
    padding:55px 20px 70px;
  }

  .services-content .services-header{
    padding:40px 28px 38px;
  }

  .services-content .service-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .services-content .service-steps li{
    min-height:160px;
  }

  .services-content .service-nationwide::after{
    font-size:52px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:640px){

  .services-content{
    padding:40px 14px 52px;
  }

  .services-content .services-header{
    margin-bottom:30px;
    padding:31px 18px 30px;
    border-radius:15px;
  }

  .services-content .services-eyebrow{
    margin-bottom:13px;
    padding:6px 11px;
    font-size:10px;
    letter-spacing:1.5px;
  }

  .services-content .services-header h1{
    margin-bottom:17px;
    font-size:27px;
    line-height:1.4;
  }

  .services-content .services-header h1 span{
    margin-top:7px;
    font-size:.67em;
  }

  .services-content .services-intro{
    font-size:15px;
    line-height:1.85;
  }

  .services-content .service-block{
    margin-top:18px;
    padding:25px 19px 25px 22px;
    border-radius:14px;
  }

  .services-content .service-block::before{
    top:20px;
    bottom:20px;
    width:2px;
  }

  .services-content .service-block h2{
    font-size:22px;
  }

  .services-content .service-block h3{
    font-size:18px;
  }

  .services-content .service-block p{
    font-size:15px;
    line-height:1.85;
  }

  .services-content .service-nationwide::after{
    display:none;
  }

  .services-content .service-steps{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:22px;
  }

  .services-content .service-steps li{
    min-height:0;
    padding:57px 17px 18px;
  }

  .services-content .service-benefits{
    grid-template-columns:1fr;
    gap:10px;
  }

  .services-content .benefit-item{
    padding:20px 16px 19px 54px;
  }

  .services-content .benefit-item::before{
    top:20px;
    left:17px;
  }

  .services-content .services-cta{
    margin-top:28px;
    padding:32px 19px;
    border-radius:15px;
  }

  .services-content .services-cta h2{
    font-size:26px;
  }

  .services-content .services-cta p{
    font-size:15px;
    line-height:1.8;
  }

  .services-content .services-contact{
    flex-direction:column;
    margin-top:23px;
  }

  .services-content .service-btn{
    width:100%;
    min-width:0;
    padding:14px 18px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .services-content .service-block,
  .services-content .service-steps li,
  .services-content .benefit-item,
  .services-content .service-btn{
    transition:none;
  }

  .services-content .service-block:hover,
  .services-content .service-steps li:hover,
  .services-content .benefit-item:hover,
  .services-content .service-btn:hover{
    transform:none;
  }
}
/* =========================================================
   LANNA MOVER - OUR WORK / PORTFOLIO PAGE
   Navy Blue + Gold + Electric Blue
   ========================================================= */

.portfolio-content{
  --pf-navy:#03162f;
  --pf-navy-2:#061f43;
  --pf-blue:#0b5fbd;
  --pf-electric:#22a8ff;
  --pf-gold:#e3b63f;
  --pf-gold-light:#ffe28a;
  --pf-text:#eaf3ff;
  --pf-muted:#afc3dc;

  position:relative;
  overflow:hidden;
  padding:70px 24px 85px;
  color:var(--pf-text);

  background:
    radial-gradient(circle at 12% 7%,
      rgba(34,168,255,.15),
      transparent 28%),
    radial-gradient(circle at 90% 32%,
      rgba(227,182,63,.08),
      transparent 25%),
    linear-gradient(
      180deg,
      #03162f 0%,
      #061d3b 48%,
      #020e20 100%
    );
}


/* =========================================================
   BACKGROUND LIGHT
   ========================================================= */

.portfolio-content::before{
  content:"";
  position:absolute;
  top:-240px;
  left:50%;

  width:850px;
  height:850px;

  transform:translateX(-50%);
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,168,255,.12) 0%,
      rgba(34,168,255,.035) 40%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   PORTFOLIO HEADER
   ========================================================= */

.portfolio-content .portfolio-header{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto 45px;
  padding:48px 40px 44px;

  text-align:center;
  overflow:hidden;

  border:1px solid rgba(227,182,63,.34);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.10),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(10,48,94,.92),
      rgba(3,22,47,.97)
    );

  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 28px rgba(34,168,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}


/* เส้นทองด้านบน */

.portfolio-content .portfolio-header::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:190px;
  height:3px;

  transform:translateX(-50%);

  border-radius:0 0 10px 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pf-gold),
      var(--pf-gold-light),
      var(--pf-gold),
      transparent
    );

  box-shadow:
    0 0 16px rgba(227,182,63,.55);
}


/* แสงด้านขวา */

.portfolio-content .portfolio-header::after{
  content:"";

  position:absolute;
  right:-100px;
  bottom:-130px;

  width:250px;
  height:250px;

  border-radius:50%;

  background:
    rgba(34,168,255,.07);

  filter:blur(8px);

  pointer-events:none;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.portfolio-content .portfolio-eyebrow{
  position:relative;
  z-index:1;

  display:inline-block;

  margin-bottom:17px;
  padding:7px 16px;

  color:var(--pf-gold-light);

  font-size:12px;
  font-weight:800;
  letter-spacing:2.5px;

  border:
    1px solid rgba(227,182,63,.32);

  border-radius:999px;

  background:
    rgba(227,182,63,.06);
}


/* =========================================================
   H1
   ========================================================= */

.portfolio-content .portfolio-header h1{
  position:relative;
  z-index:1;

  max-width:900px;

  margin:0 auto 22px;

  color:#fff;

  font-size:
    clamp(30px,4vw,47px);

  font-weight:800;
  line-height:1.32;

  letter-spacing:-.4px;

  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 22px rgba(34,168,255,.08);
}


.portfolio-content .portfolio-header h1 span{
  display:block;

  margin-top:8px;

  color:var(--pf-gold-light);

  font-size:.68em;
  font-weight:700;
  line-height:1.45;
}


/* =========================================================
   INTRO
   ========================================================= */

.portfolio-content .portfolio-intro{
  position:relative;
  z-index:1;

  max-width:850px;

  margin:0 auto;

  color:#c6d8eb;

  font-size:17px;
  line-height:1.9;
}


/* =========================================================
   MAIN BODY
   ========================================================= */

.portfolio-content .portfolio-body{
  position:relative;
  z-index:1;

  width:min(100%,1100px);

  margin:0 auto;
}


/* =========================================================
   ARTICLE CARD
   ========================================================= */

.portfolio-content .portfolio-article{
  position:relative;

  padding:38px 38px;

  border:
    1px solid rgba(68,151,239,.20);

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(8,42,83,.90),
      rgba(3,22,47,.95)
    );

  box-shadow:
    0 16px 38px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* แถบทองซ้าย */

.portfolio-content .portfolio-article::before{
  content:"";

  position:absolute;

  top:32px;
  bottom:32px;
  left:0;

  width:3px;

  border-radius:
    0 5px 5px 0;

  background:
    linear-gradient(
      180deg,
      var(--pf-gold-light),
      var(--pf-gold),
      var(--pf-electric)
    );

  box-shadow:
    0 0 12px rgba(227,182,63,.25);
}


/* =========================================================
   ARTICLE H2
   ========================================================= */

.portfolio-content .portfolio-article > h2{
  position:relative;

  margin:
    40px 0 20px;

  padding-bottom:13px;

  color:#fff;

  font-size:
    clamp(23px,3vw,29px);

  font-weight:800;
  line-height:1.45;
}


.portfolio-content .portfolio-article > h2:first-child{
  margin-top:0;
}


.portfolio-content .portfolio-article > h2::after{
  content:"";

  position:absolute;

  bottom:0;
  left:0;

  width:72px;
  height:2px;

  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      var(--pf-gold-light),
      var(--pf-gold),
      var(--pf-electric)
    );

  box-shadow:
    0 0 8px rgba(227,182,63,.25);
}


/* =========================================================
   ARTICLE TEXT
   ========================================================= */

.portfolio-content .portfolio-article > p{
  margin:
    0 0 17px;

  color:var(--pf-muted);

  font-size:16px;
  line-height:1.9;
}


.portfolio-content .portfolio-article strong{
  color:#fff;
  font-weight:700;
}


/* =========================================================
   PORTFOLIO HIGHLIGHT
   ========================================================= */

.portfolio-content .portfolio-highlight{
  position:relative;

  margin-top:42px;
  padding:30px 30px;

  overflow:hidden;

  border:
    1px solid rgba(227,182,63,.32);

  border-radius:16px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(227,182,63,.10),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      rgba(10,59,117,.75),
      rgba(3,22,47,.90)
    );
}


.portfolio-content .portfolio-highlight::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pf-gold),
      var(--pf-gold-light),
      var(--pf-gold),
      transparent
    );
}


.portfolio-content .portfolio-highlight h2{
  margin:0 0 12px;

  color:var(--pf-gold-light);

  font-size:24px;
  font-weight:800;
  line-height:1.45;
}


.portfolio-content .portfolio-highlight p{
  margin:0;

  color:#bfd2e6;

  font-size:16px;
  line-height:1.85;
}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.portfolio-content .portfolio-gallery-section{
  position:relative;

  margin-top:45px;
  padding:40px 34px 36px;

  overflow:hidden;

  border:
    1px solid rgba(227,182,63,.28);

  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(7,37,75,.96),
      rgba(2,17,38,.98)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.28);
}


/* เส้นทองบน Gallery */

.portfolio-content
.portfolio-gallery-section::before{
  content:"";

  position:absolute;

  top:0;
  left:50%;

  width:170px;
  height:3px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--pf-gold),
      var(--pf-gold-light),
      var(--pf-gold),
      transparent
    );

  box-shadow:
    0 0 14px rgba(227,182,63,.45);
}


/* =========================================================
   GALLERY HEADING
   ========================================================= */

.portfolio-content .gallery-heading{
  margin-bottom:30px;

  text-align:center;
}


.portfolio-content .gallery-heading > span{
  display:inline-block;

  margin-bottom:9px;

  color:var(--pf-gold-light);

  font-size:11px;
  font-weight:900;

  letter-spacing:3px;
}


.portfolio-content .gallery-heading h2{
  margin:0 0 9px;

  color:#fff;

  font-size:
    clamp(27px,4vw,36px);

  font-weight:800;
}


.portfolio-content .gallery-heading p{
  margin:0;

  color:#9fb7d0;

  font-size:15px;
}


/* =========================================================
   GALLERY GRID
   DESKTOP = 4 x 3
   ========================================================= */

.portfolio-content .portfolio-gallery{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:16px;
}


/* =========================================================
   IMAGE CARD
   ========================================================= */

.portfolio-content .portfolio-item{
  position:relative;

  margin:0;

  overflow:hidden;

  border:
    1px solid rgba(227,182,63,.25);

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(11,61,116,.65),
      rgba(3,23,49,.95)
    );

  box-shadow:
    0 10px 25px rgba(0,0,0,.22);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.portfolio-content .portfolio-item:hover{
  transform:
    translateY(-5px);

  border-color:
    rgba(227,182,63,.60);

  box-shadow:
    0 17px 34px rgba(0,0,0,.32),
    0 0 20px rgba(34,168,255,.08),
    0 0 12px rgba(227,182,63,.08);
}


/* =========================================================
   IMAGE CONTAINER
   ========================================================= */

.portfolio-content .portfolio-image{
  position:relative;

  overflow:hidden;

  aspect-ratio:4 / 3;

  background:
    linear-gradient(
      135deg,
      #092e5b,
      #041a36
    );
}


/* Gradient ด้านล่างรูป */

.portfolio-content .portfolio-image::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:45%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(2,14,31,.35)
    );

  pointer-events:none;
}


.portfolio-content .portfolio-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .55s ease,
    filter .4s ease;
}


.portfolio-content
.portfolio-item:hover
.portfolio-image img{

  transform:
    scale(1.065);

  filter:
    brightness(1.06);
}


/* =========================================================
   FIGCAPTION
   ========================================================= */

.portfolio-content .portfolio-item figcaption{
  position:relative;

  min-height:55px;

  display:flex;
  align-items:center;

  padding:
    12px 14px 12px 17px;

  color:#e8f2fc;

  font-size:13px;
  font-weight:700;

  line-height:1.45;

  border-top:
    1px solid rgba(227,182,63,.16);
}


/* จุดทอง */

.portfolio-content
.portfolio-item figcaption::before{

  content:"";

  flex:0 0 auto;

  width:6px;
  height:6px;

  margin-right:9px;

  border-radius:50%;

  background:
    var(--pf-gold-light);

  box-shadow:
    0 0 8px rgba(227,182,63,.65);
}


/* =========================================================
   IMAGE PLACEHOLDER
   ถ้ายังไม่ได้ใส่รูปจริง
   ========================================================= */

.portfolio-content
.portfolio-image:has(img[src=""])::before{

  content:"เพิ่มรูปผลงาน";

  position:absolute;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:
    rgba(255,226,138,.65);

  font-size:13px;
  font-weight:700;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

.portfolio-content ::selection{
  color:#06162d;

  background:
    var(--pf-gold-light);
}


/* =========================================================
   LARGE TABLET
   3 COLUMNS
   ========================================================= */

@media (max-width:1050px){

  .portfolio-content .portfolio-gallery{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


/* =========================================================
   TABLET
   2 COLUMNS
   ========================================================= */

@media (max-width:800px){

  .portfolio-content{
    padding:
      55px 20px 70px;
  }

  .portfolio-content .portfolio-header{
    padding:
      40px 28px 38px;
  }

  .portfolio-content .portfolio-article{
    padding:
      32px 28px;
  }

  .portfolio-content
  .portfolio-gallery-section{

    padding:
      35px 25px 30px;
  }

  .portfolio-content .portfolio-gallery{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:14px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:560px){

  .portfolio-content{
    padding:
      40px 14px 52px;
  }


  /* HEADER */

  .portfolio-content .portfolio-header{
    margin-bottom:28px;

    padding:
      31px 18px 30px;

    border-radius:15px;
  }

  .portfolio-content .portfolio-eyebrow{
    margin-bottom:13px;

    padding:
      6px 11px;

    font-size:10px;

    letter-spacing:1.5px;
  }

  .portfolio-content .portfolio-header h1{
    margin-bottom:17px;

    font-size:27px;

    line-height:1.4;
  }

  .portfolio-content
  .portfolio-header h1 span{

    margin-top:7px;

    font-size:.67em;
  }

  .portfolio-content .portfolio-intro{
    font-size:15px;

    line-height:1.85;
  }


  /* ARTICLE */

  .portfolio-content .portfolio-article{
    padding:
      26px 19px 26px 22px;

    border-radius:14px;
  }

  .portfolio-content
  .portfolio-article::before{

    top:22px;
    bottom:22px;

    width:2px;
  }

  .portfolio-content
  .portfolio-article > h2{

    margin-top:32px;

    font-size:22px;
  }

  .portfolio-content
  .portfolio-article > p{

    font-size:15px;

    line-height:1.85;
  }


  /* HIGHLIGHT */

  .portfolio-content
  .portfolio-highlight{

    margin-top:32px;

    padding:
      24px 19px;

    border-radius:13px;
  }

  .portfolio-content
  .portfolio-highlight h2{

    font-size:21px;
  }

  .portfolio-content
  .portfolio-highlight p{

    font-size:15px;
  }


  /* GALLERY */

  .portfolio-content
  .portfolio-gallery-section{

    margin-top:28px;

    padding:
      30px 13px 20px;

    border-radius:15px;
  }

  .portfolio-content
  .gallery-heading{

    margin-bottom:23px;
  }

  .portfolio-content
  .gallery-heading h2{

    font-size:26px;
  }

  .portfolio-content
  .gallery-heading p{

    font-size:14px;
  }

  /*
     มือถือยังคง 2 ช่อง
     เพื่อให้เห็นผลงานได้หลายรูป
  */

  .portfolio-content
  .portfolio-gallery{

    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:9px;
  }

  .portfolio-content
  .portfolio-item{

    border-radius:10px;
  }

  .portfolio-content
  .portfolio-item figcaption{

    min-height:48px;

    padding:
      9px 8px;

    font-size:11px;

    line-height:1.35;
  }

  .portfolio-content
  .portfolio-item figcaption::before{

    width:5px;
    height:5px;

    margin-right:6px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:360px){

  .portfolio-content
  .portfolio-gallery{

    grid-template-columns:1fr;
  }

  .portfolio-content
  .portfolio-item figcaption{

    font-size:13px;

    padding:
      11px 13px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .portfolio-content .portfolio-item,
  .portfolio-content .portfolio-image img{
    transition:none;
  }

  .portfolio-content
  .portfolio-item:hover{

    transform:none;
  }

  .portfolio-content
  .portfolio-item:hover
  .portfolio-image img{

    transform:none;
  }

}
/* =========================================================
   LANNA MOVER - TERMS & CONDITIONS PAGE
   Professional Navy + Gold
   ========================================================= */

.terms-content{
  --terms-navy:#03162f;
  --terms-navy-2:#061f43;
  --terms-blue:#0b5fbd;
  --terms-electric:#22a8ff;
  --terms-gold:#e3b63f;
  --terms-gold-light:#ffe28a;
  --terms-text:#eaf3ff;
  --terms-muted:#afc3dc;
  --terms-border:rgba(227,182,63,.25);

  position:relative;
  overflow:hidden;
  padding:70px 24px 85px;
  color:var(--terms-text);

  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(34,168,255,.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 25%,
      rgba(227,182,63,.07),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #03162f 0%,
      #061d3b 48%,
      #020e20 100%
    );
}


/* =========================================================
   BACKGROUND LIGHT
   ========================================================= */

.terms-content::before{
  content:"";
  position:absolute;
  top:-260px;
  left:50%;
  width:850px;
  height:850px;
  transform:translateX(-50%);
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,168,255,.10) 0%,
      rgba(34,168,255,.03) 40%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.terms-content .terms-header{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto 45px;
  padding:48px 40px 42px;

  text-align:center;
  overflow:hidden;

  border:1px solid rgba(227,182,63,.36);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.09),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(10,48,94,.92),
      rgba(3,22,47,.97)
    );

  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 28px rgba(34,168,255,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
}


/* เส้นทองบน Header */

.terms-content .terms-header::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;

  width:190px;
  height:3px;

  transform:translateX(-50%);

  border-radius:0 0 10px 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--terms-gold),
      var(--terms-gold-light),
      var(--terms-gold),
      transparent
    );

  box-shadow:
    0 0 16px rgba(227,182,63,.55);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.terms-content .terms-eyebrow{
  display:inline-block;

  margin-bottom:17px;
  padding:7px 16px;

  color:var(--terms-gold-light);

  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;

  border:1px solid rgba(227,182,63,.32);
  border-radius:999px;

  background:rgba(227,182,63,.06);
}


/* =========================================================
   HEADER H1
   ========================================================= */

.terms-content .terms-header h1{
  max-width:900px;
  margin:0 auto 18px;

  color:#fff;

  font-size:clamp(30px,4vw,46px);
  font-weight:800;
  line-height:1.35;

  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 20px rgba(34,168,255,.08);
}


.terms-content .terms-header h1 span{
  display:block;

  margin-top:7px;

  color:var(--terms-gold-light);

  font-size:.72em;
  font-weight:700;
}


/* =========================================================
   HEADER NOTICE
   ========================================================= */

.terms-content .terms-notice{
  display:inline-block;

  margin:0;
  padding:10px 18px;

  color:#dce9f7;

  font-size:15px;
  font-weight:600;

  border:1px solid rgba(34,168,255,.20);
  border-radius:9px;

  background:rgba(2,18,39,.40);
}


/* =========================================================
   BODY
   ========================================================= */

.terms-content .terms-body{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto;
}


/* =========================================================
   LANGUAGE SECTION
   ========================================================= */

.terms-content .terms-language{
  margin-top:45px;
}


.terms-content .terms-language:first-child{
  margin-top:0;
}


/* =========================================================
   LANGUAGE TITLE
   ========================================================= */

.terms-content .terms-language-title{
  position:relative;

  margin-bottom:25px;
  padding:28px 30px;

  overflow:hidden;

  border:1px solid rgba(227,182,63,.25);
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      rgba(10,55,107,.80),
      rgba(3,22,47,.94)
    );
}


.terms-content .terms-language-title::before{
  content:"";

  position:absolute;
  top:0;
  bottom:0;
  left:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      var(--terms-gold-light),
      var(--terms-gold),
      var(--terms-electric)
    );
}


.terms-content .terms-language-title > span{
  display:block;

  margin-bottom:7px;

  color:var(--terms-gold-light);

  font-size:11px;
  font-weight:900;
  letter-spacing:2.5px;
}


.terms-content .terms-language-title h2{
  margin:0 0 6px;

  color:#fff;

  font-size:clamp(23px,3vw,30px);
  font-weight:800;
  line-height:1.45;
}


.terms-content .terms-language-title p{
  margin:0;

  color:#aebfd3;

  font-size:15px;
  line-height:1.7;
}


/* =========================================================
   TERMS CARD
   ========================================================= */

.terms-content .terms-card{
  position:relative;

  display:grid;
  grid-template-columns:75px minmax(0,1fr);

  margin-bottom:18px;

  overflow:hidden;

  border:1px solid rgba(68,151,239,.19);
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(8,42,83,.90),
      rgba(3,22,47,.96)
    );

  box-shadow:
    0 14px 34px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}


.terms-content .terms-card:hover{
  transform:translateY(-2px);

  border-color:rgba(227,182,63,.32);

  box-shadow:
    0 18px 40px rgba(0,0,0,.27),
    0 0 18px rgba(34,168,255,.045);
}


/* =========================================================
   NUMBER COLUMN
   ========================================================= */

.terms-content .terms-number{
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding-top:29px;

  color:var(--terms-gold-light);

  font-size:23px;
  font-weight:900;
  letter-spacing:1px;

  border-right:1px solid rgba(227,182,63,.15);

  background:
    linear-gradient(
      180deg,
      rgba(227,182,63,.075),
      rgba(34,168,255,.025)
    );

  text-shadow:
    0 0 12px rgba(227,182,63,.20);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.terms-content .terms-card-content{
  padding:29px 31px 31px;
}


/* =========================================================
   CARD H2
   ========================================================= */

.terms-content .terms-card-content > h2{
  position:relative;

  margin:0 0 23px;
  padding-bottom:13px;

  color:#fff;

  font-size:clamp(21px,3vw,27px);
  font-weight:800;
  line-height:1.45;
}


.terms-content .terms-card-content > h2::after{
  content:"";

  position:absolute;
  bottom:0;
  left:0;

  width:68px;
  height:2px;

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      var(--terms-gold-light),
      var(--terms-gold),
      var(--terms-electric)
    );
}


/* =========================================================
   NORMAL TEXT
   ========================================================= */

.terms-content .terms-card-content p{
  margin:0 0 17px;

  color:var(--terms-muted);

  font-size:16px;
  line-height:1.9;
}


.terms-content .terms-card-content strong{
  color:#fff;
  font-weight:700;
}


/* =========================================================
   LISTS
   ========================================================= */

.terms-content .terms-card-content ul{
  margin:0;
  padding:0;

  list-style:none;
}


.terms-content .terms-card-content ul > li{
  position:relative;

  margin-bottom:12px;
  padding-left:27px;

  color:#afc3dc;

  font-size:16px;
  line-height:1.85;
}


.terms-content .terms-card-content ul > li:last-child{
  margin-bottom:0;
}


.terms-content .terms-card-content ul > li::before{
  content:"";

  position:absolute;
  top:.72em;
  left:4px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--terms-gold);

  box-shadow:
    0 0 7px rgba(227,182,63,.40);
}


/* =========================================================
   SUBSECTIONS 2.1 - 2.5
   ========================================================= */

.terms-content .terms-subsection{
  margin-top:22px;
  padding:22px 23px;

  border:1px solid rgba(34,168,255,.14);
  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      rgba(11,64,122,.25),
      rgba(2,19,42,.42)
    );
}


.terms-content .terms-subsection:first-of-type{
  margin-top:0;
}


.terms-content .terms-subsection h3{
  margin:0 0 16px;

  color:var(--terms-gold-light);

  font-size:18px;
  font-weight:800;
  line-height:1.5;
}


/* =========================================================
   PROHIBITED ITEMS
   ========================================================= */

.terms-content .prohibited-section{
  border-color:rgba(227,182,63,.28);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(227,182,63,.07),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(9,48,92,.48),
      rgba(3,20,43,.70)
    );
}


.terms-content .prohibited-section h3{
  padding-bottom:13px;

  border-bottom:
    1px solid rgba(227,182,63,.18);
}


/* =========================================================
   THAI PROHIBITED NUMBERED LIST
   ========================================================= */

.terms-content ol.prohibited-list{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px 12px;

  margin:18px 0 0;
  padding:0;

  list-style:none;

  counter-reset:prohibited;
}


.terms-content ol.prohibited-list li{
  counter-increment:prohibited;

  position:relative;

  min-height:48px;

  display:flex;
  align-items:center;

  padding:11px 13px 11px 45px;

  color:#c5d5e6;

  font-size:14px;
  line-height:1.5;

  border:1px solid rgba(34,168,255,.12);
  border-radius:9px;

  background:rgba(2,18,39,.34);
}


.terms-content ol.prohibited-list li::before{
  content:counter(prohibited);

  position:absolute;
  left:12px;

  width:23px;
  height:23px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#07182d;

  font-size:11px;
  font-weight:900;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--terms-gold-light),
      var(--terms-gold)
    );
}


/* =========================================================
   ENGLISH PROHIBITED LIST
   ========================================================= */

.terms-content ul.prohibited-list-en{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px 12px;

  margin-top:18px;
}


.terms-content
ul.prohibited-list-en > li{

  min-height:48px;

  display:flex;
  align-items:center;

  margin:0;

  padding:11px 13px 11px 37px;

  border:1px solid rgba(34,168,255,.12);
  border-radius:9px;

  background:rgba(2,18,39,.34);
}


.terms-content
ul.prohibited-list-en > li::before{

  top:50%;
  left:15px;

  transform:translateY(-50%);

  width:7px;
  height:7px;
}


/* =========================================================
   IMPORTANT NOTICE
   ========================================================= */

.terms-content .terms-important{
  position:relative;

  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:19px;

  margin-top:25px;
  padding:28px 30px;

  overflow:hidden;

  border:1px solid rgba(227,182,63,.43);
  border-radius:16px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(227,182,63,.10),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(10,58,112,.90),
      rgba(3,22,47,.97)
    );

  box-shadow:
    0 15px 35px rgba(0,0,0,.24);
}


.terms-content .terms-important::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--terms-gold),
      var(--terms-gold-light),
      var(--terms-gold),
      transparent
    );
}


/* ! ICON */

.terms-content .terms-important-icon{
  width:50px;
  height:50px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#07182d;

  font-size:25px;
  font-weight:900;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--terms-gold-light),
      var(--terms-gold)
    );

  box-shadow:
    0 0 17px rgba(227,182,63,.20);
}


.terms-content .terms-important h2{
  margin:0 0 9px;

  color:var(--terms-gold-light);

  font-size:20px;
  font-weight:800;
  line-height:1.5;
}


.terms-content .terms-important p{
  margin:0;

  color:#c3d5e7;

  font-size:15px;
  line-height:1.85;
}


.terms-content .terms-important strong{
  color:#fff;
}


/* =========================================================
   ENGLISH SECTION SEPARATOR
   ========================================================= */

.terms-content .terms-english{
  position:relative;

  margin-top:70px;
  padding-top:55px;

  border-top:
    1px solid rgba(227,182,63,.25);
}


.terms-content .terms-english::before{
  content:"TH / EN";

  position:absolute;
  top:-15px;
  left:50%;

  transform:translateX(-50%);

  padding:5px 15px;

  color:var(--terms-gold-light);

  font-size:10px;
  font-weight:900;
  letter-spacing:2px;

  border:1px solid rgba(227,182,63,.28);
  border-radius:999px;

  background:#04182f;
}


/* =========================================================
   SELECTION
   ========================================================= */

.terms-content ::selection{
  color:#06162d;
  background:var(--terms-gold-light);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:850px){

  .terms-content{
    padding:55px 20px 70px;
  }

  .terms-content .terms-header{
    padding:40px 28px 38px;
  }

  .terms-content .terms-card{
    grid-template-columns:60px minmax(0,1fr);
  }

  .terms-content .terms-number{
    font-size:20px;
  }

  .terms-content .terms-card-content{
    padding:27px 25px;
  }

  .terms-content ol.prohibited-list,
  .terms-content ul.prohibited-list-en{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

  .terms-content{
    padding:40px 14px 52px;
  }


  /* HEADER */

  .terms-content .terms-header{
    margin-bottom:30px;
    padding:31px 17px 29px;

    border-radius:15px;
  }

  .terms-content .terms-eyebrow{
    margin-bottom:13px;
    padding:6px 10px;

    font-size:9px;
    letter-spacing:1.3px;
  }

  .terms-content .terms-header h1{
    font-size:27px;
    line-height:1.4;
  }

  .terms-content .terms-header h1 span{
    font-size:.72em;
  }

  .terms-content .terms-notice{
    padding:9px 12px;

    font-size:13px;
  }


  /* LANGUAGE TITLE */

  .terms-content .terms-language-title{
    padding:23px 20px;

    border-radius:13px;
  }

  .terms-content .terms-language-title h2{
    font-size:21px;
  }

  .terms-content .terms-language-title p{
    font-size:14px;
  }


  /* CARDS */

  .terms-content .terms-card{
    display:block;

    border-radius:13px;
  }

  .terms-content .terms-number{
    width:100%;

    display:block;

    padding:10px 18px;

    font-size:14px;

    border-right:0;
    border-bottom:
      1px solid rgba(227,182,63,.15);

    background:
      linear-gradient(
        90deg,
        rgba(227,182,63,.09),
        transparent
      );
  }

  .terms-content .terms-card-content{
    padding:23px 18px 24px;
  }

  .terms-content
  .terms-card-content > h2{

    margin-bottom:20px;

    font-size:21px;
  }

  .terms-content
  .terms-card-content p{

    font-size:14px;
    line-height:1.85;
  }

  .terms-content
  .terms-card-content ul > li{

    padding-left:23px;

    font-size:14px;
    line-height:1.8;
  }


  /* SUBSECTION */

  .terms-content .terms-subsection{
    margin-top:16px;
    padding:18px 15px;

    border-radius:10px;
  }

  .terms-content .terms-subsection h3{
    font-size:16px;
  }


  /* PROHIBITED */

  .terms-content ol.prohibited-list,
  .terms-content ul.prohibited-list-en{
    gap:7px;
  }

  .terms-content
  ol.prohibited-list li{

    min-height:45px;

    padding:
      10px 10px 10px 42px;

    font-size:13px;
  }

  .terms-content
  ul.prohibited-list-en > li{

    min-height:45px;

    padding:
      10px 10px 10px 34px;

    font-size:13px;
  }


  /* IMPORTANT */

  .terms-content .terms-important{
    display:block;

    padding:23px 19px;

    border-radius:13px;
  }

  .terms-content .terms-important-icon{
    width:40px;
    height:40px;

    margin-bottom:15px;

    font-size:21px;
  }

  .terms-content .terms-important h2{
    font-size:18px;
  }

  .terms-content .terms-important p{
    font-size:14px;
  }


  /* ENGLISH */

  .terms-content .terms-english{
    margin-top:55px;
    padding-top:45px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .terms-content .terms-card{
    transition:none;
  }

  .terms-content .terms-card:hover{
    transform:none;
  }

}
/* =========================================================
   LANNA MOVER - PRIVACY POLICY PAGE
   Navy + Gold + Electric Blue
   ========================================================= */

.privacy-content{
  --privacy-navy:#03162f;
  --privacy-navy-2:#061f43;
  --privacy-blue:#0b5fbd;
  --privacy-electric:#22a8ff;
  --privacy-gold:#e3b63f;
  --privacy-gold-light:#ffe28a;
  --privacy-text:#eaf3ff;
  --privacy-muted:#afc3dc;

  position:relative;
  overflow:hidden;
  padding:70px 24px 85px;
  color:var(--privacy-text);

  background:
    radial-gradient(
      circle at 12% 5%,
      rgba(34,168,255,.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 28%,
      rgba(227,182,63,.07),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #03162f 0%,
      #061d3b 48%,
      #020e20 100%
    );
}


/* =========================================================
   BACKGROUND LIGHT
   ========================================================= */

.privacy-content::before{
  content:"";
  position:absolute;
  top:-260px;
  left:50%;

  width:850px;
  height:850px;

  transform:translateX(-50%);
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,168,255,.11) 0%,
      rgba(34,168,255,.03) 40%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.privacy-content .privacy-header{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto 45px;
  padding:48px 40px 44px;

  overflow:hidden;
  text-align:center;

  border:1px solid rgba(227,182,63,.34);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.10),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(10,48,94,.92),
      rgba(3,22,47,.97)
    );

  box-shadow:
    0 20px 50px rgba(0,0,0,.32),
    0 0 28px rgba(34,168,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}


/* เส้นทองด้านบน */

.privacy-content .privacy-header::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;

  width:190px;
  height:3px;

  transform:translateX(-50%);

  border-radius:0 0 10px 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--privacy-gold),
      var(--privacy-gold-light),
      var(--privacy-gold),
      transparent
    );

  box-shadow:
    0 0 16px rgba(227,182,63,.55);
}


/* แสงด้านหลัง */

.privacy-content .privacy-header::after{
  content:"";
  position:absolute;
  right:-100px;
  bottom:-130px;

  width:250px;
  height:250px;

  border-radius:50%;

  background:rgba(34,168,255,.07);

  filter:blur(8px);

  pointer-events:none;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.privacy-content .privacy-eyebrow{
  position:relative;
  z-index:1;

  display:inline-block;

  margin-bottom:17px;
  padding:7px 16px;

  color:var(--privacy-gold-light);

  font-size:12px;
  font-weight:800;
  letter-spacing:2.4px;

  border:1px solid rgba(227,182,63,.32);
  border-radius:999px;

  background:rgba(227,182,63,.06);
}


/* =========================================================
   HEADER H1
   ========================================================= */

.privacy-content .privacy-header h1{
  position:relative;
  z-index:1;

  max-width:900px;
  margin:0 auto 21px;

  color:#fff;

  font-size:clamp(30px,4vw,47px);
  font-weight:800;
  line-height:1.32;

  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 22px rgba(34,168,255,.08);
}


.privacy-content .privacy-header h1 span{
  display:block;

  margin-top:7px;

  color:var(--privacy-gold-light);

  font-size:.67em;
  font-weight:700;
  letter-spacing:.5px;
}


/* =========================================================
   INTRO
   ========================================================= */

.privacy-content .privacy-intro{
  position:relative;
  z-index:1;

  max-width:850px;
  margin:0 auto;

  color:#c6d8eb;

  font-size:16px;
  line-height:1.9;
}


/* =========================================================
   BODY
   ========================================================= */

.privacy-content .privacy-body{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto;
}


/* =========================================================
   PRIVACY CARD
   ========================================================= */

.privacy-content .privacy-card{
  position:relative;

  display:grid;
  grid-template-columns:82px minmax(0,1fr);

  margin-bottom:18px;

  overflow:hidden;

  border:1px solid rgba(68,151,239,.19);
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(8,42,83,.90),
      rgba(3,22,47,.96)
    );

  box-shadow:
    0 14px 34px rgba(0,0,0,.21),
    inset 0 1px 0 rgba(255,255,255,.035);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.privacy-content .privacy-card:hover{
  transform:translateY(-3px);

  border-color:rgba(227,182,63,.34);

  box-shadow:
    0 19px 42px rgba(0,0,0,.28),
    0 0 20px rgba(34,168,255,.05);
}


/* =========================================================
   NUMBER COLUMN
   ========================================================= */

.privacy-content .privacy-number{
  position:relative;

  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding-top:30px;

  color:var(--privacy-gold-light);

  font-size:24px;
  font-weight:900;
  letter-spacing:1px;

  border-right:1px solid rgba(227,182,63,.15);

  background:
    linear-gradient(
      180deg,
      rgba(227,182,63,.075),
      rgba(34,168,255,.025)
    );

  text-shadow:
    0 0 12px rgba(227,182,63,.20);
}


/* จุดแสงใต้เลข */

.privacy-content .privacy-number::after{
  content:"";

  position:absolute;
  top:65px;
  left:50%;

  width:6px;
  height:6px;

  transform:translateX(-50%);

  border-radius:50%;

  background:var(--privacy-electric);

  box-shadow:
    0 0 10px rgba(34,168,255,.65);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.privacy-content .privacy-card-content{
  padding:30px 32px 31px;
}


/* =========================================================
   H2
   ========================================================= */

.privacy-content .privacy-card-content h2{
  position:relative;

  margin:0 0 21px;
  padding-bottom:13px;

  color:#fff;

  font-size:clamp(21px,3vw,27px);
  font-weight:800;
  line-height:1.45;
}


.privacy-content .privacy-card-content h2::after{
  content:"";

  position:absolute;
  bottom:0;
  left:0;

  width:70px;
  height:2px;

  border-radius:5px;

  background:
    linear-gradient(
      90deg,
      var(--privacy-gold-light),
      var(--privacy-gold),
      var(--privacy-electric)
    );

  box-shadow:
    0 0 8px rgba(227,182,63,.20);
}


/* =========================================================
   TEXT
   ========================================================= */

.privacy-content .privacy-card-content p{
  margin:0 0 17px;

  color:var(--privacy-muted);

  font-size:16px;
  line-height:1.9;
}


.privacy-content .privacy-card-content p:last-child{
  margin-bottom:0;
}


.privacy-content .privacy-card-content strong{
  color:#fff;
  font-weight:700;
}


/* =========================================================
   DIFFERENT SUBTLE HIGHLIGHTS
   FOR CARDS 3 / 5 / 7 / 9
   ========================================================= */

.privacy-content .privacy-card:nth-of-type(3),
.privacy-content .privacy-card:nth-of-type(5),
.privacy-content .privacy-card:nth-of-type(7),
.privacy-content .privacy-card:nth-of-type(9){

  background:
    radial-gradient(
      circle at 95% 10%,
      rgba(34,168,255,.055),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(9,47,91,.92),
      rgba(3,22,47,.97)
    );
}


/* =========================================================
   PRIVACY CONTACT
   ========================================================= */

.privacy-content .privacy-contact{
  position:relative;

  margin-top:40px;
  padding:42px 35px;

  overflow:hidden;
  text-align:center;

  border:1px solid rgba(227,182,63,.45);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(227,182,63,.11),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(34,168,255,.12),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #0a3b75 0%,
      #062851 48%,
      #03162f 100%
    );

  box-shadow:
    0 20px 45px rgba(0,0,0,.30),
    0 0 28px rgba(227,182,63,.05);
}


/* เส้นทองด้านบน */

.privacy-content .privacy-contact::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:155px;
  height:3px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--privacy-gold),
      var(--privacy-gold-light),
      var(--privacy-gold),
      transparent
    );

  box-shadow:
    0 0 14px rgba(227,182,63,.50);
}


/* =========================================================
   CONTACT LABEL
   ========================================================= */

.privacy-content .privacy-contact-label{
  display:inline-block;

  margin-bottom:12px;

  color:var(--privacy-gold-light);

  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
}


/* =========================================================
   CONTACT H2
   ========================================================= */

.privacy-content .privacy-contact h2{
  position:relative;

  margin:0 auto 19px;
  padding-bottom:14px;

  color:#fff;

  font-size:clamp(26px,4vw,35px);
  font-weight:800;
}


.privacy-content .privacy-contact h2::after{
  content:"";

  position:absolute;
  bottom:0;
  left:50%;

  width:70px;
  height:2px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      var(--privacy-electric),
      var(--privacy-gold-light)
    );
}


/* =========================================================
   CONTACT TEXT
   ========================================================= */

.privacy-content .privacy-contact > p{
  max-width:720px;
  margin:0 auto;

  color:#bed1e5;

  font-size:16px;
  line-height:1.85;
}


/* =========================================================
   CONTACT BUTTONS
   ========================================================= */

.privacy-content .privacy-contact-info{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:13px;

  margin-top:27px;
}


.privacy-content .privacy-contact-info a{
  min-width:220px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:13px 22px;

  color:#fff;

  font-size:14px;
  font-weight:800;
  line-height:1.4;

  text-decoration:none;

  border:1px solid rgba(227,182,63,.48);
  border-radius:10px;

  background:
    rgba(3,22,47,.55);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.privacy-content .privacy-contact-info a:hover{
  transform:translateY(-3px);

  color:#07182d;

  border-color:var(--privacy-gold-light);

  background:
    linear-gradient(
      135deg,
      var(--privacy-gold-light),
      var(--privacy-gold)
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    0 0 15px rgba(227,182,63,.12);
}


/* ปุ่มโทรให้เด่นตั้งแต่แรก */

.privacy-content
.privacy-contact-info a:first-child{

  color:#07182d;

  border-color:var(--privacy-gold-light);

  background:
    linear-gradient(
      135deg,
      var(--privacy-gold-light),
      var(--privacy-gold)
    );

  box-shadow:
    0 7px 18px rgba(227,182,63,.15);
}


.privacy-content
.privacy-contact-info a:first-child:hover{

  background:
    linear-gradient(
      135deg,
      #fff0ae,
      #e7b936
    );
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

.privacy-content ::selection{
  color:#06162d;
  background:var(--privacy-gold-light);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:850px){

  .privacy-content{
    padding:55px 20px 70px;
  }

  .privacy-content .privacy-header{
    padding:40px 28px 38px;
  }

  .privacy-content .privacy-card{
    grid-template-columns:65px minmax(0,1fr);
  }

  .privacy-content .privacy-number{
    font-size:20px;
  }

  .privacy-content .privacy-number::after{
    top:60px;
  }

  .privacy-content .privacy-card-content{
    padding:27px 25px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

  .privacy-content{
    padding:40px 14px 52px;
  }


  /* HEADER */

  .privacy-content .privacy-header{
    margin-bottom:28px;
    padding:31px 18px 30px;

    border-radius:15px;
  }

  .privacy-content .privacy-eyebrow{
    margin-bottom:13px;
    padding:6px 10px;

    font-size:9px;
    letter-spacing:1.3px;
  }

  .privacy-content .privacy-header h1{
    margin-bottom:17px;

    font-size:27px;
    line-height:1.4;
  }

  .privacy-content .privacy-header h1 span{
    font-size:.72em;
  }

  .privacy-content .privacy-intro{
    font-size:15px;
    line-height:1.85;
  }


  /* CARDS */

  .privacy-content .privacy-card{
    display:block;

    margin-bottom:14px;

    border-radius:13px;
  }

  .privacy-content .privacy-number{
    width:100%;

    display:block;

    padding:10px 18px;

    font-size:14px;

    border-right:0;
    border-bottom:
      1px solid rgba(227,182,63,.15);

    background:
      linear-gradient(
        90deg,
        rgba(227,182,63,.09),
        transparent
      );
  }

  .privacy-content .privacy-number::after{
    display:none;
  }

  .privacy-content .privacy-card-content{
    padding:23px 18px 24px;
  }

  .privacy-content
  .privacy-card-content h2{

    margin-bottom:19px;

    font-size:21px;
  }

  .privacy-content
  .privacy-card-content p{

    font-size:14px;
    line-height:1.85;
  }


  /* CONTACT */

  .privacy-content .privacy-contact{
    margin-top:28px;

    padding:31px 18px;

    border-radius:15px;
  }

  .privacy-content .privacy-contact-label{
    font-size:10px;
    letter-spacing:2px;
  }

  .privacy-content .privacy-contact h2{
    font-size:26px;
  }

  .privacy-content .privacy-contact > p{
    font-size:14px;
    line-height:1.8;
  }

  .privacy-content .privacy-contact-info{
    flex-direction:column;

    margin-top:22px;
  }

  .privacy-content .privacy-contact-info a{
    width:100%;
    min-width:0;

    padding:14px 15px;

    font-size:13px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:360px){

  .privacy-content .privacy-header h1{
    font-size:24px;
  }

  .privacy-content .privacy-card-content{
    padding:21px 15px 22px;
  }

  .privacy-content
  .privacy-card-content h2{

    font-size:19px;
  }

  .privacy-content
  .privacy-contact-info a{

    font-size:12px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .privacy-content .privacy-card,
  .privacy-content .privacy-contact-info a{
    transition:none;
  }

  .privacy-content .privacy-card:hover,
  .privacy-content .privacy-contact-info a:hover{
    transform:none;
  }

}
/* =========================================================
   LANNA MOVER - CONTACT US PAGE
   Navy + Gold + Electric Blue
   ========================================================= */

.contact-content{
  --ct-navy:#03162f;
  --ct-navy-2:#061f43;
  --ct-blue:#0b5fbd;
  --ct-electric:#22a8ff;
  --ct-gold:#e3b63f;
  --ct-gold-light:#ffe28a;
  --ct-text:#eaf3ff;
  --ct-muted:#afc3dc;

  position:relative;
  overflow:hidden;
  padding:70px 24px 85px;
  color:var(--ct-text);

  background:
    radial-gradient(circle at 10% 6%,
      rgba(34,168,255,.16),
      transparent 28%),
    radial-gradient(circle at 92% 24%,
      rgba(227,182,63,.08),
      transparent 25%),
    linear-gradient(
      180deg,
      #03162f 0%,
      #061d3b 48%,
      #020e20 100%
    );
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.contact-content::before{
  content:"";
  position:absolute;
  top:-280px;
  left:50%;

  width:900px;
  height:900px;

  transform:translateX(-50%);
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(34,168,255,.12) 0%,
      rgba(34,168,255,.035) 40%,
      transparent 70%
    );

  pointer-events:none;
}


/* =========================================================
   HEADER
   ========================================================= */

.contact-content .contact-header{
  position:relative;
  z-index:1;

  width:min(100%,1100px);
  margin:0 auto 45px;
  padding:50px 42px 46px;

  text-align:center;
  overflow:hidden;

  border:1px solid rgba(227,182,63,.38);
  border-radius:22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.13),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(10,52,101,.94),
      rgba(3,22,47,.98)
    );

  box-shadow:
    0 22px 55px rgba(0,0,0,.34),
    0 0 32px rgba(34,168,255,.07),
    inset 0 1px 0 rgba(255,255,255,.06);
}


/* เส้นทองบน Header */

.contact-content .contact-header::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:200px;
  height:3px;

  transform:translateX(-50%);

  border-radius:0 0 10px 10px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ct-gold),
      var(--ct-gold-light),
      var(--ct-gold),
      transparent
    );

  box-shadow:
    0 0 17px rgba(227,182,63,.58);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.contact-content .contact-eyebrow{
  position:relative;
  z-index:1;

  display:inline-block;

  margin-bottom:17px;
  padding:7px 16px;

  color:var(--ct-gold-light);

  font-size:12px;
  font-weight:800;
  letter-spacing:2.5px;

  border:1px solid rgba(227,182,63,.34);
  border-radius:999px;

  background:rgba(227,182,63,.06);
}


/* =========================================================
   HEADER H1
   ========================================================= */

.contact-content .contact-header h1{
  position:relative;
  z-index:1;

  max-width:920px;

  margin:0 auto 21px;

  color:#fff;

  font-size:clamp(30px,4vw,47px);
  font-weight:800;
  line-height:1.32;

  text-shadow:
    0 2px 12px rgba(0,0,0,.35),
    0 0 22px rgba(34,168,255,.09);
}


.contact-content .contact-header h1 span{
  display:block;

  margin-top:8px;

  color:var(--ct-gold-light);

  font-size:.65em;
  font-weight:700;
  line-height:1.45;
}


/* =========================================================
   INTRO
   ========================================================= */

.contact-content .contact-intro{
  position:relative;
  z-index:1;

  max-width:850px;

  margin:0 auto;

  color:#c6d8eb;

  font-size:16px;
  line-height:1.9;
}


/* =========================================================
   MAIN BODY
   ========================================================= */

.contact-content .contact-body{
  position:relative;
  z-index:1;

  width:min(100%,1100px);

  margin:0 auto;
}


/* =========================================================
   COMMON SECTION HEADING
   ========================================================= */

.contact-content .contact-section-heading{
  margin-bottom:29px;

  text-align:center;
}


.contact-content .contact-section-heading > span{
  display:inline-block;

  margin-bottom:8px;

  color:var(--ct-gold-light);

  font-size:11px;
  font-weight:900;
  letter-spacing:2.7px;
}


.contact-content .contact-section-heading h2{
  margin:0 0 9px;

  color:#fff;

  font-size:clamp(26px,4vw,35px);
  font-weight:800;
  line-height:1.4;
}


.contact-content .contact-section-heading p{
  max-width:720px;

  margin:0 auto;

  color:#9fb7d0;

  font-size:15px;
  line-height:1.75;
}


/* =========================================================
   CONTACT CHANNELS PANEL
   ========================================================= */

.contact-content .contact-channels{
  position:relative;

  padding:39px 34px 35px;

  border:1px solid rgba(227,182,63,.27);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.09),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      rgba(7,38,77,.96),
      rgba(2,17,38,.98)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.27);
}


/* =========================================================
   CONTACT CHANNEL GRID
   ========================================================= */

.contact-content .contact-channel-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:14px;
}


/* =========================================================
   CHANNEL CARDS
   ========================================================= */

.contact-content .contact-channel-card{
  position:relative;

  min-width:0;
  min-height:215px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:25px 15px;

  overflow:hidden;
  text-align:center;
  text-decoration:none;

  border:1px solid rgba(34,168,255,.20);
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(11,65,124,.64),
      rgba(3,23,49,.96)
    );

  box-shadow:
    0 10px 27px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}


.contact-content .contact-channel-card::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:70px;
  height:2px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ct-gold-light),
      transparent
    );

  opacity:.7;
}


.contact-content .contact-channel-card:hover{
  transform:translateY(-6px);

  border-color:rgba(227,182,63,.60);

  background:
    linear-gradient(
      145deg,
      rgba(14,82,154,.78),
      rgba(3,25,54,.98)
    );

  box-shadow:
    0 18px 36px rgba(0,0,0,.32),
    0 0 20px rgba(34,168,255,.09),
    0 0 14px rgba(227,182,63,.07);
}


/* =========================================================
   CHANNEL LABEL
   ========================================================= */

.contact-content .contact-channel-label{
  margin-bottom:13px;

  color:var(--ct-gold-light);

  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
}


/* =========================================================
   CHANNEL TITLE
   ========================================================= */

.contact-content .contact-channel-card h3{
  margin:0 0 10px;

  color:#fff;

  font-size:16px;
  font-weight:800;
  line-height:1.45;
}


.contact-content .contact-channel-card strong{
  max-width:100%;

  margin-bottom:19px;

  color:#dcecff;

  font-size:15px;
  font-weight:700;
  line-height:1.45;

  overflow-wrap:anywhere;
}


/* =========================================================
   CHANNEL ACTION
   ========================================================= */

.contact-content .contact-channel-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:auto;
  padding:9px 12px;

  color:#07182d;

  font-size:11px;
  font-weight:900;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      var(--ct-gold-light),
      var(--ct-gold)
    );
}


/* =========================================================
   PHONE CARD EMPHASIS
   ========================================================= */

.contact-content .contact-phone{
  border-color:rgba(227,182,63,.43);

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(227,182,63,.10),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(13,72,136,.72),
      rgba(3,23,49,.97)
    );
}


/* =========================================================
   SEO ARTICLE
   ========================================================= */

.contact-content .contact-article{
  position:relative;

  margin-top:38px;
  padding:38px;

  border:1px solid rgba(68,151,239,.19);
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(8,42,83,.91),
      rgba(3,22,47,.96)
    );

  box-shadow:
    0 16px 38px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
}


/* แถบด้านซ้าย */

.contact-content .contact-article::before{
  content:"";

  position:absolute;

  top:32px;
  bottom:32px;
  left:0;

  width:3px;

  border-radius:0 5px 5px 0;

  background:
    linear-gradient(
      180deg,
      var(--ct-gold-light),
      var(--ct-gold),
      var(--ct-electric)
    );
}


/* =========================================================
   ARTICLE SECTIONS
   ========================================================= */

.contact-content .contact-article-section{
  margin-top:38px;
}


.contact-content
.contact-article-section:first-child{

  margin-top:0;
}


.contact-content .contact-article-section h2{
  position:relative;

  margin:0 0 20px;
  padding-bottom:13px;

  color:#fff;

  font-size:clamp(22px,3vw,28px);
  font-weight:800;
  line-height:1.45;
}


.contact-content
.contact-article-section h2::after{

  content:"";

  position:absolute;
  bottom:0;
  left:0;

  width:72px;
  height:2px;

  border-radius:4px;

  background:
    linear-gradient(
      90deg,
      var(--ct-gold-light),
      var(--ct-gold),
      var(--ct-electric)
    );
}


.contact-content .contact-article-section p{
  margin:0 0 17px;

  color:var(--ct-muted);

  font-size:16px;
  line-height:1.9;
}


.contact-content
.contact-article-section p:last-child{

  margin-bottom:0;
}


.contact-content .contact-article strong{
  color:#fff;
  font-weight:700;
}


/* =========================================================
   QUICK INFO BOX
   ========================================================= */

.contact-content .contact-info-box{
  position:relative;

  margin:40px 0;
  padding:30px;

  border:1px solid rgba(227,182,63,.31);
  border-radius:16px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(227,182,63,.08),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      rgba(10,59,117,.72),
      rgba(3,22,47,.91)
    );
}


.contact-content .contact-info-box > h2{
  margin:0 0 23px;

  color:var(--ct-gold-light);

  font-size:23px;
  font-weight:800;
  line-height:1.45;
}


/* =========================================================
   INFO GRID
   ========================================================= */

.contact-content .contact-info-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:12px;
}


.contact-content .contact-info-item{
  padding:19px 15px;

  border:1px solid rgba(34,168,255,.15);
  border-radius:11px;

  background:rgba(2,18,39,.42);
}


.contact-content .contact-info-item > span{
  width:31px;
  height:31px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:13px;

  color:#07182d;

  font-size:11px;
  font-weight:900;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      var(--ct-gold-light),
      var(--ct-gold)
    );
}


.contact-content .contact-info-item strong{
  display:block;

  margin-bottom:7px;

  color:#fff;

  font-size:15px;
}


.contact-content .contact-info-item p{
  margin:0;

  color:#9fb7d0;

  font-size:13px;
  line-height:1.65;
}


/* =========================================================
   OFFICES SECTION
   ========================================================= */

.contact-content .contact-offices{
  position:relative;

  margin-top:38px;
  padding:40px 34px 35px;

  border:1px solid rgba(227,182,63,.27);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,168,255,.08),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(7,37,75,.96),
      rgba(2,17,38,.98)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.27);
}


/* =========================================================
   OFFICE GRID
   ========================================================= */

.contact-content .office-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:15px;
}


/* =========================================================
   OFFICE CARD
   ========================================================= */

.contact-content .office-card{
  position:relative;

  padding:25px 24px;

  overflow:hidden;

  border:1px solid rgba(34,168,255,.17);
  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(10,57,109,.62),
      rgba(3,23,49,.94)
    );

  box-shadow:
    0 10px 25px rgba(0,0,0,.20);

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


.contact-content .office-card:hover{
  transform:translateY(-3px);

  border-color:rgba(227,182,63,.40);

  box-shadow:
    0 15px 30px rgba(0,0,0,.27);
}


/* HQ เด่นขึ้น */

.contact-content .office-hq{
  border-color:rgba(227,182,63,.38);

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(227,182,63,.09),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(11,65,124,.72),
      rgba(3,23,49,.96)
    );
}


/* =========================================================
   OFFICE LABEL
   ========================================================= */

.contact-content .office-label{
  display:inline-block;

  margin-bottom:10px;

  color:var(--ct-gold-light);

  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
}


/* =========================================================
   OFFICE TITLE
   ========================================================= */

.contact-content .office-card h3{
  margin:0 0 12px;

  color:#fff;

  font-size:19px;
  font-weight:800;
  line-height:1.45;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.contact-content .office-card address{
  margin:0;

  color:#aec2d8;

  font-size:14px;
  font-style:normal;
  line-height:1.8;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.contact-content .contact-final-cta{
  position:relative;

  margin-top:40px;
  padding:45px 35px;

  overflow:hidden;
  text-align:center;

  border:1px solid rgba(227,182,63,.48);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(227,182,63,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(34,168,255,.15),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #0b427f 0%,
      #062b58 48%,
      #03162f 100%
    );

  box-shadow:
    0 20px 48px rgba(0,0,0,.32),
    0 0 28px rgba(34,168,255,.06);
}


.contact-content .contact-final-cta::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  width:180px;
  height:3px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ct-gold),
      var(--ct-gold-light),
      var(--ct-gold),
      transparent
    );

  box-shadow:
    0 0 15px rgba(227,182,63,.50);
}


/* =========================================================
   FINAL CTA TEXT
   ========================================================= */

.contact-content
.contact-final-cta > span{

  display:inline-block;

  margin-bottom:10px;

  color:var(--ct-gold-light);

  font-size:11px;
  font-weight:900;
  letter-spacing:3px;
}


.contact-content .contact-final-cta h2{
  margin:0 0 13px;

  color:#fff;

  font-size:clamp(28px,4vw,38px);
  font-weight:800;
}


.contact-content .contact-final-cta p{
  max-width:680px;

  margin:0 auto;

  color:#bfd2e6;

  font-size:16px;
  line-height:1.8;
}


/* =========================================================
   FINAL BUTTONS
   ========================================================= */

.contact-content .contact-final-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:13px;

  margin-top:28px;
}


.contact-content .contact-btn{
  min-width:210px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:13px 22px;

  font-size:14px;
  font-weight:900;

  text-decoration:none;

  border-radius:10px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}


/* โทร */

.contact-content .contact-btn-primary{
  color:#07182d;

  border:1px solid var(--ct-gold-light);

  background:
    linear-gradient(
      135deg,
      var(--ct-gold-light),
      var(--ct-gold)
    );

  box-shadow:
    0 8px 20px rgba(227,182,63,.16);
}


/* LINE */

.contact-content .contact-btn-secondary{
  color:#fff;

  border:1px solid rgba(34,168,255,.55);

  background:
    linear-gradient(
      135deg,
      rgba(20,111,205,.88),
      rgba(7,61,119,.92)
    );
}


.contact-content .contact-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 13px 28px rgba(0,0,0,.30),
    0 0 14px rgba(227,182,63,.10);
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

.contact-content ::selection{
  color:#06162d;
  background:var(--ct-gold-light);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:950px){

  .contact-content
  .contact-channel-grid{

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

  .contact-content
  .contact-info-grid{

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

}


@media (max-width:800px){

  .contact-content{
    padding:55px 20px 70px;
  }

  .contact-content .contact-header{
    padding:40px 28px 38px;
  }

  .contact-content .contact-article{
    padding:32px 28px;
  }

  .contact-content .contact-channels,
  .contact-content .contact-offices{
    padding:35px 25px 30px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

  .contact-content{
    padding:40px 14px 52px;
  }


  /* HEADER */

  .contact-content .contact-header{
    margin-bottom:28px;

    padding:31px 18px 30px;

    border-radius:15px;
  }

  .contact-content .contact-eyebrow{
    margin-bottom:13px;

    padding:6px 10px;

    font-size:9px;
    letter-spacing:1.3px;
  }

  .contact-content .contact-header h1{
    margin-bottom:17px;

    font-size:27px;
    line-height:1.4;
  }

  .contact-content
  .contact-header h1 span{

    font-size:.67em;
  }

  .contact-content .contact-intro{
    font-size:15px;
    line-height:1.85;
  }


  /* CHANNEL SECTION */

  .contact-content .contact-channels{
    padding:30px 14px 20px;

    border-radius:15px;
  }

  .contact-content
  .contact-channel-grid{

    grid-template-columns:1fr;

    gap:10px;
  }

  .contact-content
  .contact-channel-card{

    min-height:175px;

    padding:22px 16px;

    border-radius:11px;
  }

  .contact-content
  .contact-channel-card strong{

    font-size:14px;
  }


  /* ARTICLE */

  .contact-content .contact-article{
    margin-top:28px;

    padding:
      26px 19px 26px 22px;

    border-radius:14px;
  }

  .contact-content
  .contact-article::before{

    top:22px;
    bottom:22px;

    width:2px;
  }

  .contact-content
  .contact-article-section{

    margin-top:32px;
  }

  .contact-content
  .contact-article-section h2{

    font-size:21px;
  }

  .contact-content
  .contact-article-section p{

    font-size:15px;
    line-height:1.85;
  }


  /* INFO BOX */

  .contact-content .contact-info-box{
    margin:30px 0;

    padding:23px 17px;

    border-radius:13px;
  }

  .contact-content
  .contact-info-box > h2{

    font-size:20px;
  }

  .contact-content
  .contact-info-grid{

    grid-template-columns:1fr;
  }

  .contact-content
  .contact-info-item{

    padding:17px 15px;
  }


  /* OFFICES */

  .contact-content .contact-offices{
    margin-top:28px;

    padding:30px 14px 20px;

    border-radius:15px;
  }

  .contact-content .office-grid{
    grid-template-columns:1fr;

    gap:10px;
  }

  .contact-content .office-card{
    padding:21px 18px;

    border-radius:11px;
  }

  .contact-content .office-card h3{
    font-size:17px;
  }


  /* FINAL CTA */

  .contact-content
  .contact-final-cta{

    margin-top:28px;

    padding:34px 18px;

    border-radius:15px;
  }

  .contact-content
  .contact-final-cta h2{

    font-size:27px;
  }

  .contact-content
  .contact-final-cta p{

    font-size:14px;
  }

  .contact-content
  .contact-final-actions{

    flex-direction:column;

    margin-top:23px;
  }

  .contact-content .contact-btn{
    width:100%;
    min-width:0;

    padding:14px 15px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:360px){

  .contact-content
  .contact-header h1{

    font-size:24px;
  }

  .contact-content
  .contact-article{

    padding:
      23px 16px 23px 19px;
  }

  .contact-content
  .contact-section-heading h2{

    font-size:24px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  .contact-content .contact-channel-card,
  .contact-content .office-card,
  .contact-content .contact-btn{
    transition:none;
  }

  .contact-content .contact-channel-card:hover,
  .contact-content .office-card:hover,
  .contact-content .contact-btn:hover{
    transform:none;
  }

}