@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;600;700;800&display=swap');
*
{
  box-sizing:border-box
}

:root
{
  --navy:#071a36;
  --blue:#0b58a8;
  --red:#e91d2b;
  --paper:#fff;
  --text:#1c2734;
  --muted:#697889;
  --line:#e6ebf0;
  --soft:#f5f8fb;
}

html
{
  scroll-behavior:smooth
}

body
{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:"Noto Sans Lao",Arial,sans-serif;
  line-height:1.75
}

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

.site-head
{
  background:#06172f;
  color:#fff;
  position:sticky;
  top:0;
  z-index:30;
  border-bottom:3px solid var(--red)
}

.site-head-inner
{
  max-width:1180px;
  margin:auto;
  height:76px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:30px
}

.site-logo img
{
  width:205px;
  max-height:52px;
  object-fit:contain;
  display:block
}

.site-nav
{
  margin-left:auto;
  display:flex;
  gap:22px;
  align-items:center;
  font-size:13px;
  font-weight:700
}

.site-nav a:hover
{
  color:#8fc7ff
}

.page-hero
{
  background:linear-gradient(135deg,#071a36,#0a3f79);
  color:#fff;
  padding:54px 22px
}

.page-hero-inner
{
  max-width:980px;
  margin:auto
}

.breadcrumb
{
  font-size:12px;
  color:#a9c6e4;
  margin-bottom:12px
}

.page-hero h1
{
  font-size:clamp(34px,5vw,54px);
  line-height:1.15;
  margin:0 0 12px
}

.page-hero p
{
  margin:0;
  color:#c8d8e8;
  max-width:760px
}

.article
{
  max-width:920px;
  margin:0 auto;
  padding:55px 22px 90px
}

.intro
{
  font-size:17px;
  color:#4b5d70;
  margin-bottom:34px
}

.section-rule
{
  height:1px;
  background:var(--line);
  margin:46px 0
}

.step-block
{
  margin:0 0 48px
}

.step-label
{
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:7px 12px;
  border-radius:999px;
  margin-bottom:9px
}

.step-block h2
{
  margin:0 0 10px;
  font-size:27px;
  line-height:1.35;
  color:#142338
}

.step-block p
{
  margin:0 0 15px;
  color:#536476
}

.step-block ul
{
  margin:8px 0 18px;
  padding-left:24px;
  color:#45576a
}

.step-block li
{
  margin:5px 0
}

.tutorial-image
{
  margin:20px 0 0;
  border:1px solid #dfe6ed;
  background:#f7f9fb;
  box-shadow:0 12px 28px #10243a12
}

.tutorial-image img
{
  display:block;
  width:100%;
  height:auto
}

.asset-tag
{
  border-top:1px solid var(--line);
  background:#f8fafc;
  padding:10px 13px;
  font:12px/1.5 monospace;
  color:#526477;
  overflow-wrap:anywhere
}

.asset-tag b
{
  color:#d91c2b
}

.notice
{
  padding:17px 19px;
  border-left:4px solid var(--blue);
  background:#eef6ff;
  color:#40576f;
  margin:22px 0
}

.warning
{
  padding:17px 19px;
  border-left:4px solid var(--red);
  background:#fff3f4;
  color:#65444a;
  margin:22px 0
}

.article-nav
{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:42px
}

.btn
{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:7px;
  font-weight:800;
  font-size:13px
}

.btn-red
{
  background:var(--red);
  color:#fff
}

.btn-blue
{
  background:var(--blue);
  color:#fff
}

.btn-light
{
  background:#eef2f6;
  color:#26394e
}

.subnav
{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 38px
}

.subnav a
{
  padding:9px 13px;
  border:1px solid #d9e2ea;
  border-radius:7px;
  background:#fff;
  font-size:13px;
  font-weight:700;
  color:#35516d
}

.footer
{
  background:#06172f;
  color:#849ab1;
  padding:30px 22px;
  text-align:center;
  font-size:12px
}

.footer img
{
  width:180px;
  max-height:48px;
  object-fit:contain;
  margin-bottom:8px
}

.asset-summary
{
  margin-top:55px;
  border:1px dashed #aebdcb;
  background:#fbfcfd;
  padding:20px
}

.asset-summary h3
{
  margin:0 0 8px;
  color:#26394e
}

.asset-summary code
{
  font-size:12px;
  color:#b51c29
}

@media(max-width:720px)
{
  .site-head-inner
  {
    height:66px;
    padding:0 14px
  }
  .site-logo img
  {
    width:155px
  }
  .site-nav a:not(.keep)
  {
    display:none
  }
  .page-hero
  {
    padding:42px 16px
  }
  .article
  {
    padding:42px 16px 70px
  }
  .step-block h2
  {
    font-size:23px
  }
}

.article-nav .btn-wide
{
  flex-basis:100%;
  width:100%;
  font-size:15px;
  min-height:48px
}