@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;600;700;800&display=swap');
:root
{
  --blue:#064f9f;
  --deep:#032f67;
  --red:#ef1723;
  --ice:#eef6ff;
  --ink:#f7fbff;
  --muted:#b6c8dd;
  --panel:#082d5b;
  --line:rgba(111,184,255,.24)
}

*
{
  box-sizing:border-box
}

html
{
  scroll-behavior:smooth
}

body
{
  margin:0;
  background:linear-gradient(180deg,#041d3d,#021126);
  color:var(--ink);
  font-family:'Noto Sans Lao',Arial,sans-serif;
  font-size:16px;
  line-height:1.75
}

a
{
  color:inherit;
  text-decoration:none
}

img
{
  max-width:100%;
  display:block
}

header
{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(2,31,68,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 30px rgba(0,21,46,.4)
}

.nav
{
  max-width:1320px;
  height:78px;
  margin:auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:24px
}

.brand img
{
  width:210px;
  max-height:52px;
  object-fit:contain
}

.nav nav
{
  display:flex;
  gap:22px;
  margin-left:auto;
  color:#c7d8eb;
  font-size:14px
}

.nav nav a:hover,.nav nav a[aria-current=page]
{
  color:#8fc7ff
}

.actions
{
  display:flex;
  gap:10px
}

.btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 19px;
  border-radius:12px;
  font:800 12px/1 Arial,sans-serif;
  letter-spacing:.6px
}

.signin
{
  border:1px solid #70b3ff;
  background:linear-gradient(135deg,#0d68bf,#063e83)
}

.open
{
  border:1px solid #ff6670;
  background:linear-gradient(135deg,#ff3540,#d9000e)
}

.menu
{
  display:none;
  margin-left:auto;
  background:none;
  border:0;
  color:#fff;
  font-size:26px
}

.guide-hero
{
  padding:82px 24px 58px;
  background:radial-gradient(circle at 80% 10%,rgba(26,103,188,.36),transparent 38%),linear-gradient(120deg,#052c5c,#031a38);
  border-bottom:1px solid var(--line)
}

.hero-inner,.layout,.footer-inner
{
  max-width:1120px;
  margin:auto
}

.crumbs
{
  color:#91add0;
  font-size:14px
}

.eyebrow
{
  margin-top:25px;
  color:#72b8ff;
  font-weight:800;
  letter-spacing:2px;
  font-size:12px
}

.guide-hero h1
{
  max-width:830px;
  margin:10px 0 12px;
  font-size:clamp(38px,6vw,62px);
  line-height:1.18
}

.guide-hero p
{
  max-width:760px;
  color:#d2e3f5;
  font-size:18px
}

.guide-tabs
{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px
}

.guide-tabs a
{
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  color:#cfdef0
}

.guide-tabs a.active
{
  background:#0c5eae;
  border-color:#72b8ff;
  color:#fff
}

.layout
{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:42px;
  padding:54px 24px 90px
}

.toc
{
  position:sticky;
  top:104px;
  align-self:start;
  padding:22px;
  background:rgba(8,45,91,.7);
  border:1px solid var(--line);
  border-radius:18px
}

.toc b
{
  font-size:14px
}

.toc a
{
  display:block;
  margin-top:11px;
  color:#afc4db;
  font-size:14px
}

.toc a:hover
{
  color:#fff
}

.content
{
  min-width:0
}

.summary
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:28px
}

.summary div
{
  padding:18px;
  background:linear-gradient(145deg,#082f61,#061f42);
  border:1px solid var(--line);
  border-radius:16px
}

.summary strong
{
  display:block;
  color:#7ec0ff;
  font-size:13px
}

.summary span
{
  font-size:15px
}

.notice
{
  margin:24px 0;
  padding:20px 22px;
  background:#071f40;
  border-left:4px solid var(--red);
  border-radius:0 14px 14px 0;
  color:#d3e3f4
}

.step
{
  margin:22px 0;
  padding:26px;
  background:linear-gradient(145deg,#082d5b,#061f42);
  border:1px solid var(--line);
  border-radius:20px
}

.step-head
{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px
}

.num
{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#ff3540,#d9000e);
  font-weight:800
}

.step h2,.method h2
{
  margin:0;
  font-size:24px
}

.step ol,.step ul
{
  margin:12px 0 0;
  padding-left:26px;
  color:#d3e1f0
}

.step li
{
  margin:7px 0
}

.shot
{
  margin-top:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:#fff
}

.methods
{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin:26px 0
}

.method
{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(8,45,91,.65)
}

.method h2
{
  font-size:18px
}

.method p
{
  color:var(--muted);
  font-size:14px
}

.method a
{
  color:#86c7ff;
  font-weight:700
}

.section-title
{
  margin:45px 0 18px;
  font-size:30px
}

.risk
{
  padding:24px;
  background:rgba(239,23,35,.08);
  border:1px solid rgba(255,70,83,.35);
  border-radius:18px
}

.cta
{
  margin-top:42px;
  padding:30px;
  text-align:center;
  background:linear-gradient(120deg,#073d7b,#09295a);
  border:1px solid var(--line);
  border-radius:22px
}

.cta h2
{
  margin:0 0 8px
}

.cta p
{
  color:var(--muted)
}

footer
{
  padding:42px 20px;
  background:#021126;
  border-top:1px solid var(--line);
  text-align:center;
  color:#879bb3
}

.footer-inner img
{
  width:220px;
  margin:0 auto 14px
}

.fine
{
  font-size:12px
}

.skip
{
  position:absolute;
  left:-9999px
}

.skip:focus
{
  left:12px;
  top:12px;
  z-index:99;
  background:#fff;
  color:#000;
  padding:10px
}

@media(max-width:980px)
{
  .nav nav
  {
    display:none;
    position:absolute;
    top:72px;
    left:16px;
    right:16px;
    padding:18px;
    flex-direction:column;
    background:#052754;
    border:1px solid var(--line);
    border-radius:16px
  }
  .nav nav.show
  {
    display:flex
  }
  .menu
  {
    display:block
  }
  .actions
  {
    margin-left:auto
  }
  .layout
  {
    grid-template-columns:1fr
  }
  .toc
  {
    position:static
  }
  .methods
  {
    grid-template-columns:1fr
  }
  .summary
  {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:640px)
{
  .nav
  {
    height:68px;
    padding:0 14px
  }
  .brand img
  {
    width:138px
  }
  .signin
  {
    display:none
  }
  .open
  {
    padding:0 12px;
    font-size:10px
  }
  .guide-hero
  {
    padding:52px 18px 42px
  }
  .guide-hero p
  {
    font-size:16px
  }
  .layout
  {
    padding:34px 18px 65px
  }
  .summary
  {
    grid-template-columns:1fr
  }
  .step
  {
    padding:20px
  }
  .step h2
  {
    font-size:20px
  }
}